@charset "UTF-8";
/*
========================================================================= */
/* 　変数
========================================================================= */
:root {
  --cl-black: #000000;
  --cl-black-light: #666666;
  --cl-black-dark: #000000;
  --cl-white: #ffffff;
  --cl-white-light: #ffffff;
  --cl-white-dark: #cccccc;
  --cl-gray: #808080;
  --cl-gray-light: #c0c0c0;
  --cl-gray-dark: #404040;
  --cl-red: #ff0000;
  --cl-red-light: #ff6666;
  --cl-red-dark: #990000;
  --cl-blue: #a3d5ff;
  --cl-blue-light: #eaf5ff;
  --cl-blue-dark: #161616;
  --cl-green: #4fb84f;
  --cl-green-light: #91e669;
  --cl-green-dark: #004d00;
  --cl-yellow: #ffff00;
  --cl-yellow-light: #fdf7e5;
  --cl-yellow-dark: #999900;
  --cl-orange: #ff9027;
  --cl-orange-light: #ffb042;
  --cl-orange-dark: #cc8400;
  --cl-purple: #800080;
  --cl-purple-light: #ffabab;
  --cl-purple-dark: #4d004d;
  --cl-pink: #fff3e0;
  --cl-pink-light: #faf4eb;
  --cl-pink-dark: #cc99a2;
  --cl-brown: #8b4513;
  --cl-brown-light: #c08040;
  --cl-brown-dark: #5a2e0c;
  --cl-cyan: #00ffff;
  --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: #343434;
  --txt-sub-white: #fff;
  --txt-sub-orange: #fba343;
  --txt-sub-blue: #61b7ff;
  --txt-sub-yellow: #fac330;
  --txt-sub-green: #73e53e;
  --cl-must: var(--cl-orange-light);
  --family-base:
    "Zen Kaku Gothic Antique", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", sans-serif;
  --family-en:
    "Homemade Apple", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  --family-nav:
    "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    sans-serif;
  --letr_gap_base: 0.08em;
  --letr_gap_ttl: 0.1em;
  --line_height_desc: 2;
}

/*　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: clamp(0.6666666667px, 0.0520833333vw, 1px);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --var-1: 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_sb {
  justify-content: space-between;
}

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

.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,
  .img_zoomin,
  .img_zoomout,
  .btn_hover {
    transition: 0.3s;
  }
  .opacity_hover:hover {
    opacity: 0.7;
  }
  .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));
  }
  .img_zoomin:hover {
    transform: scale(1.05);
  }
  .img_zoomout:hover {
    transform: scale(0.99);
  }
}
/*
========================================================================= */
/*  便利系
========================================================================= */
.vert_txt {
  writing-mode: vertical-rl;
}

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

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

.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;
}

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

@media screen and (max-width: 767px) {
  .m_blc {
    padding-block: calc(var(--var-1) * 80);
  }
}
/*
========================================================================= */
/*  その他
========================================================================= */
.orange_txt {
  color: var(--cl-orange);
}

.green_txt {
  color: var(--cl-green);
}

.ttl_bg_orange {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #fee5c0, #fee5c0 3px, transparent 3px, transparent 6px) bottom left/100% 50% no-repeat;
}

.ttl_bg_green {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #cceecc, #cceecc 3px, transparent 3px, transparent 6px) bottom left/100% 50% no-repeat;
}

.radius_img {
  border-radius: calc(var(--var-1) * 10);
}

body {
  font-family: var(--family-base);
  color: var(--txt-base);
  font-weight: 500;
}

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

@media screen and (min-width: 768px) {
  body {
    font-size: calc(var(--var-1) * 18);
    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 {
    width: 84%;
    margin: 0 auto;
  }
}
/*
========================================================================= */
/*  header
========================================================================= */
/*
========================================================================= */
/*  nav
========================================================================= */
.gnav_list {
  gap: calc(var(--var-1) * 16);
}