@charset "UTF-8";
/* ==========================================================================
   style.css  —  ふるくま TOP
   --------------------------------------------------------------------------
   Illustrator アートボード 1500 × 11073.5px を等比でブラウザに再現する。
   1rem = 10px（アートボード幅 1500px 時）。
   したがって CSS の値は「Illustrator の実測 px ÷ 10」で記述している。
   例）70px の見出し → 7rem
   1500px 未満では html の font-size が vw 追従するため、
   ページ全体が Illustrator の比率を保ったまま等比縮小される。
   命名規則：l-（レイアウト）/ c-（コンポーネント）/ p-（セクション）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基準スケール
   -------------------------------------------------------------------------- */
html{ font-size: calc(100vw / 150); }          /* 1500px で 10px */
@media (min-width: 1500px){ html{ font-size: 10px; } }
@media (max-width:  992px){ html{ font-size: 10px; } }  /* 以降は個別レイアウト */

/* --------------------------------------------------------------------------
   2. 変数（Illustrator 実測値）
   -------------------------------------------------------------------------- */
:root{
  --color-green:      #00443D;   /* 見出し・パネル */
  --color-green-btn:  #2C4C3D;   /* ボタン・罫線 */
  --color-green-dark: #002B25;   /* フッター */
  --color-text:       #12362B;   /* 本文・アイコン線 */
  --color-bg-cream:   #FEFEFB;
  --color-bg-mint:    #F0F4F3;
  --color-accent:     #FFA788;   /* NEWS タグ */
  --color-border:     #D0D4D5;   /* カード罫線 */
  --color-white:      #FFFFFF;

  --font-mincho: "Zen Old Mincho", serif;
  --font-gothic: "Noto Sans JP", sans-serif;
  --font-round:  "Zen Maru Gothic", sans-serif;
  --font-label:  "LINESeedJP", "Noto Sans JP", sans-serif;

  --inner: 130rem;   /* コンテンツ幅 1300px */
}

@font-face{
  font-family:"LINESeedJP";
  src:url("../fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:block;
}

/* --------------------------------------------------------------------------
   3. ベース
   -------------------------------------------------------------------------- */
body{
  font-family: var(--font-gothic);
  font-size: 1.6rem;
  font-weight: 500;                       /* Illustrator = NotoSansJP Medium */
  line-height: 2;
  color: var(--color-text);
  background: var(--color-bg-cream);
  overflow-x: hidden;

  /* Illustrator と同じ文字の見え方にするための描画設定 */
  font-synthesis: none;                   /* 疑似ボールド／イタリックを禁止 */
  font-feature-settings: "palt" 0;        /* 約物は全角（Illustrator 既定） */
  font-kerning: none;                     /* Illustrator はカーニング未適用 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.l-inner{ width: var(--inner); margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. 共通コンポーネント
   -------------------------------------------------------------------------- */

/* 4-1. 英字ラベル（ABOUT US / SERVICE …） */
.c-label{
  font-family: var(--font-label);
  font-size: 2rem; font-weight: 700;
  line-height: 1.4; letter-spacing: .06em;
  color: var(--color-green);
}
.c-label--center{ text-align: center; }
.c-label--light { color: var(--color-white); }

/* 4-2. 明朝見出し（Illustrator = ZenOldMincho Medium 44px） */
.c-heading-mincho{
  font-family: var(--font-mincho);
  font-size: 4.4rem; font-weight: 500;
  line-height: 1.6; letter-spacing: .05em;
  color: var(--color-green);
}
.c-heading-mincho--center{ text-align: center; }
.c-heading-mincho--lg{                    /* ABOUT 見出し 54px / 行送り 83px */
  font-size: 5.4rem; line-height: 1.537; letter-spacing: .024em;
}
.c-label + .c-heading-mincho{ margin-top: 1.3rem; }

/* 4-3. ボタン（実測 280 × 64px・完全ピル型） */
.c-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 3rem;
  width: 28rem; height: 6.4rem;
  border-radius: 999px;
  font-family: var(--font-mincho);
  font-size: 1.8rem; font-weight: 500;
  line-height: 1; letter-spacing: .04em;
  transition: opacity .3s ease;
}
.c-btn:hover{ opacity: .75; }
.c-btn--outline{ background: var(--color-white); border: 1px solid var(--color-green-btn); color: var(--color-green); }
.c-btn--fill   { background: var(--color-green-btn); border: 1px solid var(--color-green-btn); color: var(--color-white); }

/* 細い矢印（Illustrator 実測：総幅約40px・線1.5px・小さな矢じり） */
.c-btn__arrow{ position: relative; flex: none; width: 3.4rem; height: 1rem; }
.c-btn__arrow::before{  /* シャフト */
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%);
}
.c-btn__arrow::after{   /* 矢じり */
  content: ""; position: absolute; right: 0; top: 50%;
  width: .9rem; height: .9rem;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translate(0, -50%) rotate(45deg);
}
.c-btn--wide{ width: 40.8rem; height: 9.5rem; gap: 1.8rem; font-size: 2.6rem; letter-spacing: .027em; }

