@charset "UTF-8";

:root{
  --base:#FFF;
  --main:#F21163;
  --main-dark:#247777;
  --accent:#F21163;
  --ink:#142121;
  --muted:#687777;
  --line:#dfe8e8;
  --soft:#f3f8f8;
  --black:#101818;
  --max:1240px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.8;
  letter-spacing:.02em;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

img{
  display:block;
  max-width:100%;
}


/* ========================================
   HEADER
======================================== */

.site-header{
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  width:100%;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:.3s;
}

.site-header.scrolled{
  border-color:var(--line);
  box-shadow:0 8px 30px rgba(20,33,33,.05);
}

.header-inner{
  height:82px;
  max-width:1440px;
  margin:auto;
  padding:0 42px;
  display:flex;
  align-items:center;
  gap:36px;
}

.brand{
  display:flex;
  align-items:center;
  font-family:Inter,sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-.06em;
  min-width:120px;
}

.brand-mark{
  color:var(--main);
}

.brand-name{
  color:var(--ink);
}

.global-nav{
  display:flex;
  align-items:center;
  gap:5px;
  flex:1;
  justify-content:center;
}

.nav-group{
  position:relative;
}

.nav-trigger{
  border:0;
  background:transparent;
  padding:12px 13px;
  color:var(--ink);
  font-size:13px;
  cursor:pointer;
}

.nav-trigger span{
  font-size:14px;
  color:var(--main);
  margin-left:4px;
}


/* ========================================
   DROPDOWN
======================================== */

.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  opacity:0;
  visibility:hidden;
  min-width:240px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(20,33,33,.12);
  padding:14px;
  transition:.2s;
  border-radius:0 0 10px 10px;
}

.nav-group:hover .dropdown,
.nav-group.open .dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.dropdown a{
  display:block;
  padding:10px 12px;
  font-size:13px;
}

.dropdown a:hover{
  background:var(--soft);
  color:var(--main);
}

.dropdown .dropdown-top{
  background:#F7CED9;
  border-radius:6px;
  font-weight:600;
}

.dropdown .dropdown-top:hover{
  background:#F21163;
  color:#fff;
}


/* ========================================
   広告・プロモーション DROPDOWN
======================================== */

.dropdown-wide{
  display:grid;
  grid-template-columns:repeat(3,180px);
  gap:12px;
  padding:18px;
}

.dropdown-wide > .nav-top{
  grid-column:1 / -1;
  display:block;
  margin:0 0 2px;
  padding:10px 12px;
  background:#F7CED9;
  border-radius:6px;
  font-weight:600;
  text-align:center;
}

.dropdown-wide > .nav-top:hover{
  background:#F21163;
  color:#fff;
}

.dropdown small{
  display:block;
  color:var(--main);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  padding:5px 12px;
}


/* ========================================
   HEADER CONTACT
======================================== */

.header-contact{
  font-size:12px;
  font-weight:700;
  border:1px solid #F21163;
  padding:11px 16px;
  border-radius:100px;
  white-space:nowrap;

  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease;
}

.header-contact span{
  margin-left:12px;
  color:#F21163;
  transition:color 0.5s ease;
}

.header-contact:hover{
  background-color:#F21163 !important;
  color:#FFFFFF !important;
  border-color:#F21163 !important;
}

.header-contact:hover span{
  color:#FFFFFF !important;
}


/* ========================================
   MOBILE MENU BUTTON
======================================== */

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  width:42px;
  height:42px;
  padding:9px;
}

.menu-toggle i{
  height:1px;
  background:var(--ink);
  display:block;
  margin:6px 0;
}

/* ========================================
   バーガーメニュー → X
======================================== */

.menu-toggle{
  position:relative;
}

.menu-toggle i{
  transition:
    transform .35s ease,
    opacity .25s ease;
}


/* メニューを開いた状態 */

.site-header.mobile-open .menu-toggle i:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.site-header.mobile-open .menu-toggle i:nth-child(2){
  opacity:0;
}

.site-header.mobile-open .menu-toggle i:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ========================================
   HERO
======================================== */

.hero{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:150px 7vw 100px;
}

.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(69,169,169,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(69,169,169,.07) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to right,#000,transparent 70%);
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:700px;
}

.eyebrow,
.section-label{
  font-family:Inter,sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
  color:var(--main);
}

.eyebrow{
  margin-bottom:22px;
}

.hero h1{
  font-size:clamp(48px,6.2vw,92px);
  line-height:1.08;
  letter-spacing:-.05em;
  margin:0 0 28px;
  font-weight:800;
}

.hero h1 em{
  font-style:normal;
  color:var(--main);
  position:relative;
}

.hero h1 em:after{
  content:"";
  position:absolute;
  height:8px;
  left:0;
  right:0;
  bottom:0;
  background:rgba(246,36,119,.2);
  z-index:-1;
}

.hero-lead{
  font-size:16px;
  color:var(--muted);
  margin-bottom:34px;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  padding:14px 20px;
  font-size:12px;
  font-weight:700;
  border-radius:100px;
}

.btn-primary{
  background:var(--main);
  color:#fff;

  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease;
}

.btn-primary span{
  transition:color 0.5s ease;
}

