@charset "UTF-8";
@import url(./common.css);

/* ==============================
まとめて指定
============================== */
.flex_container {
	display: flex;
}
/* 見出し */
.service .service_contents .headline,
.problem .sec_h3 > .headline {
	color: var(--accent-color);
}

/* ==============================
メインビジュアル
============================== */
.main_visual {
	display: flex;
	min-height: 80vh;
	margin-bottom: 3rem;
	background: url(../image/index/keyVisual-2560.jpg) no-repeat center/cover;
}
.main_visual > .copy_wrapper {
	padding: 2rem 2vw 2rem 0;
	background-color: rgba(255, 255, 255, .6);
}
.main_visual p {
	padding: 8px 16px;
	line-height: 1.4;
}
/* catch_copy */
.main_visual .catch_copy > p {
	font-size: clamp(24px, 2.5vw, 56px);
	font-family: var(--headline-font);
	font-weight: 600;
}
.main_visual strong,
.main_visual strong > span {
	display: block;
}
.main_visual .catch_copy strong {
	color: var(--accent-color);
	font-size: 1.5em;    /* 親要素から継承 */
}
/* appeal_point */
.main_visual .appeal_point > p {
	font-size: clamp(16px, 1.5vw, 1.2rem);
}
/* buttonLink_block */
.main_visual .buttonLink_block {
	padding: 16px;
}

/* ==============================
全体的なスタイル
============================== */
/* セクションの背景色 */
.sec_index_h2:nth-of-type(odd) {
	background-color: #fff;
}
.sec_index_h2:nth-of-type(even) {
	background-color: var(--bgColor-light);
}

/* ==============================
h2
============================== */
main .sec_index_h2 {
	padding: 3rem 0;
}
main .sec_index_h2:not(.achievement) > .sec_h2_inner {
	width: var(--contents-width);
	margin: 0 auto;
}

/* ==============================
ボタン配置 支援実績・FAQ 共通
============================== */
/* ボタンリンクの配置 */
main .achievement .buttonLink_block > a,
main .faq .buttonLink_block > a {
	margin: 32px auto 0;
}


/* ==============================
支援実績
============================== */
main .achievement ul > li img {
	margin-bottom: 8px;
}
main .achievement .anchor_text {
	padding: 16px 0 24px;
}
/* アローマークの配置 */
main .achievement li > a {
	position: relative;     /* マークの基準 */
}
main .achievement li > a > .arrow_badge {
	right: 0;
	bottom: 8px;
}

/* ==============================
サービス（メニュー側・コンテンツ側 共通）
============================== */
/* アイコン */
.service .icon {
	width: 80px;
	aspect-ratio: 1;
	padding: 16px;
	margin: 16px auto;
	background-color: #eee;
	border-radius: 50%;
}

/* ==============================
サービス（メニュー側）
============================== */
/* メニュー */
.service .service_menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.service .service_menu > li {
	border: solid 1px var(--accent-color);
	padding-bottom: 56px;
	background-color: #fff;
	cursor: pointer;
}
/* テキスト */
.service .service_menu .service_name {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
}
/* OPENマーク */
.service .service_menu > li {
	position: relative;     /* マークの基準 */
}
.service .service_menu .open_badge {
	right: 16px;
	bottom: 16px;
}

/* ==============================
サービス（コンテンツ側）
============================== */
.service .service_contents > li {
	width: 100%;
	min-height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .7);
	visibility: hidden;
	opacity: 0;
	z-index: 50;
	transition: opacity .5s;
}
/* h3 */
.service .service_content_h3 {
	width: var(--contents-width);
	padding: 2rem;
	background-color: #fff;
}
/* h4 */
.service .service_content_h4:first-of-type {
	border-top: solid 1px var(--border-color);
}
.service .service_content_h4:nth-of-type(2) > ul {
	background-color: var(--bgColor-light);
}
/* 見出し */
.service .service_content_h4 > .headline {
	padding-bottom: 1rem;
}
.service .service_contents h3,
.service .service_contents h4 {
	text-align: center;
}
/* CLOSEマーク */
.service .service_content_h3 {
	position: relative;     /* マークの基準 */
}
.service .service_content_h3 > .close_badge {
	top: 16px;
	right: 16px;
	cursor: pointer;
}
/* visible */
.service .service_contents > li.is-visible {
	visibility: visible;
	opacity: 1;
}

