body{
  /* background-color: #81b1f3; */
  /* background-color: #7cb5e4; */
  background-color: #3cafec;
  margin: 0;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 16px;
  overscroll-behavior: none;
  /* overflow-y: hidden; */
}
body:not(.writing-vertical){
  width:100vw;
  /* overflow-x: hidden; */
}
.clicked{
  pointer-events: none;
}
.read-mode{
  -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
p,ul{
  margin:1em 0;
}
.text p{
  margin:0;
}
.writing-vertical p{
  margin:0 1em;
}
.bg-modal p{
  margin:1em 0;
}
.text{
  line-height: 1.8em;
}
input[type="checkbox" i] {
  margin:2px;
}
.label-check{
  font-size: 14px;
}
.Gothic{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.Mincho{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.Gothic .Mincho{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.copylight{
  margin-top: 20px;
  margin-left: 30px;
  opacity:0.7;
  font-size: 14px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.continent{
  width:760px;
  margin:0 auto;
}
.writing-vertical .continent{
  /* text-align: center; */
  /* position:absolute;
  top: 50%; */
  /* overflow-x: scroll; */
  position:relative;
  right:0;
  /* display: inline-block; */

  width:auto;
  height:90vh;
  min-height:500px;
  /*max-height: 500px; */
  /* overflow-y: scroll; */
  margin:5vh 0;
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .writing-vertical .continent{
    min-height:90vh;
  }
}

.title-color{
  /* color: white; */
  color:#fffffc;
}

.bottle-box{
  width:100px;
  height:60px;
  margin-left: 30px;
  overflow: hidden;
}
.top-link{
  padding: 0 20px;
  display:inline-block;
  -webkit-mask: no-repeat center;
  mask: no-repeat center;
  width:60px;
  height:60px;
  transform: rotate(-5deg);
  transition:0.2s;
  background-color: white;
}
.top-link,.b-link{
  color:inherit;
  text-decoration: none;
}
.bottle-box:hover >.top-link{
  opacity:0.4;
  transform: rotate(-100deg);
}
.b-link:hover{
  color:gray;
}

.title-box h1{
  font-size: 36px;
  margin: 24px 24px 24px 30px;
}
@media screen and (max-width: 479px) {
  .title-box h1{
    margin: 24px;
  }
}
.description{
  position: relative;
  padding: 0 10px;
  margin-top: 100px;
  text-align: center;
  /* font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
}
.context{
  margin: 100px 0;
}
h1{

}
h3{
  text-align: left;
  font-weight: normal;
  margin: 30px 0;
  line-height: 2.5em;
  font-size: 20px;
}
.g{
  font-size: 1.4em;

  /* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
}
/* .beach{
  color:#f6b483;
}
.inkblue{
  color:#003f8e;
}
.cobalt{
  color:#da536e;
}
.lemon{
  color:#6a1917;
}
.spring{
  color:#f0f6da;
}*/
.umi{
  color:#5f6527;

  -webkit-animation: 5s cubic-bezier(0.4, 0.12, 0.9, 0.95)  0s infinite alternate move_color;
          animation: 5s cubic-bezier(0.4, 0.12, 0.9, 0.95)  0s infinite alternate move_color;
}
@-webkit-keyframes move_color { from { color:#5f6527;  } to { color:#e0cd37; }  }
        @keyframes move_color { from { color:#5f6527;  } to { color:#e0cd37;  }  }
.button-od{
  font-size: 11px;
  height: 16px;
  padding: 1px 7px;
  margin: 0px;
  border-radius: 2px;
  border-style: solid;
  border-color:#999;
  box-sizing: content-box;
  background-color: #def;
  cursor: pointer;
  transition: 0.2s;
  line-height: 16px;
}
.button-od:hover{
  background-color: #ecf4ff;
  /* background-color: #8be; */
}
.button-od:active{
  background-color: #8be;
  /* color:#eef;  */
}
button:focus{
  outline: none;
}
h4{
  border-bottom: solid 1px black;
  margin: 30px 0px;
  font-size: 20px;
  padding-left:10px;
  font-weight: bold;
}
.writing-vertical h4{
  text-align: left;
  border-bottom:none;
  border-left: solid 1px black;
}
.container{
  /* background-color: #b7e7f9; */
  /* background-color: beige; */
  z-index: 1;
  position: relative;
  /* background-color: #faf9ec; */
  background-color: #fef9ee;
  padding: 50px 30px;
  border-radius: 160px 40px/ 40px 160px;
}
.writing-vertical .container{
  padding: 30px 50px;
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .container{
    padding:50px 10px;
  }
  .writing-vertical .container{
    padding:20px 50px;
  }
  .continent{
    width:95vw;
  }


}

.bottle{
  width:500px;
  transition-duration: 0.2s;
}
.bottle:hover{
  padding-left: 5px;
}
.list-bottles{
  width:650px;
  margin-left: 10px;
}

.b0{
  margin-left: 0;
}
.b1{
  margin-left: 6px;
}
.b2{
  margin-left: 20px;
}
.b3{
  margin-left: 50px;
}
.b4{
  margin-left: 70px;
}
.b5{
  margin-left: 80px;
}
.btn{
  border-radius: 3px;
  border: solid 1px #2b2b2b;
  /* padding:0 5px; */
  transition: 0.2s;
  cursor: pointer;
}
.btn:focus{
  outline: none;
}
.btn-create-box:hover>.pen-bg{
  transform:rotate(-8deg);

}

.pen-bg{
  transform-origin: 100% 100%;
  border-radius: 50px 0px 0px 50px/60% 0px 0px 40%;
  height:40px;
  width:160px;
  background-color: #bcf;
  /* border-color: #a3a3a2; */
  border:none;
  transition: 0.3s;
  margin-left: 6px;
  position:relative;
  display:inline-block;
  transform:rotate(-4deg);
  text-align: center;
}
.pen-fg{
  position: absolute;
  right:0;
  top:0;
  background-color: #333;
  transform-origin: 100% 100%;
  transition-duration:0.2s;
  border-radius: 50px 0px 0px 50px/60% 0px 0px 40%;
  height:40px;
  width:160px;
}
.btn-create-box:hover >.pen-bg >.pen-fg{
  width:0;
  border-radius: 0px 0px 0px 0px/0% 0px 0px 0%;
}
.pen-bg:after{
  position:absolute;
  left:97%;
  top:0;
  height:100%;
  width:60px;
  background-color:#fff;
  transition: background-color 0.2s;
  content:"";
  z-index:1;
  border-radius:0 5px 5px 0;
}
.btn-create-box:hover >.pen-bg:after{
  background-color:#333;
}
.btn-create{
  background-color: transparent;
  display: inline-block;
  border: none;
  font-size:18px;
  padding: 6.5px 0px 6.5px 40px;
  text-decoration: none;
  color: white;
  position: relative;
  z-index: 3;
}
.btn-create-box:hover >.pen-bg .btn-create{
  color:#333;
}
.btn-create-box{
  text-align: left;
  height: 60px;
  margin-right: 50px;
  margin-left: 450px;
}
footer{
  min-height: 50px;
}


/* formの色々 */

#form-bottom{
  position:fixed;
  width:400px;
  height:260px;
  right:10px;
  bottom:-1px;
  border:solid 1px #aaa;
  background-color:white;
  z-index:3;
  transition-duration: 0.3s;
}
@media screen and (max-width: 479px){
  img{
    max-width: calc(95vw - 50px);
  }
  .list-bottles{
    width:calc(95vw - 30px);
  }
  .bottle{
    width:calc(95vw - 110px);
  }
  #form-bottom{
    width:80vw;
  }
}
.form-top{
  top:-1px;
}

#form-left{
  font-size: 0;
  position:fixed;
  overflow-y: hidden;
  overflow-x: visible;
  width:270px;
  left:0px;
  top:0px;
  height:100vh;
  z-index:5;

}
#form-left-box{
  font-size: 14px;
  /* position: relative; */
  display: inline-block;
  overflow-x: hidden;
  overflow-y: scroll;
  width:230px;
  border-right:solid 1px #aaa;
  background-color:white;
  vertical-align: top;
  height: 100%;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
     scrollbar-width: none;
}
#form-left-box::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }
#form-left-box p{
  margin 14px 0 10px 0;
}
#form-left.cached{
  left:-231px;
}
#form-bottom.cached{
  bottom:-238px;
}
.form-top.cached{
  top:-238px;
}

#form-left,#form-bottom{
  transition-duration: 0.4s;
}
#btn-cache-left{
  font-size: 12px;
  padding:4px 4px 6px 6px;
  /* width:20px; */
  margin-left: 0px;
  margin-top:20px;
  display: inline-block;
  background-color: white;
  border-left:none;
  border-color:#aaa;
  border-radius: 0;
  color:black;
  vertical-align: top;
}
.ch{
  padding:5px;
  border: solid 1px #2b2b2b;
  background-color: #222;
  font-size: 13px;
  color:white;
  transition-duration: 0.2s;
}
.ch:not(.ched):hover{
  cursor: pointer;
  opacity: 0.7
}
.chs{
  margin:10px;
  font-size: 0;
}
.ch.ched{
  background-color: white;
  color:#666;
  /* border-color: #eee; */
}
.ch-gochic{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border-left: none;
}
.ch-mincho{
  border-right: none;
}
#pass_visibility-input-box{
  /* display: none; */
  opacity: 0;
  transition: 0.2s;
}
#pass_visibility-input-box.open{
  /* display: block; */
  opacity: 1;
}
#password-input-box{
  /* display: none; */
  opacity: 0;
  transition: 0.2s;
}
#password-input-box.open{
  /* display: block; */
  opacity: 1;
}
.cha-input{
  width:80px;
  margin:0 0 0 5px;
  padding: 1px;
  font-size: 11px;
  border: solid 1px #aaa;

}
.cha-input:focus{
  outline: none;
  border-color: #f5f5f5;
  background-color: #f5f5f5;
}
#title-input{
  width:180px;
}
.partition{
  padding: 0px 5px;
  margin: 16px 8px 10px 8px;
}
.partition:not(.last){
  border-bottom:solid 1px #aaa;
}

