@charset 'utf-8';
body, #all-container {
    overflow-x: hidden; /* 横方向のはみ出しを強制的にカットする */
    width: 100%;
}

/* ==========================================================================
   Tablet & Small Laptop (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width:1024px) {
  
  .pc { display: block!important; }
  .sp { display: none !important; }	

/* ==========================================================================
   3. Top Visual
   ========================================================================== */
.menu {
    top: 130px;
}	
	
#top-v .visual-wrapper,
#top-v .swiper {
    height: 70vh; 
}	

/* ==========================================================================
   5. Points Section
   ========================================================================== */
.points .sub-title h2 {
    padding-bottom: 100px;
}
.points h4 {
    font-size: 18px;
}	
.points h5 {
	left: -5px;
}
.points p{
    font-size: 14px;
}		
.points .point-left{
    margin-bottom: 10px;
}
.points .point-right {
    margin-bottom: 10px;
}	
.point-left, .point-right {
    padding-bottom: 10px;
}	
.point-text {
}
.point-left img, 
.point-right img {
	padding-top: 10px;
    width: 50%;
}

.deco02, .deco03, .deco04, .deco05,.deco01{
    height: auto ;
    z-index: 1; 
}
.deco02, .deco03, .deco04, .deco05,.deco01{
    opacity: 0.7; 
}	
/* 2. 個別に位置を微調整（PC版の絶対配置が強すぎる場合） */
.deco03 { bottom: 26%;left: 30%; width: 180px; }		
.deco02 { top: 10px !important; left: -10px !important; width: 250px !important; }
.deco04 { top: 0px !important; right: -10px !important; width: 250px !important; }
.mum02 { top: 120px; left: 10%; width: 120px !important; }
.dau01 { display: none; }	
		
/* ==========================================================================
   6. Blog / Tour Section (グリッド調整)
   ========================================================================== */
.blog-comment {
    width: 800px;
}
	
.blog-cards {
    gap: 1em;
    max-width: 900px;
}	
.mum01 {display: none;}	

/* ==========================================================================
   Map
   ========================================================================== */	
.map .sub-title img {
    width: 250px;
}	
.map .sub-title h2 {
    padding-top: 30px;
    padding-bottom: 100px;
}	
#map h2::before {
    font-size: 139px;
    top: -21px;
}	
#map section {
    height: 700px;
	background-size: 937px auto;
}	
	
.map-buttons-wrapper {
        zoom: 0.71; /* 71%に縮小 */
    }
/* ==========================================================================
   Basic Info
   ========================================================================== */		
	
.dau03 {
    bottom: -20px;
    right: 3%;
}	
.basic-info {
padding-right: 100px;
}	
/* ==========================================================================
   Tour
   ========================================================================== */			
.tour-cards {
    gap: 1em;
    max-width: 800px;
}	
	
}
/* ==========================================================================
   スマホ用基本設定（768px以下）
   ========================================================================== */
@media screen and (max-width: 768px) {
  
  .tb { display: none; }
  .pc { display: none !important; }
  .sp { display: block !important; }
  .sp_text { display: inline !important; }	

  /* --- Typography --- */
  .sub-title h2 { font-size: 24px; }
  section h2::before { font-size: 100px; top: -10px; }

/* ==========================================================================
   2. ナビゲーション（メニュー）
   ========================================================================== */
.menu {
    top: 50px; /* ★スマホヘッダーの高さに合わせて調整 */
    position: absolute;
  }
  
  /* 固定時は上端に */
  .menu.is-fixed {
    top: 0 !important;
  }	
	
.menu-links {
    width: 100%;
}
.menu ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.menu li p {
    font-size: 14px; 
    padding: 8px 0;
    text-align: center;
}
	
	
/* ==========================================================================
   3. Top Visual
   ========================================================================== */
#top-v .visual-wrapper,
#top-v .swiper {
    height: 70vh; 
}
#top-v .title img {
    width: 90%; 
}
#top-v .title {
    width: 100%;
    text-align: center; 
    padding: 0; /* 余計な余白をリセット */
}	
.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
}
	
/* ==========================================================================
   4. Catch Section
   ========================================================================== */
