@charset "utf-8";

/*PCSP共通設定*/
section:nth-of-type(odd){background-color:#f0f0f0;}
section:nth-of-type(even){background-color:#fff;}
html {scroll-behavior: smooth;}/*smooth scroll*/
main * { font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;}

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 12px;
	margin: 0 1%;
}
.inner{
	width: 96%;
	margin: 0 2%;
	box-sizing: border-box;

}
}

/*760px以上*/
@media screen and (min-width: 760px),print {
/* CSS */
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:970px;
	min-width:760px;
	margin: auto;
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 14px;
    width: auto;
	max-width:970px;
	min-width:760px;
    margin: 0 auto 5px;
}
.inner{
	width: 96%;
	max-width:970px;
	min-width:760px;
	margin: 0 auto;
	display: block;
}
}

/*----------------------------------------*/




/* ナビゲーション 
----------------------------------------*/
.cp_nav{ background-color: #de180a; }
.cp_nav .inner{ 
	padding: 1.7em 0 1.5em;
}
.cp_nav ul{
	flex-wrap: wrap;
    display: flex;
	justify-content: space-between;
}
.cp_nav li{
	width: 48%;
}
.cp_nav li .btnbox{
	background: #231815;
    font-size: 0.8rem;
	color: #fff;
	text-align: center;
    font-weight: bold;
    padding: 1em;
	margin-bottom: 5px;
    border-radius: 25px;
	transition-duration: 1s;
}
.cp_nav li .btnbox a{ color: #fff; }
.cp_nav li .btnbox:hover {
	background: #ff4900;
	transform: scale(0.5.0.5);
}
@media screen and (min-width: 760px) {
	
.cp_nav ul{
    display:flex;
	justify-content: space-around;
}
.cp_nav li{
	width: 19%;
}
.cp_nav li .btnbox{
    font-size: 0.8rem;
}
}




/* section 
---------------------------------*/
#hotel,
#train,
#mario,
#map,
#osusume,
#plan,
#tripa{
	font-size: 0.9rem;
	line-height: 1.6;
}
@media screen and (min-width: 760px) {
#hotel,
#train,
#mario,
#map,
#osusume,
#plan,
#tripa{
	font-size: 1rem;
}
}


/* --- ここから --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main img{ 
    max-width: 100%;
    height: auto;
	border-radius: 2px;
}


/* タイトル画像の共通設定 */
.title_header {
    position: relative;
    text-align: center;
    padding: 4em 0 1em;
}
.section_title {
    text-align: center;
    margin-bottom: 3em;
}
.section_title img {
    max-width: 80%;
    width: auto;
    height: auto;
}
/**/
.en_title {
    text-align: center;
    margin-bottom: 3em;
}
.en_title img {
    width: auto;
    max-width: 200px;
}
.section_title span {
	display: block;
    width: 100px;
    height: 4px;
    margin: 15px auto 0;
    background-image: linear-gradient(to right, #fff 60%, transparent 60%);
    background-size: 28px 100%;
    background-repeat: repeat-x;
}
@media screen and (min-width: 760px) {
.title_header { }
.section_title {
    margin-bottom: 4em;
}
.section_title img {
    max-width: 100%;
}
/**/
.en_title {
    margin-bottom: 4em;
}
.en_title img {
    max-width: 100%;
}
.section_title span {
    width: 160px;
    margin: 30px auto 0;
}
}

/*丸い背景の上にタイトル*/
.sub_title_header{
    text-align: center;
    margin-bottom: 3em;
}
.ti_maru,.ti_maru02 {
	position: relative;
	font-size: 1.7rem;
	color: #ff6600;
	text-align: center;
    font-weight: bold;
	padding-top: 1em;
	z-index: 1;
}
.ti_maru{
	letter-spacing: 4px;
}
.ti_maru02{/*2行になったとき*/
	letter-spacing: 2px;
	line-height: 1.1;
	padding-top: 0.7em;
}
.ti_maru:before,.ti_maru02:before {
	position: absolute;
    content: '';
    background: url("../images/ti_bg_maru_sp.png") ;
    width: 94px;
    height: 87px;
	top: 53px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
}
@media screen and (min-width: 760px) {
.sub_title_header{ }
.ti_maru,.ti_maru02 {
	font-size: 2rem;
}
.ti_maru{
	letter-spacing: 5px;
}
.ti_maru:before,.ti_maru02:before {
    background: url("../images/ti_bg_maru.png") ;
    width: 115px;
    height: 107px;
	top: 65px;
}
}


/*--------------------------------------------*/
/*--------------------------------------------*/

/* hotel 
---------------------------------*/
#hotel {
	background: url("../images/bg_hotel.webp") repeat;
	margin: 0;
	background-size: cover;
	background-position: center;
	background-color: #fe7b17;
    padding: 4em 0;
	overflow: hidden;
}
#hotel .lead_txt {
    text-align: center;
    margin-bottom: 2em;
}
#hotel .hotel_container {
    background-color: #fff;
	padding: 2em;
    width: 100%;
    height: 250px; /*ひとまず*/
    border-radius: 10px;
}
@media screen and (min-width: 760px) {
#hotel { 
    padding: 6em 0 8em;
}
#hotel .lead_txt { }
#hotel .hotel_container {
    height: 350px; /*ひとまず*/
}
}


