@charset "utf-8";
/* ※ 画像へのパスが絶対パスで記述されているのは、ssl内にも同じファイルをコピーして使うため ※ */

/* レイアウト ::::::::::::::::::::::::::::::::::::::::::: */
.f_left		{ float:left; }
.f_right	{ float:right; }

.ta_center	{ text-align:center; }
.ta_left	{ text-align:left; }
.ta_right	{ text-align:right; }


/* マージン・パディング ::::::::::::::::::::::::::::::::: */
/* 上マージン */
.mt_10	{ margin-top:10px; }
.mt_20	{ margin-top:20px; }

/* 下マージン */
.mb_10	{ margin-bottom:10px; }

/* 上下マージン */
.mu_10	{ margin:10px 0; }
.mu_20	{ margin:20px 0; }

/* 右マージン */
.mr_5	{ margin-right:5px; }
.mr_10	{ margin-right:10px; }

/* 左マージン */
.ml_10	{ margin-left:10px; }


/* 全体パディング */
.p_10	{ padding:10px; }
.p_15	{ padding:15px; }/* ここを変えるときは「w_box」のmarginも同じ値にすること */

.p_7v	{ padding:7vw; } /* 画面幅の7% */

/* 上下パディング */
.pu_10	{ padding:10px 0; }
.pu_20	{ padding:20px 0; }

.pu_10v	{ padding:10vw 0; } /* 画面幅の10% */
.pu_9v	{ padding:9vw 0; } /* 画面幅の9% */
.pu_8v	{ padding:8vw 0; } /* 画面幅の8% */
.pu_7v	{ padding:7vw 0; } /* 画面幅の7% */
.pu_6v	{ padding:6vw 0; } /* 画面幅の6% */
.pu_5v	{ padding:5vw 0; } /* 画面幅の5% */
.pu_4v	{ padding:4vw 0; } /* 画面幅の4% */

/* 左右パディング */
.pl_8v	{ padding: 0 8vw; }

/* 上パディング */
.pt_12v	{ padding-top:12vw }
.pt_10v	{ padding-top:10vw }
.pt_8v	{ padding-top:8vw }
.pt_6v	{ padding-top:6vw }
.pt_4v	{ padding-top:4vw }

/* 下パディング */
.pb_15	{ padding-bottom:15px }
.pb_4v	{ padding-bottom:4vw }

/* 右パディング */
.pr_4v	{ padding-right:4vw }

/* 横幅指定 & 中央寄せ */
.wd_66	{
	width:66px; 
	text-align: center;
}

