/*-------post------*/
.archive-post-title {
  font-size: var(--b-fs);
  font-weight: var(--b-fw);
}
.single-post-title {
  font-size: var(--b-fs);
  font-weight: var(--b-fw);
}
.breadcrumb {
  background: #1a1a1a;
  padding-inline: 5.55%;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}
.breadcrumb li::after {
  content: ">";
  margin: 0 1em;
  display: inline-block;
}
.breadcrumb li:last-child::after {
  content: none;
}
.breadcrumb li a,
.breadcrumb li {
  color: #fff;
}
.p-single__body {
  max-width: 950px;
  width: 100%;
  margin-inline: auto;
}
.pagination-area {
  margin-top: clamp(40px, var(--px-80), 80px);
}
.nav-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
/*-------hd------*/
.l-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 700;
  width: 100%;
  background: rgba(4, 4, 4, 0.65);
}
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, var(--px-30), 30px);
  min-height: var(--h-header);
  padding-inline: clamp(12px, var(--px-23), 23px);
}
.c-logo__link {
  display: block;
}
.c-logo img {
  width: clamp(200px, 26.806vw, 386px);
  height: auto;
}
.l-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(6px, var(--px-12), 12px);
}
.l-header__utility {
  display: flex;
  align-items: center;
  gap: clamp(14px, var(--px-30), 30px);
}
.c-sns-icon {
  display: block;
  line-height: 0;
}
.c-sns-icon img {
  width: clamp(26px, var(--px-35), 35px);
  height: auto;
}
/*-------btn------*/
.c-tel-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, var(--px-14), 14px);
  min-width: clamp(180px, 15.764vw, 227px);
  min-height: clamp(36px, var(--px-45), 45px);
  padding-inline: clamp(12px, var(--px-20), 20px);
  border-radius: 49px;
  /* ホバーで ::before が左にはみ出すので、ピルの輪郭で切る */
  overflow: hidden;
  background: var(--c-red-deep);
  color: var(--c-white);
  line-height: 1;
}
.c-tel-btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 55.51%;
  border-radius: 100px 49px 49px 0;
  background: var(--c-red);
}
.c-tel-btn__icon,
.c-tel-btn__num {
  position: relative;
}
.c-tel-btn__icon {
  line-height: 0;
}
.c-tel-btn__icon img {
  width: clamp(16px, var(--px-22), 22px);
  height: auto;
}
.c-tel-btn__num {
  font-size: clamp(17px, var(--px-24), 24px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/*-------nav------*/
.c-nav__list {
  display: flex;
  align-items: center;
}
.c-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.c-nav__item + .c-nav__item::before {
  content: "｜";
  margin-inline: clamp(4px, var(--px-17), 17px);
  color: var(--c-white);
  font-weight: 600;
  line-height: 1.5;
}
.c-nav__link {
  display: block;
  color: var(--c-white);
  font-size: clamp(13px, var(--px-16), 16px);
  line-height: 1.5;
  white-space: nowrap;
}
.c-nav__child {
  position: absolute;
  /* ヘッダー下端にぴったり付ける（間を空けるとホバーが切れる） */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(130px, 10.486vw, 151px);
  background: rgba(137, 16, 17, 0.8);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease-in-out,
    visibility 0.25s ease-in-out;
}
.c-nav__item--has-child:hover .c-nav__child,
.c-nav__item--has-child:focus-within .c-nav__child {
  opacity: 1;
  visibility: visible;
}
.c-nav__child-item + .c-nav__child-item {
  margin-inline: 3%;
  border-top: 1px dotted rgba(255, 255, 255, 0.8);
}
.c-nav__child-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.833vw, 12px);
  /* 1行 48px（Figma）＝ 行送り24px + 上下12px */
  padding-block: clamp(8px, 0.833vw, 12px);
  color: var(--c-white);
  font-size: clamp(13px, var(--px-16), 16px);
  line-height: 1.5;
}
/* ラベル右の小さな三角 */
.c-nav__child-link::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: clamp(4px, 0.417vw, 6px) solid currentColor;
  border-top: clamp(2px, 0.208vw, 3px) solid transparent;
  border-bottom: clamp(2px, 0.208vw, 3px) solid transparent;
}
.c-nav__child-link::after {
  content: "";
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent var(--c-white);
}
/*-------ft-----*/
.l-footer {
  background: var(--c-black);
}
.l-footer__inner {
  padding: clamp(30px, var(--px-54), 54px) clamp(20px, var(--px-48), 48px)
    clamp(24px, var(--px-32), 32px);
}
.l-footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, var(--px-78), 78px);
}
.l-footer__brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, var(--px-22), 22px);
}
.c-footer-logo__link {
  display: block;
}
.c-footer-logo img {
  width: clamp(200px, 26.806vw, 386px);
  height: auto;
}
.c-footer-address {
  font-size: clamp(13px, var(--px-15), 15px);
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 2;
  white-space: nowrap;
}
.c-footer-nav__list {
  display: flex;
  align-items: center;
}
.c-footer-nav__item {
  display: flex;
  align-items: center;
}
.c-footer-nav__item + .c-footer-nav__item::before {
  content: "｜";
  margin-inline: clamp(4px, var(--px-17), 17px);
  font-weight: 600;
  line-height: 1.5;
}
.c-footer-nav__link {
  display: block;
  font-size: clamp(13px, var(--px-16), 16px);
  line-height: 1.5;
  white-space: nowrap;
}
.c-copyright {
  margin-top: clamp(28px, var(--px-83), 83px);
  font-size: clamp(11px, var(--px-14), 14px);
  letter-spacing: 0.06em;
  line-height: 2;
}
/*-------pagetop / SP fixed bar------*/
.c-pagetop__link {
  display: block;
  line-height: 0;
}
.c-pagetop img {
  width: clamp(56px, var(--px-76), 76px);
  height: auto;
}
body .c-footer-icons {
  z-index: 600;
  gap: 1px;
}
body .c-footer-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--h-spbar);
  padding: 6px 4px;
  background: var(--c-red);
  color: var(--c-white);
  line-height: 1;
}
.c-footer-icons__item--tel {
  flex: 205;
}
.c-footer-icons__item--access {
  flex: 103;
}
.c-footer-icons__item--top {
  flex: 65;
  background: var(--c-red-deep);
}
.c-footer-icons__item img {
  width: auto;
  height: 22px;
}
.c-footer-icons__item--top img {
  height: 30px;
}
.c-footer-icons__num {
  font-size: 22px;
}
.c-footer-icons__label {
  font-size: 15px;
}
/*-------fv------*/
.p-index-fv {
  position: relative;
}
.p-index-fv__media {
  line-height: 0;
}
.p-index-fv__img,
.p-index-fv__video {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 910;
  object-fit: cover;
  object-position: 83% center;
}
.p-index-fv__copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding-inline: 5.55%;
}
.p-index-fv__copy img {
  width: clamp(280px, 33.82vw, 487px);
  height: auto;
}
/*-------concept------*/
.p-index-concept {
  padding-block: clamp(30px, var(--px-41), 41px) clamp(36px, var(--px-54), 54px);
  overflow: hidden;
}
.p-index-concept__lead {
  margin-bottom: clamp(34px, var(--px-75), 75px);
  font-size: clamp(19px, var(--px-40), 40px);
  letter-spacing: 0.06em;
  line-height: 1.65;
  text-align: center;
}
.p-index-concept__body {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, var(--px-61), 61px);
  padding-left: clamp(10px, var(--px-28), 28px);
}
.p-index-concept__rail {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: clamp(10px, var(--px-27), 27px);
}
.p-index-concept__en {
  margin-top: clamp(6px, var(--px-16), 16px);
  writing-mode: vertical-rl;
  font-family: var(--f-en);
  font-size: clamp(26px, var(--px-64), 64px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 0.8;
}
.p-index-concept__line {
  align-self: stretch;
  width: 1px;
  background: var(--c-white);
}
.p-index-concept__loop {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.p-index-concept__track {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(12px, var(--px-30), 30px);
  padding-right: clamp(12px, var(--px-30), 30px);
  animation: p-concept-loop 40s linear infinite;
}
@keyframes p-concept-loop {
  to {
    transform: translateX(-100%);
  }
}
.p-index-concept__loop:hover .p-index-concept__track,
.p-index-concept__loop:focus-within .p-index-concept__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .p-index-concept__track {
    animation: none;
  }
  .p-index-concept__loop {
    overflow-x: auto;
  }
}
/*-------concept card------*/
.c-concept-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: clamp(240px, 24.306vw, 350px);
  background: var(--c-white);
}
.c-concept-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 350 / 272;
  object-fit: cover;
}
.c-concept-card__body {
  flex: 1;
  padding: clamp(10px, var(--px-19), 19px) clamp(6px, var(--px-9), 9px)
    clamp(10px, var(--px-19), 19px);
}
.c-concept-card__head {
  display: flex;
  align-items: center;
  gap: clamp(8px, var(--px-16), 16px);
}
.c-concept-card__num {
  flex: 0 0 auto;
  color: var(--c-red-deep);
  font-size: clamp(32px, var(--px-48), 48px);
  font-weight: 600;
  line-height: 1;
}
.c-concept-card__title {
  position: relative;
  /* ::after の筆ラインを文字の下に敷くための重なり基準 */
  z-index: 0;
  color: #333;
  font-size: clamp(18px, var(--px-26), 26px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.23;
  white-space: nowrap;
  /* 筆ラインの上でも読めるようにする白フチ。
     stroke は文字の輪郭を中心に引かれるので、外側に出るのは指定値の半分
     ＝ 0.154em（26px時に4px）で、デザインどおり外側2pxになる */
  -webkit-text-stroke: 0.154em var(--c-white);
  paint-order: stroke fill;
}
/* 筆ライン。SVGの実寸は 256.226×46.707 で、Figma では 2.94deg 傾けて置いてある。
   以前は傾き無しで 258×60 に引き伸ばしていたため、縦に 1.285 倍太っていた。
   em は見出し(26px)基準。 */
.c-concept-card__title::after {
  content: "";
  position: absolute;
  left: -0.33em;
  bottom: -1.202em;
  width: 9.855em;
  height: 1.796em;
  background: url("../img/index/concept-brush.svg") no-repeat center / 100% 100%;
  transform: rotate(2.94deg);
  /* 文字より後ろに敷く（絶対配置のままだと文字の上に乗ってしまう） */
  z-index: -1;
  pointer-events: none;
}
.c-concept-card__text {
  margin-top: clamp(16px, var(--px-27), 27px);
  color: #333;
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.06em;
  line-height: 1.75;
  text-align: center;
}
.c-more-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, var(--px-7), 7px);
  min-height: clamp(40px, var(--px-50), 50px);
  padding-inline: clamp(10px, var(--px-16), 16px);
  background:
    url("../img/index/btn-shape.svg") no-repeat right center,
    var(--c-red-deep);
  /* 2枚目（背景色レイヤー）が auto のままだと補間できず transition が効かないので、
     両レイヤーとも明示する */
  background-size:
    51% 100%,
    100% 100%;
  color: var(--c-white);
  font-size: clamp(13px, var(--px-16), 16px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.75;
}
.c-more-btn__text,
.c-more-btn__arrow {
  position: relative;
}
.c-more-btn__arrow {
  width: clamp(26px, var(--px-37), 37px);
  height: auto;
}
/*-------ipad----*/
@media screen and (max-width: 1180px) {
  .c-footer-address {
    white-space: normal;
  }
}
/*-------ipad-air----*/
@media screen and (max-width: 820px) {
  .l-footer__main {
    flex-direction: column;
    gap: clamp(20px, var(--px-30), 30px);
  }
  .l-footer__brand {
    flex-direction: column;
    text-align: center;
  }
  .c-copyright {
    margin-top: clamp(24px, var(--px-40), 40px);
  }
}
/*-------iphone----*/
@media screen and (max-width: 680px) {
  :root {
    --h-header: 50px;
  }
  /* SPはヘッダーを常時追従にする。FVを抜けた時のスライドダウンも無し
     （JSが付ける .is-fixed は見た目に影響しなくなる） */
  .l-header {
    position: fixed;
  }
  .l-header.is-fixed {
    animation: none;
  }
  .p-index-fv__img,
  .p-index-fv__video {
    aspect-ratio: 375 / 720;
    object-position: center;
  }
  .p-index-fv__copy img {
    width: 90.4vw;
  }
  /* CONCEPT：ラベルは横組み、カードは84vw */
  .p-index-concept {
    padding-top: 56px;
    padding-bottom: 0;
  }
  .p-index-concept__lead {
    margin-bottom: 70px;
    font-size: 7.4vw;
    line-height: 1.68;
  }
  .p-index-concept__body {
    flex-direction: column;
    gap: 0;
    padding-left: 0;
  }
  .p-index-concept__rail {
    justify-content: center;
    margin-bottom: 70px;
  }
  .p-index-concept__en {
    writing-mode: horizontal-tb;
    font-size: 40px;
    line-height: 1.25;
  }
  .p-index-concept__line {
    display: none;
  }
  .c-concept-card {
    width: 84vw;
  }
  .c-concept-card__title {
    font-size: 5.07vw;
  }
  .c-concept-card__num {
    font-size: 11.2vw;
  }
  .c-concept-card__text {
    font-size: 3.9vw;
  }
  body {
    padding-bottom: var(--h-spbar);
  }
  body.is-active {
    overflow: hidden;
  }
  .l-header__inner {
    /* 右端はハンバーガー（fixed 42px）の逃げを確保する */
    padding-left: 8px;
    padding-right: 61px;
  }
  .c-logo img {
    width: 176px;
  }
  .l-header__right {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .l-header__utility {
    gap: 16px;
  }
  .l-header__utility .c-tel-btn {
    display: none;
  }
  .c-sns-icon img {
    width: 30px;
  }
  /* ドロワー内 */
  .c-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .c-nav__item {
    flex-direction: column;
    width: 100%;
  }
  .c-nav__item + .c-nav__item::before {
    content: none;
  }
  .c-nav__link {
    padding: 1em 0;
    font-size: 17px;
    text-align: center;
  }
  .c-nav__child {
    position: static;
    width: 100%;
    padding-block: 0 0.5em;
    transform: none;
    background: none;
    opacity: 1;
    visibility: visible;
  }
  .c-nav__child-item + .c-nav__child-item {
    margin-inline: 0;
    border-top: none;
  }
  .c-nav__child-link::after {
    content: none;
  }
  .c-nav__child-link {
    padding-block: 0.5em;
    font-size: 15px;
    opacity: 0.85;
  }
  .c-nav__foot {
    margin-top: 24px;
    text-align: center;
  }
  .c-nav__hours {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.8;
  }
  /* フッター */
  .l-footer__inner {
    padding: 40px 20px 24px;
  }
  .c-footer-logo img {
    width: 300px;
  }
  .c-footer-address {
    font-size: 14px;
    text-align: center;
  }
  .c-footer-nav__list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    column-gap: 32px;
    row-gap: 30px;
  }
  .c-footer-nav__item + .c-footer-nav__item::before {
    content: none;
  }
  .c-footer-nav__link {
    font-size: 16px;
  }
  .c-copyright {
    margin-top: 34px;
    font-size: 12px;
  }
  body .c-footer-icons.SP {
    display: flex;
  }
}
/* CSS Document */

