@charset "UTF-8";

/* Object - p-font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
	font-family: "myfont";
	src: url("../fonts/myfont.eot?jm6d8c");
	src: url("../fonts/myfont.eot?jm6d8c#iefix") format("embedded-opentype"), url("../fonts/myfont.ttf?jm6d8c") format("truetype"), url("../fonts/myfont.woff?jm6d8c") format("woff"), url("../fonts/myfont.svg?jm6d8c#myfont") format("svg");
	font-weight: normal;
	font-style: normal;
	}
	/* .icon-train:before { content: "\e900"; } */
	/* .icon-car:before { content: "\e901"; } */

/* Foundation - Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	}

input, textarea {
	margin: 0;
	font-size: 100%;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
	}

fieldset, img, iframe {
	border: 0;
	}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
	}

ol, ul {
	list-style: none;
	}

caption, th {
	text-align: left;
	}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	}

q:before, q:after {
	content: "";
	}

abbr, acronym {
	border: 0;
	}

img {
	vertical-align: bottom;
	pointer-events: none;
	}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

/* Foundation - Variable */
:root {
	--mediaScreenS			: 480px;
	--mediaScreenM			: 768px;
	--mediaScreenL			: 980px;

	--maxWidth				: 1060px;
	--garter				: 50px;
	--garter--in			: 25px;
	--garter--ob			: 15px;

	--baseFont				: "Noto Sans JP", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	--baseFontColor			: #444;
	--accentFont			: YuMincho, '游明朝', "ヒラギノ明朝 StdN W6", "HiraMinStdN-W6", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;

	--lineHeight--long		: 2.4;
	--lineHeight--middle	: 1.7;
	--lineHeight--short		: 1.4;

	--baseColor				: #f2f2f2;
	--mainColor				: #6c2c2f;
	--mainDarkenColor		: #4c161a;
	--accentColor			: #e7372f;

	--pinkColor				: #ed87b3;
	--pinkDarkenColor		: #dc5b94;
	--skyColor				: #54c3f1;
	--skyDarkenColor		: #329bc6;

	}


/* Foundation - Basic */
html {
	overflow-y: scroll;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	background: #fbf8f2;
	}
	html::before {
		content: "";
		display: block;
		width: 100%;
		border-top: solid 4px #dfd8ca;
		position: fixed;
		top: 20px;
		left: 0;
	}
	html::after {
		content: "";
		display: block;
		width: 100%;
		border-top: dotted 10px #dfd8ca;
		position: fixed;
		bottom: 20px;
		left: 0;
	}

body {
	font-family: var(--baseFont);
	font-size: 13px;
	line-height: 1;
	text-align: justify;
	color: black;
	background: url(../images/bg_noize03.png) repeat center center;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
	}
	@media screen and (min-width: 481px) {
		body::before {
			content: url(../images/img_title02.svg);
			/* content: url(../images/img_symbol01.svg); */
			display: block;
			width: 15%;
			position: fixed;
			top: 50%;
			left: calc( (100% - 480px) * 0.25 );
			transform: translate( -50%, -50%);
		}
		body::after {
			content: url(../images/img_symbol02.svg);
			display: block;
			width: 10%;
			position: fixed;
			top: 50%;
			right: calc( (100% - 480px) * 0.25 );
			transform: translate( 50%, -50%);
		}
	}


a {
	color: black;
	}
a:link {
	text-decoration: none;
	}
a:visited {
	text-decoration: none;
	}
a:hover {
	text-decoration: none;
	}
a:active {
	text-decoration: none;
	}


/* Layout - Contents */
.wrapper {
	display: flex;
	align-items: center;
	min-height: 100vh;
	position: relative;
	}
	.wrapper .inner {
		display: block;
		max-width: 480px;
		width: 100%;
		margin: 0 auto;
		position: relative;
		background: linear-gradient(180deg,rgba(107, 161, 204, 1) 0%, rgba(186, 226, 246, 1) 60%);
		background-attachment: fixed;
		overflow: hidden;
		}
		@media screen and (min-width: 481px) {
			.wrapper .inner {
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
			}
		}
		.wrapper .inner::before {
			content: "";
			display: none;
			width: 2px;
			height: 100%;
			background: white;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			}
		.wrapper .inner::after {
			content: "";
			display: none;
			width: 2px;
			height: 100%;
			background: white;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			}
			@media screen and (min-width: 481px) {
				.wrapper .inner::before {
					display: block;
				}
				.wrapper .inner::after {
					display: block;
				}
			}
	.wrapper .inner .contents {
		padding: 0 var(--garter--in) var(--garter);
	}



