@charset "utf-8";

/* カラー */
/* アクセント：#FFECA1 */
/* メイン：#6E6360 */
/* ポイント：#93b888 */

html {
  scroll-behavior: smooth;
}

/* スクロールデザイン */
 ::-webkit-scrollbar {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-track {
  background-color: #6E6360;
}
::-webkit-scrollbar-thumb {
  background-color: #FFECA1;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Kaisei Opti', serif;
  font-size: 18px;
  color: #6E6360;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(../img/appBackground.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* スクリーンリーダー用の非表示テキスト(SEO) */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ローディング */
.loadingAnimation {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: calc(var(--dvh, 1vh) * 100);
  background-color: rgb(255, 255, 255, 0.8);
}
.loadingAnimation#loadingDisplay {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0.1s, opacity 0.5s 0.1s, visibility 0.1s;
}
.loadingAnimation#loadingHidden {
  left: -100%;
  opacity: 0;
  visibility: hidden;
  transition: left 0.1s 0.5s, opacity 0.5s, visibility 0.1s 0.5s;
}
.loadingAnimation .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6E6360;
  animation: l10 1.5s infinite linear;
}
@keyframes l10 {
  0% {
    box-shadow: 
      0 -30px #FFECA1, calc(30px * 0.707) calc(-30px * 0.707) #93b888,
      30px 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888,
      0 0 #FFECA1, 0 0 #93b888
  }
  12.5% {
    box-shadow: 
      0 0 #FFECA1, calc(30px * 0.707) calc(-30px * 0.707) #93b888,
      30px 0 #FFECA1, calc(30px * 0.707) calc(30px * 0.707) #93b888,
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888
  }
  25% {
    box-shadow: 
      0 0 #FFECA1, 0 0 #93b888, 30px 0 #FFECA1,
      calc(30px * 0.707) calc(30px * 0.707) #93b888,
      0 30px #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888
  }
  37.5% {
    box-shadow: 
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, calc(30px * 0.707) calc(30px * 0.707) #93b888,
      0 30px #FFECA1, calc(-30px * 0.707) calc(30px * 0.707) #93b888, 0 0 #FFECA1, 0 0 #93b888
  }
  50% {
    box-shadow: 
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888,
      0 30px #FFECA1, calc(-30px * 0.707) calc(30px * 0.707) #93b888, -30px 0 #FFECA1, 0 0 #93b888
  }
  62.5% {
    box-shadow: 
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888,
      0 0 #FFECA1, calc(-30px * 0.707) calc(30px * 0.707) #93b888, -30px 0 #FFECA1,
      calc(-30px*0.707) calc(-30px * 0.707) #93b888
  }
  75% {
    box-shadow: 
      0 -30px #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888,
      0 0 #FFECA1, 0 0 #93b888, -30px 0 #FFECA1, calc(-30px * 0.707) calc(-30px * 0.707) #93b888
  }
  87.5% {
    box-shadow: 
      0 -30px #FFECA1, calc(30px * 0.707) calc(-30px * 0.707) #93b888, 0 0 #FFECA1, 0 0 #93b888,
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, calc(-30px * 0.707) calc(-30px * 0.707) #93b888
  }
  100% {
    box-shadow: 
      0 -30px #FFECA1, calc(30px * 0.707) calc(-30px * 0.707) #93b888, 30px 0 #FFECA1, 0 0 #93b888,
      0 0 #FFECA1, 0 0 #93b888, 0 0 #FFECA1, 0 0 #93b888
  }
}

/* 各コンテンツ */
.setHeight {
  height: calc(var(--dvh, 1vh) * 100);
}

/* ヘッダー */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 120px;
  padding: 0 20px;
  background-color: rgb(255, 236, 161, 0.6);
  transition: height 0.3s, padding-top 0.3s, background-color 0.3s;
}
header h1 {
  width: 100%;
  position: relative;
}
header h1 a {
  display: block;
  max-width: 320px;
}
header h1 img {
  width: 100%;
}
/* フッター到達時のヘッダー */
header.footerReach {
  height: calc((var(--dvh, 1vh) * 100 - 780px));
  min-height: 120px;
  background-color: rgb(255, 236, 161, 1);
}
header.default h1 {
  max-width: 100%;
  left: 0;
  transform: translateX(0);
  transition: left 0.5s, transform 0.5s, max-width 0.1s 0.5s;
}
header.footerReach h1 {
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  transition: left 0.5s 0.1s, transform 0.5s 0.1s, max-width 0.1s;
}

