@charset "utf-8";
/***************************************************************************************************
	page_contact.css
***************************************************************************************************/
#header_type2 {
  background-color: transparent;
}
/*
*/
#page_contact {
  width: 100%;
  padding:0 var(--gap_1);
  padding-top:110px;
  padding-bottom: 80px;
  background-color: #fafafa;
}
#page_contact > div {
  display: flex;
  width:100%;
  max-width: var(--max_wid_1);
  justify-content: left;
  align-items: stretch;
  gap:0 3%;
  margin: auto;
}
/*
*/
#page_contact .blk_1 {
  width:45%;
}
#page_contact hgroup {
  display: flex;
  flex-direction: column;
  color:var(--col_1);
  padding: 40px 0 0 0;
}
#page_contact hgroup h1 {
  order:2;
  font-size: clamp(30px, 4.7vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls_1);
  padding:clamp(5px, 1.18vw, 13px) 0 0 0;
}
#page_contact hgroup p {
  order:1;
  font-family: "Roboto", sans-serif;
  font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1;
  letter-spacing: var(--ls_2);
  font-weight: 500;
}
/*  */
#page_contact .blk_1_1 {
  padding:clamp(20px, 2.77vw, 40px) 0 clamp(30px, 4.86vw, 70px) 0;
}
#page_contact .blk_1_1 p {
  font-size: clamp(14px, 1.45vw, 16px);
}
/*  */
#page_contact .blk_1_2 > div {
  padding: clamp(10px, 1.45vw, 16px);
  text-align: center;
  background-color: #ffffff;
}
#page_contact .blk_1_2 > div > h2 {
 font-size: clamp(14px, 1.45vw, 16px);
}
#page_contact .blk_1_2 > div > p:nth-of-type(1) {
  font-size: clamp(30px, 3.27vw, 36px);
  letter-spacing: 0;
  line-height: 1;
  color:var(--col_1);
  font-family: "Roboto", sans-serif;
  padding:min(.9vw, 10px) 0;
}
#page_contact .blk_1_2 > div > p:nth-of-type(2) {
  font-size: 14px;
 font-size: clamp(12px, 1.27vw, 14px);
}
#page_contact .blk_1_2 > p {
 font-size: clamp(14px, 1.45vw, 16px);
  padding:clamp(10px, 1.36vw, 15px) 0 0 0;
}
/*
*/
#page_contact .blk_2 {
  width:52%;
  background-color: #eff1f5;
  border-radius: 20px;
  padding: clamp(20px, 3.36vw, 40px) clamp(15px, 2.72vw, 30px);
}
/*
*/
#page_contact .blk_form {
  width: 100%;
  height: 100%;
}
#page_contact .blk_form * {
	font-size: 16px;
}
#page_contact .blk_form input,
#page_contact .blk_form textarea {
  font-size: 14px;
}
#page_contact .blk_form input::placeholder,
#page_contact .blk_form textarea::placeholder {
  color:#aaaaaa;
}
#page_contact .blk_form input:focus-visible,
#page_contact .blk_form textarea:focus-visible {
	outline: 2px solid var(--col_1);
	outline-offset: 0;
}
/*
*/
#page_contact .formbody_part {
	position: absolute;
	width:100%;
	opacity:0;
	pointer-events: none;
}
#page_contact .formbody_part.show {
	position:absolute;
	opacity:1;
	pointer-events: auto;
	transition:opacity .6s ease-out .6s;
}
#page_contact .formbody_part.hide {
	position:relative;
	opacity:0;
	pointer-events: none;
	transition:opacity .6s ease-out 0s;
}
#page_contact .formbody_part.pos_r {
	position:relative;
}
#page_contact .formbody_part.pos_a {
	position:absolute;
}
/*
*/
#page_contact .blk_input {
  width: 100%;
}
#page_contact .blk_input .blk_fm {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 6%;
  margin-bottom: 20px;
}
#page_contact .blk_input .blk_fm_tit {
  display: flex;
  justify-content: left;
  align-items: center;
}
#page_contact .blk_input .blk_fm_tit p {
	line-height: 1;
	white-space: nowrap;
}
#page_contact .blk_input .blk_fm_tit p span {
	display: inline-block;
	font-size: 11px;
	line-height: 1;
  margin-left: 10px;
  padding:2px 15px 5px 15px;
  background-color:var(--col_1);
  color:#ffffff;
  border-radius: 4px;
  top:-3px;
  white-space: nowrap;
}
/*  */
#page_contact .blk_input .fm_item .blk_fm_tit {
  align-items: flex-start;
}
#page_contact .blk_input .fm_item .blk_fm_ipt_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#page_contact .blk_input .fm_item label {
  display: block;
  line-height: 1;
  margin-bottom: 15px;
  cursor: pointer;
}
#page_contact .blk_input .fm_item label span {
  display:block;
  padding:0 0 0 26px;
}
/*  */
#page_contact .blk_input .psty_cb_1 label span::before {
	position: absolute;
	display: block;
	content: '';
	width: 15px;
	height: 15px;
	left:0;
	top:50%;
  translate:0 -50%;
	background-color: transparent;
  border: 1px solid #333333;
}
#page_contact .blk_input .psty_cb_1 label span::after {
	position: absolute;
	display: block;
	content: '';
	width: 13px;
	height: 7px;
	left:7px;
	top:calc(50% + 1px);
  translate:0 -50%;
  border-left: 2px solid var(--col_1);
  border-bottom: 2px solid var(--col_1);
  transform-origin: 0 100%;
  rotate: -45deg;
  opacity:0;
  transition:opacity .1s ease-out 0s;
}
#page_contact .blk_input .psty_cb_1 label input:checked ~ span::after {
  opacity:1;
}
#page_contact .blk_input .psty_cb_1 label input {
  display: none;
}
/*  */
#page_contact .blk_input .blk_fm_ipt input[type="text"] {
	background-color: #ffffff;
	width:100%;
	padding: 5px 10px;
	border:2px solid transparent;
}
#page_contact .blk_input .blk_fm_ipt input[type="text"].alert_show {
	background-color: #ffaaaa;
}
/*  */
#page_contact .blk_input .fm_content .blk_fm_tit {
  align-items: flex-start;
}
#page_contact .blk_input .fm_content textarea {
  background-color: #F1F1F1;
	width:100%;
	height: 150px;
	padding: 5px 10px;
	border:2px solid transparent;
	resize: vertical;
  background-color: #ffffff;
}
#page_contact .blk_input .blk_fm_ipt textarea.alert_show {
	background-color: #ffaaaa;
}
/*  */
#page_contact .blk_input .blk_fm_ipt_alert .alert {
	line-height: 1.5;
	color:#ff0000;
	display: none;

  padding:.1em 0 0 0;
}
#page_contact .blk_input .fm_item .blk_fm_ipt_alert .alert {
  white-space: nowrap;
}
#page_contact .blk_input .blk_fm_ipt_alert.alert_show {
	display: block;
}
#page_contact .blk_input .blk_fm_ipt_alert.alert_show.a_1_show .alert.a_1 {
	display: block;
}
#page_contact .blk_input .blk_fm_ipt_alert.alert_show.a_2_show .alert.a_2 {
	display: block;
}
/*  */
#page_contact .blk_input .blk_pp {
  padding:5px 0 0 0;
  text-align: center;
}
#page_contact .blk_input .blk_pp label {
  display: inline-block;
  cursor: pointer;
}
#page_contact .blk_input .blk_pp label span {
  display: block;
  padding:0 0 0 28px;
}
#page_contact .blk_input .blk_pp label span a.nm_hover {
  color:var(--col_1);
  text-decoration: underline;
}
#page_contact .blk_input .blk_pp #pp_cb  {
  display:none;
}
/*  */
#page_contact .blk_input .blk_input_btn {
	padding:20px 0 0 0;
}
#page_contact .blk_input .blk_input_btn .btn_confirm {
  pointer-events: none;
  color:#bbbbbb;
  background-color: #dddddd;
}
#page_contact .blk_input .blk_pp:has(#pp_cb:checked) ~ .blk_input_btn .btn_confirm.psty_btn_1 {
  color:#ffffff;
  background-color: var(--col_1);
  pointer-events: auto;
}
/*
*/
#page_contact .psty_btn_1 {
	display: block;
	border-radius: 8px;
	width:100%;
	height: 60px;
	font-size: 16px;
	line-height: 1;
  background-color: var(--col_1);
	transition: background-color .2s ease-out 0s;
  cursor: pointer;
  text-align: center;
}
#page_contact .psty_btn_1.nm_hover {
	background-color: var(--col_2) !important;
}
/*
*/
#page_contact .blk_confirm {
  width:100%;
  font-size: 16px;
}
#page_contact .blk_confirm > p:nth-of-type(1) {
  padding:0 0 30px 0;
  text-align: center;
}
#page_contact .blk_confirm table {
	display:block;
	text-align: left;
}
#page_contact .blk_confirm table tbody {
	display:block;
}
#page_contact .blk_confirm table tbody tr {
	display:block;
	border-bottom:1px dashed var(--col_1);
  margin-bottom: 30px;
}
#page_contact .blk_confirm table tbody tr th {
	display:block;
  font-size: 14px;
  color:var(--col_1);
	line-height: 1;
	white-space: nowrap;
}
#page_contact .blk_confirm table tbody tr th span {
  padding:0 0 0 15px;
}
#page_contact .blk_confirm table tbody tr th span::before {
  position: absolute;
  content:'';
  display: block;
  left:0;
  top:calc(50% + 1px);
  translate:0 -50%;
  width:8px;
  height:8px;
  background-color: var(--col_1);
}
#page_contact .blk_confirm table tbody tr td {
	display:block;
	padding:10px 0 15px 0;
  word-break: break-all;
}
#page_contact .blk_confirm table tbody tr td pre {
	display:block;
	width:100%;
	white-space: pre-wrap;
	word-break: break-all;
}
/*  */
#page_contact .blk_confirm .blk_confirm_btn {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 3%;
  margin-top: 40px;
}
#page_contact .blk_confirm .blk_confirm_btn .btn_return {
  background-color: #ffffff;
  border:1px solid var(--col_1);
  color:var(--col_1);
}
#page_contact .blk_confirm .blk_confirm_btn .btn_return.nm_hover {
  background-color: var(--col_3) !important;
}
#page_contact .blk_confirm .blk_confirm_btn .btn_submit {
  color:#ffffff;
}
/*
*/
#page_contact .blk_submit {
  width: 100%;
  height: 100%;
  min-height: 600px;
}
#page_contact .blk_submit > p {
  position: absolute;
	width:100%;
	white-space: nowrap;
  text-align: center;
  top:50%;
  translate: 0 -50%;
  padding: 0 0 80px 0;
}
#page_contact .blk_submit .loader {
  position: absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  width: 100%;
  max-width: 400px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--col_2);
}
#page_contact .blk_submit .loader::before {
  display: block;
  content:'';
  width:100%;
  height: 100%; 
  background-image: linear-gradient(90deg, transparent 30%, var(--col_3) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: repeat-x, no-repeat;
  animation: kf_loader_1 2s linear infinite;
  opacity:.8;
}
@keyframes kf_loader_1 {
  0% {background-position: 100% 0%, 0% 0%;}
  100% {background-position: -100% 0%, 0% 0%;}
}
/*
*/
#page_contact .blk_complate {
  width:100%;
  height:100%;
  min-height: 600px;
}
#page_contact .blk_complate > div {
  position: absolute;
  left:50%;
  top:50%;
  translate: -50% -50%;
}
#page_contact .blk_complate p:nth-of-type(1) {
  text-align: center;
	font-weight: 700;
	font-size: 16px;
  color:var(--col_1);
  padding:10px 0 0 0;
  white-space: nowrap;
}
#page_contact .blk_complate p:nth-of-type(2) {
	padding:10px 0 0 0;
  text-align: center;
  white-space: nowrap;
}
#page_contact .blk_complate p:nth-of-type(3) {
	padding:50px 0 0 0;
  text-align: center;
}
#page_contact .blk_complate p:nth-of-type(3) .gsty_btn_1 {
  width: 100%;
  min-width: 220px;
  max-width: 300px;
  margin: auto;
}
/*
*/
#page_contact .blk_error {
  width:100%;
  height:100%;
  min-height: 600px;
}
#page_contact .blk_error > div {
  position: absolute;
  left:50%;
  top:50%;
  translate: -50% -50%;
}
#page_contact .blk_error p:nth-of-type(1) {
  text-align: center;
	font-weight: 700;
	font-size: 16px;
  color:#ff0000;
  white-space: nowrap;
}
#page_contact .blk_error p:nth-of-type(2) {
	padding:10px 0 0 0;
  text-align: center;
  white-space: nowrap;
}
#page_contact .blk_error p:nth-of-type(3) {
	padding:50px 0 0 0;
  text-align: center;
}
#page_contact .blk_error p:nth-of-type(3) .gsty_btn_1 {
  width: 100%;
  max-width: 300px;
  margin: auto;
}

