@charset "UTF-8";
/* =========================================================================
   st006 LP — LAYOUT CLONE (skeleton only)
   すべての数値は LAYOUT-DESIGN-SYSTEM.md と 1:1 で対応します。
   写真・コピーはダミー。レイアウト / 余白比 / 重なり / 動きのみを再現。
   ========================================================================= */

:root{
  --bg-mint:      var(--c-main, #f2f9f8);
  --bg-mint-top:  #f5fbfb;
  --bg-mint-alt:  #f5faf9;
  --bg-mint-deep: #e9f3f1;
  --paper:        var(--c-base, #ffffff);
  --paper-off:    #fefefe;
  --ink:          var(--c-accent, #000000);
  --ink-body:     var(--c-text, #333333);
  --ink-nav:      #222222;
  --muted:        #9b9b9b;
  --rule:         #e1e5e7;
  --on-photo:     #ffffff;
  --font-jp: var(--font-body, "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,Osaka,sans-serif);
  --font-en: var(--font-head, "Futura","Century Gothic","Avenir Next",var(--font-jp));
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; }
body,h1,h2,h3,h4,h5,p,ul,li,figure,figcaption,dl,dd{ margin:0; padding:0; }
ul{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
html.fixed,body.fixed{ height:100%; overflow:hidden; }   /* メニュー展開中の背面スクロール停止 */

body{
  width:100%;
  min-width:1100px;              /* ← PC でこれ以下に縮まない（原典どおり） */
  font-size:13px;
  font-family:var(--font-en);
  color:var(--ink-body);
  background:var(--paper);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================================
   0. Loader / Page
   ========================================================================= */
.pace{
  position:fixed; inset:0; z-index:100000;
  background:var(--bg-mint);
  pointer-events:all;
}
.pace .pace-logo{
  position:absolute; top:50%; left:50%;
  width:160px; height:42px; margin:-21px 0 0 -80px;
  border:2px solid var(--ink); border-radius:60px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-size:13px; letter-spacing:6px;
  transition:all .7s ease .3s;
}
.pace .pace-progress{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--ink); transition:width .6s ease; }
body.loaded .pace{ opacity:0; pointer-events:none; transition:opacity .5s ease .4s; }
body.loaded .pace .pace-logo{ margin:-11px 0 0 -80px; opacity:0; }

#Page{
  width:100%; min-width:1024px; position:relative;
  background:var(--bg-mint);   /* ★ 地色は body(白) ではなく #Page に敷く。
                                  セクション間でマージンが相殺されて隙間ができても白が抜けない */
  opacity:0; transition:all .5s ease;
}
#Page.active{ opacity:1; }

/* =========================================================================
   1. Header
   ========================================================================= */
#Header{
  position:absolute; top:20px; right:5px; z-index:1001;
  background:none; transition:all .5s ease;
}
#Tools .inner{ display:flex; }
#Tools .inner p{ padding:0 15px; }
#Tools .inner p:first-child{ border-right:1px solid var(--ink); }
#Tools .inner p a{ font-family:var(--font-en); font-size:15px; line-height:15px; letter-spacing:3px; color:var(--ink); }
#Tools .inner p a.active{ color:#888; pointer-events:none; }

#Header .awards{ margin:14px 15px 0 0; text-align:right; }
#Header .awards .icon{ width:36px; height:36px; }

/* PC ではハンバーガーとパネルを出さない（.pc / .sp と同じ役割） */
#Header #HeaderMenu{ display:none; }
#Menubtn{ display:none; }

/* global.min.css の .centering 相当 */
.centering{ display:flex; align-items:center; justify-content:center; }

/* =========================================================================
   2. Keyvisual  — ナビはヘッダーではなく KV の「左下」
   ========================================================================= */
#Keyvisual{
  width:100%; height:851px; position:relative;
  background:#eef5f5 center center / cover no-repeat;
  overflow:hidden;
}
#Keyvisual .kv-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#Keyvisual .kv-lead{
  position:absolute; top:58%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-jp); font-size:20px; letter-spacing:8px; color:var(--ink);
  white-space:nowrap;
}
#Keyvisual .scroll{ position:absolute; top:0; right:0; height:100%; }
#Keyvisual .scroll p{
  padding:0 32px; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-en); font-size:11px; line-height:11px; letter-spacing:2px;
  color:var(--ink); position:relative; height:100%; display:flex; align-items:center;
}
#Keyvisual .scroll p::after{
  content:""; width:1px; height:35px; background:var(--ink);
  position:absolute; bottom:65px; left:37px;
}

#Nav{ position:absolute; bottom:25px; left:32px; z-index:9999; }
#Nav.active{
  position:fixed; bottom:auto; top:25px;
  z-index:101; animation:fadeDown 1s ease-in-out 1 normal;
}
#Nav .modalMenu ul{ display:flex; align-items:center; justify-content:flex-start; }
#Nav .modalMenu ul li{ margin:0 28px 0 0; }
#Nav .modalMenu ul li.menuicon{ margin:3px 35px 0 0; }
#Nav .modalMenu ul li.menuicon .icon{
  width:2.7vw; min-width:35px; max-width:42px; height:auto; aspect-ratio:1/1;
}
#Nav .modalMenu ul li a{
  font-family:var(--font-en); font-size:15px; line-height:15px; letter-spacing:2px;
  color:var(--ink-nav); position:relative; transition:0s; white-space:nowrap;
}
#Nav .modalMenu ul li a::after{
  content:""; width:100%; height:3px; background:var(--ink);
  position:absolute; bottom:-6px; left:0; opacity:0;
}
#Nav .modalMenu ul li a:hover::after,
#Nav .modalMenu ul li a.active::after{ opacity:1; }

#Keyvisual .amazonbtn{
  position:fixed; bottom:15px; right:32px; z-index:9999;
  animation:fadeDown 1s ease-in-out 1 normal;
}
#Keyvisual .amazonbtn a{
  display:block; background:var(--paper); border:3px solid var(--ink); border-radius:74px;
  padding:16px 34px; font-family:var(--font-jp); font-size:14px; letter-spacing:2px; color:var(--ink);
}
#Keyvisual .amazonbtn a:hover{ opacity:.5; }

/* =========================================================================
   3. 共通セクション骨格
   ★ 全セクションが -80px で重なる（土台の崩しルール）
   ========================================================================= */
#Contents section{ position:relative; line-height:1.5; }
/* ★ -80px の食い込みは PC 限定（原典も @media min-width:767px 配下） */
@media all and (min-width:767px){
  #Contents section{
    margin-top:-80px;          /* ← 前のセクションに 80px 食い込む */
    padding:80px 0 100px 0;    /* ← 上 80 / 下 100 の非対称 */
  }
}
#Contents section .inner{
  max-width:1058px; min-width:1058px;   /* ← max と min が同値：流動しない */
  padding:0 40px;                        /* → 実コンテンツ幅 978px */
  margin:0 auto;
}
.flex{ display:flex; justify-content:space-between; flex-wrap:wrap; }

