/*
Theme Name: miku-theme
Author: Aya
Version: 1.0
Description: ミク株式会社 公式サイト（1page構成）
Text Domain: miku
*/
:root {
  --ink: #1a1a1a;             /* 墨色 */
  --line: #e5e5e5;
  --muted: #666;
  --white: #ffffff;
  --bg: #fffdfb;
  --shadow: 0 12px 28px rgba(0,0,0,.07);
  --radius: 16px;

  /* 彩グラデーション（彩り文字の世界観） */
  --mag: #E23AA9;
  --pur: #7C3AED;
  --blu: #3F7DF1;
  --cyn: #24B9D6;
  --grn: #A5D838;
  --ylw: #F5C542;
  --org: #F59F3C;
}

/* ========== Reset ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ========== Base ========== */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg) url("../img/paper-texture.png") repeat;
  background-size: 600px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* === 中央レールを固定（全ページ共通）=== */
main,
.site-header > .container,
.site-footer > .container {
  /*width: min(92%, 680px);*/
  margin-inline: auto;
}

.container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}

.section {
  padding: 100px 0;
}

h1, h2, h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 画像・動画は親を超えない（横スクロール保険） */
img, video { 
  max-width: 100%; 
  height: auto; 
}

/* ========== Animation Keyframes ========== */
@keyframes colorShift {
  to { background-position: 200% 0; }
}
@keyframes inkFlow {
  0% { background-position: 0 0; }
  100% { background-position: 220px 0; }
}

/* ========== Header ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 20px;
}
.logo-img {
  width: auto;
  height: 100px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.logo { flex: 0 0 auto; }
.gnav {
  display: flex;
  flex: 1 1 auto; 
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.gnav ul {
  display: flex;
  flex: 0 1 auto;
  gap: 16px;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.gnav ul li { 
    margin: 0 12px 0 0; 
}
.gnav ul li:last-child { 
    margin-right: 0; 
}

.gnav a {
  position: relative;
  padding: 6px 2px;
  font-weight: 500;
  transition: color 0.3s ease;
}
.gnav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--mag), var(--blu), var(--grn));
  transition: width 0.3s ease;
}
.gnav a:hover::after {
  width: 100%;
}
.gnav .ig-link { 
    flex: 0 0 auto; 
}
.ig-link img {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.ig-link:hover img {
  transform: rotate(10deg) scale(1.1);
  filter: drop-shadow(0 0 6px rgba(226,58,169,0.3));
}

/* 墨の流れるライン */
.ink-line {
  height: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 45%, transparent 100%);
  animation: inkFlow 6s ease-in-out infinite alternate;
}
/* ハンバーガー */
.hamburger{
  display:none; 
}

/* ========== Hero ========== */
.hero {
  position: relative;
  padding-top: 120px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background:
    radial-gradient(1200px 600px at 30% 40%, rgba(226,58,169,.08), transparent 60%),
    radial-gradient(1000px 520px at 70% 20%, rgba(63,125,241,.07), transparent 60%),
    radial-gradient(900px 480px at 60% 70%, rgba(165,216,56,.08), transparent 60%);
  z-index: -1;
}
.grad-text {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.2;
  background: linear-gradient(90deg,
    var(--mag), var(--pur), var(--blu), var(--cyn),
    var(--grn), var(--ylw), var(--org));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: colorShift 8s linear infinite;
}
.lead {
  color: #333;
  margin: 1.2rem auto 2rem;
}
.hero-img {
  margin: 1.8rem auto 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 50%;
  max-width: 1000px;
  height: 420px;
}
.btn {
  display: inline-block;
  padding: 0.8em 1.4em;
  margin: 0 0.4em;
  border: 1.8px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  transition: all 0.3s ease;
}
.btn:hover {
  background: linear-gradient(90deg, var(--mag), var(--pur), var(--blu));
  color: var(--white);
  border-color: transparent;
}

/* ========== About ========== */
#about .about-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.about-name {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 0.5em;
}
.about-text p {
  color: var(--ink);
  line-height: 1.9;
}
.about-photo img {
  border-radius: 20px;
  box-shadow: var(--shadow);
  outline: 1px solid rgba(0,0,0,.05);
  outline-offset: -6px;
}

