.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-align: left;
  text-decoration: none;
  list-style: none;
  line-height: normal; /* 親要素の影響を打ち消すために記述した方がよい */
}


.zdo_drawer_button {
  display: block;
  padding: 0;
  width: 22px;
  height: 13px;
  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: 22px;
  height: 3px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
}


.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: 18.385px;
  left: 5px; /* ×を右に微調整 */
  background-color: #fff; /* ×に変換したときは白 */
}


.zdo_drawer_button.active .zdo_drawer_bar1 {
  transform: rotate(0.7853981634rad) translateY(-50%);
  top: 0px;
}


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


.zdo_drawer_button.active .zdo_drawer_bar3 {
  transform: rotate(-0.7853981634rad) translateY(-50%);
  top: calc(100% - 0px);
}


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


.zdo_drawer_button.active .zdo_drawer_close {
  display: block;
}


.zdo_drawer_text {
  display: block;
  width: 22px;
  position: absolute;
  left: 0;
  bottom: -13px;
  text-align: center;
  font-size: 6px;
  font-weight: bold;
  color: #666;
}


.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;
  left: 2px;
}


/* 横幅が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: 32px;
}


.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 5 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 5 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 5 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 5 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 5 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 5 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;
    }


    /* x */
    .icon_x::before {
      content: "𝕏";
      display: block; /* 必須 */
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: #999;
      color: #fff;
      font-size: 150%;
    }