@charset "UTF-8";

/* ===== TOPページのみ：1440基準スケーリング ===== */
@media screen and (min-width: 769px) {
  .body {
    min-width: 1440px; 
  }
}
@media screen and (min-width: 1921px) {
  .body {
    margin-left: auto;
    margin-right: auto; 
  }
}

.sp_header{
  .small{
    font-size: 3.3vw;
  }
  .logo_box .logo_text{
    padding-top: 0;
  }
}
.nav{
  margin-bottom: 100px;
}
.main_wrapper {
  padding: 0 ;
  position: relative;
  z-index: 0;
  min-width: 1280px;

  @media screen and (max-width: 768px) {
    min-width: initial;
    max-width: initial;
    padding: 0;
    margin-bottom: 20vw;
  }
}

.main_image {
  position: relative;
  max-width: 1440px;
  aspect-ratio: 1440/800;
  padding-top: clamp(308px, 24.72vw, 356px);
  margin: 0 auto;
  box-sizing: border-box;
  background: url(/kagoshima/images/index/mainvisual01.webp) center top/cover no-repeat;
  overflow: hidden;

  /* ===== 背景フェード用ラッパー ===== */
  .mv_bgs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .mv_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .mv_bg01 { background-image: url(/kagoshima/images/index/mainvisual01.webp); }
  .mv_bg02 { background-image: url(/kagoshima/images/index/mainvisual02.webp); }
  .mv_bg03 { background-image: url(/kagoshima/images/index/mainvisual03.webp); }
  .mv_bg.is-prev   { opacity: 1; z-index: 1; }
  .mv_bg.is-active { opacity: 1; z-index: 2; }

  .inner {
    padding: 0 30px 0 50px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .text {
    width: 526px;
    height: 356px;
    position: absolute;
    bottom: 265px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* ===== テキスト画像のクロスフェード（PC/SP共通） ===== */
  .text.pc { opacity: 0; transition: opacity 1.2s ease; }
  .text.pc.is-active { opacity: 1; }
  .text.sp { opacity: 0; transition: opacity 1.2s ease; }
  .text.sp.is-active { opacity: 1; }

  /* ===== main_text02 / main_text03（PC）のサイズ・配置 ===== */
  .text02 {
    width: 863px;
    height: 231px;
    bottom: 275px;
    left: 35%;
  }
  .text03 {
    width: 791px;
    height: 295px;
    bottom: 281px;
    left: 30%;
  }

  .gridbox{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 5px;
    max-width: 818px;
    filter:drop-shadow(0px 4px 24px rgba(0, 0, 0, 0.25));
    position: absolute;
    bottom: 30px;
    left: 95px;
    .box{
      width: 200px;
      height: 200px;
    }
  }

  .mv_timetable{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 440px;
      height: 170px;
    }

  @media screen and (min-width: 1441px) {
    max-width: none;
    width: 100%;

    .text {
      width: 29vw;
      height: auto;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%, 50%);
      text-align: center;
    }

    .text02, .text03 {
      height: auto;
      left: 35%;
      bottom: 50%;
      transform: translate(-50%, 50%);
    }
    .text02 { width: 47.6vw; }
    .text03 { width: 43.6vw; }

    .gridbox{
      column-gap: 1vw;
      max-width: 41vw;
      bottom: 1vw;
      left: 5vw;
      .box{
        width: 10vw;
        height: 10vw;
      }
    }

    .mv_timetable{
      width: 21vw;
      height: 8vw;
    }
  }

  @media screen and (max-width: 768px) {
    width: initial;
    height: 146.7vw;            /* 背景画像 375×550 の比率に合わせて表示（550/375≒146.7vw） */
    padding-top: 27.3vw;
    aspect-ratio: initial;
    box-sizing: border-box;
    /* フォールバック（JS無効時は1枚目を表示） */
    background: url(/kagoshima/images/index/mainvisual01_sp.webp) center top/cover no-repeat;
    overflow: visible;
    position: relative;

    /* SPは背景レイヤーを表示し、画像をSP版へ差し替え */
    .mv_bgs { display: block; }
    .mv_bg01 { background-image: url(/kagoshima/images/index/mainvisual01_sp.webp); }
    .mv_bg02 { background-image: url(/kagoshima/images/index/mainvisual02_sp.webp); }
    .mv_bg03 { background-image: url(/kagoshima/images/index/mainvisual03_sp.webp); }

    .inner {
      padding: 0;
    }

    /* SPテキスト：サイズはvw（基準375px）。横は中央、縦bottomは目安値（調整可） */
    .text.text_sp01 { width: 76vw;   height: 57.6vw; bottom: 29vw; left: 40%;}  /* 285×216 */
    .text.text_sp02 { width: 94.7vw; height: 44vw;   bottom: 35vw; left: 50%;}  /* 329×165 */
    .text.text_sp03 { width: 97vw;   height: 56.8vw; bottom: 35vw; }  /* 330×213 */
  }

  .sp_c{
    position: absolute;
    bottom: -6vw;
    left: 50%;
    width: 100%;
    max-width: 97.3vw;
    transform: translateX(-50%);
  }
}


/* sec01 */
.sec01 {
  margin-bottom: 150px;
  .inner{
    padding: 0 120px;
  }
  .news_body {
    display: flex;
    justify-content: center;
    column-gap: 50px;
    align-items: stretch; 
  }

  .news_col {
    display: flex;
    flex-direction: column;
  }
  .news_col:first-child {
    width: 35%;
    .about_btn{
      width: 260px;
      &::after{
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        height: 32px;
        background: url(/kagoshima/images/common/yajirushi.webp) center / contain no-repeat;
      }
    }
  }

  .news_divider {
    align-self: stretch;
    width: 1px;
    background-color: #444444;
  }

  .col_title {
    font-size: 32px;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
  }

  .news_list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 28px;
  }

  .news_item a {
    display: block;
    color: #333333;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .news_item a:hover {
    opacity: 0.7;
  }

  .news_date {
    margin: 0 0 6px;
    letter-spacing: 0.1em;
    color: #777777;
  }

  .news_text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .about_wrapper {
    margin-top: auto;
  }
  .about_btn{
    z-index: 1;
    &::before{
      width: 110px;
      height: 88px;
      left: 0;
      bottom: 0;
      z-index: -1;
      background: url(/kagoshima/images/index/pink_btn.webp) center / contain no-repeat;
    }

  }

  /* 吹き出し（じぐざぐ配置） */
  .info_bubbles {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;

    .bubble:nth-child(even) {
      margin-top: 40px; 
    }
  }

  /* 診療時間の表 */
  .info_timetable {
    display: block;
    width: 687px;
    height: 230px;
    margin-bottom: 15px;
  }

  /* 住所（テキスト） */
  .info_address {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.08em;
    color: #333333;
  }

  @media screen and (max-width: 768px) {
    margin-bottom: 21.33vw;

    .inner {
      padding: 0 5vw;
    }

    /* 横並び → 縦並び */
    .news_body {
      flex-direction: column;
    }

    .news_col:first-child {
      width: 100%;
      margin-bottom: 15vw;

      .about_btn {
        width: 69.33vw;

        &::after {
          right: 2.67vw;
          width: 12vw;
          height: 8.53vw;
        }
      }
    }

    .news_divider {
      display: none;
    }

    .col_title {
      font-size: 6.4vw;
      margin-bottom: 5vw;
    }

    .news_list {
      margin: 0 0 10.67vw;
      row-gap: 3vw;
    }

    .news_date {
      margin: 0 ;
      font-size: 3.73vw;
    }

    .news_text {
      font-size: 4vw;
    }

    .about_wrapper{
      margin: 0 auto;
    }
    .about_btn::before {
      width: 29.33vw;
      height: 23.47vw;
    }

    /* 吹き出し */
    /* 吹き出し */
    .info_bubbles {
      margin-bottom: 2.67vw;
      flex-wrap: wrap;
      justify-content: flex-start; 
      padding-left: 1vw;
      column-gap: 8vw;
      row-gap: 1vw;
      align-items: flex-end;

      .bubble {
        height: auto;
        min-width: initial;
      }
      .bubble:nth-child(1) { width: 35vw; }
      .bubble:nth-child(2) { width: 33vw; }
      .bubble:nth-child(3) {
        width: 35.2vw;
        margin-left: 10vw; 
      }
      .bubble:nth-child(4) { width: 33.5vw; }

      .bubble:nth-child(even) {
        margin-top: 0;
      }
    }
    /* 診療時間の表 */
    .info_timetable {
      width: 89.33vw;
      height: auto;
      margin-bottom: 4vw;
    }

    /* 住所 */
    .info_address {
      line-height: 1.5;
      font-weight: bold;
      font-size: 4vw;
      padding-left: 5vw;
    }
  }
}

