body{
    font-family: "MS Sans Serif";
    width: 100%;
    margin-right: auto;
    margin-left : auto;
    margin-top: 0;
    margin-bottom: 0;
    color: #ffffff;
}


header{
    z-index: 10000;
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    background-color: #b41f24;
    height: 8vw;
    img{
        height: 6vw;
        width: auto;
        margin: 1.5vw;
        margin-left: 2vw;
    }
    a{
        text-decoration: none;
    }
    h2{
        font-size: 3vw;
        width: 20vw;
        margin: 0;
        padding-left: 3vw;
        line-height: 8vw;
        color: #ffffff;
    }
    ul{
        width: 65vw;
        margin: 0;
        margin-left: 30vw;
    }
    li{
        list-style: none;
        display: inline;
        font-size: 1.5vw;
        margin-left: 3vw;
        line-height: 8vw;
        color: #ffffff;
    }
}

footer{
    width: 100%;
    background-color: #b41f24;
    height: 16vw;
    img{
    height: 6vw;
    width: auto;
    margin-top: 2.5vw;
    margin-left: 2vw;
    }
    a{
    text-decoration: none;
    color: inherit;
    height: 6vw;
    }
    h2{
        font-size: 3vw;
        width: 20vw;
        margin: 0;
        line-height: 10vw;
        color: #ffffff;
    }
    h3{
        text-align: center;
        margin-top: 1vw;
        font-size: 1.5vw;
        font-weight: lighter;
    }
    h4{
        text-align: center;
        margin-top: -1.5vw;
        font-size: 1vw;
        font-weight: lighter;
    }
    ul{
        width: 65vw;
        margin: 0;
        margin-left: 30vw;
    }
    li{
        list-style: none;
        display: inline;
        font-size: 1.5vw;
        margin-left: 3vw;
        line-height: 10vw;
        color: #ffffff;
    }
    .company{
        hr{
            width: 95vw; 
            color: #ffffff;
            margin: 0 auto;
    }
    }
}

.footer-sub{
    display: flex;
    h2{
    font-size: 3vw;
    width: 20vw;
    margin-bottom: -5vw;
    line-height: 8vw;
    color: #ffffff;
}
}

.card{
    h2{
        font-family: 'Nanum Myeongjo', Serif;
    }
    h3{
        font-family: "Zen Old Mincho", serif;
        font-weight: lighter;
    }
}

