@charset "utf-8";

/* ============================== top ============================== */

.opening {
  position: relative;
  width: 100%;
  height: 100vh;
}

html, body {
  overflow-x: hidden;
}

/* -------------------------opening_intro------------------------- */

.intro {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base-color-01);
  z-index: 9999;
  overflow: hidden;
}

.intro h3 {
  color: var(--accent-color);
  letter-spacing: 0.2em;
}

.character {
  opacity: 0;
}

/* -------------------------opening_mv------------------------- */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 32px;
}

.g-nav ul {
  display: flex;
}

.g-nav li {
  text-align: center;
}

.g-nav li:not(:last-of-type) {
  margin-right: 104px;
}

.g-nav a {
  color: var(--base-color-01);
}

.hamburger-menu {
  display: none;
}

.mv {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  inset: 0;
  background: url(../img/12_050_026.webp) center center / cover no-repeat;
  z-index: 9990;
}

.cafe-name-wrapper {
  position: absolute;
  right: 13.5%;
  bottom: 28%;
  display: flex;
  align-items: baseline;
}
.cafe-name-en {
  font-family: "EB Garamond", serif;
  font-weight: bold;
  font-size: 36px;
  color: var(--base-color-01);
  /* Figmaの12%と同じ。emはその要素のフォントサイズが基準なので、cafeの36pxに対しての12% */
  letter-spacing: 0.12em;
}

.cafe-name-jp {
  font-family: "Noto Serif", serif;
  font-weight: bold;
  font-size: 24px;
  color: var(--base-color-01);
  letter-spacing: 0.3em;
}

.cafe-name-jp-wrapper {
  padding-left: 8px;
}

/* アニメーション部分メディアクエリ---------------------- */

@media (max-width: 767px) {
/* 親要素（アニメーションのラッパー）に高さを指定して中央配置 */
.opening .intro {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

/* テキスト自体 */
#intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 各行 */
#intro-text .line1,
#intro-text .line2 {
  display: flex; 
  justify-content: flex-start; 
  width: 100%;  
}

/* 行間調整 */
#intro-text .line1 {
  margin-bottom: 0.2em;
}

  #intro-text {
    width: auto;       
    padding: 0 16px; 

  }

  #intro-text .character {
    /* アニメーション用なら通常 inline-block */
  display: inline-block;   

  }

  #intro-text .line1 .character {
    margin-right: 0.4em;
  }

}

/* ============================== g-navtohamburgerのメディアクエリ ============================= */

/* ------------------ここからg-navとhamburger */

@media (max-width: 989px) {
  .g-nav li:not(:last-of-type) {
    margin-right: 48px;
  }
}

@media (max-width: 768px) {
  .g-nav {
    display: none;
  }

  body.no-scroll {
    overflow: hidden;
  }

  /* ------------------ここからhamburgerアイコン */

  /* グレー用の線の色 */
  .hamburger-menu.grey .menu-btn span,
  .hamburger-menu.grey .menu-btn span::before,
  .hamburger-menu.grey .menu-btn span::after {
    background-color: var(--accent-color);
  }

  /* なぜか中央の線が消えないので再指定 */
  .hamburger-menu.grey .menu-btn.open span {
    background-color: rgba(255, 255, 255, 0);
  }

  /* バツの時の線の色を変える */
  .hamburger-menu.grey .menu-btn.open span::before,
  .hamburger-menu.grey .menu-btn.open span::after {
    background-color: var(--base-color-01);
  }

  /* イエロー用の線の色 */
  .hamburger-menu.yellow .menu-btn span,
  .hamburger-menu.yellow .menu-btn span::before,
  .hamburger-menu.yellow .menu-btn span::after {
    background-color: var(--main-color);
  }

  /* なぜか中央の線が消えないので再指定 */
  .hamburger-menu.yellow .menu-btn.open span {
    background-color: rgba(255, 255, 255, 0);
  }

  .hamburger-menu {
    /* ベースでdisplay:none;を入れているので、displayの上書きをしてあげる必要がある */
    display: block;
    height: 32px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
  }
}

