@charset "UTF-8";

/* ---------------------------------------------------------
	CSS Document load
--------------------------------------------------------- */

#load {
	width: 100%;
	height: 100vh;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.wf-active #load {
	display: none;
}

:root {
	--pink: #c82a5f;
	--black: #342424;
}

/* ---------------------------------------------------------
	CSS Document Common
--------------------------------------------------------- */

html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-align: center;
	font-family: Inter, 'Noto Sans JP', sans-serif;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	font-weight: 400;
	font-size: 3.5vw;
	letter-spacing: 0.08em;
	line-height: 1.9;
	word-break: normal;
	word-wrap: break-word;
	color: var(--black);
}

* {
	outline: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-collapse: collapse;
	font-style: normal;
	list-style: none;
}

img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
	border: 0;
}

a {
	text-decoration: underline;
	color: var(--pink);
}

a.tel {
	text-decoration: none;
	color: var(--black);
}

/* ---------------------------------------------------------
	CSS Document layout
--------------------------------------------------------- */

#wrapper {
	overflow: hidden;
}

.pc {
	display: none;
}

/* ---------------------------------------------------------
	CSS Document header
--------------------------------------------------------- */

#header {
	overflow: hidden;
	padding: 8vw 0 10vw;
	background: #f19db5;
	position: relative;
	z-index: 0;
}

#header:before {
	content: '';
	width: 100%;
	height: 100%;
	background: #ee869a;
	transform: skewX(-20deg) translateX(-50%);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
}

#header h1 {
	display: inline-block;
	vertical-align: top;
	padding: 0 1.5em;
	border-radius: 8vw;
	background: #fffbc7;
	text-align: center;
	font-weight: 700;
	font-size: 4vw;
	line-height: 8vw;
}

#header .name {
	margin: 10px 0;
}

#header .name img {
	height: 21vw;
}

#header .category {
	display: inline-block;
	vertical-align: top;
	padding: 0 1em;
	background: var(--pink);
	text-align: center;
	font-weight: 500;
	font-size: 4.5vw;
	line-height: 9vw;
	color: #fff;
}

#header .end {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	color: #fff;
}

#header .date {
	display: flex;
	align-items: flex-end;
	margin: 7vw 0;
	letter-spacing: 0.3em;
}

#header .year {
	display: flex;
	align-items: flex-end;
	margin-bottom: 4vw;
	font-weight: 600;
	font-size: 6.5vw;
	line-height: 6.5vw;
	filter: drop-shadow(0 0 1px var(--pink)) drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 2px var(--pink));
}

#header .year span {
	display: inline-block;
	vertical-align: top;
	font-size: 8vw;
	line-height: 7vw;
}

#header .day {
	display: flex;
	align-items: flex-end;
	margin-bottom: 4vw;
	font-weight: 700;
	font-size: 6.5vw;
	line-height: 6.5vw;
	filter: drop-shadow(0 0 1px var(--pink)) drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 2px var(--pink));
}

#header .day span {
	font-weight: 600;
	font-size: 11vw;
	line-height: 8.5vw;
}

#header .time {
	font-weight: 700;
	font-size: 6.5vw;
	line-height: 1;
	filter: drop-shadow(0 0 1px var(--pink)) drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 2px var(--pink));
}

#header .free {
	transform: translateX(10px);
}

#header .free img {
	height: 20vw;
}

#header .end dl {
	display: flex;
	align-items: center;
	font-size: 4vw;
	line-height: 1;
}

#header .end dt {
	width: 4em;
	margin-right: 15px;
	border-radius: 8vw;
	background: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 4.5vw;
	line-height: 8vw;
	color: var(--pink);
}

#header .end .ja {
	font-size: 5vw;
}

#header .end dd {
	filter: drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 2px var(--pink));
}

#header .end .hall dl {
	margin-bottom: 15px;
	line-height: 1.5;
}

#header .hall .ja {
	display: block;
}

/* ---------------------------------------------------------
	CSS Document profile
--------------------------------------------------------- */

#profile {
	margin-bottom: 15vw;
	padding: 15vw 8vw 15vw;
	background: #f6f6f6;
}

#profile h2 {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 5vw;
	font-weight: 500;
	font-size: 5vw;
	line-height: 1.3;
}

#profile h2 .ja {
	margin-right: 3vw;
}

#profile h2 ruby {
	margin-left: 3vw;
	font-size: 8vw;
	line-height: 1.1;
}

#profile h2 ruby rt {
	margin-bottom: 1vw;
	font-size: 3.5vw;
}

#profile h2 ruby:first-of-type rt {
	letter-spacing: -1.5em;
}

#profile figure {
	margin-bottom: 8vw;
}

#profile figure img {
	height: 80vw;
}

#profile p {
	margin-top: 1.5em;
	text-align: justify;
}

/* ---------------------------------------------------------
	CSS Document period
--------------------------------------------------------- */

#period {
	margin-bottom: 15vw;
}

#period h2 {
	margin-bottom: 3vw;
	font-weight: 600;
	font-size: 6vw;
	line-height: 1;
	color: var(--pink);
}

#period .day {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 5vw;
	font-weight: 700;
	font-size: 5vw;
	letter-spacing: 0.12em;
	line-height: 1.2;
	color: var(--pink);
}

#period .day span {
	font-weight: 600;
	font-size: 8vw;
	line-height: 1;
}

#period .note {
	margin-bottom: 50px;
	font-weight: 600;
	font-size: 3vw;
}

#period .application {
	margin: 0 8vw 8vw;
	text-align: left;
}

#period dl {
	margin-bottom: 8vw;
}

#period dl:first-of-type:after {
	display: block;
	content: '';
	height: 1px;
	margin-top: 6vw;
	background-image: linear-gradient(90deg, transparent 0%, transparent 80%, var(--black) 80%, var(--black) 100%, transparent);
	background-size: 5px 1px;
}

