/* RISU Drill — main front-end stylesheet */
/* ===== design tokens ===== */
:root {
--rd-primary: #00AEBB;
--rd-primary-dark: #007A83;
--rd-primary-light: #4CC7CF;
--rd-primary-bg: #DFF4F6;
--rd-pink: #FF8FA3;
--rd-text: #1a1a1a;
--rd-text-mute: #555;
--rd-line: #D1D5DC;
--rd-bg-soft: #ECECEC;
--rd-radius: 8px;
--rd-container: 1100px;
--rd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
/* ===== fluid typography scale =====
* clamp(mobile_min, fluid_base + vw, desktop_max)
* 360px〜1100px ビューポートの間で値がなめらかに補間される。
* 最小・最大は rem 基準なのでブラウザの文字拡大も効く。
* 個別箇所のサイズ調整はこのトークンを切り替えて行う。 */
--fs-tiny: clamp(0.625rem, 0.6rem + 0.07vw, 0.6875rem); /* 10 → 11px */
--fs-xs: clamp(0.6875rem, 0.65rem + 0.14vw, 0.75rem); /* 11 → 12px */
--fs-sm: clamp(0.75rem, 0.7rem + 0.14vw, 0.8125rem); /* 12 → 13px */
--fs-base: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem); /* 13 → 14px */
--fs-md: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); /* 14 → 16px */
--fs-lg: clamp(1rem, 0.85rem + 0.41vw, 1.125rem); /* 16 → 18px */
--fs-xl: clamp(1.125rem, 0.95rem + 0.54vw, 1.375rem); /* 18 → 22px */
--fs-2xl: clamp(1.25rem, 1rem + 0.54vw, 1.5rem); /* 20 → 24px */
--fs-3xl: clamp(1.375rem, 1.07rem + 0.81vw, 1.75rem); /* 22 → 28px */
--fs-4xl: clamp(1.5rem, 1.14rem + 1.08vw, 2rem); /* 24 → 32px */
--fs-5xl: clamp(1.5rem, 1rem + 1.89vw, 2.375rem); /* 24 → 38px */
--fs-6xl: clamp(1.625rem, 1.1rem + 2.16vw, 2.625rem); /* 26 → 42px */
--fs-7xl: clamp(1.875rem, 1.3rem + 2.43vw, 3rem); /* 30 → 48px */
/* ===== fluid spacing scale =====
* セクション間マージン / 大型 padding 用。モバイルでは自動的に詰まる。
* 個別の数値調整より、まずこのトークンで賄えないか検討する。 */
--space-xs: clamp(0.75rem, 0.6rem + 0.41vw, 1rem); /* 12 → 16px */
--space-sm: clamp(1rem, 0.75rem + 0.68vw, 1.5rem); /* 16 → 24px */
--space-md: clamp(1.5rem, 1.1rem + 1.08vw, 2rem); /* 24 → 32px */
--space-lg: clamp(2rem, 1.4rem + 1.62vw, 2.5rem); /* 32 → 40px */
--space-xl: clamp(2.5rem, 1.6rem + 2.43vw, 3.75rem); /* 40 → 60px */
--space-2xl: clamp(3rem, 1.8rem + 3.24vw, 5rem); /* 48 → 80px */
--space-3xl: clamp(3.75rem, 2rem + 4.73vw, 7.5rem); /* 60 → 120px */
}
/* ===== reset (light) ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth; /* アンカーリンクでなめらかにスクロール */
}
/* アンカー先の見出しが上端ピッタリにならないよう少し余白を持たせる */
:target,
[id] {
scroll-margin-top: 32px;
}
body {
margin: 0;
font-family: var(--rd-font);
color: var(--rd-text);
font-size: 16px; /* rem の基準。fluid 化しない */
line-height: 1.7;
background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rd-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
/* ===== accessibility: skip link / focus ring / motion ===== */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
background: var(--rd-primary);
color: #fff;
padding: 12px 20px;
border-radius: 4px;
font-weight: 700;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
left: 12px;
top: 12px;
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* キーボード操作時のみフォーカスリング表示。マウスクリックでは出ない */
:focus-visible {
outline: 2px solid var(--rd-primary);
outline-offset: 2px;
border-radius: 3px;
}
/* グローバルナビは背景がプライマリ色なので、フォーカスリングは白に */
.global-nav__list a:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
border-radius: 2px;
}
/* 大きめのボタン類はオフセットを広めに */
.more-link:focus-visible,
.drill-cta__btn:focus-visible,
.toc__toggle:focus-visible,
.error-404__search button:focus-visible,
.pagination .page-numbers:focus-visible {
outline-offset: 4px;
}
/* カード全体がクリック可能な要素では、カードそのものにリングを当てる
* （内側リンクの outline は overflow:hidden や stretched-link の都合で見えない / 小さくなるため） */
.drill-card:has(:focus-visible),
.grade-card:has(:focus-visible),
.unit-card:has(:focus-visible) {
outline: 2px solid var(--rd-primary);
outline-offset: 2px;
}
.drill-card a:focus-visible,
.grade-card a:focus-visible,
.unit-card a:focus-visible {
outline: none;
}
/* 検索ボックスは input ではなくラッパー側を装飾 */
.site-search input[type="search"]:focus,
.site-search input[type="search"]:focus-visible {
outline: none;
}
.site-search__label:focus-within {
border-color: var(--rd-primary);
box-shadow: 0 0 0 2px rgba(0, 174, 187, 0.18);
}
/* OS の「視覚効果を減らす」設定に追従。アニメーション・トランスフォームを抑制 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.drill-card:hover,
.grade-card:hover,
.unit-card:hover {
transform: none;
}
}
.screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px; height: 1px;
overflow: hidden;
}
/* ===== layout ===== */
.site-container {
width: 100%;
max-width: var(--rd-container);
margin: 0 auto;
padding: 0 16px;
}
.site-main {
padding: 0 0 64px;
}
/* ===== header ===== */
.site-header {
position: relative;
z-index: 100; /* モバイルメニューオーバーレイ (.site-mobile-menu z-index:90) より上に重ねる */
background: #fff;
border-bottom: 1px solid var(--rd-line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(8px, 1.5vw, 16px);
padding-top: 12px;
padding-bottom: 12px;
}
.site-logo {
margin: 0;
font-size: 0; /* インライン画像の余白除去のための意図的なゼロ */
line-height: 1;
flex-shrink: 0;
}
.site-logo a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rd-text);
text-decoration: none;
}
.site-logo__img {
display: block;
/* PC 上限 270px、モバイルは画面幅の半分を上限とする */
width: min(270px, 50vw);
height: auto;
}
.site-search {
display: flex;
align-items: center;
flex: 0 1 auto;
}
.site-search__label {
display: flex;
align-items: center;
gap: 8px;
width: clamp(180px, 22vw, 256px);
padding: 0 12px;
background: #fff;
border: 1px solid var(--rd-line);
}
.site-search__icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.site-search input[type="search"] {
border: 0;
background: transparent;
font-size: 16px; /* iOS フォーカス時のズーム防止のため固定 */
padding: 8px 0;
width: 100%;
min-width: 0;
outline: none;
color: var(--rd-text);
}
.site-search input[type="search"]::placeholder {
color: #99A1AF;
font-size: 16px;
}
/* 記事ページ専用: 検索枠の代わりに表示する2つのボタン */
.header-ctas {
display: flex;
align-items: center;
gap: 8px;
}
.header-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.header-cta:hover {
opacity: 0.85;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}
.header-cta--result {
background: #fff;
color: var(--rd-primary);
border: 1px solid var(--rd-primary);
}
.header-cta--official {
background: var(--rd-primary);
color: #fff;
}
.header-cta__icon {
width: 15px;
height: auto;
flex-shrink: 0;
}
/* ===== モバイル専用 UI (ハンバーガー + 公式サイトボタン + パネル) ===== */
.site-header__mobile {
display: none; /* PC では非表示。≤720px で表示 */
align-items: center;
gap: 8px;
margin-left: auto;
}
.header-cta--mobile {
/* SP / タブレットでヘッダー右側に表示する公式サイトボタン
* 画面幅 360〜1100 でフォントとpaddingを連動させ、折返しは禁止する。 */
padding: clamp(5px, 0.946vw + 1.595px, 12px) clamp(8px, 2.162vw + 0.214px, 24px);
font-size: clamp(0.5625rem, 0.35rem + 0.946vw, 1rem); /* 9 @ 360 → 16 @ 1100+ */
line-height: 1.3;
white-space: nowrap;
}
.site-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
color: var(--rd-text);
}
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
display: block;
width: 22px;
height: 2px;
background: currentColor;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__toggle-bars {
position: relative;
}
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
content: '';
position: absolute;
left: 0;
}
.site-header__toggle-bars::before { top: -7px; }
.site-header__toggle-bars::after { top: 7px; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars {
background: transparent;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before {
top: 0;
transform: rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after {
top: 0;
transform: rotate(-45deg);
}
/* モバイルメニューパネル本体（≤1100px ではオーバーレイ表示。JS 側で --mobile-menu-top を設定） */
.site-mobile-menu {
background: #fff;
border-top: 1px solid var(--rd-line);
border-bottom: 1px solid var(--rd-line);
}
.site-mobile-menu[hidden] { display: none; }
@media (max-width: 1100px) {
.site-mobile-menu {
position: fixed;
top: var(--mobile-menu-top, 56px);
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 90;
border-top: 0;
border-bottom: 0;
}
}
/* メニュー展開中は背後のスクロールをロック */
body.menu-open {
overflow: hidden;
}
.site-mobile-menu__inner {
/* .site-container が左右 16px の padding を提供。
* ここでは縦方向のみ。横方向の余白は内側のアイテムごとに個別指定して
* 区切り線 (.site-mobile-menu__grade の border-bottom) が container 端まで届くようにする。 */
padding: 24px 0 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* 検索フォームと CTA ボタンは中央寄せ＋最大幅を設定
* （区切り線付きの学年アコーディオンは container 端まで伸ばすため、こちらだけ別扱い） */
.site-mobile-menu__search,
.site-mobile-menu__cta {
align-self: center;
width: calc(100% - 24px);
max-width: 500px;
}
.site-mobile-menu__search .site-search__label {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 0 12px;
background: #fff;
border: 1px solid var(--rd-line);
}
.site-mobile-menu__search input[type="search"] {
flex: 1;
min-width: 0;
padding: 10px 0;
background: transparent;
border: 0;
outline: none;
font-size: 16px;
}
.site-mobile-menu__cta {
justify-content: center;
/* width: 100% を指定すると左右マージンと合算してコンテナを超えるため、
* flex column の stretch に任せる */
padding: 12px 16px;
}
.site-mobile-menu__nav {
margin: 4px 0 0;
}
.site-mobile-menu__grades {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rd-line);
}
.site-mobile-menu__grade {
border-bottom: 1px solid var(--rd-line);
}
.site-mobile-menu__details summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 12px; /* 文字の左右余白。ボーダーには影響しない */
cursor: pointer;
list-style: none; /* デフォルトの三角を消す */
font-size: var(--fs-lg);
font-weight: 700;
}
.site-mobile-menu__details summary::-webkit-details-marker { display: none; }
.site-mobile-menu__grade-link {
color: var(--rd-text);
text-decoration: none;
flex: 1;
}
.site-mobile-menu__grade-link--solo {
display: block;
padding: 14px 12px;
font-size: var(--fs-lg);
font-weight: 700;
}
.site-mobile-menu__chevron {
width: 12px;
height: 12px;
border-right: 2px solid var(--rd-primary);
border-bottom: 2px solid var(--rd-primary);
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-right: 4px;
}
.site-mobile-menu__details[open] .site-mobile-menu__chevron {
transform: rotate(-135deg);
}
.site-mobile-menu__units {
list-style: none;
margin: 0 0 12px;
padding: 0 12px 8px 28px; /* 左は深めにインデント、右は summary と揃える */
}
.site-mobile-menu__units li {
padding: 6px 0;
}
.site-mobile-menu__units a {
display: block;
padding: 4px 0;
color: var(--rd-text);
text-decoration: none;
font-size: var(--fs-md);
}
.site-mobile-menu__units a::before {
content: '›';
color: var(--rd-primary);
margin-right: 8px;
}
/* 展開後の先頭に表示する「○○のTOPページ」リンク。
* 他の単元リンクと区別するため太字に */
.site-mobile-menu__unit--top {
font-weight: 700;
}
/* ===== ヘッダー: タブレット・モバイル時の表示切替（≤1100px でハンバーガー化）===== */
@media (max-width: 1100px) {
/* PC で出す要素群を隠す */
.site-header__inner > .site-search,
.site-header__inner > .header-ctas,
.global-nav {
display: none !important;
}
/* モバイル / タブレット UI を表示 */
.site-header__mobile {
display: inline-flex;
}
.site-header__inner {
gap: 8px;
padding-top: 12px;
padding-bottom: 12px;
flex-wrap: nowrap;
}
.site-logo {
flex-shrink: 1;
min-width: 0;
}
}
/* ===== global nav ===== */
.global-nav {
background: var(--rd-primary);
color: #fff;
}
.global-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.global-nav__list > li,
.global-nav__list .global-nav__item {
flex: 1; /* 各メニュー項目を均等幅で広げる */
}
/* グロナビ最上位リンク（direct child限定） */
.global-nav__list > .global-nav__item > a {
position: relative; /* z-index 用 */
z-index: 110; /* .global-nav::after (100) より上に置いて、hover bg が末端まで均一に乗るように */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 18px;
text-decoration: none;
font-size: var(--fs-2xl);
font-weight: 600;
}
.global-nav__list > .global-nav__item > a::after {
content: '';
flex-shrink: 0;
width: 18px;
height: 10px;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 11'%3E%3Cpath fill='white' d='M1.68725 0.282423C1.59178 0.192204 1.47947 0.121675 1.35674 0.0748596C1.23401 0.0280437 1.10327 0.00585933 0.971964 0.00957389C0.840662 0.0132885 0.711378 0.0428285 0.591492 0.096507C0.471606 0.150186 0.363467 0.226952 0.273249 0.322423C0.183031 0.417894 0.1125 0.530201 0.0656848 0.652929C0.0188693 0.775658 -0.00331476 0.906405 0.000399588 1.03771C0.00411394 1.16901 0.0336538 1.2983 0.0873325 1.41818C0.141011 1.53807 0.217778 1.6462 0.313249 1.73642L9.31325 10.2364C9.49892 10.412 9.74474 10.5098 10.0002 10.5098C10.2558 10.5098 10.5016 10.412 10.6872 10.2364L19.6882 1.73642C19.7858 1.6468 19.8646 1.53868 19.92 1.41836C19.9754 1.29803 20.0064 1.16789 20.0111 1.0355C20.0158 0.903102 19.9942 0.771092 19.9474 0.647136C19.9007 0.523179 19.8298 0.409745 19.7388 0.313425C19.6479 0.217105 19.5387 0.139816 19.4176 0.0860501C19.2965 0.0322839 19.166 0.00311196 19.0335 0.000227096C18.9011 -0.00265776 18.7694 0.0208036 18.6461 0.0692474C18.5228 0.117691 18.4103 0.190152 18.3152 0.282422L10.0002 8.13442L1.68725 0.282423Z'/%3E%3C/svg%3E") center/contain no-repeat;
transition: transform .2s ease;
}
.global-nav__list > .global-nav__item > a:hover { background: rgba(255,255,255,.12); }
.global-nav__item.has-megamenu:hover > a::after,
.global-nav__item.has-megamenu:focus-within > a::after {
transform: rotate(180deg);
}
/* ===== megamenu（学年ホバー → 単元一覧） ===== */
.global-nav {
position: relative; /* megamenu の位置基準 */
}
/* ナビバー最下部に同色 8px の被せレイヤー（z-index でメガメニューより上）。
* メガメニューが translateY(-8px) で出現するアニメ中、この 8px の中に潜り込んだ部分を
* このレイヤーが隠す → 「ナビの下から出てくる」感を作る。 */
.global-nav::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 8px;
background: var(--rd-primary);
z-index: 100;
pointer-events: none;
}
.global-nav__item.has-megamenu {
position: static; /* megamenu は .global-nav に対して absolute 配置するため */
}
.megamenu {
position: absolute;
top: 100%;
left: 50%;
width: calc(100% - 32px);
max-width: var(--rd-container); /* 1100px */
background: #F7F7F7;
border-radius: 0 0 20px 20px;
padding: 32px 0;
z-index: 50; /* .global-nav::after (100) よりも下 */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
/* hidden state */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%); /* 横方向センターのみ。垂直方向の動きは無し */
transition:
opacity .4s ease,
visibility 0s linear .4s;
}
.global-nav__item.has-megamenu:hover > .megamenu,
.global-nav__item.has-megamenu:focus-within > .megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity .4s ease,
visibility 0s linear 0s;
}
.megamenu__list {
list-style: none;
margin: 0;
padding: 0 32px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px 32px;
}
.megamenu__item {
padding: 0;
}
.megamenu__link {
display: flex;
align-items: flex-start; /* 矢印を1行目の中心に合わせるため上揃え */
gap: 12px;
padding: 12px 8px;
color: var(--rd-text);
text-decoration: none;
font-size: 1.25rem; /* 20px 固定 */
line-height: 1.5;
font-weight: 700;
transition: color .2s ease;
}
.megamenu__link::before {
content: '';
flex-shrink: 0;
width: 9px;
height: 15px;
/* line-height 1.5 × font-size 20px = 30px の行高さ。
* 1行目の中心(15px)に矢印中心を合わせるため上余白 (30 - 15) / 2 = 7.5px */
margin-top: 7.5px;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M0.707 0.707L7.374 7.374L0.707 14.04' stroke='%2300AEBB' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.megamenu__link:hover {
color: var(--rd-primary);
text-decoration: none;
}
@media (max-width: 720px) {
.megamenu { display: none !important; }
}
/* ===== breadcrumb =====
* 折返さず1行で表示し、画面からはみ出る部分は隠す。
* 右端は白へフェードして「続きがある」感を出す。 */
.breadcrumb {
font-size: clamp(0.75rem, 0.613rem + 0.563vw, 1rem); /* 12 @ 390 → 16 @ 1100+ */
color: var(--rd-text-mute);
padding: 12px 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}
.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap; /* 折返し禁止 */
white-space: nowrap; /* テキスト内の改行も禁止 */
gap: 8px 16px;
}
.breadcrumb__item {
flex-shrink: 0; /* 個々の項目を縮めない */
}
.breadcrumb__item:not(:last-child)::after {
content: '';
display: inline-block;
width: 8px;
height: 13px;
margin-left: 16px;
vertical-align: middle;
background-color: var(--rd-primary);
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='black' d='M-8.58307e-06 1.05997L1.06099 -2.86102e-05L6.83999 5.77697C6.93315 5.86954 7.00707 5.97961 7.05752 6.10086C7.10797 6.22211 7.13394 6.35214 7.13394 6.48347C7.13394 6.6148 7.10797 6.74483 7.05752 6.86608C7.00707 6.98733 6.93315 7.0974 6.83999 7.18997L1.06099 12.97L0.000991344 11.91L5.42499 6.48497L-8.58307e-06 1.05997Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='black' d='M-8.58307e-06 1.05997L1.06099 -2.86102e-05L6.83999 5.77697C6.93315 5.86954 7.00707 5.97961 7.05752 6.10086C7.10797 6.22211 7.13394 6.35214 7.13394 6.48347C7.13394 6.6148 7.10797 6.74483 7.05752 6.86608C7.00707 6.98733 6.93315 7.0974 6.83999 7.18997L1.06099 12.97L0.000991344 11.91L5.42499 6.48497L-8.58307e-06 1.05997Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.breadcrumb a {
color: var(--rd-text-mute);
text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
/* ===== drill grid + card ===== */
.drill-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 16px;
margin: 16px 0 32px;
}
/* 1100以下=3列（タブレット）/ 900以下=2列 / 540以下=1列 */
@media (max-width: 1100px) { .drill-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .drill-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .drill-grid { grid-template-columns: 1fr; } }
.drill-card {
border: 1px solid var(--rd-line);
border-radius: var(--rd-radius);
background: #fff;
overflow: hidden;
transition: box-shadow .15s, transform .15s;
}
.drill-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
.drill-card__link {
display: block;
color: inherit;
text-decoration: none;
}
.drill-card__thumb {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: #eee;
}
.drill-card__thumb--placeholder { background: linear-gradient(135deg, #DEF6F4, #C9EFE9); }
.drill-card__body { padding: 16px; }
.drill-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.drill-card__grade,
.drill-card__unit {
display: inline-block;
font-size: var(--fs-xs); /* 11 → 12px */
font-weight: 700;
padding: 3px 10px;
border-radius: 4px;
}
.drill-card__grade {
background: var(--rd-primary);
color: #fff;
}
.drill-card__unit {
background: var(--rd-primary-bg);
color: var(--rd-primary);
}
.drill-card__date {
display: block;
margin: 10px 0 0;
font-size: var(--fs-xs); /* 11 → 12px */
color: #5D5D5D;
}
/* バッジが省略されている時（単元ページなど）は日付の上マージン不要 */
.drill-card__date:first-child {
margin-top: 0;
}
.drill-card__title {
font-size: 1.125rem; /* 18px 固定（h4 扱い） */
font-weight: 700;
margin: 4px 0 0;
line-height: 1.5;
color: var(--rd-text);
}
/* ===== home: grade cards ===== */
.grade-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 16px;
margin: 16px 0 32px;
}
@media (max-width: 720px) { .grade-grid { grid-template-columns: 1fr; } }
.grade-card {
position: relative;
border: 1px solid var(--rd-line);
border-radius: var(--rd-radius);
padding: 20px;
background: #fff;
transition: box-shadow .18s ease, transform .18s ease;
}
.grade-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.grade-card__title {
font-size: clamp(1.25rem, 0.975rem + 1.127vw, 1.75rem); /* 20 @ 390 → 28 @ 1100+ (h3) */
font-weight: 700;
margin: 0 0 8px;
text-align: center;
}
.grade-card__title a { color: var(--rd-text); text-decoration: none; }
/* カード全体クリック化（stretched link） */
.grade-card__title a::after {
content: '';
position: absolute;
inset: 0;
}
.grade-card__desc {
margin: 0;
font-size: var(--fs-lg); /* 16 → 18px */
color: var(--rd-text-mute);
line-height: 1.6;
}
/* ===== unit list ===== */
.unit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
margin: 12px 0 28px;
}
@media (max-width: 720px) { .unit-grid { grid-template-columns: 1fr; } }
.unit-card {
position: relative;
border: 1px solid var(--rd-line);
border-radius: var(--rd-radius);
padding: 20px;
background: #fff;
transition: box-shadow .18s ease, transform .18s ease;
}
.unit-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.unit-card__title {
margin: 0;
text-align: center;
font-size: clamp(1.25rem, 0.975rem + 1.127vw, 1.75rem); /* 20 @ 390 → 28 @ 1100+ (h3) */
font-weight: 700;
line-height: 1.4;
}
.unit-card__title a {
display: block;
color: var(--rd-text);
text-decoration: none;
}
.unit-card__title a::after {
content: '';
position: absolute;
inset: 0;
}
.unit-card__desc {
margin: 8px 0 0;
font-size: var(--fs-lg); /* 16 → 18px（grade-card__desc と同じ） */
color: var(--rd-text-mute);
line-height: 1.6;
}
/* SP のみカードタイトルを左寄せ。PCは中央寄せ維持。
* .grade-card__title / .unit-card__title より後に書くことで上書きが効くようにしている。 */
@media (max-width: 720px) {
.grade-card__title,
.unit-card__title {
text-align: left;
}
}
/* ===== pagination（the_posts_pagination） ===== */
.pagination {
margin: 40px 0 0;
text-align: center;
}
.pagination .screen-reader-text { /* "Posts navigation" の見出し非表示 */ }
.pagination .nav-links {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--rd-line);
border-radius: 8px;
background: #fff;
color: var(--rd-text);
text-decoration: none;
font-weight: 700;
font-size: var(--fs-base); /* 13 → 14px */
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pagination a.page-numbers:hover {
background: var(--rd-primary-bg);
border-color: var(--rd-primary);
color: var(--rd-primary);
text-decoration: none;
}
.pagination .page-numbers.current {
background: var(--rd-primary);
border-color: var(--rd-primary);
color: #fff;
}
.pagination .page-numbers.dots {
border-color: transparent;
background: transparent;
}
/* ===== 404 ===== */
.error-404 {
text-align: center;
padding: 48px 0 32px;
}
.error-404__code {
font-size: clamp(4rem, 2rem + 8vw, 8rem); /* 64 → 128px */
font-weight: 800;
line-height: 1;
margin: 0 0 8px;
color: var(--rd-primary);
letter-spacing: -.04em;
}
.error-404 .entry-title {
margin: 0 0 16px;
}
.error-404__lead {
font-size: var(--fs-md); /* 14 → 16px */
color: var(--rd-text-mute);
line-height: 1.8;
margin: 0 0 32px;
}
.error-404__search {
max-width: 480px;
margin: 0 auto 48px;
}
.error-404__search .search-form {
display: flex;
gap: 8px;
align-items: stretch;
}
.error-404__search .search-form > label {
flex: 1;
min-width: 0;
display: block;
}
.error-404__search input[type="search"] {
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
border: 1px solid var(--rd-line);
border-radius: 8px;
font-size: 16px;
}
.error-404__search button[type="submit"] {
padding: 0 24px;
background: var(--rd-primary);
color: #fff;
border: 0;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}
.error-404__search button[type="submit"]:hover {
background: var(--rd-primary-dark);
}
.error-404__nav {
margin: 0 0 48px;
text-align: left;
}
.error-404__nav .section-heading {
text-align: center;
}
/* 404 の学年カードは説明文がない構造なので h3 のボトム余白を 0 に */
.error-404 .grade-card__title {
margin-bottom: 0;
}
.error-404__home {
margin: 0;
}
/* ===== 問題一覧領域（ページャー下のボーダー） ===== */
.grade-list,
.unit-drills {
padding-bottom: 40px;
border-bottom: 1px solid #D7DAE1;
}
/* ===== "もっと見る" ボタン ===== */
.more-link-wrap {
text-align: center;
margin: 32px 0 0;
}
.more-link {
display: inline-block;
padding: 14px 40px;
background: var(--rd-primary);
color: #fff;
text-decoration: none;
border-radius: 999px;
font-weight: 700;
font-size: var(--fs-md); /* 14 → 16px */
transition: background .15s ease;
}
.more-link:hover {
background: var(--rd-primary-dark);
text-decoration: none;
}
/* ===== section common =====
* .section-heading は 用のデフォルトサイズ（22→36）
* TOPページの h1.section-heading だけ後段でタイトルスケール（24→38）に上書き */
.section-heading {
font-size: clamp(1.375rem, 0.894rem + 1.972vw, 2.25rem); /* 22 @ 390 → 36 @ 1100+ (h2) */
font-weight: 700;
margin: var(--space-md) 0 var(--space-xs);
line-height: 1.4;
}
h1.section-heading {
font-size: clamp(1.5rem, 1.019rem + 1.972vw, 2.375rem); /* 24 @ 390 → 38 @ 1100+ (title) */
}
/* 2個目以降のセクション見出しは前セクションから大きめに空ける */
section + section > .section-heading {
margin-top: var(--space-3xl); /* 60 → 120px */
}
/* ===== single drill / archive header ===== */
.article-banner {
margin: var(--space-xs) 0 0;
}
.article-banner img {
display: block;
width: 100%;
height: auto;
}
/* SP / タブレットでは .site-container の左右 padding (16px) を打ち消して画面いっぱいに */
@media (max-width: 1100px) {
.article-banner {
margin-left: -16px;
margin-right: -16px;
}
}
.entry-header {
margin: var(--space-xl) 0 var(--space-sm); /* 40→60px / 16→24px */
}
.archive-header {
margin: 32px 0 24px; /* TOPの section-heading の上マージンに合わせる */
}
.archive-eyebrow {
margin: 0 0 8px;
font-size: var(--fs-md); /* 14 → 16px */
font-weight: 700;
color: var(--rd-primary);
letter-spacing: .02em;
}
.archive-eyebrow a {
color: inherit;
text-decoration: none;
}
.archive-eyebrow a:hover {
text-decoration: underline;
}
.archive-desc {
margin: 12px 0 0;
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ (p) */
color: var(--rd-text-mute);
line-height: 1.7;
}
.entry-title {
font-size: clamp(1.5rem, 1.019rem + 1.972vw, 2.375rem); /* 24 @ 390 → 38 @ 1100+ */
font-weight: 800;
line-height: 1.4;
margin: 0 0 8px;
}
.entry-title__page {
font-size: var(--fs-lg); /* 16 → 18px */
font-weight: 600;
color: var(--rd-text-mute);
margin-left: .4em;
letter-spacing: .02em;
}
.entry-content {
width: 100%;
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ */
}
.entry-content p { margin: 0 0 1em; }
.entry-content h2 {
font-size: clamp(1.375rem, 0.894rem + 1.972vw, 2.25rem); /* 22 @ 390 → 36 @ 1100+ */
font-weight: 700;
margin: 2.5em 0 .8em;
line-height: 1.4;
}
.entry-content h2:first-child {
margin-top: 0;
}
/* 直接の子 h2 にだけ左アイコン（チェックボックス）を付与する
* - example-section / advice-box 等、内側に入れ子された h2 には付かない */
.entry-content > h2 {
display: flex;
align-items: flex-start; /* 2行以上の時、アイコンを1行目に揃えるため */
gap: clamp(8px, 1.5vw, 16px);
margin-top: var(--space-2xl); /* 48 → 80px */
}
/* entry-content の先頭が h2 のときだけマージン上を 0 にする（目次に隣接する想定）。
* 先頭に
等のテキストが入っているケースでは通常のマージンを保持する。 */
.entry-content > h2:first-child {
margin-top: 0;
}
.entry-content > h2::before {
content: '';
flex-shrink: 0;
/* アイコン (SP 20.5px @ 390 → PC 36px @ 1100+) */
width: clamp(1.281rem, 0.749rem + 2.183vw, 2.25rem);
height: clamp(1.281rem, 0.749rem + 2.183vw, 2.25rem);
/* line-height: 1.4 → 1行目中央は line-box top から ≈0.7em。
* margin-top = 0.7em - 高さ/2 でアイコン中心を 1行目中央に揃える。 */
margin-top: calc(0.7em - clamp(0.641rem, 0.375rem + 1.092vw, 1.125rem));
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37' fill='none'%3E%3Cpath d='M2 2H35V35H2V2Z' stroke='%2300AEBB' stroke-width='4' stroke-linecap='square'/%3E%3Cpath d='M26.75 13L15.75 24L10.25 18.5' stroke='%2300AEBB' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
}
.entry-content h3 {
font-size: clamp(1.25rem, 0.975rem + 1.127vw, 1.75rem); /* 20 @ 390 → 28 @ 1100+ */
font-weight: 700;
margin: 1.8em 0 .6em;
color: var(--rd-text);
}
.entry-content ul,
.entry-content ol {
padding-left: 1.2em;
}
/* ===== 問題詳細ページ専用コンポーネント ===== */
/* --- 例題セクション（薄ティール背景の大きいラッパー） --- */
.example-section {
background: var(--rd-primary-bg);
padding: var(--space-lg) clamp(16px, 3vw, 32px); /* 縦 32→40 / 横 16→32 */
margin: var(--space-xl) 0; /* 40 → 60px */
}
/* SP / タブレットでは .site-container の左右 padding (16px) を打ち消して、
* example-section を画面いっぱいに広げる（背景色の幅いっぱい表示）。
* PC (>1100px) ではコンテナ内に収まるレイアウトを維持。 */
@media (max-width: 1100px) {
.example-section {
margin-left: -16px;
margin-right: -16px;
}
}
.example-section__heading {
margin: 0 0 var(--space-sm); /* 16 → 24px */
font-size: clamp(1.375rem, 1.032rem + 1.408vw, 2rem); /* 22 @ 390 → 32 @ 1100+ */
font-weight: 700;
text-align: left;
color: var(--rd-text);
line-height: 1.4;
}
/* 例題セクション内の problem-card は枠線・角丸なしのフラット仕様 */
.example-section .problem-card {
border: 0;
border-radius: 0;
padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 40px);
}
/* 例題セクション内
* 問1 (problem-card__num) は h3 扱いで SP 20 → PC 28
* 解説の問1 (explanation-card__num) は h4 扱いで SP 18 → PC 28
* .entry-content .problem-card__num (specificity 0,2,0) を上書きするため 0,3,0 で書く。 */
.entry-content .example-section .problem-card__num {
font-size: clamp(1.25rem, 0.975rem + 1.127vw, 1.75rem); /* 20 @ 390 → 28 @ 1100+ */
}
.entry-content .example-section .explanation-card__num {
font-size: clamp(1.125rem, 0.782rem + 1.408vw, 1.75rem); /* 18 @ 390 → 28 @ 1100+ */
}
.example-section .problem-card > p {
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ */
}
/* 例題セクション内の解説 p も通常本文と同じスケールに統一 */
.explanation-block .explanation-card > p {
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ */
}
/* 解説内の問同士の区切り：ボーダー無しで margin で間隔を取る */
.explanation-block .explanation-card {
padding: 0;
border-top: 0;
margin: 0 0 56px;
}
.explanation-block .explanation-card:last-child {
margin-bottom: 0;
}
/* --- 問題カード（個別の「問N」） --- */
.problem-card {
background: #fff;
border: 1px solid var(--rd-line);
border-radius: 8px;
padding: clamp(18px, 3.5vw, 28px) clamp(16px, 3.5vw, 32px);
margin: 0 0 var(--space-xs); /* 12 → 16px */
}
.problem-card:last-child {
margin-bottom: 0;
}
/* セレクタを2クラス重ねて `.entry-content h3` の margin-top を上書き */
.entry-content .problem-card__num {
margin: 0 0 var(--space-md); /* 24 → 32px相当 */
font-size: clamp(1.25rem, 0.975rem + 1.127vw, 1.75rem); /* 20 @ 390 → 28 @ 1100+ (h3) */
font-weight: 700;
color: var(--rd-text);
line-height: 1.4;
}
.problem-card > p {
margin: 0 0 var(--space-xs); /* 12 → 16px */
}
.problem-card > .risu-math--block {
margin: var(--space-md) 0 0; /* 24 → 32px */
}
.problem-card > .risu-math--block math {
font-size: 1.8em; /* 数式を大きく */
}
/* --- 解答と解説セクション --- */
.answer-section {
margin-top: var(--space-2xl); /* 48 → 80px */
}
/* 解答と解説 内の 練習問題 / 応用問題 グループ */
.answer-group {
margin-top: var(--space-lg); /* 32 → 40px */
margin-bottom: var(--space-3xl); /* 60 → 120px */
padding: 0 clamp(16px, 2.5vw, 30px);
border-top: 1px dotted #BEBEBE;
}
.answer-group:last-child {
margin-bottom: 0;
}
.entry-content .answer-group > h3 {
font-size: clamp(1.25rem, 0.838rem + 1.690vw, 2rem); /* 20 @ 390 → 32 @ 1100+ (h3) */
font-weight: 700;
margin-top: var(--space-md); /* 24 → 32px */
line-height: 1.4;
}
.entry-content .answer-group .explanation-card__num {
font-size: clamp(1.125rem, 0.782rem + 1.408vw, 1.75rem); /* 18 @ 390 → 28 @ 1100+ (h4) */
}
.answer-group--practice > h3 {
color: var(--rd-primary);
}
.answer-group--advanced > h3 {
color: #006EB3;
}
/* --- 練習問題 / 応用問題セクション --- */
.practice-problems,
.advanced-problems {
margin-top: var(--space-2xl); /* 48 → 80px */
}
.practice-problems > h2 {
color: var(--rd-primary);
}
.advanced-problems > h2 {
color: #006EB3;
}
.practice-problems .problem-card,
.advanced-problems .problem-card {
border-radius: 0;
border-width: 2px;
padding: clamp(20px, 4vw, 40px);
margin-bottom: var(--space-lg); /* 32 → 40px */
}
.practice-problems .problem-card:last-child,
.advanced-problems .problem-card:last-child {
margin-bottom: 0;
}
.practice-problems .problem-card {
border-color: var(--rd-primary);
}
.advanced-problems .problem-card {
border-color: #006EB3;
}
.practice-problems .problem-card > p,
.advanced-problems .problem-card > p {
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ */
}
/* --- 解説ブロック（例題セクション内のサブセクション） --- */
.explanation-block {
margin: var(--space-xl) 0 0; /* 40 → 60px */
padding-top: var(--space-lg); /* 32 → 40px */
border-top: 1px dotted #BEBEBE;
}
.entry-content .explanation-block__heading {
margin: 0 0 var(--space-sm); /* 16 → 24px */
font-size: clamp(1.25rem, 0.838rem + 1.690vw, 2rem); /* 20 @ 390 → 32 @ 1100+ (h3) */
font-weight: 700;
text-align: left;
color: var(--rd-text);
line-height: 1.4;
}
/* --- 解説カード（例題内の解説 + 解答と解説の各問） --- */
.explanation-card {
padding: var(--space-lg) 0; /* 32 → 40px */
border-top: 1px dotted #BEBEBE;
}
.explanation-card:first-of-type {
border-top: 0;
padding-top: 0;
}
.explanation-card:last-of-type {
padding-bottom: 0;
}
.explanation-card__num {
margin: 0 0 10px;
font-size: var(--fs-lg); /* 16 → 18px */
font-weight: 700;
color: var(--rd-text);
}
.explanation-card > p {
margin: 0 0 12px;
}
.explanation-card > p:last-child {
margin-bottom: 0;
}
/* --- ノートボックス（解説内にネストする参考枠） --- */
.note-box {
background: #fff;
padding: clamp(20px, 4vw, 40px);
margin: var(--space-md) 0 0; /* 24 → 32px */
font-size: clamp(1rem, 0.931rem + 0.282vw, 1.125rem); /* 16 @ 390 → 18 @ 1100+ */
}
.note-box__heading {
margin: 0 0 10px;
/* h5 だが、視認性のため h4 と同等の SP18 → PC22 を適用 */
font-size: clamp(1.125rem, 1.029rem + 0.394vw, 1.375rem); /* 18 @ 390 → 22 @ 1100+ */
font-weight: 700;
color: var(--rd-text);
line-height: 1.4;
}
.note-box > p {
margin: 0 0 8px;
color: var(--rd-text-mute);
}
.note-box ul {
margin: 12px 0 1em;
padding-left: 1.4em;
line-height: 1.8;
}
.note-box ul ul {
margin: 4px 0 0;
padding-left: 1em;
}
.note-box > *:last-child {
margin-bottom: 0;
}
.note-box li {
margin: 0 0 6px;
}
/* --- 学習のアドバイス（記事末尾のボックス） ---
* デザイン: 白背景 + 薄ボーダーのシンプル枠。
* 見出しは中央寄せ、右側に chara01 を 72px で配置。
* 旧デザイン（teal 背景 + 内側白ボックス + 下中央キャラ）は廃止。 */
.advice-box {
background: #fff;
border: 1px solid #E5E5E5;
padding: clamp(20px, 4vw, 40px);
margin: var(--space-3xl) 0 0; /* 60 → 120px */
}
/* タブレット以下でも .site-container の 16px padding を保ち、画面端には貼りつけない */
.entry-content .advice-box__heading {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.5vw, 16px);
margin: 0 0 var(--space-md); /* 24px */
padding-bottom: var(--space-sm); /* 16px */
border-bottom: 1px dashed #D7D7D7;
font-size: clamp(1.5rem, 1.225rem + 1.127vw, 1.75rem); /* 24 @ 390 → 28 @ 1100+ */
font-weight: 700;
color: var(--rd-text);
line-height: 1.4;
text-align: center;
}
.entry-content .advice-box__heading::before {
/* 既存の左アイコン擬似要素を無効化（entry-content > h2 の継承を打ち消す） */
display: none;
}
.entry-content .advice-box__heading::after {
/* 見出し右にキャラクター（72px、上下中央） */
content: '';
flex-shrink: 0;
width: 72px;
aspect-ratio: 434 / 438; /* chara01 の比率を維持 */
background: url('../images/chara01.png') no-repeat center / contain;
}
.advice-box__body {
background: transparent;
padding: 0;
font-size: clamp(1rem, 0.733rem + 1.094vw, 1.25rem); /* 16 @ 390 → 20 @ 1100+ */
}
.advice-box__body h3 {
font-size: clamp(1.125rem, 0.838rem + 1.176vw, 1.5rem); /* 18 @ 390 → 24 @ 1100+ */
font-weight: 700;
margin: var(--space-md) 0 var(--space-xs); /* 上 24px、下 8px */
line-height: 1.4;
}
.advice-box__body > *:first-child,
.advice-box__body > .advice-box__row:first-child > *:first-child {
margin-top: 0;
}
.advice-box__body > p {
margin: 0 0 16px;
}
.advice-box__body ul {
margin: 0 0 var(--space-sm); /* 16px */
padding-left: 1.4em;
line-height: 1.8;
}
.advice-box__body li {
margin: 0 0 12px;
}
.advice-box__body > *:last-child {
margin-bottom: 0;
}
/* 画像を横に並べる時のラッパ（任意）。`.advice-box__row` で text+image を flex 配置。
* タブレット以下では縦スタック。画像が無い場合は使わずに普通に書ける。 */
.advice-box__row {
display: flex;
gap: clamp(16px, 3vw, 32px);
align-items: center;
margin: var(--space-md) 0;
}
.advice-box__row > *:first-child {
flex: 1 1 auto;
min-width: 0;
}
.advice-box__row > img,
.advice-box__row > figure {
flex: 0 0 auto;
max-width: 50%;
height: auto;
}
@media (max-width: 768px) {
.advice-box__row {
flex-direction: column;
align-items: stretch;
}
.advice-box__row > img,
.advice-box__row > figure {
max-width: 100%;
}
}
/* ===== 数式（LaTeX → MathML 変換出力） =====
*