/* ------------------------------
   Reset
------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------------------
   Base
------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Playfair+Display:wght@500;700&family=Rounded+Mplus+1c:wght@400;500;700&display=swap');

body {
  background-color: #EFD2D2;
  font-family: "Rounded Mplus 1c", "Poppins", sans-serif;
  color: #4b3b3b;
  line-height: 1.5;       
  letter-spacing: 0.08em; 
  overflow-x: hidden;
}

/* ------------------------------
   Header
------------------------------ */

.header {
  width: 100%;
  padding: 20px 80px 20px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  background-color: #EFD2D2;
  position: relative;
  z-index: 100;
}

.logo {
  position: relative;
  display: inline-block;
  width: 200px; 
  margin-right: auto; 
}

.logo-frame {
  width: 100%;
  height: auto;
  display: block;
}

.logo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: auto;
  pointer-events: none; 
}

.en-title {
  font-family: "Playfair Display", serif;
  font-size: 15px; 
  color: #C04A4A;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 0;
}

.jp-title {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 10px;
  color: #5c4a3d;
  margin-top: 3px;
  line-height: 1;
  white-space: nowrap;
}

.navi {
  display: flex;
  align-items: center;
  gap: 70px; 
  margin-right: 40px;
}


.navi a {
  text-decoration: none;
  color: #665f57;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  transition: color 0.3s;
}

.navi a:hover {
  color: #C04A4A;
}

.sns {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sns-icon img {
  width: 50px;
  height: 50px;
  transition: opacity 0.3s ease;
}

.sns-icon:hover img {
  opacity: 0.7;
}

/* ------------------------------
   Hero Section
------------------------------ */
.hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #efd2d2;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: top; 
}

.hero {
  position: relative;
  width: 100%;
  overflow: visible; 
}

.hero-center {
  position: absolute;
  top: 93%; 
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
}

.hero-frame {
  position: relative;
  width: 270px;  
  height: 350px;  
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-image {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
}


.frame-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(254, 243, 204, 0.85);
  border-radius: 80% / 85%; 
  z-index: 1;
  filter: blur(0.3px);
}

.hero-text-center {
  position: relative;
  z-index: 3;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 28px;
  color: #5c4a3d;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 2;
  letter-spacing: 0.15em;
}

.hero-text {
  position: absolute;
  top: 42%; 
  right: 10%; 
  transform: translateY(-50%);
  text-align: right;
  color: #5c4a3d;
}

.hero-text h1 {
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
}


.hero-buttons {
  position: fixed;       
  top: 25%;              
  right: 0;              
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 999;         
}

.hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 93px;
  background-color: #FFF0B9!important;
  border-radius: 100px 0 0 100px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #6b5438;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-btn:hover {
  opacity: 0.9;
  transform: translateX(-4px);
}

.hero-btn.yellow {
  background-color: #f7e88d;
}

/* ------------------------------
   WELCOME
------------------------------ */

section {
  padding: 80px 20px;
  text-align: center;
}

.intro {
  padding-top: 150px;
  text-align: center;
}

.welcome {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.flower {
  position: absolute;
  width: 200px;
  height: auto;
  opacity: 0.9;
  z-index: 1;
}

.flower-left {
  top: 200px;
  left: 5%;
}

.flower-right {
  top: 200px;
  right: 5%;
  transform: scaleX(-1);
  transform-origin: center;
  display: inline-block;
}


.title {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #917D66; 
}

.title .accent {
  color: #B56969;
}

.jp-text {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 26px;
  margin-bottom: 20px;
  color: #ffffff; 
}

.clinic-text {
  font-family: "Rounded Mplus 1c", sans-serif;
  color: #6B5438;    
  font-size: 16px;     
  line-height: 1.8;  
  margin-top: 30px;
}

.clinic-text .highlight {
  color: #B45656;     
  font-size: 24px;     
  font-weight: 600;   
}

.clinic-text2 {
  font-family: "Rounded Mplus 1c", sans-serif;
  color: #6B5438;     
  font-size: 16px;
  line-height: 1.8;
  margin-top: 25px;
}

.clinic-text2 .emphasis {
  color: #799461;      
  font-size: 24px;     
  font-weight: 600;
}


/* ------------------------------
   EFFECT（PC）
------------------------------ */

  .effect-section {
    margin-top: 0px; 
    text-align: center;
  }

  .effect-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    position: relative;
  }

  .effect-image {
    width: 600px;       
    height: 360px;
    border-radius: 37px;
    object-fit: cover;
  }

  .effect-box {
    position: relative;
    width: 600px;
    height: 360px;
    background-color: #d9a8a8;
    border-radius: 37px;
    padding: 40px 50px;
    box-sizing: border-box;
  }

  .effect-title {
    position: absolute;
    top: -30px;   
    margin-left: 240px; 
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 26px;
    color: #FFFFFF;
  }

  .effect-title .first-letter {
    color: #B56969;
    font-size: 36px;
    margin-left: -35px;
  }

  .effect-subtitle {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 20px;
    margin-top: -10px;
  }

  .effect-list {
    list-style: none;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 200;
    font-size: 20px;
    color: #6B5438;
    line-height: 2;
    word-break: keep-all; 
    margin-left: -20px;
    margin-top: 35px;
  }

  .effect-list li {
    margin-bottom: 30px;
  }

