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

.AllKintetsu{ font-family: 'Noto Sans Thai', sans-serif; font-weight: 400; background-color: #fff; color: #1a1a1a; position: relative; }
.LeftLine{ width: 40%; height: auto; position: absolute; top: 9.8%; left: 0; z-index: 1; }
.LeftLine img{ width: 100%; height: auto; max-width: 100%; }
.RightLine{ width: 35%; height: auto; position: absolute; top: 13.8%; right: 0; z-index: 1; }
.RightLine img{ width: 100%; height: auto; max-width: 100%; }

/* MeijiBanner */
.TopBanner{ width: auto; height: auto; margin: auto; position: relative; z-index: 9; }
.TopBanner img{ width: 100%; max-width: 100%; height: auto;}

/* SectionIntro */
.SectionIntro{ margin: 0; padding: 50px 0 100px 0; height: auto; position: relative; z-index: 2; }
.SectionIntroBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative;}
.SectionIntroBox h1 span{ display: block; }
.SectionIntroBox .Captions{ margin: auto; margin-top: 30px; font-size: 22px; font-weight: 300; line-height: 38px; }
.SectionIntroBox .Descriptions{ margin: auto; margin-top: 50px; font-size: 22px; font-weight: 300; line-height: 38px; }

/* NaganoNav */
.NaganoNav{ margin: 0; padding: 80px 0; height: auto; position: relative; z-index: 2;  }
.NaganoNavBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative; }
.NaganoNavBox ul{ display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; }
.NaganoNavBox ul li { width: 100%; overflow: hidden; display: flex; text-align: center; border-radius: 10px; }
.NaganoNavBox ul li:hover{ opacity: 0.8;}
.NaganoNavBox ul li a{ display: block; width: 100%; padding: 20px; font-size: 24px; font-weight: 600; color: #1a1a1a; }
.NaganoNavBox ul li img{ width: auto; max-width: 65px; display: block; margin: auto;}
.NaganoNavBox ul li span{ display: block; }
.NaganoNavBox ul li p{ margin: 0;padding: 0; height: 75px; display: flex; align-items: center; margin-bottom: 20px;}
.NaganoNavBox ul li:nth-child(1){ background-color: #fad4de;}
.NaganoNavBox ul li:nth-child(2){ background-color: #fce5ce;}
.NaganoNavBox ul li:nth-child(3){ background-color: #e2f3d1;}
.NaganoNavBox ul li:nth-child(4){ background-color: #d7f1e4;}
.NaganoNavBox ul li:nth-child(5){ background-color: #dae3f4;}

/* SectionMap */
.SectionMapTop{ width: auto; margin-top: 50px;}
.SectionMapTop img{ width: 100%; height: auto; max-width: 100%; vertical-align: bottom;}
.SectionMapBotton{ width: auto;}
.SectionMapBotton img{ width: 100%; height: auto; max-width: 100%; vertical-align: top;}
.SectionMap{ margin: 0; padding: 80px 0 80px 0; height: auto; position: relative; background-color: #fefbe7; }
.SectionMapBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative;}
.MapPhoto{ margin-top: 40px; text-align: center;}
.MapPhoto .MapImage{ margin-bottom: 30px;}
.MapPhoto .MapImage img{ width: 100%; height: auto; max-width: 100%;}
.MapPhoto .Links{ text-align: center; margin: 0; margin-top: 60px;}
.MapPhoto .Links a{ display: inline-block; background-color: #fff; border: 2px solid #fad310; color: #000; padding: 20px 50px; border-radius: 100px; font-size: 18px; font-weight: 600; }
.MapPhoto .Links a:hover{ background-color: #fad310; }

.DestinationTopPageBox{ position: relative; background-color: #fff; z-index: 2; }

/* HeaderSection */
.HeaderSection{ width: auto; height: auto; display: block; max-width: 1160px; margin: auto; position: relative; text-align: center; clear: both; margin-bottom: 20px; }
.HeaderSection h1{ letter-spacing: 1px; font-size: 36px; line-height: 55px; font-weight: 700; margin: 0; position: relative; }
.HeaderSection h2{ letter-spacing: 1px; font-size: 36px; line-height: 50px; font-weight: 700; margin: 0; position: relative; }
.HeaderSection h1 span{ display: block; }
.HeaderSection h2 span{ display: block; }
.HeaderSection .Captions{ margin: auto; margin-top: 20px; letter-spacing: 0; font-size: 22px; font-weight: 300; line-height: 35px; }

/* ContentRecommend */
.ContentBannerTail{ margin: 0; padding: 100px 0 100px 0; height: auto; position: relative; background-color: #fff; }
.ContentBannerTailBox{ max-width: 980px; margin: auto; height: auto; text-align: center; position: relative; }
.ContentBannerTailBox .BannerRecc{ margin-top: 40px; height: auto;}
.ContentBannerTailBox .BannerRecc img{ width: 100%; max-width: 850px; height: auto;}

/* SectionTravel */
.SectionTravel{ margin: 0; padding: 80px 0 80px 0; height: auto; position: relative; background-color: #fff; }
.SectionTravelBox{ max-width: 1160px; margin: auto; height: auto; text-align: left; position: relative;}
.SectionTravelList{ margin-top: 50px; }
.SectionTravelList ul{ display: flex; flex-wrap: wrap; justify-content: left; gap: 3%; }
.SectionTravelList ul li{ width: 31.33%; padding: 20px 25px 85px 25px; position: relative; margin-bottom: 3%; }
.SectionTravelList ul li p{ margin: 0;}
.SectionTravelList ul li .Area{ position: absolute; top: 0; right: 0; color: #fff; font-size: 20px; padding: 5px 15px; background-color: #1a1a1a;}
.SectionTravelList ul li .Title{ text-align: center; font-size: 33px; font-weight: 600; padding: 30px 0;}
.SectionTravelList ul li .Picture{ width: auto; height: 200px; overflow: hidden; margin: 0;}
.SectionTravelList ul li .Picture img{ display: block; width: 100%; height: 100%; margin: auto; object-fit: cover; transition: all .3s; }
.SectionTravelList ul li .Description{ font-size: 18px; line-height: 31px; color: #fff; padding: 30px 0; }
.SectionTravelList ul li .Links{ width: 85%; position: absolute; bottom: 30px; display: block; left: 0; right: 0; margin: auto; text-align: center; background-color: #fff; border: 2px solid #fad310; color: #000; padding: 15px 10px; border-radius: 100px; font-size: 18px; font-weight: 600; }
.SectionTravelList ul li .Links:hover{ background-color: #fad310; }
.SectionTravelList ul li.OsakaColor{ background-color: #64cab3;}
.SectionTravelList ul li.NaraColor{ background-color: #f5963c;}
.SectionTravelList ul li.KyotoColor{ background-color: #ed6487;}
.SectionTravelList ul li.MieColor{ background-color: #50c189;}
.SectionTravelList ul li.AichiColor{ background-color: #7a99d6;}

/* DestinationTopPageBox */
.DestinationTopPageBox{ font-family: 'db_adman_xbold';}
.DTPList .DestinationTopPageBox{ max-width: 1160px; }
.DTPList .DestinationTopPageBox ul{ display: flex; flex-wrap: wrap; justify-content: left; gap: 5%;}
.DTPList .DestinationTopPageBox ul li{ width: 47.5%!important; margin: 0!important; margin-bottom: 4%!important; position: relative;  }
.DTPList .DestinationTopPageBox ul li .Title{ font-size: 23px; }
.DTPList .DestinationTopPageBox ul li .PictureDisplay{ height: 320px!important;}
.DTPList .DestinationTopPageBox ul li .PictureDisplay img{ border-radius: 20px!important;}
.DestinationTopPageBox ul li .DateAndCate{ font-family: 'db_adman_xlight';}
/*.DTPList .DestinationTopPageBox ul li .Captions{ font-size: 17px!important;}
.DTPList .DestinationTopPageBox ul li .CategoryDisplay{ font-size: 13px!important;}
.DTPList .DestinationTopPageBox ul li .Captions{ font-size: 16px!important;}*/
.DestinationTopPageBox ul li .Captions{ font-family: 'db_adman_xlight';}
.ArticleReview{ font-size: 36px; font-weight: 600; text-align: left;}
.VideoDate{ margin: 10px 0 0 0; font-size: 16px; font-weight: 300; color: #ccc;}

.Recc .slick-prev,.Recc  .slick-next { top: 25%;}
.slick-prev, .slick-next { top: 35%;}

.TravelHomepageBox.ProvinceBox{ margin: 0 auto; padding: 80px 0; }
.TravelHomepageBox.ProvinceBox ul{ text-align: center;}
.TravelHomepageBox.ProvinceBox ul li{ width: 22.6%; margin: 5px; text-align: center; }
.TravelHomepageBox.ProvinceBox ul li .PictureDisplay{ text-align: center; height: 80px; display: flex; justify-content: center; align-items: center; }
.TravelHomepageBox.ProvinceBox ul li .PictureDisplay img{ width: 100%; height: auto; max-width: 240px; max-height: 70px;}
.TravelHomepageBox.ProvinceBox ul li p:before{ left: 0; right: 0; margin: auto;}
.TravelHomepageBox.ProvinceBox ul li .LineAround{ height: 78%;}

.VideoSec .DestinationTopPageBox ul li .PictureDisplay{ height: 195px!important;}
.VideoSec .DestinationTopPageBox ul li .Title{ font-size: 20px!important; line-height: 28px!important;}

/* -------------------------------------  1380px  ------------------------------------- */
@media(max-width:1530px)
{
    .LeftLine{ width: 36%; top: 9.5%; }
}

/* -------------------------------------  1440px  ------------------------------------- */
@media(max-width:1440px)
{
    .LeftLine{ width: 34%; top: 9%; }
    .RightLine{ width: 32%; }
}

/* -------------------------------------  1360px  ------------------------------------- */
@media(max-width:1360px)
{
    .LeftLine{ width: 32%; top: 8.8%; }
}

/* -------------------------------------  1280px  ------------------------------------- */
@media(max-width:1280px)
{
    .LeftLine{ width: 32%; top: 8.5%; }
    .RightLine{ width: 30%; top: 13.5%; }

    /* NaganoNav */
    .NaganoNavBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    .NaganoNavBox ul li a{ font-size: 20px; }

    /* SectionIntro */
	.SectionIntroBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* SectionMap */
    .SectionMapBox{ max-width: auto; margin-left: 60px; margin-right: 60px;}

    /* ContentRecommend */
    .ContentRecommendBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* SectionTravel */
    .SectionTravelBox{ max-width: auto; margin-left: 60px; margin-right: 60px;}
    .SectionTravelList ul li .Title{ font-size: 30px; letter-spacing: 0; }

    /* DestinationTopPageBox */
    .DTPList .DestinationTopPageBox ul li .PictureDisplay{ height: 280px!important;}

    /* HeaderSection */
    .HeaderSection{ max-width: auto; margin-left: 60px; margin-right: 60px;}

    .VideoSec .DestinationTopPageBox ul li .PictureDisplay{ height: 147px!important;}

}

/* -------------------------------------  1220px  ------------------------------------- */
@media(max-width:1220px)
{
    .LeftLine{ width: 33%; top: 7.6%; }
}

/* -------------------------------------  1023px  ------------------------------------- */
@media(max-width:1023px)
{
    .LeftLine{ width: 33%; top: 5.9%; }
    .RightLine{ width: 30%; top: 11.5%; }

    /* ContentRecommend */
    .ContentBannerTailBox{ width: 90%; margin: auto;}

    /* NaganoNav */
    .NaganoNavBox{ width: 90%; margin: auto; }
    .NaganoNavBox ul{ gap: 10px;}
    .NaganoNavBox ul li a{ padding: 10px; font-size: 18px; letter-spacing: 0; }
    .NaganoNavBox ul li img{ max-width: 50px; }
    .NaganoNavBox ul li p{ height: 65px; }

    /* HeaderSection */
    .HeaderSection{ width: 90%; margin: auto; }
    .HeaderSection h2{ font-size: 33px; }
    .HeaderSection h1{ font-size: 33px; line-height: 55px;}
    .HeaderSection .Captions{ font-size: 20px; line-height: 33px; }

    /* SectionIntro */
    .SectionIntro{ padding: 50px 0 100px 0;}
    .SectionIntroBox{ width: 90%; margin: auto; }
    .SectionIntroBox .Descriptions{ font-size: 20px; line-height: 33px; margin-top: 30px; }

    /* SectionMapBox */
    .SectionMapBox{ width: 90%; margin: auto; }

    /* ContentRecommend */
    .ContentRecommendBox{ width: 90%; margin: auto; }

    /* SectionTravel */
    .SectionTravelBox{ width: 90%; margin: auto;}
    .SectionTravelList ul li{ width: 48.5%; }

    /* DestinationTopPageBox */
    .DTPList .DestinationTopPageBox{ max-width: 90%!important; margin: 0 auto!important; }
    .DTPList .DestinationTopPageBox ul li .PictureDisplay{ height: 220px!important;}
    .DestinationTopPageBox ul li .PictureDisplay{ height: 180px!important;}

    .Recc .slick-prev,.Recc  .slick-next { top: 20%;}
    .slick-prev, .slick-next { top: 30%;}

    .TravelHomepageBox.ProvinceBox{ width: 90%; margin: auto; }
    .TravelHomepageBox.ProvinceBox ul li{ width: 25%; margin: 5px; }

    .VideoSec .DestinationTopPageBox ul li .PictureDisplay{ height: 160px!important;}

}

/* -------------------------------------  767px  ------------------------------------- */
@media(max-width:767px)
{
    .LeftLine{ width: 33%; top: 4.5%; }
    .TravelHomepageBox.ProvinceBox ul li{ width: 30%; }
}

/* -------------------------------------  640px  ------------------------------------- */
@media(max-width:640px)
{
    .AllKintetsu{ font-size: 18px;}
    .LeftLine{ width: 45%; top: 3%; }
    .RightLine{ width: 33%; top: 7.4%; }

    /* NaganoNav */
    .NaganoNavBox ul{ gap: 10px; justify-content: center; flex-wrap: wrap;} 
    .NaganoNavBox ul li{ width: 31.3%; }
    .NaganoNavBox ul li a{ padding: 10px; font-size: 16px; letter-spacing: 0; }
    .NaganoNavBox ul li img{ max-width: 50px; }
    .NaganoNavBox ul li p{ height: 50px; }

    /* SectionIntro */
    .SectionIntro{ padding: 20px 0 50px 0;}
    .SectionIntroBox .Descriptions{ font-size: 18px; line-height: 31px; }

    /* HeaderSection */
    .HeaderSection h2{ font-size: 30px; }
    .HeaderSection h2 span{ display: inline; }
    .HeaderSection h1{ font-size: 28px; line-height: 42px;  }
    .HeaderSection h1 span{ display: inline; }
    .HeaderSection .Captions{ font-size: 18px; line-height: 31px; }

    /* SectionMapBox */
    .MapPhoto .Links{ margin-top: 35px;}
    .MapPhoto .Links a{ padding: 15px 30px; }

    /* SectionTravel */
    .SectionTravelList ul li{ width: 100%; }
    .SectionTravelList ul li .Title{ font-size: 30px; padding: 20px 0; }
    .SectionTravelList ul li .Picture{ height: auto;}

    /* DestinationTopPageBox */
    .DTPList .DestinationTopPageBox ul { display: block;}
    .DTPList .DestinationTopPageBox ul li{ width: 100%!important;}
    .DTPList .DestinationTopPageBox ul li .Title{ font-size: 18px; }
    .DTPList .DestinationTopPageBox ul li:nth-child(1) .PictureDisplay{ height: 250px!important;}
    .DTPList .DestinationTopPageBox ul li .PictureDisplay{ height: 180px!important;}
    .DTPList .DestinationTopPageBox ul li .CategoryDisplay{ font-size: 10px!important;}
    .DestinationTopPageBox ul li:nth-child(1) .PictureDisplay{ height: 250px!important;}
    .DestinationTopPageBox ul li .PictureDisplay{ height: 180px!important;}
    .VideoSec .DestinationTopPageBox ul li{ width: 100%;}
    .VideoSec .DestinationTopPageBox ul li .PictureDisplay{ width: 100%!important; height: auto!important; float: none;}
    .VideoSec .DestinationTopPageBox ul li:nth-child(1) .PictureDisplay{ height: auto!important;}
    .VideoSec .DestinationTopPageBox ul li .RightCaptions{ width: 100%!important; float: none;}
    .VideoSec .DestinationTopPageBox ul li .Captions{ display: block;}

    /* TravelHomepageBox */
    .TravelHomepageBox.ProvinceBox{ padding: 60px 0; }
    .TravelHomepageBox.ProvinceBox ul li{ width: 45%; }
    .TravelHomepageBox.ProvinceBox ul li p{ font-size: 18px;}
}

/* -------------------------------------  480px  ------------------------------------- */
@media(max-width:480px)
{
    .LeftLine{ width: 60%; top: 4%; }
    .RightLine{ width: 50%; top: 8.5%; }
    .HeaderSection{ z-index: 2;}

    /* MeijiBanner */
    .TopBanner{ height: 250px; overflow: hidden; }
    .TopBanner img{ width: 100%; max-width: 100%; height: 100%; object-fit: cover;}

    /* NaganoNav */
    /*.NaganoNavBox ul li{ width: 48.5%; }
    .NaganoNavBox ul li span{ display: inline-block; }*/

    /* SectionIntro */
    .SectionIntro{ padding: 20px 0 50px 0;}

    /* HeaderSection */
    .HeaderSection h1{ font-size: 29px; letter-spacing: 0; line-height: 43px; }
    .HeaderSection h2{ font-size: 29px; letter-spacing: 0; line-height: 43px; }

    /* DestinationTopPageBox */
    .DTPList .DestinationTopPageBox ul li:nth-child(1) .PictureDisplay{ height: 200px!important;}
    .DTPList .DestinationTopPageBox ul li .PictureDisplay img{ border-radius: 15px!important;}
    .DTPList .DestinationTopPageBox ul li .PictureDisplay{ height: 120px!important;}
    .DTPList .DestinationTopPageBox ul li .CategoryDisplay span{ font-size: 10px!important;}
    .DTPList .DestinationTopPageBox ul li .DateAndCate p{ font-size: 11px!important;}
    .DTPList .DestinationTopPageBox ul li:nth-child(1) .Captions{ font-size: 13px!important;}
    .DestinationTopPageBox ul li .CategoryDisplay{ padding: 3px 2px 2px 10px!important;}
    .DestinationTopPageBox ul li:nth-child(1) .PictureDisplay{ height: 200px!important;}
    .DestinationTopPageBox ul li .PictureDisplay{ height: 120px!important;}


}

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

}