@charset "UTF-8";
:root {
  --base-width: 740px;
  --inner-width: 690px;
  --color-base: #492f21;
  --color-base-hover: #5a1f00;
  --color-key1: #f89a92;
  --color-key2: #ff5585;
  --color-key3: #ff3770;
  --color-line: #0eba00;
  --color-line-hover: #0c9700;
  --color-epark: #8fc31f;
  --alert-color: #cd0000;
  --link-color: #e8005d;
  --linkVisited-color: #bb004b;
  --linkHover-color: #e8005d;
  --btn-color: #0f41af;
  --btn-width: 32.5rem;
  --btn-height: 5.625rem;
  --radius1: .625rem;
  --radius2: 1.25rem;
  --radius3: 2.5rem;
  --fontset_noto: "Noto Sans JP",-apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  --fontset_zen: "Zen Kaku Gothic New",-apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  --fsize8: 0.5rem;
  --fsize9: 0.56rem;
  --fsize10: 0.63rem;
  --fsize11: 0.69rem;
  --fsize12: 0.75rem;
  --fsize13: 0.82rem;
  --fsize14: 0.88rem;
  --fsize15: 0.94rem;
  --fsize16: 1rem;
  --fsize17: 1.07rem;
  --fsize18: 1.13rem;
  --fsize19: 1.19rem;
  --fsize20: 1.25rem;
  --fsize21: 1.32rem;
  --fsize22: 1.38rem;
  --fsize23: 1.44rem;
  --fsize24: 1.50rem;
  --fsize25: 1.57rem;
  --fsize26: 1.63rem;
  --fsize27: 1.69rem;
  --fsize28: 1.75rem;
  --fsize29: 1.82rem;
  --fsize30: 1.88rem;
  --fsize31: 1.94rem;
  --fsize32: 2rem;
  --fsize33: 2.07rem;
  --fsize34: 2.13rem;
  --fsize35: 2.19rem;
  --fsize36: 2.25rem;
  --fsize37: 2.32rem;
  --fsize38: 2.38rem;
  --fsize39: 2.44rem;
  --fsize40: 2.50rem;
  --fsize41: 2.57rem;
  --fsize42: 2.63rem;
  --fsize43: 2.69rem;
  --fsize44: 2.75rem;
  --fsize45: 2.82rem;
  --fsize46: 2.88rem;
  --fsize47: 2.94rem;
  --fsize48: 3.00rem;
  --fsize49: 3.07rem;
  --fsize50: 3.13rem;
  --fsize51: 3.19rem;
  --fsize52: 3.25rem;
  --fsize53: 3.32rem;
  --fsize54: 3.38rem;
  --fsize55: 3.44rem;
  --fsize56: 3.50rem;
  --fsize57: 3.57rem;
  --fsize58: 3.63rem;
  --fsize59: 3.69rem;
  --fsize60: 3.75rem;
  --fsize61: 3.82rem;
  --fsize62: 3.88rem;
  --fsize63: 3.94rem;
  --fsize64: 4.00rem;
  --fsize65: 4.07rem;
  --fsize66: 4.13rem;
  --fsize67: 4.19rem;
  --fsize68: 4.25rem;
  --fsize69: 4.32rem;
  --fsize70: 4.38rem;
  --fsize71: 4.44rem;
  --fsize72: 4.50rem;
  --easeInSine: cubic-bezier(0.12, 0, 0.39, 0);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
  --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
  --easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
  --easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);
  --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);
  --easeInCubic: cubic-bezier(0.32, 0, 0.67, 0);
  --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
  --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  --easeInQuart: cubic-bezier(0.5, 0, 0.75, 0);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);
  --easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);
  --easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
  --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
  --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
  --easeInBack: cubic-bezier(0.36, 0, 0.66, -0.56);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutMoment: cubic-bezier(0, 0.8, 0, 1);
  --easeInMoment: cubic-bezier(1, 0, 0.8, 0);
  --linearCenter: linear(0, 0.45, 0.48, 0.52, 0.55, 1);
  --linearInOut: linear(0, 0.08, 0.32, 0.68, 0.92, 1);
  --linearBounce: linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1);
}

