@charset "utf-8";

/* =========================================
* ページ全体の共通パーツ
* ======================================== */
html {
	scroll-padding-top: var(--header-height);
	/* 追従メニューの高さに応じて適切な値を設定 */
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--txt16-14);
	text-align: justify;
	line-height: 175%;
	color: var(--txt-color);
	font-weight: 500;

	&::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		background-color: var(--main-bg);
		background-image: radial-gradient(circle, #ffe778 6px, transparent 6px), radial-gradient(circle, #ffd271 6px, transparent 6px);
		background-position: 0 0, 30px 28px;
		background-size: 60px 56px;
	}
}

main {
	margin-top: var(--header-height);
	overflow: clip;
}

section {
	padding: var(--m40-24) 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

section:nth-of-type(1) {
	padding: var(--m80-40) 0 var(--m40-24) 0;
}

section:last-child {
	padding-bottom: var(--m104-64);
}

a {
	text-decoration: none;
	color: inherit;
}


img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.container {
	width: 92%;
	max-width: 1080px;
	display: block;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

@media(max-width:768px) {

	.sp_none {
		display: none !important;
	}
}

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

.txtC {
	text-align: center;
}

.txtR {
	text-align: right;
}

.txtL {
	text-align: left;
}

.txtJ {
	text-align: justify;
}


/* フレックス関連
* ---------------------------------- */
.flex {
	display: -ms-flexbox;
	display: flex;
}

.flexR {
	flex-direction: row-reverse;
}

.justC {
	justify-content: center;
}

.justS {
	justify-content: flex-start;
}

.justE {
	justify-content: flex-end;
}

.justB {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.justA {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.flexW {
	flex-wrap: wrap;
}

.alignS {
	align-items: start;
}

.alignC {
	align-items: center;
}

.alignB {
	align-items: flex-end;
}

@media (max-width: 768px) {
	.sp_flclear {
		display: block;
	}

	.sp_flex {
		display: flex;
	}
}



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

/* 変数
* ---------------------------------- */
: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;
}



/* テキストまわり
* ---------------------------------- */

/* --- 普通のリスト --- */
ul.normal-list {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.normal-list li {
	list-style-type: disc;
	list-style-position: inside;
}

/* --- 数字のリスト --- */
ol.number-list {
	padding-left: 1.2em;
	text-indent: -1.2em;

	li {
		list-style-type: decimal;
		list-style-position: inside;
	}
}

/* --- 注釈 --- */
ul.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
	font-size: .8em;
	line-height: 150%;
	margin-top: 8px;
}

a.inline-link {
	text-decoration: underline;

	&:hover {
		color: var(--main-color);
	}
}

/* --- 見出し --- */
h2 {
	font-family: var(--fluffy-txt);
	font-weight: 900;
	line-height: 140%;
	font-size: var(--txt36-24);
	margin-bottom: var(--m24-16);
}

h3 {
	font-family: var(--fluffy-txt);
	font-weight: 900;
	line-height: 140%;
	font-size: var(--txt20-18)
}

/* 共通要素
* ---------------------------------- */
/* --- 両サイドの模様 --- */
.bg-illust-l,
.bg-illust-r {
	position: absolute;
}

/* --- 白い角丸の背景 --- */
.white-wrap {
	padding: 32px var(--m80-40);
	background-color: #fff;
	border-radius: var(--m40-24);
}


/* =========================================
* ヘッダー
* ======================================== */
header {
	background-color: var(--txt-color);
	color: #fff;
	height: var(--header-height);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 0 6%;
	font-weight: 500;

	.header-contents {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.top-logo {
			max-width: 24%;
			transition: var(--hov-move);

			&:hover {
				opacity: .7;
				filter: brightness(110%);
			}
		}

		nav {
			ul {
				display: flex;

				li a {
					padding: 1em;
					transition: var(--hov-move);

					&:hover {
						color: var(--main-bg);
						text-decoration: underline;
						text-underline-offset: .3em;
					}
				}
			}
		}
	}
}

/* =========================================
* メインビジュアル
* ======================================== */
.mv-area {
	aspect-ratio: 2560 / 1461;
	position: relative;
	z-index: 1;
}

/* =========================================
* 動画
* ======================================== */
#movie {
	.bg-illust-l {
		top: -40px;
		left: -123px;
	}

	.bg-illust-r {
		top: 32px;
		right: 40px;
	}



	.movie-thumb-wrap {
		aspect-ratio: 9/16;
		position: relative;
		overflow: hidden;
		max-width: 337px;
		margin: auto;
		display: block;

		.movie-thumb-img {
			width: 100%;
			transition: var(--hov-move);
		}

		.icon-play {
			position: absolute;
			z-index: 3;
			transform: translate(-50%);
			top: 45%;
			left: 50%;
			width: 80px;
			height: 80px;
		}

		&:after {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: .5;
			top: 0;
			left: 0;
			transition: var(--hov-move);
			z-index: 1;
		}

		&:hover {

			.movie-thumb-img {
				transform: scale(1.1);
			}

			/* 1.2倍に拡大 */
			&:after {
				opacity: 0;
			}
		}
	}
}

#movie-wrap video {
	max-height: 80vh;
}

/* =========================================
* リード文
* ======================================== */
#lead-area {
	.bg-illust-l {
		top: -180px;
		left: 24px;
	}

	.bg-illust-r {
		top: 32px;
		right: -8px;
	}

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

}

