@charset "UTF-8";
@keyframes fold-odd-0 {
  from {
    z-index: 6;
  }
  to {
    z-index: 5;
  }
}
@keyframes fold-odd-1 {
  from {
    z-index: 5;
  }
  to {
    z-index: 6;
  }
}
@keyframes fold-odd-2 {
  from {
    margin-left: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 15.1rem;
    margin-left: 0;
    margin-right: 19.5rem;
    opacity: 1;
  }
}
@keyframes fold-odd-3 {
  from {
    margin-left: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 30.2rem;
    margin-left: 19.5rem;
    opacity: 1;
  }
}
@keyframes fold-odd-4 {
  from {
    margin-left: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 15.1rem;
    margin-left: 58.5rem;
    opacity: 1;
  }
}
@keyframes fold-odd-5 {
  from {
    width: 36rem;
    height: 28rem;
    opacity: 0;
  }
  to {
    width: 75.3rem;
    height: 58.2rem;
    opacity: 1;
  }
}
@keyframes unfold-odd-0 {
  from {
    z-index: 5;
  }
  to {
    z-index: 6;
  }
}
@keyframes unfold-odd-1 {
  from {
    z-index: 6;
  }
  to {
    z-index: 5;
  }
}
@keyframes unfold-odd-2 {
  from {
    margin-top: 15.1rem;
    margin-left: 0;
    margin-right: 19.5rem;
    opacity: 1;
  }
  to {
    margin-left: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-odd-3 {
  from {
    margin-top: 30.2rem;
    margin-left: 19.5rem;
    opacity: 1;
  }
  to {
    margin-left: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-odd-4 {
  from {
    margin-top: 15.1rem;
    margin-left: 58.5rem;
    opacity: 1;
  }
  to {
    margin-left: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-odd-5 {
  from {
    width: 75.3rem;
    height: 58.2rem;
    opacity: 1;
  }
  to {
    width: 36rem;
    height: 28rem;
    opacity: 0;
  }
}
@keyframes fold-even-0 {
  from {
    z-index: 6;
  }
  to {
    z-index: 5;
  }
}
@keyframes fold-even-1 {
  from {
    z-index: 5;
  }
  to {
    z-index: 6;
  }
}
@keyframes fold-even-2 {
  from {
    margin-right: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 15.1rem;
    margin-right: 0;
    margin-left: 19.5rem;
    opacity: 1;
  }
}
@keyframes fold-even-3 {
  from {
    margin-right: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 30.2rem;
    margin-right: 19.5rem;
    opacity: 1;
  }
}
@keyframes fold-even-4 {
  from {
    margin-right: 19.5rem;
    opacity: 0;
  }
  to {
    margin-top: 15.1rem;
    margin-right: 58.5rem;
    opacity: 1;
  }
}
@keyframes fold-even-5 {
  from {
    width: 36rem;
    height: 28rem;
    opacity: 0;
  }
  to {
    width: 75.3rem;
    height: 58.2rem;
    opacity: 1;
  }
}
@keyframes unfold-odd-0 {
  from {
    z-index: 5;
  }
  to {
    z-index: 6;
  }
}
@keyframes unfold-odd-1 {
  from {
    z-index: 6;
  }
  to {
    z-index: 5;
  }
}
@keyframes unfold-even-2 {
  from {
    margin-top: 15.1rem;
    margin-right: 0;
    margin-left: 19.5rem;
    opacity: 1;
  }
  to {
    margin-right: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-even-3 {
  from {
    margin-top: 30.2rem;
    margin-right: 19.5rem;
    opacity: 1;
  }
  to {
    margin-right: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-even-4 {
  from {
    margin-top: 15.1rem;
    margin-right: 58.5rem;
    opacity: 1;
  }
  to {
    margin-right: 19.5rem;
    opacity: 0;
  }
}
@keyframes unfold-even-5 {
  from {
    width: 75.3rem;
    height: 58.2rem;
    opacity: 1;
  }
  to {
    width: 36rem;
    height: 28rem;
    opacity: 0;
  }
}
@keyframes down {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 30.2rem;
  }
}
@keyframes up {
  from {
    margin-top: 30.2rem;
  }
  to {
    margin-top: 0;
  }
}
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption,
ruby,
rt {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

/* ユニバーサルリセッティング */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html,
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

li {
  font-size: 1.2rem;
  line-height: 2rem;
}

p {
  font-size: 1.2rem;
  line-height: 2rem;
}

img {
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
  /* レスポンシブ対応を楽にするためにデフォルトフォントサイズを元にremでフォントサイズやパディング等を設定する方針とする。
  そのため、pd2remの計算がしやすいように、デフォルトフォントサイズを10pxとする。
  しかし、フォントサイズのpx指定はユーザーの設定を上書きしフォントサイズを固定してしまうためパーセント表記としたい。。（目が悪いユーザーはデフォルトフォントサイズを大きくしている場合がある）
  16px:100% = 10px:62.5%であることから62,5を指定。 */
}

body {
  box-sizing: border-box;
  display: block;
}

@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}
body {
  font-family: "Zen Old Mincho", "Hind Siliguri", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: #252525;
}

.btn--white {
  background-color: #fff;
  color: #777;
}
.btn--white::after {
  background-color: #fff;
}
.btn--animated {
  animation: moveUp 0.5s ease-out 0.75s;
  /* アニメーションが始まるまで0.75秒間待つ */
  animation-fill-mode: backwards;
  /* アニメーションが始まるまでの間の0.75秒間の間にどのようなスタイルで待つかを指定する */
}
.btn:link, .btn:visited {
  font-size: 1.6rem;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 10rem;
  padding: 1.5rem 4rem;
  transition: all 0.2s;
  position: relative;
}
.btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 1rem rgba(37, 37, 37, 0.2);
}
.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}
.btn:active {
  transform: translateY(0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(37, 37, 37, 0.2);
}
.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -20vh;
}

.recruit {
  font-family: "Zen Antique", sans-serif;
  background-color: transparent;
  background-image: none;
}
.recruit h1,
.recruit h2,
.recruit h3 {
  font-family: "Zen Antique", sans-serif;
}
.recruit section {
  margin-top: 0;
  padding-top: 3rem;
}
.recruit a {
  color: white;
}
.recruit section:not(.first-view) h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  font-family: "Sen", sans-serif;
}
.recruit section:not(.first-view) .text-box {
  background-color: transparent;
  text-align: left;
  margin-bottom: 0.5rem;
}
.recruit section:not(.first-view) .text-box .content {
  padding: 0 0 2rem 0;
}
.recruit section:not(.first-view) .text-box .content p {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 28px;
}
.recruit section:not(.first-view) .button-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.recruit section:not(.first-view) .button-wrapper .button-box {
  width: 90%;
  background-color: #d9d9d9;
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.recruit section:not(.first-view) .button-wrapper .button-box a {
  color: #000000;
  font-family: Noto Sans JP;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0em;
  padding: 0.9rem 0;
}
.recruit header {
  background-color: transparent;
  justify-content: left;
  align-items: start;
  background-color: #ffffff;
  height: auto;
}
.recruit header .logo-box {
  width: 14rem;
  margin-top: 1.5rem;
  margin-left: 1rem;
  text-align: left;
}
.recruit header .logo-box a {
  display: inline-block;
}
.recruit header .logo-box img {
  width: 100%;
}
.recruit header .right-box {
  width: calc(100% - 14rem);
  display: flex;
  justify-content: right;
}
.recruit header .right-box .entry-box {
  background-color: #3d3d3d;
  color: white;
  text-align: center;
  margin: 0 0 1rem 0;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  font-family: "Noto Sans Tai Le", sans-serif;
}
.recruit header .right-box .entry-box-top {
  background-color: #3d3d3d;
  color: white;
  text-align: center;
  margin: 1rem 1.5rem 1rem 0;
  padding: 1.5rem 1rem 1.5rem 1rem;
  font-family: "Noto Sans Tai Le", sans-serif;
}
.recruit main .first-view {
  background-image: url(../img/recruit-bg.png);
  padding-bottom: 2rem;
}
.recruit main .first-view .concept {
  background-image: url(../img/recruit-first-view.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right 50% bottom 50%;
  margin-top: 3.8rem;
  padding: 10rem 0 10rem 0;
  width: 100%;
  display: flex;
}
.recruit main .first-view .concept .message-box {
  margin: 0 auto;
  margin-top: 1rem;
}
.recruit main .first-view .concept .message-box .concept-text {
  font-size: 2.2rem;
  font-family: "Zen Antique", sans-serif;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0rem;
}
.recruit main .first-view .concept .message-box .concept-text span.main {
  display: inline-block;
  padding-bottom: 0.3rem;
  padding: 0 0 0.3rem 0.3rem;
  background-color: #2d2d2d;
  color: #ffffff;
  font-size: 3.6rem;
  margin-right: 0.1rem;
  letter-spacing: 0.45rem;
  display: inline-block;
  line-height: 3.8rem;
}
.recruit main .first-view .concept .message-box .concept-text span.sub {
  display: inline-block;
  font-size: 1.8rem;
}
.recruit main .first-view .concept .message-box .recruit-message {
  margin-top: 0.8rem;
  font-size: 1.7rem;
  font-family: "Shippori Mincho", sans-serif;
  text-align: left;
  letter-spacing: 0rem;
  padding-right: 1rem;
}
.recruit main .first-view .type-of-occupation a {
  color: white;
}
.recruit main .first-view .type-of-occupation .occupation-row {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}
.recruit main .first-view .type-of-occupation .occupation-row:first-child {
  margin-top: 4rem;
}
.recruit main .first-view .type-of-occupation .occupation-row:last-child {
  margin-bottom: 2rem;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper {
  position: relative;
  width: 40%;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper::after {
  content: "";
  width: 100%;
  position: absolute;
  height: 100%;
  top: -0.9rem;
  right: -0.9rem;
  border-style: solid;
  pointer-events: none;
  border-color: white;
  border-width: 0.5rem 0.5rem 0 0;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box {
  border: 0.5rem solid white;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .occupation a {
  padding: 1.2rem 0 0.3rem 0.5rem;
  padding-right: 0.6rem;
  display: block;
  color: #332d2d;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .occupation a::after {
  content: "";
  /*何も入れない*/
  display: inline-block;
  width: 1.3rem;
  height: 1.1rem;
  margin-left: 0.5rem;
  background-image: url("../img/recruit-arrow.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right 50% bottom 50%;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box a {
  font-size: 2.1rem;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .concierge a,
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .part-time-job a {
  font-size: 1.2rem;
  font-weight: 600;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .part-time-job a {
  padding-top: 0.6rem;
}
.recruit main .first-view .type-of-occupation .occupation-row .occupation-box-wrapper .occupation-box .concierge a {
  padding-top: 2.1rem;
}
.recruit main .representative-message {
  text-align: center;
}
.recruit main .representative-message .content {
  text-align: center;
}
.recruit main .salon p {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 0.5rem;
}
.recruit main .salon .swiper {
  width: 80%;
  overflow: visible;
}
.recruit main .salon .swiper .swiper-wrapper {
  position: relative;
}
.recruit main .salon .swiper .swiper-wrapper .swiper-slide {
  transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1), opacity 1s;
}
.recruit main .salon .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
}
.recruit main .salon .swiper .swiper-wrapper .swiper-slide:not(.swiper-slide-visible) {
  pointer-events: none;
  opacity: 0.3;
}
.recruit main .salon .swiper .swiper-button-next {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  color: #ddd;
}
.recruit main .salon .swiper .swiper-button-next::after {
  font-size: 2rem;
}
.recruit main .salon .swiper .swiper-button-prev {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  color: #ddd;
}
.recruit main .salon .swiper .swiper-button-prev::after {
  font-size: 2rem;
}
.recruit main .salon .swiper .swiper-pagination .swiper-pagination-bullet {
  border-radius: 0;
  margin: 0 calc(var(--swiper-pagination-bullet-horizontal-gap, 4px) * 1.4);
  width: calc(var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)) * 2);
  height: calc(var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)) / 6);
}
.recruit main .salon .swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: #ddd;
}
.recruit main .FAQ .faqs-wrapper {
  margin-top: 0.5rem;
}
.recruit main .FAQ .faqs-wrapper button,
.recruit main .FAQ .faqs-wrapper p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
}
.recruit main .FAQ .faqs-wrapper .faq-box {
  /* Style the buttons that are used to open and close the accordion panel */
}
.recruit main .FAQ .faqs-wrapper .faq-box .accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  line-height: 0.5rem;
  padding: 1rem 1rem 1rem 1rem;
}
.recruit main .FAQ .faqs-wrapper .faq-box .accordion .question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recruit main .FAQ .faqs-wrapper .faq-box .accordion .question:after {
  content: "➕";
  /* Unicode character for "plus" sign (+) */
  display: inline-block;
  font-size: 1.2rem;
  color: #777;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  animation: 0.3s linear 0s 1 normal both close-add-icon;
}
.recruit main .FAQ .faqs-wrapper .faq-box .accordion.active .question:after {
  animation: 0.3s linear 0s 1 normal both open-add-icon;
}
.recruit main .FAQ .faqs-wrapper .faq-box .panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.recruit main .FAQ .faqs-wrapper .faq-box .panel p {
  margin-block-start: 0.85em;
  margin-block-end: 0.85em;
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}
.recruit footer {
  margin-top: 8rem;
}

@keyframes open-add-icon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
@keyframes close-add-icon {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes open-answer {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    z-index: 100;
  }
}
@keyframes close-answer {
  from {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  to {
    display: none;
    opacity: 0;
    transform: translateY(-100%);
  }
}
.recruit-occupation header {
  background-image: url(../img/recruit-bg.png);
}
.recruit-occupation .first-view {
  text-align: left;
  color: white;
}
.recruit-occupation .first-view .occupation-title-box {
  font-family: "Zen Antique";
  margin-top: 5.5rem;
  margin-left: 2.3rem;
  text-align: left;
}
.recruit-occupation .first-view .occupation-title-box .term {
  font-weight: 500;
  font-size: 1.3rem;
}
.recruit-occupation .first-view .occupation-title-box .occupation-title {
  font-size: 5.5rem;
  text-align: left;
}
.recruit-occupation .first-view .message-box {
  margin-left: 2.3rem;
  margin-top: 1.2rem;
  position: relative;
}
.recruit-occupation .first-view .message-box .recruit-message-ruby {
  position: absolute;
  top: -1rem;
  color: #202020;
  font-size: 1rem;
  width: fit-content;
  margin-left: 15rem;
}
.recruit-occupation .first-view .message-box .recruit-message {
  font-size: 3rem;
  color: #202020;
}
.recruit-occupation .first-view .target-number-box {
  padding: 0.2rem 2.3rem 0.2rem 2.3rem;
  margin-top: 1.3rem;
  width: 80%;
  background-color: #dadada;
  color: #332d2d;
}
.recruit-occupation .first-view .target-number-box p {
  font-weight: 500;
  font-size: 1.2rem;
}
.recruit-occupation .process-of-recruit {
  padding-top: 1.5rem;
  background: linear-gradient(180deg, #d2c6c6 -241.46%, rgba(255, 218, 184, 0) 100%);
  text-align: left;
  margin-bottom: 4rem;
}
.recruit-occupation .process-of-recruit .section-title {
  font-size: 2.4rem;
  margin-left: 2rem;
}
.recruit-occupation .process-of-recruit .process-description-box {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 2rem;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper {
  display: flex;
  justify-content: start;
  margin-left: 2%;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .dummy-box {
  width: 10%;
  border-style: solid;
  border-color: rgba(255, 105, 105, 0.6980392157);
  border-width: 0 0 0.2rem 0;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .process-box-text {
  border-style: solid;
  border-color: rgba(255, 105, 105, 0.6980392157);
  border-width: 0 0 0 0.2rem;
  padding-left: 1rem;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .process-box-text p:not(:last-child) {
  margin-bottom: 2rem;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .process-box-text p {
  font-family: "Sawarabi Mincho", sans-serif;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .process-box-image {
  width: 27%;
  margin-left: 8%;
  text-align: right;
}
.recruit-occupation .process-of-recruit .process-contents-wrapper .process-box-image img:nth-child(1) {
  width: 100%;
  margin-top: 10rem;
}
.recruit-occupation .requirements {
  padding-top: 0.1rem;
  text-align: left;
}
.recruit-occupation .requirements .section-title {
  font-size: 2.4rem;
  margin-left: 2rem;
}
.recruit-occupation .requirements .requirements-contents-wrapper {
  display: flex;
  justify-content: center;
}
.recruit-occupation .requirements table {
  width: 85%;
  border-collapse: collapse;
  line-height: 2.4rem;
}
.recruit-occupation .requirements table td {
  padding: 0;
}
.recruit-occupation .requirements table tr td:first-child {
  padding: 1.2rem 0 0 1.8rem;
  vertical-align: bottom;
  font-size: 1.3rem;
  font-family: "Sawarabi Mincho", sans-serif;
  font-weight: 500;
  background-color: #d9d9d9;
  width: 35%;
  border-style: solid;
  border-color: #ffeaea;
  border-width: 0 0 0.3rem 0;
}
.recruit-occupation .requirements table tr td:nth-child(2) {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  padding: 1rem 0 0 1.8rem;
  border-style: solid;
  border-color: #ffeaea;
  border-width: 0 0 0.3rem 0;
}

.recruit-concierge .first-view .occupation-title-box .occupation-title {
  font-size: 4rem;
}

.recruit-part-time-job .first-view .occupation-title-box .occupation-title {
  font-size: 4rem;
}

body {
  background-image: url(../img/background.jpg);
  position: relative;
}

h1 {
  font-family: "Hind Siliguri", sans-serif;
  font-weight: 300;
  font-size: 2rem;
}

h2 {
  font-family: "Hind Siliguri", sans-serif;
  font-weight: 300;
  font-size: 2.5rem;
}

p {
  font-family: "Zen Old Mincho", sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

a {
  font-weight: 500;
  font-size: 1.4rem;
}

header {
  height: 6.25rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fbedc4;
  display: flex;
  align-items: center;
  justify-content: center;
}
header-title-box {
  padding: 1rem 4rem 2rem 4rem;
}
header .logo-box {
  width: 18rem;
  text-align: center;
}
header .logo-box a {
  display: inline-block;
}
header .logo-box img {
  width: 100%;
}

.shop-list {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
}

.outer-diamond-wrapper {
  height: 111rem;
  position: relative;
}

.outer-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-1 {
  background-image: url(../img/beauty-park-bokashi-light.jpg);
}
.shop-2 {
  background-image: url(../img/cut-plaza-bokashi-light.jpg);
}
.shop-3 {
  background-image: url(../img/parfait-bokashi-light.jpg);
}
.shop-4 {
  background-image: url(../img/chouchou-bokashi-light.jpg);
}
.shop-5 {
  background-image: url(../img/emblem-bokashi-light.jpg);
}

.diamond {
  display: inline-block;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 36rem;
  height: 28rem;
  background-color: #fff;
  background-size: cover;
  cursor: pointer;
}
.diamond-0 {
  position: absolute;
  top: -7.8rem;
  margin-right: 19.5rem;
}
.diamond-0-0 {
  z-index: 4;
  text-align: center;
}
.diamond-0 .title-container {
  margin-right: 0rem;
}
.diamond-0 .inner-diamond {
  margin-top: 5rem;
  background-color: #fcf4d7;
}
.diamond-0 .inner-diamond .site-title {
  display: inline-block;
  width: 100%;
  font-size: 1.8rem;
}
.diamond-0 .inner-diamond .site-title span {
  display: inline-block;
  margin-top: 0.2rem;
  margin-left: 3rem;
}
.diamond-0 .inner-diamond .site-description {
  margin-right: 5rem;
  font-size: 1.2rem;
  line-height: 1.9rem;
  text-align: center;
}
.diamond-0 .inner-diamond .site-description p {
  color: #252525;
  width: fit-content;
}
.diamond-1 {
  position: absolute;
  top: 7.3rem;
  margin-left: 19.5rem;
}
.diamond-1-0 {
  z-index: 6;
  text-align: center;
}
.diamond-1-2 {
  z-index: 4;
  background-color: #ffdfdf;
}
.diamond-1-2.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-2;
}
.diamond-1-2.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-2;
}
.diamond-1-3 {
  z-index: 3;
  background-color: #d7d7d7;
}
.diamond-1-3.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-3;
}
.diamond-1-3.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-3;
}
.diamond-1-4 {
  z-index: 2;
  background-color: #252525;
  display: flex;
  align-items: center;
  color: #fff;
}
.diamond-1-4 span {
  margin-left: 2rem;
}
.diamond-1-4.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-4;
}
.diamond-1-4.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-4;
}
.diamond-1-5 {
  z-index: 1;
  cursor: default;
  pointer-events: none;
}
.diamond-1-5.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-5;
}
.diamond-1-5.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-5;
}
.diamond-2 {
  position: absolute;
  top: 22.4rem;
  margin-right: 19.5rem;
}
.diamond-2.down {
  animation: 0.5s linear 0s 1 normal both down;
}
.diamond-2.up {
  animation: 0.5s linear 0s 1 normal both up;
}
.diamond-2-0 {
  z-index: 6;
  text-align: center;
}
.diamond-2-2 {
  z-index: 4;
  background-color: #ffdfdf;
}
.diamond-2-2.active {
  animation: 0.5s linear 0s 1 normal both fold-even-2;
}
.diamond-2-2.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-2;
}
.diamond-2-3 {
  z-index: 3;
  background-color: #d7d7d7;
}
.diamond-2-3.active {
  animation: 0.5s linear 0s 1 normal both fold-even-3;
}
.diamond-2-3.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-3;
}
.diamond-2-4 {
  z-index: 2;
  background-color: #252525;
  display: flex;
  align-items: center;
  justify-content: end;
  color: #fff;
}
.diamond-2-4 span {
  margin-right: 2rem;
}
.diamond-2-4.active {
  animation: 0.5s linear 0s 1 normal both fold-even-4;
}
.diamond-2-4.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-4;
}
.diamond-2-5 {
  z-index: 1;
  cursor: default;
  pointer-events: none;
}
.diamond-2-5.active {
  animation: 0.5s linear 0s 1 normal both fold-even-5;
}
.diamond-2-5.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-5;
}
.diamond-3 {
  position: absolute;
  top: 37.5rem;
  margin-left: 19.5rem;
}
.diamond-3.down {
  animation: 0.5s linear 0s 1 normal both down;
}
.diamond-3.up {
  animation: 0.5s linear 0s 1 normal both up;
}
.diamond-3-0 {
  z-index: 6;
  text-align: center;
}
.diamond-3-2 {
  z-index: 4;
  background-color: #ffdfdf;
}
.diamond-3-2.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-2;
}
.diamond-3-2.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-2;
}
.diamond-3-3 {
  z-index: 3;
  background-color: #d7d7d7;
}
.diamond-3-3.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-3;
}
.diamond-3-3.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-3;
}
.diamond-3-4 {
  z-index: 2;
  background-color: #252525;
  display: flex;
  align-items: center;
  color: #fff;
}
.diamond-3-4 span {
  margin-left: 2rem;
}
.diamond-3-4.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-4;
}
.diamond-3-4.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-4;
}
.diamond-3-5 {
  z-index: 1;
  cursor: default;
  pointer-events: none;
}
.diamond-3-5.active {
  animation: 0.5s linear 0s 1 normal both fold-odd-5;
}
.diamond-3-5.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-odd-5;
}
.diamond-4 {
  position: absolute;
  top: 52.6rem;
  margin-right: 19.5rem;
}
.diamond-4.down {
  animation: 0.5s linear 0s 1 normal both down;
}
.diamond-4.up {
  animation: 0.5s linear 0s 1 normal both up;
}
.diamond-4-0 {
  z-index: 6;
  text-align: center;
}
.diamond-4-2 {
  z-index: 4;
  background-color: #ffdfdf;
}
.diamond-4-2.active {
  animation: 0.5s linear 0s 1 normal both fold-even-2;
}
.diamond-4-2.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-2;
}
.diamond-4-3 {
  z-index: 3;
  background-color: #d7d7d7;
}
.diamond-4-3.active {
  animation: 0.5s linear 0s 1 normal both fold-even-3;
}
.diamond-4-3.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-3;
}
.diamond-4-4 {
  z-index: 2;
  background-color: #252525;
  display: flex;
  align-items: center;
  justify-content: end;
  color: #fff;
}
.diamond-4-4 span {
  margin-right: 2rem;
}
.diamond-4-4.active {
  animation: 0.5s linear 0s 1 normal both fold-even-4;
}
.diamond-4-4.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-4;
}
.diamond-4-5 {
  z-index: 1;
  cursor: default;
  pointer-events: none;
}
.diamond-4-5.active {
  animation: 0.5s linear 0s 1 normal both fold-even-5;
}
.diamond-4-5.inactive {
  animation: 0.5s linear 0s 1 normal both unfold-even-5;
}
.diamond-5 {
  position: absolute;
  top: 67.7rem;
  margin-left: 19.5rem;
  background-color: #252525;
}
.diamond-5.down {
  animation: 0.5s linear 0s 1 normal both down;
}
.diamond-5.up {
  animation: 0.5s linear 0s 1 normal both up;
}
.diamond-5-0 {
  z-index: 4;
  text-align: center;
}
.diamond-6 {
  position: absolute;
  top: 82.8rem;
  margin-right: 19.5rem;
  background-color: #252525;
}
.diamond-6.down {
  animation: 0.5s linear 0s 1 normal both down;
}
.diamond-6.up {
  animation: 0.5s linear 0s 1 normal both up;
}
.diamond-6-0 {
  z-index: 4;
  text-align: center;
}

