.top_about_us {
    text-align: center;
    background-color: #10253a
}

.top_about_us:after {
    display: block;
    width: 100%;
    height: clamp(9.375rem, 4.8927613941rem + 16.7560321716vw, 25rem);
    content: "";
    background: url(../images/top/bg_about_us.jpg) 0 0 no-repeat;
    background-size: cover
}

.top_about_us--inner {
    padding: clamp(1.5rem, 1.8754752852rem + 2.7376425856vw, 2.625rem) 20px clamp(1.5rem, 3.2295627376rem + 2.2813688213vw, 2.625rem)
}

.top_about_us--more {
    padding-top: clamp(1.25rem, .504039924rem + 3.2699619772vw, 1.5rem)
}

.top_contents_link {
    padding-top: clamp(3.125rem, 1.3902091255rem + 7.6045627376vw, 6.5rem);
    padding-bottom: clamp(2.5rem, .7652091255rem + 7.6045627376vw, 2.5rem)
}

.top_contents_link--card {
    display: grid;
    grid-template-areas: "image" "contents";
    max-width: 1200px;
    margin: 0 auto clamp(2.5rem, 1.4591254753rem + 4.5627376426vw, 6.25rem)
}

@media screen and (min-width:768px) {
    .top_contents_link--card {
        grid-template-areas: "image contents";
        grid-template-columns: 49% 51%
    }
}

.top_contents_link--card_contents {
    grid-area: contents;
    padding: 20px 10px 30px;
    text-align: center;
    background-color: #f5f5f6
}

@media screen and (min-width:768px) {
    .top_contents_link--card_contents {
        display: grid;
        grid-template-columns: 100%;
        align-items: center;
        justify-content: left;
        padding: clamp(1.25rem, -3.3653846154rem + 9.6153846154vw, 3.125rem) clamp(1.25rem, -4.9038461538rem + 12.8205128205vw, 2.5rem) clamp(1.25rem, -3.3653846154rem + 9.6153846154vw, 3.125rem) clamp(1.25rem, -4.9038461538rem + 12.8205128205vw, 2.5rem);
        text-align: left
    }
}

.top_contents_link--card_contents h3 {
    margin-bottom: 10px;
    font-size: clamp(1.25rem, .8352272727rem + 1.8181818182vw, 2.0625rem)
}

.top_contents_link--explain {
    margin-bottom: clamp(1.25rem, .2928321678rem + 4.1958041958vw, 3.125rem);
    font-size: clamp(.75rem, .4947552448rem + 1.1188811189vw, 1rem);
    line-height: 1.7;
    color: #297fca
}

.top_contents_link--card_image {
    grid-area: image
}

