@charset "utf-8";


/* CMS Template(CSS編集はCMS管理画面から)

/sightseeing/css/sightseeing.css

Update:  2026-03-16 PM 04:26

====================*/



/* ----------------------------------------------------
Media query All
---------------------------------------------------- */
/* common */
body { overflow: hidden; height: 100%;}
html, body { overflow-x: hidden;}

.nsfont{ font-family: 'Noto Sans JP', sans-serif;font-weight: 300;}
#cat-event h1,#cat-event h2,#cat-event h2 span,#cat-event h3,#cat-event p{
  font-family:'Noto Sans JP' ,"メイリオ", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 300;
}
#cat-event p{
  line-height: 2.0;
}
/*mainvis-resort*/
.event-vis{
  position: relative;
  width: 100%;
  margin-bottom: 45px;
  padding: 50px 0 55px;
  background: url("/event/img/bg_sky.jpg") no-repeat center center;
  background-size: cover;
  /* background-color: #f6f5f4; */
  text-align: center;
}
.event-vis h1{
  font-size:clamp(1.8rem, 3.0vw, 3.6rem);
  color: #FFFFFF;
  font-weight: 400;
}
.event-vis h1 span{
  font-size: 1.6rem;
  display: block;
}
.event-calendar{
  margin-bottom: 48px;
}
#calendar h2{
  font-size: 2.4rem;
  margin: 0 auto 24px;
}
/* introduction */
#introduction{
  text-align: center;
}
#introduction p{
  font-size: 1.8rem;
  padding: 0 10px 60px;
}
/* tourist-map */
#tourist-map{
  text-align: center;
  margin: 0 auto 0;
}
#tourist-map img{
  border-radius: 12px;
}
/* tourist-area */
#tourist-area{
  max-width: 1350px;
  margin: 0 auto 0;
  padding: 80px 0 0;
}
/* tab */

