@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/*----------------------------------------------------
contact
------------------------------------------------------*/
#form p.kome{color: #C51100; margin-top: 1em}
#form p.kakunin{text-align: center; margin-bottom:40px; font-size: 1.6rem}
#form dl.for_tel{font-size: 1.6rem; line-height: 1.8; margin: auto; text-align: center}
#form dl.for_tel dd{font-size: 2.4rem}
#form .text_h4{font-weight: bold; font-size: 1.8rem; line-height: 1.6; margin-bottom: 1em}
.note{font-size: 1.4rem; margin-top: 0.5em; display:inline-block; margin-left: 1em}

#form .attention a{text-decoration: underline}
main#contents_top.one_page #form .attention p{margin: 0}
#form .attention div{margin-top: 0.5em; text-align:center; font-weight: 500; font-size: 1.6rem;}

#form .tel_contact div{font-size: 1.8rem; line-height: 1.8}

/*フォーム*/
#form_inner .ex{font-size: 1.2rem; margin-top: 0.5em;}
#form_inner .ad01, 
#form_inner .ad02, 
#form_inner .ad03{margin-bottom: 1em}
#form_inner .koumoku{margin-bottom: 10px; background-color: #f0f0f0; padding: 0.3em 0.5em; color: #000000;}

#form_inner{font-size: 1.8rem;}

#form_inner dl{
border-bottom: 1px dotted #CCCCCC;
display: table;
width: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
line-height: 1.6;
font-size: 1.8rem;
}
#form_inner dl.first{border-top: 1px dotted #CCCCCC; padding-top: 15px; margin-top: 15px;}
#form_inner dt, 
#form_inner dd{display: table-cell; vertical-align:middle; box-sizing:border-box; padding: 12px 20px}
#form_inner dt{
color: #000000;
width: 30%;
font-weight: 700;
margin: 1em 0;
line-height: 1.4;
}
#form_inner dt.top{vertical-align: top}
#form_inner dd{width:70%;}
#form_inner dt span.lines{display: inline-block; font-weight: normal; font-size: 1.4rem}
#form_inner dt span.nomal{ font-weight: normal; font-size: 1.4rem}
#form_inner dd span.simei{display: inline-block; width: 2em; font-size:1.6rem;}
#form_inner dd div.lines{display: inline;}
#form_inner dd p{text-align: left; font-size: 1.6rem; margin: 0}

#form_inner input[type="text"], 
#form_inner input[type="email"], 
#form_inner input[type="tel"], 
#form_inner textarea{
	background-color: #FFFFFF;
	border: 3px solid #d9d9d9;
	padding: 12px;
	font-size: 1.8rem;
	width: 70%;
	line-height: 1.6;
	box-sizing: border-box;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
	border-radius:none;
}

#form_inner input[type="text"].yubin{width: 9em}
#form_inner textarea, 
#form_inner input[type="text"].city{width:100%;}

#form_inner input[type="text"]:focus, 
#form_inner input[type="email"]:focus, 
#form_inner input[type="tel"]:focus, 
#form_inner textarea:focus{border: 3px solid #C51100}

#form_inner dd div{word-break:break-all;}	/* 自由記述欄に切れ目のない英数字が入力された場合の対応(強制改行する) */
#form .error{ color:#C51100; }/* エラー表示の指定 */

