@charset "UTF-8";
/* =========================================================
   Just innovation — Artboard 1 faithful reproduction
   BEM / responsive (SP・Tablet・PC)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --c-black:#000000;
  --c-ink:#140905;          /* warm near-black : COMPANY */
  --c-white:#ffffff;
  --c-grey:#c6c6c6;         /* placeholder / hero grain */
  --c-grey-d:#a7a7a7;
  --c-orange-deep:#c8542f;  /* red-orange */
  --c-orange:#d87b3e;
  --c-amber:#e7af46;
  --c-gold:#eec84b;
  --c-orange-dark:#a8472b;

  --font-jp:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en:"Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  --font-script:"Great Vibes", cursive;

  --content:1180px;        /* inner content max width */
  --pad:clamp(20px, 6vw, 64px);
  /* distance from viewport-left to the content-left edge */
  --edge:max(var(--pad), calc((100vw - var(--content)) / 2 + var(--pad)));
  --header-h:80px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x: hidden;}
body{
  margin:0;
  font-family:var(--font-jp);
  font-weight:400;
  color:var(--c-black);
  background:var(--c-black);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

.main{display:block;}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:var(--c-black);height:var(--header-h);
}
.header__inner{
  /* max-width:var(--content); */
  margin:0 auto;height:100%;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
}
.nav__list{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);}
.nav__link{
  font-family:var(--font-en);font-weight:500;
  font-size:12px;letter-spacing:.14em;color:var(--c-white);
  position:relative;padding:6px 0;transition:opacity .25s;
}
.nav__link:hover{opacity:.6;}
.header__nav .nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--c-gold);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.header__nav .nav__link:hover::after{transform:scaleX(1);transform-origin:left;}

/* nav items slide-in on load（右から順番にスライド） */
.header__nav .nav__item{
  opacity:0;transform:translateX(28px);
  animation:navIn .6s var(--ease) forwards;
}
.header__nav .nav__item:nth-child(5){animation-delay:.15s;}
.header__nav .nav__item:nth-child(4){animation-delay:.27s;}
.header__nav .nav__item:nth-child(3){animation-delay:.39s;}
.header__nav .nav__item:nth-child(2){animation-delay:.51s;}
.header__nav .nav__item:nth-child(1){animation-delay:.63s;}
@keyframes navIn{to{opacity:1;transform:translateX(0);}}

.header__toggle{display:none;}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;}
.logo__img{display:block;width:auto;}
.logo--header .logo__img{height:50px;}
.logo--footer .logo__img{height:50px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;margin-top:var(--header-h);
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  background:#c9c9c9;overflow:hidden;line-height:0;
}
.hero__image{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  animation:heroFade 1.1s var(--ease) both;
}
@keyframes heroFade{from{opacity:0;}to{opacity:1;}}

/* スクロール誘導インジケーター */
.hero__scroll{
  position:absolute;right:1%;bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--c-white);line-height:1;
  animation:heroFade 1s var(--ease) 1.6s both;
}
.hero__scroll-text{
  font-family:var(--font-en,inherit);
  font-size:.62rem;letter-spacing:.32em;text-indent:.32em;
  font-weight:700;writing-mode:vertical-rl;
}
.hero__scroll-line{
  position:relative;width:1px;height:54px;
  background:rgba(255,255,255,.45);overflow:hidden;
}
.hero__scroll-line::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:40%;
  background:var(--c-white);
  animation:heroScroll 1.8s var(--ease) infinite;
}
@keyframes heroScroll{
  0%{transform:translateY(-100%);}
  60%,100%{transform:translateY(250%);}
}
.hero__scroll:hover .hero__scroll-line{background:rgba(255,255,255,.7);}
.hero__title-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hero__headline{
  position:absolute;left:0;bottom:0;z-index:4;
  margin-left:var(--edge);width:min(740px,49vw);height:auto;
  opacity:0;transform:translateY(26px);
  animation:heroHeadline 1s var(--ease) 1.15s forwards;   /* 開いたら時間差で表示 */
}
@keyframes heroHeadline{to{opacity:1;transform:translateY(0);}}



