@charset "utf-8";
/* ============================================================
   sections.css
   セクションごとの背景 / ABOUT / CONTACT の固有レイアウト
   ============================================================ */

/* ------------------------------------------------------------
   背景（セクションごとに色の流れを変える）
   ------------------------------------------------------------ */
.section--about{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(120,20,140,.62),transparent 58%),
    radial-gradient(90% 80% at 100% 42%,rgba(0,150,140,.34),transparent 62%),
    radial-gradient(80% 70% at 22% 100%,rgba(80,10,70,.4),transparent 66%),
    #05090d;
}
.section--works{
  background:
    radial-gradient(110% 85% at 0% 0%,rgba(70,20,130,.5),transparent 56%),
    radial-gradient(95% 85% at 100% 55%,rgba(0,140,130,.3),transparent 62%),
    #04080c;
}
.section--planning{
  background:
    radial-gradient(110% 90% at 12% 6%,rgba(150,15,150,.72),transparent 60%),
    radial-gradient(90% 80% at 100% 100%,rgba(160,20,140,.55),transparent 58%),
    radial-gradient(60% 55% at 55% 45%,rgba(6,2,12,.9),transparent 70%),
    #0a0410;
}
.section--webdesign{
  background:
    radial-gradient(105% 85% at 100% 0%,rgba(0,150,135,.48),transparent 58%),
    radial-gradient(85% 80% at 0% 100%,rgba(0,110,110,.24),transparent 60%),
    #04100e;
}
.section--development{
  background:
    radial-gradient(105% 90% at 0% 14%,rgba(105,25,190,.6),transparent 58%),
    radial-gradient(95% 85% at 100% 96%,rgba(120,30,200,.55),transparent 58%),
    radial-gradient(58% 52% at 52% 48%,rgba(5,2,12,.92),transparent 72%),
    #0a0418;
}
.section--contact{
  background:#050708;
  padding:150px 0 160px;
}
/* CONTACTだけは細かいグリッドをはっきり出す（デザイン準拠） */
.section--contact::after{
  background-image:
    linear-gradient(rgba(150,190,205,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,205,.055) 1px,transparent 1px);
  background-size:38px 38px;
}


/* --- セクションごとのネオン色 / オーロラ色 --- */
.section--about{
  --n1:var(--pink);--n2:var(--violet);--n3:var(--cyan);--n4:var(--violet);
  --a1:rgba(168,40,190,.55);--a2:rgba(0,170,160,.42);--a3:rgba(120,30,150,.4);
}
.section--works{
  --n1:var(--cyan);--n2:var(--violet);--n3:var(--pink);--n4:var(--violet);
  --a1:rgba(90,40,170,.5);--a2:rgba(0,150,145,.4);--a3:rgba(60,30,130,.42);
}
.section--planning{
  --n1:var(--pink);--n2:var(--pink);--n3:var(--violet);--n4:var(--pink);
  --a1:rgba(190,20,180,.55);--a2:rgba(150,25,170,.5);--a3:rgba(210,30,140,.45);
}
.section--webdesign{
  --n1:var(--cyan);--n2:var(--cyan);--n3:var(--violet);--n4:var(--cyan);
  --a1:rgba(0,175,160,.5);--a2:rgba(0,140,155,.45);--a3:rgba(20,120,140,.4);
}
.section--development{
  --n1:var(--violet);--n2:var(--violet);--n3:var(--pink);--n4:var(--violet);
  --a1:rgba(125,35,215,.55);--a2:rgba(150,45,225,.48);--a3:rgba(90,30,190,.45);
}
.section--contact{
  --n1:var(--cyan);--n2:var(--violet);--n3:var(--pink);--n4:var(--violet);
  --a1:rgba(70,30,120,.32);--a2:rgba(0,110,120,.28);--a3:rgba(120,25,110,.28);
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.about__title{
  --depth:-30;
  transform:translate3d(0,var(--y,0px),0);
  display:block;
  font-size:clamp(50px,9.4vw,156px);
  font-weight:300;line-height:.9;letter-spacing:-.012em;
}
.about__row{
  display:flex;align-items:center;gap:clamp(20px,3.2vw,58px);
  flex-wrap:wrap;
}
.about__cross{
  flex:none;width:clamp(38px,4vw,74px);height:auto;
  color:#dfe7ee;
}
.about__cross line{
  stroke:currentColor;stroke-width:1.6;fill:none;
  vector-effect:non-scaling-stroke;
}
.about__lead{
  --depth:46;
  font-family:var(--font-jp);font-weight:400;
  font-size:clamp(13px,1.05vw,19px);
  line-height:2.3;letter-spacing:.24em;color:#eaf0f5;
}
.about__title-outline{
  display:block;margin-top:.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(198,214,226,.6);
}

/* --- 3つのサークル --- */
.about__circles{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(26px,6vw,120px);
  margin-top:clamp(56px,7vw,112px);
}
.about-circle{
  position:relative;
  --p:0;--y:0px;--depth:26;
  transform:translate3d(0,var(--y),0);
  width:clamp(190px,18vw,348px);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  color:#e9eff4;
}
.about-circle__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.about-circle__ring circle{
  fill:none;
  stroke:var(--c);
  stroke-width:.32;
  stroke-dasharray:1;
  /* スクロール量にそのまま連動して円が描かれていく */
  stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - var(--i,0) * .1) / .7),1));
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  transition:filter .5s ease;
  filter:drop-shadow(0 0 3px var(--c));opacity:.9;
}
html:not(.js) .about-circle__ring circle{stroke-dashoffset:0}
.about-circle:hover .about-circle__ring circle{
  filter:drop-shadow(0 0 12px var(--c));
}
/* --- 円周を1周する光の粒。01 → 02 → 03 → 01 … と順番に回る --- */
.about-circle__runner{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
}
.about-circle__runner i{
  position:absolute;left:50%;top:.5%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 4px #fff,
    0 0 10px var(--c),
    0 0 22px var(--c),
    0 0 40px var(--c);
}
/* 3つ分で1サイクル（1つあたり約3秒 × 3 = 9秒） */
.about__circles.is-running .about-circle__runner{
  animation:tcRunner 9s linear infinite;
  animation-delay:1.2s;
}
.about__circles.is-running .about-circle:nth-child(2) .about-circle__runner{animation-delay:4.2s}
.about__circles.is-running .about-circle:nth-child(3) .about-circle__runner{animation-delay:7.2s}
@keyframes tcRunner{
  0%  {opacity:0;transform:rotate(0deg)}
  3%  {opacity:1}
  30% {opacity:1}
  33% {opacity:0;transform:rotate(360deg)}
  100%{opacity:0;transform:rotate(360deg)}
}

