@charset "utf-8";
/* =========================================================================================================================================== */
/* CSS変数                                                                                                                                      */
/* =========================================================================================================================================== */
:root {
    --font-family-YuMincho : "游明朝", "YuMincho", serif;
    --font-family-YuGothic : "游ゴシック", "YuGothic", sans-serif;
    --font-weight-medium : 500;
    --font-weight-demibold : 700;
    --width-100 : 100%;
    --content-width-1 : 1080px;
    --color-brown1 : #604C3F;
    --color-brown2 : #7F4F21;
    --color-brown3 : #A38A78;
    --color-brown4 : #B18147;
    --color-brown5 : #C89F63;
    --color-brown6 : #D4C0B1;
    --color-green1 : #707B6A;
    --color-red1   : #991A33;
    --color-white1 : #FFFFFF;
    --zindex-header : 100;
    --zindex-gnavi : 200;
}


/* =========================================================================================================================================== */
/* サイト共通デザイン　                                                                                                                             */
/* =========================================================================================================================================== */
* {
    box-sizing: border-box;
}

/* ------------------------------------------------------------- */
/* 切り替え                                                        */
/* ------------------------------------------------------------- */
@media all {
    .pc_only   { display: block; }
    .sp_only   { display: none;  }
    .sp_inline { display: none;  }
}
@media (max-width: 768px) {
    .pc_only   { display: none;   }
    .sp_only   { display: block;  }
    .sp_inline { display: inline; }
}

/* ------------------------------------------------------------- */
/* 全体                                                           */
/* ------------------------------------------------------------- */
html {
    font-size: 62.5%;
}

body {
    position: relative;
    margin: 0;
    font-family: var(--font-family-YuMincho);
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.75;
    min-width: var(--content-width-1);
    color: var(--color-brown1);
}

@media (max-width: 768px) {
    html {
        font-size: calc(100vw / 375);
        /*
        計算式：　375(px) / 375 = 1
        画面幅375pxの時に "font-size: 1px" 相当になる
        */
    }

    body {
        font-size: 16rem;
        min-width: unset;
    }
}

/* ------------------------------------------------------------- */
/* 装飾                                                           */
/* ------------------------------------------------------------- */
@media all {
    .mb-10 {
        margin-bottom: 10px !important;
    }

    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mb-30 {
        margin-bottom: 30px !important;
    }

    .mb-50 {
        margin-bottom: 50px !important;
    }

    .mb-80 {
        margin-bottom: 80px !important;
    }

    /* text-align */
    .ta-left {
        text-align: left !important;
    }

    .ta-center {
        text-align: center !important;
    }

    .ta-right {
        text-align: right !important;
    }
}
@media (max-width: 767px) {
    .mb-10 {
        margin-bottom: 10px !important;
    }

    .mb-20 {
        margin-bottom: 15px !important;
    }

    .mb-30 {
        margin-bottom: 20px !important;
    }

    .mb-50 {
        margin-bottom: 34px !important;
    }

    .mb-80 {
        margin-bottom: 60px !important;
    }
}


/* ------------------------------------------------------------- */
/* 画像                                                           */
/* ------------------------------------------------------------- */
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ------------------------------------------------------------- */
/* リンク　                                                        */
/* ------------------------------------------------------------- */
a {
    text-decoration: none;
    color: var(--color-lightgray6);
}
a:hover, a:hover img {
    opacity: 0.7;
}


/* ------------------------------------------------------------- */
/* ボタン　                                                        */
/* ------------------------------------------------------------- */
button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* ------------------------------------------------------------- */
/* コンテンツインナー　                                               */
/* ------------------------------------------------------------- */
.inner {
    width: var(--width-100);
    max-width: var(--content-width-1);
    margin: 0 auto;
    position: relative;
}

