@charset "utf-8";

/* ==================================================
.section
================================================== */
.section { padding: 40px 0; }
.section h2 { font-size: 20px; line-height: 1.75; text-align: center; margin-bottom: 1em; padding: .25em 0; border-radius: 6px }
@media screen and (max-width:768px){
	.section h2 { background: #f0eb54; }
}
.section h2 img { vertical-align: middle; margin-right: .5em; height: 1em; }
@media screen and (min-width: 768px){
	.section h2 { font-size: 26px; line-height: 1.75; }
}

#contents table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.75; }
#contents table th,
#contents table td { padding: 10px; border: 1px solid #D6D6D6; }
#contents table th { width: 6.5em; background: #F4F4F4; font-weight: normal; }
#contents table img { display: inline-block; width: 2em; margin-right: 1em; }

.single .article { width: 100%; }
.article { width: 95%; margin: 0 auto 40px; text-align: left; }
.article figure { display: block; max-width: 100%; margin: 0 auto 40px; }
.article figure img { display: block; max-width: 100%; margin: 0 auto; }
.article h2 { font-size: 16px; padding: 5px 0 5px 1em; border-left: 4px solid #FF8900; margin: 40px 0 20px; text-align: left; font-weight: bold; }
.article h3 { font-size: 24px;  margin-bottom: 15px; text-align: left; }
@media screen and (min-width: 768px){
	.article { width: 100%; margin-bottom: 80px; }
	.article h2 { font-size: 16px; }
}
/* ==================================================
#keyVisual
================================================== */
#keyVisual { padding: 7em 0; background: url("../img/keyVisual_sp.jpg") no-repeat 50% 50%; background-size: cover; margin-bottom: 0em; }
#kvHeading { margin-bottom: 1.5em; }
#kvHeading p { color: #fff; font-weight: 900; }
#kvHeading p:first-of-type {font-size: 29px; margin-bottom: .5em; text-align: center; line-height: 1.5; text-shadow: 1px 1px 1px #000; }
#kvHeading p:last-of-type { /*text-align: center;*/ }
@media screen and (min-width: 768px){
	#keyVisual { padding: 10em 0; background-image: url("../img/keyVisual_pc.jpg"); margin-bottom: 2em; }
	#keyVisual .inner { max-width: 800px; }
	#kvHeading p:first-of-type {font-size: 40px; margin-bottom: 0; }
}


/* ==================================================
#breadcrumb
================================================== */
#breadcrumb { background: #f4ecdc; font-size: 8px; }
@media screen and (min-width: 768px){
	#breadcrumb { font-size: 12px; }
}
#breadcrumb ul { padding: 1.5em 0; }
#breadcrumb ul li { display: inline-block; font-size: 14px; }
#breadcrumb ul li a { display: inline-block; }
#breadcrumb ul li a:after { content: ">"; margin: 0 .3em 0 .5em; }
#breadcrumb ul li:last-of-type a:after { display: none; }

/* ==================================================
#main
================================================== */
#contents h1 { font-size: 24px; font-weight: bold; line-height: 1.75; margin: .5em 0; text-align: center; font-family: "M PLUS 1p"; }
@media screen and (min-width: 768px){
	#main { overflow: hidden; }
	#contents h1 { font-size: 32px; }
	#sidebar { float: left; }
	#contents { float: right; }
	#post #sidebar { float: right; }
	#post #contents { float: left; }
	#home #contents h2 { margin-top: 0; }
}

/* ==================================================
#categories
================================================== */
#categories { display: none; }
#home #categories { display: block; padding-top: 0; }
@media screen and (min-width: 768px){
	#categories { display: block; }
	#home #categories { padding: 0; }
	#categories h2 { font-size: 16px; text-align: left; }
}

/* ==================================================
#refineSearch
================================================== */
#refineSearch {  }
#refineSearch .inner { width: 100%; }
#refineSearch .inner p { text-align: center; font-size: 15px; padding: .5em 0; margin-bottom: 1em; border-top: 1px dotted #A7A7A7; border-bottom: 1px dotted #A7A7A7; }
#refineSearch .inner ul { text-align: center; margin-bottom: 1em; }
#refineSearch .inner ul li { display: inline-block; width: 29%; margin: 0 3px 10px; font-size: 12px; line-height: 1.75; }
#refineSearch .inner ul li a { display: block; border: 1px solid #A7A7A7; border-radius: 50px; padding: 5px 0; }
#refineSearch .inner ul li a:active { background-color: #EEFAE7; }
#refineSearch .inner ul li a.active { background-color: #ACD593; }
@media screen and (min-width: 768px){
	#refineSearch { font-size: 20px; text-align: left; }
	#refineSearch .inner ul li { width: 15%; }
	#refineSearch .inner ul li a:hover { background-color: #EEFAE7; }
}

/* ==================================================
#present
================================================== */
#present { margin-bottom: 2em; }


/* ==================================================
#homeCoupon
================================================== */
#coupon { background: #f4ecdc; }
.couponBox { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -6px; }
.coupon.is-empty {height: 0;padding-top: 0;padding-bottom: 0;margin-top: 0;margin-bottom: 0;list-style: none;}
.coupon { width: 100%; border-radius: 6px; background: #fff; margin-bottom: 20px; box-shadow: 0 3px 6px 0 #ccc; }
.coupon a { display: flex; }
.coupon figure { margin: 0; padding: 0; width: 35%; }
.coupon figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px 0 0 6px; }
.couponTxt { font-size: 12px; padding: 5px 0 5px 10px; width: 65%; }
.couponTxt h3 { font-weight: bold; line-height: 1.5; }
@media screen and (min-width:768px){
	.coupon a { display: block; }
	.coupon figure { width: 100%; }
	.coupon figure img { display: block; width: 100%; border-radius: 6px 6px 0 0; }
	.couponTxt { font-size: 12px; padding: 8%; width: 100%; }
}

.couponTxt .discount,
.postCoupon .discount { color: #FF8900; margin-bottom: .5em; }
.couponTxt .discount{ font-size: 16px; font-weight: bold; line-height: 1.6; }
.postCoupon .discount { font-size: 26px; font-weight: 700; line-height: 1.6; }
.couponTxt p,
.postCoupon p { border-top: 1px dotted #A7A7A7; padding: .5em 0; }
.couponTxt p { font-size: 12px; line-height: 1.75; }
.postCoupon p { font-size: 14px; line-height: 1.75; }
.couponTxt .expiration,
.postCoupon .expiration { padding: .5em 0; border-top: 1px dotted #A7A7A7; }
.couponTxt .expiration { font-size: 10px; line-height: 1.75; color: #7e7e7e; }
.postCoupon .expiration { font-size: 14px; line-height: 1.75; }
@media screen and (min-width: 768px){
	.couponBox { justify-content: left; }
	#coupon { background: transparent; }
	#home #coupon { padding-top: 0; }
	#coupon .inner { width: 100%; }
	.couponBox { padding: 6px; }
	.coupon { width: 23%; margin-right: 2%; }
	.coupon:hover { background-color: #EEFAE7; }
}
/* ==================================================
#tagBox
================================================== */
#tagBox ul { text-align: left; }
#tagBox ul li { display: inline-block; width: 30%; margin: 0 0 15px 3%; font-size: 12px; line-height: 1.75; }
#tagBox ul li:nth-of-type(3n+1) { margin: 0 0 15px; }
#tagBox ul li a { display: block; background: #EDEDED; padding: .5em 1em; border-radius: 6px; }
@media screen and (min-width: 768px){
	#tagBox ul { text-align: center; }
	#tagBox ul li { display: inline-block; width: auto; margin: 0 0 15px 10px; }
	#tagBox ul li:nth-of-type(3n+1) { margin: 0 0 15px 10px; }
	#tagBox ul li a:hover { background-color: #EEFAE7; }
}

/* ==================================================
#aboutBnr
================================================== */
#aboutBnr {  }
#aboutBnr ul { display: flex; justify-content: space-between; }
#aboutBnr ul li { width: 48%; margin: 0; }
#aboutBnr ul li a { display: block; padding: 1em .5em; border-radius: 6px; border: 1px solid #BFBFBF; font-size: 12px; line-height: 1.75; text-align: center; }
#aboutBnr ul li a:active { background-color: #EEFAE7; }
@media screen and (min-width: 768px){
	#aboutBnr ul li a { font-size: inherit; }
	#aboutBnr ul li a:hover { background-color: #EEFAE7; }
}


/* ==================================================
#post
================================================== */
.article h1 { text-align: left !important; font-size: 22px; line-height: 1.75; width: 90%; margin: 10px auto 10px !important; }
#subCategories { width: 90%; margin: 0 auto 20px; font-size: 12px; line-height: 1.75; }
#subCategories a { display: inline-block; margin: 0 .5em .5em 0; background: #EDEDED; padding: .5em 1em; border-radius: 6px; font-size: 8px; }
#subCategories a:active { background-color: #EEFAE7; }
@media screen and (min-width: 768px){
	.article h1 { margin-top: 1em!important; }
	.article h1,
	#subCategories { width: 100%; }
	#subCategories a:hover { background-color: #EEFAE7; }

}
.postBox { width: 90%; margin: 0 auto; }
.postBox h4 { font-weight: bold; font-size: 20px; margin-bottom: 1em; }
@media screen and (min-width: 768px){
	.postBox { width: 100%; }
}
.postImg { margin-bottom: 40px; }
.postImg img { display: block; width: 100%; }

.postMaps {}
.postMaps a { display: block; padding: 1em 0; text-align: center; font-size: 12px; line-height: 1.75; color: #fff; background: #FF8900; border-radius: 6px; box-shadow: 0 3px 0 #9F5602; }
.postMaps .ggmap { display: none; }

@media screen and (min-width: 768px){
	.postMaps a { display: none; }
	.postMaps .ggmap { display: block; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
	.ggmap iframe,
	.ggmap object,
	.ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

.article aside { margin: 30px auto; text-align: center; }
.article aside a { display: block; padding: 1em 0; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.75; color: #fff; background: #FF8900; border-radius: 6px; box-shadow: 0 3px 0 #9F5602; }
@media screen and (min-width: 768px){
	.article aside a { display: inline-block; padding: 1em; width: 20em; }
}
.swiper-custom-button {  }


#contents { position: relative; }
#contents.loading::before { content: ''; width: 100%; height: 100%; z-index: 10; position: absolute; background: rgba(255, 255, 255, 0.5); left: 0; top: 0;}