@charset "utf-8";
/* CSS Document */
:root{
  --default-color-black: #2c2a29;
  --content-width-sp: 90vw;
  --content-color-orange: #e42b00;
  --content-color-green: #01893F;  
}
.nosp {
    display: none;
}
.main {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.5vw;
  line-height: 1.5;
  color: var(--default-color-black);
  a {
    text-decoration: none;
  }
  img {
    width: 100%;
    height: auto;
  }
  & .inner {
    width: var(--content-width-sp);
    margin: 0 auto;
  }
}

/*------------------------------------------------
	メインビジュアル
--------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 76vw;
	text-align: center;
	position: relative;
	& .title {
		position: absolute;
		right: 0;
		left: 0;
		top: 6vw;
		z-index: 2;
		& img {
			width: 94vw;
		}
	}
	& .lead {
		position: absolute;
		right: 0;
		left: 0;
		top: 53vw;
		z-index: 2;
		text-align: center;
		font-size: 3.3vw;
		line-height: 1.5;
		color: #fff;
		padding: 0 6vw;
		text-shadow:1px 1px 2px #000, -1px -1px 2px #000,
				  -1px 1px 2px #000, 1px -1px 2px #000,
				  0px 1px 2px #000,  0-1px 2px #000,
				  -1px 0 2px #000, 1px 0 2px #000;
	}
}
.fade-slider {
	top: 0;
	left: 0;
	width: 100%;
	height: 80vw;
	
	& span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		animation: bgAnime 25s infinite;

		&.slider-1 {background-image: url("../img/sp/main-slider-1.jpg");}
		&.slider-2 {background-image: url("../img/sp/main-slider-2.jpg"); animation-delay: 5s;}
		&.slider-3 {background-image: url("../img/sp/main-slider-3.jpg"); animation-delay: 10s;}
		&.slider-4 {background-image: url("../img/sp/main-slider-4.jpg"); animation-delay: 15s;}
		&.slider-5 {background-image: url("../img/sp/main-slider-5.jpg"); animation-delay: 20s;}
	}
}
@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/*------------------------------------------------
	ナビ
--------------------------------------------------*/
#navi {
	width: 100%;
    background: url("../img/navi-bg.jpg");
    background-size: 150px;
    padding: 2vw 0;
	
	& ul {
		width: 96vw;
		margin: 0 auto;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		
		& li {
			width: 30%;
			& a {
				display:block;
				width: 100%;
				height: 100%;
			}
			& img {
				width: 100%;
			}
		}
	}
	&.fixd {
		display: none;
	}
}
.fix-navi:has(.fixed) {
	height: 17vw;
}

/*sp用テキスト固定ナビ*/
#spfixnavi {
  display: none;
  width: 100%;
  background-color: #fff;
	
	& ul {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		& li {
			text-align: center;
			font-size: 3.2vw;
			font-weight: bold;
			color: #fff;
			background-color: var(--content-color-green);
			border-bottom: solid 1px #fff;
			&:nth-child(1),&:nth-child(2){
				width: 50%;
			}
			&:nth-child(3),&:nth-child(4),&:nth-child(5){
				flex: 1 0 auto;
			}
			&:nth-child(1),&:nth-child(3),&:nth-child(4) {
				border-right: solid 1px #fff;
			}
			& a {
				display:block;
				color: inherit;
				text-decoration: none;
				padding: 1.4vw 2vw 1.4vw 0;
        position: relative;
				&::after {
          font-family: "Material Symbols Rounded";
          font-weight: 400;
          content: "\e5cf";
          position: absolute;
          right: 1vw;
          font-size: 4vw;
				}
			}
		}
	}
	&.fixed {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
}