.about-circle__num{
  font-family:var(--font-en);
  font-size:clamp(26px,2.3vw,42px);font-weight:400;letter-spacing:.06em;
  color:var(--c);
  text-shadow:0 0 18px var(--c);
}
.about-circle__en{
  margin-top:clamp(10px,1vw,18px);
  font-family:var(--font-en);
  font-size:clamp(13px,1.25vw,23px);letter-spacing:.2em;
}
.about-circle__jp{
  margin-top:clamp(10px,.9vw,17px);
  font-size:clamp(10px,.78vw,14px);letter-spacing:.2em;
  color:var(--c);
}

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contact__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(40px,6vw,110px);
  flex-wrap:wrap;
}
.contact__label{
  margin-bottom:26px;
  font-family:var(--font-en);
  font-size:10px;letter-spacing:.34em;color:#8b99a6;
}
/* sections.css は components.css の後に読むので、ネオン時の色をここで上書きする */
.contact__label[data-neon]{color:#f2f7fb}
.contact__title{
  --depth:-26;
  transform:translate3d(0,var(--y,0px),0);
  font-family:var(--font-en);
  font-size:clamp(58px,8vw,132px);
  font-weight:300;line-height:.96;letter-spacing:-.01em;
}
.contact__title .lets{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(205,218,228,.62);
}
.contact__title .create{
  display:block;margin-left:.16em;
  background:linear-gradient(94deg,var(--pink) 4%,var(--violet) 52%,var(--cyan) 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:180% 100%;
  animation:tcCreateFlow 9s ease-in-out infinite;
}
@keyframes tcCreateFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.contact__text{
  margin-top:clamp(28px,3vw,52px);
  font-size:clamp(13px,1vw,17px);line-height:2.35;letter-spacing:.16em;
  color:#e6ecf1;
}

/* --- 七角形のバッジ --- */
.contact__badge{
  --depth:44;
  position:relative;flex:none;
  width:clamp(260px,30vw,470px);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
}
.contact__badge svg.poly{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;
}
.contact__badge .ring{transform-origin:170px 170px}
.contact__badge .ring polygon{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
}
.contact__badge .halo{stroke-width:9;opacity:.16}
.contact__badge .mid {stroke-width:3.6;opacity:.42}
.contact__badge .core{stroke-width:1.5;opacity:1}
.contact__badge .ring-a polygon{stroke:var(--pink)}
.contact__badge .ring-b polygon{stroke:var(--cyan)}

/* 2枚の七角形が逆方向にゆっくり回り続ける（速度を変えているので重なり方が毎回変わる） */
.section--contact.is-inview .contact__badge .ring-a{animation:tcSpin 34s linear infinite}
.section--contact.is-inview .contact__badge .ring-b{animation:tcSpinBack 47s linear infinite}

/* ネオン管のように呼吸する発光 */
.contact__badge svg.poly{
  filter:drop-shadow(0 0 7px rgba(255,40,168,.75)) drop-shadow(0 0 20px rgba(50,231,255,.5));
}
.section--contact.is-inview .contact__badge svg.poly{
  animation:tcBadgeGlow 4.2s ease-in-out infinite;
}
@keyframes tcBadgeGlow{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,40,168,.6)) drop-shadow(0 0 16px rgba(50,231,255,.4))}
  50%    {filter:drop-shadow(0 0 15px rgba(255,40,168,1)) drop-shadow(0 0 40px rgba(50,231,255,.85))}
}

