@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,
#main #blo03{ 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,
	#main #blo03{ 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,
	#main #blo03{ 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 h1{ font-size: 54px; margin-bottom: 30px;}
#main #blo01 .blo_inner h2{ 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{ margin: 0 auto 50px; width: 100%; height: auto; max-width: 750px;}
#main #blo01 .blo_inner .img_wrap img{}
@media screen and (max-width: 999px){
	#main #blo01 .blo_inner h1{ font-size: 42px; margin-bottom: 20px;}
	#main #blo01 .blo_inner h2{ font-size: 24px; margin-bottom: 30px;}
	#main #blo01 .blo_inner p{ font-size: 16px;}
	#main #blo01 .blo_inner .img_wrap{ margin: 0 auto 30px;}
	#main #blo01 .blo_inner .img_wrap img{}
}
@media screen and (max-width: 767px){
	#main #blo01 .blo_inner h1{ font-size: 32px; margin-bottom: 10px;}
	#main #blo01 .blo_inner h2{ font-size: 18px;margin-bottom: 20px;}
	#main #blo01 .blo_inner p{ font-size: 14px;}
	#main #blo01 .blo_inner .img_wrap{ margin: 0 auto 20px;}
}
/*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 .gallery{ display: flex; gap: 20px; flex-wrap: wrap;}
#main #blo02 .blo_inner .gallery a{ width: calc((100% - 80px) / 5); 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;}
@media screen and (min-width: 768px){
	#main #blo02 .blo_inner .gallery a:hover img{transform: scale(1.1);}
}
@media screen and (max-width: 999px){
	#main #blo02{ margin: 50px 30px 0;}
	#main #blo02 .blo_inner{ padding: 50px 30px;}
}
@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: calc((100% - 10px) / 2);}
}