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

:root {
    /* 色指定 */
    --color-base: #E6E3DC;
    --color-main1: #0B2D50;
    --color-main2: #fff;
    --color-accent: #E78310;

    /* フォントサイズ指定 */
    --ttl-lg: 128px;
    --ttl-0: 64px;
    --ttl-1: 32px;
    --ttl-2: 24px;
    --ttl-3: 18px;

    --txt-1: 16px;
    --txt-2: 14px;
    --txt-3: 10px;

    /* コンテンツ幅指定 */
    --padtop-1: 120px;
    --padtop-2: 80px;
    --padtop-3: 40px;

}


/* body基本設定 */
body {
    background-color: var(--color-base);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--txt-1);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.body::-webkit-scrollbar {
    display: none;
}

.js_main.is-active {
    display: none;
}

.aic_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ヘッダー */
.l_header_inner {
    width: 100%;
    height: 100%;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.l_header {
    width: 100%;
    position: fixed;
    z-index: 500;
    font-family: 'Noto Sans JP', sans-serif;

}

@media screen and (min-width: 768px) {
    .l_header {
        height: 88px;
        background: var(--color-main1);
    }

    .l_header_inner {
        height: 100%;
        padding: 0px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
}

/* 詳しく見るボタン */
.m_detail_button {
    display: block;
    width: 160px;
    height: 40px;
    background: var(--color-accent);
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.m_detail_link {
    width: 100%;
    height: 100%;
    color: var(--color-main2);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.m_detail_txt {
    font-size: var(--txt-2);
}

.m_detail_txt::after {
    content: "";
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 2px 2px 0px 0px;
    position: absolute;
    top: 40%;
    right: 16px;
    transform: rotate(45deg);
}

.m_detail_button:hover {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
    transition: ease 0.1s;
}

/* タイトルの装飾 */
.l_main_ttl_sm {
    font-size: var(--ttl-2);
}

.l_main_ttl {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    font-size: var(--ttl-1);
    z-index: 10;
    text-wrap: nowrap;
}

.l_main_ttl_lg {
    text-wrap: nowrap;
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    font-size: var(--ttl-1)
}

.m_ttl_deco-displayer {
    position: relative;
    z-index: 0;
}

.l_main_ttl::before {
    content: '';
    position: absolute;
    left: 50%;
    /*線の位置
    bottomで下線 topで上線*/
    bottom: 0;
    display: inline-block;
    /*線の横の長さ*/
    width: 128px;
    /*線の太さ*/
    height: 8px;
    /*センターの位置調整*/
    transform: translateX(-50%);
    background-color: var(--color-accent);
    z-index: -1;
}


.l_main_ttl_lg::before {
    content: '';
    position: absolute;
    left: 50%;
    /*線の位置
    bottomで下線 topで上線*/
    bottom: 0;
    display: inline-block;
    /*線の横の長さ*/
    width: 198px;
    /*線の太さ*/
    height: 8px;
    /*センターの位置調整*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--color-accent);
    z-index: -1;
}

.m_ttl_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 80px;
}

.m_ttl_rail {
    background: url(../img/rail-sm.png);
    width: 64px;
    height: 10px;
    background-repeat: no-repeat;
}


@media screen and (min-width: 768px) {
    .m_ttl_container {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 120px;
    }

    .m_ttl_rail {
        background: url(../img/rail-lg.png);
        width: calc(50% - 120px - 24px);
        max-width: 370px;
        height: 10px;
        background-repeat: no-repeat;
    }
}

/* スクロールダウン */
.m_scroll_wrapper {
    height: 120px;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.m_scroll {
    color: var(--color-main2);
    position: relative;
    text-align: center;
}

.m_scroll:not(:first-child) {
    color: transparent;
}

.m_scroll::before {
    border-bottom: 1px solid var(--color-main2);
    border-left: 1px solid var(--color-main2);
    content: "";
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 24px;
    width: 20px;
    transform: rotate(-45deg) skew(15deg, 15deg);
}

/* 法人ロゴ（SP） */
.l_logo_container {
    text-align: center;
    text-wrap: nowrap;
}

.l_logo_link {
    width: 100%;
    height: 100%;
}

.l_logo_txt {
    font-size: var(--ttl-3);
}

.l_logo_sm {
    font-size: var(--txt-3);
}

.l_logo_lb {
    display: block;
}

/* 法人ロゴ（PC） */
@media screen and (min-width: 768px) {
    .l_logo_container {
        text-align: center;
    }

    .l_logo_lb {
        display: none;
    }

    .l_logo_txt {
        font-size: var(--txt-1);
        color: var(--color-main2);
    }

    .l_logo_sm {
        font-size: var(--txt-1);
    }
}

/* ハンバーガー */
.m_hamburger {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 9999;
}

.m_hamburger_bar {
    display: block;
    width: 40px;
    height: 6px;
    background: #000;
    position: absolute;
    transition: ease 0.4s;
}

.m_hamburger span:nth-child(1) {
    top: 0%;
}

.m_hamburger.is-active span:nth-child(1) {
    top: 50%;
    transform: rotate(135deg);
}

.m_hamburger span:nth-child(2) {
    transform: translate(0, -50%);
}

.m_hamburger.is-active span:nth-child(2) {
    transform: scaleX(0.1);
}

.m_hamburger span:nth-child(3) {
    top: 100%;
    transform: translate(0, -100%);
}

.m_hamburger.is-active span:nth-child(3) {
    top: 50%;
    transform: rotate(-135deg);
}

@media screen and (min-width: 768px) {
    .m_hamburger {
        display: none;
    }
}


/* ナビゲーション（SP） */

.l_header_nav {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: var(--color-base);
    left: 0;
    top: 0;
    transform: translateX(100%);
    transition: ease .5s;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.l_header_nav-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 44px;
    padding: calc(50vh - 104px) 30%;
}

.l_header_nav.is-active {
    transform: translateX(0%);
}

.l_header_nav-item {
    text-align: center;
    width: 100%;
    padding: 8px 0px;
}

.l_header_nav-item:hover {
    background: linear-gradient(transparent 95%, var(--color-accent) 95%);
}
/* ナビゲーション（PC） */

@media screen and (min-width: 768px) {
    .l_header_nav {
        width: auto;
        height: 100%;
        position: static;
        background-color: var(--color-main1);
        transform: translateX(0%);
        transition: ease 0s;
        margin-left: 240px;
    }

    .l_header_nav-list {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        gap: 40px;
        color: var(--color-main2);
        text-wrap: nowrap;
        overflow: scroll;
        scrollbar-width: none;
        padding: 0px;
    }

    .l_header_nav-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .l_header_nav-item {
        padding: 32px 8px 0px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .l_header_nav-item:hover {
        background: linear-gradient(transparent 95%, var(--color-accent) 95%);
    }
}


/* フッター （SP）*/
.l_footer_wrapper {
    padding: 80px 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-main1);
    color: var(--color-main2);
}

.l_footer_txt-box {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.l_footer_txt {
    font-size: var(--txt-3);
}

.l_footer_txt_lg {
    font-size: var(--ttl-1);
    font-weight: bold;
}

.l_footer_copy {
    padding-left: 2em;
    text-indent: -2em;
}

.l_footer_nav {
    max-width: 640px;
    height: 224px;
}

.l_footer_nav-list {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    font-size: var(--txt-2);
    padding-top: 24px;
}

.l_footer_nav-item{
    width: 132px;
    background: linear-gradient(transparent 80%, var(--color-accent) 80%);
}

.l_footer_nav-list_down {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    padding-left: 16px;
    font-size: var(--txt-3);
}

.nav_list_down-wrapper_txt {
    display: block;
    width: 132px;
    background: linear-gradient(transparent 80%, var(--color-accent) 80%);   
}

.l_footer_nav-item_down {
    background: linear-gradient(transparent 80%, var(--color-accent) 80%);
}

.l_footer_corporate_txt {
    font-size: var(--txt-3);
    margin-top: 80px;
}

.l_footer_copy_pc {
    display: none;
}

.l_footer_corporate_info {
    width: 280px;
}

.l_footer_corporate_mail, .l_footer_corporate_tel {
    font-size: var(--txt-3);
    text-align: left;
}

.l_footer_nav-link {
    display: block;
    width: 100%;
    z-index: 100;
}

/* フッター（PC） */
@media screen and (min-width: 768px) {
    .l_footer_wrapper {
        padding: 80px 16px 8px;
        background: var(--color-main1);
        color: var(--color-main2);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .l_footer_wrapper_sub {
        width: 100%;
        display: flex;
        justify-content: space-around;
        max-width: 880px;
    }
    
    .l_footer_txt-box {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 160px;
    }
    
    .l_footer_txt {
        font-size: var(--txt-3);
    }
    
    .l_footer_txt_lg {
        font-size: var(--ttl-1);
        font-weight: bold;
    }

    .l_footer_copy {
        display: none;
        padding-left: 2em;
        text-indent: -2em;
    }
    
    .l_footer_nav {
        width: 100%;
        height: 56px;
        max-width: 768px;
    }
    
    .l_footer_nav-list {
        display: flex;
        flex-direction: row;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
        font-size: var(--txt-2);
        padding-top: 0px;
    }
    
    .l_footer_nav-item{
        width: 132px;
        height: 20px;
        background: linear-gradient(transparent 80%, var(--color-accent) 80%);
    }
    
    .l_footer_nav-list_down {
        width: 116px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 16px;
        padding-left: 16px;
        font-size: var(--txt-3);
        opacity: 0;
        display: block;
        position: absolute;
        transition: ease 0.2s;
    }
    
    .l_footer_nav-list_down-wrapper:hover .l_footer_nav-list_down{
        opacity: 1;
        display: block;
        background: var(--color-main1);
    }

    .nav_list_down-wrapper_txt {
        display: block;
        width: 132px;
        background: linear-gradient(transparent 80%, var(--color-accent) 80%);   
    }
    
    .l_footer_nav-item_down {
        background: linear-gradient(transparent 80%, var(--color-accent) 80%);
    }

    .l_footer_nav-item_down:not(:first-child) {
        margin-top: 16px;
    }

    .l_footer_copy_pc {
        width: 100%;
        text-align: center;
        font-size: var(--ttl-1);
        display: block;
        margin-top: var(--padtop-3);
    }

    .l_footer_corporate_txt {
        width: 100%;
        font-size: var(--txt-3);
        margin-top: 40px;
        text-align: center;
    }
    
    .l_footer_corporate_info {
        width: 100%;
        max-width: 880px;
    }
    
    .l_footer_corporate_mail, .l_footer_corporate_tel {
        font-size: var(--txt-3);
        text-align: left;
    }
    
}

/* キーヴィジュアル */
.l_kv_container {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat; 
    position: relative;
}

.l_kv_ttl {
    font-size: var(--ttl-1);
    color: var(--color-main2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
}

.l_kv_ttl_sm {
    font-size: var(--ttl-2);
}

@media screen and (min-width: 768px) {
    .l_kv_ttl {
        font-size: var(--ttl-0);
        color: var(--color-main2);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 196px;
    }
    
    .l_kv_ttl_sm {
        font-size: 48px;
    }
    
}



/* トップページ */
.top_kv_container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/three-trains.jpg) -200px 0px / cover;
    background-repeat: no-repeat; 
    position: relative;
}

@media screen and (min-width: 768px) {
    .top_kv_container {
        width: 100%;
        height: 100vh;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                    url(../img/three-trains.jpg) center / cover;
        background-repeat: no-repeat; 
        position: relative;
    }
}

.top_kv_ttl {
    display: block;
    font-size: var(--ttl-1);
    font-weight: bold;
    color: var(--color-main2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
}

@media screen and (min-width: 768px) {
    .top_kv_ttl {
        font-size: var(--ttl-0);
        font-weight: bold;
        color: var(--color-main2);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 196px;
    }
}

.top_about_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top_about_img {
    aspect-ratio: 1.4;
    width: 62.5%;
    background: url(../img/about-kv.jpg) center / cover;
    margin-top: var(--padtop-2);
}

.top_about_txt {
    padding: 40px 16px 80px;
}

.top_about_ttl_lg {
    font-size: var(--ttl-2);
}

.top_about_ttl_lb {
    display: none;
}

@media screen and (min-width: 768px) {
    .top_about_contents {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 40px;
        width: 70%;
        max-width: 1000px;
        padding: 80px 0px;
    }

    .top_about_img {
        aspect-ratio: 1.4;
        height: 100%;
        max-width: 432px;
        background: url(../img/about-kv.jpg) center / cover;
        margin-top: 0px;
    }
    
    .top_about_txt {
        padding: 0px;
    }

    .top_about_ttl_lb {
        display: block;
    }

    .top_about_ttl_span {
        display: none;
    }
}

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

.top_action_inner {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),url(../img/action_kv-a.jpg) center / cover;
    margin-top: var(--padtop-1);
    color: var(--color-main2);
    position: relative;
}

@media screen and (min-width: 768px) {
    .top_action_inner {
        max-width: 1000px;
        height: 512px;
        border-radius: 20px;
    }

}

.top_action_txt {
    padding: 80px 16px 0px;
}

.top_action_txt_lg {
    font-size: var(--ttl-2);
}

.top_detail_button {
    position: absolute;
    bottom:80px;
    left: 50%;
    transform: translateX(-50%);
}
.top_detail_button:hover {
    position: absolute;
    bottom:80px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
    transition: ease 0.1s;
}



.top_sns_wrapper {
    width: 100%;
}

.top_sns_inner {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 80px;
}

.top_sns_box {
    width: 264px;
    height: 232px;
}

.top_sns_txt-1 {
    background: url(../img/x-capital.png);
    width: 158px;
    height: 30px;
}
.top_sns_txt-2 {
    background: url(../img/x-2200.png);
    width: 158px;
    height: 30px;
}
.top_sns_txt-3 {
    background: url(../img/x-subway.png);
    width: 158px;
    height: 30px;
}
.top_sns_txt-4 {
    background: url(../img/x-stainplar.png);
    width: 222px;
    height: 30px;
}

.top_sns_link {
    display: block;
    width: 100%;
    height: 100%;
}

.top_sns_timeline {
    width: 100%;
    height: 186px;
    border-radius: 10px;
    border: solid 1px;
    margin-top: 16px;
    overflow-y: scroll;
    scrollbar-width: none;
}

.twitter-timeline {
    width: 100%;
}

.twitter-timeline_txt {
    display: block;
    width: 200px;
    height: 26px;
    text-align: center;
    margin: 80px auto;
}

@media screen and (min-width: 768px) {
    .top_sns_inner {
        width: 100%;
        max-width: 1000px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 40px;
        margin-top: 80px;
    }
}

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

.top_trains_inner {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),url(../img/three-trains.jpg) center / cover;
    margin-top: var(--padtop-1);
    color: var(--color-main2);
    position: relative;
}

@media screen and (min-width: 768px) {
    .top_trains_inner {
        max-width: 1000px;
        height: 512px;
        border-radius: 20px;
    }

}

.top_donation_wrapper {
    width: 100%;
    padding: 0px 16px;
}

.top_donation_inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
}

.top_donation_img {
    border-radius: 10px;
    margin: 80px 0px 40px;
    width: 100%;
    max-width: 1000px;
    object-fit: cover;
}

.top_donation_txt {
    padding: 0px 0px 80px;
    max-width: 1000px;
}

/* CARBとは？ */
.about_kv_container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/about-kv.jpg) center / cover;
    background-repeat: no-repeat; 
    position: relative;
}

.about_kv_ttl_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 560px;
}

.about_kv_ttl {
    display: block;
    font-size: var(--ttl-1);
    font-weight: bold;
    color: var(--color-main2);
    max-height: 132px;
}

.about_kv_ttl_lg {
    font-size: var(--ttl-0);
}

@media screen and (min-width: 768px) {
    .about_kv_ttl {
        font-size: var(--ttl-0);
        font-weight: bold;
        color: var(--color-main2);
    }

    .about_kv_ttl_lg {
        font-size: var(--ttl-lg);
    }
}

.about_carb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    overflow: hidden;
}

.about_carb_txt-wrapper {
    width: 100%;
    max-width: 632px;
    display: flex;
    padding: 0px 16px;
    gap: 16px;
    align-items: center;
}

.about_carb_img {
    flex-shrink: 0;
}

.about_img_1 {
    background: url(../img/about-1.jpg) center / cover;
    width: 144px;
    height: 100px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.about_img_2 {
    background: url(../img/about-2.jpg) center / cover;
    width: 101px;
    height: 70px;
    position: absolute;
    bottom: 0px;
}

.about_img_3 {
    background: url(../img/about-3.jpg) center / cover;
    width: 100px;
    height: 144px;
}

.about_img_4 {
    background: url(../img/about-4.jpg) center / cover;
    width: 144px;
    height: 100px;
}

.about_img_5 {
    background: url(../img/about-5.jpg) left / cover;
    width: 100px;
    height: 144px;
    position: absolute;
}

.about_img_6 {
    background: url(../img/about-6.jpg) center / cover;
    width: 101px;
    height: 70px;
    position: absolute;
    bottom: 0px;
    left: 34px;
}

.about_carb_img-container {
    position: relative;
    flex-shrink: 0;

}

.about_img-container_1 {
    width: 160px;
    height: 132px;
}

.about_img-container_2 {
    width: 134px;
    height: 177px;
}

.about_carb_bg-wrapper {
    display: none;
}

@media screen and (min-width: 768px) {
    .about_carb_wrapper {
        display: flex;
        flex-direction: column;
        gap: 80px;
        align-items: center;
        position: relative;
    }
    
    .about_carb_txt-wrapper {
        width: 100%;
        max-width: 632px;
        display: flex;
        padding: 0px 16px;
        gap: 16px;
        align-items: center;
        z-index: 100;
    }
    
    .about_carb_img {
        flex-shrink: 0;
    }

    .about_img_1 {
        background: url(../img/about-1.jpg) center / cover;
        width: 288px;
        height: 200px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    
    .about_img_2 {
        background: url(../img/about-2.jpg) center / cover;
        width: 202px;
        height: 140px;
        position: absolute;
        bottom: 0px;
    }
    
    .about_img_3 {
        background: url(../img/about-3.jpg) center / cover;
        width: 200px;
        height: 288px;
    }
    
    .about_img_4 {
        background: url(../img/about-4.jpg) center / cover;
        width: 288px;
        height: 200px;
    }
    
    .about_img_5 {
        background: url(../img/about-5.jpg) left / cover;
        width: 200px;
        height: 288px;
        position: absolute;
    }
    
    .about_img_6 {
        background: url(../img/about-6.jpg) center / cover;
        width: 202px;
        height: 140px;
        position: absolute;
        bottom: 0px;
        left: 68px;
    }
    
    .about_carb_img-container {
        position: relative;
        flex-shrink: 0;
    
    }
    
    .about_img-container_1 {
        width: 320px;
        height: 264px;
    }
    
    .about_img-container_2 {
        width: 301px;
        height: 342px;
    }

    .about_carb_bg-wrapper {
        display: block;
        z-index: 1;
        background: url(../img/CARB_circle.png) center / cover;
        width: 710px;
        height: 710px;
        position: absolute;
        top: 724px;
        right: -120px;
        animation: 20s linear infinite rotation;
    }
    @keyframes rotation {
        0%{ transform:rotate(0);}
        100%{ transform:rotate(-360deg);}
    }
}

.about_info_table {
    width: 100%;
}

.about_info_table-wrapper {
    margin: 40px 16px 0px;
    padding: 8px;
    max-width: 656px;
    background: var(--color-main2);
    border-radius: 10px;
    margin-bottom: 80px;
    position: relative;
}

.about_info_table {
    font-size: var(--txt-2);
}

.about_info_tr {
    display: block;
    padding: 16px 0px;
}

.about_info_tr:not(:last-child) {
    border: solid;
    border-width: 0px 0px 1px 0px;
}

.about_td_ttl {
    text-wrap: nowrap;
    text-align: right;
    vertical-align: top;
    width: 80px;
}

.about_td_txt {
    padding-left: 16px;
}

.about_info_deco_top {
    background: url(../img/table_deco_top.png) center / cover;
    width: 70px;
    height: 51px;
    position: absolute;
    top: -46px;
}

.about_info_deco_bottom {
    background: url(../img/table_deco_bottom.png) center / cover;
    width: 112px;
    height: 40px;
    position: absolute;
}

.about_deco_1 {
    left: 16px;
    bottom: -32px;
}

.about_deco_2 {
    right: 16px;
    bottom: -32px;
}

/* 私どもの取り組み */
.action_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/action_kv-a.jpg) center / cover;
}

.action_ac_wrapper {
    width: 100%;
    padding: 0px 16px;
}

.action_ac_f-txt-wrapper {
    padding: 40px 0px 0px;
    max-width: 1000px;
}

.action_ac_sm-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 80px 16px 0px;
}

