/* =====================================================
   Animede Global CSS (Cleaned & Structured)
   Author: Ranpo + Libra
   Last Update: 2025-09-06
===================================================== */

/* =========================
   0) Design Tokens (Global)
========================= */
:root {
  /* Brand */
  --accent: #2EC7B6;
  --bg: #fffcfa;

  /* Text / Body */
  --page-style-background: #2EC7B6;
  --page-style-text: #ffffff;
  --page-style-font-family: "Noto Sans JP", sans-serif;
  --page-style-line-height-text: 2.0;

  /* Layout */
  --form-fixed-width: 1040px;
  --page-style-container-padding-inline: 20px;
  --page-style-container-md-padding-inline: 20px;
  --header-h: 120px;

  /* Utility */
  --page-style-theme: #ffffff;
}

/* =========================
   1) Base
========================= */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
.page,
.section {
  background-color: var(--page-style-background) !important;
  margin: 0;
  padding: 0;
  font-family: var(--page-style-font-family);
  color: var(--page-style-text);
  line-height: var(--page-style-line-height-text);
}

body.works-page { background: var(--bg) !important; }

input, textarea, select, button {
  font: inherit; line-height: inherit; color: inherit;
}

.hr-light {
  margin: 40px 0; border: none; border-top: 1px solid #fff;
}

.divider { display:block; width:100%; height:40px; }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:14px; translate:-50% 0;
  width:10px; height:18px; border:2px solid rgba(255,255,255,.8);
  border-left:0; border-top:0; transform:rotate(45deg);
  animation:drop 1.6s infinite ease-in-out; opacity:.9;
}
@keyframes drop{
  0%{ transform:translateY(0) rotate(45deg); opacity:.9; }
  70%{ transform:translateY(8px) rotate(45deg); opacity:.2; }
  100%{ transform:translateY(0) rotate(45deg); opacity:.9; }
}

/* =========================
   2) Header / Navigation
========================= */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--bg);
  padding: 5px 64px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.06);
}

.container { display:flex; align-items:center; gap:40px; }

.logo img { height:50px; display:block; }

.nav { flex: 1; }
.nav ul {
  display:flex; flex-wrap:nowrap; justify-content:flex-end;
  gap:16px; list-style:none; margin:0; padding:0;
}
.nav ul > li { display:flex; align-items:center; }

.nav a {
  color: var(--accent); text-decoration:none; font-weight:700;
  font-size:13px; letter-spacing:.02em;
}
.nav a:hover { opacity:.6; }

/* CTA (desktop) */
.nav .btn-cta,
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent);
  color:#fff !important;
  border: 2px solid var(--accent);
  border-radius: 9999px;
  padding: 10px 16px;
  line-height: 1; white-space: nowrap;
  min-height: 36px; min-width: 120px; box-sizing: border-box;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(.98); box-shadow:0 10px 24px rgba(46,199,182,.28); }
.btn-cta:active{ transform: translateY(0); filter: brightness(.95); }
.btn-cta:focus-visible{ outline: 3px solid rgba(46,199,182,.35); outline-offset: 2px; }
.nav-cta{ margin-left: 8px; }

/* Social Icons (desktop) */
.nav-social a,
.nav-youtube a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color: var(--accent);
  border: 1.5px solid rgba(46,199,182,.35);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-social a:hover,
.nav-youtube a:hover{
  background: rgba(46,199,182,.08);
  transform: translateY(-1px);
  border-color: rgba(46,199,182,.6);
}

/* Hamburger (tablet & down) */
.menu-toggle{
  display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer;
}
.menu-toggle .bar{
  width:28px; height:2px; background:#8b96a2;
  display:block; margin:6px 0;
  transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle[aria-expanded="true"]{
  position: fixed; top:16px; right:16px; background:transparent; z-index:1101;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu{
  display:none;
  position: fixed; inset: 0; z-index: 1100;
  background: var(--bg);
  padding: 96px 24px 40px;
  align-items:center; justify-content:center;
}
.mobile-menu.open{ display:flex; }
.mobile-menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.mobile-menu a{
  color: var(--accent); text-decoration:none; font-weight:700;
  font-size:12px; letter-spacing:.02em;
}
/* Mobile actions */
#mobileMenu .mobile-actions{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:14px;
}
#mobileMenu .x-link, #mobileMenu .yt-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  color: var(--accent);
  border: 1.5px solid rgba(46,199,182,.35);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#mobileMenu .x-link:hover, #mobileMenu .yt-link:hover{
  background: rgba(46,199,182,.08); transform: translateY(-1px);
}
#mobileMenu .mobile-cta{ font-size:14px; padding:12px 18px; }

