/* ==========================================================================
   Project Variables (このLP専用の設定)
  ========================================================================== */
:root {
  --layout-side-space: 3rem;
  --layout-max-width: 86rem;

  --height-cta-area: 9.5rem;
  --height-cta-button: 5.5rem;

  --color-red: #e60120;
  --color-gray-light: #ddd;
  --color-gray: #707070;
  --color-gold: #d4c78c;

  --shadow-base: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.15);

  --margin-bottom-sm: 1.5rem;
  --margin-bottom-base: 3rem;
  --margin-bottom-lg: 5rem;

  --layer-back: 30;
  --layer-content: 50;
  --layer-cta: 60;
  --layer-overlay: 70;
  --layer-modal: 500;

  --line-height-reset: 1;
  --line-height-tight: 1.5;
  --line-height-body: 1.7;
}
@media screen and (min-width: 768px) {
  :root {
    --layout-side-space: 9.5rem;
    --margin-bottom-sm: 3rem;
    --margin-bottom-base: 5rem;
    --margin-bottom-lg: 10rem;
  }
}

/* ==========================================================================
   base
  ========================================================================== */
section {
  position: relative;
  /* 背景画像より上にする */
}
h2:last-child,
.h2:last-child,
h3:last-child,
.h3:last-child,
p:last-child,
figure:last-child {
  margin-bottom: 0;
}
h2,
.h2,
h3,
.h3 {
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: var(--line-height-tight);
}

h2,
.h2 {
  font-size: 1.7em;
  /* margin-bottom: 1.6em; */
}
h3,
.h3 {
  font-size: 1.3em;
  /* margin-bottom: 0.8em; */
}

figure {
  margin-bottom: 1.4em;
}
@media screen and (min-width: 1280px) {
  html {
    font-size: 0.78125vw;
  }
}
@media screen and (min-width: 1536px) {
  html {
    font-size: 10px;
  }
}

/* ==========================================================================
   layout
  ========================================================================== */
.l-inner {
  padding-left: var(--layout-side-space);
  padding-right: var(--layout-side-space);

  max-width: var(--layout-max-width);
  margin-left: auto;
  margin-right: auto;
}
.l-inner--lg {
  max-width: 128rem;
}

@media screen and (min-width: 1024px) {
  .l-inner-pc-only {
    padding-left: var(--layout-side-space);
    padding-right: var(--layout-side-space);
  }
}
/* 固定背景 */
.l-fix-bg {
  height: 100vh;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
}
.l-fix-bg img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
}
/* 固定CTA */
.l-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--layer-content);

  display: flex;
  align-items: center;

  height: var(--height-cta-area);
  width: 100%;

  border-top: solid 1px var(--color-red);
  background-color: rgba(255, 255, 255, 0.9);
}

.l-floating-cta__button {
  width: 100%;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .l-floating-cta__button {
    transition: opacity 0.3s ease;
  }
  .l-floating-cta__button:hover {
    opacity: 0.7;
  }
}
.l-floating-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;

  height: var(--height-cta-button);
  width: 100%;
  max-width: 16em;
  margin-left: auto;
  margin-right: auto;

  font-size: 2rem;
  color: var(--color-red);
  background-color: #fff;
  border-radius: var(--height-cta-button);
  border: solid 2px var(--color-red);

  box-shadow: var(--shadow-base);
}
@media screen and (min-width: 1024px) {
  .l-floating-cta__link {
    border-radius: 1.2rem;
  }
}
/* ==========================================================================
   コンポーネント
  ========================================================================== */
/* 英字+日本語 中央寄せ */
.c-lp-title {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-align: center;
}
.c-lp-title > span {
  display: block;
}
.c-lp-title__sub {
  font-size: 0.5em;
}
/* セクション画像背景 */
.c-sec-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  pointer-events: none;
}
.c-sec-bg img {
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.c-sec-bg--white-10::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 2;
}
.c-sec-bg--white-65::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.65);
  z-index: 2;
}

.c-list-caution {
  display: flex;
  flex-direction: column;
}
.c-list-caution li {
  padding-left: 1em;
  position: relative;

  font-size: 0.85em; /* 14pxに対して*/
  line-height: var(--line-height-tight);
  font-feature-settings: "palt";
}
.c-list-caution li + li {
  /* 仮 */
  margin-top: 1rem;
}
.c-list-caution li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.c-list-numbering {
  line-height: var(--line-height-tight);
}
.c-list-numbering > li {
  display: flex;
  gap: 0.3em;
}
.c-list-numbering > li + li {
  margin-top: 1.5em;
}
.c-list-numbering__num {
  flex-shrink: 0;
}
.c-list-numbering__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.c-border-gray {
  position: relative;
  border: solid 1px#cccccc;
}

