@charset "utf-8";
/* CSS Document */



/*----------------
width指定
-----------------*/

/*100%(フル幅)*/
.contents-wrapper{
 margin: 0 auto;
position:relative;
}

/*コンテンツエリア幅*/
.contents{
	margin: 0 auto;
	width: 95%;
	max-width: 1000px;
	position: relative;
}

/* =============================================================================
   全体共通　
   ========================================================================== */

/* #kasoupage-inquiry figure{
	 margin: 0 auto;
    width: 980px;
}       
*/


/*フォーム上のテキストの部分
.contactform_wrapper dd{
margin: 0;
}*/


/*フォーム上のテキストの部分
.contactform_wrapper .form dt{
color: #fff;
}*/

/*.contactform_wrapper ul{
letter-spacing:2px;
display:flex;
width:505px;
margin:0 auto;
margin-top: -2%;/*位置調整
}*/

.form_inquiry > dt.bg_2 {
    background: #DED9AF;
    color: #2a2a2a;
    font-weight: bold;
}

.ico_or {
        display: inline-block;
        margin-left: 1em;
        padding: 3px 13px;
        color: #fff;
        font-size: 14px;
        border-radius: 3px;
        white-space: nowrap;
 }

/*------------------
  その他の全体共通設定
  ------------------*/
section.form{
	 margin-top: 75px;
}
    
section.form p{
	color: #2a2a2a;
	line-height: 1.6;
	font-size:clamp(0.938rem, 0.899rem + 0.08vw, 1rem);/*values(min:15px,max16px)viewport(min768px,max2000px)*/
	text-align: justify;
}

section.form p.intro{
	margin: 0 auto;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	color: #2a2a2a;
	font-size:clamp(1.188rem, 1.11rem + 0.16vw, 1.313rem);/*values(min:19px,max21px)viewport(min768px,max2000px)*/
    margin-bottom: 15px;
    text-align: center;
}

section.form p.annotation{
	text-align: left;
    margin-bottom: 54px;
}

/*文字　中央揃えに*/
section.form .text_center{
	text-align: center;
}

/*文字　太く*/
section.form .bold{
	font-weight: bold;
}

/*マーカー*/
section.form span.maker{
	background: linear-gradient(transparent 50%, #54D6FF 50%);
}




/*------------------
  必須：リセット
  ------------------*/
dd{
margin: 0;
}

/*のデフォルトで出る下向きのアイコンを非表示*/
select {
    /*background: transparent;
    border: none;
    outline: none;*/
    width: 100%;/*バリデーションメッセージが表示されると1001%にしてないと疑似要素で表示させてる▼の位置が動くので調整*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

dd.sankaku{
    position: relative;
}
/*
dd.sankaku ::after{
    display: inline-block;
    color: #2a2a2a;
    content: "\f0d7";
    font-weight: 900;
    font-size: 22px;
    font-family: "Font Awesome 5 Free";
    transform: translate(-27px, 3px);
}
*/
dd.sankaku ::after {
    position: absolute;
    top:35px;
    right: 10px;
    color: #2a2a2a;
    content: "\f0d7";
    font-weight: 900;
    font-size: 22px;
    font-family: "Font Awesome 5 Free";
    transform: translate(-27px, 5px);
}

dd.soukou .error::after  {
    display: none;
}

select.displacement,
select.mileage{
	padding-right: 60px;
}


/*
input[type=checkbox] {
display: none; /* checkboxを非表示にする 
}

display: none;だと、キーボードを使った選択操作ができない＝アクセシビリティに対応できない。
さらにhoverやfocusなどinputを選択している時のスタイルも指定されていないため、ユーザーにとってわかりにくいものとなる。

解決方法は簡単　→　input要素をdisplay: none;ではなく、widthを0にします。
こうすることでタブによるフォーカスやスペースによる選択ができるようになります。
*/





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

チェックボックスのcssカスタマイズ

--------------------------------*/
/*1つの選択肢の全体を内包する*/
.ECM_CheckboxInput {
padding: 12px 8px;
display: flex;
align-items: center;
cursor: pointer;
}

/**/
/*デフォルトのアイコンを非表示に。*/
.ECM_CheckboxInput-Input {
margin: 0;
width: 0;/*input[type=checkbox] {display: none;}の代り！らしい！これこ重要。*/
opacity: 0;
}



/*1つの選択肢の全体を内包する*/
/*全体を内包するにhoverアクション*/
/*に色ベタ。つまり四角く色がつく。いらないのでコメントアウト。*/
/*.ECM_CheckboxInput:hover{
background-color: #559eb61f !important;色ベタ
border:solid 1px #a2c4d0;枠線
}*/
/*.ECM_CheckboxInput:hover{
background-color: #559eb61f !important;色ベタ
border:solid 1px #a2c4d0;枠線
}*/

/*hoverでテキストの色を変える！*/
.ECM_CheckboxInput:hover{
    color: #8D2E4D;
    font-weight: bold;
}


/*1つの選択肢の全体を内包するの、直下の*/
/*hover時の変化*/
.ECM_CheckboxInput:hover > .ECM_CheckboxInput-DummyInput{
transform: scale(1.5);/*hoverで少し拡大。*/
}


/*focusはコメントアウトした。
理由：複数にチェックを入れた場合、最後のチェック入れたのが拡大サイズになりほかのは小さいサイズになるという状態になったから。チェック入れた全部を同じサイズにしたいのでコメントアウトに。*/
/*focus時の変化(hoverと同じの設定しとくかんじ)
.ECM_CheckboxInput-Input:focus + .ECM_CheckboxInput-DummyInput{
transform: scale(1.5);focusで少し拡大。
}*/

/*checkedの変化、兼、テキストの前の空*/
/*これがアイコンになる*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput {
background: #8D2E4D;/*チェック入れたあとのアイコンの色。*/
}

/*checkedの変化、兼、テキストの前の空*/
/*チェックの線を描画①*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::before {
    content: "";
    display: block;
    position: absolute;
    top: 15%;
    left: 60%;
    width: 25%;
    height: 2px;/*線の細さ*/
    border-radius: 2px;
	transform: translate(-6px, 5px) rotateZ(-135deg);/*位置はここで*/
    transform-origin: 2px 2px;
    background: #FFFFFF;
}

