@charset "UTF-8";

/* 全体のスタイルリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    overflow: hidden; /* body全体のスクロールを無効にする */
    scroll-behavior: smooth;
    width: 100%;
    display: block;
}
/* 共通 */
.sp{
    display: none;
}
.div_inner{
    padding: 50px;
}
.tate{
    margin-top: 40px;
    margin-right: 40px;
    text-orientation: upright;
    line-height: 1.8;
}
.link_button a {
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 60%;
    padding: 15px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 1.4rem;
    text-decoration: none;
    font-weight: 700;
}
.link_button a:hover {
    background: #313131;
    color: #FFF;
}
.link_button a:after {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid #313131;
    border-right: 2px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 8%;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.link_button a:hover:after {
    border-color: #FFF;
}
.fw{
    width: 100%;
    overflow: hidden
    
    ;
}
/* 背景とコンテンツの基本スタイル */
.background {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('img/herobg.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
}
.content {
    width: 100%;
    max-width: 600px;
    height: 100vh; /* 背景と同じ高さに設定 */
    overflow-y: auto; /* content のみスクロール可能にする */
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ドロップシャドウの追加 */
    background-color: white;
    /*上下方向にはみ出した要素ををスクロールさせる*/
    overflow-y: scroll;
    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
}
.content::-webkit-scrollbar{
    display:none;
}
/* Heroコンテンツのスタイル */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
}
.video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.background::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - 600px) / 2);
    background: url('img/en/mainlogo_en.png') no-repeat center center;
    background-size: 60%;
    z-index: 0;
}
.background::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - 600px) / 2);
    background: url('img/en/heroinfo_en.png') no-repeat center center;
    background-size: 70%;
    z-index: 0;
}
.background::before {
    left: 0;
}
.background::after {
    right: 0;
}
.linkbtn {
    display: block;
    width: 100%;
    bottom: 2%;
}
.linkbtn ul {
	list-style-type: none;
	padding-left: 0;
}
.linkbtn ul li {
    padding: 0;
    text-align: center;
}
.linkbtn ul li a {
    text-decoration: none;
    color: black;
    font-size: 1rem;
    border: 1px solid #fff;
    padding: 0px 20px;
    border-radius: 25px;
    background-color: white;
    border-radius: 20px;
}
.float {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
}
.float li {
    float: none;
    margin: 0;
    padding: 0;
}

