@charset "utf-8";

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

/* -----------基本レイアウトここから------------- */

#Event_detail {
    body {
        font-family: 'Noto Serif JP';
        font-size: 16px;
        line-height: 1.5;
        color: #2c2c2c;
    }

    :root {
        --maincolor: #F2F0DB;
        --accentcolor: #00496D;
    }
}

/* -----------基本レイアウトここまで------------- */


/* -----------メインここから------------- */

.event_detail_Photo img {
    text-align: center;
    aspect-ratio: 3 / 4;
    height: 700px;
    object-fit: cover;
}

h2 {
    font-size: 40px;
    text-align: center;
    /* margin-top: 40px; */
}

h3 {
    font-size: 36px;
    text-align: center;
    letter-spacing: .1em;
    margin-top: 200px;
    margin-bottom: 90px;
}

#Event_detail .eventdetailSec .event_detail_Photo {
    text-align: center;
    margin-top: 120px;
    margin-bottom: 120px;
}


.detail_text h4 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 50px;
}

.detail_text {
    font-size: 20px;
    text-align: center;
    padding-bottom: 180px;
    line-height: 48px;
}

.event_overview {
    font-size: 24px;
    font-weight: bold;
}

.event_overview_text {
    margin-bottom: 90px;

}

.event_overview_box {

    width: 800px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: solid 1px #2c2c2c;
    border-bottom: solid 1px #2c2c2c;
    ;
    padding-bottom: 20px;
}

/* -----------メインここまで------------- */


/* .btn_eventdetail {
    display: flex;
    justify-content: end;
} */

/* -----------矢印ボタンここから------------- */
#Event_detail .btn_eventdetail {
    font-size: 16px;
    text-align: right;
    margin-bottom: 130px;
    margin-top: 200px;
}


button {
    position: relative;
    margin-right: 157px;

}

button:hover {
    transition: all 0.3s;
    color: #8e8e8e;
}

button::after {
    content: url(../images/arrow.svg);
    position: absolute;
    right: -157px;
    width: 100%;
    top: -18px;

}

/* -----------矢印ボタンここまで------------- */

.event_detail_Photo img {
    width: 80%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* PCなど大きい画面では改行しない */
.gaiyou {
    display: none;
}

/* -----------レスポンシブここから------------- */
/* ---responsible design for iPad pro--- */
@media screen and (max-width: 1024px) {

    .event_detail_Photo img {
        max-width: 400px;
    }

    .detail_text {
        font-size: 16px;
        /* 文字サイズを小さく */
        line-height: 2;
        /* 行間を広めに（約0.5em分アップ） */
        padding-bottom: 100px;
        /* 下余白を少し減らす */
        text-align: center;
        /* 中央寄せはそのまま */
    }

    .detail_text h4 {
        font-size: 28px;
        /* 見出しも小さく */
        margin-bottom: 40px;
        /* 余白調整 */
    }

    .event_overview {
        font-size: 20px;
    }

    .event_overview_text {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 60px;
    }

    .event_overview_box {
        width: 90%;
        /* 固定幅から割合に */
        max-width: 600px;
        /* 最大幅は維持 */
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #Event_detail .btn_eventdetail {
        margin-top: 100px;
        margin-bottom: 80px;
        font-size: 14px;
    }

    /* button {
        margin-right: 50px;
    }

    button::after {
        right: -50px;
        top: -10px;
    } */
}

/* --- responsive design for smartphone (iPhoneサイズ以下) --- */
@media screen and (max-width: 375px) {

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .event_detail_Photo img {
        width: 70%;
        max-width: none;
        height: auto;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .detail_text h4 {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .detail_text {
        font-size: 14px;
        line-height: 1.6;
        padding-bottom: 60px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .event_overview {
        font-size: 16px;
    }

    .event_overview_text {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .event_overview_box {
        width: 80%;
        padding: 10px;
    }

    /* .address {
        display: block;
    }

    .train {
        display: block;
    } */

    .gaiyou {
        display: block;
    }

    #Event_detail .btn_eventdetail {
        font-size: 14px;
        text-align: center;
        margin: 60px auto;
    }

    /* button {
        font-size: 14px;
        margin: 0 auto;
        display: inline-block;
    }

    button::after {
        content: '';
        display: none;
        スマホでは矢印を非表示にするなどもあり
    } */


    #Event_detail .btn_eventdetail {
        font-size: 14px;
        text-align: center;
        margin: 60px auto;
    }

    button {
        margin: 0 auto;
        display: inline-block;
        position: relative;
        padding-right: 40px;
        /* ← 矢印が大きくなる分、余白を増やす */
    }

    button::after {
        content: url(../images/arrow.svg);
        position: absolute;
        right: -40px;
        /* ← サイズに合わせて位置も調整 */
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        /* ← 16px × 2 に拡大 */
        height: auto;
    }


    footer .footer_innerWrap {
        padding: 20px;
    }

    .footer_company {
        font-size: 12px;
        line-height: 1.4;
    }

    .footer_sns img {
        width: 24px;
        height: 24px;
    }

}




/* ---responsible design for iPad pro--- */
/* -----------レスポンシブここまで------------ */