/* 共通 */

body{
    font-family: 'Noto Sans JP', sans-serif;
}
img{
    max-width: 100%;
}
a:hover{opacity: 0.8;
}
span.block{
    display: inline-block;
}
.for_sp{
    display: block;
}
.for_pc{
    display: none;
}
@media screen and (min-width: 600px){
    .for_sp{
        display: none;
    }
    .for_pc{
        display: block;
    }
}
/* スライダー */
.slide_area{
    position: relative;
}
.slide_area .slide_badges{
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90px;
}
.sliderWrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
}
.slick-slider{
    margin: 0;
}
.main_slider{
    width: 100%;
}
.main_slider.for_sp{
    display: block;
}
.main_slider.for_pc{
    display: none;
}
.main_slider .slick-slide{
    width: 100%;
    margin: 0;
}
.main_slider li{
    display: block!important;
    list-style: none;
    overflow: hidden;
    height: 472px;
}
.main_slider li img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* スライドフェードイン */
.fadein{
	opacity: 0;
}
.fadein.is-ready{
	transition: opacity 1s ease;
}
.fadein.is-show{
	opacity: 1;
}
@keyframes zoomIn{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.05);
    }
}

.main_slider .slick-slide img{
    transform: scale(1);
}
.main_slider .slick-active img{
    animation: zoomIn 6.5s linear forwards;
}
.main_slider .slick-slide:not(.slick-active) img{
  transform: scale(1.05); /* フェードアウト中も大きさ維持 */
}
@media screen and (min-width: 600px){
    .main_slider.for_sp{
        display: none;
    }
    .main_slider.for_pc{
        display: block;
    }
}
@media screen and (min-width: 960px){
    .slide_area{
        margin-bottom: -100px;
    }
    .slide_area .slide_badges{
        top: 30px;
        right: 30px;
        width: 146px;
    }
    .main_slider li{
        height: 800px;
    }
}

/* アッパーロゴエリア */
.upper_logo_area{
    display: block;
    background-color: #000;
    padding: 30px 0;
    text-align: center;
    pointer-events: none;
}
@media screen and (min-width: 960px){
    .upper_logo_area{
        display: none;
    }
}

/* ナビエリア */
.navi_area{
    position: sticky;
    top: 74px;
    width: 100%;
    min-height: 59px;
    background-color: rgba(252,252,252,0.0);
    z-index: 9;
    transition: 0.3s;
}
.navi_area .navi_container{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.navi_area .navi_button{
    position: relative;
    width: calc(50% - 1px);
    min-width: 0;
    height: 80px;
}
.navi_area .navi_button .navi_toggle{
    cursor: pointer;
    height: 100%;
}
.navi_area .navi_button .navi_toggle:hover{
    opacity: 0.8;
}
.navi_area .navi_button .navi_button_inner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 5%;
    margin: 0 auto;
    max-width: calc(190px + 10%);
    box-sizing: border-box;
}
.navi_area .navi_button .img_box{
    /* width: 30px; */
    line-height: 0;
    min-width: 10px;
}

.navi_area .vertical_line{
    width: 1px;
    min-width: 1px;
    height: 50px;
    background-color: #707070;
}

@media screen and (min-width: 600px){
    .navi_area{
        top: 110px;
    }
}
@media screen and (min-width: 600px){
    .navi_area .navi_button .navi_button_inner{
        /* max-width: calc(230px + 10%); */
        max-width: calc(250px + 10%);
    }
}
@media screen and (min-width: 960px){
    .navi_area{
        top: 100px;
        height: 100px;
    }
    .navi_area .navi_container{
        justify-content: right;
        margin-right: 18px;
    }
    .navi_area .navi_button{
        /* width: calc(50% - 100px); */
        width: calc(50% - 120px);
        max-width: 280px;
        height: 100px;
    }
    .navi_area .navi_button .navi_button_inner{
        padding: 20px 1%;
        margin: 0 5%;
    }
}

