:root {
  --wh: #fff;
  --bk: #000;
  --gy: #666;
  --gy_dark: #4d4d4d;
  --gy_right: #ddd;

  --subColor: #f3f3ed;
  --textColor: #0a0000;
  --secBg: #e6e6e6;
  --gy_line: #cccccc;

  --gradation_environment: linear-gradient(
    to right,
    rgba(1, 151, 70, 1),
    rgba(0, 104, 55, 1)
  );
  --slideMask: rgba(0, 60, 30, 0.6);

  /* color_transparent */
  --mainColor_10: rgba(15, 139, 67, 0.1);
  --mainColor_13: rgba(15, 139, 67, 0.13);
  --mainColor_20: rgba(15, 139, 67, 0.2);
  --mainColor_30: rgba(15, 139, 67, 0.3);

  /* break point */
  --bp: 1000px;

  --container_max-width: 1000px;
  --container_width_light: 900px;
  --container_width_100: 100%;
  --container_width_sp: 90%;

  /* for font-size or margin,padding */
  --s_10-14: clamp(10px, 0.73vw, 14px);
  --s_12-16: clamp(12px, 0.83vw, 16px);
  --s_14-18: clamp(14px, 0.93vw, 18px);
  --s_16-20: clamp(16px, 1.04vw, 20px);
  --s_18-22: clamp(18px, 1.14vw, 22px);
  --s_20-24: clamp(20px, 1.25vw, 24px);
  --s_22-26: clamp(22px, 1.35vw, 26px);
  --s_24-28: clamp(24px, 1.45vw, 28px);
  --s_26-30: clamp(26px, 1.56vw, 30px);

  /* half size@sp */
  --s_2_half: clamp(1px, 0.1vw, 2px);
  --s_2-5_half: clamp(1.25px, 0.13vw, 2.5px);
  --s_3_half: clamp(1.5px, 0.16vw, 3px);
  --s_4_half: clamp(2px, 0.21vw, 4px);
  --s_8_half: clamp(4px, 0.42vw, 8px);

  --s_10_half: clamp(5px, 0.52vw, 10px);
  --s_10_half: clamp(5px, 0.52vw, 10px);
  --s_11_half: clamp(5.5px, 0.57vw, 11px);
  --s_12_half: clamp(6px, 0.625vw, 12px);
  --s_14_half: clamp(7px, 0.73vw, 14px);
  --s_16_half: clamp(8px, 0.83vw, 16px);
  --s_18_half: clamp(9px, 0.93vw, 18px);

  --s_20_half: clamp(10px, 1.04vw, 20px);
  --s_22_half: clamp(11px, 1.14vw, 22px);
  --s_24_half: clamp(12px, 1.25vw, 24px);
  --s_25_half: clamp(12.5px, 1.3vw, 25px);
  --s_26_half: clamp(13px, 1.35vw, 26px);
  --s_28_half: clamp(14px, 1.45vw, 28px);

  --s_30_half: clamp(15px, 1.45vw, 30px);
  --s_32_half: clamp(16px, 1.67vw, 32px);
  --s_34_half: clamp(17px, 1.77vw, 34px);
  --s_36_half: clamp(18px, 1.87vw, 36px);
  --s_38_half: clamp(19px, 1.98vw, 38px);

  --s_40_half: clamp(20px, 2.08vw, 40px);
  --s_45_half: clamp(22.5px, 2.34vw, 45px);
  --s_46_half: clamp(23px, 2.4vw, 46px);
  --s_48_half: clamp(24px, 2.5vw, 48px);

  --s_50_half: clamp(25px, 2.6vw, 50px);
  --s_52_half: clamp(26px, 2.7vw, 52px);
  --s_55_half: clamp(27.5px, 2.86vw, 55px);

  --s_60_half: clamp(30px, 3.13vw, 60px);
  --s_68_half: clamp(34px, 3.54vw, 68px);

  --s_70_half: clamp(35px, 3.65vw, 70px);
  --s_78_half: clamp(39px, 4.06vw, 78px);

  --s_80_half: clamp(40px, 4.17vw, 80px);

  --s_90_half: clamp(45px, 4.69vw, 90px);
  --s_95_half: clamp(47.5px, 4.95vw, 95px);

  --s_100_half: clamp(50px, 5.2vw, 100px);
  --s_110_half: clamp(55px, 5.73vw, 110px);
  --s_116_half: clamp(58px, 6.04vw, 116px);
  --s_118_half: clamp(59px, 6.15vw, 118px);

  --s_120_half: clamp(60px, 6.25vw, 120px);

  --s_130_half: clamp(65px, 6.77vw, 130px);
  --s_140_half: clamp(70px, 7.29vw, 140px);
  --s_150_half: clamp(75px, 7.81vw, 150px);
  --s_160_half: clamp(80px, 8.33vw, 160px);

  --s_200_half: clamp(100px, 10.42vw, 200px);
  --s_220_half: clamp(110px, 11.46vw, 220px);
  --s_250_half: clamp(125px, 13vw, 250px);

  --s_300_half: clamp(150px, 15.6vw, 300px);
  --s_340_half: clamp(170px, 17.7vw, 340px);

  --s_400_half: clamp(200px, 20.8vw, 400px);

  --h1: clamp(14px, 1.25vw, 24px);
  --h2: clamp(25px, 2.08vw, 40px);
  --h3: clamp(17px, 1.82vw, 35px);
  --h4: clamp();
  --h5: clamp();
  --h6: clamp();
}

