@charset "UTF-8";
/*
 * ======================================
 * 合同会社志 — site.css（サイト固有CSS）
 * claude-design-output の見た目を共通main.cssで再現できない差分を
 * すべて shi- プレフィックスのクラスで定義する。インラインスタイルは使わない。
 * ======================================
 *
 * ▼ 追加クラス一覧（共通SCSS取り込み検討用）
 *  .shi-header / shi-nav / shi-tel-btn / shi-drawer  - sticky+blurヘッダー・単ラベルナビ・グラデ電話ボタン ※共通headerはEN+JA2段/固定バーで不一致（構造不足）
 *  .shi-footer*                                       - 2カラム暗色フッター（住所+地図+リンク格子）  ※共通footerと構成が異なる（構造不足）
 *  .shi-sec / shi-wrap                                - 84/88/92/96px可変セクション余白・1160/1240/760px幅 ※共通section=120px/container=1200固定（値の粒度不足）
 *  .shi-eyebrow / shi-sec-head                        - Montserratグラデ英字アイキャッチ見出し        ※共通heading__enに字間/グラデ指定なし（装飾パターン不足）
 *  .shi-phero                                         - 事業色ベタ/グラデ+装飾円の下層ヒーロー         ※page-hero--solidは中央/円装飾なし（構造不足）
 *  .shi-biz-card / shi-reason-card / shi-syn / shi-str- 事業カード・数字カード・シナジー/強みカード     ※card-*と装飾が異なる
 *  .shi-flow4 / shi-flow5 / shi-promise               - バッジ番号フロー・お約束カード
 *  .shi-work / shi-compare / shi-price* / shi-balloon - ビフォーアフター・比較表・料金表・吹き出し
 *  .shi-form-card / shi-input / shi-submit ほか        - ネイティブ問い合わせフォーム一式
 *  .shi-blog / shi-ecard / shi-widget / shi-pager     - ブログ一覧・記事カード・サイドバー・ページャ
 *  .shi-cat--*                                        - お知らせカテゴリ色バッジ
 *
 * ▼ 共通SCSSに不足していたもの（5分類）
 *  ・構造不足：sticky+blurヘッダー、事業色ヒーロー+装飾円、Montserratグラデ見出し、比較表
 *  ・値の粒度不足：1160/1240px中間幅・84〜96px刻みセクション余白・13〜15pxの細かなfont-size
 *  ・装飾パターン不足：グラデclip英字、吹き出し三角、before/afterタグ
 */

/* ==========================================================================
   0. base
   ========================================================================== */
