@charset "utf-8";
/* ==========================================================================
   電子ブック制作ページ（LP）専用CSS   2026-08-08 新規
   - 既存の reset.css / common.css / style.css / meanmenu.css の後に読み込む
   - すべてのクラスに eb- プレフィックスを付け、既存ページに影響を出さない
   - ブレークポイントは既存準拠の max-width:1023px / max-width:639px の2段
   - 内側幅1024px＝既存準拠 ／ 文字サイズ・色・余白＝XDカンプ実測値

   【XD実測の基本値】アートボード1440px・内側コンテンツ900px（270〜1170）
     色
       濃紺           #0d2b51
       ブルーグレー   #8ba2c0（英字ラベル・番号・記号は写真の上でもすべてこの色）
       淡い背景       #f2f9ff
       区切り線       #e9eff5（料金表の中だけ #8ba2c0）
       本文           #444444
       写真の上の膜   #0d2b51 / 不透明度 0.75 /【乗算】※通常の重ねだと薄くなる
     角丸             8px（比較カードの内側のみ 4px／ボタンは25px）
     アイコンの丸     48px（ACTIBOOKのPOINTのみ 64px）
     カラム間の余白   3カラム=24px ／ 2カラム=8px
     セクションの余白 白・淡色＝上48px 下80px ／ 写真＝上80px 下96px

   【文字の間隔（インク間＝見た目の隙間）の実測値】
     英字ラベル → 見出し   13px
     見出し     → 導入文   24px
     導入文     → 本体     18px
   CSSのmarginは、上下の行間（half-leading）を差し引いた値を入れている。
   例）見出し24px・導入文14pxなら 24 -(24+14)*0.25 = 14px
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */

/* 内側コンテナ（既存 .contentsArea と同じ 1024px） */
/* コンテンツ幅1024px＋左右に最低20pxの余白を常に確保する。
   2026-08-13 レビュー指摘：max-width:1024pxだけだと、ビューポート
   1024〜1063pxの間で左右の余白が0になる（1023px以下は20pxあるのに）。
   「1024px（中身）＋20px×2（余白）＝1064px」を上限にして内側に
   paddingを持たせると、1064px以上ではこれまでと同じ位置・
   1063px以下でも常に20pxの余白が残る。メディアクエリも不要になる */
.eb-inner{
	max-width: 1064px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* セクション。style.css の section{padding:50px 0} を上書きする。
   XD実測：白・淡色セクションは上48px／下80px

   ★字送り・行間の基準（2026-08-09 XD再実測）
   XDのテキスト139要素を集計したところ、次の2つが全体に共通していた。
     ・letter-spacing … 日本語は一律 89/1000em ＝ 0.089em
       （英字ラベル PROBLEM等 と 番号 01/02/03 だけ 0.2em。各所で上書きしている）
     ・line-height ……… 基本は文字サイズの1.5倍
       （14px→21px / 18px→27px / 20px→30px。24pxの見出しだけ38px＝1.58倍、
       　FVの40pxだけ54px＝1.35倍。それぞれの箇所で上書きしている）
   common.css は body に line-height:1.8 を指定しているため、
   ここで1.5に上書きしないとカンプより行間が広く見える。 */
.eb-sec{
	padding-top: 48px;
	padding-bottom: 80px;
	color: #444444;
	letter-spacing: 0.089em;
	line-height: 1.5;
}
@media screen and (max-width:1023px){
.eb-sec{
	padding-top: 40px;
	padding-bottom: 60px;
}
}
@media screen and (max-width:639px){
.eb-sec{
	padding-top: 32px;
	padding-bottom: 45px;
}
}

/* 淡い青の背景（XD実測：ABOUT / STRENGTH / FAQ） */
.eb-sec--light{
	background-color: #f2f9ff;
}

/* --------------------------------------------------------------------------
   背景写真つきセクション（ANSWER / FEATURE / PRICE / CONTACT）
   XD実測：全幅の写真＋#0d2b51を不透明度0.75で重ねる。余白は上80px／下96px
   -------------------------------------------------------------------------- */

.eb-sec--photo{
	position: relative;
	background-color: #0d2b51;
	background-size: cover;
	background-position: center center;
	color: #ffffff;
	padding-top: 80px;
	padding-bottom: 96px;
	/* 下の :before を「乗算」で重ねるため、合成範囲をこのセクション内に閉じる */
	isolation: isolate;
}
@media screen and (max-width:1023px){
.eb-sec--photo{
	padding-top: 60px;
	padding-bottom: 70px;
}
}
@media screen and (max-width:639px){
.eb-sec--photo{
	padding-top: 45px;
	padding-bottom: 50px;
}
}
.eb-sec--photo:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #0d2b51;
	opacity: 0.75;
	/* 【重要】XDでは4セクションとも「乗算・不透明度75%」。
	   通常の重ねだと写真が明るく残ってしまい、カンプより薄い印象になる */
	mix-blend-mode: multiply;
}
.eb-sec--photo > .eb-inner{
	position: relative;
	z-index: 1;
}

.eb-sec--answer{
	background-image: url(images/answer_bg.jpg);
}
/* XD実測：上辺中央に、前セクション（白）から切り込む逆三角のノッチ 40×20px */
.eb-sec--answer:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -20px;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #ffffff transparent transparent transparent;
	z-index: 2;
}
.eb-sec--feature{
	background-image: url(images/feature_bg.jpg);
}
.eb-sec--price{
	background-image: url(images/price_bg.jpg);
}

/* 写真の上に置く白いカードは、セクションの白文字を継承しないよう本文色に戻す */
.eb-sec--photo .eb-card,
.eb-sec--photo .eb-price,
.eb-sec--photo .eb-faq__item,
.eb-sec--photo .eb-onepoint{
	color: #444444;
}

/* 英字ラベル（PROBLEM / PRICE など）。XD実測：写真の上でも同じ #8ba2c0 */
.eb-label{
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	color: #8ba2c0;
	text-align: center;
	/* XD実測：ラベルのベースラインから見出しのベースラインまで36px（全11セクション共通） */
	margin-bottom: 3px;
}
@media screen and (max-width:639px){
.eb-label{
	font-size: 12px;
}
}

/* セクション見出し（カンプ準拠 24px）
   XD実測：24px に対して行送り38px ＝ 1.58倍。本文などの1.5倍とは違う値なので注意 */
.eb-title{
	font-size: 24px;
	letter-spacing: 0.089em;
	line-height: 1.58;
	color: #0d2b51;
	text-align: center;
	font-weight: 500;         /* reset.cssで normal になるため明示 */
	margin-bottom: 14px;
}
@media screen and (max-width:1023px){
.eb-title{
	font-size: 22px;
	letter-spacing: 0.089em;
}
}
@media screen and (max-width:639px){
.eb-title{
	font-size: 18px;
	letter-spacing: 0.089em;
	margin-bottom: 12px;
}
}

.eb-title--light{
	color: #ffffff;
}

/* セクション導入文。下の余白はXD実測でインク間18px＝margin 15px */
/* 導入文。スマホでも中央揃えのまま（2026-08-13 レビュー：左揃えにしない） */
.eb-lead{
	line-height: 1.5;
	text-align: center;
	margin-bottom: 15px;
}
/* PCの<br>はカンプの「意味のまとまり」の位置で入れているが、
   スマホは1行に入る文字数が半分以下になり、固定の改行位置だと
   短い行・長い行のガタつきが出るため流し込みにする
   （2026-08-13 レビューで相談 → 流し込み案を採用。
   　特定の語句の折れ方が気になる場合だけ display:inline-block のspanで補助する） */
@media screen and (max-width:639px){
.eb-lead br{
	display: none;
}
}

.eb-lead--light{
	color: #ffffff;
}

/* ANSWERのように導入文で終わるセクション用 */
.eb-lead--last{
	margin-bottom: 0;
}