/* train 
---------------------------------*/
#train {
	background: url("../images/bg_train.webp") repeat;
	margin: 0;
	background-size: cover;
	background-position: center;
    background-color: #ffed36;
    padding: 4em 0;
	overflow: hidden;
}
#train .train_block{
	position: relative;
}
#train .train_block::before{
	position: absolute;
    content: '';
    background: url("../images/ic_confetti_train_sp.png") ;
    width: 152px;
    height: 165px;
	top: -66px;
    left: 6px;
}
/* 九州新幹線写真 */
#train .circle_item_wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 5em 0 1em;
}
#train .circle_item {
	position: relative;
    /*width: 45%;*/
	width: 100%;
    text-align: center;
}
#train .ti_train{
    font-size: 1.3rem;
    color: #000;
    font-weight: bold;
    width: 180px;
    padding: 3px;
    margin: 0 auto 1em;
    border: 2px #000 solid;
    border-radius: 5px;
}
#train .circle_img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
#train .train_txt {
    text-align: left;
	padding: 0 2em;
}

/*スライド*/
#train .splide_wrapper {
	position: relative;
    object-fit: cover;
}
#train .splide_wrapper .splide__pagination{
	margin-bottom: -30px;
}
#train .splide_wrapper .label {
	position: absolute;
    display: inline-block;
    background-color: #ff6600;
    color: #fff;
	font-size: 0.9rem;
	font-weight: bold;
	top: 30px;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    padding: 3px 20px;
    border-radius: 25px;
	z-index: 1;
}
#train .splide_wrapper .splide__arrow--prev {/* 左矢印の位置 */
    left: -0.5em !important;
}
#train .splide_wrapper .splide__arrow--next {/* 右矢印 */
    right: -0.5em !important;
}

#train .notice{
	font-size: 0.8rem;
    padding-top: 0.5em;
}
#train .splide_wrapper .splide_txt {
	padding: 3em 2em;
	text-align: left;
}

/* 特急たまてばこ */
#train .train_tamatebako_block{ 
	position: relative;
}
#train .train_tamatebako_block::before{
	position: absolute;
    content: '';
    background: url("../images/ph_train_tamatebako02_pudding_sp.png") ;
    width: 89px;
    height: 89px;
	top: 85px;
    right: 5px;
    z-index: 1;
}
/* 特急たまてばこ写真 */
#train .circle_item02_wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
#train .circle_item02 {
	position: relative;
    width: 45%;
    text-align: center;
}

