/*
  Reset
-----------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  /*outline: 2px solid red;*/
}
html, body {
  height: 100%;
}
img, video, canvas, svg {/*pictureタグは外した*/
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ol, ul {
  list-style: none;
  padding: 0;
}
/* リンクの初期化 */
a {
  color: inherit;
  text-decoration: none;
}
iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/*
  Base Style
-----------------------------------------------*/
html {
  font-size: 100%; /* ブラウザ標準（通常16px）を基準にする */
  scroll-padding-top: 74px;/* headerの高さ */
  /*scroll-behavior: smooth;  ページ内リンクのスムーズスクロール */
}
@media screen and (min-width: 1280px) {
  html {
    scroll-padding-top: 100px;/* headerの高さ */
  }
}

body {
  font-size: 1rem; /* デフォルトの16px相当 */
  line-height: 1.8; 
  font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--c-base-text);
  background-color: var(--c-bg01); 
  overflow-x: hidden;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}

/*
  Common Style
-----------------------------------------------*/
/*color*/
:root {
  --c-base-text: #222;
  --c-bg01: #EEF0F0;
  --c-bg02: #1D1E1E;/*footer*/
  --c-main-green: #005D66;
  --c-main-dark-green: #00464C;
  --c-main-bright-green: #11A9B8;
  --c-link01: #008693;/*link text ,icon*/
  --c-link01-hv: #11A9B8;/*link text のhover*/
  --c-required: #e74e4e;/*必須など*/
}



/*
  Header - Nav
-----------------------------------------------*/
.header {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 74px;
}
/*会社ロゴ*/
.header .h__logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: min(38vw, 200px);
  height: max-content;
  margin: auto 0;
}
@media screen and (min-width: 1280px) {
  .header {
    height: 100px;
  }
  .header .h__logo {
    left: 20px;
    width: min(15vw, 216px);
  }
}

/*
  Header - ハンバーガーボタン
-----------------------------------------------*/
/* ボタンの基本スタイル */
.hamburger-btn {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 30px;
  margin: auto 0;
  cursor: pointer;
}

/* 三本線の共通スタイル */
.hamburger-btn span,
.hamburger-btn span::before,
.hamburger-btn span::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--c-main-green);
  /*border-radius: 2px;*/
  transition: all 0.4s ease;
}

/* 1本目の線 */
.hamburger-btn span::before {
  content: '';
  top: -10px;
}

/* 2本目の線（中央） */
.hamburger-btn span {
  top: 50%;
  transform: translateY(-50%);
}

/* 3本目の線 */
.hamburger-btn span::after {
  content: '';
  bottom: -10px;
}

/* --- クリックされてメニューが開いたとき（.is-activeが付与された場合）--- */
/* 2本目の線を透明にする */
.hamburger-btn.is-active span {
  background-color: transparent;
}

/* 1本目の線を回転させて×にする */
.hamburger-btn.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

/* 3本目の線を回転させて×にする */
.hamburger-btn.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
@media screen and (min-width: 1280px) {
  .hamburger-btn {
    display: none;
  }
}


/*
  Nav SP（1279px以下で表示）
-----------------------------------------------*/
#nav-sp {
  display: none;
}
/* スマホ用メニューの初期状態（画面外へ隠す場合） */
#nav-sp {
  display: block;
  position: fixed;
  top: 0;
  right: -110%; /* 右側の画面外に隠す */
  width: 30%;
  height: 100dvh;
  opacity: 0;
  transition: 0.3s ease;
  /*overflow-x: hidden;*/
}

