@charset "UTF-8";

/* =========================================================
   ARCHEON株式会社 — 制作実績サイト
   配色・書体は archeon.co.jp のデザイン変数をそのまま採用
   ========================================================= */

:root {
  --base-font-color: #535A5F;
  --gray: #777F84;
  --light-gray: #9AA7AF;
  --primary: #262626;
  --secondary: #F2F2F2;
  --tertiary: #987625;
  --quaternary: #F2D16A;
  --white: #fff;
  --border-primary: #D9D9D9;
  --accent: #34A9EE;
  --ff-ja: "Noto Sans JP", "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
  --ff-en: "Montserrat", sans-serif;
  --gradation-secondary: linear-gradient(180deg, rgba(15,27,48,0) 0%, rgba(15,27,46,.33) 30%, rgba(15,27,45,.5) 55%, rgba(15,27,45,.76) 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-ja);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  color: var(--base-font-color);
  background: var(--white);
  letter-spacing: .04em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.5; color: var(--primary); }
p { margin: 0; }
address { font-style: normal; }

.pc-br { display: none; }

/* ---------------- ヘッダー ---------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border-primary);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}
.hdr__logo { display: flex; align-items: center; gap: 8px; }
.hdr__logo img { width: 30px; height: auto; }
.hdr__logo-txt {
  font-family: var(--ff-en);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--primary);
  line-height: 1.2;
}
.hdr__logo-txt span {
  display: block;
  font-family: var(--ff-ja);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--gray);
}
.hdr__nav { display: none; }
.hdr__tel a {
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--primary);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .hdr__in { padding: 14px 40px; }
  .hdr__logo img { width: 40px; }
  .hdr__logo-txt { font-size: 18px; }
  .hdr__logo-txt span { font-size: 10px; }
  .hdr__nav { display: flex; gap: 34px; margin-left: auto; }
  .hdr__nav a { display: block; text-align: center; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
  .hdr__nav a:hover { border-color: var(--tertiary); }
  .hdr__nav .ja { display: block; font-size: 13px; line-height: 1.6; color: var(--primary); }
  .hdr__nav .en { display: block; font-family: var(--ff-en); font-size: 9px; letter-spacing: .14em; line-height: 1.2; color: var(--tertiary); }
  .hdr__tel { margin-left: 34px; }
  .hdr__tel a { font-size: 20px; }
}

/* ---------------- スマホ用の下部メニュー ---------------- */
.spnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--primary);
  padding-bottom: env(safe-area-inset-bottom);
}
.spnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 6px 2px;
  color: var(--white);
  border-left: 1px solid rgba(255,255,255,.16);
  line-height: 1.3;
}
.spnav a:first-child { border-left: 0; }
.spnav .ja { font-size: 11px; letter-spacing: .02em; }
.spnav .en { font-family: var(--ff-en); font-size: 8px; letter-spacing: .16em; color: var(--quaternary); }
.spnav__cv { background: var(--tertiary); }
.spnav__cv .en { color: var(--white); }

@media (min-width: 1024px) {
  .spnav { display: none; }
}

/* ---------------- ヒーロー ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 78svh;
  display: flex;
  align-items: center;
  background: var(--primary);
  padding: 120px 0 90px;
}
.hero__strip { display: none; }
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--gradation-secondary), rgba(38,38,38,.8);
}
.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
}
.hero__en {
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--quaternary);
  margin-bottom: 18px;
}
.hero__ttl {
  color: var(--white);
  font-size: clamp(30px, 8.6vw, 44px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.hero__lead {
  margin-top: 22px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: .08em;
}
.hero__scroll {
  position: absolute;
  left: 24px;
  bottom: 26px;
  z-index: 2;
  font-family: var(--ff-en);
  font-size: 9px;
  letter-spacing: .3em;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__scroll::after {
  content: "";
  width: 46px;
  height: 1px;
  background: rgba(255,255,255,.45);
  transform-origin: left;
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }

@media (min-width: 768px) {
  .hero { min-height: 86svh; padding: 150px 0 110px; }
  .hero__in { padding: 0 6vw; }
  .hero__ttl { font-size: clamp(44px, 4.6vw, 60px); }
  .hero__lead { font-size: 16px; margin-top: 30px; }
  .hero__en { font-size: 12px; }
  .hero__scroll { left: 6vw; bottom: 40px; }
  /* 背景に実績サイトのキャプチャを流す */
  .hero__strip {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .hero__track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: strip 80s linear infinite;
  }
  .hero__track img {
    flex: none;
    width: 460px;
    height: 100%;
    margin-right: 20px;
    object-fit: cover;
    object-position: top center;
    opacity: .3;
    filter: grayscale(.55);
  }
  @keyframes strip { to { transform: translateX(-50%); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__track { animation: none; }
  .hero__scroll::after { animation: none; transform: scaleX(1); }
  .js-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------- セクション共通 ---------------- */
.sec { padding: 66px 0; }
.sec__in { width: min(100% - 40px, 1180px); margin-inline: auto; }
.sec--service { background: var(--secondary); }
.sec--contact { background: var(--primary); }

.sec-head { margin-bottom: 26px; }
.sec-head__ja {
  font-size: clamp(21px, 5.4vw, 30px);
  font-weight: 500;
  letter-spacing: .08em;
}
.sec-head__en {
  margin-top: 6px;
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--tertiary);
}
.sec-head--white .sec-head__ja { color: var(--white); }
.sec-head--white .sec-head__en { color: var(--quaternary); }
.sec__lead { font-size: 14px; color: var(--gray); margin-bottom: 34px; }

@media (min-width: 768px) {
  .sec { padding: 110px 0; }
  .sec-head { margin-bottom: 34px; }
  .sec__lead { font-size: 16px; margin-bottom: 56px; }
  .pc-br { display: inline; }
}

/* ---------------- 制作実績 ---------------- */
.works { display: grid; gap: 46px; }

.work__shot {
  display: block;
  overflow: hidden;
  background: var(--secondary);
  border: 1px solid var(--border-primary);
}
.work__shot img {
  width: 100%;
  aspect-ratio: 1200 / 694;
  object-fit: cover;
  object-position: top center;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.work__shot:hover img { transform: scale(1.035); }

.work__meta { padding-top: 16px; }
.work__num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--tertiary);
}
.work__num span {
  font-family: var(--ff-ja);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gray);
  padding-left: 12px;
  border-left: 1px solid var(--border-primary);
}
.work__name {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .04em;
}
.work__desc {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--gray);
}
.work__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--primary);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--primary);
  transition: color .3s, border-color .3s, gap .3s;
}
.work__link::after { content: "→"; font-family: var(--ff-ja); }
.work__link:hover { color: var(--tertiary); border-color: var(--tertiary); gap: 16px; }

