@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400&display=swap');
*{margin:0;padding:0;}
*:focus {outline: none;}
html,body{margin:0;padding:0;background:white;font-size: 10px;}
body{-webkit-text-size-adjust: 100%;}
h1,h2,h3,h4,p,a,ul,li,table,span,dl,dt,dd,h5,h6,dd,dt,.min *
{margin:0;padding:0;font-family: 'Josefin Sans', -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",メイリオ,Meiryo,"游ゴシック Medium",YuGothic,YuGothicM,sans-serif;font-size:1.4rem;font-weight:300;letter-spacing: 0;color:#000;}
a{text-decoration: none;transition:0.3s;}
img {width:100%;vertical-align: top;}
dl,dt,dd{margin:0;padding:0;}
li{list-style:none;}
p.cen,span.cen,h2.cen{font-family:'Century Gothic', 'Avenir-Light', 'Muli', sans-serif;}
.fl {display:flex;flex-flow: row wrap;justify-content: space-between;align-items: center;}

a:hover{opacity: 0.7;}
a.nohover{opacity: 1.0;}


.fade{  opacity: 0; /* ←初期値を変更。透明に。*/
  animation: 2s fadeIn forwards; /* ←追加 */
  
  }
@keyframes fadeIn { /* ←追加 */
  from { opacity: 0; }
  to { opacity: 1; }
}

/* フェードイン用のCSS */
.fade_n {
   opacity: 0;
   transform: translateY(20px);
   transition: all 1s 0s ease-out;
 }
 
 .fade_u{
   opacity: 0;
   transform: translate(0, 30px);
   transition: all 1s 0s ease-out;
 }

.wrapper{width:1200px;margin:auto;height:auto;overflow:hidden;padding-top:10vw;text-align: center;}

/* header */	
header{position: relative;box-sizing: border-box;text-align: center;}
h1.logo img{display: inline-block;width:15%;max-width:270px;z-index:100;position:relative;padding-top:8vw;}
h1.logo>span{padding-top:2em;display: block;}
.topbg{width:100%;position: absolute;top:0;}
#header {
  z-index: 99;
  width: 100%;
  height:20.2vw;
  
}

/* content */
h2{font-size:3rem;font-weight:500;letter-spacing: 0.1em;}
h3.w_title{padding-top:50px;text-align: left;padding-bottom:1em;font-size:2rem;font-weight:400;}
h3.w_title span{padding-left:1em;}

#works a{display: block;text-align: left;padding-bottom:10px;}
#works a:link:before{content:"-";padding-right:0.5em;}
.w_link{display: inline-block;padding-top:20px;}
.w_link_g{display: block;padding-top:250px;}
.w_link_g p{padding-bottom:1em;}
.w_link_g h2,.w_link_g span{padding-bottom:30px;}
.w_link_g span{display:inline-block;width:10%;max-width:100px;}

.g_work {display:flex;flex-flow: row wrap;align-items: flex-end;padding-top:50px;justify-content: center;}
.g_work span{display: inline-block;padding:1em;max-width:250px;max-height: 1000px;flex:inherit;}
.g_work span.one{max-width: 300px;}
.g_work span.two{max-width: 150px;padding:50px;}
.g_work span.three{max-width: 170px;}
.g_work span.four{max-width: 350px;}
.g_work span.badge{max-width:100px;padding:40px;}

.insta{width:60px;margin:auto;margin-top:60px;}
.insta:after{content:"View on instagram";font-family: 'Josefin Sans';line-height: 1.4;}
.insta a:before{content:none!important;}

h2.contact_t{padding:200px 0 70px;}
p.mail a{font-size:3rem;padding:0.5em 2em;background:black;color:white;display: inline-block;}
a.totop{font-size:2rem;text-align: center;}
a.totop:after{content:"top";font-size:1.4rem:color:black;display: block;}