@media screen and (min-width: 760px) {
#train { 
    padding: 6em 0;
}
#train .train_block{ }
#train .train_block::before{
    background: url("../images/ic_confetti_train.png") ;
    width: 371px;
    height: 393px;
	top: -266px;
    left: -40px;
}	
/* 丸い写真 */
#train .circle_item_wrapper {
    gap: 30px;
    flex-wrap: nowrap;
    margin: 6em 0 1em;
}
#train .circle_item {
    width: 480px;
}
#train .ti_train{
    font-size: 1.5rem;
    padding: 0;
}
#train .circle_img { }
#train .train_txt {
    text-align: center;
}
/*スライド*/
#train .splide_wrapper {}
#train .splide_wrapper .splide__pagination{ }
#train .splide_wrapper .label {
	font-size: 1.2rem;
    padding: 3px 23px;
	top: 40px;
}
#train .splide_wrapper .splide__arrow--prev {/* 左矢印の位置 */
    left: 1em !important;
}
#train .splide_wrapper .splide__arrow--next {/* 右矢印 */
    right: 1em !important;
}
#train .notice{
	font-size: 0.8rem;
    padding-top: 0.5em;
}
#train .splide_wrapper .splide_txt span {
}
#train .splide_wrapper .splide_txt {
	text-align: center;
}
	
/* 特急たまてばこ */
#train .train_tamatebako_block{ }
#train .train_tamatebako_block::before{
    background: url("../images/ph_train_tamatebako02_pudding.png") ;
    width: 130px;
    height: 130px;
	top: 110px;
    right: 100px;
}
/* 特急たまてばこ写真 */
#train .circle_item02_wrapper {
    gap: 30px;
    flex-wrap: nowrap;
}
#train .circle_item02 {
    width: 365px;
}
}

/*ボタン*/
#train .train_btn_area {
    margin-top: 5em;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#train .btn_apply.sm {
    max-width: 100%;
    height: 55px;
}
#train .btn_apply.sm .btn_txt {
    font-size: 0.75rem;
}
@media screen and (min-width: 760px) {
#train .train_btn_area {
    margin-top: 5em;
    flex-direction: row;
    justify-content: center;
}
#train .btn_apply.sm {
    max-width: 460px;
    height: 66px;
}
#train .btn_apply.sm .btn_txt {
    font-size: 1rem;
}
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#train .train_btn_area {
    margin-top: 5em;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
#train .btn_apply.sm .btn_txt {
    font-size: 0.8rem;
}
}


/* mario 
---------------------------------*/
#mario {
	background: url("../images/bg_mario.webp") repeat;
	margin: 0;
	background-size: cover;
	background-position: center;
    background-color: #e82227;
    padding: 4em 0 8em;
}
#mario .inner{    
	position: relative;
}
#mario .inner::before{    
    position: absolute;
    content: '';
    background: url("../images/ic_mario_map_sp.png") ;
    width: 210px;
    height: 275px;
	top: -13px;
    left: -5px;
}
#mario .mario_visual {
    margin-top: 30px;
    text-align: center;
}
#mario .mario_txt {
    text-align: center;
	color: #fff;
	padding: 1em 2em;
	position: relative;
    z-index: 1;
}
#mario .mario_train_block{
    background:
		linear-gradient(
        to bottom right, 
        transparent 50%, 
        #3e0a0a 50%);
	border-radius: 4px;
}

#mario .mario_logo {
    max-width: 47%;
    margin-bottom: 10px;
}
#mario .train_unit{
	text-align: right;
}
#mario .train_name {
    color: #fff;
    border: 1px dashed #fff;
    display: inline-block;
    padding: 4px 15px;
    border-radius: 20px;
    margin: 20px 10px 10px 0;
    font-size: 0.9rem;
}
#mario .train_img {
    margin: 0 10px 10px 0;
}
@media screen and (min-width: 760px) {
#mario {
    padding: 80px 0 24em;
}
#mario .inner::before{    
    background: url("../images/ic_mario_map.webp") ;
    width: 460px;
    height: 601px;
	top: 0;
    left: -50px;
}
#mario .mario_visual { }
#mario .mario_train_block{
	border-radius: 8px;
}
#mario .mario_logo {
    max-width: 47%;
    margin-bottom: 10px;
}
#mario .train_name {
    margin: 0 10px 20px 0;
    font-size: 1.2rem;
}
}
/*ボタン*/
#mario .mario_btn_area {
    margin-top: 5em;
}
#mario .mario_btn_area .btn_apply.sm {
    max-width: 480px;
    height: 66px;
}
#mario .mario_btn_area .btn_apply.sm .btn_txt {
    font-size: 0.9rem;
}

