@charset "utf-8";
/* # =================================================================
#### table
# ================================================================= */
table{
	border-collapse : collapse;
	width : 100%;
}
table,
th,
td{
	border : 1px solid var(--font-color);
	padding : 10px;
	text-align : center;
}
/* # =================================================================
#### common
# ================================================================= */
img{
	display : block;
}
a{
	transition : 0.5s;
}
a:hover{
	transition : 0.5s;
}
ol li,
ul li{
	list-style : none;
}
.slick-slide:focus{
	outline : none;
}
/* # =================================================================
#### common
# ================================================================= */
.section{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 0 15px 0;
}
/* # =================================================================
#### header
# ================================================================= */
header{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 30px 15px 0;
	background : url(../images/backimg.jpg)no-repeat;
	background-size : cover;
}
/** logo **/
header .logo{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
header .logo img{
	position : relative;
	display : block;
	width : clamp(75px,8vw,112px);
	height : auto;
	margin : 0 auto;
}
header .logo p:nth-child(2){
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : var(--key-color);
	font-size : clamp(16px,5vw,50px);
	font-weight : 600;
	font-family : Arial;
	text-align : center;
	margin-bottom : 15px;
}
header .logo p:nth-child(2) span{
	font-size : clamp(14px,3vw,30px);
}
header .logo p:last-child{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
}
header .logo p:last-child span{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	color : var(--key-color);
	font-size : clamp(14px,3vw,30px);
	font-weight : 600;
	border-top : 1px solid var(--key-color);
	border-bottom : 1px solid var(--key-color);
	line-height : 1;
	padding : 5px 0;
}
/** h1 **/
header h1{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--font-color);
	font-size : clamp(20px,9vw,130px);
	font-weight : 700;
	text-shadow : 3px 3px 6px #00000029;
	margin-bottom : 30px;
}
header h1 span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : clamp(16px,3.5vw,60px);
	font-weight : 600;
	text-shadow : none;
}
header p.sub_headline{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
}
header p.sub_headline span{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	background-color : var(--key-color);
	color : #FFF;
	font-size : clamp(16px,3.5vw,60px);
	font-weight : 600;
	line-height : 1;
	padding : 10px;
}
/** data **/
header .data{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-top : 30px;
	margin-bottom : 30px;
}
header .data img{
	position : relative;
	display : block;
	width : clamp(18px,40vw,683px);
	height : auto;
	margin : 0 auto;
}
header .data h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : clamp(18px,7vw,120px);
	font-weight : 700;
	font-style : italic;
	font-family : Arial;
}
header .data h2 span{
	font-size : clamp(16px,3.3vw,50px);
	font-style : normal;
}
header .data h2 span.venue{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : clamp(16px,3.5vw,60px);
	font-weight : 700;
	font-style : normal;
}
/** schedule **/
header .schedule{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
header .schedule p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	margin-bottom : 15px;
}
header .schedule p span{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	border : 1px solid var(--font-color);
	border-radius : 5px;
	background-color : #FFF;
	text-align : center;
	line-height : 1;
	font-size : var(--26px);
	font-weight : 600;
	padding : 10px 30px;
}
header .schedule p span span{
	border : none;
	padding : 0;
}
header .schedule p span span:first-child{
	font-weight : normal;
	margin-right : 25px;
}
header .schedule p span span:last-child{

}
header .schedule p.supplement{
	border : none;
	line-height : 1.2;
	font-size : var(--26px);
	font-weight : 600;
	margin-bottom : 0;
}
/* # =================================================================
#### footer
# ================================================================= */
footer{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #FFF2D1;
	padding : 0 15px 50px;
}
footer .wrap{
	position : relative;
	display : block;
	width : 1024px;
	height : auto;
	margin : 0 auto;
}
.footer_info{
	position : relative;
	display : block;
	width : 100%;
	max-width : 27em;
	margin : 0 0 0 auto;
}
.footer_info:first-child{
	margin-bottom : 25px;
}
.footer_info h2{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	line-height : 1;
	border : 1px solid var(--font-color);
	font-size : var(--16px);
	font-weight : normal;
	padding : 3px 7px;
	margin-bottom : 5px;
}
.footer_info p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 5px;
}
.footer_info p:last-child{
	margin-bottom : 0;
}
/* # =================================================================
#### section01
# ================================================================= */
.section01{
	margin-top : -10px;
}
.section01 picture{
	position : relative;
	display : block;
	width : 1024px;
	height : auto;
	margin : 0 auto 30px;
}
.section01 picture img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.section01 p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--key-color);
	font-size : 34px;
	font-weight : 600;
}
/* # =================================================================
#### section02
# ================================================================= */
.section02{
	padding-bottom : 65px
}
/*** present ***/
.section02 .present{
	position : relative;
	display : block;
	width : 680px;
	height : auto;
	margin : 0 auto 30px;
}
.section02 .present img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/*** gift ***/
.section02 .gift{
	position : relative;
	display : block;
	width : 650px;
	height : auto;
	margin : 0 auto 30px;
}
.section02 .gift img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/*** container ***/
.section02 .container{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.section02 .container:last-child{
	margin-bottom : 0;
}
.section02 .container h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--26px);
	margin-bottom : 50px;
}
.section02 .container h3 span{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
}
.section02 .container h3 span:after{
	content : "";
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : auto;
	bottom : -14px;
	left : -8px;
	right : 0;
	margin : auto;
	width : 100%;
	height : 11px;
	background : url(../images/under_line.png)no-repeat;
	background-size : cover;
}
.section02 .container:nth-child(2) h3{
	margin-bottom : 55px;
}
.section02 .container:nth-child(2) h3 span::before{
	content : "※1";
	position : absolute;
	bottom : -38px;
	right : 8px;
	font-size : var(--16px);
}
.section02 .container ul{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 870px;
	height : auto;
	margin : 0 auto;
}
.section02 .container ul li{
	position : relative;
	display : block;
	width : 30%;
	height : auto;
}
.section02 .container ul li img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/** 事前アンケート **/
.section02 .container p.link{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--key-color);
	font-size : var(--18px);
	font-weight : 600;
	margin-bottom : 15px;
}
.section02 .container p.button{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
}
.section02 .container a{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	line-height : 1;
	border : 1px solid var(--key-color);
	border-radius : 30px;
	background-color : var(--key-color);
	color : #FFF;
	font-size : var(--20px);
	font-weight : 500;
	padding : 20px 80px;
}
.section02 .container a:hover{
	background-color : #FFF;
	color : var(--key-color);
}
/* # =================================================================
#### csv list
# ================================================================= */
/* チェックボックスを非表示にする */
.accordion-toggle{
	display : none;
}
/* ul（アコーディオンの内容）をデフォルトで非表示にする */
.list-section ul {
	display : none;
}
/* チェックボックスがチェックされたら、隣接する ul を表示する */
.accordion-toggle:checked + label + ul{
	display : block;
}
/* その他のスタイリング */
.list-section{
	margin-bottom : 15px;
}
.list-section h3{
	margin : 0;
	color : darkblue;
}
.list-section ul li{
	margin-bottom : 10px;
}
.list-section:last-child{
	margin-bottom : 0;
}
.list-section ul li:last-child{
	margin-bottom : 0;
}
.list-section a {
	display : block;
	margin-left : 1em;
	color : var(--font-color);
	font-size : var(--14px);
	text-decoration : none;
}
.list-section a:hover {
	text-decoration : underline;
	color : blue;
}
/* # =================================================================
#### section03
# ================================================================= */
.section03{
	background-color : #FFF2D1;
	padding : 65px 15px 50px;
}
.section03 .wrap:after{
	content : "";
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : -35px;
	bottom : auto;
	left : auto;
	right : -120px;
	margin : auto;
	width : 197.22px;
	height : 287.48px;
	background : url(../images/image_04.png)no-repeat;
	background-size : cover;
}
.section03 .wrap{
	position : relative;
	display : block;
	width : 1024px;
	height : auto;
	border-radius : 10px;
	background-color : #FFF;
	padding : 30px;
	margin : 0 auto;
}
.section03 h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 5px;
	background-color : var(--key-color);
	text-align : center;
	line-height : 1;
	color : #FFF;
	font-size : var(--24px);
	font-weight : 500;
	padding : 15px 0;
	margin-bottom : 50px;
}
.section03 .flex{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.section03 .flex .output_location{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
#output01{
	padding-right : 25px;
}
#output02{
	padding-left : 25px;
}
.section03 .flex .output_location:first-child::after{
	content : "";
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : 0;
	bottom : 0;
	left : auto;
	right : -3px;
	margin : auto;
	background : url(../images/dot_pattern.png)repeat-y;
	background-size : contain;
	width : 4px;
	height : 100%;
}
.section03 .flex .output_location h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--key-color);
	font-size : var(--18px);
	font-weight : 500;
	margin-bottom : 25px;
}
.section03 .flex .output_location h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #FCDF90;
	line-height : 1;
	font-size : var(--14px);
	font-weight : normal;
	padding : 15px 10px;
	margin-bottom : 15px;
}
/* ul（アコーディオンの内容）をPCで表示にする */
.list-section ul {
	display : block;
}
/* # =================================================================
#### ポップアップ
# ================================================================= */
/* 半透明の背景 */
#overlay{
	display : none;
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : rgba(0,0,0,0.5); /* 半透明 */
	z-index : 9998;
}

