/* ================================================================
   目次（Ctrl+Fで見出し文字列を検索すると該当セクションへジャンプできます）
   ----------------------------------------------------------------
   リセット / FutureShopレイアウト上書き
   共通パーツ：m-feature-row（テキスト⇄写真）
   共通ボタン（m-btn--outline / m-btn--fill）

   命名規則：-wrapper / -container
     kinuyaBranding.css の hero-wrapper > hero-container 等と同じ考え方。
     -wrapper  : max-width:1200px; margin:0 auto; で中央寄せするだけの外枠
     -container: 実際のコンテンツ（見出し・本文・カード等）を入れる内側
     brand-wrapper/container・craftmanship-wrapper/container・
     kaikon-wrapper/container・blog-wrapper/container で使用。
   1. 45周年のお知らせ（sec-fw）
   2. わたしたちのこと（sec-about）
   3. 開発への想い（sec-passion）
   4. Brand（sec-brand）
   5. Craftmanship（sec-craftmanship）
   6. 犬山かいこ〜んプロジェクト（sec-kaikon）
   7. もっと、大醐のこと。（sec-blog）
   8. 毎日の「心地いい」を、これからも。（sec-closing）
   桑の実 装飾写真（m-deco-kuwa）
   スクロールフェードイン
   ================================================================ */

/* ============================
   リセット
============================ */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

#daigo-story * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  /* 外部CSS（ブログテーマ）がfont-feature-settings:"palt"を特定の要素に
     直接当ててくるケースがあり、#daigo-story側の継承だけでは打ち消せない
     ことがあるため、子孫要素すべてに直接指定して確実に無効化する */
  font-feature-settings: normal;
}

/* 本番サイトでブログテーマのmain.cssが `p { width:100%; display:block; ... }`
   をグローバルに当てており、その width:100% がflexbox内の<p>（ラベルや本文）の
   flex-basisとして使われてしまい、レイアウトが壊れる原因になっていた。
   #daigo-story側の詳細度で明示的に上書きして無効化する */
#daigo-story p {
  margin: 0;
  font-size: 15px;
  width: auto;
  display: block;
}

/* SP（767px以下）時だけ改行を入れたい箇所に使う共通パーツ。
   <br class="u-br-sp"> と組み合わせて使う */
#daigo-story .u-br-sp {
  display: none;
}

@media (max-width: 767px) {
  #daigo-story .u-br-sp {
    display: inline;
  }
}

/* 逆にSP以外（767px超＝PC・タブレット）でだけ改行を入れたい箇所に使う共通パーツ。
   <br class="u-br-pc"> と組み合わせて使う */
@media (max-width: 767px) {
  #daigo-story .u-br-pc {
    display: none;
  }
}

#daigo-story img {
  max-width: 100%;
  height: auto;
  display: block;
}

#daigo-story {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  color: #333333;
  letter-spacing: 0.05em;
  overflow: hidden;
  position: relative;
  /* 本番側の外部CSS（ブログテーマ）が font-feature-settings: "palt" を
     継承させてくることがあり、字詰め（プロポーショナル詰め）の有無で
     文字間隔の見え方がローカルと本番でズレる。明示的にnormalへ戻す */
  font-feature-settings: normal;
}

#daigo-story h2,
#daigo-story h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: normal;
  line-height: 1.7;
}

#daigo-story a {
  color: inherit;
}

/* max-width:1200pxに加えてwidth:calc(100% - 128px)を指定することで、
   1328px未満の画面でも左右64pxのマージンを死守する
   （1328px以上ではmax-widthが効くので見た目は変わらない。kinuyaBrandingの
   .m-feature-row と同じ考え方） */
#daigo-story .feature-wrapper {
  position: relative;
  max-width: 1200px;
  width: calc(100% - 128px);
  margin: 0 auto;
}

/* ============================
   FutureShop レイアウト上書き
============================ */
.fs-l-main {
  justify-content: center;
  max-width: unset;
  flex: unset;
  margin: unset;
  padding: 0;
}

.fs-l-main .fs-l-pageMain {
  max-width: 100%;
  flex: unset;
}

.fs-l-pageMain {
  flex: unset;
  max-width: unset;
}

/* ============================
   共通パーツ：m-feature-row（テキスト⇄写真）
   ----------------------------
   「1.45周年」「3.開発への想い」「6.かいこ〜んプロジェクト」で使い回す
   テキスト＋写真の横並び行。.m-feature-row--reverse を付けると
   写真とテキストの左右が入れ替わる（flex-direction: row-reverse）。
============================ */
#daigo-story .m-feature-row {
  display: flex;
  gap: 64px;
  text-align: left;
  padding: 96px 0;
}

#daigo-story .m-feature-row--reverse {
  flex-direction: row-reverse;
}