#catch h2 {
    font-size: 1.4rem;
}
#catch p {
	padding: 0 10px 10px;
    line-height: 1.4;
    text-align: left; /* 長文は左寄せの方が見やすい */
}	
#catch img { width: 120px; height: 120px; }

#catch .container {padding: 2em 0;}
#catch .container p {
    font-size: 1rem;
    padding: 0 20px 20px;
}
/* ==========================================================================
   5. Points Section (縦並びへの変更)
   ========================================================================== */
.points {
    padding-bottom: 40px;
}
.points .sub-title h3 {
    font-size: 18px;
}	
.points .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom: 20px;
	padding-top: 15px;
}

section h2::before {
    font-size: 85px !important;
    top: -10px !important;
}
.points h4 {
    font-size: 18px;
}	
.points h5 {
    font-size: 3rem;
    width:60px;
    height: 60px;
    line-height: 69px;
    top: -20px;
	left: 3px;
}
.points p{
    font-size: 14px;
}		
.points .point-left{
    flex-direction: column; /* 縦並び */
    margin-bottom: 10px;
}
.points .point-right {
    flex-direction:column-reverse;/* 縦並び */
    margin-bottom: 10px;
}	
.point-left, .point-right {
    padding-bottom: 10px;
}	
.point-text {
    width: 90%;
    margin: 0;
    padding: 0 10px;
}
.point-left img, 
.point-right img {
	padding-top: 20px;
    width: 100%;
    border-radius: 0px; 
}

.points h3 {
    font-size: 1.5rem;
}

.deco02, .deco03, .deco04, .deco05, .dau01 {
    width: 80px !important; 
    height: auto ;
    z-index: 1; 
}
.deco02, .deco03, .deco04, .deco05{
    opacity: 0.7; 
}	
/* 2. 個別に位置を微調整（PC版の絶対配置が強すぎる場合） */
.deco01 { display: none; }
.deco05 { top: 1663px !important; right: -10px !important; width: 105px !important; }	
.deco03 { top: 750px !important;left:325px !important; width: 120px !important; }		
.deco02 { top: 10px !important; left: -10px !important; width: 100px !important; }
.deco04 { top: 0px !important; right: -10px !important; width: 120px !important; }
.mum02 { display: none;}
.dau01 {right: 5% !important;}	
	
/* ==========================================================================
   6. Blog / Tour Section (グリッド調整)
   ========================================================================== */
#blog .container{
  width: 100%;
  padding: 1.5em 0 3em;
}
.blog-comment{
  padding:10px;
	}
.blog .sub-title h3 {
    font-size: 18px;
}	
.blog .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom: 55px;
	padding-top: 20px;
}	
.blog-comment{
	padding:10px 10px 25px;
	width:100%;
	}	
.blog-comment p {
	font-size: 16px;
	text-align: left;
	}
	
/* 1. コンテナを横並びのスクロール設定に変更 */
    .blog-cards {
        display: flex !important;     /* GridをFlexに変更 */
        flex-wrap: nowrap !important; /* 改行させない */
        overflow-x: auto !important;  /* 横スクロールを許可 */
        scroll-snap-type: x mandatory; /* スナップ機能を有効化 */
        -webkit-overflow-scrolling: touch; /* スクロールを滑らかに */
        padding: 0 20px 40px !important; /* 左右余白と下の影用の余白 */
        gap: 20px !important;         /* カード同士の間隔 */
        scrollbar-width: none;        /* Firefoxでスクロールバー非表示 */
    }

    /* Chrome, Safariでスクロールバーを非表示にする */
    .blog-cards::-webkit-scrollbar {
        display: none;
    }

    /* 2. 各カードの幅を固定し、スナップ位置を指定 */
    .blog-cards li {
        flex: 0 0 85% !important;    /* 1枚を85%の幅で見せ、右端に次をチラ見せ */
        scroll-snap-align: center;   /* スクロール停止位置を中央に */
        height: auto;
        margin: 0 !important;
    }

    /* 3. カード内のコンテンツを整える */
    .blogcontent {
        height: 100%;                /* カードの高さを揃える */
        box-shadow: 5px 5px 0px 0px rgba(115, 4, 47, 0.4); /* スマホ用に影を少し控えめに */
    }

    /* 4. セクション全体の余白調整 */
    #blog .container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* タイトルやコメント文には左右の余白（パディング）を戻す */
    #blog .sub-title,
    #blog .blog-comment {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* Coming Soonの文字サイズ調整 */
    .is-disabled::after {
        font-size: 18px !important;
        width: 100%;
        text-align: center;
    }