/* 導入文中の強調（XD実測：SemiBold＋ブルーグレー） */
.eb-em{
	color: #8ba2c0;
	font-weight: 600;
}

/* 改行のまとまり。囲んだ語句は途中で折り返さず、行に入りきらないときは
   まとまりごと次の行に送られる（スマホの流し込みで折れ方を整えたい箇所に使う） */
.eb-nobr{
	display: inline-block;
}

/* CTAボタン（XD実測：312×50 / 角丸25 / 白地に濃紺の丸22px） */
.eb-btn{
	display: inline-block;
	min-width: 312px;
	line-height: 50px;
	padding-left: 23px;
	padding-right: 55px;
	background-color: #ffffff;
	color: #0d2b51;
	font-size: 16px;
	letter-spacing: 0.089em;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	border-radius: 25px;
	position: relative;
	box-sizing: border-box;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.eb-btn:after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background-color: #0d2b51;
	border-radius: 50%;
	transition: background-color 0.15s ease-out;
}
/* 矢印はデザイナー書き出しの images/fv_yajirushi.svg と同じパス（XDの「パス 1」実測）。
   軸のある「→」であって、山形（＞）ではない（2026-08-16 レビュー指摘）。
   円（:after）と同じ22×22の枠に重ねるので、パスの座標がそのまま中央位置になる＝ズレ補正が要らない。
   ホバーで白⇔紺に反転させるため、SVGファイルを読むのではなく色違いのdata URIを2つ持つ
   （SVGファイルはCSS側から色を変えられないため） */
.eb-btn:before{
	content: "";
	position: absolute;
	right: 16px;               /* 円（:after）と同じ位置・同じ大きさでぴったり重ねる */
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%23ffffff' d='M14.13125,11.75H5v-1.5h9.13125l-4.2-4.2,1.06875-1.05,6,6-6,6-1.06875-1.05,4.2-4.2Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	z-index: 1;
}
.eb-btn:hover{
	background-color: #0d2b51;
	color: #ffffff;
	text-decoration: none;
}
.eb-btn:hover:after{
	background-color: #ffffff;
}
.eb-btn:hover:before{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%230d2b51' d='M14.13125,11.75H5v-1.5h9.13125l-4.2-4.2,1.06875-1.05,6,6-6,6-1.06875-1.05,4.2-4.2Z'/%3E%3C/svg%3E");
}
@media screen and (max-width:639px){
.eb-btn{
	min-width: 0;
	width: 100%;
	max-width: 312px;
	font-size: 14px;
	letter-spacing: 0.089em;
	padding-left: 20px;
	padding-right: 50px;
}
}

/* CTAボタンの紺色版（2026-08-17 なるさん指定）。
   形・大きさ・角丸・矢印の位置は .eb-btn のまま、色だけ反転させる。
   白地のFVは背景が写真なので成立するが、白背景のセクションに置くと白ボタンは沈むため。
   通常時＝紺地に白文字（.eb-btn のホバー時と同じ配色）、ホバー時＝白地に紺文字。
   `.eb-btn` と同じ詳細度なので、必ず .eb-btn 群より後に書く（後勝ちで色を上書きする） */
.eb-btn--navy{
	background-color: #0d2b51;
	color: #ffffff;
	/* 文字はボタンの中央に置く（2026-08-17 なるさん指定）。
	   .eb-btn は右の矢印ぶんだけ右パディングが広い左寄せなので、
	   左右のパディングを揃えたうえで中央寄せにする。
	   矢印は position:absolute で右端に置いているため、文字とは重ならない */
	text-align: center;
	padding-left: 50px;
	padding-right: 50px;
}
.eb-btn--navy:after{
	background-color: #ffffff;
}
.eb-btn--navy:before{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%230d2b51' d='M14.13125,11.75H5v-1.5h9.13125l-4.2-4.2,1.06875-1.05,6,6-6,6-1.06875-1.05,4.2-4.2Z'/%3E%3C/svg%3E");
}
.eb-btn--navy:hover{
	background-color: #ffffff;
	color: #0d2b51;
}
.eb-btn--navy:hover:after{
	background-color: #0d2b51;
}
.eb-btn--navy:hover:before{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%23ffffff' d='M14.13125,11.75H5v-1.5h9.13125l-4.2-4.2,1.06875-1.05,6,6-6,6-1.06875-1.05,4.2-4.2Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   0. パンくず（2026-08-16 なるさん決定）
   既存下層ページ（#pageTitle 内の ol）と同じ見た目・同じアイコンを使うが、
   グレー帯とページタイトル h1 は置かない。FVの h1 を1つに保つため。
   アイコンは既存サイトのもの（/images/bread_*.png）をそのまま参照する＝新規画像なし。
   -------------------------------------------------------------------------- */

.eb-breadcrumb{
	/* ⚠️ style.css の `nav{position:absolute; top:15px; right:0}`（ヘッダーナビ用）は
	   要素セレクタなのでこのパンくずにも効いてしまう。右上へ飛んで幅が218pxまで潰れたため、
	   ここで打ち消す。既存CSSは触らない（他ページのヘッダーナビを壊さないため）。
	   なお `nav ul` 系のルールは ul 限定で、パンくずは ol なので影響を受けない */
	position: static;
	top: auto;
	right: auto;
	background-color: #ffffff;
	padding-top: 14px;
	padding-bottom: 14px;
}

.eb-breadcrumb ol{
	font-size: 11px;
	line-height: 20px;
	letter-spacing: 0.089em;
	color: #444444;
}

.eb-breadcrumb li{
	display: inline-block;       /* 既存はfloat＋clearfixだが、新規はflex/inline-blockでよい（CODING_RULES 6） */
	margin-right: 10px;
	padding-left: 14px;
	background-image: url(/images/bread_yajirushi.png);   /* 原寸4×7。既存に合わせて拡縮しない */
	background-position: left center;
	background-repeat: no-repeat;
}

.eb-breadcrumb li:first-child{
	padding-left: 18px;
	background-image: url(/images/bread_home.png);       /* 原寸13×12 */
}

.eb-breadcrumb a{
	color: #444444;
	text-decoration: none;
}
.eb-breadcrumb a:hover{
	color: #0d2b51;
	text-decoration: underline;
}

@media screen and (max-width:639px){
.eb-breadcrumb{
	/* SPは上下6px。AH〜AJで「FVのCTAを1画面に収める」ため余裕61pxを確保した経緯があり、
	   パンくずの高さがそのまま余裕を食う。既存の10pxより詰めて食う量を30pxに抑える
	   （それでも余裕は61px→31pxに減る。実機Safariでの初回表示は要確認・2026-08-16） */
	padding-top: 6px;
	padding-bottom: 6px;
}
.eb-breadcrumb ol{
	font-size: 10px;
	line-height: 18px;
}
.eb-breadcrumb li:first-child{
	padding-left: 15px;
	background-size: 10px auto;
}
}

/* --------------------------------------------------------------------------
   1. FV
   XD実測：写真の高さ550px／ラベル#8ba2c0／見出し40px(行送り54)／本文14px(行送り28)
   -------------------------------------------------------------------------- */

.eb-fv{
	letter-spacing: 0.089em;   /* .eb-sec を持たないセクションなので個別に指定する */
	background-image: url(images/fv_1.jpg);
	background-size: cover;
	/* 2026-08-13 デザイナーレビューで左上基準・上余白110pxに確定
	   （指定は inherit だったが、描画が同じで親に依存しない left top で書く） */
	background-position: left top;
	background-color: #0d2b51;
	color: #ffffff;
	padding-top: 110px;
	padding-bottom: 110px;
	position: relative;
}
/* 濃紺の斜めオーバーレイ（デザイナー書き出しの fv_2.png）。
   ★XD実測（2026-08-13）：画像は960×550で、斜めの境界は
   　右上の角(960,0)から左下(410,550)へ向かう「正確な45°」。
   　background-size を 100% 100% にすると画面幅いっぱいに
   　引き伸ばされて、紺が広がりすぎ・角度も浅くなってしまう。
   　auto 100% なら縦横が同じ倍率で拡縮されるので45°が常に保たれる */
.eb-fv:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/fv_2.png);
	background-size: auto 100%;
	background-position: left top;
	background-repeat: no-repeat;
}
/* ワイド画面（2026-08-13 レビュー指摘：1440pxまでは良いがそれ以上で違和感）。
   auto 100% は紺の幅がセクション高さ依存の約1005pxで固定のため、
   画面が広がると中央寄せの文字列が紺の右へはみ出して写真の上に載ってしまう。
   幅の指定だけにすると高さは縦横比から自動で決まり＝45°のまま、
   紺がビューポート幅に比例して文字が常に紺の上に載る。

   2026-08-15 なるさん指摘「1500pxぐらいでFVボタンが背景画像から出てしまう」。
   切り替えが1560pxからだったため 1470〜1700px でCTAが紺からはみ出していた
   （1559pxで最大50px。1560pxで幅基準に変わっても66.67%では足りず1700px付近まで続く）。
   　→ 切り替えを1440pxに前倒しし、割合も 66.67% → 70% に引き上げて全域で解消。
   70%にした理由は「1440pxの見え方を変えないこと」。
   　1440pxの紺の幅：auto 100%＝1005px → 70%＝1008px（+3px＝実質同じ）
   　CTAの余裕：1440px +12px / 1500px +24px / 1560px +36px / 1920px +108px（すべて内側）
   ⚠️ 幅基準は高さが「幅÷1.745」で決まる。1440pxで紺の高さ578pxに対しFV高576pxと
   　 **余裕が2pxしかない**。FVのテキストが1行増えるなどでFV高が伸びると下が欠けるので、
   　 そのときは割合を上げ直すこと（71%なら余裕10px・1440pxの紺は1022px） */
