@charset "utf-8";
/* CSS Document
①-（ハイフン1つ）or _（アンダーバー1つ）：サイト特有の他の場所でも使い回すパーツ（例：.list-abc）は、親の名前（.about）を混ぜずに、それ単体で完結する名前にします。
②__ (アンダースコア2つ): 親要素（Block）に直接属する「（依存する）使い回すパーツ」に使用します。例）<ul class="list-abc about__body">
例）about__inner
レイアウトを調整するための「内枠」というニュアンスが強くなります。
例）about__body
セクションの「中身・本体」という意味で一番汎用的です。
例）about__contents
コンテンツそのものが入る場所、という直感的な名前です。
③-- (ハイフン2つ): 色・サイズ・状態などの「変化（Modifier）」に使用します。
例）大 中 小 class--l class--m class--s 
例）大 中 小 .--l .--m .--s
*/

/*==================================================
 common
==================================================*/
:root {
  --height_header: 0px;
  --height_fix_footer: 0px;

  --base_width: 1100px;

  --base_width_half: calc((100% - var(--base_width)) / 2);

  --font_jp: "Noto Sans JP", sans-serif;
  --font_en: "Poppins", sans-serif;
  --icons: "Material Symbols Rounded";
  --iconsfill: "FILL" 1; /*塗りつぶしアイコン font-variation-settings: var(--iconsfill);*/

  --transition: 0.3s;

  --black: #333333;
  --white: #ffffff;
  --gray: #999999;
  --Lgray: #f5f5f5;
  --LLgray: #cbd8e0;

  --blue: #0a51a2;
  --lightblue: #ecf2f8;
  --skyblue: #00afca;
  --orange: #ff5f15;
  --red: #fd0000;
  --green: #629600;
  --yellow: #ffff46;
  --pink: #e50048;
  --lightpink: #fff7f9;

  --boxshadowB: 0 4px 8px hsla(0, 0%, 69%, 0.4);

  --c: var(--blue);
}

@media (max-width: 1380px) {
  :root {
    --base_width: 100%;
  }
}

@media (max-width: 520px) {
  :root {
    --section: 50px;
    --base_width: 100%;
    --base_width_half: 5%;

    --fzrem: 3rem;
  }
}

html {
  scroll-padding-top: 140px;
}

body {
  padding-top: var(--height_header);
  line-height: 1.8;
}

@media (max-width: 520px) {
  body {
    padding-bottom: var(--height_fix_footer);
  }
}

/*----------------------------------------
  base control
----------------------------------------*/

/* objedt-fit */
.of_cover img,
img.of_cover {
  object-fit: cover;
  max-width: none;
  width: 100%;
  height: 100%;
}

.of_cont img,
img.of_cont {
  object-fit: contain;
}

a.logo {
  display: block;
}
a.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
  border-radius: 0px;
}
a.logo:hover img {
  scale: none;
}

body .calc_pr_min {
  padding-right: max(5%, calc((100vw - var(--base_minwidth)) / 2));
}
body .calc_pl_min {
  padding-left: max(5%, calc((100vw - var(--base_minwidth)) / 2));
}

body .calc_pr_large {
  padding-right: max(5%, calc((100vw - var(--base_largewidth)) / 2));
}
body .calc_pl_large {
  padding-left: max(5%, calc((100vw - var(--base_largewidth)) / 2));
}

@media screen and (max-width: 520px) {
  body .calc_pr_min {
    padding-right: 5%;
  }
  body .calc_pl_min {
    padding-left: 5%;
  }
}

/*----------------------------------------
  box control
----------------------------------------*/

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: var(--gap);
  --grid: 3;
  --gap: 50px;
}
@media (max-width: 520px) {
  [class*="grid_"] {
    --gap: 30px;
    --grid: 1;
  }
}

/* [class*="grid_"] 等分 auto-fit*/
[class*="gridfit_"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
  justify-content: center;
  gap: var(--gap);
  --grid: 3;
  --gap: 50px;
  --width: calc((100% - var(--gap) * (var(--grid) - 1)) / var(--grid));
}

/* [class*="flexnum_"] 等分 */
[class*="flexnum_"] {
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  --num: 3;
  --gap: 60px;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
}

[class*="flexnum_"] > * {
  width: var(--width);
}

@media screen and (max-width: 520px) {
  [class*="flexnum_"] {
    --num: 1;
    --gap: 20px;
  }
}

/* [class*="flexfit_"] 1個：1列 / 偶数：2列 奇数：3列 可変*/
[class*="flexfit_"] {
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  --gap: 60px;
}
/*1以外奇数 */
[class*="flexfit_"] > * {
  --num: 3;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  width: var(--width);
}
/* 1個 */
[class*="flexfit_"]:has(> *:only-child) > * {
  --num: 1;
}
/* 偶数 */
[class*="flexfit_"]:has(> *:nth-child(even):last-child) > * {
  --num: 2;
}

/* [class*="alternating_"] 交互の */
[class*="altern_"] {
  display: flex;
  flex-flow: column;
  gap: var(--gaps);
  --gaps: 100px; /*親縦gap*/
  --gap: 60px; /*子横gap*/
  --firstchild: 55%; /*子メディア幅*/
}
[class*="altern_"] > * {
  display: flex;
  gap: var(--gap);
}
[class*="altern_"] > * > *:first-child {
  flex: none;
  width: var(--firstchild);
}
[class*="altern_"] > * > *:last-child {
  flex: 1;
}

[class*="altern_"] > *:nth-child(even) {
  flex-flow: row-reverse;
}

@media screen and (max-width: 520px) {
  [class*="altern_"] {
    --gaps: 50px; /*親縦gap*/
    --gap: 20px; /*子横gap*/
    --firstchild: 100%; /*子メディア幅*/

    --alternff: column; /*スマホのみ並び*/
  }
  [class*="altern_"] > * {
    flex-flow: var(--alternff);
  }
  [class*="altern_"] > *:nth-child(even) {
    flex-flow: var(--alternff);
  }
}

/* [class*="Horizontal_"] 水平（つまり左右）*/
[class*="horizon_"] {
  display: flex;
  gap: var(--gap);
  flex-flow: var(--horizonff);
  --gap: 60px; /*横gap*/
  --horizonff: row; /*並び*/
  --firstchild: fit-content; /*メディア幅*/
}
[class*="horizon_"] > *:first-child {
  flex: none;
  width: var(--firstchild);
}
[class*="horizon_"] > *:last-child {
  flex: 1;
}

@media screen and (max-width: 520px) {
  [class*="horizon_"] {
    --gap: 20px; /*横gap*/
    --horizonff: column; /*並び*/
    --firstchild: 100%; /*メディア幅*/
  }
}

/*==================================================
 splide controll
==================================================*/

/*
  サムネイルスライド
----------------------------------------
.box_splide_thumbnails .splide__track--nav > .splide__list > .splide__slide.is-active {
  border: none;
}

.box_splide_thumbnails strong {
  display: block;
  margin: 10px 0 0;
  background: var(--white);
  padding: 5px 10px;
}
.box_splide_thumbnails .slide_thumbnail {
  margin: 10px 0 0;
}
  */

/*==================================================
 this site specific
==================================================*/

/*----------------------------------------
  余白
----------------------------------------*/
:root {
  --l: clamp(50px, 9vw, 100px);
  --m: clamp(40px, 6vw, 70px);
  --s: clamp(25px, 4.5vw, 50px);
}

.spacer_pt {
  padding-top: var(--l);
}

.spacer_pt--m {
  padding-top: var(--m);
}

.spacer_pt--s {
  padding-top: var(--s);
}

.spacer_pb {
  padding-bottom: var(--l);
}

.spacer_pb--m {
  padding-bottom: var(--m);
}

.spacer_pb--s {
  padding-bottom: var(--s);
}

.spacer_mb {
  margin-bottom: var(--l);
}

.spacer_mb--m {
  margin-bottom: var(--m);
}

.spacer_mb--s {
  margin-bottom: var(--s);
}

.spacer_mt {
  margin-top: var(--l);
}

.spacer_mt--m {
  margin-top: var(--m);
}

.spacer_mt--s {
  margin-top: var(--s);
}

.spacer_mc {
  margin-inline: auto;
}

.bg_lightblue {
  background: var(--lightblue);
}

.bd_gray {
  border: 1px solid var(--gray);
}

/*----------------------------------------
  角丸
----------------------------------------*/
.radius {
  container-type: inline-size;
  border-radius: 20px;
}

.radius img {
  border-radius: 20px;
}

/*----------------------------------------
  title
----------------------------------------*/
.tit_Z {
  position: relative;
  z-index: 1;
  padding-top: 50px;
  padding-bottom: 50px;
  border-radius: 0;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  --min-font: 24;
  --max-font: 45;
}

.tit_Z:before {
  position: absolute;
  bottom: 0;
  left: 3vw;
  content: attr(data-eng);
  display: block;
  color: var(--white);
  font-size: 4em;
  line-height: 0.7;
  font-family: var(--font_en);
  opacity: 0.1;
}

