@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: #8c8c8c;
  --cl-gray-light: #f3f4ef;
  --cl-gray-dark: #404040;
  --cl-red: #c80d2f;
  --cl-red-light: #de1136;
  --cl-red-dark: #990000;
  --cl-blue: #4a90e2;
  --cl-blue-light: #eaf4ff;
  --cl-blue-dark: #1e3a5f;
  --cl-green: #008000;
  --cl-green-light: #91e669;
  --cl-green-dark: #004d00;
  --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: #eab55f;
  --cl-brown-light: #f2f1ef;
  --cl-brown-dark: #e39c2a;
  --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: #1a1a1a;
  --txt-sub-white: #fff;
  --txt-sub-orange: #fba343;
  --txt-sub-blue: #61b7ff;
  --txt-sub-yellow: #fac330;
  --txt-sub-green: #73e53e;
  --cl-must: var(--cl-red);
  --family-base:
    "Zen Kaku Gothic New", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  --family-en:
    "Barlow Condensed", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  --letr_gap_base: 0.04em;
  --letr_gap_sub: 0.02em;
  --line_height_desc: 2.375;
  --line_height_desc_sub: 1.765;
}

/*　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);
}

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

.desc_sub {
  letter-spacing: var(--letr_gap_base);
  line-height: var(--line_height_desc_sub);
}

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

.cl_brown {
  color: var(--cl-brown-dark);
}

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

@media screen and (min-width: 768px) {
  .bg_deco {
    position: relative;
  }
  .bg_deco::before {
    content: "";
    position: absolute;
    top: calc(var(--var-1) * 240);
    right: 0;
    z-index: -1;
    display: block;
    width: calc(var(--var-1) * 1780);
    height: 0;
    background: var(--cl-brown-light);
    border-radius: calc(var(--var-1) * 80) 0 0 calc(var(--var-1) * 80);
  }
  .bg_deco_l {
    position: relative;
  }
  .bg_deco_l::before {
    content: "";
    position: absolute;
    top: calc(var(--var-1) * 240);
    left: 0;
    z-index: -1;
    display: block;
    width: calc(var(--var-1) * 1780);
    height: 0;
    background: var(--cl-brown-light);
    border-radius: 0 calc(var(--var-1) * 80) calc(var(--var-1) * 80) 0;
  }
}
/*
========================================================================= */
/*  margin
========================================================================= */
.m_blc {
  padding-block: calc(var(--var-1) * 80);
}

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

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

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

@media screen and (min-width: 768px) {
  body {
    font-size: calc(var(--var-1) * 17);
  }
  .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);
  }
}