@charset "utf-8";

/* =====================================================
   共通パーツ（c-*）
   ===================================================== */

/*-------英字にシルバーのグラデーションを乗せる------*/
.c-silver {
  background-image: var(--g-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*-------セクション見出し（英字＋和文の2段）------*/
.c-sec-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
}
.c-sec-title__en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: 0.06em;
  background-image: var(--g-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-sec-title__jp {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.06em;
  margin-top: clamp(6px, var(--px-16), 16px);
}
/* CONTACT だけ英字を白ベタで置く */
.c-sec-title--plain .c-sec-title__en {
  background-image: none;
  color: #fff;
}
/* 左寄せ版（ABOUT / SERVICES / NEWS） */
.c-sec-title--left {
  align-items: flex-start;
  text-align: left;
}

/*-------背景に敷く巨大英字（装飾）------*/
.c-wm {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: clamp(64px, var(--px-140), 140px);
  line-height: 0.885;
  letter-spacing: 0.06em;
  color: var(--c-wm);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/*-------シルバーの金属ボタン------*/
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  /* ラベルの文字数が増えても溢れないよう、最低幅だけ決めて中身に合わせる */
  min-width: clamp(200px, var(--px-219), 219px);
  min-height: clamp(52px, var(--px-60), 60px);
  padding: 4px;
  background-image: var(--g-silver-frame);
  color: var(--c-ink);
  font-weight: 700;
  font-size: clamp(15px, var(--px-18), 18px);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.c-btn__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  height: 100%;
  min-height: clamp(44px, 3.33vw, 52px);
  padding-inline: clamp(12px, var(--px-16), 16px)
    clamp(12px, var(--px-20), 20px);
  background-image: var(--g-silver-plate);
}
/* ホバー時は内側の面がフラットなシルバー（#b9b9b9）になる。
   グラデーション同士は transition できないので、フラット色を重ねて不透明度で切り替える */
.c-btn__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-silver-m);
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* 「ご応募・お問い合わせ」など文字数が多いとき用 */
.c-btn--wide {
  min-width: clamp(230px, var(--px-258), 258px);
}
/* 重ねたフラット色より前面に出す */
.c-btn__text,
.c-btn__arrow {
  position: relative;
  z-index: 1;
}
.c-btn__text {
  white-space: nowrap;
}
.c-btn__arrow {
  flex-shrink: 0;
  width: clamp(26px, var(--px-38), 38px);
  height: auto;
}
/* a:hover の opacity は打ち消す */
.c-btn:hover {
  opacity: 1;
}
.c-btn:hover .c-btn__inner::before {
  opacity: 1;
}

/*-------白フチのボタン（CONTACTセクション）------*/
.c-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, var(--px-13), 13px);
  border: 1px solid #fff;
  padding: clamp(10px, var(--px-14), 14px) clamp(16px, var(--px-20), 20px);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
}
.c-line-btn img {
  flex-shrink: 0;
  transition: filter 0.4s ease;
}
.c-line-btn--tel .c-line-btn__text {
  font-size: 30px;
}
.c-line-btn--mail .c-line-btn__text {
  font-size: 22px;
}
/* ホバーで白ベタに反転する（a:hover の opacity は打ち消す） */
.c-line-btn:hover {
  opacity: 1;
  background: #fff;
  color: var(--c-ink);
}
/* アイコンは白のSVGなので、暗く落として文字色に合わせる（白#fff × 0.2 ≒ #333） */
.c-line-btn:hover img {
  filter: brightness(0.2);
}

/* =====================================================
   ヘッダー
   ===================================================== */
.l-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
}
.l-header.is-fixed {
  position: fixed;
  background: rgba(0, 0, 0, 0.88);
}
.l-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, var(--px-24), 24px);
  padding-left: clamp(14px, var(--px-26), 26px);
  min-height: clamp(62px, var(--px-100), 100px);
}
.c-logo {
  flex-shrink: 0;
  width: clamp(150px, 18.47vw, 266px);
}
.c-logo__link {
  display: block;
}

