@charset 'utf-8';
@import url(common.css);

html {font-size: 24px;}
#wrap {max-width: 540px; margin-left: auto; margin-right: auto; min-height: 100vh; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
#wrap:has(footer nav) {padding-bottom: 7rem}
#wrap:has(.sub-top) header {display: none}
#wrap:has(.footer-none) footer {display: none}
.swiper {border-radius: 1.25rem;}
.swiper .swiper-pagination {width: 100%;position: static; bottom: 0;margin-top: 1rem; font-size: 0; }
.swiper .swiper-pagination-bullet {transition: all 0.3s;opacity: 1;background: #d3d3d3;width: 6px;height: 6px;border-radius: 1rem;}
.swiper .swiper-pagination-bullet-active {background-color: var(--main);}

/* -------------------
common               |
------------------- */
/* header */
header {}
header h1 {margin: 0 auto; font-size: 1rem;}
header h1 a {text-align: center;display: inline-flex;align-items:center; font-size:1.5rem; gap:.5rem}
header h1 img {max-height: 1.375rem;}
header .top-logo-area {display: flex; padding: 1.5rem 0; align-items: center;}

/* footer */
footer {background: #000;color:#fff;padding: 1.5rem 0;}
footer div {margin-bottom: .5rem;}
footer img {max-height:1rem}
footer address {font-size:90%;display: block;margin-top: .5rem;}

/* -------------------
INDEX                |
------------------- */
.main-content {min-height:calc(100dvh - 17rem)}
.main-content h3 {font-size: 1.333rem; text-align: center;margin-top: 2rem;margin-bottom: 1rem;}
.main-content .g-box {margin-left: -1rem;margin-right: -1rem; border-radius: 0;display: flex;}
.main-content .g-box.bd {border:3px solid transparent;}
.main-content .tab-item.active .g-box.bd {border-color: var(--main)}
.main-content .tab-item:nth-child(2).active .g-box.bd {border-color: var(--blue)}
.main-content .tab-nav {margin-left: -1rem;margin-right: -1rem;}
.main-content .tab-nav li {position: relative;width: 50%;flex-grow:1;padding-left: 0;padding-right: 0;text-align: center;display: flex;align-items:center;justify-content:center}
.main-content .tab-nav li:nth-child(2).active  {background: var(--blue);}
.main-content .tab-nav .bi {margin-left: 5px;cursor:pointer}
.main-content .tab-item .g-box.bd {/* height: 14rem; */;}
.main-content .tab-item .help-block {margin-top: .5rem;text-align: center;}
.main-content .btn {font-size:1.125rem;}
fieldset legend {font-size: 1.2rem; text-align: center; font-weight: 500; margin-bottom: .5rem}
fieldset .form-control {font-size: 1.333rem; text-align: center; letter-spacing: .25em; font-weight: 500;}
.guide {margin: 2rem 0 1rem;text-align: center;color:var(--pink)}
.guide .r-box {border-radius:2rem;max-width:200px;margin: 0 auto;background: var(--pink);color:#fff;padding: .5em 1em;font-size:1.4rem;font-weight: bold;}
.guide b {display: block;font-size:1.4rem;margin: .5rem 0;}
.layer {position: absolute;left:0;top:100%;background: #fff;padding: 1rem;padding-top: 2rem;border: 1px solid var(--main);text-align: left;border-radius:1rem;display: none;color:#111;z-index: 2;min-width:120%;}
.layer span {position: absolute;right:1rem;top:.5rem;cursor:pointer}

/* -------------------
SUB                  |
------------------- */
.sub-top {position: sticky;top: 0;height: 3.125rem;background-color: #fff;z-index: 10; border-bottom: 1px solid #e5e5e5;}
.sub-top:has(.go-back) h1 {margin-right: 2.5rem;}
.sub-top h1 {font-size: 1rem; margin-bottom: 0; flex-grow: 1;}
.sub-top .container {display: flex;align-items: center;height: 100%;}
.sub-top .go-back {font-size: 1.25rem;width: 1.5rem; text-indent: -.25rem}
.sub-top .go-back.set {background: url(../img/ic_set_w.png) no-repeat 0 50%;}
.sub-top .home {font-size: 0;margin-right: -.35rem}
.sub-top .home img {max-height: 2.083rem}

.sub-content {padding: 1.5rem 0; /* overflow-x: hidden */}
.sub-content h2 {font-size: 1.6rem; margin-top: 2rem;margin-bottom: 1.5rem; display: flex; align-items: center}
.sub-content h2:first-child {margin-top: 0}
.sub-content h2+p {margin-top: -1rem;margin-bottom: 1.5rem}
.sub-content h3 {font-size: 1.333rem; margin-top: 2rem;margin-bottom: 1.5rem; display: flex; align-items: center}
.sub-content h3:first-child {margin-top: 0}
.sub-content h3+p {margin-top: -1rem;margin-bottom: 1.5rem;line-height: 1.2;}
.sub-content h4 {font-size: 1.2rem; margin-top: 2rem;margin-bottom: 1.5rem; display: flex; align-items: center}
.guide-text {font-size: 2rem;margin-top: 2rem; margin-bottom: 1.5rem;line-height: 1.3}
.img img {width: 100%;}
.lead {font-size: 1.333rem; text-align: center; font-weight: normal; margin: 2rem 0 1rem}

.g-box.no {text-align: center; font-size: 1.5rem; font-weight: 500}

/* form */
.form {}
.form.table {border-bottom: 1px solid #e5e5e5}
.form.table>.form-row {border-top: 1px solid #e5e5e5;padding: 0 .25rem; min-height: 3.125rem}
.form.table>.form-row+.form-row {margin-top: 0}
.form.table .form-control {padding: 0; border: 0;}
.form.table .form-row {align-items: center}
.form.table.bg {background-color: #F0F0F0; border-radius: .5rem;border-top: 0; overflow: hidden}
.form.table.bg .form-control {text-align: center}
.form.table.bg .form-control.cal {background-color: transparent}
.form.table.bg .form-row {padding: .25rem 1rem}
.form.table.bg .form-row:first-child {border-top: 0}
.col-form-label {align-self: center}
.form .form-row+.form-row {margin-top: 1rem;}
.form .form-row .row+.row {margin-top: .5rem;}
.form .form-row.has-btn {position: relative}
.form .form-row.has-btn .form-control {padding-right: 9rem}
.form .form-row.has-btn .btn {border-radius: .25rem;padding: .25rem .5rem;position: absolute;right: 1.5rem;top: 50%;transform: translate(0, -50%);width: auto}
.form-row .btn {width: 100%;}
.form-row .col-12+.col-12 {margin-top: .5rem;}
.input-group .btn {min-width: 5rem; border: 0;}
dl.price {display: flex;margin: 1.5rem 0; font-size: 1.333rem}
dl.price dd {margin-left: auto;}

/* list */
.list li {background-color: #E7F8FE; border-radius: .5rem;padding: 1rem; font-size:1.1rem}
.list li+li {margin-top: .5rem}
.list li:has(.state) {padding-right: 4.5rem;position: relative;}
.list li.end {background-color: #F0F0F0}
.list li.end .state {background-color: #BEBEBE}
.list li .state {position: absolute;top: 50%;right: 1rem; transform: translate(0, -50%); width: 3.125rem; height: 3.125rem; border-radius: 50%; display: flex; align-items: center;justify-content: center; color: #fff;background-color: var(--blue)}
.list li .badge {border-radius: .25rem;padding: .5rem .75rem;background: var(--main);margin-bottom: .25rem;}
.list li .badge.oneday {background: var(--blue);}


@media (max-width: 480px) {
    html {font-size: 13px}
}

@media (max-width: 320px) {
    html {font-size: 10px}
}