@charset "utf-8";

/* =========================================================
   BB works v6 — 系（design tokens）
   正本は /_design/DESIGN.md
   色は地と主役をBB worksの黄色（v3の山吹）に 墨 白面 罫はv5のまま
   組みは「暮しの手帖」の誌面の型を翻訳（明朝で通す 縦組みの柱見出し 罫の囲み 刷り色のベタ面 角丸0）
   ========================================================= */

:root{
  /* 色（5色 地と主役はBB worksの黄色） */
  --paper:#FBF6E7;    /* 地 淡い生成り黄 */
  --surface:#FFFDF9;  /* 白面 */
  --ink:#2B2622;      /* 墨 本文 見出し 囲み罫 */
  --rule:#DDD6C9;     /* 罫 一覧の区切り */
  --accent:#F2C94C;   /* 山吹 BB worksの黄色 刷り色の面 番号の丸 ボタン */

  /* 書体 明朝で通し 実務の情報（料金 項目名 注記 ナビ）だけゴシック */
  --font-mincho:"Shippori Mincho","ヒラギノ明朝 ProN","Hiragino Mincho ProN","游明朝","Yu Mincho","YuMincho",serif;
  --font-gothic:"Zen Kaku Gothic New","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;

  /* 文字段（本文役割は3種 18 / 16 / 14） */
  --fs-body:18px;
  --fs-small:16px;
  --fs-note:14px;
  --fs-h1:40px;
  --fs-h2:28px;
  --fs-h3:22px;

  /* 余白段（6段） */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:40px;
  --sp-5:56px;
  --sp-6:80px;

  /* 角丸 既定は0 丸いのは番号の印だけ */
  --r-round:50%;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-mincho);
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1.75;
  letter-spacing:normal;
  font-feature-settings:normal;
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--ink);text-underline-offset:0.25em;}

h1,h2,h3{
  font-family:var(--font-mincho);
  font-weight:500;
  letter-spacing:normal;
  margin:0;
  word-break:auto-phrase;
}
h1{font-size:var(--fs-h1);line-height:1.4;}
h2{font-size:var(--fs-h2);line-height:1.5;}
h3{font-size:var(--fs-h3);line-height:1.6;}

p{margin:0;}
p + p{margin-top:var(--sp-2);}

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding-left:var(--sp-3);
  padding-right:var(--sp-3);
}

.small{font-size:var(--fs-small);line-height:1.75;}
.note{font-family:var(--font-gothic);font-size:var(--fs-note);font-weight:400;line-height:1.75;}

/* ---------- 節（誌面の1ページ） ---------- */

.sec{
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-6);
}
.sec--surface{background:var(--surface);}

/* 見出しは罫で囲んだ札 幅が広い時は縦組みの柱になる */
.sec-head{margin-bottom:var(--sp-4);}
.sec-head h2{
  display:inline-block;
  border:1px solid var(--ink);
  padding:var(--sp-1) var(--sp-3);
}
.sec-lead{margin-bottom:var(--sp-4);max-width:40em;}

.body-copy{max-width:40em;}
.body-copy h3{margin-top:var(--sp-4);}
.body-copy h3:first-child{margin-top:0;}
.body-copy h3 + p,
.body-copy h3 + ul{margin-top:var(--sp-2);}

/* ---------- ヘッダー（狭い時は上 広い時は左の柱） ---------- */

.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.header-row{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding-top:var(--sp-2);
  padding-bottom:var(--sp-2);
}
.brand{display:block;flex:0 0 auto;padding:6px 0;}
.brand img{width:148px;height:auto;}
.site-nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--sp-3);
}
.site-nav a{
  font-size:var(--fs-body);
  text-decoration:none;
  white-space:nowrap;
  padding:10px 0;
  border-bottom:1px solid transparent;
}
.site-nav a[aria-current="page"]{border-bottom:3px solid var(--accent);}
.site-nav a:hover,
.site-nav a:focus-visible{border-bottom-color:var(--ink);}

