@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * -- 共通パーツ
 * .sn-header / .sn-header__inner   - sticky＋半透明ぼかしヘッダー（共通は fixed / absolute のみ）
 * .sn-logo / __body / __name / __suffix / __en - テキストロゴ（社名＋株式会社＋英字3段）
 * .sn-nav / __item / --current     - pill型グローバルナビ（共通はEN+JA2段＋下線アニメ）
 * .sn-head-right / .sn-head-tel    - ヘッダー右：ラベル付き電話ブロック
 * .sn-head-cta                     - pill型ヘッダーCTA（共通はヘッダー高さいっぱいの矩形）
 * .sn-follow / __btn / __icon / __label - 画面右追従ボタン（縦書きラベル）
 * .sn-spnav-tel / .sn-spnav-note   - SPナビ下部の電話
 * .sn-footer 一式                  - フッター（auto-fit 3カラム＋ゴールド見出し）
 * .sn-wave / --flip                - SVG波型ディバイダー（高さ可変・比率追従）
 * .sn-inner-1000 / -960            - コンテナ幅バリエーション（1000px / 960px）
 * .sn-eyebrow / --sm / --light     - 英字ラベル（Montserrat・ゴールド・広字間）
 * .sn-h2 / --sm / --md / --news / --contact / --order / .sn-h3 / .sn-h4 - 見出しサイズ群
 * .sn-lead / .sn-lead--strong / .sn-note / .sn-sub - 本文テキスト階調
 * .sn-btn / --navy / --ghost / --white / --ghost-white - pill型ボタン配色
 * .sn-btnrow                       - ボタン横並び（gap14・中央・折返し）
 * .sn-icon / --1,3,4,7,8           - 見出し上のイラストアイコン（CSSマスク）
 * .sn-deco / --about / --commit / --company - 大型イラスト透かし装飾（CSSマスク）
 * .sn-ctabox                       - 下層共通CTAボックス（角丸28px・淡ブルー）
 * .sn-pagehead 一式                - 下層ページヘッダー（左テキスト＋右16:6写真）
 * .sn-fade                         - スクロールフェードイン
 *
 * -- TOPページ
 * .sn-mv 一式                      - MV（グラデ暗幕＋バッジ＋縦書きコピー＋波）
 * .sn-about 一式                   - 当店について
 * .sn-prod 一式                    - おすすめ商品（縦書き商品名バッジが枠外にはみ出す）
 * .sn-commit 一式                  - 3つのこだわり（85%幅の互い違い＋ブロブマスク画像）
 * .sn-order-band 一式              - ご注文方法（写真＋乗算オーバーレイ）
 * .sn-news 一式                    - お知らせ（blog-listの配色差分）
 * .sn-contact 一式                 - お問い合わせ帯
 *
 * -- 下層ページ
 * .sn-notebox                      - 注意書きボックス（クリーム＋細枠）
 * .sn-price 一式                   - 商品リスト（上2px navy・行間区切り・右寄せ価格）
 * .sn-media 一式                   - 画像＋テキスト2カラム（auto-fit）
 * .sn-point 一式                   - POINTカード
 * .sn-cook 一式                    - 玄米の炊き方カード（円形写真＋番号）
 * .sn-eat 一式                     - 海苔の食べ方（30%/66%＋2列リスト）
 * .sn-hr                           - 区切り線
 * .sn-flow 一式                    - ご注文の流れ（縦ライン＋番号丸）
 * .sn-tag                          - 支払方法タグ
 * .sn-def 一式                     - 会社概要の定義リスト（ラベル固定150px）
 * .sn-form 一式                    - お問い合わせフォーム
 *
 * ======================================
 * 共通SCSSに不足していたもの（§12の5分類）
 * ======================================
 *
 * [値の粒度不足]
 *  - spacing utility が5刻み（40/50/60…）のため、デザイン実数値の
 *    12/14/16/18/22/24/26/32/34/36/44/48/54/56/64/68/78/96/112/128px を作れない
 *  - font-size utility に 13/15/17/19/22/34px 系の中間値・clamp() がない
 *  - gap utility に 24/22/36/8px がない
 *  - radius に 14/16/20/24/28px の刻みがない（$radius_base=10 / lg=20 / xl=60）
 *
 * [指定方向不足]
 *  - position utility が top/right/bottom/left の 0 のみ。
 *    「top:-16px / right:14px」のような任意オフセットが指定できない
 *  - grid-N は固定列のみで repeat(auto-fit, minmax(240px,1fr)) が作れない
 *
 * [状態不足]
 *  - header が fixed（header-bar）と absolute→fixed（header-sticky）のみで、
 *    position:sticky（本体が流れに残る）型がない
 *
 * [構造不足]
 *  - 縦書き（writing-mode）を伴うバッジ・追従ボタン・商品名ラベルの構造がない
 *    （heading-vertical は絶対配置の見出し専用）
 *  - 画像を任意形状で切り抜く CSS マスク（blob / イラスト透かし）の仕組みがない
 *  - 写真の上に mix-blend-mode: multiply でブランド色を重ねる指定ができない
 *  - 下層ページヘッダー（左タイトル＋右16:6写真）は page-hero--split と比率・角丸が異なる
 *
 * [装飾パターン不足]
 *  - wave-divider の SVG 高さが 60px 固定で、幅に追従する height:auto の波がない
 *  - フロー図の「番号丸を貫く縦ライン」パターンがない（card-flow は矢印コネクタのみ）
 *
 */
