@charset "utf-8";

/***************************************
Ver 2026.02.08-
*************************************** */
:root {
    font-size: 16px; /* 100% */
  /* --- ブランドカラー --- */
  --base-green:   #007f50;   /* 誠実・安定 */
  --base-navy:    #003366;   /* 知的・信頼（HOMEや論理見出し） */
  --base-color:   #007f50; 
  --accent:       #d45a00;   /* 注目・行動（ステップ番号等） */
  --alert-red:    #c0392c;   /* 警告・規律 */

  /* --- テキスト（可読性重視） --- */
  --text-main:    #444444ee;   
  --text-body:    #555555ee; /* 柔らかい黒 */
  --text-muted:   #999999;   /* タイムスタンプ・パンくず */
  --text-white:   #ffffffee; 

  /* --- 背景・面 --- */
  --bg-white:     #ffffff;
  --bg-soft:      #f4f7f5;
  --bg-accent:    #fdf7f2;
  --bg-gray:      #cccccc; 
  --bg-gray-light:#fafafa; 

  /* --- 枠線・装飾 --- */
  --border-light: #eeeeee;
  --border-accent:#d45a00;
  --border-color: #ddd;
  --radius-md:    8px;       /* 角丸の統一ルール */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.05);

  /* --- 横幅・余白（レスポンシブ対応） --- */
  --width-content: 1000px;
  --width-box:     800px;    /* 本文の黄金幅 */
  --width-narrow:  650px;    /* 手続き・補足用 */
  --space-section: clamp(60px, 8vw, 120px); /* セクション間の呼吸 */
  --space-side:    1.5em;    /* スマホ端の余白 */

  /* --- 挙動 --- */
  --transition-base: all 0.3s ease;


}



