@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	共通

//////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	変数

------------------------------------------------------------------------------*/

:root {
	--main-color: 244,143,167;
	--sub-color: 64,68,96;
	--green: 169,210,81;
	--cream: 255,250,240;
	--gradient: linear-gradient(90deg, rgba(var(--main-color),1) 0%, rgba(var(--main-color),1) 30%, rgba(var(--green),1) 60%, rgba(var(--green),1) 100%);
}


/*------------------------------------------------------------------------------

	全体

------------------------------------------------------------------------------*/

/*	body
------------------------------------------------------------------------------*/

body {
	background-color: rgba(var(--cream),1);
	background-image: linear-gradient(90deg, rgba(var(--sub-color),.1) 1px,transparent 1px),linear-gradient(rgba(var(--sub-color),.1) 1px,transparent 1px);
	background-position: 10px 10px;
	background-size: 31px 31px;
}


/*	site_column
------------------------------------------------------------------------------*/

.site_column {
	position: relative;
	margin: 0 auto;
	width: 86%;
	max-width: 1200px;
}

#content > header .site_column,
#content > footer .site_column {
	max-width: 1600px;
}

#content #guest_event .site_column,
#content #access .site_column {
	max-width: 1400px;
}


/*	body・textarea・input
------------------------------------------------------------------------------*/

body,
textarea,
input,
select {
	line-height: 1.8;
	font-family: YuGothic,"游ゴシック","メイリオ",Meiryo,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,verdana,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 16px;
	font-weight: 500;
	color: rgba(var(--sub-color),1);
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
}

textarea,
input,
select {
	-webkit-appearance: none;
}

@media screen and (max-width: 1024px) {

body,
textarea,
input  {
	font-size: 14px;
}

}

@media screen and (max-width: 767px) {

body,
textarea,
input {
	font-size: 3.2vw;
}

}


/*	見出し
------------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6 {
	line-height: 1.4;
}

/*	アンカー
------------------------------------------------------------------------------*/

a,
a:hover,
a:visited {
	outline: none;
	text-decoration: none;
	color: rgba(var(--main-color),1);
}

a {
	transition: filter .4s;
}

a:hover {
	text-decoration: none;
	filter: brightness(1.25);
}

main a,
main a:visited {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {

a:hover {
	filter: brightness(1);
}

}

@media screen and (min-width: 768px){
	
a[href^="tel:"] {
	pointer-events: none;
	text-decoration: none;
	color: inherit;
}

a[href^="tel:"]:hover {
	cursor: default;
	opacity: 1;
}

}


/*	リスト
------------------------------------------------------------------------------*/

main ol,
main ul {
	margin: 1em 0 1em 1.5em;
}

main ul {
	list-style: disc;
}

main ol {
	list-style: decimal;
}

main li {
	margin-bottom: .5em;
	line-height: 1.4;
}

#content main table ol,
#content main table ul {
	margin: 0 0 0 1.5em;
	background-color: inherit;
}

#content main table ol li,
#content main table ul li {
	background-color: inherit;
	font-weight: normal;
}


/*	テーブル
------------------------------------------------------------------------------*/

table {
	width: 100%;
}

th,
td {
	line-height: 1.6;
}

th {
	font-weight: bold;
}


/*	その他
------------------------------------------------------------------------------*/

em {
	font-style: normal;
}

figcaption {
	margin-top: .5em;
	text-align: center;
	font-size: .875em;
}

img {
	vertical-align: bottom;
}

address {
	font-style: normal;
}


/*	共通設定
------------------------------------------------------------------------------*/

main p,
main dd {
	margin-bottom: .5em;
	text-align: justify;
}

main li:last-child,
main p:last-of-type,
main dd:last-of-type {
	margin-bottom: 0;
}


/*	独自class
------------------------------------------------------------------------------*/

.note {
	margin-left: 0;
}

.note li {
	display: block;
	position: relative;
	padding-left: 1em;
	font-size: .875em;
}

.note li::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}


/*	closed
------------------------------------------------------------------------------*/

.closed,
.closed a {
	pointer-events: none;
}

.closed figcaption {
	filter: saturate(0%);
}

header .closed figcaption {
	filter: saturate(0%) brightness(2);
}

.button .closed {
	filter: saturate(0%) brightness(1.1);
}


/*------------------------------------------------------------------------------

	date_format

------------------------------------------------------------------------------*/

.date_format span {
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	color: rgba(var(--sub-color),1);
}

.date_format .week {
	vertical-align: .125em;
}

.date_format .week.sat { color: rgba(125,175,226,1);}
.date_format .week.sun { color: rgba(var(--main-color),1);}

.date_format .time {
	display: block;
}

