@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
.img_wrap img{ width: 100%; height: auto; vertical-align: bottom;}
.serif{ font-family: serif;}
.ls_1{ letter-spacing: .05em;}
.ls_2{ letter-spacing: .15em;}

/*-------------------------
__.topic_path
-------------------------*/
#content{ padding-top: 110px;}
#content .topic_path{ max-width:1180px;margin:0 auto;text-align: left;padding: 25px 20px 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{opacity:0.7;}
}
@media screen and (max-width: 767px) {
	#content{ padding-top: 50px;}
	#content .topic_path{width:100%;padding:15px 15px 0;}
}

#main .block{}
#main #blo01,
#main #blo02{ margin-top: 100px;}
#main .block .blo_inner{ max-width: 1200px; margin: 0 auto; padding: 0 30px; box-sizing: border-box;}
#main .block .blo_ttl{ font-size: 21px; line-height: 1.4; margin-bottom: 30px;}
#main .block .blo_ttl .en{ font-size: 42px; color: #434090;}
@media screen and (max-width: 999px){
	#main #blo01,
	#main #blo02{ margin-top: 50px;}
	#main .block .blo_ttl{ font-size: 18px;margin-bottom: 20px;}
	#main .block .blo_ttl .en{ font-size: 32px;}
}
@media screen and (max-width: 767px){
	#main #blo01,
	#main #blo02{ margin-top: 30px;}
	#main .block .blo_inner{ padding: 0 20px;}
	#main .block .blo_ttl{ font-size: 16px;}
	#main .block .blo_ttl .en{ font-size: 24px;}
}
/*blo01*/
#main #blo01{}
#main #blo01 .blo_inner{ text-align: left;}
#main #blo01 .blo_inner .ttl_wrap{ display: flex; gap: 30px; align-items: center; margin-bottom: 30px;}
#main #blo01 .blo_inner .ttl_wrap h1{ font-size: 54px;}
#main #blo01 .blo_inner .ttl_wrap h2{ font-size: 24px; font-weight: 700;}
#main #blo01 .blo_inner .detail{ display: flex; gap: 30px; align-items: center;}
#main #blo01 .blo_inner .detail dl{ display: flex; gap: 10px; align-items: center; font-size: 18px; margin-bottom: 30px;}
#main #blo01 .blo_inner .detail dl dt{ background: #e6e6e6; padding: 10px 20px; border-radius: 5px; box-sizing: border-box; font-weight: 700;}
#main #blo01 .blo_inner .detail dl dd{ font-weight: 700;}
#main #blo01 .blo_inner h3{ font-size: 28px; line-height: 1.6; font-weight: 700; margin-bottom: 50px;}
#main #blo01 .blo_inner p{ font-size: 18px; line-height: 1.6;}
#main #blo01 .blo_inner .img_wrap{ height: auto; width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 50px;}
@media screen and (max-width: 999px){
	#main #blo01 .blo_inner .ttl_wrap h1{ font-size: 42px;}
	#main #blo01 .blo_inner .ttl_wrap h2{ font-size: 21px;}
	#main #blo01 .blo_inner h3{ font-size: 24px; margin-bottom: 30px;}
	#main #blo01 .blo_inner p{ font-size: 16px;}
	#main #blo01 .blo_inner .img_wrap{ margin-bottom: 30px;}
	#main #blo01 .blo_inner .img_wrap img{}
}
@media screen and (max-width: 767px){
	#main #blo01 .blo_inner .ttl_wrap{ flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px;}
	#main #blo01 .blo_inner .ttl_wrap h1{ font-size: 32px;}
	#main #blo01 .blo_inner .ttl_wrap h2{ font-size: 18px;}
	#main #blo01 .blo_inner .detail{ flex-direction: column; gap: 10px; align-items: flex-start;}
	#main #blo01 .blo_inner .detail dl{ font-size: 14px; margin-bottom: 0;}
	#main #blo01 .blo_inner .detail dl dt{ padding: 5px 10px;}
	#main #blo01 .blo_inner h3{ font-size: 18px;margin-bottom: 20px;}
	#main #blo01 .blo_inner p{ font-size: 14px;}
	#main #blo01 .blo_inner .img_wrap{ margin: 20px auto;}
}
/*blo02*/
#main #blo02{ background: #f2f2ff; margin: 100px 30px 0; border-radius: 10px; box-sizing: border-box;}
#main #blo02 .blo_inner{ padding: 100px 30px;}
#main #blo02 .blo_inner .img_wrap{ margin: 0 auto 50px; width: 100%; height: auto; max-width: 750px;}
#main #blo02 .blo_inner .img_wrap img{}
#main #blo02 .blo_inner .gallery{ display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 50px;}
#main #blo02 .blo_inner .gallery a{ width: calc((100% - 40px) / 3); border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 3;}
#main #blo02 .blo_inner .gallery a img { display: block; height: 100%; width: 100%; object-fit: cover; transition: .3s;}
#main #blo02 .blo_inner > a{ text-decoration: none; padding: 30px; width: 380px; display: block; box-sizing: border-box; background: #434090; border-radius: 8px; transition: .3s; margin: 0 auto;}
#main #blo02 .blo_inner > a span{ font-size: 18px; font-weight: 700; text-align: center; padding-left: 70px; color: #fff; display: flex; justify-content: center; position: relative;}
#main #blo02 .blo_inner > a span::before{ position: absolute; content: ""; top: 50%; left: 40px; background: url("images/vr_icon@2x.png")no-repeat; background-size: 100%; width: 58px; height: 34px; transform: translateY(-50%);}
@media screen and (min-width: 768px){
	#main #blo02 .blo_inner .gallery a:hover img{transform: scale(1.1);}
	#main #blo02 .blo_inner > a:hover{ opacity: .8;}
}
@media screen and (max-width: 999px){
	#main #blo02{ margin: 50px 30px 0;}
	#main #blo02 .blo_inner{ padding: 50px 30px;}
	#main #blo02 .blo_inner > a{ padding: 20px; width: 270px;}
	#main #blo02 .blo_inner > a span::before{ left: 0; width: 48px; height: 28px;}
}
@media screen and (max-width: 767px){
	#main #blo02{ border-radius: 0; margin: 30px 0 0;}
	#main #blo02 .blo_inner{ padding: 30px 20px;}
	#main #blo02 .blo_inner .gallery{ gap: 10px;}
	#main #blo02 .blo_inner .gallery a{ width: 100%;}
	#main #blo02 .blo_inner > a{ padding: 20px; width: 100%; border: none; background: #434090;}
	#main #blo02 .blo_inner > a span{ font-size: 14px; padding-left: 0;}
	#main #blo02 .blo_inner > a span::before{ width: 30px; height: 18px;}
}
/*blo03*/
#main #blo03{ margin-top: 100px;}
#main #blo03 .blo_inner{ }
#main #blo03 .blo_inner .taste_ttl{ font-size: 27px; margin-bottom: 27px;}
#main #blo03 .blo_inner .taste_list{ display: flex; flex-wrap: wrap; gap: 20px;}
#main #blo03 .blo_inner .taste_list li{ width: calc((100% - 40px) / 3);}
#main #blo03 .blo_inner .taste_list li .img_wrap{ margin-bottom: 10px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 5px;}
#main #blo03 .blo_inner .taste_list li .img_wrap img{ width: 100%; height: 100%; object-fit: cover; transition: .3s;}
#main #blo03 .blo_inner .taste_list li .name{ font-size: 18px; font-weight: 700; margin-bottom: 10px;}
#main #blo03 .blo_inner .taste_list li .txt{ font-size: 14px; text-align: left; line-height: 1.4;}
@media screen and (max-width: 999px){
	#main #blo03{ margin-top: 50px;}
	#main #blo03 .blo_inner .taste_ttl{ font-size: 21px; margin-bottom: 16px;}
	#main #blo03 .blo_inner .taste_list{ margin-bottom: 50px;}
	#main #blo03 .blo_inner .taste_list li .name{ font-size: 16px;}
}
@media screen and (max-width: 767px){
	#main #blo03{ margin-top: 30px;}
	#main #blo03 .blo_inner .taste_list{ gap: 30px 10px; margin-bottom: 30px;}
	#main #blo03 .blo_inner .taste_list li{ width: 100%;}
}