@charset "UTF-8";
#wrapper { overflow-x: hidden; }
@media screen and (max-width: 767px) {
	#mv { margin-bottom: -40px; }
	#mv .tochi { background: url(../img/common/p_nav_bg.png) 0px 0px repeat-x; width: 100%; height: 80px; position: relative; top: -60px;}
}
@media screen and (min-width: 768px) {
	#mv { margin-bottom: 20px;}
	#mv .tochi { background: url(../img/common/p_nav_bg.png) 0px 0px repeat-x; width: 100%; height: 122px; }
}
@media screen and (min-width: 768px) and (max-width: 960px)  {
}
@media screen and (min-width: 961px) and (max-width: 1024px)  {
}
@media screen and (min-width: 1025px) and (max-width: 1319px)  {
}
@media screen and (min-width: 1320px) {
}



/*-- コンテンツ -------------------------------------------------------------*/
.overHead { position: relative; }
@media screen and (max-width: 599px) {
	#headline { margin: 40px 6% 10px; }
	.subttl01 { text-align: center; font-size: 1.0rem; font-weight: bold; margin-bottom: 10px; }
	.ttl02 { 
		text-align: center; font-size: 1.2rem; font-weight: bold; margin-bottom: 20px; color: #fff;
		text-shadow: 3px 3px 3px rgba(5,126,219,0.3),-3px -3px 3px rgba(5,126,219,0.3),-3px 3px 3px rgba(5,126,219,0.3),3px -3px 3px rgba(5,126,219,0.3),3px 0 3px rgba(5,126,219,0.3), -3px 0 3px rgba(5,126,219,0.3),0 3px 3px rgba(5,126,219,0.3),0 -3px 3px rgba(5,126,219,0.3);
	}
	.ttl02::before { content: attr(data-text); position: absolute; color: #4169e1; -webkit-text-stroke: 1px #FFF; }
	
	.ttl03 { text-align: center; position: relative; color: #e17070; z-index: 10; margin-bottom: 20px; font-weight: bold; font-size: 1.1rem; }
	.ttl03 span { position: absolute; top: -25px; left: 0; right: 0; margin: 0 auto; font-family:'Roboto Condensed', sans-serif; color: #f9e2e2; z-index: -1; font-size: 2.4rem; }
	
	.topGimonList { width: 92%; margin: 0 auto 40px;;}
	.topGimonList li {  } 
	.topGimonList li .tg-in { border: 3px solid rgba(225,179,122,0.5); border-radius: 12px; background: #fff; display: flex; justify-content: center; padding: 10px; background: #fffcf3; margin-bottom: 10px; }  
	.topGimonList li:last-child { margin-right: 0px; }
	.topGimonList li h5 { font-size: 0.8rem; font-weight: bold; text-align: center; }
	.topGimonList li h4 { font-size: 1.1rem; font-weight: bold; color: #e17070; text-align: center; }
	
	.topGimonList li .icon { position: absolute; top: -15px; left: -20px; width: 60px;}
	
	.frame-box-001 { padding: 15px; position: relative; margin-bottom: 20px; }
	.frame-box-001::before, .frame-box-001::after { content: ''; width: 15px; height: 15px; position: absolute; }
	.frame-box-001::before { border-left: solid 2px #000000; border-top: solid 2px #000000; top: 0; left: 0; }
	.frame-box-001::after { border-right: solid 2px #000000; border-bottom: solid 2px #000000; bottom: 0; right: 0; }
	
	.searchBox { margin:0 4% 20px; }
	.searchBox .sbTtl { 
		text-align: center; font-weight: bold; font-size: 0.85rem; padding: 10px; max-width: 700px; width: 96%; margin: 0 auto; 
		color: #fff; background: #e17070; border-radius: 50px; cursor: pointer; position: relative; margin-bottom: 20px; 
	}
	.swiper.swiper-card { margin: 0 4%;}
	.searchBox .sbTtl span { width: 60px; position: absolute; left: -15px; top: 10px; }
	.sbTtl:after { content: "\f107"; font-family: "Font Awesome 5 Free"; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); opacity: 0.5; font-size: 1.5em;}
	.sbTtl.active:after { content: "\f106"; }
	.sbContent { max-width: 660px; width: 88%; margin: 0 auto; border: 1px dashed #e17070; padding: 6%; border-radius: 12px; }
	.sbContent h6.fe_subttl { background: #f9e2e2; margin-bottom: 10px; padding: 5px 10px; border-top: 3px solid #f5b2b2; font-size: 0.9rem; }
	.fe_select { margin-bottom: 10px; }
	.fe_select h6 { font-size: 0.8rem;}
	.fe_select:last-child { margin-right: 0px; }
	.ff_box { margin-bottom: 10px; font-size: 0.8rem; }
	
	#content .in main section#anch05 { margin-bottom: 20px; }
	#content .in main section#anch06 { margin-bottom: 20px; }
	
	.head-hiromi { display: none; }
	.head-hiromi-sp { width: 240px; margin: 0 auto 20px; }
}
@media screen and (min-width: 600px) {
	.subttl01 { text-align: center; font-size: 1.2rem; font-weight: bold; }
	.ttl02 { 
		text-align: center; font-size: 2.4rem; font-weight: bold; margin-bottom: 20px; color: #fff;
		text-shadow: 3px 3px 3px rgba(5,126,219,0.3),-3px -3px 3px rgba(5,126,219,0.3),-3px 3px 3px rgba(5,126,219,0.3),3px -3px 3px rgba(5,126,219,0.3),3px 0 3px rgba(5,126,219,0.3), -3px 0 3px rgba(5,126,219,0.3),0 3px 3px rgba(5,126,219,0.3),0 -3px 3px rgba(5,126,219,0.3);
	}
	.ttl02::before { content: attr(data-text); position: absolute; color: #4169e1; -webkit-text-stroke: 1px #FFF; }

	.ttl03 { text-align: center; position: relative; color: #e17070; z-index: 10; margin-bottom: 20px; font-weight: bold; font-size: 1.5rem; }
	.ttl03 span { position: absolute; top: -50px; left: 0; right: 0; margin: 0 auto; font-family:'Roboto Condensed', sans-serif; color: #f9e2e2; z-index: -1; font-size: 3.6rem; }
	
	.topGimonList { display: flex; justify-content: center; align-items: center; max-width: 960px; width: 100%; margin: 0 auto 80px;}
	.topGimonList li { width: 32%; margin-right: 2%; } 
	.topGimonList li .tg-in { border: 3px solid rgba(225,179,122,0.5); border-radius: 12px; background: #fff; display: flex; justify-content: center; padding: 10px; background: #fffcf3; }
	.topGimonList li:last-child { margin-right: 0px; }
	.topGimonList li h5 { font-size: 0.8rem; font-weight: bold; text-align: center; }
	.topGimonList li h4 { font-size: 1.1rem; font-weight: bold; color: #e17070; text-align: center; }
	
	.topGimonList li .icon { position: absolute; top: -20px; left: -20px; width: 70px;}
	
	.frame-box-001 { padding: 30px; position: relative; }
	.frame-box-001::before, .frame-box-001::after { content: ''; width: 30px; height: 30px; position: absolute; }
	.frame-box-001::before { border-left: solid 2px #000000; border-top: solid 2px #000000; top: 0; left: 0; }
	.frame-box-001::after { border-right: solid 2px #000000; border-bottom: solid 2px #000000; bottom: 0; right: 0; }
	
	.searchBox { margin-bottom: 20px; }
	.searchBox .sbTtl { 
		text-align: center; font-weight: bold; font-size: 1.1rem; padding: 10px; max-width: 700px; width: 96%; margin: 0 auto; 
		color: #fff; background: #e17070; border-radius: 50px; cursor: pointer; position: relative; margin-bottom: 20px; 
	}
	.searchBox .sbTtl span { width: 70px; position: absolute; left: -25px; top: 3px; }
	.sbTtl:after { content: "\f107"; font-family: "Font Awesome 5 Free"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); opacity: 0.5; font-size: 1.5em;}
	.sbTtl.active:after { content: "\f106"; }
	.sbContent { max-width: 660px; width: 92%; margin: 0 auto; border: 1px dashed #e17070; padding: 2%; border-radius: 12px; }
	.sbContent h6.fe_subttl { background: #f9e2e2; margin-bottom: 10px; padding: 5px 10px; border-top: 3px solid #f5b2b2; font-size: 0.9rem; }
	.fe_select { float: left; margin-right: 2%; width: 23.5%; margin-bottom: 20px; }
	.fe_select h6 { font-size: 0.8rem;}
	.fe_select:last-child { margin-right: 0px; }
	.ff_box { margin-bottom: 10px; font-size: 0.8rem; }
	
	#content .in main section#anch05 { margin-bottom: 80px; }
	#content .in main section#anch06 { margin-bottom: 80px; }
	
	.head-hiromi { position: absolute; top: -200px; left: -200px; width: 300px;}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#headline { margin: 0 4%;}
	#headline .in { margin: 0 2% 40px; }
	.topGimonList { width: 92%; margin: 0 4% 80px;}
	.topGimonList li h5 { font-size: 0.7rem; font-weight: bold; text-align: center; }
	.topGimonList li h4 { font-size: 1.0rem; font-weight: bold; color: #e17070; text-align: center; }
	.topGimonList li .icon { position: absolute; top: -20px; left: -20px; width: 50px;}
	.subttl01 { font-size: 1.0rem; }
	.ttl02 { font-size: 2.0rem; }
	.ttl03 { font-size: 1.2rem; }
	.ttl03 span { font-size: 3.0rem; top: -40px; }
	
	.head-hiromi { display: none; }
	.head-hiromi-sp { width: 300px; margin: 0 auto 20px; }
	
	#content .in main section#anch06 { margin-bottom: 40px; }
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	#headline .in { margin: 0 2% 40px; }
	.topGimonList li .icon { position: absolute; top: -20px; left: -20px; width: 60px;}
	.head-hiromi { display: none; }
	.head-hiromi-sp { width: 300px; margin: 0 auto 20px; }
	
	#content .in main section#anch06 { margin-bottom: 50px; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px) {
	#headline .in { margin: 0 2% 40px; }
	.head-hiromi { position: absolute; top: -220px; left: -50px; width: 300px;}
	.head-hiromi-sp { display: none; }
	
	#content .in main section#anch06 { margin-bottom: 60px; }
}
@media screen and (min-width: 1200px) and (max-width: 1379px) {
	#headline .in { width:800px; margin: 0 auto 40px; }
	.head-hiromi-sp { display: none; }
}
@media screen and (min-width: 1380px) and (max-width: 1479px) {
	#headline .in { width:800px; margin: 0 auto 40px; }
	.head-hiromi-sp { display: none; }
}
@media screen and (min-width: 1480px) {
	#headline .in { width:800px; margin: 0 auto 40px; }
	.head-hiromi-sp { display: none; }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
	.sideGimonList li h5 { font-size: 0.7rem; }
	.sideGimonList li h4 { font-size: 0.8rem; }	
	.side-hiromi { position: absolute; top: -45px; right: 5px; width: 85px; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
	.side-hiromi { position: absolute; top: -45px; right: 5px; width: 95px; }
}
@media screen and (min-width: 1480px) {
	.side-hiromi { position: absolute; top: -45px; right: 5px; width: 100px; }
}