/*checkedの変化、兼、テキストの前の空*/
/*チェックの線を描画②*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::after {
    content: "";
    display: block;
    position: absolute;
    top: 25%;
    left: 78%;
    width: 60%;
    height: 2px;
    border-radius: 2px;
    transform: translate(-6px, 5px) rotateZ(-45deg);
    transform-origin: 2px 2px;
    background: #FFFFFF;
}

/*checkedの変化、兼、テキストの前の空*/
/*チェック前のアイコンの色。*/
/*デフォルト状態のアイコン。hoverもfocusもcheckedもない状態。*/
.ECM_CheckboxInput-DummyInput {
position: relative;/*まずこれを基点と設定しておく*/
top: 0;
left: 0;
display: block;
width: 20px;/*アイコンの丸(もしくは四角)の大きさ*/
height: 20px;/*アイコンの丸(もしくは四角)の大きさ*/
border: solid 2px transparent;
background-color:#c7c4b9;/*濃いめのベージュ*/
/*border-radius: 50%;チェックボックスのアイコンを丸に。四角がよければココ指定しない。*/
transition: all .15s linear;
}

/*チェックボックスの文字*/
.ECM_CheckboxInput-LabelText {
margin-left: 12px;
display: block;
font-size: 16px;
}






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

ラジオボタンのcssカスタマイズ

--------------------------------*/
/*ラジオボタンの一つの選択肢全てを内包する*/
.ECM_RadioInput {
padding: 12px 8px;
display: flex;
align-items: center;
cursor: pointer;
}



/*hoverでテキストの色を変える！*/
.ECM_RadioInput:hover{
color:#8D2E4D; 
}

.ECM_RadioInput-Input {
opacity: 0;
width: 0;/*打ち消し*/
margin: 0;
}

/*とテキストの間の=これがアイコン(hover)*/
.ECM_RadioInput:hover > .ECM_RadioInput-DummyInput{
transform: scale(1.5);/*拡大(ちょっと派手に大きくしとく)*/
}
/*とテキストの間の=これがアイコン(focus)*/
.ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
background: #FFFFFF;
}

/*チェック入れた時につく色*/
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
background-color: #8D2E4D;/*ブルー*/
}

/*ラジオボタンの中の白い丸*/
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;/*ラジオボタンの中の白い丸のサイズ*/
height: 12px;/*ラジオボタンの中の白い丸のサイズ*/
border-radius: 50%;
background: #FFFFFF;
}



/*checkedの変化、兼、テキストの前の空*/
/*チェック前のアイコンの色。*/
/*デフォルト状態のアイコン。hoverもfocusもcheckedもない状態。*/
.ECM_RadioInput-DummyInput {
position: relative;
top: 0;
left: 0;
display: block;
width: 23px;/*アイコンの丸(もしくは四角)の大きさ*/
height: 23px;/*アイコンの丸(もしくは四角)の大きさ*/
border-radius: 50%;/*ラジオボタンは丸がいいので丸に*/
background-color: #c7c4b9;/*濃いめのベージュ*/
transition: all .15s linear;
}

/*ラジオボタンのテキスト*/
.ECM_RadioInput-LabelText {
margin-left: 12px;
display: block;
font-size: 16px;
}



/*テキストエリアのプレースホルダーを整える。*/
textarea::placeholder {
  padding-top: 10px;/*上余白を整える*/
  font-size: 15px;
  letter-spacing: 2px;
  font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
}


dl.dl.form_inquiry .input_bg {
border: none;/*枠線を非表示*/
}

.form .dd_flex-input_bg{
border: none;/*枠線を非表示*/
}

/*直下の全て(見出しセル)のに背景色ベタをつける*/
.dl.form_inquiry > dt {
    background: #F5C701;
    color: #2a2a2a;
    font-weight: bold;
}

.dl.form_inquiry > dt.bg_2 {
background: #1fa84e;
    color: #fff;
    font-weight: bold;
}


#autozip{
	background-color:#FF2C2C!important;
	left: 787px!important;
        top: 1840.45px !important;

	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
	z-index: 0!important;
}

#zip_close{
	font-weight: bold!important;
}

#zip_close a{
	color: "#fff"!important;
}

#zip_close a{
	color: "#fff"!important;
}

header.header {
    margin-top: -72px;
}

.mw_wp_form input[type="file"] {
    width: 100%;
}


input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea {
    width: 100%;
}

input#zip{
	width: 100%;
}








/*===============================

パンくずリスト

================================

/*パンくずリスト全体を内包
.bredcrumb{
   /* width: 95%;/*コンテンツエリアに合わせて幅を指定
	margin: 0 auto;
    /*margin-top: 44px;
}

.bredcrumb .bredcrumb-container{
    display: flex;
    margin: 0 auto;
	/*font-size: 1.2em;
	font-weight: normal;

	width: 80%;
    max-width:980px;
}

/*アンカー設定
.bredcrumb .bredcrumb-container a{
	text-decoration: none;
	color: black;
}

/*ホバー設定
.bredcrumb .bredcrumb-container a:hover{
	opacity: 0.3;
}

/*矢印を描写
.bredcrumb .bredcrumb-container a::after{
    /*content: "\f0da";/*矢印(三角)
	content: "▶";
	/*font-family: "Font Awesome 5 Free";
    /*font-weight: 700;
    display: inline-block;
    padding: 0 7px;
    /*font-size: 150%;
	font-size: 14px;
    vertical-align: -3px;
    /*color: #333;黒色の三角に
	color: #272A37;
	transform: translate(3px, -3px);
}
	
/*現在のページのタイトルを出力　ページタイトルテキスト
.bredcrumb .bredcrumb_current-text{
	display: block;
	/*transform: translate(3px, 8px);
	transform: translate(3px, 1px);
    color: #232830;
}	*/



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

