/*--------------------------------------------------------------------------------
  
  form

--------------------------------------------------------------------------------*/

/* page-title
----------------------------------------*/
.page-title {
  background-image: url("../image/content/contact/contact-bg.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (max-width:640px) {
  .page-title {
    background-position: left -440px bottom;
  }
}


/* contact-contents
----------------------------------------*/
.contact-contents {
  width: 100%;
  padding: 50px;
  margin: 50px auto;
  background-color: rgba(255,255,255,0.6);
  box-sizing: border-box;
  border-radius: 12px;
}
@media (max-width:900px) {
  .contact-contents {
    padding: 30px;
  }
}
@media (max-width:640px) {
  .contact-contents {
    padding: 20px;
  }
}


/* input
----------------------------------------*/
input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea {
	border: 1px solid #bbb;
	padding: .5em;
	box-sizing: border-box;
	border-radius: .25em;
}
.c-ip-2s { width: 5em }
.c-ip-s { width: 30%; min-width: 240px; }
.c-ip-m { width: 50%; min-width: 300px; }
.c-ip-l { width: 75%; min-width: 400px; }
.c-ip-max { width: 100%; }


/* radio
----------------------------------------*/
input[type=radio] {
	position: absolute;
  opacity: 0;
  z-index: -1; 
}
input[type=radio]+label {
	display:flex;
  align-items: center;
	cursor:pointer;
}
input[type=radio]+label:before {
	content:"";
	display:inline-block;
	width:1.25em;
	height:1.25em;
	border-radius:1.25em;
	vertical-align:middle;
	border:2px solid #bbb;
	background-color:#fff;
	margin-right:.25em;
  box-sizing:border-box;
	-webkit-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
input[type=radio]:hover+label:before {
	border-color:#bbb;
	background-color:#bbb;
	box-shadow:inset 0 0 0 0.25em #fff;
}
input[type=radio]:checked+label:before {
	border-color:var(--primary-color);
	background-color:var(--primary-color);
	box-shadow:inset 0 0 0 0.25em #fff;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  list-style: none;
}

/* checkbox
----------------------------------------*/
.chk-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  list-style: none;
}
.chk-group li label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}
.chk-group li label input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.chk-group li .chk-txt {
  display: inline-block;
  padding-left: 1.5em;
}
.chk-group li .indicator {
  display: inline-block;
  position: absolute;
	width:1.25em;
	height:1.25em;
  background: #ddd;
  border-radius: .25em;
}
.chk-group li label:hover input ~ .indicator,
.chk-group li label input:focus ~ .indicator {
  background: #bbb;
}
.chk-group li label input:checked ~ .indicator {
  background: var(--primary-color);
}
.chk-group li label:hover input:not([disabled]):checked ~ .indicator,
.chk-group li label input:checked:focus ~ .indicator {
  background: var(--primary-color);
}
.chk-group li label input:disabled ~ .indicator {
  background: #ddd;
  opacity: 0.6;
  pointer-events: none;
}
.indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.chk-group li label input:checked ~ .indicator:after {
  display: block;
}
.chk-group li .checkbox .indicator:after {
  left: .45em;
  top: .1em;
  width: .4em;
  height: .75em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chk-group li .checkbox input:disabled ~ .indicator:after {
  border-color: #bbb;
}

/* c-form 
----------------------------------------*/
.c-form {  
  border-top: 1px solid #ccc;
  margin-top: 20px;
}
.c-form-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 1em;
  border-bottom: 1px solid #ccc;
}
.c-form-item-label {
  padding: 1em;
  min-width: 220px;
  box-sizing: border-box;
  font-weight: bold;
}
.c-form-item-label-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.c-form-item-required {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5em;
  margin-left: 1em;
  background-color: var(--thirdry-color);
  border-radius: .25em;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
}
.c-form-item-input {
  padding: 1em 0;
}
@media (max-width:640px) {
  .c-form-item {
    grid-template-columns: 1fr;
  }
  .c-form-item-label {
    width: 100%;
  }
  .c-form-item-input {
    padding: 0 1em 1em;
  }
}

/* c-form-btn
----------------------------------------*/
.c-form-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}
@media (max-width:500px) {
  .c-form-btn .p-btn {
    width: 100%;
  }
  .c-form-btn .p-btn.js__back {
    order: 2;
  }
}

/* c-form-chk
----------------------------------------*/
.c-form-chk-alart {
  padding: 1em;
	background-color: var(--primary-color-light);
	border: 1px solid var(--primary-color);
	border-radius: .25em;
	box-sizing: border-box;
	margin-bottom: 1em;
  margin-top: 20px;
	text-align: center;
}

.c-form-chk-alart.error {
	background-color: #ffffff;
	border: 2px solid var(--thirdry-color);
	color: var(--thirdry-color);
	font-weight: 500;
}

.c-form-chk-setup-alart {
  padding: 1em;
	background-color: #ffffff;
	border: 1px solid var(--thirdry-color);
	border-radius: .25em;
	box-sizing: border-box;
	margin-bottom: 1em;
	color: var(--thirdry-color);
	text-align: center;
}

.check-note {
  color: var(--thirdry-color);
  font-size: 112.5%;
  font-weight: bold;
  text-align: center;
}

.check-table {
  width: 100%;
  margin-top: 20px;
}

.check-table .p-table th {
  min-width: 11.5em;
}
@media (max-width:500px) {
  .check-table .p-table th {
    min-width: 9.1em;
  } 
}


/* c-form-end
----------------------------------------*/
.c-form-end-msg {
  text-align: center;
}

.c-form-end-remail {
  width: 100%;
  background-color: #eee;
  padding: 1em;
  box-sizing: border-box;
  margin-top: 30px;
}

.c-form-end-remail-title {
  display: flex;
  align-items: center;
}
.c-form-end-remail-title img {
  display: inline-block;
  margin-right: .5em;
}


/* other
----------------------------------------*/
.address {
  margin-top: 0.5em;
}

.privacy-note {
  margin-top: 1em;
  text-align: center;
}