@charset "utf-8";

/* ==========================================================
   CSS初期設定・リセット
   ========================================================== */
/* 大きさの計算 */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	scroll-behavior: smooth;
}
:root {
	--primaly-color: #badeda;
	--secondaly-color: #fef6e1;
	--text-color: #1f7269 !important;
	--secMarg: 19.2%;
	--letterMarg: 8.53%;
	--prodSecMarg: 19.2%;
}
@media (min-width: 1025px) {
	:root {
		--secMarg: 3%;
		--letterMarg: 1.5%;
		--prodSecMarg: 6%;
	}
}
body {
	width: 100%;
	margin: 0 auto;
	overflow: visible;
	background-color: var(--primaly-color);
	color: var(--main-color);
	font-size: 1.4;
	font-weight: 500;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}
p {
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 500;
	line-height: 1.7;
}
h2 {
	font-size: clamp(2.3rem, 6.13vw, 3.3rem);
	font-weight: 500;
}
h3 {
	font-size: clamp(2.4rem, 6.4vw, 4rem);
	font-weight: 500;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
	text-decoration: none;
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* 画像の調整 */
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* iOSフォーム要素の初期化 */
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}

/* ==========================================================
   ユーティリティクラス
   ========================================================== */
.eng {
	font-family: 'eb-garamond', serif;
	font-weight: 600;
	font-style: normal;
}

/* デバイスごとの表示切り替え（スマホファーストベース） */
@media (max-width: 1024px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}
	.br-sp {
		display: block;
	}
	.br-pc {
		display: none;
	}
}
@media only screen and (min-width: 1025px) {
	.sp {
		display: none !important;
	}
	.pc {
		display: block !important;
	}
	.br-sp {
		display: none;
	}
	.br-pc {
		display: block;
	}
}

/* ==========================================================
   ヘッダー
   ========================================================== */
/* ヘッダーアイコンサイズ調整 */
#header #name-and-logo img {
	width: 150px;
	height: 48px;
}

/* ==========================================================
   メインエリア・セクション共通
   ========================================================== */