/* =========================================
* まるるん発見ラリー
* ======================================== */
#rally {
	.bg-illust-l {
		bottom: -40px;
		left: 24px;
	}

	.bg-illust-r {
		top: -24px;
		right: -8px;
	}

	.green-wrap {
		justify-content: center;

		.flag-img {
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

/* =========================================
* ダウンロードコンテンツ
* ======================================== */
#dl-contents {
	.bg-illust-l {
		bottom: 0px;
		left: -32px;
	}

	.bg-illust-r {
		bottom: 24px;
		right: -24px;
	}

	.green-wrap {
		justify-content: center;
		flex-direction: row-reverse;

		.flag-img {
			position: absolute;
			top: 0;
			right: 0;
		}

		.marurun-dl-img {
			width: min(30vw, 300px);
		}
	}
}

/* =========================================
* ダウンロードページトップ
* ======================================== */
#dl-top .green-wrap {
	flex-direction: column;

	.flex {
		gap: var(--m16-8);

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

		.convenience-wrap {
			border-radius: var(--m24-16);
			border: 3px solid var(--sub-color);
			padding: var(--m16-8);
			min-width: 310px;

			p {
				font-size: var(--txt16-14);
			}
		}
	}

	.btn-wrap {
		width: 100%;

		a {
			max-width: 367px;

			&:after {
				transform: translateY(-50%) rotate(90deg);
			}
		}
	}
}

.qr-wrap {
	display: flex;
	gap: var(--m24-16);
	align-items: center;
	justify-content: center;
	margin-top: 8px;

	img {
		width: 80px;
		height: 80px;
	}

	.qr-txt p:first-child {

		padding: 0 1em;
		border: solid 1px #fff;
		font-size: var(--txt14-13);
		border-radius: 8px;
	}
}

/* =========================================
* ダウンロードコンテンツエリア
* ======================================== */
#dl-area .container nav {
	position: sticky;
	top: var(--header-height);
	padding: var(--m40-24) 0;
	z-index: 10;
}

.anchor-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--m24-16);
	max-width: 824px;
	margin: auto;

	.anchor-btn {
		color: #fff;
		font-size: var(--txt24-20);
		font-weight: 900;
		display: grid;
		place-items: center;
		border-radius: 32px;
		padding: .5em 1em;
		font-family: var(--fluffy-txt);
		transition: var(--hov-move);

		li:first-child & {
			background-color: var(--spring-color);
		}

		li:nth-child(2) & {
			background-color: var(--summer-color);
		}

		li:nth-child(3) & {
			background-color: var(--autumn-color);
		}

		li:last-child & {
			background-color: var(--winter-color);
		}

		&:hover {
			filter: brightness(105%);
			opacity: .8;
		}
	}
}

