/*========================================================================
   onsen layout
========================================================================*/
#onsen #header {
  position: fixed;
  background: #efefef;
  -webkit-box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.1);
}
#onsen #mainVisual {
  background: url(../img/onsen/mainimg.jpg) no-repeat center/cover;
}
#onsen #contents {
  overflow: visible;
}
#onsen h2.title, #onsen .left_line, #onsen .pagenav {
  border-color: #d76;
}
#onsen .top_line::before,
#onsen .under_line::after {
  background-color: #d76;
}
#onsen .pagenav h3 {
  color: #d76;
}
#onsen .pagenav li.current a {
  color: #d76;
}
#onsen .pagenav li.current a::before {
  background-color: #d76;
}
@media screen and (min-width: 992px) {
  #onsen .inner {
    width: 92% !important;
  }
}

.layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0.5em;
}
.layout > * {
  width: 100%;
}
.layout > *:not(:last-child) {
  margin-bottom: 1.3em;
}

@media screen and (min-width: 768px) {
  #onsen01 .layout {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 3em;
  }
  #onsen01 .layout .txtArea {
    width: 37%;
  }
  #onsen01 .layout .movArea {
    max-width: 690px;
    width: 62%;
  }
}
#onsen01 .img_layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -0.4em;
  margin-right: -0.4em;
}
#onsen01 .img_layout > * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.4em;
}
#onsen01 .img_layout .img01 {
  width: 58%;
  max-width: 510px;
}
#onsen01 .img_layout .img02 {
  width: 40%;
  max-width: 300px;
}
@media screen and (min-width: 768px) {
  #onsen01 .img_layout {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #onsen01 .img_layout .img01 {
    margin-top: 3.5em;
  }
}

#onsen02 .imgArea {
  text-align: center;
}

#story {
  background-color: rgba(221, 119, 102, 0.1);
}
#story .layout .imgArea {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #story .layout {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 1em;
  }
  #story .layout .txtArea {
    width: 72%;
  }
  #story .layout .imgArea {
    width: 26%;
  }
  #story .layout:nth-of-type(2n) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

#Anti-Aging .layout {
  margin-bottom: 2em;
}

#ryoukin .layout table {
  width: 100%;
}
#ryoukin .layout .table01 td, #ryoukin .layout .table02 td {
  width: 25%;
  text-align: right;
}
#ryoukin .layout .table03 table td {
  padding: 1em;
}
#ryoukin .layout .imgArea {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #ryoukin .layout {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 3em;
  }
  #ryoukin .layout > * {
    width: 48%;
  }
  #ryoukin .layout .imgArea {
    margin-top: 48px;
  }
}