/* =========================================================
   共通パーツ（TOP以降で使い回す）
========================================================= */
/*-------section title（英字＋下線／MENU・CONTACT）------*/
.c-sec-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-sec-title__en {
  font-family: var(--f-en);
  font-size: clamp(40px, 4.444vw, 64px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 0.8;
}
.c-sec-title__line {
  width: clamp(262px, 22.917vw, 330px);
  height: 1px;
  margin-top: clamp(20px, 1.875vw, 27px);
  background: var(--c-white);
}

/*-------pill button（右側だけ明るい赤の2トーン）------*/
.c-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, var(--px-16), 16px);
  min-width: clamp(200px, 15.764vw, 227px);
  padding-block: clamp(5px, 0.486vw, 7px);
  padding-inline: clamp(18px, 1.736vw, 25px) clamp(16px, 1.667vw, 24px);
  border-radius: 999px;
  /* ホバーで ::before が左にはみ出すので、ピルの輪郭で切る */
  overflow: hidden;
  background: var(--c-red-deep);
  color: var(--c-white);
  font-size: clamp(14px, var(--px-16), 16px);
  letter-spacing: 0.06em;
  line-height: 1.75;
}
/* 右 44.5% を明るい赤で重ねる。左下だけ角を残すのがデザインの形 */
.c-btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 55.5%;
  border-radius: 100px 49px 49px 0;
  background: var(--c-red);
}
.c-btn__text,
.c-btn__arrow,
.c-btn__icon {
  position: relative;
}
.c-btn__arrow {
  width: clamp(26px, var(--px-37), 37px);
  height: auto;
}
.c-btn--outline {
  border: 1px solid var(--c-white);
}
.c-btn--center {
  justify-content: center;
}
/* TEL（CONTACT の電話番号ボタン） */
.c-btn--tel {
  justify-content: center;
  gap: clamp(10px, 1.02vw, 15px);
  min-width: clamp(280px, 23.264vw, 335px);
  padding-block: clamp(9px, 0.903vw, 13px);
  padding-inline: clamp(20px, 2.049vw, 30px);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1;
}
.c-btn--tel .c-btn__icon {
  display: flex;
  flex: 0 0 auto;
  width: clamp(24px, 2.222vw, 32px);
}
.c-btn--tel .c-btn__icon img {
  width: 100%;
  height: auto;
}
/* ホバー：明るい赤の形が左へ伸びてボタン全体を覆う。
   .c-more-btn は背景画像なので background-size、.c-btn は ::before なので left で
   同じ動きにしている（130% ＝ 左端から 30% はみ出す、に対応） */