.action_ac_img-wrapper {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1.4;
}

.action_ac_ttl {
    font-size: var(--ttl-2);
    margin: 8px 0px 0px 8px;
}

.about_ac-3_ttl {
    color: var(--color-main2);
}

.action_ac_img-txt {
    display: none;
}

.action_ac_txt {
    margin-top: 40px;
}

.about_ac-1_img-wrapper {
    background: url(../img/action-1.jpg) center / cover;
}
.about_ac-2_img-wrapper {
    background: url(../img/action-2.jpg) center / cover;
}
.about_ac-3_img-wrapper {
    background: url(../img/action-3.jpg) center / cover;
}
.about_ac-4_img-wrapper {
    background: url(../img/action-4.jpg) center / cover;
}

@media screen and (min-width: 768px) {
    .action_ac_f-txt-wrapper {
        padding: 80px 0px 0px;
        max-width: 1000px;
    }
    
    .action_ac_sm-wrapper {
        width: 100%;
        max-width: 1000px;
        margin: 80px 16px 0px;
    }
    
    .action_ac_img-wrapper {
        width: 100%;
        max-width: 1000px;
        max-height: 512px;
        aspect-ratio: 1.4;
        border-radius: 20px;
        position: relative;
        color: var(--color-main2);
    }
    
    .action_ac_ttl {
        font-size: var(--ttl-2);
        position: absolute;
        bottom: calc(50% + 36px);
        left: 40px;
    }
    
    .action_ac_img-txt {
        font-size: var(--txt-2);
        display: block;
        position: absolute;
        top: 50%;
        left: 40px;
        padding-right: 40px;
    }
    
    .action_ac_txt {
        display: none;
        margin-top: 40px;
    }
    
    .about_ac-1_img-wrapper {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.3)),
        url(../img/action-1.jpg) center / cover;
    }
    .about_ac-2_img-wrapper {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.3)),
        url(../img/action-2.jpg) center / cover;
    }
    .about_ac-3_img-wrapper {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.3)),
        url(../img/action-3.jpg) center / cover;
    }
    .about_ac-4_img-wrapper {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.3)),
        url(../img/action-4.jpg) center / cover;
    }
}