.menu-btn {
  height: 32px;
  width: 32px;
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 3px;
  width: 32px;
  border-radius: 3px;
  background-color: var(--base-color-01);
  position: absolute;
  transition: 0.3s;
}

.menu-btn span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu-btn span:before {
  bottom: 12px;
}

.menu-btn span:after {
  top: 12px;
}

.menu-btn.open span {
  background-color: rgba(255, 255, 255, 0);
}

.menu-btn.open span::before {
  bottom: 0;
  transform: rotate(45deg);
  width: 34px;
}

.menu-btn.open span::after {
  top: 0;
  transform: rotate(-45deg);
  width: 34px;
}

/* ------------------アイコン以外のhamburger*/
.menu-content {
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 9990;
  background-color: var(--accent-color);
  transition: all 0.5s;
}

.menu-content ul {
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.menu-content ul li {
  list-style: none;
}

.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--base-color-01);
  font-weight: bold;
  padding: 30px 0 0 0;
  position: relative;
}

.menu-content.open {
  right: 0;
}

/* g-navとhamburgerのメディアクエリここまで----------------------------------- */
/* --------------------以下トップページmvメディアクエリ */

@media screen and (max-width: 768px) {
  .cafe-name-wrapper {
    position: absolute;
    left: 50%;   
    right: auto;         
    bottom: 160px;        
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 90%;
    white-space: nowrap;
  }

}

/* ---------------------------------lead--------------------------------- */

.section-lead {
  width: 100%;
  height: 100vh;
  background-color: var(--base-color-02);
}

.lead-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.lead-container h3,
.lead-container p {
  padding-bottom: 64px;
  text-align: center;
  color: var(--accent-color);
}

.lead-container-h3-mobile-show {
  display: none;
}

.lead-container a {
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  background-color: var(--base-color-01);
  padding: 8px 24px;
}

/* --------------------トップページleadメディアクエリ */

@media screen and (max-width: 768px) {
  .lead-container-p-mobile-hide {
    display: none;
  }

  .lead-container {
    padding-right: 16px;
    padding-left: 16px;
  }

    .lead-container h3 {
    margin-left: -48px; 
  }

.lead-container p {
text-align: left;
  }

}

@media screen and (max-width: 593px) {
  .lead-container-h3-mobile-show {
    display: inline;
  }

  .lead-container h3 {
    text-align: left;
    white-space: normal;
    max-width: 90%;    
    margin-left: 0;
  }
}

/* ---------------------------------トップmenu--------------------------------- */

.section-menu {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background: url(../img/book&coffee_pexels.jpg) center center / cover no-repeat;
  z-index: 9990;
}

.section-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* 親はそのまま */
.menu-svg-overlay {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;         /* ここに高さ指定がなかったせいでimgがはみ出ていた */
  /* アスペクト比維持 */
  width: auto;
  z-index: 9991;
  pointer-events: none;
}

/* 画像は親に合わせる */
.menu-svg-overlay img {
  height: 100%;         /* 親の高さに合わせる */
  width: auto;          /* アスペクト比維持 */
  display: block;       /* 余計な隙間を消す */
}

/* デフォルトはPC用を表示 */
.menu-svg-overlay.desktop {
  display: block;
}

.menu-svg-overlay.mobile {
  display: none;
}

.menu-title-h3-mobile-show-1st,
.menu-title-h3-mobile-show-2nd {
  display: none;
}

.menu-container {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform: translateY(-8%);
}

.menu-container h3 {
  padding-bottom: 48px;
  color: var(--base-color-01);
  padding-right: 600px;
}

.menu-container p {
  padding-bottom: 152px;
  text-align: center;
  color: var(--base-color-01);
}

.menu-container a {
  color: var(--base-color-01);
  border: 1px solid var(--base-color-01);
  padding: 8px 24px;
  margin-left: 450px;
}

