/* =========================================================
   天海 / TENKAI — 下層ページ共通スタイル（依頼・実績）
   style.css の変数・ボタン・eyebrow を継承。罫線と余白で組む。
   ========================================================= */
body.page{
  min-height:100vh;
  background:linear-gradient(180deg,#2277BE 0%,#1B67AC 34%,#125390 68%,#0D4276 100%);
}

/* 海と空のループ映像の上に薄い青のティント（明るさを保ちつつ白文字の可読性を確保）
   ※style.cssの.bg__tintはz-index:-1で映像の下に潜るため、ここでは映像の上へ */
.page .bg__tint{
  z-index:1;
  background:linear-gradient(180deg,
    rgba(13,66,118,.30) 0%,rgba(13,66,118,.24) 42%,rgba(10,50,95,.48) 100%);
}

/* ヘッダー */
.subhead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;padding-inline:var(--edge);
  background:rgba(16,72,128,.58);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.subhead .brand__ja{font-size:1.35rem}
.subhead .brand__logo{height:32px}

.back{
  display:inline-flex;align-items:center;gap:.5em;font-size:.88rem;font-weight:500;
  letter-spacing:.06em;color:rgba(234,246,255,.85);
}
.back::before{content:"←";font-size:1.05em}
.back:hover{color:#fff}

/* ページの導入 */
.page-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,7rem) var(--edge) clamp(2rem,5vh,3.5rem)}
.page-hero h1{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.18;margin:.2em 0 .35em;
  text-shadow:0 4px 24px rgba(0,15,40,.45);
}
.page-hero p{font-size:clamp(1.05rem,1.5vw,1.3rem);color:rgba(234,246,255,.88);max-width:60ch}

.page-main{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge) clamp(6rem,12vh,9rem)}

/* ノート帯 */
.note{
  margin-bottom:2.6rem;padding:.2rem 0 .2rem 1.3rem;
  border-left:2px solid var(--gold);
  font-size:1rem;color:rgba(234,246,255,.88);
}