/* ========== Works ========== */
.works-slider {
  width: 100%;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.work-slide {
  position: relative;
}

.work-slide img {
  width: 50%;
  height: 450px;
  margin: 0 auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.work-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 1px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.work-ttl {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.work-txt {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
}
.slick-dots li { list-style: none; }
.slick-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bbb;
  border: none;
  text-indent: -9999px;
}
.slick-dots .slick-active button {
  background: linear-gradient(90deg, var(--mag), var(--blu));
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.works-grid img {
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.works-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,.1);
}

/* ========== Service ========== */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.card {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}
.card h3 { margin-top: 0; font-size: 1.1rem; }
.card p { color: #333; }

/* ========== Voice ========== */
/* --- Voice cards --- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.voice-card {
  /*display: flex;*/
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
  overflow: hidden;
}

.voice-media {
  width: 100%;
  height: auto;
  margin: 0;
  background: #f6f6f6;
}
.voice-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice-body {
  flex: 1;
  padding: 16px 18px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  margin-bottom: 8px;
}

.voice-quote {
  margin: 0 0 10px 0;
  padding: 0;
}
.voice-quote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #222;
}

/* ========== Company ========== */
.company-table {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 20px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.company-table dt {
  font-weight: 600;
}
.company-table dd {
  margin: 0;
}

/* ========== Contact ========== */
.contact-form {
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.8em;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  background: #fafafa;
  font-size: 16px;
  margin-top: 5px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blu);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(63,125,241,.1);
}
.contact-form button {
  margin-top: 10px;
}
.cl-toast{
  display: none;
  margin-top: 12px;
}
/* ===== Contact: mailto版をカードUIに ===== */
#contact .contact-card {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}

#contact .contact-card .form-group {
  margin: 14px 0;
}

#contact .contact-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

#contact .contact-card input,
#contact .contact-card select,
#contact .contact-card textarea {
  width: 100%;
  padding: 0.9em 1em;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  background: #fafafa;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#contact .contact-card input:focus,
#contact .contact-card select:focus,
#contact .contact-card textarea:focus {
  outline: none;
  border-color: var(--blu);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(63,125,241,.12);
}

#contact .contact-card .btn-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

#contact .contact-card .btn-row .btn {
  margin: 0 auto;
  width: 20%;
}

#cl-toast {
  display: none;     /* JSで表示 */
  margin-top: 12px;
}

