:root {
  --main-color: #fcc800;
  --main-color-rgb: 252, 200, 0;
  --accent-color: #00a0e2;
  --accent-color-rgb: 0, 160, 226;
  --font-color: #334149;
  --font-color-rgb: 51, 65, 73;
  --white-color: #ffffff;
  --gray-color: #dfdfdf;
  --gray2-color: #BABABA;
  --bg-gray-color: #f9f9f9;
  --bg-C-color: #FEFAEA;
  --bg-B-color: #ECF6FB;
  --bg-gradation-color: linear-gradient(90deg, #FFF8DC 20%, #DDF4FF 100%);
  --gradation-color: linear-gradient(90deg, #fcc800 60%, #00a0e2 100%);

  --font-family: "Noto Sans JP", sans-serif;
  --font-family-en: "Montserrat", sans-serif;

  --box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);

  --border-radius: 4px;
  --header-h: 80px;
  --mobile-cta-h: 0px;
  /* 固定ヘッダー。Iframely 等が親 DOM に高い z-index を付けることがあるため十分上に */
  --z-header: 10000;
  --z-header-sub: 10001;
}

/* ----------------------------------------------------
   Basic setting:
------------------------------------------------------- */

html {
  font-size: 14px; /* モバイルファースト: 基本は14px */
  box-sizing: border-box;
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  background: var(--white-color);
  color: var(--font-color);
  padding-bottom: var(--mobile-cta-h, 0px);
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.mgb_2rem {margin-bottom: 2rem;}
.mgt_2rem {margin-top: 2rem;}

/* 区切り線（全ページ共通。リッチテキスト内の hr も同じ見た目。CMS 側の hr 用スタイル設定は不要） */
hr {
  display: block;
  width: 100%;
  height: 0;
  /* legacy common.css では 4rem。本文内は second.css の .rich-text hr で詰める */
  margin: 4rem 0;
  padding: 0;
  border: 0;
  border-top: solid 1px var(--gray-color);
  background: none;
}

strong {
  color: var(--main-color);
  font-weight: bold;
}

.inner_box {
  margin: 0 auto;
  position: relative;
  max-width: 1200px;
  padding: 0 1.5rem; /* モバイルファースト: 基本は1rem */
}
@media (min-width: 1024px) {
  .inner_box {
    padding: 0 2rem;
  }
}

.outer_box {
  padding: 0 clamp(1.5rem, -12.81rem + 18.75vw, 5rem);
}


.center {text-align: center;}
.small {font-size: 0.875rem;}
.pt0{padding-top: 0!important;}

/* モバイルファースト: スマホ向けクラスはデフォルトで表示 */
.Forsp {
  display: block;
}
.Forpc {
  display: none;
}
@media (min-width: 768px) {
  .Forsp {
    display: none;
  }
  .Forpc {
    display: block;
  }
}

/* 通常ボタン装飾 */
.lnk_btn a{
  display: inline-block;
  padding: 0.8rem 5rem 0.8rem 1rem;
  border: solid 2px var(--font-color);
  border-radius: var(--border-radius);
  position: relative;
  font-weight: 700;
  background: var(--white-color);
  margin-top: 4rem;
}
.lnk_btn a::after{
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/arrow_g.svg) no-repeat center / contain;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s
}
.lnk_btn.blank a::after{
  background: url(../img/arrow_blank_g.svg) no-repeat center / contain;
}
@media (min-width: 768px) {
  .lnk_btn a:hover::after{
    right: 0.5rem;
    transition: 0.3s
  }
  .lnk_btn.blank a:hover::after{
    right: 0.7rem;
    top: 45%;
    transition: 0.3s
  }
}

/* CTAボタン装飾 */
.cta_btn a{
  background: var(--main-color);
  padding: 0.8rem 5rem 0.8rem 1rem;;
  color: var(--white-color);
  border-radius: var(--border-radius);
  position: relative;
  display: inline-block;
  font-weight: 700;
}
.cta_btn.toB a{
  background: var(--accent-color);
}

.cta_btn a::after{
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/arrow_y.svg) no-repeat center / contain;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s
}
.cta_btn.toB a::after{
  background: url(../img/arrow_b.svg) no-repeat center / contain;
}
@media (min-width: 768px) {
  .cta_btn a:hover::after{
    right: 0.5rem;
    transition: 0.3s
  }
}