/* ---------- ボタン（角丸0 墨の罫 山吹の面） ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-mincho);
  font-size:var(--fs-body);
  font-weight:500;
  text-decoration:none;
  padding:var(--sp-2) var(--sp-4);
  min-height:56px;
  border:1px solid var(--ink);
}
.btn::after{content:"→";font-family:var(--font-gothic);}
.btn:hover,
.btn:focus-visible{background:var(--paper);}
.btn--header{flex:0 0 auto;padding:var(--sp-1) var(--sp-3);min-height:48px;}
.cta{margin-top:var(--sp-4);}
.cta .note{display:block;margin-top:var(--sp-2);}

/* 誌面の「続きへ」 */
.more{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  font-family:var(--font-gothic);
  font-size:var(--fs-small);
  font-weight:400;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding:6px 0;
  min-height:40px;
}
.more::after{content:"→";}
.more:hover,
.more:focus-visible{border-bottom-color:var(--accent);}

/* ---------- 表紙（トップの顔） ---------- */

.hero{
  padding-top:var(--sp-5);
  padding-bottom:var(--sp-6);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "text" "photo";
  gap:var(--sp-4);
}
.hero-title{grid-area:title;}
.hero-text{grid-area:text;align-self:end;}
.hero-text .lead{max-width:30em;}
.hero-photo{grid-area:photo;}
.hero-photo img{
  width:100%;
  height:360px;
  object-fit:cover;
  object-position:50% 20%;
}

/* ---------- 番号つき一覧（丸い番号の印） ---------- */

.index-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:52em;
}
.index-list > li{
  border-top:1px solid var(--rule);
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-3);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--sp-3);
  align-items:center;
}
.index-list > li:last-child{border-bottom:1px solid var(--rule);}
.index-body{min-width:0;}
.index-body .more{margin-top:var(--sp-2);}

ol.index-list{counter-reset:idx;}
ol.index-list > li{counter-increment:idx;}
ol.index-list.numbered > li::before{
  content:counter(idx);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:var(--r-round);
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-mincho);
  font-size:var(--fs-body);
  line-height:1;
}

/* 見出しつき（できること） */
.toc-body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-1);}
.toc-desc{min-width:0;}
.toc-desc .more{margin-top:var(--sp-2);}

/* ---------- 流れ ---------- */

.flow{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-3);
  list-style:none;
  margin:0;
  padding:0;
}
ol.flow{counter-reset:flw;}
.flow > li{border-top:1px solid var(--ink);padding-top:var(--sp-2);counter-increment:flw;}
.flow > li::before{content:counter(flw);display:block;font-size:var(--fs-h2);line-height:1.2;color:var(--accent);}
.flow h3,.flow p{margin-top:var(--sp-1);}

/* ---------- 写真と文 ---------- */

.photo-text{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
}
.photo-text img{
  width:100%;
  height:380px;
  object-fit:cover;
  object-position:50% 28%;
}

/* ---------- プロフィールの顔 ---------- */

.profile-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
}
.profile-hero img{
  width:100%;
  height:400px;
  object-fit:cover;
  object-position:50% 22%;
}
.profile-hero .lead{margin-top:var(--sp-3);}
.profile-hero .small{margin-top:var(--sp-3);}

/* ---------- 引用 ---------- */

.voice-box{
  margin:0;
  max-width:40em;
  background:var(--surface);
  border:1px solid var(--ink);
  padding:var(--sp-4);
}
.voice{
  margin:0;
  border-left:8px solid var(--accent);
  padding-left:var(--sp-3);
  font-size:var(--fs-body);
  line-height:1.9;
}
.voice p + p{margin-top:var(--sp-3);}
.voice-box figcaption{margin-top:var(--sp-3);}

@media (max-width:767px){
  .voice-box{padding:var(--sp-3);}
  .voice{padding-left:var(--sp-2);}
}

/* ---------- ただの箇条書き ---------- */

.plain-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:44em;
}
.plain-list > li{
  border-top:1px solid var(--rule);
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);
  position:relative;
}
.plain-list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(var(--sp-2) + 0.8em);
  width:8px;
  height:8px;
  background:var(--accent);
}
.plain-list > li:last-child{border-bottom:1px solid var(--rule);}

/* ---------- 事例と関わり方（墨の罫で囲んだ誌面の囲み） ---------- */