.btn-primary:hover{
  background:#777;
  color:#FFFFFF;
}

.btn-primary:hover span{
  color:#FFFFFF;
}

.btn-dark{
  background:var(--ink);
  color:#fff;
}

.btn span{
  font-size:18px;
}

.text-link,
.arrow-link{
  font-size:12px;
  font-weight:700;
}

.text-link span,
.arrow-link span{
  color:var(--accent);
  font-size:17px;
  margin-left:8px;
}

.hero-art{
  position:absolute;
  right:-2vw;
  top:18%;
  width:min(48vw,680px);
  z-index:1;
}

.hero-art img{
  width:100%;
}

.hero-number{
  position:absolute;
  bottom:5%;
  right:16%;
  font:600 12px Inter,sans-serif;
  color:var(--main);
}

.hero-number span{
  color:var(--accent);
  margin:0 8px;
}

.hero-scroll{
  position:absolute;
  bottom:35px;
  left:7vw;
  font:600 9px Inter,sans-serif;
  letter-spacing:.2em;
  color:var(--muted);
  display:flex;
  gap:12px;
  align-items:center;
}

.hero-scroll span{
  width:60px;
  height:1px;
  background:var(--main);
}


/* ========================================
   SECTIONS
======================================== */

.section{
  max-width:var(--max);
  margin:auto;
  padding:130px 40px;
}

.intro-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  margin-top:30px;
}

.intro h2,
.section h2{
  font-size:clamp(36px,4vw,60px);
  line-height:1.25;
  letter-spacing:-.04em;
  margin:0;
  font-weight:800;
}

.intro h2 span,
.section h2 span{
  color:var(--main);
}

.intro .lead{
  font-size:20px;
  font-weight:600;
  margin:0 0 18px;
}

.intro p:not(.lead){
  font-size:14px;
  color:var(--muted);
}

.arrow-link{
  display:inline-block;
  margin-top:22px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:50px;
}

.section-head h2{
  margin-top:12px;
}

.section-head>p{
  font-size:13px;
  color:var(--muted);
  text-align:right;
}


/* ========================================
   MEDIA
======================================== */

.media-section{
  max-width:none;
  background:var(--soft);
  padding-left:max(40px,calc((100vw - 1160px)/2));
  padding-right:max(40px,calc((100vw - 1160px)/2));
}

.media-cards{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:22px;
}

.media-card{
  background:#fff;
  position:relative;
  overflow:hidden;
}

.card-image{
  background:#dbeeee;
  aspect-ratio:1.55;
  overflow:hidden;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;
}

.media-card:hover .card-image img{
  transform:scale(1.04);
}

.card-body{
  padding:28px 30px 34px;
  position:relative;
}

.card-index{
  font:700 11px Inter,sans-serif;
  color:var(--accent);
}

.card-body h3{
  font-size:25px;
  line-height:1.35;
  margin:10px 0;
}

.card-body p{
  font-size:13px;
  color:var(--muted);
  max-width:560px;
}

.round-arrow{
  position:absolute;
  top:70%;
  right:28px;
  bottom:30px;
  width:46px;
  height:46px;
  border:1px solid var(--main);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--main);
  font-size:20px;
}


/* ========================================
   SERVICES
======================================== */

.services{
  background:var(--black);
  color:#fff;
  max-width:none;
  padding-left:max(40px,calc((100vw - 1160px)/2));
  padding-right:max(40px,calc((100vw - 1160px)/2));
}

.services .section-label{
  color:#7ed5d5;
}

.services-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  margin-top:30px;
}

.services-title p{
  color:#aabbbb;
  font-size:14px;
  max-width:430px;
  margin:25px 0 32px;
}

.service-list{
  border-top:1px solid #344242;
}

.service-item{
  display:grid;
  grid-template-columns:50px 1fr 1.3fr 30px;
  gap:20px;
  align-items:center;
  padding:25px 0;
  border-bottom:1px solid #344242;
}

.service-item span{
  color:#71cccc;
  font:600 11px Inter,sans-serif;
}

.service-item strong{
  font-size:20px;
}

.service-item small{
  color:#91a1a1;
  font-size:11px;
}

.service-item b{
  font-size:20px;
  color:var(--accent);
  font-weight:400;
}


/* ========================================
   FEATURE
======================================== */

.feature{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:center;
}

.feature-visual{
  background:var(--soft);
  padding:25px;
}

.feature-copy p{
  font-size:14px;
  color:var(--muted);
  margin:28px 0;
}

.feature-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:25px 0;
}

.feature-points div{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.feature-points strong{
  display:block;
  font:700 10px Inter,sans-serif;
  color:var(--accent);
}

.feature-points span{
  font-size:11px;
}


/* ========================================
   PINK BAND
======================================== */

.pink-band{
  background:var(--accent);
  color:#fff;
}

.pink-band-inner{
  max-width:1160px;
  margin:auto;
  padding:115px 40px;
  position:relative;
  overflow:hidden;
}

.pink-band-inner:after{
  content:"adtown";
  position:absolute;
  right:-3%;
  bottom:-20%;
  font:800 180px Inter,sans-serif;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.08);
}