/* ==========================================================================
   0. カラートークン（claude-design-output の実数値）
   ========================================================================== */
:root {
  --sn-navy: #275d8f;
  --sn-navy-dark: #1f3a52;
  --sn-navy-hover: #1f4d78;
  --sn-gold: #bb9c65;
  --sn-gold-light: #f0d79a;
  --sn-ink: #33404a;
  --sn-body: #55606a;
  --sn-muted: #6b7680;
  --sn-mute2: #8a919a;
  --sn-beige: #f7f4f0;
  --sn-pale: #eef4f9;
  --sn-cream: #fbf3e4;
  --sn-sand: #f2ece2;
  --sn-line: #ece5da;
  --sn-line2: #e6ddce;
  --sn-line3: #e3dcd2;
}

/* ==========================================================================
   1. ベース
   ========================================================================== */
body {
  font-weight: 500;
  line-height: 1.9;
}

main {
  display: block;
}

/* コンテナ：デザイン元データは max-width:1160px + padding:0 24px */
.container,
.container-narrow {
  padding-left: 24px;
  padding-right: 24px;
}

.sn-inner-1000 {
  max-width: 1000px;
}

.sn-inner-960 {
  max-width: 960px;
}

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.sn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sn-line);
}

.sn-header__inner {
  width: 94%;
  max-width: 94%;
  height: auto;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* -- ロゴ */
.sn-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.sn-logo:hover {
  opacity: 1;
}

.sn-logo__body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sn-logo__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--sn-navy);
  letter-spacing: 0.04em;
}

.sn-logo__suffix {
  font-size: 13px;
  color: #8a7b63;
  margin-left: 4px;
  font-weight: 700;
}

.sn-logo__en {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--sn-gold);
  font-weight: 600;
}

/* -- グローバルナビ（pill） */
.sn-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 0;
  flex-wrap: wrap;
  align-items: center;
}

.sn-nav .header__nav-item a {
  display: block;
  flex-direction: row;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  border-radius: 999px;
  color: var(--sn-muted);
  background: none;
}

.sn-nav .header__nav-item a::after {
  display: none;
}

.sn-nav .header__nav-item a:hover {
  background: var(--sn-pale);
  color: var(--sn-navy);
  opacity: 1;
}

.sn-nav .sn-nav__item--current a,
.sn-nav .sn-nav__item--current a:hover {
  background: var(--sn-navy);
  color: #fff;
}

/* -- ヘッダー右（電話＋CTA） */
.sn-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
}

.sn-head-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  padding-right: 12px;
  border-right: 1px solid var(--sn-line2);
  font-size: inherit;
}

.sn-head-tel::before {
  content: none;
}

.sn-head-tel:hover {
  opacity: 0.7;
}

.sn-head-tel__label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--sn-gold);
  font-weight: 600;
}

.sn-head-tel__num {
  font-size: 19px;
  font-weight: 700;
  color: var(--sn-navy);
  letter-spacing: 0.02em;
}

.sn-head-cta {
  display: inline-flex;
  height: auto;
  padding: 12px 22px;
  background: var(--sn-navy);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9;
}

.sn-head-cta:hover {
  background: var(--sn-navy-hover);
}

/* -- SPナビ下部 */
.sn-spnav-tel {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.sn-spnav-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   3. 追従ボタン（X・電話）
   ========================================================================== */
.sn-follow {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.sn-follow__btn {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-radius: 14px 0 0 14px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.sn-follow__btn:hover {
  opacity: 1;
  color: #fff;
}

.sn-follow__btn--tel {
  background: var(--sn-navy);
  box-shadow: -6px 4px 18px rgba(39, 93, 143, 0.28);
}

.sn-follow__btn--tel:hover {
  background: var(--sn-navy-hover);
}

.sn-follow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

.sn-follow__btn--tel .sn-follow__icon {
  color: var(--sn-navy);
  font-size: 13px;
}

.sn-follow__label {
  writing-mode: vertical-rl;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* ==========================================================================
   4. フッター
   ========================================================================== */
.sn-footer__body {
  background: var(--sn-navy-dark);
  color: #cfd9e2;
  padding: 0;
}

.sn-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 30px;
}

.sn-footer__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-bottom: 16px;
}

.sn-footer__name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.sn-footer__suffix {
  font-size: 13px;
  color: #a9bccb;
  margin-left: 4px;
}

.sn-footer__en {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--sn-gold);
  font-weight: 600;
}

.sn-footer__addr {
  font-size: 13.5px;
  line-height: 1.9;
  margin: 0;
}

.sn-footer__ttl {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--sn-gold);
  font-weight: 600;
  margin: 0 0 12px;
}

