@charset "UTF-8";
/* reset */
/*======================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

*:focus { outline: none; }

html { height: 100%; }

body { background: #fffbf0; font-family: "M PLUS Rounded 1c", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; font-size: 100%; height: 100%; text-rendering: optimizeLegibility; color: #333; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

img { vertical-align: top; line-height: 0; font-size: 0; border: 0; width: 100%; }

a { text-decoration: none; color: #222; display: inline-block; }

a:hover, a:hover img { opacity: .7; transition: .3s; }

.underline { text-decoration: underline; opacity: .8; }

.underline:hover { text-decoration: none; }

/*all base */
/*======================== */
#wrapper { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; }

#wrapper main { display: block; padding: 100px 0; flex: 1; }

section { width: 96%; max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 7px; padding: 2%; overflow-x: hidden; }

section + section { margin-top: 2em; }

.box { border: 1px solid #efebe2; }

.title { font-size: 1.4em; text-align: center; letter-spacing: 5px; }

.top_title { text-align: center; font-size: 1.4em; margin-bottom: 1em; }

.sub-title__grn { color: #6ead22; font-size: 1.2em; margin-bottom: 1em; background: #f1f7ea; padding: .5em; letter-spacing: 1px; }

.complete-msg { margin: 1.5em 0; }

.note-msg { font-size: .8em; margin-bottom: 1em; display: block; }

table { border-collapse: collapse; border-spacing: 0; text-align: center; }

.text-l { text-align: left; }

.text-r { text-align: right; }

.text-c { text-align: center; margin: .7em 0; }

.flex-box { display: flex; justify-content: space-between; align-items: center; }

.flex-start, .stop_list .flex-start { display: flex; justify-content: flex-start; align-items: center; }

/*input select textarea */
/*======================== */
input, textarea, select { font-family: "M PLUS Rounded 1c", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; font-size: 1em; -webkit-appearance: none; appearance: none; }

/*select--------- */
select { display: block; }

.select { position: relative; /*input----------- */ }

.select select { min-width: 100px; border: 1px solid #ccc; background: white; border-radius: 4px; padding: 10px 25px 10px 10px; }

.select::after { content: ""; display: block; position: absolute; top: 50%; right: 20px; pointer-events: none; transform: rotate(45deg) translateY(-100%); width: .5em; height: .5em; border: 3px solid #5fa0b4; border-radius: 2px; border-top: 0; border-left: 0; z-index: 2; }

input { width: 100%; display: block; padding: 5px 7px; border-radius: 3px; border: 1px solid #ccc; background: #fff; color: #222; }

input:focus { outline: none; }

.check { position: relative; padding-left: 24px; margin-right: 1.5em; }

.check span { content: ""; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border: 2px solid #dbdbdb; border-radius: 50%; }

.check span::after { position: absolute; top: -2px; left: -2px; content: ""; background: #fd748d; width: 20px; height: 20px; border-radius: 50%; transform: scale(0); opacity: 0; }

.check input { position: absolute; opacity: 0; z-index: -1; }

.check input:checked ~ span { border-color: #fd748d; }

.check input:checked ~ span::after { transform: scale(0.6); opacity: 1; transition: .2s; }

textarea { width: 100%; max-width: 100%; min-width: 100%; height: auto; min-height: 15vh; line-height: 1.5; padding: 7px; border: 1px solid #ccc; border-radius: 4px; }

button { display: block; outline: none; cursor: pointer; }

.button { padding: 1em 2em; font-size: 1em; border: 0; border-radius: 7px; background: #5fa0b4; color: #fff; transition: .3s; letter-spacing: 1px; }

.button:hover { background: #38869f; }

.gray_bg { background: #999; }

.gray_bg:hover { background: #666; }

.close_bg { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transition-duration: 1s; }

/* header */
/*======================== */
header { background: #fff; border-bottom: 10px solid #fd748d; width: 100%; height: 53px; position: fixed; left: 0; top: 0; z-index: 4; }

header .h-inner { width: 96%; margin: 7px auto 0; }

header .open_btn { position: relative; width: 30px; height: 20px; background: transparent; border: 0; }

header .open_btn span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 5px; background: #333; }

header .open_btn span:first-child { top: 0; }

header .open_btn span:nth-child(2) { top: 45%; transform: rotateY(-50%); }

header .open_btn span:last-child { bottom: 0; }

header h1 a { display: block; width: 130px; padding-bottom: calc(100%*373/1617); background: url("../img/logo-text.svg") no-repeat; background-size: 100% auto; }

header .header-buttons { display: flex; }

header .header-buttons .header-button { margin: 0 10px }

header .header-buttons .header-button i { font-size: 1.8em; position: relative; }

header .cart i span { position: absolute; left: -5px; bottom: -5px; display: block; width: 17px; padding: 4px 0; font-size: .4em; background: #fd4b37; color: white; text-align: center; border-radius: 50%; }

nav { position: fixed; top: 0; left: 0; width: 70%; height: 100vh; max-width: 270px; background: #fff; padding: 20px 0; transform: translateX(-100%); transition: all .2s ease-in-out; z-index: 6; }

nav a { display: block; padding: 15px 10px; border-bottom: 1px solid #e9e9e9; }

nav a i { color: #fd748d; font-size: 1.6em; margin-right: 10px; vertical-align: middle; }

/* menu-open */
/* ============================= */
.menu-open nav { transform: translateX(0); }

.menu-open .close_bg { visibility: visible; opacity: 1; background: rgba(0, 0, 0, 0.5); transition-duration: 1s; z-index: 5; }

/* footer */
/* ============================= */
.footer { margin-top: auto; width: 100%; padding: 1em 0 .5em; background: #fd748d; }

.footer__link { justify-content: center; padding-bottom: .5em; }

.footer__link a { margin-right: 1em; }

.footer__link a:last-child { margin-right: 0; }

.footer p { text-align: center; }

/* error */
/* ============================= */
.err-msg { margin: 1.5em 0; color: #b50000 !important; }

#error__503 { width: 100%; height: 100vh; background: url("../img/coming_soon__pc.jpg?11") no-repeat top left; background-size: cover; }

/*checkbox*/
.stop_list .checkbox_bs { width: 32px;height: 35px; margin-right:1rem;appearance: auto !important;padding-right: 26px !important; -webkit-appearance: checkbox;}
.stop_list .flex-start{ margin-bottom: 1rem; width: 100%}
.stop_list .flex-start p { margin-right: 1rem; }
.stop_list .flex-start p:last-child { margin-right: 0; }
.stop_list .flex-start div { width: calc(100% - 9em); }


/* under 768px */
/* ============================= */
@media all and (max-width: 768px) { html { font-size: 12px; }
  #wrapper main { padding: 80px 0 50px; }
  section { width: 94%; padding: 4%; }
  input { padding: 5px 7px; }
  .select select { min-width: 70px; padding: 5px 25px 5px 7px; }
  .select::after { right: 15px; }
  header .open_btn { width: 25px; }
  #error__503 { background-image: url("../img/coming_soon__sp.jpg"); } }

/* ie 対応 */
/* ============================= */
@media all and (-ms-high-contrast: none) { #wrapper { display: block; }
  .footer { position: absolute; bottom: 0; }
  select::-ms-expand { display: none; } }