/* =========================================================================================================================================== */
/* プラグイン系                                                                                                                                  */
/* =========================================================================================================================================== */
/* ------------------------------------------------------------- */
/* Inview                                                        */
/* ------------------------------------------------------------- */
@media all {
    .fade {
        opacity: 0;
        transition: .8s;
        transform: translate(0, 100px);
      }


      /* 方向＆距離系：重複不可 */
      .fade.fade-up-50 {
        transform: translate(0, 50px);
      }
      .fade.fade-right-50 {
        transform: translate(-50px, 0);
      }
      .fade.fade-left-50 {
        transform: translate(50px, 0);
      }
      .fade.fade-down-50 {
        transform: translate(0, -50px);
      }


      /* 遅れ系 */
      .fade.fade-delay {
        transition-delay: .1s;
      }
      .fade.fade-delay-500 {
        transition-delay: .5s;
      }
      .fade.fade-delay-800 {
        transition-delay: .8s;
      }
      .fade.fade-delay-1000 {
        transition-delay: 1s;
      }
      
      
      /* 表示用*/
      .fade.fade-in {
        opacity: 1;
        transform: translate(0, 0);
      }
}


/* =========================================================================================================================================== */
/* ローディング                                                                                                                                   */
/* =========================================================================================================================================== */
@media all {
    @keyframes load {
        0% {
            visibility: hidden;
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            text-shadow: none
        }

        50% {
            visibility: visible;
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
        }

        100% {
            visibility: hidden;
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            text-shadow: none
        }
    }

    #loading {
        width: 100%;
        height: 100%;
        background: url('../img/bg_nav.png') var(--color-red1);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999
    }
    #loading .loading_inner {
        margin: 0 auto;
        position: absolute;
        top: 50%;
        -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);
        right: 0;
        left: 0;
        text-align: center
    }
    #loading .loading_inner figure {
        margin: 0 0 10px
    }
    #loading .loading_inner figure img {
        width: 171px;
    }
    #loading .loading_inner p span {
        font-size: 16px;
        position: relative;
        color: var(--color-brown5);
        padding: 0;
        visibility: hidden;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        animation: load 3s ease-in-out;
        animation-iteration-count: infinite;
        font-family: var(--font-family-YuMincho)
    }

    #loading .loading_inner p span:nth-of-type(1)  { animation-delay: 0.0s }
    #loading .loading_inner p span:nth-of-type(2)  { animation-delay: 0.2s }
    #loading .loading_inner p span:nth-of-type(3)  { animation-delay: 0.4s }
    #loading .loading_inner p span:nth-of-type(4)  { animation-delay: 0.6s }
    #loading .loading_inner p span:nth-of-type(5)  { animation-delay: 0.8s }
    #loading .loading_inner p span:nth-of-type(6)  { animation-delay: 1.0s }
    #loading .loading_inner p span:nth-of-type(7)  { animation-delay: 1.2s }
    #loading .loading_inner p span:nth-of-type(8)  { animation-delay: 1.4s }
    #loading .loading_inner p span:nth-of-type(9)  { animation-delay: 1.6s }
    #loading .loading_inner p span:nth-of-type(10) { animation-delay: 1.8s }
}


/* =========================================================================================================================================== */
/* スマホナビ　                                                                                                                                   */
/* =========================================================================================================================================== */
@media all {
    #sp_navi {
        width: 100%;
        height: 100%;
        position: fixed;
        background: url('../img/bg_nav.png') var(--color-red1);
        z-index: 9997;
        padding-top: 34rem;
        left: -100vw;
        transition: left 0.5s ease;
    }
    .sp_navi_open #sp_navi {
        left: 0;
    }


    /* タイトル */
    #sp_navi figure {
        width: 261rem;
        margin: 0 auto;
    }


    /* メニュー */
    #sp_navi ul {
        display: flex;
        overflow: hidden;
        justify-content: center;
        padding-top: 25.1rem;
    }
    #sp_navi ul li {
        float: left;
        writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        position: relative;
        color: var(--color-brown5);
        font-size: 25.7rem;
        margin: 0 7.7rem;
        padding-top: 46rem;
    }
    #sp_navi ul li::before {
        content: "";
        background-image: url('../img/about_img2.png');
        background-size: cover;
        position: absolute;
        display: block;
        width: 25rem;
        height: 26rem;
        top: 0;
        left: 9.98rem;
    }
}