/* ロゴエリア */
.navi_area .logo_area{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;  /* デフォルトは幅0で見えない */
    height: 80px;
    padding: 0;
    background-color: #000;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.3s, opacity 0.2s;
    pointer-events: all;
}
.navi_area .logo_area img{
    width: 77%;
    max-width: 140px;
}
.navi_area .logo_area img.logo_small,
.navi_area .logo_area img.logo_big{
    display: none;
}
/* 追従用ナビ fix */
.navi_area.fix{
    background-color: rgba(252,252,252,0.9);
}
.navi_area.fix .logo_area{/* トップまでスクロールされるとfixが付与され見えるように */
    width: 80px;
}

@media screen and (min-width: 960px){
.navi_area .logo_area{
        position: absolute;
        top: -110px;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 210px;
        height: 210px;
        padding: 0;
        box-sizing: border-box;
        z-index: 11;
        pointer-events: auto;
    }
    .logo_area:hover{
        opacity: 0.8;
    }
    .navi_area .logo_area img{
        display: none; /* 小さいナビを隠す */
    }
    .navi_area .logo_area img.logo_big{
        display: block;
    }
    /* 追従用ナビ fix */
    .navi_area.fix .logo_area{
        top: 0;
        width: 240px;
        /* width: 210px; */
        height: 100px;
        margin-bottom: 0px;
    }
    .navi_area.fix .logo_area img.logo_big{
        display: none; /* 大きいナビを隠す */
    }
    .navi_area.fix .logo_area img.logo_small{
        display: block;
        margin: 0 auto;
        max-width: 120px;
    }
}


/* トップ */
.top_area{
    background-color: #F6F6F6;
}
.top_area .top_inner{
    width: 100%;
    margin: 0 auto;
    padding: 35px 20px;
    background-color: #FFF;
    box-sizing: border-box;
    border-top: 1px solid #707070;
}
.top_area .top_inner h1{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 2.0;
}
@media screen and (min-width: 960px){
    .top_area{
        padding-top: 0;
    }
    .top_area .top_inner{
        width: 100%;
        padding: 35px 20px;
        border-top: none;
    }
    .top_area .top_inner h1{
        font-size: 24px;
    }
}


/* ユーセージエリア */
.usage_area{
    /* padding: 0 0 15px; */
    padding: 0 0 35px;
}
.usage_area .usage_inner{
    width: 90%;
    max-width: 525px;
    margin: 0 auto;
}
.usage_area .usage_topic_title{
    width: fit-content;
    margin: 0 auto 35px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 2.5;
}
.usage_area .usage_topic_title span{
    background-color: #F6F6F6;
    padding: 5px 5px;
}
.usage_area .usage_container{
    display: flex;
    flex-direction: column;
    /* margin: 0 0 35px; */
    row-gap: 20px;
}
.usage_area .usage_box{
    text-align: center;
}
.usage_area .usage_box p{
    margin-top: 5px;
    font-size: 15px;
}


@media screen and (min-width: 960px){
    .usage_area{
        padding: 0 0 70px;
    }
    .usage_area .usage_inner{
        max-width: 1660px;
    }
    .usage_area .usage_topic_title{
        /* margin-bottom: 75px; */
        padding: 0 25px;
        font-size: 25px;
    }
    .usage_area .usage_container{
        flex-direction: row;
        align-items: start;
        column-gap: 20px;
        margin-bottom: 10px;
    }
    .usage_area .usage_box p{
        font-size: 16px;
    }
}