/***************************************************************************************************
  responsive
***************************************************************************************************/
@media screen and (width <= 1100px) {
/*
*/
#page_contact {
  padding:0 var(--gap_2);
  padding-top:80px;
  padding-bottom: 40px;
}
#page_contact > div {
  display: block;
  width:100%;
  max-width: 800px;
}
/*
*/
#page_contact .blk_1 {
  width:100%;
  padding:0 0 clamp(30px, 3.63vw, 40px) 0;
}
#page_contact hgroup {
  display: flex;
  flex-direction: column;
  color:var(--col_1);
  padding: 20px 0 0 0;
}
/*
*/
#page_contact .blk_2 {
  width:100%;
  border-radius: 10px;
}

/*  */
}
/*
*/
@media screen and (width <= 700px) {
/*
*/
#page_contact .blk_form * {
	font-size: 14px;
}
/*
*/
#page_contact .blk_input .blk_fm {
  display: block;
  margin-bottom: 30px;
}
#page_contact .blk_input .blk_fm_tit p {
  padding:0 0 10px 0;
}
#page_contact .blk_input .blk_fm_tit p span {
	font-size: 10px;
  margin-left: 8px;
  padding:2px 10px 3px 10px;
  border-radius: 3px;
  top:-2px;
}
/*  */
#page_contact .blk_input .fm_item {
  margin-bottom: 40px;
}
#page_contact .blk_input .fm_item .blk_fm_tit p {
  padding:5px 0 15px 0;
}
#page_contact .blk_input .fm_item .blk_fm_ipt_content {
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: flex-start;
  gap:15px;
}
#page_contact .blk_input .fm_item label {
  margin-bottom: auto;
}
#page_contact .blk_input .fm_item label span {
  padding:0 0 0 20px;
}
/*  */
#page_contact .blk_input .psty_cb_1 label span::before {
	width: 13px;
	height: 13px;
}
#page_contact .blk_input .psty_cb_1 label span::after {
	width: 13px;
	height: 7px;
	left:6px;
	top:calc(50% - 0px);
  scale:.9;
}
/*  */
#page_contact .blk_input .fm_content {
  margin-bottom: 20px;
}
/*  */
#page_contact .blk_input .blk_pp {
  padding: 0;
}
#page_contact .blk_input .blk_pp label span {
  padding:0 0 0 22px;
}
/*
*/
#page_contact .psty_btn_1 {
	border-radius: 6px;
	height: 50px;
	font-size: 14px;
  margin-bottom: 10px;
}
/*
*/
#page_contact .blk_confirm {
  font-size: 14px;
  margin: auto;
}
#page_contact .blk_confirm > p:nth-of-type(1) {
  padding:0 0 20px 0;
}
#page_contact .blk_confirm table tbody tr {
  margin-bottom: 25px;
}
#page_contact .blk_confirm table tbody tr th {
  font-size: 13px;
}
#page_contact .blk_confirm table tbody tr th span {
  padding:0 0 0 12px;
}
#page_contact .blk_confirm table tbody tr th span::before {
  top:calc(50% + 1px);
  width:6px;
  height:6px;
}
#page_contact .blk_confirm table tbody tr td {
	padding:8px 0 15px 0;
}
/*  */
#page_contact .blk_confirm .blk_confirm_btn {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 9fr;
  column-gap: 3%;
  margin-top: 30px;
}
#page_contact .blk_confirm .blk_confirm_btn .btn_return {
  background-color: #ffffff;
  border:1px solid var(--col_1);
  color:var(--col_1);
}
#page_contact .blk_confirm .blk_confirm_btn .btn_return.nm_hover {
  background-color: var(--col_3) !important;
}
#page_contact .blk_confirm .blk_confirm_btn .btn_submit {
  color:#ffffff;
}
/*
*/
#page_contact .blk_submit {
  min-height: 360px;
}
/*
*/
#page_contact .blk_complate {
  min-height: 360px;
}
#page_contact .blk_complate p:nth-of-type(2) {
  font-size: min(3.73vw, 14px);
}
#page_contact .blk_complate p:nth-of-type(3) .gsty_btn_1 {
  max-width: 240px;
}
/*
*/
#page_contact .blk_error {
  min-height: 360px;
}
#page_contact .blk_error p:nth-of-type(2) {
  font-size: min(3.73vw, 14px);
}
#page_contact .blk_error p:nth-of-type(3) .gsty_btn_1 {
  max-width: 240px;
}
/*  */
}