#contact{margin:45px 50px 0;padding-top:45px;}
#contact{position: relative;text-align: center;}
ul.form_input{margin-bottom:45px;}
.form_input li{display: flex;margin-bottom:5px;}
.form_input li span{display: inline-block;}
.form_input li span *{padding:10px;font-size:1.5rem;vertical-align: middle;position: relative;}
.form_input li span:first-child{background:#322b29;color:white;padding:23px;font-size:1.8rem;letter-spacing: 0.1em;width:27.5%;}
.form_input li span:last-child{background:#EEEEEE;padding:15px;display: flex;align-items: center;flex:1;}
.form_input li span:last-child *{flex:1;height:40px;box-sizing: border-box;}
.form_input li.hidden,.form_input li.message{margin-bottom:0;}
.contact_box{width:800px;margin:auto;}
.form_input li span select::-ms-expand {
    display: none;
}

input,select,textarea{border-width: 1px;-webkit-appearance:none;border:none;
border:1px solid #8f8a8a;}
select {
	-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(../images/top/allow_a.svg);
background-repeat: no-repeat;
/* background-size: 20px 30px; */
background-position: right 10px center;
border-radius:0px; 
}
textarea{height:8em!important;resize: none;}
#modal {
 position: absolute;
width: 25px;
height: 30px;
bottom: 9px;
left: 68%;
z-index: 100;
display: none;
}
#result{position: absolute;
    color: red;
    right: 50%;
    bottom: 1.2em;
    margin-right: -17em;
    }

    
p.send_bt{position: relative;}
.contact_policy_box {
    width: 550px;
    border: 1px solid #3D3A39;
    margin: auto;
    height: 205px;
    box-sizing: border-box;
    padding: 0px;
    }

 .contact_policy_box p{font-size:1.3rem;line-height:1.6em;}
.contact_policy_box p{font-size:1.5rem;line-height: 1.9em;padding:20px;}
.subbt_form:hover{cursor: pointer;}


/* scroll */

.cscrlb-scrollable {
  overflow-y: scroll;
  position: relative;
/*   width: 100%; */
/*   height:10em; */
  overflow: hidden;   
  -ms-overflow-style:none;
}
.cscrlb-scrollable.horizontal {overflow-x: scroll;overflow-y: hidden;}
.cscrlb-scrollable .cscrlb-scroll-content {overflow: hidden;overflow-y: scroll;}
.cscrlb-scrollable .cscrlb-scroll-content::-webkit-scrollbar {width: 0;height: 0;}
.cscrlb-scrollbar {
  z-index: 2;
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0;
  width: 5px;
  background: none;
}
.cscrlb-scrollbar .drag-handle {
  position: absolute;
  top:0;
  right: -1px;
  width: 7px;
  height:100px;
  background: #18358e;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
}


.agree{padding-top:40px;text-align:center;}
#submit[disabled]{opacity: 0.7;}
button.subbt_form{background:#c23b37;color:white;font-size:1.7rem;padding:13px 70px;letter-spacing: 0.1em;border:double 5px #fff; }
.check{display:inline-block;margin-bottom:40px;}
button.spbt_back{background:#999393;}
span.send_af{color:white;padding-left:0.5em;font-size:1.6rem;font-family:serif;display: inline-block;transform   : scale(1.0, 1.0);   /* 変形 横,縦 */}
.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 1.5rem;
  color:#000;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background:white;
  border:1px solid #3D3A39;
  margin-top:-2px;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {background: #ccc;}
.control input:checked ~ .control__indicator {background: #4A73A9;}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {display: block;}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


p.num span{padding:0 1em;}
.contact_info{flex-direction: column;padding-top:100px;}
.contact_info p{padding-bottom:1em;}
.contact_info p span *{font-size:2.9rem;letter-spacing: 0.05em; font-weight:600;}
p.info_time{display: inline-block;padding:0.5em 2em;border:1px solid #595757;font-size:1.6rem;font-weight:100;letter-spacing: 0.05em;margin-top:1.5em;}

.bottomsp{width:1100px;margin:auto;padding:50px 50px 40px;text-align: right;}
.bottomsp a{width:35px;display: inline-block;}
	  
/* footer */
footer p{padding:200px 0 50px;text-align: center;}


@media screen and (max-width: 1200px) and (orientation:landscape){

}


@media only screen and (min-width: 768px) {  /*  ---------   pc  --------------*/
.spbr{display:none;}
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;}
}

@media only screen and (max-width: 768px) {  /*  ---------   sp  --------------*/	
.pcbr{display:none;}
.wrapper{width:100%;padding-top:30vw;}
h2{font-size:2rem;}
#header {
  
 }
 
h1.logo img{width:30%;}

.w_link_g{padding-top:30vw;}
.g_work span{max-width:45%!important;padding:2%!important;}
.g_work span.two,.g_work span.three{max-width:30%!important;padding:4%!important;}
.g_work span.badge{max-width:20%!important;padding:4%!important;}
 .g_work span.ani{max-width:80%!important;padding-top:5vw;}
p.mail a{font-size:2rem;}
.w_link_g span{width:45%;max-width:100px;}
 
#contact {
    margin: 0 0px 0;
    padding: 10vw 5vw 0;
}

#studio{margin-top:0;}



/* intro */
  
.intro_box{width:90%;margin:auto;padding-top:10vw;}
.intro_box>div{width:30%;max-width:100px;}
#intro p{width:90%;margin:auto;line-height: 2;padding-top:10vw;}
.intro_wrap{padding-bottom:15vw;}




 
 
/*  contact */
#contact h1{padding:0 0 40px;}
button.subbt_form{padding:2vw 10vw;font-size:1.5rem;} 
.form_input li span *{font-size: 16px;}
 .contact_box{width:90vw;}
 
 .form_input li{flex-direction: column;}

.contact_policy_box{width:85vw;height:15em;}
.form_input li span:first-child,.form_input li span{box-sizing: border-box;width:100%;}
.form_input li span:first-child{padding:2vw 5vw;text-align: center;font-size:1.3rem;}
.form_input li span:last-child{padding:2vw;}
ul.form_input{margin-bottom:10vw;}
.contact_policy_box p{font-size:1.2rem;}
.control {font-size:1.3rem;}
#modal{left:80%;bottom:5vw;}
#result{bottom: 1em;
    margin-right: -15em;
    font-size: 1.1rem;}
    p.num{padding-bottom:1.5em;}
    .contact_info{text-align: center;padding-top:10vw;}
    .contact_info p span *{font-size:2rem;letter-spacing: 0.1em;}
    .contact_info p span {display: block;}
    .contact_info p:nth-child(2) span a{font-size:1.4rem;}
.contact_info p:nth-child(3){font-size:1.4rem;} 
.bottomsp{text-align: center;padding:15vw 0 5vw;}
	  
/*	pages */  
.bottomsp{width:100%;box-sizing: border-box;}
/* footer sp*/
.f_box{width:100%;padding:5vw;box-sizing: border-box;justify-content: center;}
p.f_ad{font-size:1rem;}
.f_navi{display: none;}
.f_right{text-align: center;}
a.logo_e{width:120px;margin-left:5vw;}
a.logo_w{width:130px;}
p.f_ad{padding-top:1em;}
p.copy{padding:0.5em 0 1em;font-size:1rem;}

	} /*  ---------   sp  end --------------*/