.inner-diamond {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 1rem 1rem 1rem 1rem;
  background-color: rgba(0, 0, 0, 0.3);
}
.inner-diamond-pink {
  background-color: rgba(0, 0, 0, 0.2);
}
.inner-diamond .shop-intro-wrapper {
  text-align: right;
  width: 60%;
  color: #fff;
}
.inner-diamond .shop-intro-wrapper .shop-title-containe-wrapper-odd {
  display: flex;
  align-items: center;
  justify-content: right;
}
.inner-diamond .shop-intro-wrapper .shop-title-container {
  width: fit-content;
  margin-right: 0;
}
.inner-diamond .shop-intro-wrapper h2 {
  margin-bottom: -0.5rem;
  font-family: "Cormorant", sans-serif;
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
}
.inner-diamond .shop-intro-wrapper h3 {
  font-size: 1.2rem;
  text-align: left;
  margin-bottom: -0.5rem;
}
.inner-diamond .shop-intro-wrapper h3.shop-title-h3-capital {
  font-size: 0.8rem;
}
.inner-diamond .shop-intro-wrapper h4 {
  font-family: "Zen Old Mincho", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.inner-diamond .shop-intro-wrapper p {
  font-size: 1.2rem;
  color: #fff;
}
.inner-diamond .shop-intro-wrapper-odd {
  margin-left: 3rem;
  margin-right: 12.2rem;
}
.inner-diamond .shop-intro-wrapper-even {
  text-align: left;
  margin-right: 3rem;
  margin-left: 12.2rem;
}
@media screen and (min-width: 300px) {
  .inner-diamond .shop-intro-wrapper-odd {
    margin-right: 12.2rem;
  }
  .inner-diamond .shop-intro-wrapper-even {
    margin-left: 12.2rem;
  }
}
@media screen and (min-width: 320px) {
  .inner-diamond .shop-intro-wrapper-odd {
    margin-right: 11rem;
  }
  .inner-diamond .shop-intro-wrapper-even {
    margin-left: 11rem;
  }
}
@media screen and (min-width: 355px) {
  .inner-diamond .shop-intro-wrapper-odd {
    margin-right: 10rem;
  }
  .inner-diamond .shop-intro-wrapper-even {
    margin-left: 10rem;
  }
}
@media screen and (min-width: 375px) {
  .inner-diamond .shop-intro-wrapper-odd {
    margin-right: 9rem;
  }
  .inner-diamond .shop-intro-wrapper-even {
    margin-left: 9rem;
  }
}
@media screen and (min-width: 400px) {
  .inner-diamond .shop-intro-wrapper-odd {
    margin-right: 8rem;
  }
  .inner-diamond .shop-intro-wrapper-even {
    margin-left: 8rem;
  }
}

.white-line {
  background-color: white;
  width: 100%;
  height: 0.8rem;
}
.white-line:not(:last-child) {
  margin-bottom: 0.6rem;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.section-title {
  margin: 2rem 0 2rem 0;
}

section {
  text-align: center;
  padding-top: 7rem;
  margin-top: -4rem;
}
section .content-wrapper {
  margin: 0 auto;
  width: 80%;
}
section .text-box {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
section .content {
  padding: 2rem;
}
section .button-box {
  width: 100%;
  background-color: #252525;
}
section .detail-button {
  color: #fff;
  display: inline-block;
  width: 100%;
  padding: 1rem 0;
}
section .detail-button:hover, section .detail-button:active {
  color: #fbedc4;
}

.question-section {
  margin: 1rem 0 6rem 0;
}
.question-section form {
  padding: 4.5rem 3.5rem;
  margin-left: 0;
  background-color: #fff;
}
.question-section fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.question-section input {
  width: 100%;
  height: 4.6rem;
  border-radius: 0;
  background-color: transparent;
  border-bottom: 0.1rem solid #f7bb16;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  color: #777;
  margin-bottom: 3.5rem;
}
.question-section button {
  display: inline-block;
  background-color: #f7bb16;
  color: #fff;
  width: 100%;
  padding: 1rem 0;
  border-radius: 1.2rem;
  letter-spacing: 0.025rem;
  border: none;
  outline: none;
  transition: all 0.3s;
}

.navigation__checkbox {
  display: none;
}
.navigation__button {
  background-color: #fbedc4;
  height: 6.25rem;
  width: 6.25rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 56.25em) {
  .navigation__button {
    top: 0;
    left: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__button {
    top: 0;
    left: 0;
  }
}
.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff4d5;
  z-index: 1000;
  visibility: hidden;
}
@media only screen and (max-width: 56.25em) {
  .navigation__background {
    top: 0;
    left: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__background {
    top: 0;
    left: 0;
  }
}
.navigation__nav {
  height: 95vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  width: 0;
}
.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
}
.navigation__item {
  margin: 1rem;
}
.navigation__link {
  display: inline-block;
  font-family: "Hind Siliguri", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #252525;
  text-decoration: none;
}
.navigation__link span {
  margin-right: 1.5rem;
  display: inline-block;
}
.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: #fbedc4;
  transform: translateX(1rem);
}
.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80);
  visibility: visible;
}
.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  visibility: visible;
  width: 100%;
}
.navigation__icon {
  position: relative;
  margin-top: 3.1rem;
}
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
  width: 2.5rem;
  height: 2px;
  background-color: #333;
  display: inline-block;
}
.navigation__icon::before, .navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s;
}
.navigation__icon::before {
  top: -0.8rem;
}
.navigation__icon::after {
  top: 0.8rem;
}
.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg);
}

