@charset "UTF-8";

/* ==========================================================================
   0. 変数
      同じフォントスタックが本文・注記・フッター・タブで繰り返されていたため
      変数にまとめ、指定漏れや表記ゆれが起きないようにする。
   ========================================================================== */
:root {
  /* 和文ゴシックの共通スタック。末尾の総称フォント（serif / sans-serif）は
     元の指定を変えないよう、使用側で個別に付け足す。 */
  --font-jp: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic';
  --font-tab: "Noto Sans JP",sans-serif;   /* LINE UP のカテゴリタブ */

  --color-text: #613d22;      /* 本文 */
  --color-bg: #fffceb;        /* 背景 */
  --color-cap: #957560;       /* 注記 */
  --color-current: #f19e04;   /* ナビ現在地 */
  --color-tab-bg: #ffd666;    /* カテゴリタブ（通常） */
  --color-tab-on: #6a3906;    /* カテゴリタブ（選択・文字／枠） */
}


/* ==========================================================================
   1. ベース
   ========================================================================== */
html {font-size: 62.5%;}
body {background:var(--color-bg);color:var(--color-text);font-family:"Noto Serif JP",var(--font-jp),serif;font-size:1.6rem;font-weight:500;-webkit-text-size-adjust:100%;width:100%;margin:0 auto;position:relative;}

a {text-decoration:none;color:var(--color-text);transition:opacity 0.2s linear;}
a:hover {opacity:0.6;}
a.is-disabled {pointer-events:none;cursor:default;}
a.is-disabled:hover {opacity:1;}

button {transition:opacity 0.2s linear;}
button:hover {text-decoration:none;opacity:0.8;}

input[type="submit"] {transition:opacity 0.2s linear;font-family:var(--font-jp),sans-serif;}
input[type="submit"]:hover {text-decoration:none;opacity:0.8;}

img {max-width:100%;vertical-align:middle;}
img[src$=".svg"] {width:100%;max-width:100%;height:auto;}


/* ==========================================================================
   2. 汎用ユーティリティ
   ========================================================================== */
.pcnone {display:none!important;}
.spnone {display:block!important;}

.con_in {padding:0 50px;}
/* .con_in の左右余白を打ち消す例外（PC/SPとも同値） */
#donohoney_cap {padding:0 4px;}
.cap {font-size:1.1rem;color:var(--color-cap);font-family:var(--font-jp),sans-serif;}


/* ==========================================================================
   3. レイアウト
   ========================================================================== */