/* フッター */
footer {
  padding: 20px 20px 60px;
  background-color: #6E6360;
  color: #fff;
  position: relative;
}
footer .footerContents {
  max-width: 1200px;
  height: 700px;
  margin: 0 auto;
  padding: 60px 0;
}
.footerContents .companyName {
  font-size: 22px;
}
.footerContents .location {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}
.footerContents .followUs {
  width: 320px;
  padding: 30px 0 0;
}
.footerContents .followUs h4 {
  font-size: 16px;
  text-transform: capitalize;
}
.footerContents .followUs ul {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20px 0;
}
.footerContents .followUs li {
  width: 50px;
  height: 50px;
  padding: 10px;
  margin-right: 25px;
  background-color: rgb(255, 236, 161, 0);
  border: 2px solid rgb(255, 255, 255, 0.2);
  border-radius: 100px;
  transition: background-color 0.3s, border 0.3s;
}
.footerContents .followUs li:hover {
  background-color: #FFECA1;
  border: 2px solid #FFECA1;
}
.footerContents .followUs li a {
  display: block;
  width: 100%;
  height: 100%;
}
.footerContents .followUs li img {
  width: 100%;
  height: 100%;
}
/* 内部リンク */
.footerContents .innerLinks li {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  padding-left: 30px;
  position: relative;
}
.footerContents .innerLinks li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  background-color: #FFECA1;
  border-radius: 100px;
}
/* 外部リンク */
.footerContents .officialPages {
  padding-top: 15px;
}
.footerContents .officialPages li {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  padding-left: 30px;
  position: relative;
}
.footerContents .officialPages li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  background-color: #93b888;
  border-radius: 100px;
}
/* ホバー */
.footerContents .officialPages a,
.footerContents .innerLinks button {
  display: inline-block;
  position: relative;
}
.footerContents .officialPages a::before,
.footerContents .innerLinks button::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 2px;
  background-color: #fff;
  border-radius: 100px;
  transition: width 0.3s;
}
.footerContents .officialPages a:hover::before,
.footerContents .innerLinks button:hover::before {
  width: 100%;
}
/* コピーライト */
footer p#copyright {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: start;
  align-items: center;
  width: calc(100% - 40px);
  height: 60px;
  font-size: 16px;
}

/* トップコンテンツ */
.topContents {
  display: flex;
  justify-content: space-around;
  align-items: start;
  width: 100%;
  max-width: calc(720px + 540px);
  margin: 0 auto;
  padding: 80px 20px 0;
  position: relative;
}
.topContents .topText {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  max-width: 720px;
  height: 100%;
  padding-bottom: 290px;
  font-size: 32px;
  position: relative;
  z-index: 10;
}
.topContents .topText span {
  display: block;
}
.topContents .topText span.text-1 {
  font-size: 36px;
  font-weight: 700;
}
.topContents .topText span.text-2 {
  margin-top: 30px;
  position: relative
}
.topContents .topText span.text-2::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(110, 99, 96, 0.6);
}
.topContents .topText span.text-3 {
  margin-top: 30px;
  font-size: 36px;
}
/* ネイル写真 */
.topContents .nailImages {
  width: 100%;
  max-width: 540px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.topContents .nailImages .imageItem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 70%;
}
.topContents .nailImages img {
  width: 100%;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100%;
}
.topContents .nailImages .image-1 {
  top: 23%;
  left: 35%;
}
.topContents .nailImages .image-2 {
  top: 55%;
  left: 30%;
}
.topContents .nailImages .image-3 {
  top: 39%;
  left: 96%;
}
.topContents .nailImages .imageItem::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 100%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 320px;
  height: 320px;
  background-color: rgb(255, 236, 161, 0.4);
  border-radius: 100%;
}
.topContents .nailImages .imageItem::after {
  content: '';
  position: absolute;
  top: 70%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 220px;
  height: 220px;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
/* PRポイント */
.topContents .point {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.topContents .point ul {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 290px;
}
.topContents .point li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 220px;
  margin: 0 30px;
  background-color: #FFECA1;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100%;
  text-align: center;
  text-shadow: 2px 2px 0px #fff;
  font-size: 22px;
  font-weight: 700;
}

/* セクション */
section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 220px 20px 0;
}

