@charset "utf-8";

/* -------------------------------------------------------------------
innerの設定
------------------------------------------------------------------- */
.contact-inner{
	width:min(90%,950px);
	margin: 0 auto;
	padding:0em 0 0em;
}
.contact-inner_detail{
	color:#fff;
	background:#036eb8;
	padding:60px 20px 10px;
	margin: 0 auto;
	}
.contact-inner_detail h2{
	display:flex;
	gap:0 20px;
	font-size:clamp(20px,3.5vw,28px);
	width:min(100%,950px);
	margin: 0 auto;
	align-items:center;
	font-weight:700;
}
.contact-inner_detail h2 span{
	font-size:1.3rem;
	font-weight:500;
}

.contact-inner .text{
	padding:50px 0 10px;
	font-size:clamp(14px,3.5vw,16px);
	color:#727171;
}
.contact-inner .text dd:before{
	content:"●";
}
.contact-inner .text dd{
	padding-left:1em;
	text-indent:-1em;
}
.contact-inner table{
	width:100%;
	color:#727171;
	font-size:clamp(14px,3.5vw,16px);
	background:#fff;
	border:1px solid #ccc;
}
@media screen and (max-width:768px){
.contact-inner table{
	border:none;
	}
}

.contact-inner table caption{ 
	color:#727171;
	font-size:clamp(16px,3.5vw,20px);
	text-align:center;
	font-weight:500;
	margin:40px 0 10px;

}
.contact-inner table th{
	background:#efefef;
	padding:20px;
	border:1px solid #ccc;
	width:25%;
	letter-spacing:1px;
}
@media screen and (max-width:768px){
.contact-inner table th{
	padding:10px 15px;
	border:none;
	width:100%;
	display:block;
	font-weight:700;
	}
}
.contact-inner table td{
	padding:20px;
	border:1px solid #ccc;
}
@media screen and (max-width:768px){
.contact-inner table td{
	padding:15px 15px 20px 15px;
	border:none;
	width:100%;
	display:block;
	}
}

.contact-inner table .mail_detail ul{
	display:grid;
	grid-template-columns:3fr 1fr;
	gap:10px;
	margin:10px 0;
}

.cage{
	border:1px solid #ccc;
	padding:15px;
	width:74%;
	font-size:16px;
}
@media screen and (max-width:768px){
.cage{
	width:100%;
	}
}

.contact-inner table .mail_detail ul{
	display:grid;
	grid-template-columns:3fr 1fr;
	gap:10px;
	margin:10px 0;
	align-items:center;
}
@media screen and (max-width:768px){
.contact-inner table .mail_detail ul{
	grid-template-columns:1fr;
	gap:0px;
	margin:0px 0 15px;
	}
}


.contact-inner table .mail_detail ul .cage{
	width:100%;
}

.mast{
	display:inline-block;
	margin:0 10px;
	font-size:13px;
}
@media screen and (max-width:768px){
.mast{
	display:block;
	margin:10px 0;
	font-size:13px;
	}
}

textarea {
  resize: vertical;
  width:74%;
  height:200px;
 	border:1px solid #ccc;
	padding:15px;
	font-size:16px;
}
@media screen and (max-width:768px){
textarea {
	width:100%;
	}
}
.contact_list dd{
	margin:5px 0;
}

.flie-btn{
	margin:40px auto 47px;
	text-align:center;
}
@media screen and (max-width:768px){
.flie-btn{
	margin:0px auto 47px;
	}
}

.flie-btn li{
	margin:20px 0;
}
@media screen and (max-width:768px){
.flie-btn li{
	margin:10px 0;
	}
}
.input-btn{
	display:flex;
	justify-content:center;
	gap: 20px;
	margin:30px 0 0;
}
.input-btn li{
	width:230px;
	background:#ccc;
}
.common-btn{
	display: block;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	padding: 12px 12px;
	width:100%;
	transition: .3s;
	border:none;
}
@media screen and (max-width:768px){
.common-btn{
	font-size: 16px;
	}
}

.btn_submit{
	background: #036eb8;
	color: #fff;
	border:1px solid #036eb8;
}
.btn_submit:hover {
	color: #036eb8;
	background: #fff;
}

.btn_reset{
	background: #efefef;
	color: #727171;
	border: 1px solid #efefef;

}
.btn_reset:hover {
	color: #727171;
	background: #fff;
	border: 1px solid #333;
}

.file__label {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
    width:min(85%,500px);
	font-size:clamp(14px,3.5vw,20px);
	font-weight:500;
	letter-spacing:2px;
    padding: 13px 30px;
  margin-inline: auto;
  color: #fff;
  background-color: #2ea7e0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.file__label:hover {
  opacity: 0.7;
}

input[type=file] {
  display: none;
}

.file__none {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin-top: 1em;
  word-break: break-all;
}


.input__name{
	display:inline-block;
	margin:0 10px;
}


.error{
    width:100%;
	font-size:.9rem;
	font-weight:500;
	background:#b90000;
	color:#fff;
	padding:10px 10px 12px;
	margin:0 0 13px;
	position: relative;
}
.error:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 5%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top: 7px solid #b90000;
}


.contact_end{
	margin:80px auto;
	width:min(85%,500px);
	font-size:clamp(14px,3.5vw,18px);
	font-weight:500;
	text-align:center;
}
.contact_end dd{
	font-size:16px;
}





.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
		background:#2ea7e0;
    padding: 13px 30px;
    text-align: center;
    outline: none;
    width:min(85%,500px);
	font-size:clamp(14px,3.5vw,20px);
	font-weight:500;
	letter-spacing:2px;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
}

.btn:hover {
 opacity: 0.7;
}

.btn_ef {
	margin:40px 0 0;
}
.btn_ef a{
	color:#222;
}


.kojin{
	border-top:1px solid #231815;
	border-bottom:1px solid #231815;
	padding:20px 0;
	margin:40px 0;
	color:#727171;
}
.kojin dt{
	font-size:clamp(14px,3.2vw,17px);
}
.kojin dd{
	font-size:clamp(14px,3.2vw,17px);
}

@media screen and (min-width:768px){
.kojin dl{
	margin: 0 auto;
	max-width:700px;
	}


}