/* =========================================================================================================================================== */
/* スマホナビボタン                                                                                                                                */
/* =========================================================================================================================================== */
@media all {
    #sp_navi_btn {
        display: none;
        position: fixed;
        width: 45rem;
        height: 45rem;
        background-color: var(--color-red1);
        z-index: 9998;
        border-radius: 50%;
        right: -45rem;
        transition: right 0.3s ease;
    }
    .sp_navi_open #sp_navi_btn,
    #sp_navi_btn.show {
        right: 0;
    }
    

    /* 横棒 */
    #sp_navi_btn span {
        position: absolute;
        display: block;
        width: 32rem;
        height: 3rem;
        background-color: var(--color-brown5);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 1.5rem;
        transition: heigh 0.5s ease;
    }
    #sp_navi_btn span::before,
    #sp_navi_btn span::after {
        content: "";
        position: absolute;
        display: block;
        width: 32rem;
        height: 3rem;
        background-color: var(--color-brown5);
        border-radius: 1.5rem;
        transition: all 0.5s ease;
    }
    #sp_navi_btn span::before {
        top: -9rem;    
    }
    #sp_navi_btn span::after {
        top: 9rem;    
    }


    /* メニューオープン時 */
    .sp_navi_open #sp_navi_btn span {
        height: 0;
    }
    .sp_navi_open #sp_navi_btn span::before {
        top: 0;
        transform: rotate(45deg);
    }
    .sp_navi_open #sp_navi_btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
}
@media (max-width: 768px){
    #sp_navi_btn {
        display: block;
    }
}

/* =========================================================================================================================================== */
/* キービジュアル　                                                                                                                                */
/* =========================================================================================================================================== */


/* =========================================================================================================================================== */
/* 目次                                                                                                                                         */
/* =========================================================================================================================================== */
@media all {
    #index {
        position: relative;
        padding-bottom: 22.7vw;
        padding-top: 36.474px;
    }
    #index::before {
        content: "";
        display: block;
        background-image: url('../img/index_bg_top.png');
        height: 72.46px;
        width: 100%;
        position: absolute;
        top: -70.46px;
    }
    #index::after {
        content: "";
        background-image: url('../img/about_bg2.png');
        width: 511.3443px;
        height: 1029.4751px;
        display: block;
        position: absolute;
        bottom: calc(22.7vw - 462px);
        background-size: contain;
    }


    /* 背景 */
    #index .background {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 37.9vw));
        background-image: url('../img/about_bg.png');
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }


    /* インナー */
    #index .inner {
        position: relative;
    }


    /* お花のオブジェクト */
    #index .object {
        max-width: 813.7878px;
        padding-bottom: 67.8728px;
    }


    /* タイトル */
    #index .title {
        position: absolute;
        width: 298.5923px;
        top: 31.8427px;
        right: 47px;
    }


    /* すき焼き鍋のGIF */
    #index .sukiyaki {
        position: absolute;
        width: 221.585px;
        top: 646.0191px;
        right: -26.1789px;
    }
    @media (max-width: 1133px) {
        #index .sukiyaki {
            right: 0;
        }
    }


    /* 目次 */
    #index ul {
        overflow: hidden;
        margin-left: 295.4873px;
    }
    #index ul li {
        float: left;
        writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        position: relative;
        padding-top: 45.3792px;
        margin: 0 14.0736px;
    }
    #index ul li::before {
        position: absolute;
        content: "";
        display: block;
        width: 57.531px;
        height: 29.5769px;
        background-image: url(../img/about_img2.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        top: 0;
    }
    #index ul li a {
        font-size: 32.87px;
        color: var(--color-brown2);
    }
}


