@charset "UTF-8";

/* ========================================
   基本設定
   ======================================== */
html {
    font-size: 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    font-family: 'Noto Sans JP', sans-serif, 'Raleway', sans-serif, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MSPゴシック', 'MS PGothic', sans-serif;
}

body::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;     
}

body::after{
    content: '';
    width: calc(100% - 8rem);
    height: calc(100% - 8.8rem);
    background-image: 
        url('../img/bg/star-left.png'),
        url('../img/bg/star-right.png'),
        url('../img/bg/bg-gold-new.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left center, right center, center center;
    background-size: contain, contain, auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 6.8rem;
    border-radius: 24px;
    z-index: -1;
}

.bg_star{
    width: 100%;
    height: auto;
    pointer-events: none;
}

.bg_text{
    width: 98%;
    height: auto;
    display: block;
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* スマホ用: 背景画像を非表示（560px以下） */
@media screen and (max-width: 560px) {
    .bg_text,
    body::after {
        display: none;
    }
}

/* ========================================
   大学名ヘッダー
   ======================================== */
.university_name {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    border-bottom: 1px solid #000;
}

/* PC用: 大学名タイトルを表示 */
.university_name_title {
    display: block;
}

@media screen and (min-width: 561px) {
    .university_name_title_image {
        width: 34rem;
        height: auto;
        display: block;
    }
}

/* モバイル用要素は非表示（PC時） */
.mobile_header_join_text,
.mobile_header_menu_button,
.mobile_header_close_button {
    display: none;
}

.mobile_break {
    display: none;
}

.mobile_menu_overlay {
    display: none;
}

/* ========================================
   コンテンツ全体
   ======================================== */
.contents_inner {
    width: 1040px;
    max-width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto;
    padding-top: 48px;
    padding-bottom: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
}

/* ========================================
   左メニュー
   ======================================== */
.left_menu {
    width: 327px;
    max-width: 100%;
    /* height: 514px; 次回の目玉を消しているのでここはautoにしている*/
    height: auto;
    position: fixed;
    left: calc(50% - 520px);
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

/* 1040pxから930pxまでは間を詰めていく */
@media screen and (max-width: 1040px) and (min-width: 931px) {
    .contents_inner {
        width: 930px;
        max-width: calc(100vw - 3.2rem);
    }

    .left_menu {
        left: calc(50% - 465px);
    }
}

/* 930px以下でleft_menuを非表示、right_menuを中央に */
@media screen and (max-width: 930px) {
    .left_menu {
        display: none;
    }

    .contents_inner {
        width: 100%;
        justify-content: center;
    }

    .right_menu {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.left_menu_title {
    width: 100%;
    height: auto;
    display: block;
}

.menu_list {
    width: 32.7rem;


    /* height: 41.6rem; */
    height: auto;


    background-color: #fff;
    border-radius: 1.6rem;
    border: 1px solid #111111;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 1.6rem;
    padding: 1.6rem;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu_items {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu_item {
    text-align: center;
}

.menu_text {
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    display: inline-block;
    margin: 0 0 1.6rem 0;
    padding: 0;
    line-height: 1;
    transition: color 0.3s ease;
}

.menu_text:hover {
    color: #FE673E;
}

.menu_text::after {
    content: '';
    position: absolute;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 28rem;
    height: 0.1rem;
    background-color: #C3C3C3;
}

.join_button {
    width: 27.9rem;
    height: 6.2rem;
    display: block;
    cursor: pointer;
    transition: .3s;
    position: relative;
    z-index: 10;



    /* 次回のメニューがないのでmarginをいれます */
    margin-top: 2.4rem;
  }

.join_button:hover {
    opacity: 0.5;
}

.join_button img {
    display: block;
    width: 100%;
    height: 100%;
    
  }

/* ========================================
   右メニュー
   ======================================== */
.right_menu {
    width: 560px;
    max-width: 100%;
    height: auto;
    background-color: #FFF8EF;
    border: 1px solid #111111;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    align-self: flex-start;
    margin-top: 10vh;
    margin-bottom: -10vh;
    margin-left: auto;
    box-sizing: border-box;
}

.menu_inner {
    width: 100%;
    padding: 2.4rem 1.6rem 0 1.6rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* ========================================
   メインビジュアルセクション (right_mv_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.right_mv_hangar {
    width: calc(100% - 1.6rem);
    /* aspect-ratio: 4 / 5; */
    min-height: 30rem;
    max-height: 64rem;
    border-radius: 24px;
    border: 1px solid #111111;
    position: relative;
    margin: 0 auto 1.6rem;
  }
  

/* --- 子要素: スライダーコンテナ --- */
/* PC用（930px以上）のみ適用 */
@media screen and (min-width: 931px) {
    .mv_slider {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 24px;
    }
}

/* --- 子要素: スライド画像（Swiper用） --- */
.mv_slider .swiper-slide {
    width: 100%;
    height: 100%;
}

.mv_slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 装飾要素: コピー画像 --- */
.right_mv_hangar::after {
    content: '';
    position: absolute;
    width: 29.9rem;
    height: auto;
    aspect-ratio: 299 / 130; /* 元の比率: 29.9rem / 13rem */
    background-image: url('../img/right_menu/right_mv/copy.png');
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    top: -1.6rem;
    right: -0.8rem;
    z-index: 2;
}

/* --- モバイル用（930px以下） --- */
@media screen and (max-width: 930px) {
    .right_mv_hangar {
        height: 0;
        padding-bottom: 125%; /* aspect-ratio: 4/5 = 125% */
        position: relative;
    }

    .mv_slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
    }
}

/* ========================================
   説明セクション (right_explain_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.right_explain_hangar {
    padding-top: 1.6rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    height: auto;
    width: 100%;


    /* padding-bottom: 6.4rem;
    次回の目玉がdisplay:noneの時だけpadding-bottom: 6.4rem;を非表示にする */
}


/* --- 子要素: 説明テキスト --- */
.right_explain_hangar h2 {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    line-height: 3.8rem;
}

/* --- 子要素: リストコンテナ --- */
.explain_list_container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.6rem;
    width: 100%;
}

/* --- 子要素: リスト行 --- */
.explain_list_row {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 4px;
}

/* --- 子要素: リスト項目 --- */
.explain_list_item {
    flex: 0 0 auto;
    width: fit-content;
    padding: 8px 12px;
    background-color: #FFFFFF;
    border: 1px solid #111111;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.5px;
}


.explain_emoji-pallete {
    display: inline-block;
    width: auto ;
    height: 1.6rem;
    margin-left: 0.2em;
    vertical-align: middle;
}
.explain_emoji {
    display: inline-block;
    width: auto ;
    height: 1.6rem;
    margin-left: 0.2em;
    vertical-align: middle;
}



.scroll_menu_department .explain_emoji {
    width: auto;
    height: 1.4em;
    border: none;
    margin:0;
    border-radius: 0;
    margin-left: 0em;
    margin-right: 0em;
}

.scroll_menu_department .explain_emoji-pc {
    width: auto;
    height: 1.1em;
    border: none;
    margin:0;
    border-radius: 0;
    margin-left: 0.2em;
    margin-right: 0em;
  
}



.scroll_menu_department .explain_emoji-pallete {
    width: auto;
    height: 1.4em;
    border: none;
    margin:0;
    border-radius: 0;
    margin-left: 0.2em;
    margin-right: 0em;
  
}



/* ========================================
   次回のオープンキャンパスの目玉セクション (right_next_main_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.right_next_main_hangar {
    width: 100%;
    margin-left: -2.4rem;
    margin-right: -2.4rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    box-sizing: content-box;
    display:none;
}


/* --- 子要素: タイトル画像 --- */
.right_next_main_title {
   width: calc(100% + 3.2rem);
   margin-left: -1.6rem;
   display: block;
   height: auto;
   margin-bottom: 2rem;
}

/* --- 子要素: スクロールメニューコンテナ --- */
.scroll_main_menu {
    position: relative;
    margin-left: -2.4rem;
}

/* --- ボタンコンテナ --- */
.scroll_menu_buttons_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22rem; /* デフォルト（560px以下） */
    margin-left: 1.2rem; /* デフォルト（560px以下） */
    z-index: 10;
}

/* --- Swiper標準ナビゲーションボタンのカスタマイズ（上書き） --- */
.scroll_menu_button_prev,
.scroll_menu_button_next {
    position: relative ;
    top: auto;
    left: auto;
    right: auto;
    width: 4.4rem ;
    height: 4.4rem ;
    z-index: 10 ;
    cursor: pointer ;
    background-image: url('../img/right_menu/right_next_main/left_arrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: auto ;
}

.scroll_menu_button_prev {
    /* 左矢印はそのまま */
}

.scroll_menu_button_next {
    transform: rotate(180deg) ;
}

/* Swiper標準ボタンのデフォルトスタイルを完全にリセット */
.scroll_menu_button_prev::after,
.scroll_menu_button_next::after {
    display: none ;
    content: none ;
}

/* 無効化時のスタイル */
.scroll_menu_button_prev.swiper-button-disabled,
.scroll_menu_button_next.swiper-button-disabled {
    opacity: 0.35 ;
    cursor: auto ;
    pointer-events: none ;
}

/* PC用（931px以上） */
@media screen and (min-width: 931px) {
    .scroll_menu_buttons_container {
        gap: 34rem;
        margin-left: 1.3rem;
    }
}

/* 930px以下はmobile.cssで管理 */

/* --- 子要素: Swiperコンテナ --- */
.scroll_menu_swiper {
    width: calc(100% + 3.2rem);
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    overflow: visible;
    position: relative;
}

/* Swiper wrapperの位置を調整して中央配置を正確に */
.scroll_menu_swiper .swiper-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* --- 子要素: メニューリスト --- */
.scroll_menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Swiper wrapperの位置を調整して中央配置を正確に */
.scroll_menu_swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

/* --- 子要素: メニュー項目 --- */
.scroll_menu_item {
    width: 38rem;
    height: 58.4rem;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 24px;
    flex-shrink: 0;
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.scroll_menu_item img {
    width: 33.2rem;
    height: 42.1rem;
    border-radius: 2rem;
    border: 1px solid #111111;
    object-fit: cover;
    display: block;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
}

.scroll_menu_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    margin-bottom: 1.6rem;
    padding: 0;
}

.scroll_menu_department {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    width: fit-content;
    height: 3rem;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    align-self: flex-start;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* --- 状態別スタイル: 学部バッジ --- */
.scroll_menu_department_1 {
    color: #FE673E;
    border: 1px solid #FE673E;
    background-color: #FFF9F7;
}

.scroll_menu_department_2 {
    color: #276FFF;
    border: 1px solid #276FFF;
    background-color: #F8FBFF;
}

.scroll_menu_department_3 {
    color: #FE1D73;
    border: 1px solid #FE1D73;
    background-color: #FFF7FB;
    justify-content: flex-start;
}

/* --- 装飾要素: 番号画像 --- */
.scroll_menu_item::after {
    content: '';
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 7rem;
    height: 6rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.scroll_menu_item[data-slide-number="1"]::after {
    background-image: url('../img/right_menu/right_next_main/01.png');
}

.scroll_menu_item[data-slide-number="2"]::after {
    background-image: url('../img/right_menu/right_next_main/02.png');
}

.scroll_menu_item[data-slide-number="3"]::after {
    background-image: url('../img/right_menu/right_next_main/03.png');
}

/* --- Swiper関連 --- */
.scroll_menu_swiper .swiper-slide {
    height: auto;
    width: 38rem ;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* スマホ用: スライドサイズを26.4rem × 42.6remに変更 */
@media screen and (max-width: 930px) {
    .scroll_menu_item {
        width: 26.4rem;
        height: 42.6rem;
        padding: 1.6rem;
    }

    .scroll_menu_swiper .swiper-slide {
        width: 26.4rem;
    }

    .scroll_menu_item img {
        width: 23.2rem; /* 26.4rem - 1.6rem * 2 (padding) = 23.2rem */
        height: auto;
        margin-bottom: 1.2rem;
    }

    .scroll_menu_text {
        font-size: 1.6rem;
        line-height: 2.4rem;
        margin-bottom: 0.8rem;
    }
}

/* ========================================
   開催日程セクション (open_campus_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.open_campus_hangar {
    width: 100%;
    height: auto;
    margin-top: 6.4rem;
    text-align: center;
    padding-bottom: 9.6rem;
}


/* --- 子要素: タイトル画像 --- */
.open_campus_image {
    width: 38rem;
    height: 6.6rem;
    display: block;
    margin: 0 auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin-bottom: 2.4rem;
}

/* --- 子要素: 日程リスト --- */
.open_campus_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: calc(100% - 3.2rem);
    height: auto;
}

/* --- 子要素: 日程項目 --- */
.open_campus_item {
    width: 16.5rem;
    height: 9.2rem;
    background-color: #FFFFFF;
    border-radius: 1.6rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    box-sizing: border-box;
}

/* --- 子要素: リンク（参加申し込み可能な場合） --- */
.open_campus_item_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* --- 子要素: 日付ラッパー --- */
.open_campus_date_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    font-size: 0;
    width: 100%;
}

.open_campus_date {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 2.8rem;
    font-weight: 700;
    color: #111111;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.2rem;
}

.open_campus_day {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FF0000;
    margin: 0;
    padding: 0;
    width: auto;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: baseline;
    box-sizing: border-box;
    display: inline-block;
}

/* --- 状態別スタイル: 曜日 --- */
.open_campus_day-saturday {
    color: #0045FF;
    font-size: 1.6rem;
    font-weight: 700;
}

/* --- 子要素: ステータス表示 --- */
.open_campus_status {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
}

.open_campus_status_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
}

.open_campus_status_arrow {
    width: 0.4rem;
    height: 0.9rem;
    margin-left: 0.8rem;
    display: block;
    color: #000000;
}

/* --- 状態別スタイル: 参加可能 --- */
.open_campus_status-available {
    border: 1px solid #111111;
    cursor: pointer;
}

.open_campus_status-available .open_campus_status {
    background-color: #FFDA00;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: none;
    border-right: none;
    border-radius: 0;
    width: 13.2rem;
    height: 2.6rem;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.open_campus_item.open_campus_status-available:hover .open_campus_status {
    background-color: #000000;
}

.open_campus_item.open_campus_status-available:hover .open_campus_status_text,
.open_campus_item.open_campus_status-available:hover .open_campus_status_arrow {
    color: #FFDA00;
}

/* --- 状態別スタイル: 終了 --- */
.open_campus_status-ended {
    border: 1px solid #A8A8A8;
    background-color: #D5D5D5;
}

.open_campus_status-ended .open_campus_item_link {
    cursor: default;
}

.open_campus_status-ended .open_campus_status::before {
    content: '終了しました';
}

.open_campus_status-ended .open_campus_status {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
}

/* --- 状態別スタイル: 準備中 --- */
.open_campus_status-preparing {
    border: 1px solid #A8A8A8;
}

.open_campus_status-preparing .open_campus_item_link {
    cursor: default;
}

.open_campus_status-preparing .open_campus_status::before {
    content: '準備中';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #A8A8A8;
}

.open_campus_status-preparing .open_campus_status {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #A8A8A8;
}

/* --- モバイル用（930px以下） --- */
@media screen and (max-width: 930px) {
    .open_campus_list {
        width: 100%;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        box-sizing: border-box;
    }

    .open_campus_item {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   プログラムセクション (program_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.program_hangar {
    position: relative;
    height: auto;
}


/* --- 装飾要素: 背景 --- */
.program_hangar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2.4rem;
    width: calc(100% + 4.8rem);
    height: 100%;
    background-color: #F2F2F2;
    z-index: 0;
}

.program_hangar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2.4rem;
    width: calc(100% + 4.8rem);
    height: 5.9rem;
    background-image: url('../img/right_menu/program/bg_line.svg');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    z-index: 1;
    transform: translateY(-50%);
}

/* --- 子要素: タイトル画像 --- */
.program_title {
    width: 100%;
    height: auto;
    padding-top: 9.3rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    display: block;
    position: relative;
    z-index: 1;
}

/* --- 子要素: タブリスト --- */
.program_tab_list {
    display: flex;
    gap: 1.6rem;
    width: 100%;
    margin-top: 1.2rem;
}

.program_tab_item {
    display: flex;
    justify-content: center;
    flex: 1 1 0;

    min-width: 0;       /* これがないと“内容”で踏ん張ってはみ出す */
    box-sizing: border-box;
}

/* --- 子要素: タブボタン（基本） --- */
.program_tab_button {
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* --- 子要素: 参加ボタン --- */
.program_join_button {
    display: block;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 6.4rem;
    cursor: pointer;
    transition: .3s;
    position: relative;
    z-index: 10;
}

.program_join_button img {
    display: block;
    width: 100%;
    height: 100%;
}

.program_join_button:hover {
    opacity: 0.5;
}

/* --- 子要素: 背景ライン（下部） --- */
.program_bg_line_bottom {
    position: relative;
    width: calc(100% + 3.2rem);
    height: auto;
    display: block;
    margin-left: -1.6rem;
    z-index: 0;
}

/* --- 状態別スタイル: タブボタン - 事業創造学部 --- */
.program_tab_item-business .program_tab_button {
    width: 100%;
    height: 6.7rem;
    background-color: #FFF9F7;
    border-top: 1px solid #FE673E;
    border-left: 1px solid #FE673E;
    border-right: 1px solid #FE673E;
    border-bottom: none;
    border-radius: 1.6rem 1.6rem 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FE673E;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: height 0.15s ease, margin-bottom 0.15s ease, top 0.15s ease;
    margin-bottom: 0;
    top: 0;
}

/* --- 子要素: タブボタンライン - 事業創造学部 --- */
.program_tab_item-business .program_tab_button_line {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #FFF9F7;
    display: none;
    pointer-events: none;
}

.program_tab_item-active.program_tab_item-business .program_tab_button_line {
    display: block;
}

/* --- 状態別スタイル: タブボタン - 情報学部 --- */
.program_tab_item-info .program_tab_button {
    width: 100%;
    height: 6.7rem;
    background-color: #F2F3FD;
    border-top: 1px solid #276FFF;
    border-left: 1px solid #276FFF;
    border-right: 1px solid #276FFF;
    border-bottom: none;
    border-radius: 1.6rem 1.6rem 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #276FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: height 0.15s ease, margin-bottom 0.15s ease, top 0.15s ease;
    margin-bottom: 0;
    top: 0;
}

/* --- 子要素: タブボタンライン - 情報学部 --- */
.program_tab_item-info .program_tab_button_line {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 3px;
    background-color: #F2F3FD;
    display: none;
}

.program_tab_item-active.program_tab_item-info .program_tab_button_line {
    display: block;
}

/* --- 状態別スタイル: タブボタン - アニメ・マンガ学部 --- */
.program_tab_item-anime .program_tab_button {
    width: 100%;
    height: 6.7rem;
    background-color: #FFFDFE;
    border-top: 1px solid #FF1D74;
    border-left: 1px solid #FF1D74;
    border-right: 1px solid #FF1D74;
    border-bottom: none;
    border-radius: 1.6rem 1.6rem 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FE1D73;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: height 0.15s ease, margin-bottom 0.15s ease, top 0.15s ease;
    margin-bottom: 0;
    top: 0;
}

/* --- 子要素: タブボタンライン - アニメ・マンガ学部 --- */
.program_tab_item-anime .program_tab_button_line {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 3px;
    background-color: #FFFDFE;
    display: none;
}

.program_tab_item-active.program_tab_item-anime .program_tab_button_line {
    display: block;
}

/* --- 未選択時のタブボタン --- */
.program_tab_item:not(.program_tab_item-active) .program_tab_button {
    background-color: #BABBC4;
    color: #FFFFFF;
    border-color: #BABBC4;
}

.program_tab_item:not(.program_tab_item-active).program_tab_item-business .program_tab_button {
    border-top-color: #BABBC4;
    border-left-color: #BABBC4;
    border-right-color: #BABBC4;
}

.program_tab_item:not(.program_tab_item-active).program_tab_item-info .program_tab_button {
    border-top-color: #BABBC4;
    border-left-color: #BABBC4;
    border-right-color: #BABBC4;
}

.program_tab_item:not(.program_tab_item-active).program_tab_item-anime .program_tab_button {
    border-top-color: #BABBC4;
    border-left-color: #BABBC4;
    border-right-color: #BABBC4;
}

/* --- 状態別スタイル: ホバー・アクティブ状態 --- */
.program_tab_item:hover .program_tab_button {
    height: 7.7rem;
    top: -1rem;
    margin-bottom: -1rem;
    align-items: flex-start;
    padding-top: 2rem;
}

.program_tab_item-active .program_tab_button {
    top: 0;
}

/* --- 選択されたタブコンテンツ --- */
.program_tab_content.program_tab_content-active {
    display: block;
}

.program_tab_break {
    display: none;
}

/* --- 子要素: タブコンテンツ（共通） --- */
.program_tab_content {
    width: 100%;
    height: auto;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    padding-bottom: 2.4rem;
    border-radius: 0 0 1.6rem 1.6rem;
    margin-top: -0.5px;
    position: relative;
}

/* --- 状態別スタイル: タブコンテンツ - 事業創造学部 --- */
.program_tab_content-business {
    border-left: 1px solid #FE673E;
    border-right: 1px solid #FE673E;
    border-bottom: 1px solid #FE673E;
    background-color: #FFF9F7;
    position: relative;
    display: none;
}

/* .program_tab_content-business::before{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem)) - 0.2rem);
    height: 0.1rem;
    background-color: #FE673E;
    position: absolute;
    top: 0;
    left: 0;
} */

.program_tab_content-business::after{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem)) - 0.4rem);
    height: 0.1rem;
    background-color: #FE673E;
    position: absolute;
    top: 0;
    right: 0;
}


/* --- 状態別スタイル: タブコンテンツ - 情報学部 --- */
.program_tab_content-info {
    border-left: 1px solid #276FFF;
    border-right: 1px solid #276FFF;
    border-bottom: 1px solid #276FFF;
    background-color: #F2F3FD;
    position: relative;
    display: none;
}

.program_tab_content-info::before{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem)) / 2 - 0.2rem);
    height: 0.1rem;
    background-color: #276FFF;
    position: absolute;
    top: 0;
    left: 0;
}

.program_tab_content-info::after{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem)) / 2 - 0.2rem);
    height: 0.1rem;
    background-color: #276FFF;
    position: absolute;
    top: 0;
    right: 0;
}


