/* =========================================
   きもの着付け AtelierToco  共通スタイル
   ========================================= */
:root{
  --ai:#1E2B3C;        /* 藍 */
  --ai-2:#2A3B50;
  --sumi:#23262B;      /* 墨 */
  --sumi-2:#4A4E55;
  --kami:#EDEAE3;      /* 紙 */
  --kami-2:#E3DFD5;
  --fuji:#7C6A9C;      /* 藤 */
  --fuji-l:#C3B6DC;
  --koke:#6F7B4E;      /* 苔 */
  --rule:#C9C4B8;
  --mincho:"Shippori Mincho B1", serif;
  --gothic:"Zen Kaku Gothic New", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--kami);
  color:var(--sumi);
  font-family:var(--gothic);
  font-weight:300;
  line-height:2;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--fuji);outline-offset:3px}

/* ---------- レイアウト ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
section{padding:88px 0}
section.tight{padding:64px 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:40px}
.sec-head h2{font-family:var(--mincho);font-weight:600;font-size:1.5rem;letter-spacing:.14em}
.sec-head .en{font-size:.68rem;letter-spacing:.28em;color:var(--fuji);text-transform:uppercase}
.note{font-size:.78rem;color:var(--sumi-2);letter-spacing:.08em;line-height:2.1}
.lede{max-width:34em;font-size:.98rem;line-height:2.5}
.lede + .lede{margin-top:1.6em}

/* ---------- ヘッダー ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(237,234,227,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.bar{display:flex;justify-content:space-between;align-items:center;height:60px;gap:16px}
.header-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.ig-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--sumi);flex-shrink:0}
.ig-link svg{width:19px;height:19px}
.ig-link:hover{color:var(--fuji)}
.logo{font-family:var(--mincho);font-size:.95rem;letter-spacing:.18em;text-decoration:none;white-space:nowrap}
nav ul{display:flex;gap:26px;list-style:none}
nav a{font-size:.78rem;letter-spacing:.12em;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--fuji)}
nav a[aria-current="page"]{border-bottom-color:var(--fuji);color:var(--fuji)}

.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:0;width:34px;height:34px;position:relative}
.menu-btn span{display:block;position:absolute;left:5px;right:5px;height:2px;background:var(--sumi);transition:transform .25s ease,opacity .25s ease}
.menu-btn span:nth-child(1){top:11px}
.menu-btn span:nth-child(2){top:17px}
.menu-btn span:nth-child(3){top:23px}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:820px){
  header{position:sticky}
  .menu-btn{display:block}
  nav{
    display:none;
    position:absolute;
    top:60px;left:0;right:0;
    background:var(--kami);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    box-shadow:0 10px 18px rgba(35,38,43,.10);
  }
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:6px 24px 18px}
  nav a{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  nav li:last-child a{border-bottom:none}
}
@media(max-width:820px){nav:not(.open){display:none}}

/* ---------- ヒーロー（トップ・縦書き） ---------- */
.hero{background:var(--ai);color:var(--kami);overflow:hidden}
.hero-inner{
  max-width:1080px;margin:0 auto;padding:56px 24px;
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:stretch;
  min-height:min(78vh,640px);
}
.tate{
  writing-mode:vertical-rl;
  font-family:var(--mincho);
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.9;letter-spacing:.24em;
  padding-right:8px;
  border-right:1px solid rgba(237,234,227,.35);
  align-self:start;
}
.tate .accent{color:var(--fuji-l)}
.tate .sub{
  font-family:var(--gothic);font-size:.8rem;letter-spacing:.2em;line-height:2.4;
  color:rgba(237,234,227,.72);margin-right:28px;
}
.hero-photo{
  background:rgba(237,234,227,.07);
  border:1px solid rgba(237,234,227,.22);
  display:grid;place-items:center;min-height:320px;
}
.ph{font-size:.72rem;letter-spacing:.2em;color:rgba(237,234,227,.5);text-align:center;line-height:2}
@media(max-width:760px){
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:40px 24px;min-height:0}
  .tate{height:min(58vh,420px);justify-self:end;border-right:none;border-left:1px solid rgba(237,234,227,.3)}
  .tate .sub{margin-right:20px}
}