/* ------------------トップページmenuメディアクエリ*/
@media (max-width: 1120px) {
  .menu-container h3,
  .menu-container a {
    margin: 0 auto;
  }

    .menu-container h3,
    .menu-container p {
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    }
}

  /* SVG文字を小さい画像に切り替え */
@media screen and (max-width: 768px) {
  .menu-svg-overlay.desktop {
    display: none;
  }
  .menu-svg-overlay.mobile {
    display: block;
  }
}

@media screen and (max-width: 548px) {
  .menu-title-h3-mobile-show-2nd {
    display: inline;
  }

  .menu-container h3 {
    line-height: 1.5;
  }

  .menu-p-mobile-hide {
    display: none;
  }
}

@media screen and (max-width: 394px) {
  .menu-title-h3-mobile-show-1st {
    display: inline;
  }
}

/* ---------------------------------トップspace--------------------------------- */

.section-space {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: var(--base-color-03); 
  z-index: 9990;

  overflow-x: hidden; /* 横スクロール防止 */
}

.section-space::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/leaves_bw_pexels.jpg) center center / cover no-repeat;
  opacity: 0.2;
  z-index: 9995;
  pointer-events: none;
}

.space-svg-overlay {
  position: absolute;
  z-index: 9998;
  top: 50%;
  left: 0; /* 元の位置 */
  transform: translateY(-50%);
  pointer-events: none;
  max-width: 100%;
  height: auto;
}

/* デフォルトはPC用を表示 */
.space-svg-overlay.desktop {
  display: block;
}

.space-svg-overlay.mobile {
  display: none;
}

.space-container {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  transform: translateX(15%) translateY(-2%); /* 元デザイン位置維持 */
}

.space-container h3 {
  padding-left: 72px;
  padding-bottom: 85px;
  color: var(--accent-color);
}

.space-container p {
  padding-bottom: 85px;
  text-align: center;
  color: #000;
}

.space-btn-wrapper a {
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 8px 24px;
  background-color: var(--base-color-02);
  display: inline-block;
  margin-right: 336px; /* 元位置維持 */
}

/* ------------------トップspaceレスポンシブ------------------ */
@media screen and (max-width: 768px) {
  .space-container {
    transform: none; /* 元のX,Y移動をリセット */
    padding: 0 16px;
    align-items: center; /* 中央揃え */
    text-align: center; /* テキスト中央揃え */
  }

  .space-container h3 {
    padding-left: 0;
    padding-bottom: 48px;
  }

  .space-container p {
    padding-bottom: 48px;
    text-align: left;
  }

  .space-p-mobile-hide {
    display: none;
  }

  .space-btn-wrapper a {
    margin: 0 auto; /* 中央揃え */
    display: inline-block; /* 自動で幅調整 */
  }

    /* SVG文字を小さい画像に切り替え */
  .space-svg-overlay.desktop {
    display: none;
  }
  .space-svg-overlay.mobile {
    display: block;
  }
}

/* ---------------------------------トップbooks--------------------------------- */

.section-books {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background: url(../img/book_orange_pexels.jpg) center center / cover no-repeat;
  overflow-x: hidden; /* 横スクロール防止 */
}

.books-svg-overlay {
  position: absolute;
  z-index: 9990;
  top: 0;
  left: 3%; /* 元の位置 */
  pointer-events: none;
  max-width: 100%; /* 画面内に収める */
  height: auto;
}

/* デフォルトはPC用を表示 */
.books-svg-overlay.desktop {
  display: block;
}

.books-svg-overlay.mobile {
  display: none;
}

.books-container {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  /* 元の transform を残す */
  transform: translateX(-5%) translateY(-1%);

  max-width: 100%; /* はみ出し防止 */
}

.books-container h3 {
  padding-left: 360px; /* 元の位置を維持 */
  padding-bottom: 48px;
  color: #000;
  letter-spacing: 0.3em;
}