main .date_format,
main #guest_event .place {
	padding-left: 5em;
	background-repeat: no-repeat;
	background-position: left center;
}

main .date_format {
	background-image: url(../img/icon_schedule_bk.svg);
}

main .date_format .month,
main .date_format .day { font-size: 2em;}
main .date_format .week { font-size: 1.125em;}
main .date_format .time { font-size: 1.563em;}

main .date_format .time .sub {
	display: inline;
	font-weight: 500;
	font-size: .65em;
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {

main .date_format,
main #guest_event .place {
	padding-left: 10vw;
}

main .date_format .month,
main .date_format .day { font-size: 5vw;}
main .date_format .week { font-size: 3vw;}
main .date_format .time { font-size: 4vw;}
main .date_format .time .sub { font-size: 2.5vw;}

}


/*------------------------------------------------------------------------------

	header

------------------------------------------------------------------------------*/

#content > header {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	background-color: rgba(var(--cream),1);
}

#content > header .logo_menu {
	padding: 60px 0;
}

#content > header .logo_menu .site_column {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#content > header .logo_menu .logo {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 320/67;
}

#content > header .logo_menu .logo a {
	display: block;
}

#content > header .logo_menu .gnav {
	flex: 1;
}

#content > header .logo_menu .gnav ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#content > header .logo_menu .gnav ul li {
	width: 15em;
	margin-right: 1.7em;
}

#content > header .logo_menu .gnav ul li a {
	display: block;
	padding:  .85em .5em;
	border: 2px solid rgba(var(--main-color),1);
	border-radius: 10em;
	background-color: rgba(var(--cream),1);
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	text-align: center;
	font-size: 1.375em;
}

#content > header .logo_menu .gnav ul .contact a {
	background-color: rgba(var(--main-color),1);
	color: #FFF;;
}

@media screen and (max-width: 1400px) {

#content > header .logo_menu .gnav ul li {
	width: 12em;
	margin-right: 1.25em;
}

}

@media screen and (max-width: 1200px) {

#content > header .logo_menu {
	padding: 40px 0;
}

#content > header .logo_menu .logo {
	max-width: 220px;
}

#content > header .logo_menu .gnav ul li {
	width: 10em;
	margin-right: 1em;
}

#content > header .logo_menu .gnav ul li a {
	font-size: 1em;
}

}

@media screen and (max-width: 1024px) {

#content > header .logo_menu .logo {
	max-width: 200px;
}

#content > header .logo_menu .gnav ul li {
	width: 9.5em;
	margin-right: .5em;
}

}

@media screen and (max-width: 767px) {

#content > header .logo_menu {
	padding: 7vw 0;
}

#content > header .logo_menu .logo {
	max-width: 41vw;
	margin: 0 auto;
}

#content > header .logo_menu .gnav {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 100;
}

#content > header .logo_menu .gnav ul li {
	width: calc(100%/3);
	margin-right: 0;
}

#content > header .logo_menu .gnav ul li a {
	padding:  7vw 1vw;
	border-left: none;
	border-radius: 0;
	font-size: 4vw;
}

#content > header .logo_menu .gnav ul .contact a {
	border-right: none;
}

}


/*------------------------------------------------------------------------------

	title

------------------------------------------------------------------------------*/

#content > header .title .site_column {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 50px;
}

@media screen and (max-width: 1200px) {

	#content > header .title .site_column {
	margin-top: 30px;
}

}

@media screen and (max-width: 767px) {

#content > header .title .site_column {
	flex-direction: column-reverse;
	margin-top: 0;
}

#content > header .title .site_column .group {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 16vw;
}

}


/*	fes_name
------------------------------------------------------------------------------*/

#content > header .title .fes_name {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 5em;
	padding-left: 7.5em;
}

#content > header .title .fes_name h1,
#content > header .title .fes_name p {
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	white-space: nowrap;
}

#content > header .title .fes_name h1 {
	order: 3;
	margin-top: .125em;
	letter-spacing: .1em;
	font-size: 9.75em;
	color: rgba(var(--main-color),1);
}

#content > header .title .fes_name .rin {
	order: 2;
	margin-top: .35em;
	font-size: 5.625em;
	color: rgba(var(--green),1);
}

#content > header .title .fes_name .rin .num {
	color: rgba(var(--main-color),1);
}

#content > header .title .fes_name .organizer,
#content > header .title .fes_name .nendo {
	color: rgba(var(--sub-color),1);
}

#content > header .title .fes_name .organizer {
	order: 1;
	font-size: 5.125em;
}

#content > header .title .fes_name .nendo {
	position: absolute;
	top: 0;
	left: 0;
	padding:  2em .5em;
	border: 3px solid rgba(var(--sub-color),1);
	border-radius: 10em;
	writing-mode: vertical-rl;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-size: 2.625em;
}