@media screen and (min-width:1440px){
.eb-fv:before{
	background-size: 70% auto;
}
/* 2026-08-15 なるさん指摘「1500pxでスマホの画面がメインで見えない」。
   上で紺だけを画面幅基準にしたため、写真との関係が崩れたのが原因だった。
   写真は cover ＝ FV高(576px固定)から決まる1508px幅のままなので、
   画面が広がるほど「紺 ÷ 写真」が大きくなり、斜めがスマホに食い込んでいく。
     1440px: 紺1008 ÷ 写真1508 = 66.8%（理想）  1500px: 1050 ÷ 1508 = 69.6%（食い込む）
   → 写真も画面幅に比例させて、1440pxの見え方をそのまま相似で伸ばす。
     1440pxの写真幅1508px ÷ 1440px = 104.72%
   これで1440px以上はどの幅でも「紺 ÷ 写真」が66.8%固定＝理想の見え方が保たれる。
   高さは 104.72% ÷ 2.618 ＝ 画面幅の40%となり、1440pxでちょうどFV高576pxに一致する
   （それより広い画面では写真の下端＝机の部分が切れるだけで、構図は変わらない） */
.eb-fv{
	background-size: 104.72% auto;
}
}
@media screen and (max-width:1023px){
.eb-fv{
	padding-top: 60px;
	padding-bottom: 70px;
}
}
/* 1024〜1439px：paddingを画面幅に比例させる（2026-08-15 なるさん指摘「1024pxは崩れている」）
   原因は上の :before（紺のオーバーレイ）が auto 100% ＝ 高さ基準で、
   FVが高くなるほど紺が横に広がること。1024pxで padding が 60/70 → 110/110 に切り替わり
   FV高が464→576pxに増えた結果、紺の幅が810→1005pxに広がって画面(1024px)をほぼ覆い、
   右上に出るはずの写真（スマホと手）がほとんど見えなくなっていた。
     紺の幅 ÷ 画面幅 …… 1023px:79%（良い） → 1024px:98%（崩れ） → 1440px:70%（良い）
   paddingを 1024px:60/70 → 1440px:110/110 へ一次式でつなぐと、この比率が連続に変わる。
     padding-top   (X) = 60 + (X-1024) × 50/416  →  12.02vw - 63.08px
     padding-bottom(X) = 70 + (X-1024) × 40/416  →   9.62vw - 28.46px
   ⚠️ 1440px以上（110/110固定）と1023px以下（60/70固定）は従来どおり。値を変えるときは
   　 両端がその固定値と一致するように計算し直すこと */
@media screen and (min-width:1024px) and (max-width:1439px){
.eb-fv{
	padding-top: 110px;                      /* calc 非対応ブラウザ向けの控え */
	padding-top: calc(12.02vw - 63.08px);
	padding-bottom: 110px;
	padding-bottom: calc(9.62vw - 28.46px);
}
}
/* ★SPのFV：B案「写真主役＋下部の濃紺パネル」（2026-08-13 なるさん決定）
   適用範囲は899pxまで（2026-08-15 拡大）。768〜899pxをここに含めた理由：
   PCの斜めレイアウトは紺のオーバーレイが「高さ基準」で幅810px前後になるため、
   画面が900px未満だと紺が画面をほぼ覆い、右上に出るはずの写真が画面外へ出てしまう。
     紺÷画面 …… 768px:105%（写真が見えない） / 900px:90%（スマホは見える） / 1023px:79%（良い）
   paddingを詰めても768pxで87%止まりで構造的に解決しないため、
   この帯だけ「写真が主役」のSPレイアウトに寄せた（iPad縦768px・Air 820px・Pro11 834pxが該当）。
   要件：①PCと同じ写真・色・文言を使う ②スマホ操作の写真を最初に大きく見せる
   ③コピーとCTAは不透明の濃紺に置いて可読性を保つ
   構成：
     ・上＝FV_1.jpgを基に外側へ拡張したSP専用写真を表示。スマホの上下左右に余白を確保
     ・中央＝写真と本棚背景の境界を画面幅いっぱいの斜線にする
     ・下＝PCと同じfv_2.png（濃紺の本棚）を文字背景に使う
   HTMLと文言はPC/SP共通。SPでは背景と余白だけを組み替える */