#dl-area .white-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m104-64);
	padding: var(--m80-40);

	.four-seasons-col {
		h2 {
			font-size: var(--txt24-20);
			border-radius: 32px;
			color: #fff;
			padding: .3em 1em;
			margin-bottom: var(--m40-24);
		}

		&:first-child h2 {
			background-color: var(--spring-color);
		}

		&:nth-child(2) h2 {
			background-color: var(--summer-color);
		}

		&:nth-child(3) h2 {
			background-color: var(--autumn-color);
		}

		&:last-child h2 {
			background-color: var(--winter-color);
		}
	}

	.dl-contents-wrap {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px 16px;

		.dl-contents-col {
			max-width: 240px;
			text-align: center;
			margin: 0 auto;

			h3 {
				display: grid;
				place-items: center;
				letter-spacing: -0.64px;
				width: 100%;
				position: relative;
				height: 40px;
				/*リボンの高さ*/
				text-align: center;
				padding: 0 1em;
				/*横の大きさ*/
				background: var(--sub-color);
				/*塗りつぶし色*/
				color: var(--txt-color);
				/*文字色*/
				box-sizing: border-box;
				font-size: min(1.6vw, 16px);
				margin-bottom: var(--m16-8);

				&:before,
				&:after {
					position: absolute;
					content: '';
					width: 0px;
					height: 0px;
					z-index: 1;
				}

				&:before {
					top: 0;
					left: 0;
					border-width: 20px 0px 20px 15px;
					border-color: transparent transparent transparent #fff;
					border-style: solid;
				}

				&:after {
					top: 0;
					right: 0;
					border-width: 20px 15px 20px 0px;
					border-color: transparent #fff transparent transparent;
					border-style: solid;
				}
			}

			.thumb-wrap {
				display: flex;
				flex-direction: column;
				gap: var(--m32-16);

				.thumb-col {

					h4 {
						font-family: var(--fluffy-txt);
						font-size: var(--txt20-18);
						margin-bottom: 8px;
					}

					.tate-thumb,
					.yoko-thumb {
						margin: 0 auto var(--m16-8) auto;
						display: block;
						object-fit: cover;
						position: relative;

						&.available-print::before {
							position: absolute;
							top: -16px;
							left: -16px;
							content: "";
							background-image: url(../imgs/icon_thismonth.svg);
							background-size: contain;
							background-repeat: no-repeat;
							width: 60px;
							height: 60px;
							z-index: 1;
						}

					}

					.tate-thumb {
						aspect-ratio: 37 / 80;
					}

					.yoko-thumb {
						aspect-ratio: 1.427 / 1;
					}

					.dl-btn {
						color: var(--main-color);
						background-color: var(--main-bg);
						font-family: var(--fluffy-txt);
						border: 3px solid var(--main-color);
						font-weight: 900;
						padding: .3em 1em;
						border-radius: 32px;
						display: inline-block;
						cursor: pointer;

						&:hover {
							background-color: var(--main-color);
							border: 3px solid var(--main-bg);
							color: var(--main-bg);

							.dl-icon .st0 {
								fill: var(--main-bg)
							}
						}
					}
				}

			}
		}

		.dl-due {
			margin: var(--m24-16) auto 0 auto;
			font-weight: 700;
			text-align: left;
			display: inline-block;

			.dl-midashi {
				font-size: 14px;
				border: var(--txt-color) 1px solid;
				padding: .1em .5em;
				border-radius: 8px;
				display: inline-block;
			}
		}
	}
}