.sn-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sn-footer__link {
  color: #cfd9e2;
  font-size: 14px;
  text-decoration: none;
}

.sn-footer__link:hover {
  color: #fff;
  opacity: 1;
}

.sn-footer__tel {
  font-size: 13.5px;
  margin: 0 0 6px;
}

.sn-footer__tel-num {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.sn-footer__note {
  font-size: 13px;
  margin: 0 0 18px;
  color: #9fb1c0;
}

.sn-footer__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sn-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}


.sn-footer__btn--ghost {
  border: 1.5px solid #5c7185;
  color: #cfd9e2;
}

.sn-footer__btn--ghost:hover {
  border-color: #cfd9e2;
  color: #fff;
  opacity: 1;
}

.sn-footer__bottom {
  background: var(--sn-navy-dark);
  border-top: 1px solid #2e4a63;
  padding: 18px 24px;
  text-align: center;
}

.sn-footer__copy {
  font-size: 12px;
  color: #8ba0b2;
  margin: 0;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   5. 汎用パーツ（見出し・ボタン・波・装飾）
   ========================================================================== */
/* -- 英字ラベル */
.sn-eyebrow {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.28em;
  color: var(--sn-gold);
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 10px;
}

.sn-eyebrow--sm {
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0 0 4px;
}

.sn-eyebrow--head {
  font-size: 12px;
  letter-spacing: 0.28em;
  line-height: 1;
  margin: 0 0 4px;
}

.sn-eyebrow--light {
  color: #bcd4e8;
}

/* -- 見出し */
.sn-h2 {
  font-size: clamp(24px, 3vw, 34px);
  color: var(--sn-navy);
  font-weight: 700;
}

.sn-h2--sm {
  font-size: 24px;
  line-height: 1.2;
}

.sn-h2--md {
  font-size: clamp(22px, 2.6vw, 28px);
}

.sn-h2--news {
  font-size: clamp(24px, 3vw, 32px);
}

.sn-h2--contact {
  font-size: clamp(22px, 3vw, 30px);
}

.sn-h2--order {
  font-size: clamp(23px, 3vw, 32px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(15, 30, 45, 0.4);
}

.sn-h3 {
  font-size: 24px;
  color: var(--sn-navy);
  font-weight: 700;
}

.sn-h3--tight {
  line-height: 1.2;
}

.sn-h4 {
  font-size: 17px;
  color: var(--sn-navy);
  font-weight: 700;
}

/* -- 本文 */
.sn-lead {
  font-size: 16px;
  color: var(--sn-body);
}

.sn-lead--strong {
  font-size: 19px;
  color: var(--sn-ink);
  font-weight: 700;
}

.sn-lead--40em {
  max-width: 40em;
}

.sn-lead--38em {
  max-width: 38em;
}

.sn-sub {
  color: var(--sn-muted);
  font-size: 15px;
}

.sn-note {
  font-size: 13px;
  color: var(--sn-mute2);
}

/* -- pill型ボタン */
.sn-btn {
  padding: 14px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
  background: none;
  border: none;
  text-align: center;
  transition: all 0.3s ease;
}

.sn-btn:hover {
  opacity: 1;
}

.sn-btn--navy {
  background: var(--sn-navy);
  color: #fff;
}

.sn-btn--navy:hover {
  background: var(--sn-navy-hover);
  color: #fff;
}

.sn-btn--ghost {
  color: var(--sn-navy);
  border: 1.5px solid var(--sn-navy);
}

.sn-btn--ghost:hover {
  background: var(--sn-pale);
  color: var(--sn-navy);
}

.sn-btn--ghost-white {
  background: #fff;
  color: var(--sn-navy);
  border: 1.5px solid var(--sn-navy);
}

.sn-btn--ghost-white:hover {
  background: var(--sn-pale);
  color: var(--sn-navy);
}

.sn-btn--white {
  background: #fff;
  color: var(--sn-navy);
}

.sn-btn--white:hover {
  background: var(--sn-pale);
  color: var(--sn-navy);
}

.sn-btn--lg {
  padding: 15px 34px;
  font-size: 16px;
}

.sn-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  font-size: 15px;
}

.sn-btnrow {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -- 波型ディバイダー（幅に追従する height:auto 型） */
.sn-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}

.sn-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.sn-wave--top {
  bottom: auto;
  top: -1px;
  transform: scaleY(-1);
}

/* -- イラストアイコン（CSSマスク） */
.sn-icon {
  margin: 0 auto 12px;
  background: var(--sn-gold);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sn-icon--1 {
  width: 64px;
  aspect-ratio: 484/324;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-1.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-1.png);
}

.sn-icon--3 {
  width: 50px;
  aspect-ratio: 557/548;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-3.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-3.png);
}

