@charset "utf-8";
/*
    Theme Name: theme-ekus 
    Theme URI: https://ekus.jp
    Description: 株式会社エクセレントショップサイトーのウェブサイト
    Version: 1.0
*/

/* ----------------------------------------------------------------
    #general setting & reset csss
---------------------------------------------------------------- */

:root {
/*========== Colors ==========*/
    --color-black: #000;
    --color-white: #fff;
    --text-link_hover: #0768E8;
    --border-color: #d6d6d6;
    --theme-color: #174666;
    --theme-orange: #eb5e00;

/*========== Font and typography ==========*/
    --font-size-big-3: 54px;
    --font-size-big-2: 48px;
    --font-size-big-1: 32px;
    --font-size-middle-3: 24px;
    --font-size-middle-2: 22px;
    --font-size-middle-1: 18px;
    --font-size-normal: 16px;
    --font-size-small-2: 14px;
    --font-size-small-1: 12px;
    --font-size-min: 10px;

/*========== Font weight ==========*/
    --font-weight-medium: 500;
    --font-semi-bold: 600;
}

/*
    clearfix
 -------------------------*/
.clearfix:after { content: ""; display: block; clear: both; } 
.clearfix:before { content: ""; display: block; clear: both; } 
.clearfix { display: block; }


* {
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-normal);
    line-height: 1.6;
}

ul, ol, dl {
    list-style: none;
}

html, body {
    color: var(--color-black);
}

h1 { font-size: var(--font-size-big-2); }
h2 { font-size: var(--font-size-middle-2); }
h3 { font-size: var(--font-size-middle-1); }

a:link, a:visited {
    color: var(--color-black);
    text-decoration: none;
    transition: .3s;
}
@media (hover: hover) {
    a:hover {
        color: var(--text-link_hover);
        text-decoration: none;
    }
}
img { max-width: 100%; }

hr {
    border: none;
    border-bottom: 4px solid var(--theme-color);
}



header {
    background: var(--color-white);
}
.global-nav ul li a {
    color: var(--color-black);
}


.wrap-top_visual-hanautahouse {
    width: 100%;
    height: 100vh;
    background-image: url(../images/bg-top-hanautahouse.jpg);
    background-size: cover;
    background-position: center center;
}
    @media screen and (max-width: 770px) {
        .wrap-top_visua-hanautahouse {
            width: 100%;
            height: auto;
        }
    }