@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#mario {
    padding: 80px 0 15em;
}
/*ボタン*/
#mario .mario_btn_area {
    margin-top: 5em;
}
}




/*scroll*/
@keyframes scroll-left {
from {
	transform: translateX(0);
}
to {
	transform: translateX(-100%);
}
}
.slide_wrap {
	margin-top: 3em;
	display: flex;
	overflow: hidden;
}
.slide_list {
	display: flex;
	list-style: none;
}
.slide_list--left {
	animation: scroll-left 80s infinite linear 0.5s both;
}
.slide_item {
	width: calc(100vw / 1);
}
.slide_item>img {
	width: 100%;
}
@media screen and (min-width: 760px) {
.slide_item {
	width: calc(100vw / 2);
}
}

/* map 
---------------------------------*/
#map {
    background-color: #59ae6a;
    position: relative;
}
#map::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 377px; 
    background-image: url("../images/bg_map.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    transform: translateY(-99%); 
    z-index: 1;
}
#map::after {
    position: absolute;
    content: '';
    background: url("../images/ic_map_sp.png") ;
    width: 156px;
    height: 100px;
    top: -100px;
    left: 47%;
    z-index: 1;
}
#map .title_map_header {
	position: relative;
}
#map .section_map_title {
	position: absolute;
	top: 5px;
    left: 10px;
    z-index: 1;
}
#map .section_map_title img {
    max-width: 90%;
    width: auto;
    height: auto;
}

#map .map_block{
	position: relative;
	text-align: center;
	padding: 2em;
}
#map .map_block::before{
    position: absolute;
    content: '';
    background: url("../images/ic_map_sub_sp.png") ;
    width: 129px;
    height: 104px;
    top: 100px;
    right: 0;
}
#map .map_txt{
	color: #fff;
	padding-top: 4em;
}
@media screen and (min-width: 760px) {
#map::after {
    background: url("../images/ic_map.png") ;
    width: 422px;
    height: 268px;
    top: -310px;
    left: 47%;
}
#map .section_map_title {
	top: -100px;
    left: 5px;
}
#map .section_map_title img {
    max-width: 100%;
}
#map .map_block{
	text-align: center;
	padding-bottom: 5em;
}
#map .map_block::before{
    background: url("../images/ic_map_sub.png") ;
    width: 240px;
    height: 193px;
	top: 115px;
    right: 75px;
}

#map .map_txt{
	color: #fff;
    padding: 2em 0 3em;
    font-size: 1.3rem;
}
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#map .title_map_header { }
#map .section_map_title {
	position: absolute;
	top: -45px;
    left: 40px;
    z-index: 1;
}
#map .section_map_title img {
    max-width: 70%;
}
#map .map_block::before{
    background: url("../images/ic_map_sub.png") ;
    width: 240px;
    height: 193px;
	top: 105px;
        right: 50px;
}
#map::after {
    position: absolute;
    content: '';
    background: url("../images/ic_map_sp.png") ;
    width: 156px;
    height: 100px;
    top: -136px;
    left: 47%;
    z-index: 1;
}
}


