@charset "utf-8";
/* =========================================================================
   カイジ編集局 / 映像クオリティマーケティングLP （shokunin-movie.com トップ用）
   STUDIO版 https://studio.shokunin-movie.com/kaiji_marketing_new の
   実CSSから数値をそのまま写した再現版。
   2026-09-18
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;
  background:#FFB273;
  color:#1A1A1A;
}

/* コラム幅：STUDIO版と同じ挙動。540px以下の画面では画面いっぱい、
   541px以上では 390px で固定して中央に置く。 */
:root{--col:100%}
@media (min-width:541px){:root{--col:390px}}

/* ---- 全体の器 ------------------------------------------------------------ */
#lp-base{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow:clip;
  background:#FFB273;
}

/* PCだけ：斜めストライプ＋光の模様 */
@media (min-width:768px){
  #lp-base{
    background-image:
      repeating-linear-gradient(-38deg,rgba(194,68,0,.09) 0 3px,transparent 3px 17px),
      radial-gradient(70% 50% at 10% 6%,rgba(255,255,255,.55),transparent 62%),
      radial-gradient(60% 45% at 92% 70%,rgba(252,104,0,.38),transparent 62%),
      linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,138,48,.30));
    background-attachment:fixed;
  }
}

/* ---- 白いコラム ---------------------------------------------------------- */
.lp-column{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  width:var(--col);
  max-width:100%;
  background:#FFFFFF;
  padding:0 0 68px;
}

/* ---- 画像ブロック --------------------------------------------------------
   STUDIO は各ブロックに固定の高さを与え、画像を background-size:cover で
   敷いている。ここでは <img> + object-fit:cover で同じ見え方を作る
   （alt を持たせられるぶん、こちらのほうが検索と読み上げに有利）。      */
.blk{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.blk-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.blk > *:not(.blk-img){position:relative;z-index:1}

/* STUDIO 実測：高さと、ブロック同士を食い込ませるマイナスマージン */
#fv-hero{height:694px;padding:55px 39px 55px 40px;justify-content:flex-end}
.blk-2{height:529px}
.blk-3{height:706px;margin-top:-77px}
.blk-4{height:706px;margin-top:-89px}
.blk-5{height:696px;margin-top:-1px}
.blk-6{height:697px;padding:251px 0 0;align-items:flex-end;justify-content:center}
.blk-7{height:697px;margin-top:-20px}
.blk-8{height:698px;margin-top:-3px}

/* 最後の1枚だけは元の比率のまま流れに乗る */
.blk-last{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:780/900}

/* ---- FV 内の白い小バッジ -------------------------------------------------- */
.fv-badge{
  display:flex;
  flex-direction:column;
  align-content:center;
  align-items:center;
  justify-content:center;
  height:10px;
  width:126px;
  max-width:calc(100% + 1px);
  margin:0 0 0 -1px;
  padding:2px 23px 0;
  background:#FFFFFF;
  border:1px solid #D9D9D9;
  border-radius:8px;
  box-shadow:0 1px 4px 0 rgba(12,12,13,.05);
}
.fv-badge span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  width:auto;
  max-width:calc(100% + 23px);
  margin:-2px 0 0 -23px;
  translate:13px 0;
  color:#1D1B20;
  font-size:6px;
  font-weight:500;
  line-height:1.4;
  text-align:center;
  white-space:nowrap;
}

/* ---- 緑のCTAボタン（FV内・追従バー共通） --------------------------------- */
.fv-cta-wrap{
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  align-items:flex-start;
  justify-content:flex-start;
  height:58px;
  width:275px;
  max-width:100%;
  margin:0;
  padding:0;
}
.cta-btn{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-content:center;
  align-items:center;
  justify-content:center;
  padding:15px 0 15px 15px;
  background:linear-gradient(180deg,rgb(7,222,94) 0%,rgb(5,166,70) 100%);
  border:1px solid #FFFFFF;
  box-shadow:0 3px 5px 4px rgba(255,255,255,.5) inset;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.cta-btn span{
  flex:none;
  color:#FFFFFF;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  line-height:35px;
  text-align:center;
}
#cta-fv{height:42px;width:100%;max-width:100%;border-radius:50px}

/* ---- 打消し表示（STUDIO版と同じ位置・同じ大きさ） ------------------------ */
.disclaimer-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height:auto;
  width:auto;
  max-width:100%;
  padding:0;
}
.disclaimer{
  margin:0;
  color:#000000;
  font-size:6px;
  font-weight:400;
  line-height:1.4;
  text-align:left;
}

