@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&family=Noto+Sans+JP:wght@100..900&family=Ultra&display=swap');

:root {
	--color_main: #32CDC8;
	--color_main_bg: #12b8b3;
	--color_sub: #F5B400;
	--color_main_dark: #009A95;
	--color_main_light: #6ad9d5;
	--color_sub_light: #FFDB5B;
	--color_basetxt: #222;
	--color_black: #222;
	--color_white: #fff;
	--color_gray: #999;
	--color_gray_light1: #ccc;
	--color_gray_light2: #f0f0f0;
	--color_fb: #1877F2;
	--color_tw: #000;
	--color_ln: #00B900;
	--color_red: #F01F51;
	--color_blue: #5ebddc;
	--color_pink: #ffa5d6;
	--color_orange: #ffa878;
	--color_purple: #ba9bdc;
	--color_attention_yellow: #FFEA00;
	--color_attention_red: #FF006A;
	--color_main_transparent: rgba(0,154,149,.8);
	--color_white_transparent: rgba(255,255,255,.8);
	--color_marker: #F6EC63;
	--gradation_toleft_white: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	--gradation_toright_white: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	--fontawesome: 'Font Awesome 6 Pro';
	--font_fb: '\f39e';
	--font_tw: '\e61b';
	--font_ln: '\f3c0';
	--font_blank: '\f2d2';
	--font_arrow_up: '\f106';
	--font_arrow_down: '\f107';
	--font_arrow_right: '\f105';
	--font_arrow_left: '\f104';
	--font_check_on: '\f14a';
	--font_check_off: '\f0c8';
	--font_radio_on: '\f192';
	--font_radio_off: '\f111';
	--font_search: '\f002';
	--font_pen: '\f5ad';
	--font_tag: '\f02b';
	--font_face: '\f118';
	--font_book: '\f518';
	--font_close: '\f00d';
	--font_mail: '\f0e0';
	--font_pdf: '\f1c1';
}

* {
	-webkit-text-size-adjust:100%;
}
*, *:before, *:after {
	box-sizing: border-box;
}
.show_sp { display: inline-block; }
.show_pc { display: none; }
@media (min-width: 768px) {
	.show_sp { display: none; }
	.show_pc { display: inline-block; }
}
html, body {
	margin: 0;
	padding: 0;
	border: 0;
}
html {
	font-size: 62.5%;
	background-color: #fff;
	position: relative;
}
body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	text-align: left;
	font-size: 1.6rem;
	font-feature-settings: "pwid" 1;
	letter-spacing: .05em;
	line-height: 2;
	font-weight: 400;
	font-style: normal;
	color: var(--color_basetxt);
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	@media (min-width: 768px) {
		min-width: 1280px;
	}
}
::selection {
	background: var(--color_sub_light);
}
::-moz-selection {
	background: var(--color_sub_light);
}
a         { color: var(--color_basetxt); text-decoration: underline; }
a:link    { color: var(--color_basetxt); }
a:visited { color: var(--color_basetxt); }
a:hover   { color: var(--color_main_bg); }
a:active  { color: var(--color_basetxt); }
a.disabled {
	pointer-events: none;
}
.txt_link a {
	display: inline-block;
}
a.icon_blank::after {
	display: inline-block;
	font-family: var(--fontawesome);
	font-weight: 900;
	margin: 0 .25em;
	content: var(--font_blank);
	color: var(--color_main_bg);
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}


/* txt */
.main p {
	margin: .5em 0;
}
.txt_note {
	font-size: .75em;
	line-height: 1.6;
	font-weight: 400;
}
.txt_note {
	font-size: .75em;
}
.txt_center {
	text-align: center;
}
.txt_right {
	text-align: right;
}
.txt_bold {
	font-weight: 700;
}
.txt_large {
	padding-bottom: .15em;
	font-size: 1.3em;
	background: linear-gradient(transparent 94%, var(--color_basetxt) 0%);
	@media (min-width: 768px) {
		font-size: 1.5em;
	}
}
.txt_catch {
	font-weight: 700;
}
mark {
	background: linear-gradient(transparent 80%, var(--color_marker) 0%);
}
body#detail.news div.post_field mark {
	font-size: .75em;
	color: #555;
	background: transparent;
}

