@charset "UTF-8";
/* ============================================================
   ID-TECHS 2026 トップページ固有CSS — design-k（K案）
   hero（点描Canvas・blob・バッジ配置・手書き吹き出し）／
   よくある相談／料金4投稿カード／相談の流れ／実績ストーリーズ／
   会社案内／news／ハッシュタグ・マーキー帯
   ※共通部品（btn/tlink/eyebrow/wave/reveal/badge/吹き出し/CTA帯等）は common.css
   ============================================================ */

/* ============================================================
   hero
   ============================================================ */
.hero{
  position:relative;
  background:var(--cream);
  overflow:hidden;
  padding:clamp(40px, 7vh, 80px) 0 clamp(36px, 6vh, 60px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
  margin-top:clamp(30px, 4.5vw, 56px);
}

/* 背景blob（超スロー） */
.hero-blob{
  position:absolute;
  z-index:0;
  animation:blobDrift 11s ease-in-out infinite;
}
.hero-blob--tan{
  width:min(44vw, 560px);
  aspect-ratio:1/1;
  right:-8%;
  top:-14%;
  background:var(--tan-pale);
}
.hero-blob--sky{
  width:min(30vw, 380px);
  aspect-ratio:1/1;
  left:-7%;
  bottom:6%;
  background:var(--sky-pale);
  animation-duration:14s;
  animation-delay:-5s;
}

/* 点描フィールド（I案のCanvas演出をH案の色で再設計） */
.hero-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* 上下端でドットを溶かし、直線的な切れ目を消す */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 99%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 99%);
}

.hero-copy{ position:relative; z-index:2; }

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:8px 18px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  animation:fadeUp .9s var(--ease-pop) both;
}
.hero-pill::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--tangerine);
}

.hero-head{ position:relative; z-index:2; }
.hero h1{
  margin-top:26px;
  font-size:clamp(2.2rem, 8.9vw, 7rem);
  line-height:1.14;
  letter-spacing:.01em;
}
.line-mask{
  display:block;
  overflow:hidden;
}
.line-mask > span{
  display:inline-block;
  white-space:nowrap;
  transform:translateY(112%);
  animation:lineUp 1s var(--ease-pop) forwards;
}
.line-mask:nth-child(2) > span{ animation-delay:.12s; }
@keyframes lineUp{
  to{ transform:translateY(0); }
}
.hero h1 em{
  font-style:normal;
  color:var(--tan-deep);
}
.hero-catch{
  font-size:clamp(1.1rem, 2vw, 1.4rem);
  font-weight:900;
  letter-spacing:.02em;
  animation:fadeUp 1s .2s var(--ease-pop) both;
}
.hero-catch em{
  font-style:normal;
  color:var(--tan-deep);
}