.wrapper {max-width:1280px;margin:0 auto;display:flex;}
.wrap {max-width:800px;width:100%;margin:0 auto;background-image:linear-gradient(90deg, #ffecaa, #fff7f2 50%, #ffe7e6);position:relative;}


/* ==========================================================================
   4. サイドナビ（PC）／背景装飾
   ========================================================================== */
.float_l {position:sticky;top:220px;padding:0 30px;}
.float_l li {padding:0 0 20px 0;}
.float_l li a {font-size:2.6rem;}
.float_l li.snsbtn {display:flex;margin:0 0 0 -30px;padding:10px 0 0 0;}
.float_l li.snsbtn a {display:block;width:33.3%;max-width:65px;padding:0 0 0 35px;}

/* BUY NOW ブロックは非表示（公開時に visibility の行を削除する）。
   display:none ではなく visibility:hidden を使うのは、右カラム(.bg_img_r)の幅が
   中身で決まるため。display:none にすると中身が消えてカラムが潰れ、
   .wrap の margin:auto が余白を吸収して本文が右へずれる。
   visibility:hidden なら占有領域が残るのでレイアウトは一切変わらず、
   クリックもフォーカスも無効になる。右の背景装飾もそのまま残る。 */
.float_r {visibility:hidden;position:sticky;top:220px;padding:0 30px;}
.float_r li {padding:0 0 10px 0;}
.float_r_ti {font-size:2.3rem;line-height:1.2;text-align:center;padding:0 0 20px 0;}
.float_r_ti span {font-size:3.0rem;letter-spacing:0.05em;}

.is-current {color:var(--color-current);text-shadow:2px 2px 10px #fff,2px 2px 10px #fff;font-weight:900;display:block;}

.bg_img_l {background:url(../img/bg_img_l.png) left 0 repeat-y;background-size:230px;max-width:240px;animation:floatUp 8s ease-in-out infinite;}
.bg_img_r {background:url(../img/bg_img_r.png) right 0 repeat-y;background-size:335px;max-width:240px;animation:floatUp2 8s ease-in-out infinite;}

/* KV直下の余白：サイドナビがKV画像に接しないよう開始位置を下げる。
   sticky の top（220px）と同値にすることで、KVが画面外へ抜けたタイミングで
   ちょうど吸着位置に達し、途中で位置が飛ばない。 */
.bg_img_l,
.bg_img_r {padding-top:220px;}

/* 背景をゆるやかに上下させるループ */
@keyframes floatUp {
  0%   {background-position:center 0;}
  50%  {background-position:center -60px;}
  100% {background-position:center 0;}
}
@keyframes floatUp2 {
  0%   {background-position:center 0;}
  50%  {background-position:center 60px;}
  100% {background-position:center 0;}
}


/* ==========================================================================
   5. オープニング演出
      読み込み時は静止。最初のスクロール操作で #opening に .play が付き、
      はちみつテクスチャが流れ落ちてKVがフェードアウト。
      完了後に .done が付き、KVはページ最上部の通常フロー要素として残る。
      （スクロールロックを解除し、上方向へのスクロールで再びKVを閲覧できる）
   ========================================================================== */
#opening {background:var(--color-bg);height:100vh;opacity:1;position:fixed;z-index:999;}
#opening.play {animation:fvopa 1s cubic-bezier(0.55, 0, 1, 0.45) forwards;}

/* 演出完了後：fixed オーバーレイ → ページ先頭の通常フロー要素へ切り替え */
#opening.done {position:relative;width:100%;height:100vh;opacity:1;z-index:auto;}
#opening.done #opening-fv {position:absolute;}
/* はちみつテクスチャは開始時と同じ「上部から垂れた」状態でKVに残す
   （.play を外すと animation が解除され、基準の --water-start 位置へ戻る） */
#opening.done #opening-water {position:absolute;}

/* アニメーション開始前はスクロール操作をロック */
body.js-opening-lock {overflow:hidden;height:100%;}

/* メニュー展開中のスクロールロック（位置を保持したままbodyを固定） */
body.fixed {position:fixed;left:0;width:100%;}

/* --- KV（背景＋テキストの2レイヤー） --- */
#opening-fv {position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1;overflow:hidden;}
#opening-fv .fv-bg {position:absolute;top:0;left:0;width:100%;height:100vh;display:block;}
#opening-fv .fv-bg img {width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
/* テキストは元デザインの位置を再現（PC:右側中央／SP:上部中央） */
#opening-fv .fv-text {position:absolute;z-index:2;top:50%;right:4%;width:45%;transform:translateY(-50%);}
#opening-fv .fv-text img {width:100%;height:auto;display:block;}

/* --- はちみつテクスチャ --- */
/* 開始位置は --water-start で制御（PC/SPの差分はこの1変数のみ） */
#opening-water {--water-start:-85vh;position:fixed;top:0;left:0;width:100%;height:100vh;z-index:2;pointer-events:none;overflow:hidden;}
#opening-water picture {position:absolute;left:0;bottom:0;display:block;width:100%;transform:translateY(var(--water-start));}
#opening-water img {width:100%;height:auto;display:block;vertical-align:bottom;}
#opening.play #opening-water picture {animation:flowDown 1s cubic-bezier(0.55, 0, 1, 0.45) forwards;}

@keyframes flowDown {
  0%   {transform:translateY(var(--water-start));opacity:1;}
  90%  {transform:translateY(3%);opacity:1;}
  100% {transform:translateY(3%);opacity:0;}
}
@keyframes fvopa {
  0%   {opacity:1;}
  90%  {opacity:1;}
  100% {opacity:0;}
}


/* ==========================================================================
   6. CONCEPT
   ========================================================================== */
.concept {padding:30px 0 50px 0;}
.concept_txt1 {max-width:715px;padding:0 0 0 35px;}
.concept_txt2box {display:flex;padding:0 0 20px 0;}
.concept_txt2 {width:100%;padding:20px 0 0 50px;font-size:2.4rem;}
.concept_txt2 sub {font-size:1.6rem;vertical-align:0.01em;}
.concept_img1 {max-width:220px;}


/* ==========================================================================
   7. CAMPAIGN
   ========================================================================== */
.campaign {padding:20px 0 30px 0;}
.campaign_txt1 {font-size:3.0rem;text-align:center;font-weight:700;padding:0 0 10px 0;}
.campaign_img1 {max-width:680px;margin:0 auto;}
.campaign_btn1 {max-width:422px;margin:0 auto;padding:30px 12px 0 0;}


/* ==========================================================================
   8. POINT
   ========================================================================== */
#link2 {padding:0 0 80px 0;}


/* ==========================================================================
   9. タブ機構（POINT / PRODUCTS / LINE UP 共通）
      ラジオボタン＋label によるCSSのみのタブ切替。
      input → label → .tab_content の順に同一階層へ並べることで
      隣接（+）／後方（~）セレクタが成立する。
      各タブ固有の見た目は、それぞれのセクション側で定義する。
   ========================================================================== */
.tabs {margin:0 auto;}
.tab_content {display:none;clear:both;position:relative;}

input[name="tab_item"],
input[name="tab_item2"],
input[name="tab_item3"] {display:none;}

/* 表示切替（グループごとに checked と対応コンテンツを紐付け） */
#deepmoist:checked ~ #deepmoist_content,
#meltymoist:checked ~ #meltymoist_content,
#deepmoist_barrier_lip:checked ~ #deepmoist_barrier_lip_content,
#deepmoist_lip_mask:checked ~ #deepmoist_lip_mask_content,
#meltymoist_toneup_lip:checked ~ #meltymoist_toneup_lip_content,
#meltymoist_lip_essence:checked ~ #meltymoist_lip_essence_content,
#cat_haircare:checked ~ #cat_haircare_content,
#cat_haircolor:checked ~ #cat_haircolor_content,
#cat_hairmake:checked ~ #cat_hairmake_content,
#cat_skincare:checked ~ #cat_skincare_content,
#cat_bodycare:checked ~ #cat_bodycare_content {display:block;}

/* --- POINT のタブ（2枚・画像） --- */
.tab_item {width:calc(100%/2);display:block;float:left;text-align:center;font-weight:bold;transition:all 0.4s ease;cursor:pointer;}
.tab_item:hover {opacity:0.6;}
.tabs input:checked + .tab_item {z-index:2;position:relative;}
/* 2枚のタブ画像を5px重ねて継ぎ目を消す */
.tab_item.point_tab2 {margin:0 0 0 -5px;}

/* --- PRODUCTS のタブ（4枚・画像） --- */
.tab_item2 {width:calc(100%/4);display:block;float:left;text-align:center;font-weight:bold;transition:all 0.4s ease;padding:6px 6px 20px 6px;cursor:pointer;}
.tab_item2:hover {opacity:0.6;}
.tabs input:checked + .tab_item2::after {content:"";background:url(../img/products_sel_arw.png) center bottom no-repeat;width:22px;height:11px;display:block;background-size:100%;margin:10px auto 0 auto;}

/* カートボタンは商品画像ごとに位置が異なるため個別指定 */
.tab_content .cartbtn {position:absolute;right:6.5%;max-width:367px;width:28vw;}
#deepmoist_barrier_lip_content .cartbtn {bottom:13%;}
#deepmoist_lip_mask_content .cartbtn {bottom:17.2%;}
#meltymoist_toneup_lip_content .cartbtn {bottom:16.5%;}
#meltymoist_lip_essence_content .cartbtn {bottom:15.5%;}


/* ==========================================================================
   10. SHOP
   ========================================================================== */
.shop {background:url(../img/shop_bg.png) center center no-repeat;background-size:cover;padding:30px 20px;}
.shop_txt1 {max-width:392px;margin:0 auto;display:block;}
/* 注記は .cap / shop.html の注記と同じゴシック体に揃える */
.shop_txt2 {text-align:center;font-size:2.0rem;padding:10px 0 16px 0;font-family:var(--font-jp),sans-serif;}
.shopbtn {max-width:480px;margin:0 auto;}


/* ==========================================================================
   11. LINE UP
   ========================================================================== */
.lineup_txt1 {font-size:3.0rem;text-align:center;font-weight:700;line-height:1.6;padding:60px 0;}
.lineup_txt2 {font-size:1.4rem;color:var(--color-cap);line-height:1.7;padding:0 0 30px 0;font-family:var(--font-jp),sans-serif;}
.lineupbox {display:flex;flex-wrap:wrap;margin:0 0 0 -30px;padding:30px 0 20px 0;}
.lineupbox div {width:33.3%;padding:30px 0 0 30px;}
.lineupbox a {display:block;transition:opacity 0.4s ease;}
.lineupbox a:hover {opacity:0.8;}

/* --- カテゴリタブ（丸ボタン）---
   ブランドサイト and-honey.com の PRODUCTS と同じ配色・構造。
   円のサイズはコンテナ幅基準（cqw）で決めるため、.wrap が可変幅になる
   中間サイズでも文字と円の比率が崩れない。cqw 非対応環境向けに
   直前の行で px / rem のフォールバック値を指定している。 */
.lineup_tabs {container-type:inline-size;}
.tab_item3 {display:block;float:left;width:calc(100%/5);position:relative;text-align:center;cursor:pointer;
  padding-bottom:16px;padding-bottom:2.2cqw;}
.tab_item3 span {display:flex;align-items:center;justify-content:center;width:90%;margin:0 auto;aspect-ratio:1/1;
  border-radius:50%;background:var(--color-tab-bg);border:1px solid var(--color-tab-bg);color:var(--color-tab-on);line-height:1.2;
  font-family:var(--font-tab);font-weight:700;
  transition:opacity 0.4s ease,background 0.4s ease,border-color 0.4s ease;
  font-size:2.6rem;font-size:4cqw;}
.tab_item3:hover span {opacity:0.8;}

/* 選択中：白地＋茶枠、円の真下に短い縦線 */
.tabs input:checked + .tab_item3 span {background:#fff;border-color:var(--color-tab-on);}
.tabs input:checked + .tab_item3::after {content:"";position:absolute;left:50%;width:1px;background:var(--color-tab-on);
  bottom:8px;bottom:1.1cqw;height:15px;height:2cqw;}


/* ==========================================================================
   12. フッター
   ========================================================================== */
footer {padding:80px 0 0 0;width:100%;position:relative;background:#fff;font-family:var(--font-jp),serif;letter-spacing:0.17em;}
footer .f_logo {max-width:387px;width:100%;margin:0 auto;}
footer .f_in {max-width:715px;margin:0 auto;padding:20px 20px 70px 20px;}
footer .f_in ul {display:flex;flex-wrap:wrap;margin:0 0 0 -30px;}
footer .f_in li {width:50%;padding:30px 0 0 30px;}
footer .f_in li a {border:1px solid #000;display:block;text-align:center;padding:15px 5px;font-size:2.1rem;}
footer small {display:block;padding:25px 0;text-align:center;background:#000;color:#fff;font-size:2.0rem;}


/* ==========================================================================
   13. SHOPページ（shop.html）
   ========================================================================== */
#shoplist {background:url(../img/shop/shoplist_bg.png) center center no-repeat;background-size:cover;padding:100px 0 0 0;}
#shoplist h1 {max-width:240px;margin:0 auto;padding:0 0 30px 0;}
#shoplist .shoplist_txt1 {font-size:2.1rem;text-align:center;font-weight:700;}
/* 注記は index.html の .cap と同じゴシック体に揃える */
#shoplist .shoplist_txt2 {font-size:1.3rem;text-align:center;padding:15px 0 20px 0;font-family:var(--font-jp),sans-serif;}
#shoplist .shoplist_btn {max-width:835px;margin:0 auto;}
#shoplist .shoplist_btn_in {display:flex;flex-wrap:wrap;padding:0 20px 80px 20px;margin:0 0 0 -25px;}
#shoplist .shoplist_btn_in div {width:33.3%;padding:25px 0 0 25px;container-type:inline-size;}

/* 店舗ボタン：共通の背景画像＋テキスト。
   文字サイズと左右余白は元のボタン画像（524×137px）の実測比率を
   そのまま cqw に置き換えているため、どの画面幅でも見た目が変わらない。
   右側は背景画像の矢印（左端が幅の91.4%地点）に文字がかからないよう余白を確保。 */
#shoplist .shoplist_btn_in a {
  display:flex;align-items:center;aspect-ratio:524/137;
  background:url(../img/shop/shoplist_btn_bg.png) center center no-repeat;background-size:100% 100%;
  color:var(--color-text);font-family:var(--font-jp),sans-serif;font-weight:700;
  line-height:1.2;
  padding:0 13px 0 9px;padding:0 13cqw 0 9.2cqw;
  font-size:19px;font-size:7.25cqw;
}
#shoplist .top_backbtn {max-width:263px;margin:0 auto;padding:0 0 50px 0;}

#shoplist footer {padding:60px 0 0 0;}
#shoplist footer .f_logo {max-width:157px;}
#shoplist footer .f_in {max-width:100%;margin:0 auto;padding:20px 0 15px 0;}
#shoplist footer .f_in ul {display:flex;flex-wrap:wrap;margin:0 0 0 -40px;justify-content:center;}
#shoplist footer .f_in li {width:auto;padding:0 0 0 40px;}
#shoplist footer .f_in li a {border:none;padding:15px 5px;font-size:1.4rem;}
#shoplist footer small {padding:10px 20px;font-size:1.2rem;}


/* ==========================================================================
   14. ハンバーガーメニュー（SPのみ表示）
   ========================================================================== */
#nav-toggle {display:none;}
#gloval-nav {display:none;}


/* ==========================================================================
   15. メディアクエリ
   ========================================================================== */
@media only screen and (max-width:1280px){
  .float_l li a {font-size:2.03125vw;}
  .float_r_ti {font-size:1.796875vw;}
  .float_r_ti span {font-size:2.34375vw;}
}

@media only screen and (max-width:950px){
  .bg_img_l {background-size:184px;max-width:192px;}
  .bg_img_r {background-size:268px;max-width:192px;}
  .float_l {padding:0 15px;}
  .float_r {padding:0 15px;}
}

@media only screen and (max-width:800px){
  html {font-size:52.5%;}

  .pcnone {display:block!important;}
  .spnone {display:none!important;}

  .con_in {padding:0 20px;}
  .cap {font-size:2vw;}

  /* --- ハンバーガーメニュー --- */
  #nav-toggle {display:block;position:fixed;top:2.5%;right:20px;width:30px;height:30px;z-index:1000;cursor:pointer;}
  #nav-toggle > div {position:relative;width:100%;height:100%;}
  #nav-toggle > div span {position:absolute;left:50%;display:block;width:100%;height:1.5px;background:#613d22;transform:translate(-50%,0);transition:0.4s linear;}
  #nav-toggle > div span:nth-child(1) {top:10px;}
  #nav-toggle > div span:nth-child(2) {top:20px;}
  /* オープニング演出中は非表示 */
  body.js-opening-lock #nav-toggle {display:none;}

  .open #nav-toggle span:nth-child(1) {width:72%;transform:translate(-50%,5px) rotate(45deg);}
  .open #nav-toggle span:nth-child(2) {width:72%;transform:translate(-50%,-5px) rotate(-45deg);}

  /* 全画面コンテナ。閉じている間はクリックを透過させる */
  #gloval-nav {position:fixed;top:0;left:0;width:100%;height:100%;z-index:990;display:block;overflow:hidden;pointer-events:none;}
  /* 背後を覆う暗幕。0.2秒で先にフェードイン */
  #gloval-nav::after {content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.8);opacity:0;z-index:10;transition:0.2s linear;}
  /* 右外から滑り込むドロワー本体。暗幕から0.2秒遅れて動き出す */
  #gloval-nav .gloval-nav_in {position:absolute;top:0;right:-500px;width:100%;max-width:350px;height:100%;z-index:11;padding:40px 0 20px;background-image:linear-gradient(90deg, #ffecaa, #fff7f2 50%, #ffe7e6);color:#613d22;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:0.4s linear 0.2s;}

  #gloval-nav ul {list-style:none;padding:50px 20px 0 20px;}
  #gloval-nav li a {display:block;color:#613d22;text-decoration:none;padding:10px 15px;transition:color .4s ease;font-size:2.0rem;}
  #gloval-nav small {color:#606060;display:block;text-align:center;padding:30px 0 10px 0;}
  #gloval-nav .snsbtn {display:flex;margin:0 0 0 -30px;padding:10px 0 20px 15px;}
  #gloval-nav .snsbtn a {display:block;width:33.3%;max-width:55px;padding:0 0 0 35px;}
  #gloval-nav .sb_link ul {display:flex;flex-wrap:wrap;padding:15px 30px 0 30px;}
  #gloval-nav .sb_link li {width:50%;padding:10px 5px 0 5px;}
  #gloval-nav .sb_link li a {border:1px solid #000;display:block;text-align:center;padding:10px 5px;font-size:1.15rem;}
  #gloval-nav .andhoney_top_sp {max-width:400px;}

  .open #gloval-nav {pointer-events:auto;}
  .open #gloval-nav::after {opacity:1;}
  .open #gloval-nav .gloval-nav_in {right:0;}

  /* --- サイドナビ／背景装飾はSPでは非表示 --- */
  .bg_img_l,
  .bg_img_r {display:none;}
  .float_l li a {font-size:3.25vw;}
  .float_r_ti {font-size:2.875vw;}
  .float_r_ti span {font-size:3.75vw;}

  /* --- 各セクション --- */
  .concept {padding:10px 0 30px 0;}
  .concept_txt1 {max-width:715px;padding:0 10px;}
  .concept_txt2 {padding:10px 0 0 20px;font-size:3vw;}
  .concept_txt2 sub {font-size:2vw;}
  .concept_img1 {max-width:29%;}

  .campaign_txt1 {font-size:3.75vw;}
  .campaign_btn1 {max-width:64%;padding:12px 12px 0 0;}

  .tab_content .cartbtn {width:50vw;}

  .shop_txt1 {max-width:49vw;}
  .shop_txt2 {font-size:2.5vw;}
  .shopbtn {max-width:60vw;}

  .lineup_txt1 {padding:24px 0;font-size:3.75vw;}
  .lineup_txt2 {font-size:2vw;padding:0 0 20px 0;}
  .lineupbox {margin:0 0 0 -20px;padding:20px 0 10px 0;}
  .lineupbox div {padding:20px 0 0 20px;}
  /* 円のサイズ・文字サイズはコンテナ幅基準（cqw）のため追加指定は不要。
     cqw 非対応環境向けのフォールバック値のみ縮小しておく */
  .tab_item3 {padding-bottom:10px;padding-bottom:2.2cqw;}
  .tab_item3 span {font-size:1.8rem;font-size:4cqw;}
  .tabs input:checked + .tab_item3::after {height:9px;height:2cqw;}

  #link2 {padding:0 0 30px 0;}

  /* --- フッター --- */
  footer {padding:40px 0 0 0;}
  footer .f_logo {max-width:220px;}
  footer .f_in {max-width:540px;padding:20px 20px 40px 20px;}
  footer .f_in ul {margin:0 0 0 -15px;}
  footer .f_in li {padding:15px 0 0 15px;}
  footer .f_in li a {padding:10px 5px;font-size:2.625vw;}
  footer small {font-size:2.5vw;}

  /* --- SHOPページ --- */
  #shoplist {padding:40px 0 0 0;}
  #shoplist h1 {max-width:30vw;}
  #shoplist .shoplist_txt1 {font-size:5vw;}
  #shoplist .shoplist_txt2 {font-size:3vw;}
  #shoplist .shoplist_btn_in {padding:0 20px 50px 20px;margin:0 0 0 -10px;}
  #shoplist .shoplist_btn_in div {width:50%;padding:10px 0 0 10px;}
  #shoplist .top_backbtn {max-width:60%;padding:0 0 40px 0;}

  #shoplist footer {padding:40px 0 0 0;}
  #shoplist footer .f_logo {max-width:220px;}
  #shoplist footer .f_in {max-width:540px;padding:20px 20px 40px 20px;}
  #shoplist footer .f_in ul {margin:0 0 0 -15px;}
  #shoplist footer .f_in li {width:50%;padding:15px 0 0 15px;}
  #shoplist footer .f_in li a {border:1px solid #000;padding:10px 5px;font-size:2.625vw;}
  #shoplist footer small {font-size:2.5vw;}
}

/* オープニング演出のSP調整（HTMLのpicture切替と同じ799pxを基準） */
@media screen and (max-width:799px){
  #opening-water {--water-start:-90vh;}
  #opening-fv .fv-text {top:15%;right:auto;left:50%;width:94.3%;max-width:598px;transform:translateX(-50%);}
}

/* SmartPhone */
@media only screen and (max-width:480px){
  body {font-size:3.5vw;}
  #nav-toggle {top:2%;}
}