/* ------------------------------
  INFORMATION
------------------------------ */

.information {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
}

.flower-deco-top {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.flower-deco-bottom {
  position: absolute;
  bottom: 20px;  
  left: 60px;   
  width: 120px;  
  transform: rotate(-10deg); 
  z-index: 2;
  pointer-events: none;
}

.info-box {
  position: relative;
  width: 1100px;
  height: 600px;
  background-color: rgba(226, 179, 175, 0.6);
  border-radius: 36px;
  text-align: center;
  padding-top: 20px; 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.info-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 1px;
  margin: 0;
}

.info-title-i {
  font-size: 36px;
  color: #b56969;
  font-weight: 700;
}

.info-subtitle {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  margin-top: 8px;
  margin-bottom: 50px;
}

.info-content {
  width: 85%;
  margin: 0 auto;
  border-collapse: collapse;
}

.info-text {
  position: absolute;
  left: 50%;                      
  transform: translateX(-50%);    
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size:15px;
  color: #5e4b34;
}

.info-line {
  width: 85%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.18); 
  margin: 22px auto; 
  display: block;
}

.info-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #5e4b34;
  text-decoration: none;
  transition: all 0.3s ease;
}

.info-link:hover {
  color: #bd8e43; 
  text-decoration: underline;
}

.info-date {
  position: absolute;
  left: 0;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #5e4b34;
}

.info-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0 auto;
  width: 85%;
  border-bottom: none; 
}

.info-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 10px 36px; 
  background-color: #ffffff;
  color: #6b5438;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 18px; 
  font-weight: 500;
  text-decoration: none;
  border-radius: 40px; 
  border: 2px solid #cbb6b6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.info-btn:hover {
  background-color: #c04a4a;
  transform: translateY(-2px);
}

/* ------------------------------
  FLOW
------------------------------ */

.round-btn {
  display: inline-block;
  background-color: #f8e3e1;
  color: #6b5438;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 20px;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #c4a29e;
  transition: 0.3s;
  margin-top: 10px;
  margin-left: 600px;
  margin-bottom: 80px;
}


.round-btn:hover {
  background-color: #c04a4a;
  color: #fff;
}


/* ===============================
   セクション境目の白いデコライン
=============================== */
.section-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  position: relative;
  margin: 0 auto;
  opacity: 0.9;
  border-radius: 50px;
  z-index: 10;
}

/* ✨キラッと光るアニメーション */
.section-divider::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.3); }
}

/* ===============================
   各境目ごとの位置調整
=============================== */
.divider-feature {
  position: relative;
  top: -60px; 
}

/* ------------------------------
   FEAUTURE 共通背景
------------------------------ */
.feature,
.feature-detail {
  position: relative;
  text-align: center;
  background: 
    url('image/flower_bg.png') no-repeat center top / cover,
    linear-gradient(#efbbbc, #f6d7d7);
  background-attachment: fixed; 
  overflow: hidden;
}

/* 上部 Feature */
.feature {
  padding: 80px 20px 100px;
  background-position: center top;
}

/* 下部 金フレーム */
.feature-detail {
  padding: 80px 0 20px;
  background-position: center bottom; 
}


/* ===============================
   FEATURE 
=============================== */

.feature-wrap {
  background:
    url('image/flower_bg.png') no-repeat center top / cover,
    linear-gradient(#efbbbc, #f6d7d7);
  background-attachment: scroll; 
  text-align: center;
  overflow: hidden;
  position: relative;
  padding: 80px 0 0; 
}

.feature,
.feature-detail {
  background: none;
}

/* ------------------------------
   FEATURE（上部）
------------------------------ */
.feature {
  padding: 80px 20px 100px;
}

.feature-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  margin: 0;
}

.feature-title-f {
  font-size: 28px;
  color: #b56969;
  font-weight: 700;
}

.feature-subtitle {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  margin: 10px 0 60px;
}

.feature-circles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.circle-row {
  display: flex;
  justify-content: center;
  gap: 80px;
}

.top-row {
  margin-bottom: 20px;
}

.bottom-row {
  margin-top: -20px;
}

.circle {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  z-index: 1;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
}

.circle-frame {
  position: absolute;
  top: 50%;
  left: 48%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

.circle-text {
  position: relative;
  z-index: 5;
  padding: 20px 10px;
  text-align: center;
}

.circle-title {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #6b5438;
  line-height: 1.5;
  margin-bottom: 8px;
}

.circle-desc {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #6b5438;
  line-height: 1.6;
}

.highlight {
  color: #b03f3f;
}

/* ------------------------------
   貴宝石（下部）
------------------------------ */
.feature-detail {
  overflow: visible;
  text-align: center;
  position: relative;
  padding: 60px 0 160px;
  margin-top: 60px;
  background: transparent;
}

.feature-frame {
  position: relative;
  width: 800px;
  height: 600px;
  margin: 0 auto;
  margin-top: -80px;
  z-index: 2;
  transform: scale(0.9);
  transform-origin: top center;
}

.frame-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.frame-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
}

.frame-text {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #6b5438;
  line-height: 1.8;
  margin-bottom: 30px;
}

.highlight-gold {
  color: #bd8e43;
  font-weight: 800;
}

.frame-bottom-img {
  width: 700px;
  max-width: 85%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.white-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  width: 710px;
  height: 530px;
  background: #ffffff;
  border-radius: 0;
  z-index: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* ------------------------------
   Menu List / Swiper
------------------------------ */


.menu-list {
  position: relative; 
  overflow: visible;  
}

/* ===== 白いライン（境目） ===== */
.divider-menu {
  position: absolute;
  top: 1px; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}

.divider-menu::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}


.menu-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 10px;
}