/* Layout - Header */


/* Layout - Footer */
.l-footer {
	display: block;
	}
	.l-footer__top {
		width: 100%;
		text-align: center;
		}
		.l-footer__top > img {
			width: 50%;
			height: auto;
		}


.l-footer__bottom {
	display: block;
	width: 100%;
	text-align: center;
	background: white;
	padding: 15px;
	margin-top: var(--garter);
	font-size: 10px;
	color: #999;
	}



/* Object - p-notice */
.p-notice {
	display: block;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 5;
	}
	.p-notice__yellow {
		display: flex;
		justify-content: center;
		font-size: 12px;
		color: black;
		line-height: 1.7;
		background: #fff010;
		padding: 3px 15px;
		}
	.p-notice__red {
		display: flex;
		justify-content: center;
		font-size: 12px;
		color: white;
		line-height: 1.7;
		font-weight: bold;
		background: var(--accentColor);
		padding: 3px 15px;
		}
		.p-notice__red::before {
			content: url(../images/img_notice01.svg);
			display: inline-block;
			width: 1.3em;
			padding-right: 3px;
			position: relative;
			top: 2px;
			}

/* Object - p-main */

.p-main {
	position: relative;
	}
	.p-main::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: 130%;
		}

	.p-main--title {
		display: block;
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50%);
		z-index: 2;
		}

		.p-main--title > img {
			width: 100%;
			height: auto;
		}
	
	.p-main--logo {
		display: block;
		width: 45%;
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 5;
		transition: all .4s ease;
		}
		.p-main--logo:hover {
			opacity: .4;
		}
		.p-main--logo > img {
			width: 100%;
			height: auto;
			}

	.p-main--lighten {
		display: block;
		/* display: none; */
		width: 180%;
		height: auto;
		position: absolute;
		top: 5%;
		left: 20%;
		transform: translate( -50%, -50%);
		}
	.p-main--bright {
		display: block;
		/* display: none; */
		width: 80%;
		height: auto;
		position: absolute;
		top: 5%;
		left: 20%;
		transform: translate( -50%, -50%);
		}

	.p-main--flare {
		display: block;
		/* display: none; */
		width: 20%;
		height: auto;
		mix-blend-mode: screen;
		position: absolute;
		top: 12%;
		left: 30%;
		transform: translate( -50%, -50%);
		}

	.p-main--towor {
		display: block;
		/* display: none; */
		width: 55%;
		height: auto;
		position: absolute;
		top: 77%;
		left: 65%;
		transform: translate( -50%, -50%);
		}

	.p-main--item01 {
		display: block;
		/* display: none; */
		width: 20%;
		height: auto;
		position: absolute;
		top: 70%;
		left: 20%;
		transform: translate( -50%, -50%);
		}

	.p-main--item02 {
		display: block;
		/* display: none; */
		width: 15%;
		height: auto;
		position: absolute;
		top: 30%;
		left: 15%;
		transform: translate( -50%, -50%);
		}

	.p-main--item03 {
		display: block;
		/* display: none; */
		width: 15%;
		height: auto;
		position: absolute;
		top: 11%;
		left: 40%;
		transform: translate( -50%, -50%);
		}

	.p-main--item04 {
		display: block;
		/* display: none; */
		width: 22%;
		height: auto;
		position: absolute;
		top: 45%;
		left: 72%;
		}

	.p-main--item05 {
		display: block;
		/* display: none; */
		width: 12%;
		height: auto;
		position: absolute;
		top: 90%;
		left: 34%;
		transform: translate( -50%, -50%);
		}

	.p-main--item06 {
		display: block;
		/* display: none; */
		width: 8%;
		height: auto;
		position: absolute;
		top: 85%;
		left: 80%;
		transform: translate( -50%, -50%);
		}


