/* Responsive Layout */
/* Desttop
-----------------------------------------------------
-----------------------------------------------------
----------------------------------------------------- */
@media screen and (max-width:999px) {
  .device_dt {
    display: none !important;
  }
  .device_tb {
    display: block !important;
  }
  .device_sp {
    display: none !important;
  }
  #hero .hero_inner {
    top: 150px;
    opacity: 0.4;
  }
  .page1 .eng_txt {
    top: -250px;
    right: 5vw;
  }
  .page4 .jpn_txt.device_tb {
    display: flex !important;
    margin: 0 auto;
  }
  .page4 .jpn_txt p {
    line-height: 5vw;
  }
}
/* Tablet
-----------------------------------------------------
-----------------------------------------------------
----------------------------------------------------- */
@media screen and (max-width:799px) {
  .device_dt {
    display: none !important;
  }
  .device_tb.device_sp {
    display: block;
  }
  .device_sp {
    display: none;
  }
  h1 {
    font-size: 10vw;
  }
  #hero .hero_inner {
    top: 100px;
    padding: 0 5vw;
    opacity: 0.4;
  }
  article {
    padding: 0;
  }
  .page1.flex {
    flex-wrap: wrap-reverse;
  }
  .page1 .img_bottle1 {
    width: 100vw;
    height: auto;
  }
  .page1 .eng_txt {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto;
    padding: 100px 5vw;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 2;
    z-index: 1;
  }
  .page2 {
    padding: 150px 5vw;
    background: #fffcf0;
  }
  .page2 h2 {
    width: 30px;
    height: auto;
    position: relative;
    margin: 0;
    top: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-shadow: initial;
    color: #333333;
    z-index: 5;
  }
  .page3 img.img_bottle2 {
    width: 50%;
    height: auto;
    margin: 0;
  }
  .page3 img.img_okinamen {
    width: 50%;
    margin: 0;
  }
  .page4 {
    height: auto;
    max-height: initial;
    padding: 150px 0;
  }
  .page4 .jpn_txt.device_tb {
    display: flex !important;
    margin: 0 auto;
  }
  .page4 .jpn_txt p {
    line-height: 5vw;
  }
  .page5 {
    text-align: center;
  }
  .page5 img.img_noh {
    display: block;
    width: 100vw;
    height: auto;
    margin: 0;
  }
  .page6 img.img_bottle3 {
    display: block;
    width: 100vw;
    margin: 0;
  }
  #debut {
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 200px 0 0;
    overflow: hidden;
  }
  #debut img.img_box {
    position: relative;
    width: 65vw;
    height: auto;
    top: 0;
    left: 0;
    margin: 80px 0;
    -webkit-transform: initial;
    transform: initial;
    -webkit-filter: brightness(1);
    filter: brightness(1);
    z-index: 0;
  }
  #debut .message {
    position: relative;
    text-align: center;
    opacity: 0.6;
    z-index: 1;
  }
}
/* Halfway point
-----------------------------------------------------
-----------------------------------------------------
----------------------------------------------------- */
@media screen and (max-width:699px) {}
/* Smartphone
-----------------------------------------------------
-----------------------------------------------------
----------------------------------------------------- */
@media screen and (max-width:499px) {
  .device_dt {
    display: none !important;
  }
  .device_tb, .page4 .jpn_txt.device_tb {
    display: none !important;
  }
  .device_sp {
    display: block !important;
  }
  #hero {
    overflow: hidden;
  }
  #hero .hero_inner {
    top: calc(5vh + 20px);
  }
  h1 {
    margin: 0 0 4vh;
    font-size: 15vw;
  }
  .heroimg {
    width: auto;
    height: auto;
    max-width: initial;
    min-height: 500px;
    max-height: 740px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
  }
  #waves img.logo.onpage {
    width: 90vw;
    height: auto;
    opacity: 0.3!important;
  }
  #waves h2 {
    height: auto;
    margin: 0;
  }
  .page1 .eng_txt {
    font-size: 3.7vw;
  }
  .page2 h2 {
    font-size: 4vh;
    font-weight: bold;
  }
  .page3 img.img_bottle2 {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .page3 img.img_okinamen {
    width: 100%;
    margin: 0;
  }
  .page1 .img_bottle1,
  .page6 img.img_bottle3 {
    display: block;
    width: 100vw;
    max-width: initial;
    height: auto;
    left: 0;
  }
  .page5 img.img_noh {  
    display: block;
    width: 200vw;
    max-width: initial;
    height: auto;
    left: calc(50% - 100vw);
  }
  .page4 {
    display: none;
  }
  .page4sp {
    display: flex;
    flex-flow: column;
    padding: 150px 0;
    text-align: center;
  }
  .page4sp .jpn_txt {
    flex-flow: column;
    display: flex!important;
    margin: 0 auto;
    padding: 0;
    -webkit-writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    text-orientation: upright;
  }
  .page4sp .jpn_txt p {
        margin: 0 10px;
        text-align: left;
        font-size: 1rem;
        line-height: 10vw;
        letter-spacing: 3px;
  }
  .page5 {
    display: flex;
    flex-flow: column;
    padding: 0 0 150px;
    text-align: center;
  }
  .page5 img.img_noh {
    margin: 0 0 150px;
  }
  .page5 .jpn_txt {
    flex-flow: column;
    display: flex!important;
    margin: 0 auto;
    padding: 0;
    -webkit-writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    text-orientation: upright;
  }
  .page5 .jpn_txt p {
        margin: 0 10px;
        text-align: left;
        font-size: 1rem;
        line-height: 10vw;
        letter-spacing: 3px;
  }
  #debut .message h2 {
    font-size: 4rem;
  }
  #debut .message p {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 3px;
  }
  #debut img.img_box {
    position: relative;
    width: 70vw;
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
}