.tit_Z:after {
  position: absolute;
  top: 99%;
  right: 0;
  content: "";
  display: block;
  width: var(--base_width_half);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: var(--blue);
  background: linear-gradient(to bottom, var(--blue), var(--skyblue));
  --size: 16px;
  --ar: 280 / 210;
  --mask: url(../images/pagetitle.svg) top right / contain no-repeat;
}

@media screen and (max-width: 1400px) {
  .tit_Z:after {
    width: 20vw;
  }
} /*--END media max-width--*/

:root {
  --titff: column;
  --titai: flex-start;
  --titjc: flex-start;
  --titgap: 15px;
  --titw: fit-content;
  --titm: 0;
  --titp: 0;
  --titbd: none;
  --titbg: none;
  --titc: var(--black);
  --titfz: 4rem;
  --titfw: var(--bold);
  --titta: center;
}
/*
.tit_ {
  grid-area: tit;
  position: relative;
  display: flex;
  flex-flow: var(--titff);
  align-items: var(--titai);
  justify-content: var(--titjc);
  gap: var(--titgap);
  width: var(--titw);
  padding: var(--titp);
  margin: var(--titm);
  border: var(--titbd);
  background: var(--titbg);
  color: var(--titc);
  font-family: var(--font_jp);
  --fzrem: var(--titfz);
  font-weight: var(--titfw);
  text-align: var(--titta);
}
*/

.tit_A {
  grid-area: titA;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--blue);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  --min-font: 24;
  --max-font: 38;
}

.tit_A:after {
  content: "";
  display: block;
  aspect-ratio: 52/12;
  width: 52px;
  height: auto;
  background: url(../images/icon_3ten.svg) no-repeat center / contain;
}

.tit_B {
  font-weight: bold;
  line-height: 1.5;
  --min-font: 22;
  --max-font: 38;
}
.tit_B.--blue {
  color: var(--blue);
}

.tit_C {
  --min-font: 22;
  --max-font: 30;

  position: relative;

  color: var(--blue);
  font-weight: bold;
  padding: 0 0 0 30px;
  line-height: 1.3;
}

.tit_C:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;

  background-image: linear-gradient(var(--blue), var(--skyblue));
}

.tit_D {
  --min-font: 20;
  --max-font: 28;
  position: relative;
  background: linear-gradient(to right, var(--blue), var(--skyblue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: bold;
}
.tit_D:after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 30px;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--skyblue) 100%);
}

.tit_E {
  position: relative;
  padding: 10px 30px 10px 50px;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  --min-font: 20;
  --max-font: 26;
}
.tit_E:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto 0;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  background: var(--white);
}

.tit_F {
  position: relative;
  border: 1px solid var(--blue);
  padding: 30px 50px;
  color: var(--blue);
  font-weight: bold;
  text-align: center;
  width: fit-content;
  --min-font: 18;
  --max-font: 23;
}
.tit_F::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--blue) transparent transparent transparent;
}
.tit_F::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
}

@media screen and (max-width: 520px) {
  .tit_A {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .tit_A span {
    --fzrem: 3rem;
  }

  .tit_A img {
    width: 100px;
    height: 60px;
    object-fit: contain;
  }
}

/*
  文字サイズ min(vw,rem)
----------------------------------------*/
*,
h1,
h2,
h3,
h4,
h5,
h6 {
  /*px*/
  --min-font: 15;
  --max-font: 16;
  --min-width: 360;
  --max-width: 1400;

  font-size: clamp(
    calc(var(--min-font) * 1px),
    calc(
      (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * (100vw - (var(--min-width) * 1px)) /
        (var(--max-width) - var(--min-width))
    ),
    calc(var(--max-font) * 1px)
  );
}

/*----------------------------------------
  button
----------------------------------------*/
.btn_A {
  grid-area: btnA;
  position: relative;
  display: block;
  width: min(100%, 320px);
  padding: 15px 1em;
  border-radius: 100vh;
  background: var(--c);
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s;
  --min-font: 14;
  --max-font: 16;
}

.btn_A:hover {
  opacity: 0.8;
}

.btn_A:after {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
  --size: 16px;
  --ar: 1 / 1;
  --mask: url(../images/icon_arrow.svg) center center / contain no-repeat;
}

.btn_A.--white {
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--blue);
}
.btn_A.--white:hover {
  background: var(--blue);
  color: var(--white);
}

.btn_A.--orange {
  margin: 0 auto;
  background: var(--orange);
  color: var(--white);
}

.btn_A.--orange:hover {
  opacity: 0.8;
}

.btn_B {
  grid-area: btnB;
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--blue);
  font-weight: bold;
}

.btn_B::after {
  font-family: var(--icons);
  content: "arrow_forward";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  width: 48px;
  height: auto;
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
  --min-font: 18;
  --max-font: 20;
}

@media screen and (max-width: 520px) {
  .btn_A {
    padding: 10px 1em;
  }
  .btn_A:after {
    --size: 15px;
  }

  .btn_B {
    gap: 15px;
  }

  .btn_B::after {
    width: 32px;
  }
} /*--END media max-width--*/

/*
  CTA ボタン
----------------------------------------*/

.btn_tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  white-space: nowrap;
  padding: 40px 50px;
  width: fit-content;
  height: 54px;
  border-radius: 50px;
  position: relative;
  --min-font: 22;
  --max-font: 32;
}
.btn_tel:before {
  flex: none;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
  --size: 1.3em;
  --ar: 24/17;
  --mask: url(../images/icon_tel.svg) center center / contain no-repeat;
}

.btn_mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  white-space: nowrap;
  padding: 0 35px;
  height: 54px;
  border-radius: 50px;
  position: relative;
}
.btn_mail:before {
  flex: none;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
  --size: 1.3em;
  --ar: 24/17;
  --mask: url(../images/icon_mail.svg) center center / contain no-repeat;
}
.btn_mail.sp {
  display: none;
}

:is(.btn_price, .btn_shop) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--blue);
  border: 1px solid var(--white);
  color: var(--white);
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 15px;
  width: 100%;
  min-height: 54px;
  border-radius: 50px;
  position: relative;
}

.btn_price {
  background: var(--blue);
}
.btn_shop {
  background: var(--orange);
}

:is(.btn_price, .btn_shop):before {
  content: "";
  display: block;
  flex: none;
  aspect-ratio: 760/881;
  width: 35px;
  height: auto;
  background: url(../images/icon_usagi.webp) no-repeat center / contain;
}

:is(.btn_price, .btn_shop) span {
  flex: 1;
  --min-font: 12;
  --max-font: 18;
}

@media screen and (max-width: 520px) {
  .btn_mail.sp {
    display: flex;
  }
} /*--END media max-width--*/

/*==================================================
header
==================================================*/

header {
  width: 100%;
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logos menus"
    "nav nav";
}

header .logos {
  grid-area: logos;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3vw;
  padding: 15px 5vw;
}

header .logos img {
  height: auto;
  width: auto;
  max-height: 50px;
}

header .menus {
  grid-area: menus;
  padding: 15px 5vw;
}

header nav {
  grid-area: nav;
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  padding: 15px 5vw;
}

header .gnav {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
  color: var(--blue);
}

header .gnav a {
  font-weight: bold;
  font-size: 15px;
}

#hamburger-check,
.hamburger {
  display: none;
}

/*----------------------------------------
  gnav dropdown
----------------------------------------*/
.gnav__dropdown-wrap {
  position: relative;
}

/* ▼ 矢印なし */
.gnav__dropdown-trigger::after {
  display: none;
}

/* 隙間を埋める透明ブリッジ */
.gnav__dropdown-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.gnav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  z-index: 200;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 8px;
  overflow: hidden;
}

.gnav__dropdown-wrap:hover .gnav__dropdown,
.gnav__dropdown-wrap.is-open .gnav__dropdown {
  display: block;
}

.gnav__dropdown li a {
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 14px;
  color: var(--blue);
  border-bottom: 1px solid var(--lightblue);
  transition: background var(--transition);
}

.gnav__dropdown li:last-child a {
  border-bottom: none;
}

.gnav__dropdown li a:hover {
  background: var(--lightblue);
}

/* SP: 常時表示 */
@media screen and (max-width: 768px) {
  .gnav__dropdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .gnav__dropdown-wrap::after {
    display: none;
  }

  .gnav__dropdown {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: static;
    transform: none;
    border: none;
    border-radius: 0;
    background: transparent;
    min-width: unset;
    overflow: visible;
    margin-top: 4px;
  }

  .gnav__dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    font-weight: normal;
    border-bottom: none;
    color: var(--blue);
    opacity: 0.8;
  }

  .gnav__dropdown li a::before {
    content: "";
    display: block;
    flex: none;
    width: 12px;
    height: 1px;
    background: var(--LLgray);
  }

  .gnav__dropdown li a:hover {
    background: transparent;
    opacity: 1;
  }
}

