/* ============================================================
   文字装飾関係（クエリコンテナ対応）
   ------------------------------------------------------------
   【2025/11/23】common.css へ移管
   ・bodyをクエリコンテナとして設定（base.css）
   ・PCでは640px幅で中央寄せ（body幅 max-width: 640px;）
   ・余白・フォントサイズはcqw単位で調整
   ------------------------------------------------------------ */

/* -----------------------------------
   マージン・パディング 設定
   ----------------------------------- */
/* 上マージン
.mt_05cqw	{ margin-top:5cqw; }
.mt_10cqw	{ margin-top:10cqw; }
 */
/* 全体パディング
.P_02cqw	{ padding:2cqw; }
.P_03cqw	{ padding:3cqw; }
.P_04cqw	{ padding:4cqw; }
.P_05cqw	{ padding:5cqw; }
.P_06cqw	{ padding:6cqw; }
.P_07cqw	{ padding:7cqw; }
.P_08cqw	{ padding:8cqw; }
.P_09cqw	{ padding:9cqw; }
.P_10cqw	{ padding:10cqw; }
.P_11cqw	{ padding:11cqw; }
.P_12cqw	{ padding:12cqw; }
.P_13cqw	{ padding:13cqw; }
.P_14cqw	{ padding:14cqw; }
.P_15cqw	{ padding:15cqw; }
 */
/* 上下パディング
.Ptb_01cqw	{ padding:1cqw 0; }
.Ptb_015cqw	{ padding:1.5cqw 0; }
.Ptb_024cqw	{ padding:2.4cqw 0; }
.Ptb_03cqw	{ padding:3cqw 0; }
.Ptb_035cqw	{ padding:3.5cqw 0; }
.Ptb_04cqw	{ padding:4cqw 0; }
.Ptb_05cqw	{ padding:5cqw 0; }
.Ptb_06cqw	{ padding:6cqw 0; }
.Ptb_07cqw	{ padding:7cqw 0; }
.Ptb_08cqw	{ padding:8cqw 0; }
.Ptb_09cqw	{ padding:9cqw 0; }
.Ptb_10cqw	{ padding:10cqw 0; }
.Ptb_11cqw	{ padding:11cqw 0; }
.Ptb_12cqw	{ padding:12cqw 0; }
.Ptb_13cqw	{ padding:13cqw 0; }
.Ptb_14cqw	{ padding:14cqw 0; }
.Ptb_15cqw	{ padding:15cqw 0; }
 */
/* 左右パディング
.Prl_01cqw	{ padding:0 1cqw; }
.Prl_02cqw	{ padding:0 2cqw; }
.Prl_03cqw	{ padding:0 3cqw; }
.Prl_035cqw	{ padding:0 3.5cqw; }
.Prl_04cqw	{ padding:0 4cqw; }
.Prl_05cqw	{ padding:0 5cqw; }
.Prl_06cqw	{ padding:0 6cqw; }
.Prl_07cqw	{ padding:0 7cqw; }
.Prl_08cqw	{ padding:0 8cqw; }
.Prl_09cqw	{ padding:0 9cqw; }
.Prl_10cqw	{ padding:0 10cqw; }
.Prl_11cqw	{ padding:0 11cqw; }
.Prl_12cqw	{ padding:0 12cqw; }
.Prl_13cqw	{ padding:0 13cqw; }
.Prl_14cqw	{ padding:0 14cqw; }
.Prl_15cqw	{ padding:0 15cqw; }
 */
/* 上パディング
.Pt_01cqw	{ padding-top:1cqw; }
.Pt_02cqw	{ padding-top:2cqw; }
.Pt_03cqw	{ padding-top:3cqw; }
.Pt_04cqw	{ padding-top:4cqw; }
.Pt_05cqw	{ padding-top:5cqw; }
.Pt_06cqw	{ padding-top:6cqw; }
.Pt_07cqw	{ padding-top:7cqw; }
.Pt_08cqw	{ padding-top:8cqw; }
.Pt_09cqw	{ padding-top:9cqw; }
.Pt_10cqw	{ padding-top:10cqw; }
.Pt_11cqw	{ padding-top:11cqw; }
.Pt_12cqw	{ padding-top:12cqw; }
.Pt_13cqw	{ padding-top:13cqw; }
.Pt_14cqw	{ padding-top:14cqw; }
.Pt_15cqw	{ padding-top:15cqw; }
 */
