@charset "UTF-8";
/*
@include css3(transform, translate(-50%, -50%));
@include css3(transition, 0.3s ease-in-out);  
transform: rotate(0.03deg);
*/
@keyframes slide1 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes slide2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
@keyframes AnimationTitle {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
/* title */
.main {
  background: linear-gradient(0deg, white 0%, #ecf5f9 100%);
  padding: 260px 0 0 0; }
  @media screen and (max-width: 800px) {
    .main {
      padding: 180px 0 0 0; } }
  @media screen and (max-width: 450px) {
    .main {
      padding: 140px 0 0 0; } }
  .main .smooth {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
    width: 100%; }
    .main .smooth.is-animated {
      clip-path: inset(0); }
  .main .main_tx {
    font-size: 90px;
    font-weight: 700;
    margin: 0 auto;
    max-width: 1300px;
    width: 90%;
    padding: 0 0 60px;
    animation: AnimationTitle 5s ease infinite;
    background: linear-gradient(to right, #50a3db, #0068b4, #48bdcf);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent; }
    @media screen and (max-width: 1030px) {
      .main .main_tx {
        font-size: 70px; } }
    @media screen and (max-width: 800px) {
      .main .main_tx {
        font-size: 50px; } }
    @media screen and (max-width: 600px) {
      .main .main_tx {
        font-size: 40px; } }
    @media screen and (max-width: 450px) {
      .main .main_tx {
        font-size: 30px;
        padding: 0 0 30px; } }
  .main .what_we_do {
    background: linear-gradient(319deg, #24b4e9 0%, #0562a8 100%);
    border-radius: 50px;
    padding: 100px 0 200px 50px;
    position: relative;
    overflow: hidden;
    width: 95%;
    margin: 0 auto; }
    @media screen and (max-width: 800px) {
      .main .what_we_do {
        padding: 70px 30px; } }
    @media screen and (max-width: 520px) {
      .main .what_we_do {
        padding: 30px 20px;
        border-radius: 25px; } }
    .main .what_we_do:before {
      content: "";
      position: absolute;
      top: -350px;
      left: -150px;
      width: 459px;
      height: 757px;
      background: url("../images/top/top1.webp") no-repeat center;
      background-size: 100%;
      z-index: 0; }
      @media screen and (max-width: 520px) {
        .main .what_we_do:before {
          width: 250px;
          height: 400px;
          top: -200px;
          left: 0; } }
    .main .what_we_do .inner {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      color: #FFF;
      position: relative;
      z-index: 1;
      gap: 0 50px; }
      @media screen and (max-width: 1160px) {
        .main .what_we_do .inner {
          flex-wrap: wrap; } }
      @media screen and (max-width: 1200px) {
        .main .what_we_do .inner .lBox {
          width: 35%; } }
      @media screen and (max-width: 1160px) {
        .main .what_we_do .inner .lBox {
          width: 100%; } }
      .main .what_we_do .inner .lBox h2 {
        font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 400;
        font-size: 90px;
        letter-spacing: -0.025em; }
        @media screen and (max-width: 1450px) {
          .main .what_we_do .inner .lBox h2 {
            font-size: 70px; } }
        @media screen and (max-width: 520px) {
          .main .what_we_do .inner .lBox h2 {
            font-size: 50px; } }
        @media screen and (max-width: 520px) {
          .main .what_we_do .inner .lBox h2 {
            font-size: 30px; } }
      @media screen and (max-width: 1200px) {
        .main .what_we_do .inner .rBox {
          width: 65%; } }
      @media screen and (max-width: 1160px) {
        .main .what_we_do .inner .rBox {
          width: 100%; } }
      .main .what_we_do .inner .rBox p {
        line-height: 200%;
        font-size: 36px;
        font-weight: 600; }
        @media screen and (max-width: 1450px) {
          .main .what_we_do .inner .rBox p {
            font-size: 30px; } }
        @media screen and (max-width: 800px) {
          .main .what_we_do .inner .rBox p {
            font-size: 20px;
            line-height: 160%; }
            .main .what_we_do .inner .rBox p br {
              display: none; } }
        @media screen and (max-width: 520px) {
          .main .what_we_do .inner .rBox p {
            font-size: 16px; } }
    .main .what_we_do .slider {
      display: flex;
      justify-content: flex-start;
      overflow: hidden;
      position: relative;
      z-index: 1;
      position: absolute;
      bottom: 50px;
      left: 0;
      width: 100%;
      overflow: hidden; }
      @media screen and (max-width: 520px) {
        .main .what_we_do .slider {
          bottom: 0; } }
      .main .what_we_do .slider .slide1 {
        animation: slide1 80s -40s linear infinite;
        margin: 0 10px; }
      .main .what_we_do .slider .slide2 {
        animation: slide2 80s linear infinite; }
      .main .what_we_do .slider img {
        max-width: none; }
        @media screen and (max-width: 520px) {
          .main .what_we_do .slider img {
            height: 50px;
            width: auto; } }

.top_service {
  padding: 100px 0 150px;
  display: flex;
  justify-content: center; }
  @media screen and (max-width: 1100px) {
    .top_service {
      flex-wrap: wrap;
      padding: 100px 0 100px; } }
  @media screen and (max-width: 520px) {
    .top_service {
      padding: 30px 0 0; } }
  .top_service .lBox {
    width: 30%;
    display: flex;
    justify-content: center;
    padding: 50px 0 0 0; }
    @media screen and (max-width: 1100px) {
      .top_service .lBox {
        width: 100%;
        justify-content: flex-start;
        padding: 0 20px 30px; } }
    .top_service .lBox .in .en {
      font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      font-weight: 400;
      font-size: 90px;
      color: #0068b4; }
      @media screen and (max-width: 1450px) {
        .top_service .lBox .in .en {
          font-size: 70px; } }
      @media screen and (max-width: 520px) {
        .top_service .lBox .in .en {
          font-size: 50px; } }
    .top_service .lBox .in h2 {
      font-size: 16px; }
  .top_service .rBox {
    width: 70%;
    background-color: #eef8fb;
    border-radius: 50px 0 0 50px;
    padding: 50px; }
    @media screen and (max-width: 1100px) {
      .top_service .rBox {
        width: 100%;
        border-radius: 50px; } }
    @media screen and (max-width: 520px) {
      .top_service .rBox {
        padding: 25px;
        border-radius: 50px 50px 0 0; } }
    .top_service .rBox .inBox {
      padding: 10px 0; }
      .top_service .rBox .inBox a {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: center;
        max-width: 900px; }
        .top_service .rBox .inBox a .imgBox {
          width: 315px;
          height: 210px;
          background-color: #FFF;
          display: flex;
          justify-content: center;
          align-items: center; }
          @media screen and (max-width: 767px) {
            .top_service .rBox .inBox a .imgBox {
              width: 100%; } }
          @media screen and (max-width: 520px) {
            .top_service .rBox .inBox a .imgBox {
              height: 180px; } }
          .top_service .rBox .inBox a .imgBox img {
            object-fit: cover;
            width: 100%;
            height: 100%; }
        .top_service .rBox .inBox a .txBox {
          width: calc(100% - 315px);
          display: flex;
          align-items: center;
          padding: 0 0 0 30px; }
          @media screen and (max-width: 767px) {
            .top_service .rBox .inBox a .txBox {
              width: 100%;
              padding: 30px 20px; } }
          .top_service .rBox .inBox a .txBox h3 {
            font-size: 22px;
            padding: 0 0 20px; }
          .top_service .rBox .inBox a .txBox p {
            font-size: 15px; }

.top_data {
  background-color: #0068b4;
  padding: 100px 0 50px;
  border-radius: 0 0 100px 100px;
  display: flex;
  justify-content: center;
  color: #FFF;
  position: relative;
  z-index: 2; }
  @media screen and (max-width: 767px) {
    .top_data {
      border-radius: 0 0 50px 50px; } }
  @media screen and (max-width: 520px) {
    .top_data {
      padding: 40px 0; } }
  .top_data .titleBox {
    padding: 0 0 50px; }
    @media screen and (max-width: 520px) {
      .top_data .titleBox {
        padding: 0 0 20px; } }
    .top_data .titleBox .en {
      font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      font-weight: 400;
      font-size: 90px; }
      @media screen and (max-width: 1450px) {
        .top_data .titleBox .en {
          font-size: 70px; } }
      @media screen and (max-width: 520px) {
        .top_data .titleBox .en {
          font-size: 50px; } }
    .top_data .titleBox h2 {
      font-size: 16px; }
  .top_data .in {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    @media screen and (max-width: 520px) {
      .top_data .in {
        padding: 0; } }
    .top_data .in .inBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 47%;
      padding: 30px 0;
      border-bottom: 1px solid #FFF; }
      @media screen and (max-width: 1210px) {
        .top_data .in .inBox {
          width: 100%; } }
      .top_data .in .inBox .icon {
        width: 110px;
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFF;
        border-radius: 50%; }
        @media screen and (max-width: 767px) {
          .top_data .in .inBox .icon {
            width: 80px;
            height: 80px; }
            .top_data .in .inBox .icon img {
              width: 50%;
              height: auto;
              max-width: none; } }
        @media screen and (max-width: 460px) {
          .top_data .in .inBox .icon {
            width: 50px;
            height: 50px; } }
      .top_data .in .inBox .boxs {
        width: calc(100% - 110px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 0 20px; }
        @media screen and (max-width: 767px) {
          .top_data .in .inBox .boxs {
            width: calc(100% - 80px); } }
        @media screen and (max-width: 460px) {
          .top_data .in .inBox .boxs {
            width: calc(100% - 50px); } }
        .top_data .in .inBox .boxs .lBox {
          width: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center; }
          .top_data .in .inBox .boxs .lBox .tx .num {
            font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
            font-size: 22px;
            font-weight: 400; }
            @media screen and (max-width: 460px) {
              .top_data .in .inBox .boxs .lBox .tx .num {
                font-size: 16px; } }
          .top_data .in .inBox .boxs .lBox .tx .txt {
            font-size: 20px; }
            @media screen and (max-width: 767px) {
              .top_data .in .inBox .boxs .lBox .tx .txt {
                font-size: 14px; } }
            .top_data .in .inBox .boxs .lBox .tx .txt span {
              font-size: 16px;
              margin: 0 0 0 -0.5em; }
        .top_data .in .inBox .boxs .rBox {
          width: 50%; }
          .top_data .in .inBox .boxs .rBox .dataBox {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;
            font-size: 30px;
            position: relative; }
            @media screen and (max-width: 767px) {
              .top_data .in .inBox .boxs .rBox .dataBox {
                font-size: 25px; } }
            @media screen and (max-width: 460px) {
              .top_data .in .inBox .boxs .rBox .dataBox {
                font-size: 20px; } }
            .top_data .in .inBox .boxs .rBox .dataBox span.nu {
              font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
              font-size: 70px;
              font-weight: 400; }
              @media screen and (max-width: 767px) {
                .top_data .in .inBox .boxs .rBox .dataBox span.nu {
                  font-size: 50px; } }
              @media screen and (max-width: 460px) {
                .top_data .in .inBox .boxs .rBox .dataBox span.nu {
                  font-size: 36px; } }
            .top_data .in .inBox .boxs .rBox .dataBox span.w {
              min-width: 77px; }
              @media screen and (max-width: 460px) {
                .top_data .in .inBox .boxs .rBox .dataBox span.w {
                  min-width: 50px; } }
            .top_data .in .inBox .boxs .rBox .dataBox.type2 {
              font-size: 25px; }
              @media screen and (max-width: 767px) {
                .top_data .in .inBox .boxs .rBox .dataBox.type2 {
                  font-size: 20px; } }
              @media screen and (max-width: 460px) {
                .top_data .in .inBox .boxs .rBox .dataBox.type2 {
                  font-size: 15px; } }
            .top_data .in .inBox .boxs .rBox .dataBox .year {
              position: absolute;
              bottom: -10px;
              right: 25px;
              font-size: 18px; }
              @media screen and (max-width: 460px) {
                .top_data .in .inBox .boxs .rBox .dataBox .year {
                  font-size: 12px; } }
  .top_data .lefttx {
    text-align: right;
    padding: 50px 30px; }
    @media screen and (max-width: 520px) {
      .top_data .lefttx {
        padding: 25px 20px 0; } }

.top_stance {
  background: url("../images/top/top_stance1.webp") no-repeat center bottom;
  background-attachment: fixed;
  background-size: cover;
  padding: 200px 0 0;
  margin-top: -100px;
  position: relative;
  z-index: 1;
  overflow: hidden; }
  @media screen and (max-width: 520px) {
    .top_stance {
      padding: 150px 0 0; } }
  .top_stance:after {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    content: "";
    position: absolute;
    bottom: 150px;
    left: 0;
    background: url("../images/top/top_stance_bg1.webp") no-repeat center;
    background-size: 100%;
    width: 1276px;
    height: 785px;
    z-index: 1; }
    @media screen and (max-width: 1250px) {
      .top_stance:after {
        background-position: center top;
        width: 60%;
        height: 350px;
        bottom: 600px; } }
    @media screen and (max-width: 1050px) {
      .top_stance:after {
        background-position: center top;
        width: 60%;
        height: 350px;
        bottom: 800px; } }
    @media screen and (max-width: 767px) {
      .top_stance:after {
        width: 95%;
        bottom: auto;
        top: 50%; } }
    @media screen and (max-width: 520px) {
      .top_stance:after {
        top: 48%; } }
  .top_stance .inner {
    position: relative;
    z-index: 2; }
    .top_stance .inner .titleBox {
      padding: 0 0 50px; }
      .top_stance .inner .titleBox .en {
        font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 400;
        font-size: 90px;
        color: #0068b4; }
        @media screen and (max-width: 1450px) {
          .top_stance .inner .titleBox .en {
            font-size: 70px; } }
        @media screen and (max-width: 520px) {
          .top_stance .inner .titleBox .en {
            font-size: 50px; } }
      .top_stance .inner .titleBox h2 {
        font-size: 16px; }
    .top_stance .inner .flexBox {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .top_stance .inner .flexBox .lBox {
        width: 100%;
        padding: 0 0 0 40px; }
        @media screen and (max-width: 950px) {
          .top_stance .inner .flexBox .lBox {
            padding: 0; } }
        .top_stance .inner .flexBox .lBox p {
          line-height: 45px;
          padding: 0 0 2em;
          text-shadow: 1px 1px 2px #FFF,-1px -1px 2px #FFF,1px 1px 2px #FFF,-1px -1px 2px #FFF; }
          @media screen and (max-width: 520px) {
            .top_stance .inner .flexBox .lBox p {
              line-height: 28px; } }
        @media screen and (max-width: 900px) {
          .top_stance .inner .flexBox .lBox br.type1 {
            display: none; } }

.philosophy {
  background: url("../images/top/top_stance_bg2.webp") no-repeat center top;
  background-size: cover;
  position: relative;
  z-index: 2;
  margin-top: -150px;
  padding: 300px 0 100px 0; }
  @media screen and (max-width: 900px) {
    .philosophy {
      margin-top: -50px; } }
  @media screen and (max-width: 520px) {
    .philosophy {
      background-position: 60% 50px;
      padding: 300px 0 20px 0; } }
  .philosophy .inner {
    max-width: 1220px;
    padding: 0 20px; }
    .philosophy .inner .titleBox {
      padding: 0 0 50px;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .philosophy .inner .titleBox {
          padding: 0 0 25px; } }
      .philosophy .inner .titleBox .en {
        font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 400;
        font-size: 90px;
        color: #0068b4;
        padding: 0 0 30px; }
        @media screen and (max-width: 1450px) {
          .philosophy .inner .titleBox .en {
            font-size: 70px; } }
        @media screen and (max-width: 520px) {
          .philosophy .inner .titleBox .en {
            font-size: 50px; } }
      .philosophy .inner .titleBox h2 {
        font-size: 16px; }
    .philosophy .inner p {
      line-height: 45px; }
      @media screen and (max-width: 520px) {
        .philosophy .inner p {
          line-height: 28px; } }

.top_blog {
  padding: 100px 0; }
  @media screen and (max-width: 520px) {
    .top_blog {
      padding: 50px 0; } }
  .top_blog .inner .titleBox {
    padding: 0 0 50px;
    text-align: center; }
    .top_blog .inner .titleBox .en {
      font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      font-weight: 400;
      font-size: 90px;
      color: #0068b4; }
      @media screen and (max-width: 1450px) {
        .top_blog .inner .titleBox .en {
          font-size: 70px; } }
      @media screen and (max-width: 520px) {
        .top_blog .inner .titleBox .en {
          font-size: 50px; } }
    .top_blog .inner .titleBox h2 {
      font-size: 16px; }
  .top_blog .inner .flexBox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 5%;
    padding: 0 0 30px; }
    .top_blog .inner .flexBox .in {
      width: 30%;
      max-width: 350px; }
      @media screen and (max-width: 767px) {
        .top_blog .inner .flexBox .in {
          width: 100%;
          max-width: none;
          padding: 0 0 30px; } }
      .top_blog .inner .flexBox .in a {
        display: block; }
      .top_blog .inner .flexBox .in .imgBox {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        width: 100%;
        height: 230px; }
        @media screen and (max-width: 1000px) {
          .top_blog .inner .flexBox .in .imgBox {
            height: 180px; } }
        @media screen and (max-width: 767px) {
          .top_blog .inner .flexBox .in .imgBox {
            height: 230px; } }
        .top_blog .inner .flexBox .in .imgBox img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .top_blog .inner .flexBox .in .txBox {
        padding: 15px 10px 0;
        position: relative; }
        .top_blog .inner .flexBox .in .txBox p {
          font-size: 18px; }
          .top_blog .inner .flexBox .in .txBox p.time {
            padding: 1.5em 0 0 0;
            color: #a5a5a5;
            font-size: 16px; }

.top_news {
  padding: 0 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden; }
  @media screen and (max-width: 1000px) {
    .top_news {
      padding: 0 20px 50px; } }
  .top_news .lBox {
    width: 35%;
    background-color: #0068b4;
    border-radius: 0 50px 50px 0;
    padding: 70px 100px 100px 0;
    display: flex;
    justify-content: flex-end; }
    @media screen and (max-width: 1000px) {
      .top_news .lBox {
        width: 100%;
        padding: 35px 35px 20px;
        border-radius: 20px;
        display: block; } }
    .top_news .lBox .in {
      min-width: 210px; }
      @media screen and (max-width: 520px) {
        .top_news .lBox .in {
          min-height: 0; } }
      .top_news .lBox .in .titleBox {
        padding: 0 0 50px;
        color: #FFF; }
        .top_news .lBox .in .titleBox .en {
          font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
          font-weight: 400;
          font-size: 90px; }
          @media screen and (max-width: 1450px) {
            .top_news .lBox .in .titleBox .en {
              font-size: 70px; } }
          @media screen and (max-width: 520px) {
            .top_news .lBox .in .titleBox .en {
              font-size: 50px; } }
        .top_news .lBox .in .titleBox h2 {
          font-size: 16px; }
      @media screen and (max-width: 1000px) {
        .top_news .lBox .in .btn {
          display: none; } }
      .top_news .lBox .in .btn a {
        background-color: #FFF;
        color: #0068b4;
        font-size: 16px;
        padding: 5px 15px;
        height: 60px; }
        .top_news .lBox .in .btn a:after {
          background-color: #0068b4; }
  .top_news .rBox {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media screen and (max-width: 1000px) {
      .top_news .rBox {
        width: 100%;
        padding: 20px;
        display: block; } }
    .top_news .rBox .inBox .in {
      padding: 20px 0; }
      .top_news .rBox .inBox .in a {
        display: block; }
        .top_news .rBox .inBox .in a .flexBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 0 20px;
          padding: 0 0 10px; }
          .top_news .rBox .inBox .in a .flexBox .time {
            color: #a5a5a5; }
          .top_news .rBox .inBox .in a .flexBox .cate {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 5px 10px; }
            .top_news .rBox .inBox .in a .flexBox .cate div {
              border: 1px solid #0068b4;
              border-radius: 50px;
              color: #0068b4;
              font-size: 12px;
              padding: 5px 30px; }
    .top_news .rBox .spbtn {
      display: none; }
      @media screen and (max-width: 1000px) {
        .top_news .rBox .spbtn {
          display: block; } }

.top_media {
  position: relative; }
  @media screen and (max-width: 520px) {
    .top_media {
      padding: 0 0 50px; } }
  .top_media:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 438px;
    background: url("../images/top/top_media.webp") no-repeat center;
    background-size: cover;
    z-index: -1; }
  .top_media .inner {
    position: relative;
    z-index: 1; }
    .top_media .inner .titleBox {
      padding: 100px 0 70px;
      color: #FFF; }
      @media screen and (max-width: 520px) {
        .top_media .inner .titleBox {
          padding: 40px 0; } }
      .top_media .inner .titleBox .en {
        font-family: 'Oswald',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 400;
        font-size: 90px; }
        @media screen and (max-width: 1450px) {
          .top_media .inner .titleBox .en {
            font-size: 70px; } }
        @media screen and (max-width: 520px) {
          .top_media .inner .titleBox .en {
            font-size: 50px; } }
      .top_media .inner .titleBox h2 {
        font-size: 16px; }
    .top_media .inner .flexBox {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0 3%;
      padding: 0 0 30px; }
      @media screen and (max-width: 520px) {
        .top_media .inner .flexBox {
          padding: 0; } }
      .top_media .inner .flexBox .in {
        width: 22.75%;
        max-width: 320px; }
        @media screen and (max-width: 1000px) {
          .top_media .inner .flexBox .in {
            width: 47%;
            max-width: none;
            padding: 0 0 30px; } }
        @media screen and (max-width: 520px) {
          .top_media .inner .flexBox .in {
            width: 100%;
            max-width: none;
            padding: 0 0 30px; } }
        .top_media .inner .flexBox .in a {
          display: block;
          padding: 20px;
          border-radius: 20px;
          background-color: #FFF;
          box-shadow: 0 0 5px rgba(194, 193, 193, 0.8); }
        .top_media .inner .flexBox .in .imgBox {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          width: 100%;
          height: 160px; }
          .top_media .inner .flexBox .in .imgBox img {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
        .top_media .inner .flexBox .in .txBox {
          padding: 15px 0 0;
          position: relative; }
          .top_media .inner .flexBox .in .txBox p {
            font-size: 18px;
            min-height: 130px; }
            .top_media .inner .flexBox .in .txBox p.time {
              padding: 0;
              min-height: 0;
              color: #a5a5a5;
              font-size: 16px;
              position: absolute;
              bottom: 0;
              right: 0;
              text-align: right; }

.top_messerge {
  background-color: #f2f2f2;
  border-radius: 100px 100px 0 0;
  padding: 85px 0 100px;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 520px) {
    .top_messerge {
      border-radius: 50px 50px 0 0;
      padding: 65px 0 30px; } }
  .top_messerge:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 767px;
    height: 856px;
    background: url("../images/top/top_message.webp") no-repeat center;
    background-size: 100%;
    z-index: 0;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%); }
    @media screen and (max-width: 767px) {
      .top_messerge:before {
        width: 70%; } }
  .top_messerge .inner {
    max-width: 1200px;
    position: relative;
    padding-left: 240px; }
    @media screen and (max-width: 767px) {
      .top_messerge .inner {
        padding-left: 160px; } }
    @media screen and (max-width: 520px) {
      .top_messerge .inner {
        padding-left: 100px; } }
    .top_messerge .inner:before {
      content: "Message";
      font-size: 180px;
      color: #535353;
      position: absolute;
      top: 0;
      left: 0;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      opacity: 0.1; }
      @media screen and (max-width: 767px) {
        .top_messerge .inner:before {
          font-size: 120px; } }
      @media screen and (max-width: 520px) {
        .top_messerge .inner:before {
          font-size: 80px; } }
    .top_messerge .inner .txBox {
      padding: 30px 0 0 0; }
      .top_messerge .inner .txBox h2 {
        font-size: 20px;
        padding: 0 0 30px; }
      .top_messerge .inner .txBox p {
        line-height: 36px;
        padding: 0 0 1em; }
        @media screen and (max-width: 767px) {
          .top_messerge .inner .txBox p {
            font-size: 16px; } }
        @media screen and (max-width: 520px) {
          .top_messerge .inner .txBox p {
            font-size: 15px !important;
            line-height: 28px; } }
        .top_messerge .inner .txBox p.name span {
          font-size: 20px;
          font-weight: 600; }
    .top_messerge .inner .btn {
      display: flex;
      justify-content: flex-end; }
      .top_messerge .inner .btn a {
        margin: 0;
        width: 280px;
        text-align: left; }