@charset "utf-8";
/* =========================================================================
   SUWAクリスティについて（About / 会社紹介）Stylesheet
   suwa-christy / mysaon と世界観統一（ライトトーン＋精密感）。namespace: .sc / ab-*
   ※Heroがダークのため、固定ヘッダーは「透明時=白文字／スクロール後=濃色」に切替
   ========================================================================= */
:root{
  --c-base:#FFFFFF; --c-sub:#F5F5F3; --c-dark:#1A1A1A;
  --c-green:#2E7D32; --c-green-d:#1f5a23; --c-orange:#E8621A;
  --c-text:#1A1A1A; --c-muted:#888888; --c-line:#E4E4E0; --c-line-d:#333333;
  --c-ondark:#b6b6b6;
  --ease:cubic-bezier(.22,.61,.36,1); --maxw:1200px; --pad-sec:clamp(88px,11vw,140px);
  --ff-jp:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-en:"Inter","Noto Sans JP",sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
.sc{ margin: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; overflow-x:hidden; }
.sc img{ max-width:100%; height:auto; display:block; }
.sc a{ color:inherit; text-decoration:none; }
.sc ul,.sc ol{ list-style:none; margin:0; padding:0; }
.sc h1,.sc h2,.sc h3,.sc p{ margin:0; }
.sc ::selection{ background:var(--c-green); color:#fff; }
.sc p,.sc li,.sc dd,.sc dt,.sc td,.sc th,.sc summary,.sc label{ font-size:1rem; }
.sc small{ font-size:14px; }
.sc__inner{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }

.sc-label{ display:inline-block; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.32em; text-transform:uppercase; color:var(--c-green); font-weight:600; position:relative; padding-left:42px; margin-bottom:24px; }
.sc-label::before{ content:""; position:absolute; left:0; top:50%; width:30px; height:1px; background:var(--c-green); }
.sc-label--orange{ color:var(--c-orange); } .sc-label--orange::before{ background:var(--c-orange); }
.sc-h2{ font-family:var(--ff-jp); font-weight:300; font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.45; letter-spacing:.02em; }
.sc-h2 b{ font-weight:600; } .sc-h2--light{ color:#fff; }

.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s } .reveal.d3{ transition-delay:.3s } .reveal.d4{ transition-delay:.4s }
@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:#b9b9b3; background:repeating-linear-gradient(45deg,#efefec 0 14px,#f5f5f3 14px 28px); }

/* ===== HEADER（ダークHero対応：透明時=白文字／stuck=濃色） ===== */
.sc-header{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,4vw,48px); transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease); }
.sc-header.is-stuck{ background:rgba(255,255,255,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--c-line); padding-top:15px; padding-bottom:15px; }
.sc-logo{ font-family:var(--ff-en); font-weight:600; letter-spacing:.22em; font-size:1.05rem; color:#fff; transition:color .4s; }
.sc-header.is-stuck .sc-logo{ color:var(--c-green); }
.sc-gnav{ display:flex; align-items:center; gap:30px; }
.sc-gnav a{ font-size:.9375rem; color:#fff; position:relative; transition:color .3s; }
.sc-header.is-stuck .sc-gnav a{ color:var(--c-text); }
.sc-gnav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:#E8621A; transition:width .3s var(--ease); }
.sc-gnav a:hover::after,.sc-gnav a.is-active::after{ width:100%; }
.sc-gnav a.is-active{ color:var(--c-orange); font-weight:600; }
.sc-header.is-stuck .sc-gnav a.is-active{ color:var(--c-orange); }
.sc-gnav a.is-mysaon{ color:var(--c-orange); font-weight:600; } .sc-header.is-stuck .sc-gnav a.is-mysaon{ color:var(--c-orange); } .sc-gnav a.is-mysaon::after{ background:var(--c-orange); }
.sc-burger{ display:none; width:30px; height:22px; position:relative; background:none; border:none; cursor:pointer; padding:0; z-index:61; }
.sc-burger span{ position:absolute; left:0; width:100%; height:2px; background:#fff; transition:transform .35s var(--ease),opacity .25s,background .4s; }
.sc-header.is-stuck .sc-burger span{ background:var(--c-text); }
.sc-burger span:nth-child(1){ top:0 } .sc-burger span:nth-child(2){ top:10px } .sc-burger span:nth-child(3){ top:20px }
.sc-burger.is-open span{ background:var(--c-text); }
.sc-burger.is-open span:nth-child(1){ top:10px; transform:rotate(45deg) } .sc-burger.is-open span:nth-child(2){ opacity:0 } .sc-burger.is-open span:nth-child(3){ top:10px; transform:rotate(-45deg) }
@media (max-width:900px){
  .sc-burger{ display:block; }
  .sc-gnav{ 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); }
  .sc-gnav.is-open{ transform:none; }
  .sc-gnav a,.sc-header.is-stuck .sc-gnav a{ color:var(--c-text); font-size:1.2rem; }
  .sc-gnav a.is-mysaon{ color:var(--c-orange); }
}

/* ===== [1] PAGE HERO（60vh / dark / 左寄せ） ===== */
.ab-hero{ position:relative; background:var(--c-dark); color:#fff; min-height:60vh; display:flex; align-items:center; padding:150px 0 80px; overflow:hidden; }
.ab-hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; width:min(100% - 48px,var(--maxw)); margin-inline:auto; }
.ab-hero__title{ font-family:var(--ff-en); font-weight:200; font-size:clamp(2.4rem,6vw,5rem); line-height:1.05; letter-spacing:.04em; text-transform:uppercase; }
.ab-hero__line{ width:0; height:3px; margin:24px 0; background:linear-gradient(90deg,var(--c-green),var(--c-orange)); }
.ab-hero.is-in .ab-hero__line{ width:110px; transition:width 1.1s var(--ease) .3s; }
.ab-hero__jp{ font-size:clamp(1.15rem,2.4vw,1.6rem); font-weight:500; letter-spacing:.08em; }
.ab-hero__en{ font-family:var(--ff-en); font-size:clamp(.875rem,1.4vw,1.02rem); letter-spacing:.16em; color:var(--c-ondark); margin-top:14px; }
.ab-hero__gfx{ position:relative; aspect-ratio:1/1; max-width:300px; justify-self:end; }
.ab-hero__gfx svg{ width:100%; height:100%; overflow:visible; }
.ab-gfx-line{ fill:none; stroke-width:1; }
.ab-gfx-line.g{ stroke:var(--c-green); stroke-dasharray:6 8; animation:abDash 16s linear infinite; }
.ab-gfx-line.o{ stroke:var(--c-orange); }
@keyframes abDash{ to{ stroke-dashoffset:-280 } }
.ab-gfx-dot{ fill:var(--c-orange); } .ab-gfx-dot.g{ fill:var(--c-green); }
@media (max-width:900px){ .ab-hero__grid{ grid-template-columns:1fr; } .ab-hero__gfx{ display:none; } }

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

/* ===== [2] MESSAGE ===== */
.ab-message{ background:var(--c-base); padding:var(--pad-sec) 0; }
.ab-message__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; margin-top:8px; }
.ab-ceo__photo{ aspect-ratio:3/4; border-radius:6px; }
.ab-ceo__cap{ margin-top:18px; line-height:1.7; }
.ab-ceo__role{ font-size:.9375rem; color:var(--c-muted); }
.ab-ceo__name{ font-size:1.35rem; font-weight:600; letter-spacing:.06em; }
.ab-msg__h{ margin-bottom:30px; }
.ab-msg p{ color:#555; line-height:1.95; }
.ab-msg p + p{ margin-top:1.4em; }
.ab-msg__sign{ display:block; text-align:right; margin-top:30px; font-family:var(--ff-en); font-weight:300; font-size:1.1rem; letter-spacing:.1em; color:var(--c-muted); }
@media (max-width:900px){ .ab-message__grid{ grid-template-columns:1fr; gap:36px; } .ab-ceo__photo{ max-width:320px; } }

/* ===== [3] BRAND STORY ===== */
.ab-story{ background:var(--c-sub); padding:var(--pad-sec) 0; }
.ab-story__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.ab-story__body{ color:#555; line-height:1.95; }
.ab-story__body p + p{ margin-top:1.4em; }
.ab-kw{ display:grid; gap:18px; }
.ab-kw__item{ background:var(--c-base); border:1px solid var(--c-line); border-left:3px solid var(--c-green); border-radius:6px; padding:22px 24px; transition:transform .4s var(--ease),box-shadow .4s; }
.ab-kw__item:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -28px rgba(0,0,0,.3); }
.ab-kw__item:nth-child(2){ border-left-color:var(--c-orange); }
.ab-kw__en{ font-family:var(--ff-en); font-weight:600; font-size:1.05rem; letter-spacing:.12em; color:var(--c-green); }
.ab-kw__item:nth-child(2) .ab-kw__en{ color:var(--c-orange); }
.ab-kw__jp{ font-size:1.3rem; color:#575757; margin-top:6px; }
.ab-story__media{ grid-column:1 / -1; margin-top:50px; border-radius:6px; aspect-ratio:16/6; }
@media (max-width:900px){ .ab-story__grid{ grid-template-columns:1fr; gap:36px; } }

/* ===== [4] VISION（dark） ===== */
.ab-vision{ background:var(--c-dark); color:#fff; padding:var(--pad-sec) 0; }
.ab-vision__sub{ color:var(--c-ondark); max-width:720px; margin:8px 0 56px; line-height:1.9; }
.ab-vnums{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid var(--c-line-d); border-bottom:1px solid var(--c-line-d); padding:46px 0; }
.ab-vnum__n{ font-family:var(--ff-en); font-weight:200; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; }
.ab-vnum:nth-child(2) .ab-vnum__n{ color:var(--c-orange); }
.ab-vnum:nth-child(1) .ab-vnum__n,.ab-vnum:nth-child(3) .ab-vnum__n{ color:#fff; }
.ab-vnum__n .u{ font-size:.4em; margin-left:.1em; color:var(--c-ondark); }
.ab-vnum__t{ color:var(--c-ondark); font-size:.9375rem; margin-top:12px; letter-spacing:.04em; }
.ab-vlist{ display:grid; gap:14px; margin-top:46px; }
.ab-vlist li{ position:relative; padding-left:30px; color:#eaeaea; line-height:1.8; }
.ab-vlist li::before{ content:""; position:absolute; left:0; top:.65em; width:12px; height:2px; background:var(--c-green); }
@media (max-width:768px){ .ab-vnums{ grid-template-columns:1fr; gap:26px; text-align:left; } }

/* ===== [5] COMPANY ===== */
.ab-company{ background:var(--c-base); padding:var(--pad-sec) 0; }
.ab-company__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:start; }
.ab-company__photo{ aspect-ratio:4/3; border-radius:6px; position:sticky; top:100px; }
.ab-table{ width:100%; border-collapse:collapse; border-top:1px solid var(--c-line); }
.ab-table th,.ab-table td{ text-align:left; padding:18px 6px; border-bottom:1px solid var(--c-line); vertical-align:top; font-size:.9688rem; }
.ab-table th{ width:30%; color:var(--c-green); font-weight:600; white-space:nowrap; }
.ab-table td{ color:var(--c-text); line-height:1.8; }
.ab-table a{ color:var(--c-green); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){ .ab-company__grid{ grid-template-columns:1fr; gap:34px; } .ab-company__photo{ position:static; max-width:420px; } }
@media (max-width:600px){ .ab-table th{ width:38%; } }

/* ===== FAQ ===== */
.ab-faq{ background:var(--c-sub); padding:var(--pad-sec) 0; }
.ab-faq__head{ margin-bottom:40px; }
.ab-faq__list{ max-width:860px; }
.ab-faq-item{ border-bottom:1px solid var(--c-line); }
.ab-faq-item__q{ list-style:none; cursor:pointer; padding:24px 48px 24px 0; position:relative; font-weight:600; font-size:1.05rem; }
.ab-faq-item__q::-webkit-details-marker{ display:none; }
.ab-faq-item__q::after{ content:""; position:absolute; right:6px; top:30px; width:10px; height:10px; border-right:2px solid var(--c-green); border-bottom:2px solid var(--c-green); transform:rotate(45deg); transition:transform .35s var(--ease); }
.ab-faq-item[open] .ab-faq-item__q::after{ transform:rotate(-135deg); }
.ab-faq-item__a{ padding:0 0 24px; color:#666; font-size:.9375rem; line-height:1.9; }

/* ===== [6] CTA（2ボタン） ===== */
.ab-cta{ background:var(--c-sub); padding:clamp(80px,11vw,130px) 0; text-align:center; }
.ab-cta__title{ font-weight:300; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.5; margin:6px 0 32px; }
.ab-cta__btns{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.sc-btn-o,.sc-btn-g{ display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:1rem; padding:18px 40px; border-radius:999px; transition:background .35s var(--ease),gap .3s; }
.sc-btn-o{ background:var(--c-orange); color:#fff; } .sc-btn-o:hover{ background:#cf5212; gap:18px; }
.sc-btn-g{ background:var(--c-green); color:#fff; } .sc-btn-g:hover{ background:var(--c-green-d); gap:18px; }
.ab-cta__sublink{ display:inline-block; margin-top:26px; color:var(--c-muted); font-size:.9375rem; text-decoration:underline; text-underline-offset:3px; transition:color .3s; }
.ab-cta__sublink:hover{ color:var(--c-green); }
/* 共通CTA部品 sc-cta のスタイルは css/sc-cta.css（唯一の正本）に集約。ここでは定義しない（二重管理・ページ間差異の防止）。 */
/* 2026-06-17 お問い合わせ導線（個人=グリーン枠／法人=ネイビー枠 アウトライン） */
.ab-contact{ margin-top:42px; padding-top:30px; border-top:1px solid #E0E0E0; }
.ab-contact__h{ font-size:.9rem; color:#888888; margin-bottom:18px; }
.ab-contact__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ab-obtn{ display:inline-flex; align-items:center; gap:10px; padding:14px 34px; border-radius:999px; font-weight:600; font-size:1rem; border:1.5px solid currentColor; background:transparent; transition:background .3s,color .3s,gap .3s; }
.sc .ab-obtn--g{ color:#2E7D32; } .sc .ab-obtn--g:hover{ background:#2E7D32; color:#fff; gap:14px; }
.sc .ab-obtn--n{ color:#1A3A5C; } .sc .ab-obtn--n:hover{ background:#1A3A5C; color:#fff; gap:14px; }

/* ===== FOOTER ===== */
.sc-footer{ background:#0A0A0A; color:#fff; padding:40px 0; }
.sc-footer__row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sc-footer__logo{ font-family:var(--ff-en); font-weight:600; letter-spacing:.22em; color:#fff; }
.sc-footer__nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sc-footer__nav a{ color:#fff; font-size:.9375rem; opacity:.85; transition:opacity .3s,color .3s; padding:0 4px; }
.sc-footer__nav a:hover{ opacity:1; color:var(--c-orange); }
.sc-footer__nav .sep{ color:#444; }
.sc-footer__cr{ color:#888; font-family:var(--ff-en); font-size:.875rem; letter-spacing:.06em; }
@media (max-width:768px){ .sc-footer__row{ flex-direction:column; text-align:center; gap:18px; } }

@media (max-width:768px){ :root{ --pad-sec:clamp(70px,15vw,104px); } .sc__inner{ width:min(100% - 36px,var(--maxw)); } }

/* トップへ戻るボタン（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:var(--c-green); color:#fff; border-color:var(--c-green); transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(46,125,50,.45); }

/* ===== 2026-06-16(3) 技術体系インフォグラフィック（ブランドストーリー内・ab-story__media置換） ===== */
.ab-tmap{ grid-column:1 / -1; margin-top:54px; background:#F5F5F3; border:1px solid var(--c-line); border-radius:12px; padding:clamp(34px,5vw,62px) clamp(20px,4vw,56px); }
.ab-tmap__grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px 56px; max-width:900px; margin-inline:auto; align-items:stretch; }
.ab-tnode{ background:#fff; border:1px solid var(--c-line); border-radius:10px; padding:24px 24px 22px; display:flex; flex-direction:column; box-shadow:0 16px 34px -26px rgba(0,0,0,.3); }
.ab-tnode__title{ color:#E8621A; font-weight:700; font-size:1.02rem; line-height:1.55; letter-spacing:.01em; }
.ab-tnode__desc{ color:#555; font-size:.9375rem; line-height:1.85; margin-top:10px; flex:1; }
.ab-tnode__badge{ align-self:flex-start; margin-top:18px; background:#E8621A; color:#fff; font-weight:700; font-size:.875rem; letter-spacing:.02em; padding:7px 18px; border-radius:999px; }
.ab-tnode__badge--y{ background:#F5A623; color:#3a2c00; }
/* 中央リボンバナー */
.ab-tmap__center{ grid-column:1 / -1; position:relative; display:flex; justify-content:center; padding:4px 0; }
.ab-tribbon{ position:relative; display:inline-block; background:var(--c-green); color:#fff; font-weight:700; font-size:clamp(1.15rem,2.6vw,1.65rem); letter-spacing:.05em; padding:16px 60px; box-shadow:0 14px 30px -14px rgba(46,125,50,.55); clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%); }
/* 中央から放射する矢印（fa-arrow-upを回転） */
.ab-tconn{ position:absolute; color:#E8621A; font-size:1.5rem; line-height:1; z-index:1; }
.ab-tconn i{ display:block; }
.ab-tconn--ul{ left:25%; top:-32px; transform:translateX(-50%) rotate(-45deg); }
.ab-tconn--ur{ left:75%; top:-32px; transform:translateX(-50%) rotate(45deg); }
.ab-tconn--dl{ left:25%; bottom:-32px; transform:translateX(-50%) rotate(-135deg); }
.ab-tconn--dr{ left:75%; bottom:-32px; transform:translateX(-50%) rotate(135deg); }
@media (max-width:768px){
  .ab-tmap__grid{ grid-template-columns:1fr; gap:18px; }
  .ab-tconn{ display:none; }
  .ab-tmap__center{ padding:6px 0; }
  .ab-tribbon{ padding:14px 44px; }
}

/* ===== 2026-06-16(4) CTAボタン文字を白に固定（.sc a{color:inherit}対策）＋電話ボタン ===== */
.sc .sc-btn-o, .sc .sc-btn-g{ color:#fff; }
.sc-header{ gap:18px; }
.sc-logo{ margin-right:auto; }
.sc .site-tel{ display:inline-flex; align-items:center; gap:8px; background:var(--c-orange); 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); }
.sc .site-tel:hover{ background:#cf5212; color:#fff; transform:translateY(-2px); }
.sc .site-tel i{ font-size:.9em; }
.sc-footer__brand{ display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ab-table a[href^="tel:"]{ color:var(--c-green); text-decoration:none; font-weight:600; }
@media (max-width:768px){ .sc .site-tel{ font-size:.85rem; padding:8px 14px; } }

/* ===== 2026-06-16(5b) スマホ：ハンバーガー修正/電話をメニュー内/ロゴ拡大/ロゴ比率 ===== */
.sc-logo, .sc-footer__logo{ flex-shrink:0; }
.sc-logo img, .sc-footer__logo img{ max-width:none; }
.sc-gnav__tel{ display:none; }
@media (max-width:900px){
  .sc-header.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .sc-header > .site-tel{ display:none; }
  .sc-gnav__tel{ display:inline-flex; margin-top:8px; }
}
@media (max-width:768px){ .sc-logo img{ height:42px; } }

/* ===========================================================================
   2026-06-16(5c) スマホ専用：ロゴ70px+小電話 / ハンバーガー刷新（緑・左寄せ・ロゴ上・会社情報下・製品情報アコーディオン）/ フッターにMYSAON
   （すべて @media 内・PCには影響させない／aboutはダークHeroヘッダーのため電話色を切替）
   =========================================================================== */
@media (max-width:768px){ .sc-logo img{ height:70px; } }
@media (max-width:900px){
  .sc-logo{ order:0; margin-right:12px; }
  .sc-header > .site-tel{ display:inline-flex; order:1; background:none; padding:2px 4px; font-size:.76rem; font-weight:600; color:#fff; }
  .sc-header.is-stuck > .site-tel{ color:#555; }
  .sc-header > .site-tel i{ color:var(--c-orange); }
  .sc-header > .site-tel:hover{ background:none; transform:none; }
  .sc-burger{ order:2; margin-left:auto; }
}
/* ハンバーガーメニュー刷新 */
.sc-gnav__head, .sc-gnav__foot{ display:none; }
.sc .sc-gnav__tel{ display:none; }
@media (max-width:900px){
  .sc .sc-gnav__tel{ display:inline-flex; }
  .sc-gnav{ justify-content:flex-start; align-items:stretch; gap:0; background:#2E7D32; padding:80px 26px 32px; overflow-y:auto; }
  .sc-gnav__head{ display:block; margin-bottom:12px; }
  .sc-gnav__head img{ height:54px; width:auto; display:block; }
  .sc-gnav > a:not(.sc-gnav__tel), .sc-nav-item > a{ display:block; width:100%; text-align:left; color:#fff; font-size:1.05rem; font-weight:600; padding:16px 2px; border-bottom:1px solid rgba(255,255,255,.28); letter-spacing:.04em; }
  .sc-header.is-stuck .sc-gnav a{ color:#fff; }
  .sc-gnav a::after{ left:auto; bottom:auto; background:none; width:auto; height:auto; }
  .sc-nav-item{ display:block; gap:0; border-bottom:1px solid rgba(255,255,255,.28); position:relative; }
  .sc-nav-item > a{ border-bottom:none; }
  .sc-nav-item > a::after{ content:""; display:block; position:absolute; right:6px; top:24px; width:9px; height:9px; left:auto; bottom:auto; background:none; border-right:2px solid rgba(255,255,255,.85); border-bottom:2px solid rgba(255,255,255,.85); transform:rotate(45deg); transition:transform .3s var(--ease); }
  .sc-nav-item.is-open > a::after{ transform:rotate(-135deg); }
  .sc-dd{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; background:transparent; padding:0; margin:0; min-width:0; max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
  .sc-nav-item.is-open .sc-dd{ max-height:320px; }
  .sc-gnav .sc-dd__item{ display:block; color:#fff; font-size:.98rem; font-weight:500; padding:12px 2px 12px 16px; }
  .sc-gnav .sc-dd__item:hover{ background:transparent; }
  .sc-gnav .sc-gnav__tel{ display:inline-flex; align-self:flex-start; margin-top:18px; background:#fff; color:var(--c-green); }
  .sc-gnav .sc-gnav__tel:hover{ background:#fff; color:var(--c-green); transform:none; }
  .sc-gnav__foot{ display:block; margin-top:22px; color:rgba(255,255,255,.92); font-size:.85rem; line-height:1.8; }
  .sc-gnav__foot a{ color:#fff; font-weight:600; }
  .sc-gnav__foot small{ display:block; margin-top:8px; color:rgba(255,255,255,.7); font-size:.78rem; }
}
/* D2: フッターの製品情報ドロップダウン（MYSAONリンク）をスマホでは展開表示 */
@media (max-width:900px){
  .sc-footer .sc-dd{ display:block; position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:0; margin-top:4px; }
  .sc-footer .sc-dd__item{ color:#fff; opacity:.85; padding:4px 0; }
}

/* ===== 2026-06-16(6) スマホ：メニュー白背景＋オレンジ統一・電話1rem・ロゴ55px・フッター製品情報常時展開 ===== */
@media (max-width:900px){
  .sc-header > .site-tel{ font-size:1.3rem; }
  .sc-header > .site-tel i{ color:var(--c-orange); }
  .sc-gnav .sc-gnav__tel{ font-size:1.2rem; }
  /* メニュー：白背景・濃色（is-stuck時の白指定も打ち消す） */
  .sc-gnav{ background:#fff; }
  .sc-gnav > a:not(.sc-gnav__tel), .sc-nav-item > a{ color:#1A1A1A; border-bottom-color:#E4E4E0; }
  .sc-header.is-stuck .sc-gnav a{ color:#1A1A1A; }
  .sc-header.is-stuck .sc-gnav a.sc-gnav__tel{ color:#fff; }
  .sc-nav-item{ border-bottom-color:#E4E4E0; }
  .sc-nav-item > a::after{ border-right-color:var(--c-orange); border-bottom-color:var(--c-orange); }
  .sc-gnav .sc-dd__item{ color:#333; position:relative; padding-left:24px; }
  .sc-gnav .sc-dd__item::before{ content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--c-orange); }
  .sc-gnav .sc-gnav__tel{ background:var(--c-orange); color:#fff; }
  .sc-gnav .sc-gnav__tel:hover{ background:#cf5212; color:#fff; }
  .sc-gnav__foot{ color:#666; }
  .sc-gnav__foot a{ color:var(--c-orange); }
  .sc-gnav__foot small{ color:#999; }
  /* フッター：縦並び＋製品情報の下に商品名を常時表示（オレンジ印） */
  .sc-footer__nav{ flex-direction:column; align-items:center; gap:8px; }
  .sc-footer__nav .sep{ display:none; }
  .sc-footer__nav .sc-nav-item{ display:flex; flex-direction:column; align-items:center; }
  .sc-footer .sc-dd__item{ position:relative; padding-left:16px; }
  .sc-footer .sc-dd__item::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--c-orange); }
}
@media (max-width:768px){ .sc-logo img{ height:55px; } }

/* ===== 2026-06-16(7) スマホ：製品情報シェブロン不具合修正＋フッター製品情報を白文字に ===== */
@media (max-width:900px){
  .sc-gnav a::after{ content:none; }
  .sc-gnav .sc-nav-item > a::after{ content:""; position:absolute; right:8px; top:22px; left:auto; bottom:auto; width:9px; height:9px; border:0; border-right:2px solid var(--c-orange); border-bottom:2px solid var(--c-orange); background:none; transform:rotate(45deg); transition:transform .3s var(--ease); }
  .sc-gnav .sc-nav-item.is-open > a::after{ transform:rotate(-135deg); }
  .sc-footer .sc-nav-item > a, .sc-footer__nav a{ color:#fff; }
  .sc-footer .sc-nav-item > a{ padding:0; border-bottom:none; }
  .sc-footer .sc-nav-item > a::after{ content:none; }
}
/* フッターの「製品情報」はリンクではなくラベル（PC/SP共通・白文字） */
.sc-footer__nav .sc-foot-cat{ display:inline-block; color:#fff; font-size:.9375rem; opacity:.85; padding:0 4px; }

/* スマホ：ハンバーガー内の商品名テキストは黒（stuck時にオレンジになる旧規則を打消し）。丸印はオレンジのまま */
@media (max-width:900px){
  .sc-gnav .sc-dd__item{ color:#1A1A1A; text-align:left; }
  .sc-header.is-stuck .sc-gnav .sc-dd__item{ color:#1A1A1A; }
}

/* ===== 後勝ち最終上書き：フッターの製品情報を常時表示／スマホ.sc-logo 55px ===== */
@media (max-width:900px){
  .sc-footer .sc-dd{ display:block; position:static; opacity:1; visibility:visible; transform:none; }
  .sc-footer .sc-dd__item{ color:#fff; }
}
@media (max-width:768px){ .sc-logo img{ height:55px; } }

/* ===== 2026-06-15(3) ④ナビ日本語＋製品情報ドロップダウン（CSSのみ） ===== */
.sc-nav-item{ position:relative; }
.sc-dd{ position:absolute; top:100%; left:0; min-width:208px; background:#FFFFFF; border:1px solid #E0E0E0; box-shadow:0 14px 30px -12px rgba(0,0,0,.28); border-radius:6px; padding:6px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:70; }
.sc-nav-item:hover .sc-dd{ opacity:1; visibility:visible; transform:translateY(0); }
.sc-gnav .sc-dd__item{ display:block; padding:10px 14px; border-radius:4px; font-size:.9375rem; font-weight:600; white-space:nowrap; color:#E8621A; transition:background .2s; }
.sc-gnav .sc-dd__item::after{ display:none; }
.sc-gnav .sc-dd__item:hover{ background:#F5F5F3; }
@media (max-width:900px){
  /* ヘッダーナビ内のみ：PC用absoluteドロップダウンを打ち消し（フッターは別ブロックで管理） */
  .sc-gnav .sc-dd{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; background:transparent; padding:0; min-width:auto; z-index:auto; }
  .sc-gnav .sc-nav-item{ display:block; align-items:stretch; gap:0; }
  .sc-gnav .sc-dd__item{ text-align:left; padding:12px 2px 12px 24px; font-size:.98rem; }
}

/* ===== 2026-06-16 ③ ロゴをSUWAクリスティトップと共通サイズ／ヘッダー高さ統一／フッター製品情報ドロップダウン ===== */
.sc-logo img{ height:60px; width:auto; display:block; }
.sc-footer__logo img{ height:48px; width:auto; display:block; }
@media (max-width:768px){ .sc-logo img{ height:34px; } .sc-footer__logo img{ height:60px; } }
/* ヘッダーの上下paddingをトップと同じにして高さ感を統一 */
.sc-header{ padding-top:10px; padding-bottom:10px; }
/* ヘッダーのドロップダウン項目はstuck時もオレンジ維持（トップと同じ見え方） */
.sc-header.is-stuck .sc-gnav .sc-dd__item{ color:#E8621A; }
/* フッターの製品情報ドロップダウン（PC：上方向に開く・白背景×オレンジ文字） */
@media (min-width:901px){
  .sc-footer__nav .sc-nav-item{ position:relative; display:inline-flex; align-items:center; }
  .sc-footer .sc-dd{ top:auto; bottom:100%; }
  .sc-footer .sc-dd__item{ display:block; padding:10px 14px; border-radius:4px; font-size:.9375rem; font-weight:600; white-space:nowrap; color:#E8621A; opacity:1; transition:background .2s; }
  .sc-footer .sc-dd__item:hover{ background:#F5F5F3; color:#E8621A; opacity:1; }
}
@media (max-width:900px){ .sc-footer .sc-dd{ display:block; max-height:none; overflow:visible; position:static; opacity:1; visibility:visible; transform:none; } }

/* ===== フッター製品情報の商品名をトップページと統一（白文字・縦並び・余白・オレンジ丸） ===== */
@media (max-width:900px){
  .sc-footer__nav .sc-nav-item{ display:flex; flex-direction:column; align-items:center; }
  .sc-footer .sc-dd__item{ color:#fff; opacity:.85; padding:4px 0 4px 16px; position:relative; }
  .sc-footer .sc-dd__item:hover{ background:transparent; color:#fff; }
}
/* スマホ：.sc-nav-item の gap を 0 に */
@media (max-width:900px){ .sc-nav-item{ gap:0; } }

/* ===== 最終上書き（③ブロックより後で確実に勝たせる）：aboutロゴ55px／ハンバーガー商品名は黒 ===== */
@media (max-width:768px){ .sc-logo img{ height:55px; } }
@media (max-width:900px){
  .sc-gnav .sc-dd__item{ color:#1A1A1A; }
  .sc-header.is-stuck .sc-gnav .sc-dd__item{ color:#1A1A1A; }
}

/* ===== 2026-06-16 Hero中央ロゴふわふわ＋Brand Identityセクション ===== */
.ab-hero__gfx{ position:relative; }
.ab-hero__logo-float{ position:absolute; top:50%; left:50%; width:46%; max-width:150px; height:auto; transform:translate(-50%,-50%); animation:abFloat 4.5s ease-in-out infinite; }
@keyframes abFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-12px); } }
@media (prefers-reduced-motion:reduce){ .ab-hero__logo-float{ animation:none; } }
/* Brand Identity */
.ab-bi{ background:#FFFFFF; padding:var(--pad-sec) 0; }
.ab-bi__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:40px; }
.ab-bi__block{ padding:6px 44px; }
.ab-bi__block:first-child{ padding-left:0; }
.ab-bi__block + .ab-bi__block{ border-left:1px solid #E0E0E0; }
.ab-bi__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ab-bi__sub{ font-size:1.7rem; font-weight:600; color:var(--c-text); }
.ab-bi__badge{ font-size:.78rem; font-weight:600; color:#2E7D32; border:1px solid #2E7D32; border-radius:999px; padding:3px 12px; white-space:nowrap; }
.ab-bi__name{ font-weight:700; font-size:clamp(2.5rem,5vw,4rem); letter-spacing:.02em; line-height:1.2; margin-bottom:16px; color:#E8621A; }
.ab-bi__desc{ color:#1A1A1A; font-size:.9688rem; line-height:1.9; }
.ab-bi__logo-row{ display:flex; align-items:flex-start; gap:22px; }
.ab-bi__logo{ width:120px; height:auto; flex-shrink:0; border-radius:50%; }
@media (max-width:768px){
  .ab-bi__grid{ grid-template-columns:1fr; }
  .ab-bi__block{ padding:0; }
  .ab-bi__block + .ab-bi__block{ border-left:none; border-top:1px solid #E0E0E0; padding-top:26px; margin-top:26px; }
  .ab-bi__name{ font-size:1.5rem; }
  .ab-bi__badge{ font-size:.9rem; }
}

/* ===== 2026-06-16 技術体系を独立セクション化（Technology & Products） ===== */
.ab-tech-sec{ background:#F5F5F3; padding:var(--pad-sec) 0; }
.ab-tech-sec__lead{ color:#444; font-size:1.05rem; line-height:1.9; max-width:780px; margin-top:10px; }
.ab-tech-sec__note{ color:#888; font-size:.85rem; text-align:center; margin-top:18px; }

/* ===== 2026-06-18 PC nav spacing/divider(E-1), contact button(E-4), footer logo 80px(E-2) ===== */
@media (min-width:769px){
  .sc-gnav{ gap:0; }
  .sc-gnav > a:not(.site-tel):not(.sc-gnav__tel):not(.sc-nav-cta),
  .sc-gnav > .sc-nav-item{ padding:0 20px; border-right:1px solid #E0E0E0; }
  .sc-gnav a.sc-nav-cta{ margin-left:18px; padding:9px 22px; border:1px solid #E8621A; border-radius:999px; color:#E8621A; font-weight:600; transition:all .3s var(--ease); }
  .sc-gnav a.sc-nav-cta::after{ display:none; }
  .sc-gnav a.sc-nav-cta:hover{ background:#E8621A; color:#fff; }
  .sc-header.is-stuck .sc-gnav a.sc-nav-cta{ color:#E8621A; }
  .sc-header.is-stuck .sc-gnav a.sc-nav-cta:hover{ color:#fff; }
  .sc-footer__logo img{ height:80px; }
}

/* ===== 2026-06-18 スマホ：フッターsc-ddが固定ヘッダー/バーガーに重ならないよう調整 ===== */
@media (max-width:900px){
  .sc-header{ z-index:100; }
  .sc-burger{ z-index:101; }
  .sc-gnav.is-open{ z-index:99; }
  .sc-footer .sc-dd,
  .sc-footer .sc-nav-item{ position:static; z-index:auto; }
}

/* ===== 2026-06-18 about：ハンバーガー内MYSAONテキストの最終上書き（中央寄せ・padding打ち消し対策） ===== */
@media (max-width:900px){
  .sc-gnav .sc-nav-item{ display:block; gap:0; }
  .sc-gnav .sc-dd__item{ text-align:left; padding:12px 2px 12px 24px; font-size:.98rem; font-weight:500; }
  .sc-header.is-stuck .sc-gnav .sc-dd__item{ color:#1A1A1A; }
}

/* ===== 2026-06-18 共通H/F最終統一：フッターMYSAON・電話（suwa-christy.css と同一） ===== */
@media (max-width:768px){
  .sc-footer__brand .site-tel{ font-size:1.1rem; }
}
@media (max-width:900px){
  .sc-footer .sc-dd__item{
    color:#fff;
    opacity:.85;
    padding:4px 0 4px 16px;
    position:relative;
    border-radius:0;
    white-space:normal;
  }
  .sc-footer .sc-dd__item:hover{ background:transparent; color:#fff; opacity:.85; }
  .sc-footer .sc-dd__item::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--c-orange);
  }
}