/* =========================================================================================================================================== */
/* スギモト物語とは                                                                                                                                */
/* =========================================================================================================================================== */
@media all {
    #about .inner {
        padding-left: 180.6866px;
    }


    /* タイトル */
    #about h2 {
        font-weight: var(--font-weight-demibold);
        font-size: 49.96px;
        position: relative;
    }
    #about h2 b {
        font-size: 70.99px;
    }
    #about h2::after {
        content: "";
        background-image: url(../img/h2_underbar.png);
        display: block;
        position: absolute;
        left: 0;
        bottom: 18px;
        width: 520px;
        height: 5.8072px;
        background-size: 480.5px;
    }


    /* 文章 */
    #about p {
        font-size: 19.87px;
        padding-top: 15px;
        font-family: var(--font-family-YuGothic);
    }
}
@media (max-width: 768px){
    #about {
        position: relative;
        padding-bottom: 81rem;
        background-image: url('../img/about_bg.png');
    }
    #about::before {
        content: "";
        display: block;
        background-image: url('../img/index_bg_top.png');
        background-size: contain;
        height: 28rem;
        width: 100%;
        position: absolute;
        top: -28rem;
    }
    #about::after {
        content: "";
        background-image: url('../img/about_bg2.png');
        background-repeat: no-repeat;
        width: 134rem;
        height: 270rem;
        display: block;
        position: absolute;
        background-size: contain;
        bottom: -142rem;
        z-index: 10;
    }


    /* インナー */
    #about .inner {
        padding-left: 0;
    }


    /* タイトル画像 */
    #about .title {
        width: 300rem;
        margin: 0 auto;
        padding-top: 27rem;
    }


    /* タイトル */
    #about h2 {
        padding-top: 48rem;
        margin-left: 70rem;
        font-size: 21.1rem;
    }
    #about h2 b {
        font-size: 30.1rem;
    }
    #about h2::after {
        width: 214rem;
        height: 2.5rem;
        bottom: 6rem;
    }


    /* 文章 */
    #about p {
        font-size: 12rem;
        padding-left: 44rem;
        padding-top: 9rem;
    }
}


