body {
	border: none;
}

#container {
	overflow: clip;
}

@media(max-width:768px) {

	.sp_none {
		display: none !important;
	}
}

@media(min-width:769px) {
	.pc_none {
		display: none !important;
	}
}

/* =========================================
* 共通パーツ
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
	--main-color: #1FAF6F;
	--sub-color: #CBED48;
	--txt-color: #5F3905;
	--main-bg: #FFF775;
	--spring-color: #F7639C;
	--summer-color: #95DD41;
	--autumn-color: #EE762F;
	--winter-color: #45C7DE;
	--fluffy-txt: "Zen Maru Gothic", sans-serif;
	--header-height: 80px;
	--kunoji: rotate(45deg) translateY(-50%);
	--hov-move: all .4s;
	--txt54-36: 54px;
	--txt40-32: 40px;
	--txt36-24: 36px;
	--txt32-28: 32px;
	--txt28-24: 28px;
	--txt24-20: 24px;
	--txt20-18: 20px;
	--txt18-16: 18px;
	--txt16-14: 16px;
	--txt14-13: 14px;
	--m120-80: 80px;
	--m104-64: 104px;
	--m80-40: 80px;
	--m56-32: 56px;
	--m40-24: 40px;
	--m32-16: 32px;
	--m24-16: 24px;
	--m16-8: 16px;
}


/* --- まるるん --- */
.click-marurun {
	display: flex;
	flex-direction: column;
	position: absolute;
	transition: var(--hov-move);
	width: min(30vw, 300px);
	z-index: 5;

	.click-fukidashi {
		max-width: 80%;
		margin: 0 auto -20px auto;
	}

	.click-marurun-img {
		transition: var(--hov-move);
	}

	&:hover {
		.click-fukidashi #fukidashi {
			fill: var(--txt-color);
		}

		.click-fukidashi #txt .st1 {
			fill: var(--main-bg);
		}

		.click-marurun-img {
			transform: rotate(10deg);
		}
	}
}

/* --- ボタン --- */
.btn-wrap {
	height: 68px;

	.normal-btn {
		margin: var(--m16-8) auto 0 auto;
		background-color: var(--main-bg);
		height: 64px;
		color: var(--main-color);
		font-family: var(--fluffy-txt);
		font-size: var(--txt24-20);
		font-weight: 900;
		display: grid;
		place-items: center;
		border-radius: 32px;
		max-width: 280px;
		position: relative;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

		&::after {
			content: "";
			position: absolute;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
			border-left: 12px solid var(--main-color);
			border-right: 0;
			top: 50%;
			right: 1em;
		}

		&:hover {
			box-shadow: none;
			transform: translateY(4px);
			background-color: var(--sub-color);
		}
	}
}


/* --- 緑の背景 --- */
.green-wrap {
	background-color: var(--main-color);
	border: solid var(--m16-8) var(--sub-color);
	border-radius: var(--m40-24);
	padding: var(--m40-24);
	color: #fff;
	position: relative;
	display: flex;
	align-items: center;

	.green-wrap-txt {
		width: 560px;
	}

	.click-marurun {
		position: static;
	}

	p {
		font-size: var(--txt20-18);
		line-height: 175%;
	}
}