.books-container p {
  padding-bottom: 1.5em;
  text-align: center;
  color: #000;
}

.books-container p:last-of-type {
  padding-bottom: 48px;
  letter-spacing: 0.4em;
}

.books-container a {
  color: #000;
  background-color: var(--base-color-01);
  border: 1px solid #000;
  padding: 8px 24px;
  margin-right: 32px; /* 元の位置維持 */
}

/* --------------------トップbooksレスポンシブ------------------ */

@media screen and (max-width: 768px) {
  /* booksセクション全体のコンテナ調整 */
  .books-container {
    transform: none;          /* PC用の位置調整をリセット */
    padding: 0 16px;          /* 横余白を少し確保 */
    align-items: center;      /* 子要素を中央揃え */
    text-align: center;       /* テキスト中央揃え */
  }

  /* タイトル調整 */
  .books-container h3 {
    padding-left: 0;          /* 左余白をリセット */
    padding-bottom: 48px;     /* 下余白を調整 */
  }

  /* テキスト調整 */
  .books-container p {
    padding-bottom: 24px;     /* pタグ同士の間の余白 */
  }

  .books-container p:last-of-type {
    padding-bottom: 48px;     /* 最後の段落の余白を調整 */
  }

  /* ボタン調整 */
  .books-container a {
    margin: 0 auto;           /* 中央揃え */
    display: inline-block;    /* 幅自動調整 */
  }

  /* SVG文字を小さい画像に切り替え */
  .books-svg-overlay.desktop {
    display: none;
  }
  .books-svg-overlay.mobile {
    display: block;
  }
}

@media screen and (max-width: 577px) {
  .books-p-mobile-hide {
    display: none;
  }

  .books-container p {
    text-align: left ;
  }
}

/* ---------------------------------トップaccess--------------------------------- */

.section-access {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background-color: var(--main-color);
  z-index: 9990;
  overflow-x: hidden;
}

.section-access::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/_DSC0027.webp) center center / cover no-repeat;
  opacity: 0.15;
  z-index: 9995;
  pointer-events: none;
}

.access-svg-overlay {
  position: absolute;
  z-index: 9998;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;

    max-width: 100%;  /* 画面幅を超えないように */
  height: auto;      /* アスペクト比を維持 */
}

/* デフォルトはPC用を表示 */
.access-svg-overlay.desktop {
  display: block;
}

.access-svg-overlay.mobile {
  display: none;
}

.access-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.access-container h3 {
  padding-bottom: 48px;
  color: var(--accent-color);
}

.access-container p {
  padding-bottom: 1.5em;
  text-align: center;
  color: var(--accent-color);
}

.access-container p:last-of-type {
  padding-bottom: 48px;
}

.access-container a {
  border: 1px solid var(--accent-color);
  background-color: var(--base-color-01);
  padding: 8px 24px;
  color: var(--accent-color);
}

/* --------------------トップaccessレスポンシブ------------------ */
@media screen and (max-width: 490px) {
  .access-container p {
    text-align: left ;
  }

  .access-p-mobile-hide {
    display: none;
  }

.access-container {
  padding-left: 16px;
  padding-right: 16px;
  }
}


  /* SVG文字を小さい画像に切り替え */
@media screen and (max-width: 768px) {
  .access-svg-overlay.desktop {
    display: none;
  }
  .access-svg-overlay.mobile {
    display: block;
  }

}

/* ---------------------------------footer---------------------------------- */

footer {
  width: 100%;
  min-height: 50vh;
  background-color: var(--accent-color);
}

.footer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.footer-title {
  color: var(--base-color-01);
  padding-top: 40px;
  padding-bottom: 40px;
}




.footer-logo-name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center
}

/* ------------------ここからcafe名 */
.footer-cafe-name-wrapper {
  display: flex;
  align-items: baseline;
}
.footer-cafe-name-en {
  font-family: "EB Garamond", serif;
  font-weight: bold;
  font-size: 36px;
  color: var(--base-color-01);
  letter-spacing: 0.12em;
}

