:root{
  --bg:#07090d; --panel:#0e1218; --panel2:#121823; --text:#f4f6f8;
  --muted:#a9b0ba; --line:#242d39; --accent:#4da3ff; --accent2:#8cc6ff;
  --max:1180px; --radius:20px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:"Helvetica Neue","Yu Gothic",Meiryo,sans-serif;background:var(--bg);color:var(--text);line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,9,13,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{height:76px;display:flex;align-items:center;gap:24px}
.brand{font-size:1.2rem;font-weight:800;letter-spacing:.03em}.brand small{display:block;font-size:.64rem;color:var(--muted);font-weight:500}
.nav{display:flex;gap:20px;margin-left:auto;font-size:.82rem;color:#d9dee5}.nav a:hover{color:var(--accent2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:999px;font-weight:700;transition:.2s}
.btn.primary{background:var(--accent);color:#04101d;border-color:var(--accent)} .btn:hover{transform:translateY(-1px)}
.menu-btn{display:none;margin-left:auto;background:none;color:white;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.hero{padding:92px 0 70px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 18%,rgba(77,163,255,.18),transparent 28%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.eyebrow{color:var(--accent2);font-size:.8rem;letter-spacing:.2em;font-weight:800;text-transform:uppercase}
h1{font-size:clamp(2.5rem,6vw,5.6rem);line-height:1.07;margin:.25em 0 .35em;letter-spacing:-.04em}
.hero p{color:var(--muted);font-size:1.05rem;max-width:620px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-card{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#090c11;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.hero-card img{aspect-ratio:4/5;object-fit:cover}
.section{padding:86px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.section-head h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;margin:0}.section-head p{max-width:580px;color:var(--muted);margin:0}
.grid4,.grid3{display:grid;gap:18px}.grid4{grid-template-columns:repeat(4,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,var(--panel),#0a0e14);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card .num{font-size:.76rem;color:var(--accent2);font-weight:800;letter-spacing:.14em}.card h3{margin:.45em 0 .4em;font-size:1.2rem}.card p{color:var(--muted);font-size:.92rem;margin:0}
.work-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.work-card img{width:100%;height:auto;object-fit:contain;background:#05070a}.work-body{padding:22px}.work-body .tag{color:var(--accent2);font-size:.74rem;font-weight:800}.work-body h3{margin:.35em 0}.work-body p{color:var(--muted);font-size:.9rem}
.price-box{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;background:linear-gradient(135deg,#0e151f,#0a0d12);border:1px solid var(--line);border-radius:28px;padding:34px}
.price-main strong{font-size:clamp(2.4rem,5vw,4.7rem);line-height:1}.price-main span{color:var(--muted)}
.mini-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mini{background:#0a0e14;border:1px solid var(--line);border-radius:14px;padding:16px}.mini b{display:block}.mini span{color:var(--muted);font-size:.86rem}
.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.step{padding:18px 14px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.step b{display:block;color:var(--accent2);font-size:.72rem}.step span{font-size:.86rem}
.faq-item{border-top:1px solid var(--line);padding:18px 0}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-q{font-weight:800}.faq-a{color:var(--muted);margin-top:8px}
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-card{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.blog-card time{color:var(--accent2);font-size:.78rem}.blog-card p{color:var(--muted)}
.cta{padding:76px 0;background:linear-gradient(135deg,rgba(77,163,255,.16),rgba(77,163,255,.03))}
.cta-box{border:1px solid #29445f;border-radius:28px;padding:44px;text-align:center}.cta-box h2{font-size:clamp(2rem,5vw,4rem);margin:0 0 15px}.cta-box p{color:var(--muted)}
footer{padding:40px 0;color:var(--muted);font-size:.86rem}.footer-inner{display:flex;justify-content:space-between;gap:24px}.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.page-hero{padding:86px 0 54px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(2.4rem,5vw,4.8rem)}
.page-hero p{color:var(--muted);max-width:760px}.content{padding:70px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail-image{border-radius:20px;border:1px solid var(--line);overflow:hidden}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:16px 12px;text-align:left}.table th{color:var(--accent2);font-size:.82rem}
.form{display:grid;gap:16px;max-width:780px}.form label{font-weight:700}.form input,.form textarea,.form select{width:100%;padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:#0c1118;color:white}.form textarea{min-height:180px}
.note{color:var(--muted);font-size:.88rem}
@media(max-width:900px){
 .nav{display:none}.menu-btn{display:block}.site-header.open .nav{display:flex;position:absolute;top:76px;left:0;right:0;background:#080b10;border-bottom:1px solid var(--line);padding:22px;flex-direction:column}
 .header-inner>.btn{display:none}.hero-grid,.price-box,.two-col{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.grid3,.blog-list{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}
 .hero{padding-top:58px}.section{padding:66px 0}
}
@media(max-width:560px){
 .container{width:min(calc(100% - 28px),var(--max))}.grid4{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.mini-list{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:12px}.footer-inner{display:block}.footer-links{margin-top:16px}
}


/* 制作実績 詳細ページ */
.works-sample-note{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.84rem}
.works-detail{padding-top:64px}
.works-detail-visual{max-width:860px;margin:0 auto 54px}
.works-detail-image{width:100%;height:auto;border-radius:20px;border:1px solid var(--line);background:#05070a}
.works-detail-intro{max-width:860px;margin:0 auto 30px}
.works-detail-intro h2,.works-detail-point h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.2;margin:.25em 0 .55em}
.works-detail-description{color:#d9dee5}
.works-detail-description p:first-child{margin-top:0}
.works-detail-data{max-width:860px;margin:34px auto 54px;border-top:1px solid var(--line)}
.works-detail-data>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:19px 0;border-bottom:1px solid var(--line)}
.works-detail-data dt{color:var(--accent2);font-weight:800;font-size:.86rem}
.works-detail-data dd{margin:0;color:#d9dee5}
.works-detail-point{max-width:860px;margin:0 auto 46px;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.works-detail-point p{margin:0;color:var(--muted)}
.works-detail-actions{max-width:860px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;padding-top:4px}
@media(max-width:700px){
 .works-detail{padding-top:46px}
 .works-detail-visual{margin-bottom:38px}
 .works-detail-data>div{grid-template-columns:1fr;gap:6px}
 .works-detail-point{padding:22px}
 .works-detail-actions .btn{width:100%}
}

/* Contact Form 7 送信ボタン */
.form input[type="submit"]{
  background:var(--accent);
  color:#07111c;
  border:0;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

.form input[type="submit"]:hover{
  background:var(--accent2);
}

/* ========================================
   スマホ表示：画像を切り取らず全体表示
======================================== */

@media (max-width: 700px) {

  /* トップページ上部の制作実績画像 */
  .hero-card {
    overflow: visible;
  }

  .hero-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* 制作実績一覧の画像 */
  .work-card {
    overflow: visible;
  }

  .work-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* 制作実績詳細ページの画像 */
  .works-detail-image {
    overflow: visible;
  }

  .works-detail-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

}