/* sec02 */
.sec02{
  margin-bottom: 150px;
  .inner{
    padding: 0 115px;
  }
  .flexbox{
    column-gap: 30px;
  }
  .textbox{
    width: 99%;
  }
  .box_title{
    font-weight: bold;
    font-family: serif;
    font-size: clamp(44.44px, 3.472vw, 50px);
    line-height: 1.5;
    margin-bottom: 50px;
  }
  .box_text{
    margin-bottom: 65px;
  }
  .imagebox{
    width: 100%;
  }
  .about_wrapper{
    display: flex;
    justify-content: flex-start;
  }
  .about_btn{
    width: 320px;
    &::after{
      width: 110px;
      height: 88px;
      left: 0;
      bottom: 0;
      background: url(/kagoshima/images/index/pink_btn.webp) center / contain no-repeat;
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 21.33vw;

    .inner {
      padding: 0 3vw;
    }

    .flexbox {
      flex-direction: column;
    }

    .textbox {
      display: contents;
    }
    .box_title    { order: 1; }
    .imagebox     { order: 2; }
    .box_text     { order: 3; }
    .about_wrapper { order: 4; }

    .box_title {
      font-size: 7.47vw;
      margin-bottom: 2vw;
    }

    .box_text {
      margin-bottom: 10vw;
      font-size: 4vw;
      line-height: 1.8;
    }

    .imagebox img {
      width: 100%;
      height: auto;
    }

    .about_wrapper{
      justify-content: center;
    }
    .about_btn {
      width: 69.33vw;
      z-index: 1;

      &::after {
        z-index: -1;
        width: 20.33vw;
        height: 16.47vw;
      }
    }
  }
}

/* sec03 */
.sec03{
  margin-bottom: 100px;
  background-color: #F6F6F6;
  padding: 95px 0 165px;
  position: relative;
  z-index: 1;
  &::before{
    content: "";
    position: absolute;
    width: 532px;
    height: 252px;
    left: 0;
    top: 0;
    z-index: -1;
    background: url(/kagoshima/images/index/sec03_1.webp) center / contain no-repeat;
  }
  &::after{
    content: "";
    position: absolute;
    width: 532px;
    height: 250px;
    right: 0;
    top: 0;
    z-index: -1;
    background: url(/kagoshima/images/index/sec03_2.webp) center / contain no-repeat;
  }
  .inner{
    padding: 0;
  }
  .sec03_title{
    text-align: center;
    font-family: serif;
    font-weight: bold;
    font-size: 42px;
    letter-spacing: 0.2em;
    margin-bottom: 70px;
    .sp_black{
      font-weight: bold;
    }
    .blue{
      font-size: 62px;
      font-weight: bold;
      font-family: serif;
      color: #4DBACD;
    }
    .pink{
      font-size: 35px;
      font-weight: bold;
      font-family: serif;
      color: #FF748B;
    }
  }
  .cont01{
    margin-bottom: 75px;
    padding: 0 80px;
    .flexbox{
      column-gap: 55px;
      align-items: flex-start;
    }
    .imagebox{
      margin-bottom: 15px;
      text-align: center;
    }
    .box_title{
      font-size: 28px;
      font-weight: bold;
      font-family: serif;
      text-align: center;
      margin-bottom: 30px;
    }
    .gridbox{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 15px;
    }
    .box:nth-of-type(2){
      width: 470px;
      .long{
        padding-right: 20px;
        letter-spacing: 0.05em;
        font-feature-settings: "palt";
      }
      .menu::after{
        background: url(/kagoshima/images/index/green_icon.webp) center / contain no-repeat;
      }
    }
    .box:nth-of-type(3){
      .menu::after{
        background: url(/kagoshima/images/index/blue_icon.webp) center / contain no-repeat;
      }
    }

    /* 1列メニュー：a を283pxに絞って中央寄せ */
    .menu_text a{
      display: block;
      max-width: 283px;
      margin: 0 auto 15px;
    }

    /* グリッド：a はセル幅いっぱいに伸ばす */
    .gridbox a{
      display: block;
      margin: 0 0 15px;
    }

    .menu{
      font-weight: bold;
      text-align: center;
      border-bottom: 1px solid #444;
      padding-bottom: 15px;
      max-width: none;     /* 283px は a 側に移動 */
      margin: 0;           /* 余白は a 側に移動 */
      position: relative;
      &::after{
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        right: 0;
        bottom: 50%;
        transform: translateY(30%);
        background: url(/kagoshima/images/index/pink_icon.webp) center / contain no-repeat;
      }
    }
  }
  .cont02{
    margin-bottom: 240px;
    padding: 0 80px;
    .flexbox{
      column-gap: 35px;
    }
    .right{
      .about_wrapper:nth-of-type(1){
        margin-bottom: 20px;
      }
      .about_btn::after{
        content: "";
        position: absolute;
        width: 114px;
        height: 88px;
        left: -2px;
        bottom: 0;
        background: url(/kagoshima/images/index/pink_btn.webp) center / contain no-repeat;
      }
    }
  }
  .cont03, .cont05 {
    margin: 0 auto 200px;
    box-sizing: border-box;

    *,
    *::before,
    *::after { box-sizing: border-box; }

    /* ---- 上段：テキスト＋メイン画像 ---- */
      .flexbox {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        column-gap: 30px;
      }
      .textbox {
        max-width: 600px;
      }
      .box_title {
        font-size: 40px;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 25px;
        font-family: serif;
        background-image: radial-gradient(circle, #FF748B 3.1px, transparent 3.5px);
        background-size: 13px 7px;
        background-repeat: space no-repeat;
        background-position: center bottom;
        padding-bottom: 20px;
        padding-left: 40px;
        .sub {
          font-size: 25px;
          font-family: "Noto Sans JP";
          display: inline-block; 
          font-weight: 600;
          margin-bottom: 10px;
        }
      }

      .imagebox {
          position: relative;
          max-width: 682px;
          flex-shrink: 0;
      }
      .main_img {
          display: block;
          width: 100%;
          height: 534px;
          object-fit: cover;
      }

      /* cont03 */
      .balloon {
          position: absolute;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-weight: 700;
          line-height: 1.5;
          letter-spacing: 0.1em;
      }
      .balloon_white {
          width: 219px;
          height: 219px;
          top: -24px;
          left: 40px;
          background: rgba(246,246,246,0.9);
          color: #FF748B;
          font-size: 23px;
          z-index: 3;
      }
      .balloon_pink {
          width: 174px;
          height: 174px;
          top: 86px;
          left: 216px;
          background: #F29DAB;
          color: #fff;
          font-size: 23px;
          z-index: 4;
      }
      .brush {
          position: absolute;
          top: -16px;
          left: 223px;
          width: 78px;
          height: 140px;
          transform-origin: center;
          z-index: 5;
          pointer-events: none;
      }
      .gridbox {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        position: relative;
        z-index: 6;
        max-width: 1184px;
        margin: -80px auto;
        .card {
          position: relative;
          padding-top: 40px; 
          display: block;
          text-decoration: none;
      }

      /* カラーボックス（テキスト側・下に敷く） */
      .card_body {
        position: relative;
        z-index: 1;
        border-radius: 8px;
        padding: 116px 22px 30px;
        text-align: center;
        filter:drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
      }

      .card_img {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 200px;
        overflow: hidden;
        z-index: 2;

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .card_sub {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
      }
      .card_title {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.5;
      }

      /* 右下の矢印 */
      .card_arrow {
          position: absolute;
          right: 18px;
          bottom: 16px;
          width: 51px;
          height: 38px;

          svg { width: 100%; height: 100%; display: block; }
      }

      /* カードごとの背景色 */
      .card01 .card_body { background: rgba(251,216,144,0.8); }  /* 子ども：イエロー */
      .card02 .card_body { background: rgba(251,183,144,0.8); }  /* 中高生：オレンジ */
      .card03 .card_body { background: rgba(249,145,162,0.8); }  /* 大人：ピンク */
      }

      /* cont05 */
      .balloon04 {
        position: absolute;
        width: 188px; 
        height: 188px;
        bottom: 90px; 
        left: 120px;
      }
      .balloon05 {
        position: absolute;
        width: 144px; 
        height: 144px;
        top: 130px; 
        left: 282px;
        z-index: 3;
      }
      .balloon06 {
        position: absolute;
        width: 186px; 
        height: 186px;
        bottom: 40px; 
        right: 95px;
        z-index: 3;
      }

      .cont05_flex{
        margin: 60px 0 130px;
        .flexbox{
          justify-content: center;
          column-gap: 70px;
        }
        .box{
          display: flex;
          background-color: #F7B08B;
          column-gap: 10px;
          width: 442px;
          height: 131px;
        }
        .imagebox{
          position: relative;
          bottom: 20px;
          left: -35px;
        }
        .textbox{
          margin-left: -30px;
        }
        .box_text{
          font-weight: bold;
          padding-top: 15px;
        }
        .about_wrapper{
          display: flex;
          justify-content: flex-start;
        }
        .about_btn{
          background-color: transparent;
          font-size: 20px;
          display: flex;
          flex-direction: column;
          padding-right: 40px;
          height: initial;
          border-radius: 0;
          padding: 0;
          width: initial;
          &::before{
            right: -50px;
          }
          span{
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
  }
  .cont05{
    .box_title{
      background-image: radial-gradient(circle, #F49463 3.1px, transparent 3.5px);
    }
  }

  .cont04, .cont06{
    margin-bottom: 120px;
    .flexbox {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        column-gap: 30px;

        /* --- 左：画像＋丸 --- */
        .imagebox {
          position: relative;
          max-width: 682px;
          flex-shrink: 0;
        }
        .main_img {
          display: block;
          width: 100%;
          height: 534px;
          object-fit: cover;
        }
        .balloon01 {
          position: absolute;
          width: 226px; 
          height: 194px;
          top: 120px; 
          left: 10px;
          z-index: 4;
        }
        .balloon02 {
          position: absolute;
          width: 252px; 
          height: 252px;
          bottom: 15px; 
          left: 83px;
          z-index: 3;
        }
        .balloon03 {
          position: absolute;
          width: 216px; 
          height: 257px;
          bottom: 0; 
          right: 0;
          z-index: 3;
        }

        /* --- 右：テキスト（cont03と同じclassを使用） --- */
        .textbox {
            width: 640px;
            padding-top: 14px;
        }
        
        .box_title {
          font-size: 40px;
          font-weight: bold;
          line-height: 1.5;
          margin-bottom: 25px;
          font-family: serif;
          background-image: radial-gradient(circle, #4DBACD 3.1px, transparent 3.5px);
          background-size: 13px 7px;
          background-repeat: space no-repeat;
          background-position: center bottom;
          padding-bottom: 20px;
            .sub {
              font-size: 25px;
              font-family: "Noto Sans JP";
              font-weight: 600;
              display: inline-block;
              margin-bottom: 10px;
            }
            .small {
                font-size: 26px;
                font-weight: bold;
                font-family: serif;
            }
        }
        .box_text {
            font-size: 15px;
            line-height: 2.1;
            color: #555;
        }
    }

    .gridbox{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 55px;
      max-width: 1184px;
      margin: 40px auto;
      .box{
        background-color: #E2EEEF;
        padding: 30px 0 0 30px;
        box-shadow: 0px 30px 24px -23px rgba(0, 0, 0, 0.25);
        height: 95%;
      }
      .g_title{
        font-size: 21px;
        font-weight: bold;
        margin-bottom: 60px;
      }
      .g_flexbox{
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-bottom: 20px;
      }
      .otona::before{
        position: absolute;
        content: "";
        width: 328px;
        height: 153px;
        right: -18px;
        bottom: 50%;
        transform: translateY(40%);
        background: url(/kagoshima/images/index/sec03_otona.webp) center / contain no-repeat;
      }
      .kodomo::before{
        position: absolute;
        content: "";
        width: 328px;
        height: 153px;
        right: -18px;
        bottom: 50%;
        transform: translateY(40%);
        background: url(/kagoshima/images/index/sec03_kodomo.webp) center / contain no-repeat;
      }
      .top{
        font-family: serif;
        font-weight: bold;
        font-size: 32px;
        line-height: 1.3;
      }
      .bottom{
        color: #4DBACD;
        opacity: 50%;
        font-size: 58px;
        font-weight: lighter;
        line-height: 1;
      }
      .box_text{
        padding: 0 35px 0 5px;
      }
      .about_wrapper{
        display: flex;
        justify-content: flex-end;
      }
      .about_btn{
        background-color: transparent;
        width: initial;
        padding-right: 80px;
        font-size: 23px;
      }
      
      .box_green{
        background-color: #E2EFEA;

        .textbox{
          width: 290px;
          z-index: 1;
        }
        .bottom{
          color: #4DCDA9;
        }
      }
    }

    .balloon_green{
      position: absolute;
      border-radius: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 277px;
      height: 277px;
      top: -40px;
      right: -4px;
      text-align: center;
      line-height: 1.8;
      letter-spacing: 0.1em;
      background-image: radial-gradient(circle farthest-side, rgba(60, 177, 153, 1), rgba(77, 205, 179, 1) 80%);
      color: #fff;
      font-weight: bold;
      font-size: 25px;
      z-index: 3;
    }
  }
  .cont06{
    margin-bottom: 0;
    .flexbox{
      .box_title{
        background-image: radial-gradient(circle, #4DCDB3 3.1px, transparent 3.5px);
      }
    }
    .about_wrapper{
      display: flex;
      justify-content: center;
      padding-top: 60px;
    }
    .about_btn{
      background-color: transparent;
      width: initial;
      padding-right: 80px;
      font-size: 23px;
      height: auto;
      &::before{
        background: url(/kagoshima/images/index/yajirushi_green.webp) center / contain no-repeat;
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;
    padding: 8vw 0;

    &::before { 
      width: 100vw; 
      height: 42.68vw; 
      left: 50%;
      transform: translateX(-50%);
      background: url(/kagoshima/images/index/sec03_01_sp.webp) center / contain no-repeat;}
    &::after  { 
      display: none;
    }

    .sec03_title {
      font-size: 4.8vw;
      margin-bottom: 13.8vw;
      line-height: 1.3;
      .blue, .pink { 
        font-size: 8vw; 
      }
      .sp_black{
        font-size: 7.5vw;
        font-weight: bold;
      }
    }

    /* ---- cont01 ---- */
    .cont01 {
      margin-bottom: 13.33vw;
      padding: 0 5.33vw;
      .flexbox { 
        flex-direction: column; 
        row-gap: 10vw; 
        column-gap: 0; 
      }
      .imagebox { 
        margin-bottom: 4vw; 
      }
      .imagebox img { 
        width: 100%; height: auto; 
      }
      .box_title { 
        font-size: 5.8vw; 
        margin-bottom: 6.4vw; 
      }
      .gridbox { 
        column-gap: 4vw; 
      }
      .box:nth-of-type(2) { 
        width: 100%; 
        .long{
          padding-right: 5vw;
        }
        .menu{
          height: 8vw;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .box_2{
        .menu{
          padding-right: 5vw;
        }
      }
      .menu {
        max-width: 100%;
        font-size: 3.8vw;
        padding-bottom: 5vw;
        margin: 0 auto 5vw;
        line-height: 1.3;
        &::after { 
          width: 8.53vw; height: 8.53vw; 
        }
      }
    }

    /* ---- cont02 ---- */
    .cont02 {
      margin-bottom: 21.33vw;
      padding: 0 5vw;
      .flexbox { 
        flex-direction: column; 
        row-gap: 8vw; 
        column-gap: 0; 
      }
      .left img { 
        width: 100%; 
        height: auto; 
      }
      .right{
        display: flex;
        column-gap: 3vw;
      }
      .right .about_wrapper:nth-of-type(1) { 
        margin-bottom: 8vw; 
      }
      .right .about_btn::after { 
        width: 20.33vw;
        height: 16.47vw;
        z-index: -1;
        display: none;
      }
      .right .about_btn::before{
        content: ">";
        color: #FF748B;
        font-size: 6vw;
        right: 2vw;
        background: none;
        width: initial;
        height: initial;
      }

      .about_btn{
        width: 42.6vw;
        z-index: 1;
        font-size: 3.8vw;
        padding-right: 3vw;
      }

    }

    /* ---- cont03・cont05 共通 ---- */
    .cont03, .cont05 {
      margin: 0 auto 21.33vw;
      padding: 0;

      .flexbox { 
        flex-direction: column-reverse; 
        column-gap: 0; 
      }
      .textbox { 
        max-width: 95%; 
        margin: 0 auto;
      }
      .box_title {
        font-size: 6.4vw;
        padding-left: 0;
        padding-bottom: 3vw;
        margin-bottom: 3vw;
        text-align: center;
        background-size: 10px 7px;
        background-image: radial-gradient(circle, #FF748B 2.1px, transparent 2.5px);
        .sub { 
          font-size: 4.8vw; 
          margin-bottom: 2vw;
        }
      }
      .imagebox { 
        max-width: 100%; 
        width: 100%; 
      }
      .main_img { 
        height: auto; 
      }
      .box_text {
         font-size: 4vw; 
         line-height: 1.9; 
        }

      /* cont03 バルーン */
      .balloon_white { 
        width: 39.2vw; 
        height: 39.2vw; 
        top: initial;
        bottom: 1vw; 
        left: 1vw; 
        font-size: 4vw; 
      }
      .balloon_pink  { 
        width: 31.5vw; 
        height: 31.5vw; 
        top: initial;
        bottom: -1vw; 
        left: 38.3vw;  
        font-size: 4vw; 
      }
      .brush { 
        width: 16.22vw; 
        height: 21vw;
        top: 18.9vw; 
        left: 4.21vw; 
        min-width: initial;
      }

      /* cont03 3カード → 縦1列 */
      .gridbox {
        grid-template-columns: 1fr;
        gap: 22vw 0vw;
        max-width: 100%;
        margin: 23vw auto 0;
        .card { 
          padding-top: 10.67vw; 
        }
        .card_body { 
          width: 88%;
          padding: 20vw 5.87vw 8vw; 
          margin: 0 auto;
        }
        .card_img { 
          top: -16vw; 
          width: 64vw; height: 42.8vw; 
        }
        .card_sub { 
          font-size: 4.27vw; 
          margin-bottom: 1.33vw; 
        }
        .card_title { 
          font-size: 4.8vw; 
        }
        .card_arrow { 
          right: 4.8vw; 
          bottom: 4.27vw; 
          width: 13.6vw;
          height: 10.13vw; 
        }
      }

      /* cont05 バルーン */
      .balloon04 { width: 37.3vw; height: 37.3vw; bottom: 3vw; left: 11vw; }
      .balloon05 { width: 31.5vw; height: 31.5vw; top: -3vw; left: 36.94vw; }
      .balloon06 { width: 36vw; height: 36vw; bottom: -3vw; right: 2vw; }

      /* cont05 下段カード → 縦積み */
      .cont05_flex {
      margin: 16vw 0 21.33vw;
      padding: 0 5vw;
      .flexbox { flex-direction: column; row-gap: 10vw; column-gap: 0; }

      .box {
        position: relative;        /* ← 必須：これが無いとボタンが全幅にならない */
        width: 88vw;
        height: 42.6vw;
        column-gap: 2.67vw;
      }
      .imagebox { bottom: 7vw; left: -5vw; width: 52%; }
      .imagebox img { width: 37.2vw; height: auto; }
      .textbox { margin-left: -6vw; position: static;}
      .box_text { padding-top: 7vw; font-size: 4vw; font-feature-settings: "palt"; line-height: 1.5;}

      /* ボタンをカード全幅で下部に置き、ラベルを中央へ */
      .about_wrapper {
        position: absolute;
        left: 0;                   /* ← 5vw → 0 */
        right: 0;                  /* ← 4vw → 0 */
        bottom: 3vw;
        justify-content: center;
      }
      .about_btn {
        width: 100%;
        align-items: center;
        text-align: center;        /* ← 追加：折り返し行も中央 */
        font-size: 4.8vw;
        padding: 0 8vw;
        &::before { right: 4vw; left: auto; }
        span { font-size: 2.93vw; }
      }
    }
    }

    /* ---- cont04・cont06 共通 ---- */
    .cont04, .cont06 {
      margin-bottom: 16vw;
      .flexbox {
        flex-direction: column;
        column-gap: 0;

        .imagebox { max-width: 100%; width: 100%; }
        .main_img { height: auto; }
        .balloon01 { 
          width: 37.8vw; height: 35.1vw; top: 7vw; left: 1vw; 
        }
        .balloon02 { width: 48.5vw; height:48.5vw; bottom: -5vw; left: 1vw;}
        .balloon03 { width: 50.6vw;  height: 40.2vw;
      }

        .textbox { 
          width: 95%; 
          padding-top: 0; 
          margin: 0 auto;
        }
        .box_title {
          font-size: 6.4vw;
          padding-left: 0;
          padding-bottom: 4vw;
          margin-bottom: 3vw;
          text-align: center;
          background-size: 10px 7px;
          line-height: 1.3;
          background-image: radial-gradient(circle, #4DBACD 2.1px, transparent 2.5px);
          .sub { 
            font-size: 4.8vw;
            line-height: 1.3;
            margin-bottom: 2vw;
          }
          .small { 
            font-size: 4.8vw; 
          }
        }
        .box_text { font-size: 4vw; line-height: 1.9; }
      }

      /* 2カラム → 縦1列 */
      .gridbox {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 10.67vw;
        max-width: 100%;
        margin: 10.67vw auto;
        padding: 0 5vw;
        .box { padding: 8vw 5vw; height: auto;}
        .g_title { font-size: 4.8vw; margin-bottom: 3vw; text-align: center;
        line-height: 1.5;}
        .g_flexbox { margin-bottom: 3vw; 
        flex-direction: column;}
        .otona::before, .kodomo::before { 
          position: static;
          width: 80vw; height:37.3vw; right: -4.8vw; 
          transform: initial;
          margin-bottom: 4vw;
        }
        .top { font-size: 6.93vw;
        text-align: center; }
        .bottom { font-size: 12.27vw; 
        position: absolute;
      bottom: 12vw;}
        .box_text { padding: 0 ; }
        .about_btn { padding-right: 16vw; font-size: 4.8vw; }
        .box:nth-of-type(2) {
          .g_flexbox { left: 4vw; }
          .textbox { width: 100%; }
        }
      }

      .balloon_green {
        width:44.8vw; height:44.8vw;
        top: -5.24vw; right: -0vw;
        font-size: 4.8vw;
      }
    }

    /* ---- cont06 個別 ---- */
    .cont06 {
      .about_wrapper { 
        justify-content: center; 
        padding-top: 5vw;
      padding-left: 7vw;}
      .about_btn { padding-right: 16vw; font-size: 5.6vw; }
    }
  }
}

/* sec04 */
.sec04{
  margin-bottom: 120px;
  .sec04_title{
    text-align: center;
    margin-bottom: 130px;
  }
  .cont01, .cont02{
    margin-bottom: 100px;
    .box{
      border: 2px solid #F991A2;
      border-radius: 10px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .flexbox{
      padding: 40px 50px 50px 0;
      position: relative;
      justify-content: flex-end;
    }
    .textbox{
      width: 100%;
      max-width: 645px;
    }
    .imagebox{
      width: 100%;
      max-width: 508px;
      position: absolute;
      left: -35px;
      bottom: 50px;
    }
    .box_title{
      font-size: 30px;
      font-weight: bold;
      font-family: serif;
      line-height:1.5;
      margin-bottom: 25px;
      position: relative;

      &::before{
        content: "01";
        position: absolute;
        right: -80px;
        top: -90px;
        width: 166px;
        height: 166px;
        border-radius: 50vh;
        background-color: #F991A2;
        color: #fff;
        font-size: 43px;
        font-weight: lighter;
        font-family: serif;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      span{
        color: #FF748B;
        font-weight: bold;
        font-family: serif;
      }
    }
    .box_text{
      margin-bottom: 60px;
    }
    .about_wrapper{
      display: flex;
      justify-content: center;
    }
    .about_btn{
      width: 320px;
      font-size: 23px;
    }
  }
  .cont02{
    .box{
      border: 2px solid #4DBACD;
    }
    .flexbox{
      padding: 40px 0 50px 50px;
    }
    .box_title{
      span{
        color: #439DAD;
      }
    }
    .box_title::before{
      content: "02";
      background-color: #4DBACD;
    }
    .imagebox{
      left: initial;
      right: -35px;
    }
    .about_btn{
      font-size: 18px;
      background-color: rgba(77,186,205,0.36);
    }
  }

  .cont03{
    .gridbox{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 60px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .box{
      border: 2px solid #FBD890;
      border-radius: 10px;
      padding: 0 35px 65px;
      max-width: 496px;
    }
    .imagebox{
      position: relative;
      bottom: 60px;
    }
    .textbox{
      margin-top: -40px;
    }
    .box_title{
      font-size: 30px;
      font-weight: bold;
      font-family: serif;
      line-height:1.5;
      margin-bottom: 25px;
      position: relative;

      &::before{
        content: "03";
        position: absolute;
        right: -80px;
        top: -90px;
        width: 166px;
        height: 166px;
        border-radius: 50vh;
        background-color: #FBD890;
        color: #fff;
        font-size: 43px;
        font-weight: lighter;
        font-family: serif;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      span{
        color: #C39E52;
        font-weight: bold;
        font-family: serif;
      }
    }
    .green{
      border: 2px solid #4DCDB3;
      .box_title{
        padding-top: 40px;
        margin-bottom: 40px;
        &::before{
          background-color: #4DCDB3;
          content: "04";
        }
        span{
          color: #39A48F;
        }
      }
      .green_bg{
        height: 283px;
        width: 406px;
        background-color: rgba(166,230,217,0.3);
        margin: 0 auto 50px;
        position: relative;
      }
      .img01{
        position: absolute;
        width: 239px;
        height: 249px;
        right: -60px;
        top: -60px;
      }
      .img02{
        position: absolute;
        width: 254px;
        height: 135px;
        bottom: -40px;
        left: -70px;
      }
      .img03{
        position: absolute;
        width: 274px;
        height: 194px;
        bottom: -40px;
        right: -60px;
      }
      .green_text{
        position: absolute;
        top: 20px;
        left: -30px;
        .title{
          font-size: 24px;
          font-weight: bold;
          font-family: serif;
          line-height: 1.5;
          position: relative;
          &::before{
            content: "●";
            position: absolute;
            left: -20px;
            bottom: 50%;
            transform: translateY(50%);
            font-size: 11px;
            color: #4DCDB3;
          }
        }
      }
      .text{
        margin-bottom: 35px;
        line-height: 1.8;
      }
      .box_text{
        margin-bottom: 40px;
      }
      .about_wrapper{
        display: flex;
        justify-content: center;
      }
      .about_btn{
        background-color: #A6E6D9;
        width: 320px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    margin-bottom: 16vw;

    .inner{
      padding: 0 3vw;
    }
    .sec04_title {
      margin-bottom: 13.33vw;
      width: 90%;
      img { width: 80%; height: auto; }
    }

    /* ---- cont01・cont02 共通 ---- */
    .cont01, .cont02 {
      margin-bottom: 10vw;

      .box { max-width: 100%; }
      /* .box を flex 化 */
      .box {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 3vw 3vw 10vw;
      }

      /* textbox の子要素を box の flex 直下に昇格させる */
      .textbox {
        display: contents;
        margin-top: 0;
      }

      /* 並び順：タイトル → 画像 → 本文 → ボタン */
      .box_title     { order: 1; }
      .imagebox      { order: 2; }
      .box_text      { order: 3; }
      .about_wrapper { order: 4; }

      /* 横並び＋絶対配置画像 → 縦並び（画像を上に） */
      .flexbox {
        flex-direction: column;
        padding: 3vw 0vw 0vw;
        justify-content: flex-start;
      }
      .textbox { max-width: 100%; }
      .imagebox {
        position: static;
        left: auto; right: auto; bottom: auto;
        max-width: 100%;
        margin: 0 auto 5vw;
      }
      .imagebox img { width: 100%; height: auto; }

      .box_title {
        font-size: 6vw;
        margin-bottom: 5vw;
        padding-left: 20vw;
        &::before {
          right: initial;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18.7vw;
          height: 18.7vw;
          font-size: 6.4vw;
        }
      }
      .box_text { margin-bottom: 10.67vw; }
      .about_btn { width: 78vw; font-size: 4.8vw; }
    }

    .cont02 {
      .flexbox { padding: 3vw 0vw 0vw; }
      .imagebox { left: auto; right: auto; }
      .about_btn { font-size: 4.8vw; }
      .box_title::before{
        right: 0;
        left: -2vw;
      }
    }

    /* ---- cont03 ---- */
    .cont03 {
      padding: 0 ;

      .gridbox {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 10vw;
        max-width: 100%;
        margin: 10vw auto 0;
      }
      .box { max-width: 100%; padding: 3vw 3vw 10vw; }
      .imagebox { bottom: 0; position: static; margin-bottom: 5vw;}
      .imagebox img { width: 100%; height: auto; }
      .textbox { margin-top: 0; }

      .box_title {
        font-size: 6vw;
        margin-bottom: 5vw;
        padding-left: 20vw;
        &::before {
          right: initial;
          left: 0;
          width: 18.7vw;
          height: 18.7vw;
          font-size: 6.4vw;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      /* .box を flex 化 */
      .box {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 6vw 3vw 10vw;
      }

      /* textbox の子要素を box の flex 直下に昇格させる */
      .textbox {
        display: contents;
        margin-top: 0;
      }

      /* 並び順：タイトル → 画像 → 本文 → ボタン */
      .box_title     { order: 1; }
      .imagebox      { order: 2; }
      .box_text      { order: 3; }
      .about_wrapper { order: 4; }

      /* green box（コラージュ） */
      .green {
        display: flex;     
        flex-direction: column;  

        .green_bg {
          order: 2;    
          width: 54vw;
          height: 55vw;
          margin: 14vw auto 22vw 24vw;
        }
        .box_title {
          order: 1;        
          padding-top: 0;
          margin-bottom: 5vw;
          &::before{
            left: 0;
            right: initial;
          }
        }
        .box_text {
          order: 3;               /* ← 本文を3番目へ */
          margin-bottom: 10.67vw;
        }
        .about_wrapper {
          order: 4;               /* ← ボタンを最後へ */
        }

        .img01 { width: 35.37vw; height: 36.85vw; right: -9.88vw; top: -15.88vw; }
        .img02 { width: 67.2vw; height: 27.2vw; bottom: 14vw; left: -25vw; }
        .img03 { width: 87.2vw; height: 33.8vw; bottom: -21vw; right: -8.88vw; }
        .img01 img, .img02 img, .img03 img { width: 100%; height: auto; }

        .green_text {
          top: -10vw;
          left: -20vw;
          .title {
            font-size: 4.8vw;
            &::before { font-size: 2vw; left: -2.96vw; }
          }
          .title02{
            margin-left: 25vw;
          }
        }
        .text { font-size: 4vw; margin-bottom: 22vw; }
        .about_btn { width: 78vw; font-size: 4.8vw; }
      }
    }
  }


}


/* sec05 */
.sec05 {
  background-color: #F5F5F5;
  padding: 110px 80px 60px 135px;
  margin-bottom: 120px;
  .inner{
    padding: 0;
  }
  .sec05_title {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.6;
    font-family: serif;
    letter-spacing: 0.1em;
    margin-bottom: 40px;

    span {
      font-size: 50px;
      font-weight: bold;
      font-family: serif;
      color: #f48ba0;
    }
  }

  .flexbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 80px;
  }

  .textbox {
    flex: 0 0 auto;
    max-width: 350px;
  }

  .box_text {
    margin-bottom: 30px;
    font-size: 23px;
    line-height: 1.8;
    font-weight: bold;
    font-family: serif;
  }

  .about_wrapper {
    margin-top: 95px;
  }

  .about_btn {
    width: 320px;
    &::after{
      width: 113px;
      height: 87px;
      left: -2px;
      bottom: 0;
      background: url(/kagoshima/images/index/pink_btn.webp) center / contain no-repeat;
    }
  }
  .slideshow {
    position: relative;
    width: 800px;
    height: 534px;
    margin: 0 auto;
    overflow: hidden;
  }

  .slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 534px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s;
  }

  .slideshow .slide.is-active {
    opacity: 1;
  }

  /* 画像の外（下）にドットを配置 */
  .dots {
    width: 800px;
    margin: 20px auto 0;
    display: flex;
    gap: 30px;
  }

  .dot {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #D9D9D9;
    cursor: pointer;
  }

  .dot.is-active {
    background-color: #FF748B;
  }

  @media screen and (max-width: 768px) {
    padding: 13.33vw 3vw 8vw;
    margin-bottom: 16vw;

    .sec05_title {
      font-size: 5.6vw;
      margin-bottom: 8vw;
      span { font-size: 7.5vw; }
    }

    /* 横並び → 縦並び（テキスト → スライド） */
    .flexbox {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 5vw;
    }

    .textbox { max-width: 100%; }

    .box_text {
      margin-bottom: 2vw;
      font-size: 4.8vw;
    }

    .about_wrapper {
      margin: 10vw auto;
      display: flex;
      justify-content: center;
     }

    .about_btn {
      width: 78vw;
      z-index: 1;
      &::after { 
        width: 20.33vw;
        height: 16.47vw;
        z-index: -1;
       }
    }

    /* スライドショーを画面幅に可変 */
    .slideshow {
      width: 100%;
      height: auto;
      aspect-ratio: 800 / 534;
    }
    .slideshow .slide {
      width: 100%;
      height: 100%;
    }

    .dots {
      width: 100%;
      margin: 3vw auto 0;
      gap: 4vw;
    }
    .dot {
      width: 3vw;
      height: 3vw;
    }
  }
 
}

/* sec06 */
.sec06{
  margin-bottom: 170px;
  .sec06_title{
    font-weight: bold;
    color: #FF748B;
    font-family: initial;
    font-size: 24px;
    text-align: center;
    line-height: 2.5;   
    margin-bottom: 40px; 
    span{
      font-size: 64px;
      font-weight: bold;
      color: #FF748B;
      opacity: 40%;
      font-family: serif;
      letter-spacing: 0.15em;
    }
  }

  .sec_body{
    position: relative;
  }
  .cont01{
    .flexbox{
      column-gap: 90px;
      justify-content: flex-start;
      margin-bottom: 20px;
    }
    .box_title{
      font-size: 40px;
      font-weight: bold;
      font-family: serif;
    }
    .imagebox{
      width: 458px;
    }
  }
  .cont02{
    margin-bottom: 80px;
    .flexbox{
      column-gap: 90px;
      justify-content: flex-start;
      align-items: center;
    }
    .left{
      min-width: 458px;
    }
    .name{
      font-weight: bold;
      font-family: serif;
      font-size: 35px;
      text-align: center;
      margin-bottom: 50px;
      .small{
        font-size: 20px;
        font-weight: bold;
        font-family: serif;
      }
    }
    .eng{
      text-align: center;
      color: #FF748B;
      font-size: 22px;
      font-family: initial;
    }
    .bottom_box{
      .bottom_title{
        text-align: center;
        font-family: serif;
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 2px solid #FF748B;
      }
      .bottom_flex{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 25px;
        margin-bottom: 10px;
      }
      .year{
        color: #FF0000;
        font-size: 15px;
      }
      .text{
        font-size: 15px;
      }
    }
    .bottom_box:last-of-type{
      margin-top: 50px;
      .bottom_flex{
        /* .text{
          color: #FF0000;
        } */
      }
    }
    .textbox{
       max-width: 600px;
       line-height: 3;
    }
  }
  .about_wrapper{
    display: flex;
    justify-content: center;
  }
  .about_btn{
    z-index: 1;
  }
  .about_btn::after{
    width: 113px;
    height: 87px;
    left: -2px;
    bottom: 0;
    background: url(/kagoshima/images/index/pink_btn.webp) center / contain no-repeat;
    z-index: -1;
  }
  .bg_box{
    width: 873px;
    height: 849px;
    position: absolute;
    background-image: linear-gradient(180deg, rgba(255, 116, 139, 1), rgba(255, 116, 139, 0));
    opacity: 13%;
    top: 40px;
    right: 0;
    z-index: -2;
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 16vw;

    .sec06_title {
      font-size: 4.8vw;
      margin-bottom: 8vw;
      line-height: 1.5;
      span { font-size: 9.6vw; }
    }

    /* sec_body全体をflex化 */
    .sec_body {
      display: flex;
      flex-direction: column;
    }

    /* cont01・cont02を透過させ、中身をsec_body直下の子として扱う */
    .cont01,
    .cont02 {
      display: contents;
    }

    .bg_box { order: 0; }

    /* cont01の中身 */
    .cont01 {
      .flexbox { display: contents; }
      .imagebox {
        order: 1;
        width: 100%;
        margin-bottom: 3vw;
      }
      .imagebox img { width: 100%; height: auto; }

      .textbox { display: contents; }
      .box_title {
        order: 3;
        font-size: 6.4vw;
        margin: 8vw 0;
      }
    }

    /* cont02の中身 */
    .cont02 {
      .flexbox { display: contents; }

      .left {
        order: 2;
        min-width: 0;
        width: 100%;
      }
      .textbox {
        order: 4;
        max-width: 100%;
        font-size: 4vw;
        line-height: 2;
        margin-bottom: 5vw;
      }

      .name {
        font-size: 6.4vw;
        margin-bottom: 5vw;
        .small { font-size: 4.8vw; padding-right: 5vw;}
      }
      .eng { font-size: 4.8vw; letter-spacing: 0.15em;}

      .bottom_box {
        .bottom_title {
          font-size: 4.8vw;
          padding-bottom: 2.67vw;
          margin-bottom: 4vw;
        }
        .bottom_flex { column-gap: 6.67vw; margin-bottom: 2vw;}
        .year { font-size: 4vw; }
        .text { font-size: 4vw; margin-bottom: 0; }
      }
      .bottom_box:last-of-type { margin-top: 5vw; }
    }

    .about_btn{
      width: 78vw;
    }
    .about_btn::after { 
      width: 20.33vw;
      height: 16.47vw;
      z-index: -1;
     }

    /* 背景の装飾グラデーション */
    .bg_box {
      width: 90vw;
      height: 180vw;
      top: 214.67vw;
    }
  }
}

/* sec07 */
.sec07 {
  margin-bottom: 150px;
  .inner{
    padding: 0 120px;
  }
  .news_body {
    display: flex;
    justify-content: center;
    column-gap: 50px;
    align-items: stretch; 
  }

  .news_col {
    display: flex;
    flex-direction: column;
  }
  .news_col:first-child {
    width: 50%;
    .about_btn{
      width: 260px;
    }
  }
  .news_col:last-child {
    width: 50%;
    .about_btn{
      width: 300px;
    }
  }

  .news_divider {
    align-self: stretch;
    width: 1px;
    background-color: #444444;
  }

  .col_title {
    font-size: 32px;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
  }

  .news_list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 28px;
  }

  .blog_list {
    flex-direction: row;
    column-gap: 35px;

    .news_item {
      width: 298px;
    }
  }

  .news_item a {
    display: block;
    color: #333333;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .news_item a:hover {
    opacity: 0.7;
  }

  .news_thumb {
    width: 298px;
    height: 152px;
    margin-bottom: 12px;
    background-color: #d9d9d9;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .news_date {
    margin: 0 0 6px;
    letter-spacing: 0.1em;
    color: #777777;
  }

  .news_text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .about_wrapper {
    margin-top: auto;
  }
  .about_btn{
    background-color: #fff;
    border: 1px solid #444444;
    height: 70px;
    &::before{
      right: 10px;
      background: url(/kagoshima/images/index/news_yajirushi.webp) center / contain no-repeat;
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 16vw;

    .inner { padding: 0 5.33vw; }

    /* 横並び → 縦並び */
    .news_body {
      flex-direction: column;
      column-gap: 0;
    }

    .news_col:first-child {
      width: 100%;
      .about_btn { width: 69.33vw; }
    }
    .news_col:last-child {
      width: 100%;
      .about_btn { width: 80vw; }
    }

    /* 区切り線を横向きに */
    .news_divider {
      width: 100%;
      height: 1px;
      margin: 10.67vw 0;
    }

    .col_title {
      font-size: 6.4vw;
      margin-bottom: 8vw;
    }

    .news_list {
      margin: 0 0 10.67vw;
      row-gap: 7.47vw;
    }

    /* BLOGも縦1列に */
    .blog_list {
      column-gap: 3vw;
      .news_item { width: 100%; }
    }

    /* サムネイルを画面幅に可変 */
    .news_thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 160 / 120;
    }

    .news_date {
      margin: 0 0 1.6vw;
      font-size: 3.4vw;
    }

    .news_text {
      font-size: 4vw;
    }

    .about_wrapper{
      margin: 0 auto;
    }
    .about_btn {
      height: 18.67vw;
      &::before { right: 2.67vw; }
    }
  }
}