@charset "UTF-8";

/* 共通
------------------------------- */
html {
  /* scroll-behavior: smooth; */
  -webkit-font-smoothing: antialiased;
}

body {
  margin: auto;
  overflow-x: hidden;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

html,
body {
  font-size: 62.5%;
}

img,
picture {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

:root {
  --main-color: #6f4d3e;
  --main-rgb-color: 111, 77, 62;
  --sub-color: #ed6d00;
  --sub-rgb-color: 237, 109, 0;
  --main-max-width: 1620px;
}


.wrapper {
  max-width: var(--wrapper-width, 100%);
  margin-left: auto;
  margin-right: auto;
}

.wrapper--middle {
  --wrapper-width: 1620px;
  /* これにより、デフォルトのラッパー幅が上書きされる。 */
}

.txtshadow {
  -webkit-filter: drop-shadow(0 0 15px #000);
  filter: drop-shadow(0 0 15px #000);
}

/* scrollify用 */
.scbox {
  height: 100vh;
}

.scbox.scbox-non {
  height: auto;
}

/* common
------------------------------- */
/* 背景色 */
.bg__white {
  background-color: #fff;
}

/* ボタン */
.btn {
  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;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(1.3rem, 1.69vw, 2rem);
  width: clamp(185px, 24vw, 300px);
  height: clamp(50px, 5.86vw, 60px);
  /* clamp最小viewport768pxで計算 */
  font-weight: bold;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000000ff;
  letter-spacing: 0.3em;
  z-index: 1;
}

.btn::before,
.btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: #fff;
  border-radius: 3px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
}

.btn::before {
  -webkit-transform: translateY(-50%) rotate(30deg);
  transform: translateY(-50%) rotate(30deg);
}

.btn::after {
  -webkit-transform: translateY(-50%) rotate(-30deg);
  transform: translateY(-50%) rotate(-30deg);
}

.btn:hover {
  opacity: 0.7;
}

.btn:hover::before {
  -webkit-transform: translate(5px, -50%) rotate(30deg);
  transform: translate(5px, -50%) rotate(30deg);
}

.btn:hover::after {
  -webkit-transform: translate(5px, -50%) rotate(-30deg);
  transform: translate(5px, -50%) rotate(-30deg);
}

/* TOP共通見出し */
.content__ttl {
  display: block;
  margin-bottom: 30%;
}

.content__ttl__spell {
  color: var(--main-color);
  font-weight: 900;
  font-size: clamp(1.2rem, 4.8vw, 1.7rem);
  /* clamp最小viewport425pxで計算 */
}

.content__ttl__ja {
  position: relative;
  font-size: clamp(3rem, 4.8vw, 6rem);
  /* clamp最小viewport425pxで計算 */
  font-weight: 900;
  margin-bottom: 8.57%;
}

.content__ttl__ja::before {
  position: absolute;
  top: -65%;
  width: calc(5rem + 7vw);
  height: 5px;
  content: '';
  background: var(--main-color);
}

/* 改行禁止 */
.no-nl {
  display: inline-block;
}

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

.global-header__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  z-index: 999;
}

.global-header__logo {
  max-width: 236px;
  width: 15%;
  -webkit-filter: drop-shadow(0 0 3px #000);
  filter: drop-shadow(0 0 3px #000);
}

.global-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 40px);
  margin-right: clamp(80px, 10.41vw, 130px);
  /* レスポンシブで消えるのでclamp最小viewport768pxで計算 */
  padding-top: 1.5%;
  -webkit-filter: drop-shadow(0 0 3px #000);
  filter: drop-shadow(0 0 3px #000);
}

.global-header__nav__item {
  color: #fff;
  font-size: clamp(1.3rem, 1.25vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.25em;
}

.global-header__nav__item:hover {
  opacity: 0.8;
}

.global-header__bgbtn {
  display: none;
}

/* 下層用 */
.bg_black {
  background-color: #000;
  position: relative;
  width: 100%;
  z-index: 1000;
}

.header-page {
  /* height: 95px; */
  height: 75px;
  padding: 27px;
  max-width: 1620px;
  max-width: var(--main-max-width);
  position: relative;
  margin: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header-page .global-header__container {
  max-height: 140px;
}

.header-page .global-header__logo {
  width: 150px;
}

.header-page .global-header__nav {
  padding-top: 0;
}

/* footer
------------------------------- */
.global-footer__container {
  display: block;
  color: #fff;
  background-color: #000;
  text-align: center;
  padding: 60px;
}

.global-footer__nav__container {
  margin-bottom: 8%;
}

.global-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 87px);
}

.global-footer__nav__item {
  font-size: clamp(1.3rem, 0.17vw, 1.4rem);
  /* レスポンシブで消えるのでclamp最小viewport768pxで計算 */
}

.global-footer__nav__item:hover {
  opacity: 0.8;
}

.copyright {
  font-size: clamp(1rem, 0.17vw, 1.3rem);
  /* レスポンシブで消えるのでclamp最小viewport768pxで計算 */
}

/* hero
------------------------------- */
.catch__container {
  position: absolute;
  z-index: 2;
  bottom: 5%;
  left: 2%;
}

.catch__container__item {
  color: #fff;
  font-weight: 900;
  /* font-size: clamp(8rem, 7.8vw, 20rem); */
  font-size: max(7.8vw, 8rem);
  /* viewport最小1024pxで計算 */
}

.video__container {
  position: relative;
  width: 100%;
  height: 100vh;
  /* calcに対応していない場合の予備 */
  height: calc(var(--vh, 1vh) * 100);
  z-index: -999;
  /* 一番下に */
}

.video__wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video__wrap::after {
  content: '';
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video__wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
  /* スクロールに合わせて拡大するのでobject-fit:cover; */
}

/*スクロールダウン全体の場所*/
.scrolldown {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 5%;
  right: 6%;
  /*矢印の動き1秒かけて永遠にループ*/
  -webkit-animation: arrowmove 1s ease-in-out infinite;
  animation: arrowmove 1s ease-in-out infinite;
  z-index: 1;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@-webkit-keyframes arrowmove {
  0% {
    bottom: 1%;
  }

  50% {
    bottom: 3%;
  }

  100% {
    bottom: 1%;
  }
}


@keyframes arrowmove {
  0% {
    bottom: 1%;
  }

  50% {
    bottom: 3%;
  }

  100% {
    bottom: 1%;
  }
}

/*Scrollテキストの描写*/
.scrolldown span {
  /*描画位置*/
  position: absolute;
  left: -23px;
  bottom: 30px;
  /*テキストの形状*/
  color: #eee;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1.5px;
  height: 20px;
  background: #eee;
  -webkit-transform: skewX(-31deg);
  transform: skewX(-31deg);
}

.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: 0;
  /*矢印の形状*/
  width: 1.25px;
  height: 100px;
  background: #eee;
}


/* WhatWeDo-about
------------------------------- */
.index-about__container {
  padding-top: 6%;
  /* padding-bottom: 50px; */
  padding-bottom: 10px;
  max-width: 1400px;
  margin: 0 6%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.index-about__title-spell {
  font-weight: 900;
  /* font-size: clamp(1.2rem, 3.2vw, 3rem); */
  font-size: clamp(1.2rem, 1.56vw, 3rem);
  /* viewport最小768pxで計算 */
  margin-bottom: 1%;
}

.index-about__title-ja {
  font-weight: 900;
  font-size: clamp(3.2rem, 4.17vw, 8.6rem);
  /* viewport最小768pxで計算 */
  display: inline-block;
  position: relative;
}

.index-about__title-ja::before {
  display: inline-block;
  position: absolute;
  content: '';
  bottom: -60px;
  /*下線の上下の位置*/
  left: 9%;
  width: 17.53%;
  /*下線の幅*/
  height: 7px;
  /*下線の太さ*/
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  /*位置の調整*/
  background-color: var(--main-color);
  /*下線の色*/
}

.index-about__lead {
  font-size: clamp(1.4rem, 1.82vw, 1.8rem);
  /* デザイン上viewport最小768pxで計算 */
  font-weight: 700;
  line-height: 2.15;
  padding-top: 80px;
  overflow: hidden;
  max-width: 1024px;
}

.index-about__lead p {
  overflow: hidden;
  text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
}

.bg__base {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 35px;
}

.bg__deco {
  position: absolute;
  right: -18vw;
  top: -10vw;
}

/* 背景動画 */
.bg__video {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  text-align: right;
}

.bg__video video {
  aspect-ratio: 16/9;
  width: 52%;
  min-width: 300px;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(70%, black), to(transparent));
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
  /* プレフィックスを先に */
  mask-image: -webkit-gradient(linear, right top, left top, color-stop(70%, black), to(transparent));
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

.bg__base-txt {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg__deco-txt {
  /* position: absolute; */
  /* left: 4%; */
  /* bottom: -8%; */
  /* z-index: -1; */
  font-size: max(11.7vw, 4.4rem);
  /* viewport最小375pxで計算 */
  font-weight: 900;
  color: #ffffff;
  text-shadow: 1px 1px 1px #e4e4e4, -1px -1px 1px #e4e4e4, -1px 1px 1px #e4e4e4, 1px -1px 1px #e4e4e4;
  /* -webkit-text-stroke: 1px #e4e4e4; */
  white-space: nowrap;
  /* height: 300px; */
  padding-left: 6%;
}


/* important news
------------------------------- */
.important-news__area {
  background-color: #fff;
  padding-bottom: 75px;
}

.important-news {
  font-size: clamp(1.5rem, 1.95vw, 1.8rem);
  border: 2px solid #D10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #D10000;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 9px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.important-news dt {
  border-right: 1px solid #D10000;
  -ms-flex-preferred-size: 23%;
  flex-basis: 23%;
  text-align: center;
  padding: 3% 1% 3% 0;
}

.important-news dd {
  padding: 1% 1% 1% 4%;
  -ms-flex-preferred-size: 77%;
  flex-basis: 77%;
}

.important-news a {
  display: block;
}

.important-news a:hover {
  text-decoration: underline;
}

.torikumi {
  font-size: clamp(1.5rem, 1.95vw, 1.8rem);
  border: 2px solid #D10000;
  color: #D10000;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75em;
  text-align: center;
}

.torikumi a {
  display: block;
}

.torikumi a:hover {
  text-decoration: underline;
}

/* operating
------------------------------- */
.operating__area {
  padding: 5.75% 3%;
}

.operating__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: var(--main-max-width);
  margin: 0 auto;
  gap: 4%;
}


.operating__item {
  margin: 0 auto;
  border: 1px solid #000;
}

.operating__item__txt {
  background-color: #000;
  color: #fff;
  text-align: right;
  position: relative;
  padding: 2% 8%;
  font-size: clamp(1.4rem, 1.82vw, 1.6rem);
  /* viewport最小768pxで計算 */
  line-height: 1;
}

.operating__item__txt::before,
.operating__item__txt::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: #fff;
  border-radius: 3px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
}

.operating__item__txt::before {
  -webkit-transform: translateY(-50%) rotate(30deg);
  transform: translateY(-50%) rotate(30deg);
}

.operating__item__txt::after {
  -webkit-transform: translateY(-50%) rotate(-30deg);
  transform: translateY(-50%) rotate(-30deg);
}

.operating__item:hover {
  opacity: 0.8;
}

/* wrapperを無視して背景色を幅いっぱいに表示 */
.bgcolor {
  position: relative;
  overflow: hidden;
}

.bgcolor::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;

  display: block;

  width: 100%;
  height: 100%;

  background-color: #f6f6f6;

  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* tenporary bisiness hours
------------------------------- */
.tenporary__container {
  width: 100%;
  width: 100%;
  max-width: var(--main-max-width);
  margin: auto;
  padding: 0 3% 10%;
  /* padding-top: 6%; */
}

.tenporary__title-ja {
  font-size: clamp(2.4rem, 3.13vw, 4.0rem);
  /* viewport最小768pxで計算 */
  font-weight: 900;
  text-align: center;
  margin-bottom: 3%;
}

.tenporary__title-spell {
  font-size: clamp(1.2rem, 3.13vw, 1.7rem);
  /* viewport最小768pxで計算 */
  font-weight: 900;
  color: var(--main-color);
  text-align: center;
}

.tenporary__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2%;
  padding-top: 5%;
}

.tenporary__btn {
  line-height: 1;
  text-decoration: none;
  font-size: clamp(1.2rem, 1.56vw, 1.6rem);
  /* viewport最小768pxで計算 */
  width: 100%;
  height: 80px;
  font-weight: bold;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #fff;
  border: 1px solid #000;
  padding: 31px 2%;
}

.tenporary__btn::before,
.tenporary__btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: var(--main-color);
  border-radius: 3px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
}

.tenporary__btn::before {
  -webkit-transform: translateY(-50%) rotate(30deg);
  transform: translateY(-50%) rotate(30deg);
}

.tenporary__btn::after {
  -webkit-transform: translateY(-50%) rotate(-30deg);
  transform: translateY(-50%) rotate(-30deg);
}

.tenporary__btn:hover {
  opacity: 0.7;
}

.tenporary__btn:hover::before {
  -webkit-transform: translate(5px, -50%) rotate(30deg);
  transform: translate(5px, -50%) rotate(30deg);
}

.tenporary__btn:hover::after {
  -webkit-transform: translate(5px, -50%) rotate(-30deg);
  transform: translate(5px, -50%) rotate(-30deg);
}

.tenporary__btn a {
  display: block;
}

/* infomation
------------------------------- */
.infomation__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10% 4%;
  width: 100%;
  gap: 7%;
  position: relative;
  overflow: hidden;
}

.infomation__ttl {
  padding-top: 3.5%;
  width: 25%;
}

.infomation__list__wrap {
  width: 100%;
}

.infomation__list {
  border-bottom: 1px solid #000;
  position: relative;
  background-color: #ffffff4D
}

.infomation__list:first-child {
  border-top: 1px solid #000;
}

.infomation__list::before,
.infomation__list::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: var(--main-color);
  border-radius: 3px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
}

