.kaso-top{

    
  background-color: #F3F6FB;
}
.kaso-top-g{

  position: absolute;
  width: 690px;
  right:50px;
  top:96px;
}
.kaso-box2 .ser02{
  position: relative;
  top:850px;
}
.kaso-box2 .ser03{
  position: relative;
  top:1600px;
}
.kaso-box2 .ser04{
  position: relative;
  top:2300px;
}
.kaso-box2 .ser05{
  position: relative;
  top:3000px;
}
.ser02 .kaso-ser-und1 {
    width: 121px;
  }
.kaso-box2 .ser06{
  position: relative;
  top:3880px;
}

.ser02 .kaso-ser-01{
    top:50px;
}
.ser02 .kaso-ser-02{
    top:35px;
}
.ser03 .kaso-ser-01{
    top:0px;
}
.ser03 .kaso-ser-02{
    top:35px;
}
.ser02 .kaso-ser-und{
gap:0;
}
.ser02 .kaso-ser-und2{
      width: 398px;
flex: none;
}
.ser02 .kaso-ser-01,
.ser04 .kaso-ser-01,
.ser06 .kaso-ser-01 {
    right: 0px;
    left: 0px;
}
.ser05 .kaso-ser-back{
  margin-left: -100px;
      width: 354px;
}
.ser05 .kaso-ser-02 {
      height: 712px;
}
.ser05 .kaso-ser-01 {
    top: 220px;
  }
.ser05 .kaso-ser-und2 {
  column-gap: 63px;
  width: 483px;
      flex: none;
  }
  .ser05 .kaso-ser-und {
    gap:0;
  }
.ser02 .kaso-ser-02 {
  right: 0px;           /* 左端からの距離 */
left: min(585px, 50%);        /* 右端からの距離 */
    height: 635px;
    top: 0px;
}
.ser04 .kaso-ser-02 {
  right: 0px;           /* 左端からの距離 */
left: 585px;
    height: 635px;
    top: 90px;
}
.ser06 .kaso-ser-02 {
  right: 0px;           /* 左端からの距離 */
left: 585px;
    height: 732px;
    top: 100px;
}
.ser06 .kaso-ser-back {
      width: 273px;
      margin-left: 100px;
}
.ser02 .kaso-ser-back {
  margin-left: 100px;
    position: absolute;
    width: 295px;
}
.ser04 .kaso-ser-back {
  margin-left: 100px;
    position: absolute;
    width: 350px;
}
.ser04 .kaso-ser-und2 {
      column-count: 3;
}
.ser03 .kaso-ser-02 {
    height: 645px;
}
.ser03 .kaso-ser-back {
  margin-left: -100px;
    width: 320px;
}
.kaso-ser-01{
  background-color: white;
  z-index: 500;
  top:130px;
      right: 0px;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
    width: 706px;
    border: 2px solid #0B2E74;
    padding: 54px;
}
.kaso-ser-02{
  position: absolute;   /* 相対位置ではなく絶対位置が必要 */
  top: 165px;           /* 上からの距離 */
  left: 0px;           /* 左端からの距離 */
  
  right: min(585px, 50%);        /* 右端からの距離 */
  background-color: var(--brand-blue);
  height: 594px;
}
.kaso-ser-back{
 position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  width: 250px;
  transform: translate(-50%, -50%);
}
.kaso-ser-t1{
  font-weight: 500;
  font-size: 18px;
  color: var(--brand-blue);
  margin-bottom: 1em;
}
.kaso-box2{
height: 4881px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.kaso-ser-t2 {
  width: fit-content;
  letter-spacing: 12px;
  font-size: 45px;
  font-family: 'Noto Serif', serif;
  font-weight: bold;
  position: relative;
}

.kaso-ser-t2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 1px;
  width: 0;            /* 初期は線なし */
  background-color: #cd8383;
    transition: width 0.5s ease;
    transition-delay: calc(var(--index) * 0.2s);
}

.kaso-ser-t2.active::after {
  width: 100%;         /* 画面に入ったら文字幅まで伸ばす */
}

.kaso-ser-t3{
  margin-bottom: 1.5em;
  border-bottom: 1px solid black;
  padding-bottom: 1.5em;
  margin-top: 1.5em;
  font-size: 16px;
  line-height: 38px;
}
/* 親を2カラムに */
.kaso-ser-und {
  display: flex;
  gap: 40px; /* 左右の余白調整 */
  align-items: flex-start;
}
.kaso-ser-und1 {
    width: 125px;
color: #0B2E74;
font-size: 19px;
font-weight: 500;
}

.kaso-ser-und2 {
  flex: 1;
  column-count: 2;     /* 2カラム */
  column-gap: 20px;    /* カラム間の余白 */
  flex-wrap: wrap;   /* 折り返しを有効に */

  list-style: none;
  padding: 0;
  margin: 0;
}

.kaso-ser-und2 li {
  font-weight: bold;
  white-space: nowrap;
    margin-bottom: 10px;  /* 下方向のスペース（疑似gap） */
  position: relative;
  padding-left: 20px;   /* ●のための余白 */
  font-size: 1.4rem;
  width: calc(50% - 10px); /* 2カラムにする（gap分を引く） */
}
/* 頭に●を付ける */
.kaso-ser-und2 li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--brand-blue);       /* ●の色 */
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.t3no{
  padding-bottom: 0px;
border-bottom: none;
}
.kaso-ser-und1-2{
    color: var(--brand-blue);
  text-align: center;

}
.kaso-ser-und1-2 li:nth-child(1){
  font-size: 18px;
}
.kaso-ser-und1-2 li:nth-child(2){
  font-weight: bold;
  font-size: 32px;
}
.kaso-ser-und1-2 li:nth-child(3){
  margin-top: 1.1em;
  font-size: 12px;
}
.kaso-ser-und1 {
    width: 225px;
color: #0B2E74;
font-size: 19px;

}
.kaso-ser-con .cont-button {

      padding: 3rem 1em;
    line-height: 1.5em;
    min-width: 190px;
  }