/* --------------------------------------------------------------------------
   5. ヘッダー（ロゴ left 53px / CTA right 19px：Illustrator 実測）
   -------------------------------------------------------------------------- */
.l-header{ position: absolute; inset: 0 0 auto 0; z-index: 100; }
.l-header__inner{ display: flex; align-items: flex-start; padding: 0 1.9rem 0 5.3rem; }
.l-header__logo{ flex: none; margin-top: 2.66rem; width: 23.66rem; }
.l-header__logo img{ width: 100%; }

.l-nav{ display: flex; align-items: flex-start; margin-left: auto; }
.l-nav__list{ display: flex; gap: 4.1rem; margin-top: 5rem; }
.l-nav__item a{
  font-size: 1.8rem; font-weight: 500; line-height: 1;
  letter-spacing: .01em; color: var(--color-green);
  transition: opacity .3s ease;
}
.l-nav__item a:hover{ opacity: .6; }
.l-nav__cta{
  margin-top: 2.6rem; margin-left: 4.1rem;
  width: 21.7rem; height: 6.6rem; gap: 0;
  font-family: var(--font-gothic); font-size: 1.8rem; letter-spacing: .036em;
}

/* スマホ版オープンメニュー内のロゴ：PC では非表示 */
.l-nav__logo{ display: none; }

/* スマホ版だけで有効にする改行（PCでは無効） */
.u-sp-br{ display: none; }

.l-hamburger{ display: none; position: relative; z-index: 110; width: 44px; height: 44px; }
.l-hamburger__bar{
  position: absolute; left: 9px; width: 26px; height: 2px;
  background: var(--color-green); transition: transform .3s ease, opacity .3s ease;
}
.l-hamburger__bar:nth-child(1){ top: 14px; }
.l-hamburger__bar:nth-child(2){ top: 21px; }
.l-hamburger__bar:nth-child(3){ top: 28px; }

/* --------------------------------------------------------------------------
   6. HERO（0 – 1004px）
   -------------------------------------------------------------------------- */
.p-hero{ position: relative; height: 100.4rem; overflow: hidden; }
.p-hero__bg{ position: absolute; inset: 0; }
.p-hero__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.p-hero__inner{ position: relative; padding-top: 26.8rem; }

