/* サービス詳細（tmpl-service-detail.php）と事業内容（tmpl-service-index.php）
 ------------------------------------------------------------ */

/* ---------- 詳細：共通 ---------- */
.sd_menu { scroll-margin-top: 110px; }
.sd_menu_ttl { font-weight: bold; line-height: 1.45; }
.sd_menu_catch { font-weight: bold; word-break: auto-phrase; }
.sd_menu_tags_ttl { font-family: "Roboto", sans-serif; font-size: 1.1rem; letter-spacing: .15em; color: #999; }

/* 対応領域は「 / 」区切りの小さな文字 */
.sd_tags { display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 1.3rem; line-height: 1.9; color: #666; }
.sd_tags li + li::before { content: "/"; margin: 0 .7em; color: #bbb; }

/* 線画ピクト */
.sd_menu_icon { display: block; color: #333; }
.sd_menu_icon svg { display: block; width: 100%; height: 100%; }
.sd_menu_icon .ac { stroke: #00a7ea; }

/* ---------- 詳細：目次。1行の文字リンクを中央に。行ごとの数はテンプレートでそろえる（.sd_toc_break で改行） ---------- */
.sd_toc { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.sd_toc_ttl { margin-bottom: 12px; font-size: 1.3rem; font-weight: bold; letter-spacing: .1em; color: #666; }
.sd_toc ul { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.sd_toc li { white-space: nowrap; }
.sd_toc li + li:not(.sd_toc_break)::before { content: "/"; margin: 0 .9em; color: #bbb; }
.sd_toc_break { flex-basis: 100%; height: 0; }
.sd_toc_break + li::before { content: none !important; }
.sd_toc a { font-size: 1.4rem; font-weight: bold; line-height: 2.2; transition: color .25s ease; }
.sd_toc a:hover { color: #00a7ea; }
.sd_toc .sd_no { margin-right: .5em; font-size: 1.2rem; }

/* ---------- 各メニュー：章立て。全幅の細線で区切り、中身は中央の 760px。キャッチを主役に ---------- */
.sd_menus .sd_menu { position: relative; margin-top: 110px; padding-top: 44px; }
.sd_menus .sd_menu:first-child { margin-top: 60px; }
.sd_menus .sd_menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #707070; }
.sd_menus .sd_menu > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* 斜めの線は1か所だけ：いま画面の中ほどにある項目の区切り線の上に引く（motion.js の .is-current） */
.sd_menus .sd_menu::after { content: ""; position: absolute; left: calc(50% - 380px); top: -24px; width: 1px; height: 48px; background: #333; transform: rotate(-15deg) scaleY(0); transition: transform .7s cubic-bezier(.77, 0, .18, 1) .2s; }
.sd_menus .sd_menu.is-current::after { transform: rotate(-15deg); }
html:not(.has-motion) .sd_menus .sd_menu:first-child::after { transform: rotate(-15deg); }
.sd_menus .sd_menu_head { display: flex; align-items: center; gap: 18px; }
.sd_menus .sd_menu_icon { width: 64px; height: 64px; }
.sd_menus .sd_menu_icon svg * { vector-effect: non-scaling-stroke; }
.sd_menus .sd_menu_no { font-family: "Roboto", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; color: #00a7ea; }
.sd_menus .sd_menu_ttl { font-size: 1.5rem; letter-spacing: .08em; }
.sd_menus .sd_menu_text { margin-top: 32px; }
.sd_menus .sd_menu_catch { font-size: 3.4rem; line-height: 1.55; text-wrap: balance; }
.sd_menus .sd_menu_desc { margin-top: 32px; font-size: 1.6rem; line-height: 2.1; }
.sd_menus .sd_menu_tags_ttl + .sd_tags { margin-top: 6px; }
.sd_menus .sd_menu_tags { margin-top: 32px; }
/* 内容の内訳：細い線で区切った「見出し｜説明」の行 */
.sd_points { margin-top: 28px; border-top: 1px solid #e5e5e5; }
.sd_points > div { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; }
.sd_points dt { font-size: 1.5rem; font-weight: bold; line-height: 1.9; }
.sd_points dd { font-size: 1.5rem; line-height: 1.9; }


@media screen and (max-width: 786px) {
  .sd_menu { scroll-margin-top: 70px; }
  .sd_toc { text-align: left; }
  .sd_toc ul { display: block; }
  .sd_toc li { border-bottom: 1px solid #e5e5e5; white-space: normal; }
  .sd_toc li + li::before { content: none; }
  .sd_toc_break { display: none; }
  .sd_toc a { display: block; padding: 10px 0; }
  .sd_menus .sd_menu { margin-top: 64px; padding-top: 32px; }
  .sd_menus .sd_menu::before { left: -20px; right: -20px; }
  .sd_menus .sd_menu::after { left: 8px; }
  .sd_menus .sd_menu_icon { width: 48px; height: 48px; }
  .sd_menus .sd_menu_catch { font-size: 2.4rem; }
  .sd_menus .sd_menu_desc { font-size: 1.5rem; line-height: 2; }
  .sd_points > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .sd_points dt, .sd_points dd { font-size: 1.4rem; }
}

/* ============================================================
 * 事業内容（tmpl-service-index.php）：余白を大きくとった千鳥配置
 * 左列は広く、右列は狭く、右列は半分ほど下げる
 * ============================================================ */
.si_list { display: grid; grid-template-columns: 600fr 480fr; column-gap: 120px; row-gap: 200px; align-items: start; padding-bottom: 280px; }
.si_item { display: block; color: #333; }
.si_item:nth-child(even) { translate: 0 280px; }
.si_pho { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.si_pho img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.si_body { display: block; margin-top: 32px; }
.si_no { display: block; font-family: "Roboto", sans-serif; font-size: 1.3rem; letter-spacing: .12em; color: #00a7ea; }
.si_en { display: block; margin-top: 8px; font-family: "Roboto", sans-serif; font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; color: #888; }
.si_name { display: block; margin-top: 12px; font-size: 3rem; font-weight: bold; line-height: 1.5; }
.si_name span { font-weight: bold; background: linear-gradient(#333, #333) left bottom / 0 1px no-repeat; transition: background-size .4s ease; }
.si_text { display: block; max-width: 26em; margin-top: 20px; font-size: 1.5rem; line-height: 2.1; }
.si_item .btn_small { margin-top: 32px; }
a.si_item:hover .si_pho img { transform: scale(1.04); }
a.si_item:hover .si_name span { background-size: 100% 1px; }
a.si_item:hover .btn_small { background: #333; }
a.si_item:hover .btn_small::after { background-image: url(../img/common/icon_arrow_button_white.svg); transform: translate(calc(-50% + 3px), -55%); }
.si_item_nolink .si_pho img { filter: saturate(.85); }
.si_ask { display: inline-block; margin-top: 28px; font-size: 1.3rem; color: #888; }
.si_ask::after { content: " →"; }
.si_ask:hover { color: #333; }
.si_more { text-align: center; font-size: 1.5rem; }
.si_more a { text-decoration: underline; text-underline-offset: 4px; }

@media screen and (max-width: 1180px) {
  .si_list { column-gap: 60px; row-gap: 140px; padding-bottom: 200px; }
  .si_item:nth-child(even) { translate: 0 200px; }
  .si_name { font-size: 2.4rem; }
}
@media screen and (max-width: 786px) {
  .si_list { display: block; padding-bottom: 60px; }
  .si_item + .si_item { margin-top: 88px; }
  .si_item:nth-child(even) { translate: none; }
  .si_item:nth-child(odd) .si_pho { margin-left: -20px; }
  .si_item:nth-child(even) .si_pho { margin-right: -20px; }
  .si_item:nth-child(even) .si_body { position: relative; padding-left: 32px; }
  .si_item:nth-child(even) .si_body::before { content: ""; position: absolute; left: 16px; top: 4px; bottom: 4px; width: 1px; background: #d9d9d9; }
  .si_name { font-size: 2.2rem; }
  .si_text { font-size: 1.4rem; line-height: 2; }
}


/* ============================================================
 * スクロール演出（motion.js が画面に入った要素に .is-inview、同時に入ったものに --d）
 * ============================================================ */

/* 詳細の各メニュー：区切り線が左から引かれ、番号・アイコン → キャッチ → 本文 → 対応領域の順に浮かぶ。アイコンは青い線を引く */
.has-motion [data-reveal="chapter"]::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.77, 0, .18, 1); }
.has-motion [data-reveal="chapter"].is-inview::before { transform: none; }
.has-motion [data-reveal="chapter"] > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.has-motion [data-reveal="chapter"] .sd_menu_head { transition-delay: .25s; }
.has-motion [data-reveal="chapter"] .sd_menu_text { transition-delay: .4s; }
.has-motion [data-reveal="chapter"] .sd_menu_tags { transition-delay: .6s; }
.has-motion [data-reveal="chapter"].is-inview > * { opacity: 1; transform: none; }
.has-motion [data-reveal="chapter"] .ac:not([stroke-dasharray]) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.77, 0, .18, 1) .7s; }
.has-motion [data-reveal="chapter"].is-inview .ac { stroke-dashoffset: 0; }

/* 事業内容の一覧：写真が左から開いて引きで落ち着き、少し遅れて文字が浮かぶ */
.has-motion [data-reveal="si"] .si_pho { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.has-motion [data-reveal="si"] .si_pho img { transform: scale(1.15); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 1ms + 150ms); }
.has-motion [data-reveal="si"] .si_body { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 1ms + 450ms); }
.has-motion [data-reveal="si"].is-inview .si_pho { clip-path: inset(0); }
.has-motion [data-reveal="si"].is-inview .si_pho img { transform: none; }
.has-motion [data-reveal="si"].is-inview .si_body { opacity: 1; transform: none; }
.has-motion a[data-reveal="si"].is-inview:hover .si_pho img { transform: scale(1.04); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal="chapter"]::before { transform: none; transition: none; }
  .has-motion [data-reveal="chapter"] .ac { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}