/* 【JS連動】メニューが開いたときの状態（画面内にスライド） */
#nav-sp.is-open {
  right: 0;
  width: 100%;
  opacity: 1;
}
@media (max-width: 1279px) {
  .h-nav_sp {
    background-color: var(--c-main-dark-green);
    padding: 120px 8vw 8vw;
    position: fixed;
    overflow-y: auto;
    z-index: 998;
  }
  /*言語選択*/
  .h-nav_sp .h__lang {
    display: flex;
    justify-content: flex-end;
  }
  .h-nav_sp .h__lang a.glink {
    background-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    line-height: 1;
    padding: 8px 20px;
    transition: 0.3s;
  }
  /* 選択中 */
  .h-nav_sp .h__lang a.glink.gt-current-lang {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
  }
  .h-nav_sp .h__lang a.glink:first-child {
    border-radius: 3px 0 0 3px; 
  }
  .h-nav_sp .h__lang a.glink:last-of-type {
    border-radius: 0 3px 3px 0; 
  }

  /*ナビタイトル*/
  .h-nav_sp__wrap .h-nav__group .h-nav__ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: calc(15rem / 16);
    font-weight: 600;
    padding: 1.2em 0;
    cursor: pointer;
  }
  .h-nav_sp__wrap .h-nav__group .h-nav__list {}
  .h-nav_sp__wrap .h-nav__group .h-nav__list a {
    color: #fff;
    font-size: calc(14rem / 16);
    padding: 0.25em 0;
  }
  /*サブメニュー*/
  .h-nav_sp__wrap .h-nav__group .h-nav__list li {
    line-height: 1.4;
    padding: 10px 0;
  }

  /*トグルアイコン　プラス*/
  .js-h-accordion-btn ._btn__toggle {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .js-h-accordion-btn ._btn__toggle::before,
  .js-h-accordion-btn ._btn__toggle::after {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    transition: background 0.2s;
  }
  .js-h-accordion-btn ._btn__toggle::before {
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .js-h-accordion-btn ._btn__toggle::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  /*トグルアイコン 回転してマイナス*/
  .js-h-accordion-btn ._btn__toggle.is-active {
    transform: rotate(90deg);
  }
  .js-h-accordion-btn ._btn__toggle.is-active::before {
    width: 0;
  }
  .js-h-accordion-target {
    overflow: hidden;
    max-height: 0;
    transition: 0.4s ease-out;
  }
  /* メニューが開いたとき */
  .js-h-accordion-target.is-open {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }


  /*ボタン*/
  .h-nav_sp .h-nav_sp__btn-group {
    margin: 40px auto;
  }
  .h-nav_sp .h-nav_sp__btn-group li {
    margin-bottom: 10px;
  }
  .h-nav_sp .h-nav_sp__btn-group li a {
    background-color: var(--c-link01);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: 600;
    padding: 1em 1.5em;
  }
  .h-nav_sp .h-nav_sp__btn-group li a:active {
    filter: brightness(1.2);
  }
  .h-nav_sp .h-nav_sp__btn-group li a ._bt-txt {
    margin-right: auto;
  }
  /*アイコン*/
  .h-nav_sp .h-nav_sp__btn-group li a .icon-person,
  .h-nav_sp .h-nav_sp__btn-group li a .icon-mail {
    width: 24px;
    height: 20px;
    mask-repeat: no-repeat; 
    mask-position: center;
    mask-size: contain;
  }
  /*契約者アイコン*/
  .h-nav_sp .h-nav_sp__btn-group li a .icon-person {
    mask-image: url("/images/icon_person.svg");
    -webkit-mask-image: url("/images/icon_person.svg");
    background-color: #fff;
  }
  /*メールアイコン*/
  .h-nav_sp .h-nav_sp__btn-group li a .icon-mail {
    mask-image: url("/images/icon_mail.svg");
    -webkit-mask-image: url("/images/icon_mail.svg");
    background-color: #fff;
  }
}


/*
  Nav PC（1280px以上で表示）
-----------------------------------------------*/
@media screen and (max-width: 1279px) {
  #nav-pc {
    display: none; /* PCナビを非表示 */
  }
}
@media screen and (min-width: 1280px) {
  .header .h__inner_pc {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-inline: auto 0;
    width: fit-content;
    height: 100%;
    padding-left: 256px;/* ロゴの最大幅216pxと左右マージン20px　+　20px */
  }
  nav.h-nav_pc {
    height: 100%;
  }
  .h-nav_pc .h-nav-pc_list {
    display: flex;
    align-items: center;
    gap: 2em;
    height: 100%;
  }
  .h-nav-pc_list ._list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(15rem / 16);
    height: 100%;/* megaメニューを表示するためにhoverの範囲を上下100%にする */
    line-height: 1.6;
  }
  .h-nav-pc_list ._list-item > a {
    display: block;
    font-weight: 600;
    text-align: center;
    padding: 1em 0;
    position: relative;
    background-image: linear-gradient(var(--c-link01), var(--c-link01));
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 2px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
  }
  .h-nav-pc_list ._list-item > a:hover {
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 2px; /* 下線の横幅を100%にする */
  }
  /*sakkeyのリンク*/
  .h-nav-pc_list ._list-item.h-nav_sakkey {
    color: #666;
    font-size: calc(12rem / 16);
    font-weight: 600;
    line-height: 1.3;
  }
  .h-nav-pc_list ._list-item.h-nav_sakkey ._l-txt {
    color: var(--c-main-bright-green);
    display: block;
    font-size: calc(15rem / 16);
  }
  
  /*カレントページでナビの下線を表示
    .nav-g_company: 会社案内
    .nav-g_our-pride: エスコのこだわり
    .nav-g_service: サービス案内
  */
  .nav-g_company .h-nav-pc_list ._list-item > a.g_company_current,
  .nav-g_our-pride ._list-item > a.g_our-pride_current,
  .nav-g_service ._list-item > a.g_service_current {
    background-position: bottom left;
    background-size: 100% 2px;
  }
}

/*
  PCのみ　hover時に表示するmegaメニュー
  .js-megamenu-btn をhoverすると.js-megamenu-targetが開く
-----------------------------------------------*/
/* megaメニューが開いているとき、画面背景にオーバーレイ */
.js-megamenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 110vh;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .3s;
  z-index: 999;
}
.js-megamenu-overlay.is-active {
  opacity: 1;
}