.case-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:52em;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-3);
}
.case-list > li{
  background:var(--surface);
  border:1px solid var(--ink);
  padding:var(--sp-4) var(--sp-4);
}
.sec--surface .case-list > li{background:var(--paper);}
.case-list h3{
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--sp-1);
}
.case-list h3 + *{margin-top:var(--sp-2);}
.case-list dl{margin:0;}
.case-list dt{
  font-family:var(--font-gothic);
  font-size:var(--fs-note);
  font-weight:400;
  line-height:1.75;
}
.case-list dd{margin:0;}
.case-list dd + dt{margin-top:var(--sp-2);}
.case-list .more{margin-top:var(--sp-2);}

/* ---------- 料金のかたまり ---------- */

.price-block + .price-block{margin-top:var(--sp-6);}
.price-block h3{
  border-left:8px solid var(--accent);
  padding-left:var(--sp-2);
}
.price-block .small{margin-top:var(--sp-2);max-width:44em;}
.price-block .plain-list{margin-top:var(--sp-3);}

/* ---------- 下層ページの扉 ---------- */

.page-hero{
  padding-top:var(--sp-5);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--ink);
}
.page-hero .lead{margin-top:var(--sp-3);max-width:32em;}

/* ---------- 料金表 ---------- */

.table-wrap{
  margin-top:var(--sp-4);
  max-width:52em;
  overflow-x:auto;
}
table.price{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-small);
  background:var(--surface);
  border-top:1px solid var(--ink);
}
table.price caption{
  text-align:left;
  font-family:var(--font-gothic);
  font-size:var(--fs-note);
  font-weight:400;
  padding-bottom:var(--sp-1);
}
table.price th,
table.price td{
  text-align:left;
  vertical-align:top;
  padding:var(--sp-2);
  border-bottom:1px solid var(--rule);
  line-height:1.75;
}
table.price thead th{
  font-family:var(--font-gothic);
  font-size:var(--fs-note);
  font-weight:500;
  border-bottom:1px solid var(--ink);
  white-space:nowrap;
}
table.price .plan{font-size:var(--fs-body);white-space:nowrap;}
table.price .price-num{font-family:var(--font-gothic);font-weight:500;white-space:nowrap;}
.osusume-label{
  display:block;
  font-family:var(--font-gothic);
  font-size:var(--fs-note);
  font-weight:500;
  background:var(--accent);
  color:var(--ink);
  padding:0 var(--sp-1);
  margin-bottom:6px;
  width:max-content;
}

/* ---------- 終わりの呼びかけ（刷り色のベタ面） ---------- */

.closing{
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-6);
  background:var(--accent);
}
.closing .inner{
  border-top:1px solid var(--ink);
  padding-top:var(--sp-3);
}
.closing p{margin-top:var(--sp-3);max-width:32em;}
.closing .btn{background:var(--ink);color:var(--paper);}
.closing .btn:hover,
.closing .btn:focus-visible{background:var(--paper);color:var(--ink);}

/* ---------- 見つからないページ ---------- */

.not-found{padding-top:var(--sp-6);padding-bottom:var(--sp-6);}
.not-found p{margin-top:var(--sp-3);}

/* ---------- 足もと ---------- */

