@charset "UTF-8";
/*
========================================================================= */
/* 　変数
========================================================================= */
:root {
  --cl-black: #000000;
  --cl-black-light: #888888;
  --cl-black-dark: #000000;
  --cl-white: #ffffff;
  --cl-white-light: #ffffff;
  --cl-white-dark: #cccccc;
  --cl-gray: #d9d9d9;
  --cl-gray-light: #f3f4ef;
  --cl-gray-dark: #888888;
  --cl-red: #ff0000;
  --cl-red-light: #ff6666;
  --cl-red-dark: #990000;
  --cl-blue: #5cc2f2;
  --cl-blue-light: #def3fc;
  --cl-blue-dark: #21345d;
  --cl-green: #86d16c;
  --cl-green-light: #abde9b;
  --cl-green-light-sub: #e7f6e2;
  --cl-green-dark: #65a350;
  --cl-yellow: #ffff00;
  --cl-yellow-light: #fdf7e5;
  --cl-yellow-dark: #999900;
  --cl-orange: #ffb463;
  --cl-orange-light: #f7d67d;
  --cl-orange-dark: #cc8400;
  --cl-purple: #800080;
  --cl-purple-light: #ffabab;
  --cl-purple-dark: #4d004d;
  --cl-pink: #ffc0cb;
  --cl-pink-light: #ffe4e9;
  --cl-pink-dark: #cc99a2;
  --cl-brown: #eeb578;
  --cl-brown-light: #c08040;
  --cl-brown-dark: #5a2e0c;
  --cl-cyan: #5cc2f2;
  --cl-cyan-light: #99ffff;
  --cl-cyan-dark: #009999;
  --cl-magenta: #ff00ff;
  --cl-magenta-light: #ff99ff;
  --cl-magenta-dark: #990099;
  --cl-lime: #00ff00;
  --cl-lime-light: #99ff99;
  --cl-lime-dark: #009900;
  --cl-navy: #000080;
  --cl-navy-light: #666699;
  --cl-navy-dark: #00004d;
  --cl-teal: #008080;
  --cl-teal-light: #66cccc;
  --cl-teal-dark: #004d4d;
  --cl-olive: #808000;
  --cl-olive-light: #cccc66;
  --cl-olive-dark: #4d4d00;
  --cl-maroon: #800000;
  --cl-maroon-light: #cc6666;
  --cl-maroon-dark: #4d0000;
  --cl-gold: #ffd700;
  --cl-gold-light: #ffec80;
  --cl-gold-dark: #ccac00;
  --cl-silver: #c0c0c0;
  --cl-silver-light: #e0e0e0;
  --cl-silver-dark: #808080;
  --txt-base: #26262a;
  --txt-sub-white: #fff;
  --txt-sub-orange: #fba343;
  --txt-sub-blue: #61b7ff;
  --txt-sub-yellow: #fac330;
  --txt-sub-green: #73e53e;
  --cl-must: var(--cl-blue);
  --family-base:
    "Zen Kaku Gothic New", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  --family-en:
    "Poppins", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  --letr_gap_base: 0.04em;
  --letr_gap_sub: 0.3em;
  --line_height_desc: 1.882;
}

/*　PC-SPサイズ変換表 */
@media screen and (min-width: 1281px) {
  :root {
    --var-1: clamp(0.9px, 0.0520833333vw, 1px);
    --var-1-sub: clamp(0.6666666667px, 0.0520833333vw, 1px);
  }
}
@media screen and (max-width: 1280px) {
  :root {
    --var-1: 0.9px;
    --var-1-sub: 0.6667px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --var-1: max(1px, 0.2666666667vw);
    --var-1-sub: max(1px, 0.2666666667vw);
  }
}
/*
========================================================================= */
/*  ある程度スタイルつくやつ(flx)
========================================================================= */
.flx {
  display: flex;
}

.flx_w {
  flex-wrap: wrap;
}