.pink-band .section-label{
  color:#ffd7e7;
}

.pink-band h2{
  font-size:clamp(42px,5vw,72px);
  line-height:1.1;
  letter-spacing:-.05em;
  margin:18px 0;
}

.pink-band p{
  font-size:15px;
}

.mini-services{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:35px;
}

.mini-services span{
  border:1px solid rgba(255,255,255,.5);
  border-radius:100px;
  padding:8px 14px;
  font-size:11px;
}


/* ========================================
   WORKS
======================================== */

.works{
  padding-bottom:90px;
}

.work-grid{
  display:grid;
  grid-template-columns:1.35fr .825fr .825fr;
  gap:20px;
}

.work-card{
  margin:0;
}

.work-card img{
  width:100%;
  aspect-ratio:1.15;
  object-fit:cover;
}

.work-card.large img{
  aspect-ratio:1.55;
}

.work-card div{
  padding-top:14px;
}

.work-card span{
  font:600 9px Inter,sans-serif;
  color:var(--main);
}

.work-card h3{
  font-size:16px;
  margin:4px 0;
}


/* ========================================
   CASES
======================================== */

.cases-section{
  border-top:1px solid var(--line);
}

.case-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  margin-top:40px;
}

.case-layout p{
  font-size:14px;
  color:var(--muted);
  max-width:480px;
}

.case-list{
  border-top:1px solid var(--line);
}

.case-list a{
  display:grid;
  grid-template-columns:90px 1fr 30px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:22px 0;
}

.case-list span{
  font:600 9px Inter,sans-serif;
  color:var(--accent);
}

.case-list strong{
  font-size:17px;
}

.case-list b{
  color:var(--main);
  font-size:20px;
  font-weight:400;
}


/* ========================================
   NEWS
======================================== */

.news{
  padding-top:90px;
  padding-bottom:120px;
}

.news-list{
  border-top:1px solid var(--line);
}

.news-list a{
  display:grid;
  grid-template-columns:110px 80px 1fr 30px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.news-list time{
  font:600 10px Inter,sans-serif;
  color:var(--muted);
}

.tag{
  font:700 9px Inter,sans-serif;
  color:var(--main);
}

.news-list strong{
  font-size:13px;
}

.news-list b{
  color:var(--accent);
  font-weight:400;
}


/* ========================================
   RECRUIT
======================================== */

.recruit{
  max-width:none;
  background:var(--soft);
}

.recruit-inner{
  max-width:1160px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:end;
}

.recruit p{
  font-size:14px;
  color:var(--muted);
  margin:0 0 30px;
}


/* ========================================
   CONTACT
======================================== */

.contact{
  max-width:none;
  background:var(--main);
  color:#fff;
  text-align:center;
  padding:120px 40px;
}

.contact .section-label{
  color:#bde9e9;
}

.contact h2{
  font-size:clamp(40px,5vw,70px);
  margin:18px 0;
}

.contact h2 span{
  color:#fff;
}

.contact p{
  font-size:14px;
  color:#d9f1f1;
}

.contact-button{
  display:flex;
  max-width:620px;
  margin:45px auto 0;
  border-bottom:1px solid rgba(255,255,255,.55);
  padding:18px 4px;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
}

.contact-button b{
  font-size:24px;
  color:var(--accent);
}


/* ========================================
   FOOTER
======================================== */

.site-footer {
  background: var(--black);
  color: #fff;
  padding: 70px max(40px, calc((100vw - 1440px) / 2)) 28px;
}


/* ========================================
   FOOTER TOP
======================================== */

.footer-top {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 50px;
  padding-bottom: 65px;
  align-items: start;
}


/* ========================================
   FOOTER COMPANY
======================================== */

.footer-company {
  min-width: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
}

.footer-brand img {
  display: block;
  width: 180px;
  height: auto;
}

.company-copy {
  font-size: 11px;
  color: #8c9c9c;
  line-height: 1.9;
  margin-top: 20px;
}


/* ========================================
   FOOTER NAV
======================================== */

.footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 38px;
  row-gap: 30px;
  width: 100%;
  max-width: 100%;
  align-items: start;
}

/* ========================================
   FOOTER NAV COLUMN
======================================== */

.footer-nav-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.footer-nav-main {
  gap: 12px;
}


/* ========================================
   FOOTER NAV GROUP
======================================== */

.footer-nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.footer-nav-group > a {
  display: block;
  color: #aebaba;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.footer-nav-group > a strong {
  display: block;
  color: #7ed5d5;
  font-size: 14px;
  margin: 0 0 6px;
}

.footer-nav-group > a:hover {
  color: #fff;
}


/* ========================================
   FOOTER BOTTOM
======================================== */

.footer-bottom {
  border-top: 1px solid #2e3a3a;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  color: #667575;
  font: 11px Inter, sans-serif;
}