.site-footer{
  background:var(--paper);
  border-top:1px solid var(--ink);
  padding-top:var(--sp-5);
  padding-bottom:var(--sp-5);
}
.foot-brand{font-size:var(--fs-h3);}
.site-footer .small{margin-top:var(--sp-1);}
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-3);
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--rule);
}
.foot-nav a{
  font-size:var(--fs-small);
  text-decoration:none;
  padding:10px 0;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover,
.foot-nav a:focus-visible{border-bottom-color:var(--ink);}
.foot-note{margin-top:var(--sp-3);font-family:var(--font-gothic);font-size:var(--fs-note);font-weight:400;}

.after-list{margin-top:var(--sp-4);}
.topline{border-top:1px solid var(--ink);padding-top:var(--sp-3);}
.not-found .topline p{margin-top:var(--sp-3);}
.last-updated{margin-top:var(--sp-4);}

p,li,td,th,caption,.lead,.note{word-break:auto-phrase;}

/* =========================================================
   幅が広いとき 見出しは縦組みの柱
   ========================================================= */

@media (min-width:768px){
  .sec-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--sp-5);
    align-items:start;
  }
  .sec-head{order:2;margin-bottom:0;}
  .sec-body{order:1;min-width:0;}
  .sec-head h2{
    display:block;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    line-height:1.5;
    padding:var(--sp-3) var(--sp-1);
  }

  /* 表紙 左に言葉 中央に写真 右に縦組みの題 */
  .hero-grid{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"photo title" "text text";
    column-gap:var(--sp-4);
    align-items:start;
  }
  .hero-title{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    line-height:1.5;
    word-break:normal;
  }
  .hero-photo img{height:520px;}

  /* 下層の扉 題は右に縦組み */
  .page-hero .wrap:not(.profile-hero){
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--sp-5);
  }
  .page-hero .wrap:not(.profile-hero) h1{
    grid-column:2;
    grid-row:1 / span 2;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    line-height:1.5;
  }
  .page-hero .wrap:not(.profile-hero) .lead{grid-column:1;grid-row:1;align-self:end;margin-top:0;}

  .photo-text{grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  .photo-text img{height:540px;}
  .profile-hero{grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  .profile-hero img{height:560px;}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
  .toc-body{grid-template-columns:15em minmax(0,1fr);column-gap:var(--sp-4);align-items:baseline;}
  .case-list dl{
    display:grid;
    grid-template-columns:9em minmax(0,1fr);
    column-gap:var(--sp-3);
    align-items:baseline;
  }
  .case-list dd + dt + dd{margin-top:var(--sp-2);}
}

/* 広い画面 ヘッダーは左の柱（誌面の背） */
@media (min-width:1024px){
  body{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
  }
  .site-header{
    grid-column:1;
    grid-row:1 / span 2;
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    border-bottom:0;
    border-right:1px solid var(--ink);
  }
  main,.site-footer{grid-column:2;min-width:0;}
  .header-row{
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-4);
    padding:var(--sp-4) var(--sp-3);
  }
  .brand img{width:168px;}
  .site-nav{
    margin-left:0;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--rule);
  }
  .site-nav a{
    font-size:20px;
    padding:var(--sp-1) 0;
    border-bottom:1px solid var(--rule);
  }
  .site-nav a[aria-current="page"]{border-bottom-color:var(--accent);}
  .site-nav a:hover,
  .site-nav a:focus-visible{border-bottom-color:var(--ink);}
  .btn--header{width:100%;min-height:56px;}
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,380px) auto;
    grid-template-areas:"text photo title";
  }
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));}
  .case-list:not(:has(dl)){grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;}
}

/* =========================================================
   幅が狭いとき（390で崩れないこと）
   ========================================================= */

@media (max-width:767px){
  :root{
    --fs-h1:30px;
    --fs-h2:24px;
    --fs-h3:20px;
    --sp-6:64px;
    --sp-5:48px;
  }
  .header-row{flex-wrap:wrap;gap:var(--sp-2);padding-bottom:0;}
  .brand img{width:128px;}
  .btn--header{margin-left:auto;order:2;}
  .site-nav{
    order:3;
    margin-left:0;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--rule);
  }
  .site-nav a{padding:12px 0;border-bottom:1px solid var(--rule);}
  .site-nav a:last-child{border-bottom:0;}
  .site-nav a[aria-current="page"]{border-bottom:1px solid var(--rule);}
  .site-nav a[aria-current="page"]::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:var(--sp-1);vertical-align:middle;}

  .hero{padding-top:var(--sp-4);}
  .hero-photo img{height:300px;}
  .photo-text img{height:320px;}
  .profile-hero img{height:340px;}
  .btn{display:flex;width:100%;padding:var(--sp-2) var(--sp-3);}
  .btn--header{display:inline-flex;width:auto;}
  .case-list > li{padding:var(--sp-3);}

  /* 料金表は積み上げて読む */
  .table-wrap{overflow-x:visible;}
  table.price thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  table.price tr{display:block;border-top:1px solid var(--ink);padding:var(--sp-2) 0;}
  table.price td{display:block;border-bottom:0;padding:2px var(--sp-2);}
  table.price td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--font-gothic);
    font-size:var(--fs-note);
    font-weight:400;
  }
  table.price tr:last-child{border-bottom:1px solid var(--rule);}
}

/* ---------- 相談の窓口（LINEとメールを並べる） ---------- */