.menu-title .first-letter {
  font-size: 36px;
  color: #cc7777;
}

.menu-sub {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 40px;
}

.menu-cloud {
  position: relative;
  display: inline-block;
  margin-bottom: 50px;
}

.cloud-img {
  width: 700px;
  height: 300px;
}

.cloud-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-icon {
  width: 70px;
  height: 70px;
  margin-left: -30px;
}

.cloud-text span {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: #6b5438;
  white-space: nowrap; 
}

.menu-lead {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: #6f5d51;
  margin-bottom: 60px;
}

.menu-deco {
  width: 400px;
  height: 100px;
  margin-bottom: 60px;
  margin-left: -12px;
  margin-top: -60px; 
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  grid-template-rows: repeat(2, 400px);
  gap: 40px;
  justify-content: center;
  margin-bottom: 80px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0 25px;
  height: 400px;
  width: 400px;
  border-radius: 20px;
  border: 3px solid #d2a09b;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- 画像 --- */
.menu-item img {
  width: auto;
  height: 220px;          
  object-fit: contain;
  display: block;
  margin-top: 25px;   
  margin-bottom: 20px;
}


.menu-btn {
  display: inline-block;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #6b5438;
  text-decoration: none;
  border: 2px solid #d2a09b;
  border-radius: 25px;
  padding: 10px 0;           
  width: 160px;               
  background-color: #ffffff;
  text-align: center;         
  margin-top: auto;          
  transition: 0.3s ease;
}

.menu-btn:hover {
  background-color: #f6e4e4;
}

.menu-more {
  display: inline-block;
  padding: 14px 60px;
  border: 2px solid #6b5438;
  border-radius: 50px;
  background-color: #ffffff;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 20px;
  color: #6b5438;
  text-decoration: none;
  transition: 0.3s ease;
}

.menu-more:hover {
  background-color: #c04a4a;
  transform: translateY(-3px);
}


/* ===============================
   Price 
=============================== */
.price-section {
  background-color: #DDBDBD;
  text-align: center;
  padding: 100px 0;
  position: relative;
  overflow: visible !important;
  z-index: 0;
}

/* ===== 白いライン（境目） ===== */
.divider-price {
  position: absolute;
  top: 1px; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}

.divider-price::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}

.price-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 10px;
}
.price-title .first-letter {
  font-size: 36px;
  color: #CC7777;
}

.price-subtitle {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 70px;
}

.price-item-title {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #866640;
  margin-bottom: 24px;
}

.price-box {
  width: 506px;
  height: 87px;
  border: 4px solid #B56969;
  margin: 0 auto 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.price-box p {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #866640;
}

.price-two-boxes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  margin-bottom: 50px;
}

.price-card {
  width: 633px;
  height: 557px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0 60px;
  overflow: visible !important;
  z-index: 1;
}

.card-header {
  width: 562px;
  height: 52px;
  background-color: #F7E2E1;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
.card-header p {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #B56969;
}

.jewelry-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: auto;
}

.price-two-boxes .price-card:first-child .jewelry-images {
  margin-top: 40px;
}

.jewelry-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.jewelry-row img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.jewelry-row:first-child img:nth-child(4) {
  transform: scale(0.97);
}
.jewelry-row:last-child img:nth-child(4) {
  transform: scale(1.22) translateX(4px);
}

.transparent-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  margin-top: 80px; 
}
.transparent-img img {
  width: 42px;
  height: 42px;
  margin-top: -70px !important;
}

.price-text-red {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #C55959;
  margin-top: 40px;
  margin-bottom: 40px;
}

.price-btn {
  display: inline-block;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #6B5438;
  border: 2px solid #6B5438;
  border-radius: 40px;
  padding: 10px 40px;
  text-decoration: none;
  transition: 0.3s;
  margin-bottom: 0;
}
.price-btn:hover {
  background-color: #f4e6e6;
}

.leaf-left,
.leaf-right {
  position: absolute;
  bottom: -50px;
  width: 150px;
  opacity: 0.9;
  z-index: 9999 !important; 
  pointer-events: none;
}

.leaf-left {
  left: -50px;
}
.leaf-right {
  right: -50px;
}

.price-note {
  text-align: center;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #6B5438;
  margin-top: 40px;
}
.note-asterisk {
  color: #B03F3F;
}

/* ------------------------------
   Question
------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@400&family=Rounded+Mplus+1c:wght@400;500&display=swap');

.question-section {
  position: relative;
  text-align: center;
  padding: 100px 0;
  overflow: visible;
}


/* ===== 白いライン（境目） ===== */
.divider-question {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}