.hero-sub{
  margin-top:14px;
  max-width:30em;
  color:var(--ink-soft);
  animation:fadeUp 1s .28s var(--ease-pop) both;
}
.hero-cta{
  margin-top:34px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 30px;
  animation:fadeUp 1s .42s var(--ease-pop) both;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

/* hero visual */
.hero-visual{
  position:relative;
  z-index:1;
  width:min(100%, 500px);
  margin-inline:auto;
  animation:fadeUp 1.1s .3s var(--ease-pop) both;
}
.hero-photo-wrap{
  position:relative;
  border-radius:56% 44% 52% 48% / 50% 55% 45% 50%;
  overflow:hidden;
  border:3px solid var(--ink);
}
.hero-photo-wrap img{
  width:100%;
  aspect-ratio:10/9;
  object-fit:cover;
}

/* 手書き吹き出し（Yomogiはここ一言だけ） */
.hero-note{
  position:absolute;
  right:2%;
  bottom:-18px;
  z-index:4;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:18px 18px 18px 4px;
  padding:10px 18px;
  font-family:'Yomogi', cursive;
  font-size:1.05rem;
  line-height:1.5;
  --r:2deg;
  transform:rotate(var(--r));
  box-shadow:0 3px 0 var(--ink);
  animation:floaty 11s ease-in-out infinite;
  animation-delay:-5s;
}

/* きらり装飾 */
.spark{
  position:absolute;
  z-index:2;
}
.spark--a{ left:46%; top:2%; }
.spark--b{ left:-6px; top:38%; }

/* ============================================================
   よくある相談
   ============================================================ */
.worries{
  background:var(--paper);
  padding:clamp(60px, 9vw, 110px) 0 clamp(70px, 9vw, 110px);
}
.worry-grid{
  list-style:none;
  margin-top:clamp(36px, 5vw, 56px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px 26px;
}
.worry-grid li:nth-child(even){ margin-top:14px; }
.worry{
  position:relative;
  display:block;
  height:100%;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  padding:26px 26px 22px;
  text-decoration:none;
  transform:rotate(var(--tilt, 0deg));
  transition:transform .35s var(--ease-pop), box-shadow .35s var(--ease-pop);
}
.worry::after{
  content:"";
  position:absolute;
  left:36px;
  bottom:-11px;
  width:19px;
  height:19px;
  background:var(--paper);
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}
.worry:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:0 6px 0 var(--ink);
}
.worry-q{
  font-size:1.12rem;
  font-weight:900;
  line-height:1.6;
}
.worry-a{
  margin-top:12px;
  font-size:.9rem;
  color:var(--ink-soft);
}
.worry-go{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:14px;
  font-size:.88rem;
  font-weight:700;
  color:var(--tan-deep);
}
.worries-foot{
  margin-top:44px;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ============================================================
   料金 × できること（J案の4投稿カード）
   ============================================================ */
.pricing{
  background:var(--paper);
  padding:0 0 clamp(80px, 10vw, 120px);
}
.post-grid{
  margin-top:clamp(40px, 6vw, 60px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
}
.post-grid > *:nth-child(even){ margin-top:64px; }
.post{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 4px 0 var(--ink);
}
.post-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
}
.post-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.04em;
}
.post-head b{
  font-weight:900;
  font-size:.9rem;
  letter-spacing:.04em;
}
.post-head .menu-no{
  font-size:.78rem;
  font-weight:700;
  color:var(--ink-soft);
  letter-spacing:.06em;
}
.post-img{
  aspect-ratio:16/10;
  overflow:hidden;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.post-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.post-actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px 0;
}
.naruhodo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:5px 16px;
  background:var(--tan-pale);
  font-weight:900;
  font-size:.85rem;
}
.naruhodo svg{ color:var(--tan-deep); }
.post-actions .bookmark{
  margin-left:auto;
  color:var(--ink-soft);
  display:inline-flex;
}
.post-body{ padding:14px 22px 26px; }
.post-body h3{
  font-size:1.26rem;
  line-height:1.5;
}
.post-price{
  margin-top:6px;
  font-weight:900;
  font-size:.98rem;
  color:var(--tan-deep);
  font-feature-settings:"tnum" 1;
}
.post-text{
  margin-top:10px;
  font-size:.95rem;
  color:var(--ink-soft);
}
.post-tags{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
}
.post-tags span{
  font-weight:700;
  font-size:.88rem;
  color:var(--tan-deep);
  letter-spacing:.02em;
}
.post-more{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:44px;
  color:var(--ink);
  font-weight:700;
  font-size:.92rem;
  text-decoration:underline wavy var(--tangerine) 2px;
  text-underline-offset:7px;
  transition:color .3s;
}
.post-more:hover{ color:var(--tan-deep); }
.post-more .arw{
  display:inline-block;
  transition:transform .35s var(--ease-pop);
}
.post-more:hover .arw{ transform:translateX(5px); }

.price-notes{
  margin-top:44px;
  background:var(--tan-pale);
  border-radius:18px;
  padding:22px clamp(20px, 3vw, 32px);
  display:grid;
  gap:8px;
}
.price-notes p{
  font-size:.9rem;
  padding-left:1.3em;
  position:relative;
}
.price-notes p::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--tangerine);
}
.price-notes strong{ font-weight:900; }
.pricing-foot{
  margin-top:34px;
  display:flex;
  justify-content:flex-end;
}

/* ============================================================
   相談の流れ（3コマ会話）
   ※吹き出し本体（.chat/.bubble等）は common.css
   ============================================================ */
.flow{
  background:var(--sky-pale);
  padding:clamp(64px, 9vw, 110px) 0 clamp(80px, 10vw, 130px);
}
.flow-foot{
  max-width:720px;
  margin:40px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.flow-foot p{
  font-size:.82rem;
  color:var(--ink-soft);
  max-width:30em;
}

/* ============================================================
   実績（J案「つくってきたもの。」ストーリーズ）
   ============================================================ */
.works{
  position:relative;
  background:var(--cream);
  padding:clamp(70px, 10vw, 130px) 0;
}
.works .sec-head{
  position:relative;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 40px);
}
.sec-title-wrap{
  position:relative;
  display:inline-block;
}
.works-star{
  position:absolute;
  right:-46px;
  top:-14px;
  color:var(--tangerine);
  animation:floaty 16s ease-in-out infinite;
}
.works-hand{
  position:absolute;
  right:clamp(20px, 4vw, 40px);
  top:10px;
  font-family:'Yomogi', cursive;
  font-size:1.05rem;
  color:var(--tan-deep);
  transform:rotate(-3deg);
}
.stories-track{
  margin-top:44px;
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:14px max(clamp(20px, 4vw, 40px), calc((100vw - 1040px) / 2)) 28px;
  scrollbar-width:none;
}
.stories-track::-webkit-scrollbar{ display:none; }
.story{
  flex:none;
  width:168px;
  text-align:center;
  scroll-snap-align:start;
  text-decoration:none;
}
.story-ring{
  width:168px;
  height:168px;
  border-radius:50%;
  padding:5px;
  background:conic-gradient(from 210deg, #FFB37F, var(--tangerine), var(--sky), var(--tangerine), #FFB37F);
}
.story-img{
  width:100%;
  height:100%;
  border-radius:50%;
  border:4px solid var(--paper);
  overflow:hidden;
  background:var(--cream);
}
.story-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-pop);
}
.story:hover .story-img img{ transform:scale(1.08); }
.story-name{
  display:block;
  margin-top:14px;
  font-weight:700;
  font-size:.92rem;
  font-feature-settings:"palt" 1;
}
.story-en{
  display:block;
  font-weight:700;
  font-size:.75rem;
  color:var(--ink-soft);
  letter-spacing:.1em;
}
.story-all .story-img{
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream);
  font-weight:900;
  font-size:1.9rem;
  transition:background .3s;
}
.story-all:hover .story-img{ background:var(--tan-deep); }

