@charset "utf-8";


/**/
html {
    scroll-behavior: smooth;
}
body{
    font-family: 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    background-color: #fff;
}



/**/
.container{
    max-width:1180px;
    margin:0 auto;
    align-items: center;
    @media screen and (max-width: 1240px){
        max-width: 960px;
    }
    @media screen and (max-width: 1024px){
        max-width: 780px;
    }
    @media screen and (max-width: 768px){
        max-width: 84%;
    }
}



/**/
body{
    --background--width: 1240px;
    @media screen and (max-width: 1520px){
        --background--width: 69.4%;
    }
    @media screen and (max-width: 768px){
        --background--width: 87.3%;
        --max--width: 768px;
    }
}



/**/
header{
    height: 800px;
    @media screen and (max-width: 768px){
        height: auto;
    }
    .background{
        background-image: url('../img/mainvisual.jpg');
        background-repeat: no-repeat;
        background-position: left -20px center;
        background-size: cover;
        width: var(--background--width);
        height: 800px;
        position: absolute;
        right: 0;
        @media screen and (max-width: 768px){
            top: 95px;
            height: 520px;
        }
    }
    .hunberger{
        background-color: #ffffff;
        @media screen and (max-width: 768px){
            background-color: rgba(255, 255, 255, 0);
        }
    }
    .container{
        max-width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .header{
            padding-top: 35px;
            margin-left: 56px;
            width: 251px;
            z-index: 8;
            position: absolute;
            @media screen and (max-width: 768px){
                padding-top: 28px;
                width: 242px;
                margin-left: 48px;
            }
            @media screen and (max-width: 480px){
                margin-left: 18px;
            }
            .forhome{
                width: 251px;
                @media screen and (max-width: 768px){
                    width: 242px;
                }
                .logo{
                    width: auto;
                    height: 41px;
                    @media screen and (max-width: 768px){
                        width: 242px;
                        height: auto;
                    }
                }
            }
        }
        .header.fixed{
            position: fixed;
            padding: 0;
        }
        .mainvisual{
            --mainvisual--max: 1600px;
            max-width: var(--mainvisual--max);
            margin:0 auto;
            align-items: center;
            .text_home{
                margin-top: 156px;
                font-family: 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
                .catchphrase{
                    font-size: 64px;
                    font-weight: 600;
                    line-height: 89.6px;
                    letter-spacing: 0.2em;
                    text-align: left;
                    color: #0d2f62;
                    @media screen and (max-width: 768px){
                        font-size: 7.14vw;
                        font-weight: 700;
                        line-height: 52px;
                        letter-spacing: 0.1em;
                    }
                }
                .en{
                    font-family: 'Montserrat' , sans-serif;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 30px;
                    letter-spacing: 0.04em;
                    text-align: left;
                    color: #617FA9;
                    margin-top: 12px;
                    @media screen and (width > 768px){
                        br{
                            display: none
                        }
                    }
                    @media screen and (max-width: 768px){
                        width: 350px;
                        font-size: 15px;
                        font-weight: 500;
                        line-height: 17.03px;
                        letter-spacing: 0.04em;
                        br{
                            display: block;
                        }
                    }
                }
                .description{
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 33.6px;
                    text-align: left;
                    margin-top: 28px;
                    color: #333333;
                    @media screen and (max-width: 768px){
                        margin-top: 232px;
                        line-height: 32px;
                    }
                }
                .space{
                    @media screen and (max-width: 768px){
                        margin-top: 16px;
                    }
                }
            }
        }
        .circular {
            --arrow--size: 118px;
            width: var(--arrow--size);
            height: var(--arrow--size);
            aspect-ratio: 1;
            background-color: #0d2f62;
            border-radius: 50%;
            color: #fff;
            font-size: 72px;
            margin: 56px calc(var(--background--width) - var(--arrow--size) / 2) auto auto;
            align-items: center;
            justify-content: center;
            display: flex;
            @media screen and (max-width: 768px) {
                display: none;
            }
            .arrow {
                margin: 0;
                opacity: 0; /* 初期状態で透明に */
                transform: translateY(-50px); /* 初期状態で少し上にずらしておく */
                transition: opacity 0.5s ease, transform 0.5s ease; /* アニメーションの遷移を設定 */
                span{
                    display: block;
                    height: 3px;
                    background-color: #ffffff;
                    transition: background-color 0.3s ease;
                }
                span:nth-child(1){
                    width: 20px;
                    transform: rotate(135deg) translate(15px, -14px);
                    transform-origin: right center;
                    border-radius: 3px;
                    position: absolute;
                }
                span:nth-child(2){
                    width: 20px;
                    transform: rotate(45deg) translate(15px, 14px);
                    transform-origin: right center;
                    border-radius: 3px;
                    position: absolute;
                }
                span:nth-child(3){
                    width: 40px;
                    transform: rotate(90deg) translate(0, 0px);
                }
            }
            .arrow.animate {
                opacity: 1; /* 表示状態に */
                transform: translateY(0); /* 元の位置に移動 */
            }
        }
        .nav{
            display: none;
            position: absolute;
            width: 160px;
            height: 100%;
            background-color: #fff;
            right: 0;
            .description{
                font-size: 12px;
                font-weight: 700;
                line-height: 18px;
                letter-spacing: 0.16em;
                text-align: left;
                font-family: 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
                color: #0d2f62;
                transform: rotate(90deg);
                transform-origin: bottom left;
                margin: 0 auto;
            }
        }
        @media screen and (max-width: 1520px){
            background-size: 999px auto;
            .mainvisual{
                max-width: 1320px;
                .text_home{
                    margin-left: 80px;
                    @media screen and (max-width: 768px){
                        margin-left: 60px;
                    }
                    @media screen and (max-width: 480px){
                        margin-left: 28px;
                    }
                }
            }
        }
    }
}