header ,
footer { color:#fffffffa; background-color: var(--base-color) !important; }


/*-------------------------------
/*　メイン領域
/*　文字サイズ　行高　色初期化
-----------------------------------*/

/* 全体の基本設定 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
    font-size: clamp(1em, 0.95em + 0.25vw, 1.125em); /* フォントサイズは画面幅に応じて16px〜18pxの間で微調整 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8; margin: 0; padding: 0;
    color:var(--text-main); border-color:var(--border-light); background-color:var(--bg-white);
    word-wrap: break-word;
}

section , header , footer{
	position: relative; overflow: hidden;
	display: grid;
	grid-template-columns: 
    [full-start] minmax(8px, 1fr) 
    [main-start] minmax(0, 960px)
	[main-end] minmax(8px, 1fr)
	[full-end];
}

section > * , header > * , footer > * { grid-column: main; }
div.wrap-display , .grid-full{ grid-column: full; }




/*---------------------------------
 文字強調 適宜上書き
/*---------------------------------*/
section strong { font-weight: bold; color: var(--base-color); }
section em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
section b { font-weight: bold; color: inherit; }
section .warning { color: var(--alert-red); }

/*---------------------------------
/*　こまごま
/*---------------------------------*/

span.tips{ font-size: 80%; color:var(--text-muted); }
.warning{ color: var(--alert-red); }

.width-narrow{ max-width: var(--width-narrow);}
.width-small{ max-width: 320px; }

/*---------------------------------
/*　文、箇条書きの行間基本　適宜上書き
/*---------------------------------*/
section p + p{ margin-top: 0.5em; }
section li + li{ margin-top: 0.5em; }



/*---------------------------------
/*　画像
/*---------------------------------*/

picture, img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
picture{ text-align: center; } /* マージンは設定しない */
picture:not(:last-child){ margin-bottom: 1.5em; }

/* flex columnで画像の縦幅を揃える */
.img-align-height picture{ aspect-ratio: 4 / 3; max-height: 240px; overflow: hidden; padding:2em; }
.img-align-height img{ width: 100%; height:100%; object-fit: cover; margin-top: 1em;  }

p + picture{ margin-top: 1.5em; }

/*---------------------------------
/*　TABEL
/*---------------------------------*/
/* 横スクロール */
.table-scroll{ overflow:auto;}
/* htmlに貼る
@media screen and (max-width: 420px) {.table-scroll table#table1 { display:block; white-space:nowrap; padding-bottom: 8px; } }
*/

p + table{ margin-top: 2em;}

table{
    font-size: 0.9em; margin-top: 1.5em;
	font-family:sans-serif;	text-align:left;
	width:fit-content; min-width:300px; overflow: auto; box-sizing:border-box;
	border-collapse:collapse; font-variant-numeric: tabular-nums; border-spacing:0;
}
@media screen and (max-width: 420px) { table { font-size: 80%; } }
table:not(:last-child){ margin-bottom: 1.5em; }

caption{ font-size:0.95em; text-align:left; line-height:1.5; padding-bottom:0.25em; }
caption.pre{ white-space:nowrap; text-overflow: ellipsis; }
th , td{ border:1px solid var(--border-color) ;  box-sizing: border-box; vertical-align: middle; }
th{ padding:0.5em 0.5em; background-color:var(--bg-soft); white-space:nowrap; }
th.wrap{ white-space:normal !important; }
th[scope='row']{ width:auto; }
th[scope='col']{ width:auto; text-align:center; }

.table-col-center td{ text-align:center; }
.table-col-price td{ text-align:right; }
td{ padding:0.5em 0.5em; }

/*　縦文字にするセル */
th.cell-tatemoji ,
td.cell-tatemoji{ padding: 0; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }

/*　注釈（小さくする） */
td.tips{ font-size: 80%; color: var(--text-muted); text-align: left; }
/*　セル内の注釈 折り返す */
td b.tips{ display: block; font-size: 80%; font-weight: normal; }


/*---------------------------------
/*　LIST
/*---------------------------------*/
ul{ margin:1em 0 1em 1.15em; }
ol{ margin:1em 0 1em 1.15em; }
li{ line-height: 1.6;}

/* リストマークなし（マーク分を左詰め）*/
.list-0 ,.ListMark_non{ list-style-type: none; margin-left: 0; }

/* リストマークをアルファベット（使用頻度高） */
.list-a{ list-style:upper-alpha; }
.list-a li::before { content:"" ; margin-right: 0.3vw; }
.list-a li::marker{ font-size: 90%; }

.list-icon{ list-style-type:none; }
.list-icon li{ margin-left:-16px; }
.list-icon li i{ display: inline-block; margin-right: 0.75rem; }

/* リストの中のリスト */
li ul , li ol{ font-size: 95%; margin-top: 0.5em; }
li ul li + li , li ol li + li{ margin-top:0.2em; }



/*---------------------------------
/*　DL
/*---------------------------------*/

dt{ font-size: 1.1em; font-weight: bold; line-height: 1; margin-bottom: 0.75em;  }
dd{ font-size: 0.9em; line-height: 1.6; margin-left: 0.2em; }
dd + dt{ margin-top: 2em; }
dd + dd{ margin-top: 0.5em; }




/*--------------------------------------
ページヘッダー
ピックパス　見出し　タイムスタンプ　概要説明　ショートカットリンク
---------------------------------------- */

.pagetop{ box-sizing: border-box; overflow: hidden; }
.pagetop .time-stamp ~ *:last-child{ margin-bottom: 3em; } /* タイムスタンプの後に何かある場合は下パディングをつける */

.pagetop picture{ margin: 0 auto;}
.pagetop picture img{ margin: 0 auto; }


.pagetop h1{ font-size: 1.5rem; line-height: 1.8; letter-spacing: 0.05em; }
.pagetop h1 b{ display: block; font-size: 60%; padding-top: 0; line-height:calc( 100% + 1.5vw ); }

.topic-path { margin:0.5em 0; }
.topic-path ol {
    display:flex; flex-wrap:wrap; align-items: center; padding:0; margin:0; list-style-type:none;
    font-size: 0.8em; color:var(--text-body); 
}
.topic-path li { display: flex; align-items: center; margin: 0; line-height: 1; }
.topic-path li:not(:first-child)::before { content: ">"; margin: 0 0.6em; color: #ccc; }
.topic-path li a { color:inherit; text-decoration: none; }
.topic-path li a:hover { text-decoration: underline; }
.topic-path li:last-child { display: none; }

.topic-path li:first-child a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; text-decoration: none; padding: 0.3em 0.5em; }

.topic-path li:first-child a::before {
  content: "HOME";
  font-family: 'Verdana', 'Arial', sans-serif; 
  font-size: 0.75rem; font-weight: bold; letter-spacing: 0.05em;
  border: 1px solid var(--base-navy); border-radius: 2px; padding: 0.1em 0.4em; transition: all 0.2s ease;
}
.topic-path li:first-child a:hover::before { background-color: var(--base-navy); color:var(--text-white); }


/* タイムスタンプ全体のコンテナ */
.time-stamp { margin-top: 1em; margin-bottom: 1em; }
.time-stamp ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.time-stamp li { display: block; font-size: 0.8em; color:var(--text-muted); line-height: 1.4; }
.time-stamp li:first-child::before {
  content: "update : "; text-transform: uppercase;
  font-size: 0.9em; letter-spacing: 0.05em; margin-right: 0.3em;
}
.time-stamp li:nth-child(2) { font-size: 0.75em; color: #bbb; }
.time-stamp li:nth-child(2)::before {
  content: ""; text-transform: uppercase; font-size: 0.9em; margin-right: 0.3em; }


/* トップ画の中にH1とタイムスタンプを埋め込み */
.wrap-mv{ position: relative; }
.wrap-mv h1{ position: absolute; top: 0; left: 0; }
.wrap-mv .time-stamp { position: absolute; bottom: 0; right: 0; }


/* リード文 */
.pagetop h1 + .read{ margin-top: calc( 2em + 1vw );}
.pagetop .read{
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5em; text-align: center; margin: 0 auto; max-width: var(--width-narrow);
}
/* --- リンク --- */
.pagetop .read a { color:var(--base-green); text-decoration: underline; }

/* 文字強調 */
.pagetop .read strong { font-weight: bold; color: var(--base-green); }
.pagetop .read em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
.pagetop .read b { font-weight: bold; color: inherit; }
.pagetop .read .warning { color: var(--alert-red); }




/* ---------------------------
<section class="ui-section show-z active">
------------------------------*/
.ui-section{ padding: 5em 0; background-color: var(--bg-soft); }
.ui-section .read{ text-align: center; margin: 0 auto; max-width: var(--width-narrow); }

/* ---------------------------
 <section class="read-section">
------------------------------*/
.read-section{  padding-bottom: calc( 2em + 2vw ); padding-top:calc( 4em + 2vw ); }
.read-section::before{
    position: absolute; left: 25%; right: 25%; margin: 0 auto;
    display:block; content: ""; width: 50%; max-width: var(--width-narrow);
    border-top: 1px dotted var(--base-green);
}

.read-section h2{
    position: relative; margin:0; padding: 0; padding-left: 0.8em;
    font-size: 1.4em; color: var(--text-body); font-weight: 700; line-height: 2.0; letter-spacing: 0.08em; text-align: left;
    border-left: 0.4em solid var(--base-green); 
}

.read-section h2:first-child b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }
.read-section h3 b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }

