/* =========================================================
   v20 仕上げレイヤー（home.css / detail-pages.css の後に読み込む）
   文字要素は変更せず、書体・改行・余白・レイアウトのみを調整。
   ========================================================= */

/* ---------- A-1 書体：Windowsの游ゴシックを Medium / Bold で表示 ---------- */
@font-face{font-family:"SuwaruGothic";src:local("Yu Gothic Medium"),local("YuGothic-Medium"),local("YuGo-Medium");font-weight:100 500}
@font-face{font-family:"SuwaruGothic";src:local("Yu Gothic Bold"),local("YuGothic-Bold"),local("YuGo-Bold");font-weight:600 900}
:root{
  font-family:"SuwaruGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic",Meiryo,sans-serif;
  --link-hover:#316986;
  --space-section:80px;
  --space-block:44px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- A-2 改行：文節単位で折り返す（<wbr>と併用） ---------- */
main :is(p,h1,h2,h3,h4,dt,dd,span,a),.site-footer{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
main :is(p,h4,dd){text-wrap:pretty}
main h3:not(.soft-label){text-wrap:balance}

/* ---------- A-6 リンクの動きを統一 ---------- */
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.detail-link:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
.sitemap a:hover{color:var(--link-hover)}

/* ---------- A-5 トップメニュー：矢印と現在地 ---------- */
.work-menu-toggle{display:grid;place-items:center;width:28px;height:28px;padding:0}
.chev{display:block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.work-menu-toggle[aria-expanded="true"] .chev{transform:translateY(2px) rotate(-135deg)}
.header nav>a,.work-menu-label>a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:10px;transition:color .2s ease,text-decoration-color .2s ease}
.header nav>a:hover,.work-menu-label>a:hover{text-decoration-color:var(--line)}
.header nav>a[aria-current="page"],.work-menu.is-current>.work-menu-label>a{color:var(--ink);text-decoration-color:var(--pink)}
.work-submenu a[aria-current="page"]{font-weight:700}
.work-submenu a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px -14px;border-radius:50%;background:var(--pink);vertical-align:middle}

/* ---------- A-3 余白のリズム（PC） ---------- */
.hero{padding-block:72px var(--space-section)}
.profile{padding-block:var(--space-section)}
.works{padding-top:var(--space-section)}
.work-heading{margin-bottom:28px}
.service{padding-block:var(--space-block)}
.values{padding-block:var(--space-section) 64px}
.sns.shared-panel{margin-bottom:var(--space-section)}
.detail-body{padding-bottom:72px}
.company-page{padding-bottom:72px}

/* ---------- A-4 トップ4事業：画像の枠を 3:2 に統一、書影は扇状に ---------- */
@media(min-width:1001px){
  .service{grid-template-columns:minmax(0,1fr) 380px}
  .service-art,.service .book-group{width:380px}
}
.service-art,.service .book-group{aspect-ratio:3/2}
.service-art img{width:100%;height:100%;object-fit:contain}
.service .book-group,.books-detail .lead-media.book-group{display:flex;justify-content:center;align-items:center;gap:0;padding-top:6px}
.service .book-group img,.books-detail .lead-media.book-group img{width:33%;flex:none;border:0;box-shadow:0 10px 22px #30383d24,0 2px 4px #30383d14;position:relative}
.service .book-group img:nth-child(1),.books-detail .lead-media.book-group img:nth-child(1){transform:translate(12%,5%) rotate(-5deg)}
.service .book-group img:nth-child(2),.books-detail .lead-media.book-group img:nth-child(2){width:36%;z-index:2}
.service .book-group img:nth-child(3),.books-detail .lead-media.book-group img:nth-child(3){transform:translate(-12%,5%) rotate(5deg)}
.books-detail .lead-media.book-group{padding-block:12px}

/* ---------- じっくり検討：STEP の見出し ---------- */
.subpage .soft-label{display:flex;align-items:center;flex-wrap:nowrap}
.step-no{flex:none;font-size:.7em;letter-spacing:.1em;line-height:1.3;padding-right:14px;margin-right:14px;border-right:1px solid #30383d59}
.copy-section.step{border-bottom:0;padding-block:14px}
.copy-section:not(.step)+.copy-section.step{padding-top:36px}
.copy-section.step+.copy-section:not(.step){margin-top:22px;border-top:1px solid var(--line)}
.copy-section.step .explanation{padding-inline:18px}

/* ---------- フッター：コピーライト ---------- */
.site-footer{padding-block:48px 32px;row-gap:40px}
.copyright{grid-column:1/-1;margin:0;padding-top:24px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.copyright small{font-size:inherit}

/* =========================================================
   B  スマートフォン（760px 以下）
   ========================================================= */
@media(max-width:760px){
  :root{--space-section:52px;--space-block:36px}
  html{scroll-padding-top:84px}
  html.nav-open{overflow:hidden}

  /* B-1 ヘッダー：固定・コンパクト */
  .header{position:sticky;top:0;height:64px;padding:10px 20px;background:#fff}
  .logo{width:184px}
  .menu-toggle{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:700;letter-spacing:.08em}
  .menu-icon{position:relative;display:block;width:16px;height:12px}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,top .25s ease}
  .menu-icon::before{top:2px}
  .menu-icon::after{top:8px}
  .menu-toggle[aria-expanded="true"] .menu-icon::before{top:5px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-icon::after{top:5px;transform:rotate(-45deg)}

  /* B-2 開いたメニュー：全画面・押しやすい行・仕事は常に展開 */
  .header nav{position:fixed;top:64px;left:0;right:0;bottom:0;padding:8px 28px 48px;overflow-y:auto;overscroll-behavior:contain;border:0;border-top:1px solid var(--line);background:#fff}
  .header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;animation:nav-in .22s ease}
  .header nav>a,.work-menu-label{padding:0}
  .header nav>a,.work-menu-label>a{display:flex;align-items:center;min-height:58px;font-size:17px;letter-spacing:.06em;text-decoration:none}
  .header nav>a,.work-menu{border-bottom:1px solid var(--line)}
  .work-menu-toggle{display:none}
  .header .work-submenu[hidden]{display:block!important}
  .work-submenu{position:static;margin:0 0 14px;padding:0 0 0 18px;border:0;border-left:2px solid var(--line);box-shadow:none;background:none}
  .work-submenu a{display:flex;align-items:center;min-height:46px;padding:0;font-size:15px;font-weight:500}
  .header nav>a[aria-current="page"]::after,.work-menu.is-current>.work-menu-label>a::after{content:"";width:6px;height:6px;margin-left:10px;border-radius:50%;background:var(--pink)}
  .work-submenu a[aria-current="page"]::before{margin:0 10px 0 -22px}

  /* B-3 ヒーロー */
  .hero{padding-block:32px 48px;gap:32px}
  .hero-intro{font-size:15px}
  .hero-logo{width:72%;max-width:300px}

  /* B-10 文字サイズの下限（本文15px／補足13px） */
  .lead,.profile-copy,.service p{font-size:15px}
  .section-label{font-size:13px}
  .keywords,.publication-meta,.person p{font-size:13px}
  .crumb{font-size:12px}
  .detail-link{font-size:14px;padding-block:8px;margin-top:12px}

  /* B-4 トップ4事業：画像 → 見出し → 本文 → リンク */
  .service{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0}
  .service-art,.service .book-group{order:-1;width:100%;max-width:360px;align-self:center;margin:0 0 22px}
  .service .book-group{margin-block:0 22px}
  .service h3{margin-bottom:10px}

  /* 大事にしていること */
  .values{padding-block:var(--space-section) 44px}

  /* B-6 プロフィールページ：写真と名前を横並びに */
  .profile-detail .page-lead{grid-template-columns:104px minmax(0,1fr);column-gap:20px;row-gap:0}
  .profile-detail .lead-copy,.profile-detail .page-lead .copy-section{display:contents}
  .profile-detail .lead-copy>*{grid-column:1/-1}
  .profile-detail .lead-media{grid-column:1;grid-row:4;width:104px;max-width:none;margin-top:28px;justify-self:start}
  .profile-detail .lead-media img{width:104px;height:136px}
  .profile-detail .page-lead .copy-section>h3{grid-column:2;grid-row:4;align-self:center;margin:28px 0 0;font-size:20px;line-height:1.6}
  .profile-detail .page-lead .copy-section>h4{grid-column:1/-1;grid-row:5;margin-top:20px}

  /* B-7 書籍ページ：冒頭の書影はスマホでは非表示 */
  .books-detail .page-lead .lead-media{display:none}

  /* 第二階層のリード画像 */
  .lead-media{width:84%}

  /* B-8 STEP */
  .step-no{padding-right:10px;margin-right:10px}
  .copy-section.step .explanation{padding-inline:14px}

  /* B-9 サイトマップ：2列に整理（左：基本ページ／右：仕事） */
  .sitemap-columns{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px}
  .sitemap-columns>ul:first-child{grid-column:1;grid-row:1}
  .sitemap-columns>div{grid-column:2;grid-row:1/3}
  .sitemap-columns>ul:last-child{grid-column:1;grid-row:2;display:block}
  .sitemap-columns>ul:last-child li+li{margin-top:8px}
  .sitemap a{padding-block:6px}
  .site-footer{padding-block:36px 28px;row-gap:28px}
}

@keyframes nav-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- v20 微調整 ---------- */
.person-name .yomi{white-space:nowrap}
@media(min-width:1001px){.service .book-group img{width:31%}.service .book-group img:nth-child(2){width:34%}}
@media(max-width:760px){
  .work-heading{margin-bottom:4px}
  .service p br{display:none}
  .service .book-group{max-width:300px}
  .detail-body{padding-bottom:40px}
  .company-page{padding-bottom:40px}
  .profile-detail .page-lead .person-name .yomi{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:.04em}
}
.work-submenu a{position:relative}
.work-submenu a[aria-current="page"]::before{position:absolute;left:-14px;top:50%;margin:-3px 0 0!important}

/* ---------- 企業情報パネル（企業情報ページ以外の6ページ、SNSの下） ---------- */
.sns.shared-panel{margin-bottom:0}
.company.shared-panel{margin-top:24px;margin-bottom:var(--space-section)}
.company-detail .sns.shared-panel{margin-bottom:var(--space-section)}
.company.shared-panel .company-details>div:first-child{padding-top:0}
@media(min-width:901px){.company.shared-panel{grid-template-columns:minmax(0,1fr)}.company.shared-panel .company-details{max-width:760px}}
@media(max-width:760px){.company.shared-panel{margin-top:20px}}
.company.shared-panel{row-gap:4px}
.sns.shared-panel:last-child{margin-bottom:var(--space-section)}