.footer-bottom span {
  font-size: 13px;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

  .footer-top {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 35px;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 30px;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 800px) {

  .site-footer {
    padding: 55px 25px 25px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 30px 25px;
  }

  .footer-brand img {
    width: 160px;
  }

  .footer-bottom {
    margin-top: 10px;
  }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

  .footer-nav {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-brand img {
    width: 160px;
  }

}
/* ========================================
   SCROLL ANIMATION
======================================== */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/* ========================================
   モバイルメニュー用 お問い合わせ
======================================== */

.mobile-contact{
  display:none;
}


/* ========================================
   TOP BUTTON
======================================== */

.page-top{
  position:fixed;
  right:30px;
  bottom:30px;

  width:68px;
  height:68px;

  padding:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  border:1px solid rgba(242,17,99,.45);
  border-radius:50%;

  background:rgba(255,255,255,.96);
  color:var(--ink);

  cursor:pointer;

  opacity:0;
  visibility:hidden;

  transform:translateY(15px);

  box-shadow:
    0 10px 30px rgba(20,33,33,.12),
    inset 0 0 0 4px rgba(242,17,99,.05);

  backdrop-filter:blur(10px);

  transition:
    opacity .5s ease,
    visibility .5s ease,
    transform .5s ease,
    background-color .5s ease,
    border-color .5s ease,
    box-shadow .5s ease;

  z-index:1100;
}


/* 内側のリング */

.page-top::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(242,17,99,.18);
  border-radius:50%;
  pointer-events:none;
}


/* 表示 */

.page-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


/* 矢印 */

.page-top-arrow{
  position:relative;
  color:var(--main);
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:300;
  line-height:1;

  transition:
    color .4s ease,
    transform .4s ease;
}


/* TOP */

.page-top-label{
  position:relative;
  color:var(--ink);
  font-family:Inter,sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;

  transition:color .4s ease;
}


/* TOPボタン ホバー */

.page-top:hover{
  background:#F21163;
  border-color:#F21163;
  transform:translateY(-4px);

  box-shadow:
    0 15px 35px rgba(242,17,99,.25),
    inset 0 0 0 4px rgba(255,255,255,.12);
}

.page-top:hover .page-top-arrow{
  color:#fff;
  transform:translateY(-3px);
}

.page-top:hover .page-top-label{
  color:#fff;
}


/* TOPボタン クリック */

.page-top:active{
  transform:translateY(-1px) scale(.94);
}


/* TOPボタン フォーカス */

.page-top:focus-visible{
  outline:3px solid rgba(242,17,99,.2);
  outline-offset:4px;
}


/* ========================================
   TABLET
======================================== */

@media(max-width:1100px){

  .global-nav{
    gap:0;
  }

  .nav-trigger{
    padding:10px 7px;
    font-size:12px;
  }

  .header-inner{
    padding:0 25px;
    gap:18px;
  }

  .services-layout,
  .feature{
    gap:55px;
  }

}


/* ========================================
   MOBILE
======================================== */

@media(max-width:800px){

  .header-inner{
    height:72px;
  }

  .global-nav,
  .header-contact{
    display:none;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
  }


  /* モバイルナビ */

  .site-header.mobile-open .global-nav{
    display:block;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid var(--line);
    padding:10px 20px 20px;
    box-shadow:0 20px 40px rgba(0,0,0,.1);
  }

  .site-header.mobile-open .nav-group{
    border-bottom:1px solid var(--line);
  }

  .site-header.mobile-open .nav-trigger{
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:16px 5px;
  }

  .site-header.mobile-open .dropdown{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:0 0 10px;
    min-width:0;
  }

  .site-header.mobile-open .nav-group.open .dropdown{
    display:block;
  }


  /* 広告・プロモーション */

  .site-header.mobile-open .dropdown-wide{
    display:none;
    grid-template-columns:1fr;
    gap:0;
    padding:0 0 10px;
  }

  .site-header.mobile-open .nav-group.open .dropdown-wide{
    display:grid;
  }

.site-header.mobile-open .dropdown-wide > .nav-top{
  grid-column:auto;
  margin:0;
  padding:10px 12px;

  background:#F7CED9;
  border-radius:6px;

  color:var(--ink);
  font-weight:600;
  text-align:left;
}

.site-header.mobile-open .dropdown-wide > .nav-top:hover{
  background:#F21163;
  color:#fff;
}


  /* モバイルお問い合わせ */

  .site-header.mobile-open .mobile-contact{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    box-sizing:border-box;

    padding:16px 5px;

    border-bottom:1px solid var(--line);

    color:var(--ink);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
  }

  .site-header.mobile-open .mobile-contact span{
    color:var(--main);
    font-size:18px;
  }


  /* HERO */

  .hero {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
  }

  /* モバイル：ヒーローアートを少し小さく */
  .hero-art {
    order: -1;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(72vw, 360px);

    margin: 0 auto 40px;
    transform: translate(-15px, 40px);
  }

  .hero-copy {
    order: 1;
  }


  .hero-grid{
    background-size:50px 50px;
  }


  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  /* SECTIONS */

  .section{
    padding:90px 25px;
  }

  .intro {
    padding-top: 0;
  }

  .intro-layout,
  .services-layout,
  .feature,
  .case-layout,
  .recruit-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .intro-layout{
    margin-top:25px;
  }

  .media-section{
    padding:90px 25px;
  }

  .media-cards,
  .work-grid{
    grid-template-columns:1fr;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
  }

  .section-head>p{
    text-align:left;
  }

  .service-item{
    grid-template-columns:38px 1fr 25px;
  }

  .service-item small{
    display:none;
  }

  .feature-visual{
    order:2;
  }

  .feature-copy{
    order:1;
  }

  .pink-band-inner{
    padding:90px 25px;
  }

  .pink-band-inner:after{
    font-size:90px;
  }

  .case-layout{
    margin-top:25px;
  }

  .news-list a{
    grid-template-columns:90px 60px 1fr 20px;
  }

  .news-list strong{
    font-size:12px;
  }

  .recruit-inner{
    padding:0;
  }




  
  .footer-top{
    grid-template-columns:1fr;
    gap:45px;
  }

  .footer-nav{
    grid-template-columns:1fr 1fr;
  }


  /* TOPボタン */

  .page-top{
    right:18px;
    bottom:18px;
    width:58px;
    height:58px;
  }

  .page-top-arrow{
    font-size:18px;
  }

  .page-top-label{
    font-size:7px;
  }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media(max-width:480px){

  .brand{
    font-size:24px;
  }

  .hero h1{
    font-size:46px;
  }

  .hero-lead{
    font-size:14px;
  }

  .card-body h3{
    font-size:22px;
  }

  .feature-points{
    grid-template-columns:1fr;
  }

  .news-list a{
    grid-template-columns:1fr 55px 18px;
    gap:8px;
  }

  .news-list time{
    grid-column:1;
  }

  .news-list .tag{
    grid-column:2;
    grid-row:1;
  }

  .news-list strong{
    grid-column:1/3;
    grid-row:2;
  }

  .news-list b{
    grid-column:3;
    grid-row:1/3;
  }

  .footer-nav{
    grid-template-columns:1fr;
  }

}

/* ========================================
   スクロールバー
======================================== */

/* Chrome / Safari / Edge */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#FF76A1;
}

::-webkit-scrollbar-thumb{
  background:#FD2E6F;
  border-radius:10px;
  border:2px solid #FF76A1;
}

::-webkit-scrollbar-thumb:hover{
  background:#F21163;
}


/* Firefox */
html{
  scrollbar-width:thin;
  scrollbar-color:#F7CED9 #FFF5F8;
}

.brand {
  display: flex;
  align-items: center;
  width: 120px;
}

.brand img {
  display: block;
  width: 120px;
  height: auto;
}

/* ========================================
   HERO ART 浮遊アニメーション
======================================== */

.hero-art {
  position: relative;
}

.hero-art img {
  display: block;
  animation: heroNetworkFloat 9s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes heroNetworkFloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(18px, -12px, 0) rotate(1deg);
  }

  50% {
    transform: translate3d(-8px, -24px, 0) rotate(-1deg);
  }

  75% {
    transform: translate3d(-20px, -8px, 0) rotate(0.8deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* ========================================
   HOME HERO
   ワイヤーフレーム地球 × テレビ塔 × 蝶
======================================== */

.adtown-hero-animation{
  position:relative;
  width:min(100%, 620px);
  aspect-ratio:1 / 1;
  margin:0 auto;
  perspective:1000px;
}


/* ========================================
   ワイヤーフレーム地球
======================================== */

.wire-earth{
  position:absolute;
  left:50%;
  top:53%;
  width:58%;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(242,17,99,.45);
  border-radius:50%;
  box-shadow:
    0 0 20px rgba(242,17,99,.12),
    0 0 60px rgba(36,119,119,.10);
  transform-style:preserve-3d;
  animation:earthRotate 16s linear infinite;
}


/* 地球の外側の光 */

.earth-glow{
  position:absolute;
  inset:-8%;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(242,17,99,.12) 0%,
    rgba(242,17,99,.04) 45%,
    transparent 72%
  );
  filter:blur(8px);
  z-index:-1;
}


/* ========================================
   地球 緯度
======================================== */

.earth-line{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(36,119,119,.42);
  border-radius:50%;
  transform:translate(-50%,-50%);
}


.latitude{
  width:100%;
  height:24%;
}

.latitude-01{
  transform:translate(-50%,-50%) scaleY(.35);
}

.latitude-02{
  transform:translate(-50%,-50%) scaleY(.55);
}

.latitude-03{
  transform:translate(-50%,-50%) scaleY(.75);
}

.latitude-04{
  transform:translate(-50%,-50%) scaleY(1);
}

.latitude-05{
  transform:translate(-50%,-50%) scaleY(.55);
  top:72%;
}


/* ========================================
   地球 経度
======================================== */

.longitude{
  width:100%;
  height:100%;
}

.longitude-01{
  transform:translate(-50%,-50%) rotateY(20deg);
}

.longitude-02{
  transform:translate(-50%,-50%) rotateY(40deg);
}

.longitude-03{
  transform:translate(-50%,-50%) rotateY(60deg);
}

.longitude-04{
  transform:translate(-50%,-50%) rotateY(120deg);
}

.longitude-05{
  transform:translate(-50%,-50%) rotateY(140deg);
}

.longitude-06{
  transform:translate(-50%,-50%) rotateY(160deg);
}


/* ========================================
   地球回転
======================================== */

@keyframes earthRotate{

  0%{
    transform:
      translate(-50%,-50%)
      rotateY(0deg);
  }

  100%{
    transform:
      translate(-50%,-50%)
      rotateY(360deg);
  }

}


/* ========================================
   テレビ塔
======================================== */

.adtown-tower{
  position:absolute;
  left:50%;
  top:17%;
  width:15%;
  height:38%;
  transform:translateX(-50%);
  z-index:5;
}


/* アンテナ */

.tower-antenna{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:30%;
  transform:translateX(-50%);
  background:#F21163;
  box-shadow:0 0 8px rgba(242,17,99,.7);
}


/* アンテナ先端 */

.tower-light{
  position:absolute;
  left:50%;
  top:-5px;
  width:8px;
  height:8px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#F21163;
  box-shadow:
    0 0 8px #F21163,
    0 0 18px rgba(242,17,99,.6);
  animation:towerBlink 1.6s ease-in-out infinite;
}


/* ========================================
   塔本体
======================================== */

.tower-body{
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:75%;
  transform:translateX(-50%);
  border-left:3px solid #F21163;
  border-right:3px solid #F21163;
  clip-path:polygon(
    48% 0,
    52% 0,
    100% 100%,
    0 100%
  );
}


/* 塔の横桟 */

.tower-body i{
  position:absolute;
  left:15%;
  width:70%;
  height:2px;
  background:#F21163;
  box-shadow:0 0 5px rgba(242,17,99,.25);
}

.tower-body i:nth-child(1){
  top:15%;
}

.tower-body i:nth-child(2){
  top:32%;
}

.tower-body i:nth-child(3){
  top:49%;
}

.tower-body i:nth-child(4){
  top:66%;
}

.tower-body i:nth-child(5){
  top:83%;
}


/* ========================================
   パラボラアンテナ
======================================== */

.tower-dish{
  position:absolute;
  width:18px;
  height:12px;
  border:2px solid #F21163;
  border-radius:50%;
  top:43%;
}

.tower-dish-left{
  left:-14px;
  transform:rotate(-25deg);
}

.tower-dish-right{
  right:-14px;
  transform:rotate(25deg);
}


/* ========================================
   電波
======================================== */

.tower-signal{
  position:absolute;
  left:50%;
  top:4%;
  width:30%;
  aspect-ratio:1;
  transform:translateX(-50%);
  z-index:3;
}


.tower-signal span{
  position:absolute;
  inset:0;
  border:1px solid rgba(242,17,99,.5);
  border-radius:50%;
  animation:signalWave 4s ease-out infinite;
}

.tower-signal span:nth-child(2){
  animation-delay:1.3s;
}

.tower-signal span:nth-child(3){
  animation-delay:2.6s;
}


@keyframes signalWave{

  0%{
    opacity:.7;
    transform:scale(.2);
  }

  70%{
    opacity:.15;
  }

  100%{
    opacity:0;
    transform:scale(3);
  }

}


/* ========================================
   地球の軌道
======================================== */

.earth-orbit{
  position:absolute;
  left:50%;
  top:53%;
  width:70%;
  height:23%;
  border:1px solid rgba(242,17,99,.3);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  pointer-events:none;
}


.orbit-01{
  animation:orbitRotate01 12s linear infinite;
}


.orbit-02{
  width:76%;
  height:28%;
  transform:translate(-50%,-50%) rotate(25deg);
  border-color:rgba(36,119,119,.25);
  animation:orbitRotate02 18s linear infinite reverse;
}


@keyframes orbitRotate01{

  from{
    transform:
      translate(-50%,-50%)
      rotate(-18deg)
      rotate(0deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(-18deg)
      rotate(360deg);
  }

}


@keyframes orbitRotate02{

  from{
    transform:
      translate(-50%,-50%)
      rotate(25deg)
      rotate(0deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(25deg)
      rotate(-360deg);
  }

}


/* ========================================
   蝶
======================================== */

.adtown-butterfly{
  position:absolute;
  width:32px;
  height:28px;
  z-index:10;
}


/* 蝶の羽 */

.butterfly-wing{
  position:absolute;
  top:3px;
  width:15px;
  height:23px;
  border:1px solid rgba(242,17,99,.65);
  background:linear-gradient(
    135deg,
    rgba(242,17,99,.9),
    rgba(247,206,217,.65)
  );
  box-shadow:
    0 0 10px rgba(242,17,99,.22);
}


/* 左羽 */

.butterfly-wing.left{
  left:1px;
  border-radius:85% 20% 75% 30%;
  transform-origin:right bottom;
  animation:wingLeft .38s ease-in-out infinite alternate;
}


/* 右羽 */

.butterfly-wing.right{
  right:1px;
  border-radius:20% 85% 30% 75%;
  transform-origin:left bottom;
  animation:wingRight .38s ease-in-out infinite alternate;
}


/* 蝶の胴体 */

.butterfly-body{
  position:absolute;
  left:50%;
  top:6px;
  width:3px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#49333d;
  z-index:2;
}


/* ========================================
   蝶の羽ばたき
======================================== */

@keyframes wingLeft{

  from{
    transform:rotateY(0deg) rotateZ(-5deg);
  }

  to{
    transform:rotateY(65deg) rotateZ(-2deg);
  }

}


@keyframes wingRight{

  from{
    transform:rotateY(0deg) rotateZ(5deg);
  }

  to{
    transform:rotateY(65deg) rotateZ(2deg);
  }

}


/* ========================================
   蝶 01
======================================== */

.butterfly-01{
  left:8%;
  top:32%;
  animation:butterfly01 11s ease-in-out infinite;
}


@keyframes butterfly01{

  0%{
    transform:translate(0,0) rotate(-8deg) scale(.85);
  }

  20%{
    transform:translate(90px,-55px) rotate(12deg) scale(1);
  }

  40%{
    transform:translate(175px,10px) rotate(-10deg) scale(.9);
  }

  60%{
    transform:translate(125px,100px) rotate(12deg) scale(1.05);
  }

  80%{
    transform:translate(20px,70px) rotate(-8deg) scale(.9);
  }

  100%{
    transform:translate(0,0) rotate(-8deg) scale(.85);
  }

}


/* ========================================
   蝶 02
======================================== */

.butterfly-02{
  right:8%;
  top:25%;
  transform:scale(.7);
  animation:butterfly02 14s ease-in-out infinite;
}


@keyframes butterfly02{

  0%{
    transform:translate(0,0) rotate(8deg) scale(.7);
  }

  25%{
    transform:translate(-90px,75px) rotate(-15deg) scale(.8);
  }

  50%{
    transform:translate(-175px,25px) rotate(10deg) scale(.65);
  }

  75%{
    transform:translate(-90px,-70px) rotate(-8deg) scale(.75);
  }

  100%{
    transform:translate(0,0) rotate(8deg) scale(.7);
  }

}


/* ========================================
   蝶 03
======================================== */

.butterfly-03{
  right:4%;
  top:67%;
  transform:scale(.55);
  animation:butterfly03 17s ease-in-out infinite;
}


@keyframes butterfly03{

  0%{
    transform:translate(0,0) rotate(-5deg) scale(.55);
  }

  25%{
    transform:translate(-120px,-75px) rotate(14deg) scale(.7);
  }

  50%{
    transform:translate(-210px,-5px) rotate(-12deg) scale(.6);
  }

  75%{
    transform:translate(-120px,90px) rotate(10deg) scale(.65);
  }

  100%{
    transform:translate(0,0) rotate(-5deg) scale(.55);
  }

}


/* ========================================
   蝶 04
======================================== */

.butterfly-04{
  left:12%;
  top:70%;
  transform:scale(.65);
  animation:butterfly04 15s ease-in-out infinite;
}


@keyframes butterfly04{

  0%{
    transform:translate(0,0) rotate(8deg) scale(.65);
  }

  25%{
    transform:translate(110px,-75px) rotate(-12deg) scale(.75);
  }

  50%{
    transform:translate(185px,-10px) rotate(10deg) scale(.65);
  }

  75%{
    transform:translate(90px,85px) rotate(-8deg) scale(.72);
  }

  100%{
    transform:translate(0,0) rotate(8deg) scale(.65);
  }

}


/* ========================================
   光の粒
======================================== */

.hero-particle{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#F21163;
  box-shadow:0 0 10px rgba(242,17,99,.7);
  animation:particleFloat 4s ease-in-out infinite;
}


.particle-01{
  left:17%;
  top:18%;
}

.particle-02{
  left:83%;
  top:42%;
  animation-delay:1s;
}

.particle-03{
  left:13%;
  top:58%;
  animation-delay:2s;
}

.particle-04{
  right:15%;
  top:75%;
  animation-delay:1.5s;
}

.particle-05{
  left:45%;
  top:85%;
  animation-delay:2.5s;
}


@keyframes particleFloat{

  0%,
  100%{
    opacity:.25;
    transform:translateY(0) scale(.7);
  }

  50%{
    opacity:1;
    transform:translateY(-12px) scale(1.3);
  }

}


/* ========================================
   スマートフォン
======================================== */

@media(max-width:800px){

  .adtown-hero-animation{
    width:100%;
    max-width:500px;
  }

  .adtown-butterfly{
    width:25px;
    height:22px;
  }

  .butterfly-wing{
    width:12px;
    height:18px;
  }

  .adtown-tower{
    width:14%;
  }

}

/* ========================================
   FAQ NEW
   完全独立版
======================================== */

.faq-new{
  position:relative;
  padding:140px 0;
  overflow:hidden;
}

.faq-new::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-260px;
  top:80px;
  border:1px solid rgba(242,17,99,.08);
  border-radius:50%;
  pointer-events:none;
}

.faq-new::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-180px;
  top:160px;
  border:1px solid rgba(242,17,99,.05);
  border-radius:50%;
  pointer-events:none;
}


/* ========================================
   INNER
======================================== */

.faq-new-inner{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  position:relative;
  z-index:1;
}


/* ========================================
   HEADING
======================================== */

.faq-new-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  align-items:end;
  gap:70px;
  margin-bottom:60px;
}

.faq-new-heading h2{
  margin:12px 0 0;
  font-size:clamp(34px,4vw,54px);
  line-height:1.15;
  letter-spacing:.02em;
  font-weight:700;
}

.faq-new-heading p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:2;
}


