.THFont{ font-family: 'Noto Sans Thai', sans-serif; }
.ENFont{ font-family: 'Barlow Condensed', sans-serif; }

.AllFontGunmaSP{ font-family: 'Noto Sans Thai', sans-serif; }

/* GunmaSPBanner */
.GunmaSPBanner{ width: auto; height: auto; margin: auto; }
.GunmaSPBanner img{ width: 100%; max-width: 100%; height: auto;}

/* SectionIntro */
.SectionIntro{ margin: 0; padding: 70px 0; height: auto; position: relative; }
.SectionIntroBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative;}
.SectionIntroBox:after{ width: 200px; height: 80px; content: ''; position: absolute; background-color: #ccc; right: 0; top: 0; background:url("../images/gunma-sp/right-intro-icon.svg") no-repeat; background-position: center; background-size: contain;}
.SectionIntroBox h1{ font-size: 38px; font-weight: 600; padding-right: 230px; }
.SectionIntroBox .Captions{ margin-top: 10px;}

/* SectionTravel */
.SectionTravel{ margin: 0; padding: 60px 0; background-color: #eeeceb; height: auto; position: relative; }
.SectionTravelBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative;}
.SectionTravelBox ul{ margin: 0; padding: 0px; display: flex; flex-wrap: wrap;}
.SectionTravelBox ul li{ width: 22%; margin: 0 2%; text-align: center; font-size: 11px; font-weight: 500;}
.SectionTravelBox ul li:first-child{ margin-left: 0;}
.SectionTravelBox ul li:last-child{ margin-right: 0;}
.SectionTravelBox ul li a{ text-decoration: none;  color: #000;}
.SectionTravelBox ul li .TravelBox{ min-height: 90px; position: relative; border-radius: 5px; display: flex; align-items: center; justify-content:center; padding: 10px; color: #cbe0d6; font-size: 23px; font-weight: 600; background:url("../images/gunma-sp/bg-travel-place.png") no-repeat; background-position: center; background-size: cover;}
.SectionTravelBox ul li .TravelBox span{ position: relative;}
.SectionTravelBox ul li .TravelBox span:after{ position: absolute; content: ''; width: 60px; height: 2px; background-color: #cbe0d6; bottom: -5px; left: 0; right: 0; margin: auto;}
.SectionTravelBox ul li p{ margin-bottom: 0;}

/* AccessSection */
.AccessSection{ margin: 0; padding: 0; height: auto; position: relative; }
.AccessSection .Map{ position: absolute; width: 50%; right: 0; top: 35%; text-align: right;}
.AccessSection .Map img{ width: 100%; max-width: 750px; height: auto;}
.AccessSection .Head{ position: relative; min-height: 300px; font-family: 'Barlow Condensed', sans-serif; background:url("../images/gunma-sp/bg-top1.png") no-repeat; background-position: top center; background-size: cover; z-index: 1;}
.AccessSection .Head h3{ max-width: 1160px; margin: auto; position: relative; padding-top: 200px; padding-bottom: 100px;}
.AccessSection .Head h3 span{ font-size: 110px; font-weight: 400; text-transform: uppercase; font-style: italic; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.AccessSection .body{ background-color: #fff; overflow: auto;}
.AccessSection .body .AccessSectionBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative; font-size: 18px; }
.AccessSection .body .AccessSectionBox h2{ font-size: 40px; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; }
.AccessSection .body .AccessSectionBox ul{ display: block; width: 45%; }
.AccessSection .body .AccessSectionBox ul li{ width: auto; margin: 5% 0 7% 0; }
.AccessSection .body .AccessSectionBox ul li .Title{ font-size: 28px; font-weight: 600; margin-top: 20px; margin-bottom: 10px; padding-left: 50px; position: relative;}
.AccessSection .body .AccessSectionBox ul li .Title:before{ width: 35px; height: 35px; position: absolute; left: 0; top: 1px; content: ''; background:url("../images/gunma-sp/icon-play.svg") no-repeat; background-position: center; background-size: contain;}
.AccessSection .body .AccessSectionBox ul li .Descriptions{ margin: 10px 0;}
.AccessSection .body .AccessSectionBox ul li p{ margin: 0; padding: 0;}

/* GunmaSPBannerHotels */
.GunmaSPBannerHotels{ text-align: center; padding: 100px 0;}
.GunmaSPBannerHotels img{ width: 100%; max-width: 850px; height: auto; }

/* SpotSection */
.SpotSection{ margin: 0; padding: 0; height: auto; position: relative; }
.SpotSection .Head{ position: relative; min-height: 300px; font-family: 'Barlow Condensed', sans-serif; background:url("../images/gunma-sp/bg-top.png") no-repeat; background-position: top center; background-size: cover; z-index: 1;}
.SpotSection .Head h3{ max-width: 1160px; margin: auto; position: relative; padding-top: 200px;}
.SpotSection .Head h3 span{ font-size: 110px; font-weight: 400; text-transform: uppercase; font-style: italic; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.SpotSection .body{ background-color: #e8f1ed; overflow: auto;}
.SpotSection .body .SpotSectionBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative; font-size: 18px; }
.SpotSection .body .SpotSectionBox h2{ font-size: 40px; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; }
.SpotSection .body .SpotSectionBox ul{ display: flex; flex-wrap: wrap; }
.SpotSection .body .SpotSectionBox ul li{ width: 47.5%; margin: 5% 0 5% 5%; }
.SpotSection .body .SpotSectionBox ul li:nth-child(odd){  margin-left: 0; }
.SpotSection .body .SpotSectionBox ul li p{ margin: 0; padding: 0; }
.SpotSection .body .SpotSectionBox ul li .Picture{ width: auto; height: 350px; overflow: hidden; border-radius: 10px; }
.SpotSection .body .SpotSectionBox ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .4s; }
.SpotSection .body .SpotSectionBox ul li .Title{ font-size: 35px; font-weight: 500; margin-top: 20px;}
.SpotSection .body .SpotSectionBox ul li .Descriptions{ margin: 20px 0;}
.SpotSection .body .SpotSectionBox ul li .Link{ margin-top: 40px;}
.SpotSection .body .SpotSectionBox ul li .Link a{  padding: 15px 40px; background-color: #164930; color: #fff; border-radius: 5px;}
.SpotSection .Tail{ height: 150px; background:url("../images/gunma-sp/bg-tail.png") no-repeat; background-position: bottom center; background-size: cover;}

/* Gourmet */
.GourmetSection{ margin: 0; padding: 0; height: auto; position: relative; }
.GourmetSection .Head{ position: relative; min-height: 300px; font-family: 'Barlow Condensed', sans-serif; background:url("../images/gunma-sp/bg-top2.png") no-repeat; background-position: top center; background-size: cover; z-index: 1;}
.GourmetSection .Head h3{ max-width: 1160px; margin: auto; position: relative; padding-top: 200px;}
.GourmetSection .Head h3 span{ font-size: 110px; font-weight: 400; text-transform: uppercase; font-style: italic; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.GourmetSection .body{ background-color: #fff; overflow: auto;}
.GourmetSection .body .GourmetSectionBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative; font-size: 18px; }
.GourmetSection .body .GourmetSectionBox h2{ font-size: 40px; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; }
.GourmetSection .body .GourmetSectionBox ul{ display: flex; flex-wrap: wrap; }
.GourmetSection .body .GourmetSectionBox ul li{ width: 30%; margin: 5% 0 5% 5%; }
.GourmetSection .body .GourmetSectionBox ul li:first-child{ margin-left: 0;}
.GourmetSection .body .GourmetSectionBox ul li:last-child{ margin-right: 0;}
.GourmetSection .body .GourmetSectionBox ul li p{ margin: 0; padding: 0; }
.GourmetSection .body .GourmetSectionBox ul li .Picture{ width: auto; height: 280px; overflow: hidden; border-radius: 10px; }
.GourmetSection .body .GourmetSectionBox ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .4s; }
.GourmetSection .body .GourmetSectionBox ul li .Title{ font-size: 35px; font-weight: 500; margin-top: 20px;}
.GourmetSection .body .GourmetSectionBox ul li .Descriptions{ margin: 20px 0;}

/* HotelsSection */
.HotelsSection{ margin: 0; padding: 0; height: auto; position: relative; }
.HotelsSection .Head{ position: relative; min-height: 300px; font-family: 'Barlow Condensed', sans-serif; background:url("../images/gunma-sp/bg-top3.png") no-repeat; background-position: top center; background-size: cover; z-index: 1;}
.HotelsSection .Head h3{ max-width: 1160px; margin: auto; position: relative; padding-top: 200px;}
.HotelsSection .Head h3 span{ font-size: 110px; font-weight: 400; text-transform: uppercase; font-style: italic; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.HotelsSection .body{ background-color: #e8f1ed; overflow: auto;}
.HotelsSection .body .HotelsSectionBox{ max-width: 1160px; margin: auto; padding: 50px 0; height: auto; text-align: left; position: relative; font-size: 18px; }
.HotelsSection .body .HotelsSectionBox h2{ font-size: 40px; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; }
.HotelsSection .body .HotelsSectionBox .Banner10{ margin: 60px 0; text-align: center; }
.HotelsSection .body .HotelsSectionBox .Banner10 img{ width: 100%; max-width: 850px; height: auto; }
.HotelsSection .Tail{ height: 150px; background:url("../images/gunma-sp/bg-tail.png") no-repeat; background-position: bottom center; background-size: cover;}

/* ReviewSection */
.ReviewSection{ margin: 0; padding: 0; height: auto; position: relative; margin-bottom: 80px; }
.ReviewSection .Head{ position: relative; min-height: 300px; font-family: 'Barlow Condensed', sans-serif; background:url("../images/gunma-sp/bg-top4.png") no-repeat; background-position: top center; background-size: cover; z-index: 1;}
.ReviewSection .Head h3{ max-width: 1160px; margin: auto; position: relative; padding-top: 200px;}
.ReviewSection .Head h3 span{ font-size: 110px; font-weight: 400; text-transform: uppercase; font-style: italic; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.ReviewSection .body{ background-color: #fff; overflow: auto;}
.ReviewSection .body .ReviewSectionBox{ max-width: 1160px; margin: auto; padding: 50px 0; height: auto; text-align: left; position: relative; font-size: 18px; }
.ReviewSection .body .ReviewSectionBox h2{ font-size: 40px; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; }
.ReviewSection .body .ReviewSectionBox .VideoBox{ text-align: center; max-width: 600px; margin: auto; overflow: hidden; padding-bottom:0%; position: relative; height: 360px; margin-top: 50px; }
.ReviewSection .body .ReviewSectionBox .VideoBox iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}


/* -------------------------------------  1280px  ------------------------------------- */
@media(max-width:1280px)
{
	/* SectionIntro */
	.SectionIntroBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    .SectionIntroBox:after{ width: 200px; height: 60px; }
    .SectionIntroBox h1{ font-size: 32px; padding-right: 250px; }

    /* SectionTravel */
    .SectionTravelBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    .SectionTravelBox ul li .TravelBox{ font-size: 20px;}

    /* AccessSection */
    .AccessSection .Head h3{ max-width: auto; margin-left: 60px; margin-right: 60px; padding-top: 120px; }
    .AccessSection .body .AccessSectionBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* SpotSection */
    .SpotSection .Head h3{ max-width: auto; margin-left: 60px; margin-right: 60px; padding-top: 120px; }
    .SpotSection .body .SpotSectionBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    .SpotSection .body .SpotSectionBox ul li .Picture{ height: 300px; }

    /* GourmetSection */
    .GourmetSection .Head h3{ max-width: auto; margin-left: 60px; margin-right: 60px; padding-top: 120px; }
    .GourmetSection .body .GourmetSectionBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    .GourmetSection .body .GourmetSectionBox ul li .Picture{ height: 250px; }

    /* HotelsSection */
    .HotelsSection .Head h3{ max-width: auto; margin-left: 60px; margin-right: 60px; padding-top: 120px; }
    .HotelsSection .body .HotelsSectionBox{ max-width: auto; margin-left: 60px; margin-right: 60px; padding: 20px 0; }

    /* ReviewSection */
    .ReviewSection .Head h3{ max-width: auto; margin-left: 60px; margin-right: 60px; padding-top: 120px; }
    .ReviewSection .body .ReviewSectionBox{ max-width: auto; margin-left: 60px; margin-right: 60px; padding: 20px 0; }

}

/* -------------------------------------  1023px  ------------------------------------- */
@media(max-width:1023px)
{
	/* SectionIntro */
	.SectionIntroBox{ width: 90%; margin: auto; }
    .SectionIntroBox:after{ width: 140px; height: 60px; }
    .SectionIntroBox h1{ font-size: 30px; padding-right: 200px; }

    /* SectionTravel */
    .SectionTravelBox{ width: 90%; margin: auto; }
    .SectionTravelBox ul li .TravelBox{ font-size: 18px;}

    /* AccessSection */
    .AccessSection .Head h3{ width: 90%; margin: auto; padding-top: 120px; }
    .AccessSection .Head h3 span{ font-size: 90px;}
    .AccessSection .body .AccessSectionBox{ width: 90%; margin: auto; font-size: 16px; }

    /* GunmaSPBannerHotels */
    .GunmaSPBannerHotels{ width: 90%; margin: auto; padding: 50px 0; }

    /* SpotSection */
    .SpotSection .Head h3{ width: 90%; margin: auto; padding-top: 120px; }
    .SpotSection .Head h3 span{ font-size: 90px;}
    .SpotSection .body .SpotSectionBox{ width: 90%; margin: auto; }
    .SpotSection .body .SpotSectionBox ul li .Picture{ height: 250px; }
    .SpotSection .body .SpotSectionBox ul li .Title{ font-size: 30px; }
    .SpotSection .body .SpotSectionBox ul li .Descriptions{ margin: 10px 0; font-size: 16px;}
    .SpotSection .body .SpotSectionBox ul li .Link{ margin-top: 30px;}
    .SpotSection .body .SpotSectionBox ul li .Link a{  padding: 10px 30px;}

    /* GourmetSection */
    .GourmetSection .Head h3{ width: 90%; margin: auto; padding-top: 120px; }
    .GourmetSection .Head h3 span{ font-size: 90px;}
    .GourmetSection .body .GourmetSectionBox{ width: 90%; margin: auto; }
    .GourmetSection .body .GourmetSectionBox ul li .Picture{ height: 200px; }
    .GourmetSection .body .GourmetSectionBox ul li .Title{ font-size: 30px; }
    .GourmetSection .body .GourmetSectionBox ul li .Descriptions{ margin: 10px 0; font-size: 16px;}

    /* HotelsSection */
    .HotelsSection .Head h3{ width: 90%; margin: auto; padding-top: 120px; }
    .HotelsSection .Head h3 span{ font-size: 90px;}
    .HotelsSection .body .HotelsSectionBox{ width: 90%; margin: auto; padding: 0; }
    .HotelsSection .body .HotelsSectionBox .Banner10{ margin: 30px 0; }

    /* ReviewSection */
    .ReviewSection .Head h3{ width: 90%; margin: auto; padding-top: 120px; }
    .ReviewSection .Head h3 span{ font-size: 90px;}
    .ReviewSection .body .ReviewSectionBox{ width: 90%; margin: auto; padding: 0; }


}

/* -------------------------------------  640px  ------------------------------------- */
@media(max-width:640px)
{
    /* SectionIntro */
    .SectionIntroBox:after{ width: 140px; height: 60px; top: -40px; }
    .SectionIntroBox h1{ font-size: 26px; padding-right: 100px; }

    /* SectionTravel */
    /* SectionTravel */
    .SectionTravel{ padding: 40px 0; }
    .SectionTravelBox ul li{ width: 47%; margin: 3% 0 3% 3%; }
    .SectionTravelBox ul li:nth-child(odd){ margin-left: 0; margin-right: 3%; }
    .SectionTravelBox ul li .TravelBox{ font-size: 18px;}

    /* AccessSection */
    .AccessSection .Map{ width: 100%; margin: auto; padding-left: 40px; margin-bottom: 40px; position: relative; right: 0; top: 10px; }
    .AccessSection .body .AccessSectionBox ul{ width: 100%; }
    .AccessSection .Head h3{ padding-top: 120px; }
    .AccessSection .Head h3 span{ font-size: 80px;}
    .AccessSection .body .AccessSectionBox h2{ font-size: 30px; }

    /* SpotSection */
    .SpotSection .Head h3{ padding-top: 120px; }
    .SpotSection .Head h3 span{ font-size: 80px;}
    .SpotSection .body .SpotSectionBox h2{ font-size: 30px; }
    .SpotSection .body .SpotSectionBox ul{ display: block; margin-top: 40px; }
    .SpotSection .body .SpotSectionBox ul li{ width: 100%; margin: 20px 0 60px 0!important;}
    .SpotSection .body .SpotSectionBox ul li .Picture{ height: auto; }
    .SpotSection .body .SpotSectionBox ul li .Title{ font-size: 30px; }
    .SpotSection .body .SpotSectionBox ul li .Descriptions{ margin: 10px 0; font-size: 16px;}
    .SpotSection .body .SpotSectionBox ul li .Link{ margin-top: 30px;}
    .SpotSection .body .SpotSectionBox ul li .Link a{  padding: 10px 30px;}

    /* GourmetSection */
    .GourmetSection .Head h3{ padding-top: 120px; }
    .GourmetSection .Head h3 span{ font-size: 80px;}
    .GourmetSection .body .GourmetSectionBox h2{ font-size: 30px; }
    .GourmetSection .body .GourmetSectionBox ul{ display: block; margin-top: 40px; }
    .GourmetSection .body .GourmetSectionBox ul li{ width: 100%; margin: 20px 0 60px 0!important;}
    .GourmetSection .body .GourmetSectionBox ul li .Picture{ height: auto; }
    .GourmetSection .body .GourmetSectionBox ul li .Title{ font-size: 30px; }
    .GourmetSection .body .GourmetSectionBox ul li .Descriptions{ margin: 10px 0; font-size: 16px;}

    /* HotelsSection */
    .HotelsSection .Head h3{ padding-top: 120px; }
    .HotelsSection .Head h3 span{ font-size: 80px;}
    .HotelsSection .body .HotelsSectionBox h2{ font-size: 30px; }

    /* ReviewSection */
    .ReviewSection .Head h3{ padding-top: 120px; }
    .ReviewSection .Head h3 span{ font-size: 80px;}
    .ReviewSection .body .ReviewSectionBox h2{ font-size: 30px; }
    .ReviewSection .body .ReviewSectionBox .VideoBox{ height: 320px; }
}

/* -------------------------------------  480px  ------------------------------------- */
@media(max-width:480px)
{
    /* SectionIntro */
    .SectionIntroBox:after{ width: 120px; height: 50px; top: -40px; }
    .SectionIntroBox h1{ padding-top: 30px; font-size: 23px; padding-right: 0; }

    /* ReviewSection */
    .ReviewSection .Head{ position: relative; min-height: 270px;}
    .ReviewSection .body .ReviewSectionBox .VideoBox{ height: 200px; }
}

/* -------------------------------------  320px  ------------------------------------- */
@media(max-width:320px)
{

}