@charset "utf-8";

/* ============================= */
/* 基本設定 */
/* ============================= */
body {
	background-color: #fff;
	font-family:
		"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto,
		"NotoSansCJKjp", MotoyaLCedar, "メイリオ", Meiryo, sans-serif;
	position: relative;
}
.img_responsive {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}
.alpha {
	display: inline-block;
	-webkit-transition: 0.4s ease;
	transition: 0.4s ease;
}
.alpha:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}
.visible_sp {
	display: none;
}

/* ============================= */
/* レイアウト共通 */
/* ============================= */
.contents {
	width: 100%;
	position: relative;
}
.wrapper {
	max-width: 750px;
	margin: 0 auto;
}
.wrapper_inner {
	max-width: 650px;
	margin: 0 auto;
}

/* ============================= */
/* CTA 共通 */
/* ============================= */
.contents_cta .cta {
	position: relative;
}
.contents_cta_btn {
	position: absolute;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0 9%;
}
.contents_cta_btn01 {
	bottom: 30.5%;
}
.cta_btn_sub {
	bottom: 13.5%;
	position: absolute;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
	padding: 0 10%;
}
.cta_btn_sub .contents_cta_btn {
	flex-basis: calc((100% - 5%) / 2);
	position: relative;
	padding: 0;
}

.contents_cta_btn a {
	cursor: pointer;
	display: inline-block;
}
.contents_cta_btn a img {
	width: 100%;
	animation: btnZoom 1s ease 0s infinite alternate;
}
/* @keyframes btnZoom {
	from {
		transform: scale(0.9, 0.9);
	}
	to {
		transform: scale(1, 1);
	}
} */

/* ============================= */
/* フッター */
/* ============================= */
.contents_footer .contents_footer_inner {
	background-color: #fff;
	padding: 30px 15px;
	text-align: center;
}

