@charset "utf-8";
/* CSS Document */

body.is-js-start{ top:0; position: fixed; overflow: hidden;}

#is-fade{ position:fixed; top:0; left:0; width:100%; height:100%; background:#FFF; z-index:101;}
#skipbtn{ position:absolute; top:10px; right:10px; display:inline-block; cursor:pointer; font-weight:bold; font-size:2rem; color:#CCC;}
#is-fade-inner{ margin-left:-25%; width:50%; position:absolute; top:50%; left:50%; display:none;}
#is-logo{ margin:auto; max-width:320px;}
#is-txt{ margin-top:2rem; display:none; text-align:center;}

.gnav li,.contact-area{ -webkit-transition: .3s; transition: .3s;}
.is-js .gnav li,.is-js .contact-area{ -webkit-transform: translateY(-100vw); -moz-transform: translateY(-100vw); -ms-transform: translateY(-100vw); transform: translateY(-100vw);}
.is-js .hd-buttons div{ -webkit-transform: translateY(-100vw); -moz-transform: translateY(-100vw); -ms-transform: translateY(-100vw); transform: translateY(-100vw); -webkit-transition: .3s; transition: .3s;}

@-webkit-keyframes contactFade { 0%{ -webkit-transform:translate(-100px,0); transform:translate(-100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@keyframes contactFade { 0% { -webkit-transform:translate(-100px,0); transform:translate(-100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
.is-js .contact-area.on{ animation:contactFade .3s linear .3s forwards;}

.ma-branding-img,.ma-branding-img-sm{ -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
.is-js .ma-branding-img,.is-js .ma-branding-img-sm{ -webkit-animation: indexBranding 1s ease 0s; animation: indexBranding 1s ease 0s;}
@-webkit-keyframes indexBranding { 0%{ will-change:opacity, transform; -webkit-transform:scale(2,2); opacity:0;}100% {  will-change:auto; -webkit-transform:scale(1,1); opacity: 1;}}
@keyframes indexBranding { 0%{ will-change:opacity, transform; transform:scale(2,2); opacity:0;}100% {  will-change:auto; transform:scale(1,1); opacity: 1;}}

#maBlue polygon,#maBlueSm polygon{ -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
.is-js #maBlue polygon,.is-js #maBlueSm polygon{ -webkit-animation: indexBB 3s ease 0s; animation: indexBB 3s ease 0s;}
@-webkit-keyframes indexBB { 0%{ -webkit-transform: translateY(100vw) scale(0,0); opacity:0;}75%{ -webkit-transform: translateY(10px) scale(0,0); opacity:0;}100% { -webkit-transform: translateY(0) scale(1,1); opacity: 1;}}
@keyframes indexBB { 0%{ transform:translateY(100vw) scale(0,0); opacity:0;}75%{ transform: translateY(100vw) scale(0,0); opacity:0;}100% { transform: translateY(0) scale(1,1); opacity: 1;}}

#maKvBlue polygon,#maKvBlueSm polygon{ -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
#maKvBlue polygon.on{ -webkit-animation: indexKB 1s ease 0s; animation: indexKB 1s ease 0s;}
#maKvBlueSm polygon.on{ -webkit-animation: indexKBS 1s ease 0s; animation: indexKBS 1s ease 0s;}
@-webkit-keyframes indexKB { 0%{ -webkit-transform:translate(0,0); opacity:0;}100% { -webkit-transform:translate(0, 1120); opacity: 1;}}
@keyframes indexKB { 0%{ transform:translate(0,0); opacity:0;}100% { transform:translate(0, 1120); opacity: 1;}}

@-webkit-keyframes indexKBS { 0%{ -webkit-transform:translate(0,0); opacity:0;}100% { -webkit-transform:translate(0, 1800); opacity: 1;}}
@keyframes indexKBS { 0%{ transform:translate(0,0); opacity:0;}100% { transform:translate(0, 1800); opacity: 1;}}

.site-title img{ -webkit-animation-fill-mode:both; animation-fill-mode:both;}
.is-js .site-title img{ -webkit-animation: indexTitle 4s ease 0s; animation: indexTitle 4s ease 0s;}
@-webkit-keyframes indexTitle { 0%{ -webkit-transform: translateY(-100vw); opacity:0;}75%{ -webkit-transform: translateY(-10px); opacity:0;}100% { -webkit-transform: translateY(0); opacity: 1;}}
@keyframes indexTitle { 0%{ transform:translateY(-100vw); opacity:0;}75%{ transform: translateY(-10px); opacity:0;}100% { transform: translateY(0); opacity: 1;}}


/*//////////////////////
	CONTENTS
//////////////////////*/
#contents h3{ margin-bottom: 60px; font-size:4vw;}
#contents h3 span{ display:block; font-size:2vw;}

.branding-section{ width:100%; position:relative; z-index: 3;}
.branding-section:before{ content:""; display: block; padding-top:120.8333%;}
.branding-section-container{ width:100%; position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;}
.branding{ width:100%; position:absolute; top:0; left:0; z-index:2;}
.branding:before{ content:""; display: block; padding-top:66.6666%;}
.branding-section-inner{ width:100%; position:absolute; top:0; left:0; bottom:0; right:0;}
.branding-section-inner h1{ width: 40%; position:absolute; top:40%; left:4%;}
.keyvisual{ width:100%; position:absolute; bottom:0; left:0; z-index:1;}
.keyvisual:before{ content:""; display: block; padding-top:62.5%;}
.kv-section-inner{ width:100%; position:absolute; top:0; left:0; bottom:0; right:0;}
.kv-txt-wrap{ width:100%; height:100%; display:table;}
.kv-txt-inner{ padding:0 90px; display:table-cell; vertical-align:middle;}
.kv-txt-inner h2{ margin-bottom: 60px; font-size:4vw;}
.kv-txt-inner h2 span{ display:block; font-size:2vw;}

.if-section-container .if-list li{ padding-top: 2.4rem; width:48%; position: relative;}
.if-section-container .if-list li:nth-of-type(2n){ margin-top:60px;}
.if-section-container .if-list li h4{ padding: 1.2rem; display: inline-block; position: absolute; top: 0; left:-1rem; font-size: 1.6rem; font-weight: normal; color: #fff; background:#00aeef; z-index:2;}
.if-section-container .if-list li .if-thumbnail{ z-index:1;}

.index-item{ width:100%; position:relative; z-index:3;}
.index-item:before{ content:""; display: block; padding-top:66.66666666%;}
.ii-section-container{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4;}
.ii-section-inner{ width: 100%; position:absolute; top: 50%; left: 0; -webkit-transform: translateY(-54%); transform: translateY(-54%);}
.ii-section-inner .ii-wrap{ padding: 0 20%; width: 100%; color: #fff; text-align: center;}
.ii-section-inner .ii-txt-wrap{ padding:4rem; background: rgba(0,174,239,.6);}
.ii-section-inner .ii-txt-wrap .ii-txt{ margin-bottom: 4rem;}
.ii-section-inner .ii-txt-wrap .ii-readmore{ margin-bottom:0;}
.ii-section-inner .ii-txt-wrap .ii-readmore a{ padding: 2rem; display: inline-block; border: 1px solid #fff; color: #fff; position: relative;}
.ii-section-inner .ii-txt-wrap .ii-readmore a:hover{ color: #00aeef;}
.ii-section-inner .ii-txt-wrap .ii-readmore a:before{ content: ""; width:0; height: 100%; position: absolute; top: 0; left: 0; background: #fff; z-index: -1; -webkit-transition: .2s; transition: .2s;}
.ii-section-inner .ii-txt-wrap .ii-readmore a:hover:before{ width: 100%;}
#itemBg,#itemBgSm{ position: absolute; top: 0; left: 0;}

.is-js #water polygon,.is-js #watersm polygon{ -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
.is-js #water polygon.on{ -webkit-animation: water 1s ease 0s; animation: water 1s ease 0s;}
.is-js #watersm polygon.on{ -webkit-animation: waterS 1s ease 0s; animation: waterS 1s ease 0s;}
@-webkit-keyframes water { 0%{ -webkit-transform:translate(-100vw,0); opacity:0;}100% { -webkit-transform:translate(0, 0); opacity: 1;}}
@keyframes water { 0%{ transform:translate(-100vw,0); opacity:0;}100% { transform:translate(0, 0); opacity: 1;}}

@-webkit-keyframes waterS { 0%{ -webkit-transform:translate(-100vw,0); opacity:0;}100% { -webkit-transform:translate(0,0); opacity: 1;}}
@keyframes waterS { 0%{ transform:translate(-100vw,0); opacity:0;}100% { transform:translate(0,0); opacity: 1;}}

.in-section-container.s-container{ padding: 0 20%;}
.in-section-inner h3{ text-align: center;}
.in-list{ margin-bottom: 6rem;}
.in-list article{ margin-bottom: 1rem; border-bottom: 1px dotted #333;}
.in-list a{ padding: 1rem 0; display: block; color: #333;}
.in-list .in-list-post-inner{ width: 100%;}
.in-list .in-list-post-inner span{ margin-right:1rem; width:80px;  display: inline-block;}
.in-list .in-list-post-inner h4{ -webkit-flex: 1; flex: 1;}
.in-readmore{ text-align: center;}
.in-readmore a{ display: inline-block; padding: 1rem 3rem; border: 1px solid #333; color: #333; position: relative;}
.in-readmore a:hover{ color: #fff;}
.in-readmore a:before{ content: ""; width:0; height: 100%; display: inline-block; position: absolute; top: 0; left:0; background:#000; z-index: -1; -webkit-transition: .2s; transition: .2s;}
.in-readmore a:hover:before{ width: 100%;}

/*//////////////////////
	CLASS
//////////////////////*/

@media (min-width:768px){
  #maBgSp{ display: none;}
  .if-section-container .if-list{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
  #itemBgSm{ display: none;}
  .in-list .in-list-post-inner{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; -webkit-justify-content:flex-start; justify-content:flex-start;}
}

@media (max-width:767px){
  .is-js .contact-area.onsm{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
  #contents h3{ margin-bottom:10%; font-size:6.4vw;}
  #contents h3 span{ font-size:3.2vw;}
  #maBg{ display: none;}
  .branding-section:before{ padding-top:393.3333%;}
  .branding:before{ padding-top:213.3333%;}
  .branding-section-inner h1{ width:60%;}
  .keyvisual:before{  padding-top:180%;}
  .kv-txt-inner{ padding:0 10%;}
  .kv-txt-inner h2{ font-size:6.4vw;}
  .kv-txt-inner h2 span{ font-size:3.2vw;}
  .kv-txt-inner .kv-txt{ font-size:3.2vw;}
  .if-section-container h3{ font-size:6.4vw;}
  .if-section-container h3 span{ font-size:3.2vw;}
  .if-section-container .if-list li{ width:100%;}
  .if-section-container .if-list li:not(last-of-type){ margin: 0 0 60px;}
  .if-section-container .if-list li h4{ font-size:3.2vw;}
  .if-section-container .if-list li .if-txt{ font-size:3.2vw;}
  #itemBg{ display: none;}
  .index-item:before{ padding-top:133.3333%;}
  .ii-section-inner .ii-wrap{ padding: 0 10%;}
  .ii-section-inner .ii-wrap .ii-txt-wrap{ padding:6% 6%; }
  .ii-section-inner .ii-wrap .ii-txt{ margin-bottom:6%; font-size:3.2vw;}
  .ii-section-inner .ii-txt-wrap .ii-readmore{ font-size:3.2vw;}
  .ii-section-inner .ii-txt-wrap .ii-readmore a{ padding:1rem 6%; }
  .in-readmore a{ padding:1rem 15%; font-size:2.8vw;}
}