@media screen and (max-width:899px){
.eb-fv{
	/* 下の clip-path の左端＋ 余白16px。写真とテキストの間隔を保つため、
	   clip-path を変えるときはこの値も同じだけ動かすこと。
	   上の256pxは calc に対応しないブラウザ向けの控え（390px幅のときの値） */
	padding-top: 256px;
	padding-top: calc(42.44vw + 90.5px);
	padding-bottom: 45px;
	background-image: url(images/fv_1_sp.jpg);
	background-image: image-set(
		url(images/fv_1_sp.webp) type("image/webp"),
		url(images/fv_1_sp.jpg) type("image/jpeg")
	);
	/* 2026-08-15: 画面幅ごとに倍率と位置を変える clamp をやめ、どちらも画面幅に比例させた。
	   px固定だと幅が変わったときに写真の見える範囲がずれる。
	   引き具合を変えたいときは 112% を、見える位置を変えたいときは -27vw を動かす
	   （マイナスを大きくすると写真が上へ動く＝写真の下側が見えてくる）
	   112% は390px幅で見たときの見え方でなるさんが確定（2026-08-15） */
	background-size: 112% auto;
	background-position: center -27vw;
	background-repeat: no-repeat;
}
.eb-fv:before{
	/* PCと同じ濃紺の本棚画像。SPでは左側の不透明部分だけを使う。
	   fv_2.png（1920×1100）は右上が透明で、下端は左から約1030pxで透明に切り替わる。
	   等倍（auto 100%）だと広い画面で透明部分まで表示範囲が届き、
	   右下に本棚のないベタ塗りの三角が出てしまうため、拡大して左側だけを使う
	   （2026-08-15 SPレイアウトを767px→899pxへ広げた際に対応。
	   　899px時の表示範囲は元画像の左から約776px分で、切り替わり1030pxまで余裕がある） */
	background-image: url(images/fv_2.png);
	background-size: auto 160%;
	background-position: left top;
	background-repeat: no-repeat;
	background-color: #0d2b51;
	z-index: 0;
	/* B案に合わせ、境界を左→右の全幅斜線にする。
	   この上端が「写真の見える高さ」そのもの。
	   2026-08-15: 見出し・本文・CTAを1画面に収めるため 左400/右300 → 左240/右140 に縮小
	   （iPhone 13で CTA下端がちょうど画面外に出ていたため。縮小後は下に61pxの余裕）
	   ここは calc に対応しないブラウザ向けの控え（390px幅のときの値） */
	clip-path: polygon(
		0 240px,
		100% 140px,
		100% 100%,
		0 100%
	);
	/* 2026-08-15: 画面が広いほど写真を多く見せる（なるさん指定）。
	   390pxで 左240/右140、767pxで 左400/右300 になるよう画面幅に対して一次式で増やす。
	     値(X) = 240 + (X-390) × 160 / 377  →  42.44vw + 74.5px
	   相似（vwだけ）にすると写真も同じ比率で大きくなり「広がった感」が出ないため、
	   vw と px を混ぜて "増分だけ" を効かせている。
	   広げ幅を変えるときは 160 を差し替えて上の式で2つの定数を計算し直すこと。
	   ⚠️ 上の padding-top（clip-path左端＋16px）も必ず一緒に動かす
	   ※適用範囲を899pxまで広げた後も式はそのまま伸ばしている（899pxで 左456/右356）。
	   　767pxで頭打ちにすると、そこから先だけ写真の見え方が止まって不自然になるため */
	clip-path: polygon(
		0 calc(42.44vw + 74.5px),
		100% calc(42.44vw - 25.5px),
		100% 100%,
		0 100%
	);
}
}

/* 右下の装飾（本が重なった写真・斜めカット）。XD実測で右下隅にぴったり配置。
   画像自体の斜めも45°で、紺のオーバーレイの斜めと平行になるデザイン。
   %指定だと画面幅で写真の大きさが変わってカンプとずれるため、PCは296px固定 */
.eb-fv__deco{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 230px;      /* 2026-08-13 デザイナーレビューで230pxに確定（XDの296pxより一回り小さく） */
	line-height: 0;
	z-index: 0;
}
.eb-fv__deco img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:1023px){
.eb-fv__deco{
	width: 20.5%;      /* タブレットは画面に合わせて縮める（1440px中の296px と同じ比率） */
}
}
@media screen and (max-width:899px){
.eb-fv__deco{
	display: none;
}
}