.sn-icon--4 {
  width: 40px;
  aspect-ratio: 416/496;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-4.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-4.png);
}

.sn-icon--7 {
  width: 58px;
  aspect-ratio: 439/342;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-7.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-7.png);
}

.sn-icon--8 {
  width: 70px;
  aspect-ratio: 784/456;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-8.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-8.png);
}

/* -- 大型イラスト透かし */
.sn-deco {
  position: absolute;
  background: var(--sn-navy);
  pointer-events: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sn-deco--about {
  top: 18px;
  right: 4%;
  width: min(300px, 34vw);
  aspect-ratio: 779/539;
  opacity: 0.06;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-2.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-2.png);
}

.sn-deco--commit {
  top: 24px;
  right: 2%;
  width: min(260px, 30vw);
  aspect-ratio: 661/431;
  opacity: 0.06;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-5.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-5.png);
}

.sn-deco--company {
  top: -10px;
  right: 0;
  width: min(300px, 32vw);
  aspect-ratio: 1066/624;
  opacity: 0.07;
  -webkit-mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-6.png);
  mask-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/illust-6.png);
}

/* ==========================================================================
   6. TOP：メインビジュアル
   ========================================================================== */
.sn-mv {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sn-navy-dark);
}

#slideshow {
  position: relative;
  width: 100%;
  height: min(80vh, 680px);
  min-height: 480px;
}

#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}

#slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-mv__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 42, 66, 0.72) 0%, rgba(20, 42, 66, 0.45) 42%, rgba(20, 42, 66, 0.05) 78%);
}

.sn-mv__body {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.sn-mv__inner {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

.sn-mv__badge {
  pointer-events: auto;
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sn-gold);
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.9;
}

.sn-mv__ttl {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.42;
  font-weight: 700;
  color: #fff;
  margin: 22px 0 20px;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 20px rgba(15, 30, 45, 0.35);
}

.sn-mv__lead {
  font-size: clamp(15px, 1.3vw, 17px);
  color: #eaf1f7;
  max-width: 32em;
  margin: 0;
  text-shadow: 0 1px 12px rgba(15, 30, 45, 0.4);
}

.sn-mv__vertical {
  position: absolute;
  top: 0;
  right: clamp(118px, 12vw, 168px);
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.sn-mv__vertical span {
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.34em;
  color: #fff;
  padding: 22px 14px;
  border-left: 2px solid var(--sn-gold);
  border-right: 2px solid var(--sn-gold);
  text-shadow: 0 2px 14px rgba(15, 30, 45, 0.5);
  animation: sn-floaty 5s ease-in-out infinite;
}

.sn-mv__vertical em {
  font-style: normal;
  color: var(--sn-gold-light);
}

@keyframes sn-floaty {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
/* ==========================================================================
   7. TOP：当店について
   ========================================================================== */
.sn-about {
  background: #fff;
  position: relative;
}

.sn-about__inner {
  padding-top: 24px;
  padding-bottom: 96px;
  text-align: center;
  position: relative;
}

/* ==========================================================================
   8. TOP：おすすめ商品
   ========================================================================== */
.sn-prod {
  background: var(--sn-beige) url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/texture-cloth.jpg) center/cover no-repeat;
  position: relative;
}

.sn-prod__inner {
  padding-top: 64px;
  padding-bottom: 96px;
}

.sn-prod__head {
  text-align: center;
  margin-bottom: 44px;
}

.sn-prod__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sn-prod__frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 14px;
  background: #eee;
}

.sn-prod__img {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
}

.sn-prod__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 意図的に枠外へはみ出す縦書きラベル（clipしない） */
.sn-prod__name {
  position: absolute;
  top: -16px;
  right: 14px;
  writing-mode: vertical-rl;
  background: var(--sn-beige);
  padding: 10px 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sn-navy);
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.sn-prod__body {
  padding: 14px 4px 2px;
}

.sn-prod__tag {
  font-size: 16px;
  color: var(--sn-body);
  margin: 0;
  text-align: left;
}

.sn-prod__foot {
  text-align: center;
  margin-top: 40px;
}

/* 比率固定枠（aspect-ratio）の中の画像は絶対配置にして、
   縦長写真が枠の高さを押し広げないようにする（.sn-commit__mask / .sn-media__img / .sn-pagehead__img）*/
/* ==========================================================================
   9. TOP：3つのこだわり
   ========================================================================== */
.sn-commit {
  background: #fff;
}

.sn-commit__inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

.sn-commit__head {
  text-align: center;
  margin-bottom: 48px;
}

.sn-commit__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sn-commit__row {
  width: 85%;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 40px;
}

.sn-commit__row--offset {
  margin-left: 15%;
}

.sn-commit__figure {
  position: relative;
  flex: 0 0 clamp(180px, 22vw, 260px);
  aspect-ratio: 1/1;
}

.sn-commit__mask {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--sn-pale);
  -webkit-mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/blob-mask.png) center/100% 100% no-repeat;
  mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28279/blob-mask.png) center/100% 100% no-repeat;
}