/* =========================================
* お楽しみ方
* ======================================== */
.how-to-enjoy-wrap {
	text-align: justify;
	display: flex;
	flex-direction: column;
	gap: var(--m24-16);

	.how-to-enjoy-col {
		padding-bottom: var(--m32-16);
		border-bottom: 2px dashed var(--txt-color);

		&:last-child {
			border-bottom: none;
		}

		h3 {
			font-size: var(--txt24-20);
			margin-bottom: 8px;
		}

		dd {
			padding: 0 0 0 var(--txt24-20);

			.qr-wrap {
				justify-content: flex-start;

				.qr-txt p:first-child {
					border: solid 1px var(--txt-color);
				}
			}

			.print-wrap {
				display: flex;
				flex-direction: column;
				gap: var(--m16-8);
				margin-top: var(--m16-8);

				.print-col {
					h4 {
						font-size: var(--txt20-18);
						font-family: var(--fluffy-txt);
						font-weight: 900;

						.icon-print {
							vertical-align: middle;
							display: inline-block;
						}
					}
				}
			}
		}
	}
}

/* =========================================
* フッター
* ======================================== */
.sns-wrap {
	background-color: #fff;
	padding: var(--m56-32) 0;
	text-align: center;

	nav {
		width: 92%;
		max-width: 1080px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--m40-24);
		margin: auto;

		ul {
			display: flex;
			gap: var(--m40-24);
			align-items: center;
			justify-content: center;

			a {
				transition: var(--hov-move);

				&:hover {
					opacity: .7;
					filter: brightness(110%);
				}
			}
		}
	}
}

