@charset "utf-8";
/* ============================ 
common
==============================*/
html {
  /* font-size: 62.5%; */
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 400;
  font-style: normal;
  color: #85645b;
  line-height: 1.5;
  background-color: #f4ecea;
}
img {
  max-width: 100%;
}

/* =====================
header
====================== */
header {
  width: 100%;
  height: 20%;
  position: fixed;
  top: 50px;
  z-index: 9999;
}

header .header-box {
  max-width: 90%;
  height: 72px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.header-box .header-link-btn {
  width: 360px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.menu-toggle:checked ~ .header-link-btn {
  display: none;
}

.purchase-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 44px;
  border-radius: 999px;
  background: #fff;
  color: #8b585a;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 6px rgba(139,88,90,-0.88);
  border: 2px solid rgba(139,88,90,0.95);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* PC用 hover */
@media screen and (min-width: 768px) {
  .purchase-btn:hover,
  .purchase-btn:focus {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.95),
      0 6px 18px rgba(139,88,90,0.18);
    outline: none;
  }
}

/* スマホ用固定＋フェード＋タッチアニメーション */
@media screen and (max-width: 767px) {
.purchase-btn {
  position: fixed;
  bottom: 20px;
  left: 50vw;
  transform: translateX(-50%) scale(1.4); /* 初期状態で大きくしておく */
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 25px;
  border-radius: 999px;
  background: #fff;
  color: #8b585a;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px; /* show時のサイズに合わせる */
  line-height: 1;
  border: 2px solid rgba(139,88,90,0.95);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 6px rgba(139,88,90,-0.88);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.12s ease;
}

/* タッチ時に少し拡大 */
.purchase-btn:active {
  transform: translateX(-50%) scale(1.05);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 6px 18px rgba(139,88,90,0.18);
}

.purchase-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1); /* 元の大きさに縮小して自然に出る */
}

  .header-link-btn .cart-img {
    width: 18px;
    height: auto;
  }

  .header-link-btn .insta-icon {
    display: none;
  }

  .header-box .header-link-btn {
    width: 0;
  }

  header .header-box {
    margin-left: 20px;
  }
}

/* ★ 画像アイコン用 */
.cart-img {
  width: 28px;     /* アイコンの大きさ */
  height: 28px;
  object-fit: contain;
  display: block;
  transform: translateY(1px); /* テキストとの縦位置を微調整 */
}

/* タイトル文字 */
.label {
  letter-spacing: 0.02em;
}

.hum-btn .btn {
  width: 72px;
  height: 70px;
}

.header-link-btn .insta-icon {
  display: inline-block;
  transition: filter 0.25s ease; /* ふわっと変化 */
}

/* ホバーでピンク系に着色 */
.header-link-btn .insta-icon:hover {
  /* #f7b6c8 付近のトーンになるよう調整 */
  filter: invert(58%) sepia(34%) saturate(1586%) hue-rotate(303deg)
    brightness(97%) contrast(96%);
}

/* チェックボックスは非表示 */
.menu-toggle {
  display: none;
}

