/* ---------------------------
    基本設定
----------------------------- */

html {
  font-size: 10px !important;
  margin: 0 auto;
}

:root {
  --font-main: "Noto Sans", sans-serif;
  --font-strong: "Noto Sans JP", sans-serif;
  --color-main: #000;
  --color-light: #fff;
  --pill-w: 54rem;
  --fv-h: 100dvh;
}

body {
  background-color: #fafaff;
  font-family: var(--font-main);
  color: var(--color-main);
  font-size: 1.4rem;
  width: 100%;
  /* 横スクロール防止 */
  overflow-x: hidden;
  /* 英単語の途中で改行 */
  word-break: break-all;
}

.wrapper {
  max-width: 39rem;
  width: 100%;
  margin: 0 auto;
}

/* ---------------------------
   フェードイン
----------------------------- */
.card {
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-out;
  transform: translateY(5rem);
}

.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------------------------
   Header (SP)
----------------------------- */

.lp-contents__header-sp {
  z-index: 1000;
  position: fixed;
  max-width: 39rem;
  width: 100%;
  top: 0;
  transition: .5s ease;
}
.lp-contents__header-sp.header__hidden{
transform: translateY(-100%);
}

.lp-contents__header-sp.active {
  background: #FFF;
}

.lp-contents__header-sp.active svg path {
  stroke: #000;
}

.header-sp__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 2.7rem 1.3rem 1.8rem;
}

.header-sp__logo {
  width: 17.016rem;
  height: 4.6rem;
}

.toggle_btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 3.05rem;
  height: 1.6rem;
  cursor: pointer;
  z-index: 9999;
}

.hamburger__bar {
  transform-box: fill-box;
  transform-origin: center;
  /* transition: all 1s ease-out; */
  transition: transform 0.25s ease, opacity 0.25s ease, stroke 0.25s ease;
}

.open .toggle_btn,
.toggle_btn svg {
  width: 3.05rem;
  height: 3.05rem;
}

.open .toggle_btn .hamburger__bar:nth-of-type(1) {
  transform: translateY(8px) rotate(45deg);
  stroke: #5196d2;
}

.open .toggle_btn .hamburger__bar:nth-of-type(2) {
  opacity: 0;
}

.open .toggle_btn .hamburger__bar:nth-of-type(3) {
  transform: translateY(-8px) rotate(-45deg);
  stroke: #5196d2;
}

/* Drawer nav (SP) */

.header__nav {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 34.4rem;
  width: 100%;
  height: 100dvh;
  background-color: #f3f3f9;
  padding: 6.7rem 2.1rem;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: transform 0.4s ease, opacity 0.4s ease, right 0.4s ease;
  overflow-y: scroll;
}

.open .header__nav {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#overlay {
  display: none;
}

.open #overlay {
  display: block;
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 22, 65, 0.3);

  z-index: 998;
  cursor: pointer;
}

.links__item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #5196d2;
  padding: 1.7em 0;
  cursor: pointer;
  gap: 1em;
}

.brand-sites__item,
.links__item {
  transition: all 0.5s ease;
}

.links__item:hover,
.brand-sites__item:hover {
  opacity: 0.5;
}

.header__nav .links__item:first-of-type {
  padding-top: 0;
}

.header__nav .links__item:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.brand-sites__item {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 72 / 47;
  border-radius: 2rem;
  background-color: white;
  box-shadow: 0 4px 9px 0 rgba(14, 46, 72, 0.1);
}

.company__brand-box {
  width: 100%;
  min-width: 6.4rem;
  aspect-ratio: 64/65;
  box-sizing: border-box;

  padding-inline: 7.906%;
  padding-block: 7.873%;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0.57rem;
  background-color: #fff;
}

.brand-sites__logo {
  display: block;
  margin: auto;
}

.brand-sites__logo--food-life {
  width: 6.73em;
  height: 5.1em;
}

.brand-sites__logo--sushiro {
  width: 3.99em;
  height: 3.72em;
}

.brand-sites__logo--kyoutaru {
  width: 6.59em;
  height: 3em;
}

.brand-sites__icon {
  position: absolute;
  bottom: 0.9em;
  right: 0.9em;
  width: 2.6em;
  height: 2.6em;
}

