@charset "UTF-8";
.topPage {
  padding-top: 90px; }
  @media screen and (max-width: 768px) {
    .topPage {
      padding-top: 55px; } }
  .topPage .gara {
    font-family: "Garamond" , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }
  .topPage .mv {
    position: relative; }
    .topPage .mv .imgArea {
      width: 78%;
      background: url("../cmn_img/mv.jpg") no-repeat center center/cover;
      height: calc(100vh - 90px);
      margin: 0 0 0 auto; }
      @media screen and (max-width: 768px) {
        .topPage .mv .imgArea {
          width: calc(100% - 50px);
          height: auto;
          background-image: url("../cmn_img/mv_sp.jpg");
          background-position: center bottom;
          padding-top: 110%; } }
    .topPage .mv .mainTx {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%); }
      @media screen and (max-width: 768px) {
        .topPage .mv .mainTx {
          top: 27%;
          margin-left: -10px; } }
      .topPage .mv .mainTx span {
        font-size: 4.0rem;
        background: #fff;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        display: inline;
        padding: 9px 10px 9px;
        line-height: 1.7 !important;
        font-family: "Marcellus", serif;
        font-weight: 400; }
        @media screen and (max-width: 768px) {
          .topPage .mv .mainTx span {
            font-size: 2.0rem; } }
    .topPage .mv .scroll {
      position: absolute;
      right: calc(50% + 600px);
      bottom: 90px;
      writing-mode: vertical-rl;
      font-size: 1.1rem; }
      @media screen and (max-width: 1280px) {
        .topPage .mv .scroll {
          right: auto;
          left: 13px; } }
    .topPage .mv .scroll::before {
      animation: scroll 2s infinite;
      background-color: #000;
      bottom: -90px;
      content: "";
      height: 80px;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      width: 1px; }
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0; }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0; }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%; }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%; } }
  .topPage .sec01 .group {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    zoom: 1; }
    @media screen and (max-width: 768px) {
      .topPage .sec01 .group {
        padding: 50px 0; } }
    .topPage .sec01 .group::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 80%;
      background: #eff2f7;
      z-index: -1; }
    .topPage .sec01 .group .txBox {
      width: 40%;
      float: left;
      display: table; }
      @media screen and (max-width: 768px) {
        .topPage .sec01 .group .txBox {
          width: 100%;
          float: none; } }
      .topPage .sec01 .group .txBox .in {
        display: table-cell;
        vertical-align: middle; }
        .topPage .sec01 .group .txBox .in .ttl {
          position: relative;
          z-index: 9; }
          .topPage .sec01 .group .txBox .in .ttl::before {
            content: "01";
            position: absolute;
            top: -25px;
            left: -30px;
            line-height: 1;
            font-size: 10.0rem;
            color: #fff;
            font-family: "Marcellus", serif;
            font-weight: 400; }
            @media screen and (max-width: 768px) {
              .topPage .sec01 .group .txBox .in .ttl::before {
                font-size: 8.0rem;
                right: -18px; } }
          .topPage .sec01 .group .txBox .in .ttl span {
            font-size: 2.2rem;
            position: relative;
            font-family: "Marcellus", serif;
            font-weight: 400;
            color: #223e69;
            line-height: 1.7; }
            @media screen and (max-width: 768px) {
              .topPage .sec01 .group .txBox .in .ttl span {
                font-size: 1.6rem; } }
            .topPage .sec01 .group .txBox .in .ttl span::before {
              content: "";
              position: absolute;
              bottom: 8px;
              right: -100px;
              width: 85px;
              height: 1px;
              background: #223e69; }
              @media screen and (max-width: 768px) {
                .topPage .sec01 .group .txBox .in .ttl span::before {
                  width: 60px;
                  right: -70px; } }
        .topPage .sec01 .group .txBox .in .tx {
          font-size: 1.3rem;
          margin-top: 20px; }
          @media screen and (max-width: 768px) {
            .topPage .sec01 .group .txBox .in .tx {
              font-size: 1.2rem; } }
    .topPage .sec01 .group .imgBox {
      display: table;
      width: 55%;
      float: right; }
      @media screen and (max-width: 768px) {
        .topPage .sec01 .group .imgBox {
          width: 100%;
          float: none; } }
      .topPage .sec01 .group .imgBox .in {
        display: table-cell;
        vertical-align: middle; }
        .topPage .sec01 .group .imgBox .in .imgList {
          font-size: 0; }
          @media screen and (max-width: 768px) {
            .topPage .sec01 .group .imgBox .in .imgList {
              margin-top: 25px; } }
          .topPage .sec01 .group .imgBox .in .imgList > li {
            display: inline-block;
            vertical-align: top; }
            .topPage .sec01 .group .imgBox .in .imgList > li:nth-child(1) {
              margin-top: 160px;
              width: 40%;
              margin-right: 5%; }
              @media screen and (max-width: 768px) {
                .topPage .sec01 .group .imgBox .in .imgList > li:nth-child(1) {
                  margin-top: 80px; } }
            .topPage .sec01 .group .imgBox .in .imgList > li:nth-child(2) {
              width: 55%; }
    .topPage .sec01 .group.area02 {
      margin-top: 70px; }
      @media screen and (max-width: 768px) {
        .topPage .sec01 .group.area02 {
          margin-top: 60px; } }
      .topPage .sec01 .group.area02::before {
        left: auto;
        right: 0; }
      .topPage .sec01 .group.area02 .txBox {
        float: right; }
        .topPage .sec01 .group.area02 .txBox .ttl::before {
          content: "02"; }
          @media screen and (max-width: 768px) {
            .topPage .sec01 .group.area02 .txBox .ttl::before {
              left: auto;
              right: 20px; } }
      .topPage .sec01 .group.area02 .imgBox {
        float: left; }
        .topPage .sec01 .group.area02 .imgBox .in .imgList > li:nth-child(1) {
          width: 55%;
          margin-top: 70px; }
          @media screen and (max-width: 768px) {
            .topPage .sec01 .group.area02 .imgBox .in .imgList > li:nth-child(1) {
              margin-top: 40px; } }
        .topPage .sec01 .group.area02 .imgBox .in .imgList > li:nth-child(2) {
          width: 40%; }
  @media screen and (max-width: 768px) {
    .topPage .sec02 .mainBox .mainImg {
      width: calc(100% + 40px);
      margin-left: -20px; } }
  .topPage .sec02 .mainBox .bgBox {
    position: relative;
    z-index: 9;
    max-width: 1000px;
    width: calc(100% - 60px);
    margin: -80px auto 0; }
    @media screen and (max-width: 768px) {
      .topPage .sec02 .mainBox .bgBox {
        margin-top: -20px;
        width: 100%; } }
    .topPage .sec02 .mainBox .bgBox .boxTtl {
      background: #223e69;
      text-align: center;
      font-size: 2.2rem;
      line-height: 1.7;
      padding: 8px;
      color: #fff;
      font-family: "Marcellus", serif;
      font-weight: 400; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .mainBox .bgBox .boxTtl {
          font-size: 1.7rem;
          line-height: 1.5; } }
    .topPage .sec02 .mainBox .bgBox .wrap {
      padding: 50px 60px;
      background: #fff;
      border-right: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .mainBox .bgBox .wrap {
          padding: 25px 20px; } }
      .topPage .sec02 .mainBox .bgBox .wrap .ttl01 {
        font-size: 2.4rem;
        line-height: 1.7;
        border-bottom: 1px solid #223e69;
        color: #223e69;
        font-family: "Marcellus", serif;
        font-weight: 400;
        display: inline; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .mainBox .bgBox .wrap .ttl01 {
            font-size: 1.7rem; } }
      .topPage .sec02 .mainBox .bgBox .wrap .ttl02 {
        font-size: 1.8rem;
        line-height: 1.7;
        color: #223e69;
        margin-top: 5px;
        font-family: "Marcellus", serif;
        font-weight: 400; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .mainBox .bgBox .wrap .ttl02 {
            font-size: 1.5rem; } }
      .topPage .sec02 .mainBox .bgBox .wrap .tx {
        font-size: 1.3rem;
        margin-top: 25px;
        text-align: left; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .mainBox .bgBox .wrap .tx {
            font-size: 1.2rem;
            margin-top: 15px; } }
      .topPage .sec02 .mainBox .bgBox .wrap .img01, .topPage .sec02 .mainBox .bgBox .wrap .img02, .topPage .sec02 .mainBox .bgBox .wrap .img03 {
        max-width: 660px;
        width: 100%;
        margin: 30px auto 0; }
      .topPage .sec02 .mainBox .bgBox .wrap .img02 {
        max-width: 626px; }
      .topPage .sec02 .mainBox .bgBox .wrap .img03 {
        max-width: 700px;
        margin-top: 0; }
      .topPage .sec02 .mainBox .bgBox .wrap .bd {
        display: block;
        margin-top: 35px;
        padding-top: 35px;
        border-top: 1px solid #ddd; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .mainBox .bgBox .wrap .bd {
            padding-top: 25px;
            margin-top: 25px; } }
  .topPage .sec02 .grayBox {
    margin-top: 60px;
    background: #eff2f7;
    padding: 30px 50px 30px 80px;
    font-size: 0; }
    @media screen and (max-width: 768px) {
      .topPage .sec02 .grayBox {
        margin-top: 50px;
        padding: 25px 20px; } }
    .topPage .sec02 .grayBox .boxL {
      width: calc(100% - 305px);
      padding-right: 50px;
      display: inline-block;
      vertical-align: middle; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .grayBox .boxL {
          width: 100%;
          margin: 0;
          padding: 0;
          text-align: center; } }
      .topPage .sec02 .grayBox .boxL .ttl {
        font-size: 2.8rem;
        display: inline;
        border-bottom: 1px solid #223e69;
        color: #223e69;
        font-family: "Marcellus", serif;
        font-weight: 400; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .grayBox .boxL .ttl {
            font-size: 1.7rem; } }
      .topPage .sec02 .grayBox .boxL .tbl {
        text-align: left;
        margin-top: 15px; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .grayBox .boxL .tbl {
            margin-top: 0; } }
        .topPage .sec02 .grayBox .boxL .tbl tr th, .topPage .sec02 .grayBox .boxL .tbl tr td {
          vertical-align: top;
          line-height: 1.7;
          padding: 5px 0; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .grayBox .boxL .tbl tr th, .topPage .sec02 .grayBox .boxL .tbl tr td {
              display: block;
              width: 100%;
              padding: 0; } }
        .topPage .sec02 .grayBox .boxL .tbl tr th {
          border-right: 1px solid #ddd;
          width: 200px; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .grayBox .boxL .tbl tr th {
              border: none;
              padding-top: 10px; } }
          .topPage .sec02 .grayBox .boxL .tbl tr th span {
            font-size: 1.6rem;
            color: #223e69;
            font-family: "Marcellus", serif;
            font-weight: 400;
            width: 20%;
            padding-left: 18px;
            position: relative;
            display: inline-block;
            width: 100%; }
            @media screen and (max-width: 768px) {
              .topPage .sec02 .grayBox .boxL .tbl tr th span {
                font-size: 1.3rem;
                padding-left: 15px; } }
            .topPage .sec02 .grayBox .boxL .tbl tr th span::before {
              content: "";
              position: absolute;
              top: 10px;
              left: 0;
              width: 6px;
              height: 6px;
              background: #223e69;
              border-radius: 90px; }
              @media screen and (max-width: 768px) {
                .topPage .sec02 .grayBox .boxL .tbl tr th span::before {
                  width: 5px;
                  height: 5px;
                  top: 8px; } }
        .topPage .sec02 .grayBox .boxL .tbl tr td {
          font-size: 1.3rem;
          padding-left: 25px; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .grayBox .boxL .tbl tr td {
              font-size: 1.2rem;
              padding-left: 15px; } }
    .topPage .sec02 .grayBox .boxR {
      width: 305px;
      display: inline-block;
      vertical-align: middle; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .grayBox .boxR {
          width: 160px;
          display: block;
          margin: 20px auto 0 auto; } }
    .topPage .sec02 .grayBox .whBox {
      display: block;
      padding: 30px;
      background: #fff;
      font-size: 0;
      margin-top: 30px; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .grayBox .whBox {
          padding: 25px 20px; } }
      .topPage .sec02 .grayBox .whBox .logo {
        width: 180px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 40px; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .grayBox .whBox .logo {
            display: block;
            margin: 0 auto;
            width: 150px; } }
      .topPage .sec02 .grayBox .whBox .txWrap {
        width: calc(100% - 220px);
        display: inline-block;
        vertical-align: middle; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .grayBox .whBox .txWrap {
            width: 100%;
            margin-top: 15px; } }
        .topPage .sec02 .grayBox .whBox .txWrap .ttl {
          font-family: "Marcellus", serif;
          font-weight: 400;
          font-size: 1.6rem;
          line-height: 1.7;
          color: #223e69; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .grayBox .whBox .txWrap .ttl {
              font-size: 1.4rem;
              text-align: center; } }
        .topPage .sec02 .grayBox .whBox .txWrap .tx {
          font-size: 1.3rem;
          line-height: 1.7;
          margin-top: 3px; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .grayBox .whBox .txWrap .tx {
              font-size: 1.2rem; } }
  .topPage .sec02 .pointList {
    margin-top: 60px; }
    @media screen and (max-width: 768px) {
      .topPage .sec02 .pointList > li {
        width: 100%;
        margin: 0 0 30px; } }
    @media screen and (max-width: 768px) {
      .topPage .sec02 .pointList > li .img {
        max-width: 260px;
        width: 100%;
        margin: 0 auto;
        display: block; } }
    .topPage .sec02 .pointList > li .ttl {
      margin-top: 25px; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .pointList > li .ttl {
          margin-top: 15px; } }
      .topPage .sec02 .pointList > li .ttl span {
        color: #223e69;
        font-size: 1.7rem;
        font-family: "Marcellus", serif;
        font-weight: 400;
        padding-left: 17px;
        position: relative;
        line-height: 1.7; }
        @media screen and (max-width: 768px) {
          .topPage .sec02 .pointList > li .ttl span {
            font-size: 1.5rem;
            padding-left: 15px; } }
        .topPage .sec02 .pointList > li .ttl span::before {
          content: "";
          position: absolute;
          top: 8px;
          left: 0;
          width: 6px;
          height: 6px;
          background: #223e69;
          border-radius: 90px; }
          @media screen and (max-width: 768px) {
            .topPage .sec02 .pointList > li .ttl span::before {
              width: 5px;
              height: 5px;
              top: 6px; } }
    .topPage .sec02 .pointList > li .tx {
      font-size: 1.3rem;
      line-height: 1.7;
      margin-top: 5px; }
      @media screen and (max-width: 768px) {
        .topPage .sec02 .pointList > li .tx {
          font-size: 1.2rem;
          margin-top: 0; } }
  .topPage .sec03 .gaList > li a {
    display: block;
    position: relative; }
    .topPage .sec03 .gaList > li a:hover {
      transform: scale(0.99); }
    .topPage .sec03 .gaList > li a::before {
      content: "";
      position: absolute;
      bottom: 20px;
      right: 20px;
      background: url("../cmn_img/sec03_icon01.png") no-repeat center center/cover;
      width: 35px;
      height: 35px;
      z-index: 9; }
      @media screen and (max-width: 768px) {
        .topPage .sec03 .gaList > li a::before {
          width: 20px;
          height: 20px;
          bottom: 7px;
          right: 7px; } }
  .topPage .sec04 {
    background: #223e69;
    color: #fff; }
    @media screen and (max-width: 768px) {
      .topPage .sec04 .tblList > li {
        margin-bottom: 0;
        margin-top: -1px; } }
    .topPage .sec04 .tblList > li table tr {
      border-color: #627491; }
      .topPage .sec04 .tblList > li table tr th, .topPage .sec04 .tblList > li table tr td {
        color: #fff;
        font-size: 1.3rem;
        border-color: #fff;
        vertical-align: top; }
        @media screen and (max-width: 768px) {
          .topPage .sec04 .tblList > li table tr th, .topPage .sec04 .tblList > li table tr td {
            border-color: #627491;
            font-size: 1.2rem;
            padding: 15px 5px !important; } }
        .topPage .sec04 .tblList > li table tr th .link, .topPage .sec04 .tblList > li table tr td .link {
          text-decoration: underline;
          color: #fff;
          padding-right: 20px;
          display: inline;
          background: url("../cmn_img/icon_link.png") no-repeat center right/10px 11px; }
          .topPage .sec04 .tblList > li table tr th .link:hover, .topPage .sec04 .tblList > li table tr td .link:hover {
            text-decoration: none; }
        .topPage .sec04 .tblList > li table tr th li, .topPage .sec04 .tblList > li table tr td li {
          font-size: 1.3rem; }
          @media screen and (max-width: 768px) {
            .topPage .sec04 .tblList > li table tr th li, .topPage .sec04 .tblList > li table tr td li {
              font-size: 1.2rem; } }
      .topPage .sec04 .tblList > li table tr th {
        width: 30%; }
        @media screen and (max-width: 768px) {
          .topPage .sec04 .tblList > li table tr th {
            font-size: 1.3rem;
            width: 100%;
            padding-bottom: 5px !important;
            border: none; } }
      @media screen and (max-width: 768px) {
        .topPage .sec04 .tblList > li table tr td {
          padding-top: 0 !important; } }
    .topPage .sec04 .cvBtn a {
      display: block;
      max-width: 800px;
      width: 100%;
      background: #fff;
      color: #223e69;
      font-size: 2.2rem;
      padding: 20px;
      margin: 30px auto 0;
      text-align: center;
      border: 1px solid #fff; }
      @media screen and (max-width: 768px) {
        .topPage .sec04 .cvBtn a {
          font-size: 1.6rem;
          padding: 15px; } }
      .topPage .sec04 .cvBtn a span {
        display: inline-block;
        padding-left: 30px;
        background: url("../cmn_img/icon_mail.png") no-repeat center left/20px 15px;
        font-family: "Marcellus", serif;
        font-weight: 400;
        transition: all .3s ease-in-out; }
      .topPage .sec04 .cvBtn a:hover {
        background: #223e69;
        border-color: rgba(255, 255, 255, 0.5); }
        .topPage .sec04 .cvBtn a:hover span {
          color: #fff;
          background-image: url("../cmn_img/icon_mail_wh.png"); }

.remodal {
  max-width: 800px !important; }
  @media screen and (max-width: 768px) {
    .remodal {
      padding: 15px !important; } }
  @media screen and (max-width: 768px) {
    .remodal .remodal-close:before {
      top: -8px;
      left: -8px; } }
  .remodal .slider-thumbnail .swiper-slide {
    opacity: .5;
    transition: opacity .5s;
    padding: 8px  0; }
  .remodal .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
    opacity: 1; }
  .remodal .swiper {
    max-width: 750px;
    width: 100%; }
  .remodal .swiper-button-next:after, .remodal .swiper-button-prev:after {
    color: #fff;
    font-size: 36px; }
    @media screen and (max-width: 768px) {
      .remodal .swiper-button-next:after, .remodal .swiper-button-prev:after {
        font-size: 24px; } }
  @media screen and (max-width: 768px) {
    .remodal .swiper-button-next {
      right: 0; } }
  @media screen and (max-width: 768px) {
    .remodal .swiper-button-prev {
      left: 0; } }