span.required{
color: #FFF;
display: inline-block;
font-weight: normal;
font-size: 1.3rem;
margin-right: 0.5em;
background-color: #C50011;
padding: 0.2em 0.7em;
border-radius: 4px;
vertical-align: middle;
line-height: 1.4;

}
span.required.none{background-color: #888888;}
#privacy_check span.required{margin-left: 1em;}
#privacy_check{background-color: #f2f2f2; text-align: center; padding: 2em; margin: 50px 0; font-size: 1.8rem;}
.yubin_mark{font-size: 2rem; padding-right: 0.5em; display: inline-block}


/*セレクト装飾*/
.selectbox {position: relative;}
.selectbox select {
  position: relative;
  background-color: white;
  border: 3px solid #d9d9d9;
  border-radius: none;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  color: #333333;  
  margin: 0;      
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.selectbox select::-ms-expand {display: none;}/*for IE*/

@supports (-ms-ime-align:auto) {/*for Edge*/
.selectbox select {
    padding: 0.5em 3.5em 0.4em 1em;
  }
}

.selectbox::after {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    border-bottom: 2px solid #C51100;
    border-right: 2px solid #C51100;
    content: '';
	pointer-events: none;
}
.selectbox select:focus{border: 3px solid #e88400; outline: 0;}

/*ラジオボタン装飾*/
.radio-deco {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
	/*margin-top: 1em;*/
}

.radio-deco label {
    display: flex;
	flex-wrap: wrap; 
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}
.radio-deco.choice_office{margin-top: 0.5em}
.radio-deco.choice_office label{margin-top: 0.5em; font-size: 1.8rem; font-weight: 600;}
.s_size{font-weight: normal; font-size: 1.5rem; padding-left: 1.5em;}
.s_size.sp{display: none}

.radio-deco.choice4 label{margin-bottom: 1em}
.input_text{display: inline-block; margin-left: 10px; width: 80%;}
#form_inner .input_text input[type="text"]{width: 100%;}

.label_wrap{width: 100%;}

.radio-deco label::before,
.radio-deco label::after {
    border-radius: 50%;
    content: '';
}

.radio-deco label::before {
    width: 22px;
    height: 22px;
    border: 1px solid #e50011;
    box-sizing: border-box;
	background-color: #ffffff;
}

.radio-deco label::after {
    position: absolute;
    width: 13px;
    height: 13px;
	left: 11px;
	top: 50%;
    transform: translate(-50%, -50%);
}

.radio-deco label:has(:checked)::after {
    background-color: #e50011;
    animation: anim-radio-2 .3s linear;
}

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

.radio-deco input[type="radio"] {display: none;}

/* チェックボックス装飾 */
input[type=checkbox] {display: none;}
.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #C50011;
    content: '';
    display: block;
    left: 5px;
    position: absolute;
    top: 50%;
	transform: translateY(-50%);
    width: 22px;
	height: 22px;
}
.checkbox01::after {
    border-right: 3px solid #C50011;
    border-bottom: 3px solid #C50011;
    content: '';
    display: block;
    height: 15px;
    left: 10px;
    opacity: 0;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 12px;
}
input[type=checkbox]:checked + .checkbox01::after {opacity: 1;}
.checkbox01 span.pad{padding-left: 35px}

/*ボタン*/
#form .btnarea, 
#thanks .btnarea{ text-align:center;}
#form .btnarea{margin-top: 50px;}
#thanks .btnarea{ margin-top:50px;}

#form .btnarea p{text-align: center}
#form .btnarea p.upper{margin-bottom: 30px}
#form .btnarea p.bottom{margin-top: 30px}

#form button[type="button"].btn_jyusho{
	font-size:1.8rem;
	padding:0.4em 1.2em 0.4em 1.2em;
	border-radius:40px;
	appearance:none;
	width:7em;
	text-align:center;
	position:relative;
	transition: all 0.3s;
	cursor:pointer;
	margin-left:20px; 
    margin-right:10px; 
    background-color: #f0f0f0;
    color: #000000;
    box-sizing: border-box;
    font-weight: 500;
    font-family: Noto Sans JP, sans-serif;
	border: 1px solid #999999;
}

#form button[type="submit"], 
#form button[type="reset"], 
#thanks #btn_home a{
	font-size:2.4rem;
    font-family: Noto Sans JP, sans-serif;
	border:none;
	appearance:none;
	width:33%;
	text-align:center;
	transition: all 0.3s;
	cursor:pointer;
	margin-left:20px; 
	margin-right:20px;
    font-weight: 500;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
	border-radius:100px;
}
#form button[type="submit"], 
#form button[type="reset"]{padding: 1em 33px 1em 0;}
#form button#btn_back[type="submit"]{padding: 1em 0 1em 33px;}
#thanks #btn_home a{padding: 0.8em 33px 0.8em 0;}

