body {
  margin: 0;
  font-family: 'Yu Mincho', serif;
  background-color: #fbfbfb;
  color: #444;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  margin: 0;
  list-style: none;
}

.nav-list a {
  text-decoration: none;
  color: #69574c;
  font-weight: 500;
  transition: color 0.3s ease;
  z-index: 5;
}

.nav-list a:hover,
.nav-list a:focus {
  color: #ab6e42;
  outline: none;
}

/* ===== Hero ===== *
/* 新: 画像要素でカバー表示 */
.hero{
  position:relative;
  min-height:80vh;
  display:grid;
  place-items:center;
  padding-top:100px; /* 固定ヘッダ分 */
}

/* --- Heading size pin: fix Lighthouse deprecation --- */
.hero-title {
  padding-top: 120px;
  font-size: clamp(25px, 6vw, 50px); /* 好みで数値調整OK */
  line-height: 1.1;
  margin: 0.2em 0;
}
.hero-subtitle {
  font-size: clamp(16px, 2.4vw, 24px);
}
/* セクショニング要素内の h1 は必ずこのサイズを基準にする */
:where(article, aside, nav, section) h1 {
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.2;
}


.hero-media,
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
}
.hero-content{ position:relative; z-index:1; color:#f5f3ec; }
@media (max-width:768px){
  .hero{ min-height:60vh; padding-top:80px; }
}


#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.hero-content {
  font-size: 25px;
  color: #f5f3ec;
  z-index: 2;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.5s ease forwards;
}

.hero-content p { font-size: 18px; }

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ===== Sections ===== */
section {
  padding: 60px 1rem 80px;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
  scroll-margin-top: 100px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s ease;
}

.section-title.animate {
  opacity: 1;
  transform: translateY(0);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 4px;
  border-radius: 5px;
  background-color: #9d6db0;
  transition: width 0.6s ease;
}

.section-title.animate::after { width: 100%; }

/* ===== Message ===== */
/* ===== Message の再レイアウト ===== */
#message{
  display:flex;
  flex-direction:column;
  align-items:center;          /* セクション全体を中央に */
  text-align:center;           /* 本文は中央寄せ（ULで上書き） */
  padding-bottom:clamp(72px,8vw,128px); /* 下の余白をゆったり */
}

#message p {
  margin: 1em auto;   /* 段落間の余白 */
  max-width: 58ch;    /* 横幅を制限して読みやすく */
  line-height: 1.8;   /* 行間を広めに */
}

.message-intro,
.message-outro {
  text-align: center; /* キャッチと締めは中央寄せ */
}

.message-list {
  max-width: 40ch;
  margin: 2em auto;
  text-align: left;   /* 箇条書きは読みやすいよう左寄せ */
}


/* Studio名の見え方（任意・軽い強調） */
#message .studio-name{ font-style:italic; font-weight:600; color: #825a92;}

/* 箇条書きは幅を絞って“中央配置＋左揃え” */
#message .message-list{
  width:min(48ch,80vw);        /* 真ん中に“きゅっ”と */
  margin:1.75rem auto 2rem;    /* 上下の間隔 */
  text-align:left;             /* 項目は左揃え */
  padding-inline-start:1.4em;  /* マーカーぶんの字下げを一定に */
  line-height:1.9;
}

/* outroの幅だけ少し広めに（中央に） */
#message .message-outro{
  width:min(60ch,90vw);
  margin-inline:auto;
}

/* タブレット〜PCで微調整 */
@media (min-width:768px){
  #message .message-list{ width:min(50ch,60vw); }
  #message .message-outro{  width:min(62ch,70vw); }
}

/* ===== Works ===== */
#works {
   background-image: image-set(
    url("/images/IMG_0005-1920.avif") type("image/avif"),
    url("/images/IMG_0005-1920.webp") type("image/webp"),
    url("/images/IMG_0005-1920.jpg")  type("image/jpeg")
  );
  
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: visible; /* 念のためはみ出し許容 */
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* デスクトップはパララックス */
  padding: 50px 1rem 120px;
  color: #fff;
  position: relative;
}
/* モバイルは描画が重いので固定をオフに */
@media (max-width: 768px) {
  #works { background-attachment: scroll; }
}

#works .section-title { 
  font-size: 2rem;
  color: #fff; 
  z-index: 1;
}

