@charset "UTF-8";
/* ==========================================================================
Base 
============================================================================= */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap');

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  width: 100%;
  font-family: ' Hiragino Kaku Gothic Pro',"メイリオ","Meiryo",Verdana,"ＭＳ ゴシック",Osaka-mono,sans-serif;  
  font-size: 1.2rem;
  color: #000;
  background: 	#000;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
a {
  color:#000;
}
a:hover {
  color:#000;
}
a:visited {
  color: #000;
}
a:active, a:focus {
  outline:0;
}
a:link,
a:visited {
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}
p {
  margin: 0;
  padding: 0;
  font-family: Noto Sans JP;
  font-weight: 	600
}
em {
  font-weight: bold;
  font-style: normal;
}
strong {
  font-weight: bold;
  font-style: normal;
}
img {
  border:0;
  vertical-align: middle;
}
ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li ,li a,dt,dd,dd a{
 font-family: Noto Sans JP;
 font-weight: 	600
}
input,
textarea {
  box-sizing: border-box;
  line-height: 1.8;
  border: 0;
  border-radius: 0;
  outline: none;
}
sup {
  font-size: 71.42857%;
  vertical-align: super;
}
img {
}
.spV {
  display:  inline;
}
.pcV {
  display: none;
}
.mt20{
  margin-top: 20px;
}
.mb20{
  margin-bottom: 20px;
}
section:before,
section:after {
  content: " ";
  display: table;
}
section:after {
  clear: both;
}
section {
  *zoom: 1;
}

/*section____________*/
section {
  margin-top: 6vw;
  padding: 0 6vw;
  display:  flex; 
  align-items:  center; 
}
section h2{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: .1rem;
  font-size: 6.8vw;
  line-height: 1;
  padding: 0;
  margin: 0 0 1rem ;
  display: block;
}
section h3{
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size:1.6rem;
}
section p{
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 	1.8;
}
section h4 {
  margin: 0;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}
section#top{
 padding: 0;  
 margin-top: 0;
 position: relative;
}
section#s01 h2{
  margin: 0 0 1rem -4vw;
}
section#s01 h3{
  color: 	#333
}
section#s01 p{
 margin-top: 3rem;
  font-size: 3.8vw; 
}
section#s02 li {   
  padding: .5rem 0;  
  font-size: 1.4rem;
  }
  section#s03 h2,section#s04 h2,section#s03 h3,section#s04 h3{	  
    text-align: left;
  }
  section#s03,section#s04 {	  
    text-align: left;
  }
  section#s03 ul.workslink li {   
    border-bottom: 1px solid  #000;
    padding: 1rem 0;  
    font-size: 1.2rem;
    line-height: 1.4
  }
section#s03 ul.list li {
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.4;
    padding: .5rem 0;
}
section#s03 ul.list li:last-child:after {
     content: "";
}
  .bgtop {
    position:   absolute;
    margin-top: 0;
    padding: 0;
    width: 100vw; 
    height: 100vh;	
    animation: topshine 1.2s ease  1 forwards;
    background: #fff url( ../img/bg_top.jpg) center top; 
    background-size: cover;
    opacity: 0;  
  }
  .bgtopf {
    position:   absolute;
    margin-top: 0;
    padding: 0;
    width: 100vw; 
    height: 100vh;  
    background:url( ../img/bg.png) center center; 
    background-size:cover;  
    opacity:   1
  }
