@charset "UTF-8";
html, body {
  font-family: 'M PLUS 1 Code', monospace, 'Osaka-Mono','MS Gothic', 'ＭＳ ゴシック';
  -webkit-font-smoothing: active;
  -moz-osx-font-smoothing: active;
  font-smooth: active;
  color: #000;
}

body {
  line-height: 24px;
  font-size: 14px;
  padding: 0;
  margin: 0;
  text-align: center;
}
body.bgA {
  background-color: #f4f1ea;
}

.container {
  text-align: center;
}

header {
  text-align: center;
  padding-top: 30px;
}
@media (max-width: 740px) {
  header {
    padding-top: 50px;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

#logo {
  margin-left: auto;
  margin-right: auto;
  /*
    通常表示: #logo-3d と同じ container 幅 (765px max)。
    SVG は entoro-logo.scss 側で 70.6% 幅に絞られるので、見た目のロゴ本体は
    以前と同じ 540px サイズ。container は粒子版と同じだけ余白を持つ。
  */
  width: min(100%, 765px);
}
#logo h1 {
  display: none;
}
@media (max-width: 740px) {
  #logo {
    width: calc(100% - 20px);
  }
}

/*
  パーティクル霧散ロゴ (#logo-3d) — #logo と同じレスポンシブ挙動。
  ロゴ本体が canvas の約 70.6% しか占めない (残りは粒子拡散用の余白) ので、
  コンテナ幅を 540 / 0.706 ≈ 765px に広げることで、内部のロゴ部分が
  #logo (540px) と同じ実寸で表示される。
*/
#logo-3d {
  margin-left: auto;
  margin-right: auto;
  width: min(100%, 765px);
}
@media (max-width: 740px) {
  #logo-3d {
    width: calc(100% - 20px);
  }
}

#body {
  transition: all 0.3s;
  padding: 0 0 0 0;
  margin: 0;
  text-align: center;
  	/*
  	  記事内ナビゲーション (.section_nav)
  	  -------------------------------------------------------------
  	  本文 <section> の左隣に position: fixed で配置。スクロールしても
  	  画面上部に貼り付いたまま見える目次。
  
  	  本文 section は max-width: 540px / margin: auto で中央配置。
  	  viewport 中心から「section の半分(270px) + gap(30px) + nav幅(200px) = 500px」
  	  ぶん左に nav の左端を置けば、ちょうど section の左隣に並ぶ。
  
  	  サイドメニューが開いた状態 (#body.active) では本文が右に110pxずれるため、
  	  TOC も同じだけ右にスライドさせる。transition で滑らかに追従。
  
  	  画面が狭い (≦ 1100px) と本文の左に置く余裕がないので、本文先頭に
  	  通常のブロックとして表示するフォールバック動作。
  	*/
  /* サイドメニュー展開時は本文中心が55pxずれるので nav も同じだけシフト */
}
#body.active {
  padding: 0 0 0 110px;
}
#body.contentA {
  padding-top: 50px;
  padding-bottom: 150px;
}
#body.contentA header h1 {
  margin-bottom: 70px;
}
#body.contentA section {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
#body.contentA h2::before, #body.contentA h3::before, #body.contentA h4::before, #body.contentA h5::before, #body.contentA h6::before {
  content: "#";
  /* 表示したい文字（スペースを入れると綺麗です） */
  margin-right: 0.5em;
  /* テキストとの距離を調整 */
}
#body.contentA h3::before {
  content: "##";
}
#body.contentA h4::before {
  content: "###";
}
#body.contentA h5::before {
  content: "####";
}
#body.contentA h6::before {
  content: "#####";
}
#body.contentA ul {
  list-style-type: "* ";
  margin: 0;
  padding: 0 0 0 1em;
}
#body.contentA ul li {
  list-style-type: "* ";
}
#body h1, #body h2, #body h3, #body h4, #body h5, #body h6, #body ul, #body li, #body ol, #body p, #body dl, #body dt, #body dd, #body p {
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.9;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  font-weight: normal;
}
#body ul {
  margin: 0;
  padding: 0;
}
#body p.copyright {
  margin-top: -5px;
  margin-bottom: 30px;
  text-align: center;
}
#body section {
  width: auto;
  max-width: 540px;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#body section.numeric p {
  line-height: 21px;
}
#body .section_nav {
  position: fixed;
  top: 120px;
  left: calc(50% - 540px);
  width: 200px;
  z-index: 50;
  padding: 10px;
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
  transition: left 0.3s;
}
#body .section_nav ul {
  text-align: left;
  list-style-type: "* ";
  margin: 0;
  padding: 0 0 0 1em;
}
#body .section_nav ul li {
  font-size: 11px;
  list-style-type: "* ";
}
#body .section_nav a.selected {
  text-decoration: none;
  color: #333;
}
@media (max-width: 1100px) {
  #body .section_nav {
    position: static;
    width: auto;
    max-width: 540px;
    margin: 0 auto 30px;
    padding: 0 10px;
  }
}
#body.active .section_nav {
  left: calc(50% - 500px + 55px);
}
@media (max-width: 1100px) {
  #body.active .section_nav {
    left: auto;
  }
}
#body .header_menu {
  list-style-type: "/ ";
}
#body .header_menu li {
  list-style-type: "/ ";
}

