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

/*工事までの流れ*/
.flowWrap{
display: flex;
margin-bottom: 20px;
}

.flowLeft{
width: 100%;
max-width: 410px;
min-width: 410px;
}

.flowRight{
box-sizing: border-box; 
padding: 10px;
border-top: solid 1px #EEF0F0;
border-right: solid 1px #EEF0F0;
border-bottom: solid 1px #EEF0F0;
line-height: 1.75em;
}

/*会社概要*/
.campanyDescWrap{
display: flex;
flex-wrap: wrap;
}

.campanyDescWrap dt,
.campanyDescWrap dd{
padding: 10px;
width: 100%;
border-bottom: solid 1px #fff;
}

.campanyDescWrap dt{
max-width: calc(30% - 20px);
background-color: #eee;
}

.campanyDescWrap dd{
max-width: calc(70% - 20px);
}

/* 給湯器の交換 */
.koukanBorder{
box-sizing: border-box;
border: solid 1px #80092E;
padding: 0.5em;
margin-bottom: 20px;
text-align: center;
color: #80092E;
font-weight: bold;
}

/* コンロ比較 */
.gsSpec{
margin-bottom: 1em;
border-top: solid 1px #000;
border-left: solid 1px #000;
}

.gsSpec td{
padding: 0.2em;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
}

.gsSpec tr.sName td{
white-space: nowrap;
}

.conro{
background-color: #0B1694;
color: #fff;
}

.grill{
background-color: #FF0004;
color: #fff;
}

.gsOther{
background-color: #178824;
color: #fff;
}

.postLeft400{
min-width: 400px;
margin-right: 20px;
}

.postList li{
text-indent: -1em;
padding: 0 0 0 1em;
}

.postList li::before{
content:"●";
color: #E84830;
}

.indexArea{
box-sizing: border-box;
margin-bottom: 20px;
padding: 20px 20px 0 20px;
border: solid 2px #80092E;
}

/* 同時交換キャンペーン */
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  width: 100%;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 1px #80092e;
  box-sizing: border-box;
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -16px;
  border: 13px solid transparent;
  border-top: 13px solid #FFF;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #80092e;
  z-index: 1;
}

.balloon2 h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.gsCmapWrap{
display: flex;
justify-content: space-between;
}

.gscBox{
padding: 10px;
box-sizing: border-box;
border: solid 1px #80092e;
}

.inBox01{
display: flex;
margin: 0.5em 0;
align-items: center;
}

.inIcon01{
margin-right: 1em;
padding: 0.2em 1em;
color: #f00;
border: solid 1px #f00;
box-sizing: border-box;
}

.inPhoto{
margin: auto auto 0.5em;
text-align: center;
}

.kibouTxt{
margin: auto 0.5em;
text-align: center;
}

.inBox02{
display: flex;
justify-content: space-around;
}

.inIcon02{
padding: 0.5em;
width: 100%;
max-width: 170px;
background-color: #000;
color: #fff;
text-align: center;
}

.inIcon03{
padding: 0.5em;
width: 100%;
max-width: 170px;
background-color: #002769;
color: #fff;
text-align: center;
}

.inIcon04{
padding: 0.5em;
width: 100%;
max-width: 170px;
background-color: #5e5e5e;
color: #fff;
text-align: center;
}

.gsKomikomi{
margin: 1em auto 0;
text-align: center;
}

.campCursol{
margin: auto;
text-align: center;
}

.campKomikomi{
margin: auto;
text-align: center;
color: #f00;
font-family: 'M PLUS 1p', sans-serif;
font-weight: 800;
font-size: 3.2rem;
line-height: 1.5em;
}

.campBigTxt{
font-size: 4.8rem;
}

.campDesc{
display: block;
margin: auto;
padding: 1em;
text-align: center;
background-color: #80092e;
color: #fff;
font-size: 2.4rem;
}

.gsMenuList{
margin-bottom: 2em;
}

.gsMenuList li{
padding: 0.5em 0;
border-bottom: dotted 1px #666;
font-weight: bold;
}

.gsMenuList a{
color: #80092e;
}

.gsMenuList a:hover{
color: coral;
}

