@charset "utf-8";

.info-block {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-radius: 0.4em;
}

.info-block.border-gray,
.inner-block.border-gray {
  border: 1px solid #ccc;
}

/* FORM */

.form .asterisk_comment {
	margin: 1em 0 0;
	padding:0 0 0 1em;
	text-indent: -1em;
	color: #f00;
}
.form .asterisk_comment::before {content: "※";}

::placeholder { color: #999;}

.form .charity-banner-link{ display: none !important;}

.form .form-intro{
  position: relative;
  margin: 3em auto;
  padding: 1.5em;
  width: 94%;
  max-width: 100rem;
  border-radius: 0.4em;
  border: solid 0.1rem #00aeef;
}

.form-intro .emphasis {
  font-weight: 800;
  text-align: center;
}

.form .form-intro .red{ color: #c00;}
.form select option { padding: 0;}
.form label { cursor: pointer;}
.form strong{ font-weight: bold;}

.form input,
.form select{
  position: relative;
  padding: 0.5em 0.4em;
  width: 100%;
  display: block;
  outline: none;
  background-color: #fff;
  border: 0.1rem solid #ccc;
  border-radius: 0.2em;
  box-sizing: border-box;
  font-size: var(--font-size-m);
}

.form select{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  position: relative;
}

.form select::-ms-expand { display: none;}

.form select:after {
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  border-bottom: solid 0.2rem #b4b3b3;
  border-right: solid 0.2rem #b4b3b3;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
  z-index: 100;
}

.form .radio{ display: none;}

.form .radio + label{
  position:relative;
  margin: 0 2em 0 0;
  padding: 0 0 0 1.5em;
  display: block;
  font-size: var(--font-size-m);
  line-height: 1.5;
}

.form .radio + label:before{
  position: absolute;
  top: 0.2rem;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 50%;
  content: "";
}

.form .radio:checked + label{
  color: #00aeef;
  font-weight: bold;
}

.form .radio:checked + label:after{
  position: absolute;
  top: 0.5rem;
  left: 0.3rem;
  bottom: 0;
  margin: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: #00aeef;
  border-radius: 50%;
  content: "";
}

.form .checkbox {display: none;}

.form .checkbox + label{
  position:relative;
  margin: 0 2em 0 0;
  padding: 0 0 0 1.5em;
  display: block;
  font-size: var(--font-size-m);
  line-height: 1.4;
}

.form .checkbox + label:before{
  position: absolute;
  top: 0.2rem;
  left: 0;

  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 0.2em;
  content: "";
}

.form .checkbox:checked + label{
  color: #00aeef;
  font-weight: bold;
}

.form .checkbox:checked + label:after{
  position: absolute;
  top: 0;
  left: 0.2rem;
  width: 1.6rem;
  height: 1rem;
  display: block;
  border-left: 0.4rem solid #00aeef;
  border-bottom: 0.4rem solid #00aeef;
  transform: rotate( -45deg );
  content: "";
}

.form .form-table textarea{
  position: relative;
  margin: 0;
  padding: 0.6em;
  width: 100%;
  height:8.7em;
  display: block;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.4em;
  border: 0.1rem solid #ccc;
  font-size: var(--font-size-m);
  line-height: 1.5;
  text-align: left;
}


.form .form-intro {
  position: relative;
  margin: 3em auto;
  width: 94%;
  max-width: 100rem;
  display: block;
}

.form .form-intro .inner {
  width: 100%;
  max-width: 100rem;
}

.form .form-intro .form-intro-title{
  position: relative;
  margin: 0 0 0.5em 0;
  font-size: var(--font-size-l);
  font-weight: bold;
  line-height: 1.4;
}

.form-table{
  margin: auto;
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #ccc;
  background-color: #fff;
  font-size: var(--font-size-m);
  line-height: 1.5;
}

.form-table th{
  padding: 1em;
  width: 100%;
  display: block;
  background-color: #eee;
  border-bottom: 0.1rem dotted #ccc;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

.form-table th span{
  margin: 0 0 0 0.5em;
  padding: 0.1em 0.5em;
  background-color: #c00;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

span.required{
  margin: 0;
  padding: 0.1em 0.5em;
  background-color: #c00;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}


.form .error-txt{
  margin: 0;
  padding: 0.5em 0;
  display: block;
  color: #c00;
  font-size: var(--font-size-m);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  clear: both;
}


.form-table td{
  padding: 1em;
  width: 100%;
  display: block;
  background-color: #fff;
  font-size: var(--font-size-m);
  text-align: left;
  vertical-align: middle;
}

.form-table tr.error th{ background-color: #ffd5d5;}
.form-table tr.error td{ background-color: #ffeaea;}

.form-table tr.error .error-msg{
  text-align: left;
  margin: 0;
  padding: 0.5em 0;
  display: block;
  color: #c00;
  font-size: var(--font-size-m);
  font-weight: bold;
  line-height: 1.4;
  clear: both;
}


.form-table td .txt{
  padding: 0 0 0.5em 0;
  font-size: var(--font-size-m);
  line-height: 1.6;
}


.form-table .form-split-3,
.form-table .form-split-4,
.form-table .form-split-5,
.form-table .form-split-none{
  margin: 0;
  padding: 0;
  display: block;
}

.form-table .form-split-3 li{
  float: left;
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
  width: 33.33333333333333333333333333333333333333333333%;
}

.form-table .form-split-4 li{
  float: left;
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
  width: 25%;
}

.form-table .form-split-5 li{
  float: left;
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
  width: 20%;
}

.form-table .form-split-none li{
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
}


.form-table .form-split-3.none-7-8 li:nth-child(7),
.form-table .form-split-3.none-7-8 li:nth-child(8),
.form-table .form-split-3.none-7-8 li:nth-child(9),
.form-table .form-split-3.none-5-7 li:nth-child(5),
.form-table .form-split-3.none-5-7 li:nth-child(6),
.form-table .form-split-3.none-5-7 li:nth-child(7){
  float: left;
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
  width: 100%;
}

.form-table .birthday{
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.form-table .year{ float: left; width: 10em;}
.form-table .birthday .year{ float: left; width: 11em;}
.form-table .month{ float: left; width: 8em;}
.form-table .day{ float: left; width: 8em;}

.form-table .birthday .select-block{
  float: left;
  display: block;
  width: calc(100% - 3em);
}

.form-table .birthday em{
  float: left;
  padding: 0.5em 0 0 0.5em;
}

.form-table .age{
  float: left;
  padding: 0.5em 0 0 0.5em;
}

.form-table .age #AGE{
  font-weight: bold;
}

.form-table .nowrap{ white-space: nowrap;}

.form-table li.half{ width: 50%;}

.form-table li.full,
.form-table .form-split-4 li.full{
  float: inherit;
  clear: both;
  margin: 0;
  padding: 0 0 0.8em 0;
  display: block;
  width: 100%;
}

.form-table li.full div{ padding: 1em 0 0 0;}

.form-table .input-block{ overflow: hidden;}

.form-table .input-block input{ margin: 0 0 1em; width: 100%; display: block;}

.form-table .input-block input:last-child{ margin: 0;}

.form-table .input-block.size-ss input{margin: 0 0.5em 0 0; width: 5em; display: inline-block;}

.form-table .input-block.size-m input{margin: 0 0.5em 0 0; width: 35%; display: inline-block;}

.form-table .input-block.size-m button{
  position: relative;
  margin: 0;
  padding: 0.5em 0 0.5em 0.8em;
  width: 30%;
  max-width: 8em;
  display: inline-block;
  border-radius: 2em;
  border: none;
  box-sizing: border-box;
  background-color: #008eca;
  color: #fff;
  font-size: var(--font-size-s);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.form-table .input-block.size-m button:before{
  position: absolute;
  top: 0;
  left: 0.4em;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/_ver3.0/common/img/icon_arrow_w.svg) center center no-repeat;
  background-size: contain;
  content: "";
  z-index: 10;
}

.form-table .name-dl{
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  font-size: var(--font-size-m);
  line-height: 1.4;
}

.form-table .name-dl dt{
  float: left;
  margin: 0;
  padding: 0.6em 0 0 0;
  display: block;
  width: 6em;
}

.form-table .name-dl dd{
  float: left;
  margin: 0 0 1em 0;
  padding: 0;
  display: block;
  width: calc(100% - 6em);
}

.form-table .name-dl.confirm{
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.form-table .name-dl.confirm dt{
  float: none;
  margin: 0;
  padding: 0.25em 0;
  display: block;
  width: 6em;
}

.form-table .name-dl.confirm dd{
  float: none;
  margin: 0;
  padding: 0.25em 0;
  display: block;
  width: calc(100% - 6em);
}

.select-block,
.trancelate-body{
  position: relative;
  display: block;
}

.form-table .select-block{ width: 100%;}

.form-table .select-block:after{
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  border-bottom: solid 0.2rem #b4b3b3;
  border-right: solid 0.2rem #b4b3b3;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
  z-index: 100;
}

.form-table .select-block.place-select{ margin: 0.5em 0 0 1.5em; width: calc(100% - 1.5em);}


.form-table .salontype li:nth-child(2) label {opacity: 0.4;}
.form-table .salontype li:nth-child(2) label.opacity {opacity: 1;}


.ymd-block .select-block{
  position: relative;
  display: inline-block;
}

.ymd-block .select-block{ margin-right: 0.5em; width: calc(100% - 3em);}



.form-table .max-image{ max-width: 48rem;}


/* inner-table */

.inner-table{
  margin: auto;
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #ccc;
  background-color: #fff;
  font-size: var(--font-size-s);
  line-height: 1.5;
}

.inner-table th{
  padding: 1em;
  background-color: #eee;
  border: 0.1rem dotted #ccc;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

.inner-table td{
  padding: 1em;
  border: 0.1rem dotted #ccc;
  background-color: #fff;
  font-size: var(--font-size-s);
  text-align: center;
  vertical-align: middle;
}


.form-table .form-split-none .pdf-download{ padding: 0.5em 0; display: block; border-bottom: dotted 0.1rem #ccc;}
.form-table .form-split-none .pdf-download a{ display: block; }




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

.form-table .form-split-3 li{ width: 100%;}


.form-table .form-split-3.none-7-8 li:nth-child(7),
.form-table .form-split-3.none-7-8 li:nth-child(8),
.form-table .form-split-3.none-7-8 li:nth-child(9),
.form-table .form-split-3.none-5-7 li:nth-child(5),
.form-table .form-split-3.none-5-7 li:nth-child(6),
.form-table .form-split-3.none-5-7 li:nth-child(7){ width: 100%;}

.form-table .form-split-4 li{ width: 50%;}
.form-table .form-split-5 li{ width: 33%;}
.form-table li.half{ width: 100%;}

}/* SP580 */



@media screen and (min-width: 769px), print {

/* form TAB */

.form-table th{
  width: 28%;
  display: table-cell;
}

.form-table td{
  width: 72%;
  display: table-cell;
  border-bottom: 0.1rem dotted #ccc;
}


.form-table .input-block input{ margin: 0 0 1em; width: 80%; display: block;}

.form-table .input-block input:last-child{ margin: 0;}

.form-table .input-block.size-ss input{margin: 0 0.5em 0 0; width: 5em; display: inline-block;}

.form-table .name-dl{
  margin: 0;
  width: 100%;
  font-size: var(--font-size-m);
  line-height: 1.4;
}

.form-table .name-dl dt{
  float: left;
  margin: 0;
  padding: 0.5em 0 0 0;
  display: block;
  width: 6em;
}

.form-table .name-dl dd{
  float: left;
  margin: 0 0 0.5em;
  padding: 0;
  display: block;
  width: calc(100% - 6em);
}


.form-table .name-dl.confirm{
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.form-table .name-dl.confirm dt{
  float: none;
  margin: 0;
  padding: 0.25em 0;
  display: block;
  width: 6em;
}

.form-table .name-dl.confirm dd{
  float: none;
  margin: 0;
  padding: 0.25em 0;
  display: block;
  width: calc(100% - 6em);
}

.form-table .select-block{ width: 50%;}

.ymd-block .select-block{
  position: relative;
  display: inline-block;
}

.ymd-block .select-block{ margin-right: 0.5em; width: calc(100% - 3em);}


}/* 768 */

.form-table .input-block.mb-05{ margin-bottom: 0.5em;}