@charset "utf-8";
@import url("./common.css");


:root{
    --bg-size-max-width: 1080px;    /* PCの最大幅 */
    font-weight: 100;
    --font-family-bold: noto-sans-cjk-jp, sans-serif;
    --font-family-medium: noto-sans-cjk-jp, sans-serif;
    --font-family-regular:  noto-sans-cjk-jp, sans-serif;
    --font-family-demilight:  noto-sans-cjk-jp, sans-serif;
    --font-family-light:  noto-sans-cjk-jp, sans-serif;
    --font-family-thin:  noto-sans-cjk-jp, sans-serif;

    --font-size-sec-title: 3.96vw;
    --font-size-xx-large: calc((40/1080) * var(--bg-size-max-width));;   /* 40px */
    --font-size-x-large: calc((36/1080) * var(--bg-size-max-width));;   /* 36px */
    --font-size-large: calc((30/1080) * var(--bg-size-max-width));;     /* 30px */
    --font-size-normal: calc((28/1080) * var(--bg-size-max-width));; /* 28px */
    --font-size-small: calc((24/1080) * var(--bg-size-max-width));;   /* 24px */
    --font-size-x-small: calc((22/1080) * var(--bg-size-max-width));;    /* 22px */
    --font-size-xx-small: calc((20/1080) * var(--bg-size-max-width));;   /* 20px */

    --font-color-sec-title: white;
    --font-color-text: #666666;
    --font-color-highlight: #48b6b8;
    --font-color-impact: #e25d27;
    --font-color-regular: #9a671e;

    --color-brown: #9a671e;
    --color-darkbrown: #653a00;
    --color-white: white;
    --color-green: #48b6b8;
    --color-impact: #e25d27;
    --color-gray: #666666;

    --line-height-more-narrow: 4.8vw;   /* 36px */
    --line-height-narrow: 5.87vw;   /* 44px */
    --line-height-default: 7.33vw;  /* 55px */
    --line-height-large: 8vw;   /* 60px */
        
    --border-color-form: #f3f2e5;
    --border-color-form-qa: #a8a68e;
    --border-color-dashed: #9a671e;

    --bg-color-default: white;
    --bg-color-section-title:#48b6b8;
    --bg-color-block-tel: #a7a48d;
    --bg-color-yellow: #fdf9f0;

    --bg-color-stlipe: linear-gradient(
        -45deg,
        #dddddd 25%,
        #cccccc 25%,
        #cccccc 50%,
        #dddddd 50%,
        #dddddd 75%,
        #cccccc 75%,
        #cccccc
    );
    --bg-color-stlipe-yellow: linear-gradient(
        -45deg,
        #f9eed2 25%,
        #fcf7eb 25%,
        #fcf7eb 50%,
        #f9eed2 50%,
        #f9eed2 75%,
        #fcf7eb 75%,
        #fcf7eb
    );
    --box-height-h2: 10.67vw;
    --box-height-cv: 21.73vw;
}




.background{
    width: 100%;
    margin: 0;

    background-color: var(--color-white);
    display: block;
}

/* =========== コンテンツ（セクション） ========== */
    .c-bg_section_white{
        width: 100%;
        margin: 0;
        text-align: center;
        background-color: var(--color-white);
        display: block;
    }

    .c-bg_section_gray{
        width: 100%;
        margin: 0;
        text-align: center;

        background-color: #f5f5f5;
        display: block;
    }

.c-cont{
    position: relative;
    max-width: var(--bg-size-max-width);
    width: 100%;
    margin: 0 auto;
    display: block;
    background-color: var(--color-white);
}
.c-cont_inner{
    width: 90%;
    margin: 0 5%;
    display: block;
}
.c-cont_h1{
    position: absolute;
    left: 0;
    top: calc((30/1080) * 100%);
    display: block;
    width: 40%;
}
.c-cont_h1 > h1{
    text-align: left;
    margin: 0;
}
.c-cont_h1 > h1 > img{
    padding-left: 5%;
    padding-top: 2%;
    width: auto;
}


/* =========== テキストコンテンツ ========== */

/* テキストコンテンツ（汎用） */
.c-text{
    display: block;
}
.c-text > p{ margin: 0; }

/* テキストコンテンツ（中央） */
.c-text_center{
    display: block;
    text-align: center;
}
    .c-text_center > p{ margin: 0; }

/* テキストコンテンツ（タイトル用） */
.c-text_title{
    display: block;
    text-align: center;
}
    .c-text_title > h2{ 
        width: 72vw;
        max-width: 540px;
        border-bottom: 1px solid var(--color-brown);
        margin: 0 auto;
        padding-bottom: calc((20/750) * 100%);
    }
    .c-text_title > h3{ margin: 0; }

/* テキストコンテンツ（大きめ用） */
.c-text_gt{
    display: block;
}
    .c-text_gt > p{
        --padding-top-px: 25;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        margin: 0;
    }





    .c-cont_text_regular{
        display: block;
    }
        .c-cont_text_regular > p{
            font-family: var(--font-family-regular);
            font-weight: 400;
            color: var(--font-color-regular);

            --font-size-px: 28;
            --line-height-px: 44;
    
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            margin: 0;
        }
        .c-cont_text_regular > p > strong{
            color: var(--color-impact);
        }
.c-cont_text_thin{
display: block;
}
.c-cont_text_thin > p{
font-family: var(--font-family-thin);
font-weight: 100;
font-size: 2.93vw;
color: var(--color-brown);
line-height: 4.53vw;
margin: 0;
}
.c-cont_text_demilight{
display: block;
}
.c-cont_text_demilight > p{
font-family: var(--font-family-demilight);
font-weight: 300;
font-size: 3.73vw;
line-height: var(--line-height-default);
margin: 0;
}
.c-cont_text_demilight > p > strong{
color: var(--color-impact);
}
.c-cont_text_light{
display: block;
}
.c-cont_text_light > p{
font-family: var(--font-family-light);
font-weight: 200;
font-size: 3.47vw;
line-height: 6.4vw;
margin: 0;
}