/* Header Responsive */
@media (max-width:1100px){
  .nav-social, .nav-youtube{ display:none; }
  .nav ul{ flex-wrap: wrap; justify-content:flex-start; row-gap:2px; column-gap:20px; }
}
@media (max-width:768px){
  :root { --header-h: 72px; }
  body { padding-top: 72px; }
  .header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px; box-sizing:border-box;
           box-shadow:0 8px 18px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.08); }
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  .logo{ display:block; margin-right:auto; }
  .logo img{ height:44px; width:auto; display:block; }
}

/* ロゴがフレックス収縮で横だけ潰れないようにする */
.logo { flex: 0 0 auto; }

/* 高さ固定をやめ、比率維持＋最大高さで制御 */
.logo img{
  height: auto;
  max-height: 50px;
  width: auto;       /* 念のため明示 */
}

/* モバイルの最大高さだけ切り替え */
@media (max-width: 768px){
  .logo img{ max-height: 44px; }
}

/* =========================
   3) Forms
========================= */
.form-container{
  width:100%; max-width:var(--form-fixed-width);
  padding-left:var(--page-style-container-padding-inline);
  padding-right:var(--page-style-container-padding-inline);
  margin:0 auto;
  background-color:var(--page-style-background);
  box-sizing:border-box;
  padding-top:40px; padding-bottom:60px;
}
.form-header{ text-align:left; margin-bottom:30px; }
.form-header h1{ font-size:60px; margin:0 0 5px; }
.form-header h2{ font-size:18px; font-weight:600; margin:0 0 5px; }
.form-header p{ font-size:13px; margin:0; }
@media (max-width:768px){ .form-header h1{ font-size:50px; } }

.form-group{ margin-bottom:24px; }
.forminput_label{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-weight:400; font-size:16px;
}
.forminput_label .required{ color:red; font-size:14px; font-weight:normal; }

.forminput_input, .forminput_textarea{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:6px;
  font-size:16px; font-family:var(--page-style-font-family);
  color:#000; box-sizing:border-box; background:#fff;
}
.forminput_textarea{ height:160px; resize:vertical; }
.radio-group{ display:flex; flex-direction:column; gap:8px; }