/* 言語スイッチ */
.language-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
  position: absolute;
  top: 2%;
  right: 10%;
}
.language-switch__item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  border-radius: 50%;
  background-color: #e5e5e5;
  color: #666;

  font-size: 13px;
  font-weight: 700;
  text-decoration: none;

  box-sizing: border-box;
  transition: opacity 0.3s ease;
}
.language-switch__item.is-active {
  background-color: #005f57;
  color: #fff;
}
a.language-switch__item:hover {
  opacity: 0.7;
}
/* バナーと日時 */
.info{
    background-color: #f8f2eb;
}
.info img{
    margin-bottom: 20px;
}
/* 旅セクション */
.tabi{
    padding-bottom: 50px;
}
.tabifont{
    line-height: 1.8;
    font-size: 1.2rem;
}
.tabifont--center {
  margin: 0 30px auto;
}
.t3{
    padding: 40px 0 40px 50px;
}
.t4bg{
    background-image: url("img/tour04.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 450px;
}
.t5text {
    background-color: rgba(255, 255, 255, .7);
    padding: 15px;
    top: 50%;
    right: 8%;
}
.t6img{
    padding: 40px 100px;
}
.t7adj{
    height: 700px;
}
.t8img{
    width: 55%;
    top: 10%;
    left: 0;
}
.t9img{
    width: 45%;
    top: 45%;
    right: 5%;
    z-index: -1;
}
.t10text{
    top: 18%;
    right: 1.2%;
}
.t11text{
    top: 68%;
    left: 9%;
}
/* こんなお客様に */
.user {
    background-color: #e1efd8;
    background-image: url(img/sectree.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    background-blend-mode: multiply;
    padding: 50px;
}
.use_ttl {
    padding: 140px 50px 50px;
}
.uc_ttl h3{
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 1.5rem;
}
.uc_img{
    padding: 10px 100px 30px;
}
.spot {
    list-style: none;
    padding: 0 !important;
}
.spot li {
    position: relative;
    padding-left: 22px;
}
.spot li::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 13px;
    height: 13px;
    background-color: #006159;
    border-radius: 8px;
}
/* 利用料金 */
.price{
    background-color: #f3eccb;
    background-image: url("img/sectree.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    background-blend-mode: multiply;
    padding: 50px;
}
.price_content{
    padding: 0 50px;
}
.price_ttl{
    padding: 140px 0 50px;
}
.subttlbox img{
    height: 25px;
}
.ksec_ttl{
    font-size: 2rem;
}
.ksec_ttl {
    font-size: 3rem;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}
.p_top{
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 100px;
    border-radius: 20px 20px 0 0;
}
.p_btm{
    background-color: #f1f5d9;
    border-radius: 0 0 20px 20px;
    padding: 15px 0;
}
.p_btm p{
    margin: 0;
}
.usagi{
    width: 80px;
    top: 13%;
    right: 10%;
}
.risu{
    width: 80px;
    top: 10%;
    left: 10%;
}
.muryo{
    background-color: #efea3a;
    padding: 30px 0;
}
.muryo_img{
    width: 55%;
}
.kesai{
    padding: 40px 0;
}
.kesai_img{
    width: 70%;
}
.btn_section{
    background-image: url(img/btnsec.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 50px 0;
}
/* ルート＆MAP */
.rute_ttl,.und_map{
    padding: 50px;
}
.mapbtn_sec {
    padding: 50px;
    background-color: #baddbb;
}
.busset{
    padding: 50px 0 0;
}
.bs_ttl{
    margin-bottom: 20px;
}
.bs_inner{
    padding: 0 50px;
}
.bs_ttl img{
    width: 80%;
}
.bs_ttl img[src$="bs02_en.png"] {
    width: 50%;
}
.bs_ttl img[src$="bs03_en.png"] {
    width: 43%;
}
.bs_ttl img[src$="bs04_en.png"] {
    width: 95%;
}
.bs_ttl img[src$="bs06_en.png"] {
    width: 75%;
}
.bs_ttl img[src$="bs09_en.png"] {
    width: 70%;
}
.bs_ttl img[src$="bs08_en.png"] {
    width: 100%;
}
.spotttl {
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
}
.bs_list {
    padding: 50px;
    background-color: #e1efd8;
}
.clistbox ul{
    margin: 0 !important;
    padding: 0 !important;
}
.clistbox ul li {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #000;
    border-radius: 30px;
    margin: 5px;
}
.spot_a,.spot_b{
    overflow: hidden;
}
.spot_a ul li{
    background-color: #f9fbea;
}
.spot_b ul li{
    background-color: #dcf0f1;
}
/* FOOTER */
.insta_btn {
    background-color: #006159;
    width: 100%;
    display: block;
    padding: 12px 0;
}
.insta_btn img {
    width: 25%;
}
.operation {
    padding: 20px 50px;
    background-color: #baddbb;
}
.operation img{
    width: 80%;
}
.komakusa{
    padding: 40px 50px 20px;
}
/* レスポンシブデザイン */
@media (max-width: 430px) {
    .content {
        width: 100%;
    }
}
@media (min-width: 430px) and (max-width: 1099px) {
    .background {
        background-attachment: fixed;
    }
    .content {
        max-width: 430px;
    }
    
}
@media screen and (max-width: 1720px) {
    .background::before {
        background-size: 70%;
    }
    .background::after {
        background-size: 80%;
    }
}
@media screen and (max-width: 1100px) {
    .linkbtn ul li a {
      font-size: 1rem;
    }
}
@media screen and (max-width: 1024px) {
    .hero {
        height: 764px;
    }
    
    .background::before {
        width: calc((100% - 430px) / 2);
        background: url('img/en/mainlogo_en.png') no-repeat center center;
        background-size: 60%;
        z-index: 0;
    }
    .background::after {
        width: calc((100% - 430px) / 2);
    }
    .tabifont {
        font-size: 1rem;
    }
    .t7adj {
        height: 500px;
    }
    .t11text {
        left: 7%;
    }
    .t10text {
        right: 6%;
    }
    .use_ttl {
        padding: 80px 30px 30px;
    }
    .uc_img {
        padding: 10px 70px 30px;
    }
    .link_button a {
        max-width: 80%;
        padding: 10px 25px;
    }
    .mapbtn_sec {
        padding: 50px 0;
    }
    .p_top {
        padding: 20px 70px;
    }
    .p_btm {
        padding: 15px 20px;
    }
    .risu {
        width: 70px;
        top: 7%;
    }
    .usagi {
        width: 70px;
        top: 11%;
    }
    .price_ttl {
        padding: 100px 0 50px;
    }
    .linkbtn {
        bottom: 2%;
    }
    .float {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .float li {
        width: calc(50% - 10px);
        margin: 0;
        padding: 0;
        float: none;
    }

    .float li a {
        display: block;
        width: 100%;
        text-align: center;
    }

}

@media screen and (max-width: 430px) {
    .sp{
        display: block;
    }
    .sp-mainlogo {
        width: 70%;
        top: 10%;
        left: 15%;
        z-index: 100;
    }
    .hero {
        height: 100vh;
    }
    .div_inner {
        padding: 30px;
    }
    .tabifont {
        font-size: .9rem;
    }
    .t7adj {
        height: 490px;
    }
    .t11text {
        top: 74%;
        left: 6%;
    }
    .t10text {
        right: 5%;
		text-shadow:0 0px 4px rgba(255, 255, 255, 1);
		filter: drop-shadow(0px 0px 2px white);
    }
	.bs_ttl {
		margin-bottom: 15px;
	}
    .user {
        padding: 50px 30px;
    }
    .uc_img {
        padding: 10px 50px 30px;
    }
    .use_ttl {
        padding: 70px 30px 30px;
    }
    .mapbtn_sec {
        padding: 30px;
    }
    .rute_ttl, .und_map {
        padding: 30px;
    }
    .link_button a {
        max-width: 90%;
        padding: 10px 20px;
        font-size: 1.2rem;
    }
    .p_top {
        padding: 10px 55px;
    }
    .muryo_img {
        width: 65%;
    }
    .ksec_ttl {
        font-size: 2.2rem;
    }
    .price {
        padding: 30px 30px 50px 30px;
    }
    .p_btm {
        padding: 10px 20px;
    }
    .risu {
        width: 60px;
        top: 7%;
    }
    .usagi {
        width: 70px;
        top: 8%;
    }
    .price_ttl {
        padding: 115px 0 30px;
    }
    .busset {
        padding: 20px 0 0;
    }
    .clistbox ul li {
        font-size: 0.8rem;
    }
    .bs_list {
        padding: 30px;
    }
    .bs_inner {
        padding: 0 30px;
    }
    .komakusa {
        padding: 20px 30px;
    }
    .operation img {
        width: 90%;
    }
    .linkbtn {
        bottom: 2%;
    }
}

@media screen and (max-width: 390px) {
    .t11text {
        top: 66%;
    }
}