.footer {
  background-color: #252525;
  font-size: 1.2rem;
  margin-top: 7rem;
  width: 100%;
  text-align: center;
  padding-top: 4rem;
}
.footer .location-wrapper p {
  color: #fff;
}
.footer .location-wrapper a {
  color: #fff;
}
.footer .location-wrapper a:hover, .footer .location-wrapper a:active {
  color: #fbedc4;
}
.footer__navigation {
  display: inline-block;
  text-align: center;
  line-height: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .footer__navigation {
    width: 100%;
  }
}
.footer__list {
  list-style: none;
  margin: 2rem 5rem 4rem 5rem;
}
.footer__item {
  display: inline-block;
  font-family: "Hind Siliguri", sans-serif;
}
.footer__item:not(:last-child) {
  margin-right: 1.5rem;
}
.footer__link {
  color: #f7f7f7;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 1.4rem;
}
.footer__link:hover, .footer__link:active {
  color: #fbedc4;
}
.footer__copyright-box {
  background-color: #fff;
  text-align: center;
}
.footer__copyright {
  color: #252525;
  padding: 0.6rem;
}

.thanks-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks-section .container {
  margin: 41.5vh 0;
  width: 75%;
}
.thanks-section .container p {
  text-align: center;
}
.thanks-section .container a {
  display: inline-block;
  margin-top: 1.8rem;
  margin-left: 20rem;
}

.english {
  font-family: "Hind Siliguri", sans-serif;
}

.loader {
  width: 100%;
  height: 100%;
  transition: all 1s;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
}

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
  position: absolute;
  top: 40vh;
}

.spinner {
  color: #f7bb16;
  font-size: 1rem;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  top: 0;
}

.spinner:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner:after {
  left: 3.5em;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
.history-section {
  margin: 1rem 0 6rem 0;
}
.history-section .timeline {
  text-align: left;
}
.history-section .timeline .timeline-date {
  font-size: 1rem;
}
.history-section .timeline .timeline-content h3 {
  margin-top: 0.2rem;
}
.history-section .timeline .timeline-content .history-content {
  padding: 1rem 0rem;
}
.history-section .timeline li {
  margin: 2rem 0;
}
.history-section .timeline .img-box {
  text-align: center;
  margin-top: 2rem;
}
.history-section .timeline .img-box img {
  width: 15rem;
}

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

/*# sourceMappingURL=style.css.map */