/* スライド追加時編集箇所　ここから */
.action_pro_slide-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    margin-bottom: 80px;
}

.action_pro_container {
    /* ↓スライド増やすとき・・・width: ｎ×100％ */
    width: 400%;
    height: 100%;
    display: flex;
    transition: all 0.3s;
    padding-bottom: 40px;
}

/* ↓スライド増やすとき・・・以下のクラスを増やす＆100/ｎの値を分配していく */
.slide1 { /* スライドさせるために必要なクラス */
    transform: translateX(0);
}
.slide2 { /* スライドさせるために必要なクラス */
    transform: translateX(-25%);
}
.slide3 { /* スライドさせるために必要なクラス */
    transform: translateX(-50%);
}
.slide4 { /* スライドさせるために必要なクラス */
    transform: translateX(-75%);
}

.slide_next {
    position: absolute;
    width: 20px;
    height: 20px;
    left: calc(((100% - 200px) / 2) + 200px + 24px);
    bottom: 50%;
    z-index: 10;
    cursor: pointer;
    border-top: solid 3px #000;
    border-right: solid 3px #000;
    -webkit-transform: rotate(45deg) translateY(50%);
    transform: rotate(45deg) translateY(50%);
}
.slide_prev {
    position: absolute;
    width: 20px;
    height: 20px;
    right: calc(((100% - 200px) / 2) + 188px + 24px);
    bottom: 50%;
    z-index: 10;
    cursor: pointer;
    border-top: solid 3px #000;
    border-right: solid 3px #000;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
}
@media screen and (min-width: 1400px) {
  .slide_next {
    display: none;
}
.slide_prev {
    display: none;
}
}