@media screen and (max-width: 1279px) {
  .js-megamenu-target {
    display: none;
  }
}
@media screen and (min-width: 1280px) {
  .js-megamenu-target {
    /* 初期状態：非表示・透明 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px); 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  /* 【変更】親要素（.nav-item）にホバーした時にメニューを表示 */
  .js-megamenu-list:hover .js-megamenu-target,
  /* キーボードのTabキーで選択された時用のスタイル */
  .js-megamenu-list:focus-within .js-megamenu-target {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .js-megamenu-list.is-closed .js-megamenu-target {
    /* 非表示・透明 */
    visibility: hidden;
    opacity: 0;
    /*transform: translateY(10px); 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;*/
  }
  
  .h-nav-pc__child {
    background-color: var(--c-main-dark-green);
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    font-size: calc(15rem / 16);
    width: 100%;
    padding: 60px 0;
  }
  
  .h-nav-pc__child ._inner {
    width: min(90%, 1100px);
    margin: 0 auto;
  }
  /* megaメニュー　タイトル */
  .h-nav-pc__child ._inner ._child-nav__ttl {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    font-size: calc(20rem / 16);
    font-weight: 600;
    padding-bottom: 1em;
    margin-bottom: 1.5em;
    text-align: left;
  }
  /* リンクテキスト タイトル */
  .h-nav-pc__child ._link-list__ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
  }
  .h-nav-pc__child ._link-list__ttl ._txt {
    font-weight: 600;
    transition: 0.3s;
  }
  .h-nav-pc__child a._link-list__ttl:hover ._txt,
  .h-nav-pc__child a:hover ._link-list__ttl ._txt {
    transform: translateX(0.3em);
  }
}

/*
  会社案内のmegaメニュー
-----------------------------------------------*/
@media screen and (min-width: 1280px) {
  .h-nav-pc__child ._pc__child-nav-01 {  }
  
  ._pc__child-nav-01 ._link-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
  }
  
  /* 写真とリンクタイトル */
  ._pc__child-nav-01 ._link_pic-item img {
    opacity: 1;
    transition: 0.3s;
  }
  ._pc__child-nav-01 ._link_pic-item:hover img {
    opacity: 0.8;
  }
  ._pc__child-nav-01 ._link_pic-item ._link-list__ttl {
    margin-top: 1em;
  }
}

/*
  エスコのこだわりのmegaメニュー
-----------------------------------------------*/
@media screen and (min-width: 1280px) {
  .h-nav-pc__child ._pc__child-nav-02 .kodawari-link_list {
    display: flex;
    justify-content: space-between;
    gap: 60px 3.6%;
  }
  /* 写真とリンクタイトル */
  ._pc__child-nav-02 ._link_pic-item img {
    opacity: 1;
    transition: 0.3s;
  }
  ._pc__child-nav-02 ._link_pic-item:hover img {
    opacity: 0.8;
  }
  ._pc__child-nav-02 ._link_pic-item ._link-list__ttl {
    margin-top: 1em;
  }
}

/*
  エスコのサービスのmegaメニュー
-----------------------------------------------*/
@media screen and (min-width: 1280px) {
  .h-nav-pc__child ._pc__child-nav-03 .service-link_list {
    display: flex;
    justify-content: space-between;
    gap: 60px 7%;
  }
  .h-nav-pc__child ._pc__child-nav-03 .service-link_list a img {
    opacity: 1;
    transition: 0.3s;
  }
  .h-nav-pc__child ._pc__child-nav-03 .service-link_list a:hover img {
    opacity: 0.8;
  }
  ._pc__child-nav-03 ._link_pic-item ._link-list__ttl {
    margin-top: 1em;
  }
}

/*
  ご契約者様専用のmegaメニュー
-----------------------------------------------*/
@media screen and (min-width: 1280px) {
  ._btn-customer .h-nav-pc__child {
    background-color: var(--c-main-green);
  }
  .h-nav-pc__child ._pc__child-nav-04 {
    display: flex;
    justify-content: space-between;
    gap: 60px 7%;
  }
  /* 左のエリア */
  ._pc__child-nav-04 ._left-wrap,
  ._pc__child-nav-04 ._right-wrap {
    width: 50%;
  }
  ._pc__child-nav-04 ._link-list li {
    margin-bottom: 10px;
  }
}


/* 言語選択 */
@media screen and (min-width: 1280px) {
  .h__inner_pc .h__lang {
    display: flex;
  }
  .h__inner_pc .h__lang a.glink {
    background-color: #f5f5f5;
    color: #888;
    font-size: calc(14rem / 16);
    font-weight: 600;
    line-height: 1;
    padding: 8px 16px;
    transition: 0.3s;
    white-space: nowrap;
  }
  .h__inner_pc .h__lang a.glink:first-child {
    border-radius: 3px 0 0 3px; 
  }
  .h__inner_pc .h__lang a.glink:last-of-type {
    border-radius: 0 3px 3px 0; 
  }
  /* 選択中 */
  .h__inner_pc .h__lang a.glink.gt-current-lang {
    background-color: #E8E8E8;
    color: var(--c-base-text);
  }
  .h__inner_pc .h__lang a.glink:hover {
    color: var(--c-main-bright-green);
  }
}

/* ボタン　問い合わせ,契約者 */
.h__inner_pc .h__btn-group {
  display: flex;
  height: 100%;
}
.h__inner_pc .h__btn-group > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  font-size: calc(13rem / 16);
  font-weight: 600;
  width: 130px;
  height: 100%;
  transition: 0.3s;
}
.h__inner_pc .h__btn-group ._btn-customer a._customer-btn {
  background-color: var(--c-main-green);
  color: #fff;
  text-align: center;
  padding: 0 10px;
}
.h__inner_pc .h__btn-group ._btn-contact a {
  background-color: #f5f5f5;
}
/*ボタンのテキスト*/
.h__inner_pc .h__btn-group li a ._bt-txt {
  transition: 0.3s;
}

/*契約者アイコン*/
.h__inner_pc .h__btn-group li a .icon-person,
.h__inner_pc .h__btn-group li a .icon-mail {
  width: 24px;
  height: 20px;
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  transition: 0.3s;
}

