/* ====================================================================
   リセット & 変数
==================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 1rem = 10px になる指定。以降のフォントサイズはこの前提でrem指定する
     (例: 1.6rem = 16px) */
  font-size: 62.5%;
  scroll-behavior: smooth;
  /* bodyのoverflow-x:hidden(900px以下側で指定)だけだとブラウザによって
     ビューポートの横スクロールを抑えきれないことがあるため、htmlにも
     保険で指定しておく */
  overflow-x: hidden;
}

body,
h1, h2, h3, h4,
p, ul, ol, dl, dd,
figure {
  margin: 0;
  padding: 0;
}

/* 見出し類もbodyのfont-size(1.6rem)をそのまま継承させる。
   大きくしたい見出し・小さくしたいテキストだけ、
   個別に font-size を指定して上書きする。 */
h1, h2, h3, h4 {
  font-size: inherit;
}

/* list-style:noneだけだとSafariのVoiceOverがリストとして
   読み上げなくなるため、role="list"を付けたリストにのみ適用する
   (該当のul/olにはrole="list"を付与している) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.6;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:root {
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --content-max: 1400px;
  --recipe-max: 1100px;
}

/* 色クラス一覧(文字色専用。クラス名がそのまま色の名前なので
   どれを付ければどの色になるか、パッと見て分かる。
   色を変えたくなったら、このカラーコードを直接書き換えればOK) */
