@charset "UTF-8";
/*-------------------------
__common
-------------------------*/
:root{
	  --blue: #061c32;
    --gold: #c2944b;
    --bg: #f5f4f1;
    --bg2: #fafafa;
}
strong,dt,h1,h2,h3,h4,h5,h6,th{font-size:10px;}
#content{font-family:"Noto Serif JP", serif; font-weight: 500!important;}
.free{padding:120px 0 0;}
#content .topic_path {width:1020px;margin:0 auto;text-align:left;padding:10px 10px 0;box-sizing:border-box;clear:both;}
#content .topic_path ul {font-size:14px;line-height:25px;}
#content .topic_path li {vertical-align:top;display:inline-block;*display:inline;*zoom:1;}
#content .topic_path li a {color:#D5AE3C;text-decoration:underline;}
#content .topic_path li::after {content:">";margin:0 5px;}
#content .topic_path li:last-child::after {content:"";}
#content img{ width: 100%; height: auto; vertical-align: top;}
.flex{ display: flex; justify-content: center;}
.sec_ttl{ font-size: 24px; color: var(--blue); margin-bottom: 40px; position: relative;}
.sec_ttl::before{ content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--gold);}
.sec_txt{ font-size: 16px; margin-bottom: 40px; line-height: 1.6;}
.list_ttl{ font-size: 16px; color: var(--blue); margin-bottom: 10px;}
.s_txt{ font-size: 12px; line-height: 1.6;}
#content .inner{ padding: 40px; box-sizing: border-box; max-width: 1340px; margin: 0 auto; min-width: 1020px;}
#content .btn_wrap{ max-width: 320px; align-items: center; width: 100%;}
#content .btn_wrap a{ display: block; box-sizing: border-box; color: #fff; text-decoration: none; text-align: center;}
#content .btn_wrap .gold_btn,
#content .btn_wrap .blue_btn{ font-size: 16px; margin-bottom: 10px; padding: 15px 30px; align-items: center; gap: 1rem; border-radius: 5px; transition: .3s;}
#content .btn_wrap .gold_btn{ margin-bottom: 10px; background: var(--gold);}
#content .btn_wrap .blue_btn{ background: var(--blue); border: 1px solid var(--gold);}
@media screen and (min-width: 768px){
    #content .topic_path li a:hover{text-decoration:none;opacity:0.7;}
    #content .btn_wrap a:hover .gold_btn{ filter: brightness(1.1);}
    #content .btn_wrap a:hover .blue_btn{ filter: brightness(1.4);}
}
@media screen and (min-width: 375px){
	.sp374_on{ display: none;}
}
@media screen and (max-width: 767px){
	.free{padding:70px 0 0;}
	#content .topic_path {width:100%;padding:10px 20px 0;}
	.sec_ttl{ font-size: 20px; line-height: 1.4;}
	.sec_ttl::before{ width: 30px; height: 2px;}
	.sec_txt{ font-size: 14px; margin-bottom: 20px;}
	.list_ttl{ font-size: 14px;}
    #content .inner{ padding: 40px 20px; min-width: auto;}
    #content .btn_wrap{ max-width: 220px;}
    #content .btn_wrap .gold_btn,
    #content .btn_wrap .blue_btn{ font-size: 12px; padding: 10px; gap: 10px;}
}

