*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    .noto-sans-jp {
        font-family: "Noto Sans JP", serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    .pop {font-family: "Poppins", sans-serif;}
    
    .yuji {
        font-family: "Yuji Mai", serif;
        font-weight: 400;
        font-style: normal;
    }

    .massage{
        font-size: 50px;
        font-weight: 600;
    }

    .container{
        width: 90%;
        max-width: 1120px;
        margin:0 auto;
        position: relative;
    }

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

    .flexcolumn{
        display:flex;
        justify-content: space-between;
        flex-wrap:  wrap;
        align-items: center;
        gap: 20px;
    }


    /* ヘッダー */
    header{
        display: none;
    }

    .logo{
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.04em;
    }
    .logo span{
        color: #B71700;
    }


    /* メイン */

    .nav-links{
        margin-bottom: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 7vh;
        background-color: #B71700;
        color: white;
    }

    /*=========================================
    #hamburger
    =========================================*/
    .hamburger {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 150;
        width: 30px;
        height: 60px;
        cursor: pointer;
        background-image: radial-gradient(circle, rgba(255, 242, 58, 1), rgba(249, 71, 49, 1) 42%, rgba(224, 8, 8, 1) 80%);
        border-radius: 10px;
    }

    .hamburger.is-active span:nth-child(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-active span:nth-child(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-135deg);
    }

    .hamburger span {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 2px;
        background-color: #333333;
        transition: transform .3s;
    }

    .hamburger.is-active span {
        background-color: #ffffff;
    }

    .hamburger span:nth-child(1) {
        top: 30%;
    }

    .hamburger span:nth-child(2) {
        top: 60%;
    }

    .hamburger span:nth-child(3) {
        top: 90%;
    }

    /*=========================================
    #drawer
    =========================================*/
    .drawer {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 130;
        width: 100%;
        height: 100vh;
        background-color: #333333;
        transition: opacity .3s, visibility .3s;
    }

    .drawer.is-active {
        visibility: visible;
        opacity: 1;
    }

    .drawer-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0 20px;
    }

    .drawer__list {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .drawer__link {
        color: #ffffff;
        font-size: large;
    }

    /* ===============================================
    # 共通
    =============================================== */
    a {
        color: inherit;
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto;
        background-size: cover;
        background-repeat: no-repeat;
        font-style: italic;
        vertical-align: middle;

        shape-margin: .75rem;
    }

    /* 実際のプロジェクトではここのコメントを解除して、スマホ時のみ表示させます。 */
    .sp-show {
    display: none;
    }

    @media screen and (max-width: 768px) {
    .sp-show {
        display: block;
    }
    .sp-none {
        display: none;
    }
    }




    /* 昭和祭りの思い */
    #concept {
        margin-bottom: 120px;
    }
    .title {
        font-size: 35px;
        font-weight: 500;
        color: #811e1e;
        margin-bottom: 40px;
    }
    #concept h3 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 60px;
    }
    .column-2 {
        width: 48%;
    }
    .text {
        line-height: 2;
    }
    .concept-img {
        background-image: url(../images/concept.jpg);
        background-position: center;
        background-size: cover;
        height: 340px;
        border-radius: 20px;
    }


    .heading {
        font-family: "Yuji Mai", serif;
        font-size: 300px;
        font-weight: 700;
        color: #df1111;
        opacity: 0.2;
        position: absolute;
        top: 0;
        right: 0;
        transform: translateY(-30%);
        z-index: -1;
    }
    .heading-contents {
        font-family: "Yuji Mai", serif;
        font-size: 300px;
        font-weight: 700;
        color: #df1111;
        opacity: 0.2;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-30%);
        z-index: -1;
    }
    /* 3つの見所 */
    #contents{
        margin-bottom:  120px;        
    }
    .contents_inner{
        margin-bottom: 40px;
        position: relative;
    }
    .column-40{
        width: 40%;
    }
    .column-55{
        width: 55%;
    }
    #contents img{
        border-radius: 20px;
    }
    #contents h3{
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    /* 開催詳細 */
    #details{
        margin-bottom: 120px;
    }
    #details dl {
        display: table;
        width: 90%;
        margin-left: auto;
    }
    #details dt {
        width: 30%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-weight: 500;
        height: 60px;
        border-bottom: solid 1px #000000;
    }
    #details dd {
        width: 70%;
        display: table-cell;
        vertical-align: middle;
        border-bottom: solid 1px #000000;
    }

    /* 昨年の様子 */
    #memories{
        margin-bottom: 120px;
    }
    .memories-list{
        margin-bottom: 24px;
        display:flex;
        flex-wrap:  wrap;
        align-items: center;
        gap: 20px;
        margin-left: auto;
    }
    #memories li a img {
        width: 100%;
        height: 270px;
    }
    .column-a{
        background-image: url(../images/memories1.jpg);
        background-position: center;
        background-size: cover;
        width: 45%;
        height: 270px;
        border-radius: 20px;
    }
    .column-b{
        background-image: url(../images/memories2.jpg);
        background-position: center;
        background-size: cover;
        width: 45%;
        height: 270px;
        border-radius: 20px;
    }
    .column-c{
        background-image: url(../images/memories3.jpg);
        background-position: center;
        background-size: cover;
        width: 45%;
        height: 270px;
        border-radius: 20px;
    }
    .column-d{
        background-image: url(../images/memories4.jpg);
        background-position: center;
        background-size: cover;
        width: 45%;
        height: 270px;
        border-radius: 20px;
    }


    /* お問い合わせ */
    #inquiry{
        margin-bottom: 120px;
    }
    #inquiry dl {
        display: table;
        width: 90%;
        margin-left: auto;
    }
    #inquiry dt {
        width: 30%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-weight: 500;
        height: 60px;
        border-bottom: solid 1px #df1111;
    }
    #inquiry dd {
        width: 70%;
        display: table-cell;
        vertical-align: middle;
        border-bottom: solid 1px #df1111;
    }

    /* ボトム */



    /* フッター */
    footer {
        text-align: center;
        margin: 90px 0;
    }
    .copyright{
        font-size: 12px;
        margin-top: 40px;
    }

    .nav-active{
        transform: translateX(0%) !important;
    }

    @media only screen and (max-width: 768px) {
    header{
        display: flex;
        justify-content: center;
        position: fixed;
        height: 130px;
        width: 100%;
        background-color: white;
        z-index: 2;
    }

    header 
    body{
        overflow-x: hidden;
    }

    .topimage{
        margin-bottom: 60px;
    }

    .nav-links{
        display: none;
    }

    .title {
        font-size: 25px;
    }
    #concept h3 {
        font-size: 25px;
    }
    .column-2 {
        width: 100%;
    }
    .column-40{
        width: 100%;
        margin-bottom: 40px;
    }
    .column-55{
        width: 100%;
        margin-bottom: 40px;
    }
    .contents_inner{
        margin-bottom: 80px;
    }

    @keyframes navlinksfade {
        0%{
            opacity: 0;
            transform: translateX(50px);
        }
        100%{
            opacity: 1;
            transform: translateX(0px);
        }
    }
    
}
    .toggle .line1{
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .toggle .line2{
        opacity: 0;
    }
    .toggle .line3{
        transform: rotate(405deg)translate(-5px, -6px);
    }
}