@charset "utf-8";

/* .noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
} */

:root {
  --main-color-01: #b3d5dc;
  --base-color-01: #d0eae8;
  --base-color-02: #d1dcdd;
  --base-color-03: #f9f8f4;
  --accent-color-01: #f3f2d3;
  --accent-color-02: #8faab0;
  --accent-color-03: #475152;
  --zen-kaku-font: "Zen Kaku Gothic New", sans-serif;
  --noto-serif-font: "Noto Serif JP", serif;
  --baskerville-font: "Libre Baskerville", serif;
  --roboto-font: "Roboto", sans-serif;
}

/* font-weight:の、Lightは300,Regularは400 */

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  /* figmaのletter-spacing 12%; */
  letter-spacing: 0.12em;
}

/* 病院名とセクションタイトル */
h1 {
  font-family: var(--noto-serif-font);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.12em;
}

/* キャチコピー */
h2 {
  font-family: var(--zen-kaku-font);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.12em;
}

h3 {
  font-family: var(--zen-kaku-font);
  font-size: 36px;
  font-weight: 300;
}

h4 {
  font-family: var(--zen-kaku-font);
  font-size: 21px;
  font-weight: 400;
}

/* ここからhamburger------------------------------- */

/* hamburgerをつけたらdisplay: none;の記述と、メディアクエリ内でdisplay: block;で解除するのを忘れないこと！ */
.hamburger-menu {
  display: none;
}

@media (max-width: 686px) {
  .g-nav,
  .lang-switch {
    display: none;
  }

  body {
    margin: 0;
  }

  .hamburger-menu {
    width: 100%;
    height: 0; /* 見本は32pxになっているが、32pxを入れるとheaderの下に32pxの余白が出るので0に。*/
    display: block; /* または flex。これを入れないとdisplay: none;が解除されない！ */
  }
  /* ハンバーガーメニューの位置と色 */
  .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(--base-color-03);
    position: absolute;
    transition: 0.3s;
  }
  /* 表示位置と要素位置の調整 */
  .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;
    background-color: var(--accent-color-03); /* 追加 */
  }

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

  /* メニュー装飾 */
  .menu-content {
    align-items: flex-start;
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -100%; /* メニューを画面外へ */
    z-index: 9990; /* 下のコンテンツの上にかぶせて表示する */
    background-color: rgb(243, 242, 211);
    transition: all 0.5s; /* 0.5秒かけてアニメーションで出し入れする */
  }

  .menu-content ul {
    flex-flow: column;
    flex-basis: 90%;
    padding: 100px 10px 0;
  }
  .menu-content ul li {
    border-bottom: solid 1px #475152; /* メニューアイテムの区切り線 */
    list-style: none;
  }
  .menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    text-decoration: none;
    color: #475152; /* 文字の色 */
    font-weight: 400;
    padding: 9px 15px 10px 0;
    position: relative;
  }

  /* メニューの出し入れ */
  .menu-content.open {
    right: 0; /* チェックされたら画面内へ */
  }

  /* 背景クリックでもメニューを戻せる */
  /* display:noneからblockの表示はtransitionが効かないため
     pointer-eventsを使用 */
  .bg-btn {
    pointer-events: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 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;
  }
}