プライバシーポリシーの同意

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

input.privacypolicy{
	display: inline-block;
    appearance: checkbox;
    transform: scale(2.0);
    accent-color: #9C8754;
    margin-bottom: 37px;
	}

p.pp_check,p.pp_check_2{
	text-align: center;
    margin: 0 auto;
	margin-bottom: 10px;
	font-weight: bold;
}

p.pp_check_2{
	margin-bottom:0px;
}
.mwform-checkbox-field-text{
	font-weight: bold;
}


p.pp_check_2 a{
	text-decoration: underline;
	color: #1176d4;
}





section.form h2.one::before{
	content: "1";
    font-size: 20px;
    display: inline-block;
    background-color: #2a2a2a;
    padding: 1px 15px;
    margin-right: 10px;
    color: #fff;
    font-family: futura-pt-bold, sans-serif;
    margin-bottom: 13px;
}



section.form h2.two::before{
	content: "2";
    font-size: 20px;
    display: inline-block;
    background-color: #2a2a2a;
    padding: 1px 15px;
    margin-right: 10px;
    color: #fff;
    font-family: futura-pt-bold, sans-serif;
    margin-bottom: 13px;
}


section.form h2{
	font-size: 23px;
	font-weight: bold;
	letter-spacing: 1px;
}



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

確認・送信ボタン

-----------------*/
/*送信ボタン(全般)の位置*/
.form-under input[type="submit"] {
    color: #fff;
    display: block;
    background: #9C8754;
        border: none;
        margin: 0 auto;
        margin-top: 64px;
        margin-bottom:-40px;
        width: 345px;
        height: 55px;
        font-size: 16px;
        letter-spacing: 1px;
}
	

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

チェックボックスを内包する

-----------------*/
.form-under{
	display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 66px;
    position: relative;
}


	
/*送信ボタン「送信」の位置*/
.form-under input[type="submit"].kakunin{
	    margin-top: 57px;
	    border-radius: 5px;
}
	
/*送信ボタンのhoverアクション*/
.form-under input[type="submit"].kakunin:hover{
    background-color:#ffe29b24;
    border: 2px solid;
    color: #9C8754;
    transition: 0.1s;
    font-weight: bold;
}
	



/*送信ボタン「戻る」の位置*/
input[name="submitBack"]{
    margin: 0 auto;
    width: 345px;
    color: #9C8754;
    height: 55px;
    display: block;
    border: 2px solid #9C8754;
    background: transparent;
    font-size: 15px;
    letter-spacing: 2px;
    margin-top: 0;
    border-radius: 5px;
    font-weight: bold;
}



input[name="submitBack"]:hover {
	color: #fff;
    background: #9C8754;
    border: none;
}
	

.mw_wp_form .error {
    font-size: 1.2em;
    color: #9B0000;;
    display: block;
    margin-top: 0%;
    font-weight: bold;
}
	
.yohaku{
	display: block;
    margin-bottom: 104px;
}	
	
#mw_wp_form_mw-wp-form-40 input[type="text"] ,
#mw_wp_form_mw-wp-form-40 input[type="email"] {
    background-color: #f7f7f7;
    border: 1px solid hsla(0, 0%, 78%, .5);
    border-radius: 0;
    color: #333;
    padding: 1em .5em;
	font-size:clamp(0.813rem, 0.774rem + 0.08vw, 0.875rem);/*values(min:13px,max14px)viewport(min320px,max767px)*/
}























	
/*フォームすべてを内包する一番外側の*/
section.form{
padding-bottom: 35px;/*フォームの下に余白*/
width: 980px;/*幅内で折り返させるために設定*/
margin:0 auto;/*全てを内包するクラスを丸ごと中央寄せ*/
/*margin-top:-13%;フォームの位置を調整*/
margin-top: 1%;
}

.dl.form_inquiry{
display: flex;
flex-wrap: wrap;
padding-bottom: 35px;
}




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

フォームの枠線①

-----------------------------*/
/**/
.dl.form_inquiry {
border-top: 1px solid #AEAEAE;/*上部に線*/
}

.dl.form_inquiry > dd {
border-right: 1px solid #AEAEAE;/*右側に線*/
}



/*の中のへ横並びを設定*/
.form dl {
display: flex;
flex-wrap: wrap;/*幅内で折り返させる*/
padding-bottom: 35px;
}


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

フォームの枠線②

-----------------------------*/
/*「見出しテキスト」()と「必須」()を横並びに*/
.form dt {
display: flex;
align-items: center;/*「見出しテキスト」と「必須」がflexアイテムとなり、この2つともを縦方向中央に*/
justify-content: space-between;
width: 100%;
max-width: 30%;/*見出しセルの幅を絶対値で設定*/
padding: 40px 25px;/*見出しセルの上下左右に均等な余白を設定しておく*/
padding: 20px 25px;/*見出しセルの上下左右に均等な余白を設定しておく*/
border-bottom: 1px solid #fff;/*すべてに下線*/
border-left: 1px solid #fff;/*入力セルのすべてに左線*/
}


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

フォームの枠線③

