/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  background: #E9F0F7; }
  .mainvisual .main_img_wrap {
    position: relative;
    max-width: 1400px;
    margin: auto; }
    @media screen and (max-width: 480px) {
      .mainvisual .main_img_wrap {
        width: 100%; } }
    .mainvisual .main_img_wrap .main_img {
      position: relative;
      aspect-ratio: 1400/680; }
      @media screen and (max-width: 480px) {
        .mainvisual .main_img_wrap .main_img {
          aspect-ratio: 414/340; } }
      .mainvisual .main_img_wrap .main_img:before {
        content: "";
        position: absolute;
        inset: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("../images/top/main/main.jpg"); }
        @media screen and (max-width: 480px) {
          .mainvisual .main_img_wrap .main_img:before {
            background-image: url("../images/top/main/main_sp.jpg"); } }
    .mainvisual .main_img_wrap .maincopy {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      margin: auto;
      line-height: 0; }
      .mainvisual .main_img_wrap .maincopy img {
        width: 100%; }
    .mainvisual .main_img_wrap .main_cap {
      position: absolute;
      left: 10px;
      font-weight: 600;
      right: 10px;
      bottom: 5px;
      margin: 0 auto;
      font-size: 10px;
      line-height: 1.4;
      color: #FFF;
      text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, 0.5), 0px 0px 3px rgba(0, 0, 0, 0.5), 0px 0px 4px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, 0.5), 0px 0px 7px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 0px 9px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.5); }
      @media screen and (max-width: 480px) {
        .mainvisual .main_img_wrap .main_cap {
          width: 100%;
          position: static;
          padding: 10px;
          color: #333;
          text-shadow: none; } }
      .mainvisual .main_img_wrap .main_cap .indent {
        display: block;
        text-indent: 1em; }

.merit_wrap {
  background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%);
  padding: 20px 0;
  position: relative; }
  @media screen and (max-width: 768px) {
    .merit_wrap {
      padding: 15px 0; } }
  .merit_wrap:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    background: #FFF;
    height: 1px; }
    @media screen and (max-width: 480px) {
      .merit_wrap:after {
        content: none; } }
  .merit_wrap .merit {
    flex-wrap: wrap; }
    @media screen and (max-width: 480px) {
      .merit_wrap .merit {
        gap: 10px 0;
        align-items: center;
        width: calc(100% - 20px); } }
    .merit_wrap .merit li {
      width: calc(100% / 3);
      border-right: 1px solid #FFF; }
      @media screen and (max-width: 480px) {
        .merit_wrap .merit li {
          border: none; } }
      @media screen and (max-width: 480px) {
        .merit_wrap .merit li {
          width: 49%;
          padding-bottom: 10px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5); } }
      .merit_wrap .merit li:nth-child(3n+1) {
        border-left: 1px solid #FFF; }
        @media screen and (max-width: 480px) {
          .merit_wrap .merit li:nth-child(3n+1) {
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5); } }
      .merit_wrap .merit li:nth-child(-n+3) {
        margin-bottom: 15px; }
        @media screen and (max-width: 480px) {
          .merit_wrap .merit li:nth-child(-n+3) {
            margin-bottom: 0; } }
      .merit_wrap .merit li:nth-child(n+4) {
        margin-top: 30px; }
        @media screen and (max-width: 768px) {
          .merit_wrap .merit li:nth-child(n+4) {
            margin-top: 15px; } }
        @media screen and (max-width: 480px) {
          .merit_wrap .merit li:nth-child(n+4) {
            margin-top: 0; } }
      @media screen and (max-width: 480px) {
        .merit_wrap .merit li:nth-child(n+5) {
          padding-bottom: 0;
          border-bottom: none; } }
      .merit_wrap .merit li p {
        line-height: 1.4;
        font-size: clamp(10px, 1.5vw, 19px);
        font-weight: bold;
        color: #FFF;
        text-align: center; }
        @media screen and (max-width: 480px) {
          .merit_wrap .merit li p {
            font-size: 12px; } }
        @media screen and (max-width: 375px) {
          .merit_wrap .merit li p {
            font-size: 11px; } }

h3 {
  color: #595757;
  text-align: center; }
  h3 span {
    font-size: clamp(26px, 3.59375vw, 46px);
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 0 20px 10px;
    margin-bottom: 30px;
    position: relative;
    line-height: 1.2; }
    @media screen and (max-width: 480px) {
      h3 span {
        margin-bottom: 20px; } }
    h3 span:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%); }

