/* ポネレクリニック 共通シェル（正: TOPデザイン） — トークン/リセット/ヘッダー/レール/フッター/CTAバー/戻るボタン */ :root{ --ivory:#F8F4EE; --ivory-deep:#EFE8DD; --champagne:#D8C2A6; --rose:#D9A7A0; --rose-deep:#BC8077; --sage:#A9B7A2; --sage-deep:#8A9A82; --greige:#6F665E; --charcoal:#2F2B28; --gold:#A2854F; --serif-jp:"Noto Serif JP",serif; --serif-en:"Playfair Display","Cormorant",serif; --sans:"Noto Sans JP",sans-serif; --header-h:122px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:var(--sans);color:var(--charcoal);background:var(--ivory);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;} a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} .grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:.05;mix-blend-mode:multiply;} /* ===== HEADER (PONEREハウス共通: 透明フローティング) ===== */ header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(24px,5vw,72px);transition:background .4s ease,box-shadow .4s ease,padding .35s ease;} header.scrolled{background:rgba(248,244,238,.9);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);padding-top:15px;padding-bottom:15px;box-shadow:0 12px 40px -26px rgba(47,43,40,.5);} .brand{display:flex;align-items:center;gap:13px;line-height:1;} .brand .mono{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--champagne);display:flex;align-items:center;justify-content:center;font-family:var(--serif-en);font-size:15px;letter-spacing:.04em;color:var(--greige);font-weight:500;} .brand .bt{display:flex;flex-direction:column;} .brand .name{font-family:var(--serif-en);font-size:18px;letter-spacing:.2em;font-weight:500;color:var(--charcoal);} .brand .sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;color:var(--greige);margin-top:6px;padding-left:.2em;} nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,34px);} nav a{font-size:12.5px;letter-spacing:.1em;color:var(--charcoal);position:relative;padding:4px 0;transition:color .3s;} nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--rose);transition:width .35s ease;} nav a:not(.nav-cta):hover{color:var(--greige);} nav a:not(.nav-cta):hover::after{width:100%;} .nav-cta{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;color:#fff;background:var(--greige);padding:13px 26px;border-radius:999px;transition:background .3s,transform .3s,opacity .3s;} .nav-cta:hover{background:var(--charcoal);transform:translateY(-1px);} .nav-cta .ico{position:relative;width:13px;height:1px;background:currentColor;} .nav-cta .ico::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);} .nav-toggle{display:none;align-self:center;margin-right:16px;width:44px;height:44px;border:1px solid rgba(111,102,94,.35);border-radius:50%;background:#fff;position:relative;cursor:pointer;flex:none;} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:1.4px;background:var(--charcoal);transform:translate(-50%,-50%);transition:.35s ease;} .nav-toggle span::before{top:-6px;}.nav-toggle span::after{top:6px;} body.m-open .nav-toggle span{background:transparent;} body.m-open .nav-toggle span::before{top:0;transform:translate(-50%,-50%) rotate(45deg);} body.m-open .nav-toggle span::after{top:0;transform:translate(-50%,-50%) rotate(-45deg);} /* mobile drawer */ .m-nav{position:fixed;inset:0;z-index:95;display:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;background:linear-gradient(160deg,#FBF8F3,#EFE6D9);opacity:0;visibility:hidden;transform:translateY(-12px);transition:.45s ease;padding:100px 30px 40px;} body.m-open .m-nav{opacity:1;visibility:visible;transform:none;} .m-nav a{font-family:var(--serif-jp);font-size:20px;letter-spacing:.05em;padding:14px 0;color:var(--charcoal);} .m-nav .m-line{width:40px;height:1px;background:var(--champagne);margin:8px 0;} .m-nav a.m-cta{margin-top:14px;background:var(--charcoal);color:#fff;padding:14px 40px;border-radius:26px;font-family:var(--sans);font-size:15px;} /* ===== RIGHT VERTICAL CTA RAIL (desktop) ===== */ .rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:2px;} .rail a{writing-mode:vertical-rl;display:flex;align-items:center;gap:9px;padding:20px 11px;font-family:var(--serif-jp);font-size:13px;letter-spacing:.2em;color:#fff;transition:padding .3s ease;} .rail a .i{width:16px;height:16px;transform:rotate(90deg);} .rail .r-line{background:var(--sage-deep);} .rail .r-tel{background:var(--gold);} .rail .r-web{background:var(--charcoal);} .rail a:hover{padding-left:16px;} /* SECTION 12 ｜ フッター */ .site-footer{position:relative;overflow:hidden;background:var(--charcoal);color:rgba(248,244,238,.78);padding:clamp(60px,8vw,92px) clamp(24px,5vw,72px) 30px;} .site-footer::before{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E");} .foot-top{max-width:1080px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(30px,5vw,60px);padding-bottom:48px;border-bottom:1px solid rgba(248,244,238,.14);} .foot-brand .name{font-family:var(--serif-en);font-size:26px;letter-spacing:.22em;color:var(--ivory);font-weight:500;} .foot-brand .sub{font-size:9.5px;letter-spacing:.42em;color:rgba(248,244,238,.55);margin-top:6px;padding-left:.2em;} .foot-brand .foot-tag{font-family:var(--serif-jp);font-size:15px;letter-spacing:.06em;color:rgba(248,244,238,.85);margin-top:22px;line-height:1.7;} .foot-col h5{font-family:var(--serif-en);font-size:11px;letter-spacing:.22em;color:var(--champagne);margin-bottom:18px;} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;} .foot-col ul a{font-size:13px;letter-spacing:.04em;color:rgba(248,244,238,.78);text-decoration:none;transition:color .3s;} .foot-col ul a:hover{color:var(--ivory);} .foot-info{font-size:13px;line-height:1.95;color:rgba(248,244,238,.78);} .foot-info .zip{font-size:11px;color:rgba(248,244,238,.5);} .foot-info b{color:var(--ivory);font-weight:500;} .foot-info .row{margin-top:12px;} .foot-info .req{display:inline-block;font-size:10px;letter-spacing:.05em;background:var(--rose);color:#fff;border-radius:4px;padding:1px 6px;vertical-align:1px;} .foot-curon a{display:inline-block;line-height:0;border-radius:4px;overflow:hidden;transition:opacity .25s;} .foot-curon a:hover{opacity:.82;} .foot-curon img{width:100%;max-width:280px;height:auto;display:block;} .curon-bn{margin-top:26px;} .curon-bn a{display:inline-block;line-height:0;border-radius:4px;overflow:hidden;transition:opacity .25s;} .curon-bn a:hover{opacity:.82;} .curon-bn img{max-width:300px;width:100%;height:auto;display:block;} .foot-note{max-width:1080px;margin:30px auto 0;position:relative;z-index:2;font-size:11px;line-height:1.95;color:rgba(248,244,238,.55);} .foot-note strong{color:rgba(248,244,238,.8);font-weight:500;} .foot-bottom{max-width:1080px;margin:26px auto 0;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(248,244,238,.14);font-size:11px;letter-spacing:.06em;color:rgba(248,244,238,.55);} .foot-bottom .copy{font-family:var(--serif-en);letter-spacing:.12em;} @media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1 / -1;}} .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;} .reveal.in{opacity:1;transform:none;} /* ===== FIXED BOTTOM CTA BAR (mobile) ===== */ .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;grid-template-columns:1fr 1.25fr;background:#fff;border-top:1px solid rgba(216,194,166,.7);box-shadow:0 -14px 34px -20px rgba(47,43,40,.55);padding:0;gap:0;} .cta-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 4px 12px;font-size:11px;font-weight:500;letter-spacing:.06em;color:#fff;transition:filter .3s ease;} .cta-bar a:active{filter:brightness(1.1);} .cta-bar a .i{width:20px;height:20px;} .cta-bar .cb-tel{background:var(--gold);} .cta-bar .cb-web{background:var(--charcoal);} .cta-bar .cb-line{background:var(--sage-deep);} /* ページトップへ戻る（参考: フローティング↑） */ .to-top{position:fixed;right:22px;bottom:28px;z-index:85;width:46px;height:46px;border-radius:50%;background:rgba(47,43,40,.82);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:.35s ease;} .to-top svg{width:17px;height:17px;} .to-top:hover{background:var(--charcoal);} .to-top.show{opacity:1;visibility:visible;transform:none;} /* ===== RESPONSIVE (shell) ===== */ @media(max-width:1120px){ nav{gap:clamp(12px,1.6vw,22px);} } @media(max-width:880px){ nav a:not(.nav-cta){display:none;} .rail{display:none;} header{padding:15px 18px;} header.scrolled{padding-top:12px;padding-bottom:12px;} .brand{gap:9px;} .brand .mono{width:34px;height:34px;font-size:13px;} .brand .name{font-size:11.5px;letter-spacing:.08em;white-space:nowrap;} .brand .sub{font-size:8px;letter-spacing:.2em;margin-top:4px;} nav{gap:10px;} .nav-cta{padding:9px 14px;font-size:10.5px;letter-spacing:.05em;gap:6px;white-space:nowrap;} .nav-toggle{display:block;margin-right:0;} body.m-open .nav-cta{opacity:0;pointer-events:none;} .m-nav{display:flex;} .cta-bar{display:grid;} .to-top{right:14px;bottom:84px;width:44px;height:44px;} body{padding-bottom:74px;} } @media(max-width:600px){ .brand .bt small{display:none;} } @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* ===== MEGA MENU（PC） ===== */ .nav-item{display:flex;align-items:center;} .nav-item > a .cv{display:inline-block;width:6px;height:6px;margin-left:8px;margin-bottom:2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.5;transition:transform .3s;} .nav-item:hover > a .cv{transform:rotate(225deg);} .mega{position:absolute;left:0;right:0;top:100%;z-index:99; background:rgba(251,248,243,.98);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1); border-top:1px solid rgba(216,194,166,.4);box-shadow:0 30px 60px -30px rgba(47,43,40,.35); opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;} .nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:none;} .mega a::after,.mb-top::after{display:none;} .mega-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,4vw,56px);padding:38px clamp(24px,4vw,56px) 44px;} .mega-brand{border-right:1px solid rgba(111,102,94,.14);padding-right:clamp(18px,2.5vw,36px);} .mb-en{font-family:var(--serif-en);font-size:12px;letter-spacing:.28em;color:var(--gold);} .mb-jp{font-family:var(--serif-jp);font-size:21px;letter-spacing:.08em;color:var(--charcoal);margin-top:10px;font-weight:500;} .mb-tag{font-size:12px;line-height:1.9;color:var(--greige);margin-top:14px;} .mb-top{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:12.5px !important;letter-spacing:.08em;color:var(--charcoal);border-bottom:1px solid rgba(216,194,166,.7);padding-bottom:4px;transition:color .3s;} .mb-top:hover{color:var(--rose-deep);} .mb-top .ar{position:relative;width:14px;height:1px;background:currentColor;} .mb-top .ar::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);display:block;} .mega-cols{column-gap:clamp(20px,2.6vw,40px);} .mg{break-inside:avoid;margin-bottom:20px;} .mg-cat{font-family:var(--serif-jp);font-size:13.5px;letter-spacing:.06em;color:var(--charcoal);padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid rgba(217,167,160,.45);} .mg ul{list-style:none;} .mg li{margin-top:6px;} .mg li a{display:inline-block;font-size:12.5px;letter-spacing:.03em;line-height:1.6;color:var(--greige);transition:color .25s;position:relative;padding:0 0 0 12px;} .mg li a::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--champagne);transition:background .25s,width .25s;} .mg li a:hover{color:var(--rose-deep);} .mg li a:hover::before{background:var(--rose);width:7px;} /* ===== モバイルドロワー内アコーディオン ===== */ .m-nav{justify-content:flex-start;overflow-y:auto;padding-top:92px;} .m-acc{width:100%;max-width:430px;} .m-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--serif-jp);font-size:20px;letter-spacing:.05em;padding:14px 0;color:var(--charcoal);} .m-acc summary::-webkit-details-marker{display:none;} .ac-ic{position:relative;width:14px;height:14px;flex:none;} .ac-ic::before,.ac-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.2px;background:var(--greige);transform:translate(-50%,-50%);} .ac-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s;} .m-acc[open] .ac-ic::after{transform:translate(-50%,-50%) rotate(0deg);} .m-acc-body{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;max-height:46vh;overflow-y:auto;padding:6px 18px 16px;border:1px solid rgba(216,194,166,.45);border-radius:12px;background:rgba(255,255,255,.5);} .m-nav .m-acc-body .m-cat{font-size:10.5px;letter-spacing:.16em;color:var(--gold);margin:14px 0 0;font-family:var(--sans);} .m-nav .m-acc-body a{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:#4a443e;padding:7px 0;} .m-nav .m-acc-body a.m-top{font-size:13px;color:var(--charcoal);border-bottom:1px solid rgba(216,194,166,.7);margin-top:10px;padding:2px 0 3px;} @media(max-width:880px){ .nav-item{display:none;} } /* ===== テーマreset.css対策（自動追記・テーマ版のみ） ===== reset.css の font-size:1rem がタグ一括で当たるため、:where（詳細度0）＋ .pnr-page スコープで継承を復元する。これが無いと文字サイズが微妙に崩れる */ /* 詳細度は(0,0,1)に抑える: reset.css(先読み)には勝ち、ページ側の素のタグ指定 （本文