@font-face {
  font-family:"MiuraGotic Propo";
  src:
    url("/font/miuragoticpropo-top-subset.woff2") format("woff2"),
    url("/font/miuragoticpropo-top-subset.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
.ranking,
.ranking *,
.ranking *::before,
.ranking *::after { box-sizing:border-box; }
.ranking button,
.ranking a { font:inherit; }
.ranking { position:relative; width:min(100%,640px); margin:0 auto 4em; padding:103px 0 0; overflow:hidden; color:var(--ink); background:var(--cream); container-type:inline-size; font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; text-size-adjust:100%; --ink:#8b7f86; --pink:#ff8baa; --cream:#fff9da; --ribbon:#887a82; --top-section-title-size:clamp(42px,calc(3.37cqw + 28.86px),72px); --top-section-heading-size:clamp(16px,calc(1.35cqw + 10.74px),28px); --top-section-description-size:clamp(14px,calc(.45cqw + 12.25px),18px); --mida-dash-width:clamp(4px,1.03cqw,8px); --mida-dash-height:clamp(1px,.26cqw,2px); --mida-dash-gap:clamp(2px,.52cqw,4px); --mida-dash-radius:calc(var(--mida-dash-height) / 2); --mida-dash-end:calc(var(--mida-dash-width) - var(--mida-dash-radius)); --mida-dash-unit:calc(var(--mida-dash-width) + var(--mida-dash-gap)); }
.ranking__head-art { position:absolute; z-index:0; top:0; left:0; width:100%; height:auto; pointer-events:none; }
.ranking__intro { width:100%; margin:auto; padding-top:var(--top-section-heading-size); position:relative; z-index:1; }
.ranking__english { display:block; width:100%; margin:0 0 -.05em; color:#82737a; text-align:center; font-family:"MiuraGotic Propo",sans-serif; font-size:var(--top-section-title-size); font-weight:400; line-height:1; letter-spacing:.025em; transform:translateY(-5px); }
.ranking h2 { position:relative; margin:-1em 8% 0; padding:.65em 0 clamp(16px,4cqw,56px); color:#82737a; text-align:center; font-size:var(--top-section-heading-size); font-weight:700; line-height:1.4; letter-spacing:.48px; }
.ranking h2::after { content:""; position:absolute; left:50%; right:auto; bottom:0; display:block; width:calc(100% - var(--mida-dash-unit)); width:round(down,100%,var(--mida-dash-unit)); height:var(--mida-dash-height); background-color:transparent; background-image:radial-gradient(circle var(--mida-dash-radius) at var(--mida-dash-radius) var(--mida-dash-radius),#82737a 99%,transparent 100%),radial-gradient(circle var(--mida-dash-radius) at var(--mida-dash-end) var(--mida-dash-radius),#82737a 99%,transparent 100%),linear-gradient(to right,transparent 0 var(--mida-dash-radius),#82737a var(--mida-dash-radius) var(--mida-dash-end),transparent var(--mida-dash-end) 100%); background-position:left bottom; background-size:var(--mida-dash-unit) var(--mida-dash-height); background-repeat:repeat-x; clip-path:inset(0 1px 0 0); transform:translateX(-50%); pointer-events:none; }
.ranking hr { display:none; }
.ranking__lead { margin:3% 10% 1.5em; padding:0; color:#82737a; font-size:var(--top-section-description-size); font-weight:400; line-height:1.6; letter-spacing:.01em; text-align:justify; text-justify:inter-character; }
.ranking__tabs { width:500px; max-width:90%; margin:60px auto 58px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:14px 10px; }
.ranking__tabs button { width:100%; min-width:0; min-height:40px; border:1px solid #c9bdc1; border-radius:999px; padding:7px 18px; color:#8d8288; background:#fff; font-weight:700; font-size:20px; line-height:1; white-space:nowrap; box-shadow:none; cursor:pointer; }
.ranking__tabs button[data-tab="preschool"],
.ranking__tabs button[data-tab="school"] { min-width:0; }
.ranking__tabs button.is-active { border-color:var(--pink); color:#fff; background:var(--pink); }
.ranking-panel { padding:0; border:0; margin:0 0 58px; scroll-margin-top:18px; }
.ranking-panel::after { content:""; display:block; width:calc(84% - var(--mida-dash-unit)); width:round(down,84%,var(--mida-dash-unit)); height:var(--mida-dash-height); margin:54px auto 0; background-color:transparent; background-image:radial-gradient(circle var(--mida-dash-radius) at var(--mida-dash-radius) var(--mida-dash-radius),#82737a 99%,transparent 100%),radial-gradient(circle var(--mida-dash-radius) at var(--mida-dash-end) var(--mida-dash-radius),#82737a 99%,transparent 100%),linear-gradient(to right,transparent 0 var(--mida-dash-radius),#82737a var(--mida-dash-radius) var(--mida-dash-end),transparent var(--mida-dash-end) 100%); background-position:left bottom; background-size:var(--mida-dash-unit) var(--mida-dash-height); background-repeat:repeat-x; clip-path:inset(0 1px 0 0); }
.ranking-panel__header { min-height:clamp(70px,19cqw,133px); text-align:center; margin-bottom:clamp(16px,4.5cqw,32px); }
.ranking-panel__header h3 { display:inline-flex; align-items:center; justify-content:center; width:68%; max-width:86%; min-height:clamp(40px,11.2cqw,78px); margin:0; padding:clamp(5px,1.25cqw,9px) clamp(7px,2cqw,14px); color:#fff; background:url("assets/ribbon.png") center/100% 100% no-repeat; font-size:clamp(16px,4cqw,28px); line-height:1.1; white-space:nowrap; }
.ranking-panel__header p { margin:clamp(12px,3cqw,21px) 0 0; font-size:clamp(14px,3.1cqw,21px); font-weight:700; }
.ranking-slider-frame { position:relative; width:100%; }
.ranking-slider-frame::before { content:""; position:absolute; z-index:3; top:0; bottom:0; left:0; width:25px; background:var(--cream); pointer-events:none; }
.ranking-slider__button { position:absolute; z-index:5; top:50%; display:none; width:44px; height:44px; margin:0; padding:0; border:1px solid #b9afb2; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 2px 5px #82737a33; cursor:pointer; transform:translateY(-50%); }
.ranking-slider__button--prev { left:8px; }
.ranking-slider__button--next { right:8px; }
.ranking-slider__button span { position:absolute; top:50%; left:50%; width:12px; height:12px; border-top:3px solid #82737a; border-right:3px solid #82737a; }
.ranking-slider__button--prev span { transform:translate(-35%,-50%) rotate(-135deg); }
.ranking-slider__button--next span { transform:translate(-65%,-50%) rotate(45deg); }
.ranking-slider__button:focus-visible { outline:3px solid #ff8baa66; outline-offset:2px; }
.ranking-slider__button.is-hidden { visibility:hidden; opacity:0; pointer-events:none; }
.ranking-slider { position:relative; width:100%; margin:0; padding:4px 0 0 25px; overflow-x:auto; overflow-y:hidden; scroll-padding-left:25px; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:auto; overscroll-behavior-x:contain; cursor:grab; outline:none; }
.ranking-slider::-webkit-scrollbar { display:none; }
.ranking-slider::before { content:none; }
.ranking-slider:active { cursor:grabbing; }
.ranking-slider.is-dragging { cursor:grabbing; user-select:none; }
.ranking-slider__track { display:flex; align-items:stretch; gap:15px; margin:0; padding:0; list-style:none; }
.ranking-slider__return { position:relative; flex:0 0 calc(17.3984% + 56px); min-width:0; color:#82737a; font-size:14px; font-weight:700; scroll-snap-align:end; scroll-snap-stop:always; }
.ranking-slider__return a { position:absolute; top:50%; left:-8px; display:flex; width:96px; align-items:center; justify-content:center; color:inherit; text-decoration:none; transform:translateY(-50%); }
.ranking-slider__return b { margin-right:5px; font:inherit; }
.ranking-slider__return em { font:inherit; font-style:normal; letter-spacing:.08em; line-height:1.3; text-orientation:upright; writing-mode:vertical-rl; }
.ranking-slider__return a:focus-visible { color:#ff78a5; outline:2px solid #ff78a5; outline-offset:3px; }
.product-card { position:relative; flex:0 0 41.3008%; min-width:0; padding-top:4px; scroll-snap-align:start; scroll-snap-stop:always; }
.product-card article { position:relative; height:100%; overflow:visible; }
.product-card a { position:relative; display:flex; height:100%; flex-direction:column; overflow:hidden; color:#756d72; text-decoration:none; background:#fff; border:2px solid #b9afb2; border-radius:15px; box-shadow:none; }
.product-card article > img.product-card__rank { position:absolute; z-index:2; left:7px; top:-4px; width:56px; height:auto; aspect-ratio:auto; object-fit:contain; }
.product-card__description { display:flex; flex:0 0 auto; height:55px; align-items:center; justify-content:flex-start; margin:0; padding:0 7px 0 70px; font-size:14px; line-height:1.25; text-align:left; white-space:nowrap; overflow:hidden; }
.product-card picture { display:block; flex:0 0 auto; }
.product-card__image { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.product-card__labels { min-height:42px; display:flex; align-items:flex-start; gap:5px; padding:11px 9px 0; white-space:nowrap; }
.product-card--category .product-card__labels { display:none; min-height:0; padding:0; }
.product-card__label { display:inline-flex; flex:0 0 auto; align-items:center; padding:3px 6px; border-radius:4px; color:var(--label-color); background:var(--label-bg); font-size:10px; font-weight:700; white-space:nowrap; }
.product-card__label--express { color:#fff; background:#7BD29A; }
.product-card__name { min-height:54px; margin:0; padding:4px 12px 2px; color:#756d72; font-size:18px; line-height:1.25; overflow-wrap:anywhere; }
.product-card__name strong { display:block; font:inherit; font-weight:700; }
.product-card__name span { display:block; font:inherit; }
.product-card--category .product-card__name { min-height:0; padding:25px 12px 0; }
.product-card__price { margin:0; padding:10px 12px 24px; color:#9d9598; font-size:17px; line-height:1.3; }
.product-card--category .product-card__price { padding:10px 12px 24px; }
.ranking__more { position:relative; z-index:1; width:56%; max-width:500px; margin:2.5em auto 0; padding:0 0 108px; text-align:center; }
.ranking__more a { display:block; width:100%; padding:.85em 1em; border:1px solid #82737a; border-radius:2em; color:#ff78a5; background:#fff; text-decoration:none; font-size:18px; font-weight:700; line-height:1.4; box-shadow:none; }
.ranking__bottom-art { position:absolute; z-index:0; left:0; bottom:0; width:100%; height:auto; pointer-events:none; }
@media (max-width:700px) {
  .ranking { padding-top:16.09375vw; background:var(--cream); }
  .ranking__head-art { top:0; }
  .ranking__tabs { width:78.125vw; margin:9.375vw auto 9.0625vw; gap:2.1875vw 1.5625vw; }
  .ranking__tabs button { min-width:20.3125vw; min-height:6.25vw; padding:1.1vw 2.8vw; font-size:3.125vw; }
  .ranking__tabs button[data-tab="preschool"],
  .ranking__tabs button[data-tab="school"] { min-width:0; }
  .ranking-panel { margin-bottom:9.0625vw; }
  .ranking-panel::after { margin-top:8.4375vw; }
  .ranking-slider-frame::before { width:3.90625vw; }
  .ranking-slider { padding:0.625vw 0 0 3.90625vw; scroll-padding-left:3.90625vw; }
  .ranking-slider__track { gap:2.34375vw; }
  .ranking-slider__return { flex-basis:calc(17.3984% - 4.6875vw + 96px); font-size:14px; }
  .product-card a { border-radius:2.34375vw; }
  .product-card { padding-top:.625vw; }
  .product-card article > img.product-card__rank { left:1.1vw; top:-.625vw; width:8.75vw; }
  .product-card__description { height:8.59375vw; padding:0 1.1vw 0 10.9375vw; font-size:clamp(11px,3vw,19px); line-height:1.25; }
  .product-card__labels { min-height:7.1875vw; gap:.78vw; padding:2.03125vw 1.875vw 0; }
  .product-card__label { padding:.47vw clamp(3px,1vw,7px); border-radius:.625vw; font-size:clamp(11px,2.7vw,18px); }
  .product-card__labels:has(.product-card__label + .product-card__label) { gap:clamp(4px,1vw,7px); }
  .product-card__labels:has(.product-card__label + .product-card__label) .product-card__label { padding-right:clamp(3px,.7vw,5px); padding-left:clamp(3px,.7vw,5px); font-size:clamp(10px,2.6vw,17px); }
  .product-card__name { min-height:8.4375vw; padding:.625vw 1.875vw .3125vw; font-size:clamp(13px,3.6vw,24px); }
  .product-card--category .product-card__name { min-height:0; padding:3.90625vw 1.875vw 0; }
  .product-card__price { padding:1.875vw 1.875vw 4.21875vw; font-size:3.2vw; }
  .product-card--category .product-card__price { padding:1.5625vw 1.875vw 3.75vw; }
  .ranking__more { padding-bottom:16.875vw; }
}
@media (max-width:640px) {
  .ranking__tabs { width:84%; gap:clamp(10px,2.8vw,18px) clamp(8px,2.2vw,14px); }
  .ranking__tabs button { min-height:clamp(40px,10.5vw,54px); padding:clamp(9px,2.4vw,15px) clamp(10px,2.8vw,18px); font-size:clamp(14px,3.8vw,22px); }
  .product-card { flex-basis:44%; }
  .ranking-slider__return { flex-basis:calc(12% - 4.6875vw + 96px); }
  .product-card article > img.product-card__rank { width:clamp(38px,9.8vw,62px); }
  .product-card__description { height:clamp(36px,9.2vw,59px); padding-left:clamp(44px,11.4vw,73px); font-size:12px; line-height:1.25; }
  .product-card__labels { min-height:clamp(31px,7.8vw,50px); gap:clamp(3px,.78vw,5px); padding:clamp(8px,2.2vw,14px) 1.875vw 0; }
  .product-card__label { padding:clamp(2px,.47vw,3px) clamp(3px,1vw,7px); font-size:clamp(11px,3.1vw,20px); }
  .product-card__labels:has(.product-card__label + .product-card__label) { gap:5px; padding-right:0; padding-left:1.875vw; }
  .product-card__labels:has(.product-card__label + .product-card__label) .product-card__label { padding-right:5px; padding-left:5px; font-size:10px; }
  .product-card__name { min-height:clamp(38px,9.2vw,59px); padding-top:clamp(3px,.625vw,4px); font-size:clamp(13px,4vw,26px); line-height:1.18; }
  .product-card__price { padding-top:clamp(7px,1.875vw,12px); padding-bottom:clamp(15px,4vw,26px); color:#82737a; font-size:clamp(15px,4vw,25px); }
  .product-card--category .product-card__name { padding-top:clamp(16px,4.2vw,27px); }
  .product-card--category .product-card__price { padding-top:clamp(6px,1.6vw,10px); padding-bottom:clamp(15px,4vw,26px); }
}
@media (max-width:374px) {
  .product-card__description { font-size:10px; }
  .product-card--category .product-card__description { letter-spacing:-.04em; }
  .product-card__label,
  .product-card__labels:has(.product-card__label + .product-card__label) .product-card__label { padding-right:3px; padding-left:3px; }
}
@media (min-width:431px) and (max-width:640px) {
  .product-card__labels:has(.product-card__label + .product-card__label) { gap:6px; }
  .product-card__labels:has(.product-card__label + .product-card__label) .product-card__label { padding-right:6px; padding-left:6px; font-size:10px; }
}
@media (min-width:700.01px) {
  .ranking { padding-top:103px; background:var(--cream); --mida-dash-height:2px; }
  .ranking__head-art { top:0; }
  .ranking__tabs { width:500px; margin:60px auto 58px; gap:14px 10px; }
  .ranking__tabs button { min-width:130px; min-height:40px; padding:7px 18px; font-size:20px; }
  .ranking__tabs button[data-tab="preschool"],
  .ranking__tabs button[data-tab="school"] { min-width:0; }
  .ranking-panel { margin-bottom:58px; }
  .ranking-panel::after { margin-top:54px; }
  .ranking-slider { padding:4px 0 0 25px; }
  .ranking-slider::before { width:25px; }
  .ranking-slider__track { gap:15px; }
  .ranking-slider__return { flex-basis:calc(17.3984% + 56px); font-size:14px; }
  .ranking-slider__return a { width:48px; }
  .product-card { padding-top:4px; }
  .product-card a { border-radius:15px; }
  .product-card article > img.product-card__rank { left:7px; top:-4px; width:56px; }
  .product-card__description { height:55px; padding:0 7px 0 70px; font-size:17px; }
  .product-card__labels { min-height:46px; gap:5px; padding:13px 12px 0; }
  .product-card__label { padding:3px 13px; border-radius:4px; font-size:15px; }
  .product-card__labels:has(.product-card__label + .product-card__label) { gap:5px; }
  .product-card__labels:has(.product-card__label + .product-card__label) .product-card__label { padding-right:5px; padding-left:5px; font-size:14px; }
  .product-card__name { min-height:55px; padding:4px 12px 2px; font-size:18px; }
  .product-card--category .product-card__name { min-height:0; padding:25px 12px 0; }
  .product-card__price { padding:12px 12px 27px; font-size:20px; }
  .product-card--category .product-card__price { padding:10px 12px 24px; }
  .ranking__more { padding-bottom:108px; }
}
@media (min-width:641px) {
  .ranking-panel__header h3 { width:62%; min-height:65px; font-size:23px; }
  .ranking-panel__header p { font-size:18px; }
  .ranking-slider__button { display:block; }
}
@media (min-width:768px) {
  .ranking__more { width:40%; max-width:400px; }
}
@media (prefers-reduced-motion:reduce) { .ranking-slider { scroll-behavior:auto; } }