@charset "UTF-8";
/* CSS Document */
*{
  font-family:'メイリオ',Arial, Helvetica, sans-serif;
  font-size:16px;
}
img{
  width:100%;
  height:auto;
}
/* 文字装飾用共通デザイン */
.b_white{ display:block; color:#000;}
.f_w900{font-weight:900;}
.f_s110{ font-size:20px; vertical-align: baseline;}
.f_s150{ font-size:28px; vertical-align: baseline;}
.f_bold{ font-weight:bold;}

.top_main{
 width:100%;
 position:relative; 
}
/* TOP画像部分 */
.top_content {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.top_inner {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: linear-gradient(-5deg, #ffffff 50%, #cfedff 50%);
  z-index: 1;
}
.top_image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -49%;
  left: -35%;
  background-image: url('https://img.jtrip.co.jp/uploads/250417111840_hokkaido.png');
  background-size: min(500px, 45vw) auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 0.8;
  z-index: 2;
  clip-path: polygon(0% 55%, 100% 50%, 100% 100%, 0% 100%);
}
.top_image img{
  position:absolute;
  top:10px;

}
.top_catch {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 3;
  text-align: center;
  width: 100%;
}
.top_catch2{
  position: absolute;
  top: 52.5%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 3;
  text-align: center;
  width: 100%;
}
.top_catch p {
  font-size: 2.2rem;
  font-weight: bold;
  color: #000;
  margin: 0.5rem 0;
}
.top_price{
  width:100%;
  max-width:900px;
  margin:10px auto 0;
  padding:10px;
  text-align:right;
}
.top_title{
  width:100%;
  max-width:900px;
  margin:0 auto;
}

.top_title img{
  width:70%;
  position:relative;
  z-index:10;
}
.top_title h1{
  position:relative;
  font-size: 48px;
  opacity:1;
  z-index:10;
    font-weight: 800;
    padding-left: 30px;
    color: #dcfdf2;
    line-height: 2;
    text-shadow: 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC, 0 0 5px #0081CC;
  }
  .top_title p{
    position:relative;
    opacity:1;
    z-index:10;
    color: #fff;
    font-size: 28px;
    padding-left: 30px;
    line-height: 1.8;
    text-shadow: 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC, 0 0 3px #0081CC;
  }


  /* section-コンテンツブロック */
  .contentsBlock{
    width:100%;
    margin:0 auto 55px;
  }
  .cont_inner{
    width:100%;
    max-width:900px;
    margin:0 auto;
  }
  .contentsBlock.cont06{
    margin:0 auto;
  }

/* cont01 */

.cont01{
  position:relative;
  text-align: center;
  z-index:20;
  margin-top:-450px;
}
.cont01 img{
  width:100%;
  max-width:900px;
}


/* 公式サイトへの導線 */
.tour_link{
  text-align: center;
}
.tour_link p:first-child{
  font-size:110%;
  font-weight:bold;
  padding:10px 0 5px;
}
.link_btn{
  font-weight:900;
  background-color:#cfedff;
  text-align: center;
  width:calc(100% - 20px);
  padding:10px 0 10px;
}
.link_btn a{
  display:inline-block;
  width:90%;
  max-width:600px;
  padding:8px 12px;
  color:#0081CC;
  font-size:32px;
  background-color:#fff;
  border-radius:50px;
}
.cont06 h2{
  color:#09a2ad;
}


/* 魅力 */

.cont_box{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:800px;
  margin: 0 auto 30px;
}
.cont_box2{
  display:flex;
  flex-wrap:wrap-reverse;
  justify-content:center;
  width:100%;
  max-width:800px;
  margin: 0 auto 30px;
}


.cont_box img,
.cont_box2 img{
  width:90%;
  max-width:400px;
}
.cont_box h3,
.cont_box2 h3{
  font-size: 30px;
  font-weight:bold;
  padding-left:5px;
}



.cont_box .left_txtbox,
.cont_box2 .right_txtbox{
  width: 50%;
  max-width: 400px;
  height:200px;
  text-align: left;
  margin:70px auto;
  padding: 20px 10px;
  background-color: #cfedff;
  border-radius:10px;
}
.left_txt_catch{
  background-color:#008cffde;
  color:#fff;
  font-size:18px;
  padding:3px 0 3px 5px;
  font-weight:bold;
}
.left_txt{
  padding:5px 0 5px 5px;
}

.right_img{
  width:100%;
  max-width:300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 10px 50px 10px;
  margin:0 auto;
  transform: rotate(5deg);
  object-position: center center;
  position:relative;
  box-shadow:1px 1px 5px #414141;
}
.right_img::after{
  position:absolute;
  top:-35px;
  left:130px;
  display: inline-block;
  content:url("https://img.jtrip.co.jp/uploads/250502125419_icon_pin.png");
  width:50px;
  height:auto;
}
.left_img{
  width:100%;
  max-width:300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 10px 50px 10px;
  margin:0 auto;
  transform: rotate(-5deg);
  object-position: center center;
  position:relative;
  box-shadow:1px 1px 5px #414141;
}

.left_img::after{
  position:absolute;
  top:-35px;
  right:130px;
  display: inline-block;
  content:url("https://img.jtrip.co.jp/uploads/250502125419_icon_pin.png");
  transform: scaleX(-1);
  width:50px;
  height:auto;
}

.right_img img,
.left_img img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit: cover;
}

/* 選ばれる理由 */
.choise{
  display:flex;
  flex-wrap:wrap;
  margin:15px auto 0;
}
.choise div{
  width:calc(100% / 2 - 20px);
  background-color:#cfedff;
  margin: 5px auto 10px;
  padding:10px;
  border-radius:5px;
  box-shadow:1px 1px 5px #8f8f8f;
}
.choise h3{
  padding: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
  color: #1e50bd;
  text-align:center;
}
.choise h3 span{
  padding: 0;
  font-size: 20px;
}
.choise p{
  background-color:#fff;
  padding:10px 5px;
  font-size:90%;
}




/* よくある質問 */
.faq{
  text-align:left;
  width:90%;
}

.faq dl{
  padding-bottom:10px;
}
.faq dt,
.faq dd{
  padding:5px 0 5px 3em;
}
.faq dt{
  border-bottom:3px dotted #cfedff;
  font-weight:bold; 
}
.faq dd{
  margin:0 0 15px;
}
.faq dt::before{
  content:'Q';
  display:inline-block;
  background-color:#5abdfa;
  color:#fff; 
  font-weight:bold; 
  border-radius:50%;
  padding:2px 8px; 
  margin-right:5px; 
  margin-left:-3em;
}
.faq dd::before{
  content:'A';
  display:inline-block;
  background-color:#dd5050;
  color:#fff; 
  font-weight:bold;
  border-radius:50%;
  padding:2px 8px;
  margin-right:5px;
  margin-left:-2em;
}
.faq dd span{
  color:#ee2c2c;
}



/* ツアーカセット */
.casette{
  width:calc(100% - 4px);
  border:2px solid #0081CC;
  background-color:#0081CC;
  margin:0 auto 15px;
  border-radius:10px; 
}
.casette h3{
  font-size:120%;
  padding:10px 15px;
  color:#fff;
  font-weight:bold;
}
.casette .tour_box{
  background-color:#fff;
  padding:15px;
  margin:2px;
  border-radius:0px 0px 5px 5px;
}

.tour_box .left{
  display: inline-block;
  width:100%;
  max-width: 550px;
  margin:0 auto;
}
.tour_box .left p{
  padding:0 10px;
}
.tour_box .price{
  width:95%;
  text-align: center;
  font-size:90%;
  vertical-align: baseline;
  line-height:1.4;
  margin:15px auto 0;
  padding:10px 0 2px!important;
  border-bottom: 3px dotted #dd5050;
}

.tour_box .price span{
  color:#d80c18;
  font-size:150%;
  font-weight:bold;
  padding:0 2px;
  vertical-align: baseline!important;
}
.tour_box .notes{
  text-align: right;
  width:calc(95% - 10px);
  padding:4px 5px 0 5px!important;
  margin:0 auto 5px;
  font-size:85%;
}
.casette_link{
  text-align: center;
  width:90%;
  margin:15px auto 5px;
}
.tour_box .icon{
  width:100%;    
  border-radius: 50px;
  background-color: #ffe3e3;
  color: #000;
  text-align: center;
  margin: 0px auto 10px;
}
.tour_box .right{
  display: inline-block;
  width:100%;
  max-width:300px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tour_box .right img{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kome li{
	font-size: 80%;
}

.kome li::before {
	content: "※";
	padding-right: 5px;
}


/* 導線固定 */
.introduction{
  position: fixed;
  bottom:0;
  z-index:30;
  width:100%;
  height:100px;
  padding:15px 0;
  background-color: #3c3c3ccc;
}
.introduction table{
  border-spacing:0;
  width:100%;
  max-width:600px;
  margin:0 auto;
}
.introduction table td{
  padding:4px 0;
}
.introduction table tr td:first-child{
  width:13%;
  padding-left:10px;
}
.introduction img{
  width:100%;
  max-width:25px;
}
.introduction a{
  color:#fff;
}

@media only screen and (max-width: 1200px) {
/* タブレット用 */
.top_content{
  width:100%;
}
.link_btn{
  width:100%;
}


}


@media only screen and (max-width: 874px) {
/* スマホ～タブレット用：デザイン崩れた場合のみ使用 */

.top_image{
  top: -50%;
  left: -15%;
  background-image: url('https://img.jtrip.co.jp/uploads/250417111840_hokkaido.png');
  background-size: min(600px, 70vw) auto;
}
  /* cont01 */
  .cont01{
    margin-top:-480px;
  }
  .casette{
    width:calc(100% - 10px);
    max-width:800px;
  }
  .tour_box .left{
    width:100%;
    max-width:450px;
  }
  .tour_box .right{
    width:100%;
    max-width:300px;
  }
  .kome{
    width:95%;
    margin: 0 auto;
  }

}


@media only screen and (max-width: 768px) {
/* スマホ用 */
*{
  overflow-x:hidden;
  font-size:16px;
}



/* 文字装飾 */
.f_s110{ font-size:16px; vertical-align: baseline;}
.f_s150{ font-size:22px; vertical-align: baseline;}


/* TOP画像部分 */
.top_catch p {
  font-size: 1.8rem;
}

.top_image {
top: -50%;
left: -5%;
  background-size: min(400px, 90vw) auto;
}

  /* TOP画像部分 */
  .top_content {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .top_inner {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: linear-gradient(-5deg, #ffffff 50%, #cfedff 50%);
    z-index: 1;
  }
  .top_image {
    top: -49%;
    left: -2%;
    background-size: min(500px, 90vw) auto;
  }
  .top_image img{
    position:absolute;
    top:10px;
  }
  .top_price{
    margin:10px auto 0;
    padding:5px 10px 0;
    text-align:right;
  }
  .top_title{
    width:100%;
    max-width:900px;
    margin:0 auto;
  }
  .top_title img{
    width:90%;
    position:relative;
    z-index:10;
  }
  .top_title h1{
  font-size: 34px;
  padding-left: 20px;
  line-height: 1.6;
  }
  .top_title p{
    font-size: 18px;
    padding-top: 15px;
    padding-left: 20px;
    line-height: 1.2;
  }


  /* section-コンテンツブロック */
  .contentsBlock{
    width:100%;
    margin:0 auto 30px;
  }
  .cont_inner{
    width:100%;
    max-width:900px;
    margin:0 auto;
  }
  .contentsBlock.cont06{
    margin:0 auto;
  }

  /* cont01 */
  .cont01{
    margin-top:-280px;
  }

  /* 公式サイトへの導線 */
  .tour_link p:first-child{
    font-size:95%;
  }
  .link_btn{
    width:100%;
    padding:10px 0 5px;
  }
  .link_btn a{
    padding:8px 12px;
    font-size:28px;
  }

/* 魅力 */

.cont_box{
  position:relative;
  width:100%;
  height:400px;
  margin: 0 auto 30px;
  padding:10px;
}
.cont_box2{
  position:relative;
  width:100%;
  height:400px;
  margin: 0 auto 30px;
}


.cont_box img,
.cont_box2 img{
  width:80%;
  max-width:400px;
}
.cont_box h3,
.cont_box2 h3{
  font-size: 24px;
  font-weight:bold;
  padding-left:5px;
}

.cont_box .left_txtbox,
.cont_box2 .right_txtbox{
  width: 80%;
  height:auto;
  text-align: left;
  margin:0px auto;
  padding: 10px 10px;
  background-color: #cfedffcc;
  border-radius:10px;
  z-index:20;

}

.cont_box .left_txtbox{
  position:absolute;
  bottom:0px;
  left:15px;
}
.cont_box2 .right_txtbox{
  position:absolute;
  bottom:0px;
  right:15px;
}
.left_txt_catch{
  background-color:#008cffde;
  color:#fff;
  font-size:16px;
  padding:3px 0 3px 5px;
  font-weight:bold;
}
.left_txt{
  padding:5px 0 5px 5px;
  font-size:14px;
}

.right_img{
  width:70%;
  max-width:270px;
  margin:20px auto;
  position:absolute;
  top:0;
  right:25px;
}
.left_img{
  width:70%;
  max-width:270px;
  margin:20px auto;
  position:absolute;
  top:0;
  left:25px;
}

.right_img::after,
.left_img::after{
  
  transform: scaleX(0);
}

.right_img img,
.left_img img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit: cover;
}

/* 選ばれる理由 */
.choise div{
  width:calc(100% - 20px);
  margin: 5px auto 10px;
  padding:10px 5px;
}
.choise h3{
  padding: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
  color: #1e50bd;
  text-align:center;
}
.choise h3 span{
  padding: 0;
  font-size: 20px;
}
.choise p{
  padding:10px 10px  5px;
  font-size:90%;
}




/* よくある質問 */
.faq{
  text-align:left;
  width:100%;
}


/* ツアーカセット */
.casette{
  width:calc(90% - 2px);
  border:1px solid #0081CC;
  background-color:#ffffff;
  margin:0 auto 15px;
  border-radius:0px; 
}
.casette h3{
  width:95%;
  margin:0 auto;
  font-size:16px;
  color:#0081CC;
  border-bottom:2px dotted #0081CC;
  padding:10px 5px 5px;
}
.casette .tour_box{
  display:flex;
  flex-wrap:wrap-reverse;
  justify-content: center;
  background-color:#fff;
  padding:10px 5px;
  margin:2px;
  border-radius:0px 0px 5px 5px;
  text-align: center;
}

.tour_box .left{
  display: inline-block;
  width:100%;
  max-width: 550px;
  margin:0 auto;
  text-align: left;
}
.tour_box .left p{
  padding:10px 5px 0px;
  font-size:14px;
}
.tour_box .price{
  width:95%;
  text-align: center;
  font-size:90%;
  vertical-align: baseline;
  line-height:1.4;
  margin:0px auto 0;
  padding:10px 0 2px!important;
  border-bottom: 3px dotted #dd5050;
}

.tour_box .price span{
  color:#d80c18;
  font-size:150%;
  font-weight:bold;
  padding:0 2px;
  vertical-align: baseline!important;
}
.tour_box .notes{
  text-align: right;
  width:calc(95% - 10px);
  padding:4px 5px 0 5px!important;
  margin:0 auto 5px;
  font-size:13px!important;
}
.casette_link{
  text-align: center;
  width:90%;
  margin:10px auto 0;
  font-weight:bold;
}
.tour_box .right{
  display: inline-block;
  width:100%;
  max-width:300px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.tour_box .right img{
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.kome{
  width:90%;
  margin:0 auto;
}

/* 導線固定 */
.introduction{
  position: fixed;
  bottom:0;
  z-index:30;
  width:100%;
  height:110px;
  padding:15px 0;
  background-color: #3c3c3ccc;
}
.introduction table{
  border-spacing:0;
  width:100%;
  max-width:600px;
  margin:0 auto;
}
.introduction table td{
  padding:4px 0;
}
.introduction table tr td:first-child{
  width:13%;
  padding-left:10px;
}
.introduction img{
  width:100%;
  max-width:25px;
}



}