/* ホバーで回転が速くなり、光が強まる */
.contact__badge:hover .ring-a{animation-duration:9s}
.contact__badge:hover .ring-b{animation-duration:13s}
.contact__badge:hover svg.poly{animation-duration:1.5s}

.contact__mail{
  width:clamp(34px,2.6vw,46px);
  stroke:var(--cyan);stroke-width:1.4;fill:none;
  filter:drop-shadow(0 0 6px var(--cyan));
  transition:transform .4s var(--ease),filter .4s ease;
}
.contact__badge:hover .contact__mail{filter:drop-shadow(0 0 14px var(--cyan)) drop-shadow(0 0 28px var(--cyan))}
.contact__badge:hover .contact__mail{transform:translateY(-4px)}
.contact__badge-txt{
  font-family:var(--font-en);
  font-size:clamp(13px,1.1vw,20px);letter-spacing:.24em;color:#eef3f7;
  text-shadow:0 0 8px rgba(255,255,255,.4),0 0 22px var(--cyan);
  transition:text-shadow .4s ease;
}
.contact__badge:hover .contact__badge-txt{
  text-shadow:0 0 8px #fff,0 0 20px var(--cyan),0 0 44px var(--pink);
}
.contact__badge-arrow{
  font-size:18px;color:var(--cyan);line-height:1;
  text-shadow:0 0 10px var(--cyan);
  transition:transform .4s var(--ease);
}
.contact__badge:hover .contact__badge-arrow{transform:translateX(8px)}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:900px){
  .about__row{gap:16px}
  .about__lead{width:100%;letter-spacing:.16em;line-height:2.1}
  .about__title-outline{margin-top:.18em}
  .about__circles{gap:30px;margin-top:56px}
  .about-circle{width:min(63vw,268px)}
  .section--contact{padding:100px 0 110px}
  .contact__inner{justify-content:center;text-align:left}
  .contact__badge{width:min(78vw,380px);margin:0 auto}
}
@media(max-width:560px){
  .about__title{font-size:clamp(32px,10.6vw,74px)}
  .contact__title{font-size:clamp(48px,15vw,80px)}
}

/* ---- Contactページ：フォーム見た目（Contact Form 7） ---- */
.contact-page-form{
    max-width:600px;
    margin:60px auto 0;
    text-align:left;
}

.contact-page-form .wpcf7-form p{ margin-bottom:24px; }

.contact-page-form label{
    display:block;
    margin-bottom:8px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.05em;
    color:var(--text-dim);
}

.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"],
.contact-page-form textarea{
    width:100%;
    padding:14px 16px;
    background:rgba(245,247,249,.04);
    border:1px solid var(--line);
    color:var(--text);
    font-family:var(--font-jp);
    font-size:1rem;
    transition:.3s var(--ease);
}

.contact-page-form input:focus,
.contact-page-form textarea:focus{
    outline:none;
    border-color:var(--cyan);
    box-shadow:0 0 8px rgba(50,231,255,.35);
}

.contact-page-form textarea{ min-height:160px; resize:vertical; }

.contact-page-form .wpcf7-submit{
    width:220px;
    padding:15px 0;
    margin-top:10px;
    background:none;
    border:1px solid var(--cyan);
    color:var(--text);
    font-family:var(--font-en);
    font-size:.95rem;
    letter-spacing:.1em;
    cursor:pointer;
    transition:.3s var(--ease);
}

.contact-page-form .wpcf7-submit:hover{
    background:var(--cyan);
    color:#07101a;
}

.contact-page-form .wpcf7-not-valid-tip{
    color:var(--pink);
    font-size:.8rem;
    margin-top:6px;
}

.contact-page-form .wpcf7-response-output{
    border-color:var(--line);
    color:var(--text);
    margin-top:24px;
}