.copyright-wrap {
	background-color: var(--txt-color);
	padding: var(--m40-24) 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: var(--m24-16);

	a {
		transition: var(--hov-move);

		&:hover {
			opacity: .7;
			filter: brightness(110%);
		}
	}

	.copyright {
		color: var(--color-natural-White, #FFF);
		font-size: 12px;
	}
}

@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;
	}

	/* 共通要素
* ---------------------------------- */

	/* --- 白い角丸の背景 --- */
	.white-wrap {
		padding: 32px 24px;
	}

	/* =========================================
	* ヘッダー
	* ======================================== */
	header {
		height: var(--header-height);
		color: var(--txt-color);

		.header-contents {

			.top-logo {
				max-width: 180px;
			}

			nav {
				border-radius: 0 0 24px 24px;
				flex-direction: column;
				position: fixed;
				background-color: #fff;
				width: 100%;
				top: var(--header-height);
				height: auto;
				font-size: 18px;
				font-weight: 700;
				font-family: var(--fluffy-txt);
				transition: right 0.3s ease-in-out;
				right: -100%;
				padding: 24px 24px 32px 24px;

				ul {
					flex-direction: column;

					li a {
						display: block;
						border-bottom: 2px dashed var(--txt-color);

						&:hover {
							color: var(--main-color);
						}
					}
				}

				&.active {
					right: 0;
				}
			}
		}
	}


	/* ハンバーガー
	* ---------------------------------- */

	.burger {
		display: none;
	}


	/* ハンバーガー
* ---------------------------------- */

	/* --- 3本線を囲ってる正方形を囲ってる正方形 --- */
	.burger {
		position: absolute;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--header-height);
		height: var(--header-height);
		right: 0;
		top: 0;
		z-index: 100001;
	}

	/* --- 3本線を囲ってる正方形(widthが3本線の長さになる) --- */

	.burger-wrap {
		width: 25px;
		height: 25px;
		position: relative;
		margin: auto;
	}

	.burger {
		span {
			display: inline-block;
			transition: all 0.4s;
			height: 2px;
			width: 25px;
			background-color: var(--main-bg);
			position: absolute;

			&:nth-of-type(1) {
				top: 3px;
			}

			&:nth-of-type(2) {
				top: 11px;
			}

			&:nth-of-type(3) {
				bottom: 3px;
			}
		}

		&.active span {
			&:nth-of-type(1) {
				-webkit-transform: translateY(20px) rotate(315deg);
				transform: translateY(20px) rotate(315deg);
				top: -9px;
			}

			&:nth-of-type(2) {
				opacity: 0;
			}

			&:nth-of-type(3) {
				-webkit-transform: translateY(-20px) rotate(-315deg);
				transform: translateY(-20px) rotate(-315deg);
				bottom: -8px;
			}
		}
	}


	/* =========================================
* メインビジュアル
* ======================================== */
	.mv-area {
		aspect-ratio: 2560 / 1461;
		position: relative;
		z-index: 1;
	}

	/* =========================================
* 動画
* ======================================== */
	#movie {
		.bg-illust-l {
			top: -20px;
			left: -40px;
			width: 200px;
		}

		.bg-illust-r {
			top: 8px;
			right: 8px;
			width: 127px;
		}


		.movie-thumb-wrap {
			max-width: 200px;
			margin: 32px auto;

			.icon-play {
				width: 40px;
				height: 40px;
			}
		}
	}

	/* =========================================
* リード文
* ======================================== */
	#lead-area {
		.bg-illust-l {
			top: -154px;
			left: 4px;
			width: 80px;
		}

		.bg-illust-r {
			top: -37px;
			right: -8px;
			width: 60px;
		}

	}

	/* =========================================
* まるるん発見ラリー
* ======================================== */
	#rally {
		.bg-illust-l {
			display: none;
		}

		.bg-illust-r {
			display: none;
		}

		.green-wrap {

			.flag-img {
				width: 35%;
				max-width: 120px;
			}
		}
	}

	/* =========================================
* ダウンロードコンテンツ
* ======================================== */
	#dl-contents {
		.bg-illust-l {
			bottom: -5px;
			left: -15px;
			width: 150px;
		}

		.bg-illust-r {
			bottom: -96px;
			right: -12px;
			width: 98px;
		}

		.green-wrap {
			flex-direction: column-reverse;
			margin-bottom: 64px;

			.flag-img {
				width: 35%;
				max-width: 120px;
			}

			.marurun-dl-img {
				width: 200px;
			}
		}
	}

	/* =========================================
* ダウンロードページトップ
* ======================================== */
	#dl-top .green-wrap {

		.flex {
			flex-direction: column;
		}
	}

	/* =========================================
* ダウンロードコンテンツエリア
* ======================================== */
	#dl-area .white-wrap {
		padding: 40px 24px;

		.dl-contents-wrap {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px 16px;

			.dl-contents-col {

				h3 {
					height: 48px;
					font-size: 14px;

					&:before {
						border-width: 24px 0px 24px 15px;
					}

					&:after {
						border-width: 24px 15px 24px 0px;
					}
				}

				.thumb-wrap {
					.thumb-col {

						.tate-thumb,
						.yoko-thumb {

							&.available-print::before {
								top: -16px;
								left: -16px;
								width: 48px;
								height: 48px;
							}

						}
					}
				}

				.dl-due {
					.dl-midashi {
						font-size: 10px;
					}
				}
			}
		}
	}

	/* =========================================
* お楽しみ方
* ======================================== */
	.how-to-enjoy-wrap {

		dd {
			.qr-wrap {
				align-items: center;
				flex-direction: column;

				img {
					width: 90%;
					max-width: 200px;
					height: auto;
				}

				.qr-txt {
					text-align: center;

					p:first-child {
						border: solid 1px var(--txt-color);
					}
				}
			}
		}
	}


	/* =========================================
* フッター
* ======================================== */
	.sns-wrap {
		nav {
			flex-direction: column;

			a {
				display: block;
				height: 40px;

				img {
					max-height: 100%;
				}
			}
		}
	}

	.copyright-wrap {
		background-color: var(--txt-color);
		padding: var(--m40-24) 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: var(--m24-16);

		.copyright {
			color: var(--color-natural-White, #FFF);
			font-size: 12px;
		}
	}
}