.partition-color label{
  display: inline-block;
  width:5em;
}


/* 吹き出し */
#btn-color-description{
  font-size: 0.8em;
  color:#333;
}
#color-description{
  position: relative;
}
.arrow_box {
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;
  height: 80px;
  display: none;
  position: absolute;
  top:-135px;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 2px;
  /* background: #eef3c3; */
  background:#e7e9e5;
  color: #333;
}

.arrow_box:after {
  position: absolute;
  top: 100%;
  left: 20%;
  width: 0;
  height: 0;
  margin-left: 0px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-top-color:#e7e9e5;
  border-width: 8px;
  pointer-events: none;
  content: " ";
}

/* form bottomのあれこれ */

#btn-cache-box{
  text-align: center;
  position:absolute;
  border-left:solid 1px #2b2b2b;
  width:50px;
  height: 24px;
  right:0;
  cursor:pointer;
}
.form-bottom #btn-cache-box{

  top:0;
  border-bottom:solid 1px #2b2b2b;
  content:"↑";
}
.head-form{
  height: 24px;
  overflow: hidden;
}
#btn-top-box{
  text-align: center;
  position:absolute;
  right:50px;
  width:50px;
  height:24px;
  border-left:solid 1px #2b2b2b;
  cursor:pointer;

}

.form-bottom #btn-top-box{
  top:0;
  border-bottom:solid 1px #2b2b2b;
}
.form-top #btn-cache-box{
  bottom:0;
  border-top:solid 1px #2b2b2b;
  border-bottom:transparent;
}
.form-top #btn-top-box{
  bottom:0;

  border-top:solid 1px #2b2b2b;
  border-bottom:transparent;
}
#text-input{
  border:solid 1px #2b2b2b;
  border-left:none;
  border-right:none;
  margin: 0;
  font-size: 14px;
  width:390px;
  height:200px;
  padding:5px;
  transition-duration:0.2s;
  resize: none;
}
@media screen and (max-width: 479px){
    #text-input{
      width:calc(80vw - 10px);
    }

}
#text-input:focus{
  outline: none;
  border-color: transparent;
}
#edit-form{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  writing-mode:horizontal-tb;
}
#edit-form p{
  margin:1em 0;
}
.btn-text:hover{
  opacity: 0.7;
  cursor: pointer;
}
h4{

}
.text{
  padding:20px;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;
}

