@charset "UTF-8";
/* CSS Document */

/**{

outline: 1px red solid;

}*/
body {

	margin: 0 auto;
	padding: 0;
	text-decoration: none;
    line-height: 1;

}

html {
	scroll-behavior: smooth;
}

img {
	width: 100%;
	vertical-align: bottom;

}

a {
	opacity: 1;
	transition: opacity 0.3s ease;
}

a:hover {
	opacity: 0.5;
}


.wrap {
	width: 750px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 0 122px 0;
}

/* fv */
.fuwa-gimick {
	position: relative;
	width: 750px;
	max-width: 100%;
}



/* 各パーツの基本設定 */
.floating {
	position: absolute;
	width: 150px;
	height: 150px;
	animation-name: float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* 各パーツの位置と重ね順を指定 */
.floating.part1 {
	top: 9.5%;
	left: 0%;
	z-index: 3;
	width: 90%;
	animation-duration: 3s;
}

.floating.part2 {
	top: 12.5%;
	left: 0%;
	z-index: 4;
	width: 100%;
	animation-duration: 3s;
}

.fv-text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
}



/* 共通のアニメーション定義 */
@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-30px);
	}

	100% {
		transform: translateY(0);
	}
}

/* cta area*/

.cart {
	position: relative;
}

.btn {
	position: absolute;
}

.btn2 {
	bottom: 21.4%;
	left: 13%;
	width: 73.8%;
}

.btn3 {
	top: 0%;
	left: 13%;
	width: 73.8%;
}

/* a type btn */

.btn4 {
	top: 10.1%;
	left: 3.9%;
	width: 31.9%;
}

.btn5 {
	top: 10.29%;
	left: 35.82%;
	width: 29.25%;
}

.btn6 {
	top: 10.1%;
	right: 3.8%;
	width: 31.16%;
}

.btn7 {
	bottom: 9.8%;
	left: 3.9%;
	width: 30.51%;
}

.btn8 {
	bottom: 9.8%;
	left: 34.4%;
	width: 28.52%;
}

.btn9 {
	bottom: 9.8%;
	right: 4.1%;
	width: 32.95%;
}

/* B type btn */
.btn10 {
	top: 10.89%;
	left: 4%;
	width: 31.3%;
}

.btn11 {
	top: 10.89%;
	left: 35.35%;
	width: 29.45%;
}

.btn12 {
	top: 10.89%;
	right: 3.95%;
	width: 31.25%;
}

.btn13 {
	bottom: 10.6%;
	left: 18.65%;
	width: 31.88%;
}

.btn14 {
	bottom: 10.6%;
	left: 50.5%;
	width: 31.25%;
}

/* c type btn */

.btn15 {
	bottom: 20%;
	left: 18.75%;
	width: 31.45%;
}

.btn16 {
	bottom: 20%;
	left: 50.2%;
	width: 31.45%;
}

.btn17 {
	bottom: 24.5%;
	left: 26%;
	width: 48.5%;
}




.btn:hover {
	opacity: 0.6;
	transition: opacity 0.3s;
}

/* スライド設定 */

.container {
	position: relative;
	overflow: hidden;
}

.slider {
	position: absolute;
	top: 26.5%;
	width: 100%;
}