.eb-fv__inner{
	max-width: 1064px;         /* .eb-inner と同じ「1024＋余白20×2」方式 */
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.eb-fv__label{
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	color: #8ba2c0;
	margin-bottom: 8px;
}
@media screen and (max-width:899px){
.eb-fv__label{
	font-size: 10px;
	letter-spacing: 0.16em;
	margin-bottom: 8px;
}
}

.eb-fv__title{
	font-size: 40px;
	letter-spacing: 0.089em;
	line-height: 1.35;
	font-weight: 500;
	margin-bottom: 22px;
}
@media screen and (max-width:1023px){
.eb-fv__title{
	font-size: 32px;
	letter-spacing: 0.089em;
}
}
@media screen and (max-width:899px){
.eb-fv__title{
	font-size: clamp(18px, calc(8.57vw - 9.4px), 24px);
	letter-spacing: 0.089em;
	margin-bottom: 15px;
}
}

.eb-fv__lead{
	line-height: 2;
	margin-bottom: 35px;
}
@media screen and (max-width:899px){
.eb-fv__lead{
	line-height: 1.8;
	margin-bottom: 25px;
}
}

/* --------------------------------------------------------------------------
   カード（PROBLEM / FEATURE）
   XD実測：284幅 角丸8 / 塗り #f2f9ff / 上下左右の余白24px /
           アイコンの丸48px（PROBLEM=白、FEATURE=白）
   -------------------------------------------------------------------------- */

.eb-cards{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
@media screen and (max-width:639px){
.eb-cards{
	gap: 15px;
}
}

.eb-cards--3 > .eb-card{
	width: calc((100% - 48px) / 3);
}
@media screen and (max-width:1023px){
/* 2カラムに折り返したとき、奇数で余った最後のカードを中央に置く
   （2026-08-13 レビュー。1行目は2枚で幅いっぱいなので見た目は変わらない） */
.eb-cards--3{
	justify-content: center;
}
.eb-cards--3 > .eb-card{
	width: calc((100% - 24px) / 2);
}
}
@media screen and (max-width:639px){
.eb-cards--3 > .eb-card{
	width: 100%;
}
}

.eb-card{
	background-color: #f2f9ff;
	border-radius: 8px;
	padding: 24px 24px 30px;
	box-sizing: border-box;
	text-align: center;
	color: #444444;
}
@media screen and (max-width:639px){
.eb-card{
	padding: 20px;
}
}

.eb-card__icon{
	margin-bottom: 9px;
	line-height: 0;
}
/* 支給SVGは48×48で背景の丸まで含んでいる。CSSで padding や背景を足さないこと
   （足すとアイコン本体が24pxに縮み、カンプより小さく見える） */
.eb-card__icon img{
	width: 48px;
	height: 48px;
}

.eb-card__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #0d2b51;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 0;
	border-bottom: 1px solid #e9eff5;
}
@media screen and (max-width:639px){
.eb-card__title{
	font-size: 16px;
	letter-spacing: 0.089em;
	padding-bottom: 12px;
}
}

/* ★横線から本文までの余白は 15px（2026-08-13 19:30 デザイナーレビューで確定）
   XD実測ではベースライン間16px＝padding 0 だが、実ページを見たうえで
   「もう少し空ける」と判断されたもの。5箇所（card/compare/point/step/flow）共通 */
.eb-card__text{
	text-align: left;
	line-height: 1.5;
	padding-top: 15px;
}

/* --------------------------------------------------------------------------
   4. ABOUT 2方式の比較
   XD実測：外枠446×287（塗り#0d2b51 / #8ba2c0・角丸8）の中に
           白いカード438×245（角丸4）。上38px・左右下4pxの枠になる
   -------------------------------------------------------------------------- */

.eb-compare{
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
@media screen and (max-width:639px){
.eb-compare{
	display: block;
	margin-bottom: 15px;
}
}

.eb-compare__col{
	width: calc((100% - 8px) / 2);
	border-radius: 8px;
	padding: 38px 4px 4px;    /* 上＝帯の高さ、左右下＝枠の太さ */
	box-sizing: border-box;
	position: relative;
	/* 左右のカードで白い部分の高さをそろえる（XDでは両方245px固定） */
	display: flex;
	flex-direction: column;
}
@media screen and (max-width:639px){
.eb-compare__col{
	width: 100%;
	margin-bottom: 15px;
}
}

.eb-compare__col--ok{
	background-color: #0d2b51;
}
.eb-compare__col--ng{
	background-color: #8ba2c0;
}

/* 枠の上部（帯）に乗るタイトル */
.eb-compare__badge{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 38px;
	color: #ffffff;
	text-align: center;
	font-weight: 500;
}
@media screen and (max-width:1023px){
.eb-compare__badge{
	font-size: 15px;
	letter-spacing: 0.089em;
}
}
@media screen and (max-width:639px){
.eb-compare__badge{
	font-size: 14px;
	letter-spacing: 0.089em;
}
}

/* 枠の内側の白いカード。flex:1 で左右の高さをそろえる */
.eb-compare__body{
	flex: 1;
	background-color: #ffffff;
	border-radius: 4px;
	padding: 24px 24px 30px;
	text-align: center;
	color: #444444;
}
@media screen and (max-width:639px){
.eb-compare__body{
	padding: 20px;
}
}

.eb-compare__icon{
	margin-bottom: 9px;
	line-height: 0;
}
.eb-compare__icon img{
	width: 48px;
	height: 48px;
}

.eb-compare__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #0d2b51;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 0;
	border-bottom: 1px solid #e9eff5;
}
@media screen and (max-width:639px){
.eb-compare__title{
	font-size: 16px;
	letter-spacing: 0.089em;
	padding-bottom: 12px;
}
}

.eb-compare__text{
	text-align: left;
	line-height: 1.5;
	padding-top: 15px;      /* 線→本文の間隔は .eb-card__text と同じ（2026-08-13 デザイナー確定） */
}

/* ワンポイント
   XD再実測（2026-08-09）。カード左端を0としたときの位置は次のとおり。
     ・カード ……… 900×108・白・角丸8。上下の余白はそれぞれ16px
     ・アイコン …… 48×48。左端 68px（中心は 92px）・上端から16px
     ・縦罫 ……… 184px の位置。高さ76px（＝カード高さ108 − 上下16px）
     ・本文 ……… 224px の位置から。右端はカード右端の40px手前
   ラベルの中心（92px）とアイコンの中心が一致している点が要。
   ラベル領域を「アイコンと同じ48px幅」にして、その中央に文字を置くと再現できる。
   縦罫はラベル側のborder-rightにすると位置が合わないため、本文側のborder-leftで引く */
.eb-onepoint{
	display: flex;
	align-items: stretch;   /* 縦罫をカードの上下いっぱい（76px）に伸ばす */
	background-color: #ffffff;
	border-radius: 8px;
	padding: 16px 40px 16px 68px;
}
@media screen and (max-width:1023px){
.eb-onepoint{
	padding: 16px 20px;
}
}
@media screen and (max-width:639px){
.eb-onepoint{
	display: block;
	padding: 20px;
}
}

/* ★「ワンポイント」の文字はアイコン(48px)より幅が広い。
   text-align:center は箱に収まらない文字を右側にだけはみ出させるため
   見た目が右にずれてしまう（2026-08-13レビュー指摘）。
   flexの中央寄せなら、箱からはみ出す文字も左右均等に広がって
   文字の中心＝箱の中心＝アイコンの中心が一致する */
.eb-onepoint__label{
	flex-shrink: 0;
	width: 48px;            /* アイコンと同じ幅。中心をアイコン中心に合わせるための基準 */
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
	font-size: 16px;
	letter-spacing: 0.089em;
	line-height: 27px;      /* XD実測 */
	color: #0d2b51;
	font-weight: 500;
}
.eb-onepoint__label img{
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 0 4px;        /* XD実測：アイコン下端からラベルのベースラインまで23px */
}
/* タブレット幅ではカードの左余白が68px→20pxまで縮む。
   ラベルを48px幅のままにすると「ワンポイント」の文字がカードからはみ出し、
   本文と重なってしまうため、ここから先は文字幅に合わせた箱にする。
   ※このメディアクエリは必ず上の .eb-onepoint__label より後ろに置くこと
   　（同じ詳細度のルールは後に書いたほうが勝つため） */
@media screen and (max-width:1023px){
.eb-onepoint__label{
	width: auto;
}
.eb-onepoint__label img{
	margin-left: auto;
	margin-right: auto;
}
}
@media screen and (max-width:639px){
.eb-onepoint__label{
	display: block;         /* SPはアイコンと文字を横並びに戻すのでflexをやめる */
	width: auto;
	font-size: 14px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e9eff5;   /* SPは縦罫ではなく横罫にする */
	text-align: left;
}
.eb-onepoint__label img{
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 8px 0 0;
	vertical-align: middle;
}
}

/* 68(カード左余白) + 48(ラベル) + 68(margin) = 184px ＝ XD実測の縦罫の位置。
   そこから padding-left 40px で本文が 224px から始まる */
.eb-onepoint__text{
	flex: 1;
	line-height: 1.5;
	margin-left: 68px;
	padding-left: 40px;
	border-left: 1px solid #e9eff5;
	display: flex;
	align-items: center;    /* 本文はカードの縦中央に置く */
}
@media screen and (max-width:1023px){
.eb-onepoint__text{
	margin-left: 24px;
	padding-left: 24px;
}
}
@media screen and (max-width:639px){
.eb-onepoint__text{
	margin-left: 0;
	padding-left: 0;
	border-left: none;   /* SPは縦積みなので縦罫をやめる（ラベル側の横罫に切り替わる） */
	display: block;
}
}

/* --------------------------------------------------------------------------
   5. ACTIBOOK
   XD実測：左にロゴ（390×119・上下中央）、右にPOINTカード3枚
           （390×216・塗り#8ba2c0・角丸8・間隔16px）を縦並び。
           各カードの左端に POINT の丸（64px・#0d2b51）が半分重なる
   -------------------------------------------------------------------------- */

.eb-actibook{
	display: flex;
	align-items: center;
	gap: 88px;
}
@media screen and (max-width:1023px){
.eb-actibook{
	display: block;
}
}

.eb-actibook__visual{
	width: 43%;
	text-align: center;
	flex-shrink: 0;
}
@media screen and (max-width:1023px){
.eb-actibook__visual{
	width: auto;
	margin-bottom: 40px;
}
}

/* ActiBookロゴは商標ガイドラインにより色・比率の変更不可。白地に原寸比で置く */
.eb-actibook__logo img{
	max-width: 390px;
	width: 100%;
	height: auto;
}
@media screen and (max-width:639px){
.eb-actibook__logo img{
	max-width: 260px;   /* SPは画面幅いっぱいだと大きすぎるため縮める（2026-08-13 レビュー） */
}
}

.eb-points{
	flex: 1;
}
/* タブレット・SPはロゴの下にPOINTが縦積みになる。PCの「ロゴから延びる線」の
   代わりに、ロゴ下から最後のカードまで届く1本の縦線を各カードの後ろに通す。
   カードは position:relative なので線より上に描かれ、
   線はカードとカードの隙間からだけ見える（2026-08-13 レビューの案を採用。
   当初SPのみ→タブレットにも適用の指示で1023px以下に拡大） */
@media screen and (max-width:1023px){
.eb-points{
	position: relative;
}
.eb-points:before{
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;               /* ロゴ下の余白40pxを貫いてロゴの真下まで届く */
	bottom: 0;                /* 終端は最後のカードの後ろに隠れる */
	width: 1px;
	background-color: #8ba2c0;
}
/* 線の先（ロゴ側）の「●」。PCの矢印の始点と同じ直径8px */
.eb-points:after{
	content: "";
	position: absolute;
	left: 50%;
	top: -44px;               /* 円の中心が線の上端（-40px）に重なる */
	margin-left: -4px;        /* 幅8pxの円の中心を線に合わせる */
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #8ba2c0;
}
}

/* ロゴから各POINTへ延びる線（2026-08-13 レビューで追加）
   XD実測：線の右端＝丸の左端（liの左から-32px）に接続し、
   POINT1は線の「上端」・POINT2は「中心」・POINT3は「下端」が丸の中心の高さ。
   1と3は斜めに折れてロゴの上下44pxの位置の点まで延びる（デザイナー書き出しSVGをそのまま使用）。
   タブレット以下は縦積みになるので表示しない */
.eb-point__arrow{
	position: absolute;
	right: calc(100% + 32px);  /* 右端を丸の左端に合わせる */
	height: auto;
}
.eb-point:nth-child(1) .eb-point__arrow{
	width: 136px;
	top: calc(50% - 1px);      /* 線の上端＝丸の中心 */
}
.eb-point:nth-child(2) .eb-point__arrow{
	width: 64px;
	top: 50%;
	margin-top: -4px;          /* 高さ8pxの線の中心＝丸の中心 */
}
.eb-point:nth-child(3) .eb-point__arrow{
	width: 136px;
	bottom: calc(50% - 1px);   /* 線の下端＝丸の中心 */
}
@media screen and (max-width:1023px){
.eb-point__arrow{
	display: none;
}
}

.eb-point{
	background-color: #8ba2c0;
	border-radius: 8px;
	padding: 24px 24px 24px 56px;
	margin-bottom: 16px;
	position: relative;
	color: #ffffff;
	margin-left: 32px;         /* 左に半分はみ出す丸のぶん */
}
.eb-point:last-child{
	margin-bottom: 0;
}
@media screen and (max-width:639px){
.eb-point{
	padding: 44px 20px 24px;
	margin-left: 0;
	/* SPは丸がカードの上に20px飛び出すため、16pxのままだと前のカードに重なる。
	   丸の分＋8pxの空きが残る28pxに広げる（2026-08-13 レビュー：余白をすこし追加） */
	margin-bottom: 28px;
}
}

/* POINT 01 / 02 / 03 の丸
   XD再実測（2026-08-09）。丸の上端を0としたときのベースライン位置は
     ・POINT（12px）… 26px
     ・番号（16px）… 48px
   の2点。行間ではなくベースラインで合わせないと、丸の中で数pxずつ下にずれる。
   padding-top:16px ＋ POINT下の余白6px でこの2点に一致する（計算は下記）
     POINT   … 16 + 12×0.88 ≒ 26
     番号     … 16 + 12 + 6 + 16×0.88 ≒ 48 */
.eb-point__num{
	position: absolute;
	left: -32px;
	top: 50%;
	margin-top: -32px;
	width: 64px;
	height: 64px;
	background-color: #0d2b51;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
	font-weight: 500;
	line-height: 1;
	padding-top: 16px;
	box-sizing: border-box;
}
@media screen and (max-width:639px){
.eb-point__num{
	left: 20px;
	top: -20px;
	margin-top: 0;
	width: 56px;
	height: 56px;
	padding-top: 14px;
}
}

/* 丸の中の「POINT」の文字。XD実測：12px・#8ba2c0・字送りなし */
.eb-point__label{
	display: block;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0;
	color: #8ba2c0;
	margin-bottom: 6px;
}
@media screen and (max-width:639px){
.eb-point__label{
	font-size: 10px;
	margin-bottom: 5px;
}
}

/* 番号「01」。XD実測：16px・字送り0.2em。
   letter-spacingは最後の文字の後ろにも入る。中央揃えではその空白も幅に数えられ、
   見えている文字が0.1em（1.6px）左にずれる。同じ量のtext-indentで押し戻す。
   （margin-rightでは要素の幅そのものが変わってしまい、逆に右へずれるので使わない） */
.eb-point__figure{
	display: block;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}
@media screen and (max-width:639px){
.eb-point__figure{
	font-size: 14px;
}
}

.eb-point__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #ffffff;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 0;
	border-bottom: 1px solid #e9eff5;
}
@media screen and (max-width:639px){
.eb-point__title{
	font-size: 16px;
	letter-spacing: 0.089em;
	padding-bottom: 12px;
}
}