/*-------グローバルナビ------*/
.c-nav {
  margin-left: auto;
}
.c-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4.3vw, 62px);
}
.c-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.c-nav__en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: clamp(12px, var(--px-14), 14px);
  letter-spacing: 0.06em;
  background-image: var(--g-silver-thin);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-nav__jp {
  font-weight: 600;
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
/* CONTACT はPCではボタン側にあるのでナビから隠す */
.c-nav__item--sp {
  display: none;
}

.c-header-insta {
  flex-shrink: 0;
  width: clamp(22px, var(--px-26), 26px);
  line-height: 0;
}

/*-------ヘッダー右上のTEL / お問い合わせボタン------*/
.c-header-btns {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: clamp(160px, 13.54vw, 195px);
}
.c-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, var(--px-9), 9px);
  padding: clamp(6px, var(--px-10), 10px) clamp(8px, var(--px-14), 14px);
  min-height: clamp(38px, var(--px-50), 50px);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
/* .c-btn と同じく、ホバーでフラットなシルバーにじんわり変わる */
.c-header-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-silver-m);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.c-header-btn > * {
  position: relative;
  z-index: 1;
}
.c-header-btn img {
  flex-shrink: 0;
  width: clamp(15px, var(--px-19), 19px);
  height: auto;
}
.c-header-btn__text {
  white-space: nowrap;
}
.c-header-btn--tel {
  background-image: var(--g-silver-thin);
  font-size: clamp(15px, var(--px-20), 20px);
}
.c-header-btn--mail {
  background-image: linear-gradient(96deg, #e0e0e0 1.33%, #737373 98.67%);
  font-size: clamp(14px, var(--px-18), 18px);
}
.c-header-btn--mail img {
  width: clamp(19px, var(--px-25), 25px);
}
/* a:hover の opacity は打ち消す */
.c-header-btn:hover {
  opacity: 1;
}
.c-header-btn:hover::before {
  opacity: 1;
}

/* =====================================================
   CONTACT（全ページ共通・フッター直上）
   ===================================================== */
.p-contact {
  position: relative;
  background: url("../img/contact-bg.jpg") center / cover no-repeat;
}
.p-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.p-contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(46px, var(--px-50), 50px) 5.55% clamp(50px, var(--px-90), 90px);
}
.p-contact__lead {
  margin-top: clamp(20px, var(--px-34), 34px);
  text-align: center;
  font-weight: 600;
}
.p-contact__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, var(--px-40), 40px);
  margin-top: clamp(24px, var(--px-40), 40px);
}

/* =====================================================
   フッター
   ===================================================== */