.infomation__list::before {
  -webkit-transform: translateY(-50%) rotate(30deg);
  transform: translateY(-50%) rotate(30deg);
}

.infomation__list::after {
  -webkit-transform: translateY(-50%) rotate(-30deg);
  transform: translateY(-50%) rotate(-30deg);
}

.infomation__list:hover::before {
  -webkit-transform: translate(5px, -50%) rotate(30deg);
  transform: translate(5px, -50%) rotate(30deg);
}

.infomation__list:hover::after {
  -webkit-transform: translate(5px, -50%) rotate(-30deg);
  transform: translate(5px, -50%) rotate(-30deg);
}

.infomation__topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 6% 2%;
  gap: 5%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.infomation__topic:hover {
  text-decoration: underline;
}

.infomation__topic__date {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.82vw, 1.5rem);
  /* viewport最小768pxで計算 */
  line-height: 1.8;
  -ms-flex-preferred-size: 80px;
  flex-basis: 80px;
}

.infomation__topic__ttl {
  font-size: clamp(1.5rem, 1.95vw, 1.8rem);
  /* viewport最小768pxで計算 */
  margin-right: 10%;
  line-height: 1.8;
}

.new {
  color: #d10000;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.95vw, 1.6rem);
  margin-left: 0.8em;
}

.fluid-info {
  position: absolute;
  right: 2vw;
  top: 1vw;
  width: 40vw;
  /*横幅*/
  height: 40vw;
  /*縦幅*/
  background: linear-gradient(229deg, #ff8217 20%, #d9a924, #ffc73b);
  /*背景色*/
  background-size: 200% 200%;
  opacity: 0.2;
  -webkit-animation: fluidrotate 30s ease 0s infinite, bg-gradient 10s ease infinite;
  animation: fluidrotate 30s ease 0s infinite, bg-gradient 10s ease infinite;
  /*アニメーションの設定*/
}

.fluid-info2 {
  position: absolute;
  right: -8vw;
  top: 1vw;
  width: 20vw;
  /*横幅*/
  height: 20vw;
  /*縦幅*/
  background: linear-gradient(229deg, #875225 20%, #b35b15, #ffdb29);
  /*背景色*/
  background-size: 200% 200%;
  opacity: 0.1;
  -webkit-animation: fluidrotate 20s ease 0s infinite, bg-gradient 10s ease infinite;
  animation: fluidrotate 20s ease 0s infinite, bg-gradient 10s ease infinite;
  /*アニメーションの設定*/
}

@keyframes fluidrotate {

  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }

  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }

  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }

  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }

  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }

  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }

  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }

}