.catnav > ul {
  max-width: 1200px;
  width: 94%;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 60px;
}
.catnav > ul > li {
  width: 240px;
}
.catnav > ul > li > a {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .catnav > ul > li > a:hover .catnav_name:before {
    transform: rotate(90deg) translateX(0.13rem);
  }
}

.catnav_name {
  display: table;
  font-size: 18px;
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin: 20px auto 0 !important;
  padding-right: 1.13rem;
  color: var(--color-base);
  position: relative;
}
.catnav_name:before {
  content: "";
  width: 0.38rem;
  height: 0.63rem;
  background: url(/common/images/cmn_ar_br.svg) no-repeat left top;
  background-size: contain;
  position: absolute;
  right: 0;
  top: calc(50% - 0.19rem);
  transform: rotate(90deg);
  transition: transform 0.1s var(--easeInSine);
}

.cat {
  max-width: 1200px;
  width: 94%;
  padding-top: 100px;
  margin: 0 auto;
}

.cat_head {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.cat_bg {
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius3);
  padding: 60px 0;
}

.cat_list {
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 40px;
}
.cat_list > li {
  width: 330px;
  text-align: left;
}

.cat_list_img {
  border-radius: var(--radius2);
  overflow: hidden;
}

.cat_list_head {
  font-weight: bold;
  margin-top: 20px;
  font-size: 16px;
}

.cat_list_txt {
  margin-top: 10px;
  font-size: 16px;
}

.cat_list_link {
  font-size: 16px;
  margin-top: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 10px;
}

.cat_list_linkBtn {
  line-height: 1;
  display: block;
  color: var(--color-base);
  padding: 8px 10px 10px;
  background: #fff;
  border: 2px solid var(--color-base);
  border-radius: var(--radius1);
  transition: background 0.3s var(--easeOutSine), color 0.3s var(--easeOutSine);
}
@media (min-width: 1024px) {
  .cat_list_linkBtn:hover {
    background: var(--color-base);
    color: #fff;
  }
}

@media screen and (max-width: 1260px) {
  .catnav > ul {
    gap: 4.76vw;
  }
  .catnav > ul > li {
    width: 19.05vw;
  }
  .catnav_name {
    font-size: var(--fsize18);
    margin: 1.25rem auto 0 !important;
  }
  .cat {
    padding-top: 6.25rem;
  }
  .cat_head {
    font-size: var(--fsize26);
    margin-bottom: 1.25rem;
  }
  .cat_bg {
    padding: 3.75rem 0;
  }
  .cat_list {
    gap: 2.5rem;
  }
  .cat_list > li {
    width: 26.19vw;
  }
  .cat_list_head {
    font-size: var(--fsize16);
    margin-top: 1.25rem;
  }
  .cat_list_txt {
    font-size: var(--fsize16);
    margin-top: 0.63rem;
  }
  .cat_list_link {
    font-size: var(--fsize16);
    margin-top: 1.25rem;
    gap: 0.63rem;
  }
  .cat_list_linkBtn {
    padding: 0.5rem 0.63rem 0.63rem;
  }
}
@media screen and (max-width: 1024px) {
  .catnav > ul {
    width: 21.88rem;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: 2.5rem 6%;
  }
  .catnav > ul > li {
    width: 46%;
  }
  .catnav_name {
    font-size: var(--fsize12);
    margin-top: 0.63rem !important;
    padding-right: 0.81rem !important;
  }
  .catnav_name:before {
    top: calc(50% - 0.25rem) !important;
  }
  .cat {
    width: 21.88rem;
    padding-top: 5rem;
  }
  .cat_head {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .cat_bg {
    padding: 1.25rem 1.25rem 2.5rem;
  }
  .cat_list {
    gap: 2.5rem;
  }
  .cat_list > li {
    width: 100%;
    text-align: left;
  }
  .cat_list_head {
    margin-top: 1.25rem;
    font-size: var(--fsize14);
  }
  .cat_list_txt {
    margin-top: 0.63rem;
    font-size: var(--fsize14);
  }
  .cat_list_link {
    margin-top: 0.94rem;
    font-size: var(--fsize14);
    gap: 0.63rem;
  }
  .cat_list_linkBtn {
    padding: 0.5rem 0.63rem 0.63rem;
  }
}