/* =========================================================
   0) Base / Reset
========================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
}

/* a11y: screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   1) Carousel (Swiper)
========================================================= */
.carousel-container {
    --slide-h: clamp(450px, 40vh, 520px);
    --pad-block: 40px;
    --pad-inline: 1%;
    --center-w: 56%;
    --side-w: 25%;
    --side-out: -5%;
    --frame-color: #ffc4e3;
    --img-radius: 24px;
}

/* container / slide */
.carousel-container .swiper {
    width: 100%;
    padding: var(--pad-block) var(--pad-inline);
    position: relative;
    overflow: hidden;
    height: var(--slide-h);
}

.carousel-container .swiper-slide {
    width: var(--center-w);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s ease;
    will-change: transform;
    height: 100%;
}

.carousel-container .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2%;
}

.carousel-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--img-radius);
    display: block;
}

/* arrows */
.swiper-button-prev,
.swiper-button-next {
    color: var(--frame-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffffcc;
    border: none;
    font-size: .1px;
    padding: 2.2rem;
    cursor: pointer;
    z-index: 13;
    transition: background .2s;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(217, 9, 110, .2);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #fff;
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

.swiper-button-prev {
    left: -10px;
}

.swiper-button-next {
    right: -14px;
}

/* frames */
.carousel-container.framed {
    position: relative;
    overflow: hidden;
}

.frame-overlay {
    position: absolute;
    inset: var(--pad-block) var(--pad-inline);
    pointer-events: none;
    z-index: 12;
}

.frame {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid var(--frame-color);
    border-radius: 20px;
    box-shadow: 0 0 0 5px rgba(253, 240, 253, .686) inset;
    background: transparent;
}

.frame-center {
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--center-w);
    height: 105%;
}

.frame-left {
    left: var(--side-out);
    width: var(--side-w);
    height: 105%;
}

.frame-right {
    right: var(--side-out);
    width: var(--side-w);
    height: 105%;
}

/* carousel toggle */
.carousel-controls {
    position: absolute;
    top: 1px;
    right: 12px;
    z-index: 14;
}

.carousel-toggle {
    background: #fff;
    border: 2px solid #ffc4e3;
    color: #f387e2;
    border-radius: 999px;
    padding: .4rem .7rem;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(217, 9, 110, .2);
}

.carousel-toggle .play {
    display: none;
}

.carousel-toggle.is-paused .pause {
    display: none;
}

.carousel-toggle.is-paused .play {
    display: inline;
}

.carousel-toggle:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

/* =========================================================
   2) Hero 初回アニメ
========================================================= */
.cloud-header.is-top.do-anim .hero-catch,
.cloud-header.is-top.do-anim .hero-title,
.cloud-header.is-top.do-anim .hero-sub,
.cloud-header.is-top.do-anim .hero-line {
    opacity: 0;
}

.cloud-header.is-top.do-anim .hero-catch {
    animation: fadeIn .8s ease-out .2s forwards;
}

.cloud-header.is-top.do-anim .hero-title {
    animation: fadeUp 1.6s ease-out .6s forwards;
}

.cloud-header.is-top.do-anim .hero-sub {
    animation: fadeIn 1.2s ease-out 2.2s forwards;
}

.cloud-header.is-top.do-anim .hero-line {
    animation: fadeIn .8s ease-out 2.4s forwards;
}

/* =========================================================
   3) Characters（HOMEダイジェスト）
   - アーチ背景
   - カード（影/角丸/白枠トークン）
========================================================= */
.home-characters {
    /* layout */
    margin: 24px 0 32px;
    padding: clamp(12px, 2vw, 20px) 0;
    max-width: min(1200px, 96vw);
    margin-inline: auto;
    position: relative;

    /* arch colors (調整しやすくトークン化) */
    --arch-h: 220px;
    --arch-top: 6px;
    /* 負にするとカードへ食い込む */
    --arch-out: 100px;
    --arch-main: #9dd9f7;
    /* アーチの塗り色 */
    --arch-stripe: #e1f3ff;
    /* ストライプ色 */

    /* cards */
    --card-bg: #fff;
    --card-radius: 14px;
    --thumb-radius: var(--card-radius);
    --card-gutter: 14px;
    /* ← 白枠の幅（リンクのpadding） */
    --card-shadow: 0 1.5px 3px rgba(0, 0, 0, .05), 0 8px 18px rgba(0, 0, 0, .06);
    --card-shadow-hover: 0 3px 6px rgba(0, 0, 0, .06), 0 14px 28px rgba(0, 0, 0, .12);
    --card-shadow-focus: 0 0 0 3px rgba(147, 197, 253, .65);
}

/* arch */
.home-characters::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--arch-out));
    right: calc(-1 * var(--arch-out));
    top: var(--arch-top);
    height: var(--arch-h);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 100% at 50% -10%, var(--arch-main) 0 60%, transparent 61%) top/100% var(--arch-h) no-repeat,
        repeating-linear-gradient(0deg, transparent 0 6px, var(--arch-stripe) 6px 18px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* front elements over arch */
.home-characters h2,
.home-characters .char-digest-grid,
.home-characters .char-more {
    position: relative;
    z-index: 1;
}

/* grid */
.home-characters h2 {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: .02em;
}

.char-digest-grid {
    --card-min: 200px;
    --card-max: 260px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), var(--card-max)));
    justify-content: center;
    gap: clamp(10px, 1.4vw, 18px);
}