.card2{
    display: flex;
    .card2-1{
        color: #ffffff;
        background: linear-gradient(to bottom right, #b41f24, #810c10);
        border-radius: 5px;
        text-align: center;
        font-size: 3vw;
        height: 10vw;
        width: 30vw;
        margin: 3.5vw 2vw;
        h5{
            margin-top: 3.2vw;
        }
    }
}

.card3{
    display: flex;
    .card3-1{
        color: #ffffff;
        text-align: center;
        font-size: 2.5vw;
        height: 10vw;
        width: 30vw;
        margin: 2vw;
        margin-bottom: 5vw;
    }
}

.space{
    margin: 18.5vw;
}

.red{
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #b41f24, #810c10);
    height: 70vw;
    width: 100%;
    img{
        position: absolute;
        opacity: 0.3;
        width: 67vw;
        height: auto;
        margin-left: 45vw;
        margin-top: -6vw;
    }
    .circle-0{
        position: absolute;
        z-index: 500;
        text-align: center;
        background: linear-gradient(90deg, #1D262E 0%, #063761 50%, #1D262E 100%);
        width: 80%;
        height: 6.5vw;
        margin-top: 55.5vw;
        margin-left: 9vw;
        border: 10px double #b39855;
        border-right: 10px double #b39855;
        border-bottom: 10px double #b39855;
        h1{
            font-size: 2vw;
            margin-top: 2vw;
            color: #ffffff;
        }
    }
    h2{
        font-family: "source-han-serif-japanese", serif;
        font-weight: 900;
        font-style: normal;
        font-size: 10vw;
        margin: 0;
        line-height: 140px;
    }
    h3{
        font-family: "source-han-serif-japanese", serif;
        font-weight: 900;
        font-style: normal;
        font-size: 4vw;
        margin: 0 auto;

    }
}

.red2{
    background: linear-gradient(125deg, #b41f24 0%, #b41f24 67.4%, #ffffff 67.4%, #ffffff 100%);
    h2{
        font-size: 10vw;
        margin-bottom: 3vw;
    }
    h3{
        font-size: 3vw;
        margin: 0 auto;
    }
}

.white{
    padding: 5vw 8vw;
    color: black;
    h2{
        font-size: 5vw;
        margin-bottom: -1vw;
    }
    h3{
        font-size: 2vw;
        margin: 0 auto;
    }
}

.black{
    background-color: black;
    padding: 5vw 8vw;
    color: #ffffff;
    h2{
        font-size: 5vw;
        margin-bottom: -1vw;
    }
    h3{
        font-size: 2vw;
        margin: 0 auto;
    }
}


.client{
    h5{
        font-size: 3.5vw;
        margin: 3vw 0;
    }
}

.feature{
    h6{
        text-align: center;
        font-size: 3.5vw;
        margin-top: 8vw;
        margin-bottom: 2vw;
    }
}

.plan{
    h4{
        text-align: center;
        font-size: 4vw;
        margin-top: 7vw;
        margin-bottom: 2vw;
    }
}

.plan2{
    padding: 4vw 8vw;
    padding-bottom: 6vw;
    .card-2{
        display: inline;
        h4{
            text-align: center;
            font-size: 4vw;
            margin-top: 4vw;
            margin-bottom: 5vw;
        }
        h9{
            color: #ffffff;
            margin-left: 15.8vw;
        }
        .plan2-yoko{
            background-color: #6a6a6a;
            display: flex;
            height: 10vw;
            width: 40vw;
            margin: 0 auto;
            margin-top: -1vw;
            padding: 0vw;
            .plan2-text{
                padding: 2vw 1vw;
                padding-left: 2.5vw;
            }
            h7{
                font-size: 2vw;
                margin-top: 2.2vw;
            }
            h8{
                font-size: 4vw;
                font-weight: bold;
            }
            ul{
                margin: 0.05vw;
                li{
                    color: #ffffff;
                    font-size: 0.5vw;
                    margin: -0.3vw;
                }
            }
            display: none;
        }

        .plan2-yoko2{
            background-color: #2a2a2a;
            box-shadow: 2px 2px 6px 0px #2a2a2a;
            display: flex;
            height: 10vw;
            width: 52.5vw;
            margin: 0 auto;
            margin-top: 4vw;
            margin-bottom: 2vw;
            padding: 0vw;
            .plan2-text2{
                padding: 2vw 3vw; 
                padding-top: 2.2vw;
                padding-left: 3.45vw;
                border: dotted;
                border-right-width: 6px;
                border-top: none;
                border-bottom: none;
                border-left: none;
                border-color: #b41f24;
            }
            .plan2-text3{
                padding: 2vw;
                padding-top: 1.75vw;
                padding-right: 2.24vw;
                border: 5.5px solid;
                background-color: #b41f24;
                border-color: #b41f24;
            }
            .plan2-text4{
                margin-top: -3vw;
            }
            h7{
                color: #ffffff;
                font-size: 1.8vw;
                margin-top: 2.3vw;
            }
            h8{
                color: #ffffff;
                font-size: 3.8vw;
                font-weight: bold;
            }
        }
    }
    .card-2-1{
        display: flex;
        margin-left: 17.4vw;
        margin-top: 2vw;
        margin-bottom: 3vw;
        h4{
            margin-top: 8vw;
            margin-right: 3vw;
        }
    }
    .card-3{
        background: #ffffff;
        box-shadow: 2px 2px 6px 0px #2a2a2a;
        border-radius: 10px;
        border: 4px solid #969ba0;
        border-color: linear-gradient(#969ba0 0%, #d4d4d4 50%, #969ba0 100%);
        border-width: 4px;
        height: 20vw;
        width: 15vw;
        padding: 2vw;
        margin-right: 3vw;
        h5{
            text-align: center;
            font-size: 1.8vw;
            color: #5b5b5b;
            margin-top: 3vw;
            margin-bottom: -2vw;
        }
        h6{
            font-size: 1.4vw;
            font-weight: lighter;
            color: #5b5b5b;
        }
        .fa-regular, .fa-solid{
            font-size: 4vw;
            color: #5b5b5b; 
            margin-top: 2vw;
        }
        .fa-file-lines{
            margin-left: 6vw;
        }
        .fa-image{ 
            margin-left: 5.5vw;
        }
        .fa-book-open{
            margin-left: 5.3vw;
        }
        .fa-file-code{
            margin-left: 6vw;
        }
    }
}

.flow2{
    text-align: center;
        h4{
            font-size: 4vw;
        }
    }
.flow3{
    padding-left: 2vw;
    text-align: left;
}


.balloon-group{
    display: flex;
    margin-left: 2.5vw;
}

.balloon-one{
    margin: 5vw 3vw;
}

.balloon {
    display: inline-block;
    text-align: center;
    padding: auto;
    width: 20vw;
    height: 10vw;
    color: #ffffff;
    font-size: 1.8vw;
    background: #555;
    border-radius: 25px;
}

.balloon2 {
    display: inline-block;
    text-align: center;
    padding: auto;
    width: 20vw;
    height: 10vw;
    color: #ffffff;
    font-size: 1.8vw;
    background: #b41f24;
    border-radius: 25px;
}

.balloon-a{
    position: relative;
    padding-top: 0vw;
}


.balloon-a:before {  
    content: "";
    position: absolute;
    left: -38px;
    width: 13px;
    height: 12px;
    bottom: 0;
    background: #555;
    border-radius: 50%;
}

.balloon-a:after {
    content: "";
    position: absolute;
    left: -24px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    background: #555;
    border-radius: 50%;
}

.balloon-b{
    position: relative;
    padding-top: 5vw;
}

.balloon-b:before {  
    content: "";
    position: absolute;
    right: -36px;
    width: 13px;
    height: 12px;
    bottom: 0;
    background: #555;
    border-radius: 50%;
}

.balloon-b:after {
    content: "";
    position: absolute;
    right: -22px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    background: #555;
    border-radius: 50%;
}

.balloon-c{
    position: relative;
    padding-top: 1vw;
}

.balloon-c:before {  
    content: "";
    position: absolute;
    right: -38px;
    width: 13px;
    height: 12px;
    top: 3px;
    background: #555;
    border-radius: 50%;
}

.balloon-c:after {
    content: "";
    position: absolute;
    right: -24px;
    width: 20px;
    height: 18px;
    top: 10px;
    background: #555;
    border-radius: 50%;
}

.balloon-d{
    position: relative;
    padding-top: 0vw;
}

.balloon-d:before {  
    content: "";
    position: absolute;
    left: -38px;
    width: 13px;
    height: 12px;
    bottom: 0;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-d:after {
    content: "";
    position: absolute;
    left: -24px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-e{
    position: relative;
    padding-top: 5vw;
}

.balloon-e:before {  
    content: "";
    position: absolute;
    right: -36px;
    width: 13px;
    height: 12px;
    bottom: 0;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-e:after {
    content: "";
    position: absolute;
    right: -22px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-f{
    position: relative;
    padding-top: 1vw;
}

.balloon-f:before {  
    content: "";
    position: absolute;
    right: -38px;
    width: 13px;
    height: 12px;
    top: 3px;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-f:after {
    content: "";
    position: absolute;
    right: -24px;
    width: 20px;
    height: 18px;
    top: 10px;
    background: #b41f24;
    border-radius: 50%;
}

.balloon-one {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


.triangle {
      width: 70vw;
      margin: 3vw auto;
      display: flex; /* flexboxを指定 */
      flex-flow: row wrap; /* 子要素をrow方向に並べ、逆に折返す*/
      justify-content: space-around; /* 並べ方向に均等な空白 */ 
}


.circle1{
        margin: 0 20vw;
      }

.circle {
      width: 25vw;
      height: 25vw;
      margin: 0vw;
      background: linear-gradient(to bottom right, #b41f24, #5c090c);
      border-radius: 180px;
      h4{
        font-size: 2.5vw;
        text-align: center;
        padding-top: 7vw;
        padding-bottom: 0.5vw;
        margin-bottom: 0;
      }
      h5{
        font-size: 1.5vw;
        font-weight: lighter;
        text-align: center;
        margin: 0 2vw;
        margin-top: 1vw;
      }
}



.arrow-down {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;
    line-height: 1;
    width: 1em;
    height: 1em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
}

.arrow-down:after{
    position: absolute;
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;
    line-height: 1;
    width: 1em;
    height: 1em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    top: 20px;
    right: 12px;
    transform: translateY(-25%) rotate(0deg);
}



.arrow-yoko{
    display: flex;
}

.arrow {
    position: relative;
    width: 15vw;
    height: 10vw;
    background: linear-gradient(to right, #b41f24 0%, #b41f24 50%, #93181c 100%);
    box-shadow: 0px 0px 6px 0px #2a2a2a;
    margin: 3vw 2.5vw;
    h5{
        color: #ffffff;
        font-size: 1.8vw;
        margin-left: 2vw;
        margin-top: 2.8vw;
        margin-bottom: 0;
    }
    h6{
        color: #ffffff;
        font-size: 1vw;
        margin-left: 2vw;
        margin-top: -1vw;
        font-weight: lighter;
    }

}
.arrow::after {
  content: "";
  position: absolute;
  color: #93181c;
  top: 0vw;
  right: -9.95vw;
  border-left: 5vw solid;
  border-top: 5vw solid transparent;
  border-right: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
}

.consulting{
    .arrow-down-yoko{
        display: flex;
        .arrow-down{
            position: relative;
            display: inline-block;
            vertical-align: middle;
            color: #ffffff;
            line-height: 1;
            width: 2vw;
            height: 2vw;
            margin: 0 20vw;
            border: 3px solid currentColor;
            border-left: 0;
            border-bottom: 0;
            box-sizing: border-box;
            transform: translateY(-25%) rotate(135deg);
        }

        .arrow-down:after{
            position: absolute;
            content: "";
            display: inline-block;
            vertical-align: middle;
            color: #ffffff;
            line-height: 1;
            width: 2vw;
            height: 2vw;
            border: 3px solid currentColor;
            border-left: 0;
            border-bottom: 0;
            box-sizing: border-box;
            top: 20px;
            right: 12px;
            transform: translateY(-25%) rotate(0deg);
        }
    }
}

.think{
    display: flex;
    text-align: center;
    .think2{
        background-color: #2a2a2a;
        border-radius: 10px;
        width: 25vw;
        height: auto;
        margin: 7vw auto;
        margin-bottom: 4vw;
        padding: 1vw 2vw;
        h4{
            font-size: 1.5vw;
            font-weight: lighter;
        }
    }
}

.suggestion{
    text-align: center;
    width: 60vw;
    margin:0;
    margin-left: 12vw;
    background: linear-gradient(to bottom right, #b41f24, #810c10);
    h5{
        font-size: 3vw;
        padding: 2vw;
        margin-top: 3vw;
        margin-bottom: 12vw;
    }
}

.appeal{
    text-align: center;
    margin-bottom: 10vw;
    .arrow-yoko2{
        display: flex;
        margin-left: 5vw;
    }
    .arrow{
        margin-top: 1vw;
        padding-top: 1.8vw;
        padding-left: 1.8vw;
        padding-bottom: 0;
        width: 17vw;
        height: 6vw;
    }
    .arrow::after {
        content: "";
        position: absolute;
        color: #93181c;
        top: -0.42px;
        right: -9.95vw;
        border-left: 5vw solid;
        border-top: 3.94vw solid transparent;
        border-right: 5vw solid transparent;
        border-bottom: 3.94vw solid transparent;
        }
    h6{
        font-size: 2.5vw;
        margin: 0 auto;
    }
    h7{
        font-size: 1.5vw;
        vertical-align: middle;
    }
    h8{
        font-size: 1.8vw;
        span{
            border-bottom: double;
            border-color: #b41f24;
        }
    }
}




.button{
    display: flex;
    margin-left: 11.5vw;
    margin-bottom: 5vw;
    a{
        text-decoration: none;
        color: #ffffff;
    }
    .button2{
        text-align: center;
        text-decoration: none;
        background: linear-gradient(to bottom right, #b41f24, #810c10);
        border-radius: 10px;
        box-shadow: 0px 0px 6px 0px #2a2a2a;
        width: 20vw;
        height: 8vw;
        line-height: 8vw;
        padding: auto;
        margin: 0 5vw;
        h9{
            font-size: 2vw;
        }

    }
}

.form {
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4.9vw;
    max-width: 720px;
  }
  @media screen and (max-width: 480px) {
    .Form {
      margin-top: 40px;
    }
  }
  .Form-Item {
    border-top: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .Form-Item-Sub{
    text-align: left;
    .check{
      margin: 1vw 0;
      margin-left: 3vw;
      margin-right: 1vw;
    }
}

  @media screen and (max-width: 480px) {
    .Form-Item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  .Form-Item:nth-child(5) {
    border-bottom: 1px solid #ddd;
  }
  .Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
    text-align: left;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .Form-Item-Label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
      margin-top: 0;
    }
  }
  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #b41f24;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .Form-Item-Input {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #b41f24;
    color: #fff;
    font-family: "MS Sans Serif";
    font-weight: bold;
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }
  }




/* ─── CSS ─── */
/* ─── circle-0 のホバーを軽く白っぽく ─── */
.first-view .circle-0{
  transition: filter 0.2s ease-out;
}
.first-view .circle-0:hover{
  filter: brightness(1.2);
}





/* 1) h2 の初期状態 */
#first-view .first-view h2 {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* h2 フェードイン用クラス */
#first-view .first-view h2.h2-in-view {
  opacity: 1;
  transform: translateX(0);
}

/* h3 全体の行間を調整 */
#first-view .first-view h3 {
  line-height: 1.2;  /* お好みの行間に合わせてください */
  /* 下記の設定はそのまま */
  opacity: 1;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

/* 1文字ずつ包む span */
#first-view .first-view h3 span {
  opacity: 0;
  display: inline-block;
  transform: translateX(-5px);
  transition: opacity 0.3s ease-out,
              transform 0.3s ease-out;
}

/* in-view で一斉に発火 */
#first-view .first-view h3.h3-in-view span {
  opacity: 1;
  transform: translateX(0);
}






/* in-view クラスでフェード＆スライドイン */
.balloon-one.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 順番にフェードインさせるための遅延 */
.balloon-group .balloon-one:nth-child(1) { transition-delay: 0s;   }
.balloon-group .balloon-one:nth-child(2) { transition-delay: 0.2s; }
.balloon-group .balloon-one:nth-child(3) { transition-delay: 0.4s; }





/* FEATURE セクションの h6 を下からフェードイン */
#feature .feature > h6 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* in-view クラスがついたらフェードイン */
#feature .feature > h6.in-view {
  opacity: 1;
  transform: translateY(0);
}





/* 1. ラッパー */
.yoko-scroll-wrapper {
  position: relative;
  width: 98.8%;
  overflow: hidden;
  margin: 2rem 0;
}

/* 2. コンテナ */
.yoko-scroll-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  /* wrapper(100%)－item(74vw) を半分ずつ余白に */
  scroll-padding: 0 calc((100% - 76vw) / 2);
  gap: 3vw;

  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
  position: relative; /* 疑似要素を効かせるため */
}

.yoko-scroll-container::after {
  content: "";
  flex: 0 0 20vw;
}


/* 3. 各アイテム */
.yoko-scroll {
  flex: 0 0 76vw;          /* 幅を74vwで固定 */
  display: flex;           /* .kari と .yoko-text を横並びに */
  overflow: hidden;        /* 内部のはみ出しを隠す */
  scroll-snap-align: center;

  .kari {
    flex: 0 0 28vw;
    height: 36vw;
    margin-top: 2.8vw;
    margin-left: 6vw;
    margin-right: 2vw;
    background-color: #000;
  }

  .yoko-text {
    flex: 1;
    margin: 0 2vw;

    h4 {
      font-size: 2vw;
      margin-bottom: -1vw;
    }
    h5 {
      font-size: 1.6vw;
      margin-bottom: 4vw;
      font-weight: lighter;
    }
    span {
      color: #b41f24;
    }
  }
}

/* 4. Prev／Next ボタン */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
}
.prev-btn { left: 0.5rem; }
.next-btn { right: 0.5rem; }






/* －－ 初期状態 －－ */
.card2-1 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* card3-1 の span と h6 のそれぞれ */
.card3-1 span,
.card3-1 h6 {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* －－ in-view クラスでフェードイン＆スライドアップ －－ */
.card2-1.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* span はすぐに */
.card3-1 span.in-view {
  opacity: 1;
  transition-delay: 0s;
}

/* h6 は少し後から */
.card3-1 h6.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}





/* １．親要素を相対配置に */
.plan2-yoko2 {
  position: relative;
  overflow: hidden; /* はみ出し部分を隠す */
}

/* ２．疑似要素で斜めの光線グラデーションを用意 */
.plan2-yoko2::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 75%
  );
  /* ブレンドモードで下地をキラッと強調 */
  mix-blend-mode: lighten;
  pointer-events: none;
  /* 最初は左上外側に待機 */
  transform: translate(-100%, -100%) rotate(125deg);
  /* アニメーション設定：3秒かけて 1回、3秒おきにループ */
  animation: shine-diag 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* ３．キーフレームで左上 → 右下 に移動 */
@keyframes shine-diag {
  0% {
    transform: translate(-100%, -100%) rotate(125deg);
  }
  50% {
    transform: translate(100%, 100%) rotate(125deg);
  }
  100% {
    /* 50% で止めておいて、残りは何もせずフェードアウトさせる */
    transform: translate(100%, 100%) rotate(125deg);
  }
}





/* ① 初期状態（透明・左に20px移動） */
.arrow-yoko .arrow {
  opacity: 0;
  transform: translateX(-20px);
  transition: 
    opacity 0.6s ease-out, 
    transform 0.6s ease-out;
}

/* ② in-view クラスでフェード＆スライドアップ */
.arrow-yoko .arrow.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ③ 左から順にディレイをかける */
.arrow-yoko .arrow:nth-child(1) { transition-delay: 0s; }
.arrow-yoko .arrow:nth-child(2) { transition-delay: 0.4s; }
.arrow-yoko .arrow:nth-child(3) { transition-delay: 0.8s; }
.arrow-yoko .arrow:nth-child(4) { transition-delay: 1.2s; }





/* ─── 1. .suggestion の高さ調整 ─── */
.consulting .suggestion {
  position: relative;
  overflow: hidden;                            /* はみ出しを隠す */
  text-align: center;
  width: 60vw;
  margin: 3vw 3vw 12vw 12vw;
  background: linear-gradient(to bottom right, #b41f24, #810c10);
  padding: 2vw 0;                              /* 上下のスペースを固定 */
}

/* h5 の余白を上下とも3vwに */
.consulting .suggestion h5 {
  font-size: 3vw;
  margin: 0;                               /* 上下マージンを統一 */
  padding: 0 2vw;                              /* 横パディングは維持 */
}

/* ─── 2. 斜めキラアニメ（元のまま） ─── */
.consulting .suggestion::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 75%
  );
  mix-blend-mode: lighten;
  pointer-events: none;
  transform: translate(-100%, -100%) rotate(125deg);
  animation: shine-diag 4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes shine-diag {
  0%, 10% {
    transform: translate(-100%, -100%) rotate(125deg);
  }
  50% {
    transform: translate(100%, 100%) rotate(125deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(125deg);
  }
}

/* ─── 3. button2 のホバーを軽く白っぽく ─── */
.consulting .button2 {
  transition: filter 0.2s ease-out;
}
.consulting .button2:hover {
  filter: brightness(1.2);
}





/* ─── Form-Btn のホバーを軽く白っぽく ─── */
.form .Form-Btn{
  transition: filter 0.2s ease-out;
}
.form .Form-Btn:hover{
  filter: brightness(1.2);
}








@media(max-width:640px){
  header{
    height: 10vw;
    ul{
      width: 90vw;
      margin-left: 10vw;
      margin-top: 1.2vw;
      padding-left: 0;
    }
    li{
      font-size: 2vw;
    }
    img{
      width: 8vw;
      height: auto;
    }
  }


  .red{
    height: 120vw;
    img{
      width: 150vw;
      height: auto;
      margin-left: 2vw;
    }
  }

  .first-view{
    h2{
      font-size: 11vw;
      margin-top: 10vw;
      line-height: 1;
      br{
      display: none;
    }
    }
    h3{
      font-size: 4.5vw;
    }
    .space{
      margin: 47vw;
    }
    .circle-0{
      margin-top: 85vw;
      height: 15vw;
      h1{
        margin-top: 4vw;
        font-size: 4.5vw;
      }
    }
  }

  .arrow-down {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      color: #ffffff;
      line-height: 1;
      width: 1em;
      height: 1em;
      border: 0.1em solid currentColor;
      border-left: 0;
      border-bottom: 0;
      box-sizing: border-box;
      transform: translateY(-25%) rotate(135deg);
  }

  .arrow-down:after{
      position: absolute;
      content: "";
      display: inline-block;
      vertical-align: middle;
      color: #ffffff;
      line-height: 1;
      width: 1em;
      height: 1em;
      border: 0.1em solid currentColor;
      border-left: 0;
      border-bottom: 0;
      box-sizing: border-box;
      top: 15px;
      right: 10px;
      transform: translateY(-25%) rotate(0deg);
  }

  .red2{
    background: linear-gradient(110deg, #b41f24 0%, #b41f24 78.6%, #ffffff 78.6%, #ffffff 100%);
  }

  .plan2{
    padding: 4vw 8vw;
    padding-bottom: 6vw;
    .card-2{
        display: inline;
        h9{
          font-size: 1.8vw;
        }
      .plan2-yoko2{
        background-color: #2a2a2a;
        box-shadow: 2px 2px 6px 0px #2a2a2a;
        display: flex;
        height: 10vw;
        width: 52.5vw;
        margin: 0 auto;
        margin-top: 4vw;
        margin-bottom: 2vw;
        padding: 0vw;
        .plan2-text2{
            padding: 2vw 3vw; 
            padding-top: 2.2vw;
            padding-left: 3.45vw;
            border: dotted;
            border-right-width: 6px;
            border-top: none;
            border-bottom: none;
            border-left: none;
            border-color: #b41f24;
        }
        .plan2-text3{
            padding: 2vw;
            padding-top: 1.1vw;
            padding-right: 2.24vw;
            border: 5.5px solid;
            background-color: #b41f24;
            border-color: #b41f24;
        }
        .plan2-text4{
            margin-top: -3vw;
        }
        h7{
            color: #ffffff;
            font-size: 1.71vw;
            margin-top: 2.3vw;
        }
        h8{
            color: #ffffff;
            font-size: 3.8vw;
            font-weight: bold;
        }
      }
    }
  }

  .arrow{
    h6{
      margin-top: -3vw;
    }
  }
  .arrow:after{
    right: -9.9vw;
  }
  .flow3{
    h7{
      font-size: 2.5vw;
    }
  }

  .consulting{
    .arrow{
      height: 10vw;
      margin: 2vw;
    }
    .arrow:after{
      height: 4vw;
      right: -57px;
    }

    .arrow-down-yoko{
      .arrow-down{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                color: #ffffff;
                line-height: 1;
                width: 2vw;
                height: 2vw;
                margin: 0 20vw;
                border: 1px solid currentColor;
                border-left: 0;
                border-bottom: 0;
                box-sizing: border-box;
                transform: translateY(-25%) rotate(135deg);
            }

      .arrow-down:after{
          border: 1px solid currentColor;
          border-left: 0;
          border-bottom: 0;
          top: 12px;
          right: 9px;
      }
    }
  }


  footer{
      height: 18vw;
      ul{
        width: 90vw;
        margin-left: 11vw;
        margin-top: 1.2vw;
      }
      li{
        font-size: 2vw;
      }
      img{
        width: 8vw;
        height: auto;
      }
    }

}