@charset "UTF-8";

/* --- KV 固定表示 --- */
.mv{ position:relative; padding-top:100vh; overflow:hidden; }
.mv .txt_wrap { position: absolute; top: 8%; right: 5%; text-align: center; }
.mv .txt_wrap h1 img { max-width:  min(100% , 140px); margin: 0 auto; }
.mv .txt_wrap .kv_copy { font-family: var(--font-mincho); font-size:clamp(25px,7vw,60px); color: #fff; }
.mv-image{ aspect-ratio:16/9; background:#ccc center/cover no-repeat; }
.mv-image--main{ background-image:url("../img/top/kv.png"); position: fixed; }
.mv-image--main::after { content: ''; display: block; background: #666666;
background: linear-gradient(180deg,rgba(102, 102, 102, 1) 0%, rgba(0, 0, 0, 0.5) 100%); width: 100%; height: 100vh; mix-blend-mode: multiply; }
.mv-image--main.is-fixed{ position:fixed; inset:0; width:100%; height:100vh; z-index:-1; }
.mv-image--main.is-released{ opacity:0; pointer-events:none; }

/* 2分割のサブ行 */
.mv-row{ display:grid; grid-template-columns:1fr 1fr; }
.mv-image--sub1{ background-image:url("../img/top/sub_kv01.png"); }
.mv-image--sub2{ background-image:url("../img/top/sub_kv02.png"); }

.mv-end{ width:1px; height:1px; margin:0 auto; }
.mv-image--main.is-fixed{ position:fixed; inset:0; width:100%; height:100vh; z-index:-1; }
.mv-image--main.is-released{ opacity:0; pointer-events:none; }
#studio , #message , #concept , #case { background:#fff; }
.c-concept{ background:#fff; }

/* メッセージ */
.mv-message{ width:min(680px,90%); margin:0 auto;padding:150px 0;box-sizing:border-box; text-align: center; }
.mv-message__lead{ font-size:clamp(18px,2.4vw,28px); line-height:1.5; margin:0 0 1em; color: #fff;letter-spacing: .15em; }
.mv-message__points{ margin:0; color:#fff; letter-spacing: .15em; font-size: clamp(14px, 2.4vw, 16px); }

/* section */
.section{padding-block: clamp(56px,8vw,108px)}
.section-title{ font-family:var(--font-mincho); font-size: clamp(22px,2.6vw,32px); letter-spacing:.15em; text-align:center; margin:0 0 2.2rem; }
.section-title span{display:inline-block; padding-inline:.4em}

/* studio */
.studio-grid{ display:grid; gap:28px; grid-template-columns:repeat(2,1fr); }
.card{background:var(--card); border-radius:14px; overflow:hidden}
.card__media{aspect-ratio: 16/10; background:#ddd center/cover no-repeat}
.studio-photo--a{background-image:url("/assets/img/studio-a.jpg")}
.studio-photo--b{background-image:url("/assets/img/studio-b.jpg")}
.card__body{padding:20px 18px}
.card__title{font-weight:600; margin:0 0 .2em}
.card__meta{color:var(--ink-weak); font-size:14px; margin:0 0 .6em}
.card__text{margin:0 0 1em}
.card__link{color:var(--ink); border-bottom:1px solid #bbb; text-decoration:none}

.studio-note{ margin-top:48px; background:#111; color:#fff; border-radius:18px; padding:28px; text-align:center; }
.studio-note p{margin:.3em 0}

/* concept */
/*.l-inner{ width:min(100%,1240px); margin-inline:auto; padding-inline:min(5vw,48px); }*/
.c-studio{ padding-block:clamp(60px,7vw,120px); }
.c-studio__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:clamp(20px,4vw,30px); align-items: baseline; }
.c-studio__title{ font-family:var(--font-mincho); font-size:clamp(24px,4.8vw,70px); margin:0; }
.c-studio__cta{ display: flex; align-items: center; gap: 5px; color:var(--main-color); text-decoration:none; white-space:nowrap; font-size:clamp(14px,1.6vw,18px); transition:color .3s ease; }
.c-studio__cta svg{ width:21px; height:18px; display:block; fill:currentColor; transition:fill .3s ease; }
.c-studio__pair{ display:grid; grid-template-columns:1fr 1fr; }
.c-studio__figure{ margin:0; }
.c-studio__figure img{ display:block; width:100%; height:auto; object-fit:cover; }
.c-studio__caption{ margin-top:clamp(15px, 4vw, 50px); padding-left:clamp(25px, 6vw, 40px); border-left:4px solid #e3e3e3; }
.c-studio__name{ font-family:var(--font-mincho); font-size:clamp(18px,2.4vw,28px); line-height:1.5; margin:0 0 .2em; }
.c-studio__addr{ font-size: clamp(14px, 2.4vw, 16px);}
.c-studio__tel{ font-size: clamp(14px, 2.4vw, 16px); }
.c-studio__tel a{ color:var(--main-color); text-underline-offset:2px; }
.c-studio__note{ margin-left:.25em; color:#555; }
.c-studio__map{ margin:.6em 0 0; }
.c-studio__map a , .c-studio__link a{ color:var(--main-color); text-decoration:none; display:inline-flex; align-items:center; gap:.25em; transition: .5s; font-size: clamp(12px, 2.4vw, 16px); }
.c-studio__map svg , .c-studio__link svg { width:13px; height:13px; display:block; }
.c-studio__item a figure { transition: .5s; }

/*message*/
:root{ --message-gutter: clamp(300px, 22ch, 36vw); }
/*.c-message{ padding-block:clamp(56px,7vw,96px); }*/
.c-message__inner{ position:relative; }
.c-message__title{ position:absolute; left:clamp(5%, 6vw, 48px); top:50%; transform:translateY(-50%); margin:0; font-weight:600; letter-spacing:.12em; font-size:clamp(22px,3.2vw,30px); color:#fff; mix-blend-mode:difference; pointer-events:none; z-index:1; }
.c-message__panel{ background:#262626; color:#fff; border-radius:100px 0 100px 0; padding:clamp(40px,6vw,72px) clamp(40px,6vw,80px); margin-left:var(--message-gutter); }
.c-message__copy{ max-width:960px; margin-left:auto; margin-right:0; font-size:clamp(15px,1.6vw,20px); line-height:2; }
.c-message__copy p{ font-size:clamp(14px,2.4vw,18px); padding-left:15%; box-sizing:border-box; line-height: 2; }

/*concept*/
:root{ --concept-eat:clamp(12px,3vw,20px); }
.c-concept{ max-width: 1600px; margin: 0 auto; padding-block:clamp(56px,7vw,96px); }
.c-concept__title{ text-align:center; font-family:var(--font-mincho); font-size:clamp(24px,4.8vw,70px); margin:0 0 clamp(20px,4vw,30px); }
.c-concept__row{ display:grid; grid-template-columns:1.15fr 0.85fr; column-gap:clamp(12px,2.5vw,32px); align-items:center; z-index: 0; position: relative; }
.c-concept__row--rev{ grid-template-columns:0.85fr 1.15fr; }
.c-concept__row--rev .c-concept__media{ order:2; }
.c-concept__row--rev .c-concept__content{ order:1; }
.c-concept__media{ margin:0; margin-right:calc(-1 * var(--concept-eat)); position:relative; z-index:1; }
.c-concept__row--rev .c-concept__media{ margin-right:0; margin-left:calc(-1 * var(--concept-eat)); }
.c-concept__content{ position:relative; padding:0 clamp(5%,1.8vw,24px); }
.c-concept__row:not(.c-concept__row--rev) .c-concept__content{ padding-left:clamp(16px,2.6vw,36px); }
.c-concept__row--rev .c-concept__content{ padding-right:clamp(16px,2.6vw,36px); }
.c-concept__media img{ display:block; width:100%; height:auto; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.c-concept__row--rev .c-concept__content::before{ inset:auto -32px 10% auto; }
.c-concept__heading{ font-weight:700; margin:0 0 .6em; font-size:clamp(18px,2vw,26px); letter-spacing:.02em; position: relative; }
.c-concept__heading::after { content: ''; position: absolute; background: url("../img/top/logo_mark.png")no-repeat; background-size: contain; width: 50%; aspect-ratio: 175 / 175; left: -50px; top: -100px; z-index: -1; }
.c-concept__content p{ line-height:2; font-size:clamp(14px,1.6vw,16px); z-index: 1; position: relative; }

/* case */
#case { position: relative; z-index: 0;}
:root{ --case-gap:clamp(12px,2.2vw,18px); }
.c-case_inner{ padding-block:clamp(56px,7vw,88px); background:#262626; color:#fff; border-radius:80px 0 80px 0; overflow: hidden;}
.c-case__title{ font-family:var(--font-mincho); padding: 0 5%;letter-spacing:.12em; font-size:clamp(24px,4.8vw,70px); margin:0 0 clamp(20px,4vw,30px); }
.c-case__track{ display:block; }
.c-case__track .slick-list{ margin:0 calc(-1 * var(--case-gap)); overflow:visible; }
.c-case__track .slick-slide{ margin:0 var(--case-gap); }
.c-case__card{ background:#3a3a3a; padding:clamp(10px,1.2vw,14px); }
.c-case__media img{ display:block; width:100%; height:auto; object-fit:cover; }
.c-case__cap{ font-size:14px; color:#ddd; }
.c-case__nav{ display:flex; justify-content:center; gap:12px; padding-top:clamp(16px,2vw,24px); position: relative; z-index: 2;}
.c-case__btn{ width:34px; height:34px; display:grid; place-items:center; background:#111; color:#fff; border:none; cursor:pointer; }

#flow { background:#f6f6f6; }
.c-flow { padding-block:clamp(60px,7vw,110px); }
.c-flow__inner { max-width:800px; margin:0 auto; }
.c-flow__title { text-align:center; font-family:var(--font-mincho); font-size:clamp(24px,4.8vw,70px); margin:0 0 clamp(30px,5vw,50px); letter-spacing:.12em; }
.c-flow__layout { display:flex; flex-direction:column; gap:clamp(36px,4vw,52px); }
.c-flow__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(20px,2.8vw,35px); row-gap:clamp(35px,3vw,40px); align-items:stretch; }
.c-flow-card { position:relative; background:#fff; border-radius:40px; padding:clamp(25px,10vw,50px) clamp(15px,7vw,40px); box-shadow:0 12px 30px rgba(0,0,0,.04); display:flex; flex-direction:column; gap:clamp(5px,1.5vw,10px); }
.c-flow-card--span2 { grid-column:1 / -1; }
.c-flow-card__badge { position:absolute; top: -10px; left: 20px; width: 55px; height: 55px; border-radius:50%; background:#222; color:#fff; font-family:var(--font-mincho); font-weight:500; font-size:20px; display:grid; place-items:center; }
.c-flow-card__title { margin:0; font-size:clamp(18px,1.6vw,26px); font-weight:600; letter-spacing:.08em; text-align:left; }
.c-flow-card__title span { font-size: 60%; }
.c-flow-card__lead { font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6; }
.c-flow-card__body { font-size:clamp(14px,1.4vw,15px); line-height:1.9; }
.c-flow-card__media { aspect-ratio: 280 / 180; }
.c-flow-card__media--step1 { background:url("../img/top/flow01.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step2 { background:url("../img/top/flow02.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step3 { background:url("../img/top/flow03.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step4 { background:url("../img/top/flow04.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step5 { background:url("../img/top/flow05.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step6 { background:url("../img/top/flow06.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__media--step7 { background:url("../img/top/flow07.png") no-repeat; background-size: contain; margin-top: auto; }
.c-flow-card__list { margin:.4em 0 0 0; padding:0; counter-reset:flow-addr; list-style:none; }
.c-flow-card__list li { position:relative; padding-left:1.7em; margin-bottom:.7em; font-weight:700; line-height:1.6; }
.c-flow-card__list li:last-child { margin-bottom: 0; }
.c-flow-card__list li:before { content:counter(flow-addr); counter-increment:flow-addr; position:absolute; left:0; top:.1em; width:20px; height:20px; border-radius:50%; border:1px solid #c5c5c5; display:flex; align-items:center; justify-content:center; font-size:11px; }
.c-flow-card__list .address { font-weight:400; font-size:13px; line-height:1.5; margin-top:3px; }
.c-flow__bottom-list { margin:0; padding:0; list-style:none; display:flex; justify-content:center; align-items:center; gap: clamp(10px, 4vw, 40px); flex-wrap:wrap; }
.c-flow__bottom-item { display:flex; align-items:center; gap:.6em; }
.c-flow__num { display:grid; place-items:center; width:48px; height:48px; background:#222; color:#fff; border-radius:50%; font-family:var(--font-mincho); font-weight:500; font-size:18px; }
.c-flow__text { margin: 0; font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; letter-spacing: .08em; text-align: left; }

/* hover */
@media (hover:hover) and (pointer:fine){
  .c-flow-card__list li a{ color:#252525; transition:.3s; }
  .c-flow-card__list li a:hover{ opacity:.6; }
}
/* faq */
.faq{background:#fafafa}
.c-faq{ padding-block:clamp(60px,7vw,100px) clamp(120px,7vw,100px); background:#fff; }
.c-faq__title{ font-family:var(--font-mincho); font-weight:600; letter-spacing:.12em; font-size:clamp(24px,4.8vw,50px); margin:0 0 clamp(15px,3.5vw,25px); }
.c-faq__item{ padding-block:clamp(14px,2.2vw,20px); border-bottom:1px solid #ececec; }
.c-faq__item:first-child{ border-top:1px solid #ececec; }
.c-faq__q{ position:relative; margin:0 0 .6em; padding-left:2.2em; font-size:clamp(14px,1.7vw,18px); line-height:1.9; }
.c-faq__q::before{ content:"Q."; position:absolute; left:0; top:-5px; font-family:var(--font-mincho); font-weight:600; font-size:clamp(18px,2.2vw,22px); }
.c-faq__a{ position:relative; margin:0; padding-left:2.2em; font-size:clamp(13px,1.6vw,16px); line-height:2; }
.c-faq__a::before{ content:"A."; position:absolute; left:0; top:-5px; font-family:var(--font-mincho); font-weight:600; font-size:clamp(18px,2.2vw,22px); }

/* contact */
.c-contact{ position:relative; background:url("../img/top/contact_bg.png") center/cover no-repeat; color:#fff; text-align:center; padding-block:clamp(60px,18vw,100px); overflow:hidden; }
.c-contact__overlay{ position:absolute; inset:0; background:rgba(0,0,0,78%); }
.c-contact__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(20px,3vw,40px); max-width:960px; margin-inline:auto; padding: 0 5%; }
.c-contact__text p { font-size:clamp(13px,1.7vw,18px); line-height:2; color:#fff; }
.c-contact__btn{ display:inline-flex; align-items:center; gap:.8em; text-decoration:none; transition:all .3s ease; color:#fff; }
.c-contact__title{ font-family:var(--font-mincho); font-size:clamp(26px,5.4vw,60px); line-height: 1; }
.c-contact__arrow { border:2px solid rgba(255,255,255,.9); border-radius:50px; margin-top: 9px; }
.c-contact__arrow svg{ display:block; width:22px; height:22px; padding: 12px; }
.c-contact__tel { width: 100%; }
.c-contact__tel p { text-align: center; }
.c-contact__tel a { text-align: center; font-family: var(--font-mincho); font-size: clamp(22px,5.4vw,35px); color: #fff; transition: .5s; }
.c-contact__tel a img { max-width: 18px; margin-right: 5px; }

@media (hover: hover) and (pointer: fine) { 
  .c-case__btn:hover{ filter:brightness(1.8); }
  .c-studio__cta:hover{ color:#0c7352; }
  .c-studio__map a:hover , .c-studio__link a:hover { color:#0c7352; }
  .c-contact__btn:hover{ transform:translateY(-10px); }
  .c-contact__btn:hover svg { background:#fff; color:#111;  border-radius:50px; }
  .c-contact__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  .c-studio__item a:hover figure { opacity: .5; }
  .c-contact__tel a:hover { opacity: .5; }
  .c-flow-card__list li a:hover { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

@media only screen and (max-width: 1024px){
   :root{ --message-gutter:clamp(10px, 3ch, 40vw); }
  .c-message__title{ position:static; transform:none; margin:0 0 .8em; mix-blend-mode:normal; color:#222; padding: 0 5%; }
  .c-message__panel{ margin-left:var(--message-gutter); }
  .c-message__copy p{ padding-left:0; }
  .c-flow-card { border-radius:30px; }
}

@media only screen and (min-width: 981px){
  .c-flow-card--step1 .c-flow-card__body{ display:flex; flex-direction:column; }
  .c-flow-card--step1 .c-flow-card__inner{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:flex-start; column-gap:clamp(24px,3vw,40px); }
}

@media only screen and (max-width: 980px){
  .c-concept__media { margin-right: inherit;}
  .mv-row{ grid-template-columns:1fr; }
  .mv .txt_wrap { right: 0; left: 0; margin: auto; }
  .studio-grid{grid-template-columns:1fr}
  .c-studio__pair{ grid-template-columns:1fr; gap: 40px; }
  .c-studio__head{ flex-direction: column; align-items:center; }
  .flow-steps{grid-template-columns:repeat(3,1fr)}
  .contact-inner{grid-template-columns:1fr}
  .mv-message{ padding: 90px 0;}
  .c-studio__cta svg { width: 16px; height: 12px; }
  .c-concept__row{ grid-template-columns:1fr; }
  .c-concept__row--rev .c-concept__media{ order:initial; }
  .c-concept__content::before{ inset:auto auto -6px 0; width:110px; height:110px; }
  .c-concept__content { padding-top: 30px; padding-bottom: 30px; }
  .c-flow__grid { grid-template-columns:minmax(0,1fr); }
  .c-flow-card--span2 { grid-column:auto; }
  .c-flow-card__media--step1 , .c-flow-card__media--step2 , .c-flow-card__media--step3 , .c-flow-card__media--step4 , .c-flow-card__media--step5 , .c-flow-card__media--step6 , .c-flow-card__media--step7 { margin-top: 13px; }

}

/*　600pxからレスポンシブ*/
@media only screen and (max-width: 600px){
  :root{--gutter:16px}
  .header-inner{height:56px}
  .site-nav{display:none}
  .flow-steps{grid-template-columns:repeat(2,1fr)}
  .mv-row{grid-template-columns:1fr}
  .c-studio__title{ letter-spacing:.03em; }
  .c-studio__caption{ padding-left:14px; border-left-width:3px; }
  .c-message__panel {border-radius: 60px 0 60px 0; }
  .c-case_inner { border-radius: 60px 0 60px 0; }
  .c-faq__item{ padding-block:16px; }
  .c-faq__q{ margin:0 0 .5em; }
  .c-contact{ padding-block:clamp(60px,10vw,160px); }
  .c-contact__arrow {margin-top: 0;}
  .c-contact__arrow svg{ width:15px; height:15px; padding: 10px; } 
  .c-contact__text p { text-align: left; }
  .c-flow { padding-block:clamp(50px,10vw,80px); }
  .c-flow-card { border-radius:24px; min-height:auto; }
  .c-flow-card__badge { width:40px; height:40px; font-size:16px; }
  .c-flow__num { width:35px; height:35px; font-size:14px; }
  .c-contact__tel a img { max-width: 11px; }
  .c-flow-card__list li:before { width: 15px; height: 15px; font-size: 10px; top: 0.3em; }
  .c-flow__bottom-list { flex-direction: column; align-items: flex-start; }
}