.indicator {
    width: 100%;
    display: flex;
    column-gap: 18px;
    z-index: 10;
    justify-content: center;
    align-items: center;
}
.indicator li {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    list-style: none;
    background-color: #fff;
    border: 2px #000 solid;
    cursor: pointer;
}
.indicator li:first-of-type {
    background-color: var(--color-accent);
}

.action_pro_box {
    width: 200px;
    height: 288px;
    border-radius: 10px;
    flex-shrink: 0;
    /* ↓スライド増やすとき、100％/ｎ */
    margin: 0 calc(((100% / 4) - 200px) / 2); 
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.5);
    transition: ease 0.4s;
}

.action_pro_box:hover {
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
    transform: translateY(4px);
}

.action_capital_box {
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.1)), url(../img/capital-kv.jpg) left / cover;
}

.action_2200_box {
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.1)), url(../img/2200-kv.jpg) right/ cover;
}

.action_subway_box {
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.1)), url(../img/subway-kv.jpg) center / cover;
}

.action_stainplar_box {
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.1)), url(../img/keio-1.jpg) right / cover;
  
}

.action_pro_box-txt {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--color-main2);
}


.action_pro_box-next {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0px;
    right: 0px;
    text-align: right;
    padding-right: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    border-radius: 0px 0px 10px 10px;
}

.action_pro_box-next::after {
    width: 10px;
    height: 10px;
    content: "　";
    border: solid;
    border-width: 2px 2px 0px 0px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    transform: rotate(45deg);
}

