@charset "UTF-8";
/* ===========================================
*  
*  省略ルール
*  以下記載のものを省略して使用
※ 　
* ======================================== */
/*------------------------------
* 
* txt : text
* bg  : background
* cmn : common
* img : image
* bnr : banner
* ttl : title
* num : number
* btn : button
* flx : flex
* col : column
* mg  : margin
* mt  : margin-top
* mb  : margin-bottom
* pd  : padding
* pt  : padding-top
* pb  : padding-bottom
* rg  : regular
* md  : medium
* lg  : large
* nm  : normal
* hov : hover
* 
* この定義と別で使用する場合は個別でコメント残すこと
* 
* ----------------------------

*  ---　CSSカスタムプロパティの使用についての注意・共有事項　---
*  ※こちらの命名に関してはわかりやすさを担保するため、省略ルールの限りではありません
*  ※基本的に
*   要素名（クラス名）+ タグ名 + xy方向（topやleftまたは論理値） + CSSプロパティ名 でできるだけ直感的にわかるよう命名しています。
※　
*  ※全体で使用できるものは:rootで定義しています（グローバルスコープ変数）
*  ※親要素で宣言されたものは、その内のみ利用可能なため、その点に注意してください（ローカルスコープ変数）
*  ※CSSカスタムプロパティはurlに使用するとブラウザで異なる挙動を取るため、background-imageの管理にはなるべく使用しないでしてください
*
* ----------------------------

*  ---　「-（ハイフン）」「__（ダブルアンダーバー）」「--（ダブルハイフン）」の基本的な使い分け　---
*  セレクタの階層が移る場合は「-」「__」を使用
*  例）<a class="tel " href="">
*  <span class="tel__replace "><img src="/img/tel_txt.svg"></span>
*  </a>
*  セレクタの階層が移らず、マルチクラスとなる場合（装飾など）は「--」「__」を使用
*  例）<a class="tel tel-icon tel-icon--main tel-replace--bottom" href="">
*  <span class="tel__replace "><img src="/img/tel_txt.svg"></span>
*  </a>
*  
------------------------------*/
/* ===========================================
*  
*  css custom property (common)
* 
* ======================================== */
:root {
  /* font font-size */
  --font-size-base: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-22: 22px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-35: 35px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-45: 45px;
  --font-size-48: 48px;
  --font-size-50: 50px;
  --font-size-55: 55px;
  --font-size-56: 56px;
  --font-size-60: 60px;
  --font-size-64: 64px;
  /* 幅設定 */
  --min-contents-width: 1280px;
  --wide-inner-width: 1280px;
  --inner-width: 1080px;
  /* border-radius */
  --round-5: 5px;
  --round-10: 10px;
  --round-20: 20px;
  --round-30: 30px;
  --round-full: 999em;
  /* logoの幅 */
  --logo-width: 280px;
  /* mapの高さ */
  --map-height: 350px;
  /* btn defaults */
  --btn-height: 50px;
  --btn-line-height: 1;
  --btn-font-size: var(--font-size-base);
  --btn-font-weight: var(--font-weight-medium);
  --btn-letter-space: var(--letter-spacing-regular);
  --btn-width-regular: 240px;
  --btn-width-medium: 300px;
  --btn-width-large: 350px;
}

