@import url("font.css");

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font: inherit;}
body{line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #e53935;margin:1em 0;padding:0;}
input, select{vertical-align:middle;}

html {
}
body{
  font-family: 'Noto Sans Japanese', 'Source Sans Pro', 'Meiryo' ,'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
  font-size: 15pt;
  font-weight: 300;
  line-height: 1.75em;
  color: #888;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 400px) {
  body{
    font-size: 12pt;
  }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #393939;
    line-height: 1.5em;
  margin-bottom: 0.5em;
  word-wrap: break-word;
}

hr {
  margin: 0.5em 0;
}

em {
  font-style: oblique;
}
strong {
  font-weight: bold;
}
code {
  background-color: #ddd;
  color: #666;
}
blockquote {
  border-left: 5px solid #aaa;
  padding: 0.5em 0  0.2em 1em;
  margin: 1em 0;
}

p, table, ul, dl,ol {
  margin-bottom: 1em;
  word-wrap: break-word;
}

.text-link,
a {
  text-decoration: underline;
  color: #393939;
  cursor: pointer;
}
.text-link:hover,
a:hover {
  color:#D05933;
}

table, th, td {
  border: #888 1px solid;
}
td, th{
  padding: 0 0.5em;
}
th {
  font-weight: 600;
}

ul, ol {
  padding: 0 2em;
}
li {
}

dl{
  padding-left: 1em;
}
dt{
}
dd{
  padding-left: 2em;
  margin-bottom: 0.5em;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button{
  position: relative;
  display: inline-block;
  border-radius: 0.35em;
  color: #fafafa !important;
  text-decoration: none;
  padding: 0.75em 2.5em 0.75em 2.5em;
  background: #D0423F;
  border: 0;
  cursor: pointer;
  display:inline-block;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover{
  background: #e53935 !important;
}

form input[type="text"],
form input[type="search"],
form input[type="email"],
form input[type="password"],
form select,
textarea {
    position: relative;
    -webkit-appearance: none;
    display: block;
    border: 0;
    outline: 0;
    background: #fff;
    background: rgba(255, 255, 255, 0.75);
    width: 100%;
    border-radius: 0.35em;
    padding: 0.5em 1em 0.5em 1em;
    box-shadow: inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.05);
    border: solid 1px rgba(0, 0, 0, 0.15);
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    font-size: 16px;
    display:inline-block;
}

pre {
  padding: 0;
  font-size: 0.9em;
  line-height: 1.7em;
  color: #eee;
  background-color: #333 !important;
  margin: 0.5em;
  overflow: auto;
}
pre code {
  display: block;
  background-color: #333 !important;
  position: relative;
  width: 100%;
  overflow:auto;
  color: #fff;
  padding: 1em;
}

.clearfix {
    display: table;
    clear: both;
    content: '';
}
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

label {
  display:inline-block;
}

/* Grid System */

*, *:before, *:after {
    box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

/* (x * 100) / 12 */
/* desktop + sp */
.col1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.col2 {
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
}
.col3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col5 {
  flex: 0 0 41.6666%;
  max-width: 41.6666%;
}
.col6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.col8 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
.col9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.col11 {
  flex: 0 0 91.6666%;
  max-width: 91.6666%;
}
.col12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-right{
  flex: 0 0 100%;
  max-width: 100%;
  text-align: right;
}
.col-left{
  flex: 0 0 100%;
  max-width: 100%;
  text-align: left;
}

@media (min-width: 801px) {
  /* desktop(m) */
  .colm1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .colm2 {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }
  .colm3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .colm4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .colm5 {
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }
  .colm6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .colm7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .colm8 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }
  .colm9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .colm10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .colm11 {
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
  }
  .colm12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1025px) {
  /* desktop(m) */
  .cold1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .cold2 {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }
  .cold3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .cold4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .cold5 {
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }
  .cold6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .cold7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .cold8 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }
  .cols9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .cold10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .cold11 {
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
  }
  .cold12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.w100px {
  width:100px;
}
.w200px {
  width:200px;
}
.h100px {
  height:100px;
}
.h200px {
  height:200px;
}
.mw200px {
  max-width:200px;
}
.mw60 {
  max-width:60%;
}
.w100 {
  width:100%;
}

.fs05 {
  font-size:0.5em;
}
.fs06 {
  font-size:0.6em;
}
.fs07 {
  font-size:0.7em;
}
.fs08 {
  font-size:0.8em;
}
.fs09 {
  font-size:0.9em;
}
.fs11 {
  font-size:1.1em;
}
.fs12 {
  font-size:1.2em;
}
.fs13 {
  font-size:1.3em;
}
.fs14 {
  font-size:1.4em;
}
.fs15 {
  font-size:1.5em;
}
.fs16 {
  font-size:1.6em;
}
.fs17 {
  font-size:1.7em;
}
.fs18 {
  font-size:1.8em;
}
.fs19 {
  font-size:1.9em;
}
.fs20 {
  font-size:2em;
}

.mb02 {
  margin-bottom:0.2em;
}
.mb05 {
  margin-bottom:0.5em;
}
.mb08 {
  margin-bottom:0.8em;
}
.ml02 {
  margin-left:0.2em;
}
.ml05 {
  margin-left:0.5em;
}
.ml08 {
  margin-left:0.8em;
}
.pl0 {
  padding-left: 0;
}
.lh10 {
  line-height:1em;
}
.overflow-hidden{
  overflow:hidden;
}
.color999{
  color:#999;
}
.display-inline-block {
  display: inline-block;
}
.underline {
  text-decoration: underline;
}

.mcenter {
  margin:0 auto;
}


/* btm and form */


.btn, .btn-large,
.btn-flat {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; }

.btn.disabled, .disabled.btn-large,
.btn-floating.disabled,
.btn-large.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-large:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-flat:disabled,
.btn[disabled],
[disabled].btn-large,
.btn-floating[disabled],
.btn-large[disabled],
.btn-flat[disabled] {
  pointer-events: none;
  background-color: #DFDFDF !important;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default; }
  .btn.disabled:hover, .disabled.btn-large:hover,
  .btn-floating.disabled:hover,
  .btn-large.disabled:hover,
  .btn-flat.disabled:hover,
  .btn:disabled:hover,
  .btn-large:disabled:hover,
  .btn-floating:disabled:hover,
  .btn-large:disabled:hover,
  .btn-flat:disabled:hover,
  .btn[disabled]:hover,
  [disabled].btn-large:hover,
  .btn-floating[disabled]:hover,
  .btn-large[disabled]:hover,
  .btn-flat[disabled]:hover {
    background-color: #DFDFDF !important;
    color: #9F9F9F !important; }

.btn, .btn-large,
.btn-floating,
.btn-large,
.btn-flat {
  outline: 0; }
  .btn i, .btn-large i,
  .btn-floating i,
  .btn-large i,
  .btn-flat i {
    font-size: 1.3rem;
    line-height: inherit; }

.btn:focus, .btn-large:focus,
.btn-floating:focus {
  background-color: #1d7d74; }

.btn, .btn-large {
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  transition: .2s ease-out;
  cursor: pointer; }
  .btn:hover, .btn-large:hover {
    background-color: #2bbbad; }

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background-color: #26a69a;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle; }
  .btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    line-height: 40px; }
  .btn-floating:hover {
    background-color: #26a69a; }
  .btn-floating:before {
    border-radius: 0; }
  .btn-floating.btn-large {
    width: 56px;
    height: 56px; }
    .btn-floating.btn-large i {
      line-height: 56px; }

button.btn-floating {
  border: none; }

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998; }
  .fixed-action-btn.active ul {
    visibility: visible; }
  .fixed-action-btn.horizontal {
    padding: 0 0 0 15px; }
    .fixed-action-btn.horizontal ul {
      text-align: right;
      right: 64px;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      left: auto;
      width: 500px;
      /*width 100% only goes to width of button container */ }
      .fixed-action-btn.horizontal ul li {
        display: inline-block;
        margin: 15px 15px 0 0; }
  .fixed-action-btn.toolbar {
    padding: 0;
    height: 56px; }
    .fixed-action-btn.toolbar.active > a i {
      opacity: 0; }
    .fixed-action-btn.toolbar ul {
      display: flex;
      top: 0;
      bottom: 0; }
      .fixed-action-btn.toolbar ul li {
        flex: 1;
        display: inline-block;
        margin: 0;
        height: 100%;
        transition: none; }
        .fixed-action-btn.toolbar ul li a {
          display: block;
          overflow: hidden;
          position: relative;
          width: 100%;
          height: 100%;
          background-color: transparent;
          box-shadow: none;
          color: #fff;
          line-height: 56px;
          z-index: 1; }
          .fixed-action-btn.toolbar ul li a i {
            line-height: inherit; }
  .fixed-action-btn ul {
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    bottom: 64px;
    margin: 0;
    visibility: hidden; }
    .fixed-action-btn ul li {
      margin-bottom: 15px; }
    .fixed-action-btn ul a.btn-floating {
      opacity: 0; }
  .fixed-action-btn .fab-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 40px;
    height: 40px;
    background-color: #26a69a;
    border-radius: 50%;
    transform: scale(0); }

.btn-flat {
  box-shadow: none;
  background-color: transparent;
  color: #343434;
  cursor: pointer;
  transition: background-color .2s; }
  .btn-flat:focus, .btn-flat:active {
    background-color: transparent; }
  .btn-flat:focus, .btn-flat:hover {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: none; }
  .btn-flat:active {
    background-color: rgba(0, 0, 0, 0.2); }
  .btn-flat.disabled {
    background-color: transparent !important;
    color: #b3b3b3 !important;
    cursor: default; }

.btn-large {
  height: 54px;
  line-height: 54px; }
  .btn-large i {
    font-size: 1.6rem; }

.btn-block {
  display: block; }

select:focus {
  outline: 1px solid #FBE9E7; }

button:focus {
  outline: none;
  background-color: #D0423F; }
/*
label {
  font-size: 0.8rem;
  color: #9e9e9e; }
*/


/*date picker base*/
.picker {
 font-size:16px;
 text-align:left;
 line-height:1.2;
 color:#000000;
 position:absolute;
 z-index:10000;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.picker__input {
 cursor:default
}
.picker__input.picker__input--active {
 border-color:#0089ec
}
.picker__holder {
 width:100%;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch
}
/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */.picker__holder,.picker__frame {
 bottom:0;
 left:0;
 right:0;
 top:100%
}
.picker__holder {
 position:fixed;
 transition:background 0.15s ease-out, top 0s 0.15s;
 -webkit-backface-visibility:hidden
}
.picker__frame {
 position:absolute;
 margin:0 auto;
 min-width:256px;
 width:300px;
 max-height:350px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
 -moz-opacity:0;
 opacity:0;
 transition:all 0.15s ease-out
}
@media (min-height: 28.875em) {
 .picker__frame {
  overflow:visible;
  top:auto;
  bottom:-100%;
  max-height:80%
 }
}
@media (min-height: 40.125em) {
 .picker__frame {
  margin-bottom:7.5%
 }
}
.picker__wrap {
 display:table;
 width:100%;
 height:100%
}
@media (min-height: 28.875em) {
 .picker__wrap {
  display:block
 }
}
.picker__box {
 background:#ffffff;
 display:table-cell;
 vertical-align:middle
}
@media (min-height: 28.875em) {
 .picker__box {
  display:block;
  border:1px solid #777777;
  border-top-color:#898989;
  border-bottom-width:0;
  border-radius:5px 5px 0 0;
  box-shadow:0 12px 36px 16px rgba(0,0,0,0.24)
 }
}
.picker--opened .picker__holder {
 top:0;
 background:transparent;
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
 zoom:1;
 background:rgba(0,0,0,0.32);
 transition:background 0.15s ease-out
}
.picker--opened .picker__frame {
 top:0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity:1
}
@media (min-height: 35.875em) {
 .picker--opened .picker__frame {
  top:10%;
  bottom:auto
 }
}
.picker__input.picker__input--active {
 border-color:#E3F2FD
}
.picker__frame {
 margin:0 auto;
 max-width:325px
}
@media (min-height: 38.875em) {
 .picker--opened .picker__frame {
  top:10%;
  bottom:auto
 }
}
.picker__box {
 padding:0 1em
}
.picker__header {
 text-align:center;
 position:relative;
 margin-top:.75em
}
.picker__month,.picker__year {
 display:inline-block;
 margin-left:.25em;
 margin-right:.25em
}
.picker__select--month,.picker__select--year {
 height:2em;
 padding:0;
 margin-left:.25em;
 margin-right:.25em
}
.picker__select--month.browser-default {
 display:inline;
 background-color:#FFFFFF;
 width:40%
}
.picker__select--year.browser-default {
 display:inline;
 background-color:#FFFFFF;
 width:26%
}
.picker__select--month:focus,.picker__select--year:focus {
 border-color:rgba(0,0,0,0.05);
}
.picker__nav--prev,.picker__nav--next {
 position:absolute;
 padding:.5em 1.25em;
 width:1em;
 height:1em;
 box-sizing:content-box;
 top:-0.25em
}
.picker__nav--prev {
 left:-1em;
 padding-right:1.25em
}
.picker__nav--next {
 right:-1em;
 padding-left:1.25em
}
.picker__nav--disabled,.picker__nav--disabled:hover,.picker__nav--disabled:before,.picker__nav--disabled:before:hover {
 cursor:default;
 background:none;
 border-right-color:#f5f5f5;
 border-left-color:#f5f5f5
}
.picker__table {
 text-align:center;
 border-collapse:collapse;
 border-spacing:0;
 table-layout:fixed;
 font-size:1rem;
 width:100%;
 margin-top:.75em;
 margin-bottom:.5em;
 border-style: none;
}
.picker__table th,.picker__table td {
 text-align:center;
 border-style: none;
}
.picker__table td {
 margin:0;
 padding:0
}
.picker__weekday {
 width:14.285714286%;
 font-size:.75em;
 padding-bottom:.25em;
 color:#999999;
 font-weight:500
}
@media (min-height: 33.875em) {
 .picker__weekday {
  padding-bottom:.5em
 }
}
.picker__day--today {
 position:relative;
 color:#595959;
 letter-spacing:-.3;
 padding:.75rem 0;
 font-weight:400;
 border:1px solid transparent
}
.picker__day--disabled:before {
 border-top-color:#aaaaaa
}
.picker__day--infocus:hover {
 cursor:pointer;
 color:#000;
 font-weight:500
}
.picker__day--outfocus {
 display:none;
 padding:.75rem 0;
 color:#fff
}
.picker__day--outfocus:hover {
 cursor:pointer;
 color:#dddddd;
 font-weight:500
}
.picker__day--highlighted:hover,.picker--focused .picker__day--highlighted {
 cursor:pointer
}
.picker__day--selected,.picker__day--selected:hover,.picker--focused .picker__day--selected {
 border-radius:50%;
 -webkit-transform:scale(0.75);
 transform:scale(0.75);
 background:#0089ec;
 color:#ffffff
}
.picker__day--disabled,.picker__day--disabled:hover,.picker--focused .picker__day--disabled {
 background:#f5f5f5;
 border-color:#f5f5f5;
 color:#dddddd;
 cursor:default
}
.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover {
 background:#bbbbbb
}
.picker__footer {
 text-align:center;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-justify-content:space-between;
 -ms-flex-pack:justify;
 justify-content:space-between
}
.picker__button--today,.picker__button--clear,.picker__button--close {
 border:1px solid #ffffff;
 background:#ffffff;
 font-size:.8em;
 padding:.66em 0;
 font-weight:bold;
 width:33%;
 display:inline-block;
 vertical-align:bottom
}
.picker__button--today:hover,.picker__button--clear:hover,.picker__button--close:hover {
 cursor:pointer;
 color:#000000;
 background:#b1dcfb;
 border-bottom-color:#b1dcfb
}
.picker__button--today:focus,.picker__button--clear:focus,.picker__button--close:focus {
 background:#b1dcfb;
 border-color:rgba(0,0,0,0.05);
 outline:none
}
.picker__button--today:before,.picker__button--clear:before,.picker__button--close:before {
 position:relative;
 display:inline-block;
 height:0
}
.picker__button--today:before,.picker__button--clear:before {
 content:" ";
 margin-right:.45em
}
.picker__button--today:before {
 top:-0.05em;
 width:0;
 border-top:0.66em solid #0059bc;
 border-left:.66em solid transparent
}
.picker__button--clear:before {
 top:-0.25em;
 width:.66em;
 border-top:3px solid #ee2200
}
.picker__button--close:before {
 content:"\D7";
 top:-0.1em;
 vertical-align:top;
 font-size:1.1em;
 margin-right:.35em;
 color:#777777
}
.picker__button--today[disabled],.picker__button--today[disabled]:hover {
 background:#f5f5f5;
 border-color:#f5f5f5;
 color:#dddddd;
 cursor:default
}
.picker__button--today[disabled]:before {
 border-top-color:#aaaaaa
}
.picker__box {
 border-radius:2px;
 overflow:hidden
}
.picker__date-display {
 text-align:center;
 background-color:#26a69a;
 color:#fff;
 padding-bottom:15px;
 font-weight:300
}
.picker__nav--prev:hover,.picker__nav--next:hover {
 cursor:pointer;
 color:#000000;
 background:#FFCCBC;
}
.picker__weekday-display {
 background-color:#1f897f;
 padding:10px;
 font-weight:200;
 letter-spacing:.5;
 font-size:1rem;
 margin-bottom:15px
}
.picker__month-display {
 text-transform:uppercase;
 font-size:2rem
}
.picker__day-display {
 font-size:4.5rem;
 font-weight:400
}
.picker__year-display {
 font-size:1.8rem;
 color:rgba(255,255,255,0.4)
}
.picker__box {
 padding:0
}
.picker__calendar-container {
 padding:0 1rem
}
.picker__calendar-container thead {
 border:none
}
.picker__table {
 margin-top:0;
 margin-bottom:.5em
}
.picker__day--infocus {
 color:#595959;
 letter-spacing:-.3;
 padding:.75rem 0;
 font-weight:400;
 border:1px solid transparent
}
.picker__day.picker__day--today {
 color:#D05933;
}
.picker__day.picker__day--today.picker__day--selected {
 color:#fff
}
.picker__weekday {
 font-size:.9rem
}
.picker__day--selected,.picker__day--selected:hover,.picker--focused .picker__day--selected {
 border-radius:50%;
 -webkit-transform:scale(0.9);
 transform:scale(0.9);
 background-color:#26a69a;
 color:#ffffff
}
.picker__day--selected.picker__day--outfocus,.picker__day--selected:hover.picker__day--outfocus,.picker--focused .picker__day--selected.picker__day--outfocus {
 background-color:#a1ded8
}
.picker__footer {
 text-align:right;
 padding:5px 10px
}
.picker__close,.picker__today {
 font-size:1.1rem;
 padding:0 1rem;
 color:#26a69a
}
.picker__nav--prev:before,.picker__nav--next:before {
 content:" ";
 border-top:.5em solid transparent;
 border-bottom:.5em solid transparent;
 border-right:0.75em solid #676767;
 width:0;
 height:0;
 display:block;
 margin:0 auto
}
.picker__nav--next:before {
 border-right:0;
 border-left:0.75em solid #676767
}
button.picker__today:focus,button.picker__clear:focus,button.picker__close:focus {
 background-color:#FFCCBC;
}
.picker__list {
 list-style:none;
 padding:0.75em 0 4.2em;
 margin:0
}
.picker__list-item {
 border-bottom:1px solid #dddddd;
 border-top:1px solid #dddddd;
 margin-bottom:-1px;
 position:relative;
 background:#ffffff;
 padding:.75em 1.25em
}
@media (min-height: 46.75em) {
 .picker__list-item {
  padding:.5em 1em
 }
}
.picker__list-item:hover {
 cursor:pointer;
 color:#000000;
 background:#b1dcfb;
 border-color:#0089ec;
 z-index:10
}
.picker__list-item--highlighted {
 border-color:#0089ec;
 z-index:10
}
.picker__list-item--highlighted:hover,.picker--focused .picker__list-item--highlighted {
 cursor:pointer;
 color:#000000;
 background:#b1dcfb
}
.picker__list-item--selected,.picker__list-item--selected:hover,.picker--focused .picker__list-item--selected {
 background:#0089ec;
 color:#ffffff;
 z-index:10
}
.picker__list-item--disabled,.picker__list-item--disabled:hover,.picker--focused .picker__list-item--disabled {
 background:#f5f5f5;
 border-color:#f5f5f5;
 color:#dddddd;
 cursor:default;
 border-color:#dddddd;
 z-index:auto
}
.picker--time .picker__button--clear {
 display:block;
 width:80%;
 margin:1em auto 0;
 padding:1em 1.25em;
 background:none;
 border:0;
 font-weight:500;
 font-size:.67em;
 text-align:center;
 text-transform:uppercase;
 color:#666
}
.picker--time .picker__button--clear:hover,.picker--time .picker__button--clear:focus {
 color:#000000;
 background:#b1dcfb;
 background:#ee2200;
 border-color:#ee2200;
 cursor:pointer;
 color:#ffffff;
 outline:none
}
.picker--time .picker__button--clear:before {
 top:-0.25em;
 color:#666;
 font-size:1.25em;
 font-weight:bold
}
.picker--time .picker__button--clear:hover:before,.picker--time .picker__button--clear:focus:before {
 color:#ffffff
}
.picker--time .picker__frame {
 min-width:256px;
 max-width:320px
}
.picker--time .picker__box {
 font-size:1em;
 background:#f2f2f2;
 padding:0
}
@media (min-height: 40.125em) {
 .picker--time .picker__box {
  margin-bottom:5em
 }
}

/*date picker*/
.picker__frame {
  width: 280px;
}
.picker__date-display {
  background-color: #D0423F;
  padding-bottom: 5px;
}

.picker__weekday-display {
  background-color: #A32E0B;
  padding: 5px;
  margin-bottom: 5px;
}
.picker__month-display{
  width: 55%;
  float: left;
  font-size: 3.5rem;
  font-weight: 400;
  text-align: right;
}
.picker__day-display{
  width: 45%;
  float: left;
  font-size: 3.5rem;
  text-align: left;
  padding-left: 1rem;
}
.picker__year-display{
  clear: both;
}


.picker__header select {
  margin-bottom: 5px;
}

.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
  background-color: #D0423F;
}

.picker__table{
  margin-bottom: 0px;
}

.picker__close, .picker__clear, .picker__today {
  color: #263238;
  width: 33.3333%;
  padding: 0;
  font-size:1.1rem;
}
.picker__clear {
  color: #263238;
/*  display: none;*/
}

.picker__day--infocus {
 padding:.50rem 0;
}

.picker__table {
 border-style: none;
}
.picker__table th,.picker__table td {
 border-style: none;
}

.picker__footer button {
  color: #595959 !important;
}

/**/

/* base style */

body {
  background: #FFFBF9 url("../image/overlay.png");
  color: #393939;
}

#all{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ----util---- */

.dm {
  display: none;
}
.dd {
  display: none;
}
.ds {
  display: block;
}
@media (min-width: 801px) {
  .ds{
    display: none;
  }
  .dd {
    display: none;
  }
  .dm {
    display: block;
  }
}
@media (min-width: 1025px) {
  .ds{
    display: none;
  }
  .dm {
    display: none;
  }
  .dd {
    display: block;
  }
}
.hide {
  display:none;
}

.container {
  padding: 0 1em 0 1em;
  margin: 0 auto;
}
@media (min-width: 801px) {
  .container {
    padding: 0 2em 0 2em;
    margin: 0 auto;
  }
}

.center,
.centers{
  text-align: center;
}
.left,
.lefts{
    text-align: left;
}
.right,
.rights{
    text-align: right;
}
@media (min-width: 801px) {
  .centerm {
    text-align: center;
  }
  .leftm {
    text-align: left;
  }
  .rightm {
    text-align: right;
  }
}
@media (min-width: 1025px) {
  .centerd {
    text-align: center;
  }
  .leftd {
    text-align: left;
  }
  .rightd {
    text-align: right;
  }
}

.small-button {
  padding : 0.5em;
  line-height:1.2em;
}

table .small-button {
  margin: 0.2em;
}

.space-top {
  margin-top: 2em;
}
.space-bottom {
  margin-bottom: 2em;
}
.min-space-top {
  margin-top: 1em;
}
.min-space-bottom {
  margin-bottom: 1em;
}

.inline-block {
    display: inline-block;
}

.indent {
  padding-left: 2em;
}

.padding {
  padding: 1em;
}

.light-text {
  color: #ddd;
	color: rgba(255, 255, 255, 0.75);
}

.small-text {
  font-size: 0.8em;
}
.big-text {
  font-size: 1.2em;
}

.text-dot {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
  
.tab-header > div {
  border: 1px solid #888;
  color:#999;
  padding: 0 1em;
  border-radius: 0 0.5em 0 0;
  cursor: pointer;
  background: #f5fafa url("../image/overlay.png");
}
.tab-header > div.active {
  border-bottom: transparent;
}
.tab-desc {
  margin-top: -1px;
  border: 1px solid #888;
  padding: 0 0.5em;
  margin-bottom: 2em;
  min-height:6.5em;
  width: 100%;
}

.table-link tr:not(.table-header) {
  cursor:pointer;
}
.table-link tr:not(.table-header):hover {
  background:#eee;
  color: #04B486;
}


.form {
  padding: 0.5em;
  border:#bbb 1px solid;
}

p.info {
  padding: 0.5em;
  margin-left: 1em;
  margin-right: 1em;
  background-color:#E1F5FE;
  border: 1px solid #0288D1;
  font-size: 0.9em;
  color: #000;
}

p.success {
  padding: 0.5em;
  margin-left: 1em;
  margin-right: 1em;
  background-color:#D6FFD7;
  border: 1px solid #00E203;
  font-size: 0.9em;
  color: #000;
}
p.warning {
  padding: 0.5em;
  margin-left: 1em;
  margin-right: 1em;
  background-color:#FFFCD6;
  border: 1px solid #E5D200;
  font-size: 0.9em;
  color: #000;
}
p.error {
  padding: 0.5em;
  margin-left: 1em;
  margin-right: 1em;
  background-color:#FFD6D6;  
  border: 1px solid #E50000;
  font-size: 0.9em;
  color: #000;
}
form .error {
  padding: 0 0.5em;
  color:#C60000;
  font-size: 0.9em;
}
form p.error {
  background : none;
  border-style: none;
}

.page_hide,
.bg-highlight{
  background-color:#FFFCD6;
}

.col-fix-item50 {
   width : 50px;
}
.col-fix-item100 {
   width : 100px;
   /*! display: flex; */
}
.col-fix-item200 {
   width : 200px;
}
.col-auto {
   flex: 1;
}

/* ----header---- */
#header{
  padding: 0.6em;
  height: 2.8em;
  font-weight: 600;
  position: relative;
  border-bottom: solid 3px #e53935;
}

#logo h1, #logo #title {
  position: relative;
  color: #e53935;
  font-weight: 600;
  /* font-size: 1em; */
  text-decoration: none;
  /* line-height: 1em; */
}

#login-user {
  max-width: 20em;
  font-size: 0.8em;
  color: #393939;
  position: absolute;
  bottom: 0;
  right: 1em;
  line-height: 2.8em;
  font-weight: 300;
  padding-bottom: 0.2em;
}

#login-user .user-menu-icon{
  font-size: 2em;
  margin-bottom: 0.1em;
  cursor: pointer;
}

#login-user ul.horizontal-menu{
  padding:0;
  margin:0;
}
#login-user ul.horizontal-menu li{
  list-style: none;
  float: left;
  margin-left: 1em;
}
#login-user .horizontal-menu a {
    color: #fff;
}
#login-user ul.absolute-menu{
  padding:0;
  margin:0;
  margin-top: -1px;
  position: absolute;
  top: 3em;
  right: -1em;
  z-index: 98;
  border: 1px solid #ddd;
}
#login-user ul.absolute-menu li{
  display: block;
  background-color: #fff;
  list-style: none;
  text-align: center;
  border-bottom: solid 1px #aaa;
  width: 15em;
}
#login-user .absolute-menu a {
  display: block;
  padding: 0 1em;
  width: 100%;
  color: #000;
}
#login-user .absolute-menu a:hover {
  background-color: #ddd;
}
#login-user .mypage-link {
  display: block;
}