.l-footer {
  background: #000;
}
.l-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, var(--px-52), 52px) 5.55% 0;
}
.l-footer__logo {
  width: clamp(180px, 18.47vw, 266px);
}
.l-footer__address {
  margin-top: clamp(14px, var(--px-18), 18px);
  text-align: center;
  font-weight: 600;
}
.c-footer-nav {
  margin-top: clamp(22px, var(--px-40), 40px);
}
.c-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 4.3vw, 62px);
}
.c-footer-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.c-footer-nav__en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: clamp(12px, var(--px-14), 14px);
  letter-spacing: 0.06em;
  background-image: var(--g-silver-thin);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-footer-nav__jp {
  font-weight: 600;
  font-size: clamp(13px, var(--px-16), 16px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.c-copyright {
  width: 100%;
  margin-top: clamp(26px, var(--px-40), 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-block: clamp(8px, var(--px-12), 12px) clamp(10px, var(--px-16), 16px);
  text-align: center;
}
.c-copyright__text {
  font-size: clamp(12px, var(--px-14), 14px);
  font-weight: 600;
  line-height: 2.5;
}

/*-------ページトップ（常時表示）------*/
/* common.css の #page-top{opacity:0} と .is-show 切り替えは使わない */
#page-top {
  opacity: 1;
  visibility: visible;
}
.c-pagetop__link {
  display: block;
  width: clamp(44px, var(--px-54), 54px);
  line-height: 0;
}

/*-------SP固定のTEL / お問い合わせバー------*/
/* common.css の `body .SP{display:block}` に負けないよう specificity を上げる */
body .c-footer-icons.SP {
  display: none;
}
/* シルバーの金属バー。アイコンを上、文字を下に積む */
.c-footer-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 8px 5px;
  background-image: var(--g-silver-plate);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.2;
}
/* デザインの横幅比（TEL 189 : お問い合わせ 130） */
.c-footer-icons__item--tel {
  flex: 189 1 0;
}
.c-footer-icons__item--mail {
  flex: 130 1 0;
}
.c-footer-icons__item img {
  flex-shrink: 0;
}
.c-footer-icons__text {
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.c-footer-icons__item--tel .c-footer-icons__text {
  font-size: clamp(15px, 5.33vw, 20px);
}
.c-footer-icons__item--mail .c-footer-icons__text {
  font-size: clamp(13px, 4.8vw, 18px);
}
.c-footer-icons__item:hover {
  opacity: 1;
  filter: brightness(1.06);
}

/* =====================================================
   お知らせ（single / archive）
   ===================================================== */
.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;
  flex-wrap: wrap;
  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;
}
.p-single__thumb {
  margin-bottom: clamp(16px, var(--px-30), 30px);
}
.p-single__date {
  display: block;
  font-family: var(--f-en);
  color: var(--c-silver-m);
  line-height: 1.6;
}
.single-post-title,
.archive-post-title {
  margin-top: clamp(4px, var(--px-9), 9px);
  font-size: clamp(20px, var(--px-30), 30px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.p-single__content {
  margin-top: clamp(20px, var(--px-34), 34px);
  padding-top: clamp(20px, var(--px-34), 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.p-single__content p {
  margin-bottom: 1em;
}
.p-single__content a {
  text-decoration: underline;
}
.p-single__content img {
  height: auto;
}
/* 一覧（お知らせアーカイブ） */
.p-archive__item {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.55);
}
.p-archive__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(12px, var(--px-40), 40px);
  padding-block: clamp(10px, var(--px-18), 18px);
  font-weight: 600;
}
.p-archive__date {
  flex-shrink: 0;
  font-family: var(--f-en);
  color: var(--c-silver-m);
}
/* 404 */
.p-404 {
  text-align: center;
}
.p-404__text {
  margin-bottom: clamp(24px, var(--px-40), 40px);
}
.pagination-area {
  margin-top: clamp(40px, var(--px-80), 80px);
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

/* =====================================================
   TOP：FV
   ===================================================== */
.p-index-fv {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 52.08vw, 750px);
  overflow: hidden;
}
/* スライダーと暗幕は「背景の層」なので絶対配置で敷く。
   こうしないとスライド画像の実寸がセクションの高さを決めてしまう */
.p-index-fv .main-slider,
.p-index-fv__veil {
  position: absolute;
  inset: 0;
}
.p-index-fv .splide__track,
.p-index-fv .splide__list,
.p-index-fv .splide__slide {
  height: 100%;
}
.p-index-fv__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像を暗く落としてコピーを乗せる */
.p-index-fv__veil {
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.p-index-fv__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: 5.55%;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.p-index-fv__catch {
  font-size: clamp(26px, var(--px-48), 48px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.p-index-fv__en {
  margin-top: clamp(6px, var(--px-10), 10px);
  font-family: var(--f-en);
  font-size: clamp(19px, var(--px-36), 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.p-index-fv__desc {
  margin-top: clamp(10px, var(--px-18), 18px);
  font-weight: 700;
  line-height: 1.8;
}

/* =====================================================
   TOP：NEWS
   ===================================================== */
.p-news {
  padding-block: clamp(30px, var(--px-34), 34px)
    clamp(50px, var(--px-100), 100px);
}
.p-news__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 12.15vw, 175px);
}
.p-news__title {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.p-news__title-en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(26px, 9.6vw, 36px);
  letter-spacing: 0.06em;
  background-image: var(--g-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.p-news__title-jp {
  margin-top: clamp(4px, var(--px-9), 9px);
  padding-left: clamp(0px, var(--px-44), 44px);
  font-size: 16px;
  font-weight: 600;
}
.p-news__list {
  flex: 1;
  /* デザインの下線幅700px＋右の余白ぶん */
  max-width: clamp(300px, 51.4vw, 740px);
  max-height: 6.2em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-scroll) transparent;
  padding-right: clamp(10px, var(--px-40), 40px);
}
.p-news__list::-webkit-scrollbar {
  width: 3px;
}
.p-news__list::-webkit-scrollbar-track {
  background: transparent;
}
.p-news__list::-webkit-scrollbar-thumb {
  background: var(--c-scroll);
}
.p-news__item {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.55);
}
.p-news__link {
  display: flex;
  gap: clamp(12px, var(--px-40), 40px);
  padding-block: clamp(4px, var(--px-9), 9px);
  font-weight: 600;
  line-height: 1.6;
}
.p-news__date {
  flex-shrink: 0;
  font-family: var(--f-en);
  letter-spacing: 0.04em;
}
.p-news__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================
   TOP：ABOUT
   ===================================================== */
.p-about__body {
  display: grid;
  grid-template-columns: 43.05% 1fr;
  column-gap: 4.3%;
  align-items: start;
}
.p-about__img {
  aspect-ratio: 620 / 550;
}
.p-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-about__text {
  /* グリッドの min-width:auto で列が広がらないようにする */
  min-width: 0;
  padding-right: 5.55%;
  padding-top: clamp(0px, var(--px-13), 13px);
}
.p-about__lead {
  margin-top: clamp(8px, var(--px-14), 14px);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}
.p-about__desc {
  margin-top: clamp(14px, var(--px-24), 24px);
}
/* 背景に敷く巨大英字（右端を揃えて左へはみ出させる） */
.p-about__wm {
  margin-top: clamp(10px, var(--px-14), 14px);
  margin-left: -60%;
  white-space: normal;
  text-align: right;
}

/* =====================================================
   TOP：SERVICES
   ===================================================== */
.p-services {
  padding-top: clamp(50px, var(--px-124), 124px);
}
.p-service {
  display: grid;
  grid-template-columns: 1fr clamp(230px, 30.9vw, 445px);
  column-gap: clamp(20px, var(--px-96), 96px);
  align-items: start;
  /* 1440pxのとき左右160px */
  padding-inline: 11.11%;
  margin-top: clamp(40px, var(--px-90), 90px);
}
/* 偶数番は画像を左・テキストを右に入れ替える */
.p-service--rev {
  grid-template-columns: clamp(230px, 30.9vw, 445px) 1fr;
}
.p-service--rev .p-service__img {
  grid-column: 1;
  grid-row: 1;
}
.p-service--rev .p-service__text {
  grid-column: 2;
  grid-row: 1;
}
.p-service__img {
  /* 背後に敷く英字より前面に置く（SERVICE04で英字が画像の下に潜る） */
  position: relative;
  z-index: 1;
  aspect-ratio: 445 / 313;
}
.p-service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-service__text {
  position: relative;
  min-width: 0;
}
.p-service__head,
.p-service__desc {
  position: relative;
  z-index: 1;
}
.p-service__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(10px, var(--px-33), 33px);
  line-height: 1.2;
}
/* シルバーの小さな四角 */
.p-service__bullet {
  flex-shrink: 0;
  width: 17px;
  aspect-ratio: 1;
  border: 1px solid var(--c-silver-hi);
  background-image: linear-gradient(
    137deg,
    #636363 6.1%,
    #b9b9b9 27.51%,
    #f1f1f1 48.54%,
    #b9b9b9 66.89%,
    #636363 85.62%
  );
}
.p-service__num {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.p-service__num em {
  font-size: 32px;
}
.p-service__title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.p-service__desc {
  margin-top: clamp(14px, var(--px-26), 26px);
  /* ■ぶんのインデント（Figmaは33px） */
  padding-left: clamp(0px, var(--px-33), 33px);
}
/* 背後に敷く巨大英字 */
.p-service__wm {
  position: absolute;
  z-index: 0;
  /* 下端を基準にして、行数が増えたぶんは上へ伸ばす
     （3行以上でも下のセクションに垂れ下がらない） */
  top: auto;
  bottom: clamp(-200px, -13.9vw, -70px);
  right: 0;
  left: 0;
  font-size: clamp(36px, 8.2vw, 118px);
  color: var(--c-wm-deep);
  /* Figma同様、まず単語で折り返し、1語が行に収まらない時だけ単語内で折る */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
}
/* 英字の枠はテキスト列より左に張り出させる（Figmaの枠幅に合わせる）
   画像が右にくる回（01/03）は左いっぱいまで＝約714px */
.p-service__wm {
  left: clamp(-135px, -9.375vw, -20px);
}
/* 画像が左にくる回（02）は、画像に当たらない位置まで＝約674px */
.p-service--rev .p-service__wm {
  left: clamp(-95px, -6.6vw, -15px);
}
/* SERVICE04 だけは画像の下へ潜り込ませる＝約840px */
.p-service--rev .p-service__wm--over {
  left: clamp(-261px, -18.125vw, -30px);
}

/* =====================================================
   TOP：Instagram
   ===================================================== */
.p-insta {
  padding-block: clamp(50px, var(--px-124), 124px)
    clamp(40px, var(--px-90), 90px);
  text-align: center;
}
.p-insta__lead {
  font-weight: 600;
  line-height: 1.7;
}
.p-insta__banner {
  display: inline-block;
  width: min(100%, clamp(300px, 50.77vw, 731px));
  margin-top: clamp(16px, var(--px-30), 30px);
  line-height: 0;
}
.p-insta__banner:hover {
  opacity: 1;
}
.p-insta__banner-img {
  width: 100%;
}

/*-------instagramバナー（PC）------*/
/* バナーは「1枚の絵」なので、この重なりだけは絶対配置で組んでいる（レイアウト用途ではない）。
   数値はすべて Figma の 731×370 に対する比率。
   ホバーでスマホが 4.11deg → -5.08deg に反転しつつ左へ寄る。 */
.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-silver-d);
  border-radius: clamp(2px, 0.347vw, 5px);
  background: #fff;
}
.c-ig-banner__wagara {
  left: 1.09%;
  top: 26.22%;
  width: 78.65%;
  height: 41.09%;
  object-fit: cover;
}
.c-ig-banner__strip1 {
  left: 1.09%;
  top: 64.34%;
  width: 42.68%;
  height: 28.11%;
  object-fit: cover;
}
.c-ig-banner__strip2 {
  left: 43.78%;
  top: 64.34%;
  width: 32.15%;
  height: 28.11%;
  object-fit: cover;
}
.c-ig-banner__logo {
  left: 2.05%;
  top: 26.22%;
  width: 39.94%;
  height: 19.46%;
}
.c-ig-banner__mark {
  left: 36.25%;
  top: 40.82%;
  width: 10.67%;
  height: 21.08%;
}
/* follow me は Figma 上で -10.51deg 回っている。素材は回転前なので、
   回転後の外枠（199.63×157.5）と中心が合う位置・サイズで置いてから回す */
.c-ig-banner__follow {
  left: 46.1%;
  top: 16.3%;
  width: 24.55%;
  height: 34.3%;
  transform: rotate(-10.51deg);
}
.c-ig-banner__more-line {
  left: 47.12%;
  top: 54.07%;
  width: 24.9%;
  height: 5.13%;
  background: url("../img/ig-underline.svg") no-repeat center / 100% 100%;
}
.c-ig-banner__more {
  top: 50.82%;
  right: 30.24%;
  color: var(--c-ink);
  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.05%;
  top: 48.66%;
  color: var(--c-ink);
  font-size: clamp(7px, var(--px-16), 16px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}

/*-------スマホ（ホバーで傾きが反転する）------*/
.c-ig-banner__phone {
  left: 70.17%;
  top: 0.81%;
  width: 29.83%;
  height: 101.62%;
  transform: rotate(4.11deg);
  transform-origin: 50% 88%;
  transition: transform 0.45s ease;
}
.c-ig-banner__phone > * {
  position: absolute;
}
.c-ig-banner__shot {
  left: 7.1%;
  top: 2.67%;
  width: 89.83%;
  height: 93.23%;
  border-radius: clamp(4px, 0.9vw, 13px);
  object-fit: cover;
}
.c-ig-banner__frame {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}
.c-ig-banner__icon {
  left: 37.8%;
  top: 41.2%;
  width: 28.4%;
  height: 16.5%;
}
.p-insta__banner:hover .c-ig-banner__phone {
  transform: translateX(-11.5%) rotate(-5.08deg);
}

/* =====================================================
   TOP：AREA
   ===================================================== */
.p-area {
  padding-block: clamp(40px, var(--px-90), 90px) clamp(30px, var(--px-60), 60px);
}
/* 文章と地図をひとかたまりにして、セクションの中央に置く */
.p-area__body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, var(--px-55), 55px);
  margin-top: clamp(24px, var(--px-60), 60px);
  padding-inline: 5.55%;
}
.p-area__desc {
  min-width: 0;
  max-width: clamp(280px, 32.9vw, 474px);
}
/* 岩手県のかたちに写真を抜く */
.p-area__map {
  flex: 0 0 clamp(150px, 17.54vw, 252px);
  aspect-ratio: 252.55 / 398;
  background: url("../img/area.jpg") center / cover no-repeat;
  -webkit-mask: url("../img/area-mask.svg") center / contain no-repeat;
  mask: url("../img/area-mask.svg") center / contain no-repeat;
}
.p-area__wm {
  margin-top: clamp(6px, var(--px-18), 18px);
}

/* =====================================================
   TOP：WORKS
   ===================================================== */
.p-works {
  padding-block: clamp(40px, var(--px-90), 90px);
  overflow: hidden;
}
.p-works__slider {
  /* カード1枚ぶんの送り＝366px + すき間28px（1440基準） */
  --mq-gap: clamp(14px, 1.94vw, 28px);
  /* 千鳥にずらす分の余白を上下に確保する */
  padding-block: clamp(14px, var(--px-52), 52px);
}
.p-works__slide {
  width: clamp(200px, 27.36vw, 394px);
  transition: transform 0.4s ease;
}
/* 1枚おきに下げて千鳥に見せる */
.p-works__slide--down {
  transform: translateY(clamp(14px, var(--px-52), 52px));
}
.p-works__link {
  display: block;
}
.p-works__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 366 / 280;
  object-fit: cover;
  background: #d9d9d9;
}
.p-works__caption {
  display: block;
  margin-top: clamp(8px, var(--px-14), 14px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.p-works__date {
  display: block;
  font-family: var(--f-en);
  color: var(--c-silver-m);
}

/* =====================================================
   TOP：RECRUIT
   ===================================================== */
.p-recruit {
  display: grid;
  grid-template-columns: clamp(180px, 46.5vw, 670px) 1fr;
  column-gap: clamp(20px, var(--px-30), 30px);
  align-items: start;
  padding-block: clamp(40px, var(--px-90), 90px);
  padding-inline: 5.55%;
}
.p-recruit__imgs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(10px, var(--px-30), 30px);
}
.p-recruit__img {
  /* min-width:auto のままだと画像の実寸で 1fr が不均等になり、右のテキストに食い込む */
  min-width: 0;
  aspect-ratio: 320 / 511;
}
.p-recruit__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2枚目だけ下げて段差をつける */
.p-recruit__img--2 {
  margin-top: clamp(16px, var(--px-64), 64px);
}
.p-recruit__text {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: clamp(0px, var(--px-35), 35px);
}
.p-recruit__catch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, var(--px-10), 10px);
  margin-top: clamp(18px, var(--px-50), 50px);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.p-recruit__catch::before,
.p-recruit__catch::after {
  content: "";
  flex-shrink: 0;
  width: clamp(13px, var(--px-19), 19px);
  aspect-ratio: 1;
  background: url("../img/deco-slash.svg") center / contain no-repeat;
}
/* 素材は「／」なので、左側だけ反転して「＼ …… ／」にする */
.p-recruit__catch::before {
  transform: scaleX(-1);
}
.p-recruit__desc {
  margin-top: clamp(14px, var(--px-24), 24px);
}
.p-recruit__btn {
  margin-top: clamp(20px, var(--px-40), 40px);
}
/* 背後に敷く巨大英字（セクション幅いっぱいを使い、画像の下に潜らせる） */
.p-recruit__wm {
  position: relative;
  z-index: 0;
  grid-column: 1 / -1;
  /* デザイン同様、左右の余白を無視して画面幅いっぱいまで使う */
  margin-inline: -5.55%;
  margin-top: clamp(-90px, -6.5vw, -20px);
  white-space: normal;
  text-align: right;
}

/* =====================================================
   レスポンシブ
   ===================================================== */

/*-------ipad----*/
@media screen and (max-width: 1180px) {
  .l-header__inner {
    gap: clamp(10px, 1.6vw, 18px);
  }
  .c-nav__list {
    gap: clamp(14px, 2.6vw, 30px);
  }
  /* ヘッダーのTEL/メールボタンは幅が足りないので隠し、
     代わりにナビへCONTACTを出す */
  .c-header-btns {
    display: none;
  }
  .c-nav__item--sp {
    display: block;
  }
}

/*-------ipad-air----*/
@media screen and (max-width: 820px) {
  .c-nav__list {
    gap: clamp(12px, 2.2vw, 20px);
  }
  .c-nav__en {
    font-size: 11px;
  }
  .c-nav__jp {
    font-size: 12px;
  }
  .p-about__body {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 4vw, 34px);
  }
  .p-about__img {
    aspect-ratio: 16 / 9;
  }
  .p-about__text {
    padding-inline: 5.33%;
  }
  /* 縦積みになったら英字は中央に置くので、はみ出し用の負マージンは外す */
  .p-about__wm {
    margin-left: 0;
    text-align: center;
  }
  .p-recruit {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 4.5vw, 40px);
  }
  .p-recruit__imgs {
    max-width: 640px;
    margin-inline: auto;
  }
}

