@charset "utf-8";
/* ページ内リンクをスムースに */
html {
  scroll-behavior: smooth;
}

.toppage-bg {
  background-color: var(--main-color-01);
}

.frame {
  /* .scroll-boxと.left-sidebarの部分。
  frameにheight: 100vh;を入れると下枠がなくなるので注意*/
  background-color: var(--main-color-01);
  position: fixed;
  top: 64px;
  right: 48px;
  bottom: 64px;
  left: 48px;
  /* .left-sidebar と .scroll-box を横並びにする */
  display: flex;
}

.left-sidebar {
  background-color: var(--main-color-01);
  width: 367px;
}

/* ←これが「スクロール担当」 */
.scroll-box {
  /* .left-sidebarの横で、残りの幅をこの要素が全部使うという意味 */
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 151px;
  /* スクロールバー非表示 */
  -ms-overflow-style: none; /* IE・Edge */
  scrollbar-width: none; /* Firefox */
}

.scroll-box::-webkit-scrollbar {
  display: none; /* Chrome・Safari */
}

/* ここからleft-sidebarの中身設定------------------------------------- */

.copy-wrapper p {
  font-size: 24px;
  font-weight: 300;
}

.subtitle {
  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--base-color-02);
  margin-bottom: -4px;
  padding-left: 3px;
}

.name {
  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.11em;
  color: var(--base-color-02);
  /* margin-top: -2px; */
  padding-right: 8px;
}

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

.title-name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.title-copy-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  margin-top: 33%;
}

.g-nav {
  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--base-color-02);
}

.g-nav ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lang-btn {
  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.11em;
  color: var(--base-color-02);
  background-color: var(--base-color-01);
  padding: 0 24px 2px 24px;
  border-radius: 12px;
  display: inline-block;
  align-self: flex-start;
}

.nav-btn-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 100px;
}

.header-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.left-sidebar {
  display: flex;
  flex-direction: column;
}

/* =================================================ここからfv====================================== */

.fv {
  background-color: #767676;

  height: calc(100vh - 128px);
  /* モニター内上下の余白 */
  /* padding: 40px 0; */
}

.key-visual,
.slider,
.slick-list,
.slick-track,
.slick-slide {
  height: 100%;
}

.slider img {
  /* width100%,height100%が、余白が暴れる原因。
  width:100%だと：contain → 余白発生（不可避）cover → トリミングになる */
  height: auto;
  max-height: 100%;
  width: auto;
  /* object-fit: contain; */
  display: block;
}

.key-visual {
  position: relative;
}

.scroll-hint {
  position: absolute;
  bottom: 8px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;

  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--base-color-01);
  opacity: 0.7;

  text-align: center;
}

/* scroll downを点滅させる */

/* .scroll-hint {
  animation: fade 3s infinite;
}

@keyframes fade {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
} */

/* ------------------slickの設定------------------------------------- */

/* slickがリロード時に一瞬縦並びで表示されるのを見えなくする方法。
.slick-initializedは、スライダーの準備ができたタイミングで付与されるクラス名。 */
.slider {
  visibility: hidden;
}

.slider.slick-initialized {
  visibility: visible;
}

/* 矢印が他の要素に隠れて見えないのを上に持ってくる方法 */
.slick-prev,
.slick-next {
  z-index: 1;
}

/* 矢印がdefaultでは-25pxに設定されており、それが横スクロールを生むので内側に表示させる */
.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}
/* ドットをfvセクションに置く(初期値は-25px) */
.slick-dots {
  position: absolute;
  bottom: 48px;
}
/* ====================================================================== */

/* ここからframeのメディアクエリ----------------------------------------- */

/* ====================================================================== */
@media screen and (max-width: 962px) {
  .frame {
    top: 120px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    flex-direction: column;
  }

  .left-sidebar {
    width: 0;
    height: 0;
    overflow: visible;
    /* この記述がクリックを阻害していた */
    /* pointer-events: none; */
  }
  /* navを一旦消す。新しく作り直す----------------------- */
  .nav-btn-wrapper {
    display: none;
  }

  /* g-navここまで-------------------------------------------- */

  .title-copy-wrapper {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);

    margin-top: 0;
    gap: 12px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* pointer-events: none; */
  }

  /* キャッチコピーをずらしたい場合はこちら */
  /* .title-copy-wrapper picture {
    display: block;
    transform: translateX(104px);
  } */

  .site-title {
    font-size: 40px;
  }

  .subtitle {
    font-size: 14px;
    padding-bottom: 1px;
  }

  .name {
    font-size: 16px;
  }
}