-----------------------------*/
/*入力セルのすべてに均等な設定*/
.form dd {
position: relative;/*セレクトボックスにアイコンを設置するのでその際の基点として設定*/
width: 100%;
max-width:70%;
padding: 40px 25px;/*入力セルの上下左右に均等な余白を設定しておく*/
border-bottom: 1px solid #AEAEAE;/*入力セルのすべてに下線*/
border-right: 1px solid #AEAEAE;
}
	
	
.form dd:nth-of-type(1) {
   border-top: 1px solid #AEAEAE;
}



/*入力セル、の横に文字を入れる場合のみ、このクラスを設置：横並びに*/
.form .dd_flex{
display: flex;
}

/*入力セル、の横に文字を入れる場合のみ、このクラスを設置：横並びにしたテキスト側にをつけ.txt_subを設置(上記)。につけた幅680pxの内、タグ自体に付与した.input_bgに指定した幅387pxが入っている。そのあまりの余白に収まるように肉眼で見ながら幅を調整。*/
.txt_sub{
width: 35%;
margin-left: 2%;
color: #a58d61;
}

/*の中にMWで直に入れたクラス。の幅を設定*/
.form .dd_flex .input_bg{
max-width: 200px;/*自体の幅を統一して指定*/
width: 100%;
}

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

MWに自作追加クラス：

-----------------*/
/*MWでタブから入れる際に付与した自作classへ。タブから入れるすべてにこのclassを入れている。*/
.dl.form_inquiry .input_bg{
/*background:#EDEDED;すべての入力欄：色ベタつける。薄いグレー
height: 55px;すべての入力欄の高さを統一で指定
max-width: 670px;のMAX幅を統一して指定
width: 100%;
padding-left: 2%;/*プレースホルダーのテキストの左に余白
border:none;/*入力覧に枠線なしに*/
	
    background-color: #f7f7f7;
    border: 1px solid hsla(0, 0%, 78%, .5);
    border-radius: 0;
    color: #333;
    padding: .25em .5em;
	width: 100%;
}

/*の色ベタを設定*/
.form .dd_flex-input_bg{
    background: #EDEDED;/*薄いグレー*/
    height: 55px;/*の高さを設定*/
    max-width: 426px;/*のMAX幅を設定*/
    width: 100%;
    padding-left: 2%;
	border: none;
}



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

のクラス。この内、をすべてで内包している。(MWでタブからから入れるコードをで囲っている>)そのに：つまりの幅を指定！！