.fix_btn {
  position: fixed;
  z-index: 50;
  right: 3%;
  bottom: 5vh;
  width: min(100%, 230px);
  display: flex;
  flex-flow: column;
  gap: 15px;
}

@media screen and (max-width: 768px) {
  header {
    position: relative;
    width: 100%;
    background: var(--white);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nav nav"
      "logos logos";
  }

  header .logos {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  header .logos a {
    flex: none;
  }

  header .logos img {
    max-height: 35px;
    flex-shrink: 0;
  }

  header nav {
    border-top: none;
    padding: 8px 5vw;
  }

  header .menus {
    display: none;
  }

  header .hamburger {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
    margin: 0 0 0 auto;
  }

  header .hamburger span,
  header .hamburger span::before,
  header .hamburger span::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--blue);
    left: 0;
  }

  header .hamburger span {
    top: 19px;
  }
  header .hamburger span::before {
    top: -8px;
  }
  header .hamburger span::after {
    top: 8px;
  }

  header .gnav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 90;
  }

  #hamburger-check:checked ~ .gnav {
    display: flex;
  }

  #hamburger-check:checked ~ .hamburger span {
    background: transparent;
  }
  #hamburger-check:checked ~ .hamburger span::before {
    transform: rotate(45deg);
    top: 0;
  }
  #hamburger-check:checked ~ .hamburger span::after {
    transform: rotate(-45deg);
    top: 0;
  }

  .fix_btn {
    right: auto;
    left: 5%;
    bottom: 5px;
    width: 90%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 5px;
  }
}

/*==================================================
 企業向けサービス header
==================================================*/
header.header__bis {
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "logos menus nav";
  align-items: center;
}

header .logos__bis {
  grid-area: logos;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
}

header .logos__bis h2 {
  font-weight: bold;
  color: var(--blue);
  line-height: 1.5;
  --min-font: 14;
  --max-font: 20;
}
header .logos__bis h2 strong {
  display: block;
  font-weight: normal;
  color: var(--black);
  font-size: 0.7em;
}

header .logos__bis img {
  height: auto;
  width: auto;
  max-height: 50px;
}

header .menus__bis {
  grid-area: menus;
  display: flex;
  gap: 15px;
  padding: 15px;
}

.btn_menus {
  display: grid;
  grid-template-columns: var(--size) 1fr;
  grid-template-areas: "ico small" "ico cont";
  align-items: center;
  justify-content: center;
  gap: 5px 15px;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 0 35px;
  height: 54px;
  border-radius: 50px;
  position: relative;
  --min-font: 13;
  --max-font: 18;
}
.btn_menus:before {
  grid-area: ico;
  flex: none;
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
  --size: 1.3em;
  --ar: 24/17;
}
.btn_menus small {
  grid-area: small;
  line-height: 1;
  align-self: self-end;
  width: fit-content;
  padding: 2px 10px;
  margin-inline: auto;
  --min-font: 12;
  --max-font: 14;
}
.btn_menus span {
  grid-area: cont;
  line-height: 1;
  align-self: start;
  font-size: 1em;
}
.btn_menus.--tel span {
  font-size: 1.1em;
}
.btn_menus.--tel:before {
  --mask: url(../images/icon_tel.svg) center center / contain no-repeat;
  --ar: 24/22;
}
.btn_menus.--mail:before {
  --mask: url(../images/icon_mail.svg) center center / contain no-repeat;
}

header.header__bis nav {
  border: none;
  padding: 15px;
}

#hamburger-check__bis,
.hamburger__bis {
  display: none;
}

header .hamburger__bis {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
  margin: 0 0 0 auto;
}

header .hamburger__bis span,
header .hamburger__bis span::before,
header .hamburger__bis span::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background: var(--blue);
  left: 0;
}

header .hamburger__bis span {
  top: 19px;
}
header .hamburger__bis span::before {
  top: -8px;
}
header .hamburger__bis span::after {
  top: 8px;
}

header .gnav__bis {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  z-index: 90;
}

header .gnav__bis a {
  display: block;
  font-weight: bold;
  color: var(--blue);
  --min-font: 20;
  --max-font: 20;
  padding: 8px 30px;
}

#hamburger-check__bis:checked ~ .gnav__bis {
  display: flex;
}

#hamburger-check__bis:checked ~ .hamburger__bis span {
  background: transparent;
}
#hamburger-check__bis:checked ~ .hamburger__bis span::before {
  transform: rotate(45deg);
  top: 0;
}
#hamburger-check__bis:checked ~ .hamburger__bis span::after {
  transform: rotate(-45deg);
  top: 0;
}

@media screen and (max-width: 1100px) {
  header .menus__bis {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    gap: 5px;
    padding: 5px;
    background: var(--lightblue);
  }

  header .menus__bis .btn_menus {
    flex: 1;
    gap: 5px;
    padding: 0 10px;
  }
  header .menus__bis .btn_menus small {
    padding: 2px 5px;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  header .logos__bis {
    gap: 10px;
    padding: 5px;
  }
  header .logos__bis img {
    max-height: 30px;
  }
} /*--END media max-width--*/

/*==================================================
 footer
==================================================*/
footer {
  padding-bottom: 40px;
}

footer .logos {
  grid-area: logos;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2vw;
  padding: 15px 5vw;
}

footer .logos img {
  height: auto;
  width: auto;
  max-height: 50px;
}

.flexnum_sitemap {
  --gap: 3vw;
}

.flexnum_sitemap dt {
  padding: 8px 0;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--black);
  font-weight: bold;
  --min-font: 15;
  --max-font: 18;
}