/* ----main----*/

#main{
    flex: 1;
}

#main section,
#main > .pannkuzu,
footer{
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
}

#main .section-top {
  box-shadow: unset;
}

#main > section{
  padding: 2em 0;
}

#main > .pankuzu{
  padding: 0 1.5em;
  background: #FDECE6 url("../image/overlay.png");
  font-size:0.75em;
  
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025) !important;
  line-height: 1.8em;
}
#main > .pankuzu a{
  margin: 0 0.5em;
  word-wrap: break-word;
}

/* ページタイトル */
#main h1 {
  font-size: 1.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#main h2 {
  font-size: 1.1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
/* 小タイトル */
#main h3 {
  font-size: 1.1em;
}
#main h4 {
  font-size: 1.1em;
}

.content-nav{
  margin-top: 1em;
  width: 100%;
}
.content-nav ul{
  padding: 0;
  font-size: 0.8em;
}
.content-nav li{
  padding: 0;
  list-style: none;
  width: 100%;
}
.content-nav li.current a,
.content-nav li a:hover{
  background: #FDECE6 url("../image/overlay.png");
  text-decoration: underline;
}
.content-nav a{
  display: block;
  width: 100%;
  padding: 0 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  line-height: 1.8em;
}
.content-nav .indent1 {
  padding-left: 1em;
}
.content-nav .indent2 {
  padding-left: 2em;
}
.content-nav .indent3 {
  padding-left: 3em;
}
.content-nav .indent4 {
  padding-left: 4em;
}
.content-nav .indent5,.content-nav .indent6 {
  padding-left: 5em;
}

