@charset "UTF-8";
/*
 * TOPスライド（試験日程）: 背景画像の上に青い帯3本と文字を重ねる
 * 帯の位置・サイズは元のPNG（PC 1920x400 / SP 750x600）の実測値を画像に対する % にしたもの。
 * 文字の大きさ・余白は cqw（スライドの幅に対する %）で指定し、画面幅が変わっても画像と同じ比率を保つ。
 *   PC: 1px = 100/1920 cqw = 0.05208cqw
 *   SP: 1px = 100/750 cqw  = 0.13333cqw
 * cqw 非対応の古いブラウザでは、スライドが画面幅いっぱいなので vw で代用する。
 */

.examslide {
    position: relative;
    container-type: inline-size;
}

.examslide > img {
    display: block;
    width: 100%;
    height: auto;
}

.examslide__bands {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flexslider .slides .examslide__band,
.examslide__band {
    position: absolute;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    background: #004fa2;
    color: #fff;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 900;
    line-height: 1;
    text-align: left;
    /* --fit: 文字が帯からはみ出すときに examslide.js が縮める倍率 */
    font-size: calc(var(--font) * var(--fit, 1) * 1vw);
    font-size: calc(var(--font) * var(--fit, 1) * 1cqw);
    padding-left: calc(var(--pad) * 1vw);
    padding-left: calc(var(--pad) * 1cqw);
}

/* 日付: Noto Sans JP は元の小塚ゴシックより数字の幅が狭いので、字間で元のPNGの幅に合わせる
   （PC 2026/10/18 = 121px、SP = 181px。字形の実測から計算） */
.examslide--pc .examslide__date { letter-spacing: 0.029em; }
.examslide--sp .examslide__date { letter-spacing: 0.044em; }

.examslide__week {
    margin-left: 0.25em;
    font-size: 0.72em;
}

.examslide__venues {
    margin-left: 0.95em;
    font-size: 0.9em;
}

/* ---- PC（1920x400）: 帯 x=1080 幅414 / y=172,233,293 高さ53,52,53 ---- */
.examslide--pc .examslide__band {
    left: 56.25%;
    width: 21.5625%;
    --font: 1.0677; /* 20.5px: 数字の高さ 15px ÷ 0.733 */
}
.examslide--pc .examslide__band--1 { top: 43%;    height: 13.25%; }
.examslide--pc .examslide__band--2 { top: 58.25%; height: 13%; }
.examslide--pc .examslide__band--3 { top: 73.25%; height: 13.25%; }

/* ---- SP（750x600）: 帯 x=67 幅616 / y=284,374,464 高さ78 ---- */
.examslide--sp .examslide__band {
    left: 8.933%;
    width: 82.133%;
    --font: 4; /* 30px: 数字の高さ 22px ÷ 0.733 */
}
.examslide--sp .examslide__band--1 { top: 47.333%; height: 13%; }
.examslide--sp .examslide__band--2 { top: 62.333%; height: 13%; }
.examslide--sp .examslide__band--3 { top: 77.333%; height: 13%; }

/* ---- 言語ごとの左の余白（元のPNGの文字の開始位置 - 字形の余白 1px） ---- */
.examslide--pc.examslide--ja .examslide__band { --pad: 1.1458; } /* 22px */
.examslide--sp.examslide--ja .examslide__band { --pad: 4.133; } /* 31px */
.examslide--pc.examslide--en .examslide__band { --pad: 0.4688; } /*  9px */
.examslide--sp.examslide--en .examslide__band { --pad: 1.733; } /* 13px */
.examslide--pc.examslide--cn .examslide__band,
.examslide--pc.examslide--tw .examslide__band { --pad: 1.0417; } /* 20px */
.examslide--sp.examslide--cn .examslide__band { --pad: 3.867; } /* 29px */
.examslide--sp.examslide--tw .examslide__band { --pad: 4; }     /* 30px */

/* 英語の会場名: Noto Sans JP の欧文は元のPNGより幅が広いので、元の会場名の幅（PC 212px）に合わせて小さくする。
   開始位置も元のPNG（PC 帯の左端から 192px）に合わせて余白を広げる */
.examslide--en .examslide__venues { font-size: 0.7em; margin-left: 1.2em; }