/* ========================================
   LIST
======================================== */

.faq-new-list{
  border-top:1px solid rgba(36,119,119,.18);
}

.faq-new-item{
  border-bottom:1px solid rgba(36,119,119,.18);
  background:rgba(255,255,255,.48);

  transition:
    background-color .5s ease,
    border-color .5s ease;
}

.faq-new-item:hover{
  background:rgba(255,255,255,.78);
  border-color:rgba(242,17,99,.28);
}


/* ========================================
   QUESTION BUTTON
======================================== */

.faq-new-question{
  position:relative;

  width:100%;
  min-height:92px;

  display:grid;
  grid-template-columns:70px minmax(0,1fr) 42px;
  align-items:center;

  gap:24px;

  padding:0 18px;

  border:0;
  outline:0;

  background:transparent;

  color:var(--ink);

  text-align:left;

  cursor:pointer;

  font-family:inherit;

  transition:
    padding-left .45s ease,
    background-color .45s ease;
}

.faq-new-question:hover{
  padding-left:26px;
}

.faq-new-question:focus-visible{
  outline:2px solid rgba(242,17,99,.25);
  outline-offset:-2px;
}


/* ========================================
   NUMBER
======================================== */

.faq-new-number{
  color:#F21163;

  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;

  transition:
    letter-spacing .45s ease,
    transform .45s ease;
}

