/* ============================================== */
/*                    共通設定                    */
/* ============================================== */
/* *,
*::before,
*::after {
    outline: 1px solid red;
} */
@media screen and (max-width:800px) {
.inner{padding: 0 5%;}
a[href*=tel]{pointer-events: auto;}
}

@media screen and (max-width:800px) {
    .pc_cont{display: none !important;}
    .sp_cont{display: block !important;}
    /* =========== /max-width:800px =========== */
}

/* ============================================== */
/*              ハンバーガーメニュー              */
/* ============================================== */
.u1300_1200_800{display: none;}
@media screen and (min-width:1200px) and (max-width:1250px) {.u1300_1200_800{display: block;}}
@media screen and (max-width:800px) {
    .u1300_1200_800{display: block;}
    /* =========== /max-width:800px =========== */
}
.u1200{display: none;}
@media screen and (max-width:1200px) {
    .u1200{display: block;}
    .ham {
        position: fixed;
        z-index: 10;
        inset: 33px calc(5% + 10px) auto auto;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gradient_headerBtn);
        transition: .3s;
        cursor: pointer;
    }

    .ham span,
    .ham::before,
    .ham::after{
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0;
        display: block;
        width: 16px;
        height: 1px;
        border-radius: 1px;
        background: #fff;
        transition: .3s;
    }
    .ham::before,
    .ham::after{content: '';}
    .ham::before{top: calc(50% - 5px);}
    .ham::after{top: calc(50% + 5px);}
    
    .ham.open span{opacity: 0;}
    .ham.open::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .ham.open::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* ナビゲーション */
    .ham + nav{
        position: fixed;
        inset: 0 0 auto auto;
        transition: .3s;
        background: rgba(255, 255, 255, .95);
        height: 100lvh;
        padding: 100px 50px 70px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(50%);
        transition: .3s;
    }
    .ham + nav ul.pc_cont{display: none !important;}
    .ham + nav ul.sp_cont{
        display: block !important;
        flex-direction: column;
        margin: 0 0 2em;
    }
    .ham + nav ul li{
        position: relative;
        z-index: 0;
        margin: 0 0 0.8em;
        padding: 0 0 0 .8em;
    }
    .ham + nav ul li::before{
        position: absolute;
        z-index: 0;
        inset: .8em auto auto 0;
        content: '';
        width: 5px;
        height: 2px;
        background: var(--main_ppl);
    }

    .ham + nav ul li a{
        color: var(--main_ppl);
        font-size: 20px;
    }
    .ham.open + nav{
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .ham + nav .offices .fc_blue,
    .ham + nav .offices address{font-size: 12px;}
    .ham + nav .offices div > p:nth-of-type(2),
    .ham + nav .offices div > p:nth-of-type(2) a{font-size: 18px;}
    .ham + nav .offices address,
    .ham + nav .offices div > p:nth-of-type(2),
    .ham + nav .offices div > p:nth-of-type(2) a{font-weight: 300;}
    .ham + nav .offices div:nth-of-type(1){margin: 0 0 1em;}
}
@media screen and (max-width:1200px) and (min-width:801px) {
    .ham{
        inset: 73px calc(5% + 20px) auto auto;
        width: 60px;
        height: 60px;
    }
    .ham + nav{padding: 200px 80px 70px 80px;}
}

/* ============================================== */
/* ヘッダー */
/* ============================================== */
@media screen and (max-width:800px) {
    header{
        top: 25px;
        width: 90%;
        padding: 15px 50px 15px 20px;
    }
    header > div:nth-of-type(1) p:nth-of-type(1){max-width: 74px;}
    header > div:nth-of-type(1) p:nth-of-type(2){font-size: 10px;}
}


