@charset "UTF-8";

#contact  .contact_bg  dt.ttl_2-line {
	white-space: nowrap;
	border-right:1px solid #000;
	padding-right:6px;
	margin-right:6px;
}

.contact_bg {
  background: #E3E7F4;
  margin-top: 4rem;
  padding-bottom: 8rem;}
.contact_bg .container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;}
.contact_bg .col-4 {
  flex: 0 0 100%;
  max-width: 100%;}
.contact_bg a {
  text-align: center;}
.contact_bg p {
  text-align: left;}
@media (min-width: 768px) {
  .contact_bg p {
  text-align: center;}
}
@media (min-width: 992px) {
  .contact_bg .container {
    flex-direction: row;}
  .contact_bg .col-4 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;}
  .contact_bg p {
  text-align: left;}
}

.title_conts02 {
  text-align: center;
  padding-top: 8rem;
  font-size: 2rem;}
@media (min-width: 768px) {
  .title_conts02 {
    font-size: 2.6rem;}
}

@media (min-width: 992px) {
  #contact .btn_L a {
    width: 95%;
    margin: auto;}
}

.tel_info {
  text-align: center;
  padding-bottom: 1rem;}

.contact_bg .ico_img {
  width: 50%;
  max-width: 200px;
  margin: 20px auto 30px;
  display: block;}

#contact {
  padding-bottom: 200px;}

.bg_txt {position: relative;}
.bg_txt::before {
  content: '';
  display: block;
  max-width: 100%;
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  background-image: url("../images/img_contactTxt.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  left: 0;
  top: -6rem;
  z-index: -10;}
@media (min-width: 768px) {
  .bg_txt::before  {
    content: '';
    max-width: 80%;
    left: 20%;
    margin: 0 auto;
    top: -8rem; }}
@media (min-width: 1100px) { 
  .bg_txt::before  {
    top: -15rem; }}



@media (max-width: 770px) {
 #form_table p.text-center {
   text-align: left!important;
  }
}



/* 注意文 */

.form_txt_box {
  height: 200px;
  overflow-y: scroll;
   height: auto;
   overflow-y: inherit;
  background-color:#F3F3F3;
  padding: 1em;
}
form > div.p-5 {
max-width: 874px;
margin: auto;
padding: 1rem !important;
letter-spacing: 0.1em;
 text-align: justify;
}





.btn32{
width:100%;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
overflow: hidden;
position: relative;
}
.btn32:hover{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
.btn32::before {
 content: '';
 display: block;
 position: absolute;
 top: -180px;
 left: 0;
 width: 30px;
 height: 100%;
 transform: rotate(45deg);
 animation: shine 3s ease-in-out infinite;
 opacity: 0;
 background-color: rgb(255 255 255 / 50%);
 pointer-events: none;
}
@keyframes shine {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}
	80% {
		transform: scale(0) rotate(45deg);
		opacity: .5;
	}
	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}
	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}


footer { margin-top: -500px;}
#contact {margin-bottom: 200px;}
form > div.p-5 > p:nth-child(3) { padding: 0 1em;}
@media (min-width: 768px){ footer {margin-top: -900px;}}
@media (max-width: 768px) { form > div.p-5 {max-width: 580px;}}


@media screen and (max-width: 768px) {
  form table {
    width: 100%;
    table-layout: fixed;
  }

  form th, form td {
    display: block;
    width: 100%;
  }
}