@charset "UTF-8";

.page-hero{padding:170px 40px 85px;max-width:1160px;margin:auto;position:relative}
/*.page-hero:before{content:"";position:absolute;right:-10vw;top:70px;width:360px;height:360px;border-radius:50%;background:var(--soft);z-index:-1}*/
.breadcrumb{font-size:10px;color:var(--muted);margin-bottom:45px}
.breadcrumb a{color:var(--main)}
.page-kicker{font:700 10px Inter,sans-serif;letter-spacing:.2em;color:var(--main);text-transform:uppercase}
.page-hero h1{font-size:clamp(46px,6vw,78px);line-height:1.08;letter-spacing:-.05em;margin:18px 0}
.page-hero h1 span{color:var(--main)}
.page-hero p{max-width:650px;color:var(--muted);font-size:15px}
.page-intro{max-width:1160px;margin:auto;padding:70px 40px 110px}
.page-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.page-intro h2,.content-block h2{font-size:clamp(32px,4vw,52px);line-height:1.25;letter-spacing:-.04em;margin:0}
.page-intro h2 span,.content-block h2 span{color:var(--main)}
.page-intro p,.content-block p{font-size:14px;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:55px}
.stat{padding:25px 15px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat strong{font:700 30px Inter,sans-serif;color:var(--main);display:block}
.stat small{font-size:11px;color:var(--muted)}
.content-block{padding:95px max(40px,calc((100vw - 1160px)/2));background:var(--soft)}
.content-block.white{background:#fff;margin-top: -80px}
.block-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:45px}
.block-head p{max-width:470px;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:#fff;padding:30px;min-height:210px;border:1px solid var(--line)}
.feature-card.dark{background:var(--black);color:#fff;border-color:var(--black)}
.feature-card .num{font:700 10px Inter,sans-serif;color:var(--accent)}
.feature-card h3{font-size:21px;margin:12px 0}
.feature-card p{font-size:12px}
.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.process-item{padding:25px 20px;border-right:1px solid var(--line)}
.process-item:first-child{border-left:1px solid var(--line)}
.process-item strong{font:700 11px Inter,sans-serif;color:var(--accent)}
.process-item h3{font-size:16px;margin:8px 0}
.process-item p{font-size:11px}
.cta-strip{background:var(--main);color:#fff;padding:75px 40px;text-align:center}
.cta-strip h2{font-size:38px;line-height:1.25;margin:0 0 25px}
.cta-strip p{font-size:13px;color:#d9f1f1}
.cta-strip .btn{background:#fff;color:var(--ink);margin-top:18px}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.case-card{background:#fff;border:1px solid var(--line)}
.case-card img{width:100%;aspect-ratio:1.6;object-fit:cover}
.case-body{padding:25px}
.case-body span{font:700 9px Inter,sans-serif;color:var(--accent)}
.case-body h3{margin:7px 0;font-size:21px}
.case-body p{font-size:12px}
.message {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.message-portrait {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
}

.message-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.page-table{width:100%;border-collapse:collapse}
.page-table th,.page-table td{text-align:left;border-bottom:1px solid var(--line);padding:20px 10px;font-size:13px}
.page-table th{width:25%;color:var(--main);font-size:11px}
.contact-form{max-width:850px;margin:auto}
.form-row{display:grid;grid-template-columns:180px 1fr;gap:25px;padding:18px 0;border-bottom:1px solid var(--line)}
.form-row label{font-size:12px;font-weight:700}
.form-row label:after{content:" *";color:var(--accent)}
.form-row input,.form-row textarea,.form-row select{width:100%;border:1px solid var(--line);padding:12px;font:inherit;font-size:13px;background:#fff}
.form-row textarea{min-height:170px}
.form-submit{text-align:center;margin-top:35px}
@media(max-width:800px){
  .page-hero{padding:135px 25px 70px}
  .page-intro,.content-block{padding-left:25px;padding-right:25px;padding-top: 50px}
  .page-intro-grid,.message{grid-template-columns:1fr;gap:35px}
  .feature-grid,.process,.case-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .block-head{display:block}
  .block-head p{margin-top:20px}
  .form-row{grid-template-columns:1fr;gap:8px}
}

    .privacy-content {
      max-width: 900px;
      margin: 0 auto;
    }

    .privacy-content > p {
      margin-bottom: 60px;
      line-height: 2;
    }

    .privacy-block {
      margin-top: 48px;
    }

    .privacy-block h3 {
      margin-bottom: 18px;
      font-size: 1.15rem;
      font-weight: 700;
    }

    .privacy-block p {
      margin-bottom: 14px;
      line-height: 2;
    }

    .privacy-block ul {
      margin: 18px 0 0;
      padding-left: 1.5em;
    }

    .privacy-block li {
      margin-bottom: 10px;
      line-height: 1.9;
    }

    .privacy-company {
      margin-top: 64px;
      padding-top: 28px;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
    }

    .privacy-company p {
      margin-bottom: 6px;
    }

    @media (max-width: 800px) {
      .privacy-content > p {
        margin-bottom: 42px;
      }

      .privacy-block {
        margin-top: 38px;
      }
    }

/* ==================================================
   CONTACT
   CAPTCHA 更新ボタン
================================================== */

.captcha-refresh {
  width: 52px;
  height: 52px;
  margin-left: 12px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

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

  background: #fff;
  color: #F21163;

  font-size: 30px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transform: translateY(-15px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}


/* ==================================================
   ホバー
================================================== */

.captcha-refresh:hover {
  background: #F21163;
  color: #fff;

  transform: translateY(-15px) rotate(90deg);

  box-shadow: 0 7px 20px rgba(242, 17, 99, 0.25);
}


/* ==================================================
   クリック
================================================== */

.captcha-refresh:active {
  transform: translateY(-15px) rotate(180deg) scale(0.94);

  box-shadow: 0 3px 10px rgba(242, 17, 99, 0.18);
}


/* ==================================================
   キーボード操作
================================================== */

.captcha-refresh:focus-visible {
  outline: 3px solid rgba(242, 17, 99, 0.2);
  outline-offset: 4px;
}


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

@media (max-width: 767px) {

  .captcha-refresh {
    width: 46px;
    height: 46px;
    margin-left: 8px;

    font-size: 27px;

    /* スマホでも15px上に移動 */
    transform: translateY(-15px);
  }

  .captcha-refresh:hover {
    transform: translateY(-15px) rotate(90deg);
  }

  .captcha-refresh:active {
    transform: translateY(-15px) rotate(180deg) scale(0.94);
  }

}

/* ========================================
   Actual Free Paper
======================================== */

.paper-showcase {
  background: #fff;
}

.paper-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 70px;
  align-items: center;
}

.paper-comment {
  max-width: 680px;
}

.paper-comment h2 {
  margin: 14px 0 30px;
}

.paper-comment h2 span {
  color: var(--main);
}

.paper-comment p {
  line-height: 2;
  margin-bottom: 24px;
}

.paper-cover {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.paper-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.paper-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #ddd;
}

.paper-meta div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paper-meta strong {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
}

.paper-meta span {
  font-size: 13px;
  color: #666;
}


/* Mobile */
@media (max-width: 767px) {

  .paper-showcase-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .paper-comment {
    max-width: none;
  }

  .paper-cover {
    max-width: 300px;
  }

  .paper-meta {
    grid-template-columns: 1fr;
  }

}

/* お問い合わせフォームのボタン */
.contact-form button,
.contact-form .btn {
  border: none;
  outline: none;
  box-shadow: none;
}

.contact-form button:focus,
.contact-form button:focus-visible,
.contact-form .btn:focus,
.contact-form .btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ==================================================
   YouTube Channel
================================================== */

.youtube-channel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 55px;
  align-items: center;
}

.youtube-screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.youtube-placeholder {
  width: 100%;
  height: 100%;

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

  background:
    linear-gradient(
      135deg,
      #1a1a1a 0%,
      #252525 100%
    );

  color: #fff;
}

.youtube-play {
  width: 74px;
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #F21163;

  font-size: 25px;
  padding-left: 4px;

  box-shadow: 0 12px 30px rgba(242, 17, 99, 0.28);
}

.youtube-placeholder p {
  margin: 22px 0 0;

  color: #fff;

  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.youtube-channel-info h3 {
  margin: 14px 0 20px;
  font-size: 28px;
}

.youtube-channel-info p {
  line-height: 2;
  margin-bottom: 28px;
}


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

@media (max-width: 800px) {

  .youtube-channel {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .youtube-channel-info h3 {
    font-size: 24px;
  }

}

    /* ========================================
       Webメディア事業
    ======================================== */

    .webmedia-intro {
      max-width: 1160px;
      margin: 0 auto;
      padding: 95px 40px 110px;
    }

    .webmedia-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: center;
    }

    .webmedia-intro-copy {
      max-width: 600px;
    }

    .webmedia-intro h2 {
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.25;
      letter-spacing: -0.04em;
      margin: 0 0 30px;
    }

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

    .webmedia-intro p {
      font-size: 14px;
      line-height: 2;
      color: var(--muted);
      margin-bottom: 20px;
    }


    /* ========================================
       Web Media Visual
    ======================================== */

    .webmedia-visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .webmedia-visual-box {
      width: 100%;
      max-width: 470px;
      aspect-ratio: 16 / 10;
      padding: 18px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 25px 60px rgba(20, 33, 33, 0.12);
      transform: rotate(1.5deg);
    }

    .webmedia-browser {
      width: 100%;
      height: 100%;
      background: #fff;
      border: 1px solid #e8e8e8;
      overflow: hidden;
    }

    .browser-bar {
      height: 30px;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 12px;
      background: #f7f7f7;
      border-bottom: 1px solid #e8e8e8;
    }

    .browser-bar i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #d8d8d8;
    }

    .browser-content {
      padding: 25px;
    }

    .browser-content small {
      display: block;
      font: 700 8px Inter, sans-serif;
      letter-spacing: .15em;
      color: var(--main);
      margin-bottom: 10px;
    }

    .browser-content h3 {
      font-size: 25px;
      line-height: 1.35;
      margin: 0 0 18px;
    }

    .browser-lines {
      display: grid;
      gap: 8px;
    }

    .browser-lines span {
      display: block;
      height: 6px;
      background: #ededed;
    }

    .browser-lines span:nth-child(1) {
      width: 90%;
    }

    .browser-lines span:nth-child(2) {
      width: 75%;
    }

    .browser-lines span:nth-child(3) {
      width: 60%;
    }


    /* ========================================
       Webメディア事業
    ======================================== */

    .webmedia-concept {
      background: rgba(255, 255, 255, 0.82);
    }

    .webmedia-concept-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .webmedia-concept-card {
      background: #fff;
      border: 1px solid var(--line);
      padding: 35px 30px;
      min-height: 250px;
    }

    .webmedia-concept-card .num {
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .12em;
    }

    .webmedia-concept-card h3 {
      font-size: 21px;
      line-height: 1.4;
      margin: 18px 0 15px;
    }

    .webmedia-concept-card p {
      font-size: 12px;
      line-height: 1.9;
      margin: 0;
    }


    /* ========================================
       ホームページ制作
    ======================================== */

    .web-production {
      background: rgba(255, 255, 255, 0.92);
    }

    .web-production-intro {
      max-width: 720px;
      margin-bottom: 55px;
    }

    .web-production-intro h2 {
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.25;
      letter-spacing: -0.04em;
      margin: 0 0 25px;
    }

    .web-production-intro h2 span {
      color: var(--main);
    }

    .web-production-intro p {
      font-size: 14px;
      line-height: 2;
      color: var(--muted);
    }

    .web-production-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 75px;
    }

    .web-production-feature {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .web-production-feature strong {
      display: block;
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .12em;
      margin-bottom: 15px;
    }

    .web-production-feature h3 {
      font-size: 19px;
      margin: 0 0 12px;
    }

    .web-production-feature p {
      font-size: 11px;
      line-height: 1.9;
      margin: 0;
    }


    /* ========================================
       サンプルデザイン
    ======================================== */

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

    .web-samples-head h2 {
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.25;
      letter-spacing: -0.04em;
      margin: 0;
    }

    .web-samples-head h2 span {
      color: var(--main);
    }

    .web-samples-head p {
      max-width: 470px;
      margin: 0;
      font-size: 13px;
      line-height: 1.9;
      color: var(--muted);
    }

    .web-samples-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .web-sample {
      display: block;
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      text-decoration: none;
    }

.web-sample img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

    .web-sample:hover img {
      transform: scale(1.04);
    }

    .web-sample-info {
      padding: 16px 18px;
      background: #fff;
    }

    .web-sample-info strong {
      display: block;
      font: 700 9px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .12em;
      margin-bottom: 6px;
    }

    .web-sample-info span {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }


    /* ========================================
       紙 × Web
    ======================================== */

    .webmedia-cross {
      background: rgba(255, 255, 255, 0.84);
    }

    .webmedia-cross-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .webmedia-cross h2 {
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.25;
      letter-spacing: -0.04em;
      margin: 0 0 25px;
    }

    .webmedia-cross h2 span {
      color: var(--main);
    }

    .webmedia-cross p {
      font-size: 14px;
      line-height: 2;
      color: var(--muted);
    }

    .webmedia-flow {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .webmedia-flow-item {
      background: #fff;
      padding: 30px 25px;
    }

    .webmedia-flow-item strong {
      display: block;
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .1em;
      margin-bottom: 10px;
    }

    .webmedia-flow-item h3 {
      font-size: 17px;
      margin: 0 0 10px;
    }

    .webmedia-flow-item p {
      font-size: 11px;
      line-height: 1.8;
      margin: 0;
    }


    /* ========================================
       掲載・制作の流れ
    ======================================== */

    .webmedia-process {
      background: rgba(255, 255, 255, 0.82);
    }

    .webmedia-process-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
    }

    .webmedia-process-item {
      padding: 30px 22px;
      border-right: 1px solid var(--line);
    }

    .webmedia-process-item:first-child {
      border-left: 1px solid var(--line);
    }

    .webmedia-process-item strong {
      display: block;
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .1em;
      margin-bottom: 15px;
    }

    .webmedia-process-item h3 {
      font-size: 17px;
      margin: 0 0 10px;
    }

    .webmedia-process-item p {
      font-size: 11px;
      line-height: 1.8;
      margin: 0;
    }


    /* ========================================
       CTA
    ======================================== */

    .webmedia-cta {
      background: var(--main);
      color: #fff;
      padding: 75px 40px;
      text-align: center;
    }

    .webmedia-cta .page-kicker {
      color: #fff;
    }

    .webmedia-cta h2 {
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.25;
      margin: 10px 0 22px;
    }

    .webmedia-cta p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 25px;
    }

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


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

    @media (max-width: 800px) {

      .webmedia-intro {
        padding-left: 25px;
        padding-right: 25px;
      }

      .webmedia-intro-grid,
      .webmedia-cross-grid {
        grid-template-columns: 1fr;
        gap: 45px;
      }

      .webmedia-visual {
        min-height: auto;
      }

      .webmedia-visual-box {
        max-width: 100%;
      }

      .webmedia-concept-grid,
      .web-production-features {
        grid-template-columns: 1fr;
      }

      .web-samples-head {
        display: block;
      }

      .web-samples-head p {
        margin-top: 20px;
      }

      .web-samples-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .webmedia-process-list {
        grid-template-columns: 1fr;
      }

      .webmedia-process-item {
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .webmedia-process-item:first-child {
        border-left: 1px solid var(--line);
      }

      .webmedia-cta {
        padding-left: 25px;
        padding-right: 25px;
      }

    }

    @media (max-width: 480px) {

      .web-samples-grid {
        grid-template-columns: 1fr;
      }

    }

  /* ========================================
     HEADER LOGO
     HOMEと同じサイズ・太さに統一
  ======================================== */

  .site-header .brand{
    font-family:Inter,sans-serif !important;
    font-size:28px !important;
    font-weight:700 !important;
    letter-spacing:-0.06em !important;
    min-width:120px !important;
  }

  .site-header .brand-mark{
    font-weight:700 !important;
  }

  .site-header .brand-name{
    font-weight:700 !important;
  }

  @media(max-width:480px){
    .site-header .brand{
      font-size:24px !important;
    }
  }







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

    .media-intro {
      max-width: 1160px;
      margin: 0 auto;
      padding: 95px 40px 110px;
    }

    .media-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: center;
    }

    .media-intro-copy {
      max-width: 600px;
    }

    .media-intro h2 {
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.25;
      letter-spacing: -0.04em;
      margin: 0 0 30px;
    }

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

    .media-intro p {
      font-size: 14px;
      line-height: 2;
      color: var(--muted);
      margin-bottom: 20px;
    }

    .media-intro-visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .media-visual-card {
      width: 100%;
      max-width: 470px;
      padding: 18px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 25px 60px rgba(20, 33, 33, 0.12);
    }

    .media-visual-inner {
      aspect-ratio: 16 / 10;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f8f8;
      position: relative;
      overflow: hidden;
    }

    .media-visual-inner:before,
    .media-visual-inner:after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    .media-visual-inner:before {
      width: 220px;
      height: 220px;
      right: -70px;
      top: -80px;
      background: #F7CED9;
    }

    .media-visual-inner:after {
      width: 150px;
      height: 150px;
      left: -50px;
      bottom: -60px;
      background: #dff1f0;
    }

    .media-visual-title {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .media-visual-title small {
      display: block;
      font: 700 9px Inter, sans-serif;
      letter-spacing: .2em;
      color: var(--main);
      margin-bottom: 12px;
    }

    .media-visual-title strong {
      display: block;
      font-size: 34px;
      letter-spacing: -.05em;
    }

    .media-services {
      background: rgba(255, 255, 255, 0.82);
    }

    .media-services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }

    .media-service-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 420px;
      padding: 42px;
      background: #fff;
      border: 1px solid var(--line);
      overflow: hidden;
      transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
    }

    .media-service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(20, 33, 33, 0.10);
    }

    .media-service-card.youtube {
      background: #fff;
    }

    .media-service-card.webmedia {
      background: #fff;
    }

    .media-service-number {
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .15em;
      margin-bottom: 45px;
    }

    .media-service-card h3 {
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.2;
      letter-spacing: -.04em;
      margin: 0 0 20px;
    }

    .media-service-card h3 span {
      color: var(--main);
    }

    .media-service-card p {
      max-width: 480px;
      font-size: 13px;
      line-height: 2;
      color: var(--muted);
      margin: 0 0 30px;
    }

    .media-service-label {
      display: inline-block;
      font: 700 9px Inter, sans-serif;
      letter-spacing: .15em;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .media-service-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      width: fit-content;
      margin-top: auto;
      padding: 13px 20px;
      border: 1px solid var(--ink);
      border-radius: 100px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      transition:
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease;
    }

    .media-service-link span {
      transition: color 0.5s ease;
    }

    .media-service-link:hover {
      background: var(--main);
      border-color: var(--main);
      color: #fff;
    }

    .media-service-link:hover span {
      color: #fff;
    }


    .media-features {
      background: rgba(255, 255, 255, 0.9);
    }

    .media-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .media-feature-card {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .media-feature-card strong {
      display: block;
      font: 700 10px Inter, sans-serif;
      color: var(--main);
      letter-spacing: .12em;
      margin-bottom: 15px;
    }

    .media-feature-card h3 {
      font-size: 19px;
      line-height: 1.4;
      margin: 0 0 12px;
    }

    .media-feature-card p {
      font-size: 11px;
      line-height: 1.9;
      margin: 0;
    }


    .media-cta {
      background: var(--main);
      color: #fff;
      padding: 75px 40px;
      text-align: center;
    }

    .media-cta .page-kicker {
      color: #fff;
    }

    .media-cta h2 {
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.25;
      margin: 10px 0 22px;
    }

    .media-cta p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 25px;
    }

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

    @media (max-width: 800px) {

      .media-intro {
        padding-left: 25px;
        padding-right: 25px;
      }

      .media-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
      }

      .media-services-grid {
        grid-template-columns: 1fr;
      }

      .media-service-card {
        min-height: 360px;
        padding: 30px;
      }

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

      .media-cta {
        padding-left: 25px;
        padding-right: 25px;
      }
    }

.youtube-screen{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#000;
}

.youtube-screen iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* =========================================================
   COMPANY TOP
   INTRODUCTION → COMPANY INFORMATION の余白調整
   ========================================================= */

main:has(> .page-intro + .content-block) > .page-intro {
  padding-bottom: 45px;
}

main:has(> .page-intro + .content-block) > .content-block {
  padding-top: 50px;
}

@media (max-width: 800px) {
  main:has(> .page-intro + .content-block) > .page-intro {
    padding-bottom: 35px;
  }

  main:has(> .page-intro + .content-block) > .content-block {
    padding-top: 35px;
  }
}