@-webkit-keyframes bg-gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes bg-gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}


/* recruit
------------------------------- */
.recruit__head {
  max-height: 500px;
  /* min-height: 300px; */
  height: auto;
  width: 100%;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  /* position: static; */
  top: 0;
  left: 0;
  z-index: -998;
}

.parallax__content {
  overflow: hidden;
  height: 450px;
  position: relative;
}

.parallax__content img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
}


.recruit__head__deco {
  font-size: clamp(5rem, 14.93vw, 29rem);
  font-weight: 900;
  color: #ffffff00;
  -webkit-text-stroke: 0.01em #fff;
  white-space: nowrap;
  position: absolute;
  right: 0;
  bottom: 95%;
  z-index: 2;
  /* ▼▼▼20230502 RECRUITをしっかり見せる提案▼▼▼ */
  color: #6f4d3e;
  -webkit-text-stroke: 0.025em var(--main-color);
  mix-blend-mode: multiply;

}

.recruit__wrap {
  position: relative;
}

.recruit__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* justify-content: flex-end; */
  justify-content: space-around;
  padding: 10% 10%;
  width: 100%;
  gap: 5%;
  position: relative;
  overflow: hidden;
}

.recruit__left {
  z-index: 2;
}

.recruit__ttl__txt {
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  /* viewport最小768pxで計算 */
  font-weight: 700;
  line-height: 1.667;
  margin-bottom: 10%;
  width: 100%;
  max-width: 700px;
  padding-right: 24%;
}

.recruit__img__box {
  width: 60%;
}

.recruit__img {
  position: absolute;
  right: -5%;
  bottom: 0;
  width: 62%;
  /* z-index: -1; */
}

.recruit__bnr__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2%;
  width: 90%;
  margin: 0 auto;
  max-width: var(--main-max-width);
  padding-top: 5%;
  padding-bottom: 5%;
}


.recruit__bnr__container a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
    .recruit__bnr__container {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
		 padding: 13% 0 !important;
    }
}


/* gift
------------------------------- */
.gift {
  margin: 0 auto;
  max-width: 1400px;
  padding: 10% 5%;
}

.gift a:hover {
  opacity: 0.7;
}

/* 下部フッター手前画像
------------------------------- */
.bottom__img {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.bottom__img img {
  width: 100%;
  height: 100%;
}

/* parallax
https://simpleparallax.com/
------------------------------- */
.parallax__content__img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.parallax__content__img ::before {
  content: '';
  background-color: rgba(0, 0, 0, .15);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.parallax__content__img2 {
  width: 100%;
  max-height: 500px;
  min-height: 180px;
  overflow: hidden;
}

/* TOPへ戻る
------------------------------- */
.gotop {
  background-color: #696969;
  display: block;
  margin: 0 auto;
  text-align: center;
  z-index: 999;
}

.gotop a {
  display: block;
}

.gotop a:hover {
  opacity: 0.5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.gotop img {
  max-width: 80px;
  margin: 1% 0;
}

/* pankuzu
------------------------------- */
.pankuzu__container {
  padding: 1% 2%;
  background-color: #000;
}

.pankuzu__list {
  color: #fff;
  font-size: 1.2rem;
}

/* /////TOPここまで */

/* 下層ページここから */
/* 下層共通
------------------------------- */
.page__wrap {
  /* padding: 180px 4% 130px; */
  padding: 80px 4% 130px;
  width: 100%;
  max-width: 1400px;
  font-size: 1.6rem;
  line-height: 1.6;
}

.page__container {
  margin: 0 auto;
  padding: 0 5%;
  /* max-width: 1400px; */
  max-width: 1000px;
  font-size: clamp(1.4rem, 1.83vw, 1.6rem);
  line-height: 1.75;
}

/* 下層ページ共通見出し */
.page__ttl {
  display: block;
  /* margin-bottom: 6%; */
  margin-bottom: 40px;
  position: relative;
  max-height: 300px;
  text-align: center;
}

.page__ttl__spell {
  color: var(--main-color);
  font-weight: 900;
  font-size: clamp(1.2rem, 4.8vw, 1.5rem);
  /* clamp最小viewport425pxで計算 */
}

.page__ttl__ja {
  position: relative;
  /* font-size: clamp(3rem, 4.8vw, 7rem); */
  /* font-size: clamp(3rem, 4.8vw, 6rem); */
  font-size: clamp(3rem, 4.8vw, 3.25rem);
  /* clamp最小viewport425pxで計算 */
  font-weight: 900;
  margin-bottom: 0.57%;
}

.page__ttl__ja::before {
  position: absolute;
  top: -45%;
  /* width: calc(5rem + 7vw); */
  right: 50%;
  transform: translate(50%);
  /* ↑真ん中揃え */
  width: 2.5em;
  height: 5px;
  content: '';
  background: var(--main-color);
}

.page__ttl__bg {
  position: absolute;
  color: #f6f6f6;
  /* font-size: clamp(6rem, 16vw, 12rem); */
  font-size: min(11.7vw, 12rem);
  font-weight: 900;
  line-height: 1;
  /* bottom: 30%;
  left: 12%; */
  /* left: 7%; */
  right: 50%;
  transform: translate(50%);
  /* ↑真ん中揃え */
  bottom: 10%;
  z-index: -1;
  white-space: nowrap;

}

.midashi {
  border-left: solid 8px var(--main-color);
  border-bottom: solid 1px #707070;
  /* font-size: clamp(1.8rem, 4.24vw, 2.4rem); */
  font-size: clamp(1.8rem, 4.24vw, 2rem);
  font-weight: 700;
  /* padding: 10px 15px 13px; */
  padding: 0.25em 0.8em 0.4em;
  /* margin-bottom: 5%; */
  margin-bottom: 1em;
}

/* 表のベース */
.list__table {
  font-size: clamp(1.5rem, 1.95vw, 1.6rem);
  line-height: 1.75;
}

.list__table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  border-top: solid 1px #ccc;
}

.list__table dt,
.list__table dd {
  padding: 2.5% 3%;
}

.list__table dt {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  border-bottom: solid 1px #ccc;
  font-weight: 400;
  background-color: #f6f6f6;
}

.list__table dd {
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  border-bottom: solid 1px #ccc;
}

/* 会社情報
------------------------------- */
.about__menu {
  /* display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  grid-gap: 1%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.about__item {
  /* width: 48%; */
  width: 100%;
  margin-bottom: 4%;
}

.about__item a {
  display: block;
  position: relative;
  overflow: hidden;
}

.about__item img {
  height: auto;
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
}

.about__item img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.about__item h3 {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: clamp(1.4rem, 3.73vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 0.25em 0.8em;
  line-height: 1.944;
}

.about__item h3.hidetxt {
  color: #ffffff00;
}

.about__item.about__item2 {
  display: flex;
}

/* 会社概要
------------------------------- */
.history__table {
  font-size: clamp(1.4rem, 1.82vw, 1.5rem);
  line-height: 1.75;
}

.history__table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  border-top: dotted 1px #ccc;
}

.history__table dt {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  padding: 1% 0 1% 10px;
  border-bottom: dotted 1px #ccc;
  border-left: 15px solid #dcdcdc;
  font-weight: 400;
}

.history__table dt.syowa {
  border-left: 15px solid #a9a9a9;
}

.history__table dt.heisei {
  border-left: 15px solid #c3c3c3;
}

.history__table dd {
  -ms-flex-preferred-size: 74%;
  flex-basis: 74%;
  padding: 1% 1% 1% 15px;
  border-bottom: dotted 1px #ccc;
}

/* 経営理念
------------------------------- */
.philo__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
  margin-bottom: 10%;
}

.philo__ttl {
  position: relative;
  text-align: left;
  /* font-size: clamp(1.8rem, 4.24vw, 2.6rem); */
  font-size: clamp(1.8rem, 4.24vw, 2rem);
  font-weight: 700;
  /* margin-bottom: 12%; */
  line-height: 1.731;
}

/* .philo__ttl::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 10%;
  height: 5px;
  bottom: -75%;
  right: 50%;
  transform: translate(50%);
  background-color: var(--main-color);
} */

.philo__img {
  /* padding-top: 3%;
  margin: 0 auto 10%; */
  /* width: 100%; */
  width: 40%;
  max-width: 500px;
  filter: drop-shadow(2px 2px 6px #ccc);
}

.philo__box {
  margin-bottom: 10%;
  padding: 4%;
  border: solid 1px rgb(var(--main-rgb-color), 0.5);
  border-radius: 8px;
}

.philo__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.philo__inner-L {
  flex-basis: 75%;
}

.midashi-philo {
  border-left: solid 6px var(--main-color);
  font-size: clamp(1.5rem, 4vw, 1.6rem);
  font-weight: 700;
  padding: 0 0.8em 0;
  margin-bottom: 1em;
}

.philo__txt {
  font-size: clamp(1.6rem, 2.08vw, 1.8rem);
  font-weight: 700;
  text-align: left;
  line-height: 2.167;
  padding: 0 3%;
  position: relative;
}

.philo__txt__img {
  flex-basis: auto;
  max-width: 140px;
  margin-right: 20px;
}

.philo__txt__bgbox {
  position: absolute;
  top: 5%;
  right: 2%;
}

.philo__txt__bg {
  position: relative;
}

.philo__bgitem {
  /* width: 150px;
  height: 150px;
  border-radius: 50% 70% 50% 80%; */
  width: 160px;
  height: 130px;
  border-radius: 80% 0% 70% 0%;
  /* 左上、右上、右下、左下 */
  background: #fbc83b80;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.philo__bgitem2 {
  width: 75px;
  height: 75px;
  border-radius: 50% 70% 50% 80%;
  /* 左上、右上、右下、左下 */
  background: #fbc83b80;
  position: absolute;
  /* top: 80px;
  right: 120px; */
  top: 40px;
  right: 140px;
  z-index: -1;
}

.philo__bgitem.tbgcolor1 {
  background: linear-gradient(45deg, rgba(255, 140, 62, 0.5), rgba(254, 220, 64, 0.5));
}

.philo__bgitem2.tbgcolor1 {
  background: linear-gradient(90deg, rgba(254, 220, 64, 0.2), rgba(255, 242, 112, 0.5));
}

.philo__list {
  font-size: clamp(1.4rem, 1.82vw, 1.5rem);
  font-weight: 400;
  text-align: left;
  /* max-width: 500px; */
}

.philo__list li::before {
  content: "＊";
  font-weight: 700;
  color: var(--main-color);
  margin-right: 0.5em;
}

.philo__list2 {
  list-style: disc;
  list-style-position: inside;
  margin-left: auto;
  margin-right: auto;
}

/* 創業者の想い
------------------------------- */
.message__menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: -80px;
  margin-bottom: 180px;
  justify-content: center;
  justify-items: stretch;
}

.message__menu__item {
  background-color: #fff;
  padding: 10px;
  border: solid 1px #ccc;
  text-align: center;
}

.message__menu__item:hover {
  opacity: 0.8;
  background-color: #f6f6f6;
}

.message__menu__item a {
  display: block;
}

.thought__img {
  margin: 0 auto 5%;
}

.thought__txt {
  max-width: 1000px;
  margin: 8% auto 0;
  /* border: solid 1px #ccc; */
  padding: 0 5%;
  margin-bottom: 20%;
  text-align: justify;
  line-height: 2.5;
}

.sign {
  line-height: 2;
  text-align: right;
  margin-top: 2em;
  /* float: right; */
}

.sign img {
  width: auto;
  max-width: 100%;
}

.sign b {
  font-size: clamp(1.8rem, 4.8vw, 2.2rem);
  font-weight: 500;
}

/* 採用情報
------------------------------- */

/* 新採用用ヘッダー画像 */
.recruit-page__header {
  margin-bottom: 7.25%;
  padding-top: 2%;
  overflow: hidden;
}

.recruit-page__header img {
  min-height: 120px;
  object-fit: cover;
}

.page__ttl.recruit-page__ttl {
  z-index: 1;
}

.youtube {
  text-align: center;
  margin: 0 auto 5%;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  -webkit-box-shadow: 8px 8px 8px rgb(0 0 0 / 30%);
  box-shadow: 8px 8px 8px rgb(0 0 0 / 30%);
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

.banner__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto 10%;
}

.banner__box a {
  display: inline-block;
}

.banner__box img {
  width: auto;
}

/* ヘッダー画像 */
.recruit-page__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: -999;
}