@keyframes topshine {
   0% {  opacity:0; transform:scale(1.4,1.4);}
    30% {  opacity:.3; transform:scale(1.4,1.4);}
    70% { opacity:1;transform:scale(1,1)}
    100% { opacity:.3;transform:scale(1,1)}
  }
  #top .inner{
    position:   relative; 
    margin-top: 0;
    padding: 0;
    max-width: none;
    width: 100vw; 
    height: 100vh; 
    background-size:cover;
    display:  flex; 
    align-items:  center; 
    justify-content:  center; 
    text-align: center; 
    opacity: 0; 
    animation: toplogo 1.6s linear  1 forwards;
  }
  @keyframes toplogo {
    0% {  opacity:0;filter: blur(50px);}
    100% {  filter: opacity(100%);opacity:1;filter: blur(0);}
  }
  #top .inner img{
    width: 80vw; 
    height:   auto; 
  }
   section#s01,section#s02,section#s04,section#s05{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }

  section#s01 {
   margin-top: 0;
   padding:  0;
   background:url(	../img/bg_01.jpg) 20% center; 
   background-size:cover;	
 }
 section#s01 .inner{
  background: transparent;
  opacity: 0
}
section#s02 {
	margin-top: 0;
  padding:  10vw;
  background:url(	../img/bg_02.jpg) center bottom; 
  background-size:cover;
}
section#s02 .inner{
  padding: 0 0 10vw;
}
section#s02 h2 {
	text-align: center;	
  margin-bottom: 10vw;			
}
section#s02 h3 {
	margin-bottom: 40px;		
}
section#s02 .flexbox .box{
 margin-top: 2rem;  
 
}
section#s02 .flexbox .box li{
 padding: 0 0  0 1.4rem; 
 text-indent: -1.4rem ; 
     font-size: 1.4rem 
}
section#s03 {
	margin-top: 0;
  padding:  10vw ;
  background:url(	../img/bg_03.jpg) left bottom; 
  background-size:cover;
}
section#s03 h2{
  text-align: center; 
}
section#s03 h3{
  margin-top: 3rem;
  font-size: 1.4rem;
}
section#s03 .side{
  width: 100%;  
}
section#s03 .box{
  padding: 10vw 6vw; 
}
section#s03 ul.workslink li{
  font-size: 1.2rem;
}
section#s04 {
  padding:  10vw ;
  color: 	#fff
}
section#s03 h2,section#s04 h2 {
	margin-bottom: 3.8rem;	
}
section#s03 .side {
  background-color: rgba(255,255,255,0.8);
}
section#s04 {
 margin-top: 0;
 padding:  10vw 10vw;
 background:url(  ../img/bg_04.jpg); 
 background-size:cover; 
}
section#s04 .box1, section#s04 .box2 {
 opacity: 0 ;
 width: 80vw;
}
section#s04 dl {
  padding:  0;
  font-size: 1.4rem;
  display:  block;  
}
section#s04 dl dt{
  font-weight: 500;
  font-size: 1.4rem  
}
section#s04 dl dd{
  margin-bottom: 2rem;  
  font-size: 1.4rem  
}
section#privacypolicy {
  background: #fff;
  margin-top: 60px;
}
section#privacypolicy .inner{
 padding: 5vw 4% 5vw;
 max-width: 980px
}
section#privacypolicy h2{
  margin-bottom: 6rem;
}
section#privacypolicy .inner p{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}
section#contact {
  background: #fff;
  margin-top: 60px;
  padding: 0;
}
section#contact {
  background: #fff;
  margin-top: 60px;
  padding: 0;
}
section#contact .inner{
  background: #fff;
  padding: 5vw 4% 5vw;
  max-width: 980px;
}
section#contact h2{
    letter-spacing: .3rem;
    font-size: 3.8rem;
    margin: 0 0 2rem;
}
section#contact h3{
margin: -1rem 0 0;
}
/*=====================================================================
Layout
=====================================================================*/
/*Header______________*/
#header {
 width: 100%;
 position: fixed;
 z-index: 220;
 padding: 0;
 margin: 0;
}
/*footer____________*/
#footer{ 
  width: 100%;
} 
#footer p{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin: 0 auto;
  padding: 20px;
  margin-top: 1rem;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
} 
#footer img{
  height: 30px;
  width: auto ;
  margin: 10px;
  padding: 1vw 2vw;
  background: #fff;
  border-radius: 5vw    
} 
.inner{
  margin: 0 auto;
  padding: 10vw 0 10vw;
  font-size: 1.4rem;
  box-sizing: border-box;
  text-align: left;
}
/*List*/
dl{
  display:flex;
  flex-wrap: wrap;
  border-top: none;
}
dl dt{
  width: 10rem	;
  box-sizing: border-box;
}
dl dd{
  margin: 0;
  box-sizing: border-box;
}
a.telno,a.telno:hover{
 color: #fff;
 text-decoration: none;
 font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

a.telno{
  color: #fff;
}
a.mailno{
 	color: #fff;
	text-decoration: none;
}
#privacypolicy a.telno,#privacypolicy a.telno:hover{
 color: #000;
 text-decoration: none;
}
.flexbox{
  display:  block ; 
}
.flexbox .box{
  text-align: left;
  padding:8vw;
  background-color:rgba(255,255,255,0.8); 
  font-size: 1.8rem;
  opacity: 0; 
}
.scrobtn {
  background: #000;
  color: #fff;
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 60px;
  left:calc(50% - 30px);
  text-align: center;
  font-size: 1.0rem;
  z-index: 20;
  cursor: pointer;
}
.scrobtn img{
  width: 30px;
  padding: 20px 0 10px;  
}
.scbtnani{
 animation: scbtn 1.6s linear infinite forwards;
}
/*mail*/