/* 下パディング
.Pb_01cqw	{ padding-bottom:1cqw; }
.Pb_02cqw	{ padding-bottom:2cqw; }
.Pb_03cqw	{ padding-bottom:3cqw; }
.Pb_04cqw	{ padding-bottom:4cqw; }
.Pb_05cqw	{ padding-bottom:5cqw; }
.Pb_06cqw	{ padding-bottom:6cqw; }
.Pb_07cqw	{ padding-bottom:7cqw; }
.Pb_08cqw	{ padding-bottom:8cqw; }
.Pb_09cqw	{ padding-bottom:9cqw; }
.Pb_10cqw	{ padding-bottom:10cqw; }
.Pb_11cqw	{ padding-bottom:11cqw; }
.Pb_12cqw	{ padding-bottom:12cqw; }
.Pb_13cqw	{ padding-bottom:13cqw; }
.Pb_14cqw	{ padding-bottom:14cqw; }
.Pb_15cqw	{ padding-bottom:15cqw; }
 */
/* 左パディング
.Pl_4cqw	{ padding-left:4cqw; }
 */
/* 右パディング
.Pr_10cqw	{ padding-right:10cqw; }
 */
/* -----------------------------------
   フォントサイズ 設定
   -----------------------------------
.fs_20cqw	{ font-size:2cqw; }
.fs_22cqw	{ font-size:2.2cqw; }
.fs_24cqw	{ font-size:2.4cqw; }
.fs_26cqw	{ font-size:2.6cqw; }
.fs_28cqw	{ font-size:2.8cqw; }
.fs_30cqw	{ font-size:3cqw; }
.fs_32cqw	{ font-size:3.2cqw; }
.fs_34cqw	{ font-size:3.4cqw; }
.fs_36cqw	{ font-size:3.6cqw; }
.fs_37cqw	{ font-size:3.7cqw; }
.fs_38cqw	{ font-size:3.8cqw; }
.fs_40cqw	{ font-size:4cqw; }
.fs_42cqw	{ font-size:4.2cqw; }
.fs_44cqw	{ font-size:4.4cqw; }
.fs_46cqw	{ font-size:4.6cqw; }
.fs_48cqw	{ font-size:4.8cqw; }
.fs_50cqw	{ font-size:5cqw; }
.fs_52cqw	{ font-size:5.2cqw; }
.fs_54cqw	{ font-size:5.4cqw; }
.fs_56cqw	{ font-size:5.6cqw; }
.fs_58cqw	{ font-size:5.8cqw; }
.fs_60cqw	{ font-size:6cqw; }
 */

/* -----------------------------------
   ページ内リンクの固定ヘッダー分ずれ回避
   ----------------------------------- */
section.anchor {
    padding-top: 50px;
    margin-top:-50px;
}


/* -----------------------------------
   インデックスリスト
   ----------------------------------- */
/* 白背景、右に矢印 */
.indexList	{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd; /* リストの上に薄い線 */
}

.indexList li	{
  display: flex;
  align-items: center;              /* 縦中央揃え */
  justify-content: space-between;   /* テキストとアイコンを両端に配置 */
  padding: 2.4cqw 2cqw 2.4cqw 4cqw ;	    /* 上 | 右 | 下 | 左 */
  border-bottom: 1px solid #ddd; /* 下線 */
}
	
.indexList a {
  text-decoration: none; /* 下線を消す */
  color: #418FD6;	 /* テキストカラー */
  font-weight: bold;
  font-size: 3.8cqw;	 /* フォントサイズ */
  letter-spacing: -0.05em; /* 文字間隔 */
  flex: 1;               /* アイコンを右に寄せるためリンクを広げる */}

.indexList li::after {
  /* Font Awesome アイコン (fa-chevron-right) の表示に必要なプロパティ */
  content: "\f054"; /* fa-chevron-right の Unicode */
  font-family: "Font Awesome 7 Free"; 
  font-weight: 900; /* Solid アイコン用 */

  /* スタイルの適用 */
  color: #C0C0C0; /* アイコンの色 */
  font-size: 3.8cqw; /* アイコンサイズ */
  
  /* Flexbox内での調整 */
  margin-left: 2cqw; /* リンクテキストとの間隔を確保 */
  flex-shrink: 0; /* アイコンが縮まないように固定 */
}

/* -----------------------------------
   インデックス（入試制度）
   ----------------------------------- */
.index_system {
  list-style: none; /* デフォルトのマーカー（点など）を非表示 */
  padding: 0; /* リストの左側のパディングを削除 */
  margin: 0;
  border-top: 1px solid #ddd; /* リストの上に薄い線 */
}

