/*
Theme Name: TOKYO EXIT Glamping Base
Author: User
Description: TOKYO EXIT Custom Theme
Version: 1.1
*/

@charset "UTF-8";

/* ==========================================================================
   基本設定 (Base Styles) & PC向けスタイル
   ========================================================================== */
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:"shuei-marugo-std","dnp-shuei-mgothic-std",sans-serif;color:#333333;font-size: 16px;line-height:1.6;overflow-x:hidden;width:100%;display:flex;flex-direction:column;min-height:100vh;}
main {flex:1;width:100%;}
img {display: block; width: 100%; height: auto; vertical-align: middle; }
.container,.concept_inner {max-width:1200px;margin:0 auto;padding:0 20px;width:100%;position:relative;}
h2,.section-title {font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;}
.section-title {font-size:48px;color:#6F4522;text-align:center;display:block;width:fit-content;margin:0 auto 7vw;border-bottom:3px solid #6F4522;}

/* Navigation (PC Base) */
.g_nav,.f_nav {background-color:#f2ede6;padding:25px 0;position:relative;z-index:100;width:100%;}
.nav_list {display:flex;justify-content:center;list-style:none;gap:66px;margin:0;padding:0;width:100%;align-items:center;}
.nav_list li a {text-decoration:none;color:#333333;font-size:18px;font-weight:600;transition:0.3s;display:block;}
.nav_list li a:hover {color:#ff7c42;}
.nav-un-display {display:none;}
.hamburger, .menu_logo, .hamburger_text {display:none;} /* PCではハンバーガー非表示 */
.nav_content {position:static;background:none;width:100%;height:auto;opacity:1;visibility:visible;display:flex;justify-content:center;align-items:center;}
.nav_insta {margin-left:10px;display:flex;align-items:center;}
.nav_insta a {display:flex;align-items:center;line-height:1;}
.insta_pc {display:block;width:24px;height:auto;transition:opacity 0.3s;vertical-align:middle;}
.insta_mobile {display:none;}
.nav_insta a:hover .insta_pc {opacity:0.7;}
.menu-mobile-only {display:none;}

/* Hero & Concept */
.hero {width:100%;height:100vh;background:url('images/hero_bg.webp') center/cover no-repeat;display:flex;justify-content:center;align-items:center;}
.hero_logo {width:24vw;min-width: 350px;} /* PCでの最小サイズ */
.hero_logo img {width:100%;}
.concept {width:100%;padding:0 0 10.2vw 0;background:url('images/wood.webp') center/cover no-repeat fixed;position:relative;overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10.5vw), 0 100%); z-index: 10; }
.concept_top {position:relative;height:630px;margin-bottom:60px;width:100%;}
.concept_textbox {position:absolute;bottom:0;left:0;width:50%;background:transparent;padding:60px;z-index:10;}
.concept_textbox::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(38,29,6,0.4);mix-blend-mode:multiply;z-index:-1;pointer-events:none;}
.concept_textbox h2 {color:#fff;font-family:"shuei-marugo-std","dnp-shuei-mgothic-std",sans-serif;font-weight:600;font-size:36px;line-height:56px;letter-spacing:0.125em;margin-bottom:14px;text-transform:none;}
.concept_textbox p {line-height:39px;color:#fff;margin-top:0;}
.concept_image_main {position:absolute;top:0;right:calc(50% - 50vw);width:70vw;height:100%;z-index:1;}
.concept_image_main img {width:100%;height:100%;object-fit:cover;}
.concept_features {display: flex; justify-content: center; gap: 4vw; margin-bottom: 60px; width: 100%;}
.feature_item {flex: 0 1 350px; text-align: center; position: relative;}
.feature_item img {width: 100%; height: auto; object-fit: cover; margin-bottom: 15px; margin-left: auto; margin-right: auto;}
.feature_item p {color: #fff; line-height: 1.6; text-align: center; padding: 0 5px;}
.feature_item:nth-of-type(1) p br {display: none;}
.concept_btn_area {text-align:center;width:100%;margin-top:7.6vw;margin-bottom:4vw;}

/* Menu */
.section-menu {z-index: 10; position: relative; width: 100%; margin-top: -10.5vw; padding-bottom: 15vw; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10.5vw)); z-index: 9;}
.menu-intro-image img {width: 100%; height: auto; display: block;}
.center-btn {text-align:center;width:100%;margin-top:-20.8vw;margin-bottom:-2.08vw;clear:both;}

/* Experience */
.section-experience {position: relative; width: 100%; margin-top: -14vw; padding: 15.2vw 0 0; background: url('images/a_experience_bg.webp') center/cover no-repeat; overflow: hidden; z-index: 8;}
.section-experience .section-title {margin-bottom: 5vw;}
.exp_triple_container {display: flex; justify-content: center; align-items: flex-end; gap: 2.78vw; width: 100%; max-width: 1200px; margin: auto; position: relative; padding: 0 20px;}
.exp_col_left, .exp_col_right {flex: 1; position: relative; display: flex; flex-direction: column;}
.exp_text_top {position: static; transform: none; width: 100%; text-align: center; margin-bottom: 15px; order: 1; padding: 0;}
.exp_text_top h3 {color: #4a3d34; font-size: 36px; font-weight: 700; line-height: 1.6; letter-spacing:0.08em; margin: 0; padding-bottom: 4vw; text-shadow: none;}
.exp_text_bottom {position: static; width: 100%; background: none; padding: 0 0 5.8vw 0; order: 2;}
.exp_text_bottom p {color: #4a3d34; font-size: 16px; line-height: 1.8; text-align: center; margin: 0;}
.exp_img_box {width: 100%; aspect-ratio: 4 / 3; overflow: hidden; order: 3;}
.exp_img_box img {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px;}
.img_down { margin: 0; }
.exp_btn_area {text-align:center;width:100%;margin-top:7vw;padding-bottom:7vw;}

/* Access (Optimized for PC) */
.section-access {
    box-sizing:border-box;
    position:relative;
    width:100%;
    padding:7vw 0;
    background:url('images/menu_bg.jpg') center/cover no-repeat;
}
.section-access .section-title {
    margin-top:-1vw;
    margin-bottom: 5vw;
}
.access_layout {
    display:flex;
    justify-content: space-between;
    align-items: center; /* 上下中央揃え */
    gap: 4vw;
    margin-top:4vw;
    width:100%;
    background:rgba(255,255,255,0.9);
    padding:4vw;
    border-radius: 4px;
}
.access_map {
    flex:1; /* 地図を主役に */
    width: 100%;
    aspect-ratio:16 / 9;
    filter:grayscale(0%); /* 地図は見やすく */
}
.access_map iframe {
    width:100%;
    height:100%;
    border-radius:4px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.access_info {
    flex: 0 0 40%; /* テキストエリアの幅を適度に制限 */
    text-align:left;
}
.info_group {
    line-height:1.8;
    margin-bottom: 2rem;
}
.info_group p {
    margin-bottom:0;
}
.access_info .info_group:last-child {
    margin-bottom: 0;
}
.info_group h3 {
    font-size:20px;
    display:inline-block;
    border-bottom: 2px solid #ff7c42; /* アクセント */
    margin-bottom: 0.5em;
}
.section-access .btn_area {text-align:center;margin-top:7vw;padding-bottom:0;}

/* Footer */
.main-footer {background-color:#2C3E35;width:100%;height:350px;display:flex;justify-content:center;align-items:center;margin-top:auto;box-shadow: 0 500px 0 500px #2C3E35;position: relative;z-index: 1;}
.footer_inner {max-width:1440px;width:100%;text-align:center;padding:40px;}
.footer_logo img {max-width:180px;width:100%;height:auto;display:block;margin:30px auto 0 ;}
.footer_sns {margin-bottom: 0;}
.footer_sns a {display: inline-block; transition: opacity 0.3s;}
.footer_sns a:hover {opacity: 0.7;}
.footer_sns img {width: 30px; height: auto; display: block; margin-top: 0; margin-bottom: 0 ; opacity: 0.7;}
.copyright {margin: 30px; color:#f7f7f7;opacity:0.7;}
.btn_orange,.btn-orange {display:inline-block;background-color:#ff7c42;color:#fff;padding:1.5vw 6.2vw;border-radius:50px;text-decoration:none;font-weight:bold;font-size:18px;transition:0.3s;box-shadow:0 4px 15px rgba(255,124,66,0.3);}
.btn_orange:hover,.btn-orange:hover {background-color:#e66a35;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,124,66,0.4);}


/* ==========================================================================
   Media Queries
   ========================================================================== */

/* 2560px (Large Screens) */
@media (min-width:1921px) {
  .container, .concept_inner, .exp_triple_container, .footer_inner {max-width: 1440px;}
  .concept {width: 100%; background-attachment: fixed; background-size: cover; padding-bottom: 200px;}
  .concept_inner {padding-left: 0; padding-right: 0;}
  .concept_features {width: 100%; margin: 0; gap: 80px;}
  .feature_item {flex: 1; max-width: none;}
  .concept_btn_area {margin-bottom:5vw;}
  .section-menu {margin-top: -18vw;}
  .center-btn {margin-top: -21.5vw; margin-bottom: -3vw;}
  .section-experience {margin-top: -10.5vw; padding-top: 11vw;}
  .exp_triple_container {gap: 80px; padding: 0;}
  .exp_text_bottom {padding: 0 0 4.8vw 0;}
  .access_layout {margin-left: -20px; margin-right: -20px; width: calc(100% + 80px);}
}

/* 1920px */
@media (min-width:1441px) and (max-width:1920px) {
  .container, .concept_inner, .exp_triple_container {max-width: calc(50vw + 480px);}
  .concept_inner {padding-left: 0; padding-right: 0;}
  .concept_features {width: 100%; margin-left: 0; margin-right: 0; gap: 60px;}
  .concept_textbox {left: 0; padding: 80px; max-width: 700px;}
  .feature_item {flex:1; max-width: none;}
  .section-menu {margin-top: -25.5vw;}
  .center-btn {margin-top: -30.8vw;}
  .exp_triple_container {display: flex; justify-content: center; align-items: flex-end; gap: 2.78vw; width: 100%; margin: auto; position: relative; padding: 0;}
  .exp_text_bottom {position: static; width: 100%; background: none; padding: 0 0 5.2vw 0; order: 2;}
  .exp_text_bottom p {font-size: 18px;}
  .access_layout {gap: 60px; padding: 60px; width: calc(100% + 40px);}
}

/* 1024px ~ 1094px adjustments */
@media(min-width:769px) and (max-width:1094px) {
  .exp_text_bottom {position: static; width: 100%; background: none; padding: 0 0 5.9vw 0; order: 2;}
  .exp_text_bottom p {font-size: 14.9px;}
}
@media(min-width:769px) and (max-width:1079px) {
  .concept_textbox p br {display: none;}
}

/* 1024px (Tablet) */
@media (min-width:769px) and (max-width:1024px) {
  .section-title {font-size:36px;margin-bottom:60px;}

  .concept_top {height:500px;}
  .concept_textbox {width:60%;padding:40px;left:0;}
  .concept_textbox h2 {font-size:28px;line-height:1.4;}
  .concept_image_main {width:65%;}

  .section-experience .section-title {margin-bottom: 2vw;}
  .exp_text_top h3 {font-size:28px;padding-bottom: 6.5vw;}
  .exp_text_bottom {padding-right:0;margin-top:40px;}
  .exp_text_bottom p {padding-left:0;}

  .access_layout {gap:30px;padding:40px;}
  
  .footer_logo img {width: 130px; margin-top: -5px;}
}

/* 911px adjustments */
@media (min-width:769px) and (max-width:911px) {
  .feature_item p {font-size: 1.727vw;}
}
/* 776px adjustments */
@media (min-width:769px) and (max-width:776px) {
  .exp_text_top h3 {padding-bottom: 10vw;}
}


/* --------------------------------------------------------------------------
   Mobile Styles (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body {min-height: auto; height: auto; overflow-x: hidden;}
  body, h1, h2, h3, h4, p, span, a, li {text-align: center;}
  .container, .concept_inner { padding: 0 25px; }
  .section-title { font-size: 32px; margin-bottom: 40px; }
  .section-experience .section-title, .section-access .section-title { margin-bottom: 50px; }
  .btn_orange, .btn-orange { display: block; width: 85%; max-width: 300px; margin: 7.8vw auto; padding: 3vw 0; font-size: 16px; box-sizing: border-box; }
  .concept_btn_area, .center-btn, .exp_btn_area, .btn_area { margin: 0; padding: 0; width: 100%; }

  /* Hero Correction (★重要：トップセクションの崩れ修正) */
  .hero { height: 45vh; }
  .hero_logo { 
      width: 180px; 
      height: 180px; 
      min-width: 0; /* PC用の350px制限を解除 */
      margin: 0 auto; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
  }
  .hero_logo img { width: 100%; height: 100%; object-fit: contain; }

  /* Navigation (Mobile) */
  .g_nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; }
  .g_nav .nav_list { display: none; } /* PCナビを非表示 */
  
  /* Hamburger Menu */
  .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 20px; right: 20px; width: 60px; height: 60px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 2000; padding-top: 8px; cursor: pointer; }
  .hamburger_icon { display: block; position: relative; width: 24px; height: 16px; margin-bottom: 3px; }
  .hamburger_icon span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #6F4522; transition: 0.3s; }
  .hamburger_icon span:nth-child(1) { top: 0; }
  .hamburger_icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .hamburger_icon span:nth-child(3) { bottom: 0; }
  .hamburger_text { display: block; font-family: "shuei-marugo-std", "dnp-shuei-mgothic-std", sans-serif; font-size: 7.2px; font-weight: 700; color: #6F4522; letter-spacing: 0.125em; text-align: center; line-height: 1; }
  
  .nav_content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url('images/wood.webp') no-repeat; background-size: 140% auto; background-position: center top; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.4s ease-in-out; z-index: 1500; }
  .menu_logo { display: block; position: absolute; top: 20px; left: 20px; width: 60px; height: 60px; }
  .menu_logo img { width: 100%; height: 100%; object-fit: contain; }
  .nav_content .nav_list { display: flex; flex-direction: column; gap: 40px; text-align: center; list-style: none; padding: 0;width: 100%; }
  .nav_content .nav_list li a { font-family: "shuei-marugo-std", "dnp-shuei-mgothic-std", sans-serif; font-weight: 700; font-size: 20px; color: #ffffff; text-decoration: none; letter-spacing: 0.125em; display: inline-block;}
  
  #nav_toggle:checked~.nav_content { opacity: 1; visibility: visible; }
  #nav_toggle:checked~.hamburger { background-color: transparent; box-shadow: none; }
  #nav_toggle:checked~.hamburger span { background-color: #ffffff; }
  #nav_toggle:checked~.hamburger span:nth-child(1) { top: 50%; transform: rotate(45deg); }
  #nav_toggle:checked~.hamburger span:nth-child(2) { opacity: 0; }
  #nav_toggle:checked~.hamburger span:nth-child(3) { bottom: 50%; transform: rotate(-45deg); }
  #nav_toggle:checked~.hamburger .hamburger_text { display: none; }
  
  .nav_insta { margin-top: 10px; }
  .nav_insta .insta_pc { display: none; }
  .nav_insta .insta_mobile { display: block; width: 36px; height: auto; margin: 0 auto; }
  .f_nav { display: none; }

  /* Concept */
  .concept { background-position: center top; padding-bottom: 0; clip-path: none; margin-top: 0; margin-bottom: 0; }
  .concept_top { height: auto; display: flex; flex-direction: column-reverse; margin-bottom: 20px; }
  .concept_image_main { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); height: auto; overflow: visible; margin-bottom: 40px; }
  .concept_image_main img { display: block; width: 100%; height: auto; object-fit: cover; transform: none; margin-top: 0; }
  .concept_textbox { position: static; width: 100%; padding: 0; text-align: center; background: transparent; }
  .concept_textbox::before { display: none; }
  .concept_textbox h2 { font-size: 30px; line-height: 1.4; letter-spacing: 0.1em; margin-bottom: 20px; text-align: center; }
  .concept_textbox p { font-family: "shuei-marugo-std", "dnp-shuei-mgothic-std", sans-serif; line-height: 1.8; letter-spacing: 0.02em; text-align: center; margin-top: 0; width: 99%; max-width: none !important; margin-left: auto; margin-right: auto; padding: 0;margin-bottom: 20px; }
  .concept_textbox p br { display: none; }
  .concept_features { display: flex; flex-direction: column; gap: 30px; margin-bottom: 0; }
  .feature_item { flex: 0 0 100%; text-align: center; }
  .feature_item img { width: 99%; margin: 0 auto 15px;position: static; transform: none; height: auto; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 10px; }
  .feature_item p { font-family: "shuei-marugo-std", "dnp-shuei-mgothic-std", sans-serif; line-height: 1.8; color: #ffffff; text-align: center; padding: 0; }
  .feature_item p br { display: none; }
  .feature_item:nth-of-type(2) p br { display: block; }
  .concept_btn_area .btn_orange { margin-top: 6vw; margin-bottom: 7.8vw; }

  /* Menu */
  .section-menu { position: relative; width: 100%; margin-top: 0; padding: 0; background-color: #ffffff; clip-path: none; z-index: 1; }
  .menu-mobile-only { display: block; width: 100vw; margin: auto ; position: relative; left: 50%; transform: translateX(-50%); line-height: 0; }
  .menu-mobile-only img { width: 100%; height: auto; display: block; }
  .section-menu .container { position: static; }
  .section-menu .center-btn { position: absolute; bottom: -1vw; left: 0; right: 0; margin: auto; z-index: 20; height: auto; width: 100%; pointer-events: none; }
  .section-menu .center-btn a { pointer-events: auto; }

  /* Experience */
  .section-experience { position: relative; clip-path: none; width: 100%; margin-top: 0; margin-bottom: 0; padding-top: 40px; padding-bottom: 0; background: url('images/a_experience_bg.webp') center/cover no-repeat; z-index: 15; }
  .exp_triple_container { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0 25px; box-sizing: border-box; }
  .exp_col_left, .exp_col_right { display: contents; }
  .exp_text_top { order: 1; width: 100%; }
  .exp_text_top h3 {color: #6F4522; padding: 0; text-align: center; font-size: 28px; line-height: 1.4; letter-spacing: 0.1em; margin-top: -2vw; margin-bottom: -3vw;padding-bottom: 0}
  .exp_text_bottom { margin-top: 0; width: 100%; background: none; padding: 0; margin-bottom: 2vw; order: 2; }
  .exp_text_bottom p { padding: 0; text-align: center; line-height: 1.8; letter-spacing: 0.02em; }
  .exp_col_right .exp_img_box { order: 3; }
  .exp_col_left .exp_img_box { order: 4; }
  .exp_img_box { width: 98%; margin: 0 auto;display: flex; justify-content: center; padding: 0; }
  .exp_img_box img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .img_up { margin: 0 0 20px 0; }
  .img_down { margin: 0; }
  .section-experience .exp_btn_area { margin-top: -1vw; margin-bottom: -1vw; padding-bottom: 0; width: 100%; }

  /* Access (Mobile: Column layout) */
  .section-access { width: 100%; padding-top: 40px;padding-bottom: 7.8vw; margin-top: 0; background: url('images/menu_bg.jpg') center/cover no-repeat; }
  .access_layout { width: 100%; padding: 5vw; gap: 40px; margin: 0 auto; display: flex; flex-direction: column-reverse; /* 住所が上、地図が下 */ align-items: center; text-align: center;}
  .access_map { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; display: block; margin: 0 auto; flex: none; }
  .access_info { width: 100%; margin: 0; flex: auto; }
  .info_group p {margin-bottom:3vw;}
  .access_info h3, .section-access h3 { text-align: center; padding: 0; margin: 0 auto; display: block; width: 100%; border-bottom: none; }
  .section-access .btn_area { margin-top: -1vw;margin-bottom: -1vw; padding-bottom: 0; text-align: center; }
  .section-access .btn_orange, .section-access .btn-orange { margin-bottom: 0; }

  /* Footer (Mobile) */
  .main-footer { margin: 0; height: auto; padding:6vw 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .footer_inner { width: 100%; padding: 0; text-align: center; }
  .footer_logo img { width: 25vw; max-width: 120px; height: auto; object-fit: contain; margin: 0 auto 4vw; display: block; }
  .footer_sns { width: 100%; text-align: center; margin: 0; }
  .footer_sns img { width: 9vw; max-width: 40px; height: auto; display: inline-block; margin: 0 auto; }
  .copyright { display: block; width: 100%; text-align: center; font-size:max(2.5vw, 11px); margin: 0 0 4vw 0; padding: 0; color: #f7f7f7; opacity: 0.7; }

} /* ← End of max-width: 768px */

/* 500px以下 */
@media (max-width: 500px) {
  .section-title { font-size: 7vw; }
  p { font-size: max(3.5vw, 14px);}
  .btn_orange, .btn-orange { width: 85%; margin: 7.8vw auto; padding: 4vw 0; font-size: 16px; }

  /* concept */
  .concept_top { margin-bottom: 4vw; }
  .concept_textbox h2 { font-size: 24px; line-height: 1.4; margin-bottom: 15px; }
  .concept_textbox p { line-height: 1.8; padding: 0; }
  .concept_image_main { margin-bottom: 8vw; }
  .feature_item img { aspect-ratio: 3/2; margin-bottom: 10px; }
  .concept_btn_area .btn_orange { margin-top: 9vw; margin-bottom: 10.7vw; }

  /* menu */
  .section-menu .center-btn { margin-top: -10vw; bottom: 3.5vw; }

  /* experience */
  .section-experience { padding-top: 6vw; }
  .section-experience .section-title { margin-bottom: 10.7vw; }
  .exp_text_top h3 { font-size: 22px; padding: 0 3vw; margin-top: -2vw; margin-bottom: -6vw; }
  .exp_text_bottom { margin-top: 3vw; margin-bottom:3vw; padding: 0 ; }
  .exp_img_box img { aspect-ratio: 3 / 2;}
  .section-experience .btn_orange { margin-top: 10.7vw; margin-bottom: 10.7vw; }

  /* access */
  .section-access .section-title { margin-bottom: 9vw; }
  .section-access { padding-top: 30px; padding-bottom: 10.7vw; }
  .access_layout { gap: 5.3vw; padding: 5.3vw ; }
  .access_info { flex: auto; width: 100%;  }
  .access_info h3 { font-size: 18px; margin-bottom: 5px; }
  .info_group { font-size: 13px; line-height: 1.6; }
  .section-access .btn_orange { margin-top: 10.7vw; margin-bottom: 0; }

  /* footer */
  .main-footer { padding:9vw 0; }
  .footer_logo img { margin: 0 auto 4vw; }
  .copyright { margin: 0 0 4vw 0; }
}