.read {
  font-size: clamp(10px, 1.5vw, 18px);
  color: #595757; }
  @media screen and (max-width: 480px) {
    .read {
      font-size: 12px; } }
  .read .big {
    font-size: 100%; }

.fix_img img {
  width: 100%; }
@media screen and (max-width: 480px) {
  .fix_img span {
    display: inline-block;
    padding: 3px 5px !important; } }

.top_bg_wrap {
  background: url("../images/top/top_bg01.png") top left/100% auto no-repeat; }

.top_bg_wrap02 {
  background: url("../images/top/top_bg02.png") left top/100% auto repeat-y; }

.infor_cont {
  padding-top: clamp(60px, 8.59375vw, 110px); }
  .infor_cont .infor_in {
    position: relative;
    background: #FFF;
    padding: clamp(50px, 7.03125vw, 90px) 20px clamp(50px, 7.8125vw, 100px); }
    .infor_cont .infor_in:before, .infor_cont .infor_in:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 20px;
      background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%); }
    .infor_cont .infor_in:before {
      top: 0; }
    .infor_cont .infor_in:after {
      bottom: 0; }
    .infor_cont .infor_in .update {
      display: flex;
      justify-content: center; }
      .infor_cont .infor_in .update li {
        display: flex;
        justify-content: center; }
        .infor_cont .infor_in .update li .read:nth-of-type(2) {
          margin-left: 20px; }