#daigo-story .m-feature-row__text {
  flex: 1;
}

#daigo-story .m-feature-row__photo {
  flex-shrink: 0;
  width: 45%;
  max-width: 544px;
}

#daigo-story .m-feature-row__heading {
  font-size: 28px;
  color: #0f5467;
  margin-bottom: 32px;
}

#daigo-story .m-feature-row__description {
  line-height: 2.2;
  letter-spacing: 0.05em;
  max-width: 480px;
}

/* 画像共通（m-ph）：画像が読み込まれるまでのダミー枠。
   .m-feature-row__photo 以外の場所（ブランドカードの写真など）でも
   このクラスを付けて aspect-ratio ごと個別に上書きして使う */
#daigo-story .m-ph__box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #e9e9e9;
  border-radius: 12px;
}

#daigo-story .m-feature-row__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 1160px) {
  #daigo-story .feature-wrapper {
    width: 100%;
    padding: 0 24px;
  }

  #daigo-story .m-feature-row__description {
    max-width: unset;
  }

  /* タブレット幅から縦並びに切り替える（767px基準だとタブレットで
     横並びのまま窮屈になるため、1160pxで先に縦積みにする） */
  #daigo-story .m-feature-row,
  #daigo-story .m-feature-row--reverse {
    flex-direction: column;
    gap: 32px;
  }

  #daigo-story .m-feature-row__photo {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {

  /* kinuyaBrandingの `#kinuya p { font-size: 14px; }` と同じ考え方。
     本文はSPで全体的に14pxへ縮小する（各classで個別指定はしない） */
  #daigo-story p {
    font-size: 14px;
  }

  #daigo-story .m-feature-row,
  #daigo-story .m-feature-row--reverse {
    padding: 0;
  }

  #daigo-story .m-feature-row__heading {
    font-size: 22px;
    margin-bottom: 32px;
  }

  /* SPではcalc(100% - 128px)の64px×2マージンが強すぎるので、
     width:100%に戻して24pxの固定パディングに差し替える
     （kinuyaBrandingの.m-feature-rowのSP上書きと同じ考え方） */
  #daigo-story .feature-wrapper {
    width: 100%;
    padding: 64px 24px;
  }
}

/* ============================
   共通ボタン
   ----------------------------
   .m-btn--outline : 白背景＋枠線、hoverで塗りつぶし（「その他の◯◯を見る」等）
   .m-btn--fill    : 最初からティールのグラデーション塗り（「活動の詳細を見る」等、camp上で目立たせたい強めのボタン）
============================ */
#daigo-story .m-btn {
  position: relative;
  /* 矢印(::after)をmargin-leftの固定値ではなく、テキストの長さに関わらず
     常に右端へ追従させるためflexboxで組む */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 354px;
  padding: 16px 40px 16px 48px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: start;
  overflow: hidden;
  z-index: 0;
  transition: color 0.35s ease;
}

#daigo-story .m-btn::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

#daigo-story .m-btn--outline {
  --btn-color: #333333;
  background: #fff;

  color: var(--btn-color);
}

#daigo-story .m-btn--outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: var(--btn-color);
  z-index: -1;
  transition: width 0.35s ease;
}

#daigo-story .m-btn--outline:hover::before,
#daigo-story .m-btn--outline:active::before {
  width: 100%;
}

#daigo-story .m-btn--outline:hover,
#daigo-story .m-btn--outline:active {
  color: #fff;
}

#daigo-story .m-btn--fill {
  background: linear-gradient(90deg, #80bcb9, #c1d8d7);
  color: #fff;
  border: none;
  transition: opacity 0.35s ease;
}

#daigo-story .m-btn--fill:hover,
#daigo-story .m-btn--fill:active {
  opacity: 0.8;
}

/* ============================
   1. 45周年のお知らせ（fw）
============================ */
#daigo-story .sec-fw {
  background: linear-gradient(180deg, #c1d8d7 0%, #ffffff 60%);
  padding: 96px 0 64px;
}

#daigo-story .sec-fw__photo {
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 767px) {
  #daigo-story .sec-fw {
    padding: 0;
  }

}

/* ============================
   2. わたしたちのこと（about）
============================ */
#daigo-story .sec-about {
  background: rgba(193, 216, 215, 0.5);
  padding-bottom: 96px;
}

/* 高さはカンプ実測（1440px幅で547px＝約38%）をvwで再現しつつ、
   min/maxで極端な画面幅でも縦横比が崩れすぎないようクランプしている */
#daigo-story .sec-about__visual {
  position: relative;
  width: 100%;
  height: 38vw;
  min-height: 320px;
  max-height: 547px;
  overflow: hidden;
}

#daigo-story .sec-about__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

