@charset "UTF-8";
/* 初期設定
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
}

/* モーダル等開いた時に後ろが動いてしまうのを防ぐ設定 */
html.is-hidden {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body {
  background-color: #fff;
  color: #000;
  font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}

a {
  color: #000;
  text-decoration: none;
}

img {
  border: 0;
  vertical-align: bottom;
  width: 100%;
}

:where(table) {
  border-collapse: collapse;
  width: 100%;
}

:where(.wrapper) {
  background-color: #fff;
  margin: 0 auto;
}

/* レスポンシブ消去
-------------------------------------------------- */
.pcB {
  display: none;
}

@media screen and (min-width: 769px) {
  .pcB {
    display: block;
  }
}
.spB {
  display: block;
}

@media screen and (min-width: 769px) {
  .spB {
    display: none;
  }
}
.pcI {
  display: none;
}

@media screen and (min-width: 769px) {
  .pcI {
    display: inline;
  }
}
.spI {
  display: inline;
}

@media screen and (min-width: 769px) {
  .spI {
    display: none;
  }
}
@media screen and (min-width: 1920px) {
  .bp {
    display: none;
  }
}
/* hederとfooterの設定
================================================== */
/* header
-------------------------------------------------- */
.header {
  background-color: #fff;
  border-top: 0.26042vw solid #009DA6;
  position: relative;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  .header {
    border-top: 2.13334vw solid #009DA6;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.88542vw 3.28125vw 0.9375vw 0;
  margin: 0 auto;
  width: 83.33334vw;
}
@media screen and (max-width: 768px) {
  .header__inner {
    padding: 5.86667vw 4vw 7.46667vw 5.33334vw;
    width: auto;
  }
}

.header__logoWrap {
  display: flex;
  align-items: center;
  gap: 0 2.29167vw;
}
@media screen and (max-width: 768px) {
  .header__logoWrap {
    gap: 0 4.26667vw;
  }
}

.header__logo {
  position: relative;
  width: 9.84375vw;
}
@media screen and (max-width: 768px) {
  .header__logo {
    width: 32.46134vw;
  }
}
.header__logo::after {
  content: "";
  border-right: 0.05209vw solid #C7C7C7;
  height: 2.08334vw;
  position: absolute;
  right: -1.14583vw;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .header__logo::after {
    border-right: 0.26667vw solid #C7C7C7;
    height: 7.46667vw;
    right: -2.13333vw;
  }
}
.header__logo a {
  display: block;
}

.header__pageName {
  color: #000;
  font-size: 0.78125vw;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .header__pageName {
    font-size: 3.2vw;
    font-weight: 600;
    line-height: 1.5;
  }
}

/* クボタグループリンク */
.header__group {
  width: 6.51042vw;
}
@media screen and (max-width: 768px) {
  .header__group {
    display: none;
  }
}
.header__group a {
  display: flex;
  align-items: center;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .header__group:hover {
    opacity: 0.5;
  }
}

/* 共通設定
================================================== */
/* 
-------------------------------------------------- */
.main__inner {
  padding: 0 0 14.66667vw;
}
@media screen and (min-width: 769px) {
  .main__inner {
    padding: 0 0 5.9375vw;
  }
}

/* 各セクション設定
================================================== */
/* kv
-------------------------------------------------- */
.kv {
  background-image: url("../img/kv_bg_sp.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .kv {
    background-image: url("../img/kv_bg_pc.png");
  }
}

.kv__inner {
  position: relative;
  height: 104.8vw;
}
@media screen and (min-width: 769px) {
  .kv__inner {
    height: 51.97917vw;
  }
}

.kv__ttl {
  width: 65.06667vw;
  position: absolute;
  top: 19.46667vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .kv__ttl {
    width: 44.40105vw;
    top: 4.0625vw;
  }
}

/* about
-------------------------------------------------- */
.about {
  margin-top: 10.66667vw;
}
@media screen and (min-width: 769px) {
  .about {
    margin-top: 2.39584vw;
  }
}

.about__inner {
  margin: 0 auto;
  width: 92vw;
}
@media screen and (min-width: 769px) {
  .about__inner {
    width: 57.29167vw;
  }
}

.about__ttl {
  color: #008486;
  font-size: 8.53334vw;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 16.53334vw;
}
@media screen and (min-width: 769px) {
  .about__ttl {
    font-size: 2.34375vw;
    line-height: 1.1556;
    margin-bottom: 3.125vw;
  }
}

.about__txt {
  color: #323232;
  font-size: 4.8vw;
  font-weight: 600;
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .about__txt {
    font-size: 1.25vw;
    line-height: 2;
  }
}
.about__txt + .about__txt {
  margin-top: 8.53334vw;
}
@media screen and (min-width: 769px) {
  .about__txt + .about__txt {
    margin-top: 2.5vw;
  }
}

.about__link {
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.4445;
  text-align: center;
  margin: 10.13334vw -4vw 0;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .about__link {
    font-size: 1.25vw;
    line-height: 2.6667;
    margin: 2.60417vw 0 0;
  }
}
.about__link a {
  color: #008486;
  display: block;
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .about__link a {
    margin: 0 auto;
    width: fit-content;
  }
}

/* message
-------------------------------------------------- */
.message {
  margin-top: 19.46667vw;
}
@media screen and (min-width: 769px) {
  .message {
    margin-top: 6.30209vw;
  }
}

.message__inner {
  margin: 0 auto;
  width: 78.66667vw;
}
@media screen and (min-width: 769px) {
  .message__inner {
    width: 57.29167vw;
  }
}

.message__list {
  display: flex;
  flex-direction: column;
  gap: 8vw 0;
}
@media screen and (min-width: 769px) {
  .message__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.23959vw 1.71875vw;
    margin: 0 auto;
    width: 53.125vw;
  }
}
@media screen and (min-width: 769px) {
  .message__list > li {
    width: 16.5625vw;
  }
}
.message__list a {
  display: block;
  height: 100%;
}

.message__list__name {
  background-image: url("../img/ttl_message_sp.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #333;
  font-size: 4.26667vw;
  font-weight: 700;
  line-height: 1.5;
  height: 10.13334vw;
  padding: 2.4vw 36vw 0.53334vw 3.73334vw;
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .message__list__name {
    background-image: url("../img/ttl_message_pc.png");
    background-size: cover;
    font-size: 0.9375vw;
    line-height: 1.4445;
    height: 1.92709vw;
    width: 100%;
    padding: 0.36459vw 6.77084vw 0.10417vw 0.78125vw;
  }
}

.message__list__txtWrap {
  background-color: #D2EDEB;
  color: #666;
  margin-top: -0.53333vw;
  padding: 4vw 5.06667vw 4.53334vw;
  font-size: 4.8vw;
  font-weight: 500;
  line-height: 1.7778;
  height: calc(100% - 10.13334vw);
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap {
    margin-top: -0.10416vw;
    padding: 2.96875vw 1.04167vw 1.35417vw 1.04167vw;
    font-size: 1.04167vw;
    line-height: 1.75;
    height: calc(100% - 1.92709vw);
  }
}
.message__list__txtWrap > p + p {
  margin-top: 8.53334vw;
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap > p + p {
    margin-top: 1.82292vw;
  }
}
.message__list__txtWrap .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.86667vw;
  margin-top: 4vw;
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap .btn {
    gap: 0 0.88542vw;
    justify-content: flex-end;
    margin-top: 2.34375vw;
    margin-right: 1.04167vw;
  }
}
.message__list__txtWrap .btn .btn__txt {
  color: #666;
  font-size: 4.26667vw;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap .btn .btn__txt {
    font-size: 1.04167vw;
    line-height: 1.5;
  }
}
.message__list__txtWrap .btn .btn__icon {
  display: block;
  width: 7.46667vw;
  position: relative;
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap .btn .btn__icon {
    width: 1.40625vw;
  }
}
.message__list__txtWrap .btn .btn__icon::after {
  content: "";
  background-color: #05A8A9;
  border-radius: 6vw;
  height: 0;
  width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transition: 0.6s;
}
@media screen and (min-width: 769px) {
  .message__list__txtWrap .btn .btn__icon::after {
    border-radius: 1.17188vw;
  }
}
.message__list__txtWrap .btn .btn__icon img {
  display: block;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  .message__list > li:hover .btn__icon::after {
    height: 2.34375vw;
    width: 2.34375vw;
  }
}

/* modal
-------------------------------------------------- */
.modal {
  background-color: #fff;
  display: none;
  height: 100dvh;
  width: 100dvw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.modal::before {
  content: "";
  background: linear-gradient(#fff 0%, #fff 30%, rgba(0, 168, 169, 0.7) 100%);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.modal.is-show {
  display: block;
}

.modal__inner {
  width: 92dvw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .modal__inner {
    width: 78.125dvw;
  }
}

.modal__wrap {
  background-color: #fff;
  filter: drop-shadow(10px 10px 10px rgba(5, 168, 169, 0.3));
  width: 100%;
  padding: 5.33334vw 6.66667vw 8vw;
}
@media screen and (min-width: 769px) {
  .modal__wrap {
    padding: 13.5261dvh 14.32292vw 7.74254dvh;
  }
}
.modal__wrap > div {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.modal__ttl {
  font-size: 5.33334vw;
  line-height: 1.45;
  text-align: center;
  margin-bottom: 10.13334vw;
  padding: 0 4vw;
}
@media screen and (min-width: 769px) {
  .modal__ttl {
    font-size: 2.1875vw;
    line-height: 1.4524;
    margin: 0 auto 4.6875vw;
    width: 31.77084vw;
    padding: 0 1.04167vw;
  }
}

.modal__txt {
  padding-right: 5.33334vw;
  height: 65.81709dvh;
}
@media screen and (min-width: 769px) {
  .modal__txt {
    padding-right: 1.04167vw;
    height: 45.24254dvh;
  }
}
.modal__txt p {
  font-size: 4.26667vw;
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .modal__txt p {
    font-size: 0.9375vw;
    line-height: 1.7778;
  }
}
.modal__txt p + p {
  margin-top: 8.53334vw;
}
@media screen and (min-width: 769px) {
  .modal__txt p + p {
    margin-top: 1.66667vw;
  }
}
.modal__txt p:last-of-type {
  margin-bottom: 2em;
}

.modal-closeWrap {
  display: flex;
  justify-content: center;
  margin-top: 2.99851dvh;
}
@media screen and (min-width: 769px) {
  .modal-closeWrap {
    margin-top: 0.74626dvh;
  }
}

.modal-close {
  background-color: initial;
  border: none;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0 3.2vw;
  font-size: 4vw;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (min-width: 769px) {
  .modal-close {
    gap: 0 0.9375vw;
    font-size: 1.25vw;
    line-height: 1.4584;
  }
}
.modal-close img {
  display: block;
  height: 2.66667vw;
  width: 2.66667vw;
}
@media screen and (min-width: 769px) {
  .modal-close img {
    height: 0.78125vw;
    width: 0.78125vw;
  }
}

/* swiper
-------------------------------------------------- */
.swiper {
  position: relative;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 1.06667vw;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 0.83334vw;
    width: 0.98959vw;
    height: 2.03125vw;
  }
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
}

.swiper-button-prev {
  left: 0;
}
@media screen and (min-width: 769px) {
  .swiper-button-prev {
    left: 8.85417vw;
  }
}

.swiper-button-next {
  right: 0;
}
@media screen and (min-width: 769px) {
  .swiper-button-next {
    right: 8.85417vw;
  }
}

.swiper-notification {
  display: none !important;
}

/* シンプルバー
-------------------------------------------------- */
.simplebar-track {
  background: #EBEBEB;
}

.simplebar-track .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

.simplebar-track .simplebar-scrollbar::before {
  background: #C8C8C8;
  width: 5px;
  left: 50%;
  transform: translateX(-50%);
}