/* WHITE.PHAT.GRAPHICS LP-A (wpg-lp1) stylesheet
 * index.html / thanks.html / privacy.html で共通利用します。外部CDNには依存しません。
 *
 * 1) LP固有のコンポーネントスタイル
 * 2) Tailwind 由来のユーティリティ(このLPで実際に使っているクラスのみを静的化したもの)
 *
 * Tailwindのクラスを新しく使う場合は、2 への追記が必要です。
 */

/* ==================== 1) LP components ==================== */
:root{
  --font-heading:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
  --font-body:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:#212529;margin:0;background:#fff;}
.heading-font{font-family:var(--font-heading);}
img,video{max-width:100%;height:auto;display:block;}

/* CTA pill button */
.btn-cta{
  display:flex;align-items:center;justify-content:center;
  background:#000;color:#fff;border-radius:9999px;
  font-family:var(--font-heading);font-weight:700;
  letter-spacing:0.05em;
  text-decoration:none;
  transition:transform .2s ease, opacity .2s ease;
}
.btn-cta:hover{opacity:.85;transform:translateY(-2px);}
.btn-cta:active{opacity:.7;transform:translateY(0);}

/* Speech bubble with tail */
.bubble{position:relative;}
.bubble.tail-right::after,
.bubble.tail-right::before,
.bubble.tail-left::after,
.bubble.tail-left::before{
  content:'';position:absolute;width:0;height:0;
  border-style:solid;
}
.bubble.tail-right::after{
  bottom:-20px;right:15%;
  border-width:20px 16px 0 16px;
  border-color:#000 transparent transparent transparent;
}
.bubble.tail-right::before{
  bottom:-15px;right:calc(15% + 3px);
  border-width:16px 13px 0 13px;
  border-color:#fff transparent transparent transparent;
  z-index:1;
}
.bubble.tail-left::after{
  bottom:-20px;left:12%;
  border-width:20px 16px 0 16px;
  border-color:#000 transparent transparent transparent;
}
.bubble.tail-left::before{
  bottom:-15px;left:calc(12% + 3px);
  border-width:16px 13px 0 13px;
  border-color:#fff transparent transparent transparent;
  z-index:1;
}

/* Scroll fade-in */
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
[data-animate].is-visible{opacity:1;transform:translateY(0);}

textarea{resize:vertical;}

/* ===== FV 数値バー(実績サマリー) ===== */
.stat-bar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:420px;
  margin:0 auto;
}
.stat-bar > div{padding:0 6px;}
.stat-bar > div + div{border-left:1px solid rgba(0,0,0,0.15);}
.stat-num{
  font-family:var(--font-heading);
  font-size:26px;
  font-weight:900;
  line-height:1.1;
  color:#000;
}
.stat-num span{font-size:0.65em;margin-left:1px;}
.stat-label{
  font-size:11px;
  font-weight:700;
  color:#212529;
  margin-top:4px;
}
@media (min-width:768px){
  .stat-bar{max-width:560px;}
  .stat-num{font-size:38px;}
  .stat-label{font-size:13px;}
}

