@charset "utf-8";

/*------------------------------------------
pagehead
------------------------------------------*/
.pagehead.entry{
	background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)),url("../images/entry/bg_pagehead.jpg");
}
/*------------------------------------------
sec_entry
------------------------------------------*/
#sec_entry{
	padding:60px 0;
}
.wrapper_form{
	width:100%;
	max-width:700px;
	margin:auto;
}
.contact_inner{
	margin:auto;
}

#sec_entry .ttl_bloc{
	text-align:center;
	margin-bottom:20px;
}

#sec_entry .ttl_bloc h3{
	color:var(--maincolor);
	font-size:3.6rem;
	line-height:1.5;
	position: relative;
}
#sec_entry .ttl_bloc p{
	margin:0px 0 60px;
}

@media screen and (max-width:768px){
	#sec_entry{
		padding:0px 0 40px;
	}
	.wrapper_form{
		padding-inline:15px;
	}
	#sec_entry .ttl_bloc h3{
		font-size:1.8rem;
	}
	#sec_entry .ttl_bloc p{
		margin:40px 0;
	}
}


.contact_wrap{
	margin-top:30px;
	border:9px solid var(--lightgray);
	padding:50px;
	display:flex;
	justify-content:center;
}
.form_row{
	width:100%;
	max-width:900px;
}
.row{
	display:flex;
	align-items:center;
	gap:15px;
}
.w30{
	width:50%;
}
.w50{
	width:50%;
}
.w100{
	width:100%;
}
#error_message{
	color:#ff0000;
	font-size:1.2rem;
}

.form_box{
	padding:10px;
	box-sizing:border-box;
}
.form_box h4{
	font-size:1.4rem;
	margin:10px 0 15px;
}
.form_box input::placeholder{
	font-size:1.2rem;
}

@media screen and (max-width:768px){
	.contact_wrap{
		border:6px solid var(--lightgray);
		padding:10px 15px 30px;
	}
	.form_row{
		width:100%;
	}
	.form_box{
		padding:0px;
	}
	.form_box *{
		font-size:1.4rem;
	}
	.form_box .row{
		/*flex-wrap:wrap;*/
	}
	.form_box h4{
		font-size:1.4rem;
		margin:20px 0 15px;
	}
}

.form_box input:not([type="radio"]),
.form_box textarea{
	padding:10px;
	/*width:100%;*/
	border:none;
	background:#EAEAEA;
}
input::placeholder {
  opacity: 0.5;
}

.agreement{
	padding:20px;
	text-align:center;
}
.btnarea {
	margin-top:40px;
	text-align:center;
}
.btnarea button{
	margin:auto;
}
.btnarea button:disabled {
	background: #B4B4B4 !important;
	border: 1px solid #B4B4B4 !important;
	cursor: not-allowed;
}

.notes_required .checkBtn_area {
	margin: 24px auto 0px;
	transition-duration: 0.2s;
	text-align:center;
	font-size:1.6rem;
}
.notes_required .checkBtn_area a{
	color:var(--blue);
	border-bottom:1px solid var(--blue);
	margin:0 5px;
}
span.hissu {
	background: #ff0000;
	color: #fff;
	font-size: 0.8rem;
	padding: 3px 10px;
	font-weight:normal;
	margin-left:8px;
}
.hp {
    display: none;
}
@media screen and (max-width:768px){
	.notes_required .checkBtn_area {
		margin: 18px auto 0px;
		font-size:1.4rem;
	}
}

.btn_contact{
	height:74px;
	width:300px;
	display:flex;
	background:var(--blue);
	border:none;
	align-items:center;
	position:relative;
	border-radius:8px;
}
.btn_contact p{
	display:flex;
	width:100%;
	align-items:center;
	padding-left:10px;
	font-size:1.7rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
	z-index:1;
}
.btn_contact p::before{
	display:inline-block;
	content: "";
	height: 1px;
	width: 46px;
	background-color: #fff;
	margin-right: 5rem;
}
.btn_contact::before{
	position: absolute;
	width: 0;
	height: 100%;
	content: '';
	background-color: var(--blue);
	left: 0;
	transition-duration: .2s;
}
.btn_contact:not(:disabled):hover::before{
	width: 100%;
}
@media screen and (max-width:768px){
	.btn_contact{
		height:60px;
		border-radius:8px;
	}
	.btn_contact p{
		font-size:1.4rem;
	}
	.btn_contact p::before{
		width: 40px;
		margin-right: 5rem;
	}
}

.radio_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .3em 2em;
	border: none;
}
.radio_wrap label {
	display: flex;
	align-items: center;
	gap: 0 .5em;
	position: relative;
	cursor: pointer;
}

@media screen and (max-width:768px){
	.radio_wrap.kind {
		flex-direction: column;
		gap: .3em 2em;
	}
}

/*
.radio_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}

.radio_wrap label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}
@media screen and (max-width:768px){
	.radio_wrap {
	    gap: 1em 2em;
	    border: none;
	}
	.radio_wrap label {
		font-size:1.4rem;
		gap: 0 .5em;
	}
}
.radio_wrap label::before,
.radio_wrap label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.radio_wrap label::before {
    width: 18px;
    height: 18px;
    background-color: #e6edf3;
}

.radio_wrap label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--maincolor);
    animation: anim-radio-1 .3s linear;
}

@keyframes anim-radio-1 {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #f2f2f233;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.radio_wrap input {
    display: none;
}
*/

.thanks_btnarea {
	margin-top:40px;
	text-align:center;
}
.thanks_btnarea button{
	margin:auto;
}

dialog#termsModal {
	border: none;
	border-radius: 8px;
	padding: 15px;
	width: 80%;
	max-width: 500px;
}

dialog#termsModal::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}
dialog#termsModal h2{
	font-size:1.6rem;
	margin-bottom:1em;
}
dialog#termsModal h3{
	font-size:1.4rem;
	text-align:left;
	margin-bottom:1em;
}
dialog#termsModal p{
	font-size:1.2rem;
	text-align:left;
	margin-bottom:1em;
}
dialog#termsModal #closeBtn{
	font-size:1.2rem;
}