.footer-cafe-name-jp {
  font-family: "Noto Serif", serif;
  font-weight: bold;
  font-size: 24px;
  color: var(--base-color-01);
  letter-spacing: 0.3em;
}

.footer-cafe-name-jp-wrapper {
  padding-left: 8px;
}

/* ------------------ここから住所電話番号 */
.address-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.address-wrapper p {
  color: var(--base-color-01);
}

/* ------------------ここからcafe-info3つまとめて */
.cafe-info-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px;
  gap: 24px;
}

.footer-logo-wrapper,
.footer-cafe-name-wrapper {
  padding-right: 0;
}

.footer-logo-name-wrapper {
  gap: 24px; /* 左右の間隔 */
}

/* ------------------ここからfooter-nav */
.footer-nav {
  padding-bottom: 8px;
}

.footer-nav ul {
  display: flex;
}

.footer-nav li {
  text-align: center;
}

.footer-nav li:not(:last-of-type) {
  margin-right: 104px;
}

.footer-nav a {
  color: var(--base-color-01);
}

.back-to-top a {
  display: block;
  padding-bottom: 40px;
  color: var(--base-color-01);
  text-align: center;
}

.footer-container small {
  color: var(--base-color-01);
  /* smallタグはインライン要素 */
  display: block;
  margin-bottom: 24px;
}

/* ------------------footerメディアクエリ*/
@media (max-width: 878px) {
  .footer-nav li:not(:last-of-type) {
    margin-right: 48px;
  }
}

@media (max-width: 654px) {
  .footer-nav ul {
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    align-items: center;
  }



  .cafe-info-wrapper {
    flex-direction: column;
  }

  .footer-nav li {
    margin-right: 0 !important; /* 横マージンリセット */
    text-align: center;
  }
}

/* ============================== 下層about ============================== */

.nav-grey a {
  color: var(--accent-color);
}

.about {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background-color: var(--base-color-02);
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/man_reading_pexels.jpg) center center / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.about-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about-text-container h3 {
  padding-top: 60px;
  padding-bottom: 40px;
  color: var(--accent-color);
}

.about-text-container p {
  padding-bottom: 24px;
  color: var(--accent-color);
}

.about-text-container p:last-of-type {
  padding-bottom: 104px;
}

/* ---------------------------------ここからrule*/

.rule {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: url(../img/woman_reading_pexels.jpg) center center / cover
    no-repeat;
}

.rule::before {
  content: "";
  position: absolute;
  z-index: 9990;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.rule-container {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 700px;
  margin: 0 auto;
}

.rule-container h3 {
  padding-top: 104px;
  padding-bottom: 40px;
  color: var(--base-color-01);
}

.h3-wrapper {
  align-self: flex-end;
  text-align: right;
  padding-right: 36px;
}

.rule-container p {
  padding-bottom: 24px;
  color: var(--base-color-01);
}

.rule-container p:last-of-type {
  padding-bottom: 104px;
}

.rule-container-h3-mobile-show {
  display: none;
}

/* 以下aboutメディアクエリ------------------------------------- */

@media screen and (max-width: 850px) {
.about-p-mobile-hide,
.rule-p-mobile-hide {
  display: none;
}

.about-text-container,
.rule-container {
padding: 0 16px;
text-align: left;
  }

.about-text-container p,
.rule-container p {
  padding-bottom: 36px;
  }

.h3-wrapper {
  padding: 0;
  }

}

@media screen and (max-width: 355px) {
.rule-container-h3-mobile-show {
    display: inline;
  }
}
/* ============================== 下層menu ============================== */

.menu-header-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}
/* ------------------ここから背景 */
.menu {
  position: relative;
  background-color: #014450;
  padding-bottom: 300px;
}

.menu-container-subpage {
  position: relative;
  z-index: 9973;
  color: var(--base-color-01);
  padding: 104px;
}

.menu-container-subpage h3 {
  padding-bottom: 40px;
}