/* =========================================================================================================================================== */
/* 登場人物                                                                                                                                      */
/* =========================================================================================================================================== */
@media all {
    #chara {
        position: relative;
        padding-bottom: 12.09vw;
    }


    /* 背景 */
    #chara .background {
        clip-path: polygon(0 11.73vw, 100% 0, 100% 100%, 0 100%);
        background-image: url('../img/chara_bg.png');
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }


    /* タイトル */
    #chara h2 {
        position: absolute;
        font-size: 60.45px;
        z-index: 1;
        padding-top: 33px;
        padding-left: 65px;
        padding-right: 50px;
        right: 0;
    }
    #chara h2 b {
        font-size: 85.9px;
    }
    #chara h2::before {
        content: "";
        background-image: url('../img/chara_h2.png');
        width: 221.7099px;
        height: 233.523px;
        display: block;
        background-size: cover;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
    #chara h2::after {
        content: "";
        background-image: url('../img/h2_underbar.png');
        display: block;
        position: absolute;
        /* left: 0; */
        bottom: 18px;
        width: 268.3161px;
        height: 5.8072px;
        background-size: 480.5px;
    }


    /* キャラクター共通 */
    #chara .characters {
        padding-top: 163.6761px;
    }
    #chara article {
        position: relative;
        width: 499.2701px;
        height: 633.9588px;
        background-image: url('../img/chara_obj.png');
        background-size: cover;
    }
    #chara article .name {
        font-size: 36px;
    }
    #chara article .name rt {
        font-size: 12px;
        padding-bottom: 6px;
    }
    #chara article .information {
        font-size: 16px;
        padding-top: 12px;
    }


    /* 七咲ハナ */
    #chara article.hana {
        margin-left: 194.1288px;
        padding-top: 175.0422px;
        padding-left: 138.9049px;
    }
    #chara article.hana::before {
        content: "";
        width: 261.5057px;
        height: 866.7019px;
        display: block;
        position: absolute;
        background-image: url('../img/chara_img1.png');
        background-size: cover;
        top: -24.567px;
        left: -137.4679px;
    }


    /* ウィリアムズ恭介 */
    #chara article.kyosuke {
        margin-left: 348.7038px;
        margin-top: -29.2918px;
        padding-top: 184.2641px;
        padding-left: 104.5988px;
    }
    #chara article.kyosuke::before {
        content: "";
        width: 342.3624px;
        height: 1176.0619px;
        display: block;
        position: absolute;
        background-image: url('../img/chara_img2.png');
        background-size: cover;
        bottom: -74.2295px;
        right: -230.6326px;
    }
}
@media (max-width: 768px) {
    #chara {
        margin-top: -81rem;
        padding-bottom: 0;
    }


    /* タイトル */
    #chara h2 {
        clip-path: polygon(0 80rem, 100% 0, 100% 100%, 0 calc(100% - 33rem));
        background-color: var(--color-white1);
        position: relative;
        width: 100%;
        margin-right: 0;
        margin-left: auto;
        padding: 0;
        padding-top: 83.5rem;
        font-size: 36.3rem;
        text-align: right;
        padding-right: 33rem;
        padding-bottom: 82rem;
    }
    #chara h2 b {
        font-size: 51.6rem;
    }
    #chara h2::before {
        width: 140rem;
        height: 147rem;
        right: 95rem;
        left: auto;
        top: 60rem;
    }
    #chara h2::after {
        width: 170rem;
        right: 26rem;
        top: 155rem;
        height: 3.5rem;
        background-size: 360rem;
    }

    /* キャラクター共通 */
    #chara .characters {
        margin-top: -34rem;
        padding-top: 93rem;
        width: 100%;
        overflow: hidden;
        background-image: url('../img/chara_bg.png');
        padding-bottom: 208rem;
    }
    #chara article .name {
        font-size: 20rem;
    }
    #chara article .name rt {
        font-size: 9rem;
    }
    #chara article .information {
        font-size: 12rem;
        padding-top: 21rem;
    }
    

    /* ハナ */
    #chara article.hana {
        margin-left: 99rem;
        width: 291.7rem;
        height: 369.711rem;
        padding-left: 71.2rem;
        padding-top: 61rem;
    }
    #chara article.hana::before {
        width: 159rem;
        height: 531rem;
        left: -97rem;
        top: -60rem;
    }


    /* 恭介 */
    #chara article.kyosuke {
        margin-left: -44rem;
        margin-top: 170rem;
        width: 298rem;
        height: 384rem;
        padding-top: 73rem;
        padding-left: 76rem;
    }
    #chara article.kyosuke::before {
        height: 672rem;
        width: 195rem;
        left: 206rem;
        top: -123rem;
    }
    
}


