@charset "UTF-8";

/* 汎用プロパティ */
body {
    font-family: "Montserrat", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Verdana", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #f5f5f5;
    background-color: #0B0B0B;
}

section {
    margin: 0 1rem;
}

.section_catch {
    margin-top: 8rem;
    font-size: 24px;
    line-height: 1.75;
}

.section_twitter {
    margin-top: 10rem;
}

.section_twitter h2 {
    margin-bottom: 1rem;
}

.section_setup {
    margin-bottom: 10rem;
}

.section_setup dt {
    font-size: 18px;
}

.section_setup a {
    color: #00ACE8;
}

.slick-slide {
    width: 100vw;
    min-height: 500px;
    max-height: 700px;
}

.slick-list {
    max-width: initial;
}

.slick-num,
.slick-num-top {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.slick-arrow {
    width: 30px;
}

.prev-arrow {
    position: absolute;
    left: 30%;
    bottom: 0.5rem;
    z-index: 999;
    top: auto;
}

.next-arrow {
    position: absolute;
    right: 30%;
    bottom: 0.5rem;
    z-index: 999;
    top: auto;
}

.wrap_feature .slick-arrow {
    bottom: -2rem;
}


.row_footer {
    padding-left: 1rem;
}

.fv_feature {
    position: relative;
}

.fv_product {
    margin-bottom: 4rem;
}

.nav_govee .navbar {
    background-color: #0B0B0B;
}

.nav_govee a {
    color: #f5f5f5;
}

.wrap_fv {
    position: relative;
}

.wrap_contact {
    max-width: 1440px;
    margin: auto;
    padding: 0 1rem;
}

.wrap_fv_logotxt {
    position: absolute;
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    font-size: 32px;
    z-index: 10;
}

.wrap_fv_feature {
    position: relative;
    text-align: right;
    background: url(../cocoon-child-custom2/assets/images/govee/bg_feature.webp);
    background-size: 100% 85%;
    background-repeat: no-repeat;
    background-position: top right;
    margin-bottom: 12rem;
}

.wrap_fv_shop {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    background: linear-gradient(130deg, #06E6FA 0%, #E20EFF 35%,#FB7F86 65%, #FAC03D 100%);
    background-repeat: no-repeat;
    background-position: top right;
    margin-bottom: 2rem;
    min-height: 225px;
}

.wrap_catch_cam {
    max-width: 800px;
    margin-bottom: 2rem;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
}

.wrap_item_cam .col-md-4 {
    margin-bottom: 3rem;
}

.wrap_img_feature {
    position: relative;
}

.wrap_lineup {
    margin-top: 10rem;
}

.wrap_title_item {
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.wrap_title_item::before {
    content: ' — ';
    color: #00ACE8;
}

.wrap_3feature {
    margin-top: 10rem;
}

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

.h1_item_product {
    font-size: 32px;
    line-height: 1.25;
}

.h1_feature {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
}

.h1_notes {
    display: block;
    margin-bottom: 1rem;
    font-size: 24px;
}

.h2_setup {
    position: relative;
    margin-bottom: 2rem;
    padding: 10px 0;
    line-height: 1.25;
    border-bottom: 3px solid #fff;
}

.h2_setup::before {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 20%;
    height: 3px;
    content: '';
    background: #00ACE8;
}

.h2_spec {
    margin: 10rem 0 3rem 0;
    font-size: 52px;
    font-weight: 700;
}

.h2_3feature {
    position: absolute;
    bottom: -2rem;
    right: 0;
    z-index: 10;
    text-align: right;
    font-size: 42px;
}

.h2_feature_product {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.btn_common {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 210px;
    height: 65px;
    padding: 1rem 2rem;
    color: #F5F5F5;
    background-color: rgba(0, 0, 0, 0.7);
    border: solid 5px #F5F5F5;
}

.btn_common:hover {
    color: #f5f5f5;
    background-color: rgba(255, 255, 255, 0.7);
}

.btn_feature {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

.btn_lineup {
    margin-left: auto;
}

.btn_more {
    display: block;
    color: #ffffff;
    text-align: center;
    border: solid 2px #ffffff;
    border-image: linear-gradient(130deg, #06E6FA 0%, #E20EFF 35%,#FB7F86 65%, #FAC03D 100%);
    border-image-slice: 1;
    width: 250px;
    margin: 1.5rem auto;
    padding: 0.5rem 0;
}

.btn_govee_official {
    display: block;
    width: 300px;
    margin: auto;
    margin-top: 1rem;
    padding: 0.75rem;
    color: #ffffff;
    background: #00ACE8;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

a.btn_govee_official:hover {
    color: #ffffff;
    opacity: 0.8;
}

.logo_item_product {
    display: block;
    height: 60px;
    margin-bottom: 0.5rem;
}

.img_logo_top {
    display: block;
    height: 46px;
    margin: auto;
}

.img_top_slide {
    height: auto;
    min-height: 500px;
    object-fit: cover;
}

.img_top_slide.pannel_light,
.img_top_slide.ribbon_light {
    object-position: right;
}

.img_feature {
    position: relative;
    max-width: 330px;
    max-height: 330px;
    margin-top: 1rem;
}

.img_logo_feature {
    width: 345px;
    height: auto;
    margin-bottom: 5rem;
    padding-top: 3rem;
}

.img_fv_feature {
    z-index: -10;
    opacity: 0.5;
    position: absolute;
    bottom: -10rem;
    left: 0;
}

.img_3feature {
    position: relative;
    max-width: 550px;
}

.img_spec_list {
    display: none;
}

.img_product_top.pannel_light {
    object-position: top right;
}

.img_pop {
    text-align: center;
}

.img_pop img {
    max-width: 500px;
}

.img_cam_item {
    display: block;
    width: 250px;
    margin: auto;
}

.txt_yellow {
    color: #E6AE01;
}

.txt_center {
    text-align: center;
}

.txt_notes {
    margin-top: 1.5rem;
    line-height: 1.5;
}

.txt_title_item {
    display: block;
    font-size: 30px;
    font-weight: 700;
}

.txt_small_h1 {
    font-size: 20px;
}

.txt_subtitle_item {
    font-size: 22px;
}

.txt_model_price {
    display: block;
    line-height: 1.25rem;
    margin: 1.5rem 0 2.5rem 0;
}

.txt_lineup_comment {
    display: none;
}

.txt_catch_feature {
    font-size: 24px;
    font-weight: 700;
    line-height: 2;
    margin-bottom: 1rem;
}

.txt_3feature {
    text-align: right;
    margin-top: 3.5rem;
}

.txt_feature_product {
    margin-top: 2rem;
}

.txt_pink {
    color: #FB56AD;
}

.txt_name_cam_item {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.txt_cam_price {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 18px;
    font-weight: 700;
}

.catch_item_product {
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 28px;
    font-weight: 700;
}

.num_3feature {
    position: absolute;
    left: 0;
    top: -45px;
    font-size: 52px;
    z-index: 10;
}

.num_feature_top {
    font-size: 34px;
}

.num_feature_product {
    display: block;
    font-size: 34px;
}

small {
    font-size: 0.9rem;
    font-weight: 100;
}

.li_feature {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.dl_spec {
    font-size: 22px;
    line-height: 2;
}

.dl_spec dt {
    padding-top: 1rem;
}

.dl_spec dd {
    border-bottom: solid 1px #f5f5f5;
    padding-bottom: 1rem;
    text-indent: 1rem;
}

.dl_setup dt {
    margin-top: 5rem;
}

.dl_setup dd {
    margin-top: 1rem;
}

.ul_setup li {
    margin-bottom: 1.5rem;
}

.ul_shop_cam {
    margin-top: 5rem;
}

.ul_shop_cam li {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #F5F5F5;
}

.ul_shop_cam li::before {
    content: ' — ';
    color: #00ACE8;
}

.inner_ul_setup {
    font-size: 14px;
    margin: 2rem 0 2rem 1rem;
}

.wrap_title_item a:hover {
    color: #00ACE8;
}

a:hover {
    color: #00ACE8;
}

.answer_su.collaspe:not(.show) {
    display: none;
}

.a_link_shopbanner {
    display: flex;
    width: 48%;
    height: 100px;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.a_link_shopbanner img {
    max-height: 90%;
    max-width: 90%;
    width: auto;
}

.a_link_shopbanner.black {
    background-color: #0B0B0B;
}

.a_link_shopbanner.txt {
    font-size: 24;
    font-weight: 700;
}

.a_home {
    max-width: 1440px;
    margin: auto;
    padding: 1rem;
}

.a_home svg {
    fill: #ffffff;
    padding-right: 0.5rem;
}

.a_home a {
    display: flex;
    align-items: flex-end;
    color: #ffffff;
}

.footer {
    padding-right: 0;
    padding-left: 0;
}

.footer_govee {
    background-color: #0B0B0B;
    color: #f5f5f5;
    max-width: 1140px;
}

.footer_govee a {
    color: #f5f5f5;
}


/*767px以下*/
@media screen and (max-width: 767px) {

    /*アクティブクラスがついたら位置を0に*/
    #nav.panelactive {
        right: 0;
    }

    #nav {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: 0;
        right: -120%;
        width: 100%;
        height: 100vh;
        /*ナビの高さ*/
        background: #999;
        /*動き*/
        transition: all 0.6s;
    }

    /*ナビゲーション*/
    #nav {
        background-color: #f5f5f7;
    }

    #nav a {
        color: #222222;
    }

    #nav .ul_nav {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
    }

    .nav_item>a {
        display: block;
        line-height: 5;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn1 {
        position: absolute;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

    /*×に変化*/
    .openbtn1 span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        width: 45%;
    }

    .openbtn1 span:nth-of-type(1) {
        top: 15px;
    }

    .openbtn1 span:nth-of-type(2) {
        top: 23px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 31px;
    }

    .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn1.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn1.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    .fv_product img {
        height: 500px;
        object-fit: cover;
    }

    .wrap_feature_product {
        margin-top: 5rem;
    }

    .img_feature {
        margin-left: auto;
        margin-right: auto;
    }

    .slick-slide div .txt_li_feature {
        max-width: 330px;
        height: auto;
        margin: auto;
    }

    .li_feature {}
}


/*768px以上*/
@media screen and (min-width: 768px) {
    section {
        padding: 0 1rem;
    }

    .br_sp {
        display: none;
    }

    .fv_product img {
        width: 100%;
        max-height: 750px;
        object-fit: cover;
    }

    .fv_product {
        margin-bottom: 6rem;
    }

    .section_feature_product {
        margin-top: 5rem;
    }

    .slick-slide img {
        width: 100%;
    }

    .row_feature_product {
        justify-content: space-evenly;
    }

    .h1_fv {
        position: absolute;
        font-size: 38px;
    }

    .h2_spec {
        font-size: 64px;
    }

    .h2_3feature {
        position: absolute;
        top: -2.5rem;
        left: 5.5rem;
        right: auto;
        bottom: auto;
        font-size: 52px;
    }

    .wrap_catch_cam {
        padding: 0;
    }

    .ul_nav {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .has_child:hover .ul_dropdown,
    .has_child:active .ul_dropdown {
        visibility: visible;
        opacity: 1;
    }

    .ul_dropdown {
        /*絶対配置で位置を指定*/
        position: absolute;
        left: 0;
        top: 62px;
        z-index: 4;
        /*形状を指定*/
        background: rgba(255, 255, 255, 0.9);
        /*はじめは非表示*/
        visibility: hidden;
        opacity: 0;
        /*アニメーション設定*/
        transition: all .3s;
    }

    .ul_dropdown a.nav-link {
        color: #222222;
        border-bottom: solid 1px rgba(255, 255, 255, 0.9);
    }

    .ul_dropdown a.nav-link:hover {
        color: #222222;
        border-bottom: solid 1px #222222;
    }

    .ul_nav a {
        border-bottom: solid 2px #0B0B0B;
    }

    .ul_nav a:hover {
        color: f5f5f5;
        border-bottom: solid 2px #f5f5f5;
    }

    .nav_item {
        padding: 0 0.5rem;
    }

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

    .row_footer {
        display: flex;
        justify-content: space-between;
        padding: 0 1rem;
    }

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

    .wrap_lineup {
        display: flex;
    }

    .wrap_fv_logotxt {
        text-align: left;
        margin-left: 3rem;
    }

    .wrap_lineup_txt {
        order: -1;
        flex-grow: 1;
        margin-right: 3rem;
    }

    .wrap_title_item {
        margin-top: 0;
    }

    .wrap_3feature {
        display: flex;
    }

    .wrap_feature_product {
        width: 30%;
        max-width: 400px;
    }

    .img_logo_top {
        display: inline-flex;
        padding: 0 1.5rem;
    }

    .img_top_slide {
        height: auto;
    }

    .img_feature {
        max-width: 250px;
        max-height: 250px;
    }

    .img_fv_feature {
        width: 450px;
        bottom: -3rem;
        opacity: 1;
    }

    .img_lineup_top {
        width: 350px;
    }

    .img_3feature {
        width: 350px;
    }

    .logo_item_product {
        height: 100px;
        margin-right: 1rem;
    }

    .txt_title_item {
        font-size: 32px;
        font-weight: 700;
    }

    .txt_3feature {
        text-align: left;
        margin-left: 2rem;
    }

    .num_3feature {
        position: absolute;
        top: -2.75rem;
        left: 0;
        font-size: 58px;
    }

    .dl_spec {
        display: flex;
        flex-wrap: wrap;
        line-height: 1.5;
    }

    .dl_spec dt,
    .dl_spec dd {
        border-bottom: solid 1px #f5f5f5;
        margin: 0;
        padding: 1.5rem 0;
        text-indent: 0;
    }

    .dl_spec dt {
        width: 35%;
    }

    .dl_spec dd {
        width: 65%;
    }

    .dl_setup dt {
        font-size: 22px;
    }
}


/*1200px以上*/
@media screen and (min-width: 1200px) {
    section {
        max-width: 1440px;
        margin: auto;
    }

    .slick-slide {
        height: 750px;
    }

    .prev-arrow {
        left: 40%;
    }

    .next-arrow {
        right: 40%;
    }

    .row_feature_product {
        justify-content: space-evenly;
    }

    .nav_item {
        padding: 0 2rem;
    }

    .h1_item_product {
        display: flex;
        align-items: end;
        font-size: 48px;
    }

    .h1_feature {
        font-size: 62px;
    }

    .catch_item_product {
        font-size: 32px;
    }

    .fv_feature {
        max-width: 1440px;
        margin: auto;
        padding-bottom: 2rem;
    }

    .wrap_fv_logotxt {
        position: relative;
        max-width: 1440px;
        text-align: left;
        margin: auto;
        margin-bottom: 1.5rem;
    }

    .wrap_fv_feature {
        background-size: cover;
    }

    .wrap_spec_list {
        display: flex;
    }

    .wrap_feature_product {
        width: 33%;
        max-width: 400px;
    }

    .br_tab {
        display: none;
    }

    .img_logo_top {
        margin-right: auto;
    }

    .img_top_slide {
        max-height: 750px;
        width: 100%;
        object-position: 0 80%;
    }

    .img_top_slide.barlight,
    .img_top_slide.synchroribbon {
        object-position: center;
    }

    .img_top_slide.pannel_light {
        object-position: top;
    }

    .img_feature {
        max-width: 420px;
        max-height: 420px;
    }

    .img_lineup_top {
        width: 700px;
    }

    .img_fv_feature {
        bottom: -5rem;
    }

    .img_3feature {
        width: 600px;
        max-width: 600px;
    }

    .img_spec_list {
        display: block;
        width: 500px;
        height: 500px;
    }

    .img_govee_cam_main {
        display: block;
        max-width: 800px;
        margin: auto;
        margin-bottom: 2rem;
    }

    .txt_title_item {
        font-size: 48px;
        font-weight: 700;
    }

    .txt_small_h1 {
        font-size: 28px;
    }

    .txt_subtitle_item {
        font-size: 22px;
    }

    .txt_lineup_comment {
        display: block;
    }

    .txt_3feature {
        font-size: 24px;
    }

    .txt_price {
        font-size: 22px;
    }

    .btn_common {
        width: 250px;
    }

    .dl_spec {
        flex-grow: 1;
        margin-right: 8rem;
    }

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

    .ul_shop_cam li {
        width: 45%;
    }

    .a_link_shopbanner {
        width: 30%;
        height: 150px;
        margin-bottom: 4rem;
    }

    .a_link_shopbanner.txt {
        font-size: 40px;
    }
}