.img-hh_title {
    width: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.title-contents_ch {
    width: 100%;
    margin: 50px auto;
    text-align: center;
}
.title-contents_ch h2 {
    font-size: var(--font-size-big-2);
    position: relative;
    margin-bottom: 50px;
}
    .title-contents_ch h2::after {
        content: "";
        width: 50px;
        height: 5px;
        background: var(--color-black);
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px;
    }

/* wrap-page-ch */

.wrap-page-ch {
    width: 100%;
    padding: 40px 0;
    margin: 20px auto;
}
    .wrap-page-ch article {
        text-align: center;
    }
    .wrap-page-ch article img {
        display: block;
        margin: 40px auto;
    }
    .wrap-page-ch article h2 {
        margin-bottom: 20px;
    }

.title-ch_contents  {
    width: 100%;
    text-align: center;
    margin: 60px auto 0 auto;
}
.title-ch_contents h2 {
    font-size: var(--font-size-big-2);
    position: relative;
}
    .title-ch_contents h2::before,
    .title-ch_contents h2::after {
        content: "";
        width: 25%;
        height: 1px;
        background: var(--color-black);
        position: absolute;
        top: 50%;
    }
        .title-ch_contents h2::before { left: 0; }
        .title-ch_contents h2::after { right: 0; }

.title-ch_plan {
    font-size: var(--font-size-big-2);
    margin-bottom: 60px;
    position: relative;
}
    .title-ch_plan::before,
    .title-ch_plan::after {
        content: "";
        width: 25%;
        height: 1px;
        background: var(--color-black);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .title-ch_plan::before { left: 0; }
    .title-ch_plan::after { right: 0; }

.content-list_block {
    margin-bottom: 100px;
}
    .content-list_block h3 {
        width: 240px;
        text-align: center;
        margin: 0 auto 30px auto;
        outline: 3px solid var(--color-black);
    }

.box-ch_text {
    width: 100%;
    text-align: center;
    margin: 60px auto 40px auto;
}
.box-ch_text h3 {
    font-size: var(--font-size-big-1);
}

.cut_area-hanauta {
    display: flex;
    justify-content: center;
    padding: 40px;
}
    .cut_area-hanauta img {
        margin: 0 20px;
    }


.wrap-ch_plan  {
    text-align: center;
}
.wrap-ch_plan-inner {
    margin: 80px 0 120px 0;
}

.box-img_2f img {
    width: 420px;
    margin: 20px;
}
.box-img_hiraya img {
    width: 620px;
    margin: 20px;
}


.list-siyou {
    width: 920px;
    margin: 0 auto;
}
    .list-siyou li {
        margin: 5px 10px;
        display: flex;
        float: left;
    }

.list-siyou_label {
    width: 90px;
    display: block;
    background: #898989;
    margin-right: 5px;
    padding: 5px 10px;
    color: var(--color-white);
    text-align: center;
    font-size: var(--font-size-small-1);
}
.list-siyou_data {
    width: 190px;
    display: block;
    background: #E6E6E6;
    padding: 5px 10px;
    font-size: var(--font-size-small-1);
}

.list-hoshou {
    display: flex;
    justify-content: center;
    text-align: center;
}
    .list-hoshou li {
        width: auto;
        background: #898989;
        margin: 0 10px;
        padding: 10px 30px;
        color: var(--color-white);
        font-size: var(--font-size-middle-2);
        font-weight: bold;
    }


.title-interview {
    font-size: var(--font-size-big-2);
    font-weight: normal;
    margin-bottom: 5px;
}
.title-interview_sub {
    font-size: var(--font-size-middle-1);
}

.wrap-interview {
    margin-bottom: 100px;
}
    .wrap-interview iframe {
        margin: 0 auto;
        display: block;
    }

.box-interview {
    margin: 20px auto;
    padding: 20px 0;
}
.box-interview_inner_img {
    width: 300px;
    display: block;
    float: left;
}
    .box-interview_inner_img img { width: 100%; }

.box-interview_inner {
    margin-left: 330px;
}
    .box-interview_inner h3 {
        font-size: var(--font-size-middle-3);
        font-weight: normal;
        margin-bottom: 20px;
        border-left: 5px solid var(--color-black);
        padding-left: 10px;
    }
    .box-interview_inner p {
        margin-bottom: 40px;
    }
        .box-interview_inner p:last-child {
            margin-bottom: 20px;
        }

hr.hr-border_blk_1 {
    border: 1px solid var(--color-black);
    margin-top: 20px;
}

.box-menseki {
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.madori {
    margin-right: 20px;
    padding: 2px 5px;
    border: 3px solid var(--color-black);
    font-size: 22px;
    font-weight: bold;
}

.cut-m_100 {
    width: 100%;
    display: block;
    margin: 100px auto;
}

.wrap-contents-yt {
    margin-top: 50px;
}
.contents-yt {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
}

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

    .list-siyou {
        width: 610px;
        margin: 0 auto;
    }
    .list-siyou li {
        margin: 5px 10px;
        display: flex;
        float: left;
    }

    .list-siyou_label {
        width: 90px;
        display: block;
        background: #898989;
        margin-right: 5px;
        padding: 5px 10px;
        color: var(--color-white);
        text-align: center;
        font-size: var(--font-size-small-1);
    }
    .list-siyou_data {
        width: 190px;
        display: block;
        background: #E6E6E6;
        padding: 5px 10px;
        font-size: var(--font-size-small-1);
    }

    .box-img_2f img {
        width: 420px;
        margin: 20px auto;
    }
.box-img_hiraya img {
        width: 620px;
        margin: 20px auto;
    }

    .box-interview_inner_img {
        width: 100%;
        display: flex;
        justify-content: left;
        margin-bottom: 30px;
        float: none;
    }
        .box-interview_inner_img img {
            width: 300px;
            margin-right: 10px;
        }
    .box-interview_inner {
        width: 100%;
        margin: 0;
    }

    .contents-yt {
        display: block;
        margin: 0;
    }

}

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

    .navToggle span {
        border-bottom: solid 3px var(--color-black);
    }
        .global-nav ul li a {
            color: var(--color-white);
        }

    .title-ch_plan::before,
    .title-ch_plan::after {
        width: 18%;
    }

    .cut_area-hanauta {
        margin-top: 50px;
        padding: 0;
        display: block;
    }
        .cut_area-hanauta img {
            width: 100%;
            margin: 0;
        }


    .box-img_2f {
        margin: 50px auto;
    }
        .box-img_2f img {
            width: 620px;    
            margin: 0 auto;    
        }

        .list-siyou_label {
            width: 90px;
            display: block;
            background: #898989;
            margin-right: 5px;
            padding: 5px 10px;
            color: var(--color-white);
            text-align: center;
            font-size: var(--font-size-small-1);
        }
        .list-siyou_data {
            width: 190px;
            display: block;
            background: #E6E6E6;
            padding: 5px 10px;
            font-size: var(--font-size-small-1);
        }

    .list-hoshou li {
        font-size: var(--font-size-middle-1);
    }

    .wrap-contents-yt {
        display: none;
    }

}

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

    .title-ch_plan {
        font-size: var(--font-size-big-1);
    }

    .title-ch_plan::before,
    .title-ch_plan::after {
        width: 18%;
    }

    .wrap-page-ch {
        width: 100%;
        padding: 40px 0;
        margin: 0 auto 20px auto;
    }
    
        .wrap-page-ch article {
            text-align: left;
        }
        .wrap-page-ch article img {
            display: block;
            margin: 0 auto 40px auto;
        }
        .wrap-page-ch article h2 {
            margin-bottom: 20px;
        }

        .cut-m_100 {
            margin: 50px 0;
        }

    .box-img_2f img,
    .box-img_hiraya img {
        width: 100%;
    }

    .wrap-interview {
        margin: 0 0 50px 0;
        padding: 0;
    }
    .wrap-interview iframe {
        width: 100%;
    }

    .box-interview_inner_img {
        width: 100%;
        display: block;
        margin-bottom: 40px;
    }
        .box-interview_inner_img img {
            margin: 0;
        }

    .list-siyou {
        margin: 0;
    }
    .list-hoshou li {
        padding: 10px 20px;
    }

}

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

    .img-hh_title {
        width: 320px;
    }

    .title-ch_plan::before,
    .title-ch_plan::after {
        width: 12%;
    }

    .title-contents_ch {
        margin: 0;
    }
        .title-contents_ch h2 {
            font-size: var(--font-size-big-1);
        }

    .list-siyou {
        width: 375px;
        margin: 0 auto;
    }
        .list-siyou li {
            margin: 5px 10px;
            display: flex;
            float: left;
        }
            .list-siyou_label {
                width: 110px;
                font-size: var(--font-size-normal);
            }
            .list-siyou_data {
                width: 240px;
                font-size: var(--font-size-normal);
            }

    .list-hoshou {
        display: block;
    }
    .list-hoshou li {
        width: 180px;
        display: inline-block;
        font-size: var(--font-size-middle-2);
        margin-bottom: 15px;
    }

    .box-interview_inner_img img {
        width: 100%;
    }

    .title-interview {
        font-size: var(--font-size-big-1);
        font-weight: bold;
    }

}

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

    .title-ch_plan::before,
    .title-ch_plan::after {
        width: 8%;
    }

    .list-hoshou li {
        width: 90%;
        margin: 0 0 15px 0;
    }

}

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

    .list-siyou {
        width: 100%;
        margin: 0;
    }
        .list-siyou li {
            margin: 5px 0;
            display: flex;
            float: left;
        }
            .list-siyou_label {
                width: 110px;
                font-size: var(--font-size-normal);
            }
            .list-siyou_data {
                width: 240px;
                font-size: var(--font-size-normal);
            }


    .title-interview {
        font-size: var(--font-size-middle-3);
        font-weight: bold;
        margin-bottom: 5px;
    }
    .title-interview_sub {
        font-size: var(--font-size-normal);
    }

}