.divider-question::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}

.question-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  margin: 0;
}

.question-title .highlight {
  font-size: 36px;
  color: #CC7777;
}

.question-subtitle {
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  margin-top: 8px;
}

.faq-list {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.faq-item {
  width: 1000px; 
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 3px solid #B56969; 
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  width: 100%;
  height: 90px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  cursor: pointer;
  font-size: 20px; 
  color: #6B5438;
  text-align: left;
}

.faq-question .q-letter {
  font-family: 'Playfair Display', serif;
  margin-right: 8px;
  font-size: 22px;
}

.plus {
  font-family: 'Poppins', sans-serif;
  font-size: 30px; 
  color: #6B5438;
  width: 40px;
  text-align: center;
}

.faq-answer {
  display: none;
  padding: 24px 32px;
  text-align: left;
  color: #6B5438;
  font-size: 18px; 
  background-color: #FFFFFF;
  line-height: 1.8;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-question {
  background-color: #F8ECEC;
}
/* ------------------------------
   MORE ボタン（Question用）
------------------------------ */
.more-btn {
  display: inline-block;
  background-color: #f8e3e1; 
  color: #6b5438;           
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 12px 50px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #c4a29e; 
  transition: all 0.3s ease;
  margin-top: 50px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.more-btn:hover {
  background-color: #c04a4a; 
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* ------------------------------
   Question Category Box
------------------------------ */
.category-box {
  width: 252px;
  height: 81px;
  background-color: #BE6E6E;
  color: #FFFFFF;
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin: 80px auto 29px;
  letter-spacing: 0.05em;
}

.question-section.full {
  background-color: #EFD2D2;
  padding: 120px 0 100px;
}

/* ------------------------------
   FAQ 開閉
------------------------------ */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease; 
}

.faq-item.open .faq-answer {
  max-height: none;
  opacity: 1;
  padding: 24px 32px; 
  background-color: #fff;
  white-space: normal;
}

.faq-item.open .faq-question {
  background-color: #F8ECEC;
  transition: background-color 0.3s ease;
}
/* ------------------------------
   カテゴリボックス フェードイン
------------------------------ */
.category-box {
  opacity: 0;               
  transform: translateY(40px);
  transition: all 0.8s ease; 
}

.category-box.show {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   Review 
------------------------------ */
.review-section {
  background-color: #E8C2C2;
  text-align: center;
  padding: 120px 0 160px;
  position: relative; /* 追加 */
}


/* ===== 白いライン（境目） ===== */
.divider-review {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}

.divider-review::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}


.review-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  text-align: center;
  margin: 0 auto;
}

.review-title .highlight {
  font-size: 36px;
  color: #CC7777;
}

.review-subtitle {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  margin-top: 8px;
}

.review-lead {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 26px;
  color: #6B5438;
  margin-top: 18px;
  margin-bottom: 72px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 374px);
  grid-template-rows: repeat(2, auto);
  gap: 49px 79px;
  justify-content: center;
}

/* カード */
.review-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  width: 388px; 
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #6B5438;
  font-family: "Rounded Mplus 1c", sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

.review-text {
  font-size: 14px; 
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: #6B5438;
  margin-top: 6px;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  text-align: left;
}


.review-heading {
  font-size: 17px;
  font-weight: 500;
  color: #B03F3F;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}


.review-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100px; 
  margin-left: 10px; 
}

.review-icon {
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin-bottom: 4px;
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.review-age {
  font-size: 13.5px;
  color: #6B5438;
}

.review-stars {
  font-size: 14px;
  color: #E3D153;
}

.review-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
  margin-bottom: 8px;
  position: relative;
}

.review-ear {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  position: absolute; 
  right: 10px; 
  top: 40px; 
}


.underline {
  position: relative;
  display: inline-block; 
  z-index: 1;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 16px; 
  background-color: #EED6D3;
  z-index: -1;
  border-radius: 3px;
  opacity: 1;
}

/* -----------------------------------
   Access セクション全体
----------------------------------- */
.access-section {
  background-color: #E9CACA; 
  text-align: center;
  padding: 100px 0 120px;
  position: relative; 
}

/* ===== 白いライン（境目） ===== */
.divider-access {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}


.divider-access::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}


.access-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.access-title .first-letter {
  font-size: 36px;
  color: #B56969;
}

.access-subtitle {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 60px;
  letter-spacing: 0.05em;
}

/* -----------------------------------
   マップ＋案内
----------------------------------- */
.access-flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 70px;
  margin-top: 90px;
  flex-wrap: wrap;
}

.access-map-box {
  width: 420px;
  height: 520px;
  border: 5px solid rgba(181, 82, 82, 0.8);
  border-radius: 34px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.12),
    inset 0 2px 4px rgba(255,255,255,0.4);
  margin-top: -30px;
}

.access-map-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* -----------------------------------
   駅案内
----------------------------------- */
.access-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 50px; 
}

.access-item {
  position: relative;
  width: 420px;
  height: 200px;
  border: 1.8px solid rgba(181,105,105,0.7);
  border-radius: 24px;
  background: rgba(255,255,255,0.15);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 3px rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.access-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.15),
    inset 0 1px 3px rgba(255,255,255,0.9);
}