.c-more-btn {
  transition: background-size 0.3s ease;
}
.c-btn::before,
.c-tel-btn::before {
  transition: left 0.3s ease;
}
a.c-btn:hover::before,
a:hover .c-btn::before,
a.c-tel-btn:hover::before {
  left: -30%;
}
/* CONCEPT のボタンは、右側の形（btn-shape.svg）を 51% → 120% に広げて全体を覆う */
a.c-more-btn:hover,
a:hover .c-more-btn {
  background-size:
    130% 100%,
    100% 100%;
}
/* 個別のホバー演出を持つリンクでは、common.css の a:hover{opacity:.6} を打ち消す
   （半透明になると、赤のベタ塗り・暗幕・スマホの回転が濁って見えるため） */
a.c-btn:hover,
a.c-more-btn:hover,
a.c-tel-btn:hover,
a.c-menu-card:hover,
a.p-index-insta__banner:hover {
  opacity: 1;
}

/* =========================================================
   TOP / Instagram
========================================================= */
.p-index-insta {
  padding-block: clamp(60px, 8.611vw, 124px) clamp(40px, 5.208vw, 75px);
}
.p-index-insta__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.056vw, 44px);
}
.p-index-insta__logo {
  flex: 0 0 auto;
  width: clamp(96px, 10.903vw, 157px);
  height: auto;
}
.p-index-insta__account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.389vw, 20px);
}
.p-index-insta__id {
  font-size: clamp(15px, var(--px-20), 20px);
  letter-spacing: 0.05em;
  line-height: 1;
}
.p-index-insta__label {
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.05em;
  line-height: 1;
}
/* フィード枠：プラグインを入れるとこの中身が置き換わる */
.p-index-insta__feed {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, clamp(300px, 69.375vw, 999px));
  margin-top: clamp(28px, 4.306vw, 62px);
  margin-inline: auto;
}
.p-index-insta__cell {
  display: block;
  aspect-ratio: 3 / 4;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px #040404;
}
.p-index-insta__banner {
  display: block;
  width: min(100%, clamp(280px, 50.764vw, 731px));
  margin-top: clamp(24px, 2.639vw, 38px);
  margin-inline: auto;
}
.p-index-insta__banner-img {
  width: 100%;
  height: auto;
}

