@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand');
*{
    font-family: 'Quicksand','Noto Sans JP', sans-serif;
}
/* ----------------------------------------------------

このCSSファイルは編集しないでください！
プログラムのアップデートを行うと、編集内容がリセットされてしまうためです。
CSSのカスタマイズは、custom.cssに記述してください。

個人サイト向けイラスト作品管理プログラム　ずぼログ Ver1.1.1
製作者    ：ガタガタ
サイト    ：https://do.gt-gt.org/
ライセンス：MITライセンス
全文      ：https://ja.osdn.net/projects/opensource/wiki/licenses%2FMIT_license
公開日    ：2022.10.06
最終更新日：2022.11.09
このプログラムはどなたでも無償で利用・複製・変更・
再配布および複製物を販売することができます。
ただし、上記著作権表示ならびに同意意志を、
このファイルから削除しないでください。

---------------------------------------------------- */
/* CSS_custom_properties */

:root {
    --hamburger: 30px;
    --user-icon: 3rem;
    --icon-font: "Material Icons";
    --wn-pink: rgb(233, 30, 99);
    --wn-pink-rgb: 233, 30, 99;
    --wn-blue: #1da1f2;
    --hero-height: 160px;
    --icon-size: 100px;
    --button-link-color: #fafafa;
    --scrollbar-width: 8px;
    --cont-width: 680px;
    --loading-z-index: 1000;
    --quickpost-z-index: 200;
    --hamburger-z-index: 100;
    --searchopen-z-index: 2;
    --sidebar-z-index: 10;
    --dropdownmenu-z-index: 1;

    --bg-color: #cfe2e6;
    --bg-color-rgb: 245, 245, 245;
    --bg-sidebar: #f5f5f5;
    --text-color: #4f5b5e;
    --text-color-rgb: 72, 70, 76;
    --input-area-bg: #eceff1;
    --input-area-bg-rgb: 236, 239, 241;
    --input-text-color: rgb(33, 33, 33);
    --input-text-color-rgb: 33, 33, 33;
    --onelogbox-border-color: #e0e0e0;
    --link-color: #52adcc;
    --link-color-rgb: 0, 30, 67;
    --link-article-color: #1565c0;
    --link-hover-color: #ffeccc;
    --mode-color: #f9a825;
    --wn-red: #d50000;
    --color-bw: 0, 0, 0;
}
body {
    font-family:  'Quicksand','Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
/* link */
a:link, a:visited, a:active {
    color: var(--link-color);
    text-decoration: none; 
}
a:hover {
    color: var(--link-hover-color);
}
a:visited:hover {
    color: var(--link-hover-color);
}
iframe {
    max-width: 100%;
}
/*========= 見出し設定 ===============*/
 h1 {
     font-size: 2em;
     margin: 1.7em;
     color: #4f5b5e;
}

.h_30 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.h_30:before, .h_30:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.h_30:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.h_30:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}
/*========= ボックスデザイン ===============*/
.balloon-002 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 400px;
    margin-top: 15px;
    padding: 1.2em;
    border-radius: 15px;
    background-color: #ffffff;
    color: #84b9cb;
}
.balloon-002::before {
    position: absolute;
    top: -10px;
    width: 30px;
    height: 15px;
    background-color: #ffffff;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}
/*========= ボタン ===============*/
.btn-border-bottom {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0;
  text-decoration: none;
  color: #e0e0e0;  
}

.btn-border-bottom:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 3px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#e0e0e0;
  transition: .2s;
}

.btn-border-bottom:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}