/* osusume 
---------------------------------*/
#osusume {
	background: url("../images/bg_osusume.webp") repeat;
	margin: 0;
	background-size: cover;
	background-position: center;
    background-color: #91c97e;
    padding: 4em 0;
	overflow: hidden;
}
#osusume .title_header{
	position: relative;
}
#osusume .title_header::before{
    position: absolute;
    content: '';
    background: url("../images/ic_confetti02_sp.png") ;
    width: 150px;
    height: 146px;
	top: 160px;
    right: -20px;
}
@media screen and (min-width: 760px) {
#osusume { 
    padding: 6em 0;
}
#osusume .title_header::before{
    background: url("../images/ic_confetti02.png") ;
    width: 386px;
    height: 375px;
	top: 84px;
    right: -145px;
	
}
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#osusume .title_header::before{
    background: url("../images/ic_confetti02_ipad.png") ;
    width: 254px;
    height: 247px;
    top: -35px;
    right: 0;
}
}



/*------*/
#osusume .note {
	margin: 3em auto 2em;
    padding: 0 1em;
}
#osusume .note dl {
	display: flex;
	flex-wrap: wrap;
}
#osusume .note dt{
	width: 30%;
	padding: 7px;
	background-color: #249772;
    color: #fff;
	margin: 0 0 7px 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#osusume .note dd {
	width: 70%;
    padding: 7px 7px 7px 10px;
	background-color: #ccefe4;
	margin: 0 0 7px 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
@media screen and (min-width: 760px) {
	
#osusume .note dl { font-size: 0.9rem; }
#osusume .note dt { width: 30%; }
#osusume .note dd { }
}

@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#osusume .sub_title_header{
	margin-bottom: 5em;
}
#osusume .note dl {  }
#osusume .note dt { width: 22%; }
#osusume .note dd { width: 78%; }
}





/*MAPのモーダルとおすすめの観光地の３カラム*/
#map .swiper .sub_title_header{
    /*padding-top: 15px;
	margin-bottom: 2em;*/
}
#map .swiper .sub_title_header .ti_maru{/*サイズ変更*/
	font-size: 1.5rem;
	padding-top: 1.5em;
}
#map .swiper .sub_title_header .ti_maru02{/*サイズ変更*/
	font-size: 1.5rem;
	padding-top: 1.2em;
}

ul.col3_spot{
    display: flex;
    flex-direction: column;
    gap: 40px;            
    width: 90%;
    margin: 5em auto;
}
ul.col3_spot li{
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 100%;
    margin: 0 auto;
}

ul.col3_spot li .spot_img {
    display: block;
    position: relative;
}
ul.col3_spot li .spot_img img {
    border-radius: 15px 15px 0 0;
    display: block;
}
ul.col3_spot li .spot_label {
    position: absolute;
	bottom: -20px;
    left: 7px;
	background-color: #f2e846;
    color: #000;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 1.1rem;
    z-index: 1;
    white-space: nowrap; 
}

/* バッジ */
ul.col3_spot li .spot_badge {
    position: absolute;
	top: -25px;
    left: 5px;
	z-index: 2;
}

ul.col3_spot li .spot_txt {
    padding: 30px 15px 15px;
    letter-spacing: 0.02em;
	/* 隙間を埋める */
    font-feature-settings: "palt";
    text-align: justify;
    text-justify: inter-character;
}

@media screen and (min-width: 760px) {
ul.col3_spot{
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 970px;
    max-width: 95%;
}
ul.col3_spot li{
    width: calc((100% - 40px) / 3); 
    max-width: none;
    margin: 0;
}	
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#map .swiper .sub_title_header{
	margin-bottom: 5em;
}
ul.col3_spot{
	margin: 3em auto;
	width: 95%;
}
}


