@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp_s.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanmp.css');
@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');

body {
  font-family: YakuHanJP, "Helvetica Neue", "Helvetica", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #fafdff;
}



header, main {
  background-color: #ffffff;
  color: #192f60;
}

header { margin: 1em 1em 0; }
main { margin: 0 1em; }

header p {
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.7;
  padding: 2em;
}

@media screen and (min-width: 430px) {
  /* medium　smartphone↑ */
  header, main {
    margin-left: auto;
    margin-right: auto;
  }

  header p, main {
    border-left: 1px #192f60 solid;
    border-right: 1px #192f60 solid;
  }

  main {
    max-width: 423px;
    border-bottom: 1px #192f60 solid;
  }
  header, header p { max-width: 425px; }
}


/* Button */
.btn {
  width: 75%;
  margin-top: 1em;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
}


/* ============== */


h2 {
  color: #192f60;
  font-weight: 700;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto 1em;
  padding-left: 15px;
  padding-right: 15px;
  letter-spacing: 2px;
}
h2 span {
  position: relative;
  display: inline-block;
  margin-top: 45px;

  letter-spacing: 0;
  font-weight: 500;
  font-size: 18px;
  font-size: 1.8rem;
}
h2 span:before {
  content: '';
  position: absolute;
  top: -25px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #192f60;
  border-radius: 1px;
}




#photo h3 {
  color: #192f60;
  font-weight: 700;
  font-size: 28px;
  font-size: 2.8rem;
  margin-bottom: 0.5em;
}


#lineup h3 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;

  color: #ffffff;
  background-color: #192f60;
  padding: 0.75em 2em;
}


#photo { padding-top: 2.5em; }


.type {
  display: table;
  margin: 0 auto 1em;
  padding: 13px 1.5em;
  background-color: #192f60;
  border-radius: 22px;

  color: #ffffff;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}


#item div { padding: 3.125em 0; }
#item div p {
  padding-left: 1.875em;
  padding-right: 1.875em;
  text-align: center;
}

.price { padding-top: 1em; }




#lineup .block { margin: 0 auto 3em; }
#lineup .block p { text-align: center; }
#lineup .block p strong { font-weight: 600; }
















@media screen and (min-width:769px) {
  /* tablet↑ */
}
@media screen and (min-width:768px) {
  /* tablet↓ */
}
@media screen and (min-width:1024px) {
  /* PC↑ */
}
@media screen and (min-width:960px) {
  /* big tablet↑ */
}
@media screen and (min-width: 600px) {
  /* small tablet↑ */
}
@media screen and (min-width:445px) and ( max-width:600px) {
  /* tablet only */
}
@media screen and (max-width: 375px) {
  /* small　smartphone↓ */
}