.contact-ways .cta{margin-top:var(--sp-3);}
@media (min-width:1024px){
  .case-list.contact-ways{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* LINEのボタンだけ LINEの緑（白文字は緑との比が2.3で読みにくいので墨の文字） */
.btn--line{background:#06C755;}
.btn--line:hover,
.btn--line:focus-visible{background:var(--paper);}

/* 料金の目安の目次 */
.meyasu-toc{margin-bottom:var(--sp-6);max-width:44em;}
.meyasu-toc .plain-list{margin-top:var(--sp-1);}
.meyasu-toc a{display:inline-block;padding:4px 0;min-height:40px;}
.meyasu-toc a:hover,
.meyasu-toc a:focus-visible{text-decoration-color:var(--accent);text-decoration-thickness:3px;}
.price-block{scroll-margin-top:var(--sp-3);}

/* ---------- 2026-09-26 本文と配置の再整理 ---------- */
:root{
  --font-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --font-gothic:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --fs-body:18px;
}
body{font-family:var(--font-gothic);font-size:var(--fs-body);}
h1,h2,h3,.btn,.brand{font-family:var(--font-mincho);}
.skip-link{position:fixed;top:-100px;left:var(--sp-2);z-index:20;background:var(--ink);color:var(--paper);padding:var(--sp-1) var(--sp-2);}
.skip-link:focus{top:var(--sp-2);}
.site-header{position:relative;height:auto;border-bottom:1px solid var(--ink);}
.header-row{max-width:1120px;min-height:96px;padding-top:var(--sp-2);padding-bottom:var(--sp-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);}
.brand img{width:152px;}
.site-nav{margin-left:auto;display:flex;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-1);}
.site-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--ink);font-family:var(--font-gothic);font-size:16px;line-height:1.45;white-space:normal;text-decoration:none;background:var(--surface);}
.site-nav a[aria-current="page"]{background:var(--accent);border-bottom:1px solid var(--ink);}
.site-nav a:hover,.site-nav a:focus-visible{background:var(--accent);border-bottom-color:var(--ink);}
.btn--header{min-height:56px;padding:var(--sp-1) var(--sp-2);font-family:var(--font-gothic);font-size:16px;}
.hero{padding-top:var(--sp-5);padding-bottom:var(--sp-6);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "photo";gap:var(--sp-4);}
.hero-text{grid-area:text;}
.hero-title{writing-mode:horizontal-tb;display:block;font-family:var(--font-mincho);font-size:clamp(38px,3.2vw,42px);line-height:1.45;letter-spacing:.02em;}
.hero-text .eyebrow{font-family:var(--font-gothic);font-size:16px;margin-bottom:var(--sp-2);}
.hero-text .lead{margin-top:var(--sp-3);max-width:34em;}
.hero-text .cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);}
.hero-text .cta .more{margin-top:0;}
.hero-photo{grid-area:photo;margin:0;position:relative;}
.hero-photo img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;object-position:center;}
.hero-photo figcaption{margin-top:var(--sp-1);}
.services-index-list .index-body a{display:block;padding:var(--sp-1) 0;font-size:var(--fs-body);text-decoration:underline;text-underline-offset:.25em;}
.services-index-list .index-body a:hover,.services-index-list .index-body a:focus-visible{text-decoration-color:var(--accent);text-decoration-thickness:3px;}
.meyasu-toc--early{max-width:1120px;padding-top:var(--sp-4);padding-bottom:0;}
.meyasu-toc--early .plain-list{margin-top:var(--sp-1);}
.page-hero{padding-top:48px;padding-bottom:48px;}
.page-hero .wrap:not(.profile-hero){display:block;}
.page-hero .wrap:not(.profile-hero) h1{writing-mode:horizontal-tb;display:block;line-height:1.4;}
.page-hero .wrap:not(.profile-hero) .lead{margin-top:var(--sp-3);max-width:40em;}
.nav-word{white-space:nowrap;}
.mobile-only-break{display:none;}
.profile-hero img{width:min(320px,100%);height:auto;max-height:none;object-fit:cover;}
.profile-hero h1{writing-mode:horizontal-tb;line-height:1.4;}
.profile-hero h2{margin-top:var(--sp-3);}