#daigo-story .sec-about__visual-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

#daigo-story .sec-about__visual-lead {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

#daigo-story .sec-about__visual-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 33px;
  letter-spacing: 0.05em;
}

#daigo-story .sec-about__text {
  max-width: 660px;
  margin: 96px auto 0;
  padding: 0 24px;
  text-align: center;
}

#daigo-story .sec-about__description {
  color: #0f5467;
  line-height: 2.2;
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  #daigo-story .sec-about {
    padding-bottom: 64px;
  }

  #daigo-story .sec-about__visual-lead {
    font-size: 16px;
    margin-bottom: 8px;
  }

  #daigo-story .sec-about__visual-title {
    font-size: 22px;
  }

  #daigo-story .sec-about__text {
    margin-top: 64px;
  }
}

/* ============================
   3. 開発への想い（passion）
============================ */
#daigo-story .sec-passion {
  position: relative;
  background: #fff;
}

/* この写真だけカンプ実測（593:544）に近い比率。m-feature-row__photo imgの
   デフォルト（1:1、fwセクション用）を上書きしている */
#daigo-story .sec-passion .m-feature-row__photo img {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

/* ============================
   4. Brand（自社ブランド紹介）
============================ */
/* 左右のpaddingはbrand-wrapper側（width:calc）が担当するので
   ここは上下方向のみ */
#daigo-story .sec-brand {
  background: #f3f3e5;
  padding: 96px 0;
}

/* brand-wrapper：max-width:1200px + width:calc(100% - 128px)で
   1328px未満でも左右64pxのマージンを死守する外枠
   brand-container：実際のコンテンツ（現状は特別なスタイルなし。
   将来ここにgapなどレイアウト指定を足す時の置き場所として用意） */
#daigo-story .brand-wrapper {
  max-width: 1200px;
  width: calc(100% - 128px);
  margin: 0 auto;
}

#daigo-story .sec-brand__heading {
  font-size: 28px;
  color: #464646;
  margin-left: 56px;
}

#daigo-story .sec-brand__description-row {
  margin: 64px 56px 128px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  justify-content: space-between;
}

/* 「Brand」「Craftmanship」「Blog」の縦書きラベル。3セクションで見た目が
   同じなのでまとめて指定している。SPでも縦書き・左の罫線は崩さず維持する */
#daigo-story .sec-brand__label,
#daigo-story .sec-craftmanship__label,
#daigo-story .sec-blog__label {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: #333;
  padding-left: 16px;
  border-left: 1px solid #333;
  height: 160px;
  margin-top: 32px;
}

/* 見出しの左にラベルを並べるための複製（SP時のみ表示）。
   PCではheader側の複製を隠し、元々の位置（description-row側）を使う。
   SPではheader側を表示し、description-row側は隠して二重表示を防ぐ */
#daigo-story .sec-brand__header .sec-brand__label,
#daigo-story .sec-craftmanship__header .sec-craftmanship__label,
#daigo-story .sec-blog__header .sec-blog__label {
  display: none;
}

/* craftmanshipだけ1160px（タブレット）から切り替える。
   見出しの横に、縦書き＋棒はそのままのラベルを並べる（右側配置） */
@media (max-width: 1160px) {

  #daigo-story .sec-craftmanship__header {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 16px;
  }

  /* 見出しはflexの初期値だと自然な折り返し幅までしか広がらず、
     右側（実際は左寄せなので反対側）に余白が残るため、残りの幅いっぱいに広げる */
  #daigo-story .sec-craftmanship__header .sec-craftmanship__heading {
    flex: 1;
  }

  #daigo-story .sec-craftmanship__header .sec-craftmanship__label {
    display: block;
    margin-top: 0;
    font-size: 14px;
    padding-left: 0;
    padding-right: 4px;
    border-left: none;
    border-right: 1px solid #333;
  }

  #daigo-story .sec-craftmanship__description-row .sec-craftmanship__label {
    display: none;
  }
}

@media (max-width: 767px) {

  /* 見出しの横に、縦書き＋棒はそのままのラベルを並べる（左側配置） */
  #daigo-story .sec-brand__header,
  #daigo-story .sec-blog__header {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  /* 見出しはflexの初期値だと自然な折り返し幅までしか広がらず、
     右側に余白が残るため、残りの幅いっぱいに広げる */
  #daigo-story .sec-brand__header .sec-brand__heading,
  #daigo-story .sec-blog__header .sec-blog__heading {
    flex: 1;
  }

  #daigo-story .sec-brand__header .sec-brand__label,
  #daigo-story .sec-blog__header .sec-blog__label {
    display: block;
    margin-top: 0;
    font-size: 14px;
    padding-left: 4px;
  }

  #daigo-story .sec-brand__description-row .sec-brand__label,
  #daigo-story .sec-blog__description-row .sec-blog__label {
    display: none;
  }
}