/* メイドインエリア */
.madein_area{
    /* padding: 25px 0; */
    padding: 0 0 35px;
}
.madein_area .madein_container{
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 525px;
    margin: 0 auto;
}
.madein_area .madein_container .txt_box{
    z-index: 1;
    box-sizing: border-box;
    margin: 0 0 30px;

}
.madein_area .madein_container .txt_box .japan_img{
    width: 146px;
    margin-bottom: 10px;
    border: 1px solid #DFE0E2;
}
.madein_area .madein_container .txt_box .madein_topic_title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.madein_area .madein_container .txt_box .madein_text{
    font-size: 16px;
    line-height: 1.5;
}
.madein_area .madein_container .img_box{
    line-height: 0;
    overflow: hidden;
}
@media screen and (min-width: 960px){
    .madein_area{
        padding: 0 0 70px;
    }
    .madein_area .madein_container{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 960px;
    }
    .madein_area .madein_container .txt_box{
        flex:1 1 480px;
        margin: 0;
        padding-right: 40px;
    }
    .madein_area .madein_container .txt_box .japan_img{
        margin-right: 30px;
    }
    .madein_area .madein_container .txt_box .madein_topic_title{
        font-size: 24px;
    }
    .madein_area .madein_container .txt_box .madein_text{
        line-height: 2.5;
    }
    .madein_area .madein_container .img_box{
        flex:1 1 50%;
        margin: 0;
        padding: 0;
        /* background: none; */
    }
}

/* ドアーエリア */
.door_area{
    padding: 0 0 35px;
}
.door_area .door_container{
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 525px;
    margin: 0 auto;
    row-gap: 25px;
}