/* Object - p-intro */
.p-intro {
	display: block;
	margin: 0 auto;
	padding: var(--garter) var(--garter--in);
	background-color: white;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 1;
	}

	.p-intro--whatis {
		display: block;
		width: 90%;
		margin: 0 auto;
		}
		.p-intro--whatis > img {
			width: 100%;
			height: auto;
		}
	
	.p-intro > p {
		margin-top: var(--garter--in);
		line-height: var(--lineHeight--short);
		}
		.p-intro > p+p {
			margin-top: var(--garter--ob);
		}
	
	.p-intro--image {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
		margin-top: var(--garter--in);
		}
		.p-intro--image > img {
			display: block;
			width: 45%;
			height: auto;
		}

/* Object - p-schedule */
.p-schedule {
	display: flex;
	flex-wrap: wrap;
	padding-top: var(--garter--in);
	padding-bottom: calc( var(--garter)*2);
	margin: calc( var(--garter--ob)*-0.5);
	position: relative;
	}
	.p-schedule::after {
		content: url(../images/img_symbol_white01.svg);
		display: block;
		width: 20%;
		height: auto;
		position: absolute;
		bottom: calc( var(--garter) - 8px);
		left: 50%;
		transform: translate( -50%, 0);
		}
	.p-schedule__item {
		width: 50%;
		padding: calc( var(--garter--ob)*0.5);
		}

.p-schedule--box {
	padding: 10px;
	background-color: white;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	}
	.p-schedule--box::before {
		content: "";
		display: block;
		padding-top: 120%;
	}
	.p-schedule--box::after {
		content: "";
		display: block;
		width: 100%;
		border-top: dotted 5px #ccc;
		position: absolute;
		bottom: 3%;
		left: 0;
	}
	.p-schedule--box__month {
		display: block;
		width: 100%;
		line-height: 1.6;
		padding-top: 2px;
		font-size: 30px;
		font-family: "Roboto";
		font-weight: 900;
		color: white;
		background: var(--pinkColor);
		box-shadow: 0 3px 0 var(--pinkDarkenColor);
		position: absolute;
		top: 0;
		left: 0;
	}
	.p-schedule--box__day {
		font-size: 120px;
		font-family: "Oswald", sans-serif;
		font-weight: 900;
		text-shadow: 0 3px 0 #ddd;
		position: absolute;
		top: 49%;
		left: 50%;
		transform: translate( -50%, -50%);
	}
	.p-schedule--box__week {
		font-size: 25px;
		font-weight: 900;
		color: var(--accentColor);
		position: absolute;
		bottom: 7%;
		left: 50%;
		transform: translate( -50%, -50%);
		}
		.p-schedule--box__week.blue {
			color: #047cc2;
		}

.p-schedule--gray {
	padding: 10px;
	background-color: #ededed;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	position: relative;
	}
	.p-schedule--gray::before {
		content: "";
		display: block;
		padding-top: 120%;
	}
	.p-schedule--gray::after {
		content: url(../images/img_logo_gray01.svg);
		display: block;
		width: 70%;
		height: auto;
		opacity: .3;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50%);
	}

