/* ================================================== */
/* ページ汎用 */
/* ================================================== */

/* 色 */
:root {
--common-color-bl:#0075c2;
--common-color-gr:#00a73c;
--common-color-or:#ed6c00;
}
.common-color-bl { color:var(--common-color-bl); }
.common-color-gr { color:var(--common-color-gr); }
.common-color-or { color:var(--common-color-or); }


/* 見出し */
:root {
--content-w:1000px;
--gutter:40px;
}
.page-title { background-color:var(--or-2); color:var(--wh); font-size:24px; text-align:center; line-height:36px; letter-spacing:1.2px; padding:8px 16px; margin-bottom:8px; }
.common-content .page-title { margin-bottom:24px; }

/* 緑の見出し */
.green-title { --bar-h:20px; align-items:center; color:var(--gr); display:flex; font-size:20px; font-weight:900; gap:16px; justify-content:center; line-height:1.4; text-align:center; }
.green-title::before, .green-title::after { background-color:currentcolor; block-size:var(--bar-h); content:""; flex:1 0 24px; }
.green-title::before { border-end-end-radius:calc( var(--bar-h) / 2 ); border-start-end-radius:calc( var(--bar-h) / 2 ); }
.green-title::after { border-end-start-radius:calc( var(--bar-h) / 2 ); border-start-start-radius:calc( var(--bar-h) / 2 ); }

/* オレンジの見出し */
.oranege-title { align-items:center; background-color:var(--or); border-radius:34px; color:var(--wh); display:flex; font-size:18px; font-weight:700; justify-content:center; height:34px; width:100%; }

/* スラッシュの見出し */
.slash-title {
--slash-a:40deg;
--slash-gap:.8em;
--slash-h:1.3em;
--slash-w:.16em;
align-items:center;
color:var(--or);
display:flex;
font-size:20px;
font-weight:900;
gap:calc(var(--slash-gap) + var(--slash-h) * sin(var(--slash-a)) / 2);
justify-content:center;
line-height:1.5;
text-align:center; }
.slash-title::before, .slash-title::after { background:currentColor; block-size:var(--slash-h); border-radius:calc(var(--slash-w) / 2); content:""; flex:none; inline-size:var(--slash-w); }
.slash-title::before { rotate:calc(var(--slash-a) * -1); }
.slash-title::after { rotate:var(--slash-a); }

/* 青い見出し */
.bl-title { align-items:center; background-color:var(--bl); border-radius:34px; color:var(--wh); display:flex; font-size:16px; font-weight:700; justify-content:center; line-height:22px; height:31px; width:100%; }
.bl-title.plan-sp { font-size:14px; }

/* 固定ページベース */
.entry-content { font-size:16px; font-weight:400; text-align:justify; line-height:28px; padding:24px 0 56px 0; margin:auto; max-width:calc( 100% - 40px ); }
.entry-content.standard { display:flex; flex-direction:column; gap:24px; padding:0; margin-bottom:56px; }
.entry-content.standard.wide { max-width:100%; }

/* 汎用ボタン */
.common-button { align-items:center; display:flex; justify-content:center; }
.common-button a { opacity:1; transition:.3s; }
.common-button a:hover { opacity:.7; transition:.3s; }
.common-button img { margin:auto; height:auto; max-width:241px; }

/* オレンジアミカケ */
.frame-deco { background-color:#fff0cd; padding:10px 16px; }

/* 表レイアウト用 */
.table-content { align-items:center; display:flex; flex-direction:column; gap:8px; justify-content:center; margin:auto; }

/* 青いボタン */
.bl-button-page { display:flex; font-size:18px; font-weight:700; text-align:center; line-height:22px; }
.bl-button-page :is(a, button) { align-items:center; background-color:var(--common-color-bl); border-radius:40px; color:var(--wh); display:flex; gap:8px; justify-content:center; transition:.3s; padding:0 16px; margin:auto; height:52px; width:fit-content; }
.bl-button-page :is(a, button):hover { background-color:#eb9500; transition:.3s; }
.button-icon-bl { align-items:center; background-color:var(--wh); border-radius:50%; display:flex; justify-content:center; height:32px; width:32px; }

/* アイコン付きテキスト */
.icon-attention { display:grid; font-size:14px; gap:0 var(--list-gap); grid-template-columns:auto 1fr; line-height:22px; }
.icon-attention::before { content:'※'; }

/* モーダル */
/* display は [open] 側でのみ指定する。ベースに書くと閉じている間も箱が残り、背面の要素が押せなくなる */
.modal { background-color:var(--wh); flex-direction:column; opacity:0; overflow:hidden; transition:opacity .3s, translate .3s, display .3s allow-discrete, overlay .3s allow-discrete; translate:0 16px; margin:auto; max-height:calc( 100svh - 40px ); max-width:min( 800px, calc( 100% - 40px ) ); width:100%; }
.modal[open] { display:flex; opacity:1; translate:0 0; }
.modal::backdrop { background-color:rgb( 35 24 21 / 0 ); transition:background-color .3s, display .3s allow-discrete, overlay .3s allow-discrete; }
.modal[open]::backdrop { background-color:rgb( 35 24 21 / .7 ); }

/* モーダル：本文 */
.modal-body { display:flex; flex-direction:column; font-size:16px; line-height:28px; overflow-y:auto; overscroll-behavior:contain; padding:16px; }

/* モーダル：展開時に背面のスクロールを止める */
body.is-modal-open { overflow:hidden; }

/* モーダル：開きはじめの状態 */
@starting-style {
.modal[open] { opacity:0; translate:0 16px; }
.modal[open]::backdrop { background-color:rgb( 35 24 21 / 0 ); }
}

@container(min-width:960px) {

/* 見出し */
.page-title { font-size:32px; letter-spacing:1.5px; padding:10px 40px; padding-inline:max( var(--gutter), ( 100% - var(--content-w) ) / 2 ); }
.common-content .page-title { margin:40px 0; }

/* 緑の見出し */
.green-title { font-size:24px; }
.green-title br { display:none; }

/* 青い見出し */
.bl-title { font-size:20px; line-height:normal; padding:0 40px; height:37px; width:fit-content; }
.bl-title.plan-sp { font-size:20px; }

/* スラッシュの見出し */
.slash-title { font-size:24px; }

/* 固定ページベース */
.entry-content, .entry-content.standard.wide { font-size:18px; font-weight:400; line-height:29px; padding:40px 0; max-width:890px; }
.entry-content.standard { gap:40px; padding:0; margin-bottom:80px; }

/* 汎用ボタン */
.common-button img { max-width:307px; }

/* オレンジアミカケ */
.frame-deco {padding:24px; }

/* 表レイアウト用 */
.table-content { max-width:485px; }

/* 青いボタン */
.bl-button-page :is(a, button) { gap:16px; padding:0 40px; height:64px; }

/* アイコン付きテキスト */
.icon-attention { font-size:18px; line-height:29px; }

/* モーダル */
.modal { max-height:calc( 100svh - 80px ); }

/* モーダル：本文 */
.modal-body { font-size:18px; line-height:29px; padding:24px; }

}