/* 652pxから、説明文が2行になる */
@media screen and (max-width: 652px) {
  .scroll-box {
    border-radius: 56px;
  }
}

/* =============================================ここからprojects====================================== */
/* ページ内リンクで上枠部分に被らないようにずらして表示させてくれる設定 */
#projects,
#about,
#contact {
  scroll-margin-top: -64px;
}

.projects {
  background-color: var(--accent-color-01);
  padding: 144px 100px;
}

.section-title-projects {
  color: var(--base-color-01);
  margin-bottom: 56px;
}

.four-projects-container {
  display: flex;
  flex-direction: column;
  gap: 104px;
}

/* ---------各projectの設定------------------------------- */
.project-subtitle {
  color: var(--base-color-01);
  font-family: var(--noto-serif-jp-font);
  font-weight: 200;
  font-size: 14px;
}

.project-description {
  color: var(--base-color-01);
  font-weight: 300;
}

.project-title-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.project-title-description-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-view-details {
  color: var(--base-color-02);
  background-color: var(--base-color-01);
  padding: 4px 24px;
  font-size: 15px;
  /* ボタンの文字の太さ */
  font-weight: 300;
}

.project-visit-site {
  color: var(--base-color-01);
  text-decoration: underline;
  font-weight: 300;
}

.project-btn-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.project-text-container {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.project-container {
  display: flex;
  gap: 72px;
}

.project-thumbnail {
  flex-shrink: 0;
}

.project-thumbnail img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.project-view-details,
.project-visit-site {
  white-space: nowrap;
}

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

@media (max-width: 1487px) {
  .project-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .project-title,
  .project-subtitle {
    margin: 0;
    line-height: 1.1;
  }

  .project-title-description-wrapper {
    gap: 24px;
  }
}

/* descriptionが2行になるタイミングでdescriptionとbtnの間の余白を縮める */
@media (max-width: 1454px) {
  .project-text-container {
    gap: 42px;
  }
}

/* ボタンが崩れるタイミングでボタンを縦並びに */
@media (max-width: 1299px) {
  .project-btn-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 1048pxでボタンが隠れ始めるので、テキストとサムネを縦並びに */
@media (max-width: 1169px) {
  .project-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .project-thumbnail img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover;
  }

  .project-text-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .four-projects-container {
    gap: 64px;
  }
  /* ボタンを再び横並びに */
  .project-btn-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 32px;
  }
}

/* サムネイルが縮小を始めるタイミングは５１５だが、角丸と合わせるなら */
@media screen and (max-width: 652px) {
  .projects {
    padding-inline: 16px;
  }
}

/* スマホ用に枠をなくす */
/* @media (max-width: 768px) {
} */
/* ========================================ここからabout====================================== */
.about {
  background-color: var(--accent-color-02);
  padding: 144px 100px;
}

.section-title-about {
  margin-bottom: 44px;
}

.about-description {
  max-width: 100%;
  margin: 0 auto;
}

.about-description p:not(:last-of-type) {
  margin-bottom: 24px;
}
/* max-widthはdscriptionではなくこっちに書くことで、titleと左揃えが守られる！ */
.about-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 800px;
}

/* ここからaboutメディアクエリ------------------------- */
/* タイトルが折り返すタイミングは572だが、角丸と合わせるなら */
@media screen and (max-width: 652px) {
  .about {
    padding-inline: 16px;
  }
}
/* ==========ここからcontact====================================== */
.contact {
  background-color: var(--accent-color-03);
  padding: 144px 100px;
}

.section-title-contact {
  color: var(--base-color-01);
  margin-bottom: 16px;
}