/* --- 状態別スタイル: タブコンテンツ - アニメ・マンガ学部 --- */
.program_tab_content-anime {
    border-left: 1px solid #FF1D74;
    border-right: 1px solid #FF1D74;
    border-bottom: 1px solid #FF1D74;
    background-color: #FFFDFE;
    position: relative;
    display: none;
}

.program_tab_content-anime::before{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem))  - 0.4rem);
    height: 0.1rem;
    background-color: #FF1D74;
    position: absolute;
    top: 0;
    left: 0;
}


.program_content_note{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    color: #FF0000;
    margin-top: 1.6rem;
}

/* .program_tab_content-anime::after{
    content: '';
    width: calc((100% - calc(100% / 3 - 1.6rem)) / 2 - 0.2rem);
    height: 0.1rem;
    background-color: #FF1D74;
    position: absolute;
    top: 0;
    right: 0;
} */


/* セクションのスクロール位置調整（固定ヘッダー分のオフセット） */
#next-main,
#open-campus,
#program,
#transportation,
#faq-access {
    scroll-margin-top: 4.8rem; /* PC用: university_nameの高さ */
}

@media screen and (max-width: 560px) {
    #next-main,
    #open-campus,
    #program,
    #transportation,
    #faq-access {
        scroll-margin-top: 6.4rem; /* スマホ用: mobile_headerの高さ */
    }
}

