@charset "utf-8";
/* =========================================================================
   MYSAON アイマスク — Product Page Stylesheet
   SUWA Christy / KODENSHI DH
   ダーク基調 × ディープオレンジ。プレミアムプロダクト表現。
   ※ JSは page-mysaon.php / index.html の <script> 内に記述（仕様準拠）
   ========================================================================= */

:root{
  --c-main:   #E8621A;   /* ディープオレンジ */
  --c-accent: #FF8C42;   /* 明るいオレンジ */
  --c-base:   #0D0D0D;   /* ほぼ黒 */
  --c-sub:    #1A1A1A;   /* ダークグレー */
  --c-sec:    #111111;   /* セクション背景 */
  --c-text:   #F5F5F5;   /* オフホワイト */
  --c-muted:  #888888;   /* グレー */
  --c-line:   #2a2a2a;   /* 罫線 */
  --grad: linear-gradient(135deg, var(--c-main) 0%, #ffd573 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1200px;
  --pad-sec: clamp(88px, 12vw, 160px);
  --ff-jp: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: "Inter", "Montserrat", "Noto Sans JP", sans-serif;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
.mys{
  margin:0; padding:0;
  background:var(--c-base); color:var(--c-text);
  font-family:var(--ff-jp);
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mys img{ max-width:100%; height:auto; display:block; }
.mys a{ color:inherit; text-decoration:none; }
.mys ul,.mys ol{ list-style:none; margin:0; padding:0; }
.mys h1,.mys h2,.mys h3,.mys p{ margin:0; }
.mys ::selection{ background:var(--c-main); color:#fff; }

/* 下限14px safety net（共通CSSに飲まれ対策） */
.mys p,.mys li,.mys dd,.mys dt,.mys td,.mys th,.mys summary,.mys label{ font-size:1rem; }
.mys small{ font-size:14px; }

.mys__inner{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.mys__eyebrow{
  display:inline-block; font-family:var(--ff-en);
  font-size:.875rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--c-accent); font-weight:600; margin-bottom:22px;
}
.mys__eyebrow--line{ position:relative; padding-left:46px; }
.mys__eyebrow--line::before{
  content:""; position:absolute; left:0; top:50%; width:32px; height:1px;
  background:var(--grad);
}

/* 見出し */
.mys-h2{
  font-family:var(--ff-jp); font-weight:700;
  font-size:clamp(1.8rem, 4vw, 3rem); line-height:1.35; letter-spacing:.01em;
}
.mys-h2 .en{
  display:block; font-family:var(--ff-en); font-weight:300;
  font-size:clamp(2.6rem, 7vw, 5rem); line-height:1; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; margin-bottom:.15em;
}
.mys-h2 .en .dot{ color:var(--c-main); }

/* reveal アニメーション（IntersectionObserver） */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:opacity,transform; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; } .reveal.d4{ transition-delay:.48s; }
.reveal--left{ transform:translateX(-44px); } .reveal--left.is-visible{ transform:none; }
.reveal--right{ transform:translateX(44px); } .reveal--right.is-visible{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* 画像プレースホルダ（実画像が無い間も崩れないように） */
.ph{ position:relative; background:var(--c-sub); overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph img.img-missing{ display:none; }
.ph.is-empty::after{
  content:"IMAGE"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-en); letter-spacing:.4em; font-size:.875rem; color:#444;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(232,98,26,.18), transparent 60%),
    repeating-linear-gradient(45deg, #161616 0 14px, #131313 14px 28px);
}

/* =========================================================================
   minimal fixed header
   ========================================================================= */
.mys-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,4vw,48px);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.mys-header.is-stuck{ background:rgba(10,10,10,.82); backdrop-filter:blur(12px); border-color:var(--c-line); padding-top:14px; padding-bottom:14px; }
.mys-header__brand{ font-family:var(--ff-en); font-weight:600; letter-spacing:.3em; font-size:1rem; }
.mys-header__brand b{ font-weight:600; }
.mys-header__nav{ display:flex; align-items:center; gap:28px; }
.mys-header__link{ font-size:.9rem; color:var(--c-muted); transition:color .3s; }
.mys-header__link:hover{ color:var(--c-text); }
.mys-header__cta{
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.12em; font-weight:600;
  padding:11px 22px; border:1px solid var(--c-main); border-radius:999px; color:var(--c-accent);
  transition:all .3s var(--ease);
}
.mys-header__cta:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px); }
@media (max-width:768px){ .mys-header__link{ display:none; } }

/* =========================================================================
   [1] HERO
   ========================================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:160px 20px 120px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.45; }
.hero::before{ /* オレンジのグロー */
  content:""; position:absolute; z-index:1; width:70vw; height:70vw; max-width:900px; max-height:900px;
  top:-10%; right:-12%; border-radius:50%;
  background:radial-gradient(circle, rgba(232,98,26,.32) 0%, rgba(232,98,26,0) 62%);
  filter:blur(20px); pointer-events:none;
}
.hero::after{ /* 下部フェード */
  content:""; position:absolute; inset:auto 0 0 0; height:32%; z-index:1;
  background:linear-gradient(to top, var(--c-base), transparent); pointer-events:none;
}
.hero__content{ position:relative; z-index:2; }
.hero__title{
  font-family:var(--ff-en); font-weight:200;
  font-size:clamp(4rem, 15vw, 15rem); line-height:.92; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; margin:0;
}
.hero__title .accent{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__line{ width:0; height:2px; background:var(--grad); margin:34px auto; max-width:120px; }
.hero.is-in .hero__line{ width:120px; transition:width 1.1s var(--ease) .3s; }
.hero__catch{
  font-size:clamp(1.6rem, 3.6vw, 2.7rem); font-weight:500; letter-spacing:.14em; color:var(--c-text);
}
.hero__sub{
  font-family:var(--ff-en); font-size:clamp(.875rem,1.4vw,1rem); letter-spacing:.26em;
  text-transform:uppercase; color:var(--c-text); margin-top:18px; font-weight:400;
}
.hero__scroll{
  position:absolute; z-index:3; right:clamp(20px,5vw,56px); bottom:38px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.3em; color:var(--c-muted); text-transform:uppercase;
}
.hero__scroll .bar{ position:relative; width:1px; height:64px; background:var(--c-line); overflow:hidden; }
.hero__scroll .bar::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--grad);
  animation:scrollFlow 2.1s var(--ease) infinite;
}
@keyframes scrollFlow{ 0%{top:-45%} 100%{top:100%} }
@media (max-width:768px){ .hero__scroll{ left:50%; right:auto; transform:translateX(-50%); } .hero__scroll span{ display:none; } }