/* フォトエリア */
.recruit-page__photoarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 70px;
}

.photoarea-img {
  width: 32.7%;
  margin-bottom: 1.1%;
}

/* 求める人材 */
.recruit-page {
  text-align: center;
  padding-top: 3%;
}

.recruit-page h4 {
  font-weight: 700;
  font-size: clamp(2.0rem, 5.33vw, 2.8rem);
  margin-bottom: 5%;
}

.recruit-page p {
  line-height: 3;
  margin-bottom: 10%;
}

.taikeizu {
  margin: 0 auto;
  max-width: 800px;
}

.taikeizu img {
  padding-left: 8%;
  margin-bottom: 5%;
}

.taikeizu p {
  text-align: left;
  line-height: 1.563;
  letter-spacing: 0.05em;
}

/* 採用サイトへのボタン */
.btn-recruit {
  margin: 0 auto 5%;
  max-width: 670px;
}

.btn-recruit a :hover {
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/*
.btn-recruit a {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  max-width: 670px;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #222222;
  z-index: 1;
  padding: 2em;
  margin: 0 auto;
  letter-spacing: 0.3em;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
}

.btn-recruit a::after {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #D10000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn-recruit a:hover {
  background-color: #D10000;
}

.btn-recruit a:hover::after {
  bottom: 0;
  right: 0;
} 
*/



/* スタッフの声 */
.bg__gray {
  position: relative;
  background: #f6f6f6;
  margin: 0 calc(50% - 50vw) 10%;
  width: 100vw;
}

.voice__area {
  padding: 5%;
}

.voice__ttl {
  text-align: center;
  font-weight: 900;
  margin-bottom: 7%;
}

.voice__ttl__ja {
  font-size: clamp(2.1rem, 4.94vw, 3.2rem);
}

.voice__ttl__spell {
  font-size: clamp(1.5rem, 3.52vw, 2.1rem);
  color: var(--main-color);
}

.staff__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  padding: 5%;
  gap: 4%;
  -webkit-box-shadow: 10px 10px 0 #ccc;
  box-shadow: 10px 10px 0 #ccc;
  margin-bottom: 8%;
}

.staff__L {
  text-align: center;
}

.staff__L img {
  margin-bottom: 5%;
  width: auto;
}

.staff__R {
  margin-bottom: 1%;
}

.staff__R h4 {
  color: var(--main-color);
  font-weight: 900;
  font-size: clamp(2.1rem, 6.4vw, 3rem);
  margin-bottom: 3%;
  line-height: 1.5;
}

.staff__R p {
  line-height: 2;
  text-align: justify;
}

/* 採用情報詳細 */
.list__table.recruit-page__list {
  margin-bottom: 100px;
}

.recruit-page__contact {
  text-align: center;
  margin-bottom: 8%;
}

.recruit-page__contact h3 {
  background-color: #000;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.26vw, 2.4rem);
  padding: 1%;
  margin-bottom: 5%;
}

.recruit-page__address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 5%;
}

.address__item {
  font-weight: 700;
  -ms-flex-preferred-size: 45%;
  flex-basis: 45%;
  margin-bottom: 5%;
}

.address__item h4 {
  background-color: #f6f6f6;
  font-size: clamp(1.6rem, 4.26vw, 2.4rem);
  margin-bottom: 10px;
}

.address__item p {
  font-size: clamp(2rem, 5.33vw, 2.8rem);
}

/* 採用-共通
------------------------------- */
.r-midashi {
  border-left: solid 8px var(--main-color);
  border-bottom: solid 1px #707070;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  font-weight: 700;
  padding: 0em 0.8em 0.2em;
  margin-bottom: 1em;
}

.r-midashi2 {
  text-align: center;
  font-weight: 900;
  margin-bottom: 7%;
}

.r-midashi2__ja {
  font-size: clamp(2.1rem, 4.94vw, 3.2rem);
}

.r-midashi2__spell {
  font-size: clamp(1.5rem, 3.52vw, 2.1rem);
  color: var(--main-color);
}

.r-midashi.__b {
  color: var(--main-color);
}