/*-------instagram banner（PC）------*/
/* バナーは「1枚の絵」なので、中の重なりだけ絶対配置で組んでいる（レイアウト用途ではない）。
   数値はすべて Figma の 731×370 に対する比率。ホバーでスマホの傾きが 4.11deg → -6.76deg に反転する。 */
.c-ig-banner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 731 / 370;
}
.c-ig-banner > * {
  position: absolute;
}
.c-ig-banner__card {
  left: 0;
  top: 23.79%;
  box-sizing: border-box;
  width: 95.75%;
  height: 70.29%;
  border: clamp(3px, 0.556vw, 8px) solid var(--c-red-deep);
  border-radius: clamp(2px, 0.347vw, 5px);
  background: var(--c-white);
}
.c-ig-banner__wagara {
  left: 1.09%;
  top: 26.22%;
  width: 78.64%;
  height: 41.09%;
  object-fit: cover;
}
.c-ig-banner__strip1 {
  left: 1.09%;
  top: 62.18%;
  width: 56.35%;
  height: 29.74%;
  object-fit: cover;
}
.c-ig-banner__strip2 {
  left: 57.45%;
  top: 62.18%;
  width: 32.28%;
  height: 30.01%;
  object-fit: cover;
}
.c-ig-banner__logo {
  left: 2.05%;
  top: 26.22%;
  width: 39.93%;
  height: 19.44%;
}
.c-ig-banner__mark {
  left: 36.25%;
  top: 40.82%;
  width: 10.67%;
  height: 21.09%;
}
/* follow me は Figma 側で -10.51deg 回転している。素材は回転前のものを使い、
   回転後の外枠（199.63×157.5）と中心が合う位置・サイズで置いてから回す */