.faq-new-item:hover .faq-new-number{
  letter-spacing:.22em;
  transform:translateX(3px);
}


/* ========================================
   QUESTION
======================================== */

.faq-new-question-text{
  color:var(--ink);

  font-size:14px;
  font-weight:600;
  line-height:1.7;
}


/* ========================================
   PLUS
======================================== */

.faq-new-plus {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.faq-new-plus::before,
.faq-new-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 14px;
  height: 1px;

  background: #F21163;

  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* 縦棒 */
.faq-new-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}


/* OPEN PLUS */
/* 開いたら縦棒を消して「−」にする */
.faq-new-item.is-open .faq-new-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}


.faq-new-item.is-open .faq-new-plus::before,
.faq-new-item.is-open .faq-new-plus::after{
  background:#fff;
}




/* ========================================
   ANSWER
   ※ 開閉アニメーションはheightだけで制御
======================================== */

.faq-new-answer {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;

  transition: height 0.55s cubic-bezier(.22, 1, .36, 1);
}

.faq-new-answer-inner {
  display: block;
  box-sizing: border-box;

  margin: 0;
  padding: 26px 30px 34px;

  border-left: 2px solid #F21163;

  color: var(--ink);
  font-size: 14px;
  line-height: 2;

  /* 回答本文を絶対に隠さない */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ========================================
   ANSWER TEXT
======================================== */

.faq-new-answer-inner p {
  display: block;
  margin: 0;
  padding: 0;

  color: var(--ink);

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 開いた状態 */

.faq-new-item.is-open .faq-new-answer {
  overflow: hidden;
}


/* ========================================
   CONTACT
======================================== */

.faq-new-more{
  display:flex;
  justify-content:flex-end;

  margin-top:45px;
}

.faq-new-contact{
  display:flex;
  align-items:center;

  gap:35px;

  color:var(--ink);

  text-decoration:none;

  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

.faq-new-contact b{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  border:1px solid #F21163;
  border-radius:50%;

  color:#F21163;

  font-size:17px;
  font-weight:400;

  transition:
    background-color .5s ease,
    color .5s ease,
    transform .5s ease;
}

.faq-new-contact:hover b{
  background:#F21163;
  color:#fff;
  transform:translateX(5px);
}


/* ========================================
   MOBILE
======================================== */

@media(max-width:800px){

  .faq-new{
    padding:90px 0;
  }

  .faq-new-inner{
    width:min(100% - 36px,620px);
  }

  .faq-new-heading{
    display:block;
    margin-bottom:40px;
  }

  .faq-new-heading h2{
    font-size:34px;
  }

  .faq-new-heading p{
    margin-top:22px;
    font-size:12px;
    line-height:1.9;
  }

  .faq-new-question{
    grid-template-columns:38px minmax(0,1fr) 34px;

    gap:12px;

    min-height:78px;

    padding:0 8px;
  }

  .faq-new-question:hover{
    padding-left:8px;
  }

  .faq-new-number{
    font-size:9px;
  }

  .faq-new-question-text{
    font-size:13px;
    line-height:1.6;
  }

  .faq-new-plus{
    width:30px;
    height:30px;
  }

  .faq-new-answer{
    padding:0 8px 0 50px;
  }

  .faq-new-answer-inner {
    padding: 22px 20px 28px;
    font-size: 13px;
    line-height: 1.9;
  }

  .faq-new-answer-inner p{
    font-size:12px;
    line-height:1.9;
  }

  .faq-new-more{
    justify-content:flex-start;
    margin-top:35px;
  }

}

@media (min-width: 801px) and (max-width: 1100px) {

  html,
  body {
    min-height: 100%;
    margin: 0;
  }

  .site-footer {
    margin-bottom: 0;
  }

  .site-footer {
    padding-bottom: 0;
  }

}