@charset "utf-8";

@media screen and (max-width:599px) {
  #main_ *{font-size: 100%!important;}
  #main_ img{width:100%; height: auto;}



  #main_ > article {font-size:1.4rem; font-size:4.375vw;}
  #main_ > article > * {width:auto; margin:0 16px;}

  #main_ > article > #introSec .txt{font-size: 110%;}
  #main_ > article > #meritSec .meritContentsBox {display:flex; justify-content:space-between; flex-wrap:wrap;}
  #main_ > article > #meritSec .meritContentsBox .meritContent{width: 49%;}
  #main_ > article > #stepupSec .stepupContentsBox{flex-wrap: wrap;}
  #main_ > article > #stepupSec .stepupContentsBox .stepupContent{width: 90%;margin: 0 auto 1em;}
  #main_ > article > #stepupSec .stepupContentsBox .stepupContent.pcNone{display: inline-block; border-top: solid 1px #999999; padding-top: 1em;}
  #main_ > article > #stepupSec .stepupContentsBox .stepupContent.pcNone.stepupContentSpfirst{border-top: none;}
  #main_ > article > #stepupSec .stepupContentsBox .stepupContent.spNone{display: none;}
  #main_ > article > #stepupSec .stepupContentsBox .stepupContent:last-child{margin-bottom: 0;}
  #main_ > article > #trySec iframe{width: 90vw!important; height: calc((90vw / 16) * 9)!important;}
  #main_ > article > #trySec .videoTxt{width: 100%; margin: 2em 0;}
  #main_ > article > #trySec .lisningBox{width:100%;}
  #main_ > article > #trySec .lisningBox .lisningBoxContent{flex-wrap: wrap;padding: 1em 5%;}
  #main_ > article > #trySec .lisningBox .lisningBoxContent audio{height: 32px;}
  #main_ > article > #trySec .lisningBox .lisningBoxContent .dispFlex:first-child {width: 80%;margin: 0 0 0 auto;box-sizing: border-box;margin-bottom: 1em;display: block;}
  #main_ > article > #trySec .lisningBox .lisningBoxContent .dispFlex{width: 100%;}
  #main_ > article > #cpnSec .mgt6em{margin-top: 2em;}
  #main_ > article > #cpnSec .mgt4em{margin-top: 2em;}
  #main_ > article > #trySec .lisningBox .lisningBoxContent01::before,
  #main_ > article > #trySec .lisningBox .lisningBoxContent02::before{left: -6%;top: -0.5em;position: absolute;transform: translate(0) scale(0.5);background-size: cover;display: block;}
  #main_ > article > #trySec .annotation{width: 100%;}

  #main_ > article > #muchSec{}
  #main_ > article > #subscSec .subscImg{margin-left: 0;}
  #main_ > article > #paymentSec .paymentTtl img{max-height: 2em;width: auto;}
  #main_ > article > #voiceSec .voiceTtl img{max-height: 2.5em;width: auto;}
  #main_ > article > #voiceSec .voiceBox .voiceBoxContent{width: 100%;}
  #main_ > article > header {margin:0;height: auto;position: relative; background-image: url(images/header_image_sp.jpg);}
  #main_ > article > header > .image {}
  #main_ > article > header > .image > img {display:block; width:100%; height:auto;}
  #main_ > article > header > .cover {width:20%; left:15%; transform:translate3d(0,-50%,0);}
  #main_ > article > header > .cover > img {width:100%; height:auto;}
  #main_ > article > header > h1 {width: 95%;left: inherit;top: inherit;transform: inherit;background-size:contain;display: block;position: relative;margin: 0 auto;padding: 3em 0;}

  #main_ > article > #message {padding:2em 0 0;}
  #main_ > article > #message > h1 {}
  #main_ > article > #message > p {}
  #main_ > article > #message > h1 + p {}
  #main_ > article > #message > address {}

  #main_ > article > #whats-new {padding:2em 0 0;}
  #main_ > article > #whats-new > header {-webkit-justify-content:center; justify-content:center;}
  #main_ > article > #whats-new > header > .image {width:25%;}
  #main_ > article > #whats-new > header > .image > img {width:100%; height:auto;}
  #main_ > article > #whats-new > header > h1 {width:60%; margin:0 0 0 1em; padding:28.7499% 0 0; background-size:contain;}
  #main_ > article > #whats-new > ol {font-size:1.4rem; font-size:4.375vw;}
  #main_ > article > #whats-new > ol > li {
  display:-webkit-flex; display:flex; 
  -webkit-flex-direction:column; flex-direction:column; 
  min-height:0; margin:1em 0 0;}
  #main_ > article > #whats-new > ol > li::before {left:0; top:0; font-size:3.6rem; font-size:11.25vw;}
  #main_ > article > #whats-new > ol > li > .image {order:100; width:80%; position:static; margin:1em auto 0;}
  #main_ > article > #whats-new > ol > li > .image > img {width:100%; height:auto;}
  #main_ > article > #whats-new > ol > li > h2 {padding:0.4em 0 0 2em; font-size:1.8rem; font-size:5.625vw;}
  #main_ > article > #whats-new > ol > li > p {}
  #main_ > article > #whats-new > ol > li > ul {}
  #main_ > article > #whats-new > ol > li > ul > li {}
  #main_ > article > #whats-new > ol > li > ul > li::before {}
  #main_ > article > #whats-new > ol > li > ul.series {margin:-1em 0 0;}
  #main_ > article > #whats-new > ol > li > ul.series > li {min-height:10vw; margin:1em 0 0; padding:0 0 0 12vw;}
  #main_ > article > #whats-new > ol > li > ul.series > li::before {}
  #main_ > article > #whats-new > ol > li > ul.series > li > .image {width:10vw;}
  #main_ > article > #whats-new > ol > li > ul.series > li > .image > img {width:100%; height:auto;}
  #main_ > article > #whats-new > ol > li > ul.series > li > strong {font-size:1.2rem; font-size:3.75vw;}
  #main_ > article > #whats-new > ol > li > ul.series > li > h3 {font-size:1.4rem; font-size:4.375vw;}
  #main_ > article > #whats-new > ol > li > .image ~ * {margin-right:0;}
}