@charset "utf-8";
/* =================================
common
================================== */
html, body {
    overflow-x: hidden; /* 横スクロール防止 */
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box; /* paddingやborderを含めて幅計算 */
}

:root{
    --primary-white: #FFFFFF;
    --primary-whiteLow: #F5F5F5;
    --primary-black: #3F2B2B;
    --primary-red: #782B4D;
    --primary-darkbrown: #5A4739;
    --primary-lightbrown: #86491A;
    --primary-pink: #D5ADAD;
    --contentWidth: 94.6%;
    --contentPadding: 2.6%;
}

html{
    font-size: 62.5%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body{
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif, "Noto Serif JP", serif;
    font-style: normal;
    color: var(--primary-darkbrown,#5A4739);
    background-color: var(--primary-white,#FFFFFF);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

img{
    max-width: 100%;
    height: auto;
}

.section:not(:first-of-type) {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.topic{
    color: var(--primary-darkbrown,#5A4739);
    text-align: center;
    font-family: 'Noto Serif JP';
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 auto;
    letter-spacing: 0.08em;
}

.section .SP-titleLine {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 0.5rem;
}

.btn{
    font-family: "Noto Serif JP";
    display: block;
    border-radius: 5px;
    background-color: var(--primary-red, #782B4D);
    padding: 1.8rem 8rem;
    color: var(--primary-white, #ffffff);
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 4, 4, 0.25);
    width: 91.2%;
    max-width: fit-content;
    margin: 0 auto;
    transition: 0.4s;
    text-decoration: none;
}

.btn:hover {
  background-color: var(--primary-pink,#D5ADAD);
}

.PC-titleLine{
    display: none;   
}

/* =================================
header
================================== */
.header{
    background-color:#ffffff;
    padding: 0;
    margin: 0 auto 10px;
}

.header__contents{
    padding-left: 1.4rem;
    padding-right: 2.1rem;
    padding-top: 10px;
}

.header__line-sp{
    width: 100%;
    height: auto;
    display: block;
}

.header__line-PC{
    display: none;
}

.logoImg{
    max-width: 100%;
    height: auto;
    display: block;

}

/* nav 初期表示 */
 .nav {
    background-color: rgba(134, 73, 26, 1); 
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
    will-change: transform;
 } 

.nav__header {
    padding: 1rem 0.5rem 0px 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-lightbrown,#86491A);
    height: 6.4rem;
}

.navlogoImg{
    max-width: 100%;
    height: auto;
    display: block;
}

.nav__closeBtn{
    width: 50px;
    height: 50px;
}

.nav__list{
    background-color: var(--primary-lightbrown,#86491A);
    padding: 0 ;
}

.nav__item img {
  vertical-align: middle;
}

.nav__item{
    font-size: 2.4rem;
    line-height: 1;
    color: var(--primary-white);
    margin-top: 4.8rem;
    font-family: 'Noto Serif JP';
}

.nav__item a img:first-of-type {
  margin-right: 1.2rem; /* line.svg と cafemenu.svg の間に12px */
}

.nav__item a img:last-of-type {
  margin-right: 2.1rem; /* 文字との間隔を21pxに */
}

.nav__item:first-child {
    margin-top: 7.5rem;
}

.nav.active{
    transform: translateX(0);
}

.header__btn{
    display: block;
    width: 30px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 5.6%;
}
/* nav 初期表示 */

/* header PC*/
@media (min-width: 1024px) {

  /* SP用ライン非表示、PC用ライン表示 */
  .header__line-sp {
    display: none;
  }
  .header__line-PC {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ヘッダーの内容を横並び */
  .header__contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2%;
    position: relative;
    max-width: 1440px;
  }

  /* ハンバーガーメニュー非表示 */
  .header__btn {
    display: none;
  }

  /* navを横並び表示 */
  .nav {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background-color: transparent;
    display: flex;
    align-items: center;
  }

  .nav__header {
    display: none; /* SP用のロゴ＋閉じるボタンは非表示 */
  }

  .nav__list {
    display: flex;
    gap: 2rem; /* ナビアイテム間の間隔 */
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    background-color: var(--primary-white,ffffff);
  }

  .nav__item {
    font-size: 1.6rem;
    margin-top: 0;
    color: var(--primary-darkbrown,#5A4739);
    font-family: 'Noto Serif JP', serif;
  }

  .nav__item:first-child{
    margin-top: 0;
  }

  .nav__line-sp{
    display: none;
  }

  .nav__item a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
  }

  /* アイコンとテキストの間隔調整 */
  .nav__item a img:first-of-type {
    margin-right: 0.8rem;
  }
  .nav__item a img:last-of-type {
    margin-right: 0.5rem;
  }

  /* ロゴを小さくしたい場合 */
  .header__logo img {
    max-height: 60px;
  }
}
/* 1024px */

/* =================================
main-visual
================================== */
.main-visual-sp {
  position: relative;
} 

.mainImg-title-sp {
    position: relative;
    z-index: 10;  /* ← 画像より前に出す */
    color: #fff;  /* 白文字(必要なら) */
    text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

.main-visual-sp__slider {
    position: relative;
    width: 100%;
    height: 60vh; /* お好みで調整 */
    overflow: hidden;
    z-index: 1; /* 背景として扱う */
}

/* 画像を重ねておく */
.main-visual-sp__slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 100%; /* 右の外側で待機 */
    opacity: 0;
    animation: slideShow 18s infinite; /* 3枚 × 6秒 */
}

/* 1枚目 */
.main-visual-sp__slider img:nth-child(1) {
    animation-delay: 0s;
}

/* 2枚目 */
.main-visual-sp__slider img:nth-child(2) {
    animation-delay: 6s;
}

/* 3枚目 */
.main-visual-sp__slider img:nth-child(3) {
    animation-delay: 12s;
}

@keyframes slideShow {
    0% {
        left: 100%;
        opacity: 0;
    }
    10% {
        left: 0%;
        opacity: 1;
    }
    40% {
        left: 0%;
        opacity: 1;
    }
    50% {
        left: -20%;
        opacity: 0;
    }
    100% {
        left: -20%;
        opacity: 0;
    }
}

.main-visual-pc{
    display: none;
}

/* タイトル全体 */
.mainImg-title-sp {
  position: absolute;
  bottom: 2rem;   /* 下からの位置 */
  right: 2rem;    /* 右からの位置 */
  display: flex;
  flex-direction: column;  /* 縦積み */
  align-items: flex-end;   /* 右端に揃える */
  color: var(--primary-white);
  line-height: 1.2;
}

/* cafe は横書きのまま */
.mainImg-title-sp .english {
  font-family: 'Ibarra Real Nova', serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;  /* cafe と小春日和の間 */
}

/* 小春日和を縦書きに */
.mainImg-title-sp .japanese {
  display: flex;
  flex-direction: column; /* 1文字ずつ縦に積む */
  align-items: flex-end;  /* 右端に揃える */
  font-family: 'Kaisei Opti', serif;
  font-size: 4rem;
}

/* メイン画像 */
.mainImg__sp {
  width: 100%;
  height: auto;
  display: block;
}

/* main-visual PC*/
@media (min-width: 1024px) {
  .main-visual-sp{
    display: none;
  }

  .main-visual-pc{
    display: block;
  }

  .main-visual-pc__bg {
    width: 100%;
    max-width: 1440px;
    height: auto;
    background-color: rgba(90, 71, 57, 0.5); /* #5A4739 透過50% */
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: flex-start;
    padding: 0 1rem;
    box-sizing: border-box;
    gap: 1rem; /* 画像間の間隔 */
  }

  .main-visual-pc__images {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
  }

  .main-visual-pc__images img {
    display: block;
    height: auto;
    flex-shrink: 0;       /* 自動縮小しない */
  }

  /* 画像サイズ指定 */
  .main-visual-pc__images .pic1 {
    width: 26%;
    height: auto;
    object-fit: cover;
  }

  .main-visual-pc__images .pic2 {
    width: 46%;
    height: auto;
    object-fit: cover;
  }

  .main-visual-pc__images .pic3 {
    width: 25%;
    height: auto;
    object-fit: cover;
  }

/* タイトル左下重ね */
  .main-visual-pc__title {
    position: absolute;
    left: 3rem;
    bottom: -1rem;
    font-size: 9rem;
    color: #ffffff;
    font-weight: bold;
    z-index: 10;
    font-family: 'Kaisei Opti', serif;
  }
}
/* 1024px */

/* 768px〜1023px */
/* @media (min-width: 768px) and (max-width: 1023px) {
  .mainImg-title-sp .english{
    font-size: 7rem;
  }

  .mainImg-title-sp .japanese{
    font-size: 10rem;
   }
} */
/* 768px〜1023px */

/* =================================
lead
================================== */
.section--lead{
    position: relative; 
    padding: 0rem 1.8rem 5rem;
}

.catch-copy{
    font-family: 'Noto Serif JP';
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    line-height: 2.1;
    text-shadow: 0px 4px 4px rgba(0,0,0,0.25);
}

.mainCaption__txt{
    margin-top: 1.2rem;
    line-height: 2.1;
    text-align: center;
}

.leadCatImg {
  position: absolute;
  right: 1rem;       /* 右からの余白 */
  max-width: 100px;  /* 画像サイズ調整 */
  height: 69px;
  width: 63px;
}

/* lead PC*/
@media (min-width: 1024px) {
  .section--lead{
    padding: 0 13rem 5rem;
  }

  .mainCaption {
  position: relative; /* 子要素を絶対配置できるようにする */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  }

  .catch-copy{
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
  }

  .mainCaption__txt{
    text-align: center;
    position: relative;
    z-index: 1; /* 画像が下に潜らないようにする */
  }

  /* 猫の画像（右下） */
  .leadCatImg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 148px;
    height: auto;
    z-index: 2;     /* テキストの下にしたい場合 */
  }
}
/* 1024px */

/* 768px〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {
   .mainCaption__txt{
    text-align: center;
   }
}
/* 768px〜1023px */

/* =================================
news
================================== */
.PC-titleLine{
    display: none;   
}

.news__list{
  padding: 5rem 2rem;
}

.news__item {
      flex-direction: column; /* 縦並びに変更 */
      align-items: flex-start; /* 左揃え */
      text-align: center; /* 全体を中央寄せ */
  }

.news__date,
.news__headline,
.news__txt {
    flex: none; /* 横幅固定ではなく自然幅 */
  }

.news__date{
  font-size: 1.4rem;
}

article.news__item > h3.news__headline {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin: 5px 0 !important;
}

.news__txt {
    margin-bottom: 3rem;
}

.link{
  text-decoration: underline;
}

/* news PC*/
@media (min-width: 1024px) {
  .section h2{
    font-size: 2.4rem;
  }

  .SP-titleLine{
    display: none !important;   
  }

  .PC-titleLine{
    display: block;
    height: 5px;
    width: 100%;
    margin-top: 1rem;
  }

  .news__list{
  padding: 5rem 18rem;
  text-align: center;
  }

  .news__item {
    display: flex;
    flex-direction: row;
    align-items: center; /* 縦中央揃え */
    gap: 2rem;
    margin-bottom: 2rem;
    justify-content: center;
  }

  .news__date {
      flex: 0 1 auto;
      font-size: 1.6rem;
      color: #666;
      text-align: right;
  }

  .news__headline {
      flex: 1;
      font-size: 1.6rem;
      margin: 0;
      text-align: center;
  }

  .news__txt {
      flex: 1;
      margin: 0;
      line-height: 1.4;
      font-size: 1.6rem;
      text-align: left;
  }
}
/* 1024px */

/* 768px〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .section--news {
    text-align: center; /* 全体を中央寄せ */
  }

  .news__list {
    display: inline-block; /* 親中央寄せの中で幅を自動に */
    text-align: left; /* 中のテキストは左揃え */
  }
}
/* 768px〜1023px */

/* =================================
cafemenu
================================== */
.top-cafemenu__content{
  padding: 5rem 0.1rem;
  text-align: center;
}

.top-menu__item {
  margin-bottom: 3rem; /* 30px相当の間隔 */
  /* flex-direction: column; スマホでは縦並び、必要に応じて横並びにする */
  align-items: center;    /* li全体を中央に寄せる */
}

.top-menu__item:last-child {
  margin-bottom: 0; /* 最後のliだけ余白をなくす */
}

.top-menu__text{
  padding: 1rem ;
  display: flex;              /* 横並びにする */
  gap: 1rem;
  align-items: center;
  justify-content: center;  
}

.top-menu-letterS{
  font-size: 1.4rem;
}

.menu-btnAnnai{
  padding: 5rem 1rem 0;
}

.goyoui{
  font-family: 'Noto Serif JP';
  font-size: 2rem;
  font-weight: 700;
}

.btn__cafemenu_detail{
  margin-top: 3rem;
}

/* header PC*/
@media (min-width: 1024px) {
  .top-cafemenu-example{
    display: flex;
    padding-left: 3rem;
    padding-right: 3rem;
    gap: 2.5rem;
    justify-content: center;
  }

  .top-menu__item{
    margin-bottom: 0;
  }

  p .top-cafemenu_img{
    width: 30rem;
  }

  .sp-only{
    display: none;
  }
}
/* 1024px */

/* タブレット（768px〜1023px）のとき中央寄せにする */
@media (min-width: 768px) and (max-width: 1023px) {
  .top-rentalspace__images-sp {
    display: flex;
    align-items: center; /* ← flex-startからcenterに変更 */
    padding: 0 5rem 3rem!important;  /* 左右に少し余白を追加 */
    gap: 2rem;
    flex-direction: row !important;
    flex-wrap: wrap; /* 折り返しを許可 */
    justify-content: space-between; /* 左右均等に配置 */
  }

  .top-rentalspace__img--left,
  .top-rentalspace__img--right {
    align-self: center; /* 左右寄せを無効にして中央寄せ */
    max-width: 400px;   /* これを追加すると見栄え安定 */
  }

  .top-cat2-sp{
    display: none !important;
  }

   .top-rentalspace__images-sp img {
    flex: 1 1 calc(24% - 1rem); /* 4等分（隙間分を引く） */
    max-width: calc(25% - 1rem);
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
  }

}

@media (min-width: 600px) and (max-width: 767px) {
  .top-rentalspace__images-sp {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .top-rentalspace__img--left {
    align-self: flex-start;
    margin-left: 6rem; /* 左画像に少し余白 */
  }

  .top-rentalspace__img--right {
    align-self: flex-end;
    margin-right: 6rem; /* 右画像に少し余白 */
  }
}


/* =================================
rentalspace
================================== */
.section--top-rentalspace{
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
  url('../images/rentalspaceBackImg-sp.png');
  background-repeat: no-repeat;   /* 繰り返しなし */
  background-size: cover;         /* 要素に合わせて拡大縮小 */
  background-position: center;    /* 中央に配置 */
  padding-top: 5rem;
  padding-bottom: 10rem;
}

.section--top-rentalspace h2{
  color:var(--primary-black);
}

.top-rentalspaceText{
  padding: 2.4rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: #000000;
}

.top-rentalspace__images-sp {
  display: flex;
  flex-direction: column; /* 縦方向 */
  gap: 2rem; /* 画像同士の縦の間隔 */
  align-items: flex-start; /* デフォルトは左寄せ */
  padding-left: 3rem;
  padding-right: 3rem;
}

.pc-only{
  display: none;
}

.top-rentalspace__images-PC{
  display: none;
}

.top-rentalspace__img--left {
  align-self: flex-start; /* 左寄せ */
  border-radius: 0.5rem;
  display: block;
  object-fit: cover;
}

.top-rentalspace__img--right {
  align-self: flex-end; /* 右寄せ */
  border-radius: 0.5rem;
  display: block;
  object-fit: cover;
}

/* rentalspace PC*/
@media (min-width: 1024px) {
  .section--top-rentalspace{
  background-image: url('../images/rentalspaceBackImg-pc.png');
  background-repeat: no-repeat;   /* 繰り返しなし */
  background-size: cover;         /* 要素に合わせて拡大縮小 */
  background-position: center;    /* 中央に配置 */
  padding-top: 5rem;
  padding-bottom: 10rem;
}

  .top-rentalspace__images-sp{
    display: none;
  }

  .top-rentalspace__images-PC{
    display: block;
  }

  .top-rentalspace__PC-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem; /* 左右の余白 */
    padding-left: 1rem;
    padding-right: 3rem;
    margin-top: 5rem;
  }

  .top-rentalspaceText {
    flex: 1; /* 左カラム幅 */
    align-items: center;
  }

  .top-rentalspace__images-PC {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem; /* 画像間の余白 */
  }

  /* 左側の画像を左寄せ、右側の画像を右寄せ */
  .top-rentalspace__img--left {
    justify-self: start;
    width: 20rem; /* 必要に応じてサイズ調整 */
  }

  .top-rentalspace__img--right {
    justify-self: end;
    width: 20rem; /* 必要に応じてサイズ調整 */
  }
  
  .btn__rentalspace_detail{
    margin-top: 5rem;
  }
}
/* 1024px */

/* 768px〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .section--top-rentalspace{
  background-image: url('../images/rentalspaceBackImg-pc.png');
  background-repeat: no-repeat;   /* 繰り返しなし */
  background-size: cover;         /* 要素に合わせて拡大縮小 */
  background-position: center;    /* 中央に配置 */
  padding-top: 5rem;
  padding-bottom: 10rem;
  }
}
/* 768px〜1023px */



/* =================================
concept
================================== */
.section--concept{
  padding-bottom: 5rem;
}

.conceptText{
  padding: 5rem 2.4rem;
  font-size: 1.6rem;
  text-shadow: 2px 2px 4px rgba(0,4,4,0.25);
  letter-spacing: 1.8;
  line-height: 1.8;
}

.letterBig{
  font-size: 1.8rem;
  background-color: lightyellow;
}

.nouenLink{
  text-decoration: underline;
}

.yasaiImg-sp{
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
}

.yasaiImg-PC{
  display: none;
}


/* concept PC*/
@media (min-width: 1024px) {
  .kodawari__PC-wrapper{
    display: flex;
    padding-left: 5rem;
    padding-right: 5rem;
  }
  
  .conceptText{
    padding-right: 3rem;
  }
}
/* 1024px */

/* =================================
access-openinghours
================================== */
.section--top-access-openinghours{
  background-color: var(--primary-whiteLow);
  padding-top: 5rem;
  padding-bottom: 5rem;
  align-items: center; /* ← ★ 左右の高さ中央を揃える */
}

.left-box__pc {
  text-align: center;    /* 子要素を中央揃え */
}

.gaikan-wrap {
  position: relative;
  display: inline-block; /* 画像のサイズに合わせて親要素が縮む */
}

.top-gaikanImg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: 5rem;
  border-radius: 0.5rem;
}

.gaikan-caption {
  position: absolute;
  bottom: 10px;     /* 下からの距離 */
  left: 10px;       /* 左からの距離 */
  color: #fff;      /* 白文字 */
  font-size: 1.6rem;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景で読みやすく */
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-family: "Noto Sans JP", sans-serif;
}


.top-mapImg{
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  margin-top: 1rem;
}

.top-address{
  margin-top: 1rem;
}

.top-address,
.top-contact{
  padding: 1rem 2.4rem;
}

/* 横並び部分 */
.top-address__header {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 画像と文字の間隔 */
}

/* 画像 */
.top-address__header img.shikaku {
    height: auto;
}

/* 住所タイトル */
.top-address__header .top-zyusyoTitle {
    margin: 0;
    font-weight: bold;
    font-size: 1.6rem;
}

/* 住所やその他テキストは下に縦並び */
.top-address p.top-zyushoText,
.top-address p.top-carSpace,
.top-address p.top-Tohosuisho {
    margin: 0.3rem 0; /* 上下の間隔 */
    font-size: 1.6rem;
    text-align: 1.6;
    letter-spacing: 0.08rem;
}

.haikeiWhite{
  background-color: var(--primary-white);
  border-radius: 0.5rem;
}

.top-contact__item {
    margin-bottom: 2rem; /* 各項目の間隔 */
}

.top-contact__header {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 画像とタイトルの間隔 */
}

.top-contact__header img.shikaku {
    height: auto;
}

.top-opnening-title,
.top-contact-title {
    margin: 0;
    font-weight: bold;
    font-size: 1.6rem;
}

.top-contact-detail {
    margin: 0.3rem 0; /* 上下の間隔 */
    font-size: 1.6rem;
}

@media (min-width:1024px) {
  .top-access-openinghours__PC-wrapper {
    display: flex;
    gap: 2rem;              /* 左右カラムの間隔 */
    align-items: center; /* 左右カラムを上揃え */
  }

  /* 左カラム画像縦並び */
  .left-box__pc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1; /* 左カラムの幅 */
  }

  .left-box__pc img {
    width: 100%;   /* 横幅いっぱい */
    height: auto;  /* 高さは自動 */
    border-radius: 0.5rem;
    object-fit: cover;
  }

   .gaikan-wrap {
    position: relative;
    width: 80%; /* .left-box__pc img と同じ幅 */
    margin: 0 auto; /* 中央寄せ */
  }

  .gaikan-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 1.6rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-family: "Noto Sans JP", sans-serif;
  }
  
  .top-mapImg-wrap{
    width: 80%;
    margin: 0 auto;
  }

  /* 右カラム情報縦並び */
  .right-box__pc {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 要素間の縦の間隔 */
    flex: 1;   /* 右カラムの幅 */
    text-align: left;
    justify-content: center; /* ← ★ 中央揃え */
  }

  .haikeiWhite{
    display: inline-block; /* ← 背景を文字の幅に限定 */
    padding: 0.2em 0.4em; /* 少し余白を入れて読みやすく */
  }

  /* 各右カラムのブロック間の微調整 */
  .top-address,
  .top-contact,
  .btn__rentalspace_detail {
    margin-bottom: 1rem;
  }

  .btn__rentalspace_detail {
    align-self: flex-start; /* 左揃えにする場合 */
  }
}
/* 1024px */

/* =================================
instagram
================================== */
.instagram .SP-titleLine {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 0.5rem;
}

/* Instagram セクション共通 */
.section--instagram {
  text-align: center;
  margin-top: 5rem;
}

/* 埋め込みラッパー */
.instagram__wrap {
  width: 100%;
  max-width: 600px; /* ← PCではこれ以上広がらない */
  margin: 0 auto;   /* 中央寄せ */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* --- PCサイズ限定 --- */
@media screen and (min-width: 1024px) {
  .instagram__wrap {
    max-width: 600px; /* ← 画面いっぱいを防ぐ。400〜700pxで好み調整OK */
  }
}

/* --- スマホサイズ --- */
@media screen and (max-width: 768px) {
  .instagram__wrap {
    max-width: 90%; /* ほぼ画面幅いっぱいに */
    box-shadow: none; /* スマホでは影を軽く */
  }
}

/* =================================
cat
================================== */
/* 猫＋Instagramテキスト */
.section--instagram-cat {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

.instagram-cat__wrapper {
    display: flex;
    align-items: center; /* 猫と文字を縦中央揃え */
    gap: 1rem; /* 猫と文字の間隔 */
    padding: 0 1rem;
}

.instagram-cat__img {
    width: 120px; /* 猫の大きさ */
    height: auto;
}

.instagram-cat__text {
    font-size: 1rem;
    line-height: 1.4;
}

.instagram-cat__text .account {
    font-weight: bold;
    color: #ff6600; /* アカウントを強調 */
}

/* =================================
otoiawase-btn
================================== */
.otoiawase-btn{
  margin: 5rem auto;
}

/* =================================
otoiawase-btn
================================== */
.footer{
  margin: 10rem 0 0;
  text-align: center;
}

.footer-logo{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.copyright{
  font-size: 1.4rem;
  margin-top: 2rem;
}

.footer__line-sp{
    width: 100%;
    height: auto;
    display: block;
    margin-top: 5rem;
}

.footer__line-PC{
  display: none;
}

/* footer PC*/
@media (min-width:1024px) {
  .footer__PC-wrapper {
    display: flex;
    justify-content: center; /* 親要素内で中央寄せ */
    align-items: center;     /* 縦中央揃え */
    gap: 4rem;               /* 要素間の横間隔を均等に */
    padding: 2rem;           /* 左右余白 */
    text-align: center;
  }

  .footer-logo {
    height: 60px;
    width: auto;
    display: block;
  }

  .copyright {
    font-size: 0.9rem;
    margin: 0 auto; 
  }

  .otoiawase-btn {
    margin-left: auto;     /* ← 自動余白で右端に寄せる */
  }

  .otoiawase-btn a {
    white-space: nowrap;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
  }

  .pc-only,
  .footer__line-PC {
    display: block;
    max-width: 100%;
  }

  .footer__line-sp {
    display: none;
  }
}
/* 1024px */