.contact-text-icon-wrapper {
  color: var(--base-color-01);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-text-icon-wrapper p:last-of-type {
  margin-bottom: 24px;
}

/* ここからcontactメディアクエリ------------------------- */
/* 角丸とタイミングを揃える */
@media screen and (max-width: 652px) {
  .contact {
    padding-inline: 16px;
  }
}
/* ============================================================================================================== */

/* =こtこから下層pages共通css */

/* ============================================================================================================== */
.subpage-bg {
  background-color: var(--accent-color-01);
}

.subpage-bg-portfolio {
  background-color: #767676;
}

/* 下層ページのフォント設定------------------------- */
.title-subpage {
  color: var(--base-color-01);
  font-family: var(--noto-serif-jp-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.subtitle-subpage {
  color: var(--base-color-01);
  font-family: var(--noto-serif-jp-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  padding-bottom: 7px;
}

.back-to-projects {
  color: var(--base-color-01);
  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;

  width: 100%;
  text-align: left;
}

.back-to-projects a {
  color: var(--base-color-01);
}

.description-subpage p,
.info-wrapper-subpage p,
.comp-notice,
.pc-comp-container p,
.sp-comp-container p {
  color: var(--base-color-01);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  /* figmaのletter-spacing 5%; */
  letter-spacing: 0.05em;
  color: var(--base-color-01);
}

.link-to-about {
  color: var(--base-color-01);
  font-family: var(--zen-kaku-gothic-new-regular-font);
  text-decoration: underline;
}

.btn-wrapper-subpage {
  color: var(--base-color-02);
  background-color: var(--base-color-01);
  padding: 4px 24px;
  font-size: 15px;
  /* ボタンの文字の太さ */
  font-weight: 300;
  display: inline-block;
  /* この要素だけ、横方向の位置を“開始位置（左）”にする。
  flexの子を、1個だけ例外設定できる ←btnが画面幅いっぱいになるのを防止*/
  align-self: flex-start;
}

.btn-wrapper-subpage a {
  display: inline-block;
  width: auto;
}
/* ここまでフォント設定-------------------------------- */
.title-wrapper-subpage {
  display: flex;
  align-items: flex-end;
  gap: 48px;
}

.info-wrapper-subpage p:not(:last-of-type) {
  margin-bottom: 12px;
}

.description-subpage p:not(:last-of-type) {
  margin-bottom: 28.8px;
}

.description-btn-info-wrapper {
  display: flex;
  flex-direction: column;
  text-align: flex-start;
  gap: 56px;
}

.title-text-container-subpage-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  /* タイトル・本文・カンプ紹介文の3つのgap調整 */
  gap: 72px;
}

/* max800のコンテナの余白を別divで作っている */
.title-text-container-subpage-outer {
  padding: 0 100px;
}

/* これが←Projectsのコンテナの役割。 */
.page-top {
  height: 144px;
  max-width: 1030px;
  margin: 0 auto;
  padding-top: 64px;
  padding-left: 16px;
}

.all-contents-subpage-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer {
  text-align: center;
  padding: 8px 0;

  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--base-color-01);
}

.footer-top {
  text-align: center;
  padding: 8px 0;

  font-family: var(--ysabeau-sc-font);
  font-optical-sizing: auto;
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--base-color-01);
  background-color: var(--accent-color-03);
}

/* ここからPC版サムネ----------------------------------------------- */

.pc-comp-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 4px;
  margin: 0 auto;
  width: 100%;
  max-width: 1240px;
  margin-bottom: 40px;
}

.pc-comp-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 画面サイズに応じて、6vw で余白を調整しつつ、最小16px、最大100pxの範囲で変動 */
  /* padding-inlineは左右の余白だけを調整する */
  padding-inline: clamp(16px, 6vw, 100px);
  text-align: center;
}

.pc-comp-inner p {
  align-self: flex-start;
  margin-bottom: 4px;
}

.pc-comp-imgs {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px; /* 画像同士の間 */
}

.pc-comp-imgs img {
  width: 100%;
  /* 120pxより小さくしない/画面幅の12%でサイズ決める/200px以上にはしない */
  max-width: clamp(120px, 12vw, 200px);
  height: auto;
  display: block;
}

/* ここからスマホ版サムネ----------------------------------------------- */

.sp-comp-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 4px;
  width: 100%;
  /* このmargin順を間違えると上書きされるので注意！ */
  margin: 0 auto;
  margin-bottom: 72px;
}