.read-section p{ letter-spacing: 0.05em; }
.read-section h2 + p{ margin:2em ;}
.read-section p + p{ margin-top: 1em ; }





/* ---------------------------
 <section class="info-section">
------------------------------*/
.info-section{ padding-bottom: 3em; padding-top:4em; }
.pagetop + .info-section{ padding-top: 0;}

/* --- リンク --- */
.info-section a { color:var(--base-green); text-decoration: underline; transition: opacity 0.2s; }
.info-section a[target="_blank"] { color:var(--alert-red); }
.info-section a[target="_blank"]::after { content: " ⧉"; font-size: 0.8em; text-decoration: none; display: inline-block; vertical-align: top; }
.info-section a:hover { opacity: 0.7; text-decoration: none; }
/* 文字強調 */
.info-section strong { font-weight: bold; color: var(--base-green); }
.info-section em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
.info-section b { font-weight: bold; color: inherit; }
.info-section .accent { font-weight: bold; color: var(--accent-red);  border-bottom: 1px dotted var(--accent-red); }
.info-section .warning{ font-weight: bold; color: var(--alert-red);}

.info-section h2{
    font-size: 1.8em; color: var(--text-body); font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: left;
    border-bottom: 1px solid var(--border-color); padding-bottom: 0.5em; margin:0; /* 下マージンはつけない */
}
.info-section h3{
    position: relative; margin: 2em 0 0; /* 下マージンはつけない */
    font-size: 1.4em; color: var(--text-body); font-weight: 700; line-height: 2.0; letter-spacing: 0.08em; text-align: left;
    border-left: 0.3em solid var(--base-green); padding-left: 0.6em;
}
.info-section h2 + h3{ margin-top: 1.5em; }
.info-section h2 + p ,
.info-section h3 + p{ margin-top: 2em; }

.info-section h3 span ,
.info-section h2 span { display: block; font-size: 70%; }
.info-section h3 b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }
.info-section h3 b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }

.info-section h3.br{ margin-top: 4em;}
.info-section h3.br::before{
    position:absolute; content: ""; top:-2.5em; left:0; width: 100%;
    border-top: 1px dotted var(--text-body);
}  

.info-section h4{
    position: relative; margin: 1.5em 0 0; /* 下マージンはつけない */
    font-size: 1.2em; color: var(--text-body); font-weight: 700; line-height: 2.0; letter-spacing: 0.08em; text-align: left;
}


/*---------------------------------
/*　地図
/*  iframe class="gmap"
/*---------------------------------*/
iframe.gmap{ box-sizing: border-box; padding: 4px; margin: 2em auto ; width: 100%; background-color: rgb( 196,196,196 ); }