.works-gallery {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.works-overlay1,
.works-overlay2 {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.works-overlay1 { background: rgba(255,255,255,0.7); backdrop-filter: blur(3px); }
.works-overlay2 { background: rgba(84, 83, 83, 0.4); backdrop-filter: blur(3px); }

.work-card {
  width: 300px;
  background: #efeae5;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  opacity: 0;
  z-index: 2;
}

.work-card.animate { opacity: 1; transform: translateX(0); }

.work-image { height: 250px; overflow: hidden; position: relative; }

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.work-image:hover img { transform: scale(1.03); }
.work-image:hover .overlay { opacity: 1; }

.work-description { padding: 10px; font-size: 0.95rem; color: rgb(85, 75, 63);}

/* ===== FAQ ===== */
.faq-section { max-width: 800px; margin: 0 auto; padding: 60px 1rem; }
.faq-item { margin-bottom: 1.5rem; border-bottom: 1px solid #ddd; padding-bottom: .5rem; }
.faq-question {
  width: 100%;
  font-size: 1.1rem;
  background: none;
  border: none;
  padding: .5rem 0;
  cursor: pointer;
  text-align: center;
}

.faq-question:hover,
.faq-question:focus { color: #a64eb4; outline: none; }

.faq-answer { display: none; margin: .5rem ;  color: #3d3d3d; }
.faq-answer.open { display: block; }


/* ===== Price ===== */
#price {
  background: rgb(82,75,73);
  position: relative;
  padding-bottom: 80px;
  color: #fff;
}
#price::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/ノイズ画像薄い.jpeg") center / cover;
  opacity: 0.08;
}

.price-section {padding: 60px 1rem; text-align: center; position: relative; z-index: 2; }
.price-note { margin: 25px auto 45px; max-width: 600px; border-bottom: 1px solid #eee; padding-bottom: 30px; }
.price-plan { margin: 40px auto 40px; max-width: 600px; border-bottom: 1px solid #eee; padding-bottom: 30px; }

/*===Quality セクション=== */
#quality {
   background-image: image-set(
    url("/images/IMG_0005-1920.avif") type("image/avif"),
    url("/images/IMG_0005-1920.webp") type("image/webp"),
    url("/images/IMG_0005-1920.jpg")  type("image/jpeg")
  );
  display: flex; 
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: visible; /* 念のためはみ出し許容 */
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* デスクトップはパララックス */
  padding: 50px 1rem 120px;
  color: #000000;
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* モバイルは描画が重いので固定をオフに */
@media (max-width: 768px) {
#quality { background-attachment: scroll; }
}

.quality-overlay1,
.quality-overlay2 {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.quality-overlay1 { background: rgba(212, 211, 210, 0.7); backdrop-filter: blur(3px); }
.quality-overlay2 { background: rgba(0,0,0,0.4); backdrop-filter: blur(3px); }


/* ===== Quality / Lighthouse ===== */

#quality .section-lead {
  display: block;
  background: rgba(255, 255, 255, 0.713);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border-radius: 5px;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  margin: 1.5rem auto;
  padding: 2rem;
  max-width: 73ch;
  position: relative;
  z-index: 2;
}
.highlight {
  color: #e49d4c;
  font-weight: 600;
}


/* 横2枚のボード（デスクトップは横並び） */
.lh-board{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 横2枚 */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

/* カード装飾：ブランド枠＋軽い影 */
.lh-card{
  background: #fff;
  border: 1px solid rgba(157,109,176,.35); /* くすみ紫系のブランド枠 */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
  padding: clamp(12px, 2.2vw, 18px);
}

/* タブ風ラベル */
.lh-tab{
  display: inline-block;
  background: #9d6db0;  /* ブランド色 */
  color: #fff;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .35rem .6rem;
  border-radius: 8px;
  margin-bottom: .75rem;
}

/* スクショの枠と角丸 */
.lh-shot{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow: hidden;
}
.lh-shot img{
  display: block;
  width: 100%;
  height: auto;
}

/* キャプション */
.lh-caption{
  font-size: .9rem;
  color: #666;
  text-align: center;
  margin-top: .6rem;
}

/* 横からスライドイン（Quality用） */
.slide-in{
  opacity: 0;
  transform: translateX(var(--slide-x, 0));
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.slide-in-left  { --slide-x: -48px; }  /* 左から */
.slide-in-right { --slide-x: -48px; }  /* 左から */
.slide-in.in{
  opacity: 1;
  transform: translateX(0);
}

/* 低速端末・配慮設定ならアニメ無効 */
@media (prefers-reduced-motion: reduce){
  .slide-in, .slide-in.in{
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* --- レスポンシブ --- */
/* タブレット：横並び維持（2カラム）、余白だけ少しタイトに */
@media (max-width: 1024px){
  .lh-board{
    max-width: 920px;
    gap: clamp(12px, 2.2vw, 20px);
  }
}

/* スマホ：縦並び（1カラム） */
@media (max-width: 767px){
  .lh-board{
    grid-template-columns: 1fr;     /* 1カラム */
    max-width: min(92vw, 560px);    /* はみ出し防止 */
  }
  .lh-card{ padding: 12px; }
  .lh-tab{ font-size: .9rem; }
}


/* ===== Contact ===== */
#contact { width:100%; text-align: center; background: #fff; }
.contact-form { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; gap: .75rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #dadada;
  border-radius: 6px;
}
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form button {
  display: block;
  margin: 40px auto 0;
  padding: 12px 16px;
  background-color: #676460;
  color: #ffffff;
  border: none;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.contact-form button:hover,
.contact-form button:focus { background: #222; outline: none; }
.hp-field { position:absolute; left:-999em; width:1px; height:1px; overflow:hidden; }


/* ===== Footer ===== */
.footer {
  background-image: image-set(
    url("/images/IMG_0005-1920.avif") type("image/avif"),
    url("/images/IMG_0005-1920.webp") type("image/webp"),
    url("/images/IMG_0005-1920.jpg")  type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
  padding: 2px .5rem;
  position: relative;
  color: #fff;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(120,115,106,0.8);
  backdrop-filter: blur(3px);
}
.footer-inner { position: relative; z-index: 1; font-size: 13px; }
.footer-note { font-size: 13px; color: #cfcfcf; font-style: italic; margin-top: -13px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav-list { gap: 1rem; }
  #hero { height: 60vh; padding-top: 80px; background-attachment: scroll; }
  .hero-content { font-size: 20px; padding: 0 1rem; }
  .hero-content p { font-size: 16px; }
  .message-intro, .message-outro { font-size: 1rem; max-width: 90%; }
  .works-gallery { flex-direction: column; align-items: center; }
  .work-card { width: 90%; }
  .faq-question { font-size: 1rem; }
  .price-section { padding: 60px 1rem; }
  .contact-form { max-width: 100%; }
  .footer { font-size: 12px; background-attachment: scroll; }
  .footer-note { font-size: 12px; }
}

/* ===== Mobile Hamburger (<=768px) ===== */
.hamburger { display:none; }

@media (max-width:768px){
  /* 既存ヘッダーを最前面に */
  .site-header{ z-index:1000; }

  /* PCナビはモバイルで非表示（ハンバーガー使用） */
  .nav-list{ display:none; }

  .hamburger{
    position: fixed; top:12px; right:16px;
    width:40px; height:40px;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    background: rgba(255,255,255,.75);
    border: 1px solid #ddd; border-radius:10px;
    padding:8px; z-index:1001; cursor:pointer;
    backdrop-filter: blur(6px);
  }
  .hamburger span{
    height:2px; width:100%;
    background:#333; display:block; transition:transform .25s, opacity .25s;
  }
  /* 開閉アニメ */
  .hamburger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* スライドメニュー */
  .mobile-menu{
    position: fixed; top:0; right:0; height:100vh; width:78%;
    max-width:320px; background: rgba(245,243,236,.96); /* サイトのベージュ系 */
    box-shadow: -12px 0 30px rgba(0,0,0,.08);
    transform: translateX(100%); transition: transform .3s ease;
    padding: 80px 24px 24px; z-index:1000;
  }
  .mobile-menu.is-open{ transform: translateX(0); }

  .mobile-nav-list{
    list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;
  }
  .mobile-nav-list a{
    text-decoration:none; color:#333; font-size:18px; letter-spacing:.02em;
    padding:10px 6px; border-radius:8px; transition: background .2s, color .2s;
  }
  .mobile-nav-list a:hover{ background:rgba(0,0,0,.06); color:#ab6e42; }

  /* 背景の半透明レイヤー */
  .menu-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:999;
    opacity:0; transition: opacity .3s ease;
  }
  .menu-backdrop.is-open{ opacity:1; }
}

/* メニュー開時、背面スクロール抑止 */
.body-no-scroll{ overflow:hidden; }