/* ---------- Intro ---------- */
.intro{position:relative;color:var(--c-black); background: url(../img/bg-message.svg) center no-repeat; background-size: cover; scroll-margin-top:var(--header-h);}
.intro__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.intro__inner{
  position:relative;max-width:var(--content);margin:0 auto;
  padding:clamp(56px,8vw,104px) var(--pad);min-height:600px;
  display: flex;
  align-items: center;
}
.intro__lead{max-width:58%;}
.intro__line{margin:0 0 1.9em;font-size:clamp(.82rem,1.25vw,1rem);font-weight:500;}
.intro__line:last-child{margin-bottom:0;}
.intro__photo{position:absolute;margin:0;box-shadow:0 18px 44px rgba(0,0,0,.32);}
.intro__photo img{object-fit:cover;}
.intro__photo--top{
  top:-15%;right:3%;width:clamp(160px,18vw,236px);transform:rotate(3deg);z-index:3;
}
.intro__photo--top img{aspect-ratio:2.5/4;}
.intro__photo--poster{
  top:55%;right:16%;width:clamp(150px,16vw,212px);transform:rotate(-2deg);z-index:2;
}
.intro__photo--poster img{aspect-ratio:2.5/4;}

/* ---------- Shared section heading ---------- */
.section-head{margin-bottom:clamp(28px,4vw,52px);}
.section-head__en{
  margin:0;font-family:var(--font-en);font-weight:800;
  font-size:clamp(2.6rem,6.4vw,4.7rem);letter-spacing:.005em;line-height:1;
}
.section-head__ja{
  margin:.55em 0 0;font-family:var(--font-jp);font-weight:900;
  font-size:clamp(1.05rem,2.1vw,1.6rem);letter-spacing:.04em;
}
.section-head__ja--wide{font-size:clamp(1rem,2.5vw,1.7rem);}
.section-head--light .section-head__en,
.section-head--light .section-head__ja{color:var(--c-white);}
.section-head--dark .section-head__en,
.section-head--dark .section-head__ja{color:var(--c-black);}

/* ---------- Service ---------- */
.service{background:var(--c-black);overflow:hidden;}
.service__inner{
  max-width:var(--content);margin:0 auto;
  padding:clamp(56px,8vw,96px) var(--pad) clamp(48px,6vw,80px);
}