/* ---------------------------
 グリッド基本 
------------------------------*/
.wrap-grid{ display: grid; grid-template-columns: 1fr; gap: 1.5em; margin: 2em 0; }
@media (min-width: 420px) { .wrap-grid { grid-template-columns: 1fr 1fr; } }
.wrap-grid-image-text { display: grid; gap: 1.5em; align-items: flex-start; margin-bottom: 3em; }
@media (min-width: 40em) { .wrap-grid-image-text { grid-template-columns: 1fr 2fr; } }


/* ---------------------------
 フレックス
 とにかく並べる
------------------------------*/
.wrap-flex{ display: flex; flex-wrap: wrap; gap:1.5em; margin: 2em auto; }
.wrap-flex *{ flex:1;}

/* ---------------------------
 ボックスを縦カラム化（ボタンや画像の位置を揃える）
------------------------------*/
.set-col{ display: flex; flex-direction: column; }
.set-col >:last-child{ margin-top: auto; margin-bottom: 0;}

/* ---------------------------
 フレックスやグリッドのボックス
------------------------------*/
.box-item { font-size: 0.9em; color: var(--text-body);  }
.wrap-grid .box-item{ border: 1px solid var(--border-color); padding: 1.5em; border-radius: 0.3em; }

.box-item h4:first-child ,
.box-item h3:first-child { font-size: 1.2em; color: var(--base-green); font-weight: bold; margin: 0; }
.box-item h4:first-child span ,
.box-item h3:first-child span { display: block; font-size: 0.7em; }
.box-item h4 + p ,
.box-item h3 + p { margin-top: 1em;}


.box-item .btn{ width: 100%; margin-top: auto; margin-bottom: 0; } /* flex-column で下詰めする設定 */
.box-item .btn a {
    display: block; text-align: center; padding: 1em; margin-top: 1em; border-radius: 4px; 
    font-size: 1em; color:var(--text-white); line-height: 1; background: var(--base-green);
    text-decoration: none; font-weight: bold;
}

.box-item picture{ margin: 0; padding: 0; }
.box-item picture + p{ margin-top: 1em; }



/* サブ的なボックス */
.box-item.sub-item {
    font-size: 80%; grid-column: 1 / -1; background-color:var(--bg-soft); filter: saturate(0.7);
    border-left: 4px solid var(--base-green); padding-top: 1em; padding-bottom: 1em; }
.box-item.sub-item h4:first-child span { display: inline-block; margin-left: 0.75em; }
/* サブボックス内のボタンは右下に逃がすと「特別感」が出る */
.box-item.sub-item .btn { width: auto; align-self: flex-end; margin-top: 0; }
.box-item.sub-item .btn a { font-size: 0.9em; margin-top: 0; padding: 0.75em;}



/* ---------------------------
ボックス
------------------------------*/
.boxset1{
    background: var(--bg-soft); border-radius: 0.5em;
    padding: 2em; margin: 1.75em auto;
}
.boxset1 h3 { font-size: 1.1em; color: var(--base-green); font-weight: bold; margin: 0 0 0.5em; }

.boxset2{
    border: 1px solid var(--border-color); background-color: var(--bg-gray-light);
    padding: 1.5em; margin: 1.5em auto;
    width:100%; /* 原因不明のインライン化の暫定対処 */
}
.boxset2 h4:first-child ,
.boxset2 h3:first-child { font-size: 1.1em; color: var(--base-green); font-weight: bold; margin: 0 0 0.5em; }

.boxset2 h4:first-child span ,
.boxset2 h3:first-child span { display: block; font-size: 0.8em; }



/* ボックスに追加するバリエーション */
.boxset2.type-small { font-size: 90%; padding: 1em; }
.boxset2.type-gray { filter: grayscale(100%); }
.boxset2.type1 { border-top: 4px solid var(--base-green); background-color: var(--bg-soft); }