/* ============================================== */
/*                 キービジュアル                 */
/* ============================================== */
@media screen and (max-width:1550px) and (min-width:801px) {
    .kv section {width: 45%;}
    .kv section h1{font-size: clamp(47px, 5.35vw, 82px);}
    .kv section h1 > span:nth-of-type(1){font-size: clamp(22px, 2vw, 30px);}
    .kv section h1 > span > span{font-size: clamp(25px, 2.28vw, 35px);}
    .kv section p:nth-of-type(1){font-size: clamp(23px, 2.1vw, 32px);}
    .kv section p:nth-of-type(2){font-size: clamp(13px, 1.18vw, 18px);}
    .kv section h1 > span .bg_ppl{margin: 0 .2em 0.3em;}
    .kv::before{width: clamp(350px, 34vw, 520px);}
}
@media screen and (max-width:1140px) and (min-width:801px) {
    .kv{padding-bottom: 240px;}
    .kv::before{bottom: -150px;}
    .kv > .btn{bottom: 180px;}
}
@media screen and (max-width:800px) {
    .kv{padding: 100px 0 max(150px, 14vw);}
    .kv > .flex{flex-direction: column;}
    .kv section,
    .kv figure{
        width: 100%;
        transition-delay: .6s;
    }
    
    .kv section{
        margin: 0 auto;
        padding: 0 4%;
    }
    .kv section h1{margin: 0 auto 10px;}
    .kv section h1 > span > span{
        font-size: 19px;
        border-radius: 3px;
        padding: .05em .2em .1em;
    }
    .kv section h1 > span:nth-of-type(1){font-size: 18px;}
    .kv section h1{font-size: 45px;}
    .kv section p:nth-of-type(1){
        font-size: 18px;
        line-height: 1.6;
        font-feature-settings: "palt";
    }
    .kv::before{
        max-width: 270px;
        bottom: -180px;
    }
}

/* ============================================== */
/* 共通パーツ */
/* ============================================== */
@media screen and (max-width:900px) and (min-width:801px) {
    .list_card.card_b li .btn a, .list_card.card_c li .btn a{padding: .7em 3.6em .8em 1.8em;}
}
@media screen and (max-width:800px) {
    /* ボタン */
    .btn a{
        padding: 0.5em 4em 0.6em 1.8em;
        font-size: 15px;
    }

    /* コンタクトボタン */
    .btn.btn_contact a{
        padding: 0.6em 4em 0.7em 1.8em;
        font-size: 16px;
    }
    .btn.btn_contact a::after{
        width: 28px;
        height: 28px;
    }

    /* 無料ボタン */
    .btn.free::before{
        width: 70px;
        height: 35px;
    }

    /* カードリスト card_a */
    .list_card.card_a {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 22px;
    }
    .list_card.card_a li{border-radius: 10px;}
    .list_card.card_a li:not(:last-of-type)::before{
        right: -18px;
        width: 14px;
        height: 16px;
    }
    .list_card.card_a li:nth-of-type(3)::after{
        position: absolute;
        z-index: 1;
        inset: -100% auto -100% -16px;
        margin: auto;
        content: '';
        width: 14px;
        height: 16px;
        background: url(../img/parts/tri_blue.svg) no-repeat center / contain;
    }

    /* card_c */
    .list_card.card_c{gap: 50px 0;}
    .list_card.card_c li figure{border-radius: 5px;}
    .list_card.card_c li section{display: block;}
}

/* ============================================== */
/*セクション共通 */
/* ============================================== */
@media screen and (max-width:1140px) and (min-width:801px) {
    main > section h2{font-size: 46px;}
}
@media screen and (max-width:800px) {
    main > section:not(.bg_round){padding: 55px 0 0;}

    /* 見出し */
    main > section h2{
        font-size: 24px;
        font-weight: 900;
        padding: 0 0 0.6em;
        margin: 0 auto 1em;
        letter-spacing: -0.02em;
    }
    main > section h2::before{
        width: 60px;
        height: 3px;
    }

    .bg_round{border-radius: 19px;}
}
/* ============================================== */
/* 競合サイトのアクセス乗降、知りたくないですか？ */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec01{padding: 120px 0 !important;}
    .sec01 .flex{
        flex-direction: column;
        row-gap: 10px;
    }
    .sec01 .flex > ul{width: 100%;}
    .sec01 .flex > figure{
        width: 55%;
        max-width: 200px;
        margin: 0 auto;
    }

    /* こんなお悩みを解決 */
    .sec01 .flex + div{
        position: static;
        margin: 20px auto 0;
    }
    .sec01 h3{
        font-size: 27px;
        margin: 0 auto 20px;
        padding: 0 0 0.1em;
    }
    .sec01 h3::before{height: 7px;}
    .sec01 h3 + p{
        font-size: 15px;
    }
    .sec01 h3 + p::before{
        inset: auto -100% -80px -120%;
        width: 15px;
        height: 51px;
    }
}