.left-content-nav-button,
.right-content-nav-button {
  position: fixed;
  margin: 0;
  margin-top: -1.1em;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(229,57,53 ,0.2);
  border-radius: 5px;
  cursor: pointer;
  color: #D0423F;
  z-index: 100;
}
.left-content-nav-button {
  left: 8px;
  top: 1.5em;;
}
.right-content-nav-button {
  right: 8px;
  top: 1.5em;
}

.content-nav .nav-header {
  border-bottom: 1px solid #ddd;
}

.close-button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(229,57,53 ,0.2);
  border-radius: 5px;
  cursor: pointer;
  color: #D0423F;
}
.content-nav.sp-right .close-button{
  margin: 0.5em auto 0.5em 0;
}
.content-nav.sp-left .close-button{
  margin: 0.5em 0 0.5em auto;
}

@media (max-width: 800px) {
  .pankuzu{

  }
  .content-nav.sp-left,
  .content-nav.sp-right{
    display: none;
    margin: 0;
    position: fixed;
    z-index: 9030;
    top: 0;
    height: 100vh;
    background: #FFF url("../image/overlay.png");
    max-width: 80vw;
    overflow: auto;
  }
  .content-nav.sp-left {
    left: 0;
  }
  .content-nav.sp-right {
    right: 0;
  }
  .content-nav.sp-left ul {
  }
  .content-nav.sp-left ul li,
  .content-nav.sp-right ul li {
    
  }
  .content-nav-back {
    display: none;
    z-index: 9020;
    position: fixed;
    top: 0;
    left: :0;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    background-color: #000;
    opacity: 0.2;
  }
}