/*---------------------------------------*/
/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background-color: rgba(35, 24, 21,0.8);
}
/* モーダルがactiveの時 */
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* モーダルのコンテンツ */
.modal__content {
	position: relative;
    background-color: #a2e9af;
    width: 90%;
    height: 700px;
    padding: 10px;
    border-radius: 7px;
	overflow-y: scroll;
}
/* モーダルを閉じるボタン */
.modal__close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  z-index: 10;
}
/*wiper-bundle.min.css内*/
.swiper-button-next, .swiper-button-prev {
	color: var(--swiper-navigation-color, #fff)!important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 7px!important;
    right: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 7px!important;
    left: auto;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 20px !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
	
	-ms-flex-align: center;
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1;
}	
@media screen and (min-width: 760px) {
	
.modal { 
	height: 100vh;
	padding: 0;
}
.modal__content {
	width: 100%;
 	max-width: 960px;
	height: 700px;
	padding: 20px;
    margin: 0;
	overflow-y: clip;
}
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
.modal__content {
	width: 90%;
}
}


/* plan 
---------------------------------*/
#plan {
    background-color: #30b6d1;
    padding: 4em 0;
	overflow: hidden;
}
#plan .banner{
	text-align: center;
}
@media screen and (min-width: 760px) {
#plan { 
    padding: 6em 0;
}
}


/* tripa 
---------------------------------*/
#tripa {
    background-color: #af6495;
    padding: 4em 0;
	overflow: hidden;
}
#tripa .section_title{
	position: relative;
}
#tripa .section_title::before{
    position: absolute;
    content: '';
    background: url("../images/ic_tripa_check_sp.png") ;
    width: 65px;
    height: 52px;
    top: -35px;
    left: 40px;
}

#tripa .info_tripa {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}
#tripa .tripa_item {
    display: flex;
    flex-direction: column; 
    text-decoration: none;
    color: #333;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}
#tripa .tripa_item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#tripa .tripa_img {
    width: 100%;
    margin-bottom: 15px;
}
#tripa .tripa_img img {
    width: 100%;
    border-radius: 5px;
}
#tripa .tripa_txt h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
}
#tripa .tripa_txt p {
    font-size: 13px;
    line-height: 1.6;
}
@media screen and (min-width: 760px) {
#tripa { 
    padding: 6em 0;
}
#tripa .section_title::before{
    background: url("../images/ic_tripa_check.png") ;
    width: 91px;
    height: 74px;
	top: -43px;
    left: 77px;
}

#tripa .info_tripa {
    padding: 50px 60px;
}
#tripa .tripa_item {
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
#tripa .tripa_img {
    width: 240px;
    flex-shrink: 0;
    margin-bottom: 0;
}
#tripa .tripa_txt h3 {
    font-size: 20px;
}
#tripa .tripa_txt p {
    font-size: 14px;
}
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
#tripa .section_title::before{
	top: -75px;
    left: 20px;
}
}

/* ボタン 
----------------------------------------*/
.btn_area{
	margin: 2em 0 ;
}
/* ボタンの基本スタイル */
.btn_apply {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 60px;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s;
}
/* テキスト部分 */
.btn_txt {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #fff;
}
/* 右側の矢印が入る白い円 */
.btn_arrow {
    position: absolute;
    right: 15px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.3s ease;
}
@media screen and (min-width: 760px) {
}
@media only screen and (min-device-width: 759px) and (max-device-width: 1024px) {
}

/* --- マウスオーバー時の動き --- */
@media (hover: hover) {
.btn_apply:hover {
    background-color: #333;
}
.btn_apply:hover .btn_arrow {
    transform: translateX(3px);
}
}



/*----- スクロールをしたら出現する ------　*/
   
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
}
  
/* 下から */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* 上から */
.fadeDown {
    animation-name:fadeDownAnime;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
}
  