-----------------
.sec_name > span{
max-width: 240px;/*そのものではないので注意。
width: 100%;
}.input_bgをinput自体に付与してそれに幅を指定したので、input1を内包するへの幅指定は切る*/


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

MWに自作追加クラス：テキストエリア

-----------------*/
/*の中に直接付与したオリジナルクラスへ*/
.dl.form_inquiry .texrarea{
  height: 100%;/*テキストエリアの高さを個別指定*/
}

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

セレクトボックスを入れるだけに.pref_select_icon設置：疑似要素で、アイコンを描写

-----------------*/
/*前提：「.form dd」に対してrelativeを指定している
.pref_select_icon::after{
    content: '\f078';
	/*content: 'f0d7';
    position: absolute;
    top: 4px;
    right: 45px;
    font-family: 'FontAwesome';
    font-size: 1.6rem;
    color: #333;
    pointer-events: none;
    line-height: 130px;
}*/

/*セレクトボックスにデフォルトのアイコン消してる上で、三角を描写して表示*/
.pref_select_icon::after {
    /*content: '';
    position: absolute;
    top: 59px;
    right: 45px;
	/*
    width: 8px;
    height: 8px;
    border-top: 4px solid #2a424b;
    border-right: 4px solid #2a424b*
    transform: rotate(135deg);*/
	/*三角*/
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
	position: absolute;
    top: 47px;
    right: 45px;
    font-size: 1.8em;
    color: #6BB0C7;
    font-weight: 900;
    display: inline-block;
    transform: translateY(4px);
    margin-right: 2px;
    rotate: 2px;
    transform: rotate(91deg);
}


/*「必須」「任意」のの共通設定*/
.ico_or {
    display: inline-block;
    margin-left: 1em;
    padding: 3px 13px;
    font-size: 14px;
    border-radius: 3px;
    white-space: nowrap;
	color: white;
	background-color: #9B0000;
}
	


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

チェックボックスを内包する

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


.form-under input[type="checkbox"] {
display: inline-block;
  appearance: checkbox;  /*消えたチェックボックスを復元*/
  transform:scale(2.0);/*チェックボックスのサイズを大きく*/
  accent-color: ##8D2E4D;/*チェック後の色を、デフォルトの青色を任意の色へ*/
}

.checkbox-input-area{
    margin-top: -1.8%;
display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
	align-items: center;
	margin-top: 15px;
}

.checkbox-input-area input[type="checkbox"]:checked{
    background-color:#ff00f1; /*背景色ベタ(四角)*/
}

/*プライバシーポリシーへのリンク全てを内包(Font Awesomeとテキスト)*/
.privacy-link {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 300px;
	margin-bottom: 2%;
}

.privacy-policy-link-under{
display: block;
margin-bottom: 0.5%;
}


/*プライバシーポリシーへのリンク前にhtml側に設置したFont Awesome「▶」のスタイルを調整*/
.privacy-link .fa-caret-right {
    color: #87AC7E;
    display: block;
    position: absolute;
    top: -5px;
    left: 11px;
}


	
	
	
	
	
	
	
	
	
	
	
	
	

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

エラーテキスト

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

/*このフォーム全体の中のエラーテキスト*/
.dl.form_inquiry .error {
    font-size: 1.2em;
    color: #FF4444;
    display: block;
    margin-top: 1%;
	font-weight: bold;
}

/*プライバシーポリシー同意のチェックボックスを内包するの中のエラーテキスト*/
/*ちょっと目立ちにくいので目立たせる*/
.checkbox-input-area .error{
    font-size: 1.3em;
    color: #FF4444;
    display: block;
    margin-top: -4px;
    margin-left: 17px;
    font-weight: bold;
    letter-spacing: 1px;

}

.privacy-policy-link-under{
width: 100%;
margin: 0 auto;
text-align: center;
}

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

確認画面

-----------------*/
/*確認画面では、セレクトボックスのマークを非表示に*/
.mw_wp_form_confirm .pref_select_icon::after {
    display: none;
}
/*確認画面では、プライバシーポリシーへの同意のとこの「必須」の位置を調整*/
.mw_wp_form_confirm .ico_or {
    margin-top: 1.2%;
}


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

ラジオボタン

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

/*ラジオボタンを内包するのクラスに*/
/*選択肢(inputとラベルテキストの2つで1つ)自体を横並びに*/
.dl.form_inquiry .radio-area{
display: flex;
align-items: center;/*必須。内で縦方向中央に*/
}



/*inputが消えている場合*/
/*消えているラジオボタンのinputを復活させる*/
.dl.form_inquiry .radio-area input[type="radio"] {
    display: inline-block;/*inputとラベルテキストを横並びに。(translateYとして動かすにも必須。)*/
    appearance: checkbox;
    transform: scale(1.3,1.3);/*ラジオボタンのサイズを1.3倍に*/
    /*transform: translateY(3px);*/
}


/*inputが消えていない場合。上記で横並びにしているので今回は不要*/
/*選択肢の中身(ラジオボタンのinputとラベルテキスト)を横並びに*/
/*.mwform-radio-fieldは自動生成classd、.dl.form_inquiryは自作(のクラス)*/
/*.dl.form_inquiry .mwform-radio-field label{*/
/*display: flex;/*inline-blockでも可
}*/



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

お問い合わせ内容/チェックボックス

-----------------*/
/*inputとラベルテキストを横並びに*/
.sec_name .mwform-checkbox-field input[type="checkbox"] {
/*display: inline-block;*/
  /*appearance: checkbox;  消えたチェックボックスを復元*/
  transform:scale(1.5,1.5);/*チェックボックスのサイズを大きく*/
}
/*内の要素を横並びに。ここでalign-items: centerをさせれる
.sec_name{
display: flex;
align-items: center;
}*/


/*内の要素を横並びに。ここでalign-items: centerをさせれる*/
.align-items_center{
align-items: center;
/*display: flex;*/
}





/*=========================================

220812_チェックボックスのカスタマイズ

==========================================*/
/*.mwform-checkbox-field-text::before{
content: '\f00c';
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin-right: 0.5em;
    font-family: 'FontAwesome';
    font-size: 1.6rem;
    color: white;
    background: #cdcdcd;
}


.prt_checkbox input[type="checkbox"]:checked + .mwform-checkbox-field-text::before {
    color: #f9ff59;
    background: #68bf3d;
}
*/

	










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

弊社担当者からのご連絡方法/未入力エラーテキスト

-----------------*/
.radio-area .error{
    margin-left: 15px;
    margin-top: -2px;
} 


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

プライバシーポリシーはこちらのhover

-----------------*/
.privacy-link a:hover{
color:#87AC7E;
opacity: 1;
}



button, input, select, textarea {
    background-color: #f7f7f7;
    border: 1px solid hsla(0, 0%, 78%, .5);
    border-radius: 0;
    color: #333;
    padding: 1em .5em;
}


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

微調整

-----------------*/
section.form p.mt01{
	margin-top: 12px;
}


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

フォーム外の部分

-----------------*/
section.form h3{
	margin-top: 6px;
}

section.form p.annotation{
	margin-top: 6px;
}


/* =================================================================================
			 
             ◆スマホコーディング
             タブレット以下( 768px以下　)
　　　　　　　　※スマホとタブレット768pxまではスマホコーディング、769px以上のタブレットはPCコーディング

==================================================================================== */
@media only screen and (max-width: 768px){	
.pc{display: none;}
.sp{display: block;}
.pc-visible{visibility: hidden;}
	
	
/*----------------
width指定
-----------------*/
/*100%(フル幅)*/
.contents-wrapper{
/*wrapperの幅を100%に(これしてないと貫通むり)*/
	width:100%;
}
/*コンテンツエリア幅*/
.contents{
	width: 100%;
}	
		
	
/*------------------
  その他の全体共通設定
  ------------------*/			
section.form p{
	font-size:clamp(0.813rem, 0.774rem + 0.08vw, 0.875rem);/*values(min:13px,max14px)viewport(min320px,max767px)*/
	text-align: justify;
}	
	
section.form p.intro{
	/*font-size:clamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);values(min:18px,max20px)viewport(min320px,max767px)*/
	font-size: clamp(0.938rem, 0.893rem + 0.22vw, 1rem);
}
	
/*テキストエリアのプレースホルダー文字サイズだけ大きいので小さくする*/
textarea.texrarea::placeholder {
 font-size: clamp(0.813rem, 0.774rem + 0.08vw, 0.875rem);
	text-align: justify;
}
	
	
section.form p.intro {
    margin-bottom: 22px;
}
	
section.form p.annotation {
    margin-bottom: 22px;
    text-align: left;
}
	
input.privacypolicy {
    margin-bottom: 22px;
}
	
.form-under {
    margin-top: -20px;
}	
	
section.form {
    margin-top: 1%;
}
	
p.pp_check_2 {
    font-size: 14px;
}
	
#kasoupage-inquiry h2 {
    font-size: 20px;
    margin-bottom: 28%;
    margin-top: 5%;
    letter-spacing: 3px;
}
	
#kasoupage-inquiry {
	width: 95%;
    margin: 0 auto;
}	

	
/*(入力セル)内の要素をタテびに。*/
.sec_name{
  display: block;/*PC意外はタテ並び*/
}