@media (min-width:768px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);grid-template-areas:"text photo";column-gap:var(--sp-5);align-items:center;}
  .hero-title{writing-mode:horizontal-tb;}
  .hero-photo img{height:auto;aspect-ratio:3 / 2;}
  .services-index-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5);max-width:none;}
}
@media (min-width:768px) and (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "photo";}
  .hero-title{font-size:40px;}
}
@media (min-width:1024px){
  body{display:block;}
  .site-header{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--ink);}
  .header-row{flex-direction:row;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2) var(--sp-3);}
  .site-nav{margin-left:auto;flex-direction:row;gap:var(--sp-1);border-top:0;}
  .site-nav a{font-size:16px;padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--ink);}
  .btn--header{width:auto;}
  main,.site-footer{grid-column:auto;}
}
@media (max-width:767px){
  .header-row{padding-top:var(--sp-2);padding-bottom:var(--sp-2);}
  .site-nav{order:3;flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1);}
  .site-nav a{min-height:56px;padding:var(--sp-1);}
  .site-nav a:last-child{border-bottom:1px solid var(--ink);}
  .btn--header{margin-left:auto;order:2;}
  .hero{padding-top:var(--sp-4);}
  .hero-title{font-size:clamp(29px,8.5vw,40px);}
  .profile-hero img{width:min(240px,100%);}
  .hero-text .cta{display:block;}
  .hero-text .cta .btn{margin-bottom:var(--sp-2);}
  .hero-text .cta .more{display:inline-flex;width:auto;}
  .meyasu-toc--early{padding-top:var(--sp-3);}
}
@media (max-width:374px){
  .mobile-only-break{display:inline;}
}

/* たいせつにしていること：本文の流れを保つ本人写真のサイズ */
#taisetsu .photo-text img{
  width:min(220px,100%);
  height:auto;
  aspect-ratio:3 / 4;
  object-fit:cover;
}
@media (min-width:1024px){
  #taisetsu .photo-text{grid-template-columns:240px minmax(0,1fr);}
  #taisetsu .photo-text img{width:240px;}
}

/* 320px幅でもナビの意味単位を保って折り返す */
.site-nav a{flex-wrap:wrap;column-gap:3px;}
@media (max-width:374px){
  .header-row{column-gap:16px;}
  .brand img{width:128px;}
  .btn--header{font-size:14px;padding:8px;}
}

/* プロフィール写真は紹介文の後に置き、一定の縦横比で収める */
.profile-hero img{
  aspect-ratio:3 / 4;
  height:426.67px;
  object-fit:cover;
  object-position:center 25%;
}
@media (max-width:767px){
  .profile-hero>div:last-child{grid-row:1;}
  .profile-hero img{width:min(240px,100%);height:320px;}
}

/* 2026-09-28: タブレット幅で相談ボタンだけ2段目に落ちるのを防ぐ ロゴと相談ボタンを1段目 ナビ4つを2段目に */
@media (min-width:768px) and (max-width:1023px){
  .site-nav{order:3;flex-basis:100%;margin-left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  .btn--header{margin-left:auto;}
}

/* 2026-09-28 Claude 読みやすさの直し
   ・縦組みの柱見出しをやめ 横書きの札を本文の上に置く（見出しと本文が離れて どこの見出しか分かりにくかった）
   ・14pxの注記とラベルを16pxへ（本文18px 注記も16px未満にしない）
   ・見出しは文節で折り返し 単語の途中で割らない */
:root{--fs-note:16px;}
h1,h2,h3{word-break:auto-phrase;text-wrap:balance;}
.nowrap{white-space:nowrap;}
@media (min-width:768px){
  .sec-grid{display:block;}
  .sec-head{margin-bottom:var(--sp-4);}
  .sec-head h2{display:inline-block;writing-mode:horizontal-tb;line-height:1.5;padding:var(--sp-1) var(--sp-3);}
}
.cta--pair{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.closing .btn.btn--line{background:#06C755;color:var(--ink);border-color:var(--ink);}
.closing .btn.btn--line:hover,.closing .btn.btn--line:focus-visible{background:var(--paper);color:var(--ink);}
@media (max-width:767px){
  .cta--pair{display:grid;grid-template-columns:minmax(0,1fr);}
}

/* プロフィールの扉 写真と文字の間が空きすぎないよう 写真の列を写真の幅に合わせる */
@media (min-width:768px){
  .profile-hero{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center;}
}