.menu-svg-overlay-subpage {
  position: absolute;
  z-index: 9972;
  right: 0;
}

.apostrophe-left {
  position: absolute;
  top: 240px;
  left: 0;
  z-index: 9970;
}

.apostrophe-right {
  position: absolute;
  top: 24%;
  right: 32px;
  z-index: 9971;
}

/* ------------------ここからpastries */

.menu-items {
  display: flex;
}

.pastries-title_photo_description {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: center;
}

.pastries-title_photo_description h3 {
  position: relative;
  color: var(--base-color-01);
  z-index: 9989;
  margin-top: 550px;
  right: 40px;
}

.pastries,
.coffee {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 9990;
  color: var(--base-color-01);
  margin-top: 120px;
  margin-left: 24px;
}

.pastries01 {
  display: flex;
  align-items: flex-start;
  margin-right: 48px;
}

.pastries01 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 129px 231px 179px 250px;
  margin-left: 56px;
  margin-bottom: 32px;
}

.pastries02 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  margin-bottom: 64px;
}

.pastries02 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 270px 141px 228px 204px;
}

.pastries03 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.pastries03 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 206px 311px 194px 189px;
  margin-left: 120px;
}

.pastries01 p,
.pastries02 p,
.pastries03 p {
  text-align: center;
}

/* ------------------ここからcoffee */
.coffee-title_photo_description {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  transform: translateY(-10%);
  z-index: 9988;
}

.coffee-title_photo_description h3 {
  position: relative;
  color: var(--base-color-01);
  z-index: 9989;
  margin-top: 400px;
  transform: translateX(-50%) translateY(-350%);
}

.coffee01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-80%);
}

.coffee01 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 297px 259px 200px 200px;
}

.coffee01 p {
  padding-top: 8px;
  text-align: center;
}

.coffee02 {
  display: flex;
  flex-direction: column;
  transform: translateX(20%);
}

.coffee02 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 252px 381px 256px 186px;
}

.coffee02 p {
  text-align: center;
  transform: translateX(50%);
}

.coffee03 img {
  width: 291px;
  height: 291px;
  object-fit: cover;
  border-radius: 200px 309px 218px 185px;
}

.coffee03 p {
  padding-top: 16px;
  text-align: center;
}

/* ============================== 下層space ============================== */
.g-nav-black a {
  color: #000;
}

.space-header-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

.space {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background-color: var(--base-color-03);
  z-index: 9990;
}

.space::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/leaves_bw_pexels.jpg) center center / cover no-repeat;
  opacity: 0.08;
  z-index: 9995;
  pointer-events: none;
}

.space-svg-overlay-subpage {
  position: absolute;
  top: 18%;
  left: 0%;
}

.space-textcontainer-subpage {
  display: flex;
  flex-direction: column;
  width: 395px;
  margin-right: 180px;
}

.space-textcontainer-subpage h3 {
  margin-bottom: 40px;
}

.space-textcontainer-subpage p:not(:last-of-type) {
  margin-bottom: 16px;
}

.gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.thumbnail-wrapper {
  display: flex;
  flex-direction: column;
}

.gallery-thumbnails-firstrow,
.gallery-thumbnails-secondrow {
  display: flex;
  justify-content: flex-end;
}

.gallery-thumbnails-firstrow img,
.gallery-thumbnails-secondrow img {
  margin-top: 12px;
  margin-right: 18px;
}

.gallery-thumbnails-firstrow:last-of-type {
  margin-right: 0;
}

.gallery-image img {
  position: relative;
  width: 500px;
  height: 500px;
  object-fit: cover;
  z-index: 9998;
}

.gallery-thumbnails-firstrow img,
.gallery-thumbnails-secondrow img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* ============================== 下層books ============================== */

body.page-id-13,
body.archive {
  background-color: #c3511d;
}

.books-header-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

.books-svg-overlay-subpage {
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 9980;
}

.books {
  width: 100%;
  background-color: #c3511d;
}

