@charset "UTF-8";
body:not(.home) .global_contents>section.l-mainVisual{
  margin-bottom: 60px;
}
body:not(.home) .global_contents>section.l-message{
  padding-bottom: 60px;
}
.l-message{
  .global_inner{
    display: flow-root;
  }
  .title{
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 35.2px */
    letter-spacing: 1.1px;
    margin-bottom: 20px;
    text-align: center;
    span{
      color: #1CAECD;
      text-decoration: underline !important;
      text-decoration-color: #EBFF00 !important;
      text-decoration-thickness: 10px !important;
      text-underline-offset: -7px !important;
      text-decoration-skip-ink: none !important;
    }
  }
  .text{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 27px */
    letter-spacing: 0.75px;
  }
  .image{
    float: right;
    margin: 0 0 10px 15px;
    width: 120px;
    .caption{
      text-align: center;
      margin-top: 10px;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0.65px;
    }
  }
}

@media (min-width: 768px) {
  body:not(.home) .global_contents>section.l-mainVisual{
    margin-bottom: 80px;
  }
  body:not(.home) .global_contents>section.l-message{
    padding-bottom: 80px;
  }
  .l-message{
    .global_inner{
      display: grid;
      gap: 0 40px;
      grid-template-areas: "title image" "text image";
    }
    .image{
      float: none;
      width: 260px;
      margin: 0;
      grid-area: image;
    }
    .title{
      text-align: left;
      grid-area: title;
      font-size: 28px;
      font-style: normal;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 1.4px;
      margin-bottom: 30px;
      br{
        display: none;
      }
    }
    .text{
      position: relative;
      grid-area: text;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 3.0em; /* 48px */
      letter-spacing: 0.8px;

      background-color: #fff; /* 背景色 */
      /* 線を描画（一番上の線を避けるために位置を調整） */
      background-image: linear-gradient(180deg, #D9D9D9 1px, transparent 1px);
      background-size: 100% 3.0em;
      background-position: 0 3.0em; /* 重要：線を1行分下にずらす */
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px; /* 線の高さ */
        background-color: #ffffff; /* 線の色 */
      }
    }
  }
}