/* btn */
.btn_s a,
.btn_m a,
.btn_l a {
	display: inline-block;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt" 1;
	font-weight: 900;
	letter-spacing: .1em;
	text-decoration: none;
	text-align: center;
}
.btn_m a {
	padding: 1.82rem 2em;
	font-size: 1.4rem;
	line-height: 1.4;
	border-radius: 1000px;
	color: var(--color_white);
	background-color: var(--color_main_dark);
}

/* container */
.content_wdth {
	margin: 0 auto;
	width: calc(100% - 32px);
	@media (min-width: 768px) {
		width: 81.25%;
		max-width: 1040px;
	}
}
.content_frame {
	padding: 16px;
	background: var(--color_white);
	box-shadow: 8px 8px 0px var(--color_main);
	border-radius: 8px;
	@media (min-width: 768px) {
		position: relative;
		padding: 56px;
		box-shadow: 32px 32px 0px var(--color_main);
		border-radius: 16px;
	}
}
.main {
	position: relative;
	overflow: hidden;
	padding: 40px 0 0;
	background-image: url(../img/pattern_dots.png);
	background-repeat: repeat;
	background-position: center;
	background-size: 16px auto;
	background-color: var(--color_gray_light2);
	> .article {
		> .toc_area {
			position: relative;
			padding-bottom: 120px;
			> section {
				margin-top: 80px;
				@media (min-width: 768px) {
					&:not(:nth-of-type(1)) {
						margin-top: 160px;
					}
					&:nth-of-type(1) {
						margin-top: 0;
					}
				}
			}
			@media (min-width: 768px) {
				margin-top: 160px;
				padding-top: 80px;
				> section {
					.content_wdth {
						padding-right: 266px;
					}
				}
			}
		}
	}
	.pagetop_btn {
		position: absolute;
		bottom: calc(5.2rem + 8px);
		right: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		width: 40px;
		height: 40px;
		border-radius: 1000px;
		background-color: var(--color_main);
		cursor: pointer;
		::before {
			transform: rotate(-45deg) translateY(2px);
			content: '';
			display: block;
			width: 10px;
			height: 10px;
			border-style: solid;
			border-color: var(--color_white);
			border-width: 3px 3px 0 0;
		}
	}
}

/* headline */
.txt_h2 {
	font-family: "Kaisei Opti", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 3.6rem;
	line-height: 1.3;
	white-space: nowrap;
	.txt_jp {
		display: inline-block;
		margin-bottom: .15em;
		padding: 0 .2em .15em;
		color: var(--color_white);
		background-color: var(--color_black);
	}
	.txt_en {
		display: block;
		font-size: 1.6rem;
	}
	@media (min-width: 768px) {
		font-size: 56px;
	}
}
.txt_h3 {
	margin: 2em 0 1em;
	padding-bottom: 8px;
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 700;
	border-style: solid;
	border-color: var(--color_basetxt);
	border-width: 0 0 1px 0;
	@media (min-width: 768px) {
		padding-bottom: 10px;
		font-size: 2.4rem;
	}
}
.txt_h4 {
	margin-bottom: .5em;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 700;
	& + p {
		margin-top: .5em;
	}
	@media (min-width: 768px) {
		font-size: 2rem;
	}
}

/* list */
.disc_list {
	line-height: 1.6;
	> li {
		margin-bottom: .5em;
	}
}