/* Object - p-basic */
.p-basic {
	display: block;
	margin: 30px auto 0;
	background-color: white;
	text-align: center;
	border: solid 5px var(--pinkColor);
	border-radius: 20px;
	box-shadow: 0 3px 0 var(--pinkDarkenColor),
				0 0 20px rgba(0, 0, 0, 0.05);
	position: relative;
	}
	.p-basic--head {
		display: block;
		width: 100%;
		position: absolute;
		top: -30px;
		left: 0;
		}
		.p-basic--head > img {
			display: block;
			width: 35%;
			height: auto;
			margin: 0 auto;
		}
	.p-basic--time {
		display: block;
		padding: calc(var(--garter--in) + 30px) var(--garter--in) var(--garter--in);
		font-family: "Oswald";
		font-size: 50px;
		font-weight: 900;
		text-align: center;
		}
		.p-basic--time > span {
			display: block;
			font-family: var(--baseFont);
			font-size: 10px;
			font-weight: normal;
			color: var(--accentColor);
			padding-top: var(--garter--ob);
		}
	.p-basic--place {
		display: block;
		font-size: 16px;
		color: white;
		background: var(--pinkColor);
		padding: 10px var(--garter--in);
		box-shadow: 0 3px 0 var(--pinkDarkenColor);
	}
	.p-basic--mc {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		border: 3px solid white;
		outline: 3px solid var(--pinkColor);
		/* background: #eee; */
		border-radius: 10px;
		margin: 0 auto var(--garter--in);
		overflow: hidden;
		}
		.p-basic--mc__image {
			width: 30%;
			position: relative;
			}
			.p-basic--mc__image::before {
				content: "";
				display: block;
				padding-top: 85%;
			}
			.p-basic--mc__image > img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate( -50%, -50%);
			}
		.p-basic--mc__detail {
			width: 70%;
			padding: 13px 20px;
			line-height: 1.2;
			text-align: left;
			}
			.p-basic--mc__detail > dt {
				font-size: 12px;
				position: relative;
				}
				.p-basic--mc__detail > dt > b {
					color: var(--accentColor);
				}
			.p-basic--mc__detail > dd {
				font-size: 16px;
				font-weight: bold;
				padding-top: 3px;
				}
				.p-basic--mc__detail > dd > small {
					font-size: 10px;
				}
	.p-basic--detail {
		padding: var(--garter--in);
		}
		.p-basic--detail > dt {
			text-align: center;
			}
			.p-basic--detail > dt > span {
				display: inline-block;
				font-size: 15px;
				font-weight: bold;
				line-height: var(--lineHeight--short);
				position: relative;
				z-index: 1;
			}
			.p-basic--detail > dt > span::before {
				content: "";
				display: block;
				width: 300%;
				height: 1px;
				background: #ddd;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate( -50%, -50%);
				z-index: -2;
			}
			.p-basic--detail > dt > span::after {
				content: "";
				display: block;
				width: 130%;
				height: 5px;
				background: white;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate( -50%, -50%);
				z-index: -1;
			}
			.p-basic--detail > dt > h2 {
				display: inline-block;
				padding: 5px 15px;
				font-size: 18px;
				color: white;
				font-weight: bold;
				background: var(--mainColor);
				border-radius: 100px;
				box-shadow: 0 3px 0 var(--mainDarkenColor);
			}
		.p-basic--detail > dd {
			line-height: var(--lineHeight--short);
			margin-top: 5px;
			}
			.p-basic--detail > dd + dt {
				margin-top: var(--garter--ob);
			}
			.p-basic--detail__bottomImage {
				display: block;
				width: 95%;
				height: auto;
				padding: 10px 0;
				margin: 0 auto;
			}


	.p-basic--tagList {
		padding: 10px 5px 0;
		position: relative;
		}
		.p-basic--tagList__title {
			display: inline-block;
			padding: 5px 15px;
			font-size: 18px;
			color: white;
			font-weight: bold;
			background: var(--pinkColor);
			border-radius: 100px;
			position: absolute;
			top: 7px;
			left: 50%;
			transform: translate( -50%, -50%);
			z-index: 1;
			box-shadow: 0 3px 0 var(--pinkDarkenColor);
		}
		.p-basic--tagList > ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			padding: var(--garter--in) var(--garter--in) var(--garter--ob);
			background: url(../images/bg_pattern02.webp) center center repeat;
			background-size: 300px;
			border: solid 2px white;
			outline: solid 2px #ddd;
			border-radius: 10px;
			}
			.p-basic--tagList > ul > li {
				font-size: 13px;
				line-height: var(--lineHeight--short);
				background: white;
				padding: 4px 10px;
				border: #ddd solid 2px;
				border-radius: 5px;
				box-shadow: 0 2px 0 #ddd;
				margin: 0 5px 12px;
			}


	.p-basic--prize {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-top: var(--garter--in);
		padding: var(--garter--ob);
		background: var(--skyColor);
		border-radius: 0 0 13px 13px;
		}

		.p-basic--prize__item {
			width: 49%;
			position: relative;
			}
			.p-basic--prize__item > h2 {
				display: block;
				white-space: nowrap;
				padding: 5px 15px;
				color: white;
				font-weight: bold;
				background: var(--mainColor);
				border-radius: 100px;
				position: absolute;
				top: -15px;
				left: 50%;
				transform: translate( -50%, -50%);
				z-index: 1;
				box-shadow: 0 3px 0 var(--mainDarkenColor);
			}
			.p-basic--prize__item > dl {
				display: flex;
				line-height: 1.2;
				margin-top: 7px;
				background: white;
				border: solid 2px white;
				box-shadow: 0 2px 0 #ddd;
				border-radius: 7px;
				overflow: hidden;
				}
				.p-basic--prize__item > dl > dt {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 35%;
					padding: 4px 6px;
					background: var(--mainColor);
					color: white;
					font-weight: bold;
				}
				.p-basic--prize__item > dl > dd {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 65%;
					padding: 4px 6px;
					font-weight: bold;
				}

	.p-basic.p-basic--sky {
		margin: 45px auto 0;
		border: solid 5px var(--skyColor);
		box-shadow: 0 3px 0 var(--skyDarkenColor),
					0 0 20px rgba(0, 0, 0, 0.05);
		}
		.p-basic--sky .p-basic--place {
			background: var(--skyColor);
			box-shadow: 0 3px 0 var(--skyDarkenColor);
		}
		.p-basic--sky .p-basic--tagList__title {
			background: var(--skyColor);
			box-shadow: 0 3px 0 var(--skyDarkenColor);
		}


