@charset "utf-8";

/* 初期化 */
*,
*::before,
*::after { margin: 0px; padding: 0px; width: auto; height: auto; box-sizing: border-box; vertical-align: bottom; background-repeat: no-repeat; }
body { font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 16px; }
ul { list-style: none; }
img,
input,
input:hover,
input:focus,
textarea,
textarea:hover,
textarea:focus,
select,
select:hover,
select:focus { outline: none; }
input,
textarea,
select { padding: 5px; font-size: 16px; }
table { border-collapse: collapse; }
th,
td { border: 1px #000 solid; }
.mandatory { margin-right: 20px; padding: 5px; white-space: nowrap; color: #fff; background-color: #f60; border-radius: 5px; }
.message { display: none; margin-bottom: 10px; font-weight: bold; text-align: center; color: #f00; }
.sp_view { display: none; }
.err { margin-right: 0px; }

/* ＰＣ */
#bsim { display: block; margin: 0px auto; width: 1130px; position: relative; }
#header { width: 100%; }
header #logo { width: 100%; position: relative; }
header #logo img {width: 160px; height: 85px; }
header #logo span { white-space: nowrap; position: absolute; top: 50%; left: 170px; transform: translateY(-50%); }
header h1 { padding: 20px 20px; width: 100%; font-size: 24px; background-color: #390; color: #fff; }
header p { padding: 20px; }
main h2 { margin: 60px 20px 0px; max-width: 1130px; padding: 20px; font-size: 20px; font-weight: normal; color: #fff; background-color: #333; }
main p { margin: 10px 40px 0px; }
main .plan { margin: 20px 40px 0px; }
main .plan ul { display: flex; align-items: stretch; justify-content: center; width: 100%; }
main .plan li { padding: 20px; width: 100%; }
main .plan li:first-of-type { width: 45%; display: flex; align-items: center; font-size: 18px; text-align: left; color: #fff; background-color: #360; }
main .plan li:last-of-type { font-size: 14px; line-height: 2em; text-align: center; border: 3px #360 solid; }
main .plan li:last-of-type span { font-size: 32px; line-height: 1.3em; color: #c00; }
main .price { margin: 20px 40px 0px; }
main .price ul { display: flex; align-items: center; justify-content: center; width: 100%; }
main .price li { padding: 20px; text-align: center; border: 3px #ccc solid; border-right: none; }
main .price li:nth-child(odd) { width: 20%; background-color: #eaeaea; }
main .price li:nth-child(even) { width: 30%; }
main .price li:last-of-type { border-right: 3px #ccc solid; }
main .details { margin: 20px 40px 0px; }
main .details h3 { font-size: 28px; text-align: center; color: #139d33; }
main .details table { margin: 10px auto 0px; }
main .details th { padding: 10px; width: 30%; font-weight: bold; background-color: #bfdfae; }
main .details th:first-of-type { border: none; background-color: transparent; }
main .details td { padding: 10px; width: 200px; text-align: center; }
main .details td:first-of-type { font-weight: bold; text-align: left; background-color: #dfefd6; }
main .indent { margin: 10px 0px 0px; padding-left: 6em; text-indent: -3em; }
main .confirm { margin: 20px 20px 0px; padding: 20px; text-align: center; background-color: #cfc; }
main .confirm input { margin-right: 10px; transform: scale(1.4); vertical-align: 0.01em; }
main textarea { margin: 20px 40px 0px; padding: 5px; width: 100%; max-width: 1010px; height: 250px; }
main .buy { display: table; margin: 20px 40px 0px; width: 100%; max-width: 1010px; }
main .buy .mandatory { margin: 0px 0px 0px 30px; }
main .buy .message { text-align: left; }
main .buy dl { display: table-row; width: 100%; border-collapse: collapse; }
main .buy dt { display: table-cell; padding: 10px 10px; width: 35%; height: 70px; font-weight: bold; background-color: #cfc; border: 1px #aaa solid; border-bottom: none; vertical-align: middle; white-space: nowrap; }
main .buy dl:last-of-type dt { border-bottom: 1px #aaa solid; }
main .buy dd { display: table-cell; padding: 10px 10px; width: 100%; height: 70px; border: 1px #aaa solid; border-bottom: none; border-left: none; vertical-align: middle; }
main .buy dl:last-of-type dd { border-bottom: 1px #aaa solid; }
main .buy dd input { width: 450px; }
main .buy dl:last-of-type dd input { margin-top: 10px; width: 100%; }
main .confirmation { margin: 20px 40px 0px; padding: 20px; background-color: #eaeaea; }
main .confirmation p { margin: 0px; }
main .confirmation dt { margin-top: 20px; font-size: 20px; font-weight: bold; }
main .confirmation dd { margin-left: 20px; }
main .document { display: flex; align-items: flex-start; justify-content: flex-start; padding-bottom: 0px; }
main .document ul { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; float: left; }
main .document li { margin: 0px 40px 10px 0px; text-align: left; }
main .document .message { margin-top: 10px; text-align: left; }
main .image { text-align: left; }
main .image span { margin-top: -2em; vertical-align: middle; }
main .image input { transform: scale(1); vertical-align: middle; }
main .image .message { padding-left: 60px; margin-top: 10px; text-align: left; }
main .condition { margin: 10px 40px 0px 40px; height: 500px; border: 1px #ccc solid; overflow-y: scroll; }
main .condition p { margin-top: 0px; }
main .condition p:first-of-type { margin-top: 10px; }
main .condition h3 { margin: 40px 40px 0px; }
main .condition h4 { margin: 20px 40px 0px; }
main .sale { margin: 20px 40px 0px; padding: 20px; width: 100%; max-width: 1010px; background-color: #eaeaea; }
main .thanks .sale { margin-top: 0px; }
main .button { margin-top: 70px; text-align: center; }
main .button input { padding: 10px; width: 300px; font-size: 30px; font-weight: bold; color: #fff; background-color: #777; border: none; cursor: pointer; }
main .button input:hover { background-color: #060; }
main .button #prev { margin-right: 30px; }
footer div { margin-top: 70px; text-align: center; font-size: 12px; }


@media only screen and (max-width: 767px) {
  .pc_view { display: none; }
  .sp_view { display: inline-block; }
  html,
  body { overflow-x: hidden; }
  #bsim { width: calc(767 / 767 * 100vw); }
  header h1 { font-size: 18px; text-align: center; }
  main h2 { margin: 20px 0px 0px 10px; max-width: calc(727 / 767 * 100vw); width: 100%; }
  main p { margin: 10px 20px 0px; }
  main .confirm { margin: 10px; }
  main .plan { margin: 20px 20px 0px; }
  main .plan ul { display: block; }
  main .plan li { width: 100%; text-align:center; }
  main .plan li:first-of-type { width: 100%; }
  main .price { margin: 20px 20px 0px; }
  main .price ul { display: block; }
  main .price li,
  main .price li:nth-child(even),
  main .price li:nth-child(odd) { width: 100%; border: 3px #eaeaea solid; }
  main .details { margin: 20px 20px 0px; }
  main .details table { width: 100%; }
  main .details th,
  main .details td,
  main .details td:first-of-type { width: auto; font-size: 0.9em; white-space: nowrap; }
  main .indent { margin: 10px 20px 0px 0px; padding-left: 4em; }
  main textarea { margin: 20px 20px 0px; width: 100%; max-width: calc(687 / 767 * 100vw); }
  main .buy { display: block; margin: 20px 20px 0px; width: 100%; max-width: calc(687 / 767 * 100vw); background-color: transparent; border: none; }
  main .buy .mandatory { margin-left: 10px; }
  main .buy dt { display: block; padding: 10px 10px; width: 100%; height: auto; max-width: calc(687 / 767 * 100vw); background-color: #cfc; border: none; white-space: normal; }
  main .buy dl:last-of-type dt { height: auto; background-color: #cfc; border: none; }
  main .buy dd { display: block; margin-bottom: 10px; width: 100%; max-width: calc(687 / 767 * 100vw); height: auto; background-color: transparent; border: none; }
  main .buy dl:last-of-type dd { margin-bottom: 10px; height: auto; border: none; }
  main .buy dd input { width: 100%; }
  main .confirmation { margin: 20px 20px 0px; }
  main .confirmation dt { line-height: 1.2em; }
  main .confirmation span { font-size: 18px; }
  main .document div span { font-size: calc(16 / 767 * 100vw); }
  main .condition { margin: 10px 20px 0px; height: 200px; }
  main .sale { margin: 10px 20px 0px; max-width: calc(687 / 767 * 100vw); }
  
  main .button #prev { display: inline-block; width:calc(250 / 767 * 100vw); font-size: calc(35 / 767 * 100vw); }
  main .button #mail { display: lnline-block; margin-top: 30px; width:calc(250 / 767 * 100vw); font-size: calc(35 / 767 * 100vw); }
  
}