@charset "utf-8";
/* issue #326 My Disney Stars and Heroes 特設ページ（hanaso kids 専用）
 *
 * ・フォントは kids/campaign/eiken2026.php と同じく Noto Sans JP を
 *   lesson/disney_stars_and_heroes.php の <STYLE_SHEET> 置換で <link> 読み込みしている。
 * ・表示幅は #maincontents のカラム幅に追従する。枠（index_blank / trial_index /
 *   user_index）はいずれも col-sm-9 で、.contentsbody の max-width:1400px と合わせて
 *   本文幅は最大 1020px。.mdsah-lp の max-width もそれに合わせている。
 * ・1200px以上はPC版（資料の幅1200px版を比例縮小）、1199px以下はスマホ版（資料の幅720px版）。
 *   PC版とスマホ版で内容が異なる箇所（GUIDE / BEFORE BOOKING / レベル表 / 一部のリード文）も
 *   この境目で出し分ける。切り替えの理由はファイル後半のスマホ版ブロックの冒頭を参照。
 * ・配色は「LPデザイン (1).xlsx」の画像から採取した実測値。
 *     濃紺(バー)   #071A38
 *     濃紺         #132B59
 *     オレンジ     #F59B23（体験版）
 *     ブルー       #2C99D1（通常版・小見出し）
 *     グリーン     #42B884（完全版）
 *     パープル     #6B58A9（STORY & WORDS / 書く）
 *     淡オレンジ   #FFF2DF  淡ブルー #EAF7FD  淡グリーン #E9F8F1
 *     背景         #F4F7FC / #F8FBFF  表の縞 #EFF6FC  帯 #FFF7EA  ステップ #F8F9FD
 * ・要素セレクタに margin を書くと BEM クラス（詳細度 0,1,0）より強くなり、
 *   クラス側の余白指定が打ち消される。余白は必ず各クラスで個別に指定すること。
 */

/* ----------------------------------------------------------------
 * ベース
 * ---------------------------------------------------------------- */
.mdsah-lp {
	/* 1単位 = 資料PC版(幅1200px)の1px。カラム幅に追従させることで、文字サイズ・余白・
	 * 画像の大きさが資料と同じ比率のまま、どの画面幅でも崩れない。
	 * 枠(index_blank / trial_index / user_index)はいずれも col-sm-9 なので
	 * カラム幅 = 0.75 x min(100vw, 1400px) - 30px。上限は 1020/1200 = 0.85px。
	 * min() 未対応ブラウザでは 0.85px 固定（カラム1020px想定）で成立させる。 */
	--u: 0.85px;
	max-width: calc(1200 * var(--u));
	margin: 0 auto calc(35.29 * var(--u));
	background: #fff;
	color: #333;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: calc(17.65 * var(--u));
	line-height: 1.8;
	text-align: left;
}
/* min() はカスタムプロパティの値を解釈せずに通してしまうため、未対応ブラウザでは
 * var() 置換時に無効値となり全体が崩れる。@supports で切り分ける。 */
@supports (width: min(1px, 2px)) {
	.mdsah-lp { --u: min(calc(0.0625vw - 0.025px), 0.85px); }
}
.mdsah-lp img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.mdsah-lp ul {
	list-style: none;
}
.mdsah-lp a {
	text-decoration: none;
}
.mdsah-lp a:hover {
	text-decoration: none;
	opacity: .85;
}

/* PC版／スマホ版の出し分け。既定（1200px以上）はPC版を表示する */
.mdsah-lp__sponly,
.mdsah-lp__sponly-block,
.mdsah-lp__levelcards {
	display: none;
}
/* スマホ版だけ改行する箇所（資料の折り返し位置に合わせる） */
.mdsah-lp__br-sp,
.mdsah-lp__br-sp2 { display: none; }

/* ----------------------------------------------------------------
 * ボタン
 * ---------------------------------------------------------------- */