@media (min-width: 801px) {
  .content-nav.sp-left,
  .content-nav.sp-right{
    display: block !important;
  }
  .content-nav-back {
    display: none !important;
  }
}

.ref-list {
  padding: 0;
  padding-top: 0.5em;
  border-top: solid #ddd 1px;
}
.ref-list dt{
  
}
.ref-list dd {
  padding: 0;
  font-size: 0.8em;
  line-height: 1.2em;
  border-bottom: solid #ddd 1px;
  padding-bottom: 0.8em;
}
.ref-list dd span {
  font-size: 0.8em;
  padding: 0 0.5em;
  line-height: 2em;
}

.pager {
  
}
ul.pager {
  position: relative;
  overflow:hidden;
  margin: 0.5em auto 1em auto;
  padding:0;
}
ul.pager li {
  position: relative;
  float: left;
  display: block;
  margin: 0 0.1em;
  border-radius: 0.35em;
}
ul.pager li a {
  color: #f5fafa;
  background: #D0423F url("../images/overlay.png");
  border: 1px solid #D0423F;
  display: block;
  width: 100%;
  padding: 0 0.5em;
  text-decoration: none;
}
ul.pager li a.current,
ul.pager li a:hover {
  color: #fff;
  background: #e53935 url("../images/overlay.png");
}
ul.pager li span {
  color: #aaa;
  background: #FDECE6 url("../images/overlay.png");
  border: 1px solid #aaa;
  display: block;
  width: 100%;
  padding: 0 0.5em;
}