/* XD実測：罫線から本文1行目のベースラインまで16px ＝ 行送りぶんだけ。
   padding-topを足すとカンプより下がるので0にする */
.eb-point__text{
	color: #ffffff;
	line-height: 1.5;
	padding-top: 15px;      /* 線→本文の間隔（2026-08-13 デザイナー確定） */
}

/* --------------------------------------------------------------------------
   7. STRENGTH ステップ
   XD実測：セクション背景 #f2f9ff／カードは白（284×290・角丸8）／
           並び順は「アイコン → STEP n → 見出し → 本文」
   -------------------------------------------------------------------------- */

.eb-steps{
	display: flex;
	gap: 24px;
	margin-bottom: 24px;
}
/* タブレット以下は1カラムの縦積み（2026-08-13 レビュー：SP同様でよい） */
@media screen and (max-width:1023px){
.eb-steps{
	display: block;
	margin-bottom: 20px;
}
}

.eb-step{
	width: calc((100% - 48px) / 3);
	background-color: #ffffff;
	border-radius: 8px;
	padding: 24px 24px 30px;
	box-sizing: border-box;
	text-align: center;
	position: relative;        /* STEP間の「＞」の基準 */
}
@media screen and (max-width:1023px){
.eb-step{
	width: 100%;
	padding: 20px;
	margin-bottom: 28px;       /* 下向き「＞」が入る余白（2026-08-13 レビュー） */
}
.eb-step:last-child{
	margin-bottom: 15px;       /* 最後のカードの下は矢印が無いので従来の余白のまま */
}
}

/* STEP間の「＞」あしらい（2026-08-13 レビューで追加。XD実測）
   16×27で、カード間の隙間24pxのちょうど中央（左右4pxずつ空く） */
.eb-step__arrow{
	position: absolute;
	left: -20px;               /* 隙間24px − (24−16)÷2 ＝ カード左端の20px手前 */
	/* 2026-08-15 レビュー「上下中央になっていますか？」→ なっていなかった。
	   XD実測の top:117px 固定だと、カード高さ277pxに対し中心130.5px＝中央より8px上。
	   カードの高さは中身の行数で変わるので、固定値をやめて常に中央に置く */
	top: 50%;
	margin-top: -13.5px;       /* 高さ27pxの半分 */
	width: 16px;
	height: 27px;
}
/* タブレット以下は縦積みになるので、90度回して「下向き」でカードの上の隙間に置く
   （2026-08-13 レビュー：PC同様のあしらいが欲しい・下向きの） */
@media screen and (max-width:1023px){
.eb-step__arrow{
	left: 50%;
	margin-left: -8px;         /* 箱幅16pxの中心を横中央へ */
	top: -27.5px;              /* 回転後の見た目（高さ16px）が上の隙間28pxの中央に来る */
	margin-top: 0;             /* PC側の -13.5px を打ち消す（ここは top で位置を決めている） */
	transform: rotate(90deg);
}
}

.eb-step__icon{
	margin-bottom: 9px;
	line-height: 0;
}
.eb-step__icon img{
	width: 48px;
	height: 48px;
}

.eb-step__num{
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2em;   /* XD実測 */
	color: #8ba2c0;
	margin-bottom: 3px;
}

.eb-step__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #0d2b51;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 0;
	border-bottom: 1px solid #e9eff5;
}
@media screen and (max-width:639px){
.eb-step__title{
	font-size: 16px;
	letter-spacing: 0.089em;
	padding-bottom: 12px;
}
}

.eb-step__text{
	text-align: left;
	line-height: 1.5;
	padding-top: 15px;      /* 線→本文の間隔（2026-08-13 デザイナー確定） */
}

/* 3ステップの下の一文。XD実測：下地・枠なしの中央寄せテキストで、
   1行目のみ #8ba2c0 の18px */
/* STRENGTH下の一文。スマホでも中央揃えのまま（2026-08-13 レビュー：左揃えにしない） */
.eb-note{
	text-align: center;
	color: #444444;
}

.eb-note__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #8ba2c0;
	font-weight: 500;
	margin-bottom: 7px;
}
@media screen and (max-width:639px){
.eb-note__title{
	font-size: 16px;
	letter-spacing: 0.089em;
}
}

.eb-note__text{
	line-height: 1.5;
}
@media screen and (max-width:639px){
.eb-note__text br{
	display: none;   /* スマホは流し込み（.eb-lead と同じ方針） */
}
}

/* --------------------------------------------------------------------------
   8. SAMPLE 電子ブック埋め込み
   XD実測：900×512の画像。角丸なし
   -------------------------------------------------------------------------- */

.eb-sample{
	overflow: hidden;
	background-color: #f2f9ff;
}