/* 文字装飾 ::::::::::::::::::::::::::::::::::::::::::::: */
.lblue	{ color:#46B2E7; }/* 薄い青 */
.blue	{ color:#418FD6; }/* 青 */
.indigo	{ color:#4B0082; }/* 藍色 */
.green	{ color:#8FAD1B; }/* 緑 */
.pink	{ color:#EB6C71; }/* ピンク */
.white	{ color:#FFF; }


.fw_100	{ font-weight:100; } /* Thin */
.fw_200	{ font-weight:200; } /* Extra-Light */
.fw_300	{ font-weight:300; } /* Light */
.fw_400	{ font-weight:400; } /* Regular */
.fw_500	{ font-weight:500; } /* Medium */
.fw_600	{ font-weight:600; } /* Semi-Bold */
.bold	{ font-weight:700; } /* Bold */
.fw_800	{ font-weight:800; } /* Extra-Bold */
.fw_900	{ font-weight:900; } /* Blac */

.lighter { font-weight:lighter; }
.fs_90	{ font-size:90%; }
.fs_80	{ font-size:80%; } 

.fs_8v	{ font-size: 8vw; } /* 画面幅の8% */
.fs_7v	{ font-size: 7vw; } /* 画面幅の7% */
.fs_6v	{ font-size: 6vw; } /* 画面幅の6% */
.fs_55v	{ font-size: 5.5vw; } /* 画面幅の5.5% */
.fs_5v	{ font-size: 5vw; } /* 画面幅の5% */
.fs_45v	{ font-size: 4.5vw; } /* 画面幅の4.5% */
.fs_4v	{ font-size: 4vw; } /* 画面幅の4% */
.fs_38v	{ font-size: 3.8vw; } /* 画面幅の3.8% */
.fs_37v	{ font-size: 3.7vw; } /* 画面幅の3.7% */
.fs_35v	{ font-size: 3.5vw; } /* 画面幅の3.5% */
.fs_3v	{ font-size: 3vw; } /* 画面幅の3% */

/* レスポンシブ対応 */
/* font-size: clamp(最小サイズ, 推奨サイズ(vw), 最大サイズ); */
.fscl_8v	{font-size: clamp(22px, 8vw, 44px); }
.fscl_7v	{font-size: clamp(20px, 7vw, 40px); }
.fscl_6v	{font-size: clamp(18px, 6vw, 36px); }
.fscl_55v	{font-size: clamp(17px, 5.5vw, 34px); }
.fscl_5v	{font-size: clamp(16px, 5vw, 32px); }
.fscl_45v	{font-size: clamp(15px, 4.5vw, 28px); }
.fscl_4v	{font-size: clamp(14px, 4vw, 24px); }
.fscl_37v	{font-size: clamp(13px, 3.7vw, 22px); }


.ls_-05		{ letter-spacing: -0.5em; } /* 文字間隔 */
.ls_-01		{ letter-spacing: -0.1em; } /* 文字間隔 */
.ls_-007	{ letter-spacing: -0.07em; } /* 文字間隔 */
.ls_-005	{ letter-spacing: -0.05em; } /* 文字間隔 */
.ls_-004	{ letter-spacing: -0.04em; } /* 文字間隔 */
.ls_-003	{ letter-spacing: -0.03em; } /* 文字間隔 */
.ls_-002	{ letter-spacing: -0.02em; } /* 文字間隔 */
.ls_-001	{ letter-spacing: -0.01em; } /* 文字間隔 */
.ls_001		{ letter-spacing: 0.01em; } /* 文字間隔 */
.ls_002		{ letter-spacing: 0.02em; } /* 文字間隔 */
.ls_003		{ letter-spacing: 0.03em; } /* 文字間隔 */
.ls_004		{ letter-spacing: 0.04em; } /* 文字間隔 */
.ls_005		{ letter-spacing: 0.05em; } /* 文字間隔 */
.ls_007		{ letter-spacing: 0.07em; } /* 文字間隔 */
.ls_01		{ letter-spacing: 0.1em; } /* 文字間隔 */
.ls_05		{ letter-spacing: 0.5em; } /* 文字間隔 */

.lh_08		{ line-height: 0.8; } /* 行間隔 */
.lh_10		{ line-height: 1.0; } /* 行間隔 数値×フォントサイズ なので 1.0 = フォントサイズ */
.lh_12		{ line-height: 1.2; } /* 行間隔 1.2 = およそ normal */
.lh_13		{ line-height: 1.3; } /* 行間隔 */
.lh_14		{ line-height: 1.4; } /* 行間隔 */
.lh_145		{ line-height: 1.45; } /* 行間隔 */
.lh_15		{ line-height: 1.5; } /* 行間隔 */
.lh_16		{ line-height: 1.6; } /* 行間隔 */
.lh_17		{ line-height: 1.7; } /* 行間隔 */
.lh_18		{ line-height: 1.8; } /* 行間隔 */
.lh_19		{ line-height: 1.9; } /* 行間隔 */
.lh_20		{ line-height: 2.0; } /* 行間隔 */

.td_u	{
	text-decoration-line: underline;     /* アンダーライン */
	text-decoration-thickness: from-font;
}


/* 背景色 ::::::::::::::::::::::::::::::::::::::::::::: */
.bg_blue, .bg_dblue, .bg_green, .bg_orange, .bg_pink	{ color:#FFF; }/* 背景に色がつく場合、文字は白にする */

.bg_blue	{ background:#418FD6; }/* 青 */
.bg_dblue	{ background:#0068B7; }/* 濃い青 */
.bg_green	{ background:#8FAD1B; }/* 緑 */
.bg_pink	{ background:#EB6C71; }/* ピンク */
.bg_orange	{ background:#F8B500; }/* オレンジ */
.bg_gray	{ background:#F9F9F9; }/* 灰色 */

.bg_tblue	{ background:rgba(63 140 208 / 7%); }/* 不透過7%の青 */
.bg_tpink	{ background:rgba(235 108 113 / 7%); }/* 不透過7%のピンク */
.bg_tblack	{ background:rgba(0 0 0 / 7%); }/* 不透過7%の黒 */

.dotBox		{ background:url(../img/base/bg_dot.gif); }/* 背景をドット（青）にする */
.dotBox_p	{ background:url(../img/base/bg_dot_p.gif); }/* 背景をドット（ピンク）にする */


/* ============================================================
   文字装飾関係（クエリコンテナ対応）
   ------------------------------------------------------------
   ・bodyをクエリコンテナとして設定（base.css）
   ・PCでは640px幅で中央寄せ（body幅 max-width: 640px;）
   ・【2025/11/23】area.css から移管
   ------------------------------------------------------------ */

/* -----------------------------------
   マージン・パディング 設定
   ----------------------------------- */
/* 上マージン */
.mt_05cqw	{ margin-top:5cqw; }
.mt_08cqw	{ margin-top:8cqw; }
.mt_10cqw	{ margin-top:10cqw; }

/* 下マージン */
.mb_05cqw	{ margin-bottom:5cqw; }
.mb_08cqw	{ margin-bottom:8cqw; }
.mb_10cqw	{ margin-bottom: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; }
.fs_62cqw	{ font-size:6.2cqw; }
.fs_64cqw	{ font-size:6.4cqw; }
.fs_66cqw	{ font-size:6.6cqw; }
.fs_68cqw	{ font-size:6.8cqw; }
.fs_70cqw	{ font-size:7cqw; }


/* テキストエリア ::::::::::::::::::::::::::::::::::::::: */
/* 白背景、角丸、薄青枠 */
.textArea1	{
	background:#FFF;
	border:1px solid #C4E3EE;
	border-radius:5px;
	padding:15px;
}

/* テキストエリアに含まれるpは上マージンを空ける */
.textArea1 p	{ margin-top:1em; }


/* テキストエリア（クエリコンテナ対応） ::::::::::::::::::::::::::::::::::::::: */
/* 白背景、角丸、薄青枠 */
.textArea2	{
	background:#FFF;
	border:1px solid #C4E3EE;
	border-radius:3cqw;
	padding:3cqw;
}

/* テキストエリアに含まれるpは上マージンを空ける */
.textArea2 p	{ margin-top:1em; }	


/* ボタン ::::::::::::::::::::::::::::::::::::::::::::::: */

/* 白背景 ----------------------------------------------- */
/* ボタン共通 */
.button1, .button2	{
	display:block;
	width:70%;
	padding:10px;
	margin:10px auto;
	text-align:center;
	font-weight:bold;
	border-radius:5px;/* 角丸にするかどうか */
}

/* 白背景、青枠 */
.button1	{
	background:#FFF url(../img/common/arrow_r_lb.png) no-repeat 94% center;
	background-size:3%;
	border:2px solid #418FD6;
	color:#418FD6;
}

/* 白背景ボタン（button1）に併せて.arrow_lが設定されていた場合、矢印を右向きにする */
.button1.arrow_l	{
	background:#FFF url(../img/common/arrow_l_lb.png) no-repeat 5% center;
	background-size:3%;
}

/* 白背景、緑枠 */
.button2	{
	background:#FFF url(../img/common/arrow_r_lg.png) no-repeat 94% center;
	background-size:3%;
	border:2px solid #8FAD1B;
	color:#8FAD1B;
}

/* 学年別FAQはこちら ボタン */
.button3	{
	display:block;
	width:70%;
	padding:10px;
	margin:10px auto 0;
	text-align:center;
	font-weight:bold;
	border-radius:5px;/* 角丸にするかどうか */
}

/* 不透過7%のピンク背景、ピンク枠 */
.button3	{
	background:rgba(235 108 113 / 7%);
	border:2px solid #EB6C71;
	color:#EB6C71;
}

/* 全般のFAQはこちら ボタン */
.button4	{
	display:block;
	width:70%;
	padding:10px;
	margin:10px auto 0;
	text-align:center;
	font-weight:bold;
	border-radius:5px;/* 角丸にするかどうか */
}

/* 白背景、青枠 */
.button4	{
	background:#FFF;
	border:2px solid #418FD6;
	color:#418FD6;
}

/* その他 :::::::::::::::::::::::::::::::::::::::::::::::: */

/* サムネイルの入ったBOX ================================= */
.samBox			{
	padding:10px 30px 10px 10px;
	border-bottom:1px solid #DBDBDB;
	background:url(../img/common/arrow_r_lgy.png) no-repeat 96% center;
	background-size:2%;
	display:block;
}

.samBox > dl	{ margin:-85px 0 0 95px; }

.samBox *		{
	line-height:1.4em;
	
	overflow:hidden;/* 文字数が溢れた分は表示させない */
	text-overflow:ellipsis;/* 末尾に「…」を表示 */
}

/* キャッチコピー（文字色は別クラスで指定） */
.samBox .ind	{
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
	
	white-space:nowrap;/* 1行のみ表示 */
}

/* 本文 */
.samBox dd	{
	display:flex;/* Android4.4以降（最新の書き方） */
	display:-webkit-flex;/* iOS-Sarafi7.0以降、Android～4.3 */
	display:-webkit-box;/* iOS-Sarafi6.1まで */
	
	-webkit-box-orient:vertical;/* これは必要 */
	-webkit-line-clamp:3;/* 3行表示する */
}


/* 画面右サイド 追従パーツ */
.side_fix_btn {
	position: fixed; /* 画面に固定して追従させます */
	top: 15vh; /* 表示画面の上から15%のところから表示を始めます */
	right:0; /* 固定位置は右側 */
	z-index:1; /* 他の要素より前に出します */
	font-size:0; /* 親要素でフォントサイズを０にする */
}

.side_fix_btn li{
	background: rgba(29,32,136,1); /*紺色*/
	border-radius: 20px 0 0 20px;
	border: 2px solid #fff;
}

.side_fix_btn li a{
	color: #fff;
	font-size: 1.5rem;
	font-weight:bold;
	padding:20px 24px;
	-webkit-writing-mode: vertical-rl; /* Chrome,Safari対応*/
	    -ms-writing-mode: tb-rl;       /* IE対応*/
	        writing-mode: vertical-rl; /* 縦書き*/
}

.side_fix_btn li:hover {
	background: rgba(29,32,136,0.7); /*紺色 透過*/
	border-radius: 20px 0 0 20px;
	border: 2px solid #fff;
}

/* pagetopボタン */
.pagetop	{
	position:fixed;
	right:5cqw;
	bottom:17cqw;
	display:none;
}