/* --- 子要素: プログラムコンテンツリスト --- */
.program_content_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.4rem;
    row-gap: 2.4rem;
    list-style: none;
    margin: 0;
    padding-top: 2.4rem;
    justify-items: center;
}

/* --- 子要素: プログラムコンテンツ項目 --- */
.program_content_item {
    width: 22.8rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.program_content_item:nth-child(6) {
    display: none;
}

.program_content_image {
    width: 22.8rem;
    height: 22.8rem;
    border-radius: 1.6rem;
    border: 1px solid #FE673E;
    object-fit: cover;
    display: block;
}

.program_content_title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FE673E;
    text-align: center;
}

.program_content_time {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
}

/* --- 状態別スタイル: 事業創造学部のコンテンツ --- */
.program_tab_content-business .program_content_item:nth-child(5),
.program_tab_content-business .program_content_item:nth-child(6) {
    display: none;
}

/* --- 状態別スタイル: 情報学部のコンテンツ --- */
.program_tab_content-info .program_content_item:nth-child(6) {
    display: flex; /* 情報学部は6番目ブロックを表示 */
}
.program_tab_content-info .program_content_image {
    border-color: #276FFF;
}

.program_tab_content-info .program_content_title {
    color: #276FFF;
}

/* --- 状態別スタイル: アニメ・マンガ学部のコンテンツ --- */
.program_tab_content-anime .program_content_image {
    border-color: #FF1D74;
}