.no-dispo{
  display: none !important;
}
#form-bottom label{
  margin:0 5px;
}
label, input[type='checkbox'] {
    cursor: pointer;
}
.btn-submit-box{
  position:absolute;
  border-right:solid 1px #2b2b2b;
  border-top:solid 1px #2b2b2b;
  display: inline-block;
  box-sizing: content-box;

  bottom:0px;
  left:0;
  height: 24px;
  font-size: 0;

}
.btn-submit-box >.btn{
  text-align: center;
  display: inline-block;
  font-size: 14px;
  padding:0 0 0 0;
  height:24px;

  vertical-align: top;

  width:50px;
  border-width: 1px;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color:black;
  box-sizing: border-box;

  border-left:none;
  border-bottom:none;
  border-top:none;






}
#btn-clear{
  border-right:solid 1px #2b2b2b;


}
#btn-submit{
  border-right:none;
  background-color: transparent;

}
#btn-submit:focus{
  outline:none;
  background-color: #f3f3f3;

}
.a_btn{
  display: inline-block;
  vertical-align: middle;
}
.btn-gry:active{
  background-color: #f3f3f3 !important;
}
.text-created_at{
  font-size:14px;
  margin-right: 30px;
}
.comment{
  /* border: solid 1px black; */
  border-left: solid 1px black;
  border-bottom: solid 1px black;
  margin:20px;
  padding: 20px;
  box-sizing: border-box;

}

#comment-input{
  margin: 16px 0;
  font-size: 16px;
  background-color: transparent;
  width:618px;
  height:1.8em;
  border:none;
  line-height: 1.8em;
  resize: none;
  /* color:black; */
}
 .label-comment{
  height:24px;
  margin:2px 0;
  display: inline-block;
}
#submit-comment-box{
  text-align: right;
  margin-right: 40px;
}

.writing-vertical #submit-comment-box{
  text-align: left;
  margin-right: 0px;
}

