body{
    background-color: #efefef;
}
.fv{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .fv-swiper {
        width: 100%;
      }
      
      .fv-swiper .swiper-slide {
        text-align: center;
        transition-timing-function: ease-in-out !important;
      }
      .fv-swiper,
        .fv-swiper .swiper-slide {
        backface-visibility: hidden;
        will-change: transform, opacity;
        transform: translateZ(0); /* 強制的にGPUレンダリング */
        }
        @media (max-width: 767px) {
            .fv-swiper {
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;
            }
        }
        .fv-swiper .swiper-slide {
            transform: scale(0.95);
            transition: transform 0.6s ease;
          }
          .fv-swiper .swiper-slide-active {
            transform: scale(1);
          }
      .fv-swiper .slide-bg{
        border-radius: clamp(10px,2vw,20px);
        box-shadow: rgba(0, 0, 0, 0.05) 8px 8px 16px;
      }
      .fv-swiper .slide-bg-01 {
        animation: bgColorChange01 10s linear infinite;
      }
      .fv-swiper .slide-bg-02 {
        animation: bgColorChange02 10s linear infinite;
      }
      
      .fv-swiper .slide-bg-03 {
        animation: bgColorChange03 10s linear infinite;
      }
      .fv-swiper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: clamp(10px,2vw,20px);
        box-shadow: rgba(0, 0, 0, 0.05) 8px 8px 16px;
      }
      /* 初期状態は透明・下にずれてる */
       /* 初期スタイルは不要。アニメだけ適用 */
    @keyframes fadeUp {
        0% {
        opacity: 0;
        transform: translateY(20px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    
    .fade-up-img {
        animation: fadeUp 0.8s ease forwards;
    }
    .layer-items{
        position: absolute;
        bottom: clamp(10px,2vw,30px);
        left: clamp(10px,2vw,30px);
        z-index: 99;
        color: var(--base-white-color);

        .title{
            font-size: clamp(40px,6vw,78px);
            text-shadow: 1px 2px 7px rgba(255, 20, 145, 0.805);
        }
    }
}
@keyframes bgColorChange01 {
    0%   { background-color: rgb(255, 85, 152); }
    50%  { background-color: rgb(255, 0, 149); }
    100% { background-color: rgb(255, 85, 152); }
  }
@keyframes bgColorChange02 {
    0%   { background-color: rgb(21, 151, 252); }
    50%  { background-color: rgb(65, 83, 110); }
    100% { background-color: rgb(21, 151, 252); }
  }
  @keyframes bgColorChange03 {
    0%   { background-color: rgb(255, 164, 0); }
    50%  { background-color: rgb(83, 249, 105); }
    100% { background-color: rgb(255, 164, 0); }
  }
  @media screen and (min-width: 480px) {
  .swiper-slide {
    opacity: 0;
    transform: translateY(+50px);
    animation: slideFadeIn 2.2s ease-out forwards;
  }
  
  /* 遅延させて順番に表示 */
  .swiper-slide:nth-child(1) {
    animation-delay: 0.3s;
  }
  .swiper-slide:nth-child(2) {
    animation-delay: 0.6s;
  }
  .swiper-slide:nth-child(3) {
    animation-delay: 0.9s;
  }
  
  @keyframes slideFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.about-section{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(36px,5.5vw, 75px);
        padding-bottom: clamp(30px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-bottom: clamp(20px,5vw,45px);
        .title{
            font-size: clamp(20px,4vw,40px);
            color: var(--base-black-color);
            letter-spacing: clamp(2px,0.4vw,6px);
            line-height: 1.8;
            &::before{
                content:"STORY";
                display: block;
                font-size: clamp(12px,1.8vw,18px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 50%;
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        position: relative;
        z-index: 1; /* テキストが上に来るように */
        
        .contents-lists {
            list-style: none;
            padding: 0;
            margin: 0;
            max-width: var(--container-size);
          }
          
          .contents-list {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
          }
          
          .list-icon {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            min-width: 60px;
          }
          
          .list-icon .num {
            font-size: clamp(22px, 4vw, 40px);
            font-weight: bold;
            line-height: 1;
            font-style: italic;
            letter-spacing: clamp(2px,0.4vw,6px);
          }
          .list-icon .num-one{
            color: rgb(41, 175, 202);
          }
          .list-icon .num-two{
            color: gold;
          }
          .list-icon .num-three{
            color: rgb(190, 25, 72);
          }
          
          .list-icon .text {
            font-size: clamp(10px, 1.2vw, 12px);
            margin-top: 0.2rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: bold;
            opacity: 0.7;
            font-style: italic;
          }
          
          .contents-list p {
            font-size: clamp(16px, 2vw, 20px);
            line-height: 1.8;
            letter-spacing: clamp(1px,0.25vw,4px);
            margin-bottom: clamp(10px,2vw,200px);
          }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.reason-section-01{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(36px,5.5vw, 75px);
        padding-bottom: clamp(40px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        text-align: center;
        .title{
            font-size: clamp(20px,4.8vw,48px);
            color: var(--base-black-color);
            line-height: 1.8;
            &::before{
                content:"REASON";
                display: block;
                font-size: clamp(16px,2vw,22px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
            max-width: var(--container-medium-small-size);
            margin-left: auto;
            margin-right: auto;
        }
        .contents-list{
            background-color: white;
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
            padding-bottom: 20px;
            /* border-radius: clamp(1em,1.5vw, 2em); */
            margin: 0;
        }
        .contents-list-01{
            /* background-color: rgba(150, 202, 207, 0.8); */
            border: rgb(150,202,207) clamp(5px,1vw,10px) solid;
        }
        .contents-list-02{
            /* background-color: rgba(227, 224, 150, 0.8); */
            border: rgb(227,224,150) clamp(5px,1vw,10px) solid;
        }
        .contents-list-03{
            /* background-color: rgb(151,127,147); */
            border: rgb(151,127,147) clamp(5px,1vw,10px) solid;
        }
        .contents-list-04{
            /* background-color: rgb(214,214,214); */
            border: rgb(214,214,214) clamp(5px,1vw,10px) solid;
        }
        .contents-list-05{
            /* background-color: rgb(231,211,229); */
            border: rgb(231,211,229) clamp(5px,1vw,10px) solid;
        }
        .sub-flex-items{
            display: flex;
            gap: clamp(10px,2vw,20px);
        }
        .contents-list-02{
            .sub-flex-items{
                flex-direction: row-reverse;
            }  
        }
        .contents-list-04{
            .sub-flex-items{
                flex-direction: row-reverse;
            }  
        }
        .sub-flex-item{

        }
        .sub-flex-item-01{
            width: calc(35% - clamp(5px,1vw,10px));
        }
        .sub-flex-item-02{
            width: calc(65% - clamp(5px,1vw,10px));
        }
        .steps-area{
            text-align: right;
            .step-button{
                background-color: gold;
                padding: clamp(2.5px,1vw,10px);
                border-radius: clamp(2.5px,0.5vw,5px);
                display: inline-block;
                font-size: clamp(10px,1.6vw,16px);
                line-height: 1.1;
            }
        }
        .contents-list-01 {
            .steps-area{
                .step-button{
                    background-color: #4f5a8e;
                    color: white;
                }
            }
        }
        .contents-list-02 {
            .steps-area{
                text-align: left;
                .step-button{
                    background-color: rgb(116, 87, 87);
                    color: white;
                }
            }
        }
        .contents-list-03 {
            .steps-area{
                .step-button{
                    background-color: rgb(174,174,24);
                    color: white;
                }
            }
        }
        .contents-list-04 {
            .steps-area{
                text-align: left;
                .step-button{
                    background-color: rgb(1, 106, 122);
                    color: white;
                }
            }
        }
        .contents-list-05 {
            .steps-area{
                .step-button{
                    background-color: rgb(240, 26, 112);
                    color: white;
                }
            }
        }
        .sub-title-area{
            margin-top: clamp(5px,1vw,20px);
            .title{
                color: gold;
                font-size: 20px;
                font-size: clamp(14px,3vw,46px);
                letter-spacing: clamp(1px,0.3vw,3px);
                line-height: 1.3;
            }
        }
        .design-area{
            padding-top: clamp(10px,2vw,20px);
            p{
                color: gold;
            font-size: 12px;
            font-size: clamp(12px,2vw,22px);
            }
        }
        .contents-list-01 {
            .sub-title-area{
                .title{
                    color: #4f5a8e;
                }
            }
            .design-area{
                p{
                    color:#4f5a8e;
                }
            }
        }
        .contents-list-02 {
            .sub-title-area{
                .title{
                    color: rgb(116, 87, 87);

                }
            }
            .design-area{
                p{
                    color: rgb(116, 87, 87);
                }
            }
        }
        .contents-list-03 {
            .sub-title-area{
                .title{
                    color: rgb(174,174,24);
                }
            }
            .design-area{
                p{
                    color: rgb(174,174,24);
                }
            }
        }
        .contents-list-04 {
            .sub-title-area{
                .title{
                    color: rgb(1, 106, 122);
                }
            }
            .design-area{
                p{
                    color:rgb(1, 106, 122);
                }
            }
        }
        .contents-list-05 {
            .sub-title-area{
                .title{
                    color: rgb(240, 26, 112);
                }
            }
            .design-area{
                p{
                    color:rgb(240, 26, 112);
                }
            }
        }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    @media screen and (max-width:480px) { 
        .contents-area{
            padding:0;
            .content-list{
                padding:0;
            }
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.service-section{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            &::before{
                content:"SERVICE";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
        .button-area{
            .button{
                padding: clamp(10px,2vw,20px) clamp(10px,5vw,30px);
                padding-right: clamp(40px,9vw,90px);
                border-radius: 100px;
                border:1px solid var(--base-black-color);
                text-decoration: none;
                display: inline-block;
                position: relative;
                font-size: clamp(12px,1.9vw,19px);

                &::after{
                    content:"";
                    display: inline-block;
                    width: clamp(17.5px,2.5vw,25px);
                    height: clamp(17.5px,2.5vw,25px);
                    background-image: url(../../images/icon/arrow-circle-white-right.svg);
                    vertical-align:baseline;
                    position: absolute;
                    top: 50%;
                    right: clamp(20px, 3vw,30px);
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
            max-width: var(--container-medium-size);
            margin-left: auto;
            margin-right: auto;
        }
        .contents-list{
            background-color: rgb(75, 159, 172);
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
            padding-bottom: 20px;
            border-radius: clamp(1em,1.5vw, 2em);
            margin: 0;
        }
        .contents-list-01{
            background-color: rgb(134 186 194);
        }
        .sub-flex-items{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sub-flex-item{

        }
        .sub-flex-item-01{
            width: 100%;
        }
        .sub-flex-item-02{
            width: 100%;
        }
        .steps-area{
            text-align:left;
            .step-button{
                background-color: gold;
                padding: clamp(2.5px,1vw,10px);
                border-radius: clamp(2.5px,0.5vw,5px);
                display: inline-block;
                font-size: clamp(10px,1.6vw,16px);
                line-height: 1.1;
            }
        }
        .contents-list-01 {
            .steps-area{
                text-align: center;
                .step-button{
                    background-color: gold;
                    
                }
            }
        }
        .contents-list-02 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .contents-list-03 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .contents-list-04 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .sub-title-area{
            .title{
                color: var(--base-white-color);
                font-size: 16px;
                font-size: clamp(16px,4vw,50px);
            }
        }
        .contents-list-01 {
            .sub-title-area{
                .title{
                    text-align: center;
                    color: var(--base-white-color);
                }
            }
        }
        .contents-list-02 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .contents-list-03 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .contents-list-04 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .sub-image-area{
            margin-bottom: clamp(10px,2vw,20px);
        }
        .sub-contents-area{
            margin-bottom: clamp(10px,2vw,20px);
            p{
                color: var(--base-white-color);
                font-size: clamp(12px,1.6vw,16px);
            }
        }
        .sub-button-area{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    @media screen and (max-width:480px) { 
        .contents-area{
            padding:0;
            .content-list{
                padding:0;
            }
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.slider-section-01{
    background-color: var(--light-gray-color);
    padding-bottom: clamp(35px,8vw, 80px);
    .title-area{
        padding-left: var(--container-padding-left-right);
        padding-right: var(--container-padding-left-right);
        .sub-container{
            max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
            margin-right: auto;
            padding-top: clamp(15px ,2.5vw, 35px);
            padding-bottom: clamp(15px ,2.5vw, 35px);
            line-height: 1.1;
            text-align: center;
        }
        .title{
            font-size: clamp(40px,5vw,50px);
            color: #006eff;
            letter-spacing: clamp(2px,0.5vw,6px);
            line-height: 1.8;
            &::before{
                text-align: center;
                content:"Introduction";
                display: block;
                font-size: clamp(16px,1.8vw,18px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        .slide-image-area{
            width: 100%;
            border-radius: 50%;
            margin-bottom: clamp(0.25em,1vw,0.5em);
            img{
                border-radius: 50%;
            }
        }
        .slide-contents-area{
            .category{
                padding: clamp(1px,0.5vw,2px) clamp(10px,5vw,50px);
                background-color: var(--primary-color);
                border-radius: 100px;
                font-size: clamp(12px,1.5vw,15px);
                display: block;
                margin-bottom: clamp(2.5px,0.5vw,5px);
                width: fit-content;
                .category-link{
                    color: var(--base-white-color);
                    text-decoration: none;
                }
            }
            .categor-top-area{
                display: flex;
                gap: clamp(5px,1vw,10px);
            }
            .category-case{
                padding: clamp(1px,0.5vw,2px) clamp(5px,1vw,10px);
                background-color: transparent;
                border-radius: 0;
                font-size: clamp(12px,1.5vw,15px);
                display: block;
                width: fit-content;
                .category-link{
                    color: var(--base-black-color);
                    text-decoration: none;
                }
            }
            .category-sector{
                padding: clamp(1px,0.5vw,2px) clamp(5px,1vw,10px);
                background-color: transparent;
                border-radius: 0;
                font-size: clamp(12px,1.5vw,15px);
                display: block;
                width: fit-content;
                .category-link{
                    color: var(--base-black-color);
                    text-decoration: none;
                }
            }
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
    .sub-button-area{
        padding-left: var(--container-padding-left-right);
        padding-right: var(--container-padding-left-right);
        .sub-container{
            max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
            margin-right: auto;
            margin-left: auto;
            padding-top: clamp(15px ,2.5vw, 35px);
            padding-bottom: clamp(15px ,2.5vw, 35px);
            line-height: 1.1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .anime-button{
           
        }
    }
}
.company-section{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            &::before{
                content:"COMPANY";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
        .button-area{
            .button{
                padding: clamp(10px,2vw,20px) clamp(10px,5vw,30px);
                padding-right: clamp(40px,9vw,90px);
                border-radius: 100px;
                border:1px solid var(--base-black-color);
                text-decoration: none;
                display: inline-block;
                position: relative;
                font-size: clamp(12px,1.9vw,19px);

                &::after{
                    content:"";
                    display: inline-block;
                    width: clamp(17.5px,2.5vw,25px);
                    height: clamp(17.5px,2.5vw,25px);
                    background-image: url(../../images/icon/arrow-circle-white-right.svg);
                    vertical-align:baseline;
                    position: absolute;
                    top: 50%;
                    right: clamp(20px, 3vw,30px);
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            
        }
    }
    .contents-area{
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
            max-width: var(--container-size);
        }
        .contents-list{
            background-color: transparent;
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
            padding-bottom: 20px;
            border-radius: clamp(1em,1.5vw, 2em);
            margin: 0;
        }
        .contents-list-01{
            background-color: transparent;
        }
        .sub-flex-items{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sub-flex-item{

        }
        .sub-flex-item-01{
            width: 100%;
        }
        .sub-flex-item-02{
            width: 100%;
        }
        .steps-area{
            text-align:left;
            .step-button{
                background-color: gold;
                padding: clamp(5px,1vw,10px);
                display: inline-block;
            }
        }
        .contents-list-01 {
            .steps-area{
                text-align: center;
                .step-button{
                    background-color: gold;
                    
                }
            }
        }
        .sub-title-area{
            .title{
                color: var(--base-black-color);
                font-size: 20px;
                font-size: clamp(24px,4vw,50px);
            }
        }
        .contents-list-01 {
            .sub-title-area{
                .title{
                    text-align: center;
                    color: var(--base-black-color);
                }
            }
        }
        .sub-image-area{
            margin-bottom: clamp(20px,4vw,40px);
        }
        .sub-contents-area{
            margin-bottom: clamp(20px,4vw,40px);
            p{
                color: var(--base-black-color);
                font-size: clamp(18px,2.4vw,24px);
            }
        }
        .sub-button-area{
            display: flex;
            justify-content: center;
            align-items: center;
            .anime-button {
                width: clamp(200px, 45vw, 600px);
            }
        }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    @media screen and (max-width:480px) { 
        .contents-area{
            padding-left: 0;
            padding-right: 0;
            .contents-list {
                padding-left: 0;
                padding-right: 0;
            }
        }
        
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.reason-section{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            &::before{
                content:"REASON";
                display: block;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
        .button-area{
            .button{
                padding: clamp(10px,2vw,20px) clamp(10px,5vw,30px);
                padding-right: clamp(40px,9vw,90px);
                border-radius: 100px;
                border:1px solid var(--base-black-color);
                text-decoration: none;
                display: inline-block;
                position: relative;
                font-size: clamp(12px,1.9vw,19px);

                &::after{
                    content:"";
                    display: inline-block;
                    width: clamp(17.5px,2.5vw,25px);
                    height: clamp(17.5px,2.5vw,25px);
                    background-image: url(../../images/icon/arrow-circle-white-right.svg);
                    vertical-align:baseline;
                    position: absolute;
                    top: 50%;
                    right: clamp(20px, 3vw,30px);
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            
        }
    }
    .contents-area{
        background-color:#14b8c1;
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        
        .contents-lists {
            list-style: none;
            padding: 0;
            margin: 0;
          }
          .contents-list{
            background-color: var(--base-white-color);
            /* border-radius: clamp(20px,4vw,40px) clamp(5px,1vw,10px) clamp(20px,4vw,40px) clamp(5px,1vw,10px); */
            border-radius: 40px 10px 40px 10px ;
          }
          
          .list-title-area {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: clamp(5px,1vw,10px);
          }
          
          .list-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: clamp(30px,8vw,100px);
            height: clamp(30px,8vw,100px);
            border-radius: 50%;
          }
          
          .list-icon .num {
            font-size: clamp(32px, 5.625vw, 54px);
            font-weight: bold;
            line-height: 1;
            font-style: italic;
            margin-right: clamp(2px,0.5vw,5px);
          }
          /* .list-icon .num-one{
            color: rgb(41, 175, 202);
          }
          .list-icon .num-two{
            color: gold;
          }
          .list-icon .num-three{
            color: rgb(190, 25, 72);
          } */
          
          .list-icon .text {
            font-size: clamp(12px, 1.6vw, 16px);
            margin-top: 0.2rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: bold;
            opacity: 0.7;
            font-style: italic;
          }
          
            .list-title {
            font-size: clamp(20px, 3vw, 26px);
            line-height: 1.2;
            margin-bottom: clamp(5px,1vw,10px);
            }
            /* .marker-one{
                background: linear-gradient(transparent 75%, rgb(128, 181, 191) 75%);
            }
            .marker-two{
                background: linear-gradient(transparent 75%, rgb(241, 218, 85) 75%);
            }
            .marker-three{
                background: linear-gradient(transparent 75%, rgb(186, 84, 113) 75%);
            } */
            p{
                font-size: clamp(14px, 1.6vw, 16px);
                margin-left: clamp(60px,8vw,80px);
                padding: clamp(5px,1vw,10px) clamp(10px,2vw,20px);
            }
            /* .content-one{
                background-color: #e8f5f7;
            }
            .content-two{
                background-color: #f7eae8;
            }
            .content-three{
                background-color: #f7f7e8;
            }
            .content-four{
                background-color: #f6e8f7;
            }
            .content-five{
                background-color: #e8f7f4;
            } */
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}

.section-01{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100vw - var(--container-padding-left-right) - var(--container-padding-left-right) - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        .title{
            font-size: clamp(36px,4.8vw,48px);
            color: var(--base-black-color);
            &::before{
                content:"STORY";
                display: block;
                font-size: clamp(16px,2vw,22px);
                color: var(--base-black-color);
            }
        }
        .button-area{
            .button{
                padding: clamp(10px,2vw,20px) clamp(10px,5vw,30px);
                padding-right: clamp(40px,9vw,90px);
                border-radius: 100px;
                border:1px solid var(--base-black-color);
                text-decoration: none;
                display: inline-block;
                position: relative;
                font-size: clamp(12px,1.9vw,19px);

                &::after{
                    content:"";
                    display: inline-block;
                    width: clamp(17.5px,2.5vw,25px);
                    height: clamp(17.5px,2.5vw,25px);
                    background-image: url(../../images/icon/arrow-circle-white-right.svg);
                    vertical-align:baseline;
                    position: absolute;
                    top: 50%;
                    right: clamp(20px, 3vw,30px);
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            background-color: rgb(75, 159, 172);
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
            padding-bottom: 20px;
            border-radius: clamp(1em,1.5vw, 2em);
            margin: 0;
        }
        .contents-list-01{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-02{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-03{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-04{
            background-color: rgb(75, 159, 172);
        }
        .sub-flex-items{
            display: flex;
            gap: clamp(10px,2vw,20px);
        }
        .sub-flex-item{

        }
        .sub-flex-item-01{
            width: calc(35% - clamp(5px,1vw,10px));
        }
        .sub-flex-item-02{
            width: calc(65% - clamp(5px,1vw,10px));
        }
        .steps-area{
            text-align: right;
            .step-button{
                background-color: gold;
                padding: clamp(5px,1vw,10px);
                border-radius: clamp(2.5px,0.5vw,5px);
                display: inline-block;
            }
        }
        .contents-list-01 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .contents-list-02 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .contents-list-03 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .contents-list-04 {
            .steps-area{
                .step-button{
                    background-color: gold;
                }
            }
        }
        .sub-title-area{
            .title{
                color: gold;
                font-size: 20px;
                font-size: clamp(24px,4vw,50px);
            }
        }
        .contents-list-01 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .contents-list-02 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .contents-list-03 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
        .contents-list-04 {
            .sub-title-area{
                .title{
                    color: gold;
                }
            }
        }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.section-02{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    .container{
        max-width: calc(100% - var(--layout-aside-area-width));
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    @media screen and (max-width: 768px) {
        .container{
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }  
    }
    .title-area{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        .title{
            font-size: clamp(36px,4.8vw,48px);
            color: var(--base-black-color);
            &::before{
                content:"FEATURES";
                display: block;
                font-size: clamp(16px,2vw,22px);
                color: var(--base-black-color);
            }
        }
        .button-area{
            .button{
                padding: clamp(10px,2vw,20px) clamp(10px,5vw,30px);
                padding-right: clamp(40px,9vw,90px);
                border-radius: 100px;
                border:1px solid var(--base-black-color);
                text-decoration: none;
                display: inline-block;
                position: relative;
                font-size: clamp(12px,1.9vw,19px);

                &::after{
                    content:"";
                    display: inline-block;
                    width: clamp(17.5px,2.5vw,25px);
                    height: clamp(17.5px,2.5vw,25px);
                    background-image: url(../../images/icon/arrow-circle-white-right.svg);
                    vertical-align:baseline;
                    position: absolute;
                    top: 50%;
                    right: clamp(20px, 3vw,30px);
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        padding-bottom: 20px;
        border-radius: clamp(1em,1.5vw, 2em);
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            width: calc(50% - clamp(7.5px,1.5vw,15px));
        }
        .contents-list{
            background-color: rgb(75, 159, 172);
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
            padding-bottom: 20px;
            border-radius: clamp(1em,1.5vw, 2em);
            margin: 0;
        }
        .contents-list-01{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-02{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-03{
            background-color: rgb(75, 159, 172);
        }
        .contents-list-04{
            background-color: rgb(75, 159, 172);
        }
        .sub-flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(10px,2vw,20px);
        }
        .sub-flex-item{

        }
        .sub-flex-item-01{
            width: 100%;
        }
        .sub-flex-item-02{
            width: 100%;
        }
        .sub-sub-flex-items{
            display: flex;
            gap: clamp(16px,2.2vw,22px);
        }
        .date-area{
            .day{
                color: gold;
                font-size: clamp(24px,4vw,40px);
                display: inline-block;
            }
            .month{
                color: gold;
                font-size: clamp(16px,2.2vw,22px);
                display: inline-block;

            }
        }
        .contents-list-01 {
            .day{
                color: gold;
            }
            .month{
                color: gold;
            }
        }
        .contents-list-02 {
            .day{
                color: gold;
            }
            .month{
                color: gold;
            }
        }
        .contents-list-03 {
            .day{
                color: gold;
            }
            .month{
                color: gold;
            }
        }
        .contents-list-04 {
            .day{
                color: gold;
            }
            .month{
                color: gold;
            }
        }
        .sub-title-area{
            margin-bottom: clamp(16px,2.2vw,22px);
            .title{
                font-size: 20px;
                font-size: clamp(20px,2.4vw,24px);
            }
        }
        .sub-category-area{
            .category{
                background-color: white;
                font-size: clamp(12px,1.4vw,14px);
                padding: clamp(1px,0.2vw,2px) clamp(2.5px,0.5vw,5px);
                display: inline-block;
                margin-right: clamp(16px,2.2vw,22px);
                border-radius: clamp(2px,0.4vw,4px);
            }
        }
    }
    @media screen and (max-width:864px) { 
        .contents-area{
            padding-bottom: clamp(20px,4.5vw, 40px);
        }
    }
    .no-article-text{
        text-align: center;
        margin-bottom: clamp(10px,2vw,20px);
        font-size: clamp(18px,1.8vw,20px);
    }
}
.marquee-section{
    background-color: var(--base-white-color);
    .marquee-content{
        .marquee-text{
            font-size: clamp(60px,10vw,100px);
            color: var(--primary-color);
            font-weight: 700;
        }
    }
}

.layout-side{

}