@charset "utf-8";

/*CV導線（ファーストビュー・サービス・CTA・スマホ追従バー）
本番のメインCSSはリポジトリ外のテーマ直下style.cssのため、このファイルに分けている。
ボタンは既存の.btn1を使い、新しい色を作らない。文字色は既存の.color-themeに任せる。
---------------------------------------------------------------------------*/

/*スマホのファーストビューにボタンまで収める。
ロゴの幅500pxが画面幅を超えて左が切れていたため縮め、ハンバーガーと重ならないよう右に寄せる*/
.home header {
	flex-direction: column;
	align-items: flex-end;
	padding: var(--space-small) 0 calc(var(--space-small) * 2);
}
.home #logo {
	max-width: 55vw;
	margin: 0 var(--space-small) 0 0;
}
.home #logo img {
	width: 100%;
	padding: 0;
}

/*ボタンの並び
---------------------------------------------------------------------------*/
.cv-cta {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-small) / 2);
	margin-top: var(--space-small);
}
.cv-cta .btn1 {
	margin: 0;
}
/*タップしやすい高さを確保する*/
.cv-cta .btn1 a {
	display: block;
	padding: 0.5em 1em;
}
/*sectionの外に置くとき、sectionと同じ左右の余白にする*/
.cv-cta--block {
	margin: 0 var(--space-small) calc(var(--space-small) * 3);
}

/*ファーストビュー
---------------------------------------------------------------------------*/
.cv-hero {
	align-self: stretch;
	margin: calc(var(--space-small) / 2) var(--space-small) var(--space-small);
	padding: var(--space-small);
	border-radius: 10px;
	background: var(--primary-inverse-color);
	line-height: 1.7;
}
.cv-hero__title {
	margin: 0 0 calc(var(--space-small) / 2);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
}
.cv-hero__lead {
	margin: 0 0 calc(var(--space-small) / 2);
}
.cv-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--space-small) / 4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}
.cv-hero__badge {
	padding: 0 0.8em;
	border: 1px solid var(--primary-color);
	border-radius: 100px;
}
.cv-hero .cv-cta {
	margin-top: calc(var(--space-small) / 2);
}
.cv-hero .cv-cta .btn1 {
	flex: 1;
}
/*.color-theme a の黒文字!importantが.btn1の白文字に勝って読めなくなるため、ここで戻す。hover時は.btn1の反転に任せる*/
.cv-hero .btn1 a:not(:hover) {
	color: var(--primary-inverse-color) !important;
}
.cv-hero__note {
	margin: calc(var(--space-small) / 4) 0 0;
	font-size: 0.85rem;
	text-align: center;
}

/*サービス・料金
---------------------------------------------------------------------------*/
.service__list {
	display: grid;
	gap: var(--space-small);
	margin-top: var(--space-small);
}
.service__item {
	padding: var(--space-small);
	border-radius: 10px;
	background: var(--primary-inverse-color);
	line-height: 1.8;
}
.service__item p {
	margin: calc(var(--space-small) / 2) 0 0;
}
main .service__title {
	margin: 0;
	font-size: 1.2rem;
}
.service__flow {
	margin: calc(var(--space-small) / 2) 0 0;
	padding-left: 1.5em;
}

/*スマホ下部の追従バー（開閉メニュー100、チャット・ページトップ99より下）
---------------------------------------------------------------------------*/
.cv-bar {
	position: fixed;
	z-index: 98;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: calc(var(--space-small) / 2);
	padding: calc(var(--space-small) / 2);
	background: var(--primary-color);
	box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.cv-bar .btn1 {
	flex: 1;
	margin: 0;
}
.cv-bar .btn1 a {
	display: block;
	padding: 0.3em 0.5em;
}

/*バーに隠れないよう、フッターの下に余白を足す*/
#footer-contents {
	padding-bottom: calc(var(--space-small) * 5);
}

/*バーの分だけページトップとチャットを上へずらす*/
.cv-bar ~ .pagetop a {
	bottom: calc(var(--space-small) * 4);
}
.cv-bar ~ .chatbot .chatbot__launcher {
	bottom: calc(var(--space-small) * 8);
}
.cv-bar ~ .chatbot .chatbot__panel {
	bottom: calc(var(--space-small) * 12);
	max-height: calc(100vh - var(--space-small) * 13);
}

/*タブレット以上
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) {

	.home #logo {
		max-width: 40vw;
	}

	.cv-cta {
		flex-direction: row;
		justify-content: center;
	}
	.cv-cta .btn1 a {
		padding: 0.5em 3em;
	}
	.cv-cta--block {
		margin-left: var(--space-large);
		margin-right: var(--space-small);
	}

	.cv-hero {
		margin-left: var(--space-large);
	}
	.cv-hero .cv-cta .btn1 a {
		padding: 0.5em 1em;
	}
	.cv-hero__title {
		font-size: 1.8rem;
	}

	.service__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.cv-bar {
		display: none;
	}
	#footer-contents {
		padding-bottom: 2rem;
	}
	.cv-bar ~ .pagetop a {
		bottom: 20px;
	}
	.cv-bar ~ .chatbot .chatbot__launcher {
		bottom: calc(var(--space-small) * 5);
	}
	.cv-bar ~ .chatbot .chatbot__panel {
		bottom: calc(var(--space-small) * 9);
		max-height: 70vh;
	}

}

/*PC：左にロゴとコピー、右に写真を並べ、1画面目でボタンまで見せる
---------------------------------------------------------------------------*/
@media screen and (min-width:1024px) {

	.home header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 50vw;
		column-gap: calc(var(--space-small) * 2);
		align-items: center;
		margin-left: var(--space-large);
		padding: var(--space-small) 0 calc(var(--space-small) * 3);
	}
	.home #logo {
		grid-column: 1;
		grid-row: 1;
		max-width: 60%;
		margin: 0;
	}
	.cv-hero {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}
	.home .mainimg-slick {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 50vw;
	}

}