/* downloadボタン装飾 */

.download_btn {
  display: inline-block;
  padding: 0.8rem 5rem 0.8rem 1rem;
  border: solid 2px var(--accent-color);
  border-radius: var(--border-radius);
  position: relative;
  font-weight: 700;
  background: var(--white-color);
  color: var(--accent-color);
  margin-top: 1rem;
}

.download_btn::after{
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/arrow_b_w.svg) no-repeat center / contain;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s
}
@media (min-width: 768px) {
  .article_area a:hover .download_btn::after{
    right: 0.5rem;
    transition: 0.3s
  }  
}


.coming_soon {
  display: grid;
}  

.coming_soon p{
  font-weight: 700;
  font-family: var(--font-family-en);
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border: solid 2px var(--font-color);
  margin: 2rem auto 0;
  display: inline-block;
  border-radius: var(--border-radius);
}

.load_more_wrap {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding-bottom: 0.25rem;
}

/* 一覧の「もっと見る」: 下方向へ件数が足される想定の下向き矢印＋フォントカラー */
.load_more_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.95rem 4.35rem 0.95rem 1.75rem;
  border: solid 2px var(--font-color);
  border-radius: var(--border-radius);
  background: var(--white-color);
  color: var(--font-color);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
}

.load_more_btn::after {
  content: "";
  display: block;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--font-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 50% auto;
  transform: translate3d(0, -50%, 0);
  transition: 0.3s;
  pointer-events: none;
}

.load_more_btn:focus-visible {
  outline: 2px solid var(--font-color);
  outline-offset: 3px;
}

/* ボタン本体のホバー装飾はなし。矢印だけ下へ（マウスでも :focus-visible が付かないため） */
.load_more_btn:hover::after,
.load_more_btn:focus-visible::after,
.load_more_btn:active::after {
  transform: translate3d(0, calc(-50% + 0.3rem), 0);
}

@media (prefers-reduced-motion: reduce) {
  .load_more_btn::after {
    transition: none;
  }

  .load_more_btn:hover::after,
  .load_more_btn:focus-visible::after,
  .load_more_btn:active::after {
    transform: translate3d(0, -50%, 0);
  }
}




/* ----------------------------------------------------
   header setting
------------------------------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  box-shadow: var(--box-shadow);
}

@media (min-width: 768px) {
  header {
    position: static;
    box-shadow: none;
  }
}


/* header_sub */
.header_sub {
  padding: 0.3rem clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
  background: var(--bg-gray-color);
  font-size: 0.75rem;
  font-weight: 500;
}

.header_sub.sub-src {
  display: none;
}

@media (min-width: 768px) {
  .header_sub.sub-src {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
  }
}

.header_sub ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .header_sub ul {
    margin-top: 0;
  }
}

.header_sub ul a{
  text-decoration: underline;
}
.header_sub ul a:hover{
  text-decoration: none;
}


/* header_main（モバイルファースト：SP は上段バー固定＋下固定CTA） */
.header_main {
  position: relative;
  display: block;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-weight: bold;
}

.header_main_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.35rem, 0.9vw, 0.9rem);
  min-width: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 2);
  padding: clamp(0.5rem, 0.367rem + 0.28vw, 0.7rem) clamp(1rem, 4vw, 1.35rem);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--box-shadow);
  transition: transform 0.28s ease, visibility 0.28s ease;
  will-change: transform;
}

.header_main_bar.header-main-bar--hidden {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .header_main_bar {
    transition: none;
  }
}

.header_main:has(.menu.open) .cta_nav {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.header_nav.menu.open {
  z-index: calc(var(--z-header) + 5);
}

/* 全面ドロワーより手前に上段バーを載せ、×ボタンで閉じられるようにする */
.header_main:has(.menu.open) .header_main_bar {
  z-index: calc(var(--z-header) + 10);
}

.cta_nav {
  display: flex;
  text-align: center;
  align-items: stretch;
  /* SP 下固定バーはやや大きめ。768px 以上は下のメディアクエリで従来サイズに */
  font-size: clamp(0.9rem, 0.78rem + 0.55vw, 1.0625rem);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) + 1);
  justify-content: stretch;
  gap: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin: 0;
  border-radius: 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.cta_nav li {
  flex: 1 1 50%;
  min-width: 0;
}

