@charset "utf-8";
/* plan
=========================================*/
.datepicker-icon {
    cursor: pointer;
}
.footBtn.disabled {
    pointer-events: none;
    opacity: 0.7;
    cursor: not-allowed;
}
.tableStatusWrap {
    position: relative;
}
.tableStatusOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-image: url(../../img/plus/v2/common/loader.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #000;
    opacity: 0.1;
}
.calendarVal {
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.calendarVal.closeMark {
    background-image: url(../../img/plus/v2/common/icon_close_black.svg);
}
.calendarVal.triangleMark {
    background-image: url(../../img/plus/v2/common/icon_triangle.svg);
}
.calendarVal.circleMark {
    background-image: url(../../img/plus/v2/common/icon_circle.svg);
}

#mainContents {
    margin-bottom: 100px;
}
.priceBox {
    margin-bottom: 20px;
}
.priceBox .fL {
    width: 30%;
}
.priceBox .fR {
    width: 68%
}
.priceBox .price {
    font-weight: bold;
    font-size: 28px;
    display: inline-block;
}
.priceBox .price .tax {
    font-size: 14px;
    font-weight: normal;
}
.priceBox .tpoint {
    display: inline-block;
    color: #014198;
    background-image: url(../../images/tpoint/vpoint_logo.png);
    background-repeat: no-repeat;
    background-position: 2% 45%;
    background-size: 13px auto;
    padding-left: 23px;
    margin-left: 20px;
}
.priceBox .tpoint span {
    font-size: 12px;
    color: #000
}
.priceBox .mrso {
    vertical-align: middle;
    margin-left: 10px;
}
.priceBox .detail a {
    border-radius: 5px;
    border: 1px solid #666666;
    padding: 5px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 30px;
}
.priceBox .detail a:before {
    background-color: #F3F3F3;
}
.priceBox .detail a span {
    background-image: url(../../img/plus/plan/icon_search.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 30px;
}
.tableStatus {
    border-collapse: collapse;
    border: 1px solid #dcdcd6;
    margin: 00px 0 0px;
    width: 100%;
}
.tableStatus tr {
    border-bottom: 1px solid #ccc
}
.tableStatus th, .tableStatus td {
    padding: 10px 0;
    font-size: 16px;
    border: 1px solid #dcdcd6;
    text-align: center;
    width: calc(100%/6)
}
.tableStatus th {
    background-color: #f3f3f3;
}
.tableStatus td img {
    vertical-align: middle
}
.planList li {
    margin-bottom: 60px
}
.reservBox {
    background-color: #F3F3F3;
    width: 90%;
    margin: 0 auto
}
.reservBox h4 {
    background-color: #FA7900;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    cursor: pointer
}
.reservBox h4 span {
    background-image: url(../../img/plus/v2/common/icon_arrow_down.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    padding-right: 25px;
    background-size: 15px auto;
}
.reservBox h4.active span {
    background-image: url(../../img/plus/v2/common/icon_arrow_up.png);
}
.reservBox .toggleBox {
    padding: 40px;
    display: none
}
.reservBox .toggleBox h5 {
    text-align: center;
    font-size: 20px;
}
.reservBox .toggleBox p.note {
    text-align: center;
    font-size: 14px;
}
.reservBox .toggleBox h6 {
    font-size: 16px;
    font-weight: bold;
    border-left: 3px solid #666;
    line-height: 1.2;
    padding-left: 15px;
    margin-bottom: 10px;
    color: #666;
    margin-top: 40px;
}
.reservBox .toggleBox h6.required {
    border-left: 3px solid #00AE9F;
    color: #000
}
.reservBox dl.requiredItem {
    display: flex;
    flex-wrap: wrap;
}
.reservBox dl dt {
    margin-top: 0px;
    float: none;
    clear: both;
}
.reservBox dl.requiredItem dt {
    width: 100%;
}
.reservBox dl dt:first-child {
    margin-top: 20px
}
.reservBox dt {
    background-color: #00AE9F;
    padding: 10px 15px;
    color: #FFFFFF;
    overflow: hidden;
}
.reservBox .anyItem dt {
    background-color: #779996;
}
.reservBox dt .optionLabel {
    display: block;
    float: left;
}
.reservBox dt .detail {
    display: block;
    float: right;
}
.reservBox dt .detail a {
    background-image: url(../../img/plus/v2/common/icon_search_white.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 20px;
    color: #FFFFFF;
}
.reservBox dd .detail {
    display: block;
    float: right;
    margin-top: 10px;
}
.reservBox dd .detail a {
    background-image: url(../../img/plus/v2/common/icon_search_green.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 20px;
    color: #000;
}
.reservBox dd {
    background-color: #FFFFFF;
    padding: 10px 15px;
    float: left;
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
}
.reservBox dd.half {
    width: 50%;
    border-right: 1px solid #E8E8E8;
    border-bottom: 0px solid #E8E8E8;
}
.reservBox dd.half.left {
    border-right: 0px solid #E8E8E8;
    border-bottom: 0px solid #E8E8E8;
}
.reservBox dl.requiredItem dd .optionItemLabel {
    top: 50%;
    transform: translateY(-50%);
}
.reservBox dl.requiredItem dd .optionItemLabel.radio::before {
    margin-top: 0;
    top: calc(50% - 4px);/* 4pxはチェックマークの高さ（10px）の半分+微調整 */
}
.reservBox dl.requiredItem dd .optionItemLabel.checkbox::before {
    margin-top: 0;
    top: calc(50% - 6px);/* 6pxはチェックマークの高さ（9px）の半分+微調整 */
}
.reservBox dl.requiredItem dd .optionItemLabel.radio:after
, .reservBox dl.requiredItem dd .optionItemLabel.checkbox:after {
    margin-top: 0;
    top: calc(50% - 11px);/* 11pxはラジオボタン／チェックボックスの高さ（22px）の半分 */
}
.reservBox .reservBtn {
    margin: 20px 0;
    text-align: center;
}
#planFooter .reservBtn {
	position: relative;
}
.selectedBox .reservBtn {
    margin: 20px 0;
    text-align: center;
}
.backBtn {
    text-align:center;
}
.reservBox .reservBtn a, #planFooter .reservBtn a, .selectedBox .reservBtn a, .backBtn a {
    padding: 10px 30px 10px 30px;
    border-radius: 3px;
}
.reservBox .reservBtn a, #planFooter .reservBtn a, .selectedBox .reservBtn a {
    color: #FFFFFF;
    background-color: #FA7900;
}
.backBtn a {
    color: #015CA2;
    background-color: #FFF;
    border: 1px solid #01408D;
}
.reservBox .reservBtn a:after, #planFooter .reservBtn a:after, .selectedBox .reservBtn a:after, .backBtn a:after {
    position: relative;
    top: 0px;
    margin-left: 10px;
}
.reservBox .reservBtn a:after, #planFooter .reservBtn a:after, .selectedBox .reservBtn a:after {
    content: url(../../img/plus/v2/common/icon_arrow_white.svg);
}
.backBtn a:after {
    content: url(../../img/plus/v2/common/icon_arrow_blue.svg);
    top: 1px;
}
.reservBox .reservBtn a:before, #planFooter .reservBtn a:before, .selectedBox .reservBtn a:before {
    background-color: #FF912A;
}
.reservBox .spCloseBtn {
    background-image: url(../../img/plus/v2/common/icon_close_black.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 20px;
    margin: 20px auto;
    cursor: pointer;
    width: 80px
}
.priceFloatBox {
    background-color: #4C4C4C;
    padding: 0px 0 10px;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 5
}
.priceFloatBox div {
    display: inline-block
}
.priceFloatBox div.sp-only {
    display: none
}
.priceFloatBox .ttl {
    border: 2px solid #fff;
    font-size: 20px;
    padding: 3px 10px;
    font-weight: bold;
    margin-right: 10px;
}
.priceFloatBox .price {
    font-size: 40px;
    font-weight: bold;
    position: relative;
    top: 7px;
}
.priceFloatBox .price span.yen {
    font-size: 28px;
}
.priceFloatBox .footNoplanBox {
    color: #ff3;
}
.priceFloatBox .reservBtn a {
	background-color: #FA7900;
	color: #FFFFFF;
	font-size: 20px;
	padding: 10px 40px;
	border-radius: 5px;
	font-weight: bold;
  top:15px;
}
_::-webkit-full-page-media, _:future, :root .priceFloatBox .reservBtn a {
  top:0px;}

.priceFloatBox .reservBtn a:before {
    background-color: #FACA00;
}
.sub .ttl {
    background-color: #00AE9F;
    color: #FFFFFF;
    padding: 10px 0;
    text-align: center;
}
.sub .choiceBox {
    border: 1px solid #dcdcd6
}
.sub .choiceBox dt {
    padding: 10px 10px;
    background-color: #F3F3F3;
}
.sub .choiceBox dd {
    padding: 10px 10px;
    font-size: 14px;
}
.sub .choiceBox dd .option {
    padding: 10px 0;
    border-bottom: 1px solid #dcdcd6
}
.sub .choiceBox dd .option:last-child {
    border-bottom: 0px solid #dcdcd6
}
.sub .choiceBox dd .price {
    text-align: right;
}
.sub .choiceBox dd .price span {
    font-weight: bold
}
.sub .choiceBox dd .calendarIcon {
    background-image: url(../../img/plus/v2/common/icon_calender.svg);
}
.sub .sidePriceBox {
    padding: 10px 0;
    text-align: right;
    font-size: 14px;
}
.sub .sidePriceBox .price {
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}
.sub .sidePriceBox .en {
    font-size: 16px;
    font-weight: bold;
}
#topBtn {
    position: fixed;
    right: 10px;
    bottom: 96px;
}
@media screen and (max-width: 767px) {
    #mainContents {
        margin-bottom: 20px
    }
    .priceBox {
        margin-bottom: 10px;
    }
    .priceBox .thumb {
        float: left;
        width: 45%;
    }
    .priceBox .fR {
        width: 100%
    }
    .priceBox .priceDetail {
        float: right;
        text-align: right;
        width: 53%;
    }
    .priceBox .status {
        clear: both;
        float: none;
    }
    .priceBox .status:before {
        content: "";
        clear: both;
        display: block;
    }
    .priceBox .status p {
        margin-top: 20px;
        margin-bottom: 5px;
    }
    .priceBox .status p span {
        font-size: 80%
    }
    .priceBox .price {
        font-size: 20px;
        line-height: 1.0
    }
    .priceBox .price .tax {
        font-size: 12px;
        font-weight: normal;
    }
    .priceBox .tpoint {
        background-position: 0% 48%;
        background-size: 14px auto;
        padding-left: 18px;
        margin-left: 0px;
        font-size: 12px;
    }
    .priceBox .tpoint span {
        font-size: 12px;
        color: #000
    }
    .priceBox .mrso {
        display: none
    }
    .priceBox .detail a {
        padding: 5px 25px;
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 10px;
    }
    .tableStatus {
        margin: 0px 0 10px;
    }
    .tableStatus th, .tableStatus td {
        font-size: 14px;
        padding: 5px 0;
    }
    .tableStatus td img {
        vertical-align: middle;
        width: 30%
    }
    .planList li {
        margin-bottom: 30px
    }
    .reservBox {
        width: 100%;
    }
    .reservBox h4 {
        font-size: 16px;
        padding: 10px 0;
    }
    .reservBox .toggleBox {
        padding: 10px;
        display: none
    }
    .reservBox .toggleBox h5 {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 1em;
    }
    .reservBox .toggleBox p.note {
      text-align: left;
    }
    .reservBox .toggleBox h6 {
        font-size: 16px;
        padding-left: 10px;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    .reservBox dl dt {
        margin-top: 0px;
        float: none;
        clear: both;
    }
    .reservBox dl dt:first-child {
        margin-top: 10px
    }
    .reservBox dt {
        padding: 10px 15px;
    }
    .reservBox .anyItem dt {
        background-color: #779996;
    }
    .reservBox dt .optionLabel {
        display: block;
        float: left;
    }
    .reservBox dt .detail {
        display: block;
        float: right;
    }
    .reservBox dt .detail a {
        background-image: url(../../img/plus/v2/common/icon_search_white.svg);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 20px;
        color: #FFFFFF;
    }
    .reservBox dd .detail {
        display: block;
        float: none;
        margin-top: 10px;
        width: 100%;
        text-align: right;
    }
    .reservBox dd .detail a {
        padding-left: 20px;
        text-align: right;
    }
    .reservBox dd {
        padding: 10px 10px 10px 0px;
        float: none;
        width: 100%;
        border-bottom: 1px solid #E8E8E8;
    }
    .reservBox dd.half {
        width: 100%;
        border-right: 0px solid #E8E8E8;
        border-bottom: 1px solid #E8E8E8;
    }
    .reservBox dd.half.left {
        border-right: 0px solid #E8E8E8;
        border-bottom: 0px solid #E8E8E8;
    }
    .reservBox .reservBtn {
        margin-top: 20px;
    }
    #planFooter .reservBtn {
        margin: 0px auto 150px;
        text-align: center;
    }
    .selectedBox .reservBtn {
        margin-top: 20px;
    }
    .reservBox .reservBtn a, #planFooter .reservBtn a, .selectedBox .reservBtn a, .backBtn a {
        padding: 10px 30px 10px 30px;
    }
    .reservBox .reservBtn a:after, #planFooter .reservBtn a:after, .selectedBox .reservBtn a:after {
        top: 0px;
        margin-left: 10px;
    }
    .reservBox .reservBtn a:before, #planFooter .reservBtn a:before, .selectedBox .reservBtn a:bofore {
        background-color: #FF912A;
    }
    .priceFloatBox {
        padding: 20px 0 10px;
    }
    .priceFloatBox div {
        display: inline-block;
    }
    .priceFloatBox .ttl {
        border: 0px solid #fff;
        font-size: 14px;
        padding: 0px;
        margin-right: 10px;
        display: inline-block;
    }
    .priceFloatBox .price {
        font-size: 18px;
        top: 0px;
        margin-right: 20px;
    }
    .priceFloatBox .price span.yen {
        font-size: 18px;
    }
    .btnWrapper {
        text-align: center;
        width: 100%;
    }
    .priceFloatBox .reservBtn, .priceFloatBox .detailBtn {
        width: 49%;
        z-index: 1;
        position: relative;
        margin: 0px 0px 5px !important;
    }
    .priceFloatBox .reservBtn a {
        background-color: #FA7900;
        color: #FFFFFF;
        font-size: 12px;
        padding: 10px 0px 10px 0px !important;
        border-radius: 5px;
        font-weight: bold;
        position: relative;
        top: 0px;
        display: block;
    }
    .priceFloatBox .reservBtn a:after {
        display: none !important
    }
    .priceFloatBox .detailBtn a {
        background-color: #fff;
        color: #25bcb1;
        font-size: 12px;
        padding: 10px 0px;
        border-radius: 5px;
        font-weight: bold;
        position: relative;
        top: 0px;
        display: block;
    }
    .priceFloatBox .detailBtn:after {
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px;
        border: 10px solid transparent;
        border-bottom: 10px solid #fff;
        z-index: 3
    }
    .sub .ttl {
        background-color: #00AE9F;
        color: #FFFFFF;
        padding: 10px 0;
        text-align: center;
    }
    .sub .choiceBox {
        border: 1px solid #dcdcd6
    }
    .sub .choiceBox dt {
        padding: 10px 10px;
        background-color: #F3F3F3;
    }
    .sub .choiceBox dd {
        padding: 10px 10px;
        font-size: 14px;
    }
    .sub .choiceBox dd .option {
        padding: 10px 0;
        border-bottom: 1px solid #dcdcd6
    }
    .sub .choiceBox dd .option:last-child {
        border-bottom: 0px solid #dcdcd6
    }
    .sub .choiceBox dd .option .price span {
        font-weight: bold;
    }
    .sub .sidePriceBox {
        padding: 10px 0;
        text-align: right;
        font-size: 14px;
    }
    .sub .sidePriceBox .price {
        font-size: 20px;
        font-weight: bold;
        margin-left: 10px;
    }
    .sub .sidePriceBox .en {
        font-size: 16px;
        font-weight: bold;
    }
    #topBtn {
        right: 5px;
        bottom: 109px;
    }
}
.narrowBtn {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #666666;
    padding: 10px 40px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    position: relative;
    background-color: #FFFFFF;
    margin-bottom: 30px;
}
.narrowBtn.active {
    border-bottom: 0px solid #666666;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 0px;
}
.narrowBtn span {
    background-image: url(../../img/plus/v2/common/icon_narrow.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 30px;
}
.toggleContents {
    display: none;
}
.narrowBox {
    border: 1px solid #000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
    position: relative;
    background-color: #FFFFFF;
    padding: 30px 60px;
    border-top-right-radius: 5px;
    z-index: 1;
    top: -1px;
}
.narrowBox .headding {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}
.narrowBox .narrow > .fL {
    width: 40%;
}
.narrowBox .narrow > .fR {
    width: 60%;
}
.narrowBox .while {
    margin: 10px 10px
}
.formBox {
    margin-bottom: 10px
}
.narrowBox select {
    width: 175px;
}
.narrowBox input[type="text"] {
    width: 140px;
}
.formBox img {
    vertical-align: middle
}
.weekList {
    display: flex;
    flex-wrap: wrap;
}
.weekList li {
    margin-bottom: 10px
}
.inspectionList {
    display: flex;
    flex-wrap: wrap;
}
.inspectionList li {
    width: 50%;
    margin-bottom: 10px
}
.narrowBoxBottom {
    border-top: 1px solid #CCCCCC;
    margin-top: 10px;
    padding-top: 30px;
    text-align: center;
}
.narrowBoxBottom div {
    display: inline-block
}
.narrowBoxBottom .applicable {
    font-size: 14px;
    position: relative;
    bottom: 20px;
}
_::-webkit-full-page-media, _:future, :root .narrowBoxBottom .applicable {
    bottom: 0px;
}
.narrowBoxBottom .applicable .num {
    font-size: 20px
}
.narrowBoxBottom .clearBtn a {
    display: block;
    border: 1px solid #000000;
    padding: 10px 0px;
    text-align: center;
    border-radius: 5px;
    width: 220px;
}
.narrowBoxBottom .narrowDownBtn a {
    display: block;
    border: 1px solid #FA7900;
    padding: 10px 0px;
    text-align: center;
    border-radius: 5px;
    width: 220px;
    background-color: #FA7900;
    color: #FFFFFF;
}
.narrowBoxBottom .clearBtn a:before {
    background-color: #ccc;
}
.narrowBoxBottom .narrowDownBtn a:before {
    background-color: #FFB775;
}
@media screen and (max-width: 767px) {
    .narrowBtn {
        display: block;
        padding: 10px 40px;
        margin: 10px auto;
        width: 70%;
    }
    .narrowBox {
        border-left: 0px;
        border-right: 0px;
        margin-bottom: 30px;
        padding: 20px 4%;
        margin-left: -4%;
        margin-right: -4%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .narrowBox .narrow > .fL {
        width: 100%;
    }
    .narrowBox .narrow > .fR {
        width: 100%;
    }
    .narrowBox .while {
        margin: 10px 10px
    }
    .formBox {
        margin-bottom: 10px
    }
    .formBox > .fL {
        width: 40%;
        display: inline-block;
    }
    .formBox > .fL.while {
        width: 10%;
        text-align: center;
    }
    .narrowBox select {
        width: 100%;
    }
    .narrowBox input[type="text"] {
        width: 80%;
    }
    .formBox img {
        vertical-align: middle;
        width: 13%
    }
    .inspectionList li {
        width: 100%;
    }
    .narrowBoxBottom {
        border-top: 0px solid #CCCCCC;
        margin-top: 10px;
        padding-top: 0px;
    }
    .narrowBoxBottom div {
        display: block
    }
    .narrowBoxBottom .applicable {
        font-size: 14px;
        position: relative;
        top: 0px;
    }
    .narrowBoxBottom .applicable .num {
        font-size: 20px
    }
    .narrowBoxBottom .clearBtn a {
        margin: 0 auto 10px;
        width: 80%;
    }
    .narrowBoxBottom .narrowDownBtn a {
        margin: 0 auto;
        width: 80%;
    }
}