@charset "UTF-8";

/* 基本設定 */

body {
    color: #555;
    font-family: 'Josefin Sans', 'Noto Sans jp', sans-serif;
}

ul,
li {
    list-style: none;
}

.container {
    display: flex;
    justify-content: center;
}

.view_more {
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #555;
    padding: 11px 40px 8px 15px;
    text-align: left;
    position: relative;
}

.view_more::after {
    content: "";
    background-image: url(../images/icon/arrow.png);
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-25%);
    background-size: contain;
}

.btn {
    display: flex;
    justify-content: flex-end;
}


/* ヘッダー */

.header {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ハンバーガーボタンの色 */
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    background: #555;
}

/* ハンバーガーメニューリストの色 */
.drawer-brand,
.drawer-menu-item {
    color: #555;
}

h1 {
    font-size: 20px;
    display: inline-block;
}

.pc_nav,
.pc_cart {
    display: none;
}


/* メインビジュアル */

.main_img {
    display: flex;
    justify-content: center;
    background-image: url(../images/smart/main_img_s.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 460px;
}


/* アバウトアス */

.about {
    width: 336px;
    padding: 50px 0;
}

h2 {
    font-size: 14px;
    padding-bottom: 40px;
}

.about_txt p {
    font-size: 12px;
    padding-bottom: 30px;
    letter-spacing: 0.05em;
    line-height: 2;
}

.about_smart_img {
    padding: 10px 0 40px;
}

.about_pc_img {
    display: none;
}


/* プロダクト */

.container_products {
    display: flex;
    justify-content: center;
    color: #fff;
    background-color: #468161;
}

.products {
    padding: 50px 0;
}

.products li {
    padding-bottom: 30px;
}

.products p {
    font-size: 12px;
    padding: 0 0 10px 10px;
}

.products img {
    width: 336px;
    padding-bottom: 10px;
}

.products .view_more {
    border: 1px solid #fff;
}

.products .view_more::after {
    background-image: url(../images/icon/arrow_white.png);
}


/* インスタ */

.insta {
    width: 336px;
    padding: 50px 0 30px;
}

.insta_box img {
    height: 168px;
    width: 168px;
}

.insta_box {
    display: grid;
    grid-template-columns: 168px 168px;
    padding-bottom: 40px;
}


/* インフォメーション */

.info {
    width: 336px;
    padding: 30px 0 60px;
}

.info li {
    padding: 26px 33px;
    border-top: 1px solid;
}

.info ul {
    border-bottom: 1px solid;
    margin-bottom: 40px;
}

.info p {
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 2;
}

span {
    font-size: 10px;
}


/* GO SHOPPING */

.container_go {
    height: 450px;
    background-image: url(../images/smart/go_shopping_s.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.go_shopping .btn {
    display: flex;
    justify-content: center;
}

.go_btn {
    position: absolute;
    top: 70px;
    color: #ffffff;
    font-size: 18px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    padding: 22px 53px 16px 20px;
    text-align: left;
    position: relative;
}

.go_btn::after {
    content: "";
    background-image: url(../images/icon/arrow_white.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-25%);
    background-size: contain;
}


/* フッター */

.container_footer {
    display: flex;
    justify-content: center;
}

.footer_top {
    width: 336px;
    padding-bottom: 60px;
    border-bottom: 1px solid;
}

.footer_kanata {
    font-size: 20px;
    margin-top: 60px;
    text-align: center;
    padding-bottom: 50px;
}

.nav_footer {
    padding-bottom: 40px;
}

.nav_footer p {
    text-align: center;
    font-size: 14px;
    padding-bottom: 14px;
}

.sns p {
    font-size: 14px;
    padding-bottom: 20px;
    text-align: center;
}

.sns ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding-bottom: 50px;
}

.sns li {
    display: inline-block;
}

.fa-brands {
    font-size: 40px;
}

.btn_contact {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}

.contact_btn {
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #555;
    padding: 9px 35px 8px 15px;
    text-align: left;
    position: relative;
}

.contact_btn::after {
    content: "";
    background-image: url(../images/icon/arrow.png);
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-25%);
    background-size: contain;
}

.company p {
    font-size: 14px;
    padding-bottom: 20px;
    text-align: center;
}

.address {
    display: flex;
    justify-content: center;
}

address {
    font-family: noto sans jp, sans-serif;
    font-size: 12px;
    width: 152px;
    letter-spacing: 0.05em;
    line-height: 2;
}

.copy {
    text-align: center;
    padding: 50px 0;
}

.copy p {
    font-size: 10px;
}



/* メディアクエリ ------------------------------------------------ */

@media screen and (min-width:750px) {

    /* メインビジュアル */

    .main_img {
        background-image: url(../images/smart/main_tab_img.jpg);
        height: 500px;
    }


    /* アバウト */

    .about {
        width: 680px;
    }

    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .about_txt {
        padding-top: 30px;
    }

    .about_txt p {
        padding-bottom: 20px;
    }

    .about_smart_img {
        padding: 0 0 40px;
    }

    .about_pc_img {
        display: none;
    }


    /* プロダクト */

    .products ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .products {
        width: 680px;
    }

    .products li {
        display: inline-block;
    }


    /* インスタ */

    .insta {
        width: 699px;
    }

    .insta_box img {
        height: 233px;
        width: 233px;
    }

    .insta_box {
        grid-template-columns: 233px 233px 233px;
    }


    /* GO SHOPPING */

    .container_go {
        height: 500px;
        background-image: url(../images/smart/go_shopping_tab.jpg);

    }


    /* インフォメーション */
    .info {
        width: 680px;
    }


    /* フッター */
    .footer_top {
        width: 680px;
    }

    .wrap_footer {
        display: flex;
        justify-content: space-between;
        width: 600px;
        margin: 0 auto;
    }

    .nav_footer {
        width: 150px;
        padding-bottom: 0;
    }

    .nav_footer p {
        text-align: left;
        padding-bottom: 1em;
    }

    .sns ul {
        gap: 25px;
        padding-bottom: 40px;
    }

    .btn_contact {
        padding-bottom: 0;
    }

    .company p {
        padding-bottom: 20px;
        text-align: left;
    }

    .address {
        display: block;
    }

    address {
        width: 150px;
    }

}



@media screen and (min-width:1200px) {

    /* ボタン */
    .view_more {
        font-size: 18px;
        width: 185px;
        height: 45px;
        padding: 14px 16px;
    }

    .view_more::after {
        width: 18px;
        height: 18px;
    }


    /* ヘッダー */

    .ham {
        display: none;
    }

    .pc_nav {
        display: block;
        flex: auto;
    }

    .pc_nav li {
        padding-left: 40px;
        font-size: 14px;
    }

    .pc_nav ul {
        display: flex;
        margin-left: 20px;
    }

    .pc_cart {
        display: block;
    }

    .pc_cart li {
        font-size: 13px;
        padding-right: 30px;
        display: flex;
        align-items: center;
    }

    .cart {
        width: 35px;
        padding-left: 10px;
        align-items: center;
    }

    .fa-solid {
        font-size: 25px;
        padding-left: 10px;
        align-items: center;
    }

    .pc_cart ul {
        display: flex;
        margin-right: 30px;
    }

    header {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
    }

    .header {
        height: 100px;
        display: flex;
        align-items: center;
        position: relative;
    }


    h1 {
        font-size: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
    }


    /* メインビジュアル */

    .main_img {
        background-image: url(../images/pc/main_img.jpg);
        height: 700px;
        position: relative;
    }

    .main_img::after {
        position: absolute;
        content: "";
        background-image: url(../images/icon/arrow_main.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 53px;
        top: 101%;
        left: 50%;
        transform: translate(-25%, -50%);
    }

    /* アバウトアス */

    .about {
        width: 904px;
        padding: 80px 0;
    }

    h2 {
        font-size: 18px;
        padding-bottom: 40px;
    }

    .wrap {
        padding-bottom: 40px;
    }

    .about_txt {
        padding-top: 30px;
    }

    .about_txt p {
        font-size: 14px;
        padding-bottom: 30px;
    }

    .about_smart_img {
        display: none;
    }

    .about_pc_img {
        display: flex;
        width: 500px;
        height: 300px;
    }


    /* プロダクト */

    .products {
        width: 904px;
        padding: 80px 0;
    }

    .products li {
        padding-bottom: 0;
        padding-bottom: 40px;
    }

    .products p {
        font-size: 14px;
        padding: 15px 0 0px 15px;
    }

    .products img {
        width: 443px;
        padding-bottom: 0;
    }


    /* インスタ */

    .insta {
        width: 1088px;
        padding: 80px 0 50px;
    }

    .insta_box img {
        height: 363px;
        width: 363px;
    }

    .insta_box {
        grid-template-columns: 363px 363px 363px;
        padding-bottom: 40px;
    }


    /* インフォメーション */

    .info {
        width: 904px;
        padding: 50px 0 100px;
    }

    .info li {
        padding: 33px 60px;
    }

    .info ul {
        margin-bottom: 40px;
    }

    .info p {
        font-size: 14px;
    }

    span {
        font-size: 12px;
    }


    /* GO SHOPPING */

    .container_go {
        height: 500px;
        background-image: url(../images/pc/go_shopping.jpg);
        position: relative;
    }

    .go_btn {
        position: absolute;
        top: 220px;
        left: 15%;
    }


    /* フッター */

    .footer_top {
        width: 1088px;
        padding-bottom: 70px;
    }

    .footer_kanata {
        font-size: 40px;
        margin-top: 100px;
        padding-bottom: 70px;
    }

    .wrap_footer {
        width: 848px;
    }

    .nav_footer {
        width: 182px;
    }

    .nav_footer p {
        font-size: 20px;
    }

    .sns p {
        font-size: 20px;
        padding-bottom: 30px;
    }

    .sns ul {
        gap: 30px;
    }

    .fa-brands {
        font-size: 30px;
    }

    .btn_contact {
        padding-bottom: 0;
    }

    .contact_btn {
        font-size: 18px;
        width: 160px;
        height: 45px;
        padding: 14px 20px;
    }

    .contact_btn::after {
        width: 18px;
        height: 18px;
        right: 20px;
    }

    .company p {
        font-size: 20px;
        padding-bottom: 20px;
    }

    address {
        font-size: 14px;
        width: 182px;
    }

    .copy {
        padding: 60px 0;
    }

    .copy p {
        font-size: 12px;
    }

}