@media (min-width: 768px) {
  .header_main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo cta_nav"
      "main_nav main_nav";
    row-gap: 0.5rem;
    column-gap: clamp(0.35rem, 0.9vw, 0.9rem);
    padding: clamp(0.5rem, 0.367rem + 0.28vw, 0.7rem)
             clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    box-shadow: var(--box-shadow);
  }

  .header_main:has(.menu.open) .header_main_bar {
    z-index: auto;
  }

  .header_main_bar {
    grid-area: logo;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    z-index: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
    will-change: auto;
  }

  .header_main_bar.header-main-bar--hidden {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  .header_main:has(.menu.open) .cta_nav {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .header_nav.menu.open {
    z-index: auto;
  }

  .cta_nav {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    font-size: clamp(0.813rem, 0.688rem + 0.26vw, 1rem);
    gap: clamp(0.25rem, 0.9vw, 0.5rem);
    flex: 0 0 auto;
    grid-area: cta_nav;
    justify-content: flex-end;
    z-index: 6;
    padding-right: clamp(0.08rem, 0.4vw, 0.2rem);
    padding-bottom: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cta_nav li {
    flex: 0 1 auto;
    min-width: unset;
  }
}

@media (min-width: 768px) {
  .header_main.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    box-shadow: var(--box-shadow);
  }
}

@media (min-width: 768px) {
  body.header-main-fixed {
    padding-top: var(--header-main-h, 0px);
  }
}
@media (min-width: 768px) {
  body.header-sub-visible .header_sub.sub-src {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header-sub);
    /* 固定レイヤのサブピクセルずれ対策（ヘアライン隙間の抑制） */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /*
   * header_sub 直下と header_main の境界で 1px だけ背景が見えることがある（DPR・rem 換算の丸め）。
   * top を 1px だけ詰めて重ね、隙間を塗りつぶす（z-index で sub が手前）。
   */
  body.header-sub-visible .header_main.is-fixed {
    top: calc(var(--header-sub-h, 0px) - 1px);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  body.header-main-fixed.header-sub-visible {
    padding-top: calc(
      var(--header-main-h, 0px) + var(--header-sub-h, 0px) - 1px
    );
  }
}
@media (min-width: 1320px) {
  .header_main {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo main_nav cta_nav";
  }
}

/* header_brand */
.header_brand {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.3rem + 0.5vw, 1rem);
  flex: 0 0 auto;
}


/* logo */
.logo{
  position: relative;
  z-index: 6;
  display: block;
  width: 13.5rem;
  flex-shrink: 0;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.header_nav{ grid-area: main_nav;}

/* menu */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--white-color);
  transition: right 0.3s ease;
  padding: var(--header-h, 84px) clamp(1rem, 4vw, 1.35rem) 1rem;
  z-index: 3;
  box-sizing: border-box;
}

.menu.open {
  right: 0;
}

@media (min-width: 768px) {
  .menu {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    display: block;
    overflow: visible;
    background: transparent;
    padding: 0;
    transition: none;
    z-index: auto;
    flex: 1 1 auto;
    min-width: max-content;
  }
}


/* main_nav */
.main_nav {
  display: block;
  margin-bottom: 1.5rem;
}

.main_nav > li {
  border-bottom: solid 1px var(--gray-color);
}