/* ポップアップ本体 */
#popup{
	display : none;
	position : fixed;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	background : #fff;
	border-radius : 8px;
	padding : 20px;
	z-index : 9999;
	list-style : none;
	text-align : center;
	width : 100%;
	max-width : 25%;
	height : auto;
}
#popup li{
	display : none;
	margin : 10px 0;
}
#popup li img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* 閉じるボタン */
.close-btn{
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : auto;
	bottom : 10px;
	left : auto;
	right : 10px;
	margin : auto;
	cursor : pointer;
	z-index : 1;
	width : 20%;
}
.close-btn img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}






/* # =================================================================
#### 1366
# ================================================================= */
@media screen and (max-width: 1366px){
/* # =================================================================
#### header
# ================================================================= */
header{
	background-size : contain;
}
/* # =================================================================
#### section03
# ================================================================= */
.section03 .wrap:after{
	top : -35px;
	right : 0;
	width : calc(197.22px / 1.5);
	height : calc(287.48px / 1.5);
}
/* # =================================================================
#### ポップアップ
# ================================================================= */
#popup{
	max-width : 40%;
}





























}/* 1366 */
/* # =================================================================
#### 1024
# ================================================================= */
@media screen and (max-width: 1024px){
/* # =================================================================
#### footer
# ================================================================= */
footer .wrap{
	width : 100%;
}
/* # =================================================================
#### section01
# ================================================================= */
.section01 picture{
	width : 100%;
}


/* # =================================================================
#### section03
# ================================================================= */
.section03 .wrap{
	width : 100%;
}




















}/* 1024 */
/* # =================================================================
#### 896
# ================================================================= */
@media screen and (max-width: 896px){
/* # =================================================================
#### header
# ================================================================= */
header{
	background : url(../images/sp_backimg.jpg)no-repeat;
	background-size : contain;
}


/* # =================================================================
#### footer
# ================================================================= */
.footer_info{
	max-width : 100%;
	margin : 0;
}
/* # =================================================================
#### section02
# ================================================================= */
.section02 .present{
	width : 80%;
}
.section02 .container ul{
	width : 100%;
}
.section02 .gift{
	width : 80%;
}
/* # =================================================================
#### section03
# ================================================================= */
.section03 .wrap{
	padding-bottom : 15px;
}
.section03 h2{
	margin-bottom : 30px;
}
.section03 .flex .output_location h4{
	cursor : pointer;
	line-height : 1.5;
}
.list-section ul {
	display : none;
}
.section03 .flex .output_location{
	width : 100%;
}
.section03 .flex .output_location:first-child{
	margin-bottom: 20px;
}
.section03 .flex .output_location:first-child::after{
	content : none;
}
#output01{
	padding-right : 0;
}
#output02{
	padding-left : 0;
}
/**  **/
.section03 .flex .output_location h4:after {
	content : "";
	background : var(--font-color);
	height : calc(tan(60deg) * 12px / 2);
	width : 12px;
	clip-path : polygon(0 0, 100% 0, 50% 100%);
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : 0;
	bottom : 0;
	left : auto;
	right : 10px;
	margin : auto;
	transition : 0.8s;
}
.section03 .flex .output_location .accordion-toggle:checked + label h4:after{
	transform : rotate(180deg);
}

}/* 896 */
/* # =================================================================
#### 600
# ================================================================= */
@media screen and (max-width: 600px){
/* # =================================================================
#### common
# ================================================================= */

/* # =================================================================
#### footer
# ================================================================= */
footer{
	padding : 0 15px 30px;
}
.footer_info:first-child{
	margin-bottom : 10px;
}
/* # =================================================================
#### section01
# ================================================================= */
.section01{
	margin-top : 20px;
}
/* # =================================================================
#### section02
# ================================================================= */


/** 事前アンケート **/
.section02 .container a{
	font-size : var(--18px);
	padding : 15px 35px;
}
/* # =================================================================
#### csv list
# ================================================================= */
.accordion-toggle:checked + label + ul{
	margin-bottom : 15px;
}
/* # =================================================================
#### section03
# ================================================================= */
.section03 .wrap{
	padding : 15px 15px 0;
}
.section03 h2{
	margin-bottom : 20px;
}
.section03 .flex .output_location:first-child{
	margin-bottom : 10px;
}
.section03 .flex .output_location h3{
	margin-bottom : 15px;
}
.section03 .flex .output_location h4{
	padding : 10px 25px 10px 10px;
}
/***  ***/
.section03 .wrap:after{
	top : -45px;
	right : 0;
	width : calc(197.22px / 2.2);
	height : calc(287.48px / 2.2);
}
/* # =================================================================
#### ポップアップ
# ================================================================= */
#popup{
	max-width : 85%;
}



}/* 600 */
/* # =================================================================
#### 480
# ================================================================= */
@media screen and (max-width: 480px){
/* # =================================================================
#### header
# ================================================================= */
header{
	padding : 25px 15px 0;
}
header .logo{
	margin-bottom : 20px;
}
header .logo img{
	width : 47px;
}
header .logo p:nth-child(2){
	font-size : var(--23px);
	margin-bottom : 5px;
}
header .logo p:nth-child(2) span{
	font-size : var(--16px);
}
header .logo p:last-child span{
	font-size : var(--16px);
}
header h1{
	font-size : 33px;
	margin-bottom : 10px;
}
header h1 span{
	margin-top : 25px;
}
header p.sub_headline span{
	font-size : var(--16px);
	padding : 5px 10px;
}
header .data h2{
	font-size : 42px;
}
header .data h2 span{
	font-size : var(--18px);
}
header .data h2 span.venue{
	font-size : 20px;
}
header .data img{
	width : 100%;
	margin-top : 10px;
}
header .schedule p span{
	font-size : var(--16px);
	padding : 10px;
}
header .schedule p span span:first-child{
	margin-right : 15px;
}
header .schedule p span{
	display : block;
	width : 100%;
}
header .schedule p span span{
	display : inline-block;
	width : auto;
}
header .schedule p.supplement{
	font-size : var(--16px);
}
/* # =================================================================
#### section01
# ================================================================= */
.section01 p{
	font-size : var(--16px);
}
.section01 picture{
	margin-bottom : 15px;
}
/* # =================================================================
#### section02
# ================================================================= */
.section02 .container{
	margin-bottom : 20px;
}
.section02 .present{
	width : 100%;
}
.section02 .container h3{
	font-size : var(--18px);
	margin-bottom : 35px;
}
.section02 .container:nth-child(2) h3{
	margin-bottom : 40px;
}
.section02 .container ul{
	display : block;
}
.section02 .container ul li{
	width : 80%;
	margin : 0 auto 20px;
}
.section02 .container ul li:last-child{
	margin-bottom : 0;
}
.section02 .gift{
	width : 100%;
	margin-bottom : 0;
}
.section02 .container p.link{
	font-size : var(--16px);
}





}/* 480 */
/* # =================================================================
#### 320
# ================================================================= */
@media screen and (max-width: 320px){
/* # =================================================================
#### header
# ================================================================= */
header .schedule p span span:first-child{
	margin-right : 0;
}
header .schedule p.supplement{
	font-size : var(--14px);
}
}/* 320 */