@charset "utf-8";
/* ============================================================
* 動画クリエイター募集 LP（recruit/video-creator3/index.html）
* 元は HTML に直書きしていたスタイルをクラスに移したもの。
* クラス名：vc-<セクション>__<タグ><番号>（同じ内容のスタイルは1つのクラスを共用）
*
* 共通の style.css（文字14px・行間1.8・リンク色など）や .lp-video-creator a:hover に
* 負けないよう、LP内の要素は「.lp-video-creator タグ.クラス」で優先度を上げている。
* 画面幅ごとの調整は末尾の「レスポンシブ」にまとめている。
* ============================================================ */
/* ---------- 基本（LPの中だけに効かせる） ---------- */
html{scroll-behavior:smooth}
/* LP のスタイルは .lp-video-creator の中だけに効かせる（共通ヘッダの文字色・書体を変えないため） */
body{margin:0;background:#FAF8F3}
.lp-video-creator{color:#1E1D1A;font-family:'Zen Kaku Gothic New',sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:normal}
.lp-video-creator a{color:#3F7391}
.lp-video-creator a:hover{color:#1E1D1A}
.lp-video-creator *{box-sizing:border-box}
.h0:hover{background:rgba(255,255,255,.18) !important;box-shadow:0 6px 20px rgba(140,100,0,.35) !important}
.h1:hover{transform:translateY(3px) !important;box-shadow:0 3px 0 #B8901A !important;color:#1E1D1A !important}
.sticky:hover{background:#FFD84D !important}
/* 共通ヘッダ（固定・高さ 89px / 59px / 54px）の分だけ本文を下げる */
.page-video-creator #main{padding-top:89px}
@media only screen and (max-width:1100px){.page-video-creator #main{padding-top:59px}}
@media only screen and (max-width:768px){.page-video-creator #main{padding-top:54px}}
/* ---------- base ---------- */
.lp-video-creator {
background:#FAF8F3;
overflow:hidden;
}
/* ---------- hero ---------- */
.lp-video-creator section.vc-hero__section1 {
position:relative;
max-width:1672px;
margin:0 auto;
line-height:0;
}
/* 看板画像を囲む h1（ページの見出し＝画像の alt）。サイト共通の h1 の余白・文字・飾りを打ち消して、画像だけを表示する */
.lp-video-creator h1.vc-hero__h11 {
margin:0;
padding:0;
border:0;
background:none;
font-size:inherit;
line-height:0;
}
.lp-video-creator h1.vc-hero__h11::before,
.lp-video-creator h1.vc-hero__h11::after {
content:none;
}
.lp-video-creator img.vc-hero__img1 {
width:100%;
height:auto;
display:block;
}
.lp-video-creator a.vc-hero__a1 {
position:absolute;
left:33.4%;
top:84.8%;
width:33.2%;
height:7.6%;
border-radius:999px;
display:block;
transition:box-shadow .2s, background .2s;
}
.lp-video-creator a.vc-hero__a2 {
position:absolute;
left:14.4%;
top:82.3%;
width:69.8%;
height:6.5%;
border-radius:999px;
display:block;
transition:box-shadow .2s, background .2s;
}
/* ---------- intro ---------- */
.lp-video-creator section.vc-intro__section1 {
position:relative;
padding:88px 24px 96px;
overflow:hidden;
background:#FAF8F3;
}
.lp-video-creator div.vc-intro__div1 {
max-width:1280px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,5fr) minmax(0,6fr);
gap:clamp(24px,3vw,48px);
align-items:center;
}
.lp-video-creator div.vc-intro__div2 {
display:flex;
flex-direction:column;
gap:28px;
min-width:0;
}
.lp-video-creator div.vc-intro__div3 {
font-family:'Caveat',cursive;
font-size:36px;
line-height:1;
color:#3F7391;
transform:rotate(-6deg);
transform-origin:left;
}
.lp-video-creator p.vc-intro__p1 {
margin:0 0 14px;
font-size:clamp(15px,1.4vw,18px);
font-weight:700;
line-height:1.8;
text-wrap:pretty;
}
.lp-video-creator h2.vc-intro__h21 {
margin:0;
font-size:clamp(20px,2vw,30px);
font-weight:900;
line-height:1.45;
letter-spacing:.02em;
color:#1E1D1A;
}
.lp-video-creator span.vc-intro__span1 {
background:linear-gradient(transparent 58%,#F5CB3A 58%,#F5CB3A 92%,transparent 92%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
padding:0 4px;
}
.lp-video-creator p.vc-intro__p2 {
margin:0;
font-size:16px;
line-height:1.9;
text-wrap:pretty;
}
.lp-video-creator div.vc-intro__div4 {
display:flex;
flex-direction:column;
gap:12px;
font-family:'Klee One',cursive;
font-size:clamp(20px,2.2vw,28px);
line-height:1.7;
color:#1E1D1A;
}
.lp-video-creator p.vc-intro__p3 {
margin:0;
}
.lp-video-creator p.vc-intro__p4 {
margin:0;
font-size:16px;
font-weight:700;
line-height:1.9;
text-wrap:pretty;
}
.lp-video-creator div.vc-intro__div5 {
min-width:0;
margin-right:-24px;
}
/* スクロールアニメーション（intro＝Our Message・vision＝Our Vision）
* 画面に入ったらスクリプトが section に .is-inview を付ける：文章は下から、写真は右からスッと出す。
* 初期状態（隠す指定）は、スクリプトが動いたとき（.is-anim-ready が付いたとき）だけ効かせる＝スクリプトが動かなくても内容は見える。
* 写真が右の画面外から入っても、section の overflow:hidden で横スクロールは出ない */
.lp-video-creator.is-anim-ready div.vc-intro__div2 {
opacity:0;
transform:translateY(40px);
transition:opacity 1.5s ease, transform 1.5s ease;
}
.lp-video-creator.is-anim-ready div.vc-intro__div5 {
opacity:0;
transform:translateX(80px);
transition:opacity .9s ease .2s, transform .9s ease .2s;
}
/* vision（Our Vision）：左の「10万人の次を、一緒につくりたい」のかたまりを、Our Message の文章と同じく下から出す */
.lp-video-creator.is-anim-ready div.vc-vision__div2 > div:first-child {
opacity:0;
transform:translateY(40px);
transition:opacity 1.5s ease, transform 1.5s ease;
}
/* vision：右の3つの項目と下の一文を、下から順番に1つずつ出す（左のかたまりより少し遅れて、0.25秒ずつずらす） */
.lp-video-creator.is-anim-ready div.vc-vision__div4 > * {
opacity:0;
transform:translateY(30px);
transition:opacity 1s ease, transform 1s ease;
}
.lp-video-creator.is-anim-ready div.vc-vision__div4 > :nth-child(1) { transition-delay:.4s; }
.lp-video-creator.is-anim-ready div.vc-vision__div4 > :nth-child(2) { transition-delay:.65s; }
.lp-video-creator.is-anim-ready div.vc-vision__div4 > :nth-child(3) { transition-delay:.9s; }
.lp-video-creator.is-anim-ready div.vc-vision__div4 > :nth-child(4) { transition-delay:1.15s; }
.lp-video-creator.is-anim-ready section.is-inview div.vc-intro__div2,
.lp-video-creator.is-anim-ready section.is-inview div.vc-intro__div5,
.lp-video-creator.is-anim-ready section.is-inview div.vc-vision__div2 > div:first-child,
.lp-video-creator.is-anim-ready section.is-inview div.vc-vision__div4 > * {
opacity:1;
transform:none;
}
/* 「視差効果を減らす」設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
.lp-video-creator.is-anim-ready div.vc-intro__div2,
.lp-video-creator.is-anim-ready div.vc-intro__div5,
.lp-video-creator.is-anim-ready div.vc-vision__div2 > div:first-child,
.lp-video-creator.is-anim-ready div.vc-vision__div4 > * {
opacity:1;
transform:none;
transition:none;
}
}
/* remote（Remote friendly・Grow the brand）：2つのブロックは離れているので、ブロックごとに画面に入ったら .is-inview が付く。
* 文章は下から、写真は外側から（1つ目は右から・2つ目は左から）スッと出す。section の overflow:hidden で横スクロールは出ない */
.lp-video-creator.is-anim-ready div.vc-remote__div3 {
opacity:0;
transform:translateY(40px);
transition:opacity 1.5s ease, transform 1.5s ease;
}
.lp-video-creator.is-anim-ready div.vc-remote__div5 {
opacity:0;
transform:translateX(80px);
transition:opacity 1.2s ease .2s, transform 1.2s ease .2s;
}
.lp-video-creator.is-anim-ready div.vc-remote__div6 div.vc-remote__div5 {
transform:translateX(-80px);
}
.lp-video-creator.is-anim-ready div.is-inview div.vc-remote__div3,
.lp-video-creator.is-anim-ready div.is-inview div.vc-remote__div5 {
opacity:1;
transform:none;
}
/* persona（このような方を求めています）：見出し横の人物イラストだけ、下からニュっと飛び出す（少し行き過ぎて戻る動き）。
* スマホでは中央寄せに transform を使っているので、ぶつからないよう translate・scale（transform とは別の指定）で動かす */
.lp-video-creator.is-anim-ready img.vc-persona__img1 {
opacity:0;
translate:0 40px;
scale:.4;
transform-origin:50% 100%;
transition:opacity .5s ease .3s, translate .8s cubic-bezier(.34,1.56,.64,1) .3s, scale .8s cubic-bezier(.34,1.56,.64,1) .3s;
}
.lp-video-creator.is-anim-ready div.is-inview img.vc-persona__img1 {
opacity:1;
translate:none;
scale:none;
}
/* 頭の左上の飾り：人物が出終わったころ（約1.1秒後）にポンと出て、そのあとピクピクとひねる動きをくり返す
* （ひねったあとは少し止まる。1.6秒で1回）
* steps(1,end)：角度を途中の角度を通らずにパッと切り替える＝カクカクした動き（なめらかにするなら ease-in-out） */
.lp-video-creator.is-anim-ready img.vc-persona__img3 {
opacity:0;
}
.lp-video-creator.is-anim-ready div.is-inview img.vc-persona__img3 {
animation:vcPersonaYyIn .3s ease-out 1.1s forwards, vcPersonaYyWiggle 1.6s steps(1,end) 1.4s 3;
}
@keyframes vcPersonaYyIn {
from { opacity:0; scale:.5; }
to { opacity:1; scale:1; }
}
@keyframes vcPersonaYyWiggle {
0%, 50%, 100% { rotate:0deg; }
10% { rotate:-7deg; }
20% { rotate:3deg; }
30% { rotate:-5deg; }
40% { rotate:2deg; }
}
@media (prefers-reduced-motion: reduce) {
.lp-video-creator.is-anim-ready div.vc-remote__div3,
.lp-video-creator.is-anim-ready div.vc-remote__div5,
.lp-video-creator.is-anim-ready div.vc-remote__div6 div.vc-remote__div5 {
opacity:1;
transform:none;
transition:none;
}
/* 人物イラストは transform（スマホの中央寄せ）を残す */
.lp-video-creator.is-anim-ready img.vc-persona__img1 {
opacity:1;
translate:none;
scale:none;
transition:none;
}
.lp-video-creator.is-anim-ready img.vc-persona__img3,
.lp-video-creator.is-anim-ready div.is-inview img.vc-persona__img3 {
opacity:1;
animation:none;
}
}
.lp-video-creator img.vc-intro__img1 {
display:block;
width:100%;
height:auto;
}
/* ---------- vision ---------- */
.lp-video-creator section.vc-vision__section1 {
padding:88px 24px;
background:#F1EDE3;
position:relative;
}
.lp-video-creator div.vc-vision__div1 {
position:absolute;
top:-60px;
right:-80px;
width:260px;
height:260px;
border-radius:50%;
background:#F5CB3A;
opacity:.85;
}
.lp-video-creator div.vc-vision__div2 {
max-width:1080px;
margin:0 auto;
position:relative;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:56px;
align-items:start;
}
.lp-video-creator div.vc-vision__div3 {
font-family:'Caveat',cursive;
font-size:30px;
color:#3F7391;
transform:rotate(-4deg);
transform-origin:left;
margin-bottom:8px;
}
.lp-video-creator h2.vc-vision__h21 {
margin:0 0 28px;
font-size:clamp(28px,4vw,42px);
font-weight:900;
line-height:1.4;
letter-spacing:.02em;
}
.lp-video-creator p.vc-vision__p1 {
margin:0 0 20px;
font-size:16px;
line-height:2;
text-wrap:pretty;
}
.lp-video-creator p.vc-vision__p2 {
margin:0;
font-size:18px;
font-weight:700;
line-height:2;
}
.lp-video-creator div.vc-vision__div4 {
display:flex;
flex-direction:column;
gap:14px;
padding-top:12px;
}
.lp-video-creator div.vc-vision__div5 {
background:#FFFFFF;
padding:20px 24px;
border-radius:4px;
font-size:16px;
font-weight:500;
line-height:1.7;
display:flex;
gap:16px;
align-items:center;
box-shadow:0 2px 0 rgba(30,29,26,.06);
}
.lp-video-creator span.vc-vision__span1 {
flex:none;
width:10px;
height:10px;
border-radius:50%;
background:#5E8FAB;
}
.lp-video-creator p.vc-vision__p3 {
margin:16px 0 0;
font-size:16px;
line-height:2;
text-wrap:pretty;
}
.lp-video-creator div.vc-vision__div6 {
max-width:1080px;
margin:56px auto 0;
position:relative;
background:#FFFFFF;
border-radius:28px;
padding:clamp(20px,2.5vw,28px) clamp(24px,4vw,48px);
display:flex;
flex-wrap:wrap-reverse;
flex-direction:row-reverse;
align-items:center;
gap:clamp(16px,3vw,40px);
}
.lp-video-creator div.vc-vision__div7 {
flex:0 1 260px;
max-width:260px;
margin:0 auto;
}
.lp-video-creator img.vc-vision__img1 {
display:block;
width:100%;
height:auto;
border-radius:14px;
}
.lp-video-creator div.vc-vision__div8 {
flex:1 1 400px;
min-width:0;
}
.lp-video-creator div.vc-vision__div9 {
font-family:'Caveat',cursive;
font-size:30px;
color:#3F7391;
transform:rotate(-4deg);
transform-origin:left;
margin-bottom:12px;
}
.lp-video-creator p.vc-vision__p4 {
margin:0;
font-size:17px;
line-height:2.1;
text-wrap:pretty;
}
.lp-video-creator strong.vc-vision__strong1 {
background:linear-gradient(transparent 60%,#F5CB3A 60%);
font-weight:900;
}
/* ---------- wanted ---------- */
.lp-video-creator section.vc-wanted__section1 {
padding:96px 24px;
}
.lp-video-creator div.vc-wanted__div1 {
max-width:1080px;
margin:0 auto;
}
.lp-video-creator div.vc-wanted__div2 {
text-align:center;
margin-bottom:48px;
}
.lp-video-creator div.vc-wanted__div3 {
font-family:'Caveat',cursive;
font-size:30px;
color:#3F7391;
transform:rotate(-3deg);
margin-bottom:14px;
}
.lp-video-creator h2.vc-wanted__h21 {
margin:4px 0 0;
display:inline-block;
background:#1E1D1A;
color:#F5CB3A;
font-size:clamp(22px,3.4vw,34px);
font-weight:900;
line-height:1.5;
padding:10px 24px;
letter-spacing:.03em;
}
.lp-video-creator span.vc-wanted__span1 {
white-space:nowrap;
display:inline-block;
}
.lp-video-creator p.vc-wanted__p1 {
margin:0 0 36px;
text-align:center;
font-size:16px;
line-height:2;
}
.lp-video-creator div.vc-wanted__div4 {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
gap:16px;
}
.lp-video-creator div.vc-wanted__div5 {
position:relative;
background:#5E8FAB;
color:#FFFFFF;
min-height:120px;
padding:18px 22px 18px 56px;
display:flex;
align-items:center;
overflow:hidden;
}
.lp-video-creator span.vc-wanted__span2 {
position:absolute;
left:-38px;
top:50%;
transform:translateY(-50%);
width:78px;
height:78px;
border-radius:50%;
background:#FAF8F3;
display:flex;
align-items:center;
justify-content:flex-end;
padding-right:10px;
font-family:'Josefin Sans',sans-serif;
font-weight:400;
font-size:24px;
line-height:1;
color:#1E1D1A;
}
.lp-video-creator span.vc-wanted__span3 {
font-size:17px;
font-weight:700;
line-height:1.7;
text-wrap:pretty;
}
.lp-video-creator p.vc-wanted__p2 {
margin:36px 0 0;
text-align:center;
font-size:16px;
line-height:2;
text-wrap:pretty;
}
/* ---------- jobs ---------- */
.lp-video-creator section.vc-jobs__section1 {
padding:96px 24px;
background-color:#5E8FAB;
background-image:url(../images/jobs-bg.jpg);
background-repeat:no-repeat;
background-position:center top;
background-size:max(100%,1672px) auto;
color:#FFFFFF;
position:relative;
}
.lp-video-creator div.vc-jobs__div1 {
max-width:1080px;
margin:0 auto;
position:relative;
}
.lp-video-creator div.vc-jobs__div2 {
font-family:'Caveat',cursive;
font-size:30px;
color:#F5CB3A;
transform:rotate(-4deg);
transform-origin:left;
}
.lp-video-creator h2.vc-jobs__h21 {
margin:4px 0 40px;
font-size:clamp(28px,4vw,42px);
font-weight:900;
line-height:1.4;
}
.lp-video-creator div.vc-jobs__div3 {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
gap:20px;
}
.lp-video-creator div.vc-jobs__div4 {
background:#FFFFFF;
color:#1E1D1A;
border-radius:14px;
padding:28px 24px 26px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
text-align:center;
box-shadow:0 6px 20px rgba(20,50,70,.12);
}
.lp-video-creator img.vc-jobs__img1 {
display:block;
width:180px;
height:180px;
margin:-34px 0 -38px;
object-fit:contain;
}
.lp-video-creator span.vc-jobs__span1 {
font-size:19px;
font-weight:900;
line-height:1.55;
text-wrap:balance;
}
.lp-video-creator span.vc-jobs__span2 {
width:40px;
height:4px;
border-radius:4px;
background:#F5CB3A;
}
.lp-video-creator div.vc-jobs__div5 {
margin-top:28px;
background:#FFFFFF;
color:#1E1D1A;
border-radius:14px;
padding:28px 32px;
box-shadow:0 6px 20px rgba(20,50,70,.12);
}
.lp-video-creator p.vc-jobs__p1 {
margin:0 0 8px;
font-size:18px;
font-weight:900;
}
/* ---------- remote ---------- */
.lp-video-creator section.vc-remote__section1 {
padding:96px 24px;
position:relative;
overflow:hidden;
}
.lp-video-creator div.vc-remote__div1 {
max-width:1080px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:88px;
position:relative;
}
.lp-video-creator div.vc-remote__div2 {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(32px,5vw,64px);
align-items:center;
}
.lp-video-creator div.vc-remote__div3 {
min-width:0;
}
.lp-video-creator div.vc-remote__div4 {
font-family:'Caveat',cursive;
font-size:30px;
color:#3F7391;
transform:rotate(-4deg);
transform-origin:left;
}
.lp-video-creator h2.vc-remote__h21 {
margin:4px 0 24px;
font-size:clamp(24px,3.2vw,32px);
font-weight:900;
line-height:1.5;
}
.lp-video-creator p.vc-remote__p1 {
margin:0 0 16px;
font-size:16px;
line-height:2;
text-wrap:pretty;
}
.lp-video-creator strong.vc-remote__strong1 {
background:linear-gradient(transparent 60%,#F5CB3A 60%);
}
.lp-video-creator p.vc-remote__p2 {
margin:0;
font-size:16px;
font-weight:700;
line-height:2;
text-wrap:pretty;
}
.lp-video-creator div.vc-remote__div5 {
min-width:0;
}
.lp-video-creator img.vc-remote__img1,
.lp-video-creator img.vc-remote__img2 {
display:block;
width:100%;
/*aspect-ratio:4/3;*/
object-fit:cover;
border-radius:16px;
}
/* ブランディングの2枚目の写真（PCのみ。スマホでは非表示） */
.lp-video-creator img.vc-remote__img2 {
margin-top:20px;
}
.lp-video-creator div.vc-remote__div6 {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(32px,5vw,64px);
align-items:start;
}
.lp-video-creator p.vc-remote__p3 {
margin:0 0 12px;
font-size:15px;
font-weight:700;
}
.lp-video-creator div.vc-remote__div7 {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
}
.lp-video-creator span.vc-remote__span1 {
font-size:14px;
font-weight:700;
line-height:1.5;
padding:8px 14px;
border-radius:999px;
background:#FFFFFF;
border:1.5px solid #5E8FAB;
color:#2D5D78;
}
.lp-video-creator p.vc-remote__p4 {
margin:0;
font-size:16px;
line-height:2;
text-wrap:pretty;
}
/* ---------- persona ---------- */
.lp-video-creator section.vc-persona__section1 {
padding:72px 24px 96px;
background:#F1EDE3;
position:relative;
overflow:hidden;
}
.lp-video-creator div.vc-persona__div1 {
position:relative;
text-align:center;
padding:24px 0 36px;
min-height:170px;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
}
.lp-video-creator div.vc-persona__div2 {
font-family:'Caveat',cursive;
font-size:32px;
color:#3F7391;
transform:rotate(-3deg);
margin-bottom:14px;
}
.lp-video-creator h2.vc-persona__h21 {
margin:0;
font-size:clamp(28px,4vw,46px);
font-weight:900;
line-height:1.4;
color:#1F2A44;
}
/* 人物イラストと、頭の左上の飾り（persona-man-yy.png）をまとめた枠。位置と大きさはこの枠で決める */
.lp-video-creator div.vc-persona__div7 {
position:absolute;
right:0;
bottom:0;
width:clamp(120px,14vw,170px);
}
.lp-video-creator img.vc-persona__img1 {
width:100%;
height:auto;
display:block;
}
/* 飾り：人物の幅に対する割合で置くので、人物の大きさが変わっても頭の左上に付いてくる */
.lp-video-creator img.vc-persona__img3 {
position:absolute;
left:4%;
top:4%;
width:17%;
height:auto;
transform-origin:100% 100%; /* 右下（人物の頭側）を支点にひねる */
}
.lp-video-creator div.vc-persona__div3 {
position:relative;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:14px 20px;
}
.lp-video-creator div.vc-persona__div4 {
background:#FFFFFF;
border-radius:10px;
padding:10px 20px 10px 12px;
display:flex;
gap:14px;
align-items:center;
box-shadow:0 2px 10px rgba(31,42,68,.06);
min-height:86px;
}
.lp-video-creator div.vc-persona__div5 {
flex:none;
width:72px;
height:72px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.lp-video-creator img.vc-persona__img2 {
width:60px;
height:60px;
display:block;
object-fit:contain;
}
.lp-video-creator span.vc-persona__span1 {
flex:none;
width:28px;
height:28px;
border-radius:50%;
background:#F5CB3A;
color:#1F2A44;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:900;
}
.lp-video-creator span.vc-persona__span2 {
font-size:16px;
font-weight:700;
line-height:1.6;
color:#1F2A44;
}
.lp-video-creator div.vc-persona__div6 {
margin-top:36px;
text-align:center;
}
.lp-video-creator p.vc-persona__p1 {
margin:0 0 6px;
font-size:17px;
font-weight:900;
}
/* ---------- terms ---------- */
.lp-video-creator div.vc-terms__div1 {
max-width:860px;
margin:0 auto;
}
.lp-video-creator h2.vc-terms__h21 {
margin:4px 0 32px;
font-size:clamp(28px,4vw,42px);
font-weight:900;
line-height:1.4;
}
.lp-video-creator div.vc-terms__div2 {
border-top:2px solid #1E1D1A;
}
.lp-video-creator div.vc-terms__div3 {
display:grid;
grid-template-columns:minmax(110px,180px) minmax(0,1fr);
gap:16px;
padding:20px 4px;
border-bottom:1px solid #D9D3C4;
}
.lp-video-creator span.vc-terms__span1 {
font-size:15px;
font-weight:900;
color:#2D5D78;
}
.lp-video-creator span.vc-terms__span2 {
font-size:16px;
line-height:1.7;
}
.lp-video-creator p.vc-terms__p1 {
margin:24px 0 0;
font-size:16px;
font-weight:700;
}
/* ---------- apply ---------- */
.lp-video-creator section.vc-apply__section1 {
padding:96px 24px;
background:#F1EDE3;
}
.lp-video-creator div.vc-apply__div1 {
max-width:960px;
margin:0 auto;
}
.lp-video-creator div.vc-apply__div2 {
text-align:center;
margin-bottom:40px;
}
.lp-video-creator h2.vc-apply__h21 {
margin:4px 0 0;
display:inline-block;
background:#1E1D1A;
color:#F5CB3A;
font-size:clamp(22px,3.4vw,34px);
font-weight:900;
line-height:1.5;
padding:10px 24px;
}
.lp-video-creator div.vc-apply__div3 {
background:#FFFFFF;
border-radius:6px;
padding:clamp(24px,4vw,48px);
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
column-gap:40px;
}
.lp-video-creator div.vc-apply__div4 {
display:flex;
gap:16px;
align-items:baseline;
padding:14px 0;
border-bottom:1px dashed #D9D3C4;
}
.lp-video-creator span.vc-apply__span1 {
flex:none;
font-family:'Josefin Sans',sans-serif;
font-weight:600;
font-size:15px;
color:#3F7391;
width:24px;
}
.lp-video-creator span.vc-apply__span2 {
font-size:16px;
line-height:1.6;
}
.lp-video-creator p.vc-apply__p1 {
margin:32px 0 0;
text-align:center;
font-size:17px;
font-weight:700;
line-height:1.9;
text-wrap:pretty;
}
/* ---------- closing ---------- */
.lp-video-creator section.vc-closing__section1 {
padding:112px 24px 96px;
background:#1E1D1A;
color:#FAF8F3;
position:relative;
overflow:hidden;
}
.lp-video-creator div.vc-closing__div1 {
position:absolute;
inset:0;
background-image:url(../images/closing-bg.jpg);
background-size:cover;
background-position:center;
opacity:.18;
filter:grayscale(.3);
}
.lp-video-creator div.vc-closing__div2 {
position:absolute;
inset:0;
background:radial-gradient(ellipse 52% 60% at 50% 50%,rgba(20,19,17,.82) 0%,rgba(20,19,17,.6) 45%,rgba(20,19,17,0) 100%);
}
.lp-video-creator div.vc-closing__div3 {
position:absolute;
top:-120px;
right:-100px;
width:340px;
height:340px;
border-radius:50%;
background:#F5CB3A;
opacity:.9;
}
.lp-video-creator div.vc-closing__div4 {
position:absolute;
bottom:40px;
left:-60px;
width:180px;
height:180px;
border-radius:50%;
background:#5E8FAB;
opacity:.7;
}
.lp-video-creator div.vc-closing__div5 {
max-width:820px;
margin:0 auto;
position:relative;
text-align:center;
}
.lp-video-creator div.vc-closing__div6 {
font-family:'Caveat',cursive;
font-size:34px;
color:#F5CB3A;
transform:rotate(-3deg);
margin-bottom:14px;
}
.lp-video-creator h2.vc-closing__h21 {
margin:8px 0 36px;
font-size:clamp(28px,4vw,42px);
font-weight:900;
}
.lp-video-creator p.vc-closing__p1 {
margin:0 0 20px;
font-size:17px;
line-height:2.1;
text-wrap:pretty;
}
.lp-video-creator p.vc-closing__p2 {
margin:0 0 60px;
font-size:17px;
line-height:2.1;
text-wrap:pretty;
}
.lp-video-creator div.vc-closing__div7 {
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
margin-bottom:80px;
}
.lp-video-creator span.vc-closing__span1 {
font-family:'Klee One',cursive;
font-size:clamp(20px,2.8vw,26px);
}
.lp-video-creator p.vc-closing__p3 {
margin:0 0 40px;
font-size:18px;
/*font-weight:700;*/
}
.lp-video-creator a.vc-closing__a1 {
display:inline-flex;
align-items:center;
gap:20px;
background:#F5CB3A;
color:#1E1D1A;
text-decoration:none;
font-size:clamp(18px,2.4vw,22px);
font-weight:900;
padding:22px 48px;
border-radius:999px;
box-shadow:0 6px 0 #B8901A;
transition:transform .15s, box-shadow .15s;
}
.lp-video-creator span.vc-closing__span2 {
font-size:24px;
}
.lp-video-creator div.vc-closing__div8 {
margin-top:72px;
font-family:'Josefin Sans',sans-serif;
font-size:12px;
letter-spacing:.4em;
color:#A39E92;
}
/* ---------- sticky ---------- */
a.vc-sticky__a1 {
position:fixed;
right:20px;
bottom:20px;
z-index:10;
display:flex;
align-items:center;
gap:12px;
background:#F5CB3A;
color:#1E1D1A;
text-decoration:none;
font-size:15px;
font-weight:900;
padding:10px 26px;
border-radius:999px;
box-shadow:0 6px 20px rgba(30,29,26,.25);
/* 出し入れはスクリプトが .is-show を付け外しする。display で消すとアニメーションしないので、
* 透明度と位置でスーっと出し入れし、見えない間は visibility:hidden でクリックできないようにする */
opacity:0;
visibility:hidden;
transform:translateY(16px);
transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
a.vc-sticky__a1.is-show {
opacity:1;
visibility:visible;
transform:translateY(0);
transition:opacity .4s ease, transform .4s ease, visibility 0s;
}
/* ---------- pagetop（左下） ---------- */
/* 出し入れは「応募する」と同じく .is-show の付け外しで、透明度と位置で行う */
a.vc-pagetop__a1 {
position:fixed;
left:20px;
bottom:20px;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:50%;
background:#1E1D1A;
color:#FFFFFF;
box-shadow:0 6px 20px rgba(30,29,26,.25);
opacity:0;
visibility:hidden;
transform:translateY(16px);
transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s, background .2s;
}
a.vc-pagetop__a1.is-show {
opacity:1;
visibility:visible;
transform:translateY(0);
transition:opacity .4s ease, transform .4s ease, visibility 0s, background .2s;
}
a.vc-pagetop__a1:hover {
background:#3F7391;
color:#FFFFFF;
}
/* ---------- レスポンシブ ---------- */
/* 改行の出し分け（スマホ＝767px以下）
*
… PC だけ改行する
*
… スマホだけ改行する
* 文字揃えの出し分け
* class="sp-left" … スマホだけ左揃えにする（PC は元の揃えのまま）
* 各要素の text-align（クラス2つ＋要素名の指定）より必ず優先させるため !important を付けている */
.lp-video-creator br.br-sp{display:none}
@media (max-width:767px){
.lp-video-creator br.br-pc{display:none}
.lp-video-creator br.br-sp{display:inline}
.lp-video-creator .sp-left{text-align:left !important}
.lp-video-creator p.vc-wanted__p2 {text-align: left;}
.lp-video-creator p.vc-remote__p4 {text-align: left;}
.lp-video-creator div.vc-terms__div3 {
grid-template-columns:minmax(110px,100px) minmax(0,1fr);
}
.lp-video-creator p.vc-apply__p1 {text-align: left;}
.lp-video-creator p.vc-closing__p1 {font-size: 20px;}
.lp-video-creator p.vc-closing__p2 {font-size: 20px;}
.lp-video-creator span.vc-closing__span1 {font-size: 25px;}
}
/* ヒーローの応募ボタン（透明なクリック範囲）：PC 用とスマホ用の画像で位置が違うので切り替える */
.lp-video-creator a.vc-hero__a2{display:none}
/* vision：PC（左右2列のとき）は左右のボックスの間（中央）にドットの縦線を入れる
* 列数は幅で自動に変わる（auto-fit）ので、線を出す幅では2列に固定して、線が必ず列の間に来るようにする */
@media (min-width:980px){
.lp-video-creator div.vc-vision__div2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-video-creator div.vc-vision__div2::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
border-left:3px dotted rgba(131, 129, 99, 0.1);
transform:translateX(-50%);
}
}
@media (max-width:767px){
.lp-video-creator a.vc-hero__a1{display:none}
.lp-video-creator a.vc-hero__a2{display:block}
/* intro：“DIYをもっと身近にしたい” などの一文を中央寄せに */
.lp-video-creator div.vc-intro__div4{text-align:center}
.lp-video-creator section.vc-vision__section1 {padding: 48px 24px 88px 24px;}
}
@media (max-width:860px){
/* intro：文章と写真を縦並びに */
.lp-video-creator div.vc-intro__div1{grid-template-columns:minmax(0,1fr)}
.lp-video-creator div.vc-intro__div5{margin:0 -12px}
/* vision：Our Goal の写真を全幅に */
.lp-video-creator div.vc-vision__div7{flex:1 1 100%;max-width:none;width:100%;margin:0}
/* jobs：背景画像を画面幅に合わせる */
.lp-video-creator section.vc-jobs__section1{background-size:100% auto}
/* remote：文章と写真を縦並びに（2段目は写真を下に） */
.lp-video-creator div.vc-remote__div2,
.lp-video-creator div.vc-remote__div6{grid-template-columns:minmax(0,1fr);gap:28px}
.lp-video-creator div.vc-remote__div6 div.vc-remote__div5{order:2}
.lp-video-creator img.vc-remote__img2{display:none}
}
@media (max-width:700px){
/* persona：見出し下に人物イラストを中央配置、カードを詰める */
.lp-video-creator div.vc-persona__div1{padding-bottom:120px}
.lp-video-creator div.vc-persona__div7{right:50%;transform:translateX(50%);width:110px}
.lp-video-creator div.vc-persona__div4{min-height:72px;padding:8px 14px 8px 8px;gap:10px}
.lp-video-creator span.vc-persona__span2{font-size:14px}
a.vc-pagetop__a1{left:12px;bottom:12px;width:44px;height:44px}
}
@media (max-width:600px){
/* jobs：カードを2列に */
.lp-video-creator div.vc-jobs__div3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp-video-creator div.vc-jobs__div4{padding:18px 10px 18px;gap:10px;border-radius:10px}
.lp-video-creator img.vc-jobs__img1{width:120px;height:120px;margin:-22px 0 -26px}
.lp-video-creator span.vc-jobs__span1{font-size:14px}
}