.mum01{
left:0;
width:125px;	
}
/* ==========================================================================
   7. Map Section (3/4サイズ・スクロール・中央配置)
   ========================================================================== */
#map h2::before { content: "Attractions"; color: var(--orange); }	
.map .sub-title h3 {
    font-size: 18px;
}	
.map .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom: 60px;
	padding-top: 15px;
}		
 #map section {
    background-image: none !important;
    height: auto ;
    background-color: #f8f0e3; 
    padding: 40px 0;
  }
  .pc-only { display: none !important; }	
	
  /* ボタンの整列：絶対配置(absolute)を解除して中央に並べる */
  .map-buttons-wrapper {
    display: grid;
    flex-direction: column;
    align-items: center;
    gap:6px;
    margin-bottom: 30px;
    width:90%;
    margin: 0 auto 30px;
	grid-template-columns: 1fr 1fr;  
	position: static !important;  
	transform: none !important;  
  }
.map-buttons-wrapper .bt-dubai .bt-hotel, .bt-dubai-sub {
		display: none !important;;}	

.bt-dubai{
        /* インラインで書かれた margin-top や margin-left を強制上書き */
        position: static;
        margin: 0 !important;
        transform: none !important;
        
        /* ボタンの見た目を整える */
        width: 100%;
        height: 50px;          /* 高さを揃える */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px !important;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.3;
        white-space: normal !important;   /* 長い文字は改行させる */
    }
/* 4. 不要な装飾（ピンの矢印）をスマホでは隠す */
    .bt-dubai::before, .bt-dubai::after {
        display: none !important;
    }
  .bt-dubai.is-active {
    background-color: var(--darkred) !important;
    border: 2px solid #fff;
  }	
	.bt-hotel {display: none;}
  /* 詳細表示エリアのスタイル */
#sp-info-display {
    display: none; /* 最初は隠しておき、ボタン押下で表示 */
    width: 86%;
    margin: 20px auto;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
#sp-info-display img{
    width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 15px;
  }	
 #sp-info-display .Modal__container {
    flex-direction: flex; /* 横並びから縦並びへ */
    width: 90% !important;
    height: auto !important;
    box-shadow: none;
    transform: none;
    display: block;
}

.Modal__contents02 {
    width: 100%;
    padding: 0px;
}
#sp-info-display .modal-close-btn {
    display: none; 
  }		
	.Modal.active {
    display: none !important;
  }
	/* スマホ版ではモーダル本体とオーバーレイを物理的に消す */
  .Modal, #overlay {
    display: none !important;
    pointer-events: none !important;
  }

  /* 表示エリア自体のスクロールを妨げない設定 */
  #sp-info-display {
    display: none; /* JSでblockにする */
    pointer-events: auto !important;
    overflow: visible !important;
  }
/* ==========================================================================
   9. Hotel Section (タブの調整)
   ========================================================================== */
#hotel h2::before {
    font-size: 85px !important;
        top: 10px !important;
}	
	
#hotel .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom: 20px;
	padding-top: 60px;
}	
#hotel .sub-title p {
    font-size: 14px;
	padding: 10px 30px 30px;
	text-align: left;
}	
#hotel .sub-title {
    padding-bottom:1.5em;
}
.section h2::before {
        font-size: 85px !important;
	top: -10px !important;	}

.tab-buttons {
	max-width:230px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2に変更 */
    gap: 10px;
    padding: 20px 0;
}
.tab-btn {
    width: 110px; /* サイズを縮小 */
    height: 110px;
    margin: 0 auto;
}
.tab-btn h3 {
    font-size: 16px;
}
.tab-buttons label[for="hotel01"],.tab-buttons label[for="hotel02"],.tab-buttons label[for="hotel03"],.tab-buttons label[for="hotel04"]{
	background:none;
	background-color: var(--red);
}
	
