/* トップページの各セクション(style.css の後に読み込む) */

/* ヒーロー */
.section--hero {
  position: relative;
  height: clamp(700px, 55vw, 800px);
  max-height: 800px;
  overflow: hidden;
  background: var(--color-hero-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 66%, rgba(0, 0, 0, 0.96) 72%, transparent 86%);
  mask-image: linear-gradient(to right, #000 0%, #000 66%, rgba(0, 0, 0, 0.96) 72%, transparent 86%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 100%;
  padding-block: 32px;
}

.hero__copy {
  display: grid;
  grid-template-columns: minmax(250px, 310px) 1px max-content;
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
  max-height: 100%;
  margin-left: auto;
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  align-self: center;
}

.hero__divider {
  width: 1px;
  height: 100%;
  background: var(--color-line);
}

.hero__title {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(40px, 3.1vw, 48px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.15;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.hero__lead {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.95;
}

/* 段落が続くセクション(intro / know)の段落間 */
.section--intro,
.section--know {
  --body-gap: 20px;
}

/* 聞く先は、ここです。:本文は、行ごとに span.intro__line(inc/text.php の sbcc_fixed_lines())で出力する。
   各行を1行ぶんのブロックにして、指定の行で改行する。行が画面幅に収まらないときだけ、文節の位置(<wbr>)で行の中を折り返す。
   keep-all は、<wbr> 以外の位置では折り返さない指定。overflow-wrap は、1つの文節が行に収まらない極端な幅の安全策(#contact と同じ考え方)。
   #intro だけの指定で、.section__text を使う他のセクションには影響しない */
.section--intro .section__text {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.section--intro .intro__line {
  display: block;
  text-wrap: balance;
}

/* こんなときに、ご相談ください:6つの困りごとを、それぞれ独立した枠で並べる(PCは2列、スマホは1列)。
   枠の上辺に金色の短い線を載せるだけの装飾で、文言にない文字や記号は足さない。
   枠の見た目(線・余白・文字・金色の短い線)は、#know のリンクのボックス(.know__link)、#guide の案内ブロック(.guide__item)、#news のカード(.news__item)と共有する */
.section--consult {
  --body-gap: 32px;
}

.consult__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.consult__item,
.know__link,
.guide__item,
.news__item {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid var(--color-line-soft);
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
  word-break: auto-phrase;
  text-wrap: balance;
}

.consult__item::before,
.know__link::before,
.guide__item::before,
.news__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 28px;
  height: 2px;
  background: var(--color-gold);
}

/* サポートサービス:2つのサービスを、同じ大きさ・同じ見た目で横に並べる(940px以下は縦)。
   枠・余白・文字・ボタンの見た目は、#contact の2つの問い合わせブロック(.contact__*)と共有する */
.section--support {
  --body-gap: 32px;
}

.service-list,
.contact__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.service,
.contact__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  text-align: left;
}

.service__title,
.contact__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.service__catch {
  margin: 0;
  color: var(--color-gold-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.service__body,
.contact__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.9;
  word-break: auto-phrase;
}

.service__body p,
.contact__body p {
  margin: 0;
}

/* ボタンは枠の下端にそろえる。文言が長いので、狭いときは折り返す */
.service__button,
.contact__button {
  width: 100%;
  margin-top: 8px;
  text-align: center;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 最下部の問い合わせ:キャッチコピーは、サービス名(#support)と同じ 20px・太さ500 で、本文(15px)より強くする。
   折り返しは、ブラウザの自動の文節分割(auto-phrase)に頼らず、文言の「|」の位置(<wbr>。inc/text.php)だけで行う。
   keep-all は、<wbr> 以外の位置では折り返さない指定。overflow-wrap は、1つの文節が行に収まらない極端な幅の安全策。
   このセクションのキャッチコピーと本文だけの指定で、#support などの .service__* には影響しない。
   PC の2列では、キャッチコピーが1行のブロックと2行のブロックで本文の開始位置がずれないように、キャッチコピーの領域を2行ぶん(行数 × 行間)にそろえる */
.contact__title {
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

.contact__body p {
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
  letter-spacing: -0.025em; /* 1行に収めたい一番長い文(420px)を、ブロックの内側の幅の最小値(415.5px)より 6px 以上短くする(409.5px)。1文字あたり 0.375px の詰め */
}

/* 文ごとに改行する:各文(inc/text.php の sbcc_sentences())を新しい行から始める。文の間に余白は入れない(行間のまま)。
   1文が1行に収まらないときだけ、文節の位置(<wbr>)で折り返し、その文の中で行の長さをそろえる */
.contact__sentence {
  display: block;
  text-wrap: balance;
}

@media (min-width: 941px) {
  .contact__title {
    min-height: calc(1.5em * 2);
  }
}

/* sbccを知る:本文は右端まで使う(段落の幅の上限 38em をこのセクションだけ外す。右端は #consult のカードと同じ)。
   本文の下に、3つのリンクをボックスで横に並べる。ボックスの見た目は #consult のカードと共有(上の .consult__item, .know__link) */
.section--know .section__text {
  max-width: none;
}

/* 内容領域が広いとき、balance(行の長さを揃える)だと第2段落が「sbccは」の後で半分に割れる。PCでは pretty にして、行を右まで使い、最後の行が極端に短くならないようにする(スマホは中央寄せなので balance のまま) */
@media (min-width: 769px) {
  .section--know .section__text {
    text-wrap: pretty;
  }
}

.know__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* ボックスが4個のとき(編集画面で予備の4個目を入れたとき。front-page.php が --4 を付ける)は、3個+1個にならないよう、2列×2段にする。
   幅が狭いときに1列にする指定(下の @media)は、3個のときと同じく、こちらより後ろにあるので優先される */
.know__links--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.know__links li {
  display: flex;
}

/* ボックス全体が押せるリンク。文言は左寄り・縦は中央(.text-link の下線は使わない) */
.know__link {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-navy);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.know__link:hover {
  border-color: rgba(22, 35, 63, 0.65);
}

.know__link:focus-visible {
  border-color: var(--color-navy);
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .know__link {
    transition: none;
  }
}

/* 画面には出さず、読み上げだけに使う文字(display:none や visibility:hidden は読み上げも消えるので使わない) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ご利用案内:導入(見出し+本文)の下に、3つの案内ブロックを横に並べる。
   ブロックの見た目は #consult のカード・#know のボックスと共有(上の .consult__item, .know__link, .guide__item)。
   背景が帯なので、ブロックは白にする */
.section--guide {
  --body-gap: 32px;
}

.guide__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide__heading {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.guide__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ブロックが4個のとき(予備の4個目を入れたとき。front-page.php が --4 を付ける)は、2列×2段にする。1列にする幅は、3個のときと同じ(下の @media が優先) */
.guide__list--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg);
  transition: border-color 0.2s ease;
}

.guide__item:hover {
  border-color: rgba(22, 35, 63, 0.65);
}

.guide__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* 説明文の行数が違っても、リンクをブロックの下端にそろえる */
.guide__text {
  flex: 1;
  margin: 0;
}

.guide__link {
  align-self: flex-start;
  margin-top: 4px;
}

/* ブロック全体を押せるリンクにする(ストレッチドリンク)。リンクは1つだけで、::after をブロックいっぱいに重ねる。
   フォーカスの枠も、この ::after に付けるので、ブロック全体を囲む(キーボード操作のときだけ出る) */
.guide__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.guide__link:focus-visible {
  outline: none;
}

.guide__link:focus-visible::after {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .guide__item {
    transition: none;
  }
}

/* 料金の目安(トップページでは表示しない。.price は、料金の目安の文言を archive から戻すときのために残している) */
.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.price__prefix {
  font-size: 18px;
}

.price__amount {
  font-size: clamp(56px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.price__unit {
  font-size: 24px;
}

/* お知らせ:WordPress の投稿(カテゴリー news)の新しい2件を、カードで並べる(PCは2列、スマホは1列)。記事が1件なら全幅。
   カードの見た目は #consult のカードと共有(上の .consult__item ... .news__item)。日付は出さない */
.section--news {
  --body-gap: 24px;
}

.news__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news__item {
  min-height: 108px;
  padding-right: 56px; /* 右下の矢印(.news__arrow)とタイトルが重ならないようにする */
  background: var(--color-bg);
  transition: border-color 0.2s ease;
}

.news__item:only-child {
  grid-column: 1 / -1;
}

.news__item:hover {
  border-color: rgba(22, 35, 63, 0.65);
}

/* タイトルは3行まで。超える分は省略する */
.news__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news__link {
  color: inherit;
  text-decoration: none;
}

/* カード全体を押せるリンクにする(ストレッチドリンク)。リンクは1カードに1つだけで、::after をカードいっぱいに重ねる。
   フォーカスの枠も、この ::after に付けるので、カード全体を囲む(キーボード操作のときだけ出る) */
.news__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news__link:focus-visible {
  outline: none;
}

.news__link:focus-visible::after {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.news__arrow {
  position: absolute;
  right: 20px;
  bottom: 14px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

/* お知らせ一覧へのリンク:カードの下、右寄せ(右端はカードの右端) */
.news__more {
  width: 100%;
  margin: 0;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .news__item {
    transition: none;
  }
}

/* ヒーロー:狭い画面では画像が上、文字が下の縦積み(人物と文字が重ならないように1000px以下で切り替える) */
@media (max-width: 1000px) {
  .section--hero {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .hero__media {
    position: relative;
    width: 100%;
    height: clamp(280px, 56vw, 430px);
  }

  .hero__media img {
    object-fit: cover;
    object-position: left 52%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  }

  .hero__inner {
    height: auto;
    padding-block: 34px 48px;
  }

  .hero__copy {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto;
    gap: 24px;
    justify-items: center;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .hero__title {
    grid-row: 1;
    font-size: clamp(24px, 7vw, 28px);
  }

  .hero__divider {
    grid-row: 2;
    width: 64px;
    height: 1px;
  }

  .hero__body {
    grid-row: 3;
    gap: 18px;
    align-items: center;
  }

  .hero__lead {
    font-size: 16px;
    line-height: 1.85;
  }

  .section--hero .button {
    padding-inline: 30px;
    font-size: 13px;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .consult__list {
    grid-template-columns: 1fr;
  }

  .consult__item,
  .know__link,
  .guide__item,
  .news__item {
    text-align: center;
  }

  .consult__item::before,
  .know__link::before,
  .guide__item::before,
  .news__item::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .know__links {
    grid-template-columns: 1fr;
  }

  .know__link {
    justify-content: center;
  }

  .guide__list {
    grid-template-columns: 1fr;
  }

  .guide__link {
    align-self: center;
  }

  .price {
    justify-content: center;
  }

  .news__list {
    grid-template-columns: 1fr;
  }

  /* 中央寄せの文字と矢印が重ならないように、矢印の分は下に余白を取る */
  .news__item {
    padding-right: 24px;
    padding-bottom: 40px;
  }

  .news__more {
    text-align: center;
  }
}

/* サポートサービス:横に並べると1列が狭くなる幅では、単発を上、継続を下に縦に積む。
   最下部の問い合わせ(#contact)の2ブロックも、同じ幅で縦に積む(上が「困っている方」、下が「見直したい方」) */
@media (max-width: 940px) {
  .service-list,
  .contact__list {
    grid-template-columns: 1fr;
  }
}

/* タイトルを横書きで左に置くセクション(#consult と #know だけ。HTML の順序は同じで、向きと位置だけ CSS で変える)
   他のセクションの .section__inner / .section__label / .section__body のルールは変えず、この中だけで上書きする */
.section--label-left .section__label {
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

@media (min-width: 769px) {
  /* 左にタイトル、縦線を挟んで右に内容。縦線は、内容と同じ高さに伸ばす */
  .section--label-left .section__inner {
    flex-direction: row;
  }

  /* タイトル列の幅は2つのセクションで同じ。「こんなときに、」の7文字(字間 0.1em を含む 7.7em)が折り返さずに収まる幅 */
  .section--label-left .section__label {
    align-self: stretch;
    width: calc(8em + 33px);
    padding-right: 32px;
    padding-left: 0;
    border-right: 1px solid var(--line);
    border-left: 0;
  }
}

/* タイトル列が左に来るぶん内容が狭くなる。2列だと1列が 280px を切る幅(990px 以下)では、困りごとのカードを1列にする(実測: 1000px で 290px・全カード2行、961px で 274px・3行のカードが出る) */
@media (min-width: 769px) and (max-width: 990px) {
  .section--label-left .consult__list {
    grid-template-columns: 1fr;
  }
}

/* sbccを知る:3つのボックスを横に並べるには、一番長い「sbccが大切にしていること」(約183px)が1行に収まる幅が要る(ボックス1つ約233px・内容領域 約730px・画面 約1165px)。余裕を見て、1179px 以下では縦1列にする(実測: 1150px で2行になる、1200px で全ボックス1行) */
@media (min-width: 769px) and (max-width: 1179px) {
  .know__links {
    grid-template-columns: 1fr;
  }
}

/* ご利用案内:3つのブロックを横に並べるには、一番長いタイトル「対応エリア・サポート方法」(約196px)が1行に収まる幅が要る(ブロック1つ約246px以上・画面 約1030px以上)。余裕を見て、1039px 以下では縦1列にする(実測: 1020px で3つ目のタイトルが2行、1030px から全タイトル1行。1040px のブロック幅 250.6px) */
@media (min-width: 769px) and (max-width: 1039px) {
  .guide__list {
    grid-template-columns: 1fr;
  }
}

/* お知らせ:タイトルが左に来るぶん内容が狭くなる。#consult と同じ 990px 以下では、カードを1列にする(実測: 991px で1枚 285.7px・タイトルは約13文字で折り返し、デモの長いタイトルは3行で省略。900px では 248.5px で3行、769px では 194.8px で4〜5行になり、あふれる) */
@media (min-width: 769px) and (max-width: 990px) {
  .news__list {
    grid-template-columns: 1fr;
  }
}

/* 最下部の問い合わせ:縦書きタイトルが2列(「まず、」「話を聞くところから。」)なので、タイトル列が他のセクションより1列ぶん(24px × 行間 1.5 = 36px)広い。
   そのぶん内容が右端まで届かず、#support のブロックと右端がずれるので、タイトルと内容の間隔を36px 詰めて、内容の右端を #support にそろえる(769px 以上。スマホは縦積みなので対象外) */
@media (min-width: 769px) {
  .section--contact .section__inner {
    gap: calc(var(--label-gap) - 36px);
  }
}