#author-comment-input{
  font-size: 16px;
  width:240px;
  display: inline-block;
  vertical-align: top;
  border-color: transparent;
  margin-right: auto;
  background-color: transparent;
}
.author-comment-box{
  text-align: left;
}
/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

  .writing-vertical #comment-input{

    position:absolute;
    margin:0;
    top:calc(100% - 22px);
    right:30px;
    bottom:-80px;
    width:calc(90vh - 152px);
    min-width: 348px;
    height:120px;

    -webkit-writing-mode: initial;
    writing-mode: initial;
    transform-origin: right top;
    transform:rotate(90deg);
    margin-right: 0px;
    overflow:scroll ;
    outline: none;
  }
  .writing-vertical .author-comment-box{
    position:absolute;
    top:auto;
    margin-top: 30px;
    right:200px;
    width:28px;
  }
  .writing-vertical #author-comment-input{
    position: relative;
    top: 250px;
    writing-mode: initial;
    transform-origin: right top;
    transform:rotate(90deg);
    margin-right: 0px;
    /* width:24;
    height:240px; */
  }
  .writing-vertical .label-comment{
    display: inline-block;
    width:24px;
    height: auto;
    margin:0 2px;
  }
}

/*safari*/
_::-webkit-full-page-media, _:future, :root body{
  /* position:relative; */
}
_::-webkit-full-page-media, _:future, :root .writing-vertical .continent{
  position:relative;
}
_::-webkit-full-page-media, _:future, :root .writing-vertical #comment-input-box{
 -webkit-writing-mode: initial;
 writing-mode: initial;
 /* overflow-x: visible; */
 width:200px;
 height: calc(90vh - 102px);
 min-height: 400px;
 /* font-size: 0; */
}
/*safari*/
 _::-webkit-full-page-media, _:future, :root .writing-vertical #comment-input{
  margin: 0 auto;
  position:relative;
  /* overflow-x: visible; */
  /* margin-top: 10px; */
  /* margin:10px; */
  width:160px;
  /* min-width: 348px; */
  display: block;
  /* height:calc(100% - 90px); */
  min-height: 258px;
  height:calc(90vh - 242px);

  /* -webkit-writing-mode: vertical-rl !important;
  writing-mode: vertical-rl !important; */
  /* transform:none; */
  /* margin-right: 0px; */
  overflow:scroll ;
  outline: none;
}
@-moz-document url-prefix() {

  .writing-vertical #comment-input{
    border-color:transparent;
    transform:none;
    position:relative;
    margin:0;
    top:0px;
    right:0px;
    bottom:0px;
    height:calc(90vh - 152px);
    min-height: 348px;
    min-width: 0;
    width:150px;
    /* border:solid 1px white; */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    margin-right: 0px;
    overflow:scroll ;
    outline: none;
  }

  .writing-vertical #author-comment-input{
    position:relative;
    right:20px;
    top:0px;
    writing-mode:vertical-rl;
    transform-origin: right top;
    transform:none;
    margin-right: 0px;
    width:24px;
    height:200px;
  }
  .writing-vertical .label-comment{
    position:relative;
    width:24px;
    height: auto;
    margin: 0 2px;
    top:0px;
    right:20px;
  }
  .writing-vertical #btn-submit-comment{
    padding:7px 4px;
    display: inline-block;
    border-style: solid;
    font-size: 16px;
    background-color: white;
    border-color: #aaa;
    box-sizing: content-box;
    vertical-align: top;
  }
}


/*スマホレスポンシブ*/
@media screen and (max-width: 479px) {
  .writing-vertical{
    height: 100vh;
    overflow-y: hidden;
  }
  .text{
    padding: 20px 10px;
  }
  .writing-vertical #comment-form{
    writing-mode:horizontal-tb;
  }
  #comment-input{
    /* color:pink; */
    width: calc(95vw - 102px);
  }
  .writing-vertical #comment-input{

   margin: 0 auto;
   position:relative;
   top:0;
   right:0;
   bottom:0;
   min-width: 0;
   transform: none;
   /* overflow-x: visible; */
   /* margin-top: 10px; */
   /* margin:10px; */
   width:160px;
   /* min-width: 348px; */
   display: block;
   /* height:calc(100% - 90px); */
   /* min-height: 258px; */
   height:calc(90vh - 200px);

   /* border:solid 1px white; */
   /* -webkit-writing-mode: vertical-rl !important;
   writing-mode: vertical-rl !important; */
   /* transform:none; */
   /* margin-right: 0px; */
   overflow:scroll ;
   outline: none;
 }
 .writing-vertical .author-comment-box{
   margin:0;
   position:relative;
   text-align: left;
   width:auto;
   top:auto;
   right:0;
 }
 #author-comment-input{
   font-size: 16px;
   width:calc(95vw - 182px);
   display: inline-block;
   vertical-align: top;
   border-color: transparent;
   margin-right: auto;
   background-color: transparent;
 }

 .writing-vertical #author-comment-input{
   position: relative;
   top:auto;
   bottom:auto;
   min-width: 0;
   transform: none;
   resize: none;
   text-align: left;
   /* writing-mode: initial !important; */
   /* overflow: hidden; */
   display: inline-block;
   /* vertical-align: none; */
   vertical-align: top;
   width:160px;
   height:24px;
   margin: 0px;
   /* margin-right: -143px; */
   /* transform-origin: left top; */
   /* transform: rotate(90deg); */
 }

 .writing-vertical .label-comment{
   position:relative;
   height: 24px;
   margin: 2px 0;
   right:0;
   width:auto;
   bottom:auto;
   top:auto;
   min-width: 0;
   transform: none;
   vertical-align: top;
   display: inline-block;
 }
 #submit-comment-box{
   margin:0;

 }
}