/* 実績グリッド */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,2rem)}
.work{
  border-radius:4px;overflow:hidden;
  background:rgba(20,74,128,.5);border:1px solid var(--line);
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1);
}
.work:hover{transform:translateY(-3px);border-color:rgba(234,246,255,.5)}
.work__thumb{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden}
.work__thumb span{font-size:.78rem;letter-spacing:.3em;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:500;z-index:1;transition:letter-spacing .6s cubic-bezier(.2,.7,.2,1)}
.work:hover .work__thumb span:not(.badge-soon){letter-spacing:.52em}
.work__body{padding:1.3rem 1.5rem 1.6rem}
.work__body h3{font-family:"Shippori Mincho",serif;font-size:1.25rem;font-weight:700;margin-bottom:.45em}
.work__body p{color:rgba(234,246,255,.8);font-size:.96rem;margin-bottom:.9em;line-height:1.75}
.work__tags{display:flex;flex-wrap:wrap;font-size:.82rem;color:rgba(234,246,255,.68)}
.work__tags span:not(:last-child)::after{content:"・";margin:0 .35em;opacity:.6}
.work__thumb .badge-soon{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;padding:.4em 1em;border-radius:2px;
  background:rgba(4,32,60,.75);border:1px solid rgba(227,181,77,.55);color:var(--gold);
  text-transform:none;
}
/* 実績カード（本物の作品） */
a.work{display:block;color:inherit;text-decoration:none}
.work__thumb--shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work__thumb--icon{background:radial-gradient(120% 120% at 30% 20%,#1a5590,#0a2c4e)}
.work__thumb--icon img{
  width:38%;aspect-ratio:1;border-radius:22%;
  box-shadow:0 10px 26px rgba(0,15,40,.5),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.work:hover .work__thumb--icon img{transform:translateY(-2px) scale(1.03)}
.work__thumb .badge-cat{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;padding:.38em .9em;border-radius:2px;
  background:rgba(4,32,60,.72);border:1px solid rgba(234,246,255,.4);color:rgba(234,246,255,.94);
  text-transform:uppercase;
}
.work__link{display:inline-block;margin-top:.7em;font-size:.85rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.work__link::after{content:" →"}

/* フォーム（依頼ページ） */
.form-wrap{max-width:760px}
.form{
  display:grid;gap:1.4rem;padding:clamp(1.8rem,3vw,2.8rem);border-radius:4px;
  background:rgba(20,74,128,.5);border:1px solid var(--line);
}
.field{display:flex;flex-direction:column;gap:.5em}
.field label{font-weight:700;font-size:.95rem;letter-spacing:.04em;color:rgba(234,246,255,.92)}
.field label .req{color:var(--coral);margin-left:.3em}
.field input,.field select,.field textarea{
  font:inherit;color:#fff;padding:.85em 1em;border-radius:3px;
  background:rgba(14,58,105,.45);border:1px solid rgba(140,200,255,.3);
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(234,246,255,.4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(127,212,255,.16);
}
.field textarea{min-height:150px;resize:vertical}
.field select option{color:#0b2036}
.form__submit{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.form__note{font-size:.86rem;color:rgba(234,246,255,.6)}

/* フッター */
.page-foot{
  max-width:var(--maxw);margin:0 auto;padding:2.5rem var(--edge);
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);font-size:.8rem;color:rgba(234,246,255,.6);letter-spacing:.06em;
}
.page-foot .brand__ja{font-size:1rem}

/* ========== 料金・プランページ ========== */
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2.2rem);align-items:start}
.plan{
  border-radius:5px;overflow:hidden;
  background:rgba(20,74,128,.5);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.plan__head{padding:1.8rem 1.9rem 1.5rem;border-bottom:1px solid var(--line)}
.plan__kind{font-size:.74rem;letter-spacing:.3em;color:rgba(234,246,255,.6);text-transform:uppercase;font-weight:500}
.plan__name{font-family:"Shippori Mincho",serif;font-size:1.7rem;font-weight:700;margin:.35em 0 .1em}
.plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .9em;margin-top:.9rem}
.plan__price .pp{display:flex;align-items:baseline;gap:.35em}
.plan__price .pp small{font-size:.8rem;color:rgba(234,246,255,.66);font-weight:500}
.plan__price .pp b{font-family:"Shippori Mincho",serif;font-size:1.9rem;font-weight:700;color:var(--gold);line-height:1}
.plan__price .pp b i{font-style:normal;font-size:.9rem;margin-left:.15em}
.plan__price .sep{width:1px;height:1.6em;background:var(--line)}
.plan__body{padding:1.5rem 1.9rem 1.9rem;display:flex;flex-direction:column;gap:1.4rem;flex:1}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:.7em}
.plan__list li{position:relative;padding-left:1.5em;color:rgba(234,246,255,.9);font-size:.97rem;line-height:1.7}
.plan__list li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:.5em;border:1px solid var(--gold);transform:rotate(45deg)}
.plan__note{font-size:.86rem;color:rgba(234,246,255,.62);border-left:2px solid var(--line);padding-left:1em}
.plan .btn{margin-top:auto}

.price-extra{margin-top:clamp(2.6rem,5vh,3.6rem)}
.price-extra h2{font-family:"Shippori Mincho",serif;font-size:1.5rem;font-weight:700;margin-bottom:1.1rem}
.price-table{width:100%;border-collapse:collapse;font-size:.96rem}
.price-table th,.price-table td{text-align:left;padding:.95em 1em;border-bottom:1px solid var(--line);vertical-align:top}
.price-table th{width:34%;font-weight:700;color:rgba(234,246,255,.92)}
.price-table td{color:rgba(234,246,255,.82)}
.price-table td .amt{color:var(--gold);font-weight:700;white-space:nowrap}

/* ========== FAQページ ========== */
.faq{display:flex;flex-direction:column;gap:.9rem;max-width:820px}
.faq details{
  border:1px solid var(--line);border-radius:4px;background:rgba(20,74,128,.44);
  transition:border-color .3s;
}
.faq details[open]{border-color:rgba(227,181,77,.45)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15em 3em 1.15em 1.4em;position:relative;
  font-weight:700;font-size:1.04rem;letter-spacing:.02em;color:rgba(234,246,255,.95);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:"Shippori Mincho",serif;color:var(--gold);margin-right:.7em;font-size:1.05em}
.faq summary::after{
  content:"";position:absolute;right:1.4em;top:50%;width:.62em;height:.62em;
  border-right:1.5px solid rgba(234,246,255,.7);border-bottom:1.5px solid rgba(234,246,255,.7);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 1.5em 1.3em 1.5em;color:rgba(234,246,255,.82);line-height:1.85}
.faq .faq__a a{color:var(--sky);border-bottom:1px solid rgba(127,212,255,.4)}

/* ========== 特商法・プライバシー（文書ページ） ========== */
.doc{max-width:840px}
.doc-table{width:100%;border-collapse:collapse;font-size:.97rem;background:rgba(20,74,128,.4);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.doc-table th,.doc-table td{text-align:left;padding:1.05em 1.3em;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.75}
.doc-table tr:last-child th,.doc-table tr:last-child td{border-bottom:none}
.doc-table th{width:32%;font-weight:700;color:rgba(234,246,255,.92);background:rgba(14,58,105,.32)}
.doc-table td{color:rgba(234,246,255,.84)}
.doc-table td a{color:var(--sky);border-bottom:1px solid rgba(127,212,255,.4)}
.fillin{color:var(--coral);font-weight:700;font-style:normal}

.prose{max-width:760px;color:rgba(234,246,255,.86)}
.prose h2{font-family:"Shippori Mincho",serif;font-size:1.4rem;font-weight:700;color:#fff;margin:2.4rem 0 .8rem;padding-top:.2rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1rem;line-height:1.9}
.prose ul{margin:0 0 1.1rem 1.3em;display:flex;flex-direction:column;gap:.5em}
.prose li{line-height:1.8}
.prose a{color:var(--sky);border-bottom:1px solid rgba(127,212,255,.4)}
.prose .updated{font-size:.86rem;color:rgba(234,246,255,.55);margin-top:2.4rem}

/* ========== 運営者について ========== */
.about-lead{max-width:720px;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.95;color:rgba(234,246,255,.92);margin-bottom:clamp(2.4rem,5vh,3.4rem)}
.about-lead em{color:var(--gold);font-style:normal}
.about-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.about-story h2{font-family:"Shippori Mincho",serif;font-size:1.4rem;font-weight:700;margin:2rem 0 .7rem}
.about-story h2:first-child{margin-top:0}
.about-story p{color:rgba(234,246,255,.85);margin-bottom:1rem;line-height:1.9}
.about-card{
  background:rgba(20,74,128,.5);border:1px solid var(--line);border-radius:5px;
  padding:1.7rem 1.8rem;position:sticky;top:96px;
}
.about-card h3{font-size:.74rem;letter-spacing:.3em;color:rgba(234,246,255,.6);text-transform:uppercase;font-weight:500;margin-bottom:1.1rem}
.about-card dl{display:flex;flex-direction:column;gap:.95rem}
.about-card .about__row{display:flex;flex-direction:column;gap:.15em;padding-bottom:.95rem;border-bottom:1px solid var(--line)}
.about-card .about__row:last-child{border-bottom:none;padding-bottom:0}
.about-card dt{font-size:.78rem;letter-spacing:.1em;color:rgba(234,246,255,.6)}
.about-card dd{font-size:1rem;color:rgba(234,246,255,.92);font-weight:500}
.about-card dd a{color:var(--sky);border-bottom:1px solid rgba(127,212,255,.4)}

/* ========== 共通：ページ下部リンク帯 ========== */
.page-cta{
  margin-top:clamp(3rem,7vh,5rem);padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--line);border-radius:5px;background:rgba(20,74,128,.34);
  text-align:center;
}
.page-cta h2{font-family:"Shippori Mincho",serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;margin-bottom:.6rem}
.page-cta p{color:rgba(234,246,255,.82);margin-bottom:1.6rem}
.page-cta .form__submit{justify-content:center}

/* サブヘッダーにナビを持たせる（新ページ用） */
.subhead__nav{display:flex;align-items:center;gap:1.6rem;font-size:.86rem;font-weight:500;letter-spacing:.04em}
.subhead__nav a{color:rgba(234,246,255,.82);transition:color .25s}
.subhead__nav a:hover,.subhead__nav a[aria-current]{color:#fff}
.subhead__nav a[aria-current]{border-bottom:1px solid var(--gold);padding-bottom:2px}

/* フッターの法務リンク */
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-links a{color:rgba(234,246,255,.6);transition:color .25s}
.foot-links a:hover{color:#fff}

@media (max-width:860px){
  .works-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .about-cols{grid-template-columns:1fr}
  .about-card{position:static}
  .page-foot{flex-direction:column;gap:.9rem;text-align:center}
  .subhead__nav{gap:1rem;font-size:.8rem}
  .price-table th,.price-table td{padding:.8em .6em}
}
@media (min-width:861px) and (max-width:1120px){
  .works-grid{grid-template-columns:repeat(2,1fr)}
}