.flexnum_sitemap dd {
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.flexnum_sitemap dd a {
  display: block;
  --min-font: 13;
  --max-font: 16;
}

.copyright {
  text-align: right;
  --min-font: 10;
  --max-font: 12;
}

.footer__sns {
  text-align: right;
  top: -1em;
}

a[class^="sns_"]:before {
  content: "";
  display: block;
  width: var(--size);
  height: auto;
  aspect-ratio: var(--ar);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: currentColor;
  --size: 30px;
  --ar: 1 / 1;
}

.sns_x:before {
  --mask: url(../images/icon_x.svg) center center / contain no-repeat;
}

.sns_insta:before {
  --mask: url(../images/icon_insta.svg) center center / contain no-repeat;
}

.sns_fb:before {
  --mask: url(../images/icon_fb.svg) center center / contain no-repeat;
}

.sns_line:before {
  --mask: url(../images/icon_line.svg) center center / contain no-repeat;
}

@media screen and (max-width: 520px) {
  footer {
    padding-bottom: 100px;
  }
  .flexnum_sitemap {
    --num: 2;
  }
} /*--END media max-width--*/

/*==================================================
 TOP
==================================================*/
/*----------------------------------------
 >>scope(.mv) 
----------------------------------------*/
.topmv {
  position: relative;
  background: url(../images/top_mv01.webp) no-repeat center / cover;
  padding-bottom: 100px;
}

.topmv h2 {
  --min-font: 32;
  --max-font: 62;
  color: var(--white);
  font-weight: bold;
  line-height: 1.5;
  text-shadow:
    0 0 5px var(--blue),
    0 0 10px var(--blue),
    0 0 15px var(--blue);
}

.flexnum_circle {
  width: min(100%, 670px);
  --num: 3;
  --gap: 10px;
}

.flexnum_circle li {
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  border-radius: 100%;
  text-align: center;
}

.flexnum_circle li p {
  font-weight: bold;
  color: var(--white);
  line-height: 1.3;
  --min-font: 13;
  --max-font: 28;
}

.flexnum_circle li p strong {
  color: var(--yellow);
  --min-font: 17;
  --max-font: 34;
  line-height: 1.8;
}

.flexnum_circle li p small {
  --min-font: 10;
  --max-font: 20;
}

.flexnum_circle li p span {
  --min-font: 12;
  --max-font: 26;
}

.circle_li--blue {
  background: var(--blue);
}
.circle_li--green {
  background: var(--green);
}
.circle_li--orange {
  background: var(--orange);
}

/* ウサギバナー */
.pop_bnr {
  position: absolute;
  bottom: 40px;
  right: 5%;
  display: flex;
  justify-content: flex-end;

  opacity: 0;
  animation: tsutonton 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 1s;
}

.pop_bnr__fukidasi {
  display: grid;
  place-items: center;
  position: relative;
  padding: 1px 50px 1px 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}

@keyframes tsutonton {
  0% {
    opacity: 0;
    transform: translateY(-150px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    transform: translateY(-15px);
  }
  85% {
    transform: translateY(0);
  }
  93% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.pop_bnr__fukidasi img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.pop_bnr__fukidasi p {
  position: relative;
  z-index: 2;
  color: var(--red);
  --min-font: 16;
  --max-font: 24;
}

.pop_bnr figure {
  width: min(20%, 140px);
  height: auto;
}

@media screen and (max-width: 1300px) {
  .pop_bnr {
    bottom: 10px;
  }
  .topmv {
    padding-bottom: 200px;
  }
} /*--END media max-width--*/
@media screen and (max-width: 520px) {
  .topmv {
    padding-top: 140px;
    background: url(../images/top_mv01_sp.webp) no-repeat center / cover;
  }
  .pop_bnr {
    bottom: 40px;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.info) 
----------------------------------------*/
.flexnum_info {
  --num: 4;
  --gap: 28px;
}

.flexnum_info li {
  aspect-ratio: 240/268;
}

.flexnum_info li :is(a, img) {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 520px) {
  .flexnum_info {
    --num: 2;
    --gap: 15px;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.topshop) 
----------------------------------------*/
[data-shop="shop01"] {
  --c: var(--blue);
}
[data-shop="shop02"] {
  --c: var(--green);
}
[data-shop="shop03"] {
  --c: var(--orange);
}
[data-shop="shop04"] {
  --c: var(--skyblue);
}

.topshop {
  position: relative;
  background: var(--lightblue);
}
.topshop::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200px;
  background-color: var(--blue);
  border-radius: 60px 60px 0 0;
}

.flexnum_topshop {
  --num: 2;
  --gap: 30px;
  position: relative;
  z-index: 2;
}

.flexnum_topshop li {
  padding: min(2.5vw, 30px);
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--c);
}

.flexnum_topshop li a {
  display: grid;
  grid-template-columns: 45% 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "pic h"
    "pic p"
    "pic btnA";
  gap: 10px 2vw;
  height: 100%;
}

.flexnum_topshop picture {
  grid-area: pic;
}

.flexnum_topshop h3 {
  grid-area: h;
  color: var(--c);
  font-weight: bold;
  line-height: 1.5;
  --min-font: 14;
  --max-font: 24;
}

.flexnum_topshop p {
  grid-area: p;
  --min-font: 13;
  --max-font: 15;
}

.flexnum_topshop .btn_A {
  background: var(--c);
}

@media screen and (max-width: 768px) {
  .topshop::before {
    border-radius: 30px 30px 0 0;
  }

  .flexnum_topshop {
    --num: 1;
  }
  .flexnum_topshop li {
    padding: 15px;
  }

  .flexnum_topshop li a {
    grid-template-areas:
      "pic h"
      "pic p"
      "btnA btnA";
    gap: 10px 15px;
  }
  .flexnum_topshop .btn_A {
    margin-inline: auto;
    margin-top: 10px;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.shoplist) 
----------------------------------------*/
.flex_icons {
  width: fit-content;
  display: flex;
  flex-flow: wrap;
  gap: 30px;
  margin-bottom: var(--s);
}

.flex_icons li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.flex_icons img {
  aspect-ratio: 1/1;
  width: 30px;
  height: auto;
  object-fit: contain;
}

.flex_icons li span {
  --min-font: 13;
  --max-font: 15;
}

.map__shoparchive iframe {
  aspect-ratio: 4/1;
  width: 100%;
  height: auto;
}

.flexnum_shop {
  --num: 2;
  --gap: 30px;
  position: relative;
  z-index: 2;
}

.flexnum_shop li {
  padding: min(2.5vw, 30px);
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--c);
  display: grid;
  grid-template-columns: 48% 1fr;
  grid-template-areas:
    "pic cat"
    "pic h"
    "pic p"
    "icon dl"
    "btnA btnA"
    "btnB btnB";
  align-content: start;
  gap: 10px 1.5em;
}

.flexnum_shop picture {
  grid-area: pic;
  align-self: start;
}

.flexnum_shop h3 {
  grid-area: h;
  color: var(--c);
}

.flexnum_shop h3 a {
  font-weight: bold;
  line-height: 1.5;
  text-decoration: underline;
  --min-font: 18;
  --max-font: 24;
}
.flexnum_shop h3 a:hover {
  text-decoration: none;
}

.flexnum_shop .cat_term {
  grid-area: cat;
  flex-flow: wrap;
}

.list_icon {
  padding: 0 20px;
  grid-area: icon;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  align-self: start;
  justify-content: center;
}

.list_icon i {
  --min-font: 10;
  --max-font: 10;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 3px;
}

.list_icon img {
  aspect-ratio: 1/1;
  width: 30px;
  height: auto;
  object-fit: contain;
}

.flexnum_shop p {
  grid-area: p;
  --min-font: 14;
  --max-font: 15;
}

.flexnum_shop li .dl {
  grid-area: dl;
}

.flexnum_shop li dl {
  display: flex;
  flex-flow: wrap;
  gap: 0 0.5em;
  margin: 0;
  color: var(--c);
}

.flexnum_shop li dt {
  font-weight: bold;
  --min-font: 15;
  --max-font: 15;
}

.flexnum_shop li dd {
  margin: 0;
  --min-font: 13;
  --max-font: 14;
}

.flexnum_shop .btn_A {
  margin-inline: auto;
  margin-top: 20px;
  font-family: var(--font_en);
  --min-font: 20;
  --max-font: 22;
}
.flexnum_shop .btn_A:before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  content: "call";
  font-family: var(--icons);
  line-height: 1;
  font-size: 1.4em;
}

.flexnum_shop .btn_B {
  margin: 8px auto 0;
  justify-self: center;
  color: var(--c);
}
.flexnum_shop .btn_B:after {
  background: var(--c);
}

@media screen and (max-width: 768px) {
  .topshop::before {
    border-radius: 30px 30px 0 0;
  }

  .map__shoparchive iframe {
    aspect-ratio: 4/2.5;
  }

  .flexnum_shop {
    --num: 1;
  }
  .flexnum_shop li {
    padding: 15px;
    grid-template-areas: "pic cat" "pic h" "pic icon" "p p" "dl dl" "btnA btnA" "btnB btnB";
  }

  .flexnum_shop li a {
    grid-template-areas:
      "pic h"
      "pic p"
      "btnA btnA";
    gap: 10px 15px;
  }
  .flexnum_shop .btn_A {
    margin-inline: auto;
    margin-top: 10px;
  }

  .flexnum_shop p br {
    display: none;
  }
  .list_icon {
    padding: 0 0;
    justify-content: start;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.topservice) 
----------------------------------------*/
.topservice {
  background: var(--blue);
}

.horizon_tit {
  color: var(--white);
  align-items: flex-end;
  --gap: 40px;
}

.flexnum_topservice {
  --num: 3;
  --gap: 5vw;
  color: var(--white);
}

.flexnum_topservice li {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.flexnum_topservice picture {
  grid-area: pic;
}

.flexnum_topservice h3 {
  grid-area: h;
  padding: 15px 0;
  border-bottom: 2px solid var(--white);
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  --min-font: 18;
  --max-font: 24;
}

.flexnum_topservice p {
  grid-area: p;
  margin-bottom: 25px;
  --min-font: 14;
  --max-font: 16;
}

.flexnum_topservice .btn_A {
  width: 80%;
}

@media screen and (max-width: 768px) {
  .flexnum_topservice .btn_A {
    width: 100%;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .horizon_tit {
    --gap: 20px;
  }

  .flexnum_topservice {
    --num: 1;
    --gap: 40px;
    color: var(--white);
  }

  .flexnum_topservice li {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas:
      "h h"
      "pic p"
      "btnA btnA";
    gap: 15px;
  }

  .flexnum_topservice h3 {
    padding: 0 0 10px;
  }

  .flexnum_topservice p {
    margin-bottom: 0px;
  }

  .flexnum_topservice .btn_A {
    width: 100%;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.topreason) 
----------------------------------------*/

.list_topreason {
  display: flex;
  flex-flow: column;
  gap: 80px;
}

.list_topreason li {
  --space: 6vw;
  display: grid;
  grid-template-columns: 50% var(--space) 1fr;
  grid-template-areas:
    "pic i i"
    "pic . h"
    "pic . p"
    "pic . btnA";
  gap: 15px 0;
  counter-increment: number;
}

.list_topreason li > * {
  align-self: self-start;
}

.list_topreason picture {
  aspect-ratio: 1080/680;
  grid-area: pic;
  width: 100%;
  height: auto;
}

.list_topreason picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list_topreason i {
  grid-area: i;
  padding-left: var(--space);
  border-bottom: 1px dotted var(--black);
  font-family: var(--font_en);
  --min-font: 15;
  --max-font: 20;
}
.list_topreason i:after {
  content: counter(number, decimal-leading-zero);
  font-size: 1.8em;
}

.list_topreason h3 {
  grid-area: h;
  color: var(--blue);
  font-weight: bold;
  --min-font: 20;
  --max-font: 24;
}

.list_topreason p {
  grid-area: p;
  margin-bottom: 15px;
}

.list_topreason .btn_A {
  width: min(90%, 240px);
}

.list_topreason.--s {
  gap: 2vw;
}

.list_topreason.--s li {
  --space: 5vw;
  grid-template-columns: 30% var(--space) 1fr;
}

.list_topreason.--s i {
  font-weight: bold;
  padding-bottom: 8px;
}

.list_topreason.--s i:after {
  display: none;
}

@media screen and (max-width: 520px) {
  .list_topreason {
    display: flex;
    flex-flow: column;
    gap: 30px;
  }

  .list_topreason li {
    --space: 15px;
    display: grid;
    grid-template-columns: 65% var(--space) 1fr;
    grid-template-areas:
      "pic i i"
      "h h h"
      "p p p"
      "btnA btnA btnA";
    gap: 10px 0;
    counter-increment: number;
  }

  .list_topreason p {
    margin-bottom: 0;
  }

  .list_topreason .btn_A {
    margin-inline: auto;
  }

  .list_topreason.--s {
    gap: 30px;
  }

  .list_topreason.--s picture {
    aspect-ratio: 1/1;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.topnews) 
----------------------------------------*/
.topnews {
  background: var(--lightblue);
}

.topnews__tit {
  color: var(--blue);
}

.topnews__tit .tit_B {
  margin-bottom: 30px;
}

.horizon__topnews {
  --gap: 90px;
}

.list_news {
  border-top: 1px solid var(--gray);
}

.list_news li {
  display: flex;
  flex-flow: wrap;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid var(--gray);
}

.list_news li :is(time, em) {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .topnews__tit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .topnews__tit .tit_B {
    margin-bottom: 0;
  }

  .horizon__topnews {
    --horizonff: column;
    --gap: 30px;
  }

  .list_news li {
    gap: 10px;
    padding: 20px 0;
  }
} /*--END media max-width--*/

/*----------------------------------------
 >>scope(.rec_cta) 
----------------------------------------*/
.rec_cta {
  display: flex;
  flex-flow: column;
  gap: 35px;
  color: var(--white);
  text-align: center;
}

.rec_cta picture {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 50%;
  height: 100%;
}
.rec_cta .rec_cta__bg1 {
  left: 0;
}
.rec_cta .rec_cta__bg2 {
  right: 0;
}

.rec_cta:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.rec_cta > * {
  position: relative;
  z-index: 2;
}

.rec_cta .btn_A {
  --min-font: 15;
  --max-font: 18;
}

@media screen and (max-width: 520px) {
  .rec_cta picture {
    top: 0;
    width: 100%;
    height: 50%;
  }
  .rec_cta .rec_cta__bg2 {
    top: auto;
    bottom: 0;
  }
} /*--END media max-width--*/

/*==================================================
 プライバシーポリシー
==================================================*/
.privacy__body .tit_C {
  margin-top: 50px;
  margin-bottom: 50px;
}

/*==================================================
 会社情報
==================================================*/
.horizon__rinen {
  --gap: 60px; /*横gap*/
  --horizonff: row; /*並び*/
  --firstchild: 40%; /*メディア幅*/
}

.rinen__text dl {
  font-weight: bold;
}

.rinen__text dt {
  margin-bottom: 30px;
}

.rinen__text--l dd {
  --min-font: 20;
  --max-font: 26;
}

.rinen__text--m dd {
  --min-font: 18;
  --max-font: 19;
}

@media screen and (max-width: 520px) {
  .horizon__rinen {
    --gap: 40px; /*横gap*/
    --horizonff: column; /*並び*/
    --firstchild: 100%; /*メディア幅*/
  }
} /*--END media max-width--*/

/*----------------------------------------
 概要テーブル
----------------------------------------*/

.list-table dl {
  display: flex;
  gap: 10px;
}

.list-table dl + dl {
  margin-top: 10px;
}

.list-table dl :is(dt, dd) {
  padding: 20px;
}

.list-table dl dt {
  flex: none;
  width: 18%;
  font-weight: bold;
}

.company__contents dl :is(dt, dd) {
  border-radius: 10px;
}

.company__contents dl dt {
  background: var(--blue);
  color: var(--white);
}
.company__contents dl dd {
  flex: 1;
  background: var(--white);
  --min-font: 15;
  --max-font: 18;
}

.shop__contents dl dt {
  background: color-mix(in srgb, var(--c) 8%, var(--white) 100%);
  border-radius: 8px;
  color: var(--c);
  --min-font: 16;
  --max-font: 17;
}

@media screen and (max-width: 520px) {
  .list-table dl {
    flex-flow: column;
  }
  .list-table dl dt {
    width: 100%;
  }

  .list-table dl :is(dt, dd) {
    padding: 15px;
    border-radius: 10px;
  }
} /*--END media max-width--*/

/*----------------------------------------
 沿革
----------------------------------------*/

.list-history dl {
  display: flex;
  gap: 0 15px;
  padding: 15px 0;
  position: relative;
}

.list-history dl dt {
  display: flex;
  gap: 5px;
  width: 150px;
  position: relative;
  padding: 20px 15px;
  font-weight: bold;
  --min-font: 18;
  --max-font: 18;
}

.list-history dl:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: var(--blue);
  position: absolute;
  top: calc(40px + 0.5em);
  left: 0;
}
.list-history dl:last-child:before {
  display: none;
}

.list-history dl dt:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 4px solid var(--blue);
  border-radius: 50px;
  position: absolute;
  top: calc(20px + 0.5em);
  left: -7px;
  --min-font: 18;
  --max-font: 20;
}

.list-history dl dt small {
  display: block;
  color: var(--blue);
  font-size: 1em;
}

.list-history dl dd {
  flex: 1;
  background: var(--lightblue);
  border-radius: 15px;
  padding: 20px 30px;
  --min-font: 17;
  --max-font: 17;
}

@media screen and (max-width: 520px) {
  .list-history dl {
    flex-flow: column;
  }
  .list-history dl dt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .list-history dl dd {
    width: 95%;
    margin: 0 0 0 5%;
  }
} /*--END media max-width--*/

/*==================================================
 お知らせブログ
==================================================*/

.flexnum_news {
  --num: 3;
  --gap: 4vw;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
}

.flexnum_news picture {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  border: 1px solid var(--gray);
}

.flexnum_news picture img {
  width: 100%;
  height: 100%;
}

.flexnum_news a {
  display: grid;
  flex-flow: column;
  gap: 10px;
}

.flexnum_news h3 {
  padding: 0 0 5px;
  border-bottom: 1px solid var(--gray);
  font-weight: bold;
  --min-font: 16;
  --max-font: 20;
}

.flexnum_news .p {
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .flexnum_news {
    --num: 2;
    --gap: 30px;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .flexnum_news {
    --num: 1;
    --gap: 30px;
  }
} /*--END media max-width--*/

/*==================================================
 店舗詳細
==================================================*/
.shop .tit_C {
  color: var(--c);
}
.shop .tit_C:before {
  --mix: color-mix(in srgb, var(--c) 55%, var(--yellow) 45%);
  background-image: linear-gradient(var(--c), var(--mix));
  background: var(--c);
}

.shop .tit_E {
  background: var(--c);
}

.shop iframe {
  aspect-ratio: 16/9;
}

.shop .btn_A {
  margin-inline: auto;
}

.shop a {
  text-decoration: underline;
}

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

.box-shop {
  display: flex;
  flex-flow: column;
  gap: clamp(20px, 4vw, 40px);
}

.flexnum_gallery3 {
  --gap: 15px;
}

[data-js="modal"] figure img {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
}

[data-js="modal"] figure {
  position: relative;
}

[data-js="modal"] figure:after {
  position: absolute;
  bottom: 10px;
  right: 10px;
  content: "open_in_full";
  font-family: var(--icons);
  font-size: 1.8rem;
  line-height: 1;
  background: var(--white);
}
.table-price {
  --c: var(--pink);
}

.table-price table {
  width: 100%;
  border: 5px solid var(--c);
  background: var(--white);
  margin-bottom: 10px;
}

.table-price table thead th {
  background: var(--c);
  color: var(--white);
  text-align: center;
}
.table-price table tbody th,
.table-price table tbody .column-1 {
  background: color-mix(in srgb, var(--c) 5%, var(--white) 100%);
  text-align: left;
}

.table-price table tbody tr:nth-child(even) th,
.table-price table tbody tr:nth-child(even) .column-1 {
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
}

.table-price .tablepress-table-description {
  display: block;
  text-align: right;
}

.shop .table-price .tablepress-table-description {
  text-align-last: left;
}

.table-price :is(td, th) {
  padding: 10px 1vw;
  border: 1px solid var(--LLgray);
  vertical-align: middle;
  --min-font: 13;
  --max-font: 16;
}

.table-price table tbody tr:nth-child(even) td {
  background: var(--Lgray);
}

.table-price th,
.table-price .column-1 {
  font-weight: bold;
}

.table-price td {
  width: auto;
  text-align: right;
  white-space: nowrap;
}

.table-price.price__price tbody th,
.table-price.price__price tbody .column-1 {
  width: 50%;
}

/*トグル */
.table-price {
  position: relative;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* 開閉時のアニメーション速度 */
  cursor: pointer;
}
.table-price::after {
  content: "タップで全体を表示";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* グラデーションの高さ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
  pointer-events: none;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 15px;
  color: var(--pink);
  font-weight: bold;
  font-size: 15px;
  transition: opacity 0.3s ease;
}

.table-price.is-open {
  max-height: 2500px;
}

.table-price.is-open::after {
  opacity: 0;
  display: none;
}

@media screen and (max-width: 520px) {
  .flexnum_gallery3 {
    --num: 3;
    --gap: 5px;
  }

  .shop iframe {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
  }
} /*--END media max-width--*/

/*コインランドリーのスマホ料金表 */
@media screen and (max-width: 520px) {
  .table-price.price__coinlaundry :is(table, thead, tbody) {
    width: 100%;
    display: block;
  }
  .table-price.price__coinlaundry table tr {
    display: flex;
    flex-flow: wrap;
  }

  .table-price.price__coinlaundry :is(td, th) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
    flex: 1;
  }

  .table-price.price__coinlaundry thead th {
    justify-content: center;
    text-align: center;
    padding: 5px 1vw;
  }

  .table-price.price__coinlaundry table :is(thead tr) > *:last-child {
    display: none;
  }

  .table-price.price__coinlaundry table :is(tbody tr) > *:last-child {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: bold;
    font-size: 1em;
  }
  .table-price.price__coinlaundry table :is(tbody tr) > *:last-child:before {
    flex: none;
    content: "料金";
    background: var(--pink);
    color: var(--white);
    padding: 5px;
    width: 4em;
    height: stretch;
    text-align: center;
  }
} /*--END media max-width--*/

/*==================================================
 お問い合わせ
==================================================*/
.tel__contents {
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding: 50px;
  text-align: center;
}

.tel__contents .tit_A {
  margin-bottom: 20px;
}

.tel__contents h3 {
  font-weight: bold;
  --min-font: 18;
  --max-font: 20;
}

@media screen and (max-width: 520px) {
  .tel__contents {
    padding: 30px 15px;
  }
} /*--END media max-width--*/

/*==================================================
 コインランドリー
==================================================*/
.coinlaundrymv {
  position: relative;
  gap: 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coinlaundrymv:after {
  content: "";
  position: absolute;
  left: -10vw;
  bottom: 2vw;
  z-index: -1;
  display: block;
  width: 80vw;
  height: 300px;
  background: url(../images/bg_water.webp) no-repeat bottom -50px center/ cover;
  opacity: 0.6;
  transform: rotate(-10deg);
}

.coinlaundrymv > * {
  position: relative;
  z-index: 5;
}

.coinlaundrymv picture {
  flex: 1;
  height: stretch;
}
.coinlaundrymv picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 0 5vw;
  border-left: 5px solid var(--white);
  border-bottom: 5px solid var(--white);
}

.coinlaundrymv h2 {
  --min-font: 30;
  --max-font: 56;
  color: var(--blue);
  font-weight: bold;
  line-height: 1.4;
  padding-left: 5%;
  margin: 20px 0;
  text-shadow:
    0 0 5px var(--white),
    0 0 10px var(--white),
    0 0 15px var(--white);
}

.coinlaundrymv h2 i {
  width: fit-content;
  display: block;
  color: var(--white);
  background: var(--blue);
  font-family: var(--font_en);
  padding: 5px 15px;
  line-height: 1;
  --min-font: 28;
  --max-font: 48;
  text-shadow: none;
  margin-bottom: 20px;
}

.coinlaundrymv h2 strong {
  font-size: 1.15em;
  color: var(--pink);
}

@media screen and (max-width: 768px) {
  .coinlaundrymv {
    position: relative;
    gap: 1vw;
    flex-flow: column;
  }

  .coinlaundrymv:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    z-index: -1;
    display: block;
    width: 100vw;
    height: 200px;
    background: url(../images/bg_water.webp) no-repeat bottom -50px center/ cover;
    opacity: 0.4;
    transform: none;
  }
  .coinlaundrymv picture {
    width: 100%;
    margin-left: auto;
  }

  .coinlaundrymv picture img {
    border-radius: 0;
    border: none;
  }

  .coinlaundrymv h2 {
    padding-left: 0;
  }
} /*--END media max-width--*/

.dl_hour {
  background: var(--blue);
  color: var(--white);
  text-align: center;
}

.dl_hour :is(dt, dd) {
  --min-font: 22;
  --max-font: 38;
  font-weight: bold;
}

.dl_hour dt {
  background: var(--blue);
  padding: 30px;
}

.dl_hour dd {
  border-top: 1px solid var(--white);
  padding: 30px;
  background: var(--skyblue);
}

.table-spec {
  --c: var(--skyblue);
}

.table-spec table {
  width: 100%;
  border: 5px solid var(--c);
  background: var(--white);
  margin-bottom: 10px;
}

.table-spec table thead th {
  background: var(--c);
  color: var(--white);
  text-align: center;
}
.table-spec table tbody th {
  background: color-mix(in srgb, var(--c) 5%, var(--white) 100%);
}

.table-spec :is(td, th) {
  padding: 10px 1vw;
  border: 1px solid var(--LLgray);
  vertical-align: middle;
  --min-font: 13;
  --max-font: 16;
}

.table-spec th {
  font-weight: bold;
}

.table-spec td {
  width: auto;
  white-space: nowrap;
}

.table-spec em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 50px;
  color: var(--white);
  font-weight: bold;
  margin-inline: auto;
  --min-font: 13;
  --max-font: 16;
}

.table-spec em.OK {
  background: var(--pink);
}
.table-spec em.NG {
  background: var(--gray);
}

@media screen and (max-width: 520px) {
  .table-spec.spec__coinlaundry :is(table, thead, tbody) {
    width: 100%;
    display: block;
  }
  .table-spec.spec__coinlaundry table tr {
    display: flex;
    flex-flow: wrap;
  }
  .table-spec.spec__coinlaundry table :is(th, td) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 5px 1vw;
  }

  .table-spec.spec__coinlaundry table :is(thead tr) > *:last-child {
    display: none;
  }

  .table-spec.spec__coinlaundry table :is(tbody tr) > *:not(:last-child) {
    flex: 1;
  }

  .table-spec.spec__coinlaundry table :is(tbody tr) > *:last-child {
    flex: none;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .table-spec.spec__coinlaundry table :is(tbody tr) > *:last-child:before {
    flex: none;
    content: "備考";
    background: var(--skyblue);
    color: var(--white);
    padding: 5px;
    width: 4em;
    height: stretch;
    text-align: center;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .table-spec.spec__shimikakou thead tr {
    display: flex;
  }

  .table-spec.spec__shimikakou :is(tbody, tr) {
    width: 100%;
    display: block;
  }
  .table-spec.spec__shimikakou table :is(th, td) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 5px 1vw;
  }
} /*--END media max-width--*/

/*==================================================
 クリーニング・特殊しみ抜き
==================================================*/
.shimiworry__contents {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.shimiworry__contents i {
  width: 30%;
}

.flexnum_worry {
  justify-content: center;
  --num: 3;
  --gap: 20px;
}

.flexnum_worry li {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  background: var(--white);
  color: var(--blue);
  text-align: center;
  font-weight: bold;
  background: color-mix(in srgb, var(--blue) 20%, var(--white) 100%);
  padding: 20px;
  --min-font: 16;
  --max-font: 22;
  border-radius: 50vw;
  border: 5px solid var(--white);
}
.flexnum_worry li:before {
  position: absolute;
  top: -0.8em;
  display: block;
  content: "not_listed_location";
  font-family: var(--icons);
  font-size: 4em;
}
@media screen and (max-width: 1100px) {
  .flexnum_worry {
    --gap: 5px;
  }
  .shimiworry__contents i {
    width: 20%;
    position: absolute;
    bottom: 0;
    right: 10px;
  }
}

@media screen and (max-width: 640px) {
  .flexnum_worry {
    --num: 1;
  }

  .flexnum_worry li {
    aspect-ratio: auto;
    border-radius: 10px;
    padding: 20px 20px 20px 50px;
    text-align: left;
    justify-content: start;
    border: 2px solid var(--white);
  }

  .flexnum_worry li:before {
    position: absolute;
    top: auto;
    left: 5px;
    font-size: 4rem;
  }
} /*--END media max-width--*/

.shimitech {
  position: relative;
  background: url("../images/shiminuki_ img02.webp") no-repeat center / cover;
  z-index: 1;
}

.shimitech::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.shimitech .tit_B {
  color: var(--white);
  text-align: center;
}

.shimitech .tit_B > * {
  font-size: 1.25em;
  color: var(--yellow);
}

.list-tech {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-tech li {
  position: relative;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--blue);
  font-weight: bold;
  gap: 10px;
  --min-font: 20;
  --max-font: 24;
  border-radius: 50px;
}

.list-tech li::before {
  content: "check";
  font-family: var(--icons);
  color: var(--pink);
  font-size: 2em;
  line-height: 1;
}

@media screen and (max-width: 520px) {
  .list-tech li {
    padding: 15px;
    border-radius: 15px;
  }
} /*--END media max-width--*/

.flexnum_shimi {
  --num: 2;
}

.flexnum_flow {
  --gap: 20px;
}

.flexnum_flow li {
  counter-increment: number;
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.flexnum_flow h4 {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--blue);
  font-weight: bold;
  --min-font: 18;
  --max-font: 20;
}

.flexnum_flow i {
  white-space: nowrap;
  display: block;
  padding-left: var(--space);
  font-family: var(--font_en);
  padding: 1px 20px;
  background: var(--blue);
  color: var(--white);
  border-radius: 15px;
  --min-font: 15;
  --max-font: 20;
}

.flexnum_flow i:after {
  content: counter(number, decimal-leading-zero);
  font-size: 1.8em;
}

@media screen and (max-width: 980px) {
  .flexnum_flow {
    --num: 2;
  }

  .flexnum_flow h4 {
    align-items: flex-start;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .flexnum_flow {
    --num: 1;
  }
  .flexnum_flow h4 {
    align-items: center;
  }
} /*--END media max-width--*/

.flexnum_brand {
  --num: 6;
  --gap: 20px;
}

.flexnum_brand img {
  width: 100%;
  height: 60px;
  object-fit: contain;
}

@media screen and (max-width: 520px) {
  .flexnum_brand {
    --num: 4;
    --gap: 15px;
  }
} /*--END media max-width--*/

.flexnum_shimiclean {
  --num: 5;
  --gap: 20px;
}

.flexnum_shimiclean img {
  aspect-ratio: 1/1;
  width: 150px;
  height: auto;
  object-fit: contain;
}

.flexnum_shimiclean .tit_B {
}

.flexnum_shimiclean li {
  border: 2px solid var(--blue);
  border-radius: 20px;
  padding: 15px;
  text-align: center;
}

.flexnum_shimiclean li a {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 10px;
}

.flexnum_shimiclean span {
  font-weight: bold;
  --min-font: 16;
  --max-font: 22;
}

.flexnum_shimiclean .btn_B {
  justify-content: center;
}

@media screen and (max-width: 1000px) {
  .flexnum_shimiclean {
    --num: 2;
    --gap: 20px;
  }
} /*--END media max-width--*/

/*==================================================
 価格表
==================================================*/
.members .tit_B {
  margin: 40px 0 20px;
  line-height: 1.5;
}

.list-price {
  position: relative;
  background: var(--lightpink);
  border: 15px solid var(--pink);
  padding: 30px 30px 30px 100px;
  overflow: hidden;
}

.list-price:before,
.list-price:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: var(--pink);
  z-index: 5;
}
.list-price:before {
  left: -15px;
}
.list-price:after {
  right: -15px;
}

.list-price i {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: stretch;
  display: block;
  padding: 0 30px;
  text-align: center;
  font-family: var(--font_en);
  writing-mode: vertical-lr;
  color: var(--pink);
  letter-spacing: 0.3em;
  background: color-mix(in srgb, var(--pink) 15%, #fff 100%);
}

.list-price dt {
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 10px;
  --min-font: 20;
  --max-font: 38;
}

.list-price dd {
  text-align: center;
  font-weight: bold;
  --min-font: 18;
  --max-font: 28;
}

.list-price strong {
  font-size: 1.6em;
  margin: 5px;
  display: inline-block;
  color: var(--pink);
}

.list-price dd strong {
  font-size: 1.4em;
  color: var(--pink);
  background: var(--yellow);
  padding: 0 15px;
  border: 2px dashed var(--pink);
}

.list-price--pink {
  background: var(--pink);
  color: var(--white);
  width: fit-content;
  padding: 10px 3vw;
  margin: 15px auto 0;
  border-radius: 50px;
}

@media screen and (max-width: 768px) {
  .list-price {
    flex-flow: column;
    padding: 80px 15px 30px;
  }
  .list-price strong {
    font-size: 1.5em;
  }
  .list-price i {
    height: auto;
    width: 100%;
    padding: 15px;
    writing-mode: horizontal-tb;
    letter-spacing: 0.3em;
  }
} /*--END media max-width--*/

.list-tokuten dl {
  counter-increment: number;
}

.list-tokuten dl dt {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--pink);
  font-weight: bold;
  --min-font: 20;
  --max-font: 26;
  margin: 40px auto 20px;
}

.list-tokuten dl dt i {
  padding: 5px 30px;
  border: 2px dotted var(--pink);
  font-family: var(--font_en);
  background: var(--lightpink);
  --min-font: 15;
  --max-font: 20;
  white-space: nowrap;
}

.list-tokuten dl dt i:after {
  content: counter(number, decimal-leading-zero);
  font-size: 1.8em;
}

.card-tokuten {
  width: fit-content;
  margin: 30px 0;
}

.card-tokuten h4 {
  position: relative;
  border: 2px solid var(--blue);
  padding: 30px 5vw;
  color: var(--blue);
  font-weight: bold;
  text-align: center;
  width: 100%;
  box-shadow: 0 0 0 10px var(--lightblue) inset;
  --min-font: 20;
  --max-font: 23;
}

.card-tokuten p {
  position: relative;
  background: var(--pink);
  color: var(--white);
  padding: 30px 50px;
  width: 100%;
  font-weight: bold;
  text-align: center;
  --min-font: 20;
  --max-font: 26;
  overflow: hidden;
  z-index: -1;
}
.card-tokuten p:before,
.card-tokuten p:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.card-tokuten p:before {
  left: -10px;
}
.card-tokuten p:after {
  right: -10px;
}

.note-tokuten {
  background: var(--lightpink);
  padding: 30px;
}

.flexnum_point {
  position: relative;
  --num: 2;
  margin: 30px 0;
}
.flexnum_point li + li:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "arrow_forward";
  font-family: var(--icons);
  font-size: 6rem;
  color: var(--pink);
}

.flexnum_point li {
  border: 3px solid var(--pink);
  background: var(--pink);
  color: var(--white);
  padding: 20px;
  text-align: center;
  font-weight: bold;
  display: grid;
  place-items: center;
}

.flexnum_point li p {
  --min-font: 18;
  --max-font: 20;
  letter-spacing: 0.15em;
}

.flexnum_point b {
  font-size: 1.6em;
  font-weight: bold;
  color: var(--yellow);
  line-height: 1.5;
}

.flexnum_point strong {
  display: inline-block;
  font-size: 1.4em;
  color: var(--pink);
  background: var(--yellow);
  padding: 5px 15px;
  border: 2px dashed var(--pink);
  margin: 5px 10px;
}

.flexnum_gentei {
  --num: 3;
  --gap: 40px;
}

.flexnum_gentei li {
  box-shadow: 0 0 0 10px var(--lightblue);
  border: 2px solid var(--blue);
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
}

.flexnum_gentei li:before {
  content: "";
  display: block;
  font-family: var(--icons);
  font-size: 3em;
  color: var(--blue);
  line-height: 1;
  margin: 0 0 20px;
}
/* 個別アイコン */
.flexnum_gentei li.rankup:before {
  content: "workspace_premium";
}

.flexnum_gentei li.event:before {
  content: "calendar_month";
}

.flexnum_gentei li.discount:before {
  content: "percent";
}

.flexnum_gentei h3 {
  margin: 0 0 20px;
  font-weight: bold;
  --min-font: 20;
  --max-font: 24;
  color: var(--blue);
  line-height: 1.5;
}

.flexnum_gentei p {
  text-align: left;
}

@media screen and (max-width: 520px) {
  .list-tokuten dl dt i {
    padding: 5px 15px;
  }

  .list-tokuten dl dt i:after {
    content: counter(number, decimal-leading-zero);
    font-size: 1.8em;
  }

  .card-tokuten {
    width: 100%;
  }

  .note-tokuten {
    padding: 20px;
  }

  .flexnum_point {
    position: relative;
    --num: 1;
    margin: 30px 0;
  }
  .flexnum_point li + li:before {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    content: "arrow_downward";
    font-family: var(--icons);
    font-size: 3rem;
    color: var(--pink);
    line-height: 1;
  }
  .flexnum_point li {
    position: relative;
    padding: 15px;
  }

  .flexnum_gentei {
    --num: 1;
    --gap: 40px;
  }

  .flexnum_gentei li {
    padding: 20px;
  }
} /*--END media max-width--*/

/*==================================================
 企業向けLP
==================================================*/

.bismv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lightblue);
}

.bismv:after {
  content: "";
  display: block;
  background: linear-gradient(105deg, var(--lightblue) 60%, var(--blue) 40%);
  background: var(--lightblue);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: stretch;
  z-index: 2;
}

.bismv > * {
  position: relative;
  z-index: 5;
}

.bismv h1 {
  position: relative;
  width: fit-content;
  background: var(--blue);

  color: var(--white);
  font-weight: bold;
  --min-font: 24;
  --max-font: 32;
  line-height: 1;
  padding: 15px 30px;
  margin: 0 0 15px;
}
.bismv h1:before {
  position: absolute;
  top: -15px;
  left: 0;
  content: attr(data-eng);
  display: block;
  color: var(--blue);
  line-height: 0.7;
  font-family: var(--font_en);
  font-size: 1.6rem;
}

.bismv h2 {
  font-weight: bold;
  --min-font: 20;
  --max-font: 24;
}

.bismv h3 {
  --min-font: 26;
  --max-font: 56;
  font-weight: bold;
  color: var(--blue);
  line-height: 1.5;
  margin: 0 0 15px;
}

.bismv .btn_wrap {
  width: fit-content;
}

.bismv .btn_wrap p {
  margin: 0 0 5px;
  text-align: center;
  color: var(--orange);
  font-weight: bold;
  --min-font: 14;
  --max-font: 18;
}

.bismv ul {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.bismv ul li {
  background: var(--yellow);
  color: var(--blue);
  font-weight: bold;
  padding: 5px 10px;
  --min-font: 13;
  --max-font: 16;
}

.bismv picture {
  width: 57%;
  height: stretch;
  position: relative;
}

.bismv picture:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 100px;
  height: stretch;

  z-index: 6;
  background: var(--lightblue);

  --hen: 100px;
  width: var(--hen);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.bismv picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bismv i {
  width: min(20vw, 300px);
  display: block;
  position: absolute;
  bottom: 20px;
  right: 0;
  background: rgba(10, 81, 162, 0.9);
  padding: 15px;
}

.bismv i img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
}

@media screen and (max-width: 980px) {
  .bismv {
    flex-flow: column;
  }
  .bismv__text {
    position: relative;
    z-index: 5;
  }
  .bismv picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: 4;
  }
  .bismv picture:after {
    display: none;
  }
  .bismv i {
    width: 40vw;
    display: block;
    position: relative;
    padding: 15px;
    right: -6%;
    margin-left: auto;
  }
} /*--END media max-width--*/