.access-item-top {
  position: absolute;
  top: -35px;
  width: 280px;
  height: 70px;
  background: rgba(255,255,255,0.95);
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 2px rgba(255,255,255,0.8);
}

.access-item-top p {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #6B5438;
  margin: 0;
  text-align: center;
  letter-spacing: 0.06em;
}

.access-item-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.access-item-bottom p {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #6B4E3E;
  margin: 0;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ------------------------------
  WEB
------------------------------ */
.web-buttons2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 60px auto;
  position: relative; 
}
/* ===== 白いライン（境目） ===== */
.divider-web {
  position: absolute;
  top: -60px; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}


.divider-web::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}

.web-btn-box {
  position: relative;
  width: 300px;
  height: 80px;
  background-color: #FEF3CC;
  border: 1px solid #6B5438;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease; 
  box-shadow: 0 0 0 rgba(255, 240, 150, 0); 
  border-radius: 20px;
}

.web-btn-box:hover {
  box-shadow: 0 0 25px rgba(255, 240, 150, 0.7); 
  transform: translateY(-3px); 
}

.web-btn-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 200, 0.4), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.web-btn-box:hover::after {
  opacity: 1;
}

.web-btn2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 28px;
  color: #6B5438;
  position: relative;
  z-index: 2;
}


.decor {
  position: absolute;
  width: 140px; 
  height: auto;
  pointer-events: none;
}

.decor-left {
  left: -150px;
  top: 50%;
  transform: translateY(-50%);
}

.decor-right {
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------
   Bottom 
------------------------------ */
.bottom-area {
  background-color: #D2A09B;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative; 
}

/* ===== 白いライン（境目） ===== */
.divider-bottom {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}


.divider-bottom::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}

.bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.bottom-menu {
  display: flex;
  gap: 70px;
}

.bottom-menu a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.bottom-menu a:hover {
  opacity: 0.8;
}

.bottom-sns {
  display: flex;
  align-items: center;
  gap: 40px;
}

.bottom-sns img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}

.bottom-sns img:hover {
  opacity: 0.8;
}


/* ------------------------------
   Footer
------------------------------ */
.footer-info {
  background-color: #EFD2D2;
  padding: 90px 0 90px;
  position: relative;
  text-align: center;
}

/* ===== 白いライン（境目） ===== */
.divider-footer {
  position: absolute;
  top: 0px; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #fff 40%, transparent);
  border-radius: 50px;
  z-index: 20;
}


.divider-footer::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,100% {opacity: 0.3; transform: translateX(-50%) scale(1);}
  50% {opacity: 1; transform: translateX(-50%) scale(1.3);}
}


.footer-main {
  display: flex;
  justify-content: center;    
  align-items: center;        
  gap: 30px;                 
  max-width: 600px;         
  margin: 0 auto 30px;      
}

.footer-info .logo {
  position: relative;
  width: 200px;
}

.footer-info .logo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.footer-info .address-text {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 18px;
  color: #6B5438;
  line-height: 1.8;
}

.footer-info .tel-box {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  transform: translateX(-20px);
}

.footer-info .tel-icon {
  width: 60px;
  height: auto;
}

.footer-info .tel-number {
  font-family: "Rounded Mplus 1c", sans-serif;
  font-weight: 500;
  font-size: 36px;
  color: #6B5438;
}

.copyright {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #6B5438;
  margin-top: 60px;
  text-align: right;
  margin-right: 20px;
}

/* ===============================
   📱 Responsive Design (SP)
   ～768px対応：全体バランス調整
=============================== */
@media screen and (max-width: 768px) {

/* --- 全体リセット --- */
html, body {
  overflow-x: hidden;
  width: 100%;
}

section {
  padding: 60px 20px;
  text-align: center;
}

/* ------------------------------
   Header（ロゴ＋ナビ）
------------------------------ */
.sns-icon img {
    width: 35px;  
    height: 35px; 
  }

.logo {
    width: 100px; 
  }

  .en-title {
    font-size: 10px; 
  }

  .jp-title {
    font-size: 6px;   
  }

   .hamburger {
  display: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 24px;
  cursor: pointer;
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 10000;
}

.navi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: #EFD2D2;
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  transition: transform 0.4s ease;
  transform: translateX(100%);
  z-index: 9999; 
}

.hamburger span {
    height: 5px; 
    width: 100%;
    background-color: #5a4d45;
    border-radius: 3px; 
    transition: all 0.3s ease;
  }
  .navi.active {
    transform: translateX(0);
  }

  .navi a {
    font-size: 20px;
    color: #665f57;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 500;
    transition: opacity 0.3s;
  }

  .navi a:hover {
    opacity: 0.7;
  }
  
/* ✖アイコン */
.hamburger.active span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}



.hero-buttons {
  position: fixed;       
  top: 25%;              
  right: 0;              
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 999;         
}

.hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 93px;
  background-color: #FFF0B9!important;
  border-radius: 100px 0 0 100px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #6b5438;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-btn:hover {
  opacity: 0.9;
  transform: translateX(-4px);
}

.hero-btn.yellow {
  background-color: #f7e88d;
}