/*「郵便番号」、入力セルに横並びさせる注意書き*/
.txt_sub{
margin-top: 2%;
display: block;
color: #a58d61;
}

/*(入力セル)内の要素をタテびに。*/
.sec_name{
  display: block;/*PC意外はタテ並び*/
}

/*「郵便番号」、入力セルに横並びさせる注意書き*/
.txt_sub{
margin-top: 2%;
display: block;
color: #a58d61;
}


/*送信ボタンの位置*/
    .form-under input[type="submit"] {
        width: 80%;
        /*color: #2a2a2a;
        height: 55px;
        display: block;
        background: #F5C701;
        border: none;
        border-radius: 9px;
        font-size: 15px;
        letter-spacing: 2px;
        margin: 0 auto;
        margin-top: -21px;
        margin-bottom: 26px;*/
    }
	
.form-under input[type="submit"].kakunin {
    margin-top: 56px;
}

	
	
/*===============================

パンくずリスト(静的設置)

================================*/
	
/*パンくずリスト全体を内包*/
.bredcrumb{
		width: 98%;
}
	
/*現在のページのタイトルを出力　ページタイトルテキスト*/
.bredcrumb .bredcrumb_current-text{
	padding-top: 0.5%;
}

/*矢印を描写*/
.bredcrumb .bredcrumb-container a::after{
    padding: 0 13px;
}
	
/*現在のページのタイトルを出力　ページタイトルテキスト*/
.bredcrumb .bredcrumb_current-text{
    display: block;
    transform: translate(-7px, -5px);
    font-size: 14px;
}	
	
.bredcrumb .bredcrumb-container a::after {
    padding: 0 10px;
    transform: translate(-3px, -2.5px);
}
	
	
	

.sp-header {
   /*margin-top: -44px;*/
}
.bredcrumb .bredcrumb-container {
    font-size: 12px;
}
.bredcrumb .bredcrumb-container li{
    /*margin-top: 30px;*/
}
	
#kasoupage-inquiry figure {
    width: 100%;
	margin: 0 auto;
        margin-bottom: -74px;
        margin-top: 30px;
}
	
.bredcrumb .bredcrumb-container {
    width: 95%;
}
	
.mw_wp_form .error {
    margin-top: -1%;
}
	

section.form h2::before{
	content: "1";
    font-size: 20px;
    display: inline-block;
    background-color: #2a2a2a;
    padding: 1px 15px;
    margin-right: 10px;
    color: #fff;
    font-family: futura-pt-bold, sans-serif;
    margin-bottom: 13px;
}