@media (min-width: 768px) {
  .works { grid-template-columns: repeat(2, 1fr); gap: 64px 40px; }
  .work__meta { padding-top: 20px; }
  .work__name { font-size: 19px; }
  .work__desc { font-size: 14px; }
}
@media (min-width: 1180px) {
  .works { gap: 80px 56px; }
}

/* ---------------- 制作について ---------------- */
.feat { display: grid; gap: 34px; }
.feat__item { padding-top: 22px; border-top: 1px solid var(--border-primary); }
.feat__num {
  font-family: var(--ff-en);
  font-size: 22px;
  font-weight: 500;
  color: var(--tertiary);
  line-height: 1;
  margin-bottom: 12px;
}
.feat__ttl { font-size: 17px; font-weight: 500; }
.feat__txt { margin-top: 10px; font-size: 13.5px; line-height: 2; color: var(--gray); }
.feat__list { margin-top: 14px; }
.feat__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--gray);
}
.feat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 1px;
  background: var(--tertiary);
}

@media (min-width: 768px) {
  .feat { grid-template-columns: repeat(3, 1fr); gap: 48px 44px; }
  .feat__item--wide { grid-column: 1 / -1; }
  .feat__ttl { font-size: 19px; }
  .feat__txt, .feat__list li { font-size: 14px; }
  .feat__num { font-size: 26px; }
  .feat__item--wide .feat__list { columns: 2; column-gap: 44px; }
}

/* ---------------- 制作の流れ ---------------- */
.flow { display: grid; gap: 0; }
.flow__item {
  position: relative;
  padding: 22px 0 22px 58px;
  border-bottom: 1px solid var(--border-primary);
}
.flow__item:first-child { border-top: 1px solid var(--border-primary); }
.flow__num {
  position: absolute;
  left: 0;
  top: 24px;
  font-family: var(--ff-en);
  font-size: 17px;
  font-weight: 500;
  color: var(--tertiary);
  letter-spacing: .06em;
}
.flow__ttl { font-size: 16px; font-weight: 500; }
.flow__txt { margin-top: 6px; font-size: 13.5px; line-height: 1.95; color: var(--gray); }

@media (min-width: 768px) {
  .flow__item { padding: 30px 0 30px 96px; }
  .flow__num { top: 32px; font-size: 20px; }
  .flow__ttl { font-size: 18px; }
  .flow__txt { font-size: 14px; }
}

/* ---------------- お問い合わせ ---------------- */
.contact__lead {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
  margin-bottom: 30px;
}
.contact__acts { display: grid; gap: 14px; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.4);
  color: var(--white);
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn--tel .btn__en {
  font-family: var(--ff-en);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--quaternary);
}
.btn--tel .btn__num {
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
}
.btn--form { font-size: 14px; letter-spacing: .1em; background: var(--white); color: var(--primary); border-color: var(--white); }
.btn--form::after { content: "→"; }
.btn:hover { background: var(--quaternary); color: var(--primary); border-color: var(--quaternary); }
.btn:hover .btn__en { color: var(--primary); }

@media (min-width: 768px) {
  .contact__lead { font-size: 16px; margin-bottom: 44px; }
  .contact__acts { grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; }
  .btn { min-height: 78px; }
}

/* ---------------- フッター ---------------- */
.foot {
  background: var(--secondary);
  padding: 48px 0 22px;
  /* スマホは下部メニューのぶんだけ余白を足す */
  padding-bottom: calc(22px + 58px + env(safe-area-inset-bottom));
}
.foot__in { width: min(100% - 40px, 1180px); margin-inline: auto; display: grid; gap: 30px; }
.foot__brand img { width: 42px; }
.foot__name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--primary);
}
.foot__addr { margin-top: 10px; font-size: 13px; line-height: 2; color: var(--gray); }
.foot__nav { display: grid; gap: 8px; }
.foot__nav a { font-size: 13px; color: var(--gray); transition: color .3s; }
.foot__nav a:hover { color: var(--tertiary); }
.foot__copy {
  width: min(100% - 40px, 1180px);
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-primary);
  font-family: var(--ff-en);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--light-gray);
}

@media (min-width: 768px) {
  .foot { padding: 70px 0 26px; }
  .foot__in { grid-template-columns: 1fr auto; align-items: start; gap: 40px; }
  .foot__nav { grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 10px 40px; }
}

/* ---------------- スクロール表示 ---------------- */
.js-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.js-reveal.is-in { opacity: 1; transform: none; }