/* Campaign css */

/* R A Y O U T
----------------------------------------------------*/
.wrap_review {
margin-top: 1rem;
}
.col_wrapper{
width: 96%;
display: block;
position:relative;
margin:0 auto;
letter-spacing: -0.5em;
text-align: left;
}
.col_wrapper:after{
content:"";
display: block;
clear:both;
box-sizing: border-box;
}
.col_wrapper + .col_wrapper {
margin-top: 1rem;
}
.col_wrapper img {
width: 100%;
height: auto;
vertical-align: middle;
}






/* G R I D
----------------------------------------------------*/

.col1,.col2,.col3{
display:inline-block;
vertical-align:middle;
padding: 10px 2%;
letter-spacing: normal;
box-sizing: border-box;
text-align: left;
vertical-align: top;
}
.col1 { width:100%; }
.col2 { width:50%; }
.col3 { width:33.33333333%; }


/* PARTS
----------------------------------------------------*/
a.box_link,
a.block {display: block;}

.wrap_review .small{ font-size: 87.5%;} /* 14px */
.wrap_review .smaller {font-size:81.25%;} /* 13px */
.wrap_review .smallest {font-size: 75%;} /* 12px */
.wrap_review .big { font-size: 112.5%;}/* 18px */
.wrap_review .bigger { font-size: 125%;}/* 20px */
.wrap_review .biggest { font-size: 150%;}/* 24px */

