@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
    font-family: "Noto Sans JP", sans-serif; /* メインフォント */
    font-size: 24px;                 /* 基本の文字サイズ */
    line-height: 1.5;                /* 行間の指定 */
    color: #000;                     /* テキストカラー */
    margin: 0; /* 余白をリセット */
    width: 100%; /* 幅いっぱいに広げる */
    height: auto; /* 高さは自動調整 */
    font-weight: 700;
  }
.top_contents {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-size: 100% auto; /* 横幅を100%、高さを自動調整 */
}

.main_visual_title,
.main_visual_rokunin {
    will-change: transform, opacity;
}

.main_visual_title.zoomin.is-animated {
    animation: zoomIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.main_visual_rokunin.fadeup.is-animated {
    animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}










.main_visual {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main_visual_frame {
    width: 100%;
}
.main_visual_title {
    width: 90%;
    margin: 60px 0 120px 0;
}
.main_visual_shadow {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(img/mainVisual_yoakemae_shadow.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.main_visual_rokunin {
    width: 90%;
}

.story {
    display: flex;
    justify-content: center;
    /*width: 55%;*/
    margin: 0 auto;
}
.story img {
    height: auto;
    margin-left: 50px;
}
.venue_bar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 400px;
    background-color: #000;
    gap: 50px;
}
.venue_bar div {
    display: flex;
    justify-content: center;
    width: 55%;
}

.bar_dc {
    width: 90%;
    height: auto;
}

.bar_venue {
    width: 60%;
    height: auto;
}
.main_contents {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #EEF2F3;
    background-size: 100% auto; /* 横幅を100%、高さを自動調整 */
}
.story_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    margin: 140px 0 120px 0;
}
.content {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 120px 0;
}
.cast dl {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cast dt {
    width: 200px;
    background-color: #000;
    color: #FFF;
    font-size: 30px;
    padding: 8px 16px;
    margin-bottom: 60px;
    text-align: center;
}
.cast dd {
    margin-bottom: 24px;
}

.theater_company {
    font-size: 14px;
}
.content_area {
    margin-top: 80px;
    width: 80%;
    display: flex;
    justify-content: center;
    position: relative;
}
.title {
    width: 300px;
    background-color: #000;
    color: #FFF;
    font-size: 30px;
    padding: 8px 16px;
    margin-bottom: 60px;
    text-align: center;
}
.onokun {
    background-image: url(img/onokun_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 70%;
    position: absolute;
    top: 5%;
}
.kobayashikun {
    background-image: url(img/kobayashikun_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: 0;
}
.tsujikun {
    background-image: url(img/tsujikun_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 70%;
    position: absolute;
    top: 30%;
}
.yazakikun {
    background-image: url(img/yazakikun_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 40%;
}
.fujimotosan {
    background-image: url(img/fujimotosan_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 40%;
}

.matsudaikun {
    background-image: url(img/matsudakun_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 40%;
}

.musashisan {
    background-image: url(img/musashisan_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 35%;
    position: absolute;
    top: 5%;
}

.cast,
.schedule,
.ticket,
.access,
.staff {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.schedule_sub {
    display: flex;
    align-items: flex-end;
}
.schedule_sub img {
    width: 90%;
    height: auto;
}
.schedule_notes {
    display: flex;
    justify-content: flex-end;
    margin-top: 64px;
}
.ticket {
    position: relative;
}
.ticket_sub {
    width: 100%;
}
.ticket_type {
    font-size: 20px;
    width: 20%;
    padding-top: 20px;
}
.amount {
    font-size: 30px;
    padding-top: 20px;
}
.notes {
    font-weight: normal;
    font-size: 18px;
}
.reserve {
    display: flex;
    justify-content: flex-end;
    margin-top: 60px;
}
.reserve_button {
    border-radius: 39px;
    background-color: #D76E0F;
    border:  2px solid #D76E0F;
    color: #fff;
    display: block;
    width: 400px;
    text-decoration: none;
    padding: 18px 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.reserve_button:hover {
    background-color: #fff;
    color: #D76E0F;
    border:  2px solid #D76E0F;
}
.line_button,.hp_button  {
    display: block;
    width: 400px;
    background-color: #D76E0F;
    border:  2px solid #D76E0F;
    color: #fff;
    text-decoration: none;
    padding: 18px 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.line_button:hover,
.hp_button:hover {
    background-color: #fff;
    color: #D76E0F;
    border:  2px solid #D76E0F;
}

.venue_name {
    margin-bottom: 40px;
}
.map_address {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.map_address_right {
    font-size: 18px;
}
.address {
    margin-bottom: 40px;
}
.travel_time {
    margin-bottom: 40px;
}
.theater_button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    width: 200px; /* ボタンの幅を調整 */
    position: relative;
    border: #000 1px solid;
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.icon {
    margin-left: 10px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('img/open_in_new.svg'); /* アイコンのURLを指定 */
    background-size: cover;
}
.theater_button:hover {
    background-color: #DDD;
}
section.staff {
    margin-bottom: 60px;
}

.bottom_area {
    width: 100%;
    position: relative;
}
.bottom_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    height: auto;
    width: 100%;
}
.bottom_content {
    width: 70%;
    color: #fff;
    margin: 140px 0;
}
.kimbasha_title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #333;
}
.kimbasha_logo {
    display: flex;
    justify-content: center;
    width: 50%;
}
.kimbasha_logo img {
    width: 100%;
}
.kimbasha_about {
    margin: 80px 0 120px 0;
}
.button_area {
    display: flex;
    justify-content: space-around;
}
footer {
    background-color: #5A5E61;
    color: #FFF;
    height: 80px;
    padding: 12px 20px 6px 20px;
}
.footer_content {
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.footer_content img {
    height: 100%;
}

.copyright {
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.copyright p {
    font-size: 14px;
}


/* 中間サイズ用 */
@media screen and (max-width: 1400px) {
    body {
        font-size: 18px; /* フォントサイズを調整 */
        line-height: 1.5; /* 行間を維持 */
    }
    .top_contents {
        background-size: contain; /* 背景画像を縮小表示 */
    }
    .story, .venue_bar div, .story_area {
        width: 80%; /* コンテンツ幅を調整 */
    }
    .venue_bar {
        height: auto; /* 高さを自動調整 */
        padding: 40px 0; /* 余白を追加 */
    }
    .bar_dc {
        width: 60%;
    }
    .bar_venue {
        width: 40%;
    }
    .story img {
        width: 75%;
        height: auto;
    }
    .story_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: unset;
        margin: 100px 0 120px 0;
    }
    .content {
        width: 70%;
        margin: 70px 0;
    }
    .cast dt {
        width: 150px; /* 見出し幅を調整 */
        font-size: 22px; /* フォントサイズを調整 */
        padding: 8px 16px;
    }
    .cast dd {
        margin-bottom: 24px;
    }
    .kobayashikun {
        bottom: -120px;
    }
    .theater_company {
        font-size: 12px; /* フォントサイズを調整 */
    }
    .title {
        width: 200px; /* タイトルの幅を調整 */
        font-size: 24px; /* フォントサイズを調整 */
    }
    .schedule_sub {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ticket_type {
        font-size: 16px; /* フォントサイズを調整 */
        width: 30%; /* 幅を調整 */
    }
    .amount {
        font-size: 24px; /* フォントサイズを調整 */
    }
    .notes {
        font-size: 14px; /* フォントサイズを調整 */
    }
    .reserve_button {
        display: block;
        width: 350px;
        text-decoration: none;
        padding: 18px 8px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.5s ease, color 0.5s ease;
    }
    .line_button, .hp_button {
        display: block;
        width: 350px;
        text-decoration: none;
        padding: 18px 8px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.5s ease, color 0.5s ease;
    }
    .map_address {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 60px; /* 縦方向の余白を調整 */
    }
    .map_address_right {
        font-size: 16px;
    }
    .address {
        margin-bottom: 30px;
    }
    .bottom_content {
        width: 80%; /* コンテンツ幅を調整 */
    }
    .kimbasha_logo {
        width: 50%; /* ロゴサイズを調整 */
    }
    .kimbasha_about {
        margin: 60px 0 80px 0; /* 上下の余白を調整 */
    }
    .button_area {
        gap: 16px; /* ボタン間の余白を調整 */
    }
    footer {
        height: 60px; /* フッター高さを調整 */
    }
    .copyright p {
        font-size: 12px; /* フォントサイズを調整 */
    }
}

/* 中間サイズ用 */
@media screen and (max-width: 1140px) {
    .map_address {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start;
        gap: 40px; /* 縦方向の余白を調整 */
    }
    .map_address iframe {
        width: 100%; /* 地図の幅を親要素に合わせる */
        height: auto; /* 高さを自動調整 */
    }
    .map_address_right {
        font-size: 16px;
    }
    .address {
        margin-bottom: 20px;
    }
}


/* スマートフォン用 */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* フォントサイズを小さく */
        line-height: 1.4; /* 行間を調整 */
    }
    .top_contents {
        background-size: cover; /* 背景画像のサイズ調整 */
    }
    .main_visual_title {
        width: 90%;
        margin: 30px 0 40px 0;
    }
    .story {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 20px auto;
    }
    .story_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
        width: 100%;
    }
    .story img {
        margin-left: 5%;
        width: 80%
    }
    .venue_bar div {
        width: 90%; /* コンテンツの幅を調整 */
    }
    .venue_bar {
        height: auto; /* 高さを自動調整 */
        padding: 20px 0; /* 余白を追加 */
        gap: 15px;
    }
    .venue_bar img {
        width: 65%; /* 画像サイズ調整 */
    }
    .content_area {
        margin-top: 20px;
        width: 85%;
    }
    .content {
        margin: 60px 0;
        width: 80%;
    }
    .onokun {
        height: 30%;
    }
    .kobayashikun {
        height: 40%;
        bottom: -50px;
    }
    .tsujikun {
        height: 40%;
        top: 76%;
    }
    .yazakikun {
        height: 30%;
        top: 67%;
    }
    .fujimotosan {
        height: 30%;
        top: 60%;
    }

    .matsudaikun {
        height: 40%;
        top: 40%;
    }

    .musashisan {
        height: 30%;
        top: 5%;
    }
    .cast dt {
        width: 120px;
        background-color: #000;
        font-size: 18px;
        padding: 8px 16px;
        margin-bottom: 40px;
        text-align: center;
    }
    .cast dd {
        margin-bottom: 20px;
    }
    .theater_company {
        font-size: 10px;
    }
    .title {
        width: 160px;
        background-color: #000;
        color: #FFF;
        font-size: 18px;
        padding: 8px 16px;
        margin-bottom: 40px;
        text-align: center;
    }
    .schedule_sub {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .schedule_sub img {
        width: 100%;
        height: auto;
    }
    .schedule_notes {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        margin-top: 18px;
    }
    .haishin_icon {
        width: 14px;
    }
    .ticket_sub {
        width: 100%;
    }
    .ticket_type {
        font-size: 12px;
        width: 40%;
        padding-top: 20px;
    }
    .amount {
        font-size: 18px;
        padding-top: 20px;
    }
    .notes {
        font-size: 10px;
    }
    .reserve {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }
    .reserve_button {
        width: 100%;
        padding: 16px;
    }
    .line_button, .hp_button {
        width: 55%;
        padding: 12px;
    }
    .map_address {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start;
        gap: 40px; /* 縦方向の余白を調整 */
    }
    .map_address iframe {
        width: 100%; /* 地図の幅を親要素に合わせる */
        height: auto; /* 高さを自動調整 */
    }
    .map_address_right {
        font-size: 12px;
    }
    .address {
        margin-bottom: 20px;
    }
    .theater_button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding: 10px 20px;
        font-size: 14px;
        color: #000;
        width: 180px; /* ボタンの幅を調整 */
        position: relative;
        border: #000 1px solid;
        text-decoration: none;
        transition: background-color 0.5s ease, color 0.5s ease;
    }
    .icon {
        margin-left: 10px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url('img/open_in_new.svg'); /* アイコンのURLを指定 */
        background-size: cover;
    }
    .theater_button:hover {
        background-color: #CCC;
    }
    section.staff {
        margin-bottom: 0;
    }
    .bottom_content {
        width: 85%;
        margin: 50px 0;
    }
    .kimbasha_about {
        margin: 30px 0 45px 0;
    }
    .button_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    }
    .kimbasha_logo {
        width: 55%; /* ロゴサイズ調整 */
    }
    footer {
        background-color: #5A5E61;
        color: #FFF;
        height: 50px;
        padding: 12px 10px 6px 10px;
    }
    .copyright p {
        font-size: 10px;
    }
}