.section_group{
  font-family:var(--font-en); font-size:26px; line-height:1; letter-spacing:1.3px;
  color:var(--ink); text-align:center; position:relative; padding-bottom:14px;
}
.section_group::after{
  content:""; position:absolute; left:50%; bottom:0;
  height:3px; background:var(--ink);
  width:200px; margin:0 0 0 -103px;      /* ← 中央から 3px 左へズレている */
}
.section_title{
  font-family:var(--font-en); font-size:19px; line-height:19px; letter-spacing:4px;
  color:var(--ink); text-align:center;
}
.section_title_tall{ font-size:25px; line-height:25px; }
.section_sub{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:14px;
  letter-spacing:1px; color:var(--ink); margin:12px auto 0 auto; text-align:center;
}
.section_text{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:26px;
  letter-spacing:2px; color:var(--ink); margin:30px 0 0 0;
}
figcaption{ position:relative; background:var(--paper-off); padding:28px 35px; }
.sp{ display:none; }

/* ---- ダミー画像フォールバック ---- */
.ph{ background:linear-gradient(135deg,#dfeceb 0%,#c9dedd 60%,#bcd6d4 100%); }

/* ---- アイコン（Lucide / 絵文字は一切使わない） ----
   線幅は 1.75（1.5〜2px の範囲）で統一。塗りは持たせない。 */
.icon{
  width:24px; height:24px; display:inline-block; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle;
}

/* =========================================================================
   4. Whatsst006
   ========================================================================= */
section#Whatsst006{ background:linear-gradient(var(--bg-mint-top),var(--bg-mint)); }
/* ★ 最初のセクションだけ -80px の食い込みを打ち消す（KV と隙間なく密着させる） */
@media all and (min-width:767px){
  section#Whatsst006{ padding-top:0 !important; margin-top:0 !important; }
}

/* ---- #About : 全面写真 ＋ 右 30% だけテキスト（左 70% は余白） ---- */
#About{
  position:relative;
  padding:60px 0 135px 0;      /* 上 60 / 下 135 — 非対称 */
  background:#cddcdb center center / cover no-repeat;
  overflow:hidden;
}
#About .about-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#About .inner{ padding:0 40px; position:relative; z-index:1; }
#About .inner > div{ width:29.7%; margin:auto; }   /* ← 29.7%（30% ではない） */
#About .inner .inner_l{ text-align:center; }
#About .inner .inner_l .section_group{ color:var(--on-photo); position:absolute; top:-60px; left:0; width:100%; }
#About .inner .inner_l .section_group::after{ background:var(--on-photo); }
#About .inner .inner_r{
  width:30%; float:right; padding-top:33px;   /* ← 右列だけ 33px 落とす（段差） */
}
#About .inner .inner_r h4{
  font-family:var(--font-en); font-size:19px; letter-spacing:4px; color:var(--on-photo); text-align:center;
}
#About .inner .inner_r p{
  font-family:var(--font-jp); font-size:14px; line-height:30px;  /* ← 2.14 倍の行間 */
  color:var(--on-photo); margin:40px 0 0 0;
}
#About .inner .clear-float{ clear:both; }

/* ---- #HowToPlay ---- */
#HowToPlay{ padding:151px 0 0 0; background:var(--bg-mint); }   /* ← 151px */
#HowToPlay .inner figure{ margin:70px auto 0 auto; padding:0 40px; }
#HowToPlay .inner figure img{ width:100%; }

/* =========================================================================
   5. Product
   ========================================================================= */
section#Product{ padding:0; }

/* ---- #Feature : 共通 -80px に加えて さらに -40px ---- */
#Product .feature{
  margin-top:-40px;                 /* ← 追加の引き上げ */
  padding:140px 0 96px 0;
  background:var(--bg-mint);
}
#Product .feature .inner .section_title{ margin:80px 0 0 0; }

/* 紹介部：978px より狭い 689px の内枠。画像 48% / テキスト 50%（合計 98%） */
#Product .feature .features-st006{ max-width:689px; padding-top:50px; margin:auto; }
#Product .feature .features-st006::after{ content:""; display:block; clear:both; }
#Product .feature .features-st006-img{ width:48%; display:inline-block; }
#Product .feature .features-st006-description{
  width:50%; display:inline-block; padding-top:56px; float:right;  /* ← 56px の段差 */
}
#Product .feature .features-st006-description h4{
  font-family:var(--font-en); font-size:22px; letter-spacing:4px; color:var(--ink); max-width:240px;
}
#Product .feature .features-st006-description p{ font-family:var(--font-jp); line-height:30px; font-size:13px; padding-top:39px; }

/* 3カード：27% × 3 → ガター 9.5% ずつ（非常に広い） */
#Product .feature .inner ul{ margin:68px 0 0 0; }
#Product .feature .inner ul li{ width:27%; }
#Product .feature .inner ul li h5{ font-family:var(--font-jp); font-size:15px; letter-spacing:2px; text-align:center; }
#Product .feature .inner ul li figure{
  margin:30px 0 0 0; border-radius:100%; overflow:hidden;
  border:4px solid var(--ink);           /* ← 4px */
  aspect-ratio:1/1;
}
#Product .feature .inner ul li figure img{ width:100%; height:100%; object-fit:cover; }
#Product .feature .inner ul li p{
  font-family:var(--font-jp); font-weight:500; font-size:16px; line-height:16px;
  letter-spacing:3px; color:var(--ink); text-align:center; margin:30px 0 0 0;
}

/* ---- 全幅 700px の動画ブロック（narrow → full-bleed の呼吸） ---- */
.videoplayer{ position:relative; background:var(--bg-mint); height:700px; }
.videoplayer .videoframe{ width:100%; height:700px; background:#dbeaea; }
.videoplayer .videoframe img{ width:100%; height:100%; object-fit:cover; }
.videoplayer figure{ position:absolute; top:0; left:0; width:100%; height:700px; }
.videoplayer figure a{ display:block; width:100%; height:100%; position:relative; }
.videoplayer figure a .thumbnail{ width:100%; height:100%; object-fit:cover; }
.videoplayer figure a .playicon{
  width:93px; height:139px; position:absolute; top:50%; left:50%;
  margin:-46px 0 0 -69px;        /* ★ X/Y が入れ替わった"ズレた中央寄せ"。直さない */
  border:3px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7);
}
.videoplayer figure a .playicon .icon{ width:34px; height:34px; margin-left:4px; }
.videoplayer figure a:hover .playicon{ opacity:.5; }

/* ---- #Colors : 33% × 3（ガター 0.5%） / 25% × 4（ガター 0） ---- */
#Colors{ background:var(--bg-mint); padding-top:140px; }
#Colors .family_title{
  padding-top:35px; font-family:var(--font-en); font-size:24px; line-height:24px;
  letter-spacing:5px; text-align:center; color:var(--ink);
}
#Colors .family_title.petit{ font-size:19px; line-height:19px; }
#Colors .inner ul{ margin:30px 0 67px 0; }
#Colors .inner ul li{ width:33%; }              /* 33%（33.333% ではない） */
#Colors .inner .petit li{ width:25%; }          /* 4列でガター 0 */
#Colors .inner ul li figure{ margin:32px 0 0 0; padding:0 0 0 10%; }   /* 右へ 10% */
#Colors .inner ul li:last-child figure{ padding:0 10% 0 0; }           /* 最後だけ左へ 10% */
/* ★ カラーバリエーションは「同一サイズの透過画像」を等寸で並べる。
   枠・背景は付けず、地のミントに馴染ませる（原典と同じ扱い）。 */