/* ----footer---- */
#footer{
  line-height: 4em;
  background: #FDECE6 url("../image/overlay.png");
  text-align:center;
}
#footer .note{
  padding-top:2em;
  line-height: 1.2em;
}

/* ---- user ----*/
.user-name {
  line-height: 0.9em;
}
.profile {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
.myref-edit {
  margin-bottom: 0.25em;
}
.myref-edit button {
  margin: 0.5em;
}
table.myref-list {
  width: 100%;
  text-align: center;
  background: #fcfefe url("../image/overlay.png");
}
.myref-list .list-page-col {
  max-width: 4em;
}

.page-level-area {
  width: 9em;
}
.sortable button {
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 0.25em 0.25em;
}
.drag-area {
  width: 3em;
}
.hierarchy {
  width: 4em;
}

/* ----login---- */
.login-wrapper{
  max-width: 400px;
}
.login {
  border: 1px solid #888;
  padding: 0.75em;
}
.login img {
  width: 100%;
  max-width: 80px;
}
.login div {
  padding: 0.25em;
}

/*----welcome----*/
#welcome {
}

.page {
  min-height: 500px;
  display: block;
  position: relative;
}

.page .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 100%;
}

.bg1{
  background: #ffffff url("../image/overlay.png");
}
.bg2{
  
}
.bg3{
  background: #ecf1f1 url("../image/overlay.png");
}
.bg4{
  background: #e8edec; url("../image/overlay.png");
}