.kaso-ser-con{
  align-items: center;
  
justify-content: space-between; /* 左右の端に配置 */
  padding: 30px 50px;
  border: 4px solid #D9D9D9;
  display: flex;
}

@media screen and (max-width: 768px) {

.kaso-top-g {
    width: 204px;
    right: 5px;
    top: 177px;
}
.kaso-ser-01 {

      padding: 20px;
       width: calc(100% - 40px); /* 左右20pxずつの余白を確保 */
  position: relative;
      top: 0px;
      margin: 0 auto;
}
.kaso-ser-und {
    gap: 10px;
    flex-direction: column;
  }
.kaso-ser-t3 {
    font-size: 13px;
    line-height: 2em;}
.kaso-ser-t1 {
    font-size: 11px;
  }
  .kaso-ser-t2 {
        letter-spacing: 6px;
    font-size: 28px;}

.kaso-ser-und1 {
    font-size: 14px;
}
.kaso-ser-und2 {
  flex: initial;          /* flexを解除 */
  column-count: initial;  /* 2カラムを解除 */
  column-gap: 0;          /* カラム間のギャップを解除 */
}
.kaso-ser-und2 li::before {
    line-height: 0.6rem;}
.kaso-ser-und2 li {
      padding-left: 15px;
  letter-spacing: 0px;
  display: inline-block;
      margin-bottom: 4px;
    font-size: 11px;
    width: auto;
}
.kaso-ser-02 {
    right: 30px;
  }
.kaso-ser-back {
      width: 142px;
    margin-left: auto;
    top:auto;
    margin-top:auto;

        transform: translate(-50%, 0%);
            bottom: 19px;

}
.l-m{
margin-left: 1em;
}
.kaso-box2 .ser02 {
    top: 0px;
}
.ser01 .kaso-ser-00 {
          margin-top: 85px;
        top: 0px;
}
.ser02 .kaso-ser-00 {
        padding: 0;
            margin-top: 250px;
    }
.ser02 .kaso-ser-01 {
    top: 0px;
}
.ser02 .kaso-ser-und2 {
    width: auto;
}
.ser02 .kaso-ser-02 {
    height: 600px;
    top: 115px;
    right: 0px;
    left: 35px;
}
  .ser01 .kaso-ser-back {
        width: 126px;
        bottom: 19px;
    }
    
.ser02 .kaso-ser-back {
    margin-left: auto;
            bottom: 19px;
    width: 156px;
}
.kaso-box2 .ser03 {
    position: relative;
    top: auto;
            margin-top: 250px;
}
     .ser03 .kaso-ser-00 {
        top: 0px;
    }
.ser03 .kaso-ser-02 {
        height: 700px;
    top: 115px;
}
.ser03 .kaso-ser-back {
    margin-left: auto;
    top:auto;
    margin-top:auto;
    width: 222px;
        transform: translate(-50%, 0%);
            bottom: 35px;
    width: 208px;
  }
.kaso-box2 .ser04 {
    margin-top: 250px;
  top:0;
}
.ser04 .kaso-ser-02 {
    right: 0px;
left: 30px;
    height: 535px;
      top: 115px;
}
    .ser04 .kaso-ser-00 {
        top: 0px;
    }
.ser04 .kaso-ser-back {
    margin-left: auto;
    top:auto;
    margin-top:auto;
    width: 222px;
        transform: translate(-50%, 0%);
            bottom: 35px;
}
.kaso-box2 .ser05 {
          margin-top: 250px;
    top: 0px;
}
.ser05 .kaso-ser-01 {
    top: 0px;
}
  .ser05 .kaso-ser-00 {
        top: 0;
    }
.ser05 .kaso-ser-02 {
    top: 115px;
        height: 648px;
  }
  .ser04 .kaso-ser-und2 {
  column-count: initial;
}
  .ser05 .kaso-ser-back {
        margin-top: 163px;
        margin-left: auto;
        width: 203px;
                bottom: 28px;
}
.ser05 .kaso-ser-und2 {
    width: auto;
  }
  .kaso-box2 .ser06 {
    margin-top: 250px;
    top: 0px;
}
    .kaso-box2 .kaso-ser-00 {
        top: 0px;
    }
.ser06 .kaso-ser-02 {
    right: 0px;
    left: 30px;
    height: 592px;
    top: 115px;
}
.kaso-box2 {
        padding-bottom: 300px;
        height: auto;
  }
.ser06 .kaso-ser-back {
    width: 151px;
    margin-left: auto;
            bottom: 28px;
  }
  .kaso-ser-con {
        padding: 20px 20px;
    flex-direction: column;
  }
  .kaso-ser-und1-2 li:nth-child(1) {
    font-size: 14px;
}
.kaso-ser-und1-2 li:nth-child(2) {
  letter-spacing: 0px;
    font-size: 30px;
    white-space: nowrap;
}
.kaso-ser-und1-2 li:nth-child(3) {
    margin-bottom: 1em;
    font-size: 11px;
}
.kaso-ser-con .cont-button {
    min-width: auto;
    width: 168px;
        padding: 2rem 1em;
    line-height: 1.2em;
}



}