/* 左から */
.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeLeftAnime{
    from {
      opacity: 0;
    transform: translateX(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
}
  
/* 右から */
.fadeRight{
    animation-name:fadeRightAnime;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeRightAnime{
    from {
      opacity: 0;
    transform: translateX(100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
}

/* 順番に表示 */
.delay-time02{ animation-delay: 0.2s; }
.delay-time03{ animation-delay: 0.3s; }
.delay-time04{ animation-delay: 0.4s; }
.delay-time05{ animation-delay: 0.5s; }
.delay-time06{ animation-delay: 0.6s; }
.delay-time07{ animation-delay: 0.7s; }
.delay-time08{ animation-delay: 0.8s; }
.delay-time09{ animation-delay: 0.9s; }
.delay-time10{ animation-delay: 1.0s; }






@media only screen and (max-width: 759px) {
	.for_pc{ display: none; }	
}
@media only screen and (min-width: 760px) {
	.for_sp{ display: none; }
}







/* gadget
----------------------------------------*/
#gadget h2.ti_plan {
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: bold;
    color: #231816;
    text-align: center;
    margin-bottom: 0.5em;
}
#gadget h2.ti_plan span{
    color: #fff;
}
@media screen and (min-width: 760px) {
#gadget h2.ti_plan {
    font-size: 28px;
    letter-spacing: 5px;
}
}

/* ↓↓gadget color↓↓ */
:root {
	--gadget-accent-color: #383838;
	--gadget-noactive-color: #fff;
	--gadget-botton-color: #ffa41d;
}
.search_kokunaiBar .fw-top .fw-checkbox__label:before {border-color: var(--gadget-accent-color);}
.search_kokunaiBar .fw-top .fw-checkbox__input:checked + .fw-checkbox__label:before {
    background-color: var(--gadget-accent-color);
    border-color: var(--gadget-accent-color);
}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list {border-bottom-color: var(--gadget-accent-color);}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list > li.fw-is-active {background: var(--gadget-accent-color);}
.search_kokunaiBar .fw-top .fwnta-modal-btn-clear {
    border-color: var(--gadget-accent-color);
    color: var(--gadget-accent-color);
}
.search_kokunaiBar .fw-top .fwnta-modal-tab__list > li {background-color: var(--gadget-noactive-color);}
.search_kokunaiBar .fw-top .fw-btn-detail-01, .fw-top .fw-btn-fix-01 {background-color: var(--gadget-botton-color);}
.search_kokunaiBar .fw-top .fwnta-btn-search{background-color: var(--gadget-botton-color);}
/*↑↑gadget color↑↑*/




/*add NTA*/
/*759px以下*/
@media screen and (max-width: 759.9px) {
#hotel .hotel_container {height: auto;}
#hotel .hotel_container li {
	width: 280px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #f96508;
	position: relative;
	box-sizing: border-box;
}
#hotel .hotel_container li a {
	font-size: 12px;
	color: #222;
}
#hotel .hotel_container li span {
	width: fit-content;
    position: absolute;
    top: 0;
    background: #fe7311;
    color: #FFF;
    padding: 0 10px;
}
#hotel .hotel_container li dt h4 {
	font-weight: bold;
    font-size: 1.2em;
    margin: 5% 0 2%;
}
#hotel .hotel_container li dd dl dt {margin-bottom: 5%}
#hotel .hotel_container li dd dl dt h5 {
	color: red;
    font-size: 1.5em;
    font-weight: bold;
}
#hotel .hotel_container li dd dl dt p {font-size: 0.75em;}
#hotel .caution_txt {
	text-align: right;
    font-size: 0.75em;
    margin-top: 1%;
}

/*------------------------------
scroll item
------------------------------*/
.scrollbox_wraper {
	margin-bottom: 15px;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
		width: 32px;
        height: 32px;
        position: absolute;
        top: calc(50% - 32px);
        display: block;
        z-index: 1;
        background: #CCC url(../images/play_circle_24dp_FFF_FILL0_wght400_GRAD0_opsz24.svg) no-repeat 50% 50%;
        /* background-size: contain; */
        border-radius: 16px;
}
.scrollbox_wraper .scroll_left_btn {left: 0;transform: rotate(180deg);}
.scrollbox_wraper .scroll_right_btn {right: 0;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
}
/*.scrollbox_wraper .scroll_left_btn:after {
    position: absolute;
    top: 7px;
    left: 7px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: #be1a1a;
    width: 10px;
    height: 14px;
}
.scrollbox_wraper .scroll_right_btn:after {
    position: absolute;
    top: 7px;
    right: 7px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #be1a1a;
    width: 10px;
    height: 14px;
}*/
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important;
}
.scrollbox_wraper .scrollbox {overflow-x: scroll!important;}
.scrollbox_wraper .scrollbox > ul {
    width: fit-content !important;
    display: flex !important;
    margin: 0 auto 15px !important;
	padding: 0 calc(calc(50% - 300px / 2));
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 8px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #888 !important;
}

}