.modal {
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500; 
    display: none;
}
.modal__bg {
    background: rgba(0,0,0,0.6);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content {
    background: #fff;
    padding: 6vw;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 80%;
}
.modal__content span{
  font-size: 1.0rem;
  color: #666
}
form input:valid:not(:last-child) {
  border : #666 1px solid;
  padding: 0.5rem 1rem
}
 .modal__content input {
    width: 100%;
    padding: 0 .5rem;
    margin-bottom:10px;
    border: 1px solid #000;
    font-size: 1.4rem;
}
.modal__content textarea {
    height: 100px;
    width:  100%;
    margin-bottom:10px;
    border: 1px solid;
    font-size: 1.4rem;
}
section p.error {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    line-height: 1.8;
    margin: -10px 0 10px;
}
section#contact button {
    background: #000;
    padding: 2rem;
    color: #fff;
    line-height: 1;
    border: none;
}
button {
    background: #000;
    padding: 2rem;
    color: #fff;
    border: none; 
}
section#contact .inner{
    background: #fff;
    padding: 5vw 4% 5vw;
    max-width: 980px;
}
button.confirm{
    background: #000;
    margin: 0;
    padding: 2rem;
    color: #fff;
    border: none; 
    line-height: 1
}
button.btn-secondary {
    background: #888!important;
    margin: 0;
    padding: 2rem;
    color: #fff;
    border: none; line-height: 1
}
.btn2 form{
    display: inline!important;
}
.closebtn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #000;
    width: 60px;
    height: 60px;
}
.closebtn  a{
   line-height: 60px;
   color: #fff;
   text-align: center;
   width: 60px;
   display: block; 
}
.login-modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}

.line div{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.tac  {
  text-align: center;
}
section#s05 h2{
  color: #fff
}

section#s05 {
    padding: 0;
}
#NEWS  ul {
  width: 80vw;
  max-width: 980px;
  color: #fff;
  margin: 0 auto;
}
#NEWS  ul li  {
  border-top: 1px solid #e9e5de;
  padding: 1rem 0;
  text-align: left;
}
#NEWS  ul li span {
  font-size: 1.0rem;
  color: #ddd
}
#NEWS ul li a{
  color: #fff;
}
#NEWS ul li a:hover{
  color: #f8f8f8;
}
#NEWS ul li:first-child   {
  border-top: none;
}

@media screen and (min-width:896px) {
  .spV {
    display:  none;
  }
  .pcV {
    display:inline; 
  }
  dl dd{
  width: calc(100% - 10rem);
}
  .inner {
    margin: 0 auto;
    padding: 0
  } 
  .flexbox{
  	display: 	flex;	
  	justify-content: space-between;
  }
  section#s02 .flexbox .box {
    margin-top: 2rem;
    padding: 60px;
  }
  .flexbox .box{
  	width: 34%;
    text-align: left;
    padding: 60px;
    background-color:rgba(255,255,255,0.8);	
    font-size: 1.8rem;
    opacity: 0; 
  }
  #top .inner img{
    width: 40vw;  
  }
  section {
    margin-top: 6vw;
    padding: 0 6vw;
    height: auto;  
    display:  block ; 
  }
  body,.bgtop,.bgtopf ,#top .inner{
    width: 100%

  }
  section#s01{
    padding: 250px 10vw;
  }
  section#s01 .inner{
   margin-left: 	40%;
   opacity:  0;
 }
 section#s01 {
   margin-top: 0;
   padding: 0;
   background:url(  ../img/bg_01.jpg) top center; 
   background-size:cover; 
 }
 section#s01 h2{
   font-size: 	4.3vw;
   margin-left: -2.5rem;	
 }
 section#s01 p{
   margin-top: 5rem;	
   font-size: 	1.8rem;
 }
 section#s01{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
 }