.index_system li {
  padding: 2cqw 2cqw 2cqw 4cqw; /* 上 | 右 | 下 | 左 *//* 項目内の上下左右の余白 */
  border-bottom: 1px solid #ddd; /* 項目間に薄い区切り線 */
  line-height: 1.3; /* 行間 */
  font-weight: bold;
  font-size:4cqw; /* フォントサイズ */
  letter-spacing: -0.07em; /* 文字間隔 */
}

.index_system li a {
  display: block; /* リンク全体をクリック可能に */
  text-decoration: none; /* デフォルトの下線を非表示 */
  color: #418FD6; /* リンクの色を青に */
  font-weight: bold;
  font-size: 3.8cqw; /* リンク部分の文字を少し小さく */
  letter-spacing: -0.07em; /* 文字間隔 */
  transition: color 0.3s ease; /* ホバー効果のための準備（滑らかに変化） */
}

  /* リンクの前に矢印のアイコン */
.index_system li a:before {
  content: "\f35a"; /* Font AwesomeのUnicode値を指定 */
  font-family: "Font Awesome 7 Free"; /* Font Awesomeのフォントファミリーを指定 */
  font-weight: 900; /* アイコンが「Solid」スタイルであることを指定 */
  margin-left: 2cqw;
  margin-right: 2cqw;
  color: #FF6347; /* リンクの色をトマトに */
  font-size: 4.2cqw; /* 見やすくなるよう少し大き目にサイズを調整 */
}

.index_system li a:hover {
  color: #0056b3; /* マウスオーバー時に色を濃く */
  text-decoration: underline; /* マウスオーバー時に下線を表示 */
}

/* 項目番号の色を強調したい場合 */
.index_system li:first-letter {
/*    color: #dc3545; */ /* 項目番号の色を赤系に → 今回は色は変えない */
    font-weight: bold;
    margin-right: 2cqw;
}

/* -----------------------------------
   タイトルエリア
   ----------------------------------- */
.titleArea1 {
  padding: 4cqw 4cqw 6cqw 4cqw; /* 上 | 右 | 下 | 左 *//* 項目内の上下左右の余白 */
  line-height: 1.3; /* 行間 */
  font-weight: bold;
  font-size:4cqw; /* フォントサイズ */
  letter-spacing: -0.07em; /* 文字間隔 */
  border-top: 1px solid #808080; /* リストの上にgrayの線 */
}

/* -----------------------------------
   テキストボックス補正（common.css）
   ----------------------------------- */
.textArea1 {
  background: #fff;
  border: 1px solid #C4E3EE;
  border-radius: 1.5cqw;
  padding: 4cqw;
}

.textArea1 p {
  margin-top: 1em;
}

.textArea1 a {
  text-decoration: underline;
}


/* -----------------------------------
   アンダーライン
   ----------------------------------- */
.textDec_uline  {
  text-decoration: underline;
}

/* 「福岡市子ども習い事応援事業」参画 */
.textDec_lessons {
  text-decoration-line: underline;      /* 線の種類（下線） */
  text-decoration-color: #FF7BAC;       /* 線の色 */
  text-decoration-style: solid;         /* 線のスタイル */
  text-decoration-thickness: 5px;       /* 線の太さ */
}


/* -----------------------------------
   リスト（入試制度）
   ----------------------------------- */
.examList  {
  border-collapse:  collapse; /* セルの線を重ねる */
  width:  100%;               /* 幅指定 */
  table-layout: fixed;
  margin-top: 0;
  padding: 0 4cqw;
}

.examList th  {
  border: solid 1px #BFBFBF;
  background-color: #D9D9D9;
  line-height: 1.3; /* 行間 */
  font-size: 3.8cqw;
}

.examList td  {
  border: solid 1px #BFBFBF;
  background-color: #FFF;
  padding: 0 1.5cqw;
  line-height: 1.3; /* 行間 */
  font-size: 3.8cqw;
}


/* -----------------------------------
   区切り線（水平線）
   ----------------------------------- */
.hr1 {
  border-top: 0.5px solid #808080;
}

.hr2 {
  margin: 0 1rem;
  border-top: 1px solid #808080;
}

.hr3 {
  border-top: 1px solid #808080;
}


/* ----------------------------------------------
   アコーディオンメニュー調整（base.cssを上書き）
   ---------------------------------------------- */
/* アコーディオンメニューを包括する角丸BOX */
.w_box	{
  background: #fff;
  border: 1px solid #408ED6;
  border-radius: 1.5cqw;
}

