@charset "UTF-8";

*{box-sizing: border-box;color:#333;}
img{max-width: 100%;vertical-align: middle;}
.border_area{/*コンテンツの境界*/
    height:100px;
    border:0;
}

.note{clear:both;}
h1,h2,h3,h4{color:#333;}

/* 作り方4コマ ------------------------------*/
.yonkoma {
padding: 0;
text-align: center;
}
.yonkoma h2 {
line-height: 180%;
color: #b00;
font-size: 3em;
font-weight: bold;
}
.yonkoma h2 strong {
font-size: 120%;
font-weight: bold;
border-bottom: 2px solid #b00;
}
/* 作り方4コマ ------------------------------*/

@media only screen and (max-width:899px) {
    .yonkoma h2{font-size: 1.5em;font-weight: bold;margin: 2em 0;}
}
/* ----------- 4コマ漫画 ----------- */

/* ----------- 使用事例 ----------- */
.instance{
    overflow: hidden;
}
.instance .instance_wrap{
    width: 100%;
    max-width: 1000px;
    margin:0 auto;
}
.instance_wrap h2{
    font-size:3rem;
    font-weight: bold;
    margin: 1em .5em;
    text-align: center;
    line-height: 180%;
}

.instance_wrap h2 strong{
    font-size:140%;
    font-weight:bold;
    border-bottom: 2px solid #b00;
}

.instance_wrap .instance_list{
    padding:0;
    margin:0;
    text-align:center;
}
.instance_wrap .instance_list li{
    display: inline-block;
    width: 25%;
    margin: 1em 3%;
    line-height:1em;
}
.instance_wrap .instance_list li strong{
    display: block;
    background:#b00;
    color:#fff;
    font-weight:bold
}
.instance_wrap .instance_list li span{
    font-size:.8rem;
    line-height:1em;
    display:none;
}

@media only screen and (max-width:899px) {
    .instance_wrap .instance_list li{width: 40%;}
    .instance_wrap h2{font-size:1.5rem;}
}
/* ----------- 使用事例 ----------- */

/* ----------- 次亜塩素酸って何？ ----------- */
.whas_hcio{
    width: 100%;
    max-width: 1000px;
    margin:0 auto;
    text-align: center;
}
.whas_hcio h3{margin: 1em 0;}

.whas_hcio .hcio_list{
    white-space: nowrap;
    margin: 1em;
}
.whas_hcio .hcio_list li{
    display: inline-block;
    max-width:30%;
    margin: 0 1%;
}
.whas_hcio .hcio_list_txt{
    margin: 1em;
    margin-bottom: 2em;
    font-size: 1.2rem;
}

.whas_hcio .hciowater_hciona li{
    display: inline-block;
    width: 50%;
    max-width: 500px;
}
/* ----------- 次亜塩素酸って何？ ----------- */

/* ----------- 背景 三角矢印 ----------- */
.bottom_arrow{
    background:#fff;
    overflow: hidden;
    position: relative;
    padding-bottom: 70px;
}
.bottom_arrow::before,
.bottom_arrow::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
}
.bottom_arrow::before{
    border-style: solid;
    border-width: 80px 0 0 50vw;
    border-color: transparent transparent transparent #f5f5f5;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.bottom_arrow::after{
    border-style: solid;
    border-width: 0 0 80px 50vw;
    border-color: transparent transparent #f5f5f5 transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
/* ----------- 背景 三角矢印 ----------- */

/* ----------- Wのチカラ ----------- */
.wpower{
    background:#f5f5f5;
    text-align: center;
    overflow: hidden;
}
.wpower .wpower_use{
    max-width:1000px;
    margin: 2em auto;
    text-align: center;
}
.wpower .wpower_use li{
    display: inline-block;
    max-width:28.5%;
    margin: 0 1%;
}
.wpower .wpower_use li:nth-child(2){
    max-width:33%;
}


/* ----------- Wのチカラ ----------- */


/* ----------- 消臭グラフ ----------- */
.deodorize{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 4em 0;
}
.deodorize .deodorize_txt{
    margin: 1em;
    margin-bottom: 2em;
    font-size: 1.2rem;
}
.deodorize h2{
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin:1rem;
    padding:0;
    line-height: 140%;
}

.deodorize .conditions{
    display: inline-block;
    width: 50%;
    text-align: center;
    vertical-align: top;
}
.deodorize .conditions .conditions_table{margin: 1em 2em;}
.deodorize .conditions .conditions_table caption{
    font-size:1.5rem;
    border-left: 1em solid #b00;
    line-height: 100%;
    font-weight: bold;
    margin: .5em 0;
}
.deodorize .conditions .conditions_table th,
.deodorize .conditions .conditions_table td{
    font-size: 1.3rem;
    border:1px solid #666;
    vertical-align: middle;
    text-align: center;
    padding: .5em 0; 
    line-height: 100%;
}
.deodorize .conditions .conditions_table th{
    padding: .5em;
    font-weight: bold;
    background: #eee;
}
.deodorize .conditions .conditions_table span{
    display: inline-block;
    margin: 0;
    font-size:65%;
}
.deodorize .conditions .note{text-align: right;padding:0 1em;}

@media only screen and (max-width:899px) {
    .deodorize .conditions{display: block;width: auto;padding: 1em;}
    .deodorize h2{font-size: 2rem;}
    .deodorize .conditions .conditions_table{width:80%;margin: 1em auto;}
    .deodorize .conditions .conditions_table caption{font-size:1rem;}
    .deodorize .conditions .conditions_table th,
    .deodorize .conditions .conditions_table td{font-size: 1rem;display: block;}
    .deodorize .conditions .conditions_table th{border-bottom:0;}
    .deodorize .conditions .note.sp_only{display: block;}
    .deodorize .conditions .conditions_table span{font-size:65%;}
}
/* ----------- 消臭グラフ ----------- */

/* ----------- 腐食テスト ----------- */
.damagetest{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2em 4em 2em;
    text-align: center;
}

.damagetest .damagetest_txt{
    margin: 1em;
    margin-bottom: 2em;
    font-size: 1.2rem;
}
.damagetest h2{
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin:1rem;
    padding:0;
    line-height: 140%;
}
.damagetest p.note{
    text-align:right;
    margin: .5em;
}
@media only screen and (max-width:899px) {
    .damagetest{display: block;width: auto;padding: 1em;}
    .damagetest h2{font-size: 2rem;}
}
/* ----------- 腐食テスト ----------- */


.jokin_shiken{
    text-align: center;
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
}
/* ----------- 類似品との比較 追加スタイル ----------- */
.hikaku{
    background:#f5f5f5;
}
.hikaku .hikaku_wrap{
    width:100%;
    max-width: 1000px;
    text-align:center;
    margin: 2em auto;
    padding: 2em 2em;
}
.hikaku .hikaku_wrap p{font-size:1.2rem;margin: 0 0 1em 0; padding:0;}

@media only screen and (max-width:899px) {
    #comparison #comparison_in{padding: 2rem;}
}



/* ----------- 類似品との比較 追加スタイル ----------- */


/* ----------- お客様の声 ----------- */
.voice_area{
    width: 100%;
    background: #f5f5f5;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 4em 2em;
}
    .voice_area h3{
        color: #333;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .voice_area h3 span{
        background:#f5f5f5;
        font-size: 1em;
        font-weight: bold;
        padding: 0 .5em;
    }
    .voice_area h3 br{display:none;}

    .voice_area h3::before{
        content:"";
        display: block;
        border-top: 2px dotted #b00;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        z-index: -1;
    }


    .voice_list{
        width: 90%;
        max-width: 1000px;
        background:#fff;
        border-radius: 2em;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
        margin: 4em auto;
        padding: 2em;
        overflow: hidden;
    }
        .voice_area .voice_photo{
            width:20%;
            float:left;
            margin: 1em;
            text-align: center;
        }
            .voice_area .voice_photo img{
                width:100%;
                border-radius: 1em;
            }
        .voice_area .voice_txt{
            width:100%;
            float:right;
        }
            .voice_list .voice_from{
                clear:both;
                background: #b00;
                color: #fff;
                font-size:1em;
                font-weight: bold;
                margin: 1em 0 0 0;
                padding: .3em 0em;
                border-radius: .3em;
            }
            .voice_list .voice_from span{
                display: inline-block;
                background: #fff;
                color:#333;
                margin: 0 .5em;
                padding: .2em 1em;
                line-height: 100%;
                border-radius: 1em;
            }
            .voice_list .voice_from br{display:none;}

            .voice_list h4{
                font-size:2em;
                font-weight: bold;
                line-height: 140%;
                color:#333;
                margin: .5em 0;
                border-bottom: 1px dotted #333;
            }

            .voice_list p{
                font-size: 1.4em;
                line-height: 180%;
            }
    .voice_list.even .voice_photo{float:right;}
    .voice_list.even .voice_txt{float:left;}

@media only screen and (max-width:899px) {
    .voice_area{padding: 2em 1em;margin:0 0 2em 0;}
    .voice_area h3{font-size: 1.5em;}
    .voice_area h3 br{display: block;}
    .voice_area .voice_photo{width:30%;float:right;margin: .5em;}
    .voice_area .voice_txt{width:100%;float:none;}
    .voice_list {width:auto;}
    .voice_list .voice_from{text-align: center;}
    .voice_list .voice_from span{display:inline-block;}
    .voice_list .voice_from br{display:block!important;}
    .voice_list{padding: 1em;border-radius: 1em;}
    .voice_list h4{font-size:1.2em;}
    .voice_list p{font-size: 1em;}
            .voice_list .voice_from br{display:none;}
}

/* ----------- お客様の声 ----------- */

/* ----------- よくある質問エリア ----------- */
.faq{
    background:#fff;
    margin: 0 0 5rem 0;
    padding: 5rem 0;
}
.faq .faq_wrap{
    background:#fff;
    border-radius: .5em;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
    padding:2em;}
.faq_wrap h2{
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin:1rem;
    padding:0;
    line-height: 140%;
}


.acMenu{
    border:1px solid #e4e4e4;
    border-radius: .5rem;
    margin:1em auto;
    margin-bottom: 2.5em;
    transition: .5s;
}
.acMenu dt{
    text-align:center;
    cursor:pointer;
    background:#e4e4e4;
    border-radius: .5rem;
    font-size: 2rem;
    font-weight: bold;
    padding:.3em;
    position: relative;
}
.acMenu dt::before {
    display: inline-block;
    content:"Q";
    width:1.5em;
    height:1.5em;
    padding: 0;
    margin: 0 .5em;
    color:#fff;
    background: #b00;
    line-height:1.5em;
    border-radius: 50%;
}
.acMenu dt::after {
  width:5em;
  content: '▼';
  color:#999;
  position: absolute;
  font-size:1rem;
  left:50%;
  z-index: 1;
  height: 1.5em;
  bottom:-1.5em;
  line-height:1em;
  margin-left:-2.5em;
  text-align:center;
  background:#e4e4e4;
  border-radius: 0 0 .5em .5em;
}
.acMenu dd{
    font-size: 1.5rem;
    padding: 2em 1em 1em 1em;
    position: relative;
    display: none;
}
.acMenu dd strong{
    font-size:1em;
    color: #b00;
    font-weight: bold;
    border-bottom: 1px solid #b00;
}

.acMenu dd::before {
    display: inline-block;
    content:"A";
    width:1.5em;
    height:1.5em;
    padding: 0;
    margin: 0 0 0 0;
    color:#fff;
    background: #ccc;
    line-height:1.5em;
    border-radius: 50%;
    text-align: center;
  }

  @media only screen and (max-width:899px) {
    .faq{ margin:0 0 2em 0;padding:0;}
    .faq .faq_wrap{padding: 2em;margin:0px;box-shadow: none}
    .faq_wrap h2{font-size: 1.5em;}
    .acMenu dt{font-size: 1rem; padding-left:2em;}
    .acMenu dt::before {position: absolute;left:0;top: 50%;margin-top: -.8em;}
    .acMenu dt::after {font-size:.5rem;}
    .acMenu dd{font-size: 1rem;}
}

/* ----------- よくある質問エリア ----------- */

/* ----------- 開発者 オー博士 ----------- */
.droh{
    background:#eee;
    margin: 0 0 5rem 0;
    padding: 5rem 0;
}
.droh .droh_wrap{
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* ----------- 開発者 オー博士 ----------- */

/* ----------- 購入ボタンエリア ----------- */
.order{
    font-size:1rem;
}
.order_wrap{
    width: 100%;
    max-width:1000px;
    margin: 0 auto;
}
.order_btn{
    width: 100%;
    max-width: 315px;
    background:#b00;
    text-align: center;
    font-size: 160%;
    font-weight: bold;
    margin: 1em auto;
    padding: .5em;
    border-radius: .2em;
}
.order_btn img{
    display: inline-block;
    height: 1.6em;
}
.order_ship{    
    text-align: center;
}
.order_ship span.underline{
    border-bottom: 1px solid #b00;
}
.order_ship strong{
    font-size: 140%;
    font-weight:bold;
    color:#b00;
}

.ordere_prodact{overflow: hidden;}
.ordere_prodact .prodact_point{
    text-align:center;
}
.ordere_prodact .prodact_point li{
    display:inline-block;
    width: 25%;
    margin: 1em;
}
.ordere_prodact .popularity_ptitle,
.ordere_prodact .popularity_oneset{
    text-align:center;
    margin: 0 0 1em 0;
}
.ordere_prodact .prodact_data{overflow: hidden;padding:1em;text-align:center;}
    .prodact_data .itemphoto{width:auto;}
    .prodact_data .prodact_price{margin:0;display: flex;border-bottom: 1px dotted #666;}
    .prodact_data .prodact_price li{padding: 1rem;border-right: 1px dotted #666;}
    .prodact_data .prodact_price li:last-child{border-right: 0px dotted #666;}
    .prodact_data .note{text-align: right;color:#999;}

.order_wrap p.kazu{font-size:2em;text-align:center; font-weight:bold;padding:1em 0;}

.order_wrap .campaign_35off{text-align: center;}
.order_wrap .campaign_35off .item35off{display: flex;justify-content: center;}
.order_wrap .campaign_35off .item35off img:last-child{order:-1;}
.order_wrap .campaign_35off .item35off_price li{display: inline-block;}
.order_wrap .campaign_35off .item35off_price li:first-child{border-right:1px dotted #999;}
.order_wrap .campaign_35off a{margin: 2em 0;}
.order_wrap .campaign_35off a:hover{opacity: .8;}
.order_wrap .campaign_35off a:hover img {opacity: 1;}

.order_wrap .teiki{background:#b00;padding:2em;}
.order_wrap .teiki h3{color:#fff;font-size:3em;font-weight:bold;text-align: center;margin-bottom:.5em;line-height:1em;}
.order_wrap .teiki .teiki_wrap{background:#fff;position: relative;text-align: center;padding:1em;}
.order_wrap .teiki .teiki_wrap .bottle_place{position: absolute;top:-2.5em;left:-2em;width:25%;}
.order_wrap .teiki .teiki_wrap .item_data3{display: flex; padding:1em;}
.order_wrap .teiki .teiki_wrap .item_data3 li{text-align: center;}
.order_wrap .teiki .teiki_wrap .item_data3 li:first-child{flex-basis:100%;}
.order_wrap .teiki .note{color:#fff;font-weight:bold;margin: .5em 0;}
.order_wrap .teiki a{margin-top:-2em;}
.order_wrap .teiki a:hover{opacity: .8;}
.order_wrap .teiki a:hover img {opacity: 1;}




@media only screen and (max-width:899px) {
    .order_wrap .campaign_35off .item35off{display: block;text-align: center;}
    .order_wrap .campaign_35off .item35off img:last-child{width:60%;}
    .order_wrap .campaign_35off img{display: inline;}
    .order_wrap .campaign_35off .item35off_price{width: 80%;margin:1em auto;}
    .order_wrap .campaign_35off .item35off_price li:first-child{border-right:0px;border-bottom:1px dotted #999;}
    .order_wrap .campaign_35off a{width: 85%;margin: 1em auto;}

    .order_wrap .teiki{padding:1em;}
    .order_wrap .teiki h3{font-size:5vw;}
    .order_wrap .teiki .teiki_wrap{background:#fff;position: relative;}
    .order_wrap .teiki .teiki_wrap .bottle_place{position: absolute;top:-1em;left:-1em;width:25%;}
    .order_wrap .teiki .teiki_wrap .item_data3{display: block; text-align:center;}
    .order_wrap .teiki .teiki_wrap .item_data3 li:first-child{display: none;}
    .order_wrap .teiki .teiki_wrap .item_data3 li:last-child img:first-child{display: inline;}
    .order_wrap .teiki .note{color:#fff;font-weight:bold;font-size:60%;}

    .order_wrap p.kazu{font-size:4vw;text-align:center; font-weight:bold;padding:1em 0;}
    .order_btn img{width:auto;height: 2em;margin: 0 .5em 0 0;vertical-align: top;}
    .order_ship span.underline{display: inline-block;}
    .ordere_prodact .prodact_point li{display:inline-block;width: 30%;margin: .5em 0; padding:0;}
    .ordere_prodact .popularity_ptitle{width: 70%;margin: 1em auto;}
    .prodact_data .itemphoto{float:none;width:80%;margin:0 auto;}
    .prodact_data .prodact_price{margin:0 auto;display: block;text-align: center;}
    .prodact_data .prodact_price li{padding: 1rem;border:0;border-bottom: 1px dotted #666;}

    .prodact_data .note{text-align: right;color:#999;font-size:.8rem;margin: 1em;}

}
/* ----------- 購入ボタンエリア ----------- */

/* ----------- 電話番号の案内 ----------- */

.tel_guide{
    width: 100%;
    max-width: 1000px;
    color:#555;
    margin:0 auto;
    padding: 2em;
    text-align: center;
}
.tel_guide p{
    text-align:center;
    font-size:1.5rem;
    font-weight: bold;
}

.tel_guide .contact_btn{
    display: inline-block;
    width: 35%;
    background:#999;
    white-space: nowrap;
    border-radius: 1em;
    margin: 1em auto;
    padding: .5em;
}
.tel_guide .contact_btn img{
    width: 2em;
    margin-right: .2em;
}

.tel_guide .note{
    width:100%;
    margin:0 auto;
    text-align:left;
}

@media only screen and (max-width:899px) {
    .tel_guide .contact_btn{width:70%;display: block;}
}
@media only screen and (min-width:899px) {/* PCのみ反映 */
    .tel_guide a[href^="tel:"] {
        pointer-events: none;
    }
}

/* ----------- 電話番号の案内 ----------- */

footer{margin-top:0;}
footer .about{margin-top:3em; text-align: center;}
footer .about li{display: inline-block;padding:0;}
footer .about li:first-child{border-right:1px solid #ccc;}
footer .about li a{color:#333;line-height:1em;padding:0 1em;}


/* 使わない */
/* ----------- ■コロナウィルス対策に！厚生労働省でも発表されています！追加スタイル ----------- */
.kousei_faq{
    max-width:1000px;
    margin: 5em auto;
    padding: 1em;
    border: 2px solid #ccc;
    border-radius: 1em;
    font-size: 1rem;
}
    .kousei_faq h2{
        font-size:2.5em;
        line-height: 140%;
        font-weight: bold;
        text-align:center;
        color: #ea5807;
        border-left: .5em solid #ea5807;
        border-right: .5em solid #ea5807;
        margin: 1em;
    }
    .kousei_faq dl{
        width: 90%;
        margin: 0 auto;
    }
        .kousei_faq dl dt{
            font-size: 2em;
            margin: 0 0 .5em 0;
        }
            .kousei_faq dl dt span{
                font-size:1.8rem;
                display: inline-block;
                background: #ea5807;
                color:#fff;
                margin: 0 0 .2em -1em;
                padding: .2em .5em;
                border-radius: 1em;
            }
        .kousei_faq dl dd{
            font-size: 1.5em;
            margin: 0;
            padding: 0;
        }
            .kousei_faq dl dd span{
                font-size:1.8rem;
                display: inline-block;
                background: #51a1ca;
                color:#fff;
                margin: 0 0 .2em -1em;
                padding: .2em .5em;
                border-radius: 1em;
            }
            .kousei_faq dl dd p{text-align:right;}

@media only screen and (max-width:899px) {
    .kousei_faq{margin:2em 1em;padding: .5em;padding-bottom: 2em;border-radius: 0;}
    .kousei_faq h2{font-size:1.5em;border-left: .2em solid #ea5807;border-right: .2em solid #ea5807;margin: 1em .5em;padding: 0 .5em;}
    .kousei_faq dl dt{font-size: 1.5em;}
    .kousei_faq dl dt span ,.kousei_faq dl dd span{margin: 0 0 .2em 0em;}
    .kousei_faq dl dd{font-size: 1.5em;}
}

/* ----------- ■コロナウィルス対策に！厚生労働省でも発表されています！追加スタイル ----------- */

/* ----------- 長期休暇の案内 ----------- */
.holiday{max-width: 800px; border:1px solid #999;margin:2em auto;padding:1em;border-radius: 1em;color: #666;}
.holiday dt{font-weight:bold;font-size:120%;border-bottom:1px dotted #999;margin:0 0 .5em 0;text-align: center;}
.holiday dt span{display: inline-block;}
.holiday dd{text-align:left;}
@media only screen and (max-width:899px) {.holiday{margin:2em 1em;}}
/* ----------- 長期休暇の案内 ----------- */

/* ----------- 購入案内 ----------- */
.guidance{padding:2em 1em;}
.guidance .wrap{
    width: 100%;
    max-width: 1000px;
    margin: 1em auto;
    padding: 1em;
    border:1px dotted #999;
    border-radius: 1em;
    background:#f5f5f5;
}
.guidance .wrap .guidance_list{
    line-height: 140%;
}
.guidance .wrap .guidance_list dt{
    font-size:1.4em;
    font-weight:bold;
}


/* ----------- 購入案内 ----------- */


img {
    max-width: 100%;
  }
  
  header {
    position: relative;
    height: 880px;
    overflow: hidden;
  }
  header .fvbg {
    max-width: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    transform: translate(-50%, 0);
  }
  header .mainvisual {
    width: 100%;
    max-width: 1000px;
    position: absolute;
    left: 50%;
    top: calc(50% + 45px);
    z-index: -1;
    transform: translate(-50%, -50%);
  }
  
  @media only screen and (max-width: 640px) {
    header {
      height: 440px;
    }
    header .fvbg {
      width: 1000px;
    }
    header .mainvisual {
      top: 50%;
    }
  }
  section {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1.5em;
  }
  
  .go_simulation {
    text-align: center;
  }
  
  .simulation {
    max-width: 800px;
    margin-top:30px;
    margin-bottom:30px;
    padding: 1em;
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  }

  .simulation p,
  .simulation span,
  .simulation strong,
  .simulation #form th,
  .simulation #form td {
    font-size:140%;
  }

  @media only screen and (max-width: 640px) {
    .simulation p,
    .simulation span,
    .simulation strong,
    .simulation #form th,
    .simulation #form td  {
      font-size:100%
    }
  }

  .simulation p {
    margin: 0;
    padding: 0.3em 0.3em 0;
    line-height: 300%;
  }
  .simulation #form #bottleVolume,
  .simulation #form #bottlePrice,
  .simulation #form #bottlesQuantity,
  .simulation #form #amountMonth,
  .simulation #form #offices {
    text-align: center;
    padding: 8px;
    background: #fff;
    border: double 5px #ddd;
    border-radius: 5px;
  }

  .simulation #form input[type=number] {
    -webkit-appearance: none;
            appearance: none;
    -moz-appearance: textfield;
    padding: 0 0.2em;
  }
  .simulation #form input[type=number]::-webkit-outer-spin-button,
  .simulation #form input[type=number]::-webkit-inner-spin-button {
    /*appearance: none;
    -webkit-appearance: none;*/
    margin: 0;
  }
  
  .simulation #form #mikataPrice,
  .simulation #form #costDownPercent {
    color: #b00;
    font-size: 2em;
  }
  .simulation #form .mikataset {
    border-bottom: 2px solid #b00;
  }
  .simulation #form .mikataset span {
    font-size: 140%;
  }
  .simulation #form #extraStock,
  .simulation #form #costUp {
    display: none;
  }
  
  @media only screen and (max-width: 640px) {
    .simulation #form #mikataPrice{
      font-size: 1.5em;
    }
    .simulation #form #costDownPercent {
      font-size: 4em;
    }

  }
/*
  .input-table {
    margin: 5px auto;
  }
  .input-table th,
  .input-table td {
    padding:10px
  }
  .input-table th {
    text-align: right;
    font-weight: bold;
  }
  .input-table td {
    text-align: center;
  }

  .input-table tr:first-child  th {
    text-align: center;
  }
  
  @media only screen and (max-width: 640px) {
    .input-table th,
    .input-table td {
      display: block;
      text-align: center;
      width: 100%;
    }
  }
  */

  .input-area {margin: 5px auto;}
  .input-area input,
  .input-area select{
    font-size: 120%;
    width: 5em;
  }
  .input-area input.w3em{
    width: 3em;
  }
  .input-area p{
    text-align: center;
    margin: 0 0 .5em;
  }
  .input-area p.lead{
    font-size: 140%;
    font-weight: bold;
    line-height: 1.4em;
  }
  .input-area p strong{
    font-size: 140%;
    font-weight: bold;
  }
  .input-area p span{
    display: inline-block;
  }
  
  .result-table {
    width: 80%;
    margin:20px auto 0 auto;
    table-layout: fixed;
  }
  .result-table td,
  .result-table th {
    text-align: center;
    vertical-align: middle;
    border:solid 1px #aaa;
    height: 2.5em;
  }  
  .result-table th {
    background: #f5f5f5;
  }
  .result-table th:empty{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #aaa 50%, #aaa calc(50% + 0.5px), transparent calc(50% + 1px));
  }
  .result-table tr:last-child td{
    height:4em;
  }

  @media only screen and (max-width: 640px) {
    .result-table {
      width:100%;
    }
    .result-table th{
      font-size:80% !important;
      line-height: 0;
    }
    .result-table tr:nth-child(3) th{
      padding-top:15px;
    }
    .result-table small{
      font-size:0.7em;
    }
  }

  .simulation-under-arrow{
    margin: 50px 0;
    width: 100%;
    text-align: center;
  }
  .simulation-under-arrow img{
    margin-left: auto;
    margin-right: auto;
  }

  @media only screen and (max-width: 640px) {
    .simulation #costDown p{
      margin-bottom:2em;
    }
  }


  .cost-down-text {
    max-width: 1000px;
    margin: 20px auto;
    padding: 5em;
    padding-bottom: 2em;
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 0 14px rgb(0 0 0 / 10%);
  }
  .cost-down-text p{
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
  }
  @media only screen and (max-width: 640px) {
    .cost-down-text {
      width: 90%;
      max-width: 800px;
      padding: 2em;
      font-size: 70%;
    }
  }
  
  #costUp {
    padding: 30px 50px;
  }


  @media only screen and (max-width: 640px) {
    .simulation {
      width: 90%;
      max-width: 800px;
      padding: 1em .5em;
      border-radius: 1em;
      background: #fff;
      box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
    }
    .simulation p {
      padding: 0.3em 0.3em 0;
      line-height: 200%;
    }
  }

  


/********************************************/
/************フローティングバナー**************/

.floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
      transition: all 0.3s ease 0s;
  }
  
  .banner {
    width: 100vw;
    height: 120px;
    padding: 8px;
    background: rgba(238,238,238,0.95);
    color: #fff;
    font-weight: bold;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
  }
  
  .copy {
    font-size: 28px;
    margin: 0 auto 20px;
    line-height: 1.6;
  }
  .cta {
    display: inline-block;
    width: 200px;
    background: linear-gradient(270deg, #F4A240 0%, #E3A608 100%);
    border-radius: 10px;
  }
  .cta p{
    font-size: 25px;
    font-weight: 900;
    text-align: center;
    margin: 23px auto;
  }
  
  @media screen and (max-width: 480px) {
    .cta {
      scale: 75%;
    }
  }
  
  .tel-on-banner {
    text-align: right;
    bottom: 20px;
    display: flex;
    float: left;
    align-items: center;
  }
  
  .tel-on-banner img.tel-icon{
    width: 30px;
  }
  
  .tel-on-banner p{
    float:right;
    line-height: 0.5;
    font-size: 150%;
    font-weight: bold;
  }
  
  @media screen and (max-width: 480px) {
    .tel-on-banner {
      position: static;
    }
    .tel-on-banner img.tel-icon{
      position: static;
    }
    .tel-on-banner p{
      line-height: 1;
      font-size: 100%;
    }
  }
  
  /********************************************/
  
  
  /********************************************/
  /**************** 課題提起 *****************/
  .problems{
    margin: 60px auto 20px auto;
    max-width:1000px
  }
  
  .problems h2{
    font-size: 3rem;
    font-weight: bold;
    margin: 1em 0.5em;
    text-align: center;
    line-height: 180%;
  }
  
  @media screen and (max-width: 480px) {
  
    .problems h2{
      font-size: 1.5rem;
      font-weight: bold;
      margin: 1em 0.5em;
      text-align: center;
      line-height: 180%;
    }
  
  }
  
  .problem-1{
    height: 323px;
    width: 400px;
    margin: 0 auto 0 0;
    padding: 115px 0;
    text-align: center;
    background: url(../img/fukidashi1.png) center bottom no-repeat;
    filter: drop-shadow(5px 11px 7px #aaa);
      transition: all 1.5s ease 0s;
  }
  .problem-1 p{
    text-align: center;
    font-weight: bold;
    font-size:26px;
  }
  
  @media screen and (max-width: 480px) {
  
    .problem-1{
      scale: 50%;
      margin-top: -80px;
      margin-left: -80px;
    }
  
  }
  
  .problem-2{
    height: 370px;
    width: 400px;
    margin: -200px 0 0 auto;
    padding: 135px 0;
    text-align: center;
    background: url(../img/fukidashi2.png) center bottom no-repeat;
    filter: drop-shadow(5px 11px 7px #aaa);
      transition: all 1.5s ease 0s;
  }
  .problem-2 p{
    text-align: center;
    font-weight: bold;
    font-size:26px;
  }
  @media screen and (max-width: 480px) {
  
    .problem-2{
      scale: 50%;
      margin-top: -150px;
      margin-right: -80px;
    }
  
  }
  
  .problem-3{
    height: 316px;
    width: 400px;
    margin: -100px auto 0 10%;
    padding: 105px 0;
    text-align: center;
    background: url(../img/fukidashi3.png) center bottom no-repeat;
    filter: drop-shadow(5px 11px 7px #aaa);
      transition: all 1.5s ease 0s;
  }
  .problem-3 p{
    text-align: center;
    font-weight: bold;
    font-size:26px;
  }
  @media screen and (max-width: 480px) {
  
    .problem-3{
      scale: 50%;
      margin-top: -150px;
      margin-left: -80px;
    }
  
  }
  
  /********************************************/
  
  
  /********************************************/
  /***********ミカタ特徴→課題解決訴求************/
  
  .solve-problems {
    max-width: 1000px;
    margin:20px auto;
  }
  
  .solve-problems h2{
    width: auto;
    font-size: 4.5rem;
    font-weight: bold;
    margin: 1em 2.5em;
    text-align: center;
    border-bottom: 2px solid #b00;
    line-height: 180%;
  }
  
  @media screen and (max-width: 480px) {
    .solve-problems h2{
      font-size:2rem;
    }
  }
  
  
  .solve-1 {
      transition: all 0.7s ease 0s;
  }
  .solve-2 {
      transition: all 0.7s ease 0s;
  }
  .solve-3 {
      transition: all 0.7s ease 0s;
  }
  
  /********************************************/
  

  /********************************************/
  /************お問い合わせフォーム*************/
  
  .inquiry-wapper {
    width: 100%;
  }
  
  .inqyiry-form {
    max-width: 800px;
    margin: 80px auto 0 auto;
    padding: 60px 40px 40px 40px;
    border: 1px solid #eee;
    /*border-radius:10px;*/
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form {
      margin-top: 40px;
      border:none;
      padding: 0;
    }
  }
  
  .inqyiry-form h2{  
    text-align: center;
    font-size: 20px;
    padding-bottom: 15px;
    background: #b00;
    margin-left: -40px;
    width: 800px;
    color: white;
    font-weight: 800;
    margin-top: -60px;
    padding-top: 20px;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form h2 {
      padding-left: 40px;
      width:auto;
    }
  }
  
  .inqyiry-form .item {
  
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  
  .inqyiry-form .item-label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .inqyiry-form .item-label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-label.isMsg {
      margin-top: 0;
    }
  }
  .inqyiry-form .item-label-required {
    border-radius: 6px;
    margin-left: 8px;
    margin-right: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #b00;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-label-required {
      border-radius: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .inqyiry-form .item-input {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  
  .inqyiry-form .item-radios {
    width: 70%;
    max-width: 410px;
    font-size: 18px;
    table-layout: fixed;
    margin-left: 40px;
  }
  
  .inqyiry-form .item-radios label {
    width: 50%;
    text-align: left;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-radios {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  
  .inqyiry-form .item-textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .item-textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .inqyiry-form .btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #b00;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    border:none;
  }
  @media screen and (max-width: 480px) {
    .inqyiry-form .btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }
  }
  
  .inqyiry-form .back-btn {
    background: #999;
  }
  
  .complete {
    padding:40px;
  }
  
  /********************************************/