@charset "utf-8";

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



	資料請求



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

#contact{
	padding:100px 10px;
	background: #32A06C;
	position: relative;
}

#contact::before{
	content:'';
	width:100%;
	height: 10px;
	display: block;
	background: #32A06C;
	background: -webkit-linear-gradient(bottom, #32A06C 0%, #82D7AF 100%);
	background: -o-linear-gradient(bottom, #32A06C 0%, #82D7AF 100%);
	background: linear-gradient(to top, #32A06C 0%, #82D7AF 100%);
	position: absolute;
	top:-10px;
	left:0;
	z-index: 1;
}

#contact h2{
	font-size:5rem;
	font-weight: 800;
	line-height: normal;
	display: flex;
	justify-content: center;
	gap:5px;
	color:#fff;
}

#contact h2 span{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:1.2em;
	height: 1.2em;
	background-color: #F46A0F;
	border:2px solid #fff;
	border-radius: 8px;
	text-align: center;
	padding-bottom: 3px;
}

#contact_coment{
	color:#fff;
	font-size:1.15rem;
	margin:50px auto;
	text-align: center;
	font-weight: 700;
	text-shadow:1px 1px 0 #155137, -1px -1px 0 #155137,
              -1px 1px 0 #155137, 1px -1px 0 #155137,
              0px 1px 0 #155137,  0 -1px 0 #155137,
              -1px 0 0 #155137, 1px 0 0 #155137;
	
}

#request-pr{
	margin-top:20px;
	font-size:var(--s_font);
	font-weight: 700;
}

#request-pr a{
	display: inline-block;
	position: relative;
	/*text-decoration: underline;
	text-decoration-style: dotted;*/
}

#request-pr a::after{
	content: '';
	width:100%;
	height: 1px;
	display: block;
	position: absolute;
	bottom:3px;
	left:0;
	border-bottom:1px solid #fff;
}


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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#contact{
		padding:80px 10px;
	}
	#contact h2{
		font-size:4rem;
	}
	
	#contact_coment{
		width:95%;
		font-size:var(--nomal_font);
		text-align: left;
	}
}
/*---------------------------



	フォーム



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

#contact form{
	width:min(95%,1000px);
	margin:0 auto;
}

#contact table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 5px;
}

#contact th,
#contact td{
	padding:8px 10px;
	line-height: normal;
	font-size:1.2rem;
}

#contact_bace th,
#course th,
#kakunin th{
	width:300px;
	/*font-size:1.15rem;*/
	font-weight: 700;
	color:#fff;
	text-shadow:1px 1px 0 #155137, -1px -1px 0 #155137,
              -1px 1px 0 #155137, 1px -1px 0 #155137,
              0px 1px 0 #155137,  0 -1px 0 #155137,
              -1px 0 0 #155137, 1px 0 0 #155137,
		2px 2px 0  rgba(21,81,55,0.76);
	ackground: #84D2B1;
	position: relative;
	background-color: #4AAC82;
	border-radius: 3px 0 0 3px;
	background-image: -webkit-linear-gradient(bottom, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),-webkit-linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-image: -o-linear-gradient(bottom, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),-o-linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-image: linear-gradient(to top, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-size: 100% 10px,100% 10px;
	background-position: top,bottom;
	background-repeat: repeat-x,repeat-x;
}

#contact_bace th p,
#course th p{
	z-index: 3;
	position: relative;
}
#contact_bace th.hisu p,
#course th.hisu p{
	width:100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#contact_bace th.hisu p::after,
#course th.hisu p::after{
	content:"必須";
	font-size:var(--ss_font);
	text-shadow:none;
	background-color:var(--red_color);
	display: inline-block;
	padding:3px 10px;
	border-radius: 5px;
	white-space: nowrap;
}

#contact_bace td,
#course td,
#kakunin td{
	background-color:#EEEEEE;

	font-weight: 600;
	font-size:1rem;
	border-radius: 0 5px 5px 0;
}