/* サロンの紹介 */
.salonIntroduction {
  position: relative;
}
.salonIntroduction p.introductionText {
  margin: 20px auto 0;
  text-align: center;
  line-height: 2;
  font-size: 22px;
}
/* サロンの詳細 */
.salonIntroduction .salonInformation {
  position: absolute;
  top: calc(220px + 430px);
  right: 20px;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 20px 10px;
  background-image: url(../img/appBackground.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgb(110, 99, 96, 0.1);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
}
.salonIntroduction .salonInformation::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  z-index: 2;
  width: 260px;
  height: 260px;
  background-color: rgb(255, 236, 161, 0.4);
  border-radius: 100%;
}
.salonIntroduction .salonInformation::after {
  content: '';
  position: absolute;
  bottom: -125px;
  left: -95px;
  z-index: 2;
  width: 220px;
  height: 220px;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
.salonIntroduction .salonInformation dt {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 20px;
  position: relative;
  z-index: 3;
}
.salonIntroduction .salonInformation dd {
  display: flex;
  justify-content: start;
  align-items: center;
  min-height: 80px;
  line-height: 1.5;
  border-bottom: 1px solid rgb(110, 99, 96, 0.2);
  position: relative;
  z-index: 3;
}
.salonIntroduction .salonInformation dd.location {
  flex-wrap: wrap;
}
.salonIntroduction .salonInformation dd.location iframe {
  width: 100%;
  margin: 10px 0 10px;
}
.salonIntroduction .salonInformation dd.location ul {
  padding-top: 10px;
}
.salonIntroduction .salonInformation dd.location li {
  margin-bottom: 10px;
  font-size: 16px;
}
.salonIntroduction .salonInformation dd.tel,
.salonIntroduction .salonInformation dd.contact,
.salonIntroduction .salonInformation dd.homePageUrl,
.salonIntroduction .salonInformation dd.instagramUrl {
  display: flex;
  justify-content: center;
  align-items: center;
}
.salonIntroduction .salonInformation dd.tel a,
.salonIntroduction .salonInformation dd.contact a,
.salonIntroduction .salonInformation dd.homePageUrl a,
.salonIntroduction .salonInformation dd.instagramUrl a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 50px;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
}
.salonIntroduction .salonInformation dd.tel a {
  background-color: #6E6360;
  color: #fff;
}
.salonIntroduction .salonInformation dd.contact a {
  background-color: #FFECA1;
}
.salonIntroduction .salonInformation dd.homePageUrl a {
  background-color: #93b888;
  color: #fff;
}
.salonIntroduction .salonInformation dd.instagramUrl a {
  background: linear-gradient(15deg, #FFD600 0%, #FF7A00 25%, #FF0069 50%, #D300C5 75%, #7638FA 100%);
  color: #fff;
}
/* コンテンツ行 */
.salonIntroduction .introductionRow {
  margin-top: 270px;
}
.salonIntroduction .introductionRow h3 {
  font-size: 24px;
  font-weight: 700;
}
.salonIntroduction .shortWidth {
  width: calc(100% - 480px);
  position: relative;
  z-index: 4;
}
/* 求める人物像 */
.salonIntroduction .candidateProfile li {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 30px;
  padding-left: 35px;
  position: relative;
}
.salonIntroduction .candidateProfile li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 30px;
  height: 30px;
  background-color: #FFECA1;
  border-radius: 100px;
}
/* 自社ならではのプロモーション */
.salonIntroduction .salonPromotion dt {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 30px;
}
.salonIntroduction .salonPromotion dd {
  line-height: 1.5;
}
/* お客様の声をご紹介 */
.salonIntroduction .customerTestimonials dt {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 30px;
}
.salonIntroduction .customerTestimonials dd {
  padding: 20px 10px;
  background-color: rgb(255, 255, 255, 0.6);
  border-radius: 10px;
  line-height: 1.5;
}
/* その他 */
.salonIntroduction .aboutContents {
  position: relative;
  z-index: 1;
}
.salonIntroduction .aboutContents::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -160px;
  z-index: -1;
  width: 340px;
  height: 340px;
  background-color: rgb(255, 236, 161, 0.4);
  border-radius: 100%;
}
.salonIntroduction .aboutContents::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -160px;
  z-index: -1;
  width: 340px;
  height: 340px;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