.sp-comp-inner {
  margin: 0 auto;
  padding: 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sp-comp-inner p {
  align-self: flex-start;
  margin-bottom: 4px;
}

.sp-comp-imgs {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;

  gap: 40px; /* 画像同士の間 */
}

.sp-comp-imgs img {
  width: 100%;
  /* 120pxより小さくしない/画面幅の12%でサイズ決める/200px以上にはしない */
  max-width: clamp(50px, 3vw, 50px);
  height: auto;
  display: block;
}

/* ================================================================================= */
/* 以下各ページに追加したcss---------------------------------------- */

/* portfolioページ専用------------------------------------- */
.btn-wrapper-subpage-portfolio {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.btn-wrapper-subpage-portfolio a {
  color: var(--base-color-02);
  background-color: var(--base-color-01);
  padding: 4px 24px;
  font-size: 15px;
  /* ボタンの文字の太さ */
  font-weight: 300;
  display: inline-block;
  /* この要素だけ、横方向の位置を“開始位置（左）”にする。
  flexの子を、1個だけ例外設定できる ←btnが画面幅いっぱいになるのを防止*/
  align-self: flex-start;
  display: inline-block;
  width: auto;
}

.btn-wrapper-subpage-portfolio p {
  color: var(--base-color-01);
}

.border-img {
  border: 1px solid var(--base-color-01);
}

/* bannerページ専用css------------------------------------- */

/* 全体の説明文と4つの説明を分ける余白 */
.all-contents-subpage-container-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 124px;
  margin-bottom: 120px;
}

.four-banners-container-inner {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--base-color-01);
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.title-text-container-subpage-outer-banner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 100px;
}

.single-banner-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* ←これが本質 */
  gap: 24px;
}

.single-banner-container h4 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--base-color-01);
}

.banner-title-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.banner-info-wrapper p:not(:last-of-type) {
  margin-bottom: 12px;
}

.banner-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* 以下banner画像の設定----------------------- */
/* carの設定------------------------------- */
.banners-imgs-car {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 912px;
  margin: 0 auto;
}

/* 枠にサイズを持たせる */
.car-vertical {
  max-width: 180px;
}

.car-horizontal {
  max-width: 700px;
}

/* 画像は枠にフィットさせる */
.banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* ここからlipstick--------------------------- */
.banners-imgs-lipstick {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  max-width: 852px;
  margin: 0 auto;
}

.lipstick-horizontal {
  max-width: 560px;
}

.lipstick-vertical {
  max-width: 260px;
}

/* ここからfes--------------------------- */
.banners-imgs-fes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  max-width: 892px;
  margin: 0 auto;
}

.fes-square {
  max-width: 380px;
}

.fes-landscape {
  max-width: 480px;
}

/* 以下キャンプ---------------------------------- */
.banners-imgs-camp {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  max-width: 852px;
  margin: 0 auto;
}

.camp-square {
  max-width: 460px;
}

.camp-landscape {
  max-width: 360px;
}

/* 以下vet下層ページのメディアクエリ----------------------------- */
@media screen and (max-width: 962px) {
  /* max800のコンテナの余白を縮める。適当な数字を入れているだけなので書き換えること*/
  .title-text-container-subpage-outer {
    padding: 0 48px;
  }
  .title-text-container-subpage-outer-banner {
    padding: 0 48px;
  }

  /* bannerページのbanner画像のgap */
  .banners-imgs-car,
  .banners-imgs-lipstick,
  .banners-imgs-fes,
  .banners-imgs-camp {
    gap: 16px;
  }
}
/* PC用サムネにスクロールが生まれるタイミング.でも余白がなくなるタイミングよりも962に合わせた方がいい */
@media screen and (max-width: 837px) {
  .pc-comp-imgs img {
    max-width: clamp(90px, 10vw, 140px);
  }
}

/* vetタイトルが折り返すタイミング */
@media screen and (max-width: 826px) {
  .title-wrapper-subpage {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-end;
    gap: 0;
  }
}
/* タブレット用サムネに横スクロールが生まれるタイミング */
@media screen and (max-width: 657px) {
  .pc-comp-imgs img {
    max-width: 48px;
  }

  .pc-comp-inner,
  .sp-comp-inner {
    /* padding-inlineは左右の余白だけを調整する */
    padding-inline: 16px;
  }

  .pc-comp-imgs {
    gap: 8px;
  }

  .sp-comp-imgs {
    gap: 16px;
  }

  .title-text-container-subpage-outer {
    padding-inline: 16px;
  }

  .title-text-container-subpage-outer-banner {
    padding: 0 16px;
  }
  .title-subpage {
    font-size: 34px;
  }
}