/* 採用-TOP
------------------------------- */
/* 採用-TOP hero
------------------------------- */
.r-top__container {
  position: relative;
}

.r-top__catch {
  position: absolute;
  bottom: 20%;
  left: 4%;
  z-index: 2;
}

.r-top__catch h2 {
  color: #fff;
  font-size: max(5.88vw, 4.5rem);
  font-weight: 700;
  line-height: 1.4;
}

.r-top__catch .catch-s {
  font-size: max(1.82vw, 1.4rem);
}

.r-top__partition {
  position: absolute;
  bottom: -0.5%;
  z-index: 100;
}

/* スライド用 */
@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
  -webkit-animation: zoomUp 8s linear 0s normal both;
  animation: zoomUp 8s linear 0s normal both;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

.bg__black {
  position: absolute;
  top: 0;
  right: 0;
  background: #000000a1;
  width: 50%;
  height: 100%;
  z-index: 999;
}

.swiper-img-txt {
  position: absolute;
  width: 50%;
  top: 20%;
  left: 5%;
  display: flex;
  align-items: center;
  gap: 20%;
}

.swiper-img-txt .rec-ttl {
  width: 80%;
}

.swiper-img-txt .read {
  writing-mode: vertical-rl;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 0.225rem + 1.65vw, 4rem);
  color: #fff;
  line-height: 1.75;
  letter-spacing: 0.15em;
}

.bg__black.left {
  left: 0;
}
.bg__black.left .swiper-img-txt {
  left: 45%;
  flex-direction: row-reverse;
}