.books-container-subpage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 104px 0 78px 104px;
  z-index: 9998;
}

.books-container-subpage h3 {
  padding-bottom: 40px;
}

/* ------------------ここからowner */

.review-container-owner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base-color-01);
  margin-left: 18%;
  margin-bottom: 40px;
  padding: 80px 0 80px 80px;
}

.textcontainer-owner {
  display: flex;
  flex-direction: column;
}

.textcontainer-owner h4 {
  padding-bottom: 48px;
  color: var(--accent-color);
}

.textcontainer-owner p {
  padding-bottom: 16px;
  color: var(--accent-color);
}

.textcontainer-owner p:first-of-type {
  text-align: right;
  font-weight: bold;
  padding-bottom: 48px;
}

.textcontainer-owner p:last-of-type {
  padding-bottom: 48px;
}

.milk-and-honey img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  margin-left: 48px;
}

.btn-owner a {
  border: 1px solid var(--accent-color);
  padding: 8px 24px;
  color: var(--accent-color);
}

/* ------------------ここからstaff */

.review-container-staff {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  background-color: var(--main-color);
  margin-right: 18%;
  margin-bottom: 40px;
  padding: 80px 80px 80px 0;
}

.textcontainer-staff {
  display: flex;
  flex-direction: column;
}

.textcontainer-staff h4 {
  padding-bottom: 48px;
  color: var(--accent-color);
  text-align: right;
}

.textcontainer-staff p {
  padding-bottom: 16px;
  color: var(--accent-color);
  text-align: left;
}

.textcontainer-staff p:first-of-type {
  text-align: left;
  font-weight: bold;
  padding-bottom: 48px;
}

.textcontainer-staff p:last-of-type {
  padding-bottom: 48px;
}

.hooked img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  margin-right: 48px;
}

.btn-staff {
  text-align: right;
}

.btn-staff a {
  border: 1px solid var(--accent-color);
  padding: 8px 24px;
  color: var(--accent-color);
  background-color: var(--base-color-01);
}

/* ------------------ここからseasonal */

.review-container-seasonal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base-color-02);
  margin: 0 9%;
  margin-bottom: 40px;
  padding: 80px 80px 80px 80px;
}

.textcontainer-seasonal {
  display: flex;
  flex-direction: column;
}

.textcontainer-seasonal h4 {
  padding-bottom: 48px;
  color: var(--accent-color);
}

.textcontainer-seasonal p {
  padding-bottom: 16px;
  color: var(--accent-color);
  text-align: left;
}

.textcontainer-seasonal p:first-of-type {
  text-align: right;
  font-weight: bold;
  padding-bottom: 48px;
}

.textcontainer-seasonal p:last-of-type {
  padding-bottom: 48px;
}

.seasonal-book-img {
  width: 500px;
  height: 100%;
  object-fit: cover;
  margin-left: 48px;
}

.btn-seasonal a {
  border: 1px solid var(--accent-color);
  padding: 8px 24px;
  color: var(--accent-color);
  background-color: var(--base-color-01);
}

/* ============================== 下層access ============================== */

body.page-id-15 {
  background-color: var(--main-color);
}

.access-header-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

.access-svg-overlay-subpage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9980;
}

.access {
  position: relative;
  padding-top: 104px;
  padding-bottom: 200px;
  width: 100%;
  background-color: var(--main-color);
}

.access-container-subpage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 104px;
  color: var(--accent-color);
}

.access-container-subpage h3 {
  padding-bottom: 40px;
}

/* ------------------ここから営業時間 */

.opening-hours {
  position: relative;
  display: flex;
  align-items: center;
  padding: 80px 0 80px 80px;
  margin: 64px 0 48px 200px;
}

.opening-hours::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/_DSC0027.webp) center center / cover no-repeat;
  opacity: 0.75;
}

.opening-hours > * {
  position: relative;
}

.opening-hours-text-wrapper {
  display: flex;
  flex-direction: column;
}