.action_pro_box_link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 1400px) {
    .prev, .next, .indicator{
        display: none;
    }
    
    .action_pro_container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        gap: 40px;
        transition: all 0.3s;
    }

    .slide1 { /* スライドさせるために必要なクラス */
        transform: translateX(0);
    }
    .slide2 { /* スライドさせるために必要なクラス */
        transform: translateX(0);
    }
    .slide3 { /* スライドさせるために必要なクラス */
        transform: translateX(0);
    }
    .slide4 { /* スライドさせるために必要なクラス */
        transform: translateX(0);
    }

    .action_pro_box {
        width: 200px;
        height: 288px;
        border-radius: 10px;
        flex-shrink: 0;
        margin: 0;
    }
}

@media screen and (min-width: 1400px) {
    .action_pro_box {
        width: 300px;
        height: 432px;
        border-radius: 20px;
        flex-shrink: 0;
        margin: 0;
    }

    .action_pro_box-next {
        position: absolute;
        display: block;
        width: 100%;
        bottom: 0px;
        right: 0px;
        text-align: right;
        padding-right: 40px;
        padding-top: 4px;
        padding-bottom: 4px;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
        border-radius: 0px 0px 20px 20px;
    }
}
/* スライド追加時編集箇所　ここまで */

/* 首都圏電車区 */
.cap_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-kv.jpg) center / cover;
}

.pro_about_wrapper {
    width: 100%;
}

.pro_about_inner {
    padding: 40px 0px;
    margin-top: 80px;
    width: 100%;
    max-width: 1000px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.pro_about_bg {
    width: 300px;
    height: 432px;
    clip-path: polygon( 40px 0, 100% 0, 260px 100%, 0 100%);
}

.cap_about_bg-1 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-1.jpg) center / cover;
}
.cap_about_bg-2 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-2.jpg) right / cover;
}
.cap_about_bg-3 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-3_0.jpg) center / cover;
}

.pro_about_txt-wrapper {
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-bottom: 80px;
}

.pro_about_txt {
    display: block;
    padding: 16px;
    margin: 40px 40px 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
}


.pro_about_link-wrapper {
    padding: 8px;
    text-wrap: nowrap;
    background: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
    box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 1.0);
}

.pro_about_txt-wrapper_sm-1 {
    position: relative;
    margin-bottom: 80px;
}

.cap_about_link-wrapper_1 {
    position: absolute;
    left: 50%;
    bottom: -76px;
    transform: translateX(-50%);
}

.pro_about_txt-wrapper_sm-2 {
    position: relative;
    margin-bottom: 80px;
}

.cap_about_link-wrapper_2 {
    position: absolute;
    left: 50%;
    bottom: -76px;
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
    .pro_about_inner {
        padding: 40px 0px;
        width: 100%;
        max-width: 1000px;
        height: 580px;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 24px;
        position: relative;
    }

    .pro_about_bg {
        width: 300px;
        height: 432px;
        clip-path: polygon( 40px 0, 100% 0, 260px 100%, 0 100%);
    }
    
    .cap_about_bg-1 {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/capital-1.jpg) center / cover;
    }
    .cap_about_bg-2 {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/capital-2.jpg) right / cover;
    }
    .cap_about_bg-3 {
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/capital-3_0.jpg) center / cover;
    }
    
    .pro_about_txt-wrapper {
        height: 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding-bottom: 80px;
    }
    
    .pro_about_txt {
        display: block;
        padding: 16px;
        margin: 16px 40px 0px;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
    }
    
    
    .pro_about_link-wrapper {
        font-size: var(--txt-2);
        text-wrap: nowrap;
        background: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
        box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 1.0);
        
    }
    
    .pro_about_txt-wrapper_sm-1 {
        position: relative;
        margin-bottom: 32px;
    }
    
    .cap_about_link-wrapper_1 {
        display: block;
        position: absolute;
        width: 184px;
        height: 56px;
        bottom: -32px;
        left: 85%;
    }
    
    .pro_about_txt-wrapper_sm-2 {
        position: relative;
        margin-bottom: 32px;
    }
    
    .cap_about_link-wrapper_2 {
        display: block;
        position: absolute;
        width: 212px;
        height: 56px;
        bottom: -24px;
        left: 85%;
    }
    
    .cap_about_bg-1 {
        margin-top: 96px;
    }

    .cap_about_bg-3 {
        margin-top: 48px;
    }
}

.pro_support_wrapper {
    width: 100%;
    max-width: 1000px;
    background: var(--color-main1);
    padding: 80px 16px 120px;
    margin: 120px auto 0px;
}

.pro_support_ttl_container {
    margin-top: 0px;
}

.pro_support_ttl {
    color: var(--color-main2);
    margin-bottom: 80px;
}

.pro_support_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px;
}

@media screen and (min-width: 768px) {
    .pro_support_wrapper {
        width: 100%;
        max-width: 1000px;
        background: var(--color-main1);
        padding: 80px 16px 120px;
        margin: 120px auto 0px;
        border-radius: 20px;
    }

    .pro_support_inner {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }
}

.pro_support_box {
    width: 256px;
    min-height: 150px;
    background: var(--color-main2);
    border-radius: 10px;
}

.pro_support_box-ttl {
    width: calc(100% - 32px);
    text-align: center;
    font-size: var(--ttl-3);
    border: solid;
    border-width: 0px 0px 1px 0px;
    margin-left: 16px;
}

.pro_support_box-txt {
    padding-left:16px;
}

.pro_support_box-1 {
    position: relative;
}

.pro_support_deco_top_box-1 {
    width: 70px;
    height: 52px;
    background: url(../img/table_deco_top.png) center / cover;
    position: absolute;
    top: -46px;
}

.pro_support_deco_bottom_box-1_1 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    left: 16px;
}

.pro_support_deco_bottom_box-1_2 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    right: 16px;
}


.pro_support_box-2 {
    position: relative;
}

.pro_support_deco_top_box-2 {
    width: 70px;
    height: 52px;
    background: url(../img/table_deco_top.png) center / cover;
    position: absolute;
    top: -46px;
}

.pro_support_deco_bottom_box-2_1 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    left: 16px;
}

.pro_support_deco_bottom_box-2_2 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    right: 16px;
}


.pro_support_box-3 {
    position: relative;
}

.pro_support_deco_top_box-3 {
    width: 70px;
    height: 52px;
    background: url(../img/table_deco_top.png) center / cover;
    position: absolute;
    top: -46px;
}

.pro_support_deco_bottom_box-3_1 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    left: 16px;
}