#contact td p{
	margin-top:8px;
}

#contact td p.chu{
	font-size:var(--ss_font);
	font-weight: 500;
	margin-top:10px;
}

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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 431px) and (max-width: 980px){
	#contact_bace th,
	#course th{
		width: clamp(230px, 119.474px + 18.421vw, 300px);
	}
}

@media screen and (min-width: 0) and (max-width: 430px){
	#contact_bace th,
	#course th,
	#contact_bace td,
	#course td,
	#kakunin th,
	#kakunin td{
		display: block;
		width:100%;
	}
	
	#contact_bace th,
	#course th,
	#kakunin th,
	#kakunin td,
	#contact_bace th::before,
	#course th::before{
		border-radius: 3px 3px 0 0;
	}
	
	#contact_bace th::after,
	#course th::after{
		border-radius:0;
	}
	
	#contact_bace td,
	#course td,
	#kakunin th,
	#kakunin td{
		border-radius: 0 3px 3px 0;
	}
	
}


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


	フォームパーツ


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

#contact input[type="text"]:not(.p-postal-code),
#contact input[type="tel"],
#contact input[type="email"],
#contact select{
	width:min(100%,300px);
	padding:5px;
	font-size:1rem;
}

#contact .p-postal-code{
	width:80px;
	padding:5px;
	font-size:1rem;
}

#contact input[type="radio"]{
	margin-right:5px;
}

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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#contact input[type="text"]:not(input[name="zip01"]):not(input[name="zip02"]),
#contact input[type="tel"],
#contact input[type="email"],
#contact select{
	width:100%;
	}
}
/*---------------------------



	契約者・コース



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

#contact dl{
	width:100%;
	margin-top:20px;
	padding:15px;
	background-color:#EEEEEE;
	border-radius: 3px;
}

#contact dt{
	width:100%;
	padding:8px 15px;
	position: relative;
	text-align: center;
	background-color: #4AAC82;
	border-radius: 3px 0 0 3px;
	background-image: -webkit-linear-gradient(bottom, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),-webkit-linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-image: -o-linear-gradient(bottom, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),-o-linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-image: linear-gradient(to top, rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%),linear-gradient(rgba(74, 172, 130, 1) 0%, rgba(132, 210, 177, 1) 100%);
	background-size: 100% 10px,100% 10px;
	background-position: top,bottom;
	background-repeat: repeat-x,repeat-x;
	border-radius: 3px;
	margin-bottom:15px;
}


#contact dt h3{
	/*font-size:1.15rem;*/
	font-weight: 700;
	color:#fff;
	text-shadow:1px 1px 0 #155137, -1px -1px 0 #155137,
              -1px 1px 0 #155137, 1px -1px 0 #155137,
              0px 1px 0 #155137,  0 -1px 0 #155137,
              -1px 0 0 #155137, 1px 0 0 #155137,
		2px 2px 0  rgba(21,81,55,0.76);
	position: relative;
	z-index: 3;
	font-size:1.3rem;
	line-height: normal;
}

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


	契約者


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

#contractor dd .item{
	width:100%;
	background-color: #fff;
	margin-bottom:15px;
	border-radius: 5px;
	padding:10px 8px;
	display: flex;
	align-items: center;
	gap:20px 10px;
}

#contractor dd .item_title{
	width:150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	aspect-ratio:1/1;
	padding:8px;
	background-color: #B1DDCA;
	background:  url("../img/contact_02.png"),#84D2B1;
