@charset "UTF-8";
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  overflow-x: hidden;  
}

/* ============================
   MAIN VISUAL
============================ */
.om06_mv {
  position: relative;
  overflow: hidden;
}

.om06_mv img {
  width: 100%;
  height: auto;
  display: block;
}

img.om06_mv_pc { display: block; }
img.om06_mv_sp { display: none;}

/* ============================
   CONCEPT
============================ */
.om06_concept {
  text-align: center;
  padding: 100px 20px;
  background: url("../image/top/concept_bg.jpg") no-repeat center;
  background-size: cover;  
  color: #333;
  position: relative;
}

.om06_concept h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}

.om06_concept p {
  font-size: 16px;
  line-height: 2;
}

/* ============================
   LUXURY・QUALITY
============================ */
.om06_luxury,
.om06_quality {
  display: flex;
  align-items: center;
  background: #202020;
  color: #fff;
}

.om06_luxury_img {
  width: 60%;
}

.om06_quality_img {
  width: 60%;
}

.om06_luxury_img img,
.om06_quality_img img {
  width: 100%;
  height: auto;
  display: block;
}

.om06_luxury_text,
.om06_quality_text {
  width: 40%;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.om06_luxury_text h2,
.om06_quality_text h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 48px;
  color: #FFCA8E;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.om06_luxury_text p,
.om06_quality_text p {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ============================
   LOCATION
============================ */
.om06_location {
  padding: 100px 20px;
  text-align: center;
  background: #f7f1ea;
}

/* ▼ タイトル */
.om06_location h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 48px;
  color: #473C27;
  margin-bottom: 60px;
  letter-spacing: 0.05em;
}

/* ▼ 2カラムを flex に変更！ */
.om06_loc_box {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: auto;
}

/* 左の縦長を固定（画像高さそのまま） */
.om06_loc_left {
  flex: 1;
}

/* 右側：2枚を “下に寄せる” */
.om06_loc_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ★これで右下の画像が左の底辺に揃う */
  gap: 24px;
}

/* ▼ 各アイテム */
.om06_loc_item {
  position: relative;
}

.om06_loc_item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ▼ キャプション */
.om06_loc_item span {
  position: absolute;
  bottom: 16px;
  left: 16px;
  text-align: left;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,0,0,1),    /* 黒を最大に濃くして少しぼかし */
    0 2px 4px rgba(0,0,0,.8),  /* 下方向に濃めの影 */
    0 4px 6px rgba(0,0,0,.6);  /* さらに下に柔らかい影を追加 */
  font-size: 20px;
  line-height: 1.4;
}

/* ============================
  SP (768px以下)
============================ */
@media (max-width: 768px) {
  img.om06_mv_pc {
    display: none;
  }
  img.om06_mv_sp {
    display: block;
  }
  * {
    box-sizing: border-box;
  }

  /* セクションタイトル */
  h2 {
    font-size: 24px !important;
    line-height: 1.4;
    word-break: keep-all;
  }

  /* CONCEPT */
  .om06_concept {
    padding: 60px 20px;
    background-size: cover;
  }

  .om06_concept h2 {
    font-size: 24px !important;
    margin-bottom: 20px;
  }
  .om06_concept p {
    font-size: 14px;
    line-height: 1.8;
  }

  /* ---- LUXURY ---- */
  .om06_luxury {
    flex-direction: column-reverse;
  }

  .om06_luxury_img,
  .om06_luxury_text {
    width: 100%;
  }

  .om06_luxury_text {
    padding: 20px;
    text-align: center; /* ★ 中央寄せ */
  }

  .om06_luxury_text h2 {
    font-size: 24px !important;
  }
  .om06_luxury_text p {
    font-size: 14px;
  }

  /* ---- QUALITY ---- */
  .om06_quality {
    flex-direction: column;
  }

  .om06_quality_img,
  .om06_quality_text {
    width: 100%;
  }

  .om06_quality_text {
    padding: 20px;
    text-align: center; /* ★ 中央寄せ */
  }

  .om06_quality_text h2 {
    font-size: 24px !important;
  }
  .om06_quality_text p {
    font-size: 14px;
  }

  /* ---- LOCATION ---- */
  
  .om06_location {
    padding: 40px 20px;
  }
  
  .om06_location h2 {
    margin-bottom: 40px !important;
  } 
  
  .om06_loc_box {
    flex-direction: column;
    gap: 20px;
  }

  /* ★すべての画像を同じ比率に */
  .om06_loc_item img {
    width: 100%;
    aspect-ratio: 620/400;
    object-fit: cover;
  }

  /* 画像内テキストを少し小さく */
  .om06_loc_item span {
    font-size: 16px;
    bottom: 12px;
    left: 12px;
    text-align: left;
  }
}
/* =====================================
   2025 ANIMATION SET（underscore版）
===================================== */

/* ---------- MAIN VISUAL ZOOM ---------- */
.om06_mv {
  overflow: hidden;
}

.om06_mv img {
  opacity: 0;
  transform: translateY(10px);
  animation: mv_fade 1.6s ease-out forwards;
  will-change: transform;  
}

@keyframes mv_fade {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- SCROLL FADE BASE ---------- */
.fade_up,
.fade_left,
.fade_right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.fade_up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
  transition-delay: var(--delay, 0s);
}

.fade_up.is_show {
  opacity: 1;
  transform: translateY(0);
}

.fade_left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
  transition-delay: var(--delay, 0s);
}

.fade_left.is_show {
  opacity: 1;
  transform: translateX(0);
}

.fade_right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
  transition-delay: var(--delay, 0s);
}

.fade_right.is_show {
  opacity: 1;
  transform: translateX(0);
}

.fade_up.is_show,
.fade_left.is_show,
.fade_right.is_show {
  opacity: 1;
  transform: translate(0,0);
}

/* ---------- LOCATION HOVER ---------- */
.om06_loc_item {
  overflow: hidden;
}

.om06_loc_item img {
  transition: transform 0.6s ease;
}

.om06_loc_item img {
  transform-origin: center center;
}

/* ---------- MENU HOVER ---------- */
.icon_menu_item a {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.icon_menu_item a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .fade_left, .fade_right {
    transform: translateY(20px);
    text-align: center;
  }
}