/* theme/mnt-corporate/style.css には無い、Django 化で足した分だけ。正本の CSS は触らない。 */
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin: 0; font-size: .8rem; letter-spacing: .04em; }   /* 下の余白を外して、左のロゴ・右のコピーライトと上下の中心をそろえる */
.site-footer__links a { color: inherit; opacity: .72; text-decoration: none; }
.site-footer__links a:hover { opacity: 1; text-decoration: underline; }
.entry-thumbnail img { max-width: 100%; height: auto; display: block; }

/* お問合せフォーム（sc-tsusho の contact.html と同じ項目） */
.contact-form { max-width: 640px; margin-top: 2rem; }
.contact-form__field { margin-bottom: 1.6rem; }
.contact-form__field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .45rem; letter-spacing: .02em; }
.contact-form__req { display: inline-block; margin-left: .5rem; padding: .05rem .45rem; font-size: .7rem; font-weight: 700; color: #fff; background: #111; border-radius: 2px; vertical-align: middle; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; box-sizing: border-box; padding: .8rem .9rem; font: inherit; font-size: 1rem;
  color: #111; background: #fff; border: 1px solid #c9c9c9; border-radius: 4px; transition: border-color .2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #111; }
.contact-form textarea { min-height: 12rem; resize: vertical; }
.contact-form__error { margin: .4rem 0 0; font-size: .85rem; color: #b00020; }
.contact-form__note { font-size: .85rem; opacity: .75; margin: 1.6rem 0 1rem; }

/* 規約・ポリシー（本文は class 無しのセマンティックHTML） */
/* 会社概要（/kaisyagaiyou/）: 本文カラムを 840px に（2026-09-20 本人指示）。
   このページは目印になるクラスが無いので、body の page-<スラッグ> で狙う */
@media (min-width: 961px) { body.page-kaisyagaiyou .content-area { width: min(840px, calc(100% - 80px)); } }

/* 規約・ポリシー（/privacy/ /terms/）: 本文カラムを 840px に（本人指示）。960px 以下は theme のまま */
@media (min-width: 961px) { .content-area:has(.legal-prose) { width: min(840px, calc(100% - 80px)); } }
.legal-prose { max-width: none; line-height: 2; font-size: .95rem; }
.legal-prose h2 { margin: 2.4rem 0 .8rem; padding-left: .75rem; border-left: 3px solid #111; font-size: 1.1rem; }
.legal-prose h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; }
.legal-prose p { margin: .75rem 0; }
.legal-prose ol { list-style: decimal; padding-left: 1.6rem; margin: .5rem 0; }
.legal-prose ul { list-style: disc; padding-left: 1.6rem; margin: .5rem 0; }
.legal-prose li { margin: .35rem 0; }
.legal-prose table { border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.legal-prose th, .legal-prose td { border: 1px solid #ddd; padding: .5rem .8rem; text-align: left; vertical-align: top; }
.legal-prose th { background: #f5f5f5; white-space: nowrap; }

/* 先頭へ戻るボタン（画面右下に固定）。z-index はモバイルメニュー(99)・ヘッダー(100)の下 */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 98;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #111; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
.to-top:hover { background: #333; }
.to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #111; }
@media (max-width: 600px) { .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- WordPress のショートコードを展開した要素（scripts/wp_shortcodes.py） ---- */
.entry-content p:empty { display: none; }
.sc-kaiwa { margin: 1.4rem 0; padding-left: 2.6rem; position: relative; }
.sc-kaiwa::before { content: ""; position: absolute; left: 0; top: .1rem; width: 2rem; height: 2rem; border-radius: 50%; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16v11H8l-4 4z'/%3E%3C/svg%3E") center/1.1rem no-repeat; }
.sc-kaiwa__bubble { position: relative; display: inline-block; max-width: 100%; padding: .8rem 1.1rem; background: #f4f4f4; border-radius: 12px; line-height: 1.8; }
.sc-kaiwa__bubble::before { content: ""; position: absolute; left: -9px; top: .9rem; border: 6px solid transparent; border-right: 9px solid #f4f4f4; border-left: 0; }
.sc-box { margin: 1.6rem 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.sc-box__title { margin: 0; padding: .55rem 1rem; background: #111; color: #fff; font-weight: 700; font-size: .95rem; }
.sc-box__body { padding: .9rem 1rem; line-height: 1.9; }
.sc-mybox { margin: 1.6rem 0; padding: 1rem 1.1rem; border: 2px solid #ccc; border-radius: 6px; background: #fafafa; }
.sc-mybox__title { margin: 0 0 .5rem; font-weight: 700; }
.sc-mybox__body > :first-child { margin-top: 0; }
.sc-mybox__body > :last-child { margin-bottom: 0; }
.sc-step { display: flex; gap: .9rem; align-items: flex-start; margin: 1.2rem 0; }
.sc-step__no { flex: none; padding: .25rem .6rem; background: #111; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; border-radius: 3px; }
.sc-step__body { font-weight: 700; padding-top: .2rem; }
.sc-button-wrap { margin: 1.4rem 0; text-align: center; }
.sc-button { display: inline-block; padding: .9rem 2.2rem; border: 1px solid #111; border-radius: 6px; background: #111; color: #fff; font-weight: 700; text-decoration: none; }
.sc-button:hover { opacity: .85; }
.sc-mini { display: inline-block; padding: .25rem .8rem; border-radius: 3px; background: #111; color: #fff; font-size: .9rem; margin-bottom: .6rem; }
.sc-stars { color: #f5a623; letter-spacing: .05em; white-space: nowrap; }
.sc-nopc { display: none; font-size: .85rem; opacity: .8; }
@media (max-width: 960px) { .sc-nopc { display: inline; } }

/* 記事本文の一般的な WordPress マークアップ（画像・表・引用・整列） */
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin: 1.4rem 0; }
.entry-content figcaption { font-size: .85rem; opacity: .75; text-align: center; margin-top: .4rem; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .92rem; }
.entry-content th, .entry-content td { border: 1px solid #ddd; padding: .55rem .7rem; vertical-align: top; }
.entry-content th { background: #f5f5f5; }
.entry-content .scroll-box, .entry-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* 横に長い表は横スクロール（.table-wrap は extra.js が付ける） */
.entry-content blockquote { margin: 1.4rem 0; padding: .8rem 1.2rem; border-left: 4px solid #ccc; background: #fafafa; }
.entry-content .aligncenter, .entry-content .has-text-align-center { text-align: center; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignright { float: right; margin: 0 0 1rem 1rem; }
.entry-content .alignleft { float: left; margin: 0 1rem 1rem 0; }
.entry-content iframe { max-width: 100%; }

/* トップの増補（2026-09-19）: 選ばれる理由・制作実績・料金の目安・対応エリア・よくある質問。
   theme の見た目（白黒交互・細い罫線・大きな見出し）に合わせる */
/* h1 は2つの句を inline-block のかたまりにして、入らなければ句の境目で折り返す。
   word-break: keep-all ＋ <wbr> は Safari で改行されず横にはみ出すので使わない */
.lead h1 { max-width: 100%; margin: 20px auto 0;   /* 上に 20px の余白（本人指示） */ font-size: clamp(26px, 3.55vw, 48px); overflow-wrap: break-word; }   /* 20文字が本文カラムの幅に1行で収まる大きさ */
.lead h1 span { display: inline-block; max-width: 100%; }
.mnt-dark { background: var(--mnt-black); color: #fff; }
.section-lead { max-width: 760px; margin: 44px 0 0; color: #444; font-size: 15px; line-height: 2.05; text-align: justify; text-justify: inter-character; }   /* 両端揃え: 英数字や句読点で行の右端がばらつかず、どのセクションも同じ幅に見える */
.mnt-dark .section-lead, .media .section-lead { color: #bbb; }
.reasons { padding-top: 140px; padding-bottom: 0; }
.reasons__list { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 66px 0 0; padding: 0; border-top: 1px solid var(--mnt-line); }
.reasons__item { padding: 42px 44px 42px 0; border-bottom: 1px solid var(--mnt-line); }
.reasons__item:nth-child(even) { padding: 42px 0 42px 44px; border-left: 1px solid var(--mnt-line); }
.reasons__number { display: block; margin-bottom: 18px; color: #777; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.reasons__item h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.5; letter-spacing: -.02em; }
.reasons__item h3, .faq__item h3 { word-break: auto-phrase; }   /* 見出しだけ文節で折り返す（対応ブラウザのみ）。本文に使うと行ごとに右端がばらつく */
.reasons__item p { margin: 0; color: #555; font-size: 15px; line-height: 1.95; }
.media__index--works { margin-top: 66px; border-top: 1px solid #3d3d3d; }
.media__index--works .media__item { align-items: start; padding: 28px 0; }
.media__index--works .media__number { line-height: 1.1; }
.media__name { display: block; margin-top: 6px; color: #999; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.media__desc { display: block; margin-top: 10px; color: #bbb; font-size: 13px; line-height: 1.85; }
/* 本番のトップにあった各メディアのバナー（650×260。本番 uploads から）。いまは安芸美人だけ */
.media__banner { display: block; width: 100%; max-width: 420px; height: auto; margin: 2px 0 14px; }   /* 項目のいちばん上。分野名（h3）の代わり */
.price__grid, .area__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 6vw; margin-top: 66px; }
.area__grid { grid-template-columns: 1fr 1fr; margin-top: 22px; }
.area__map { width: min(100%, 620px); margin: 36px auto 0; }   /* 見出しとコンテンツの間に差し込む地図 */
.area__map img { display: block; width: 100%; height: auto; }
.price__subhead, .price__side h3 { margin: 0 0 18px; font-size: 18px; letter-spacing: -.01em; }
.price__factors, .area__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3d3d3d; }
.price__factors li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid #3d3d3d; color: #bbb; font-size: 14px; line-height: 1.85; }
.price__factors strong { color: #fff; font-size: 15px; }
.price__side p { margin: 0 0 40px; color: #bbb; font-size: 14px; line-height: 1.95; }
.price__side .contact__button { width: 100%; max-width: 320px; }
.area__list { margin-top: 44px; }
.area__list li { padding: 20px 0; border-bottom: 1px solid #3d3d3d; color: #bbb; font-size: 14px; line-height: 1.85; }
.area__list strong { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }
.area__office { margin: 36px 0 0; color: #999; font-size: 13px; line-height: 1.95; }
.area__office a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.faq__list { margin: 66px 0 0; border-top: 1px solid var(--mnt-line); }
.faq__item { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; padding: 34px 0; border-bottom: 1px solid var(--mnt-line); }
.faq__item h3 { margin: 0; font-size: 17px; line-height: 1.7; }
.faq__item h3::before { content: "Q. "; color: #999; }
.faq__item p { margin: 0; color: #555; font-size: 15px; line-height: 1.95; }
/* COMMITMENT（こだわり）: 見出し語の下にひとことの言い切り＋本文。締めの一文と、制作風景の説明 */
.commitment__item h3 { margin-bottom: 14px; }
.commitment__catch { margin: 0 0 16px !important; color: var(--mnt-black) !important; font-size: 16px !important; font-weight: 750; line-height: 1.7 !important; letter-spacing: -.01em; }
/* ヒーローのロゴ＋タグラインを上下の中間に（2026-09-19 本人指示）。theme は 35%/34%/32% */
.hero__brand { top: 50%; }
@media (max-width: 960px) { .hero__brand { top: 50%; } }
@media (max-width: 600px) { .hero__brand { top: 50%; } }

/* ヒーロー（写真の帯）の高さを 30% 削る（2026-09-19 本人指示）。theme は 820px/100svh・780px・700px */
.hero { min-height: 574px; height: 70svh; }
@media (max-width: 960px) { .hero { min-height: 504px; height: 546px; } }
@media (max-width: 600px) { .hero { min-height: 462px; height: 490px; } }

/* ヘッダーを少し小さく（2026-09-19 本人指示）。theme の 86/70px を上書きする */
.site-header { height: 74px; }
.site-header.is-inner-header, .site-header.is-scrolled { height: 58px; }
.site-branding .custom-logo { max-width: 128px; max-height: 40px; }
@media (max-width: 960px) { .primary-navigation { top: 58px; } }
@media (max-width: 600px) { .site-header { height: 58px; } }

/* OUR THINKING（本人のデザイン案 content/philosophy-section/ を、サイトの本文カラムと白地に合わせて組み込み）。
   絵は足元が下端で切れているので、人物を下の罫線の上に立たせる */
.philosophy { margin-top: 110px; }
.philosophy__label { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.philosophy__label::before { content: ""; width: 42px; height: 1px; background: currentColor; }
.philosophy__content { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 84px); align-items: end; }
.philosophy__visual { position: relative; margin: 0; }
.philosophy__visual::before { content: ""; position: absolute; top: 9%; left: 2%; width: 86%; aspect-ratio: 1; border: 1px solid var(--mnt-line); border-radius: 50%; }
.philosophy__visual img { position: relative; z-index: 1; display: block; width: min(100%, 400px); height: auto; margin: 0 auto; }
.philosophy__statement { align-self: center; max-width: 560px; margin: 0; padding-block: 18px; font-size: clamp(20px, 2.05vw, 29px); font-weight: 500; line-height: 1.95; letter-spacing: .05em; }
.philosophy__rule { height: 1px; background: var(--mnt-black); }
.philosophy__footnote { margin: 17px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-align: right; }
/* 制作風景は制作実績と同じスライダー部品。本文カラムの中にあるので、画面幅いっぱいに広げる */
.works__slider--inline { margin-top: 90px; width: 100vw; margin-left: calc(50% - 50vw); }   /* 本文カラムを飛び出して画面いっぱいに（左右の余白の取り方は制作実績と同じ） */
.works__slider--inline .works__track { gap: 16px; transition: none; }
/* 流れ続ける帯なので、位置は毎フレーム JS が決める。自前のスクロールとスナップは使わない */
[data-marquee-slider] .works__viewport { overflow: hidden; scroll-snap-type: none; padding-inline: 0; touch-action: pan-y; cursor: grab; }
[data-marquee-slider] .works__viewport:active { cursor: grabbing; }
[data-marquee-slider] .works__item { scroll-snap-align: none; }
[data-marquee-slider] .works__item img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.works__slider--inline .works__item--photo { flex: 0 0 min(300px, 64vw); }   /* 写真は小さめ。画面いっぱいの幅に何枚も並べる */
.works__item--photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.works__slider--inline .work__caption { margin-top: 22px; }
.works__slider--inline .works__controls { margin-top: 20px; }
/* 白地なので矢印は黒（制作実績の黒地用の指定を打ち消す） */
.works__slider--inline .works__controls .slider-button { border-color: #bbb; color: #111; }
.works__slider--inline .works__controls .slider-button:hover, .works__slider--inline .works__controls .slider-button:focus-visible { background: #111; color: #fff; }
.work__caption { margin: 18px 0 0; color: #777; font-size: 12px; letter-spacing: .04em; text-align: center; }

/* ご依頼の流れ: イラスト（5場面）に合わせた5ステップ。PC はイラストの帯の下に5列、960px 以下は場面ごとの絵を各ステップに */
.process__illust { display: block; width: 100%; height: auto; margin: 4px 0 0; }   /* 絵の上側に余白が含まれているので、リード文との間は詰める */
.process__list--5 { grid-template-columns: repeat(5, 1fr); margin-top: 18px; }
.process__list--5 .process__item { min-height: 0; padding: 0 18px 8px; }
.process__list--5 .process__item:first-child { padding-left: 0; }
.process__list--5 .process__item:last-child { padding-right: 0; }
/* 丸の中心を下端の罫線（リストの padding-bottom 48px の底、太さ 1px）に合わせる。
   theme は bottom:-53px ＋ translateY(50%) で、丸が線より 5px ほど下にずれていた */
.process__list--5 .process__item::after { left: 18px; bottom: -52px; transform: none; }
.process__list--5 .process__item:first-child::after { left: 0; }
.process__list--5 .process__number { margin-bottom: 16px; }
.process__list--5 .process__item h3 { margin-bottom: 10px; font-size: 19px; letter-spacing: -.02em; }
.process__list--5 .process__item p { font-size: 13px; line-height: 1.9; }
.process__scene { display: none; }
.process__more { margin: 44px 0 0; text-align: right; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.process__more a { padding-bottom: 4px; border-bottom: 1px solid var(--mnt-black); }
@media (max-width: 960px) {
  .process__illust { display: none; }
  .process__scene { display: block; width: auto; max-width: 100%; height: 150px; margin: 0 0 18px; object-fit: contain; object-position: left bottom; }
  .process__list--5 { grid-template-columns: 1fr 1fr; gap: 50px 0; margin-top: 56px; }
  .process__list--5 .process__item, .process__list--5 .process__item:first-child, .process__list--5 .process__item:last-child { padding: 0 26px; }
  .process__list--5 .process__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .process__list--5 .process__item h3 { font-size: 21px; }
  .process__list--5 .process__item p { font-size: 14px; }
}
@media (max-width: 600px) {
  .process__list--5 { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
  .process__list--5 .process__item, .process__list--5 .process__item:first-child, .process__list--5 .process__item:last-child, .process__list--5 .process__item:nth-child(odd) { padding: 30px 0; border: 0; border-bottom: 1px solid var(--mnt-line); }
  .process__scene { height: 130px; }
  .process__more { text-align: left; }
}

/* 白黒の並び（2026-09-19）: …料金=黒 → 流れ=白 → よくある質問=黒 → 対応エリア=白 → 運営メディア=黒 → CONTACT=白 → フッター=黒。
   境目には大きな英字（.display-word）を置く。英字は次のセクションへめり込むので、置く側の下余白は 0。
   運営メディア → CONTACT だけは置かない（すぐ下の「LET'S TALK.」と大きな字が続くため。本人指示） */
/* 大きな英字で終わるセクションは下余白を持たない。英字が次のセクションへめり込むため。
   以前はクラスを列挙していたが .about / .reasons / .commitment が漏れて余白が出ていた（2026-09-20） */
section:has(> .mnt-shell > .display-word:last-child) { padding-bottom: 0; }
/* 記事ページの下に出す CONTACT（includes/_contact_cta.html）。上下の余白は同じに、
   本文との間（本文カラムの下余白）も詰めて、全体のバランスを取る */
.contact--page { padding: 100px 0; }
.content-area:has(+ .contact--page) { padding-bottom: 56px; }
@media (max-width: 600px) { .contact--page { padding: 72px 0; } .content-area:has(+ .contact--page) { padding-bottom: 40px; } }
/* CONTACT は白地（theme は黒地）。ボタンは黒枠、ホバーで黒地に白字 */
.contact { background: #fff; color: var(--mnt-black); border-top: 0; }
.contact .contact__button { border-color: #111; }
.contact .contact__button:hover, .contact .contact__button:focus-visible { background: #111; color: #fff; }
/* 記事ページの下の CONTACT は黒地（本人指示）。上の白地の指定を打ち消す */
.contact--page { background: var(--mnt-black); color: #fff; }
.contact--page .contact__button { border-color: #777; }
.contact--page .contact__button:hover, .contact--page .contact__button:focus-visible { background: #fff; color: #000; }
.faq.mnt-dark .faq__list { border-top-color: #3d3d3d; }
.faq.mnt-dark .faq__item { border-bottom-color: #3d3d3d; }
.faq.mnt-dark .faq__item h3::before { color: #777; }
.faq.mnt-dark .faq__item p { color: #bbb; }
.area:not(.mnt-dark) .area__list { border-top-color: var(--mnt-line); }
.area:not(.mnt-dark) .area__list li { border-bottom-color: var(--mnt-line); color: #555; }
.area:not(.mnt-dark) .area__list strong { color: var(--mnt-black); }
.area:not(.mnt-dark) .area__office { color: #666; }
.area:not(.mnt-dark) .area__office a { color: var(--mnt-black); }

/* 制作実績: デモサイトのスライダー（横スクロール＋自動送り。extra.js の data-works-slider） */
.works { overflow: hidden; }
.works__slider { margin-top: 66px; }
.works__viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc(var(--mnt-gutter) + 30px); scroll-padding-inline: calc(var(--mnt-gutter) + 30px); }
.works__viewport::-webkit-scrollbar { display: none; }
.works__viewport:focus-visible { outline: 1px solid #777; outline-offset: 6px; }
.works__track { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.works__item { flex: 0 0 min(540px, 80vw); scroll-snap-align: start; }
.works__link { display: block; color: inherit; text-decoration: none; }
.works__frame { overflow: hidden; border: 1px solid #333; border-radius: 10px; background: #151515; }
.works__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1d1d1d; }
.works__bar i { width: 8px; height: 8px; border-radius: 50%; background: #4a4a4a; }
.works__bar span { margin-left: 10px; color: #888; font-size: 10px; letter-spacing: .06em; }
.works__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.22,.75,.18,1); }
.works__link:hover .works__shot, .works__link:focus-visible .works__shot { transform: scale(1.03); }
.works__tag { display: block; margin-top: 22px; color: #999; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.works__item h3 { margin: 8px 0 10px; font-size: 20px; letter-spacing: -.01em; }
.works__item p { margin: 0; color: #bbb; font-size: 13px; line-height: 1.85; }
.works__more { display: inline-block; margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid #777; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
/* 矢印は SVG（‹ › の文字は円の中で下に寄って見える）。線の太さは円の枠に合わせる */
.slider-button { padding: 0; line-height: 0; }
.slider-button svg { display: block; }
.works__controls { margin-top: 44px; }
.works__controls .slider-button { border-color: #555; color: #fff; }
.works__controls .slider-button:hover, .works__controls .slider-button:focus-visible { background: #fff; color: #000; }

@media (max-width: 760px) {
  .philosophy__content { grid-template-columns: 1fr; gap: 0; }
  .philosophy__visual { order: 2; width: min(64vw, 300px); margin: 0 auto; }
  .philosophy__statement { order: 1; max-width: none; padding-block: 8px 30px; }
}
@media (max-width: 960px) {
  .works__viewport { padding-inline: calc(var(--mnt-gutter) + 0px); scroll-padding-inline: var(--mnt-gutter); }
  .reasons__list, .price__grid, .area__grid, .faq__item { grid-template-columns: 1fr; }
  .reasons__item, .reasons__item:nth-child(even) { padding: 32px 0; border-left: 0; }
  .faq__item { gap: 12px; padding: 28px 0; }
  .price__grid { gap: 56px; }
  .area__list { margin-top: 8px; }
  .area__map { width: min(100%, 520px); margin-top: 24px; }
}
@media (max-width: 600px) {
  .lead h1 { font-size: clamp(20px, 6.2vw, 30px); }   /* 「広島のホームページ制作は」（12文字）が1行に収まる大きさ */
  .reasons { padding-top: 108px; }
  .section-lead { margin-top: 30px; font-size: 14px; }
  .reasons__list, .media__index--works, .faq__list, .price__grid { margin-top: 44px; }
  .works__slider { margin-top: 44px; }
  .works__track { gap: 18px; }
  .works__item { flex-basis: 84vw; }
  .works__item h3 { font-size: 18px; }
  .reasons__item h3 { font-size: 19px; }
  .philosophy { margin-top: 72px; }
  .philosophy__statement { font-size: clamp(18px, 5vw, 22px); line-height: 1.9; padding-block: 0 28px; }
  .price__factors li { grid-template-columns: 1fr; gap: 4px; }
}

/* /flow/（ご契約までの流れ）: うねる帯に番号の丸が交互に乗るデザイン（2026-09-19 本人の参考画像）。
   HTML（#flow > .flow_detail > .num / .inner > .ttl / .txt / .btn / .icon）は本番から取り込んだまま。
   画像は使わず CSS だけで描く: 帯は「円の枠線の半分」（border-radius:50% ＋ clip-path）を段ごとに
   左右交互に置いて、上端・下端が段の中央で必ずつながるようにしてある（段の高さが変わっても切れない）。 */
.entry-content:has(#flow) { max-width: none; }
/* 見出しの下に入れるイラスト（記事ページ用） */
.page-illust { margin: 8px 0 0; }
.page-illust img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .page-illust { margin-top: 0; } }

/* このページだけ本文カラムを 850px に（本人指示）。960px 以下は theme のまま */
@media (min-width: 961px) { .content-area:has(#flow) { width: min(850px, calc(100% - 80px)); } }
#flow {
  --arc-r: 92px;      /* 帯の振れ幅（中心からの左右の張り出し） */
  --ribbon: 22px;     /* 帯の太さ */
  --dot: 74px;        /* 番号の丸の直径 */
  --ink: #111;
  width: 100%; margin: 8px 0 20px; color: var(--mnt-black);
}
#flow .flow_detail { position: relative; display: flex; align-items: center; min-height: 190px; }
/* 帯: 円の枠線の左右どちらか半分。上端と下端は段の中央（50%）なので、次の段の帯と必ずつながる */
#flow .flow_detail::before {
  content: ""; position: absolute; z-index: 0;
  /* 上下に帯の半分だけはみ出させる。こうすると段のつなぎ目で、上の段の帯の端と下の段の帯の端が
     同じ高さに重なり、段差なくつながる（はみ出させないと帯の太さぶんズレる） */
  top: calc(var(--ribbon) / -2); bottom: calc(var(--ribbon) / -2);
  left: calc(50% - var(--arc-r) - var(--ribbon) / 2); width: calc(var(--arc-r) * 2 + var(--ribbon));
  box-sizing: border-box; border: var(--ribbon) solid var(--ink); border-radius: 50%;
}
#flow .flow_detail:nth-child(odd)::before { clip-path: inset(0 0 0 50%); }    /* 右へふくらむ */
#flow .flow_detail:nth-child(even)::before { clip-path: inset(0 50% 0 0); }   /* 左へふくらむ */
/* 最初の段は丸から下へ、最後の段は上から丸まで（帯が丸の外へはみ出さないよう 1/4 だけ見せる） */
#flow .flow_detail:first-child:nth-child(odd)::before { clip-path: inset(50% 0 0 50%); }
#flow .flow_detail:first-child:nth-child(even)::before { clip-path: inset(50% 50% 0 0); }
#flow .flow_detail:last-child:nth-child(odd)::before { clip-path: inset(0 0 50% 50%); }
#flow .flow_detail:last-child:nth-child(even)::before { clip-path: inset(0 50% 50% 0); }
/* 番号の丸。帯の張り出しの先に乗せる */
#flow .flow_detail .num {
  position: absolute; z-index: 2; top: 50%; translate: -50% -50%;
  box-sizing: border-box; width: var(--dot); height: var(--dot);
  display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: #fff;
  font-size: 26px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
#flow .flow_detail:nth-child(odd) .num { left: calc(50% + var(--arc-r)); }
#flow .flow_detail:nth-child(even) .num { left: calc(50% - var(--arc-r)); }
/* 本文は丸の反対側。幅は左右どちらでも同じ */
#flow .flow_detail .inner {
  position: relative; z-index: 1; width: calc(50% - var(--ribbon) - 16px); padding: 14px 0;   /* 帯に文字がかからない幅 */
  display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "ttl icon btn" "txt txt txt"; align-items: center; gap: 0 14px;
}
#flow .flow_detail:nth-child(even) .inner { margin-left: auto; }
#flow .flow_detail .ttl { grid-area: ttl; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
#flow .flow_detail .icon { grid-area: icon; }
#flow .flow_detail .icon img { display: block; width: auto; height: 26px; margin: 0; }
#flow .flow_detail .txt { grid-area: txt; margin: 14px 0 0; font-size: 13px; line-height: 1.95; color: #444; }
#flow .flow_detail .btn { grid-area: btn; justify-self: start; }
#flow .flow_detail .btn a {
  position: relative; display: block; padding: 8px 56px 8px 14px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-decoration: none; transition: background .2s ease;
}
#flow .flow_detail .btn a:hover { background: #3a3a3a; }
#flow .flow_detail .btn a::before { content: ""; position: absolute; top: 50%; right: 14px; width: 28px; height: 1px; background: currentColor; }
#flow .flow_detail .btn a::after { content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }
/* 960px 以下は帯をやめて縦1列。段の間は下向きの矢印 */
@media (max-width: 960px) {
  #flow .flow_detail { display: flex; align-items: flex-start; gap: 20px; min-height: 0; }
  #flow .flow_detail:not(:last-child) { margin-bottom: 46px; padding-bottom: 26px; border-bottom: 1px solid #d8d8d8; }
  #flow .flow_detail::before,
  #flow .flow_detail:first-child::before,
  #flow .flow_detail:last-child::before { content: none; }
  #flow .flow_detail:not(:last-child)::after {
    content: ""; position: absolute; left: 22px; bottom: -32px; width: 10px; height: 10px;
    border-bottom: 1px solid #555; border-right: 1px solid #555; transform: rotate(45deg);
  }
  #flow .flow_detail .num, #flow .flow_detail:nth-child(odd) .num, #flow .flow_detail:nth-child(even) .num {
    position: static; translate: none; flex: 0 0 56px; width: 56px; height: 56px; border-width: 3px; font-size: 17px;
  }
  #flow .flow_detail .inner, #flow .flow_detail:nth-child(even) .inner {
    width: auto; flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 0 0;
    grid-template-columns: auto auto; grid-template-areas: "ttl icon" "txt txt" "btn btn";
  }
  #flow .flow_detail .ttl { font-size: 15px; }
  #flow .flow_detail .icon img { height: 22px; }
  #flow .flow_detail .txt { margin-top: 12px; }
  #flow .flow_detail .btn { margin-top: 16px; }
}

/* お問合せ（/toiawase/）: 案内 → フォームの1カラム。フォームは薄いグレーの箱に入れる（2026-09-19） */
@media (min-width: 961px) { .content-area:has(.contact-page) { width: min(720px, calc(100% - 80px)); } }   /* このページだけ横幅を小さく */
.contact-page { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
.contact-page__intro p { margin: 0; font-size: 15px; line-height: 2.05; color: #444; }
.contact-page__facts { margin: 34px 0 0; border-top: 1px solid var(--mnt-line); }
.contact-page__facts > div { padding: 15px 0; border-bottom: 1px solid var(--mnt-line); }
.contact-page__facts dt { margin: 0; color: #8a8a8a; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.contact-page__facts dd { margin: 7px 0 0; font-size: 13.5px; line-height: 1.85; color: #333; }
.contact-form { max-width: none; margin: 0; padding: clamp(24px, 3.4vw, 40px); background: var(--mnt-gray); }
.contact-form__field { margin-bottom: 22px; }
.contact-form__field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.contact-form__req { margin-left: 8px; padding: 2px 7px 1px; font-size: 10px; letter-spacing: .06em; border-radius: 2px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  padding: 14px 16px; border: 1px solid #d6d6d2; border-radius: 2px; background: #fff;
  font-size: 15px; line-height: 1.7; transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #aaa; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); }
.contact-form textarea { min-height: 11rem; }
.contact-form__note { margin: 26px 0 22px; font-size: 12px; line-height: 1.95; color: #666; opacity: 1; }
.contact-form__note a { color: var(--mnt-black); }
.contact-form__error { font-size: .8rem; }
/* 送信ボタン。トップの CONTACT US と同じ形で、黒地・箱の幅いっぱい */
.contact-form__submit {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px;
  padding: 0 24px; border: 0; background: var(--mnt-black); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .1em; cursor: pointer;
  transition: background .2s ease;
}
.contact-form__submit:hover, .contact-form__submit:focus-visible { background: #333; }
@media (max-width: 960px) {
  .contact-page { gap: 30px; margin-top: 32px; }
  .contact-page__facts { margin-top: 26px; }
}

/* 求人情報（/kyujin/）。HTML は本番のテーマが吐いたものをそのまま取り込んでいるので、
   その class（#plan_nav / .plan_content / .plan_area / .check_point / .design_button / .desc）に
   コーポレートの見た目を当てる（2026-09-19）。
   .plan_content_inner には width:850px のインライン指定が付いているので !important で外す */
.entry-content:has(#plan_nav) { max-width: none; }
@media (min-width: 961px) { .content-area:has(#plan_nav) { width: min(880px, calc(100% - 80px)); } }
#plan_nav_inner, .plan_content_inner { width: auto !important; }

/* 上部の職種ナビ */
#plan_nav { margin: 40px 0 0; }
#plan_nav_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#plan_nav .item { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 0 16px; border: 1px solid var(--mnt-black); color: var(--mnt-black); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: background .2s ease, color .2s ease; }
#plan_nav .item:hover, #plan_nav .item:focus-visible { background: var(--mnt-black); color: #fff; }

/* 募集の枠（ライター／デザイナー） */
.plan_content { margin-top: 64px; }
.plan_content .headline { margin: 0 0 22px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.5; }
.plan_main .plan_area { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; }
/* 左: 写真の上に白文字 */
.plan_main .item.left { position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; color: #fff; }
.plan_main .item.left .bg_image { position: absolute; inset: 0; z-index: 0; background-size: cover !important; background-position: center !important; }
.plan_main .item.left .overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.62)); }
.plan_main .item.left .plan_headline, .plan_main .item.left .content { position: relative; z-index: 2; }
.plan_main .plan_headline { margin: 0 0 auto; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-style: italic; letter-spacing: .1em; opacity: .9; }
.plan_main .plan_catch { margin: 0; color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.plan_main .plan_desc { margin: 12px 0 0; font-size: 13px; line-height: 1.9; opacity: .92; }
/* 右: 4つの特徴 */
.plan_main .item.right { display: flex; }
.plan_main .check_point { list-style: none; counter-reset: cp; width: 100%; margin: 0; padding: 26px 28px; background: var(--mnt-gray); }
.plan_main .check_point li { counter-increment: cp; position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid #dcdcd8; font-size: 14px; font-weight: 700; line-height: 1.7; }
.plan_main .check_point li:last-child { border-bottom: 0; }
.plan_main .check_point li::before { content: counter(cp, decimal-leading-zero); position: absolute; left: 0; top: 15px; color: #999; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
/* 「詳細を確認する」ボタン */
.design_button { margin-top: 22px; }
.design_button a { position: relative; display: inline-flex; align-items: center; min-height: 54px; padding: 0 58px 0 22px; background: var(--mnt-black); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-decoration: none; transition: background .2s ease; }
.design_button a:hover, .design_button a:focus-visible { background: #333; }
.design_button a::before { content: ""; position: absolute; top: 50%; right: 20px; width: 24px; height: 1px; background: currentColor; }
.design_button a::after { content: ""; position: absolute; top: 50%; right: 20px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }

/* 募集要項の表 */
.plan_free .desc table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--mnt-line); font-size: 14px; }
.plan_free .desc th, .plan_free .desc td { padding: 16px 18px; border: 0; border-bottom: 1px solid var(--mnt-line); text-align: left; vertical-align: top; line-height: 1.9; }
.plan_free .desc th { width: 30%; min-width: 7em; background: var(--mnt-gray); font-size: 13px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.plan_free .desc tr:last-child th, .plan_free .desc tr:last-child td { border-bottom: 0; }
.plan_free .desc td p { margin: .6em 0 0; }
.plan_free .desc > p { margin: 22px 0 0; font-size: 14px; }
.plan_free .desc > p a { font-weight: 700; }

@media (max-width: 760px) {
  #plan_nav_inner { grid-template-columns: 1fr; gap: 10px; }
  .plan_content { margin-top: 48px; }
  .plan_main .plan_area { grid-template-columns: 1fr; gap: 16px; }
  .plan_main .item.left { min-height: 230px; padding: 24px; }
  .plan_main .check_point { padding: 18px 20px; }
  .plan_free .desc table { display: block; border: 0; }
  .plan_free .desc tbody, .plan_free .desc tr { display: block; }
  .plan_free .desc tr { margin-bottom: 14px; border: 1px solid var(--mnt-line); }
  .plan_free .desc th, .plan_free .desc td { display: block; width: auto; min-width: 0; white-space: normal; border-bottom: 0; }
  .plan_free .desc td { padding-top: 10px; }
}

/* 記事一覧（お知らせ・ブログ）。横幅は 840px、アイキャッチのある記事は画像＋本文の2段（2026-09-19） */
@media (min-width: 961px) { .content-area--list { width: min(840px, calc(100% - 80px)); } }
.post-list { margin-top: 44px; border-top: 1px solid var(--mnt-line); }
.post-list .post { display: grid; gap: 26px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--mnt-line); }
.post-list .post + .post { margin-top: 0; }
.post-list .post:has(.post__thumb) { grid-template-columns: 240px 1fr; }
.post__thumb { display: block; overflow: hidden; background: var(--mnt-gray); }
.post__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; transition: transform .6s cubic-bezier(.22,.75,.18,1); }
.post__thumb:hover img, .post:has(h2 a:hover) .post__thumb img { transform: scale(1.04); }
.post__body .entry-meta { margin: 0 0 8px; color: #8a8a8a; font-family: Georgia, serif; font-size: 12px; letter-spacing: .06em; }
.post-list .post h2 { margin: 0; font-size: 19px; line-height: 1.6; letter-spacing: -.01em; }
.post-list .post h2 a { color: inherit; text-decoration: none; }
.post-list .post h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post__body > p { margin: 12px 0 0; color: #555; font-size: 13.5px; line-height: 1.95; }
@media (max-width: 600px) {
  .post-list { margin-top: 32px; }
  .post-list .post, .post-list .post:has(.post__thumb) { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .post-list .post h2 { font-size: 17px; }
}

/* ─── スマホの余白と大きな英字（2026-09-20 本人指示）────────────────────────
   1) 左右の余白が二重にかかっていた。--mnt-shell が calc(100% - 32px) で16px、
      さらに .mnt-shell の padding-inline: 30px で計46px。390pxの画面だと本文が298pxしか残らない。
      シェル側の20pxだけにして、内側の padding は外す。
   2) 境目の大きな英字（.display-word）は、ベースラインより深く切って次のセクションへ
      めり込ませる作り。スマホでは切りすぎて文字が潰れ、上下に妙な空きが出ていたので浅くする。 */
@media (max-width: 600px) {
  :root { --mnt-shell: calc(100% - 40px); }
  .mnt-shell { padding-inline: 0; }

  .mnt-section { padding: 76px 0; }
  /* 上の一括指定が .works などの padding-bottom: 0 を打ち消してしまうので取り戻す。
     クラスの列挙だと .about / .reasons / .commitment が漏れていたため、
     「大きな英字で終わるセクション」を条件にする（英字は次のセクションへめり込む作り） */
  section:has(> .mnt-shell > .display-word:last-child) { padding-bottom: 0; }
  .about { padding-top: 44px; }
  .services, .commitment { padding-top: 76px; }
  .section-label { margin-bottom: 26px; }
  .section-title { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -.04em; }
  .about__subtitle { margin-top: 26px; font-size: 16px; }

  /* 切り抜きの高さはベースラインの位置に合わせる。大文字の高さは実測で 0.731em、
     line-height .78 だとベースラインは箱の上から約 0.74em。0.8em にしていたぶん
     文字の下に約3pxの空きが出ていた。2px 浅く切って、めり込みは残しつつ空きを無くす */
  .display-word { margin-top: 52px; height: calc(.74em - 2px); font-size: clamp(34px, 11vw, 46px);
                  letter-spacing: -.06em; }
}

/* ─── スマホだけの調整（2026-09-20 本人指示）──────────────────────────── */
@media (max-width: 600px) {
  /* SERVICE の項目の矢印は出さない。狭い画面では文字の場所を取るだけで意味がない */
  .service-list__arrow { display: none; }
  .service-list__item { grid-template-columns: 48px 1fr; }

  /* ご依頼の流れ。イラストが数字の上に積まれていたので、文字の左へ回り込ませる。
     元画像は幅がばらばら（312〜524px・高さは揃って448px）なので、
     正方形の枠に contain で収めて見た目の大きさをそろえる */
  .process__list--5 .process__item {
    display: grid;
    grid-template-columns: 92px 1fr;
    /* 番号と見出しは左端いっぱいに置き、イラストは説明文の左にだけ回り込ませる
       （2026-09-20 本人指示） */
    grid-template-areas: "number number" "title title" "illust text";
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    padding: 26px 0;
  }
  .process__list--5 .process__scene {
    /* 枠は横長にする。正方形だと縦長の絵（02・05）だけ枠いっぱいになって大きく見えた。
       絵は上に寄せて、説明文の1行目と高さをそろえる */
    grid-area: illust; width: 92px; height: 66px; margin: 0;
    object-fit: contain; object-position: center top; align-self: start;
  }
  /* 番号→見出し→説明文の間隔をそろえる。既定のままだと 49px / 56px と空きすぎていた */
  .process__list--5 .process__number { grid-area: number; margin: 0 0 6px; line-height: 1.2; }
  .process__list--5 .process__item h3 { grid-area: title; margin: 0 0 12px; }
  .process__list--5 .process__item p { grid-area: text; margin: 0; }
}

/* ─── スマホだけの調整・続き（2026-09-20 本人指示）──────────────────── */
@media (max-width: 600px) {
  /* 運営メディアの右の矢印は出さない。SERVICE と同じ扱い */
  .media__arrow { display: none; }
  .media__item { grid-template-columns: 56px 1fr; }

  /* 「あなたのビジネスについて、お聞かせください。」は画面幅によって2行になっていた。
     1行に収まる大きさまで落とす（18px のとき1行に約395px 必要＝1px あたり約21.9px） */
  .contact__lead { font-size: min(18px, 3.8vw); white-space: nowrap; }
}

/* ─── スマホだけの調整・続き（2026-09-20 本人指示）──────────────────── */
@media (max-width: 600px) {
  /* 制作風景のキャプションは左寄せ。狭い画面では中央寄せだと据わりが悪い */
  .work__caption { text-align: left; }

  /* 下層ページ。ヘッダーは position: fixed で高さ58px、本文の上余白が150pxあったため、
     見出しまでが空きすぎていた（実質92px）。ヘッダー分を確保しつつ詰める */
  .content-area { padding: 90px 0 64px; }
}

/* 記事の日付（2026-09-20 本人指示）。「公開 … 更新 …」を1行に並べる。
   色・書体はディレクトリごとの .entry-meta の指定をそのまま使い、間隔だけここで持つ */
.entry-meta__date + .entry-meta__date { margin-left: .9em; }

/* ─── ホームページの維持費（/homepage-ijihi/。2026-09-21 本人指示で新設）────────────
   コーポレートの白黒の調子に合わせ、色は使わず罫線と太字で段階を付ける。
   本文幅は会社概要と同じ 840px。表の項目名は折り返さない。 */
@media (min-width: 961px) { body.page-guide .content-area { width: min(840px, calc(100% - 80px)); } }
/* 解説ページは、ヘッダー（固定・高さ58px）から日付・タイトルまでを詰める。共通の150pxだと
   実質92px空いて間延びして見えた（2026-09-21 本人指示）。PCは実質46px、スマホは実質24px */
body.page-guide .content-area { padding-top: 104px; }
@media (max-width: 600px) { body.page-guide .content-area { padding-top: 82px; } }
.page-guide .cost-lead { font-size: 1.02rem; line-height: 2; }
.page-guide .entry-content h2 { margin: 3.4rem 0 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid #111; font-size: 1.45rem; line-height: 1.5; }
.page-guide .entry-content h3 { margin: 2rem 0 .6rem; font-size: 1.08rem; line-height: 1.6; }
.cost-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 2.2rem 0 1rem; }
/* 見出しのすぐ下に置くとき（2026-09-21 本人指示で h2 の下へ移動）は、上を詰めて下の文章との間をあける */
.entry-content h2 + .cost-summary { margin: 1.4rem 0 1.8rem; }
.cost-card { padding: 22px 18px 20px; border: 1px solid #d9d9d9; background: #fff; text-align: center; }
.cost-card p { margin: 0; }
.cost-card--main { border: 2px solid #111; }
.cost-card__tag { font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
.cost-card__price { margin-top: 10px !important; font-size: .95rem; white-space: nowrap; }
.cost-card__price strong { font-family: Georgia, "Times New Roman", serif; font-size: 2.3rem; font-weight: 400; letter-spacing: -.02em; }
.cost-card__sub { margin-top: 4px !important; font-size: .84rem; color: #555; }
.cost-card__note { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid #e5e5e5; font-size: .78rem; color: #666; }
.page-guide .cost-table { font-size: .9rem; }
.page-guide .cost-table th { white-space: nowrap; background: #111; color: #fff; border-color: #111; text-align: left; }
.page-guide .cost-table td:first-child { font-weight: 700; white-space: nowrap; }
.page-guide .cost-table td:nth-child(3), .page-guide .cost-table td:nth-child(4) { white-space: nowrap; }
.cost-case { margin: 1.6rem 0; padding: 24px 26px 22px; border: 1px solid #d9d9d9; background: #fff; }
.cost-case h3 { margin: 0 0 .5rem !important; font-size: 1.12rem; }
.cost-case h3 span { display: inline-block; margin-right: .7em; padding: 2px 10px; background: #111; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; vertical-align: .15em; }
.cost-case > p { margin: 0 0 1rem; font-size: .93rem; }
.cost-case dl { display: grid; grid-template-columns: 1fr auto; margin: 0; border-top: 1px solid #e5e5e5; }
.cost-case dt, .cost-case dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid #e5e5e5; font-size: .92rem; }
.cost-case dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-case .cost-case__total { margin: 1rem 0 .7rem; text-align: right; font-size: .95rem; }
.cost-case__total strong { margin-left: .5em; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 400; }
.cost-bar { height: 8px; margin: 0 !important; background: #eee; }
.cost-bar span { display: block; width: var(--w, 0%); min-width: 6px; height: 100%; background: #111; }
.page-guide .cost-list, .page-guide .cost-check { margin: 1.2rem 0; padding: 20px 24px 20px 44px; border: 1px solid #d9d9d9; background: #fff; }
.page-guide .cost-list li, .page-guide .cost-check li { margin: .6rem 0; line-height: 1.9; }
/* よくある質問。1問ごとに枠で囲み、Q と A の印を付ける。追記した注意・補足は答えの中の囲みにする
   （2026-09-21 本人指示。元は段落ごとに下線が付いて、答えと追記の間に区切り線が入ってしまっていた） */
.cost-faq__item { margin: 1.2rem 0; border: 1px solid #d9d9d9; background: #fff; }
.page-guide .entry-content .cost-faq__q { position: relative; margin: 0; padding: 18px 22px 18px 62px; background: #f5f5f5; border-bottom: 1px solid #d9d9d9; font-size: 1.05rem; line-height: 1.6; }
.cost-faq__q::before, .cost-faq__a::before { position: absolute; left: 20px; display: grid; place-items: center; width: 28px; height: 28px;
  font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 400; line-height: 1; }
.cost-faq__q::before { content: "Q"; top: 16px; background: #111; color: #fff; }
.cost-faq__a { position: relative; padding: 20px 22px 20px 62px; }
.cost-faq__a::before { content: "A"; top: 20px; border: 1px solid #111; color: #111; }
.cost-faq__a > p { margin: 0; font-size: .95rem; line-height: 1.95; }
.cost-faq__note { margin: 16px 0 0; padding: 16px 18px 15px; }
.cost-faq__note p { margin: 0; font-size: .92rem; line-height: 1.9; }
.cost-faq__note .cost-faq__note-label { display: inline-block; margin-bottom: .6rem; padding: 2px 12px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
/* 注意（取り返しがつかない話）は太い枠と黒いラベル、補足は薄い地と白抜きのラベルで、重みを変える */
.cost-faq__note--warn { border: 2px solid #111; }
.cost-faq__note--warn .cost-faq__note-label { background: #111; color: #fff; }
.cost-faq__note--warn .cost-faq__note-label::before { content: "！"; margin-right: .3em; }
.cost-faq__note--info { background: #f5f5f5; border-left: 3px solid #111; }
.cost-faq__note--info .cost-faq__note-label { border: 1px solid #111; background: #fff; }
@media (max-width: 600px) {
  .page-guide .entry-content .cost-faq__q { padding: 15px 14px 15px 50px; font-size: 1rem; }
  .cost-faq__a { padding: 16px 14px 16px 50px; }
  .cost-faq__q::before, .cost-faq__a::before { left: 12px; width: 26px; height: 26px; }
  .cost-faq__q::before { top: 14px; } .cost-faq__a::before { top: 16px; }
  .cost-faq__note { margin-left: -36px; padding: 14px 14px 13px; }   /* スマホは A の印の下まで広げて、文字の幅を確保する */
}
.cost-cta { margin: 3.4rem 0 0; padding: 34px 30px 32px; background: #111; color: #fff; text-align: center; }
.cost-cta p { margin: 0 0 1rem; color: #ddd; font-size: .95rem; line-height: 1.95; }
.cost-cta .cost-cta__title { color: #fff; font-size: 1.25rem; font-weight: 700; }
.cost-cta a { color: #fff; }
.cost-cta .cost-cta__btn { display: inline-block; margin-top: .4rem; padding: 14px 40px; background: #fff; color: #111; font-weight: 700; text-decoration: none; letter-spacing: .04em; }
.cost-cta .cost-cta__btn:hover { background: #e8e8e8; }
@media (max-width: 600px) {
  .cost-summary { grid-template-columns: 1fr; gap: 10px; }
  .cost-card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 16px 16px; text-align: left; }
  .cost-card__tag { grid-column: 1; }
  .cost-card__price { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; text-align: right; }
  .cost-card__price strong { font-size: 1.9rem; }
  .cost-card__sub { grid-column: 1; }
  .cost-card__note { display: none; }
  .page-guide .entry-content h2 { margin-top: 2.6rem; font-size: 1.22rem; }
  .page-guide .cost-table { min-width: 620px; }
  .cost-case { padding: 20px 16px 18px; }
  .cost-case h3 span { display: table; margin: 0 0 .5em; }
  .page-guide .cost-list, .page-guide .cost-check { padding: 16px 16px 16px 34px; }
  .cost-cta { padding: 28px 18px 26px; }
  .cost-cta .cost-cta__btn { display: block; padding-inline: 10px; }
}
/* 見出しと本文は文節の切れ目で折り返す（「年／間いくら」のように語の途中で切れないように） */
.page-guide .entry-title,
.page-guide .entry-content :is(h2, h3, p, li, td, dt) { word-break: auto-phrase; }
/* 解説ページの h1。共通の clamp(38px, 5vw, 68px) は題名が30文字前後のページには大きすぎるので下げる（2026-09-21 本人指示）。
   PC は 68px → 40px → 32px、スマホは 24.8px → 21.6px → 19.2px（「もうちょっと小さく」で2段階目） */
.page-guide .entry-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; letter-spacing: -.01em; }
@media (max-width: 600px) { .page-guide .entry-title { font-size: 1.2rem; line-height: 1.6; } }
/* 解説ページの公開日・更新日（見出しの上）。2026-09-21 本人指示 */
.page-guide .entry-header .entry-meta { margin: 0 0 10px; color: #777; font-size: 13px; letter-spacing: .04em; }
/* 試算の各パターンのメリット・デメリット（2026-09-21 本人指示）。色は使わず、○と△の印で分ける */
.cost-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 1.4rem 0 0; border: 1px solid #e0e0e0; }
.cost-pc__col { padding: 16px 18px 14px; }
.cost-pc__col--bad { border-left: 1px solid #e0e0e0; background: #fafafa; }
.cost-pc .cost-pc__head { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.cost-pc__col--good .cost-pc__head::before { content: "○"; margin-right: .5em; }
.cost-pc__col--bad .cost-pc__head::before { content: "△"; margin-right: .5em; }
.page-guide .cost-pc ul { margin: 0; padding: 0 0 0 1.15em; border: 0; background: none; }
.page-guide .cost-pc li { margin: .35rem 0; font-size: .88rem; line-height: 1.75; }
@media (max-width: 600px) {
  .cost-pc { grid-template-columns: 1fr; }
  .cost-pc__col--bad { border-left: 0; border-top: 1px solid #e0e0e0; }
  .cost-pc__col { padding: 14px 14px 12px; }
}
/* 試算の下に置く広告費の補足。3つのパターンすべてに掛かる話なので、枠で囲んで区切る */
.page-guide .cost-adnote { margin: 1.8rem 0 0; padding: 16px 20px; border-left: 3px solid #111; background: #f7f7f7; font-size: .93rem; line-height: 1.95; }
/* 内訳の表の金額欄。条件（依頼する場合／使う場合）を金額の前に、月額や回数の根拠を下に小さく添える */
.page-guide .cost-table td small { display: block; margin-top: 2px; color: #666; font-size: .8rem; font-weight: 400; }
@media (max-width: 600px) { .page-guide .cost-table { min-width: 760px; } }

/* 番号つきの解説ブロック（見落としやすい費用／契約前の確認／抑えるコツ。2026-09-21 本人指示で詳しく書き直し）。
   見出し → 説明 → 確認項目 → 例 の順。色は使わず、番号の黒い四角と罫線で区切る */
.cost-point { margin: 1.4rem 0; padding: 22px 26px 20px; border: 1px solid #d9d9d9; background: #fff; }
.page-guide .cost-point h3 { display: flex; align-items: baseline; gap: .75em; margin: 0 0 .8rem; font-size: 1.1rem; line-height: 1.6; }
.cost-point h3 span { flex: none; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; background: #111; color: #fff;
  font-family: Georgia, "Times New Roman", serif; font-size: .82em; font-weight: 400; transform: translateY(.1em); }
.cost-point p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.95; }
.cost-point p:last-child { margin-bottom: 0; }
.page-guide .cost-point__checks { margin: .2rem 0 .9rem; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; }
.page-guide .cost-point__checks li { position: relative; margin: 0; padding: .6rem 0 .6rem 1.9em; border-bottom: 1px solid #e5e5e5; font-size: .92rem; line-height: 1.8; }
.cost-point__checks li::before { content: ""; position: absolute; left: .2em; top: 1.02em; width: .95em; height: .95em; border: 1.5px solid #111; }
.cost-point__checks li::after { content: ""; position: absolute; left: .5em; top: 1.08em; width: .3em; height: .6em; border: solid #111; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cost-point .cost-eg { margin-top: .9rem; padding: 12px 16px; background: #f5f5f5; font-size: .9rem; line-height: 1.85; }
.cost-eg b { display: inline-block; margin-right: .8em; padding: 1px 9px; border: 1px solid #111; font-size: .74rem; font-weight: 700; letter-spacing: .08em; vertical-align: .08em; }
@media (max-width: 600px) {
  .cost-point { padding: 18px 16px 16px; }
  .page-guide .cost-point h3 { font-size: 1.02rem; }
}

/* ─── コーポレートの固定ページの目次（toc.js の data-prefix="mnt-toc"。2026-09-21 本人指示）────
   白黒の調子に合わせた罫線だけの作り。長い見出しは折り返さず1行で切る。
   スマホは先頭4行まで見せて「目次をすべて見る」で開く（畳む判定は toc.js の data-clip）。 */
.mnt-toc { margin: 2.6rem 0 0; padding: 22px 26px 20px; border: 1px solid #d9d9d9; background: #fafafa; }
.mnt-toc__head { display: flex; align-items: baseline; gap: .7rem; padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 2px solid #111; }
.mnt-toc__en { font-family: Georgia, "Times New Roman", serif; font-size: .7rem; letter-spacing: .2em; }
.mnt-toc__title { font-size: 1.05rem; font-weight: 700; }
.mnt-toc__toggle { margin-left: auto; padding: .1rem .8rem; border: 1px solid #bbb; border-radius: 999px; background: #fff; color: #555; font: 700 .68rem/1.9 inherit; cursor: pointer; }
.entry-content .mnt-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.entry-content .mnt-toc__list > li { counter-increment: toc; position: relative; margin: 0; padding: .55rem 0 .55rem 2.4rem; border-bottom: 1px solid #e5e5e5; line-height: 1.7; font-size: .95rem; }
.entry-content .mnt-toc__list > li:last-child { border-bottom: 0; }
.mnt-toc__list > li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: .1rem; top: .62rem; font-family: Georgia, "Times New Roman", serif; font-size: .82rem; color: #555; }
.entry-content .mnt-toc a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #111; text-decoration: none; }
.entry-content .mnt-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mnt-toc.is-closed .mnt-toc__list, .mnt-toc.is-closed .mnt-toc__more { display: none; }
.mnt-toc.is-closed .mnt-toc__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.mnt-toc__more { display: none; width: 100%; margin-top: .8rem; padding: .5rem; border: 1px solid #111; background: #fff; color: #111; font: 700 .78rem/1.9 inherit; letter-spacing: .04em; cursor: pointer; }
/* 目次から飛んだ先が、固定ヘッダーの下に隠れないように */
.page-guide .entry-content :is(h2, h3)[id] { scroll-margin-top: 96px; }
@media (max-width: 600px) {
  .mnt-toc { padding: 16px 16px 16px; }
  .entry-content .mnt-toc__list > li { padding-left: 2rem; font-size: .92rem; }
  .mnt-toc.is-clipped .mnt-toc__list li.is-over { display: none; }
  .mnt-toc__more { display: block; }
  .page-guide .entry-content :is(h2, h3)[id] { scroll-margin-top: 76px; }
}
/* 金額の幅（1〜3万円 など）が行をまたいで割れないようにする */
.entry-content .nw { white-space: nowrap; }
/* 相談への誘導の説明文。中央寄せだと行の長さがばらついて落ち着かないので、
   680px の箱を中央に置いて、中の文字は左寄せにする（2026-09-21 本人指示）。見出しとボタンは中央のまま */
.cost-cta .cost-cta__text { max-width: 680px; margin-inline: auto; text-align: left; }

/* ─── 解説ページ共通（.page-guide。2026-09-21）──────────────────────────────
   「ホームページの維持費」で作った部品（cost-*）を、ほかの解説ページでも使う。
   body に page-guide を付けるページは products/article_detail.html で決めている。 */
/* ひとことで言うと、の答えの箱 */
.guide-answer { margin: 2.2rem 0 0; padding: 24px 28px 26px; border: 2px solid #111; background: #fff; }
.guide-answer p { margin: 0; }
.guide-answer .guide-answer__label { display: inline-block; margin-bottom: .8rem; padding: 2px 12px; background: #111; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
.guide-answer .guide-answer__text { font-size: 1.12rem; line-height: 1.9; }
/* 土地・住所・家 のたとえ */
.guide-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.8rem 0; }
.guide-trio__item { padding: 22px 18px 20px; border: 1px solid #d9d9d9; background: #fff; text-align: center; }
.guide-trio__item p { margin: 0; }
.guide-trio__as { font-family: Georgia, "Times New Roman", "Yu Mincho", serif; font-size: 1.9rem; line-height: 1.3; }
.guide-trio__name { margin-top: 8px !important; padding-top: 10px; border-top: 1px solid #111; font-size: .98rem; font-weight: 700; letter-spacing: .04em; }
.guide-trio__desc { margin-top: 10px !important; font-size: .86rem; line-height: 1.8; color: #444; text-align: left; }
/* 表示されるまでの 3 ステップ。番号を縦の線でつなぐ */
.page-guide .entry-content .guide-flow { margin: 1.8rem 0; padding: 0; list-style: none; border: 0; background: none; }
.page-guide .guide-flow li { position: relative; display: flex; gap: 18px; margin: 0; padding: 0 0 26px; }
.page-guide .guide-flow li:last-child { padding-bottom: 0; }
.guide-flow li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 1px; background: #111; }
.guide-flow__no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: #111; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.guide-flow li strong { display: block; padding-top: 6px; font-size: 1.04rem; }
.guide-flow li p { margin: .4rem 0 0; font-size: .93rem; line-height: 1.9; }
/* 種類の表・トラブルの表。長い説明の列は折り返す（維持費の表とは列の役割が違う） */
.page-guide .guide-table td:nth-child(3), .page-guide .guide-table td:nth-child(4) { white-space: normal; }
.page-guide .guide-table td:nth-child(3) { white-space: nowrap; }
.page-guide .guide-table--trouble td:nth-child(3) { white-space: normal; }
/* 「○○の違い」の表。項目名の列だけ狭くして、比べる列は同じ幅にそろえる（2026-09-21 本人指示）。
   上の nth-child(3) の nowrap は「サーバーとは」の表のためのもので、比べる表に効くと3列目だけが極端に広がっていた */
/* 項目名の列を 9.5em に固定していたら、「毎月の費用の読みやすさ」のような長い項目名が枠からはみ出した（2026-09-21 本人指摘）。
   項目名の列は「中身の長さぴったり」（折り返さない）にして、残りを比べる列で等分する */
.page-guide .guide-table--even { width: 100%; }
.page-guide .guide-table--even th:first-child, .page-guide .guide-table--even td:first-child { width: 1%; white-space: nowrap; }
.page-guide .guide-table--even th:nth-child(n+2) { width: 45%; }                                    /* 比べる列が2つの表 */
.page-guide .guide-table--even:has(thead th:nth-child(4)) th:nth-child(n+2) { width: 30%; }        /* 比べる列が3つの表 */
/* スマホは extra.js が表の最小幅を 520px にする（inline）。比べる列が3つあると1列が100px台まで縮んで
   幅がばらつくので、この表だけ最小幅を広げて等分できる余地を作る（横スワイプで見る） */
@media (max-width: 700px) { .page-guide .guide-table--even:has(thead th:nth-child(4)) { min-width: 700px !important; } }
.page-guide .guide-table--even td:nth-child(n+2) { white-space: normal; word-break: auto-phrase; vertical-align: top; }
@media (max-width: 600px) {
  .guide-answer { padding: 18px 16px 20px; }
  .guide-answer .guide-answer__text { font-size: 1.02rem; }
  .guide-trio { grid-template-columns: 1fr; gap: 10px; }
  .guide-trio__item { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; text-align: left; }
  .guide-trio__as { grid-row: 1 / span 2; font-size: 1.6rem; text-align: center; }
  .guide-trio__name { margin-top: 0 !important; padding-top: 0; border-top: 0; }
  .guide-trio__desc { margin-top: 2px !important; }
  .page-guide .guide-flow li { gap: 14px; }
  .page-guide .guide-table { min-width: 680px; }
}
/* 3ステップに外枠（2026-09-21 本人指示）。ほかの囲み（cost-point など）と同じ細い罫線の箱に入れる */
.page-guide .entry-content .guide-flow { padding: 26px 28px 24px; border: 1px solid #d9d9d9; background: #fff; }
.guide-flow li:not(:last-child)::before { left: 19px; }
@media (max-width: 600px) { .page-guide .entry-content .guide-flow { padding: 20px 16px 18px; } }
/* 4社の比較表（.guide-compare）。どのセルも短いので折り返さず、スマホは横スライドで見る。
   1列目（項目名）は見出しとして薄いグレーにする */
.page-guide .guide-compare th, .page-guide .guide-compare td { white-space: nowrap; text-align: center; vertical-align: middle; }
.page-guide .guide-compare th small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 400; opacity: .8; }
.page-guide .guide-compare td:first-child { text-align: left; background: #f5f5f5; }
.page-guide .guide-compare thead th:first-child { text-align: left; }
@media (max-width: 600px) { .page-guide .guide-compare { min-width: 820px; font-size: .86rem; } }
/* 解説ページの横に長い表。「スワイプできます」の案内を表の右上に出す（美顔器の教科書と同じ仕組み。
   包む処理は extra.js。はみ出していない表には出ない） */
.page-guide .bk-slider { display: flex; flex-direction: column; margin: 1.4rem 0; }
.page-guide .bk-slider .table-wrap { overscroll-behavior-x: contain; }
.page-guide .bk-slider .table-wrap > table { margin-top: 0; margin-bottom: 0; }
.page-guide .bk-slider__cue { display: none; align-self: flex-end; align-items: center; gap: 5px; margin: 0 2px 6px; color: #666; font-size: .74rem; letter-spacing: .04em; }
.page-guide .bk-slider.is-slider .bk-slider__cue { display: inline-flex; }
.page-guide .bk-slider__cue i { width: 14px; height: 8px; background: currentColor;
  -webkit-mask: linear-gradient(#000, #000) left center / 9px 2px no-repeat, conic-gradient(from -45deg at right center, #000 0 90deg, transparent 0) right center / 8px 8px no-repeat;
  mask: linear-gradient(#000, #000) left center / 9px 2px no-repeat, conic-gradient(from -45deg at right center, #000 0 90deg, transparent 0) right center / 8px 8px no-repeat; }
/* 比較表の補足（small）は折り返してよい。折り返さないと、長い補足のある列に引っ張られて PC でも表が箱からはみ出す */
.page-guide .guide-compare td small { white-space: normal; min-width: 9em; }

/* ===== コーポレートのフッター（2026-09-21 一新）=====
   左にブランドと問合せ、右に4列のサイトマップ、最下段に規約とコピーライト。
   .site-footer は他ディレクトリのフッターと名前がぶつかるので使わない */
.mnt-footer { background: var(--mnt-black); color: #fff; border-top: 1px solid #333; font-size: 14px; }
.mnt-footer a { color: inherit; text-decoration: none; }
.mnt-footer__inner { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 72px; width: min(1180px, calc(100% - 9vw)); margin: 0 auto; padding: 88px 0 72px; }
.mnt-footer__logo { display: inline-flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.mnt-footer__logo img { display: block; width: 170px; height: auto; filter: brightness(0) invert(1); }   /* ヘッダーと同じロゴを白にして使う（マーク単体の画像は中に社名が入っていて、横の文字と二重になる） */
.mnt-footer__lead { margin: 30px 0 0; font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.mnt-footer__lead, .mnt-footer__desc { word-break: auto-phrase; }
.mnt-footer__desc { margin: 14px 0 0; color: #9a9a9a; font-size: 13px; line-height: 2; }
.mnt-footer__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; min-height: 58px; padding: 0 22px; border: 1px solid #6a6a6a; font-size: 13px; font-weight: 700; letter-spacing: .08em; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.mnt-footer .mnt-footer__cta:hover, .mnt-footer .mnt-footer__cta:focus-visible { background: #fff; border-color: #fff; color: #000; }
.mnt-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; align-content: start; }
.mnt-footer__head { margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid #333; color: #9a9a9a; font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
.mnt-footer__head span { display: block; margin-bottom: 4px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.mnt-footer__col ul { margin: 0; padding: 0; list-style: none; }
.mnt-footer__col li + li { margin-top: 13px; }
.mnt-footer__col a { display: inline-block; color: #d6d6d6; font-size: 13.5px; line-height: 1.6; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s ease, background-size .25s ease; }
.mnt-footer__col a:hover, .mnt-footer__col a:focus-visible { color: #fff; background-size: 100% 1px; }
.mnt-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; width: min(1180px, calc(100% - 9vw)); margin: 0 auto; padding: 26px 0 30px; border-top: 1px solid #2a2a2a; }
.mnt-footer__legal, .mnt-footer__copy { margin: 0; color: #8a8a8a; font-size: 11px; letter-spacing: .1em; }
.mnt-footer__legal a { margin-right: 24px; }
.mnt-footer__legal a:hover { color: #fff; }
@media (max-width: 1000px) {
  .mnt-footer__inner { grid-template-columns: 1fr; gap: 56px; padding: 72px 0 56px; }
  .mnt-footer__brand { max-width: 460px; }
}
@media (max-width: 700px) {
  .mnt-footer__inner { width: calc(100% - 40px); gap: 48px; padding: 60px 0 44px; }
  .mnt-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .mnt-footer__lead { font-size: 17px; }
  .mnt-footer__col a { padding: 2px 0; }
  .mnt-footer__bottom { width: calc(100% - 40px); flex-direction: column; align-items: flex-start; padding-bottom: 88px; }   /* 右下の「先頭へ戻る」とコピーライトが重ならないように */
}

/* ===== ホームページ作成診断（/homepage-shindan/。2026-09-21 新設）===== */
.hp-diag { scroll-margin-top: 84px; margin: 2.4rem 0 3.2rem; padding: 36px 36px 34px; border: 2px solid #111; background: #fff; }
.hp-diag.is-ready .hp-diag__fallback { display: none; }
.hp-diag__fallback { margin: 0; color: #555; font-size: .92rem; line-height: 1.9; }
.hp-diag__head { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.hp-diag .hp-diag__count { flex: none; margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
.hp-diag__bar { flex: 1; height: 3px; background: #e2e2e2; }
.hp-diag__bar span { display: block; height: 100%; background: #111; transition: width .3s ease; }
.hp-diag .hp-diag__q { margin: 0 0 22px; font-size: 1.22rem; font-weight: 700; line-height: 1.7; word-break: auto-phrase; outline: none; }
.hp-diag__choices { display: grid; gap: 10px; }
.hp-diag__choices button { display: block; width: 100%; padding: 16px 20px; border: 1px solid #bdbdbd; background: #fff; color: #111; font: inherit; font-size: .97rem; line-height: 1.7; text-align: left; word-break: auto-phrase; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.hp-diag__choices button.is-selected { border-color: #111; box-shadow: inset 4px 0 0 #111; }
.hp-diag__choices button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hp-diag__choices button:hover { background: #111; border-color: #111; color: #fff; } }
.hp-diag__back, .hp-diag__again { margin: 20px 0 0; padding: 6px 0; border: 0; background: none; color: #555; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.hp-diag__back:hover, .hp-diag__again:hover { color: #111; }
.hp-diag__result { outline: none; }
.hp-diag .hp-diag__result-label { margin: 0; color: #666; font-size: .82rem; letter-spacing: .08em; }
.hp-diag .hp-diag__result-en { margin: 14px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .24em; }
.hp-diag .hp-diag__result-name { margin: 6px 0 0; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.55; word-break: auto-phrase; }
.hp-diag .hp-diag__result-desc { margin: 16px 0 0; font-size: .95rem; line-height: 2; }
.hp-diag .hp-diag__sub { margin: 30px 0 12px; padding-top: 22px; border-top: 1px solid #e0e0e0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; }
.hp-diag__fit .hp-diag__sub { margin-top: 28px; }
/* 費用と期間の目安。3つの枠を横に並べ、数字を大きく見せる */
.hp-diag .hp-diag__est { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid #111; }
.hp-diag__est-cell { padding: 16px 18px 15px; }
.hp-diag__est-cell + .hp-diag__est-cell { border-left: 1px solid #d9d9d9; }
.hp-diag .hp-diag__est dt { margin: 0; color: #555; font-size: .74rem; font-weight: 700; letter-spacing: .08em; }
.hp-diag .hp-diag__est dd { margin: 0; }
.hp-diag .hp-diag__est-value { margin-top: 8px; font-size: 1.22rem; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; word-break: auto-phrase; }
.hp-diag .hp-diag__est-note { margin-top: 6px; color: #555; font-size: .8rem; line-height: 1.75; word-break: auto-phrase; }
.hp-diag .hp-diag__ref { margin: 14px 0 0; padding: 12px 16px; background: #f5f5f5; font-size: .88rem; line-height: 1.85; }
.hp-diag .hp-diag__est-caption { margin: 12px 0 0; color: #666; font-size: .8rem; line-height: 1.8; }
.hp-diag__fit-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 10px; font-size: .86rem; color: #666; }
.hp-diag__fit-row.is-top { color: #111; font-weight: 700; }
.hp-diag__fit-track { display: block; height: 10px; background: #ececec; }
.hp-diag__fit-track span { display: block; height: 100%; background: #b5b5b5; }
.hp-diag__fit-row.is-top .hp-diag__fit-track span { background: #111; }
.hp-diag .hp-diag__reasons { margin: 0; padding: 0; list-style: none; }
.hp-diag .hp-diag__reasons li { position: relative; margin: .55rem 0; padding-left: 1.6em; font-size: .93rem; line-height: 1.85; }
.hp-diag .hp-diag__reasons li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.hp-diag .hp-diag__pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-diag .hp-diag__pages li { margin: 0; padding: 5px 14px; border: 1px solid #111; font-size: .84rem; line-height: 1.7; }
.hp-diag .hp-diag__cost { margin: 0; font-size: .93rem; line-height: 1.95; }
.hp-diag__note { margin: 28px 0 0; padding: 16px 18px 15px; background: #f5f5f5; border-left: 3px solid #111; }
.hp-diag__note p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.9; }
.hp-diag__note .hp-diag__note-label { display: inline-block; margin: 0 0 .2rem; padding: 2px 12px; border: 1px solid #111; background: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.hp-diag .hp-diag__links { margin: 26px 0 0; padding: 0; list-style: none; }
.hp-diag .hp-diag__links li { margin: .5rem 0; font-size: .92rem; }
.hp-diag .hp-diag__links a::after { content: " →"; }
.hp-diag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 28px; }
.hp-diag .hp-diag__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-width: min(320px, 100%); min-height: 60px; padding: 0 24px; background: #111; border: 1px solid #111; color: #fff; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: background .2s ease, color .2s ease; }
.hp-diag .hp-diag__cta:hover { background: #fff; color: #111; }
.hp-diag__again { margin: 0; }
/* 解説ページの末尾とトップの PRICE から診断へ */
.hp-diag-banner { display: flex; align-items: center; gap: 18px; max-width: 820px; margin: 2.4rem 0 0; padding: 20px 24px; border: 2px solid #111; color: #111; text-decoration: none; transition: background .2s ease, color .2s ease; }
.hp-diag-banner__label { flex: none; padding: 4px 12px; background: #111; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; transition: background .2s ease, color .2s ease; }
.hp-diag-banner__text { flex: 1; font-size: .88rem; line-height: 1.8; word-break: auto-phrase; }
.hp-diag-banner__text strong { display: block; font-size: 1.05rem; }
.hp-diag-banner__arrow { flex: none; font-size: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .hp-diag-banner:hover { background: #111; color: #fff; } .hp-diag-banner:hover .hp-diag-banner__label { background: #fff; color: #111; } }
/* PRICE の2つ目のボタン（診断へ）。見た目は上の .contact__button のまま、間隔だけ持つ */
.price__side .price__diag { margin-top: 14px; }
@media (max-width: 600px) {
  .hp-diag { margin: 2rem 0 2.6rem; padding: 24px 18px 24px; }
  .hp-diag .hp-diag__q { font-size: 1.08rem; }
  .hp-diag__choices button { padding: 14px 16px; font-size: .93rem; }
  .hp-diag__fit-row { grid-template-columns: 1fr; gap: 6px; }
  .hp-diag .hp-diag__est { grid-template-columns: 1fr; }
  .hp-diag__est-cell + .hp-diag__est-cell { border-left: 0; border-top: 1px solid #d9d9d9; }
  .hp-diag .hp-diag__cta { width: 100%; }
  .hp-diag-banner { flex-wrap: wrap; gap: 10px 14px; padding: 18px 16px; }
  .hp-diag-banner__text { flex-basis: 100%; order: 3; }
  .hp-diag-banner__arrow { margin-left: auto; }
}
.page-guide .cost-cta[hidden] { display: none; }

/* ===== トップ PRICE の3つのプラン（2026-09-21 新設）。黒地の上に、同じ大きさの枠を3つ並べる ===== */
.price__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 66px; }
.price__plans + .price__grid { margin-top: 80px; }
.price-plan { display: flex; flex-direction: column; padding: 36px 30px 34px; border: 1px solid #4a4a4a; color: #fff; }
.price-plan__en { margin: 0; color: #9a9a9a; font-size: 11px; font-weight: 800; letter-spacing: .24em; }
.price-plan__name { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.price-plan__for { margin: 14px 0 0; min-height: 3.7em; color: #bbb; font-size: 13.5px; line-height: 1.85; word-break: auto-phrase; }
.price-plan__price { margin: 22px 0 0; padding: 22px 0; border-top: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; line-height: 1.2; }
.price-plan__amount { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.price-plan__price { display: flex; flex-direction: column; }
.price-plan__label { color: #9a9a9a; font-size: 12px; letter-spacing: .08em; }
.price-plan__amount { margin-top: 8px; }
.price-plan__amount small { margin-left: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.price-plan__monthly { margin-top: 12px; color: #d6d6d6; font-size: 13.5px; letter-spacing: .02em; }
.price-plan__monthly b { margin: 0 1px; color: #fff; font-size: 17px; font-weight: 800; }
.price-plan__list { margin: 24px 0 0; padding: 0; list-style: none; }
.price-plan__list li { position: relative; margin: 0; padding: 0 0 0 1.5em; color: #d6d6d6; font-size: 14px; line-height: 1.8; word-break: auto-phrase; }
.price-plan__list li + li { margin-top: 10px; }
.price-plan__list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 1px; background: #9a9a9a; }
@media (max-width: 960px) {
  .price__plans { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .price__plans + .price__grid { margin-top: 64px; }
  .price-plan { padding: 30px 24px 28px; }
  .price-plan__for { min-height: 0; }
}
/* 診断ページのアイキャッチ。タイトルと本文のあいだに、本文と同じ幅で置く */
.page-illust--shindan { max-width: 820px; margin: 28px 0 36px; }
.page-illust--shindan img, .page-illust--guide img { border-radius: 4px; }
/* 解説ページのアイキャッチ。本文（.entry-content）の先頭に入れてあり、タイトルのすぐ下に出る */
.entry-content .page-illust--guide { margin: 0 0 36px; }
@media (max-width: 600px) { .page-illust--shindan { margin: 20px 0 26px; } .entry-content .page-illust--guide { margin-bottom: 26px; } }

/* ===== アドセンスの広告枠（mnt/ads.js が記事の決まった位置に入れる。2026-09-21）=====
   高さを先に確保して、広告が出たときに下の文章が動かないようにする */
.ad-slot { clear: both; margin: 2.6rem auto; max-width: 100%; min-height: 300px; text-align: center; overflow: hidden; }
.ad-slot__label { margin: 0 0 6px; color: #9a9a9a; font-size: 11px; letter-spacing: .12em; line-height: 1.6; text-align: center; }
.ad-slot ins { min-height: 250px; }
@media (max-width: 600px) { .ad-slot { margin: 2rem auto; min-height: 290px; } }