.door_area .door_container .txt_box .door_topic_title{
    width: fit-content;
    margin: 0 auto 25px;
    padding: 0 10px;
    background-color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.door_area .door_container .txt_box{
    font-size: 16px;
    line-height: 2;
    box-sizing: border-box;
}
.door_area .door_container .txt_box li{
    margin-left: 30px;
}
.door_area .door_container .txt_box li span{
    color: #E6001B;
}
.door_area .door_container .img_box{
    max-width: 100%;
    height: auto;
    line-height: 0;
}

@media screen and (min-width: 960px){
    .door_area{
        padding: 0 0 70px;
    }
    .door_area .door_container{
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 960px;
        margin: 0 auto;
    }
    .door_area .door_container .txt_box{
        flex: 1 1 480px;
        padding-left: 40px;
    }
    .door_area .door_container .txt_box .door_topic_title{
        margin:0 0 25px;
        padding: 0;
        font-size: 24px;
        text-align: left;
        line-height: 2;
    }

    .door_area .door_container .img_box{
        flex: 1 1 50%;
    }
}
/* チョイスエリア */
.choice_area{
    padding: 35px 0 0;
    background-color: #F8F8F8;
}
.choice_area .choice_inner{
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}
.choice_area .choice_title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.choice_area .sub_title{
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
}
.choice_area .choice_box{
    padding: 35px;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #E6001B;
    border-radius: 5px;
}
.choice_area .choice_box.box_01{
    margin-bottom: 20px;
}
.choice_area .choice_box .choice_num{
    margin-bottom: 10px;
    font-family: 'Roboto', 'Arial', 'Noto Sans JP', sans-serif;;
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    color: #E6001B;
}
.choice_area .choice_box .choice_topic{
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 20px;
}
.choice_area .choice_box .choice_thumb{
    width: 340px;
}
.choice_area .choice_box .choice_text{
    margin-bottom: 15px;
}
.choice_area .choice_box .choice_container{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.choice_area .choice_box .choice_container .img_box{
    height: 141px;
}
.choice_area .choice_box .choice_container .vertical_line{
    width: 100%;
    height: 1px;
    background-color: #E6001B;
}
.choice_area .choice_box .link_btn{
    margin: 25px auto 5px;
}

.link_btn{
    display: block;
    width: 100%;
    max-width: 225px;
    margin: 25px auto 0;
    /* padding: 10px 4px 11px; */
    padding: 17px 4px 17px;
    box-sizing: border-box;
    line-height: 1;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    /* font-weight: bold; */
    background: #E6001B;
    color: #fff;
    border: 1px solid #E6001B;
}
.choice_area .patent_container{
    margin: 30px auto 0;
    padding: 8px 25px;
    box-sizing: border-box;
    border: 1px dashed #666;
    border-radius: 20px;
    max-width: 380px;
}
.choice_area .patent_container .txt_box{
    font-size: 16px;
}
.choice_area .link_btn.white_btn{
    max-width: 260px;
    margin-top: 35px;
    background: #fff;
    color: #E6001B;
}
@media screen and (min-width: 960px){
    .choice_area{
        padding: 70px 0 0;
    }
    .choice_area .choice_title{
        font-size: 24px;
    }
    .choice_area .sub_title{
        margin-bottom: 40px;
    }
    .choice_area .choice_box{
        padding: 35px;
    }
    .choice_area .choice_wrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        gap: 60px;
    }
    .choice_area .choice_wrapper .img_box{
        flex: 1 1 50%;
    }
    .choice_area .choice_wrapper .txt_box{
        flex: 1 1 50%;
        /* flex: 1 0 50%; */
    }
    .choice_area .choice_box .choice_container{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
    }
    .choice_area .choice_box .choice_container .choice_item_02, .choice_item_03{
        flex: 1 1 50%;
    }
    .choice_area .choice_box .choice_container .vertical_line{
        width: 1px;
        min-width: 1px;
        height: 453px;
    }
    .choice_area .patent_container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 8%;
        max-width: 760px;
        margin: 50px auto 0;
    }
}
/* ハウツーエリア */
.howto_area{
    text-align: center;
    background-color: #F8F8F8;
    padding: 35px 0 0;
}
.howto_area .howto_inner{
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  /* padding-top: 30px; */
}
.howto_area .howto_num{
    margin-bottom: 10px;
    font-family: 'Roboto', 'Arial', 'Noto Sans JP', sans-serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    color: #E6001B;
}
.howto_area .howto_title{
    margin-bottom: 25px;
    font-size: 30px;
    font-weight: bold;
}
.howto_area .sub_title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 35px;
}
.howto_area .sub_title span{
    line-height: normal;
}
.circle{
    width: 200px;
    height: 200px;
    margin: 10px auto 20px;
}
.circle{
    width: 206px;
}
.pacage_container{
    display: flex;
    flex-direction: column;
    gap: 2px;

}
.pacage_container .pacage_box{
    width: 100%;
    padding: 35px 0 40px;
    background-color: #FFFFFF;
}
.pacage_container .pacage_box .pacage_topic{
    font-size: 16px;
    font-weight: bold;
    background-color: #333333;
    color: #FFFFFF;
    width: fit-content;
    padding: 0 15px;
    margin: 0 auto 15px
}
.pacage_container .pacage_box .pacage_title{
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: bold;
}
.pacage_container .pacage_box .pacage_text{
    font-size: 16px;
    width: 90%;
    margin: 0 auto 15px;
}
.pacage_container .pacage_box .detail_title{
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #888888;
    background-color: #333333;
    color: #FFFFFF;
}
.pacage_container .pacage_img{
    display: block;
}
.pacage_container .img_wrapper{
    /* height: 290px; */
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pacage_container .img_wrapper .overlay_img{
    position: absolute;
    top: 20px;
    left: 0;
    width: 30px;
}
.pacage_container .detail_img{
    width: 90%;
    max-width: 237px;
    margin: 30px 0 30px 30px;
    /* margin: 50px 30px; */
}
.pacage_container .detail_img.slim{
    /* max-width: 297px */
}
.pacage_container .pacage_box .table_wrapper{
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}
.pacage_container .pacage_box .detail_table{
    display: table;
    width: 100%;
    /* min-width: 350px; */
    line-height: 1.2;
    table-layout: fixed;
    font-size: 16px;
}
.detail_table tbody th{
    background: #F5F5F5;
    font-weight: 500;
    vertical-align: middle;
}
.detail_table th,
.detail_table tbody td{
    vertical-align: top;
    padding: 10px 12px;
    border: 1px solid #888888;
    text-align: left;
    box-sizing: border-box;

}
.detail_table th:first-child{
	width: 26%;
    min-width: 80px;
}
.detail_table th:nth-child(n+2),
.detail_table td:nth-child(n+2){
	width: auto;
}
.detail_table tbody td{
    background: #FFF;
}

@media screen and (min-width: 960px){
    .howto_area{
        padding: 70px 0 0;
    }
    .pacage_container .img_wrapper{
        height: 440px;
        max-width: none;
    }
    .pacage_container .img_wrapper .overlay_img{
        top: 20px;
        left: 20px;
        width: 35px;
    }
    .pacage_container{
        flex-direction: row;
    }
    .pacage_container .pacage_box{
        width: 50%;
    }
    .pacage_container .detail_img{
        max-width: 354px;
    }
    .pacage_container .detail_img.slim{
        max-width: 297px
    }
}

/* ステップタイトル */
.custom_inner{
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 30px;
    }
.step_box{
    margin: 5px 0;
    padding: 30px 0;
    background-color: #FFF;
}
.step_box .step_box_inner{
    width: 90%;
    margin: 0 auto;
}
.step_container{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.step_container .num_box{
    margin-bottom: 10px;
        text-align: left;
}
.step_container .num_box .step_num{
    padding: 10px 20px 10px 0;
    font-size: 32px;
    font-weight: bold;
    color: #999;
    font-family: 'Roboto', 'Arial', 'Noto Sans JP', sans-serif;
}
.step_container .num_box .step_num span{
    color: #E6001B;
    display: inline-block;
}
.step_container .txt_box{
    flex: 1 1 70%;
    /* padding-left: 20px; */
    text-align: left;
}
.step_container .txt_box .step_title{
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 10px;
}
.step_container .txt_box .subtitle{
    font-size: 16px;
}
.step01_link{
    display: inline-block;
    text-decoration: none;
    color: #E6001B;
    position: relative;
    margin-top: 4px;
    padding-left: 15px;
}
.step01_link::before{
    content: "≫";
    position: absolute;
    left: 0;
    color: #E6001B;
}
/* ===== PC表示 ===== */
@media screen and (min-width: 690px){
    .step_box{
        padding: 40px 0;
    }
    .step_container{
        flex-direction: row;
        justify-content: left;
    }
    .step_container .num_box{
        flex: 0 0 105px;
        border-right: 1px solid gray;
        height: 70px;
        /* min-height: 120px; */
        margin-bottom: 0;
    }
    .step_container .num_box .step_num{
        font-size: 36px;
    }
    .step_container .txt_box{
    flex: 1 1 70%;
    padding-left: 20px;
}
}

/* コンテナ */
.custom_container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-items: start; */
  align-items: center;
  max-width: 760px;
  margin: 10px auto 25px;
  gap: 7px;
}
.custom_container .custom_box{
  flex: 0 1 47%;
}
.custom_container.three .custom_box{
  flex: 0 1 32%;
}
.custom_container.three .custom_box .img_cage{
  width:88%;
}
.custom_container.three .custom_box .img_door{
  width:60%;
}
.custom_container.three .custom_box .img_blind{
    width:68%;
}
.custom_container.three .custom_box .custom_topic{
    font-size: 13px;
}
.custom_container .custom_box .img_box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom_container .custom_box .img_stand{
    width: 211px;
}
.custom_container .custom_box .img_slim,
.custom_container .custom_box .img_expan{
    width: 192px;
}


/* テキスト用container */
.custom_container.text{
    align-items: stretch;
    margin-bottom: 0;
}
.custom_container.text .custom_box{
    flex: 0 1 48%;
}

.custom_container .custom_box .custom_thumb{
    border: 1px solid #333;
    text-align: center;
    max-width: 157px;
    margin: 0 auto;
    padding: 3px 0;
}
/* .custom_container .custom_text_wrapper{ */
.custom_container.text .custom_box{
    padding: 10px 5px 10px 5px;
    background-color: #F8F8F8;
    text-align: left;
}
.custom_container .custom_box .custom_topic{
    font-size: 14px;
    font-weight: bold;
    position: relative;
    padding-left: 12px;
}
.custom_container .custom_box .custom_topic::before{
    content: "・";
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.8em;
}
.custom_container .custom_box .custom_text{
    padding-left: 12px;
    font-size: 12px;
    line-height: 1.6;
}
/* マーク */
.custom_container .mark_box{
  flex: 0 1 9%;
  /* margin-bottom: 10px; */
  /* margin-top: 80px; */
}
.custom_container .mark_box .mark_text{
  font-size: 25px;
  font-weight: bold;
  text-align: center ;
}

/* コネクト用container */
.custom_container.connect_container{
    row-gap: 20px;
    column-gap: 5%;
    flex-wrap: wrap;
    align-items: start;
}
.custom_container .connect_box{
    max-width: 360px;
    margin: 0 auto;
}
.custom_container .connect_box .add_text{
    text-align: right;
    width: fit-content;
    margin-left: auto;
}
.img_connect{
    width: 90%;
    max-width: 660px;
    margin: 0 auto;
}
.step_box .table_wrapper{
    /* width: 90%; */
    margin: 0 auto;
    max-width: 892px;
}
/* コンプリート */
.img_comp{
    width: 90%;
    max-width: 610px;
    margin: 0 auto;
    display: block
}
.step_box.comp{
    padding-bottom: 0;
}


.schedule-table{
    border-collapse: collapse;
    width: 100%;
    margin-top: 30px;
}
.step_box .table_text{
    position: relative;
    margin-top: 5px;
    width: fit-content;
    padding-left: 12px;
    color: #E6001B;
    text-align: left;
}
.step_box .table_text::before{
    content: "※";
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.8em;
}


@media screen and (min-width: 960px){
    /* .custom_container .custom_text_wrapper{ */
        .custom_container.text .custom_box{
        padding: 20px;
    }
    .custom_container .mark_box{
        flex: 0 1 6%;   
    }
    .custom_container .mark_box .mark_text{
        font-size: 40px;
    }
    .custom_container .custom_box .custom_topic{
        font-size: 16px;
    }
    .custom_container .custom_box .custom_text{
        font-size: 14px;
    }
    .custom_container.connect_container{
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .custom_container .connect_box{
        width: 50%;
    }
}

/* ボタンエリア */
.btn_container{
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    /* column-gap: 30px; */
    column-gap: 10px;
    row-gap: 20px;
}
.btn_container .btn{
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    background-color: #E6001B;
    color: #fff;
    text-align: center;
    width: 90%;
    box-sizing: border-box;
    max-width: 152px;
    padding: 13px 12px;
    font-size: 13px;
    border-radius: 20px;
}

.btn_area{
    background-color: #000;
    padding: 30px 0 40px;
}
.btn_inner{
    width: 95%;
    margin: 0 auto;
}
.btn_area .logo_img{
    margin: 0 auto 20px;
    display: block;
    max-width: 160px;
}

.btn_area .btn_text{
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 25px;
}
.hotline_text{
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}
.hotline_text a{
  color: #FFF;
  text-decoration: underline;
  padding-left: 5px;
}
.hotline_text a img{
    vertical-align: middle;
    width: 12px;
    max-height: 18px;
    margin-left: 6px;
}
@media screen and (min-width: 960px){
    .btn_container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        column-gap: 30px;
    }
    .btn_container .btn{
        width: 40%;
        max-width: 226px;
        padding: 18px 24px;
        border-radius: 25px;
        font-size: 14px;
    }

}
/* 拡張パーツ */
.expan_area{
    padding: 50px 0;
    background-color: #F8F8F8;
}
.expan_title{
    text-align: center;
    margin-bottom: 35px;
    font-size: 30px;
    font-weight: bold;
}
.expan_inner{
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  background: #FFF;
  padding: 50px 0;
  /* padding-top: 30px; */
}
.expan_container{
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: 10px auto;
  row-gap:  30px;
  column-gap: 5%;
  flex-wrap: wrap;

}
.expan_container .expan_box{
  /* border-right: 1px solid #aaa; */
  text-align: center;

}
.expan_container .expan_box.cage{
    /* flex: 0 1 600px; */
    flex: 0 0 600px;
}
.expan_container .expan_box.door{
    /* flex: 0 1 300px; */
    flex: 0 0 300px;
}
.expan_container .expan_box .box_innre{
  width: 90%;
  margin: 0 auto;
}
.expan_container .expan_box .expan_topic{
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
}
.expan_container .expan_box .subtitle{
  text-align: center;
  margin-bottom: 15px;
}
.expan_container .expan_box img{
    max-width: 220px;
}
/* 二つ結合 */
.expan_container .expan_box .box_item_wrapper{
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}
.expan_container .expan_box .box_item_wrapper .box_item{
    flex:1 1 50%;
    text-align: center;
}
.expan-table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin-top: 30px;
}
.expan-table th,
.expan-table td{
    border: 1px solid #707070;
    text-align: center;
    padding: 5px 0;
    /* width: 30px; */
    width: 66px;
    vertical-align: middle;
}