/*760px以上*/
@media screen and (min-width: 760px),print {
#hotel .hotel_container {height: auto;}
#hotel .hotel_container li {
	width: 280px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #f96508;
	position: relative;
	box-sizing: border-box;
}
#hotel .hotel_container li a {
	font-size: 14px;
	color: #222;
}
#hotel .hotel_container li span {
	width: fit-content;
    position: absolute;
    top: 0;
    background: #fe7311;
    color: #FFF;
    padding: 0 10px;
}
#hotel .hotel_container li dt h4 {
	font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 2%;
}
#hotel .hotel_container li dd dl dt {margin-bottom: 5%}
#hotel .hotel_container li dd dl dt h5 {
	color: red;
    font-size: 1.5em;
    font-weight: bold;
}
#hotel .hotel_container li dd dl dt p {font-size: 0.75em;}
#hotel .caution_txt {
	text-align: right;
    font-size: 0.85em;
    margin-top: 1%;
}

/*------------------------------
scroll item
------------------------------*/
.scrollbox_wraper {
	margin-bottom: 25px;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
		width: 32px;
        height: 32px;
        position: absolute;
        top: calc(50% - 32px);
        display: block;
        z-index: 1;
        background: #CCC url(../images/play_circle_24dp_FFF_FILL0_wght400_GRAD0_opsz24.svg) no-repeat 50% 50%;
        /* background-size: contain; */
        border-radius: 16px;
}
.scrollbox_wraper .scroll_left_btn {left: -20px;transform: rotate(180deg);}
.scrollbox_wraper .scroll_right_btn {right: -20px;}
@media (min-width: 760px) and (max-width: 1170px){
    .scrollbox_wraper .scroll_left_btn {left: 0;}
    .scrollbox_wraper .scroll_right_btn {right: 0;}
}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
}
/*.scrollbox_wraper .scroll_left_btn:after {
    position: absolute;
    top: 7px;
    left: 7px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: #be1a1a;
    width: 10px;
    height: 14px;
}
.scrollbox_wraper .scroll_right_btn:after {
    position: absolute;
    top: 7px;
    right: 7px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #be1a1a;
    width: 10px;
    height: 14px;
}*/
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important;
}
.scrollbox_wraper .scrollbox {overflow-x: scroll!important;}
.scrollbox_wraper .scrollbox > ul {
    width: fit-content !important;
    display: flex !important;
    margin: 0 auto 15px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 10px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #888 !important;
}
@media (min-width: 760px) and (max-width: 900px){
	/*------------------------------
	for Tablet
	------------------------------*/
	.scrollbox_wraper .scrollbox {
		overflow-x: scroll!important;
		padding: 0;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
		margin: 0 5px!important;
		background: #eee!important;
		border-radius: 5px!important;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
		border-radius: 5px!important;
		background: #888!important;
	}
}
.scrollbox_wraper.no_slider {
	margin-bottom: 15px;
	position: relative;
}
.scrollbox_wraper.no_slider .scroll_left_btn,
.scrollbox_wraper.no_slider .scroll_right_btn,
.scrollbox_wraper.no_slider .scrollbox::-webkit-scrollbar,
.scrollbox_wraper.no_slider .scrollbox::-webkit-scrollbar-track,
.scrollbox_wraper.no_slider .scrollbox::-webkit-scrollbar-thumb {display:none!important;}
.scrollbox_wraper.no_slider .scrollbox > ul{flex-wrap: wrap;}
.scrollbox_wraper.no_slider .scrollbox > ul li{margin-bottom: 10px !important;}

}