#comment-input:focus{

  outline: none;
}
.comment-input-box{
  border-top:solid 1px black;
  border-right:solid 1px black;
}
#comment-input-box{
  transition:background-color 0.2s;
  /* background-color: white; */

  font-size: 0;
  margin-top: 40px;
  margin-bottom: 30px;
  transition-duration:0.3s;
}
.writing-vertical #comment-input-box{
  position:relative;
  margin:20px 30px;
  width:260px;

  /* width:500px; */
  display: block;
}
.info-comment{
  margin-bottom: 0px;
}



_::-webkit-full-page-media, _:future, :root .writing-vertical #author-comment-input{
  resize: none;
  text-align: left;
  position:relative;
  /* writing-mode: initial !important; */
  /* overflow: hidden; */
  display: inline-block;
  /* vertical-align: none; */
  width:160px;
  height:1.2em;
  margin: 0px;
  /* margin-right: -143px; */
  /* transform-origin: left top; */
  /* transform: rotate(90deg); */

}

_::-webkit-full-page-media, _:future, :root .writing-vertical .label-comment{
  position:relative;
  display: inline-block;
}
#btn-submit-comment{
  padding:2px 7px;
  display: inline-block;
  border-style: solid;
  font-size: 16px;
  background-color: white;
  border-color: #aaa;
  box-sizing: content-box;
  vertical-align: top;
}
.writing-vertical #btn-submit-comment{
  position:absolute;
  bottom:20px;
  left:30px;

}
#btn-submit-comment:hover{
  color:#888;

}
#btn-submit-comment:focus{
  outline: none;
  background-color: #f5f5f5;

}

.label-comment{
  font-size: 16px;
  color:black;
}


.text-right{
  text-align: right;
}
.italic{
  font-style: italic;
}
.oblique{
  font-style: oblique;
}
.style-normal{
  font-style: normal;
}
.bold{
  font-weight: bold;
}
.g01{
  font-size: 0.1em;
}
.g02{
  font-size: 0.2em;
}
.g03{
  font-size: 0.3em;
}
.g04{
  font-size: 0.4em;
}
.g05{
  font-size: 0.5em;
}
.g06{
  font-size: 0.6em;
}
.g07{
  font-size: 0.7em;
}
.g08{
  font-size: 0.8em;
}
.g09{
  font-size: 0.9em;
}
.g10{
  font-size: 1.0em;
}
.g11{
  font-size: 1.1em;
}
.g12{
  font-size: 1.2em;
}
.g13{
  font-size: 1.3em;
}
.g14{
  font-size: 1.4em;
}
.g15{
  font-size: 1.5em;
}
.g16{
  font-size: 1.6em;
}
.g17{
  font-size: 1.7em;
}
.g18{
  font-size: 1.8em;
}
.g19{
  font-size: 1.9em;
}
.g20{
  font-size: 2.0em;
}
.g21{
  font-size: 2.1em;
}
.g22{
  font-size: 2.2em;
}
.g23{
  font-size: 2.3em;
}
.g24{
  font-size: 2.4em;
}
.g25{
  font-size: 2.5em;
}
.g26{
  font-size: 2.6em;
}
.g27{
  font-size: 2.7em;
}
.g28{
  font-size: 2.8em;
}
.g29{
  font-size: 2.9em;
}
.g1{
  font-size: 1em;
}
.g2{
  font-size: 2em;
}
.g3{
  font-size: 3em;
}
.g4{
  font-size: 4em;
}
.g5{
  font-size: 5em;
}
.g6{
  font-size: 6em;
}
.g7{
  font-size: 7em;
}
.g8{
  font-size: 8em;
}
.g9{
  font-size: 9em;
}


.r1{
  transform: rotate(10deg);
  display:inline-block;
}
.r2{
  transform: rotate(20deg);
  display:inline-block;
}
.r3{
  transform: rotate(30deg);
  display:inline-block;
}
.r4{
  transform: rotate(40deg);
  display:inline-block;
}
.r5{
  transform: rotate(50deg);
  display:inline-block;
}
.r6{
  transform: rotate(60deg);
  display:inline-block;
}
.r7{
  transform: rotate(70deg);
  display:inline-block;
}
.r8{
  transform: rotate(80deg);
  display:inline-block;
}
.r9{
  transform: rotate(90deg);
  display:inline-block;
}