@media screen and (min-width:768px) {
    .top_contents_link--card:first-child .top_contents_link--card_image {
        background: url(../images/top/th_top_content_link01_sp.jpg) 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width:768px) {
    .top_contents_link--card:nth-child(2) .top_contents_link--card_image {
        background: url(../images/top/th_top_content_link02_sp.jpg) 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width:768px) {
    .top_contents_link--card:nth-child(3) .top_contents_link--card_image {
        background: url(../images/top/th_top_content_link03_sp.jpg) 50% no-repeat;
        background-size: cover
    }
}

.top_contents_link--card_image img {
    width: 100%
}

@media screen and (min-width:768px) {
    .top_contents_link--card_image img {
        display: none
    }
}

.top_contents_link--copy {
    margin-bottom: clamp(.625rem, -.6512237762rem + 5.5944055944vw, 3.125rem);
    font-size: clamp(1.25rem, .9669665012rem + 1.2406947891vw, 1.5625rem);
    line-height: 1.3
}

@media screen and (min-width:768px) {
    .top_contents_link--copy {
        font-size: clamp(1.5625rem, .5098684211rem + 2.1929824561vw, 2.8125rem)
    }
}

.top_contents_link--link {
    margin: auto;
}

@media screen and (min-width:768px) {
    .top_contents_link--link {
        margin: unset;
        align-self: flex-end;
        justify-self: flex-end
    }
}

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

@keyframes infinity-scroll-left {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

.top_contents_link--card_contents .etitle {
    font-family: "A-OTF-FutoGoB101Pro-Bold";
}

.top_image_slider {
    display: flex;
    width: 100%;
    overflow: hidden
}

.top_image_slider--lists {
    display: flex;
    animation: infinity-scroll-left 95s linear .5s infinite both
}

.top_image_slider--slide {
    width: 33.3333333333vw
}

@media screen and (min-width:768px) {
    .top_image_slider--slide {
        width: 20vw
    }
}

.top_image_slider--slide img,
.top_kv img {
    width: 100%;
    height: 100%
}

#top_kv_img {
    opacity: 1; /* Start with full opacity */
    transition: opacity 1s ease; /* Smooth opacity transition */
}

.top_news {
    padding-top: clamp(1.875rem, .3136882129rem + 6.8441064639vw, 4.5rem);
    padding-bottom: clamp(1.875rem, -.1373574144rem + 8.8212927757vw, 5.125rem);
    text-align: center
}

.top_news--lists {
    width: -moz-fit-content;
    width: fit-content;
    text-align: left
}

@media screen and (min-width:768px) {
    .top_news--lists {
        max-width: 1200px;
        margin: 0 auto
    }
}

.top_news--li:not(:last-child) {
    margin-bottom: 30px
}

@media screen and (min-width:768px) {
    .top_news--li {
        display: flex;
        gap: 30px
    }
}

.top_news--li>p {
    flex-grow: 0;
    font-size: clamp(.875rem, .6494771863rem + .9885931559vw, 1.25rem)
}

@media screen and (min-width:768px) {
    .top_news--inner {
        padding-bottom: 0px;
        flex: 0 0 auto
    }
}

@media screen and (max-width:767px) {
    .top_news--inner {
        align-items: center;
        padding-bottom: 10px;
        display: flex;
        gap: 30px
    }

    .top_news--inner .top_news--time{
        flex: 1;
    }

    .top_news--inner .top_news--category{
        flex: 2;
    }

    .top_news--inner .top_news--category span{
        width: 100%;
    }
}


.top_news--time {
    font-size: clamp(.875rem, .6494771863rem + .9885931559vw, 1.25rem)
}

.top_news--category {
    font-family: "A-OTF-FutoGoB101Pro-Bold";
}

@media screen and (min-width:768px) {
    .top_news--time {
        padding-right: 30px
    }
}

@media screen and (min-width:768px) {

    .top_news--category,
    .top_news--time {
        display: inline-block
    }
}

.top_news--more {
    padding-top: clamp(2.25rem, 1.4866920152rem + 3.3460076046vw, 2rem)
}

.top_policy {
    padding-top: clamp(2.5rem, 1.8754752852rem + 2.7376425856vw, 4.75rem);
    padding-bottom: clamp(3.75rem, 3.2295627376rem + 2.2813688213vw, 5.625rem);
    text-align: center
}

.top_policy--contents {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.top_policy--copy {
    font-family: 'toppan';
    /* font-weight: bold; */
}

@media screen and (min-width:750px) {
    .text_contents {
        max-width: 1200px;
        line-height: 2;
    }
}

.top_policy--br {
    display: none
}

@media screen and (min-width:750px) {
    .top_policy--br {
        display: inline
    }

    .top_policy--br-sp {
        display: none
    }

    .top_about_us--br-sp {
        display: none
    }
}

.top_about_us--contents {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.btn {
    width: 150px;
}

.btn.btn-white {
    margin: auto;
}

.is-white .arrow-button{
    color: #fff;
}

.is-white .arrow-button > .arrow {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.is-white .arrow-button > .arrow::before {
    background-color: #fff;
}

.is-white .arrow-button:hover > .arrow {
    border-color: #fff;
}

.is-white .arrow-button:hover {
    color: #fff;
}

.is-blue .arrow-button{
    color: #323232;
}

.is-blue .arrow-button > .arrow {
    border-right: 2px solid #323232;
    border-bottom: 2px solid #323232;
}

.is-blue .arrow-button > .arrow::before {
    background-color: #323232;
}

.is-blue .arrow-button:hover > .arrow {
    border-color: #323232;
}

.is-blue .arrow-button:hover {
    color: #323232;
}

.arrow-button {
    font-family: Optima;
    font-size: 18px;
    display: flex;
    padding: 10px 16px;
    border-radius: 20px;
    transition: all .3s ease;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
}

.arrow-button > .arrow {
    width: 6px;
    height: 6px;
    
    position: relative;
    transform: rotate(-45deg);
    margin: 0 10px;
    transition: all .3s ease;
}

.arrow-button > .arrow::before {
    display: block;
    width: 15px;
    transform-origin: bottom right;
    height: 2px;
    position: absolute;
    opacity: 0;
    bottom: calc(-2px / 2);
    transform: rotate(45deg);
    transition: all .3s ease;
    content: "";
    right: 0;
}

.arrow-button:hover > .arrow {
    transform: rotate(-45deg) translate(4px, 4px);
}

.arrow-button:hover > .arrow::before {
    opacity: 1;
    width: 15px;
}

.arrow-button:hover {
    text-decoration: underline;
}