pc-only {
    display: block;
}
.sp-only {
    display: none;
}
/** タブレット */
@media screen and (max-width: 1024px){
}
/** sp **/
@media screen and (max-width: 500px){
    .sp-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
}


:root{
    --col-defo: #25375c;
    --col-red: #e60014;
    --max-sp: 90%;
}

.mt20 {
    margin-top: 20px;
}

section{
    background-image: url("../images/back.png");
    background-repeat: repeat;

}
img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
.main {
    font-family: "momochidori", sans-serif;

}
.main p {
    color: var(--col-defo);
}

/** kv **/
.kv{
    width: 100%;
}
.main .discription{
    width: fit-content;
    margin: 0px auto 0;
    max-width: 95%;
}
.main .discription p{
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}


/** 開催初日 **/
.main .program,
.main .kaisai{
    margin-top: 35px;
}
.main .kaisai .kaisai__title{
    margin: 0 auto;
    max-width: 1100px;
}
.main .program .program__title{
    max-width: 450px;
    margin: 0 auto;
}

.main .kaisai__place{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    max-width: 1100px;
    margin: 10px auto 0;
}



/** スケジュール **/
.main .program .program__schedule{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 50px;
    max-width: 90%;
    margin: 0px auto 0;
}
.schedule {
    height: fit-content;
    width: 100%;
    /*max-width: 950px;*/
    margin: 0 auto;
    border: 3px solid #243a63;
    box-sizing: border-box;
}

.schedule-block {
    display: flex;
    width: 100%;
}

/* 会場名 */
.schedule-place {
    width: 78px;
    flex: 0 0 78px;
    display: flex;
    justify-content: center;
    align-items: center;

    writing-mode: vertical-rl;
    text-orientation: upright;

    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
}

.schedule-place--hirome {
    background: #243a63;
}

.schedule-place--ohashi {
    background: #8b7a60;
}

.schedule-place--toyo {
    background: #dc5658;
}

.schedule-place--obiyamachi {
    background: #b13e5c;
}

.schedule-place--kochi-tabi {
    background: #7caf9c;
}
/* 時間・出演者部分 */
.schedule-items {
    flex: 1;
    min-width: 0;
}

.schedule-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 40px;
    border-bottom: 3px solid #243a63;
    box-sizing: border-box;
}

.schedule-block:last-child .schedule-row:last-child {
    border-bottom: none;
}

.schedule-time,
.schedule-name {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    color: #243a63;
    font-size: 16px;
    line-height: 1.3;
    background: #fff;
}

.schedule-time {
    justify-content: center;
    border-right: 3px solid #243a63;
    white-space: nowrap;
}

.schedule-name {
    padding: 0 20px;
}

.schedule__after{
    margin-top: 85px;
    cursor: pointer;
}


/** after schedule **/
.after_data {
    width: 100%;
    height: 0;
    overflow: hidden;
}

.after_data_inner {
    max-width: 1100px;
    /*height: 70vh;*/
    margin: 0 auto;
    overflow: auto;

    transform: translateY(-100%);
    opacity: 0;

    transition:
        transform 0.4s ease,
        opacity 0.3s ease;
}

.after_data.active {
    height: 100%;
}

.after_data.active .after_data_inner {
    transform: translateY(0);
    opacity: 1;
}

.close{
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
        width: fit-content;
    border: 1px solid var(--col-defo);
    border-radius: 50%;
    background-color: #fff;
    margin: 0 0 10px auto;
}
.close p{
        display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================
   テーブル
========================= */

.after_data .schedule-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 24px;
    color: #263b64;
    border: 2px solid #ed001b;
}

/* 列幅 */
.after_data .schedule-table .col-place {
    width: 3%;
}

.after_data .schedule-table .col-time {
    width: 16%;
}

.after_data .schedule-table .col-day {
    width: 27%;
}


/* =========================
   ヘッダー
========================= */

.after_data .schedule-table thead th {
    /*height: 64px;*/
    padding: 4px 8px;
    /*box-sizing: border-box;*/

    background: #ed001b;
    color: #fff;

    font-size: 30px;
    /*font-weight: normal;*/
    /*line-height: 1.2;*/
    text-align: center;

    border-right: 3px solid #fff;
    border-bottom: 2px solid #ed001b;
}

.after_data .schedule-table thead th:last-child {
    border-right: none;
}

/* 左上の空白 */
.after_data .schedule-table thead .place-title {
        background: #f5c7cb;
    border-right: 1px solid #f5c7cb;
}

/* 「時間」 */
.after_data .schedule-table thead .time-title {
    background: #f5c7cb;
    color: #263b64;
    border-right: 2px solid #ed001b;
}

/* 曜日 */
.after_data .schedule-table thead span {
    display: inline-block;
    margin-left: 2px;
    font-size: 16px;
}


/* =========================
   本文
========================= */

