.-x-richtext ul, .-x-richtext ol {
	list-style-position: inside;
}
[data-legal]{
	position:relative;
	--legal-offset-h:attr(data-legal-offset-h px);
	--legal-offset-v:attr(data-legal-offset-v px);
}
[data-legal][data-legal-safe="1"]::after{
	position: absolute;
	opacity: 0.5;
	color: black;
	content: "墨";
	font-size: 16px;
	display: block;
	height: 24px;
	padding-top: 0px;
	background-image: url(/_lib/lc.png);
	background-size: auto 20px;
	background-repeat: no-repeat;
	padding-left: 50px;
	background-position: left top;
}
[data-legal][data-legal-safe="1"]:hover::after {
    position: absolute;
    opacity: 0.5;
    color: black;
    content: attr(data-legal-check-at);
    white-space:nowrap;
    font-size: 11px;
    display: block;
    height: 24px;
    background-image: url(/_lib/lc.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-left: 0px;
    background-position: left top;
}

[data-legal-position="left-top"]::after{
	left:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="left-bottom"]::after{
	left:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
[data-legal-position="right-top"]::after{
	right:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="right-bottom"]::after{
	right:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
/*common_css*/
/*widget:bb9c0390-45da-4909-9110-cdc95d75b7c6*/
/*widget:ba8df8fe-3514-419c-968c-403f3b14828d*/
/*widget:2a7b3eb8-a92c-408a-aa7d-fb7c5a1d6504*/
/*instance:1162*//*instance mediea*/@media screen and (max-width: 480px){}/*widget:9b7ed446-e1e2-404d-94a6-376d14d14e8b*/
/*widget:2ff08ff4-2b5d-439c-b66a-5b5ccd99c45b*/
@media screen and (max-width: 768px){}/*widget:53596cbb-9592-4888-a3c4-2d1b5e3a974b*/
/*widget:64ea748f-156e-45a7-b5bf-5ec55875e15d*/
/*widget:b323a7a0-c3fa-4f07-b6d3-93b78f8ed051*/
/*widget:3f9f5f2e-6a1a-48f9-be0d-821bbc5ef350*/
/*widget:254d5154-faa1-4a5e-bd4d-f0538ce5ad8f*/
/*instance:1189*/[data-instance="1189"]{background-image:url(/_img/ja/cms/1189/bg_img/_/?1785907401);}/*widget:cda50491-da9c-46cf-9238-c0d1e9024877*/
/*widget:996600e9-517f-4cf9-9949-60e145054c98*/
/*widget:5058a028-9525-4a52-9745-5614faa9cab4*/
/*widget:c87e85e3-0100-4a55-af5a-a35e252388f7*/
/*widget:349d55f0-44bc-47c1-a298-6beec6681e2c*/
/*widget:ef884a1a-6450-43f2-a85b-9471abdf9458*/
/*widget:5e64ac21-3c6d-407d-8a47-715f9e4f5458*/
/*widget:04d0572b-73c5-48ec-a9be-4c3e220e2d08*/
/*instance:1213*/[data-instance="1213"]{background-image:url(/_img/ja/cms/1213/bg_img/_/?1785907401);}/*widget:ea1d1a1d-0c1c-4136-aff9-066f938ae232*/
/*widget:8c57f676-6f89-4bf4-b2ba-f04d4df2aa67*/
/*widget:e6deb8bf-8474-42b1-beb6-84ce5187a0cb*/
/*widget:a530a0e4-8b15-4cf8-bc52-6b393ce0ffb5*/
/*instance:1254*/[data-instance="1254"]{background-image:url(/_img/ja/cms/1254/bg_img/_/?1785907401);}/*widget:ec15fc9c-19df-4a54-9d84-d3bcf2756284*/
/*widget:5511c81e-6b22-49c7-890a-47f6009f262d*/
/*layout:1*//*layout:11*/@charset "utf-8";
/* CSS Document */
/* -------------------------------------
Browser：Edge over
-------------------------------------
01: 共通
02: テンプレート
03: ページ
-------------------------------------*/

/** ==============================================
01.共通
============================================== **/
/* -------------------------------------
アニメーション
-------------------------------------*/
.fade {
  opacity: 0;
  translate: 0 50px;
  transition: opacity 300ms ease, translate 800ms ease;
}
.fade {
  opacity: 0;
  translate: 0 80px;
  transition: opacity 900ms ease, translate 700ms ease;
}
.fade.fade-in {
  opacity: 1;
  translate: 0;
}
@media screen and (max-width: 520px) {
  .fade {
    transition: opacity 500ms ease, translate 500ms ease;
  }
}

.hero-img01 img {
  scale: 0.9;
  translate: 0 30px;
  transition: opacity 900ms ease, translate 700ms ease, scale 500ms ease-in-out;
}
.hero-img01 img.fade-in {
  scale: 1;
}
.hero-img02 {
  translate: 0 100px;
  transition: opacity 500ms ease, translate 900ms ease;
  transition-delay: 0.3s;
}

.personality-list li:nth-child(3n-1) {
  transition-delay: 0.2s;
}
.personality-list li:nth-child(3n) {
  transition-delay: 0.4s;
}
.career-ex-list li:nth-child(2) {
  transition-delay: 0.2s;
}

/* -------------------------------------
data-type 色分け
-------------------------------------*/
[data-type="温浴施設運営事業"],
[data-type="温浴運営スタッフ"],
[data-type="機械設備保守事業"],
[data-type="設備保守スタッフ"] {
  --type-color: var(--red);
}
[data-type="飲食事業"],
[data-type="飲食スタッフ"],
[data-type="営業開発事業"],
[data-type="営業開発スタッフ"] {
  --type-color: var(--green);
}

/** ==============================================
02.テンプレート
============================================== **/
/* -------------------------------------
hf-nav
-------------------------------------*/
.hf-nav a {
  line-height: 1;
}
.hf-nav a i {
  display: block;
  font-family: var(--webf);
  font-size: 2.5em;
}
.hf-nav a i::first-letter {
  color: var(--red);
}
.hf-nav a .more {
  justify-content: flex-start;
}
.hf-nav a .more span {
  border-bottom: none;
}
.hf-nav a:hover .more span {
  color: var(--red);
}

@media (max-width: 520px) {
  .hf-nav a i {
    font-size: 1.8em;
  }
  .hf-nav a .more span {
    font-size: 0.75em;
    padding: 5px 0;
  }
}

/* -------------------------------------
header
-------------------------------------*/
header {
  --h-main-width: 170px;
  --h-main-height: 66px;
  width: 100%;
  height: var(--h-main-height);
  padding: 10px 0 10px 5%;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 1000;
}

/* h-logo */
header .h-logo {
  display: block;
  width: 380px;
  transition: var(--transition);
  position: relative;
  z-index: 1500;
}
header .h-logo:hover {
  opacity: var(--opacity);
}

/* h-main */
header .h-main {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1500;
}

a[class^="h-btn-"] {
  width: var(--h-main-width);
  height: var(--h-main-height);
  display: grid;
  place-content: center;
  color: #fff;
}
a[class^="h-btn-"]:hover {
  opacity: var(--opacity);
}
a.h-btn-rec {
  font-size: 18px;
  background: var(--green);
}
a.h-btn-entry {
  font-size: 24px;
  background: var(--red);
}

/* nav */
header nav {
  width: 100% !important;
  height: 280px;
  margin: 0;
  padding: 130px 8% 40px;
  background: #fff;
  position: fixed;
  top: -100%;
  right: 0;
  opacity: 0;
  z-index: 1499;
  transition: 0.3s ease-in-out;
  transition: opacity 400ms ease, translate 800ms ease;
}
header.nav-open nav {
  top: 0;
  opacity: 1;
}
header nav .gnav {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
header nav .nav-btn-wrap {
  display: none;
}

/* hamburger */
header .hamburger {
  --size: var(--h-main-height);
  display: block;
  width: calc(var(--size) * 1.4);
  height: var(--size);
  position: absolute;
  top: 0;
  right: var(--h-main-width);
  cursor: pointer;
  transition: all 400ms;
  z-index: 1500;
  transition: var(--transition);
}
header .hamburger span {
  position: absolute;
  width: 50%;
  height: 2px;
  background: currentColor;
  transition: all 400ms;
  right: 0;
  left: 0;
  margin: 0 auto;
}
header .hamburger span:nth-child(1) {
  top: 32%;
}
header .hamburger span:nth-child(2) {
  top: 48%;
}
header .hamburger span:nth-child(3) {
  top: 64%;
}

/* nav-open時 */
header.nav-open .hamburger {
  border: none;
}
header.nav-open .hamburger span:nth-child(1) {
  top: 46%;
  transform: rotate(45deg);
}
header.nav-open .hamburger span:nth-child(2) {
  display: none;
}
header.nav-open .hamburger span:nth-child(3) {
  top: 46%;
  transform: rotate(-45deg);
}

/* 詳細ページのみ */
.rec-post-head .h-main a.h-btn-rec,
.rec-post-head .h-main a.h-btn-interview {
  font-size: 16px;
  color: var(--color);
  background: #fff;
}
.rec-post-head .hamburger {
  display: none;
}

@media screen and (max-width: 520px) {
  header {
    --h-main-height: 62px;
    padding: 0;
  }
  /* h-logo */
  header .h-logo {
    width: auto;
    height: var(--h-main-height);
    padding: 16px 5%;
  }
  header .h-logo img {
    width: auto;
    height: 100%;
  }
  /* h-main */
  header .h-main {
    display: none;
  }
  a.h-btn-rec {
    font-size: 18px;
  }
  a.h-btn-entry {
    font-size: 20px;
  }

  /* nav */
  header nav {
    height: 100vh;
    padding: 130px 10% 30px;
  }
  header nav .gnav {
    --row: 2;
    --gap: 20px;
    gap: 50px var(--gap);
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 60px;
  }
  header nav .gnav a {
    width: calc((100% - var(--gap) * calc(var(--row) - 1)) / var(--row));
  }
  header nav .nav-btn-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  header nav a[class^="h-btn-"] {
    width: 100%;
    height: 60px;
  }
  /* hamburger */
  header .hamburger {
    width: calc(var(--size) * 1.2);
    top: 0;
    right: 0;
  }

  /* 詳細ページのみ */
  .rec-post-head nav .gnav {
    display: none;
  }
  .rec-post-head nav a.h-btn-interview {
    font-size: 16px;
    background: var(--color);
  }
  .rec-post-head .hamburger {
    display: block;
  }
}

/* -------------------------------------
フッター
-------------------------------------*/
footer {
  padding: 130px 0 50px;
}
footer .sec-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}

footer .f-logo {
  display: block;
  width: 380px;
  margin: 0 auto;
}

/* f-nav */
footer .f-nav {
  display: flex;
  justify-content: space-between;
}

/* f-add */
footer .f-add {
  display: grid;
  grid-template-columns: 44% auto;
  gap: 10%;
}

/* corp-site */
.corp-site {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.corp-site a {
  font-size: 14px;
  text-decoration: underline;
}
.corp-site a:hover {
  text-decoration: none;
}

/** コピーライト **/
.copyright {
  text-align: center;
}
.copyright small {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1;
}

@media screen and (max-width: 520px) {
  footer {
    padding: 80px 0 30px;
  }
  footer .sec-in {
    gap: 60px;
  }
  footer .f-logo {
    width: 60%;
  }

  /* f-nav */
  footer .f-nav {
    display: none;
  }

  /* f-add */
  footer .f-add {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  footer .f-add address p {
    font-size: 14px;
  }
  footer .f-add address p strong {
    font-size: 18px;
  }

  /* corp-site */
  .corp-site {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .corp-site a {
    font-size: 12px;
    text-decoration: underline;
  }
  .corp-site a:hover {
    text-decoration: none;
  }

  /** コピーライト **/
  .copyright {
    text-align: center;
  }
  .copyright small {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1;
  }
}

/* -------------------------------------
sp-fix
-------------------------------------*/
@media (max-width: 520px) {
  .sp-fix {
    width: 100vw;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3);
    z-index: 900;
  }
  .sp-fix a {
    display: block;
    line-height: 46px;
    width: 50%;
    font-size: 15px;
    text-align: center;
    background: var(--main-color);
  }
  .sp-fix a img {
    width: 20px;
    margin-right: 6px;
    vertical-align: middle;
  }
  .sp-fix a:last-child {
    background: #000;
    /*        border-left: 1px solid #fff;*/
  }
}

/**==============================================
採用TOP
==============================================**/
/* -------------------------------------
top-hero
-------------------------------------*/
.top-hero-wrap {
  margin-top: 20px;
  background: url(/recruit/images/hero-bg.png) no-repeat center bottom / cover;
}
.top-hero {
  text-align: center;
}
.hero-img01 {
  background: #fff;
}
.hero-img01 img {
  margin-left: 20%;
}
.hero-img02 {
  margin-top: -300px;
}
.hero-img02 img {
  margin-left: -10%;
}

@media (max-width: 520px) {
  .hero-img01 {
  }
  .hero-img01 img {
    width: 98%;
    margin: 0 auto;
  }
  .hero-img02 {
    margin-top: 10px;
  }
  .hero-img02 img {
    width: 420px;
    margin: 0 auto;
  }
}

/* -------------------------------------
top-who
-------------------------------------*/
.who {
  display: grid;
  grid-template-columns: 350px auto;
  gap: 8%;
  margin-top: -45px;
  padding-bottom: 70px;
}
.who .text {
  padding: 30px;
  color: #fff;
  position: relative;
}
.who .titA,
.who .titA i:first-letter {
  color: #fff;
}
.who .text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  mix-blend-mode: multiply;
}
.who .text p {
  position: relative;
}
.who .text p em {
  display: inline;
  font-size: inherit;
  color: var(--yellow_d);
  font-weight: var(--fw-b);
}

@media (max-width: 520px) {
  .who {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 50px;
  }
  .who .text {
    padding: 20px;
  }
}

/* -------------------------------------
top-AIに奪われない私たちの仕事
-------------------------------------*/
.our-works-list li h2 {
  display: grid;
  grid-template-columns: 80px auto;
  align-items: center;
  gap: 20px;
  margin: 15px 0;
  color: var(--type-color);
  font-weight: var(--fw-b);
}
.our-works-list li p strong {
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  .our-works-list {
    gap: 40px var(--gap);
  }
  .our-works-list li :is(h2, p) {
    width: 96%;
    margin-inline: auto;
    margin-right: 12px;
  }
  .our-works-list li h2 {
    grid-template-columns: 50px auto;
    gap: 15px;
    margin: 10px auto 15px;
    font-size: min(5.4vw, 22px);
  }
  .our-works-list li p strong {
    margin-bottom: 10px;
  }
}

/* -------------------------------------
top-充実のサポートと福利厚生
-------------------------------------*/
.benefit-list li {
  counter-increment: num 1;
  display: grid;
  grid-template-columns: 30% auto;
  align-items: center;
  gap: 15px;
  background: #fff;
  /* border: var(--border); */
  /* ボーダー */
  box-shadow: 0 0 0 0.5px black;
  padding: 1px;
}
.benefit-list li p {
  padding: 30px 20px;
}
.benefit-list li p strong {
  display: grid;
  grid-template-columns: 2.5em auto;
  margin-bottom: 15px;
  color: var(--green);
}
.benefit-list li p strong::before {
  content: "0" counter(num);
  font-family: var(--webf);
  font-size: 1.5em;
  line-height: 1;
}

@media (max-width: 520px) {
  .benefit-list li {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 20px;
  }
  .benefit-list li figure {
    padding: 0 10%;
  }
  .benefit-list li p {
    padding: 30px 20px;
  }
  .benefit-list li p strong {
    grid-template-columns: 2.2em auto;
    margin-bottom: 10px;
  }
}

/* -------------------------------------
top-キャリアアップと評価制度
-------------------------------------*/
.career-main {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 5%;
}
.career-main figure {
  margin-top: -90px;
}

/* career-ex */
.career-ex .balloon {
  width: 800px;
  margin: 50px auto 20px;
}
.career-ex-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-size: 1.1em;
  text-align: center;
}
.career-ex-list li img {
  max-width: 100%;
}

@media (max-width: 520px) {
  .career-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .career-main .text {
    order: 2;
  }
  .career-main p strong {
    font-size: 18px;
  }
  .career-main figure {
    order: 1;
    width: 90%;
    margin: 0 0 0 2%;
  }

  /* career-ex */
  .career-ex .balloon {
    width: 90%;
    margin: 50px auto 0;
  }
  .career-ex-list li {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    font-size: 0.75em;
  }
  .career-ex-list li img {
    max-width: 85%;
  }
}

/* -------------------------------------
top-数字で見るツルカメO&E
-------------------------------------*/
.number-list {
  gap: 0;
  border: var(--border);
}
.number-list li {
  width: 33.333%;
}
.number-list li:nth-child(-n + 3) {
  border-bottom: var(--border);
}
.number-list li:nth-child(3n - 1),
.number-list li:nth-child(3n - 2) {
  border-right: var(--border);
}
.number-list li .text {
  height: 170px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 20px;
  padding: 20px 20px 0;
  font-weight: var(--fw-b);
  line-height: 1.2;
  text-align: center;
}
.number-list li .text p:first-child {
  color: var(--green);
}
.number-list li .text p.num {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: flex-end;
}
.number-list li .text p.num em {
  font-size: 1.3em;
}
.number-list li .text p.num strong {
  margin: -0.15em;
  font-family: var(--webf);
  font-size: 4em;
  color: var(--red);
  font-weight: normal;
  line-height: 1;
}
.number-list li .text p.num b {
  font-size: 1.8em;
}
.number-list li .text p.sub {
  color: var(--red);
  font-weight: normal;
}

@media (max-width: 520px) {
  .number-list {
    width: 106%;
    margin-inline: -3%;
  }
  .number-list li {
    width: 50%;
  }
  .number-list li:nth-child(-n + 4) {
    border-bottom: var(--border);
  }
  .number-list li:nth-child(3n - 1),
  .number-list li:nth-child(3n - 2) {
    border-right: none;
  }
  .number-list li:nth-child(odd) {
    border-right: var(--border);
  }
  .number-list li .text {
    height: 140px;
    gap: 15px;
    padding: 20px 10px 0;
  }
  .number-list li .text p.num {
    gap: 15px;
  }
  .number-list li .text p.num em {
    font-size: 0.9em;
  }
  .number-list li .text p.num strong {
    margin: -0.15em;
    font-size: 2.7em;
  }
  .number-list li .text p.num b {
    font-size: 0.8em;
  }
  .number-list li .text p.sub {
    font-size: 0.7em;
  }
  .number-list li figure {
    overflow: hidden;
    width: 98%;
    margin: 0 auto 10px;
  }
  .number-list li figure img {
    scale: 1.2;
  }
}

/* -------------------------------------
top-求める人物像
-------------------------------------*/
.sec-personality{
  background-size: 100% auto;
}
.sec-personality .tit-wrap {
  display: flex;
  justify-content: space-between;
}
.sec-personality .tit-wrap p {
  margin-top: 30px;
}

/* personality-list */
.personality-list {
  --gap: 10px;
}
.personality-list li {
  background: #fff;
}
.personality-list li p {
  padding: 10px 20px 20px;
}
.personality-list li p strong {
  min-height: 3.5em;
  padding-left: 50px;
  font-weight: 400;
  background: url(/recruit/images/ico-check.svg) no-repeat top 5px left / 30px auto;
}
.personality-list li p strong mark {
  font-weight: var(--fw-b);
}

@media (max-width: 520px) {
  .sec-personality .tit-wrap {
    display: block;
  }
  .sec-personality .tit-wrap p {
    margin-top: 10px;
    font-size: 15px;
  }

  /* personality-list */
  .personality-list {
    gap: 10px;
  }
  .personality-list li {
    background: #fff;
  }
  .personality-list li figure {
    padding: 10px 12% 5px;
  }
  .personality-list li p {
    padding: 10px 20px 20px;
  }
  .personality-list li p strong {
    min-height: 28px;
    margin-bottom: 10px;
    padding-left: 45px;
    background-size: 28px auto;
    background-position: left center;
  }
}

/* -------------------------------------
top-メッセージ
-------------------------------------*/
.message-content {
  display: grid;
  grid-template-columns: 60% auto;
  gap: 7%;
}
.message-content figcaption {
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 520px) {
  .message-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 2%;
  }
  .message-content .text {
    order: 2;
  }
  .message-content .text p.strong {
    margin-bottom: 10px;
    font-size: min(5vw, 22px);
  }
  .message-content figure {
    order: 1;
  }
  .message-content figcaption {
    text-align: right;
    font-size: 0.9em;
  }
}

/* -------------------------------------
readmore
-------------------------------------*/
.readmore-wrapper {
  position: relative;
}
.readmore-wrapper input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.readmore-wrapper label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
}
/* 開いた時にグラデーションを消す */
.readmore-wrapper input:checked + label {
  background: inherit;
}
.readmore-wrapper input:checked + label {
  display: none; /* 閉じるボタンを消す場合コメントアウトを外す */
}
.readmore-wrapper .rm-container {
  overflow: hidden;
  height: 250px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.readmore-wrapper label:after,
.readmore-wrapper label::before {
  --height: 50px;
  --bottom: 20px;
  content: "";
  position: absolute;
  line-height: var(--height);
}
.readmore-wrapper label:after {
  content: "続きを見る";
  width: 220px;
  font-size: 14px;
  color: var(--color);
  background: #fff;
  border: var(--border);
  border-radius: var(--height);
  bottom: var(--bottom);
  z-index: 2;
}
.readmore-wrapper label::before {
  content: "↓";
  color: var(--red);
  position: absolute;
  bottom: var(--bottom);
  left: calc(50% + 3.5em);
  z-index: 3;
}
/*閉じる*/
.readmore-wrapper input:checked + label:after {
  content: "閉じる";
}
.readmore-wrapper input:checked + label:before {
  transform: scale(1, -1);
}
.readmore-wrapper input:checked ~ .rm-container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

/* -------------------------------------
top-社員インタビュー
-------------------------------------*/
/* interview-list */
.interview-list {
  gap: 0;
  max-width: 1800px;
  margin-inline: auto;
}
.interview-list li {
  overflow: hidden;
}
.interview-list li a {
  display: block;
  height: 600px;
  position: relative;
}
.interview-list li a i {
  display: block;
  width: min(25%, 140px);
  aspect-ratio: 1/1;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
}
.interview-list li a figure {
  width: 100%;
  height: 100%;
}
.interview-list li a figure img {
  object-position: center top;
}
.interview-list li a .text {
  content: "";
  position: absolute;
  inset: 65% 0 0 0;
  padding: 60px 40px 10px;
  color: #fff;
  background: RGBA(0, 0, 0, 0.5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  transition: var(--transition);
}
.interview-list li a:hover .text {
  background: RGBA(0, 0, 0, 0.5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
.interview-list li a .text .staff-info {
  display: block;
  margin-top: 15px;
}
.interview-list li a .text .more {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

/* sec-top-interview */
.sec-top-interview .interview-list li {
  width: 50%;
}

@media (max-width: 520px) {
  /* interview-list */
  .sec-top-interview .interview-list li {
    width: 100%;
  }
  .interview-list li a {
    height: 420px;
  }
  .interview-list li a i {
    left: 10px;
    top: 10px;
  }
  .interview-list li a .text {
    inset: 50% 0 0 0;
    padding: 60px 15px 10px;
  }
  .interview-list li a .text p {
    font-size: 15px;
  }
  .interview-list li a .text .staff-info {
    margin-top: 10px;
    font-size: 0.9em;
  }
  .interview-list li a .text .more {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}

/* -------------------------------------
top-よくあるご質問
-------------------------------------*/
/* faq-list */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.faq-list dl {
  --ico-width: 80px;
  background-color: #fff;
  border: var(--border_l);
  overflow: hidden;
}
.faq-list dt {
  padding: 25px 60px 25px var(--ico-width);
  font-size: 20px;
  font-weight: var(--fw-b);
  line-height: 1.4;
  position: relative;
  cursor: pointer;
}
.faq-list dt::before,
.faq-list dd::before {
  width: var(--ico-width);
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  font-family: var(--webf);
  font-size: 30px;
  position: absolute;
  left: 0;
  top: 0;
}
.faq-list dt::before {
  content: "Q";
  color: var(--green);
  font-weight: normal;
}
.faq-list dt::after {
  --size: 28px;
  content: "+";
  width: var(--size);
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  color: var(--green);
  font-size: 18px;
  font-weight: bold;
  line-height: var(--size);
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 50%;
  translate: 0 -50%;
  transition: var(--transition);
}
.faq-list dt.on::after {
  content: "-";
  color: #fff;
  background: var(--green);
}
.faq-list dd {
  max-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}
.faq-list dd::before {
  content: "A";
  color: var(--red);
}
.faq-list dd::after {
  content: "";
  display: block;
  width: 94%;
  height: 1px;
  position: absolute;
  left: 3%;
  top: 0;
  background: var(--bg-gray);
}
.faq-list dd p {
  padding: 25px 50px 25px var(--ico-width);
}

@media (max-width: 520px) {
  .faq-list dl {
    --ico-width: 50px;
  }
  .faq-list dt {
    padding: 15px 50px 15px var(--ico-width);
    font-size: 15px;
  }
  .faq-list dt::before,
  .faq-list dd::before {
    font-size: 24px;
    top: 2px;
  }
  .faq-list dt::after {
    --size: 24px;
    font-size: 15px;
    right: 10px;
  }
  .faq-list dd::before {
    top: 6px;
  }
  .faq-list dd p {
    padding: 15px 20px 15px var(--ico-width);
    font-size: 15px;
  }
}

/* -------------------------------------
top-募集職種一覧
-------------------------------------*/
/* recruit-list */
.recruit-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.recruit-list li a {
  display: grid;
  grid-template-columns: 55% auto;
  background: #fff;
  border: var(--border_l);
}
.recruit-list li a .text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  padding: 20px;
  line-height: 1.5;
}
.recruit-list li a .text .list-head {
  display: grid;
  grid-template-columns: 80px auto;
  gap: 20px;
}
.recruit-list li a .text .list-head h3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.recruit-list li a .text .list-head h3 strong {
  padding-bottom: 6px;
  border-bottom: var(--border_l);
}
.recruit-list li a .text .rec-tag {
  padding-right: 120px;
}

/* rec-tag */
.rec-tag {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}
.rec-tag li {
  padding: 0 1em;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  line-height: 30px;
  background: var(--gray);
}

@media (max-width: 520px) {
  /* recruit-list */
  .recruit-list {
    gap: 20px;
  }
  .recruit-list li a {
    grid-template-columns: 1fr;
  }
  .recruit-list li a .text {
    order: 2;
    padding: 16px 15px 20px;
  }
  .recruit-list li a .text .list-head {
    grid-template-columns: 60px auto;
    gap: 20px;
  }
  .recruit-list li a .text .list-head i {
    margin-left: -5px;
  }
  .recruit-list li a .text .list-head h3 {
    gap: 5px;
  }
  .recruit-list li a .text .list-head h3 strong {
    padding-bottom: 5px;
    font-size: min(5vw, 24px);
    font-size: min(4.6vw, 20px);
  }
  .recruit-list li a .text .list-head h3 em {
    font-size: 14px;
  }
  .recruit-list li a .text p {
    margin-top: 5px;
    font-size: 12px;
  }
  .recruit-list li a .text .rec-tag {
    padding-right: 0;
  }
  .recruit-list li a .text .more span {
    padding-top: 0;
  }
  .recruit-list li a figure {
    order: 1;
  }

  /* rec-tag */
  .rec-tag li {
    padding: 0 0.8em;
    font-size: 0.75em;
    line-height: 26px;
  }
}

/* -------------------------------------
top-slide
-------------------------------------*/
/* autoscroll-slide-list */
.autoscroll-slide-list li {
  aspect-ratio: 430/330;
  height: 100%;
}
.autoscroll-slide-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**==============================================
採用詳細
==============================================**/
/* -------------------------------------
詳細-hero
-------------------------------------*/
.hero {
  display: grid;
  grid-template-columns: auto 50%;
  gap: 3%;
  padding-bottom: 60px;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 52% 0 0 0;
  background: url(/recruit/images/hero-bg.png) no-repeat center bottom / cover;
  z-index: 0;
}
.hero > * {
  position: relative;
}
.hero .text {
  width: fit-content;
  max-width: 600px;
  margin-left: auto;
  padding-left: 40px;
}
.hero .text .hero-head {
  height: 330px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 20px;
}
.hero .text .hero-head i {
  width: 130px;
}
.hero .text .hero-head h2 {
  color: var(--type-color);
  line-height: 1.2;
}
.hero .text p {
  margin-top: 50px;
  color: #fff;
}
.hero .text p strong.strong {
  line-height: 1.4;
}
.hero figure {
  height: 580px;
}
.hero figure img {
  object-position: center top;
}

@media (max-width: 520px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 50px;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
    background: url(/recruit/images/hero-bg.png) no-repeat center bottom / cover;
    z-index: 0;
  }

  .hero .text {
    order: 2;
    width: 100%;
    padding-left: 0;
  }
  .hero .text .hero-head {
    height: unset;
    display: grid;
    grid-template-columns: 70px auto;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 0 0 10px;
    background: #fff;
  }
  .hero .text .hero-head i {
    width: 100%;
    scale: 1.3;
    transform-origin: bottom center;
  }
  .hero .text .hero-head h2 {
    color: var(--type-color);
    line-height: 1.2;
  }
  .hero .text p {
    margin: 30px 20px 0;
  }
  .hero .text p strong.strong {
    line-height: 1.4;
  }
  .hero figure {
    order: 1;
    height: 90vw;
  }
}

/* -------------------------------------
詳細-主な仕事内容
-------------------------------------*/
.sec-business .tit-wrap {
  display: grid;
  grid-template-columns: 320px auto;
}
.sec-business .tit-wrap p {
  margin-top: 30px;
}

@media (max-width: 520px) {
  .sec-business .tit-wrap {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------
詳細-社員インタビュー
-------------------------------------*/
.sec-interview {
  background-size: 100% auto;
}
/* interview-head */
.interview-head {
  display: grid;
  grid-template-columns: 50% auto;
  gap: 5%;
  margin-bottom: 50px;
}
.interview-head figure {
  height: 600px;
}
.interview-head figure img {
  object-position: center top;
}
.interview-head .tit-wrap {
  width: min(85%, 600px);
  margin-top: 50px;
}
.interview-head .tit-wrap p strong.strong {
  line-height: 1.7;
}

/* interview-main */
.interview-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.interview-main .interview-content {
  counter-increment: num 1;
}
.interview-main .interview-content .que {
  display: flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1.5;
  font-weight: var(--fw-b);
  /* border-bottom: 1px solid var(--green); */
}
.interview-main .interview-content .que::before {
  content: "Q" counter(num) ".";
  font-family: var(--webf);
  color: var(--red);
  font-size: 2em;
  font-weight: normal;
  vertical-align: baseline;
}
.interview-main .interview-content .ans {
  display: flex;
  gap: 5%;
  padding: 0 10px;
}
.interview-main .interview-content .ans .richtext {
  flex: 1;
}
.interview-main .interview-content .ans figure {
  width: 35%;
}
.interview-main .interview-content .ans figure img {
  width: 100%;
}

/* interview-message */
.interview-message {
  display: flex;
  gap: 5%;
  margin-top: 30px;
}
.interview-message .text {
  flex: 1;
}
.interview-message .text .strong {
  padding-bottom: 10px;
  color: var(--green);
  border-bottom: var(--border);
}
.interview-message figure {
  width: 40%;
}

@media (max-width: 520px) {
  .sec-interview {
    background-size: 100% 170vw;
  }
  /* interview-head */
  .interview-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }
  .interview-head figure {
    order: 2;
    width: 92%;
    height: 80vw;
  }
  .interview-head .tit-wrap {
    display: contents;
  }
  .interview-head .tit-wrap h2 {
    order: 1;
    margin: 0 6% 40px;
  }
  .interview-head .tit-wrap p {
    order: 3;
    margin: 20px 6% 0;
  }
  .interview-head .tit-wrap p strong.strong {
    line-height: 1.5;
  }

  /* interview-main */
  .interview-main {
    gap: 20px;
  }
  .interview-main .interview-content .que {
    padding-bottom: 10px;
  }
  .interview-main .interview-content .que::before {
    font-size: 1.8em;
  }
  .interview-main .interview-content .ans {
    flex-direction: column-reverse;
    padding: 0 4px 0 7px;
  }
  .interview-main .interview-content .ans figure {
    width: 98%;
    margin: 0 0 20px;
  }

  .interview-message {
    flex-direction: column-reverse;
    gap: 0;
    margin-top: 20px;
  }
  .interview-message .text {
    flex: 1;
    padding: 25px 20px;
    background: rgb(from var(--green) r g b / 0.2);
  }
  .interview-message .text .strong {
    padding-bottom: 15px;
    font-size: 1.1rem;
    border-bottom: 3px solid #fff;
  }
  .interview-message .text .richtext {
    padding: 0 5px;
  }
  .interview-message figure {
    width: 100%;
  }
}

/* other-interview */
.other-interview {
  padding-inline: 5%;
}
.other-interview .ot-tit::first-letter {
  display: inline-block;
  margin-right: 2px;
  color: var(--red);
  font-size: 1.5em;
}
.other-interview .interview-list {
  --gap: 10px;
}
.other-interview .interview-list li {
  width: 33.333%;
}
.other-interview .interview-list li a {
  height: 480px;
}
.other-interview .interview-list li a .text {
  padding: 40px 20px 10px;
}
.other-interview .interview-list li a .text .staff-info {
  margin-top: 5px;
  font-size: 0.8em;
}
.other-interview .interview-list li a .text .more {
  bottom: 14px;
}

@media (max-width: 520px) {
  /* other-interview */
  .other-interview .interview-list {
    gap: 0;
  }
  .other-interview .interview-list li {
    width: 100%;
  }
  .other-interview .interview-list li a {
    height: 340px;
  }
  .other-interview .interview-list li a .text {
    padding: 30px 20px 10px;
  }
}

/* -------------------------------------
詳細-sec-summary
-------------------------------------*/
.has-section:not(:has(section)) {
  display: none;
}
.sec-summary {
  background-size: 100% auto;
}

/* -------------------------------------
詳細-エントリーフォーム
-------------------------------------*/
#entry form input[type="text"],
#entry form textarea,
#entry form select {
  height: 50px;
  padding-inline: 10px;
}
#entry .require {
  margin-left: 20px;
  background: var(--red);
  position: static;
}
#entry .tableA table,
#entry .tableA tr:last-child {
  border: none;
}
#entry .tableA tr {
  border-bottom: 3px solid var(--bg-green);
}
#entry .tableA th {
  width: 20%;
  padding-right: 10px;
  color: var(--color);
  vertical-align: middle;
}
#entry .tableA td {
  padding-left: 10px;
}

/*label 横並び*/
#entry form label {
  display: inline-block;
  margin: 5px 10px;
}
#entry form label [type="radio"] {
  margin-right: 5px;
}

@media (max-width: 520px) {
  .owlet-form div.tableA {
    width: 100%;
    margin-inline: auto;
  }
  #entry .tableA th {
    width: 30%;
  }
  #entry .require {
    margin-left: 20px;
  }
  #entry .tableA form th {
    padding: 25px 15px 10px;
  }
  #entry .tableA form td {
    padding: 0 15px 20px;
  }
}
/*layout:12*/