/* ==============================
問題解決
============================== */
main .problem h3 {
	padding: 8px;
	background-color: var(--bgColor-light);
}
main .problem .sec_h3 {
	margin-bottom: 16px;
}
main .problem .sec_h3 > ul {
	padding: 16px 0;
}
main .problem .flex_container {
	align-items: center;
	gap: 16px;
}

/* ==============================
特徴
============================== */
main .features .sec_h3:not(:last-of-type) {
	margin-bottom: 48px;
}
main .features h3 {
	font-family: var(--fontFamily-headline);
}
main .features .sec_h3 > .flex_container {
	gap: 16px;
}
main .features h3 {
	font-size: 150%;
	color: var(--accent-color);
}

/* ==============================
FAQ・会社概要 共通
============================== */
main .faq .question,
main .info .information li {
	border-bottom: dotted 2px #ddd;
}

/* ==============================
FAQ
============================== */
/* 質問 */
main .faq summary {
	position: relative;		/* 疑似要素の基準 */
	padding: 1rem 1rem 1rem 2rem;
	list-style: none;		/* デフォルトのマークを非表示に */
	cursor: pointer;
}
main .faq summary::before {
	content: "Q.";
	display: inline-block;
	position: absolute;
	top: 1rem;
	left: 0.5rem;
	color: var(--accent-color);
}
/* 答え */
main .faq .answer {
	position: relative;		/* 疑似要素の基準 */
	padding: 0 1rem 0 2rem;
	background-color: var(--bgColor-light);
}
main .faq .answer::before {
	content: "A.";
	display: inline-block;
	position: absolute;
	top: 1rem;
	left: 1rem;
	color: var(--accent-color);
}
main .faq .answer > p {
	padding: 8px;
	line-height: 1.4;
}
main .faq .answer > p:first-of-type {
	margin-top: 8px;
}
main .faq .answer > p:last-of-type {
	margin-bottom: 16px;
}
/* アニメーション用 */
main .faq .question[open] .answer {
	height: auto;
	opacity: 1;
	transition: height 0.3s ease-out, opacity 0.3s ease-out;
}
main .faq .answer {
	overflow: hidden;
	transition: height 0.3s ease-out, opacity 0.3s ease-out;
	height: 0;
	opacity: 0;
}

/* ==============================
会社概要
============================== */
/* 概要 */
main .info .information li > .info_item {
	color: var(--accent-color);
}
main .info .information li > .info_content > span {
	display: inline-block;
}
main .info .information li .post_code {
	margin-right: 0.5rem;
}
/* マップ */
main .info .google_map > iframe {
	width: 100%;
}