.after_data .schedule-table tbody td {
    /*height: 39px;*/
    /*padding: 2px 6px;*/

    background: #fff;

    /*line-height: 1.2;*/
    text-align: center;

    border: 1px solid #ed001b;
    font-weight: bold;

    white-space: nowrap;
}


/* =========================
   会場名
========================= */

.after_data .schedule-table tbody th.place {
    padding: 8px 3px;

    color: #fff;

    font-size: 18px;
    font-weight: bold;

    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;

    border: 1px solid #ed001b;
}

/* ひろめ市場南スペース */
.after_data .schedule-table tbody th.place--hirome {
    background: #253b64;
}

/* 大橋通り商店街 */
.after_data .schedule-table tbody th.place--ohashi {
    background: #8c7b60;
}


/* =========================
   会場切り替え部分
========================= */

.after_data .schedule-table tbody tr:nth-child(8) th,
.after_data .schedule-table tbody tr:nth-child(8) td {
    border-top-width: 3px;
}


/* =========================
   2つ目の表
========================= */

.after_data .schedule-table + .schedule-table {
    margin-top: 24px;
}






/** 同時開催 **/
.main .held {
    margin: 75px auto 0;
    width: 90%;
    position: relative;
    max-width: 1100px;
}

/** オータムフェス **/
.main .autumfestival {
    max-width: 700px;
    width: 80%;
    margin: 40px auto 0;
}

/** その他 **/
.main .other {
    margin: 70px auto 0;
    max-width: 1100px;
    width: 90%;
}
.main .other__title{
    background-color: #e60014;
}
.main .other__title p{
    font-weight: 900;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 47px;
}

.main .other__title--image{
    background-color: transparent;
    margin-top: 35px;
}

/** その他　クーポン **/
.main .coupon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.main .coupon p span{
    color: #d93932;
}
.main .coupon .coupon__txt > div{
    display: flex;
}
.main .coupon .coupon__txt p{
    font-size: 21px;
}
.main .coupon__image{
        width: 80%;
    margin-left: auto;
}
.main .coupon__image--1{
        margin-top: -40px;
}
.main .coupon__attention{
    margin-bottom: 10px;
}
.main .coupon__attention p{
    font-size: 30px;
    color: var(--col-red);
    text-align: center;
}
.main .coupon__attention p span {
    font-size: 36px;
}

/** 線 **/
.main .line {
    height: 5px
}

/** 賞品 **/
.main .prize {
    margin-bottom: 20px;
}
.main .prize li {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
}
.main .prize li p{
    font-size: 26px;
}
.main .prize .prize__no {
    margin-left: auto;
}
.main .prize .prize__middle p{
    color: #be4d7a;
}
.main .prize .prize__large p{
    font-size: 38px;
    color: var(--col-red);
}
.main .prize .prize__large .prize__no {
    display: flex;
    align-items: center;
}

/** attention **/
.attention p{
    color: #25375c;
    line-height: 1.5;
    position: relative;
    padding-left: 1rem;
}
.attention p:before {
    content: "※";
    position: absolute;
    left: 0;
}


