@charset "UTF-8";

/* =========================
   common
========================= */
.grecaptcha-badge{
visibility:hidden;
}
::placeholder{
color:#ccc;
}

/* =========================
   form
========================= */
#form p{
font-size:18px;
line-height:1.5em;
margin:1em 0 0;
}
#form .top{
margin:0 0 1.2rem;
border-bottom:3px dotted #f26925;
}
#form h4{
width:100%;
line-height:1.5;
letter-spacing:.2em;
font-weight:700;
margin:0 0 1rem;
padding-left:1rem;
font-size:var(--font-size-21);
border-bottom:solid 1px #cfd0d1;
}
#form h4 span{
display:inline-block;
border-bottom:solid 1px #7e1083;
}
#form .err_msg{
color:red;
}
#form input[type="text"]:hover,
#form input[type="tel"]:hover,
#form input[type="email"]:hover,
#form textarea:hover{
border:1px solid #666;
}
#form input[type="text"]:focus,
#form input[type="tel"]:focus,
#form input[type="email"]:focus,
#form textarea:focus{
background-color:#ffffcc;
border:1px solid #333;
}
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea{
border:1px solid #999;
padding:3px 3px 3px 5px;
}

/* =========================
   required / optional
========================= */
.anq_required{
position:relative;
}
.anq_required:after,
.optional:after{
font-size:var(--font-size-14);
color:#fff;
border-radius:3px;
padding:3px 0;
text-align:center;
line-height:1em;
width:3em;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
.anq_required:after{
content:"必須";
background-color:#c10d23;
}
.optional:after{
content:"任意";
background-color:#6c6c6c;
}

/* =========================
   form area
========================= */
.form-area{
width:100%;
margin:0 auto;
padding-bottom:4rem;
}
.form-area h3{
font-size:30px;
line-height:1.7em;
font-weight:700;
text-align:center;
margin:0 0 20px;
}
.form-area p{
text-align:center;
font-size:18px;
line-height:1.7em;
}
.form-area dl{
margin-bottom:4rem;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
box-sizing:border-box;
border:1px solid #a6a6a6;
}
.form-area dt{
text-align:left;
font-size:var(--font-size-18);
line-height:1.7em;
width:25%;
margin:1rem 1rem 1rem 0;
background:#f7f7f7;
border:1px solid #fff;
display:inline-block;
}
.form-area dd{
font-size:var(--font-size-18);
line-height:1.7em;
text-align:left;
color:#000;
width:72%;
margin:1rem 0;
}
.form-area dd.flex{
font-size:var(--font-size-16);
}
.form-area .text_postal{
margin-bottom:20px;
}
.form-area input[type="text"],
.form-area input[type="tel"],
.form-area input[type="email"],
.form-area textarea{
font-size:18px;
line-height:1.8em;
padding-left:5px;
border:1px solid #999;
border-radius:4px;
box-sizing:border-box;
}
.form-area input[type="text"]:focus,
.form-area input[type="tel"]:focus,
.form-area input[type="email"]:focus,
.form-area textarea:focus{
background-color:#ffffcc;
border:1px solid #333;
}
.form-area select{
border:1px solid #999;
font-size:18px;
border-radius:6px;
padding:.5em;
}
.form-area label {
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 30%;
    text-align: center;
}
.form-area table{
border-collapse:collapse;
width:100%;
margin-bottom:2rem;
}
.form-area th,
.form-area td{
text-align:left;
padding:1rem;
font-size:var(--font-size-18);
border:solid 1px #ccc;
}
.form-area th{
width:25%;
background:#f7f7f7;
}
.form-area td{
width:auto;
}

/* =========================
確認・エラーページ
========================= */
.form-area.confirm {
padding: 4rem 0 8rem;
}
.form-area .box_con h2 {
margin-bottom: 3rem;
}
p.error_messe{
	margin:5px 0;
	color:red;
	margin-bottom: 1em;
}
.back_bt{
padding: 0.8rem 3rem;
font-size:var(--font-size-16);
} 
.form-error{
color:#d60000;
font-size:var(--font-size-16)!important;
margin-top:4px!important;
display:none;
text-align: left!important;
}

/* =========================
   radio / checkbox
========================= */
input[type="radio"],
input[type="checkbox"]{
display:none;
}
.radio,
.checkbox{
box-sizing:border-box;
transition:background-color .2s linear;
position:relative;
display:inline-block;
padding:12px 12px 12px 34px;
border-radius:8px;
background-color:#f6f7f8;
vertical-align:middle;
cursor:pointer;
}
.radio:hover,
.checkbox:hover{
background-color:#ffd1d9;
}
.radio:hover:after,
.checkbox:hover:after{
border-color:#ff6600;
}
.radio:after,
.checkbox:after{
transition:border-color .2s linear;
position:absolute;
top:45%;
left:12px;
display:block;
margin-top:-8px;
width:20px;
height:20px;
border:2px solid #bbb;
content:"";
}
.radio:after{
border-radius:100vh;
}
.checkbox:after{
border-radius:3px;
}
.radio:before{
transition:opacity .2s linear;
position:absolute;
top:50%;
left:18px;
display:block;
margin-top:-5px;
margin-left:-0.5px;
width:12px;
height:12px;
border-radius:50%;
background-color:#ff3808;
content:"";
opacity:0;
}
input[type="radio"]:checked + .radio:before{
opacity:1;
}
.checkbox:before{
transition:opacity .2s linear;
position:absolute;
top:46%;
left:20px;
display:block;
margin-top:-7px;
width:7px;
height:12px;
border-right:3px solid #ff3808;
border-bottom:3px solid #ff3808;
content:"";
opacity:0;
transform:rotate(45deg);
}
input[type="checkbox"]:checked + .checkbox:before{
opacity:1;
}
.accept_ck{
margin-bottom:2rem;
}

/* =========================
   submit
========================= */
#submit{
text-align:center;
}
#submit .css_btn_class{
font-size:clamp(1.125rem,1.031rem + .47vw,1.5rem);
line-height:1.5em;
font-weight:700;
margin:20px auto 30px;
padding:1rem 4rem;
border-radius:6px;
background-color:#ca050f;
background-clip:padding-box;
border:none;
color:#fff;
touch-action:manipulation;
}
#submit .css_btn_class:active{
position:relative;
top:1px;
}
#submit .css_btn_class:hover{
background-color:#ea1b2f;
}
.button{
display:inline-block;
padding:20px 30px;
color:#fff;
border:none;
border-radius:4px;
cursor:pointer;
}
.button:disabled{
opacity:.5;
cursor:not-allowed;
}