@media (max-width: 482px) {
  .btn-wrapper-subpage-portfolio {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* 以下hamburger---------------------------------------------  */

.hamburger-menu {
  display: none;
}
@media screen and (max-width: 962px) {
  body {
    margin: 0;
  }

  .hamburger-menu {
    width: 100%;
    height: 32px;
    display: block;
  }
  /* ハンバーガーメニューの位置と色 */
  .menu-btn {
    height: 32px;
    width: 32px;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }
  /* メニュー線（本体と before と after で３本表示する） */
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    /* 32x3 の白線 */
    content: "";
    display: block;
    height: 3px;
    width: 32px;
    border-radius: 3px;
    background-color: var(--accent-color-01);
    position: absolute;
    transition: all 0.3s ease;
  }
  /* 表示位置と要素位置の調整 */
  .menu-btn span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* before を少し上にずらして描画 */
  .menu-btn span:before {
    bottom: 12px;
  }
  /* after を少し下にずらして描画 */
  .menu-btn span:after {
    top: 12px;
  }

  .menu-btn.open span {
    /* 中央のspanを透明にしてあたかも消えたようにする */
    background-color: rgba(255, 255, 255, 0);
  }

  .menu-btn.open span::before {
    /* メニューオープン時は三本線の上の線を 45 度傾ける */
    bottom: 0;
    transform: rotate(45deg);
    /* 若干短く見えるのでちょっと大きく */
    width: 34px;
  }

  .menu-btn.open span::after {
    /* メニューオープン時は三本線の下の線を -45 度傾ける */
    top: 0;
    transform: rotate(-45deg);
    /* 若干短く見えるのでちょっと大きく */
    width: 34px;
  }

  /* バツ表示時に上下の線を白に */
  .menu-btn.open span::before,
  .menu-btn.open span::after {
    background-color: var(--base-color-01);
  }

  /* メニュー装飾 */
  .menu-content {
    align-items: flex-start;
    /* ここがメニュー表の高さと幅 */
    width: 200px;
    max-width: 80%;
    height: auto;
    position: fixed;
    top: 0;
    right: -100%; /* メニューを画面外へ */
    z-index: 9990; /* 下のコンテンツの上にかぶせて表示する */
    background-color: var(--accent-color-03);
    transition: all 0.5s; /* 0.5秒かけてアニメーションで出し入れする */
    border-radius: 32px;
  }

  .menu-content ul {
    flex-flow: column;
    flex-basis: 90%;
    padding: 100px 10px 0;
    text-align: center;
  }
  .menu-content ul li {
    /* border-bottom: solid 1px var(--base-color-01);  */
    margin-bottom: 10px; /* ← ボタン同士の間隔 */
    list-style: none;
  }
  .menu-content ul li a {
    display: inline-block;
    width: 100px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--base-color-01);
    font-family: var(--ysabeau-sc-font);
    font-weight: 300;
    /* padding: 9px 15px 10px 0; */
    position: relative;

    border: 1px solid #fff; /* ← 追加 */
    border-radius: 5px; /* ← 角丸（任意） */
    padding: 2px 8px;
    box-sizing: border-box;
  }

  /* 以下2つはiang-btnの設定 */
  .menu-content ul li:last-child {
    margin-top: 24px; /* 下に余白を追加 */
    margin-bottom: 48px;

    background-color: var(--base-color-01); /* 背景色を変える */
    border-radius: 5px; /* 角を丸くする */
    padding: 0;
    font-size: 15px;
    font-weight: 300;
    display: inline-block;
  }

  .menu-content ul li:last-child a {
    color: var(--base-color-02); /* テキスト色を変える */
    font-weight: 400;
  }

  /* メニューの出し入れ。topと右を8px空ける */
  .menu-content.open {
    top: 8px;
    right: 8px; /* チェックされたら画面内へ */
  }

  /* 背景クリックでもメニューを戻せる */
  /* display:noneからblockの表示はtransitionが効かないため
     pointer-eventsを使用 */
  .bg-btn {
    pointer-events: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;
    background-color: #333;
    opacity: 0;
    transition: all 0.5s;
  }

  /* メニュー表示と共に背景部分.bg-btnをクリック可能にする */
  .bg-btn.open {
    pointer-events: auto;
    z-index: 9900;
    opacity: 0.3;
  }
}