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

/*
header
*/

body.active .pjName img,
body.hScroll .pjName img{
  opacity: 1.0;
}
body.active .pjName a::after,
body.hScroll .pjName a::after{
  opacity: 0;
}
body.active .hTxt,
body.hScroll .hTxt{
  color: #2b2b2b;
}
.contents{
  margin-top: 0;
  padding-top: 0;
}




/*mvWrap [
----------------------------------------------------------- */
.mvWrap{
  position: relative;
  width: 100%;
  /*height: calc(100vh - 60px);
  height: calc(100dvh - 60px);*/
  max-width: 550px;
  min-height: 480px;
}
.mvWrap .mvP{
  width: 100%;
  height: 100%;
}
.mvWrap .mvLine,
.mvWrap .mvTxt,
.mvWrap .mvPos{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mvWrap .mvLine01{
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  height: calc((360 / 800) * 100%);
}
.mvWrap .mvLine02{
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  height: calc((440 / 800) * 100%);
}
.mvWrap .mvP img,
.mvWrap .mvLine img,
.mvWrap .mvTxt img,
.mvWrap .mvPos img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.mvWrap .mvP .cap{
  color: var(--color-white);
}

.mvWrap .mvCatch{
  position: absolute;
  top: 20%;
  left: 50%;
  width: 90%;
  text-align: center;
  transform: translate(-50%,0);
  color: var(--color-white);
}
.mvWrap .mvCatch h1{
  margin: 10px 0 0 0;
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*15 / 20*/
  line-height: var(--line-height);
}

@media screen and (max-width:767px) {
  .mvWrap{
    display: flex;
    align-items: flex-end;
    background: url("../images/mv_bg.webp") repeat-y center center;
    background-size: 100% auto;
  }
  .mvInner{
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 750/556;
  }
  .mvWrap .mvP,
  .mvWrap .mvTxt,
  .mvWrap .mvPos{
    width: 100%;
    height: 100%;
  }
  .mvWrap .mvLine01{
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
  }
  .mvWrap .mvLine02{
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
  }
  .mvWrap .mvP img,
  .mvWrap .mvLine img,
  .mvWrap .mvTxt img,
  .mvWrap .mvPos img{
    object-fit: contain;
    height: auto;
  }
}

/* for SP 横向 */
@media (orientation: landscape) and (max-height: 450px) {
  .mvWrap{}
}

@media print, screen and (min-width:768px) {
  .mvWrap{
    height: auto;
    /*height: 100vh;
    min-height: 900px;*/
    max-width: initial;
    min-height: initial;
    aspect-ratio: 27/20;/*1080 / 800*/
  }
  .mvWrap .mvP img,
  .mvWrap .mvLine img,
  .mvWrap .mvTxt img{
    object-position: center center;
  }
  
  .mvWrap .mvCatch{
    top: 15%;
    width: calc((530 / var(--cont-width-nv-pc-original)) * 100%);/*530 / 1000*/
    color: var(--color-def01);
  }
  .mvWrap .mvCatch h1{
    margin-top: 24px;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*15 / 20*/
    line-height: var(--line-height);
  }
}

/*現地*/
.mvWrap .mvPos{
  opacity: 0;
}
/*.mvWrap .mvPos*/
.mvLine:has(.is-visible) + .mvTxt + .mvPos{
  opacity: 0;
  animation: mvPosShow .4s ease-in-out 0.7s 1 normal forwards;
}
@keyframes mvPosShow {
  0% { opacity: 0; top: 10px; }
  100% { opacity: 1; top: 0; }
}

/*文字*/
.mvWrap .mvTxt{
  opacity: 0;
}
/*.mvWrap .mvTxt*/
.mvLine:has(.is-visible) + .mvTxt{
  opacity: 0;
  /*animation: mvTxtShow 1.0s ease-in-out 1.5s 1 normal forwards;*/
  animation: mvTxtShow 1.0s ease-in-out 1.0s 1 normal forwards;
}
@keyframes mvTxtShow {
  0% { opacity: 0; top: -10px; }
  100% { opacity: 1; top: 0; }
}



/*沿線のアニメーション*/
.fade-up {
  width: fit-content;
  opacity: 1;
  /* ② マスク画像（下へ向かって透明になる直線グラデーション） */
  mask-image: linear-gradient(to right, #000, #000 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 100%);
  /* Safariの旧実装対策をしたい場合だけ -webkit- も併記（後述） */
  -webkit-mask-image: linear-gradient(to right, #000, #000 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 100%);

  /* ③ マスクを大きめに（縦300%）して “動かす余白” を確保 */
  mask-size: 300% 100%;
  -webkit-mask-size: 300% 100%;

  /* ④ 初期は一番下に配置（下側が隠れている状態） */
  mask-position: 100% 0;
  -webkit-mask-position: 100% 0;
  
  /* 見た目のトランジション（要素を上へ動かす＋不透明化） */
  /*transform: translateY(30px) scale(1.02);*/
  transition: all 1.5s ease-out;
  will-change: opacity, transform, mask-position;
}
    .fade-up2 {
  width: fit-content;
  opacity: 1;
  /* ② マスク画像（下へ向かって透明になる直線グラデーション） */
  mask-image: linear-gradient(to top, #000, #000 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 100%);
  /* Safariの旧実装対策をしたい場合だけ -webkit- も併記（後述） */
  -webkit-mask-image: linear-top(to right, #000, #000 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 100%);

  /* ③ マスクを大きめに（縦300%）して “動かす余白” を確保 */
  mask-size: 100% 300%;
  -webkit-mask-size: 100% 300%;

  /* ④ 初期は一番下に配置（下側が隠れている状態） */
  mask-position: center top;
  -webkit-mask-position: center top;
  
  /* 見た目のトランジション（要素を上へ動かす＋不透明化） */
  /*transform: translateY(30px) scale(1.02);*/
  transition: all 1.5s 0.6s ease-out;
  will-change: opacity, transform, mask-position;
}

.fade-up.is-visible {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.fade-up2.is-visible {
  opacity: 1;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}


/*mInfo [
----------------------------------------------------------- */
.mInfo{
  background: url("../images/bg_info.jpg") no-repeat center center;
  background-size: cover;
  text-align: center;
}
.mInfo a{
  display: block;
  padding: 20px 0;
}
.mInfo a .t01{
  padding-left: 0.05em;
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*15 / 22*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.mInfo a .t02{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*28 / 32*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.mInfo a .t02 i{
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--color-def01);
  border-radius: 50%;
  margin: 0 0 0 10px;
  font-style: normal;
}
.mInfo a .t02 i::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-white);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: none;
  transform: translate(-50%,-50%);
}
.mInfo a .t03{
  margin: 15px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 13*/
  letter-spacing: 0.05em;
}

@media print, screen and (min-width:768px) {
  .mInfo{}
  .mInfo a{
    padding: 30px 0;
    transition: var(--transition-duration01);
  }
  .mInfo a .t01{
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*15 / 22*/
  }
  .mInfo a .t02{
    margin-top: 20px;
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*28 / 32*/
  }
  .mInfo a .t02 i{
    width: 25px;
    height: 25px;
    transition: var(--transition-duration01);
  }
  .mInfo a .t02 i::after{}
  .mInfo a .t03{
    margin-top: 20px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 13*/
  }
  
  
  .mInfo a:hover{
    opacity: var(--opacity01);
  }
  .mInfo a:hover .t02 i{
    transform: translateX(5px);
  }
}


/*merit [
----------------------------------------------------------- */
.merit{}
.merit ul{}
.merit li{
  padding: 1.3rem 0;
  text-align: center;
}
.merit li + li{
  border-top: 1px solid rgba(var(--color-white-rgb),1.0);
}
.merit li .t01{
  padding-left: 0.05em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 20*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
.merit li .t02{
  margin: 1.0em 0 0 0;
  padding: 1.0em 0 0 0.05em;
  border-top: 1px solid var(--color-key01);
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 13*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}

@media print, screen and (min-width:768px) {
  .merit{}
  .merit ul{
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
  }
  .merit li{
    width: calc(100% / 3);
    padding: 0 1.8rem;
    border-right: 1px solid rgba(var(--color-white-rgb),1.0);
  }
  .merit li:nth-of-type(1){
    border-left: 1px solid rgba(var(--color-white-rgb),1.0);
  }
  .merit li + li{
    border-top: none;
  }
  .merit li .t01{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8em;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 20*/
  }
  .merit li .t02{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 13*/
  }
}



/*pList [
----------------------------------------------------------- */
.pList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pList > div{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 2);
}
.pList > div.pc{
  display: none;
}
.pList > div .areaname{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pList > div .areaname img{
  width: 100%;
  height: auto;
}
.pList .swiper-slide{
  width: 100% !important;
}
.pList .swiper-slide > img{
  transition: clip-path .4s ease-in;
}

/*パターン1　横スライド*/
.horizontal01 .swiper-slide.swiper-slide-next > img{
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.horizontal01 .swiper-slide.p03.swiper-slide-next > img{
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.horizontal01 .swiper-slide.swiper-slide-active img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/*パターン2　横スライド 1の逆*/
.horizontal02 .swiper-slide.swiper-slide-next > img{
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.horizontal02 .swiper-slide.p03.swiper-slide-next > img{
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.horizontal02 .swiper-slide.swiper-slide-active img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/*パターン3　縦スライド*/
.vertical01 .swiper-slide.swiper-slide-next > img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.vertical01 .swiper-slide.p03.swiper-slide-next > img{
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
.vertical01 .swiper-slide.swiper-slide-active img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/*パターン2　縦スライド 3の逆*/
.vertical02 .swiper-slide.swiper-slide-next > img{
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
.vertical02 .swiper-slide.p03.swiper-slide-next > img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.vertical02 .swiper-slide.swiper-slide-active img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media print, screen and (min-width:768px) {
  .pList{}
  .pList > div{
    width: calc(100% / 3);
  }
  .pList > div.pc{
    display: flex;
  }
}


/*concept [
----------------------------------------------------------- */
.concept{
  padding: 3.0rem 0;
  text-align: center;
}
.concept .fEn{
  color: var(--color-key01);
  font-size: clamp(calc(48px * var(--font-markup)), calc(48vw / var(--vw-sp)), 48px);/*48 / 60*/
  line-height: 1.0;
}
.concept .copy{
  margin: 2.0em 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 24*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
.concept .lead{
  margin: 3.0em 0 0 0;
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*14 / 14*/
  line-height: var(--line-height-wide02);
  text-align: left;
}
.concept .map{
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
  .concept{
    padding: 4.0rem 0;
  }
  .concept .fEn{
    font-size: clamp(calc(60px * var(--font-markup)), calc(60vw / var(--vw-pc)), 60px);/*48 / 60*/
  }
  .concept .copy{
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*20 / 24*/
  }
  .concept .lead{
    padding-left: 0.05em;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*14 / 15*/
    letter-spacing: 0.05em;
    text-align: center;
  }
  .concept .map{
    margin-top: 2.0rem;
  }
}


/*entryWrap [
----------------------------------------------------------- */
.entryWrap{
  margin: 2.0rem auto 0 auto;
  text-align: center;
}
.entryWrap h2{
  padding-left: 0.05em;
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-sp)), 23px);/*23 / 30*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
.entryWrap .btn{
  margin: 2.0rem auto 0 auto;
}
.entryWrap .btn a{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.0rem 0;
  background: url("../images/btn_entry.jpg") no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}
.entryWrap .btn a::before,
.entryWrap .btn a::after{
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  height: 30%;
  background-image: url("../images/btn_entry_frame.svg");  
  background-repeat: no-repeat;
  background-size: 100% auto;
  transform: translate(-50%,0);
}
.entryWrap .btn a::before{
  top: 0;
  background-position: center top;
}
.entryWrap .btn a::after{
  bottom: 0;
  background-position: center bottom;
}
.entryWrap .btn a .t02{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*22 / 32*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.entryWrap .btn a .t02 i{
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--color-def01);
  border-radius: 50%;
  margin: 0 0 0 10px;
  font-style: normal;
}
.entryWrap .btn a .t02 i::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-white);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: none;
  transform: translate(-50%,-50%);
}
.entryWrap .btn a .t03{
  margin: 10px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*12 / 13*/
  letter-spacing: 0.05em;
}

.townPers{
  position: relative;
  /*max-width: 970px;
  margin: 0 auto;*/
}
.townPers .cap{
  color: var(--color-white);
}

@media print, screen and (min-width:768px) {
  .entryWrap{}
  .entryWrap h2{
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*23 / 30*/
  }
  .entryWrap .btn{
    max-width: 718px;
    aspect-ratio: 359/69;/*718/138*/
  }
  .entryWrap .btn a{
    padding: 0;
  }
  .entryWrap .btn a::before,
  .entryWrap .btn a::after{
    height: 50%;
  }
  .entryWrap .btn a::before{}
  .entryWrap .btn a::after{}
  .entryWrap .btn a .t02{
    margin-top: 20px;
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*28 / 32*/
  }
  .entryWrap .btn a .t02 i{
    width: 25px;
    height: 25px;
    transition: var(--transition-duration01);
  }
  .entryWrap .btn a .t02 i::after{}
  .entryWrap .btn a .t03{
    margin-top: 20px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 13*/
  }
  
  
  .entryWrap .btn a:hover{
    opacity: var(--opacity01);
  }
  .entryWrap .btn a:hover .t02 i{
    transform: translateX(5px);
  }

  .townPers{
    position: relative;
  }
  .townPers .cap{}
}