.salonIntroduction .aboutContents .aboutText {
  margin-bottom: 45px;
}
.salonIntroduction .aboutText p {
  margin-top: 10px;
  line-height: 2;
}
.salonIntroduction .aboutText p span {
  margin-right: 5px;
  font-size: 24px;
  font-weight: 700;
  color: #93b888;
}

/* 採用条件 */
.employmentConditions h2 {
  text-align: center;
  line-height: 1.5;
  font-size: 26px;
}
.employmentConditions h2 span {
  text-shadow: 1px 1px 5px #FFECA1;
  font-weight: 700;
  position: relative;
}
.employmentConditions h2 span::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #6E6360;
  border-radius: 100px;
}
.employmentConditions .conditionsRow {
  padding: 30px 0;
}
.employmentConditions h3 {
  padding-left: 35px;
  font-size: 24px;
  position: relative;
}
.employmentConditions h3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 30px;
  height: 30px;
  background-color: #93b888;
  border-radius: 100px;
}
.employmentConditions dt {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 30px;
}
.employmentConditions dd {
  min-height: 80px;
  padding-right: 460px;
  line-height: 1.5;
}
.employmentConditions .emphasis {
  margin-right: 5px;
  text-shadow: 1px 1px 5px #FFECA1;
  font-size: 20px;
  font-weight: 700;
  color: #93b888;
}
.employmentConditions dd li {
  margin-top: 10px;
}
.employmentConditions dd.salary {
  font-size: 24px;
}
.employmentConditions dd.detail {
  position: relative;
}
.employmentConditions dd.detail p {
  margin-bottom: 20px;
  line-height: 1.5;
}
.employmentConditions dd.shift {
  position: relative;
}
/* 給料モデル・勤務スケジュール */
.employmentConditions dd .model {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 460px;
  background-color: rgb(255, 236, 161, 0.6);
  border: 1px solid rgb(110, 99, 96, 0.1);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
}
.employmentConditions dd .model h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 0 10px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
}
.employmentConditions dd .model ul,
.employmentConditions dd .model ol {
  padding: 0 10px 10px;
}
.employmentConditions dd .model li {
  margin-top: 10px;
  line-height: 1.5;
}
.employmentConditions dd .model p {
  max-width: none;
  margin-top: 20px;
  padding: 0 10px 10px;
}
/* 勤務スケジュール */
.employmentConditions dd.shift .model {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.employmentConditions dd.shift .model .fastTime,
.employmentConditions dd.shift .model .lateTime {
  background-color: rgb(255, 236, 161, 0.6);
  border: 1px solid rgb(110, 99, 96, 0.1);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
}
.employmentConditions dd.shift .model .lateTime {
  margin-top: 30px;
}
.employmentConditions dd.shift .model li {
  min-height: 50px;
  border-bottom: 1px solid rgb(110, 99, 96, 0.2);
}
.employmentConditions dd.shift .model li span {
  margin-right: 10px;
  font-weight: 700;
}

/* 採用までの流れ */
.flowRecruitment h3 {
  font-size: 24px;
}
.flowRecruitment ol {
  padding-top: 30px;
}
.flowRecruitment li {
  display: flex;
  justify-content: start;
  align-items: start;
  min-height: 130px;
  padding-left: 55px;
  padding-top: 10px;
  position: relative;
}
.flowRecruitment li .number {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: #FFECA1;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
}
.flowRecruitment .applyButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 50px;
  margin: 0 20px;
  background-color: #6E6360;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
  color: #fff;
}
.flowRecruitment .note {
  margin-top: 30px;
  line-height: 1.5;
}