#Colors .inner ul li figure img{
  width:100%; aspect-ratio:1/1;
  object-fit:contain; object-position:center bottom;   /* 接地面（下端）を揃える */
  background:none; border:none; border-radius:0;       /* 枠・角丸・影は付けない */
}
#Colors .inner ul li h5{
  font-family:var(--font-en); font-size:15px; letter-spacing:3px; text-align:center; margin:20px auto 5px;
}
#Colors .inner ul li p{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:14px;
  letter-spacing:3px; color:var(--ink); text-align:center; margin:10px 0 0 0;
}
#Colors .inner ul li p.family_text_attention{ color:var(--muted); }

/* ---- #Technology : 46% × 2、li 自体が flex 行（px + % + vw 混在） ---- */
#Technology{ background:var(--bg-mint); padding:95px 0 0 0; }   /* ← 95px */
#Technology .inner ul{ margin:75px 0 0 0; }
#Technology .inner ul li{
  width:46%; margin:0; position:relative;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap;
}
#Technology .inner ul li figure{
  border-radius:100%; overflow:hidden; border:3px solid var(--ink);   /* ← 3px */
  width:187px; height:187px; flex:0 0 187px;                          /* ← 固定 px */
}
#Technology .inner ul li figure img{ width:100%; height:100%; object-fit:cover; }
#Technology .inner ul li p{
  font-family:var(--font-jp); font-weight:500; font-size:16px; line-height:30px;
  letter-spacing:3px; color:var(--ink); text-align:left;
  padding:0 0 0 1.5vw; width:calc(55%);                                /* ← % + vw */
}
#Technology .inner ul li .num{
  display:block; position:absolute; width:35px; top:-25px; left:0;     /* ← 親からはみ出す */
  font-family:var(--font-en); font-size:26px; letter-spacing:2px; color:var(--ink);
}

/* ---- #ExpertOpinion : calc(50% - 66px) ---- */
#ExpertOpinion{ background:var(--bg-mint); padding:100px 0 0 0; }
#ExpertOpinion .inner div.flex{ margin:32px 0 0 0; }
#ExpertOpinion .inner div.flex figure{
  width:calc(50% - 66px);         /* ← 66px の非トークン・ガター */
  aspect-ratio:1/1;
  border-radius:100%; overflow:hidden; border:3px solid var(--ink);
}
#ExpertOpinion .inner div.flex figure img{ width:100%; height:100%; object-fit:cover; }
#ExpertOpinion .inner div.flex .txt{ width:50%; display:flex; align-items:center; justify-content:flex-start; }
#ExpertOpinion .inner div.flex .txt span p{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:30px;
  letter-spacing:2px; color:var(--ink); text-align:left;
}
#ExpertOpinion .inner div.flex .txt span h4{
  margin:20px 0 0 0; font-family:var(--font-jp); font-weight:500;
  font-size:20px; line-height:30px; letter-spacing:2px; color:var(--ink);
}
#ExpertOpinion .inner div.flex .txt span h4 span,
#ExpertOpinion .inner div.flex .txt span h4 small{ font-size:14px; line-height:30px; letter-spacing:2px; }
#ExpertOpinion .inner div.flex .txt span h4 span{ margin:0 25px 0 0; }

/* ---- #DemonstrationTest : calc(50% - 132px)（Expert の 2倍） ---- */
#DemonstrationTest{ background:var(--bg-mint); padding:100px 0 0 0; }
#DemonstrationTest .inner .section_title{ font-size:29px; line-height:29px; margin-bottom:-5px; margin-top:-5px; }
#DemonstrationTest .inner div.flex{ margin:32px 0 0 0; }
#DemonstrationTest .inner div.flex figure{ width:calc(50% - 132px); padding:0 4% 0 0; overflow:hidden; }
#DemonstrationTest .inner div.flex .txt{ width:50%; display:flex; align-items:center; justify-content:flex-start; }
#DemonstrationTest .inner div.flex .txt span{ padding:10px 0 10px 0; }
#DemonstrationTest .inner div.flex .txt span h4{
  font-family:var(--font-jp); font-weight:bold; font-size:20px; line-height:30px; letter-spacing:4px; color:var(--ink);
}
#DemonstrationTest .inner div.flex .txt span p{
  margin:20px 0 0 0; font-family:var(--font-jp); font-weight:500; font-size:14px;
  line-height:30px; letter-spacing:2px; color:var(--ink); text-align:left;
}
#DemonstrationTest .inner div.flex .txt span .demonstrationbtn{
  display:inline-flex; align-items:center; gap:8px;
  margin:20px 0 0 0; color:var(--ink); font-family:var(--font-jp);
  font-weight:500; font-size:14px; line-height:20px; letter-spacing:2px;
  border-bottom:2px solid var(--ink); cursor:pointer;
}
#DemonstrationTest .demonstrationbtn .icon{ width:16px; height:16px; }

/* =========================================================================
   6. Voice — align-items:center で高さが波打つ
   ========================================================================= */
section#Voice{ background:var(--bg-mint); }
.top-voice{
  display:flex; justify-content:space-between; align-items:center;   /* ★ center：上端を揃えない */
  flex-wrap:wrap; padding:40px 0;
}
.top-voice-item{ width:300px; text-align:center; }                    /* 固定 300px × 3 → 隙間 39px */
.top-voice-image{ width:300px; max-width:100%; margin:0 auto; }
.top-voice-image img{ width:100%; }
.top-voice-text{ font-family:var(--font-jp); line-height:30px; padding-top:30px; font-size:14px; }
.button-single{ width:450px; margin:0 auto; }
.button-single a{
  display:block; position:relative; width:450px; padding:25px 0;
  background:var(--paper); border:4px solid var(--ink); border-radius:74px;   /* ← ここだけ 4px */
  font-family:var(--font-en); font-size:20px; letter-spacing:1px; color:var(--ink); text-align:center;
}
.button-single a:hover{ background:var(--ink); color:var(--paper); }
.opinion-spacer{ padding-top:50px; }     /* ★ 空要素で 50px の間を作る */

/* =========================================================================
   7. Specification — 見出しチップが黒枠を貫通する
   ========================================================================= */