/*------------------------------------------------
	パスポート
--------------------------------------------------*/
#passport {
    width: 100%;
    padding: 6vw 0 18vw;
    background-image: url("../img/sp/ppt-bg-top.png"),url("../img/sp/ppt-bg-bottom.png"),url("../img/ppt-bg.png");
    background-repeat: no-repeat,no-repeat,repeat;
    background-position: top center,bottom center,top left;
    background-size: 100%,100%,100px;
	& h2 {
		text-align: center;
		margin-bottom: 5vw;
		& img {
			width: 75vw;
		}
	}
  & .coupon-point {
    margin: 0 auto 8vw;
    background-color: #fff;
    border: 1px solid #e9e1cf;
    padding: 5vw 4vw 4vw;
    /* 見出しエリア */
    & .point-title {
      margin: 0 auto 3vw;
      font-size: 4.6vw;
      color: var(--content-color-green);
      font-weight: 800;
      display: block;
      width: 100%;
      text-align: center;
      line-height: 1.3;
      & img {
        width: 12vw;
      }
      & span {
        font-size: 5.6vw;
      }
    }
    /* 枚数情報帯 */
    & .info {
      background: #e8f2dd;
      display: block;
      padding: 1.2vw;
      margin: 0 auto 1vw;
      width: 100%;
      text-align: center;
      & p {
        font-weight: bold;
        margin: 0;
        font-size: 3.5vw;
      }
      & .label {
        font-size: 3.2vw;
      }
      & .detail {
        line-height: 1.3;
      }
    }
    /* ポイントリスト */
    & .point-list {
      list-style: none;
      padding: 0;
      margin: 0;
      & li {
        padding: 2vw 0 2vw 6vw;
        border-bottom: 1px dashed #595757;
        position: relative;
        font-size: 3.7vw;
        font-weight: bold;
        color: #cd4537;
        margin: 0;
        line-height: 1.3;
        & .green { color: var(--content-color-green); }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 2.4vw;
          width: 4.2vw;
          height: 4.2vw;
          background: transparent url(../img/icon_check.svg) no-repeat center / contain;
        }
        & .small {
          display: block;
          color: var(--default-color-black);
          font-size: 3vw;
          margin-top: 1vw;
          font-weight: 600;
        }
      }
      & li:last-of-type {
        border-bottom: none;
      }
    }
  }
	& .ex-text {
		margin-bottom: 3vw;
		font-size: 3.8vw;
		line-height: 1.5;
		text-align: center;
		font-weight: bold;
	}
}
.ppt-list {
    width: 74vw;
    margin: 0 auto 5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	
	& li {
		width: 34vw;
		height: 34vw;
		overflow: hidden;
		border-radius: 50%;
		margin-bottom: 3vw;
		position: relative;
		& img {
			width: 100%;
		}
		& h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
			height: 100%;
			color: #fff;
			font-size: 3.2vw;
			font-weight: bold;
			text-shadow: 1px 1px 2px #000;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
		}
		& .mask {
			display: none;
		}
	}
}

#passport .link {
    width: 80vw;
    margin: 0 auto;
    text-align: center;
    font-size: 3.2vw;
    line-height: 1.3;
	
	& a {
		display: flex;
    justify-content: center;
    align-items: center;
		background-color: var(--content-color-orange);
		color: #fff;
		text-decoration: none;
		padding: 1.5vw 0px;
		border-radius: 10vw;
    position: relative;
		&::after {
      font-family: "Material Symbols Rounded";
      font-weight: 400;
      content: "\e5e1";
      position: absolute;
      right: 2vw;
		}
	}
}

/*------------------------------------------------
	MAP
--------------------------------------------------*/
#map {
    width: 100%;
    background-color: #efefef;
    padding: 7vw 0 5vw;
	& h2 {
		text-align: center;
		& img {
			width: 70vw;
		}
	}
	& .map-box {
		width: 100%;
		background: url("../img/map/map-sp.png") no-repeat top 5vw center;
		background-size: 100%;
		padding-top: 84vw;
		& .detailBox {
			width: 100%;
		}
		& .areaList {
			display: none;
		}
	}
}

/* //// ↓詳細ボックス↓ //// */
#map .map-box .switchConts {
	display: flex;
    overflow-x: scroll;
	margin: 0 0 0 2vw;
}
#map .map-box .switchConts .conts {
	width: 70vw;
    margin-right: 3vw;
	border: 2px solid #e2e2e2;
    box-sizing: content-box;
    background-color: #fff;
}
#map .map-box .switchConts .conts .img img {
	width: 70vw;
}
#map .map-box .switchConts .conts .text {
	padding: 3vw;
}
#map .map-box .switchConts .conts h3 {
  color: var(--content-color-green);
	font-size: 6vw;
	line-height: 1.5;
	font-weight: 700;
}
#map .map-box .switchConts .conts .txt1 {
	font-size: 4.2vw;
    font-weight: 700;
	line-height: 1.5;
	margin-bottom: 1vw;
}
#map .map-box .switchConts .conts .txt2 {
  font-size: 3.3vw;
  line-height: 1.5;
  text-align: justify;
}
#map .map-box .switchConts .conts .link {
  padding-top: 2vw;
  text-align: right;
  font-size: 3.0vw;
}
#map .map-box .switchConts .conts .link a {
  display: inline-block;
  background-color: var(--default-color-black);
  color: #fff;
  line-height: 1;
  text-decoration: none;
  padding: 2vw 4vw 2vw 2vw;
  position: relative;
}
#map .map-box .switchConts .conts .link a:after {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  content: "\e5e1";
  font-size: 10px;
  position: absolute;
  right: 1vw;
  top: 50%;
  transform: translateY(-50%);  
}
#map .map-box .switchConts .conts .link a:hover {
    background-color: #555;
    transition: all 0.6s ease;
}