/* 店長からのメッセージ */
.messageFromManager .contentsColumn {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.messageFromManager .managerImage {
  width: 480px;
  height: 480px;
}
.messageFromManager .managerImage img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  object-fit: cover;
}
.messageFromManager .managerMessage {
  width: calc(100% - 480px);
  padding-left: 20px;
  position: relative;
}
.messageFromManager .managerMessage::before {
  content: '';
  position: absolute;
  top: 30px;
  right: -30px;
  z-index: -1;
  width: 220px;
  height: 220px;
  background-color: rgb(255, 236, 161, 0.4);
  border-radius: 100%;
}
.messageFromManager .managerMessage::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -50px;
  z-index: -1;
  width: 220px;
  height: 220px;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
.messageFromManager .managerMessage p {
  margin-top: 20px;
  line-height: 1.5;
}

/* 会社概要 */
.companyInformation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 120px;
}
.companyInformation dl {
  width: 100%;
  max-width: 450px;
  position: relative;
}
.companyInformation dl::before {
  content: '';
  position: absolute;
  top: -55px;
  right: -80px; 
  z-index: -1;
  width: 220px;
  height: 220px;
  background-color: rgb(255, 236, 161, 0.4);
  border-radius: 100%;
}
.companyInformation dl::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -50px;
  z-index: -1;
  width: 220px;
  height: 220px;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
.companyInformation dt {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
}
.companyInformation dd {
  display: flex;
  justify-content: start;
  align-items: center;
  min-height: 50px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(110, 99, 96, 0.2);
  line-height: 1.5;
}
.companyInformation dd.homePageUrl a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 320px;
  height: 50px;
  background-color: #93b888;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
  color: #fff;
}
.companyInformation .companyImage {
  width: 480px;
  height: 480px;
}
.companyInformation .companyImage img {
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100%;
  object-fit: cover;
}