#daigo-story .sec-brand__description {
  line-height: 2.2;
  letter-spacing: 0.05em;
  max-width: 620px;
}

#daigo-story .m-brand-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

#daigo-story .m-brand-card {
  background: #fff;
}

#daigo-story .m-brand-card__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

#daigo-story .m-brand-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#daigo-story .m-brand-card__logo {
  /* max-width: 140px;
  max-height: 72px; */
  width: auto;
  margin: 0 auto;
}

#daigo-story .sec-brand__btn-wrap,
#daigo-story .sec-blog__btn-wrap {
  margin: 64px 0 0;
  text-align: right;
}

#daigo-story .sec-blog__btn-wrap {
  margin: 64px auto 0;
  max-width: 1000px;
  margin-left: auto;
}

@media (max-width: 767px) {
  #daigo-story .m-brand-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #daigo-story .sec-brand {
    padding: 64px 24px;
  }

  #daigo-story .sec-brand__heading {
    font-size: 20px;
    margin: 0;
    margin-top: 64px;
  }

  #daigo-story .sec-brand__description-row {
    flex-direction: column;
    gap: 16px;
    margin: 32px 0;
  }

  #daigo-story .sec-brand__btn-wrap,
  #daigo-story .sec-blog__btn-wrap {
    text-align: center;
    margin: 32px 0 0;
  }

  #daigo-story .m-btn {
    width: 100%;
    max-width: 320px;
  }

  /* SPではcalc(100% - 128px)の64px×2マージンが強すぎるので、
     width:100%に戻してセクション側のpaddingに任せる */
  #daigo-story .brand-wrapper {
    width: 100%;
  }

  #daigo-story .sec-brand__description {
    margin-left: 0;
  }
}

/* ============================
   5. Craftmanship（ものづくり）
============================ */
/* 左右のpaddingはcraftmanship-wrapper側（width:calc）が担当するので
   ここは下方向のみ */
#daigo-story .sec-craftmanship {
  position: relative;
  background: #f3f3e5;
  padding: 0 0 96px;
}

/* craftmanship-wrapper：max-width:1200px + width:calc(100% - 128px)で
   1328px未満でも左右64pxのマージンを死守する外枠
   craftmanship-container：実際のコンテンツ（見出しブロック。背景写真は
   右寄せ表示のためwrapperの外にある） */
#daigo-story .craftmanship-wrapper {
  position: relative;
  max-width: 1200px;
  width: calc(100% - 128px);
  margin: 128px auto 64px;
}

/* カンプ実測（Figma node 97:30）：画像コンテナは1440px基準で
   left:134px, width:1306px → 右端の余白はゼロ（ぴったり右端まで）。
   単純に134/1440≒9.3%だけにすると、1440pxより少し狭い
   （1280px・1366pxなど、よく使われるノートPC解像度）ではカンプの134pxより
   余白が小さくなり「左に寄りすぎ」に見えてしまう。
   そこで margin-left: max(134px, 9.3%) とし、134pxを下限として保証。
   ・1440px以下のよく使われる解像度では常に134px（カンプ通り）
   ・1440pxを超えたら9.3%が上回り、そこから先は比例して増える
   （4K/Retinaでも際限なく増えすぎない）
   aspect-ratio・opacityもカンプ実測（1306:376 ≒ 3.47:1、不透明度0.2）に
   合わせている */
#daigo-story .sec-craftmanship__bg-img {
  padding-top: 64px;
}

/* ">" で直接の子だけに限定している。子孫セレクタ（スペース区切り）のままだと
   .sec-craftmanship__bg-img の中に置いた .m-deco-kuwa--d の<img>にも
   このopacityやaspect-ratioが誤って適用されてしまうため */
#daigo-story .sec-craftmanship__bg-img>img {
  margin-left: max(134px, 9.3%);
  width: calc(100% - max(134px, 9.3%));
  aspect-ratio: 1306 / 376;
  object-fit: cover;
  object-position: 100% 73%;
  opacity: 0.5;
}

/* sec-brandと同じ構造・数値。見出しは独立ブロック、
   description-rowはテキストとラベルの2つだけ（orderは使わない） */
#daigo-story .sec-craftmanship__heading {
  font-size: 28px;
  color: #464646;
  margin-left: 56px;
}

#daigo-story .sec-craftmanship__description-row {
  margin: 64px 56px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  justify-content: space-between;
}

#daigo-story .sec-craftmanship__description {
  line-height: 2.2;
  letter-spacing: 0.05em;
  max-width: 620px;
}