.text-color_white{
color: var(--color-white);
}
.text-color_impact{
color: var(--color-impact);
}

.c-cont_text_title{
width: 72vw;
max-width: 540px;
border-bottom: 1px solid var(--color-brown);
display: block;
margin: 0 auto;
text-align: center;
}
.c-cont_text_title > h2{
font-family: var(--font-family-regular);
font-weight: 400;
font-size: 4.8vw;
line-height: 7.33vw;
color: var(--color-brown);

margin: 3.3vw auto;
}

/* Text-Size */
.font-size-large{
font-size: var(--font-size-large);
}


.font-color-brown{
color: var(--color-brown);
}
.font-color-impact{
color: var(--color-impact);
}





/* ============= 属性付与 ============ */
.att-float_left{
    float: left;
}

.att-position_fixed{
    position: fixed;
}


/* ============= ブロックコンテンツ =============  */
.c-block_full{
    position: relative;

    max-width: var(--bg-size-max-width);
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-white);

    display: inline-block;
}
.c-block_full_middle_90{
    width: 100%;
    margin: 5vw 0;
    display: inline-block;
}
.c-block_half{
    width: 50%;
    margin: 0;
    display: inline-block;
}

.c-block_center_95{
    width: 95%;
    margin: auto 2.5%;
    display: inline-block;
}
.c-block_center_90{
    width: 90%;
    margin: 0 5%;
    display: inline-block;        
}
.c-block_center_80{
    width: 80%;
    margin: 0 10%;
    display: inline-block;
}
.c-block_center_middle_80{
    width: 80%;
    margin: 5% 10%;
    display: inline-block;
}
.c-block_center_middle{
    width: 90%;
    margin: 5% 5%;
    display: inline-block;
}
.c-block_center_middle_90_95{
    width: 90%;
    margin: 2.5% 5%;
    display: inline-block;
}

/* ============= フォントスタイル =============  */