/* toc */
.fixed_nav {
	.toc_wrap {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		nav {
			ul {
				display: flex;
				justify-content: space-between;
				margin: 0;
				padding: 8px;
				list-style: none;
				font-family: "Kaisei Opti", serif;
				font-weight: 700;
				font-style: normal;
				font-size: 2rem;
				line-height: 1.8;
				letter-spacing: normal;
				background-color: var(--color_white);
				li {
					a {
						display: block;
						padding: 0 .5em;
						text-decoration: none;
						&:hover {
							color: var(--color_white);
							background-color: var(--color_attention_red);
						}
					}
					ul {
						display: none;
					}
					&.current {
						> a {
							color: var(--color_white);
							background-color: var(--color_attention_red);
						}
					}
				}
			}
		}
	}
	@media (min-width: 768px) {
		position: absolute;
		top: 24px;
		right: auto;
		bottom: auto;
		left: 1014px;
		width: 266px;
		.toc_wrap {
			position: static;
			width: auto;
			nav {
				ul {
					flex-direction: column;
					align-items: flex-start;
					padding: 40px 16px 40px 0;
					font-size: 2.4rem;
					border-radius: 40px 0 0 40px;
					li {
						a {
							display: flex;
							align-items: center;
							padding: 0 .5em 0 16px;
							&::before {
								content: '';
								display: inline-block;
								margin-right: 16px;
								width: 8px;
								height: 8px;
								border-radius: 1000px;
								background-color: var(--color_gray_light1);
							}
							&:hover {
								&::before {
									background-color: var(--color_white);
								}
							}
						}
						+ li {
							margin-top: 8px;
						}
						ul {
							display: block;
							margin: 0;
							padding: 0 0 0 16px;
							font-family: "Noto Sans JP", sans-serif;
							font-optical-sizing: auto;
							font-size: 1.6rem;
							font-weight: 700;
							li {
								+ li {
									margin-top: 0;
								}
							}
						}
						&.current {
							> a {
								&::before {
									background-color: var(--color_white);
								}
							}
						}
					}
				}
			}
		}
	}
	@media (min-width: 1280px) {
		position: absolute;
		top: 24px;
		right: 0;
		bottom: auto;
		left: auto;
		width: calc(50% - 374px);
	}
}

/* header */
.header {
	h1 {
		margin: 0;
	}
}

/* footer */
.footer {
	font-size: 1.2rem;
	text-align: center;
	color: var(--color_white);
	background-color: var(--color_black);
	.footer_inner {
		padding: 24px 16px;
		a {
			color: var(--color_white);
		}
		.footer_logo {
			margin: 0 auto 2em;
			width: 40%;
			@media (min-width: 768px) {
				width: 160px;
			}
		}
	}
}

/* sec_about */
.sec_about {
	.txt_catch {
		text-align: center;
		font-size: 2.4rem;
		line-height: 1.6;
		.logo_img {
			display: inline-block;
            width: 50%;
            height: auto;
			@media (min-width: 768px) {
				width: 25%;
			}
		}
	}
	.txt_large {
		font-size: 1.2em;
		@media (min-width: 768px) {
			font-size: 1.5em;
		}
	}
	@media (min-width: 768px) {
		text-align: center;
		.h2_wrap {
			margin: 0 auto;
			width: 448px;
			.txt_h2 {
				margin-top: 0;
			}
		}
		.txt_catch {
			font-size: 3.6rem;
		}
	}
}

