/* TOPページ ------------------------------------------------------- */
/* トップタイトル */
.top_title {
    background: linear-gradient(60deg, #FCEFC7, #FEFDF8, #FCF1C8);
    width: 100%;
    padding: 77px 0 64px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_title img {
    width: 73%;
    max-width: 1400px;
    height: auto;
}
/* 最新のファンド */
.toppage_wrap_padding {
    padding: 100px 0;
    box-sizing: border-box;
}
.fund_section_title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 28px;
    margin-bottom: 49px;
}
.fund_table {
    width: 100%;
    border-collapse: collapse;
}
.fund_table_header {
    background: #F2F2EF;
}
.fund_table_th {
    padding: 22px 5px;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
}
.fund_table_row {
    border-bottom: 1px solid #C2C2C2;
}
.fund_table_row:hover {
    background: #FAFAF9;
    cursor: pointer;
}
.fund_table_td {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    height: 77px;
}
.recruit_end_td {
    color: rgb(8, 4, 4, 0.5);
    font-size: 1.7rem;
    font-weight: 500;
    height: 42px;
    line-height: 42px;
    background: #F2F2EF;
    /* max-width: 85%; */
    margin: 0 auto;
}
/* .time_td {
    font-weight: bold;
} */
.color_td {
    color: #AA8320;
    font-weight: 500;
}
.width_th {
    width: 20px;
}
.maxwidth_th {
/*     width: 130px;
 */    width: 140px;
}
/* ファンド一覧へボタン */
.fund_btn {
    display: block;
    border: solid 1px #AA8320;
    width: 228px;
    height: 55px;
    line-height: 55px;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #AA8320!important;
    text-align: center;
    margin: 40.5px auto 100px;
}
.fund_btn:hover {
    background: #AA8320;
    color: white!important;
    cursor: pointer;
}
/* お知らせ */
.notice_list {
    width: 100%;
}
.notice_top_line {
    width: 100%;
    height: 1px;
    background: #C2C2C2;
}
.notice_item {
    display: flex;
    align-items: center;
    padding: 31px 0;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid #C2C2C2;
}
.notice_item:hover {
    cursor: pointer;
}
.notice_item:hover .notice_date,
.notice_item:hover .notice_text {
    opacity: 0.3;
}
.notice_date {
    max-width: 270px;
    width: 100%;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.5px;
}
.notice_text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 28px;
}