/* ============================================== */
/*SEKIの競合サイト分析 */
/* ============================================== */
@media screen and (max-width:1350px) and (min-width:801px) {
    .sec02 .bg_round .flex p{font-size: clamp(15px, 2.14vw, 29px);font-feature-settings: "palt";}
}
@media screen and (max-width:800px) {
    .sec02{padding: 0 !important;}
    .sec02 .bg_round{
        padding: 50px 6%;
        background-image: url(../img/bg_bunseki_sp.png);
    }
    .sec02 .bg_round .flex{flex-direction: column-reverse;}
    .sec02 .bg_round .flex p{
        width: fit-content;
        font-size: 14px;
        letter-spacing: -0.01em;
        margin: 0 0 10px;
        padding: 0 4%;
        font-feature-settings: "palt";
    }
    .sec02 .bg_round .flex figure{
        width: 80%;
        max-width: 237px;
    }

    /* ボタン */
    .sec02 .bg_round .btn{max-width: 320px;}
    .sec02 .bg_round .btn a{
        font-size: 18px;
        padding: 0.6em 3.7em 0.7em 2.9em;
        border-radius: 15px;
    }
    .sec02 .bg_round .btn a span{
        display: inline-block;
        transform: translateY(-1px);
        font-size: 12px;
    }
    .sec02 .bg_round .btn::before{ inset: -17px auto auto -16px;}
    .sec02 .bg_round .btn a::after{
        right: 14%;
        width: 18px;
        height: 12px;
    }
}

/* ============================================== */
/* 競合分析サービスで、ここまで見える!! */
/* ============================================== */
@media screen and (max-width:1057px) and (min-width:801px) {
    .sec03 ul{gap: 15px 3%;}
    .sec03 ul li h3{font-size: clamp(22px, 3vw, 30px);}
    .sec03 ul li p{font-size: clamp(14px, 1.6vw, 16px);}
}
@media screen and (max-width:1057px) and (min-width:801px) {
    .sec03 ul li:nth-last-of-type(1){margin-top: -4%;}
}
@media screen and (max-width:800px) and (min-width:427px) {
    .sec03 ul li:nth-last-of-type(1){margin-top: -6%;}
}
@media screen and (max-width:800px) {
    .sec03 ul{
        display: block;
        max-width: 600px;
    }
    .sec03 ul li{
        width: 58%;
        min-width: 190px;
    }
    .sec03 ul li:nth-of-type(even){margin: 0 0 0 auto;}
    .sec03 ul li:not(:nth-of-type(1)){margin-top: -15%;}

    .sec03 ul li h3{font-size: clamp(17px, 4.1vw, 23px);}
    .sec03 ul li p{
        font-size: clamp(11px, 2.65vw, 15px);
        font-feature-settings: "palt";
    }
}
@media screen and (max-width:426px) {
    .sec03 ul{row-gap: 10px;}
}