/* --- ポップアップ画面 --- */
.popup-wrap {
	max-height: 100svh;
	/* 画面の高さを上限にする（モバイル対応） */
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}


	/* はみ出した時だけ縦スクロール */
	.green-wrap {
		flex-direction: column;
		gap: var(--m24-16);
		padding: var(--m40-24) 6%;
		margin: 48px 0;
		font-family: "Noto Sans JP", sans-serif;
		font-size: var(--txt16-14);
		text-align: justify;
		line-height: 175%;
		font-weight: 500;


		.icon-discovery {
			position: absolute;
			top: -59px;
			right: -16px;
			width: 24%;
		}

		.green-wrap-container {
			display: flex;
			align-items: center;


			.green-wrap-txt {
				text-align: left;
				width: auto;


				h2 {
					font-family: var(--fluffy-txt);
					font-weight: 900;
					line-height: 140%;
					font-size: min(3.8vw, 36px);
					margin-bottom: var(--m24-16);
					display: flex;
					align-items: center;
					gap: 8px;

					.stage-icon {
						width: min(10vw, 90px);
					}

				}

				h3 {
					color: var(--txt-color);
					font-weight: 900;
					background-color: var(--sub-color);
					border-radius: 20px;
					padding: .2em 1.2em;
					display: inline-block;
					margin-bottom: 1em;
					font-family: var(--fluffy-txt);
					line-height: 140%;
					font-size: var(--txt20-18)
				}

				ol {
					font-size: var(--txt20-18);
					display: flex;
					flex-direction: column;
					gap: 8px;

					li {
						display: flex;
						gap: 8px;
						line-height: 175%;

						span {
							display: grid;
							place-items: center;
							min-width: var(--m40-24);
							height: var(--m40-24);
							background-color: var(--sub-color);
							color: var(--txt-color);
							border-radius: 20px;
							font-family: var(--fluffy-txt);
							font-weight: 900;
						}
					}
				}

				.popup-last-txt {
					color: var(--main-bg);
					font-weight: 900;
					text-align: center;
					font-size: min(2.6vw, 28px);
					font-family: var(--fluffy-txt);

					span {
						font-size: 1.29em;
					}
				}

				.stage-txt {
					text-align: center;
					font-size: var(--txt16-14);
					font-family: var(--fluffy-txt);
					font-weight: 700;
				}
			}
		}

		.popup-link {
			max-width: 880px;
			width: 96%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
			list-style-type: none;

			li {
				height: min(8vw, 80px);

				a {
					display: flex;
					background-color: #fff;
					gap: 8px;
					align-items: center;
					height: 100%;
					border-radius: var(--m16-8);
					color: var(--txt-color);
					text-align: left;
					padding: 0 .7em;
					transition: var(--hov-move);
					box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
					font-weight: 600;

					.line-link & {
						img {
							width: min(6vw, 65px);
						}

						p {
							font-size: min(1.8vw, 18px);
							line-height: 150%;
							font-weight: 700;
						}
					}

					.shop-link & {
						img {
							width: min(10vw, 130px);
						}

						p {
							font-size: min(1.3vw, 14px);
							line-height: 150%;
							font-weight: 700;
						}
					}

					.lp-link & {
						img {
							width: min(10vw, 130px);
						}

						p {
							font-size: min(1.3vw, 14px);
							line-height: 150%;
							font-weight: 700;
						}
					}

					&:hover {
						transform: translateY(4px);
						filter: brightness(115%);
					}
				}
			}
		}
	}
}

.marurun-keyword {
	min-width: min(36vw, 340px);
	display: flex;
	flex-direction: column;
	margin-right: -48px;

	.keyword-img {
		width: 38%;
		margin-bottom: max(-7vw, -64px);
		position: relative;
		z-index: 1;
	}
}

/* =========================================
* 既存サイトのみ適用
* ======================================== */
#toppage,
#about-marurun,
#page_shopsearch,
#page_news {
	.container {
		width: 92%;
		max-width: 1080px;
		display: block;
		margin: auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}
}

/* =========================================
* まるるん01,02
* ======================================== */
#movie {
	.click-marurun01 {
		top: 32px;
		left: 0;
	}

	.click-marurun02 {
		bottom: 16px;
		right: 0;
	}
}

/* =========================================
* まるるん07,09
* ======================================== */


#marurun-wrap01,
#marurun-wrap02,
#marurun-wrap03 {
	position: relative;
}

#marurun-wrap01 {
	.click-marurun07 {
		left: -80px;
		top: -15%;
	}

	.click-marurun09 {
		right: -80px;
		bottom: -30%;
	}
}