.wakame-green        { color: #3a9421; }
.spring-green        { color: #4ba632; }
.spring-green-light  { color: #dbedd6; }
.summer-teal         { color: #03a6a6; }
.summer-teal-light   { color: #d0ebeb; }
.autumn-orange       { color: #f29f05; }
.autumn-orange-light { color: #faeacb; }
.autumn-orange-dark  { color: #ea820a; }
.winter-gray         { color: #918a7c; }
.winter-gray-light   { color: #e6e5e2; }
.wakame-red          { color: #e86165; }

/* PC幅(1200px以上)専用/SP幅(900px以下)専用の出し分けクラス。
   1200px超900px以下の間(タブレット幅)は、pc-on/sp-onどちらも
   非表示になる(下部のレスポンシブ用メディアクエリを参照)。
   .tab-onはタブレット幅(900px超1200px以下)専用。900px超なら常に表示
   したい場合は.pc-onと2つ併記して使う想定(.tab-on単体では900px以下・
   1200px超での指定を持たないため)。 */
.pc-on {
  display: block;
}

.sp-on {
  display: none;
}

.sp-on-mini {
  display: none;
}

.site-footer__tel-fax-break {
  display: none;
}

body {
  font-family: var(--font-base);
  color: #242424;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
  /* letter-spacing: 0.05rem; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* 見出しの小さな波下線飾り */
.section-label {
  position: relative;
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: 0.25em;
  margin-bottom: 8px;
}

/* RECIPEラベルだけに付けるイラスト(へら・泡立て器) */
.section-label--recipe {
  padding: 0 46px;
}

.section-label--recipe::before,
.section-label--recipe::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}

.section-label--recipe::before {
  left: 0;
  background-image: url("../images/common/illust-spatula.svg");
}

.section-label--recipe::after {
  right: -5px;
  background-image: url("../images/common/illust-whisk.svg");
}

.section-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 2.8rem;
  color: #242424;
  letter-spacing: 0.14em;
}

/* 「もっとレシピを知りたい方へ」見出しの右にイラストを配置。
   ::afterは見出し下線の波画像で使っているため::beforeを使う */
.section-title--orange::before {
  content: "";
  position: absolute;
  top: 13%;
  left: 120%;
  margin-left: 12px;
  width: 130px;
  height: 93px;
  background-image: url("../images/common/illust-more.png");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}

.how-to-dialog__title::after {
  content: "";
  display: block;
  width: 33px;
  height: 6px;
  margin: 10px auto 0;
  background-image: url("../images/common/wave-green.png");
  background-repeat: no-repeat;
  background-size: contain;
}

/* セクション見出し下の波線画像。色ごとにPNGを差し替える */
.section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 8px;
  margin: 15px auto 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.section-title--green::after  { background-image: url("../images/common/wave-green.png"); }
.section-title--teal::after   { background-image: url("../images/common/wave-teal.png"); margin-left: 0; }
.section-title--orange::after { background-image: url("../images/common/wave-orange.png"); }

/* ====================================================================
   ヘッダー(.site-header)
==================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 240px;
  z-index: 20;
  /* メインビジュアルの写真の上に乗るため、文字が読みやすいように
     上から下へ白→透明のグラデーションを敷いている */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.site-header__inner {
  margin: 0 auto;
  height: 110px;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-header__logo {
  position: absolute;
  top: 30px;
  left: 30px;
}

.site-header__logo img {
  width: 260px;
  height: auto;
}

/* ---- PC用ヘッダーメニュー ----
   画面幅1200px超で表示する横並びナビ。画面幅1200px以下では下部の
   レスポンシブ用メディアクエリでdisplay: noneにし、代わりに
   SP用ハンバーガーメニュー(.sp-nav-toggle/.sp-nav)を表示する。 */
.pc-nav__list {
  display: flex;
  align-items: center;
  gap: 48px;
}

.pc-nav__item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.8rem;
  color: #242424;
}

.pc-nav__icon {
  display: inline-block;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.pc-nav__icon--search { width: 30px; }
.pc-nav__icon--wakame { width: 34px; }
.pc-nav__icon--book   { width: 32px; }

/* ---- SP用ハンバーガーメニュー ----
   ボタン・背景オーバーレイ・ドロップダウンいずれも.site-headerの外にある
   独立した要素。デスクトップでは非表示にしておき、画面幅1200px以下の
   メディアクエリ側でだけ表示する。 */
.sp-nav__item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.8rem;
}

/* position:fixedでビューポート基準にすることで、スクロールしても
   画面上から20px・画面右端にぴったりくっついたまま追従する。 */
.sp-nav-toggle {
  display: none;
  position: fixed;
  top: 10px;
  right: 0;
  z-index: 25;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 65px;
  height: 50px;
  padding: 0 18px;
  background: #4ba632;
  border-radius: 6px 0 0 6px;
}

.sp-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* 開いている状態は背景を白、線を春の緑に反転し、×字に変形させる */
.sp-nav-toggle.is-active {
  background: #fff;
}

.sp-nav-toggle.is-active span {
  background: #4ba632;
  height: 3px;
}

.sp-nav-toggle.is-active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.sp-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.sp-nav-toggle.is-active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* メニューを開いている間だけ背景に重ねる半透明レイヤー。クリックで
   閉じられるよう実要素にしている(疑似要素だとJSでクリックを拾えないため)。
   表示/非表示は.is-openのみで制御し、位置・色・重なり順は
   画面幅1200px以下のメディアクエリ側で指定する。 */
.sp-nav-overlay {
  display: none;
}

/* ドロップダウン本体、および中に置くロゴは画面幅1200px以下の
   メディアクエリ側でまとめて指定する(デフォルトでは.sp-navごと
   display: noneのため、ここでの追加指定は不要)。 */
.sp-nav {
  display: none;
}

/* ====================================================================
   メインビジュアル(.main-visual)
==================================================================== */
/* 画面幅1600px未満では、js/script.js側で.main-visualにwidth:1600px+
   transform: scale()をインラインで指定し、まるごと縮小表示する。
   このラッパー自体は普段はheight:auto・overflow:visibleで
   .main-visualの自然な高さ・はみ出しにそのまま従うが、縮小中は
   js側でheightを縮小後のサイズに、overflow: hiddenを明示的に指定し、
   余った分を隠すことで、下の要素(#recipeなど)が縮んだ分だけ
   一緒に上がってくるようにしている(overflowを常時hiddenにすると、
   縮小していない画面幅1600px以上でも写真がラッパーの自然な高さより
   下にはみ出す分まで切れてしまうため、常時hiddenにはしていない)。 */
.main-visual-scale-wrap {
  overflow: visible;
}

.main-visual {
  position: relative;
  padding: 280px 0 0;
}

/* 波線デコレーション(test.htmlで検証したCSS版)
   細い波線3本を「三」の字状に重ねたSVGタイルを横にスライドさせ、
   平行四辺形にclip-pathしている。継ぎ目なく無限ループする。
   タイル内部に波10個分を1本の連続したパスとして描いているため、
   継ぎ目(CSSのrepeat-xによる区切り)は10波に1回しか出ない。 */
.wave-deco {
  width: 164px;
  height: 80px;
  background-repeat: repeat-x;
  background-size: 250px 80px;
  clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);
  animation: wave-deco-slide 16s linear infinite;
}

@keyframes wave-deco-slide {
  from { background-position-x: 0; }
  to   { background-position-x: 250px; }
}

.wave-deco--green {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64'%3E%3Cpath d='M0 8 Q5.5 2 11 8 T22 8 T33 8 T44 8 T55 8 T66 8 T77 8 T88 8 T99 8 T110 8 T121 8 T132 8 T143 8 T154 8 T165 8 T176 8 T187 8 T198 8 T209 8 T220 8' stroke='%234ba632' stroke-width='2' fill='none'/%3E%3Cpath d='M0 32 Q5.5 26 11 32 T22 32 T33 32 T44 32 T55 32 T66 32 T77 32 T88 32 T99 32 T110 32 T121 32 T132 32 T143 32 T154 32 T165 32 T176 32 T187 32 T198 32 T209 32 T220 32' stroke='%234ba632' stroke-width='2' fill='none'/%3E%3Cpath d='M0 56 Q5.5 50 11 56 T22 56 T33 56 T44 56 T55 56 T66 56 T77 56 T88 56 T99 56 T110 56 T121 56 T132 56 T143 56 T154 56 T165 56 T176 56 T187 56 T198 56 T209 56 T220 56' stroke='%234ba632' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.wave-deco--teal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64'%3E%3Cpath d='M0 8 Q5.5 2 11 8 T22 8 T33 8 T44 8 T55 8 T66 8 T77 8 T88 8 T99 8 T110 8 T121 8 T132 8 T143 8 T154 8 T165 8 T176 8 T187 8 T198 8 T209 8 T220 8' stroke='%2303a6a6' stroke-width='2' fill='none'/%3E%3Cpath d='M0 32 Q5.5 26 11 32 T22 32 T33 32 T44 32 T55 32 T66 32 T77 32 T88 32 T99 32 T110 32 T121 32 T132 32 T143 32 T154 32 T165 32 T176 32 T187 32 T198 32 T209 32 T220 32' stroke='%2303a6a6' stroke-width='2' fill='none'/%3E%3Cpath d='M0 56 Q5.5 50 11 56 T22 56 T33 56 T44 56 T55 56 T66 56 T77 56 T88 56 T99 56 T110 56 T121 56 T132 56 T143 56 T154 56 T165 56 T176 56 T187 56 T198 56 T209 56 T220 56' stroke='%2303a6a6' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.wave-deco--orange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64'%3E%3Cpath d='M0 8 Q5.5 2 11 8 T22 8 T33 8 T44 8 T55 8 T66 8 T77 8 T88 8 T99 8 T110 8 T121 8 T132 8 T143 8 T154 8 T165 8 T176 8 T187 8 T198 8 T209 8 T220 8' stroke='%23f29f05' stroke-width='2' fill='none'/%3E%3Cpath d='M0 32 Q5.5 26 11 32 T22 32 T33 32 T44 32 T55 32 T66 32 T77 32 T88 32 T99 32 T110 32 T121 32 T132 32 T143 32 T154 32 T165 32 T176 32 T187 32 T198 32 T209 32 T220 32' stroke='%23f29f05' stroke-width='2' fill='none'/%3E%3Cpath d='M0 56 Q5.5 50 11 56 T22 56 T33 56 T44 56 T55 56 T66 56 T77 56 T88 56 T99 56 T110 56 T121 56 T132 56 T143 56 T154 56 T165 56 T176 56 T187 56 T198 56 T209 56 T220 56' stroke='%23f29f05' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* メインビジュアルに置く波線。.main-visual-dotと同じく
   .main-visual-photo-frameが基準。フレーム自体がtop:-400pxされているため、
   画面上の実際の位置はtopに+400pxした値になる。leftは0〜700px程度の
   範囲内なら画面右にはみ出さない。 */
.main-visual-wave {
  position: absolute;
  z-index: 3;
}

.main-visual-wave--1 { top: 590px; left: 80px; mix-blend-mode: multiply;}
.main-visual-wave--2 { bottom: 120px; right: 360px; mix-blend-mode: multiply;}

/* SP幅(画面幅900px以下)専用の水玉・波線。.main-visual(position:relative)
   を基準に配置する。位置は画面幅900px以下のメディアクエリ側で
   まとめて指定する(HTML側のコメントも参照)。 */
.main-visual-sp-dot {
  position: absolute;
  pointer-events: none;
}

.main-visual-sp-wave {
  position: absolute;
  pointer-events: none;
}

.main-visual-inner {
  position: relative;
  z-index: 2;
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 50px;
}

.main-visual-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 5.6rem;
  line-height: 1.4;
  color: #3a9421;
  max-width: 480px;
}

.main-visual-catch {
  margin-top: 35px;
  font-weight: 700;
  font-size: 2.7rem;
  color: #f29f05;
  max-width: 480px;
}

.main-visual-lead {
  margin-top: 35px;
  max-width: 480px;
  color: #242424;
  font-weight: 700;
  line-height: 2.2;
  font-size: 1.75rem;
}

.main-visual-scroll {
  display: block;
  width: 90px;
  margin-top: 56px;
}

.main-visual-scroll img {
  width: 100%;
}

/* 写真クリッピング(既存の機能実装 / 位置をレイアウトに合わせて調整)
   画面右上に大きくはみ出す形で配置。
   横長の見た目はclip-path側のパス自体に焼き込んであるため、
   .main-visual-photo-clipのaspect-ratioは必ず1/1(正方形)にすること。
   横長の箱(3/2など)で引き伸ばすと、アニメーション時に
   模様が伸縮して見えてしまう(回転と非等方な拡大縮小が干渉するため)。
   ※ clip-path/overflow:hiddenは.main-visual-photo-clip側にだけ
     かけている。.main-visual-photo-frame自体はただの位置決め用で、
     水玉模様(.main-visual-dot)はここを親にすることで、花形に
     切り抜かれずにそのまま表示できる。 */
.main-visual-photo-frame {
  position: absolute;
  top: -400px;
  right: -240px;
  width: min(96vw, 1426px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
}

.main-visual-photo-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: url(#main-visual-blob-clip);
}

/* クリップ形状(花)の座標自体を、枠の0〜100%を絶対に超えない大きさ
   (X:1.0%〜99.0%, Y:15.9%〜84.1%)で計算し直してあるため、
   写真は枠ぴったり(100%)で敷いても先端まで届く。
   scale(1.05)は保険程度の気持ち程度のズーム。 */
.main-visual-photo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transform-origin: center;
  background-color: #d9d9d9;
}

/* 水玉模様の装飾。.main-visual-photo-frameが基準(position:absolute)なので、
   写真の位置がずれても水玉は一緒についてくる。
   花形クリップの影響は受けない(clip-pathは.main-visual-photo-clip側にしか
   かけていないため)。
   main-visual-dot--a1だけは.site-header(z-index:20)より手前に出す
   必要があるため、例外的に.main-visual-front-frameに入れている。 */
.main-visual-dot {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* main-visual-dot--a1専用フレーム。.main-visual-photo-frameと同じ
   位置基準(top/right/width/aspect-ratio)にすることで、要素自体の
   見た目の位置は変えずに、.site-header(z-index:20)より手前に出す */
.main-visual-front-frame {
  position: absolute;
  top: -400px;
  right: -240px;
  width: min(96vw, 1426px);
  aspect-ratio: 1 / 1;
  z-index: 21;
  pointer-events: none;
}

.main-visual-dot--a1 { top: 460px; left: -100px; width: 240px; opacity: 0.35; mix-blend-mode: multiply;}
.main-visual-dot--a2 { bottom: 250px; left: 30px; width: 70px; opacity: 0.3; mix-blend-mode: multiply;}
.main-visual-dot--b1 { bottom: 300px; left: 110px; width: 170px; opacity: 0.2; mix-blend-mode: multiply; z-index: -10;}
.main-visual-dot--b2 { bottom: 80px; right: 140px; width: 320px; opacity: 0.2; mix-blend-mode: multiply; z-index: -10;}
.main-visual-dot--d1 { bottom: 140px; right: 420px; width: 190px; opacity: 0.3; mix-blend-mode: multiply; z-index: -10;}

/* .main-visual-innerを基準にした水玉 */
.main-visual-dot--inner-b1 { top: -75px;  left: -40px;  width: 150px; opacity: 0.15; mix-blend-mode: multiply; z-index: -10;}
.main-visual-dot--inner-c1 { bottom: -280px; left: -180px;  width: 330px; opacity: 0.25; mix-blend-mode: multiply; z-index: -10;}
.main-visual-dot--inner-d1 { top: 135px; left: 420px; width: 60px; opacity: 0.25; mix-blend-mode: multiply; z-index: -10;}

/* ====================================================================
   季節のわかめレシピ(.recipe-section)
==================================================================== */
.recipe-section {
  position: relative;
  padding: 80px 0 140px;
}

/* 画面幅1600px未満(js/script.js側で.main-visualを縮小し始めるのと同じ
   閾値=MV_DESIGN_WIDTH)でだけ、.main-visual-scale-wrapの下端に乗り重なる
   よう引き上げる。recipe-section自体は背景を持たないので、後ろの
   main-visualの写真・装飾が透けて見える。
   1600px以上では.main-visualを一切縮小しないため、この引き上げも
   無効にしている。 */
@media screen and (max-width:1600px) {
  .recipe-section {
    margin-top: -240px;
  }
}

.recipe-section__heading {
  text-align: center;
  margin-bottom: 40px;
}

.recipe-panel-wrap {
  position: relative;
  /* box-sizing: border-boxのため、ただpadding: 0 20pxを足すだけだと
     中身の実質幅がrecipe-max(1100px)より40px分狭くなり、タブや
     カードのレイアウトが窮屈になってしまう。padding分をmax-widthに
     加算することで、中身の実質幅は1100pxのまま、画面端からは
     20pxずつ離れるようにしている */
  max-width: calc(var(--recipe-max) + 40px);
  margin: 0 auto;
  padding: 0 10px;
}

/* .recipe-panel-wrapの周りに散らす水玉模様専用のレイヤー。
   高さを固定pxにしているのがポイント。.recipe-section自体を基準に
   %指定すると、タブ切り替えで中身の高さが変わるたびに(JSで
   .recipe-panel-viewportの高さをアニメーションさせているため)
   水玉の位置も一緒にズレてしまう。このレイヤーだけ高さを固定して
   基準を安定させることで、中は今まで通り%で配置できるようにしている。 */
.recipe-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2400px;
  pointer-events: none;
  z-index: -10;
}

.recipe-dot {
  position: absolute;
}

.recipe-dot--a1 { top: 11%; right: 10%; width: 190px; opacity: 0.2; }
.recipe-dot--d1 { top: 28%; left: 9%; width: 340px; opacity: 0.2; }
.recipe-dot--c1 { top: 40%; right: 5%; width: 150px; opacity: 0.3; }
.recipe-dot--b1 { top: 46%; right: 13%; width: 80px; opacity: 0.2; }
.recipe-dot--b2 { top: 62%; left: 4%; width: 240px; opacity: 0.15; }
.recipe-dot--a2 { bottom: 15%; right: 5%; width: 340px; opacity: 0.2; }
.recipe-dot--d2 { top: 92%; left: 10%; width: 190px; opacity: 0.2; }


/* ---- 季節タブ ---- */
.season-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-left: 26px;
  /* 選択中タブのpaddingアニメーション中でも行自体の高さが変わらないよう
     固定する(これが無いと、タブが伸び縮みするたびに下の枠が上下に動く)。
     選択中タブの最大の高さ(padding-top22+padding-bottom17+文字の行の高さ)
     に合わせてある。 */
  height: 70px;
  /* タブボタンの無い透明な余白部分が、右にはみ出している
     .how-to-badge(z-indexがこの帯より低い.recipe-panel-frame内)への
     クリックを奪ってしまうため、行全体はクリック透過にし、
     ボタン本体にだけ.season-tabで個別にクリックを戻している */
  pointer-events: none;
}

.season-tab {
  width: 200px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px 26px 0 0;
  font-weight: 700;
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 4px;
  transition: height 0.15s ease;
  pointer-events: auto;
}

.season-tab.is-spring   { background: #4ba632; }
.season-tab.is-summer   { background: #03a6a6; }
.season-tab.is-autumn   { background: #f29f05; }
.season-tab.is-winter   { background: #918a7c; }

.season-tab[aria-selected="true"] {
  height: 75px;
  margin-bottom: -4px;
}

.season-tab__label {
  display: inline-block;
}

.season-tab[aria-selected="true"] .season-tab__label {
  transform: translateY(-8px);
}

.season-tab.is-spring[aria-selected="true"] {
  background: #dbedd6; 
  color: #4ba632; 
  border-top: solid 4px #4ba632; 
  border-left: solid 4px #4ba632; 
  border-right: solid 4px #4ba632;
}
.season-tab.is-summer[aria-selected="true"] { 
  background: #d0ebeb; 
  color: #03a6a6; 
  border-top: solid 4px #03a6a6; 
  border-left: solid 4px #03a6a6; 
  border-right: solid 4px #03a6a6; 
}
.season-tab.is-autumn[aria-selected="true"] { 
  background: #faeacb; 
  color: #f29f05; 
  border-top: solid 4px #f29f05; 
  border-left: solid 4px #f29f05; 
  border-right: solid 4px #f29f05; 
}
.season-tab.is-winter[aria-selected="true"] { 
  background: #e6e5e2; 
  color: #918a7c; 
  border-top: solid 4px #918a7c; 
  border-left: solid 4px #918a7c; 
  border-right: solid 4px #918a7c; 
}

/* ---- パネル枠(白い角丸カード) ----
   枠線の色は選択中の季節タブに合わせて切り替える */
.recipe-panel-frame {
  position: relative;
  z-index: 1;
  background: #dbedd6;
  border: 4px solid #4ba632;
  border-radius: 20px;
  padding: 25px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* パネル部分だけを包むラッパー。高さの変化をここでアニメーションさせる
   (枠全体にoverflow:hiddenをかけると、上にはみ出す.how-to-badgeまで
   切れてしまうため、パネル部分だけに絞っている)。
   高さの数値はjs/script.js側で都度計算してセットしている。 */
.recipe-panel-viewport {
  overflow: hidden;
  transition: height 0.3s ease;
}

.recipe-panel-wrap[data-season="summer"] .recipe-panel-frame {
  border-color: #03a6a6;
  background: #d0ebeb;
}

.recipe-panel-wrap[data-season="autumn"] .recipe-panel-frame {
  border-color: #f29f05;
  background: #faeacb;
}

.recipe-panel-wrap[data-season="winter"] .recipe-panel-frame {
  border-color: #918a7c;
  background: #e6e5e2;
}

.recipe-panel {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* [hidden]属性が付いたパネルは必ず非表示にする
   (上の.recipe-panelでdisplay:flexを指定しているため、
    このルールが無いとhidden属性が効かず全季節が表示されたままになる) */
.recipe-panel[hidden] {
  display: none;
}

/* 戻し方バッジ */
.how-to-badge {
  position: absolute;
  top: -90px;
  right: 40px;
  z-index: 3;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: #3a9421;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.how-to-badge__check {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.how-to-badge__label {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 4px;
}

.how-to-badge__tail {
  position: absolute;
  bottom: -4px;
  left: 30px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* PC幅の.how-to-badge(丸型)のSP版バナー。デスクトップでは非表示にしておき、
   画面幅1200px以下のメディアクエリ側でだけ表示する
   (.how-to-badgeを非表示にしているのと同じ切り替え)。 */
.how-to-banner {
  display: none;
  margin: 0 auto 30px;
  width: fit-content;
}

/* .how-to-banner__labelが外枠(緑の四角背景)、その中に
   .how-to-banner__checkが小さい四角バッジとして入る構造 */
.how-to-banner__label {
  display: flex;
  align-items: center;
  gap: 18px;
  /* 上下左は0にして.how-to-banner__checkがぴったりくっつくようにし、
     右側だけ余白を持たせる */
  padding: 0 28px 0 0;
  background: #3A9421;
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  white-space: nowrap;
  border-radius: 40px;
}

.how-to-banner__check {
  /* labelの上下いっぱいまで自分の高さを伸ばす */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background: #77B865;
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-radius: 40px;
}

/* ---- レシピカード ----
   「写真+タイトルもろもろ」「材料+作り方」の2つのフレックスボックス
   (.recipe-card__top / .recipe-card__columns)を縦に並べる。
   それぞれの中で幅450px上限のボックス2つをspace-betweenで振り分け、
   450px×2が入りきらない幅になったら自然に折り返して縦積みになる。 */
.recipe-card {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
}

.recipe-card__top,
.recipe-card__columns {
  display: flex;
  /* flex-wrap:wrapだと、折り返し判定がmax-width:450pxいっぱいまで
     広がろうとした状態(写真450px+タイトル450px=900px)で行われるため、
     コンテナ幅がそれを下回った瞬間に(縮む前に)いきなり折り返ってしまう。
     画面幅900px超では折り返さず、各ボックスがそのまま細く縮んでいく
     ようにし、900px以下のモバイル用スタック表示でだけ元に戻す
     (下部のレスポンシブ用メディアクエリを参照)。 */
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  /* justify-content: space-betweenだけだと、余白が無くなった時に
     隣り合う2つのボックスがぴったりくっついてしまうため、
     最低限のgapを確保しておく */
  gap: 30px;
}

.recipe-card__media {
  width: 100%;
  min-width: 220px;
  max-width: 450px;
  overflow: hidden;
  border-radius: 15px;
  background-color: #d9d9d9;
}

.recipe-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 15px;
  background-color: #d9d9d9;
}

/* PC幅(横並び)では、写真をposition:absoluteにして.recipe-card__mediaの
   コンテンツ由来の高さをなくし、align-items: stretchで隣の.recipe-card__body
   の高さに揃える。はみ出た分はobject-fit: coverでトリミングされる。
   (画面幅900px以下では下部のレスポンシブ用メディアクエリでposition: staticに戻す)
   min-heightは、幅が足りず.recipe-card__mediaだけ単独で改行された時の保険。
   中身がposition:absoluteだと自身の高さが0になり、stretchで揃える相手
   (.recipe-card__body)が同じ行にいない場合、写真ごと高さ0で消えてしまうため、
   最低限の高さを確保している。 */
.recipe-card__media {
  position: relative;
  min-height: 260px;
}

.recipe-card__media img {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* タイトル・説明・調理時間・メモをまとめて1つのボックスにする */
.recipe-card__body {
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
}

.recipe-card__title {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 2.4rem;
  color: #242424;
  margin-bottom: 15px;
  margin-left: -1rem;
  line-height: 1.5;
  letter-spacing: 0.1rem;
}

.recipe-card__desc {
  color: #777777;
  margin-bottom: 25px;
  font-family: "Noto Sans JP", sans-serif;
}

.recipe-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 35px;
}

.meta-badge {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: #4ba632;
  border: solid 2px #4ba632;
}

.meta-badge--energy {
  background: #f29f05;
  border: solid 2px #f29f05;
}

.meta-badge__label {
  display: flex;
  align-items: center;
  padding: 0px 12px 0px 8px;
}

.meta-badge .meta-badge__value {
  color: #4ba632;
}

.meta-badge--energy .meta-badge__value {
  color: #f29f05;
}

.meta-badge__label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/common/icon-clock.svg");
}

.meta-badge--energy .meta-badge__label::before {
  background-image: url("../images/common/icon-fire.svg");
}

.meta-badge__value {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 900;
}

.recipe-card__ingredients {
  width: 100%;
  max-width: 450px;
}

.recipe-card__steps {
  width: 100%;
  max-width: 450px;
  font-size: 1.5rem;
}

.recipe-card__ingredients h4,
.recipe-card__steps h4 {
  font-weight: 900;
  color: #4ba632;
  border-bottom: 2px solid #4ba632;
  padding-bottom: 6px;
  font-size: 1.8rem;
}

/* 見出し・材料リストの●の色を、選択中の季節タブに合わせて切り替える
   (.recipe-panel-frameの枠線色切り替えと同じ[data-season]パターン) */
.recipe-panel-wrap[data-season="summer"] .recipe-card__ingredients h4,
.recipe-panel-wrap[data-season="summer"] .recipe-card__steps h4 {
  color: #03a6a6;
  border-bottom-color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .recipe-card__ingredients h4,
.recipe-panel-wrap[data-season="autumn"] .recipe-card__steps h4 {
  color: #f29f05;
  border-bottom-color: #f29f05;
}

.recipe-panel-wrap[data-season="winter"] .recipe-card__ingredients h4,
.recipe-panel-wrap[data-season="winter"] .recipe-card__steps h4 {
  color: #918a7c;
  border-bottom-color: #918a7c;
}

.recipe-card__ingredients h4:not(:first-child) {
  margin-top: 30px;
}

.ingredient-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid #4ba63280;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
}

.ingredient-list li:last-child {
  border-bottom-width: 2px;
  border-bottom-color: #4ba632;
}

.recipe-panel-wrap[data-season="summer"] .ingredient-list li {
  border-bottom-color: #03a6a680;
}

.recipe-panel-wrap[data-season="summer"] .ingredient-list li:last-child {
  border-bottom-color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .ingredient-list li {
  border-bottom-color: #f29f0580;
}

.recipe-panel-wrap[data-season="autumn"] .ingredient-list li:last-child {
  border-bottom-color: #f29f05;
}

.recipe-panel-wrap[data-season="winter"] .ingredient-list li {
  border-bottom-color: #918a7c80;
}

.recipe-panel-wrap[data-season="winter"] .ingredient-list li:last-child {
  border-bottom-color: #918a7c;
}

.ingredient-list__name::before {
  content: "●";
  margin-right: 4px;
  color: #4ba632;
  font-size: 1.5rem;
}

.recipe-panel-wrap[data-season="summer"] .ingredient-list__name::before {
  color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .ingredient-list__name::before {
  color: #f29f05;
}

.recipe-panel-wrap[data-season="winter"] .ingredient-list__name::before {
  color: #918a7c;
}

.ingredient-list__name {
  flex-shrink: 1;
  max-width: 245px;
  padding-left: 2rem;
  text-indent: -2rem;
}

.ingredient-list__amount {
  flex-shrink: 0;
  max-width: 160px;
  text-align: right;
}

.step-list li {
  display: flex;
  gap: 12px;
  padding: 16px 0px 16px 16px;
  border-bottom: 1px solid #4ba63280;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2;
  align-items: flex-start;
}

.step-list li:last-child {
  border-bottom-width: 2px;
  border-bottom-color: #4ba632;
}

.recipe-panel-wrap[data-season="summer"] .step-list li {
  border-bottom-color: #03a6a680;
}

.recipe-panel-wrap[data-season="summer"] .step-list li:last-child {
  border-bottom-color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .step-list li {
  border-bottom-color: #f29f0580;
}

.recipe-panel-wrap[data-season="autumn"] .step-list li:last-child {
  border-bottom-color: #f29f05;
}

.recipe-panel-wrap[data-season="winter"] .step-list li {
  border-bottom-color: #918a7c80;
}

.recipe-panel-wrap[data-season="winter"] .step-list li:last-child {
  border-bottom-color: #918a7c;
}

.step-list__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ba632;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.5;
  margin-right: 12px;
  letter-spacing: -0.8rem;
}

.recipe-panel-wrap[data-season="summer"] .step-list__num {
  color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .step-list__num {
  color: #f29f05;
}

.recipe-panel-wrap[data-season="winter"] .step-list__num {
  color: #918a7c;
}

.step-list__ref-num {
  color: #4ba632;
  font-weight: 900;
  font-size: 1.6rem;
  vertical-align: -0.1rem;
}

.recipe-panel-wrap[data-season="summer"] .step-list__ref-num {
  color: #03a6a6;
}

.recipe-panel-wrap[data-season="autumn"] .step-list__ref-num {
  color: #ea820a;
}

.recipe-panel-wrap[data-season="winter"] .step-list__ref-num {
  color: #918a7c;
}

.recipe-card__memo {
  position: relative;
  padding: 45px 42px 30px 42px;
  background: #edebe7;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.2;
}

.recipe-card__memo-holes {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
}

.recipe-card__memo-hole {
  width: 14px;
  height: 23px;
}

/* ====================================================================
   もっとレシピを知りたい方へ(.more-section)
==================================================================== */
.more-section {
  position: relative;
  padding: 110px 50px 120px 50px;
  text-align: center;
}

/* #moreの背景に散らすオレンジの水玉。.more-section(position:relative)が基準。
   DOM順で.more-section__heading/.more-listより前に置き、
   z-indexは指定していないので自然に後ろに回り込む。 */
.more-dot {
  position: absolute;
  pointer-events: none;
}

.more-dot--1 { top: -50px; right: -50px;  width: 220px; opacity: 0.2; z-index: -10;}
.more-dot--2 { bottom: -160px; left: -2%; width: 300px; opacity: 0.2; z-index: -10;}

.more-section__heading {
  margin-bottom: 60px;
}

.more-list {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.more-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid var(--more-color, #4ba632);
  text-align: left;
  background: #fff;
}

.more-card__media {
  aspect-ratio: 280 / 180;
  background-color: #d9d9d9;
}

.more-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.more-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 18px;
  font-weight: 900;
  color: #242424;
  text-align: center;
  position: relative;
}

.more-card__label::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 12px;
  background-image: var(--more-arrow, url("../images/common/arrow-green.svg"));
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 40px;
  padding: 14px 80px 14px 45px;
  border-radius: 9999px;
  font-weight: 900;
  font-size: 2rem;
  margin-left: -5px;
}

.btn--primary {
  position: relative;
  background: #0768A4;
  color: #fff;
}

/* 矢印 */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 8px;
  height: 12px;
  transform: translateY(-50%);
  background: url("../images/common/arrow-white.svg") no-repeat center / contain;
}

/* ====================================================================
   ABOUT(.about-section)
==================================================================== */
.about-section {
  position: relative;
  z-index: 0;
  display: flex;
  min-height: 590px;
  background-color: #fff;
}

/* background-imageに直接opacityはかけられない(中の写真・文字まで
   薄くなってしまう)ため、背景専用の::before疑似要素に分離している */
.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/common/bg-blue.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

/* 写真の左端を波形にクリッピングし、その波形を下から上へ
   ゆっくりスクロールさせる。波の境界線から右側を塗りつぶした帯を
   mask-imageにして縦方向(repeat-y)に繰り返し、mask-positionを
   1周期分(920px)上へアニメーションさせている(.wave-decoの
   横スクロール版と同じ考え方)。
   %指定でのストレッチだと環境によって縮尺がずれることがあるため、
   タイルは実寸px(2000px幅、コンテナ幅より確実に広い)で作り、
   mask-sizeも%を使わずpx固定にしている。
   波の頂点はQを単独で繋げず、T(前の制御点を反射する滑らかな
   二次ベジェ)を使って角ができないようにしている。 */
.about-section__media {
  flex: 1 1 60%;
  background-color: #d9d9d9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='920'%3E%3Cpath d='M140 0 Q50 115 140 230 T140 460 T140 690 T140 920 L2000 920 L2000 0 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='920'%3E%3Cpath d='M140 0 Q50 115 140 230 T140 460 T140 690 T140 920 L2000 920 L2000 0 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-size: 2000px 920px;
  mask-size: 2000px 920px;
  -webkit-mask-position: left top;
  mask-position: left top;
  animation: about-media-wave 18s linear infinite;
}

@keyframes about-media-wave {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 0 -920px; mask-position: 0 -920px; }
}

.about-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-section__body {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0 40px 60px;
}

.about-section__group {
  position: relative;
}

.about-section__group::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -60px;
  width: 80px;
  height: 82px;
  background-image: url("../images/common/illust-about.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.about-section__text {
  margin-top: 25px;
  line-height: 2.2;
}

/* .wave-decoをabout-sectionでも使う(main-visual-waveと同じ考え方)。
   .about-section(position:relative)が基準 */
.about-section-wave {
  position: absolute;
  pointer-events: none;
}

.about-section-wave--1 { bottom: -54px; left: 40px; transform: scaleX(-1);}

/* ====================================================================
   フッター(.site-footer)
==================================================================== */
.site-footer-wrap {
  position: relative;
}

/* site-footerと同じ波クリップの下敷き用の共通スタイル。
   高さ・margin-bottom・色・mask-positionは色ごとの修飾クラス側で指定する。
   margin-bottomで自身の下側をfooter(または前面側のレイヤー)の下に隠し、
   height + margin-bottom の分だけ上にはみ出して見える。 */
.site-footer-underlay {
  margin-bottom: -60px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='2000'%3E%3Cpath d='M0 2000 L0 40 Q60 10 120 40 T240 40 L240 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='2000'%3E%3Cpath d='M0 2000 L0 40 Q60 10 120 40 T240 40 L240 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 240px 2000px;
  mask-size: 240px 2000px;
}

/* 一番奥(青)。height - margin-bottomの差分だけ上にはみ出す。
   波はmask-imageのタイル幅(240px)分だけmask-position-xをアニメーションさせ、
   継ぎ目なく左から右へ流れて見せる(.wave-decoと同じ考え方)。 */
.site-footer-underlay--blue {
  height: 86px;
  background-image: url("../images/common/bg-blue.png");
  -webkit-mask-position: 46px top;
  mask-position: 46px top;
  animation: site-footer-underlay-blue-wave-slide 5s linear infinite;
}

@keyframes site-footer-underlay-blue-wave-slide {
  from { -webkit-mask-position: 46px top; mask-position: 46px top; }
  to   { -webkit-mask-position: 286px top; mask-position: 286px top; }
}

/* 青の手前・緑の奥(白)。緑より少し上、青よりは低い位置にはみ出す。
   波はタイル幅(240px)分だけmask-position-xを逆方向にアニメーションさせ、
   継ぎ目なく右から左へ流れて見せる(.site-footerの緑の波と同じ方向)。 */
.site-footer-underlay--white {
  height: 74px;
  background-color: #fff;
  -webkit-mask-position: -40px top;
  mask-position: -37px top;
  animation: site-footer-underlay-white-wave-slide 5s linear infinite;
}

@keyframes site-footer-underlay-white-wave-slide {
  from { -webkit-mask-position: -40px top; mask-position: -37px top; }
  to   { -webkit-mask-position: -280px top; mask-position: -277px top; }
}

/* 上辺を波形にクリッピングする。
   波の境界線から下側を塗りつぶした帯をmask-imageにして横方向
   (repeat-x)に繰り返している。高さ2000pxは実際のフッターの高さより
   確実に大きいので、波の下側は常に全部塗りつぶされた状態になる
   (.about-section__mediaの波クリッピングと同じ考え方)。
   波はタイル幅(240px)分だけmask-position-xを逆方向にアニメーションさせ、
   継ぎ目なく右から左へ流れて見せる(.site-footer-underlay--blueと同じ
   考え方。あちらは左から右なのでこちらは符号を逆にしている)。 */
.site-footer {
  position: relative;
  padding: 140px 40px 35px;
  text-align: center;
  background-image: url("../images/common/bg-green.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='2000'%3E%3Cpath d='M0 2000 L0 40 Q60 10 120 40 T240 40 L240 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='2000'%3E%3Cpath d='M0 2000 L0 40 Q60 10 120 40 T240 40 L240 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 240px 2000px;
  mask-size: 240px 2000px;
  -webkit-mask-position: top left;
  mask-position: top left;
  animation: site-footer-green-wave-slide 5s linear infinite;
}

@keyframes site-footer-green-wave-slide {
  from { -webkit-mask-position: 0 top; mask-position: 0 top; }
  to   { -webkit-mask-position: -240px top; mask-position: -240px top; }
}

/* .wave-decoをfooterでも使う(main-visual-wave/about-section-waveと
   同じ考え方)。.site-footer自身は波形にmask-imageでクリッピングして
   いるため、その中に置くと上にはみ出す表現ができない。
   .site-footer-wrap(position:relative)を基準に、footerの外側の
   兄弟要素として置くことで、波の上端から少しはみ出せるようにしている。 */
.site-footer-wave {
  position: absolute;
  pointer-events: none;
}

.site-footer-wave--1 { top: 10px; right: 60px; }

/* 中の画像がdisplay:blockのため、<a>をdisplay:inlineのままにしておくと
   ブロック化してフッター幅いっぱいがクリック判定になってしまう。
   inline-blockにして画像サイズにぴったり合わせる */
.site-footer__logo-link {
  display: inline-block;
  margin-bottom: 45px;
}

.site-footer__logo {
  width: 260px;
  height: auto;
}

.site-footer__address {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2;
}

.site-footer__copyright {
  margin-top: 30px;
  font-size: 1.3rem;
  color: #777777;
  letter-spacing: 0.15rem;
}

/* ====================================================================
   TOPへ戻る(.back-to-top)
   一定量スクロールするまでは下に隠しておき、
   .is-visible が付いたら下からスルッとスライドインさせる。
   表示切り替えはjs/script.js側でスクロール位置を見て制御している。
==================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 30px;
  z-index: 30;
  width: 80px;
  height: 80px;
  opacity: 0;
  transform: translateY(100px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top img {
  display: block;
  width: 80px;
  height: 80px;
}

/* ====================================================================
   塩蔵わかめの戻し方 ポップアップ(.how-to-dialog)
==================================================================== */

/* dialog要素自体を認識しない/認識が不完全なブラウザ(Safari 15.4未満)では
   UA標準の「open属性が無ければ非表示」が効かず常時表示されてしまうため、
   明示的に指定しておく(対応ブラウザでは元々そう振る舞うため無害) */
dialog:not([open]) {
  display: none;
}

.how-to-dialog {
  /* 白背景はブラウザのdialog標準スタイル(UAスタイルシート)頼みだったため、
     dialogを正しく認識しない古いSafariだと透明になっていた。明示指定する */
  background-color: #fff;
  border: none;
  border-radius: 24px;
  padding: 0;
  width: min(90vw, 700px);
  max-height: 85vh;
  overflow: auto;
}

.how-to-dialog::backdrop {
  background: rgba(74, 64, 51, 0.5);
}

/* showModal()が無いブラウザ向けのフォールバック(js/script.js側で
   open属性と一緒にこのクラスを付け外しする)。ネイティブのモーダル表示
   (中央寄せ・最前面化・::backdrop)を自前で再現する。
   top/bottom両方+margin:autoで中央寄せする方法も試したが、
   height:autoのまま画面いっぱいに縦ストレッチしてしまう環境があったため、
   top/leftのみ指定してtransformで動かす(高さはコンテンツに応じて
   auto=shrink-to-fitのままになる)方式にしている */
.how-to-dialog.is-fallback-open {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  z-index: 1001;
  /* アニメーション終了後(0.2s経過後)はkeyframes側のtransformが外れ、
     このプロパティの値に戻るため、ここにも中央寄せ分を指定しておく
     (無いとtop:50%/left:50%=箱の左上角の位置がそのまま表示位置になり、
     画面右下にズレて見える) */
  transform: translate(-50%, -50%);
}

.how-to-dialog-fallback-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(74, 64, 51, 0.5);
  z-index: 1000;
}

.how-to-dialog-fallback-backdrop.is-open {
  display: block;
}

.how-to-dialog[open] {
  animation: how-to-dialog-in 0.2s ease-out;
}

@keyframes how-to-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* フォールバック時はtop:50%/left:50%による中央寄せをtransform: translate(-50%,-50%)
   で行っているため、上のhow-to-dialog-inをそのまま使うとtranslateYだけの値で
   上書きされ、中央からズレてしまう。中央寄せの分をアニメーションの
   transformにも常時含めた専用のキーフレームに差し替える
   (2クラス分のセレクタで[open]と詳細度が同じため、後勝ちさせるよう
   ここより後ろに書いている) */
.how-to-dialog.is-fallback-open {
  animation-name: how-to-dialog-fallback-in;
}

@keyframes how-to-dialog-fallback-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
}

.how-to-dialog__inner {
  position: relative;
  padding: 40px 30px 25px;
}

.how-to-dialog__close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 28px;
  height: 28px;
  /* スマホ実機だとタップ時にボタン標準の水色ハイライト/フォーカスリングが
     ✕の周りを囲うように出てしまうため消す */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.how-to-dialog__close img {
  display: block;
  width: 100%;
  height: 100%;
}

.how-to-dialog__title {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 2.4rem;
  color: #3a9421;
  text-align: center;
  margin-bottom: 10px;
}

.how-to-dialog__steps {
  letter-spacing: -0.03rem;
}

.how-to-dialog__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
}

.how-to-dialog__num {
  flex-shrink: 0;
  color: #3a9421;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.2;
  font-family: "Noto Sans JP", sans-serif;
}

.how-to-dialog__photos {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.how-to-dialog__photos img {
  width: 100%;
  border-radius: 12px;
}

/* ====================================================================
   レスポンシブ(タブレット幅・画面幅1200px以下)
==================================================================== */
@media screen and (max-width:1200px) {
  /* PC幅専用クラス(.pc-on)は、タブレット幅以下では非表示にする */
  .pc-on {
    display: none;
  }

  /* タブレット幅専用クラス(.tab-on)は、ここ(1200px以下)でだけ表示する。
     900px以下ではさらに@media screen and (max-width:900px)側で
     打ち消して非表示に戻す */
  .tab-on {
    display: block;
  }

  .site-header {
    height: 160px;
  }

  .recipe-dots {
    display: none;
  }

  .how-to-badge {
    display: none;
  }

  .how-to-banner {
    display: flex;
  }

  /* how-to-badge分の余白を空けるための左寄せ(padding-left:26px、
     デフォルトのjustify-content:flex-start)をやめて中央揃えにする */
  .season-tabs {
    justify-content: center;
    padding-left: 0;
  }

  .site-header__inner {
    padding: 0 40px;
  }

  .site-header__logo img {
    width: 200px;
  }

  /* .recipe-sectionを.main-visual-scale-wrapに乗り重ねる引き上げ
     (margin-top:-200px。@media screen and (max-width:1600px)側で指定)は
     画面幅1200px以下では無効にする */
  .recipe-section {
    margin-top: -220px;
  }

  /* 画面幅1200px以下: PC用の横並びメニューを隠し、代わりに
     SP用の追従するハンバーガーボタンを表示する。 */
  .pc-nav {
    display: none;
  }

  /* ボタンは画面幅900px以下では元のサイズ(65×50px)を1.2倍にしたものを
     使う(下部のレスポンシブ用メディアクエリ側で指定)。900px超1200px以下の
     範囲ではそれより一回り大きい約1.35倍にする。 */
  .sp-nav-toggle {
    display: flex;
    width: 88px;
    height: 68px;
    padding: 0 20px;
    gap: 10px;
    border-radius: 8px 0 0 8px;
  }

  .sp-nav-toggle span {
    height: 2px;
  }

  .sp-nav-toggle.is-active span:nth-child(1) { transform: translateY(13px) rotate(35deg); }
  .sp-nav-toggle.is-active span:nth-child(3) { transform: translateY(-13px) rotate(-35deg); }

  /* .sp-navは普段は隠しておき、ボタンクリックで付く.is-open
     (js/script.js側で制御)でボタン直下にドロップダウン表示する。
     ボタンと同じくposition:fixedにすることで、スクロール位置に
     関わらずボタンのすぐ下に追従させる
     (ボタンの高さ50px + 上端10pxの位置 = top:60px)。 */
  .sp-nav.is-open {
    display: block;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 24;
    width: 90%;
    max-width: 600px;
    padding: 35px 5% 40px;
    background: #4ba632;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .sp-nav__item a {
    color: #fff;
    text-align: center;
  }

  .sp-nav__icon {
    display: inline-block;
    position: relative;
    width: 30px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  .sp-nav__icon--search { top: 0; left: 0; }
  .sp-nav__icon--wakame { top: 0; left: 0; width: 36px; }
  .sp-nav__icon--book   { top: 2px; left: 0; width: 36px; }

  /* メニューを開いている間、背景全体に白の半透明レイヤーを重ねる。
     z-indexは.sp-nav(24)より下・通常のページ内容(.site-headerのz-index:20含む)
     より上になるよう21にしている。クリックで閉じる処理はjs/script.js側。 */
  .sp-nav-overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 21;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }

  .sp-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* align-items: centerの.sp-nav__listの中では、liはデフォルトだと
     中身に合わせて縮んでしまい、下のa要素のwidth:100%の基準にできる
     幅を持てない。align-self: stretchで行いっぱいに広げることで、
     a側のwidth:100%(→max-width:300pxで頭打ち)を正しく機能させる。 */
  .sp-nav__item--logo {
    align-self: stretch;
    margin-top: 35px;
  }

  .sp-nav__item--logo a {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 25px;
    background: #fff;
    border-radius: 10px;
  }

  .sp-nav__logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* 列幅そのものを280pxで固定し、justify-content:centerで
     「2枚セットの塊」をコンテナ中央に寄せる。
     justify-items:centerだと各カードが自分の列の中で個別に
     中央寄せされるだけで、カード同士の間に不自然な隙間ができて
     しまうため使わない。 */
  .more-list {
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
  }

  .about-section__body {
    padding: 0px 0px 0 40px;
  }
}

/* ====================================================================
   レスポンシブ(スマホ幅・画面幅900px以下)
   Figmaのモバイルデザイン(iPhone, node 437:3607)を参考に調整。
   デスクトップ用に位置決めしてある水玉・波(main-visual-dot/wave)は
   座標がそのままだと画面からはみ出して破綻するため、まずは非表示にして
   構成をシンプルにしている(装飾の置き直しは別途)。
==================================================================== */
@media screen and (max-width:900px) {
  /* SP幅専用クラス(.sp-on)は、スマホ幅でだけ表示する */
  .sp-on {
    display: block;
  }

  /* .tab-onは900px以下では対象外(タブレット幅専用)なので、
     @media screen and (max-width:1200px)側のdisplay:blockを打ち消す */
  .tab-on {
    display: none;
  }

  /* 基本のフォントサイズをPCの1.6remから1.4remに縮小する
     (他の要素も概ね-0.2rem刻みで縮小している) */
  body {
    overflow-x: hidden;
    font-size: 1.4rem;
  }


  .section-label {
    font-size: 1.3rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  /* 「もっとレシピを知りたい方へ」見出し横のイラストは、幅が狭いと
     右に置いたままだと見出しからはみ出して破綻するため、900px以下では
     見出しの左上に小さく(横幅100px。縦横比130:93は維持)配置し直す */
  .section-title--orange::before {
    top: -80px;
    left: 30px;
    margin-left: 0;
    width: 100px;
    height: auto;
    aspect-ratio: 130 / 93;
    transform: translate(-50%, -50%);
  }

  /* ---- ヘッダー ---- */
  .site-header {
    height: 80px;
    /* PC用の白グラデーションはSP幅では非表示にする */
    background: none;
  }

  /* ハンバーガーメニューの開閉ボタンは、元のサイズ(65×50px)を
     1.2倍にしたものを使う(900px超1200px以下では約1.35倍にしている) */
  .sp-nav-toggle {
    width: 75px;
    height: 55px;
    padding: 0 20px;
    gap: 8px;
    border-radius: 7px 0 0 7px;
  }

  .sp-nav-toggle span {
    height: 2px;
  }

  .sp-nav-toggle.is-active span:nth-child(1) { transform: translateY(11px) rotate(35deg); }
  .sp-nav-toggle.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-35deg); }

  .sp-nav__item a {
    font-size: 1.6rem;
  }

  .site-header__logo {
    top: 20px;
    left: 20px;
  }

  .site-header__logo img {
    width: 160px;
  }

  .recipe-panel-wrap {
    max-width: 650px;
  }

  /* ---- メインビジュアル ---- */
  .main-visual {
    display: flex;
    flex-direction: column;
    padding: 60px 0 0;
  }

  /* 写真を先に、テキストを後に表示する(画像デザインでは写真が上、
     タイトル等が下に縦積みになっている)。花形clip-pathは
     aspect-ratio:1/1が前提(コメント参照)なので、正方形のまま
     幅を大きめ(はみ出す分はbody側のoverflow-x: hiddenで切れる)に
     している。
     position:relativeのままtop/rightを%指定すると、見た目だけずれて
     レイアウト上の占有スペースは元のまま(=狙った位置にならず、
     周りの余白もおかしくなる)ため、通常のフロー(order:-1で先頭に
     来ているだけ)に戻し、marginで位置調整する方式にしている。
     負のtop marginでヘッダーに少し潜り込ませ、左右autoで中央寄せに
     している(画面より大きいので、左右均等にはみ出す)。
     width/marginはvwを使い、画面幅900px(width:1000px / margin:-340px 10px)
     〜400px(width:600px / margin:-140px -50px)の間を連続的に線形補間し、
     400px以下ではそこで下げ止まる(clamp()の下限/上限)。以前はここを
     ブレークポイントごとに固定値で上書きしていたが、切り替わりの瞬間に
     サイズがガクッと変わって見えるため、clamp()に置き換えて画面幅が
     縮むのと同時になめらかに縮小するようにしている。 */
  .main-visual-photo-frame {
    order: -1;
    position: relative;
    top: -2%;
    right: auto;
    width: clamp(600px, 80vw + 280px, 1000px);
    margin: clamp(-340px, -40vw + 20px, -140px) 0 0 clamp(-50px, 12vw - 98px, 10px);
    /* 横方向は上のmarginで固定したので、縦方向のズレだけtransformに残す */
    transform: translateY(40px);
  }

  .main-visual-photo {
    top: -55px;
    left: 0px;
    transform: scale(1.2);
  }

  .main-visual-sp-wave {
    width: 120px;
    height: 50px;
    /* .sp-nav-toggle(z-index:25)と同じ値だとDOM順で波側が勝って
       ハンバーガーボタンの上に乗ってしまうため、ヘッダー・ナビ関連
       (.site-header:20 / .sp-nav-overlay.is-open:21 / .sp-nav.is-open:24 /
       .sp-nav-toggle:25)より低い値にし、写真(.main-visual-photo-frame:1)
       より手前でありさえすればよい程度に留める */
    z-index: 2;
    /* .wave-decoの背景タイル(250×80px、波3本分)をこの箱の高さ(50px)に
       合わせて縮小する。タイル自体を縮めずに箱だけ小さくすると、
       波の上のほう(1本分)しか箱に収まらず見えなくなるため */
    background-size: 160px 50px;
    animation: main-visual-sp-wave-slide 16s linear infinite;
    mix-blend-mode: multiply;
  }

  .main-visual-sp-wave--1 {
    top: 120px;
    left: 10%;
  }

  /* --1(緑)の隣に置くオレンジ版 */
  .main-visual-sp-wave--2 {
    bottom: 240px;
    right: 0px;
  }

  @keyframes main-visual-sp-wave-slide {
    from { background-position-x: 0; }
    to   { background-position-x: 160px; }
  }

  .main-visual-sp-dot--1 {
    top: 10px;
    left: 50%;
    width: 70px;
    opacity: 0.25;
    z-index: -10;
  }

  .main-visual-sp-dot--2 {
    top: 300px;
    left: -15px;
    width: 160px;
    opacity: 0.15;
    z-index: -1;
  }

  .main-visual-sp-dot--3 {
    bottom: -110px;
    left: 60%;
    width: 200px;
    opacity: 0.2;
    z-index: -10;
  }

  .main-visual-sp-dot--4 {
    bottom: 220px;
    right: 40px;
    width: 140px;
    opacity: 0.3;
    z-index: -10;
  }

  .main-visual-sp-dot--5 {
    top: 70px;
    left: 2%;
    width: 120px;
    opacity: 0.25;
    z-index: 10;
  }

  .main-visual-sp-dot--6 {
    bottom: -50px;
    left: 12%;
    width: 80px;
    opacity: 0.2;
    z-index: -10;
  }


  /* デスクトップ用の水玉・波を非表示にする理由は、この
     @media (max-width:900px)の直前にあるセクション見出しコメントを参照 */
  .main-visual-front-frame,
  .main-visual-dot,
  .main-visual-wave {
    display: none;
  }

  .main-visual-inner {
    max-width: none;
    padding: 0 30px;
    margin: -110px 0 0 0px;
  }

  .main-visual-title {
    font-size: 4rem;
    line-height: 1.3;
    max-width: none;
  }

  .main-visual-catch {
    margin-top: 14px;
    font-size: 2.1rem;
    color: #ff9500;
    max-width: none;
  }

  .main-visual-lead {
    margin-top: 30px;
    max-width: none;
    font-size: 1.5rem;
    line-height: 1.85;
    text-align: center;
  }

  .main-visual-scroll {
    display: none;
  }

  /* ---- 季節のわかめレシピ ---- */
  .recipe-section {
    padding: 80px 0 0;
    /* 1200px以下側のmargin-top:-160pxを900px以下では打ち消す */
    margin-top: initial;
  }

  .recipe-card__desc {
    margin-bottom: 20px;
  }

  .recipe-card__meta {
    gap: 12px;
    margin-bottom: 25px;
  }

  .recipe-card__memo {
    padding: 40px 25px 20px 25px;
    font-size: 1.4rem;
  }

  .season-tabs {
    gap: 10px;
    padding-left: 0;
    height: 58px;
  }

  .season-tab {
    width: 20%;
    height: 45px;
    font-size: 1.6rem;
    border-radius: 18px 18px 0 0;
  }

  .season-tab[aria-selected="true"] {
    height: 65px;
  }

  .recipe-panel-frame {
    padding: 10px;
  }

  .recipe-panel {
    gap: 30px;
  }

  /* 円形バッジは幅が足りないと枠からはみ出すため、一回り小さくして
     位置も詰める */
  .how-to-badge {
    top: -56px;
    right: 16px;
    width: 96px;
    height: 96px;
  }

  .how-to-badge__check {
    font-size: 1.1rem;
  }

  .how-to-badge__label {
    font-size: 1.3rem;
  }

  .recipe-card {
    padding: 15px;
    row-gap: 0;
  }

  /* SP幅では450px上限を外し、HTMLの並び順
     (写真 → タイトル/時間/メモ → 材料 → 作り方)のまま
     4ボックスとも画面幅いっぱいで縦一列に積む。
     .recipe-card__top/.recipe-card__columnsのflex-wrap:nowrap
     (基本スタイル側で指定)もここで元のwrapに戻し、実際に折り返せる
     ようにする */
  .recipe-card__top,
  .recipe-card__columns {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 30px;
  }

  .recipe-card__media,
  .recipe-card__body,
  .recipe-card__ingredients,
  .recipe-card__steps {
    max-width: none;
  }

  /* 基本スタイル(min-width:900px相当)で写真をposition:absoluteにしている
     指定を、SP幅では通常のブロック表示に戻す。あわせて基本スタイル側の
     min-height:260px固定をやめ、縦横比4:3(横4:縦3)で画面幅に応じて
     拡大縮小するようにする */
  .recipe-card__media {
    position: static;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
  }

  .recipe-card__media img {
    position: static;
    min-height: 0;
  }

  /* aspect-ratio未対応ブラウザ(Safari 15未満)向けフォールバック。
     .recipe-card__mediaの幅は常に親の100%なので、padding-top(width基準の%)を
     4:3の高さ(3/4=75%)に指定する昔ながらの手法で代用できる
     (paddingは高さautoの計算に含まれるためheightは明示しない)。
     中身のimgはposition:staticのままだと通常フローに積まれて
     paddingの分だけ二重に高さができてしまうため、絶対配置に戻す */
  @supports not (aspect-ratio: 4 / 3) {
    .recipe-card__media {
      position: relative;
      padding-top: 75%;
    }

    .recipe-card__media img {
      position: absolute;
      inset: 0;
    }
  }

  /* SP幅では.recipe-card__media(写真)より前にタイトルを表示したいが、
     本来のタイトル(.recipe-card__body内、tab-on pc-on付き)は写真より
     後ろにあるため、.recipe-card__media直前に.sp-onで出し分ける専用の
     タイトルを複製して置いている(HTML側を参照)。900px以下では本来側は
     tab-on/pc-onどちらもdisplay:noneになるので、二重表示にはならない */
  .recipe-card__title {
    width: 100%;
    font-size: 2rem;
    margin-left: 0;
    letter-spacing: 0;
  }

  .meta-badge {
    font-size: 1.2rem;
  }

  .recipe-card__ingredients h4,
  .recipe-card__steps h4 {
    font-size: 1.8rem;
    text-align: center;
    border-bottom: 3px solid #4ba632;
  }

  .ingredient-list li {
    font-size: 1.3rem;
  }

  .ingredient-list li:last-child {
    border-bottom-width: 3px;
  }

  .step-list li {
    gap: 6px;
    padding: 16px 0px 16px 6px;
  }

  .step-list li:last-child {
    border-bottom-width: 3px;
  }

  .ingredient-list__name::before {
    font-size: 1.3rem;
  }

  /* 900px以下では横幅を割合指定にする(name:6割/amount:3割)。
     残り1割はjustify-content:space-betweenの余白として使われるため、
     左右がくっつかずに済む */
  .ingredient-list__name {
    width: 60%;
    max-width: none;
  }

  .ingredient-list__amount {
    width: 30%;
    max-width: none;
  }

  .recipe-card__steps {
    font-size: 1.3rem;
    margin-top: 40px;
  }

  .step-list__num {
    font-size: 1.8rem;
  }

  /* ---- もっとレシピを知りたい方へ ---- */
  .more-section {
    padding: 120px 35px 70px;
  }

  .more-dot--1 {
    top: 100px;
    width: 160px;
  }

  .more-section__heading {
    margin-bottom: 40px;
  }

  .more-list {
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
  }

  .btn {
    margin-top: 40px;
    padding: 12px 60px 12px 45px;
    font-size: 1.7rem;
  }

  /* ---- ABOUT ----
     画像デザイン参照: 写真を上・テキストを下に積む。テキストは
     中央揃えにする(デスクトップは左揃え文章のためbr改行済みだが、
     中央揃えでも大きな崩れはないためそのまま流用している)。 */
  .about-section {
    flex-direction: column;
    min-height: auto;
  }

  /* HTML側はbody→mediaの順のままなので、orderで見た目だけ写真を先にする */
  .about-section__media {
    order: -1;
    flex: none;
    /* 固定heightだと画面幅が狭まるにつれて縦長すぎる比率になってしまうため、
       写真の実寸比(about-photo-sp.jpg: 1345×1472px)をaspect-ratioで
       指定し、幅(=画面幅)に応じて高さも比例して縮小するようにする。
       実寸比そのままなのでobject-fit側でのトリミングも基本的に発生しない */
    aspect-ratio: 1345 / 1472;
    /* デスクトップ用の左端波形クリップ(縦方向・repeat-y)を、
       上辺クリップ(横方向・repeat-x)用に90度回転させて作り直したもの。
       波を大きく(山4つ、1つ1つを幅広に)、振幅は低め(±30px程度)の
       なだらかな形にしている。
       偶数区間(4)にすることで、タイルの終点(x=920)の接線と始点(x=0)の
       接線の向きが一致し、repeat-xで継ぎ目なくつながる(奇数区間だと
       境界の傾きが逆になり、つなぎ目が折れて見える)。
       mask-size/mask-position(アニメーション部分)はここでは指定せず、
       js/script.js側で画面幅に応じてpxで計算してインラインstyleで
       設定している(波の大きさを画面幅に比例して縮小しつつ、左から右へ
       継ぎ目なく流れるアニメーションにするため。詳しくはscript.js参照)。
       同じタイル画像を2枚重ねて指定しているのは、repeat-xのタイルの
       継ぎ目(920px間隔)の位置で、実機(特にiOS Safari)がラスタライズ時に
       1px程度の隙間(縦線)を作ってしまうことがあるための保険。js側で
       2枚目をちょうど1タイル分ズラして描き、mask-compositeで合成する
       ことで、片方の継ぎ目がもう片方の塗りで覆われるようにしている
       (波の形・大きさ自体は元のタイル画像のまま変えていない)。 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='2000'%3E%3Cpath d='M0 180 Q115 135 230 180 T460 180 T690 180 T920 180 L920 2000 L0 2000 Z' fill='%23fff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='2000'%3E%3Cpath d='M0 180 Q115 135 230 180 T460 180 T690 180 T920 180 L920 2000 L0 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='2000'%3E%3Cpath d='M0 180 Q115 135 230 180 T460 180 T690 180 T920 180 L920 2000 L0 2000 Z' fill='%23fff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='2000'%3E%3Cpath d='M0 180 Q115 135 230 180 T460 180 T690 180 T920 180 L920 2000 L0 2000 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x, repeat-x;
    mask-repeat: repeat-x, repeat-x;
    -webkit-mask-composite: source-over, source-over;
    mask-composite: add, add;
    /* デスクトップ用ベースルールのanimation: about-media-wave(縦方向に
       0→-920pxのCSSアニメーション)がここでも生きたままだと、CSS
       アニメーションはインラインstyleより優先されるため、js側で
       mask-positionを設定しても上書きされて縦方向に流れてしまう。
       ここで明示的に止めて、js/script.js側の横方向アニメーションだけが
       効くようにする */
    animation: none;
  }

  /* bg-blue.png(::before)は普段inset:0で.about-section全体の裏に
     敷いているが、それだと写真(.about-section__media、aspect-ratioで
     高さが画面幅に応じて可変)の波クリップの隙間からも透けて見えてしまう。
     写真の高さが変わるたびに数値を合わせ直すのは大変なので、section側の
     ::beforeはSP幅では丸ごと無効にし、代わりに.about-section__body自身に
     同じ背景を敷く(opacityを直接body要素にかけると中の文字まで薄くなって
     しまうため、body側にも同じように背景専用の::beforeを用意している)。 */
  .about-section::before {
    display: none;
  }

  .about-section__body {
    position: relative;
    z-index: 0;
    flex: none;
    padding: 50px 10px 80px 10px;
    text-align: center;
  }

  .about-section__body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../images/common/bg-blue.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
  }

  /* ボタンの位置微調整(-5px)は左揃えレイアウト用なので、中央揃えでは解除する */
  .about-section .btn {
    margin-left: 0;
  }

  .about-section__group::after {
    display: none;
  }

  /* PC版の.about-section__group::afterと同じイラストを、SP幅では
     写真エリア(.about-section__media)の左上に配置する専用要素として
     出す(::afterのままだと.about-section__group基準になってしまい
     写真エリアには届かないため。詳しくはHTML側のコメント参照) */
  .about-section-media-illust {
    position: absolute;
    top: 7%;
    left: 8%;
    width: 70px;
    height: 72px;
    background-image: url("../images/common/illust-about.svg");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
  }

  .section-title--teal::after {
    margin: 15px auto 0;
  }

  /* デスクトップでは右下に表示している波線を、SP幅でも.about-section
     (position:relative)の右下に配置する。z-indexを指定していないと
     .about-section__mediaの後ろに隠れてしまうため明示的に前面に出す */
  .about-section-wave--1 {
    top: auto;
    left: auto;
    right: 10px;
    bottom: -15px;
    transform: none;
    z-index: 2;
    /* メインビジュアルのSP用波(.main-visual-sp-wave)と同じサイズに揃える。
       background-sizeも合わせて縮小しないと波の一部しか見えなくなるため
       (.main-visual-sp-wave側のコメント参照)、アニメーションもタイル幅が
       同じ.main-visual-sp-wave-slideをそのまま流用する */
    width: 120px;
    height: 50px;
    background-size: 160px 50px;
    animation: main-visual-sp-wave-slide 16s linear infinite;
  }

  /* ---- フッター ---- */
  .site-footer {
    padding: 120px 20px 30px;
  }

  .site-footer__logo {
    width: 180px;
  }

  .site-footer__logo-link {
    margin-bottom: 30px;
  }

  .site-footer__copyright {
    font-size: 1.1rem;
  }

  /* メインビジュアルのSP用波(.main-visual-sp-wave)と同じサイズに揃える。
     background-sizeも合わせて縮小しないと波の一部しか見えなくなるため
     (.main-visual-sp-wave側のコメント参照)、アニメーションもタイル幅が
     同じ.main-visual-sp-wave-slideをそのまま流用する */
  .site-footer-wave--1 {
    width: 120px;
    height: 50px;
    right: 20px;
    background-size: 160px 50px;
    animation: main-visual-sp-wave-slide 16s linear infinite;
  }

  /* ---- TOPへ戻る ---- */
  .back-to-top {
    right: 14px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }

  .back-to-top img {
    width: 56px;
    height: 56px;
  }

  /* ---- 塩蔵わかめの戻し方 ポップアップ ---- */
  .how-to-dialog__inner {
    padding: 30px 20px 20px;
  }

  .how-to-dialog__title {
    font-size: 2rem;
  }

  .how-to-dialog__num {
    font-size: 2.2rem;
  }

  .more-dot--2 {
    bottom: -130px;
    width: 220px;
  }
}

@media screen and (max-width:700px) {
  /* 700px専用クラス(.sp-on-mini)は、この幅でだけ表示する
     (.main-visual-leadの<br>用。700px超では<br class="sp-on-mini">は
     display:noneのまま消えるので、通常の<br>の位置だけで改行される) */
  .sp-on-mini {
    display: block;
  }

  .main-visual-inner {
    margin: -70px 0 0 0;
  }
  .main-visual-sp-dot--5 {
    left: -1%;
  }
  .main-visual-sp-wave--1 {
    left: 80px;
  }
  .main-visual-sp-dot--4 {
    bottom: 260px;
  }
  .main-visual-sp-wave--2 {
    bottom: 280px;
  }
  .main-visual-sp-dot--3 {
    bottom: -20px;
  }
}

@media screen and (max-width:500px) {
  /* TEL/FAXを「／　」区切りの1行表示から改行表示に切り替える */
  .site-footer__tel-fax-sep {
    display: none;
  }
  .site-footer__tel-fax-break {
    display: block;
  }

  /* 500px以下では、900px側で計算しているclamp()の結果(width/margin)を
     さらに0.8倍し、フレームを一回り(現在の8割ほど)小さくする */
  .main-visual-photo-frame {
    width: calc(clamp(600px, 80vw + 280px, 1000px) * 0.8);
    margin: calc(clamp(-340px, -43vw + 20px, -140px) * 0.8) 0 0 calc(clamp(-50px, 22vw - 98px, 10px) * 0.8);
  }
  .main-visual-photo {
    left: 5px;
    top: -35px;
  }
  .main-visual-inner {
    margin: -30px 0 0 0;
    padding: 0 20px;
  }
  .main-visual-title {
    font-size: 3.2rem;
  }
  .main-visual-catch {
    font-size: 1.8rem;
  }
  .site-header__logo img {
    width: 140px;
  }
  .main-visual-sp-dot--4 {
    right: 0px;
    width: 100px;
    opacity: 0.3;
    z-index: -10;
  }
  .main-visual-sp-wave--2 {
    right: -50px;
    bottom: 250px;
  }
  .main-visual-sp-wave--1 {
    left: 40px;
  }
  .recipe-card__memo {
    padding: 25px 18px 15px 18px;
  }
  .recipe-card__memo-holes {
    left: 10px;
    right: 10px;
  }
  .recipe-card__memo-hole {
    width: 10px;
    height: 16px;
  }

  /* ---- もっとレシピを知りたい方へ ----
     500px以下では2列だと1枚あたりが狭すぎるため、横並びをやめて
     1列(縦積み)にする。列幅を280pxで固定し、justify-content:centerで
     中央に寄せる(理由は1200px/900px側のコメント参照) */
  .more-list {
    grid-template-columns: minmax(0, 280px);
    justify-content: center;
  }
}