.slick-slide img {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* ページネーション全体の調整 */
.slick-dots {
	bottom: -23px;
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0 auto;
}


/* モバイル（750px以下）ではページネーションの位置を調整 */
@media (max-width: 750px) {
	.slick-dots {
		bottom: 11px;
		/* 必要に応じて調整 */
	}
}



/* ドットのデフォルトスタイルを削除し、横棒に変更 */
.slick-dots li {
	list-style: none;
	width: 54px;
	/* 横棒の長さ */
	height: 0;
	margin: 0;
	padding: 0;
}

/* 通常時の横棒 */
.slick-dots li button {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	/* 未選択時の色 */
	border: none;
	border-radius: 0;
	font-size: 0;
	transition: background-color 0.3s;
	padding: 3px;
}

.slick-dots li.slick-active button {
	background-color: #35d4a1 !important;
	/* アクティブ時の色 */
	width: 54px;
	height: 0;
}

/* デフォルトのSlickの丸いボタンを強制的に非表示 */
.slick-dots li button:before {
	display: none !important;
	content: "";
}


/* 余白の発生を防ぐ */
.slick-dots li a {
	display: block;
	/* インラインの余白を削除 */
}

.slick-slide a:hover {
	opacity: 1 !important;
	/* 透明度の変化を防ぐ */
}


/* モバイル（750px以下）ではページネーションの位置を調整 */
@media (max-width: 750px) {
	.slick-dots {
		bottom: -11px;
		/* 必要に応じて調整 */
	}
}

/* fade-in 設定　スクロール時に発火 */

.fadeIn {
	transform: translate3d(0, 50px, 0);
	/* ここで開始位置を指定 その場の場合は削除 */
	transition: 1.4s ease;
	transition-delay: 0.7s;
	opacity: 0;
}

.fadeIn.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.fadeDown {
	transform: translate3d(0, -50px, 0);
	/* ここで開始位置を指定 その場の場合は削除 */
	transition: 1.4s ease;
	transition-delay: 0.7s;
	opacity: 0;
}

.fadeDown.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.fadeUp {
	transform: translate3d(0, 0, 0);
	/* ここで開始位置を指定 その場の場合は削除 */
	transition: 1.4s ease;
	transition-delay: 0.7s;
	opacity: 0;
}

.fadeUp.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.fadeRight {
	transform: translate3d(50px, 0, 0);
	/* ここで開始位置を指定 その場の場合は削除 */
	/*margin-left: -50px;*/
	transition: 1.4s ease;
	transition-delay: 0.7s;
	opacity: 0;
}

.fadeRight.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.fadeLeft {
	transform: translate3d(-50px, 0, 0);
	/*ここで開始位置を指定 その場の場合は削除 */
	transition: 1.4s ease;
	transition-delay: 0.7s;
	opacity: 0;
}

.fadeLeft.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/* 拡大 */

.zoomIn {
	transform: scale(0);
	/* 開始時は0にスケール */
	transition: 1s ease;
	transition-delay: 0s;
	opacity: 0;
}

.zoomIn.animated {
	transform: scale(1);
	/* 通常サイズにスケール */
	opacity: 1;
}

/* 共通fade */
.fade-cont {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

/* funwari fv */

.fv-fnwr {
	position: absolute;
	bottom: 3.78%;
	left: 5.9%;
	z-index: 6;
	width: 61.5%;
	transition-delay: 0s;
}


/* refresh-sy */

.refresh-sy {
	position: absolute;
	top: 0%;
	right: 0%;
	width: 100%;
	transition-delay: 0s;
}

.refresh-sy0 {
	position: absolute;
	top: 0%;
	left: 0%;
	max-width: 100%;
	transition-delay: 0s;
}

.refresh-sy1 {
	position: absolute;
	bottom: 0%;
	left: 0%;
	max-width: 100%;
	transition-delay: 0s;
}

.refresh-sy2 {
	position: absolute;
	bottom: 0%;
	left: 0%;
	max-width: 100%;
	transition-delay: 0s;
    z-index: 5;
}


/* how to use */


.active01 {
	position: absolute;
	top: 10.4%;
	right: 0%;
	width: 100%;
	transition-delay: 0s;
}

.active02 {
	position: absolute;
	top: 25.2%;
	left: 0%;
	width: 100%;
	transition-delay: 0.2s;
}

.active03 {
	position: absolute;
	bottom: 45.25%;
	right: 0%;
	width: 100%;
	transition-delay: 0.4s;
}

.active04 {
	position: absolute;
	bottom: 30.48%;
	right: 0%;
	width: 100%;
	transition-delay: 0.4s;
}

.active05 {
	position: absolute;
	bottom: 15.7%;
	right: 0%;
	width: 100%;
	transition-delay: 0.6s;
}

.active06 {
	position: absolute;
	bottom: 1.8%;
	right: 0%;
	width: 100%;
	transition-delay: 0.8s;
}

/* A type */
.active-a_01 {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	transition-delay: 0s;
}

.active-a_02 {
	position: absolute;
	top: 35.4%;
	right: 0%;
	width: 100%;
	transition-delay: 0.2s;
}

.active-a_03 {
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
	transition-delay: 0.4s;
}

/* B type */
.active-b_01 {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	transition-delay: 0s;
}

.active-b_02 {
	position: absolute;
	top: 35.8%;
	right: 0%;
	width: 100%;
	transition-delay: 0.2s;
}

.active-b_03 {
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
	transition-delay: 0.4s;
}

/* c type */
.active-c_01 {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	transition-delay: 0s;
}

.active-c_02 {
	position: absolute;
	bottom: 0%;
	right: 0%;
	width: 100%;
	transition-delay: 0.2s;
}


/* flooting */
#page-top {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 750px;
	max-width: 100%;
	z-index: 9999;
	text-align: center;
	margin: 0;
	display: none;
}

#page-top img {
	width: 100%;
	height: auto;
}

#page-top a:hover {
	opacity: 1 !important;
	/* 透明度の変化を防ぐ */
}


/* チェックエリア全体 */
.wrap_check {
	position: relative;
}

/* ラベル全体（画像とチェックを重ねる） */
.checknox-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* input は非表示 */
.checknox-wrap input {
	display: none;
}

/* チェックボックスの見た目：画像上に配置＆比率維持 */
.checknox-wrap .checkmark {
	position: absolute;
	top: 29%;
	left: 29.5%;
	width: 4%;
	aspect-ratio: 1 / 1;
	border: 1.8px solid #666;
	background-color: #fcf8f2;
	z-index: 2;
}

/* チェックマークの線 */
.checknox-wrap .checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 22%;
	top: -15%;
	width: 42%;
	height: 75%;
	border: solid #30c3d9;
	border-width: 0 6px 6px 0;
	transform: rotate(45deg);
	box-sizing: content-box;
}

/* チェックされたときに表示 */
.checknox-wrap input:checked+.checkmark:after {
	display: block;
}

/* チェック用画像 */
.checknox-wrap img {
	width: 100%;
	height: auto;
	display: block;
	z-index: 1;
}

.wrap_type_group.no-space {
	display: flex;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

.wrap_type_group .type_box {
	position: relative;
	text-align: center;
}

.wrap_type_group .type_box img {
	width: 100%;
	height: auto;
	display: block;
}

/* hover時の半透明を無効化 */
.wrap_type_group .type_box:hover {
	opacity: 1 !important;
	filter: none !important;
}

/* 常に横並び：767px以下でも折り返さない */
@media screen and (max-width: 767px) {
	.wrap_type_group.no-space {
		flex-wrap: nowrap;
	}
}

/* カウント数字を中央上あたりに重ねる */
.wrap_type_group .value_box {
	font-family: 'Noto Sans JP', sans-serif;
	position: absolute;
	top: 40%;
	transform: translateX(-50%);
	font-size: clamp(28px, 9vw, 67.5px);/* 画面幅750px時に最大化 */
	color: #333;
	font-weight: bold;
	z-index: 3;
}

/* 共通スタイル（位置やサイズの基本） */

/* 個別にleft位置を調整 */
.value_box1 {
	left: 45% !important;
}

.value_box2 {
	left: 42% !important;
}

.value_box3 {
	left: 40% !important;
}