@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 768px ~ */
@media screen and (min-width: 769px), print {
  .mainimg {
    width: 100%;
    height: 794px;
    background-image: url(../img/message/mainimg.jpg);
    background-size: cover;
    background-position: 40% 0;
    position: relative; }
    .mainimg.on .maintit .maintxt > * {
      opacity: 1;
      transform: translateY(0); }
    .mainimg.on .maintit .maintxt::before {
      opacity: 1;
      transform: translateY(0); }
    .mainimg .maintit {
      position: absolute;
      top: 60px;
      right: 8%; }
      .mainimg .maintit .maintxt {
        width: 604px;
        height: 636px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        position: relative;
        text-align: center;
        z-index: 1; }
        .mainimg .maintit .maintxt > * {
          transform: translateY(-8px);
          opacity: 0;
          transition: 1s 1s; }
        .mainimg .maintit .maintxt::before {
          position: absolute;
          content: "";
          top: 10px;
          left: 0;
          width: 100%;
          height: 100%;
          margin: auto;
          background-image: url(../img/message/main_bg.png);
          background-size: cover;
          z-index: -1;
          opacity: 0;
          transform: translateY(20px);
          transition: 1.5s 0.5s; }
      .mainimg .maintit .en {
        font-size: 15px; }
      .mainimg .maintit h2 {
        font-size: 30px;
        opacity: 0.6;
        line-height: 1;
        width: auto;
        padding: 0;
        margin-top: 6px;
        letter-spacing: 8px; }
      .mainimg .maintit .lead {
        margin-top: 35px;
        font-size: 40px;
        font-weight: 500;
        letter-spacing: 4px;
        line-height: 1.8; }
      .mainimg .maintit .prof p {
        line-height: 1;
        margin-top: 35px; }
      .mainimg .maintit .prof span {
        display: block;
        font-size: 24px;
        font-weight: 500; }

  .content_w {
    position: relative;
    z-index: 1;
    background-color: #ceedff;
    padding: 200px 0 300px; }
    .content_w .deco {
      position: absolute;
      z-index: -1; }
    .content_w .deco01 {
      top: 450px;
      left: 5%; }
    .content_w .deco02 {
      top: 850px;
      right: 5%; }
    .content_w .deco03 {
      bottom: 0;
      left: 12%; }
    .content_w section {
      position: relative; }
      .content_w section + section {
        margin-top: 250px; }
      .content_w section .wrap .sec_tit p {
        font-size: 27px;
        font-weight: 500;
        display: inline-block;
        background-color: #fff;
        letter-spacing: 4px;
        padding: 6px 3px 6px 6px;
        line-height: 1; }
      .content_w section .wrap .sec_tit br + p {
        margin-top: 5px; }
      .content_w section .wrap .sec_txt {
        width: 48%;
        text-align: justify;
        margin-top: 40px;
        line-height: 2;
        letter-spacing: 2px; }
    .content_w #sec01::before {
      position: absolute;
      content: "";
      width: 48%;
      height: 100%;
      max-height: 420px;
      top: 0;
      right: 0;
      background-image: url(../img/message/img01.jpg);
      background-position: 30% 20%;
      background-size: cover; }
    .content_w #sec02::before {
      position: absolute;
      content: "";
      width: 90%;
      height: calc(100% + 160px);
      top: -80px;
      left: 0;
      background-image: url(../img/message/img02.jpg);
      background-position: 30% 20%;
      background-size: cover;
      z-index: -1; }
    .content_w #sec02 .wrap > * {
      margin-left: 48%;
      width: auto; } }
/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 768px */
@media only screen and (max-width: 768px) {
  .mainimg {
    width: 100%;
    height: 300px;
    background-image: url(../img/message/mainimg.jpg);
    background-size: cover;
    background-position: 0% 0;
    position: relative; }
    .mainimg.on .maintit .maintxt > * {
      opacity: 1;
      transform: translateY(0); }
    .mainimg.on .maintit .maintxt::before {
      opacity: 1;
      transform: translateY(0); }
    .mainimg .maintit {
      position: absolute;
      top: 180px;
      left: 0;
      right: 0;
      margin: auto; }
      .mainimg .maintit .maintxt {
        width: 90vw;
        height: 93vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        position: relative;
        text-align: center;
        z-index: 2;
        margin: auto; }
        .mainimg .maintit .maintxt > * {
          transform: translateY(-5px);
          opacity: 0;
          transition: 1s 1s; }
        .mainimg .maintit .maintxt::before {
          position: absolute;
          content: "";
          top: 5px;
          left: 0;
          width: 100%;
          height: 100%;
          margin: auto;
          background-image: url(../img/message/main_bg.png);
          background-size: cover;
          z-index: -1;
          opacity: 0;
          transform: translateY(15px);
          transition: 1.5s 0.5s; }
      .mainimg .maintit .en {
        font-size: 10px; }
      .mainimg .maintit h2 {
        font-size: 18px;
        opacity: 0.6;
        line-height: 1;
        width: auto;
        padding: 0;
        margin-top: 3px;
        letter-spacing: 4px; }
      .mainimg .maintit .lead {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 4px;
        line-height: 1.6; }
      .mainimg .maintit .prof p {
        line-height: 1;
        margin-top: 15px;
        font-size: 12px; }
      .mainimg .maintit .prof span {
        display: block;
        font-size: 18px;
        font-weight: 500; }

  .content_w {
    position: relative;
    z-index: 1;
    background-color: #ceedff;
    padding: 300px 0 100px; }
    .content_w .deco {
      position: absolute;
      z-index: -1; }
    .content_w .deco01 {
      top: 450px;
      left: 5%; }
    .content_w .deco02 {
      top: 850px;
      right: 3%; }
    .content_w .deco03 {
      bottom: 0;
      left: 12%; }
    .content_w section {
      position: relative; }
      .content_w section + section {
        margin-top: 40px; }
      .content_w section .wrap .sec_tit p {
        font-size: 22px;
        font-weight: 500;
        display: inline-block;
        background-color: #fff;
        letter-spacing: 4px;
        padding: 6px 3px 6px 6px;
        line-height: 1; }
      .content_w section .wrap .sec_tit br + p {
        margin-top: 5px; }
      .content_w section .wrap .sec_txt {
        text-align: justify;
        margin-top: 30px;
        line-height: 2;
        letter-spacing: 2px; }
    .content_w #sec01::after {
      position: relative;
      content: "";
      width: 95%;
      height: 54.5vw;
      margin-top: 40px;
      display: block;
      margin-left: 5%;
      background-image: url(../img/message/img01.jpg);
      background-position: 30% 20%;
      background-size: cover; }
    .content_w #sec02::after {
      position: relative;
      content: "";
      width: 95%;
      height: 54.5vw;
      display: block;
      margin-top: 40px;
      background-image: url(../img/message/img02.jpg);
      background-position: 20% 40%;
      background-size: 160%;
      z-index: -1; }
    .content_w #sec02 .wrap > * {
      width: auto; } }