.r10{
  transform: rotate(100deg);
  display:inline-block;
}
.r11{
  transform: rotate(110deg);
  display:inline-block;
}
.r12{
  transform: rotate(120deg);
  display:inline-block;
}
.r13{
  transform: rotate(130deg);
  display:inline-block;
}
.r14{
  transform: rotate(140deg);
  display:inline-block;
}
.r15{
  transform: rotate(150deg);
  display:inline-block;
}
.r16{
  transform: rotate(160deg);
  display:inline-block;
}
.r17{
  transform: rotate(170deg);
  display:inline-block;
}

.r18{
  transform: rotate(180deg);
  display:inline-block;
}
.l1{
  transform: rotate(-10deg);
  display:inline-block;
}
.l2{
  transform: rotate(-20deg);
  display:inline-block;
}
.l3{
  transform: rotate(-30deg);
  display:inline-block;
}
.l4{
  transform: rotate(-40deg);
  display:inline-block;
}

.l5{
  transform: rotate(-50deg);
  display:inline-block;
}
.l6{
  transform: rotate(-60deg);
  display:inline-block;
}
.l7{
  transform: rotate(-70deg);
  display:inline-block;
}
.l8{
  transform: rotate(-80deg);
  display:inline-block;
}
.l9{
  transform: rotate(-90deg);
  display:inline-block;
}
.l10{
  transform: rotate(-100deg);
  display:inline-block;
}
.l11{
  transform: rotate(-110deg);
  display:inline-block;
}
.l12{
  transform: rotate(-120deg);
  display:inline-block;
}
.l13{
  transform: rotate(-130deg);
  display:inline-block;
}
.l14{
  transform: rotate(-140deg);
  display:inline-block;
}
.l15{
  transform: rotate(-150deg);
  display:inline-block;
}
.l16{
  transform: rotate(-160deg);
  display:inline-block;
}
.l17{
  transform: rotate(-170deg);
  display:inline-block;
}
.l18{
  transform: rotate(-180deg);
  display:inline-block;
}