.submit-button{
  background: var(--page-style-theme); color: var(--accent);
  font-size:16px; padding:12px 24px; border:none; border-radius:6px;
  cursor:pointer; transition:background-color .3s ease;
  width:100%; box-sizing:border-box; font-family:var(--page-style-font-family); font-weight:700;
}
.submit-button:hover{ background:#e0e0e0; }

::placeholder{ font-family:var(--page-style-font-family); color:#b3dad4; }

/* Custom Select */
.select-wrap{ position:relative; }
.select.forminput_input{
  background:#fff; color:#000; border:1px solid rgba(46,199,182,.55);
  border-radius:8px; height:48px; padding:10px 44px 10px 12px; box-sizing:border-box; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M6 9l6 6 6-6' fill='none' stroke='%232EC7B6' stroke-width='2' \
      stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>");
  background-size:18px 18px; background-position:right 14px center;
}
.select.forminput_input:hover{ border-color: var(--accent); }
.select.forminput_input:focus{ outline:0; border-color: var(--accent); box-shadow:0 0 0 3px rgba(46,199,182,.18); }
.select.forminput_input:invalid{ color:#b3dad4; }
.select.forminput_input::-ms-expand{ display:none; }
select option{ color:#000; background:#fff; }

/* =========================
   4) Callout (電話案内)
========================= */
.callout{
  background:#fff; color:#2f2f2f; border-radius:16px;
  padding:15px 0; line-height:1.4; text-align:center; margin:24px auto 0;
  box-shadow:0 4px 16px rgba(0,0,0,0.08); max-width:640px; width:calc(100% - 32px);
}
.callout-lead{ font-size:18px; font-weight:400; margin:0 0 10px; color:#2f2f2f; }
.callout-sub{ font-size:16px; font-weight:400; margin:0 0 18px; color:#2f2f2f; }
.callout-tel{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  color:#2a6fb0; font-weight:800; font-size: clamp(28px, 6vw, 42px); line-height:1.2;
}
.callout-tel .tel-icon{ font-size:.8em; }
.tel-number{ font-size:26px; }
.callout-note{ margin-top:14px; font-size:14px; color:#566070; }
@media (max-width:690px){ .callout{ width:calc(100% - 32px); margin-inline:auto; } }
@media (max-width:480px){
  .callout{ padding:24px 18px; border-radius:12px; }
  .callout-lead{ font-size:16px; }
  .callout-sub{ font-size:14px; }
}

/* =========================
   5) Utilities / Misc
========================= */
.hp-wrap{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.privacy-policy{ font-size:12px; }
.privacy-policy h2{ font-size:16px; font-weight:bold; margin-top:0; }

/* コピーライト（共通） */
.copyright{ font-size:12px; text-align:center; color:#748094; margin: 10px 0 20px; }

/* =========================
   6) Benefits (強み)
========================= */
.benefits-section{ background: var(--bg); color:#2f2f2f; padding:44px 0 52px; }
.benefits-wrap{ max-width:1040px; margin:0 auto; padding:0 16px; }
.benefits-title{
  text-align:center; font-weight:800; color: var(--accent);
  font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 8px;
}
.benefits-lead{
  text-align:center; margin:0 auto 22px; max-width:920px;
  font-size:14px; line-height:1.8; color:#566070;
}

/* メリットのイメージ（サイズ固定＆中央寄せ） */
.merit-img{
  display: flex;
  justify-content: center;
  margin: 5px 0 0;
}
.merit-img img{
  width: 120px;       /* お好みで調整可：例）clamp(96px, 18vw, 140px) */
  max-width: 100%;
  height: auto;
}

/* list + numbering (見出し上に丸番号) */
.benefit-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; counter-reset: step; }
.benefit-card{
  position:relative; display:flex; align-items:center; gap:24px;
  padding:0 0 22px; background:transparent; box-shadow:none; border-radius:0;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.benefit-card:last-child{ border-bottom:none; padding-bottom:0; }

.benefit-thumb{
  flex:0 0 300px; width:300px; height:180px; overflow:hidden; border-radius:12px;
}
.benefit-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.benefit-body{ flex:1; min-width:0; position:relative; padding-top:36px; }
.benefit-body::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position:absolute; top:0; left:0;
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:2px solid var(--accent); color:var(--accent);
  font-weight:800; font-size:14px; line-height:1;
}

.benefit-head{ margin:12px 0 6px; font-size:18px; font-weight:800; color:#2f2f2f; display:flex; align-items:center; gap:8px; }
.benefit-text{ margin:0; font-size:12px; line-height:1.75; color:#566070; }

/* Mobile optimization */
@media (max-width:720px){
  .benefit-card{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding-bottom:18px; }
  .benefit-thumb{ width:100%; max-width:360px; height:auto; border-radius:10px; overflow:hidden; }
  .benefit-body{ padding-top: 0;  }
  .benefit-head{ display:block; margin:12px 0 6px; text-align:center; }
	.benefit-text{ font-size:14px; line-height:1.7; }
	  .benefit-body::before{
    position: static;            /* ← 絶対配置をやめて文書フローへ */
    left: auto; top: auto;
    transform: none;
    display: grid;               /* ブロック要素化（中央寄せに効く） */
    place-items: center;
    margin: 10px auto 8px;       /* ← 中央寄せ */
    /* 見た目は既存のスタイルをそのまま利用（幅/高さ/枠色など） */
  }
}

/* Media mentions (if used) */
.benefits-media{ display:grid; gap:28px; max-width:960px; margin:0 auto; padding:0 16px; }
.media-card{
  display:flex; gap:20px; align-items:flex-start; background:#f9fcfd;
  border:1px solid rgba(0,0,0,.05); border-radius:12px; padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.media-thumb{ flex:0 0 220px; }
.media-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
.media-body h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:#2f2f2f; }
.media-body p{ margin:0; font-size:14px; line-height:1.7; color:#566070; }
@media (max-width:720px){ .media-thumb{ width:100%; } }

/* =========================
   7) Recommend (こんな方に)
========================= */
.recommend-section{ background:#f9fcfd; padding:24px 0; }
.recommend-wrap{
  max-width:880px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:center; gap:24px;
}
.recommend-img{ flex:0 0 120px; width:120px; height:auto; }
.recommend-img img{ width:100% !important; height:auto !important; display:block; }
.recommend-content{
  flex:0 1 auto; width:fit-content; max-width:62ch; display:grid; grid-template-columns:1fr; align-items:start;
}
.recommend-box{
  width:100%; padding:6px 12px; background:#eef3f5; border-radius:8px;
  font-weight:700; font-size:14px; margin-bottom:10px; color:#2f2f2f;
}
.recommend-list{
  list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.65; color:#2f2f2f;
}
.recommend-list li{ margin:6px 0; display:flex; align-items:flex-start; gap:6px; }
.recommend-list li::before{ content:"●"; font-size:10px; color:var(--accent); margin-top:4px; }
@media (max-width:640px){
  .recommend-wrap{ flex-direction:column-reverse; align-items:center; gap:12px; text-align:left; }
  .recommend-content{ width:100%; }
  .recommend-img{ width:110px; flex:0 0 auto; margin-top:4px; }
  .recommend-box{ max-width:max-content; padding:6px 12px; margin:0 0 6px 0; }
  .recommend-list{ font-size:13.5px; line-height:1.65; }
}

/* =========================
   8) Works (制作実績)
========================= */
.works{
  max-width:1040px; margin:0 auto; padding:64px 20px 100px;
  color:#2f2f2f; background: var(--bg);
}
.section.works{ background: var(--bg) !important; color:#2f2f2f; }

.works-title{
  font-size:clamp(24px, 5vw, 36px); text-align:center; margin:0 0 12px;
  color:#2f2f2f; font-weight:800;
}
.works-lead{
  text-align:center; color:#566070; margin:0 auto 36px; font-size:16px;
  max-width:880px; line-height:1.9;
}

/* Grid */
.works-grid{
  list-style:none; margin:0; padding:0; display:grid;
  gap:32px 28px; grid-template-columns: 1fr;
}
@media (min-width:720px){ .works-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1100px){ .works-grid{ grid-template-columns: repeat(3, 1fr); } }

/* Card (flat) */
.work-card{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  display:flex; flex-direction:column; padding-bottom:28px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.work-card:last-child{ border-bottom:none; }

/* Media */
.work-media{ position:relative; width:100%; aspect-ratio:16 / 9; background:transparent !important; border-radius:0 !important; box-shadow:none !important; }
.video-thumb{
  position:relative; display:block; z-index:2; border-radius:8px; overflow:hidden; cursor:pointer; transform:translateZ(0);
}
.video-thumb img{ width:100%; display:block; aspect-ratio:16 / 9; object-fit:cover; vertical-align:middle; transition: transform .35s ease; }
.video-thumb:hover img{ transform: scale(1.02); }
.video-thumb .play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:44px; background:#ff0000; color:#fff; font-size:28px; line-height:44px; text-align:center;
  border-radius:12px; font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,.3); transition: transform .2s ease, opacity .2s ease; pointer-events:none;
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center;
           background:rgba(15,23,42,.66); backdrop-filter:blur(2px); pointer-events:none; }
.lightbox.open{ display:flex !important; pointer-events:auto; }
.lightbox-body{ position:relative; width:min(90vw, 1040px); }
.video-wrap{ width:100%; aspect-ratio:16 / 9; background:#000; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
#lightboxPlayer{ width:100%; height:100%; border:0; display:block; }
.lightbox-close{
  position:absolute; top:-44px; right:-6px; width:36px; height:36px; border-radius:999px; border:0; background:#fff; color:#0f172a;
  font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.18);
}
@media (max-width:640px){ .lightbox-close{ top:-52px; right:0; } .video-wrap{ border-radius:6px; } }

/* Meta */
.work-meta{ padding:10px 0 0; }
.work-client{ font-size:13px; color:#748094; margin-bottom:4px; }
.work-title{ font-size:18px; font-weight:800; margin:0 0 6px; color:#2f2f2f; }
.work-desc{ font-size:14px; color:#5a6678; line-height:1.8; margin:0 0 10px; }

/* Tags (hash-pill) */
.work-tags{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-bottom:10px; }
.tag{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background: rgba(46,199,182,.08); border: .5px solid rgba(46,199,182,.45);
  color:#2f2f2f; font-weight:700; font-size:12px; letter-spacing:.02em; line-height:1;
}
.tag::before{ content:"#"; margin-right:2px; color: var(--accent); opacity:.9; }

/* CTA (button) */
.work-cta{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background: var(--accent); border:2px solid var(--accent); color:#fff; font-weight:800; font-size:13.5px;
  text-decoration:none; box-shadow:0 6px 16px rgba(46,199,182,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; margin-top:6px;
}
.work-cta::before{
  content:""; width:18px; height:18px; background-color:#fff;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 7.3 14.1 12 9.4 16.7 10.8 18.1 16.9 12 10.8 5.9z" fill="black"/></svg>') no-repeat center / 18px 18px;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 7.3 14.1 12 9.4 16.7 10.8 18.1 16.9 12 10.8 5.9z" fill="black"/></svg>') no-repeat center / 18px 18px;
}
.work-cta:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(46,199,182,.28); }
.work-cta:active{ transform:translateY(0); filter:brightness(.95); }

/* 画像ギャラリー：PC=3列 / タブレット=2列 / スマホ=1列 */
.workdetail-gallery{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.workdetail-gallery li{ margin:0; }
.workdetail-gallery img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* サムネ比率を安定 */
  object-fit: cover;      /* はみ出しは切り取り */
  display: block;
  border-radius: 12px;
  background: #f3f6f8;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* ブレークポイント */
@media (max-width: 980px){
  .workdetail-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .workdetail-gallery{ grid-template-columns: 1fr; }
}

/* =========================
   9) Eyecatch (Hero band)
========================= */
.eyecatch{
  position:relative; width:100%; background:var(--bg);
  padding:0; overflow:clip; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.eyecatch-video{ display:block; width:100%; height:320px; object-fit:cover; }
.eyecatch::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.eyecatch-inner{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.10));
}
.eyecatch-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; padding:20px; }
.eyecatch-copy{ font-size:clamp(20px, 3vw, 32px); font-weight:700; margin-bottom:20px; text-shadow:0 2px 8px rgba(0,0,0,0.6); }
.eyecatch-ctas{ display:flex; gap:14px; justify-content:center; margin-top:16px; }
.eyecatch-btn{
  display:inline-block; padding:12px 22px; border-radius:10px; font-weight:800; background:var(--accent); color:#fff;
  text-decoration:none; box-shadow:0 8px 24px rgba(46,199,182,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.eyecatch-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(46,199,182,.32); filter:brightness(1.03); }
.eyecatch-btn.ghost{ background:transparent; color:var(--accent); border:2px solid var(--accent); box-shadow:none; }
.eyecatch-btn.ghost:hover{ background:rgba(46,199,182,.08); }

@media (max-width:1100px){ .eyecatch-video{ height:320px; } }
@media (max-width:820px){ .eyecatch-video{ height:240px !important; } }
@media (max-width:560px){
  .eyecatch-video{ height:240px !important; }
  .eyecatch-copy{ font-size: clamp(16px, 5.2vw, 22px); line-height:1.35; }
  .eyecatch-overlay{ padding:16px; width:calc(100% - 32px); }
}

/* =========================
   10) Plan (料金/ご案内)
========================= */
:root{
  --plan-fg: #0e3f3c;
  --plan-fg-weak: #165a56;
  --plan-border: rgba(255,255,255,.65);
}
.plan-section{ background: var(--accent); color:#fff; padding:24px 0 36px; }
.plan-wrap{ max-width:1040px; margin:0 auto; padding:0 12px; }
.plan-title{ text-align:center; font-weight:800; font-size:clamp(20px, 2.8vw, 28px); margin:0 0 2px; color:#fff; }
.plan-sub{ text-align:center; margin:0 auto 30px; max-width:920px; font-size:15px; line-height:1.6; opacity:.95; color:#f6fffd; }

.plan-table{ border-top:1px solid var(--plan-border); }
.plan-row{
  display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--plan-border);
}
.plan-row:last-child{ border-bottom:none; }

.plan-term{ font-weight:400; font-size:13px; letter-spacing:.02em; color:#eaffff; opacity:.95; }
.plan-desc{
  color:var(--plan-fg); padding:6px 8px; border-radius:4px;
  font-weight:700; font-size:15px; line-height:1.5;
}
.plan-row-notes .plan-desc{ padding:6px 8px; }
.plan-row-notes .notes-lead{ margin:0 0 4px; font-size:12px; font-weight:600; color:var(--plan-fg-weak); }
.notes-list{ margin:0; padding-left:1.2em; list-style:none; }
.notes-list li{
  position:relative; margin:2px 0; padding-left:.5em; color:var(--plan-fg); font-size:13px; line-height:1.6;
}
.notes-list li::before{ content:"※"; position:absolute; left:-1.2em; color:var(--plan-fg-weak); font-weight:600; }

.plan-cta-wrap{ margin:18px auto 0; padding-top:8px; display:flex; justify-content:center; }
.plan-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:min(92vw, 600px); padding:12px 16px; border-radius:8px; background:#fff; color:var(--accent);
  font-weight:600; font-size:clamp(14px, 1.7vw, 18px); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plan-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.plan-cta:active{ transform:translateY(0); }

@media (max-width:720px){
  .plan-section{ padding:20px 0 28px; }
  .plan-row{ grid-template-columns:1fr; gap:4px; padding:6px 0; }
  .plan-term{ font-size:12px; }
  .plan-desc{ font-size:14px; padding:6px 8px; }
  .plan-cta{ min-width:92vw; font-size:16px; padding:12px 14px; }
}

/* =========================
   11) Flow (制作の流れ)
========================= */
.flow-section{ background: var(--bg); padding:48px 0 64px; color:#2f2f2f; }
.flow-wrap{ max-width:1040px; margin:0 auto; padding:0 16px; }
.flow-title{
  text-align:center; font-weight:800; color: var(--accent);
  font-size: clamp(22px, 3.2vw, 36px); margin: 0 0 28px;
}
.flow-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:820px){ .flow-grid{ grid-template-columns:1fr 1fr; } }

.flow-card{
  background:#f3f6f8; border:1px solid rgba(0,0,0,.04);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden; display:grid; grid-template-columns:128px 1fr; gap:16px;
  align-items:center; padding:16px; transition: transform .18s ease, box-shadow .18s ease;
}
.flow-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.flow-visual{ width:100%; min-height:120px; display:grid; place-items:center; }
.flow-visual img{ width:100%; height:120px; object-fit:contain; display:block; }
.flow-body{ padding:6px 4px; }
.flow-step{
  margin:0 0 6px; font-size:clamp(16px, 2.2vw, 20px); font-weight:800; color:#2f2f2f;
  display:flex; align-items:center; gap:8px;
}
.flow-step .num{
  display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 2px; border-radius:999px;
  background:#fff; color: var(--accent); border:1.5px solid rgba(46,199,182,.35); font-size:14px; font-weight:800; line-height:1;
}
.flow-text{ margin:0; font-size:14px; line-height:1.85; color:#566070; }

@media (max-width:600px){
  .flow-card{ grid-template-columns:84px 1fr; align-items:start; gap:12px; padding:14px; text-align:left; }
  .flow-visual{ min-height:84px; }
  .flow-visual img{ height:84px; }
  .flow-step{ font-size:15px; }
  .flow-step .num{ min-width:24px; height:24px; font-size:12px; }
  .flow-text{ font-size:13px; line-height:1.7; }
}

/* =========================
   12) Company
========================= */
.company-section{ background: var(--accent); color:#fff; padding:36px 0 48px; }
.company-head{ text-align:center; margin-bottom:24px; }
.company-logo{ height:64px; margin:0 auto 12px; }
.company-title{ font-size:clamp(24px, 3.2vw, 36px); font-weight:800; color:#fff; margin:0; }

.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.company-info .plan-term{ color:#fff; }
.company-info .plan-desc{ color:#fff; font-weight:400; }
.company-link{ color:#fff; text-decoration: underline; }
.company-map iframe{ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15); }

/* 会社案内ロゴの縦横比を保つ */
.company-logo {
  height: auto;         /* 高さは自動で */
  max-height: 64px;     /* 必要なら制御（デザインに合わせて変更OK） */
  width: auto;          /* 幅も自動で */
  display: block;       /* inline要素の隙間をなくす */
}

@media (max-width:820px){
  .company-grid{ grid-template-columns:1fr; }
  .company-map iframe{ height:300px; }
}

/* =========================
   13) Footer (Compact)
========================= */
.footer{
  background: var(--bg);
  border-top:1px solid rgba(0,0,0,.06);
  padding:24px 0 16px; color:#2f2f2f; font-size:12px; line-height:1.6;
}
.f-wrap{
  max-width:1040px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:1.1fr .9fr 1.2fr; gap:24px; align-items:start;
}
.f-logo img{ height:36px; display:block; }
.f-tag{ margin:8px 0 10px; font-size:12.5px; color:#566070; }
.f-sns a{ display:inline-flex; align-items:center; justify-content:center; }
.f-sns img{ width:20px; height:20px; margin-right:10px; opacity:.9; }
.f-sns img:hover{ opacity:1; }

.f-col h4{ margin:0 0 8px; font-size:12px; letter-spacing:.06em; color: var(--accent); font-weight:800; }
.f-links{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;
}
.f-links a{ color:#748094; text-decoration:none; font-weight:700; font-size:12px; }
.f-links a:hover{ text-decoration:underline; }

.f-dl{ margin:0; display:grid; grid-template-columns: 62px 1fr; row-gap:0; column-gap:10px; }
.f-dl dt{ color:#748094; font-weight:700; font-size:12px; }
.f-dl dd{ margin:0; }
.f-company a{ color: var(--accent); text-decoration:none; }
.f-company a:hover{ text-decoration:underline; }

.f-bottom{
  max-width:1040px; margin:10px auto 0; padding:8px 16px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
@media (max-width:820px){
  .f-wrap{ grid-template-columns:1fr 1fr; gap:18px; }
  .f-links{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .footer{ padding:20px 0 14px; }
  .f-wrap{ grid-template-columns:1fr; gap:14px; }
  .f-logo img{ height:34px; }
  .f-tag{ margin-top:6px; }
  .f-bottom{ margin-top:12px; }
}

/* フッターのロゴ */
.footer .f-logo img {
  width: auto;        /* 幅は自動で */
  height: auto;       /* 高さも自動 */
  max-width: 160px;   /* 最大横幅を指定（デザインに合わせて調整可） */
  max-height: 50px;   /* 最大高さも指定しておくと安心 */
  display: block;     /* 行間の隙間をなくす */
}

/* フッターSNSアイコンを統一 */
.footer .f-sns img {
  width: 24px;     /* 横幅を揃える（例：24px） */
  height: 24px;    /* 縦も揃える */
  object-fit: contain; /* アイコンが潰れないように比率維持 */
  display: block;
}

/* =========================
   14) Thanks Page (scoped)
========================= */
/* ここは thanks.html の <body class="thanks"> で適用 */
.thanks{
  margin:0; font-family:"Noto Sans JP", sans-serif; background: var(--accent); color:#fff;
  min-height:100svh; display:grid; place-items:center; padding:24px;
}
.thanks .card{
  width:100%; max-width:640px; background:#fff; color:#2f2f2f; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); padding:32px 24px; text-align:center;
}
.thanks .icon{
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background: rgba(46,199,182,.12); display:grid; place-items:center;
}
.thanks .icon svg{ width:36px; height:36px; }
.thanks h1{ font-size:clamp(22px, 3.5vw, 28px); margin:8px 0 8px; line-height:1.4; }
.thanks p{ font-size:16px; line-height:1.9; margin:0 0 20px; }
.thanks .actions{ display:grid; gap:12px; margin-top:8px; }
.thanks .btn{ display:inline-block; padding:12px 20px; border-radius:8px; text-decoration:none; font-weight:700; text-align:center; }
.thanks .btn-primary{ background: var(--accent); color:#fff; }
.thanks .btn-primary:hover{ filter:brightness(.95); }
.thanks .btn-subtle{ background:#eef7f6; color:#2f2f2f; }
.thanks .tel-note{ margin-top:16px; font-size:14px; color:#566070; }
.thanks .tel-note a{ color:#2a6fb0; text-decoration:none; font-weight:700; }
.thanks .tel-note a:hover{ text-decoration:underline; }
@media (max-width:480px){ .thanks .card{ padding:24px 18px; border-radius:12px; } }


/* =========================
   15) 修正箇所
========================= */


/* 制作実績 詳細ページのCTAボタン：モバイルはみ出し対策 */
.workdetail-cta {
  text-align: center;          /* 中央寄せ */
}

.workdetail-cta .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);     /* 親幅に収める＋上限360px */
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(46,199,182,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 小さめ端末では幅いっぱいにしたい場合 */
@media (max-width: 560px){
  .workdetail-cta .btn-primary{
    width: 100%;
  }
}

.video-thumb{
  display:block;
  width:100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: inherit;
}
.video-thumb:focus-visible{
  outline: 3px solid rgba(46,199,182,.35);
  outline-offset: 2px;
}