/*------------------------------------------------
	モデルコース
--------------------------------------------------*/
#model {
    width: 100%;
    padding: 10vw 0;
	& .inner {
		width: 94%;
		margin: 0 auto;
	}
	& h2 {
		text-align: center;
		margin-bottom: 8vw;
		& img {
			width: 70vw;
		}
	}
	& .disnon {
		display: none;
	}
	& .tab-conts {
		border-width: 4px;
		border-style: solid;
		padding-bottom: 5vw;
		#course1& {border-color: #00804b;}
		#course2& {border-color: #0075bc;}
		#course3& {border-color: #d87b0d;}
		& img {
			width: 100%;
		}
	}
}
#model #tab {
    display: flex;
	& li {
  width: 100%;
  font-size: 3.2vw;
  padding: 1.4vw 0;
  min-height: 16vw;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 0.4vw;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
		&.select {
			margin-top: -1vw;
		}
		&:nth-child(1) {background-color: #00804b;}
		&:nth-child(2) {background-color: #0075bc;letter-spacing: -0.02em;}
		&:nth-child(3) {background-color: #d87b0d;letter-spacing: -0.02em;}
	}
}


/*アコーディオン*/
#model .tab-conts {
	& .accordion {
		display: none;
	}
	& h3 {
		font-size: 5.4vw;
		line-height: 1.8;
		letter-spacing: 0.1em;
		color: #fff;
		margin-bottom: 2vw;
		text-align: center;
		position: relative;
		&::after {
      font-family: "Material Symbols Rounded";
      font-weight: 400;
      content: "\e5cf";
      font-size: 10vw;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
		}
		&.active:after {
			content: "\e316";
		}
		& span {
			font-size: 0.7em;
			color: #FFF72E;
			margin-right: 1vw;
			letter-spacing: 0;
		}
		#course1 & {background-color: #00804b;}
		#course2 & {background-color: #0075bc;}
		#course3 & {background-color: #d87b0d;}
	}
} 

/*------------------------------------------------
	ツアーポイント
--------------------------------------------------*/
#point {
    width: 100%;
    padding: 10vw 0 5vw;
    background: url(../img/navi-bg.jpg);
    background-size: 250px;
	& h2 {
		text-align: center;
		margin-bottom: 8vw;
		& img {
			width: auto;
			height: 13vw;
		}
	}
}

.ttn-list {
    width: 90vw;
    margin: 0 auto;
	& li {
		padding: 5vw 3vw 3vw;
		background-color: #fff;
		margin-bottom: 5vw;
		position: relative;
	}
	& .num {
		position: absolute;
		top: -4vw;
		right: 0;
		left: 0;
		margin: 0 auto;
		width: 10vw;
		height: 9vw;
		background: url(../img/ttn-num-bg.png) no-repeat;
		background-size: contain;
		color: #fff;
		font-size: 4.5vw;
		font-weight: bold;
		line-height: 9vw;
		text-align: center;
	}
	& h3 {
		font-size: 5.5vw;
		line-height: 1.3;
		font-weight: bold;
		text-align: center;
		margin-bottom: 3vw;
		& span {
			background: linear-gradient(transparent 70%, #ffea44 70%);
		}
	}
	& .text {
		font-size: 3.7vw;
		line-height: 1.5;
		overflow: hidden;
	}
	& .small {
		font-size: 3.0vw;
	}
	& .link {
		margin-top: 3vw;
		text-align: center;
		font-size: 3.3vw;
		& a {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--content-color-orange);
      color: #fff;
      text-decoration: none;
      line-height: 1;
      padding: 2vw 6vw;
      margin: 0 auto;
      border-radius: 10vw;
      position: relative;
      width: fit-content;
			&::after {
        font-family: "Material Symbols Rounded";
        font-weight: 400;
        content: "\e5e1";
        position: absolute;
        right: 2vw;
			}
		}
	}
}

/*------------------------------------------------
	アニメーション
--------------------------------------------------*/
/*▼パスポート*/
.ppt-list .fadein {
	opacity : 0;
	transform : translate(-300px, 0);
	transition : all 800ms;
}
.ppt-list .fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
}

/*▼ツアーポイント*/
.ttn-list .fadein {
	opacity : 0;
	transform : translate(-300px, 0);
	transition : all 800ms;
}
.ttn-list .fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
}