.boxset2.type2 { border-top: 4px solid var(--alert-red); }
.boxset2.type2 h3 { color: var(--text-body); border-color: var(--text-body); }
.boxset2.type3 { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.boxset2.type3 h3 { color: #444; }

.boxset-dot{
    text-align: center; padding: 1.5em; margin: 2em 0;
    border: 2px dashed var(--base-green); border-radius: 0.5em;
}
.boxset-dot p{
    max-width: var(--width-box); margin:0 auto;
    width: fit-content; margin-inline: auto; 
    font-size: 0.9em; text-align: left; line-height: 1.6; letter-spacing: 0.05em;
}

/* グリッドやフレックスを内包するボックス */
.boxset-wrap-grid{
      background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 4px;
      padding: 1.5em;  margin-bottom: 2em;
}


/* 見出し直下の上マージン制御   */
/* ボックス汎用設定の最後に書く */
h2 + .boxset1 ,
h2 + .boxset2
h3 + .boxset1 ,
h3 + .boxset2{ margin-top: 1.5em; }


/* ---------------------------
アコーディオン
.common-sectionの後に書く
------------------------------*/
.acc-wrap{ font-size: 0.9em; width: 100%; max-width: var(--width-box); margin-left: auto; margin-right: auto; }
.acc-contents p{ margin-inline:0; }
.acc-contents ul{ list-style:circle; margin-top: 1.5em; }






/*-----------------------------
移動ボタン

-----------------------------*/
/* 誘導ボタンの共通スタイル */
.nav-gate {
    margin: 2em 0;
    text-align: center;
}

.nav-gate a {
    display: inline-block;
    background-color: #007f50;
    color: #fff;
    text-decoration: none;
    border-radius: 0.3em;
    transition: opacity 0.3s;
}

.nav-gate a:hover {
    opacity: 0.8;
}

/* ページ最下部用（大きめ） */
.nav-gate-main a {
    padding: 1.5em 3em;
    font-size: 1.2em;
    font-weight: bold;
    width: 80%; /* スマホ・PC共通で存在感を出す */
    max-width: 400px;
}

/* ページ途中用（小さめ） */
.nav-gate-sub a {
    padding: 0.8em 2em;
    font-size: 1em;
}

/* テキストリンク型 1行とリスト */
.nav-gate-list ul{ margin: 0 ; padding: 0; list-style: none; }
.nav-gate-list li{ margin: 0 ; padding: 0; list-style: none; line-height: 1; }
.nav-gate-text { margin: 1.5em 0; text-align: left; }
.nav-gate-text-right { margin: 1.5em 0; text-align: right; }


.nav-gate-list a ,
.nav-gate-text a ,
.nav-gate-text-right a {
    display:inline-block;
    color:var(--base-green); text-decoration: none; line-height: 1.5; margin-top: 1em; padding-bottom: 0.05em; background: none;
    border-bottom: 1px dotted var(--base-green); border-radius: 0;
}
.nav-gate-list li::before ,
.nav-gate-text::before ,
.nav-gate-text-right::before {
    display:inline-block; content: "▲"; transform: rotate(90deg);
    font-size: 0.75em; font-weight: bold; color: var(--base-green); margin-right: 0.25em; 
}


/* ボックスの右隅に寄せるボタン */
.nav-gate-btn{
    display: inline-block; width: auto; align-self: flex-end; margin-top: auto; margin-bottom: 0; margin-left: auto; margin-right: 0; 
}
.nav-gate-btn a {
    display:flex; align-items: center; width: fit-content;
    border-radius: 0.3em; transition: opacity 0.3s; text-decoration: none;
    background-color: var(--base-green); color:var(--text-white); 
    font-size: 0.9em; line-height: 1; padding: 0.5em 0.75em; margin-top: 1em;
}
.nav-gate-btn a::before { content: "＞"; font-size: 80%; margin-right: 0.5em; }


/*-----------------------------
ページ下部に設置するナビ
-----------------------------*/
.sub-footer-grid{ margin-top: 2em; border-top: 1px dotted var(--border-color); }
.sub-footer-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap:0 1em; align-items: end; margin: 2em auto; }
.sub-footer-grid li{
    display: block; border-radius: 0.3em; padding: 0;
    font-size: 1em; font-weight: bold; line-height: 1.4; list-style: none; 
    text-align: center; text-decoration: none;
}
.sub-footer-grid li a{ display: block; padding: 1.5em 0.5em; }
.sub-footer-grid ul li:nth-child(1){ background-color:var(--base-green); color:var(--text-white); border: 1px solid var(--base-green); }
.sub-footer-grid ul li:nth-child(2){ color: var(--base-green); border: 1px solid var(--base-green); }
.sub-footer-grid ul li:nth-child(3){
    grid-column: 1 / -1; padding: 0.5em; margin-top: 0;
    font-size: 0.85em; color: var(--text-body); font-weight: normal; text-decoration:underline;
}
/* スマホでは縦に積む */
@media (max-width: 480px) { .sub-footer-grid ul { grid-template-columns: 1fr; gap: 1em; } }







/* --------------------------------
学校リスト
----------------------------------*/
.school-list ul{ display: flex; flex-wrap: wrap; gap:0.5em; align-items: center; margin:1em 0 0; list-style: none; }
.school-list ul + ul { margin-top: 0.75em; }
.school-list li{
    list-style: none; line-height:1; margin: 0 0.4em 0 0; position: relative;
    padding: 0.3em 0 0.3em 0.4em;
}
.school-list li::before { position: absolute; content: ""; top:20%; left: 0; width: 0.4em; height: 0.4em; border-radius: 50%; }
.school-list li.course-a::before { background-color: #007f50; } /* A・B両方：ベースグリーン */
.school-list li.course-b::before  { background-color: #4a90e2; } /* Aのみ：青 */

.school-list-legend{ font-size: 0.6em; }
.school-list-legend ul{ display: flex; gap:1em; list-style: none; margin:-0.5em 0 2em; padding: 0; }
.school-list-legend li{ list-style: none; color: #ffffffcc; line-height: 1; margin: 0; padding:0.5em; border-radius: 3px; }
.school-list-legend li:nth-of-type(1){ background-color: #007f50; }
.school-list-legend li:nth-of-type(2){ background-color: #4a90e2; }

.school-list li.course-z::after {
  content: "※"; margin-left: 0.3em;
  font-size: 0.7em; color:var(--alert-red); font-weight: bold;
}


/* アコーディオン補正 */
.school-list-acc .acc-wrap{ position: relative; font-size: 90%; }
.school-list-acc .acc-wrap{ padding:0; margin: 1em auto; background:var(--bg-soft); border-radius:2px; }
.school-list-acc .acc-wrap .acc-header{ font-size: 1em; color: var(--text-body); margin-bottom: 0; }
.school-list-acc .acc-wrap dt{ font-weight: bold; line-height: 1.5; margin-left: -4px; margin-bottom: 0.5em; }
.school-list-acc .acc-wrap dd + dt{ margin-top: 1em; }
.school-list-acc .acc-wrap dd{ line-height: 1.5; margin:0; }
.school-list-acc .acc-wrap p + p{ margin-top: 0.5em;}


/*-----------------------------
指導方針
<section class="common-section">
<h2>03. 定着の技術：理解を証明する「逆授業」</h2>
-----------------------------*/

.cycle-container { font-size: 90%; margin: 2em auto 0; counter-reset: step-counter; }
.cycle-step {
    position: relative; border: 1px solid var(--border-color); padding: 1.5em 1.5em;
    border-radius: 0.5em; background:var(--bg-white);
}
div + .cycle-step{ margin-top: 1.5em; }

.cycle-step h3 ,
.cycle-step .step-label ,
.cycle-step p{ margin-left: 2.5em; }


.cycle-step:not(:last-child)::after {
    content: "↓"; position: absolute; bottom: -1.3em; left: 1.6em; 
    font-size: 1.2em; color: var(--base-green); font-weight: bold;
}
.cycle-step::before {
    counter-increment: step-counter; content: counter(step-counter);
    font-size: 0.75rem; font-weight: bold;
    position: absolute; left: 1em; top: 1em; width: 1.8em; height: 1.8em;
    background: var(--base-green); color:var(--bg-white); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cycle-step .step-label {
      display:inline-block; border-radius: 1em;
      font-size: 0.75em; padding: 0.1em 0.8em;
      background:var(--bg-white); border: 1px solid var(--base-green); color: var(--base-green);
}

.cycle-step h3 { font-size: 1.1em; font-weight: bold; margin-top: 0.5em; margin-bottom: 1.25em; }

/* --- 画像を挿入する --- */
.cycle-step .grid-img{ display: grid; grid-template-columns: 1fr 1fr; gap:calc( 0.5em + 0.5vw ); margin:1.5em 1.5vw 0; }
/*
@media (min-width: 1em) { .cycle-step .grid-img { grid-template-columns: 1fr 1fr; } }
*/

.cycle-step .grid-img img{ height: 100%; object-fit: cover; padding: calc( 2px + 0.1vw ); background-color: var(--bg-gray); box-shadow: var(--shadow-sm);  }
.cycle-step .grid-img picture{ margin:0; }




/*-----------------------------
合格実績
<section class="result-section">
-----------------------------*/

/* ピックアップ */
.result-picup .item{ border-bottom: 1px solid var(--border-color); padding-bottom: 1.5em; }
.result-picup .item h3{
    font-size: 1.6em; font-family: serif; font-weight: 700; line-height: 1.5; margin: 0; padding: 0.2em 0.5em;
    background-color: var(--base-green); color: var(--text-white);
}
.result-picup .item h3 b{ display: block; font-size:60%; }
.result-picup .item p{ padding-left: 1em; border-left: 2px solid var(--base-green); }

.result-picup .item picture { width: 100%; height: auto; margin: 1em auto; padding: 0; }
.result-picup .item img { width: 100%; height: auto; margin: 0; padding: 0; }

/* 羅列 */
.result-section .wrap-grid-image-text{
    margin: 0 auto;
    padding-bottom: 2em; padding-top: 2em;
    border-bottom: 1px solid var(--border-color);
}
.result-section .wrap-grid-image-text:first-of-type{ border: none; margin-top: 1em; }



/*-----------------------------
過去問
-----------------------------*/

.study-flow{ border: 1px solid var(--border-color); padding: 1.5em; margin-bottom: 2em; }

.study-flow dl{ margin-left: 5em; } 

.study-flow dt{
    position: relative; display: flex; align-items: center;
    font-size: 1.1em; font-weight: bold; line-height: 1; margin-bottom: 0.5em; 
}
.study-flow dt b{
    position: absolute; top: 0; left: -6em; width: 5em;
    font-size: 80%; text-align: center; padding: 0.2em 0.8em;
    background: var(--base-green); color:var(--text-white); border-radius: 3px; height: fit-content;
}
.study-flow dd{ font-size: 0.9em; }

.study-flow dd + dt{ margin-top: 2em; }

.study-flow dd + dt::before{
    position: absolute;
    display: block; content: ""; width:calc( 100% + 5em ); left: -5em;
    border-top: 1px solid var(--border-color);
    margin-top: -3em;
}


/*-----------------------------
申し込みのながれ
<section class="cta-section">
-----------------------------*/
.cta-section{ padding: 4em 0; }
.cta-section h2{
    font-size: 1.8em; color: var(--text-body); font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: left;
    border-bottom: 1px solid var(--border-color); padding-bottom: 0.5em; margin-bottom: 1.5em;
}

.cta-section .arrow{ text-align: center; color: #ddd; font-size: 1.2em; margin: 1em auto; }
.cta-section .arrow::before{ content: "▼"; }

.box-flow{
    width: 100%; max-width:var(--width-narrow); padding: 1.5em; margin: 0 auto; 
    border: 1px solid var(--border-color); background-color:var(--bg-white); border-radius: 8px; 
}

.box-flow h3{
    margin-top: 0; color: var(--base-green); font-size: 1.25em; margin-bottom: 1em;
}
.box-flow h3 span{
    display: inline-block; background: var(--base-green); color: var(--bg-white);
    padding: 0.2em 0.5em; border-radius: 4px; margin-right: 0.5em; font-size: 0.9em;
}
.box-flow p{ text-align: left; margin-inline:0; }
.box-flow ul{ list-style: none; padding: 0; margin: 2em; }
.box-flow ul.listmark-type1{ margin-left: 1em; } 
.box-flow ul.listmark-type1 li::before{ content: "・"; font-size: 0.8em; margin-right: 0.5em;  vertical-align: middle;  } 

.box-flow p:last-child{ color: var(--text-muted); font-size: 0.8em;}
.box-flow p:last-child::before{ content:"※"; margin-right: 0.25em; }

.box-flow ul.listmark-type2{ margin-left: 0.5em; } 

.box-flow dl{
    font-size: 0.95em; margin:1.2em 0 1em; padding: 1em;
    background-color:#f6f6f6; border-left: 4px solid #ccc; 
}
.box-flow dt{ font-weight: bold; }
.box-flow dt::before{ content: "【"; margin-right: 0.2em; margin-left: -0.5em; }
.box-flow dt::after{ content: "】"; margin-left: 0.2em; }

.section-flow .box-camp{
    max-width: var(--width-box); margin: 2em auto; padding: 1.5em;
    background-color: var(--bg-accent); border: 2px dashed var(--accent); border-radius: 8px;
}
.section-flow .box-camp h3{
    font-size: 1.1em; color:var(--accent); text-align: center;
    margin: 0 auto 1em;
}
.section-flow .box-camp h3::before{ content: "【"; margin-right: 0.2em; }
.section-flow .box-camp h3::after{ content: "】"; margin-left: 0.2em; }

.section-flow .box-camp p:last-child{ color: var(--text-muted); font-size: 0.9em;}
.section-flow .box-camp p:last-child::before{ content:"※"; margin-right: 0.25em; }

/*-----------------------------
LINE
<section class="common-section section-flow">
-----------------------------*/

.cta-line{
    position: relative;
    max-width: var(--width-narrow); margin: 3em auto; 
    padding: 3em 1.5em; text-align: center;
    background-color:var(--bg-soft); border: 0.05em solid #444; color: #333;
}

.line-assets { 
    position: relative;
    display: flex; flex-wrap: wrap; justify-content:space-evenly; align-items: center; gap: 20px;
    max-width: var(--box-width); margin: 20px auto; padding: 10px 15%;
}
.line-assets a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0; }
.line-assets a:hover{ opacity: 0;}
.line-assets picture { flex: 1; max-width: 100px; }
.line-assets p { flex-basis: 100%; font-size: 0.8em; margin: 0 auto; text-align: center; }

/* コピペ用ボックス */
.copy-box {
    text-align: left; margin-top: 2.5em; padding: 1.5em;
    background-color: rgba(255, 255, 255, 0.5); border: 0.05em solid #ccc; border-radius: 0.2em;
}
.copy-box h4 { font-size: 0.9em; color: #444; font-weight: bold; text-align: center; margin-bottom: 1em; }

/* コピー元のテキストエリア */
#copy-target {
    width: 100%; max-width: 600px; margin: 0 auto; height: 6em; resize: none;  padding: 1em;
    font-family: inherit; font-size: 0.8em; line-height: 1.6; color: #555;
    background-color: #fcfcfc; border: 0.05em solid #ddd; border-radius: 0.2em;
}
.btn-copy {
    display: block; width: 100%; margin-top: 1em; padding: 1em;
    background-color: #06C755; color: #fff; border: none; border-radius: 0.2em;
    font-weight: bold; cursor: pointer; transition: opacity 0.2s;
}
.btn-copy:hover { opacity: 0.8; }
#copy-target:focus { outline: none; border-color: #ccc; }

.btn-policy{
    width: fit-content; margin-inline: auto; text-align: center;
    font-size: 0.7em; color: var(--text-muted); text-decoration: underline;
    margin-top: 1em; cursor: pointer;
}


/* Dialog Styling */
/* ダイアログが表示された時のスタイルを強制する */
.close-btn button { all: unset; cursor: pointer; }
.close-btn button:focus, .close-btn button:focus-visible { outline: none !important; box-shadow: none !important; }
.close-btn button::-moz-focus-inner { border: 0 !important; padding: 0 !important; }
.close-btn button::-webkit-focus-inner { border: 0 !important; padding: 0 !important; }
dialog[open] {
    display: block; position: fixed; top: 50%; left: 50%; z-index: 9999;
    transform: translate(-50%, -50%); margin: 0;
    font-size: 0.8em;
}
#policy-dialog {
    background: #1a1a1a; color: #ffffffcc;
    border: 1px solid var(--bg-gray);
    padding: 2em; max-width: 90%;
}
#policy-dialog .close-btn { text-align: center; margin-top: 1em; border: 1px solid #ffffffaa; }
#policy-dialog .close-btn button{ width: 100%;}




/*-----------------------------
サイトマップのセクション
<section class="info-section">
<nav class="sitemap">
-----------------------------*/
h2 + .sitemap{ margin-top: 2em; }


.sitemap{ display: flex; flex-wrap: wrap; gap:calc( 0.5em + 1vw ); }

.sitemap nav{
    position: relative; flex:1 ; font-size: 0.9em;
    border: 1px solid var(--border-color); border-radius: 2px; padding: 1.5em;
}
.sitemap h3{
    font-size: 1em; margin: 0 0 0.75em;
    color: var(--text-body); border-color: var(--text-body); }

.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap ul + ul { margin-top: 1em; }

.sitemap li{ list-style: none; margin: 0 0 0 0.25em;  padding: 0; }
.sitemap li a{ display: block; }
.sitemap li a::before {
    display:inline-block; content: "▲"; transform: rotate(90deg);
    font-size: 0.75em; font-weight: bold; color: var(--base-green); margin-right: 0.25em;
}
.sitemap li.top a::before { content: "◆"; font-size: 1.2em; margin-left: -0.25em; }
.sitemap li + li { margin-top: 0.5em; }



/* ------------------------------------------------------
切り替えタブ
   ------------------------------------------------------ */
#show .show-c ,
#show .show-b ,
#show .show-a ,
#show .show-x ,
#show .show-z { display: none; }

#show.show-a > .show-a { display: block; }
#show.show-b > .show-b { display: block; }
#show.show-c > .show-c { display: block; }
#show.show-z > .show-z { display: block; }

/* 初期表示 */
#show.show-z{ display: block; }

.selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 3em auto; }
.selector .btn {
    position: relative; cursor: pointer; transition: all 0.3s;
    color: var(--base-green); border: 1px solid var(--base-green); background: transparent;
    font-size: 0.8em;
    padding: 1.5em 1.5em;
    display: flex; flex-direction: column; gap: 0.25em;
}
.selector .btn b { display: block; font-size: 150%; letter-spacing: 0.1em; color:var(--base-green); }
.selector .btn.active { background: var(--base-green); color: var(--text-white); }
.selector .btn.active b { color:var(--text-white); }