.mainWrap,
.mainSection {
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.heroSection {
	width: 100%;
	height: 0;
	padding-top: 92.98%;
	position: relative;
}
.heroSection .topImage {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.heroSection .topImage {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.heroSection .cloudImage {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}
@media (min-width: 1025px) {
	.heroSection {
		padding-top: 48.73%;
	}
}
/* leadSection setting */
.leadSection {
	background-color: var(--secondaly-color);
	display: block;
	text-align: center;
	padding-top: var(--secMarg);
	color: var(--text-color);
	overflow: hidden;
	margin-top: -1%;
}
.leadSection .eggHuntTxtbox {
	padding-bottom: 15%;
}
.leadSection h2 {
	font-size: clamp(3.7rem, 9.86vw, 5rem);
}
.eggHuntTxtbox img {
	width: 30%;
	padding: 5% 0 0;
}
.leadBottomImgs {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 20.15%;
	margin-top: -5%;
}
.leadSection .egg {
	position: absolute;
}
.leadSection .egg.img01 {
	bottom: 20%;
	left: 11%;
	transform: rotate(-4deg);
	width: 20%;
}
.leadSection .egg.img02 {
	bottom: 20%;
	left: 31%;
	transform: rotate(26deg);
	width: 14%;
	z-index: 10;
}
.leadSection .egg.img03 {
	width: 14%;
	bottom: 73%;
	left: 78%;
	transform: rotate(-21deg);
}
.leadSection .cloudImage {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}

/* ▼▼ ここからアニメーション用の追加CSS ▼▼ */

.fluffyCloud {
	/* 画像の下辺の中央を画鋲で止めるように固定する */
	transform-origin: bottom center;

	/* fluffyMotionという設計図の動きを、5秒かけて滑らかに、無限に繰り返す */
	animation: fluffyMotion 5s ease-in-out infinite;

	/* 画像特有の下の隙間を消し、横幅を親要素にぴったり合わせる */
	display: block;
	width: 100%;
}

/* ふわふわ動くアニメーションの設計図 */
@keyframes fluffyMotion {
	0% {
		transform: scaleY(1);
	}
	25% {
		transform: scaleY(1.15);
	}
	50% {
		transform: scaleY(1);
	}
	75% {
		transform: scaleY(1.2);
	}
	100% {
		transform: scaleY(1);
	}
}

@media (min-width: 1025px) {
	.leadSection .eggHuntTxtbox {
		padding-bottom: 3%;
	}
	.leadSection h2 {
		font-size: clamp(6rem, 5.853vw, 9rem);
	}
	.eggHuntTxtbox img {
		width: 14%;
		padding: 2% 0 0;
	}
	.leadSection .egg {
		position: absolute;
		width: 16%;
	}
	.leadSection .egg.img01 {
		bottom: 20%;
		left: 18%;
		transform: rotate(0deg);
		width: 11%;
	}
	.leadSection .egg.img02 {
		bottom: 20%;
		left: 27%;
		transform: rotate(26deg);
		width: 9%;
		z-index: 10;
	}
	.leadSection .egg.img03 {
		width: 7%;
	}
}
/* ================================
   雲の動きをずらすための追加クラス
   ================================ */

/* パターン1：1.5秒ずらす */
.delayTime1 {
	/* マイナスの秒数を指定するのがプロのテクニック！ */
	animation-delay: -1.5s;
}

/* パターン2：3秒ずらす */
.delayTime2 {
	animation-delay: -3s;
}
/* productsSection */
.productsSection {
	width: 100%;
	display: block;
	background-color: var(--primaly-color);
	margin: 0 auto;
	margin-top: 0;
	margin-top: -2px;
	position: relative;
	z-index: 200;
	padding: var(--secMarg) 0 0;
	color: var(--secondaly-color);
}
.productsSection .prodWrap {
	width: 100%;
	position: relative;
	padding-bottom: var(--prodSecMarg);
}
.prodFlex {
	width: 95%;
	display: flex;
	margin: 0 auto var(--letterMarg);
}
.productsSection .wrap2 .prodFlex,
.productsSection .wrap4 .prodFlex {
	flex-direction: row-reverse;
}
.prodFlex .modelImg {
	width: 50%;
}

.prodFlex .credWrap {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding-bottom: 22%;
	gap: 15px;
	line-height: 1.3;
}
.productsSection .wrap2 .prodFlex .credWrap,
.productsSection .wrap4 .prodFlex .credWrap {
	align-items: flex-end;
}
.productsSection .credTxtArea {
	width: 80%;
}

.productsSection .creditBox {
	display: flex;
	width: 80%;
}
.productsSection .credBtnArea {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.productsSection .creditTxt {
	text-align: left;
	color: var(--text-color);
	font-size: 1.3rem;
}
.productsSection .creditPrice {
	font-size: 1.1rem;
	text-align: left;
	color: var(--text-color);
}

.productsSection a.credBtn {
	width: 100%;
	min-width: 48px;
	max-width: 52px;
	display: inline-block;
	font-size: 1.4rem;
	padding: 2px 0 3px;
	color: var(--secondaly-color);
	background-color: var(--text-color);
	text-align: center;
}
.productsSection .prodWrap .egg {
	position: absolute;
}
.prodLineFlex {
	display: flex;
	flex-wrap: wrap;
	width: 96%;
	margin: 0 auto;
}

.prodLineFlex .prodLineCol {
	margin: 0 8px 24px 0;
	width: calc(50% - 8px / 2);
}
.prodLineFlex .prodLineCol:nth-child(2n) {
	margin-right: 0;
}
.prodLineCol .creditTxt {
	text-align: left;
	color: var(--text-color);
	font-size: 1.3rem;
}
.prodLineCol .creditPrice {
	font-size: 1.1rem;
	text-align: left;
	color: var(--text-color);
	margin-bottom: 2%;
}
.prodLineCol img {
	margin-bottom: 1%;
}

.prodLineCol a.credBtn {
	width: 100%;
	min-width: 48px;
	max-width: 52px;
	display: block;
	font-size: 1.4rem;
	padding: 2px 0 3px;
	color: var(--secondaly-color);
	background-color: var(--text-color);
}
.prodLineCol.MoreBtnSec {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.prodLineCol.MoreBtnSec a.moreBtn {
	width: 100%;
	min-width: 62px;
	max-width: 68px;
	display: block;
	font-size: 1.4rem;
	padding: 2px 0 3px;
	color: var(--text-color);
	background-color: var(--secondaly-color);
	text-align: center;
}

.productsSection .prodWrap.wrap1 .egg.img01 {
	top: 4%;
	left: 60%;
	transform: rotate(16deg);
	width: 18%;
}
.productsSection .prodWrap.wrap1 .egg.img02 {
	top: 71%;
	right: 0;
	transform: rotate(-10deg);
	width: 34%;
}

.productsSection .prodWrap.wrap2 .egg.img01 {
	top: -3%;
	left: 11%;
	transform: rotate(0deg);
	width: 24%;
}
.productsSection .prodWrap.wrap2 .egg.img02 {
	top: 8%;
	left: 30%;
	transform: rotate(-10deg);
	width: 19%;
}
.productsSection .prodWrap.wrap3 .egg.img01 {
	top: -3%;
	left: 58%;
	transform: rotate(-5deg);
	width: 18%;
}
.productsSection .prodWrap.wrap3 .egg.img02 {
	top: 5%;
	right: 2%;
	transform: rotate(16deg);
	width: 31%;
}

.productsSection .prodWrap.wrap4 .egg.img01 {
	top: -3%;
	left: 11%;
	transform: rotate(-10deg);
	width: 24%;
}
.productsSection .prodWrap.wrap4 .egg.img02 {
	top: 66%;
	left: 57%;
	transform: rotate(8deg);
	width: 32%;
}
.productsSection .prodWrap.wrap5 .egg.img01 {
	top: 9%;
	left: 68%;
	transform: rotate(-15deg);
	width: 24%;
}
.productsSection .prodWrap.wrap5 .egg.img02 {
	top: 93%;
	left: 69%;
	transform: rotate(-14deg);
	width: 13%;
}
.productsSection h3 {
	padding-bottom: var(--letterMarg);
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

.productsSction .creditBox {
	width: 74.66;
}

.prodBottomImgs {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 37%;
	z-index: 50;
}
.prodBottomImgs .egg {
	position: absolute;
}
.prodBottomImgs .egg.img01 {
	bottom: 19%;
	left: 12%;
	transform: rotate(-4deg);
	width: 14%;
	z-index: 41;
}
.prodBottomImgs .egg.img02 {
	bottom: 0%;
	left: 70%;
	transform: rotate(12deg);
	width: 23%;
	z-index: 50;
}
.prodBottomImgs .cloudImage {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}
@media (min-width: 1025px) {
	.productsSection h3 {
		padding-bottom: var(--letterMarg);
		text-align: center;
		width: 29%;
		margin: 0 auto;
	}
	.productsSection .prodFlex {
		width: 68%;
		max-width: 980px;
	}
	.prodFlex {
		gap: 12%;
		margin: 0 auto var(--secMarg);
	}

	.prodFlex .modelImg {
		width: 40%;
	}
	.prodFlex .credWrap {
		width: 60%;
	}
	.productsSection .credTxtArea {
		display: flex;
		align-items: center;
	}
	.productsSection .creditTxt {
		width: 40%;
		font-size: 1.6rem;
	}
	.productsSection .creditPrice {
		width: 60%;
		font-size: 1.4rem;
	}
	.productsSection .creditBox {
		width: 60%;
	}
	.prodLineFlex {
		width: 100%;
		max-width: 1240px;
		margin: 0 auto;
	}
	.prodLineFlex .prodLineCol {
		margin: 0 10px 24px 0;
		width: 28%;
		margin-right: 10px;
	}
	.prodLineFlex .prodLineCol.MoreBtnSec {
		margin: 0 10px 24px 0;
		width: 9%;
		margin-right: 0;
	}
	.prodLineFlex .prodLineCol:nth-child(2n) {
		margin-right: 10px;
	}
	.prodLineFlex .prodLineCol:nth-child(4n) {
		margin-right: 10px;
	}

	.productsSection .prodWrap.wrap1 .egg.img01 {
		top: 4%;
		left: 64%;
		transform: rotate(16deg);
		width: 7%;
	}
	.productsSection .prodWrap.wrap1 .egg.img02 {
		top: 39%;
		right: 5%;
		transform: rotate(-10deg);
		width: 11%;
	}

	.productsSection .prodWrap.wrap2 .egg.img01 {
		top: 0%;
		left: 12%;
		transform: rotate(7deg);
		width: 12%;
	}
	.productsSection .prodWrap.wrap2 .egg.img02 {
		top: 11%;
		left: 28%;
		transform: rotate(-10deg);
		width: 8%;
	}
	.productsSection .prodWrap.wrap3 .egg.img01 {
		top: -3%;
		left: 58%;
		transform: rotate(-5deg);
		width: 8%;
	}
	.productsSection .prodWrap.wrap3 .egg.img02 {
		top: 5%;
		right: 23%;
		transform: rotate(16deg);
		width: 10%;
	}

	.productsSection .prodWrap.wrap4 .egg.img01 {
		top: 0%;
		left: 25%;
		transform: rotate(-10deg);
		width: 8%;
	}
	.productsSection .prodWrap.wrap4 .egg.img02 {
		top: 41%;
		left: 80%;
		transform: rotate(8deg);
		width: 13%;
	}
	.productsSection .prodWrap.wrap5 .egg.img01 {
		top: 37%;
		left: 6%;
		transform: rotate(-15deg);
		width: 10%;
	}
	.productsSection .prodWrap.wrap5 .egg.img02 {
		top: 92%;
		left: 81%;
		transform: rotate(-14deg);
		width: 8%;
	}
	.prodLineCol a.credBtn {
		width: 100%;
		min-width: 64px;
		max-width: 68px;
		display: block;
		font-size: 1.6rem;
	}
	.prodLineCol.MoreBtnSec a.moreBtn {
		min-width: 80px;
		max-width: 84px;
		display: block;
		font-size: 1.6rem;
		padding: 2px 0 3px;
	}
	.prodBottomImgs {
		padding-top: 30%;
	}
	.prodBottomImgs .egg.img01 {
		bottom: 13%;
		left: 7%;
		transform: rotate(-4deg);
		width: 10%;
	}
	.prodBottomImgs .egg.img02 {
		bottom: 13%;
		left: 61%;
		transform: rotate(12deg);
		width: 15%;
	}
}

/* モーダル用css設定 */
/* ▼▼ モーダルのCSS ▼▼ */
.eggModal {
	/* 初期状態は非表示 */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eggModal.isActive {
	opacity: 1;
	pointer-events: auto;
}

/* 幕の設定 */
.modalOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.modalContent {
	position: relative;
	z-index: 10;
	width: 90%;
	background-color: transparent;
	text-align: center;
	height: 80%;
	border-radius: 12px;
	overflow: hidden;
	pointer-events: none;
}

/* 卵のサイズ調整 */
.modalEggWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	display: flex;
	justify-content: center;
}

.modalEggWrap img {
	width: 100%;
	height: auto;
}
/* ▼▼ チケットの初期状態 ▼▼ */
.modalTicketWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modalTicketWrap.isShow {
	width: 100%;
	transform: translate(-50%, -50%) scale(1) rotate(0);
	opacity: 1;
	pointer-events: auto;
	z-index: 20;
	cursor: pointer;
}
.modalTicketWrap img {
	width: 100%;
	height: auto;
}
@media (min-width: 1025px) {
	.modalContent {
		width: 50vw;
	}
	.modalEggWrap {
		max-width: 350px;
	}
	.modalTicketWrap.isShow {
		width: 100%;
		max-width: 576px;
	}
}
@keyframes eggHatch {
	/* 0%〜60%: うずうず震える（左右に回転しつつ、たまに跳ねる） */
	0% {
		transform: rotate(0deg) scale(1) translateY(0);
	}
	10% {
		transform: rotate(15deg) scale(1) translateY(0);
	}
	20% {
		transform: rotate(-10deg) scale(1) translateY(0);
	}
	30% {
		transform: rotate(15deg) scale(1.1) translateY(-10px);
	} /* 少し跳ねる */
	40% {
		transform: rotate(-10deg) scale(1) translateY(0);
	}
	50% {
		transform: rotate(10deg) scale(1) translateY(0);
	}
	60% {
		transform: rotate(0deg) scale(1) translateY(0);
	}

	/* 60%〜80%: 一瞬グッと縮んで力を溜める */
	70% {
		transform: rotate(0deg) scale(0.9) translateY(0);
		opacity: 1;
	}

	/* 80%〜100%: ポンッ！と大きく膨らんで消える */
	90% {
		transform: rotate(0deg) scale(1.5) translateY(0);
		opacity: 0.5;
	}
	100% {
		transform: rotate(0deg) scale(2) translateY(0);
		opacity: 0;
	}
}

/* 2. JavaScriptから付与されるクラスでアニメーションを実行 */
.modalEggImg {
	/* アニメーションが終わった後、最後の状態（消えた状態）を維持する */
	animation-fill-mode: forwards;
}

/* このクラスが付いたらアニメーションスタート！ */
.modalEggImg.isAnimating {
	/* eggHatchという動きを、1.5秒かけて、1回だけ実行する */
	animation: eggHatch 1.5s ease-in-out forwards;
	animation-fill-mode: none;
}

/* ▼▼ コピー完了メッセージのCSS ▼▼ */
.copyMessage {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);

	background-color: rgba(31, 114, 105, 0.95);
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 1.4rem;
	font-weight: bold;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.copyMessage.isShowMsg {
	opacity: 1;
}
@media (min-width: 1025px) {
	.copyMessage {
		width: 350px;
		bottom: 10%;
		text-align: center;
	}
}
.endingSection {
	width: 100%;
	background-color: var(--secondaly-color);
	margin-top: -1%;
	padding: var(--prodSecMarg);
}
.endingSection {
	color: var(--text-color);
	text-align: center;
}

/* ホバー時卵フリフリ */
.egg:hover {
	animation: eggShake 0.8s ease-in-out forwards;
	animation-fill-mode: none;
	cursor: pointer;
}
@keyframes eggShake {
	/* フリフリする */
	0% {
		transform: rotate(0deg) scale(1) translateY(0);
	}
	15% {
		transform: rotate(15deg) scale(1) translateY(0);
	}
	30% {
		transform: rotate(-10deg) scale(1) translateY(0);
	}
	50% {
		transform: rotate(15deg) scale(1.1) translateY(-10px);
	} /* 少し跳ねる */
	65% {
		transform: rotate(-10deg) scale(1) translateY(0);
	}
	80% {
		transform: rotate(10deg) scale(1) translateY(0);
	}
	100% {
		transform: rotate(0deg) scale(1) translateY(0);
	}
}
/* ==========================================================
   トップに戻る フローティングボタン
   ========================================================== */
.float-button__wrap {
	display: none; /*最初は隠す*/
	position: fixed;
	right: 10px; /* 20250410フッター修正 */
	bottom: 16px;
	z-index: 10000;
	width: 90px;
	height: auto;
}

.float-button__wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}