/* ボタンの基本スタイル */
.menu-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  z-index: 1001;
  background: #fff;
  border: 1px dashed #333;
  cursor: pointer;
  /*
    有機的に揺らぐ「丸」— border-radius の 8値表記 (X半径4つ / Y半径4つ) を
    キーフレームで切り替えると、左上→右上→右下→左下の各角の曲率が独立に
    変化して amoeba のような形状になる。完全な円 (50%/50%) を中心に
    各角を ±15% 程度ぶらすと自然なブヨブヨ感が出る。
  */
  border-radius: 10% 50% 70% 25% / 85% 65% 5% 70%;
  animation: menuBtnBlob 20s ease-in-out infinite;
}

@keyframes menuBtnBlob {
  0%, 100% {
    border-radius: 70% 30% 75% 20% / 25% 80% 20% 75%;
  }
  20% {
    border-radius: 25% 75% 30% 80% / 70% 25% 85% 30%;
  }
  40% {
    border-radius: 80% 20% 65% 30% / 35% 75% 25% 70%;
  }
  60% {
    border-radius: 20% 80% 25% 75% / 75% 30% 70% 25%;
  }
  80% {
    border-radius: 65% 35% 80% 20% / 30% 70% 35% 65%;
  }
}
.link {
  color: #0000EE;
  cursor: pointer;
  border-bottom: 1px solid #0000EE;
}
.link:link {
  color: #0000EE;
}
.link:visited {
  color: #551A8B;
}
.link:active {
  color: #FF0000;
}

a:link {
  color: #0000EE;
}
a:visited {
  color: #551A8B;
}
a:active {
  color: #FF0000;
}

#side_l {
  transition: all 0.3s;
  width: 0px;
  background-color: #fff;
  border-right: 1px solid #000000;
  position: fixed;
  z-index: 10001;
  left: 0;
  top: 0;
  /* 画面の一番上に張り付く */
  height: 100vh;
  /* 高さを画面いっぱいにする */
  overflow: hidden;
  /* サイドバーが長い場合に内部スクロール可能にする */
  /* 中の 3本線 */
}
#side_l h1, #side_l h2, #side_l h3, #side_l h4, #side_l h5, #side_l h6, #side_l p {
  font-size: 12px;
  font-weight: normal;
}
#side_l ul {
  margin: 100px 0 0 15px;
  padding: 10px;
  list-style-type: "* ";
  text-align: left;
  display: block;
}
#side_l ul li {
  font-size: 12px;
  transition: all 0.3s;
  margin-bottom: 7px;
  filter: blur(20px);
}
#side_l ul li a {
  color: #9B9B9B;
}
#side_l ul li a.selected {
  color: #333 !important;
  text-decoration: none;
}
@media (max-width: 740px) {
  #side_l ul li {
    margin-bottom: 30px;
  }
}
#side_l p {
  line-height: 21px;
  display: block;
  filter: blur(20px);
}
#side_l .menu-btn span {
  display: block;
  position: absolute;
  left: 32px;
  width: 10px;
  height: 1px;
  background: #333;
  transition: all 0.3s;
}
#side_l .menu-btn span:nth-child(1) {
  top: 30px;
}
#side_l .menu-btn span:nth-child(2) {
  top: 36px;
}
#side_l .menu-btn span:nth-child(3) {
  top: 42px;
}
#side_l.active {
  width: 110px;
  /* active クラスがついたら「×」にする */
}
#side_l.active .menu-btn {
  transition: all 0.3s;
  background-color: #fff;
  border-color: #fff;
}
#side_l.active .menu-btn span:nth-child(1) {
  transform: translateY(6px) rotate(-45deg) scaleX(1.5);
  background-color: #000;
}
#side_l.active .menu-btn span:nth-child(2) {
  opacity: 0;
}
#side_l.active .menu-btn span:nth-child(3) {
  transform: translateY(-6px) rotate(45deg) scaleX(1.5);
  background-color: #000;
}
#side_l.active ul li {
  filter: blur(0px);
}
#side_l.active ul li a {
  color: revert;
}
#side_l.active p {
  filter: blur(0px);
}