@charset "utf-8";

/* --------------- common --------------- */

section {
	width: 100%;
	max-width: none;}

section h2 {
	font-size: 1.6em;
	letter-spacing: 0.167em;}
section h2 + p {
	font-size: 1.067em;
	line-height: 2;
	letter-spacing: 0.12496em;}

section p {font-family: 'Noto Sans JP', sans-serif;}


/* --- img center size auto --- */

.atsz,
.pg_ttl .img_wk {
	position: relative;
	margin: 0 auto;}
.atsz img,
.pg_ttl .img_wk img {
	max-width: 100%; max-height: 100%;
	position: absolute;
	top: 0;	bottom: 0; left: 0; right: 0; margin: auto;}


/* --- slick iroiro --- */

.deco_slick {position: relative;}
.deco_slick::before {
	position: absolute;
	z-index: -10;
	content: '';
	display: block;
	width: 28.125%;
	padding: 14.0625% 0;
	background-image: url("../img/kikaku/pattern0.png");
	background-repeat: repeat;
	background-size: 36px auto;}

.deco_slick .slick_kkk::before {
	position: absolute;
	z-index: -10;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	display: block;
	width: 66.667%;
	background-image: url("../img/kikaku/pattern0.png");
	background-repeat: repeat;
	background-size: 36px auto;}

.deco_slick [class^="slick"] span {
	max-width: 800px;
	padding: 33.334% 0;}

.deco_slick .slick-dotted.slick-slider {margin-bottom: 72px;}
.deco_slick .slick-dots {top: calc(100% + 60px); bottom: 0;}

.deco_slick .slick-dots li {
	width: 12px; height: 12px;
	margin: 0.1em 1.667rem;}
.deco_slick .slick-dots li button {
	width: 12px; height: 12px;}
.deco_slick .slick-dots li button:before {
	width: 12px; height: 12px;
	font-size: 12px;
	line-height: 1;}

.gaikan .slick_kkk::after,
.naikan .slick_kkk::after {
	position: absolute;
	top: calc(100% - 75px); left: calc(100% - 150px);
	content: '';
	display: block;
	width: 120px; height: 120px;
	background-size: 100% auto;
	background-position: center;}

.gaikan .slick_kkk::after {background-image: url("../img/chara/mascot_m.png");}
.naikan .slick_kkk::after {background-image: url("../img/chara/mascot_t.png");}

@media (min-width:641px) {
	.deco_slick::before {
		width: 26.042%;
		padding: 13.021% 0;}
	
	.gaikan .slick_kkk::after,
	.naikan .slick_kkk::after {
		top: 100%; left: 75%;
		width: 150px; height: 150px;}
}
@media (max-width:640px) {}

/* --- pg_ttl --- */
.pg_ttl {position: relative;}
.pg_ttl::after,
.pg_ttl > * {position: absolute;}

.pg_ttl::after {
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	content: '';
	display: block;
	width: 100%; height: 100%;
	background-image: url("../img/kikaku/pattern0.png");
	background-repeat: repeat;
	background-size: 36px auto;
	opacity: 0.5;}

	.pg_ttl h2 {
		z-index: 10;
		top: 33.334%; left: 0;
		width: 100%; height: 12.5%;
		text-align: center;}
	.pg_ttl h2 img {width: auto; height: 100%;}
	.pg_ttl .img_wk {
		z-index: -10;
		padding: 25% 0;}


@media (min-width:641px) {}
@media (max-width:640px) {}


/* --- deco_stripe --- */

[class^="stripe-w"] {
	position: relative;
	display: block;
	width: 100%;}

[class^="stripe-w"]::before {
	position: absolute;
	top: 0; left: 50%;
	content: '';
	display: block;
	transform: translateX(-50%);
	background-image: url("../img/kikaku/pattern0.png");
	background-repeat: repeat;
	background-size: 36px auto;}

.stripe-w30 {
	height: 2em;
	margin: 2.667em 0 4em;
	opacity: 0.6;}
.stripe-w60 {
	height: 4em;
	margin: 8em 0 4em;
	opacity: 0.3}
.stripe-w30::before {width: 2em; height: 2em;}
.stripe-w60::before {width: 4em; height: 4em;}


/* --------------- intro --------------- */

.intro > div + div {margin-top: 8em;}
.intro > .text_wk {
	margin-top: 7.4em;
	padding-bottom: 10.667rem;}

.intro .text_wk h2 {text-align: center;}
.intro .text_wk h2 + p {
	text-align: center;
	margin-top: 0.8121em;}

[class*="ikan"] {padding-bottom: 7rem;}
[class*="ikan"] .hirt {
	justify-content: flex-start;
	width: 87.5%;
	margin: 0 auto;}

	[class*="ikan"] .mds-deco {width: 200px;}
	[class*="ikan"] .mds-deco img {width: 100%;}

	[class*="ikan"] .text_wk {width: 100%;}

	[class*="ikan"] .text_wk > * {}
	[class*="ikan"] .text_wk h2 {text-align: left;}
	[class*="ikan"] .text_wk h2 + p {
		text-align: left;
		margin-top: 0.188em;}

