/**
 * 店舗一覧ページ専用スタイル
 * front-page.php で使用
 */
:root {
  --accent: #625c8a;
}
html {
  font-size: 0.520833333vw;
}
body {
  background-color: #f7eaee;
}
.front-container {
  width: 82%;
  margin: 0 auto;
  color: var(--accent);
}
/* =============================================================================
   hero-section
================================================================================ */
.hero {
  margin-top: calc(12.5rem + 6.7rem);
}
.hero video {
  width: 100%;
  border-radius: 3.8rem;
}
/* =============================================================================
  link-section
============================================================================= */
.link-section {
  margin-top: 16.6rem;
}
.link-section__inner {
  display: flex;
  gap: 6rem;
}
.link-section__card {
  width: calc((100% - 6rem) / 2);
  border-radius: 1.7rem;
  text-align: center;
  aspect-ratio: 1 / 0.3891120858059047;
}
.search-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.3rem 0.6rem #00000029;
  background-color: #fff;
}
.search-card__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-card__icon {
  width: 6.7rem;
}
.search-card__text {
  margin-top: 2.3rem;
  font-size: 2.4rem;
}
.search-card form select {
  margin-top: 3.4rem;
  width: 50rem;
  border: 1px solid #707070;
  padding: 2.6rem 3rem;
  color: var(--accent);
  font-size: 16px;
}
/* =============================================================================
  instagram-section
============================================================================= */
.instagram-section {
  width: calc(100% - 18% / 2 - 13.4rem);
  position: relative;
  margin: 13rem 0 12rem 18%;
  margin-left: calc(18% / 2 + 13.4rem);
  background-color: #fff;
  border-radius: 0 0 0 3.8rem;
  text-align: center;
  letter-spacing: 0.2rem;
  box-shadow: 0 0.3rem 0.6rem #00000029;
}
.instagram-section__inner {
  padding: 16rem 0 16rem 20rem;
}
.instagram__title {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 13.4rem;
  padding: 10.6rem 0 10.6rem 4.4rem;
  background-color: #fff;
  border-radius: 7rem 0 0 7rem;
  line-height: 1;
}
.instagram__title--large {
  font-size: 4.4rem;
  font-weight: normal;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-orientation: mixed;
}
.instagram-main {
  color: #333333;
}
.instagram-posts {
  width: calc(50rem * 4 + 2.3rem * 3);
  display: flex;
  gap: 2.3rem;
}
.instagram-post {
  width: 50rem;
  height: 50rem;
  border-radius: 1.7rem;
  border: 2px solid var(--accent);
  background-color: #fff;
}
.instagram-button-wrap {
  width: 100%;
  margin-top: 1.7187500000000002vw;
  text-align: end;
}

.instagram-button {
  position: relative;
  width: 13.541666666666666vw;
  margin-right: 10.2rem;
  padding: 0.5208333333333333vw 0;
  padding-left: 2.1354166666666665vw;
  background-color: #625c8b;
  border: 0.052083333333333336px solid #707070;
  border-radius: 2.34375vw;
  font-size: 1.25vw;
  color: #e4e4e4;
  text-align: left;
}

.instagram-button::before,
.instagram-button::after {
  content: "";
  position: absolute;
  right: 1.566667vw;
  width: 1vw;
  height: 0.15625vw;
  background-color: var(--color-white);
  border-radius: 50px;
}

.instagram-button::before {
  transform: translateY(-50%) rotate(45deg);
  top: 36%;
}
.instagram-button::after {
  transform: translate(0, -50%) rotate(-45deg);
  bottom: 36%;
}
/* =============================================================================
  info-section
============================================================================= */
.info-section {
  margin-top: 16.6rem;
}
.info-section__card {
  width: fit-content;
  margin: 0 auto;
}
/* =============================================================================
  ceo-section
============================================================================= */
.ceo-section {
  width: 100%;
  margin: 29.2rem auto 0;
  position: relative;
  transform: translateX(90%);
  opacity: 0;
  transition: opacity 0.8s, transform 0.8s;
}
.ceo-section.is-visible {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}
.ceo-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(32rem);
  width: 49.5rem;
  height: 52.1rem;
  background-image: url(../images/corporate/top/img_bg_tomato.png);
  background-size: contain;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease-in-out 0.8s;
}
.ceo-section.is-visible::after {
  opacity: 1;
}
.ceo-section__inner {
  padding-top: 29.2rem;
}
.ceo-section__card {
  width: fit-content;
}
.ceo__title {
  width: 80rem;
  margin: 0 auto;
  padding: 6.9rem 10rem;
  font-size: 4rem;
  font-weight: normal;
  background-color: #fff;
  border-radius: 7rem;
}
.ceo-section__img {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(14.8rem);
  width: 99rem;
  z-index: 2;
}
/* =============================================================================
  message-section
============================================================================= */
.message-section {
  width: calc(100% - 18% / 2 - 13.4rem);
  position: relative;
  margin: 4.5rem 0 12rem calc(18% / 2 + 13.4rem);
  background-color: #fff;
  border-radius: 0 0 0 3.8rem;
  text-align: center;
  letter-spacing: 0.2rem;
  box-shadow: 0 0.3rem 0.6rem #00000029;
}
.message-section__inner {
  padding: 18rem 20rem 16rem;
}
.message__title {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 13.4rem;
  padding: 10.6rem 0 10.6rem 4.4rem;
  background-color: #fff;
  border-radius: 7rem 0 0 7rem;
  line-height: 1;
  font-weight: normal;
}
.message__title--large {
  font-size: 5.9rem;
}
.message-main {
  text-align-last: left;
  color: #333333;
  opacity: 0;
  transition: opacity 1.2s ease-in-out 0.8s;
}
.message-main.is-visible {
  opacity: 1;
}
.message-main__text {
  font-size: 2.4rem;
  line-height: 1.4;
}
.message-main__text--mt48 {
  margin-top: 4.8rem;
}
.message-main__text--mt72 {
  margin-top: 7.2rem;
}