/* カンプの表示サイズは900×512（約1.76:1）。内側1024pxだと約580px */
.eb-sample iframe{
	display: block;
	width: 100%;
	height: 580px;
	border: none;
}
/* ▼タブレット幅（1023px以下）の指定は、JSが動かない環境向けの控えの値。
   通常は ebook.js の fitSampleViewer() が iframe を1024px幅で描画し、
   scaleで縮めて枠に収めるため、この高さは上書きされる。
   （1024pxより狭い幅でActiBookを読み込ませると、下の操作バーが消えて
   　紙面も左に寄ってしまうため） */
@media screen and (max-width:1023px){
.eb-sample iframe{
	height: 420px;
}
}
/* ▼スマホは1ページずつ（片面）で表示する（2026-08-17 志手様のご要望）。
   見開き／単ページの切り替えは ebook.js 側で行っている（spead_mode）。

   紙面はA4縦（1785×2523＝1:1.413）。単ページだと1ページが枠幅いっぱいになるので、
   紙面が収まる高さは「枠幅 × 1.413」。
   これに下の操作バー約25pxと、窮屈にならない程度の余白を足して1.5倍とした。
   端末で枠の幅が変わる（iPhone SE 280px／iPhone 13 350px）ため、
   固定値ではなく幅から高さを決める。

   経緯：2026-08-15 は見開き（0.85倍）だったが、1ページの幅が枠の半分にしかならず
   　　　スマホで紙面が小さかったため、2026-08-17 に単ページへ変更した */
@media screen and (max-width:639px){
.eb-sample iframe{
	height: 500px;   /* aspect-ratio に対応しないブラウザ向けの控え（枠幅330px想定） */
}
@supports (aspect-ratio: 1 / 1){
.eb-sample iframe{
	height: auto;
	aspect-ratio: 1 / 1.5;
}
}
}

/* ▼ビューアを別タブで開く導線（2026-08-17 志手様のご要望）。
   スマホは iframe を1024px幅で描画してから縮小して枠に収めているため、
   紙面は見えても実際の操作感（拡大・リンクの反応）と差が出る。
   そこでビューアそのものを開けるボタンをスマホだけに出す。
   PC・タブレットは埋め込みのままで十分見えるので出さない（カンプにない要素を増やさない）。
   .eb-btn は inline-block なので、中央寄せは親の text-align で行う */
.eb-sample__link{
	display: none;
}
@media screen and (max-width:639px){
.eb-sample__link{
	display: block;
	margin-top: 20px;
	text-align: center;
}
}

/* --------------------------------------------------------------------------
   9. PRICE 料金表
   XD実測：カード900×416（塗り #f2f9ff・角丸8・内側余白40px）／
           見出し列196px（塗り #0d2b51・白16px）／内容側624px（白）／
           行の高さ56px／罫線は内容側 #8ba2c0・見出し側 #f2f9ff／
           金額列の左に高さいっぱいの縦罫（#8ba2c0）
   -------------------------------------------------------------------------- */

.eb-price{
	background-color: #f2f9ff;
	border-radius: 8px;
	padding: 40px;
	box-sizing: border-box;
}
@media screen and (max-width:1023px){
.eb-price{
	padding: 24px;
}
}
@media screen and (max-width:639px){
.eb-price{
	padding: 15px;
}
}

.eb-price__table{
	width: 100%;
	border-collapse: collapse;
	background-color: #ffffff;
}

.eb-price__cat{
	width: 196px;
	background-color: #0d2b51;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 0.089em;
	line-height: 27px;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	padding: 14px 10px;
	border-bottom: 1px solid #f2f9ff;
}
.eb-price__table tr:last-child .eb-price__cat{
	border-bottom: none;
}

.eb-price__item{
	font-size: 16px;
	letter-spacing: 0.089em;
	line-height: 27px;
	color: #0d2b51;
	padding: 14px 24px;
	border-bottom: 1px solid #8ba2c0;
	border-right: 1px solid #8ba2c0;   /* XD実測の縦罫（表の高さいっぱい） */
	vertical-align: middle;
}

.eb-price__yen{
	width: 200px;
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 27px;
	color: #0d2b51;
	font-weight: 600;          /* XD実測：SemiBold。金額だけ他（Medium＝500）より太い（2026-08-16 全体照合で発見） */
	text-align: center;
	padding: 14px 10px;
	border-bottom: 1px solid #8ba2c0;
	vertical-align: middle;
	white-space: nowrap;
}

.eb-price__table tr:last-child .eb-price__item,
.eb-price__table tr:last-child .eb-price__yen{
	border-bottom: none;
}

@media screen and (max-width:1023px){
.eb-price__cat{
	width: 130px;
	font-size: 14px;
	letter-spacing: 0.089em;
}
.eb-price__item{
	font-size: 14px;
	letter-spacing: 0.089em;
	padding-left: 15px;
	padding-right: 15px;
}
.eb-price__yen{
	width: 140px;
	font-size: 16px;
	letter-spacing: 0.089em;
}
}
@media screen and (max-width:639px){
.eb-price__cat{
	width: 78px;
	font-size: 11px;
	letter-spacing: 0.089em;
	line-height: 1.4;
	padding: 12px 5px;
}
.eb-price__item{
	font-size: 12px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	padding: 12px 8px;
}
.eb-price__yen{
	width: 82px;
	font-size: 13px;
	letter-spacing: 0.089em;
	padding: 12px 5px;
}
}

/* 表の下の注記。XD実測：#f2f9ff の14px・左寄せ */
.eb-price__notes{
	margin-top: 20px;
	font-size: 14px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #f2f9ff;
}
@media screen and (max-width:639px){
.eb-price__notes{
	font-size: 12px;
	letter-spacing: 0.089em;
	margin-top: 15px;
}
}

/* --------------------------------------------------------------------------
   10. FLOW 制作の流れ
   XD実測：セクション背景は白。カードの下地・枠線はなし。
           写真438×210（間隔24px）／番号の丸48px・塗り#f2f9ff・文字#8ba2c0／
           見出しの下に #e9eff5 の罫線（丸の左端から右端まで）
   -------------------------------------------------------------------------- */

.eb-flow__item{
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}
.eb-flow__item:last-child{
	margin-bottom: 0;
}
@media screen and (max-width:639px){
.eb-flow__item{
	display: block;
	margin-bottom: 25px;
}
}