/* ---------------------------
   First View (Hero)
----------------------------- */
.fv-container {
  height: var(--fv-h);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-height: var(--fv-h);
  width: 100%;
  max-width: 39rem;
  display: grid;
  place-items: center;
  overflow: clip;
  z-index: 0;
}

.fv-container.is-hidden {
  display: none;
}

.bg-rotator {
  position: absolute;
  inset: 0;
  height: 100%;
}

.bg-rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 64, 91, 0.15);
  pointer-events: none;
}

.bg-rotator .bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 16s infinite;
}

.fv {
  position: relative;
  height: 100%;
}

.fv__line {
  color: var(--color-light);
  font-feature-settings: "vert" on;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.064rem;
  writing-mode: vertical-rl;
  position: fixed;
}

.fv__line--1 {
  top: 9.8rem;
  right: 3rem;
}

.fv__line--2 {
  top: auto;
  bottom: 5.5rem;
  right: auto;
  left: 4.1rem;
}

/* ---------------------------
   メイン wrapper
----------------------------- */
.lp-main {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 39rem;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 44px 0 rgba(0, 29, 51, 0.2);
}

/* ---------------------------
   メイン グループの企業理念 セクション
----------------------------- */
.company {
  margin-top: var(--fv-h);
  position: relative;
  margin-inline: auto;
  width: 100%;
  height: 123.8rem;
  z-index: 2;
  background-image: url(/group_recruiting_assets/images/referral/bg/bg1.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.company__content {
  display: flex;
  padding: 15rem 4.7rem 0;
  flex-direction: column;
  align-items: center;
  gap: 2.1rem;
}
.company .c-section-header{
  padding-top: 2rem;
}
.company__icon {
  min-width: 2.25rem;
  height: auto;
}

.company__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4.8rem;
  color: #000;
  text-align: center;
  font-family: var(--font-strong);
  font-style: normal;
  font-weight: 400;
  line-height: 2.7142;
  font-size: 1.4rem;
}

.company__brands {
  max-width: 33.79rem;
  width: 100%;
  margin: 0 auto 5.65rem;
  display: flex;
  flex-direction: row;
  gap: 1.158rem;
  justify-content: center;
}

.company__brand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 7.59rem;
  width: 100%;
  border-radius: 0.87rem;
  background-color: #f3f3f9;
  line-height: 0;
  padding: 0.6rem;
  aspect-ratio: 75.921 / 76.189;
}

.company__brand-box {
  width: clamp(64px, 10vw, 7.59rem);
  aspect-ratio: 75.921 / 76.189;
  /* ≈ 1 / 1 */
  box-sizing: border-box;

  padding-inline: 7.906%;
  padding-block: 7.873%;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0.57rem;
  background-color: #fff;
}

.company__brand-logo {
  display: block;

  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  line-height: 0;
}

.company__brand-logo--food-life {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 58.13/52.59;
}

.company__brand-logo--sushiro {
  max-width: 100%;
  max-height: 100%;
}

.company__brand-logo--kyoutaru {
  max-width: 100%;
  max-height: 100%;
}

/* ---------------------------
   メイン ギャラリー slider
----------------------------- */
.slider {
  width: 39rem;
  margin: 0 auto 8.8rem;
  position: relative;
  overflow: hidden;
}

.slider__track {
  position: relative;
  top: 0;
  left: 0;
  transform: translateX(-165%);
  display: inline-flex;
  gap: 1rem;
  height: 27.5rem;
  will-change: transform;
  animation: slide-rtl 24s linear infinite;
}

.slider__item {
  display: block;
  width: 14.6rem;
  height: 23.4rem;
  flex: 0 0 auto;
}

.slider__item:nth-of-type(even) {
  margin-top: 4.1rem;
}

.slider__item:nth-of-type(odd) {
  margin-bottom: 4.1rem;
}

@keyframes slide-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.company__staff-img {
  width: 100%;
  height: 39.0531rem;
  aspect-ratio: 260/390.53;
}