/* ハンバーガーの〇 */
.hum-btn {
  width: 70px;
  height: 72px;
  border: 1px solid #fff; /* 白い円の線 */
  box-shadow: 1px 1px #f087aa, -1px -1px #f087aa, 1px -1px #f087aa, -1px 1px #f087aa;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 20px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* 三本線 */
.hum-btn span {
  display: block;
  width: 27px; /* 上下の線の長さ */
  height: 3px;
  background: #fff;
  box-shadow: 1px 1px #f087aa, -1px -1px #f087aa, 1px -1px #f087aa, -1px 1px #f087aa;
  margin: 4px 0;
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* 上の線が一番長い */
.hum-btn span:nth-child(1) {
  width: 27px; /* 上 */
}

/* 真ん中は少し短く */
.hum-btn span:nth-child(2) {
  width: 20px; /* 中 */
  align-self: flex-start;
}

/* 下はもっと短く */
.hum-btn span:nth-child(3) {
  width: 13px; /* 下 */
  align-self: flex-start;
}

/* ×を作るとき：真ん中の線は幅0で完全に消す */
.menu-toggle:checked + .hum-btn span:nth-child(2) {
  width: 0;
  opacity: 0;
  margin: 0 auto;
}

/* ×になったとき、丸枠の色を変える */
.menu-toggle:checked + .hum-btn {
  border-color: #f087aa;
}

/* 上下の線で×を作る */
.menu-toggle:checked + .hum-btn span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background: #f087aa;
}

.menu-toggle:checked + .hum-btn span:nth-child(3) {
  width: 27px;
  transform: rotate(-45deg) translate(5px, -5px);
  background: #f087aa;
}

/* チェックが入ったときに背景画像を表示 */
.menu-toggle:checked ~ .nav-menu {
  opacity: 1;
  pointer-events: auto;
}

/* 背景画像を表示 */
.menu-toggle:checked ~ .nav-menu::before {
  content: "";
  position: fixed; /* 全画面に表示 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/pc\ hum.jpg) no-repeat center/cover; /* お好きな画像に変更 */
  opacity: 0.95; /* 透明度でふんわり */
  z-index: -1; /* メニューより後ろに配置 */
}

/* ナビメニュー */
.nav-menu {
  position: fixed;
  top: 0; /* ボタンの下に表示 */
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-menu-inner {
  width: 80%;
  place-items: center;
  background: rgba(255, 255, 255, 0.80);
  height: 100vh;
}

.nav-menu .nav-box {
  padding: 180px 1em;
}

.nav-menu ul {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 70px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  font-size: 25px;
  font-style: normal;
  font-weight: 300;
  line-height: 180%; /* 57.6px */
  letter-spacing: 3.2px;
}

.nav-menu ul li a {
  display: block;
  text-align: left;
  color: #2a2a2a;
  transition: background-color 0.3s;
}

.nav-menu ul li a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.nav-menu .btn-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 70px;
}

.pink-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px;
  background: linear-gradient(90deg, #fbd5e6, #F087AA);
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  background: linear-gradient(90deg, #fbd5e6, #F087AA);
  transition: transform 0.4s ease, filter 0.3s ease;
}

.pink-btn:hover {
  background: linear-gradient(90deg, #F087AA, #fbd5e6); /* 反転 */
}

/* カート画像 */
.btn-box .cart-img {
  width: 25px; /* 実際の画像に合わせて調整してOK */
  height: auto;
  filter: brightness(0) invert(1);
}

.pink-btn:hover .cart-img {
  transform: rotate(15deg); /* 傾き */
}

.pink-btn .cart-img,
.insta-btn .insta-icon {
  transition: transform 0.4s ease; /* 傾きと拡大の速度を統一 */
}

/* ホバー時：傾け＆拡大 */
.pink-btn:hover .cart-img,
.insta-btn:hover .insta-icon {
  transform: rotate(15deg); /* 同じ角度 */
}

/* 左上角*/
.pink-btn::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  top: -15px;
  left: -15px;
  border: 5px solid #F087AA;
  border-right: none;
  border-bottom: none;
  border-radius: 4px;
}

/* 右上角*/
.pink-btn::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  top: -15px;
  right: -15px;
  border: 5px solid #F087AA;
  border-left: none;
  border-bottom: none;
  border-radius: 4px;
}

/* 左下角*/
.pink-btn .corner-bl,
.pink-btn .corner-br {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border: 5px solid #F087AA;
  border-radius: 4px;
}

/* 左下角 */
.pink-btn .corner-bl {
  bottom: -15px;
  left: -15px;
  border-right: none;
  border-top: none;
}

/* 右下角 */
.pink-btn .corner-br {
  bottom: -15px;
  right: -15px;
  border-left: none;
  border-top: none;
}

/* ボタン全体（背景は透明のまま） */
.insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: transparent;  /* ← 背景透明 */
  padding: 0 40px;       /* 必要なら調整 */
}

/* 左の丸いグラデーション背景 */
.circle-bg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe2ec, #e54889);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PNG インスタアイコン */
.insta-icon {
  width: 25px;       /* PNGの大きさ調整 */
  height: auto;
  display: block;
}