/* フォントスタイル（汎用タイトル用） */
.font-style_title{
    font-family: var(--font-family-regular);
    font-weight: 400;
    color: var(--color-brown);
}
    .font-style_title > h2{
        --font-size-px: 36;
        --line-height-px: 50;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

/* フォントスタイル（大きめ用） */
.font-style_gt{
    font-family: var(--font-family-medium);
    font-weight: 500;
}
    .font-style_gt > p{
        --font-size-px: 44;
        --line-height-px: 55;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        color: var(--color-green);
    }
        .font-style_gt > p > strong{
            color: var(--font-color-impact);
        }
            .font-style_gt > p > strong > b{
                --font-size-px: 60;
                font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
                background-image: url("/img/lp_shop/icon-font-impact.png");
                background-repeat: no-repeat;
                background-position: 100% 0;
                padding-right: 1.5vw;
            }

/* フォントスタイル（メッセージ用） */
.font-style_message{
    font-family: var(--font-family-light);
    font-weight: 200;

    --font-size-px: 28;
    font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

    --line-height-px: 48;
    line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
}
    .font-style_message > p{
        color: var(--color-darkbrown);
    }
    .font-style_message > p > strong{
        color: var(--color-impact);
    }

/* フォントスタイル（太字） */
.font-style_bold{
    font-family: var(--font-family-bold);
    font-weight: 700;
    font-size: var(--font-size-normal);
    line-height: var(--font-size-normal);   
}
    .font-style_bold > p{
        color: var(--color-gray);
    }

/* フォントスタイル（強調） */
.font-style_impact{
    font-family: var(--font-family-medium);
    font-weight: 500;
    font-size: calc((40.59/1080) * var(--bg-size-max-width));
    line-height: calc((60/1080) * var(--bg-size-max-width));
}
    .font-style_impact > p{
        color: var(--color-gray);
        margin: 0;
    }
    .font-style_impact > p > strong{
        color: var(--color-impact);
    }








/* *********** ヘッダ固有 ************ */

    /* 背景 */
    .bg_image_header{
        background-image: url("/img/lp_shop/bg-fv-pc.jpeg");
        background-repeat: no-repeat;
        background-size: contain; 
    }

    /* コンテンツエリア */
    .c-cont_header{
        max-width: var(--bg-size-max-width);

        position: relative;
        width: 100%;
        margin: 0 auto;
        display: block;

        
    }

    /* ブロック */
    .c-block_header{
        position: relative;

        width: 100%;
        max-height: 542px;
        height: calc((542/1080) * 100vw);

        margin: 0;
        text-align: center;

        display: inline-block;

     }

    .c-block_header_area{
        width: 97%;
        margin: 1.5% 1.5% 0;
        display: inline-block;
        text-align: right;

        position: relative;
    }

    .c-block_header_appeal{
        position: absolute;
        left: 0;
        --bottom-px: 46;
        bottom: calc((var(--bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        width: 65%;
        display: inline-block;
    }

    .c-block_header_message{
        max-width: var(--bg-size-max-width);
        width: 100%;
        margin: 0 auto;
        background-color: var(--color-white);
        
        --padding-top-px: 46;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        display: inline-block;
        text-align: center;
    }

    /* フォントスタイル（ヘッダ飾り文字エリア） */
    .font-style_header_area01{
        font-size: calc((46.28/1080) * var(--bg-size-max-width));  /* 46.28px */
        line-height: 1.3em;
        color: white;
    }
        .font-style_header_area01 > p{
            font-family: var(--font-family-bold);
            font-weight: 700;
            text-shadow: 2px 2px  #250202;
            margin: 0;
        }

    /* フォントスタイル（ヘッダ飾り文字エリア） */
    .font-style_header_area02{
        writing-mode: vertical-lr;
        text-orientation: upright;
        font-family: var(--font-family-bold);
        font-weight: 700;
        text-shadow: -2px 2px black;
        display: inline-block;
        text-align: right;

        position: relative;
    }
        .font-style_header_area02 > p{
            color: var(--color-white);

            --font-size-px: 50;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            letter-spacing: 0.25rem;
        }
        .font-style_header_area02 > p > span{
            color: var(--color-white);
            letter-spacing: 0.5rem;

            --font-size-px: 50;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }
        .font-style_header_area02 > p > strong{
            font-family: 'Arial Black',sans-serif;
            writing-mode: horizontal-tb;
            color: var(--color-impact);

            --font-size-px: 275.28;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
            --line-height-px: 200;
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            position: relative;
        }
        .font-style_header_area02 > p > strong > em{
            position: absolute;
            right: 18%;
            top: 50%;
            transform: translate(0, -50%);

            writing-mode: vertical-lr;
            text-orientation: upright;
            font-family: var(--font-family-bold);
            font-weight: 700;

            text-shadow: none;
            display: inline-block;

            --font-size-px: 35.22;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-white);
            line-height: 1em;
        }
        .font-style_header_area02 > img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            --width-px: 163;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }


    /* フォントスタイル（アピール） */
    .font-style_header_appeal{
        font-family: var(--font-family-bold);
        font-weight: 700;
        color: white;
        text-shadow: 2px 2px #250202;
    }
        .font-style_header_appeal > p {
            --font-size-px: 46;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        }
        .font-style_header_appeal > p > strong{
            --font-size-px: 56;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    /* フォントスタイル（告知） */
    .font-style_header_annaunce{
        font-family: var(--font-family-demilight);
        font-weight: 300;
        --font-size-px: 24;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        --line-height-px: 46;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        color: var(--color-gray);
        display: inline-block;
    }
        .font-style_header_annaunce > p{
            display: block;
            float: left;
        }
        .font-style_header_annaunce > img{
            width: auto;
            --height-px: 46;
            height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            float: left;
        }

    /* フォントスタイル（メッセージ） */
    .font-style_header_message{
        font-family: var(--font-family-bold);
        font-weight: 700;
    }
        .font-style_header_message > p{
            font-size: calc((29.72/1080) * var(--bg-size-max-width));
            color: var(--color-gray);
        }
        .font-style_header_message > p > strong{
            font-size: calc((38.24/1080) * var(--bg-size-max-width));
            color: var(--color-impact);
        }




/* *********** Section固有（CV） ************ */

    #cv-float{
        position: fixed;
        display: block;
    }
    #cv-static{
        display: block;
    }

    /* block */
    .c-block_left_30{
        width: 30%;
        float: left;
    }
    .c-block_left_70{
        width: 70%;
        float: left;
    }
    .c-block_cv_button{
        width: 44%;

        --height-px: 70;
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --margin-bottom-px: 20;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        display: inline-block;
    }

    

    /* フォントスタイル（CVボタン） */
    .font-style_cv_button{
        font-family: var(--font-family-medium);
        font-weight: 500;

        --font-size-px: 29.72;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        --line-height-px: 70;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        color: var(--color-white);
        text-align: left;
    }
        .font-style_cv_button > a{
            text-decoration: none;
            --padding-left-px: 140;
            padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            color: var(--color-white);

            margin: 0;

            --line-height-px: 70;
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    .cv-tel{
        position: absolute;
        left: 5%;

        background-image: url("/img/lp_shop/icon-cv-tel.png");
        background-repeat: no-repeat;
        background-size: contain;

        --position-x-px: 50;
        --position-y-px: 16;
        background-position-x: calc((var(--position-x-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));;
        background-position-y: calc((var(--position-y-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .cv-form{
        position: absolute;
        right: 5%;

        background-image: url("/img/lp_shop/icon-cv-form.png");
        background-repeat: no-repeat;
        background-size: contain;

        --position-x-px: 50;
        --position-y-px: 16;
        background-position-x: calc((var(--position-x-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        background-position-y: calc((var(--position-y-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    .c-block_cv{
        width: 100%;
        --height-px: 160;
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        top: 0;
        margin: 0 auto;
        z-index: 50;
        display: inline-block;
    }

    .c-cont_cv{
        max-width: var(--bg-size-max-width);
        width: 100%;

        top: 0;
        margin: 0 auto;
        z-index: 50;
        text-align: center;
    }
    .font-style_cv{
        font-family: var(--font-family-bold);
        font-weight: 700;

        --font-size-px: 24;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        line-height: 1.5em;
        color: var(--color-gray);
    }
        .font-style_cv > p{
            --padding-top-px: 12;
            padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }
        .font-style_cv > a{
            text-decoration: none;
            font-family: var(--font-family-bold);
            font-weight: 700;
        }






    /* *********** Section固有（TOPへボタン） ************ */

    .button_to_top{
        position: fixed;
        right: calc((8/1080) * 100%);
        bottom: calc((30/1080) * 100%);

        --width-px: 120;
        --height-px: 120;
        width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        border-radius: 50%;

        display: block;
        text-align: center;

        background-color: var(--color-green);
    }
        .button_to_top > a{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            font-family: var(--font-family-regular);
            font-weight: 400;
            --font-size-px: 22.64;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-white);
            text-decoration: none;
        }
    .color-reverse{
        background-color: var(--color-white) !important;
    }
        .color-reverse > a{
            color: var(--color-green) !important;
        }




/* *********** Section固有（お悩み） ************ */

    /* ----- 背景 ----- */
    .bg_image_probrem_icon{
        background-image: url("/img/lp_shop/background-icon-probrem.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right bottom;   
    }

    .bg_image_probrem{
        position: relative;
        display: block;
    }
        .bg_image_probrem > img{
            width: 100%;
        }

    /* コンテンツ */
    .c-cont_probrem{
        max-width: var(--bg-size-max-width);
        width: 100%;
        margin: 0 auto;
        
        background-color: var(--color-white);
        display: block;
    }

    /* block */
    .c-block_probrem{
        position: absolute;
        top: 0;
        left: 0;

        width: 55%;
        margin: 5% 40% 5% 5%;
        display: inline-block;
    }
    .c-block_title_probrem{
        width: 70%;

        --margin-top-px: 146;
        margin: calc((var(--margin-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) 15% 0 15%;

        display: inline-block;
    }

    .c-text_title_probrem{
        display: block;
        text-align: center;

        --margin-bottom-px: 140;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    /* ----- リストスタイル ----- */
    .list-style_probrem{
        list-style: none;

        --padding-left-px: 40;
        padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        text-align: left;
    }
        .list-style_probrem > li {
            --padding-top-px: 15;
            padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
            --padding-left-px: 55;
            padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
            --margin-bottom-px: 34;
            margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            --icon-width-px: 40;
            --icon-height-px: 49;
            background: url("/img/lp_shop/icon-probrem-list.png") left top no-repeat;
            background-size: calc((var(--icon-width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) calc((var(--icon-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    /* ----- フォントスタイル ----- */
    .font-style_probrem{
        font-family: var(--font-family-light);
        font-weight: 200;

        --font-size-px: 24;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: 1.5em; 

        color: var(--color-brown);
    }
        .font-style_probrem > li > p{
            margin: 0;
            padding-left: 2.5em;
            text-indent: -2em;
        }   






/* *********** Section固有（導入企業） ************ */

    /* ----- 背景 ----- */
    .bg_image_logo{
        background-image: url("/img/lp_shop/background-img-inst.png");
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: bottom;  
        display: inline-block;
    }

    /* ----- コンテンツ ----- */
    .c-cont_inst_about{
        max-width: var(--bg-size-max-width);
        width: 100%;
        display: block;
        background-color: var(--color-white);

        margin: 0 auto;
        --padding-bottom-px: 6;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    /* ----- block ----- */
    .c-text_about{
        text-align: center;
        --margin-top-px: 140;
        --margin-bottom-px: 160;

        margin: calc((var(--margin-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto;
    }
    .c-text_inst_title{
        display: block;
        text-align: center;

        --margin-top-px: 43;
        --margin-bottom-px: 68;

        margin: calc((var(--margin-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto;
    }
        .c-text_inst_title > p{ margin: 0; }

    .c-text_inst_appeal{
        display: block;
        text-align: center;

        --margin-bottom-px: 33;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .c-text_inst_appeal > p{ margin: 0; }



    .c-block_inst{
        width: 80%;
        margin: 0 10%;
        display: inline-block;
        --margin-bottom-px: 80;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .c-block_inst_imgs{
        width: 80%;
        margin: 0 10%;
        display: inline-block;
    }
    .c-block_inst_example{
        width: 24%;
        --height-px: 158;
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        margin: 0 4.1%;
        display: inline-block;
        text-align: center;
    }

    .c-block_inst_example_img{
        --width: 150;
        width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --height-px: 118px;
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        display: inline-block;
        text-align: center;
    }
        .c-block_inst_example_img > img{
            width: 100%;

            --heigth-px: 118px;
            max-height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    /* ----- フォントスタイル ----- */
    .font-style_inst > p{
        font-family: var(--font-family-medium);
        font-weight: 500;
    }

    .font-style_inst_title > p{
        font-family: var(--font-family-medium);
        font-weight: 500;

        --font-size-px: 32;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        color: var(--color-brown);
    }

    .font-style_inst_example{
        text-align:center;
    }
        .font-style_inst_example > p{
            font-family: var(--font-family-light);
            font-weight: 200;

            --font-size-px: 20;
            --line-height-px: 30;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-gray);
        }

    .font-style_inst_appeal{
        text-align: center;
    }
        .font-style_inst_appeal > p{
            color: var(--color-gray);

            font-family: var(--font-family-regular);
            font-weight: 400;
            --font-size-px: 24;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }
        .font-style_inst_appeal > p > strong{
            color: var(--color-impact);

            font-family: var(--font-family-medium);
            font-weight: 500;
            --font-size-px: 38;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }




/* *********** Section固有（導入メリット） ************ */

/* ----- 背景 ----- */
.bg_image_merit{
    position: relative;
    display: block;
}

.bg_merit_parallax{
    width: 100%;
}
    /* block */
    .c-block_merit{
        position: absolute;
        top: 0;
        left:0;

        width: 60%;
        margin: 5% 5% 5% 35%;
        display: inline-block;
        text-align: left;
    }
    .c-block_merit_img{
        /*
        --width-px: 750;
        --heigth-px: 550;
        width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        */

        width: 100%;
        max-height: 550px;
        /*
        --border-width-px: 100;
        border-right: calc((var(--border-width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) solid #ac662d;
        */

        display: block;
    }

/* ----- フォントスタイル ----- */
.font-style_title_merit{
    color: var(--color-white);
}
    .font-style_title_merit > h3{
        font-family: var(--font-family-medium);
        font-weight: 500;
        font-size: var(--font-size-large);
        line-height: var(--line-height-large);
        
        --font-size-px: 30;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --line-height-px: 60;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }



/* ----- フォントスタイル ----- */
.font-style_merit{
    font-family: var(--font-family-light);
    font-weight: 200;
    
    --font-size-px: 30;
    font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

    color: var(--color-brown);
    
}
    .font-style_merit > li > p{
        margin: 0;

        --line-height-px: 50;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));   /* 50px */

        padding-left: 1em;
        text-indent: -1em;
    }   
    .font-style_merit > li > p > strong{
        color: var(--color-impact);
    }


.list-style_merit{
 
    list-style: none;

    --padding-left-px: 40;
    padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

    --margin-top-px: 16;
    margin-top: calc((var(--margin-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));  
}
    .list-style_merit > li {
        --padding-top-px: 20;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        --padding-left-px: 55;
        padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
        --margin-bottom-px: 16.5;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        background: url("/img/lp_shop/icon-merit.png") left top no-repeat;
        
        --bg-size-px: 50;
        background-size: calc((var(--bg-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))); 
    }



/* *********** Section固有（お客様の声） ************ */

    /* ----- コンテンツ ----- */
    .c-cont_voice{
        width: 70%;
        margin: 0 15%;
        display: block;

        --margin-bottom-px: 189;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))); 
    }

    /* ブロック */
    .c-block_voice{
        width: 100%;
        margin: 0;
        display: inline-block;

        position: relative;
    }

    /* レイアウト指定 */
    .voice_left{
        position: relative; 

        --height: 165;
        height: calc((var(--height)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

    }
        .voice_left > img{
            width: auto;
            height: 100%;

            position: absolute;
            left: 0;
            top: 0;
        }
        .voice_left > div{
            position: absolute;
            bottom: 0;
            right: 0;

            width: 75%;
            height: 70%;

            text-align: left;
            background-image: url("/img/lp_shop/background-comment-left.png");
            background-repeat: no-repeat;
            background-size: 95% 100%;
            background-position: right;
        }
        .voice_left > div > p {
            padding-left: 2rem;
        }

    .voice_right{
        position: relative; 

        --height: 165;
        height: calc((var(--height)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .voice_right > img{
            width: auto;
            height: 100%;

            position: absolute;
            right: 0;
            top: 0;
        }
        .voice_right > div{
            position: absolute;
            bottom: 0;
            left: 0;
           
            width: 75%;
            height: 70%;

            text-align: left;
            background-image: url("/img/lp_shop/background-comment-right.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }


    /* ----- フォントスタイル ----- */
    .font-style_voice{
        line-height: 1.5rem;

        --font-size-px: 24;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        position: relative;
    }
        .font-style_voice > p{
            font-family: var(--font-family-light);
            font-weight: 200;
            color: var(--color-white);

            --left-px: 40;
            position: absolute;
            top: 50%;
            left: calc((var(--left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            transform: translate(0, -50%);
        }
        .font-style_voice > span{
            position: absolute;
            --top-px: -30;
            --left-px: 40;
            top: calc((var(--top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            left: calc((var(--left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            --font-size-px: 20;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            font-family: var(--font-family-thin);
            font-weight: 100;
            color: var(--color-gray);

        }
 









/* *********** Section固有（仕組み） ************ */

    /* コンテンツ */
    .c-cont_archtecture{
        max-width: var(--bg-size-max-width);
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    /* block */
    .c-block_archtecture_title{
        width: 100%;
        --margin-bottom-px: 60;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        display: inline-block;
    }

    .c-block_archtecture_img{
        width: 44.5%;
        padding-left: 5%;
        display: block;
        float: left;
    }
        .c-block_archtecture_img > img{
            --width-px: 473;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    .c-block_archtecture_comment{
        width: 100%;

        --margin-bottom-px: 45;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        display: inline-block;
    }

    .c-block_archtecture_apeal{
        width: 49.5%;
        display: inline-block;
    }

    .c-block_archtecture_cost{
        width: 95%;
        display: inline-block;
        margin-left: 5%;
        text-align: left;

        --margin-bottom-px: 60;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .c-block_archtecture_cost > div{
            --width-px: 150;
            --height-px: 138;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
            border-radius: 15px;
            
            --margin-right-px: 8;
            margin-right: calc((var(--margin-right-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
            background-color: white;
            float: left;
            
            position: relative;
            text-align: center;
        }
        
    
    .font-style_archtecture_comment{
        font-family: var(--font-family-medium);
        font-weight: 500;
        
        --line-height-px: 49;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .font-style_archtecture_comment > p{
            --font-size-px: 27;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
            color: var(--color-brown);
        }
        .font-style_archtecture_comment > p > strong{
            --font-size-px: 43;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            color: var(--color-impact);
        }
    
    
    .font-style_archtecture_cost > p{
        font-family: var(--font-family-thin);
        font-weight: 100;

        --font-size-px: 15;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        color: var(--color-gray);
    }
    .font-style_archtecture_cost > span{
        font-family: var(--font-family-bold);
        font-weight: 700;

        --font-size-px: 16;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
        color: #666666;
    
        position:absolute;
        --bottom-px: 19;
        --right-px: 19;
        bottom:calc((var(--bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        right: calc((var(--right-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
    }
    .font-style_archtecture_cost > strong{
        font-family: 'Arial Black',sans-serif;

        --font-size-px: 89;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        color: #e25d27;
        
        position: absolute;
        --bottom-px: 19;
        bottom:calc((var(--bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        left: 50%;
        transform: translate(-50%, 0);
    }


/* *********** Section固有（お得情報） ************ */
    /* コンテンツ */
    .c-cont_info{
        width: 80%;
        margin: 0 10%;
        display: block;
    }    

    /* block */
    .c-block_info{
        width: 30%;
        margin: 0 1.5%;
        display: block;

        text-align: center;
        float: left;
    }
    .c-block_info > img{
        --width-px: 232;

        width: calc((var(--widthpx)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .c-block_info > p{
        width: 100%;
    }
    .c-block_info_text{
        width: 90%;
        background-color: rgba(255,255,255,0.8);
        display: inline-block;
    }
    .c-block_info_title{
        width: 100%;
        display: inline-block;

        --margin-bottom-px: 28;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .c-block_info_message{
        width: 100%;
        display: inline-block;

        --margin-bottom-px: 60;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    /* フォントスタイル */
    .font-style_info_value{
        --font-size-px: 24;
        --line-height-px: 28;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .font-style_info_value > p{
            font-family: var(--font-family-demilight);
            font-weight: 300;
            color: var(--color-darkbrown);
        }
        .font-style_info_value > p > strong{
            color: var(--color-impact);
        }

    .font-style_info_text{
        --font-size-px: 36;
        --line-height-px: 55;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .font-style_info_text > p{
            color: var(--color-brown);
        }
        .font-style_info_text > p > strong{
            font-family: var(--font-family-bold);
            font-weight: 700;
            color: var(--color-impact);
        }



/* *********** Section固有（よくある質問） ************ */
    /* コンテンツ */
    .c-cont_sec_qa{
        max-width: var(--bg-size-max-width);
        width: 100%;
        display: block;
        margin: 0 auto;
        background-color: var(--color-white);

        --padding-bottom-px: 160;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    /* ----- block ----- */
    .c-block_title_qa{
        width:80%;
        margin: 0 10%;

        --border-px: 14;
        border-bottom: calc((var(--border-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) solid #d2cdcd;

        --padding-top-px: 120;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --margin-bottom-px: 22;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .c-block_question{
        border-radius: 15px 15px 0 0;
    }
    .c-block_answer{
        border-radius: 0 0 15px 15px;
    }
    .c-block_qa{
        width: 80%;
        margin: 0 10%;
        display: block;

        --margin-bottom-px: 16;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        text-align: left;
    }
    

    /* ----- フォントスタイル ----- */
    .font-style_qa_message{
        font-family: var(--font-family-regular);
        font-weight: 400;
        color: var(--color-gray);
    }
        .font-style_qa_message > p{
            --font-size-px: 32;
            --line-height-px: 55;

            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    .font-style_qa{
        font-family: var(--font-family-regular);
        font-weight: 400;
        color: var(--color-gray);
    }
        .font-style_qa > h2{
            --font-size-px: 36;
            --line-height-px: 55;

            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            --margin-px: 21;
            margin: calc((var(--margin-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto;
        }

            .faq-q{
                font-family: "ヒラギノ角ゴシック";
                color: var(--color-green);

                --font-size-px: 48;
                --line-height-px: 55;

                font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
                line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            }
            .faq-and{
                font-family: "ヒラギノ角ゴシック";
                color: var(--color-gray);

                --font-size-px: 36;
                --line-height-px: 55;

                font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
                line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            }
            .faq-a{
                font-family: "ヒラギノ角ゴシック";
                color: var(--color-impact);

                --font-size-px: 48;
                --line-height-px: 55;

                font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
                line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            }

    .font-style_question{
        font-family: var(--font-family-demilight);
        font-weight: 300;
        --font-size-px: 28;
        --line-height-px: 84;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .font-style_question > p{
            color: var(--color-white);
            margin: 0;   
        }

    .font-style_answer{
        text-align: left;
    }
        .font-style_answer > p{
            font-family: var(--font-family-thin);
            font-weight: 100;

            --font-size-px: 22;
            --line-height-px: 34;

            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-brown);
            margin: 0;
        }
        .font-style_answer > p > strong{
            font-family: var(--font-family-light);
            font-weight: 200;

            --font-size-px: 26;
            --line-height-px: 48;

            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-impact);            
        }


    /* ----- テキスト ----- */
    .text-prefix_A::before{
        content: "A.";

        --font-size-px: 36;
        --line-height-px: 55;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .text-prefix_Q::before{
        content: "Q.";

        --font-size-px: 36;
        --line-height-px: 55;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    /* ---- JS動作用 ----- */
    .button_answer_open{
        position: relative;
    }
    .button_answer_open > p::after{
        position: absolute;
        right: 0;

        content: "▼";
        --font-size-px: 32;
        --line-height-px: 84;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .button_answer_close{
        position: relative;
    }
    .button_answer_close > p::after{
        position: absolute;
        right: 0;

        content: "▲";
        --font-size-px: 32;
        --line-height-px: 84;

        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }


/* ************ Section固有（検討） ************ */
    
    /* ----- block -----*/
    .c-block_consider_innder{
        width: 80%;
        margin: 0 10%;
        display: inline-block;

        /*
        --border-top-px: 15;
        --border-bottom-px: 30;
        border-top: calc((var(--border-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) solid var(--color-white);
        border-bottom: calc((var(--border-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) solid var(--color-white);
        */
    }
    .c-text_consider_message{

        --margin-bottom-px: 20;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .c-text_consider_message > p {
            --padding-top-px: 20;
            padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            margin: 0;
        } 
    .c-text_consider_text{
        --margin-bottom-px: 15;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .c-text_consider_text > p{
            margin: 0;
        }

    /* ----- フォントスタイル ----- */
    .font-style_consider_text{
        font-family: var(--font-family-regular);
        font-weight: 400;
    }
        .font-style_consider_text > p{
            color: var(--font-color-regular);

            --font-size-px: 28;
            --line-height-px: 44;
    
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            margin: 0;
        }
   

    .font-style_consider_message{
        font-family: var(--font-family-medium);
        font-weight: 500;
    }
        .font-style_consider_message > p{
            --font-size-px: 44;
            --line-height-px: 55;
    
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
            color: var(--color-green);
        }
            .font-style_consider_message > p > strong{
                color: var(--font-color-impact);
            }
                .font-style_consider_message > p > strong > b{
                    --font-size-px: 60;
                    font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            
                    background-image: url("/img/lp_shop/icon-font-impact.png");
                    background-repeat: no-repeat;
                    background-position: 100% 0;
                    padding-right: 10px;
                }

    .font-style_consider{
        font-family: var(--font-family-bold);
        font-weight: 700;
        --font-size-px: 32;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        line-height: 1.5rem;
    }
        .font-style_consider > p{
            color: var(--color-gray);
        }

/* ************ Section固有（お問い合わせフォーム） ************ */
    .c-cont_form{
        width: 100%;
        margin: 0;   

        background-image: var(--bg-color-stlipe-yellow);
        background-size: 15px 15px;
        display: inline-block;
    }

    /* block */
    .c-block_form_title{
        width: 100%;
        margin: 0;

        background-color: var(--color-green);
        text-align: center;

        background-image: url("/img/lp_shop/icon-cv-form.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 30% 20%;
    }


    /* フォントスタイル */
        .font-style_form_title > h2{
            --font-size-px: 30;
            --line-height-px: 80;
        
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
            color: var(--color-white);
            margin: 0;
        }




.position_message{
    position: absolute;
    bottom: 20%;
    right: 15%;
}
.position_message > img{
    --widht-px: 232;
    width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
}


.border_dashed{
border-top: 2px dashed var(--border-color-dashed);
border-bottom: 2px dashed var(--border-color-dashed);
}


/* *********** Section固有（連絡先） ************ */

    /* ----- コンテンツ ----- */
    .c-cont_connect{
        max-width: var(--bg-size-max-width);
        width: 100%;
        display: block;
        margin: 0 auto;
        background-color: var(--color-white);

        --padding-bottom-px: 80;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        text-align: center;
    }

    /* ----- block ----- */
    .c-block_connect_text{
        width: 65%;
        margin: 0;
        display: inline-block;
    }

    .c-block_tel{
        width: 34.5%;
        --height-px: 90;
        height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        background-color: var(--bg-color-block-tel);  

        background-image: url("/img/lp_shop/icon-tel_gray.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 5% 15px;

        margin: 0;
        display: inline-block !important;
    }
        .c-block_tel > a{
            text-decoration: none;
            font-family: var(--font-family-medium);
            font-weight: 500;

            --font-size-px: 32;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            --line-height-px: 90;
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--color-white);

            margin: 0;
            --padding-left-px: 115;
            padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    /* ----- フォントスタイル ----- */
    .font-style_connect_text{
        --font-size-px: 28;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        line-height: 1.5rem;
    }
        .font-style_connect_text > p{
            color: var(--color-gray);
        }

/* ご来店したら */

    /* コンテンツ */
    .c-cont_welcome{
        max-width: var(--bg-size-max-width);
        width: 100%;
        display: block;
        background-color: var(--color-white);
        margin: 0 auto;

        --padding-bottom-px: 238;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    /* block */
    .c-block_welcome_title{
        width: 100%;
        display: inline-block;

        --padding-top-px: 125;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --margin-bottom-px: 78;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    .c-block_welcome_comment{
        width: 70%;
        margin: 0 15%;
        display: inline-block;
        text-align: center;

        border-radius: 15px;
        background-color: var(--color-impact);
    }

    .c-block_welcome_flow{
        width: 100%;
        display: inline-block;

        --margin-bottom-px: 63;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
    .c-block_arrow_down{
        width: 100%;
        display: inline-block;
        text-align: center;   
        
        --margin-bottom-px: 40;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }
        .c-block_arrow_down > img{
            --width-px: 56.81;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }
    .c-block_welcome_img{
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .c-block_welcome_img > img{
       --width-px: 506;
       width: calc((var(--widht-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

       vertical-align: bottom;
    }

    .font-style_welcome_text{
        font-size: var(--font-size-normal);
        line-height: 6.4vw; /* 48px */
    }
        .font-style_welcome_text > p{
            color: var(--color-darkbrown);
        }
        .font-style_welcome_text > p >strong{
            color: var(--color-impact);
        }

    .font-style_welcome_comment{
        font-family: var(--font-family-medium);
        font-weight: 500;

        --font-size-px: 24;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --line-height-px: 44;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --margin-px: 40;
        margin: calc((var(--margin-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) auto;
    }
        .font-style_welcome_comment > p{
            color: var(--color-white);
        }







/* よくある質問 */


    .form_layout{
        width: 80%;

        margin: 5% 10% 0;
        border: 2px solid var(--border-color-form);
        box-sizing: border-box;
    }

    .c-cont_qa{
        width: 100%;
        border: 1px solid var(--border-color-form-qa);
        box-sizing: border-box;
        display: inline-block;

        background-image: var(--bg-color-stlipe-brown);
        background-size: 15px 15px;
    }
    .c-cont_question{
        width: 25%;
        height: 100%;
        float: left;
    }
    .c-cont_select{
        width: 75%;
        display: inline-block;

        background-color: var(--bg-color-default);
    }
    .c-cont_button{
        width: 100%;
        margin: 3.4vw auto;
    }
    
    .button_submit{
        text-align: center;
    }
        .button_submit > button{
            width: 60%;
            margin: auto 20%;
            border: 1px solid #a7a48d;
            border-radius: 1.6vw;
            box-sizing: border-box;
            background-color: #e25d27;

            font-family: var(--font-family-demilight);
            font-weight: 300;
            color: var(--font-color-sec-title);

            --font-size-px: 30;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    
            --line-height-px: 58;
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    .input_radio > input{
        width: auto;
    }
    .input_radio > span{
        --font-size-px: 20;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --line-height-px: 50;
        line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
    }

    .input_text{
        padding: 16px 0;
    }
        .input_text > input{
            width: 95%;

            border: 1px solid #cdcdcd;
            box-sizing: border-box;
            padding: 16px;
            margin: auto 16px;
        }
        .input_text > input::placeholder{
            color: #cdcdcd;
            margin: 8px;
        }
        .input_text > textarea{
            width: 95%;

            border: 1px solid #cdcdcd;
            box-sizing: border-box;
            padding: 16px;
            margin: auto 16px;
        }
        .input_text > textarea::placeholder{
            color: #cdcdcd;
            margin: 8px;
        }
    .input_number{
        text-align: left;
        padding: 16px 0;
    }
        .input_number > input{
            width: 20vw;
            border: 1px solid #cdcdcd;
            box-sizing: border-box;
            padding: 16px 0;
            margin: auto 16px;
        }
    .input_email{
        text-align: left;
        padding: 16px 0;
    }
        .input_email > input{
            width: 95%;

            border: 1px solid #cdcdcd;
            box-sizing: border-box;
            padding: 16px;
            margin: auto 16px;
        }
        .input_email > input::placeholder{
            color: #cdcdcd;
            margin: 8px;
        }
    .input_tel{
        text-align: left;
        padding: 16px 0;
    }
        .input_tel > input{
            width: 95%;

            border: 1px solid #cdcdcd;
            box-sizing: border-box;
            padding: 16px;
            margin: auto 16px;
        }
        .input_tel > input::placeholder{
            color: #cdcdcd;
            margin: 8px;
        }

    .mark_must{
        --font-size-px: 16;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        --padding-top-px: 16;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        color: var(--color-white);
        margin: 0;
    }
        .mark_must::before{
            background-color: #e25d27;
            content: "必須";
            color: white;
            padding: 3px;
            margin: 5px;
        }
    .mark_may{
        --font-size-px: 16;
        font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
        --padding-top-px: 16;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        
        color: var(--color-white);
        margin: 0;
    }
        .mark_may::before{
            background-color: #48b6b8;
            content: "任意";
            color: white;
            padding: 3px;
            margin: 5px;
        }

    .c-cont_img_center{
        width: 100%;
        display: block;
        text-align: center;

        margin: calc((73/750) * 100%) auto calc((54/750) * 100%);
    }
        .c-cont_img_center > img{
            --width-px: 130;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
        }

    .text_left{
        text-align: left;
    }

    .c-cont_block_tel{
        width: 100%;
        display: block;
        text-align: center;   
    }
        .c-cont_block_tel > div{
            --width-px: 357;
            --height-px: 90;
            width: calc((var(--width-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            height: calc((var(--height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
 

            background-color: var(--bg-color-block-tel);  

            background-image: url("/img/lp_shop/icon-tel_gray.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 15% 10%;

            display: inline-block;
        }
        .c-cont_block_tel > div > a{
            text-decoration: none;
            font-family: var(--font-family-medium);
            font-weight: 500;

            --font-size-px: 32;
            font-size: calc((var(--font-size-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));
            --line-height-px: 90;
            line-height: calc((var(--line-height-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

            color: var(--font-color-sec-title);

            margin: 0;
            --padding-left-px: 115;
            padding-left: calc((var(--padding-left-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px)));

        }








header{
width: 100%;
background-color: white;
}
/* =========== QA =========== */
.faq-question{
border-radius: 15px 15px 0 0;
}
.faq-question > div >p{
line-height: 11.2vw;
padding-left: 3.73vw;
}



main{
    width: 100%;
    margin: 0 auto;

    display: block;
}





/* =========== フッター =========== */

    footer{
        margin: 0;
        width: 100%;
        text-align: center;
    }

        footer > h2{
            font-family: noto-sans-cjk-jp, sans-serif;
            font-weight: 700;
            font-size: 40px;
            margin-bottom: 100px;
        }

        footer > .tel_f {
            margin-bottom: 35px;
        }
          
        footer > .tel_f > a > img {
            max-width: 100%;
            height: auto;
            width: 100%\9;
        }
          
        footer > dl.day {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin-bottom: 100px;
        }
          
            footer > dl.day *:last-child {
                margin-right: 0;
            }
            footer > dl.day dt, footer > dl.day > dd {
                margin-right: 20px;
            }
          
            footer > dl.day > dt {
                font-family: noto-sans-cjk-jp, sans-serif;
                font-size: 26px;
                color: #48B6B8;
                border: #48B6B8 1px solid;
                width: 4em;
            }
          
            footer > dl.day > dd {
                font-family: noto-sans-cjk-jp, sans-serif;
                color: #E05D26;
                font-size: 26px;

                margin-inline-start: 0;
            }
          
            footer > dl.company {
                font-family: noto-sans-cjk-jp, sans-serif;
                margin-bottom: 100px;
            }
          
            footer > dl.company > dt {
                font-family: noto-sans-cjk-jp, sans-serif;
                font-size: 12px;
                margin-bottom: 40px;
            }
            footer > dl.company > dd {
                margin-inline-start: 0;
            }
          
            footer #copy {
                font-family: noto-sans-cjk-jp, sans-serif;
                background: #151515;
                text-align: center;
                color: #fff;
                font-size: 12px;
                padding: 40px 0;
                margin: 0;
            }