/* =========================================================================================================================================== */
/* 連載漫画                                                                                                                                      */
/* =========================================================================================================================================== */
@media all {
    #comi {
        position: relative;
        padding-top: 6.73vw;
        padding-bottom: 14.8vw;
        margin-top: -18.62vw;
    }


    /* 背景 */
    #comi .background {
        clip-path: polygon(0 0, 100% 18.62vw, 100% 100%, 0 100%);
        background-image: url('../img/comi_bg.png');
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
    }


    /* タイトル */
    #comi h2 {
        position: relative;
        font-size: 60.45px;
        padding-top: 33px;
        padding-left: 59px;
        padding-right: 50px;
        margin-bottom: 52px;
    }
    #comi h2 b {
        font-size: 85.9px;
        color: var(--color-brown5);
    }
    #comi h2::before {
        content: "";
        background-image: url('../img/comi_h2.png');
        width: 221.7099px;
        height: 233.523px;
        display: block;
        background-size: cover;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
    #comi h2::after {
        content: "";
        background-image: url('../img/h2_underbar.png');
        display: block;
        position: absolute;
        bottom: 18px;
        width: 278.2256px;
        height: 5.8072px;
        background-size: 480.5px;
    }


    /* 連載 */
    #comi .episodes {
        display: flex;
        justify-content: center;
        padding-top: 50.9066px;
        padding-bottom: 49.728px;
        flex-wrap: wrap;
    }
    #comi .episodes article a {
        display: block;
        width: 293.2868px;
        position: relative;
        border: solid 2px var(--color-brown4);
        margin: 0 19px;
        padding: 7.907px 7.4425px;
        background-color: var(--color-white1);
    }
    #comi .episodes article a figure {
        border: solid 2px var(--color-brown4);
        padding: 7.907px 7.4425px;
    }
    #comi .episodes article a .number {
        position: absolute;
        float: left;
        writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        width: 73.9719px;
        height: 95.5457px;
        background-image: url('../img/comi_obj1.png');
        background-size: cover;
        font-size: 21.3px;
        color: var(--color-brown5);
        top: 0;
        right: 18.6183px;
        line-height: 73.9719px;
        padding-top: 9.9334px;
    }


    /* ボタン */
    #comi .button a {
        display: block;
        width: 162.2666px;
        height: 41.5865px;
        line-height: 41.5865px;
        text-align: center;
        font-size: 24.83px;
        color: var(--color-white1);
        border-radius: calc(41.5865px / 2);
        background-color: var(--color-green1);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
}
@media (max-width: 768px) {
    #comi {
        margin-top: -57rem;
        padding-top: 17rem;
        padding-bottom: 74.5rem;
        position: relative;
        z-index: 1;
        background-image: url('../img/comi_bg.png');
        clip-path: polygon(0 0,100% 57rem, 100% 100%, 0 100%);
    }


    /* タイトル */
    #comi h2 {
        padding-left: 40rem;
        padding-top: 19rem;
        font-size: 28.6rem;
    }
    #comi h2 b {
        font-size: 40.7rem;
    }
    #comi h2::before {
        width: 111rem;
        height: 117rem;
        left: 6.5rem;
    }
    #comi h2::after {
        width: 126rem;
        height: 2.8rem;
        background-size: 185rem;
        bottom: 11rem;
    }


    /* 連載 */
    #comi .episodes {
        padding-bottom: 6.5rem;
        padding-top: 21rem;
    }
    #comi .episodes article a {
        margin: 0 6.5rem;
        margin-bottom: 15rem;
        width: 167rem;
        padding: 4.2rem;
        border-width: 1rem;
    }
    #comi .episodes::after {
        margin: 0 6.5rem;
        content: "";
        width: 167rem;
    }
    #comi .episodes article a figure {
        border-width: 1rem;
        padding: 0;
    }
    #comi .episodes article a .number {
        width: 41.8rem;
        height: 53.3rem;
        font-size: 12rem;
        line-height: 12rem;
        padding-right: 15rem;
        padding-top: 5.3rem;
        right: 10rem;
    }


    /* ボタン */
    #comi .button a {
        width: 131rem;
        height: 31.9rem;
        line-height: 31.9rem;
        font-size: 18rem;
        border-radius: calc(31.9rem / 2);
    }
}