/*-------iphone----*/
@media screen and (max-width: 680px) {
  /*-------ヘッダー------*/
  /* SPはFVに関係なく最初から上部固定。is-fixed が付いても見た目は変えず、
     common.css の .fixed-wrap.is-fixed のスライドダウンも打ち消す */
  .l-header,
  .l-header.is-fixed {
    position: fixed;
    animation: none;
    background: transparent;
  }
  /* 明るい写真の上でもロゴとハンバーガーが沈まないよう、
     上から下へ薄れる暗幕をヘッダーの少し下まで敷く（MV上では帯に見えない） */
  .l-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -40px;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.5) 52%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
  }
  .l-header__inner {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 5.33% 16.5%;
    min-height: 58px;
  }
  .c-logo {
    width: 32vw;
  }
  .c-header-insta {
    width: 26px;
    margin-left: auto;
  }
  .c-sec-title--left {
    align-items: center;
  }

  /*-------FV------*/
  .p-index-fv {
    /* デザインは375幅で720px。縦長端末でも伸びすぎないように上限を付ける */
    min-height: min(192vw, 88svh);
  }
  .p-index-fv__copy {
    padding-inline: 5.07%;
  }
  .p-index-fv__catch {
    font-size: 32px;
    line-height: 1.45;
  }
  .p-index-fv__en {
    font-size: 24px;
    line-height: 1.46;
  }

  /*-------NEWS------*/
  .p-news {
    padding-block: 26px 40px;
  }
  .p-news__inner {
    flex-direction: column;
    gap: 16px;
  }
  .p-news__title {
    align-self: center;
    align-items: center;
  }
  .p-news__title-jp {
    padding-left: 0;
  }
  .p-news__list {
    width: 100%;
    max-height: 7.4em;
    padding-right: 16px;
  }
  .p-news__link {
    flex-direction: column;
    gap: 0;
  }
  .p-news__text {
    white-space: normal;
  }

  /*-------ABOUT------*/
  .p-about__img {
    aspect-ratio: 335 / 297;
    margin-inline: 5.33%;
  }
  .p-about__text {
    padding-top: 0;
  }
  .p-about .c-sec-title--left,
  .p-about__lead {
    align-items: center;
    text-align: center;
  }
  .p-about__wm {
    text-align: right;
  }

  /*-------SERVICES------*/
  .p-services {
    padding-top: 48px;
  }
  .p-service,
  .p-service--rev {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-top: 56px;
    padding-inline: 5.33%;
  }
  .p-service--rev .p-service__img,
  .p-service__img {
    grid-column: 1;
    grid-row: 1;
  }
  .p-service--rev .p-service__text,
  .p-service__text {
    grid-column: 1;
    grid-row: 2;
  }
  .p-service__img {
    aspect-ratio: 335 / 236;
  }
  /* ■＋SERVICE0X を1行目、工事名を2行目に折り返す */
  .p-service__head {
    justify-content: center;
    gap: 10px;
  }
  .p-service__title {
    flex-basis: 100%;
    text-align: center;
  }
  .p-service__desc {
    padding-left: 0;
  }
  .p-service__wm,
  .p-service--rev .p-service__wm,
  .p-service--rev .p-service__wm--over {
    top: auto;
    bottom: -0.6em;
    left: 0;
    font-size: 64px;
    text-align: right;
  }

  /*-------Instagram------*/
  .p-insta {
    padding-block: 50px 40px;
  }
  .p-insta__banner {
    width: 100%;
    margin-top: 0;
  }
  /* SPはバナーが縦長なので、リード文を下に置く */
  .p-insta .l-inner {
    display: flex;
    flex-direction: column;
  }
  .p-insta__lead {
    order: 2;
    margin-top: 20px;
  }

  /*-------AREA------*/
  .p-area__body {
    flex-direction: column;
    gap: 24px;
  }
  .p-area__desc {
    max-width: none;
  }
  .p-area__map {
    flex: 0 0 auto;
    width: 67vw;
  }
  /* AREAの英字だけデザインは80px */
  .p-area__wm .c-wm {
    font-size: 80px;
  }

  /*-------WORKS------*/
  .p-works__slider {
    /* SPは カード275 + すき間21 = 296px（375基準） */
    --mq-gap: 5.6vw;
    padding-block: 20px;
  }
  .p-works__slide {
    width: 78.93vw;
  }
  .p-works__slide--down {
    transform: translateY(20px);
  }

  /*-------RECRUIT------*/
  .p-recruit__imgs {
    column-gap: 15px;
  }
  .p-recruit__img {
    aspect-ratio: 160 / 255;
  }
  .p-recruit__img--2 {
    margin-top: 32px;
  }
  .p-recruit__text {
    padding-top: 0;
  }
  .p-recruit .c-sec-title--left {
    align-items: center;
    text-align: center;
  }
  .p-recruit__catch {
    justify-content: center;
    text-align: left;
  }
  /* display:flex にするとブロック化して全幅になるので、
     中身なりの幅（デザインは219px）のまま中央に置く */
  .p-recruit__btn {
    display: flex;
    width: fit-content;
    min-width: 219px;
    margin-inline: auto;
  }
  .p-recruit__wm {
    margin-inline: 0;
    margin-top: 28px;
    font-size: 64px;
    text-align: right;
  }

  /*-------CONTACT------*/
  .p-contact__btns {
    flex-direction: column;
    align-self: stretch;
    gap: 16px;
  }
  .c-line-btn {
    width: 100%;
  }

  /*-------フッター------*/
  .l-footer__inner {
    /* 下部固定のTEL/お問い合わせバーに隠れないように余白を足す */
    padding-bottom: 56px;
  }
  /* 下部固定バー：TEL / お問い合わせ / ページトップ を1行に並べる
     （ページトップは別要素なので、その幅ぶんだけバーの右を空ける） */
  body .c-footer-icons.SP {
    display: flex;
    right: 54px;
    width: auto;
    height: 56px;
  }
  .c-footer-nav__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 10px;
    width: 100%;
  }
  .c-copyright {
    margin-top: 24px;
  }
  /* お知らせ一覧は日付とタイトルを縦積みに */
  .p-archive__link {
    flex-direction: column;
    gap: 0;
  }
  /* バーの右端に収める */
  #page-top {
    right: 0;
    bottom: 0;
    z-index: 702;
  }
  .c-pagetop__link {
    width: 54px;
  }
}