section#Specification{ background:var(--bg-mint); padding:132px 0 0 0; }   /* ← 132px */
#Specification .inner > .chip{
  background:var(--bg-mint);        /* ← 背景と同色で枠線に穴を開ける */
  display:block; width:300px; margin:0 auto; position:relative; z-index:2;
}
#Specification .inner .inner_box{
  margin:-40px auto 0 auto;         /* ← 40px 引き上げてチップに貫通させる */
  border:2px solid var(--ink);      /* ← 2px */
  padding:105px 60px 65px 60px;     /* ← 上 105 / 下 65 の非対称 */
}
#Specification .inner .inner_box div.flex figure{ width:39%; padding:0 0 0 2%; }
#Specification .inner .inner_box div.flex figure img{ max-width:420px; }
#Specification .inner .inner_box div.flex figure.sp{ display:none; }
#Specification .inner .inner_box div.petit{ padding-top:80px; }
#Specification .inner .inner_box div.flex ul{ width:51%; }
#Specification .inner .inner_box div.flex ul li{
  display:flex; flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
  margin:0 0 18px 0; padding:0 18px 18px 18px;
}
#Specification .inner .inner_box div.flex ul li .family_name{ width:30%; margin:auto; }
#Specification .inner .inner_box div.petit ul li .family_name{ width:50%; }
#Specification .inner .inner_box div.flex ul li h4{
  width:27%; font-family:var(--font-jp); font-weight:bold; font-size:12px;
  line-height:22px; letter-spacing:2px; color:var(--ink);
}
#Specification .inner .inner_box div.flex ul li p{
  width:73%; font-family:var(--font-jp); font-weight:500; font-size:12px;
  line-height:22px; letter-spacing:2px; color:var(--ink); text-align:left;
}
#Specification .inner .inner_box div.flex .annotation{
  font-family:var(--font-jp); font-weight:500; font-size:12px; line-height:12px;
  letter-spacing:1px; color:var(--ink); text-align:left;
  padding:0 0 0 51%; margin:10px 0 0 0;      /* ★ 製品A は右半分 */
}
#Specification .inner .inner_box div.petit .annotation{ padding:0 0 0 2%; }  /* ★ 製品B は左端 */

/* =========================================================================
   8. Purchase / Stores
   ========================================================================= */
section#Purchase{ padding:0; }
#Stores{ padding:140px 0 0 0; background:var(--bg-mint); }
#Stores .inner .section_group::after{ width:210px; margin:0 0 0 -110px; }
#Stores .inner .section_sub{ margin:35px 0 0 0; }
#Stores .inner .amazonbtn{ display:block; width:100%; margin:65px 0 0 0; }
#Stores .inner .amazonbtn:hover{ opacity:.5; }
#Stores .inner .amazonbtn img{ width:100%; }
#Stores .inner .section_title{ margin:68px 0 0 0; }
#Stores .inner ul{ margin:30px 0 0 0; }
#Stores .inner ul li{
  display:flex; flex-wrap:wrap; width:100%;
  border-top:1px solid var(--rule); padding:19px 0;
}
#Stores .inner ul li:last-child{ border-bottom:1px solid var(--rule); }
#Stores .inner ul li p{
  width:35%; font-family:var(--font-jp); font-weight:500; font-size:14px;
  line-height:24px; letter-spacing:1px; color:var(--ink); text-align:left;
}
#Stores .inner ul li p:last-child{
  width:30%; text-align:right; padding:0 50px 0 0;   /* ★ 35+30=65%、右端から 50px 逃がす */
  margin-left:auto;
}
#Stores .payment{
  background:var(--paper); width:100%; border-radius:30px;
  padding:25px 15%; margin-top:50px;
}
#Stores .payment .description{ width:25%; display:inline-block; margin:auto 0; vertical-align:middle; font-family:var(--font-jp); font-size:13px; }
#Stores .payment .methods{ display:inline-block; vertical-align:middle; }
#Stores .payment .methods .method-item{
  width:auto; display:inline-block; margin-right:20px;
  border:1px solid var(--rule); border-radius:4px; padding:6px 14px; font-size:11px; letter-spacing:1px;
}
#Stores .payment .methods .method-item:last-child{ margin-right:0; }

/* =========================================================================
   9. FAQ — Q バッジが上辺からはみ出す 2カラム
   ========================================================================= */
section#FAQ{ padding:0; }
#FAQList{ padding:140px 0 66px 0; background:var(--bg-mint); }
#FAQList .inner .section_group::after{ width:80px; margin:0 0 0 -44px; }
#FAQList .inner ul{ margin:62px 0 0 0; }
#FAQList .inner ul li{
  width:calc(50% - 27px);        /* ← 54px ガター */
  background:var(--paper); padding:56px 60px; margin:0 0 54px 0; position:relative;
}
#FAQList .inner ul li::before{
  content:"Q"; position:absolute; top:-14px; left:60px;   /* ★ 上辺から -14px はみ出す */
  width:32px; height:46px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-size:18px; letter-spacing:1px;
}
#FAQList .inner ul li h4{
  font-family:var(--font-jp); font-weight:bold; font-size:15px; line-height:30px;
  letter-spacing:2px; color:var(--ink);
}
#FAQList .inner ul li p{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:28px;
  letter-spacing:1px; color:var(--ink); margin:12px 0 0 0;
}
#FAQList .inner ul li p a{ display:inline; border-bottom:1px solid; }
#FAQList .inner ul li p a:hover{ border-color:rgba(0,0,0,0); }

/* =========================================================================
   10. Support
   ========================================================================= */
section#Support{ padding:0; }
#Contact{ padding:110px 0 0 0; background:var(--bg-mint-deep); }   /* ← 110px */

#Consultation{ padding:0 0 75px 0; background:var(--bg-mint-deep); }
#Consultation .inner .panel{
  display:flex; flex-wrap:wrap;
  border:2px solid var(--ink); border-radius:30px; padding:75px 50px 0;   /* 下だけ 0 */
}
#Consultation .inner .panel .inner_l,
#Consultation .inner .panel .inner_r{ width:50%; }
#Consultation .inner .panel .inner_l{ padding:0 0 0 15px; }   /* ★ 左右で padding-left が違う */
#Consultation .inner .panel .inner_r{ padding:0 0 0 40px; }
#Consultation .inner .panel .section_title{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--font-en); font-size:24px; line-height:24px; letter-spacing:3px;
  color:var(--ink); text-align:center;
}
#Consultation .inner .panel .section_title .icon{ width:34px; height:34px; }
.contactbtn .icon{ width:20px; height:20px; margin-right:10px; }
#Consultation .inner .panel .contactbtn{
  display:block; font-family:var(--font-jp); font-weight:bold; font-size:20px; line-height:20px;
  letter-spacing:1px; color:var(--ink); margin:10px 0; background:var(--paper);
  border-radius:74px; border:2px solid var(--ink); padding:25px 0; width:100%; text-align:center;
}
#Consultation .inner .panel .contactbtn:hover{ background:var(--ink); color:var(--paper); }
#Consultation .inner .panel .inner_r li{ display:flex; flex-wrap:wrap; margin:0 0 27px 0; }
#Consultation .inner .panel .inner_r li:last-child{ margin:0; }
#Consultation .inner .panel .inner_r li h5,
#Consultation .inner .panel .inner_r li > span,
#Consultation .inner .panel .inner_r li p{
  font-family:var(--font-jp); font-weight:bold; font-size:14px; letter-spacing:1px; color:var(--ink);
}
#Consultation .inner .panel .inner_r li h5{ width:5em; }
#Consultation .inner .panel .inner_r li > span{ width:10%; border:none; padding:0; }
#Consultation .inner .panel .inner_r li p{ width:75%; }
#Consultation .inner .panel .inner_r li p span{ font-size:12px; letter-spacing:0; }