/* Object - p-next */
.p-next {
	height: 200px;
	position: relative;
	}
	.p-next::before {
		content: "";
		display: block;
		width: 5px;
		height: 100%;
		background-image: linear-gradient(0deg, white, var(--pinkColor));
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate( -50%, 0);
	}
	.p-next.p-next--sky::before {
		background-image: linear-gradient(0deg, white, var(--skyColor));
	}
	.p-next::after {
		content: "";
		display: block;
		width: 0;
		border-top: white 17px solid;
		border-left: transparent 12px solid;
		border-right: transparent 12px solid;
		position: absolute;
		bottom: -17px;
		left: 50%;
		transform: translate( -50%, 0);
	}
	.p-next--box {
		padding: 10px 30px;
		background: var(--mainColor);
		color: white;
		text-align: center;
		white-space: nowrap;
		border-radius: 100px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50%);
		box-shadow: 0 3px 0 var(--mainDarkenColor);
		}
		.p-next--box > p {
			display: block;
			font-size: 16px;
			line-height: var(--lineHeight--short);
			font-weight: bold;
		}
		.p-next--box > small {
			display: block;
			font-size: 10px;
			padding-top: 2px;
			line-height: var(--lineHeight--short);
		}
		.p-next--box__top {
			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			margin: 4px 0 6px;
			border-radius: 500px;
			overflow: hidden;
			}
			.p-next--box__top > li {
				display: block;
				width: 50%;
				font-size: 16px;
				color: var(--mainColor);
				font-weight: bold;
				line-height: 1.1;
				padding: 5px 5px;
				}
				.p-next--box__top > li:nth-of-type(1) {
					background: #f5ac3c;
					border-right: solid 2px var(--mainColor);
				}
				.p-next--box__top > li:nth-of-type(2) {
					background: #a9ce52;
					border-left: solid 2px var(--mainColor);
				}
				.p-next--box__top > li > small {
					display: block;
					width: 100%;
					font-size: 9px;
					color: black;
					font-weight: normal;
					margin-top: 3px;
				}


/* Object - p-float */
.p-float {
	background: var(--pinkColor);
	padding: 13px 20px;
	margin-top: 20px;
	text-align: center;
	line-height: var(--lineHeight--short);
	border-radius: 100px;
	box-shadow: 0 3px 0 var(--pinkDarkenColor),
				0 0 20px rgba(0, 0, 0, 0.05);
	}
	.p-float > p {
		font-size: 16px;
		font-weight: bold;
		color: white;
	}
	.p-float > small {
		display: block;
		font-size: 10px;
		margin-top: 5px;
		color: white;	
	}

/* Object - p-outerText */
.p-outerText {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	margin-top: var(--garter--in);
	text-shadow: 0 0 10px white,
				 0 0 10px white,
				 0 0 10px white;
}