/* toc_area */
.toc_area {
	.txt_h2 {
		margin-top: -1em;
	}
	.sec_award {
		.txt_catch {
			display: flex;
			flex-direction: column;
			font-size: 1.1em;
			line-height: 1.5;
			letter-spacing: normal;
			@media (min-width: 768px) {
				margin-top: -3.5em;
				font-size: 3.2rem;
			}
			span {
				display: inline-block;
				margin-bottom: 2px;
				padding: 0 .2em;
				color: var(--color_white);
				background: var(--color_main);
				transform: matrix(1, -0.07, 0, 1, 0, 0);
			}
		}
		.award_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 2em 0 0;
			padding: 0;
			list-style: none;
			li {
				margin-top: 8px;
				&:nth-child(4),
				&:nth-child(5) {
					width: calc(50% - 4px);
				}
			}
		}
	}
	.sec_genre {
		.genre_list {
			counter-reset: number 0;
			margin: 0;
			padding: 0;
			list-style: none;
			.accordion_wrap {
				margin-bottom: 8px;
				border: solid 2px var(--color_gray_light1);
				border-radius: 8px;
				summary {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;
					padding: 24px 16px;
					color: #222222;
					font-weight: 600;
					cursor: pointer;
					&::-webkit-details-marker {
						display: none;
					}
					.txt_ttl {
						position: relative;
						display: inline-block;
						margin: 0 0 .75em 2em;
						padding: 0 .2em;
						font-size: 2.3rem;
						font-weight: 900;
						background: linear-gradient(transparent 1%, var(--color_marker) 0%);
						&::before,
						&::after {
							position: absolute;
							top: 50%;
							left: -2em;
							transform: translateY(-50%);
							content: '';
							display: block;
							width: 1.6em;
							height: 1.6em;
						}
						&::before {
							border-radius: 1000px;
							background-color: var(--color_basetxt);
						}
						&::after {
							counter-increment: number 1;
							content: counter(number);
							color: var(--color_white);
							text-align: center;
							font-family: "Ultra", serif;
							font-weight: 400;
							font-style: normal;
							line-height: 1.6em;
						}
					}
					.btn_switch {
						position: relative;
						padding-left: 32px;
						.icon_switch {
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							display: inline-block;
							width: 24px;
							height: 24px;
							border-radius: 1000px;
							background-color: var(--color_main);
							&::before,
							&::after {
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								content: '';
								display: block;
								width: 12px;
								height: 3px;
								background-color: var(--color_white);
								transition: .2s;
							}
							&::after {
								transform: translate(-50%, -50%) rotate(90deg);
							}
						}
						.txt_open,
						.txt_close {
							font-size: 1.4rem;
							font-weight: 700;
						}
						.txt_open {
							display: block;
						}
						.txt_close {
							display: none;
						}
					}
				}
				&[open] {
					summary {
						.btn_switch {
							.icon_switch {
								&::after {
									transform: translate(-50%, -50%) rotate(0deg);
								}
							}
							.txt_open {
								display: none;
							}
							.txt_close {
								display: block;
							}
						}
					}
				}
				.accordion_content {
					transform: translateY(-10px);
					opacity: 0;
					padding: 0 8px 1em;
					transition: transform .5s, opacity .5s;
					.accordion_content_inner {
						padding: 1em 8px;
						background-color: var(--color_marker);
						border-radius: 8px;
						p {
							margin: .5em 0;
						}
						.img_list,
						.dl_btn_list {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin: 0;
							padding: 0;
							list-style: none;
							li {
								img {
									display: block;
									margin: .5em auto;
									width: 75%;
								}
							}
						}
						.dl_btn_list {
							li {
								+ li {
									margin-top: .75em;
								}
								a {
									position: relative;
									display: flex;
									justify-content: center;
									align-items: center;
									flex-direction: column;
									margin-top: .5em;
									padding: .5em;
									text-decoration: none;
									text-align: center;
									font-weight: 900;
									line-height: 1.5;
									background-color: var(--color_white);
									border: solid 2px var(--color_basetxt);
									border-radius: 4px;
									&::after {
										position: absolute;
										top: 50%;
										right: 16px;
										transform: translateY(-50%);
										content: var(--font_pdf);
										display: block;
										font-family: var(--fontawesome);
										font-weight: 400;
									}
									.txt_btn_genre {
										font-size: 2rem;
									}
								}
							}
						}
					}
				}
				&[open] .accordion_content {
					transform: none;
					opacity: 1;
					.accordion_content_inner {
						p {
						}
					}
				}
			}
		}
		@media (min-width: 768px) {
			.genre_list {
				.accordion_wrap {
					border-radius: 40px;
					border-width: 4px;
					summary {
						flex-direction: row;
						padding: 40px;
						.txt_ttl {
							margin-bottom: 0;
							margin-left: 48px;
							padding: 0 .2em;
							font-size: 2.4rem;
						}
						.btn_switch {
							padding-left: 36px;
							.icon_switch {
								width: 28px;
								height: 28px;
								&::before,
								&::after {
									width: 16px;
									height: 4px;
								}
							}
							.txt_open,
							.txt_close {
								font-size: 1.6rem;
							}
						}
					}
					&[open] {
						summary {
							.btn_switch {
								.icon_switch {
									&::after {
									}
								}
							}
						}
					}
					.accordion_content {
						padding: 1em 40px 40px;
						.accordion_content_inner {
							padding: 32px;
							text-align: center;
							border-radius: 16px;
							.img_list,
							.dl_btn_list {
								margin-top: 1em;
								flex-direction: row;
								justify-content: center;
								li {
									width: 48%;
									img {
										margin: 0;
										width: 100%;
									}
									+ li {
										margin-left: 4%;
									}
								}
							}
							.dl_btn_list {
								li {
									+ li {
										margin-top: 0;
									}
								}
							}
						}
					}
					&[open] p.txt_catch {
						margin-bottom: 2em;
						font-weight: 900;
					}
				}
			}
		}
	}
	.sec_description {
		section {
			font-size: 1.4rem;
		}
		.scroll_box {
			overflow-y: scroll;
			margin-top: 2em;
			padding: 8px 16px;
			height: 240px;
			border-radius: 8px;
			background-color: var(--color_gray_light2);
			section {
				padding: 16px 0;
				.txt_h3 {
					margin: 0 0 1em 0;
					padding: 0;
					font-size: 1.6rem;
					border: none;
				}
				.disc_list {
					margin-left: -1em;
				}
			}
		}
		@media (min-width: 768px) {
			section {
				.l_col2 {
					display: flex;
					justify-content: space-between;
					.txt_wrap {
						width: calc(100% - 324px);
					}
					.img_wrap {
						width: 300px;
					}
				}
			}
		}
	}
	.sec_form {}
	@media (min-width: 768px) {
		.h2_wrap {
			position: absolute;
			top: -48px;
			left: calc(100% - 24px);
			.txt_h2 {
				display: flex;
				align-items: flex-start;
				margin: 0;
				.txt_jp {
					margin: 0;
					padding: .25em 0;
					writing-mode: vertical-rl;
				}
				.txt_en {
					transform: rotate(-90deg) translate(-100%, 50%);
					transform-origin: top left;
					white-space: nowrap;
				}
			}
		}
	}
}