.h__inner_pc .h__btn-group li a .icon-person {
  mask-image: url("/images/icon_person.svg");
  -webkit-mask-image: url("/images/icon_person.svg");
  background-color: #fff;
}
/*メールアイコン*/
.h__inner_pc .h__btn-group li a .icon-mail {
  mask-image: url("/images/icon_mail.svg");
  -webkit-mask-image: url("/images/icon_mail.svg");
  background-color: #444;
}

@media (hover: hover) {
  .h__inner_pc .h__btn-group li a:hover .icon-person {
    background-color: var(--c-main-bright-green);
  }
  .h__inner_pc .h__btn-group li a:hover ._bt-txt {
    color: var(--c-main-bright-green);
  }
  .h__inner_pc .h__btn-group li a:hover .icon-mail {
    background-color: var(--c-main-bright-green);
  }
}


/*
  矢印アイコン
-----------------------------------------------*/
/*右矢印　小 リンクの緑*/
a .arrow-r-sm {
  width: 20px;
  height: 6px;
  mask-image: url("/images/arrow_r_sm.svg");
  -webkit-mask-image: url("/images/arrow_r_sm.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: var(--c-link01);
  transform: translateX(-0.7em);
  transition: 0.3s;
  flex-shrink: 0;
  display: block;
}

/*右矢印　中 リンクの緑*/
a .arrow-r-md {
  width: 40px;
  height: 8px;
  mask-image: url("/images/arrow_r_md.svg");
  -webkit-mask-image: url("/images/arrow_r_md.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: var(--c-link01);
  transform: translateX(-0.7em);
  transition: 0.3s;
  flex-shrink: 0;
  display: block;
}

/*白*/
.i-color-wh {
  background-color: #fff!important;
}
/*黒*/
.i-color-bk {
  background-color: var(--c-base-text)!important;
}


@media (hover: hover) {
  a:hover .arrow-r-sm,
  a:hover .arrow-r-md {
    background-color: var(--c-main-bright-green);
    transform: translateX(0);
  }
}

/*
  カートアイコン
-----------------------------------------------*/
.i-cart {/*緑*/
  width: 24px;
  height: 24px;
  mask-image: url("/images/icon_cart.svg");
  -webkit-mask-image: url("/images/icon_cart.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: var(--c-link01);
  transform: translateX(-0.7em);
  transition: 0.3s;
  flex-shrink: 0;
}
@media (hover: hover) {
  a:hover .i-cart {
    transform: translateX(0);
  }
}

/*
  外部リンクアイコン
-----------------------------------------------*/
.i-external {/*緑*/
  display: inline-block;
  width: 24px;
  height: 24px;
  mask-image: url("/images/icon_external.svg");
  -webkit-mask-image: url("/images/icon_external.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: var(--c-link01);
  transform: translateX(-0.5em);
  transition: 0.3s;
  flex-shrink: 0;
  margin-left: 10px;
  position: relative;
}

@media (hover: hover) {
  a:hover .i-external {
    transform: translateX(0);
  }
}

/*
  ログインアイコン（契約者）
-----------------------------------------------*/
.i-login {/*緑*/
  display: block;
  width: 28px;
  height: 28px;
  mask-image: url("/images/icon_login.svg");
  -webkit-mask-image: url("/images/icon_login.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: var(--c-link01);
  /*transform: translateX(-0.7em);*/
  transition: 0.3s;
  flex-shrink: 0;
}
@media (hover: hover) {
  a:hover .i-login {
    /*transform: translateX(0);*/
    background-color: #fff;
  }
}

/*
  downloadアイコン（契約者）
-----------------------------------------------*/
.i-download {/*白*/
  display: block;
  width: 15px;
  height: 15px;
  mask-image: url("/images/icon_download.svg");
  -webkit-mask-image: url("/images/icon_download.svg");
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: #fff;
  /*transform: translateX(-0.7em);*/
  transition: 0.3s;
  flex-shrink: 0;
}
@media (hover: hover) {
  a:hover .i-download {
    /*transform: translateX(0);*/
  }
}


/*
  ボタン
-----------------------------------------------*/
/*下線、右矢印 緑*/
.btn-01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  color: var(--c-link01);
  min-width: 240px;
  width: max-content;
  padding: 20px 0;
  position: relative;
}
.btn-01::before {/*薄くベースの下線*/
  background-color: var(--c-link01);
  opacity: 0.4;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
  transition: .3s;
}
.btn-01::after {
  background-color: var(--c-link01);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: right top; /* 変形の原点を右上に指定 */
  transition: transform .3s;
  width: 100%;
}
.btn-01 .btn__txt {
  font-size: calc(15rem / 16);
  font-weight: 600;
  line-height: 1.4;
  transition: .3s;
}

/*白*/
.btn-01.bt-wh {
  color: #fff;
}
.btn-01.bt-wh::before {
  background-color: #fff;
}
.btn-01.bt-wh::after {
  background-color: #fff;
}

/*黒*/
.btn-01.bt-bk {
  color: var(--c-base-text);
}
.btn-01.bt-bk::before {
  background-color: var(--c-base-text);
}
.btn-01.bt-bk::after {
  background-color: var(--c-base-text);
}

@media (hover: hover) {
  .btn-01:hover::after {
    transform-origin: left top; /* 変形の原点を左上に指定 */
    transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
  }
  .btn-01:hover .btn__txt {
    transform: translateX(0.3em);
  }
}

/*小さいボタン　（一覧を見る）*/
.btn-01.bt-small {
  min-width: 120px;
  padding: 16px 0;
}

/*
  塗りのボタン、右矢印 緑
----------------------------*/
.btn-02 {
  background-color: var(--c-main-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: #fff;
  width: 320px;
  padding: 20px;
  position: relative;
  transition: .3s;
}
.btn-02 .btn__txt {
  font-size: calc(15rem / 16);
  font-weight: 600;
  line-height: 1.4;
  transition: .3s;
}
/*グラデ*/
.btn-02::before {
  background-image: linear-gradient(226deg, rgba(0, 134, 147, 0.3), rgba(0, 134, 147, 0) 45%);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .btn-02:hover {
    filter: brightness(1.2);
  }
  .btn-02:hover .btn__txt {
    transform: translateX(0.3em);
  }
}

/*
  白枠のボタン、右矢印
----------------------------*/
.btn-03 {
  /*background-color: var(--c-main-green);*/
  border: 1px solid rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  width: 320px;
  padding: 18px;/*線幅分減らす*/
  position: relative;
  transition: .3s;
}
.btn-03 .btn__txt {
  font-size: calc(15rem / 16);
  font-weight: 600;
  line-height: 1.4;
  transition: .3s;
}
@media (hover: hover) {
  .btn-03:hover {
    border: 1px solid rgba(255,255,255,1);
  }
  .btn-03:hover .btn__txt {
    transform: translateX(0.3em);
  }
}


/*
  テキストリンク　hover設定 共通
-----------------------------------------------*/
/* 白の下線 */
.hover-udLine-wh {
  background-image: linear-gradient(rgba(255,255,255,0.70), rgba(255,255,255,0.70));
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 1px;/* 幅 高さ */
  transition: background-size 0.3s;
}

/* 青のテキストリンク hoverで下線表示 */
.link-txt-01 {
  color: var(--c-link01);
  background-image: linear-gradient(var(--c-link01-hv), var(--c-link01-hv));
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 1px;/* 幅 高さ */
  transition: color, background-size 0.3s;
  padding: 0 0 0.3em;/*テキストと線の間*/
}

/* 白のテキストリンク 下線つき */
.link-txt-02 {
  color: rgba(255,255,255, 0.9);
  border-bottom: 1px solid rgba(255,255,255, 0.60);
  transition: 0.3s;
  padding: 0 0 0.3em;/*テキストと線の間*/
}

/* 黒文字下線付き リンク*/
a.hover-udLine {
  text-decoration: underline;
  transition: 0.2s;
}

@media (hover: hover) {
  .hover-udLine-wh:hover {
    background-position: bottom left;
    background-size: 100% 1px;
  }
  
  .link-txt-01:hover {
    color: var(--c-link01-hv);
    background-position: bottom left;
    background-size: 100% 1px;
  }
  
  .link-txt-02:hover {
    color: rgba(255,255,255, 1);
    border-bottom: 1px solid rgba(255,255,255,1);
  }
  
  a.hover-udLine:hover {
    color: #888;
  }
}


/*
  ボタンエリア（サッキー、デジタルカタログ）
-----------------------------------------------*/
.btn__area {
  background-color: var(--c-main-dark-green);
  padding: 60px 0;
}
.btn__area ._inner {
  display: flex;
  gap: 30px 5%;
  flex-direction: column;
  width: min(90%, 1200px);
  margin: 0 auto;
}
.btn__area ._inner ._item a {
  background-color: #002326;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5%;
  padding: 20px 30px;
  margin-bottom: 20px;
  transition: 0.3s;
}
/*アイコン*/
.btn__area .btn__icon {
  width: 10.5%;
  aspect-ratio: 1 / 1;
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  background-color: #fff;
  transition: 0.3s;
  flex-shrink: 0;
}
.btn__area .btn__sakkey .btn__icon {
  mask-image: url("/images/icon_sakkey.svg");
  -webkit-mask-image: url("/images/icon_sakkey.svg");
}
.btn__area .btn__digital-catalog .btn__icon {
  mask-image: url("/images/icon_ebook.svg");
  -webkit-mask-image: url("/images/icon_ebook.svg");
}
.btn__area .btn__txt {
  font-size: calc(16rem / 16);
  font-weight: 600;
  line-height: 1.4;
}
.btn__area span:last-of-type {
  margin-left: auto;
}
@media (hover: hover) {
  .btn__area ._inner ._item a:hover {
    filter: brightness(1.3);
    /*background-color: var(--c-main-green);*/
  }
}
@media screen and (min-width: 768px) {
  .btn__area ._inner {
    flex-direction: row;
  }
  .btn__area ._inner ._item {
    width: 50%;
  }
  .btn__area .btn__txt {
    font-size: calc(18rem / 16);
  }
}
@media screen and (min-width: 1024px) {
  .btn__area {
    padding: 90px 0;
  }
  .btn__area .btn__txt {
    font-size: calc(24rem / 16);
  }
}

/*
  br 改行
--------------------------------------------------------*/
br.pc-only {
  display: none;
}
@media screen and (min-width: 768px) {
  br.sp-only {
    display: none;
  }
  br.pc-only {
    display: block;
  }
}




/*
  Footer お問い合わせ
-----------------------------------------------*/
.footer-contact {
  display: flex;
  flex-direction: column-reverse;
}
.footer-contact .fc__left {
  background: url("/images/f_mro-img_bg.jpg") no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 720 / 288;
  padding: 8%;
  overflow: hidden;
}
.footer-contact .fc__left .fc__left_copy {
  color: #fff;
  font-size: calc(18rem / 16);
  font-weight: 600;
}
.footer-contact .fc__contact {
  background-color: var(--c-main-dark-green);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  height: 100%;
  padding: 8%;
  position: relative;
  transition: 0.3s;
}
.footer-contact .fc__contact::before {
  background-image: linear-gradient(226deg, rgba(0, 134, 147, 0.3), rgba(0, 134, 147, 0) 45%);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.footer-contact .fc__contact .fc__contact__txt {
  transform: translateX(-0.3em);
  transition: 0.3s;
}
.footer-contact .fc__contact .fc__contact__ttl {
  font-size: calc(20rem / 16);
  font-weight: 600;
  margin-bottom: 0.5em;
}
.footer-contact .fc__contact .fc__contact__txt ._txt {
  font-size: calc(14rem / 16);
}
@media screen and (min-width: 768px) {
  .footer-contact {
    flex-direction: row;
  }
  .footer-contact .fc__left {
    width: 50%;
  }
  .footer-contact .fc__right {
    width: 50%;
  }
  .footer-contact .fc__left .fc__left_copy {
    font-size: clamp( 1.5rem, calc( 0.83rem + 1.38vw ), 1.875rem );
  }
  .footer-contact .fc__contact .fc__contact__ttl {
    font-size: clamp( 1.25rem, calc( 0.58rem + 1.38vw ), 1.625rem );
  }
  .footer-contact .fc__contact .fc__contact__txt ._txt {
    font-size: 1rem;
  }
}
@media (hover: hover) {
  .footer-contact .fc__contact:hover {
    filter: brightness(1.2);
  }
  .footer-contact .fc__contact:hover .fc__contact__txt {
    transform: translateX(0);
  }
}

/*
  Footer
-----------------------------------------------*/
.footer {
  background-color: #1D1E1E;
  padding: 60px 0;
}

.footer .footer__head,
.footer__main,
.footer__copyright {
  width: min(90%, 1400px);
  margin: 0 auto;
}

.footer .footer__head {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 40px;
}
.footer .footer__head .f-head__left {
  font-size: calc(14rem / 16);
}
.footer .footer__head .cp-name {
  font-size: calc(16rem / 16);
  font-weight: 600;
  margin-bottom: 10px;
}

/*SNSアイコン*/
.footer .sns_wrap {
  display: flex;
  gap: 1rem;
  margin-top: 20px;
}
.footer .sns_wrap a.bn-ipros img {
  height: 30px;
  width: auto;
  overflow: hidden;
  border-radius: 3px;
}

/*ボタンのマージン*/
.footer .footer__head .f-head__right a {
  margin-bottom: 10px;
}

.footer .footer__main {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 40px 0;
}

/*フッターナビ*/
.footer .footer__main .f-nav__wrap {
  display: flex;
  flex-direction: column;
}
.f-nav__wrap .f-nav__group {
}
/*ナビタイトル*/
.f-nav__wrap .f-nav__group .f-nav__ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
  color: #fff;
  font-size: calc(15rem / 16);
  font-weight: 600;
  padding: 1.5em 0;
}
.f-nav__wrap .f-nav__group .f-nav__list a {
  color: #fff;
  font-size: calc(14rem / 16);
  padding: 0.3em 0;
}
/*サブメニュー*/
.f-nav__wrap .f-nav__group .f-nav__list li {
  line-height: 1.4;
  padding: 10px 0;
}

/*サブメニュー 1行の場合（商品について）*/
.f-nav__wrap._w-full .f-nav__group .f-nav__list {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: 90px 0 120px;
  }
  .footer .footer__head {
    flex-direction: row;
    justify-content: space-between;
  }
  .footer .footer__main .f-nav__wrap {
    flex-direction: row;
    gap:30px;
  }
  .f-nav__wrap .f-nav__group {
    border-bottom: none;
    width: 25%;
  }
  .f-nav__wrap .f-nav__group .f-nav__ttl {
    border-bottom: none;
    padding: 0;
    margin-bottom: 10px;
  }
  /* 1行の場合（商品について） */
  .f-nav__wrap._w-full .f-nav__group {
    margin-top: 60px;
    width: 100%;
  }
  .f-nav__wrap._w-full .f-nav__group .f-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em 30px;
  }
}
@media (hover: hover) {
  .f-nav__wrap .f-nav__group .f-nav__list a {/*下線*/
    background-image: linear-gradient(rgba(255,255,255,0.70), rgba(255,255,255,0.70));
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;/* 幅 高さ */
    transition: background-size 0.3s;
  }
  .f-nav__wrap .f-nav__group .f-nav__list a:hover {
    /*下線*/
    background-position: bottom left;
    background-size: 100% 1px;
  }
}


/*
  フッターナビ　アコーディオン制御（js）
-----------------------------------------------*/
@media screen and (max-width: 767px) {
  .js-f-accordion-btn {}
  .js-f-accordion-btn.f-nav__ttl {
    cursor: pointer;
  }

  /*トグルアイコン　プラス*/
  .js-f-accordion-btn ._btn__toggle {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .js-f-accordion-btn ._btn__toggle::before,
  .js-f-accordion-btn ._btn__toggle::after {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    transition: background 0.2s;
  }
  .js-f-accordion-btn ._btn__toggle::before {
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .js-f-accordion-btn ._btn__toggle::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  /*トグルアイコン マイナス*/
  .js-f-accordion-btn ._btn__toggle.is-active {
    transform: rotate(90deg);
  }
  .js-f-accordion-btn ._btn__toggle.is-active::before {
    width: 0;
  }
  .js-f-accordion-target {
    overflow: hidden;
    max-height: 0;
    transition: 0.4s ease-out;
  }
  /* メニューが開いたとき */
  .js-f-accordion-target.is-open {
    padding: 15px 0;
    border-bottom: 1px solid #444;
  }
}


/*コピーライト*/
.footer__copyright {
  color: #fff;
  display: flex;
  flex-direction: column-reverse;
  gap: 1.5em;
  font-size: calc(13rem / 16);
  padding: 0 0 40px;
}
.footer__copyright .f-copy__txt {
  width: 240px;
  flex-shrink: 0
}
.footer__copyright .f-copy__link {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

@media screen and (min-width: 768px) {
  /*コピーライト*/
  .footer__copyright {
    border-top: 1px solid rgba(255,255,255,0.2);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: calc(14rem / 16);
    padding: 20px 0 40px;
  }
  .footer__copyright .f-copy__link {
    flex-direction: row;
    align-items: center;
  }
}

/*
  ページトップ
-----------------------------------------------*/
.f-page-top {
  background-color: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-left: auto;
  position: relative;
}
.f-page-top::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(0) rotate(-45deg);
  transition: 0.2s;
}
@media (hover: hover) {
  .f-page-top:hover::after {
    transform: translateY(-5px) rotate(-45deg);
  }
}

/*
  デジタルカタログバナー
-----------------------------------------------*/
.d-book__bnr {
  position: fixed;
  bottom: 10px;
  right: 10px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.30);
  width: 260px;
  z-index: 990;
  transition: 0.3s;
}
/*閉じるボタン押したらバナーが消える*/
#js-floating-bnr.hidden {
  display: none;
}
.d-book__bnr .close-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 2px;
}
@media (hover: hover) {
  .d-book__bnr:hover {
    transform: translateY(-10px);
  }
}
@media screen and (min-width: 768px) {
  .d-book__bnr {
    bottom: 20px;
    right: 20px;
    width: 310px;
  }
}


/*
  メインコンテナ（共通）
-----------------------------------------------*/
/* ヘッダーの高さ分調整 */
.main-container {
  padding-top: 74px;
}
@media screen and (min-width: 1280px) {
  .main-container {
      padding-top: 100px;
  }
}

/*
  背景色のラッパー（共通）
-----------------------------------------------*/
.bg-container-wh {
  background-color: #fff;
}

/*
  コンテンツ幅（共通）
-----------------------------------------------*/
.l-container-1000 {
  width: min(90%, 1000px);
  margin: 0 auto;
  position: relative;
}
.l-container-1100 {
  width: min(90%, 1100px);
  margin: 0 auto;
  position: relative;
}
.l-container-1200 {
  width: min(90%, 1200px);
  margin: 0 auto;
  position: relative;
}
.l-container-1400 {
  width: min(90%, 1400px);
  margin: 0 auto;
  position: relative;
}

/*
  パンくず（共通）
-----------------------------------------------*/
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5em 1em;
  margin: 0 0 0 auto;
  padding: 16px 0;
}
.breadcrumb li {
  font-size: calc(11rem / 16);
  line-height: 1.4;
}
.breadcrumb li a {
  color: #888;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
}
.breadcrumb li a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg);
}