/* 見出し（閉）*/
dl.accordion dt {
  padding: 1cqw 9cqw 1cqw 2cqw; */ /* 上 | 右 | 下 | 左 */ /* 右側につく○アイコンに文字が重ならないよう、右paddingを多めに。 */
  background: url(../img/common/arrow_sc_b.gif) no-repeat 96% center;
  background-size: 3.8cqw;
  border-bottom: 1px solid #408ED6;
  color: #408ED6;
  font-weight: bold;
  cursor: pointer;
}

/* 見出し（開）*/
dl.accordion dt.open {
  background: url(../img/common/arrow_sc_u.gif) no-repeat 96% center;
  background-size: 3.8cqw;
  border:none;
  cursor: pointer;
}

/* 本文 */
dl.accordion dd {
  padding: 1cqw 2cqw; /* 上下 | 左右 */
  display: none;
  border-bottom: 1px solid #408ED6;
}

/* dt最後の要素は下ボーダーをつけない */
dl.accordion dt:last-of-type, dl.accordion dd:last-of-type {
  border-bottom:none;
}


/* -----------------------------------------------------------
   area別FAQ
   ----------------------------------------------------------- */
/* 関連リンク -------------------------------------------- */
/* 項目を収納するBOX */
.a_kl_box	{
	background: #F3FCFF;
	border: 1px solid #418FD6;
	border-radius: 0;
	padding: 2cqw 3cqw 2cqw;	/* 上 | 左右 | 下 */
}


/* -----------------------------------
    Font Awesome（文頭にアイコン）
   ----------------------------------- */
