@charset "utf-8";

html { scroll-padding-top: 8.5%; }

#pageBg { background: #fff; }
#pageBg img { width: 100%; vertical-align:top; }

/*title*/
#pageBg #titleSec { text-align: center; background: #aae6dc; width: 100%; position: relative; }
#pageBg #titleSec h1,
#pageBg #titleSec p { margin: 0 auto; }
#pageBg #titleSec div { position: absolute; width: min(20%, 110px); left: 50%; transform: translateX(-50%); bottom: min(-2%, -10px); }

/*anc*/
#pageBg #ancSec h2 { text-align: center; }
#pageBg #ancSec ul { text-align: center; margin: min(1%, 10px) auto 0; width: 100%; }

/*kotsu*/
#pageBg .kotsuSec h2 { margin: 0 auto; padding-top: 4%; text-align: center; }
#pageBg .kotsuSec h3 { margin: min(4%, 20px) auto 0; text-align: center; }

#pageBg .kotsuSec .contentInner { margin: 0 auto; text-align: center; }
#pageBg .kotsuSec .contentInner > ul { width: 86%; margin: 0 auto; }
#pageBg .kotsuSec .contentInner > ul > li { margin-top: min(6%, 40px); border: 2px solid #000; border-radius: 20px; padding-bottom: min(8%, 40px); }
#pageBg .kotsuSec h3 + .contentInner > ul > li:first-child { margin-top: 2px; }

#pageBg .kotsuSec .contentInner ul li .detailBtn { width: 35%; }
#pageBg .kotsuSec .contentInner ul li .detailBtnM,
#pageBg .kotsuSec .contentInner ul li .detailBtnL { width: 55%; }
#pageBg .kotsuSec .contentInner a:has(.detailBtnL) { margin-top: 15px; display: inline-block; }

#pageBg .kotsuSec ul li .atComment { margin-top: min(5%, 20px); }
#pageBg .kotsuSec .atComment { margin-top: min(2.5%, 25px); }

/*kotsu1*/
#pageBg #kotsu1Sec.kotsuSec .contentInner > ul > li { background: linear-gradient(to bottom, #afdcfa 31%, #ffffff 31%); }

/*kotsu2*/
#pageBg #kotsu2Sec.kotsuSec .contentInner > ul > li { background: linear-gradient(to bottom, #bef0ff 38%, #ffffff 38%); }

/*kotsu3*/
#pageBg #kotsu3Sec.kotsuSec .contentInner > ul > li { background: linear-gradient(to bottom, #d8f2e6 33%, #ffffff 33%); }

/*AQ.PIT*/
#pageBg #aqPitMenuSec { margin-top: min(10%, 40px); }
#pageBg #aqPitMenuSec a { width: 70%; display: inline-block; }

/*shopBtn*/
#shopBtnSec a { width: 70%; display: block; padding: min(28%, 120px) 0 0; margin: 0 auto; }
#shopBtnSec + p { margin: min(10%, 60px) auto; }

@media only screen and (min-width:768px) {
  
  html { scroll-padding-top: 100px; }
    
  /*title*/
  #pageBg #titleSec { background-size: 750px; }
  #pageBg #titleSec h1,
  #pageBg #titleSec p { max-width: 540px; }

  /*anc*/
  #pageBg #ancSec h2 img,
  #pageBg #ancSec ul { max-width: 500px; }

  /*kotsu*/
  #pageBg .kotsuSec h2 { padding-top: 40px; }
  #pageBg .kotsuSec h2 img,
  #pageBg .kotsuSec h3 img,
  #pageBg .kotsuSec p img { max-width: 540px; }
  #pageBg .kotsuSec .contentInner { max-width: 540px; }
  
  /*shopBtn*/
  #shopBtnSec a { max-width: 378px; }
  #shopBtnSec + p { max-width: 540px; }
  

}