/* ============================= */
/* 動画・アニメーション共通基盤 */
/* ============================= */
.contents_inner {
	position: relative;
	overflow: hidden;
}
.movie_wrapper {
	line-height: 0;
}
.movie_wrapper video {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* ============================= */
/* 円回転アニメーション */
/* ============================= */
@keyframes spin {
	from {
		transform: rotate(360deg);
	}
	to {
		transform: rotate(0deg);
	}
}
.rotate {
	animation: spin 14s linear infinite;
	transform-origin: center center;
}

/* ============================= */
/* FAQ アコーディオン（必要時のみ使用） */
/* ============================= */
.contents-faq .contents-list-wrapper {
	padding: 0 0 10%;
}
.contents-faq .contents-list {
	cursor: pointer;
	margin-bottom: 7%;
	position: relative;
}
.contents-faq .contents-list:last-child {
	margin-bottom: 0;
}
.contents-faq .contents-list dt {
	position: relative;
}
.contents-faq .contents-list dd {
	position: relative;
	z-index: 1;
	margin-top: -2px;
}
.contents-faq .contents-list dt::before,
.contents-faq .contents-list dt::after {
	content: "";
	position: absolute;
	right: 10%;
	top: 50%;
	width: 3.5%;
	height: 1px;
	background-color: #88a0b8;
	transition: transform 0.3s ease;
	z-index: 2;
}
.contents-faq .contents-list dt::before {
	transform: translateY(-50%);
}
.contents-faq .contents-list dt::after {
	transform: translateY(-50%) rotate(90deg);
}
.contents-faq .contents-list.open dt::before {
	transform: translateY(-50%) rotate(45deg);
}
.contents-faq .contents-list.open dt::after {
	transform: translateY(-50%) rotate(135deg);
}

/* ============================= */
/* 以下、各セクションの parts position を追加 */
/* ============================= */

/* contents01：左上の回転円パーツ */
.contents01 .contents_inner {
	position: relative;
	overflow: hidden;
	padding: 13% 0;
}
.contents01_parts {
	position: absolute;
	top: 6%;
	right: -6%;
	width: 100%;
	z-index: 3;
	padding: 0 0% 0 71%;
}

/* contents01：Swiper スライド */
/* slide01 */
.contents01 .bg {
	background-color: #efebe6;
}
.contents01 .slide_wrapper {
	z-index: 1;
	width: 100%;
}
.contents01 .slide01 .swiper-wrapper {
	z-index: 3;
}
.contents01 .slide01 .swiper-slide {
	position: relative;
}

/* ============================= */
/* MECHANISM 共通 */
/* ============================= */
.mechanism_bg {
	background-color: #ccd8e2;
	max-width: 750px;
	margin: 0 auto;
}
.contents_mechanism {
	padding: 0 5%;
}
.mechanism_heading {
	padding: 0 40%;
	position: absolute;
	top: 14%;
	left: 0;
	z-index: 2;
}
.mechanism_heading02 {
	padding: 0 37%;
	top: 7%;
}
.mechanism_heading03 {
	padding: 0 37%;
	top: 14%;
}

/* タイトル / テキスト単独セクション */
.mechanism_title_section {
	padding-top: 16%;
}
.mechanism_text_section {
	padding: 14% 5%;
}

/* 横スライド（縦スクロール → 横移動） */
.contents_mechanism .mechanism_horizontal {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 15%;
}
.contents_mechanism .mechanism_horizontal_track {
	display: flex;
	flex-wrap: nowrap;
	width: 205%; /* パネル2枚 + 5%ギャップ */
	will-change: transform;
}
.contents_mechanism .mechanism_horizontal_panel {
	flex: 0 0 calc(100% / 2.05);
}
.contents_mechanism .mechanism_horizontal_panel:not(:last-child) {
	margin-right: calc(5% / 2.05);
}
.contents_mechanism .mechanism_horizontal_panel .img_responsive {
	width: 100%;
	height: auto;
}

.mechanism01 {
	padding-top: 18%;
}
.mechanism02 {
	padding-top: 20%;
}
.mechanism03 {
	padding-top: 20%;
	padding-bottom: 16%;
}

/* ============================= */
/* contents08：縦スクロール → 横スライド */
/* ============================= */
.contents08 .wrapper {
	background-color: #efebe6;
}
.contents08_horizontal {
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 8%;
	overflow: hidden;
}
.contents08_horizontal_track {
	display: flex;
	flex-wrap: nowrap;
	width: 205%; /* パネル2枚 + 5%ギャップ */
	will-change: transform;
}
.contents08_horizontal_panel {
	flex: 0 0 calc(100% / 2.05);
}
.contents08_horizontal_panel:not(:last-child) {
	margin-right: calc(5% / 2.05);
}
.contents08_horizontal_panel .img_responsive {
	width: 100%;
	height: auto;
}

.review_swiper_wrapper {
	position: absolute;
	width: 100%;
	top: 31%;
}
.review_swiper_wrapper .swiper-button-next,
.review_swiper_wrapper .swiper-button-prev {
	width: 9%;
}
.review_swiper_wrapper .swiper-button-next {
	right: 1%;
}
.review_swiper_wrapper .swiper-button-prev {
	left: 1%;
}
.review_swiper_wrapper .swiper-button-next:after,
.review_swiper_wrapper .swiper-button-prev:after {
	content: none;
}
.review_swiper_wrapper .review_swiper {
	padding: 0 5%;
}
.review_swiper_wrapper .review_swiper .review_swiper_pagination {
	position: absolute;
	bottom: -8%;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 2;
}
.review_swiper_pagination .swiper-pagination-bullet {
	width: 1.6%;
	aspect-ratio: 1;
	height: auto;
	background-color: #fff;
	opacity: 0.5;
	margin: 0 1.2% !important;
	border-radius: 50%;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}
.review_swiper_pagination .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.4);
}

/* ============================= */
/* contents11：SPEC（メイン + サムネ切替） */
/* ============================= */
.spec_swiper_main {
	position: absolute;
	top: 6.5%;
	left: 5%;
	right: 5%;
	overflow: hidden;
}
.spec_swiper_main .swiper-slide .img_responsive {
	width: 100%;
	height: auto;
}
.spec_swiper_thumbs_wrapper {
	position: absolute;
	top: 25.6%;
	left: 5%;
	right: 5%;
}
.spec_swiper_thumbs {
	overflow: hidden;
}
.spec_swiper_thumbs .swiper-slide {
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s ease;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.spec_swiper_thumbs .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}
.spec_swiper_thumbs .swiper-slide .img_responsive {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.spec_swiper_thumbs_wrapper .swiper-button-next,
.spec_swiper_thumbs_wrapper .swiper-button-prev {
	width: 9%;
	height: auto;
	margin: 0;
	top: 50%;
	transform: translateY(-50%);
}
.spec_swiper_thumbs_wrapper .swiper-button-prev {
	left: -5%;
}
.spec_swiper_thumbs_wrapper .swiper-button-next {
	right: -5%;
}
.spec_swiper_thumbs_wrapper .swiper-button-next:after,
.spec_swiper_thumbs_wrapper .swiper-button-prev:after {
	content: none;
}