.expan-table .group-title{
    background-color: #DFE0E2;
    text-align: left;
    padding-left: 8px;
}
.expan-table thead{
    background-color: #666;
    color: #FFF;
    font-weight: bold;
}

.expan-table .col-name{
    width: 100px;
    padding: 0;
    background-color: #F5F5F5;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
}
.expan-table thead .col-name{
    background-color: #666;

}
.add_text{
    font-size: 14px;
    position: relative;
    padding-left: 1em;
    text-align: left;
    font-weight: normal;
}
.add_text a{
    color: #E6001B;
}
.add_text b{
    font-weight: bold;
}
.add_text::before{
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}
@media screen and (min-width: 960px){
    .expan_area{
        padding: 90px 0;
    }
    .expan_title{
        margin-bottom: 50px;
    }
    .expan_container .expan_box .box_item_wrapper{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
    }
    .expan_container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: start;
        max-width: 960px;
        margin: 10px auto;
    }
.expan_container .expan_box.cage{
    flex: 0 1 600px;
}
.expan_container .expan_box.door{
    flex: 0 1 300px;
}
.expan_container .expan_box .box_innre{
    width: 100%;
}
}
/* カウント */
.count_area{
    padding: 40px 0;
    background-color: #F8F8F8;
    max-width: 1100px;
    margin: 60px auto 0;
    width: 90%;
}
.count_area .count_inner{
  width: 90%;
  margin: 0 auto;
  max-width: 960px;
}
.count_area .count_title{
    font-size: 20px;
    font-family: 'Roboto', 'Arial', 'Noto Sans JP', sans-serif;
    text-align: center;
    font-weight: bold;
    color: #E6001B;
    position: relative;
    padding-left: 30px;
    width: fit-content;
    margin: 0 auto 30px;
}
.count_area .count_title::before{
    content: "!";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: red;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    font-size: 14px;
}
.count_area .count_topic{
    font-size: 16px;
    font-weight: bold;
    color: #E6001B;
}
.count_area .example_text{
    position: relative;
    margin-top: 30px;
    padding-left: 30px;
}
.example_text::before{
    content: "例：";
    position: absolute;
    left: 0;
    font-weight: bold;
}
.count_container{
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 10px auto 30px;
    align-items: center;
}
.count_container .img_box{
    flex: 0 1 50%;

}
.count_container .img_box.count_left{
    max-width: 288px;
}
.count_container .img_box.count_right{
    max-width: 288px;
}
.count_container .txt_box{
    margin-bottom: 25px;
}
.count_container .img_box.count_parts{
    max-width: 414px;
}
.count_container .txt_box b{
    font-weight: bold;
}
.count_area .hotline_text{
    color: #333333;
}
.count_area .hotline_text a{
    color: #E6001B;
}

