@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap );




* { font-size :1.0vw;; font-weight: bold; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; }
html { width:100%; min-height: 100%; position: relative; }
body { width:100%;  display:block; margin:0; padding:0;  line-height: 1.25em; min-height: 100%; position : absolute;
	font-family: 'Noto Sans JP', 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif';
	 color:#fff; background:#0F316B; }
body *{ line-height:1.5em; }


@media screen and (min-width: 1200px) {
	* { font-size : 12px; }
}
/*
@media screen and (max-width: 768px) {
	* { font-size : 1.5vw; }
}
*/
@media screen and (max-width: 480px) {
	* { font-size : 3vw; }
}

@media screen and (max-width: 640px) {
    .br-smp { display:none; }
}



/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: 1px solid #ffffff;/* ボーダーの色と太さ */
    padding: 10px 30px;
  text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#ffffff;
}

.btn:hover span{
  color:#fff;
}

/*== 背景が流れる（中央から外） */

.bgcenterout:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: #d35b0b;
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 0);
  transform-origin:center;
}

/*hoverした際の形状*/
.bgcenterout:hover:before{
  transform:scale(1, 1);
}









li{ list-style-type:none; }
a:hover{ opacity: .8; }
#loader{ display: block;width: 100%; height:100%; position: fixed; top:0; left:0; z-index: 99; background: #fff; }

header{ position: fixed; top:0; left:0; width:100%; background:rgba(4, 23, 58, 0.8); z-index: 90; }
header * { color:#fff; }
header ol{ display: table; width: 100%; }
header ol>li{ display: table-cell; vertical-align: middle; padding:1.4em; }
header h1 img{ display: block; height:3.5vw; max-height:100px; }
header nav{ text-align: right; }
header nav li{ display: inline-block; padding:0 .8em;}

header nav a{ display: inline-block; padding:0 .8em; font-size:1.4em; text-align: center;text-decoration: none;}
header nav a span{font-size: 0.7em; text-align: center; color:#E8741C; }
header div#nav-toggle{ display:none; }
@media screen and (max-width: 480px) {
	header ol>li{ padding:1.0em; }
	header h1 img{ display: block; height:50vw; max-height:42px; }
	header.open nav{flex-flow:column; animation: openmenu .5s ease-in-out both; display:flex;}
	header.open>ol>li>div>a{ background:url("./img/logo_wh.png") center center no-repeat; background-size: contain; }
	header.open>ol>li a{ color:#fff; }
    header nav li{ line-height: 100px;}
	header>ol>li>nav{ position:fixed; z-index:-2; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.95); padding:0; overflow:hidden;
		display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; opacity:1;  }
	header>ol>li>nav>a{ display:block; width:100%; text-align: center; line-height:14vw; font-size:1.4em; }
	header div#nav-toggle{ display:block; position:absolute; top:2vw; right:1vw; width: 12vw; height: 12vw; cursor: pointer; }
	header div#nav-toggle div {position: relative; }
	header div#nav-toggle span {display: block; position: absolute; height: .5vw; width: 7vw; background:#fff; left:2vw; }
	header.transparent div#nav-toggle span { background:#fff; }
	header div#nav-toggle span:nth-of-type(1) {top: 3.5vw; transition: .35s ease-in-out; }
	header div#nav-toggle span:nth-of-type(2) {top: 5.5vw; }
	header div#nav-toggle span:nth-of-type(3) {top: 7.5vw; transition: .35s ease-in-out; }
	header.open div#nav-toggle span{ background:#fff; }
	header.open div#nav-toggle span:nth-of-type(1) {top: 5.5vw; transform: rotate(315deg); }
	header.open div#nav-toggle span:nth-of-type(2) {height: 0;}
	header.open div#nav-toggle span:nth-of-type(3) {top: 5.5vw; transform: rotate(-315deg); }
}

article#mainv{ height:100vh; position:relative; overflow:hidden; }
/* article#mainv video{ display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; z-index:-10; }
article#mainv video#smp{ display: none; }
article#mainv #video-wrapper {z-index:-5;
	position: relative;
	width: 100%;
	height: 100vh;
  }
  .video-wrapper:after {z-index:-5;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	background-image: radial-gradient(black 20%, transparent 20%),
	  radial-gradient(black 20%, transparent 20%);
	background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
  }
  video {z-index:-5;
	position: absolute;
  } */

article#mainv{ background: url("./img/maiv_bg_pc.jpg"); background-size: cover; padding:10vw 0 0 0; background-position: center; background-attachment: fixed; }
article#mainv>dl{ display: block; width: 100%; margin: 0 auto; padding:1em; }
article#mainv>dl dt{ font-size: 7em; padding-top: 3.5em; padding-left: 2em;}
article#mainv>dl dd{ font-size: 5em;}
article#mainv #cap{ position: absolute; width:50%; top: 50%; right: 12%; transform: translateX(-50%) translateY(-50%); }
article#mainv #cap img{ width: 150%; 
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}
 

article#mainv .smp{ display: none; }






@media screen and (max-width: 480px) {
	/* article#mainv #video-wrapper {z-index:-5;
		position: relative;
		width: 100%;
		height: 100vh;
	  }
	  .video-wrapper:after {z-index:-5;
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		background-image: radial-gradient(black 20%, transparent 20%),
		  radial-gradient(black 20%, transparent 20%);
		background-size: 6px 6px;
		background-position: 0 0, 3px 3px;
	  }
	  video {z-index:-5;
		position: absolute;
	  }
	article#mainv video#smp{ display: block; }
	article#mainv video#pc{ display: none; } */
	article#mainv{ background: url("./img/maiv_bg_smp.jpg"); background-size: cover; background-position: center; }
	article#mainv>dl dt{ font-size: 1.3em; text-align: center; }
	article#mainv>dl dd{ font-size: 1.0em; padding:1.5em 2em 0 5em; }
	article#mainv #cap{ position: absolute; width:50%; top: 50%; right: 12%; transform: translateX(-50%) translateY(-50%); }
	article#mainv #cap img{ width: 150%;}
	article#mainv .pc{ display: none; }
	article#mainv .smp{ display: block; }
}




article#about{
background-position: center center;
background: url("./img/bg_001.jpg") no-repeat;

background-size: cover; 
background-attachment: fixed;}

	
article#about dl.title { display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; padding: 3%;}
article#about dl.title img{ display:block; width: 100%; 
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}

