@charset "UTF-8";
/*
 * GENKI創造 サービス案内ページ用スタイル
 * 元原稿: https://genkisozo.com/renew6/ui_kits/genkisozo/service.html
 * トークン・gs-*コンポーネントはgenki-lp.cssと共有し、
 * このファイルにはサービス案内ページ専用のクラスのみを定義する。
 */

/* page-service.php冒頭のh1「サービス案内」用。他の固定ページ(page.php)と同じ
   .c-heading .u-mt0 の見た目を、.genki-lp配下でも再現する。 */
.genki-lp .c-heading{
	position:relative;
	box-sizing:border-box;
	max-width:var(--container);
	font-size:22px;
	font-weight:600;
	color:#222;
	text-align:center;
	padding-top:0;
	padding-left:var(--gutter);
	padding-right:var(--gutter);
	margin:50px auto 34px;
	text-decoration:none;
	border-bottom:0;
	padding-bottom:16px;
}
/* タイトル下のオレンジ線は、本文コンテナ幅に関係なく画面幅いっぱいまで伸ばす */
.genki-lp .c-heading::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:100vw;
	border-bottom:3px solid #E8512A;
}
@media screen and (min-width:768px){
	.genki-lp .c-heading{
		font-size:32px;
	}
}

/* サービス案内ページ冒頭のバナー。背景画像(bg_service_top.jpg)の上に
   見出し・リード文をHTMLテキストとして重ねる。テキストの左端は、
   fv__copyと同じ考え方でヘッダーロゴの左端に揃える。 */
.genki-lp .svc-top-banner{
	position:relative;
	background-color:#FBF3EA;
	background-image:var(--svc-top-bg);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	aspect-ratio:2021/778;
	display:flex;
	align-items:center;
	margin-bottom:40px;
}
.genki-lp .svc-top-banner__copy{position:relative;width:100%;max-width:var(--container_size);margin:0 auto;padding:0 var(--gutter) 0 10px}
.genki-lp .svc-top-banner__copy-inner{max-width:640px}
.genki-lp .svc-top-banner__title{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-size:clamp(20px,3.4vw,52px);font-weight:900;color:var(--ink);line-height:1.4;margin:0 0 16px;letter-spacing:-.05em;white-space:nowrap}
.genki-lp .svc-top-banner__accent{color:var(--or)}
.genki-lp .svc-top-banner__title-sub{font-size:.8em}
.genki-lp .svc-top-banner__lead{font-size:clamp(14.5px,1.5vw,22.5px);color:var(--body);line-height:1.7;margin:0}


/* アイコン＋タイトル＋矢印の行に加えて、説明文を1段下に表示するバリエーション */
.genki-lp .svc-layer-item--detailed{flex-direction:column;align-items:stretch;gap:8px}
.genki-lp a.svc-layer-item--detailed:hover{border-color:var(--or);background:var(--or-tint);transform:translateY(-2px)}
.genki-lp .svc-layer-item--detailed .svc-layer-item__hd{display:flex;align-items:center;gap:12px}
.genki-lp .svc-layer-item--detailed .svc-layer-item__hd img{width: 40px;height: 40px;flex:0 0 auto;object-fit:contain}
.genki-lp .svc-layer-item--detailed .svc-layer-item__hd span{flex:1;font-size: 17px;font-weight:700;color:var(--ink);line-height:1.4}
.genki-lp .svc-layer-item--detailed .svc-layer-item__hd i{font-style:normal;color:var(--or);font-weight:700;font-size: 25px;flex:0 0 auto}
.genki-lp .svc-layer-item--detailed .svc-layer-item__desc{font-size:15px;color:var(--body);line-height:1.7;margin:0}
.genki-lp .svc-common__items .svc-layer-item--detailed{padding:14px 16px!important}

/* 見出し＋リード文＋写真の横並びブロック（各サービスセクション共通） */
.genki-lp .svc-row{display:flex;gap:35px;align-items:flex-start}
.genki-lp .svc-row>div:first-child{flex:1;min-width:0}
.genki-lp .svc-illus{flex:0 0 300px;width:auto;height:280px;object-fit:cover;border-radius:var(--r-card)}

/* 02 LECTUREのみ、写真を右上に小さく回り込み表示し、タイトル行の開始位置を写真の上端に揃える。
   タグ・ボタンは写真の下まで来たら全幅に戻る（clear:both） */
.genki-lp .svc-photo-wide{float:right;width:300px;max-width:45%;height:auto;margin:0 0 20px 24px;border-radius:var(--r-card)}