@media screen and (min-width: 960px){
.count_container{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
    column-gap: 10%;
    margin: 10px auto 60px;
}
.count_container .img_box{
    flex: 0 1 50%;
}
.count_container .img_box.count_left{
    flex: 0 1 490px;
    max-width: 490px;

}
.count_container .img_box.count_right{
    flex: 0 1 288px;
  /* padding-left: 30px; */
}
.count_container .txt_box{
    margin-bottom: 0;
    flex: 0 1 466px;
}
.count_container .img_box.count_parts{
    flex: 0 1 414px;
    padding-top: 20px;
}
}
/* レビューエリア */
.review_area{
    padding: 35px 0;
    background-image: url('../images/review_bg.jpg?2');
    background-size: cover;
}
.review_area .review_container{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
}
.review_area .review_container .txt_box{
    background-color: #FFF;
}
.review_area .review_container .txt_box .txt_box_inner{
    width: 90%;
    margin: 35px auto 45px;
    padding: 0 10px;
    box-sizing: border-box;
}
.review_area .review_container .txt_box .review_topic_title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.5;
}
.review_area .review_container .txt_box .review_mark{
    background-color: #DFE0E2;
    width: fit-content;
    padding: 0 10px;
    margin: 25px 0 10px;
    font-size: 16px;
    font-weight: bold;
}
.review_area .review_container .txt_box .review_text{
    font-size: 16px;
}
.review_area .review_container .txt_box .review_name{
    font-size: 16px;
    text-align: right;
}
.review_area .review_container .img_box{
    margin: 30px auto 0;
}
@media screen and (min-width: 960px){
    .review_area{
        padding: 50px 0;
    }
    .review_area .review_container{
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        width: 90%;
        max-width: 1290px;
        margin: 0 auto;
    }
    .review_area .review_container .txt_box{
        flex:1 1 575px; /* 下限値を指定して折り返す */
        margin: 0
    }
    .review_area .review_container .txt_box .txt_box_inner{
        width: 84%;
        padding: 0;
    }
    .review_area .review_container .txt_box .review_topic_title{
        font-size: 30px;
        text-align: left;
    }
    .review_area .review_container .txt_box .review_mark{
        font-size: 18px;
    }
    .review_area .review_container .txt_box .review_text{
        line-height: 2.5;
    }
    .review_area .review_container .img_box{
        flex: 1 1 333px; /* 下限値を指定して折り返す */
        margin: 0 -30px 0 0;
        z-index: 1;
    }
}