.errors-box{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin:30px 20px;
  padding:10px 20px;;
  background-color: #ffffff;
  border:solid 2px #533;
  border-radius: 2px;
  color:#700;
}
.errors-box>ul{
  padding-left: 10px;
  list-style: none;
}
.errors-box>ul>li:before{
  content:"・"
}
.stored-header{
  overflow: hidden;
  border-bottom: 1px solid #aaa;
  background-color:white;
  color: black;
  padding: 10px 0;
}
.stored-p-box{
  width:700px;
  margin:0 auto;
}
.writing-vertical .stored-header{
  border-bottom: none;
  border-left: 1px solid #aaa;
  padding:  0 10px;
}
.writing-vertical .stored-p-box{
  width:auto;
  margin:auto 0;
  height: 580px;
}
/* .writing-vertical .stored-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index: 5;
}
.writing-vertical .stored-p-box{

  position:relative;
  writing-mode:horizontal-tb;
  width:700px;
  margin:0 auto;
  /* height: 580px; */
} */
.stored-p{
  margin-top: 5px;
  margin-bottom: 5px;
}
.page-item{
  display: inline;
  margin-right: 1em;
}
.page-item:not(.active):not(.disabled) .page-link{
  color:#555;
  text-decoration: none;
}
.page-item:not(.active):not(.disabled) .page-link:hover{
  color:#ccc;
}
.page-item.active .page-link{
  color:black;
}
.page-item.disabled .page-link{
  color:black;
}
.text-link{
  color:inherit;
  text-decoration-line: underline;
  /* text-decoration-skip: edges; */
  transition:opacity 0.1s;
  cursor: pointer;

}
.nama-link{
  color:#3434cc;
}
.text-link:hover{
  opacity:0.6;
}
.bg-modal{
  writing-mode:horizontal-tb;
  position: fixed;
  top:0;left:0; right:0;left:0;
  width: 100vw;
  height: 100vh;
  background-color:rgba(0, 0, 0, 0.5);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.modal{
  width:500px;
  max-width: 80vw;
  min-height: 150px;
  max-height: 80vh;
  padding: 30px 20px;
  border-radius: 60px/40px;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: #fdf4e9;
  overflow-y: scroll;
}
.btn12{
  text-align: right;
  font-size: 0;

}
.btnm{
  font-family: inherit;
  border:solid 1px black;
  border-radius: 4px;
  padding: 2px 0;
  margin: 4px;
  width:120px;
  font-size: 18px;
}
.btn1{
  background-color: #4344a3;
  border-color: #4344a3;
  color:#fee4e3;
}
.btnD{
  background-color: #b34443;
  border-color: #b34443;
  color:#eee4e3;
}

.btn2{
  background-color: gray;
  border-color: gray;
  color:white;
}
.btnm:hover{
  background-color: white;
  color:#333;
}
.btnm:focus{
  outline: none;
}
/* .index-deco-wave{
  position: absolute;
  top:100%;
  height:50px;
  width:700px;

  border-top: solid 1px white;
  border-bottom: solid 1px white;
  transform: rotate(-90deg);

  transform-origin:left top;

}
.wave-box{
  position: fixed;
  left:20px;
  top:0;
  width:52px;
  height:700px;
  overflow: hidden;
  z-index: -1;
} */
.about-box{
  position: absolute;
  left:-56px;
  top:30px;
  width:24px;
  color:#dde;
  border:solid 1px black;
  background-color: black;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  padding:0 5px;
  /* z-index: -1; */
}
.about-box:hover{
  background-color: white;
  border-color: gray;
  color :#3e4239;
}
/* .about-box-fil{

  position: absolute;
  left:-20px;
  bottom:150px;
  height:500px;
  width:20px;
  border-left: solid 1px black;
} */
.text-VR{
  position: absolute;
  right:0;
  top:0;
}
.kajo{
  text-align: left;
  list-style-type: none;
  margin: 20px 0;
  margin-left: 20px;
  padding-left: 0;
}
.description-area{
  position:relative;
  width:100%;
  min-height:100px;
}
.about-text{
  font-size: 18px;
  line-height: 2;
  margin-left:-20px;
  width:0px;
  padding: 10px 20px;
  background-color: #dfdfdf;
  max-height: 400px;
  overflow-y:scroll;
  text-align: left;
  color:transparent;
  display: none;
  transition-duration:  0.2s;
}
@keyframes open {
  from { width: 0; }
  to   { width:100%; }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/

  .about-box{
    top:10px;
    left:-30px;
    z-index:20;
  }
  .about-text{
    margin-left: 5px;
    padding:10px;
    z-index:10;
  }
  @keyframes open {
    from { width: 0; }
    to   { width:calc(95vw - 60px); }
  }
  .btn-create-box{
    margin-left:20vw;
    /* margin-right:; */
  }
}

.about-text.dispo{
  display:block;
  animation: 0.2s ease forwards open;
  /* width:700px; */
}
.black{
  color:black;
}
.howToWrite{
  background-color: #333;
}
.howToWrite .container{
  background-color: #f2f2f2;
}
.howToWrite .title-color{
  color:#f2f2f2;
}
.howToWrite p{
  line-height: 2.2em;
  margin-left:1em;
  margin-right:1em;
}

.weed-c{
  color:#f73;
  /* font-size: 1.5em; */
}
.uL{
  text-decoration: underline;
}
.howToWrite .subText{
   margin-left:26px;
   margin-right:26px;
   margin-bottom:50px;
   padding: 4px 10px;
   /* border:solid 4px #ccc; */
   box-sizing: border-box;
   background-color: #d0d0d0;
   transition: 0.2s;
}
@media screen and (max-width: 479px) {
  .howToWrite p{
    margin-left:0.5em;
    margin-right:0.5em;
  }
  .howToWrite .subText{
     margin-left:0.75em;
     margin-right:0.75em;
     margin-bottom:30px;
     padding: 4px 10px;
     /* border:solid 4px #ccc; */
     box-sizing: border-box;
     background-color: #d0d0d0;
     transition: 0.2s;
  }
}
 .howToWrite .subText:not(.col-try-zone):hover{
   background-color: #ddd;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
     transform: translateY(-0.1875em);
}
.howToWriteColor .subText:hover{
    box-shadow: 0 2px 4px 0 rgba(100,100, 100, 0.5);
}
.howToWrite .article{
  margin-bottom:60px;
}
.red{
  color:red;
}
.orange{
  color:orange;
}
.blue{
  color:#00f;
}
.green{
  color:green;
}
.reda{
  color:#ff8080;
}
.greena{
  color:#80ff80;
}
.bluea{
  color:#8080ff;
}
.vin{
  color:#65318e;
}
.vin-blanc{
  color:#fff;
}
.lH3{
  line-height: 3em !important;

}
.lH12{
  line-height: 1.2em !important;
}
.howToWriteColor{
  background-color: #f45;
}
.howToWriteColor .container{
  background-color: #333;
}
.howToWriteColor .text{
  color: #f5f5f5;
}
.howToWriteColor .subText{
  color: #000;
}

.howToWrite .title-color{
  color:#f2f2f2;
}
img{
  display: block;
  margin:0 auto;
}
.howToWriteColor .important{
  color:orange;
  font-weight: bold;
}
.col-box{
  width:200px;
  height:50px;
  margin:0;
  margin-left: 26px;
  border:solid 2px #d0d0d0;
}
.col-ex{
  background-color:#d10403;
}
.col-ex2{
  background-color:#e012e3;
}
.col-try{
   margin-left:26px;
   margin-right:26px;
   margin-bottom:50px;
   height:200px;
   padding: 4px 4px;
   /* border:solid 4px #ccc; */
   box-sizing: border-box;
   background-color: #222;
   position:relative;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   display:flex;
   border:solid 1px #c8c8c8;
}


#col-try-input{
  background-color: inherit;
  font-size: 50px;
  height: 100%;
  width:100%;
  text-align: center;
  font-family: inherit;
  color:transparent;
  border:none;
}
#col-try-input:focus{
  color:black;
}
@media screen and (max-width: 479px){
  .col-try{
    height:150px;
  }
}
.caution-color{
  color:#ec6464;
}
.nofg{
  padding:20px;
}
.writing-vertical{
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
}
.fil-load-backup{
  position:relative;
}
.backups-list-box{
  box-sizing: border-box;
  font-size: 14px;
  position:absolute;
  top:100%;
  background-color: #fff;
  border-radius: 1px;
  color: #222;
  left:0px;
  width:100%;
  height:0;
  overflow-y: scroll;
  overflow-x: visible;
  z-index: 10;
  border:solid 1px transparent;
  transition:border-color ease 0.3s,
              height ease 0.3s;
}
.backups-list-box.open{
  border-color:#aaa;
  height: auto;
  max-height:100px;
}
.backups-list{
  margin: 0;
  text-align: center;
}
.backup-li{
  /* margin-left: 5px; */
  border-bottom:solid 1px #aaa;
}
.backup-li:last-child{
  border-bottom:none;
}
.message-area{
  writing-mode:horizontal-tb;
  pointer-events: none;
  position: fixed;
  z-index: 10;
  top:0;
  right:30px;
  width:300px;
  height:300px;
}
.message-box{
  width:288px;
  margin: 5px 0;
  padding:0px 5px;
  color:black;
  background-color: #fefefe;
  border:solid 1px #ccc;
  border-radius: 3px;
  -webkit-animation: 0.3s ease 0s 1 forwards move_in;
          animation: 0.3s ease 0s 1 forwards move_in;

  /* opacity: 0; */
  transition: opacity 0.3s;
}
.message-box p{
  margin:5px 0;
}
.message-box.move_out{
  -webkit-animation: 0.3s ease 0s 1 forwards move_out;
          animation: 0.3s ease 0s 1 forwards move_out;
  opacity: 0;
}