/* ============================================== */
/*分析は簡単!!4ステップで完了 */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec04 h2{margin-bottom: 38px;}
    .sec04 .list_card li{padding: 18px 18px 22px;}
    .sec04 .list_card li p:nth-of-type(1){font-size: 28px;}
    .sec04 .list_card li p:nth-of-type(1) span{font-size: 12px;}
    .sec04 .list_card li p:nth-of-type(2){font-size: 17px;}
    .sec04 .list_card li figure{max-width: 65px;}
}
/* ============================================== */
/*私たちのご支援の特徴 */
/* ============================================== */
@media screen and (max-width:1550px) and (min-width:801px) {
    .sec05 .bg_round > .flex > div p:nth-of-type(2){font-feature-settings: "palt";}
    .sec05 .btn.btn_contact a{width: 390px;padding: .7em 5em 0.8em 1.8em;}
    .list_card.card_b li h3{
        font-size: 25px;
        word-break: auto-phrase;
        line-height: 1.4;
    }
}
@media screen and (max-width:1300px) and (min-width:801px) {
   .list_card.card_b li p:nth-of-type(1){font-size: 20px;}
}
@media screen and (max-width:1590px) {
    /* コンタクト */
    .sec05 .bg_round > .flex{
        flex-direction: row;
        width: 80%;
        margin: 40px auto 0;
    }
    .sec05 .bg_round > .flex > div{
        flex-direction: column;
        align-items: flex-start;
    }
    .sec05 .bg_round > .flex > div .ff_oswald{
        font-size: 36px;
        margin: 0 0 16px;
    }
    .sec05 .bg_round > .flex > div p:nth-of-type(2){
        font-size: 13px;
        margin: 0 0 16px;
        font-feature-settings: "palt";
    }
}
@media screen and (max-width:1150px) {
    /* カードアイテム */
    .list_card.card_b{
        display: block;
        max-width: 600px;
    }
    .list_card.card_b li{
        display: block;
        --padding-rl: 0;
        --padding-tb: 30px;
    }
    .list_card.card_b li h3{
        font-size: 18px;
        margin: 0 0 15px;
    }
    .list_card.card_b li p:nth-of-type(1){
        font-size: 18px;
        margin: 0 0 15px;
    }
    .list_card.card_b li p:nth-of-type(2){
        font-size: 11px;
        margin: 0 0 18px;
    }
    .list_card.card_b li:nth-of-type(1){padding-bottom: var(--padding-tb);}
    .list_card.card_b li:nth-of-type(2){
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--main_blue);
        border-bottom: 1px solid var(--main_blue);
        padding: var(--padding-tb) 0;
    }
    .list_card.card_b li:nth-of-type(3){padding-top: var(--padding-tb);}
}
@media screen and (max-width:800px) {
    .sec05{padding: 80px 0 0 !important;}
    .sec05 .bg_round{padding: 10px 10px 50px;}
    .sec05 .bg_round .bg_round__inner{
        border-radius: 10px;
        padding: 50px 28px 60px;
    }
    .sec05 .bg_round .bg_round__inner h2{font-size: 23px;}
    .sec05 .bg_round > .flex{flex-direction: column;}
}