.wrap_review .red {color: #e74c3c;}
.wrap_review .sky { color: #09C; }
.wrap_review .blue { color: #0088ce; }
.wrap_review .navy { color: #0c4da2; }
.wrap_review .black { color: #000; }
.wrap_review .orange { color: #F90; }
.wrap_review .green {color:#83C936;}

.wrap_review .bold {font-weight: bold;}
.wrap_review .normal {font-weight: normal;}
.wrap_review .italic {font-style: italic;}

.wrap_review .center {text-align: center!important;}
.wrap_review .left {text-align: left!important;}
.wrap_review .right {text-align: right;}


.wrap_review .mb_1 {margin-bottom: 1rem;}
.wrap_review .mb_2 {margin-bottom: 2rem;}
.wrap_review .mt-05 {margin-top: .5rem!important;}
.wrap_review .ml-05 {margin-left: .5rem!important;}
.wrap_review .mr-05 {margin-right: .5rem!important;}
.wrap_review .pt-0 {padding-top:0!important;}






/* Button */
a.review_btn_confirm {
display: block;
padding: .5rem 1rem .5rem .5rem;
border-radius: 6px;
font-weight: 600;
font-size: 120%;
background: #b7b9bd;
text-align: center;
text-decoration: none;
color: #FFF;
cursor: pointer;
height: auto;
transition: all .3s;
}
a.review_btn_confirm:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: .5rem;
width: 30px;
height: 25px;
background: url(../../assets/images/review/ico_confirm.svg) no-repeat 0 0;
background-size: 24px auto;
}
a.review_btn_confirm.active {
background: #F90;
}
a.review_btn_confirm:hover {
opacity: .7;
}




/* FORM RESET
----------------------------------------------------*/
input {
-webkit-border-radius: 0 /* iOS 8+ */
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;/* iOS 8+ */
}
select {
text-transform: none; 
-moz-appearance: none;    /* Firefox 40+ */
-webkit-appearance: none /* Chrome 45+ */
}
select::-ms-expand {
display: none;/* Edge 12+, Internet Explorer 11- */
}
select::-ms-value {
color: currentColor;/* Edge 12+, Internet Explorer 11- */
}
button,
input,
select,
textarea {
font-family: inherit;
font-style: inherit;
font-weight: inherit;
}
button,
input,
label,
select,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
.radio_button{
display: none;
}
.radio_button + label{
padding-left: 26px;
position:relative;
margin-right: 26px;
cursor: pointer;
}
.radio_button + label::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #999;
border-radius: 50%;
}
.radio_button:checked + label{
color: #1a93ec;
}
.radio_button:checked + label::after{
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 12px;
height: 12px;
background: #F90;
border-radius: 50%;
}
::-webkit-input-placeholder {
color: #555;
opacity: 0.7;
font-size: .9rem;
}
::-moz-placeholder {
color: #555;
opacity: 0.7;
font-size: .9rem;
}

input[type=checkbox] {
display: none;
}
.checkbox {
box-sizing: border-box;
position: relative;
display: inline-block;
margin: 0;
padding: 12px 12px 12px 42px;
border-radius: 8px;
vertical-align: top;
cursor: pointer;
}
.checkbox:after {
position: absolute;
top: 25px;
left: 15px;
display: block;
margin-top: -13px;
width: 20px;
height: 20px;
border: 1px solid #555;
border-radius: 3px;
content: '';
}
.checkbox:before {
position: absolute;
display: block;
margin-top: 0;
top:13px;
left: 22px;
width: 6px;
height: 12px;
border-right: 3px solid #09C;
border-bottom: 3px solid #09C;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
opacity: 1;
}



/* BOX INPUT
----------------------------------------------------*/

.box_input.review {}
.required:before {
content: "*";
display: inline-block;
margin: 0 .3rem;
font-weight: 700;
font-size: 160%;
color: #e74c3c;
line-height: 1; 
}
.box_input dl {
text-align: left;
margin-bottom: 2rem;
}
.box_input dl:last-child {
margin-bottom: 0;
}
.box_input dt {
margin-bottom: .5rem;
padding-bottom: .6rem;
border-bottom: 1px dotted #CCC;
font-weight: 600;
font-size: 106%;
}
.box_input.confirm dl {
margin-bottom: 1.5rem;
}
.box_input.confirm dt {
font-size: 100%;
}

.box_input input[type=text],
.box_input textarea  {
padding: .6rem .5rem .5rem;
width: 100%;
margin:.5rem 0;
background:#FFF;
border:1px solid #A5A7AC;
font-size: .9rem;
}
.box_input input.input_required[type=text],
.box_input textarea.input_required {
background:#FFF5E5;
border:1px solid #F90;
}
.box_input select {
background:#FFF url(../../assets/images/review/ico_select_g.svg) no-repeat right 5px top 50%;
border:1px solid #A5A7AC;
padding: .6rem 1rem .5rem 1rem;
margin:.5rem .5rem .5rem 0;
font-size: .9rem;
}
.box_input select.input_required {
background:#FFF5E5 url(../../assets/images/review/ico_select_o.svg) no-repeat right 5px top 50%;
border:1px solid #F90;
}
.box_input select.input_required.w100 {
width: 100%;
}
.box_input input[type=file] {
margin-bottom: .5rem;
padding: .5rem;
border-radius: 5px;
font-size: 13px;
background: #F6F6F7;
width: 100%;
box-sizing: border-box;
}
.box_input .caption {
display: block;
margin-top: .5rem;
font-size: 75%;
color: #e74c3c;
}
.box_input .input_mail input[type=text] {
width: 44%;
}
.box_input .radio_button:checked + label::after {
background: #F90;
}
.box_input .radio_button:checked + label{
color: #4C5059;
}
.box_input .btn_calender {
display: inline-block;
width: 100%;
margin:.5rem 0;
padding: .6rem 1rem .6rem 3.5rem;
background:#FFF url(../../assets/images/review/ico_calender_g.svg) no-repeat 15px 50%;
background-size: 22px auto;
border:1px solid #A5A7AC;
border-radius: 5px;
color: #4C5059;
text-decoration: none;
cursor: pointer;
}
.box_input .btn_calender.input_required {
background:#FFF5E5 url(../../assets/images/review/ico_calender_o.svg) no-repeat 8px 50%;
border:1px solid #F90;
}
.box_input .time_select select {
width: 45%;
}
.box_input .time_select select:first-of-type {
margin-left: 0;
}
.box_input .btn_rank {
width: 100%;
}
.box_input.review .select_use span {
display: inline-block;
width: 30%;
padding: 1rem;
}
.box_input.review .upload_photo span {
display: inline-block;
margin-top: 1rem;
width: 15%;
}
.box_input.review .upload_photo span img {
height: 40px;
}


/*　ERROR　*/
.error {
text-align: left;
margin-bottom: .8rem;
padding-left: 20px;
color: #e74c3c;
font-size: 93.3%;
background:url(../../assets/images/review/ico_error.svg) no-repeat 0 2px;
background-size: 16px;
}

.box_input.review.confirm .purpose img {
width: 66px;
}





/* calender */
.box_callender {
width: 96%;
margin: 0 auto;
}
.box_callender .icol6 {
width: 100%;
margin:0;
padding: 0;
}
.box_callender .icol6:last-child{
display: none;
}

/*  datepicker - head */
.ui-datepicker-header {
margin-top: 1rem;
position: relative;
padding: 8px 0;
background: #09C;
text-align: center;
}
.ui-datepicker-header a,
.ui-datepicker-header div {
display: inline-block;
vertical-align: middle;
}
.ui-datepicker-header .ui-datepicker-title {
color: #FFF;
font-size: 100%;
font-weight: 600;
}
.ui-datepicker-header a {
position: absolute;
top:0;
text-indent: -9999px;
width: 36px;
height: 36px;
background-size: 20px auto;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
.ui-datepicker-header a.ui-datepicker-prev {
left:0;
background-image: url(../../assets/images/review/arrow_month_prev.svg)
}
.ui-datepicker-header a.ui-datepicker-next {
right: 0;
background-image: url(../../assets/images/review/arrow_month_next.svg)
}


/*  datepicker - calender */
.ui-datepicker-calendar {
width: 100%;
border: 1px solid #4c5059; /* changed from border-left */
background: #FFF;
border-collapse: collapse;
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
padding: .2rem;
border-bottom: 1px solid #4c5059;
border-right: 1px solid #4c5059;
}
.ui-datepicker-calendar td {
text-align: left;
vertical-align: top;
height: 3rem;
font-size: 73.3%;
word-break: break-all;
cursor: pointer;
}
.ui-datepicker-calendar thead th {
background: #e8f4fd;
}
.ui-datepicker-calendar tr th:first-child,
.ui-datepicker-calendar tr td:first-child {
color: #f25749;
}
.ui-datepicker-calendar tr th:last-child,
.ui-datepicker-calendar tr td:last-child {
color: #1a93ec;
}
.ui-datepicker-calendar td.ui-datepicker-unselectable{
background: #ededee;
color: #94969c;
cursor: default;
}
.ui-datepicker-calendar tr td.ui-datepicker-unselectable:first-child,
.ui-datepicker-calendar tr td.ui-datepicker-unselectable:last-child {
color: #94969c;
}
.ui-datepicker-calendar .ui-state-active {
background: #09C;
color: #FFF;
}

.modal-close {
position: relative;
}
.modal-close span {
position: absolute;
cursor: pointer;
right:10px;
width: 50px;
height: 50px;
padding-top: 16px;
border-radius: 50%;
border:1px solid #0c4da2;
color: #0c4da2;
font-size: 13px;
font-weight: 600;
text-align: center;
bottom:-50px;
}
.modal-close span.bottom {
bottom:-40px;
}


.box_terms {
text-align: left;
letter-spacing: normal;
height: 500px;
overflow: auto;
box-sizing: border-box;
}
.box_terms h4 {
font-size: 93.3%;
color: #004098;
margin-bottom: .5rem;
}
.box_terms h5 {
font-size: 86.6%;
}
.box_terms p {
font-size: 86.6%;
margin-bottom: 1rem;
}
.thanks_box_caution {
margin:3rem 0;
padding: 1.5rem;
background: #FFF5E5;
text-align: left;
}
.thanks_box_caution p {
margin-bottom: .6rem;
font-size: 86.6%;
}
.thanks_head {
padding: 3rem 0;
font-size: 112.5%;
color: #0c4da2;
}