@media screen and (min-width: 768px) {
  .breadcrumb {
    gap: 0.5em 1.5em;
    padding: 20px 0;
  }
  .breadcrumb li {
    font-size: calc(13rem / 16);
  }
  .breadcrumb li a {
    gap: 1.5em;
  }
}

/*
  タイトル（共通）
-----------------------------------------------*/
/* ページタイトル */
.pagetitle__wrap {
  background-color: #fff;
  padding: 6.6% 0 0;
}
.pagetitle__wrap .pagetitle {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: clamp( 1.375rem, calc( 0.97rem + 1.69vw ), 2.25rem ); /*22px - 36px*/
  font-weight: 600;
  position: relative;
}
.pagetitle__wrap .pagetitle::before {
  background-color: var(--c-main-green);
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 下線つきセンター寄せ */
.sec-ttl-01 {
  font-size: clamp( 1.375rem, calc( 1.14rem + 0.96vw ), 1.875rem ); /*22px - 30px*/
  font-weight: 700;
  text-align: center;
  position: relative;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
}
.sec-ttl-01::before {
  background-color: var(--c-link01);
  /*border-radius: 3px;*/
  bottom: -1em;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 50px;
}

/* 白文字センター寄せ */
.sec-ttl-02 {
  font-size: clamp( 1.375rem, calc( 1.28rem + 0.39vw ), 1.625rem ); /*22px - 26px　(max1400px)*/
  font-weight: 700;
  text-align: center;
  position: relative;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
}

/* 飾り無しタイトル-03 */
.sec-ttl-03 {
  font-size: clamp( 1.25rem, calc( 1.15rem + 0.39vw ), 1.5rem ); /*20px - 24px　(max1400px)*/
  font-weight: 700;
  position: relative;
  margin-bottom: 1em;
}

/* 飾り無しタイトル-04 */
.sec-ttl-04 {
  font-size: clamp( 1.125rem, calc( 1.01rem + 0.48vw ), 1.375rem ); /*18px - 22px　(max1200px)*/
  font-weight: 700;
  margin-bottom: 1em;
}

/* 飾り無しタイトル-05 */
.sec-ttl-05 {
  font-size: clamp( 1.25rem, calc( 1.02rem + 0.96vw ), 1.75rem );/* 20px - 28px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1em;
}

/* 左縦線付きタイトル-06 */
.sec-ttl-06 {
  border-left:  4px solid var(--c-link01);
  font-size: clamp( 1.25rem, calc( 1.02rem + 0.96vw ), 1.75rem );/* 20px - 28px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1em;
  padding: 0 0 0 1em;
}
  
/* タイトル グリーンの斜め線付き */
.list-ttl-01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em;
  position: relative;
  margin-bottom: 1.3em;
  transition: 0.3s;
  transform: translateX(0);
}
.list-ttl-01 .list-ttl-01__txt {
  font-size: clamp( 1.375rem, calc( 1.20rem + 0.72vw ), 1.75rem ); /* 22px - 28px */
  line-height: 1.4;
  position: relative;
  margin-right: auto;
  letter-spacing: 0.05em;
}
.list-ttl-01::before {
  content: "";
  display: inline-block;
  font-size: clamp( 1.375rem, calc( 1.20rem + 0.72vw ), 1.75rem ); /* 22px - 28px */
  width: 1.2em;
  height: 1.2em;
  mask-image: url("/images/diagonal_line.svg");
  -webkit-mask-image: url("/images/diagonal_line.svg");
  background-color: var(--c-main-bright-green);
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
  position: relative;
  margin-bottom: auto;
}
.list-ttl-01 ._small {
  font-size: calc(14rem / 16);
  font-weight: normal;
}
/*外部リンクアイコン*/
.list-ttl-01 .i-external {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  a.list-ttl-01:hover {
    transform: translateX(0.3em);
  }
}

@media screen and (min-width: 768px) {
  .list-ttl-01 ._small {
    display: inline-block;
  }
}


/*
  ページ上部のファーストビュー画像（共通）
-----------------------------------------------*/
.l-head_img {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.l-head_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (min-width: 768px) {
  .l-head_img {
    height: 360px;
  }
}
@media screen and (min-width: 1280px) {
  .l-head_img {
    /*height: 420px;*/
    height: auto;
    aspect-ratio: 24 / 7;
  }
}

/*
  テキスト（共通）
-----------------------------------------------*/
.normal-txt {
  font-size: clamp( 0.9375rem, calc( 0.9rem + 0.12vw ), 1rem ); /*15px - 16px*/
  font-weight: normal;
  line-height: 2;
  margin-bottom: 1em;
}
.normal-txt:last-of-type {
  margin-bottom: 0;
}

/* 欧文フォント（Oswald）適用 */
.font-en {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;/* 標準の等幅数字設定 */
  font-feature-settings: "tnum";/* 低互換環境向けのOpenType機能の強制指定 */
}

/*
  注釈リスト（共通）
  （※付きの一覧）
-----------------------------------------------*/
.note-list-01 {
  margin: 1em 0;
  text-align: left;
}
.note-list-01 .list__item {
  display: flex;
  font-size: calc(14rem / 16);
  line-height: 1.4;
  padding: 0.25em 0;
}
.note-list-01 ._mark {
  width: 1.5em;
  flex-shrink: 0;
}


/*
  ローカル ナビゲーション（共通）
-----------------------------------------------*/
.local-nav {
  background-color: var(--c-bg01);
  padding: 80px 0;
}
.local-nav .local-nav__ttl {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: clamp( 1.125rem, calc( 0.95rem + 0.72vw ), 1.5rem ); /*18px - 24px*/
  font-weight: 600;
  position: relative;
  margin-bottom: 0.5em;
}
.local-nav .local-nav__ttl::before {
  background-color: var(--c-main-green);
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  flex-shrink: 0;
}
.local-nav .local-nav__link {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /*最小290px で幅を伸縮*/
  gap: 0 3.3%;
}
.local-nav .local-nav__link li {
}
.local-nav .local-nav__link a.btn-01 {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .local-nav {
    padding: 100px 0;
  }
  .local-nav .local-nav__link {
    gap: 40px 3.3%;
  }
}


/*
  リスト
-----------------------------------------------*/
ul.normal-list {
  margin-left: 20px;
}
ul.normal-list li {
  font-size: calc(15rem / 16);
  list-style-type: disc;
  margin-bottom: 1em;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  ul.normal-list li {
    font-size: 1rem;
  }
}


/*
  splide　スライダー（共通）
-----------------------------------------------*/
.splide__pagination {
  margin: 10px 0!important;
}
/* ページネーションの形状を丸にする */
.splide__pagination__page {
  border-radius: 50%;
  background: #ccc;/* 未選択時の色 */
  border: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  opacity: 0.5;
  margin: 0 6px;
  padding: 0;/*これが無いと正円にならない*/
}

/* 選択中のページネーションの見た目 */
.splide__pagination__page.is-active {
  background: var(--c-main-bright-green); /* 選択時の色 */
  opacity: 1;
  transform: scale(1.3); /* 選択時に少し大きくする場合 */
}


/*
  404
-----------------------------------------------*/
.error-container {
 padding: 90px 0;
}

.error-container .hedding-01 {
  font-size: clamp( 1.125rem, calc( 1.01rem + 0.48vw ), 1.375rem );/* 18px - 22px */
  font-weight: 600;
  margin-bottom: 20px;
}
.error-container .btn {
  margin: 60px 0;
}