@media screen and (max-width: 768px) {
  /* =============================================================================
   hero-section
================================================================================ */
  .hero {
    width: 90%;
    margin-top: 120px;
  }
  .hero video {
    border-radius: 16px;
  }
  /* =============================================================================
  link-section
============================================================================= */
  .link-section {
    margin-top: 16.6rem;
  }
  .link-section__inner {
    flex-direction: column;
    gap: 30px;
  }
  .link-section__card {
    width: 100%;
    border-radius: 6px;
    aspect-ratio: initial;
  }
  .recruit-card img {
    width: 100%;
  }
  .search-card {
    flex-direction: row;
    padding: 23.5px 16.5px;
    box-shadow: 0 3px 6px #00000029;
    gap: 12px;
  }
  .search-card__text-wrap {
    flex-direction: row;
    gap: 8px;
  }
  .search-card__icon {
    width: 12px;
  }
  .search-card__text {
    margin-top: 0;
    font-size: 12px;
  }
  .search-card form {
    flex: 1;
  }
  .search-card form select {
    margin-top: 0;
    width: 100%;
    padding: 4.9px 17px;
    font-size: 14px;
  }

  /* =============================================================================
  instagram-section
============================================================================= */
  .instagram-section {
    width: calc(100% - 18% / 2 - 49px);
    margin: 13rem 0 12rem 0;
    margin-left: calc(18% / 2 + 49px);
    border-radius: 0 0 0 16px;
    box-shadow: 0 3px 6px #00000029;
  }
  .instagram-section__inner {
    padding: 40px 0 45px 25px;
  }
  .instagram__title {
    width: 49px;
    padding: 20px 0 20px 12px;
    border-radius: 16px 0 0 16px;
  }
  .instagram__title--large {
    font-size: 24px;
  }
  .instagram-posts {
    width: initial;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .instagram-post {
    width: 60vw;
    height: 60vw;
    border-radius: 17px;
  }
  .instagram-button-wrap {
    width: 60vw;
    margin: 50px auto 0;
    text-align: end;
  }
  .instagram-button {
    width: 135px;
    margin-right: 0;
    padding: 4px 0;
    padding-left: 21px;
    border: 1px solid #707070;
    border-radius: 45px;
    font-size: 14px;
  }
  .instagram-button::before,
  .instagram-button::after {
    right: 22px;
    width: 10px;
    height: 2px;
    border-radius: 20px;
  }
  .instagram-button::before {
    transform: translateY(-50%) rotate(45deg);
    top: 36%;
  }
  .instagram-button::after {
    transform: translate(0, -50%) rotate(-45deg);
    bottom: 36%;
  }
  /* =============================================================================
  info-section
============================================================================= */
  .info-section__card {
    width: 100%;
  }
  .info-section__card img {
    width: 100%;
  }
  /* =============================================================================
  ceo-section
============================================================================= */
  .ceo-section {
    width: 100%;
    margin: 29.2rem auto 0;
    position: relative;
  }
  .ceo-section::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(32rem, -50%);
    width: 49.5rem;
    height: 52.1rem;
    background-image: url(../images/corporate/top/img_bg_tomato.png);
    background-size: contain;
    z-index: -1;
  }
  .ceo-section__inner {
    padding-top: 44px;
  }
  .ceo-section__card {
    width: fit-content;
  }
  .ceo__title {
    width: 80rem;
    margin: 0 auto;
    padding: 6px 10rem;
    font-size: 14px;
    background-color: #fff;
    border-radius: 16px;
  }
  .ceo-section__img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(14.8rem, -50%);
    width: 48vw;
    z-index: 2;
  }
  /* =============================================================================
  message-section
============================================================================= */
  .message-section {
    width: calc(100% - 18% / 2 - 49px);
    margin: 8rem 0 80px 0;
    margin-left: calc(18% / 2 + 49px);
    border-radius: 0 0 0 16px;
    box-shadow: 0 3px 6px #00000029;
  }
  .message-section__inner {
    padding: 20rem 25px 45px 25px;
  }
  .message__title {
    width: 49px;
    padding: 40px 0 90px 12px;
    border-radius: 16px 0 0 16px;
  }
  .message__title--large {
    font-size: 22px;
  }
  .message-main__text {
    font-size: 12px;
  }
  .message-main__text--mt48 {
    margin-top: 24px;
  }
  .message-main__text--mt72 {
    margin-top: 48px;
  }
}