body{
    background-color: #efefef;
}
.fv{
    .container{
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .fv-swiper {
        width: 100%;
      }
      
      .fv-swiper .swiper-slide {
        text-align: center;
        position: relative;
      }
      .fv-swiper .slide-bg{
        width: 100%;
      }
      .fv-swiper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
      /* 初期状態は透明・下にずれてる */
       /* 初期スタイルは不要。アニメだけ適用 */
    @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{
        background: linear-gradient(135deg, rgba(251, 227, 246, 0.6), rgba(207, 230, 210, 0.4), rgb(245, 204, 224));
        background-size: 200% 200%;
        animation: gradient-move 8s ease infinite;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        color: var(--base-white-color);
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title{
            font-size: clamp(24px,6vw,60px);
            padding-left: clamp(10px ,2vw, 30px);
            padding-right: clamp(10px ,2vw, 30px);
        }
    }
    .image-area{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(255,255,255,0.4);
        border-radius: clamp(10px,2vw,20px);
        padding-top: clamp(10px,2vw,20px);
        padding-bottom: clamp(10px,2vw,20px);
        img{
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    @media screen and (max-width: 768px) {
        .image-area{
            img{
                max-width: 350px;
            }
    }
}
    @media screen and (max-width: 480px) {
        .image-area{
            img{
                max-width: 250px;
            }
    }
    }
    .title-area{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: center;
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        .title{
            font-size: clamp(22px,4vw,44px);
            font-family: "Noto Sans JP", sans-serif;
            color: var(--base-white-color);
            letter-spacing: clamp(4px,1vw,10px);
            line-height: 1.8;
            font-weight: 900;
        }
        .text-gray-layer-02 {
            color: rgba(255, 255, 255, 0.3);
        }
        .text-gray-layer-02::after {
            color: var(--base-white-color);
        }
        .text-gray-layer {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
        }
        .text-gray-layer::after {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
            transition-delay: 0.8s;
        }
    }
    
}
@keyframes gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.skill-section{
    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;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(10px,2vw, 20px);
    }
    .title-area{
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(24px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            &::before{
                content:"Joint";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        position: relative;
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
        }
        .sub-title-area{
            .title{
                text-align: left;
                    color: var(--base-black-color);
                font-size: 20px;
                font-size: clamp(24px,4vw,38px);
                letter-spacing: clamp(2px,0.4vw,4px);
            }
        }
        .sub-image-area{
            margin-bottom: clamp(10px,2vw,20px);
        }
        .sub-contents-area{
            margin-bottom: clamp(10px,2vw,20px);
            p{
                color: var(--base-white-color);
            }
        }
        .question-area{
            margin-bottom: clamp(20px,4vw,40px);
            p{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
            }
        }
        .answer-area{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: clamp(20px,4vw,40px) clamp(10px,2vw,20px);
            border:2px solid var(--primary-color);
            background-color: #ecf9f8;
            border-radius: 0.5vw;
            .answer-title{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
            }
            .answer-description{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
                margin-bottom: clamp(20px,3vw,30px);
            }
        }
        .mark-area{
            position: absolute;
            right: 5vw;
            top: 5vw;
            width: 20vw;
            height: 20vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        
    }
}
/* 背景がスライドすることで色が流れ込む */
@keyframes slideBg {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
.about-section-02{
    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;
        padding-top: clamp(15px,2.5vw, 25px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        letter-spacing: clamp(2px,0.4vw,6px);
        margin-bottom: clamp(10px,2vw,20px);
        .title{
            font-size: clamp(24px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            &::after{
                content:"Creating Business Together";
                display: block;
                text-align: left;
                font-size: clamp(12px,1.4vw,14px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
                margin-bottom: clamp(5px,1vw,10px);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        background-color: #14b8c1;
        background-image: url(../../images/about/pixta_82122647_M.jpg);
        background-position: right;
        background-size: cover;
        margin-bottom: clamp(20px,4vw,40px);
        .contents-bg-mask{
            background-image: linear-gradient(135deg, rgba(247, 93, 139, 0), rgba(247, 93, 139, 0.3), rgba(254, 220, 64, 0.6));
            background-size: 200% 200%;
            animation: contents-gradient-move 8s ease-in-out infinite;
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        }
        .contents-container{
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
        }
        @media screen and (max-width:768px) { 
            .contents-container{
                max-width: 100%;
            }
        }
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
        }
        .accordion-001 {
            padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 40px);
            background-color: rgba(255,255,255,0.8);
            transition: background-color 0.8s ease; /* margin-top/bottom 両方対象に */
            margin-top: clamp(30px, 5vw, 50px);
            margin-bottom: clamp(30px, 5vw, 50px);
          }
          
          .accordion-001:hover {
            background-color: rgba(255, 255, 0,0.3);
          }
          
          /* 最初の要素だけ特別に処理 */
          .accordion-001:first-child {
            transition: background-color 0.8s ease;
          }
          
          /* hover時のfirst-child */
          .accordion-001:first-child:hover {
            background-color: rgba(0, 255, 47, 0.3);
          }
          
          /* 最後の要素だけ特別に処理 */
          .accordion-001:last-child {
            transition: background-color 0.8s ease;
          }
          
          /* hover時のlast-child */
          .accordion-001:last-child:hover {
           background-color: rgba(0, 238, 255, 0.3);
          }
        
        .accordion-001 summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            padding-top:clamp(10px,2vw,20px);
            padding-bottom:clamp(10px,2vw,20px);
            color: #333333;
            font-weight: 600;
            cursor: pointer;
            font-size: clamp(20px,4vw,40px);
        }
        
        .accordion-001 summary::-webkit-details-marker {
            display: none;
        }
        
        /* 円形背景＋アイコンの表示 */
        .accordion-001 summary .arrow-icon {
            flex-shrink: 0;
            display: inline-block;
            width:48px;
            height: 48px;
            margin-left: 10px;
            background-color: transparent; /* 背景の円の色 */
            border-radius: 50%;
            background-image: url('../../images/icon/arrow-bottom-black.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 37.5% 37.5%;
            transition:
            transform 0.5s ease,
            background-color 0.5s ease; 
        }
        .accordion-001 summary:hover .arrow-icon {
            background-color: rgb(254, 220, 64); /* 例：青緑系に変更 */
          }
        
        /* open時に回転（中心軸） */
        .accordion-001[open] summary .arrow-icon {
            transform: rotate(180deg);
        }
        
        .accordion-001[open] summary::after {
            transform: rotate(225deg);
            background-image: url(../../images/icon/arrow-bottom-black.svg);
        }
        
        .accordion-001 p {
            transform: translateY(-10px);
            opacity: 0;
            margin: 0;
            padding-top:clamp(10px,2vw,20px);
            padding-bottom:clamp(10px,2vw,20px);
            color: #333333;
            transform: translateY(-10px);
            transition: opacity 1.2s ease, transform 1.2s ease;
        }
        
        .accordion-001[open] p {
            opacity: 1;
            transform: translateY(0);
        }
    }
     @media screen and (max-width:768px) { 
        .contents-area{
            background-position: 80%;
        }
     }
    .sub-button-area{
        .anime-button{
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
    }
}
@keyframes contents-gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.about-section-03{
    background-image: url(../../images/about/pixta_41350514_M.jpg);
        background-size: cover;
        background-position: center;
        .bg-mask{
            padding-left: var(--container-padding-left-right);
            padding-right: var(--container-padding-left-right);
        
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(238, 251, 240, 0.6), rgba(4, 202, 255, 0.7));
            background-size: 200% 200%;
            animation: contents-gradient-move 8s ease-in-out infinite;
        }
    .container{
        max-width: var(--container-size);

        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        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.5;
            font-family: "Noto Serif JP", serif;
            &::before{
                content:"Community";
                display: block;
                text-align: left;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        background-color: rgba(255,255,255,0.8);
        padding-top: clamp(30px,5vw,50px);
        padding-bottom: clamp(30px,5vw,50px);
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        .contents-bg-mask{
            padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        }
        .contents-container{
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
        }
        @media screen and (max-width:768px) { 
          .contents-container{
                max-width: 100%;
            }  
        }
        .sub-title{
            font-size: clamp(18px,2.4vw,24px);
            margin-bottom: clamp(20px,3vw,30px);
            letter-spacing:clamp(3px,0.6vw,6px);
            text-align: center;
            .catch-top{
                font-size: clamp(24px,3.6vw,36px);
            }
            .catch-top {
            font-size: clamp(24px, 3.6vw, 36px);
            position: relative;
            display: inline-block;
            }

            .catch-top::before {
            content: "「";
            position: absolute;
            left: -1.5em; /* 調整 */
            top: -0.25em;
            }

            .catch-top::after {
            content: "」";
            position: absolute;
            right: -1.5em; /* 調整 */
            bottom:-0.25em;
            }
            .catch-bottom{
                display: block;
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
            }
        }
        .sub-description{
            font-size: clamp(16px,2vw,20px);
            margin-bottom: clamp(10px,2vw,20px);
   
        }
    }
    .sub-button-area{
        .anime-button{
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
    }
}
@keyframes contents-gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.greeting-section{
        background-size: cover;
        .bg-mask{
            padding-left: var(--container-padding-left-right);
            padding-right: var(--container-padding-left-right);
        
            background: linear-gradient(135deg, rgba(221, 255, 0, 0.3), rgba(255, 0, 174, 0.6), rgba(4, 202, 255, 0.9));
            background-size: 200% 200%;
            animation: contents-gradient-move 8s ease-in-out infinite;
        }
    .container{
        max-width: var(--container-size);

        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(80px,11.5vw, 115px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: clamp(12.5px,2.5vw,25px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(26px,3.2vw,32px);
            letter-spacing: clamp(1.5px,0.3vw,3px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            &::before{
                content:"代表挨拶";
                display: block;
                text-align: left;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        background-color: rgba(255,255,255,0.8);
        padding: clamp(30px,5vw,50px) clamp(20px,4vw,40px);
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        .flex-items{
            display: flex;
            gap: clamp(30px,5vw,50px);
        }
        .flex-item-01{
            img{
                max-width: 500px;
                margin-bottom: clamp(5px,1vw,10px);
                border-radius: 0 0 clamp(30px,6vw,60px) 0;
            }
            figcaption{
                .position{
                    font-size: clamp(16px,2vw,20px);
                    letter-spacing: clamp(1.5px,0.3vw,3px);
                }
                .name{
                    font-size: clamp(22px,2.8vw,28px);
                    letter-spacing: clamp(1px,0.2vw,2px);
                }
            }
        }
        .flex-item-02{
            .greeting-contents{
                p{
                    margin-bottom: clamp(10px,2vw,20px);
                }
            }
        }
    }
    .sub-button-area{
        .anime-button{
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
    }
}
@keyframes contents-gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.executive-member-section{
    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;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
        
    }
    .title-area{
        display: flex;
        justify-content: flex-start;
        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;
            font-family: "Noto Serif JP", serif;
            &::before{
                content:"Executive / Coach";
                display: block;
                text-align: left;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        background: linear-gradient(135deg, rgba(242, 254, 164, 0.8), rgba(171, 199, 251, 0.6), rgba(247, 234, 178, 0.9));
        background-size: 200% 200%;
        animation: contents-gradient-move 8s ease-in-out infinite;
        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: clamp(10px,2vw,20px);
        }
        .contents-list{
            margin: 0;
            flex: 1;
            padding: clamp(10px,2vw,20px);
            background-color: rgba(255,255,255,0.5);
            border-radius: clamp(5px,1vw,10px);
        }
        .contents-list-01{

        }
        .list-image-area{
            margin-bottom: clamp(10px,2vw,20px);
        }
        .list-title-area{
            margin-bottom: clamp(22px,3vw,30px);
            .position{
                font-size: 18px;
                font-size: clamp(18px,2.2vw,22px);
                letter-spacing: clamp(1px,0.2vw,2px); 
            }
            .title{
                text-align: left;
                color: var(--base-black-color);
                font-size: 20px;
                font-size: clamp(24px,4vw,38px);
                letter-spacing: clamp(2px,0.4vw,4px);
            }
        }
        .list-content-area{
            margin-bottom: clamp(10px,2vw,20px);
            p{
                margin-bottom: clamp(10px,2vw,20px);
            }
            .message{
                text-align: center;
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
                font-size: clamp(18px,2.2vw,22px);
            }
        }
        .collapse-extra {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
          }
          
          .text-collapsible.expanded .collapse-extra {
            max-height: 1000px; /* 十分な高さに調整 */
          }
          
          .readmore-button {
            background: transparent;
            border: none;
            color: #007bff;
            cursor: pointer;
            font-size: 1em;
            text-decoration: underline;
            padding: 0;
            margin-left: auto;
            background-color: #ffff00;
            display: block;
            padding: 10px;
            border-radius: 50%;
            transition: background-color 0.8s ease;
            img{
                width: clamp(25px,3vw,30px);
                height: clamp(25px,3vw,30px);
                margin-left: auto;
                margin-right: auto;
                transform: rotate(-90deg);
            }
          }
          .readmore-button:hover{
            background-color: #ffa600;
          }
          /* 折りたたみが展開されたときに上向きに回転 */
            .text-collapsible.expanded .readmore-button img {
                transform: rotate(180deg);
            }
    }
}
.service-section{
    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;
        padding-top: clamp(55px,5.5vw, 75px);
        padding-bottom: clamp(80px,11.5vw, 115px);
    }
    .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;
            font-family: "Noto Serif JP", serif;
            &::before{
                content:"SKILL";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);

        padding: clamp(20px,4.5vw, 45px) clamp(15px,6vw, 60px);
        border-radius: clamp(1em,1.5vw, 2em);
        font-family: "Noto Serif JP", serif;
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
        }
        .sub-title-area{
            .title{
                text-align: left;
                    color: var(--base-black-color);
                font-size: 20px;
                font-size: clamp(24px,4vw,38px);
                letter-spacing: clamp(2px,0.4vw,4px);
            }
        }
        .sub-image-area{
            margin-bottom: clamp(10px,2vw,20px);
        }
        .sub-contents-area{
            margin-bottom: clamp(10px,2vw,20px);
            p{
                color: var(--base-white-color);
            }
        }
        .question-area{
            margin-bottom: clamp(20px,4vw,40px);
            p{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
            }
        }
        .answer-area{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: clamp(20px,4vw,40px) clamp(10px,2vw,20px);
            border:2px solid var(--primary-color);
            background-color: #ecf9f8;
            border-radius: 0.5vw;
            .answer-title{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
            }
            .answer-description{
                line-height: 2.2;
                letter-spacing: 3px;
                text-align: center;
                margin-bottom: clamp(20px,3vw,30px);
            }
        }
    }
}
.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(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);
        text-align: center;
        .title{
            font-size: clamp(36px,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);
        }
        .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(5px,1vw,10px);
                border-radius: clamp(2.5px,0.5vw,5px);
                display: inline-block;
            }
        }
        .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(20px,4vw,40px);
            .title{
                color: gold;
                font-size: 20px;
                font-size: clamp(22px,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: 20px;
            font-size: clamp(18px,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);
        }
    }
    .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);
    font-family: "Noto Serif JP", serif;
    .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:"Member";
                display: block;
                font-size: clamp(16px,1.8vw,18px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        .slide-image-area{
            width: 100%;
            height: 100%;
            margin-bottom: clamp(0.25em,1vw,0.5em);
            img{
                width: clamp(150px,30vw,300px);
                height: clamp(150px,30vw,300px);
                border-radius: 50%;
                margin-left: auto;
                margin-right: auto;
            }
        }
        .article-title{
            font-size: clamp(16px,1.8vw,18px);
            margin-bottom: clamp(2.5px,0.5vw,5px);
            font-weight: 900;
        }
        .article-description{
            font-weight: 400;
        }
    }
}
.article-slider-section{
    background-color: var(--base-white-color);
    padding-bottom: clamp(35px,8vw, 80px);
    font-family: "Noto Serif JP", serif;
    padding-left: clamp(10px,2vw,20px);
    padding-right: clamp(10px,2vw,20px);
    .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: left;
        }
        .title{
            font-size: clamp(40px,5vw,50px);
            color: #006eff;
            letter-spacing: clamp(2px,0.5vw,6px);
            line-height: 1.8;
            &::before{
                text-align: left;
                content:"Information";
                display: block;
                font-size: clamp(16px,1.8vw,18px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        .slide-image-area{
            width: 100%;
            height: 100%;
            margin-bottom: clamp(0.25em,1vw,0.5em);
            img{
                width: 100%;
                height: auto;
                margin-left: auto;
                margin-right: auto;
            }
        }
        .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;
            }
        }
        .article-title{
            font-size: clamp(16px,1.8vw,18px);
            margin-bottom: clamp(2.5px,0.5vw,5px);
            font-weight: 900;
        }
        .article-description{
            font-weight: 400;
        }
    }
    .slide-contents-area{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        .article-top-area{
            flex-grow: 1;
        }
        .article-bottom-area{
            margin-left: auto;
            flex-grow: 1;
        }
    }
}
.layout-side{

}