/* 応募フォーム表示ボタン */
@keyframes bannerMotion {
  0%, 100% {
    bottom: -90px;
    right: -60px;
  }
  50% {
    bottom: -100px;
    right: -70px;
  }
}
/* レスポンシブ 1130px 以下 */
@keyframes bannerMotion-1130 {
  0%, 100% {
    bottom: -180px;
    right: -100px;
  }
  50% {
    bottom: -200px;
    right: -120px;
  }
}
.applicationBanner {
  position: fixed;
  bottom: -100px;
  right: -70px;
  z-index: 100;
  width: 320px;
  height: 320px;
  animation: bannerMotion 5s ease-in-out infinite;
  transition: bottom 0.3s, right 0.3s;
}
.applicationBanner::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -125px;
  z-index: -1;
  width: 80%;
  height: 80%;
  background-color: rgb(147, 184, 136, 0.4);
  border-radius: 100%;
}
.applicationBanner .bannerContents {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 60px;
  padding-bottom: 60px;
  background-color: #FFECA1;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100%;
  transition: padding 0.3s;
}
.applicationBanner .openFormBtn {
  display: inline-block;
  text-shadow: 2px 2px 0px #fff;
  font-size: 24px;
  font-weight: 700;
  position: relative;
}
.applicationBanner .openFormBtn::before {
  content: '約3分で完了！';
  position: absolute;
  top: -20px;
  right: -80px;
  transform: rotate(15deg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  font-size: 16px;
  color: #93b888;
}
.applicationBanner .openFormBtn::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 3px;
  background-color: #6E6360;
  border-radius: 100px;
  transition: width 0.3s;
}
.applicationBanner .openFormBtn:hover::after {
  width: 110%;
}
/* 応募フォーム */
.applicationForm {
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgb(110, 99, 96, 0.8);
}
.applicationForm.display {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0.1s, opacity 0.3s 0.1s, visibility 0.1s;
}
.applicationForm.hidden {
  left: -100%;
  opacity: 0;
  visibility: hidden;
  transition: left 0.1s 0.3s, opacity 0.3s, visibility 0.1s 0.3s;
}
.applicationForm .formInnerline {
  width: calc(100% - 60px);
  max-width: 890px;
  height: calc(100% - 60px);
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
  position: relative;
}
.applicationForm .closeFormBtn {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  width: 35px;
  height: 35px;
  background-image: url(../img/close_24dp_6E6360_FILL0_wght400_GRAD0_opsz24.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  background-color: #fff;
  border: 1px solid rgb(110, 99, 96, 0.2);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
}
.applicationForm .formContents {
  width: 100%;
  height: 100%;
  padding: 20px 10px 120px;
  overflow: scroll;
}
.applicationForm .formContents .contents {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.applicationForm h2.formTitle {
  height: 55px;
  text-align: center;
  font-size: 26px;
  position: sticky;
  top: 0;
}
.applicationForm h2.formTitle span {
  display: inline-block;
  position: relative;
}
.applicationForm h2.formTitle span::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #6E6360;
  border-radius: 100px;
}
/* ラベル */
.applicationForm label.formLabel {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
}
/* インプット */
.applicationForm input,
.applicationForm select {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  box-shadow: 0 0 5px 0px rgb(110, 99, 96, 0.6) inset;
  border-radius: 100px;
}
.applicationForm textarea {
  width: 100%;
  height: 200px;
  padding: 10px 20px;
  box-shadow: 0 0 5px 0px rgb(110, 99, 96, 0.6) inset;
  border-radius: 10px;
  resize: vertical; /* 垂直方向のみリサイズ可能 */
}
/* プルダウンデザイン */
.applicationForm .designSelectbox {
  display: inline-block;
  position: relative;
  z-index: 0;
}
.applicationForm .designSelectbox::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-image: url(../img/arrow_drop_down_24dp_6E6360_FILL0_wght400_GRAD0_opsz24.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 14px;
}
.applicationForm .designSelectbox.year::before {
  content: '年';
  background: none;
}
.applicationForm .designSelectbox.month::before {
  content: '月';
  background: none;
}
.applicationForm .designSelectbox.day::before {
  content: '日';
  background: none;
}
/* お名前 */
.applicationForm .entryName,
.applicationForm .entryNameRuby {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.applicationForm .entryName input,
.applicationForm .entryNameRuby input {
  width: calc(50% - 10px);
}
/* 性別 */
.applicationForm .designSelectbox.genderSelect {
  width: calc(50% - 10px);
}
/* 生年月日 */
.applicationForm .dobDate {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.applicationForm .designSelectbox.year {
  width: calc(50% - 10px);
}
.applicationForm .designSelectbox.month {
  width: calc((50% / 2) - 10px);
}
.applicationForm .designSelectbox.day {
  width: calc((50% / 2) - 10px);
}
/* 携帯番号 */
.applicationForm .phoneNumber {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.applicationForm .phoneNumber .phone01,
.applicationForm .phoneNumber .phone02,
.applicationForm .phoneNumber .phone03 {
  width: calc((100% / 3) - 20px);
}
.applicationForm .phoneNumber .hyphen {
  width: 10px;
}
/* 最寄り駅 */
.applicationForm .nearestStation {
  width: 100%;
}
/* 経験 */
.applicationForm .designSelectbox.experienceSelect {
  width: 100%;
}
/* 入力内容確認ボタン */
.applicationForm .confirmInput {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 30px;
  background-color: #6E6360;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
  color: #fff;
}
/* 応募を送信する */
.applicationConfirm {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 20px 10px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
  overflow: scroll;
}
.applicationConfirm.display {
  width: 100%;
  opacity: 1;
  visibility: visible;
  transition: width 0.1s, opacity 0.3s 0.1s, visibility 0.1s;
}
.applicationConfirm.hidden {
  width: 0;
  opacity: 0;
  visibility: hidden;
  transition: width 0.1s 0.3s, opacity 0.3s, visibility 0.1s;
}
.applicationConfirm .confirmContents {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.applicationConfirm h2 {
  height: 55px;
  text-align: center;
  font-size: 26px;
  position: sticky;
  top: 0;
}
.applicationConfirm h2 span {
  display: inline-block;
  position: relative;
}
.applicationConfirm h2 span::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #6E6360;
  border-radius: 100px;
}
.applicationConfirm label {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 35px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
}
.applicationConfirm p {
  display: flex;
  justify-content: start;
  align-items: center;
  min-height: 50px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(110, 99, 96, 0.2);
  white-space: pre-line;
}
.applicationConfirm .formBtns {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 50px 0;
}
.applicationConfirm .formBtns .entryFormBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 50px;
  background-color: #FFECA1;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
}
.applicationConfirm .formBtns .returnFormBtn {
  display: flex;
  justify-content: center;
  align-items: end;
  border-bottom: 1px solid rgb(110, 99, 96, 0.6);
  font-size: 16px;
}
/* 応募内容のエラー */
.applicationError {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  padding: 20px 10px;
  background-color: rgb(255, 255, 255, 0.9);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
  overflow: hidden;
}
.applicationError.display {
  width: 100%;
  opacity: 1;
  visibility: visible;
  transition: width 0.1s, opacity 0.3s 0.1s, visibility 0.1s;
}
.applicationError.hidden {
  width: 0;
  opacity: 0;
  visibility: hidden;
  transition: width 0.1s 0.3s, opacity 0.3s, visibility 0.1s;
}
.applicationError .errorContents {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.applicationError h2 {
  height: 55px;
  text-align: center;
  font-size: 26px;
  position: sticky;
  top: 0;
}
.applicationError h2 span {
  display: inline-block;
  position: relative;
}
.applicationError h2 span::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #6E6360;
  border-radius: 100px;
}
.applicationError .errorList {
  padding: 30px 0;
}
.applicationError .errorList li {
  margin-top: 20px;
  padding-left: 30px;
  position: relative;
}
.applicationError .errorList li::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
}
.applicationError .entryFormBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 30px auto 0;
  background-color: #6E6360;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
  color: #fff;
}
/* 応募完了メッセージ */
.applicationSuccess {
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgb(110, 99, 96, 0.8);
}
.applicationSuccess.display {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0.1s, opacity 0.3s 0.1s, visibility 0.1s;
}
.applicationSuccess.hidden {
  left: -100%;
  opacity: 0;
  visibility: hidden;
  transition: left 0.1s 0.3s, opacity 0.3s, visibility 0.1s 0.3s;
}
.applicationSuccess .messageInnerline {
  width: calc(100% - 60px);
  max-width: 890px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 10px;
  position: relative;
}
.applicationSuccess .closeMessageBtn {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  width: 35px;
  height: 35px;
  background-image: url(../img/close_24dp_6E6360_FILL0_wght400_GRAD0_opsz24.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  background-color: #fff;
  border: 1px solid rgb(110, 99, 96, 0.2);
  box-shadow: 2px 2px 5px -2px rgb(110, 99, 96, 0.6);
  border-radius: 100px;
}
.applicationSuccess .successMessage {
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  overflow: scroll;
}
.applicationSuccess .successMessage .message {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.applicationSuccess h2 {
  height: 55px;
  text-align: center;
  font-size: 26px;
  position: sticky;
  top: 0;
}
.applicationSuccess h2 span {
  display: inline-block;
  position: relative;
}
.applicationSuccess h2 span::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #6E6360;
  border-radius: 100px;
}
.applicationSuccess p {
  text-align: center;
}
.applicationSuccess ul {
  padding: 30px 0;
}
.applicationSuccess li {
  margin-top: 10px;
  line-height: 1.5;
}
.applicationSuccess dl {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 0;
}
.applicationSuccess dt {
  width: 120px;
  height: 50px;
  font-size: 16px;
}
.applicationSuccess dd {
  width: calc(100% - 120px);
  height: 50px;
  padding-left: 10px;
  text-decoration: underline;
  color: #93b888;
}