.sn-commit__mask--cream {
  background: var(--sn-cream);
}

.sn-commit__mask img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-commit__num {
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sn-navy);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(39, 93, 143, 0.25);
}

.sn-commit__body {
  flex: 1;
}

.sn-commit__ttl {
  font-size: 22px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 0 0 12px;
}

.sn-commit__foot {
  text-align: center;
  margin-top: 44px;
}

/* ==========================================================================
   10. TOP：ご注文方法（写真＋乗算オーバーレイ）
   ========================================================================== */
.sn-order-band {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.sn-order-band__bg {
  position: absolute;
  inset: 0;
}

.sn-order-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-order-band__overlay {
  position: absolute;
  inset: 0;
  background: var(--sn-navy);
  mix-blend-mode: multiply;
  opacity: 0.82;
  pointer-events: none;
}

.sn-order-band__inner {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.sn-order-band__lead {
  font-size: 16px;
  color: #f0f5fa;
  max-width: 40em;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(15, 30, 45, 0.4);
}

/* ==========================================================================
   11. TOP：お知らせ
   ========================================================================== */
.sn-news {
  background: #fff;
}

.sn-news__inner {
  padding-top: 78px;
  padding-bottom: 78px;
}

.sn-news__head {
  text-align: center;
  margin-bottom: 40px;
}

.sn-news .blog-list {
  border-top-color: var(--sn-line);
}

.sn-news .blog-list__item {
  border-bottom-color: var(--sn-line);
}

.sn-news .blog-list__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 8px;
  flex-wrap: wrap;
}

/* CMSは <span> の innerHTML に <ul> を挿入するためブロック化 */
#cms-news-1-area {
  display: block;
}

/* CMS出力の行は <div>（リンクなし）。誤解を招くので hover 演出は出さない。
   将来 記事詳細ページを作って <a> になった場合は自動でhoverが復活する。 */
.sn-news .blog-list__link:hover {
  background: transparent;
}

.sn-news .blog-list__link:hover .blog-list__title {
  color: var(--sn-ink);
}

.sn-news a.blog-list__link:hover {
  background: var(--sn-beige);
}

.sn-news .blog-list__date {
  color: var(--sn-mute2);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.9;
  min-width: 96px;
}

.sn-news .blog-list__title {
  color: var(--sn-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}

.sn-news a.blog-list__link:hover .blog-list__title {
  color: var(--sn-navy);
}

/* ==========================================================================
   12. TOP：お問い合わせ帯
   ========================================================================== */
.sn-contact {
  background: var(--sn-sand);
}

.sn-contact__inner {
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}

/* ==========================================================================
   13. 下層：ページヘッダー
   ========================================================================== */
.sn-pagehead {
  background: var(--sn-beige);
}

.sn-pagehead__inner {
  padding-top: 54px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.sn-pagehead__ttl {
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--sn-navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;
}

.sn-pagehead__sub {
  color: var(--sn-muted);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

.sn-pagehead__img {
  position: relative;
  flex: 1 1 380px;
  min-width: 280px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/6;
  background: var(--sn-pale);
}

.sn-pagehead__img--cream {
  background: var(--sn-cream);
}

.sn-pagehead__img--sand {
  background: var(--sn-sand);
}

.sn-pagehead__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下層コンテンツ共通の上下余白 */
.sn-page__inner {
  padding-top: 64px;
  padding-bottom: 96px;
  position: relative;
}

/* -- アンカー着地位置（stickyヘッダーに隠れないよう上に余白） */
.sn-anchor {
  scroll-margin-top: 100px;
}

/* -- 下層共通CTAボックス */
.sn-ctabox {
  background: var(--sn-pale);
  border-radius: 28px;
  padding: 44px 32px;
  text-align: center;
  margin-top: 40px;
}

.sn-ctabox__ttl {
  font-size: 22px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 0 0 12px;
}

.sn-ctabox__lead {
  font-size: 15px;
  color: var(--sn-body);
  margin: 0 0 24px;
}

/* ==========================================================================
   14. 商品メニュー
   ========================================================================== */
.sn-notebox {
  background: var(--sn-cream);
  color: #8a7b52;
  border: 1px solid #ecdcbc;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 14px;
  margin: 0 0 48px;
}

.sn-cat {
  margin-bottom: 56px;
}

.sn-cat__head {
  margin-bottom: 8px;
}

.sn-cat__desc {
  color: var(--sn-muted);
  font-size: 15px;
  margin: 0 0 22px;
}

.sn-price {
  border-top: 2px solid var(--sn-navy);
}

.sn-price__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--sn-line);
  flex-wrap: wrap;
  transition: background 0.3s ease;
}

.sn-price__row:hover {
  background: var(--sn-beige);
}

.sn-price__name {
  font-size: 15px;
  color: var(--sn-ink);
  flex: 1 1 60%;
}

.sn-price__value {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  color: var(--sn-navy);
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   15. こだわり
   ========================================================================== */
.sn-sec-head {
  text-align: center;
  margin: 12px 0 36px;
  position: relative;
}

.sn-sec-head--nori {
  margin: 96px 0 64px;
}

.sn-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  align-items: center;
}

.sn-media__img {
  position: relative;
  border-radius: 28px;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sn-cream);
}