/* share */
.share_wrap .share_list {
	display: flex;
	justify-content: center;
	margin: 40px auto 0;
	padding: 0;
	list-style: none;
	li {
		margin: 0 16px;
		width: 4rem;
		height: 4rem;
		a {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			transition: .2s;
			border-radius: 1000px;
			&::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				line-height: 1;
				font-family: "Font Awesome 6 Brands";
				font-weight: 400;
				letter-spacing: normal;
			}
		}
		&.btn_share_fb a {
			background-color: var(--color_fb);
			&::after {
				content: '\f39e';
				color: var(--color_white);
				font-size: 20px;
			}
		}
		&.btn_share_tw a {
			background-color: var(--color_tw);
			&::after {
				content: '\e61b';
				color: var(--color_white);
				font-size: 20px;
			}
		}
		&.btn_share_ln a {
			background-color: var(--color_ln);
			&::before {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: '';
				display: block;
				width: calc(100% - 16px);
				height: calc(100% - 16px);
				background-color: var(--color_white);
				border-radius: 1000px;
			}
			&::after {
				content: '\f3c0';
				color: var(--color_ln);
				font-size: 30px;
			}
		}
	}
	@media (min-width: 768px) {
		justify-content: flex-start;
		margin: 16px 0 0 0;
		li {
			margin: 0 16px 0 0;
		}
	}
}