#form button[type="submit"]{ background-color:#C51100; color:#FFFFFF;}
#form button[type="submit"]#btn_back{background-color: #999999; color: #FFFFFF}

#form button[type="submit"]:hover, 
#form button[type="reset"]:hover, 
#thanks #btn_home a:hover{background-color: #ff1600; color: #FFFFFF; opacity: 1}
#form button[type="button"].btn_jyusho:hover{background-color: #999999; color: #FFFFFF; opacity: 1}
#form button[type="submit"]#btn_back:hover{background-color: #666666; color: #FFFFFF; opacity: 1}
#thanks #btn_home a:hover{ text-decoration:none}


#form button[type="reset"], 
#thanks #btn_home a{ background-color:#C51100; color:#FFFFFF}

#form button[type="submit"] span, 
#form button[type="reset"] span, 
#thanks #btn_home a span, 
#form button#btn_back[type="submit"] span{position:relative; display: inline-block}

#form button[type="submit"] span::after, 
#thanks #btn_home a span::after, 
#form button#btn_back[type="submit"] span::before{
content: '';
width: 33px;
height: 26px;
position: absolute;
background-repeat: no-repeat;
background-size: 26px 26px;
transition: all .2s;
top:50%;
transform: translateY(-50%)
}

#form button[type="submit"] span::after, 
#thanks #btn_home a span::after{
background-image: url(../images/btn_next_red.svg);
background-position: right 0%;
}

#form button#btn_back[type="submit"] span::after{display: none}
#form button#btn_back[type="submit"] span::before{
background-image: url(../images/btn_back_black.svg);
background-position: left 0%;
left: -33px;
}

#form button[type="submit"]:hover span::after, 
#thanks #btn_home a:hover span::after, 
#thanks #btn_home:hover span::after{width: 38px;}
#form button#btn_back[type="submit"]:hover span::before{left: -38px;}


/*サンキューページ*/
#thanks {text-align: center; line-height: 1.6}
#thanks p.title{ font-size:2.8rem; color:#C51100; font-weight:bold;}
#thanks .title2{font-size:2rem; font-weight:bold; line-height: 1.6; margin-bottom: 0.5em; color: #896B56}
#thanks .thanks_wrap{border: 1px solid #D2C7BF; padding: 3%; margin-top: 4em; box-sizing: border-box; display: inline-block}
#thanks li{margin-bottom: 10px}
#thanks li.tel_num{font-size: 1.8rem; font-weight: 500}

#thanks .thanks_wrap span{padding-left: 1em;}


/* ===================================================
1024px for tablet
=====================================================*/
@media screen and (max-width : 1024px) {

#form_inner dt span.nomal{font-size: 1.2rem; text-align: right; display: block}
#form_inner dt, 
#form_inner dd{padding: 12px 10px}

#form_inner dl, 
#form_inner input[type="text"], 
#form_inner input[type="email"], 
#form_inner input[type="tel"], 
#form_inner textarea, 
#form button[type="button"].btn_jyusho, 
#privacy_check{font-size: 1.6rem}

#form_inner input[type="text"], 
#form_inner input[type="tel"], 
#form_inner input[type="email"], 
#form_inner textarea{width:100%;}

#form button[type="submit"], 
#form button[type="reset"], 
#thanks #btn_home a{width: 40%; font-size:2rem; padding-top: 1.2em; padding-bottom: 1.2em}

#form button[type="submit"], 
#form button[type="reset"]{padding: 1.2em 33px 1.2em 0;}
#form button#btn_back[type="submit"]{padding: 1.2em 0 1.2em 33px;}
#thanks #btn_home a{padding: 1em 33px 1em 0;}

.checkbox01::after{top:0}

span.required{
font-size: 1.1rem;
margin-right: 0.7em;
padding: 0.2em 0.5em;
}

#privacy_check span.required{margin-left: 0.7em;}

span.s_size{font-size: 1.3rem;}
.s_size{display: none}
.s_size.sp{display: block; font-size: 1.3rem; margin-top: 0.5em; margin-left: 12px}

span.brackets{font-size: 90%;}
.input_text{width: 75%;}

}

