@charset "UTF-8";

/* =========================================================================
   top-blocks.css — トップページに足したブロックの追加分
   -------------------------------------------------------------------------
   旧テーマ由来の layout.css / layout_tb.css / layout_sp.css には
   手を入れていない。ここで足しているのは次の 3 ブロックだけ。

     .top_lead    ヒーローの下に置く 1 段落の説明
     .top_record  実施回数・受講者数
     .top_cta     ページ末尾の問い合わせ導線
     .top_course_card  「おすすめの研修」のカード（旧 .seminar_item の置き換え）
     .top_chara   公式キャラクター紹介（.column_chara）を下へ移すためのラッパー
   あわせて .area_flipuru（旧テーマ）に左端の水色帯を足している。

   説明文をヒーロー（.topimage .inner）の中に入れていないのは、
   旧テーマが .inner に高さを固定で与えているため
   （PC 600px / TB 400px / SP 260px）。中に足すと文章が箱から溢れる。
   そのため .topimage の直下に独立したブロックとして置いている。

   幅は旧テーマの .inner に任せている（PC 1000px / TB 90% / SP 100%）。
   ボタンは cta.css の .cta_button をそのまま使う。

   読み込むページ: / （トップページのみ）
   ========================================================================= */


/* 3 ブロックとも左端に水色帯を付けている。旧テーマが .topimage /
   .special_point / .seminar_index / .information_column に与えている
   ものと同じ幅（PC 24px / TB 20px / SP 8px）。付けないと帯が途切れ、
   足したブロックだけ浮いて見える。 */


/* --- ヒーロー直下の説明 --------------------------------------------------
   何の会社で何を提供しているかを、最初の画面に近い位置で 1 段落で伝える。 */
.top_lead {
	width: 100%;
	padding: 36px 0 8px 0;
	border-left: 24px solid #00afdf;
}
.top_lead p {
	font-size: 17px;
	line-height: 1.9;
	color: #555;
	margin: 0;
	text-align: center;
}


/* --- 実施回数・受講者数 --------------------------------------------------
   旧テーマの見出し帯（#00afdf）と同じ色で 1 行だけ。
   数字を大きくせず、地の文と同じ重さで置いている。 */
.top_record {
	width: 100%;
	padding: 10px 0 30px 0;
	border-left: 24px solid #00afdf;
}
.top_record .inner {
	border-top: 1px solid #cfe9f2;
	border-bottom: 1px solid #cfe9f2;
	padding: 18px 0;
}
.top_record p {
	font-size: 17px;
	line-height: 1.8;
	color: #1d2778;
	margin: 0;
	text-align: center;
	font-weight: 600;
}


/* --- ページ末尾の問い合わせ導線 ------------------------------------------ */
.top_cta {
	width: 100%;
	padding: 20px 0 60px 0;
	border-left: 24px solid #00afdf;
}
.top_cta p {
	margin: 0;
	text-align: center;
}
.top_cta .top_cta_text {
	font-size: 16px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 20px;
}


/* --- 「おすすめの研修」のカード ------------------------------------------
   もとは .seminar_item という 1 行のリストで、
     ・受講期間（青・14px）が目立ち、コース名（font-weight:300）が地味
     ・押せるのは右端の 44px の丸ボタンだけ
     ・SP は .seminar_title に max-width:280px が効いて名前が切れる
   という状態だった。コース名を主役にし、カード全体をリンクにする。

   .seminar_index / .seminar_item はトップページでしか使っていないため、
   旧テーマの CSS には触らず、新しいクラスで組み直している。
   バッジの色は seminar_new.css の list_title_online / _offline と同じ。 */

