body{margin:0px;font-size:20px;line-height:2em;font-family:"Arial Black","verdana", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo",sans-serif;}
img{border:none;max-width:100%;margin:0px;padding:0px;display:block;}
a{text-decoration:none;color:black;}
a:hover,a img:hover{opacity:.8;transition-duration:.3s;transform:translate(1px,1px)}
ul,ol{list-style-type:none;margin:0px;padding:0px;}
.spbr{display:none;}
img.pc{display:block;}
img.sp{display:none;}
.kana{font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo"}

/* 本文ヘッダー */
article,footer{width:50em;margin:0 auto;display:block;}

.home header{width:100%;height:100vh;overflow:hidden;position:relative;}
.home header video{min-width:100%;min-height:100%;width:auto;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
header h1{position:absolute;color:rgba(255,255,255,.7);z-index:1;width:100%;text-align:center;font-weight:normal;letter-spacing:.5em;font-size:2vh;transform:rotate(90deg);right:calc(-50% + 130px);top:55%;margin:0;padding:0}
header h1 span{color:rgba(255,255,255,1);font-weight:900}
.home header ul.pc_nav{position:absolute;z-index:0;left:5em;bottom:5em;z-index:1;}
.home header ul.pc_nav a{color:white;font-weight:bold;position:relative;}
.home header ul.pc_nav a::after{content:'';position:absolute;top:.5em;left:-210%;width:0%;height: 2px;background:white;transition: all .3s;transform: scale(1);}
.home header ul.pc_nav a:hover::after{width:200%;}

.home header nav{position:fixed;z-index:0;right:100px;top:2em;z-index:2;}
.movie__btn button{position:fixed;z-index:0;right:2em;bottom:2em;z-index:2;border-radius:.5em;box-shadow:.25em .25em .25em rgba(0,0,0,.3);background:rgba(255,255,255,.3);border:none;}
.movie__btn button:hover{cursor : pointer;}

.menu-trigger,.menu-trigger span{display:inline-block;transition:all .4s;box-sizing:border-box;cursor:pointer;}
.menu-trigger{position:relative;width:50px;height:50px;z-index:99999;float:right;margin-top:0px;}
.menu-trigger span{position:absolute;background:white;width:30px;height:2px;left:0;margin:auto;}
.menu-trigger span:nth-of-type(1){top:15px;animation:anime01 4s infinite;transform-origin:right;}
@keyframes anime01{0%{transform: scale(1, 1);} 50% {transform: scale(2, 1)} 100% {transform: scale(1, 1)}}
.menu-trigger span:nth-of-type(2){top:0;bottom:0;animation:anime02 3s infinite;transform-origin:right;}
@keyframes anime02{0%{transform: scale(1, 1);} 50% {transform: scale(2, 1)} 100% {transform: scale(1, 1)}}
.menu-trigger span:nth-of-type(3){bottom:15px;animation:anime03 5s infinite;transform-origin:right;}
@keyframes anime03{0%{transform: scale(1, 1);} 50% {transform: scale(2, 1)} 100% {transform: scale(1, 1)}}
.menu-trigger.active span:nth-of-type(1){animation:none;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);background:black;}
.menu-trigger.active span:nth-of-type(2){opacity:0;}
.menu-trigger.active span:nth-of-type(3){animation:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:black;bottom:12px}
.g-nav{display:none;position:absolute;background:white;opacity: 0.95;padding:5em;z-index:99998;right:0;overflow:hidden;}
.g-nav a{font-weight:bold;position:relative;}
.g-nav a::after{content:'';position:absolute;top:.5em;left:-210%;width:0%;height: 2px;background:black;transition: all .3s;transform: scale(1);}
.g-nav a:hover::after{width:200%;}

.page header{width:60em;margin:0 auto;position:relative;overflow:visible;}

.page header nav{position:fixed;right:0%;top:.50em;z-index:2;}

.page header img{height:37.5px;margin:1em 0 0 1em;}
.page header ul.page_nav{position:absolute;display:flex;top:2.5em;right:0em;}
.page header ul.page_nav li{padding:0 1em;font-weight:bold;font-size:.9em;}
.page header ul.page_nav li.current{background:black;}
.page header ul.page_nav li.current a{color:white;}
.page header h1{color:rgba(0,0,0,.7);right:calc(-50% + 30px);top:50%;position:fixed;}
.page header h1 span{color:rgba(0,0,0,1);}
.page .menu-trigger span{background:black;}
.page article{width:50em;margin:5em auto;}
.page article section h1{text-align:center;font-size:2em;margin:5em 0 2em}
.page article section table{width:30em;margin:1em auto;border-collapse:collapse;font-size:.75em;}
.page article section table th,
.page article section table td{border-bottom:1px solid black;line-height:1.4em;padding:.75em 0}
.page article section table th{text-align:left;width:8em;font-weight:normal}

.page article section iframe{width:100%;}

section#works ul{display:flex;flex-wrap:wrap;width:100%;}
section#works ul li{width:calc((100%/4 - 2em) - 1px);margin:0 2em 4em 0;border-left:1px solid black;border-bottom:1px solid black;}
section#works h2,
section#works h3{font-family: 'Oswald', sans-serif;display:inline-block;margin:0;padding:0}
section#works h2{color:#595757;margin:0 .4em}
section#works ul li:nth-of-type(4n) h2{color:#c9caca}
section#works h3{font-size:1em;vertical-align:top;}

.contact article{width:100%;background:#efefef;margin:10em 0 0;padding:5em 0}
.contact article section#contact h1{margin-top:-3em!important;}
section#contact .inn{width:30em;margin:0 auto;padding:5em 10em 1em;border-radius:1em;background:white;}
section#contact .inn .waku{width:100%;;padding:1.5em 0em;border-radius:.5em;background:#efefef;text-align:center}
section#contact .inn .waku h2{font-size:1.85em;margin:0}
section#contact .inn .waku h2 span{font-size:.5em;padding-right:1em;font-weight:normal}
section#contact .inn .waku p{margin:0}
section#contact .inn h5{margin:5em 0 0;padding:0}
section#contact .inn p.kome{font-size:.6em;line-height:1.1rem;}

section#contact iframe.pc{display:block;width:100%;border:none;height:750px;}
section#contact iframe.sp{display:none;}

.security_inn{background:#efefef;padding:3em;font-size:.75em;line-height:1.5;font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo",sans-serif;color:#333}
.security_inn h3{margin-top:3em;}
p.bottom_text{text-align:right;border-top:1px solid black;padding-top:2em;margin-top:2em;}
.security_inn ol, .security_inn ul{font-size:.85em;border:1px solid #aaa;padding:2em;}
.security_inn ol li, .security_inn ul li{margin-left:1.5em;}
.security_inn ol{list-style-type:decimal}
.security_inn ul h4{margin:0;}
.security_inn ul li a{color:royalblue;}


a.pagetop{width:3em;margin:3em auto 1em;display:block;}

footer{background:#EFEFEF;width:100%;padding:3em 0}
footer .inn{width:60em;margin:0 auto;position:relative;}
footer .inn img{height:2.5em;}
footer .inn ul{position:absolute;display:flex;top:0em;right:0em;}
footer .inn ul li{padding:0 1em;font-weight:bold;font-size:.9em;}
footer .inn p.p_link{font-size:.65em;position:absolute;bottom:-2.5em;right:1em;}
footer .inn p.kana{font-size:.5em;position:absolute;bottom:-6em;right:1em;}

p.home_p-link{position:absolute;bottom:.1em;text-align:center;;color:white;position:absolute;font-size:.75em;width:100%;}
p.home_p-link a{color:white;}

@media all and (min-width: 0) and (max-width: 749px)  {
body{font-size:2vw;}
img.sp{display:block;}
img.pc{display:none;}
header,footer,article{width:100%;}
header nav{right:0%;}
header ul.pc_nav{display:none;}
header h1{right:calc(-50% + 50px);top:55%;margin:0;padding:0;font-size:1.5em;}
header video{height:100%;}
.home header nav{right:25px;}
header nav li{font-size:1.5em;padding:.5em 0}

.page header{width:100%;}
footer .inn{width:90%;margin:.5em auto}
.page header h1{right:-45%;top:50%;font-size:1.5em;}
.page header ul.page_nav{top:50px;right:0em;}

section{width:90%;margin:0 auto;}

section#works ul li{width:calc((100%/2 - 2em) - 1px);}
section#works h2{font-size:3em}
section#works h3{font-size:2em}
section#works ul li:nth-of-type(4n) h2{color:#595757;}
section#works ul li:nth-of-type(4n-2) h2,
section#works ul li:nth-of-type(4n-1) h2{color:#c9caca}

.page article section table{width:90%;font-size:1em;}
.page article section table th,
.page article section table td{line-height:1.65em;}

section#contact .inn{width:88%;padding:5em 4% 1em;}
section#contact .inn .waku h2{font-size:2.5em;margin:.2em 0}

section#contact iframe.pc{display:none;}
section#contact iframe.sp{display:block;margin:0em auto;height:1000px}

.security_inn{font-size:1em;}

footer .inn p{bottom:-4em;right:1em;}
p.home_p-link{font-size:1.15em;}
}