/* =========================
   privacy policy
========================= */
#contents #privacy{
text-align:left;
padding-top:30px;
width:100%;
margin:0 auto 4vw;
}
#privacy .title{
position:relative;
margin:0 0 2rem;
font-size:clamp(.75rem,.688rem + .31vw,1rem);
color:#333;
line-height:1.5em;
text-align:center;
padding:.5em;
}
#privacy .title.active{
border-bottom:none;
}
#privacy .title .tg-toggle{
display:block;
vertical-align:middle;
color:#919191;
line-height:1;
width:1.2em;
height:.25em;
background:#919191;
position:relative;
float:right;
margin-top:10px;
right:10px;
}
#privacy .title .tg-toggle::before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:inherit;
border-radius:inherit;
transform:rotate(90deg);
}
#privacy .title.active .tg-toggle{
display:block;
vertical-align:middle;
color:#919191;
position:relative;
width:18px;
height:18px;
background:none;
margin-top:2px;
}
#privacy .title.active .tg-toggle::before,
#privacy .title.active .tg-toggle::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:4px;
height:18px;
background:#919191;
}
#privacy .title.active .tg-toggle::before{
transform:translate(-50%,-50%) rotate(45deg);
}
#privacy .title.active .tg-toggle::after{
transform:translate(-50%,-50%) rotate(-45deg);
}
#form #privacy .privacy_contents{
padding:1em 2em 2em;
margin-bottom:4rem;
overflow-y:auto;
height:400px;
background-color:#fff;
border:solid 1px #a6a6a6;
}
#form #privacy h5{
font-size:var(--font-size-22);
line-height:1.5em;
font-weight:700;
color:#fff;
margin:1rem 0 2rem;
background:#7e1083;
padding:.5rem 1rem;
}
#form #privacy h6{
font-size:18px;
line-height:1.5em;
font-weight:700;
margin:1.5em auto .2em;
}
#form #privacy p{
font-size:var(--font-size-16);
line-height:1.7em;
margin-bottom:1em;
text-align:left;
}
#form #privacy ul{
margin-bottom:1em;
}
#privacy dl{
text-align:left;
margin-bottom:2rem;
border:none;
font-size:var(--font-size-16);
}
#privacy dl:last-child {
margin-bottom: 0;
}
#privacy dt{
width:100%;
font-weight:700;
padding:.5rem;
margin:0 0 .5rem;
border-bottom:solid 1px #7e1083;
background:none;
font-size:var(--font-size-16);
}
#privacy dd{
width:100%;
margin:0;
padding:.5rem;
font-size:var(--font-size-16);
}