/* カテゴリ行（アイコン＋ラベルのタグ） */
.genki-lp .cat-row{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.genki-lp .cat-row .mk{margin:0}
.genki-lp .cat{display:inline-block;font-size:13px;font-weight:700;color:#fff;background:var(--ink);letter-spacing:.14em;padding:5px 14px}

/* アイコン共通 */
.genki-lp .mk{width:26px;height:26px;display:block;color:var(--or);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 01 CONSULTING: 個人層・対人層・チーム層の3枚カード＋矢印 */
.genki-lp .svc-layers{display:flex;align-items:stretch;gap:14px;margin-bottom:34px}
.genki-lp .svc-layers .gs-card{flex:1}
.genki-lp .svc-layers__arrow{display:flex;align-items:center;font-size:20px;color:var(--or);font-weight:700}

/* マトリクスカード（社員にモテる／求職者にモテる／お客様にモテる） */
.genki-lp .mx{background: #ffffff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.genki-lp .mx__hd{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.genki-lp .mx__hd .mk{color:var(--or-on-dark)}
.genki-lp .mx__hd b{font-size:16px;font-weight:700}
.genki-lp .mx__hd--muted{background:#F2F2F3}
.genki-lp .mx__hd--muted b{color:var(--or)}
.genki-lp .mx__hd--muted .mk{color:var(--or)}
.genki-lp .mx__hd-divider{margin:0 12px}
.genki-lp .mx__hd-tag{font-size:15px}
.genki-lp .svc-nextstep .gs-sub{max-width:none}
.genki-lp .mx__is{font-size:15px;color:var(--mute);margin:0;padding:14px 18px 0;line-height:1.7}
.genki-lp .mx__is a{color:var(--or);text-decoration:underline;text-decoration-color:var(--or-line);text-underline-offset:2px}
.genki-lp .mx__is a:hover{color:var(--or-dark)}
.genki-lp .mx__list{list-style:none;padding:14px 18px;margin:0;flex:1}
.genki-lp .mx__list li{font-size:14.5px;color:var(--body);line-height:1.6;padding:8px 0 8px 22px;border-bottom:1px solid #F1F1F3;position:relative}
.genki-lp .mx__list li:before{content:"";position:absolute;left:6px;top:16px;width:6px;height:1px;background:var(--or)}
.genki-lp .mx__list li:last-child{border-bottom:0}
.genki-lp .mx__foot{padding:0 18px 18px}
.genki-lp .mx__foot .gs-btn--outline{display:block;text-align:center;font-size:14.5px;padding:12px 16px}

/* 社員にモテる（featured）カード：見出し内リンク一覧＋タグ */
.genki-lp .mx--featured{margin-bottom:26px;background: #FDFCF8;}
.genki-lp .mx--featured .mx__hd{background:var(--or)}
.genki-lp .mx--featured .mx__hd b{font-size:19px}
.genki-lp .mx--featured .mx__is{font-size:15px;padding-top:16px}
.genki-lp .mx__links{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:16px 18px 18px}
.genki-lp .mx__links li{border-bottom:0;padding:0}
.genki-lp .mx__links li:before{display:none}
.genki-lp .mx__links a{display:block;height:100%;box-sizing:border-box;text-decoration:none;background:var(--or-tint);border:1px solid var(--or-line);border-radius:var(--r-card);padding:16px 18px;transition:.15s}
.genki-lp .mx__links a:hover{border-color:var(--or);transform:translateY(-2px)}
.genki-lp .mx__links b{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.genki-lp .mx__links span{display:block;font-size:13.5px;color:var(--body);line-height:1.75}
.genki-lp .mx--featured .tags{padding:4px 18px 18px;margin:0}
.genki-lp .mx--featured .tags li{position:relative;padding-left:22px}
.genki-lp .mx--featured .tags li:before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:6px;height:1px;background:var(--or)}
.genki-lp .mx__nt{font-size:14px;color:var(--mute);margin:16px 0 0}

/* タグ一覧（丸角の白ピル） */
.genki-lp .tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 var(--gap-block)}
.genki-lp .tags li{font-size:14.5px;color:var(--body);border:1px solid var(--line);border-radius:var(--r-btn);padding:8px 14px;background:#fff}
/* 02 LECTUREの7個のタグを、画面幅が十分ある時は2行（4個＋3個）に収める。
   clear:bothで、上の写真（float:right）の下まで来たら確実に全幅に戻す */
.genki-lp .tags--row1{margin-bottom:10px;clear:both}

/* 02 LECTURE 講演テーマ一覧: 最初の1件だけオレンジの左線＋バッジで強調する */
.genki-lp .lecture-list{display:flex;flex-direction:column;gap:14px;margin:0 0 24px;clear:both}
.genki-lp .lecture-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px}
.genki-lp .lecture-card--featured{border-color:var(--or-line);border-left:4px solid var(--or)}
.genki-lp .lecture-card__badge{display:inline-block;background:var(--or);color:#fff;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:4px;margin-bottom:10px}
.genki-lp .lecture-card__title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.6;margin:0 0 6px}
.genki-lp .lecture-card__meta{font-size:14.5px;color:var(--mute);margin:0}

/* 02 LECTURE 講演者プロフィール: TOPページの01 PROFILEを踏襲しつつ、
   実績数字は写真の右側（本文カラム内）に収める */
.genki-lp .lecture-profile{display:flex;gap:40px;align-items:flex-start;margin-top:48px}
.genki-lp .lecture-profile__photo{flex:0 0 220px;width:220px}
.genki-lp .lecture-profile__photo img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.genki-lp .lecture-profile__body{flex:1;min-width:0}
.genki-lp .lecture-profile__stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-top:2px solid var(--or)}
.genki-lp .lecture-profile__stats>div{text-align:center;padding:16px 4px 0}
.genki-lp .lecture-profile__stats>div+div{border-left:1px solid var(--line)}
.genki-lp .lecture-profile__stats b{display:block;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:22px;color:var(--or);font-weight:900;line-height:1.1}
.genki-lp .lecture-profile__stats span{display:block;font-size:14px;color:var(--mute);margin-top:4px}

@media (max-width:767px){
	/* サービス案内ページ冒頭バナー: スマホでは文字を白背景カードにして
	   写真の左上に重ねる表示に切り替える */
	.genki-lp .svc-top-banner{aspect-ratio:3/2;align-items:flex-start;background-position:right center}
	.genki-lp .svc-top-banner__copy{max-width:none;padding:16px;margin-top:50%}
	.genki-lp .svc-top-banner__copy-inner{max-width:100%;background:rgba(255,255,255,.7);border-radius:8px;padding:12px 14px}
	.genki-lp .svc-top-banner__title{white-space:normal;font-size:22px;line-height:1.35;margin:0 0 8px}
	.genki-lp .svc-top-banner__lead{font-size:13.5px;line-height:1.5}
	.genki-lp .svc-row{flex-direction:column-reverse;gap:20px}
	.genki-lp .svc-illus{width:90%;height:auto;margin:0 auto;flex:0 0 auto}
	.genki-lp .svc-photo-wide{display:block;float:none;width:90%;max-width:100%; height:auto;margin:0 auto 24px}
	.genki-lp .svc-layers{flex-direction:column}
	.genki-lp .svc-layers__arrow{justify-content:center;transform:rotate(90deg)}
	.genki-lp .mx__links{grid-template-columns:1fr}
	/* 「求職者にモテる」「採用ブランディング」が1文字だけ折り返さないよう詰める */
	.genki-lp .mx__hd{padding:14px 10px;gap:6px}
	.genki-lp .mx__hd .mk{width:20px;height:20px}
	.genki-lp .mx__hd b{font-size:15px}
	.genki-lp .mx__hd-divider{margin:0 6px}
	.genki-lp .mx__hd-tag{font-size:13.5px}
	/* 「「モテる会社®」づくりのために、」が1文字だけ折り返さないよう縮小 */
	.genki-lp .lecture-title{font-size:clamp(17px,5.6vw,22px)}
	/* 「各種講演活動・ペップトークの詳細を見る」が2行にならないよう縮小 */
	.genki-lp .lecture-btn{white-space:nowrap;font-size:15px;padding:16px 14px}
	.genki-lp .lecture-card{padding:16px 18px}
	.genki-lp .lecture-profile{flex-direction:column;gap:20px}
	.genki-lp .lecture-profile__photo{width:160px;flex:0 0 auto;margin:0 auto}
	.genki-lp .lecture-profile__stats{grid-template-columns:repeat(2,1fr);row-gap:12px}
	.genki-lp .lecture-profile__stats>div:nth-child(3),
	.genki-lp .lecture-profile__stats>div:nth-child(4){border-top:1px solid var(--line);padding-top:12px}
}