.pro_support_deco_bottom_box-3_2 {
    width: 84px;
    height: 30px;
    background: url(../img/table_deco_bottom.png)center / cover;
    position: absolute;
    bottom: -26px;
    right: 16px;
}

.pro_support_box-txt-3 {
    font-size: var(--ttl-2);
    text-align: center;
    margin-top: 56px;
}

.pro_merit_wrapper {
    width: 100%;
    padding: 0px 16px;
}

.pro_merit_sm-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 120px 16px 0px;
}

.pro_merit_img-wrapper {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1.4;
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.pro_merit_img-ttl, .pro_merit_img-txt {
    display: none;
    color: var(--color-main2);
}

.pro_merit_img-ttl {
    padding-left: 112px;
    padding-top: 96px;
}

.pro_merit_img-txt {
    width: 400px;
    padding-left: 56px;
    padding-top: 80px;
}

.pro_merit_ttl {
    width: 100%;
    font-size: var(--ttl-2);
    padding-left: 32px;
    margin-bottom: 40px;
    z-index: auto;
}

.pro_merit_txt {
    margin-top: 40px;
}


.cap_merit-1_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-4.jpg) center / cover;
}
.cap_merit-2_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-5.jpg) center / cover;
}
.cap_merit-3_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-6.jpg) center / cover;
}

.pro_displayer_1-1 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_1-1::before {
    content: "1";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 0px;
    z-index: -1;
}
.pro_displayer_1-2 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_1-2::before {
    content: "1";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 40px;
    z-index: -1;
}

.pro_displayer_2-1 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_2-1::before {
    content: "2";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 0px;
    z-index: -1;
}
.pro_displayer_2-2 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_2-2::before {
    content: "2";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 40px;
    z-index: -1;
}

.pro_displayer_3-1 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_3-1::before {
    content: "3";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 0px;
    z-index: -1;
}
.pro_displayer_3-2 {
    position: relative;
    z-index: 0;
}
.pro_merit_ttl_3-2::before {
    content: "3";
    font-size: var(--ttl-lg);
    color: var(--color-main2);
    -webkit-text-stroke: 1px black;
    position: absolute;
    bottom: -32px;
    left: 40px;
    z-index: -1;
}

@media screen and (min-width: 768px) {
    .pro_merit_img-ttl, .pro_merit_img-txt {
        display: block;
        color: var(--color-main2);
    }

    .pro_merit_ttl {
        display: none;
        width: 100%;
        font-size: var(--ttl-2);
        padding-left: 32px;
        margin-bottom: 40px;
        z-index: auto;
    }
    
    .pro_merit_txt {
        display: none;
        margin-top: 40px;
    }

    .pro_merit_img-wrapper {
        width: 100%;
        max-width: 1000px;
        max-height: 512px;
        aspect-ratio: 1.4;
        box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
    }
}

.pro_future_wrapeer {
    width: 100%;
    margin-top: 80px;
    padding: 1px 16px 80px;
    position: relative;
    overflow: hidden;
}

.pro_future_txt-wrapper {
    display: flex;
    flex-direction: column;
}

.cap_future_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/capital-7_big.jpg) center / cover;
}

.cap_future_ttl {
    color: var(--color-main2);
}

.pro_future_txt-wrpper {
    width: 100%;
}

.pro_future_txt {
    padding: 8px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    margin-top: 32px;
    width: 200px;
}

.future-txt_lg {
    font-size: var(--ttl-2);
    font-weight: bold;
}

.future-txt_1 {
    margin-top: 80px;
}

.future-txt_1, .future-txt_3 {
    margin-left: calc(10%) ;
}

.future-txt_2, .future-txt_4 {
    margin-left: calc(80% - 200px);
}

.future_deco {
    background: radial-gradient(circle, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0));
    border-radius: 50%;
    filter: blur(40px);
}

.f-deco_lg {
    width: 160px;
    height: 160px;
}

.f-deco_sm {
    width: 120px;
    height: 120px;
}

.f-deco_1 {
    position: absolute;
    top: 20%;
    right: -24px;
}
.f-deco_2 {
    position: absolute;
    top: calc(20% + 96px);
    right: 51px;
}
.f-deco_3 {
    position: absolute;
    left: -36px;
    top: 50%;
}
.f-deco_4 {
    position: absolute;
    top: calc(50% + 56px);
    left: 91px;
}
.f-deco_5 {
    position: absolute;
    top: 70%;
    right: 8px;
}
.f-deco_6 {
    position: absolute;
    top: calc(70% + 160px);
    left: -16px;
}

@media screen and (min-width: 768px) {
    .pro_future_wrapeer {
        margin-top: 120px;
        width: 100%;
        padding: 1px 16px 80px;
    }

    .pro_future_rtxt-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .pro_future_txt {
        padding: 8px;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
        margin-top: 32px;
        width: 200px;
    }
    
    .future-txt_lg {
        font-size: var(--ttl-2);
        font-weight: bold;
    }
       
    .future-txt_1 {
        margin-top: 36px;
        margin-left: 0px;
    }

    .future-txt_2, .future-txt_3, .future-txt_4 {
        margin-left: calc((100% - 768px) / 4 );

    }

    .future-txt_2 {
        margin-top: 158px;
    }

    .future-txt_3 {
        margin-top: 50px;
    }

    .future-txt_4 {
        margin-top: 160px;
    }   
}

.pro_info_table {
    width: 100%;
}

.pro_info_table-wrapper {
    margin: 40px 16px 0px;
    padding: 8px;
    max-width: 656px;
    background: var(--color-main2);
    border-radius: 10px;
    margin-bottom: 80px;
    position: relative;
}

.pro_info_table {
    font-size: var(--txt-2);
}

.pro_info_tr {
    display: block;
    padding: 16px 0px;
}

.pro_info_tr:not(:last-child) {
    border: solid;
    border-width: 0px 0px 1px 0px;
}

.pro_td_ttl {
    text-wrap: nowrap;
    text-align: right;
    vertical-align: top;
    width: 80px;
}

.pro_td_txt {
    padding-left: 16px;
}

.pro_info_deco_top {
    background: url(../img/table_deco_top.png) center / cover;
    width: 70px;
    height: 51px;
    position: absolute;
    top: -46px;
}

.pro_info_deco_bottom {
    background: url(../img/table_deco_bottom.png) center / cover;
    width: 112px;
    height: 40px;
    position: absolute;
}

.pro_deco_1 {
    left: 16px;
    bottom: -32px;
}

.pro_deco_2 {
    right: 16px;
    bottom: -32px;
}

