@charset "utf-8";

html { scroll-padding-top: 100px; }

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

/*title*/
#pageBg #titleSec { text-align: center; width: 100%; background: url("../_images/title_bg.png") repeat-x top -224px center / 100%;}
#pageBg #titleSec h1,
#pageBg #titleSec p { margin: 0 auto; }

/*anc*/
#pageBg #ancSec { padding: min(4vw, 30px) 0 min(.2vw, 5px); background: #dcebf3; }
#pageBg #ancSec #ancArea { background: #fff; width: 90%; margin: min(10vw, 30px) auto min(10vw, 60px); border-radius: 15px; position: relative; padding: min(6vw, 40px); box-sizing: border-box; }
#pageBg #ancSec #ancArea h2 { text-align: center; width: 100%; position: absolute; top: max(-4.5vw, -25px); left: 50%; transform: translateX(-50%); }
#pageBg #ancSec #ancArea ul { text-align: center; margin: min(1%, 10px) auto 0; width: 100%; }
#pageBg #ancSec #ancArea ul li { margin: min(6%, 50px) 0 0; }
#pageBg #ancSec #ancArea ul li:first-child { margin-top: min(3%, 25px); }

/*scene*/
#pageBg .sceneSec { text-align: center; }
#pageBg .sceneSec .bgArea { background: url("../_images/scene_bg.gif") #dcebf3 no-repeat center bottom / 100%; padding-bottom: min(16vw, 100px); }
#pageBg .sceneSec h2 { margin: 0 auto; position: relative; }
#pageBg .sceneSec h2::before { position: absolute; content: ""; display: block; width: 100%; height: min(5.5vw, 30px); background: url("../_images/scene_h_bg.png") no-repeat center center / 90%; top: min(-2vw, -8px); left: 50%; transform: translateX(-50%); z-index: 10; }
#pageBg .sceneSec h3 { position: absolute; text-align: center; top: max(-4.5vw, -25px); z-index: 1; }
#pageBg .sceneSec p { margin: min(2%, 5px) auto 0; text-align: center; }

#pageBg .sceneSec .contentInner { margin: 0 auto; text-align: center; }
#pageBg .sceneSec .contentInner > ul { width: 86%; margin: 0 auto; }
#pageBg .sceneSec .contentInner > ul > li { margin-top: min(10%, 60px); border: 2px solid #000; border-radius: 20px; padding-bottom: min(8%, 40px); background: #fff; position: relative; }

#pageBg .sceneSec .contentInner ul li .detailBtn { width: 35%; }
#pageBg .sceneSec .contentInner ul li .detailTireBtn { width: 82%; margin-top: min(10%, 60px); }

#pageBg .sceneSec .resultArea { margin: min(5%, 30px) auto min(16%, 100px); }
#pageBg .sceneSec .resultArea .detailBtn { width: 35%; }
#pageBg .sceneSec .resultArea .checkBtn { width: 75%; margin-top: min(8%, 40px); }

#pageBg .sceneSec .atComment { margin-top: min(2.5%, 15px); }

/*scene1*/
#pageBg #scene1Sec h2 { background: #f3838c; }
#pageBg #scene1Sec h3 + a > img { border-radius: 16px; }

/*scene2*/
#pageBg #scene2Sec h2 { background: #7ca2cd; }
#pageBg #scene2Sec .resultArea .checkBtn { margin-top: 0; }

/*scene3*/
#pageBg #scene3Sec .bgArea { background-image: none; padding-bottom: min(10%, 50px); }
#pageBg #scene3Sec h2 { background: #f2b25c; }
#pageBg #scene3Sec.sceneSec .contentInner > ul > li { padding: min(26%, 160px) 0 min(16%, 80px); }
#pageBg #scene3Sec.sceneSec .contentInner > ul > li .detailTireBtn { margin-top: min(7%, 30px); }

/*omakase*/
#pageBg #omakaseSec { background: #fff8e6; }
#pageBg #omakaseSec .contentInner { margin: 0 auto; padding: min(6%, 40px) 0 min(10%, 50px); }
#pageBg #omakaseSec .contentInner .bnInner { width: 70%; margin: 0 auto; }
#pageBg #omakaseSec .contentInner .bnInner a + h3 { margin-top: min(10%, 50px); }

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

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

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

  /*scene*/
  #pageBg .sceneSec .contentInner { max-width: 540px; }
  #pageBg .sceneSec h2::before { height: 20px; top: -8px; max-width: 540px; }
  #pageBg .sceneSec h2 img,
  #pageBg .sceneSec h3 img,
  #pageBg .sceneSec p img { max-width: 540px; }
  
  #pageBg .sceneSec .resultArea { max-width: 540px; }
  
  #pageBg .sceneSec h3 .hoverWhite:hover { opacity: 1; filter: brightness(1.25); }
  
  /*omakase*/
  #pageBg #omakaseSec .contentInner { max-width: 540px; }
  
  /*shopBtn*/
  #shopBtnSec a { max-width: 378px; }
  #shopBtnSec + p { max-width: 540px;  }

}