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


@media only screen and (max-width : 768px) {

    /*-------------------------------------------------------------------------------------
スマホ用レイアウト（768px以下スクリーン）
----------------------------------------------------------------------------------------*/

    /*--------------------------------------------------
共通設定(スマホ)
-----------------------------------------------------*/

    /*body全体の初期スタイル調整*/
    body {
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /*--------------------------------------------------
全体レイアウト／背景設定（スマホ）
-----------------------------------------------------*/
    /*記事(ボディ)エリア*/
    .article {
        background-color: #fff;
        border-left: none;
        border-right: none;
        font-size: 1.5em;
        /*=15px*/
    }

    /*記事(ボディ)エリアの行間*/
    .article p {
        line-height: 1.6;
    }

    .article {
        width: 100%;
        overflow: hidden;
    }

    /*カラム全体の幅を変更する*/
    .top_image_in,
    .section_inr {
        width: 100%;
        margin: 0 auto;
        /*真ん中に要素を置きたいときに使う*/
    }

    /*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
    /*上部固定ヘッダー全体*/
    .header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        overflow: auto;
    }

    /*ヘッダー内部をカラム幅にする*/
    .inner {
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    /*ヘッダーのロゴ*/
    .header_logo {
        width: 35%;
        float: left;
        margin: 0.5em;
    }

    /*ヘッダーのLINEボタン*/
    .header_line {
        width: 40%;
        float: right;
        margin: 1.5em 6em 0.5em 0;
    }

    .line_header {
        color: #fff;
        background: #06C755;
        border-radius: 100vh;
        font-size: 1.2em;
        padding: 0.5em;
        font-weight: bold;
        width: 100%;
        display: block;
        text-align: center;
        letter-spacing: 1px;

    }

    .line_header:hover {
        border: 2px solid #06C755;
        border-radius: 100vh;
        background: #fff;
        color: #06C755;
    }


    /*--------------------------------------------------
ハンバーガーメニュー
-----------------------------------------------------*/
    /*　ハンバーガーボタン　*/
    .hamburger {
        display: block;
        position: fixed;
        z-index: 3;
        right: 10px;
        top: 8px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        text-align: center;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 35px;
        height: 2px;
        left: 6px;
        background: #3b2004;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 10px;
    }

    .hamburger span:nth-child(2) {
        top: 25px;
    }

    .hamburger span:nth-child(3) {
        top: 33px;
    }

    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        top: 16px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 16px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    nav.globalMenuSp {
        display: block;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        color: #3b2004;
        background: #fff;
        text-align: center;
        transform: translateY(-100%);
        transition: all 0.6s;
        width: 100%;
    }

    nav.globalMenuSp ul {
        display: block;
        background: #f5f5f5;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    nav.globalMenuSp ul li {
        display: block;
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px solid #fff;
    }

    nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    nav.globalMenuSp ul li:hover {
        background: #f5f5f5;
    }

    nav.globalMenuSp ul li a {
        display: block;
        color: #3b2004;
        font-size: 1.3em;
        padding: 1.5em 0;
        text-decoration: none;
        font-weight: 600;


    }

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
        transform: translateY(0%);
    }

    .h-text {
        width: 50px;
        font-size: 10px;
        color: #3b2004;
        text-align: center;
        display: inline-block;
    }

    /*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
    .top_image {
        background-image: none;
    }

    .top_image_in img {
        width: 100%;
    }

    .pc_img {
        display: none !important;
    }

    .sp_img {
        display: block !important;
    }

    .fv02 {
        padding: 2em 0em;
    }

    .fv02 img {
        width: 100%;
    }

    .fv03 {
        background-size: cover;
        padding: 2em 0.3em;
    }

    .fv03 img {
        width: 100%;
    }



    /*--------------------------------------------------
見出しタグ設定（スマホ）
-----------------------------------------------------*/
    h2 {
        padding: 1em 0;
        text-align: center;
        font-weight: 600;
        font-size: 1.3em;
        line-height: 1.5;
        letter-spacing: 1.5px;
    }


    h3 {
        padding: 0.5em 0em 0;
        margin: 0;
        color: #4b7a30;
        font-size: 1.4em;
        font-weight: 600;
        text-align: center;
    }
    h4 {
        padding: 0.3em 0;
        font-size: 1.3em;
        font-weight: 600;
    }


    /*--------------------------------------------------
sectionの設定
-----------------------------------------------------*/

    .section_01 {
        background-image: url("../images/bg_fv02.jpg");
        background-size: cover;
        padding: 2em 0.3em;
    }

    .section_02 {
        background-image: url("../images/bg_section02.jpg");
        padding: 2em 1em;
        background-position: 30% 72%;
    }

    .section_03 {
        background-image: url("../images/bg_fv03.jpg");
        padding: 2em 0.8em;
    }

    /*--------------------------------------------------
CTAエリア
-----------------------------------------------------*/

    .area_cta {
        background-image: url("../images/bg_cta.gif");
        padding: 10px 0 0;
        margin: 0 auto;
    }

    .img_cta {
        padding: 2em 2em 0;
    }

    .btn_cta {
        padding: 1em 1em 4em;
    }

    /*--------------------------------------------------
他社との違い
-----------------------------------------------------*/
    .ctn_sv {
        padding: 3em 0em 0em;

    }

    .wrap_sv {
        position: relative;
    }

    .box_right_sv {
        float: left;
        width: 99%;
        position: relative;
        background-color: #e6ece2;
        padding: 10px;
        box-shadow: 10px 11px 0px -7px #4b7a30;
        border-radius: 3px;
        margin-bottom: 4em;
    }

    .num_right_sv {
        position: absolute;
        top: -20px;
        width: 92%;
        height: auto;
        left: 1.5%;
    }

    .txt_sv01 {
        padding: 1em 0.5em 0.5em;
        width: 100%;
    }

    .img_sv_right {
        display: none;
    }

    .box_left_sv {
        float: right;
        width: 99%;
        right: 0;
        border-radius: 3px;
        margin-bottom: 4em;
    }

    .num_left_sv {
        position: absolute;
        top: -20px;
        width: 85%;
        height: auto;
        left: 0%;
    }

    .txt_sv02 {
        padding: 1em 0.5em 0.5em;
        width: 100%;
        z-index: 100;

    }

    .img_sv_left {
        display: none;
    }
    
    .sp_sv {
        margin: 1.5em auto 0;
        width: 85%;
    }


    /*--------------------------------------------------
選ばれる理由
-----------------------------------------------------*/

    .ctn_reason {
        padding: 1em 0;
    }


    .box_reason_left {
        padding: 12px 10px;
        background-color: #fff;
        border-radius: 8px;
        width: 100%;
        float: none;
        margin: 1em 0;
    }

    .box_reason_right {
        padding: 12px 10px;
        background-color: #fff;
        border-radius: 8px;
        width: 100%;
        float: none;
        margin: 1em 0;
    }


    /* チェックボックスは非表示 */
    .reason-hidden {
        display: none;
    }

    /* Question部分 */
    .reason-open {
        display: block;
        cursor: pointer;
        position: relative;
        /* 変更部分 */
    }

    /* Answer部分 */
    .reason-close {
        display: block;
        height: 0;
        overflow: hidden;
        padding: 0;
        opacity: 0;
        transition: 0.5s;
        /* 表示速度の設定 */
    }

    /* チェックボックスにチェックが入ったらAnswer部分を表示する */
    .reason-hidden:checked + .reason-open + .reason-close {
        height: auto;
        opacity: 1;
        padding: 10px;
    }

    /*--------------------------------------------------
できること
-----------------------------------------------------*/

    .ctn_of {
        padding: 0 0 2em;
    }


    .box_of_left {
        padding: 20px 10px;
        width: 98%;
        float: none;
        margin: 1.5em auto;
        display: block;
    }

    .box_of_right {
        padding: 20px 10px;
        width: 98%;
        float: none;
        display: block;
        margin: 1em auto 0.5em;
    }
.ninki {
    width: 45%;
}
.com_harf {
        padding-top: 5px;
    width: 60%;
    margin: 0 auto;
}




    /*--------------------------------------------------
お客さまの声
-----------------------------------------------------*/

    .ctn_voice {
        padding: 1em 0;
    }

    .box_voice {
        background: #fff;
        border-radius: 15px;
        padding: 2em 0.5em;
        margin-bottom: 2em;

    }

    .icon_voice {
        float: none;
        width: 90%;
        margin: 0 auto;
        display: block;

    }

    .tit_voice {
        float: none;
        width: 100%;
        margin: 0 auto;
        display: block;
        padding: 0.5em 0 0.8em;
        text-align: center;
    }
.box_price {
    padding: 0.5em;
    }
.p_orange {
	font-size: 1.2em;
}
    
    
    .note {
        background-image:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 97%,
                #ddd 97%,
                #ddd 100%);
        background-size: 100% 2em;
        line-height: 2;
    }

    .note p {
        margin-bottom: 2em;
        line-height: 2;
    }

    .img_voice {
        padding: 1em 0em 0;
    }



    /*--------------------------------------------------
FAQ
-----------------------------------------------------*/

    .box_faq {
        max-width: 100%;
        padding: 0em 0.3em 1em;

    }


    /* Question部分 */
    .puest {
        display: block;
        padding: 1em 0em 0.5em 0.3em;
        border-bottom: 2px solid #ccc;
        margin: 10px 0px;
        position: relative;
        font-size: 1.1em;
        font-weight: 600;

    }

    .faq_q {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #4b7a30;
        color: #fff;
        border-radius: 50%;
        margin: 0 auto;
        /* ←円を中央揃え */
        text-align: center;
        /* ←文字を左右に中央揃え */
        line-height: 30px;
        /* ←文字を上下に中央揃え */
        margin-right: 5px;
        font-weight: 600;
        font-size: 1.1em;
    }


    /* Answer部分 */
    .answer {
        display: block;
        padding: 0.5em 0.3em;
        width: 100%;
        height: auto;
    }

    .answer_txt {
        display: inline-block;
        width: 85%;
        vertical-align: text-top;
        margin-top: -1em;
    }


    .faq_a {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border: 2px solid #ef6329;
        color: #ef6329;
        border-radius: 50%;
        margin: 0 auto;
        /* ←円を中央揃え */
        text-align: center;
        /* ←文字を左右に中央揃え */
        line-height: 30px;
        /* ←文字を上下に中央揃え */
        margin-right: 5px;
        font-weight: 600;
        font-size: 1.1em;
    }


    /*--------------------------------------------------
テーブル設定
-----------------------------------------------------*/
    .area_form {
        padding: 1em 0.5em;
    }


    table {
        width: 98%;
        border: none;
        margin: 1em auto 2em;
        border-collapse: separate;
        border-spacing: 0px 5px;
    }

    table tr {
        border-radius: 25px;
    }

    th,
    td {
        padding: 0.5em;
        border: none;
        border-bottom: none;
        display: block;
        width: 100%;
    }

    table td {
        background-color: #F6F8E7;
        line-height: 1.4;
    }

    .koumoku {
        width: 100%;
    }

    table tr:last-child td {
        background-color: #fff;
    }

    .btn_form2 {
        width: 80%;
        font-size: 1.2em;

    }

    /*--------------------------------------------------
下部固定ヘッダー（PC）
-----------------------------------------------------*/

    #pc_btn {
        display: none !important;
    }


    /*--------------------------------------------------
下部固定ヘッダー（スマホ）
-----------------------------------------------------*/
    .fix_menu_smartphone {
        display: block !important;
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 10000;
        box-shadow: 0px 0px 3px #594a42;
        background: rgb(0, 0, 0, 0.8);
    }

    .fix_menu_smartphone img {
        width: 100%;
    }

    .menu_left {
        float: left;
        width: 50%;
        padding: 1em 0.2em;
    }

    .menu_right {
        float: left;
        width: 50%;
        padding: 1em 0.2em;
    }


    /*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
    .footer {
        padding: 2em 2em 10em;
        font-size: 1.2em;
    }
}