/* 2200形保存会ページ */
.nini_about_bg-1 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-1.jpg) center / cover;
}
.nini_about_bg-2 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-2.jpg) center / cover;
}
.nini_about_bg-3 {
    display: none;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-3.jpg) center / cover;
}
@media screen and (min-width: 768px) {
    .nini_about_bg-3 {
        display: block;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/2200-3.jpg) center / cover;
    }

    .nini_about_bg-1 {
        margin-top: 96px;
    }

    .nini_about_bg-3 {
        margin-top: 48px;
    }
}
.nini_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-kv.jpg) right / cover;
}
.nini_merit-1_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
    url(../img/2200-4.jpg) center / cover;
}
.nini_merit-2_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-5.jpg) center / cover;
}
.nini_merit-3_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
    url(../img/2200-6_b.jpg) center / cover;
}
.nini_future_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/2200-7.jpg) center / cover;
}

/* 地下鉄電車保存会ページ */
.subway_about_bg-1 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/subway-1.jpg) center / cover;
}
.subway_about_bg-2 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/subway-2.jpg) center / cover;
}
.subway_about_bg-3 {
    display: none;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/subway-3.jpg) center / cover;
}
@media screen and (min-width: 768px) {
    .subway_about_bg-3 {
        display: block;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/subway-3.jpg) center / cover;
    }

    .subway_about_bg-1 {
        margin-top: 96px;
    }

    .subway_about_bg-3 {
        margin-top: 48px;
    }
}
.subway_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.4), rgba(51, 51, 51, 0.4)),
    url(../img/subway-kv.jpg) center / cover;
}
.subway_merit-1_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.4), rgba(51, 51, 51, 0.4)),
    url(../img/subway-4.jpg) center / cover;
}
.subway_merit-2_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.4), rgba(51, 51, 51, 0.4)),
    url(../img/subway-5.jpg) center / cover;
}
.subway_merit-3_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
    url(../img/subway-6.jpg) center / cover;
}
.subway_future_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/subway-7.jpg) center / cover;
}
.subway_support_box-txt-3 {
    padding: 24px 8px 0px;
    font-size: var(--txt-2);
}

/* ステンプラ―カー保存会ページ */
.keio_about_bg-1 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-2.JPG) center / cover;
}
.keio_about_bg-2 {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-3.JPG) center / cover;
}
.keio_about_bg-3 {
    display: none;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-4.jpg) center / cover;
}
@media screen and (min-width: 768px) {
    .keio_about_bg-3 {
        display: block;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/keio-4.jpg) center / cover;
    }

    .keio_about_bg-1 {
        margin-top: 96px;
    }

    .keio_about_bg-3 {
        margin-top: 48px;
    }
}
.keio_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-1.jpg) right top / cover;
}
.keio_merit-1_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
    url(../img/keio-5.JPG) center / cover;
}
.keio_merit-2_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-6.JPG) center / cover;
}
.keio_merit-3_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0.3)),
    url(../img/keio-7.jpg) center / cover;
}
.keio_future_img-wrapper {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/keio-8.JPG) center / cover;
}

/* 保存車両 */
.trains_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/three-trains.jpg) right / cover;
}

.trains_inner {
    width: calc(100% - 32px);
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    padding: 16px;
    border-radius: 10px;
    background: var(--color-main2);
}

.trains_inner:first-child {
    margin-top: 120px;
}
.trains_inner:last-child {
    margin-bottom: 120px;
}

.trains_name {
    display: inline-block;
    font-size: var(--ttl-3);
    margin: 16px 0px 0px 16px;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}

.trains_img-wrapper {
    width: 100%;
    aspect-ratio: 1.4;
}

.deha_img-wrapper {
    background: url(../img/deha-1.jpg) center / cover;
}

.moto_img-wrapper {
    background: url(../img/moto-1.jpg) center / cover;
}

.trains_moto_link {
    font-weight: bold;
    color: var(--color-accent);
}

.kiha_img-wrapper {
    background: url(../img/kiha-1.jpg) center / cover;   
}

.keio_img-wrapper {
    background: url(../img/keio-1.jpg) center / cover;   
}

.moha_img-wrapper {
    background: url(../img/moha-1.jpg) center / cover;   
}

/* ご支援のお願い */

.don_kv_container {
    width: 100%;
    height: 50vh;
    clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    background-repeat: no-repeat; 
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/donation-kv.jpg) top / cover;
}

@media screen and (min-width: 768px) {
    .don_kv_container {
        width: 100%;
        height: 75vh;
        clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
        background-repeat: no-repeat; 
        position: relative;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/donation-kv.jpg) top ,40px / cover;
    }
}



.don_help-ttl {
    font-size: var(--ttl-1);
    text-align: center;
    margin-top: 80px;
}

.don_help-txt {
    margin: 40px auto 0px;
    max-width: 600px;
    padding: 16px;
    background: var(--color-main2);
    color: var(--color-accent);
}

.don_can_wrapper {
    padding: 0px 16px;
    overflow: hidden;
}

.don_can_sm-wrapper {
    width: 100%;
    max-width: 1000px;
    background: var(--color-main2);
    border-radius: 10px;
    margin-top: 40px;
}

.don_can_img-wrapper {
    width: 100%;
    aspect-ratio: 1.4;
    border-radius: 10px 10px 0px 0px;
}

.don_can_img-1 {
    background: url(../img/donation-1.jpg) center / cover;
}
.don_can_img-2 {
    background: url(../img/donation-2.jpg) center / cover;
}
.don_can_img-3 {
    background: url(../img/donation-3.jpg) center / cover;
}
.don_can_img-4 {
    background: url(../img/donation-4.jpg) center / cover;
}

.don_can_ttl{
    font-size: var(--ttl-2);
    text-align: center;
    margin-top: 24px;
}

.don_deco-wrapper {
    background: url(../img/don_deco.png);
    width: 80%;
    height: 14px;
    background-repeat: repeat-x;
    margin-left: 20%;
}

.don_can_txt {
    padding: 24px;
}

.don_done_link {
    color: var(--color-accent);
}

@media screen and (min-width: 768px) {
    .don_can_sm-wrapper {
        width: 100%;
        max-width: 1000px;
        background: var(--color-main2);
        border-radius: 10px;
        margin-top: 80px;
        display: flex;
    }

    .don_can_img-wrapper {
        width: 50%;
        aspect-ratio: auto;
        border-radius: 10px 0px 0px 10px;
        flex-shrink: 0;
    }

    .don_deco-wrapper {
        background: url(../img/don_deco.png) right;
        width: 80%;
        height: 14px;
        background-repeat: repeat-x;
        margin-left: 0%;
    }
}


