@charset "utf-8";
/* -----------------------------------------------------------------
 base
----------------------------------------------------------------- */
body.is-locked {
  overflow: hidden;
  touch-action: none;
}

[id] {
  scroll-margin-top: calc(var(--site_header_margin_top) * 2 + var(--site_header_height));
}
.cmn_inner_base {
  width: min(1200px,90.66vw);
  margin-left: auto;
  margin-right: auto;
}
.cmn_inner_base_large {
  width: min(1200px,94.66vw);
  margin-left: auto;
  margin-right: auto;
}
.cmn_inner_wide {
  width: min(1520px,90.66vw);
  margin-left: auto;
  margin-right: auto;
}
.cmn_inner_narrow {
  width: min(1000px,90.66vw);
  margin-left: auto;
  margin-right: auto;
}

@media print, screen and (min-width: 768px) {
  .cmn_inner_narrow {
    width: min(80%,900px);
  }
}
/* -----------------------------------------------------------------
 5色カラー
----------------------------------------------------------------- */
/*----------色01----------*/
.bg_color01::before {
  background: var(--color_accent_red);
}
/*----------色02----------*/
.bg_color02::before {
  background: var(--color_accent_orange);
}
/*----------色03----------*/
.bg_color03::before {
  background: var(--color_accent_Yellow);
}
/*----------色04----------*/
.bg_color04::before {
  background: var(--color_accent_green);
}
/*----------色05----------*/
.bg_color05::before {
  background: var(--color_accent_blue);
}
/* -----------------------------------------------------------------
 オーバレイ
----------------------------------------------------------------- */
.js_overlay {
  background: #000;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  display: none;
}
/* -----------------------------------------------------------------
 要素をフェードイン
----------------------------------------------------------------- */
.js_fade_in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js_fade_in.js_show {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------
 .cmn_layer_float　背景ラインより前に表示させる
----------------------------------------------------------------- */
.cmn_layer_float {
  position: relative;
  z-index: 10;
}
/* -----------------------------------------------------------------
 .cmn_layer_svg　背景ラインのレイアウト調整用
----------------------------------------------------------------- */
.cmn_layer_svg {
  position: relative;
  z-index: 0;
}

/* -----------------------------------------------------------------
 font
----------------------------------------------------------------- */
.en {
  font-family: var(--font_en);
}
.jp {
  font-family: var(--font_jp);
}
/* -----------------------------------------------------------------
 段落
----------------------------------------------------------------- */
.cmn_text_base {
  margin-top: 1em;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
}

@media print, screen and (min-width: 768px) {
  .cmn_text_base {
    line-height: 2.15;
  }
}
/* -----------------------------------------------------------------
 cmn_img_trim
----------------------------------------------------------------- */
  .cmn_img_trim {
    position: relative;
    overflow: hidden;
    aspect-ratio: 534 / 284;
  }
  .cmn_img_trim img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transition: .5s ease;
  }