.tab {
  width: 100%;
  position: relative;
  display: flex;
  justify-content:center;
  z-index: 5;
}
.tab li {
  text-align: center;
  width: calc(100% / 6);
  margin: 0 0 0 1px;
  padding:0 0 0;
  font-size: 1.4rem;
  transition: .3s;
}
.tab li.active {
  background:#6ca9c3;
  transition: .3s;
}
.tab li:nth-of-type(1) a{ color: #6ca9c3;}
.tab li:nth-of-type(2) a{ color: #7b88b7;}
.tab li:nth-of-type(3) a{ color: #c18d62;}
.tab li:nth-of-type(4) a{ color: #a172a3;}
.tab li:nth-of-type(5) a{ color: #9fa718;}
.tab li:nth-of-type(6) a{ color: #4b974f;}
.tab li a{
  display: block;
  padding: 18px 0 18px;
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  transition: .3s;
  cursor: pointer;
  background:#dddddd;
}
.tab li a:not(.active):hover{
  transition: .3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  background:#eaeaea;
  opacity: 1.0;
}
.tab li.active a{
  color: #FFFFFF;
  cursor: default;
}
.tab li:nth-of-type(1).active a{background-color: #6ca9c3;}
.tab li:nth-of-type(2).active a{background-color: #7b88b7;}
.tab li:nth-of-type(3).active a{background-color: #c18d62;}
.tab li:nth-of-type(4).active a{background-color: #a172a3;}
.tab li:nth-of-type(5).active a{background-color: #afb63a;}
.tab li:nth-of-type(6).active a{background-color: #4b974f;}
.tab-content{
  position: relative;
  padding: 45px 8px 0 8px;
  z-index: 1;
}
.tab-content .set{
  position: relative;
  width: 31.5%;
  position: relative;
  margin-bottom: 18px;
  padding: 0 0 20px 0;
  border-radius: 8px;
  pointer-events : none;
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
  transition : all 0.3s ease-in-out;
}
.tab-content .set:hover{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition : all 0.3s ease-in-out;
  opacity: .7;
}
.tab-content .set a{
  pointer-events : auto;
}
.tab-content .set a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.tab-content .wrapper::after {
  content: "";
  display:block;
  width:31.5%;
}
.tab-content .wrapper + p{
  font-size: 1.4rem;
}
.tab-content .set img{
  border-radius: 5px;
}
.tab-content h2{
  font-size:1.6rem;
  font-weight: 600 !important;
  margin: 25px 40px 9px 10px;
  text-align: left;
}
.tab-content .text{
  font-size: 1.4rem;
  line-height: 1.4 !important;
  margin: 0 12px 0 10px;
}
.tourist-text{
  position: relative;
}
.tab-content .btn{
  position: absolute;
  top:0px;right: 12px;
  text-decoration: none;
  color: #000000;
  font-size: 1.4rem;
}
.tab-content .btn::before {
  position: absolute;
  bottom: 0; right: 0;
  margin: 0 0 0 auto;
  content: "";
  width: 35px;
  height: 7px;
  border-bottom: 1px solid #387ebf;
  border-right: 1px solid #387ebf;
  transform: skew(45deg);
}

/* All END */

/* ----------------------------------------------------
- 960px (Smartphone Tablet layout Only)
---------------------------------------------------- */
@media (max-width: 960px) {

.event-vis{
  margin-bottom: 35px;
  padding: 40px 0 45px;
  background: url("/event/img/bg_sky.jpg") no-repeat right center;
  background-size: cover;
}
/* tab */
.tab {
  position: relative;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  z-index: 5;
}
.tab li {
  text-align: center;
  width: 49%;
  max-width: 360px;
  margin: 0 0.5% 2px;
  font-size: 1.2rem;
  cursor: pointer;
}
.tab-content .set{
  width: 49%;
  position: relative;
  margin-bottom: 15px;
  padding: 0 0 15px 0;
}
.tab-content h2{
  font-size:1.4rem;
  line-height: 1.5;
  font-weight: 600 !important;
  margin: 15px 0px 9px 0px;
  text-align: left;
}
.tourist-text{
  position: relative;
  padding-bottom: 30px;
}
.tab-content .text{
  font-size: 1.2rem;
  line-height: 1.3 !important;
  margin: 0 0 0 0px;
}
.tab-content .btn{
  position: absolute;
  top:auto;right: 12px;bottom: 0;
  text-decoration: none;
  color: #000000;
  font-size: 1.2rem;
}
.tab-content .btn::before {
  position: absolute;
  bottom: 0; right: 0;
  margin: 0 0 0 auto;
  content: "";
  width: 35px;
  height: 7px;
  border-bottom: 1px solid #387ebf;
  border-right: 1px solid #387ebf;
  transform: skew(45deg);
}
/* - 960px (Smartphone Tablet layout Only) END*/
}

/* ----------------------------------------------------
- 520px (Smartphone layout Only)
---------------------------------------------------- */
@media (max-width: 520px) {


/* - 520px (Smartphone layout Only) END */
}

/* ----------------------------------------------------
961px- (Pc layout Only)
---------------------------------------------------- */
@media (min-width: 961px) {

.tab-content{
  min-height: 400px;
}
.tab-content .information {
  align-items: flex-start;
}

/* 961px - END*/
}
/* ----------------------------------------------------
961px-1200px
---------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1200px) {



/* 961px-1200px END*/
}
/* ----------------------------------------------------
961px-1400px
---------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1400px) {



/* 961px-1400px END*/
}

/* ----------------------------------------------------
- 1920px (Pc layout Only)
---------------------------------------------------- */
@media (max-width: 1920px) {



/* - 1920px - END*/
}
/* ----------------------------------------------------
メディアクエリ設定 (PC) 1800px～ 
---------------------------------------------------- */
@media screen and (min-width: 1800px) {

  
  /* (PC) 1800px～  END*/
} 
/* ----------------------------------------------------
1921px- (Pc layout Only Wide)
---------------------------------------------------- */
@media (min-width: 1921px) {


/* 1921px - END*/
}