@charset "UTF-8";
/*-------------------------
__common
-------------------------*/
strong,dt,h1,h2,h3,h4,h5,h6,th{font-size:10px;}
#content{font-family:"Noto Sans JP", sans-serif;color:#1f1f1f;}
.ff_eb{font-family:"EB Garamond", serif;}
.ff_ns{font-family:"Noto Serif JP", serif;}
#lineup,
#free_select{padding:120px 0 50px;}
#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:"";}

@media screen and (min-width: 768px){
    #content .topic_path li a:hover{text-decoration:none;opacity:0.7;}
}
@media screen and (max-width: 767px){
	#lineup,
	#free_select{padding:70px 0 0;}
	#content .topic_path {width:100%;padding:10px 20px 0;}
}
.tab { display: flex; flex-wrap: wrap; gap: 0 10px;}
.tab > label { flex: 1 1; order: -1; opacity: .3; padding: .6em 0; border-radius: 5px 5px 0 0; background-color: #434090; color: #fff; font-size: 20px; font-weight: 700; text-align: center; cursor: pointer; transition: .3s;}
.tab > label:hover { opacity: .8;}
.tab input { display: none;}
.tab > div { display: none; width: 100%; background-color: #fff; border-top: 3px solid #434090; padding: 50px 0; box-sizing: border-box;}
.tab label:has(:checked) { opacity: 1;}
.tab label:has(:checked) + div { display: block;}



.mb_10{ margin-bottom: 20px;}
#main{}
#main .mv{ position: relative;}
#main .mv .mv_img{ display: flex; align-items: stretch; margin-bottom: 30px; min-height: 240px;}
#main .mv .mv_img .img_wrap{ overflow: hidden;}
#main .mv .mv_img .img_wrap img{ width: 100%; height: 100%; object-fit: cover;}

#main .mv .main_ttl_wrap{ font-family: 'Noto Serif JP', serif; margin-bottom: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  color: #fff; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 10px rgba(0, 0, 0, 0.4); width: 100%;}
#main .mv .main_ttl_wrap .sub_ttl{ font-size: 28px; line-height: 1.4; font-weight: 700;}
#main .mv .main_ttl_wrap .main_ttl{ font-size: 64px; line-height: 1.4; font-weight: 700; margin-bottom: 10px; color: #ede5a2;}
#main .mv .main_ttl_wrap .main_ttl span{ font-size: 48px; color: #fff;}
#main .mv_txt{ font-size: 16px; line-height: 1.6; font-weight: 700; box-sizing: border-box; margin-bottom: 50px;}

#main #contents{ max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}

#main #contents .tab{ font-weight: 700; text-align: left;}
#main #contents .tab .tab_ttl_wrap{ margin-bottom: 40px; text-align: center;}
#main #contents .tab .tab_ttl_wrap.top_line{ margin-top: 60px; padding-top: 60px; border-top: 3px dotted #ddd;}
#main #contents .tab .tab_ttl_wrap .tab_ttl{ font-size: 32px; margin-bottom: 20px; line-height: 1.4; font-weight: 700; font-family: 'Noto Serif JP', serif; color: #434090; padding-bottom: 20px; border-bottom: 1px solid #434090;}
#main #contents .tab .tab_ttl_wrap .tab_txt{ font-size: 18px; line-height: 1.4;}
#main #contents .tab .img{ margin-bottom: 10px;}
#main #contents .tab .img img,
#main #contents .tab .img_wrap img,
#main #contents .tab .logo_wrap img{ width: 100%; height: auto;}
#main #contents .tab .logo_wrap{ width: 120px; margin-bottom: 20px;}
#main #contents .tab .logo_wrap2{ width: 200px;}
#main #contents .tab .txt_wrap{}
#main #contents .tab .item_ttl{ font-size: 21px; margin-bottom: 5px; line-height: 1.4; font-family: 'Noto Serif JP', serif; color: #434090;}
#main #contents .tab .item_name{ font-size: 18px; margin-bottom: 20px; line-height: 1.4;}
#main #contents .tab .item_txt{ font-size: 16px; line-height: 1.4;}
#main #contents .tab .flex_box1{ display: flex; gap: 30px;}
#main #contents .tab .flex_box1 > div{ width: calc((100% - 60px)/ 3);}
#main #contents .tab .flex_box2{ display: flex; gap: 50px; margin-bottom: 50px;}
#main #contents .tab .flex_box2:last-of-type{ margin-bottom: 0;}
#main #contents .tab .flex_box2 > div{ width: 50%;}
#main #contents .tab .flex_box2 .flex_box2{ margin-top: 20px;}

@media screen and (max-width: 999px){
	#main .mv .main_ttl_wrap{ margin-bottom: 20px; top: 60%;}
	#main .mv .main_ttl_wrap .sub_ttl{ font-size: 20px;}
	#main .mv .main_ttl_wrap .main_ttl{ font-size: 42px;}
	#main .mv .main_ttl_wrap .main_ttl span{ font-size: 28px;}
	#main .mv_txt{ font-size: 14px; margin-bottom: 30px;}
	#main #contents .tab .tab_ttl_wrap{ margin-bottom: 32px;}
	#main #contents .tab .tab_ttl_wrap .tab_ttl{ font-size: 24px;}
	#main #contents .tab .tab_ttl_wrap .tab_txt{ font-size: 16px; text-align: left;}
	#main #contents .tab .tab_ttl_wrap .tab_txt br{ display: none;}
	#main #contents .tab .item_ttl{ font-size: 18px;}
	#main #contents .tab .item_name{ font-size: 16px;}
	#main #contents .tab .item_txt{ font-size: 14px;}
	#main #contents .tab .flex_box1{ display: flex; gap: 30px;}
	#main #contents .tab .flex_box1 > div{ width: calc((100% - 60px)/ 3);}
	#main #contents .tab .flex_box2{ display: flex; gap: 30px; margin-bottom: 50px;}
	#main #contents .tab .flex_box2:last-of-type{ margin-bottom: 0;}
	#main #contents .tab .flex_box2 > div{ width: 50%;}
	#main #contents .tab .flex_box2 .flex_box2{ margin-top: 20px;}
}


@media screen and (max-width: 767px){
	.mb_10{ margin-bottom: 10px;}
	.tab > label { font-size: 16px; }
	.tab > div { padding: 30px 0;}

	#main .mv .main_ttl_wrap{ margin-bottom: 10px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4), 0px 0px 5px rgba(0, 0, 0, 0.4), 0px 0px 5px rgba(0, 0, 0, 0.4);}
	#main .mv .main_ttl_wrap .sub_ttl{ font-size: 16px;}
	#main .mv .main_ttl_wrap .main_ttl{ font-size: 27px;}
	#main .mv .main_ttl_wrap .main_ttl span{ font-size: 20px;}
	#main #contents .tab .tab_ttl_wrap{ margin-bottom: 20px;}
	#main #contents .tab .tab_ttl_wrap.top_line{ margin-top: 30px; padding-top: 30px;}
	#main #contents .tab .tab_ttl_wrap .tab_ttl{ font-size: 20px; margin-bottom: 10px; padding-bottom: 10px;}
	#main #contents .tab .tab_ttl_wrap .tab_txt{ font-size: 14px;}
	#main #contents .tab .logo_wrap{ margin-bottom: 10px; width: 100px;}
	#main #contents .tab .logo_wrap2{ width: 200px; width: 160px;}
	#main #contents .tab .item_ttl{ font-size: 18px;}
	#main #contents .tab .item_name{ font-size: 16px; margin-bottom: 10px;}
	#main #contents .tab .item_txt{ font-size: 14px;}
	#main #contents .tab .flex_box1{ flex-wrap: wrap;}
	#main #contents .tab .flex_box1 > div{ width: 100%;}
	#main #contents .tab .flex_box2{ flex-wrap: wrap; margin-bottom: 30px; gap: 10px;}
	#main #contents .tab .flex_box2:last-of-type{ margin-bottom: 0;}
	#main #contents .tab .flex_box2 > div{ width: 100%;}
	#main #contents .tab .flex_box2 .flex_box2{ margin-top: 20px;}
}


@media screen and (min-width: 375px){
	.sph374_on{ display: none;}
}
@media screen and (max-width: 374px){
	#main .mv_txt{ font-size: 13px;}
	#main .mv .main_ttl_wrap .sub_ttl{ font-size: 15px;}
	#main .mv .main_ttl_wrap .main_ttl{ font-size: 24px;}
	#main .mv .main_ttl_wrap .main_ttl span{ font-size: 18px;}
	#main .mv .main_ttl_wrap .mv_txt{ font-size: 13px;}
}