.bisread {
  text-align: center;
  padding: 15px 5%;
  background: var(--blue);
  color: var(--white);
  font-weight: bold;
  --min-font: 20;
  --max-font: 24;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}

.flexnum_bisworry li {
  position: relative;
}

.flexnum_bisworry li + li:before {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--gap) / 2);
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--blue) 15%, var(--gray) 15%);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--white) 100%, var(--white) 100%);
}

.flexnum_bisworry h3 {
  background: var(--blue);
  color: var(--white);
  --min-font: 18;
  --max-font: 20;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px;
}

.flexnum_bisworry p {
  padding: 20px;
}

.bisworry i {
  display: block;
  aspect-ratio: 492/88;
  width: 492px;
  margin-inline: auto;
  transform: translateY(30px);
}

.bisworry i img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 520px) {
  .flexnum_bisworry li + li:before {
    position: absolute;
    top: -15px;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--blue) 15%, var(--gray) 15%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 100%, var(--white) 100%);
  }
  .bisworry i {
    width: 90%;
    margin-inline: auto;
  }
} /*--END media max-width--*/

.bisreason::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 200px;
  background-color: var(--blue);
  border-radius: 60px 60px 0 0;
}

.altern_bistech {
  --firstchild: 55%;
}

.bistech_text {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.bistech_text dl {
  border: 1px solid var(--skyblue);
  border-radius: 15px;
  overflow: hidden;
  background: var(--white);
}
.bistech_text dl dt {
  border-bottom: 1px solid var(--skyblue);
  margin: 0;
  margin-top: 0px;
  padding: 15px 15px 15px 85px;
  font-weight: bold;
  position: relative;
  min-height: 60px;
  color: var(--skyblue);
  background: color-mix(in srgb, var(--skyblue) 5%, var(--white) 100%);
  --min-font: 18;
  --max-font: 20;
}
.bistech_text dl dt:before {
  content: "check";
  font-family: var(--icons);
  display: flex;
  width: 40px;
  height: 40px;
  border: 1px solid var(--skyblue);
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--white);
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: var(--skyblue);
  left: 30px;
  top: 15px;
  --min-font: 18;
  --max-font: 22;
}
.bistech_text dl dd {
  padding: 15px;
}

