/* ============================================
   受験応援サイト「そうかっ」共通コンポーネント
   新デザインシステム（2026年度下層ページ共通）
   ※ _header.scss / _common.scss / _breadcrumb.scss / _section.scss / _kv.scss
       _showcase.scss / _tag.scss / _card.scss / _typography.scss / _cta.scss
      をCSSに変換。CSS変数 --img-* は styles.php で定義。
   チケット: ESP_SOKA-410
   ============================================ */

/* --- SPヘッダー (.header) --- */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding: 0 0 0 12px;
    display: flex;
    justify-content: space-between;
}
.header-logo {
    margin-top: 0; /* header.css の margin-top: 15px をリセット */
}
.header-logo img {
    display: block;
    margin: 8px 0 9px;
}
.header-logo__text {
    background: #000;
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 100%;
    font-weight: 700;
    padding: 3px 0 4px;
    text-align: center;
}
.burger {
    background-color: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 19px 13px;
    height: 67px;
}
.burger__text {
    width: 40px;
    text-align: center;
}
.burger__text img {
    display: block;
    margin: auto;
}
.burger__btn {
    width: 34px;
    height: 9px;
    position: relative;
}
.burger__btn-item {
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    position: absolute;
}
.burger__btn-item--1 { top: 0; left: 0; }
.burger__btn-item--2 { bottom: 0; left: 0; }

/* --- トップページ専用ヘッダー上書き --- */
.header-logo--top {
    display: flex;
    align-items: center; /* ロゴを上下中央に */
}
.header-logo--top img {
    margin: 0;
}
.burger--dark {
    background-color: #000;
}

/* --- 共通ボタン (.btn) --- */
.btn {
    display: grid;
    place-content: center;
    width: fit-content;
    padding: 12px 47px;
    background: #82FDE9;
    border-radius: 9999px;
    text-align: center;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    font-size: 15px;
    font-weight: 700;
    line-height: 140%;
    box-shadow: 3px 4px 0px var(--accent-blue);
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s ease;
    min-width: 166px;
}
.btn:hover {
    box-shadow: 0 0 0 var(--accent-blue);
    background: var(--accent-blue);
    color: #fff;
    transform: translate(3px, 4px);
}

/* --- パンくず (.breadcrumb) --- */
.breadcrumb {
    margin: 0;
    padding: 16px 16px 0;
    background: #fff;
    list-style: none;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    line-height: 100%;
}
.breadcrumb li:not(:last-child) {
    display: flex;
    align-items: center;
}
.breadcrumb li:not(:last-child)::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background: var(--img-breadcrumb-icon) center center / cover no-repeat;
    margin: 0 4px;
}

/* --- セクション (.section) --- */
.section {
    background: #fff;
    padding: 56px 16px 40px;
    position: relative;
    z-index: 0;
}
.section:has(+ .section) {
    margin-bottom: 40px;
}
.section:has(.kv) {
    padding-top: 40px;
}
.section:has(.area:last-child) {
    padding-bottom: 0; /* エリアが最後の要素のときはエリア自体のpadding-bottomを使う */
}
.section--bg {
    background: var(--img-section-bg) top center / 100% auto repeat-y;
}
.section--bg-flip {
    position: relative;
    z-index: 0;
}
.section--bg-flip::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--img-section-bg) top center / 100% auto repeat-y;
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(-1);
}

