html {
  font-size: 62.5%;
    font-family: 'Noto Sans JP', sans-serif;
}
body{
    font-size:1.6rem;
}
pre.prettyprint {
  max-width: 120rem;
  padding: 1rem;
  font-size: 1.4rem;
  background: #222;
  font-family: Source Han Code JP;
    max-height:50rem;
    overflow-y:auto;
}

.prettyprint ol {
  padding: 0.2rem 0 0.5rem 0.8rem; /* 間隔の調整（必要であれば） */
}

.prettyprint ol.linenums > li {
  list-style-type: decimal;
  border-left: solid 1px #ebb15e;
  padding-left: 0.5rem;
  margin-left: 3.5rem;
}
.prettyprint ol {
  white-space: pre-wrap; /* 折り返し  */
}
.smp__wrapper{
    margin-top:6rem;
}
.smp__block{
    position: relative;
}
.smp__box-button{
    width:10rem;
    background:#930002;
    left:1rem;
    top:0;
    position: absolute;
    font-size:.9rem;
    display: none;
    justify-content: center;
    align-items: center;
    color:#fff;
}
.js-show-button{
    height:100%;
    width:100%;
    padding:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.js-code-sub-add{
    height:3rem;
    width:3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.js-use-code-button.smp__box-button{
    display: flex;
}
.smp__box-button:hover{
    cursor:pointer;
    opacity:0.6;
}
.smp__box-button-subadd{
        background: #6B9400;
    color: #fff;
    bottom: -3rem;
    position: absolute;
    display: flex;
    
}
    .smp__switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  position: fixed;
  text-align: center;
  z-index: 99999;
  background: #333;
  color: #fff;
  padding: 1rem;
  font-size: 1.4rem;
  right: 0;
  top: 0;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.smp__switch.smp__switch--sub{
    left:0rem;
    background:#877000;
}
.smp__switch.smp__switch--sub-02{
    left:6rem;
    background:#53006e;
}
.smp__switch.smp__switch--sub-03{
    right:6rem;
    background:#00580C;
}

.smp__switch:hover {
  opacity: 0.8;
}

.smp__menu-panel {
  max-width: 30rem;
    width:100%;
  height: calc(100vh - 6rem);
  padding: 1rem;
  background: rgba(33, 33, 33, 0.98);
  position: fixed;
  top: 6rem;
  right: 0;
  display: none;
  color: #fff;
  font-size: 1.4rem;
  z-index: 9997;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  overflow-y:auto;
}
.smp__menu-panel--sub{
    left:0;
    right:auto;
    background:#877000;
    max-width:90rem;
    width:100%;
}
.smp__menu-panel--sub-02{
    right:auto;
    background:#53006e;
    max-width:90rem;
    width:100%;
    left:1rem;
}
.smp__menu-panel--sub-05{
    left:auto;
    background:#00580C;
    max-width:90rem;
    width:100%;
    right:1rem;
}
.smp__menu-panel.js-on {
  display: block;
}

.smp__ttl-area {
  padding: 1rem 1rem 1rem 12rem;
  background: #333;
  color: #fff;
}
.smp__ttl {
  font-size: 2rem;
  color: #ebb15e;
}
.smp__sub-ttl {
  font-size: 1.2rem;
  padding: 1rem 0;
}
.smp__code-area {
  padding: 5rem 0;
  background: #eee;
}

.smp__textarea {
  background: #eee;
  width: 100%;
  min-height: 5rem;
  padding: 1rem;
  color: #333;
}
.smp__button {
  text-align: center;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  color: #fff;
  width: 100%;
  font-size: 1.2rem;
  display: block;
  border: 0.1rem solid #fff;
}
.smp__button:hover{
    oapcity:0.8;
    cursor:pointer;
    background:#555;
}
.smp__button--half{
    width:45%;
    margin-right:1.5%;
    margin-left:1.5%;
    display: inline-block;
}
.smp__menu-ttl {
  font-size: 1.2rem;
  margin: 2rem 0 1rem;
}

.smp__menu-tag-area {
  display: flex;
  flex-wrap: wrap;
}
.smp__menu-tag {
  font-size: 1rem;
  display: block;
  margin: 0.5rem;
  border: #eee solid 0.1rem;
  padding: 0.5rem;
}
.smp__menu-tag:hover {
  opacity: 0.8;
}

.smp__log-area {
  font-size: 0.9rem;
}

.smp__menu-button-area{
    display: flex;
    flex-wrap: wrap;
}
.smp__menu-button{
    font-size:1.2rem;
    color:#fff;
    background:#666;
    border-radius:.5rem;
    padding:.5rem 2rem;
    margin:.5rem;
    cursor:pointer;
    user-select: none;
    line-height:1;
}
.smp__menu-input{
   background: #eee;
      width: 100%;
      padding: 1rem;
      color: #333; 
    margin:1rem 0;
}

.smp__menu-button.js-on{
    background:#986300;
    color:#fff;
}
body.js-on .smp__code-area,
body.js-on .smp__ttl-area,
body.js-on .smp__info-area,
.js-only-code .smp__wrapper>div>*{
    display: none;
}
.js-only-code .smp__wrapper .smp__code-area,
.js-only-code .smp__wrapper .smp__code-area pre{
    display: block !important;
}
.js-only-code .smp__wrapper .smp__code-area pre{
    max-height:none !important;
}
body.js-on .smp__box-button{
    display: flex;
}
body.js-on .smp__code-area.js-code-show,
body.js-on .smp__ttl-area.js-code-show,
body.js-on .smp__info-area.js-code-show
{
    display: block;
}

.smp__list-dir-link{
    margin-left:2rem;
}
.smp__list-dir-link{
    background:#951414;
}
.smp__list-dir-link:hover{
    opacity:0.8;
}
.smp__list-folder,
.smp__list-link{
    padding:1rem 1rem;
    font-size:1.4rem;
    display: inline-block;
}
.smp__list-area li ul{
    margin-left:6rem;
}
.smp__list-folder:hover,
.smp__list-link:hover{
    background:#8400af;
}
.smp__list-folder{
    
}
.smp__ttl-sublink{
 color:#fff;
    background:#6B9400;
    margin-left:2rem;
}
.smp__ttl-sublink:hover{
    opacity:0.6;
    cursor:pointer;
}
.smp__nav-area{
    font-size:1.2rem;
    display: flex;
    flex-wrap: wrap;
}
.smp__nav{
    display: block;
    padding:.5rem;
    margin:.5rem;
}
.smp__hisotry-area{
    max-height:30rem;
    overflow-y: auto;
    background:#900070;
}
.smp__hisotry-area li a{
    padding:.5rem;
    display:block;
}
.smp__hisotry-area li a:hover{
    color:#ccc;
}
.smp__info-area{
    background:#EEE;
    border-bottom:.2rem solid #888;
}
.smp__info-ttl{
    font-size:1.9rem;
    padding:1rem;
    font-weight:bold;
}
.smp__info-desc{
    padding:1rem;
    font-size:1.4rem;
}
.smp__info-link{
    display:flex;
}
.smp__info-link a{
    display: block;
    padding:.5rem;
    background:#FF8587;
    margin:1rem;
    font-size:1.4rem;
}
.smp__info-link a:hover{
    opacity:0.8;
}
.smp__disp-button{
    position: fixed;
    z-index: 9999;
    left:0;
    bottom:0;
    padding:.5rem;
    background:#EEE;
}
.smp__disp-button:hover{
    opacity:0.7;
    cursor:pointer;
}

/**/
.disp .smp__wrapper{
    margin-top:0;
}
.disp .smp__ttl-area,
.disp .smp__code-area,
.disp .smp__menu-area,
.disp .smp__disp-button{
    display:none;
}