#content > header .title .fes_name .nendo .num {
	text-combine-upright: all;
	-webkit-text-combine: horizontal;
}

@media screen and (max-width: 1400px) {

#content > header .title .fes_name {
	margin-top: 3em;
	padding-left: 5em;
}

#content > header .title .fes_name h1 { font-size: 7.75em;}
#content > header .title .fes_name .rin { font-size: 3.625em;}
#content > header .title .fes_name .organizer { font-size: 3.125em;}
#content > header .title .fes_name .nendo {
	padding-top: 2.75em;
	padding-bottom: 2.75em;
	font-size: 1.625em;
}

}

@media screen and (max-width: 1024px) {

#content > header .title .fes_name {
	margin-top: 2em;
}

#content > header .title .fes_name h1 { font-size: 6.25em;}
#content > header .title .fes_name .rin { font-size: 2.625em;}
#content > header .title .fes_name .organizer { font-size: 2.125em;}
#content > header .title .fes_name .nendo {
	padding-top: 1.75em;
	padding-bottom: 1.75em;
	font-size: 1.5em;
}

}

@media screen and (max-width: 900px) {

#content > header .title .fes_name {
	padding-left: 4em;
}

#content > header .title .fes_name h1 { font-size: 5.25em;}
#content > header .title .fes_name .rin { font-size: 2.125em;}
#content > header .title .fes_name .organizer { font-size: 1.625em;}
#content > header .title .fes_name .nendo {
	font-size: 1.25em;
}

}

@media screen and (max-width: 767px) {

#content > header .title .fes_name {
	margin: 0 2.5vw 0 0;
	padding: 0 2.5vw 0 9vw;
	border-right: 2px dotted rgba(var(--main-color),1);
}

#content > header .title .fes_name h1 { font-size: 8vw;}
#content > header .title .fes_name .rin { font-size: 6vw;}
#content > header .title .fes_name .organizer { font-size: 4vw;}
#content > header .title .fes_name .nendo {
	padding-top: 3.25vw;
	padding-bottom: 3.25vw;
	border-width: 2px;
	font-size: 3vw;
}

}


/*	date_format
------------------------------------------------------------------------------*/

#content > header .title .date_format {
	margin-top: 3em;
	padding: 3em 0 0 1em;
	border-top: 4px dotted rgba(var(--main-color),1);
}

#content > header .title .date_format .year {
	display: block;
	margin-bottom: -.25em;
	font-size: 2.375em;
}

#content > header .title .date_format .month { font-size: 4.5em;}
#content > header .title .date_format .day { font-size: 5.875em;}
#content > header .title .date_format .week { font-size: 2.25em;}
#content > header .title .date_format .time {
	margin-top: .5em;
	font-size: 3.125em;
}

@media screen and (max-width: 1400px) {

#content > header .title .date_format {
	margin-top: 2em;
	padding-top: 2em;
}

#content > header .title .date_format .year {
	margin-bottom: -.75em;
	font-size: 1.375em;
}

#content > header .title .date_format .month { font-size: 3.5em;}
#content > header .title .date_format .day { font-size: 4.875em;}
#content > header .title .date_format .week { font-size: 1.25em;}

#content > header .title .date_format .time {
	margin-top: .25em;
	font-size: 2.125em;
}

}

@media screen and (max-width: 1024px) {

#content > header .title .date_format .year {
	margin-bottom: -.5em;
	font-size: 1.875em;
}

#content > header .title .date_format .month { font-size: 3em;}
#content > header .title .date_format .day { font-size: 4.375em;}
#content > header .title .date_format .time {
	margin-top: .5em;
	font-size: 1.625em;
}

}

@media screen and (max-width: 900px) {

#content > header .title .date_format .year {
	font-size: 1.375em;
}

#content > header .title .date_format .day { font-size: 4em;}

}

@media screen and (max-width: 767px) {

#content > header .title .date_format {
	margin: 0;
	padding: 0;
	border-top: none;
}

#content > header .title .date_format .year {
	margin-bottom: 0;
	font-size: 3vw;
}

#content > header .title .date_format .month { font-size: 4.5vw;}
#content > header .title .date_format .day { font-size: 6.5vw;}
#content > header .title .date_format .week { font-size: 3vw;}

#content > header .title .date_format .time {
	margin-top: .5vw;
	font-size: 4vw;
}

}


/*	main_image
------------------------------------------------------------------------------*/

#content > header .title .main_image {
	width: 35.6%;
	margin-right: 7em;
}

#content > header .title .main_image figcaption {
	padding: 1.25em 1.5em;
	font-weight: 900;
	font-size: 1.625em;
}