/* card */
.char-card {
    position: relative;
    /* 台座影のため */
    width: 100%;
    background: var(--card-bg);
    overflow: visible;
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.char-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

/* 台座影 */
.char-card::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -6px;
    height: 12px;
    filter: blur(10px);
    background: rgba(0, 0, 0, .10);
    opacity: .18;
    border-radius: 999px;
    pointer-events: none;
}

/* link / thumb / title */
.char-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: var(--card-gutter);
    /* ★ 白枠の幅 */
    border-radius: var(--card-radius);
}

.char-card__thumb {
    margin: 0;
    aspect-ratio: 1 / 1;
    background: #f4f6f8;
    border-radius: 50%;
    /* ★ 画像角丸は別トークンで */
    overflow: hidden;
    /* 角丸に沿って画像をクリップ */
}

.char-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* HOMEでは名前を非表示（詳細で出す想定） */
.home-characters .char-card__name {
    display: none;
}

.char-card__link:focus-visible {
    outline: none;
    box-shadow: var(--card-shadow-hover), var(--card-shadow-focus);
    border-radius: var(--card-radius);
}

/* “もっと見る” */
.char-more {
    margin-top: 20px;
    text-align: center;
}

.btn-more {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1px solid #cfd8e3;
    background: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-more:hover {
    background: #f7f9fb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.btn-more:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
    border-radius: 9999px;
}

/* =========================================================
   4) NEWS（お知らせ）
========================================================= */
.top-main .news {
    /* tokens */
    --news-accent: #8ed075;
    --news-bg: #fff;
    --news-border: #cfe8d0;
    --news-radius: 16px;
    --news-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    --news-body: 150px;
    /* ← リストの表示高（スクロール量） */

    position: relative;
    max-width: min(1000px, 94vw);
    margin: 22px auto 28px;
    padding: 22px 22px 18px;
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    border-radius: var(--news-radius);
    box-shadow: var(--news-shadow);
}

/* accent bar */
.top-main .news::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: linear-gradient(90deg, color-mix(in oklab, var(--news-accent), #fff 8%), var(--news-accent));
    border-top-left-radius: var(--news-radius);
    border-top-right-radius: var(--news-radius);
}

/* heading */
.top-main .news>h2 {
    margin: 8px 0 10px;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: .02em;
}

/* list (縦ラインあり／ドットなし) */
.top-main .news ul {
    list-style: none;
    margin: 0;
    padding: 6px 0 0 0;
    position: relative;

    /* スクロールを確実に出す版 */
    height: var(--news-body);
    overflow-y: auto;
    padding-right: 8px;
    /* スクロールバー分 */
    scrollbar-width: thin;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
    /* iOS */
    scrollbar-gutter: stable both-edges;
    /* バー出現で幅ブレ防止 */
}

.top-main .news ul::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: color-mix(in srgb, var(--news-accent), #fff 65%);
    border-radius: 2px;
}

.top-main .news li {
    position: relative;
    padding: 10px 12px 10px 18px;
    border-radius: 12px;
    transition: background .15s ease, box-shadow .15s ease;
}

/* hover */
@media (hover:hover) {
    .top-main .news li:hover {
        background: color-mix(in srgb, var(--news-accent), #fff 92%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06) inset;
    }
}

/* links */
.top-main .news a {
    color: color-mix(in srgb, var(--news-accent), #3a2cff 35%);
    text-decoration-color: color-mix(in srgb, var(--news-accent), #000 30%);
}

.top-main .news a:hover {
    text-decoration-thickness: 2px;
}

/* WebKit scrollbar */
.top-main .news ul::-webkit-scrollbar {
    width: 10px;
}

.top-main .news ul::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--news-accent), #000 20%);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.top-main .news ul::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--news-accent), #fff 85%);
    border-radius: 999px;
}

/* ====== 共通：ホーム下部ブロック（コンテンツ/Shop） ====== */
.home-block {
    --tile-bg: #fff;
    --tile-radius: 14px;
    --tile-gutter: 14px;
    /* 白縁の幅 */
    --tile-shadow: 0 1.5px 3px rgba(0, 0, 0, .05), 0 8px 18px rgba(0, 0, 0, .06);
    --tile-shadow-hover: 0 3px 6px rgba(0, 0, 0, .06), 0 14px 28px rgba(0, 0, 0, .12);

    max-width: min(1200px, 96vw);
    margin: 28px auto 18px;
    padding-inline: clamp(8px, 1vw, 12px);
}

.home-block>h2 {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    letter-spacing: .02em;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
    justify-content: center;
}

.tile-card {
    display: block;
    background: var(--tile-bg);
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    /* バッジ等の基準 */
}

.tile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tile-shadow-hover);
}

.tile-card__thumb {
    display: block;
    margin: var(--tile-gutter);
    border-radius: calc(var(--tile-radius) - 6px);
    overflow: hidden;
    background: #f4f6f8;
}

.tile-card__thumb.is-1x1 {
    aspect-ratio: 1 / 1;
}

.tile-card__thumb.is-16x9 {
    aspect-ratio: 9 / 9;
}

.tile-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile-card__title {
    display: block;
    font-weight: 700;
    padding: 4px 14px 0;
    font-size: 16px;
}

.tile-card__meta {
    display: block;
    padding: 0 14px 14px;
    color: #4b5563;
    font-size: 13px;
}

/* YouTube等：再生バッジ（is-video） */
.tile-card.is-video .tile-card__thumb::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 46px;
    height: 46px;
    right: 18px;
    bottom: 16px;
    background: radial-gradient(#fff 60%, rgba(0, 0, 0, .12) 61%);
    -webkit-mask:
        radial-gradient(circle at 62% 50%, transparent 32%, #000 33%)
        /* 三角 */
        , radial-gradient(#000 70%, transparent 71%);
    /* 円 */
    mask:
        radial-gradient(circle at 62% 50%, transparent 32%, #000 33%),
        radial-gradient(#000 70%, transparent 71%);
    border-radius: 50%;
    pointer-events: none;
}

/* 外部リンクの矢印（ext） */
.tile-card.ext .tile-card__title::after {
    content: "↗";
    margin-left: .4em;
    font-weight: 700;
    font-size: .9em;
    color: #6b7280;
}

/* =========================================================
   5) Keyframes
========================================================= */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* =========================================================
   6) Motion Reduce
========================================================= */
@media (prefers-reduced-motion: reduce) {

    .cloud-header.is-top.do-anim .hero-catch,
    .cloud-header.is-top.do-anim .hero-title,
    .cloud-header.is-top.do-anim .hero-sub,
    .cloud-header.is-top.do-anim .hero-line {
        animation: none;
        opacity: 1;
    }

    .do-anim .hero-catch,
    .do-anim .hero-title,
    .do-anim .hero-sub,
    .do-anim .hero-line {
        animation: none;
        opacity: 1;
    }

    .carousel-container .swiper-slide,
    .swiper-button-prev,
    .swiper-button-next {
        transition: none;
    }
}

/* =========================================================
   7) Responsive (<=600px)
========================================================= */
@media (max-width:600px) {
    .carousel-container {
        --slide-h: clamp(240px, 62vw, 360px);
        --pad-inline: 4%;
        --center-w: 72%;
        --side-w: 15%;
        --side-out: -8%;
    }

    .hero-copy {
        display: none;
    }

    .home-characters {
        max-width: 96vw;
        --arch-h: 220px;
        --arch-top: 0px;
    }

    .char-digest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        justify-content: center;
    }

    /* モバイルは影を少し軽く */
    .home-characters {
        --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 14px rgba(0, 0, 0, .05);
        --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 20px rgba(0, 0, 0, .10);
    }

    .char-more {
        margin-top: 14px;
    }

    /* NEWS: 余白微調整＆表示高少し伸ばす(好み) */
    .top-main .news {
        padding: 18px 16px 14px;
    }

    .top-main .news {
        --news-body: 180px;
    }

    .home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tile-card__title {
        font-size: 15px;
    }

    .tile-card__meta {
        font-size: 12px;
    }
}