/**/
.marquee {
    position: relative;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    list-style: none;
    padding-inline: 0;
    margin-inline: 0;
    gap: 0;
    li{
        font-family: 'Montserrat' , sans-serif;
        font-size: 200px;
        line-height: 200px;
        text-align: left;
        color: #e1eaef;
        font-weight: 100;
        margin-top: 100px;
        display: inline-block;
        animation: slide-left 48s linear infinite; 
        padding: 0 .6em 0 0;
        @media screen and (max-width: 768px){
            font-size: 100px;
            line-height: 80px;
        }
        @media screen and (max-width: 480px){
            font-size: 80px;
        }
    }
}
@keyframes slide-left {
    100% {
        transform: translateX(-100%);
    }
}


.about{
    background-image: url(../img/front.jpg) ,url(../img/about.jpg);
    background-repeat: no-repeat;
    background-position: top 8px right ,top 340px right 452px;
    background-attachment: scroll;
    background-size: 640px auto ,310px auto;
    padding: 0 24px 120px;
    margin-top: -40px;
    position: relative;
    z-index: 6;
    @media screen and (max-width: 1520px){
        background-size: 543px auto, 310px auto;
        background-position: top 12px right ,top 280px right 336px;
    }
    @media screen and (max-width: 1240px){
        background-size: 500px auto, 280px auto;
        background-position: bottom 240px right ,bottom 120px right 320px;
        padding: 0 40px 120px;
    }
    @media screen and (max-width: 1024px){
        background-size: 440px auto, 200px auto;
        background-position: bottom 200px right ,bottom 120px right 320px;
    }
    @media screen and (max-width: 768px){
        margin-top: -12px;
        background-image: none;
        padding: 0 0 0;
    }
    .container{
        .text_home{
            font-family: 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
            width: 562px;
            @media screen and (max-width: 1240px){
                max-width: 40%;
            }
            @media screen and (max-width: 1024px){
                max-width: 44%;
            }
            @media screen and (max-width: 768px){
                max-width: 100%;
            }
            .ttl{
                font-family: 'manrope' ,sans-serif;
                font-size: 24px;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.04em;
                text-align: left;
                color: #617FA9;
                margin-bottom: 20px;
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    line-height: 16px;
                }
                @media screen and (max-width: 480px){
                    font-size: 16px;
                }
            }
            .heading{
                font-size: 32px;
                font-weight: 600;
                letter-spacing: 0.05em;
                color: #333333;
                margin-bottom: 52px;
                word-break: keep-all;
                @media screen and (max-width: 1240px){
                    margin-bottom: 32px;
                }
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 20px;
                    margin-bottom: 40px;
                }
            }
            .description{
                font-size: 14px;
                font-weight: 500;
                line-height: 33.6px;
                text-align: left;
                color: #333333;
                @media screen and (max-width: 768px){
                    font-size: 15px;
                    font-weight: 500;
                    line-height: 36px;
                }
            }
            .btn{
                position: relative;
                background-color: #0d2f62;
                --btn-height: 64px;
                height: var(--btn-height);
                width: 267px;
                margin-top: 80px;
                display: flex;
                color: #fff;
                text-decoration: none;
                text-align: center;
                align-items: center;
                justify-content: center;
                border-radius: calc(var(--btn-height) / 2);
                overflow: hidden;
                transition: color 0.3s ease;
                border: 1px solid #0d2f62;
                @media screen and (max-width: 1240px){
                    margin-top: 48px;
                }
                @media screen and (max-width: 768px){
                    margin-top: 60px;
                }
                .btn_text{
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 16px;
                    letter-spacing: 0.04em;
                    text-align: left;
                    align-self: center;
                    z-index: 1;
                    text-indent: -16px;
                    transition: color 0.3s ease;
                }
                .btn_icon{
                    background-color: #ffffff;
                    z-index: 1;
                    width: 32px;
                    aspect-ratio: 1;
                    border-radius: 50%;
                    position: absolute;
                    right: 12px;
                    align-items: center;
                    justify-content: center;
                    display: flex;
                    .arrow{
                        span{
                            background-color: #0d2f62;
                            display: block;
                            height: 1px;
                        }
                    }
                }
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -100%; /* 初期状態では左端に配置 */
                    width: 100%;
                    height: 100%;
                    background-color: #ffffff;
                    transition: transform 0.5s ease; /* 左から右へのアニメーション */
                    z-index: 0; /* テキストの背面に配置 */
                }
            
                &:hover::before {
                    transform: translateX(100%); /* ホバー時に擬似要素を右に移動 */
                }
            
                &:hover {
                    color: #0d2f62; /* テキスト色を反転 */
                }
            
                &:hover .btn_text {
                    color: #0d2f62;
                }
            
                &:hover .btn_icon {
                    background-color: #0d2f62;
            
                    .arrow span {
                        background-color: #ffffff;
                    }
                }
            }
        }
    }
    .pic{
        display: none;
        @media screen and (max-width: 768px){
            display: block;
            margin-top: 78px;
            margin-bottom: 120px;
            .first{
                width: 73.6vw;
                margin: 0 0 0 auto;
                aspect-ratio: 276 / 237;
                background-image: url('../img/front.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                z-index: 99;
                position: relative;
            }
            .second{
                width: 49.9vw;
                margin: -80px auto 0 0;
                aspect-ratio: 187 / 158;
                background-image: url('../img/about.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                z-index: 10;
                position: relative;
            }
        }
    }
}


/**/
.service{
    background-image: linear-gradient(to right, #E9EFF3 76.7%, #fff 76.7%);
    height: 890px;
    padding: 100px 24px 0;
    @media screen and (max-width: 1240px){
        padding: 100px 40px 0;
    }
    @media screen and (max-width: 1024px){
        padding: 100px 12px 0;
        height: 780px;
    }
    @media screen and (max-width: 768px){
        background-image: linear-gradient(to right, #E9EFF3 84%, #fff 84%);
        height: auto;
        padding: 78px 0px 80px;
    }
    .container{
        .text_home{
            .ttl{
                font-family: 'manrope' ,sans-serif;
                font-size: 24px;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.04em;
                text-align: left;
                color: #617FA9;
                margin-bottom: 20px;
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    line-height: 16px;
                }
                @media screen and (max-width: 480px){
                    font-size: 16px;
                }
            }
            .heading{
                font-size: 32px;
                font-weight: 600;
                letter-spacing: 0.05em;
                color: #0d2f62;
                margin-bottom: 52px;
                @media screen and (max-width: 1240px){
                    margin-bottom: 32px;
                }
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 20px;
                    margin-bottom: 60px;
                }
            }
            .contents{
                display: flex;
                justify-content: space-between;
                @media screen and (max-width: 768px){
                    display: block;
                }
                .flex{
                    display: flex;
                }
                .box{
                    color: #fff;
                    padding: 0 40px;
                    text-decoration: none;
                    position: relative;
                    @media screen and (max-width: 1240px){
                        padding: 0 32px;
                    }
                    @media screen and (max-width: 768px){
                        align-content: flex-end;
                        padding-bottom: 56px;
                    }
                    .division{
                        font-size: 24px;
                        font-weight: 600;
                        line-height: 38.4px;
                        text-align: left;   
                        margin-top: 260px;
                        background-image: linear-gradient(to right, #ffffff 30px, transparent 30px); /* 下線の長さを指定 */
                        background-position: bottom left;
                        background-repeat: no-repeat;
                        background-size: 30px 1px;
                        padding-bottom: 20px;
                        margin-bottom: 20px;
                        @media screen and (max-width: 1240px){
                            margin-top: 160px;
                        }
                        @media screen and (max-width: 1024px){
                            margin-top: 60px;
                        }
                        @media screen and (max-width: 768px){
                            margin: auto 0 0 0;
                        }
                        @media screen and (max-width: 480px){
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 25.6px;
                        }
                    }
                    .description{
                        font-size: 14px;
                        font-weight: 200;
                        line-height: 28px;
                        text-align: left;
                        @media screen and (max-width: 480px){
                            font-size: 15px;
                            font-weight: 500;
                            line-height: 24px;
                        }
                    }
                    .btn_icon{
                        background-color: #fff;
                        right: 44px;
                        bottom: 44px;
                        @media screen and (max-width: 1024px){
                            right: 20px;
                            bottom: 20px;
                        }
                        .arrow{
                            span{
                                background-color: #0d2f62;
                            }
                        }
                    }
                }
                .company{
                    background: linear-gradient(180deg, rgba(13, 47, 98, 0) 0%, rgba(13, 47, 98, 0.6) 100%) ,url(../img/company.jpg) no-repeat bottom center;
                    background-size: 210%;
                    height: 100%;
                    background-position: center center;
                    width: 581px;
                    height: 550px;
                    transition: background-size .5s ease, background-position .5s ease;
                    @media screen and (max-width: 1240px){
                        max-width: 470px;
                        height: 445px;
                    }
                    @media screen and (max-width: 1024px){
                        max-width: 370px;
                        height: 364px;
                    }
                    @media screen and (max-width: 768px){
                        max-width: 100%;
                        aspect-ratio: 315 / 298;
                        height: auto;
                    }
                }
                .individual{
                    background: linear-gradient(180deg, rgba(13, 47, 98, 0) 0%, rgba(13, 47, 98, 0.6) 100%) ,url(../img/individual.jpg) no-repeat bottom center;
                    background-size: 150%;
                    height: 100%;
                    background-position: center center;
                    width: 581px;
                    height: 550px;
                    transition: background-size .5s ease, background-position .5s ease;
                    @media screen and (max-width: 1240px){
                        max-width: 470px;
                        height: 445px;
                    }
                    @media screen and (max-width: 1024px){
                        max-width: 370px;
                        height: 364px;
                    }
                    @media screen and (max-width: 768px){
                        max-width: 100%;
                        aspect-ratio: 315 / 298;
                        height: auto;
                        margin-top: 40px;
                    }
                }
                .company:hover{
                    background-size: 220%; /* 背景画像をズーム */
                    background-position: center center;
                }
                .individual:hover {
                    background-size: 160%; /* 背景画像をズーム */
                    background-position: center center;
                }
            }
        }
    }
}



/**/
.strengths{
    margin-top: 120px;
    padding: 0 24px;
    @media screen and (max-width: 1240px){
        padding: 0 40px;
    }
    @media screen and (max-width: 1024px){
        padding: 0 12px;
    }
    @media screen and (max-width: 768px){
        margin-top: 80px;
        padding: 0;
    }
    .container{
        .text_home{
            .ttl{
                font-family: 'manrope' ,sans-serif;
                font-size: 24px;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.04em;
                text-align: left;
                color: #617FA9;
                margin-bottom: 20px;
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    line-height: 16px;
                }
                @media screen and (max-width: 480px){
                    font-size: 16px;
                }
            }
            .heading{
                font-size: 32px;
                font-weight: 600;
                letter-spacing: 0.05em;
                color: #0d2f62;
                margin-bottom: 52px;
                @media screen and (max-width: 1240px){
                    margin-bottom: 32px;
                }
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 20px;
                    margin-bottom: 40px;
                }
            }
            .contents{
                display: flex;
                justify-content: space-between;
                @media screen and (max-width: 768px){
                    display: block;
                }
                .box{
                    display: flex;
                    width: 360px;
                    @media screen and (max-width: 1240px){
                        width: 292px;
                    }
                    @media screen and (max-width: 1024px){
                        width: 230px;
                    }
                    @media screen and (max-width: 768px){
                        width: 100%;
                    }
                    .toc{
                        color: #0d2f62;
                        .number{
                            font-family: 'manrope' ,sans-serif;
                            font-size: 48px;
                            font-weight: 800;
                            line-height: 48px;
                            letter-spacing: 0.04em;
                            @media screen and (max-width: 1024px){
                                font-size: 40px;
                            }
                            @media screen and (max-width: 768px){
                                font-size: 48px;
                            }
                            @media screen and (max-width: 480px){
                                margin-right: 28px;
                            }
                        }
                        @media screen and (max-width: 480px){
                            display: none;
                            align-items: end;
                            margin-bottom: 28px;
                        }
                        .division{
                            color: #0d2f62;
                            writing-mode: vertical-rl;
                            text-orientation: upright;
                            font-size: 15px;
                            font-weight: 700;
                            line-height: 24px;
                            letter-spacing: 0.2em;
                            margin: 24px auto 0;
                            @media screen and (max-width: 1024px){
                                font-size: 14px;
                            }
                            @media screen and (max-width: 768px){
                                font-size: 15px;
                            }
                            @media screen and (max-width: 480px){
                                writing-mode: horizontal-tb;
                                margin-top: 0;
                                font-size: 16px;
                                line-height: 19.2px;
                                margin: 0 auto 0 0;
                            }
                            span{
                                font-size: 20px;
                                font-weight: 700;
                                line-height: 24px;
                                @media screen and (max-width: 1024px){
                                    font-size: 18px;
                                }
                                @media screen and (max-width: 480px){
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                    .main{
                        width: 295px;
                        @media screen and (max-width: 768px){
                            margin: 0 auto;
                            width: 80%;
                        }
                        @media screen and (max-width: 480px){
                            width: 100%;
                        }
                        .frame{
                            width: 205px;
                            aspect-ratio: 1;
                            border-radius: 50%;
                            border: 2px solid #617fa9;
                            margin: 0 auto 24px;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            @media screen and (max-width: 1024px){
                                width: 140px;
                            }
                            @media screen and (max-width: 768px){
                                width: 205px;
                            }
                            .icon{
                                margin: 0 auto;
                                @media screen and (max-width: 1024px){
                                    height: 40%;
                                }
                                @media screen and (max-width: 768px){
                                    height: auto;
                                }
                            }
                        }
                        .toc{
                            display: none;
                            @media screen and (max-width: 480px){
                                display: flex;
                            }
                        }
                        .description{
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 25.2px;
                            color: #333333;
                            @media screen and (max-width: 768px){
                                font-size: 16px;
                                line-height: 28.8px;
                            }
                        }
                    }
                }
                .second{
                    border-left: 1px solid #E1EAEF;
                    border-right: 1px solid #E1EAEF;
                    padding: 0 28px;
                    width: 416px;
                    @media screen and (max-width: 1240px){
                        width: 348px;
                    }
                    @media screen and (max-width: 1024px){
                        width: 275px;
                        padding: 0 22.5px;
                        .main{
                            .frame{
                                .icon{
                                    height: 32%;
                                }
                            }
                        }
                    }
                    @media screen and (max-width: 768px){
                        border-left: none;
                        border-right: none;
                        border-top: 1px solid #E1EAEF;
                        border-bottom: 1px solid #E1EAEF;
                        width: auto;
                        padding: 36px 0;
                        margin: 42px 0;
                    }
                }
            }
        }
    }
}



/**/
.office{
    margin-top: 128px;
    background-image: linear-gradient(to left, #E9EFF3 52%, #fff 52%);
    padding: 96px 24px 80px;
    @media screen and (max-width: 1240px){
        background-image: linear-gradient(to left, #E9EFF3 45%, #fff 45%);
    }
    @media screen and (max-width: 1024px){
        background-image: linear-gradient(to left, #E9EFF3 50%, #fff 50%);
    }
    @media screen and (max-width: 768px){
        background-image: none;
        background-color: #E9EFF3;
        padding: 80px 0px 78px;
    }
    .container{
        display: flex;
        @media screen and (max-width: 768px){
            display: block;
        }
        .text_home{
            align-self: flex-start;
            .ttl{
                font-family: 'manrope' ,sans-serif;
                font-size: 24px;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.04em;
                text-align: left;
                color: #617FA9;
                margin-bottom: 20px;
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    line-height: 16px;
                }
                @media screen and (max-width: 480px){
                    font-size: 16px;
                }
            }
            .heading{
                font-size: 32px;
                font-weight: 600;
                letter-spacing: 0.05em;
                color: #333333;
                margin-bottom: 52px;
                word-break: keep-all;
                @media screen and (max-width: 1240px){
                    margin-bottom: 32px;
                }
                @media screen and (max-width: 768px){
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 20px;
                    margin-bottom: 60px;
                }
            }
        }
        .contents{
            margin-left: 192px;
            @media screen and (max-width: 1240px){
                margin-left: 160px;
            }
            @media screen and (max-width: 1024px){
                margin-left: 40px;
            }
            @media screen and (max-width: 768px){
                margin: 0;
            }
            table{
                td{
                    vertical-align: top;
                }
                @media screen and (max-width: 1024px){
                    td{
                        white-space: nowrap;
                    }
                }
                @media screen and (max-width: 768px){
                    td{
                        display: block;
                        white-space: nowrap;
                        word-break: keep-all;
                    }
                }
                .title{
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 26px;
                    text-align: left;
                    color: #0d2f62;
                    background-image: linear-gradient(to right, #0d2f62 30px, transparent 30px); /* 下線の長さを指定 */
                    background-position: bottom left;
                    background-repeat: no-repeat;
                    background-size: 30px 1px;
                    padding: 16px 0;
                    width: 164px;
                    @media screen and (max-width: 1024px){
                        width: 140px;
                    }
                    @media screen and (max-width: 768px){
                        background-image: none;
                        padding: 30px 0 8px;
                    }
                }
                .fifth{
                    background-image: none;
                }
                .element{
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 26px;
                    text-align: left;
                    color: #000;
                    padding: 16px 0;
                    @media screen and (max-width: 768px){
                        background-image: linear-gradient(to right, #0d2f62 30px, transparent 30px);
                        background-position: bottom left;
                        background-repeat: no-repeat;
                        background-size: 30px 1px;
                        padding: 0 0 30px;
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 28.8px;
                        span{
                            font-size: 15px;
                            font-weight: 500;
                            line-height: 27px;
                        }
                    }
                    @media screen and (width > 768px){
                        .media{
                            display: none;
                        }
                    }
                }
                .first{
                    padding-top: 0;
                }
            }
            .btn {
                position: relative;
                --btn-height: 64px;
                height: var(--btn-height);
                width: 267px;
                margin-top: 80px;
                display: flex;
                color: #0d2f62; /* 元の #ffffff から #0d2f62 に変更 */
                text-decoration: none;
                text-align: center;
                align-items: center;
                justify-content: center;
                border-radius: calc(var(--btn-height) / 2);
                overflow: hidden; /* 擬似要素がはみ出さないように */
                transition: color 0.3s ease;
                border: 1px solid #0d2f62;
                @media screen and (max-width: 768px) {
                    margin-top: 40px;
                }
            
                .btn_text {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 16px;
                    letter-spacing: 0.04em;
                    text-align: left;
                    align-self: center;
                    z-index: 1; /* 擬似要素の下に配置 */
                    text-indent: -16px;
                    transition: color 0.3s ease;
                }
            
                .btn_icon {
                    background-color: #0d2f62; /* 元の #ffffff から #0d2f62 に変更 */
                    z-index: 1; /* 擬似要素の下に配置 */
            
                    .arrow {
                        span {
                            background-color: #ffffff; /* 元の #0d2f62 から #ffffff に変更 */
                            transition: background-color 0.3s ease;
                        }
                    }
                }
            
                /* 擬似要素を使用して左から右に背景色を変更するアニメーション */
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -100%; /* 初期状態では左端に配置 */
                    width: 100%;
                    height: 100%;
                    background-color: #0d2f62; /* 元の #ffffff から #0d2f62 に変更 */
                    transition: transform 0.5s ease; /* 左から右へのアニメーション */
                    z-index: 0; /* テキストの背面に配置 */
                }
            
                &:hover::before {
                    transform: translateX(100%); /* ホバー時に擬似要素を右に移動 */
                }
            
                &:hover {
                    color: #ffffff; /* 元の #0d2f62 から #ffffff に変更 */
                }
            
                &:hover .btn_text {
                    color: #ffffff; /* テキスト色を反転 */
                }
            
                &:hover .btn_icon {
                    background-color: #ffffff; /* アイコン背景色を反転 */
            
                    .arrow span {
                        background-color: #0d2f62; /* 矢印の色を元の #ffffff から #0d2f62 に変更 */
                    }
                }
            }
        }
    }
}



/**/
footer{
    margin: 52px 0 0;
    padding: 0 24px 16px;
    @media screen and (max-width: 768px){
        padding: 0 0px 24px;
    }
    .container{
        .footer{
            width: 251px;
            .forhome{
                width: 251px;
                .logo{
                    width: auto;
                    height: 41px;
                    margin-bottom: 40px;
                    @media screen and (max-width: 768px){
                        margin-bottom: 24px;
                        height: auto;
                        width: 242px;
                    }
                }
            }
        }
        .nav_footer{
            padding-bottom: 36px;
            border-bottom: 1px solid #E1EAEF;
            @media screen and (max-width: 768px){
                display: none;
            }
            .gnavi{
                display: flex;
                gap: 28px;
                .nav_text{
                    text-decoration: none;
                    span{
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 21px;
                        text-align: left;
                        color: #0d2f62;
                    }
                }
            }
        }
        .block{
            display: flex;
            justify-content: flex-end;
            @media screen and (max-width: 768px){
                border-bottom: 1px solid #E1EAEF;
                padding-bottom: 8px;
                margin-bottom: 24px;
                justify-content: flex-start;
            }
            .policy{
                font-size: 12px;
                font-weight: 500;
                line-height: 18px;
                color: #000;
                text-decoration: none;
                display: inline-block;
                margin: 10px 0 24px;
                @media screen and (max-width: 768px){
                    font-size: 13px;
                    line-height: 13px;
                    margin: 0 0 0;
                    color: #999;
                }
            }
        }
        .copyright{
            font-family: Noto Sans JP ,sans-serif;
            font-size: 12px;
            font-weight: 400;
            line-height: 17.38px;
            color: #333333;
            text-align: center;
            @media screen and (max-width: 768px){
                font-size: 13px;
                line-height: 13px;
            }
        }
    }
}