.fv{
    position: relative;
    .catchcopy-area{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 5vw;
        margin-top: auto;
        margin-bottom: auto;
        width: fit-content;
        height: fit-content;
        background-color: rgba(255,255,255,0.3);
        padding: clamp(3px,1vw,5px) clamp(20px,5vw,50px);
        padding-bottom: clamp(10px,2vw,20px);
        padding-right: clamp(20px,8vw,80px);
        border-radius: clamp(3px,0.5vw,5px);
        .catchcopy-image{
            margin-bottom: 2vw;
        }
        .title{
            font-size: 32px;
            font-size: clamp(32px, 3vw, 45px);
            min-height: 0vw;
            font-weight: 900;
            color: var(--primary-color);
            line-height: 1.2;
            margin-bottom: 0;
        }
        .description{
            font-size: 14px;
            font-size: clamp(14px, 1.8vw, 18px);
            min-height: 0vw;
            font-weight: 900;
        }
    }
    @media screen and (max-width:768px) { 
        .catchcopy-area{
            width: 44vw;
        }
    }
    @media screen and (max-width:480px) { 
        .catchcopy-area{
            width: 60vw;
        }
        .privacy_policy-catchcopu-area{
            width: 86vw;
        }
    }
    .video-area{
        height: 100%;
        video{
            object-fit: cover;
            aspect-ratio: 8 / 2;
        }
        @media screen and (max-width:864px) { 
            video{
                object-fit: cover;
                aspect-ratio: 6 / 2;
            }
        }
        @media screen and (max-width:480px) { 
            video{
                object-fit: cover;
                aspect-ratio: 4 / 2;
            }
        }
    }
    .right-bottom-icon{
        position: absolute;
        bottom: 1vw;
        right: 1vw;
        width: clamp(50px,10vw,100px);
    }
}
main{
    background-color: rgb(248, 242, 222);
}
.base-section{
    .container{
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding: clamp(24px,6vw, 60px) clamp(24px,2vw, 36px);
    }
    @media screen and (max-width:600px) {
        .container{
            padding: 0;
        }
    }
    .items{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(2em,5vw, 3em);
    }
    @media screen and (max-width:864px) {
        .items{
            flex-direction: column;
        }
        .item{
            width: 100%;
        }  
    }
    @media screen and (max-width:480px) { 
        .item{
            width: 100%;
        }  
    }
    .sub-item{
        margin-bottom: clamp(24px,3.6vw,36px);
    }  
    .contents{
        background-color: var(--base-white-color);
        padding: clamp(1em,4vw,3em);
        border-radius: 2em;
    }
    @media screen and (max-width:600px) { 
        .contents{
            border-radius: 0;
        } 
    }
    .category{
        font-size: 16x;
        font-size: clamp(16px, 2vw, 20px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        &::before{
            content:"";
            width: clamp(10.2px,2vw,20.4px);
            height: clamp(6.75px,1.25vw,12.5px);
            display: inline-block;
            background-image: url(../images/icon/logo-icon-green.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: clamp(8px,1vw,16px);
        }
    }
    .title{
        font-size: 30px;
        font-size: clamp(30px, 4vw, 60px);
        min-height: 0vw;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.2em;
        padding-bottom: clamp(12px, 1.8vw, 18px);
        margin-bottom: clamp(12px, 1.8vw, 18px);
        color: var(--primary-color);
        border-bottom:2px dashed var(--primary-color);
    }
    @media screen and (max-width:864px) {
        .title{
            font-size: clamp(30px, 6vw, 60px);
        } 
    }
    .sub-title{
        font-size: clamp(20px, 2.4vw, 26px);
        color: var(--primary-color);
    }
    .description{
        font-size: 14px;
        font-size: clamp(14px, 1.6vw, 16px);
        min-height: 0vw;
        margin-bottom: clamp(14px, 2.8vw, 28px);
    }
    
}
.message{
    .sign-area{
        display: flex;
        justify-content: flex-end;
    }
    .sign{
        p{
            font-weight: 800;
        }
    }
}
@media screen and (max-width:600px) { 

}
.ad-scroll-01 {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ad-scroll-01 .items {
    display: flex;
    gap: clamp(1em, 8vw, 4em);
    width: max-content; /* 要素の幅をコンテンツに合わせる */
    animation: scrollAnimation 75s linear infinite; /* 無限スクロールアニメーション */
}

/* スクロールアニメーション */
@keyframes scrollAnimation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* アイテムのスタイル */
.ad-scroll-01 .item {
    flex-shrink: 0; /* アイテムのサイズを維持 */
    width: auto;
    h2{
        font-size: clamp(30px,10vw,130px);
        color: rgb(215, 237, 178);
    }
}

.ad-scroll-01 .item img {
    height: 100%;
    border-radius: clamp(10px,2vw,20px);
}

.ad-scroll-01 .title {
    color: var(--primary-color);
    text-align: center;
}

.service{
    background-color: var(--primary-color);
        background-image: url(../images/background/download-1.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transition: 0.3s;
        padding: clamp(2em,6vw,6em);
        .container{
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
        }
        .category{
            font-size: 16x;
            font-size: clamp(16px, 2vw, 20px);
            min-height: 0vw;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: var(--base-white-color);
            &::before{
                content:"";
                width: clamp(10.2px,2vw,20.4px);
                height: clamp(6.75px,1.25vw,12.5px);
                display: inline-block;
                background-image: url(../images/icon/logo-icon.svg);
                background-repeat: no-repeat;
                background-size: contain;
                margin-right: clamp(8px,1vw,16px);
            }
        }
        .title{
            font-size: 22px;
            font-size: clamp(22px, 3.2vw, 32px);
            min-height: 0vw;
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: 0.2em;
            margin-bottom: clamp(24px, 3.6vw, 36px);
            color: var(--base-white-color);
        }
    .items{
        display: flex;
        justify-content: center;
        gap: clamp(16px,3vw,32px);
    }
    .item{
        display: flex;
        flex-direction: column;
        background-color: var(--base-white-color);
        padding: clamp(1em,3vw,1.5em);
        width: calc(100% / 3);
        border-radius: clamp(16px,3vw,32px);
        position: relative;
    }
    @media screen and (max-width:864px) {
        .items{
            flex-direction: column;
        }
        .item{
            width: 100%;
        }  
    }
    .image-area{
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        img{
            height: 100%;
            width: fit-content;
        }
    }
    .appear{
        font-size: 18px;
        font-size: clamp(18px, 2.4vw, 24px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        color: var(--primary-color);
    }
    .item-title{
        font-size: 16px;
        font-size: clamp(16px, 2vw, 20px);
        min-height: 0vw;
        font-weight: 400;
        letter-spacing: 0.2em;
    }
    .content{
        font-size: 14px;
        font-size: clamp(14px, 1.6vw, 16px);
        min-height: 0vw;
        font-weight: 400;
        line-height: 2.4;
        margin-bottom: clamp(3em,10vw,6em);
    }
    .button-area{
        position: absolute;
        right: 1em;
        bottom: 2em;
        .button{
            font-size: 12px;
            font-size: clamp(12px, 1.4vw, 14px);
            min-height: 0vw;
            font-weight: 900;
            letter-spacing: 0.2em;
            color: var(--primary-color);
            text-decoration: none;
            padding: 0.5em;
            border-bottom: 2px solid var(--primary-color);
        }
    }
}
/* ad-02 */
.ad-scroll-02 {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ad-scroll-02 .items {
    display: flex;
    gap: clamp(1em, 8vw, 4em);
    width: max-content; /* 要素の幅をコンテンツに合わせる */
    animation: scrollAnimation-02 75s linear infinite; /* 無限スクロールアニメーション */
}

/* スクロールアニメーション */
@keyframes scrollAnimation-02 {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* アイテムのスタイル */
.ad-scroll-02 .item {
    flex-shrink: 0; /* アイテムのサイズを維持 */
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
        font-size: clamp(30px, 10vw, 130px);
        color: rgb(215, 237, 178);
    }
}

.ad-scroll-02 .item img {
    height: 100%;
    border-radius: clamp(10px,2vw,20px);
}

.ad-scroll-02 .title {
    color: var(--primary-color);
    text-align: center;
}
/* ad-03 */
.ad-scroll-03 {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ad-scroll-03 .items {
    display: flex;
    gap: clamp(1em, 8vw, 4em);
    width: max-content; /* 要素の幅をコンテンツに合わせる */
    animation: scrollAnimation-03 75s linear infinite; /* 無限スクロールアニメーション */
}

/* スクロールアニメーション */
@keyframes scrollAnimation-03 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* アイテムのスタイル */
.ad-scroll-03 .item {
    flex-shrink: 0; /* アイテムのサイズを維持 */
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2 {
        font-size: clamp(30px, 10vw, 130px);
        color: rgb(215, 237, 178);
    }
}

.ad-scroll-03 .item img {
    height: 100%;
    border-radius: clamp(10px,2vw,20px);
}

.ad-scroll-03 .title {
    color: var(--primary-color);
    text-align: center;
}
/*company*/
.company{
    padding: clamp(1em,3vw, 2em) clamp(1em,3vw, 2em);
    .container{
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding: clamp(1em,8vw, 6em) clamp(1em,8vw, 2em);
        background-color: var(--primary-color);
        color: var(--base-white-color);
        border-radius: clamp(1em,3vw,2em);
    }
    .items{
        display: flex;
        justify-content: center;
        gap: clamp(2em,5vw, 3em);
    }
    .item{
        width: 50vw;
    }
    @media screen and (max-width:864px) {
        .items{
            flex-direction: column;
        }
        .item{
            width: 100%;
        }  
    }
    @media screen and (max-width:480px) { 
        .item{
            width: 100%;
        }  
    }
    .contents{
        background-color: var(--primary-color);
        padding: clamp(1em,4vw,3em);
        color: var(--base-white-color);
        border-radius: 2em;
    }
    .category{
        font-size: 16x;
        font-size: clamp(16px, 2vw, 20px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        &::before{
            content:"";
            width: clamp(10.2px,2vw,20.4px);
            height: clamp(6.75px,1.25vw,12.5px);
            display: inline-block;
            background-image: url(../images/icon/logo-icon.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: clamp(8px,1vw,16px);
        }
    }
    .title{
        font-size: 22px;
        font-size: clamp(22px, 3.2vw, 32px);
        min-height: 0vw;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.2em;
        margin-bottom: clamp(24px, 3.6vw, 36px);
    }
    .description{
        font-size: 14px;
        font-size: clamp(12px, 1.4vw, 14px);
        min-height: 0vw;
        font-weight: 700;
        margin-bottom: clamp(14px, 2.8vw, 28px);
    }
    .button{
        color: var(--base-white-color);
        text-decoration: none;
        font-size: 22px;
        font-size: clamp(22px, 3.2vw, 32px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        .button-icon{
            display: inline-block;
            width: clamp(22px, 3.6vw, 36px);
            margin-left: clamp(22px, 3.2vw, 32px);
            img{
                width: 100%;
            }
        }
    }
    .button:hover{
        opacity: 0.8;
    }
    .images {
        .item-items {
            display: flex;
            gap: 2em;
            max-width: calc(500px + 2em);
            margin-bottom: 2em;
            .item-item {
                    width: clamp(200px, 25vw,250px);
                    height: clamp(200px, 25vw,250px);
                img {
                    border-radius: 1em;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
            @media screen and (max-width:864px) { 
                .item-item {
                    width: clamp(200px, 35vw,250px);
                    height: clamp(200px, 35vw,250px);
                }
            }
            @media screen and (max-width:480px) { 
                .item-item {
                    width: clamp(100px, 40vw,250px);
                    height: clamp(100px, 40vw,250px);
                }
            }
        }
    }
    
}
/*company*/
.company-address{
    padding: clamp(1em,3vw, 2em) clamp(1em,3vw, 2em);
    .container{
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .items{
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: clamp(2em,5vw, 3em);
    }
    .item{
        width:100%;
        position: relative;
    }
    .item{
        background-color: var(--base-white-color);
        border: 3px solid var(--primary-color);
        color: var(--primary-color);
        border-radius: 2em;
        .contents-bg{
            height: 100%;
            padding: clamp(1em,4vw,3em);
            padding-bottom:clamp(2em,6vw,5em) ;
        }
        @media screen and (max-width:864px) { 
            .contents-bg{
                padding-bottom:clamp(6em,25vw,300px) ;
            }
        }
        .contents-area{
            margin-bottom: clamp(30px,5vw,50px);
        }
        dl{
            display: flex;
            gap: clamp(10px,2vw,20px);
            border-bottom: clamp(1px,0.3vw,3px) solid var(--primary-color);
            padding: clamp(20px,3vw,30px) clamp(5px,1vw,10px);
            dt{
                font-size: clamp(14px,1.6vw,16px);
                font-weight: 600;
                width: clamp(80px,10vw,150px);
                margin-bottom: 0;
            }
            dd{
                margin-bottom: 0;
                font-weight: 600;
            }
        }
        @media screen and (max-width:600px) { 
            dl{
                flex-direction: column;
                gap: clamp(10px,2vw,20px);
                dt{
                    font-size: clamp(14px,1.6vw,16px);
                    font-weight: 600;
                    width: clamp(80px,10vw,150px);
                }
            }
        }
        .map-area{
            iframe{
                width: 100%;
                height: clamp(100px,30vw,300px);
            }
        }
        .sub-item-02{
            img{
                border-radius: clamp(10px,2vw,20px);
                object-fit: cover;
                aspect-ratio: 5 / 2;
            }
        } 
    }
    .category{
        font-size: 16x;
        font-size: clamp(16px, 2vw, 20px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        &::before{
            content:"";
            width: clamp(10.2px,2vw,20.4px);
            height: clamp(6.75px,1.25vw,12.5px);
            display: inline-block;
            background-image: url(../images/icon/logo-icon.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: clamp(8px,1vw,16px);
        }
    }
    .item-02 .category{
        &::before{
            background-image: url(../images/icon/logo-icon-green.svg);
        }
    }
    .title{
        font-size: 18px;
        font-size: clamp(18px, 2.4vw, 32px);
        min-height: 0vw;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.2em;
        margin-bottom: clamp(12px,1.8vw, 18px);
    }
    @media screen and (max-width:864px) { 
        .title{
            font-size: 22px;
            font-size: clamp(22px, 3.2vw, 32px);
        }
    }
    .description{
        font-size: 14px;
        font-size: clamp(12px, 1.4vw, 14px);
        min-height: 0vw;
        font-weight: 700;
        margin-bottom: clamp(8px, 1vw, 12px);
    }
    .button{
        display: inline-block;
        position: absolute;
        top: clamp(20px,3vw,30px);
        right: clamp(20px,3vw,30px);
        .button-icon{
            display: inline-block;
            width: clamp(30px, 4vw,40px);
            img{
                width: 100%;
            }
        }
    }
    .button:hover{
        opacity: 0.8;
    }
    .images {
        .item-items {
            display: grid;
            grid-template-columns: 1fr; /* 上段1列、下段2列 */
            grid-template-rows: auto; /* 高さは自動調整 */
    
            .item-item {
                img {
                    border-radius: 1em;
                    width: 100%;
                    height: auto;
                }
            }
    
            /* 最初の画像を1列目全幅で表示 */
            .item-item:first-child {
                
            }
        }
    }
    
}
/*company*/
.other-service{
    padding: clamp(1em,3vw, 2em) clamp(1em,3vw, 2em);
    .container{
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    .items{
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: clamp(2em,5vw, 3em);
    }
    .item{
        width: 50vw;
        position: relative;
    }
    @media screen and (max-width:864px) {
        .items{
            flex-direction: column;
        }
        .item{
            width: 100%;
        }  
    }
    @media screen and (max-width:480px) { 
        .item{
            width: 100%;
        }  
    }
    .item-01{
        background-color: var(--primary-color);
        background: linear-gradient(130deg, rgb(240, 129, 2) 30%, rgb(240, 129, 2)100%);
        color: var(--base-white-color);
        border-radius: 2em;
        .contents-bg{
            height: 100%;
            padding: clamp(1em,4vw,3em);
            padding-bottom:clamp(2em,6vw,5em) ;
            background-image: url(../images/illust/town-sp-bg.svg);
            background-repeat: no-repeat;
            background-position: center bottom 1em;
            background-size: contain;
        }
        a{
            text-decoration: none;
            color: var(--base-white-color);
        }
        @media screen and (max-width:864px) { 
            .contents-bg{
                padding-bottom:clamp(6em,25vw,300px) ;
            }
        }
    }
    .item-02{
        background-color: var(--base-white-color);
        border: 3px solid var(--primary-color);
        color: var(--primary-color);
        border-radius: 2em;
        .contents-bg{
            height: 100%;
            padding: clamp(1em,4vw,3em);
            padding-bottom:clamp(2em,6vw,5em) ;
        }
        a{
            text-decoration: none;
            color: var(--primary-color);
        }
        @media screen and (max-width:864px) { 
            .contents-bg{
                padding-bottom:clamp(6em,25vw,300px) ;
            }
        }
        .sub-item-02{
            img{
                border-radius: clamp(10px,2vw,20px);
                object-fit: cover;
                aspect-ratio: 5 / 2;
            }
        } 
    }
    .category{
        font-size: 16x;
        font-size: clamp(16px, 2vw, 20px);
        min-height: 0vw;
        font-weight: 700;
        letter-spacing: 0.2em;
        &::before{
            content:"";
            width: clamp(10.2px,2vw,20.4px);
            height: clamp(6.75px,1.25vw,12.5px);
            display: inline-block;
            background-image: url(../images/icon/logo-icon.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: clamp(8px,1vw,16px);
        }
    }
    .item-02 .category{
        &::before{
            background-image: url(../images/icon/logo-icon-green.svg);
        }
    }
    .title{
        font-size: 18px;
        font-size: clamp(18px, 2.4vw, 32px);
        min-height: 0vw;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.2em;
        margin-bottom: clamp(12px,1.8vw, 18px);
    }
    @media screen and (max-width:864px) { 
        .title{
            font-size: 22px;
            font-size: clamp(22px, 3.2vw, 32px);
        }
    }
    .description{
        font-size: 14px;
        font-size: clamp(12px, 1.4vw, 14px);
        min-height: 0vw;
        font-weight: 700;
        margin-bottom: clamp(8px, 1vw, 12px);
    }
    .button{
        display: inline-block;
        position: absolute;
        top: clamp(20px,3vw,30px);
        right: clamp(20px,3vw,30px);
        .button-icon{
            display: inline-block;
            width: clamp(30px, 4vw,40px);
            img{
                width: 100%;
            }
        }
    }
    .button:hover{
        opacity: 0.8;
    }
    .images {
        .item-items {
            display: grid;
            grid-template-columns: 1fr; /* 上段1列、下段2列 */
            grid-template-rows: auto; /* 高さは自動調整 */
    
            .item-item {
                img {
                    border-radius: 1em;
                    width: 100%;
                    height: auto;
                }
            }
    
            /* 最初の画像を1列目全幅で表示 */
            .item-item:first-child {
                
            }
        }
    }
    
}












.information{
    position: relative;
    .title{
        font-size: 32px;
        font-size: clamp(32px, 5.625vw, 45px);
        min-height: 0vw;
        font-weight: 900;
    }
    .video-area{
        height: 100%;
        video{
            object-fit: cover;
            aspect-ratio: 16 / 9;
        }
        @media screen and (max-width:768px) { 
            video{
                object-fit: cover;
                aspect-ratio: 4 / 3;
            }
        }
        @media screen and (max-width:480px) { 
            video{
                object-fit: cover;
                aspect-ratio: 3 / 4;
            }
        }
    }
    .contents-area{
        position: absolute;
        top: 5vw;
        right: 0;
        bottom: 5vw;
        left: 0;
        margin: auto;
        width: 80vw;
        height: fit-content;
        background-color: var(--base-white-color);
        padding: clamp(1em,3.6vw,3em);
        border-radius: 2vw;
        .lists{
            max-height: clamp(200px,30vw,350px);
            overflow: scroll;
            padding-left: 0;
            list-style-type: none;
        }
        .list{
            a{
                text-decoration: none;
            }
        }
    }
    .list-content{
        display: flex;
        column-gap: clamp(1em,3vw,2em);
        .date-area{
            display: flex;
            flex-wrap: nowrap;
            column-gap: clamp(1em,3vw,2em);
        }
    }
    @media screen and (max-width:768px) { 
        .list-content{
            flex-direction: column;
        }
    }
}
.ad{
    padding-top: 2em;
    padding-bottom: 2em;
    .title-area{
        text-align: center;
        padding-top: clamp(1em,36px,2em);
        padding-bottom: clamp(1em,36px,2em);
        .title{
            font-size: 32px;
            font-size: clamp(32px, 5.625vw, 45px);
            min-height: 0vw;
            font-weight: 900;
            line-height: 1.1;
            margin: 0;
        }
        .description{
            line-height: 1.1;
            margin: 0;
        }
    }
}