/* ===================================================
767px for SP
=====================================================*/
@media screen and (max-width : 767px) {


/*----------------------------------------------------
contact
------------------------------------------------------*/
dl.for_tel{font-size: 1.4rem; line-height: 1.8}
dl.for_tel dd{font-size: 2rem}
.note{font-size: 1.3rem; display:block; margin-left: 0}
#form_inner dt span.nomal{display: inline-block}

#form .text_h4{font-size: 1.6rem}

#form ul.radio li{margin-top: 10px; margin-bottom: 10px;}

#form .tel_contact div{font-size: 1.6rem;}

/*フォーム*/
#form_inner dl{margin-bottom:0; border-bottom: none; padding-bottom: 0}
#form_inner dt, 
#form_inner dd{display: block}
#form_inner dt{ width:100%; margin-top: 30px; border-left: 4px solid #333333; padding: 0.5em; background-color: #f0f0f0;}
#form_inner dl.first{border-top:none; padding-top: 0; margin-top: 0;}
#form_inner dt span.lines{display: inline-block}
#form_inner dd{width:100%; padding: 0}
/*#form_inner dd span{ padding-left:0px; display:block; font-size:1.2rem; margin-top:5px}*/

#form_inner dd span.yubin_mark{font-size: 2.4rem; padding-right: 0.3em; display: inline-block}

#form_inner select.classic{width: 80%; font-size: 1.6rem}

#form_inner .tel a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color: #333333;
}
#form_inner select{width:100%;}
.radio-deco.space label:nth-child(3), 
.radio-deco.space label:nth-child(4){margin-top: 1em}

/*ラジオボタンの位置調整*/
span.brackets{margin-left: 22px}

.radio-deco label#adjust-btob::after, 
.radio-deco label#adjust-others::after{left:11px; top:12.5px;}

.input_text{display:block; margin-left: 0; width: 100%; margin-top: 10px}
/*ラジオボタンの位置調整 end*/

#privacy_check{padding: 1em 0.5em; margin: 30px 0 40px 0; font-size: 1.6rem;}


/*チェックボックス*/
.checkbox01{display: inline-block}

#form .attention{font-size: 1.4rem}

/*ボタン*/
#form button[type="submit"], 
#form button[type="reset"], 
#thanks #btn_home a{
	font-size:1.8rem;
	width: 70%;
    margin-left:0px; 
	margin-right:0px;
}
#form button[type="submit"]#btn_back{margin-bottom: 1.5em}
#thanks #btn_home a{padding-top:1em; padding-bottom: 1em}

#form .btnarea{margin-bottom: 6%; margin-top: 10%}


#privacy .ttl{font-size: 1.8rem; font-weight: 500; margin-bottom: 0.5em}
#privacy .scroll{height: 150px; margin-top: 6%; margin-bottom: 8%}
#privacy .checkbox .checkbox-parts::before{top: 3px}

/*サンキューページ*/
#thanks {text-align: left}
#thanks p.title{ font-size:1.8rem; text-align: center}
#thanks .title2{font-size:1.8rem;}
#thanks .thanks_wrap{padding: 4%; margin-top: 8%}
#thanks li{margin-bottom: 10px}
}

/*@media screen and (max-width : 450px) {
.input_text{width: 70%;}
}*/