.btn-brackets {
  display: inline-block;
  position: relative;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #000;
  transition: .4s;
}
.btn-brackets:hover {
  color:#ff7f7f;
}
.btn-brackets:before, .btn-brackets:after {
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.btn-brackets:before {
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  left: 0;
}
.btn-brackets:after {
  content: '';
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  right: 0;
}
.button-036 {
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: 150px;
    margin: 1em;
    padding: .8em 1.5em;
    border: 1px solid #83ccd2;
    border-radius: 5px;
    background-color: #fff;
    color: #83ccd2;
    font-size: 1em;
}

.button-036:hover {
    border: 1px solid #83ccd2;
    background-color: #83ccd2;
    color: #fff;
    font-weight: 600;
}
.button-037 {
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: 150px;
    margin: 1em;
    padding: .8em 1.5em;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #e0e0e0;
    color: #83ccd2;
    font-size: 1em;
}
/*========= 記事欄の設定 ===============*/
div.onelogbox {
    max-width: 700px;
    margin: 30px auto;
    padding:24px 24px 15px 24px;
    background:#fff;
    border:#e6e6e6 5px solid;
    border-radius:10px;
}
div.onelogbox2 {
    margin: 30px auto;
    padding:5px;
    background:#fff;
    border:#e6e6e6 5px solid;
    border-radius:10px;
}
p.oneloginfo {
    text-align: center;
    font-size: 90%;
    margin-bottom: 0;
	color: #979797;
}

ul.zubolog {
  list-style: none;
  margin: 40px auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
}
ul.zubolog li {
  width: 80px;
  height: 80px;
  background: #ffffff;
  display: block;
  box-sizing: border-box;
  margin-right: 1px;
  margin-bottom: 1px;
  overflow: hidden;
}
@media (min-width: 600px) {
  ul.zubolog li {
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog li {
    width: 120px;
    height: 120px;
  }
}
ul.zubolog li a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
ul.zubolog li a img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
ul.zubolog li a:hover {
  opacity: 0.6;
}
ul.zubolog_order li a {
  border: 1px solid #9c9c9c;
}
ul.zubolog_adomaru li a {
  border-radius: 3px;
}
ul.zubolog_1 li {
  width: calc((100% / 1) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_1 li:nth-of-type(1n) {
  margin-right: 0px;
}
ul.zubolog_1 li:not(:nth-of-type(1n)) {
  margin-right: 1px;
}
ul.zubolog_2 li {
  width: calc((100% / 2) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_2 li:nth-of-type(2n) {
  margin-right: 0px;
}
ul.zubolog_2 li:not(:nth-of-type(2n)) {
  margin-right: 1px;
}
ul.zubolog_3 li {
  width: calc((100% / 3) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_3 li:nth-of-type(3n) {
  margin-right: 0px;
}
ul.zubolog_3 li:not(:nth-of-type(3n)) {
  margin-right: 1px;
}
ul.zubolog_4 li {
  width: calc((100% / 4) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_4 li:nth-of-type(4n) {
  margin-right: 0px;
}
ul.zubolog_4 li:not(:nth-of-type(4n)) {
  margin-right: 1px;
}
ul.zubolog_5 li {
  width: calc((100% / 5) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_5 li:nth-of-type(5n) {
  margin-right: 0px;
}
ul.zubolog_5 li:not(:nth-of-type(5n)) {
  margin-right: 1px;
}
ul.zubolog_6 li {
  width: calc((100% / 6) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_6 li:nth-of-type(6n) {
  margin-right: 0px;
}
ul.zubolog_6 li:not(:nth-of-type(6n)) {
  margin-right: 1px;
}
ul.zubolog_7 li {
  width: calc((100% / 7) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_7 li:nth-of-type(7n) {
  margin-right: 0px;
}
ul.zubolog_7 li:not(:nth-of-type(7n)) {
  margin-right: 1px;
}
ul.zubolog_8 li {
  width: calc((100% / 8) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_8 li:nth-of-type(8n) {
  margin-right: 0px;
}
ul.zubolog_8 li:not(:nth-of-type(8n)) {
  margin-right: 1px;
}
ul.zubolog_9 li {
  width: calc((100% / 9) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_9 li:nth-of-type(9n) {
  margin-right: 0px;
}
ul.zubolog_9 li:not(:nth-of-type(9n)) {
  margin-right: 1px;
}
ul.zubolog_10 li {
  width: calc((100% / 10) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_10 li:nth-of-type(10n) {
  margin-right: 0px;
}
ul.zubolog_10 li:not(:nth-of-type(10n)) {
  margin-right: 1px;
}
ul.zubolog_11 li {
  width: calc((100% / 11) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_11 li:nth-of-type(11n) {
  margin-right: 0px;
}
ul.zubolog_11 li:not(:nth-of-type(11n)) {
  margin-right: 1px;
}
ul.zubolog_12 li {
  width: calc((100% / 12) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_12 li:nth-of-type(12n) {
  margin-right: 0px;
}
ul.zubolog_12 li:not(:nth-of-type(12n)) {
  margin-right: 1px;
}
ul.zubolog_13 li {
  width: calc((100% / 13) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_13 li:nth-of-type(13n) {
  margin-right: 0px;
}
ul.zubolog_13 li:not(:nth-of-type(13n)) {
  margin-right: 1px;
}
ul.zubolog_14 li {
  width: calc((100% / 14) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_14 li:nth-of-type(14n) {
  margin-right: 0px;
}
ul.zubolog_14 li:not(:nth-of-type(14n)) {
  margin-right: 1px;
}
ul.zubolog_15 li {
  width: calc((100% / 15) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_15 li:nth-of-type(15n) {
  margin-right: 0px;
}
ul.zubolog_15 li:not(:nth-of-type(15n)) {
  margin-right: 1px;
}
ul.zubolog_16 li {
  width: calc((100% / 16) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_16 li:nth-of-type(16n) {
  margin-right: 0px;
}
ul.zubolog_16 li:not(:nth-of-type(16n)) {
  margin-right: 1px;
}
ul.zubolog_17 li {
  width: calc((100% / 17) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_17 li:nth-of-type(17n) {
  margin-right: 0px;
}
ul.zubolog_17 li:not(:nth-of-type(17n)) {
  margin-right: 1px;
}
ul.zubolog_18 li {
  width: calc((100% / 18) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_18 li:nth-of-type(18n) {
  margin-right: 0px;
}
ul.zubolog_18 li:not(:nth-of-type(18n)) {
  margin-right: 1px;
}
ul.zubolog_19 li {
  width: calc((100% / 19) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_19 li:nth-of-type(19n) {
  margin-right: 0px;
}
ul.zubolog_19 li:not(:nth-of-type(19n)) {
  margin-right: 1px;
}
ul.zubolog_20 li {
  width: calc((100% / 20) - 1px);
  height: auto;
  aspect-ratio: 1/1;
}
ul.zubolog_20 li:nth-of-type(20n) {
  margin-right: 0px;
}
ul.zubolog_20 li:not(:nth-of-type(20n)) {
  margin-right: 1px;
}
@media (min-width: 600px) {
  ul.zubolog_md-1 li {
    width: calc((100% / 1) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-1 li:nth-of-type(1n) {
    margin-right: 0px;
  }
  ul.zubolog_md-1 li:not(:nth-of-type(1n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-2 li {
    width: calc((100% / 2) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-2 li:nth-of-type(2n) {
    margin-right: 0px;
  }
  ul.zubolog_md-2 li:not(:nth-of-type(2n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-3 li {
    width: calc((100% / 3) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-3 li:nth-of-type(3n) {
    margin-right: 0px;
  }
  ul.zubolog_md-3 li:not(:nth-of-type(3n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-4 li {
    width: calc((100% / 4) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-4 li:nth-of-type(4n) {
    margin-right: 0px;
  }
  ul.zubolog_md-4 li:not(:nth-of-type(4n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-5 li {
    width: calc((100% / 5) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-5 li:nth-of-type(5n) {
    margin-right: 0px;
  }
  ul.zubolog_md-5 li:not(:nth-of-type(5n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-6 li {
    width: calc((100% / 6) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-6 li:nth-of-type(6n) {
    margin-right: 0px;
  }
  ul.zubolog_md-6 li:not(:nth-of-type(6n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-7 li {
    width: calc((100% / 7) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-7 li:nth-of-type(7n) {
    margin-right: 0px;
  }
  ul.zubolog_md-7 li:not(:nth-of-type(7n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-8 li {
    width: calc((100% / 8) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-8 li:nth-of-type(8n) {
    margin-right: 0px;
  }
  ul.zubolog_md-8 li:not(:nth-of-type(8n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-9 li {
    width: calc((100% / 9) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-9 li:nth-of-type(9n) {
    margin-right: 0px;
  }
  ul.zubolog_md-9 li:not(:nth-of-type(9n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-10 li {
    width: calc((100% / 10) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-10 li:nth-of-type(10n) {
    margin-right: 0px;
  }
  ul.zubolog_md-10 li:not(:nth-of-type(10n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-11 li {
    width: calc((100% / 11) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-11 li:nth-of-type(11n) {
    margin-right: 0px;
  }
  ul.zubolog_md-11 li:not(:nth-of-type(11n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-12 li {
    width: calc((100% / 12) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-12 li:nth-of-type(12n) {
    margin-right: 0px;
  }
  ul.zubolog_md-12 li:not(:nth-of-type(12n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-13 li {
    width: calc((100% / 13) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-13 li:nth-of-type(13n) {
    margin-right: 0px;
  }
  ul.zubolog_md-13 li:not(:nth-of-type(13n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-14 li {
    width: calc((100% / 14) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-14 li:nth-of-type(14n) {
    margin-right: 0px;
  }
  ul.zubolog_md-14 li:not(:nth-of-type(14n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-15 li {
    width: calc((100% / 15) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-15 li:nth-of-type(15n) {
    margin-right: 0px;
  }
  ul.zubolog_md-15 li:not(:nth-of-type(15n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-16 li {
    width: calc((100% / 16) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-16 li:nth-of-type(16n) {
    margin-right: 0px;
  }
  ul.zubolog_md-16 li:not(:nth-of-type(16n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-17 li {
    width: calc((100% / 17) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-17 li:nth-of-type(17n) {
    margin-right: 0px;
  }
  ul.zubolog_md-17 li:not(:nth-of-type(17n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-18 li {
    width: calc((100% / 18) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-18 li:nth-of-type(18n) {
    margin-right: 0px;
  }
  ul.zubolog_md-18 li:not(:nth-of-type(18n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-19 li {
    width: calc((100% / 19) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-19 li:nth-of-type(19n) {
    margin-right: 0px;
  }
  ul.zubolog_md-19 li:not(:nth-of-type(19n)) {
    margin-right: 1px;
  }
}
@media (min-width: 600px) {
  ul.zubolog_md-20 li {
    width: calc((100% / 20) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_md-20 li:nth-of-type(20n) {
    margin-right: 0px;
  }
  ul.zubolog_md-20 li:not(:nth-of-type(20n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-1 li {
    width: calc((100% / 1) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-1 li:nth-of-type(1n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-1 li:not(:nth-of-type(1n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-2 li {
    width: calc((100% / 2) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-2 li:nth-of-type(2n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-2 li:not(:nth-of-type(2n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-3 li {
    width: calc((100% / 3) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-3 li:nth-of-type(3n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-3 li:not(:nth-of-type(3n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-4 li {
    width: calc((100% / 4) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-4 li:nth-of-type(4n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-4 li:not(:nth-of-type(4n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-5 li {
    width: calc((100% / 5) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-5 li:nth-of-type(5n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-5 li:not(:nth-of-type(5n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-6 li {
    width: calc((100% / 6) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-6 li:nth-of-type(6n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-6 li:not(:nth-of-type(6n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-7 li {
    width: calc((100% / 7) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-7 li:nth-of-type(7n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-7 li:not(:nth-of-type(7n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-8 li {
    width: calc((100% / 8) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-8 li:nth-of-type(8n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-8 li:not(:nth-of-type(8n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-9 li {
    width: calc((100% / 9) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-9 li:nth-of-type(9n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-9 li:not(:nth-of-type(9n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-10 li {
    width: calc((100% / 10) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-10 li:nth-of-type(10n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-10 li:not(:nth-of-type(10n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-11 li {
    width: calc((100% / 11) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-11 li:nth-of-type(11n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-11 li:not(:nth-of-type(11n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-12 li {
    width: calc((100% / 12) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-12 li:nth-of-type(12n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-12 li:not(:nth-of-type(12n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-13 li {
    width: calc((100% / 13) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-13 li:nth-of-type(13n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-13 li:not(:nth-of-type(13n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-14 li {
    width: calc((100% / 14) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-14 li:nth-of-type(14n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-14 li:not(:nth-of-type(14n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-15 li {
    width: calc((100% / 15) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-15 li:nth-of-type(15n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-15 li:not(:nth-of-type(15n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-16 li {
    width: calc((100% / 16) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-16 li:nth-of-type(16n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-16 li:not(:nth-of-type(16n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-17 li {
    width: calc((100% / 17) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-17 li:nth-of-type(17n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-17 li:not(:nth-of-type(17n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-18 li {
    width: calc((100% / 18) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-18 li:nth-of-type(18n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-18 li:not(:nth-of-type(18n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-19 li {
    width: calc((100% / 19) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-19 li:nth-of-type(19n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-19 li:not(:nth-of-type(19n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1025px) {
  ul.zubolog_lg-20 li {
    width: calc((100% / 20) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_lg-20 li:nth-of-type(20n) {
    margin-right: 0px;
  }
  ul.zubolog_lg-20 li:not(:nth-of-type(20n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-1 li {
    width: calc((100% / 1) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-1 li:nth-of-type(1n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-1 li:not(:nth-of-type(1n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-2 li {
    width: calc((100% / 2) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-2 li:nth-of-type(2n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-2 li:not(:nth-of-type(2n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-3 li {
    width: calc((100% / 3) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-3 li:nth-of-type(3n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-3 li:not(:nth-of-type(3n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-4 li {
    width: calc((100% / 4) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-4 li:nth-of-type(4n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-4 li:not(:nth-of-type(4n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-5 li {
    width: calc((100% / 5) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-5 li:nth-of-type(5n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-5 li:not(:nth-of-type(5n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-6 li {
    width: calc((100% / 6) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-6 li:nth-of-type(6n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-6 li:not(:nth-of-type(6n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-7 li {
    width: calc((100% / 7) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-7 li:nth-of-type(7n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-7 li:not(:nth-of-type(7n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-8 li {
    width: calc((100% / 8) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-8 li:nth-of-type(8n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-8 li:not(:nth-of-type(8n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-9 li {
    width: calc((100% / 9) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-9 li:nth-of-type(9n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-9 li:not(:nth-of-type(9n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-10 li {
    width: calc((100% / 10) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-10 li:nth-of-type(10n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-10 li:not(:nth-of-type(10n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-11 li {
    width: calc((100% / 11) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-11 li:nth-of-type(11n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-11 li:not(:nth-of-type(11n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-12 li {
    width: calc((100% / 12) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-12 li:nth-of-type(12n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-12 li:not(:nth-of-type(12n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-13 li {
    width: calc((100% / 13) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-13 li:nth-of-type(13n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-13 li:not(:nth-of-type(13n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-14 li {
    width: calc((100% / 14) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-14 li:nth-of-type(14n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-14 li:not(:nth-of-type(14n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-15 li {
    width: calc((100% / 15) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-15 li:nth-of-type(15n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-15 li:not(:nth-of-type(15n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-16 li {
    width: calc((100% / 16) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-16 li:nth-of-type(16n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-16 li:not(:nth-of-type(16n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-17 li {
    width: calc((100% / 17) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-17 li:nth-of-type(17n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-17 li:not(:nth-of-type(17n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-18 li {
    width: calc((100% / 18) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-18 li:nth-of-type(18n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-18 li:not(:nth-of-type(18n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-19 li {
    width: calc((100% / 19) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-19 li:nth-of-type(19n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-19 li:not(:nth-of-type(19n)) {
    margin-right: 1px;
  }
}
@media (min-width: 1240px) {
  ul.zubolog_xl-20 li {
    width: calc((100% / 20) - 1px);
    height: auto;
    aspect-ratio: 1/1;
  }
  ul.zubolog_xl-20 li:nth-of-type(20n) {
    margin-right: 0px;
  }
  ul.zubolog_xl-20 li:not(:nth-of-type(20n)) {
    margin-right: 1px;
  }
}

p.zubolog_comic {
  text-align: center;
  width: 100%;
}
p.zubolog_comic img {
  max-width: 100%;
  width: 700px;
  border: 1px solid #cccccc;
}

ul.zubolog_pagination {
  display: flex;
  list-style: none;
  margin: 50px auto;
  justify-content: center;
}
ul.zubolog_pagination li {
  text-align: center;
  margin: 0 5px 0 0;
}
@media (min-width: 1025px) {
  ul.zubolog_pagination li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius:.8em;
  }
}
ul.zubolog_pagination li.current {
  background: #e8ecef;
  color: #2a83a2;
}
ul.zubolog_pagination li a {
  display:inline-block;
  width: 100%;
  height: 100%;
  background: #2a83a2;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  border-radius:.8em;
}
ul.zubolog_pagination li a:hover {
  background: var(--link-hover-color);
  color: #2a83a2;
  border-radius:.8em;
}
ul.zubolog_pagination li.zubolog_prev, ul.zubolog_pagination li.zubolog_next {
  width: 50px;
}
@media (min-width: 1025px) {
  ul.zubolog_pagination li.zubolog_prev, ul.zubolog_pagination li.zubolog_next {
    width: 60px;
  }
}
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width: 100%;
    height: 100vh;/*ナビの高さ*/
	background: var(--link-hover-color);
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
/*========= ナビゲーションのためのCSS ===============*/

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

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

.drawer_menu a:visited {
	color: inherit;
}


/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 50px;/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color: #ebf6f7;/* PC用メニュー背景色 */
}

.drawer_menu .drawer_nav {
	max-width: 700px;/* コンテンツ幅に合わせる */
	padding: 0;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style-type: none;
    background-color: #ebf6f7;
}

.drawer_menu .drawer_nav li {
	font-size: 16px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	line-height: 50px;
	/* PC用メニュー高さ */
	text-align: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li:hover {
	background-color: #fff;
	/* PC用メニューボタンマウスオーバー背景色 */
}

.drawer_menu .drawer_nav li a {
	color: #2a83a2;
	/* PC用メニューボタン文字色 */
}


/* PC非表示 */

@media screen and (min-width:1001px) {
	.pc-hidden {
		display: none;
		text-align: center;
	}
}

@media screen and (min-width: 1001px) {

	/* ドロップダウンメニュー2階層目 */
	.drawer_menu .drawer_nav li ul.second-level {
		visibility: hidden;
		list-style-type: none;
		position: absolute;
		z-index: -1;
		top: 0;
		margin: 0;
		padding-left: 0;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level {
		visibility: visible;
		z-index: 1;
		top: 50px;
		/* PC用メニューの高さに合わせる */
		transition: all .3s;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 200px;
		/* ドロップダウンメニューボタン横幅 */
		height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color: #fff;
		/* ドロップダウンメニューの文字の背景色 */
		color: #2a83a2;
		/* ドロップダウンメニューの文字色 */
		font-size: 100%;
		text-decoration: none;
		line-height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
		background-color: #ebf6f7;
		/* ドロップダウンメニューマウスホバー背景色 */
	}

	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
	color: #fff;
	/* ハンバーガーメニュー文字色 */
	display: none;
}

.drawer_menu .drawer_button .drawer_bar {
	background-color: #7d9eb3;
	/* ハンバーガーメニュー三本線の色 */
}


/* 1000px以下 */

@media screen and (max-width: 1000px) {
	.drawer_menu .drawer_bg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(51, 51, 51, 0.5);
		display: none;
		top: 0;
		left: 0;
	}

	.drawer_menu .drawer_button {
		display: block;
		background-color: #eee;
		color: #426579;
		border: none;
        border-radius: 3px;
		padding: 3px;
		width: 50px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 1001;
		text-align: center;
		outline: none;
	}

	.drawer_menu .drawer_button.active .drawer_bar {
		width: 35px;
	}

	.drawer_menu .drawer_button.active .drawer_bar1 {
		transform: rotate(28deg);
	}

	.drawer_menu .drawer_button.active .drawer_bar2 {
		opacity: 0;
	}

	.drawer_menu .drawer_button.active .drawer_bar3 {
		transform: rotate(-28deg);
	}

	.drawer_menu .drawer_button.active .drawer_menu_text {
		display: none;
	}

	.drawer_menu .drawer_button.active .drawer_close {
		display: block;
	}

	.drawer_menu .drawer_bar {
		display: block;
		height: 2px;
		margin: 6px 6px;
		transition: all 0.2s;
		transform-origin: 0 0;
	}

	.drawer_menu .drawer_text {
		text-align: center;
		font-size: 10px;
	}

	.drawer_menu .drawer_close {
		letter-spacing: 0.08em;
		display: none;
	}

	.drawer_menu .drawer_menu_text {
		display: block;
	}

	.drawer_menu .drawer_nav_wrapper {
		width: 250px;
		height: 100%;
		transition: all 0.2s;
		transform: translate(250px);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;
		background-color: #FFF;
		/* ドロワーメニュー内背景色 */
		overflow-x: hidden;
		overflow-y: auto;
	}

	.drawer_menu .drawer_nav {
		display: block;
		position: relative;
		margin-top: 40px;
	}

	.drawer_menu .drawer_nav li {
		background-color: #fff;
		height: auto;
		line-height: 50px;
		/*  ドロワーメニューリスト項目高さ */
		position: relative;
		border-bottom: 1px solid #eee;
	}

	.drawer_menu .drawer_nav li a {
		background-color: #fff;
		/* ドロワーメニューリスト背景色 */
		color: #555;
		/* ドロワーメニューリスト文字色 */
		display: block;
		text-align: left;
		padding-left: 20px;
	}

	/* スマートフォン2階層目 */
	.drawer_menu .drawer_nav li:hover ul.second-level {
		display: block;
	}

	.drawer_menu .drawer_nav li ul.second-level {
		display: none;
		position: relative;
		padding: 0;
		z-index: 1001;
	}

	.drawer_menu .drawer_nav li ul.second-level li a {
		padding-left: 40px;
        background-color: #ebf6f7;
	}

	.drawer_menu .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.drawer_menu.left .drawer_button {
		right: auto;
		left: 32px;
	}

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

	.drawer_menu.left .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.pc-hidden {
		text-align: center;
	}

	.touch-btn {
		color: #555;
		position: absolute;
		top: .25rem;
		right: 2%;
		display: block;
		z-index: 10;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
	}
}

/*  ウィジェットタイトル */
.drawer-title {
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #555;
	/* ドロワーメニュー内タイトルライン背景色 */
	color: #fff;
}