@media screen and (max-width: 1400px) {

#content > header .title .main_image {
	margin-right: 4em;
}

#content > header .title .main_image figcaption {
	font-size: 1.25em;
}

}

@media screen and (max-width: 1024px) {

#content > header .title .main_image {
	margin-right: 2.5em;
}

#content > header .title .main_image figcaption {
	font-size: 1em;
}

}

@media screen and (max-width: 767px) {

#content > header .title .main_image {
	width: 68%;
	margin: 0 auto;
}

#content > header .title .main_image figcaption {
	font-size: 3.5vw;
}

}


/*------------------------------------------------------------------------------

	figcaption

------------------------------------------------------------------------------*/

a figure {
	position: relative;
}

a figure figcaption,
.button a {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 50%;
	margin-top: 0;
	padding: 1em 3em;
	background-color: rgba(var(--sub-color),1);
	border-radius: 10em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	white-space: nowrap;
}

.button a {
	font-weight: 900;
	text-decoration: none;
}


main #program figcaption,
main #access .group .button a {
	padding-right: 2em;
	padding-left: 2em;
	background-color: rgba(var(--main-color),1);
	border: 1px solid #FFF;
	font-size: 1.125em;
	color: #FFF;
}

main #program figcaption::before,
main #access .group .button a::before {
	content: "";
	display: inline-block;
	width: .85em;
	aspect-ratio: 1/1;
	margin-right: .25em;
	background-image: url(../img/icon_arrow_wh.svg);
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: -.125em;
}


/*------------------------------------------------------------------------------

	footer

------------------------------------------------------------------------------*/

#content > footer {
	background-color: rgba(var(--cream),1);
}

#content > footer a {
	display: block;
}

#content > footer #contact {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 65px;
}

#content > footer #contact h2,
#content > footer #contact p,
#content > footer #copy {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
}

#content > footer #contact h2 {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 3.125em;
	font-weight: 900;
	line-height: 1;
	color: rgba(var(--main-color),1);
}

#content > footer #contact p {
	font-weight: 500;
	line-height: 1.4;
	font-size: 1.25em;
}

#content > footer #contact .group {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	align-items: center;
}

#content > footer #contact .group .sns {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-right: 2.5em;
}

#content > footer #contact .group .sns li {
	width: 3.625em;
	margin-right: .875em;
}

#content > footer #contact .group .sns li:last-child {
	margin-right: 0;
}

#content > footer #contact .banner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
}

#content > footer #contact .banner li {
	width: 340px;
	margin-left: 2.125em;
}

#content > footer #contact .banner li:first-child {
	margin-left: 0;
}

#content > footer #contact .banner li a {
	display: block;
}

#content > footer #copy {
	padding: 50px 0 35px;
	font-weight: 500;
	text-align: center;
}

@media screen and (max-width: 1600px) {

#content > footer #contact .banner li {
	width: 270px;
}

}

@media screen and (max-width: 1400px) {

#content > footer #contact .banner li {
	width: 200px;
	margin-left: 1.5em;
}

#content > footer #contact .group .sns {
	margin-right: 1.5em;
}

#content > footer #contact p {
	font-size: 1em;
}

}

@media screen and (max-width: 1100px) {

#content > footer #contact {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

#content > footer #contact h2 {
	display: block;
	text-align: center;
}

#content > footer #contact .banner {
	margin-top: 2em;
}

#content > footer #contact .banner li {
	width: 250px;
}

}

@media screen and (max-width: 1024px) {

#content > footer #contact {
	padding-top: 50px;
}

}

@media screen and (max-width: 767px) {

#content > footer #contact {
	padding-top: 10vw;
}

#content > footer #contact p {
	font-size: 2.5vw;
}

#content > footer #contact .banner li {
	width: 40vw;
	margin-left: 3vw;
}

#content > footer #copy {
	padding: 10vw 0 25vw;
}

}


/*	 page_top
------------------------------------------------------------------------------*/

#page_top {
	position: fixed;
	right: 3vw;
	bottom: 3vw;
	z-index: 1000;
	width: 10vw;
	max-width: 60px;
	aspect-ratio: 1/1;
	transition: opacity .6s;
	background-color: #FFF;
	opacity: 0;
}

.moved #page_top {
	opacity: .7;
}

#page_top a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(51,51,51,1);
	text-decoration: none;
	cursor: default;
}

.moved #page_top a {
	cursor: pointer;
	opacity: 1;
}

#page_top a::after {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-50%)  rotate(45deg);
	content: "";
	display: block;
	width: 30%;
	height: 30%;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

@media screen and (max-width: 767px) {

#page_top {
	right: 3vw;
	bottom: 25vw;
}

}
