/*---------
共通
----------*/

.section_content_box {
    background: rgba(255, 255, 255, 0.76);
    padding: 65px 0 0;
}

[class^="section_content--"]:not(:last-child) {
    padding-bottom: 80px;
}

.content_box.content_box_flex_box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.section_title {
    font-size: 60px;
    font-weight: bold;
    color: var(--main-color);
    line-height: calc(60 / 60);
    font-family: var(--sub-font);
}

.section_btn {
    width: min(190px, 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.section_btn_text {
    font-size: 23px;
    font-weight: bold;
    line-height: calc(23 / 23);
    font-family: var(--sub-font);
    color: var(--main-color);
}

.section_btn_icon {
    width: 50px;
    height: 50px;
    background: var(--main-color);
    border-radius: 50%;
    position: relative;
}

.section_btn_icon::after {
    content: "";
    position: absolute;
    background: url("../images/top/section_btn_arrow.png") center / cover no-repeat;
    width: 19px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



@media (min-width:768px) {

    /*---------
        共通
    ----------*/

    .section_content_box {
        max-width: 1000px;
        margin: 0 auto;
    }

    [class^="section_content--"]:not(:last-child) {
        padding: 0 0 150px;
    }

    .content_box.content_box_flex_box {
        align-items: center;
        gap: 24px;
    }

    .section_title {
        font-size: 85px;
        line-height: calc(85 / 85);
        margin-bottom: 6px;
    }

    .section_btn {
        width: 200px;
    }

    .section_btn:hover .section_btn_icon {
        background: transparent;
        border: 2px solid var(--main-color);
    }

    .section_btn_text {
        padding-top: 30px;
    }

    .section_btn_icon {
        width: 60px;
        height: 60px;
        transition: background-color .15s ease;
    }

    .section_btn:hover .section_btn_icon::after {
        background: url("../images/top/section_btn_arrow_on.png") center / cover no-repeat;
    }

}

/*---------------------------------
背景写真設定
---------------------------------*/
.bg_fv {
    position: fixed;
    top: 0;
    background: url("../images/top/sp-bg_fv.jpg") no-repeat;
    background-size: cover;
    background-position: top;
    width: 100vw;
    height: 100vh;
    z-index: -99;
}

/* .blur {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -98;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.28) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.45) 6%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 1) 50%);
    mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.45) 6%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 1) 50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100vh;
    mask-size: 100% 100vh;
    pointer-events: none;
    display: none;
} */
.blur {
    /* 既存のプロパティは維持 */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -98;
    backdrop-filter: blur(8px);

    /* 非表示設定を修正 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
    /* 下の要素を操作できるように */
}

/* フェードイン用クラス */
.blur.is-active {
    opacity: 1;
    visibility: visible;
}

@media (min-width:768px) {

    .bg_fv {
        top: 0;
        background: url("../images/top/bg_fv.jpg") no-repeat center;
        background-size: cover;
    }

    .blur {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

}

@media (min-width: 600px) and (max-width: 1024px) {
    .bg_fv {
        background-position: center;
    }
}

/*-------- メイン ----------*/


.l-page {
    position: relative;
}

/*---------
fv
----------*/


.fv_box {
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* はみ出し防止 */
}


.main_catch {
    position: absolute;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    width: 100%;
}

.main_catch h1 {
    font-size: 48px;
    font-weight: bold;
    color: var(--main-color);
    line-height: calc(50 / 48);
    font-family: var(--pinpoint-font);
    text-align: center;
}


@media (min-width:768px) {

    .l-page {
        padding-bottom: 150px;
    }

    .fv_box {
        height: 110vh;
    }

    .main_catch {
        bottom: 15vh;
    }

    .main_catch h1 {
        font-size: 80px;
        line-height: calc(80 / 80);
    }
}

/*---------
ABOUT
----------*/

/*----共通ブロック ----*/

.section_content--about {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.section_content--about::after {
    content: "";
    position: absolute;
    background: url("../images/top/about_deco_banana.png") center / contain no-repeat;
    aspect-ratio: 140 / 312;
    max-width: 100%;
    width: 140px;
    height: 312px;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.section_content--about .section_title {
    writing-mode: vertical-rl;
}

.section_content--about .section_btn {
    margin: 0 auto;
}


/*----コンテンツブロック ----*/

.description_body {
    margin-bottom: 25px;
}

.description_title {
    font-size: 22px;
    font-weight: bold;
    line-height: calc(32 / 22);
    margin-bottom: 8px;
}

.description_text {
    font-size: 16px;
    font-weight: 400;
    line-height: calc(28 / 16);
}

.description_text:not(:last-child) {
    margin-bottom: 10px;
}

@media (min-width:768px) {

    /*----共通ブロック ----*/

    .section_content--about {
        max-width: 759px;
        margin: 0 auto;
    }

    .section_content--about::after {
        aspect-ratio: 215 / 480;
        max-width: 215px;
        width: 100%;
        height: 480px;
        top: 30%;
        right: -15%;
        left: auto;
        transform: translateY(-50%);
    }

    .section_content--about .section_btn {
        margin-left: auto;
        margin-right: 0;
        position: relative;
        z-index: 1;
    }

    /*----コンテンツブロック ----*/

    .description_title {
        font-size: 30px;
        line-height: calc(40/ 30);
        margin-bottom: 16px;
    }

    .description_text:not(:last-child) {
        margin-bottom: 20px;
    }

}

@media (min-width: 768px) and (max-width: 1112px) {
    .section_content--about::after {
        top: 30%;
        right: 0%;
    }
}

/*---------
MENU
----------*/

/*----共通ブロック ----*/

.section_content--menu {
    overflow: visible;
}

.section_content--menu .section_space {
    width: 100%;
}

.section_content--menu .section_title {
    max-width: 375px;
    margin: 0 auto 70px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.section_content--menu .section_title::before,
.section_content--menu .section_title::after {
    content: "";
    position: absolute;
    aspect-ratio: 112 / 93;
    max-width: 100%;
    width: 112px;
    height: 93px;
    top: -10px;
    z-index: -1;
}

.section_content--menu .section_title::before {
    background: url("../images/top/menu_title_deco_banana_left.png") center / cover no-repeat;
    left: 0;
}

.section_content--menu .section_title::after {
    background: url("../images/top/menu_title_deco_banana_right.png") center / cover no-repeat;
    right: 0;
}

.section_content--menu .section_btn {
    margin-left: auto;
    margin-right: 20px;
}


/*----コンテンツブロック ----*/

.menu_list {
    display: flex;
    flex-direction: column;
    gap: 85px;
    margin-bottom: 40px;
}

.menu_item_photo {
    margin: 0 0 30px;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

.menu_item:nth-child(even) .menu_item_photo {
    margin-left: auto;
}

.menu_item:nth-child(1) .menu_item_photo,
.menu_item:nth-child(3) .menu_item_photo {
    max-width: 306px;
    height: 306px;
    margin-right: auto;
}

.menu_item:nth-child(2) .menu_item_photo {
    max-width: 327px;
    height: 351px;
}

.menu_item_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu_item:nth-child(1) .menu_item_photo::after,
.menu_item:nth-child(3) .menu_item_photo::after {
    content: "";
    position: absolute;
    background: url("../images/top/sp-menu_item_photo_deco_bg_left.png") center / cover no-repeat;
    aspect-ratio: 317 / 300;
    width: 317px;
    height: 300px;
    left: 0;
    z-index: -1;
}

.menu_item:nth-child(1) .menu_item_photo::after {
    top: 0;
}

.menu_item:nth-child(3) .menu_item_photo::after {
    top: -5px;
}

.menu_item:nth-child(2) .menu_item_photo::before {
    content: "";
    position: absolute;
    background: url("../images/top/sp-menu_item_photo_deco_banana.png") center / cover no-repeat;
    aspect-ratio: 222 / 287;
    width: 222px;
    height: 287px;
    top: 58px;
    transform: translateY(-50%);
    left: -50px;
    z-index: -2;
}

.menu_item:nth-child(2) .menu_item_photo::after {
    content: "";
    position: absolute;
    background: url("../images/top/sp-menu_item_photo_deco_bg_right.png") center / cover no-repeat;
    aspect-ratio: 317 / 300;
    width: 317px;
    height: 300px;
    top: 20px;
    right: 0;
    z-index: -1;
}

.menu_item_description {
    margin: 0 20px;
}

.menu_item_description_title {
    font-size: 20px;
    font-weight: bold;
    line-height: calc(32 / 20);
    margin-bottom: 8px;
}

.menu_item_description_text {
    font-size: 16px;
    font-weight: 400;
    line-height: calc(28 / 16);
}



@media (min-width:768px) {

    /*----共通ブロック ----*/

    .section_content--menu .section_title {
        max-width: 970px;
        margin-bottom: 160px;
    }

    .section_content--menu .section_title::before,
    .section_content--menu .section_title::after {
        aspect-ratio: 360 / 300;
        max-width: 100%;
        width: 360px;
        height: 300px;
        top: -80px;
    }

    .section_content--menu .section_title::before {
        left: 0;
    }

    .section_content--menu .section_title::after {
        right: 0;
    }

    .section_content--menu .section_btn {
        margin-right: 85px;
    }

    .menu_item:nth-child(even) .menu_item_photo.sp_in {
        display: none;
    }

    /*----コンテンツブロック ----*/

    .menu_list {
        gap: 60px;
        margin-bottom: 0;
    }

    .menu_item {
        max-width: 915px;
        margin-right: 85px;
    }

    .menu_item:nth-child(3) {
        margin-top: -60px;
    }

    .menu_item:nth-child(even) {
        margin-left: 85px;
        margin-right: 0;
    }

    .menu_item_detail {
        display: flex;
        align-items: center;
    }

    .menu_item:nth-child(even) .menu_item_detail {
        flex-direction: row-reverse;
    }

    .menu_item .menu_item_photo {
        margin-bottom: 0;
        width: 100%;
    }

    .menu_item:nth-child(1) .menu_item_photo {
        max-width: 490px;
        height: 538px;
    }

    .menu_item:nth-child(2) .menu_item_photo {
        max-width: 422px;
        height: 422px;
    }

    .menu_item:nth-child(3) .menu_item_photo {
        max-width: 502px;
        height: 583px;
    }

    .menu_item:nth-child(1) .menu_item_photo::after {
        content: "";
        position: absolute;
        background: url("../images/top/menu_item_photo_deco_bg_left.png") center / cover no-repeat;
        aspect-ratio: 469 / 398;
        width: 469px;
        height: 398px;
        top: 73px;
        left: 0;
        z-index: -1;
    }

    .menu_item:nth-child(2) .menu_item_photo::before {
        background: url("../images/top/menu_item_photo_deco_banana.png") center / cover no-repeat;
        aspect-ratio: 583 / 584;
        width: 583px;
        height: 584px;
        top: 70px;
        left: -320px;
    }

    .menu_item:nth-child(2) .menu_item_photo::after {
        content: "";
        position: absolute;
        background: url("../images/top/menu_item_photo_deco_bg_right.png") center / cover no-repeat;
        aspect-ratio: 469 / 400;
        width: 469px;
        height: 400px;
        top: 10px;
        right: 0;
        z-index: -1;
    }

    .menu_item:nth-child(3) .menu_item_photo::after {
        content: "";
        position: absolute;
        background: url("../images/top/menu_item_photo_deco_bg_left.png") center / cover no-repeat;
        aspect-ratio: 469 / 398;
        width: 469px;
        height: 398px;
        top: 95px;
        left: 0;
        z-index: -1;
    }

    .menu_item_description {
        position: relative;
        max-width: 402px;
        margin: 0;
        z-index: 1;
    }

    .menu_item:nth-child(even) .menu_item_detail .menu_item_description {
        margin-right: 0;
    }

    .menu_item_description_title {
        font-size: 26px;
        line-height: calc(38 / 26);
    }

}

@media (min-width: 600px) and (max-width: 1024px) {
    .menu_item_detail {
        display: flex;
        align-items: center;
    }

    .menu_item:nth-child(even) .menu_item_detail {
        flex-direction: row-reverse;
    }
}

/*---------
NEWS
----------*/

/*----共通ブロック ----*/

.section_content--news {
    background: url("../images/top/sp-news_content_bg.jpg") center / cover no-repeat;
    padding: 65px 0;
    min-height: 562px;
}

.section_content--news .section_title {
    margin-bottom: 30px;
}

.section_content--news .section_btn {
    margin-left: auto;
}

.section_btn.pc_section_btn {
    display: none;
}

/*----コンテンツブロック ----*/

.news_list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

.news_detail {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #737373;
}

.news-item__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.date_text {
    font-size: 16px;
    font-weight: bold;
    line-height: calc(28 / 16);
    color: var(--main-color);
}

.category_tag {
    background: var(--sub-color);
    border-radius: 4px;
    padding: 7.5px 10px;
    font-size: 14px;
    font-weight: bold;
    color: var(--main-color);
    line-height: calc(14 / 14);
}

.news_bottom_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news_title {
    font-size: 16px;
    font-weight: bold;
    line-height: calc(28 / 16);
    color: var(--main-color);
    max-width: 100%;
    width: 256px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.news_title_arrow {
    background: url("../images/top/news_title_arrow.png") center / cover no-repeat;
    width: 23px;
    height: 15px;
}

@media (min-width:768px) {

    /*----共通ブロック ----*/

    .section_btn.pc_section_btn {
        display: flex;
        margin-left: 10px;
    }

    .section_btn.sp_section_btn {
        display: none;
    }

    .section_content--news {
        background: url("../images/top/pc-news_content_bg.jpg") center / cover no-repeat;
        padding: 150px 67px;
        min-height: 524px;
    }

    .section_content--news .section_title {
        margin-bottom: 35px;
    }

    .section_content--news .content_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 55px;

    }

    /*----コンテンツブロック ----*/

    .section_title_block {
        max-width: 252px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    .news_list {
        max-width: 557px;
        width: 100%;
        gap: 30px;
        margin-bottom: 0;
    }

    .news_detail {
        display: flex;
        align-items: center;
        gap: 30px;
        padding-bottom: 20px;
    }

    .news-item__meta {
        gap: 16px;
        margin-bottom: 0;
    }

    .news_bottom_block {
        gap: 60px;
    }

    .news_title {
        max-width: 256px;
        width: 100%;
    }

    .news_title_arrow {
        transition: transform 0.3s ease;
    }

    /* 矢印を動かす */
    .news_detail:hover .news_title_arrow {
        transform: translateX(15px);
    }
}