@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/
#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){
	.sph_on{display: none;}
    #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;}
}

.img_wrap img{ width: 100%; height: auto; vertical-align: bottom;}
.serif{ font-family: serif;}
.ls_1{ letter-spacing: .05em;}
.ls_2{ letter-spacing: .15em;}

#main{ position: relative; overflow: hidden;}
footer{ background: #fff;}
#main .block{}
#main .block .blo_inner{ max-width: 1200px; margin: 0 auto; padding: 0 30px; box-sizing: border-box;}
#main .block .blo_inner .blo_ttl{ font-size: 21px; line-height: 1.4; margin-bottom: 30px;}
#main .block .blo_inner .blo_ttl .en{ font-size: 42px; color: #434090;}
/*blo01*/
#main #blo01{ position: fixed; height: 750px; width: 100%; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%,rgba(242, 242, 255, 1) 100%); z-index: -1;}
#main #blo01 .blo_inner{ position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 40px; align-items: center; justify-content: center;}
#main #blo01 .blo_inner h1{ font-size: 24px; line-height: 1.6;}
#main #blo01 .blo_inner h1 .en{ font-size: 63px;}
/*blo02*/
#main #blo02{ position: relative; z-index: 9; padding-top: 500px; box-sizing: border-box;}
#main #blo02 .bg_fff{ background: #fff;}
#main #blo02 .blo_inner .read{ margin: 60px auto 100px;}
#main #blo02 .blo_inner .read p{ font-size: 18px; font-weight: 700; line-height: 1.6; margin-bottom: 1em;}
#main #blo02 .blo_inner .read p:last-child{ margin-bottom: 0;}
#main #blo02 .blo_inner .ttl{ font-size: 24px; margin-bottom: 20px;}
#main #blo02 .blo_inner .txt{ font-size: 16px; margin-bottom: 40px;}
#main #blo02 .blo_inner .flex{ display: flex; gap: 40px;}
#main #blo02 .blo_inner .flex .card{ width: 50%;}
#main #blo02 .blo_inner .flex .card a{ text-decoration: none;}
#main #blo02 .blo_inner .flex .card a .img_box{ border-radius: 10px; overflow: hidden; aspect-ratio: 3/2; position: relative;}
#main #blo02 .blo_inner .flex .card a .img_box::after{ content: ""; display: block; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 0; transition: .3s;}
#main #blo02 .blo_inner .flex .card a .img_box > img{ width: 100%; height: 100%; object-fit: cover; transition: .3s;}
#main #blo02 .blo_inner .flex .card a .img_box .logo{ position: absolute; left: 50%; top: 15%; transform: translateX(-50%); z-index: 9; width: 70%;}
#main #blo02 .blo_inner .flex .card a .img_box .logo img { width: 100%; height: auto;}

#main #blo02 .blo_inner .flex .card a .img_box .name{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 21px; line-height: 1.4; z-index: 9; text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);}
#main #blo02 .blo_inner .flex .card a .img_box .name span{ white-space: nowrap;}
#main #blo02 .blo_inner .flex .card a .img_box .name .en{ font-size: 32px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt{ position: absolute; left: 30px; right: 30px; bottom: 30px; color: #fff; font-size: 14px; z-index: 9; text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1); padding-bottom: 15px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span{ position: relative; display: block; text-align: left;font-weight: 700;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::before,
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::after { content: ""; position: absolute; right: 10px; bottom: 8px; width: 10px; height: 1px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1); transition: .3s;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::before { bottom: 10px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::before { transform: rotate(45deg) translateY(-3px);}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::after { transform: rotate(-45deg) translateY(3px);}

#main #blo02 .blo_inner .flex .card ul{ text-align: left; margin-top: 20px;}
#main #blo02 .blo_inner .flex .card ul li{ font-size: 16px; font-weight: 700; margin-bottom: 10px;}
#main #blo02 .blo_inner .flex .card ul li:last-child{ margin-bottom: 0;}

#main #blo02 .blo_inner .meeting{ margin-top: 100px;}
#main #blo02 .blo_inner .meeting a{ text-decoration: none; color: #fff;}
#main #blo02 .blo_inner .meeting a .img_box{ border-radius: 10px; overflow: hidden; height: 270px; position: relative;}
#main #blo02 .blo_inner .meeting a .img_box::after{ content: ""; display: block; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 0; transition: .3s;}
#main #blo02 .blo_inner .meeting a .img_box > img{ width: 100%; height: 100%; object-fit: cover; transition: .3s;}
#main #blo02 .blo_inner .meeting a .img_box .txt_wrap{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9; width: 100%; max-width: 630px;}
#main #blo02 .blo_inner .meeting a .img_box .txt_wrap h3{ font-size: 18px; font-weight: 700; margin-bottom: 35px; line-height: 1.2;}
#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .meet_ttl{ font-size: 54px; margin-bottom: 15px; font-weight: 700;}
#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .accent_list{ display: flex; align-items: center; justify-content: center; gap: 10px;}
#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .accent_list li{ font-size: 16px; color: #fff; font-weight: 700; background: #b7a274; padding: 12px 20px; border-radius: 20px;}


@media screen and (max-width: 999px){
#main #blo02 .blo_inner .flex{ gap: 30px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt{left: 20px; right: 20px; bottom: 20px; font-size: 12px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::after { bottom: 6px; right: 5px;}
#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::before { bottom: 8px; right: 5px;}
}
@media screen and (min-width: 768px){
	#main #blo02 .blo_inner .flex .card a:hover .img_box::after{ background: rgba(0, 0, 0, 0.4);}
	#main #blo02 .blo_inner .flex .card a:hover .img_box > img{ transform: scale(1.1);}
	#main #blo02 .blo_inner .meeting a:hover .img_box::after{ background: rgba(0, 0, 0, 0.4);}
	#main #blo02 .blo_inner .meeting a:hover .img_box > img{ transform: scale(1.1);}
	#main #blo02 .blo_inner .flex .card a:hover .img_box .arrow_txt span::before,
	#main #blo02 .blo_inner .flex .card a:hover .img_box .arrow_txt span::after { right: 0;}
}
@media screen and (max-width: 767px){
	#main .block .blo_inner{ padding: 0 20px;}
	#main .block .blo_inner .blo_ttl{ font-size: 16px;margin-bottom: 20px;}
	#main .block .blo_inner .blo_ttl .en{ font-size: 32px;}
	/*blo01*/
	#main #blo01{ height: 50vh; min-height: 400px;}
	#main #blo01 .blo_inner{ gap: 10px;}
	#main #blo01 .blo_inner h1{ font-size: max(2.4vw, 14px);}
	#main #blo01 .blo_inner h1 .en{ font-size: max(6vw, 24px);}
	#main #blo01 .blo_inner .img_wrap{ max-width: 480px;}
	/*blo02*/
	#main #blo02{ padding-top: 40vh;}
	#main #blo02 .blo_inner .read{ margin: 40px auto 50px;}
	#main #blo02 .blo_inner .read p{ font-size: 14px; text-align: left;}
	#main #blo02 .blo_inner .read p br{ display: none;}
	#main #blo02 .blo_inner .ttl{ font-size: 20px; line-height: 1.2;}
	#main #blo02 .blo_inner .txt{ font-size: 14px; margin-bottom: 30px;}
	#main #blo02 .blo_inner .flex{ flex-direction: column; gap: 20px;}
	#main #blo02 .blo_inner .flex .card{ width: 100%;}
	#main #blo02 .blo_inner .flex .card a .img_box .logo{ top: 10%; width: auto;}
	#main #blo02 .blo_inner .flex .card ul{ margin-top: 10px;}
	#main #blo02 .blo_inner .flex .card ul li{ font-size: 14px;}
	#main #blo02 .blo_inner .meeting{ margin: 50px -20px 0;}
	#main #blo02 .blo_inner .meeting a .img_box{ height: 210px; border-radius: 0;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap{ width: 100%; padding: 20px; box-sizing: border-box;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap h3{ font-size: 14px; margin-bottom: 20px;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .meet_ttl{ font-size: 30px; margin-bottom: 10px;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .accent_list li{ font-size: 14px; padding: 10px;}
}
@media screen and (max-width: 399px){
	/*blo01*/
	#main #blo01{ min-height: 360px;}
	/*blo02*/
	#main #blo02{ padding-top: 35vh;}
	#main #blo02 .blo_inner .flex .card a .img_box .name{ font-size: 16px; top: 45%;}
	#main #blo02 .blo_inner .flex .card a .img_box .name .en{ font-size: 24px;}
}
@media screen and (max-width: 374px){
	#main #blo02 .blo_inner .ttl { font-size: 18px;}
	#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt{ font-size: 11px; left: 15px; right: 15px; bottom: 20px; padding-bottom: 10px;}
	#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::before,
	#main #blo02 .blo_inner .flex .card a .img_box .arrow_txt span::after { display: none;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .meet_ttl{ font-size: 28px;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .accent_list{ gap: 5px;}
	#main #blo02 .blo_inner .meeting a .img_box .txt_wrap .accent_list li{ padding: 8px;}
}