/** オリジナルクーポン **/
.main .original-event{
        display: grid;
    grid-template-columns: 1fr 40%;
    gap: 50px;
    margin: 30px 0;
}
.main .event .event__title--width{    
    width: 90%;
}
.main .original-event .event .event__txt.event__txt p{
    font-size: 21px;
}
.main .original-event .event .event__txt.event__txt-flex{
       display: grid;
    grid-template-columns: 245px 1fr;
    gap: 20px;
}
.main .original-event .event--rightline{
    padding-right: 25px;
    position: relative;
}
.main .original-event .event--rightline:after {
    content: "";
    width: 7px;
    height: 100%;
    background: url("../images/line_1.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
}
.main .original-event .event .event__txt.event__txt p.event__attention{
    font-size: 16px;
}
.main .original-event .event__image {
        width: 80%;
    margin: 0 auto;
}

/** 龍馬パスポートイベント **/
.main .event-ryoma{
    margin: 50px auto 0;
    width: 60%;
    max-width: 600px;
}

/** 注意書き **/
.attention {
    max-width: 1000px;
    margin: 100px auto 0;
}

/** 冬の陣 **/
.banner{
    max-width: 1100px;
    margin: 50px auto;
}

/** link **/
.link{
    width: fit-content;
    margin: 160px auto 0;
    display: flex;
    gap: 80px;
}
.l-icon {
    width: 50px;
}




/** footer **/
.m-footer{
    margin-top: 50px;
    /*    background-color: #ffde5e;
        padding: 30px 0;*/
    width: 100%;
}
.m-footer img {
    width:  100%;
    height: auto;
    vertical-align: top;
}





/* スマートフォン */
@media screen and (max-width: 767px) {


}





/**** sp版 ****/
@media screen and (max-width: 768px) {
    .main .discription{
        margin-top: 50px;
    }
    .main .discription p{
        font-size: 13px;
    }
    .main .kaisai .kaisai__title{
        max-width: var(--max-sp);
    }
    .main .kaisai__place{
        max-width: var(--max-sp);
        grid-template-columns: repeat(4,1fr);
    }
    .main .kaisai__place > div{
        grid-column: span 2;
    }
    .main .kaisai__place > div:last-child {
        grid-column: 2/4;
    }
    .main .program .program__title{
        max-width: 205px;
    }
    
    .main .program .program__schedule{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 会場名 */
    .schedule-place {
        width: 30px;
        flex-basis: 30px;
        font-size: 17px;
    }

    .schedule-row {
        grid-template-columns: 95px 1fr;
        min-height: 25px;
    }

    .schedule-time,
    .schedule-name {
        font-size: 11px;
    }

    .schedule-name {
        padding: 0 10px;
    }

    .schedule__after{
        margin-top: 20px;
    }
    .after_data_inner{
        max-width: var(--max-sp);
    }
    .after_data.active .after_data_inner{
        margin-top: 30px;
    }
    .close{
        font-size: 20px;
    }
    
    .after_data .yosakoi-schedule {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .after_data .schedule-table {
        min-width: 900px;
    }

    .after_data .schedule-table thead th {
        height: 38px;
        font-size: 16px;
    }

    .after_data .schedule-table thead span {
        font-size: 14px;
    }

    .after_data .schedule-table tbody td {
               height: 25px;
        font-size: 12px;

    }

    .after_data .schedule-table tbody th.place {
        font-size: 13px;
    }
    
    /** イベント **/
    .main .other__title p{
        font-size: 20px;
    }
    .main .other__title--image{
        width: 95%;
    margin: 20px auto;
    }
   
    /** おトクーポン **/
    .main .coupon {
        grid-template-columns: 1fr;
    }
    .main .coupon__txt > div{
        display: flex;
    }
    .main .coupon .coupon__txt p{
        font-size: 11px;
    }
    .main .coupon .coupon__txt p.coupon__txt-p{
        font-weight: 900;
        width: fit-content;
        margin-left: auto;
        font-size: 15px;
        color: var(--col-red);
    }
    .main .coupon__block{
        display: grid;
        grid-template-columns: 1fr 75px;
    }
    .main .coupon__image {
        margin-top: auto;
        width: 100%;
    }
    .main .coupon__attention p{
        margin-top: 10px;
        font-size: 12px;
    }
    .main .coupon__attention p span{
        font-size: 18px;
    }
    .main .other__original{
        margin-bottom: 10px;
    }
    .main .prize{
        margin-top: -35px;
    }
    .main .prize li{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .main .prize li:not(:first-child){
        margin-top: 10px;
    }
    .main .prize li p{
                font-size: 12px;
        width: fit-content;
        margin: 0 auto;
        text-align: center;
    }
    .main .prize .prize__no{
        margin: 0 auto;
    }
    .main .prize .prize__large .prize__no{
        max-width: 30%;
        margin: 0 auto;
    }
    .main .prize .prize__large p{
        font-size: 20px;
    }
    
     .main .original-event{
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }
    .main .other{
        width: 95%;
    }
    .main .original-event .event .event__txt.event__txt-flex{
        grid-template-columns: 1fr;
    }
    .main .original-event .event--rightline:after{
        content: none;
    }
    .main .original-event .event--rightline{
        padding-right: 0;
    }
    .main .event .event__title--width{
        width: 100%;
    }
    .main .original-event .event .event__txt.event__txt p{
        font-size: 12px;
        text-align: center;
    }
    .main .original-event .event .event__txt.event__txt p.event__attention{
        font-size: 10px;
    }
    .main .event-ryoma{
        margin: 10px auto 0;
        width: 95%;
    }
    .attention{
        margin-top: 20px;
        max-width: var(--max-sp);
        font-size: 12px;
    }
    .banner{
        
        max-width: var(--max-sp);
    }
    /** link  **/
    .link{
        margin-top: 100px;
    }

    /** footer **/
    .m-footer {
        padding: 30px 0;
        background-color: #ffde5e;
    }
    .m-footer__inner{
        display: grid;
        /*grid-template-columns: 65px 1fr 370px;*/
        width: 90%;
        margin: 0 auto;
        gap: 20px;
    }
    .m-footer__inner p{
        font-weight: bold;
        line-height: 1.3;

    }
    .m-footer__title{
        border-bottom: 1px solid #000;
        font-size: 20px;
    }
    .m-footer__title-inner{
        display: flex;
        height: 100%;
        align-items: center;

    }
    .m-footer__contact{
        font-size: 18px;
    }
    .m-footer__contact span {
        font-size: 13px;
        font-weight: bold;
    }



}



/* =========================
   スマートフォン
========================= */

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

}