.program_tab_content-anime .program_content_title {
    color: #FE1D73;
}

/* --- スクロール位置調整（固定ヘッダー分のオフセット） --- */
#next-main,
#open-campus,
#program,
#transportation,
#faq-access {
    scroll-margin-top: 4.8rem; /* PC用: university_nameの高さ */
}

@media screen and (max-width: 560px) {
    #next-main,
    #open-campus,
    #program,
    #transportation,
    #faq-access {
        scroll-margin-top: 6.4rem; /* スマホ用: mobile_headerの高さ */
    }
}

/* --- モバイル用（930px以下） --- */
@media screen and (max-width: 930px) {
    .program_content_list {
        width: 100%;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        box-sizing: border-box;
    }

    .program_content_item {
        width: 100%;
        max-width: 100%;
        gap: 0.8rem;
    }

    .program_content_image {
        width: 100%;
        max-width: 100%;
    }

    .program_content_title {
        width: 100%;
        line-height: 2.4rem;
    }

    .program_content_time {
        width: 100%;
        line-height: 2rem;
    }
    .program_content_note {
        width: 100%;
        height: auto;
        font-size: 1.4rem;
        font-family: 'Noto Sans JP', sans-serif;
        font-color: #FF0000;
        line-height: 1.7rem;
        margin-top: 1.6rem;
    }

    .program_tab_list {
        gap: clamp(0.8rem, calc(0.8rem + (1.6rem - 0.8rem) * ((100vw - 560px) / (1040px - 560px))), 1.6rem);
    }

    .program_tab_item {
        flex: 1;
    }

    .program_tab_item-business .program_tab_button,
    .program_tab_item-info .program_tab_button,
    .program_tab_item-anime .program_tab_button {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   交通費サポートセクション (transportation_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.transportation_hangar {
    width: calc(100% + 3.2rem);
    height: auto;
    position: relative;
    background-color: #FFE8E6;
    margin-left: -1.6rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    box-sizing: border-box;
}


.transportation_title {
    width: 36.9rem;
    height: auto;
    display: block;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
}

.transportation_bg_line {
    width: calc(100% + 3.2rem);
    height: auto;
    display: block;
    margin-left: -1.6rem;
    margin-top: 0;
}

.target_audience {
    list-style: none;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border: 2px solid #111111;
    border-radius: 1.6rem;
    padding: 3.9rem 2.4rem 2.4rem 2.4rem;
    margin-top: 5.3rem;
    margin-bottom: 4.8rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.target_audience::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20.6rem;
    min-height: 5rem;
    background-image: url('../img/right_menu/transportation/target_audiendce_title.svg');
    background-size: 20.6rem auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
}

.target_audience_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    width: 100%;
    line-height: 2.4rem;
}

.target_area {
    list-style: none;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border: 2px solid #111111;
    border-radius: 1.6rem;
    margin: 0;
    padding: 3.9rem 2.4rem 2.4rem 2.4rem;
    margin-bottom: 4.8rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.target_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20.6rem;
    min-height: 5rem;
    background-image: url('../img/right_menu/transportation/target_areatitle.svg');
    background-size: 20.6rem auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
}

.target_area_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    line-height: 2.4rem;
    margin: 0;
    padding: 0;
    width: 100%;
}

.target_area_note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #000000;
    text-align: left;
    line-height: 2rem;
    margin-top: 1.6rem;
    width: 100%;
}