/* ---- 法定表示・運営者情報 ------------------------------------------------ */
.legal{
  width:var(--col);
  max-width:100%;
  height:auto;
  background:#1e1e1e;
  color:#f7f5f2;
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  padding:32px 28px 90px;
  text-align:left;
}
.legal p{margin:10px 0 0}          /* STUDIO版の行間（実測32px）に合わせる */
.legal a{color:inherit;font-size:14px}
.legal p a:first-child{margin-right:10px}

/* ---- 追従リボン＋追従CTA -------------------------------------------------- */
#ribbon{
  position:sticky;
  bottom:72px;
  z-index:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex:none;
  height:auto;
  width:auto;
  max-width:100%;
  margin:0;
  padding:6px 14px;
  background:#ffffff;
  border-radius:999px;
  color:#000000;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1.40;
  text-align:center;
}
#cta-fixed{
  position:sticky;
  bottom:24px;
  z-index:1;
  height:42px;
  width:var(--col);
  max-width:100%;
  border-radius:999px;
}

/* ---- CTAの動き（STUDIO版のカスタムコードと同一） ------------------------- */
@keyframes eqm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes eqm-glow{0%,100%{box-shadow:0 0 0 0 rgba(4,122,15,0)}50%{box-shadow:0 0 0 7px rgba(4,122,15,.22)}}
#cta-fv{animation:eqm-breathe 2.6s ease-in-out infinite;will-change:transform}
#cta-fixed{animation:eqm-glow 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#cta-fv,#cta-fixed{animation:none}}

/* ---- 出現時のふわっと表示（STUDIO版の「出現時」相当） --------------------
   html.js が付いたときだけ隠す。JSが無効／失敗しても真っ白にはならない。 */
@media (prefers-reduced-motion:no-preference){
  html.js #fv-hero{
    scale:1.06 1.06;
    transition:scale 1600ms cubic-bezier(.4,.4,0,1);
  }
  html.js #fv-hero.is-in{scale:1 1}

  html.js .blk-2,html.js .blk-3,html.js .blk-4,html.js .blk-5,
  html.js .blk-6,html.js .blk-7,html.js .blk-8,
  html.js .blk-last{
    opacity:0;
    translate:0 20px;
    transition:opacity 2000ms ease-in-out,translate 2000ms ease-in-out;
  }
  html.js .blk-2.is-in,html.js .blk-3.is-in,html.js .blk-4.is-in,html.js .blk-5.is-in,
  html.js .blk-6.is-in,html.js .blk-7.is-in,html.js .blk-8.is-in,
  html.js .blk-last.is-in{opacity:1;translate:0 0}
}


/* =========================================================================
   PC表示（画面幅1501px以上）
   旧トップ shokunin-movie.com と同じ考え方：
     ・本文カラムを列幅の25%ぶん右へずらす
     ・空いた左側に固定パネル（ロゴ／CTA／セクションリンク）を置く
     ・右下に「TOPに戻る」
   1501px未満では左パネルを出さず、いまのスマホ／タブレット表示のまま。
   ========================================================================= */
#pc-side{display:none}
#to-top{display:none}