.c-ig-banner__follow {
  left: 46.11%;
  top: 16.3%;
  width: 24.55%;
  height: 34.31%;
  transform: rotate(-10.51deg);
}
.c-ig-banner__more-line {
  left: 46.92%;
  top: 53.66%;
  width: 25.31%;
  height: 5.95%;
  background: url("../img/index/ig-underline.svg") no-repeat center / 100% 100%;
}
.c-ig-banner__more {
  top: 50.82%;
  right: 30.24%;
  color: var(--c-red-deep);
  font-size: clamp(8px, var(--px-18), 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.667;
  white-space: nowrap;
}
.c-ig-banner__lead {
  left: 2.74%;
  top: 48.12%;
  color: var(--c-red-deep);
  font-size: clamp(7px, var(--px-16), 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}
.c-ig-banner__phone {
  left: 70.18%;
  top: 0.81%;
  width: 30.98%;
  height: 102.18%;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
  transform-origin: 95% 87%;
  transition: transform 0.45s ease;
}
/* ホバー：画像に 4.11deg が焼き込まれているので、差分の -10.87deg を掛けて -6.76deg にする */
a:hover .c-ig-banner__phone {
  transform: rotate(-10.87deg);
}
.p-index-line {
  padding-bottom: clamp(50px, 6.94vw, 100px);
}
.p-index-line__link {
  display: block;
  width: min(100%, clamp(280px, 48.61vw, 700px));
  margin-inline: auto;
}
.p-index-line__link img {
  width: 100%;
  height: auto;
}
/* =========================================================
   TOP / MENU
========================================================= */
.p-index-menu {
  padding-block: clamp(35px, 3.819vw, 55px) clamp(50px, 5.417vw, 78px);
  background: url("../img/index/menu-bg.jpg") no-repeat center center / cover;
}
.p-index-menu__list {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3.819vw, 55px);
  margin-top: clamp(28px, 3.403vw, 49px);
}
.p-index-menu__item {
  flex: 0 1 clamp(200px, 23.194vw, 334px);
}
/*-------menu card------*/
.c-menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 334 / 574;
  padding-bottom: 26.83%; /* カード高さに対する下余白（デザイン 154/574） */
  color: var(--c-white);
}
.c-menu-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ホバー：カード全面に赤いオーバーレイを敷き、見出し・説明文とボタンを出す */
.c-menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.c-menu-card:hover::after {
  opacity: 1;
}
.c-menu-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 82.04%;
}
.c-menu-card__title {
  align-self: flex-start;
  font-size: clamp(18px, 1.806vw, 26px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.c-menu-card__text {
  align-self: flex-start;
  margin-top: clamp(4px, 0.417vw, 6px);
  font-size: clamp(12px, var(--px-16), 16px);
  letter-spacing: 0.02em;
  line-height: 1.9;
  text-align: left;
}
.c-menu-card__btn {
  justify-content: center;
  margin-top: clamp(20px, 3.194vw, 46px);
}
/* 通常時は「焼肉」だけ、ホバー時は見出し・説明文＋「詳しくはこちら」に入れ替える */
.c-menu-card__title,
.c-menu-card__text,
.c-menu-card__more,
.c-menu-card__arrow {
  display: none;
}
.c-menu-card:hover .c-menu-card__title,
.c-menu-card:hover .c-menu-card__text,
.c-menu-card:hover .c-menu-card__more,
.c-menu-card:hover .c-menu-card__arrow {
  display: block;
}
.c-menu-card:hover .c-menu-card__label {
  display: none;
}
.c-menu-card:hover .c-menu-card__btn {
  justify-content: space-between;
}

/* =========================================================
   TOP / COMMITMENT
========================================================= */
.p-index-commitment {
  padding-top: clamp(60px, 9.167vw, 132px);
}
.p-index-commitment__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3.403vw, 49px);
}
.p-index-commitment__media {
  flex: 0 0 50%;
  margin-top: clamp(4px, 0.694vw, 10px);
}
.p-index-commitment__media img {
  display: block;
  width: 100%;
  /* height 属性（584）が効くと aspect-ratio が無視されるので auto に戻す */
  height: auto;
  aspect-ratio: 720 / 584;
  object-fit: cover;
}
.p-index-commitment__body {
  flex: 0 1 clamp(300px, 36.25vw, 522px);
}
.p-index-commitment__title {
  font-size: clamp(24px, 2.778vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.p-index-commitment__text {
  margin-top: clamp(20px, 3.75vw, 54px);
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.06em;
  line-height: 2.1875;
}
.p-index-commitment__btn {
  margin-top: clamp(24px, 5.417vw, 78px);
  margin-inline: auto;
  display: flex;
  width: fit-content;
}
.p-index-commitment__rail {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: clamp(10px, 2.222vw, 32px);
  margin-left: auto;
  padding-right: clamp(10px, 2.153vw, 31px);
}
.p-index-commitment__line {
  flex: 1;
  width: 1px;
  background: var(--c-white);
}
.p-index-commitment__en {
  writing-mode: vertical-rl;
  font-family: var(--f-en);
  font-size: clamp(30px, 4.444vw, 64px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 0.8;
}

/* =========================================================
   TOP / キャンペーンバナー
========================================================= */
.p-index-banner {
  padding-top: clamp(50px, 12.917vw, 186px);
}
.p-index-banner__link {
  display: block;
  width: min(100%, clamp(300px, 69.444vw, 1000px));
  margin-inline: auto;
}
.p-index-banner__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   TOP / 店舗案内へ・採用情報へ
========================================================= */
.p-index-guide {
  padding-top: clamp(50px, 15.486vw, 223px);
}
.p-index-guide__list {
  display: flex;
}
.p-index-guide__item {
  flex: 1 1 50%;
  min-width: 0;
}
/*-------guide card------*/
.c-guide-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 720 / 440;
  color: var(--c-white);
}
.c-guide-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-guide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.c-guide-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.056vw, 44px);
  text-align: center;
}
.c-guide-card__title {
  font-size: clamp(18px, 2.083vw, 30px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
/* 採用情報の「＼　／」飾り */
.c-guide-card__title--slash {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.972vw, 14px);
}
.c-guide-card__title--slash::before,
.c-guide-card__title--slash::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(16px, 1.66vw, 24px);
  aspect-ratio: 1;
  background: url("../img/index/recruit-slash.svg") no-repeat center / contain;
}
.c-guide-card__title--slash::before {
  transform: scaleX(-1);
}