.c-text-caution {
  font-size: 10px;
  text-indent: -1em;
  padding-left: 1em;
}
.c-text-caution::before {
  content: "※";
}
/* ==========================================================================
   トップセクション
  ========================================================================== */
.p-sec-top {
  position: relative; /* 基準 */
  width: 100%;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .p-sec-top {
    padding-top: 0;
    padding-bottom: var(--section-space-v);
  }
}

.p-sec-top__inner {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 5rem;
}
@media screen and (min-width: 768px) {
  .p-sec-top__inner {
    gap: 10rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-sec-top__inner {
    gap: 15rem;
  }
}
.p-sec-top__footer {
  padding-left: var(--layout-side-space);
  padding-right: var(--layout-side-space);
}
@media screen and (min-width: 1024px) {
  .p-sec-top__footer {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* バリエーション（refaなし・東日本用） */
.p-sec-top--no-refa {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  .p-sec-top--no-refa {
    justify-content: center;
  }
}
/* ==========================================================================
   lineup
  ========================================================================== */
/* -------------------------
lineup__header 
-------------------------*/
.lineup__header {
  margin-bottom: 10rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .lineup__header {
    font-size: 1.2em;
  }
  .lineup__header .l-inner {
    padding-left: 0;
    padding-right: 0;
  }
}
/* lineup__tsuchya-logo */
.lineup__tsuchiya-logo {
  width: 6.8em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5em;
}
/* lineup__title */
.lineup__title {
  margin-bottom: 1em;
}
/* lineup__copy */
.lineup__copy {
  line-height: 2.5;
  letter-spacing: 0;
}
/* -------------------------
lineup__body 
-------------------------*/
/* lineup__body */
.lineup__body {
}

/* lineup__sub-title */
.lineup__sub-title {
  font-size: 2em;
  margin-bottom: var(--margin-bottom-base);
}

.lu_brand_wrap {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
@media screen and (min-width: 768px) {
  .lu_brand_wrap {
    flex-direction: row;
    gap: 3rem;
    font-size: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .lu_brand_wrap {
    font-size: 1.1rem;
  }
}
.p-card-brand {
  padding: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-card-brand {
    text-align: center;
  }
}
/* h3 */
.p-card-brand h3 {
  font-size: 1em;
  margin-bottom: 1.8em;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
h3 .brand_logo {
  display: block;
}
.lu_cardinal h3 .brand_logo {
  width: 20rem;
}
.lu_liznas h3 .brand_logo {
  width: 17rem;
}
@media screen and (min-width: 1024px) {
  h3 .brand_logo {
    margin-left: auto;
    margin-right: auto;
  }
}
.p-card-brand p {
  line-height: 2;
}
.p-card-brand .sub_ttl {
  font-size: 0.8em;
  margin-bottom: 1.6em;
  display: inline-block;
}

.p-card-brand__media {
  position: relative;
  margin-top: 2rem;
}
.p-card-brand__desc {
  font-size: 1.3em;
}

/* ==========================================================================
  case
  ========================================================================== */

.case {
  overflow: hidden;
  z-index: var(--layer-content);
}
.case:has(.is-active) {
  z-index: var(--layer-overlay);
}
.case__title {
  margin-bottom: var(--margin-bottom-base);
}
.case__sub-title {
  margin-bottom: var(--margin-bottom-sm);
}
.case_cnt {
  margin-bottom: var(--margin-bottom-lg);
}
@media screen and (min-width: 768px) {
  .case .inner {
    width: 100%;
  }
}

.cs_visual {
  position: relative;
}
.cs_visual > figure {
  position: relative;
  padding-top: 100%;
  margin-bottom: 0;
}
.cs_visual > figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cs_brand {
  background-color: #1a1311;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem 0.9rem;
}
.cs_brand .logo {
  width: 26%;
  margin-bottom: 0;
  line-height: 0;
}
.cs_brand .type {
  letter-spacing: 0.04em;
  font-size: 0.9em;
  padding-left: 0.9em;
  border-left: solid 1px #fff;
}

/* liznas */
.cs_cnt_liz_c .cs_brand .logo,
.cs_cnt_liz_s .cs_brand .logo {
  width: 23%;
}
/* and_select */
.cs_cnt_liz_s .cs_brand {
  background-color: #a9915b;
}
/* and_custom */
.cs_cnt_liz_c .cs_brand {
  background-color: #705f3f;
}

/*-------------------- case swiper --------------------*/
/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: var(--layer-modal);
  background-color: rgba(0, 0, 0, 0.7);
}

/* モーダル active */
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 0;
  cursor: pointer;

  /* 300ms~350msのタップ遅延対策 */
  transition: height 0s 400ms linear;
}
.modal.is-active .modal__overlay {
  height: 100vh;
}

/* モーダルのコンテンツ */
.modal__content {
  position: relative;
  width: 100%;
}
.modal_inner {
  position: relative;
}
.modal_cnt {
  max-width: 1280px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .modal_cnt {
    width: 88%;
  }
}

/* 閉じるボタン */
.modal__close-btn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 4.4rem;
  height: 4.4rem;
  cursor: pointer;
  z-index: var(--layer-modal);
}

@media screen and (min-width: 768px) {
  .modal__close-btn {
    width: 6.6rem;
    height: 6.6rem;
    top: 0;
    right: 0;
  }
  .modal__close-btn:hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 1024px) {
  .modal__close-btn {
    width: 66px;
    height: 66px;
  }
}
/* 閉じるボタンのX */
.lineClose {
  display: block;
  line-height: 1;
  width: 45%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.lineClose::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}

/* サムネイルswiper */
.swiper2_container {
  position: relative;
}
.swiper2 {
  overflow: visible;
}

/* 矢印 */

.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;

  position: absolute; /* relativeから変更 */
  top: 50%; /* 上下中央に配置 */
  transform: translateY(-50%); /* Y軸方向のズレを補正 */

  background-position: center;
  background-repeat: no-repeat;
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  margin-top: 0;
  background-color: rgba(68, 65, 63, 0.1);
  text-align: center;
}
.swiper-button-next {
  right: -2rem;
}
.swiper-button-prev {
  left: -2rem;
}
.modal .swiper-button-next {
  right: 0;
}
.modal .swiper-button-prev {
  left: 0;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  color: #fff;
  font-size: 0.8em;
  line-height: 4.4rem;
}
.swiper-button-next::after {
  content: "▶︎";
}
.swiper-button-prev::after {
  content: "◀︎";
}
@media screen and (min-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    background-color: rgba(68, 65, 63, 0.2);
  }
  .swiper-button-next {
    right: 0;
  }
  .swiper-button-prev {
    left: 0;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 0.6em;
  }
}
@media screen and (min-width: 1024px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 66px;
    height: 66px;
    font-size: 24px;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    line-height: 66px;
  }
  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background-color: rgba(68, 65, 63, 0.8);
  }
}