& html:focus-within {
  scroll-behavior: smooth;
}

/* sp width adjustment */
.w_sp {
  width: var(--container_width_sp);
  margin: 0 auto;
}

.sp_only {
  display: block;

  @media screen and (min-width: 768px) {
    display: none;
  }
}

.pc_only {
  display: none;

  @media screen and (min-width: 1000px) {
    display: block;
  }
}

/* text-align */
.ta-center_pc {
  text-align: justify;

  @media screen and (min-width: 1000px) {
    text-align: center;
  }
}

/* font-family */
& body {
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  color: rgb(102, 102, 102);
}

.sec-title {
  font-optical-sizing: auto;
  font-weight: 100;
}

/* color */
.c_wh {
  color: var(--wh);
}

.c_mainColor_dark02,
.mainColor_dark02 {
  color: var(--mainColor_dark02);
}

.bg_wh {
  background-color: var(--wh);
}

/* font-weight */
.fw_bold {
  font-weight: bold;
}

.bg_gray {
  background-color: var(--footerBg);
}

.content {
  max-width: 1300px;
  width: 84%;
  margin: 0 auto;

  &._sp {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
}

& div[class*="narrowest"] {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* letter-spacing */
[class*="name"],
.name {
  letter-spacing: var(--ls-name);
}

[class*="intro"],
.intro {
  letter-spacing: var(--ls-name);
}

[class*="title"],
.title {
  letter-spacing: var(--ls-title);
}

[class*="sub"],
.sub {
  letter-spacing: var(--ls-sub);
}

[class*="disc"] {
  letter-spacing: var(--ls-discription);
}

[class*="deco"] {
  letter-spacing: var(--ls-deco);
}

[class*="lead"],
.lead {
  letter-spacing: var(--ls-lead);
  line-height: 2;
}

[class*="item"],
.item {
  letter-spacing: var(--ls-item);
}

.w100_m {
  max-width: 90%;
  width: 100%;
  margin: 0 auto;
}

.sec-inner {
  max-width: var(--container_max-width);
  width: var(--container_width_sp);
  margin: 0 auto;

  @media screen and (min-width: 1000px) {
    max-width: 100%;
    width: 100%;
  }
}

.img-wrapper img {
  width: 100%;
}

/*アニメーション要素のスタイル*/
.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  /* 下に30pxの位置から */
  transition:
    opacity 0.8s,
    transform 0.8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

.fadeIn.is-show {
  opacity: 1;
}

/*アニメーション要素のスタイル*/
.inview {
  opacity: 0;
  transform: translateY(20px);
  transition-duration: 1s;
  transition-delay: 0s;
}

.inview.is-show {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 1s;
  transition-delay: 0s;
}

/*アニメーション要素までスクロールした時のスタイル*/
.active {
  opacity: 1;
  transition: all 2s ease-in-out;
  /* transform: translate(0, 0); */
  transition-duration: 1.5s;
  transition-delay: 0s;
}
.innerBox {
  text-align: left;
  width: 94%;
  margin: 0 3%;
}