@charset "utf-8";
/* CSS Document */

:root {
    --main_color: #c28a6a;
}
.mg_t8 {
    margin-top: 8px;
}

/* 日本地図 */
.japanMap{position: relative;margin-top: 40px;}
.japanMap h4{font-size: 17px;line-height: 1.3;margin-bottom: 10px;}
.japanMap h4 span{color: var(--main_color); font-size: 18px;}
.japanMap h4 small{font-size:10px;}
.japanMap p{font-size: 13px; line-height: 1.6;}
.japanMap p span{ color: var(--main_color);}
.japanMap p a{ color: #000; text-decoration: none; display: block; margin-top: 3px;}
.japanMap p.lh_1{line-height: 1.2;}

/* 日本地図 PC用 */
.japanMap .map-img {width: 950px;}
.japanMap ul {position: relative;}
.japanMap-item01 {position: absolute; 
    top: 10px;
    left: 0;
    width: 250px;
}
.japanMap-item02 {position: absolute; 
    top: 540px;
    left: 120px;
    width: 250px;
}
.japanMap-item03 {position: absolute; 
    top: 40px;
    right: 210px;
    width: 250px;
}
.japanMap-item04 {position: absolute; 
    bottom: 130px;
    right: 125px;
    width: 250px;
}
/* 日本地図 SP用 */
.japanMap ul li:not(:last-child) {z-index: 5}
.japanMap_sp{position: relative;}
.japanMap_sp ul{max-width: 500px; position: relative; display: block; margin: 0 auto;}
.japanMap_sp ul li.pinIcon{position: absolute; width: 5%; z-index: 1;}
.japanMap_sp ul li.pinIcon:nth-child(1){top: 56%; left: 28.7%;}
.japanMap_sp ul li.pinIcon:nth-child(2){bottom: 26.2%; left: 29.2%;}
.japanMap_sp ul li.pinIcon:nth-child(3){top: 47.5%; left: 34.5%;}
.japanMap_sp ul li.pinIcon:nth-child(4){top: 56%; left: 39.5%;}
.japanMap_sp ul li.pinIcon:nth-child(5){top: 70%; right: 62%;}
/* 点滅 */
@keyframes blinking {
	0% {opacity: 0;}
	75% {opacity: .9;}	
	100% {opacity: 1;}
}
.japanMap_sp ul li.pinIcon {animation: blinking 1.5s ease-in-out infinite alternate;}
.japanMap_sp ul li.pinIcon:nth-child(1){    top: 58%;
    left: 45.7%;}
.japanMap_sp ul li.pinIcon:nth-child(2){    bottom: 23.2%;
    left: 53.2%;}
.japanMap_sp ul li.pinIcon:nth-child(3){top: 39.5%;
    left: 52.5%;}
.japanMap_sp ul li.pinIcon:nth-child(4){top: 66%;
    left: 56.5%;}

@media screen and (max-width: 960px){
    .popup-box{background: #ffffff;padding: 45px 40px 15px;}
    .popup-box .flex figure,
    .popup-box .flex > div {width: 48%;} 
    .popup-box h4{font-size: 18px;line-height: 1.3;margin: 10px 0;}
    .popup-box h4 span{color: var(--main_color); font-size: 18px;}
    .popup-box p {font-size: 13px;line-height: 1.5;}
    .popup-box p span{color: var(--main_color);}
    .popup-box h4 small,
    .popup-box p small{display: inline-block; font-size: 10px; line-height: 1.5;}
}
@media screen and (max-width: 640px){
    .mfp-container .mfp-arrow{top: 35%;}
    .popup-box .flex figure,
    .popup-box .flex > div{width: 100%;} 	
}



/*ご当地プチ自慢*/
.contents_comic .inner {margin: 80px auto 0;}

.contents_comic .comic_right {width: 50%; position: relative;}
.contents_comic .comic_right .frame01 {position: absolute; top: 60px; right: -5px;z-index: 0;}
.contents_comic .comic_right .frame02 {display: none;}
.contents_comic .comic_right .flex {justify-content: left;}
.contents_comic .comic_right .comicbox02 {position: relative;z-index: 1;}
.contents_comic .comicWrapcomic_right h4 {color: #be7a82; padding-left: 10px;}

.contents_comic .comic_right p span {font-weight: bold;}

.contents_comic .comic_left {width: 50%; text-align: center;}
.contents_comic .comic_left .comicbox01 {margin-top: 10px; padding: 15px; border: 2px solid #e1d5cf;}
.contents_comic .comic_left .comicbox01 p {font-size: 10px; text-align: left;}

.contents_comic h3{text-align: center; font-size: clamp(20px, 2vw, 25px); margin-bottom: clamp(20px, 3vw, 40px);}
.contents_comic h3 span{border-bottom: 2px solid #333; padding-bottom: 5px;}

.contents_comic .nameBox{color: #fff; background: var(--main_color); margin:0 auto 10px; padding: 5px 10px; text-align: center; z-index: 1;}

.contents_comic .user_post_name {font-size: 12px; text-align: right; padding: 0 17px;}
.contents_comic .user_post_name span {font-size: 120%; font-weight: bold;}

@media screen and (max-width: 640px){
    .contents_comic .inner {margin: 20px auto 0;}
    .contents_comic .inner figure {width: 100%; margin-bottom: 20px;}
    .contents_comic .comic_right {width: 100%;}

    .contents_comic .comic_right .frame01 {display: none;}
    .contents_comic .comic_right .frame02 {display: block; position: absolute; top: 60px; right: -5px;}
    .contents_comic .comic_right .comicbox02 p {padding: 0 10px;}

    .contents_comic .comic_left {width: 100%; margin-bottom: 20px;}
    .contents_comic .comic_left .comicbox01 {margin-top: 0; padding: 15px;}
}



/*皆さまからのお写真*/
.user_post .inner {margin: 80px auto 0;}
.user_post .grid_contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3%;
    row-gap: 40px;
}
.user_post h4 {background: var(--main_color); color: #fff;padding: 10px 0;text-align: center;line-height: 1.7;}
.user_post figure {padding: 8px; margin-top: 10px;}
.user_post figure > img {border: 8px solid #fff; box-shadow: 0 0 10px #bbb;}
.user_post .user_post_text {line-height: 1.7; text-align: left; margin-top: 7px; padding: 0 17px;}
.user_post .user_post_name {font-size: 12px; text-align: right; padding: 0 17px;}
.user_post .user_post_name span {font-size: 120%; font-weight: bold;}

@media screen and (max-width: 960px){
    .user_post .grid_contents {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 640px){
    .user_post .grid_contents {
        grid-template-columns: 100%;
    }
}



/*プレゼント*/
.contents_present .inner{margin: 80px auto 0;}
.contents_present .photoWrap{position: relative; background: #f1e5dd; padding: 20px 30px;}

.contents_present .noticeWrap {margin: 0 auto; text-align: center;}
.contents_present .noticeWrap h3 {margin-bottom: 15px;}
.contents_present .noticeWrap p {font-size: 14px; text-align: left;}
.contents_present .noticeWrap p span {font-weight: bold;}
.contents_present .RecruitmentWrap {text-align: center; margin-top: 30px;}
.contents_present .RecruitmentWrap img {max-width: 500px;}

.contents_present .photoWrap .item_right{width: 80%;}
.contents_present .photoWrap .item_right > h3{text-align: center; font-size: 20px;}

.contents_present .photoWrapTtl {margin: 0 auto; text-align: center;}

.contents_present .presentWrap {margin: 0 auto 30px; justify-content: space-around;}
.contents_present .presentWrap .item_left {position: relative; width: 35%;}
.contents_present .presentWrap .item_left .flex {}
.contents_present .presentWrap .item_left .flex img {width: 77px;padding-right: 3%;}
.contents_present .presentWrap .item_left .flex h3 {width: calc(100% - 77px);}
.contents_present .presentWrap .item_right {width: 60%;}
.contents_present .presentWrap .item_right h3 {text-align: left;}
.contents_present .presentWrap .item_right h4 span {color: var(--main_color);}
.contents_present .presentWrap .item_right p span {color: var(--main_color);}


.contents_present .postWrap {margin: 40px auto 0; width: 70%; justify-content: flex-end;}
.contents_present .postWrapTtl {margin: 0 auto 20px; text-align: center;}
.contents_present .postWrapTtl h3 {position: absolute; top: 0; left: 0; color: #fff; font-size: 20px; background-color: #000; width: 100%;}
.contents_present .postWrapTtl img{margin-top:35px; max-width: 299px; width: 100%;}
.contents_present .postWrap .item_left {position: relative; width: 70%;}
.contents_present .postWrap .item_left p {font-size: 14px;}
.contents_present .postWrap .item_left p:last-child {font-size: 18px; color: var(--main_color); margin-top: 5px;}
.contents_present .postWrap .item_right {width: 25%;}


@media screen and (max-width: 640px){
    .contents_present .inner{margin: 40px auto 0;}

    .contents_present .photoWrap{padding: 20px;}
    .contents_present .photoWrapTtl {width: 80%;}

    .contents_present .presentWrap {display: block; margin: 0 auto;}
    .contents_present .presentWrap .item_left {width: 100%; margin-bottom: 20px;}
    .contents_present .presentWrap .item_left .flex img {left: 0; width: 20%;}
    .contents_present .presentWrap .item_right {width: 100%;}

    .contents_present .RecruitmentWrap h3 {font-size: 18px; margin-bottom: 5px;}
    .contents_present .RecruitmentWrap p {font-size: 13px; margin: 0 auto 5px;}
    .contents_present .noticeWrap h3 {width: 80%; margin: 0 auto 15px;}

    .contents_present .postWrap {width: 100%; justify-content: space-between;}
    .contents_present .postWrapTtl {width: 80%;}
    .contents_present .postWrapTtl h3 {font-size: 16px;}
    .contents_present .postWrap .item_left {width: 50%;}
    .contents_present .postWrap .item_right {width: 45%;}
    .contents_present .postWrap .item_left p:last-child {font-size: 14px; margin: 0 auto 5px;}

}