/* レイアウト */
.swiper2 figure {
  padding-top: 66.7%;
  height: 0;
  position: relative;
}
.swiper2 figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper2 .swiper-slide {
  width: 27rem;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .swiper2 .swiper-slide {
    width: 35rem;
  }
}
@media screen and (min-width: 1537px) {
  .swiper2 .swiper-slide {
    width: 420px;
  }
  .swiper2 .swiper-slide > figure {
    transition: opacity 0.3s ease;
  }
  .swiper2 .swiper-slide:hover > figure {
    opacity: 0.8;
  }
}
/* ==========================================================================
  キャンペーン情報
  ========================================================================== */
/* 大枠 */
.p-sec-campaign {
  position: relative;
}
.p-sec-campaign__inner {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-sec-campaign__inner {
    padding-left: 0;
    padding-right: 0;
  }
}
/* 中枠 */
.p-campaign-box {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 1024px) {
  .p-campaign-box {
    gap: 5rem;
  }
}
/* visual  */
.p-campaign-box__title:last-child,
.p-campaign-box__desc:last-child {
  margin-bottom: 0;
}
.p-campaign-box__title {
  margin-bottom: var(--margin-bottom-base);
}

.p-campaign-box__title--border {
  padding-bottom: var(--margin-bottom-base);
  border-bottom: solid 1px var(--color-gray);
}