/* ============================================== */
/*実績紹介 */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec06{margin: 15px auto 0;padding: 0 !important;}
    .sec06 .bg_round{padding: 55px 38px 65px;}

    /* カーアドアイテム */
    .sec06 .list_card{margin: 0 auto 18px;padding: 0 12px;gap: 50px 3%;}
    .sec06 .list_card li figure{margin: 0 0 18px;}
    .sec06 .list_card li h3{font-size: 18px;margin: 0 0 16px;}
    .sec06 .list_card li .w_company{font-size: 13px;margin: 0 0 0.8em;}
    .sec06 .list_card li .w_info{font-size: 11px;}

    /* 実績サイトボタン */
    .sec06 .bg_round > .btn a{
        font-size: 16px;
        padding: 0.8em 3.2em 1em 1.5em;
    }
    .sec06 .bg_round > .btn a::after{
        width: 12px;
        height: 12px;
        background-image: url(../img/ico/btn_blank_sp.svg);
    }
}
/* ============================================== */
/*ご相談からご提案までの流れ */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec07 h2{margin: 0 auto 38px;}

    /* カードアイテム */
    .sec07 .list_card li .ff_oswald{
        inset: -15px auto auto 14px;
        font-size: 28px;
    }
    .sec07 .list_card li{padding: 30px 13px 28px;}
    .sec07 .list_card li p:nth-of-type(2){font-size: 21px;margin: 0 auto 18px;}
    .sec07 .list_card li p:nth-of-type(3){font-size: 12px;}

    /* SEKIのデジタルマーケティング サービス例 */
    .sec07 section{margin: 40px auto 0;}
    .sec07 section h3{
        font-size: 20px;
        margin: 0 auto 15px;
    }
    .sec07 section .bg_round{
        flex-direction: column;
        padding: 36px 70px 45px;
    }
    .sec07 section .bg_round p{
        font-size: 37px;
        text-align: center;
        margin: 0 0 15px;
    }
    .sec07 section .bg_round ul{
        flex-direction: column;
        gap: .5em 0;
        width: fit-content;
    }
    .sec07 section .bg_round ul li{
        width: 100%;
        font-size: 13px;
    }
}
/* ============================================== */
/*お役立ち資料のダウンロード */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec08{padding: 80px 0 0 !important;}
    .sec08 h2{margin: 0 auto 28px;}
    /* カードアイテム */
    .sec08 .inner{padding: 0 10%;}
    .sec08 .list_card{gap: 40px 30px;}
    .sec08 .list_card li{display: block;}
    .sec08 .list_card li .m_cat{margin: 0 0 10px;}
    .sec08 .list_card li p{font-size: 14px;}
}
/* ============================================== */
/*CONTACT */
/* ============================================== */
@media screen and (max-width:800px) {
    .sec_cta{padding: 65px 0 0;}
    .sec_cta .bg_round{
        border-radius: 23px;
        text-align: left;
        padding: 50px 40px;
    }
    .sec_cta .bg_round h2{
        text-align: left;
        font-size: 45px;
        margin: 0 0 20px;
    }
    .sec_cta .bg_round p:not(.btn){
        font-size: 13px;
        margin: 0 0 26px;
        font-feature-settings: "palt";
    }
}

/* ============================================== */
/*                    フッター                    */
/* ============================================== */
@media screen and (max-width:1180px) and (min-width:801px) {
    footer .wrapper > p{margin: 0 auto 50px;}
    footer .wrapper{flex-direction: column;}
    footer .wrapper > .offices{
        width: 100%;
        max-width: 85%;
        column-gap: 2%;
    }
    footer .wrapper .footer_links{margin: 50px auto 0;}
}
@media screen and (max-width:800px) {
    footer{
        padding: 50px 2% 21.3vw;
    }
    footer .wrapper{
        justify-content: flex-end;
        align-items: flex-start;
        column-gap: 2%;
        max-width: 400px;
        margin: 0 auto;
    }
    /* ロゴ */
    footer .wrapper > p{width: 100%;margin: 0 auto 23px;}
    footer .wrapper > p a{
        display: block;
        max-width: 130px;
        margin: 0 auto;
    }
    /* オフィス情報 */
    footer .wrapper > .offices{
        max-width: 50%;
        flex-direction: column;
        row-gap: 1em;
    }
    footer .wrapper > .offices *{font-size: 11px;}
    /* リンクリスト */
    footer .wrapper .footer_links{
        max-width: 45%;
        flex-direction: column;
        margin: 0;
    }
    footer .wrapper .footer_links li{
        margin: 0 0 0.2em;
        line-height: 1.4;
    }
    footer .wrapper .footer_links li a{font-size: 13px;}

    /* コピーライト */
    footer .wrapper + div{
        position: static;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    footer .wrapper + div p{font-size: 9px;}
    footer .wrapper + div figure{max-width: 40px;}
}

/* ============================================== */
/* フローティングバナー */
/* ============================================== */
@media screen and (max-width:800px) {
    .banner{
        position: fixed;
        z-index: 100;
        bottom: -20vw;
        width: 100%;
        display: flex !important;
        opacity: 0;
        transition: 0.5s;
    }
    .banner li:nth-of-type(1){width: 54%;}
    .banner li:nth-of-type(2){width: 46%;}
    .banner li a{display: block;}
    .banner li a img{object-fit: cover;}
    .banner.is_scrolled{
        bottom: 0;
        opacity: 1;
    }
}