/* オプション工事 */
.optConstWrap,.optConstWrap02,.constWrapWrap{
margin-bottom: 20px;
display: flex;
}
.optConstWrap02{
justify-content: space-between;
}
.constWrapWrap{
max-width: 416px;
}
.constWrapWrap > p{
width: 50%;
}
.ocg{
box-sizing: border-box;
padding: 0.5em;
background-color: #f3f3f3;
font-size: 1.2rem;
line-height: 1.75em;
}
.oct01{
padding: 0.5em;
background-color: #3194B1;
color: #fff;
font-weight: bold;
text-align: center;
}
.oct02{
padding: 0.5em;
background-color: #FF8639;
color: #fff;
font-weight: bold;
text-align: center;
}

/* 問い合わせ */
.newEnqH3{
box-sizing: border-box;
padding: 0.5em;
background-color: #80092e;
color: #fff;
text-align: center;
font-size: large;
}

.newEnqOneColumn input[type=radio],
.newEnqOneColumn02 input[type=radio],
.newEnqRight input[type=radio]{
vertical-align:text-top;
}

.newEnqOneColumn,
.newEnqOneColumn02{
box-sizing: border-box;
margin-bottom: 40px;
padding: 20px 20px 0;
border: solid 1px #ccc;
}

.newEnqOneColumn span > span,
.newEnqOneColumn02 span > span{
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.newEnqOneColumn span > span > span{
display: flex;
width: 100%;
max-width: 144px;
border: solid 1px #ccc;
border-radius: 5px;
align-content: center;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}

.newEnqOneColumn02 span > span > span{
display: flex;
width: 100%;
max-width: 380px;
border: solid 1px #ccc;
border-radius: 5px;
align-content: center;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}

.newEnqOneColumn span > span > span label,
.newEnqOneColumn02 span > span > span label,
.radioGroup span > span > span label{
padding: 1em 0;
width: 100%;
text-align: center;
}

.newEnqWrap{
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
}

.kaisu{
padding: 1em 0;
border-top: solid 1px #ccc;
}

.newEnqLeft{
box-sizing: border-box;
padding: 10px;
width: 180px;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 1.4rem;
line-height: 1.5em;
}

.newEnqRight{
box-sizing: border-box;
padding: 10px;
width: calc(100% - 180px);
border-bottom: solid 1px #ccc;
font-size: 1.2rem;
line-height: 1.5em;
}

.enqWhOut{
display: flex;
justify-content: space-around;
}

.radioGroup span > span{
display: flex;
justify-content: space-around;
}

.radioGroup span > span > span{
box-sizing: border-box;
padding: 0.5em;
width: 152px;
justify-content: center;
}

.radioGroup .wpcf7-list-item{
margin: 0;
}

label:has(>input[type="radio"]:checked){
background: #038056;
color: #ffffff;
}

.radioGroup2 span > span{
display: flex;
justify-content: space-between;
}

.radioGroup2 span > span > span{
border: solid 1px #ccc;
border-radius: 5px;
width: 300px;
justify-content: center;
}

.radioGroup2 span > span > span label{
padding: 1em 0;
width: 100%;
text-align: center;
}

.enqPhotoSampleBtn{
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: solid 4px #ccc;
}

.enqPhotoSampleBtn a{
display: block;
box-sizing: border-box;
margin: 1em auto 0 auto;
padding: 0.5em;
width: 50%;
border: solid 1px #000;
border-radius: 20px;
text-align: center;
color: #80092e;
background-image: url("/wp-content/post-img/contact-form-img/right-cursol.png");
background-repeat: no-repeat;
background-position: 5% center;
}

.enqPhotoSampleBtn a:hover{
background-color: #80092e;
color: #fff;
}

input[type="file"] {
display:none; /* アップロードボタンのスタイルを無効にする */
}
.uploadfile01,.uploadfile02,.uploadfile03 {
box-sizing: border-box;
margin: 1em auto;
display: block;
width: 50%;
color: #fff; /* ラベルテキストの色を指定する */
background-color: #b50d42;/* ラベルの背景色を指定する */
background-image:url("/wp-content/post-img/contact-form-img/icon-camera.png");
background-repeat: no-repeat;
background-position: 5% center;
background-size: 10%;
padding: 10px; /* ラベルとテキスト間の余白を指定する */
border: double 4px #fff;/* ラベルのボーダーを指定する */
border-radius: 40px;
text-align:center;
}

.enqNotSale{
box-sizing: border-box;
margin-bottom: 1em;
padding: 1em;
background-color: #ededed;
}

.btnArea input{
box-sizing: border-box;
padding: 0.5em;
background-color: #038056;
background-image: url("/wp-content/post-img/contact-form-img/submit-cursol.png");
background-repeat: no-repeat;
background-position: left 50%;
color: #fff;
border-radius: 50000px;
border: none;
cursor: pointer;
}

.enqNewWrap{
display: flex;
flex-wrap: wrap;
}
.enqNewLeft,.enqNewRight{
box-sizing: border-box;
margin-bottom: 2em;
padding: 1em;
}
.enqNewLeft{
width: 40%;
border: solid 1px #999;
}
.enqNewRight{
width: 60%;
border-top: solid 1px #999;
border-bottom: solid 1px #999;
border-right: solid 1px #999;
}

.req{
margin-left: 1em;
padding: 0.2em 0.5em;
background-color: #f00;
color: #fff;
font-size: 1.2rem;
}

.geq{
margin-left: 1em;
padding: 0.2em 0.5em;
background-color: #6c6;
color: #fff;
font-size: 1.2rem;
}

.contactLink{
box-sizing: border-box;
margin: 1em auto;
text-align: center;
width: 80%;
}
.contactLink a{
box-sizing: border-box;
display: block;
padding: 0.5em;
width: 100%;
border: solid 1px #b50d42;
border-radius: 10px;
color: #b50d42;
font-weight: bold;
}
.contactLink a:hover{
color: #F24B7F;
border: solid 1px #F24B7F;
}

select.wpcf7-form-control.wpcf7-select{
font-size: large;
width: 100%;
height: 2em;
}

.gotoBtnArea{
margin-bottom: 20px;
padding: 0 1em;
text-align: center;
}

label:has(>input[type="radio"]:checked){
background: #038056;/* マウス選択時の背景色を指定する */
color: #ffffff; /* マウス選択時のフォント色を指定する */
}

.newEnqRight > span > span > span{
border: solid 1px #ccc;
border-radius: 5px;
justify-content: center;
padding: 1em 0;
margin-bottom: 1em;
}

.newEnqRight > span > span > span label{
padding: 1em;
}

@media screen and (max-width: 450px) { /* スマホ450以下 *************************************************************************************/

/*工事までの流れ*/
.flowWrap{
display: block;
}

.flowLeft{
max-width: 100%;
min-width: 100%;
}

.flowRight{
border-left: solid 1px #EEF0F0;
font-size: 1.4rem;
}

/* コンロチャート */
.rinSmtArea{
margin-bottom: 1em;
text-align: center;
}

.rinSmtChart{
margin: auto;
padding: 0;
border: none;
width: 100%;
max-width: 380px;
height: 380px;
}

.postLeft400{
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
min-width: auto;
}

/* 同時交換キャンペーン */
.gsCmapWrap{
flex-wrap: wrap;
}

.gscBox{
margin: auto auto 2em;
}

.gsMenuList li{
font-size: 1.2rem;
line-height: 1.5em;
}

/* オプション工事 */
.optConstWrap,.optConstWrap02{
display: block;
}
.constWrapWrap{
max-width: 100%;
}

/* 問い合わせ */
.enqWhOut > div{
padding: 0 3px;
}

.newEnqWrap{
margin-bottom: 40px;
display: block;
}

.newEnqLeft{
width: 100%;
background-color: #eee;
border: none;
font-size: 1.6rem;
font-weight: bold;
}

.newEnqRight{
width: 100%;
}

.enqNewWrap{
display: block;
}
.enqNewLeft,.enqNewRight{
width: 100%;
font-size: 1.2rem;
line-height: 1.75em;
}
.enqNewLeft{
margin-bottom: 0;
border-bottom: none;
}
.enqNewRight{
border-left: solid 1px #999;
}


}