/* AQUA DEPO — approved B direction, September 2026. Keep source templates in sync. */
:root{--navy:#082b52;--blue:#087ed4;--sky:#eaf6fc;--orange:#f8780c;--wrap:1240px;--head-h:86px;--r:10px}
body{line-height:1.75}h1,h2{letter-spacing:-.035em}.btn{border-radius:7px;font-weight:700;box-shadow:none}.btn-o{background:linear-gradient(115deg,#ff8b16,#f76b06);box-shadow:0 6px 16px #ed771224}.btn-lg{font-size:15px;padding:16px 20px}.hd-in{gap:10px}.hd-logo img{height:42px}.hd-logo small{font-size:10px}.hd-nav>li>a,.hd-nav>li>button{padding:10px 8px;font-size:12px}.hd-tel{display:none}.hd-cta .btn{font-size:13px}.hero{background:#f0f8fc}.hero-in{position:relative;max-width:1440px;min-height:510px;display:block;isolation:isolate;padding:0 max(36px,calc((100% - 1192px)/2))}.hero-copy{position:relative;z-index:2;width:57%;padding:68px 0 58px;pointer-events:none}.hero-copy a{pointer-events:auto}.hero-copy .area{background:transparent;border:0;border-radius:0;padding:0;font-size:12px;letter-spacing:.07em;color:var(--blue);margin-bottom:22px}.hero-copy h1{font-size:clamp(42px,4.5vw,64px);line-height:1.28}.hero-copy .sub{font-size:15px;line-height:1.9;font-weight:500;margin:20px 0 26px;max-width:440px}.hero-photo{position:absolute;inset:0 0 0 36%;height:auto;min-height:0;z-index:-1}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f0f8fc 0%,#f0f8fce8 8%,#f0f8fc20 44%,transparent 70%)}.hero-photo img.photo{border-radius:0;object-position:58% center}.hero-photo .aqua{z-index:2;width:174px;height:auto;right:35px;bottom:0;filter:drop-shadow(0 5px 3px #0b2a4a12)}.hero-photo .bubble{z-index:3;right:185px;bottom:92px;font-size:12px;border-width:1px;padding:12px 15px;border-radius:18px}.hero-photo .tag-img{left:auto;right:15px;bottom:9px;z-index:4;font-size:9px}.hero-bar{background:#dff1fc;border:0}.hero-bar ul{justify-content:space-between;gap:12px}.hero-bar li{font-size:12px;padding:14px 0;font-weight:700}.hero-bar li svg{width:18px;height:18px}.quick-menu{padding:27px 0;border-bottom:1px solid #dcebf4}.quick-in{display:flex;align-items:center;gap:28px}.quick-in>p{font-size:13px;min-width:165px;color:var(--ink-2)}.quick-in strong{font-size:17px;color:var(--navy)}.quick-links{display:grid;grid-template-columns:repeat(8,1fr);flex:1;gap:8px}.quick-links a{color:var(--navy);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:5px;border-left:1px solid var(--line);padding:3px 4px;font-weight:700}.quick-links svg{width:32px;height:32px}.quick-links a:hover{color:var(--blue);text-decoration:none;background:var(--sky)}.sec{padding:64px 0}.menu-editorial{padding:56px 0 28px}.menu-editorial .h2{font-size:44px;margin-top:14px}.eyebrow{font-size:10px;letter-spacing:.2em}.lead{font-weight:400}.mosaic{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:235px 235px;gap:12px;margin-top:30px}.mosaic a{border-radius:10px}.mosaic .lab{bottom:15px;left:15px;padding:15px 18px;border-radius:7px;max-width:calc(100% - 30px);min-width:200px;box-shadow:none}.mosaic .lab b{font-size:18px;line-height:1.55;margin:6px 0}.mosaic .big .lab b{font-size:27px}.mosaic .lab small{font-size:13px}.tile-arrow{margin-left:auto;padding-left:20px;font-size:20px}.tile-price{font-size:11px;color:var(--ink-2);display:block;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}.tile-price strong{font-size:24px;color:#d75600;line-height:1;margin:0 2px 0 8px}.mosaic .wide img{object-position:center 55%}.menu-note{font-size:11px;margin-top:13px}.trouble{background:var(--sky);box-shadow:none;border:0;padding:25px 30px;gap:24px}.trouble .aqua{width:105px;max-height:150px;object-fit:contain}.trouble-list a{background:white;border:0;padding:16px 10px}.trouble-list small{font-weight:400}.trouble-list a:hover{box-shadow:0 2px 10px #082b5215}#trouble{padding-top:16px!important;padding-bottom:45px}#pack{max-width:1192px;margin:0 auto;border-radius:14px;padding:38px;background:linear-gradient(125deg,#0b3560,#071e3b)}.pack{padding:0;gap:35px}.pack .lead{font-size:13px;line-height:1.8}.pack h2{font-size:35px}.pack-plans small{white-space:normal}.pack-plans b{font-size:13px}.pack-plans a{padding:10px 12px}.pack-plans span{white-space:normal}.pack-photos{gap:8px}.pack-photos figure{aspect-ratio:1.08}.pack-photos .aqua{width:100px}.works{gap:16px}.reason{box-shadow:none}.cta-final{border-radius:12px}.p-hero{background:linear-gradient(100deg,#eff8fd,#fff)}.p-hero-in{padding-top:22px;padding-bottom:50px;gap:45px}.p-hero h1{font-size:42px}.p-hero .lead{font-size:14px}.p-cond{font-size:12px}.p-hero-photo{aspect-ratio:1.1;border-radius:10px}.p-hero-photo .aqua{width:130px}.p-hero .hero-cta .btn{font-size:13px;padding:14px 16px}.plan{border-radius:10px}.plan .hd-p{padding:20px}.plan:nth-child(2){border-color:var(--blue)}.plan:nth-child(2) .hd-p{background:var(--blue)}.prod .ph{background:linear-gradient(110deg,#f0f7fa,#e6f0f4);border:1px dashed #bfd3df}.mega{border-radius:12px;padding:24px;box-shadow:0 15px 50px #0b2a4a22}.mega-item{border-radius:7px}.mega-item:hover{background:var(--sky)}
@media(min-width:1081px){.hd-nav{display:flex}}
@media(min-width:721px) and (max-width:1080px){.hero-in{min-height:470px;padding:0 28px}.hero-copy{width:65%;padding:55px 0}.hero-copy h1{font-size:46px}.hero-copy .sub{max-width:340px;font-size:13px}.hero-cta{gap:8px}.hero-cta .btn{flex:none;font-size:12px;padding:14px}.hero-photo{inset:0 0 0 30%;height:auto;max-height:none;margin:0}.hero-photo .aqua{width:135px}.hero-photo .bubble{right:140px;font-size:10px}.quick-in>p{display:none}.mosaic{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:215px 215px}.mosaic .big{grid-column:1;grid-row:1/3}.mosaic .wide{grid-column:2/4}.mosaic .lab{min-width:0}.mosaic .lab b{font-size:15px}.mosaic .big .lab b{font-size:22px}#pack{margin:0 24px}.pack{grid-template-columns:1fr 1fr}}
@media(max-width:720px){:root{--head-h:68px}.hd-in{padding:0 17px}.hd-logo img{height:31px}.hd-logo small{font-size:9px}.hd-burger{width:40px;height:38px;border:0;background:var(--sky)}.wrap{padding:0 18px}.hero-in{min-height:536px;padding:0 22px;display:block}.hero-copy{width:100%;padding:28px 0 210px}.hero-copy .area{font-size:10px;letter-spacing:0;margin-bottom:13px}.hero-copy h1{font-size:36px;line-height:1.3}.hero-copy .sub{font-size:12px;line-height:1.8;margin:13px 0 17px;max-width:320px}.hero-photo{inset:0;height:100%;max-height:none;min-height:0;margin:0}.hero-photo img.photo{object-position:60% bottom}.hero-photo:after{background:linear-gradient(180deg,#f0f8fc 0%,#f0f8fcfa 30%,#f0f8fcd0 52%,#f0f8fc00 76%)}.hero-cta{gap:8px}.hero-cta .btn{flex:1 1 auto;padding:13px 10px;font-size:12px;white-space:normal}.hero-cta .btn svg{width:16px;height:16px}.hero-photo .aqua{width:112px;right:15px;bottom:0}.hero-photo .bubble{right:117px;bottom:55px;font-size:10px;line-height:1.5;padding:8px 12px}.hero-photo .tag-img{right:auto;left:10px;font-size:8px}.hero-bar ul{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;padding:8px 16px}.hero-bar li{font-size:9px;padding:4px 0;gap:4px;white-space:nowrap}.hero-bar li svg{width:14px;height:14px}.quick-menu{padding:20px 0}.quick-in{display:block}.quick-in>p{display:none}.quick-links{grid-template-columns:repeat(4,1fr);gap:12px 0}.quick-links a{font-size:10px}.quick-links a:nth-child(4n+1){border:0}.quick-links svg{width:28px;height:28px}.sec{padding:42px 0}.menu-editorial{padding:36px 0 12px}.menu-editorial .h2{font-size:27px}.menu-editorial .lead{font-size:12px}.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:280px 240px 225px;gap:9px;margin-top:22px}.mosaic .big{grid-row:1;grid-column:1/3}.mosaic .wide{grid-row:3;grid-column:1/3}.mosaic .lab{left:9px;bottom:9px;padding:10px;max-width:calc(100% - 18px);min-width:0}.mosaic .lab small{font-size:11px}.mosaic .lab b{font-size:14px}.mosaic .big .lab b{font-size:21px}.tile-price{font-size:9px;margin-top:5px;padding-top:6px}.tile-price strong{font-size:20px;margin-left:3px}.tile-arrow{font-size:15px;padding-left:8px}.menu-note{font-size:10px}.trouble{padding:20px 15px;display:block;position:relative}.trouble .aqua{position:absolute;top:10px;right:8px;width:55px;height:80px}.trouble h2{font-size:19px!important;max-width:240px;padding-right:20px}.trouble .lead{font-size:11px!important;padding-right:40px}.trouble-list{gap:8px}.trouble-list a{font-size:12px;padding:14px 5px}.trouble-list small{font-size:9px}.trouble .note{font-size:10px}#trouble{padding-bottom:32px}#pack{margin:0 12px;padding:25px 20px;border-radius:12px}.pack{display:flex;flex-direction:column;gap:26px}.pack h2{font-size:29px}.pack-plans b{font-size:11px}.pack-plans small{font-size:10px}.pack-plans span{font-size:11px}.pack-plans span i{font-size:18px}.pack-photos{width:100%}.pack-photos figure{aspect-ratio:1.3}.pack-photos .aqua{width:85px}.h2{font-size:25px}.lead{font-size:13px}.fixbar{padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px}.fixbar a{font-size:10px;padding:7px 3px;gap:3px;border-radius:7px}.fixbar svg{width:18px;height:18px}.p-hero-in{padding:8px 18px 28px;gap:24px}.p-hero h1{font-size:29px}.p-hero-photo{aspect-ratio:1.5}.p-hero-photo .aqua{width:95px}.pnav a{font-size:12px;padding:12px 10px}.ft{padding-bottom:90px}.cta-final .btns,.cta-prod .btns{min-width:0;width:100%}.btn{white-space:normal}.pack-plans a>span:last-child{max-width:95px}.p-price{margin:16px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ===== Claude Code 実画面確認後の修正（2026-09-29 1440px / 390px で確認） ===== */
/* 1) PC: アクアくんの足元が「写真はイメージです」に重なる → 表示をアクアくんの左へ */
@media(min-width:721px){.hero-in .hero-photo .tag-img{left:auto;right:230px;bottom:12px}}
/* 2) まとめてリフォーム: アクアくんが写真の「イメージ」表示に重なる → 表示を写真の左上へ。スマホは影を外す */
.pack-photos figure .tag-img{top:8px;bottom:auto}
@media(max-width:720px){.pack-photos .aqua{filter:none}}
/* 3) 写真タイルの価格「万円〜」が途中で改行される → 価格は1行に保つ */
.tile-price{white-space:nowrap}
@media(max-width:720px){.mosaic a:not(.big):not(.wide) .tile-price strong{font-size:17px}.mosaic a:not(.big):not(.wide) .lab b{font-size:14px}}

/* 4) 施工事例の一覧行がスマホで画面幅を超え、金額が切れる → 行の中で折り返す */
.wlist-txt{grid-template-columns:minmax(0,1fr)}
.wlist-txt a{min-width:0;align-items:center}
.wlist-txt a>span:first-child{min-width:0}
.works-all{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.wlist-txt a>span:first-child{white-space:normal;flex:1 1 auto}
.wlist-txt a>span:last-child{flex:none}

/* ===== トップのメインビジュアル（aqua-hero-materials 2026-09-29） =====
   画像は縦横比を保って全体を表示（固定高・cover による切り取りをしない）。
   キャラクター・背景・曲線は画像に含まれるので、別のキャラクターやぼかしは重ねない。
   PC：画像左側の余白に見出し・説明・ボタン。スマホ：画像上部の余白に見出し・説明、ボタンは画像の直下。 */
.hero3{background:#eef7fd;padding:0}
.hero3-stage{position:relative;max-width:1536px;margin:0 auto}
.hero3-img{display:block;width:100%;height:auto}
.hero3-copy{position:absolute;left:7.5%;top:13%;width:40%;z-index:1}
.hero3-copy .area{display:inline-flex;align-items:center;gap:6px;font-size:clamp(11px,.9vw,13px);font-weight:900;letter-spacing:.06em;color:var(--blue);margin:0 0 clamp(10px,1.4vw,22px)}
.hero3-copy h1{font-size:clamp(38px,4.4vw,66px);line-height:1.25;letter-spacing:-.03em;color:var(--navy)}
.hero3-copy .sub{font-size:clamp(14px,1.25vw,19px);line-height:1.8;font-weight:700;color:var(--ink-2);margin:clamp(12px,1.6vw,24px) 0 clamp(18px,2.2vw,32px)}
.hero3 .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero3 .hero-cta .btn{font-size:clamp(14px,1.1vw,16px);padding:clamp(13px,1.2vw,17px) clamp(18px,1.8vw,28px)}
.hero3-note{position:absolute;right:12px;bottom:10px;margin:0;background:rgba(11,42,74,.72);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;z-index:1}
.hero3-cta-sp{display:none!important}
/* タブレット：余白が狭く文字が収まらないため、コピーを画像の上に別枠で置く */
@media(min-width:721px) and (max-width:1080px){
  .hero3-stage{display:flex;flex-direction:column-reverse}
  .hero3-copy{position:static;width:auto;padding:36px 28px 28px}
  .hero3-copy h1{font-size:44px}
  .hero3-note{top:auto}
}
/* スマホ：画像上部の余白（高さの約33%）に見出し・説明 */
@media(max-width:720px){
  .hero3-copy{left:0;right:0;top:0;width:auto;padding:18px 20px 0}
  .hero3-copy .area{font-size:10.5px;margin-bottom:8px;letter-spacing:0}
  .hero3-copy h1{font-size:clamp(26px,7.6vw,34px);line-height:1.25}
  .hero3-copy .sub{font-size:clamp(12.5px,3.5vw,14px);line-height:1.7;margin:8px 0 0}
  .hero3-cta-pc{display:none!important}
  .hero3-cta-sp{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 18px;background:#eef7fd}
  .hero3-cta-sp .btn{padding:14px 8px;font-size:14px;white-space:nowrap}
  .hero3-note{font-size:9.5px;right:8px;bottom:8px}
}

/* ===== トップ見出しの書体（2026-09-29 社長指示：インパクトのある字体に） =====
   Dela Gothic One（Google Fonts・SIL OFL）を見出しの文字だけ読み込む。読み込み前は Noto Sans JP の極太で表示。 */
.hero3-copy h1{font-family:'Dela Gothic One','Noto Sans JP',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.3}
.hero3-copy h1 span{display:block}
.hero3-copy h1 .em{color:var(--blue);background:linear-gradient(transparent 72%,rgba(255,168,60,.38) 72%,rgba(255,168,60,.38) 94%,transparent 94%);display:inline;padding:0 .04em}
.hero3-copy .sub{font-weight:700;color:var(--navy)}
@media(max-width:720px){.hero3-copy h1{font-size:clamp(27px,7.9vw,34px)}}
.shop-map{position:relative;margin-top:14px;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--sky)}
.shop-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.answer-first{margin:12px 0 0;font-size:clamp(15px,1.3vw,17px);font-weight:700;line-height:1.8;color:var(--navy);border-left:4px solid var(--orange);padding-left:12px}