.p-campaign-box__desc {
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-campaign-box__desc {
    margin-bottom: 2rem;
  }
}
.p-campaign-box__sub-desc {
  font-size: 0.95em;
  letter-spacing: 0;
  line-height: var(--line-height-tight);

  width: fit-content;
  margin-left: auto;
  margin-right: auto;

  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .p-campaign-box__sub-desc {
    text-align: center;
  }
}
/* 応募条件 */
.p-campaign-box__conditions-box {
  padding: 3rem;
  padding-top: 2.5rem;
  background-color: #fff;
  border-top: solid 0.5rem var(--color-red);
  box-shadow: var(--shadow-base);

  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .p-campaign-box__conditions-box {
    font-size: 1.6rem;
    gap: 2.5rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-campaign-box__conditions-box {
    padding: 3.5rem;
    padding-top: 3rem;
  }
}
.p-campaign-box__conditions-box--border-gold {
  border-top-color: var(--color-gold);
}
.p-campaign-box__conditions-box > dl div {
  display: flex;
}
.p-campaign-box__conditions-box > dl dt {
  min-width: 3.5em;
  flex-shrink: 0;
}

/* ==========================================================================
  募集要項
  ========================================================================== */
.p-sec-recruitment {
  position: relative;
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  .p-sec-recruitment {
    font-size: 1.6rem;
  }
}
.p-sec-recruitment__inner {
  position: relative;
  z-index: 2;
}
.p-sec-recruitment__title {
  font-size: 1.7em;
  margin-bottom: 3rem;
}
.p-sec-recruitment__body {
  padding: 3rem;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .p-sec-recruitment__body {
    padding: 5rem 4.5rem;
    background-color: #fff;

    letter-spacing: 0.1em;
    font-feature-settings: "palt";
  }
}
.p-sec-recruitment__list > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.p-sec-recruitment__list > div.p-sec-recruitment__gap-lg {
  gap: 1.5rem;
}
.p-sec-recruitment__list > div + div {
  margin-top: 3rem;
}
.p-sec-recruitment__list dt {
  font-size: 1.15em;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
}
.p-sec-recruitment__list dd {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.p-sec-recruitment__present {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-sec-recruitment__present {
    margin-top: 7.5rem;
  }
}
.p-sec-recruitment__rule-list {
  margin-top: 5rem;
}
.p-sec-recruitment__rule-list > li {
  font-size: 10px;
  line-height: var(--line-height-tight);
}
.p-sec-recruitment__rule-list > li + li {
  margin-top: 0.5em;
}
/* ==========================================================================
  contact  
  ========================================================================== */
.contact {
  z-index: var(--layer-overlay);
}
.contact h2 {
  text-align: center;
  margin-bottom: var(--margin-bottom-base);
}
.l-footer {
  z-index: 50;
  border-top: solid 1px var(--color-gray-light);
}
@media screen and (max-width: 429px) {
  .contact form {
    font-size: 14px;
  }
}
/* ==========================================================================
  form
  ========================================================================== */
.acceptance-999 {
  display: block;
}
.wpcf7c-btn-confirm,
.wpcf7c-btn-back {
  margin-top: 5rem;
}
/* ==========================================================================
  Utilities
  ========================================================================== */

/* bg-color */
.bg_beige {
  background-color: #e4ded1;
}
.bg_light_beige {
  background-color: #efeae1;
}
.bg_black_tp {
  background-color: rgba(0, 0, 0, 0.4);
}
.bg_dark_black_tp {
  background-color: rgba(0, 0, 0, 0.7);
}

.bg_white {
  background-color: #fff;
}
.bg_white_tp {
  background-color: rgba(255, 255, 255, 0.85);
}
.bg_white_tp-65 {
  background-color: rgba(255, 255, 255, 0.65);
}
.bg_white_tp-10 {
  background-color: rgba(255, 255, 255, 0.1);
}
.bg_yellow {
  background-color: #f5e928;
}
/* color */
.bg_black_tp,
.bg_dark_black_tp {
  color: #fff;
}
.bg_white,
.bg_white_tp,
.btn a {
  color: #3e3a39;
}

.ib {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .ib-pc {
    display: inline-block;
  }
}

.u-text-center {
  text-align: center;
}
.u-text-red {
  color: var(--color-red);
}
.cap {
  background-color: #fff;
  padding: 0.5em;
  padding-bottom: 0.4em;
  font-size: 0.8em;
  position: absolute;
  bottom: 1px;
  right: 1px;
  line-height: 1;
}

/* ==========================================================================
  東日本独自指定
  ========================================================================== */

@media screen and (min-width: 1024px) {
  .body-higashi-nihon .p-sec-top__inner {
    gap: 10rem;
  }
}