/* ==============================
スマホ
============================== */
@media screen and (max-width: 767px) {

	/* ------------------------------
	メインビジュアル
	------------------------------ */
	.main_visual {
		align-items: flex-end;
		padding-bottom: 16px;
	}
	.main_visual > .copy_wrapper {
		width: 90%;
	}

	/* ------------------------------
	支援実績
	------------------------------ */
	main .achievement ul > li {
		margin: 16px 24px;
		border-bottom: solid 1px var(--border-color);
	}

	/* ------------------------------
	サービス（メニュー側）
	------------------------------ */
	main .service .service_menu > li {
		width: calc((100% - 5rem) / 2);
	}
	/* ------------------------------
	サービス（コンテンツ側）
	------------------------------ */
	/* h3 */
	main .service .service_content_h3 {
		margin: 5rem auto;
	}
	/* h4 */
	main .service .service_content_h4 {
		padding-top: 1rem;
	}
	main .service .service_content_h4:first-of-type > ul {
		margin: 0 1rem;
	}
	main .service .service_content_h4:nth-of-type(2) > ul {
		padding: 1rem 2rem;
	}

	/* ------------------------------
	問題解決
	------------------------------ */
	main .problem .flex_container {
		flex-direction: column;
	}

	/* ------------------------------
	特徴
	------------------------------ */
	main .features .sec_h3 > .flex_container {
		flex-direction: column;
	}
	main .features .sec_h3 img {
		aspect-ratio: 5 / 2;
	}
	main .features .sec_h3 p {
		padding: 8px;		/* 上書き */
	}
}

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

	/* ------------------------------
	サービス（メニュー側）
	------------------------------ */
	.service .service_menu > li {
		width: calc((100% - 5rem) / 4);
	}
}

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

	/* ------------------------------
	メインビジュアル
	------------------------------ */
	.main_visual {
		align-items: center;
	}

	/* ------------------------------
	支援実績
	------------------------------ */
	main .achievement ul {
		display: flex;
	}
	main .achievement ul > li {
		flex: 1 1 33%;
		padding: 0 48px;
		border-right: solid 1px var(--border-color);
	}

	/* ------------------------------
	サービス（コンテンツ側）
	------------------------------ */
	/* h3 */
	main .service .service_content_h3 {
		margin: 7rem auto;
	}
	/* h4 */
	main .service .service_content_h4 {
		padding: 1rem 3rem;
	}
	main .service .service_content_h4 > ul {
		margin: 0 5vw;
	}
	main .service .service_content_h4:nth-of-type(2) > ul {
		padding: 1rem;
	}

	/* ------------------------------
	問題解決
	------------------------------ */
	main .problem > .flex_container {
		flex-wrap: nowrap;
		justify-content: center;
	}
	/* 画像側 */
	main .problem picture {
		flex: 1 1 30%;
		max-width: 500px;
	}
	/* コンテンツ側 */
	main .problem .problem_contents {
		flex: 1 1 70%;
	}

	/* ------------------------------
	特徴
	------------------------------ */
	main .features .flex_container {
		align-items: center;
	}
	main .features .sec_h3:nth-of-type(even) .flex_container {
		flex-direction: row-reverse;
	}
	main .features .sec_h3 img {
		aspect-ratio: 3 / 2;
	}
	main .features figure {
		flex: 1 1 45%;
	}
	main .features .features_contents {
		flex: 1 1 55%;
	}
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {

	/* ------------------------------
	FAQ
	------------------------------ */
	main .faq .faq_container {
		width: 100%;
	}

	/* ------------------------------
	会社概要
	------------------------------ */
	main .info .information {
		margin-bottom: 16px;
	}
	/* 概要 */
	main .info .information li {
		padding: 16px 8px 0;
	}
	main .info .information .info_content {
		padding: 4px 8px 4px 1rem;
	}
}

/* ==============================
ノートパソコン
============================== */
@media screen and (min-width: 960px) and (max-width: 1280px) {

}

/* ==============================
デスクトップ
============================== */
@media screen and (min-width: 1281px) {

	/* ------------------------------
	サービス（コンテンツ側）
	------------------------------ */

}

/* ==============================
パソコン
============================== */
@media screen and (min-width: 960px) {

	/* ------------------------------
	サービス（メニュー側）
	------------------------------ */
	.service .service_menu > li {
		width: calc((100% - 5rem) / 5);
	}

	/* ------------------------------
	FAQ
	------------------------------ */
	main .faq .faq_container {
		width: 80%;
		margin: 0 auto;
	}

	/* ------------------------------
	会社概要
	------------------------------ */
	main .info .info_container {
		display: flex;
		align-items: center;
		gap: 16px;
	}
	/* 概要 */
	main .info .information {
		flex: 1 1 60%;
	}
	main .info .information li {
		display: flex;
		padding: 16px 0;
	}
	main .info .information li > .info_item {
		flex: 0 0 6rem;
	}
	/* マップ */
	main .info .google_map {
		flex: 0 0 40%;
	}
}