.main_nav li a {
  display: block;
  padding: 0.8rem;
  white-space: nowrap;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .main_nav {
    margin-bottom: 0;
  }

  .main_nav {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .main_nav > li {
    border-bottom: none;
    padding-left: clamp(0rem, -1.143rem + 1.79vw, 1rem);
  }

  .main_nav li a {
    padding: clamp(0.3rem, -0.033rem + 0.69vw, 0.8rem);
    font-size: clamp(0.813rem, 0.688rem + 0.26vw, 1rem);
    transition: font-weight 0.3s ease, transform 0.3s ease;
  }

  .main_nav li a:hover {
    font-weight: 700;
    transform: translateY(-2px);
  }
}


.cta_nav li a {
  background: var(--main-color);
  color: var(--white-color);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.3;
  min-width: 0;
  width: 100%;
  padding: 0.75rem 0.4rem;
  border-radius: 0;
  height: 100%;
}

.cta_nav li:last-child a {
  background: var(--accent-color);
}

.cta_nav li a span {
  display: block;
  /* SP 下段ラベル（「営業・マーケターの方」等）。768px 以上は下で従来比率に */
  font-size: 0.68em;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .cta_nav li a {
    min-width: clamp(5.2rem, 22vw, 7rem);
    width: auto;
    padding: clamp(0.32rem, 0.9vw, 0.5rem);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .cta_nav li a:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transform: translateY(1px);
  }

  .cta_nav li a span {
    font-size: 0.6em;
    line-height: 1rem;
  }
}

.menu_footer {
  flex: 1 1 auto;
  padding-top: 1rem;
}

.menu_footer.Forsp {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .menu_footer.Forsp {
    display: none;
  }
}

.menu_cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.menu_cta li a {
  background: var(--main-color);
  padding: 1rem 0.5rem;
  border-radius: var(--border-radius);
  color: var(--white-color);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.menu_cta li:last-child a {
  background: var(--accent-color);
}

.menu_cta li a span {
  display: block;
  font-size: 0.72em;
  line-height: 1.2;
}

.menu_target {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 0.82rem;
}


@media (min-width: 768px) {
  .menu_target {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0;
  }
  .menu_target ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.menu_target a {
  text-decoration: underline;
}

.menu_target a:hover {
  text-decoration: none;
}


/* header_menu-btn */
.header_menu-btn {
  grid-area: menu_btn;
  justify-self: end;
  align-self: center;
  margin-left: clamp(0.22rem, 0.9vw, 0.5rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 7;
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .header_menu-btn {
    display: none;
  }
}


/* アイコン線（ラベルなし・タップしやすいサイズ） */
.header_menu-icon {
  position: relative;
  width: clamp(1.75rem, 7vw, 2.25rem);
  height: 2px;
  background-color: var(--font-color);
  border-radius: 2px;
  transition: 0.3s ease;
}

.header_menu-icon::before,
.header_menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--font-color);
  border-radius: 2px;
  transition: 0.3s ease;
  transform-origin: center;
}

.header_menu-icon::before {
  top: -0.7rem;
}

.header_menu-icon::after {
  top: 0.7rem;
}

/* アニメーション */
.header_menu-btn.active .header_menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.header_menu-btn.active .header_menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.header_menu-btn.active .header_menu-icon {
  background-color: transparent;
}

/* ----------------------------------------------------
   footer contact setting:
------------------------------------------------------- */

.contact {
  background: var(--font-color);
  position: relative;
}
.contact::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: url("../img/bg_footer_contact.jpg") center / cover no-repeat;
  background-image: url("../img/bg_footer_contact.webp");
  z-index: 0;
}
@media (min-width: 768px) {
  .contact::before {
    height: 60%;
  }
}
.contact > * {
  position: relative;
  z-index: 1;
}
.contact .title_tmp {
  color: var(--white-color);
}
.contact h2 span.en_title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--white-color);
  color: var(--white-color);
}
.contact h2 span.en_title::before {
  background: var(--white-color);
}

.contact .contact_area {
  display: grid;
  gap: 2rem;
  padding-top: 4rem;
}
@media (min-width: 768px) {
  .contact .contact_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
}

.contact .contact_area article {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--white-color);
  border-radius: var(--border-radius);
  border-top: solid 4px var(--main-color);
}
@media (min-width: 768px) {
  .contact .contact_area article {
    padding: 2rem;
    box-sizing: border-box;
    max-width: 30rem;
    width: 100%;
  }
}
.contact .contact_area article.contact_B {
  border-top: solid 4px var(--accent-color);
}

.contact .contact_area article h3 {
  text-align: center;
}
.contact .contact_area article .check_list {
  display: grid;
  gap: 0.8rem;
  width: fit-content;
  margin: 0 auto;
}
.contact .contact_area article .check_list li {
  background: url(../img/check.svg) no-repeat center left;
  padding-left: 2.5rem;
  font-weight: 700;
}

.contact .contact_area article .cta_btn a {
  display: block;
}

/* ページ下部のお問い合わせ（#footer_contact）。legacy common.css 相当 */
#footer_contact.contact {
  padding: 5rem 0 2rem;
}

#footer_contact h2 {
  border-bottom: none;
  font-size: 2rem;
  padding-bottom: 0;
}

/* ----------------------------------------------------
   footer setting:
------------------------------------------------------- */

footer {
  background: var(--font-color);
  padding: 5rem 0 3rem;
}