/* breadcrumb（薄め） */
.mys-bc{ border-bottom:1px solid var(--c-line); background:var(--c-base); }
.mys-bc ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px 0; font-size:.875rem; color:var(--c-muted); }
.mys-bc li::after{ content:"/"; margin-left:8px; color:#444; }
.mys-bc li:last-child::after{ content:none; }
.mys-bc a{ color:var(--c-muted); transition:color .3s; }
.mys-bc a:hover{ color:#E8621A; }
.mys-bc li[aria-current]{ color:var(--c-text); }

/* =========================================================================
   [2] INTRO
   ========================================================================= */
.intro{ position:relative; padding:var(--pad-sec) 0; background:var(--c-base); overflow:hidden; }
.intro__vtext{
  position:absolute; top:50%; right:-2%; transform:translateY(-50%);
  font-family:var(--ff-en); font-weight:800; font-size:clamp(5rem,16vw,16rem); line-height:.8;
  color:#fff; opacity:.025; letter-spacing:.02em; white-space:nowrap; pointer-events:none; user-select:none;
  writing-mode:vertical-rl;
}
.intro__grid{ display:grid; grid-template-columns:1fr; gap:34px; position:relative; z-index:1; max-width:880px; }
.intro__lead{ font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:700; line-height:1.5; letter-spacing:.02em; }
.intro__lead .hl{ color:var(--c-accent); }
.intro__body{ color:#b6b6b6; font-size:1.05rem; line-height:2.05; }
.intro__body + .intro__body{ margin-top:1.2em; }
.intro__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.intro__tags span{
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.14em; color:var(--c-accent);
  border:1px solid var(--c-line); border-radius:999px; padding:7px 16px;
}

/* =========================================================================
   [3] TECHNOLOGY (3 points)
   ========================================================================= */
.tech{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.tech__head{ margin-bottom:64px; }
.tech__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tech__card{
  position:relative; padding:46px 34px 40px; background:var(--c-base);
  border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tech__card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.tech__card:hover{ transform:translateY(-10px); border-color:rgba(232,98,26,.55); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.tech__card:hover::before{ transform:scaleX(1); }
.tech__no{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.24em; color:var(--c-main); font-weight:600; }
.tech__en{ font-family:var(--ff-en); font-weight:600; font-size:1.5rem; letter-spacing:.01em; color:#fff; margin:14px 0 6px; }
.tech__icon{ font-size:1.8rem; color:var(--c-main); margin:6px 0 22px; }
.tech__title{ font-size:1.18rem; font-weight:700; line-height:1.6; margin-bottom:14px; }
.tech__desc{ color:#b6b6b6; font-size:.98rem; line-height:1.95; }
@media (max-width:1024px){ .tech__grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* =========================================================================
   [4] SCENE
   ========================================================================= */
.scene{ padding:var(--pad-sec) 0; background:var(--c-base); }
.scene__head{ margin-bottom:60px; }
.scene__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; }
.scene__item{
  background:var(--c-base); padding:46px 30px; display:flex; flex-direction:column; gap:16px;
  transition:background .45s var(--ease);
}
.scene__item:hover{ background:var(--c-sub); }
.scene__icon{
  width:60px; height:60px; display:grid; place-items:center; border-radius:50%;
  background:rgba(232,98,26,.12); color:var(--c-main); font-size:1.4rem;
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.scene__item:hover .scene__icon{ transform:translateY(-4px) scale(1.06); background:var(--grad); color:#fff; }
.scene__label{ font-size:1.1rem; font-weight:700; }
.scene__note{ color:#b6b6b6; font-size:.92rem; }
@media (max-width:768px){ .scene__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .scene__grid{ grid-template-columns:1fr; } }

/* =========================================================================
   [5] SPEC
   ========================================================================= */
.spec{ padding:var(--pad-sec) 0; background:var(--c-sec); }
.spec__head{ margin-bottom:54px; }
.spec__table{ width:100%; border-collapse:collapse; border-top:1px solid var(--c-line); }
.spec__table th,.spec__table td{ text-align:left; padding:24px 8px; border-bottom:1px solid var(--c-line); vertical-align:top; }
.spec__table th{
  width:38%; font-weight:500; color:#b6b6b6; font-size:.98rem; letter-spacing:.04em;
  font-family:var(--ff-jp);
}
.spec__table td{ color:var(--c-text); font-size:1.02rem; }
.spec__en{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.18em; color:var(--c-main); display:block; margin-bottom:4px; text-transform:uppercase; }
.spec__colors{ display:flex; flex-wrap:wrap; gap:22px; margin-top:4px; }
.spec__color{ display:flex; align-items:center; gap:10px; font-size:.98rem; }
.spec__dot{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 2px 8px rgba(0,0,0,.5); }
.spec__dot--orange{ background:var(--c-main); } .spec__dot--gray{ background:#9a9a9a; } .spec__dot--sax{ background:#7fb6d6; }
@media (max-width:600px){
  .spec__table th,.spec__table td{ display:block; width:100%; padding:14px 4px; }
  .spec__table th{ border-bottom:none; padding-bottom:2px; }
}

/* =========================================================================
   FAQ（<details>/<summary> アコーディオン）
   ========================================================================= */
.faq{ padding:var(--pad-sec) 0; background:var(--c-base); }
.faq__head{ margin-bottom:44px; }
.faq__list{ max-width:860px; }
.faq-item{ border:1px solid var(--c-line); border-radius:12px; margin-bottom:14px; background:var(--c-sub); overflow:hidden; transition:border-color .4s; }
.faq-item[open]{ border-color:rgba(232,98,26,.5); }
.faq-item__q{
  list-style:none; cursor:pointer; padding:22px 56px 22px 24px; position:relative;
  font-weight:700; font-size:1.05rem; line-height:1.6;
}
.faq-item__q::-webkit-details-marker{ display:none; }
.faq-item__q::after{
  content:""; position:absolute; right:24px; top:26px; width:11px; height:11px;
  border-right:2px solid var(--c-main); border-bottom:2px solid var(--c-main);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq-item[open] .faq-item__q::after{ transform:rotate(-135deg); }
.faq-item__a{ padding:0 24px 24px; color:#b6b6b6; font-size:.98rem; line-height:1.95; }

/* =========================================================================
   [6] CTA
   ========================================================================= */
.cta{ position:relative; padding:clamp(90px,12vw,150px) 0; background:var(--grad); color:#0d0d0d; text-align:center; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(110% 140% at 50% -20%, rgba(255,255,255,.22), transparent 55%); pointer-events:none; }
.cta__inner{ position:relative; z-index:1; }
.cta__lead{ font-family:var(--ff-en); font-size:.875rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; opacity:.8; }
.cta__title{ font-size:clamp(1.8rem,4.4vw,3rem); font-weight:800; line-height:1.4; margin:18px 0 38px; letter-spacing:.02em; }
.cta__btn{
  display:inline-flex; align-items:center; gap:14px; background:#fff; color:#111;
  font-weight:700; font-size:1.05rem; padding:20px 52px; border-radius:999px;
  border:2px solid #fff; transition:all .35s var(--ease);
}
.cta__btn i{ transition:transform .35s var(--ease); }
.cta__btn:hover{ background:transparent; color:#fff; }
.cta__btn:hover i{ transform:translateX(6px); }
.cta__brand{ margin-top:34px; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.18em; font-weight:600; opacity:.85; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:#0A0A0A; color:var(--c-muted); padding:38px 0; text-align:center; border-top:1px solid var(--c-line); }
.site-footer small{ letter-spacing:.08em; font-family:var(--ff-en); }
.tentative{ font-size:.875rem; color:#a64237; }

/* =========================================================================
   responsive global
   ========================================================================= */
@media (max-width:768px){
  :root{ --pad-sec:clamp(72px,16vw,110px); }
  .mys__inner{ width:min(100% - 36px, var(--maxw)); }
  .intro__vtext{ display:none; }
}

/* ---------- INTRO 2-col + wearing media ---------- */
@media (min-width:880px){
  .intro__grid.has-media{ grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; max-width:var(--maxw); }
}
.intro__media{ border-radius:16px; aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(0,0,0,.85); }
.intro__media::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(160deg, transparent 50%, rgba(232,98,26,.18)); pointer-events:none;
}
/* ---------- SPEC color photos ---------- */
.spec__photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:54px; }
.spec__photo{ border-radius:12px; aspect-ratio:1/1; }
.spec__photo figcaption{
  position:absolute; left:0; bottom:0; z-index:2; width:100%; padding:14px 16px;
  font-family:var(--ff-en); font-size:.875rem; letter-spacing:.16em; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
@media (max-width:600px){ .spec__photos{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; } }

/* トップへ戻るボタン（2026-06-15） */
.to-top{ position:fixed; right:24px; bottom:24px; z-index:55; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; color:#fff; font-size:1rem; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s; box-shadow:0 12px 26px -12px rgba(0,0,0,.6); }
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
@media (max-width:768px){ .to-top{ right:16px; bottom:16px; width:44px; height:44px; } }
.to-top{ background:#fff; color:#9a9ab6; border:1px solid #d6d6e2; transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s; }
.to-top:hover{ background:#E8621A; color:#fff; border-color:#E8621A; transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(232,98,26,.5); }

/* ===========================================================================
   2026-06-16(4) MYSAON 白基調へ転換／ロゴ画像／電話／ナビ日本語／技術カード画像
   （元のダーク定義を後勝ちで上書き）
   =========================================================================== */
:root{ --c-base:#FFFFFF; --c-sub:#F5F5F3; --c-sec:#F5F5F3; --c-text:#1A1A1A; --c-line:#E4E4E0; }
/* 白で見えなくなる白系テキスト → 濃色 */
.mys-h2 .en{ color:#1A1A1A; }
.hero__title{ color:#1A1A1A; }
.tech__en{ color:#1A1A1A; }
/* 薄グレー本文 → 読みやすい濃グレー */
.intro__body, .tech__desc, .scene__note, .faq-item__a, .spec__table th{ color:#555; }
/* 淡橙アクセント → 視認性の高い橙 */
.mys__eyebrow, .intro__lead .hl, .intro__tags span, .mys-header__cta{ color:var(--c-main); }
/* プレースホルダ（明色） */
.ph.is-empty::after{ color:#b9b9b3; background:repeating-linear-gradient(45deg,#efefec 0 14px,#f5f5f3 14px 28px); }
.intro__vtext{ color:#1A1A1A; opacity:.03; }
.spec__dot{ border-color:rgba(0,0,0,.12); box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* ヘッダー：白背景・ロゴ画像・配置 */
.mys-header{ justify-content:flex-start; gap:18px; }
.mys-header.is-stuck{ background:rgba(255,255,255,.92); border-color:var(--c-line); box-shadow:0 1px 0 var(--c-line); }
.mys-header__brand{ margin-right:auto; }
.mys-header__brand img{ height:30px; width:auto; display:block; }
.mys-header__link{ color:#555; } .mys-header__link:hover{ color:var(--c-main); }
/* ヒーロー：白基調（背景画像は控えめ） */
.hero__bg img{ opacity:.32; }
/* 電話ボタン（ヘッダー/フッター共通・橙ピル） */
.mys .site-tel{ display:inline-flex; align-items:center; gap:8px; background:var(--c-main); color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.02em; padding:9px 18px; border-radius:999px; white-space:nowrap; transition:background .3s var(--ease), transform .3s var(--ease); }
.mys .site-tel:hover{ background:#cf5212; color:#fff; transform:translateY(-2px); }
.mys .site-tel i{ font-size:.9em; }
@media (max-width:768px){ .mys .site-tel{ font-size:.85rem; padding:8px 14px; } .mys-header__brand img{ height:26px; } }
/* フッター：明色＋ロゴ＋電話 */
.site-footer{ background:#F5F5F3; color:#555; border-top:1px solid var(--c-line); padding:34px 0; text-align:left; }
.mys-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; }
.mys-foot__logo img{ height:30px; width:auto; display:block; }
.site-footer small{ color:#888; }
@media (max-width:768px){ .mys-foot{ justify-content:center; text-align:center; } }
/* 技術カードの画像 */
.tech__grid{ align-items:start; }
.tech__media{ margin-top:22px; }
.tech__media img{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--c-line); background:#fff; }
.tech__fig{ margin:0; }
.tech__cap{ display:inline-block; font-family:var(--ff-en); font-weight:700; font-size:.8rem; letter-spacing:.12em; color:var(--c-main); margin:14px 0 6px; }
.tech__media--stack .tech__fig + .tech__fig .tech__cap{ margin-top:10px; }
/* CONTACT 2ボタン（購入＝白／お問い合わせ＝ゴースト） */
.cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta__btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.cta__btn--ghost:hover{ background:#fff; color:#111; }
/* フッター：コピーライト左にSUWAクリスティロゴ */
.mys-foot__cr{ display:inline-flex; align-items:center; gap:14px; }
.mys-foot__suwa img{ height:36px; width:auto; display:block; }
@media (max-width:768px){ .mys-foot__cr{ justify-content:center; } }

/* ===== 2026-06-16(6) hero/ヘッダー微調整＋Introduction画像を原比率・装飾なしで表示 ===== */
.hero__bg img{ opacity:.3; }
.hero__title{ font-weight:300; }
.mys-header{ background:#ffffffa3; }
.intro__media{ aspect-ratio:auto; border-radius:0; box-shadow:none; background:none; overflow:visible; }
.intro__media::before{ display:none; }
.intro__media img{ width:100%; height:auto; object-fit:contain; }

/* ===== 2026-06-16(7) heroタイトルをロゴ画像に ===== */
.hero__title img{ width:clamp(260px,60vw,680px); height:auto; display:block; margin-inline:auto; }

/* ===== 2026-06-16(8) スマホ：ハンバーガーメニュー（SUWA同様）＋ロゴ/電話バランス・比率崩れ防止 ===== */
/* ロゴが flex で潰れて比率が崩れるのを防止 */
.mys-header__brand, .mys-foot__logo, .mys-foot__suwa{ flex-shrink:0; }
.mys-header__brand img, .mys-foot__logo img, .mys-foot__suwa img{ max-width:none; }
/* ハンバーガーボタン */
.mys-burger{ display:none; width:30px; height:22px; position:relative; background:none; border:none; cursor:pointer; padding:0; z-index:61; flex-shrink:0; }
.mys-burger span{ position:absolute; left:0; width:100%; height:2px; background:#1A1A1A; transition:transform .35s var(--ease), opacity .25s; }
.mys-burger span:nth-child(1){ top:0; } .mys-burger span:nth-child(2){ top:10px; } .mys-burger span:nth-child(3){ top:20px; }
.mys-burger.is-open span:nth-child(1){ top:10px; transform:rotate(45deg); }
.mys-burger.is-open span:nth-child(2){ opacity:0; }
.mys-burger.is-open span:nth-child(3){ top:10px; transform:rotate(-45deg); }
/* メニュー内の電話（既定=PCは非表示／.mys .site-tel より高詳細度で確実に隠す） */
.mys .mys-nav__tel{ display:none; }
@media (max-width:900px){
  .mys-burger{ display:block; }
  /* is-stuck の backdrop-filter が固定オーバーレイ基準を壊すため無効化 */
  .mys-header.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* ナビをフルスクリーンのオーバーレイに */
  .mys-header__nav{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px; background:rgba(255,255,255,.98); transform:translateY(-100%); transition:transform .5s var(--ease); z-index:55; }
  .mys-header__nav.is-open{ transform:none; }
  .mys-header__link{ display:block; font-size:1.2rem; color:#1A1A1A; }
  .mys-header__cta{ font-size:1rem; }
  .mys .mys-nav__tel{ display:inline-flex; margin-top:8px; }
  /* ヘッダー右の電話ピルはメニューへ移すので隠す */
  .mys-header > .site-tel{ display:none; }
}
@media (max-width:768px){ .mys-header__brand img{ height:34px; } }

/* ===========================================================================
   2026-06-16(9) スマホ専用調整（すべて @media 内・PCには影響させない）
   =========================================================================== */
/* B4: PCホバーで枠線/色が変わる箇所を、スマホは最初から着色 */
@media (max-width:900px){
  .tech__card{ border-color:rgba(232,98,26,.45); }
  .tech__card::before{ transform:scaleX(1); }
  .scene__item{ background:var(--c-sub); }
}
/* B3: スマホの mys-h2 の英字 */
@media (max-width:768px){ .mys-h2 .en{ font-size:clamp(0.5rem, 6vw, 5rem); } }
/* B2: 製品仕様の各色写真をスマホで横並び・横スクロール（シンプルスライド） */
@media (max-width:768px){
  .spec__photos{ display:flex; gap:12px; max-width:none; margin-inline:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .spec__photo{ flex:0 0 70%; scroll-snap-align:center; aspect-ratio:1/1; }
}
/* B6: スマホ ヘッダー = ロゴ20px + 右に小さめの電話、バーガーは右端 */
@media (max-width:900px){
  .mys-header__brand{ margin-right:0; order:0; }
  .mys-header__brand img{ height:20px; }
  .mys-header > .site-tel{ display:inline-flex; order:1; background:none; color:#555; padding:2px 4px; font-size:.74rem; font-weight:600; }
  .mys-header > .site-tel:hover{ background:none; color:var(--c-main); transform:none; }
  .mys-header > .site-tel i{ color:var(--c-main); }
  .mys-burger{ order:2; margin-left:auto; }
}
/* D1 / B5: ハンバーガーメニュー（緑オーバーレイ・左寄せリスト・上にロゴ2種・下に会社情報） */
.mys-nav__head, .mys-nav__foot{ display:none; }
@media (max-width:900px){
  .mys-header__nav{ background:#2E7D32; justify-content:flex-start; align-items:stretch; gap:0; padding:80px 26px 30px; overflow-y:auto; }
  .mys-nav__head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:14px; }
  .mys-nav__logo--main img{ height:30px; width:auto; display:block; }
  .mys-nav__logo--sub img{ height:20px; width:auto; display:block; }
  .mys-header__nav .mys-header__link,
  .mys-header__nav .mys-header__cta{ display:block; width:100%; text-align:left; color:#fff; font-size:1.05rem; font-weight:600; padding:16px 2px; border:none; border-bottom:1px solid rgba(255,255,255,.28); border-radius:0; letter-spacing:.04em; }
  .mys-header__nav .mys-header__cta:hover{ background:none; color:#fff; transform:none; }
  .mys-nav__tel{ display:inline-flex; align-self:flex-start; margin-top:18px; background:#fff; color:var(--c-main); }
  .mys-nav__tel:hover{ background:#fff; color:var(--c-main); transform:none; }
  .mys-nav__foot{ display:block; margin-top:22px; color:rgba(255,255,255,.92); font-size:.85rem; line-height:1.8; }
  .mys-nav__foot small{ display:block; margin-top:8px; color:rgba(255,255,255,.7); font-size:.78rem; }
}
/* B1: フッター スマホは MYSAONロゴの右に SUWAロゴ（少し大きめ）。PCは従来配置のまま */
.mys-foot__suwa--m{ display:none; }
@media (max-width:768px){
  .mys-foot__cr .mys-foot__suwa{ display:none; }
  .mys-foot__suwa--m{ display:inline-flex; }
  .mys-foot__suwa--m img{ height:46px; width:auto; display:block; }
}

/* ===== 2026-06-16(10) スマホ：メニュー白背景・電話1rem・サブロゴ55px・スライダー調整 ===== */
.spec__hint{ display:none; }
@media (max-width:900px){
  .mys-header > .site-tel{ font-size:1rem; }
  .mys-header > .site-tel i{ color:var(--c-main); }
  /* メニューを白背景・濃色テキストに（オレンジ差し色） */
  .mys-header__nav{ background:#fff; }
  .mys-header__nav .mys-header__link,
  .mys-header__nav .mys-header__cta{ color:#1A1A1A; border-bottom-color:#E4E4E0; }
  .mys-nav__tel{ background:var(--c-main); color:#fff; }
  .mys-nav__tel:hover{ background:#cf5212; color:#fff; }
  .mys-nav__foot{ color:#666; }
  .mys-nav__foot small{ color:#999; }
  .mys-nav__logo--sub img{ height:55px; }
}
@media (max-width:768px){
  .spec__photo{ flex:0 0 84%; }
  .spec__hint{ display:block; font-size:.8rem; color:#999; margin:0 0 8px; }
}

/* ===== 2026-06-16(2) ご使用方法（明色）＋温度モード（白）＋スペック注記 ===== */
.spec__note{ font-size:.8rem; color:#888; line-height:1.8; margin-top:18px; }
/* How to Use（オフホワイト #F5F5F3） */
.howto{ background:#F5F5F3; color:#1A1A1A; padding:var(--pad-sec) 0; }
.howto__head{ margin-bottom:54px; }
.howto__eyebrow{ display:inline-block; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.34em; text-transform:uppercase; color:var(--c-main); font-weight:600; margin-bottom:18px; position:relative; padding-left:46px; }
.howto__eyebrow::before{ content:""; position:absolute; left:0; top:50%; width:32px; height:1px; background:var(--grad); }
.howto__title{ font-family:var(--ff-jp); font-weight:700; font-size:clamp(1.8rem,4vw,3rem); color:#1A1A1A; line-height:1.35; }
.howto__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.howto__step{ position:relative; border:1px solid #E0E0E0; border-radius:14px; padding:34px 28px; background:#FFFFFF; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.howto__step:not(:last-child)::after{ content:"→"; position:absolute; right:-24px; top:50%; transform:translateY(-50%); color:var(--c-main); font-size:1.5rem; font-weight:700; z-index:2; }
.howto__icon{ font-size:2rem; color:var(--c-main); line-height:1; margin-bottom:14px; }
.howto__no{ display:block; font-family:var(--ff-en); font-weight:700; font-size:1.5rem; letter-spacing:.1em; color:var(--c-main); margin-bottom:12px; }
.howto__step-h{ font-size:1.2rem; font-weight:700; color:#1A1A1A; margin-bottom:14px; }
.howto__step-body{ color:#444; font-size:.95rem; line-height:1.95; }
.howto__note{ color:#999; font-size:.8rem; line-height:1.8; margin-top:14px; }
/* 温度モードについて（D-2でご使用方法内に統合・別背景なし） */
.tempmode-inline{ margin-top:clamp(48px,7vw,80px); }
.tempmode__h{ color:#1A1A1A; font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:30px; }
.tempmode__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:820px; margin-inline:auto; }
.tempmode__card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border:1px solid #E0E0E0; border-radius:12px; padding:30px 22px; background:#FAFAFA; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.tempmode__dot{ width:20px; height:20px; border-radius:50%; margin-bottom:10px; }
.tempmode__name{ color:#1A1A1A; font-weight:700; font-size:1.05rem; }
.tempmode__temp{ font-family:var(--ff-en); color:var(--c-main); font-weight:700; font-size:1.6rem; }
.tempmode__desc{ color:#666; font-size:.875rem; }
.tempmode__note{ color:#999; font-size:.78rem; text-align:center; margin-top:24px; line-height:1.8; }
@media (max-width:768px){
  .howto__steps{ grid-template-columns:1fr; gap:40px; }
  .howto__step:not(:last-child)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-30px; transform:translateX(-50%); }
  .tempmode__grid{ grid-template-columns:1fr; }
}

/* ===== SCENE grid borders（gap+padding+background：列数非依存・サブピクセル欠け対策） ===== */
.scene__grid{ gap:0; background:transparent; border:none; border-radius:14px; }
.scene__group .scene__grid{
  --scene-border:var(--c-line);
  gap:1px;
  padding:1px;
  background:var(--scene-border);
  border-radius:14px;
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
}
.scene__group .scene__item{
  border:none;
  margin:0;
  background:var(--c-base);
  min-width:0;
  background-clip:padding-box;
}

/* ===========================================================================
   2026-06-17 テキスト刷新：HEROサブ2行 / SCENEを2グループ（個人・法人）化 / CTA2ボタン
   =========================================================================== */
/* HERO：英字サブコピーの2行目 */
.hero__sub--2{ margin-top:6px; }

/* SCENE：個人/法人の2グループ。各グループ4アイテム＝4列（中央の細い区切り線で分割） */
.scene__group + .scene__group{ margin-top:54px; padding-top:54px; border-top:1px solid #333; }
.scene__glabel-wrap{ margin-bottom:28px; }
.scene__glabel{ display:inline-block; font-family:var(--ff-en); color:#E8621A; font-weight:800; font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase; }
.scene__gsub{ margin-top:6px; color:#555; font-size:1rem; font-weight:700; }
.scene__group .scene__grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .scene__group .scene__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .scene__group .scene__grid{ grid-template-columns:1fr; } }

/* CTA：タイトル下サブテキスト＋2ボタン横並び＋補足注釈 */
.cta__subtext{ margin:-18px auto 36px; font-size:1rem; line-height:1.9; }
.cta__btn--biz{ background:#fff; color:#E8621A; border-color:#E8621A; }
.cta__btn--biz:hover{ background:#E8621A; color:#fff; border-color:#fff; }
.cta__note{ margin-top:20px; font-size:.8rem; color:#888888; }

/* ===========================================================================
   2026-06-17(2) FOR BUSINESS USE のみダークネイビー配色（個人グループは不変）
   =========================================================================== */
.scene__group--biz .scene__glabel{ color:#1A3A5C; }
.scene__group--biz .scene__gsub{ color:#1A3A5C; }
.scene__group.scene__group--biz{ border-top-color:#1A3A5C; }
.scene__group--biz .scene__icon{ background:#EBF2FA; color:#1A3A5C; }
.scene__group--biz .scene__item:hover .scene__icon{ background:#1A3A5C; color:#fff; }

/* ===========================================================================
   2026-06-18 batch（D-3枠線色 / D-4ホバー高速 / G-1 PCキャッチ / G-2 PCカード横 / H-1 SPスライダー）
   =========================================================================== */
/* D-4: scene のホバー反応を速く */
.scene__item{ transition:all .15s ease; }
.scene__icon{ transition:transform .15s ease, background .15s ease; }
.scene__item:hover .scene__icon{ transition:transform .15s ease, background .15s ease; }

/* D-3: scene 枠線色（個人=オレンジ #E8621A / 法人=ネイビー #1A3A5C） */
.scene__group:not(.scene__group--biz) .scene__grid{ --scene-border:#E8621A; }
.scene__group--biz .scene__grid{ --scene-border:#1A3A5C; }

/* G-1: PC HEROキャッチ拡大（位置はそのまま・サイズのみ） */
@media (min-width:769px){
  .hero__catch{ font-size:clamp(1.8rem,3.5vw,3rem); font-weight:700; line-height:1.4; }
}

/* G-2: PC techカードをテキスト左／画像右の横並び・カードは縦積み（1列） */
@media (min-width:769px){
  .tech__grid{ grid-template-columns:1fr; max-width:none; margin-inline:auto; gap:24px; }
  .tech__card{ display:flex; flex-direction:row; align-items:flex-start; gap:34px; }
  .tech__body{ flex:1; }
  .tech__media{ flex:0 0 40%; max-width:40%; margin-top:0; }
}

/* H-1: SP scene を横スライダー化＋「※スライドできます」（製品仕様と同UI） */
.scene__hint{ display:none; }
@media (max-width:768px){
  .scene__group .scene__grid{ display:flex; grid-template-columns:none; border:none; border-radius:0; padding:0; background:transparent; overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; }
  .scene__group .scene__item{ flex:0 0 84%; scroll-snap-align:center; border:1px solid var(--scene-border,var(--c-line)); border-radius:12px; }
  .scene__hint{ display:block; font-size:.75rem; color:#888888; text-align:center; margin-top:8px; }
}

/* ===========================================================================
   2026-06-18(2) A-4共通ヘッダー/フッターを .mys body で他ページと揃える
   （mysaon.css の .mys img{height:auto} / .mys .site-tel{display:inline-flex} が
     共通H/Fの .sc-logo img・.sc-gnav__tel を上書きしてしまう問題の打ち消し）
   =========================================================================== */
/* ロゴ高さを他ページ（60px / SP55px）に合わせる */
.mys .sc-logo img{ height:60px; }
.mys .sc-footer__logo img{ height:48px; }
@media (min-width:769px){ .mys .sc-footer__logo img{ height:80px; } }
@media (max-width:768px){ .mys .sc-logo img{ height:55px; } .mys .sc-footer__logo img{ height:40px; } }
/* ヘッダー内の電話2重表示を解消：ナビ内の電話はPC非表示（他ページと同じ）。SPメニュー内では表示 */
.mys .sc-gnav__tel{ display:none; }
@media (max-width:900px){ .mys .sc-gnav__tel{ display:inline-flex; } }