/* Illustrator：ZenOldMincho Medium 70px / 行送り 103px / トラッキング 10 */
.p-hero__title{
  font-family: var(--font-mincho);
  font-size: 7rem; font-weight: 500;
  line-height: 1.4714; letter-spacing: .01em;
  color: var(--color-green);
  font-feature-settings: "palt" 0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Illustrator：NotoSansJP Medium 22px / 行送り 48px */
.p-hero__lead{ margin-top: 2.8rem; font-size: 2.2rem; line-height: 2.1818; letter-spacing: .027em; }
.p-hero__btn { margin-top: 5rem; height: 6.6rem; }

.p-hero__scroll{
  position: absolute; z-index: 1; right: 4.9rem; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
}
.p-hero__scroll-text{ font-size: 1.4rem; letter-spacing: .18em; color: var(--color-green); writing-mode: vertical-rl; }
.p-hero__scroll-line{ width: 1px; height: 13rem; background: var(--color-green); }

/* --------------------------------------------------------------------------
   7. お悩み（1005 – 1564px）
   -------------------------------------------------------------------------- */
.p-worry{ padding: 7.7rem 0 12.5rem; background: var(--color-bg-cream); }
.p-worry__title{ text-align: center; }

.p-worry__list{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; margin-top: 4rem; }
.c-worry-card{
  display: flex; flex-direction: column; align-items: center;
  height: 24.7rem; padding-top: 3.9rem;
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: .8rem;
}
/* アイコンは字面サイズがそれぞれ異なるため、上端を揃える枠で受ける */
.c-worry-card__icon{ display: flex; align-items: flex-start; justify-content: center; height: 8.6rem; }
.c-worry-card__icon img{ width: auto; height: auto; }
.c-worry-card__text{ margin-top: 3rem; font-size: 1.6rem; line-height: 1.9375; letter-spacing: .009em; text-align: center; }

/* --------------------------------------------------------------------------
   8. ABOUT（帯 1498–1603 / 本体 1564–2252px）
   -------------------------------------------------------------------------- */
.p-about{ position: relative; display: grid; grid-template-columns: 45.6% 54.4%; background: var(--color-bg-cream); }

.p-about__ribbon{
  position: absolute; top: -6.6rem; left: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 93.8rem; height: 10.5rem;
  transform: translateX(-50%) skewX(-20.4deg);
  background: var(--color-green); border-radius: 1.2rem;
}
.p-about__ribbon span{
  display: block; transform: skewX(20.4deg);
  font-family: var(--font-mincho); font-size: 4.4rem; font-weight: 500;
  line-height: 1; letter-spacing: 0; color: var(--color-white);
  /* 帯の斜め端に文字が触れないよう左右に余白（Illustrator 実測 左右約51px） */
  padding: 0 1rem;
}

.p-about__media img{ width: 100%; aspect-ratio: 684 / 688; object-fit: cover; object-position: center; }

.p-about__body{ position: relative; padding: 10.4rem 0 6rem 7.3rem; background: var(--color-bg-mint); overflow: hidden; }
.p-about__body-inner{ position: relative; z-index: 1; }
.p-about__title{ margin-top: .8rem; }
.p-about__text { margin-top: 2.3rem; font-size: 1.6rem; line-height: 2.5625; letter-spacing: .07em; }
.p-about__body .c-btn{ margin-top: 7.2rem; }
.p-about__deco{ position: absolute; top: -.7rem; left: 39.3rem; width: 49.53rem; pointer-events: none; }

/* --------------------------------------------------------------------------
   9. SERVICE（食品営業に特化しているからできること）※改修：画像上・3カラム
   Illustrator：カード幅412 / 画像412×270 / カード間32 / 番号42・タイトル30
   -------------------------------------------------------------------------- */
.p-service{ padding: 10.9rem 0 5rem; background: var(--color-bg-cream); }
.p-service__list{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3.2rem; row-gap: 5.5rem; margin-top: 7.1rem; }

/* 画像を上に置く縦カード */
.c-service-card{ display: flex; flex-direction: column; }
.c-service-card__media img{ width: 100%; aspect-ratio: 412 / 270; object-fit: cover; object-position: center; border-radius: 1.2rem; }
.c-service-card__body{ margin-top: 2.8rem; }
.c-service-card__label{ font-family: var(--font-label); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: .05em; color: var(--color-green); }
.c-service-card__title{
  display: flex; align-items: baseline; gap: 2rem; margin-top: .8rem;
  font-family: var(--font-mincho); font-size: 3rem; font-weight: 500;
  line-height: 1.2; letter-spacing: .02em; color: var(--color-green);
}
.c-service-card__num{ flex: none; font-size: 4.2rem; line-height: 1; letter-spacing: 0; }
.c-service-card__text-inner{ display: block; }
.c-service-card__text{ margin-top: 2.6rem; font-size: 1.6rem; line-height: 2.25; letter-spacing: .03em; }

/* CASE カード（導入事例）— 既存レイアウト維持（横並び：画像＋本文） */
.c-case-card{ display: grid; grid-template-columns: 31.3rem 1fr; column-gap: 2.1rem; }
.c-case-card__media img{ width: 31.3rem; aspect-ratio: 313 / 362; object-fit: cover; border-radius: 1.2rem; }
.c-case-card__label{ font-family: var(--font-label); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: .05em; color: var(--color-green); }
.c-case-card__text{ max-width: 28.4rem; margin-top: 2.6rem; font-size: 1.6rem; line-height: 2.25; letter-spacing: .03em; }

/* CASE カードの見出し（Illustrator 準拠：CASE を数字の中央上に、タイトルは数字の上端に揃える） */
.c-case-card__head{ display: flex; align-items: flex-start; gap: 1.4rem; margin-top: .4rem; }
.c-case-card__numblock{ flex: none; display: flex; flex-direction: column; align-items: center; }
.c-case-card__numblock .c-case-card__label{ margin-bottom: .2rem; }
.c-case-card__num{ font-size: 4.2rem; line-height: 1; letter-spacing: 0; color: var(--color-green); }
.c-case-card__title{
  font-family: var(--font-mincho); font-size: 2rem; font-weight: 500;
  line-height: 1.3; letter-spacing: .017em; color: var(--color-green);
}

/* --------------------------------------------------------------------------
   9b. こんな営業支援も行っています（TACTICAL SUPPORT）※新規追加
   Illustrator：4カラム＋縦罫 / アイコン中央 / 見出し明朝24 / 本文16(行送り36)
   -------------------------------------------------------------------------- */
.p-tactical{ padding: 9rem 0 11rem; background: var(--color-bg-cream); }
.p-tactical__list{ display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; margin-top: 6.1rem; }
.c-tactical{ position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 2rem; text-align: center; }
/* アイテム間の縦罫（2〜4番目の左端）※「選ばれる理由」と同じ手法 */
.c-tactical + .c-tactical::before{
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--color-green);
}
.c-tactical__icon{ display: flex; align-items: center; justify-content: center; height: 10.5rem; }
.c-tactical__icon img{ width: auto; height: auto; }
.c-tactical__title{ margin-top: 2.4rem; font-family: var(--font-mincho); font-size: 2.2rem; font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: var(--color-green); }
.c-tactical__text { margin-top: 1.9rem; font-size: 1.6rem; line-height: 2.25; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   9c. 実績訴求バンド（「こんな営業支援も行っています」の直下に配置）
   下端の左右は角丸なし＝上のみ角丸で、下の「選ばれる理由」へ接する
   -------------------------------------------------------------------------- */
.p-cta-band{ position: relative; padding: 6.4rem 7.2rem; background: var(--color-green); border-radius: 1.6rem 1.6rem 0 0; }
/* 文章とボタンを帯の右側へ寄せる（右の余白を詰める） */
.p-cta-band__body{ position: relative; z-index: 1; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; }
/* 本文は明朝体（Illustrator 準拠） */
.p-cta-band__text{ font-family: var(--font-mincho); font-size: 2rem; font-weight: 500; line-height: 1.9; letter-spacing: .03em; color: var(--color-white); }
.p-cta-band .c-btn{ margin-top: 4.5rem; }

/* --------------------------------------------------------------------------
   10. 選ばれる理由（3769 – 4511px）
   -------------------------------------------------------------------------- */
.p-strengths{ padding: 9.3rem 0 11.8rem; background: var(--color-bg-mint); }
.p-strengths__list{ display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6.1rem; }
.c-strength{ position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 2.8rem; text-align: center; }
/* 縦罫は実測 y4080–4351（高さ 272px） */
.c-strength + .c-strength::before{
  content: ""; position: absolute; left: 0; top: 4.6rem;
  width: 1px; height: 27.2rem; background: var(--color-green);
}
.c-strength__icon{ display: flex; align-items: center; justify-content: center; width: 14.5rem; height: 14.5rem; border-radius: 50%; background: var(--color-white); }
.c-strength__title{ margin-top: 2.2rem; font-family: var(--font-mincho); font-size: 2.6rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em; color: var(--color-green); }
.c-strength__text { margin-top: 1.9rem; font-size: 1.6rem; line-height: 2.25; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   11. 導入事例（4511 – 5924px）
   -------------------------------------------------------------------------- */
.p-case{ padding: 10.1rem 0 12.2rem; background: var(--color-bg-cream); }
.p-case__list{ display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 3.2rem; row-gap: 5.8rem; margin-top: 5.6rem; }
.c-case-card__title{ font-size: 2rem; }
.c-case-card__text { max-width: 28.1rem; }

/* 取引先ロゴ（1300 × 166px） */
.p-partners{ display: flex; align-items: center; justify-content: space-between; height: 16.6rem; margin-top: 7.5rem; padding: 0 8rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 1.6rem; }
.p-partners li{ flex: none; }

/* --------------------------------------------------------------------------
   12. 営業支援の流れ（5924 – 6621px）
   -------------------------------------------------------------------------- */
.p-flow{ padding: 9.5rem 0 14.7rem; background: var(--color-bg-mint); }
/* 円と円の間隔を固定（12.95rem＝実測129.5px）にして中央寄せ。
   space-between は幅で間隔が変わり矢印がずれるため、gap 固定にする。 */
.p-flow__list{ display: flex; justify-content: center; gap: 12.95rem; align-items: flex-start; margin-top: 6rem; }
/* min-width:0 が無いと、下の説明文（21rem）でステップ幅が円より広がり、
   矢印の基準（100%＝ステップ幅）がずれる。円幅14.5remを厳守させる。 */
.c-flow-step{ position: relative; flex: 0 0 14.5rem; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* スクロール演出が個々のステップに transform を掛けると
   矢印（絶対配置の疑似要素）がずれるため、ステップ側の演出は無効化して防御する。 */
.c-flow-step.js-fade{ opacity: 1 !important; transform: none !important; }

/* 矢印（太いシャフト41×6px＋ソリッドな矢じり15×20px・
   円の垂直中央＝アイコンと同じ高さ／円と円の間隔 12.95rem のちょうど中央） */
.c-flow-step:not(:last-child)::after{   /* シャフト */
  content: ""; position: absolute; top: 7.25rem; left: calc(100% + 3.7rem);
  width: 4.1rem; height: .6rem; background: var(--color-green);
  transform: translateY(-50%);
}
.c-flow-step:not(:last-child)::before{  /* ソリッドな矢じり */
  content: ""; position: absolute; z-index: 1; top: 7.25rem; left: calc(100% + 7.6rem);
  width: 0; height: 0;
  border-top: 1rem solid transparent; border-bottom: 1rem solid transparent;
  border-left: 1.6rem solid var(--color-green);
  transform: translateY(-50%);
}
.c-flow-step__icon{ display: flex; align-items: center; justify-content: center; width: 14.5rem; height: 14.5rem; border-radius: 50%; background: var(--color-white); }
.c-flow-step__num  { margin-top: 1.8rem; font-family: var(--font-mincho); font-size: 1.8rem; line-height: 1.2; letter-spacing: .08em; color: var(--color-green); }
.c-flow-step__title{ margin-top: .4rem; font-family: var(--font-mincho); font-size: 2.6rem; font-weight: 500; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; color: var(--color-green); }
.c-flow-step__text { width: 21rem; margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.625; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   13. NEWS & BLOG（6621 – 7521px）
   -------------------------------------------------------------------------- */
.p-news{ padding: 8.1rem 0 9.4rem; background: var(--color-bg-cream); }
.p-news__list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.8rem; margin-top: 7rem; }
.c-news-card__link:hover .c-news-card__media img{ transform: scale(1.04); }
.c-news-card__media{ overflow: hidden; border-radius: 1.2rem; }
.c-news-card__media img{ width: 100%; aspect-ratio: 394 / 276; object-fit: cover; transition: transform .5s ease; }
.c-news-card__title{ margin-top: 2.2rem; font-size: 1.6rem; font-weight: 500; line-height: 1.9375; letter-spacing: .06em; }
.c-news-card__meta{ display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-green); }
.c-news-card__cat{ display: grid; place-items: center; width: 6.4rem; height: 2.7rem; border-radius: 999px; background: var(--color-accent); font-family: var(--font-label); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--color-white); }
.c-news-card__date{ font-family: var(--font-label); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--color-green); }
.p-news__more{ display: flex; justify-content: center; margin-top: 6.8rem; }