.sn-media__img--pale {
  background: var(--sn-pale);
}

.sn-media__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-media--reverse .sn-media__img {
  order: 2;
}

.sn-media--reverse .sn-media__body {
  order: 1;
}

.sn-point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.sn-point {
  background: var(--sn-beige);
  border-radius: 24px;
  padding: 30px 26px;
}

.sn-point__num {
  font-family: "Montserrat", sans-serif;
  color: var(--sn-gold);
  font-weight: 700;
}

.sn-point__ttl {
  font-size: 18px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 8px 0 10px;
}

.sn-cook {
  background: var(--sn-pale);
  border-radius: 28px;
  padding: 44px 36px;
}

.sn-cook__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 22px;
}

.sn-cook__card {
  background: #fff;
  border-radius: 20px;
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.sn-cook__thumb {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sn-pale);
}

.sn-cook__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-cook__body {
  flex: 1;
}

.sn-cook__num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sn-navy);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

.sn-cook__ttl {
  font-size: 17px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 12px 0 8px;
}

.sn-nori-block {
  margin-bottom: 16px;
}

.sn-nori-block__ttl {
  font-size: 17px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 0 0 4px;
}

.sn-eat {
  background: var(--sn-beige);
  border-radius: 28px;
  padding: 40px 36px;
}

.sn-eat__row {
  display: flex;
  gap: 4%;
  align-items: stretch;
}

.sn-eat__img {
  flex: 0 0 30%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sn-pale);
  min-height: 260px;
}

.sn-eat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sn-eat__body {
  flex: 0 0 66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.sn-eat__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sn-eat__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--sn-line3);
  font-size: 16px;
  font-weight: 500;
  color: var(--sn-ink);
}

.sn-eat__note {
  color: var(--sn-muted);
  font-size: 16px;
  font-weight: 500;
  margin: 6px 0 0;
}

.sn-hr {
  border: 0;
  border-top: 1px solid var(--sn-line2);
  margin: 128px 0 0;
}

/* ==========================================================================
   16. お買い上げ方法
   ========================================================================== */
.sn-orderbox {
  background: var(--sn-pale);
  border-radius: 24px;
  padding: 36px 32px;
  margin: 20px 0 56px;
  text-align: center;
}

.sn-flow-head {
  text-align: center;
  margin: 112px 0 64px;
}

.sn-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 96px;
}

.sn-flow::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 62px;
  width: 2px;
  background: #d8e2ea;
}

.sn-flow__step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 34px;
  position: relative;
}

.sn-flow__num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sn-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
}

.sn-flow__num--gold {
  background: var(--sn-gold);
}

.sn-flow__body {
  padding-top: 6px;
}

.sn-flow__ttl {
  font-size: 19px;
  color: var(--sn-navy);
  font-weight: 700;
  margin: 0 0 8px;
}

.sn-flow__text {
  font-size: 14.5px;
  color: var(--sn-body);
  margin: 0;
}

.sn-tagrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sn-tag {
  background: var(--sn-pale);
  color: var(--sn-navy);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
}

/* ==========================================================================
   17. 会社概要
   ========================================================================== */
.sn-def {
  border-top: 2px solid var(--sn-navy);
}

.sn-def__row {
  display: flex;
  gap: 20px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--sn-line);
  flex-wrap: wrap;
}

.sn-def__label {
  flex: 0 0 150px;
  font-weight: 700;
  color: var(--sn-navy);
  font-size: 15px;
}

.sn-def__value {
  flex: 1 1 280px;
  color: #44505a;
  font-size: 15px;
  margin: 0;
}

