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

@charset "UTF-8";

* {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;}

/* --- 以下、元のCSSの内容をすべてコピーして貼り付けてください --- */
/* (中略：background: url('images/...') などはそのままでOKです) */

/*navigation*/
.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;}
.nav_list li a {text-decoration:none;color:#333333;font-size:18px;font-weight:600;transition:0.3s;}
.nav_list li a:hover {color:#ff7c42;}
.nav-un-display {display:none;}
.hamburger {display:none;}

/*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;}
.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*/
.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: 7vw;}
.access_layout {display:flex;justify-content:center;gap:4vw;margin-top:4vw;width:100%;background:rgba(255,255,255,0.9);padding:4vw;}
.access_map {flex:1;max-width:62.5vw;aspect-ratio:16 / 9;filter:grayscale(20%);}
.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 237px;text-align:left;}
.info_group {line-height:39px;}
.info_group p {margin-bottom:1.3vw;}
.access_info .info_group:last-child p {margin-bottom: 0;}
.info_group h3 {font-size:20px;display:inline-block;}
.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);}

.hamburger,.nav-un-display,.menu_logo,.hamburger_text {display:none;}
.nav_content {position:static;background:none;height:auto;width:auto;visibility:visible;opacity:1;}

/*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);}
}

/*2560px*/
@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);}
}

/*experience_改行しないようテキストサイズ調整*/
@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;}
}
/*concept_テキストボックス改行を制限*/
@media(min-width:769px) and (max-width:1079px) {
  .concept_textbox p br {display: none;}
}

/*1024px*/
@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;}
  .menu-mobile-only {display:none;}
  
  .footer_logo img {width: 130px; margin-top: -5px;}
}

/*concept_三つの画像のうち真ん中のテキストが改行されないようテキストサイズ調整*/
@media (min-width:769px) and (max-width:911px) {
  .feature_item p {font-size: 1.727vw;}
}

/*experience_テキスト同士の上下のズレを調整*/
@media (min-width:769px) and (max-width:776px) {
  .exp_text_top h3 {padding-bottom: 10vw;}
}

/*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%; }

  /*concept*/
  .hero { height: 45vh; }
  .hero_logo { width: 180px; height: 180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
  .hero_logo img { width: 100%; height: 100%; object-fit: contain; }

  /*navigation*/
  .g_nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; }
  .g_nav .nav_list { display: none; }
  .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*/
  .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;}
  .info_group p {margin-bottom:3vw;}
  .access_info h3, .section-access h3 { text-align: center; padding: 0; margin: 0 auto; display: block; width: 100%; }
  .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*/
  .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; }
}

/*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; }
}

/*pcナビ設定*/
@media (min-width: 769px) {
  .menu-mobile-only {display:none;}
  .hamburger, .nav-un-display, .menu_logo { display: none; }
  .nav_content { position: static; background: none; width: 100%; height: auto; opacity: 1; visibility: visible; display: flex; justify-content: center; align-items: center; }
  .nav_list { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; width: 100%; }
  .nav_list li a { text-decoration: none; color: #333333; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; transition: color 0.3s; display: block; }
  .nav_list li a:hover { color: #ff7c42; }
  .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; }
}