/* =========================================================
   CONTACT（TOP・下層で共通）
========================================================= */
.c-contact {
  position: relative;
  padding-block: clamp(50px, 6.528vw, 94px) clamp(50px, 6.389vw, 92px);
  background: url("../img/index/contact-bg.jpg") no-repeat center center / cover;
}
.c-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.53) 0%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.53) 100%
  );
}
.c-contact > .l-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-contact__lead {
  margin-top: clamp(24px, 3.333vw, 48px);
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.05em;
  line-height: 2.1875;
  text-align: center;
}
.c-contact__hours {
  margin-top: clamp(18px, 1.875vw, 27px);
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.05em;
  line-height: 2.1875;
  text-align: center;
}
.c-contact .c-btn--tel {
  margin-top: clamp(24px, 2.639vw, 38px);
}

/* =========================================================
   MAP（TOP・下層で共通）
========================================================= */
.c-map__frame {
  display: block;
  width: 100%;
  height: clamp(200px, 24.444vw, 352px);
  border: 0;
}

/*-------ipad----*/
@media screen and (max-width: 1180px) {
  .p-index-commitment__text {
    line-height: 1.9;
  }
}
/*-------ipad-air----*/
@media screen and (max-width: 820px) {
  .p-index-insta__feed {
    grid-template-columns: repeat(4, 1fr);
  }
  .p-index-commitment__media {
    flex: 0 0 55%;
  }
  .p-index-commitment__body {
    flex: 1 1 300px;
  }
}
/*-------iphone----*/
@media screen and (max-width: 680px) {
  /* --- 共通パーツ --- */
  .c-sec-title__en {
    font-size: 40px;
    line-height: 1.25;
  }
  .c-sec-title__line {
    width: 69.87vw;
    margin-top: 7.2vw;
  }
  .c-btn {
    min-width: 60.53vw;
    padding-block: 1.87vw;
    padding-inline: 6.67vw 6.4vw;
    font-size: 15px;
  }
  .c-btn--tel {
    min-width: 89.33vw;
    padding-block: 4.27vw;
    font-size: 26px;
  }
  .c-btn--tel .c-btn__icon {
    width: 30px;
  }

  /* --- Instagram --- */
  .p-index-insta {
    padding-block: 23.2vw 24.93vw;
  }
  .p-index-insta__head {
    flex-direction: column;
    gap: 4.67vw;
  }
  .p-index-insta__logo {
    width: 31.87vw;
  }
  .p-index-insta__account {
    gap: 3.47vw;
  }
  .p-index-insta__id {
    font-size: 14px;
  }
  .p-index-insta__label {
    font-size: 13px;
  }
  .p-index-insta__feed {
    grid-template-columns: repeat(3, 1fr);
    width: 79.73vw;
    margin-top: 11.2vw;
  }
  .p-index-insta__banner {
    width: 89.33vw;
    margin-top: 19.87vw;
  }

  /* --- MENU：写真の上に赤いボックスを重ねるSPレイアウト --- */
  .p-index-menu {
    padding-block: 9.33vw 22.67vw;
  }
  .p-index-menu__list {
    flex-direction: column;
    align-items: center;
    gap: 11.2vw;
    margin-top: 12.53vw;
  }
  .p-index-menu__item {
    flex: 0 0 auto;
    width: 89.33vw;
  }
  .c-menu-card {
    aspect-ratio: 335 / 300;
    justify-content: center;
    padding-bottom: 0;
  }
  .c-menu-card__body {
    width: 91.64%;
    padding: 2.67vw 4.53vw 6.4vw;
    background: rgba(137, 16, 17, 0.85);
  }
  /* SPはホバーが無いので、赤ボックス・見出し・説明文を常時表示にする */
  .c-menu-card::after {
    content: none;
  }
  .c-menu-card__title,
  .c-menu-card__text,
  .c-menu-card__more,
  .c-menu-card__arrow {
    display: block;
  }
  .c-menu-card__label {
    display: none;
  }
  .c-menu-card__title {
    font-size: 6.93vw;
  }
  .c-menu-card__text {
    margin-top: 1.6vw;
    font-size: 3.73vw;
  }
  .c-menu-card__btn {
    justify-content: space-between;
    margin-top: 4.8vw;
  }

  /* --- COMMITMENT：英字見出しを横組みで上に出す --- */
  .p-index-commitment {
    padding-top: 17.33vw;
  }
  .p-index-commitment__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-inline: 5.33vw;
  }
  .p-index-commitment__rail {
    order: -1;
    flex-direction: column;
    align-items: center;
    align-self: auto;
    gap: 7.2vw;
    width: 100%;
    margin-left: 0;
    padding-right: 0;
  }
  .p-index-commitment__en {
    order: -1;
    writing-mode: horizontal-tb;
    font-size: 40px;
    line-height: 1.25;
  }
  .p-index-commitment__line {
    flex: 0 0 auto;
    width: 69.87vw;
    height: 1px;
  }
  .p-index-commitment__media {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 12.8vw;
  }
  .p-index-commitment__media img {
    aspect-ratio: 335 / 272;
  }
  .p-index-commitment__body {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 12.8vw;
    text-align: center;
  }
  .p-index-commitment__title {
    font-size: 6.4vw;
    line-height: 1.6;
  }
  .p-index-commitment__text {
    margin-top: 12.8vw;
    font-size: 3.73vw;
    line-height: 2.2;
    text-align: left;
  }
  .p-index-commitment__btn {
    margin-top: 16vw;
  }

  /* --- バナー・店舗案内／採用 --- */
  .p-index-banner {
    padding-top: 25.07vw;
  }
  .p-index-banner__link {
    width: 89.33vw;
  }
  .p-index-guide {
    padding-top: 25.07vw;
  }
  .p-index-guide__list {
    flex-direction: column;
    align-items: center;
    gap: 6.21vw;
  }
  .p-index-guide__item {
    flex: 0 0 auto;
    width: 89.33vw;
  }
  .c-guide-card {
    aspect-ratio: 335 / 205;
  }
  .c-guide-card__body {
    gap: 9.07vw;
  }
  .c-guide-card__title {
    font-size: 5.33vw;
    line-height: 1.85;
  }
  .c-guide-card__title--slash {
    gap: 3.73vw;
  }
  .c-guide-card__title--slash::before,
  .c-guide-card__title--slash::after {
    width: 6.37vw;
  }

  /* --- CONTACT・MAP --- */
  .c-contact {
    padding-block: 14.13vw 25.87vw;
  }
  .c-contact::before {
    background: rgba(0, 0, 0, 0.7);
  }
  .c-contact__lead {
    margin-top: 13.87vw;
    font-size: 3.73vw;
    line-height: 2;
  }
  .c-contact__hours {
    margin-top: 9.87vw;
    font-size: 3.73vw;
    line-height: 2;
  }
  .c-contact .c-btn--tel {
    margin-top: 13.87vw;
  }
  .c-map__frame {
    height: 260px;
  }
}