footer .footer_area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  footer .footer_area {
    grid-template-columns: 1fr minmax(0, 1024px);
    justify-content: space-between;
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  footer .footer_area {
    gap: 5rem;
  }
}

footer .footer_logo p {
  color: var(--white-color);
  width: fit-content;
}
@media (min-width: 768px) {
  footer .footer_logo {
    width: 21rem;
  }
}
footer .footer_logo p img {
  width: 16rem;
}
footer .footer_logo p.text {
  font-size: clamp(2rem, 1.748rem + 1.15vw, 2.3rem);
  font-weight: 700;
  margin-top: 2rem;
  line-height: 1.5;
}
/* footer .footer_logo p.text span{
  font-size: 0.7em;
} */

footer .footer_nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--white-color);
  padding: 1.5rem;
  border-radius: var(--border-radius);
}
@media (min-width: 768px) {
  footer .footer_nav {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  footer .footer_nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

footer .footer_nav p a {
  font-weight: 700;
  display: block;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px var(--gray-color);
  margin-bottom: 0.5rem;
}
footer .footer_nav ul {
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  footer .footer_nav li a:hover,
  footer .footer_nav p a:hover {
    text-decoration: underline;
    transition: color .3s ease, transform .3s ease;
  }
}

footer .site {
  border-top: solid 1px var(--white-color);
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  font-size: 0.875rem;
  color: var(--white-color);
  align-items: center;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  footer .site {
    grid-template-columns: 5.5rem 1fr;
  }
}

footer .site ul {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
footer .site ul li a {
  display: block;
  padding: 0.5rem;
  border: solid 1px var(--white-color);
  border-radius: var(--border-radius);
  padding-right: 2rem;
  background: url(../img/icon_blank.svg) no-repeat center right 0.5rem / 0.8rem;
}
@media (min-width: 768px) {
  footer .site ul li a:hover {
    background: url(../img/icon_blank.svg) no-repeat top 0.8rem right 0.3rem / 0.8rem;
    transition: 0.3s;
  }
}

footer .other_link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  color: var(--white-color);
  font-size: 0.875rem;
  padding-top: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  footer .other_link {
    grid-template-columns: 8rem 1fr 6rem;
  }
}

footer .other_link ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  left: -1rem;
}
@media (min-width: 768px) {
  footer .other_link ul {
    left: 0;
  }
}
footer .other_link ul a {
  display: block;
  padding: 0 1.5rem 0 1rem;
  border-right: solid 1px var(--white-color);
  line-height: 1rem;
}
footer .other_link ul li:last-child a {
  border-right: none;
}
@media (min-width: 768px) {
  footer .other_link ul a:hover {
    text-decoration: underline;
    transition: 0.3s;
  }
}

.phone_text {
  font-size: 0.75rem;
  color: var(--white-color);
  text-align: left;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .phone_text {
    text-align: right;
  }
}

/* ----------------------------------------------------
   cookie setting:
------------------------------------------------------- */
/* #cookie-banner {
  display: none;
  font-size: 14px;
  position: fixed;
  background: #fff;
  padding: 1.5rem;
  text-align: center;
  z-index: 1000;
  box-sizing: border-box;
  width: calc(100% - 2rem);
  left: 0;
  margin: 0 1rem;
  border-radius: 5px;
  bottom: 1rem;
  border: solid 2px #36318f;
}
@media (min-width: 768px) {
  #cookie-banner {
    width: 25rem;
    left: 1rem;
    margin: 0;
  }
}

#cookie-banner p {
  margin-bottom: 1rem;
  text-align: left;
}

#cookie-banner button {
  padding: 1rem;
  border-radius: 2px;
  background: #fff;
  margin-right: 1rem;
  border-radius: 4px;
  border: solid 2px #36318f;
  color: #36318f;
  font-weight: bold;
}

#cookie-banner #acceptBtn {
  background-color: #36318f;
  color: #fff;
  margin-left: 1rem;
}
 */

/* ----------------------------------------------------
   font setting:
------------------------------------------------------- */
@font-face{
  font-family:"Noto Sans JP";
  font-weight:500;
  src:url("../fonts/NotoSansJP-500.woff2") format("woff2");
  font-display:swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSansJP-700.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Montserrat-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Montserrat-700.woff2") format("woff2");
  font-display: swap;
}