@charset "utf-8";
/*==============================================
 #mail-wrap
================================================*/
#mail-wrap{  width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#mail-wrap article{ width: 100%; padding: 50px 2%; max-width: 800px; background: #fff; border-radius: 20px; display: flex; box-sizing: border-box;}
.wpcf7-not-valid-tip{ display: none !important;}
.fin-main { margin: 100px 0 !important;}
@media screen and (min-width: 801px) {
#mail-wrap article{ box-shadow: 0 4px 30px rgba(0,0,0,.1);}
}
@media screen and (max-width: 850px) {
#mail-wrap article{ margin-top: 50px;}
}
@media screen and (max-width: 700px) {
.fin-main { margin: 50px 0 100px !important;}
}

/*-------*/
#form #formTitle{}
#form #formTitle h1{ width: 100%; display: flex; justify-content: center; text-align: center;}
#form #formTitle h1 span{ display: block; position: relative; padding: 20px 0; font-size: 20px; font-weight: 500;}
#form #formTitle h1 span::before{ width: 0; height: 6px; content: ""; border-radius: 10px; background: #000; position: absolute; left: 50%; bottom: 0; transition: 1.4s;}
.opBody #form #formTitle h1 span::before{ width: 50%; left: 25%;}
#form #formTitle p{ display: flex; flex-direction:column; justify-content: center; align-items: center; margin: 20px 0 40px;}
#form #formTitle p span{ font-size: 16px; display: block; text-align: center;}
#form #formTitle p .info{ font-size: 12px; color: #555; margin-top: 4px;}
#form #formTitle p br.sp{ display: none;}
#form #formTitle ol{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 20px;}
#form #formTitle ol li{ height: 44px; font-size: 12px; display: flex; justify-content: center; align-items: center; flex-direction: row; padding: 0 20px; border-radius: 30px;}
#form #formTitle ol li span{ width: 18px; height: 18px; display: flex; flex-direction: row; justify-content: center; align-items: center; color: #555; border-radius: 100%;  font-size: 12px; border: solid 1px #555; margin-right: 10px; }
#form #formTitle ol li.now{ color:#fff; background:#BF4C4E; font-weight: bold;}
#form #formTitle ol li.now span{ background:#fff; color:#BF4C4E; border: solid 1px #fff;}
#form #formTitle ol li.on span{ background: #bbb; color: #fff; border: solid 1px #bbb;}
#form #formTitle ol li.on{ color: #bbb;}
@media screen and (max-width: 850px) {
#form #formTitle h1 span{ padding: 0 0 20px;}
#form #formTitle ol li { height: 36px; font-size: 2.0vw; letter-spacing: 0;}
}
@media screen and (max-width: 740px) {
#form #formTitle ol li { font-size: 2.5vw;}
}
@media screen and (max-width: 620px) {
#form #formTitle p span{ font-size: 3.4vw;}
#form #formTitle p br.sp{ display: block;}
#form #formTitle ol{ padding: 0px 0 0;}
#form #formTitle ol li { margin: 0px 5px; font-size: 2.3vw; letter-spacing: 0; background: #eee;}
}
/*==============================================
 form item
================================================*/
/*input入力系-------*/
input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="tel"], 
textarea{ width: 100%; font-size: 18px; line-height: 1.3em; vertical-align:middle; outline: none; background: #fff; -webkit-transition: all .3s; transition: all .3s; border-radius:2px; padding:6px; color: #000; border: solid 1px #bbb;}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
textarea:focus{ border:solid 1px #fb8281; box-shadow: 0 0 0 2px #fb8281;}

input[type="text"]::placeholder, 
input[type="email"]::placeholder, 
input[type="tel"]::placeholder, 
input[type="url"]::placeholder, 
input[type="password"]::placeholder, 
textarea::placeholder{ color: #aaa;}

input[type="submit"], 
input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="date"], 
select { appearance: none; -webkit-appearance: none;}
input[type="date"]{ min-height: 40px;}
/*input選択系-------*/
select, 
input[type="time"]{ padding: 5px 15px; margin: 5px; min-width: 50px; text-align: left; background: #fff;  border: solid 1px #bbb; border-radius:2px; font-size: 18px; transition: 0.3s;}
input[type="date"]{ border: solid 1px #bbb; padding: 8px; transition: 0.3s; font-size: 15px; background: #fff; border-radius: 2px;}
input[type="time"]{ transition: 0.3s;}

select:focus, 
input[type="time"]:focus, 
input[type="date"]:focus{ border:solid 1px #fb8281; box-shadow: 0 0 0 2px #fb8281;outline: none;}
/* --カレンダー-- */
.form-mini-font{ width: 100%; display: block; font-size: 13px; line-height: 1.4em; margin: 8px 0;}


/*--------------------------------------------
メールフォーム
※プラグイン contact form 7
----------------*/
.formMV{ height: 120px;}
.screen-reader-response{ display: none;}

/*--フォームリスト----*/
.wpcf7{ width: 100%; display: flex; flex-direction: column;}
.wpcf7 p{ width: 100%; padding: 14px 0;}

.wpcf7 p .div-label, 
.wpcf7 p label{ display: flex; flex-direction: row; align-items: center;}
.wpcf7 p label > span{ width: calc( 100% - 170px );}
.wpcf7 .flex-column{ width: calc( 100% - 170px ); display: flex; flex-direction: column;}

.wpcf7 .flex-row{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}
.wpcf7 .flex-row > label{ display: flex;}
.wpcf7 p .div-label > span.tit, 
.wpcf7 p label > span.tit{ font-size: 13px; font-weight: bold; width:170px; position: relative; padding-right: 45px;}
.wpcf7 p label > span input[type="text"]{ width: 100%;}
.wpcf7 select{ position: relative; cursor: pointer; z-index: 10;}
/*必須*/
.wpcf7 p .mast > span.tit::before, 
.wpcf7 div.add .tit::before, 
.wpcf7 .checkbox.mast p .tit::before{ width: 30px; content: "必須"; font-size: 12px; text-align: center; position: absolute; right: 5px; top: 50%; margin-top: -15px; color: #fff; background:#156E93; letter-spacing: 0; border-radius: 4px; font-weight: 500; padding: 5px;}
.wpcf7 p .mast > span.tit.tit.tit_before_top11::before{ margin-top: 11px !important;}

.wpcf7 p > label.checkbox.mast .tit::before{ width: 30px; content: "必須"; font-size: 12px; text-align: center; position: absolute; right: 5px; top: 50%; margin-top: -15px; color: #fff; background: #156E93; letter-spacing: 0; border-radius: 4px; font-weight: 500; padding: 5px 0;}

.wpcf7 p label.mast > span input[type="text"], 
.wpcf7 p label.mast > span input[type="date"], 
.wpcf7 p label.mast > span textarea, 
.wpcf7 div.add p .add.mast input[type="text"], 
.wpcf7 .mast select{ background:#E6EFF9; border: solid 1px #bbb;}
@media screen and (max-width: 750px) {
.wpcf7 .wpcf7-form > p > label{ display: block;}
.wpcf7 p .div-label, 
.wpcf7 p label{ display: block;}

.wpcf7 p label > span, 
.wpcf7 .flex-column, 
.wpcf7 p .div-label > span.tit, 
.wpcf7 p label > span.tit{ width:100%; padding: 0; display: block;}
.wpcf7 p .div-label > span.tit, 
.wpcf7 p label > span.tit{ margin-bottom: 8px;}
.wpcf7 p .mast > span.tit.tit.tit_before_top11::before{ margin-top: 0 !important;}
.wpcf7 p label.mast > span.tit::before, 
.wpcf7 div.add .tit::before, 
.wpcf7 p .mast > span.tit::before, 
.wpcf7 .checkbox.mast p .tit::before{ line-height: 1em; padding: 4px 6px; top: 0px; left: 0; right: auto; margin: 0 5px 0 0;}
.wpcf7 p .mast > span.tit.tit.tit_before_top11::before,
.wpcf7 p > label.checkbox.mast .tit::before{ line-height: 1em; padding: 4px 6px; top: 0px; left: 0; right: auto; margin: 0 5px 0 0;}
	
.wpcf7 p label.mast > span.tit, 
.wpcf7 div.add .tit, 
.wpcf7 p .div-label > span.tit, 
.wpcf7 .checkbox.mast p .tit{ padding-left:46px; }
.wpcf7 p > label.checkbox.mast p .tit{ padding-left:46px; }
}
/*住所*/
.wpcf7 div.add{ display: flex; flex-direction: row; align-items: flex-start;}
.wpcf7 div.add p:nth-child(2){ width: calc( 100% - 170px ); padding-left: 10px;}
.wpcf7 div.add p:nth-child(1){ width:170px;}
.wpcf7 div.add .tit{ font-size: 13px; font-weight: bold; position: relative; width: 100%; padding-right: 45px; margin-top: 15px; display: block;}
.wpcf7 div.add p .add{ display: flex; flex-direction: row; font-size: 13px; align-items: center; white-space: nowrap; margin-bottom: 10px;}
.wpcf7 div.add p br{ display: none;}
@media screen and (max-width: 750px) {
.wpcf7 div.add{ display: block; margin-bottom: 15px;}
.wpcf7 div.add .tit{ margin-bottom: 5px;}
.wpcf7 div.add p:nth-child(2), 
.wpcf7 div.add p:nth-child(1){ width:100%; padding: 0;}
}

/*ラジオボタン*/
.wpcf7 .radioBox p{display: flex; flex-direction: row; align-items: center; text-align: center;}
.wpcf7 .radioBox p .tit{ width:170px; font-size: 13px; font-weight: bold; position: relative; padding-right: 45px; display: block;}
.wpcf7 .radioBox p > span:nth-child(2){ width: calc( 100% - 170px ); padding-left: 10px; display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 .radioBox p > span:nth-child(2) > span{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 .radioBox p > span:nth-child(2) > span span{ display: block; margin:4px 14px 4px 0;}
.wpcf7 .radioBox p span label { white-space: nowrap; position: relative;cursor: pointer;}
.wpcf7 .radioBox p span label span{ font-size: 14px; padding: 2px 0;}
.wpcf7 .radioBox p span label:hover span{ opacity: 0.7;}
@media screen and (min-width: 751px) {
.wpcf7 .radioBox p span label input[type="radio"]{ width: 24px; height: 24px; margin: -5px 5px 0 0;}
}
@media screen and (max-width: 750px) {
.wpcf7 .radioBox p{display: block;}
.wpcf7 .radioBox p .tit, 
.wpcf7 .radioBox p > span:nth-child(2){ width: 100%; padding: 0;}
.wpcf7 .radioBox p .tit{ padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #ddd; text-align: left;}
.wpcf7 .radioBox p span label { display: flex; align-items:center;}
/*.wpcf7 .radioBox p span label input[type="radio"]{ transform: scale(2); margin:1px 12px 0 0; }*/
.wpcf7 .radioBox p span label input[type="radio"]{ width: 24px; height: 24px; margin:1px 12px 0 0; }
}
/*セレクト*//*日付*/
@media screen and (max-width: 750px) {
.wpcf7 p label .selectTit{ display: block; padding-bottom: 5px !important; margin-bottom: 10px !important; border-bottom: solid 1px #ddd; text-align: left;}
.wpcf7 p label select, 
.wpcf7 p label input[type="date"]{ width: 100%;}
}

/*チェックボックス*/
.wpcf7 .checkbox p{display: flex; flex-direction: row; align-items: center; text-align: center;}
.wpcf7 .checkbox p .tit{ width:170px; font-size: 13px; font-weight: bold; position: relative; padding-right: 45px; display: block; text-align: left;}
.wpcf7 .checkbox p > span:nth-child(2){ width: calc( 100% - 170px ); display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 .checkbox p > span:nth-child(2) > span{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 .checkbox p > span:nth-child(2) > span span{ display: block; margin:4px 14px 4px 0;}
.wpcf7 .checkbox p span label { white-space: nowrap; position: relative;cursor: pointer;}
.wpcf7 .checkbox p span label span{ font-size: 14px; padding: 2px 0;}
.wpcf7 .checkbox p span label:hover span{ opacity: 0.7;}
@media screen and (min-width: 751px) {
.wpcf7 .checkbox input[type="checkbox"]{ width: 20px; height: 20px; }
}
@media screen and (max-width: 750px) {
.wpcf7 .checkbox p{display: block;}
.wpcf7 .checkbox p .tit, 
.wpcf7 .checkbox p > span:nth-child(2){ width: 100%;}
.wpcf7 .checkbox p .tit{ padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #ddd; text-align: left;}
/*.wpcf7 .checkbox input[type="checkbox"]{ transform: scale(2); margin:1px 12px 0 0; }*/
.wpcf7 .checkbox input[type="checkbox"]{ width: 24px; height: 24px; margin:1px 12px 0 0; }
}

/*チェックボックス*/
.wpcf7 p > label.checkbox{display: flex; flex-direction: row; align-items: center; text-align: center;}
.wpcf7 p > label.checkbox .tit{ width:170px; font-size: 13px; font-weight: bold; position: relative; padding-right: 45px; display: block; text-align: left;}
.wpcf7 p > label.checkbox { accent-color: #e30b21;}
.wpcf7 p > label.checkbox > span:nth-child(2){ width: calc( 100% - 170px ); display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 p > label.checkbox > span:nth-child(2) > span{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
.wpcf7 p > label.checkbox > span:nth-child(2) > span span{ display: block; margin:4px 14px 4px 0;}
.wpcf7 p > label.checkbox span label { white-space: nowrap; position: relative;cursor: pointer;}
.wpcf7 p > label.checkbox span label span{ font-size: 14px; padding: 2px 0;}
.wpcf7 p > label.checkbox span label:hover span{ opacity: 0.7;}
@media screen and (min-width: 751px) {
.wpcf7 p > label.checkbox input[type="checkbox"]{ width: 26px; height: 26px; }
}
@media screen and (max-width: 750px) {
.wpcf7 p > label.checkbox{display: block;}
.wpcf7 p > label.checkbox .tit, 
.wpcf7 p > label.checkbox > span:nth-child(2){ width: 100%;}
.wpcf7 p > label.checkbox .tit{ padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #ddd; text-align: left;}
/*.wpcf7 .checkbox input[type="checkbox"]{ transform: scale(2); margin:1px 12px 0 0; }*/
.wpcf7 p > label.checkbox input[type="checkbox"]{ width: 24px; height: 24px; margin:1px 12px 0 0; }
}


/**/


/*プライバシーポリシー*/
.ppWrap{ display: flex; width: 100%; flex-direction: column; justify-content: center; padding:20px 10px; margin-top: 20px; border-top: solid 1px #ddd;}
.ppWrap > p, 
.ppWrap > p .ppBox{ display: flex !important; flex-direction: row; justify-content: center; align-items: center; font-size: 16px;}
.ppWrap > p .ppBox br{ display: none;}

.ppWrap > p .ppBox .ppmast{ width:40px; content: "必須"; font-size: 12px; text-align: center;  color: #fff; background:#156E93; letter-spacing: 0; border-radius: 4px; font-weight: normal; padding: 5px; margin-right: 5px;}
.ppWrap > p .ppBox .wpcf7-list-item-label{ }
.ppWrap > p.pp{ display: flex; flex-direction: row; justify-content: center; padding-top: 0;}
.ppWrap > p.pp a{ font-size: 16px; color: #1a73e8; text-decoration: underline; padding-right: 20px; position: relative;}
.ppWrap > p.pp a:hover{ color: #1a73e8; text-decoration: none;}
.ppWrap > p.pp a span{ width: 12px; height: 10px; position: absolute; right: 0; top: 50%; margin-top: -6px; content: ""; border: solid 1px #1a73e8;}
.ppWrap > p.pp a span::after{  width: 12px; height: 10px; position: absolute; right: 1px; top: 50%; margin: -3px 0 0 0; content: ""; border-bottom: solid 1px #1a73e8; border-left: solid 1px #1a73e8;}
/**/
.wpcf7 input[type="submit"]{ display: flex; justify-content: center; align-items: center; width: 80%; height: 60px; margin: 0 10% 20px; background:#DC3E41; border: none; color: #fff; border-radius: 4px; box-shadow: 0 8px 14px rgba(0,0,0,.2); transition: 0.4s; cursor: pointer; font-size: 20px;}
.confirmation .wpcf7 input[type="submit"]{ width: 50%; font-weight: bold;}
.confirmation .wpcf7 input[type="button"]{ width: 30%; height: 60px; display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; transition: 0.4s;}
.wpcf7 input[type="submit"]:hover{ background:#971C1E;  box-shadow: 0 0 0 rgba(0,0,0,.2);}
.wpcf7 input[type="button"]:hover{ background:#333; color: #fff; border: none;}

.wpcf7-not-valid-tip{ width: 100%; font-size: 12px; display: block; color: #E75254;}
@media screen and (max-width: 750px) {
.ppWrap > p .ppBox, 
.ppWrap > p .ppBox span, 
.ppWrap > p .ppBox span span span label{ width: auto; display: flex; flex-direction: row; justify-content: center;}
    
.ppWrap > p .ppBox, 
.ppWrap > p.pp a { font-size: 14px;}
.ppWrap > p .ppBox br{ display:block;}
.ppWrap > p .ppBox .wpcf7-list-item-label{ white-space: pre-wrap!important; text-align: left; word-break: break-all;}
.wpcf7 input[type="submit"]{ margin: 3%; width: 94%;}
}
/**/
.wpcf7 .wpcf7-response-output{ display: block; padding: 10px; border-radius: 4px; color: #E75254; border: solid 1px #E75254; text-align: center; font-size: 14px;}
@media screen and (max-width: 600px) {
.wpcf7 .wpcf7-response-output{ font-size: 12px;}
.ppWrap > p .ppBox span span span label span{ font-size: 3.0vw;}
.wpcf7 input[type="submit"]{ height: 100px;}


}

/*サンプル タイトル触れない*/
.wpcf7 p label.notext { display: none !important;}
.wpcf7 p label.notext > span{ pointer-events: none;}
.wpcf7 p label.notext > span input[type="text"]{ border: none;}



/*-- 確認画面 --------*/
.contact-table{ width: 100%; max-width: 800px; margin: 0 auto; border-collapse: collapse;border-spacing: 0; border-top: solid 1px #ddd;}
.contact-table tr{ width: 100%; border-bottom: solid 1px #ddd;}
.contact-table *{ text-align: left; padding: 8px 10px;  line-height: 1.2em;}
.contact-table tr{ width: 120%;}
.contact-table tr th{ width: 160px;}
.contact-table tr th *{ font-weight: bold; }
.contact-table tr td{ width: calc(100% - 160px);}
.contact-table tr td p{ color: #000;}
.confirmation .wpcf7-form > p br, 
.confirmation .config_btn br, 
.confirmation .wpcf7-response-output{ display: none !important;}
.confirmation .config_btn{ display: flex; flex-direction: row; justify-content:space-between; align-items: center; margin: 20px 0;}
.confirmation .wpcf7 input[type="submit"]{ margin: 0 0 0 5%; width: 70%; margin-top: 0px;}
.confirmation .wpcf7-previous{ width: 25%; font-size: 14px; cursor: pointer;}
.confirmation .wpcf7-spinner{ display: none !important;}
/*完了*/
.fin-tit{ display: flex; flex-direction: row; justify-content: center; padding-bottom: 20px; margin-bottom: 10px; text-align: center; font-weight: bold; font-size: 30px;}
.fin-tit span{ display: inline-block; margin: 0 auto; font-size: 20px; border-bottom: solid 4px #555;}
.fin-txt{ display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; line-height: 1.8em; padding: 15px;}
.fin-txt span{}
@media screen and (min-width: 701px){
a.fin_btn{ padding: 8px 20px; max-width: 500px; text-align: center; width: 60%; margin: 0 auto; background:#BF3D3F; border: solid 2px #BF3D3F; border-radius: 4px; color: #fff; font-size: 16px; display: block;}
a.fin_btn:hover{ color:#BF3D3F; background: #fff;}
}
@media screen and (max-width: 700px){
a.fin_btn{ width: 80%;text-align: center; font-weight: bold;display: inline-block; font-size: 14px; padding:14px 6px; background:#BF3D3F; color: #fff!important; border-radius: 4px;}
}
/**/
.font-btn-info{ width: 100%; display: flex; justify-content: center; font-size: 13px; margin: -10px 0 20px;}
@media screen and (max-width: 600px){
.font-btn-info{  font-size: 3.0vw; margin: -0 0 20px;}

}
/*===================
 Easy Table of Contents
=====================*/
#ez-toc-container{ padding: 20px !important; border-radius: 6px !important; border: solid 1px #d0d0d0 !important;}
#ez-toc-container ul{ display: block; width: 100% !important;}
#ez-toc-container ul li{ margin: 4px 0 !important;}
#ez-toc-container ul li *{ font-size: 13px; color: #777 !important;}
/**/