/* --- KV (.kv) --- */
.kv {
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.kv::before {
    content: "";
    display: block;
    width: 266px;
    height: 266px;
    background: var(--img-kv-icon) center center / contain no-repeat;
    position: absolute;
    top: 0;
    left: 18px;
    z-index: -1;
}
.kv__label {
    width: fit-content;
    position: relative;
    z-index: 0;
    margin: 5px auto 27px;
    transform: translateX(-3px);
}
.kv__label::before {
    content: "";
    display: block;
    border: 2px solid #000;
    background: #FCFF3A;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: -1;
}
.kv__label-inner {
    padding: 8px 16px;
    background: #fff;
    font-size: 17px;
    line-height: 130%;
    font-weight: 700;
    position: relative;
}
.kv__label-inner::before {
    content: "";
    display: block;
    border: 2px solid #000;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    clip-path: polygon(0 0, 0 100%, 63px 100%, 63px calc(100% - 4px), 80px calc(100% - 4px), 80px 100%, 100% 100%, 100% 0);
}
.kv__label-inner::after {
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 62px;
    transform: rotate(45deg);
    transform-origin: left bottom;
}
.kv__title {
    margin: 0 0 40px;
    font-weight: 700;
    font-size: 38px;
    line-height: 140%;
    text-align: center;
}
.kv__img {
    margin-bottom: 24px;
    display: block;
}
.kv__lead {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    line-height: 180%;
    text-align: center;
}

/* --- ショーケース (.showcase) --- */
.showcase {
    --showcase-color: #000;
    padding: 16px 16px 32px;
    margin: 0 -16px;
    background: var(--showcase-color);
}
.showcase--purple { --showcase-color: #AA48D0; }
.showcase--red    { --showcase-color: #E34D39; }
.showcase--green  { --showcase-color: #32B05E; }

.showcase__title {
    position: relative;
    color: #fff;
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 26px;
    line-height: 140%;
    padding: 32px 0;
    background: var(--img-showcase-icon) top center / 100% auto no-repeat;
}
.showcase__title::before,
.showcase__title::after {
    content: "";
    display: block;
    width: calc(100% + 32px);
    height: 38px;
    background: var(--img-showcase-line) top left / auto 100% repeat-x;
    animation: showcase-scroll 20s linear infinite;
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
}
.showcase__title::after {
    animation-direction: reverse;
    bottom: -22px;
    top: auto;
}
.showcase__img {
    display: block;
    width: 100%;
    position: relative;
}
.showcase__img:has(+ .showcase__button) {
    margin-bottom: -25px; /* ボタンを画像の上に重ねる */
}
.showcase__date {
    background: var(--showcase-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    gap: 1px;
    padding: 0;
    margin: 0 0 16px;
    border-top: 1px solid var(--showcase-color);
}
.showcase__date li {
    background: #fff;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 130%;
    font-weight: 700;
    white-space: nowrap;
}
.showcase__text {
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
    font-size: 17px;
    line-height: 180%;
    font-weight: 700;
}
.showcase__button {
    position: relative; /* 常に相対配置（画像の上に重なるため） */
}
.showcase__button:has(.btn:nth-child(2)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.showcase__button:has(.btn:nth-child(2)) .btn {
    width: 100%;
    padding: 9px;
    min-width: 0;
}

@keyframes showcase-scroll {
    from { background-position: -1000px 0; }
    to   { background-position: 0 0; }
}

/* --- タグ (.tag) --- */
.tag {
    padding: 2px 8px 4px;
    display: inline-block;
    font-size: 14px;
    line-height: 120%;
    background: #FCFF3A;
    border-radius: 100px;
}

/* --- ベーシックカード (.basic-card) --- */
.basic-card:not(:last-child) {
    margin-bottom: 40px;
}
.basic-card:has(+ .basic-card) {
    margin-bottom: 32px;
}
.basic-card:has(+ .h3-title) {
    margin-bottom: 80px; /* デザイン仕様: h3-title の前は広めに */
}
.basic-card__title {
    width: fit-content;
    background: #000000;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #ffffff;
    padding: 8px 16px;
    margin: 0 auto;
}
.basic-card__image {
    position: relative;
    margin-bottom: 8px;
}
.basic-card__image::before {
    content: "";
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    position: absolute;
    inset: 0;
}
.basic-card__image .tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
}
.basic-card__img {
    display: block;
    width: 100%;
    height: auto;
}
.basic-card__body p {
    margin: 0;
}
.basic-card__body p:not(:last-child) {
    margin-bottom: 16px;
}
.basic-card__body p:not(.links) {
    font-size: 15px;
    line-height: 180%;
}

/* --- テキストリンク (.links) --- */
.links {
    margin: 0;
}
.links:not(:last-child) {
    margin-bottom: 40px;
}
.links:has(+ .h4-title) {
    margin-bottom: 56px;
}
.links:has(+ .links),
.links:has(+ .text) {
    margin-bottom: 16px;
}
.links:has(+ .dotted-cta) {
    margin-bottom: 80px;
}
.links a {
    margin-left: auto;
    color: var(--accent-blue);
    font-size: 15px;
    line-height: 120%;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    width: fit-content;
}
.links a::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: var(--img-link-icon) center center / cover no-repeat;
}
.links a:not(:last-child) {
    margin-bottom: 10px;
}

/* --- H2タイトル (.h2-title) --- */
.h2-title {
    position: relative;
    border: 2px dashed #000000;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    text-align: center;
    width: fit-content;
    margin: 0 auto 48px;
    padding: 6px 22px;
    --h2-title-color: #fff;
    background: var(--h2-title-color);
}
.h2-title--green  { --h2-title-color: #DCF9E1; }
.h2-title--blue   { --h2-title-color: #DCF5F9; }
.h2-title--purple { --h2-title-color: #E0DCF9; }
.h2-title--orange { --h2-title-color: #FDECD9; }

.h2-title--shape-pink::before {
    content: "";
    display: block;
    width: 49px;
    height: 43px;
    background: var(--img-h2-shape-pink) center center / cover no-repeat;
    top: -32px;
    right: -23px;
    position: absolute;
    animation: h2-title-scale 1s infinite;
}
.h2-title--shape-red::before {
    content: "";
    display: block;
    width: 41px;
    height: 38px;
    background: var(--img-h2-shape-red) center center / cover no-repeat;
    top: -23px;
    left: -15px;
    position: absolute;
    animation: h2-title-scale 1s infinite;
}
.h2-title--shape-green::before {
    content: "";
    display: block;
    width: 39px;
    height: 30px;
    background: var(--img-h2-shape-green) center center / cover no-repeat;
    top: -18px;
    left: -14px;
    position: absolute;
    animation: h2-title-scale 1s infinite;
}
.h2-title--shape-orange::before {
    content: "";
    display: block;
    width: 66px;
    height: 50px;
    background: var(--img-h2-shape-orange) center center / cover no-repeat;
    top: -24px;
    right: -16px;
    position: absolute;
    animation: h2-title-scale 1s infinite;
}
.h2-title--shape-yellow::before {
    content: "";
    display: block;
    width: 46px;
    height: 32px;
    background: var(--img-h2-shape-yellow) center center / cover no-repeat;
    top: -12px;
    right: 9px;
    position: absolute;
    animation: h2-title-scale 1s infinite;
}

@keyframes h2-title-scale {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}

/* --- 丸図形ベース (.rounded) --- */
.rounded {
    pointer-events: none;
    width: fit-content;
    height: fit-content;
    display: block;
    position: absolute;
    transition: transform 4s linear;
}

/* --- ドット枠CTA (.dotted-cta) --- */
.dotted-cta {
    padding: 0 16px 0; /* 上のスペースは直前要素の margin-bottom で確保 */
    margin: 0 -16px;
}
.dotted-cta:not(:last-child) {
    margin-bottom: 40px;
}
.dotted-cta__inner {
    background: #fff;
    border: 2px dashed #000000;
    padding: 22px 14px;
}
.dotted-cta__title {
    font-size: 17px;
    line-height: 180%;
    font-weight: 700;
    margin: 0 0 24px;
    text-align: center;
}
.dotted-cta__title:has(+ .dotted-cta__text) {
    margin-bottom: 16px; /* テキストが続くときは詰める */
}
.dotted-cta__text {
    font-size: 15px;
    line-height: 180%;
    margin: 0 0 24px;
}
.dotted-cta .links a {
    margin: 0 auto;
}
.dotted-cta .links a:not(:last-child) {
    margin-bottom: 16px;
}

/* --- .lead（リードテキスト）--- */
.lead {
    text-align: center;
    font-size: 15px;
    line-height: 180%;
    margin: 0 0 32px;
}
.h2-title:has(+ .lead) {
    margin-bottom: 24px;
}

/* --- .h3-hr（h3タイトル下の区切り線）--- */
.h3-hr {
    width: 24px;
    height: 8px;
    border: 2px solid #000;
    background: var(--accent-yellow);
    margin: 24px auto;
}

/* --- .h3-title（ブループタイトル）--- */
.h3-title {
    color: var(--accent-blue);
    font-size: 24px;
    line-height: 140%;
    font-weight: 700;
    text-align: center;
    margin: 0 0 40px;
}
.h3-title:has(+ .h3-hr) {
    margin-bottom: 24px; /* デザイン仕様: h3-hr の前は 24px（通常 40px より狭く） */
}
.h3-title small {
    display: block;
    font-size: 0.75em;
}

/* --- .highlight-panel（実績カード）--- */
.highlight-panel:not(:last-child) {
    margin-bottom: 32px;
}
.highlight-panel__title {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    margin: 0;
}
.highlight-panel__body {
    background: var(--accent-blue);
    color: #fff;
    padding: 8px 16px;
    text-align: center;
}
.highlight-panel__body p {
    font-size: 15px;
    line-height: 160%;
    font-weight: 700;
    margin: 0;
}
.highlight-panel__body p:not(:last-child) {
    margin-bottom: 10px;
}
.highlight-panel__body p b {
    font-size: 22px;
    font-weight: 700;
}
.highlight-panel__footer {
    margin-top: 8px;
}
.highlight-panel__footer p {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* --- .accent-cta（OCCTAセクション）--- */
.accent-cta {
    margin: 0 -16px;
}
.accent-cta:not(:last-child) {
    margin-bottom: 24px;
}
.accent-cta__inner {
    padding: 24px 16px;
    background: var(--accent-blue);
    text-align: center;
}
.accent-cta__title {
    font-size: 17px;
    line-height: 180%;
    font-weight: 700;
    text-align: center;
    margin: 0 0 24px;
    color: #fff;
}
.accent-cta__image {
    margin: 0 -16px;
}
.accent-cta__img {
    display: block;
    width: 100%;
    height: auto;
}
.accent-cta:has(.accent-cta__image) {
    position: relative;
}
.accent-cta:has(.accent-cta__image) .btn {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: auto;
}

/* --- .subpage-rounded-group（背景丸図形）--- */
.subpage-rounded-group {
    pointer-events: none;
    position: absolute;
    opacity: 0.5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.subpage-rounded-group--flip {
    transform: scaleX(-1);
}
.subpage-rounded-group__inner {
    height: 1905px;
    margin-bottom: 180px;
    position: relative;
}
.subpage-rounded-group__inner--flip {
    transform: scaleX(-1);
}
.section .rounded--subpage-1 { top: 75px;   right: -114px; }
.section .rounded--subpage-2 { top: 627px;  left: -103px; }
.section .rounded--subpage-3 { top: 824px;  left: 87px; }
.section .rounded--subpage-4 { top: 1251px; right: -77px; }
.section .rounded--subpage-5 { top: 1425px; left: -141px; }

/* --- .btn--white-border（白ボーダーボタン）--- */
.btn--white-border {
    border: 1px solid #fff;
    box-shadow: 3px 4px 0px #fff;
}
.btn--white-border:hover {
    background: #fff;
    color: var(--accent-blue);
    box-shadow: 0 0 0 #fff;
}

/* --- .video-group（動画グループ）--- */
.video-group {
    padding: 24px 16px;
    margin-left: -16px;
    margin-right: -16px;
    background: #F6F9DC; /* デザイン仕様の薄いクリーム黄色 */
}
.video-group:not(:last-child) {
    margin-bottom: 32px;
}
.video-group__title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 17px;
    line-height: 180%;
    font-weight: 700;
}

/* --- .video-card--landscape（横長動画カード）--- */
.video-card--landscape .video-card__screen {
    aspect-ratio: 16 / 9;
}

/* --- .h2-label（h2タイトル前のラベルテキスト）--- */
.h2-label {
    margin: 0 0 32px;
    text-align: center;
    font-size: 15px;
    line-height: 180%;
    font-weight: 700;
}

/* --- .h2-title 追加コンテキストルール --- */
.h2-title:has(+ .basic-card) {
    margin-bottom: 32px; /* デザイン仕様: basic-card の前は 32px */
}

/* --- .number-list（番号付きリスト）--- */
.number-list:not(:last-child) {
    margin-bottom: 32px;
}
.number-list__items {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    counter-reset: number;
}
.number-list__item {
    counter-increment: number;
    background: var(--accent-blue);
    color: #fff;
    padding: 9px 16px;
    min-height: 60px;
    font-size: 15px;
    line-height: 140%;
    font-weight: 700;
    display: flex;
    gap: 10px;
    align-items: center;
}
.number-list__item:not(:last-child) {
    margin-bottom: 1px;
}
.number-list__item::before {
    content: counter(number, decimal-leading-zero);
    font-size: 25px;
    line-height: 100%;
    font-weight: 700;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

/* --- .basic-card 追加コンテキストルール --- */
.basic-card:has(+ .number-list) {
    margin-bottom: 32px; /* デザイン仕様: number-list の前は 32px */
}
.basic-card:has(+ .news-section-title) {
    margin-bottom: 64px; /* デザイン仕様: news-section-title の前は 64px */
}

/* --- .video-group 追加コンテキストルール --- */
.video-group:has(+ .h4-title) {
    margin-bottom: 48px; /* デザイン仕様: h4-title の前は 48px */
}

/* --- .h4-title（小見出し）--- */
.h4-title {
    padding: 15px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: fit-content;
    margin: 0 auto 32px;
    font-size: 19px;
    line-height: 160%;
    font-weight: 700;
}
.h4-title:has(.tag) {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* --- .text（本文テキスト）--- */
.text {
    margin: 0;
    font-size: 15px;
    line-height: 180%;
}
.text:not(:last-child) {
    margin-bottom: 40px;
}
.text:has(+ .links),
.text:has(+ .text) {
    margin-bottom: 16px;
}

/* --- .simple-cards / .simple-card（シンプルカードグリッド）--- */
.simple-cards:not(:last-child) {
    margin-bottom: 40px;
}
.simple-cards--col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
}
.simple-cards--col2 .simple-card {
    grid-template-rows: subgrid;
}
.simple-card {
    display: grid;
    grid-row: span 3;
    gap: 0;
}
.simple-card__image {
    margin-bottom: 8px;
}
.simple-card__img {
    display: block;
    width: 100%;
}
.simple-card__body:not(:last-child) {
    margin-bottom: 8px;
}
.simple-card__title {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 180%;
    font-weight: 700;
}
.simple-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 180%;
}

/* --- .area（エリア背景コンテナ）--- */
.area {
    padding: 40px 0;
}
.area:not(:last-child) {
    margin-bottom: 64px;
}
.area--light-blue {
    /* border-image fill trick: 左右 16px（.section の padding 分）まで背景色を延ばす */
    border-image: linear-gradient(#EEF8FF, #EEF8FF) fill 0 / 0 / 0 16px 0 16px;
}
.area--light-blue:not(:last-child) {
    margin-bottom: 40px; /* light-blue は隣接間隔を狭める */
}
.area--yellow {
    border-image: linear-gradient(var(--accent-yellow), var(--accent-yellow)) fill 0 / 0 / 0 16px 0 16px;
}

/* --- .buttons（ボタンラッパー）--- */
.buttons:not(:last-child) {
    margin-bottom: 40px;
}
.buttons .btn {
    margin: 0 auto;
}

/* --- .image--full（全幅画像）--- */
.image--full {
    margin: 0 -16px 32px;
}
.image img {
    display: block;
    width: 100%;
}

/* --- .h5-title（小小見出し）--- */
.h5-title {
    margin: 0;
    padding-left: 15px;
    font-size: 17px;
    line-height: 180%;
    font-weight: 700;
    position: relative;
}
.h5-title:not(:last-child) {
    margin-bottom: 16px;
}
.h5-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    display: block;
    width: 7px;
    height: 19px;
    border: 2px solid #000;
    background: var(--accent-yellow);
}

/* --- .notice（注記テキスト）--- */
.notice {
    margin: 0;
    background: #fff;
    padding: 7px 12px;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    font-size: 13px;
    line-height: 180%;
}
.notice:not(:last-child) {
    margin-bottom: 16px;
}
.notice:has(+ .h5-title) {
    margin-bottom: 40px;
}

/* --- .text 追加コンテキストルール --- */
.text:has(+ .h4-title) {
    margin-bottom: 56px;
}
.text:has(+ .links),
.text:has(+ .text),
.text:has(+ .notice) {
    margin-bottom: 16px;
}

/* --- .baloon（吹き出し見出し）--- */
.baloon {
    position: relative;
    z-index: 0;
    margin: 0;
}
.baloon:not(:last-child) {
    margin-bottom: 50px;
}
.baloon::before {
    content: "";
    display: block;
    border: 2px solid #000;
    background: #E34D39;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translate(6px, 6px);
}
.baloon__inner {
    border: 2px solid #000;
    background: #F4F4F4;
    padding: 14px;
    font-size: 24px;
    line-height: 150%;
    font-weight: 700;
    text-align: center;
    color: #000;
}
.baloon::after {
    content: "";
    display: block;
    background: #000;
    width: 24px;
    height: 8px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    margin: auto;
}

/* --- .video-card__screen（動画カードスクリーン）--- */
.video-card__screen {
    position: relative;
    aspect-ratio: 170/298;
    border-radius: 12px;
    overflow: hidden;
}
.youtube-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- .rank-card-slider（ランキングカードスライダー）--- */
.rank-card-slider {
    margin: 0 -16px 32px;
}
.rank-card-slider .swiper {
    padding-top: 40px;
}
.rank-card-slider .rank-card {
    transition: transform 600ms ease;
    will-change: transform;
}
.rank-card {
    border: 2px solid #000;
}
.rank-card__title {
    padding: 10px 0 12px;
    text-align: center;
    font-size: 15px;
    line-height: 140%;
    font-weight: 700;
    background: var(--accent-yellow);
    margin: 0;
    min-height: 64px;
    display: grid;
    place-content: center;
}
.rank-card__body {
    font-size: 15px;
    line-height: 140%;
    font-weight: 700;
    padding: 17px 0 16px;
    background: #fff;
    text-align: center;
}
.rank-card__body b {
    font-size: 25px;
}
.rank-card__crown {
    display: block;
    margin: 0 auto;
}

/* --- .illust-cards（イラストカードグリッド）--- */
.illust-cards--col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.illust-cards:not(:last-child) {
    margin-bottom: 40px;
}
.illust-card {
    padding: 16px;
    background: #fff;
}
.illust-card__title {
    font-size: 15px;
    line-height: 140%;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
}
.illust-card__img {
    display: block;
    margin: 0 auto;
    height: 76px;
}

/* --- .message-panel（メッセージパネル）--- */
.message-panel {
    margin: 80px -16px 32px;
}
.message-panel--left .message-panel__inner {
    padding-right: 80px;
}
.message-panel--left .message-panel__text {
    border-right: 2px solid #000;
    padding: 14px 22px 16px 24px;
}
.message-panel--right .message-panel__inner {
    padding-left: 80px;
}
.message-panel--right .message-panel__text {
    border-left: 2px solid #000;
    padding: 14px 24px 16px 22px;
}
.message-panel--orange .message-panel__shape {
    left: 23px;
    top: -53px;
}
.message-panel--purple .message-panel__shape {
    right: 24px;
    top: -60px;
}
.message-panel--blue .message-panel__shape {
    left: 23px;
    top: -40px;
}
.message-panel__inner {
    position: relative;
}
.message-panel__shape {
    pointer-events: none;
    width: fit-content;
    height: fit-content;
    display: block;
    position: absolute;
    transition: transform 4s linear;
}
.message-panel__text {
    border-top: 2px solid #000;
    background: #EEF8FF;
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15px;
    line-height: 180%;
    font-weight: 700;
}

/* --- .round-list（丸ボタンリスト）--- */
.round-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.round-list__item {
    display: grid;
    place-content: center;
    width: 84px;
    height: 84px;
    background: #82FDE9;
    border-radius: 100%;
    text-align: center;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    font-size: 17px;
    font-weight: 700;
    line-height: 120%;
    box-shadow: 3px 4px 0px var(--accent-blue);
}

/* --- .highlight-panel 追加コンテキストルール --- */
.highlight-panel:has(+ .h3-title) {
    margin-bottom: 80px;
}
.highlight-panel:has(.highlight-panel__image) {
    display: grid;
    grid-template-columns: 80px auto;
    gap: 0 16px;
}
.highlight-panel:has(.highlight-panel__image) .highlight-panel__image {
    grid-row: 1 / span 3;
}
.highlight-panel__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- .number-list 追加コンテキストルール --- */
.number-list:has(+ .h3-title) {
    margin-bottom: 64px;
}
.number-list__image {
    margin: 0 -16px -40px;
}
.number-list__img {
    display: block;
    width: 100%;
}

/* --- .video-group 追加コンテキストルール --- */
.video-group:has(+ .h3-title) {
    margin-bottom: 64px;
}