@charset "UTF-8";

* {
    /* outline: 1px solid magenta; */
}

@media screen and (min-width: 768px),
print {

    /* ーーーーーーーーー共通ーーーーーーーーー */
    #page-sns .contents {
        max-width: 1200px;
        margin: 0 auto;
    }

    #page-sns .contents-bg {
        background-color: #F8F8F8;
    }

    /* ーーーーーーーーーh2ーーーーーーーーー */

    #page-sns .sec-title_h2 {
        font-size: 60px;
        font-weight: bold;
        letter-spacing: 0.009rem;
        line-height: 1.4;
        margin-bottom: 28px;
    }

    /* ーーーーーーーーーh3ーーーーーーーーー */
    #page-sns .sec-title_h3 {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.9;
        letter-spacing: .16rem;
    }

    #page-sns .sec-title_h3_list_num {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    #page-sns .sec-title_h3_list {
        font-size: 24px;
        font-weight: bold;
        letter-spacing: .23rem;
        line-height: 1.64;
        text-align: center;
        margin-bottom: 42px;

    }

    #page-sns .sec-title_h3_list::after {
        content: "";
        display: block;
        width: 58px;
        height: 2px;
        background-color: #000;
        margin: 18px auto 0;
    }

    /* ーーーーーーーーー画像・文字ーーーーーーーーー */

    #page-sns .sec_img img {
        max-width: 100%;
    }

    #page-sns .main_img img {
        max-width: 100%;
    }

    #page-sns .sec_text {
        line-height: 2;
        letter-spacing: .22rem;
    }

    #page-sns .sec_text p {
        margin-bottom: 22px;
    }

    #page-sns .sec_text p:last-child {
        margin-bottom: 0px;
    }

    #page-sns .black-bg {
        background-color: #000;
        text-align: center;
        letter-spacing: .1rem;
    }


    /* ーーーーーーーーーレイアウトーーーーーーーーー */

    /* フレックスボックス */
    #page-sns .sec-inner_box_flex {
        display: flex;
        justify-content: space-between;
        position: relative;

    }

    /* 絶対配置 */
    #page-sns .sec-inner_box_parts_img {
        position: relative;
        background-color: #F5F5F5;
    }

    #page-sns .sec-inner_box_parts_img .sec_img {
        position: absolute;

    }

    /* ーーーーーーーーーリンクボタンーーーーーーーーー */
    #page-sns .page_btn {
        border: 1px solid #000;
        width: 452px;
        margin: 0 auto;
    }

    #page-sns .page_btn a {
        display: block;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: .03em;
        padding: 22px 10px 17px;
        position: relative;
    }

    #page-sns .page_btn:first-child a::after {
        content: '';
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url(../images/sns/sns_sankaku.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    #page-sns .page_btn:last-child a::before {
        content: '';
        display: inline-block;
        width: 21.5px;
        height: 21.5px;
        background-image: url(../images/sns/sns_insta.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 55px;
        top: 50%;
        transform: translateY(-50%);

    }

    #page-sns .page_btn:last-child a::after {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        background-image: url(../images/sns/sns_blank.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 8px;
        bottom: 5px;
    }

    #page-sns .page_btn_box {
        display: flex;
        justify-content: center;
        gap: 40px;
    }

    #page-sns .page_btn_box .page_btn {
        margin: 0;
    }

    /* ーーーーーーーーーセクション０１ーーーーーーーーー */
    #page-sns #sec01 {
        margin-bottom: 135px;
    }

    #page-sns #sec01 .contents_top {
        margin-bottom: 114px;
        padding: 0 50px;
        position: relative;

    }

    #page-sns #sec01 .contents-inner01 {
        width: 100vw;
        position: absolute;
        left: -29%;
        top: 91px;
    }

    #page-sns #sec01 .contents-inner02 {
        width: 100vw;
        position: absolute;
        left: 55%;
        top: 0;
    }



    #page-sns #sec01 .sec-title_h2 {
        padding-top: 219px;
    }


    #page-sns #sec01 .contents_top_text {
        width: 586px;

    }

    #page-sns #sec01 .sec-title_h3 {
        font-size: 22px;
        letter-spacing: .22rem;
        margin-bottom: 20px;
    }

    #page-sns #sec01 .black-bg {
        padding: 11px 0 9px;
        margin-bottom: 50px;
    }

    #page-sns #sec01 .black-bg p {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
    }

    /* フレックスボックス */
    #page-sns #sec01 .sec-inner_box_flex {
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 67px;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_img {
        width: 415px;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets .sec_text {
        margin-bottom: 40px;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets {
        width: 535px;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets ul li {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
        letter-spacing: .09rem;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets ul li:last-child {
        margin-bottom: 0px;

    }

    /* 絶対配置 */
    #page-sns #sec01 .sec-inner_box_parts_img {
        margin-bottom: 44px;
        padding: 40px 50px 35px;
    }

    #page-sns #sec01 .sec-inner_box_parts_img .sec_text {
        width: 902px;
        line-height: 2.1;
    }

    #page-sns #sec01 .sec-inner_box_parts_img .sec_img {
        bottom: -2px;
        right: 54px;
    }

    /* ーーーーーーーーーセクション０2ーーーーーーーーー */
    #page-sns section#sec02 {
        margin-bottom: 87px;
        padding-top: 109px;
        position: relative;
    }

    #page-sns #sec02 .contents-bg {
        background-color: #F8F8F8;
        padding-top: 94px;
        padding-bottom: 71px;
    }

    #page-sns #sec02 .sec-img_logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }


    #page-sns #sec02 .black-bg {
        margin: 0 auto;
        position: absolute;
        top: 5%;
        padding: 15px 42px;
        width: 70%;
        text-align: center;
        right: 0;
        left: 0;
    }

    #page-sns #sec02 .page-title_h2_howto {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
    }

    #page-sns #sec02 ol {
        margin-left: 100px;
        margin-right: 100px;
    }

    #page-sns #sec02 ol li {
        padding-top: 30px;
        position: relative;
        margin-bottom: 34px;
    }

    #page-sns #sec02 ol li:last-child {

        margin-bottom: 0px;
    }

    #page-sns #sec02 ol .list_bg {
        background-color: #fff;
        padding: 60px 42px 37px;
    }

    /* フレックスボックス */

    #page-sns #sec02 ol li .sec-inner_box_flex .sec_img {
        width: 415px;
    }

    #page-sns #sec02 ol li .sec-inner_box_flex .sec_contets {
        width: 693px;
    }

    #page-sns #sec02 ol li .sec-inner_box_flex .sec_contets .sec_text {
        letter-spacing: .086rem;
    }

    /* ーーーーーーーーーエンドエリアーーーーーーーーー */
    #page-sns #end-area {
        margin-bottom: 112px;
    }

    #page-sns #end-area .end-area_title {
        text-align: center;
        font-weight: bold;
        margin-bottom: 30px;
    }

    #page-sns #end-area .end-area_title .small {
        font-size: 23px;
        margin-bottom: 7px;
    }

    #page-sns #end-area .end-area_title .middle {
        font-size: 28px;
        letter-spacing: .1rem;
    }

    #page-sns #end-area .end-area_box {
        border: 1px solid #000;
        margin: 0 50px 49px;
        padding: 39px 50px 55px;
    }

    #page-sns #end-area .end-area_box .end-area_box_title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        letter-spacing: .08rem;
        margin-bottom: 26px;
    }

    #page-sns #end-area .end-area_box .sec-img_logo {
        text-align: center;
        margin-bottom: 36px;
    }

    #page-sns #end-area .end-area_box_follower {
        display: flex;
        gap: 95px;
        background-color: #F8F8F8;
        padding: 26px 196px;
        margin-bottom: 7px;
        position: relative;
    }

    #page-sns #end-area .end-area_box_follower::after {
        content: "";
        display: block;
        width: 1px;
        height: 93px;
        background-color: #707070;
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
    }

    #page-sns #end-area .end-area_box_attention {
        text-align: right;
        font-size: 12px;
        margin-bottom: 28px;
    }

    /* フレックスボックス */

    #page-sns #end-area .sec-inner_box_flex .sec_img {
        width: 420px;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets {
        width: 543px;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text {
        letter-spacing: .086rem;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text p {
        margin-bottom: 31px;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text p:last-child {
        margin-bottom: 0px;
    }

}

@media screen and (min-width:768px) and (max-width:1199px) {

    /* ーーーーーーーーー共通ーーーーーーーーー */
    #page-sns .contents {
        overflow-x: hidden;
    }


    /* ーーーーーーーーーレイアウトーーーーーーーーー */

    /* フレックスボックス */
    #page-sns .sec-inner_box_flex {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }


    /* ーーーーーーーーーリンクボタンーーーーーーーーー */

    #page-sns .page_btn_box {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-direction: column;
        align-items: center;
    }

    /* ーーーーーーーーーセクション０１ーーーーーーーーー */


    #page-sns #sec01 .sec-title_h2 {
        padding-top: 219px;
        font-size: 5.5vw;
    }


    #page-sns #sec01 .contents_top_text {
        width: 45vw;

    }


    /* 絶対配置 */

    #page-sns #sec01 .sec-inner_box_parts_img .sec_text {
        width: 58vw;
        line-height: 2.1;
    }


    /* ーーーーーーーーーセクション０2ーーーーーーーーー */
    #page-sns section#sec02 {
        padding-top: 140px;
    }

    #page-sns #sec02 .contents-bg {
        padding-top: 110px;
    }



    #page-sns #sec02 .black-bg {
        padding: 15px 15px;
    }

    #page-sns #sec02 .page-title_h2_howto {
        font-size: 35px;
    }





    /* ーーーーーーーーーエンドエリアーーーーーーーーー */

    #page-sns #end-area .end-area_title .middle {
        font-size: 2.6vw;
        letter-spacing: .1rem;
    }



    #page-sns #end-area .end-area_box_follower {
        padding: 26px 30px;
    }


    #page-sns #end-area .sec-img.sec-img_text {
        width: 30vw;
    }

    #page-sns #end-area .sec-img.sec-img_text img {
        max-width: 100%;
    }
}


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

    /* ーーーーーーーーー共通ーーーーーーーーー */

    #page-sns .contents-bg {
        background-color: #F8F8F8;
    }

    /* ーーーーーーーーーh2ーーーーーーーーー */

    #page-sns .sec-title_h2 {
        font-size: 9.179vw;
        font-weight: bold;
        letter-spacing: 0.009rem;
        line-height: 1.4;
        margin-bottom: 28px;
    }

    /* ーーーーーーーーーh3ーーーーーーーーー */
    #page-sns .sec-title_h3 {
        font-size: 4.831vw;
        font-weight: bold;
        line-height: 1.9;
        letter-spacing: .16rem;
    }

    #page-sns .sec-title_h3_list_num {
        width: 10vw;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    #page-sns .sec-title_h3_list {
        font-size: 5.797vw;
        font-weight: bold;
        letter-spacing: .78vw;
        line-height: 1.7;
        text-align: center;
        margin-bottom: 5.7vw;
    }

    #page-sns .sec-title_h3_list::after {
        content: "";
        display: block;
        width: 14vw;
        height: 2px;
        background-color: #000;
        margin: 3.7vw auto 0;
    }

    /* ーーーーーーーーー画像・文字ーーーーーーーーー */

    #page-sns .sec_img img {
        max-width: 100%;
    }

    #page-sns .main_img img {
        max-width: 100%;
    }

    #page-sns .sec_text {
        line-height: 2.11;
        letter-spacing: .6vw;
    }

    #page-sns .sec_text p {
        margin-bottom: 3vw;
        letter-spacing: 0.25vw;
    }

    #page-sns .sec_text p:last-child {
        margin-bottom: 0px;
        letter-spacing: 0.25vw;
    }

    #page-sns .black-bg {
        background-color: #000;
        text-align: center;
        letter-spacing: .1rem;
    }


    /* ーーーーーーーーーレイアウトーーーーーーーーー */

    /* フレックスボックス */
    #page-sns .sec-inner_box_flex {
        display: bolck;
        position: relative;

    }

    /* 絶対配置 */
    #page-sns .sec-inner_box_parts_img {
        position: relative;
        background-color: #F5F5F5;
    }

    #page-sns .sec-inner_box_parts_img .sec_img {
        position: absolute;

    }

    /* ーーーーーーーーーリンクボタンーーーーーーーーー */
    #page-sns .page_btn {
        border: 1px solid #000;
        width: 82vw;
        margin: 0 auto;
        background-color: #F8F8F8;
    }

    #page-sns .page_btn a {
        display: block;
        text-align: center;
        font-size: 3.865vw;
        font-weight: bold;
        line-height: 1.4;
        letter-spacing: 0.1vw;
        padding: 4vw 3vw 3.1vw;
        position: relative;
    }

    #page-sns .page_btn:last-child a {
        padding: 7vw 3vw 5.8vw 7vw;
    }

    #page-sns .page_btn:first-child a::after {
        content: '';
        display: inline-block;
        width: 3vw;
        height: 3.1vw;
        background-image: url(../images/sns/sns_sankaku.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 6.5vw;
    }

    #page-sns .page_btn:last-child a::before {
        content: '';
        display: inline-block;
        width: 5.4vw;
        height: 5.4vw;
        background-image: url(../images/sns/sns_insta.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 6vw;
        top: 9.2vw;
        transform: translateY(-50%);
    }

    #page-sns .page_btn:last-child a::after {
        content: '';
        width: 4vw;
        height: 4vw;
        display: inline-block;
        background-image: url(../images/sns/sns_blank.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 1.8vw;
        bottom: 1.8vw;
    }

    #page-sns .page_btn_box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 4.5vw;
    }


    /* ーーーーーーーーーセクション０１ーーーーーーーーー */
    #page-sns #sec01 {
        margin-bottom: 18vw;
    }

    #page-sns #sec01 .contents_top {
        margin-bottom: 13vw;
        padding: 0 3vw;
        position: relative;
    }

    #page-sns #sec01 .sec-title_h2_img {
        margin-bottom: 23vw;
    }

    #page-sns #sec01 .main_img {
        margin-bottom: 10vw;
        margin-bottom: 8vw;
        margin: -4vw 0 8vw 0;
    }

    #page-sns #sec01 .sec-title_h2 {
        padding-left: 5.5vw;
        position: absolute;
        top: 10.2vw;
        line-height: 1.2;
        left: 0;
        margin: 0 0 0vw 0;
    }


    #page-sns #sec01 .contents_top_text {
        padding: 0 2.3vw;

    }

    #page-sns #sec01 .sec-title_h3 {
        letter-spacing: 0.25vw;
        margin-bottom: 2.5vw;
    }

    #page-sns #sec01 .black-bg {
        padding: 4vw 3vw 3vw;
        margin-bottom: 7vw;
    }

    #page-sns #sec01 .black-bg p {
        color: #fff;
        font-size: 5.314vw;
        font-weight: bold;
    }

    /* フレックスボックス */
    #page-sns #sec01 .sec-inner_box_flex {
        margin-bottom: 7vw
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_img,
    #page-sns #sec01 .sec-inner_box_flex .sec_contets .sec_text {
        padding-left: 5vw;
        padding-right: 5vw;

    }

    #page-sns #sec01 .sec-inner_box_flex .sec_img {
        margin-bottom: 6vw;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets .sec_text {
        margin-bottom: 6.4vw;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets ul {
        padding-left: 5vw;
        padding-right: 4.3vw;

    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets ul li {
        font-size: 4.348vw;
        font-weight: bold;
        margin-bottom: 2.2vw;
        letter-spacing: .4vw;
    }

    #page-sns #sec01 .sec-inner_box_flex .sec_contets ul li:last-child {
        margin-bottom: 0px;

    }

    /* 絶対配置 */
    #page-sns #sec01 .sec-inner_box_parts_img {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 26vw;
        padding: 6.4vw 6vw 28vw;
    }

    #page-sns #sec01 .sec-inner_box_parts_img .sec_text {
        line-height: 2.15;
    }

    #page-sns #sec01 .sec-inner_box_parts_img .sec_img {
        width: 23vw;
        bottom: -0.3vw;
        right: 5vw;
    }

    /* ーーーーーーーーーセクション０2ーーーーーーーーー */
    #page-sns section#sec02 {
        margin-bottom: 12.1vw;
        padding-top: 26vw;
        position: relative;
    }

    #page-sns #sec02 .contents-bg {
        background-color: #F8F8F8;
        padding-top: 31.7vw;
        padding-bottom: 15vw;
    }

    #page-sns #sec02 .sec-img_logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }


    #page-sns #sec02 .black-bg {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        padding: 3.4vw 14.2vw 3.1vw;
        display: block;
        width: 94vw;
    }

    #page-sns #sec02 .page-title_h2_howto {
        color: #fff;
        font-size: 6.28vw;
        font-weight: bold;
    }

    #page-sns #sec02 ol {
        margin-left: 3vw;
        margin-right: 3vw;
    }

    #page-sns #sec02 ol li {
        padding-top: 4.7vw;
        position: relative;
        margin-bottom: 14.3vw;
    }

    #page-sns #sec02 ol li:last-child {

        margin-bottom: 0px;
    }

    #page-sns #sec02 ol .list_bg {
        background-color: #fff;
        padding: 10vw 3.4vw 8.3vw;
    }

    /* フレックスボックス */

    #page-sns #sec02 ol li .sec-inner_box_flex .sec_img {
        margin-bottom: 6vw;
    }


    #page-sns #sec02 ol li .sec-inner_box_flex .sec_contets .sec_text {
        letter-spacing: .6vw;
    }

    /* ーーーーーーーーーエンドエリアーーーーーーーーー */
    #page-sns #end-area {
        margin-bottom: 24vw;
    }

    #page-sns #end-area .end-area_title {
        text-align: center;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 5vw;
    }

    #page-sns #end-area .end-area_title .small {
        font-size: 4.348vw;
        margin-bottom: 2vw;
    }

    #page-sns #end-area .end-area_title .middle {
        font-size: 6.314vw;
        letter-spacing: .1rem;
    }

    #page-sns #end-area .end-area_box {
        border: 1px solid #000;
        margin: 0 auto 11vw;
        width: 94vw;
        padding: 9vw 4vw 8.8vw;
    }

    #page-sns #end-area .end-area_box .end-area_box_title {
        font-size: 4.348vw;
        font-weight: bold;
        text-align: center;
        letter-spacing: .08rem;
        margin-bottom: 6vw;
    }

    #page-sns #end-area .end-area_box .sec-img_logo {
        text-align: center;
        margin-bottom: 5vw;
        padding: 0 2vw;
    }

    #page-sns #end-area .end-area_box_follower {
        background-color: #F8F8F8;
        padding: 9vw 13.3vw 11vw;
        margin-bottom: 2vw;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 11.9vw;
    }

    #page-sns #end-area .end-area_box_follower::after {
        content: "";
        display: block;
        width: 19vw;
        height: 1px;
        background-color: #707070;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #page-sns #end-area .end-area_box_attention {
        text-align: right;
        font-size: 3.382vw;
        margin-bottom: 9vw;
    }

    /* フレックスボックス */

    #page-sns #end-area .sec-inner_box_flex .sec_img {
        margin-bottom: 6.4vw;
        padding: 0 2vw;
    }


    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text {
        letter-spacing: .59vw;
        line-height: 2.13;
        padding: 0 2vw;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text p {
        margin-bottom: 8.5vw;
    }

    #page-sns #end-area .sec-inner_box_flex .sec_contets .sec_text p:last-child {
        margin-bottom: 0px;
    }

}