/* ---------- 下層ページのヒーロー ---------- */
.page-hero{background:var(--ai);color:var(--kami);padding:64px 0}
.page-hero .wrap{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.page-hero h1{
  writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.22em;line-height:1.8;
  height:min(34vh,300px);border-left:1px solid rgba(237,234,227,.35);padding-left:0;
}
.page-hero .en{font-size:.7rem;letter-spacing:.3em;color:var(--fuji-l);padding-bottom:8px}
.page-hero p{font-size:.92rem;color:rgba(237,234,227,.8);max-width:24em;padding-bottom:6px}

/* ---------- お知らせ ---------- */
.news{background:var(--kami-2);padding:56px 0}
.news ul{list-style:none;display:grid;gap:14px;max-width:760px}
.news li{display:grid;grid-template-columns:7.5em 1fr;gap:8px;font-size:.88rem;align-items:baseline}
.news time{font-size:.75rem;letter-spacing:.1em;color:var(--fuji)}
@media(max-width:560px){.news li{grid-template-columns:1fr;gap:2px}}

/* ---------- サービスカード ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--kami);padding:36px 32px;display:flex;flex-direction:column;gap:14px}
.card .en{font-size:.66rem;letter-spacing:.26em;color:var(--koke)}
.card h3{font-family:var(--mincho);font-size:1.18rem;font-weight:600;letter-spacing:.1em}
.card p{font-size:.88rem;line-height:2.2}
.card .badge{font-size:.75rem;color:var(--koke);letter-spacing:.1em}
.card .more{
  margin-top:auto;font-size:.8rem;letter-spacing:.1em;text-decoration:none;
  border-bottom:1px solid var(--fuji);align-self:flex-start;padding-bottom:2px;
}
.card .more:hover{color:var(--fuji)}
@media(max-width:760px){.cards{grid-template-columns:1fr}}

/* ---------- 料金表 ---------- */
.price{list-style:none;display:grid;gap:0;max-width:640px;border-top:1px solid var(--rule)}
.price li{
  display:flex;align-items:baseline;gap:12px;
  padding:14px 2px;border-bottom:1px solid var(--rule);
}
.price .item{font-family:var(--mincho);font-size:1.02rem;letter-spacing:.08em;white-space:nowrap}
.price .dots{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.price .yen{font-size:.98rem;letter-spacing:.06em;white-space:nowrap}
.price .sub{font-size:.75rem;color:var(--sumi-2);display:block}
.notes{margin-top:20px;display:grid;gap:4px}

/* ---------- エリア ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 16px}
.areas span{
  border:1px solid var(--rule);padding:5px 16px;font-size:.85rem;letter-spacing:.1em;
  background:var(--kami-2);
}

/* ---------- 手順（撮影の流れ） ---------- */
.flow{display:grid;gap:0;border-top:1px solid var(--rule)}
.flow li{
  list-style:none;display:grid;grid-template-columns:4.5rem 1fr;gap:20px;
  padding:22px 2px;border-bottom:1px solid var(--rule);align-items:baseline;
}
.flow .num{font-family:var(--mincho);font-size:1.1rem;color:var(--fuji);letter-spacing:.1em}
.flow h4{font-family:var(--mincho);font-size:1.02rem;font-weight:600;letter-spacing:.1em;margin-bottom:2px}
.flow p{font-size:.88rem;color:var(--sumi-2)}
@media(max-width:560px){.flow li{grid-template-columns:3.2rem 1fr;gap:12px}}

/* ---------- コース ---------- */
.courses{display:grid;border-top:1px solid var(--rule)}
.course{
  display:grid;grid-template-columns:1fr 2fr;gap:24px;
  padding:28px 4px;border-bottom:1px solid var(--rule);align-items:baseline;
}
.course h4{font-family:var(--mincho);font-size:1.05rem;font-weight:600;letter-spacing:.1em}
.course p{font-size:.88rem;color:var(--sumi-2)}
@media(max-width:640px){.course{grid-template-columns:1fr;gap:6px}}

/* ---------- 囲み（コース詳細・プラン） ---------- */
.panel{border:1px solid var(--rule);background:var(--kami-2);padding:32px;margin-top:28px}
.panel h3{font-family:var(--mincho);font-size:1.14rem;font-weight:600;letter-spacing:.1em;margin-bottom:6px}
.panel .en{font-size:.66rem;letter-spacing:.26em;color:var(--koke);display:block;margin-bottom:10px}
.panel ul{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:.88rem}
.panel li::before{content:"—　";color:var(--fuji)}
.panel .fee{font-family:var(--mincho);font-size:1.3rem;letter-spacing:.08em;margin-top:16px;display:block}
@media(max-width:560px){.panel{padding:24px 20px}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:760px){.three{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.three{grid-template-columns:1fr}}

.four{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:760px){.four{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.four{grid-template-columns:1fr}}

/* ---------- 写真枠 ---------- */
.frame{
  background:var(--kami-2);border:1px solid var(--rule);
  display:grid;place-items:center;min-height:300px;margin:32px 0;
}
.frame .ph{color:#8A8578}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .frame{margin:0;min-height:260px}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}
figcaption{font-size:.78rem;color:var(--sumi-2);margin-top:8px;letter-spacing:.08em}

/* ---------- 講師 ---------- */
.teacher{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.teacher .name{font-family:var(--mincho);font-size:1.25rem;letter-spacing:.12em}
.teacher .title{font-size:.8rem;color:var(--koke);letter-spacing:.14em;margin-top:4px}
.teacher .word{font-family:var(--mincho);font-size:1.05rem;line-height:2.4;margin-top:24px}
@media(max-width:760px){.teacher{grid-template-columns:1fr;gap:24px}}

/* ---------- 予約 ---------- */
.contact{background:var(--ai);color:var(--kami);padding:88px 0}
.contact .sec-head h2{color:var(--kami)}
.contact .sec-head .en{color:var(--fuji-l)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.lines{display:grid;gap:20px}
.line{border-top:1px solid rgba(237,234,227,.28);padding-top:14px}
.line .label{font-size:.7rem;letter-spacing:.22em;color:rgba(237,234,227,.6);display:block;margin-bottom:4px}
.line a,.line span{font-size:1.02rem;letter-spacing:.08em;text-decoration:none}
.line a:hover{color:var(--fuji-l)}
.ask{font-size:.85rem;color:rgba(237,234,227,.78);line-height:2.3}
.ask ul{list-style:none;margin-top:10px}
.ask li::before{content:"—　";color:var(--fuji-l)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- お問い合わせフォーム ---------- */
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{max-width:640px}
.field{margin-bottom:28px}
.field label,.field legend{display:block;font-size:.8rem;letter-spacing:.1em;color:var(--sumi-2);margin-bottom:8px}
.field .req{color:var(--fuji);margin-left:.3em;font-size:.72rem}
.field .hint{font-size:.74rem;color:#8A8578;margin-top:6px;letter-spacing:.04em}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field input[type=time],
.field input[type=number],
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--rule);
  background:#fff;
  font-family:var(--gothic);
  font-size:.92rem;
  color:var(--sumi);
  letter-spacing:.04em;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.8}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--fuji);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.field-row-3{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.field-row-3{grid-template-columns:1fr}}
.opt-group{display:flex;flex-wrap:wrap;gap:10px 22px}
.opt-group label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--sumi);letter-spacing:.04em;margin-bottom:0}
.opt-group input{accent-color:var(--fuji);width:16px;height:16px}
fieldset{border:none;padding:0}
.type-panel{border-top:1px solid var(--rule);padding-top:28px;margin-top:28px}
.type-panel[hidden]{display:none}
.submit-btn{
  appearance:none;border:none;cursor:pointer;
  background:var(--ai);color:var(--kami);
  padding:15px 40px;font-family:var(--gothic);font-size:.9rem;
  letter-spacing:.16em;
}
.submit-btn:hover{background:var(--ai-2)}
.submit-btn:disabled{opacity:.5;cursor:default}
.form-msg{margin-top:18px;font-size:.85rem;letter-spacing:.06em}
.form-msg.ok{color:var(--koke)}
.form-msg.err{color:#a8443c}
.form-done{font-size:1.02rem;line-height:2.2}

/* お問い合わせページ内の相談ボタン */
.form-cta{
  display:inline-block;margin-top:18px;
  background:var(--fuji);color:var(--kami);
  padding:13px 32px;text-decoration:none;
  font-size:.85rem;letter-spacing:.14em;
}
.form-cta:hover{background:var(--fuji-l);color:var(--ai)}

/* ---------- アクセス ---------- */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.addr{font-family:var(--mincho);font-size:1.1rem;letter-spacing:.1em;line-height:2.2}
.stations{list-style:none;margin-top:24px;font-size:.88rem;display:grid;gap:6px}
.stations li{display:flex;justify-content:space-between;max-width:22em;border-bottom:1px dotted var(--rule);padding-bottom:6px}
.map{background:var(--kami-2);border:1px solid var(--rule);min-height:280px;display:grid;place-items:center}
.map .ph{color:#8A8578}
@media(max-width:760px){.access-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- 戻るリンク ---------- */
.back{padding:40px 0 0}
.back a{font-size:.82rem;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid var(--rule)}
.back a:hover{color:var(--fuji);border-bottom-color:var(--fuji)}

/* ---------- フッター ---------- */
footer{padding:48px 0 60px;border-top:1px solid var(--rule);font-size:.78rem;letter-spacing:.1em;margin-top:24px}
.f-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* ---------- モーション ---------- */
@media(prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
  .fade.in{opacity:1;transform:none}
}

/* ---------- 写真 ---------- */
.hero-photo{padding:0;background:none;border:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;min-height:320px}
.shot{margin:32px 0;overflow:hidden}
.shot img{width:100%;height:auto}
.shot.crop img{height:clamp(280px,42vh,460px);object-fit:cover}
figure.shot{margin-left:0;margin-right:0}
.gallery .shot{margin:0}
.gallery .shot img{aspect-ratio:3/4;object-fit:cover}
.gallery .shot.wide img{aspect-ratio:3/2}
.teacher .shot{margin:0}
.teacher .shot img{aspect-ratio:4/5;object-fit:cover}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:640px){.strip{grid-template-columns:1fr 1fr}}

/* ---------- 下層ページのヒーロー（トップと同一構造） ---------- */
h1.tate{font-weight:400;margin:0}
.tate .en-v{
  display:block;font-family:var(--gothic);font-size:.68rem;
  letter-spacing:.3em;color:var(--fuji-l);margin-bottom:14px;font-weight:400;
}
.tate .sub{max-height:min(56vh,460px)}
@media(max-width:760px){.tate .sub{max-height:min(46vh,360px)}}

/* ギャラリー内で横位置の写真を2列ぶん使う */
.gallery .span2{grid-column:span 2}
.gallery .span2 img{aspect-ratio:3/2}
@media(max-width:480px){.gallery .span2{grid-column:span 1}}