/* =========================================================================================================================================== */
/* お知らせ                                                                                                                                      */
/* =========================================================================================================================================== */
@media all {
    #news {
        position: relative;
        padding-top: 18.83vw;
        padding-bottom: 7.4vw;
        margin-top: -18.3vw;
    }


    /* 背景 */
    #news .background {
        clip-path: polygon(0 18.3vw, 100% 0, 100% 100%, 0 100%); 
        background-image: url('../img/news_bg.png');
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
    }


    /* タイトル */
    #news h2 {
        position: absolute;
        font-size: 60.45px;
        padding-top: 33px;
        padding-left: 59px;
        padding-right: 53px;
        margin-bottom: 52px;
        right: 0;
        top: calc(-1 * (18.83vw - 1vw));
    }
    #news h2 b {
        font-size: 85.9px;
    }
    #news h2::before {
        content: "";
        background-image: url('../img/news_h2.png');
        width: 221.7099px;
        height: 233.523px;
        display: block;
        background-size: cover;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
    #news h2::after {
        content: "";
        background-image: url('../img/h2_underbar.png');
        display: block;
        position: absolute;
        bottom: 18px;
        width: 278.2256px;
        height: 5.8072px;
        background-size: 480.5px;
    }


    /* Twitter */
    #news .twitter {
        padding-top: 65.5285px;
    }
    #news .twitter_inner {
        width: 613.1455px;
        height: 424.5345px;
        margin: 0 auto;
        border: solid 5px var(--color-brown3);
        border-radius: 37.28px;
        background-color: var(--color-white1);
        position: relative;
    }
    #news .twitter_inner::before {
        content: "";
        background-image: url('../img/news_img1.gif');
        background-size: cover;
        display: block;
        position: absolute;
        width: 130.5456px;
        height: 126.6939px;
        left: 12px;
        top: -90.9639px;
        z-index: -1;
    }
    #news .twitter h3 {
        height: 42.2px;
        line-height: 40.2px;
        border-bottom: solid 2px var(--color-brown3);
        margin: 0 30px;
        text-align: center;
        font-weight: var(--font-weight-demibold);
        font-size: 24.83px;
        color: var(--color-brown3);
    }
    #news .twitter article {
        width: 100%;
        padding: 0 30px;
        height: calc(100% - 42.2px);
    }
}
@media (max-width: 768px) {
    #news {
        margin-top: -51rem;
        padding-top: 114rem;
        z-index: 1;
        padding-bottom: 70rem;
    }


    /* 背景 */
    #news .background {
        clip-path: polygon(0 51rem, 100% 0, 100% 100%, 0 100%);
    }


    /* タイトル */
    #news h2 {
        padding-left: 232rem;
        top: -114rem;
        padding-top: 18rem;
        padding-right: 0;
        font-size: 29rem;
        left: 0;
        right: auto;
    }
    #news h2::before {
        width: 113rem;
        left: 198rem;
        height: 120rem;
    }
    #news h2::after {
        width: 130rem;
        height: 2.9rem;
        background-size: 212rem;
        bottom: 12rem;
    }
    #news h2 b {
        font-size: 41.9rem;
    }


    /* Twitter */
    #news .twitter {
        padding-top: 0;
    }
    #news .twitter_inner {
        width: 336rem;
        height: 427rem;
        border-radius: 27rem;
        border-width: 3.5rem;
    }
    #news .twitter h3 {
        height: 42rem;
        line-height: 40rem;
        border-bottom-width: 2rem;
        font-size: 19.2rem;
        margin: 0 20rem;
    }
    #news .twitter_inner::before {
        width: 94rem;
        height: 91rem;
        top: -67rem;
        left: 1rem;
    }
}


/* =========================================================================================================================================== */
/* Copyright                                                                                                                                   */
/* =========================================================================================================================================== */
@media all {
    #copyright {
        background-color: var(--color-brown6);
    }
    #copyright p {
        height: 59.3959px;
        width: 100%;
        text-align: center;
        line-height: 59.3959px;
        font-size: 11.92px;
    }
}
@media (max-width: 768px) {
    #copyright p {
        height: 45rem;
        line-height: 45rem;
        font-size: 11rem;
    }
}