section#s02,section#s04{
  display: flex;
  align-items: center;
  justify-content: center
 }
 section#s03 .inner{
  margin: 10vh 0;
 }
 section#s02 h3{
  font-size: 1.8rem;
 }
section#s02,section#s04,section#s05{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 section#s02 .inner,section#s04 .inner,section#s05 .inner{
   max-width: 980px;
 }
 section h2 {
  letter-spacing: .3rem;
  font-size: 3.8rem;
}
section#s02 {
  padding: 0;
  background:url(	../img/bg_02.jpg) left bottom; 
  background-size: cover;
}
section#s02 .inner{
  padding:120px 0 150px;
  width: 100%;
}
section#s02 h2 {
  margin: 0 0 60px;
}
section#s03{
  padding: 0;  
   height: 100vh;
   display: flex;
   align-items: center;
}
section#s03 h2 {
  text-align: left;
}
section#s03 h3 {
  font-size: 2rem;
  margin-top: 2rem;
}
section#s03 .side {
  width: 80vw;  
  display:  flex; 
  justify-content:  flex-end; 
}
section#s03 .box {
  width: 60%;
  padding: calc((100vh - 60px - 3.4rem*6 - 1.4rem*6*1.4 - 4.8rem*3 )/5) 5vw;
}
section#s04 {
  margin: 0;
 padding: 0;
}
section#s04 .inner{
  padding:150px 0 ;
  width: 100%;
}
section#s04 dl {
  display: flex;
}
section#contact {
  padding: 0;
}
.modal__content {
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 980px;
}
section#s05 {
    padding:0 ;
    margin: 0;
}
section#s03 ul.workslink li,section#s03 ul.list li{
      font-size: 1.4rem;
}
}
/*animation*/
.bgmotion{
  animation: bganime 1s linear forwards;
}
.s01_motion{
  animation: anime01 .5s  1s linear forwards;
}
.s02_motion1{
  animation: anime01 .5s .5s linear forwards;
}
.s02_motion2{
  animation: anime01 .5s 1s linear forwards;
}
.s03_motion1{
  animation: anime02 .5s linear forwards;
}
.s03_motion2{
  animation:  .5s .5s linear forwards;
}
.s04_motion1{
  animation: anime01 .5s .5s linear forwards;
}
.s04_motion2{
  animation:  anime01 .5s .8s linear forwards;
}

@keyframes bganime {
  0% {filter: opacity(0);} 
  100% {filter: opacity(100%);}
}
@keyframes anime01 {
  0% {opacity: 0;transform: translateY(30%);} 
  100% {opacity: 1;transform: translateY(0);}
}
@keyframes anime02 {
  0% {opacity: 0;transform: translateX(-40%);} 
  100% {opacity: 1;transform: translateY(0);}
}
@keyframes scbtn {
  0% {opacity: 0;transform: translateY(-20%);} 
  100% {opacity: 1;transform: translateY(0);}
}
@media screen and (min-width:1367px) {
      section#s01 h2 {
        font-size: 6rem;
        margin-left: -2.5rem;
      }
      section#s01 p {
        font-size: 1.8rem;
      }
}
@media screen and (min-width:1600px) {
      section#s01 p {
        font-size: 1.8rem;
      }
      .spW{
        display: none;
      }
}
@media screen and (max-width: 1024px) and (orientation: portrait){
    section#s01 {
        background:url(../img/bg_01.jpg) 21% center;
        background-size: cover;
    }
}