/* ---------- Carousel (shared) ---------- */
.carousel{position:relative;}
.carousel__track{
  display:flex;gap:clamp(14px,1.8vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
  /* 右側がビューポート端で見切れる full-bleed 配置（左端はコンテンツ左に揃える） */
  width:100vw;
  margin-left:calc(-1 * var(--edge));
  padding-left:var(--edge);
  padding-right:0;
  scroll-padding-left:var(--edge);
}
.carousel__track::-webkit-scrollbar{display:none;}
.carousel__nav{display:flex;justify-content:center;gap:14px;margin-top:clamp(20px,3vw,34px);}
.carousel__btn{
  width:42px;height:42px;border-radius:50%;border:none;background:var(--c-white);
  display:grid;place-items:center;transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.carousel__btn:hover{transform:translateY(-2px);}
.carousel__btn svg{width:18px;height:18px;fill:none;stroke:var(--c-orange);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.carousel__btn:disabled{opacity:.4;cursor:default;transform:none;}

/* Service card */
.card{flex:0 0 auto;scroll-snap-align:start;background:var(--c-white);}
.card--service{
  width:clamp(230px,23vw,300px);border-radius:18px;
  padding:20px 18px 22px;display:flex;flex-direction:column;
}
.card__head{min-height:84px;text-align:center;}
.card__label{
  display:block;font-size:.72rem;font-weight:700;color:var(--c-black);
  margin-bottom:.5em;letter-spacing:.02em;
}
.card__title{margin:0;font-weight:700;font-size:.92rem;line-height:1.55;}
.card--service .card__media{
  margin-top:16px;flex:1;min-height:230px;border-radius:6px;
  background:var(--c-grey);background-size:cover;background-position:center;
}

/* ---------- Example ---------- */
.example{position:relative; background: url(../img/bg-example.svg) center no-repeat; background-size: cover;}
.example__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.example__inner{
  position:relative;max-width:var(--content);margin:0 auto;
  padding:clamp(56px,8vw,96px) var(--pad) clamp(48px,6vw,84px);
}
.card--example{
  width:min(600px,88vw);border-radius:22px;padding:clamp(26px,3vw,40px);
  display:flex;gap:clamp(20px,3vw,44px);align-items:center;
  box-shadow:0 20px 50px rgba(120,50,10,.18);
}
.card--example .card__body{flex:1;min-width:0;}
.card__name{margin:0 0 .7em;font-weight:900;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:.02em;}
.card__spec{margin:0;font-size:.8rem;line-height:1.7;color:#222;}
.card__spec-row{display:flex;gap:.6em;margin-bottom:.4em;}
.card__spec dt{flex:0 0 auto;font-weight:700;}
.card__spec dt::after{content:"：";}
.card__spec dd{margin:0;}
.card__visual{flex:0 0 auto;width:clamp(240px,30%,300px);}
.card__media--square{
  aspect-ratio:1/1;border-radius:4px;background:var(--c-grey);
  background-size:cover;background-position:center;
}
.card__dots{display:flex;justify-content:center;gap:9px;margin-top:14px;}
.card__dot{
  width:9px;height:9px;border-radius:50%;border:none;background:#cfcfcf;padding:0;
  transition:background .2s,transform .2s;
}
.card__dot.is-active{background:#555;transform:scale(1.05);}

/* ---------- Company ---------- */
.company{background:radial-gradient(120% 80% at 80% 0%, #2a1109 0%, var(--c-ink) 55%);color:var(--c-white);overflow:hidden;}
.company__inner{
  position:relative;max-width:var(--content);margin:0 auto;
  padding:clamp(96px,13vw,156px) var(--pad) clamp(110px,21vw,250px);
}
.profile{margin:0;max-width:70%;}
.profile__row{display:flex;gap:clamp(16px,3vw,48px);padding:clamp(10px,1.4vw,16px) 0;font-size:clamp(.82rem,1.2vw,.96rem);}
.profile__term{flex:0 0 clamp(120px,16vw,190px);font-weight:500;white-space:nowrap;}
.profile__desc{margin:0;font-weight:400;}
.company__photo{position:absolute;margin:0;box-shadow:0 18px 44px rgba(0,0,0,.5);}
.company__photo img{object-fit:cover;}
.company__photo--1{top:12%;right:10%;width:clamp(150px,17vw,230px);transform:rotate(2.5deg);}
.company__photo--1 img{aspect-ratio:3.7/5;}
.company__photo--2{top:46%;right:0;width:clamp(150px,17vw,225px);transform:rotate(-2deg);}
.company__photo--2 img{aspect-ratio:2.5/4;}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:visible;color:var(--c-black); background: url(../img/bg-contact.svg) center no-repeat; background-size: cover;}
.contact__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.contact__inner{
  position:relative;max-width:var(--content);margin:0 auto;
  padding:clamp(56px,8vw,96px) var(--pad) clamp(48px,6vw,72px);
}
.contact__photo{
  position:absolute;top:clamp(-120px,-9vw,-80px);right:calc(var(--pad) );margin:0;z-index:2;
  width:clamp(210px,27vw,240px);box-shadow:0 18px 44px rgba(0,0,0,.35);transform:rotate(2deg);
}
.contact__photo img{aspect-ratio:2.5/4;object-fit:cover;}

/* form */
.form{margin:clamp(36px,5vw,60px) 0 0;max-width:920px;}
.form__row{
  display:grid;grid-template-columns:clamp(120px,18%,180px) 1fr;
  align-items:center;gap:clamp(14px,2vw,28px);margin-bottom:clamp(14px,1.8vw,20px);
}
.form__row--area{align-items:start;}
.form__label{font-size:.82rem;font-weight:700;text-align:right;}
.form__field{
  width:100%;border:none;background:var(--c-white);border-radius:3px;
  padding:13px 16px;font-family:inherit;font-size:.95rem;color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.form__field:focus{outline:3px solid rgba(20,9,5,.55);outline-offset:1px;}
.form__field--area{min-height:180px;resize:vertical;line-height:1.7;}
.form__actions{display:flex;justify-content:flex-end;margin-top:clamp(18px,2.4vw,26px);
  padding-right:0;}
.btn{
  font-family:var(--font-jp);font-weight:700;border:none;border-radius:2px;
  transition:transform .2s,opacity .2s;
}
.btn--submit{
  background:var(--c-black);color:var(--c-white);
  padding:13px 40px;font-size:.9rem;letter-spacing:.06em;
}
.btn--submit:hover{transform:translateY(-2px);opacity:.9;}
.btn--submit:disabled{opacity:.5;cursor:default;transform:none;}
/* ハニーポット（スパム対策・非表示） */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* tel block */
.tel-block{text-align:center;margin-top:clamp(36px,5vw,60px);}
.tel-block__lead{margin:0;font-weight:700;font-size:clamp(.95rem,1.8vw,1.2rem);}
.tel-block__number{
  display:inline-block;margin:.12em 0;font-family:var(--font-en);font-weight:800;
  font-size:clamp(2.4rem,7vw,4rem);letter-spacing:.01em;color:var(--c-black);
}
.tel-block__note{margin:0;font-size:clamp(.74rem,1.3vw,.92rem);}

/* ---------- Footer ---------- */
.footer{background:var(--c-black);color:var(--c-white);}
.footer__inner{
  /* max-width:var(--content); */
  margin:0 auto;padding:clamp(38px,5vw,56px) var(--pad);
  display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.footer__address{margin:18px 0 0;font-size:.78rem;line-height:1.9;color:#cfcfcf;}
.footer__meta{display:flex;flex-direction:column;align-items:flex-end;gap:20px;text-align:right;}
.footer__nav .nav__list{gap:0;flex-wrap:wrap;justify-content:flex-end;}
.footer__nav .nav__item:not(:first-child)::before{content:"｜";color:#555;margin:0 .7em;}
.footer__nav .nav__link{font-size:11px;}
.footer__copy{margin:0;font-family:var(--font-en);font-size:.72rem;color:#cfcfcf;line-height:1.7;}
.footer__copy-sub{font-family:var(--font-jp);}

/* ---------- Reveal animations ---------- */
.js-slide-right{opacity:0;transform:translateX(60px);}
.js-slide-right.is-in{opacity:1;transform:translateX(0);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js-reveal{opacity:0;transform:translateY(24px);}
.js-reveal.is-in{opacity:1;transform:translateY(0);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js-reveal-left{opacity:0;transform:translateX(-48px);}
.js-reveal-left.is-in{opacity:1;transform:translateX(0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);}

/* ---------- Modal (確認 / 完了 ポップアップ) ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;}
.modal[hidden]{display:none;}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);
  animation:fade .25s ease;}
.modal__dialog{
  position:relative;z-index:1;width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--c-white);border-radius:10px;padding:clamp(26px,4vw,40px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .3s var(--ease);
}
@keyframes fade{from{opacity:0;}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);}}
.modal__close{
  position:absolute;top:14px;right:16px;border:none;background:none;
  font-size:1.6rem;line-height:1;color:#888;
}
.modal__title{margin:0 0 .8em;font-weight:900;font-size:1.3rem;color:var(--c-black);}
.modal__body{color:#222;font-size:.9rem;}
.modal__list{margin:0;}
.modal__item{padding:11px 0;border-bottom:1px solid #eee;}
.modal__item:last-child{border-bottom:none;}
.modal__item-term{display:block;font-size:.74rem;color:#888;margin-bottom:.2em;}
.modal__item-desc{display:block;font-weight:500;white-space:pre-wrap;word-break:break-word;}
.modal__lead{margin:0 0 1em;}
.modal__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1.6em;flex-wrap:wrap;}
.modal__btn{border:none;border-radius:3px;padding:12px 26px;font-weight:700;font-size:.88rem;}
.modal__btn--ghost{background:#eee;color:#333;}
.modal__btn--primary{background:var(--c-black);color:#fff;}
.modal__note{margin:1.4em 0 0;font-size:.74rem;color:#999;line-height:1.7;}

/* =========================================================
   Responsive  — Tablet
   ========================================================= */
@media (max-width:1000px){
  .intro__inner{min-height:auto;}
  .intro__lead{max-width:100%;}
  .intro__photo{display:inline-block;}
  .intro__photo--top{width:120px;margin:24px 16px 0 0;transform:rotate(2deg);}
  .intro__photo--poster{width:120px;top:45%; margin:24px 0 0 0;transform:rotate(-2deg);}
  .profile{max-width:100%;}
  .company__inner{padding:clamp(48px,8vw,80px) var(--pad);}
  .company__photo--1{display:inline-block;width:150px;margin:30px 14px 0 0;}
  .company__photo--2{display:inline-block;width:150px;margin:30px 0 0 0;}
  .contact__photo{top:clamp(-20px,-9vw,-180px);right:calc(var(--pad) );margin:0 0 28px auto;width:130px;}
  .card--example{width:88vw;}
}

/* =========================================================
   Responsive — SP (mobile)
   ========================================================= */
@media (max-width:680px){
  body{line-height:1.85;}
  :root{--header-h:56px;}

  /* hamburger nav */
  .header__toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;border:none;background:none;z-index:120;
  }
  .header__toggle-bar{display:block;width:24px;height:2px;background:#fff;transition:.3s;}
  .header.is-open .header__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .header.is-open .header__toggle-bar:nth-child(2){opacity:0;}
  .header.is-open .header__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .header__nav{
    position:fixed;inset:0;background:rgba(0,0,0,.96);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .3s;
  }
  .header.is-open .header__nav{opacity:1;visibility:visible;}
  .header__nav .nav__list{flex-direction:column;gap:28px;}
  .header__nav .nav__item{animation:none;opacity:1;transform:none;}
  .header__nav .nav__link{font-size:16px;}

  .hero__inset{width:28%;right:4%;bottom:-11%;}
  .logo--header .logo__img{ height: 30px;}

  .intro__inner{padding: clamp(26px,8vw,104px) var(--pad);}
  .intro__lead{ max-width: 50%;}
  .intro__line{margin-bottom:1.5em;}
  .intro__photo{display:block;}
  .intro__photo--top{top:-10%;width:110px;margin:24px auto 0;transform:rotate(2deg);}
  .intro__photo--poster{margin:40px auto 0;width:110px; right: 10%;}

  /* carousels: one card per view */
  .card--service{width:78vw;}
  .card--service .card__media{min-height:200px;}
  .card--example{flex-direction:column;align-items:stretch;width:82vw;gap:20px;}
  .card__visual{width:100%;}
  .card__name{text-align:left;}

  .company__photo--1,.company__photo--2{display:inline-block;width:24%;margin-top:24px;}
  .company__photo--1{top:5%; right: 2%;}
  .company__photo--2{top: 25%; right: 5%;}
  .profile__row{flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);}
  .profile__term{flex:none;color:#e7af46;}

  .contact__photo{top:clamp(-40px,-9vw,-180px);margin:0 0 24px auto;width:80px;}
  .form__row{grid-template-columns:1fr;gap:6px;margin-bottom:16px;}
  .form__label{text-align:left;}
  .form__actions{justify-content:stretch;}
  .btn--submit{width:100%;}

  .footer__inner{flex-direction:column;}
  .footer__meta{align-items:flex-start;text-align:left;}
  .footer__nav .nav__list{justify-content:flex-start;}
  .footer__nav .nav__link{font-size: 10px;}
  .footer__nav .nav__item:not(:first-child)::before{margin: 0;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .js-slide-right,.js-reveal,.js-reveal-left,.hero__title,.header__nav .nav__item{
    opacity:1 !important;transform:none !important;}
}