article#about dl.item{ display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#about dl.item dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:50%; }
article#about dl.item dt img.pc{width: 100%; }
article#about dl.item dt img.smp{ display: none; }
article#about dl.item dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; }
article#about dl.item div.ttl_theme{ font-size: 1.8em; padding:0 0 1em 0; text-align: left;text-shadow: 1px 1px 2px #000000;}
/* article#about dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#about dl.item div.comment{ font-size: 1.4em; text-align: left;line-height: 2em; text-shadow: 1px 1px 2px #000000;}
/* article#about dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */

article#about dl.item_reverse{display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#about dl.item_reverse dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:40%;}
article#about dl.item_reverse dt img.pc{ display:block; width: 100%; }
article#about dl.item_reverse dt img.smp{ display: none; }
article#about dl.item_reverse dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: top; }
article#about dl.item_reverse div.ttl_theme{ font-size: 3em; padding:0 0 1em 0; text-align: left; padding-top: 2em;text-shadow: 1px 1px 2px #000000;}
/* article#about dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#about dl.item_reverse div.comment{ font-size: 1.4em; text-align: left;line-height: 2em; text-shadow: 1px 1px 2px #000000;}
/* article#about dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */


@media screen and (max-width: 480px) {
	article#about{ padding:5em 0;  background: url("./img/bg_smp_001.jpg") no-repeat; background-size:500px ;}
	article#about dl.item{ display: block; margin-bottom: 4em;  }
	article#about dl.item:nth-last-of-type(2){ padding-bottom:2em;}
	article#about dl.item dt{ display: block; padding:1em; width:100%; }
	article#about dl.item dd{ display: block; padding:1em; }
	article#about dl.item dt img.pc{ display: none; }
    article#about dl.item dt img.smp{ display:block; width: 100%; }
	/* article#about dl.item div.ttl_sub{ padding:.5em 0; } */
	article#about dl.item div.ttl_theme{ font-size: 1.5em; padding:0 0 1em 0; text-align: left;}
    /* article#about dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#about dl.item div.comment{ font-size: 1.0em; text-align: left;}

	article#about dl.item_reverse{ display: block; }
	article#about dl.item_reverse:nth-last-of-type(2){ padding-bottom:2em;}
	article#about dl.item_reverse dt{ display: block; padding:1em; width:100%; }
	article#about dl.item_reverse dd{ display: block; padding:1em; }
	article#about dl.item_reverse dt img.pc{ display: none; }
    article#about dl.item_reverse dt img.smp{ display:block; width: 100%; }
	/* article#about dl.item div.ttl_sub{ padding:.5em 0; } */
	article#about dl.item_reverse div.ttl_theme{ font-size: 1.5em; padding:0 0 1em 0; text-align: left;}
    /* article#about dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#about dl.item_reverse div.comment{ font-size: 1.0em; text-align: left;}
}




article#work{ background: url("./img/bg_002.jpg") no-repeat; background-size: cover; padding:3em 0; }

article#work dl.item{ display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; padding-top: 3em;}
article#work dl.item dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:50%; }
article#work dl.item dt img.pc{width: 100%; }
article#work dl.item dt img.smp{ display: none; }
article#work dl.item dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; }
article#work dl.item div.ttl_theme{ font-size: 3em; padding:0 0 1em 0; text-align: center;text-shadow: 1px 1px 2px #000000;}
article#work dl.item div.comment{ font-size: 1.4em; text-align: center;line-height: 2em; text-shadow: 1px 1px 2px #000000;}
article#work>div{ display:table; table-layout: fixed; border-spacing: 2em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#work>div dl{ display: table-cell; }
article#work>div dt{ font-size: 2.2em; text-align: center; line-height: 4em; }
article#work>div dd>img{ display: block; width: 80%; margin: 0 auto; }
article#work>div li{ width: 80%; margin: 0 auto; font-size: 1.4em; }
article#work>div li img{ display: block; width: 100%; }
article#work .pc{ display: block; }
article#work .smp{ display: none; }
@media screen and (max-width: 480px) {
	article#work{ background: url("./img/bg_smp_002.jpg") no-repeat; background-size: cover;  padding:3em 0; }
	article#work dl.item{ display: block; margin-bottom: 4em;  }
	article#work dl.item:nth-last-of-type(2){ padding-bottom:2em;}
	article#work dl.item dt{ display: block; padding:1em; width:100%; }
	article#work dl.item dd{ display: block; padding:1em; }
	article#work dl.item div.ttl_theme{ font-size: 1.5em; padding:0 0 1em 0; text-align: center;}
	article#work dl.item div.comment{ font-size: 1.0em; text-align: left;}
	article#work>div{ display:block; }
	article#work>div dl{ display:block; }
	article#work>div dt{ font-size: 1.5em; line-height: 2em; padding-top: 2em; }
	article#work>div ol{ display:table; table-layout:auto; border-spacing: 1em; width: 100%; padding:0 1em; }
	article#work>div li{ display: table-cell; width:auto; vertical-align: top; font-size: 1.0em; line-height: 1.8em; }
	article#work>div li img{ width:35vw; }
	article#work .pc{ display: none; }
	article#work .smp{ display: block; }
}



    article#company{
		background-position: center center;
		background: url("./img/bg_003.jpg") no-repeat;
		
		background-size: cover; 
		background-attachment: fixed;}


article#company dl{ padding:1em 2em; display: table; width:100%; max-width:1200px; margin: 0 auto; }
article#company div.ttl_theme{ font-size: 3em; text-align: left;}
article#company div { margin: 0 auto; text-align: left;}
article#company h3{text-align: left; padding: 2em 0 2em 0; font-size: 1.4em; line-height: 2.0em; text-decoration: none;}
article#company li {text-align: left}
article#company p{ font-size: 2em; text-align: left;padding:0 0 2em 1em;}
article#company img{width:5%; padding: 2em 0 0 0 ;}
article#company iframe{ display: block; width:100%; } 

article#company dl.item_reverse{display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#company dl.item_reverse dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:40%;}
article#company dl.item_reverse dt img.pc{ display:block; width: 100%; }
article#company dl.item_reverse dt img.smp{ display: none; }
article#company dl.item_reverse dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: top; }
article#company dl.item_reverse div.ttl_theme{ font-size: 3em; padding:0 0 1em 0; text-align: left; padding-top: 2em;text-shadow: 1px 1px 2px #000000;}
article#company dl.item_reverse div.comment{ font-size: 1.4em; text-align: left;line-height: 2em; text-shadow: 1px 1px 2px #000000;}

article#company .pc{ display: block; }
article#company .smp{ display: none; }

@media screen and (max-width: 480px) {
	article#company{ padding:6em 0 1.5em 0; background: url("./img/bg_smp_001.jpg") no-repeat; background-size:500px ;}
	article#company dl{ padding:0em 0;}
	article#company div.ttl_theme{ font-size: 1.4em; padding:0 0 1em 0.5em; text-align: left;}
	article#company h2{ font-size: 1.5em; }
	article#company h3{ padding:0 1em 2em ; font-size: 1.0em; text-decoration: none;}
	article#company p{ padding:2em 1em 1em 3em; font-size: 1.0em; text-align: left;  padding-bottom: 5em;}
	article#company dl.fb{text-align: left;}
    article#company img{width:10%; padding: 1em 0 0 1em ;}
	article#company iframe{ margin:1.3em 0; display: block; width: 100%; }
	article#company dl.item_reverse{ display: block; }
	article#company dl.item_reverse:nth-last-of-type(2){ padding-bottom:2em;}
	article#company dl.item_reverse dt{ display: block; padding:1em; width:100%; }
	article#company dl.item_reverse dd{ display: block; padding:1em; }
	article#company dl.item_reverse dt img.pc{ display: none; }
    article#company dl.item_reverse dt img.smp{ display:block; width: 100%; }
	article#company dl.item_reverse div.ttl_theme{ font-size: 1.5em; padding:0 0 1em 0; text-align: left;}
	article#company dl.item_reverse div.comment{ font-size: 1.0em; text-align: left;}
	article#company .pc{ display: none; }
	article#company .smp{ display: block; }
}





article#contact{ background: url("./img/bg_002.jpg") no-repeat; background-size: cover; padding-top:9em; }
article#contact h2{ font-size: 3em; text-align: center;}
article#contact .tel{ display: table; margin:0 auto;border-spacing: 5em;}
article#contact p{ text-align: center; font-size: 1.4em; padding:2em 0; }
article#contact li {display: table-cell; border-spacing: 5px; text-align: center;}
article#contact h3{ font-size: 2em; text-decoration: none;}
article#contact a span { font-size: 2em;}

article#contact div{ display: table; margin:0 auto;}
article#contact div dl{ display: table-row; }
article#contact div dt{ display: table-cell; vertical-align: top; text-align: right; white-space:nowrap;  padding:.8em 4em .8em .5em; font-size: 1.4em; position: relative; }
article#contact div dt:after{ content:"任意"; background:#56A41C; box-shadow: .2em .2em .5em rgba(0, 0, 0, .4);
	display: block; position: absolute; top: 2.0em; right:1em; font-size:.5em; line-height: 2em; padding:.1em 1em; }
article#contact div dt.need:after{ content:"必須"; background:#D64545; }
article#contact div dd{ display: table-cell; vertical-align: top; padding:.8em 1em; }
article#contact div dd input{ display:block; width:20em; font-size: 1.4em; padding:.2em 1em; border:0; border-radius:.6em; }
article#contact div dd textarea{ display:block; width:20em; height:8em; font-size: 1.4em; padding:.1em 1em; border:0; border-radius:.6em; }
article#contact div dd a img{ display: block; margin:0 0 0 auto; width:40%; }
article#contact footer{ text-align: center; padding:2em 0 2em 0; }
@media screen and (max-width: 480px) {
	article#contact{ background: url("./img/bg_smp_002.jpg") no-repeat; background-size: cover; padding:4em 0 3em 0; }
	article#contact h2{padding-top: 2em; font-size: 1.4em; }
	article#contact .tel{ display: table; margin:0 auto; border-spacing: 0.5em;}
	article#contact p{ text-align: center; font-size: 1.0em; padding:1em 0 1em 0; }
	article#contact li {padding-top: 5em; display: table-cell; text-align: center;}
	article#contact h3{ font-size: 1.2em; text-decoration: none;}
	article#contact a span { font-size: 1.2em;}
	article#contact div{ width:100%; table-layout: fixed; }
	article#contact div dt{  width:40%; padding:.8em 4em .8em .5em; font-size: 1.0em; }
	article#contact div dd{ width:60%; }
	article#contact div dd input{ display:block; width:100%; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd textarea{ display:block; width:100%; height:5em; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd a img{ width:50%; }
	article#contact footer{ font-size: .8em;  padding:2em 0 0.5em 0; }
}