.terms-and-conditions-list {
  margin-bottom:40px;
}   


.terms-and-conditions-list ul {
  list-style: none; 
  margin-left:30px;
  margin-top:-30px;
}   

.terms-and-conditions-list ul li {
  margin-bottom:20px;
  font-size:15px;
   position:relative; 
}    

.terms-and-conditions-list ul li::before {
  content: "\2022";  
  color: #ccc; 
  font-weight: bold; 
  font-size:24px;
  display: inline-block; 
  left:-15px;
  top:-6px;
  position:absolute;
}
.c-btn-arrow { cursor:pointer; }

.online-booking-container { width:800px; margin:60px auto; }

.date-and-time-container { width:270px; margin:0 auto; }

.text { float:left; width:40px; margin-right:10px; padding-top:11px; font-size: .8rem;}
.form{ float:left; width:200px; }

select { width:100%; height:40px; font-size: .8rem; padding:5px; }

.date { width:100%; height:40px; font-size: .8rem; padding:5px; }

.dot-line { border-top:1px solid #ccc; width:100%; margin-top:40px;}
.dot-container { width:100%; margin:5px auto; text-align:center;}

.dot {
  height: 20px;
  width: 20px;
  background-color: #ccc;
  border-radius: 50%;
  display: inline-block;
  transition:0.3s;
  margin-right:5px;
}

.selected-dot {
  background-color: #c9103a;
}

.concern-container { width:840px; margin:0 auto; }

.advice {
  overflow: visible;
}

.ui-datepicker { font-size:12pt !important}

@media only screen and (max-width: 767px) {
  .advice {
    margin: 0 auto;
    margin: 0 -8vw;
    width: auto;
    position: relative;
    z-index: 1;
  }
  .advice .slides {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .advice .slide {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
  }
  .advice .slide a {
    display: block;
    position: relative;
  }
  .advice .slide img {
    margin: 0 auto;
    width: 44.266666666666666vw;
  }
  .advice .slide .label {
    font-size: 4.8vw;
    line-height: 1.388888888888889;
    letter-spacing: 0.05em;
    position: absolute;
    right: 0;
    top: 38.666666666666664vw;
    left: 0;
    box-sizing: border-box;
    color: #c3002f;
    padding: 0 21.333333333333336vw;
    text-align: center;
  }
  
}
@media only screen and (min-width: 768px) {
  .advice .items {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: -24px -100px 0;
  }
  .advice .item {
    margin: 24px 1.03448275862069% 0;
    max-width: 172px;
    position: relative;
    width: 14.827586206896552%;
  }
  .advice .label {
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-size: 1.333333333333333vw;
    position: absolute;
    right: 0;
    top: 66%;
    left: 0;
    color: #c3002f;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;
  }
}


@media only screen and (min-width: 1200px) {
  .advice .label {
    font-size: 0.8rem;
  }
}

.left-back { float:left; }
.right-continue { float:right; }

.back-button { padding: 22px 46px 22px 75px; border:1px solid #ccc;     box-sizing: border-box;     font-size: .8rem; position:relative; transition:0.3s; cursor:pointer;}

.back-button:hover { opacity:0.6;}

.back-button::before { position:absolute; background:url(../img/icon-arrow-left.svg); overflow:hidden; width:35px; height:9px; background-size: contain; content:''; left:26px; top:25px;}

.c-hover-boxline-inner { cursor:pointer; }

.active { border:1px solid #000!important; }

.remove { border:none; }

.contact-container { width:700px; margin:0 auto; }

.contact-text-field, .confirmation-text-field { float:left; width:310px; margin-right:40px; }

.contact-text-field span {
  font-size: .8rem;
  display:block;
  margin-bottom:10px;
}


.confirmation-text-field span {
  font-size: .8rem;
  display:block;
  margin-bottom:5px;
  font-weight:bold;
}

.confirmation-text-field div {
  font-size: .8rem;
  font-weight:normal;
}


.contact-text-field input {
  width: 100%;
  height:40px;
  padding:5px;
  font-size: .8rem;
}

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
}

.checkbox-container span { font-size: .8rem;
  display:block;
  padding-top:5px; font-weight:bold
  ; }

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fafafa;
  border:1px solid #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #c9103a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.acknowledgement { font-size:14px; line-height:16px; display:block; margin-top:20px; }

.error { background:#eee; border:1px solid red; padding:10px 20px; font-size:16px; margin:30px 0; width:100%; }

.info-container { width:920px; margin:60px auto; }

.left { float:left; width:435px; margin-right:30px; }
.right { float:left; width:435px; }

.info-text { margin-bottom:10px; font-size: .8rem; line-height:20px; display:block; }

.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 5px;
  margin-right:20px;
  padding-top:3px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-container .checkmark {
  border-radius: 50%;
}


.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}


.radio-container input:checked ~ .checkmark {
  background-color: #c9103a;
}


.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
 	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.info-container input {
  width: 100%;
  height:40px;
  padding:5px;
  font-size: .8rem;
  font-family: "Noto Sans", YuGothic, "Yu Gothic", Hiragino Kaku Gothic ProN, sans-serif;
}

.desktop-left-spacing { margin-left:42px; }

.age-field { width:60px!important; }

@media only screen and (min-width: 769px) and (max-width: 970px) {

.info-container { width:720px; margin:60px auto; }

.left { float:left; width:350px; margin-right:20px; }
.right { float:left; width:350px; }

.online-booking-container { width:720px; margin:60px auto; }

.concern-container { width:720px; margin:0 auto; }

}

@media only screen and (max-width: 768px) {

.online-booking-container { width:100%; margin:60px auto; }

.date-and-time-container { width:100%; margin:0 auto; }

.text { float:none; width:100%; margin-right:0; margin-bottom:5px;}
.form{ float:none; width:100%; }

.concern-container { width:100%; margin:0 auto; }

.left-back { float:none; }
.right-continue { float:none; }

.back-button { 
    padding: 22px 46px 22px 75px; 
    text-align: center;
    width: 100%;
    font-size: 4vw;
    line-height: 1.25;
    letter-spacing: 0.05em;
    position:relative; 
    margin-top:20px;
}

.back-button::before { 
    position:absolute; 
    background: url(../img/icon-arrow-left_sp.svg) left top no-repeat;
    width: 6.9333333333vw;
    height: 1.7333333333vw;
    background-size: contain; 
    content:''; 
    left:auto; 
    top:30px;
    margin-left:-50px;
}

.concern-img-container { width:100%; margin:0 auto; }

.concern-img { float:left; width:50%; text-align:center; padding:10px;}

.concern-img span { font-size: .8rem; display:block; color:#c3002f; line-height:22px;  }

.contact-container { width:100%; margin:0 auto; }

.contact-text-field, .confirmation-text-field { float:left; width:100%; margin-right:0; margin-bottom:20px; }

.contact-text-field span {
  font-size: .8rem;
  display:block;
  margin-bottom:10px;
}


.confirmation-text-field span {
  font-size: .8rem;
  display:block;
  margin-bottom:5px;
  font-weight:bold;
}

.confirmation-text-field div {
  font-size: .8rem;
  font-weight:normal;
}


.contact-text-field input {
  width: 100%;
  height:40px;
  padding:5px;
  font-size: .8rem;
}

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
}

.checkbox-container span { font-size: .8rem;
  display:block;
  padding-top:5px; font-weight:bold
  ; }

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fafafa;
  border:1px solid #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #c9103a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.acknowledgement { font-size:14px; line-height:16px; display:block; margin-top:20px; }

.info-container { width:100%; margin:40px auto; }

.left { float:none; width:100%; margin-right:0; margin-bottom:20px; }
.right { float:none; width:100%; margin-bottom:20px; }

.checkbox-container span { padding-top:0; }

.desktop-left-spacing { margin-left:0; }

.cancer-treatment-container { width:100%; overflow:hidden; }
}