﻿/* v1.2: 独自のミント色と手帖のグッズ棚。医療本文は白い面で読む。 */
:root{--mint:#bfe7d6;--cream:#fff8df;--line:#96b8ab;--radius:22px}
body.shop-page{background-color:var(--cream);background-image:radial-gradient(#d1e9ef 2px,transparent 2px);background-size:23px 23px}
.prototype{background:#305c50;color:#fff;font-size:12px;letter-spacing:.08em}
.site-header{background:repeating-linear-gradient(90deg,#dcf2e6 0 22px,#c9ebdb 22px 44px);border-bottom:3px solid #6c9c89}
.header-inner{flex-direction:column;gap:15px;padding:23px 0 14px}.brand{font-size:30px;letter-spacing:.1em}.brand svg{width:42px;height:48px}.brand small{text-align:center;font-size:12px;letter-spacing:.18em}
nav{justify-content:center;gap:8px 30px;padding:4px 20px;border-radius:30px;background:#fff}nav a{font-size:14px}.ad-note{background:#fff;border-radius:12px;padding:10px 18px;margin-top:18px;margin-bottom:18px;font-size:12px}
.shop-heading{text-align:center;width:fit-content;max-width:100%;margin:0 auto 30px;padding:10px 30px;background:#fff;border-radius:50px;border:1px solid #b5cec0;box-shadow:0 4px 0 #305c5010}.shop-heading>p{font-size:13px;font-weight:700;letter-spacing:.13em}.shop-heading>h2{font-size:26px;letter-spacing:.16em;line-height:1.5}
.page-index main.wrap{width:100%;padding-bottom:0}.shop-band{padding:50px 0;background:var(--cream)}.shop-band.mint{background:repeating-linear-gradient(90deg,#dcf2e6 0 24px,#c9ebdb 24px 48px)}.shop-band.cream{background-color:var(--cream);background-image:radial-gradient(#d1e9ef 2.5px,transparent 3px);background-size:24px 24px}.shop-band .section{margin-top:0}
.feature-area{padding:10px 0 26px;background:#fffdf7}.carousel{position:relative}.hero{min-height:390px;grid-template-columns:1.2fr .8fr;border:2px solid #60947f;border-radius:30px;background:#e0f3e9;box-shadow:0 7px 0 #c0dece;padding:34px 48px}.hero>div:first-child:not(.pastel-parallax){background:#ffffffed;padding:24px;border-radius:22px}.hero h1{font-size:37px;line-height:1.55}.hero p{font-size:16px}.hero h2{font-size:38px;margin-bottom:18px}.hero-art .mascot{width:250px}.hero-art .shop-cat{width:285px;height:285px}.hero .button{margin-top:12px}.hero .actions .button{margin-top:0}.hero .meta{font-size:12px}.hero .eyebrow{font-size:13px}.hero-art .mascot-name,.hero-art .art-caption{background:white;border-radius:30px;width:fit-content;margin:8px auto;padding:3px 16px}.feature-sky{background:#d8edf6}.feature-peach{background:#f8dedb}.feature-lemon{background:#f7efbd}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}.carousel-controls button{border:1.5px solid #305c50;background:white;color:#305c50;border-radius:30px;min-height:44px;min-width:44px;padding:6px 15px;font-weight:700;font-size:14px}.carousel-status{font-size:13px;font-weight:700;letter-spacing:.2em}.carousel-slide.is-changing{animation:question-slide .5s ease-out}
.button{border-radius:50px;box-shadow:0 4px 0 #193f33;padding:11px 24px}.button.secondary{box-shadow:0 3px 0 #c9ded3}.text-link{font-size:15px}.grid.shop-grid,.chips.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card,.card.sage,.card.blue,.card.pink{background:white;border:1.5px solid #96b8ab;box-shadow:0 5px 0 #769b8c25;padding:22px;position:relative}.card h3{font-size:18px}.card p{color:var(--ink)}.card-number{font-size:12px;letter-spacing:.05em}.card-illustration{position:relative;display:flex;justify-content:center;align-items:center;border-radius:14px;background:#e1f2e8;margin:-10px -10px 20px;height:170px;overflow:hidden}.shop-cat{object-fit:contain;display:block;max-width:100%;height:auto}.card-illustration .shop-cat{width:140px;height:145px;transform:rotate(-7deg)}.card-illustration>span{position:absolute;right:12px;top:12px;background:white;border:1px solid #739889;border-radius:12px;font-size:24px;font-weight:800;width:45px;height:45px;text-align:center}.tone-1{background:#deeff8}.tone-2{background:#f8e6e2}.tone-3{background:#f8f1ce}
@media(hover:hover){.card:not(.danger):hover{transform:translateY(-7px) rotate(-1deg);transition:transform .2s}.shop-grid .chip:hover{transform:translateY(-5px) rotate(1deg)}}
.shop-grid .chip{display:flex;position:relative;flex-direction:column;background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:20px;min-height:160px;padding:28px 12px 18px;font-weight:700;text-align:center;gap:12px;font-size:16px;box-shadow:0 5px 0 #bfd9e34d}.symptom-symbol{font-size:40px;color:#305c50;line-height:1.1}.ribbon{position:absolute;top:-1px;left:-1px;background:#305c50;color:#fff;padding:2px 12px;border-radius:18px 0 10px 0;font-size:12px}.section-head{display:block;text-align:center;background:white;border-radius:18px;padding:18px;margin-bottom:24px}.section-head h2{font-size:20px}.section-head p{margin-top:6px}.shop-band .section>h2,.shop-band .section>p{background:#fff;padding:10px 18px}.shop-band .section>h2{border-radius:16px 16px 0 0}.shop-band .section>p{border-radius:0 0 16px 16px}.shop-band .section.danger>h2,.shop-band .section.danger>p{padding:0}
.notice,.aside{background:#fff;border:2px solid #96b8ab}.danger,.step.danger,.safety-panel>.danger{background:#fff!important;border:3px solid #942d29;border-left-width:8px;color:#6e2421;box-shadow:none;padding:24px!important;border-radius:12px}.danger h2{font-size:24px}.safety-mascot{display:none!important}.danger,.danger *,.safety-panel,.safety-panel *{animation:none!important;transition:none!important;transform:none!important}.shop-band .danger{margin:0}.danger h2,.danger h3{color:#7e231e}
.news-box{max-width:740px;background:#fff;border:3px solid #68937f;border-radius:24px;box-shadow:7px 7px 0 #c8e5d7;margin:auto;padding:28px;text-align:center}.news-box>p{display:flex;gap:24px;text-align:left;padding:15px 0;border-bottom:1px dashed #afc7bc;font-size:15px}.news-box time{font-size:13px;flex-shrink:0}.news-box>.button{margin-top:24px}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.guide-banner{display:flex;align-items:center;flex-direction:column;background:#fff;border:2px solid #5f8a76;box-shadow:0 5px 0 #87b7a0;border-radius:22px;text-decoration:none;padding:10px;font-size:16px;font-weight:700;text-align:center;transition:transform .2s}.guide-banner:nth-child(2){background:#e9f4fa}.guide-banner:nth-child(3){background:#fff1ed}.guide-banner:nth-child(4){background:#fff8d9}.guide-banner .shop-cat{width:115px;height:110px}.guide-banner b{margin-left:12px}.guide-banner:hover{transform:translateY(-5px)}.cat-parade{background:#fffdf2;border-top:2px dashed #91b6a3;padding:20px 0 0;overflow:hidden}.cat-parade .wrap{display:flex;align-items:end;justify-content:center}.cat-parade img{width:150px;height:150px;margin:0 5px}.cat-parade img:nth-child(even){width:180px;height:180px}.footer{background:repeating-linear-gradient(90deg,#dcf2e6 0 24px,#c9ebdb 24px 48px);border-top:3px solid #6c9c89}.footer>.wrap{background:#ffffffec;border-radius:22px;padding:24px}.footer-links{justify-content:center}.footer-inner{gap:22px}.edge-cats{position:fixed;right:6px;top:15%;bottom:6%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:2;transform:translateY(var(--edge-shift,0px))}.edge-cats img{width:36px;height:38px;border-radius:50%;background:#fff;border:1px solid #96b8ab;animation:pastel-float 6s ease-in-out infinite}.edge-cats img:nth-child(even){animation-delay:-3s}
.shop-page:not(.page-index) main.wrap{padding-top:12px;padding-bottom:55px}.page-heading{max-width:none;background:white;border:2px solid #96b8ab;border-radius:26px;padding:30px;text-align:center;box-shadow:0 6px 0 #cfe6d5}.page-english{font-size:14px!important;font-weight:800;letter-spacing:.24em;color:#305c50!important}.page-heading .eyebrow{margin:8px 0}.breadcrumbs{background:#fff;width:fit-content;border-radius:30px;padding:6px 16px}.paper-panel,.source{background:white;border:1px solid #96b8ab;border-radius:20px;padding:24px}.policy{max-width:850px;margin:auto}.policy .card{box-shadow:none}.policy details{padding:16px 0;border-top:1px dashed #96b8ab}.policy summary{cursor:pointer;font-weight:700}.policy details p{margin-top:14px}.article-layout{gap:24px}.step{border:2px solid #68937f;box-shadow:0 6px 0 #cfe6d5}.progress{background:white;border-radius:16px;padding:14px}.cat-track{background:#fffdf4;border-radius:16px 16px 0 0}.lost-page{background:#fff!important;border-radius:28px;margin-bottom:40px!important;border:2px solid #96b8ab}.lost-page>.eyebrow{margin-top:20px}.table-wrap{border:2px solid #68937f}.table-wrap caption{background:#e2f2e7}.motion-toggle{border-radius:40px}
html[data-motion=paused] .edge-cats{transform:none!important}html[data-motion=paused] .card:hover,html[data-motion=paused] .chip:hover,html[data-motion=paused] .guide-banner:hover{transform:none!important}html[data-safety=true] .edge-cats{visibility:hidden}
@media(max-width:850px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr 230px;padding:24px}.hero-art{grid-row:auto}.hero h1,.hero h2{font-size:28px}.hero-art .mascot,.hero-art .shop-cat{width:210px;height:auto}.edge-cats{display:none}.grid.shop-grid,.chips.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{font-size:27px}}
@media(max-width:480px){.wrap{width:calc(100% - 28px)}.prototype{font-size:11px}.header-inner{align-items:center;padding:17px 0 12px}.brand{font-size:25px;gap:8px}.brand small{font-size:10px}nav{padding:7px 12px;gap:2px 14px;border-radius:18px}nav a{font-size:12px;padding:5px 0}.ad-note{font-size:11px;padding:9px 12px}.hero{grid-template-columns:1fr;gap:2px;padding:16px;min-height:0;border-radius:24px}.hero>div:first-child:not(.pastel-parallax){padding:19px}.hero-art{grid-row:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 14px}.hero-art .mascot,.hero-art .shop-cat{width:130px;height:134px}.hero-art .mascot-arrival{width:130px}.hero-art .mascot-name{font-size:12px;margin:0}.hero-art .art-caption{display:none}.hero h1,.hero h2{font-size:27px}.hero p{font-size:16px}.hero .eyebrow{font-size:12px}.hero .actions{gap:6px;margin-top:18px}.hero .button{font-size:14px}.hero .meta{font-size:12px}.hero .text-link{font-size:14px}.carousel-controls{gap:10px}.carousel-controls button{font-size:12px;padding:6px 12px}.shop-band{padding:34px 0}.shop-heading{margin-bottom:22px;padding:9px 22px}.shop-heading>h2{font-size:22px}.shop-heading>p{font-size:12px}.grid.shop-grid,.chips.shop-grid{gap:12px}.shop-grid>.card{padding:14px 12px;border-radius:16px}.card-illustration{height:125px;margin:-5px -4px 13px}.card-illustration .shop-cat{width:110px;height:115px}.card-illustration>span{font-size:20px;width:32px;height:34px;right:5px;top:5px}.card-number{font-size:11px;margin-bottom:10px}.card h3{font-size:17px}.card p{font-size:16px}.card .text-link{font-size:14px}.shop-grid .chip{padding:30px 10px 15px;min-height:150px;font-size:16px}.ribbon{font-size:11px}.danger h2{font-size:22px}.danger,.step.danger,.safety-panel>.danger{padding:20px 16px!important}.news-box{padding:20px;border-radius:18px}.news-box>p{display:block;font-size:16px}.news-box time{display:block;margin-bottom:6px}.guide-grid{gap:13px}.guide-banner{font-size:14px;padding:10px 6px}.guide-banner .shop-cat{width:100px;height:100px}.guide-banner b{margin-left:5px}.cat-parade img{width:65px;height:80px;margin:0}.cat-parade img:nth-child(even){width:85px;height:100px}.footer>.wrap{padding:20px}.page-heading{padding:22px 17px}.page-heading h1{font-size:27px}.paper-panel,.source{padding:20px}.step{padding:22px 18px}.progress{padding:12px;gap:8px}.progress li{font-size:12px}.page-heading p{font-size:16px}.page-heading .meta{font-size:13px}.lost-page h1{font-size:56px}.lost-page .mascot-note>.mascot{width:200px}}
@media(prefers-reduced-motion:reduce){.edge-cats,.card:hover,.chip:hover,.guide-banner:hover{transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 特集の本文も常に白い面へ載せる。 */
.hero>div:not(.pastel-parallax):not(.hero-art){background:#fff;padding:24px;border-radius:22px}
.carousel:not([data-enhanced]) .carousel-controls{display:none}
@media(max-width:480px){.hero>div:not(.pastel-parallax):not(.hero-art){padding:19px}}