/* -- お問い合わせフォーム */
.sn-form {
  background: var(--sn-pale);
  border-radius: 28px;
  padding: 44px 36px;
}

.sn-form__row {
  margin-bottom: 20px;
}

.sn-form__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--sn-navy);
  margin-bottom: 8px;
}

.sn-form__req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sn-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.sn-form .form-input {
  background: #fff;
  border: 1px solid var(--sn-line2);
  border-radius: 14px;
  font-size: 15px;
}

.sn-form .form-input:focus {
  border-color: var(--sn-navy);
}

.sn-form__foot {
  text-align: center;
  margin-top: 28px;
}

.sn-form__privacy {
  font-size: 13px;
  color: var(--sn-mute2);
  margin: 16px 0 0;
  text-align: center;
}

/* ==========================================================================
   18. スクロールフェードイン
   ========================================================================== */
.sn-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sn-fade.is-shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sn-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sn-mv__vertical span {
    animation: none;
  }
}
/* ==========================================================================
   19. レスポンシブ
   ========================================================================== */
@media (max-width: 1100px) {
  /* 共通CSSの「PC以下でPCナビ非表示」を site.css 側でも維持する */
  .sn-nav,
  .sn-head-right,
  .sn-head-cta {
    display: none;
  }
  .sn-header__inner {
    width: 100%;
    max-width: 100%;
    padding: 12px 60px 12px 16px;
  }
  .sn-mv__vertical {
    right: 78px;
  }
}
@media (max-width: 896px) {
  .sn-prod__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sn-commit__row,
  .sn-commit__row--offset {
    width: 100%;
    margin-left: 0;
  }
  .sn-cook__grid {
    grid-template-columns: 1fr;
  }
  .sn-eat__row {
    flex-direction: column;
    gap: 24px;
  }
  .sn-eat__img,
  .sn-eat__body {
    flex: 1 1 auto;
  }
  .sn-eat__img {
    min-height: 200px;
  }
  .sn-hr {
    margin-top: 80px;
  }
  .sn-flow-head {
    margin: 72px 0 48px;
  }
  .sn-follow__btn {
    width: 46px;
    font-size: 12px;
    padding: 12px 0;
  }
  .sn-follow__icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}
@media (max-width: 639px) {
  .sn-header__inner {
    padding: 10px 56px 10px 14px;
  }
  .sn-logo__name {
    font-size: 18px;
  }
  .sn-logo__suffix {
    font-size: 11px;
  }
  .sn-mv__vertical {
    display: none;
  }
  .sn-about__inner {
    padding-bottom: 56px;
  }
  .sn-prod__inner {
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .sn-prod__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sn-commit__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .sn-commit__list {
    gap: 32px;
  }
  .sn-commit__row {
    flex-direction: column;
    gap: 20px;
    text-align: left;
  }
  .sn-commit__figure {
    flex: 0 0 auto;
    width: 200px;
    align-self: center;
  }
  .sn-order-band__inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .sn-news__inner,
  .sn-contact__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .sn-page__inner {
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .sn-pagehead__inner {
    padding-top: 32px;
    padding-bottom: 28px;
    gap: 20px;
  }
  .sn-ctabox,
  .sn-cook,
  .sn-eat,
  .sn-form {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .sn-cook__card {
    flex-direction: column;
    text-align: center;
  }
  .sn-eat__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sn-orderbox {
    padding: 28px 20px;
  }
  .sn-flow__num {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
  .sn-flow::before {
    left: 22px;
  }
  .sn-def__label {
    flex: 0 0 100%;
  }
  .sn-price__name {
    flex: 1 1 100%;
  }
  .sn-price__row {
    justify-content: flex-start;
    gap: 6px;
  }
  .sn-follow {
    gap: 6px;
  }
  .sn-follow__btn {
    width: 40px;
    font-size: 11px;
  }
  .sn-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
  .sn-mt-96 {
    margin-top: 64px;
  }
}
/* ==========================================================================
   20. 実数値ユーティリティ
   共通の spacing utility は5刻みのため、デザイン元データの実数値
   （4/8/12/14/16/22/24/26/32/36/44/48/56/64/68px）を作れない。
   コンポーネントクラスの margin を確実に上書きするため最後に置く。
   ========================================================================== */
.sn-mt-8 {
  margin-top: 8px;
}

.sn-mt-12 {
  margin-top: 12px;
}

.sn-mt-14 {
  margin-top: 14px;
}

.sn-mt-16 {
  margin-top: 16px;
}

.sn-mt-44 {
  margin-top: 44px;
}

.sn-mt-96 {
  margin-top: 96px;
}

.sn-mb-4 {
  margin-bottom: 4px;
}

.sn-mb-8 {
  margin-bottom: 8px;
}

.sn-mb-12 {
  margin-bottom: 12px;
}

.sn-mb-14 {
  margin-bottom: 14px;
}

.sn-mb-16 {
  margin-bottom: 16px;
}

.sn-mb-22 {
  margin-bottom: 22px;
}

.sn-mb-24 {
  margin-bottom: 24px;
}

.sn-mb-26 {
  margin-bottom: 26px;
}

.sn-mb-28 {
  margin-bottom: 28px;
}

.sn-mb-32 {
  margin-bottom: 32px;
}

.sn-mb-36 {
  margin-bottom: 36px;
}

.sn-mb-44 {
  margin-bottom: 44px;
}

.sn-mb-48 {
  margin-bottom: 48px;
}

.sn-mb-56 {
  margin-bottom: 56px;
}

.sn-mb-64 {
  margin-bottom: 64px;
}

.sn-mb-68 {
  margin-bottom: 68px;
}

.sn-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.sn-fz-13 {
  font-size: 13px;
}

.sn-fz-15 {
  font-size: 15px;
}

.sn-fz-16 {
  font-size: 16px;
}

/* ==========================================================================
   21. CMSフォームの見た目上書き（cms_id=7 / design_pattern=1）
   CMSは mail-form.css を <link> で後から挿入するためカスケードで後勝ちになる。
   !important を使わずに勝てるよう、CMS表示エリアのIDで詳細度を上げて
   静的フォームのデザイン（淡ブルー枠・ラベル上・白角丸入力・ネイビーpillボタン）に揃える。
   ※ CMSエリアのidを変えた場合はここのセレクタも合わせること。
   ========================================================================== */
/* -- 外枠は .sn-form 側で持つのでCMS側の余白・白背景は打ち消す */
#cms-contact-1-1-area .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
}

#cms-contact-1-1-area .form-contents form dl {
  margin-bottom: 0;
}

/* -- 2カラム（ラベル左280px）→ ラベル上・入力下の縦積みに */
#cms-contact-1-1-area .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  padding-top: 0;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sn-navy);
  line-height: 1.6;
}

#cms-contact-1-1-area .form-contents form dl dd:not(.pattern-exclusion) {
  padding: 0 0 20px;
  margin: 0;
  border-bottom: none;
}