.seminar_index .article_contents {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.top_course_card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.10);
	text-decoration: none;
	transition: 0.2s all ease 0s;
}
.top_course_card:hover,
.top_course_card:focus {
	border-color: #00afdf;
	box-shadow: 0px 4px 13px 0px rgba(0, 175, 223, 0.35);
}
.top_course_badge {
	align-self: flex-start;
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.4;
	color: #fff;
	margin-bottom: 12px;
}
.top_course_badge_online { background-color: #3351d8; }
.top_course_badge_both   { background-color: #00afdf; }

/* コース名を主役にする。旧実装は font-weight:300 で地味だった */
.top_course_name {
	display: block;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
}
.top_course_meta {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: #777;
	margin-bottom: 16px;
}
/* 「詳細を見る」はカードの一番下に揃える */
.top_course_more {
	display: block;
	margin-top: auto;
	font-size: 13px;
	color: #001db3;
	background: url("../images/common/arrow_right_circle.svg") no-repeat right center;
	background-size: 20px;
	padding-right: 26px;
}
.top_course_card:hover .top_course_more {
	text-decoration: underline;
}


/* --- 公式キャラクター紹介のラッパー --------------------------------------
   .column_chara はもともと .seminar_index の内側にあり、親の左端の水色帯と
   1000px の中央寄せの中に収まっていた。ページ下部へ移すと帯が途切れ、
   中央位置も 12px ずれる（含まれるブロックの幅が変わるため）。
   帯だけを持つラッパーで囲んで、元と同じ条件に戻している。
   .column_chara 自体の CSS（旧テーマ）には触っていない。 */

.top_chara {
	width: 100%;
	border-left: 24px solid #00afdf;
	/* .column_chara は margin: 60px auto を持つ。ラッパーに縦の padding も
	   border もないと、この 60px はマージンの相殺でラッパーの外に抜け、
	   前後に帯のない 60px の隙間ができる（.seminar_index の中にいたときは
	   兄弟要素があったため起きなかった）。
	   flow-root で新しいブロック整形コンテキストを作り、margin を
	   内側に留める。.column_chara 自体の CSS には触っていない。 */
	display: flow-root;
}


/* --- Flipuru ブロックの左端の水色帯 --------------------------------------
   旧テーマは .topimage / .special_point / .seminar_index /
   .information_column に border-left の水色帯を与えているが、
   .area_flipuru だけ持っていない。さらに background-color:#fff なので、
   白い帯が水色の帯の位置まで広がり、このブロックだけ左に
   はみ出して見えていた（旧サイトから引き継いだ指定漏れ）。
   帯だけを足して他ブロックと開始位置を揃える。
   内側の .inner は旧テーマのまま 900px にしている
   （.flipuru_title 260px + .flipuru_contents 500px を
     justify-content:space-between で置く前提で組まれているため、
     1000px にすると 2 列の間隔が 140px から 240px に広がる）。 */

.area_flipuru {
	border-left: 24px solid #00afdf;
}


@media all and (min-width: 768px) and (max-width: 1200px) {

.top_chara,
.area_flipuru { border-left-width: 20px; }
/* タブレットは 2 列だと 1 枚が狭くなるので 1 列にする */
.seminar_index .article_contents {
	grid-template-columns: 1fr;
	gap: 14px;
}
.top_lead,
.top_record,
.top_cta {
	border-left-width: 20px;
}
.top_lead p,
.top_record p {
	font-size: 16px;
}

}


@media all and (max-width: 767px) {

.top_chara,
.area_flipuru { border-left-width: 8px; }

/* --- キャラクター紹介の 2 枚が画面からはみ出すのを直す --------------------
   SP でトップページに横スクロールが出ていた（375px 幅で文書幅が 483px）。

   原因は旧テーマの指定漏れ。.column_chara .sp_image は display: flex で、
   中の img は flex-basis: 45% を持っている。ところが img には
   .column_chara img と layout_sp.css の img から width: 100% が効いており、
   フレックスアイテムの「自動最小サイズ」（min-width: auto）が
   この width を最小値として採用するため、45% まで縮まず
   1 枚が親と同じ幅（288px）になっていた。2 枚並ぶので約 2 倍にあふれ、
   justify-content: center により左の 1 枚は画面外（left: -100px）へ、
   右の 1 枚が文書を 483px まで広げていた。

   layout_tb.css の同じ規則には max-width: 200px があり、
   タブレットでは起きない。SP 側だけ書き漏れている。
   旧テーマの CSS は変更しない方針なので、ここで打ち消す。
   min-width: 0 で自動最小サイズを外し、上限はタブレットと同じ 200px。 */
.column_chara .sp_image img {
	min-width: 0;
	max-width: 200px;
}
.seminar_index .article_contents {
	grid-template-columns: 1fr;
	gap: 12px;
}
.top_course_card {
	padding: 16px;
}
.top_course_name {
	font-size: 15px;
}
.top_course_meta {
	font-size: 12px;
	margin-bottom: 12px;
}
/* 旧テーマは SP で h2 と「研修一覧を見る」を flex で並べており、
   「おすすめの研修」が 2 行に折れていた。見出しを縮めない。 */
.seminar_index .article_title h2 {
	flex-shrink: 0;
	margin-right: 10px;
}
.top_lead,
.top_record,
.top_cta {
	border-left-width: 8px;
}
.top_lead {
	padding: 24px 0 4px 0;
}
.top_lead p {
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
	padding: 0 16px;
}
.top_record {
	padding: 6px 0 20px 0;
}
.top_record .inner {
	padding: 14px 16px;
}
.top_record p {
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}
.top_cta {
	padding: 10px 0 40px 0;
}
.top_cta .top_cta_text {
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
	padding: 0 16px;
	margin-bottom: 16px;
}
.top_cta .top_cta_button {
	padding: 0 16px;
}

}


/* --- ヒーローの高さを抑える ----------------------------------------------
   旧テーマは .topimage .inner に height: 600px を固定で持っている。
   ヘッダー 80px とティッカー 53px を足すと 773px になり、1 画面目が
   ほぼヒーローだけで埋まっていた。1920x1080 でも「各種サービス」の
   見出しが出るところで画面が終わり、サービスの中身が読めなかった。

   上限を 460px にする。箱に余白があるわけではないので
   （中身は実測 615px あって 600px の箱を既に 15px 超えている）、
   見出しとイラストも同じだけ縮める。

     .inner        600 -> 460      h1          170 -> 120px
     背景イラスト   550 -> 430      人物イラスト  380 -> 300px

   さらに min() で「上限の px」と「画面の高さに対する比率」の
   小さいほうを採り、縦が狭いときはもっと縮むようにしている。
   上限に張り付くのは高さ 742px 以上（460 / 0.62）なので、
   ふつうのノート PC（768px 以上）は一律 460px になる。

   縦の内訳（clear:both の h2 は h1 の直下に来るため margin-top は効かない）
     h1 が 2 行 → h2（18px 固定）→ .top_illust
     742px 以上: 240 + 32 + 32 + 154 = 458  <= inner 460
        700px  : 227 + 32 + 31 + 146 = 436  ≒  inner 434
   左の背景イラストは 40px 下げた位置に置かれるので、
   その下端（40 + 幅 x 0.976）も inner に収まる比率にしている。

   vh の係数は、高さ 742px でちょうど上限の px を上回るように決めている
   （120 / 7.42 = 16.17 なので 16.2vh）。下回る値にすると上限に届かず、
   ふつうのモニターで意図した寸法から 1px ずれる。

   タブレット（layout_tb.css で 400px）とスマートフォン（同 260px）は
   1 画面の 36〜37% しか占めていないので対象外。旧テーマの
   layout.css には手を入れていない。 */

@media all and (min-width: 1201px) {

.topimage .inner {
	/* 高さだけ縮めると中央に 232px の隙間ができる（旧テーマは
	   背景イラストの右端 550px と h1 の左端 522px が 28px 重なる
	   詰まった構図だった）。幅も縮めて詰める。
	   ただし高さと同じ比率では狭すぎる。サブコピー（h2）は 18px 固定で
	   実幅 431px あり、右寄せなので幅を詰めるとイラストに重なる。
	   旧テーマの 1000px も「背景 550 + サブコピー 431 + 余白 19」で
	   決まっていた。そこで幅は固定値にせず、背景の幅から計算する。
	   背景が 430px のとき 430 + 450 = 880px。
	   幅も vh で縮めるとサブコピーだけ 431px のまま残って重なるので、
	   背景と同じだけ縮む形にしている。 */
	width: calc(min(430px, 58vh) + 450px);
	height: min(460px, 62vh);
	/* 左の背景イラスト（1141x1114）。下端が inner に収まる比率にしている */
	background-size: min(430px, 58vh);
}
.topimage h1 {
	font-size: min(120px, 16.2vh);
	/* h1 は float: right なので、左端は「幅 - この余白 - h1 の幅」で決まる。
	   幅は背景と同じだけしか縮まないのに h1 の幅は font-size に比例して
	   縮むため、固定値にすると縦が狭いほど左に隙間が開く（67 -> 165px）。
	   font-size と同じ比率で増える形にして、隙間を 67〜89px に保つ。
	   背景イラストと完全に重ねる値も試したが、この PNG は図の周りに
	   余白を持つため、箱を 28px 重ねると見た目では人物に寄りすぎた。 */
	margin-right: calc(300px - min(170px, 23vh));
}
.topimage .top_illust {
	width: min(300px, 40.5vh);
	margin-top: min(32px, 4.4vh);
}

/* ヒーローを縮めたら、イラストの下端から説明文までが 53px あって
   離れて見えた（ヒーローの下 padding 20px のうち残り 14px ＋
   .top_lead の上 36px）。PC だけ詰めて 35px にする。
   タブレットとスマートフォンで詰めてはいけない。あちらは中身が
   inner を 44〜46px はみ出していて（TB 446/400・SP 304/260）、
   イラストがすでに .top_lead の領域まで来ているため、
   36px でも余白は 10px しかなく、詰めると文字に重なる。 */
.top_lead {
	padding-top: 18px;
}

}