.mdsah-lp__btn {
	display: inline-block;
	position: relative;
	min-width: calc(247.06 * var(--u));
	padding: calc(16.47 * var(--u)) calc(44.71 * var(--u)) calc(16.47 * var(--u)) calc(30.59 * var(--u));
	border-radius: calc(14.12 * var(--u));
	box-sizing: border-box;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.mdsah-lp__btn:after {
	content: "\203A";/* › */
	position: absolute;
	right: calc(21.18 * var(--u));
	top: 50%;
	margin-top: -0.75em;
	font-size: calc(18.82 * var(--u));
	line-height: 1.5;
}
.mdsah-lp__btn--orange { background: #F59B23; color: #fff; }
.mdsah-lp__btn--blue   { background: #2C99D1; color: #fff; }
.mdsah-lp__btn--green  { background: #42B884; color: #fff; }
.mdsah-lp__btn--outline {
	background: transparent;
	border: 2px solid rgba(255,255,255,.9);
	color: #fff;
}
.mdsah-lp__btn--small {
	min-width: 0;
	padding: calc(11.76 * var(--u)) calc(30.59 * var(--u)) calc(11.76 * var(--u)) calc(18.82 * var(--u));
	font-size: calc(16.47 * var(--u));
}
.mdsah-lp__btn--small:after { right: calc(14.12 * var(--u)); }
/* 資料で矢印が付いていないボタン（書籍購入はこちら）用 */
.mdsah-lp__btn--noarrow {
	padding-right: calc(25.88 * var(--u));
	padding-left: calc(25.88 * var(--u));
}
.mdsah-lp__btn--noarrow:after { content: none; }

/* ----------------------------------------------------------------
 * ヘッダーバー
 * ---------------------------------------------------------------- */
.mdsah-lp__bar {
	padding: calc(18.82 * var(--u)) calc(51.76 * var(--u));
	background: #071A38;
	overflow: hidden;
}
.mdsah-lp__bar-title {
	float: left;
	margin: calc(8.24 * var(--u)) 0 0;
	padding: 0;
	color: #fff;
	font-size: calc(20 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}
.mdsah-lp__bar-nav {
	float: right;
	margin: 0;
	padding: 0;
}
.mdsah-lp__bar-nav li {
	float: left;
	margin-left: calc(25.88 * var(--u));
}
.mdsah-lp__bar-link {
	display: block;
	padding: calc(10.59 * var(--u)) 0;
	color: #fff;
	font-size: calc(16.47 * var(--u));
	line-height: 1.4;
}
.mdsah-lp__bar-btn {
	display: block;
	padding: calc(10.59 * var(--u)) calc(35.29 * var(--u));
	border-radius: 999px;
	background: #F59B23;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}

/* ----------------------------------------------------------------
 * ヒーロー
 * PC版は右に写真、左に濃紺グラデーションを重ねる。
 * スマホ版は写真の下に濃紺のブロックを積む（資料どおり分割する）。
 * ---------------------------------------------------------------- */
.mdsah-lp__hero {
	position: relative;
	background: #132B59;
	overflow: hidden;
}
/* 写真はヒーロー全面に敷き、左側は下の紺グラデーションで覆う（資料と同じ重ね方）。
 * 資料のヒーローを横方向に実測すると、紺は左端で約95%の濃さ、そこから直線的に薄くなり
 * 60%付近で完全に透明になる。右66%だけに写真を置くと、20〜35%あたりで
 * うっすら写真が透ける資料の表現が出ない。 */
.mdsah-lp__hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.mdsah-lp__hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 支給素材は 2:1 の横長。中央でトリミングするとノートPCが右端で切れるため、
	 * 資料と同じくノートPCまで入るよう右寄りで切る。 */
	object-position: 80% center;
}
.mdsah-lp__hero-body {
	position: relative;
	z-index: 1;
	padding: calc(51.76 * var(--u)) calc(82.35 * var(--u)) calc(30.59 * var(--u));
	background: #132B59;
	background: -webkit-linear-gradient(left, rgba(19,43,89,0.95) 0%, rgba(19,43,89,0) 60%);
	background: linear-gradient(to right, rgba(19,43,89,0.95) 0%, rgba(19,43,89,0) 60%);
}
.mdsah-lp__hero-logo {
	width: calc(282.35 * var(--u));
	max-width: 52%;
	margin: 0;
	padding: 0;
}
.mdsah-lp__hero-age {
	display: inline-block;
	margin: calc(21.18 * var(--u)) 0 0;
	padding: calc(5.88 * var(--u)) calc(21.18 * var(--u));
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 999px;
	color: #fff;
	font-size: calc(15.29 * var(--u));
	line-height: 1.4;
}
.mdsah-lp__hero-title {
	margin: calc(18.82 * var(--u)) 0 0;
	padding: 0;
	color: #fff;
	font-size: calc(44.71 * var(--u));
	font-weight: bold;
	line-height: 1.35;
}
.mdsah-lp__hero-text {
	max-width: 56%;
	margin: calc(16.47 * var(--u)) 0 0;
	padding: 0;
	color: #dfe6f2;
	font-size: calc(16.47 * var(--u));
	line-height: 1.8;
}
.mdsah-lp__hero-books {
	max-width: 56%;
	margin: calc(21.18 * var(--u)) 0 0;
	padding: 0;
	overflow: hidden;
}
.mdsah-lp__hero-books li {
	float: left;
	width: 12.4%;
	margin-right: 2.2%;
}
/* 教材表紙の枠。支給素材は Level 1 だけ縦横比が違う（648x883、他は648x820）ため、
 * そのまま並べると1枚だけ背が高くなる。資料と同じ比率の枠に収めて高さを揃える。
 * 素材が同じ比率で再書き出しされたら、この枠は外してよい。 */
.mdsah-lp__fig {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 126.5%;/* 820 / 648 */
}
.mdsah-lp__fig img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.mdsah-lp__hero-books li:last-child { margin-right: 0; }
.mdsah-lp__hero-btns {
	margin: calc(25.88 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__hero-btns .mdsah-lp__btn {
	margin: 0 calc(14.12 * var(--u)) calc(11.76 * var(--u)) 0;
}
.mdsah-lp__hero-copy {
	margin: calc(16.47 * var(--u)) 0 0;
	padding: 0;
	color: #cfd8e8;
	font-size: calc(16.47 * var(--u));
	line-height: 1.4;
}

/* ----------------------------------------------------------------
 * セクション共通
 * ---------------------------------------------------------------- */
.mdsah-lp__sec {
	/* 資料の左右余白はセクション幅の約7% */
	padding: calc(70.59 * var(--u)) calc(82.35 * var(--u));
}
.mdsah-lp__sec--white { background: #fff; }
/* 資料は左右余白がセクションごとに違う。INSIDE THE LESSON は約4.7%と狭く、
 * 2枚のレッスン画像が大きく見える。そこだけ余白を詰める。 */
.mdsah-lp__sec--wide { padding-left: calc(56.47 * var(--u)); padding-right: calc(56.47 * var(--u)); }
.mdsah-lp__sec--pale  { background: #F4F7FC; }
.mdsah-lp__sec--pale2 { background: #F8FBFF; }
.mdsah-lp__eyebrow {
	margin: 0;
	padding: 0;
	color: #2C99D1;
	font-size: calc(15.29 * var(--u));
	font-weight: bold;
	letter-spacing: .02em;
	line-height: 1.6;
	text-align: center;
}
.mdsah-lp__heading {
	margin: calc(9.41 * var(--u)) 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #1A1A1A;
	font-size: calc(38.82 * var(--u));
	font-weight: bold;
	line-height: 1.45;
	text-align: center;
}
.mdsah-lp__lead {
	/* 資料は2行で折り返す幅 */
	max-width: calc(729.41 * var(--u));
	margin: calc(16.47 * var(--u)) auto 0;
	padding: 0;
	color: #666;
	font-size: calc(16.47 * var(--u));
	line-height: 1.9;
	text-align: center;
}
.mdsah-lp__note {
	margin: calc(21.18 * var(--u)) 0 0;
	padding: 0;
	color: #777;
	font-size: calc(14.12 * var(--u));
	line-height: 1.7;
}
.mdsah-lp__note--center { text-align: center; }

/* ----------------------------------------------------------------
 * WHY KIDS LOVE IT
 * ---------------------------------------------------------------- */
.mdsah-lp__why {
	margin-top: calc(32.94 * var(--u));
	overflow: hidden;
}
.mdsah-lp__why-card {
	float: left;
	width: 54%;
	padding: calc(16.47 * var(--u));
	border: 2px solid #132B59;
	border-radius: calc(16.47 * var(--u));
	box-sizing: border-box;
	background: #fff;
}
.mdsah-lp__why-fig {
	position: relative;
}
.mdsah-lp__why-fig img {
	width: 100%;
	border-radius: calc(9.41 * var(--u));
}
.mdsah-lp__why-badge {
	position: absolute;
	left: calc(11.76 * var(--u));
	bottom: calc(11.76 * var(--u));
	padding: calc(7.06 * var(--u)) calc(18.82 * var(--u));
	border-radius: 999px;
	background: #132B59;
	color: #fff;
	font-size: calc(15.29 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}
.mdsah-lp__why-caption {
	margin: calc(16.47 * var(--u)) 0 calc(4.71 * var(--u));
	padding: 0;
	color: #1A1A1A;
	font-size: calc(20 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__points {
	float: right;
	width: 43%;
	margin: 0;
	padding: 0;
}
.mdsah-lp__point {
	position: relative;
	margin: 0 0 calc(30.59 * var(--u));
	padding: 0 0 0 calc(72.94 * var(--u));
}
.mdsah-lp__point:last-child { margin-bottom: 0; }
.mdsah-lp__point:before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(2.35 * var(--u));
	width: calc(54.12 * var(--u));
	height: calc(54.12 * var(--u));
	border-radius: calc(12.94 * var(--u));
}
.mdsah-lp__point:after {
	content: "";
	position: absolute;
	left: calc(16.47 * var(--u));
	top: calc(18.82 * var(--u));
	width: calc(14.12 * var(--u));
	height: calc(14.12 * var(--u));
	border: 3px solid #fff;
	border-radius: 50%;
}
.mdsah-lp__point--blue:before   { background: #2C99D1; }
.mdsah-lp__point--orange:before { background: #F59B23; }
.mdsah-lp__point--green:before  { background: #42B884; }
.mdsah-lp__point-title {
	margin: 0;
	padding: 0;
	color: #1A1A1A;
	font-size: calc(22.35 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__point-text {
	margin: calc(2.35 * var(--u)) 0 0;
	padding: 0;
	color: #666;
	font-size: calc(17.65 * var(--u));
	line-height: 1.7;
}

/* ----------------------------------------------------------------
 * CHOOSE YOUR STYLE（3つの受講方法）
 * ---------------------------------------------------------------- */
.mdsah-lp__styles {
	margin: calc(35.29 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__styles:after { content: ""; display: block; clear: both; }
.mdsah-lp__style {
	float: left;
	width: 32%;
	margin-right: 2%;
	padding: 0 0 calc(44.71 * var(--u));
	border-radius: calc(16.47 * var(--u));
	box-sizing: border-box;
	background: #fff;
	box-shadow: calc(7.06 * var(--u)) calc(7.06 * var(--u)) 0 #132B59;
	overflow: hidden;
}
.mdsah-lp__style:last-child { margin-right: 0; }
.mdsah-lp__style:before {
	content: "";
	display: block;
	height: calc(9.41 * var(--u));
}
.mdsah-lp__style--orange:before { background: #F59B23; }
.mdsah-lp__style--blue:before   { background: #2C99D1; }
.mdsah-lp__style--green:before  { background: #42B884; }
.mdsah-lp__style-tag {
	display: block;
	width: 62%;
	margin: calc(25.88 * var(--u)) auto 0;
	padding: calc(7.06 * var(--u)) 0;
	border-radius: 999px;
	font-size: calc(15.29 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.mdsah-lp__style--orange .mdsah-lp__style-tag { background: #FFF2DF; color: #C87A12; }
.mdsah-lp__style--blue .mdsah-lp__style-tag   { background: #EAF7FD; color: #1B7BAA; }
.mdsah-lp__style--green .mdsah-lp__style-tag  { background: #E9F8F1; color: #2E8F63; }
.mdsah-lp__style-fig {
	width: 56%;
	margin: calc(9.41 * var(--u)) auto 0;
	padding: 0;
}
.mdsah-lp__style-name {
	margin: calc(14.12 * var(--u)) 0 0;
	padding: 0;
	color: #1A1A1A;
	font-size: calc(30.59 * var(--u));
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.mdsah-lp__style-en {
	margin: calc(2.35 * var(--u)) 0 0;
	padding: 0;
	font-size: calc(14.12 * var(--u));
	font-weight: bold;
	letter-spacing: .06em;
	line-height: 1.5;
	text-align: center;
}
.mdsah-lp__style--orange .mdsah-lp__style-en { color: #F59B23; }
.mdsah-lp__style--blue .mdsah-lp__style-en   { color: #2C99D1; }
.mdsah-lp__style--green .mdsah-lp__style-en  { color: #42B884; }
.mdsah-lp__style-band {
	margin: calc(35.29 * var(--u)) calc(18.82 * var(--u)) 0;
	padding: calc(17.65 * var(--u)) calc(7.06 * var(--u));
	border-radius: calc(9.41 * var(--u));
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.mdsah-lp__style--orange .mdsah-lp__style-band { background: #FFF2DF; color: #C87A12; }
.mdsah-lp__style--blue .mdsah-lp__style-band   { background: #EAF7FD; color: #1B7BAA; }
.mdsah-lp__style--green .mdsah-lp__style-band  { background: #E9F8F1; color: #2E8F63; }
.mdsah-lp__style-text {
	margin: calc(25.88 * var(--u)) calc(18.82 * var(--u)) 0;
	padding: 0;
	color: #666;
	font-size: calc(16.47 * var(--u));
	line-height: 1.95;
	text-align: center;
}
.mdsah-lp__checks {
	margin: calc(52.94 * var(--u)) calc(18.82 * var(--u)) 0;
	padding: 0;
}
.mdsah-lp__checks li {
	position: relative;
	margin: 0 0 calc(21.18 * var(--u));
	padding: 0 0 0 calc(32.94 * var(--u));
	color: #333;
	font-size: calc(15.88 * var(--u));
	line-height: 1.6;
}
.mdsah-lp__checks li:last-child { margin-bottom: 0; }
.mdsah-lp__checks li:before {
	content: "\2713";/* ✓ */
	position: absolute;
	left: 0;
	top: calc(2.35 * var(--u));
	width: calc(21.18 * var(--u));
	height: calc(21.18 * var(--u));
	border-radius: 50%;
	color: #fff;
	font-size: calc(12.94 * var(--u));
	line-height: calc(21.18 * var(--u));
	text-align: center;
}
.mdsah-lp__style--orange .mdsah-lp__checks li:before { background: #F59B23; }
.mdsah-lp__style--blue .mdsah-lp__checks li:before   { background: #2C99D1; }
.mdsah-lp__style--green .mdsah-lp__checks li:before  { background: #42B884; }
.mdsah-lp__style-note {
	margin: calc(56.47 * var(--u)) calc(18.82 * var(--u)) 0;
	padding: calc(15.29 * var(--u)) calc(7.06 * var(--u));
	border-radius: calc(7.06 * var(--u));
	background: #F4F6F9;
	color: #777;
	font-size: calc(15.29 * var(--u));
	line-height: 1.5;
	text-align: center;
}
.mdsah-lp__style-btn {
	margin: calc(32.94 * var(--u)) calc(18.82 * var(--u)) 0;
	padding: 0;
}
.mdsah-lp__style-btn .mdsah-lp__btn {
	display: block;
	min-width: 0;
	width: 100%;
}

/* ----------------------------------------------------------------
 * QUICK GUIDE
 * ---------------------------------------------------------------- */
.mdsah-lp__quick {
	margin: calc(35.29 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__quick:after { content: ""; display: block; clear: both; }
.mdsah-lp__quick-card {
	float: left;
	width: 30%;
	margin-right: 5%;
	padding: calc(30.59 * var(--u)) calc(21.18 * var(--u));
	border-radius: calc(18.82 * var(--u));
	box-sizing: border-box;
	box-shadow: calc(7.06 * var(--u)) calc(7.06 * var(--u)) 0 #132B59;
	text-align: center;
}
.mdsah-lp__quick-card:last-child { margin-right: 0; }
.mdsah-lp__quick-card--orange { background: #FFF2DF; border: calc(1.18 * var(--u)) solid #E8B877; }
.mdsah-lp__quick-card--blue   { background: #EAF7FD; border: calc(1.18 * var(--u)) solid #9ED3EC; }
.mdsah-lp__quick-card--green  { background: #E9F8F1; border: calc(1.18 * var(--u)) solid #A3DCC2; }
.mdsah-lp__quick-text {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	line-height: 1.7;
}
.mdsah-lp__quick-arrow {
	margin: calc(11.76 * var(--u)) 0 0;
	padding: 0;
	font-size: calc(21.18 * var(--u));
	line-height: 1;
}
/* 矢印の向きは資料に合わせる。PC版は下向き、スマホ版は右向き */
.mdsah-lp__quick-arrow:before { content: "\2193";/* ↓ */ }
.mdsah-lp__quick-card--orange .mdsah-lp__quick-arrow { color: #F59B23; }
.mdsah-lp__quick-card--blue .mdsah-lp__quick-arrow   { color: #2C99D1; }
.mdsah-lp__quick-card--green .mdsah-lp__quick-arrow  { color: #42B884; }
.mdsah-lp__quick-pill {
	display: inline-block;
	margin: calc(11.76 * var(--u)) 0 0;
	padding: calc(9.41 * var(--u)) calc(40 * var(--u));
	border-radius: 999px;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__quick-card--orange .mdsah-lp__quick-pill { background: #F59B23; }
.mdsah-lp__quick-card--blue .mdsah-lp__quick-pill   { background: #2C99D1; }
.mdsah-lp__quick-card--green .mdsah-lp__quick-pill  { background: #42B884; }
.mdsah-lp__quick-foot {
	display: block;
	max-width: calc(470.59 * var(--u));
	margin: calc(30.59 * var(--u)) auto 0;
	padding: calc(14.12 * var(--u)) calc(23.53 * var(--u));
	border-radius: 999px;
	background: #132B59;
	color: #fff;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

/* ----------------------------------------------------------------
 * 7 LEVELS
 * ---------------------------------------------------------------- */
.mdsah-lp__levels {
	/* 資料ではレベルカードの列だけが左右いっぱい（セクション幅の約93%）に広がる */
	width: calc(100% + calc(51.76 * var(--u)));
	margin: calc(35.29 * var(--u)) calc(-25.88 * var(--u)) 0;
	padding: 0;
	font-size: 0;/* inline-block の隙間を潰す */
	text-align: center;
}
.mdsah-lp__levels li {
	/* 7枚を1行に収める。資料のカード幅:カード間 = 約3:1 に合わせる */
	display: inline-block;
	width: 10.7%;
	margin: 0 1.7% calc(16.47 * var(--u));
	padding: calc(11.76 * var(--u)) calc(9.41 * var(--u)) calc(16.47 * var(--u));
	border-radius: calc(14.12 * var(--u));
	box-sizing: border-box;
	background: #fff;
	box-shadow: calc(5.88 * var(--u)) calc(5.88 * var(--u)) 0 #132B59;
	vertical-align: top;
}
.mdsah-lp__levels span {
	display: block;
	margin-top: calc(9.41 * var(--u));
	color: #1A1A1A;
	font-size: calc(15.29 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}

/* レベル表（PC版） */
.mdsah-lp__table {
	width: 100%;
	margin: calc(42.35 * var(--u)) 0 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: calc(11.76 * var(--u));
	background: #fff;
	overflow: hidden;
}
.mdsah-lp__table th,
.mdsah-lp__table td {
	padding: calc(16.47 * var(--u)) calc(18.82 * var(--u));
	border: 0;
	font-size: calc(16.47 * var(--u));
	line-height: 1.7;
	vertical-align: middle;
}
.mdsah-lp__table thead th {
	background: #132B59;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.mdsah-lp__table tbody th {
	width: 11%;
	color: #1A1A1A;
	font-weight: bold;
	text-align: center;
}
.mdsah-lp__table tbody td:first-of-type { width: 13%; text-align: center; }
.mdsah-lp__table tbody td:first-of-type + td { width: 16%; text-align: center; }
.mdsah-lp__table tbody tr:nth-child(even) { background: #EFF6FC; }

/* レベル表（スマホ版） */
.mdsah-lp__levelcards {
	margin: calc(30.59 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__levelcards li {
	margin: 0 0 calc(16.47 * var(--u));
	padding: calc(18.82 * var(--u));
	border-radius: calc(14.12 * var(--u));
	background: #fff;
	box-shadow: 0 calc(2.35 * var(--u)) calc(9.41 * var(--u)) rgba(19,43,89,.10);
}
.mdsah-lp__levelcard-head {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
.mdsah-lp__levelcard-badge {
	display: inline-block;
	min-width: calc(101.18 * var(--u));
	margin-right: calc(11.76 * var(--u));
	padding: calc(5.88 * var(--u)) calc(14.12 * var(--u));
	border-radius: 999px;
	background: #132B59;
	color: #fff;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.mdsah-lp__levelcard-cefr {
	margin-right: calc(9.41 * var(--u));
	color: #2C99D1;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	vertical-align: middle;
}
.mdsah-lp__levelcard-stage {
	color: #1A1A1A;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	vertical-align: middle;
}
.mdsah-lp__levelcard-rank {
	margin: calc(2.35 * var(--u)) 0 0 calc(112.94 * var(--u));
	padding: 0 0 calc(11.76 * var(--u));
	border-bottom: 1px solid #E5EAF2;
	color: #999;
	font-size: calc(14.12 * var(--u));
	line-height: 1.5;
}
.mdsah-lp__levelcard-text {
	margin: calc(11.76 * var(--u)) 0 0;
	padding: 0;
	color: #333;
	font-size: calc(15.29 * var(--u));
	line-height: 1.7;
}

/* レベル選びに迷っていますか？ */
.mdsah-lp__lost {
	margin: calc(35.29 * var(--u)) 0 0;
	padding: calc(30.59 * var(--u)) calc(35.29 * var(--u));
	border-radius: calc(16.47 * var(--u));
	background: #FFF2DF;
	overflow: hidden;
}
.mdsah-lp__lost-body {
	float: left;
	width: 62%;
}
.mdsah-lp__lost-title {
	margin: 0;
	padding: 0;
	color: #1A1A1A;
	font-size: calc(25.88 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__lost-text {
	margin: calc(9.41 * var(--u)) 0 0;
	padding: 0;
	color: #666;
	font-size: calc(16.47 * var(--u));
	line-height: 1.8;
}
.mdsah-lp__lost-btn {
	float: right;
	width: 26%;
	margin: calc(18.82 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__lost-btn .mdsah-lp__btn {
	display: block;
	min-width: 0;
	width: 100%;
}

/* ----------------------------------------------------------------
 * INSIDE THE LESSON
 * ---------------------------------------------------------------- */
.mdsah-lp__inside {
	display: table;
	width: calc(100% + calc(82.35 * var(--u)));
	margin: calc(47.06 * var(--u)) calc(-41.18 * var(--u)) 0;
	padding: 0;
	border-collapse: separate;
	border-spacing: calc(41.18 * var(--u)) 0;
	table-layout: fixed;
}
.mdsah-lp__inside li {
	position: relative;
	display: table-cell;
	width: 50%;
	vertical-align: top;
	padding: calc(21.18 * var(--u));
	border-radius: calc(16.47 * var(--u));
	box-sizing: border-box;
	background: #fff;
	box-shadow: calc(7.06 * var(--u)) calc(7.06 * var(--u)) 0 #132B59;
}
.mdsah-lp__inside img {
	width: 100%;
	border-radius: calc(9.41 * var(--u));
}
.mdsah-lp__inside-badge {
	position: absolute;
	left: calc(28.24 * var(--u));
	bottom: calc(30.59 * var(--u));
	padding: calc(9.41 * var(--u)) calc(23.53 * var(--u));
	border-radius: 999px;
	color: #fff;
	font-size: calc(15.29 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}
.mdsah-lp__inside-badge--purple { background: #6B58A9; }
.mdsah-lp__inside-badge--green  { background: #42B884; }
.mdsah-lp__skills {
	margin: calc(58.82 * var(--u)) 0 0;
	padding: 0;
	text-align: center;
}
.mdsah-lp__skills li {
	display: inline-block;
	min-width: calc(135.29 * var(--u));
	margin: 0 calc(7.06 * var(--u)) calc(11.76 * var(--u));
	padding: calc(14.12 * var(--u)) 0;
	border-radius: 999px;
	color: #fff;
	font-size: calc(20 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}
.mdsah-lp__skill--blue   { background: #2C99D1; }
.mdsah-lp__skill--orange { background: #F59B23; }
.mdsah-lp__skill--green  { background: #42B884; }
.mdsah-lp__skill--purple { background: #6B58A9; }

/* ----------------------------------------------------------------
 * HOW TO START
 * ---------------------------------------------------------------- */
.mdsah-lp__flow {
	margin: calc(42.35 * var(--u)) 0 0;
	padding: calc(37.65 * var(--u)) calc(35.29 * var(--u));
	border-radius: calc(18.82 * var(--u));
	box-sizing: border-box;
}
.mdsah-lp__flow--trial {
	background: #FFF2DF;
	box-shadow: calc(9.41 * var(--u)) calc(9.41 * var(--u)) 0 #132B59;
}
.mdsah-lp__flow--book {
	background: #fff;
	box-shadow: calc(9.41 * var(--u)) calc(9.41 * var(--u)) 0 #132B59;
}
.mdsah-lp__flow-head {
	margin: 0;
	padding: 0;
}
.mdsah-lp__flow-tag {
	display: inline-block;
	margin: 0 calc(18.82 * var(--u)) 0 0;
	padding: calc(9.41 * var(--u)) calc(32.94 * var(--u));
	border-radius: 999px;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.4;
	vertical-align: middle;
}
.mdsah-lp__flow-tag--orange { background: #F59B23; }
.mdsah-lp__flow-tag--navy   { background: #132B59; }
.mdsah-lp__flow-title {
	display: inline-block;
	color: #1A1A1A;
	font-size: calc(22.35 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	vertical-align: middle;
}
.mdsah-lp__flow-body {
	margin-top: calc(21.18 * var(--u));
	overflow: hidden;
}
.mdsah-lp__flow-fig {
	float: left;
	width: 14%;
	margin: 0;
	padding: 0;
}
.mdsah-lp__flow-steps {
	float: right;
	width: 83%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.mdsah-lp__flow-steps li {
	position: relative;
	float: left;
	width: 31.5%;
	margin-right: 2.75%;
	padding: calc(21.18 * var(--u)) calc(16.47 * var(--u));
	border-radius: calc(11.76 * var(--u));
	box-sizing: border-box;
	background: #fff;
	color: #1A1A1A;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__flow-steps li:last-child { margin-right: 0; }
/* ステップ間の矢印。資料では体験版の流れにもオレンジの「›」が入る */
.mdsah-lp__flow-steps li:after {
	content: "\203A";/* › */
	position: absolute;
	right: -7%;
	top: 50%;
	margin-top: -0.6em;
	color: #F59B23;
	font-size: calc(23.53 * var(--u));
	line-height: 1;
}
.mdsah-lp__flow-steps li:last-child:after { content: none; }
.mdsah-lp__flow-num {
	display: inline-block;
	width: calc(32.94 * var(--u));
	height: calc(32.94 * var(--u));
	margin-right: calc(11.76 * var(--u));
	border-radius: 50%;
	background: #F59B23;
	color: #fff;
	font-size: calc(16.47 * var(--u));
	line-height: calc(32.94 * var(--u));
	text-align: center;
	vertical-align: middle;
}
.mdsah-lp__flow-btn {
	margin: calc(21.18 * var(--u)) 0 0;
	padding: 0;
	text-align: center;
}

/* 体験版の枠（PC版）：資料（LPデザイン (3).xlsx PC版 A10）の実測値。
 * タグ 234x43・見出し24、表紙129幅、ステップのカード 238x99（間隔35に「›」）・番号の丸45、
 * ボタン 300x60。スマホ版の指定に影響しないよう 1200px 以上でだけ効かせる。 */
@media screen and (min-width: 1200px) {
	/* 資料ではこの区画の枠だけ左右の余白が狭い（セクション端から約56） */
	.mdsah-lp__sec--how { padding-left: calc(56 * var(--u)); padding-right: calc(56 * var(--u)); }
	.mdsah-lp__flow--trial { padding: calc(33 * var(--u)) calc(28 * var(--u)) calc(39 * var(--u)) calc(32 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-tag {
		min-width: calc(234 * var(--u));
		margin-right: calc(25 * var(--u));
		padding: 0 calc(20 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(43 * var(--u));
		text-align: center;
	}
	.mdsah-lp__flow--trial .mdsah-lp__flow-title { font-size: calc(24 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-body { margin-top: calc(25 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-fig { width: calc(129 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-steps {
		float: left;
		width: auto;
		margin: calc(6 * var(--u)) 0 0 calc(22 * var(--u));
	}
	.mdsah-lp__flow--trial .mdsah-lp__flow-steps li {
		width: calc(238 * var(--u));
		margin-right: calc(35 * var(--u));
		height: calc(100 * var(--u));
		padding: calc(20 * var(--u)) calc(10 * var(--u)) 0 calc(14 * var(--u));
		font-size: calc(17 * var(--u));
		line-height: calc(40 * var(--u));
		white-space: nowrap;
	}
	.mdsah-lp__flow--trial .mdsah-lp__flow-steps li:last-child { margin-right: 0; }
	.mdsah-lp__flow--trial .mdsah-lp__flow-steps li:after { right: calc(-22 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-num {
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
		margin-right: calc(13 * var(--u));
		font-size: calc(17 * var(--u));
		line-height: calc(40 * var(--u));
	}
	.mdsah-lp__flow--trial .mdsah-lp__flow-btn { margin-top: calc(3 * var(--u)); }
	.mdsah-lp__flow--trial .mdsah-lp__flow-btn .mdsah-lp__btn {
		min-width: calc(300 * var(--u));
		padding-top: calc(16 * var(--u));
		padding-bottom: calc(16 * var(--u));
		font-size: calc(20 * var(--u));
	}
}

/* 通常版・完全版の4ステップ */
/* 4枚のカードは資料どおり高さを揃える。float だと内容量の差で高さがばらつくため
 * table / table-cell を使う（行の高さが自動で揃う） */
.mdsah-lp__bookflow {
	display: table;
	width: 100%;
	margin: calc(23.53 * var(--u)) 0 0;
	padding: 0;
	border-collapse: separate;
	border-spacing: calc(14.12 * var(--u)) 0;
	table-layout: fixed;
}
.mdsah-lp__bookflow li {
	position: relative;
	display: table-cell;
	width: 25%;
	padding: calc(28.24 * var(--u)) calc(18.82 * var(--u)) calc(32.94 * var(--u));
	border-radius: calc(11.76 * var(--u));
	background: #F8F9FD;
	text-align: center;
	vertical-align: top;
}
/* ステップ間の矢印。PC版は右向き、スマホ版は下向き */
.mdsah-lp__bookflow li:after {
	/* カード間（border-spacing の隙間）に置く。z-index を上げないと
	 * 隣のセルの背景に隠れて見えなくなる */
	content: "\203A";/* › */
	position: absolute;
	z-index: 2;
	right: calc(-18.82 * var(--u));
	top: 45%;
	color: #9AA5B8;
	font-size: calc(23.53 * var(--u));
	line-height: 1;
}
.mdsah-lp__bookflow li:last-child:after { content: none; }
.mdsah-lp__bookflow-fig {
	width: 72%;
	margin: 0 auto;
	padding: 0;
}
.mdsah-lp__bookflow li:nth-child(2) .mdsah-lp__bookflow-fig img {
	width: 107.018%;
	max-width: none;
	margin-left: -0.877%;
}
.mdsah-lp__bookflow-num {
	display: block;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	margin: calc(14.12 * var(--u)) auto 0;
	border-radius: 50%;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: calc(40 * var(--u));
	text-align: center;
}
.mdsah-lp__bookflow-num--blue   { background: #2C99D1; }
.mdsah-lp__bookflow-num--green  { background: #42B884; }
.mdsah-lp__bookflow-num--orange { background: #F59B23; }
.mdsah-lp__bookflow-num--purple { background: #6B58A9; }
.mdsah-lp__bookflow-title {
	margin: calc(11.76 * var(--u)) 0 0;
	padding: 0;
	color: #1A1A1A;
	font-size: calc(18.82 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__bookflow-text {
	margin: calc(7.06 * var(--u)) 0 0;
	padding: 0;
	color: #666;
	font-size: calc(15.29 * var(--u));
	line-height: 1.7;
}
.mdsah-lp__bookflow-btn {
	margin: calc(14.12 * var(--u)) 0 0;
	padding: 0;
}

/* 通常版・完全版の用意するもの */
.mdsah-lp__prepare {
	margin: calc(23.53 * var(--u)) 0 0;
	padding: calc(18.82 * var(--u)) calc(23.53 * var(--u));
	border-radius: calc(11.76 * var(--u));
	background: #FFF7EA;
	overflow: hidden;
}
.mdsah-lp__prepare li {
	float: left;
	width: 50%;
	padding-right: calc(18.82 * var(--u));
	box-sizing: border-box;
	overflow: hidden;
}
.mdsah-lp__prepare img {
	float: left;
	width: calc(65.88 * var(--u));
	margin-right: calc(16.47 * var(--u));
}
.mdsah-lp__prepare-name {
	display: block;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	line-height: 1.6;
}
.mdsah-lp__prepare-name--blue  { color: #2C99D1; }
.mdsah-lp__prepare-name--green { color: #42B884; }
.mdsah-lp__prepare-text {
	display: block;
	color: #333;
	font-size: calc(16.47 * var(--u));
	line-height: 1.7;
}

/* 通常版・完全版の枠（PC版）：資料（LPデザイン (3).xlsx PC版 A11）の実測値。
 * ・カードの間隔30。カードの端は下の「毎回用意」の枠の端と揃える（表の外側の間隔を打ち消す）
 * ・アイコンはカードの左右15の内側いっぱい。番号の丸の中心はカード上端から約230
 * ・「›」は紺の太字で、番号の丸と同じ高さ（カード上端から約218）に置く
 * ・書籍購入ボタンは幅181・高さ44
 * ・「毎回用意」の枠は高さ139、表紙93角、通常版と完全版の間に縦の区切り線
 * スマホ版の指定に影響しないよう 1200px 以上でだけ効かせる。 */
@media screen and (min-width: 1200px) {
	.mdsah-lp__flow--book .mdsah-lp__bookflow {
		width: calc(100% + calc(60 * var(--u)));
		margin-left: calc(-30 * var(--u));
		margin-right: calc(-30 * var(--u));
		border-spacing: calc(30 * var(--u)) 0;
	}
	.mdsah-lp__flow--book .mdsah-lp__bookflow li {
		padding-left: calc(15 * var(--u));
		padding-right: calc(15 * var(--u));
	}
	.mdsah-lp__flow--book .mdsah-lp__bookflow-fig { width: 100%; }
	.mdsah-lp__flow--book .mdsah-lp__bookflow li:after {
		top: calc(206 * var(--u));
		right: calc(-19 * var(--u));
		color: #132B59;
		font-size: calc(24 * var(--u));
		font-weight: bold;
	}
	.mdsah-lp__flow--book .mdsah-lp__bookflow-btn .mdsah-lp__btn {
		width: calc(181 * var(--u));
		padding: calc(10.5 * var(--u)) 0;
	}
	.mdsah-lp__flow--book .mdsah-lp__prepare { padding: calc(16 * var(--u)) calc(25 * var(--u)); }
	.mdsah-lp__flow--book .mdsah-lp__prepare li {
		min-height: calc(107 * var(--u));
		padding-right: calc(23 * var(--u));
	}
	.mdsah-lp__flow--book .mdsah-lp__prepare li + li {
		padding-right: 0;
		padding-left: calc(23 * var(--u));
		border-left: 1px solid #F5ECD9;
	}
	.mdsah-lp__flow--book .mdsah-lp__prepare img { width: calc(93 * var(--u)); margin-top: calc(4 * var(--u)); }
	.mdsah-lp__flow--book .mdsah-lp__prepare-name { margin-top: calc(22 * var(--u)); }
	.mdsah-lp__flow--book .mdsah-lp__prepare-text { margin-top: calc(10 * var(--u)); }
}

/* ----------------------------------------------------------------
 * BEFORE BOOKING（スマホ版のみ表示）
 * ---------------------------------------------------------------- */
.mdsah-lp__before {
	margin: calc(28.24 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__before-card {
	margin: 0 0 calc(23.53 * var(--u));
	padding: calc(23.53 * var(--u)) calc(21.18 * var(--u));
	border-radius: calc(16.47 * var(--u));
}
.mdsah-lp__before-card--blue  { background: #EAF7FD; }
.mdsah-lp__before-card--green { background: #E9F8F1; }
.mdsah-lp__before-head {
	overflow: hidden;
}
.mdsah-lp__before-fig {
	float: left;
	width: 36%;
	margin: 0;
	padding: 0;
}
.mdsah-lp__before-body {
	float: right;
	width: 60%;
}
.mdsah-lp__before-tag {
	display: inline-block;
	margin: 0;
	padding: calc(7.06 * var(--u)) calc(25.88 * var(--u));
	border-radius: 999px;
	color: #fff;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	line-height: 1.4;
}
.mdsah-lp__before-tag--blue  { background: #2C99D1; }
.mdsah-lp__before-tag--green { background: #42B884; }
.mdsah-lp__before-title {
	margin: calc(11.76 * var(--u)) 0 0;
	padding: 0;
	color: #1A1A1A;
	font-size: calc(23.53 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__before-text {
	margin: calc(9.41 * var(--u)) 0 0;
	padding: 0;
	color: #666;
	font-size: calc(15.29 * var(--u));
	line-height: 1.7;
}
.mdsah-lp__before-band {
	margin: calc(18.82 * var(--u)) 0 0;
	padding: calc(14.12 * var(--u)) calc(7.06 * var(--u));
	border-radius: calc(9.41 * var(--u));
	background: #fff;
	font-size: calc(16.47 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.mdsah-lp__before-band--blue  { color: #2C99D1; }
.mdsah-lp__before-band--green { color: #42B884; }
.mdsah-lp__before-btn {
	margin: calc(16.47 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__before-btn .mdsah-lp__btn {
	display: block;
	min-width: 0;
	width: 100%;
}

/* ----------------------------------------------------------------
 * GUIDE（PC版のみ表示）
 * ---------------------------------------------------------------- */
.mdsah-lp__guides {
	/* 資料ではカード群がセクション幅の約78%に収まっている */
	max-width: 90%;
	margin: calc(51.76 * var(--u)) auto calc(51.76 * var(--u));
	padding: 0;
}
.mdsah-lp__guides:after { content: ""; display: block; clear: both; }
.mdsah-lp__guide {
	/* 資料の実測（カード336x513・内側パネル295x416 / 1425px幅のキャプチャ基準を1200に換算）
	 * 上下の余白が非対称で、下が広い。 */
	float: left;
	width: 30.5%;
	margin-right: 4.25%;
	padding: calc(20 * var(--u)) calc(17 * var(--u)) calc(61 * var(--u));
	border-radius: calc(23.53 * var(--u));
	box-sizing: border-box;
	box-shadow: calc(7.06 * var(--u)) calc(7.06 * var(--u)) 0 #132B59;
	text-align: center;
}
.mdsah-lp__guide:last-child { margin-right: 0; }
.mdsah-lp__guide--orange { background: #FFF2DF; }
.mdsah-lp__guide--blue   { background: #EAF7FD; }
.mdsah-lp__guide--green  { background: #E9F8F1; }
.mdsah-lp__guide img {
	border-radius: calc(7.06 * var(--u));
}

/* ----------------------------------------------------------------
 * フッターCTA
 * ---------------------------------------------------------------- */
.mdsah-lp__foot {
	position: relative;
	padding: calc(23 * var(--u)) calc(82.35 * var(--u)) calc(206 * var(--u));
	background: #132B59;
	overflow: hidden;
	text-align: center;
}
/* 星の装飾。資料のフッター（1200x686）での実測値をそのまま％で置いている。
 * 背景画像を cover で敷くとフッターの高さが変わるたびに全部ずれるため、1枚ずつ配置する。 */
.mdsah-lp__foot-star {
	position: absolute;
	display: block;
}
.mdsah-lp__foot-star--orange { left: 4.14%;  top: 12.70%; width: 6.06%; }
.mdsah-lp__foot-star--green  { left: 88.27%; top: 24.16%; width: 4.20%; }
.mdsah-lp__foot-star--blue   { left: 82.55%; top: 80.04%; width: 6.99%; }
.mdsah-lp__foot-star--yellow { left: 13.89%; top: 90.98%; width: 3.21%; }
.mdsah-lp__foot-logo {
	/* 資料の実測: 高さ164 → 幅200 */
	width: calc(200 * var(--u));
	margin: 0 auto;
	padding: 0;
}
.mdsah-lp__foot-title {
	margin: calc(10 * var(--u)) 0 0;
	padding: 0;
	color: #fff;
	font-size: calc(30.59 * var(--u));
	font-weight: bold;
	line-height: 1.5;
}
.mdsah-lp__foot-lead {
	margin: calc(21 * var(--u)) 0 0;
	padding: 0;
	color: #cfd8e8;
	font-size: calc(16.47 * var(--u));
	line-height: 1.7;
}
.mdsah-lp__foot-ctas {
	max-width: 93.6%;
	margin: calc(30 * var(--u)) auto 0;
	padding: 0;
	overflow: hidden;
}
.mdsah-lp__foot-ctas li {
	float: left;
	width: 31%;
	margin-right: 3.5%;
}
.mdsah-lp__foot-ctas li:last-child { margin-right: 0; }
.mdsah-lp__foot-fig {
	width: 35%;
	margin: 0 auto;
	padding: 0;
}
.mdsah-lp__foot-name {
	margin: calc(11.76 * var(--u)) 0 0;
	padding: 0;
	color: #fff;
	font-size: calc(17.65 * var(--u));
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
}
.mdsah-lp__foot-btn {
	margin: calc(13 * var(--u)) 0 0;
	padding: 0;
}
.mdsah-lp__foot-btn .mdsah-lp__btn {
	display: block;
	min-width: 0;
	width: 100%;
}
/* コピーライトの位置は資料どおり出し分ける。
 * PC版はヒーローの下、スマホ版はフッターの最後に1か所だけ置く。 */
.mdsah-lp__foot-copy {
	display: none;
	margin: calc(35.29 * var(--u)) 0 0;
	padding: 0;
	color: #b9c4d8;
	font-size: calc(12.94 * var(--u));
	line-height: 1.5;
}

/* ----------------------------------------------------------------
 * スマホ版（1199px以下・資料の幅720px版）
 * 資料のスマホ版に合わせて縦積みにし、PC版のみ／スマホ版のみの要素を入れ替える。
 * 枠は col-sm-9 なので、768px以上ではカラム幅 = 0.75 x 100vw - 30px（サイドバーあり）。
 * ビューポート1199px以下だとカラムが約869px以下になり、資料PC版(1200px)を
 * そのまま縮小すると本文が10px前後まで小さくなって読めない。
 * 資料スマホ版の基準幅720pxに近いこの帯から、スマホ版に切り替える。
 * ---------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

	/* スマホ版は資料（幅720px＝実寸360px）に比例させる。1単位 --s ＝ LPの幅 / 360。
	 * 値は「資料の数値 ÷ 2」を calc(N * var(--s)) で書く（例：資料で 28px → calc(14 * var(--s))）。
	 * タブレット幅でも LP はカラムの幅いっぱいに広げる（中央に細く置くと左右に大きな空白が残るため）。
	 * ただし文字が大きくなりすぎないよう、--s は 1.5px（LP幅540px相当）で頭打ちにする。
	 * それより広いカラムでは、文字・余白は 1.5倍のまま、カードや画像の幅だけがカラムに合わせて広がる。
	 * カラム幅は、767px以下はサイドバーなし（100vw - 30px）、768px以上はサイドバーあり（0.75 x 100vw - 30px）。
	 * ここで上書きしていないPC版の比例指定（var(--u)）も同じ比率で縮むよう、--u も --s から決める
	 * （LP幅345pxのとき --u = 0.85px になる値）。min() 未対応のブラウザは --s = 1px（LP幅360px相当）。 */
	.mdsah-lp {
		--s: 1px;
		--u: calc(0.887 * var(--s));
		max-width: none;
	}
	@supports (width: min(1px, 2px)) {
		.mdsah-lp { --s: min(calc((75vw - 30px) / 360), 1.5px); }
	}
}
@media screen and (max-width: 767px) {
	@supports (width: min(1px, 2px)) {
		.mdsah-lp { --s: min(calc((100vw - 30px) / 360), 1.5px); }
	}
}
@media screen and (max-width: 1199px) {

	.mdsah-lp {
		font-size: calc(13.46 * var(--s));
	}
	.mdsah-lp__pconly,
	.mdsah-lp__pconly-block,
	.mdsah-lp__table {
		display: none;
	}
	.mdsah-lp__sponly,
	.mdsah-lp__sponly-block,
	.mdsah-lp__levelcards {
		display: block;
	}
	/* 資料スマホ版の折り返し位置に合わせた改行は、LP幅が資料と同じ比率で縮む幅（--s が上限1.5pxに
	 * 達するまで＝ビューポート569px以下）だけで効かせる。タブレット幅で効かせると、広い行の途中で
	 * 単語が切れて不自然に見えるため（下の @media を参照）。 */
	.mdsah-lp__br-sp { display: none; }
	/* 句読点の後の改行（見出しの区切り）は、スマホ版のレイアウトでは幅に関係なく効かせる */
	.mdsah-lp__br-sp2 { display: inline; }
	/* PC版だけで改行する位置（スマホ版は資料どおり1行に流す） */
	.mdsah-lp__br-pc { display: none; }

	.mdsah-lp__btn {
		min-width: 0;
		width: 100%;
		padding: calc(13.46 * var(--s)) calc(30.68 * var(--s)) calc(13.46 * var(--s)) calc(19.2 * var(--s));
		font-size: calc(14.4 * var(--s));
	}

	/* ヘッダーバー */
	/* 375px幅でも資料どおり1行に収める（タイトル＋教材一覧＋予約へ） */
	.mdsah-lp__bar { padding: calc(9.6 * var(--s)) calc(11.48 * var(--s)); }
	.mdsah-lp__bar-title { margin: calc(4.8 * var(--s)) 0 0; font-size: calc(12.52 * var(--s)); }
	.mdsah-lp__bar-nav li { margin-left: calc(9.6 * var(--s)); }
	.mdsah-lp__bar-link { padding: calc(5.74 * var(--s)) 0; font-size: calc(10.54 * var(--s)); }
	.mdsah-lp__bar-btn { padding: calc(5.74 * var(--s)) calc(13.46 * var(--s)); font-size: calc(11.48 * var(--s)); }

	/* ヒーロー（写真の下に濃紺ブロックを積む） */
	/* 資料のスマホ版ヒーロー写真は 1.4:1。支給素材（トップ画像）は 2:1 の横長なので、
	 * そのまま全幅で置くと帯が低くなりお子さまが小さく写る。枠を 1.4:1 にして
	 * 資料と同じ寄りのトリミングにする。SP用に別トリミングが支給されたら枠は外してよい。 */
	.mdsah-lp__hero-photo {
		position: relative;
		width: auto;
		height: 0;
		padding-top: 74%;
		overflow: hidden;
	}
	.mdsah-lp__hero-photo img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 68% center;
	}
	.mdsah-lp__hero-body {
		padding: calc(16 * var(--s)) calc(19.2 * var(--s)) calc(21 * var(--s));
		background: #132B59;
	}
	/* 資料どおりロゴを左、対象年齢バッジを右に並べる。
	 * ロゴはブロックのままだとバッジが下に落ちるので、同じ行に乗せるため左に回り込ませる */
	/* 以下、資料スマホ版の実測値（ロゴ幅110、見出し25、本文11、ボタン高さ46） */
	.mdsah-lp__hero-logo {
		float: left;
		width: calc(130 * var(--s));
		max-width: 48%;
	}
	.mdsah-lp__hero-age {
		float: right;
		margin: calc(4 * var(--s)) 0 0;
		padding: calc(4 * var(--s)) calc(14 * var(--s));
		font-size: calc(11.5 * var(--s));
	}
	.mdsah-lp__hero-title { margin: calc(2 * var(--s)) 0 0; font-size: calc(25 * var(--s)); line-height: 1.38; clear: both; }
	.mdsah-lp__hero-text { max-width: none; margin-top: calc(14 * var(--s)); font-size: calc(12 * var(--s)); line-height: 1.62; }
	.mdsah-lp__hero-books { max-width: none; margin-top: calc(18 * var(--s)); }
	.mdsah-lp__hero-btns { margin-top: calc(20 * var(--s)); }
	.mdsah-lp__hero-btns .mdsah-lp__btn { margin: 0 0 calc(14 * var(--s)); padding-top: calc(14 * var(--s)); padding-bottom: calc(14 * var(--s)); }
	.mdsah-lp__hero-btns .mdsah-lp__btn:last-child { margin-bottom: 0; }
	/* 資料のスマホ版ヒーローにはコピーライトがない（フッターに1か所だけ置く） */
	.mdsah-lp__hero-copy { display: none; }
	.mdsah-lp__foot-copy { display: block; }

	/* セクション共通 */
	.mdsah-lp__sec { padding: calc(34.54 * var(--s)) calc(18 * var(--s)); }
	.mdsah-lp__eyebrow { font-size: calc(11.48 * var(--s)); }
	.mdsah-lp__heading { font-size: calc(21.08 * var(--s)); }
	.mdsah-lp__lead { font-size: calc(11.2 * var(--s)); line-height: 1.66; }
	/* 注記（※〜）は資料ではどの区画も約9.5 */
	.mdsah-lp__note { font-size: calc(9.5 * var(--s)); line-height: 1.6; }

	/* WHY KIDS LOVE IT（資料スマホ版の実測値） */
	.mdsah-lp__why-card,
	.mdsah-lp__points {
		float: none;
		width: auto;
	}
	/* 資料のスマホ版は紺の枠線ではなく、薄い枠線と影のカード */
	.mdsah-lp__why-card {
		padding: calc(10 * var(--s));
		border: 1px solid #E6EAF1;
		border-radius: calc(14 * var(--s));
	}
	.mdsah-lp__why-badge {
		left: calc(8 * var(--s));
		bottom: calc(8 * var(--s));
		padding: calc(4 * var(--s)) calc(14 * var(--s));
		font-size: calc(11 * var(--s));
	}
	.mdsah-lp__why-caption { margin: calc(10 * var(--s)) 0 calc(4 * var(--s)); font-size: calc(13 * var(--s)); }
	/* ポイント：アイコン40角、アイコンと見出しの間14、ポイントの間隔約98 */
	.mdsah-lp__points { margin-top: calc(34 * var(--s)); }
	.mdsah-lp__point { margin: 0 0 calc(33 * var(--s)); padding: 0 calc(13.5 * var(--s)) 0 calc(56.5 * var(--s)); }
	.mdsah-lp__point:last-child { margin-bottom: 0; }
	.mdsah-lp__point:before {
		left: calc(4 * var(--s));
		top: 0;
		width: calc(40 * var(--s));
		height: calc(40 * var(--s));
		border-radius: calc(10 * var(--s));
	}
	.mdsah-lp__point:after {
		left: calc(14 * var(--s));
		top: calc(10 * var(--s));
		width: calc(13 * var(--s));
		height: calc(13 * var(--s));
		border-width: calc(3.5 * var(--s));
	}
	.mdsah-lp__point-title { font-size: calc(15 * var(--s)); }
	.mdsah-lp__point-text { margin-top: calc(4 * var(--s)); font-size: calc(11 * var(--s)); line-height: 1.6; }

	/* CHOOSE YOUR STYLE（資料スマホ版の実測値。この区画は上端・見出しとリード・リードとカードの間が広い） */
	.mdsah-lp__sec--style { padding-top: calc(43.5 * var(--s)); }
	.mdsah-lp__sec--style .mdsah-lp__lead { margin-top: calc(30.6 * var(--s)); }
	.mdsah-lp__styles { margin-top: calc(60 * var(--s)); }
	.mdsah-lp__style {
		float: none;
		width: auto;
		margin: 0 0 calc(23.06 * var(--s));
	}
	.mdsah-lp__style:last-child { margin-bottom: 0; }
	/* カード内は資料スマホ版の実測値に合わせる（PC版の値をそのまま使うと倍近く大きくなる） */
	.mdsah-lp__style { padding-bottom: calc(7 * var(--s)); }
	.mdsah-lp__style-tag { width: 62%; margin-top: calc(16.7 * var(--s)); padding: calc(4.17 * var(--s)) 0; font-size: calc(11 * var(--s)); }
	.mdsah-lp__style-fig { width: 31%; margin-top: calc(10.43 * var(--s)); }
	.mdsah-lp__style-name { margin-top: calc(4.17 * var(--s)); font-size: calc(22 * var(--s)); }
	.mdsah-lp__style-en { font-size: calc(10.5 * var(--s)); }
	/* 帯・ボタン・「迷ったらここから」はカード端から19.5、説明文は31.5、チェックリストは30.5 内側 */
	.mdsah-lp__style-band { margin: calc(17 * var(--s)) calc(19.5 * var(--s)) 0; padding: calc(11.5 * var(--s)) calc(6.26 * var(--s)); font-size: calc(13 * var(--s)); }
	.mdsah-lp__style-text { margin: calc(17.74 * var(--s)) calc(30 * var(--s)) 0; font-size: calc(11.8 * var(--s)); line-height: 1.64; }
	.mdsah-lp__checks { margin: calc(30 * var(--s)) calc(19.5 * var(--s)) 0 calc(30.5 * var(--s)); }
	.mdsah-lp__checks li { margin-bottom: calc(15 * var(--s)); padding-left: calc(21 * var(--s)); font-size: calc(12 * var(--s)); }
	.mdsah-lp__checks li:before {
		top: calc(2 * var(--s));
		width: calc(15 * var(--s));
		height: calc(15 * var(--s));
		font-size: calc(10 * var(--s));
		line-height: calc(15 * var(--s));
	}
	.mdsah-lp__style-note { margin: calc(19.83 * var(--s)) calc(19.5 * var(--s)) 0; padding: calc(5 * var(--s)) calc(6.26 * var(--s)); font-size: calc(11 * var(--s)); font-weight: bold; color: #555; }
	.mdsah-lp__style-btn { margin: calc(12.52 * var(--s)) calc(19.5 * var(--s)) 0; }
	.mdsah-lp__style-btn .mdsah-lp__btn { padding-top: calc(10.5 * var(--s)); padding-bottom: calc(10.5 * var(--s)); font-size: calc(13 * var(--s)); }

	/* QUICK GUIDE（資料スマホ版の実測値）
	 * カードは高さ114で揃え、文言は左上から流す。矢印とラベルはカード右側の上下中央に固定する。 */
	.mdsah-lp__quick { margin-top: calc(62 * var(--s)); }
	.mdsah-lp__quick-card {
		position: relative;
		float: none;
		width: auto;
		min-height: calc(114 * var(--s));
		margin: 0 0 calc(19 * var(--s));
		padding: calc(23 * var(--s)) calc(16.5 * var(--s)) calc(16 * var(--s)) calc(13 * var(--s));
		overflow: hidden;
		text-align: left;
	}
	.mdsah-lp__quick-card:last-child { margin-bottom: 0; }
	.mdsah-lp__quick-text {
		float: none;
		width: auto;
		margin-right: calc(96 * var(--s));
		font-size: calc(12 * var(--s));
		line-height: 1.58;
	}
	.mdsah-lp__quick-arrow {
		position: absolute;
		top: 50%;
		right: calc(96 * var(--s));
		margin: calc(-9 * var(--s)) 0 0;
		padding: 0;
		font-size: calc(16 * var(--s));
	}
	.mdsah-lp__quick-arrow:before { content: "\2192";/* → */ }
	.mdsah-lp__quick-pill {
		position: absolute;
		top: 50%;
		right: calc(16.5 * var(--s));
		width: calc(75 * var(--s));
		margin: calc(-18 * var(--s)) 0 0;
		padding: 0;
		font-size: calc(13 * var(--s));
		line-height: calc(36 * var(--s));
		text-align: center;
	}
	.mdsah-lp__quick-foot {
		max-width: none;
		margin-top: calc(27.5 * var(--s));
		padding: calc(12.7 * var(--s)) calc(10 * var(--s));
		font-size: calc(11.1 * var(--s));
	}

	/* 7 LEVELS（資料スマホ版の実測値。この区画は見出しが一回り大きく、リード文は小さい） */
	/* 資料スマホ版には末尾の注記（※学習段階の目安…）がなく、「迷っていますか」の枠の下は約110の余白 */
	.mdsah-lp__sec--levels { padding-bottom: calc(110 * var(--s)); }
	.mdsah-lp__sec--levels .mdsah-lp__heading { font-size: calc(21.5 * var(--s)); }
	.mdsah-lp__sec--levels .mdsah-lp__lead { font-size: calc(8.4 * var(--s)); line-height: 1.7; }
	/* 書影のカード：PC版の左右へのはみ出し指定を弱め、資料どおり4枚で約328幅に収める */
	.mdsah-lp__levels { width: calc(100% + calc(4 * var(--s))); margin: calc(35.29 * var(--u)) calc(-2 * var(--s)) 0; }
	.mdsah-lp__levels li {
		width: 22.6%;
		margin: 0 1.2% calc(12 * var(--s));
		padding: calc(7 * var(--s)) calc(6 * var(--s)) calc(10 * var(--s));
	}
	.mdsah-lp__levels span { margin-top: calc(6 * var(--s)); font-size: calc(10 * var(--s)); }

	/* レベル表（Starter〜Level 6）：高さ107で揃え、バッジ・CEFR・段階を1行、その下にランクと区切り線、説明文は1行 */
	.mdsah-lp__levelcards li {
		min-height: calc(107 * var(--s));
		margin: 0 0 calc(8 * var(--s));
		padding: calc(11 * var(--s)) calc(10.5 * var(--s)) calc(12 * var(--s));
		border: 1px solid #E6EAF1;
		border-radius: calc(12 * var(--s));
	}
	.mdsah-lp__levelcard-badge {
		min-width: calc(63.5 * var(--s));
		margin-right: calc(8 * var(--s));
		padding: calc(5.4 * var(--s)) calc(12 * var(--s));
		font-size: calc(10.5 * var(--s));
	}
	.mdsah-lp__levelcard-cefr { margin-right: calc(6 * var(--s)); font-size: calc(9.2 * var(--s)); }
	.mdsah-lp__levelcard-stage { font-size: calc(9.2 * var(--s)); }
	/* 区切り線は資料どおりカード幅いっぱいに引く（文字の開始位置はバッジの右に揃える） */
	.mdsah-lp__levelcard-rank {
		margin: calc(1 * var(--s)) calc(6 * var(--s)) 0;
		padding: 0 0 calc(8.5 * var(--s)) calc(65.5 * var(--s));
		font-size: calc(7.5 * var(--s));
	}
	.mdsah-lp__levelcard-text { margin-top: calc(10 * var(--s)); font-size: calc(8.4 * var(--s)); }

	/* レベル選びに迷っていますか？ */
	.mdsah-lp__lost { padding: calc(27 * var(--s)) calc(16 * var(--s)); }
	.mdsah-lp__lost-body,
	.mdsah-lp__lost-btn {
		float: none;
		width: auto;
	}
	.mdsah-lp__lost-title { font-size: calc(16.6 * var(--s)); text-align: center; }
	.mdsah-lp__lost-text { margin-top: calc(14 * var(--s)); font-size: calc(11.1 * var(--s)); line-height: 1.75; text-align: center; }
	.mdsah-lp__lost-btn { margin: calc(32 * var(--s)) calc(11 * var(--s)) 0; }

	/* INSIDE THE LESSON
	 * PC版は2枚の高さを揃えるため、表組み（table / table-cell）と左右へのはみ出しで並べている。
	 * スマホ版は資料どおり2枚を全幅で縦に並べるので、表組みとはみ出しをここで解除する。
	 * 余白・ラベルの大きさは資料スマホ版（LPデザイン (3).xlsx の A16・A17）の実測値。 */
	.mdsah-lp__inside {
		display: block;
		width: auto;
		margin: calc(78 * var(--s)) calc(9 * var(--s)) 0;
		border-spacing: 0;
	}
	/* 資料ではこの区画の見出しまわり（英字ラベル・見出し・リード）が他の区画の約0.75倍で組まれている */
	.mdsah-lp__sec--inside .mdsah-lp__eyebrow { font-size: calc(8.6 * var(--s)); }
	.mdsah-lp__sec--inside .mdsah-lp__heading { font-size: calc(15.5 * var(--s)); line-height: 1.76; }
	.mdsah-lp__sec--inside .mdsah-lp__lead { font-size: calc(8.3 * var(--s)); }
	.mdsah-lp__inside li {
		display: block;
		float: none;
		width: auto;
		margin: 0 0 calc(29.22 * var(--s));
		padding: calc(5.22 * var(--s)) calc(9.39 * var(--s)) calc(33.39 * var(--s));
	}
	.mdsah-lp__inside li:last-child { margin-bottom: 0; }
	.mdsah-lp__inside-badge {
		left: calc(16.7 * var(--s));
		bottom: calc(36.52 * var(--s));
		padding: calc(4.17 * var(--s)) calc(8.35 * var(--s));
		font-size: calc(12.52 * var(--s));
	}
	/* 4色ボタンは資料どおり 幅75前後・高さ36 を横幅いっぱいに4つ並べる（li間の空白を消すため ul の文字サイズを0にする） */
	.mdsah-lp__skills { margin-top: calc(38 * var(--s)); font-size: 0; }
	.mdsah-lp__skills li {
		min-width: 0;
		width: calc(73.5 * var(--s));
		margin: 0 calc(3.5 * var(--s)) calc(8 * var(--s));
		padding: 0;
		font-size: calc(13 * var(--s));
		line-height: calc(36 * var(--s));
	}

	/* HOW TO START（資料スマホ版の実測値） */
	.mdsah-lp__sec--how .mdsah-lp__lead { margin-top: calc(34 * var(--s)); }
	.mdsah-lp__flow { margin-top: calc(43 * var(--s)); padding: calc(25.5 * var(--s)) calc(15 * var(--s)) calc(12 * var(--s)); }
	.mdsah-lp__flow--book { margin-top: calc(26 * var(--s)); padding: calc(27 * var(--s)) calc(13 * var(--s)) calc(16 * var(--s)); }
	.mdsah-lp__flow-tag {
		min-width: calc(139 * var(--s));
		margin: 0;
		padding: 0 calc(16 * var(--s));
		font-size: calc(14 * var(--s));
		line-height: calc(34 * var(--s));
		text-align: center;
	}
	.mdsah-lp__flow--book .mdsah-lp__flow-tag { min-width: calc(157.5 * var(--s)); }
	.mdsah-lp__flow-title { display: block; margin-top: calc(17 * var(--s)); font-size: calc(15 * var(--s)); line-height: 1.5; }
	.mdsah-lp__flow-body { margin-top: 0; }
	.mdsah-lp__flow-fig {
		float: none;
		width: calc(111 * var(--s));
		margin: calc(16 * var(--s)) auto 0;
	}
	.mdsah-lp__flow-steps {
		float: none;
		width: auto;
		margin-top: calc(4 * var(--s));
	}
	/* ステップは高さ47の白い行。番号の丸は30角 */
	.mdsah-lp__flow-steps li {
		float: none;
		width: auto;
		margin: 0 0 calc(10 * var(--s));
		padding: 0 calc(10 * var(--s)) 0 calc(10.5 * var(--s));
		font-size: calc(13 * var(--s));
		line-height: calc(47 * var(--s));
	}
	.mdsah-lp__flow-steps li:last-child { margin-bottom: 0; }
	.mdsah-lp__flow-num {
		width: calc(30 * var(--s));
		height: calc(30 * var(--s));
		margin-right: calc(15 * var(--s));
		font-size: calc(13 * var(--s));
		line-height: calc(30 * var(--s));
	}
	/* 資料のスマホ版は体験版のステップを縦積みにし、矢印は入れない */
	.mdsah-lp__flow-steps li:after { content: none; }
	.mdsah-lp__flow-btn { margin: calc(25.5 * var(--s)) calc(15 * var(--s)) 0; }

	/* 通常版・完全版の4ステップ：高さ186の枠に、アイコンを左（上から74.5の位置で上下中央）、
	 * 番号＋見出し・説明・ボタンを右の列（枠の左から127）に組む。
	 * 列を分けるため、アイコンは回り込みではなく絶対配置にしている（説明文がアイコンの下に回り込まない）。 */
	.mdsah-lp__bookflow {
		display: block;
		margin-top: calc(25 * var(--s));
		border-spacing: 0;
	}
	.mdsah-lp__bookflow li {
		display: block;
		width: auto;
		min-height: calc(186 * var(--s));
		margin: 0 0 calc(37.5 * var(--s));
		padding: calc(23.5 * var(--s)) calc(33 * var(--s)) calc(21 * var(--s)) calc(127 * var(--s));
		border: 1px solid #E6EAF1;
		text-align: left;
	}
	.mdsah-lp__bookflow li:last-child { margin-bottom: 0; }
	/* カード間の下向き矢印（すき間37.5の中央） */
	.mdsah-lp__bookflow li:before {
		content: "\2193";/* ↓ */
		position: absolute;
		left: 50%;
		bottom: calc(-30 * var(--s));
		margin-left: calc(-6 * var(--s));
		color: #4B5563;
		font-size: calc(16 * var(--s));
		line-height: 1;
	}
	/* PC版の「最後のカードは矢印なし」(li:last-child:after) とクリアフィックスの打ち消し */
	.mdsah-lp__bookflow li:after { content: none; }
	.mdsah-lp__bookflow li:last-child:before { content: none; }
	.mdsah-lp__bookflow-fig {
		position: absolute;
		left: calc(13 * var(--s));
		top: calc(74.5 * var(--s));
		width: calc(98 * var(--s));
		margin: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.mdsah-lp__bookflow-num {
		display: inline-block;
		width: calc(30.5 * var(--s));
		height: calc(30.5 * var(--s));
		margin: 0 calc(9 * var(--s)) 0 0;
		font-size: calc(13 * var(--s));
		line-height: calc(30.5 * var(--s));
		vertical-align: middle;
	}
	.mdsah-lp__bookflow-title {
		display: inline;
		margin: 0;
		font-size: calc(13 * var(--s));
		white-space: nowrap;
		vertical-align: middle;
	}
	.mdsah-lp__bookflow-text { margin: calc(13 * var(--s)) 0 0; font-size: calc(10.8 * var(--s)); line-height: 1.7; }
	.mdsah-lp__bookflow-btn { margin: calc(25 * var(--s)) 0 0; }
	.mdsah-lp__bookflow-btn .mdsah-lp__btn {
		width: calc(152.5 * var(--s));
		padding: 0;
		font-size: calc(13 * var(--s));
		line-height: calc(37.5 * var(--s));
	}

	/* 毎回用意するもの：高さ約80の行を2つ、間に区切り線 */
	.mdsah-lp__prepare { margin: calc(23.5 * var(--s)) 0 0; padding: calc(15 * var(--s)) calc(12.5 * var(--s)); }
	.mdsah-lp__prepare li {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}
	.mdsah-lp__prepare li + li { margin-top: calc(15 * var(--s)); padding-top: calc(15 * var(--s)); border-top: 1px solid #F0E3CC; }
	.mdsah-lp__prepare img { width: calc(59.5 * var(--s)); margin-right: calc(14 * var(--s)); }
	.mdsah-lp__prepare-name { margin-top: calc(4 * var(--s)); font-size: calc(12.5 * var(--s)); }
	.mdsah-lp__prepare-text { margin-top: calc(4 * var(--s)); font-size: calc(10.8 * var(--s)); }
	.mdsah-lp__flow--book .mdsah-lp__note { margin-top: calc(36 * var(--s)); }

	/* GUIDE はスマホ版では非表示（資料どおり） */

	/* フッターCTA */
	/* 資料スマホ版の実測値：左右の余白33、表紙88角、行の間隔約165、ボタン幅193・高さ48 */
	.mdsah-lp__foot { padding: calc(35 * var(--s)) calc(33 * var(--s)) calc(86.4 * var(--s)); }
	.mdsah-lp__foot-logo { width: calc(124 * var(--s)); }
	.mdsah-lp__foot-title { font-size: calc(14.4 * var(--s)); }
	.mdsah-lp__foot-lead { font-size: calc(10.8 * var(--s)); }
	.mdsah-lp__foot-copy { margin-top: calc(86.4 * var(--s)); }
	/* 資料のスマホ版フッターには星の装飾がない */
	.mdsah-lp__foot-star { display: none; }
	.mdsah-lp__foot-ctas {
		max-width: none;
	}
	.mdsah-lp__foot-ctas { margin-top: calc(48 * var(--s)); }
	.mdsah-lp__foot-ctas li {
		float: none;
		width: auto;
		margin: 0 0 calc(77 * var(--s));
		overflow: hidden;
	}
	.mdsah-lp__foot-ctas li:last-child { margin-bottom: 0; }
	.mdsah-lp__foot-fig {
		float: left;
		width: calc(88 * var(--s));
		margin: 0 calc(16 * var(--s)) 0 0;
	}
	/* 版名は資料どおりボタンの左端から約10.5右に寄せる */
	.mdsah-lp__foot-name { margin: calc(4 * var(--s)) 0 0; text-indent: calc(10.5 * var(--s)); font-size: calc(13 * var(--s)); }
	.mdsah-lp__foot-btn { margin: calc(12 * var(--s)) 0 0; overflow: hidden; }
	.mdsah-lp__foot-btn .mdsah-lp__btn { padding-top: calc(15 * var(--s)); padding-bottom: calc(15 * var(--s)); font-size: calc(13 * var(--s)); }

	/* BEFORE BOOKING（スマホ版のみのブロック。資料スマホ版の実測値）
	 * カードは 上下30・左右16.5 の余白、表紙100角の右に ラベル・見出し・説明、その下に帯とボタン。 */
	.mdsah-lp__sec--before .mdsah-lp__heading { line-height: 1.42; }
	.mdsah-lp__sec--before .mdsah-lp__lead { margin-top: calc(12 * var(--s)); }
	.mdsah-lp__before { margin-top: calc(48 * var(--s)); }
	.mdsah-lp__before-card {
		margin: 0 0 calc(30 * var(--s));
		padding: calc(16 * var(--s)) calc(16.5 * var(--s)) calc(33 * var(--s));
		border-radius: calc(16 * var(--s));
	}
	/* 表紙は右の文字の列に対して上下中央（資料では上から約18下がる） */
	.mdsah-lp__before-fig { width: calc(100 * var(--s)); margin-top: calc(18 * var(--s)); }
	.mdsah-lp__before-body { float: none; width: auto; margin-left: calc(118 * var(--s)); }
	.mdsah-lp__before-tag { padding: calc(5 * var(--s)) calc(22 * var(--s)); font-size: calc(13 * var(--s)); }
	/* 見出しはPC側の比例指定のままだと約20pxで「1／冊」と折り返す。資料は1行なので実測値に合わせる */
	.mdsah-lp__before-title { margin-top: calc(10 * var(--s)); font-size: calc(18 * var(--s)); }
	.mdsah-lp__before-text { margin-top: calc(10 * var(--s)); font-size: calc(11.5 * var(--s)); line-height: 1.7; }
	.mdsah-lp__before-band { margin-top: calc(40 * var(--s)); padding: calc(9.5 * var(--s)) calc(6 * var(--s)); font-size: calc(12 * var(--s)); }
	.mdsah-lp__before-btn { margin: calc(25.5 * var(--s)) calc(13 * var(--s)) 0; }
	.mdsah-lp__before-btn .mdsah-lp__btn { padding-top: calc(14 * var(--s)); padding-bottom: calc(14 * var(--s)); }

	/* カードの影
	 * PC版は紺のオフセット影だが、資料スマホ版はどのカードも薄いグレーのぼかし影（右と下にだけ出る）。
	 * カードごとに書くと直し漏れが出るので、スマホ版で影を持つカードはここにまとめる。 */
	.mdsah-lp__why-card,
	.mdsah-lp__style,
	.mdsah-lp__quick-card,
	.mdsah-lp__levels li,
	.mdsah-lp__inside li,
	.mdsah-lp__flow--trial,
	.mdsah-lp__flow--book,
	.mdsah-lp__before-card {
		box-shadow: calc(1.04 * var(--s)) calc(3.13 * var(--s)) calc(6.26 * var(--s)) rgba(19, 43, 89, .14);
	}
}


/* ----------------------------------------------------------------
 * スマホ（430px以下）は資料どおり LP を画面の端から端まで表示する。
 * 共通枠では本文カラム（#maincontents）に左右15pxの余白、本文の上（div.contentsbody）に
 * 15pxの間隔があり、紺のヒーロー・フッターが白い縁取りの中に浮いて見えるため打ち消す。
 * ・左右：LP に -15px の左右マージン（#maincontents の余白の内側なので切れない）
 * ・上　：#maincontents は overflow:hidden のため LP を上にずらすと切れる。上の間隔そのもの
 *         （div.contentsbody の margin-top）を0にする。この CSS はこのページでしか読み込まれない
 *         ので、共通枠のファイルや他ページには影響しない。
 * 431〜767px は余白を残す（全幅にすると 1単位が大きくなりすぎ、文字が大きくなるため）。
 * ---------------------------------------------------------------- */
@media screen and (max-width: 430px) {
	div.contentsbody { margin-top: 0; }
	.mdsah-lp {
		--s: calc(100vw / 360);
		max-width: none;
		margin: 0 -15px;
	}
}
@media screen and (max-width: 569px) {
	.mdsah-lp__br-sp { display: inline; }
}