/*-------------------------
__mv
-------------------------*/
.mv{ position: relative;}
#content .mv img{ object-fit: cover; height: 100%;}
.mv::after{ position: absolute; content: ""; width: 50%; height: 100%; background: linear-gradient(90deg, rgba(6, 28, 50, 0.6), rgba(6, 28, 50, 0)); top: 0; left: 0;} 
.mv .mv_inner{ width: 100%; height: auto; position: relative; aspect-ratio: 7 / 4; overflow: hidden; min-width: 1020px;}
.mv .mv_inner .txt_wrap{ position: absolute; top: 50%; left: 10%; transform: translateY(-50%); text-align: left; color: #fff; z-index: 1;}
.mv .mv_inner .txt_wrap > .en{ font-size: 18px; border: 1px solid var(--gold); padding: 10px 20px; color: var(--gold); display: inline-block;}
.mv .mv_inner .txt_wrap .main_ttl{ font-size: 1.9vw; line-height: 1.4; margin-bottom: 20px; font-weight: 500;}
.mv .mv_inner .txt_wrap .main_ttl span{ font-size: 6vw;}
.mv .mv_inner .txt_wrap .main_txt{ font-size: 18px; line-height: 1.6; margin-bottom: 30px;}
@media screen and (max-width: 767px){
	.mv .mv_inner{ min-width: auto;}
	.mv .mv_inner .txt_wrap{ left: 20px;}
	.mv .mv_inner .txt_wrap > .en{ font-size: 14px;}
	.mv .mv_inner .txt_wrap .main_ttl{ font-size: 18px; margin-bottom: 10px;}
	.mv .mv_inner .txt_wrap .main_ttl span{ font-size: 32px;}
	.mv .mv_inner .txt_wrap .main_txt{ font-size: 14px; margin-bottom: 20px;}
}
@media screen and (max-width: 599px){
	.mv .mv_inner{ height: 360px; position: relative;}
	#content .mv .mv_inner > img{ height: 100%; width: auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
}
@media screen and (max-width: 374px){
	.mv .mv_inner .txt_wrap .main_ttl{ font-size: 16px;}
}
/*-------------------------
__detail
-------------------------*/
#detail .inner .detail_list{ padding: 30px 10px 30px 0; box-sizing: border-box; background: var(--bg); border: 2px solid #f4f2ed; border-radius: 5px;}
#detail .inner .detail_list.flex{ align-items: center; gap: 20px;}
#detail .inner .detail_list li.flex{ gap: 10px; padding-left: 20px; box-sizing: border-box; flex: 1;}
#detail .inner .detail_list li + li{ border-left: 1px solid var(--gold);}
#detail .inner .detail_list li .icon{ border: 1px solid var(--gold); border-radius: 50%; width: 90px; height: 90px;}
#detail .inner .detail_list li .txt{ text-align: left; width: calc(100% - 110px);}
@media screen and (max-width: 767px){
	#detail .inner .detail_list{ padding: 20px 10px;}
	#detail .inner .detail_list.flex{ flex-wrap: wrap; justify-content: flex-start;}
	#detail .inner .detail_list li.flex{ gap: 10px; padding-left: 0; width: 100%; flex: auto;}
	#detail .inner .detail_list li + li{ border-left: none; border-top: 1px solid var(--gold); padding-top: 20px;}
	#detail .inner .detail_list li .icon{ width: 60px; height: 60px;}
	#detail .inner .detail_list li .txt{ text-align: left; width: calc(100% - 70px);}
}
/*-------------------------
__recommend
-------------------------*/
#recommend{}
#recommend .inner{}
#recommend .inner .sec_ttl{}
#recommend .inner .rec_list{ gap: 20px; text-align: left;}
#recommend .inner .rec_list li{ padding: 20px; box-sizing: border-box; background: var(--bg2); border: 2px solid #eee;}
#recommend .inner .rec_list li .list_ttl{ padding-left: 30px; margin-bottom: 20px; position: relative;}
#recommend .inner .rec_list li .list_ttl::before{ content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 10px; background: var(--gold);}
#recommend .inner .rec_list li .list_ttl::after{ content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);}
#recommend .inner .rec_list li .s_txt{}
@media screen and (max-width: 767px){
	#recommend .inner .rec_list{ flex-wrap: wrap;}
	#recommend .inner .rec_list li{ padding: 14px; width: 100%;}
}
/*-------------------------
__schedule
-------------------------*/
#schedule{ background: var(--bg); min-width: 1020px;}
#schedule .inner{ max-width: 900px; position: relative;}
#schedule .inner::before{ content: ""; position: absolute; width: 64%; height: 2px; background: repeating-linear-gradient(to right, var(--blue) 0 4px, transparent 4px 8px); left: 50%; top: 47%; transform: translate(-50%, -50%);}
#schedule .inner .sec_ttl2{ font-size: 21px; color: var(--blue); margin-bottom: 20px;}
#schedule .inner .sch_list{ justify-content: space-between; position: relative;}
#schedule .inner .sch_list li.flex{ flex-direction: column; align-items: center; gap: 10px;}
#schedule .inner .sch_list li .time{ font-size: 14px; color: var(--blue);}
#schedule .inner .sch_list li .time span{ font-size: 16px;}
#schedule .inner .sch_list li .icon{ flex-direction: column; gap: 10px; background: var(--gold); border-radius: 50%; width: 50px; height: 50px;}
#schedule .inner .sch_list li:first-child .icon,
#schedule .inner .sch_list li:last-child .icon{ background: var(--blue);}
@media screen and (min-width: 768px){
	.sp_on{ display: none;}
}
@media screen and (max-width: 767px){
	#schedule{ min-width: auto;}
	#schedule .inner::before{ content: none;}
	#schedule .inner .sec_ttl2{ font-size: 18px;}
	#schedule .inner .sch_list{ flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; gap: 30px; position: relative; max-width: 300px; margin: 0 auto; z-index: 1;}
	#schedule .inner .sch_list::before{ content:""; position:absolute; width:2px; height:60%; background: repeating-linear-gradient(to bottom, #999 0 4px, transparent 4px 8px); left: 86px; top: 50%; transform: translateY(-50%);}
	#schedule .inner .sch_list li.flex{ flex-direction: row; align-items: center; gap: 10px; text-align: left; width: 100%; max-width: 300px; margin: 0 auto; position: relative; z-index: 1;}
	#schedule .inner .sch_list li .time{ width: 58px; text-align: center; line-height: 1.2;}
	#schedule .inner .sch_list li .time span{ font-size: 14px;}
	#schedule .inner .sch_list li .icon{ height: 40px; width: 40px;}
	#schedule .inner .sch_list li .txt_wrap{ width: calc(100% - 118px);}
	#schedule .inner .sch_list li:last-child .s_txt br{ display: none;}
}
/*-------------------------
__notice
-------------------------*/
#notice{ background: var(--blue); padding: 20px; box-sizing: border-box; min-width: 1020px;}
#notice .inner{ padding: 20px 30px; border: 1px solid #c4a879; box-sizing: border-box; display: block; max-width: 1040px; min-width: 980px;}
#notice .inner .flex{ align-items: center; gap: 30px;}
#notice .inner > .flex > .icon{ border: 1px solid #c4a879; border-radius: 50%;}
#notice .inner .flex .icon img{}
#notice .inner .flex .txt_wrap{ text-align: left;}
#notice .inner .flex .txt_wrap .ttl{ font-size: 21px; color: #fff; position: relative; margin-bottom: 40px;}
#notice .inner .flex .txt_wrap .ttl::after{ content: ""; position: absolute; left: 0; bottom: -20px; background: var(--gold); width: 40px; height: 2px;}
#notice .inner .flex .txt_wrap .txt{ font-size: 14px; color: #c4a879; line-height: 1.6;}
#notice .inner .flex .btn_wrap{}
@media screen and (max-width: 767px){
	#notice{ min-width: auto;}
	#notice .inner{ padding: 20px; min-width: auto;}
	#notice .inner .flex{ flex-wrap: wrap;}
	#notice .inner .flex .txt_wrap .ttl{ font-size: 16px; line-height: 1.2;}
	#notice .inner .flex .txt_wrap .ttl::after{ width: 30px; height: 1px;}
}