/* --------------------------------------------------------------------------
   14. MESSAGE（7521 – 8725px）
   -------------------------------------------------------------------------- */
.p-message{ padding: 8.9rem 0 9.8rem; background: var(--color-white); }
.p-message__title{ margin-bottom: 7.4rem; letter-spacing: .073em; }
.p-message__row{ position: relative; display: grid; grid-template-columns: 65.1rem 1fr; column-gap: 3.8rem; width: 130.4rem; margin-inline: auto; }
.p-message__row--reverse{ grid-template-columns: 1fr 65.1rem; margin-top: 6.7rem; }
.p-message__media img{ width: 65.1rem; aspect-ratio: 651 / 401; object-fit: cover; border-radius: 1.2rem; }
.p-message__body{ position: relative; }
.p-message__body--right{ padding-top: 4.4rem; }
.p-message__body--left { padding-top: 4.1rem; }
.p-message__lead{ font-family: var(--font-mincho); font-size: 2.6rem; font-weight: 500; line-height: 1.3; letter-spacing: .05em; color: var(--color-green); }
.p-message__text{ position: relative; z-index: 1; margin-top: 2.4rem; font-size: 1.6rem; line-height: 2; letter-spacing: .03em; }
.p-message__text + .p-message__text{ margin-top: 3.2rem; }
.p-message__deco{ position: absolute; z-index: 0; pointer-events: none; }
.p-message__deco--mountain{ top: 8.5rem;  left: 28.8rem; width: 49.53rem; }
.p-message__deco--rice    { top: 22.5rem; left: 23.2rem; width: 41.15rem; }