/* =========================
   thanks
========================= */
#thanks{
padding:50px 0;
}
#thanks h2{
text-align:center;
font-size:28px;
margin:2rem 0;
}
#thanks h3{
text-align:center;
font-size:var(--font-size-34);
margin-bottom:2rem;
}
#thanks p.thanks{
font-size:var(--font-size-28);
line-height:1.5em;
font-weight:700;
color:#f00;
margin-bottom:30px;
text-align:center;
}
#thanks p{
font-size:var(--font-size-18);
line-height:1.7em;
color:#000;
padding-top:10px;
margin-top:10px;
text-align:center;
}
#thanks .address{
font-style:normal;
font-size:var(--font-size-18);
line-height:1.7em;
border-top:1px solid #ccc;
padding:20px 0 0;
margin:4rem auto;
text-align:center;
width:80%;
}
#thanks dl{
border:1px solid #7e1083;
padding:2rem 0;
display:flex;
flex-direction:column;
justify-content:center;
font-size:var(--font-size-18);
text-align:center;
margin-bottom:2rem;
}
#thanks dt{
width:25%;
margin:0 auto 1rem;
}
#thanks dd{
line-height:2;
}
#thanks .back a{
position:relative;
text-decoration:none;
}
#thanks .back a:hover{
color:#666;
}
#thanks .back a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:100%;
height:1px;
background:currentColor;
transition:opacity .3s ease;
}
#thanks .back a:hover::after{
opacity:0;
}

/* =========================
   responsive 768
========================= */
@media screen and (max-width:768px){

.form-area th{
width:35%;
}
}

/* =========================
   responsive 520
========================= */
@media screen and (max-width:520px){
.form-area{
font-size:16px;
padding-bottom:100px;
}
.form-area input[type="text"],
.form-area input[type="tel"],
.form-area input[type="email"],
.form-area textarea{
font-size:16px;
}
.form-area dt{
font-size:16px;
margin-top:1.5rem;
margin-bottom:.5rem;
font-weight:700;
width:100%;
padding:0;
}
.form-area dd{
font-size:16px;
width:100%;
padding:0;
}

.form-area th,
.form-area td{
display: block;
width:92%;
border: none;
}

.form-area label {
width: 90%;
}
#privacy .title{
font-size:16px;
}
#form #privacy .privacy_contents{
padding:1rem;
}
#form #privacy h5,
#form #privacy p{
font-size:14px;
}
.form-area label{
font-size:16px;
margin-bottom:1.5rem;
}
#thanks{
width:90%;
padding:0;
margin:2rem auto 4rem;
}
#thanks h2{
line-height:1.8em;
}
#thanks p{
font-size:16px;
}
}

/* =========================
   responsive 32.5em
========================= */
@media (max-width:32.5em){
#thanks h3{
font-size:24px;
line-height:1.8em;
}
}