.eb-flow__photo{
	width: 438px;
	flex-shrink: 0;
	line-height: 0;
}
.eb-flow__photo img{
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
@media screen and (max-width:1023px){
.eb-flow__photo{
	width: 300px;
}
}
@media screen and (max-width:639px){
.eb-flow__photo{
	width: 100%;
	margin-bottom: 15px;
}
}

.eb-flow__body{
	flex: 1;
	min-width: 0;
}

.eb-flow__title{
	font-size: 18px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	color: #0d2b51;
	font-weight: 500;
	padding-bottom: 16px;
	margin-bottom: 0;
	border-bottom: 1px solid #e9eff5;   /* XD実測の下線 */
	display: flex;
	align-items: center;
}
@media screen and (max-width:639px){
.eb-flow__title{
	font-size: 16px;
	letter-spacing: 0.089em;
	padding-bottom: 12px;
}
}

/* 番号の丸。XD実測：塗り #f2f9ff・文字 #8ba2c0 の16px */
.eb-flow__num{
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background-color: #f2f9ff;
	border-radius: 50%;
	color: #8ba2c0;
	font-size: 16px;
	/* XD実測：番号は英字ラベルと同じ 0.2em。末尾ぶんを text-indent で押し戻して中央に置く */
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	line-height: 48px;
	text-align: center;
	margin-right: 8px;
}
@media screen and (max-width:639px){
.eb-flow__num{
	width: 38px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	margin-right: 8px;
}
}

.eb-flow__text{
	line-height: 1.5;
	padding-top: 15px;      /* 線→本文の間隔（2026-08-13 デザイナー確定） */
}

/* --------------------------------------------------------------------------
   11. FAQ アコーディオン
   XD実測：セクション背景 #f2f9ff／アイテムは白・角丸8・幅900・間隔16px／
           内側余白24px／質問16px #0d2b51／Q・A記号18px #8ba2c0／
           右端に16×9の矢印／区切り線 #e9eff5
   -------------------------------------------------------------------------- */

.eb-faq__item{
	background-color: #ffffff;
	border-radius: 8px;
	margin-bottom: 16px;
	padding-left: 24px;
	padding-right: 24px;
}
@media screen and (max-width:639px){
.eb-faq__item{
	margin-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
}
}

/* 開閉ボタン。<a href="#"> にすると main.js のスムーススクロールに拾われるため button で作る */
.eb-faq__q{
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: 23px 0;
	font-family: inherit;
	font-size: 16px;
	letter-spacing: 0.089em;
	line-height: 27px;
	color: #0d2b51;
	font-weight: 500;
}
@media screen and (max-width:639px){
.eb-faq__q{
	font-size: 14px;
	letter-spacing: 0.089em;
	line-height: 1.5;
	padding: 15px 0;
}
}

/* Q / A の記号。XD実測：18px・#8ba2c0・字送り0.2em（英字ラベルと同じ扱い） */
.eb-faq__mark{
	flex-shrink: 0;
	font-size: 18px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	color: #8ba2c0;
	width: 30px;
}
@media screen and (max-width:639px){
.eb-faq__mark{
	font-size: 15px;
	width: 22px;
}
}

.eb-faq__qtext{
	flex: 1;
}

/* 矢印はXDの FAQ_yajirushi.svg（16×9）をそのまま使う */
.eb-faq__arrow{
	flex-shrink: 0;
	width: 16px;
	height: 9px;
	margin-left: 15px;
	background-image: url(images/faq_yajirushi.svg);
	background-repeat: no-repeat;
	background-size: 16px 9px;
	/* 素材の矢印は上向きなので、閉じている状態（下向き）で180度回しておく */
	transform: rotate(180deg);
	transition: transform 0.2s ease-out;
}
.eb-faq__q[aria-expanded="true"] .eb-faq__arrow{
	transform: rotate(0deg);
}

/* 開閉する箱。既存 faq.html（#faqArea dl dd）と同じく CSS で display:none にしておき、
   jQueryの slideToggle で開閉する。
   ※ jQuery のスライドは高さ・余白しか動かせないため、
     flexレイアウトは内側の .eb-faq__aInner が持ち、この箱自体は素の block にする */
.eb-faq__a{
	display: none;
	border-top: 1px solid #e9eff5;
}

.eb-faq__aInner{
	display: flex;
	padding: 23px 0 24px;      /* 上23px＝2026-08-13 デザイナー確定（8pxから変更） */
}
@media screen and (max-width:639px){
.eb-faq__aInner{
	padding: 8px 0 15px;
}
}

.eb-faq__atext{
	flex: 1;
	line-height: 1.5;
	padding-top: 3px;
}

/* --------------------------------------------------------------------------
   12. CONTACT
   XD実測：白いカード446×120・角丸8・間隔8px。
           中身は「48pxのアイコン＋テキスト」の横並び
   -------------------------------------------------------------------------- */

.eb-contact{
	background-image: url(images/contact_bg.jpg);
}

.eb-contact__list{
	display: flex;
	gap: 8px;
	margin-top: 8px;
}
@media screen and (max-width:639px){
.eb-contact__list{
	display: block;
	margin-top: 15px;
}
}

.eb-contact__item{
	width: calc((100% - 8px) / 2);
}
@media screen and (max-width:639px){
.eb-contact__item{
	width: 100%;
	margin-bottom: 10px;
}
}

/* XD実測：446×120の白いカード。アイコンとテキストは横並び・全体を中央寄せ */
.eb-contact__btn{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 120px;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 20px;
	text-decoration: none;
	color: #0d2b51;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
	box-sizing: border-box;
	height: 100%;
	position: relative;     /* 右上の三角形あしらいの基準 */
}
/* 右上の紺の三角形あしらい。
   XD実測：24×24で、上からも右からも16px内側。斜辺は45°（FVの斜めと同じモチーフ）。
   デザイナー書き出しの contact_button.svg と同じ形をborderで描いている。
   （SVGをボタン全体の背景に敷く方法だと、ボタン幅が446px以外のとき
   　三角形まで一緒に引き伸ばされて45°が崩れるため使わない） */
.eb-contact__btn:after{
	content: "";
	position: absolute;
	top: 16px;
	right: 16px;
	width: 0;
	height: 0;
	border-top: 24px solid #0d2b51;
	border-left: 24px solid transparent;
	transition: border-top-color 0.15s ease-out;   /* ホバーの白反転をなめらかに */
}
/* ホバーはFVのCTA（.eb-btn）と同じ「紺に反転」に統一（2026-08-13 レビュー指摘）。
   既存サイトのCTA（.recruitBtn:hover → #0d2b51）とも同じ考え方 */
a.eb-contact__btn:hover{
	background-color: #0d2b51;
	color: #ffffff;
	text-decoration: none;
}
a.eb-contact__btn:hover:after{
	border-top-color: #ffffff;   /* 右上の三角形も白に反転 */
}
@media screen and (max-width:639px){
.eb-contact__btn{
	min-height: 0;
	padding: 20px;
	gap: 12px;
	justify-content: flex-start;   /* スマホは中のアイコン＋テキストを左揃えに（2026-08-13 レビュー） */
}
}

.eb-contact__btn img{
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}
@media screen and (max-width:639px){
.eb-contact__btn img{
	width: 40px;
	height: 40px;
}
}

.eb-contact__btnTitle{
	display: block;
	font-size: 20px;
	letter-spacing: 0.089em;
	line-height: 30px;
	font-weight: 700;          /* XD実測：Bold。他の見出し（Medium＝500）より太い（2026-08-16 レビュー指摘） */
	text-align: left;
}
@media screen and (max-width:1023px){
.eb-contact__btnTitle{
	font-size: 17px;
	letter-spacing: 0.089em;
	line-height: 1.5;
}
}
@media screen and (max-width:639px){
.eb-contact__btnTitle{
	font-size: 16px;
	letter-spacing: 0.089em;
}
}

/* 電話番号のカードはスマホのときだけタップ発信を有効にする。
   PC・タブレットではクリックしても何も起きないようにして、
   カーソル形状も文字選択の見た目（既存の他ページと同じ扱い）に戻す */
.eb-contact__btn--tel{
	pointer-events: none;
	cursor: default;
}
@media screen and (max-width:639px){
.eb-contact__btn--tel{
	pointer-events: auto;
	cursor: pointer;
}
}

.eb-contact__telBody{
	text-align: left;
}

.eb-contact__tel{
	display: block;
	font-size: 24px;
	letter-spacing: 0.089em;
	font-weight: 700;          /* XD実測：Bold（2026-08-16 レビュー指摘） */
	line-height: 27px;
}
@media screen and (max-width:1023px){
.eb-contact__tel{
	font-size: 20px;
	letter-spacing: 0.089em;
}
}
@media screen and (max-width:639px){
.eb-contact__tel{
	font-size: 20px;
	letter-spacing: 0.089em;
}
}

.eb-contact__hours{
	display: block;
	font-size: 14px;
	letter-spacing: 0.089em;
	font-weight: 700;          /* XD実測：Bold。電話番号と同じ太さで並ぶ（2026-08-16 レビュー指摘） */
	line-height: 27px;
}
@media screen and (max-width:639px){
.eb-contact__hours{
	font-size: 12px;
	letter-spacing: 0.089em;
	line-height: 1.6;
}
}