:root{ /* ===== Color tokens (60-30-10) ===== */ --as-c-base:#0B0C10; /* Absolute Dark */ --as-c-main:#F8FAFC; /* Scientific White */ --as-c-line:#06C755; /* LINE Green */ --as-c-cyan:#0EA5E9; /* Data Cyan */ --as-c-slate:#334155; /* Slate Gray (light bg captions) */ --as-c-slate-2:#CBD5E1; /* Brighter slate for dark bg readability (was #94A3B8 → 12:1 ratio) */ /* ===== Typography ===== */ --as-h1:clamp(28px,5vw,56px); --as-h2:clamp(22px,4vw,36px); --as-h3:clamp(18px,3vw,26px); --as-numeric:clamp(48px,8vw,96px); --as-numeric-sm:clamp(20px,3.2vw,32px); --as-body:clamp(14px,1.5vw,16px); --as-caption:clamp(11px,1vw,12px); --as-lh-h:1.3; --as-lh-b:1.7; --as-ls-h:.05em; --as-ls-b:.02em; --as-ls-n:.1em; /* ===== Spacing 8px grid ===== */ --as-g-xs:8px; --as-g-sm:16px; --as-g-md:24px; --as-g-lg:32px; --as-g-xl:48px; --as-g-2xl:64px; --as-g-3xl:80px; --as-g-section:120px; --as-radius:8px; --as-radius-lg:16px; } /* ===== Reset (scope: .as-* only) ===== */ .as-hero,.as-numeric-anchors,.as-problem,.as-usp,.as-evidence,.as-visual-break,.as-nanozone,.as-authority,.as-visual-proof,.as-price,.as-philosophy,.as-faq,.as-final-cta{box-sizing:border-box;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:var(--as-lh-b);letter-spacing:var(--as-ls-b);color:var(--as-c-base);} .as-section-inner{max-width:1080px;margin:0 auto;padding:var(--as-g-section) var(--as-g-md);} @media(max-width:768px){.as-section-inner{padding:var(--as-g-3xl) var(--as-g-md);}} .as-h2{font-size:var(--as-h2);font-weight:700;line-height:var(--as-lh-h);letter-spacing:var(--as-ls-h);margin:0 0 var(--as-g-lg);color:var(--as-c-base);} .as-h2--light{color:var(--as-c-main);} .as-h3{font-size:var(--as-h3);font-weight:700;line-height:var(--as-lh-h);letter-spacing:var(--as-ls-h);margin:var(--as-g-xl) 0 var(--as-g-md);} .as-cyan{color:var(--as-c-cyan);font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;letter-spacing:var(--as-ls-n);} .as-mincho{font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;font-weight:600;} /* ===== Translation box (猿翻訳) ===== */ .as-translation-box{display:block;background:var(--as-c-main);border-left:4px solid var(--as-c-cyan);padding:var(--as-g-md) var(--as-g-lg);margin:var(--as-g-md) 0 var(--as-g-lg);border-radius:0 var(--as-radius) var(--as-radius) 0;box-shadow:0 2px 8px rgba(11,12,16,.06);} .as-translation-box--dark{background:rgba(248,250,252,.08);border-left-color:var(--as-c-cyan);color:var(--as-c-main);} .as-translation-box__icon{font-size:1.2em;margin-right:var(--as-g-xs);} .as-translation-box__title{font-weight:700;color:var(--as-c-cyan);letter-spacing:var(--as-ls-h);} .as-translation-box__body{margin:var(--as-g-xs) 0 0;font-size:var(--as-body);line-height:var(--as-lh-b);} /* ============ SECTION 1: HERO ============ */ .as-hero{position:relative;min-height:clamp(560px,90vh,840px);display:flex;align-items:center;color:var(--as-c-main);overflow:hidden;background:var(--as-c-base);} .as-hero__media{position:absolute;inset:0;z-index:0;} .as-hero__media img{width:100%;height:100%;object-fit:cover;display:block;} .as-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,12,16,.55) 0%,rgba(11,12,16,.62) 50%,rgba(11,12,16,.78) 100%);} .as-hero__de-ui{position:absolute;right:var(--as-g-lg);bottom:30%;z-index:2;display:inline-flex;align-items:baseline;gap:var(--as-g-xs);padding:var(--as-g-xs) var(--as-g-md);border:1px solid var(--as-c-cyan);background:rgba(11,12,16,.72);color:var(--as-c-cyan);font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;letter-spacing:var(--as-ls-n);animation:as-de-pulse 1.6s ease-in-out infinite;} .as-hero__de-label{font-size:var(--as-caption);opacity:.75;} .as-hero__de-value{font-size:1.4em;font-weight:700;} @keyframes as-de-pulse{0%,100%{opacity:.65;text-shadow:0 0 0 transparent;}50%{opacity:1;text-shadow:0 0 12px rgba(14,165,233,.55);}} @media(max-width:768px){.as-hero__de-ui{right:var(--as-g-md);bottom:34%;font-size:.9em;}} .as-hero__content{position:relative;z-index:3;max-width:1080px;margin:0 auto;padding:var(--as-g-2xl) var(--as-g-md);width:100%;} .as-hero__h1{font-size:var(--as-h1);font-weight:800;line-height:var(--as-lh-h);letter-spacing:var(--as-ls-h);margin:0 0 var(--as-g-md);color:var(--as-c-main);text-shadow:0 4px 24px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.7);} .as-hero__sub{font-size:calc(var(--as-body) * 1.05);font-weight:500;line-height:var(--as-lh-b);max-width:640px;margin:0 0 var(--as-g-xl);color:var(--as-c-main);text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6);} .as-hero__cta{display:flex;flex-wrap:wrap;gap:var(--as-g-md);} @media(max-width:768px){.as-hero__cta{flex-direction:column;}} .as-cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 var(--as-g-lg);border-radius:var(--as-radius);font-weight:700;font-size:var(--as-body);letter-spacing:var(--as-ls-h);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;} .as-cta--line{background:var(--as-c-line);color:var(--as-c-main);box-shadow:0 4px 16px rgba(6,199,85,.32);} .as-cta--line:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,199,85,.45);} .as-cta--tel{background:transparent;color:var(--as-c-main);border:1px solid rgba(248,250,252,.5);} .as-cta--tel:hover{background:rgba(248,250,252,.1);} .as-hero__scroll{position:absolute;left:50%;bottom:var(--as-g-lg);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);} .as-hero__scroll-line{width:1px;height:48px;background:var(--as-c-cyan);animation:as-scroll-line 2.4s ease-in-out infinite;transform-origin:top;} @keyframes as-scroll-line{0%{transform:scaleY(0);opacity:.2;}50%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(0) translateY(48px);opacity:.2;}} .as-hero__scroll-text{font-size:var(--as-caption);letter-spacing:.2em;color:var(--as-c-main);opacity:.7;} /* ============ SECTION 1.5: NUMERIC ANCHORS ============ */ .as-numeric-anchors{background:var(--as-c-base);color:var(--as-c-main);padding:var(--as-g-3xl) var(--as-g-md);text-align:center;} .as-numeric-anchors__caption{font-size:var(--as-caption);letter-spacing:.2em;color:var(--as-c-slate-2);margin:0 0 var(--as-g-2xl);text-transform:uppercase;} .as-numeric-anchors__grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--as-g-lg);} @media(max-width:768px){.as-numeric-anchors__grid{grid-template-columns:repeat(2,1fr);gap:var(--as-g-md);}} .as-numeric-card{display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);padding:var(--as-g-lg) var(--as-g-md);border:1px solid rgba(248,250,252,.12);border-radius:var(--as-radius);transition:border-color .3s ease;animation:as-counter-up 1.2s ease-out both;animation-timeline:view();animation-range:entry 10% cover 30%;} .as-numeric-card:hover{border-color:var(--as-c-cyan);} @keyframes as-counter-up{0%{opacity:0;transform:translateY(24px);}100%{opacity:1;transform:translateY(0);}} .as-numeric-card__value{font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-size:var(--as-numeric);font-weight:700;line-height:1;color:var(--as-c-cyan);letter-spacing:var(--as-ls-n);} .as-numeric-card__value--small{font-size:var(--as-numeric-sm);font-weight:700;} .as-numeric-card__unit{font-size:var(--as-caption);letter-spacing:.15em;color:var(--as-c-slate-2);margin-top:var(--as-g-xs);} .as-numeric-card__label{font-size:var(--as-caption);color:var(--as-c-slate-2);margin-top:var(--as-g-xs);} /* ============ Dark sections body weight 500 + brighter inheritance ============ */ .as-numeric-anchors,.as-usp,.as-nanozone,.as-visual-proof,.as-philosophy,.as-final-cta{font-weight:500;} .as-numeric-anchors p,.as-usp p,.as-nanozone p,.as-visual-proof p,.as-philosophy p,.as-final-cta p{font-weight:500;} /* ============ SECTION 2: PROBLEM ============ */ .as-problem{background:var(--as-c-main);color:var(--as-c-base);} .as-problem__lead{font-size:calc(var(--as-body) * 1.1);font-weight:600;margin:0 0 var(--as-g-md);} .as-problem__body p{margin:0 0 var(--as-g-md);} /* ============ SECTION 3: USP ============ */ .as-usp{background:var(--as-c-base);color:var(--as-c-main);text-align:center;} .as-usp__statement{font-size:var(--as-h1);font-weight:800;line-height:var(--as-lh-h);letter-spacing:var(--as-ls-h);margin:var(--as-g-lg) 0 var(--as-g-2xl);} .as-usp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--as-g-md);max-width:880px;margin:0 auto var(--as-g-xl);} @media(max-width:768px){.as-usp__facts{grid-template-columns:repeat(2,1fr);}} .as-fact-icon{display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);padding:var(--as-g-md);border:1px solid rgba(248,250,252,.18);border-radius:var(--as-radius);} .as-fact-icon__title{font-weight:700;color:var(--as-c-cyan);font-size:calc(var(--as-body) * 1.1);} .as-fact-icon__desc{font-size:var(--as-caption);color:var(--as-c-slate-2);} .as-usp__sub{max-width:640px;margin:0 auto;font-size:var(--as-body);} /* ============ SECTION 4-6: EVIDENCE ============ */ .as-evidence--de,.as-evidence--starex{background:var(--as-c-main);color:var(--as-c-base);} .as-evidence--base{background:var(--as-c-main);color:var(--as-c-base);} .as-evidence__body p{margin:0 0 var(--as-g-md);} .as-evidence__lead{font-size:calc(var(--as-body) * 1.15);font-weight:600;margin:var(--as-g-lg) 0 var(--as-g-xl);} .as-evidence__caption{font-size:var(--as-body);font-weight:600;color:var(--as-c-slate);margin:var(--as-g-lg) 0 0;} .as-evidence__note{font-size:var(--as-caption);color:var(--as-c-slate);margin:var(--as-g-md) 0 0;} .as-evidence__chart{margin:var(--as-g-xl) 0 0;} .as-de-row{display:grid;grid-template-columns:80px 1fr auto;gap:var(--as-g-md);align-items:center;margin:0 0 var(--as-g-md);font-size:var(--as-body);} @media(max-width:768px){.as-de-row{grid-template-columns:1fr;gap:var(--as-g-xs);}} .as-de-row__label{font-weight:700;} .as-de-row__bar{display:block;height:24px;border-radius:4px;background:var(--as-c-slate-2);animation:as-bar-grow 1.6s cubic-bezier(.4,0,.2,1) both;animation-timeline:view();animation-range:entry 20% cover 40%;} .as-de-row__bar--before{--as-bar-target:80%;} .as-de-row__bar--after{--as-bar-target:12%;background:var(--as-c-cyan);} @keyframes as-bar-grow{0%{width:0;}100%{width:var(--as-bar-target);}} .as-de-row__value{font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-weight:600;color:var(--as-c-cyan);letter-spacing:var(--as-ls-n);} /* Section 5 process compare */ .as-process-compare{display:flex;flex-direction:column;gap:var(--as-g-xl);margin:var(--as-g-xl) 0;} .as-process-row__label{display:block;font-weight:700;margin:0 0 var(--as-g-sm);font-size:calc(var(--as-body) * 1.05);} .as-process-row--as .as-process-row__label{color:var(--as-c-cyan);} .as-process-bar-group{display:flex;gap:2px;border-radius:4px;overflow:hidden;background:rgba(11,12,16,.06);height:32px;} .as-process-bar{display:flex;align-items:center;padding:0 var(--as-g-sm);font-size:var(--as-caption);font-weight:600;color:var(--as-c-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:as-bar-grow 1.6s cubic-bezier(.4,0,.2,1) both;animation-timeline:view();animation-range:entry 20% cover 40%;} .as-process-bar--wash-other{--as-bar-target:10%;background:var(--as-c-slate-2);} .as-process-bar--polish-other{--as-bar-target:0%;background:var(--as-c-slate-2);display:none;} .as-process-bar--apply-other{--as-bar-target:90%;background:var(--as-c-slate);} .as-process-bar--wash-as{--as-bar-target:20%;background:var(--as-c-slate-2);} .as-process-bar--polish-as{--as-bar-target:60%;background:var(--as-c-cyan);} .as-process-bar--apply-as{--as-bar-target:20%;background:var(--as-c-slate);} /* Section 6 Starex layers */ .as-starex-layers{display:flex;flex-direction:column-reverse;gap:6px;margin:var(--as-g-xl) 0;border-radius:var(--as-radius);overflow:hidden;} .as-starex-layer{display:grid;grid-template-columns:80px 1fr;align-items:center;padding:var(--as-g-md) var(--as-g-lg);background:linear-gradient(90deg,rgba(11,12,16,.04),rgba(14,165,233,.06));font-size:var(--as-body);} .as-starex-layer__num{font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-weight:700;color:var(--as-c-cyan);letter-spacing:var(--as-ls-n);} .as-starex-layer__name{font-weight:600;} .as-starex-layer--1{background:linear-gradient(90deg,rgba(11,12,16,.08),rgba(11,12,16,.04));border-bottom:2px solid var(--as-c-cyan);} /* ============ VISUAL BREAK ============ */ .as-visual-break{position:relative;width:100%;height:480px;overflow:hidden;background:var(--as-c-base);} @media(max-width:768px){.as-visual-break{height:360px;}} .as-visual-break__media{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.85;} .as-visual-break--a .as-visual-break__media{background-image:linear-gradient(180deg,rgba(11,12,16,.5) 0%,rgba(11,12,16,0) 25%,rgba(11,12,16,0) 75%,rgba(11,12,16,.5) 100%),url("https://autostyle-japan.net/new/wp-content/uploads/2026/05/visual-break-a-lab.jpg");} .as-visual-break--b .as-visual-break__media{background-image:linear-gradient(180deg,rgba(11,12,16,.5) 0%,rgba(11,12,16,0) 25%,rgba(11,12,16,0) 75%,rgba(11,12,16,.5) 100%),url("https://autostyle-japan.net/new/wp-content/uploads/2026/05/visual-break-b-mirror.jpg");} .as-visual-break__caption{position:absolute;left:0;right:0;bottom:var(--as-g-xl);text-align:center;font-size:var(--as-body);font-weight:500;letter-spacing:.2em;color:var(--as-c-main);text-shadow:0 2px 16px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.7);margin:0;} /* ============ SECTION 7: NANOZONE ============ */ .as-nanozone{background:var(--as-c-base);color:var(--as-c-main);} .as-nanozone__lead{font-size:calc(var(--as-body) * 1.1);font-weight:600;color:var(--as-c-cyan);margin:var(--as-g-lg) 0 var(--as-g-xl);} .as-nanozone__trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--as-g-md);margin:0 0 var(--as-g-2xl);} @media(max-width:768px){.as-nanozone__trust{grid-template-columns:1fr;}} .as-trust-icon{display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);padding:var(--as-g-lg);border:1px solid rgba(248,250,252,.18);border-radius:var(--as-radius);text-align:center;} .as-trust-icon__symbol{font-size:32px;margin-bottom:var(--as-g-xs);} .as-trust-icon__title{font-weight:700;color:var(--as-c-cyan);font-size:var(--as-body);} .as-trust-icon__desc{font-size:var(--as-caption);color:var(--as-c-slate-2);} .as-nanozone__effects{list-style:none;padding:0;margin:0 0 var(--as-g-xl);display:flex;flex-direction:column;gap:var(--as-g-md);} .as-nanozone__effects li{display:grid;grid-template-columns:48px auto 1fr;gap:var(--as-g-md);align-items:start;padding:var(--as-g-md) var(--as-g-lg);background:rgba(248,250,252,.04);border-radius:var(--as-radius);border-left:3px solid var(--as-c-cyan);font-size:var(--as-body);} .as-effect-num{font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-size:1.4em;font-weight:700;color:var(--as-c-cyan);} .as-nanozone__b2b{display:block;padding:var(--as-g-lg) var(--as-g-xl);background:var(--as-c-main);color:var(--as-c-base);border-radius:var(--as-radius);margin:var(--as-g-xl) 0 0;} .as-nanozone__b2b-label{display:inline-block;background:var(--as-c-cyan);color:var(--as-c-main);padding:4px var(--as-g-sm);border-radius:4px;font-size:var(--as-caption);font-weight:700;letter-spacing:var(--as-ls-h);margin:0 0 var(--as-g-sm);} .as-nanozone__b2b p{margin:0;font-size:var(--as-body);} /* ============ SECTION 8: AUTHORITY ============ */ .as-authority{background:var(--as-c-main);color:var(--as-c-base);} .as-authority__certs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--as-g-md);margin:var(--as-g-xl) 0 0;} @media(max-width:768px){.as-authority__certs{grid-template-columns:repeat(2,1fr);}} .as-cert{margin:0;display:flex;flex-direction:column;gap:var(--as-g-sm);} .as-cert__placeholder{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--as-c-base);color:var(--as-c-cyan);font-weight:700;letter-spacing:var(--as-ls-h);border:1px solid var(--as-c-slate);border-radius:var(--as-radius);text-align:center;padding:var(--as-g-md);} .as-cert--patent .as-cert__placeholder{background:linear-gradient(135deg,var(--as-c-base),var(--as-c-slate));} .as-cert figcaption{font-size:var(--as-caption);color:var(--as-c-slate);text-align:center;} /* ============ SECTION 9: VISUAL PROOF ============ */ .as-visual-proof{background:var(--as-c-base);color:var(--as-c-main);} .as-visual-proof__lead{font-size:calc(var(--as-body) * 1.1);margin:0 0 var(--as-g-xl);} .as-ba-slider{position:relative;display:grid;grid-template-columns:1fr 4px 1fr;gap:0;margin:var(--as-g-xl) 0;border-radius:var(--as-radius);overflow:hidden;background:linear-gradient(135deg,rgba(248,250,252,.04),rgba(14,165,233,.08));border:1px solid rgba(248,250,252,.12);} .as-ba-slider__before,.as-ba-slider__after{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--as-g-2xl) var(--as-g-md);min-height:240px;} .as-ba-slider__divider{background:var(--as-c-cyan);} .as-ba-slider__label{font-size:var(--as-caption);letter-spacing:.2em;color:var(--as-c-slate-2);margin:0 0 var(--as-g-sm);} .as-ba-slider__value{font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-size:var(--as-numeric);font-weight:700;color:var(--as-c-cyan);letter-spacing:var(--as-ls-n);line-height:1;} .as-ba-slider__before .as-ba-slider__value{color:var(--as-c-slate-2);} /* ============ SECTION 10: PRICE ============ */ .as-price{background:var(--as-c-main);color:var(--as-c-base);} .as-price__tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--as-g-md);margin:var(--as-g-xl) 0;} @media(max-width:768px){.as-price__tiers{grid-template-columns:1fr;}} .as-price-tier{position:relative;padding:var(--as-g-xl) var(--as-g-lg);border:1px solid rgba(11,12,16,.12);border-radius:var(--as-radius);background:var(--as-c-main);} .as-price-tier--featured{border-color:var(--as-c-cyan);border-width:2px;background:linear-gradient(180deg,rgba(14,165,233,.04),transparent);} .as-price-tier__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--as-c-cyan);color:var(--as-c-main);padding:4px var(--as-g-sm);border-radius:4px;font-size:var(--as-caption);font-weight:700;letter-spacing:var(--as-ls-h);} .as-price-tier__label{display:block;font-weight:800;letter-spacing:var(--as-ls-h);font-size:calc(var(--as-body) * 1.1);color:var(--as-c-cyan);} .as-price-tier__range{display:block;font-size:var(--as-caption);color:var(--as-c-slate);margin:var(--as-g-xs) 0 var(--as-g-md);} .as-price-tier__amount{margin:var(--as-g-md) 0 0;font-family:"DIN Alternate","Roboto Mono",ui-monospace,monospace;font-size:calc(var(--as-h3) * 1.1);font-weight:700;color:var(--as-c-base);} .as-price__note{font-size:var(--as-caption);color:var(--as-c-slate);margin:var(--as-g-md) 0 0;} .as-price__note a{color:var(--as-c-cyan);text-decoration:underline;} .as-price-letter{display:block;margin:var(--as-g-2xl) 0 0;padding:var(--as-g-2xl) var(--as-g-xl);background:linear-gradient(180deg,rgba(11,12,16,.04),rgba(11,12,16,.08));border-radius:var(--as-radius-lg);border-left:4px solid var(--as-c-cyan);} .as-price-letter h3{margin-top:0;} .as-price-letter p{margin:0 0 var(--as-g-md);font-size:var(--as-body);line-height:var(--as-lh-b);} .as-price-letter__sign{margin:var(--as-g-xl) 0 0;font-size:var(--as-body);font-weight:600;text-align:right;font-style:italic;color:var(--as-c-slate);} /* ============ SECTION 11: PHILOSOPHY ============ */ .as-philosophy{background:var(--as-c-base);color:var(--as-c-main);} .as-philosophy p{margin:0 0 var(--as-g-md);} .as-philosophy__sign{margin:var(--as-g-xl) 0 var(--as-g-2xl);font-size:var(--as-caption);letter-spacing:.2em;text-align:center;color:var(--as-c-slate-2);} .as-persona-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--as-g-md);margin:var(--as-g-xl) 0 0;} @media(max-width:768px){.as-persona-cards{grid-template-columns:1fr;}} .as-persona-card{display:flex;flex-direction:column;gap:var(--as-g-sm);padding:var(--as-g-xl) var(--as-g-lg);background:rgba(248,250,252,.04);border:1px solid rgba(248,250,252,.18);border-radius:var(--as-radius);text-decoration:none;color:var(--as-c-main);transition:transform .25s ease,border-color .25s ease,background .25s ease;} .as-persona-card:hover{transform:translateY(-4px);border-color:var(--as-c-cyan);background:rgba(14,165,233,.08);} .as-persona-card__icon{font-size:32px;} .as-persona-card__title{font-weight:700;font-size:calc(var(--as-body) * 1.1);color:var(--as-c-cyan);} .as-persona-card__desc{font-size:var(--as-body);line-height:var(--as-lh-b);color:var(--as-c-main);opacity:.85;} .as-persona-card__cta{margin-top:auto;font-weight:700;color:var(--as-c-line);font-size:var(--as-body);} /* ============ SECTION 12: FAQ ============ */ .as-faq{background:var(--as-c-main);color:var(--as-c-base);} .as-faq-item{display:block;margin:0 0 var(--as-g-sm);padding:var(--as-g-md) var(--as-g-lg);background:#fff;border:1px solid rgba(11,12,16,.12);border-radius:var(--as-radius);transition:border-color .2s ease;} .as-faq-item[open]{border-color:var(--as-c-cyan);} .as-faq-item summary{cursor:pointer;font-weight:600;font-size:var(--as-body);line-height:var(--as-lh-h);padding:var(--as-g-xs) 0;list-style:none;display:flex;gap:var(--as-g-sm);align-items:start;} .as-faq-item summary::-webkit-details-marker{display:none;} .as-faq-item summary::after{content:"＋";margin-left:auto;color:var(--as-c-cyan);font-weight:700;} .as-faq-item[open] summary::after{content:"−";} .as-faq-item summary strong{color:var(--as-c-cyan);} .as-faq-item p{margin:var(--as-g-md) 0 0;font-size:var(--as-body);line-height:var(--as-lh-b);color:var(--as-c-slate);} /* ============ SECTION 13: FINAL CTA ============ */ .as-final-cta{background:var(--as-c-base);color:var(--as-c-main);text-align:center;} .as-final-cta__lead{font-size:var(--as-body);max-width:640px;margin:var(--as-g-md) auto var(--as-g-xl);line-height:var(--as-lh-b);} .as-final-cta__buttons{display:flex;flex-direction:column;gap:var(--as-g-md);max-width:560px;margin:0 auto var(--as-g-xl);} .as-cta-large{display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);padding:var(--as-g-lg) var(--as-g-xl);min-height:80px;border-radius:var(--as-radius);text-decoration:none;font-weight:700;transition:transform .2s ease,box-shadow .2s ease;} .as-cta-large--line{background:var(--as-c-line);color:var(--as-c-main);box-shadow:0 8px 24px rgba(6,199,85,.32);} .as-cta-large--line:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(6,199,85,.45);} .as-cta-large--tel{background:transparent;color:var(--as-c-main);border:1px solid rgba(248,250,252,.5);} .as-cta-large--tel:hover{background:rgba(248,250,252,.1);} .as-cta-large__main{font-size:calc(var(--as-body) * 1.1);font-weight:700;letter-spacing:var(--as-ls-h);} .as-cta-large__sub{font-size:var(--as-caption);font-weight:400;opacity:.85;} .as-final-cta__address{display:block;font-size:var(--as-body);font-style:normal;margin:var(--as-g-xl) 0 var(--as-g-lg);color:var(--as-c-slate-2);} .as-final-cta__map{max-width:880px;margin:0 auto;border-radius:var(--as-radius);overflow:hidden;border:1px solid rgba(248,250,252,.18);} /* ============ STICKY MOBILE CTA ============ */ .as-sticky-cta-mobile{display:none;} @media(max-width:768px){ .as-sticky-cta-mobile{position:fixed;bottom:16px;right:16px;z-index:1000;background:var(--as-c-line);color:var(--as-c-main);padding:14px 24px;border-radius:32px;box-shadow:0 8px 24px rgba(11,12,16,.32);backdrop-filter:blur(20px);font-size:14px;font-weight:700;letter-spacing:var(--as-ls-h);text-decoration:none;line-height:1.3;} } /* ============ v5.0 CRYSTAL TARGETED OVERRIDES ============ */ /* 結晶透明アクリル: HERO + 黒背景 6 セクション (1.5/3/7/9/11/13) のみに限定適用 */ /* 白背景セクション (2 Problem / 4 ΔE / 5 下地 / 6 Starex / 8 Authority / 10 Price / 12 FAQ) は v4.1 のまま不変 */ /* HERO: 写真は全体くっきり (overlay 最小限) / 文字裏のみに固体ダークパネル + 結晶エッジで読みやすく */ .as-hero__overlay{background:linear-gradient(180deg,rgba(11,12,16,.18) 0%,rgba(11,12,16,.10) 50%,rgba(11,12,16,.45) 100%);} .as-hero__content{position:relative;z-index:3;display:inline-block;width:100%;} /* v5.6: HERO sub 強制可視化 (Astra rgb(66,66,69) 上書き撃退) */ .as-hero .as-hero__content .as-hero__sub, .as-hero .as-hero__sub, .as-hero__sub{ color:#FFFFFF!important; font-weight:700!important; -webkit-text-stroke:.5px rgba(0,0,0,.6); text-shadow: 0 0 4px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.8)!important; letter-spacing:.02em!important; line-height:1.7!important; } /* 黒背景 6 セクションに結晶透明層感を適用 */ .as-numeric-anchors,.as-usp,.as-nanozone,.as-visual-proof,.as-philosophy,.as-final-cta{position:relative;} /* セクション上端: 結晶エッジハイライト (光が当たるガラスエッジ感) */ .as-numeric-anchors{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5);} .as-usp{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.5);} .as-nanozone{box-shadow:inset 0 1px 0 rgba(14,165,233,.22),inset 0 -1px 0 rgba(0,0,0,.5);} .as-visual-proof{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.5);} .as-philosophy{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5);} .as-final-cta{box-shadow:inset 0 1px 0 rgba(14,165,233,.28),inset 0 -1px 0 rgba(0,0,0,.5);} /* 黒背景セクション内のカード/パネル: 結晶エッジ + 可視性 UP (opacity .22 / blur なし) */ .as-numeric-card,.as-fact-icon,.as-trust-icon,.as-nanozone__effects li,.as-cert__placeholder,.as-ba-slider,.as-persona-card{ background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.10) 50%,rgba(14,165,233,.08) 100%)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border:1px solid rgba(255,255,255,.30)!important; border-top-color:rgba(255,255,255,.65)!important; border-left-color:rgba(255,255,255,.45)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 1px 0 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.4)!important; color:var(--as-c-main)!important; } /* 結晶透明 hover: より光が透ける感じ */ .as-persona-card:hover{ background:linear-gradient(135deg,rgba(14,165,233,.30) 0%,rgba(255,255,255,.16) 50%,rgba(14,165,233,.14) 100%)!important; border-color:rgba(14,165,233,.7)!important; border-top-color:rgba(255,255,255,.75)!important; box-shadow:0 12px 32px rgba(14,165,233,.35),inset 0 1px 0 rgba(255,255,255,.65),inset 1px 0 0 rgba(14,165,233,.35)!important; transform:translateY(-3px); } /* 認定証 結晶額縁 (blur なし / 可視性 UP) */ .as-cert__placeholder{ background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.10) 50%,rgba(14,165,233,.10) 100%)!important; border:1px solid rgba(255,255,255,.35)!important; border-top-color:rgba(255,255,255,.75)!important; border-left-color:rgba(255,255,255,.50)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 1px 0 0 rgba(255,255,255,.32),0 4px 16px rgba(0,0,0,.45)!important; color:var(--as-c-cyan)!important; } /* B2B バナー (NanoZone 内): 白パネル + 結晶エッジ (blur なし) */ .as-nanozone__b2b{ background:linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(248,250,252,.88) 100%)!important; border:1px solid rgba(11,12,16,.08)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 16px rgba(0,0,0,.18)!important; color:var(--as-c-base)!important; } /* 翻訳ボックス (黒背景内 / 結晶エッジ / blur なし / 可視性 UP) */ .as-nanozone .as-translation-box,.as-translation-box--dark{ background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.10) 50%,rgba(14,165,233,.12) 100%)!important; border:1px solid rgba(255,255,255,.30)!important; border-top-color:rgba(255,255,255,.60)!important; border-left:4px solid var(--as-c-cyan)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 1px 0 0 rgba(255,255,255,.28)!important; color:var(--as-c-main)!important; } /* Visual Proof BA slider: 結晶エッジ (blur なし / 可視性 UP) */ .as-ba-slider{ background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.10) 50%,rgba(14,165,233,.18) 100%)!important; border:1px solid rgba(255,255,255,.32)!important; border-top-color:rgba(255,255,255,.65)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(0,0,0,.4)!important; } /* セクション内文字 (カード外): 純白 + 軽 shadow (黒背景で読める) */ .as-numeric-anchors__caption,.as-usp__sub,.as-nanozone__lead,.as-visual-proof__lead,.as-philosophy p,.as-final-cta__lead{color:#FFFFFF!important;text-shadow:0 1px 4px rgba(0,0,0,.5);} .as-philosophy__sign,.as-final-cta__address,.as-numeric-card__unit,.as-numeric-card__label,.as-fact-icon__desc,.as-trust-icon__desc{color:#CBD5E1!important;} .as-h2--light{color:#FFFFFF!important;text-shadow:0 2px 8px rgba(0,0,0,.55);} /* 白背景セクションの料金カード等は v4.1 のまま不変なので、override せず */ /* ============ v5.8 DARK SECTIONS ASTRA OVERRIDE DEFEAT ============ */ /* Section 3 USP statement (Astra rgb(66,66,69) → 白) */ .as-usp .as-usp__statement, .as-usp__statement{ color:#FFFFFF!important; font-weight:800!important; text-shadow:0 2px 12px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5)!important; } /* Section 7 NanoZone 翻訳ボックス body (Astra rgb(66,66,69) → 白) */ .as-nanozone .as-translation-box .as-translation-box__body, .as-translation-box--dark .as-translation-box__body{ color:#FFFFFF!important; font-weight:500!important; opacity:1!important; line-height:var(--as-lh-b)!important; } /* Section 13 Final CTA 電話番号 CTA-large (Astra rgb(27,66,150) → 白 + ソリッドダーク) */ .as-final-cta .as-cta-large--tel, .as-cta-large--tel, a.as-cta-large.as-cta-large--tel{ background:rgba(11,12,16,.85)!important; border:2px solid rgba(255,255,255,.55)!important; color:#FFFFFF!important; font-weight:700!important; text-shadow:0 1px 4px rgba(0,0,0,.8)!important; box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)!important; } .as-final-cta .as-cta-large--tel:hover, .as-cta-large--tel:hover, a.as-cta-large.as-cta-large--tel:hover{ background:rgba(11,12,16,.95)!important; border-color:var(--as-c-cyan)!important; color:#FFFFFF!important; transform:translateY(-2px); } .as-final-cta .as-cta-large--tel .as-cta-large__main, .as-cta-large--tel .as-cta-large__main{color:#FFFFFF!important;} .as-final-cta .as-cta-large--tel .as-cta-large__sub, .as-cta-large--tel .as-cta-large__sub{color:#CBD5E1!important;opacity:1!important;} /* ============ v5.9 Section 11 H2 + Persona horizontal ============ */ /* Section 11 Philosophy H2 「12 年分の進化と、決して変わらない執念。」(default .as-h2 → 白) */ .as-philosophy .as-h2, .as-philosophy h2.as-h2{ color:#FFFFFF!important; font-weight:800!important; text-shadow:0 2px 12px rgba(0,0,0,.5)!important; } /* Persona カード: auto-fit で必ず横並びキープ (狭幅時のみ縦) */ .as-persona-cards{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important; gap:var(--as-g-md)!important; } @media(max-width:480px){ .as-persona-cards{grid-template-columns:1fr!important;} } /* ============ v5.10 Section 11 Philosophy Split Layout (代表写真 + 本文) ============ */ .as-philosophy__split{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:var(--as-g-2xl);align-items:center;margin:var(--as-g-2xl) 0 0;} @media(max-width:768px){.as-philosophy__split{grid-template-columns:1fr;gap:var(--as-g-xl);}} .as-philosophy__portrait{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--as-g-md);} .as-philosophy__portrait img{width:100%;height:auto;max-width:360px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--as-radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);} .as-philosophy__portrait figcaption{font-size:var(--as-caption);letter-spacing:.2em;color:#CBD5E1;font-weight:500;} .as-philosophy__body p{margin:0 0 var(--as-g-md);} .as-philosophy__body .as-philosophy__sign{margin-top:var(--as-g-xl);text-align:left;letter-spacing:.1em;} @media(max-width:768px){ .as-philosophy__body .as-philosophy__sign{text-align:center;} .as-philosophy__portrait{margin:0 auto;} } /* H2 をセクション全幅で中央寄せ (split の上に配置) */ .as-philosophy .as-h2{text-align:center;margin-bottom:var(--as-g-xl);} /* ============ v5.11 Persona BR fix (WP wpautop 対策) ============ */ .as-persona-cards br{display:none!important;} .as-persona-cards>*:not(.as-persona-card){display:none!important;} /* ============ v5.13 Visual Break caption 強化 ============ */ .as-visual-break .as-visual-break__caption, .as-visual-break__caption{ position:absolute!important; left:50%!important; right:auto!important; bottom:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; text-align:center!important; font-size:clamp(20px,3vw,32px)!important; font-weight:700!important; letter-spacing:.15em!important; color:#FFFFFF!important; text-shadow:0 4px 24px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.8)!important; margin:0!important; padding:var(--as-g-md) var(--as-g-2xl)!important; background:rgba(11,12,16,.55)!important; border:1px solid rgba(255,255,255,.18)!important; border-left:3px solid var(--as-c-cyan)!important; border-radius:var(--as-radius)!important; white-space:nowrap; max-width:90%; } @media(max-width:768px){ .as-visual-break__caption{ white-space:normal!important; font-size:clamp(16px,4vw,22px)!important; padding:var(--as-g-sm) var(--as-g-md)!important; } } /* ============ v5.14 Starex 公式ロゴ + 特許取得バッジ ============ */ .as-starex-brand{position:relative;display:inline-block;margin:0 0 var(--as-g-md);max-width:320px;} .as-starex-brand img{width:100%;height:auto;display:block;} .as-starex-brand__badge{position:absolute;top:-8px;left:-12px;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:2px solid #DC2626;background:#FFFFFF;color:#DC2626;font-size:13px;font-weight:800;letter-spacing:.05em;transform:rotate(-12deg);z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.15);} @media(max-width:600px){ .as-starex-brand{max-width:240px;} .as-starex-brand__badge{width:52px;height:52px;font-size:11px;top:-6px;left:-8px;} } /* ============ v5.15 Starex Benefits (ユーザー目線 5 カード) ============ */ .as-starex-benefits__h3{margin:var(--as-g-2xl) 0 var(--as-g-lg)!important;text-align:center;color:var(--as-c-base)!important;} .as-starex-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--as-g-md);margin:0 0 var(--as-g-xl);} .as-starex-benefit{display:flex;flex-direction:column;align-items:center;gap:var(--as-g-xs);padding:var(--as-g-lg) var(--as-g-md);background:linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 100%);border:1px solid rgba(11,12,16,.08);border-top-color:var(--as-c-cyan);border-top-width:3px;border-radius:var(--as-radius-lg);box-shadow:0 4px 16px rgba(11,12,16,.06),inset 0 1px 0 rgba(255,255,255,.9);text-align:center;transition:transform .25s ease,box-shadow .25s ease;} .as-starex-benefit:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(14,165,233,.18),inset 0 1px 0 rgba(255,255,255,.9);} .as-starex-benefit__icon{font-size:40px;line-height:1;margin-bottom:var(--as-g-xs);} .as-starex-benefit__title{font-weight:700;font-size:calc(var(--as-body) * 1.05);color:var(--as-c-cyan);letter-spacing:.02em;line-height:1.4;} .as-starex-benefit__desc{font-size:var(--as-caption);line-height:var(--as-lh-b);color:var(--as-c-slate);} @media(max-width:600px){ .as-starex-benefits{grid-template-columns:repeat(2,1fr);} .as-starex-benefit__icon{font-size:32px;} } /* ============ A11y / motion-reduce ============ */ @media(prefers-reduced-motion:reduce){ .as-hero__de-ui,.as-hero__scroll-line,.as-numeric-card,.as-de-row__bar,.as-process-bar{animation:none!important;} } /* HERO 電話番号 CTA: Astra 上書き撃退 / ソリッドダーク + 純白文字 + 縁取り */ .as-hero .as-hero__cta .as-cta--tel, .as-hero__cta .as-cta--tel, a.as-cta.as-cta--tel{ background:rgba(11,12,16,.85)!important; border:2px solid rgba(255,255,255,.55)!important; color:#FFFFFF!important; font-weight:700!important; letter-spacing:.05em!important; -webkit-text-stroke:.3px rgba(0,0,0,.4); text-shadow:0 1px 4px rgba(0,0,0,.8); box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2); } .as-hero .as-hero__cta .as-cta--tel:hover, .as-hero__cta .as-cta--tel:hover, a.as-cta.as-cta--tel:hover{ background:rgba(11,12,16,.95)!important; border-color:var(--as-c-cyan)!important; color:#FFFFFF!important; box-shadow:0 8px 24px rgba(14,165,233,.35),inset 0 1px 0 rgba(255,255,255,.3)!important; transform:translateY(-2px); } /* === Section 10 NANOZONE Logo & Visual Enhancement (v5.16 / 2026-05-07) === */ .as-nanozone{position:relative;overflow:hidden;} .as-nanozone::before{content:"";position:absolute;inset:0;background:url('https://autostyle-japan.net/new/wp-content/uploads/2026/05/hikari.png') center center/cover no-repeat;opacity:.08;pointer-events:none;z-index:0;} .as-nanozone .as-section-inner{position:relative;z-index:1;} .as-nanozone__official-logos{display:flex;align-items:center;justify-content:center;gap:56px;margin:0 auto var(--as-g-md);flex-wrap:wrap;background:#FFFFFF;border-radius:12px;padding:28px 48px;max-width:-moz-fit-content;max-width:fit-content;box-shadow:0 12px 40px rgba(0,0,0,.45);} .as-nanozone__official-logos a{display:inline-flex;align-items:center;line-height:0;text-decoration:none;transition:opacity .25s ease;} .as-nanozone__official-logos a:hover{opacity:.7;} .as-nanozone__logo{height:72px;width:auto;display:block;opacity:1;} .as-nanozone__logo--invert,.as-nanozone__logo--mono{filter:none;} @media(max-width:768px){.as-nanozone__logo{height:56px;}.as-nanozone__official-logos{gap:32px;padding:20px 28px;}} .as-nanozone__official-caption{display:block;width:-moz-fit-content;width:fit-content;margin:var(--as-g-md) auto var(--as-g-xl);text-align:center;font-size:calc(var(--as-caption) * 1.3);letter-spacing:.24em;color:#FFFFFF;opacity:1;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 28px rgba(0,0,0,.7);background:rgba(11,12,16,.72);padding:10px 26px;border-radius:6px;border-top:1px solid rgba(14,165,233,.45);border-bottom:1px solid rgba(14,165,233,.45);} .as-nanozone__official-badge{display:inline-flex;align-items:center;gap:6px;background:var(--as-c-cyan);color:var(--as-c-main);padding:4px 10px;border-radius:4px;font-size:var(--as-caption);font-weight:700;letter-spacing:var(--as-ls-h);position:absolute;top:-12px;right:16px;z-index:2;box-shadow:0 2px 8px rgba(14,165,233,.4);} .as-nanozone .as-translation-box,.as-nanozone .as-translation-box--dark{position:relative;} .as-nanozone__mechanism{margin:var(--as-g-xl) 0;text-align:center;background:rgba(255,255,255,.97);border-radius:var(--as-radius);padding:var(--as-g-lg) var(--as-g-md);box-shadow:0 8px 24px rgba(0,0,0,.3);} .as-nanozone__mechanism img{max-width:100%;height:auto;display:block;margin:0 auto;} .as-nanozone__mechanism figcaption{margin-top:var(--as-g-md);font-size:var(--as-caption);color:#1a1a1a;opacity:.9;font-weight:500;} .as-nanozone__mechanism figcaption small{display:block;margin-top:4px;opacity:.7;font-size:11px;} /* === AutoStyle Footer v1.0 (ecostyle-inspired 3 column + Calendar / 2026-05-07) === */ .as-footer{background:#0a0b0f;color:#e5e5e7;padding:20px 0 10px;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;border-top:1px solid rgba(255,255,255,.08);} .as-footer__inner{max-width:1200px;margin:0 auto;padding:0 24px;} .as-footer__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;} @media(max-width:1024px){.as-footer__cols{grid-template-columns:1fr;gap:48px;}} .as-footer__col{display:flex;flex-direction:column;} .as-footer__h3{font-size:18px;font-weight:700;color:#FFFFFF;margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid rgba(14,165,233,.4);letter-spacing:.12em;display:flex;align-items:baseline;gap:12px;} .as-footer__h3:not(:first-child){margin-top:9px;} .as-footer__h3-sub{font-size:12px;font-weight:500;color:#9ca3af;letter-spacing:.18em;} .as-footer__brand{margin:0 0 6px;line-height:1.6;} .as-footer__brand strong{color:#FFFFFF;font-size:15px;} .as-footer__shop{color:#0ea5e9;font-size:13px;font-weight:600;} .as-footer__addr{font-style:normal;font-size:13px;line-height:1.6;color:#cbd5e1;margin:0 0 6px;} .as-footer__hours{display:inline-block;background:rgba(14,165,233,.12);color:#0ea5e9;padding:2px 10px;border-radius:4px;font-size:12px;margin-top:6px;border:1px solid rgba(14,165,233,.3);} .as-footer__contact{margin:0 0 6px;} .as-footer__tel{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:700;color:#FFFFFF;text-decoration:none;font-family:"Cinzel","Noto Serif JP",serif;letter-spacing:.05em;} .as-footer__tel:hover{color:#0ea5e9;} .as-footer__icon{font-size:18px;} .as-footer__cta{margin:0 0 8px;} .as-footer__line-btn{display:inline-block;background:#06C755;color:#FFFFFF;padding:12px 20px;border-radius:6px;text-decoration:none;font-weight:700;font-size:13px;text-align:center;width:100%;box-sizing:border-box;transition:opacity .2s;} .as-footer__line-btn:hover{opacity:.85;} .as-footer__sublinks{list-style:none;padding:0;margin:0 0 6px;} .as-footer__sublinks li{margin:0 0 8px;} .as-footer__sublinks a{color:#cbd5e1;text-decoration:none;font-size:13px;transition:color .2s;} .as-footer__sublinks a:hover{color:#0ea5e9;} .as-footer__badges{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding-top:20px;border-top:1px dashed rgba(255,255,255,.1);} .as-footer__badge{background:rgba(184,146,63,.15);border:1px solid rgba(184,146,63,.4);color:#daa867;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.05em;} /* Services list */ .as-footer__services{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;} .as-footer__services li a{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,255,255,.03);border-radius:6px;text-decoration:none;color:#e5e5e7;border:1px solid rgba(255,255,255,.05);transition:all .2s;} .as-footer__services li a:hover{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.3);transform:translateX(2px);} .as-footer__svc-icon{font-size:18px;flex-shrink:0;} .as-footer__svc-label{display:flex;flex-direction:column;line-height:1.3;font-weight:700;font-size:12px;letter-spacing:.05em;} .as-footer__svc-label small{font-weight:400;font-size:10px;color:#9ca3af;margin-top:2px;letter-spacing:0;} /* SNS */ .as-footer__sns{list-style:none;padding:0;margin:0;display:flex;gap:12px;} .as-footer__sns li a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#cbd5e1;transition:all .2s;} .as-footer__sns li a:hover{background:rgba(14,165,233,.15);border-color:#0ea5e9;color:#0ea5e9;transform:translateY(-2px);} /* Calendar */ .as-cal-wrap{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:16px;} .as-cal-table{width:100%;border-collapse:collapse;font-size:12px;} .as-cal-table th,.as-cal-table td{text-align:center;padding:6px 0;color:#cbd5e1;} .as-cal-head{font-weight:700;color:#9ca3af;font-size:11px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;} .as-cal-head--sun{color:#ef4444;} .as-cal-head--sat{color:#3b82f6;} .as-cal-day{font-weight:500;} .as-cal-day--sun{color:#fca5a5;} .as-cal-day--sat{color:#93c5fd;} .as-cal-day--holiday span{display:inline-block;background:#ec4899;color:#FFFFFF;border-radius:50%;width:24px;height:24px;line-height:24px;font-weight:700;} .as-cal-empty{color:rgba(255,255,255,.15);} .as-cal-legend{font-size:11px;color:#9ca3af;margin:8px 0 0;display:flex;align-items:center;gap:6px;} .as-cal-legend-mark{display:inline-block;width:12px;height:12px;background:#ec4899;border-radius:50%;} .as-footer__map{margin-top:8px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08);} .as-footer__map iframe{display:block;} /* Bottom */ .as-footer__bottom{margin-top:15px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);text-align:center;} .as-footer__copy{margin:0;font-size:12px;color:#9ca3af;letter-spacing:.05em;} .as-footer__credit{margin:8px 0 0;font-size:11px;color:#6b7280;font-style:italic;} @media(max-width:768px){.as-footer{padding:15px 0 8px;}.as-footer__h3{font-size:16px;}.as-footer__services{grid-template-columns:1fr;}.as-footer__cols{gap:18px;}.as-footer__bottom{margin-top:12px;}} /* === v5.21 Static Page Visibility Fix (全固定ページ薄文字解消 / 2026-05-07) === */ /* fade-in 強制即時表示 - JS IntersectionObserver 待ち opacity:0 を解消 */ .as-fade-in,.as-fade-in:not(.is-visible),.as-fade-in.is-visible{opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important;} /* Section 強制可視化 */ .as-section{opacity:1!important;visibility:visible!important;} /* Display 見出し階層 - 強制白文字 + 強化シャドウ */ .as-display-1,.as-display-2,.as-display-3{color:#FFFFFF!important;font-weight:800!important;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.55)!important;letter-spacing:.02em!important;opacity:1!important;} /* Eyebrow - cyan アクセント */ .as-eyebrow{color:#0ea5e9!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;font-size:13px!important;text-shadow:0 1px 6px rgba(0,0,0,.6)!important;opacity:1!important;margin-bottom:16px!important;} /* Body lead - 読みやすい白 */ .as-body-lead{color:#F1F5F9!important;text-shadow:0 1px 6px rgba(0,0,0,.65)!important;opacity:1!important;line-height:1.8!important;font-weight:500!important;} /* CTA 強制白文字 */ .as-cta-primary,.as-cta-secondary{opacity:1!important;} .as-cta-primary{color:#FFFFFF!important;text-shadow:0 1px 4px rgba(0,0,0,.5)!important;} .as-cta-secondary{color:#0ea5e9!important;text-shadow:0 1px 4px rgba(0,0,0,.7)!important;} /* Address / fine print 視認性向上 */ .as-final-cta__address,.as-content address,.as-section address{color:#CBD5E1!important;opacity:1!important;text-shadow:0 1px 4px rgba(0,0,0,.5)!important;} /* Content wrapper */ .as-content{opacity:1!important;} /* === v5.22 Static Page Meta Visibility Fix (営業時間+住所等の補足テキスト視認性) === */ .as-cta-meta,.as-meta,.as-note,.as-fine-print,.as-section-meta,.as-caption,.as-disclaimer{color:#E5E5E7!important;opacity:1!important;text-shadow:0 1px 6px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.4)!important;font-weight:500!important;line-height:1.8!important;} .as-cta-meta a,.as-meta a,.as-note a{color:#0ea5e9!important;text-decoration:underline;} /* 一般的な補足 p 要素も背景画像区間で色強化 */ .as-section p:not([class]){color:#E5E5E7!important;text-shadow:0 1px 4px rgba(0,0,0,.5);} /* === v5.23 CONTACT Section Watercolor Background (Gemini 3 Pro Image / 全 26 ページ共通) === */ .as-final-cta{ background-color:transparent!important; background-image:linear-gradient(rgba(11,12,16,.55),rgba(11,12,16,.65)),url('https://autostyle-japan.net/new/wp-content/uploads/2026/05/contact-watercolor-modern-bg.jpg')!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; background-attachment:scroll!important; position:relative!important; } @media(max-width:768px){ .as-final-cta{background-image:linear-gradient(rgba(11,12,16,.68),rgba(11,12,16,.78)),url('https://autostyle-japan.net/new/wp-content/uploads/2026/05/contact-watercolor-modern-bg.jpg')!important;} } /* === v5.25 Light Section Text Color Fix (白背景セクションで黒文字に戻す) === */ /* 黒背景セクション (.as-hero/.as-final-cta/.as-nanozone/.as-philosophy) 以外は黒文字に */ .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-display-1, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-display-2, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-display-3{color:#1a1a1a!important;text-shadow:none!important;} .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-body-lead{color:#2a2a2a!important;text-shadow:none!important;font-weight:500!important;} .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-problem-list, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-problem-list li, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-problem-list li strong, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) p:not([class]), .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-content p, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-content li, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-content ul, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-content ol{color:#2a2a2a!important;text-shadow:none!important;} .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-problem-list li strong{color:#0a0b0f!important;font-weight:700!important;} /* 白背景セクションの cta-meta 等補助テキストも黒に */ .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-cta-meta, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-meta, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-note, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-fine-print, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-section-meta, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-caption, .as-section:not(.as-hero):not(.as-final-cta):not(.as-nanozone):not(.as-philosophy) .as-disclaimer{color:#444!important;text-shadow:none!important;} /* === v5.26 CONTACT Section Compact + Auto-Inject Styling (1/3 縦長解消) === */ .as-final-cta{padding:40px 24px!important;min-height:auto!important;} .as-final-cta .as-content{max-width:880px!important;margin:0 auto!important;padding:0!important;text-align:center;} .as-final-cta .as-display-2{font-size:clamp(28px,4vw,40px)!important;margin:0 0 10px!important;line-height:1.4!important;} .as-final-cta .as-eyebrow{margin:0 0 6px!important;font-size:12px!important;letter-spacing:.22em!important;} .as-final-cta .as-body-lead{margin:0 auto 14px!important;max-width:640px;font-size:14px!important;} .as-final-cta .as-cta-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;margin:14px auto!important;} .as-final-cta .as-cta-primary{padding:13px 34px!important;font-size:15px!important;display:inline-block!important;} .as-final-cta .as-cta-secondary{font-size:13px!important;padding:4px 8px!important;text-decoration:none!important;} .as-final-cta .as-cta-meta{margin:12px 0 0!important;font-size:11px!important;line-height:1.6!important;} .as-final-cta br{line-height:.4!important;} .as-auto-injected{display:block!important;} @media(max-width:768px){.as-final-cta{padding:28px 16px!important;}.as-final-cta .as-display-2{font-size:24px!important;}.as-final-cta .as-body-lead{font-size:13px!important;}} /* === SNS ICONIFICATION 2026-05-07 20:30 JST === */ /* footer FOLLOW US の IG/YT/LINE テキストをアイコン化 */ html body .as-footer__sns { display: flex !important; gap: 16px !important; list-style: none !important; padding: 0 !important; margin: 12px 0 0 !important; align-items: center !important; } html body .as-footer__sns li { margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .as-footer__sns li::before, html body .as-footer__sns li::marker { display: none !important; content: '' !important; } html body .as-footer__sns li a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; text-indent: -99999px !important; overflow: hidden !important; position: relative !important; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } html body .as-footer__sns li a::after { content: '' !important; position: absolute !important; top: 9px !important; left: 9px !important; right: 9px !important; bottom: 9px !important; background-color: #fff !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; text-indent: 0 !important; } html body .as-footer__sns > li:nth-child(1) a { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%) !important; } html body .as-footer__sns > li:nth-child(1) a::after { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; } html body .as-footer__sns > li:nth-child(2) a { background: #FF0000 !important; } html body .as-footer__sns > li:nth-child(2) a::after { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; } html body .as-footer__sns > li:nth-child(3) a { background: #06C755 !important; } html body .as-footer__sns > li:nth-child(3) a::after { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; } html body .as-footer__sns li a:hover { transform: scale(1.12) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; }