/* ===========================================
*  
*  default styles
* 
* ======================================== */
body {
  font-size: var(--font-size-base);
  font-family: var(--font-main);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  font-weight: var(--font-weight-medium);
  color: var(--main-text-color);
  min-width: var(--min-contents-width);
  margin: 0 auto;
  position: relative;
  font-style: normal;
  font-optical-sizing: auto;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* ===========================================
*
* common-styles
*
* ======================================== */
/* 
margin クラス
-------------------------*/
.mt-min {
  margin-top: 10px;
}

.mt-smr {
  margin-top: 20px;
}

.mt-sm {
  margin-top: 30px;
}

.mt-nm {
  margin-top: 40px;
}

.mt-rg {
  margin-top: 50px;
}

.mt-md {
  margin-top: 60px;
}

.mt-lg {
  margin-top: 70px;
}

.mt-lgr {
  margin-top: 80px;
}

.mb-min {
  margin-bottom: 10px;
}

.mb-smr {
  margin-bottom: 20px;
}

.mb-sm {
  margin-bottom: 30px;
}

.mb-nm {
  margin-bottom: 40px;
}

.mb-rg {
  margin-bottom: 50px;
}

.mb-md {
  margin-bottom: 60px;
}

.mb-lg {
  margin-bottom: 70px;
}

.mb-lgr {
  margin-bottom: 80px;
}

/* 
pc時に非表示
-------------------------*/
.pc-none {
  display: none !important;
}

.logo {
  width: var(--logo-width);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.logo img {
  width: 100%;
}
.logo:hover {
  opacity: 0.7;
}

/* 
tel style
-------------------------*/
a[href^="tel:"] {
  pointer-events: none;
}

.tel {
  /* tel　style */
  --tel-font-size: var(--font-size-30);
  --tel-letter-space: var(--letter-spacing-regular, 0.05em);
  --tel-color: var(--main-text-color);
  --tel-icon-space: 1.5em;
  --tel-icon-position: 0.5em;
  --tel-icon-width: 1.1666666667em;
  --tel-icon-height: 1.1666666667em;
  --tel-replace-size: 14px;
  --tel-replace-space: 26px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--tel-letter-space, 0.05);
  font-size: var(--tel-font-size, 28px);
  line-height: 1;
  position: relative;
}
.tel-replace--right {
  /* tel replace 右に配置 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--tel-replace-space, 10px);
}
.tel-replace--bottom {
  /* tel replace 下に配置 */
  padding-bottom: var(--tel-replace-space, 20px);
}
.tel-replace--bottom .tel__replace {
  position: absolute;
  left: 0;
  bottom: 0;
}
.tel__replace {
  /* tel replace txt　style  */
  height: var(--tel-replace-size, 12px);
}
.tel-icon {
  /* icon付き */
  padding-left: var(--tel-icon-space, 1.5em);
  position: relative;
  z-index: 1;
  display: inline-block;
}
.tel-icon::before {
  content: "";
  width: var(--tel-icon-width, 1em);
  height: var(--tel-icon-height, 1em);
  position: absolute;
  top: var(--tel-icon-position, 0.5em);
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.tel-icon--main::before {
  background: url(../img/icon_tel.png) repeat center/contain;
}
.tel-icon--white::before {
  background: url(../img/icon_tel_white.png) repeat center/contain;
}

/*
 snsクラス
-------------------------*/
.sns {
  --sns-icon-space: 20px;
  --sns-icon-size: 30px;
  gap: var(--sns-icon-space);
}
.sns__icon {
  width: var(--sns-icon-size);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sns__icon:hover {
  opacity: 0.7;
}
.sns__icon img {
  width: 100%;
}

.cmn-time {
  /* 営業時間・定休日をまとめたdl */
  gap: 5px 18px;
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-regular);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cmn-time__item {
  gap: 5px 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cmn-time__item dt {
  color: var(--white-color);
  background-color: var(--accent-color);
  padding: 0.1875em 10px;
  text-align: center;
  border-radius: var(--round-5);
}
.cmn-time__item dd {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
}

/* 
imgタイトル
-------------------------*/
/* SP時は高さを個別で指定する必要があります */
.ttl-img--center img {
  margin: 0 auto;
}

.ttl-img--left img {
  margin-right: auto;
}

.ttl-img--right img {
  margin-left: auto;
}

/* 
title style
-------------------------*/
.cmn-ttl {
  font-size: var(--font-size-40);
  margin-bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.cmn-ttl--center {
  /* 中央揃え */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.cmn-ttl--left {
  /* 左揃え */
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-align: left;
}
.cmn-ttl--right {
  /* 右揃え */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  text-align: right;
}
.cmn-ttl__main {
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--font-weight-bold);
  margin-block: -0.25em;
}
.cmn-ttl__main--deco-dot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.cmn-ttl__main--deco-dot > span {
  display: inline-block;
  padding-inline: 1.4em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.cmn-ttl__main--deco-dot::after, .cmn-ttl__main--deco-dot::before {
  content: "";
  width: 100%;
  height: 0.3em;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  display: block;
  background: url(../img/deco_dot.png) repeat-x left center/auto 100%;
}
.cmn-ttl__main--deco-border {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.cmn-ttl__main--deco-border > span {
  display: inline-block;
  padding-inline: 1.4em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.cmn-ttl__main--deco-border::after, .cmn-ttl__main--deco-border::before {
  content: "";
  width: 100%;
  height: 3px;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  display: block;
  border-bottom: 3px dotted var(--main-text-color);
}
.cmn-ttl__sub {
  line-height: 1;
  text-transform: uppercase;
}

.cmn-solid-ttl {
  --ttl-bg-color: var(--main-color);
  background-color: var(--ttl-bg-color);
  font-size: var(--font-size-25);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-regular);
  border-radius: var(--round-10);
  padding: 0.45em 1em;
}
.cmn-solid-ttl--accent {
  --ttl-bg-color: var(--accent-color);
  color: var(--white-color);
}
.cmn-solid-ttl--main {
  --ttl-bg-color: var(--main-color);
}

/* 
文章テキスト スタイル
-------------------------*/
.cmn-sentence {
  /* どこでも変更できるよう変数化 */
  --sentence-line-height: 1.667;
  --sentence-p-margin: 1.667em;
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--font-weight-medium);
  line-height: var(--sentence-line-height);
  font-size: var(--font-size-18);
  /* 疑似要素でline-height分をネガティブマージンで調整 */
}
.cmn-sentence p::before, .cmn-sentence p::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.cmn-sentence p::before {
  margin-top: calc((1 - var(--sentence-line-height)) * 0.5em);
}
.cmn-sentence p::after {
  margin-bottom: calc((1 - var(--sentence-line-height)) * 0.5em);
}
.cmn-sentence p:not(:last-child) {
  margin-bottom: var(--sentence-p-margin);
}

/* 
画像
-------------------------*/
.cmn-img > img {
  width: 100%;
}

/* 
共通padding 
-------------------------*/
.cmn-pd {
  padding: 130px 0;
}

.cmn-pd02 {
  padding: 100px 0;
}

/* 
inner クラス
-------------------------*/
.inner {
  /* 1080px inner */
  max-width: var(--inner-width);
  width: 100%;
  margin: 0 auto;
}

.wide-inner {
  /* 1280px inner 可変のため子要素は%指定 */
  max-width: var(--wide-inner-width);
  width: 95%;
  margin: 0 auto;
}

/* 
* カラムスタイル
* flexを使用したカラム指定を行うクラスです
* flx-baseとセットで使用します
* col-container-PCColumnNum-SPColumnNum
-------------------------*/
.col-container-2-1,
.col-container-2-2 {
  /* PC2列　SP1列 */
  /* PC2列　SP2列 */
  /* 上下の余白 */
  --col-y-space: 40px;
  /* 左右の余白 */
  --col-x-space: 40px;
  gap: var(--col-y-space, 40px) var(--col-x-space, 40px);
}
.col-container-2-1 > .col-item,
.col-container-2-2 > .col-item {
  width: calc((100% - var(--col-x-space, 40px)) / 2);
}

.col-container-3-1,
.col-container-3-2 {
  /* PC3列　SP1列 */
  /* PC3列　SP2列 */
  /* 上下の余白 */
  --col-y-space: 40px;
  /* 左右の余白 */
  --col-x-space: 30px;
  gap: var(--col-y-space, 40px) var(--col-x-space, 30px);
}
.col-container-3-1 > .col-item,
.col-container-3-2 > .col-item {
  width: calc((100% - var(--col-x-space, 30px) * 2) / 3);
}

.col-container-4-2 {
  /* PC4列　SP2列 */
  /* 上下の余白 */
  --col-y-space: 30px;
  /* 左右の余白 */
  --col-x-space: 20px;
  gap: var(--col-y-space, 30px) var(--col-x-space, 20px);
}
.col-container-4-2 > .col-item {
  width: calc((100% - var(--col-x-space, 20px) * 3) / 4);
}

/* 
テーブルスタイル
-------------------------*/
table {
  --table-replace-size: 14px;
  --table-replace-space: 1em;
}
table .replace-txt {
  /* テーブルタグ内で使用するリプレイステキスト */
  height: var(--table-replace-size);
  margin-left: var(--table-replace-space);
  display: inline-block;
}

.main-table {
  --table-letter-spacing: var(--letter-spacing-regular);
  --table-th-font-weight: var(--font-weight-medium);
  --table-th-text-align: center;
  --table-th-x-padding: 1.5em;
  --table-th-y-padding: 1.125em;
  --table-th-bg-color: var(--accent-color);
  --table-th-color: var(--white-color);
  --table-th-width: 300px;
  --table-td-x-padding: 1.5em;
  --table-td-y-padding: 1.125em;
  --table-td-bg-color: var(--white-color);
  --table-td-color: var(--main-text-color);
  --table-td-width: calc(100% - var(--table-th-width));
  --table-border-color: var(--accent-color);
  --table-th-border-color: var(--white-color);
  --table-td-border-color: var(--accent-color);
  --table-width: 100%;
  width: var(--table-width);
  border-block: 1px solid var(--table-border-color);
  letter-spacing: var(--table-letter-spacing);
}
.main-table tr {
  width: 100%;
}
.main-table tr:not(:first-child) th {
  border-top: 1px solid var(--table-th-border-color);
}
.main-table tr:not(:first-child) td {
  border-top: 1px solid var(--table-td-border-color);
}
.main-table th,
.main-table td {
  vertical-align: middle;
}
.main-table th {
  width: var(--table-th-width);
  background-color: var(--table-th-bg-color);
  color: var(--table-th-color);
  font-weight: var(--table-th-font-weight);
  text-align: var(--table-th-text-align);
  padding-inline: var(--table-th-x-padding);
  padding-block: var(--table-th-y-padding);
}
.main-table td {
  width: var(--table-td-width);
  background-color: var(--table-td-bg-color);
  color: var(--table-td-color);
  padding-inline: var(--table-td-x-padding);
  padding-block: var(--table-td-y-padding);
}

.main-data {
  --data-letter-spacing: var(--letter-spacing-regular);
  --data-dt-text-align: center;
  --data-dt-x-padding: 30px;
  --data-dt-y-padding: 0.5553888889em;
  --data-dt-bg-color: var(--main-color);
  --data-dt-color: var(--main-text-color);
  --data-dt-width: 180px;
  --data-dt-round-size: var(--round-10);
  --data-dd-x-padding: 30px;
  --data-dd-y-padding: 0.5553888889em;
  --data-dd-bg-color: var(--white-color);
  --data-dd-color: var(--main-text-color);
  --data-dd-width: calc(100% - var(--data-dt-width));
  --data-border-color: var(--main-color);
  --data-dt-border-color: var(--white-color);
  --data-dd-border-color: var(--main-color);
  --data-width: 100%;
  --data-item-margin-bottom: 20px;
  --data-replace-size: 13px;
  --data-replace-space: 0.5em;
  width: var(--data-width);
  letter-spacing: var(--data-letter-spacing);
  font-size: var(--font-size-18);
}
.main-data .replace-txt {
  /* テーブルタグ内で使用するリプレイステキスト */
  height: var(--data-replace-size);
  margin-top: var(--data-replace-space);
  display: inline-block;
  width: 100%;
}
.main-data__item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.main-data__item:not(:last-child) {
  margin-bottom: var(--data-item-margin-bottom);
}
.main-data dt,
.main-data dd {
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-regular);
}
.main-data dt {
  width: var(--data-dt-width);
  background-color: var(--data-dt-bg-color);
  color: var(--data-dt-color);
  text-align: var(--data-dt-text-align);
  padding-inline: var(--data-dt-x-padding);
  padding-block: var(--data-dt-y-padding);
  border-radius: var(--data-dt-round-size);
  display: grid;
  place-content: center;
}
.main-data dd {
  width: var(--data-dd-width);
  background-color: var(--data-dd-bg-color);
  color: var(--data-dd-color);
  padding-inline: var(--data-dd-x-padding);
  padding-block: var(--data-dd-y-padding);
}

/*------------------------------
*
* cmn-btn style
*
------------------------------*/
.cmn-btn--primary {
  --btn-padding-x: 1.5em;
  --btn-padding-y: calc((var(--btn-height) - var(--btn-font-size) * var(--btn-line-height)) / 2);
  display: block;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--btn-line-height);
  font-family: var(--font-main);
  text-align: center;
  width: 100%;
  border-radius: 3em;
  padding-block: var(--btn-padding-y);
  padding-inline: var(--btn-padding-x);
  position: relative;
  z-index: 1;
  background-color: var(--accent-color);
  color: var(--white-color);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.cmn-btn--primary:hover {
  background-color: var(--lighten-accent-color);
  color: var(--white-color);
  opacity: 1;
}
.cmn-btn--secondary {
  --btn-padding-x: 1.5em;
  --btn-padding-y: calc((var(--btn-height) - var(--btn-font-size) * var(--btn-line-height)) / 2);
  display: block;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--btn-line-height);
  font-family: var(--font-main);
  text-align: center;
  width: 100%;
  border-radius: 3em;
  padding-block: var(--btn-padding-y);
  padding-inline: var(--btn-padding-x);
  position: relative;
  z-index: 1;
  background-color: var(--main-color);
  color: var(--main-text-color);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.cmn-btn--secondary:hover {
  background-color: var(--darken-main-color);
  color: var(--main-text-color);
  opacity: 1;
}
.cmn-btn--tertiary {
  --btn-padding-x: 1.5em;
  --btn-padding-y: calc((var(--btn-height) - var(--btn-font-size) * var(--btn-line-height)) / 2);
  display: block;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--btn-line-height);
  font-family: var(--font-main);
  text-align: center;
  width: 100%;
  border-radius: 3em;
  padding-block: var(--btn-padding-y);
  padding-inline: var(--btn-padding-x);
  position: relative;
  z-index: 1;
  background-color: var(--white-color);
  color: var(--main-text-color);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid var(--accent-color);
}
.cmn-btn--tertiary:hover {
  background-color: rgb(var(--accent-color-rgb)/0.1);
  color: var(--main-text-color);
  border-color: var(--accent-color);
  opacity: 1;
}
.cmn-btn--icon-mail > span {
  padding-left: 1.375em;
  position: relative;
  z-index: 1;
  display: inline-block;
}
.cmn-btn--icon-mail > span::before {
  content: "";
  width: 0.9375em;
  height: 0.6875em;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../img/icon_mail_accent.png) no-repeat center/contain;
}
.cmn-btn--icon-ex {
  position: relative;
  z-index: 1;
}
.cmn-btn--icon-ex::after {
  content: "";
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 12px;
  top: 50%;
  right: 15px;
  translate: 0% -50%;
  background: url(../img/icon_ex.png) no-repeat center/contain;
}
.cmn-btn--icon-ex:hover::after {
  translate: 0% -50%;
}
.cmn-btn--icon-line > span {
  padding-left: 1.875em;
  position: relative;
  z-index: 1;
  display: inline-block;
}
.cmn-btn--icon-line > span::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../img/icon_line.svg) no-repeat center/contain;
}
.cmn-btn--arrow-white {
  position: relative;
  z-index: 1;
  position: relative;
  z-index: 1;
}
.cmn-btn--arrow-white::after {
  content: "";
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  top: 50%;
  right: 13px;
  translate: 0% -50%;
  background: url(../img/arrow_r_white.svg) no-repeat center/contain;
}
.cmn-btn--arrow-white:hover::after {
  translate: 25% -50%;
}
.cmn-btn--rg {
  max-width: var(--btn-width-regular);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}
.cmn-btn--md {
  max-width: var(--btn-width-medium);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}
.cmn-btn--lg {
  max-width: var(--btn-width-large);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}
.cmn-btn--center {
  margin: 0 auto;
}
.cmn-btn--left {
  margin-right: auto;
}
.cmn-btn--right {
  margin-left: auto;
}

/*------------------------------
*
* pagenation style
*
------------------------------*/
.pagenation {
  --pagenation-margin-top: 64px;
  --pagenation-item-width: 3em;
  --pagenation-item-height: 3em;
  --pagenation-item-font-size: 1em;
  --pagenation-item-font-weight: var(--font-weight-medium);
  --pagenation-item-space: 6px;
  --pagenation-item-bg: var(--gray-color);
  --pagenation-item-color: #b3b3b3;
  --pagenation-item-current-color: var(--white-color);
  --pagenation-item-current-bg: var(--accent-color);
  margin-top: var(--pagenation-margin-top);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.pagenation li {
  display: block;
  width: var(--pagenation-item-width);
  height: var(--pagenation-item-height);
  font-size: var(--pagenation-item-font-size);
  line-height: var(--pagenation-item-height);
  font-weight: var(--pagenation-item-font-weight);
  margin: 0 var(--pagenation-item-space);
  color: var(--pagenation-item-color);
  background: var(--pagenation-item-bg);
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: var(--round-5);
}
.pagenation li > a {
  width: var(--pagenation-item-width);
  height: var(--pagenation-item-height);
  display: grid;
  place-content: center;
}
.pagenation li:has(a):hover {
  background-color: var(--pagenation-item-current-bg);
  color: var(--pagenation-item-current-color);
}
.pagenation .current {
  background-color: var(--pagenation-item-current-bg);
  color: var(--pagenation-item-current-color);
}

/*------------------------------
*
* breadcrumb style
*
------------------------------*/
.wrapper {
  position: relative;
  z-index: 1;
}

.bread-crumb {
  /* パンくず設定 */
  --bread-letter-space: var(--letter-space-regular);
  --bread-font-size: 14px;
  --bread-font-weight: var(--font-weight-medium);
  --bread-color: var(--main-text-color);
  /* gratere = 「>(大なり)」 */
  --bread-grater-color: var(--main-text-color);
  --bread-grater-content: "＞";
  --bread-grater-space: 0 0.25em;
  --bread-hov-color: var(--accent-color);
  --bread-link-color: var(--main-text-color);
  --bread-last-item-color: var(--main-text-color);
  --bread-padding: 20px 0 0;
  --bread-bg-color: transparent;
  --bread-width: 100%;
  width: var(--bread-width, 100%);
  background-color: var(--bread-bg-color, transparent);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.bread-crumb__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-size: var(--bread-font-size, 14px);
  letter-spacing: var(--bread-letter-space, 0.05em);
  font-weight: var(--bread-font-weight, 400);
  overflow: hidden;
  padding: var(--bread-padding, 1em 0);
}
.bread-crumb__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--bread-color);
  white-space: nowrap;
}
.bread-crumb__item:not(:last-child)::after {
  content: var(--bread-grater-content, ">");
  margin: var(--bread-grater-space, 0.5em);
  color: var(--bread-grater-color);
}
.bread-crumb__item:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  color: var(--bread-last-item-color);
}
.bread-crumb__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  line-height: 1.2;
  color: var(--bread-link-color);
}
.bread-crumb__link:hover {
  opacity: 1;
  color: var(--bread-hov-color);
}