/* craftmanship-wrapperの外にあるので、こちらも自前でwidth:calcの
   安全マージンを持たせている（960pxはこの写真行専用の狭い上限） */
#daigo-story .sec-craftmanship__photos {
  max-width: 960px;
  width: calc(100% - 128px);
  margin: 0 auto;
  display: flex;
  gap: 24px;
}

#daigo-story .sec-craftmanship__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 1160px) {
  #daigo-story .sec-craftmanship__description-row {
    flex-wrap: wrap;
  }

  #daigo-story .sec-craftmanship__bg-img {
    padding: 0;
  }

  #daigo-story .craftmanship-wrapper {
    margin: 64px auto;
  }
}

@media (max-width: 767px) {
  #daigo-story .sec-craftmanship {
    padding: 0 24px 64px;
  }

  /* SPでは9.3%の左マージンよりセクション側の24pxパディングに
     揃えたいので解除する */
  #daigo-story .sec-craftmanship__bg-img>img {
    margin-left: 24px;
    width: 100%;
    aspect-ratio: 2/1;
  }

  #daigo-story .sec-craftmanship__heading {
    font-size: 20px;
    margin: 0;
    margin-top: 64px;
  }

  /* sec-brandのSP上書きと同じ扱い：縦積みにして縦書きラベルを解除する */
  #daigo-story .sec-craftmanship__description-row {
    flex-direction: column;
    gap: 16px;
    margin: 32px 0;
  }

  #daigo-story .sec-craftmanship__photos {
    flex-direction: column;
    width: 100%;
  }

  /* SPではcalc(100% - 128px)の64px×2マージンが強すぎるので、
     width:100%に戻してセクション側のpaddingに任せる */
  #daigo-story .craftmanship-wrapper {
    width: 100%;
    margin: 32px auto;
  }
}

/* ============================
   6. 犬山かいこ〜んプロジェクト（kaikon）
============================ */
#daigo-story .sec-kaikon {
  position: relative;
  background: rgba(193, 216, 215, 0.5);
}

/* sec-about__visualと同じ形：position:relativeにして、画像の上に
   見出し（sec-kaikon__header）を絶対配置で中央に重ねる。
   画像自体の高さ・幅（aspect-ratio 1440/544＝カンプ実測）は変更しない */
#daigo-story .sec-kaikon__bg-img {
  position: relative;
}

/* aspect-ratio 1440/544 はカンプ上のこの画像の実測サイズそのもの
   （＝カンプと同じ縦横比でトリミングされる） */
#daigo-story .sec-kaikon__bg-img img {
  width: 100%;
  aspect-ratio: 1440 / 544;
  object-fit: cover;
  opacity: 0.2;
  background: #d9d9d9;
}

@media (max-width: 767px) {
  #daigo-story .sec-kaikon__bg-img img {
    aspect-ratio: unset;
  }
}

/* kaikon-wrapper：max-width:1200px + width:calc(100% - 128px)で
   1328px未満でも左右64pxのマージンを死守する外枠
   （sec-kaikonはセクション自体に左右paddingがないため、この安全策が必須）
   kaikon-container：実際のコンテンツ。左右はwrapperが担当するので上下のみ */
#daigo-story .kaikon-wrapper {
  position: relative;
  max-width: 1200px;
  width: calc(100% - 128px);
  margin: 0 auto;
}

#daigo-story .kaikon-container {
  padding: 64px 0;
}

#daigo-story .sec-kaikon__header {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0f5467;
}

#daigo-story .sec-kaikon__heading {
  font-size: 32px;
  margin-bottom: 8px;
}

#daigo-story .sec-kaikon__subheading {
  font-family: "Shippori Mincho", serif;
  font-size: 23px;
  opacity: 0.8;
}

#daigo-story .sec-kaikon .m-feature-row__photo {
  width: 55%;
  max-width: 645px;
}

#daigo-story .sec-kaikon .m-feature-row__photo img {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* セクション幅いっぱいに広げるためのbreakoutテクニック。
   親（kaikon-container）がmax-width:1200pxで中央寄せされていても、
   left:50%+margin-left:-50vwでビューポート幅いっぱいに広げられる。

   スクロールは transform+@keyframes ではなく、JS(index.html末尾)で
   scrollLeft を少しずつ増やすネイティブスクロール方式にしている。
   transformアニメーションだと、複製した後半（初期状態では画面外）が
   ブラウザによってGPU合成の都合で描画されないことがあり、
   will-changeを付けても解決しないケースがあったため。
   scrollLeftによる素直なスクロールは通常のスクロール領域と同じ
   描画経路を使うので、この種の描画漏れが起きにくい。
   HTML側で同じ5枚をもう一度複製して並べており、scrollLeftが
   複製前5枚ぶん（＝scrollWidthの半分）に達したら0に戻すことで
   途切れなくループしているように見せている（詳細はindex.html参照）。
   overflow-x: hidden でネイティブのスクロールバー・ユーザーによる
   手動スクロールを止め、常にJS側だけがscrollLeftを制御する */