/* 1. スライド全体のサイズ調整 */
    .slide-container .swiper-slide {
        width: 85% !important; 
        max-width: 85% !important;
        aspect-ratio: 3 / 2; 
        height: auto !important;
    }

    /* 2. 画像の表示方法を調整 */
    .slide-container .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;  
        border-radius: 15px;   
    }

    /* 3. 左右のナビゲーションボタンを小さくする */
    .hotel-section .swiper-button-prev,
    .hotel-section .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
        top: 50% !important;
    }
    
    /* ボタンの矢印サイズ調整（Swiperのデフォルトアイコンの場合） */
    .hotel-section .swiper-button-prev::after,
    .hotel-section .swiper-button-next::after {
        font-size: 18px !important;
    }

    /* 4. スライド下の情報エリアの余白調整 */
    .hotel-info {
        padding: 0 20px;
    }
    
    .hotel-info h5 {
        font-size: 24px;
        padding-top: 20px;
    }
    .hotel-info p {
        font-size: 16px;
    }

    .info-contents {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px;
    }

    .info-list li {
        font-size: 16px !important;
    }
    
    .info-list li span {
        min-width: 120px !important;
        font-size: 14px !important;
		max-height: 26px;
    }	

.tourbtn {
    font-size: 1rem;
    padding: 12px;
}
.hotel-caption {
  font-size: 13px;
  bottom: 10px; 
  left: 10px;
  padding: 3px 6px;
  border-radius: 1.1rem;
}
	
/* ==========================================================================
   10. Basic Info
   ========================================================================== */
.basic-info { padding: 15px; }
	
.info .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom:40px;
	padding-top: 15px;
}	
#info p {
    font-size: 16px;
	padding: 10px 30px 30px;
}	
	
.basic-info li {
    flex-direction: column;
}
.basic-info li h6 {
    width: 100%;
    margin-bottom: 5px;
}
.basic-info li p {
    width: 100%;
}
 
.dau03 {
    display: none;
}	
/* ==========================================================================
 Tour
   ========================================================================== */	
.tour .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom:40px;
	padding-top: 15px;
}
	
.tour-cards {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory; /* スナップ機能を有効化 */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
        padding: 0 20px 20px;
        gap: 15px !important;
        scrollbar-width: none; /* Firefoxでスクロールバーを隠す */
    }

    /* Chrome, Safariでスクロールバーを隠す */
    .tour-cards::-webkit-scrollbar {
        display: none;
    }

    .tour-cards li {
        flex: 0 0 85%; /* 各カードの幅を画面の85%に固定（次のカードが少し見える状態） */
        scroll-snap-align: center; /* スクロールが止まる位置を中央に設定 */
        margin: 0 !important; /* 既存の余白をリセット */
    }

    /* ツアーセクション全体のコンテナの左右余白をリセットして全幅に見せる */
    #tour .container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #tour p {
		font-size: 14px;
        padding:10px 20px 30px;
        text-align: left; /* スマホでは左寄せが見やすい */
    }	
	.tour-cards .text-area {
    padding: 0px;
}
#tour .mum01 {
    display: none;
}	
.mini-tourbtn {
    display: block;
    width:80%;
    max-width:none;
    margin: 30px auto 0;
    font-size: 14px;
}	
  /* --- Video --- */
	.video .sub-title h3 {
    font-size: 18px;
}	
    .video .sub-title h2 {
    font-size: 1.4rem;
    padding-bottom: 20px;
	padding-top: 15px;
}
  .video-wrapper iframe { height: 210px;  width: auto;}

  #video p {
	  font-size: 14px;
	  padding:30px 50px 0;
	  text-align:left;
}
/* ==========================================================================
   13. Footer / Call Center
   ========================================================================== */
.callcenter{
	padding: 1em 0 0em;
	}	
.callcenter ul.phone {
    flex-direction: column;
}
.callcenter li {
    width: 100%;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
	text-align: left;
}
.callcenter li h3 {
    font-size: 1.8rem; /* 電話番号を強調 */
	margin-bottom:0;
}
.callcenter li h4 {
	margin:5px 0;
	font-size:18px;
}		
.callcenter h4 {
	font-size:14px;
	text-align: center;
}	
.callcenter h3 {
	text-align: center;
}	

.pagetop {
    right: 15px;
    bottom: 15px;
    width: 60px;
    height: 60px;
}

}