section.form h2{
	font-size: clamp(1.25rem, 1.205rem + 0.22vw, 1.313rem);/*values(min:14px,max16px)viewport(min320px,max768px)*/
}
	
	
/*送信ボタン「戻る」の位置*/
input[name="submitBack"]{
    margin: 0 auto;
    width: 80%;
    color: #7b7b7b;
    height: 55px;
    display: block;
    border: 1px solid #7b7b7b;
    background: transparent;
    font-size: 15px;
    letter-spacing: 2px;
    margin-top: 0;
    /*position: absolute;
    bottom: -105px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);*/
}
	
	
/*ラジオボタンの選択肢を縦に*/
.mwform-radio-field label {
    display: block;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/*フォームの上のテキストとイラストを内包*/
.contactform_wrapper ul {
    width: 100%;
    margin-top: -23%;/*位置調整*/
	align-items: center;/*テキストとイラストを縦方向中央に揃える*/
	text-justify: inter-ideograph;/*テキストの文末をきれいに揃える*/
}

/*フォームの上のイラストを内包*/
.contactform_wrapper ul img {
    width: 80%;/*PCは70%だけど。変更。*/
}




/*フォーム全体を内包する位置調整*/
section.form {
   width: 95%;
   margin: 0 auto;
   margin-top: -4px;
    padding-bottom: 25px;
}
	
	
	


/*三角
.privacy-link a::before{
font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-size:1.8em;
  color: #87AC7E;/*アイコンの色
  font-weight: 900;
  display: inline-block;
  transform: translateY(4px);
  margin-right: 2px;/*文字との隙間
}*/



/*text、email、tel、select、textareaのフォントサイズと入力欄の角の形を指定
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
font-size: 1.6rem;
border-radius: 0;
}*/






/*のクラスの、中のすべてに/とを縦並び*/
.form dl {
display: block;
padding-bottom: 20px;
}




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

の中のすべての(見出しセル)

-----------------*/
/*のクラスの、中のすべてに均等な設定/内の「見出しテキスト」と「必須」を横並びに*/
.form dt {
display: flex;
width: 100%;
max-width: 100%;
border: none;
align-items: center;
/*見出しセルはフル幅に貫通させる*/
/*    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);*/
justify-content: space-between;/*見出しテキストと必須を両端に配置*/
}



.form dd:nth-of-type(1) {
   border-top: none;
}



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

の中のすべての(入力セル)

-----------------*/
/*のクラスの、中のすべてに均等な設定*/
.form dd {
max-width:100%;
border: none;
padding: 20px 0%;
position: relative;/*セレクトボックスにアイコンを設置するのでその際の基点として設定*/
}







/* ----- form checkbox start ----- 
.prt_checkbox label {
display: block;
width: 100%;
}

.prt_checkbox label:not(:nth-of-type(-n+3)) { padding: 0; }
.prt_checkbox label:not(:last-child) { padding-bottom: 25px; }
/* ----- form checkbox end ----- 

/* ----- form radio start -----
.prt_radio label {
width: 100%;
}

.prt_radio label:not(:nth-child(3n)),
.prt_radio label:not(:nth-of-type(-n+3)) { padding: 0; }
.prt_radio label:not(:last-child) { padding-bottom: 2px; }
/* ----- form radio end ----- 

.ui-datepicker {
  font-size: 120%;
} */





/*送信ボタン*/
.btn_submit {
width: 96%;
}




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

自作

-----------------*/
/*MWでタブから入れる際に付与した自作classへ。タブから入れるすべてにこのclassを入れている。*/
.dl.form_inquiry .input_bg{
background: #F2F2F2;/*すべての入力欄：色ベタつける*/
height: 55px;/*すべての入力欄の高さを統一で指定*/
width: 100%;/*自体のをを統一して指定*/
padding-left: 2%;/*プレースホルダーのテキストの左に余白*/
}




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

セレクトボックス/アイコン

-----------------*/
.pref_select_icon::after {
content: '';
position: absolute;
top: 41px;
right: 30px;
width: 8px;
height: 8px;
border-top: 4px solid #2a424b;
border-right: 4px solid #2a424b;
transform: rotate(135deg);
}


.form .dd_flex-input_bg{
    background: #F2F2F2;
    height: 55px;
    width: 100%;
    padding-left: 2%;
}


.dl.form_inquiry .texrarea {
    height: 135px;
}

.privacy-policy-link-under{
width: 90%;
display: block;
margin: 0 auto;
text-align: center;
}

/*
.checkbox-input-area{
width: 100%;
margin: 0 auto;
text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
}*/


.checkbox-input-area{
width: 90%;
    margin: 0 auto;
    text-align: center;
    display: flex;
 justify-content: center; 
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}


.mw_wp_form .error{
font-size: 1.2em;
    color: #FF4444;
    display: block;
    margin-top: 1%;
	font-weight: bold;
}


.privacy-link {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 100%;
    margin-bottom: 2%;
    text-align: center;
	margin-top: -22px;
}

/*プライバシーポリシーへのリンク前にhtml側に設置したFont Awesome「▶」のスタイルを調整*/
.privacy-link .fa-caret-right {
color: #87AC7E;
    position: absolute;
    top: -5px;
    left: 52px;
}


.form-under input[type="checkbox"] {
	display: inline-block;
    appearance: checkbox;/*消えたチェックボックスを復元*/
	transform: scale(2.0);
    accent-color: #87AC7E;
}




/*
.sec_address .ttl_post_num {
display: block;
}

.pp_check {
max-width: 96%;
margin: 0 auto;
}

/* ===================================================================
nav_step
=================================================================== 
.nav_step {
font-size: 2.8vw;
}

.nav_step li:not(:first-child) {
padding-left: 30px;
}*/

/* ===================================================================
thanks_page
=================================================================== 
.thanks_page {
margin:0 10px 30px 10px;
padding: 25px 5px;
}

.thanks_page p {
font-size: 16px;
}

/* ----- form required number box start -----
.reqBox{
position:fixed;
top:inherit;
right:50%;
bottom: 0;
width: 300px;
margin: 0 -150px 10px 0; 
padding:5px 10px;
color: white;
text-align: center;
background-color: #262769;
border-radius: 5px;
z-index: 10;
}

.reqBox span {
  display:inline;
  margin-right: 5px;
}

.reqBox span:first-child {
  font-size: 12px;
}

.required_num{
font-size: 16px;
font-weight: bold;
} */

/*エラーテキスト*/
.dl.form_inquiry .error {
    font-size: 1.1em;
    color: #FF4444;
    display: block;
    margin-top: 1%;
	font-weight: bold;
}

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

確認画面

-----------------*/
/*確認画面では、セレクトボックスのマークを非表示に*/
.mw_wp_form_confirm .pref_select_icon::after {
    display: none;
}
/*確認画面では、プライバシーポリシーへの同意のとこの「必須」の位置を調整*/
.mw_wp_form_confirm .ico_or {
    margin-top:6%;
}


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

ラジオボタン

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



/*inputが消えている場合*/
/*消えているラジオボタンのinputを復活させる*/
.dl.form_inquiry .radio-area input[type="radio"] {
    display: inline-block;/*inputとラベルテキストを横並びに。(translateYとして動かすにも必須。)*/
    appearance: checkbox;
    transform: scale(1.3,1.3);/*ラジオボタンのサイズを1.3倍に*/
    /*transform: translateY(3px);*/
}


/*フォーム全体を上に
.form{
margin-top: -25%;
}*/


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

お問い合わせ内容/チェックボックス

-----------------*/
/*inputとラベルテキストを横並びに*/
.sec_name .mwform-checkbox-field input[type="checkbox"] {
/*display: inline-block;*/
  /*appearance: checkbox;  消えたチェックボックスを復元*/
  transform:scale(1.5,1.5);/*チェックボックスのサイズを大きく*/
}
/*内の要素を横並びに。ここでalign-items: centerをさせれる*/
.align-items_center{
align-items: center;
}
	
	
dd.sankaku ::after {
    transform: translate(-13px, -16px);
}
	
	
}
/* //スマホコーディング(ここまで) */
/* =================================================================================

              スマホだけ( 640px以下 )

==================================================================================== */
@media screen and (max-width:640px){
#company .pc{display: none;}
#company .sp{display: block;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
}/* //スマホだけ(ここまで) */
/* =================================================================================

【調整】
スマホと同じコードでいいけどスマホと同じにしては幅が広すぎることに伴って具合が悪い時
(スマホコーディングにしては幅が広いので370～400くらいの一般的なスマホより幅が広いので無理が出てくる領域)

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

pcコーディングでコンテンツエリア(1200px※コンテンツエリアのpx値)以下の幅のとき

※1200px以上の絶対値指定したものは1200px以下の数値か%の数値へ変更
※横並びでspace-betweenにしているものはこの区間では両端に寄るので、1200px以下～スマホまでの領域はcenterにした上でcolumugapで余白つけとくこと


==================================================================================== */
@media screen and (min-width:769px)and (max-width:1200px){	

	
	
/*送信ボタンの幅、位置、調整*/
.form-under input[type="submit"] {
    width: 50%;
    margin-top: -25px;
    margin-bottom: 33px;
}


/*フォームの上のテキストとイラストを内包*/
.contactform_wrapper ul {
	    margin-top: -9%;/*位置調整*/
}


/*フォーム全体を内包する位置調整*/
.form {
	width: 100%;
    margin-top: 0%;
}


/*のクラス*/
.dl.form_inquiry {
border-top: 1px solid #DCD2BF;/*上部に線*/
border-left:1px solid #DCD2BF;
}






/* ----- form error message start -----
.msg_required {
position: static;
left: auto;
max-width: 100%;
margin-top: 10px;
}

.sec_name .msg_required,
.sec_ruby .msg_required,
.sec_address .msg_required,
.sec_choice_info .msg_required {
max-width: 100%;
}*/

.form dl {
    display: flex;
	max-width: 100%;
    flex-wrap: wrap;
    padding-bottom: 35px;
	font-size: 1.2em;
}

.form dt {
justify-content: space-between;
padding: 20px 2%;/*内のものの上下左右に均等な余白を設定しておく*/
width: 100%;
}



.sec_name > span,
.sec_ruby > span {
display: block;
max-width: 100%;
}

.sec_name > span:last-child{
margin: 0;
margin-top: 10px;
}

/*
.form .sec_address,
.form .sec_choice_info {
display: block;
padding: 0;
margin: 0;
}

.form .sec_address dt,
.form .sec_address dd,
.form .sec_choice_info dt,
.form .sec_choice_info dd {
max-width: 100%;
width: 100%;
padding: 0;
}

.form .sec_address dt,
.form .sec_choice_info dt {
padding-bottom: 10px;
font-weight: bold;
}


.form .sec_address dd:not(:last-child),
.form .sec_choice_info dd:not(:last-child) {
padding-bottom: 20px;
}

.sec_address .ttl_build_name_num {
-webkit-box-direction: normal;/* Androidブラウザ用 
-webkit-flex-direction: row;/* safari PC 用 
flex-direction: row;
}

.sec_address .ttl_build_name_num .ico_or {
margin: 0;
font-weight: normal;
}*/




/*.form dd {
    position: relative;
    width: 100%;
   padding: 20px 2%;
    border-bottom: 1px solid #DCD2BF;
}*/

.dl.form_inquiry .input_bg {
    background: #F2F2F2;
    height: 55px;
    width: 100%;
    padding-left: 2%;
}




.form .dd_flex-input_bg{
    background: #F2F2F2;
    height: 55px;
    width: 100%;
    padding-left: 2%;
}




.pref_select_icon::after {
    content: '';
    position: absolute;
    top: 50px;
    right: 35px;
    width: 8px;
    height: 8px;
    border-top: 4px solid #2a424b;
    border-right: 4px solid #2a424b;
    transform: rotate(135deg);
}

.dl.form_inquiry .texrarea {
    height: 135px;
}


.form-under input[type="checkbox"] {
display: inline-block;
    appearance: checkbox;/*消えたチェックボックスを復元*/
}


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

チェックボックスを内包する

-----------------*/
.form-under{
display: block;
margin: 0 auto;
text-align: center;
margin-bottom: 3%;
}


.form-under input[type="checkbox"] {
display: inline-block;
  appearance: checkbox;  /*消えたチェックボックスを復元*/
  transform:scale(2.0);/*チェックボックスのサイズを大きく*/
  accent-color: #87AC7E;/*チェック後の色を、デフォルトの青色を任意の色へ*/
}

.checkbox-input-area{
    margin-top: -1.8%;
display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
	align-items: center;
}

.checkbox-input-area input[type="checkbox"]:checked{
    background-color:#ff00f1; /*背景色ベタ(四角)*/
}

/*プライバシーポリシーへのリンク全てを内包(Font Awesomeとテキスト)*/
.privacy-link {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 300px;
	margin-bottom: 2%;
}

.privacy-policy-link-under{
display: block;
margin-bottom: 0.5%;
}


/*プライバシーポリシーへのリンク前にhtml側に設置したFont Awesome「▶」のスタイルを調整*/
.privacy-link .fa-caret-right {
    color: #87AC7E;
    display: block;
    position: absolute;
    top: -5px;
    left: 11px;
}





.mw_wp_form .error{
font-size: 1.2em;
    color: #FF4444;
    display: block;
    margin-top: 1%;
	font-weight: bold;
}



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

お問い合わせ内容/チェックボックス

-----------------*/
/*inputとラベルテキストを横並びに*/
.sec_name .mwform-checkbox-field input[type="checkbox"] {
/*display: inline-block;*/
   /*appearance: checkbox;  /*消えたチェックボックスを復元*/
  transform:scale(1.5,1.5);/*チェックボックスのサイズを大きく*/
}



.dl.form_inquiry > dd {
    border-right: 1px solid #DCD2BF;
}



	
}
/* =================================================================================

【調整】
1200px以下のPCと同じコードでいいけど、1200px以下のPCと同じにしては幅が狭すぎることに伴って具合が悪い時

==================================================================================== */
@media screen and (min-width:769px)and (max-width:900px){
	


}

/* =================================================================================

デスクトップだけ(wide)

==================================================================================== */
@media screen and (min-width:1500px){


}