/*calender*/
.calender-header {
  
}

.calender-header .prev-calender,
.calender-header .next-calender {
  font-size: 2em;
  margin-top: 0.5em;
  display: block;
}
.calender-header .month {
  font-size: 2em;
}

.link-button{
  display: block;
  border: 1px solid #D0423F;
  width: 80%;
  margin: 1em auto;
  color: #D0423F;
}

.noimage {
  text-align: center;
  background-color: #cbcbcb;
  margin-bottom: 4px;
  font-size:18px;
  color: #fff;
  width:100px;
  height: 100px;
  line-height: 1em;
  padding:21px 0;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.noimage span {
  font-size: 40px;
}
.size100 {
  width:100px;
  height:100px;  
}
.size200 {
  width:200px;
  height:200px;
  padding:42px 0;
  font-size:36px;
}
.size200.noimage span {
  font-size: 80px;
}
@media (max-width: 500px) {
  .size200 {
    width:100px;
    height:100px;
    padding:21px 0;
    font-size:18px;
  }
  .size200.noimage span {
    font-size: 40px;
  }
}

.image-link {
  text-decoration: none;
}

.sq-area {
  width: 100%;
  margin: 0px;
  position: relative;
}
.sq-area .sq-block{
  width: 100%;
  padding-bottom: 100%;
}
.sq-area .sq-block .sq-box{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.contain {
    display: inline-block;
    background-color: #f4f4f4;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 1%;

    border: 1px solid #ddd;
    background-size: contain;
}

.cover {
    display: inline-block;
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 1%;

    border: 1px solid #ddd;
    background-size: cover;
}

.top-infolist {
  width: 100%;
  margin-top:1em;
  background: #FFFFFF url("../image/overlay.png");
}
.top-infolist ul {
  list-style: none;
  border: 1px solid #aaa;
  font-size: 0.8em;
  padding: 0 1em;
  height: 10em;
  overflow-y: scroll;
}
.top-infolist li {
 border-bottom: 1px solid #aaa;
 line-height: 1.3em;
 padding: 0.5em 0;
}

/*scrolltop*/
.material-scrolltop{
  background-color: #D0423F;
  z-index: 9000;
}
.material-scrolltop:hover {
  background-color:#e53935;
}
.material-scrolltop::before {
  background-color:#D0423F; 
}
.material-scrolltop:focus {
  background-color:#D0423F;
}

/* product item */

.product-info {
	padding:0.5em;
	background: #FFFFFF url("../image/overlay.png");
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #999;
	position: relative;
}
.product-info table,
.product-info tr,
.product-info th,
.product-info td {
	border: transparent;
}
.product-info th,
.product-info td {
	line-height:1.2em;
	padding:0.5em 0.2em;
}
.product-info table {
	margin:0;
	width:100%;
}
.product-info tr {
	border-top: 1px solid #ffbbbb;
	border-bottom: 1px solid #ffbbbb;
}
.product-info th {
	min-width: 4.5em;
}
.product-desc {
	padding-bottom: 4em;
}
.product-yomi {
	color:#999;
}
.desc-toggle-button-area { 
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #FFFFFF 50%, #FFFFFF);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #FFFFFF 50%, #FFFFFF);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 50%, #FFFFFF);
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	right:0;
	padding: 1em;
}
.element-toggle-area { 
  position: relative;
}
.element-toggle-content-area { 
  padding-bottom: 4em;
}
.element-toggle-button-area { 
	background: url("../image/overlay.png"), -moz-linear-gradient(top, rgba(255, 251, 249, 0), #FFFBF9 50%, #FFFBF9);
	background: url("../image/overlay.png"), -webkit-linear-gradient(top, rgba(255, 251, 249, 0), #FFFBF9 50%, #FFFBF9);
	background: url("../image/overlay.png"), linear-gradient(to bottom, rgba(255, 251, 249, 0), #FFFBF9 50%, #FFFBF9);
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	right:0;
	padding: 1em;
  z-index: 1;
}

/*music*/

.music-item{
  width: 100%;
  padding: 0.5em 2em 0.5em 0;
  border-bottom: 1px solid #ddd;
  display: table;
  line-height: 1.5em;
}
.music-item .music-name,
.music-item .music-button {
  display: table-cell;
  vertical-align: middle;
}
.music-item .music-button {
  cursor: pointer;
  width: 2em;
  font-size: 1.8em;
  padding:0.1em 0.5em;
}

.music-current-play {
  color : #D0423F;
}

.music-player {
  position: fixed;
  bottom: 0;
  z-index: 9010;
  width: 100%;
  margin: auto;
  left: 0;
  right: 0;
  border: 1px solid #aaa;
}
.rand-music-player {
  width: 100%;
  margin: auto;
  border: 1px solid #aaa;
}
.music-player-inner {
  background-color: #fff;
  position: relative;
}
.music-player-album-image {
  position: absolute;
}
.music-player-album-image img {
  margin: 0.3em 0.2em 0.2em 0.2em;
  width: 4em;
}
.music-player-info {
  padding-top: 0.1em;
  padding-left: 4em;
  line-height: 1.2em;
}
.music-player-album {
  font-size: 0.8em;
  padding-left: 1em;
  padding-right: 3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.music-player-title {
  font-size: 0.8em;
  padding-left: 1em;
  padding-right: 3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.music-player-artist {
  font-size: 0.8em;
  color: #999;
  padding-left: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.music-player-price {
  font-size: 0.8em;
  padding-right: 1em;
  text-align: right;
}
.music-player-url {
  font-size: 0.8em;
  padding-left: 1em;
}
.music-player-price-info {
  position: relative;
}
.music-player-price {
  position: absolute;
  top: 0;
  right: 0;
}
.music-player-powordby {
  position: absolute;
  bottom: 0;
  right:1em;
  font-size: 0.6em;
  color: #999;
  line-height: 1.5em;
  cursor: default;
}

.music-player-window-button-area {
  position: absolute;
  top:0;
  right: 0;
  padding: 0 1em;
  color: #D0423F;
}
.music-player-window-button {
  cursor: pointer;
}
.plyr__controls__item .thumb.active {
  display: none;
}
button.plyr__control {
  color: #D0423F !important;
  background-color: #fff !important;
}
button.plyr__control:hover {
  color: #D0423F !important;
  background-color: #fff !important;
}
.plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 5px rgba(255,187,187,0.5);
    outline: 0;
}
.plyr--full-ui input[type="range"] {
  color: #D0423F !important;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
 box-shadow: 0 0 0 5px rgba(255,187,187,0.5) !important;
 outline:0
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
 box-shadow: 0 0 0 5px rgba(255,187,187,0.5) !important;
 outline:0
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
 box-shadow: 0 0 0 5px rgba(255,187,187,0.5) !important;
 outline:0
}

/*anime*/

.top-index {
  padding: 1em 0;
  margin: 1em auto;
  max-width: 28em;
  border: 1px solid #ddd;
  background: #FFFFFF url("../image/overlay.png");
}

.top-index h3 {
  padding-left: 1em;
}

.top-index ul {
  list-style: none;
  padding-left: 2.5em;
}

.index-title:before {
  content: "●";
  color: #e53935;
  font-size: 0.5em;
  display: block;
  position: absolute;
  margin-left: -2em;
  margin-top: 0.1em;
}

/*sns*/

.sns_box {
  height: 2em;
  text-align: right;
  margin: 0.4em;
  text-align:right;
}

.sns_button {
  display:inline-block;
  border: solid 2px #fbb;
  border-radius: 100%;
}
.sns_button a {
  display: table-cell;
  width: 2em;
  height: 2em;
  color: #ffbbbb;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}
.sns_button i {
  font-size: 1em;
  vertical-align: middle;
}
.sns_button:hover {
  background-color: #fff;
}

.sns_button + .sns_button {
  margin: 0 0 0 0.2em;
}

.twitter:hover a {
  color: #1B95E0;
}
.sns_button.twitter:hover {
  border: solid 2px #1B95E0;
}

.facebook:hover a {
  color: #3B5999;
}
.sns_button.facebook:hover {
  border: solid 2px #3B5999;
}

.google:hover a {
  color: #dd4b39;
}
.sns_button.google:hover {
  border: solid 2px #dd4b39;
}

.instagram:hover a {
  color: #2b5c84;
}
.sns_button.instagram:hover {
  border: solid 2px #2b5c84;
}

.pocket:hover a {
  color: #EE4056;
}
.sns_button.pocket:hover {
  border: solid 2px #EE4056;
}

.hatena:hover a {
  color: #00a5dd;
}
.sns_button.hatena:hover {
  border: solid 2px #00a5dd;
}

.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  bottom: 0.1em;
}

/* map */
.map-shop-info {
  font-size: 1.3em;
  padding-left: 0.5em;
  margin-left: -0.5em;
}
.map-shop-symbol {
  font-size: 0.8em;
}
.map-shop-title {
  font-weight: bold;
}
.map-button {
  background-color: #e53935;
  border-radius: 2em;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  line-height: 2.5em;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.29);
}

.map-area {
  position: relative;
}
.map-button-area {
  position: absolute;
  bottom: 6em;
  right: 0.5em;
  z-index: 1000;
}

.map-icon-location {
  display: block;
  text-align: center;
  width: 1.2em !important;
  border-radius: 1em;
  height: 1.2em !important;
  font-size: 1.5em;
  background-color: #1996ff;
  border: 3px solid #fff;
}

/* about */
.big-icon {
  font-size: 4em;
  margin: 0.2em;
  color:#E43633;
}
.about-section {
  padding: 5em 0;
}
.about-section .container {
  max-width: 800px;
}
.about-section.section-top {
  border-bottom: solid #e53935 12px;
   background-color: #fff;
}
.section-content {
  background-color: #fff;
}
.about-section .row {
  margin-top:2em;
}
.about-section h2, .about-section h3 {
  color: #000;
}
.about-section p {
  padding: 0.5em;
  color: #666;
}

/* scan */
.scan {
  display:none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color:#000;
  z-index:9999;
}
.scan .imageBuffer {
   position: fixed;
   top: 0;
   left: 0;
}
/* オーバーレイ */
.scan  .drawingBuffer {
   position: fixed;
   top: 0;
   left: 0;
}
.scan-label {
  position: fixed;
  top: 0;
  left: 0;
  display:block;
  width:100%;
  color:#fff;
  background-color:rgba(0,0,0,0.7);
  text-align: center;
}
.scan-close-button {
  position: fixed;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  bottom: 23px;
  right: 23px;
  padding: 0;
  margin: 0;
  font-size: 1.2em;
  z-index:99999;
  cursor:pointer;
}
.viewport {
}
.scan-line {
}
.scan-connection {
  position: fixed;
  display:none;
  top: 50%;
  left: 50%;
  color:
  #fff;
  background-color:
  rgba(0,0,0,0.7);
  text-align: center;
  width: 12em;
  padding: 2em;
  border-radius: 1em;
  margin-left: -6em;
  margin-top: -2em;
  z-index:999;
}

/* gitem */

.gtop-item-name {
  min-height:4em;
  margin-bottom: 1em;
}
.gtop-item-date {
  margin-bottom: 1em;
}
.gsearch-item-name {
  min-height:3em;
  margin-bottom: 1em;
}

.ebook-label {
  font-size:1.0em;
  color:#e53935;
}
.main-product-list-area {
  line-height: 1em;
  background-color: #fff5f5;
  padding: 0.5em 0.5em 0 0.5em;
  border: 1px solid #ffbbbb;
}