@charset "utf-8";
/* CSS Document */
/*.wrapper-headerinfo {
	display: none;
}*/

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

    .article{
        padding-bottom: 5%;
        background-color: #e8dbcd;
        z-index: -2;
    }

    p {
        margin: 0!important;
    }

    .kiku1{
        position: absolute;
        top:126px;
        left:83%;
        width: 10%;
        z-index: 1; 
    }
    
    .kiku2{
        position: absolute;
        top: 91px;
        left: 6%;
        width: 10%;
        z-index: 1; 
    }

    .back{
        display: flex;
        z-index: -1;
    }
    .left{
        width: 70.3%;
        height: 100%;
    }
    .right{
        width: 29.7%;  
    }
    .sippou{        
        margin-top: -9%;
        width: 100%;
        z-index: -1;
    }
    
    .logo{
        position: absolute;
        margin: 15px 32.5% 0 32.5%;
        width: 35%;
        z-index: 1;
    }
    
    .title{
        text-align: center;
        font-family: "dela-gothic-one", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
    }

    .yasugari,
    .hanabishi,
    .sippou_2{
        width: 100%;
        z-index: -1;
    }
    .sippou_2{
        transform:scale(-1,1) ;
    } 

    /* 左からフェードイン */
    .js-scroll.-slidein-left {
        transform: translateX(-40rem); /* どれくらい動かしたいか */
        opacity: 0;
        }
        .js-scroll.-slidein-left.js-active {
        transform: translateX(0rem);
        opacity: 1;
        transition: transform 1s ease; /* どれくらいの速さで */
    }

    /* 右からフェードイン */
    .js-scroll.-slidein-right {
        transform: translateX(40rem); /* どれくらい動かしたいか */
        opacity: 0;
        }
        .js-scroll.-slidein-right.js-active {
        transform: translateX(0rem);
        transition: transform 1s ease; /* どれくらいの速さで */
        opacity: 1;
    }

    
    /* 上からフェードイン */
    .js-scroll.-slidein-top {
        transform: translateY(-40rem); /* どれくらい動かしたいか */
        opacity: 0;
        }
        .js-scroll.-slidein-top.js-active {
        transform: translateY(0rem);
        opacity: 1;
        transition: transform 1s ease; /* どれくらいの速さで */
    }

    /* 見出し左からフェードイン */
    .js-scroll_2.-slidein-left_2 {
        transform: translateX(-10rem); /* どれくらい動かしたいか */
        opacity: 0;
    }
    .js-scroll_2.-slidein-left_2.js-active_2 {
        transform: translateX(0rem);
        opacity: 1;
        transition: transform 1s ease; /* どれくらいの速さで */
    }

    .subtitle{
        margin-bottom: 1em;
        height: 3.5em;
    }
    .address{
        margin-bottom: 3em;
    }

    /* 概要 */
    .content_overview{
        font-size: 11px;
        font-family: "mizolet", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0.1em;
    }

    .attentiion{
        font-size: 23px;
        font-family: "yuji-syuku", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .point{
        background: linear-gradient(transparent 75%, #DDAFAF 70%);
    }
    

    .text{
        padding: 3% 0;
    }

    .present{
        position: relative;
        text-align: center;
        margin: 5% 6% 0;
        padding: 5%;
        background-color: #fff;
        font-size: 12px;
        z-index: 0;
    }

    .present::before{        
        content: " ";
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border: 1.5px solid #E2D1B0;
        outline: 1px solid #C1272D;
        outline-offset: -7px;
        z-index: -1;
    }

    .present::after{        
        content: " ";
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        transform: rotate(-5deg);
        background-color: #C1272D;
        z-index: -2;
    }

    
    /* 日にち場所 */
    .content_schedule{
        margin: 0 10% 5%;
        font-size: 11px;
        font-family: "mizolet", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0.1em;
    }

    .date{
        margin-bottom: 3%;
        font-size: 19px;
        font-family: "yuji-syuku", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .datepoint{
        background: linear-gradient(transparent 83%, #DDAFAF 70%);
    }

    .yotei{
        font-size: 11px;
    }
    
    /* 団体一覧 */
    .dantai{
        margin: 0% 10% 0;
        font-size: 10px;
        font-family: "mizolet", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0.1em;
    }

    /* .commingsoon{
        display: flex;
        margin-top: 4%;
        width: 55%;
    } */

    .cards{
        margin-bottom: 2em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
    }

    .card{
        padding: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #fff;
        border: 1.5px solid #E2D1B0;
        outline: 1px solid #C1272D;
        outline-offset: -5.5px;
    }
    
    /* 連絡先 */
    .content_address{
        margin: 0% 8.6% 0;
        font-size: 10px;
        font-family: "mizolet", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0.1em;
    }

    .square{
        margin: -1.5em;
        padding: 1.5em;
        background-color: #fff;
        border: 1.5px solid #E2D1B0;
        outline: 1px solid #C1272D;
        outline-offset: -7px;
    }

    .name{
        padding: 0 0 1em;
    }

    dl{
        margin-bottom: 0!important;
    }

    dt{
        float:left;
        font-weight: 300 !important;
    }

    dd{
        padding-left: 7.5rem;
    }

    /* 戻るボタン */
    a.btn,
    button.btn {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        position: relative;
        display: inline-block;
        padding: 1rem 4rem;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        letter-spacing: 0.1em;
        color: #212529;
        border-radius: 0.5rem;
    }

    .gototop{
        margin: 8% auto 0;
        width: 80px;
        font-size: 11px;
        font-family: "mizolet", sans-serif;
        font-weight: 400;
        font-style: normal;
        
    }

    a.gototop-border {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 58px;
        height: 58px;
        text-align: center;
        text-decoration: none;
        color: #c1272d;
        background: #ddafaf;
        border: 2px solid #c1272d;
        text-decoration: none !important;
    }

    a.gototop-border:hover {
        color: #ddafaf;
        background: #c1272d;
        border: 2px solid #ddafaf;
        text-decoration: none;
    }
}