@media (min-width:1501px){
  /* --- 列を560pxに拡大。390px時との比率は完全に同じ --- */
  :root{--col:560px}
  #fv-hero{height:996.5px;padding:79.0px 56.0px 79.0px 57.4px}
  .blk-2{height:759.6px}
  .blk-3{height:1013.7px;margin-top:-110.6px}
  .blk-4{height:1013.7px;margin-top:-127.8px}
  .blk-5{height:999.4px;margin-top:-1.4px}
  .blk-6{height:1000.8px;padding:360.4px 0 0}
  .blk-7{height:1000.8px;margin-top:-28.7px}
  .blk-8{height:1002.3px;margin-top:-4.3px}
  .lp-column{padding-bottom:97.6px}
  .fv-badge{height:14.4px;width:180.9px;padding:2.9px 33.0px 0;margin-left:-1.4px;border-radius:11.5px}
  .fv-badge span{font-size:8.6px;margin:-2.9px 0 0 -33.0px;translate:18.7px 0;max-width:calc(100% + 33.0px)}
  .fv-cta-wrap{height:83.3px;width:394.9px}
  .cta-btn{padding:21.5px 0 21.5px 21.5px}
  .cta-btn span{font-size:20.1px;letter-spacing:1.4px;line-height:50.3px}
  #cta-fv{height:60.3px;border-radius:71.8px}
  .disclaimer{font-size:8.6px}
  .legal{padding:45.9px 40.2px 129.2px;font-size:23.0px}
  .legal p{margin-top:14.4px}
  .legal a{font-size:20.1px}
  .legal p a:first-child{margin-right:14.4px}
  #ribbon{bottom:103.4px;padding:8.6px 20.1px;font-size:18.7px;letter-spacing:1.4px}
  #cta-fixed{height:60.3px;bottom:34.5px}

  /* --- 本文を右へ140.0pxずらす（中央寄せの器に左パディングを入れる） --- */
  #lp-base{padding-left:280.0px}

  /* --- 左の固定パネル --- */
  #pc-side{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:0; top:0; bottom:0;
    right:calc(50% + 140.0px);
    padding:0 40px; z-index:2; pointer-events:none;
  }
  #pc-side .side-inner{width:100%; max-width:560px; text-align:center; pointer-events:auto}
  .side-lead{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:.04em;color:#5A2A00}
  .side-title{margin:0 0 18px;font-size:64px;font-weight:900;line-height:1.12;letter-spacing:.01em;
               color:#2A1206;text-shadow:0 2px 0 rgba(255,255,255,.35)}
  .side-sub{margin:0 0 30px;font-size:17px;font-weight:500;line-height:1.85;color:#4A2408}
  .side-cta{
    display:flex;align-items:center;justify-content:center;
    width:100%;max-width:440px;height:70px;margin:0 auto;
    border:1px solid #FFFFFF;border-radius:999px;
    background:linear-gradient(180deg,rgb(7,222,94) 0%,rgb(5,166,70) 100%);
    box-shadow:0 3px 5px 4px rgba(255,255,255,.5) inset, 0 10px 24px rgba(120,50,0,.18);
    text-decoration:none;animation:eqm-glow 2.6s ease-in-out infinite;
  }
  .side-cta span{color:#fff;font-size:22px;font-weight:900;letter-spacing:.08em;line-height:1}
  .side-nav{list-style:none;display:inline-block;margin:40px 0 0;padding:0;text-align:left}
  .side-nav li{margin-top:20px}
  .side-nav li:first-child{margin-top:0}
  .side-nav a{display:inline-block;position:relative;padding-left:34px;
               color:#3A1B06;font-size:18px;font-weight:500;letter-spacing:.1em;text-decoration:none}
  .side-nav a::before{content:"";position:absolute;left:0;top:50%;width:22px;height:3px;
                       background:#E2550A;transform:translateY(-50%)}
  .side-nav a:hover{color:#E2550A}

  /* --- TOPに戻る --- */
  #to-top{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:28px;bottom:28px;width:94px;height:94px;
    border-radius:50%;background:#F45E00;color:#fff;text-decoration:none;
    box-shadow:0 8px 20px rgba(120,50,0,.28);z-index:5;
  }
  #to-top span{font-size:19px;font-weight:900;line-height:1.15;text-align:center}
  #to-top b{display:block;font-size:13px;font-weight:500}
}

@media (prefers-reduced-motion:reduce){ .side-cta{animation:none} }