/*------------------------------------------------
	注意事項
--------------------------------------------------*/
#attention {
    width: 100%;
    padding: 5vw 0;
	& .inner {
		width: 90%;
		margin: 0 auto;
	}
	& h2 {
		font-size: 14px;
		line-height: 1.5;
		font-weight: bold;
		border-bottom: solid 1px #333;
		margin-bottom: 5px;
	}
	& h3 {
		font-size: 12px;
		font-weight: bold;
	}
	& p {
		font-size: 13px;
		line-height: 1.3;
		margin-bottom: 3px;
	}
	& ul {
		font-size: 12px;
		line-height: 1.3;
		margin-bottom: 5px;
		& li {
			margin-bottom: 3px;
			position: relative;
			padding-left: 15px;
			&::before {
				content: "※";
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
	& a {
		color: var(--content-color-green);
	}
	& .red {
		color: #DF0D00;
	}
}

/*------------------------------------------------
	パスポートバナー
--------------------------------------------------*/
#float-bnr.fixed{
    position: fixed;
    bottom: 70px;
    right: 10px;
    z-index: 100;
}
#float-bnr.none{
    display: none
}
#float-bnr img {
    width: 20vw;
}

/*------------------------------------------------
	 おすすめツアータブ
--------------------------------------------------*/
#tourTabWrap {
	width: 100%;
    padding: 10vw 0 0;
	& h2 {
		text-align: center;
		margin-bottom: 8vw;
		
		& img {
			width: auto;
			height: 13vw;
		}
	}
	& .tab {
		width: 94%;
		margin: 0 auto 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		
		& li {
			display: block;
			width: 31%;
			margin: 0 1% 8px;	
			font-size: 3.5vw;
			line-height: 1.3;
			font-weight: bold;
			color: var(--content-color-green);
			background-color: #fff;
			text-align: center;
			border: solid 0.5vw var(--content-color-green);
			padding: 3vw 0;
			&.nav_on {
				background-color: var(--content-color-green);
				color: #fff;
				border: solid 0.5vw var(--content-color-green);
			}
		}
	}
}

/*------------------------------------------------
	おすすめツアー商品
--------------------------------------------------*/
.areabox{
	display:none;
}
#tour {
	width: 100%;
	background-color: #f2f2f2;
	padding: 5vw 0 10vw;
	
	& .inner {
		width: 94vw;
		margin: 0 auto;
	}
	& h3 {
		text-align: center;
		background-color: var(--content-color-green);
		color: #fff;
		font-size: 4.0vw;
		line-height: 1.8;
		margin-bottom: 3vw;
	}
	
	& .outsales-txt {
		text-align: center;
		font-size: calc(24vw / 7.5);
		&:empty {
			display: none
		}
	}
	& .other-link {
		width: 84vw;
		margin: calc(20vw / (750 / 100)) auto;
		
		& a {
			display: block;
			margin: 0 auto;
			font-size: calc(24vw / 7.5);
			font-weight: 500;
			color: #FFF;
			background: #00479d;
			text-align: center;
			border-radius: 7vw;
			position: relative;
			padding: 10px 20px;
			&::after {
				content: "";
				background: url(/cmn/icon/icon_arrow_right_white.svg) no-repeat center center / cover;
				width: 8px;
				height: 25px;
				position: absolute;
				top: 0;
				right: 2vw;
				bottom: 0;
				margin: auto;
			}
		}
	}
}

/*------------------------------------------------
	商品部分調整・縦積みスタイル
--------------------------------------------------*/
.product-list.row-style>li .product-list__item .item-photo__wrapper .item-txt__port {
	position: static;
	padding: calc(3vw /(750 / 100));
	font-size: calc(20vw /(750 / 100));
	font-weight: normal;
	line-height: 1.3;
	background: rgba(0 0 0 / 100%);
}
.product-list.row-style .item-photo__wrapper {
	border-radius: 0;
}
.product-list.row-style .item-photo__wrapper img {
	border-radius: 0;
    width: 100%;
}
.item-txt__title {
	font-size: calc(28vw /(750 / 100)) !important;
}
.item-txt__point {
	line-height: 1.3;
}
.item-txt__price {
	margin-top: 1vw;
}
.product-list.row-style>li {
	box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}
.product-list.row-style .label__wrapper.nosp {
	display: none;
}
.product-list.row-style .label__wrapper {
	display: flex;
	flex-direction: row;
	width: 100%;
	position: static;
}
.item-label::after {
	margin-right: 1vw;
	background-size: 100%;
}
.item-label.line::after {
	font-size: calc(25vw / 7.5);
}
@media (orientation: landscape){
	.item-label::after {
		width: auto;
        height: auto;
        padding: 0 5px;
	}
}
.product-list.row-style>li .product-list__item .item-photo__wrapper .item-txt__port {
	margin-top: -1px;
}

/*------------------------------------------------
	検索ボックス調整
--------------------------------------------------*/
#searchArea .inner {
	width: 100%;
}
@media (orientation: landscape) {
	#searchArea {
		padding: 40px 0;
	}
}
.rn-searchMod__inputField, .rn-searchMod__select {
	font-size: 14px!important;
	color: #222;
}

/*----------------------------------------------
	終了
------------------------------------------------*/
#close {
    padding: 20vw 0;
    background-color: #efefef;
    text-align: center;
    font-size: 4.0vw;
    line-height: 1.5;
}