background:  url("../img/contact_02.png"),-webkit-linear-gradient(bottom, rgba(132, 210, 177, 1) 0%, rgba(74, 172, 130, 1) 14%, rgba(77, 174, 132, 1) 86%, rgba(132, 210, 177, 1) 100%);
background:  url("../img/contact_02.png"),-o-linear-gradient(bottom, rgba(132, 210, 177, 1) 0%, rgba(74, 172, 130, 1) 14%, rgba(77, 174, 132, 1) 86%, rgba(132, 210, 177, 1) 100%);
background:  url("../img/contact_02.png"),linear-gradient(to top, rgba(132, 210, 177, 1) 0%, rgba(74, 172, 130, 1) 14%, rgba(77, 174, 132, 1) 86%, rgba(132, 210, 177, 1) 100%);
	background-size: auto 90%,auto;
	background-position: center,top;
	background-repeat: no-repeat,repeat;
	font-size:1.2rem;
	font-weight: 800;
	color:#fff;
	border-radius: 5px;
	text-shadow:1px 1px 0 #155137, -1px -1px 0 #155137,
              -1px 1px 0 #155137, 1px -1px 0 #155137,
              0px 1px 0 #155137,  0 -1px 0 #155137,
              -1px 0 0 #155137, 1px 0 0 #155137,
		2px 2px 0  rgba(21,81,55,0.76);
	line-height: normal;
	flex-shrink: 0;
}

#contractor dd .item_title .no{
	font-size:2rem;
}

#contractor dd .item_title .hisu{
	qidth:100%;
	display: block;
	background-color: var(--red_color);
	padding:3px 15px;
	text-shadow:none;
	border-radius: 5px;
	font-size:var(--ss_font);
	margin-top:5px;
}

#contractor dd table{
	flex:1;
}

#contractor dd th,
#contractor dd td{
	padding:15px 5px 5px 5px;
	border-bottom:1px solid #BCCDC4;
	font-size:1rem;
}

#contractor dd th{
	width:80px;
}

#contractor input[style="text"]{
	width:100%;
}

#contractor select{
	width:auto;
}

#contractor label{
	margin-right:20px;
}

#contractor .birth label{
	margin-right:8px;
}

#contractor .birth select{
	margin-right:5px;
}

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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 750px){
	#contractor dd .item{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	#contractor dd .item_title{
		width: auto;
		display: inline-flex;
	}
	
	#contractor dd table{
		flex:none;
		width:auto;
	}
	
	#contractor dd .item{
		gap:0;
	}
	
	#contractor .birth select:first-child{
		margin-bottom:8px;
	}
	
	#contractor th{
		vertical-align: top;
	}
}
/*---------------------------


	プラン


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

#course table{
	background-color: #fff;
	border-bottom:5px solid #fff;
	border-top:5px solid #fff;
	border-left:10px solid #fff;
	border-right:10px solid #fff;
	border-radius: 5px;
}

#course label{
	margin-right:20px;
}

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


	コメント


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

#coment_item textarea{
	width:100%;
	height: 200px;
	border:none;
	padding:8px;
	border-radius: 3px;
	line-height: 1.8;
	font-size:1rem;
}

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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#coment_item dt h3{
		font-size:1.2rem;
	}
}

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


	その他


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

#dm{
	margin:20px 0;
	color:#fff;
	font-weight: 700;
}

#dm input{
	width:20px;
	height: 20px;
	margin-top:5px;
}

#dm label{
	display: flex;
	gap:5px;
}

#dearshop{
	display: flex;
	font-size:var(--ss_font);
	color:#fff;
}

#dearshop h4{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	font-weight: 400;
}

#dearshop .text{
	flex:1;
	margin-left:20px;
	padding-left:20px;
	border-left:1px dotted #fff;
}


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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#dm{
		font-size:1rem;
	}
	
	#dearshop {
		display: block;
	}
	
	#dearshop .text{
		border-left:none;
		margin-left:0;
		padding-left:0;
	}
}

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


	送信ボタン


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

#botan{
	width:100%;
	/*background-color:#EEEEEE;
	padding:8px 10px;
	border-radius: 3px;*/
	margin-top:30px;
	text-align: center;
}

#botan button{
	cursor: pointer;
}