@media (max-width: 768px) {
    /* トップタイトル */
    .top_title {
        background: linear-gradient(40deg, #FCEFC7, #FEFDF8, #FCF1C8);
        padding: 25px 0 18px;
    }
    .top_title img {
        width: 94%;
        max-width: 354px;
    }
    .toppage_wrap_padding {
        padding: 60px 0 50px;
    }
    .fund_section_title {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 30px;
        margin-bottom: 25px;
    }
    /* 最新のファンド */
    .fund_card {
        max-width: 335px;
        width: 100%;
        border: solid 1px #C2C2C2;
        padding: 10px 25px;
        box-sizing: border-box;
        margin: 0 auto 20px;
        text-align: center;
    }
    .fund_card_title {
        font-size: 2rem;
        font-weight: bold;
        line-height: 29px;
        margin-bottom: 5px;
    }
    .fund_box {
        display: flex;
        justify-content: space-between;
    }
    .fund_card_row {
        width: 50%;
        border-top: solid 1px #C2C2C2;
        padding: 5px 0;
        box-sizing: border-box;
    }
    .fund_card_label {
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 18px;
        opacity: 0.5;
    }
    .fund_card_value {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 20px;
    }
    .fund_box_end {
        width: 100%;
        border-top: solid 1px #C2C2C2;
        padding: 10px 0 0;
        box-sizing: border-box;
    }
    .fund_card_end {
        font-size: 1.5rem;
        font-weight: 500;
        height: 38px;
        line-height: 38px;
        color: rgba(8, 4, 4, 0.5);
        background: #F2F2EF;
    }
    .recruit_card {
        color: #AA8320;
        font-size: 1.4rem;
        font-weight: 500;
    }
    .recruit_card span {
        font-size: 1.2rem;
    }
    /* ファンド一覧へボタン */
    .fund_btn {
        max-width: 335px;
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: 1.2px;
        text-align: center;
        margin: 30px auto 60px;
    }
    /* お知らせ */
    .notice_item {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid #C2C2C2;
        padding: 16px 0;
    }
    .notice_item:hover {
        cursor: pointer;
    }
    .notice_item:hover .notice_date,
    .notice_item:hover .notice_text {
        opacity: 0.3;
    }
    .notice_date {
        max-width: initial;
        width: 100%;
        font-size: 1.3rem;
        font-weight: 400;
        text-align: left;
        letter-spacing: 0.5px;
        margin-bottom: 7px;
    }
    .notice_text {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 28px;
    }
}


/* お知らせ詳細ページ ------------------------------------------- */
.notice_wrap_padding {
    padding: 60px 0 100px;
    box-sizing: border-box;
}
.notice_header {
    display: flex;
    align-items: center;
    height: 47px;
}
.notice_header .notice_icon {
    width: 47px;
    height: 47px;
    background: #AA8320;
}
.notice_header .notice_title {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.3px;
    height: 47px;
    line-height: 47px;
    background: #F2F2EF;
    padding: 0 30px 0 21px;
    box-sizing: border-box;
}
.notice_content {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 31px;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .notice_wrap_padding {
        padding: 50px 20px 60px;
    }
    .notice_header {
        height: 58px;
    }
    .notice_header .notice_icon {
        width: 32px;
        height: 58px;
    }
    .notice_header .notice_title {
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.5px;
        height: 58px;
        line-height: 28px;
        padding: 0 0 0 12px;
        box-sizing: border-box;
    }
    .notice_content {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 25px;
        margin-top: 23px;
    }
}

.title-box {
	  width: 100%;
      height: 50px;

      /* 【注意】背景と文字が同色だと見えないので、文字色を白にしています */
      /* 背景をグレーにするなら：background: rgba(50, 50, 50, 1); color: #fff; */
      background: rgba(242, 242, 239, 1);

      /* 文字のスタイル */
      font-family: "Noto Sans JP", sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 50px; /* 高さ50pxに合わせて中央寄せ */
      letter-spacing: 1.4px;
      text-align: left;
      padding-left: 15px; /* 文字が左端に張り付かないための余白 */
      box-sizing: border-box;

      margin: 1.5px auto; /* 上下中央に配置するためのマージン */

      margin-bottom: 32px;
}
@media (max-width: 768px) {
  .title-box {
    height: auto;          /* 高さを固定から自動に変更 */
    line-height: 1.5;      /* 2行になったときの行間を適切に設定 */
    padding-top: 15px;     /* 上下の余白を調整 */
    padding-bottom: 15px;
    padding-right: 15px;   /* 右側もはみ出さないようにガード */
  }
}

.notice_wrap_padding {
    padding: 60px 0 100px;
    box-sizing: border-box;
}
.notice_header {
    display: flex;
    align-items: center;
    /* PC側も固定値を外し、最低限の高さ（アイコンと揃える用）にするのが安全です */
    min-height: 47px;
}
.notice_header .notice_icon {
    width: 47px;
    height: 47px;
    background: #AA8320;
    flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
}
.notice_header .notice_title {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.3px;
    height: 47px;
    line-height: 47px;
    background: #F2F2EF;
    padding: 0 30px 0 21px;
    box-sizing: border-box;
}

/* --- スマホ表示 (768px以下) --- */
@media (max-width: 768px) {
    .notice_wrap_padding {
        padding: 50px 20px 60px;
    }

    .notice_header {
        /* 高さを固定せず、子要素（タイトル）の高さに合わせる */
        height: auto;
        /* アイコンとタイトルを上揃えにする（中央揃えなら center、お好みで） */
        align-items: flex-start;
    }

    .notice_header .notice_icon {
        width: 32px;
        /* アイコンの高さが固定ならここで明示（タイトルの1行目付近に合わせるなど） */
        height: 32px;
        flex-shrink: 0;
    }

    .notice_header .notice_title {
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.5px;

        /* 【重要】固定高さを解除して可変にする */
        height: auto;

        /* 【重要】行間を適切な値にし、上下の余白(padding)でグレーの帯の厚みを調整する */
        line-height: 1.5; /* 文字の大きさに対して1.5倍の行間 */
        padding: 10px 12px; /* 上下に10px、左に12pxの余白を設けて帯の形を作る */

        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .notice_wrap_padding {
        padding: 50px 20px 60px;
    }

    .notice_header {
        display: flex;
        /* 【重要】flex-start から stretch（初期値）に戻す、または記述を消す */
        align-items: stretch;
        height: auto;
    }

    .notice_header .notice_icon {
        width: 32px;
        /* 【重要】height の固定値を消す（これでタイトルの高さと同期します） */
        height: auto;
        flex-shrink: 0;
        background: #AA8320;
    }

    .notice_header .notice_title {
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.5px;
        height: auto;
        line-height: 1.5;
        padding: 10px 12px;
        box-sizing: border-box;
    }
}