/* ============================================================
   会社案内
   ============================================================ */
.company{
  background:var(--cream);
  padding:0 0 clamp(70px, 10vw, 120px);
}
.company-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
.company-copy p{
  margin-top:20px;
  color:var(--ink-soft);
}
.company-copy .tlink{ margin-top:24px; }
.company-panel{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:clamp(24px, 3vw, 40px);
}
.company-dl{
  display:grid;
  grid-template-columns:118px 1fr;
}
.company-dl dt,
.company-dl dd{
  padding:14px 4px;
  border-top:1px solid var(--line);
  font-size:.92rem;
}
.company-dl dt{
  font-weight:900;
}
.company-dl dt:first-of-type,
.company-dl dd:first-of-type{ border-top:0; }
.company-dl a{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline wavy var(--sky) 2px;
  text-underline-offset:6px;
  transition:color .3s;
}
.company-dl a:hover{ color:var(--sky-deep); }
.area-pills{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
}
.area-pills li{
  font-size:.78rem;
  font-weight:700;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:3px 14px;
  background:var(--cream);
}

/* ============================================================
   news
   ============================================================ */
.news{
  background:var(--cream);
  padding:0 0 clamp(60px, 8vw, 90px);
}
.news-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
}
.news-list{ list-style:none; }
.news-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  min-height:64px;
  padding:12px 10px;
  text-decoration:none;
  border-radius:14px;
  transition:background .3s;
}
.news-list li + li .news-row{ border-top:2px dashed var(--dash); border-radius:0 0 14px 14px; }
.news-row:hover{ background:var(--tan-pale); }
.news-row time{
  font-size:.82rem;
  font-weight:700;
  color:var(--tan-deep);
  font-feature-settings:"tnum" 1;
  letter-spacing:.06em;
}
.news-row .t{
  font-size:.95rem;
  font-weight:700;
}
.news-row .arrow{
  font-weight:900;
  color:var(--ink-soft);
}
.news-inner .tlink{ margin-top:20px; }

/* ============================================================
   ハッシュタグ・マーキー帯（J案）
   ============================================================ */
.marquee-wrap{
  background:var(--cream);
  overflow:hidden;
  padding:clamp(30px, 4vw, 56px) 0 clamp(64px, 8vw, 100px);
}
.marquee{
  background:var(--ink);
  transform:rotate(-2deg);
  width:112%;
  margin-left:-6%;
  padding:18px 0;
  overflow:hidden;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-track > div{
  display:flex;
  gap:2.6rem;
  padding-right:2.6rem;
  align-items:center;
}
.marquee-track span{
  font-weight:900;
  font-size:1.35rem;
  color:var(--cream);
  white-space:nowrap;
  font-feature-settings:"palt" 1;
}
.marquee-track span.c-tan{ color:var(--tangerine); }
.marquee-track span.c-sky{ color:var(--sky); }
@keyframes marquee{
  to{ transform:translateX(-50%); }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{
    grid-template-columns:1fr;
    min-height:0;
    gap:56px;
  }
  .hero-visual{ width:min(100%, 440px); }
  .worry-grid{ grid-template-columns:repeat(2, 1fr); }
  .company-grid{ grid-template-columns:1fr; }
  .news-inner{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .hero{ padding-top:36px; }
  .hero h1{ font-size:clamp(2rem, 8.6vw, 2.8rem); }
  .hero-note{ font-size:.95rem; right:0; }

  .worry-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .worry-grid li:nth-child(even){ margin-top:0; }

  .post-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .post-grid > *:nth-child(even){ margin-top:0; }

  .flow-foot{ justify-content:flex-start; }

  .works-hand{
    position:static;
    display:inline-block;
    margin-top:6px;
    transform:rotate(-2deg);
  }
  .works-star{ right:-38px; top:-10px; width:26px; height:26px; }
  .stories-track{ gap:24px; }

  .marquee-track span{ font-size:1.15rem; }
}

@media (max-width:480px){
  .hero h1{ font-size:2rem; }
  .hero-cta .btn{ width:100%; }
  .story{ width:136px; }
  .story-ring{ width:136px; height:136px; }
  .stories-track{ gap:20px; }
  .company-dl{ grid-template-columns:1fr; }
  .company-dl dt{ padding-bottom:0; }
  .company-dl dd{ border-top:0; padding-top:2px; }
  .news-row{ grid-template-columns:auto 1fr; }
  .news-row .arrow{ display:none; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .line-mask > span{ transform:none; animation:none; }
  .hero-pill, .hero-catch, .hero-sub, .hero-cta, .hero-visual{ animation:none; opacity:1; transform:none; }
  .hero-blob{ animation:none; }
  .marquee-track{ animation:none !important; }
}