#contact button{
	width:min(100%,300px);
	height: 70px;
	background: -webkit-linear-gradient(bottom, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background: -o-linear-gradient(bottom, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background: linear-gradient(to top, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background-position: 0 50%;
  background-size: auto 200%;
  transition: all 0.3s ease-out;
	border:3px solid #fff;
	border-radius: 10px;
	color:#fff;
	line-height: 70px;
	text-align: center;
	font-size:1.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-shadow:1px 1px 0 #A71628, -1px -1px 0 #A71628,
              -1px 1px 0 #A71628, 1px -1px 0 #A71628,
              0px 1px 0 #A71628,  0 -1px 0 #A71628,
              -1px 0 0 #A71628, 1px 0 0 #A71628;
}


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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#botan button.kakunin{
		width:100%;
	}
}

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


	チェック


---------------------------*/
form span.chu{
	color:var(--red_color);
	font-weight: 700;
	margin-left:5px;
	font-size:car(--ss_font);
}

form span.chu::before{
	content: "※";
}

#inputerr{
	font-size:1.2rem;
	font-weight: 700;
		text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
              -1px 1px 0 #fff, 1px -1px 0 #fff,
              0px 1px 0 #fff,  0 -1px 0 #fff,
              -1px 0 0 #fff, 1px 0 0 #fff;
	color:var(--red_color);
}

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


	確認画面


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

#kakunin{
	background: #32A06C;	
	padding:20px;	
}

#kakunin_inner{
	width:100%;
	background-color: #fff;
	border-radius: 10px;
	padding:30px 40px 0 40px;
}

#kakunin h2{
	font-size:3rem;
	margin-bottom:30px;
	color:#37A36D;
	letter-spacing: 0.08em;
}

#kakunin form{
	margin-top:30px;
	margin-bottom:40px;
}


#kakunin table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 5px;
}

#kakunin th,
#kakunin td{
	padding:8px 10px;
	line-height: normal;
	font-size:1.2rem;
}

#kakunin td{
	text-align: left;
}

#kakunin  button[type="submit"]{
	width:min(100%,300px);
	height: 70px;
	background: -webkit-linear-gradient(bottom, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background: -o-linear-gradient(bottom, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background: linear-gradient(to top, rgba(199, 20, 43, 1) 0%, rgba(239,96,114,1.00) 100%);
	background-position: 0 50%;
  background-size: auto 200%;
  transition: all 0.3s ease-out;
	border:3px solid #fff;
	border-radius: 10px;
	color:#fff;
	line-height: 70px;
	text-align: center;
	font-size:1.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-shadow:1px 1px 0 #A71628, -1px -1px 0 #A71628,
              -1px 1px 0 #A71628, 1px -1px 0 #A71628,
              0px 1px 0 #A71628,  0 -1px 0 #A71628,
              -1px 0 0 #A71628, 1px 0 0 #A71628;
}

#kakunin #close{
	width:min(100%,150px);
	margin:0 auto;
	padding:8px 15px;
	background-color:#AAAAAA;
	border-radius: 5px 5px 0 0;
	color:#fff;
	font-weight: 700;
	font-size: var(--s_font);
	cursor: pointer;
}

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

	レスポンシブ

---------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#kakunin  button[type="submit"]{
		width:100%;
	}
}

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


	完了画面


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

#end{
	width:100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #32A06C;
	color:#fff;
	font-weight: 700;
	font-size:1.5rem;
}

#end_ico{
	width:min(80%,200px);
	margin:0 auto 20px auto;
	line-height: 0;
	transform: translateX(-400px); /* 左にオフセット */
  animation: 0.3s fadeInLeft 0.5s ease-out forwards; /* アニメーションを適用 */
	opacity: 0;
}

#end_ico img{
	width:100%;
	height: auto;
}
/*---------------------------


	アニメーション


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

@media screen and (min-width: 981px){
	#botan button.kakunin:hover {
	   color: #fff;
  background-position: 100% 0;
	}
}

@keyframes ripple {
  0% {box-shadow: 0 0 0 0 rgba(235,56,79,0.5);}
  70% {box-shadow: 0 0 0 10px rgb(27 133 251 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(27 133 251 / 0%);}
}

/* アニメーションの定義 */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}