@charset "UTF-8";

/* =========================================================
   ネイティブ・スピーキング LP レスポンシブ対応
   ---------------------------------------------------------
   ・1200px以上 … 既存デザインのまま（ピクセル等価）
   ・1199px以下 … 固定px幅を max-width + 自動マージンに置換して流動化
   ・767px以下  … スマートフォン向けに余白・文字サイズ・装飾を調整
   既存の default.css / style.css / contents.css の後に読み込むこと。
   ========================================================= */


/* ---------------------------------------------------------
   全幅共通
   ※ img の流動化はここでは行わない。
   　 幅自動のテーブルセル内で max-width:100% を効かせると
   　 セル幅と画像幅が循環参照になりChromeが画像を潰すため
   　（Q&Aの84pxアイコンが35pxに縮む）、1199px以下に限定する。
   --------------------------------------------------------- */
iframe {
	max-width: 100%;
}

#wrap {
	width: 100%;
	max-width: 1400px;
}

#contents {
	width: 100%;
	max-width: 1140px;
	box-sizing: border-box;
}

#header {
	width: 100%;
}


/* =========================================================
   タブレット／小型ノート（1199px以下）
   固定px幅を「上限幅＋中央寄せ」に置き換えて画面幅に追従させる
   ========================================================= */
@media screen and (max-width: 1199px) {

	img {
		max-width: 100%;
		height: auto;
	}

	/* テーブル内の画像だけは実寸を固定する（上記の循環参照回避） */
	.qa_box th img,
	.qa_box td img {
		max-width: none;
		width: 84px;
		height: auto;
	}

	#contents {
		padding-left: 10px;
		padding-right: 10px;
	}

	#main,
	#main02 {
		width: auto;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	#footer {
		width: auto;
		max-width: 900px;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* 本文ブロック群：元の固定幅を上限値として引き継ぐ */
	.title,
	.subtitle,
	.box_text,
	.box,
	.box_specialist,
	.img_box,
	.sample_title,
	.sample_box,
	.study_box01,
	.study_box02,
	.taiken-waku,
	.voice_box,
	.qa_box,
	.kaiwa-waku,
	.bred_top,
	.bred_box,
	.bred_bottom,
	.apply_box,
	.apply_box02,
	.apply_inbox {
		width: auto;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.title          { max-width: 870px; }
	.subtitle       { max-width: 790px; }
	.box_text       { max-width: 775px; }
	.box,
	.box_specialist { max-width: 765px; }
	.img_box        { max-width: 850px; }
	.sample_title,
	.sample_box     { max-width: 764px; }
	.study_box01,
	.study_box02    { max-width: 765px; }
	.taiken-waku    { max-width: 766px; }
	.voice_box      { max-width: 765px; }
	.qa_box         { max-width: 770px; }
	.kaiwa-waku     { max-width: 818px; }
	.bred_top,
	.bred_box,
	.bred_bottom    { max-width: 765px; }
	.apply_box      { max-width: 866px; }
	.apply_box02    { max-width: 858px; }
	.apply_inbox    { max-width: 800px; }

	/* 申込ボタン（764px固定）とアコーディオン（600px固定）
	   style.css に button.btn（詳細度0,1,1）があるため、
	   .btn だけでは上書きできない点に注意 */
	.btn,
	.btn a,
	button.btn {
		width: 100%;
		max-width: 764px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	.accordion {
		width: auto;
		max-width: 600px;
		box-sizing: border-box;
	}

	/* 背景画像で組まれた枠を幅に追従させる */
	.suisen-waku,
	.taiken-waku,
	.study_box01,
	.study_box02,
	.bred_box {
		background-size: 100% auto;
	}

	/* 高さ固定の3スライス枠は元画像の縦横比で伸縮させる */
	.bred_top {
		height: auto;
		aspect-ratio: 765 / 67;
		background-size: 100% 100%;
	}
	.bred_bottom {
		height: auto;
		aspect-ratio: 765 / 46;
		background-size: 100% 100%;
	}

	/* 見出し帯（voice-title.jpg 766x132）の余白を比率指定に置換。
	   帯の下端に赤線が焼き込まれているため、高さにも追従させないと
	   ボックスが画像より低くなったときに赤線が切れる */
	.taiken-title,
	.taiken-title02 {
		height: auto;
		background-size: 100% 100%;
	}
	.taiken-title h3 {
		padding: 7.8% 6.5% 3.5% 19.6%;
		font-size: clamp(16px, 2.6vw, 23px);
	}
	.taiken-title02 h3 {
		padding: 5.2% 6.5% 3.5% 19.6%;
		font-size: clamp(16px, 2.6vw, 23px);
	}

	/* 背景イラストが右側にある枠は、本文の逃げ幅も比率で追従させる
	   （270px / 765px = 35.3%） */
	.study_inbox {
		padding-right: 35.3%;
	}

	/* 会話フレーム（img07-01.jpg 818x525）の内側余白も比率指定に */
	.kaiwa-waku {
		height: auto;
		aspect-ratio: 818 / 525;
		background-size: 100% 100%;
	}
	.kaiwa-waku ul {
		padding-left: 19.3%;
		padding-top: 3.7%;
	}
}


/* =========================================================
   スマートフォン（767px以下）
   ========================================================= */
@media screen and (max-width: 767px) {

	body {
		font-size: 15px;
		line-height: 175%;
	}

	#wrap {
		padding-top: 10px;
		background-size: 100% auto;
	}

	#contents {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* --- 余白の設計 ---
	   画像とボックスの外形は #contents の 8px インセットのまま全幅寄りに保ち、
	   「本文テキストの左端」だけを画面から 16px に統一する。
	   素のテキストブロックは padding 0 で 8px しか空かず端に張り付くため、
	   8px を足して 16px に揃える。箱物は内側 padding を 8px に下げて同じ位置に。 */
	.box,
	.box_text,
	.box_specialist {
		padding-left: 8px;
		padding-right: 8px;
	}
	.box02        { padding: 1rem 8px; }
	.suisen-waku  { padding: 0.8rem 8px; }
	.taiken-inbox { padding: 0.8rem 8px; }
	.bred_inbox   { padding: 1rem 8px; }
	.sample_inbox { padding: 0 8px 0.6rem; }
	.sample_inbox p { padding-left: 0; padding-right: 0; }
	/* 申込ブロックは apply_box02 の枠線2px分だけ内側が 10px から始まるので
	   6px 足して 16px に合わせる（内側の apply_pay は左右0で二重にしない） */
	.apply_inbox  { padding-left: 6px; padding-right: 6px; }
	.apply_pay    { padding: 0.6rem 0; }
	.voice_box li { padding: 10px 8px; }
	.apply_box02  { border-width: 2px; }
	.apply_inbox  { margin-left: 0; margin-right: 0; }
	.box,
	.box_specialist,
	.box_text,
	.title,
	.subtitle {
		margin-left: 0;
		margin-right: 0;
	}

	/* --- 学習イメージ写真 ---
	   PC版は右側に人物、左に本文が回り込む合成画像だが、SP幅では人物が
	   小さくなりすぎる。人物部分だけを切り出した専用画像を上部に敷き、
	   本文はその下に置く。padding-top の % は元画像の縦横比 */
	.study_box01 {
		background-image: url(../image-sp/sp-study-01.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		padding-top: 66.5%;
	}
	.study_box02 {
		background-image: url(../image-sp/sp-study-02.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		padding-top: 66.8%;
	}
	.study_inbox {
		padding: 0.8rem 8px;   /* 右270pxの余白は背景画像用なので解除 */
	}

	/* 会話フレームは枠線ベースのリストに置き換える */
	.kaiwa-waku {
		background-image: none;
		height: auto;
		aspect-ratio: auto;
	}
	.kaiwa-waku ul {
		padding: 0.8em 1em 0.8em 2.6em;
		border: solid 2px #00a0e9;
		border-radius: 6px;
		background-color: #fff;
	}
	.kaiwa-waku li {
		position: relative;
		padding: 0.45em 0;
		line-height: 1.6;
	}
	.kaiwa-waku li:before {
		content: "";
		position: absolute;
		left: -1.5em;
		top: 1em;
		width: 0.42em;
		height: 0.8em;
		border-right: 3px solid #00a0e9;
		border-bottom: 3px solid #00a0e9;
		transform: rotate(45deg);
	}

	/* --- チェックリスト枠：アイコンと文字を縮小 --- */
	.bred_title h4 {
		font-size: clamp(15px, 4.4vw, 20px);
		padding-left: 34px;
		padding-top: 6px;
		line-height: 150%;
	}
	.bred_title,
	.bred_box li {
		background-size: 26px auto;
	}
	.bred_box li {
		font-size: clamp(14px, 4vw, 18px);
		padding-left: 34px;
		padding-top: 6px;
		margin-bottom: 12px;
	}
	.bred_disc {
		padding-left: 34px;
		margin-bottom: 18px;
	}

	/* --- 体験談の見出し帯 ---
	   voice-title.jpg（766x132）は「バッジ＋赤い下線」が1枚に焼かれた固定高の帯。
	   SP幅ではタイトルが2行になり赤線を突き抜けるため、帯画像を外して
	   赤文字＋赤い下線をCSSで再現する（旧SP版も帯を捨てている） */
	.taiken-title,
	.taiken-title02 {
		background-image: url(../image-sp/feedback-badge.png);
		background-repeat: no-repeat;
		background-position: left 2px center;
		background-size: 46px auto;
		height: auto;
	}
	.taiken-title h3,
	.taiken-title02 h3 {
		padding: 0.5em 0.2em 0.45em 56px;
		border-bottom: 3px solid #b40000;
		font-size: clamp(15px, 4.4vw, 20px);
		line-height: 140%;
	}

	/* --- Q&A --- */
	.qa_box th {
		font-size: clamp(15px, 4.2vw, 20px);
		padding: 6px 8px;
	}
	.qa_box td {
		padding: 6px 8px;
	}
	.qa_box th img,
	.qa_box td img {
		max-width: none;
		width: 48px;
		height: auto;
	}

	/* --- 受講生の声リスト --- */
	.voice_box .voice01,
	.voice_box .voice02 {
		padding-left: 44px;
		background-size: 22px auto;
		background-position: 10px 14px;
	}
	.voice_box li {
		padding: 10px;
	}

	/* --- 回り込み画像はSPでは縦積みに --- */
	.photo_left,
	.photo_right {
		float: none;
		display: block;
		margin: 0 auto 10px;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	/* --- 申込ボタン：巨大な2.3remをSP幅に収める --- */
	.btn {
		margin: 0.8rem auto;
	}
	.btn a,
	button.btn {
		font-size: clamp(17px, 5.2vw, 28px);
		padding: 0.9rem 0.4rem;
		letter-spacing: 0.04em;
		height: auto;
	}
	.accordion {
		width: 100%;
	}
	.accordion-open {
		padding-left: 24px !important;
		font-size: 0.85rem;
	}

	/* --- 動画は16:9で画面幅いっぱいに --- */
	iframe[src*="youtube"] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* --- フッターナビは折り返し中央寄せ --- */
	#footer { padding-bottom: 10px; }
	#fnavi {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-left: 4px;
		padding-right: 4px;
	}
	#fnavi li {
		float: none;
	}

	/* --- タップ領域の確保（実機監査で44px未満だった箇所） ---
	   同意チェックボックスは申込に必須の操作なのに13x13pxしかなく、
	   指では正確に押せない。ラベル側も含めて押せる高さを確保する。 */
	/* style.css 側が input#consent1 / input#consent1 + label（詳細度1,0,1）で
	   width:600px と margin-left:85px を指定しているため、同じ形で上書きする。
	   label[for=...] や #consent1 だけでは詳細度が足りず効かない。 */
	input#consent1,
	input#consent2 {
		width: 24px;
		height: 24px;
		margin-left: 0;
		margin-right: 6px;
		vertical-align: -7px;
	}
	input#consent1 + label,
	input#consent2 + label {
		display: inline-block;
		width: auto;
		max-width: calc(100% - 36px);
		padding: 10px 0;
		line-height: 1.5;
		vertical-align: middle;
	}
	.accordion-open,
	.accordion-close {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* フッターの法定リンクは12pxで小さく、タップ高も18pxしかない */
	#fnavi a,
	.copyright {
		font-size: 13px;
	}
	#fnavi a {
		display: inline-block;
		padding: 10px 6px;
	}
	.apply_pay a,
	.apply_inbox a {
		display: inline-block;
		padding: 6px 0;
	}

	/* --- 文字サイズの調整 --- */
	.font_px20 { font-size: 17px; }
	.box_specialist p { line-height: 190%; }
}