.support_amount {
    list-style: none;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border: 2px solid #111111;
    border-radius: 1.6rem;
    padding: 3.9rem 2.4rem 2.4rem 2.4rem;
    margin-bottom: 4.8rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
   
}

.support_amount::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20.6rem;
    min-height: 5rem;
    background-image: url('../img/right_menu/transportation/support_amount_title.svg');
    background-size: 20.6rem auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
}

.support_amount_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    line-height: 2.4rem;
    width: 100%;
}

.support_amount_text:not(:first-child) {
    margin-top: 1.6rem;
}

.support_amount_note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #000000;
    text-align: left;
    margin-top: 1.6rem;
    line-height: 2rem;
    width: 100%;
    max-width: 48rem;

}

.howto-apply {
    list-style: none;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border: 2px solid #111111;
    border-radius: 1.6rem;
    margin: 0;
    padding: 3.9rem 2.4rem 1.6rem 2.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.howto-apply_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: #000000;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.howto-apply_text_highlight {
    color: #FE673E;
}

.howto-apply::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20.6rem;
    min-height: 5rem;
    background-image: url('../img/right_menu/transportation/howto_apply_title.svg');
    background-size: 20.6rem auto;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
}

.transportation_bg_line_bottom {
    width: calc(100% + 3.2rem);
    height: auto;
    display: block;
    margin-left: -1.6rem;
    margin-top: 6.4rem;
}

