.zdo_drawer_button * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  list-style: none;
  line-height: normal; /* 親要素の影響を打ち消すために記述した方がよい */
}


.zdo_drawer_button {
  display: block;
  padding: 0;
  width: 30px;
  height: 20px;
  position: relative;
  background: none;
  border: none;
  text-align: center;
  letter-spacing: 0.1em;
  cursor: pointer;
  outline: none;
}


.zdo_drawer_button .zdo_drawer_bar {
  display: block;
  width: 30px;
  height: 3px;
  transition: all 0.2s;
  transform-origin: 0% 0%; /* xyそれぞれの座標の中心点を0にしておく */
  transform: translateY(-50%);
  position: absolute;
}


.zdo_drawer_button .zdo_drawer_bar1 {
  top: 0;
}


.zdo_drawer_button .zdo_drawer_bar2 {
  top: 50%;
}


.zdo_drawer_button .zdo_drawer_bar3 {
  top: 100%;
}


.zdo_drawer_button.active .zdo_drawer_bar {
  width: 30px;
  background-color: #fff; /* ×に変換したときは白 */
}


.zdo_drawer_button.active .zdo_drawer_bar1 {
  transform-origin: 0% 50%; /* 動かしたときにy軸の中心点を縦中央位置に配置する */
  transform: rotate(40deg);
}


.zdo_drawer_button.active .zdo_drawer_bar2 {
  opacity: 0;
}


.zdo_drawer_button.active .zdo_drawer_bar3 {
  transform-origin: 0% 50%; /* 動かしたときにy軸の中心点を縦中央位置に配置する */
  transform: rotate(-40deg); /* 左右対象角度にならないため、（目視で）調整 */
  margin-top: -1px; /* （目視で）上に1pxにずらして対応 */
}


.zdo_drawer_button.active .zdo_drawer_menu_text {
  display: none;
}


.zdo_drawer_button.active .zdo_drawer_close {
  display: block;
  width: 30px;
  text-align: left;
}


.zdo_drawer_text {
  display: inline-block;
  width: 30px;
  margin: 25px 0 0; /* テキストの縦の位置調整（バーの縦幅が20pxなので、5px下に配置したことになる） */
  text-align: center;
  font-size: 6px;
  font-weight: bold;
  color: #222;
}


.zdo_drawer_close {
  letter-spacing: 0.08em;
  display: none;
  color: #fff; /* ×に変換したときは白 */
}


/*+++ Default Button Color +++*/
.zdo_drawer_button {
  color: #666;
}


.zdo_drawer_button .zdo_drawer_bar {
  background-color: #666;
}


/* ボタンのスタイル */
.zdo_drawer_menu .zdo_drawer_button {
  /* ポジション（今回はabsoluteを使用しない） */
  position: relative;
  z-index: 1001;
}


/* 横幅が768以上の場合はドロワーメニューを表示しない */
@media screen and (min-width: 767.9px) {
  .zdo_drawer_menu {
    display: none;
  }
}


.zdo_drawer_menu a {
  color: inherit;
  text-decoration: none;
}


.zdo_drawer_menu a:visited {
  color: inherit;
}


.zdo_drawer_menu .zdo_drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
  overflow-y: hidden;
}


.zdo_drawer_menu .zdo_drawer_nav_wrapper {
  width: 250px;
  height: 100%;
  transition: all 0.2s;
  transform: translate(250px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1002;
  background-color: #FFF;
  overflow: scroll;
}


.zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}


.zdo_drawer_menu.left .zdo_drawer_button {
  right: auto;
  left: 40px;
}


.zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
  transform: translate(-250px);
  right: auto;
  left: 0;
}


.zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}


/* =====================================================
 * コンテンツ内のレイアウト
 * ===================================================== */
.drawer_content {
  position: relative;
  width: 100%; /* 今回は幅の余白なし */
  padding-top: 30px;
  text-align: left;
}


/* -------------------------
 * ドロワーメニューの見出し
 * ------------------------- */
.drawer-heading {
  font-size: 100%;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid silver;
  text-align: center;
}


.drawer-heading > span {
  display: block;
  width: 90%;
  margin: 0 auto 10px;
}


/* -------------------------
 * メニュー(上部)
 * ------------------------- */
.menu_01 {
  display: grid;
  list-style-type: none;
  font-size: 0; /* 子要素が持つフォントサイズに起因する間隔をなくすため */
  grid-auto-flow: row; /* 縦並びにする（※初期値) */
}


.menu_01 li {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #c7c7c7;
}


.menu_01 li span {
  display: block;
  width: 90%;
  margin: 0 auto;
  line-height: 50px;
}


.menu_01 li span::before {
  font-family: "Font Awesome 6 Free";
  content: "\f02c";
  color: orange;
  font-weight: 900;
  margin-right: 0.5em;
}


.menu_01 a {
  display: block;
  width: 100%;
  height: 100%;
}


/* -------------------------
 * メニュー(下部:2カラム)
 * ------------------------- */
.menu_2c {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横並び */
  list-style-type: none;
}


  .menu_2c_inner {
    position: relative;
    display: grid;
    border-right: 1px dotted #c7c7c7;
    border-bottom: 1px dotted #c7c7c7;
    height: 100px;
    align-items: center;
    justify-content: center;
  }


  .box-link { /* 要素全体をリンクにする */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


    /* (共通)アイコン下部のテキスト */
    .icon_text {
      display: block;
      text-align: center;
      font-size: 80%;
      color: #888;
    }


    /* ホーム */
    .icon_home::before {
      font-family: "Font Awesome 6 Free";
      content: "\f015";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
      font-weight: 900;
    }


    /* お問い合わせ */
    .icon_inquiry::before {
      font-family: "Font Awesome 6 Free";
      content: "\f0e0";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
      font-weight: 900;
    }


    /* 運営会社 */
    .icon_company::before {
      font-family: "Font Awesome 6 Free";
      content: "\f1ad";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
      font-weight: 900;
    }


    /* プライバシー */
    .icon_privacy::before {
      font-family: "Font Awesome 6 Free";
      content: "\f023";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
      font-weight: 900;
    }


    /* 特商法 */
    .icon_tokushoho::before {
      font-family: "Font Awesome 6 Free";
      content: "\f15b";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
      font-weight: 900;
    }


    /* instagram */
    .icon_instagram:before {
      font-family: "Font Awesome 6 Brands"; /* Brandsの場合はfont-weightの指定は不要 */
      content: "\f16d";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
    }