@media (hover: hover) and (pointer: fine) {
  a:hover .cmn_img_trim img  {
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* -----------------------------------------------------------------
 見出し（cmn_box_title01）
----------------------------------------------------------------- */
.cmn_box_title01 {
  position: relative;
}
.cmn_box_title01 .en {
  letter-spacing: .07em;
  font-weight: 500;
}
.cmn_box_title01 .jp {
  font-weight: 700;
}
.cmn_box_title01 .title_sub {
  font-weight: 700;
}
.cmn_box_title01::after {
  position: absolute;
  display: block;
  content: "";
  background: url("/img/common/deco_title01.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco02::after {
  top: -2.3rem;
  background: url("/img/common/deco_title02.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco03::after {
  top: -2.3rem;
  background: url("/img/common/deco_title03.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco05::after {
  top: -2.3rem;
  background: url("/img/common/deco05.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco08::after {
  top: -2.3rem;
  background: url("/img/common/deco08.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco09::after {
  top: -2.3rem;
  background: url("/img/common/deco09.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco10::after {
  top: -2.3rem;
  background: url("/img/common/deco10.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title01.deco11::after {
  top: -2rem;
  background: url("/img/common/deco11.svg") no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .cmn_box_title01::after {
    width: 2.6rem;
    height: 2.6rem;
    top: -1.5rem;
    left: 20.5rem;
  }
  .cmn_box_title01.deco03::after {
    width: 3.2rem;
    height: 2.3rem;
    top: -1.5rem;
    left: 9.5rem;
  }
  .cmn_box_title01.deco05::after {
    width: 2.2rem;
    height: 2.2rem;
    top: -1.8rem;
    left: 9.5rem;
  }
  .cmn_box_title01.deco08::after {
    top: -1.8rem;
    left: 9.5rem;
  }
  .cmn_box_title01.deco09::after {
    width: 3.2rem;
    height: 2.3rem;
    top: -1.8rem;
    left: 20rem;
  }
  .cmn_box_title01.deco10::after {
    width: 2.2rem;
    height: 2.2rem;
    top: -1.8rem;
    left: 9.5rem;
  }
  .cmn_box_title01.deco11::after {
    width: 3.2rem;
    height: 2.3rem;
    top: -1.8rem;
    left: 20rem;
  }

  .cmn_box_title01 .title_main {
    font-size: 1.9rem;
  }
  .cmn_box_title01 .title_sub {
    margin-top: .4em;
    font-size: 1.08rem;
  }
}

@media print, screen and (min-width: 768px) {
  .cmn_box_title01::after {
    width: 3.8rem;
    height: 3.8rem;
    top: -1.5rem;
    left: 29rem;
  }
  .cmn_box_title01.deco03::after {
    width: 4.6rem;
    height: 3.3rem;
    top: -1.6rem;
    left: 13.5rem;
  }
  .cmn_box_title01.deco05::after {
    width: 3.15rem;
    height: 3.15rem;
    top: -2.2rem;
    left: 14.5rem;
  }
  .cmn_box_title01.deco08::after {
    top: -2.2rem;
    left: 14.5rem;
  }
  .cmn_box_title01.deco09::after {
    width: 4.6rem;
    height: 3.3rem;
  }
  .cmn_box_title01.deco10::after {
    width: 3.15rem;
    height: 3.15rem;
    top: -2.2rem;
    left: 14.5rem;
  }
  .cmn_box_title01.deco11::after {
    width: 4.6rem;
    height: 3.3rem;
  }

  .cmn_box_title01 .title_main.en {
    font-size: 2.75rem;
  }
  .cmn_box_title01 .title_main.jp {
    font-size: 2.5rem;
  }
  .cmn_box_title01 .title_sub {
    margin-top: .7em;
    font-size: 1.5rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 見出し（cmn_box_title02）
----------------------------------------------------------------- */
.cmn_box_title02 {
  display: flex;
  justify-content: center;
}
.cmn_box_title02 .title_wrap {
  text-align: center;
}
.cmn_box_title02 .en {
  letter-spacing: .07em;
  position: relative;
  font-weight: 500;
}
.cmn_box_title02 .jp {
  font-weight: 700;
}
.cmn_box_title02 .title_sub {
  font-weight: 700;
}
.cmn_box_title02 .title_main::after,
.cmn_box_title02 .title_main::before {
  position: absolute;
  display: block;
  content: "";
}
.cmn_box_title02 .title_main::before {
  left: -4.5rem;
  bottom: .8rem;
  width: 3.25rem;
  height: 3.25rem;
  background: url("/img/common/deco03.svg") no-repeat;
  background-size: contain;
}
.cmn_box_title02 .title_main::after {
  right: -4rem;
  bottom: 1.5rem;
  width: 1.125rem;
  height: 1.125rem;
  background: url("/img/common/deco04.svg") no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .cmn_box_title02 .title_main {
    font-size: 1.9rem;
  }
  .cmn_box_title02 .title_sub {
    margin-top: .4em;
    font-size: 1.08rem;
  }
}

@media print, screen and (min-width: 768px) {
  .cmn_box_title02 .title_main.en {
    font-size: 2.75rem;
  }
  .cmn_box_title02 .title_main.jp {
    font-size: 2.5rem;
  }
  .cmn_box_title02 .title_sub {
    margin-top: .7em;
    font-size: 1.5rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 見出し（cmn_title01）
----------------------------------------------------------------- */
.cmn_title01 {
  display: flex;
  gap:.8em;
  margin-top: var(--margin_size_60);
}
.cmn_title01::before {
  content: "";
  border-radius: 3px;
}
@media screen and (max-width: 767px) {
  .cmn_title01 {
    font-size: 1.25rem;
  }
  .cmn_title01::before {
    width: .8em;
    height: .8em;
    margin-top: .15em;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_title01 {
    font-size: 1.5rem;
  }
  .cmn_title01::before {
    width: .7em;
    height: .7em;
    margin-top: .25em;
  }
}

/* -----------------------------------------------------------------
 見出し（cmn_title01_mini）
----------------------------------------------------------------- */
.cmn_title01_mini {
  display: flex;
  gap:.8em;
  margin-top: var(--margin_size_40);
  font-weight: 700;
}
.cmn_title01_mini::before {
  content: "";
  border-radius: 3px;
}
@media screen and (max-width: 767px) {
  .cmn_title01_mini {
    font-size: 1.125rem;
  }
  .cmn_title01_mini::before {
    width: .93em;
    height: .93em;
    margin-top: .2em;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_title01_mini {
    font-size: 1.125rem;
  }
  .cmn_title01_mini::before {
    width: .93em;
    height: .93em;
    margin-top: .2em;
  }
}



/* -----------------------------------------------------------------
 リンク下線アニメーション(hover_has_line)
----------------------------------------------------------------- */
a.hover_has_line {
  display: inline-block;
  position: relative;
}
a.hover_has_line::after {
  background-color: currentColor;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  a.hover_has_line:hover::after {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}

/* -----------------------------------------------------------------
 リンクボタン(cmn_btn01)
----------------------------------------------------------------- */
.cmn_btn01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: auto;
  max-width: 100%;
  min-height: 3.7rem;
  margin: var(--margin_size_60) auto 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  
  /* 通常時のtransition（hover解除時） */
  transition: color 0.4s ease 0s, border-color 0.4s ease 0s, background-color 0.4s ease 0s;
  z-index: 1;
}

/* 背景アニメーション */
.cmn_btn01::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color_txt_netz);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s ease;
  z-index: -1;
}

/* テキスト・アイコン */
.cmn_btn01 > .text {
  flex: 1;
  padding: 0 1em;
  text-align: center;
  font-weight: 700;
}
.cmn_btn01 > .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.35rem 0 0.35rem 1.35rem;
  border-color: transparent transparent transparent #000;
  transition: border-color 0.4s ease 0.1s, transform 0.4s ease;
}
.cmn_btn01 > .icon {
  width: 1em;
  transition: filter 0.4s ease;
}
/*---------- バリエーション ----------*/
/* 黒ボタン */
.cmn_btn01.bg_bk {
  background-color: #000;
  color: #fff;
}
.cmn_btn01.bg_bk > .arrow {
  border-color: transparent transparent transparent #fff;
}

/* 白ボタン */
.cmn_btn01.bg_wh {
  border: 1px solid var(--color_main);
  background-color: #fff;
  color: var(--color_main);
}
.cmn_btn01.bg_wh > .arrow {
  border-color: transparent transparent transparent #000;
}
@media screen and (max-width: 767px) {
  .cmn_btn01 {
    min-width: 19rem;
    padding: 1.4rem 1.4rem 1.3rem 2.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_btn01 {
    min-width: 17rem;
    padding: 1.5rem 1rem 1.5rem 2.3rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  /*---------- hover共通処理 ----------*/
  .cmn_btn01:hover {
    color: #fff;
    border-color: transparent;
    background-color: var(--color_txt_netz);
    transition-delay: 0.1s, 0.25s, 0.25s;
  }
  /* hover時：左→右に色が広がる */
  .cmn_btn01:hover::before {
    transform: scaleX(1);
  }
  .cmn_btn01:hover > .arrow {
    border-color: transparent transparent transparent #fff;
    transform: translateX(0.5rem);
  }  
  .cmn_btn01:hover > .icon {
    filter: invert(1);
  }
}

/* -----------------------------------------------------------------
 テーブル（cmn_table01）
----------------------------------------------------------------- */
.cmn_table01 {
  width: 100%;
  margin-top: var(--margin_size_60);
  border-bottom: 1px solid #ccc;
  border-collapse: collapse;
}

.cmn_table01 tr {
  border-top: 1px solid #ccc;
}

.cmn_table01 th,
.cmn_table01 td {
  width: 100%;
  vertical-align: top;
  border-top: none;
}
.cmn_table01 th {
  background: transparent;
  text-align: left;
  font-weight: bold;
}
.cmn_table01 td {
  line-height: 1.8;
  font-size: .92rem;
}
@media screen and (max-width: 767px) {
  .cmn_table01 th {
    width: 8rem;
    padding:1rem 1rem 0.5rem;
  }
  .cmn_table01 td {
    width: auto;
    padding:.8rem 1rem 0.5rem 0;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_table01 tr {
    margin-bottom: 0;
    border-top: none;
  }
  .cmn_table01 th,
  .cmn_table01 td {
    width: auto;
    border-top: 1px solid #d3d3d3;
  }
  .cmn_table01 th {
    width: 21%;
    padding: 1.9rem 2rem 1.5rem;
  }
  .cmn_table01 td {
    padding: 1.6rem 2rem 1.5rem;
  }
}
/* -----------------------------------------------------------------
 cmn_sec_entry
----------------------------------------------------------------- */
.cmn_entry_wrap {
  position: relative;
}
.cmn_sec_entry {
  position: relative;
  display: flex;
  margin-top: var(--margin_size_100);
  background: var(--color_txt_netz);
  border-radius: var(--margin_size_30);
  color: #fff;
  overflow: hidden;
}
.cmn_sec_entry::before {
  position: absolute;
  bottom: max(-6vw,-34px);
  right: -4%;
  display: block;
  content: "";
  width: min(82vw, 463px);
  height: min(calc(82vw * .31),142px);
  background: url("/img/common/logo02_wh.svg") no-repeat;
  background-size: contain;
  opacity: .1;
}
.cmn_sec_entry .box_title {
  position: relative;
  z-index: 2;
}
.cmn_sec_entry .box_title::before {
  position: absolute;
  top: -1.5rem;
  left: 12rem;
  display: block;
  content: "";
  width: 1.92rem;
  height: 1.75rem;
  background: url("/img/common/deco_square_double_wh.svg") no-repeat;
  background-size: contain;
  opacity: .4;
}
.cmn_sec_entry .box_title .title {
  display: flex;
  flex-direction: column;
}
.cmn_sec_entry .box_title .title .jp {
  font-weight: 700;
}
.cmn_sec_entry .box_title .title .en {
  font-weight: 500;
}
.cmn_sec_entry .box_title .text {
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .cmn_sec_entry {
    flex-direction: column;
    gap:4px;
    padding: 30px 18px;
  }
  .cmn_sec_entry .box_title .title {
    gap:.6rem;
  }
  .cmn_sec_entry .box_title .title .jp {
    font-size: 1.08rem;
  }
  .cmn_sec_entry .box_title .title .en {
    font-size: 4.16rem;
  }
  .cmn_sec_entry .box_title .text {
    margin-top: 8px;
    font-size: .92rem;
  }

}
@media print, screen and (min-width: 768px) {
  .cmn_sec_entry {
    justify-content: space-between;
    gap:4rem;
    padding: 100px min(10%,160px);
  }
  .cmn_sec_entry::before {
    bottom: max(-3vw,-48px);
    right: -4%;
    width: min(63vw, 1030px);
    height: min(calc(63vw * .31),315px);
  }
  .cmn_sec_entry .box_title::before {
    top: -2.3rem;
    left: 17rem;
    width: 48px;
    height: 42px;
  }
  .cmn_sec_entry .box_title {
    gap:.5rem;
  }
  .cmn_sec_entry .box_title .title {
  }
  .cmn_sec_entry .box_title .title .jp {
    font-size: min(2vw,1.5rem);
  }
  .cmn_sec_entry .box_title .title .en {
    font-size: min(8vw,6.25rem);
  }
  .cmn_sec_entry .box_title .text {
    margin-top: 2.2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 cmn_sec_entry box_nav
----------------------------------------------------------------- */
.cmn_sec_entry .box_nav {
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.cmn_sec_entry .box_nav .nav_item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: auto;
  border-bottom: #fff 1px solid;
  font-weight: 700;
  color: #fff;
}
/* テキスト・アイコン */
.cmn_sec_entry .box_nav .nav_item > .text {
  padding-left: .2rem;
  font-weight: 700;
}
.cmn_sec_entry .box_nav .nav_item > .arrow {
  width: 0;
  height: 0;
  margin-right: .3rem;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 1.23rem;
  border-color: transparent transparent transparent #fff;
  transition: border-color 0.4s ease 0.1s, transform 0.4s ease;
}

.cmn_sec_entry .box_nav .nav_item > .text {
  display: inline-block;
  position: relative;
}
.cmn_sec_entry .box_nav .nav_item > .text::after {
  background-color: currentColor;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  width: 100%;
}
/* リンクにホバーした際の下線の表示 */
.cmn_sec_entry .box_nav .nav_item:hover > .text::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


@media screen and (max-width: 767px) {
  .cmn_sec_entry .box_nav .nav_item {
    padding: 1.5rem 0;
    font-size: 1.25rem;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_sec_entry .box_nav {
    width: max(34%,25rem);
  }
  .cmn_sec_entry .box_nav .nav_item {
    padding: 1.88rem 0;
    font-size: min(2vw,1.5rem);
  }
}
@media (hover: hover) and (pointer: fine) {
  .cmn_sec_entry .box_nav .nav_item:hover > .arrow {
    border-color: transparent transparent transparent #fff;
    transform: translateX(0.5rem);
  }
}


/* -----------------------------------------------------------------
 cmn_page_header
----------------------------------------------------------------- */
.cmn_page_header {
  
}
.cmn_page_header .title {
  text-transform: uppercase;
  font-weight: 700;
}
.cmn_page_header .title_sub {
  font-weight: 700;
}
.cmn_page_header .title_main {
  margin-top: var(--margin_size_20);
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .cmn_page_header .title {
  }
  .cmn_page_header .title_sub {
    margin-top: var(--margin_size_60);
    font-size: 3.33rem;
  }
  .cmn_page_header .title_main {
    font-size: 1.25rem;
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_page_header .title {
  }
  .cmn_page_header .title_sub {
    margin-top: var(--margin_size_140);
    font-size: 5rem;
  }
  .cmn_page_header .title_main {
    font-size: 1.5rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}



/* -----------------------------------------------------------------
 cmn_breadcrumb
----------------------------------------------------------------- */
.cmn_breadcrumb {
  display: flex;
  gap: 1.1rem;
}
.cmn_breadcrumb::before {
  display: block;
  content: "";
  width: .75rem;
  height: .75rem;
  margin-top: .2rem;
  border-radius: 2px;
  background: #000;
}
.cmn_breadcrumb .list .item,
.cmn_breadcrumb .list .item a {
  line-height: 1;
  font-weight: 700;
}
.cmn_breadcrumb .list {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.cmn_breadcrumb .list .item {
  display: flex;
  align-items: center;
}
.cmn_breadcrumb .list .item + .item::before {
  display: block;
  content: "";
  width: 25px;
  height: 1px;
  margin-right: 1.1rem;
  border-radius: 2px;
  background: #aeaeae;
}
.cmn_breadcrumb .list .item a {
  color: #aeaeae;
}

@media screen and (max-width: 767px) {
  .cmn_breadcrumb {
    margin-top: var(--margin_size_80);
  }
  .cmn_breadcrumb .list {
  }
  .cmn_breadcrumb .list .item {
  }
  .cmn_breadcrumb .list .item a {
  }
}
@media print, screen and (min-width: 768px) {
  .cmn_breadcrumb {
    margin-top: var(--margin_size_100);
  }
  .cmn_breadcrumb .list {
  }
  .cmn_breadcrumb .list .item {
    font-size: .875rem;
  }
  .cmn_breadcrumb .list .item a {
  }
}
@media (hover: hover) and (pointer: fine) {

}


/* -----------------------------------------------------------------
 cmn_local_nav
----------------------------------------------------------------- */
.cmn_local_nav {
  position: relative;
  display: flex;
  margin-top: var(--margin_size_100);
  background: #fff;
  border-radius: 2.5rem;
  font-weight: 700;
}
.cmn_local_nav .list {
  display: flex;
}
.cmn_local_nav .list .item {
  display: flex;
  align-items: center;
}
.cmn_local_nav .list .item .link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: auto;
  font-weight: 700;
  color: var(--color_main);
}
/* テキスト・アイコン */
.cmn_local_nav .list .item .link > .text {
  padding-left: .2rem;
  font-weight: 700;
}
.cmn_local_nav .list .item .link > .arrow {
  width: 0;
  height: 0;
  margin-right: .3rem;
  border-style: solid;
  border-width: 0.28rem 0 0.28rem 1rem;
  border-color: transparent transparent transparent currentColor;
  transition: border-color 0.4s ease 0.1s, transform 0.4s ease;
}
.cmn_local_nav .list .item:nth-of-type(1) .link > .arrow {
  border-color: transparent transparent transparent var(--color_accent_red);
}
.cmn_local_nav .list .item:nth-of-type(2) .link > .arrow {
  border-color: transparent transparent transparent var(--color_accent_orange);
}
.cmn_local_nav .list .item:nth-of-type(3) .link > .arrow {
  border-color: transparent transparent transparent var(--color_accent_Yellow);
}
.cmn_local_nav .list .item:nth-of-type(4) .link > .arrow {
  border-color: transparent transparent transparent var(--color_accent_green);
}
.cmn_local_nav .list .item:nth-of-type(5) .link > .arrow {
  border-color: transparent transparent transparent var(--color_accent_blue);
}
.cmn_local_nav .list .item .link > .text {
  display: inline-block;
  position: relative;
}
.cmn_local_nav .list .item .link > .text::after {
  background-color: currentColor;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  width: 100%;
}
/* リンクにホバーした際の下線の表示 */
.cmn_local_nav .list .item .link:hover > .text::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

@media screen and (max-width: 767px) {
  .cmn_local_nav {
    flex-direction: column;
    gap: .7rem;
    padding: 20px 5vw;
  }
  .cmn_local_nav .list {
    flex-wrap: wrap;
    gap: .7rem .6rem;
  }
  .cmn_local_nav .list .item {
    flex: 1 1 calc(50% - .3rem);

  }
}
@media print, screen and (min-width: 768px) {
  .cmn_local_nav {
    justify-content: center;
    align-items: center;
    gap:1.3rem;
    min-height: 70px;
    border-radius: 9999px;
  }
  .cmn_local_nav .list {
    align-items: center;
    gap: 4.6rem;
  }

}
@media (hover: hover) and (pointer: fine) {
  .cmn_local_nav .list .item .link:hover > .arrow {
    border-color: transparent transparent transparent currentColor;
    transform: translateX(0.35rem);
  }
  .cmn_local_nav .list .item:nth-of-type(1) .link:hover > .arrow {
    border-color: transparent transparent transparent var(--color_accent_red);
  }
  .cmn_local_nav .list .item:nth-of-type(2) .link:hover > .arrow {
    border-color: transparent transparent transparent var(--color_accent_orange);
  }
  .cmn_local_nav .list .item:nth-of-type(3) .link:hover > .arrow {
    border-color: transparent transparent transparent var(--color_accent_Yellow);
  }
  .cmn_local_nav .list .item:nth-of-type(4) .link:hover > .arrow {
    border-color: transparent transparent transparent var(--color_accent_green);
  }
  .cmn_local_nav .list .item:nth-of-type(5) .link:hover > .arrow {
    border-color: transparent transparent transparent var(--color_accent_blue);
  }
}

/* -----------------------------------------------------------------
 xxxxxxxx
----------------------------------------------------------------- */
.xxxxxxxxxxxxx {

}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 xxxxxxxx
----------------------------------------------------------------- */
.xxxxxxxxxxxxx {

}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 xxxxxxxx
----------------------------------------------------------------- */
.xxxxxxxxxxxxx {

}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 xxxxxxxx
----------------------------------------------------------------- */
.xxxxxxxxxxxxx {

}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 xxxxxxxx
----------------------------------------------------------------- */
.xxxxxxxxxxxxx {

}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}