@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{max-width:1200px;margin:auto;height:auto;overflow:hidden;padding-top:6vw;text-align: center;}

/* header */	
header{position: relative;box-sizing: border-box;text-align: center;}
h1.logo img{display: inline-block;width:30%;max-width:400px;z-index:100;position:relative;padding-top:8vw;}
h1.logo>span{padding-top:2em;display: block;}
.topbg{width:100%;position: absolute;top:0;opacity: 0.2!important;}
#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;}


.mv {
	flex-direction: column;align-items: center;padding-bottom: 3vw;width: 100%;
}
.mv span {max-width: 800px;width: 90%;text-align: center;}

/* ===== CTA Buttons (drop this near the end of your CSS) ===== */
:root{
  --bg: #ffffff;
  --fg: #111827;          /* near-black */
  --muted: #6b7280;       /* gray-500 */
  --accent: #111827;      /* primary fill */
  --accent-fg: #ffffff;   /* on-primary */
  --ring: 0 0 0 3px rgba(59,130,246,.35); /* focus ring */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --fg: #e5e7eb;
    --muted: #9aa4b2;
    --accent: #e5e7eb;
    --accent-fg: #0b1020;
  }
}

.cta-wrap{
  padding: clamp(16px, 3vw, 28px) 0;
  padding-bottom: 60px;
}
.cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* base button */
.btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 12px 18px;
  min-width: 9.5rem;
  border-radius: 9999px;           /* pill */
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  color: var(--fg);
  background: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

/* primary — 相談する（黒ベタ白文字） */
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.btn-primary:hover{ filter: brightness(1.03); }

/* outline — 料金（白地に黒枠黒文字） */
.btn-outline{
  background: #ffffff !important;
  border-color: var(--fg) !important;
  color: var(--fg) !important;
}
@media (prefers-color-scheme: dark){
  .btn-outline{
    background: transparent !important;
    border-color: var(--fg) !important;
    color: var(--fg) !important;
  }
}

/* ghost — 実績（薄塗りで視認性確保） */
.btn-ghost{
  background: #f3f4f6 !important;   /* light gray */
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
.btn-ghost:hover{ background: #e5e7eb !important; }
@media (prefers-color-scheme: dark){
  .btn-ghost{
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }
  .btn-ghost:hover{ background: #1f2937 !important; }
}

/* small screens: full width */
@media (max-width: 560px){
  .btn{ width: 100%; min-width: 0; }
}

.services {
  max-width: 960px;
  margin: 4rem auto;
  padding: 0 1.2rem;
  line-height: 1.9;
  font-size: 16px;
}

#services h2 {
 padding-bottom: 2em;
}

.service-block {
  border-top: 1px solid #e6e6e6;
  padding: 1.6rem 0;
}

.service-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.service-heading {
  font-size: 1.8rem;
  margin: 0 0 .5rem;
  font-weight: 500;
}

.service-text {
  margin: 0;
}

/* 英語版も同じ見た目にする */
#services-en.services {
  margin-top: 2rem;
}

h3.cc-title {
	color: #fff;
}


#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;}
	  
	/* ===== Art Sale block (scoped, clean rhythm) ===== */
.art-sale-title {letter-spacing: 0.05em;font-size: 2.2rem;padding: 2em 0 1em;}
.order p,.order li {
	line-height: 1.8;
}
	 
.price,.faq {
	font-size: 2.2rem;
	padding-top: 3em;
	max-width: 600px;
	width: 90vw;
	margin: auto;
}	 

.faq {
	font-size: 1.4rem;
	font-weight: 600;
	padding: 0.5em 0;
}

.price h2 {
	padding-bottom: 1.5em;
}
	  
	  
/* footer */
footer p{padding:200px 0 50px;text-align: center;}


@media screen and (max-width: 900px) {

h3.service-heading {
    font-size: 1.3rem;
    margin-bottom: 1.5em;
    text-decoration: underline;
  }
  
  p.service-lead,.service-list * ,.service-steps * {
	  font-size: 1.2rem;
  }

  /* ブロックを2カラムに */
  .services .service-block {
    column-gap: 2.2rem;
    align-items: start;
    padding: 2rem 0;
  }

  .services .service-text {
    font-size: 1rem;
  }

  /* 日本語・英語を並べたい場合のレイアウト補助 */
  .services.dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
    align-items: start;
  }
  .services.dual .services-title {
    grid-column: 1 / -1; /* タイトルは見出しを共通に */
  }
  
  .illust_info {
	  padding:3em 0em; 
  }
  
  
}


@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:15vw;}
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 10vw;
    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;}

.cta a {
	max-width: 60vw;
}

.sale {
	max-width: 90vw;
	margin: auto;
}



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