/* ========================================
   FAQ・アクセスセクション (faq_access_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.faq_access_hangar {
    width: calc(100% + 3.2rem);
    height: auto;
    position: relative;
    background-color: #FFFBE2;
    margin-left: -1.6rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    padding-top: 6rem;
    box-sizing: border-box;

}


.faq_access_question {
    width: 27.2rem;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.4rem;
}

.faq_access_form_link {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #000000;
    display: inline-flex;
    align-items: center;
    margin-top: 1.2rem;
    transition: opacity .3s;
}

.faq_access_form_link_arrow {
    margin-left: 0.8rem;
    width: auto;
    height: 1rem; /* テキストの高さに合わせて中央揃えしやすくする */
}

.faq_access_form_link:hover {
    opacity: 0.5;
    text-decoration: underline;
    text-decoration-color: #000000;
}

.accordion_list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 4rem;
}

/* アコーディオン項目のコンテナ */
.accordion-item {
    padding-bottom: 1.6rem;
}

/* アコーディオン項目のコンテナ（白背景と黒線） */
.accordion-header {
    text-align: left;
    background-color: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 0.8rem;
    width: 100%;
    height: 5.8rem;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
}

/* 開いている時のヘッダー（下のボーダーを消す） */
.accordion-header.active {
    border-bottom: none;
    border-radius: 0.8rem 0.8rem 0 0;
}

