@charset "utf-8";
/* CSS Document */
.parts-rigth-banner-area,.online-counseling-reservation-link-area,.online-counseling-reservation-link-sp-area{ display: none !important;}
.first-view-area{ background-image: url("../images/ocr-main-photo-01.png"); background-position: right center; background-repeat: no-repeat; background-size: contain; height: 80vh; position: relative; width: 100%;}
.first-view-area p,.first-view-area img{ position: absolute;}
.first-view-area p{ color: #289404; font-size: 62px; font-weight: bold; left: 40px; text-shadow: 3px 3px 3px #ffffff; top: 22%; z-index: 1;}
.first-view-area a{ background: -webkit-linear-gradient(top,#ff5c0f,#ff5c0f 80%,#d83c00); background: linear-gradient(top,#ff5c0f,#ff5c0f 80%,#d83c00); border-radius: 50%; bottom: 110px; color: #ffff00; height: 150px; font-size: 26px; font-weight: bold; left: calc(50% - 75px); line-height: 150px; position: absolute; text-align: center; width: 150px;}
.first-view-area a:hover + img{ opacity: .4;}
.first-view-area .image{ bottom: 0; height: auto; left: 30px; width: 26vw;}
.first-view-area .arrow{ bottom: 20px; left: calc(50% - 27px);}
p{ font-size: 18px; line-height: 28px;}
.ocr-introduction-area p{ text-align: center;}
.ocr-introduction-area ul{ margin-top: 60px; width: 100%;}
.ocr-introduction-area ul li{ width: 212px;}
.ocr-introduction-area ul li div{ background-image: url("../images/ocr-photo-01.png"); height: 184px; margin-bottom: 10px; text-indent: -9999px;}
.ocr-introduction-area ul li:first-child div{ background-position: center 0;}
.ocr-introduction-area ul li:nth-child(2) div{ background-position: center -200px;}
.ocr-introduction-area ul li:last-child div{ background-position: center -400px;}
.ocr-recommended-area ul{ margin: 60px auto 0; width: 910px;}
.ocr-recommended-area ul li{ border: 5px solid #289404; margin-bottom: 160px; position: relative; width: 230px;}
.ocr-recommended-area ul li::before,.ocr-recommended-area ul li::after{ background-image: url("../images/ocr-photo-02.png"); content: ""; position: absolute;}
.ocr-recommended-area ul li::before{ background-position: center -1080px; bottom: -46px; height: 46px; right: 110px; width: 88px;}
.ocr-recommended-area ul li::after{ bottom: -120px; height: 146px; right: 20px; width: 88px;}
.ocr-recommended-area ul li:first-child::after{ background-position: center 0;}
.ocr-recommended-area ul li:nth-child(2)::after{ background-position: center -180px;}
.ocr-recommended-area ul li:nth-child(3)::after{ background-position: center -360px;}
.ocr-recommended-area ul li:nth-child(4)::after{ background-position: center -540px;}
.ocr-recommended-area ul li:nth-child(5)::after{ background-position: center -720px;}
.ocr-recommended-area ul li:last-child::after{ background-position: center -900px;}
.ocr-recommended-area ul li p{ font-size: 16px; padding: 26px 0; text-align: center;}
.ocr-procedure-area dl{ margin: 60px auto 0; padding-left: 160px; width: 660px;}
.ocr-procedure-area dl dt{ position: relative;}
.ocr-procedure-area dl dt::before,.ocr-procedure-area dl dt::after{ content: ""; display: block; left: -160px; position: absolute;}
.ocr-procedure-area dl dt::before{ background-color: #289404; border-radius: 50%; height: 146px; top: -42px; width: 146px;}
.ocr-procedure-area dl dt::after{ color: #ffffff; font-size: 32px; font-weight: bold; text-align: center; top: 8px; width: 146px;}
.ocr-procedure-area dl dt:first-child::after{ content: "Step 1";}
.ocr-procedure-area dl dt:nth-child(3)::after{ content: "Step 2";}
.ocr-procedure-area dl dt:nth-child(5)::after{ content: "Step 3";}
.ocr-procedure-area dl dt p{ font-size: 24px; font-weight: bold;}
.ocr-procedure-area dl dd{ margin-bottom: 140px;}
.ocr-procedure-area dl dd:nth-child(4){ margin-bottom: 110px;}
.ocr-procedure-area dl dd:last-child{ margin-bottom: 40px;}
.ocr-overview-table{ margin-top: 60px;}
.ocr-overview-table tr{ border-bottom: 3px solid #ffffff;}
.ocr-overview-table th,.ocr-overview-table td{ padding: 20px;}
.ocr-overview-table th{ background-color: #c0eda7; color: #289404; text-align: left; vertical-align: top; width: 260px;}
.ocr-overview-table tr:nth-child(odd) td{ background-color: #f8fef4;}
.ocr-overview-table td a{ font-weight: bold; margin: 0 8px; text-decoration: underline;}
.ocr-overview-table td span{ color: #ff0000; display: block; font-size: 14px; line-height: 20px; padding-left: 14px;}
.ocr-overview-table td span::before{ content: "＊"; display: inline-block; margin-left: -14px;}
.ocr-reservation-table,.ocr-verification-table{ border-bottom: 4px solid #289404; border-top: 4px solid #289404; margin: 60px auto 20px; width: 900px;}
.ocr-reservation-table tr:nth-child(odd),.ocr-verification-table tr:nth-child(odd){ background-color: #d5eace;}
.ocr-reservation-table th,.ocr-reservation-table td,.ocr-verification-table th,.ocr-verification-table td{ font-size: 0; padding: 6px 10px;}
.ocr-reservation-table th{ width: 180px;}
.ocr-reservation-table th p{ font-size: 15px; text-align: left; position: relative;}
.ocr-reservation-table th p::after{ background-color: #ffffff; display: inline-block; font-size: 12px !important; font-weight: bold; line-height: 14px; padding: 2px 6px; position: absolute; right: 0; top: calc(50% - 10px);}
.ocr-reservation-table th .mandatory::after{ border: 1px solid #ff0000; color: #ff0000; content: "必須";}
.ocr-reservation-table th .any::after{ border: 1px solid #4a5297; color: #4a5297; content: "任意";}
.ocr-reservation-table td:nth-child(2){ border-left: 1px solid #289404; border-right: 1px solid #289404;}
.ocr-reservation-table td:nth-child(2) select{ font-size: 16px; height: 30px; padding: 2.5px 4px 0; width: 100%;}
.ocr-reservation-table tr:nth-child(5) td:nth-child(2) select{ margin: 4px 0;}
.ocr-reservation-table td:nth-child(2) p{ color: #ff0000; font-size: 14px; font-weight: bold; line-height: 18px;}
.ocr-reservation-table td:nth-child(2) input{ font-size: 14px; margin: 4px 0; padding: 4px 6px; width: calc(100% - 16px);}
.ocr-reservation-table td:nth-child(2) ul::after,.confirmation-area::after{ clear: both; content: ""; display: block;}
.desired-time li{ margin-bottom: 6px; padding-left: 120px; position: relative;}
.desired-time li::before{ display: inline-block; font-size: 14px; margin-right: 6px; left: 0; position: absolute; top: 8px;}
.desired-time li:first-child::before{ content: "第１希望";}
.desired-time li:nth-child(2)::before{ content: "第２希望";}
.desired-time li:last-child::before{ content: "第３希望";}
.ocr-reservation-table td:nth-child(2) .desired-time li::after{ background-color: #ffffff; display: inline-block; font-size: 12px !important; font-weight: bold; left: 68px; line-height: 14px; padding: 2px 6px; position: absolute; top: 8px;}
.ocr-reservation-table td:nth-child(2) .desired-time li:first-child::after{ border: 1px solid #ff0000; color: #ff0000; content: "必須";}
.ocr-reservation-table td:nth-child(2) .desired-time li:nth-child(2)::after,.ocr-reservation-table td:nth-child(2) .desired-time li:last-child::after{ border: 1px solid #4a5297; color: #4a5297; content: "任意";}
.ocr-reservation-table td:nth-child(2) .desired-time li input{ background-image: url("../images/calendar-icon-01.png"); background-position: 8px center; background-repeat: no-repeat; border: 1px solid #767676; margin-right: 10px; padding-left: 30px; width: calc(100% - 170px);}
.ocr-reservation-table td:nth-child(2) .desired-time li select{ font-size: 12px; vertical-align: sub; width: auto;}
.ocr-reservation-table td:nth-child(2) .checkbox li{ float: left; margin: 6px 0; width: 50%;}
.ocr-reservation-table td:nth-child(2) textarea{ font-size: 16px; height: 120px; padding: 4px 6px; width: calc(100% - 16px);}
.ocr-reservation-table td:last-child{ width: 210px;}
.ocr-reservation-table td:last-child p{ font-size: 12px; line-height: 16px; pointer-events: none;}

.error-text{ color: #ff0000; display: none; font-size: 14px; font-weight: bold; padding-left: 20px;}
.error-text span{ position: relative;}
.error-text span:before{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: -16px -830px; background-repeat: no-repeat; content: ""; height: 20px; left: -20px; position: absolute; top: -6px; width: 20px;}
.error-text.right{ padding-left: 0; padding-right: 26px; text-align: right !important;}
.error-text.right span:before{ display: none !important;}
.error-text.right span:after{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: -16px -1230px; background-repeat: no-repeat; content: ""; height: 20px; position: absolute; right: -20px; top: -6px; width: 20px;}

.checkbox-area{ cursor: pointer;}
.checkbox-core{ display: none;}
.checkbox-core:checked + .checkbox-01{ color: #289404;}
.checkbox-01{ font-size: 15px; margin-left: 24px; position:relative;}
.checkbox-01::before,.checkbox-01::after{ content: ""; display: block; position: absolute;}
.checkbox-01::before{ background-color: #ffffff; border: 1px solid #999999; border-radius: 4px; height: 15px; left: -24px; top: 2px; width: 15px;}
.checkbox-core:checked + .checkbox-01::after{ border-bottom: 3px solid #ff0000; border-right: 3px solid #ff0000; height: 14px; left: -19px; top: -3px; transform: rotate(40deg); width: 7px;}

.not-input-area{ background-color: #ffffbf; border-radius: 6px; border: 2px solid #ff0000; color: #ff0000; font-size: 14px; margin: 40px auto 60px; padding: 10px; text-align: center; width: 400px;}
.not-input-area p{ font-size: 14px; line-height: 18px; text-align: center;}
.not-input-area a{ background-color: #ff0000; border-radius: 4px; box-shadow: 0 2px 4px #adadad; color: #ffffff; display: inline-block; font-size: 16px; font-weight: bold; margin: 10px auto; padding: 10px; text-align: center; text-decoration: none; position: relative; width: 300px;}
.not-input-area a:after{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: center -880px; background-repeat: no-repeat; content: ""; height: 14px; position: absolute; right: 20px; top: calc(50% - 7px); width: 20px;}

.confirm-area{ margin: 40px auto 60px; text-align: center;}
.confirm-area p{ font-size: 14px;}
.confirm-area a:hover{ opacity: 0.5;}
.confirm-area p a{ color: #289404; font-weight: bold;}
.confirm-area a.confirm-area-bt{ background-color: #289404; border-radius: 6px; box-shadow: 0 4px 4px #adadad; color: #ffffff; display: inline-block; font-size: 26px; font-weight: bold; margin-top: 6px; padding: 12px 30px; position: relative; text-decoration: none; width: 440px;}
.confirm-area a.confirm-area-bt:after{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: center -930px; background-repeat: no-repeat; content: ""; height: 20px; position: absolute; right: 20px; top: calc(50% - 10px); width: 17px;}

.ui-datepicker{ background-color: #ffffff; border: 1px solid #289404; display: none; left: calc(50% - 270px) !important;}
.ui-datepicker-group{ height: 262px;}
.ui-datepicker-group-first{ border-right: 1px solid #289404; float: left; width:  calc(50% - 2px);}
.ui-datepicker-group-last{ float: right; width: 50%;}
.ui-datepicker .ui-datepicker-header{ background-color: #289404; position: relative;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,.ui-datepicker .ui-datepicker-header .ui-datepicker-next{ cursor: pointer; height: 20px; position: absolute; text-indent: -9999px; top: calc(50% - 10px); width: 20px;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-disabled,.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-disabled{ cursor: default; pointer-events: none; opacity: .4;}
.ui-datepicker .ui-datepicker-prev{ left: 10px;}
.ui-datepicker .ui-datepicker-next{ right: 10px;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before,.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after,.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before,.ui-datepicker .ui-datepicker-header .ui-datepicker-next::after{ content: ""; display: block; position: absolute;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before,.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before{ background-color: #ffffff; border-radius: 50%; height: 20px; top: 0; width: 20px;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before{ left: 0;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before{ right: 0;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after,.ui-datepicker .ui-datepicker-header .ui-datepicker-next::after{ color: #289404; font-size: 12px; font-weight: bold; text-indent: 0; top: calc(50% - 10px);}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::after{ content: "〈"; left: 0;}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::after{ content: "〉"; right: 0;}

.ui-datepicker .ui-datepicker-title{ color: #ffffff; font-size: 12px; font-weight: bold; padding: 8px 0; text-align: center;}
.ui-datepicker table{ border-collapse: collapse; font-size: 14px; margin: 6px 10px;}
.ui-datepicker table thead{ border-bottom: 1px dotted #289404;}
.ui-datepicker table th{ padding: 4px 6px;}
.ui-datepicker table td span,.ui-datepicker table td a{ display: block; padding: 4px 6px;}
.ui-datepicker table td{ text-align: right;}
.ui-datepicker table td.ui-datepicker-today{ background-color: #289404; color: #ffffff; font-weight: bold;}
.ui-datepicker table td a{ font-weight: bold;}
.ui-datepicker table td a:hover{ background-color: #289404; color: #ffff00; opacity: 1;}
.ui-datepicker table .ui-state-disabled{ background-color: #dcdcdc; color: #898989; cursor: default; pointer-events: none;}
.ui-datepicker table .ui-datepicker-other-month{ background-color: #ffffff; cursor: default; pointer-events: none;}
.ui-datepicker .ui-datepicker-buttonpane{ background-color: #289404; border-top: 1px solid #289404; clear: both; padding: 4px 0; text-align: center;}
.ui-datepicker .ui-datepicker-buttonpane button{ background-color: #ffffff; border-radius: 4px; border: none; box-shadow: 1px 1px 1px rgba( 0, 0, 0, .2); color: #289404; font-size: 12px; padding: 2px 20px;}
.ui-datepicker .ui-datepicker-buttonpane button:hover{ opacity: .4;}

.ocr-verification-text-01{ font-size: 14px; line-height: 20px; text-align: center;}
.ocr-verification-table{ margin: 6px auto 20px;}
.ocr-verification-table th,.ocr-verification-table td{ padding: 6px 10px;}
.ocr-verification-table th{ width: 190px;}
.ocr-verification-table th p{ font-size: 15px; text-align: left;}
.ocr-verification-table td p{ font-size: 16px;}
.ocr-verification-table td .desired-time li{ padding-left: 76px;}
.ocr-verification-table td .desired-time li span:first-child{ display: inline-block; width: 120px;}

.confirmation-area{ margin: 40px auto 60px; width: 900px;}
.confirmation-area a{ border-radius: 6px; box-shadow: 0 4px 4px #adadad; display: inline-block; position: relative; text-align: center; text-decoration: none;}
.confirmation-area a.left{ background-color: #dedede; color: #444444; float: left; font-size: 14px; font-weight: bold; padding: 10px; width: 220px;}
.confirmation-area a.left:before{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: center -980px; content: ""; height: 17px; left: 10px; position: absolute; top: calc(50% - 8.5px); width: 10px;}
.confirmation-area a.right{ background-color: #289404; color: #ffffff; float: right; font-size: 26px; font-weight: bold; padding: 12px 30px; width: 440px;}
.confirmation-area a.right:after{ background-image: url("/module/img/lp-common/total-replace-icon-01.png"); background-position: center -930px; content: ""; height: 20px; right: 20px; position: absolute; top: calc(50% - 10px); width: 17px;}

.completion{ border-radius: 8px; border: 1px solid #289404; margin: 50px auto 60px; padding: 10px 20px; text-align: center;}
.completion dt p{ color: #289404; font-size: 20px; font-weight: bold;}
.completion dd p{ font-size: 14px;}


#loader-bg{ background-color: rgba( 0, 0, 0, .6); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1000;}
#loader{ color: #ffffff; display: none; height: 100; left: 50%; margin: -100px 0 0 -100px; position: fixed; text-align: center; top: 50%; width: 100; z-index: 1002;}
#loader img{ display: inline-block;}


@media screen and (max-width: 946px){
.first-view-area .image{ height: 140px; left: 20px; width: 180px;}
.ocr-introduction-area p{ text-align: left;}
.ocr-introduction-area p br:last-child{ display: none;}
.ocr-introduction-area li p{ text-align: center !important;}
}
@media screen and (max-width: 945px){
.ocr-recommended-area ul{ width: 96%}
}
@media screen and (max-width: 934px){
.ocr-reservation-table,.ocr-verification-table,.confirmation-area{ width: 100%}
}
@media screen and (max-width: 912px){
.ocr-reservation-table th,.ocr-reservation-table td{ display: block; width: calc(100% - 20px) !important;}
.ocr-reservation-table th p::after{ margin-left: 6px; right: inherit;}
.ocr-reservation-table td:nth-child(2){ border-left: none; border-right: none; padding: 0 10px;}
}
@media screen and (max-width: 853px){
.ocr-procedure-area dl{ width: calc(100% - 160px);}
.ocr-procedure-area dl dd{ margin-bottom: 110px;}
}
@media screen and (max-width: 815px){
.ocr-procedure-area dl dd:nth-child(4){ margin-bottom: 90px;}
}
@media screen and (max-width: 799px){
.first-view-area{ background-size: cover; background-position: center; height: 400px;}
.first-view-area p{ font-size: 9vw; left: 20px; top: 12%; width: calc(100% - 20px);}
.first-view-area a{ bottom: 44px; height: 100px; font-size: 20px; left: calc(50% - 50px); line-height: 100px; width: 100px;}
.first-view-area .arrow{ bottom: 0; height: 40px; left: calc(50% - 13.5px); width: 27px;}
.ocr-recommended-area ul li{ width: calc(50% - 20px);}
}
@media screen and (max-width: 787px){
.confirmation-area{ text-align: center;}
.confirmation-area a.left,.confirmation-area a.right{ float: inherit;}
.confirmation-area a.left{ margin-bottom: 20px;}
}
@media screen and (max-width: 734px){
.ocr-overview-table th,.ocr-overview-table td{ display: block; padding: 10px 20px;}
.ocr-overview-table th{ width: calc(100% - 40px);}
.ocr-overview-table tr:nth-child(odd) td{ background-color: #ffffff;}
}
@media screen and (max-width: 699px){
.ocr-recommended-area ul{ margin: 30px auto 0;}
.ocr-procedure-area dl{ margin: 40px auto 0; padding-left: 116px; width: calc(100% - 116px);}
.ocr-procedure-area dl dt::before,.ocr-procedure-area dl dt::after{ left: -116px;}
.ocr-procedure-area dl dt::before{ height: 100px; top: -36px; width: 100px;}
.ocr-procedure-area dl dt::after{ font-size: 22px; top: -3px; width: 100px;}
.ocr-procedure-area dl dd{ margin-bottom: 60px;}
.ocr-overview-table{ margin-top: 20px;}
.ocr-reservation-table{ margin: 30px auto 20px;}
}
@media screen and (max-width: 697px){
.ocr-procedure-area dl dd:nth-child(4){ margin-bottom: 70px;}
}
@media screen and (max-width: 679px){
.ocr-introduction-area ul li{ margin-bottom: 40px; width: 100%;}
.ocr-introduction-area ul li:last-child{ margin-bottom: 0;}
.ocr-introduction-area ul li div{ margin: 0 auto 10px; width: 212px;}
.ocr-introduction-area li p br{ display: none;}
}
@media screen and (max-width: 600px){
.ui-datepicker{ left: calc(50% - 126px) !important;}
}
@media screen and (max-width: 569px){
.ocr-verification-table th,.ocr-verification-table td{ display: block; width: calc(100% - 20px) !important;}
.ocr-verification-table td{ padding: 0 10px 6px;}
}
@media screen and (max-width: 526px){
.confirm-area a.confirm-area-bt,.confirmation-area a.right{ padding: 12px 40px 12px 20px; width: calc(100% - 60px);}
}
@media screen and (max-width: 513px){
.first-view-area p{ font-size: 12.6vw; line-height: 110%;}
.ocr-recommended-area ul li{ margin-bottom: 130px; width: calc(100% - 10px);}
.ocr-recommended-area ul li p{ padding: 26px 10px; text-align: left;}
.ocr-recommended-area ul li p br{ display: none;}
.ocr-recommended-area ul li:first-child p br:last-child{ display: block;}
}
@media screen and (max-width: 462px){
.ocr-reservation-table td:nth-child(2) .checkbox li{ width: 100%;}
}
@media screen and (max-width: 449px){
.not-input-area{ width: calc(100% - 24px);}
}
@media screen and (max-width: 429px){
.desired-time li::before{ top: 0;}
.ocr-reservation-table td:nth-child(2) .desired-time li::after{ top: 1px;}
.ocr-reservation-table td:nth-child(2) .desired-time li{ padding: 20px 0 0;}
.ocr-reservation-table td:nth-child(2) .desired-time li input{ width: calc(100% - 170px);}
}
@media screen and (max-width: 372px){
.not-input-area a{ padding: 10px 30px 10px 10px; width: calc(100% - 40px);}
}
@media screen and (max-width: 369px){
.confirm-area a.confirm-area-bt,.confirmation-area a.right{ font-size: 6vw;}
}
@media screen and (max-width: 361px){
.not-input-area p{ text-align: left;}
.not-input-area p br{ display: none;}
}
@media screen and (max-width: 358px){
.ocr-procedure-area dl{ padding-left: 0; width: 100%;}
.ocr-procedure-area dl dt{ margin-top: 140px;}
.ocr-procedure-area dl dt::before,.ocr-procedure-area dl dt::after{ left: calc(50% - 50px);}
.ocr-procedure-area dl dt::before{ top: -110px;}
.ocr-procedure-area dl dt::after{ top: -76px;}
.ocr-procedure-area dl dd{ margin-bottom: 80px;}
.desired-time.verification li{ padding: 20px 0 0 !important;}
.desired-time.verification li:before{ top: 0;}
}