.don_info_table-wrapper {
    margin: 40px 16px 0px;
    padding: 16px;
    width: 280px;
    background: var(--color-main2);
    border-radius: 10px;
    margin-bottom: 80px;
    position: relative;
}

.don_info_table {
    width: 100%;
    font-size: var(--txt-2);
}

.don_info_tr {
    display: block;
    padding: 16px 0px;
}

.don_info_tr:not(:last-child) {
    border: solid;
    border-width: 0px 0px 1px 0px;
}

.don_td_ttl {
    text-wrap: nowrap;
    text-align: right;
    vertical-align: top;
    width: 80px;
}

.don_td_txt {
    padding-left: 16px;
}

.don_info_deco_top {
    background: url(../img/table_deco_top.png) center / cover;
    width: 70px;
    height: 51px;
    position: absolute;
    top: -46px;
}

.don_info_deco_bottom {
    background: url(../img/table_deco_bottom.png) center / cover;
    width: 112px;
    height: 40px;
    position: absolute;
}

.don_deco_1 {
    left: 16px;
    bottom: -32px;
}

.don_deco_2 {
    right: 16px;
    bottom: -32px;
}

.don_way_y-txt, .don_way_e-txt {
    font-size: var(--ttl-2);
    text-align: center;
}

.don_way_y-txt {
    margin-top: 80px;
}
.don_way_y-txt span {
    color: var(--color-accent);
}

.don_way_e-txt span {
    color: var(--color-main1);
}

@media screen and (min-width: 768px) {
    .don_way_inner {
        margin-top: 80px;
         align-items: top;
        justify-content: center;
    }

    .don_way_y-txt {
        margin-top: 0px;
        margin-bottom: 52px;
    }
}

.con_kv_container {
    width: 100%;
    height: 50vh;
    clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    background-repeat: no-repeat; 
    position: relative;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/contact-kv.jpg) top / cover;
}

@media screen and (min-width: 768px) {
    .con_kv_container {
        width: 100%;
        height: 75vh;
        clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
        background-repeat: no-repeat; 
        position: relative;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/contact-kv.jpg) top / cover;
    }
}

.con_wrapper {
    width: 100%;
    padding: 0px 16px;
    margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
    .con_wrapper {
        width: 100%;
        padding: 0px 24px;
        margin-bottom: 120px;
    }
}

.con_thank-txt {
    margin-top: 80px;
    padding: 16px;
    background: var(--color-main2);
    border-radius: 10px;
}

.con_way-txt {
    margin-top: 120px;
    text-align: center;
}

.con_process_container {
    width: 140px;
    height: 50px;
    background: url(../img/con_process.png) center / cover;
    margin-top: 40px;
}

.con_form {
    width: 100%;
    max-width: 536px;
    margin-top: 40px;
    border: solid var(--color-main1) 4px;
    padding: 32px 12px 40px;
}

.form_unit {
    width: 240px;
    display: block;
    margin: 0 auto;
}

.form_unit:not(:first-child) {
    margin-top: 16px;
}

.form_unit_head {
    padding-left: 16px;
    font-size: var(--txt-2);
}

.form_unit_head_must::after {
    content: "\5FC5\9808";
    margin-left: 16px;
    padding: 0px 6px;
    font-size: var(--txt-3);
    color: var(--color-main2);
    background: var(--color-accent);
    border-radius: 9px;
}

.form_input {
    width: 100%;
    font-size: var(--txt-1);
    background: var(--color-main2);
    border-radius: 16px;
    padding: 4px 16px;
    margin-top: 8px;
}

.form_textarea {
    width: 100%;
    font-size: var(--txt-3);
    background: var(--color-main2);
    border-radius: 16px;
    padding: 4px 16px;
    margin-top: 8px;
    resize: none;
}

.form_submit {
    display: block;
    width: 200px;
    margin: 40px auto 0;
    padding: 12px 36px;
    background: var(--color-accent);
    border-radius: 10px;
    color: var(--color-main2);
    font-size: var(--txt-2);
    cursor: pointer;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
}

.form_submit:hover {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
    transition: ease 0.1s;
}

.diary_kv {
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/diary-kv.jpg) center / cover;
}

.diary_wrapper {
    width: 100%;
    padding: 40px 16px 120px;
}

.diary_art_container {
    margin-top: 80px;
    width: 100%;
    max-width: 1000px;
}

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

.diary_art_date {
    display: block;
    width: 120px;
    text-wrap: nowrap;
}

.diary_art_deco {
    width: calc(100% - 136px);
    height: 10px;
    background: url(../img/don_deco.png);
    background-repeat: repeat-x;
}

.diary_art_tll {
    font-size: var(--ttl-2);
    margin-top: 8px;
}

.diary_art_inner {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    /* ↑れす */
}

.diary_art_img {
    width: 288px;
    height: 100%;
}

.diary_art_txt {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .diary_art_inner {
        margin-top: 40px;
        display: flex;
        flex-direction: row-reverse;
        align-items: start;
        gap: 16px;
    }
}
.diary_page_container {
    display: flex;
    width: 306px;
    height: 34px;
    margin: 0 auto;
    gap: 16px;
}
.diary_page_child {
    width: 30px;
    height: 30px;
}


/* 404 */
.nf_wrapper {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
    url(../img/404_bg.jpg) top / cover;
}

.nf_ttl {
    font-size: var(--ttl-0);
    font-weight: bold;
    text-align: center;
    padding-top: 40vh;
    color: var(--color-main2);
}

.nf_txt {
    font-size: var(--ttl-2);
    color: var(--color-main2);
    text-align: center;
    padding-top: 40px;
}

@media screen and (min-width: 768px) {
    .nf_wrapper {
        width: 100%;
        height: 100vh;
        background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
        url(../img/404_bg.jpg) cover;
        background-position: 0px 80px;
    }
}

/* pagination */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
  }
  .page-numbers {
    font-weight: bold;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-main1);
    background: var(--color-main2);
  }
  .page-numbers:not(:first-child) {
    margin-left: 8px;
  }
  .page-numbers.current {
    color: #000;
    border-color: var(--color-accent);
    background: var(--color-main2);
  }
  .page-numbers.next,
  .page-numbers.prev {
    position: relative;
  }
  .page-numbers.next::before,
  .page-numbers.prev::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--color-main1);
    border-right: 1px solid var(--color-main1);
    position: absolute;
    top: 50%;
  }
  .page-numbers.next::before {
    transform: translateY(-50%) rotate(45deg);
    left: 32%;
  }
  .page-numbers.prev::before {
    transform: translateY(-50%) rotate(-135deg);
    right: 32%;
  }
  
  .page-numbers.dots {
    font-size: 14px;
    border: none;
  }