@media screen and (max-width: 1000px) {
  .altern_bistech {
    --firstchild: 30%;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .bisreason::before {
    height: 100px;
    border-radius: 50px 50px 0 0;
  }
  .altern_bistech {
    --firstchild: 100%;
  }
} /*--END media max-width--*/

.bisitems {
  background: var(--blue);
  color: var(--white);
}

.flexnum_items {
  --num: 4;
  --gap: 25px;
}

.flexnum_items li {
  margin-bottom: 30px;
}

.flexnum_items h3 {
  padding: 15px 0;
  margin: 0 0 15px;
  border-bottom: 2px solid var(--white);
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  --min-font: 16;
  --max-font: 22;
}

@media screen and (max-width: 768px) {
  .flexnum_items {
    --num: 2;
    --gap: 15px;
  }
} /*--END media max-width--*/

.flexnum_bisflow {
  --num: 4;
  --gap: 15px;
}

.flexnum_bisflow li {
  counter-increment: number;
  background: var(--white);
  border-radius: 20px;
  padding: 15px;
}
.flexnum_bisflow i {
  padding-left: var(--space);

  font-family: var(--font_en);
  --min-font: 15;
  --max-font: 20;
  text-align: center;
}

.flexnum_bisflow i:after {
  display: block;
  content: counter(number, decimal-leading-zero);
  font-size: 1.8em;
  line-height: 1.3;
  border-top: 1px dotted var(--black);
}

.flexnum_bisflow h4 {
  display: flex;
  gap: 15px;
  align-items: center;
}
.flexnum_bisflow h4:after {
  content: "arrow_forward";
  font-family: var(--icons);
  color: var(--blue);
  font-size: 1.3em;
}

.flexnum_bisflow li:last-child h4:after {
  display: none;
}

.flexnum_bisflow h4 span {
  font-weight: bold;
  color: var(--blue);
  --min-font: 18;
  --max-font: 20;
}

@media screen and (max-width: 1100px) {
  .flexnum_bisflow {
    --num: 2;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .flexnum_bisflow {
    --num: 1;
  }

  .flexnum_bisflow li h4:after {
    display: none;
  }
} /*--END media max-width--*/

dl.faq {
  margin: 0 0 20px 0;
  border: 1px solid var(--gray);
  border-radius: 15px;
}

dl.faq dt {
  border-bottom: 1px solid var(--gray);
  margin: 0;
  margin-top: 0px;
  padding: 25px 30px 25px 110px;
  font-weight: bold;
  position: relative;
  min-height: 60px;
  --min-font: 18;
  --max-font: 20;
}

.faq dt:before {
  content: "Q";
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid var(--blue);
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--blue);
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30px;
  top: 15px;
  --min-font: 18;
  --max-font: 22;
}

dl.faq dd {
  padding: 25px 30px 25px 110px;
  position: relative;
  min-height: 60px;
}

.faq dd:before {
  content: "A";
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid var(--blue);
  background: var(--blue);
  box-sizing: border-box;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30px;
  top: 15px;
  font-size: 18px;
}

@media screen and (max-width: 520px) {
  dl.faq dt {
    padding: 20px 15px 20px 80px;
  }
  dl.faq dd {
    padding: 20px 15px 20px 80px;
  }
  .faq dt:before,
  .faq dd:before {
    left: 15px;
  }
} /*--END media max-width--*/

.bismap iframe {
  width: 100%;
  height: min(60vw, 400px);
}

/*==================================================
 採用
==================================================*/

.flex_messe {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--s);
  display: flex;
  justify-content: center;
}