.gaikan {padding-top: 132px;}
.gaikan > div + ul {margin-top: 3.4665em;}
.gaikan.deco_slick::before {
	top: 0; left: 4.6875%;
	opacity: 0.6;}
.gaikan.deco_slick .slick_kkk::before {
	top: -17.96875%;
	padding: 24.089% 0;
	opacity: 0.3;}

.naikan {padding-top: 6em;}
.naikan > div + ul {
	margin-top: 3.4665em;
	padding-top: 6em;}
.naikan.deco_slick::before {
	top: 0; right: 4.6875%;
	opacity: 0.3;}
.naikan.deco_slick .slick_kkk::before {
	top: 0;
	padding: 23.308% 0;
	opacity: 0.75;}

.intro .chara_up {
	top: calc(100% - 100px); left: calc(50% - 135px);
	max-width: 270px;}

.intro .chara_up img {transition-delay: 0.75s;}

@media (min-width:641px) {
	[class*="ikan"] .hirt {width: 77.605%;}
	[class*="ikan"] .mds-deco {width: 16.667em;}
	[class*="ikan"] .text_wk {
		width: calc(100% - 16.667em - 6.041%);
		margin-left: 6.041%;}
	
	.gaikan {padding-top: 7.4em;}
	
	.intro .chara_up {
		top: calc(100% - 100px); left: calc(50% - 120px);
		max-width: 240px;}
}
@media (max-width:640px) {
	.intro > .text_wk {
		padding-left: 4.6875%;
		padding-right: 4.6875%;}
	
	[class*="ikan"] .mds-deco + .text_wk {margin-top: 1.411em;}
}


/* --------------- variation → vratn --------------- */
.vratn [class$="_wk"] {
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: flex-start;
	width: 90.625%;
	margin: 0 auto;}

.vratn [class$="_wk"] + [class$="_wk"] {margin-top: 10em;}

.vratn h3 {font-size: 1rem;}
.vratn h3 img {height: 3em;}
.vratn h3 + p {
	font-size: 1.334rem;
	letter-spacing: 0.11994em;
	margin-top: 1.125em;}

.vratn h3 + p + .stripe-w30 {margin-top: 2.167em;}

.vratn [class$="_wk"] h3,
.vratn [class$="_wk"] p {
	width: 100%;
	text-align: center;}

.vratn [class$="_wk"] .item {
	width: 45.3125%;
	background: url("../img/kikaku/pattern0_toumei30.png") repeat;
	background-size: 36px auto;}

.vratn [class$="_wk"] .atsz img {
	max-width: 90%;
	max-height: 90%;}

	[class$="_wk"] .atsz p {
		position: absolute;
		top: calc(100% - 30px); left: calc(50% - 25%);
		z-index: 10;
		transform: translateY(-100%);
		width: 50%;
		letter-spacing: 0.134em;
		color: #fff;
		background: #bab2ad;
		border-radius: 3em;}

.vratn .color_wk {justify-content: flex-start;}

.vratn .info.item > span {
	display: block;
	margin: 2em 0;
	padding: 4.667em 2rem;
	background-color: #fff;}


.info.item h4 {
	font-size: 2.4rem;
	text-align: center;
	color: #bab2ad;}

.info.item h4 + dl {margin-top: 1.59992em;}

.info.item dl {display: flex; flex-wrap: wrap; justify-content: flex-start;}

.info.item dt,
.info.item dd {
	font-size: 1.067em;
	padding: 0.125em 0;}

.info.item dt {
	width: 5em;
	letter-spacing: 0.11994em;
	text-align: center;}
.info.item dd {
	width: calc(100% - 5em);
	padding-left: 1em;}
.info.item dd small {
	display: inline-block;
	font-size: 0.7996em;
	padding: 0 0.9375em;
	background: #eafecd;
	border-radius: 3em;}


@media (min-width:1413px) {
	.vratn [class$="_wk"] {max-width: 1280px;}
	.vratn [class$="_wk"] .item {
		width: 31.25%;
		margin: 0 1.5625%;}
	.vratn [class$="_wk"] .atsz {padding: 15.625% 0;}
	
	.vratn .color_wk .item {width: 28.125%;}
	.vratn .color_wk .item:nth-of-type(n+4) {margin-top: 30px;}
}
@media (max-width:1412px) {
	.vratn [class$="_wk"] .atsz {padding: 22.65625% 0;}
	
	.vratn [class$="_wk"] .info,
	.vratn .color_wk .item:nth-of-type(n+3) {margin-top: 4em;}
}
@media (min-width:641px) {	
	.info.item dt,
	.info.item dd {
		font-size: 1.334em;
		padding-top: 0.125em;
		padding-bottom: 0.125em;}
}
@media (max-width:640px) {
	.vratn [class$="_wk"] .atsz {padding: 50% 0;}
	
	.vratn [class$="_wk"] .item {
		order: 1;
		width: 100%;
		margin-top: 2.858em;}
	.vratn [class$="_wk"] .info.item {
		order: 0;
		margin-top: 0;}
}


/* --------------- ●●● --------------- */
/* --- base --- */

@media (min-width:641px) {}
@media (max-width:640px) {}