#marurun-wrap02 {
	.click-marurun06 {
		right: 3%;
		bottom: 80px;
	}
}

#marurun-wrap03 {
	.click-marurun08 {
		right: 5%;
	}
}

.popupmarurun-fg {
	display: block;
	width: 100%;
	height: 400px;
	position: relative;

	.click-marurun04,
	.click-marurun05 {
		right: 30%;
		bottom: 0;
	}
}

@media (max-width: 768px) {
	/* =========================================
* 共通パーツ
* ======================================== */

	/* 変数
* ---------------------------------- */
	:root {
		--header-height: 62px;
		--txt54-36: 36px;
		--txt40-32: 32px;
		--txt36-24: 24px;
		--txt32-28: 28px;
		--txt28-24: 24px;
		--txt24-20: 20px;
		--txt20-18: 18px;
		--txt18-16: 16px;
		--txt16-14: 14px;
		--txt14-13: 13px;
		--m120-80: 80px;
		--m104-64: 64px;
		--m80-40: 40px;
		--m56-32: 32px;
		--m40-24: 24px;
		--m32-16: 16px;
		--m24-16: 16px;
		--m16-8: 8px;
	}

	/* --- まるるん --- */
	.click-marurun {
		width: max(30vw, 130px);

		.click-fukidashi {
			margin: 0 auto -2vw auto;
		}
	}

	/* --- ボタン --- */
	.btn-wrap {
		height: 64px;

		.normal-btn {
			height: 60px;

			&::after {
				right: .8em;
			}
		}
	}


	/* --- 緑の背景 --- */
	.green-wrap {
		flex-direction: column;
		gap: 16px;
		padding: 40px 24px;

		.green-wrap-txt {
			width: 100%;
			position: relative;
			z-index: 2;
		}
	}

	/* --- ポップアップ画面 --- */
	.popup-wrap {

		/* はみ出した時だけ縦スクロール */
		.green-wrap {
			gap: var(--m24-16);
			padding: 24px;
			margin: 24px 0;

			.icon-discovery {
				top: -16px;
				width: 150px;
			}

			.green-wrap-container {
				flex-direction: column-reverse;

				.green-wrap-txt {
					text-align: center;

					h2 {
						justify-content: center;
						font-size: 24px;

						.stage-icon {
							width: 56px;
						}
					}

					ol {
						text-align: justify;

						li {

							span {
								min-width: 32px;
								min-height: 32px;
							}
						}
					}

					.popup-last-txt {
						font-size: 18px;
					}
				}
			}

			.popup-link {
				grid-template-columns: repeat(1, 1fr);
				gap: 16px;

				li {
					height: 50px;

					a {
						height: 54px;
						padding: 0 1em;

						.line-link & {
							p {
								font-size: 16px;
							}
						}

						.shop-link & {

							img {
								width: 80px;
							}

							p {
								font-size: 14px;
							}
						}

						.lp-link & {
							img {
								width: 80px;
							}

							p {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}

	.marurun-keyword {
		min-width: auto;
		width: 240px;
		margin: auto;
	}

	/* =========================================
	* まるるん01,02
	* ======================================== */
	#movie {
		.click-marurun01 {
			top: 24px;
			left: -16px;
		}

		.click-marurun02 {
			bottom: -28px;
			right: -24px;
		}
	}

	/* =========================================
* まるるん07,09
* ======================================== */



	#marurun-wrap01 {
		.click-marurun07 {
			left: -11px;
			top: -7%;
			width: min(28vw, 173px);
		}

		.click-marurun09 {
			right: -22px;
			bottom: -12%;
		}
	}

	#marurun-wrap03 {
		.click-marurun08 {
			right: 0;
			top: 30%;
		}
	}

	.popupmarurun-fg {
		height: max(34.2vw, 155px);

		.click-marurun04,
		.click-marurun05 {
			right: 30%;
			bottom: 0;
		}
	}

}