#ContactNav .inner.flex .inner_l,
#ContactNav .inner.flex .inner_r{ width:calc(50% - 48px); text-align:center; }  /* ← 96px ガター */
#ContactNav .inner .section_title{
  font-family:var(--font-en); font-size:30px; line-height:30px; letter-spacing:7px; color:var(--ink);
}
#ContactNav .inner .section_sub{
  font-family:var(--font-jp); font-weight:500; font-size:14px; line-height:24px;
  letter-spacing:1px; color:var(--ink); margin:30px 0 0 0;
}
#ContactNav .inner .contactbtn{
  display:block; font-family:var(--font-jp); font-weight:bold; font-size:20px; line-height:20px;
  letter-spacing:1px; color:var(--ink); margin:25px 0 0 0; background:var(--paper);
  border-radius:74px; border:2px solid var(--ink); padding:30px 0; width:100%; text-align:center;
}
#ContactNav .inner .contactbtn:hover{ background:var(--ink); color:var(--paper); }

#NewsLetter{ padding:75px 0; background:var(--bg-mint-deep); }
#NewsLetter .inner .card{
  display:flex; flex-wrap:wrap; background:var(--paper); width:100%; border-radius:30px;
}
#NewsLetter .inner .card .inner_l,
#NewsLetter .inner .card .inner_r{ width:50%; padding:60px 45px; }
#NewsLetter .inner .card .section_title{
  font-family:var(--font-en); font-size:30px; line-height:30px; letter-spacing:7px;
  color:var(--ink); text-align:left;
}
#NewsLetter .inner .card .section_sub{
  font-family:var(--font-jp); font-weight:500; font-size:12px; line-height:12px;
  letter-spacing:1px; color:var(--ink); margin:27px 0 0 0; text-align:left;
}
#NewsLetterForm{
  position:relative; display:flex; align-items:center;
  border-bottom:2px solid var(--ink);       /* ← 下線のみ */
  width:100%; padding:0 0 15px 0; margin:18px 0 0 0;
}
#NewsLetterForm #FormEmail{
  width:78%; background:var(--paper); border:none; outline:none;
  font-size:12px; line-height:12px; letter-spacing:1px; padding:10px 10px 10px 0; color:var(--muted);
}
#NewsLetterForm #Submitbtn{
  width:22%; color:var(--ink); background:var(--paper); display:block;
  font-size:12px; line-height:12px; letter-spacing:2px; -webkit-appearance:none; outline:none;
  border-radius:30px; border:2px solid var(--ink); margin:0; padding:7px 20px; cursor:pointer;
}
#NewsLetterForm #Submitbtn:hover{ background:var(--ink); color:var(--paper); }

#Sns{ padding:5px 0 90px 0; background:var(--bg-mint-deep); }
#Sns .section_sub{ margin:0; }
#Sns .inner div.flex{ margin:40px 0 0 0; }
#Sns .inner div.flex .col{ width:33%; text-align:center; }
#Sns .inner div.flex .col .contactbtn-ja .icon{ width:22px; height:22px; margin-right:12px; }
#Sns .inner div.flex .col .contactbtn-ja{
  display:flex; align-items:center; justify-content:center;
  margin:0 auto; font-family:var(--font-en); font-size:24px; line-height:24px;
  letter-spacing:4px; color:var(--ink); background:var(--paper); border-radius:74px;
  border:4px solid var(--ink); padding:29px 0; width:320px; text-align:center;   /* ← 固定 px */
}
#Sns .inner div.flex .col .contactbtn-ja:hover{ background:var(--ink); color:var(--paper); }

/* =========================================================================
   11. Media — flex-start による端数行ラグド
   ========================================================================= */
section#Media{ padding:0; }
#Coverage{ padding:130px 0 0 0; background:var(--bg-mint); }   /* ← 130px */
#Coverage .inner ul{ margin:76px 0 0 0; justify-content:flex-start; }   /* ★ space-between ではない */
#Coverage .inner ul li{ width:calc(33.3% - 16px); margin:0 24px 24px 0; }
#Coverage .inner ul li:nth-child(3n){ margin:0 0 24px 0; }
#Coverage .inner ul li a{ display:block; overflow:hidden; }
#Coverage .inner ul li a img{ transition:transform .4s ease; width:100%; }
#Coverage .inner ul li a:hover img{ transform:scale(1.1); }

#Award{ padding:118px 0 50px 0; background:var(--bg-mint); }   /* ← 118px / 下 50px */
#Award .inner ul{ margin:67px 0 0 0; justify-content:flex-start; }
#Award .inner ul li{ width:calc(33.3% - 16px); margin:0 24px 40px 0; }
#Award .inner ul li:nth-child(3n){ margin:0 0 40px 0; }
#Award .inner ul li a{ display:block; overflow:hidden; }
#Award .inner ul li a img{ transition:transform .4s ease; width:100%; }
#Award .inner ul li a:hover img{ transform:scale(1.1); }
#Award .inner ul li h4{
  font-family:var(--font-jp); font-size:14px; line-height:25px; letter-spacing:2px;
  color:var(--ink); margin:20px 0 0 0; text-align:center;
}

/* =========================================================================
   12. Footer — 左右も上下も非対称
   ========================================================================= */
#Footer{
  position:relative; background:var(--bg-mint); width:100%; margin:0 auto;
  min-width:1100px; z-index:1000;
}
#Footer #FooterInner{
  width:1000px; padding:82px 260px 78px 250px;   /* ★ 82 / 260 / 78 / 250 */
  margin:0 auto;
}
#Footer #FooterInner .footer_logo{
  width:215px; margin:0 auto; text-align:center;
  font-family:var(--font-en); font-size:24px; letter-spacing:8px; color:var(--ink);
}
#Footer #FooterInner p{
  margin:32px auto 0 auto; font-family:var(--font-jp); font-size:14px;
  line-height:30px; letter-spacing:1px; color:var(--ink); text-align:center;
}
#Footer #FooterInner .copyright{ margin:20px auto 0 auto; text-align:center; font-size:12px; }

/* =========================================================================
   13. Motion
   ========================================================================= */
@keyframes fadeUp   { 0%{ opacity:0; transform:translateY(80px);  } 100%{ opacity:1; transform:translateY(0); } }
@keyframes fadeDown { 0%{ opacity:0; transform:translateY(-80px); } 100%{ opacity:1; transform:translateY(0); } }
.inview{ opacity:0; transform-style:preserve-3d; }
.inview.move{ animation:fadeUp 1s ease-in-out 1 normal forwards; }
a:hover img{ opacity:.9; }

/* =========================================================================
   14. RESPONSIVE — 実質のブレークポイントは 767px の 1本のみ
   （768〜1057px はリフローせず 978px 固定のまま横スクロール）
   ========================================================================= */

/* --- 1020px 以下：追従 CTA を隠す --- */
@media all and (max-width:1020px){
  .keyvisual-type2 .amazonbtn{ display:none; }
}

/* --- 834px 以下：KV の高さのみ 100vh 化 --- */
@media screen and (max-width:834px){
  #Keyvisual{ height:100vh; }
}

