@charset "utf-8";
/* CSS Document */
/***** #nav_ul_sp設定 ******/
#nav_ul_sp{
    list-style: none;
    display: none;
    position: fixed;
    width:100%;
    top:90px;
    left:0;
    background: #fff;
    z-index: 9999;
}
#nav_ul_sp li{
    width:100%;
    border-bottom:1px solid #eee;
}
#nav_ul_sp a{
    display: block;
    text-align: center;
    padding:1.2em 0;
    text-decoration: none;
    color:#fff;
    font-weight: bold;
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;
    background: #1b9c07;
}
#nav_ul_sp i{
    margin-right:5px;
    color:#fcdc4a;
} 
/***** #menu_btn設定 ******/
#menu_btn {
    display: none;
    width: 45px;
    height:50px;
    position: fixed;
    top:22px;
    right:25px;
    z-index: 999999;
    -webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    -o-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    cursor: pointer;
}
#menu_btn span {
    display: block;
    background:#199c09;
    width: 30px;
    height: 3px;
    position: absolute;
    left: 7px;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
}
#menu_btn span:first-child {
    top: 13px;
}
#menu_btn span:nth-child(2) {
    margin-top: -2px;
    top: 50%;
}
#menu_btn span:last-child {
    bottom: 14px;
}
#menu_btn.active{
    position:fixed;
}
#menu_btn.active span:first-child {
    -webkit-transform: translateY(6px) rotate(45deg);
    -moz-transform: translateY(6px) rotate(45deg);
    -ms-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg);
    top: 17px;
}
#menu_btn.active span:nth-child(2) {
    opacity: 0;
}
#menu_btn.active span:last-child {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
    bottom: 16px;
}
#overlay {
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.8);
  position:fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity .5s;
}
#overlay.active {
  width: 100vw;
  height: 100vh;
  opacity: 0.9;
}



/*===============================================
●tablet.css 画面の横幅が1280pxまで
===============================================*/
@media screen and (max-width: 1120px){
    #h_nav{
        display: none;
    }
    #menu_btn {
        display: block;
    }
}

/*===============================================
●smart.css  画面の横幅が960pxまで
===============================================*/
@media screen and (max-width:960px){   
    /*********** ttl設定 ***********/
    .ttl1{
        font-size: 35px;
    }


    /*********** 機能設定 ***********/
    .kinou_ttl{
        font-size: 25px;
    }


    /*********** プラン設定 ***********/
    #ul_plan li{
        width:calc(50% - 5px);
    }
}

/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
}

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
    /***** #nav_ul_sp設定 ******/
    #nav_ul_sp{
        top:74px;
    }
    /***** #menu_btn設定 ******/
    #menu_btn {
        top:12px;
        right:14px;
    }
    
    
    
    /*********** header設定 ***********/
    #header_logo img{
        width:140px;
    }
    


    /*********** contents設定 ***********/
    #contents{
        padding-top:74px;
    }


    /*********** footer設定 ***********/
    footer{
        padding:20px 20px 0;
    }
    #f_flex{
        display:block;
    }
    #f_flex figure{
        max-width:50%;
        max-width:168px;
    }
    .f_contact{
        margin-bottom:20px;
    }
    #f_nav li{
        margin-bottom:5px;
    }
    #copy{
        padding:3em 0 2em;
    }


    /*********** ttl設定 ***********/
    .ttl1{
        font-size: 25px;
        flex-direction: column;
        gap:10px;
        text-align: center;
    }

    .ttl2 span{
        font-size: 25px;
    }

    .ttl3{
        font-size: 27px;
    }
    .ttl3 b{
        width:40px;
        height:40px;
        line-height:40px;
        margin-bottom:10px;
    }

    #page_ttl{
        font-size:28px;
        line-height:0.8;
    }
    #page_ttl span{
        font-size:18px;
    }


    /*********** dl設定 ***********/
    .dl1{        
        flex-direction: column;
        gap:10px;
        margin-bottom:30px;
    }
    .dl1 dt{
        width:100%;
    }
    .dl1 dd{        
        width:100%;
    }



    /*********** 悩み設定 ***********/
    #ul_nayami li{
        width:100%;
    }


    /*********** kaiketsu設定 ***********/
    #ul_kaiketsu li{
        width:100%;
    }


    /*********** 機能設定 ***********/
    #ul_kinou li,
    #ul_kinou li:nth-child(2n){
        flex-direction: column;
        align-items: center;
    }
    .kinou_img{
        width:100%;
    }
    .kinou_atc{
        width:100%;
    }
    .kinou_ttl{
        justify-content: center;
        gap:10px;
    }
    .kinou_ttl img{
        width:32px;
    }


    /*********** フォームへ設定 ***********/
    .btn_form{
        font-size:25px;
        width:100%;
        box-sizing: border-box;
    }
    .btn_form i{
        font-size:30px;
    }


    /*********** 理由設定 ***********/
    #ul_reason li{
        flex-direction: column;
        align-items: center;
    }
    .reason_img{
        width:100%;
    }
    .reason_atc{
        width:100%;
    }


    /*********** プラン設定 ***********/
    #ul_plan{
        gap:20px;
    }
    #ul_plan li{
        width:100%;
    }


    /*********** faq設定 ***********/
    .ac_title,
    .faq_a{
        font-size:18px;
    }


    /*********** form設定 ***********/
    #form_table,
    #form_table tbody,
    #form_table tr,
    #form_table th,
    #form_table td{
        display: block;
        width:100%;
        box-sizing: border-box;
    }
    #form_table td{
        margin-bottom:10px;
    }
    .input1{
        width:100%;
        box-sizing: border-box;
    }



    /*********** font設定 ***********/
    .fs_m{
        font-size: 18px;
    }
    .fs_l{
        font-size: 23px;
    }
}