@-webkit-keyframes move_in { from { margin-left: 50px; } to { margin-left: 0; }  }
        @keyframes move_in { from { margin-left: 50px; } to { margin-left: 0; }  }
@-webkit-keyframes move_out { from { margin-left: 0; } to { margin-left: 50px; }  }
        @keyframes move_out { from { margin-left: 0; } to { margin-left: 50px; }  }
.demo-modal{
  width:850px;
  max-width: 90vw;
  /* min-height: 700px; */
  height: auto;
  max-height: 92vh;
  padding: 10px 10px;
  border-radius: 2px;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: #fdfdfd;
  /* overflow: scroll; */
}
.iframe-box{
  width:100%;
  height:calc(92vh - 28px);
  max-height: 560px;
  border-radius: 2px;
  border: solid 1px #aaa;
  max-width:850px;
  overflow: scroll;
}
.index-bg-modal{
  background-color:rgba(250, 200, 130, 0.15);
}
#demo{
  border: none;
  vertical-align: bottom;
  width:850px;
  height:560px;
}
#demo-close{
  color:#25a;
}
#demo-close:hover{
  color:#eee;
}
.demo-open{
  color:#fe0667;
  /* color:#fcfcfc; */
  transition:color 0.2s;
}
.demo-open:hover{
  color:#fcfcfc;
  /* color:#fe0667; */
  opacity: 1;
}
.hidden-demo-open{
  font-size:120px;
  transform-origin: left;
  position: fixed;
  bottom:260px;
  z-index: 0;
  left:calc(50% + 418px);
  transform: rotate(90deg);
  font-family:avenir,gisha,didot, futura, verdana;
}
.hidden-demo-open .demo-open{
  text-decoration: none;
}
.hidden-demo-open>p{
  margin: 0;
  -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media screen and (max-width: 479px) {
  .demo-open{
    display: none;
  }
}

.demo-modal .tab{
  margin:2px 10px;
  display: inline-block;

}
.tab-close{
  margin-right: 10px;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 12px;
  /* text-align: right; */
}

/* .no-dispo .demo-modal{
  width:0;
  height: 0;
  opacity: 0;

} */
.select-box{
  width:80px;
  margin-left:5px;
  border: solid 1px #aaa;
  display: inline-block;
  /* height: 17px; */
}
.container_style0{
  border-radius: 160px 40px/ 40px 160px;
}
.container_style1{
  border-radius: 0;
}
select{

  width: 100%;
  border:none;
  border-radius: 0;
  font-size: 11px;
  background-color: inherit;
}
option{
  border-radius: 0;
}
select:focus{
  outline: none;
}
.bottle-search-area>*{
  vertical-align: middle;

}