/* --------------------------------------------------------------------------
   15. COMPANY（パネル 8725 – 9897px）
   -------------------------------------------------------------------------- */
.p-company{ background: var(--color-white); }
.p-company__panel{ position: relative; width: var(--inner); margin-inline: auto; padding-bottom: 9rem; background: var(--color-green); border-radius: 1.6rem; }
/* 人物写真は削除。メッセージは中央寄せ（下の COMPANY／会社概要 と揃える） */
.p-company__message{ padding: 8.7rem 4rem 7.5rem; text-align: center; }
.p-company__message-title{ font-family: var(--font-mincho); font-size: 2.8rem; font-weight: 500; line-height: 1.4; letter-spacing: .035em; color: var(--color-white); }
.p-company__message-text { margin-top: 2.4rem; font-size: 2rem; line-height: 1.9; letter-spacing: .02em; color: var(--color-white); }

/* 罫線は実測 x136–1360 ＝ パネル内側 36px */
.p-company__outline{ margin: 0 3.6rem; padding-top: 6.9rem; border-top: 1px solid var(--color-white); }
.p-company__title{ margin-top: 1.3rem; font-family: var(--font-mincho); font-size: 4.2rem; font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-align: center; color: var(--color-white); }

/* 表は実測 763px 幅・行送り 60px */
.c-company-table{ width: 76.3rem; margin: 5rem auto 0; color: var(--color-white); }
.c-company-table__row{ display: grid; grid-template-columns: 21rem 1fr; align-items: start; min-height: 6rem; padding: 2.6rem 0 .6rem 2.9rem; border-bottom: 1px solid var(--color-white); }
.c-company-table dt,
.c-company-table dd{ font-size: 1.8rem; line-height: 1.6; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   16. CONTACT（9895 – 10368px）
   -------------------------------------------------------------------------- */
.p-contact{ position: relative; height: 47.3rem; overflow: hidden; }
.p-contact__bg{ position: absolute; inset: 0; }
.p-contact__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.p-contact__inner{ position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-right: 19rem; }
.p-contact__title{ line-height: 1.8864; letter-spacing: .04em; }
.p-contact__actions{ display: flex; flex-direction: column; gap: 2.3rem; width: 40.8rem; }
.p-contact .c-btn--fill{ flex-direction: column; gap: 0; }
.p-contact__tel  { font-size: 3rem; line-height: 1.2; letter-spacing: .12em; }
.p-contact__hours{ font-family: var(--font-gothic); font-size: 1.4rem; line-height: 1.4; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   17. フッター（10368 – 11074px）
   -------------------------------------------------------------------------- */
.l-footer{ padding: 11rem 0 4.5rem; background: var(--color-green-dark); text-align: center; color: var(--color-white); }
.l-footer__catch{ font-family: var(--font-round); font-size: 3.4rem; font-weight: 500; line-height: 1.2; letter-spacing: .04em; }
.l-footer__logo { display: flex; justify-content: center; margin-top: 6.3rem; }
.l-footer__logo img{ width: 30.3rem; }
.l-footer__copy { margin-top: 11.8rem; font-family: var(--font-label); font-size: 1.4rem; font-weight: 700; line-height: 1; letter-spacing: .15em; }

/* --------------------------------------------------------------------------
   18. スクロールアニメーション
   -------------------------------------------------------------------------- */
.js-fade{ opacity: 0; transform: translateY(2.4rem); transition: opacity .8s ease, transform .8s ease; }
.js-fade.is-visible{ opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. アイコン／ロゴの表示サイズ
   Illustrator 上の字面サイズをそのまま指定（アイコンごとに大きさが異なるため）
   -------------------------------------------------------------------------- */
.p-worry__list    li:nth-child(1) .c-worry-card__icon img{ width:  7.9rem; }
.p-worry__list    li:nth-child(2) .c-worry-card__icon img{ width:  6.7rem; }
.p-worry__list    li:nth-child(3) .c-worry-card__icon img{ width:  8.4rem; }
.p-worry__list    li:nth-child(4) .c-worry-card__icon img{ width:  7.1rem; }
.p-worry__list    li:nth-child(5) .c-worry-card__icon img{ width:  8.4rem; }
.p-worry__list    li:nth-child(6) .c-worry-card__icon img{ width:  8.3rem; }

.p-strengths__list li:nth-child(1) .c-strength__icon img{ width: 10.5rem; }
.p-strengths__list li:nth-child(2) .c-strength__icon img{ width:  7.1rem; }
.p-strengths__list li:nth-child(3) .c-strength__icon img{ width:  8.2rem; }
.p-strengths__list li:nth-child(4) .c-strength__icon img{ width:  7.9rem; }

.p-flow__list li:nth-child(1) .c-flow-step__icon img{ width:  7.7rem; }
.p-flow__list li:nth-child(2) .c-flow-step__icon img{ width:  7.6rem; }
.p-flow__list li:nth-child(3) .c-flow-step__icon img{ width: 10.1rem; }
.p-flow__list li:nth-child(4) .c-flow-step__icon img{ width: 10.3rem; }
.p-flow__list li:nth-child(5) .c-flow-step__icon img{ width: 10.6rem; }

.p-tactical__list li:nth-child(1) .c-tactical__icon img{ width: 11.2rem; }
.p-tactical__list li:nth-child(2) .c-tactical__icon img{ width: 10.3rem; }
.p-tactical__list li:nth-child(3) .c-tactical__icon img{ width:  9.8rem; }
.p-tactical__list li:nth-child(4) .c-tactical__icon img{ width: 12.1rem; }

.p-partners li:nth-child(1) img{ width: 22.4rem; }
.p-partners li:nth-child(2) img{ width: 16.5rem; }
.p-partners li:nth-child(3) img{ width:  5.3rem; }
.p-partners li:nth-child(4) img{ width: 18.9rem; }
.p-partners li:nth-child(5) img{ width: 21.6rem; }

/* --------------------------------------------------------------------------
   20. ユーティリティ
   -------------------------------------------------------------------------- */
.is-hidden{ display: none !important; }              /* 取引先ロゴ一覧の一時非表示に使用 */

/* 電話番号リンク（会社概要テーブル内）は文字色を継承 */
.c-company-table a{ color: inherit; }