#daigo-story .m-kaikon-gallery {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 32px;
  margin-bottom: 80px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  /* scrollLeftの更新をメインスレッドの描画に頼らずGPU合成させ、
     カクつきを軽減するためのヒント */
  will-change: scroll-position;
}

/* 1枚あたりの幅。複製後は全10枚なのでこの割合×2＝画面何枚分見えるか、
   に対応する（20%なら5枚分見える計算） */
#daigo-story .m-kaikon-gallery__item {
  flex: 0 0 20%;
  padding: 0 4.5px;
}

#daigo-story .m-kaikon-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* btn-wrapをquote-wrapの右端に、上下中央揃えで重ねて配置するための基準。
   z-index:0で独立したスタッキングコンテキストを作り、
   下の::before（オフセットした緑の枠線）を確実にこの中に収める */
#daigo-story .sec-kaikon__quote-wrap {
  position: relative;
  z-index: 0;
  max-width: 800px;
  margin: 0 auto 64px;
  padding: 72px 96px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  text-align: center;
}

/* 白背景の左斜め上にずらして緑の枠線を重ねる装飾。
   quote-wrap自体には枠線を付けず、この疑似要素だけに持たせることで
   右下側は白背景に隠れ、左上側だけ枠線が覗く見た目になる */
#daigo-story .sec-kaikon__quote-wrap::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 100%;
  height: 100%;
  border: 1px solid #0f5467;
  border-radius: 10px;
  z-index: -1;
}

#daigo-story .sec-kaikon__quote {
  color: #0f5467;
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: start;
}

/* quote-wrapの右端に、ボタンの中心が境界線に重なるように配置 */
#daigo-story .sec-kaikon__btn-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(25%, -50%);
}

/* 次のセクションへの区切りアイコン（Figma node-id 116-41）。
   縦棒＋右側だけの短いフックで、矢印の左側のストロークがない形 */
#daigo-story .m-scroll-down-icon {
  display: block;
  width: 10px;
  height: 95px;
  margin: 48px auto 0;
}

@media (max-width: 1160px) {

  /* 見える枚数を5→3枚相当に */
  #daigo-story .m-kaikon-gallery__item {
    flex-basis: 33.333%;
  }
}

@media (max-width: 767px) {

  /* SPは見える枚数を2枚相当に */
  #daigo-story .m-kaikon-gallery__item {
    flex-basis: 50%;
  }

  /* SPではcalc(100% - 128px)の64px×2マージンが強すぎるので、
     width:100%に戻してcontainer側の24pxパディングに任せる */
  #daigo-story .kaikon-wrapper {
    width: 100%;
  }

  #daigo-story .kaikon-container {
    padding: 64px 24px;
  }

  #daigo-story .sec-kaikon .m-feature-row__photo {
    width: 100%;
  }

  /* SPでは右端への重なり配置をやめ、本文の下に通常配置で並べる */
  #daigo-story .sec-kaikon__btn-wrap {
    position: static;
    transform: none;
    margin-top: 24px;
  }

  #daigo-story .sec-kaikon__quote-wrap {
    padding: 0;
    margin: 0;
    background: unset;
  }

  #daigo-story .sec-kaikon__heading {
    font-size: 22px;
  }

  #daigo-story .sec-kaikon__subheading {
    font-size: 16px;
  }

  #daigo-story .m-scroll-down-icon {
    margin: 0 auto;
    display: none;
  }

  #daigo-story .sec-kaikon__quote {
    text-align: center;
  }

  #daigo-story .sec-kaikon__quote-wrap::before {
    display: none;
  }
}

/* ============================
   7. もっと、大醐のこと。（blog）
============================ */
/* 左右のpaddingはblog-wrapper側（width:calc）が担当するので
   ここは上下方向のみ */
#daigo-story .sec-blog {
  background: rgba(193, 216, 215, 0.5);
  padding: 96px 0;
}

/* blog-wrapper：max-width:1200px + width:calc(100% - 128px)で
   1328px未満でも左右64pxのマージンを死守する外枠
   blog-container：実際のコンテンツ */
#daigo-story .blog-wrapper {
  max-width: 1200px;
  width: calc(100% - 128px);
  margin: 0 auto;
}

#daigo-story .sec-blog__heading {
  font-size: 28px;
  color: #0f5467;
}

#daigo-story .sec-blog__description-row {
  margin: 64px 0;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

#daigo-story .sec-blog__description {
  line-height: 2.2;
  letter-spacing: 0.05em;
  max-width: 620px;
  margin-left: 15%;
}