/*------------------------------
*
* prev next style
*
------------------------------*/
.prev-next__area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  line-height: 1.2;
  margin: 64px auto 0;
}
.prev-next__item.prev, .prev-next__item.next {
  width: 8em;
}
.prev-next__item:not(:last-child) {
  margin-right: 1.5em;
}
.prev-next__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 3em;
  color: #b3b3b3;
  background-color: var(--gray-color);
}
.prev-next__link:hover {
  background-color: var(--main-color);
  color: var(--white-color);
  opacity: 1;
}
.prev-next__link.prev, .prev-next__link.next {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 2em;
  text-align: center;
}
.prev-next__link.back {
  text-align: center;
  padding: 0.75em 1.5em;
  border-radius: 3em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.prev-next__link.prev, .prev-next__link.next, .prev-next__link.back {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* ===========================================
*
* header style
*
* ======================================== */
.header {
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--white-color);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 101;
}
.header__inner {
  padding: 10px 36px 10px 32px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: var(--min-contents-width);
  margin: 0 auto;
  width: 100%;
  height: 150px;
}
.header__logo {
  /* logoの幅 */
  --logo-width:min(280px, 20.5882352941%);
}
.header-right {
  width: 935px;
}
.header-info {
  margin-left: auto;
}
.header-info__tel {
  margin-right: 10px;
}
.header-info__actions {
  margin-left: 20px;
  gap: 15px 20px;
}
.header-info__btn {
  width: 180px;
}
.header-nav {
  margin-top: 15px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.header-nav__list {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--round-10);
  background-color: var(--theme-color);
  padding: 16px 24px;
}
.header-nav__item {
  position: relative;
}
.header-nav__item:not(:last-child) {
  margin-right: 1em;
}
.header-nav__link {
  position: relative;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: var(--font-size-18);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--font-weight-medium);
  padding-left: 25px;
}
.header-nav__link::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0% -50%;
  background: url(../img/nav_arrow.svg) no-repeat top center/contain;
}
.header-nav__link:hover {
  color: var(--accent-color);
  opacity: 1;
}
.header-nav__link.current {
  color: var(--accent-color);
}