/* Icon Name ： check - ----------------------------- */
/* アイコン用クラスの定義 */
.fa-check-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-check-before-text::before {
    /* 1. checkアイコンの Unicode を指定 */
    content: "\f00c"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #000000; /* 黒 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}

/* Icon Name ： square ------------------------------ */
/* アイコン用クラスの定義 */
.fa-square-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-square-before-text::before {
    /* 1. squareアイコンの Unicode を指定 */
    content: "\f0c8"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #418FD6; /* 青 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}

/* Icon Name ： diamond ----------------------------- */
/* アイコン用クラスの定義 */
.fa-diamond-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-diamond-before-text::before {
    /* 1. diamondアイコンの Unicode を指定 */
    content: "\f219"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #418FD6; /* 青 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}

/* Icon Name ： caret-right ------------------------- */
/* アイコン用クラスの定義 */
.fa-caret-right-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-caret-right-before-text::before {
    /* 1. caret-rightアイコンの Unicode を指定 */
    content: "\f0da"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #000000; /* 黒 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}

/* Icon Name ： map-pin ----------------------------- */
/* アイコン用クラスの定義 */
.fa-map-pin-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-map-pin-before-text::before {
    /* 1. map-pinアイコンの Unicode を指定 */
    content: "\f276"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #EB6C71; /* ピンク */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}


/* -----------------------------------
    Font Awesome（文末にアイコン）
   ----------------------------------- */
/* Icon Name ： hand-point-down --------------------- */
/* アイコン用クラスの定義 */
.fa-hand-point-down-after-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-hand-point-down-after-text::after {
    /* 1. hand-point-downアイコンの Unicode を指定 */
    content: "\f0a7"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #FFA500; /* orange */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-left: 2cqw; /* テキストとの間に隙間を空ける */
}


/* -----------------------------------
   合格実績
   -----------------------------------
/* 『国立小学校』など */
.scCate	{
	border:1px solid #418FD6;
	color:#418FD6;
	border-radius:5px;
	display:inline-table;/* インライン要素のmarginとpaddingを有効にする */
	margin-top:3cqw;
	margin-bottom:2cqw;
	padding:1cqw 2cqw;
}

/* 国立リスト（白丸）*/
ul.naList li	{
	list-style:circle inside;
/*	padding-left:4cqw;
	font-size: 3.8rem; */
}

/* 私立リスト（黒丸）*/
ul.prList li	{ list-style:disc inside; }


/* -----------------------------------
   偏差値のリスト
   ----------------------------------- */
.ssList		{
  border-collapse:  collapse; /* セルの線を重ねる */
  width:  100%;              /* 幅指定 */
  margin-top: 0;
  table-layout: fixed;
}

.ssList th	{
  background-color: #D9D9D9;
}

.ssList td	{
  background-color: #FFF;
}

.ssList th,td	{
  border: solid 1px #BFBFBF;
  padding-left: 1.5cqw;
  font-size: 3.8cqw;
}


/* -----------------------------------
   家庭教師紹介の画像部分
   ----------------------------------- */
/* 1. 画像とテキストボックスを内包するコンテナ */
.image-container {
	position: relative;
}

/* 2. レスポンシブな画像 */
.responsive-image {
	/* 画面幅に合わせて自動でサイズ変更 */
	/* max-width: 100%; */
	width: 100%;
	height: auto;
	display: block; /* 画像の下の余白をなくす */
}

/* 3. 画像の上に重ねるテキストボックス */
/* 家庭教師紹介：タイトル */
.text-overlay_ktTitle {
	/* 親要素 (.image-container) の左上を基準に配置 */
	position: absolute;
	/* サイズ */
	width: 100%;
	height: 18%;
	/* 位置 */
	top: 8%;
	left: 0%;
        /* 見た目のスタイル */
	/* background:#FFF;*/ /* 透明＝指定しない */
	/* border:1px solid #000000; */
	text-align: center;
	text-shadow:
	  2.5px 2.5px 0 white,
	  -2.5px 2.5px 0 white,
	  2.5px -2.5px 0 white,
	  -2.5px -2.5px 0 white,
	  0 2.5px 0 white,
	  2.5px 0 0 white,
	  0 -2.5px 0 white,
	  -2.5px 0 0 white;
}

/* 家庭教師紹介：家庭教師名 */
.text-overlay_ktName {
	/* 親要素 (.image-container) の左上を基準に配置 */
	position: absolute;
	/* サイズ */
	width: 100%;
	height: 18%;
	/* 位置 */
	top: 25%;
	left: 0%;
        /* 見た目のスタイル */
	/* background:#FFF;*/ /* 透明＝指定しない */
	/* border:1px solid #000000; */
	text-align: center;
}

/* 家庭教師紹介：吹き出し（右） */
.text-overlay_fukidashiRight {
	/* 親要素 (.image-container) の左上を基準に配置 */
	position: absolute;
	/* サイズ */
	width: 51%;
	height: 40%;
	/* 位置 */
	top: 51%;
	left: 42%;
        /* 見た目のスタイル */
	/* background:#FFF;*/ /* 透明＝指定しない */
	/* border:1px solid #000000; */
	/* text-align: center; */
}

/* 家庭教師紹介：吹き出し（左） */
.text-overlay_fukidashiLeft {
	/* 親要素 (.image-container) の左上を基準に配置 */
	position: absolute;
	/* サイズ */
	width: 51%;
	height: 40%;
	/* 位置 */
	top: 51%;
	left: 8%;
        /* 見た目のスタイル */
	/* background:#FFF;*/ /* 透明＝指定しない */
	/* border:1px solid #000000; */
	/* text-align: center; */
}

/* 家庭教師紹介：タイトル色 */
.ktTitle_purple	{ color:#662D91; }/* 紫 */
.ktTitle_blue	{ color:#3f8CD0; }/* 青 */
.ktTitle_green	{ color:#39B54A; }/* 緑 */

/* 家庭教師紹介：プロフィール背景色 */
.ktBg_purple	{ background:rgb(102 45 145 / 6%); }/* 不透過6%の紫 */
.ktBg_blue	{ background:rgb(63 140 208 / 6%); }/* 不透過6%の青 */
.ktBg_green	{ background:rgb(140 198 63 / 6%); }/* 不透過6%の緑 */


/* --------------------------------------------------------------
   「入試制度へ移動ボタン」と「遷移元ページに戻るボタン」を追加
   -------------------------------------------------------------- */
/* 新規追加: 左下のボタン全体を囲むコンテナ */
.floating-buttons-left {
	position: fixed;
	left: 5cqw; /* 左端から30px */
	bottom: 17cqw; /* 既存のpagetopと同じ高さ */
	z-index: 1000; /* 他の要素の上に表示 */
	display: flex; /* ボタンを横並びにする */
	flex-direction: column; /* ボタンを縦に並べる（既存のpagetopと縦位置を合わせるため） */
	gap: 3cqw; /* ボタン間の間隔 */
}

/* 個別ボタンの設定（左下の2つ） */
.floating-buttons-left p {
	margin: 0; /* pタグのデフォルトマージンをリセット */
}

/* 入試制度TOPへ移動ボタン */
.movetosystem {
    /* 初期状態では表示ON (ページTOPから150px移動したら非表示を解除したいのは history.back のみ) */
    /* display: none; は JS側で制御します */
}

/* 遷移元に戻るボタン */
.backtohistory {
    /* ↓常に表示に変更するため削除 */
    /* display: none; */ /* JSで制御: topから150px移動したら表示 */
}


/* -----------------------------------------------------------
   リンク案内
   ----------------------------------------------------------- */
/* リンク案内のタイトル */
.l_title {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	margin:0 auto; /* 横方向の中央揃え */
}


/* リンク案内のBOX */
.l_box {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	align-items: center;        /* 垂直方向に中央揃え */
	width:84cqw;
	height:11cqw;
	margin:0 auto; /* 横方向の中央揃え */
	line-height:11cqw;
	background:#418FD6;
	color:#fff;
	border-radius:5.5cqw;
	text-align:center;
}

.l_box a {
	text-decoration:underline;
}


/* -----------------------------------------------------------
   area別ページ 専用：PCで640px固定、スマホは可変
   ----------------------------------------------------------- */
html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

/* PCのみ640pxに制限 */
@media screen and (min-width: 641px) {
   /* * 注意: 以下のhtml, bodyの幅指定は、#bodyのmax-width:640pxとmargin:autoにより、
   * 実際には不要または#bodyの設定が優先される可能性が高いです。
   * (特にbody要素にIDが設定されている場合)
   * 今回の目的は#bodyへのボーダー設定なので、ここではボーダー設定を追加します。
   */

  html, body {
    /* width: 640px; は削除またはコメントアウトしても動作するはずですが、
       元のコードを尊重し、変更は最小限にします */
    max-width: 640px; /* bodyにIDがあるため、このセレクタはbody要素を指さない可能性 */
    margin: 0 auto;
  }

  /* ここにボーダー設定を追加します → base.cssに設定したので、こちらは削除 */
  /* #body { */
    /* 左右に1pxの実線ボーダー */
  /*  border-left: 1px solid #ccc; */ /* 薄いグレー */
  /*  border-right: 1px solid #ccc; */
  /* } */

  .mainImg {
    width: 100%;
    max-width: 640px;
    display: block;
    margin: 0 auto;
  }
}


/* -----------------------------------
   フッター追従ボタン対策（下部余白）
   ----------------------------------- */
body {
  padding-bottom: 80px; /* フッター追従ボタンの高さ分 */
}


/* -----------------------------------------------------------
   スマホ用エリア別ページ入口のリンク画像配置
   ----------------------------------------------------------- */
/* 1. 外側の余白 (padding) を制御 */
.area-grid-container {
    /* 上下左右に15pxの余白を設定 */
    padding: 15px;
}

/* 2. Flexコンテナの設定 */
.image-grid {
    display: flex;
    /* 折り返しを有効にして2行にする */
    flex-wrap: wrap;
    /* 項目間の水平方向の間隔を均等に配置 */
    justify-content: space-between;
    
    /* ※重要※ マイナス・マージンで左右のパディングを相殺し、画像の左右間隔を15pxにする */
    /* 左右の合計30px (15px * 2) を、外側の15pxのパディングから引くことで、
       要素間の間隔を正確に15pxに設定できます。
       計算: 15px * 2 / 2 = 15px */
    margin: 0 -7.5px;
}

/* 3. 各画像（リンク<a>タグ）の設定 */
.image-grid a {
    /* 各アイテム（<a>タグ）の幅を設定 */
    /* 計算: (100% - 15px*2の間隔) / 3列 = 33.333% */
    /* 左右のmarginを足して33.333%にする。33.333% - 15px = 33.333% */
    width: calc(33.333% - 15px);
    
    /* 左右に7.5pxのマージンを設定し、隣の要素と合計で15pxの間隔を作る */
    margin: 0 7.5px 15px; /* 上下の間隔も15px */
    
    /* リンクの枠線を消す */
    border: none; 
}

/* 4. 画像自体の設定 */
.image-grid img {
    /* 親要素(<a>)の幅いっぱいに広げる */
    width: 100%;
    /* 画像のアスペクト比を1:1に保つために、高さを幅と合わせる */
    aspect-ratio: 1 / 1; 
    /* ブロック要素にする（リンクのクリック範囲を正しくするため） */
    display: block; 
}


/* -----------------------------------------------------------
   オンライン指導を一時的に非表示にする設定
   ----------------------------------------------------------- */
.temp-hidden {
    /* 要素を非表示にするが、スペースは保持する */
    visibility: hidden;
}