/* 採用-TOP intro
------------------------------- */
.bg__harf {
  background: linear-gradient(175deg, #ffffff 0%, #ffffff 50%, #f6f6f6 50%, #f6f6f6 100%);
}

.bg__blur {
  background-color: #ffffffa1;
  -webkit-backdrop-filter: blur(12px) brightness(1.25);
  backdrop-filter: blur(12px) brightness(1.25);
}

.r-intro__inner {
  text-align: center;
  padding: 4% 5%;
  max-width: 1000px;
  margin: auto;
}

.r-intro__inner h3 {
  color: #626262;
  font-size: clamp(2rem, 2.06vw, 4rem);
  font-weight: 900;
  line-height: 1.667;
  letter-spacing: 0.25em;
  -webkit-filter: drop-shadow(0 0 5px #fff);
  filter: drop-shadow(0 0 5px #fff);
  margin-bottom: 1.5em;
}

.r-intro__inner .__txt {
  color: #222222;
  font-size: clamp(1.4rem, 1.313rem + 0.37vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.1em;
}


.r-intro__inner p {
  font-size: clamp(1.4rem, 1.823vw, 1.6rem);
  line-height: 2.778;
  -webkit-filter: drop-shadow(0 0 3px #fff);
  filter: drop-shadow(0 0 3px #fff);
  margin-bottom: 1.5em;
}

/* youtubeモーダル */
.modal-video {
  background-color: rgba(0, 0, 0, 0.75);
}

.appeal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

.appeal img {
  width: auto;
}

/* コンテンツ一覧 */
.r-contents__container {
  background-image: url('assets/image/recruit/introback.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.r-contents__inner {
  padding: 5%;
}

.r-contents__box {
  display: flex;
  gap: 2%;
  max-width: 1120px;
  margin: auto;
}

.r-contents__item {
  /* width: 100%; */
  margin-bottom: 2%;
}

.r-contents__item a {
  display: block;
  position: relative;
  overflow: hidden;
}

.r-contents__item .__img {
  height: auto;
  object-fit: cover;
  filter: brightness(0.8);
  transition: transform .6s ease;
}

.r-contents__item:hover .__img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.r-contents__item .__img.__nomal {
  aspect-ratio: 4/2.6;
  max-width: 376px;
  max-height: 246px;
}

.r-contents__item .__img.__rectangle {
  aspect-ratio: 7/2;
  max-width: 574px;
  max-height: 160px;
}


.r-contents__item__ttl {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 8% 7%;
  line-height: 1.35;
  z-index: 1;
}

.r-contents__item__ttl.ttl2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.r-contents__item__ttl .jp {
  font-size: clamp(1.4rem, 1.82vw, 2.4rem);
  margin-bottom: 0.2em;
}

.r-contents__item__ttl .spell {
  font-size: clamp(0.8rem, 1.04vw, 1.2rem);
}

.r-contents__item__ttl .jp.ttl2 {
  margin-bottom: 0;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 採用-TOP recruit
------------------------------- */
.r-recruit__wrap {
  position: relative;
}

.rec_bg {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  width: 67%;
}

.r-recruit__container {
  padding: 10% 4% 5%;
  margin: 0 auto;
  max-width: var(--main-max-width);
}

.r-recruit__ttl {
  margin-bottom: 50px;
}

.r-recruit__ttl .content__ttl {
  margin-bottom: 8%;
}

.r-recruit__ttl .content__ttl__ja {
  margin-bottom: 1.6%;
}

.r-recruit__midashi {
  font-size: clamp(1.8rem, 4.8vw, 2.5rem);
  font-weight: 900;
  line-height: 1.515;
  border-left: solid 7px var(--main-color);
  height: 100%;
  padding-left: 0.75em;
  margin-bottom: 20px;
  /* ↓opスタッフと並べる用 */
  min-width: 11em;
}

.r-recruit__midashi span {
  color: var(--main-color);
}

.r-recruit__midashi__box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* オープニングスタッフ募集へのボタン */
.btn.btn-op {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 55%;
  height: 60px;
  max-width: 850px;
  background-color: var(--sub-color);
  letter-spacing: 0.1em;
  border-radius: 0 50px 50px 0;
  padding-left: 2em;
  margin-bottom: 5%;
}

.btn.btn-op a {
  display: block;
}

/* オープニングスタッフ募集のお知らせ */
.r-recruit__opstaff {
  display: flex;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  align-items: center;
  padding: 0.5em 0.75em;
  margin: 0 1.35em 1.25em 0;
  width: 100%;
  color: var(--sub-color);
  background-color: rgba(var(--sub-rgb-color), 0.1);
}

.r-recruit__opstaff::before {
  font-family: 'Material Icons';
  content: 'info';
  font-size: 1.5em;
  font-weight: 400;
  display: inline-block;
  margin-right: 0.5em;
  border-right: 1px solid rgba(var(--sub-rgb-color), 0.5);
  padding-right: 0.25em;
}

.r-recruit__opstaff a {
  text-decoration: underline;
}

/* オープニングスタッフ募集のお知らせをトップページにだす用 */
.r-recruit__opstaff.__toppage {
  width: 87%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5em;
}

/* エリアマップ */
.r-recruit__map-area {
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
  margin-bottom: 8%;
}

.areamap {
  width: 70%;
  max-width: 780px;
  margin: -11em 10%;
  /* margin: -4% auto; */
  /* margin: 2% 5% 0 0; */
}

.areamap a:hover {
  opacity: .8;
}

/* sp時はエリアごとのボタンを表示 */
.areabtn {
  display: none;
}


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

/* 店名から求人を探す */
.r-recruit__shopname {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  gap: 2%;
  margin-bottom: 5%;
  width: 100%;
}

.r-recruit__shopname__list {
  /* width: 100%;
  max-width: 376px; */
  /* width: auto; */
  /* width: 30%;
  min-width: 376px; */
  width: calc(33.33333% - 2%);
  /* margin-right: 32px; */
  margin-bottom: 32px;
}

.r-recruit__shopname__list.wide {
  width: calc(66.66666% - 2%);
  /* margin-right: auto; */
}

/* .r-recruit__shopname__list.wide:nth-child(1) {
  margin-right: auto;
}
.r-recruit__shopname__list:nth-child(3n) {
  margin-right: auto;
} 
.r-recruit__shopname__list.wide {
  max-width: 776px; */
/* width: 68%;
} */
.r-recruit__shopname__list a:hover {
  opacity: .5;
}


.area__ttl {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #222;
  border-left: solid 5px var(--main-color);
  padding: 0.4em 0.6em;
  margin-bottom: 0.75em;
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.togglelist {
  font-size: 1.6rem;
  padding: 0 1em;
  margin-bottom: 40px;
  line-height: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 7%;
  grid-template-rows: repeat(6, auto);
}

.togglelist a {
  text-decoration: underline;
}

/* 採用-TOP other rec site area
------------------------------- */
.r-other-rec__container {
  padding: 0 4% 8%;
  margin: 0 auto;
  max-width: var(--main-max-width);
}

.r-other-rec__inner {
  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;
  gap: 2%;
  padding: 5%;
}

.r-other-rec__txt {
  font-size: 1.4rem;
  line-height: 1.75;
  text-align: center;
}


/* 採用-TOP service site area
------------------------------- */
.r-servicesite__area {
  background-image: url('/assets/image/recruit/introback.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.r-servicesite__inner {
  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;
  gap: 2%;
  padding: 7% 5%;
}

.r-service__bnr {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	padding-bottom : 20px;
 /* border: solid 1px #707070;*/
}



/* 採用-求人情報
------------------------------- */

/* 求人情報一覧 */
.job__list__container {
  margin-bottom: 9%;
}

.job__list__ttl {
  background-color: var(--main-color);
  color: #fff;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 6.35%;
  padding: 0.5em;
}

.job__list__item {
  margin-bottom: 16px;
  transition: .3s;
}

.job__list__item:hover {
  opacity: .6;
}

.job__list__link {
  display: flex;
  gap: 2%;
  border: solid 1px #707070;
  padding: 24px;
}

.job__list__img {
  max-width: 328px;
  width: 48%;
}

.job__list__img .__img {
  aspect-ratio: 10/6;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.job__list__txt {
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
}

.job__list__txt hr {
  border-top: solid 1px #707070;
  padding: 10px 0;
}


.job__list__itemttl {
  margin-bottom: 0.25em;
  color: var(--main-color);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
}

.job__list__summary {
  margin-bottom: 1em;
  line-height: 1.5;
  font-size: 1.4rem;
}

/* 求人情報リストページャー */
.recruit-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  justify-content: space-between;
}

.recruit-pager__btn {
  color: var(--main-color);
}

.recruit-pager__btn a {
  display: block;
  position: relative;
  display: inline-block;
  padding: 0 2em;
}

.recruit-pager__btn a::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px var(--main-color);
  border-right: solid 2px var(--main-color);
  position: absolute;
  left: 10%;
  top: 9px;
  transform: rotate(-135deg);
}

.recruit-pager__btn.next {
  text-align: right;
}

.recruit-pager__btn.next a::before {
  left: 80%;
  transform: rotate(45deg);
}

/* WP-PageNavi用css */
.wp-pagenavi {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 4%;
}

.wp-pagenavi .page,
.wp-pagenavi .current {
  display: block;
  margin: 0 4px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  height: 40px;
  width: 40px;
}

.wp-pagenavi .page {
  background: #ffffff;
  border: solid 1px var(--main-color);
  color: var(--main-color);
}

.wp-pagenavi .page:hover {
  background-color: rgb(var(--main-rgb-color), 0.8);
  color: #fff;
}

.current {
  background: rgb(var(--main-rgb-color), 0.8);
  border: solid 1px rgb(var(--main-rgb-color), 0.2);
  color: #fff;
}

.nextpostslink:hover,
.previouspostslink:hover {
  opacity: .8;
}

.nextpostslink,
.previouspostslink {
  color: var(--main-color);
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0.5em;
  transform: scale(0.7, 1);
}

.extend {
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 1%;
}

.wp-pagenavi .last,
.wp-pagenavi .first {
  color: var(--main-color);
  font-size: 1.85rem;
  font-weight: 900;
  transform: scale(0.80, 1);
}

/* 求人情報詳細 */
.job__details-pr {
  margin-bottom: 16%;
}

.job__details-pr__box {
  margin-bottom: 4.5%;
}

.job__details-pr__ttl {
  border-left: solid 8px var(--main-color);
  border-bottom: solid 1px #707070;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  font-weight: 700;
  padding: 0em 0.8em 0.2em;
  margin-bottom: 1em;
}

.job__details-pr__content {
  display: flex;
  justify-content: space-between;
}

.job__details-pr__txt {
  width: 50%;
  margin-right: 1%;
  line-height: 1.9;
  letter-spacing: 0px;
}

.job__details-pr__img {
  width: 48%;
}

.job__details-pr__img .__img {
  aspect-ratio: 4/2.88;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 6px;
}

/* .job__details-info {
  margin-bottom: 9%;
} */

.job__details-info__ttl {
  text-align: center;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 4.5%;
}

.job__details-info__ttlline {
  border-bottom: solid 3px var(--main-color);
  display: inline-block;
  padding-bottom: 0.25em;
}

.job__details-info__list {
  margin-bottom: 9%;
}

.job__details-info__list__repeat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #707070;
  font-size: 1.6rem;
}

.job__details-info__list__repeat:first-of-type {
  border-top: 1px solid #707070;
}

.job__details-info__list__item {
  padding: 2em 1.6em;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.job__details-info__list__item.__item-left {
  background: #f6f6f6;
  font-weight: 600;
  width: 27%;
}

.job__details-info__list__item.__item-right {
  width: 73%;
  justify-content: flex-start;
}

.job__details__btn {
  margin: auto;
  text-align: center;
}

.job__details__btn .__button {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 1.6em;
  width: 100%;
  background: var(--main-color);
  color: #fff;
  line-height: 1em;
  letter-spacing: 0.15em;
  transition: .3s;
}

.job__details__btn:hover {
  opacity: .7;
}

/* 採用-求める人財/トップメッセージ
------------------------------- */
.r-topmessage {
  padding: 2em;
  line-height: 2.0;
}

.r-topmessage .name {
  text-align: right;
  font-weight: 700;
  font-size: 1.8rem;
}

/* 採用-キャリアステップページ
------------------------------- */
.r-careerstep__intro {
  line-height: 2.0;
  background: rgb(var(--sub-rgb-color), 0.1);
  padding: 4% 8%;
  border-radius: 10px;
  margin-bottom: 8%;
}

.r-careerstep__intro__ttl {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  border-bottom: solid 1px var(--main-color);
  padding-bottom: 0.5em;
  margin-bottom: 0.8em;
}

.r-careerstep__intro__ttl span {
  color: var(--sub-color);
}

.r-careersystem__inner {
  text-align: center;
  padding: 5% 4% 0;
  margin-bottom: 16%;
}

.r-careersystem__inner img {
  max-width: fit-content;
}

.r-careersystem__inner.__inner2 img {
  max-width: 640px;
}

.r-careersystem__other {
  display: flex;
  justify-content: space-between;
}

.r-careersystem__other__inner {
  width: 47%;
}

.r-careersystem__other__inner ul {
  padding: 0 8%;
}

.r-careersystem__other__inner li {
  margin-bottom: 0.25em;
}

/* スタッフインタビュー */
.r-interview__container {
  position: relative;
  background: rgb(var(--main-rgb-color), 0.1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 8% 5% 130px;
}

.r-interview__box {
  max-width: 855px;
  margin: auto;
}

.r-interview__tab__area {
  display: flex;
  cursor: pointer;
  margin-bottom: 1%;
}

.r-interview__tab__item {
  width: calc(100%/3);
  max-height: 160px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.r-interview__tab__item .__img {
  aspect-ratio: 4/3;
  object-fit: cover;
  height: auto;
  filter: brightness(0.85);
}

.r-interview__tab__item .__img img {
  transition: transform .6s ease;
}

.r-interview__tab__item:hover .__img img {
  transform: scale(1.1);
}

.r-interview__tab__item__txt {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  filter: drop-shadow(1px 1px 2px #00000080);
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  z-index: 2;
}

.r-interview__tab__item__txt .position {
  font-size: 88%;
  padding-right: 0.5em;
}

.r-interview__tab__item:nth-child(n+2) {
  border-left: 1px solid #fff;
}

.r-interview__tab__item.active::after {
  /* border-bottom: solid 4px var(--sub-color); */
  content: '';
  display: block;
  background-color: var(--sub-color);
  height: 4px;
  width: 80px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.r-interview__panel__item {
  display: none;
}

.r-interview__panel__item.active {
  display: block;
}

.r-interview__panel__item__inner {
  display: flex;
  justify-content: space-between;
  gap: 4%;
  background: #fff;
  border: solid 1px var(--main-color);
  padding: 4%;
  position: relative;
}

.r-interview__panel__item__inner .__img img {
  aspect-ratio: 7/9;
  object-fit: cover;
  width: 240px;
}

.r-interview__panel__item__txtbox {
  position: relative;
}

.r-interview__panel__item__ttl {
  color: var(--main-color);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.08vw, 2.4rem);
  border-left: solid 6px var(--sub-color);
  padding-left: 0.5em;
  margin-bottom: 1em;
}

.r-interview__panel__item__txtbox .__txt {
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 10%;
}

.r-interview__panel__item__txtbox .__name {
  font-weight: 700;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
}

.r-interview__panel__item__txtbox .__name .small {
  font-size: 88%;
  padding-right: 1em;
}

/* パート・アルバイト採用情報
------------------------------- */
/* 採用フロー */
.r-flow__container {
  margin-bottom: 5%;
}

.r-flow__box {
  background: rgb(var(--sub-rgb-color), 0.1);
  border-radius: 8px 8px 0 0;
  padding: 4% 6%;
}

.r-flow__box h3 {
  color: var(--main-color);
  font-weight: 700;
  font-size: 2.4rem;
  margin-bottom: 0.8em;
  border-bottom: solid 1px var(--main-color);
}

.r-flow__box .btn-recruit {
  margin-bottom: 0;
}

.r-flow__inner {
  font-size: clamp(1.4rem, 1.82vw, 1.6rem);
  /* display: flex;
  align-items: center; */
  gap: 5%;
  margin-bottom: 1.5em;
  line-height: 2.5;
}

/* 
.r-flow__inner p {
  width: 70%;
}

.r-flow__inner img {
  margin-right: 50px;
} */

.nextarrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 48px 80px 0 80px;
  border-color: var(--sub-color) transparent transparent transparent;
  margin: 20px auto;
}

/* FAQ */
.r-faq__container {
  position: relative;
  background: rgb(var(--sub-rgb-color), 0.1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 8% 0 130px;
}

.r-faq__list {
  max-width: 885px;
}

.r-faq__list dl {
  position: relative;
  background-color: #fff;
  padding: 40px 40px 0;
  margin-bottom: 30px;
}

/* Q */
.r-faq__list dl dt {
  position: relative;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.08vw, 1.8rem);
  padding-bottom: 40px;
  cursor: pointer;
}

/* トグルボタン */
.r-faq__list dl dt::before,
.r-faq__list dl dt::after {
  content: '';
  width: 25px;
  height: 3px;
  background-color: var(--main-color);
  position: absolute;
  right: 0;
  top: 20%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.r-faq__list dl dt.close::after {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

/* Qマーク */
.r-faq__list dl dt p::before {
  position: absolute;
  top: -5px;
  left: 0;
  display: block;
  content: 'Q';
  color: #fff;
  text-align: center;
  line-height: 1.2;
  background-color: var(--main-color);
  border-radius: 8px;
  font-weight: 700;
  font-size: 28px;
  width: 40px;
  height: 40px;
}

/* A */
.r-faq__list dl dd {
  position: relative;
  border-top: solid 1px #707070;
  padding-top: 40px;
  font-size: clamp(1.4rem, 1.82vw, 1.6rem);
  cursor: default;
}

.r-faq__list dl dd p {
  padding-bottom: 40px;
}

/* Aマーク */
.r-faq__list dl dd p::before {
  position: absolute;
  top: 35px;
  left: 0;
  display: block;
  content: 'A';
  color: #fff;
  text-align: center;
  line-height: 1.3;
  background-color: var(--sub-color);
  border-radius: 8px;
  font-weight: 700;
  font-size: 28px;
  width: 40px;
  height: 40px;
}

/* QAマークのための位置調整 */
.r-faq__list dl dt,
.r-faq__list dl dd {
  padding-left: 60px;
  padding-right: 30px;
}

.btn-recruit.faq {
  margin-bottom: 0;
}

/* 採用コンセプトページ
------------------------------- */
.r-concept__catch {
  display: flex;
  align-items: center;
  margin-bottom: 13%;
}

.r-concept__catch__ttl {
  color: var(--main-color);
  font-size: 4rem;
  font-weight: 900;
  width: 40%;
}
.r-concept__catch__ttl .__sub {
  font-size: 1.6rem;
}

.r-concept__catch__txt {
  font-size: 1.4rem;
  width: 60%;
}
/* .r-concept__catch__txt p {
  margin-bottom: 2em;
} */

.r-concept__wrap {
  padding-right: 6%;
  padding-left: 6%;
}
.r-concept__message {
  margin-bottom: 13%;
}
.r-concept__midashi {
  color: var(--main-color);
  font-size: clamp(1.6rem, 2.08vw, 2.0rem);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 2em;
}
.r-concept__midashi span {
  color: #fff;
  background-color: var(--sub-color);
  font-weight: 900;
  padding: 0 11px 2px;
  margin-right: 0.5em;
}
.r-concept__message__item {
  display: flex;
  gap: 3%;
}
.r-concept__message__item-img {
  width: 42%;
}
.r-concept__message__item p {
  width: 58%;
    max-width: 507px;
    font-size: 1.4rem;
    line-height: 1.85;
}
.r-concept__value {
  display: flex;
  gap: 3%;
  padding-left: 6%;
  margin-bottom: 8%;
}
.r-concept__value__item {
  width: 65%;
}
.r-concept__value__item p {
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 2em;
}
.r-concept__value__item-img {
  width: 35%;
}

.r-concept__txt {
  text-align: center;
  margin-bottom: 8%;
  font-size: 1.4rem;
  line-height: 2;
}

.r-concept__btn {
  text-align: center;
  color: #fff;
  background: var(--main-color);
  font-weight: 700;
  letter-spacing: 0.25em;
  display: block;
  padding: 10px 20px;
}

/* 店舗情報
------------------------------- */
.store__bg__base {
  position: relative;
  /* margin-bottom: 40%; */
  margin-bottom: 5%;
}

.store__bg__base2 {
  position: relative;
  /* margin-bottom: 20%;
  margin-top: 55%; */
  margin-bottom: 5%;
}

/* 背景動画 */
.store__bg__video {
  /* position: absolute; */
  /* bottom: 0;
  right: 0; */
  opacity: 0.75;
  text-align: right;
  z-index: -1;
}

.store__bg__video video {
  aspect-ratio: 16/9;
  width: 80%;
  max-width: 900px;
  min-width: 300px;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(70%, black), to(transparent));
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
  /* プレフィックスを先に */
  mask-image: -webkit-gradient(linear, right top, left top, color-stop(70%, black), to(transparent));
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

.store__logo {
  width: auto;
  margin-bottom: 3%;
  padding-top: 3%;
  padding-left: 2%;
}

.list__table.store__list dt {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  /* padding-right: 0; */
}

.list__table.store__list dd {
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%;
  display: flex;
  justify-content: space-between;
  padding-right: 0;
}

.store__img {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 8/5;
  border: solid 1px #ccc;
  margin-left: 1em;
}

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

/* プライバシーポリシー
------------------------------- */
.midashi2 {
  font-size: clamp(1.7rem, 4.8vw, 2.6rem);
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 8%;
  line-height: 2.25;
  text-align: justify;
}

.policy__box p {
  margin-bottom: 8%;
  padding: 0 5%;
  text-align: justify;
}

/* 新着情報
------------------------------- */
.infomation__list__wrap.newslist {
  margin-bottom: 10%;
}

.infomation__topic-list {
  padding: 4% 2%;
}

.infomation__topic__ttl.page {
  font-size: clamp(1.5rem, 1.95vw, 1.6rem);
}

.btn-more {
  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;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(1.6rem, 2vw, 2rem);
  width: clamp(185px, 24vw, 350px);
  height: clamp(50px, 6vw, 60px);
  /* clamp最小viewport768pxで計算 */
  font-weight: bold;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000000ff;
  letter-spacing: 0.3em;
  margin: 10% auto 0;
}

.btn-more::before {
  content: \"\";
  display: block;
  position: absolute;
  top: 30%;
  right: 27px;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 11px;
  width: 11px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  background-color: initial;
  border-radius: 0;
}

.btn-more::after {
  display: none;
}

.btn-more:hover {
  opacity: 0.7;
}

/* 投稿ページ
------------------------------- */
.post__date {
  font-size: clamp(1.4rem, 3.73vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 1em;
}

.post__ttl {
  font-size: clamp(1.7rem, 4.53vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 8%;
  padding-bottom: 3%;
  border-bottom: solid 1px #707070;
}

.post__content {
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  line-height: 2.0;
  margin-bottom: 20%;
}

/* 投稿記事の表示関係 */
.post__content a {
  text-decoration: underline;
}

.post__content img {
  width: auto;
}

.post__content ul,
.post__content ol {
  list-style: inherit;
  list-style-position: inside;
}

/* ページャー */
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2%;
}

.pager-btn a {
  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;
  line-height: 1.5;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(1.3rem, 1.69vw, 2rem);
  width: clamp(130px, 34.66vw, 300px);
  /* clamp最小viewport375pxで計算 */
  height: 50px;
  font-weight: bold;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000000ff;
  letter-spacing: 0.3em;
}

.pager-btn a::before,
.pager-btn a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: #fff;
  border-radius: 3px;
  will-change: transform;
  -webkit-transition: .3s;
  transition: .3s;
}

.pager-btn a::before {
  -webkit-transform: translateY(-50%) rotate(30deg);
  transform: translateY(-50%) rotate(30deg);
}

.pager-btn a::after {
  -webkit-transform: translateY(-50%) rotate(-30deg);
  transform: translateY(-50%) rotate(-30deg);
}

.pager-btn a:hover {
  opacity: 0.7;
}

.pager-btn a:hover::before {
  -webkit-transform: translate(5px, -50%) rotate(30deg);
  transform: translate(5px, -50%) rotate(30deg);
}

.pager-btn a:hover::after {
  -webkit-transform: translate(5px, -50%) rotate(-30deg);
  transform: translate(5px, -50%) rotate(-30deg);
}

.pager-btn.before a::before,
.pager-btn.before a::after {
  left: 5px;
  right: 0;
}

.pager-btn.before a::before {
  -webkit-transform: translateY(-50%) rotate(150deg);
  transform: translateY(-50%) rotate(150deg);
}

.pager-btn.before a::after {
  -webkit-transform: translateY(-50%) rotate(-150deg);
  transform: translateY(-50%) rotate(-150deg);
}

.pager-btn.before a:hover::before {
  -webkit-transform: translate(-5px, -50%) rotate(150deg);
  transform: translate(-5px, -50%) rotate(150deg);
}

.pager-btn.before a:hover::after {
  -webkit-transform: translate(-5px, -50%) rotate(-150deg);
  transform: translate(-5px, -50%) rotate(-150deg);
}

.pager-btn.view {
  width: 120px;
}

.pager-btn.view a {
  width: 100%;
}

.pager-btn.view a::before,
.pager-btn.view a::after {
  content: none
}

/* お問い合わせ分岐ページ
------------------------------- */
.contact-page__notice {
  color: #d10000;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 2em;
}

.contact-page__container {
  display: flex;
  gap: 2%;
}

.contact-page__item {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.contact-page__ttl {
  color: #fff;
  background-color: #222;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.267vw, 1.8rem);
  padding: 1% 1em;
}

.contact-page__box {
  padding: 2%;
  border: solid 1px #707070;
  position: relative;
  margin-bottom: 5%;
}

.contact-page__txt {
  font-weight: 700;
  font-size: clamp(1.6rem, 4.267vw, 1.8rem);
  flex-basis: 50%;
}

.contact-page__link {
  padding: 10%;
}

.contact-page__btn {
  background-color: var(--main-color);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.267vw, 1.8rem);
  text-align: center;
  padding: 10px 1em;
  border-radius: 30px;
  display: block;
  transition: 0.3s;
}

.contact-page__btn:hover {
  opacity: 0.8;
}



/* お問い合わせ
------------------------------- */
.contact__wrap {
  max-width: 960px;
}

.contact__txt {
  font-weight: 700;
  margin-bottom: 2em;
}

.contact__tb {
  width: 100%;
}

.contact__tb th,
.contact__tb td {
  padding-bottom: 30px;
}

.contact__tb th {
  width: 23%;
  padding-right: 10px;
  font-size: 1.35rem;
}

.contact__tb td {
  width: 78%;
}

/* 入力項目 */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,
select.wpcf7-form-control.wpcf7-select {
  padding: 8px 10px;
  border: 1px solid #d0d5d8;
}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
}

select.wpcf7-form-control.wpcf7-select {
  width: auto;
  padding-right: 3em;
}


/* セレクトボックスの矢印デザイン変更 */
.select-arrow ::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid;
  border-color: transparent transparent #000 #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 5%;
  top: 40%;
}

/* 必須項目 */
.required {
  color: #fff;
  background-color: #D10000;
  font-size: 1.2rem;
  padding: 0 5px 2px;
  margin-left: 8px;
  white-space: nowrap;
}

/* テキスト */
.domain-txt {
  margin-bottom: 5em;
}

.domain {
  color: #D10000;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: underline;
}

.ex-txt {
  color: #707070;
  font-size: 1.4rem;
}

.contact__check {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 2em;
}

/* 送信ボタン */
.subsids {
  text-align: center;
}

input.wpcf7-form-control.wpcf7-submit {
  line-height: 1;
  color: #fff;
  text-align: center;
  font-size: clamp(1.3rem, 1.69vw, 2rem);
  width: 100%;
  /* max-width: 300px; */
  height: clamp(50px, 5.86vw, 60px);
  /* clamp最小viewport768pxで計算 */
  font-weight: bold;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000000ff;
  letter-spacing: 0.3em;
}

input.wpcf7-form-control.wpcf7-submit :hover {
  opacity: 0.7;
}


/* ////下層ページここまで */

/* アニメーション
------------------------------- */
/* Loading画面 */
.loading {
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: #222;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.loading-animation img {
  max-width: 200px;
  height: auto;
  margin: 50vh auto 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
  animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ▼背景色が伸びて出現▼ */
/*全共通*/
.bgextend {
  -webkit-animation-name: bgextendAnimeBase;
  animation-name: bgextendAnimeBase;
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  -webkit-animation-name: bgextendAnimeSecond;
  animation-name: bgextendAnimeSecond;
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左から右*/
.bgLRextend::before {
  -webkit-animation-name: bgLRextendAnime;
  animation-name: bgLRextendAnime;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }

  50% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50.001% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }

  100% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
}

@keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }

  50% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50.001% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }

  100% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過を指定　*/
.bgappearTrigger,
.bgLRextendTrigger,
.fadeInUpTrigger {
  opacity: 0;
}

.delay-time05 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  /*この数字を指定したい遅延時間に変更*/
}

.delay-time10 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  /*この数字を指定したい遅延時間に変更*/
}

.delay-time15 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  /*この数字を指定したい遅延時間に変更*/
}

.delay-time25 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  /*この数字を指定したい遅延時間に変更*/
}

.delay-time35 {
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  /*この数字を指定したい遅延時間に変更*/
}

.delay-time45 {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
  /*この数字を指定したい遅延時間に変更*/
}

.animate__slow15 {
  animation-duration: 1.5s;
}

.animate__slow25 {
  animation-duration: 2.5s;
}

/* 調節用
------------------------------- */
/* text */
.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.boldB {
  font-weight: 900;
}

.red {
  color: #D10000;
}

.gray {
  color: #707070;
}

/* hr */
hr {
  padding: 20px 0;
  border: none;
}

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

.fl-clear {
  clear: both;
}

/* margin */
.mt01em {
  margin-top: 1em;
}

.mt02em {
  margin-top: 2em;
}

.mb01em {
  margin-bottom: 1em;
}

.mb02em {
  margin-bottom: 2em;
}

.mt05p {
  margin-top: 5%;
}

.mt10p {
  margin-top: 10%;
}

.mb05p {
  margin-bottom: 5%;
}

.mb10p {
  margin-bottom: 10%;
}

.mb15p {
  margin-bottom: 15%;
}

.mb30p {
  margin-bottom: 30%;
}

/* padding */
.pt05p {
  padding-top: 5%;
}

.pt10p {
  padding-top: 10%;
}

.pb0 {
  padding-bottom: 0;
}

.pb05p {
  padding-bottom: 5%;
}

.pb10p {
  padding-bottom: 10%;
}

.pb15p {
  padding-bottom: 15%;
}

.pb30p {
  padding-bottom: 30%;
}