.opening-hours-text-wrapper h4,
.opening-hours-text-wrapper p {
  margin-bottom: 56px;
}

.opening-hours-img-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.opening-hours-img-wrapper p {
  margin-right: 80px;
}

.opening-hours-img-wrapper img {
  width: 500px;
  margin-left: 48px;
  margin-right: 80px;
}

/* ------------------ここからアクセス詳細 */

.access-details-img-wrapper {
  width: 500px;
  margin-right: 48px;
}

.map {
  position: relative;
  width: 100%;
  padding-top: 100%;
  height: 0;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}

.access-details {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
  background-color: var(--base-color-02);
  padding: 80px;
  margin: 64px 200px 0 0;
}

.access-details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/_DSC0023.webp) center center / cover no-repeat;
  opacity: 0.15;
}

.access-details > * {
  position: relative;
}

.access-details-text-wrapper h4 {
  color: var(--accent-color);
  padding-bottom: 40px;
}

.access-details-text-wrapper b,
.access-details-text-wrapper p {
  color: var(--accent-color);
  padding-bottom: 24px;
}

.station b {
  display: block;
  padding-bottom: 16px;
  color: var(--accent-color);
}

.station p {
  padding-bottom: 56px;
  color: var(--accent-color);
}

.directions-text p:first-of-type {
  padding-bottom: 16px;
}

/* ========================= booksのarchiveページ ========================= */

/* タイトル文字の右揃え */
.btn-archives-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

/* 他の一覧ページへのリンクボタン */
.btn-archives {
  text-align: right;
}

.btn-archives a {
  display: inline-block;
  border: 1px solid var(--accent-color);
  padding: 8px 24px;
  color: var(--accent-color);
  background-color: var(--base-color-01);
}

/* ページタイトルとボタンを並べる */
.title-btn-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 104px;
  margin-bottom: 56px;
  padding-left: 104px;
  /* padding-right: 8px; */
}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 72px 0 56px 80px;
}

.card {
  display: flex;
  background-color: var(--base-color-01);
  overflow: hidden; /* カード内でコンテンツがはみ出した場合に切り取る */
  min-height: 200px; /* カードの高さを最低200pxに固定。内容が少なくても潰れない */
}

.card-text {
  flex: 1; /*  */
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-title {
  font-weight: bold;
  font-size: 1rem;
}

.book-author {
  font-size: 1rem;
}

.card-image {
  flex: 1;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  background-size: cover;
  background-position: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.card.empty {
  background: none;
  pointer-events: none;
}

/* ========================= */
/* レスポンシブ対応 */
@media screen and (max-width: 1016px) {
  .card-container {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-left: 80px;
    padding-right: 0;
  }

  .card.empty {
    display: none;
  }

  .card {
    flex-direction: row; /* 左右比は維持 */
  }

  .card-image {
    aspect-ratio: 1 / 1;
  }
}

@media screen and (max-width: 780px) {
  .title-btn-wrapper {
    flex-direction: column; /* 狭い画面では縦並びに */
    align-items: flex-end;
    padding-left: 20px; /* 左余白を少し小さく */
    margin-top: 80px;
    margin-bottom: 50px;
  }

  .btn-archives-wrapper {
    margin-top: 36px; /* タイトルとの間隔 */
  }
}

/* ===============投稿個別ページの、前後ページへのリンク表示============== */

.post-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* ===============booksのarchiveページのボタンの色変更============== */

.btn-archives a.staff {
  background-color: var(--main-color);
  color: var(--accent-color)
  border: 1px solid var(--accent-color);
}

.btn-archives a.seasonal {
  background-color: var(--base-color-02);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

/* ===============booksのarchiveページのカードの色変更============== */

.card.staff {
  background-color: var(--main-color);
}

.card.seasonal {
    background-color: var(--base-color-02);
}


.btn-archives-wrapper.indivisual-page {
  padding-top: 32px;
  padding-bottom: 32px;
}