/* ------------------------------
   Heroセクション
------------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    height: 480px;  /* ←スマホ高さに調整 */
    background-color: #efd2d2;
    overflow: visible;
    
  }

  .hero-image {
    width: 100%;
    height: 60%;
    object-fit: cover;       /* ← 画面に合わせてトリミング */
    object-position: center; /* ← 被写体を中央に */
  }
 .hero-center {
    top: 58%; /* ← 位置を少し上に */
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .frame-bg {
    width: 50%;
    height: 50%;
    background-color: #FEF3CC !important;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  .frame-image {
    width: 55%;
    height: 55%;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .hero-text-center {
    font-size: 24px; /* 少し小さくして中央に収まるように */
    margin-top: 0;
  }

.hero-text-center {
  position: relative;
  z-index: 10; /* ← 最前面にする */
  font-family: "Rounded Mplus 1c", sans-serif;
  font-size: 16px;
  color: #5c4a3d;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 2;
  letter-spacing: 0.15em;
  margin-top: 100px;
  margin-left: -10px;
}

  .hero-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #4b3b3b;
    z-index: 5;
  }

  .hero-text h1 {
    font-size: 14px;
    margin-left: 90px;
    white-space: nowrap; 
    margin-top: -90px;
  }

  /* WEBボタン */
  .hero-buttons {
    position: fixed;
    top: 35%;
    right: -10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .hero-btn {
    width: 90px;
    height: 48px;
    font-size: 10px;
    border-radius: 80px 0 0 80px;
    white-space: nowrap;
  }
/* ------------------------------
   RESERVATIONセクション
------------------------------ */
.reservation-section {
    text-align: center;
    background-color: #EFD2D2;
    margin-top: -80px;
  }

  .reservation-main {
    font-size: 22px;
    color: #ffffff;
  }

  .reservation-main .r-letter {
    color: #CC7777;
    font-size: 32px;
  }

  .reservation-sub {
    font-size: 18px;
    color: #B03F3F;
    margin-top: 6px;
  }

  .reservation-box {
    width: 90%;
    background-color: #ffffff;
    border-radius: 16px;
    margin: 50px auto 0;
    padding: 30px 22px 50px;
    box-sizing: border-box;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }

  .reservation-note {
    font-size: 22px;
    text-align: center;
    margin-bottom: 25px;
    color: #6B5438;
  }

  .frame-img {
    text-align: center;
    margin-bottom: 10px;
  }

  .frame-img img {
    width: 90%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
  }

  .reservation-heading {
    font-size: 15px;
    text-align: center;
    margin: 30px 0 15px;
    color: #6B5438;
  }

  .reservation-list {
    list-style-type: "・"; 
    list-style-position: inside; 
    padding-left: 0;
    margin: 0 auto;
    text-align: left; 
  }

  .reservation-list li {
    font-size: 14px;
    line-height: 1.9;
    color: #6B5438;
    margin-bottom: 10px;
    text-indent: 0; 
  }

  .web-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: -60px;
  }

  .web-btn {
    width: 80%;
    background-color: #F7E4A9;
    color: #6B5438;
    font-size: 17px;
    padding: 14px 0;
    border-radius: 40px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 500;
    transition: 0.3s;
  }

  .web-btn:hover {
    background-color: #F4D87E;
    transform: translateY(-2px);
  }
/* ------------------------------
   Welcomeセクション
------------------------------ */
.welcome.intro {
    margin-top: -120px; /* ←ここを調整！マイナスで上に詰まる */
  }
.flower {
    width: 73px;  
    height: auto;  
  }

  .flower-left {
    left: -3px; 
    margin-top: -70px;
  }

  .flower-right {
    right: 20px; 
    margin-top: -70px;
  }

  .title {
    font-size: 26px;
    margin-top: -50px;
  }

  .jp-text {
    font-size: 18px;
  }

  .clinic-text {
    font-size: 13px; 
    margin-top: 60px;
  }

  .clinic-text2 {
    font-size: 13px; 
    margin-bottom: -50px;
  }

  .clinic-text .highlight {
    font-size: 16px; 
  }

  .clinic-text2 .emphasis {
    font-size: 16px; 
  }
/* ------------------------------
   Effectセクション
------------------------------ */

  .effect-section {
    background-color: #efd2d2;
    padding: 80px 0;
    text-align: center;
  }

  .effect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 20px;
    margin-top: -60px;
  }
 .effect-image {
    width: 90%;          /* ← 画面幅の90%に自動調整 */
    max-width: 320px;    /* ← 最大でも320pxに制限（見切れ防止） */
    height: auto;
    border-radius: 25px;
    object-fit: cover;
    margin-bottom: 30px;
  }

  .effect-box {
    width: 90%;          /* ← 画像に合わせて広げる */
    max-width: 360px;
    height: auto;         /* ← 高さも自動に */
    background-color: #d9a8a8;
    border-radius: 30px;
    padding: 25px 20px;
    color: #4b3b3b;
    text-align: left;
  }
  .effect-title {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
    margin-left: 135px;
    margin-top: 6px;
  }

  .effect-title .first-letter {
    color: #b56969;
    font-size: 32px;
  }

  .effect-subtitle {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 15px;
    margin-left: 120px;
  }

  .effect-list {
    list-style: none;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 200;
    font-size: 14px;
    color: #4b3b3b;
    line-height: 1.8;
    margin-top: 30px;
    margin-left: 0;
  }

  .effect-list li {
    margin-bottom: 20px;
  }

  /* ------------------------------
   Informationセクション
------------------------------ */

  .information {
    text-align: center;
    padding: 20px 15px 70px;
    border-radius: 20px;
    margin-top: -20px;
  }

  .info-box {
    width: 360px;
    height: 550px;
  }

  .info-title {
    font-family: "Playfair Display", serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
  }

  .info-title-i {
    font-size: 38px;
    color: #B56969;
  }

  .info-subtitle {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 30px;
  }

  .info-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 各行（日時＋タイトル） */
  .info-row {
    display: flex;
    align-items: center;       
    justify-content: center;   
    flex-wrap: nowrap;        
    white-space: nowrap;       
    gap: 40px;                
    margin-bottom: 22px;   
    margin-left: 40px;   
  }

  .info-date {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 10px;
    color: #5f4b4b;
  }

  .info-link {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 12px;
    color: #4b3b3b;
    text-decoration: none;
    transition: 0.3s;
  }

  .info-link:hover {
    color: #b56969;
  }

  .info-line {
    width: 80%;
    height: 1px;
    margin: -8px 0 18px 0; 
  }

  .info-btn {
    display: inline-block;
    background-color: #fff;
    color: #6b5438;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 15px;
    font-weight: 500;
    border-radius: 40px;
    border: 2px solid #c4a29e;
    padding: 8px 28px;
    text-decoration: none;
    transition: 0.3s;
  }

  .info-btn:hover {
    background-color: #c04a4a;
  }

  /* ------------------------------
   Flowセクション
------------------------------ */

   .round-btn {
    font-size: 16px; 
    margin-left: auto;  
    margin-right: auto;
    margin-top: -30px;   
    margin-bottom: 60px; 
    margin-left: 70px;
  }

  .round-btn:hover {
    background-color: #c04a4a;
    color: #fff;
  }