#daigo-story .m-blog-list {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

#daigo-story .m-blog-card:nth-child(2) {
  margin-top: 50%;
}

/* カードの角から覗く円形の装飾。z-index:0でスタッキングコンテキストを作り、
   ::beforeのz-index:-1をカードの中（写真の下）に確実に収める */
#daigo-story .m-blog-card {
  position: relative;
  z-index: 0;
}

#daigo-story .m-blog-card::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #c1d8d7;
  z-index: -1;
}

/* 1つ目：左下に（サイズはここで個別指定） */
#daigo-story .m-blog-card:nth-child(1)::before {
  width: 200px;
  height: 200px;
  left: -20%;
  top: 55%;
}

/* 2つ目：右上に（サイズはここで個別指定） */
#daigo-story .m-blog-card:nth-child(2)::before {
  width: 96px;
  height: 96px;
  right: -15%;
  top: -15%;
  z-index: 1;
}

#daigo-story .m-blog-card__photo {
  display: block;
  margin-bottom: 12px;
  overflow: hidden;
}

#daigo-story .m-blog-card__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.35s ease;
}

#daigo-story .m-blog-card__photo:hover img,
#daigo-story .m-blog-card__photo:active img {
  transform: scale(1.05);
}

#daigo-story .m-blog-card__title {
  display: block;
  color: #0f5467;
  /* <a>タグはfont-sizeを明示していないと本番側main.cssの
     グローバル指定(14px)を継承してしまい、letter-spacing(em指定)の
     実際のpx値がローカルと本番でズレる。他の本文と揃えて明示しておく */
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-decoration: underline;
  font-feature-settings: normal;
}

@media (max-width: 767px) {
  #daigo-story .sec-blog {
    padding: 64px 24px;
  }

  #daigo-story .sec-blog__heading {
    font-size: 20px;
    margin-top: 64px;
  }

  #daigo-story .sec-blog__description-row {
    flex-direction: column;
    gap: 16px;
    margin: 32px 0;
  }

  #daigo-story .m-blog-list {
    grid-template-columns: 1fr;
  }

  /* SPではcalc(100% - 128px)の64px×2マージンが強すぎるので、
     width:100%に戻してセクション側のpaddingに任せる */
  #daigo-story .blog-wrapper {
    width: 100%;
  }

  #daigo-story .m-blog-card:nth-child(2) {
    margin-top: 32px;
  }

  #daigo-story .sec-blog__description {
    margin-left: 0;
  }

  #daigo-story .m-blog-card:nth-child(1)::before {
    top: -5%;
  }

  #daigo-story .m-blog-card:nth-child(2)::before {
    width: 64px;
    height: 64px;
  }
}

/* ============================
   8. 毎日の「心地いい」を、これからも。（closing）
============================ */
#daigo-story .sec-closing {
  position: relative;
  background: #fff;
  padding: 128px 24px 128px;
  text-align: center;
  overflow: hidden;
}

#daigo-story .sec-closing__bg-img {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

#daigo-story .sec-closing__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#daigo-story .sec-closing__inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

#daigo-story .sec-closing__heading {
  font-size: 28px;
  color: #464646;
  margin-bottom: 48px;
}

#daigo-story .sec-closing__description {
  line-height: 2.2;
  letter-spacing: 0.05em;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  #daigo-story .sec-closing {
    padding: 64px 24px;
  }

  #daigo-story .sec-closing__heading {
    font-size: 22px;
    margin-bottom: 32px;
  }

  #daigo-story .sec-closing__description {
    margin-bottom: 32px;
  }
}

/* ============================
   桑の実 装飾写真
   ----------------------------
   position: absolute で配置する純粋な装飾（クリック不可 pointer-events: none）。
   基準となる親要素は viewport 幅の<section>ではなく、1200px幅の
   -wrapper（feature-wrapper／craftmanship-wrapper／kaikon-wrapper、
   いずれも position: relative 済み）。そのため left:0 / right:8% 等は
   「コンテンツ幅1200pxの端」を基準にした値で、画面幅が1200pxを超えても
   viewportの端まで流れていかない。
   位置・回転角はカンプの実測値を目安にした概算で、ピクセル完全一致ではない。
   SPデザインは未支給だが、タブレット・SPでも装飾として表示し続ける
   （%/vw指定のため画面幅が狭くなるほど絶対値としては小さく縮む）。
============================ */
#daigo-story .m-deco-kuwa {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

#daigo-story .m-deco-kuwa img {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

#daigo-story .m-deco-kuwa--a {
  width: 220px;
  top: -128px;
  left: 0;
  transform: rotate(0.5deg);
}