.insta-btn:hover .circle-bg {
  transform: rotate(15deg);
  background: radial-gradient(circle at 70% 70%, #ffe2ec, #e54889);
}

/* FOLLOW US の文字 */
.text {
  font-size: 20px;
  letter-spacing: 2px;
  color: #333;
}

.nav-menu .follow {
  display: flex;
  width: 178px;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 767px) {
  .nav-menu ul {
    grid-template-columns: 1fr;
  }

  .btn-box .insta-btn {
    display: none;
  }

  .nav-menu ul {
    gap: 30px;
  }
}

/* メニュー表示 */
.header-link-btn .insta-icon {
  width: 40px;
  height: 40px;
}

.header-link-btn .minne-btn {
  width: 250px;
}

h1 {
  height: 100vh;
  position: relative;
  margin-bottom: 140px;
}

h1 .kv-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kv {
  margin: 0;
  padding: 0;
  background-image: url(../images/top/kv-pc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh; /* ビューポートの高さに合わせる */
  width: 100vw; /* ビューポートの幅に合わせる */
}

.fadeIn {
  opacity: 0;                 /* 初期は透明 */
  transform: translateY(30px); /* 下から少し上にスライド */
  transition: all 2s ease-out;
}

.fadeIn.show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .kv {
    background-image: url(../images/top/kv-sp.jpg);
  }
}

.kv .kv-logo {
  width: 393px;
  height: 370px;
}

@media screen and (max-width: 767px) {
  .kv .kv-logo {
    width: 276px;
    height: 263px;
  }
}

/* =====================
main 
====================== */

main .greeting {
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
  text-align: center;
}

.greeting .pc-greeting {
  width: 1248px;
  margin-top: 170px;
}

.greeting .sp-greeting {
  margin-top: 170px;
}

@media screen and (max-width: 767px) {
  .greeting .pc-greeting {
    display: none;
  }

  .greeting .sp-greeting {
    margin-top: 50px;
  }

  main .greeting {
    margin-bottom: 35px;
  }
}

@media screen and (min-width: 768px) {
  .greeting .sp-greeting {
    display: none;
  }
}

.about {
  width: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 60px;
}

.txt-small,
.txt-verysmall,
.txt-large {
    display: none;
}

@media screen and (min-width: 1151px) {
  .about .picture {
    top: 0px;
  }
}

@media screen and (max-width: 1150px) {
  .about .picture {
    bottom: 120px;
  }
}

.about .picture {
  width: 40%;
  position: absolute;
  right: 3%;
  z-index: 2;
}

.about .box {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 949px) {
  .shape1 {
    width: 55%;
    height: 620px;
    border-radius: 57% 43% 45% 55% / 51% 51% 49% 49%;
    left: -24%;
  }
}

.shape1 {
  width: 75%;
  height: 815px;
  background-color: #fcfcfc;
  border-radius: 57% 43% 45% 55% / 51% 51% 49% 49%;
  position: relative;
  top: 30px;
  left: 3%;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .shape1 {
    width: 100%;
    border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
    height: auto;
    margin: 0;
    top: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) {
  .about .wave1 {
    display: none;
  }

  .about .wave2 {
    display: none;
  }
  .about .box {
    padding: 0 30px;
  }
}

.about .title {
  width: 55%;
  position: absolute;
  top: 23%;
  left: 15%;
}

@media screen and (max-width: 767px) {
  .about .title {
    position: relative;
    display: block;
    width: 70%;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    padding: 35px 0 10px;
  }
  .about .box {
    width: 100%;
    overflow: hidden;
  }
}

.about .txt {
  width: 100%;
  font-size: 20px;
  line-height: 3;
  letter-spacing: 2px;
  position: absolute;
  top: 38%;
  left: 15%;
}

@media screen and (max-width: 514px) {
  .txt-verysmall {
    display: block;
    font-size: 16px;
  }

}
  
@media screen and (max-width: 767px) {
  .about .txt {
    position: relative;
    top: auto;
    left: auto;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  .about .picture {
    bottom: -7%;
    width: 47%;
  }

  .aboutsvg {
    transform: translateY(100px);
  }
}

@media screen and (min-width: 515px) and (max-width: 1150px) {

  .txt-small {
    display: block;
    font-size: 18px;
  }

  p {
    line-height: 2;
    left: -15%;
  }
}

@media screen and (min-width:1151px) {
  .txt-large {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .shape1 .txt {
    font-size: 14px;
  }
}

.wave-container {
  width: 100%;
  height: auto;
}

/* ======================
prf
======================== */

.prf {
  width: 100%;
  height: 100%;
  position: relative;
}

.prf .title {
  width: 190px;
  height: 540px;
  position: absolute;
  top: 0px;
  left: 5%;
}

.prf-image {
  position: relative; 
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .prf .title {
    width: 116px;
    height: 337px;
  }
}

.prf .human {
  width: 23%;
  position: absolute;
  top: 200px;
  left: 25%;
  z-index: 10;
}

.prf .pound {
  width: 8%;
  position: absolute;
  top: 570px;
  left: 15%;
}

.prf svg {
  margin-top: 840px;
}

.owner-profile {
  max-width: 620px;
  margin: 0 auto;
  padding: 70px 125px;
  position: absolute;
  top: 3%;
  right: 3%;
  background-image: url(../images/profile/frame2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

@media screen and (max-width: 1160px) {
  .owner-profile {
    position: static;
    margin: 0 auto;
  }

  .prf-image {
    position: relative;
    display: flex;
    left: -20px;
    justify-content: flex-end;
    margin-top: 100px;
  }

  .prf .human {
    position: static;
    width: 35%;
    margin: 0 0 70px 0;
    display: block;
  }

  .prf .pound {
    display: none;
  }

  .prf svg {
    margin: 20px 0 20px 0;
  }
}

@media screen and (max-width: 767px) {
  .owner-profile {
    background-image: none;
    padding: 100px 0 0;
    max-width: 100%;
  }

  .owner-profile .owner-txt {
    background-color: #fcfcfc;
    padding: 30px 0;
  }

  .prf .human {
    width: 40%;
    margin: 50px 0 0 0;
  }
}

/* 「オーナー」 */
.prf-title .owner {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.6px;
  margin-left: -145px;
}

/* 横並び部分 */
.name-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* 花と名前の間の距離 */
}

/* 花アイコン */
.name-row .flower {
  width: 16px;
  height: 16px;
}

/* 日本語の名前 */
.name-row .name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin: 0;
}

/* 英字名 */
.name-row .e-name {
  font-size: 13px;
  letter-spacing: 0.25em;
}

.owner-profile .bio {
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 1.6px;
  padding: 30px 20px 5px;
}

.bio-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 40px 0 0;
}

.bio-title-flower {
  width: 16px;
  height: 16px;
}

.bio-title-text {
  font-size: 16px;
  letter-spacing: 0.25em;
  margin: 0;
  font-weight: 500;
}

.bio3 {
  font-size: 14px;
  padding-left: 0;
}

.bio3 li::before {
  content: "・";         /* 画像のような中点 */
  color: #8b585a;        /* 画像と同じ茶色 */
  font-size: 20px;       /* 大きさは調整OK */
  line-height: 1;
}

/* ================
gallery
================= */

.gallery {
  width: 100%;
  height: 100%;
  margin-bottom: 140px;
}

.gallery .title {
  width: 555px;
  height: 186px;
  margin-right: 0;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .gallery .title {
    width: 337px;
    height: 106px;
    margin: 0 auto;
  }

  .gallery {
    margin-bottom: 50px;
  }
}

.slick-prev,
.slick-next {
  display: none !important;
}

/* =================
buy-btn
===================*/

.buy-box {
  align-items: center;
  margin-bottom: 140px;
}

@media screen and (max-width: 767px) {
  .buy-box {
    margin-bottom: 50px;
  }
}

.buy-box .buy-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap; /* 画面が極端に狭い時に縦並びに */
}

.buy-box .pc-human {
  max-width: 530px;
  overflow: hidden;
}

h3 {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: 4.8px;
}

.txt-box .content1 {
  width: 70px;
  height: 60px;
  display: block;
  margin: 80px 80px 0px auto;
}

.buy-box .txt-box {
  width: 50%;
  background-color: #fcfcfc;
  border-radius: 0px 70px 70px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.txt-box .content2 {
  width: 130px;
  height: 12px;
  margin: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.big-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 430px;
  max-width: 600px;
  padding: 20px 30px;
  border: 2px solid #e6b6ba; /* 薄いピンク線 */
  border-radius: 100px;
  text-decoration: none;
  background: #fff;
  box-sizing: border-box;
  transition: 0.3s;
  margin: 30px auto 70px;  
}

.big-btn:hover {
  background: #fff5f7;
}

.btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-img {
  width: 28px;
  height: auto;
}

.big-btn span {
  font-size: 20px;
  color: #8b585a;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.btn-right {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, #ff9fc2, #e76fa0);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -4px 4px 12px rgba(255, 200, 210, 0.6);
}

.btn-right .arrow svg{
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  transform: translateY(0px);
  display: block;

}

@media screen and (min-width: 1100px) {
  .pc-human {
    border-radius: 70px 0px 0px 70px;
    display: block;
  }

  .sp-human {
    display: none;
  }
}

@media screen and (max-width: 1099px) {
  .buy-box {
    flex-direction: column;
    align-items: center;
  }

  .buy-box .buy-inner {
    width: 90%;
    display: flex;
    align-items: center;
  }

  .sp-human {
    display: block;
    width: 80%;
    border-radius: 70px 70px 0 0;
    margin: 0 auto;
  }

  .pc-human {
    display: none;
  }

  .buy-box .txt-box {
    width: 80%;
    border-radius: 0 0 70px 70px;
    align-items: center;
  }

  .txt-box .btn {
    width: 100%;
    max-width: 440px;
    margin-bottom: 30px;
  }

  .txt-box .content1 {
    margin: 20px 80px 0px auto;
  }
}

@media screen and (max-width: 768px) {
  .sp-human {
    width: 90%;
    border-radius: 50px 50px 0 0;
  }

  .buy-box .txt-box {
    width: 90%;
    border-radius: 0 0 50px 50px;
  }

  .txt-box h3 {
    font-size: 14px;
    line-height: 25px;
  }

  .txt-box .content1 {
    width: 35px;
    height: 30px;
    margin: 20px 45px 0px auto;
  }

  .txt-box .content2 {
    width: 65px;
    height: 6px;
    margin-top: 14px;
  }

  .txt-box .btn {
    width: 70%;
    margin: 30px auto;
  }

  .big-btn {
    width: 330px;
    margin: 10px 20px 25px;
  }

  .big-btn span {
    font-size: 14px;
  }

  .btn-left .cart-img {
    width: 20px;
    height: auto;
  }

  .btn-right {
    width: 50px;
    height: 50px;
  }
}

@media screen and (max-width:500px){
  .big-btn {
    width: 225px;
    margin: 0 10px 15px;
    padding: 10px 22px;
  }
  
  .btn-left .cart-img {
    width: 16px;
    height: auto;
  }

  .btn-right {
    width: 30px;
    height: 30px;
  }
  
}

/* ===================
background
=================-==*/

.background img {
  width: 100%;
}

/* ==================
inf-box
====================*/

.inf-box {
  background-color: #fcfcfc;
  padding: 140px 0 140px;
}

.inf-box .inner {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.uk-flex {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.inf-box .address-wrap {
  flex-basis: calc(100% - 420px);
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
  width: 80%;
}

.address-wrap .border-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.uk-flex1 .border-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6d0ca;
  margin-left: 30px;
}

.inf-box dl {
  margin: 0;
  padding: 0;
}

.inf-box dt,
.inf-box dd {
  display: block;     /* 横並びを防ぐ */
  margin: 0;
  padding: 0;
  color: #8b6a63;      /* スクショの茶色 */
}

/* dt（項目名） */
.inf-box dt {
  font-weight: 600;
  font-size: 18px;
  margin-top: 32px;    /* 上の余白：項目同士を離す */
  letter-spacing: 0.1em;
}

/* dd（内容） */
.inf-box dd {
  font-size: 16px;
  margin-top: 10px;    /* dtとの間を少し空ける */
  margin-left: 0;      /* デフォルトの左余白を消す */
  line-height: 1.7;
}

/* ▼ Instagramリンクを可愛く */
.address-wrap a {
  color: #8b6a63;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin-top: 20px;
  transition: color 0.3s ease;
  position: relative;
  padding-left: 20px; /* 矢印分の余白 */
}

/* 通常時：茶色の ► */
.address-wrap a::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 3px;
  color: #8b6a63; /* 茶色 */
  font-weight: 700;
  font-size: 14px;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* ホバー時：矢印がピンクに & ちょっと右に動く */
.address-wrap a:hover::before {
  color: #F087AA; /* ピンク */
  transform: translateX(3px);
}

/* リンクテキストもピンクに変化する場合 */
.address-wrap a:hover {
  color: #F087AA;
}

/* 下線アニメーション */
.address-wrap a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #F087AA;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.address-wrap a:hover {
  color: #F087AA;
}

.address-wrap a:hover::after {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .inf-box .uk-flex {
    padding: 60px 0 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .inf-box {
    padding-top: 0;
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {

  .owner-profile .wave1 {
    display: none !important;
  }

  .owner-profile .wave2 {
    display: none !important;
  }

  .inf-box {
    padding: 140px 40px;
  }
}

/* ===================
map
=====================*/

.map {
  width: 60%;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #85645b;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media screen and (max-width: 767px) {
  .map iframe {
    width: 100vw;
    height: 80vh; /* 高さは画面の80%に調整。必要に応じて変更可 */
  }

  .map {
    margin: 0;
    padding: 0;
  }

  .uk-flex2 {
    flex-direction: column-reverse;
  }

  .map,
  .map-txt {
    width: 100%;
  }

  .map-txt {
    padding: 40px;
  }
}

.uk-flex2 .border-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6d0ca;
  margin-left: 30px;
}

.map-txt .border-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0.1em;
}

.inf-box .btn {
  width: 220px;
  height: 65px;
}

.inf-box .map-btn {
  margin-top: 30px;
  display: block;
  width: fit-content;
  height: fit-content;
}

.map-txt dl dt {
  font-weight: 600;
  letter-spacing: 0.1em;
}

.site-footer {
  text-align: center;
  padding: 10px 0;
  background-color: #ededed;
  font-size: 14px;
  color: #915d5d;
  letter-spacing: 1.8px;
  font-weight: 500;
}