/* 必須 */
.accordion-content {
    display: none;
    background-color: #FFFFFF;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
    border-top: none;
    border-radius: 0 0 0.8rem 0.8rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    padding-bottom: 1.6rem;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #000000;
}

.accordion-header .accordion__button {
    display: flex;
    align-items: center;
    padding: 2rem 4rem 2rem 1.6rem;
    position: relative;
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
}

.accordion-header .accordion__button::before {
    content: '';
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    background-image: url('../img/right_menu/faq_access/open_button_accordion.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.accordion-header .accordion__button::after {
    content: '';
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    background-image: url('../img/right_menu/faq_access/close_button_accordion.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.accordion-header.active .accordion__button::before {
    opacity: 0;
}

.accordion-header.active .accordion__button::after {
    opacity: 1;
}


.line_app {
    width: 100%;
    height: auto;
    margin-bottom: 6.4rem;
}


.line_app_image {
    width: 35.9rem;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
}

.line_button {
    width: 42.9rem;
    height: 7.7rem;
    border-radius: 5.8rem;
    background-color: #4CC764;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.line_button:hover {
    opacity: 0.5;
}

.line_button_icon {
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
}

.line_button_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
}

.access_map_title {
    width: 44.1rem;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.campus_text {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    padding: 1.6rem;
    margin-bottom: 2.4rem;
}

.access_map_image {
    width: calc(100% + 3.2rem);
    height: auto;
    display: block;
    background-color: #FFFFFF;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
}

.faq_access_join_button {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.faq_access_join_button img {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity .3s;
    position: relative;
    z-index: 10;
}

.faq_access_join_button:hover {
    opacity: 0.5;
}

.campus_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.campus_item {
    margin-bottom: 3rem;
}

.campus_item:last-child {
    margin-bottom: 0;
}

.campus_name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FE673E;
    margin: 0;
    padding: 0;
    margin-bottom: 1.6rem;
    text-align: left;
    line-height: 1;
    display: block;
}

.campus_item:nth-child(2) .campus_name {
    color: #FE1D73;
}

.campus_address {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 2.4rem;
    display: block;
}


/* ========================================
   学部紹介セクション (feature_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.feature_hangar {
    width: calc(100% + 3.2rem);
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    height: auto;
    padding-top: 6.4rem;
    padding-bottom: 6.8rem;
    background-color: #FFFBE2;
    overflow: hidden;
}


.feature_image {
    width: 451px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.feature_department_link {
    display: block;
    cursor: pointer;
    transition: .3s;
}

.feature_department_image {
    transition: opacity .3s;
    width: calc(100% - 3.2rem);
    margin-left: 1.6rem;
    margin-right: 1.6rem;
    height: auto;
    display: block;
    margin-bottom: 1.6rem;
    position: relative;
    z-index: 10;
}

.feature_department_link:hover{
    opacity: 0.5;
}

/* .feature_department_link:hover {
    opacity: 0.5;
} */
/* ========================================
   フッターセクション (footer_hangar)
   ======================================== */

/* --- 基本スタイル --- */
.footer_hangar {
    background-color: #000000;
    width: calc(100% + 3.2rem);
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    padding-bottom: 4rem;
    height: 100%;
}

.footer_up {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
    gap: 2.4rem;
}

.footer_logo {
    width: 24rem;
    height: auto;
    display: block;
}

.siteButton {
    width: 12.3rem;
    height: 4.8rem;
    background-color: #FFDA00;
    border-radius: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.siteButton:hover {
    background-color: #FFFFFF;
}

.siteButton:hover .siteButton_text {
    color: #333333;
}

.siteButton_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    margin-left: 1.6rem;
}

.siteButton_arrow {
    width: auto;
    height: auto;
    margin-right: 1.6rem;
    margin-left: 0.4rem;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    flex-shrink: 0;
}

.footer_info {
    text-align: center;
    margin-top: 2.4rem;
}

.footer_info_text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    line-height: 2.4rem;
}

.footer_copyright {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-top: 2.4rem;
}