/* ===========================================
*
* main style  top page
*
* ======================================== */
/*------------------------------
*
* main visual
*
------------------------------*/
.main-visual {
  width: 100%;
  height: clamp(360px, 40.625vw, 780px);
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: url(../img/top/mv_img.jpg) no-repeat center/cover;
}
.main-visual::before {
  content: "";
  width: 100%;
  height: 20px;
  background: url(../img/visual_wave.png) repeat-x center/auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.main-visual__catch {
  width: min(537px, 27.96875%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -37.5%);
          transform: translate(-50%, -37.5%);
  z-index: 20;
}

/*------------------------------
*
* greeting
*
------------------------------*/
.greeting {
  padding-bottom: 170px;
  background: url(../img/top/greeting_top_left.png) no-repeat top left/min(401px, 20.8854166667%) auto, url(../img/top/greeting_bottom_right.png) no-repeat bottom right/min(523px, 27.2395833333%) auto, url(../img/top/greeting_bg.png) no-repeat center/cover;
}
.greeting__container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.greeting__img {
  width: 50%;
}
.greeting__sentence {
  width: 500px;
  --sentence-line-height: 2.22;
  --sentence-p-margin-bottom: 2;
}

/*------------------------------
*
* cook-frieze
*
------------------------------*/
.cook-frieze {
  padding-bottom: 170px;
  background: url(../img/top/cook_frieze_bg.png) repeat-x top center/auto 100%;
  position: relative;
  z-index: 2;
  margin-block: -15px;
  overflow: hidden;
}
.cook-frieze::after, .cook-frieze::before {
  content: "";
  position: absolute;
  z-index: -1;
}
.cook-frieze::before {
  left: calc(50% + 615px);
  bottom: 62px;
  width: 278px;
  height: 192px;
  background: url(../img/top/cook_frieze_right.png) no-repeat top center/contain;
}
.cook-frieze::after {
  right: calc(50% + 610px);
  top: 130px;
  width: 267px;
  height: 203px;
  background: url(../img/top/cook_frieze_left.png) no-repeat top center/contain;
}
.cook-frieze__container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.cook-frieze__img {
  width: 350px;
}
.cook-frieze__sentence {
  width: 700px;
  --sentence-line-height: 2.22;
  --sentence-p-margin-bottom: 2;
}

/*------------------------------
*
* job-seeker
*
------------------------------*/
.job-seeker {
  padding: 115px 0 110px;
  background: url(../img/top/job_seeker.jpg) no-repeat center/cover;
}
.job-seeker__ttl {
  margin-bottom: 96px;
}
.job-seeker__ttl .cmn-ttl__main {
  display: inline-block;
  position: relative;
  z-index: 1;
  text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}
.job-seeker__ttl .cmn-ttl__main::after {
  content: "";
  width: 9.95em;
  height: 2.375em;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -40%;
  z-index: -1;
  background: url(../img/top/job_seeker_ttl_bg.png) no-repeat top center/contain;
}
.job-seeker__container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.job-seeker__box {
  position: relative;
  z-index: 1;
  border-radius: var(--round-20);
  background: url(../img/top/job-seeker_box.jpg) no-repeat center/cover;
  padding: 100px 80px 80px;
}
.job-seeker__box::before {
  content: "";
  width: 1040px;
  height: calc(100% - 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  background: url(../img/deco_dot.png) repeat-x top left/auto 9px, url(../img/deco_dot.png) repeat-x bottom left/auto 9px;
}
.job-seeker__box::after {
  content: "";
  width: 266px;
  height: 266px;
  background: url(../img/top/job_seeker_illust.png) no-repeat top center/contain;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  translate: -45.1127819549% 22.5563909774%;
}
.job-seeker__sentence {
  --sentence-line-height: 2.22;
  --sentence-p-margin-bottom: 2.22;
}

/*------------------------------
*
* recommend
*
------------------------------*/
.recommend {
  background: url(../img/top/recommend_bg_left.png) no-repeat top left/min(909px, 47.34375%), url(../img/top/recommend_bg_right.png) no-repeat top 117px right/min(992px, 51.6666666667%), var(--theme-color);
}
.recommend__ttl {
  margin-top: 58px;
  font-size: var(--font-size-35);
}
.recommend__ttl .cmn-ttl__main {
  position: relative;
  z-index: 1;
}
.recommend__ttl .cmn-ttl__main::before {
  content: "";
  width: 14.2em;
  height: 14.2em;
  background: url(../img/top/recommend_ttl_bg.png) no-repeat top center/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -52% -13%;
  z-index: -1;
}
.recommend__ttl .txt-dot {
  display: inline-block;
  position: relative;
  z-index: 1;
  text-align: center;
}
.recommend__ttl .txt-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--main-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0%;
}
.recommend__container {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.recommend__list {
  --col-x-space: 26px;
  --col-y-space: 0px;
  width: 655px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.recommend__list__item {
  aspect-ratio: 1/1;
  background: url(../img/top/recommend_item_bg.png) no-repeat top center/contain;
  text-align: center;
  display: grid;
  place-content: center;
}
.recommend__list__item__content {
  font-size: var(--font-size-18);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.recommend__list__item__content::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url(../img/check_mark.png) no-repeat top center/contain;
  display: block;
  margin: 0 auto;
}
.recommend__list__item__txt {
  margin-top: 12px;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}
.recommend__list__item:nth-child(3n+4), .recommend__list__item:nth-child(3n+5), .recommend__list__item:nth-child(3n+6) {
  margin-top: -5px;
}

/* page-link
-------------------------*/
.page-link {
  margin-top: 130px;
}
.page-link__list {
  --col-x-space: 40px;
  --col-y-space: 40px;
}
.page-link__item__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 20px 20px 40px;
  border-radius: var(--round-10);
  border: 2px solid var(--main-color);
  background-color: var(--white-color);
}
.page-link__item__link:hover .page-link__item__btn {
  background-color: var(--darken-accent-color);
}
.page-link__item__left {
  width: 180px;
}
.page-link__item__img {
  width: 240px;
}
.page-link__item__ttl {
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-none);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.page-link__item__ttl::after {
  content: "";
  width: 1em;
  height: 0.4em;
  background: url(../img/deco_dot.png) no-repeat top left/auto 100%;
  display: block;
  margin: 8px auto 0;
}
.page-link__item__btn {
  margin-top: 20px;
  padding: 0.8125em 1em;
  width: 100%;
  border-radius: 3em;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  position: relative;
  z-index: 1;
  background-color: var(--accent-color);
  color: var(--white-color);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-align: center;
}
.page-link__item__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  translate: 0% -50%;
  width: 12px;
  height: 12px;
  background: url(../img/arrow_r_white.svg) no-repeat top center/contain;
}
/*------------------------------
*
* line
*
------------------------------*/
.line {
  background: url(../img/pattern/pattern01.png) repeat center/auto;
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.line::after {
  content: "";
  width: 140px;
  height: 203px;
  left: calc(50% + 90px);
  bottom: 0;
  z-index: 1;
  position: absolute;
  background: url(../img/top/line_illust.png) no-repeat bottom center/contain;
}
.line__ttl {
  margin-bottom: 40px;
}
.line__container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.line__content {
  width: 690px;
  position: relative;
  z-index: 5;
}
.line__img {
  width: 380px;
}
.line__sentence {
  --sentence-line-height: 2.22;
}
.line__btn {
  margin-top: 60px;
  width: 250px;
}

/* info-wrap
-------------------------*/
.info-wrap {
  background: url(../img/top/top_bg.png) no-repeat top center/cover, url(../img/top/info_bg_bottom_right.png) no-repeat bottom right/min(852px, 44.375%);
}

/*------------------------------
*
* news
*
------------------------------*/
.news__box {
  padding: 80px calc(50% - 540px);
  border-radius: var(--round-20);
  background-color: var(--white-color);
  border: 5px dotted var(--main-color);
}
.news__btn {
  margin-top: 40px;
  width: 180px;
}

/*------------------------------
*
* info
*
------------------------------*/
.info {
  margin-top: 100px;
}
.info__ttl {
  margin-bottom: 40px;
}
.info__data {
  --data-dt-width: 180px;
  --data-dd-bg-color: transparent;
  --data-dt-bg-color: var(--accent-color);
  --data-dt-color: var(--white-color);
  --data-dt-round-size: var(--round-5);
  --data-item-margin-bottom: 10px;
  width: 730px;
}
.info__data dt,
.info__data dd {
  font-weight: var(--font-weight-medium);
}

/* ===========================================
*
* under page  
*
* ======================================== */
/*------------------------------
*
* main style sub visual
*
------------------------------*/
.sub-visual {
  width: 100%;
  position: relative;
  z-index: 1;
  height: clamp(300px, 20.8333333333vw, 400px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.sub-visual::before {
  content: "";
  width: 100%;
  height: 20px;
  background: url(../img/visual_wave.png) repeat-x center/auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.sub-visual__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 20;
  font-size: var(--font-size-40);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--font-weight-bold);
  padding: 0.25em 1em;
  white-space: nowrap;
  text-align: center;
  background-color: var(--white-color);
  border-radius: var(--round-10);
  display: inline-block;
}
.sub-visual__catch__main {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding-inline: 0.75em;
}
.sub-visual__catch__main::after, .sub-visual__catch__main::before {
  content: "";
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  display: block;
  background-color: var(--main-color);
  top: 50%;
  translate: 0% -37.5%;
  position: absolute;
  z-index: 1;
}
.sub-visual__catch__main::after {
  right: 0;
}
.sub-visual__catch__main::before {
  left: 0;
}

/* ===========================================
*
* main style business-page
*
* ======================================== */
/*------------------------------
*
* business
*
------------------------------*/
.business {
  background: url(../img/business/business_bg_t.png) no-repeat top left/min(401px, 20.8854166667%) auto, url(../img/business/business_bg_b.png) no-repeat bottom right/min(523px, 27.2395833333%) auto, url(../img/business/business_bg.jpg) no-repeat center/cover;
}
.business__list {
  --col-x-space: 60px;
  --col-y-space: 60px;
}
.business-item {
  border-radius: var(--round-20);
  background-color: var(--white-color);
  padding: 30px;
  border: 2px solid var(--main-color);
}
.business-item__ttl {
  text-align: center;
  font-size: var(--font-size-30);
  padding-block: 0.0833333333em;
  margin-bottom: 30px;
}
.business-item__flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.business-item__sentence {
  width: 240px;
}
.business-item__img {
  width: 200px;
}

/* ===========================================
*
* main style environment-page
*
* ======================================== */
/*------------------------------
*
* attraction
*
------------------------------*/
.attraction {
  background: url(../img/pattern/pattern01.png) repeat center/auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.attraction::after, .attraction::before {
  content: "";
  position: absolute;
  z-index: -1;
}
.attraction::before {
  left: calc(50% + 575px);
  top: 284px;
  width: 278px;
  height: 192px;
  background: url(../img/environment/attraction_right.png) no-repeat top center/contain;
}
.attraction::after {
  right: calc(50% + 581px);
  bottom: 182px;
  width: 267px;
  height: 203px;
  background: url(../img/environment/attraction_left.png) no-repeat top center/contain;
}
.attraction__ttl .big {
  font-size: 1.25em;
}
.attraction-item {
  border-radius: var(--round-20);
  padding: 30px;
  background-color: var(--white-color);
}
.attraction-item__head {
  margin-bottom: 10px;
  font-weight: var(--font-weight-bold);
}
.attraction-item__num {
  font-size: var(--font-size-25);
  width: 1.6em;
  height: 1.6em;
  letter-spacing: var(--letter-spacing-none);
  border-radius: 50%;
  margin-right: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: grid;
  place-content: center;
  line-height: 1;
}
.attraction-item__ttl {
  font-size: var(--font-size-25);
  letter-spacing: var(--letter-spacing-regular);
}
.attraction-item__content {
  background-color: var(--theme-color);
  padding: 20px;
}
.attraction-item:not(:last-child) {
  margin-bottom: 40px;
}

/*------------------------------
*
* merit
*
------------------------------*/
.merit {
  background: url(../img/environment/merit_bg_left.png) no-repeat top left/min(401px, 20.8854166667%), url(../img/environment/merit_bg_right.png) no-repeat bottom right/min(523px, 27.2395833333%), url(../img/environment/merit_bg.png) no-repeat top center/cover;
}
.merit__ttl .big {
  font-size: 1.25em;
}
.merit__list {
  --col-x-space: 60px;
  --col-y-space: 60px;
}
.merit-item__num {
  line-height: 1;
  font-size: var(--font-size-30);
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.merit-item__ttl {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  padding: 0 8px;
  text-align: center;
  letter-spacing: var(--letter-spacing-small);
  width: 100%;
}
.merit-item__head {
  margin-bottom: 40px;
}
.merit-item__sentence {
  text-align: center;
}

/*------------------------------
*
* facility
*
------------------------------*/
.facility {
  background: var(--theme-color);
}
.facility__list {
  --col-x-space: 60px;
  --col-y-space: 60px;
}
.facility-item__img {
  border-radius: var(--round-20);
  overflow: hidden;
  aspect-ratio: 32/20;
}
.facility-item__ttl {
  text-align: center;
  letter-spacing: var(--letter-spacing-regular);
  width: 100%;
  font-size: var(--font-size-18);
  margin-top: 21px;
}
.facility-item__ttl > span {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding-inline: 0.75em;
}
.facility-item__ttl > span::after, .facility-item__ttl > span::before {
  content: "";
  width: 0.333em;
  height: 0.333em;
  border-radius: 50%;
  display: block;
  background-color: var(--main-color);
  top: 50%;
  translate: 0% -50%;
  position: absolute;
  z-index: 1;
}
.facility-item__ttl > span::after {
  right: 0;
}
.facility-item__ttl > span::before {
  left: 0;
}

/* ===========================================
*
* main style staff-page
*
* ======================================== */
.staff {
  background: url(../img/pattern/pattern03.png) repeat center/auto;
}
.staff__container {
  gap: 50px 40px;
}
.staff-item {
  border: 3px dotted var(--main-color);
  background-color: var(--white-color);
  border-radius: var(--round-20);
  padding: 40px 30px;
}
.staff-item__ttl {
  margin-bottom: 20px;
}
.staff-item__flex {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.staff-item__content {
  width: 600px;
}
.staff-item__job {
  margin-bottom: 20px;
  font-size: var(--font-size-20);
  letter-spacing: var(--letter-spacing-regular);
  gap: 12px;
}
.staff-item__job__label {
  padding: 0.25em 1em;
  border-radius: var(--round-5);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: inline-block;
}
.staff-item__job__name {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.staff-item__img {
  width: 320px;
  aspect-ratio: 8/5;
  border-radius: 20px;
  overflow: hidden;
}
.staff-item:not(:last-child) {
  margin-bottom: 60px;
}

/* ===========================================
*
* main style recruit-page
*
* ======================================== */
/*------------------------------
*
* recruit
*
------------------------------*/
.recruit {
  background: url(../img/pattern/pattern_suisai.jpg) repeat top center/max(1920px, 100%) auto;
}
.recruit-item {
  border: 5px dotted var(--main-color);
  background-color: var(--white-color);
  border-radius: var(--round-20);
  padding: 60px calc(50% - 540px);
}
.recruit-item__ttl {
  margin-bottom: 40px;
}
.recruit-item:not(:last-child) {
  margin-bottom: 65px;
}
/*------------------------------
* 
* news,blog
* 
------------------------------*/
/*------------------------------
*
* cmn-post
*
------------------------------*/
.cmn-post {
  --post-width: 100%;
  --post-item-margin: 30px;
  --post-item-flex-margin-space: 7px;
  --post-link-padding: 0px 0px 28px;
  --tag-wrapper-width: calc(100% - 103px);
  --post-title-line: 1;
  --post-title-font-size: var(--font-size-18);
  --post-date-font-size: var(--font-size-18);
  width: var(--post-width);
}
.cmn-post-item {
  width: 100%;
  border-bottom: 1px dashed var(--main-text-color);
}
.cmn-post-item:not(:last-child) {
  margin-bottom: var(--post-item-margin, 15px);
}
.cmn-post__box {
  width: calc(100% - 120px);
}
.cmn-post__box.w-100 {
  width: 100%;
}
.cmn-post__thumb {
  width: 100px;
  aspect-ratio: 1/1;
}
.cmn-post__flex {
  margin-bottom: var(--post-item-flex-margin-space, 12px);
}
.cmn-post__tag-wrapper {
  width: var(--tag-wrapper-width, auto);
}
.cmn-post__link {
  padding: var(--post-link-padding, 20px 30px);
}
.cmn-post__date {
  line-height: 1;
  font-size: var(--post-date-font-size, 16px);
  letter-spacing: var(--letter-spacing-regular);
  color: var(--accent-color);
}
.cmn-post__ttl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-small);
  width: 100%;
  font-size: var(--post-title-font-size, 16px);
}

/*---------- detail ここから ----------*/
.tag {
  --tag-font-size: 13px;
  --tag-letter-space: var(--letter-spacing-regular);
  --tag-height: 1;
  --tag-x-padding: 1em;
  --tag-round: 0;
  --tag-color: var(--main-text-color);
  --tag-bg-color: transparent;
  display: inline-block;
  font-size: var(--tag-font-size);
  letter-spacing: var(--tag-letter-space);
  color: var(--tag-color);
  background-color: var(--tag-bg-color);
  border-radius: var(--tag-round);
  font-weight: var(--font-weight-medium);
  line-height: var(--tag-height);
  padding: 0 var(--tag-x-padding);
  position: relative;
  z-index: 1;
}
.tag::after, .tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--main-color);
  position: absolute;
  top: 50%;
}
.tag::before {
  left: 0;
  translate: -50% -50%;
}
.tag::after {
  right: 0;
  translate: 50% -50%;
}
.tag-btn-wrapper {
  margin-bottom: 30px;
  gap: 10px;
}
.tag__btn {
  --tag-btn-color: #b3b3b3;
  --tag-btn-bg-color: var(--gray-color);
  --tag-btn-current-color: var(--white-color);
  --tag-btn-current-bg-color: var(--accent-color);
  --tag-btn-round: 3em;
  --tag-btn-padding: 3em;
  padding: 0.5em 1em;
  background-color: var(--tag-btn-bg-color);
  color: var(--tag-btn-color);
  border-radius: var(--tag-btn-round);
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.tag__btn:hover {
  color: var(--tag-btn-current-color);
  background-color: var(--tag-btn-current-bg-color);
  opacity: 1;
}
.tag__btn.current {
  color: var(--tag-btn-current-color);
  background-color: var(--tag-btn-current-bg-color);
}
.tag-wrapper {
  --tag-space: 5px 0px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: var(--tag-space);
}

/*------------------------------
*
* post-detail
*
------------------------------*/
.post-detail {
  position: relative;
  z-index: 5;
}
.post-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.post-detail__date {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-bottom: 16px;
  line-height: 1;
  color: var(--accent-color);
  font-size: var(--font-size-18);
}
.post-detail__tag-wrapper {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 24px;
}
.post-detail__ttl {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  width: 100%;
  font-size: var(--font-size-24);
  border-left: 5px solid var(--main-color);
  font-weight: var(--font-weight-bold);
  padding-left: 0.75em;
  margin-bottom: 32px;
}
.post-detail__img {
  margin: 0 auto;
  width: 100%;
  margin-bottom: 32px;
}

.news-page .news {
  background: url(../img/top/top_bg.png) no-repeat top center/cover;
}

/*------------------------------
* 
* sitemap
* 
------------------------------*/
.sitemap-list {
  max-width: 600px;
  margin: 0 auto;
}
.sitemap-list__item:not(:last-child) {
  margin-bottom: 5px;
}
.sitemap-list__link {
  width: 100%;
  padding: 0.8em 1em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--accent-color);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sitemap-list__link::after {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid var(--accent-color);
  border-right: 2px solid var(--accent-color);
  position: absolute;
  top: 50%;
  right: 1.5em;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sitemap-list__link:hover {
  color: var(--accent-color);
}
.sitemap-list__link:hover::after {
  right: 1em;
}

/*------------------------------
* 
* privacy
* 
------------------------------*/
.privacy-ttl {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  line-height: 1.5em;
  margin-bottom: 12px;
  border-left: 5px solid var(--accent-color);
  padding-left: 0.75em;
}

.privacy-box {
  margin-bottom: 40px;
}

.privacy-box:last-child {
  margin-bottom: 0;
}

/* ===========================================
*
* footer style
*
* ======================================== */
.footer {
  position: relative;
  background-color: var(--main-color);
}
.footer__inner {
  padding-block: 80px;
}
.footer__logo {
  margin-bottom: 32px;
}
.footer-nav {
  margin-top: 37px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer-nav__list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.6666666667em 0;
  background-color: var(--theme-color);
  border-radius: var(--round-5);
  padding: 1em;
}
.footer-nav__item {
  position: relative;
  z-index: 1;
}
.footer-nav__item::after {
  content: "";
  width: 1px;
  height: 1em;
  background-color: var(--main-text-color);
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0% -50%;
}
.footer-nav__item:first-child::before {
  content: "";
  width: 1px;
  height: 1em;
  background-color: var(--main-text-color);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0% -50%;
}
.footer-nav__link {
  line-height: 1;
  font-size: 14px;
  padding-inline: 1em;
  letter-spacing: var(--letter-spacing-regular);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.footer-nav__link:hover {
  opacity: 0.7;
}
.footer-sub {
  margin-top: 20px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer-sub__list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5em 1.5em;
}
.footer-sub__item {
  position: relative;
  z-index: 1;
}
.footer-sub__link {
  line-height: 1;
  font-size: 12px;
  letter-spacing: var(--letter-spacing-regular);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.footer-sub__link:hover {
  opacity: 0.7;
}
.footer-info__address {
  font-size: var(--font-size-18);
  text-align: center;
  line-height: 1;
  margin-bottom: 38px;
}
.footer-info__main {
  gap: 20px;
}
.footer__copy {
  font-size: 12px;
  letter-spacing: var(--letter-spacing-regular);
  width: 100%;
  display: block;
  text-align: center;
  line-height: 1.25;
  margin-top: 60px;
}