#period dt {
	display: inline-block;
	vertical-align: top;
	width: 80%;
	margin-bottom: 4vw;
	background: var(--pink);
	text-align: center;
	font-weight: 700;
	line-height: 8vw;
	color: #fff;
}

#period dd span {
	display: inline-block;
	vertical-align: top;
	padding: 0 0.1em;
	background: linear-gradient(to bottom, transparent 9%, rgba(241, 157, 181, 0.7) 9%, rgba(241, 157, 181, 0.7) 86%,  transparent 86%);
}

#period .caution {
	margin-top: 50px;
	font-weight: 600;
	font-size: 3vw;
	color: var(--pink);
}

/* ---------------------------------------------------------
	CSS Document application
--------------------------------------------------------- */

#application {
	padding: 15vw 8vw 10vw;
	background: var(--pink);
	color: #fff;
}

#application .note {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 8vw;
	line-height: 1;
}

#application h2 {
	font-weight: 500;
	font-size: 4vw;
}

#application .section {
	margin-top: 10vw;
}

#application .btn {
	margin-bottom: 3vw;
}

#application .btn a {
	display: block;
	border-radius: 5px;
	background: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 4.5vw;
	line-height: 15vw;
}

#application .btn a:before {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 6vw;
	height: 15vw;
	margin: 0 0.5em 0 -0.5em;
	background: url(../images/application_mail.svg) no-repeat left / 100% auto;
}

#application .fax .btn a {
	background: #fffbc7;
}

#application .fax .btn a:before {
	background-image: url(../images/application_fax.svg);
}

#application .privacy {
	margin-top: 10vw;
	padding: 1.5em 2.5em;
	border: solid 1px #fff;
	font-size: 3vw;
	color: #fff;
}

/* ---------------------------------------------------------
	CSS Document contact
--------------------------------------------------------- */

#contact {
	margin-bottom: 15vw;
	padding: 8vw 0;
	background: #f6f6f6;
	font-weight: 500;
}

#contact h2 {
	margin-right: 20px;
	font-weight: 600;
	font-size: 5vw;
}

#contact .phone {
	margin-top: 3vw;
	line-height: 5vw;
}

#contact .phone a {
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	font-weight: 600;
	font-size: 5vw;
}

#contact .phone a:before {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 5vw;
	height: 5vw;
	margin-right: 10px;
	background: url(../images/contact_ico.svg) no-repeat left / 100% auto;
}

/* ---------------------------------------------------------
	CSS Document access
--------------------------------------------------------- */

#access  {
	margin: 0 8vw 15vw;
}

#access .name {
	font-weight: 600;
	font-size: 4.5vw;
}

#access h2 {
	margin-bottom: 20px;
	text-align: center;
	font-weight: 700;
	font-size: 6vw;
}

#access .row {
	text-align: left;
}

#access .row figure {
	margin-bottom: 30px;
	text-align: center;
}

#access .row figure img {
	height: 26vw;
}

#access .hall {
	font-weight: 600;
}

#access .gmap {
	margin-bottom: 2em;
}

#access .gmap a {
	display: inline-block;
	vertical-align: top;
	text-decoration: underline solid var(--pink) 1px;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.5em;
	font-weight: 600;
}

#access .gmap a:before {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 22px;
	height: 32px;
	margin-right: 0.4em;
	background: url(../images/access_ico.svg) no-repeat left / 100% auto;
}

#access .train {
	margin-bottom: 2em;
}

#access .map {
	height: 56.25013333333333vw;
}
/* ---------------------------------------------------------
	CSS Document sponsor
--------------------------------------------------------- */

#sponsor {
	padding: 8vw 5vw;
	background: #f19db5;
}

#sponsor .section {
	margin: 3vw 0;
	padding: 8vw;
	border-radius: 20px;
	background: #fff;
	text-align: justify;
}

#sponsor figure {
	margin-bottom: 3vw;
	text-align: center;
}

#sponsor figure img {
	height: 14vw;
}

#sponsor h2 {
	margin-bottom: 5vw;
	text-align: center;
	font-weight: 700;
	font-size: 4vw;
	color: #000;
}

#sponsor .jflec h2 {
	color: #007bc7;
}

#sponsor .kinkoui .message {
	margin-bottom: 2em;
}

#sponsor .kinkoui .memo {
	margin-bottom: 2em;
	font-size: 3vw;
}

#sponsor .kinkoui .memo span {
	color: #007bc7;
}

#sponsor .jflec .message p {
	margin-bottom: 1.8em;
}

#sponsor .jflec .message span {
	color: #007bc7;
}

#sponsor .contact {
	font-size: 3vw;
}

#sponsor .contact .name {
	font-weight: 700;
}

/* ---------------------------------------------------------
	CSS Document footer
--------------------------------------------------------- */

#footer {
	padding: 8vw 8vw 4vw;
	background: var(--black);
	font-size: 3vw;
	color: #fff;
}

#footer .container {
	text-align: left;
}

#footer p a {
	color: #fff;
}

#footer .banner {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6vw;
}

#footer .section {
	width: 48%;
}

#footer .banner a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 17vw;
	background: #fff;
}

#footer .kinkoui img {
	height: 8vw;
}

#footer .jflec img {
	height: 10vw;
}

#footer address {
	margin-top: 6vw;
	font-size: 2.5vw;
}

/* ---------------------------------------------------------
	CSS Document pagetop
--------------------------------------------------------- */

#pagetop {
	display: none;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background: var(--pink);
	font-size: 0;
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 9999;
	cursor: pointer;
}

#pagetop:before {
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-left: solid 2px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 13px;
	left: 11px;
}