.loc_cont {
  padding: clamp(60px, 10.9375vw, 110px) 20px 0; }
  .loc_cont .loc_map_wrap {
    margin: 0 -20px;
    padding: 50px 0;
    background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%); }
    .loc_cont .loc_map_wrap .map_img_wrap {
      max-width: 960px;
      margin: 0 auto 40px; }
      @media screen and (max-width: 480px) {
        .loc_cont .loc_map_wrap .map_img_wrap {
          margin: 0 auto 30px; } }
      .loc_cont .loc_map_wrap .map_img_wrap .map_text {
        padding: 15px 20px;
        background: #FFF; }
        .loc_cont .loc_map_wrap .map_img_wrap .map_text .m01 {
          font-size: clamp(15px, 1.5vw, 18px);
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px solid #333; }
        .loc_cont .loc_map_wrap .map_img_wrap .map_text .m02 {
          font-size: clamp(12px, 1.25vw, 15px);
          line-height: 1.5; }
    .loc_cont .loc_map_wrap .map_link_btn {
      max-width: 596px;
      margin: 0 auto; }
      .loc_cont .loc_map_wrap .map_link_btn a {
        display: block;
        border: 1px solid #FFF;
        font-size: clamp(16px, 2.16vw, 26px);
        color: #FFF;
        text-align: center;
        padding: 15px 10px;
        position: relative;
        z-index: 1; }
        @media screen and (max-width: 480px) {
          .loc_cont .loc_map_wrap .map_link_btn a {
            padding: 10px; } }
        .loc_cont .loc_map_wrap .map_link_btn a:before, .loc_cont .loc_map_wrap .map_link_btn a:after {
          content: "";
          position: absolute;
          inset: 0; }
        .loc_cont .loc_map_wrap .map_link_btn a:before {
          background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%);
          z-index: -2; }
        .loc_cont .loc_map_wrap .map_link_btn a:after {
          opacity: 0;
          background: linear-gradient(to right, #0065ad 0%, #578ebf 50%, #00abcc 100%);
          z-index: -1;
          transition: 0.3s opacity ease-in-out 0s; }
        body:not(.mobile) .loc_cont .loc_map_wrap .map_link_btn a:hover:after {
          opacity: 1; }

.acc_cont {
  padding: clamp(60px, 10.9375vw, 110px) 0 clamp(100px, 15.625vw, 200px); }
  .acc_cont .text_group .cap_l {
    text-align: center; }
    @media screen and (max-width: 480px) {
      .acc_cont .text_group .cap_l {
        text-align: left;
        text-indent: -1em;
        padding-left: 1em; } }
  .acc_cont .map_image {
    max-width: 960px;
    margin: 0 auto; }
    .acc_cont .map_image p {
      margin-bottom: clamp(30px, 7.8125vw, 100px); }
  .acc_cont .build_out {
    background: linear-gradient(to right, #00abcc 0%, #578ebf 50%, #0065ad 100%);
    padding: 50px 20px 60px;
    font-size: clamp(11px, 1.44vw, 15px);
    color: #FFF; }
    @media screen and (max-width: 768px) {
      .acc_cont .build_out {
        padding: 25px 20px; } }
    @media screen and (max-width: 480px) {
      .acc_cont .build_out {
        font-size: 13px; } }
    .acc_cont .build_out .build_cap {
      margin-bottom: 10px; }
      @media screen and (max-width: 480px) {
        .acc_cont .build_out .build_cap {
          font-size: 15px; } }
      .acc_cont .build_out .build_cap.empty {
        text-indent: -9999px; }
        @media screen and (max-width: 480px) {
          .acc_cont .build_out .build_cap.empty {
            display: none; } }
    .acc_cont .build_out .build_out_in {
      max-width: 1040px;
      margin: 0 auto; }
      @media screen and (max-width: 480px) {
        .acc_cont .build_out .build_out_in {
          flex-direction: column; } }
      @media screen and (max-width: 480px) {
        .acc_cont .build_out .build_out_in .build_l {
          margin-bottom: 30px; } }
    .acc_cont .build_out table.ja {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%; }
      .acc_cont .build_out table.ja.no_justify th {
        text-align-last: inherit; }
      .acc_cont .build_out table.ja th {
        max-width: 130px;
        vertical-align: top;
        text-align-last: justify;
        text-align: left;
        padding: 6px 15px 6px 0px;
        font-weight: 500; }
        @media screen and (max-width: 480px) {
          .acc_cont .build_out table.ja th {
            padding: 5px 5px 5px 0;
            text-align-last: inherit;
            width: 100px; } }
      .acc_cont .build_out table.ja td {
        letter-spacing: normal;
        border-left: 1px solid #FFF;
        padding: 6px 15px; }
        @media screen and (max-width: 480px) {
          .acc_cont .build_out table.ja td {
            padding: 5px 0px 5px 10px; } }
      .acc_cont .build_out table.ja p {
        line-height: 1.4; }
        .acc_cont .build_out table.ja p.indent {
          text-indent: 1em; }
        .acc_cont .build_out table.ja p .indent3 {
          display: inline-block;
          text-indent: 3em; }

@media screen and (max-width: 480px) {
  .fix_img_wrap .cap_r {
    padding: 5px;
    text-align: left; } }

.site_cont {
  padding: clamp(60px, 10.9375vw, 110px) 0 0; }
  .site_cont .drawing_wrap {
    max-width: 950px;
    margin: 0 auto 80px;
    position: relative; }
    .site_cont .drawing_wrap .draw_img {
      position: relative; }
      .site_cont .drawing_wrap .draw_img .draw_cap {
        position: absolute;
        right: 5.5%;
        top: 19%;
        width: fit-content;
        font-size: 14px;
        padding: 5px 10px;
        line-height: 1.4;
        border: 1px solid #000;
        display: inline-block; }
        @media screen and (max-width: 480px) {
          .site_cont .drawing_wrap .draw_img .draw_cap {
            top: 12%;
            font-size: 10px;
            padding: 3px 5px; } }
    .site_cont .drawing_wrap .draw_icon {
      display: block;
      line-height: 0; }
      @media screen and (max-width: 480px) {
        .site_cont .drawing_wrap .draw_icon {
          width: 100%; } }
    .site_cont .drawing_wrap .cap_l {
      max-width: 920px;
      color: #0086D1;
      margin: 0 auto 20px; }
  .site_cont .diagram_wrap {
    max-width: 1280px;
    margin: 0 auto clamp(100px, 19.23vw, 200px); }
    @media screen and (max-width: 768px) {
      .site_cont .diagram_wrap {
        margin-bottom: 100px; } }
    .site_cont .diagram_wrap .unit_txt {
      text-align: right;
      font-size: 12px;
      margin-top: clamp(40px, 5.76vw, 60px); }
    .site_cont .diagram_wrap .sp_wrap {
      position: relative; }
      @media screen and (max-width: 480px) {
        .site_cont .diagram_wrap .sp_wrap {
          display: flex;
          justify-content: space-between; } }
      .site_cont .diagram_wrap .sp_wrap .table_l {
        display: none; }
        @media screen and (max-width: 480px) {
          .site_cont .diagram_wrap .sp_wrap .table_l {
            display: block; } }
      @media screen and (max-width: 480px) {
        .site_cont .diagram_wrap .sp_wrap .sp_swipe {
          position: relative;
          box-sizing: border-box;
          width: calc(100% - 48px);
          padding: 0;
          overflow: auto;
          -webkit-overflow-scrolling: touch; } }
      @media screen and (max-width: 480px) {
        .site_cont .diagram_wrap .sp_wrap .sp_swipe .dia_img img {
          max-width: none; } }
  .site_cont .spec_wrap {
    padding: clamp(50px, 6.6vw, 80px) 30px clamp(40px, 5vw, 60px);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../images/top/spec_bg.jpg"); }
    @media screen and (max-width: 480px) {
      .site_cont .spec_wrap {
        padding: 40px 30px;
        background-image: url("../images/top/spec_bg_sp.jpg"); } }
    .site_cont .spec_wrap .spec_in {
      max-width: 1180px;
      margin: 0 auto;
      justify-content: flex-start;
      font-size: clamp(12px, 1.44vw, 15px);
      color: #FFF; }
      @media screen and (max-width: 768px) {
        .site_cont .spec_wrap .spec_in {
          font-size: 11px; } }
      @media screen and (max-width: 480px) {
        .site_cont .spec_wrap .spec_in {
          flex-direction: column; } }
      .site_cont .spec_wrap .spec_in .spec_l {
        margin-right: 12%; }
        @media screen and (max-width: 1200px) {
          .site_cont .spec_wrap .spec_in .spec_l {
            margin-right: 5%; } }
        @media screen and (max-width: 768px) {
          .site_cont .spec_wrap .spec_in .spec_l {
            margin-right: 20px; } }
        @media screen and (max-width: 480px) {
          .site_cont .spec_wrap .spec_in .spec_l {
            margin-right: 0; } }
      .site_cont .spec_wrap .spec_in .spec_cap {
        margin-bottom: 10px; }
        .site_cont .spec_wrap .spec_in .spec_cap.empty {
          text-indent: -9999px; }
          @media screen and (max-width: 480px) {
            .site_cont .spec_wrap .spec_in .spec_cap.empty {
              display: none; } }
      .site_cont .spec_wrap .spec_in table.ja {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%; }
        .site_cont .spec_wrap .spec_in table.ja th {
          max-width: 150px;
          vertical-align: top;
          text-align: left;
          padding: 6px 15px 6px 0px;
          font-weight: 500; }
          @media screen and (max-width: 480px) {
            .site_cont .spec_wrap .spec_in table.ja th {
              width: 100px;
              padding: 3px 5px 3px 0px; } }
        .site_cont .spec_wrap .spec_in table.ja td {
          letter-spacing: normal;
          border-left: 1px solid #FFF;
          padding: 6px 15px; }
          @media screen and (max-width: 480px) {
            .site_cont .spec_wrap .spec_in table.ja td {
              padding: 3px 0px 3px 10px; } }
        .site_cont .spec_wrap .spec_in table.ja p {
          line-height: 1.4; }

.qua_cont {
  padding: clamp(60px, 10.9375vw, 110px) 0 clamp(50px, 7.8125vw, 100px); }
  .qua_cont .qua_item {
    flex-wrap: wrap;
    margin-top: clamp(40px, 5.46875vw, 70px);
    margin-bottom: clamp(60px, 8.334vw, 100px);
    gap: 80px 0; }
    @media screen and (max-width: 768px) {
      .qua_cont .qua_item {
        gap: 60px 0; } }
    @media screen and (max-width: 480px) {
      .qua_cont .qua_item {
        gap: 40px 0; } }
    .qua_cont .qua_item .item {
      width: 46.875%;
      position: relative; }
      @media screen and (max-width: 480px) {
        .qua_cont .qua_item .item {
          width: 100%; } }
      .qua_cont .qua_item .item.full {
        width: 100%; }
      .qua_cont .qua_item .item .item_ttl {
        font-size: clamp(15px, 1.5625vw, 20px);
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #000; }
        .qua_cont .qua_item .item .item_ttl.second {
          margin-top: 60px; }
          @media screen and (max-width: 768px) {
            .qua_cont .qua_item .item .item_ttl.second {
              margin-top: 40px; } }
      .qua_cont .qua_item .item .item_read {
        font-size: clamp(12px, 1.171875vw, 15px); }
      .qua_cont .qua_item .item .item_flex_in {
        margin-top: 20px; }
        @media screen and (max-width: 480px) {
          .qua_cont .qua_item .item .item_flex_in {
            flex-direction: column;
            gap: 30px 0; } }
        .qua_cont .qua_item .item .item_flex_in .item_read {
          width: 35%; }
          @media screen and (max-width: 480px) {
            .qua_cont .qua_item .item .item_flex_in .item_read {
              width: 100%; } }
        .qua_cont .qua_item .item .item_flex_in .image_box {
          width: 62.5%; }
          @media screen and (max-width: 480px) {
            .qua_cont .qua_item .item .item_flex_in .image_box {
              width: 100%; } }
          .qua_cont .qua_item .item .item_flex_in .image_box .image {
            margin-top: 0; }
      .qua_cont .qua_item .item sup {
        font-size: 10px;
        display: inline-block;
        vertical-align: text-top; }
      .qua_cont .qua_item .item .item_cap {
        font-size: 12px; }
        .qua_cont .qua_item .item .item_cap .small {
          font-size: 10px; }
      .qua_cont .qua_item .item .image_wrap {
        max-width: 440px;
        margin: 40px auto 0;
        position: relative; }
        @media screen and (max-width: 768px) {
          .qua_cont .qua_item .item .image_wrap {
            margin: 25px auto 0; } }
        .qua_cont .qua_item .item .image_wrap.bels {
          max-width: 300px; }
          @media screen and (max-width: 480px) {
            .qua_cont .qua_item .item .image_wrap.bels {
              max-width: 200px; } }
        .qua_cont .qua_item .item .image_wrap .image_cap {
          position: absolute;
          left: 0;
          top: 0;
          background: #000;
          font-size: 10px;
          color: #FFF;
          padding: 2px 5px; }
  .qua_cont .under_parse {
    max-width: 1200px;
    margin: 0 auto; }

.finger {
  display: none;
  position: absolute;
  width: 184px;
  height: 93px;
  top: 50%;
  left: 0%;
  right: 0;
  transform: translateY(-50%);
  margin: auto;
  justify-content: center;
  align-items: center;
  z-index: 1;
  animation: horizontal 1s ease-in-out infinite alternate; }
  @media screen and (max-width: 480px) {
    .finger {
      display: flex; } }

.sp_swipe.scrolled .finger {
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s ease-in-out 0s; }

@keyframes horizontal {
  0% {
    transform: translateX(-10%) translateY(-50%); }
  100% {
    transform: translateX(10%) translateY(-50%); } }
.float_btn {
  position: fixed;
  z-index: 2;
  right: 40px;
  bottom: 100px;
  max-width: 300px;
  width: 100%;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5); }
  @media screen and (max-width: 1200px) {
    .float_btn {
      right: 2%;
      bottom: 15px; } }
  @media screen and (max-width: 1024px) {
    .float_btn {
      max-width: 240px; } }
  @media screen and (max-width: 480px) {
    .float_btn {
      max-width: 200px;
      right: 15px; } }
  .float_btn a {
    padding: 20px 20px 30px;
    display: block;
    background: #FFF;
    transition: 0.3s opacity ease-in-out 0s; }
    @media screen and (max-width: 768px) {
      .float_btn a {
        padding: 15px 15px 25px; } }
    @media screen and (max-width: 480px) {
      .float_btn a {
        padding: 10px 15px 15px; } }
    body:not(.mobile) .float_btn a:hover {
      opacity: 0.8; }
    .float_btn a:before, .float_btn a:after {
      pointer-events: none;
      content: "";
      position: absolute;
      top: 10px;
      bottom: 10px;
      width: 50%;
      border: 3px solid; }
      @media screen and (max-width: 480px) {
        .float_btn a:before, .float_btn a:after {
          top: 5px;
          bottom: 5px; } }
    .float_btn a:before {
      left: 10px;
      border-color: #00AACB;
      border-right: none; }
      @media screen and (max-width: 480px) {
        .float_btn a:before {
          left: 5px; } }
    .float_btn a:after {
      right: 10px;
      border-color: #0065AD;
      border-left: none; }
      @media screen and (max-width: 480px) {
        .float_btn a:after {
          right: 5px; } }
    .float_btn a span {
      display: block;
      text-align: center; }
      .float_btn a span.txt {
        font-size: clamp(16px, 2vw, 24px);
        font-weight: 600;
        margin-bottom: 5px; }
        @media screen and (max-width: 768px) {
          .float_btn a span.txt {
            font-size: 18px; } }
        @media screen and (max-width: 480px) {
          .float_btn a span.txt {
            font-size: 14px; } }
  .float_btn .float_close {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    background: #0065AD;
    width: 25px;
    height: 25px; }
    .float_btn .float_close:before, .float_btn .float_close:after {
      position: absolute;
      content: "";
      display: block;
      transition: transform 0.4s;
      background: #FFF;
      inset: 0;
      margin: auto;
      width: 20px;
      height: 2px;
      z-index: 2; }
    .float_btn .float_close:before {
      transform: rotate(45deg); }
    .float_btn .float_close:after {
      transform: rotate(-45deg); }

/*# sourceMappingURL=top.css.map */