@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc{display: block;}
.sp{display: none;}
ul {list-style: none;}
figure{line-height: 0;}
a img:hover{opacity: 0.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

/*----fonttype----*/
.zenmaru{font-family: zen-maru-gothic, sans-serif;
font-style: normal;}
.monopin{font-family: "monopin-j", sans-serif;
font-style: normal;}
.genokaku{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;}


h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}



.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
.mainbnr img{max-width: 70%;margin: 0 auto;}
.inner{width: 1000px;margin: 0 auto;}



#prologue{margin: 0 0 80px;}
#prologue .inner{padding: 60px 0 0;}
#prologue h2{font-size: 25px; color: #54b1db; text-align: center; margin-bottom: 30px;}
#prologue p{text-align: left; font-size: 16px; color: #242424; width: 670px; margin: 0 auto;}


.common:nth-child(n+2){margin-top: 80px;}
.common .appeal-area{display: flex; flex-wrap: wrap; justify-content:space-between;margin-bottom: 40px;}
.common .appeal-area figure{width: 57%;}
.common .appeal-area figure img{width: 100%;}
.common .appeal-area .appeal-area-txt{width: 40%; align-content: center;}
.common .appeal-area .appeal-area-txt h2{font-size: 29px; position: relative; text-align: center; padding-bottom: 15px;}
.common .appeal-area .appeal-area-txt p{font-size: 16px;}


.common .product-block {display: flex; flex-wrap: wrap;}
.common .product-block .product-block-item{display: flex; width: 22%; margin-right: 4%; flex-direction: column;}
.common .product-block .product-block-item:nth-child(4n){margin-right: 0%;}
.common .product-block .product-block-item:nth-child(n+5){margin-top: 30px;}
.common .product-block .product-block-item figure{padding-bottom: 20px;}
.common .product-block .product-block-item figure img{width: 100%;}
.common .product-block .product-block-item .seiretsu{display: flex; flex-direction: column; flex-grow: 1;}
.common .product-block .product-block-item h3{font-size: 16px; padding-bottom: 15px;}
.common .product-block .product-block-item p{font-size: 18px; color: #cc2a24; align-content: end; flex-grow: 1;}


#block-1 .appeal-area .appeal-area-txt h2 span{color: #cc2424; position: relative;}
#block-1 .appeal-area .appeal-area-txt h2 span:before{content: ""; background: url("../img/kazari-01.webp")no-repeat; width: 27px; height: 23px; position: absolute; left: -19px; top: -14px;}

#block-2 .appeal-area .appeal-area-txt h2 .color1{color: #cc2424;}
#block-2 .appeal-area .appeal-area-txt h2 .color2{color: #ec8bba;}
#block-2 .appeal-area .appeal-area-txt h2 .color3{color: #4bb84b;}
#block-2 .appeal-area .appeal-area-txt h2 .color4{color: #433eab;}
#block-2 .appeal-area .appeal-area-txt h2 .color5{color: #cc2424;}
#block-2 .appeal-area .appeal-area-txt h2 .color6{color: #ec8bba;}


#block-3 .appeal-area .appeal-area-txt h2 .color1{color: #4bb84b;}
#block-3 .appeal-area .appeal-area-txt h2 .color2{color: #F69500;}

#block-4 .appeal-area .appeal-area-txt h2 .color1{color: #305B26;}

#block-5 .appeal-area .appeal-area-txt h2 .color1{color: #cc2424;}
#block-5 .appeal-area .appeal-area-txt h2 .color2{color: #8ED0E0;}


#block-7{margin-top: 80px;}
#block-7 h2{font-size: 29px; text-align: center; margin-bottom: 30px;}
#block-7 a .box{justify-content: space-around;}
#block-7 a{width: 48%;}
#block-7 a img{width: 100%;}


.spotlist_back {
	margin-top: 60px;
	text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}




@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}

	
	h1 img{max-width: 100%;}
	.inner{width: 95% !important;}
	.mainbnr img{max-width: 100%;}
	
	#prologue{margin: 0;}
	#prologue .inner{padding: 20px 0 0;}
	#prologue h2{margin-bottom: 10px;}
	#prologue p{width: 100%;}
	
	
	.common .appeal-area figure{width: 100%;}
	.common .appeal-area .appeal-area-txt{width: 100%;}
	.common .appeal-area .appeal-area-txt h2{font-size: 25px;}
	.common .product-block .product-block-item{width: 47%; margin-right: 6%; flex-grow: inherit;}
	.common .product-block .product-block-item:nth-child(2n){margin-right: 0%;}
	.common .product-block .product-block-item:nth-child(n+3){margin-top: 30px;}
	.common .product-block .product-block-item figure img{width: 100%;}
	
	
	#block-7{margin-top: 0;}
	#block-7 h2{font-size: 25;}
	#block-7 a{width: 100%;}
	
	
	
}

/* ==========================
   セクション背景
========================== */

#block-2,
#block-4,
#block-6{
    background:#ffffff;
}

#block-1,
#block-3,
#block-5{
    background:#eef9ff;
}

.common{
    padding:40px 0;
    border-radius:20px;
}


/* ==========================
   アレンジ
========================== */

.arrange-title{
    text-align: center;
    margin-bottom: 18px;
}

.arrange-title img{
    display: block;
    width: 80%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}


/* ==========================
   h3　装飾
========================== */

.circle-title{
    position: relative;
    display: inline-block;
    color: #158b2b;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 35px;
    margin: 1.5em auto;
}

.circle-title::before{
    content: "";
    position: absolute;
    inset: -8px -20px;
    border: 5px solid #a6ddb0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 999px;
    pointer-events: none;
}