#daigo-story .m-deco-kuwa--b {
  width: 20%;
  top: -7%;
  right: -5vw;
  transform: scaleX(-1);
}

#daigo-story .m-deco-kuwa--c {
  width: 14%;
  bottom: -4%;
  left: -2vw;
  transform: rotate(1.2deg);
}

#daigo-story .m-deco-kuwa--d {
  width: 10%;
  top: -2%;
  left: 8%;
  transform: rotate(18.9deg);
}

@media (max-width: 1160px) {
  #daigo-story .m-deco-kuwa--a {
    width: 120px;
    top: -40px;
  }

  #daigo-story .m-deco-kuwa--c {
    width: 20%;
    bottom: -5%;
    left: 0vw;
  }

  #daigo-story .m-deco-kuwa--d {
    top: -5%;
    width: 15%;
  }
}

@media (max-width: 767px) {
  #daigo-story .m-deco-kuwa--b {
    width: 22%;
    top: -2%;
    right: -3vw;
  }

  #daigo-story .m-deco-kuwa--d {
    top: -2%;
  }

  #daigo-story .m-deco-kuwa--c {
    width: 25%;
    bottom: -3%;
    left: 75vw;
  }
}

/* ============================================================
   スクロールフェードイン
   各セクションの見出し・写真行・カード単位でふわっと表示。
   JS側（index.htmlの末尾のscript）がIntersectionObserverで
   ビューポートに入った要素に is-inview を付与する仕組み。
   新しく要素を追加した場合は、
     1. ここの2つのセレクターリストに追加
     2. index.htmlのscript内のquerySelectorAllにも同じクラスを追加
   の両方をしないとフェードインしない（見えないままになる）ので注意。
   ============================================================ */
#daigo-story .m-feature-row,
#daigo-story .sec-about__visual-text,
#daigo-story .sec-about__text,
#daigo-story .sec-brand__header,
#daigo-story .sec-brand__description-row,
#daigo-story .m-brand-card,
#daigo-story .sec-craftmanship__description-row,
#daigo-story .sec-craftmanship__photo,
#daigo-story .sec-kaikon__header,
#daigo-story .sec-kaikon__quote-wrap,
#daigo-story .sec-blog__header,
#daigo-story .m-blog-card,
#daigo-story .sec-closing__inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

#daigo-story .m-feature-row.is-inview,
#daigo-story .sec-about__visual-text.is-inview,
#daigo-story .sec-about__text.is-inview,
#daigo-story .sec-brand__header.is-inview,
#daigo-story .sec-brand__description-row.is-inview,
#daigo-story .m-brand-card.is-inview,
#daigo-story .sec-craftmanship__description-row.is-inview,
#daigo-story .sec-craftmanship__photo.is-inview,
#daigo-story .sec-kaikon__header.is-inview,
#daigo-story .sec-kaikon__quote-wrap.is-inview,
#daigo-story .sec-blog__header.is-inview,
#daigo-story .m-blog-card.is-inview,
#daigo-story .sec-closing__inner.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* カード4枚を少しずつ時間差で表示（ずらしすぎない程度に0.08s刻み） */
#daigo-story .m-brand-card:nth-child(2) {
  transition-delay: 0.08s;
}

#daigo-story .m-brand-card:nth-child(3) {
  transition-delay: 0.16s;
}

#daigo-story .m-brand-card:nth-child(4) {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {

  #daigo-story .m-feature-row,
  #daigo-story .sec-about__visual-text,
  #daigo-story .sec-about__text,
  #daigo-story .sec-brand__header,
  #daigo-story .sec-brand__description-row,
  #daigo-story .m-brand-card,
  #daigo-story .sec-craftmanship__description-row,
  #daigo-story .sec-craftmanship__photo,
  #daigo-story .sec-kaikon__header,
  #daigo-story .sec-kaikon__quote-wrap,
  #daigo-story .sec-blog__header,
  #daigo-story .m-blog-card,
  #daigo-story .sec-closing__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 印刷・PDF化対応：スクロール連動のIntersectionObserverは印刷時に発火しないため、
   is-inviewが付かないまま opacity:0 で真っ白に出力されてしまう。
   印刷時は常に表示状態にする */
@media print {

  #daigo-story .m-feature-row,
  #daigo-story .sec-about__visual-text,
  #daigo-story .sec-about__text,
  #daigo-story .sec-brand__header,
  #daigo-story .sec-brand__description-row,
  #daigo-story .m-brand-card,
  #daigo-story .sec-craftmanship__description-row,
  #daigo-story .sec-craftmanship__photo,
  #daigo-story .sec-kaikon__header,
  #daigo-story .sec-kaikon__quote-wrap,
  #daigo-story .sec-blog__header,
  #daigo-story .m-blog-card,
  #daigo-story .sec-closing__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}