/* ========================= SP : ≤767px ========================= */
@media all and (max-width:767px){

  body{ min-width:320px; font-size:3.5vw; }
  #Page{ min-width:320px; max-width:100%; width:100%; overflow:hidden; }
  .pc{ display:none !important; }
  .sp{ display:block; }

  /* ---- Header：2本線ハンバーガー ＋ 上からスライドダウンする全画面パネル ---- */
  #Header{ width:100%; height:auto; position:absolute; top:0; right:auto; z-index:1001; }

  #Tools{
    width:auto; height:auto; display:block; justify-content:unset; align-items:unset;
    position:absolute; top:5vw; left:5vw;
  }
  #Tools .inner{ padding:0; display:flex; justify-content:space-between; flex-wrap:wrap; }
  #Tools .inner p a{ font-size:3.8vw; letter-spacing:.5vw; color:var(--ink); }
  #Header .awards{ display:none; }

  /* ★ 全画面パネルは画面外（top:-100vh）に待機し、.active で top:0 へスライド */
  #Header #HeaderMenu{
    background:var(--paper);
    width:100vw; height:100vh;
    position:fixed; overflow-y:scroll;
    top:-100vh; left:0;
    display:flex; align-items:center; justify-content:center;   /* .centering */
    transition:all .5s ease;
    z-index:1002;
  }
  #Header.active #HeaderMenu{ top:0; }

  #Header #HeaderMenu nav{ width:100vw; padding:0 10vw; }
  #Header #HeaderMenu nav .menugroup li{ text-align:center; margin:0 0 10vw 0; }
  #Header #HeaderMenu nav .menugroup li:last-child{ margin:0; }
  #Header #HeaderMenu nav .menugroup li a{
    font-family:var(--font-en); font-size:7vw; line-height:7vw; letter-spacing:.5vw; color:var(--ink);
  }
  #Header #HeaderMenu nav .snsgroup{
    display:flex; justify-content:space-between; flex-wrap:wrap;
    width:35vw; margin:10vw auto 0 auto;
  }
  #Header #HeaderMenu nav .snsgroup li{ width:15vw; margin:0; }
  #Header #HeaderMenu nav .snsgroup li a{
    display:flex; align-items:center; justify-content:center;
    width:15vw; height:15vw; border:0.8vw solid var(--ink); border-radius:100%;
  }
  #Header #HeaderMenu nav .snsgroup li a .icon{ width:6vw; height:6vw; }
  #Header #HeaderMenu nav .amazonbtn{ width:100%; }
  #Header #HeaderMenu nav .amazonbtn a{
    display:block; margin:5vw auto 0 auto; width:100%; text-align:center;
    background:var(--paper); border:0.8vw solid var(--ink); border-radius:20vw;
    padding:5vw 0; font-size:4vw; letter-spacing:1vw; color:var(--ink);
  }

  /* ★ ハンバーガーは 3本ではなく「2本線」。fixed でスクロール中も残る */
  #Header #Menubtn{
    display:block; position:fixed; top:6vw; right:5vw; z-index:1003;
  }
  #Header #Menubtn span{ display:block; width:10vw; height:2.5vw; position:relative; }
  #Header #Menubtn span::before,
  #Header #Menubtn span::after{
    content:""; width:8vw; height:2px; background:var(--ink);
    position:absolute; top:0; left:0; transition:all .5s ease;
  }
  #Header #Menubtn span::after{ top:auto; bottom:0; }

  /* ★ 開くと span 自体が 2.5vw → 8.5vw に伸び、2本線が交差して × になる */
  #Header.active #Menubtn span{ height:8.5vw; }
  #Header.active #Menubtn span::before{ width:8vw; height:2px; transform:translateY(3.9vw) rotate(45deg); }
  #Header.active #Menubtn span::after{ top:auto; bottom:0; transform:translateY(-4vw) rotate(-45deg); }

  /* ---- Keyvisual ---- */
  #Keyvisual{ height:100vh; }
  #Keyvisual .kv-lead{ font-size:4.5vw; letter-spacing:1.5vw; }
  #Keyvisual .scroll p{ font-size:2.9vw; line-height:2.9vw; letter-spacing:.5vw; padding:0 2vw; }
  #Keyvisual .scroll p::after{ height:7vw; bottom:17vw; left:4vw; }
  #Nav{ display:none; }
  /* ★ SP では z-index を 0 に落とす。メニューパネル（#Header z:1001）が必ず上に来る */
  #Keyvisual .amazonbtn{ position:absolute; bottom:5vw; right:5vw; width:auto; z-index:0; }
  #Keyvisual .amazonbtn a{ font-size:3.2vw; padding:3vw 5vw; border-width:2px; }
  #Keyvisual .amazonbtn a:hover{ opacity:1; }

  /* ---- 共通 ---- */
  #Contents section{ padding:16vw 0; }   /* ★ SP は margin-top の食い込みなし */
  #Contents section .inner{ padding:0 7.5vw; min-width:unset; max-width:100%; }
  .section_group{ font-size:7vw; line-height:7vw; letter-spacing:1.5vw; }
  .section_group::after{ width:38vw; margin:0 0 0 -20vw; bottom:-1.5vw; }
  .section_title{ font-size:6vw; line-height:1.2; letter-spacing:1.5vw; }
  .section_sub{ font-size:3vw; letter-spacing:.5vw; margin:3vw auto 0 auto; line-height:6vw; }
  .section_text{ font-size:3.5vw; line-height:5.5vw; letter-spacing:.5vw; margin:6vw 0 0 0; }
  figcaption{ padding:5vw; }

  /* ---- About：構造ごと変わる（白カードが写真に 20vw 乗り上げる） ---- */
  section#Whatsst006{ background:#f4faf9; margin-top:0; padding-top:0; }
  #About{ background:var(--bg-mint-alt); padding:0 0 13vw 0; margin-top:0; }
  #About .about-photo{ position:relative; inset:auto; width:100%; height:78vw; }
  #Contents section#Whatsst006 #About .inner{
    width:80vw; min-width:unset; max-width:80vw;
    margin:-20vw auto 0 auto;                /* ★ 20vw 乗り上げ */
    background:var(--paper); padding:10vw 5vw; position:relative; z-index:1;
  }
  #About .inner > div{ width:100%; }
  #About .inner .inner_l .section_group{ position:relative; top:auto; color:var(--ink); }  /* ★ absolute 解除 */
  #About .inner .inner_l .section_group::after{ background:var(--ink); }
  #About .inner .inner_r{ width:100%; float:none; padding-top:0; }
  #About .inner .inner_r h4{ width:44vw; margin:6vw auto 0 auto; color:var(--ink); font-size:4.5vw; }
  #About .inner .inner_r p{
    font-size:3.7vw; line-height:7.5vw; text-align:center;   /* ★ 中央揃え・黒へ */
    letter-spacing:.3vw; margin:3vw 0 0 0; color:var(--ink);
  }

  /* ---- HowToPlay：左だけ 8vw の非対称パディング ---- */
  #HowToPlay{ padding:18vw 0 12vw 0; }
  #HowToPlay .inner figure{ width:60vw; margin:12vw auto 0 auto; padding:0 0 0 8vw; }

  /* ---- Feature ---- */
  #Product .feature{ padding:10vw 0 5vw 0; margin-top:-40px; }
  #Product .feature .inner .section_group::after{ width:38vw; margin:0 0 0 -20vw; }
  #Product .feature .inner .section_title{ margin:12vw -7.5vw 0 -7.5vw; }   /* ★ フルブリード */
  #Product .feature .features-st006{ max-width:100%; padding-top:50px; margin:auto; }
  #Product .feature .features-st006-img{ width:100%; display:block; }
  #Product .feature .features-st006-description{ width:100%; display:block; float:unset; padding-top:0; }
  #Product .feature .features-st006-description h4{ max-width:73%; margin:auto; text-align:center; font-size:5vw; }
  #Product .feature .features-st006-description p{ line-height:24px; font-size:10px; padding-top:30px; text-align:center; }
  #Product .feature .inner ul{ margin:10vw 0 0 0; }
  #Product .feature .inner ul li{ width:100%; padding:0 17vw; margin:0 0 12vw 0; }   /* ★ 円を大きく内側へ */
  #Product .feature .inner ul li:last-child{ margin:0; }
  #Product .feature .inner ul li h5{ font-size:3.8vw; line-height:3.8vw; letter-spacing:1vw; }
  #Product .feature .inner ul li figure{ margin:5vw 0 0 0; border:0.5vw solid var(--ink); }
  #Product .feature .inner ul li p{ margin:5vw 0 0 0; font-size:3.2vw; line-height:3.2vw; letter-spacing:.1vw; }

  /* ---- Video ---- */
  .videoplayer{ padding:0; height:61vw; }
  .videoplayer .videoframe,
  .videoplayer figure{ height:61vw; top:0; padding:0; }
  .videoplayer figure a .playicon{ width:15vw; height:15vw; margin:-9vw 0 0 -7.5vw; border-width:2px; }
  .videoplayer figure a .playicon::before{ border-left-width:14px; border-top-width:9px; border-bottom-width:9px; }
  .videoplayer figure a:hover .playicon{ opacity:1; }

  /* ---- Colors：オフセットを !important で解除 ---- */
  #Colors{ padding:22vw 0 0 0; }
  #Colors .family_title{ padding-top:80px; font-size:5vw; line-height:5vw; }
  #Colors .family_title.petit{ font-size:4.2vw; }
  #Colors .inner .section_sub{ line-height:6vw; }
  #Colors .inner ul{ margin:5vw 0 0 0; }
  #Colors .inner ul li,
  #Colors .inner .petit li{ width:80vw; margin:0 auto; }
  #Colors .inner ul li:not(:last-child){ margin:0 auto 5vw auto; }
  #Colors .inner ul li figure{ margin:6vw 0 0 0; padding:0 !important; }   /* ★ 10% オフセット解除 */
  #Colors .inner ul li h5{ font-size:3.8vw; line-height:3.8vw; letter-spacing:1vw; margin:0; }
  #Colors .inner ul li p{ margin:2vw 0 0 0; font-size:3.2vw; line-height:3.2vw; letter-spacing:.1vw; }

  /* ---- Technology：2行目だけ order 反転（ジグザグ） ---- */
  #Technology{ padding:22vw 0 0 0; }
  #Technology .inner ul{ margin:14vw 0 0 0; }
  #Technology .inner ul li{ width:100%; margin:0; }
  #Technology .inner ul li figure{ width:34vw; height:31vw; flex:0 0 34vw; border:0.5vw solid var(--ink); }  /* ★ 楕円 */
  #Technology .inner ul li p{ width:64%; margin:0; font-size:3.5vw; line-height:7vw; letter-spacing:.1vw; padding:0 0 0 8vw; }
  #Technology .inner ul li .num{ width:9.5vw; top:-3vw; left:26vw; font-size:6vw; }
  #Technology .inner ul li:first-child{ margin:0 0 10vw 0; }
  #Technology .inner ul li:last-child figure{ order:2; }
  #Technology .inner ul li:last-child p{ order:1; padding:0 8vw 0 0; }
  #Technology .inner ul li:last-child .num{ left:44vw; }   /* ★ バッジ位置も個別 */

  /* ---- ExpertOpinion / DemonstrationTest ---- */
  #ExpertOpinion{ padding:22vw 0 0 0; }
  #ExpertOpinion .inner div.flex{ margin:7vw 0 0 0; }
  #ExpertOpinion .inner div.flex figure{ width:75vw; margin:0 auto; border:0.5vw solid var(--ink); }
  #ExpertOpinion .inner div.flex .txt{ width:100%; }
  #ExpertOpinion .inner div.flex .txt span p{ font-size:3.5vw; line-height:7vw; letter-spacing:.5vw; margin:5vw 0 0 0; }
  #ExpertOpinion .inner div.flex .txt span h4{ margin:5vw 0 0 0; font-size:5vw; line-height:7vw; letter-spacing:.5vw; }
  #ExpertOpinion .inner div.flex .txt span h4 span{ font-size:3.5vw; line-height:7vw; letter-spacing:.5vw; margin:0 3vw 0 0; }
  #ExpertOpinion .inner div.flex .txt span h4 small{ font-size:3.5vw; line-height:7vw; letter-spacing:.5vw; }

  #DemonstrationTest{ padding:22vw 0 0 0; }
  #DemonstrationTest .inner .section_title{ margin:0 -7.5vw; font-size:5.5vw; }   /* ★ フルブリード */
  #DemonstrationTest .inner div.flex{ margin:7vw 0 0 0; }
  #DemonstrationTest .inner div.flex figure{ width:80vw; margin:8vw auto 0; padding:0; }
  #DemonstrationTest .inner div.flex .txt{ width:100%; }
  #DemonstrationTest .inner div.flex .txt span{ padding:0; }
  #DemonstrationTest .inner div.flex .txt span h4{ font-size:4vw; line-height:7vw; letter-spacing:.5vw; }
  #DemonstrationTest .inner div.flex .txt span p{ font-size:3.5vw; line-height:7vw; letter-spacing:.5vw; margin:5vw 0 0 0; }
  #DemonstrationTest .inner div.flex .txt span .demonstrationbtn{ margin:5vw 0 0 0; font-size:3.5vw; line-height:5vw; letter-spacing:.5vw; }

  /* ---- Voice：column、間隔だけ px のまま ---- */
  .top-voice{ flex-direction:column; }
  .top-voice-image{ width:49.6vw; }
  .top-voice-item + .top-voice-item{ margin-top:60px; }   /* ★ ここだけ px */
  .top-voice-text{ padding-top:20px; font-size:3.5vw; line-height:7vw; }
  .button-single{ width:100%; }
  .button-single a{ width:100%; padding:5vw 0; border:0.8vw solid var(--ink); font-size:4vw; border-radius:9vw; }
  .button-single a:hover{ background:var(--paper); color:var(--ink); }

  /* ---- Specification：枠線とテーブル構造を破棄 ---- */
  section#Specification{ padding:22vw 0 0 0; }
  #Specification .inner > .chip{ background:none; width:100%; }
  #Specification .inner .inner_box{ margin:0 auto; border:none; padding:8vw 0 0 0; }   /* ★ 枠撤去 */
  #Specification .inner .inner_box div.flex figure{ width:60vw; padding:0; margin:0 auto; }
  #Specification .inner .inner_box div.flex figure.pc{ display:none; }
  #Specification .inner .inner_box div.flex figure.sp{ display:block; }
  #Specification .inner .inner_box div.flex ul{ width:100%; margin:8vw 0 0 0; }
  #Specification .inner .inner_box div.flex ul li{ border:none; margin:0; padding:0; display:block; }
  #Specification .inner .inner_box div.flex ul li .family_name,
  #Specification .inner .inner_box div.flex ul li h4,
  #Specification .inner .inner_box div.flex ul li p{
    width:100%; font-size:3.5vw; line-height:5vw; letter-spacing:.3vw;
    border-bottom:2px solid var(--ink); margin:0 0 3vw 0; padding:0 0 3vw 0;
  }
  #Specification .inner .inner_box div.flex .annotation{
    font-size:3.5vw; line-height:6vw; letter-spacing:.5vw; padding:0; margin:1vw 0 0 0;
  }

  /* ---- Stores ---- */
  #Stores{ padding:22vw 0 0 0; }
  #Stores .inner .section_group::after{ width:42vw; margin:0 0 0 -22vw; }
  #Stores .inner .section_sub{ margin:4vw 0 0 0; line-height:7vw; }
  #Stores .inner .amazonbtn{ margin:6vw 0 0 0; }
  #Stores .inner .amazonbtn:hover{ opacity:1; }
  #Stores .inner .section_title{ margin:12vw 0 0 0; }
  #Stores .inner ul{ margin:10vw 0 0 0; }
  #Stores .inner ul li{ padding:6vw 0; }
  #Stores .inner ul li p{ width:100%; font-size:3.5vw; line-height:6vw; letter-spacing:.3vw; margin:0 0 2vw 0; }
  #Stores .inner ul li p:last-child{ width:100%; padding:0; text-align:left; margin:0; }
  #Stores .payment{ padding:7vw 5%; text-align:center; }
  #Stores .payment .description{ width:100%; text-align:center; }
  #Stores .payment .methods{ margin-top:3.5vw; }
  #Stores .payment .methods .method-item{ margin-right:5vw; }

  /* ---- FAQ ---- */
  #FAQList{ padding:22vw 0 4vw 0; }
  #FAQList .inner .section_group::after{ width:15vw; margin:0 0 0 -8vw; }
  #FAQList .inner ul{ margin:15vw 0 0 0; }
  #FAQList .inner ul li{ width:100%; padding:10vw 8vw; margin:0 0 14vw 0; }
  #FAQList .inner ul li::before{ width:7vw; height:11vw; top:-3.5vw; left:8vw; font-size:3.5vw; }
  #FAQList .inner ul li h4{ font-size:3.7vw; line-height:6vw; letter-spacing:.3vw; }
  #FAQList .inner ul li p{ font-size:3.5vw; line-height:6.5vw; letter-spacing:.3vw; margin:3vw 0 0 0; }
  #FAQList .inner ul li p a:hover{ opacity:1; }

  /* ---- Support ---- */
  #Contact{ padding:22vw 0 0 0; }
  .consultation_bg{ display:none; }
  #Consultation .inner .panel{ padding:8vw 5vw; border-radius:6vw; }
  #Consultation .inner .panel .inner_l,
  #Consultation .inner .panel .inner_r{ width:100%; padding:0; }
  #Consultation .inner .panel .inner_r{ margin-top:8vw; }
  #Consultation .inner .panel .contactbtn{ font-size:4vw; padding:5vw 0; border-radius:9vw; border-width:0.3vw; }
  #Consultation .inner .panel .contactbtn:hover{ background:var(--paper); color:var(--ink); }

  #ContactNav .inner.flex .inner_l,
  #ContactNav .inner.flex .inner_r{ width:100%; }
  #ContactNav .inner.flex .inner_r{ margin:13vw 0 0 0; }
  #ContactNav .inner .section_title{ font-size:7vw; letter-spacing:1.5vw; }
  #ContactNav .inner .section_sub{ font-size:4vw; letter-spacing:.1vw; margin:6vw 0 0 0; }
  #ContactNav .inner .contactbtn{
    font-size:4vw; letter-spacing:.3vw; margin:8vw 0 0 0;
    border-radius:9vw; border:0.3vw solid var(--ink); padding:5vw 0; width:100%;
  }
  #ContactNav .inner .contactbtn:hover{ background:var(--paper); color:var(--ink); }

  #NewsLetter{ padding:22vw 0 0 0; }
  #NewsLetter .inner .card{ border-radius:6vw; }
  #NewsLetter .inner .card .inner_l{ width:100%; padding:10vw 8vw 3vw 8vw; }
  #NewsLetter .inner .card .inner_r{ width:100%; padding:0 8vw 10vw 8vw; }
  #NewsLetter .inner .card .section_title{ font-size:7vw; letter-spacing:1.5vw; text-align:center; }
  #NewsLetter .inner .card .section_sub{ font-size:3.5vw; line-height:7vw; letter-spacing:.2vw; margin:4vw 0 0 0; text-align:center; }
  #NewsLetterForm{ padding:0 0 3vw 0; margin:0; border:none; display:block; }
  #NewsLetterForm #FormEmail{
    width:100%; font-size:4vw; line-height:4vw; border-radius:0; letter-spacing:.5vw;
    padding:3vw 0; border-bottom:2px solid var(--ink);
  }
  #NewsLetterForm #Submitbtn{ width:60%; font-size:3.2vw; line-height:3.2vw; letter-spacing:.5vw; margin:4vw auto 0; padding:3vw 0; }

  #Sns{ padding:22vw 0; }
  #Sns .section_sub{ font-size:3.7vw; line-height:7vw; letter-spacing:.5vw; padding:0 12vw; }
  #Sns .inner div.flex{ margin:0; }
  #Sns .inner div.flex .col{ width:100%; }
  #Sns .inner div.flex .col .contactbtn-ja{
    font-size:4vw; line-height:4vw; letter-spacing:1vw; margin:8vw auto 0;
    border-radius:9vw; border:0.8vw solid var(--ink); padding:5vw 0; width:100%;
  }
  #Sns .inner div.flex .col .contactbtn-ja:hover{ background:var(--paper); color:var(--ink); }

  /* ---- Media：3列 → 2列 ---- */
  #Coverage{ padding:20vw 0 0 0; }                     /* ★ ここだけ 20vw */
  #Coverage .inner ul{ margin:13vw 0 0 0; justify-content:space-between; }
  #Coverage .inner ul li,
  #Coverage .inner ul li:nth-child(3n){ width:48%; margin:0 0 4% 0; }
  #Coverage .inner ul li a:hover img{ transform:scale(1); }

  #Award{ padding:22vw 0 10vw 0; }
  #Award .inner ul{ margin:13vw 0 0 0; justify-content:space-between; }
  #Award .inner ul li,
  #Award .inner ul li:nth-child(3n){ width:48%; margin:0 0 4% 0; }
  #Award .inner ul li a:hover img{ transform:scale(1); }
  #Award .inner ul li h4{ font-size:3.5vw; line-height:6vw; letter-spacing:.5vw; margin:5vw 0 0 0; }

  /* ---- Footer ---- */
  #Footer{ min-width:320px; }
  #Footer #FooterInner{ width:100%; padding:16vw 7.5vw 14vw 7.5vw; }
  #Footer #FooterInner p{ font-size:3.5vw; line-height:7vw; }

  /* ---- SP は全ホバーを無効化 ---- */
  a:hover,a:hover img{ opacity:1; }
}