/* ワーニングエリア */
.warning_area{
    padding: 35px 0;
}
.warning_area .warning_inner{
    width: 90%;
    margin: 0 auto;
}
.warning_area .warning_title{
    margin-bottom: 35px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.warning_area .warning_text{
    padding-top: 40px;
    padding-left: 1.5em;
    border-top: 1px solid #DDDDDD;
    font-size: 16px;
}
.warning_area .warning_text li{
    list-style: disc;
    margin-bottom: 10px;
}
@media screen and (min-width: 960px){
    .warning_area{
        padding: 75px 0;
    }
    .warning_area .warning_inner{
        width: 80%;
        max-width: 980px;
    }
    .warning_area .warning_text{
        line-height: 2.5;
    }
}


/* ****************************************************/


@media screen and (min-width: 1463px){
    .top_area .top_container .txt_box .for_pc{
        display: block;
    }
}

/* フッターナビ */
.btn_area.foot_navi .btn{
    max-width: 160px;
}
.btn_area.foot_navi .btn.non_active{
    pointer-events: none;
    opacity: 0.8;
    cursor: default;
}
@media screen and (min-width: 960px){
    .btn_area.foot_navi{
        padding: 45px 0 60px;
    }
    .btn_area.foot_navi .logo_img{
        margin-bottom: 30px; 
    }
    .btn_area.foot_navi .hotline_text{
        margin-top: 40px;
    }
    .btn_area.foot_navi .btn{
        max-width: 226px;
    }
}