/* ---------------------------
   Shared section patterns メイン リファラル採用制度
----------------------------- */
.c-section {
  padding: 0 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.interview .c-section {
  padding: 0;
}

.c-section-header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.t-label {
  text-align: center;
  font-family: var(--font-strong);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7142;
}

.t-title {
  text-align: center;
  font-family: var(--font-strong);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.65;
}

.t-body {
  font-style: normal;
  font-weight: 400;
  width: 100%;
  max-width: 29.5rem;
  margin: auto;
  text-align: center;
  font-family: var(--font-strong);
  font-size: 1.4rem;
  line-height: 1.7857;
}

.section-divider {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 0;
  z-index: 5;
  width: 100%;
  line-height: 0;
}

.section-divider__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------
   Referral
----------------------------- */

.referral {
  position: relative;
  margin-inline: auto;
  background-color: #f3f3f9;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.about {
  padding-top:2rem;
  margin-top: 15rem;
  margin-bottom: 2rem;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

/* ---------------------------
   メイン メリット　セクション
----------------------------- */
#merit {
  margin-top: 5rem;
  padding-top: 2rem;
}

.merit__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 24.78rem;
}

.referral__benefits {
  display: flex;
  flex-direction: column;
  gap: 2.7rem;
}

.referral__benefit-text {
  text-align: center;
  font-family: var(--font-strong);
  font-style: normal;
  font-weight: 400;
  line-height: 2.2857;
}

.referral__benefit {
  background-color: white;
  border-radius: 1.5rem;
  display: flex;
  max-width: none;
  width: 100%;
  padding: 3.3rem 3.3rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.referral__benefit-title {
  text-align: center;
  font-family: var(--font-strong);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.referral__benefit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.referral__benefit-note {
  color: #5c5c5c;
  text-align: right;
  font-size: 1rem;
  font-style: normal;
  font-family: var(--font-strong);
  font-weight: 400;
  line-height: 3.4;
  font-family: var();
}

.referral__benefit-icon--list {
  max-width: 4.0171rem;
  height: auto;
}

.referral__benefit-icon--light {
  max-width: 10.4rem;
  height: auto;
}

.referral__benefit-icon--hands {
  max-width: 10.3091rem;
  height: auto;
}

.referral__benefit-icon--support {
  max-width: 8.55rem;
  height: auto;
}

/* ---------------------------
   メイン 応募フロー　セクション
----------------------------- */
.flow {
  padding-top: 15rem;
  height: auto;
  position: relative;
  background-color: white;
  width: 100%;
  z-index: 2;
}

.flow-section {
  padding-top: 2rem;
  padding-bottom: 9.19rem;
}

.flow__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.flow__steps {
  display: flex;
  flex-direction: column;
  gap: 9.1rem;
}

.flow__step {
  position: relative;
  display: flex;
  width: 100%;
  padding: 3.3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  border-radius: 2rem;
  background-color: #f3f3f9;
}

.step__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1rem;
}

.step__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6.6rem;
  width: 2.1rem;
  height: 6.1rem;
  aspect-ratio: 7 / 15;

  z-index: 1;
  background: url(/group_recruiting_assets/images/referral/icons/next.webp) center/contain no-repeat;
}

.flow__step-number--1 {
  max-width: 3.1106rem;

  height: auto;
}

.flow__step-number--2 {
  max-width: 4.3127rem;
  height: auto;
}

.flow__step-number--3 {
  max-width: 4.297rem;
  height: auto;
}