.flx_com {
  flex-direction: column;
}

.flx_rr {
  flex-direction: row-reverse;
}

.flx_cr {
  justify-content: center;
  align-items: center;
}

.flx_jc_c {
  justify-content: center;
}

.flx_jc_fs {
  justify-content: flex-start;
}

.flx_jc_fe {
  justify-content: flex-end;
}

.flx_sb {
  justify-content: space-between;
}

.flx_ai_c {
  align-items: center;
}

.flx_ai_fs {
  align-items: flex-start;
}

.flx_ai_fe {
  align-items: flex-end;
}

/*
========================================================================= */
/*  ホバーアニメーション
========================================================================= */
@media screen and (min-width: 768px) {
  .opacity_hover,
  .top_move,
  .btm_move,
  .left_move,
  .right_move,
  .zoom_in,
  .zoom_out,
  .btn_hover {
    transition: 0.3s;
  }
  .opacity_hover:hover {
    opacity: 0.8;
  }
  .top_move:hover {
    transform: translateY(calc(-1 * var(--var-1) * 10));
  }
  .btm_move:hover {
    transform: translateY(calc(var(--var-1) * 10));
  }
  .left_move:hover {
    transform: translateX(calc(var(--var-1) * 10));
  }
  .right_move:hover {
    transform: translateX(calc(-1 * var(--var-1) * 10));
  }
  .zoom_in:hover {
    transform: scale(1.02);
  }
  .zoom_out:hover {
    transform: scale(0.98);
  }
}
/*
========================================================================= */
/*  便利系
========================================================================= */
.vert_txt {
  writing-mode: vertical-rl;
}

.letr_base {
  letter-spacing: var(--letr_gap_base);
}

.letr_ttl {
  letter-spacing: var(--letr_gap_sub);
}

.desc {
  letter-spacing: var(--letr_gap_base);
  line-height: var(--line_height_desc);
}

.scroll {
  border: 1px solid var(--cl-black);
  overflow: auto;
}
.scroll .scroll_img {
  display: block;
  width: 1px;
  max-width: none;
}

.radius_base {
  border-radius: calc(var(--var-1) * 5);
}

.bg_grad {
  background: linear-gradient(135deg, rgb(92, 194, 242) 0%, rgb(92, 194, 242) 30%, rgb(134, 209, 108) 60%, rgb(134, 209, 108) 100%);
}

.bg_grad_sub {
  background: linear-gradient(135deg, rgba(92, 194, 242, 0.5) 0%, rgba(92, 194, 242, 0.5) 30%, rgba(134, 209, 108, 0.5) 60%, rgba(134, 209, 108, 0.5) 100%), var(--cl-blue);
}

/*
========================================================================= */
/*  margin
========================================================================= */
.m_blc {
  padding-block: calc(var(--var-1) * 100);
}

.m_adj {
  margin-top: -1px;
}

@media screen and (max-width: 767px) {
  .m_blc {
    padding-block: calc(var(--var-1) * 80);
  }
}
body {
  font-family: var(--family-base);
  color: var(--txt-base);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.inner_lg {
  width: 100%;
  margin: auto;
}

@media screen and (min-width: 768px) {
  body {
    font-size: calc(var(--var-1) * 17);
    line-height: 1.5;
  }
  .pc_none {
    display: none !important;
  }
  .wrap_all {
    min-width: 1280px;
    overflow: hidden;
  }
  .inner {
    width: calc(var(--var-1) * 1080);
    margin: 0 auto;
  }
  .inner_lg {
    max-width: calc(var(--var-1) * 1280);
  }
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: calc(var(--var-1) * 14);
    line-height: 1.8;
  }
  .sp_none {
    display: none !important;
  }
  .wrap_all {
    width: 100%;
    overflow: hidden;
  }
  .inner {
    width: 84%;
    margin: 0 auto;
  }
  .inner_lg {
    max-width: calc(var(--var-1) * 1280);
  }
}