/* ------------------------------
   Featureセクション
------------------------------ */
.feature {
    padding: 0 20px 20px;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-title-f {
    font-size: 26px;
  }

  .feature-subtitle {
    font-size: 15px;
    margin: 8px 0 60px;
  }

  .feature-circles {
    gap:30px;
  }

  .circle-row {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    margin-top: 30px;
  }

  .circle {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .circle-frame {
    width: 115%;
    height: 115%;
  }

  .circle-title {
    font-size: 13px;
    line-height: 1.6;
  }

  .circle-desc {
    font-size: 11px;
    line-height: 1.7;
  }

  .feature-detail {
    padding: 40px 20px;
  }

  .feature-frame {
    width: 90%;
    max-width: 360px;
    margin-top: -30px;
    margin-bottom: -190px;
  }

  .frame-img {
    width: 130%;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }

  .white-box {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    height: 59%;
    background: #ffffff;
    z-index: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }

  .frame-content {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 2;
  }

  .frame-text {
    font-size: 13px;
    margin-top: 30px;
    white-space: nowrap;
  }

  .highlight-gold {
    font-size: 14px;
  }

  .frame-bottom-img {
    width: 100%;
    max-width: 260px;
    margin-top: -20px;
  }

  /* ------------------------------
   MENUセクション
------------------------------ */

  .menu-grid {
    display: none;
  }

  .menu-swiper {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 90px; 
    position: relative;
    overflow: visible;
  }

  .menu-item {
    width: 320px;
    height: 330px; 
    border-radius: 20px;
    border: 3px solid #d2a09b;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 20px 16px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* --- 画像 --- */
  .menu-img {
    width: auto;
    height: 170px !important;        
    object-fit: contain;
    display: block;
  }

  .menu-btn {
    font-size: 14px;
    border: 2px solid #d2a09b;
    border-radius: 25px;
    padding: 0 32px;          
    height: 36px;
    line-height: 36px;       
    color: #6b5438;
    background: #fff;
    text-decoration: none;
    transition: 0.3s;
    margin-top: -15px;
    margin-bottom: 8px;
    white-space: nowrap;      
    text-align: center;
    display: inline-block;
    overflow: visible;        
  }

  .menu-btn:hover {
    background-color: #f6e4e4;
  }

  .menu-swiper .swiper-button-prev,
  .menu-swiper .swiper-button-next {
    color: #b56969;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .menu-swiper .swiper-button-prev {
    left: -13px;
  }

  .menu-swiper .swiper-button-next {
    right: -13px;
  }

  .menu-swiper .swiper-pagination {
    position: absolute;
    bottom: 8px;
    text-align: center;
    width: 100%;
  }

  .swiper-pagination-bullet {
    background-color: #c04a4a !important;
    opacity: 0.4;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
  }

  .menu-cloud {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px; 
  }

  .cloud-img {
    width: 410px;
    height: auto;
  }

  .cloud-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .search-icon {
    width: 36px;
    height: 36px;
  }

  .cloud-text span {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #6b5438;
    white-space: nowrap;
  }

  /* --- 各ボタン個別調整 --- */

  /* 1. 顔のたるみ */
  .menu-item:nth-of-type(1) .menu-btn {
    padding: 0 28px;
  }

  /* 2. しわ */
  .menu-item:nth-of-type(2) .menu-btn {
    padding: 0 40px;
    font-size: 13px;
    white-space: nowrap;
    margin-left: 8px !important;
  }

  /* 3. 頭痛 */
  .menu-item:nth-of-type(3) .menu-btn {
    padding: 0 30px;
  }

  /* 4. 目の疲れ */
  .menu-item:nth-of-type(4) .menu-btn {
    padding: 0 30px;
  }

  /* 5. 肩の違和感 */
  .menu-item:nth-of-type(5) .menu-btn {
    padding: 0 32px;
  }

  /* 6. 腰の違和感 */
  .menu-item:nth-of-type(6) .menu-btn {
    padding: 0 32px;
  }

/* ------------------------------
   Priceセクション
------------------------------ */
.price-two-boxes {
    flex-direction: column; 
    align-items: center;
    gap: 40px; 
  }

  .price-card {
    width: 90%;
    height: auto; 
    padding: 40px 0 50px;
  }

  .price-box p {
  font-size: 15px;  /* 希望のフォントサイズに変更 */
}

  .card-header {
    width: 85%;
    height: 48px;
    margin-bottom: 40px;
  }

  .card-header p {
  font-size: 16px;  /* 希望のサイズに変更 */
}

  .price-box {
    width: 90%;
  }

  .jewelry-row img,
  .transparent-img img {
    width: 36px;
    height: 36px;
  }

  .price-text-red {
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .price-btn {
    font-size: 15px;
    padding: 8px 32px;
  }

  .leaf-left {
    left: -20px;
    bottom: -40px;
    width: 100px;
  }

  .leaf-right {
    right: -20px;
    bottom: -40px;
    width: 100px;
  }

  .price-note {
  font-size: 15px; /* お好きなサイズに変更 */
}

/* ------------------------------
   Questionセクション
------------------------------ */

   .question-section.full {
    margin-top: -80px;
  }

  .faq-item {
    width: 93%;
    border: 2px solid #b56969; 
    border-radius: 8px;
  }

  .faq-question {
    height: 72px;              
    font-size: 16px;          
  }

  .faq-question .q-letter {
    font-size: 18px;            
    margin-right: 6px;
  }

  .plus {
    font-size: 22px;            
    width: 28px;
  }

  .faq-answer {
    font-size: 14px;          
    padding: 26px 24px;
    line-height: 1.5; 
    word-break: break-word; 
  }

  .more-btn {
    font-size: 16px;
    padding: 8px 36px;
    border-radius: 40px;
    border: 1.8px solid #c4a29e;
  }

/* ------------------------------
  カテゴリボックスSP
------------------------------ */
  .category-box {
    width: 80%;             
    height: 70px;          
    border-radius: 25px;  
    font-size: 18px;        
    letter-spacing: 0.08em;
    margin: 60px auto 25px; 
    transition: all 0.8s ease;
  }

  .category-box.show {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease-out; 
  }

/* ------------------------------
   Reviewセクション
------------------------------ */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .review-card {
    margin: 0 auto;
    width: auto; 
    max-width: 330px; 
  }

  .swiper-button-prev,
  .swiper-button-next {
    color: #b56969;
    top: 50%;
    transform: translateY(-50%);
  }

  .swiper-button-prev {
    left: 2px;
  }

  .swiper-button-next {
    right: 2px;
  }

.review-lead {
  font-size: 18px; /* お好みのサイズに変更 */
}

/* ------------------------------
   Accessセクション
------------------------------ */
.access-section {
    background-color: #EAD0D0;
    padding: 80px 0;
  }

  .access-flex {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .access-map-box {
    width: 90%;
    height: 340px;
    border-radius: 28px;
  }

  .access-info {
    width: 100%;
    align-items: center;
    gap: 80px; 
    margin-top: 20px;
  }

  .access-item {
    width: 80%;
    height: 160px;
    border-radius: 22px;
  }

  .access-item-top {
    width: 240px;
    height: 60px;
    top: -28px;
  }

  .access-item-top p {
    font-size: 14px;
  }

  .access-item-bottom p {
    font-size: 18px;
  }

  .web-btn2 {
  font-size: 16px
}

/* ------------------------------
   Footer / Bottom
------------------------------ */
 .bottom-area {
    height: auto;
    padding: 40px 0;
  }

  .bottom-inner {
    flex-direction: column;
    gap: 25px;
  }

  .bottom-menu {
    gap: 40px;
  }

  .bottom-menu a {
    font-size: 14px;
  }

  .bottom-sns img {
    width: 26px;
    height: 24px;
  }

  .footer-info .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px; 
    max-width: 100%;
  }

  .footer-info .logo {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }

  .footer-info .logo img {
    width: 180px;   
    height: auto;
  }

  .footer-info .address-text {
    font-size: 14px;  
    line-height: 1.6;
  }

  .footer-info .tel-number {
    font-size: 26px;  
  }

  .copyright {
    text-align: center;
    margin-right: 0;
    margin-top: 40px;
    font-size: 14px; 
  }
}