/* -- 必須バッジ：赤・ラベル前 → ゴールドpill・ラベル後ろ */
#cms-contact-1-1-area .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: none;
}

#cms-contact-1-1-area .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sn-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 2px;
}

/* -- 入力欄：白・角丸14px・1px #e6ddce */
#cms-contact-1-1-area .form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%;
  height: auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--sn-line2);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--sn-ink);
  transition: border-color 0.3s ease;
}

#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) input.textarea {
  height: 48px;
}

#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) textarea.textarea {
  /* rows="10" だと縦に伸びすぎるので静的デザイン（6行相当）に合わせる */
  height: 150px;
  min-height: 150px;
  line-height: 1.8;
  resize: vertical;
}

#cms-contact-1-1-area .form-contents .textarea:focus {
  border-color: var(--sn-navy);
  outline: none;
}

#cms-contact-1-1-area .form-contents .textarea::placeholder {
  color: #b3bcc4;
}

/* -- 送信ボタン：グレー角丸4px → ネイビーpill */
#cms-contact-1-1-area .form-pattern-1 .submit-btn {
  display: block;
  width: fit-content;
  min-width: 240px;
  margin: 28px auto 0;
  padding: 15px 34px;
  background: var(--sn-navy);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  transition: background 0.3s ease;
}

#cms-contact-1-1-area .form-pattern-1 .submit-btn:hover {
  background: var(--sn-navy-hover);
}

#cms-contact-1-1-area .form-pattern-1 .submit-btn::before {
  background-color: #fff;
}

#cms-contact-1-1-area .form-pattern-1 .submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* -- エラー表示 */
#cms-contact-1-1-area .form-contents .form-err-msg {
  margin: 0 0 24px;
  padding: 14px 20px;
  background: #fdf0f0;
  border: 1px solid #e6b3b3;
  border-radius: 14px;
  color: #c0392b;
  font-size: 14px;
}

/* -- 送信完了メッセージ */
#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg {
  padding: 32px 24px;
  background: #fff;
  border: none;
  border-radius: 20px;
}

#cms-contact-1-1-area .form-contents .form-thanks-msg p {
  font-size: 16px;
  color: var(--sn-body);
}

#cms-contact-1-1-area .form-contents .form-thanks-msg .back-home-btn {
  width: fit-content;
  margin: 24px auto 0;
}

#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg .back-home-btn a {
  padding: 14px 34px;
  background: var(--sn-navy);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.05em;
}

#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  background: var(--sn-navy-hover);
}

@media (max-width: 639px) {
  #cms-contact-1-1-area .form-pattern-1 .submit-btn {
    min-width: 200px;
    padding: 14px 24px;
    font-size: 15px;
  }
}