/* ========== Footer ========== */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.8);
  padding: 10px 0;
  margin-top: 36px;
}
.fnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*flex-wrap: wrap;*/
  gap: 18px;
}
.fnav ul {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-logo img {
  width: auto;
  height: 100px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.07));
}
/* 右側のまとまり */
.fnav-right { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}
.fnav-right ul { 
    display: flex; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
.fnav-right ul li { 
    margin-right: 12px; 
}
.fnav-right ul li:last-child { 
    margin-right: 0; 
}

.ink-line {
  margin-bottom: 8px;
}
.fnav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fnav ul li a {
  transition: opacity 0.3s ease;
}
.fnav ul li a:hover { 
    opacity: 0.7; 
}

.ig-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* コピーライト中央寄せ */
.site-footer small {
  display: block;
  text-align: center;
  margin-top: 8px;
  color: #333;
  font-size: 14px;
}
/* フッター上の細いラインの間延び防止 */
.artistic-footer .ink-line { 
    margin-bottom: 6px; 
}

/* ========== Section Title ========== */
.sec-ttl {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  font-size: clamp(22px, 3vw, 30px);
}
.sec-ttl::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    var(--mag), var(--pur), var(--blu),
    var(--cyn), var(--grn), var(--ylw), var(--org));
  opacity: 0.25;
  border-radius: 4px;
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  html, body { 
    overflow-x: hidden; 
  }
   main#top{
    /*width: 90%;*/
    max-width: 680px;
    margin: 0;       /* 中央寄せ */
    padding: 0 10px;      /* 画面端の余白 */
  }

  .section{
    padding: 70px 0;     /* 既存通りでOK */
    margin-left: auto;      /* ← セクション自体も中央に */
    margin-right: auto;
  }
   /* セクション系は親幅に合わせて100% */
  .section,
  .hero,
  #about,#works,#service,#voice,#company,#contact{
    width: 100%;
  }
  /* 横の余白（ガター）を少し広めに */
  .container{
    width: 92%;          /* 90%だと窮屈なら調整値。好みで92〜96% */
    max-width: 1080px;
    margin-left: auto;       /* ← 中央寄せの決め手 */
    margin-right: auto;      /* ← 同上 */
    padding-left: 0;         /* ← 左右paddingがある場合は削除 */
    padding-right: 0;
  }
   /* container を必ず中央寄せに統一 */
  .container,
  .hero.container,
  .section.container {
    width: min(92%, 680px);
    margin-inline: auto;
    padding-inline: 0;
  }
  /* フル幅化したいブロックも中央寄せを明示 */
  .works-slider,
  .about-wrap,
  .service-cards,
  .voice-grid,
  .company-table,
  .contact-form{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* スライダー系の横はみ出し防止 */
  .slick-list{ 
    overflow: hidden; 
  }
  .slick-track{ 
    margin-left: 0; 
    margin-right: 0; 
  }

  /* 画像・メディアのガード（親幅を超えない） */
  img, video{ 
    max-width: 100%; 
    height: auto; 
  }

  .header-inner {
    min-height: 56px; 
    padding: 8px 0; 
    gap: 12px; 
    position: relative; 
  }
  /* 固定ナビが横に押し出さないように */
  .header-inner { position: relative; }
  .hamburger{
    position: absolute;
    top: 20px;
    right: 16px;     /* ← 60px から詰める */
    z-index: 999;
  }
  .logo-img { 
    height: 86px; 
  }

  .hamburger{
    display:inline-block;
    top: 20px;
    right: 60px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    z-index: 999; /* ← これを追加。常に最前面 */ 
    position:absolute;
  }
  .hamburger span{
    position:absolute; 
    left:9px; 
    right:9px; 
    height:2px; 
    background:var(--ink); 
    transition:.24s;
  }
  .hamburger span:nth-child(1){top:12px;}
  .hamburger span:nth-child(2){top:19px;}
  .hamburger span:nth-child(3){top:26px;}
  .hamburger[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  .hamburger[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .gnav{
    position:fixed; 
    left: 0;
    right: 0; 
    top: 20px; 
    box-sizing: border-box;
    transform: translateY(-130%); /* 非表示状態（上に隠す） */
    transition: transform .25s ease;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    padding: 16px 16px 18px;
    z-index: 200;           /* ヘッダーより前面 */
    overflow-x: hidden;
    }

  .gnav ul{
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 18px;
    row-gap: 12px;
    justify-content: space-between;   /* 横の間隔を均等に */
    align-items: center;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  .gnav ul li a{
    display: inline-block;
    padding: 6px 0;
    color: #222;
    border: none;
    text-align: center;
    position: relative;
  }
  .gnav ul li a:hover{
    color: #3F7DF1;   /* 好きな色に変更可 */
  }
  .gnav ul li a::after{
    content:"";
    position:absolute;
    left: 0; 
    right: 0; 
    bottom: -4px;
    height: 2px; 
    width: 0;
    margin: 0 auto;
    background: #3F7DF1;      /* 好きな色に変更可 */
    transition: width .2s;
  }
  .gnav ul li a:hover::after{ 
    width: 100%; 
  }

  /* IGだけは画像なので微調整（縦位置揃え） */
  .ig-item a{ 
    padding: 0; 
  }
  .ig-item img{ 
    display: block; 
    margin: 0 auto; 
  }

  .gnav a{
    display:block; 
    padding:10px 6px;
  }
  .gnav.is-open{
    transform:translateY(0);
  }
   body.nav-open{
    overflow:hidden;
  }

  .section { 
    padding: 70px 0; 
  }
  .hero { 
    padding-top: 80px; 
  }
  .hero::before{
    inset: 0 0 auto 0;
  }
  .lead { 
    max-width: 36ch; 
    margin: 14px auto 18px;
    width: auto;
  }
  .cta .btn{
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 10px auto 0;
  }
  .hero-img{
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
  }

  #about .about-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-photo img{
    width: 100%;
    height:auto;
  }

  .works-slider{
    margin: 0 auto 20px;
    width: 94%;
    max-width: 100%;
    border-radius: 14px;
  }
  .works-slider .slick-track {
    display: flex !important;
    align-items: center;
  }
  .works-slider .slick-slide {
    display: flex !important;
    justify-content: center;
  }
  .works-slider .slick-slide > div {
    display: flex;
    justify-content: center;
  }
  .work-slide img{
    width: 100%;              /* ← ここで横幅を調整 */
    max-width: none;
    height: auto;
    max-height: 380px;     /* 見た目を保つ上限だけ設定 */
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .work-caption{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
  }
  .work-ttl { 
    font-size: 18px; 
    margin-bottom: 4px; 
  }
  .work-txt { 
    font-size: 13px; 
  }

  .service-cards { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  .card { 
    padding: 18px; 
  }

  .voice-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  .voice-card { 
    flex-direction: column; 
  }
  .voice-media { 
    width: 100%; 
    height: 200px; 
  }
  .voice-media img { 
    height: 100%; 
    object-fit: cover; 
  }

  .company-table {
    grid-template-columns: 1fr;
    gap: 8px 0;
    padding: 18px;
  }

  .contact-form { 
    padding: 16px; 
  }
  .contact-form button { 
    display: block;
    margin: 10px auto 0; 
  }
  #contact .contact-card { 
    padding: 18px; 
  }
  #contact .contact-card .btn-row { 
    flex-direction: column; 
  }
  #contact .contact-card .btn-row .btn { 
    width: 100%; 
  }

  .site-footer { 
    padding: 10px 0 12px; 
    margin-top: 30px; 
  }
  .fnav { 
    justify-content: center; 
    gap: 12px; 
  }
  .fnav-right { 
    flex-direction: column; 
    gap: 8px; 
  }
  .fnav-right ul { 
    justify-content: flex-start; 
    flex-wrap: wrap; 
  }
  .footer-logo-img { 
    height: 24px; 
  }
  .site-footer small { 
    margin-top: 6px; 
  }
}