html { scroll-behavior: smooth; }
/* stickyヘッダー分アンカー位置を下げる */
#works, #contact, #business { scroll-margin-top: 90px; }
body { color: #16232E; }
a:hover { opacity: .82; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* ==========================================================================
   1. layout helpers
   ========================================================================== */
.shi-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.shi-wrap--wide { max-width: 1240px; }
.shi-wrap--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.shi-wrap--form { max-width: 820px; }

.shi-sec { padding: 84px 0; }
.shi-sec--96 { padding: 96px 0; }
.shi-sec--92 { padding: 92px 0; }
.shi-sec--88 { padding: 88px 0; }
.shi-sec--78 { padding: 78px 0; }
.shi-sec--64 { padding: 64px 0; }
.shi-sec--56 { padding: 56px 0; }

.shi-bg-section { background: #F4F7F9; }
.shi-bg-slate   { background: #F1F5F8; }
.shi-bg-gray    { background: rgb(249,249,249); }
.shi-bg-green   { background: #EAF7E9; }
.shi-bg-blue    { background: #f7fbff; }
.shi-bg-blue2   { background: #EAF1FA; }
.shi-bg-cyan    { background: #F5FBFE; }
.shi-bg-cyan2   { background: #EEF2F6; }
.shi-bg-cyan3   { background: #F8FAFB; }
.shi-bg-dark    { background: #16232E; color: #fff; }

/* 短い横棒の区切り線（セクション下・署名グラデ） */
.shi-divider { width: 64px; height: 3px; margin: 0 auto 56px; border-radius: 2px; background: linear-gradient(144deg,#00aaff,#00a6ff 31%,#0cb228); }

/* ==========================================================================
   2. header / nav
   ========================================================================== */
.shi-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #E7ECEF; }
.shi-header__inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 74px; display: flex; align-items: center; gap: 24px; }
.shi-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.shi-logo img { height: 44px; width: auto; display: block; }
.shi-logo__name { font-weight: 900; font-size: 26px; letter-spacing: .02em; color: #102C55; }
.shi-nav { display: flex; gap: 22px; margin: 0 auto; }
.shi-nav__link { font-size: 15px; font-weight: 600; color: #16232E; position: relative; padding-bottom: 3px; white-space: nowrap; }
.shi-nav__link.is-current { border-bottom: 2px solid #00B9EF; }
.shi-header__cta { display: flex; align-items: center; gap: 14px; flex: none; }
.shi-tel-btn { display: inline-flex; align-items: center; gap: 10px; background: #1c6ef5; color: #fff; padding: 10px 20px; border-radius: 10px; box-shadow: 0 3px 10px rgba(28,111,245,.28); font-weight: 900; font-size: 19px; letter-spacing: .01em; }
.shi-tel-btn i { font-size: 13px; }
.shi-tel-btn:hover { opacity: .92; }
.shi-tel-btn--drawer { background: linear-gradient(144deg,#00aaff,#00a6ff 31%,#0cb228); color: #fff; box-shadow: none; }

/* SPナビ（ドロワー）背景を白に。main.css既定の緑グラデ＋白文字を上書きし、白背景で見えるよう文字/ボーダー/電話ボタンを調整 */
.sp-nav { background: #fff; }
.sp-nav__link { color: #16232E; }
.sp-nav__link:hover { background: rgba(0,0,0,.04); }
.sp-nav__item { border-bottom-color: rgba(0,0,0,.08); }
.sp-nav__item:first-child { border-top-color: rgba(0,0,0,.08); }

/* ==========================================================================
   3. footer
   ========================================================================== */
.shi-footer { color: #16232E; }
.shi-footer__grid { max-width: 1240px; margin: 0 auto; padding: 64px 28px 30px; display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 52px; align-items: stretch; }
.shi-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.shi-footer__logo { height: 44px; width: auto; display: block; }
.shi-footer__name { font-weight: 900; font-size: 26px; color: #102C55; }
.shi-footer__addr { color: #5A6B78; font-size: 13px; line-height: 1.8; }
.shi-footer__tel { display: block; font-weight: 900; font-size: 22px; color: #16232E; margin: 0 0 6px; }
.shi-footer__note { color: #7B8893; font-size: 12px; margin-top: 0; }
/* nav: 縦一列・左揃え（縦方向は中央） */
.shi-footer__links { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 5px; }
.shi-footer__links a { color: #41505B; font-size: 14px; }
/* map: 一番右 */
.shi-footer__mapcol { display: flex; }
.shi-footer__map { width: 100%; min-height: 220px; border-radius: 8px; overflow: hidden; background: #e9edf1; border: 1px solid #E7ECEF; }
.shi-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.shi-footer__bottom { border-top: 1px solid #E7ECEF; }
.shi-footer__copy { max-width: 1240px; margin: 0 auto; padding: 18px 28px; font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: .1em; color: #8A97A1; text-align: center; }

/* フッター背景は削除（透明）。事業別モディファイアも背景なしに統一 */
.shi-footer--care,
.shi-footer--ral,
.shi-footer--wash,
.shi-footer--brand { background: none; }

/* ==========================================================================
   4. section heading (eyebrow)
   ========================================================================== */
.shi-sec-head { text-align: center; margin-bottom: 46px; }
.shi-sec-head--sm { margin-bottom: 36px; }
.shi-sec-head--xs { margin-bottom: 20px; }
.shi-sec-head--lg { margin-bottom: 54px; }
.shi-eyebrow { font-family: "Montserrat", sans-serif; font-size: 45px; font-weight: 800; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; margin-bottom: 6px; background: linear-gradient(144deg,#00aaff,#00a6ff 31%,#0cb228); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shi-eyebrow--green { background: none; -webkit-text-fill-color: #27bf25; color: #27bf25; }
.shi-eyebrow--blue  { background: none; -webkit-text-fill-color: #0057B8; color: #0057B8; }
.shi-eyebrow--cyan  { background: none; -webkit-text-fill-color: #00B9EF; color: #00B9EF; }
.shi-eyebrow--white { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.shi-sec-head__ja { font-size: 18px; font-weight: 700; margin: 0; }
.shi-sec-head__ja .shi-sub-note { font-size: .72em; font-weight: 500; color: #5A6B78; }
.shi-lead-c { text-align: center; color: #5A6B78; font-size: 15px; line-height: 1.9; margin: -24px auto 34px; max-width: 760px; text-wrap: balance; word-break: auto-phrase; }
.shi-lead-c--sm { font-size: 14px; max-width: 720px; margin-top: 0; }
.shi-note { text-align: center; font-size: 13px; color: #7B8893; margin-top: 20px; text-wrap: balance; word-break: auto-phrase; }

/* h2 large (gaiheki) */
.shi-h2-lg { font-size: 30px; font-weight: 900; margin: 0; position: relative; }
.shi-h2-underline { display: inline-block; padding-bottom: 14px; border-bottom: 4px solid #00B9EF; }
.shi-h2-underline span { color: #00B9EF; }

/* ==========================================================================
   5. page hero (sub pages)
   ========================================================================== */
.shi-phero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.05); }
.shi-phero--brand { background: linear-gradient(144deg,#00aaff,#00a6ff 31%,#0cb228); }
.shi-phero--ral   { background: #0057B8; }
.shi-phero--wash  { background: #00B9EF; }
.shi-phero--care  { background: #27bf25; }
.shi-phero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 28%; }
.shi-phero__overlay { position: absolute; inset: 0; }
.shi-phero--care .shi-phero__overlay { background: linear-gradient(90deg,rgba(23,140,25,.92) 0%,rgba(39,191,37,.82) 42%,rgba(39,191,37,.28) 100%); }
.shi-phero__inner { max-width: 1160px; margin: 0 auto; padding: 56px 28px 50px; position: relative; z-index: 1; }
.shi-phero__inner--tall { padding: 100px 28px 96px; }
.shi-phero__eyebrow { font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: .24em; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 10px; }
.shi-phero__title { font-size: 38px; font-weight: 900; margin: 0; letter-spacing: .01em; line-height: 1.4; max-width: 860px; color: #fff; }
.shi-phero__brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.shi-phero__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.shi-phero__logo img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.shi-phero__lead { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,.95); margin: 18px 0 0; max-width: 760px; }
.shi-phero--care .shi-phero__title { text-shadow: 0 2px 12px rgba(0,60,0,.28); }
.shi-phero--care .shi-phero__lead { color: #fff; text-shadow: 0 1px 8px rgba(0,60,0,.3); }
.shi-phero__bar { width: 56px; height: 4px; background: #fff; margin-top: 24px; border-radius: 2px; opacity: .9; }
.shi-phero__circle { position: absolute; right: -60px; bottom: -70px; width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,.12); }
.shi-phero__circle2 { position: absolute; right: 120px; top: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }

/* ==========================================================================
   6. TOP - main visual
   ========================================================================== */
/* 高さはCMSスライダー(#main_slider の --swiper-wrapper-height)に追従。min-heightはCMS出力前の潰れ防止のみ */
.shi-mv { position: relative; overflow: hidden; background: #16232E; min-height: 60vh; }
.shi-mv__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.shi-mv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,20,28,.5) 0%, rgba(10,20,28,.22) 45%, rgba(10,20,28,.12) 100%); pointer-events: none; }
.shi-mv__inner { position: absolute; inset: 0; z-index: 2; padding: 0 5%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.shi-mv__title { font-size: 49px; line-height: 1.5; font-weight: 900; margin: 0; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.shi-mv__band { color: #fff; }
.shi-mv__title .g { color: #7CF07A; }
.shi-mv__title .c { color: #5BD3FF; }
.shi-mv__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.shi-mv__btn { font-weight: 700; font-size: 15px; padding: 16px 30px; border-radius: 10px; }
.shi-mv__btn--white { background: #fff; color: #16232E; }
.shi-mv__btn--ghost { border: 1.5px solid rgba(255,255,255,.85); color: #fff; }
.shi-mv__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.85); }
.shi-mv__scroll-en { font-family: "Montserrat", sans-serif; font-size: 10px; letter-spacing: .24em; }
.shi-mv__scroll-line { width: 1px; height: 38px; background: rgba(255,255,255,.6); animation: floaty 2.4s ease-in-out infinite; }
/* MV: CMSスライダー(#main_slider)は高さ・画像・キャッチ/ナビを自前CSSで制御するため、
   こちらは寸法を指定しない（競合防止）。z-index:0でスライダーを1つのstacking contextに閉じ込め、
   ::before(グラデ z1)とタイトル(.shi-mv__inner z2)を前面に重ねる。 */
.shi-mv__slider { position: relative; z-index: 0; }
/* PCではMV画像の表示位置を少し上寄りに（既定center50%→center25%）。
   CMSの高詳細度セレクタ(1,4,1)に勝つよう .shi-mv__slider を足して(1,5,1)にする */
@media (min-width: 861px) {
  .shi-mv__slider #main_slider .main_slider .swiper-wrapper .swiper-slide .main_slider__inner img { object-position: center 25%; }
}

/* ==========================================================================
   7. TOP - intro / message grid
   ========================================================================== */
.shi-intro { display: grid; grid-template-columns: .85fr 1fr; gap: 56px; align-items: center; }
.shi-intro__img { height: 360px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid #E7ECEF; }
.shi-intro__img--tall { height: 380px; }
.shi-intro__title { font-size: 30px; font-weight: 900; line-height: 1.55; margin: 0 0 24px; }
.shi-intro__text { font-size: 18px; line-height: 2.2; color: #41505B; margin: 0; }
.shi-intro__lead { font-size: 32px; font-weight: 900; line-height: 1.5; color: #16232E; margin: 0 0 24px; }
.shi-intro__p { font-size: 15px; line-height: 2.05; color: #41505B; margin: 0 0 16px; }
.shi-intro__p:last-child { margin-bottom: 0; }
/* INTRO2（画像を左端フルブリード＋テキスト右） */
.shi-intro2 { position: relative; overflow: hidden; background: #fff; padding: 96px 0; }
.shi-intro2__img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 420px; width: 47%; background-size: cover; background-position: center; border-radius: 0 8px 8px 0; }
.shi-intro2__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.shi-intro2__body { width: 47%; margin-left: auto; padding-left: 24px; }
/* サイトメインカラー（署名グラデ 緑→シアン）で見出しを装飾 */
.shi-intro2__title { font-size: 36px; font-weight: 900; line-height: 1.5; margin: 0 0 28px; background: linear-gradient(144deg,#00aaff,#00a6ff 31%,#0cb228); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #1F9E1D; }
.shi-intro2__text { font-size: 15px; line-height: 2.1; color: #5A6B78; margin: 0; }
/* お知らせ一覧ボタン(.shi-news-more)と同じカラー：ダーク枠線→ホバーで塗り */
.shi-intro2__btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; background: transparent; border: 1.5px solid #16232E; color: #16232E; font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 10px; }
.shi-intro2__btn i { font-size: 12px; transition: transform .3s ease; }
.shi-intro2__btn:hover { background: #16232E; color: #fff; opacity: 1; }
.shi-intro2__btn:hover i { transform: translateX(4px); }

/* ==========================================================================
   8. TOP - business cards
   ========================================================================== */
.shi-biz-sec { background: linear-gradient(160deg, #eef6fb 0%, #f6fbfd 55%, #ffffff 100%); }
.shi-biz-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.shi-biz2 { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px -22px rgba(15,60,127,.35); transition: transform .35s ease, box-shadow .35s ease; }
.shi-biz2:hover { transform: translateY(-6px); box-shadow: 0 26px 55px -26px rgba(15,60,127,.45); opacity: 1; }
.shi-biz2__imgwrap { height: 200px; overflow: hidden; }
.shi-biz2__img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .5s ease; }
.shi-biz2:hover .shi-biz2__img { transform: scale(1.07); }
.shi-biz2__body { padding: 30px 26px 30px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shi-biz2__name { font-size: 22px; font-weight: 900; }
.shi-biz2__catch { font-weight: 700; font-size: 15px; color: #16232E; margin: 0; line-height: 1.4; }
.shi-biz2__text { font-size: 14px; line-height: 1.5; color: #5A6B78; margin: 0; flex: 1; padding-right: 40px; }
.shi-biz2__arrow { position: absolute; right: 0; bottom: 0; z-index: 2; width: 54px; height: 54px; border-radius: 8px 0 0 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; }
.shi-biz2--care .shi-biz2__name { color: #27bf25; }
.shi-biz2--care .shi-biz2__arrow { background: #27bf25; }
.shi-biz2--ral .shi-biz2__name { color: #0057B8; }
.shi-biz2--ral .shi-biz2__arrow { background: #0057B8; }
.shi-biz2--wash .shi-biz2__name { color: #0090ba; }
.shi-biz2--wash .shi-biz2__arrow { background: #00B9EF; }

/* ==========================================================================
   9. TOP - reason (dark fixed photo) / culture
   ========================================================================== */
.shi-reason { background: linear-gradient(rgba(14,24,32,.66),rgba(14,24,32,.76)), url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28424/okinawa-coast-seascape.jpg'); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; position: relative; overflow: hidden; }
.shi-reason-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.shi-reason-card { border-top: 2px solid rgba(255,255,255,.16); padding-top: 24px; }
.shi-reason-card__num { font-family: "Montserrat", sans-serif; font-size: 52px; font-weight: 700; line-height: 1; color: #27bf25; margin-bottom: 16px; }
.shi-reason-card__title { font-size: 20px; font-weight: 900; margin: 0 0 12px; }
.shi-reason-card__text { color: #c4cfd7; font-size: 14px; line-height: 1.95; margin: 0; }
.shi-culture-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 30px; }
.shi-culture-grid .shi-reason-card { padding-top: 22px; }
.shi-culture-grid .shi-reason-card__num { font-size: 44px; margin-bottom: 14px; }
.shi-culture-grid .shi-reason-card__title { font-size: 19px; margin-bottom: 10px; }

/* ==========================================================================
   10. TOP - news
   ========================================================================== */
.shi-news-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; }
.shi-news-more { border: 1.5px solid #16232E; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 9px; color: #16232E; }
.shi-news-more:hover { background: #16232E; color: #fff; opacity: 1; }
/* 新着情報は約3件分の高さに制限し、超過分はスクロール（CMS非同期出力にも有効） */
.shi-news-list { display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; }
.shi-news-row { display: grid; grid-template-columns: 130px 118px 1fr auto; gap: 22px; align-items: center; padding: 20px 6px; border-bottom: 1px solid #E7ECEF; }
.shi-news-row__date { font-family: "Montserrat", sans-serif; color: #8A97A1; font-size: 14px; font-weight: 500; }
.shi-news-row__cat { justify-self: start; font-size: 12px; font-weight: 700; color: #fff; padding: 5px 12px; border-radius: 5px; }
.shi-news-row__title { font-weight: 500; font-size: 15px; color: #28323B; }
.shi-news-row__arrow { color: #B4BEC5; font-size: 18px; }

/* category badge colors */
.shi-cat--ral  { background: #0057B8; }
.shi-cat--wash { background: #00B9EF; }
.shi-cat--care { background: #1E8F1C; }
.shi-cat--info { background: #16232E; }
.shi-cat--dark { background: #16232E; }

/* ==========================================================================
   11. contact form (native)
   ========================================================================== */
.shi-contact--index { background: linear-gradient(115deg,#EAF7E9 0%,#E6F4FB 55%,#E4F6FD 100%); color: #28323B; }
.shi-contact-center { text-align: center; }
.shi-contact-lead { font-size: 15px; line-height: 1.9; color: #41505B; margin: 0 0 12px; }
.shi-contact-tel { font-size: 14px; color: #41505B; margin-bottom: 34px; }
.shi-contact-tel a { color: #0090ba; font-weight: 900; font-size: 19px; }
.shi-form-card { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 8px; border: 1px solid #E7ECEF; padding: 40px 36px; text-align: left; color: #28323B; }
/* CMSフォーム(--cms)：カードとCMS出力.form-contentsの二重パディングを打ち消す。
   外側クラスを重ねて詳細度を上げCMS既定値に強めに勝つ（!important不使用）。ネイティブ版(company.php)のbaseは維持。 */
.shi-form-card--cms.shi-form-card--cms { padding: 40px 36px; }
.shi-form-card--cms.shi-form-card--cms .form-contents { padding: 0; }
/* チェックリスト：<dd>内の<label><input class="checkbox">…>を横並び(inline-block)に。項目間に余白 */
.shi-form-card--cms .form-contents label:has(input.checkbox) { display: inline-block; margin: 0 18px 6px 0; }
.shi-form-card--cms .form-contents label input.checkbox { margin-right: 6px; }
.shi-field { margin-bottom: 20px; }
.shi-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.shi-req { color: #e2413c; font-size: 12px; margin-left: 8px; }
.shi-input, .shi-select, .shi-textarea { width: 100%; padding: 14px 16px; border: 1px solid #d5dde2; border-radius: 9px; font-size: 15px; font-family: inherit; background: #fff; }
.shi-input:focus, .shi-select:focus, .shi-textarea:focus { outline: none; border-color: #00B9EF; }
.shi-textarea { resize: vertical; }
.shi-submit { width: 100%; color: #fff; border: none; font-weight: 700; font-size: 16px; padding: 17px; border-radius: 10px; cursor: pointer; font-family: inherit; }
.shi-submit--dark  { background: #16232E; }
.shi-submit--green { background: #1E8F1C; }
.shi-submit--blue  { background: #0057B8; }
.shi-submit--cyan  { background: #0090ba; }
.shi-submit:hover { opacity: .9; }
.shi-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.shi-check { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d5dde2; border-radius: 9px; padding: 11px 15px; font-size: 14px; background: #fff; cursor: pointer; }
.shi-check input, .shi-agree input { accent-color: #16232E; }
.shi-file { border: 1.5px dashed #c7d0d6; border-radius: 9px; padding: 22px; text-align: center; color: #8A97A1; font-size: 14px; background: #fafbfc; }
.shi-agree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #41505B; margin-bottom: 18px; justify-content: center; }
.shi-btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.shi-btn-tel { color: #fff; font-weight: 900; font-size: 17px; padding: 14px 26px; border-radius: 10px; }
.shi-btn-tel--ral { background: #0057B8; }
.shi-btn-line { background: #06C755; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 10px; }

/* ==========================================================================
   12. kaigo - philosophy / service / flow4
   ========================================================================== */
.shi-philo { max-width: 860px; margin: 0 auto; text-align: center; background: linear-gradient(160deg,#EAF7E9 0%,#F4FBF3 58%,#ffffff 100%); border: 1px solid #DCEFDA; border-radius: 16px; padding: 64px 46px 56px; position: relative; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(31,158,29,.38); }
/* 装飾：大きな引用符（左上）と柔らかな円（右下） */
.shi-philo::before { content: "\201C"; position: absolute; top: 4px; left: 30px; font-family: Georgia, "Times New Roman", serif; font-size: 120px; line-height: 1; font-weight: 700; color: rgba(39,191,37,.15); }
.shi-philo::after { content: ""; position: absolute; right: -55px; bottom: -55px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(39,191,37,.12), transparent 70%); }
.shi-philo__en { position: relative; z-index: 1; display: inline-block; font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: .28em; font-weight: 700; margin-bottom: 22px; padding-bottom: 12px; background: linear-gradient(90deg,#1F9E1D,#27bf25); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shi-philo__en::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 42px; height: 3px; border-radius: 2px; background: linear-gradient(90deg,#1F9E1D,#27bf25); }
.shi-philo__text { position: relative; z-index: 1; font-size: 22px; font-weight: 700; line-height: 1.95; color: #28323B; margin: 0; text-align: center; text-wrap: balance; word-break: auto-phrase; }
.shi-philo-note { max-width: 860px; margin: 34px auto 0; font-size: 15px; line-height: 2.05; color: #41505B; text-align: center; }

.shi-svc-list { display: flex; flex-direction: column; gap: 24px; }
.shi-svc { background: #fff; border-radius: 8px; border: 1px solid #E7ECEF; padding: 32px 30px; }
.shi-svc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.shi-svc__bar { width: 9px; height: 24px; background: #27bf25; border-radius: 2px; }
.shi-svc__title { font-size: 20px; font-weight: 900; margin: 0; }
.shi-svc__lead { color: #5A6B78; font-size: 14px; line-height: 1.8; margin: 0 0 20px; }
.shi-svc__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; }
.shi-svc__item { background: #f1f7f1; border-radius: 8px; padding: 18px 20px; }
.shi-svc__item-t { font-weight: 700; color: #1E8F1C; font-size: 15px; margin-bottom: 6px; }
.shi-svc__item-d { font-size: 13px; line-height: 1.8; color: #41505B; }

.shi-flow4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 54px; }
.shi-flow4__item { position: relative; background: #fff; border: 1.5px solid #D8EED6; border-radius: 8px; padding: 46px 20px 26px; text-align: center; box-shadow: 0 4px 14px rgba(39,191,37,.07); }
.shi-flow4__num { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#1F9E1D,#27bf25); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 21px; box-shadow: 0 5px 12px rgba(31,158,29,.32); }
.shi-flow4__step { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: .14em; color: #27bf25; font-weight: 700; margin-bottom: 9px; }
.shi-flow4__text { font-size: 15px; font-weight: 700; line-height: 1.7; color: #28323B; }
.shi-flow4__sub { display: block; font-size: 12.5px; font-weight: 500; color: #7B8893; margin-top: 5px; line-height: 1.6; }
.shi-flow4__item:not(:last-child)::after { content: "\25B6"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: #27bf25; font-size: 15px; line-height: 1; z-index: 3; }

/* ==========================================================================
   13. company - message / synergy / outline / map
   ========================================================================== */
.shi-msg { max-width: 1000px; margin: 0 auto; padding: 44px 48px; }
.shi-msg__body { flex: 1; min-width: 300px; }
.shi-msg__title { font-size: 24px; font-weight: 900; line-height: 2; margin: 0 0 30px; text-align: center; }
.shi-spbr { display: none; }
.shi-msg__p { font-size: 15px; line-height: 2.05; color: #41505B; margin: 0 0 16px; }
.shi-msg__p--last { margin-bottom: 22px; }
.shi-msg__side { flex: none; width: 300px; max-width: 100%; }
.shi-msg__photo { height: 360px; border-radius: 8px; background: linear-gradient(135deg,#e8f7e8,#e3eefc); display: flex; align-items: center; justify-content: center; color: #5A6B78; font-weight: 700; font-size: 13px; border: 1px solid #E7ECEF; }
.shi-msg__cap { text-align: center; margin-top: 16px; }
.shi-msg__cap--sign { text-align: right; margin-top: 28px; }
.shi-msg__role { font-size: 13px; color: #7B8893; }
.shi-msg__name { font-size: 22px; font-weight: 900; margin-top: 2px; }

.shi-syn-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 26px; }
.shi-syn { background: #fff; border-radius: 8px; border: 1px solid #E7ECEF; padding: 34px 30px; }
.shi-syn__img { height: 200px; display: flex; align-items: center; justify-content: center; margin: -6px 0 18px; }
.shi-syn__img img { max-height: 200px; max-width: 100%; object-fit: contain; display: block; }
.shi-syn__badge { display: flex; width: fit-content; margin: 0 auto 18px; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; padding: 8px 18px; border-radius: 8px; }
.shi-syn__badge--green { background: #EAF7E9; color: #1E8F1C; }
.shi-syn__badge--blue  { background: #E7F0FB; color: #0057B8; }
.shi-syn__badge--cyan  { background: #E2F6FD; color: #0090ba; }
.shi-syn__text { font-size: 15px; line-height: 2; color: #41505B; margin: 0; }

.shi-outline { max-width: 820px; margin: 0 auto; border-top: 2px solid #16232E; }
.shi-outline__row { display: flex; gap: 20px; padding: 20px 8px; border-bottom: 1px solid #E7ECEF; flex-wrap: wrap; }
.shi-outline__th { width: 150px; flex: none; font-weight: 700; font-size: 15px; }
.shi-outline__td { flex: 1; min-width: 200px; font-size: 15px; color: #41505B; line-height: 1.9; }

.shi-map { height: 380px; border-radius: 8px; overflow: hidden; border: 1px solid #E7ECEF; }
.shi-map--outline { max-width: 820px; margin: 40px auto 0; }
.shi-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   14. renovation - strength / chips / works
   ========================================================================== */
.shi-str-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 22px; }
.shi-str { background: #fff; border: 1px solid #E7ECEF; border-radius: 8px; padding: 30px 26px; }
.shi-str__img { height: 180px; display: flex; align-items: center; justify-content: center; margin: -6px 0 16px; }
.shi-str__img img { max-height: 180px; max-width: 100%; object-fit: contain; display: block; }
.shi-str__num { font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 700; color: #0057B8; line-height: 1; margin-bottom: 14px; }
.shi-str__title { font-size: 17px; font-weight: 900; margin: 0 0 10px; line-height: 1.5; }
.shi-str__text { font-size: 14px; line-height: 1.9; color: #5A6B78; margin: 0; }

.shi-chips { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.shi-chip { display: flex; align-items: center; justify-content: center; text-align: center; gap: 14px; background: #0057B8; border: 1px solid #0057B8; border-radius: 8px; padding: 18px 20px; font-weight: 700; font-size: 15px; color: #fff; }

.shi-works { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; }
.shi-works--wash { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.shi-work { border: 1px solid #E7ECEF; border-radius: 8px; overflow: hidden; background: #fff; }
.shi-work__imgs { display: flex; }
.shi-work__before, .shi-work__after { flex: 1; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; position: relative; }
.shi-work__before { background: #eef1f3; color: #8A97A1; }
.shi-work--ral .shi-work__after  { background: #0057B814; color: #0057B8; }
.shi-work--wash .shi-work__after { background: #00B9EF14; color: #00B9EF; }
.shi-work__tag { position: absolute; top: 8px; left: 8px; color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 4px; }
.shi-work__tag--before { background: #7B8893; }
.shi-work--ral .shi-work__tag--after  { background: #0057B8; }
.shi-work--wash .shi-work__tag--after { background: #00B9EF; }
.shi-work__cap { padding: 16px 18px; font-weight: 700; font-size: 14px; }

/* ==========================================================================
   15. gaiheki - worry / compare / promise / price / flow5
   ========================================================================== */
.shi-worry-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.shi-worry-top { display: flex; justify-content: center; }
.shi-worry2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.shi-balloon { position: relative; background: #fff; border-radius: 8px; padding: 26px 28px; font-size: 16px; font-weight: 700; line-height: 1.8; color: #28323B; text-align: center; text-wrap: balance; word-break: auto-phrase; box-shadow: 0 6px 20px -10px rgba(15,60,127,.25); }
.shi-balloon--narrow { max-width: 460px; padding: 26px 30px; }
.shi-balloon::after { content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #fff; }
.shi-worry-img { display: flex; justify-content: center; margin-top: 26px; }
.shi-worry-img img { max-width: 340px; width: 60%; height: auto; display: block; }
.shi-worry-cta { text-align: center; margin-top: 28px; font-size: 17px; font-weight: 900; color: #0090ba; }

.shi-compare { max-width: 1040px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 1px solid #E7ECEF; }
.shi-compare__grid { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 1px; background: #E3E8EC; }
.shi-compare__h { padding: 20px; font-weight: 900; font-size: 15px; text-align: center; }
.shi-compare__h--item  { background: #16232E; color: #fff; }
.shi-compare__h--paint { background: #e9edf0; color: #28323B; }
.shi-compare__h--wash  { background: #00B9EF; color: #fff; }
.shi-cmp { padding: 20px 24px; font-size: 15px; line-height: 1.7; }
.shi-cmp--label { font-weight: 700; text-align: left; }
.shi-cmp--val  { text-align: center; color: #41505B; }
.shi-cmp-a { background: #F8FAFB; }
.shi-cmp-b { background: #fff; }
.shi-cmp-wash-a { background: #E9F7FD; }
.shi-cmp-wash-b { background: #F0FAFE; }

.shi-badge-head { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.shi-pill { display: inline-block; background: linear-gradient(135deg,#00B9EF,#0090ba); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; padding: 8px 22px; border-radius: 8px; }
.shi-h2-promise { font-size: 32px; font-weight: 900; margin: 0; line-height: 1.4; }
.shi-num-inline { color: #00B9EF; font-family: "Montserrat", sans-serif; font-size: 40px; vertical-align: -3px; }
.shi-hl { position: relative; white-space: nowrap; }
.shi-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; background: rgba(0,185,239,.25); border-radius: 4px; z-index: -1; }

.shi-promise { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 22px; max-width: 820px; margin: 0 auto; }
.shi-promise__card { position: relative; background: #fff; border-radius: 8px; padding: 44px 26px 30px; box-shadow: 0 10px 30px -14px rgba(0,144,186,.35); text-align: center; }
.shi-promise__num { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#00B9EF,#0090ba); color: #fff; font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(0,144,186,.5); }
.shi-promise__title { font-size: 18px; font-weight: 900; margin: 0 0 12px; line-height: 1.5; }
.shi-promise__title span { color: #00B9EF; }
.shi-promise__text { font-size: 13px; line-height: 1.95; color: #5A6B78; margin: 0; }

.shi-price-formula { max-width: 720px; margin: 0 auto 34px; background: #16232E; color: #fff; border-radius: 8px; padding: 26px 28px; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.7; }
.shi-price-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.shi-price-card { background: #fff; border: 1px solid #E7ECEF; border-radius: 8px; padding: 26px 28px; }
.shi-price-card__top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.shi-price-card__name { font-weight: 900; font-size: 18px; }
.shi-price-card__val { font-weight: 900; font-size: 22px; color: #0090ba; }
.shi-price-card__note { font-size: 13px; color: #5A6B78; margin: 10px 0 12px; }
.shi-price-card__ex { font-size: 13px; color: #41505B; background: #E2F6FD; border-radius: 8px; padding: 12px 16px; line-height: 1.9; }
.shi-price-card__h { font-weight: 900; font-size: 16px; margin-bottom: 14px; }
.shi-opt-grid { border: 1px solid #E3E8EC; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E3E8EC; }
.shi-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; font-size: 15px; }
.shi-opt--a { background: #fff; }
.shi-opt--b { background: #F5FBFE; }
.shi-opt__name { color: #28323B; }
.shi-opt__val { font-family: "Montserrat", sans-serif; font-weight: 700; color: #0090ba; white-space: nowrap; }
.shi-opt__val .num { font-size: 19px; }
.shi-opt__val .unit { font-size: 12px; margin-left: 2px; }

.shi-flow5 { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; }
.shi-flow5__item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid #E7ECEF; }
.shi-flow5__item:last-child { border-bottom: none; }
.shi-flow5__num { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #00B9EF; color: #fff; font-family: "Montserrat", sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.shi-flow5__title { font-size: 17px; font-weight: 900; margin: 0 0 6px; }
.shi-flow5__text { font-size: 14px; line-height: 1.9; color: #5A6B78; margin: 0; }

/* ==========================================================================
   16. recruit
   ========================================================================== */
.shi-recruit-box { max-width: 820px; margin: 0 auto; text-align: center; background: #F4F7F9; border-radius: 8px; padding: 56px 34px; }
.shi-recruit-box__badge { display: inline-block; background: #16232E; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 8px 18px; border-radius: 8px; margin-bottom: 22px; }
.shi-recruit-box__title { font-size: 26px; font-weight: 900; margin: 0 0 16px; }
.shi-recruit-box__text { font-size: 15px; line-height: 2; color: #41505B; margin: 0; text-align: center; text-wrap: balance; word-break: auto-phrase; }
.shi-recruit-box__btn { display: inline-block; margin-top: 28px; background: #16232E; color: #fff; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 10px; }

/* ==========================================================================
   17. blog (entry_list / entry)
   ========================================================================== */
.shi-blog { display: flex; gap: 44px; flex-wrap: wrap; align-items: flex-start; }
.shi-blog__main { flex: 1; min-width: 300px; }
.shi-blog__side { flex: none; width: 280px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; }
.shi-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.shi-filter__chip { font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 8px; background: #F1F5F7; color: #41505B; }
.shi-filter__chip.is-active { background: #16232E; color: #fff; }
.shi-elist { display: flex; flex-direction: column; gap: 18px; }
.shi-ecard { display: flex; gap: 22px; background: #fff; border: 1px solid #E7ECEF; border-radius: 8px; overflow: hidden; align-items: stretch; transition: transform .2s; }
.shi-ecard:hover { transform: translateY(-3px); opacity: 1; }
.shi-ecard__thumb { flex: none; width: 150px; background: linear-gradient(135deg,#eef4f7,#e2f0f7); display: flex; align-items: center; justify-content: center; color: #8A97A1; font-size: 11px; font-weight: 700; }
.shi-ecard__body { padding: 20px 22px 20px 4px; flex: 1; }
.shi-ecard__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.shi-ecard__date { font-family: "Montserrat", sans-serif; color: #8A97A1; font-size: 13px; }
.shi-ecard__cat { font-size: 11px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 5px; }
.shi-ecard__title { font-weight: 700; font-size: 16px; line-height: 1.6; color: #28323B; margin-bottom: 8px; }
.shi-ecard__excerpt { font-size: 13px; color: #7B8893; line-height: 1.8; margin: 0; }
.shi-pager { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.shi-pager a { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-weight: 700; font-size: 14px; border: 1px solid #E7ECEF; color: #41505B; }
.shi-pager a.is-current { background: #00B9EF; color: #fff; border-color: #00B9EF; }
.shi-widget { border: 1px solid #E7ECEF; border-radius: 8px; padding: 24px; }
.shi-widget__title { font-size: 15px; font-weight: 900; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #16232E; }
.shi-widget__cat { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid #F0F3F5; font-size: 14px; }
.shi-widget__cat span:last-child { color: #8A97A1; font-size: 13px; }
.shi-widget__recent { display: block; padding: 11px 0; border-bottom: 1px solid #F0F3F5; }
.shi-widget__recent-date { font-family: "Montserrat", sans-serif; font-size: 11px; color: #8A97A1; margin-bottom: 3px; }
.shi-widget__recent-title { font-size: 13px; line-height: 1.6; color: #28323B; }
.shi-widget__arch { display: block; padding: 10px 2px; border-bottom: 1px solid #F0F3F5; font-size: 14px; }

.shi-article { flex: 1; min-width: 300px; }
.shi-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shi-article__cat { font-size: 12px; font-weight: 700; color: #fff; padding: 5px 12px; border-radius: 5px; }
.shi-article__date { font-family: "Montserrat", sans-serif; color: #8A97A1; font-size: 14px; }
.shi-article__title { font-size: 28px; font-weight: 900; line-height: 1.6; margin: 0 0 26px; }
.shi-article__hero { height: 380px; border-radius: 8px; background: linear-gradient(135deg,#e3eefc,#e0f6fd); display: flex; align-items: center; justify-content: center; color: #5A6B78; font-weight: 700; font-size: 13px; margin-bottom: 34px; border: 1px solid #E7ECEF; }
.shi-article__body { font-size: 15px; line-height: 2.1; color: #28323B; }
.shi-article__body p { margin: 0 0 20px; }
.shi-article__body p:last-child { margin-bottom: 0; }
.shi-article__body h2 { font-size: 20px; font-weight: 900; margin: 34px 0 14px; padding-left: 14px; border-left: 4px solid #0057B8; }
.shi-article__back { display: inline-block; margin-top: 40px; border: 1.5px solid #16232E; font-weight: 700; font-size: 14px; padding: 13px 26px; border-radius: 9px; color: #16232E; }
.shi-article__back:hover { background: #16232E; color: #fff; opacity: 1; }

/* ==========================================================================
   18. page-top button (override common color)
   ========================================================================== */
.page-top__link { background: #16232E; }

/* ==========================================================================
   20. scroll reveal（トップページ／common.jsがIntersectionObserverで.is-visible付与）
   ========================================================================== */
.shi-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.shi-reveal.is-visible { opacity: 1; transform: none; }
.shi-reveal--d1 { transition-delay: .1s; }
.shi-reveal--d2 { transition-delay: .2s; }
.shi-reveal--d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .shi-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   19. responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .shi-nav, .shi-header__cta { display: none; }
  .nav-toggle { display: block; }
  /* ハンバーガー出現と同時にフッターナビを非表示 */
  .shi-footer__links { display: none; }
}
@media (max-width: 860px) {
  .shi-intro { grid-template-columns: 1fr; gap: 28px; }
  .shi-intro__img, .shi-intro__img--tall { height: 240px; }
  /* MV下の画像はテキストの下→ビジネスの上に来るよう順序入替 */
  .shi-intro2 { padding: 0 0 60px; display: flex; flex-direction: column; }
  .shi-intro2__inner { order: 1; }
  .shi-intro2__img { position: static; transform: none; width: 100%; height: 240px; border-radius: 0; order: 2; margin-top: 40px; }
  .shi-intro2__title { font-size: 27px; }
  .shi-intro2__body { width: 100%; margin-left: 0; padding-left: 0; padding-top: 0; }
  /* 比較表：狭い幅では横スクロールで閲覧 */
  .shi-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shi-compare__grid { min-width: 700px; }
  .shi-biz-grid, .shi-reason-grid, .shi-syn-grid, .shi-str-grid { grid-template-columns: 1fr; }
  .shi-flow4 { grid-template-columns: 1fr 1fr; }
  .shi-flow4__item:not(:last-child)::after { display: none; }
  .shi-worry2, .shi-promise, .shi-works, .shi-works--wash { grid-template-columns: 1fr; }
  .shi-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .shi-mv__title { font-size: 38px; }
  .shi-mv__inner { padding: 0 24px; }
  .shi-blog { flex-direction: column; }
  .shi-blog__side { width: 100%; }
  .shi-msg__side { width: 100%; }
  .shi-news-list { max-height: 280px; }
  .shi-news-row { grid-template-columns: 74px 1fr; gap: 6px 14px; }
  .shi-news-row__cat { grid-row: 1; grid-column: 2; }
  .shi-news-row__title { grid-column: 1 / -1; }
  .shi-news-row__arrow { display: none; }
  .shi-phero__title { font-size: 30px; }
}
@media (max-width: 640px) {
  .shi-wrap { padding: 0 20px; }
  .shi-header__inner { padding: 0 20px; gap: 14px; }
  .shi-logo__name { font-size: 26px; }
  .shi-logo img { height: 36px; }
  .shi-sec, .shi-sec--96, .shi-sec--92, .shi-sec--88 { padding: 60px 0; }
  .shi-flow4 { grid-template-columns: 1fr; }
  .shi-opt-grid { grid-template-columns: 1fr; }
  .shi-eyebrow { font-size: 34px; }
  .shi-mv__title { font-size: 32px; }
  /* スマホはMV高さ60vh。CMSが後読みする #main_slider.slider_wrapper(98vh) に確実に勝つよう
     祖先クラス .shi-mv__slider を足して詳細度を上げる（!important不使用） */
  .shi-mv__slider #main_slider.slider_wrapper { --swiper-wrapper-height: 60vh; }
  .shi-mv { min-height: 60vh; margin-bottom: 32px; }
  /* CMSフォームのカード余白をスマホ用に圧縮 */
  .shi-form-card--cms.shi-form-card--cms { padding: 24px 20px; }
  .shi-ecard { flex-direction: column; }
  .shi-ecard__thumb { width: 100%; height: 150px; }
  .shi-ecard__body { padding: 18px 20px; }
  .shi-recruit-box__text { text-align: left; text-wrap: normal; word-break: normal; }
  /* スマホ用フォント調整 */
  .shi-intro__lead { font-size: 24px; }
  .shi-h2-lg { font-size: 23px; }
  .shi-recruit-box__title { font-size: 18px; }
  /* CTAボタンを一行に収める（余白・文字サイズ縮小） */
  .shi-recruit-box__btn { padding: 13px 18px; font-size: 13px; white-space: nowrap; }
  /* 下層ヒーロー：余白と本文を圧縮 */
  .shi-phero__inner { padding: 45px 20px 44px; }
  .shi-phero__lead { font-size: 13px; letter-spacing: 0; }
  .shi-phero__brand { gap: 14px; }
  .shi-phero__logo img { height: 44px; }
  .shi-msg { padding: 30px 22px; }
  .shi-msg__title { font-size: 22px; }
  .shi-spbr { display: inline; }
  /* CONTACT見出しの（〜専用）はスマホで直前改行（ブロック化して次行へ） */
  .shi-sub-note { display: block; }
  /* PHILOSOPHYカードのスマホ調整 */
  .shi-philo { padding: 44px 24px 38px; border-radius: 12px; }
  .shi-philo__text { font-size: 18px; }
  .shi-philo::before { font-size: 88px; left: 18px; }
}