.flow__step-title {
  color: var(--02, #5196d2);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: var(--font-strong);

}

.flow__step-icon--mail {
  max-width: 7.4305rem;

  height: auto;
}

.flow__step-icon--people2 {
  max-width: 7.0009rem;

  height: auto;
}

.flow__step-icon--people1 {
  max-width: 4.3488rem;
  height: auto;
}

.flow__step-text {
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7857;
  color: var(--black, #342723);
  font-family: var(--font-main);
  font-size: 1.4rem;
  font-family: var(--font-strong);
}

.flow__link {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: white;
  box-shadow: 0 4px 9px 0 rgba(14, 46, 72, 0.1);
  border-radius: 2rem;
  height: 5.9rem;
  transition: all 0.5s ease;
  cursor: pointer;
}

.flow__link .links__icon {
  width: 3.4rem;
  height: 3.4rem;
}

.flow__link-text {
  font-family: var(--font-strong);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2857;
}

.flow__link:hover {
  opacity: 0.5;
}

/*アイコン*/

/* ---------------------------
   ナビゲーション　バー
----------------------------- */
/* Links in drawer */
.header__nav .links__list {
  border-radius: 2rem;
  background: var(--White, #fff);
  display: flex;
  padding: 2.2rem 2.8rem;
  width: 100%;
  flex-direction: column;
}

.header__nav .links__text {
  color: #000;
  font-family: var(--font-strong);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  margin: auto 0;
  min-width: 21.2rem;
}

.header__nav .links__item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #5196d2;
  padding: 1.7rem 0;
  cursor: pointer;
  gap: 1rem;
}

.header__nav .links__icon {
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
}

.header__nav .brand-sites__icon {
  position: absolute;
  width: 2.9rem;
  height: 2.9rem;
  bottom: 0.9rem;
  right: 0.9rem;
}

.header__nav .brand-sites__title {
  color: #000;
  font-family: var(--font-strong);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 1.8rem;
}

.header__nav .brand-sites {
  margin-top: 4.5rem;
  width: 100%;
}

.header__nav .brand-sites__list {
  width: 100%;
  border-top: 1px solid #5196d2;
  padding-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 2rem;
}

.header__nav .brand-sites__logo--food-life {
  width: 6.73rem;
  height: 5.1rem;
}

.header__nav .brand-sites__logo--sushiro {
  width: 3.99rem;
  height: 3.72rem;
}

.header__nav .brand-sites__logo--kyoutaru {
  width: 6.59rem;
  height: 3rem;
}

/* ---------------------------
   メイン インタビュー　セクション
----------------------------- */
.interview {
  z-index: 2;
  padding: 11.1rem 4.75rem 9.25rem;
  position: relative;
  width: 100%;
  min-height: 51.35rem;
  height: auto;
  color: var(--color-light);
  background-image: url(/group_recruiting_assets/images/referral/bg/bg2.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.interview .t-body {
  text-align: start;
}

.coming-soon-box {
  background-color: #114262;
  width: 100%;
  max-width: 29.5rem;
  padding: 2.22rem;
  border-radius: 1rem;
  margin-top: 3rem;
}

.coming-soon-text {
  font-family: var(--font-main);
  color: var(--color-light);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

/* ---------------------------
   Footer
----------------------------- */
.lp-left,
.lp-right {
  display: none;
}

.lp-main_footer {
  background-color: #f3f3f9;
  padding: 6.5777rem 3.25rem 2.6725rem 3.9rem;
  width: 100%;
  font-family: var(--font-strong);
  display: flex;
  width: 100%;
  flex-direction: column;
  position: relative;
  z-index: 2;
  gap: 3.5rem;
}

.lp-main_footer-sp {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;

  gap: 3.5rem;
}

.footer__companys {
  display: flex;
  width: 100%;
  max-width: 26.8rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

.footer__company__title-wrap {
  position: relative;
  padding: 0 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 11.7rem;
}

.footer__company__title {
  padding-top: 0.7rem;
  padding-bottom: 0.9rem;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  font-family: var(--font-strong);
}

.footer__company__text {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  font-family: var(--font-strong);
  margin-bottom: 0.6rem;
}

.footer__company__title-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.5rem;
  height: 11.7rem;
  border-top: 0.1rem solid #000;
  border-bottom: 0.1rem solid #000;
  border-left: 0.1rem solid #000;
}

.footer__company__title-wrap::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 11.7rem;
  top: 0;
  right: 0;
  border-top: 0.1rem solid #000;
  border-bottom: 0.1rem solid #000;
  border-right: 0.1rem solid #000;
}

.footer__links {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.footer__link {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 8.1rem;
  border-radius: 2rem;
  background-color: white;
  box-shadow: 0 4px 9px 0 rgba(14, 46, 72, 0.1);
  transition: all 0.5s ease;
}

.footer__link-text {
  font-family: var(--font-strong);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3846;
}

.footer__link:hover {
  opacity: 0.5;
}

.footer__link-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer__icon {
  min-width: 3.3rem;
  height: 3.3rem;
  aspect-ratio: 1/1;
  margin-right: 1.8rem;
  margin-left: auto;
}

.footer__brand-logo--food-life {
  width: 5.4rem;
  height: 4.1rem;
  aspect-ratio: 54/41;
  margin-left: 1.6rem;
  margin-right: 1.225rem;
}

.footer__brand-logo--Sushiro {
  width: 3.7567rem;
  height: 3.5rem;
  aspect-ratio: 37.57/35;
  margin-left: 2.421rem;
  margin-right: 2.022rem;
}

.footer__brand-logo--kyoutaru {
  width: 5.2743rem;
  height: 2.4rem;
  aspect-ratio: 52.74/24;
  margin-left: 2.1rem;
  margin-right: 1.126rem;
}

.lp-main_footer-text {
  color: #000;

  width: 100%;
  border-top: 1px solid #000;
  padding-top: 2.1rem;
  color: #000;

  text-align: center;
  font-family: var(--font-main);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 750px) {
  html {
    /* font-size: (基準rem(px) / デザイン幅) * 100vw; */
    font-size: 2.5641025641vw !important;
    min-width: 0;
  }

  :root {
    --pill-w: 100%;
  }

  .fv-container {
    left: 0 !important;
    transform: none !important;
  }

  .bg-rotator .bg-slide {
    background-position: 50% 15%;
  }

  .company::before,
  .interview::before {
    width: var(--pill-w) !important;
  }

  .company__brands {
    width: 100%;

    justify-content: space-around;
    align-items: center;
  }
}

@media (max-width: 500px) {

  .referral__benefits,
  .flow__steps,
  .interview .c-section {
    padding: 0;
  }
}

/* ---------------------------
   Responsive (>=1220px)
----------------------------- */
@media (min-width: 1024px) {
  html {
    font-size: 10px !important;
  }

  .lp-contents__header-sp {
    display: none;
  }

  .fv-container {
    display: grid;

    justify-content: center;
  }

  .fv {
    grid-column: 2;
  }

  .fv-lines {
    grid-column: 2;
  }

  .wrapper {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns:
      1fr 39rem 1fr;
    align-items: start;
    gap: 0;
    justify-content: center;
  }

  .lp-main {
    grid-column: 2;
  }

  .flow__link {
    display: none;
  }

  /* メイン フッター PC　*/
  .lp-main_footer-sp {
    display: none;
  }

  .lp-main_footer {
    display: block;
    width: 100%;
    height: 7.9rem;

    background-color: #fff;
  }

  .lp-main_footer p {
    color: #000;
    text-align: center;
    font-size: 1.2rem;

    font-weight: 500;
    line-height: 1.5;
    padding-top: 3.3rem;
  }

  .lp-main_footer-sp {
    display: none;
  }

  .lp-main_footer {
    background-color: #f3f3f9;
    padding: 0;
    width: 100%;
    font-family: var(--font-strong);
    display: block;
    width: 100%;

    gap: 0rem;
  }

  .lp-main_footer-text {
    width: 100%;
    border-top: none;
    padding: 3.3rem 0 2.8rem;
    color: #000;
    font-family: var(--font-main);

    text-align: center;
    font-size: 1.2rem;

    font-weight: 500;
    line-height: 1.5;
  }

  /* ---------------------------
   　PC　サイド　コンテイナー
----------------------------- */
  .lp-side__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    margin: auto;
    transform-origin: top center;
    transform: scale(var(--side-scale, 1));
  }

  .lp-right .lp-side__inner {
    max-width: 31em;
  }

  .lp-left .lp-side__inner {
    max-width: 32.2em;
  }

  .lp-left,
  .lp-right {
    font-size: 0.694444vw !important;
    display: flex;
    justify-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100% - 39rem) / 2);
    height: auto;
    margin: 0;
    z-index: 3;
    box-sizing: border-box;
  }

  /* ---------------------------
   　PC　左側 
----------------------------- */
  .lp-left {
    left: 0;
    right: auto;
  }

  .lp-left__logo {
    margin-bottom: 2.4em;
    width: 100%;
    aspect-ratio: 3.699 / 1;
    height: auto;
  }

  .lp-left svg {
    padding: 0 6.2em 0 5.9em;
    width: 100%;
    height: auto;
  }

  .lp-left__title-wrap {
    color: #000;
    font-family: var(--font-strong);
    position: relative;
    padding: 0 2.1em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 4.155em;
    max-width: 28.7406em;
    width: 100%;
    height: 11em;
  }

  .lp-left__title-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5em;
    height: 11em;
    border-top: 0.1em solid #000;
    border-bottom: 0.1em solid #000;
    border-left: 0.1em solid #000;
  }

  .lp-left__title-wrap::after {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 11em;
    top: 0;
    bottom: 0;
    right: 0;

    border-top: 0.1em solid #000;
    border-bottom: 0.1em solid #000;
    border-right: 0.1em solid #000;
  }

  .lp-left__title {
    padding: 0.7em 0;

    font-weight: 700;
    line-height: 1.3846;
  }

  .lp-left__title-span {
    font-size: 1.3em;
  }

  .lp-left__text {
    font-weight: 500;
    line-height: 1.5;
  }

  .lp-left__text-p {
    font-size: 1.2em;
  }

  .lp-left__title-wrap {
    /* 11rem → 高さが足りない時だけ下げる */
    height: clamp(9.2em, 14svh, 11em);
    padding-inline: clamp(1.6em, 2.3svh, 2.1em);
  }

  .footer__company__title {
    font-size: 1.3rem;
  }

  /* ---------------------------
   　PC　右側 
----------------------------- */
  .lp-right {
    right: 0;
    left: auto;
  }

  /* ---------------------------
   　PC　右側  ナビゲーション
----------------------------- */
  .lp-right .links__list {
    border-radius: 2em;
    background: var(--White, #fff);
    display: flex;
    padding: 2.2em 2.8em;
    width: 100%;
    flex-direction: column;
  }

  .lp-right .links__text {
    color: #000;
    font-family: var(--font-strong);
    min-width: 20em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    margin: auto 0;
  }

  .lp-right .links__item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #5196d2;
    padding: 1.7em 0;
    cursor: pointer;
    gap: 1em;
  }

  .lp-right .links__item:first-of-type {
    padding-top: 0;
  }

  .lp-right .links__item:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .lp-right .links__text-span {
    font-size: 1.3em;
  }

  .lp-right .brand-sites {
    margin-top: 4.5em;
    width: 100%;
  }

  .lp-right .brand-sites__title {
    color: #000;
    font-family: var(--font-strong);

    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 1.8em;
  }

  .lp-right .brand-sites__item {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 176/103;
    border-radius: 2em;
    background-color: white;
    box-shadow: 0 4px 9px 0 rgba(14, 46, 72, 0.1);
  }

  .lp-right .brand-sites__title-span {
    font-size: 1.5em;
  }

  .lp-right .brand-sites__list {
    width: 100%;
    border-top: 1px solid #5196d2;
    padding-top: 1.8em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6em 2em;
  }

  .lp-right .links__icon {
    width: 3.4em;
    height: 3.4em;
    display: block;
  }

  .lp-right .brand-sites__logo {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .lp-right .brand-sites__icon {
    position: absolute;
    width: 2.9em;
    height: 2.9em;
  }
}

@media (min-width: 1024px) and (max-height: 900px) {
  .lp-right .lp-side__inner {
    max-width: 31em;
  }

  .lp-left .lp-side__inner {
    max-width: 31em;
  }

  .links__list {
    padding: 1.6em 2em;
    border-radius: 1.6em;
  }

  .lp-left .links__item {
    padding-block: 1em;
  }

  .lp-right .links__text {
    font-size: 1em;
    min-width: 16em;
  }

  .lp-right .links__item {
    gap: 0.5em;
  }

  .brand-sites {
    margin-top: 3em;
  }

  .brand-sites__list {
    gap: 1em 1.4em;
  }

  .brand-sites__icon {
    width: 2.2em;
    height: 2.2em;
  }
}

@media (min-width: 1024px) and (max-height: 740px) {
  .links__list {
    padding: 1.2em 1.6em;
  }

  .links__item {
    padding-block: 0.7em;
  }

  .links__text {
    font-size: 1.1em;
  }

  .brand-sites {
    margin-top: 2em;
  }

  .brand-sites__list {
    gap: 0.8em 1em;
  }

  .brand-sites__item {
    min-height: 7.2em;
  }

  .brand-sites__icon {
    width: 2em;
    height: 2em;
  }
}