.flex_messe.messe__inner {
  width: 90%;
}

.messe__text {
  position: relative;
  width: min(70%, 800px);
  position: relative;
  z-index: 8;
  background: var(--white);
  padding: 50px;
  border-radius: 20px;
  right: -30px;
  margin-top: var(--s);
  margin-bottom: calc(-1 * var(--s));
}

.messe__text strong {
  color: var(--orange);
  font-size: 1.3em;
  font-weight: bold;
}

.flex_messe picture {
  width: 50%;
  height: auto;
  position: relative;
  left: -5%;
}

@media screen and (max-width: 768px) {
  .flex_messe {
    flex-flow: column;
  }
  .messe__text {
    width: 100%;
    margin-bottom: var(--s);
    padding: 5vw;
    right: auto;
  }
  .flex_messe picture {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    right: auto;
    left: auto;
  }
} /*--END media max-width--*/

.flexnum_safe picture img {
  aspect-ratio: 1080/680;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.flexnum_safe h3 {
  font-weight: bold;
  color: var(--blue);
  margin: 20px auto;
  --min-font: 18;
  --max-font: 20;
}

@media screen and (max-width: 768px) {
  .flexnum_safe {
    --num: 2;
    --gap: 20px;
    background: url(../images/ill_usagi.webp) no-repeat bottom 20px right / 20vw auto;
  }
} /*--END media max-width--*/

@media screen and (max-width: 520px) {
  .flexnum_safe {
    --num: 1;
    background: none;
  }
} /*--END media max-width--*/

.flexnum_recruit a {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.flexnum_recruit h3 {
  font-weight: bold;
  --min-font: 18;
  --max-font: 20;
}