/* ===== ブランドムービー ===== */
.movie-stage{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.movie-video{width:100%;height:100%;object-fit:cover;}

/* ===== 過去の制作実績(ギャラリー) ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media (min-width:768px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
}
.gallery-card{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1a1a1a;
  text-decoration:none;
  transition:transform .3s ease;
}
.gallery-card:hover{transform:scale(1.03);}
.gallery-card:hover .gallery-overlay{background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);}
.gallery-card:hover img{transform:scale(1.08);}
.gallery-card img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.gallery-label{position:relative;text-align:center;color:#fff;}
.gallery-label .jp{font-weight:700;font-size:15px;letter-spacing:0.02em;}
.gallery-label .en{font-size:10px;letter-spacing:0.12em;color:rgba(255,255,255,0.8);margin-top:4px;}
@media (min-width:768px){
  .gallery-label .jp{font-size:18px;}
  .gallery-label .en{font-size:11px;}
}

/* ===== 会社の信頼情報セクション ===== */
.trust-heading{font-family:var(--font-heading);}

/* ===== 無料デザイン診断の説明文 ===== */
.diagnosis-lead{font-weight:700;color:#212529;}

/* ===== 送信ボタン下のプライバシーポリシー同意文 ===== */
.form-privacy-note{
  margin-top:16px;
  font-size:12px;
  line-height:1.8;
  text-align:center;
  color:rgba(33,37,41,0.7);
}
.form-privacy-note a{font-weight:700;color:#000;text-decoration:underline;}
.form-privacy-note a:hover{opacity:.7;}

/* ===== フォーム下 3点保証 ===== */
.guarantee-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:24px;
}
@media (max-width:767px){
  .guarantee-list{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
}
.guarantee-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:9999px;
  background-color:#F1F5F9;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  color:#212529;
}
.guarantee-check{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:18px;height:18px;
  border-radius:9999px;
  background-color:#000;
  color:#fff;
  font-size:11px;
  line-height:1;
}

/* ===== フッター(ナビ・会社情報) ===== */
.footer-nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 24px;
  margin-bottom:18px;
}
.footer-nav a{font-size:12px;font-weight:700;color:#000;text-decoration:none;transition:opacity .2s ease;}
.footer-nav a:hover{opacity:.6;text-decoration:underline;}
.footer-company{margin-bottom:14px;}
.footer-company p{font-size:12px;font-weight:700;color:#000;line-height:1.8;margin:0;}
.footer-company .footer-company-en{font-size:11px;color:rgba(0,0,0,0.7);letter-spacing:0.04em;}

/* ===== サンクス / プライバシーポリシー 共通レイアウト ===== */
.page-shell{min-height:100vh;display:flex;flex-direction:column;}
.page-main{flex:1;}
.thanks-lead{font-size:14px;line-height:1.8;font-weight:700;color:#212529;}
@media (min-width:768px){ .thanks-lead{font-size:16px;} }
.thanks-tel{margin-top:12px;text-align:center;font-weight:900;color:#000;}
.tel-badge{
  display:inline-block;background:#000;color:#fff;border-radius:9999px;
  padding:2px 10px;font-size:12px;vertical-align:middle;margin-right:8px;
}

.policy-title-en{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:0.15em;
  color:rgba(0,0,0,0.6);
}
.policy-lead{font-size:14px;line-height:1.9;font-weight:700;color:#212529;}
.policy-section{margin-bottom:32px;}
.policy-heading{
  font-family:var(--font-heading);
  font-size:17px;font-weight:700;line-height:1.6;color:#000;
  border-left:4px solid #000;padding-left:12px;margin-bottom:12px;
}
.policy-text{font-size:14px;line-height:1.9;color:#334155;}
.policy-text + .policy-text{margin-top:12px;}
.policy-list{margin-top:10px;padding-left:0;list-style:none;}
.policy-list + .policy-text{margin-top:12px;}
.policy-list li{position:relative;padding-left:18px;font-size:14px;line-height:1.9;color:#334155;}
.policy-list li::before{
  content:'';position:absolute;left:4px;top:0.82em;
  width:5px;height:5px;border-radius:9999px;background-color:#000;
}
.policy-text a,.policy-contact a{color:#000;text-decoration:underline;font-weight:700;}
.policy-text a:hover,.policy-contact a:hover{opacity:.7;}
.policy-contact{margin-top:12px;font-size:14px;line-height:2;color:#334155;}
.policy-contact p{margin:0;}
.policy-enacted{
  margin-top:32px;padding-top:20px;border-top:1px solid #E2E8F0;
  font-size:13px;color:rgba(0,0,0,0.6);text-align:right;
}
@media (min-width:768px){
  .policy-lead{font-size:15px;}
  .policy-heading{font-size:19px;}
  .policy-text,.policy-list li,.policy-contact{font-size:15px;}
  .policy-section{margin-bottom:40px;}
}

/* ==================== 2) Tailwind-derived utilities (static) ==================== */
.absolute{position:absolute;}
.relative{position:relative;}
.block{display:block;}
.hidden{display:none;}
.flex{display:flex;}
.flex-1{flex:1 1 0%;}
.flex-shrink-0{flex-shrink:0;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.z-10{z-index:10;}
.overflow-hidden{overflow:hidden;}
.whitespace-nowrap{white-space:nowrap;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.mx-auto{margin-left:auto;margin-right:auto;}
.w-0{width:0px;}
.w-14{width:3.5rem;}
.w-16{width:4rem;}
.w-fit{width:fit-content;}
.w-full{width:100%;}
.h-0{height:0px;}
.max-w-full{max-width:100%;}
.max-w-\[420px\]{max-width:420px;}
.max-w-\[640px\]{max-width:640px;}
.max-w-\[720px\]{max-width:720px;}
.max-w-\[760px\]{max-width:760px;}
.max-w-\[800px\]{max-width:800px;}
.max-w-\[820px\]{max-width:820px;}
.rounded-xl{border-radius:0.75rem;}
.rounded-2xl{border-radius:1rem;}
.border-2{border-width:2px;border-style:solid;}
.border-\[3px\]{border-width:3px;border-style:solid;}
.border-black{border-color:#000;}
.bg-white{background-color:#fff;}
.bg-center{background-position:center;}
.bg-cover{background-size:cover;}
.bg-\[\#F0F0F0\]{background-color:#F0F0F0;}
.bg-\[\#828282\]{background-color:#828282;}
.text-black{color:#000;}
.font-bold{font-weight:700;}
.font-black{font-weight:900;}
.leading-none{line-height:1;}
.leading-\[1\.3\]{line-height:1.3;}
.leading-\[1\.4\]{line-height:1.4;}
.leading-\[1\.5\]{line-height:1.5;}
.leading-\[1\.6\]{line-height:1.6;}
.leading-\[1\.7\]{line-height:1.7;}
.leading-\[1\.8\]{line-height:1.8;}
.leading-\[1\.9\]{line-height:1.9;}
.tracking-wider{letter-spacing:0.05em;}
.tracking-\[0\.01em\]{letter-spacing:0.01em;}
.tracking-\[0\.02em\]{letter-spacing:0.02em;}
.tracking-\[0\.03em\]{letter-spacing:0.03em;}
.tracking-\[0\.04em\]{letter-spacing:0.04em;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-\[11px\]{font-size:11px;}
.text-\[12px\]{font-size:12px;}
.text-\[13px\]{font-size:13px;}
.text-\[14px\]{font-size:14px;}
.text-\[15px\]{font-size:15px;}
.text-\[16px\]{font-size:16px;}
.text-\[18px\]{font-size:18px;}
.text-\[19px\]{font-size:19px;}
.text-\[20px\]{font-size:20px;}
.text-\[22px\]{font-size:22px;}
.text-\[23px\]{font-size:23px;}
.text-\[24px\]{font-size:24px;}
.text-\[25px\]{font-size:25px;}
.text-\[26px\]{font-size:26px;}
.text-\[28px\]{font-size:28px;}
.text-\[#6C757D\]{color:#6C757D;}
.placeholder\:font-normal::placeholder{font-weight:400;}
.placeholder\:text-\[\#6C757D\]::placeholder{color:#6C757D;}
.focus\:outline-none:focus{outline:none;}
.p-6{padding:1.5rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.pt-8{padding-top:2rem;}
.pb-14{padding-bottom:3.5rem;}
.mt-1{margin-top:0.25rem;}
.mt-8{margin-top:2rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.text-red-600{color:#DC2626;}
.mb-2{margin-bottom:0.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-14{margin-bottom:3.5rem;}
.mb-16{margin-bottom:4rem;}
.gap-4{gap:1rem;}
.space-y-0\.5 > * + *{margin-top:0.125rem;}
.space-y-1 > * + *{margin-top:0.25rem;}
.space-y-5 > * + *{margin-top:1.25rem;}

@media (min-width:768px){
  .md\:hidden{display:none;}
  .md\:block{display:block;}
  .md\:mt-10{margin-top:2.5rem;}
  .md\:py-12{padding-top:3rem;padding-bottom:3rem;}
  .md\:text-base{font-size:1rem;line-height:1.5rem;}
  .md\:text-\[36px\]{font-size:36px;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:text-left{text-align:left;}
  .md\:w-20{width:5rem;}
  .md\:w-28{width:7rem;}
  .md\:p-8{padding:2rem;}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
  .md\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
  .md\:py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
  .md\:py-4{padding-top:1rem;padding-bottom:1rem;}
  .md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
  .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
  .md\:py-7{padding-top:1.75rem;padding-bottom:1.75rem;}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem;}
  .md\:pt-14{padding-top:3.5rem;}
  .md\:pb-20{padding-bottom:5rem;}
  .md\:mb-5{margin-bottom:1.25rem;}
  .md\:mb-8{margin-bottom:2rem;}
  .md\:mb-10{margin-bottom:2.5rem;}
  .md\:mb-12{margin-bottom:3rem;}
  .md\:mb-14{margin-bottom:3.5rem;}
  .md\:mb-20{margin-bottom:5rem;}
  .md\:gap-3{gap:0.75rem;}
  .md\:gap-5{gap:1.25rem;}
  .md\:gap-8{gap:2rem;}
  .md\:space-y-6 > * + *{margin-top:1.5rem;}
  .md\:text-sm{font-size:0.875rem;line-height:1.25rem;}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem;}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem;}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
  .md\:text-\[13px\]{font-size:13px;}
  .md\:text-\[15px\]{font-size:15px;}
  .md\:text-\[16px\]{font-size:16px;}
  .md\:text-\[23px\]{font-size:23px;}
  .md\:text-\[32px\]{font-size:32px;}
  .md\:text-\[34px\]{font-size:34px;}
  .md\:text-\[38px\]{font-size:38px;}
  .md\:text-\[40px\]{font-size:40px;}
  .md\:text-\[44px\]{font-size:44px;}
  .md\:text-\[46px\]{font-size:46px;}
  .md\:text-\[48px\]{font-size:48px;}
  .md\:tracking-\[0\.03em\]{letter-spacing:0.03em;}
  .md\:tracking-\[0\.04em\]{letter-spacing:0.04em;}
}