@charset "utf-8";

/* ============================================================
 * WEBデザイナー募集 LP（recruit/web-designer3/index.html）
 * web-designer2 をもとに、メインカラーをチャコール（グレー系）に変えた版。黄色（ボタン・マーカー）は web-designer2 と同じ
 * 元は HTML に直書きしていたスタイルをクラスに移したもの（video-creator3 と同じ作り）。
 * クラス名：wd-<セクション>__<タグ><番号>（同じ内容のスタイルは1つのクラスを共用）
 *
 * 共通の style.css（文字14px・行間1.8・リンク色など）に負けないよう、
 * LP内の要素は「.lp-web-designer タグ.クラス」で優先度を上げている。
 * 画面幅ごとの調整は末尾の「レスポンシブ」にまとめている。
 * ============================================================ */

/* ---------- 基本（LPの中だけに効かせる） ---------- */
html{scroll-behavior:smooth}
/* LP のスタイルは .lp-web-designer の中だけに効かせる（共通ヘッダの文字色・書体を変えないため） */
body{margin:0;background:#F7F7F5}
.lp-web-designer{color:#1E1D1A;font-family:'Zen Kaku Gothic New',sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:normal}
.lp-web-designer a{color:#3D3D3D}
.lp-web-designer a:hover{color:#1E1D1A}
.lp-web-designer *{box-sizing:border-box}
.lp-web-designer :where(p,h1,h2,h3){margin:0}
.h0:hover{box-shadow:0 10px 24px rgba(30,29,26,.35) !important;transform:translateY(-2px) !important}
.h1:hover{transform:translateY(3px) !important;box-shadow:0 3px 0 #B8901A !important;color:#1E1D1A !important}
.h2:hover{background:#FFD84D !important;color:#1E1D1A !important}
/* 共通ヘッダ（固定・高さ 89px / 59px / 54px）の分だけ本文を下げる */
.page-web-designer #main{padding-top:89px}
@media only screen and (max-width:1100px){.page-web-designer #main{padding-top:59px}}
@media only screen and (max-width:768px){.page-web-designer #main{padding-top:54px}}

/* ---------- base ---------- */
.lp-web-designer {
	background:#F7F7F5;
	overflow:hidden;
}

/* ---------- hero ---------- */
.lp-web-designer section.wd-hero__section1 {
	position:relative;
	/* 画面が画像（最大1536px）より広いとき、左右の余白を濃いグレーで埋める */
	background:#333;
	line-height:0;
}
/* 看板画像を囲む h1（ページの見出し＝画像の alt）。共通の h1 の余白・文字の指定を打ち消して、画像だけを表示する */
.lp-web-designer h1.wd-hero__h11 {
	margin:0;
	padding:0;
	border:0;
	background:none;
	font-size:inherit;
	line-height:0;
}
.lp-web-designer h1.wd-hero__h11::before,
.lp-web-designer h1.wd-hero__h11::after {
	content:none;
}
.lp-web-designer div.wd-hero__div1 {
	position:relative;
	max-width:1536px;
	margin:0 auto;
}
.lp-web-designer img.wd-hero__img1 {
	display:block;
	width:100%;
	height:auto;
}
.lp-web-designer a.wd-hero__a1 {
	position:absolute;
	left:35.3%;
	top:90.2%;
	width:30.6%;
	height:6.4%;
	border-radius:999px;
	transition:box-shadow .2s, transform .2s;
}

/* ---------- intro ---------- */
.lp-web-designer section.wd-intro__section1 {
	position:relative;
	padding:88px 24px 96px;
	background:#F7F7F5;
}
.lp-web-designer div.wd-intro__div1 {
	max-width:1280px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
	gap:clamp(32px,4vw,56px);
	align-items:center;
}
.lp-web-designer div.wd-intro__div2 {
	display:flex;
	flex-direction:column;
	gap:28px;
	min-width:0;
}
.lp-web-designer div.wd-intro__div3 {
	font-family:'Caveat',cursive;
	font-size:36px;
	line-height:1;
	color:#9F8A6E;
	transform:rotate(-6deg);
	transform-origin:left;
}
.lp-web-designer div.wd-intro__div4 {
	display:flex;
	align-items:center;
	gap:16px;
	container-type:inline-size;
}
.lp-web-designer span.wd-intro__span1 {
	flex:none;
	width:40px;
	height:3px;
	border-radius:3px;
	background:#5C5C5C;
}
.lp-web-designer p.wd-intro__p1 {
	font-family:'Klee One',cursive;
	font-size:min(30px, calc((100cqi - 60px) / 23.5));
	font-weight:600;
	line-height:1.5;
	color:#2A2A2A;
	letter-spacing:.04em;
	white-space:nowrap;
}
.lp-web-designer p.wd-intro__p2 {
	margin:0 0 14px;
	font-size:clamp(15px,1.4vw,18px);
	font-weight:700;
	line-height:1.8;
	text-wrap:pretty;
}
.lp-web-designer h2.wd-intro__h21 {
	font-size:clamp(20px,2vw,30px);
	font-weight:900;
	line-height:1.45;
	letter-spacing:.02em;
}
.lp-web-designer span.wd-intro__span2 {
	background:linear-gradient(transparent 58%,#F5CB3A 58%,#F5CB3A 92%,transparent 92%);
	padding:0 4px;
}
.lp-web-designer p.wd-intro__p3 {
	font-size:16px;
	line-height:1.9;
	text-wrap:pretty;
}
.lp-web-designer div.wd-intro__div5 {
	display:flex;
	flex-direction:column;
	gap:10px;
	font-family:'Klee One',cursive;
	font-size:clamp(18px,2vw,24px);
	line-height:1.7;
}
.lp-web-designer span.wd-intro__span3 {
	background:linear-gradient(transparent 58%,#ebe2b1 58%,#ebe2b1 92%,transparent 92%);
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
	padding:0 4px;
}
.lp-web-designer p.wd-intro__p4 {
	font-size:16px;
	font-weight:700;
	line-height:1.9;
	text-wrap:pretty;
}
.lp-web-designer div.wd-intro__div6 {
	min-width:0;
	aspect-ratio:4/3;
	position:relative;
}
.lp-web-designer img.wd-intro__img1 {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:16px;
}

/* ---------- role ---------- */
.lp-web-designer section.wd-role__section1 {
	padding:88px 24px;
	background:#ECECE8;
	position:relative;
}
.lp-web-designer div.wd-role__div1 {
	position:absolute;
	top:-60px;
	right:-80px;
	width:260px;
	height:260px;
	border-radius:50%;
	background:#F5CB3A;
	opacity:.85;
}
.lp-web-designer div.wd-role__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-web-designer div.wd-role__div3 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-4deg);
	transform-origin:left;
	margin-bottom:8px;
}
.lp-web-designer h2.wd-role__h21 {
	margin:0 0 28px;
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
	line-height:1.4;
	letter-spacing:.02em;
}
.lp-web-designer p.wd-role__p1 {
	margin:0 0 20px;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer p.wd-role__p2 {
	font-size:18px;
	font-weight:700;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer div.wd-role__div4 {
	display:flex;
	flex-direction:column;
	gap:14px;
	padding-top:12px;
}
.lp-web-designer div.wd-role__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-web-designer span.wd-role__span1 {
	flex:none;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#5C5C5C;
}
.lp-web-designer p.wd-role__p3 {
	margin:16px 0 0;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer div.wd-role__div6 {
	max-width:1080px;
	margin:56px auto 0;
	position:relative;
	background:#FFFFFF;
	border-radius:28px;
	padding:clamp(28px,4vw,48px) clamp(24px,4.5vw,52px);
	display:flex;
	flex-wrap:wrap;
	gap:clamp(24px,4vw,48px);
	align-items:stretch;
}
.lp-web-designer div.wd-role__div7 {
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:16px;
	min-width:0;
	flex:1 1 420px;
}
.lp-web-designer div.wd-role__div8 {
	font-family:'Caveat',cursive;
	font-size:30px;
	line-height:1;
	color:#9F8A6E;
	transform:rotate(-4deg);
	transform-origin:left;
}
.lp-web-designer p.wd-role__p4 {
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer strong.wd-role__strong1 {
	font-weight:900;
	background:linear-gradient(transparent 60%,#F5CB3A 60%);
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}
.lp-web-designer div.wd-role__div9 {
	min-width:0;
	flex:0 1 300px;
	min-height:180px;
	position:relative;
}
.lp-web-designer img.wd-role__img1 {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:14px;
}

/* ---------- wanted ---------- */
.lp-web-designer section.wd-wanted__section1 {
	padding:96px 24px;
}
.lp-web-designer div.wd-wanted__div1 {
	max-width:1080px;
	margin:0 auto;
}
.lp-web-designer div.wd-wanted__div2 {
	text-align:center;
	margin-bottom:48px;
}
.lp-web-designer div.wd-wanted__div3 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-3deg);
	margin-bottom:14px;
}
.lp-web-designer h2.wd-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-web-designer span.wd-wanted__span1 {
	white-space:nowrap;
	display:inline-block;
}
.lp-web-designer p.wd-wanted__p1 {
	margin:0 auto 16px;
	max-width:760px;
	text-align:center;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer p.wd-wanted__p2 {
	margin:0 0 36px;
	text-align:center;
	font-size:16px;
	line-height:2;
}
.lp-web-designer div.wd-wanted__div4 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:16px;
}
.lp-web-designer div.wd-wanted__div5 {
	position:relative;
	background:#9F8A6E;
	color:#FFFFFF;
	min-height: 120px;
    padding: 18px 22px 18px 56px;
	display:flex;
	align-items:center;
	overflow:hidden;
}
.lp-web-designer span.wd-wanted__span2 {
	position:absolute;
	left:-38px;
	top:50%;
	transform:translateY(-50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #F7F7F5;
    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-web-designer span.wd-wanted__span3 {
	font-size:17px;
	font-weight:700;
	line-height:1.7;
	text-wrap:pretty;
}
.lp-web-designer p.wd-wanted__p3 {
	margin:36px 0 0;
	text-align:center;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}

/* ---------- jobs ---------- */
.lp-web-designer section.wd-jobs__section1 {
	padding:96px 24px;
	/* 背景画像は上端に合わせて横幅いっぱい（狭い画面では1000px幅で中央を見せる）。画像より下は同じ青で続ける */
	background:#5C5C5C url(../images/jobs-bg.png) no-repeat center top / max(100%, 1000px) auto;
	color:#FFFFFF;
}
.lp-web-designer div.wd-jobs__div1 {
	max-width:1080px;
	margin:0 auto;
}
.lp-web-designer div.wd-jobs__div2 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#F5CB3A;
	transform:rotate(-4deg);
	transform-origin:left;
}
.lp-web-designer h2.wd-jobs__h21 {
	margin:4px 0 40px;
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
	line-height:1.4;
}
.lp-web-designer div.wd-jobs__div3 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:20px;
}
.lp-web-designer div.wd-jobs__div4 {
	background:#FFFFFF;
	color:#1E1D1A;
	border-radius:14px;
	padding:28px 24px 28px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	text-align:center;
	box-shadow:0 6px 20px rgba(34,34,34,.12);
}
.lp-web-designer div.wd-jobs__div5 {
	width:150px;
	height:150px;
	position:relative;
	margin:-10px 0 -14px;
}
.lp-web-designer img.wd-jobs__img1 {
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
}
.lp-web-designer span.wd-jobs__span1 {
	font-size:19px;
	font-weight:900;
	line-height:1.55;
	text-wrap:balance;
}
.lp-web-designer span.wd-jobs__span2 {
	width:40px;
	height:4px;
	border-radius:4px;
	background:#F5CB3A;
}
.lp-web-designer span.wd-jobs__span3 {
	font-size:15px;
	line-height:1.85;
	text-align:left;
	text-wrap:pretty;
}

/* ---------- results ---------- */
.lp-web-designer section.wd-results__section1 {
	padding:96px 24px;
	display:flex;
	flex-direction:column;
	gap:clamp(64px,8vw,104px);
	position:relative;
	isolation:isolate;
}
/* 右端に幾何学モチーフ（透過PNG）。薄く（opacity）・小さめ（高さの60%）に敷き、中身の後ろに回す */
.lp-web-designer section.wd-results__section1::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:url(../images/results-bg.png) no-repeat right 100px / auto 60%;
	opacity:.15;
	pointer-events:none;
	background-position:right -80px center;
}
.lp-web-designer div.wd-results__div1 {
	width:100%;
	max-width:1080px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
	gap:clamp(32px,4.5vw,64px);
	align-items:start; /* 写真を横の文章の上端に揃える（Design for results・Grow the brand 共通） */
}
/* 見出し〜導入文は横幅いっぱい、その下を2列にする（Design for results：右に写真／Grow the brand：左に写真） */
.lp-web-designer div.wd-results__div10 {
	width:100%;
	max-width:1080px;
	margin:0 auto;
}
.lp-web-designer div.wd-results__div2 {
	min-width:0;
	position:relative;
	aspect-ratio:4/3;
	order:1;
}
.lp-web-designer img.wd-results__img1 {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:16px;
}
.lp-web-designer div.wd-results__div3 {
	min-width:0;
}
.lp-web-designer div.wd-results__div4 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-4deg);
	transform-origin:left;
}
.lp-web-designer h2.wd-results__h21 {
	margin:4px 0 24px;
	font-size:clamp(24px,3.2vw,32px);
	font-weight:900;
	line-height:1.5;
}
.lp-web-designer p.wd-results__p1 {
	margin:0 0 20px;
	font-size:16px;
	line-height:2;
}
.lp-web-designer div.wd-results__div5 {
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:20px;
}
.lp-web-designer div.wd-results__div6 {
	background:#ECECE8;
	border-radius:4px;
	padding:12px 16px;
	font-size:15px;
	font-weight:700;
	line-height:1.6;
	display:flex;
	gap:12px;
	align-items:center;
}
.lp-web-designer span.wd-results__span1 {
	flex:none;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#5C5C5C;
}
.lp-web-designer p.wd-results__p2 {
	margin:0 0 16px;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer p.wd-results__p3 {
	font-size:16px;
	font-weight:700;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer strong.wd-results__strong1 {
	background:linear-gradient(transparent 60%,#F5CB3A 60%);
}
.lp-web-designer p.wd-results__p4 {
	margin:0 0 20px;
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}
.lp-web-designer p.wd-results__p5 {
	margin:0 0 12px;
	font-size:15px;
	font-weight:700;
}
.lp-web-designer div.wd-results__div7 {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:16px;
}
.lp-web-designer span.wd-results__span2 {
	font-size:14px;
	font-weight:700;
	line-height:1.5;
	padding:8px 14px;
	border-radius:999px;
	background:#FFFFFF;
	border:1.5px solid #5C5C5C;
	color:#2A2A2A;
}
.lp-web-designer p.wd-results__p6 {
	margin:0 0 16px;
	font-size:16px;
	line-height:2;
}
/* Grow the brand：2列のときは写真が左、1列（スマホ等）では文章→写真の順にする。
   右から並べて折り返すので、HTML の順（文章→写真）のまま両方を満たせる */
.lp-web-designer div.wd-results__div9 {
	display:flex;
	flex-direction:row-reverse;
	flex-wrap:wrap;
}
.lp-web-designer div.wd-results__div9 > div {
	flex:1 1 min(100%,420px);
}
.lp-web-designer div.wd-results__div8 {
	min-width:0;
	position:relative;
	aspect-ratio:4/3;
}

/* ---------- persona ---------- */
.lp-web-designer section.wd-persona__section1 {
	padding:96px 24px;
	background:#ECECE8;
	position:relative;
}
.lp-web-designer div.wd-persona__div1 {
	position:absolute;
	bottom:-90px;
	left:-90px;
	width:240px;
	height:240px;
	border-radius:50%;
	background:#F5CB3A;
	opacity:.85;
}
.lp-web-designer div.wd-persona__div2 {
	max-width:960px;
	margin:0 auto;
	position:relative;
}
.lp-web-designer div.wd-persona__div3 {
	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-web-designer div.wd-persona__div4 {
	position:absolute;
	right:0;
	bottom:0;
	width:clamp(120px,14vw,170px);
}
.lp-web-designer img.wd-persona__img1 {
	width:100%;
	height:auto;
	display:block;
}
.lp-web-designer img.wd-persona__img2 {
	position:absolute;
	left:4%;
	top:4%;
	width:17%;
	height:auto;
	transform-origin:100% 100%;
}
.lp-web-designer div.wd-persona__div5 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-3deg);
	margin-bottom:14px;
}
.lp-web-designer h2.wd-persona__h21 {
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
	line-height:1.4;
}
.lp-web-designer span.wd-persona__span1 {
	white-space:nowrap;
	display:inline-block;
}
.lp-web-designer div.wd-persona__div6 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
	gap:14px 20px;
}
.lp-web-designer div.wd-persona__div7 {
	background:#FFFFFF;
	border-radius:10px;
	padding:10px 20px 10px 12px;
	display:flex;
	gap:14px;
	align-items:center;
	box-shadow:0 2px 10px rgba(34,34,34,.06);
	min-height:86px;
}
.lp-web-designer div.wd-persona__div8 {
	flex:none;
	width:72px;
	height:72px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}
.lp-web-designer img.wd-persona__img3 {
	width:72px;
	height:72px;
	display:block;
	object-fit:contain;
	transform:scale(1.15);
}
.lp-web-designer span.wd-persona__span2 {
	flex:none;
	width:28px;
	height:28px;
	border-radius:50%;
	background:#F5CB3A;
	color:#222222;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	font-weight:900;
}
.lp-web-designer span.wd-persona__span3 {
	font-size:16px;
	font-weight:700;
	line-height:1.6;
	color:#222222;
}
.lp-web-designer div.wd-persona__div9 {
	margin-top:36px;
	text-align:center;
}
.lp-web-designer p.wd-persona__p1 {
	margin:0 0 6px;
	font-size:17px;
	font-weight:900;
}
.lp-web-designer p.wd-persona__p2 {
	font-size:16px;
	line-height:2;
	text-wrap:pretty;
}

/* ---------- merits ---------- */
.lp-web-designer section.wd-merits__section1 {
	padding:96px 24px;
}
.lp-web-designer div.wd-merits__div1 {
	max-width:1080px;
	margin:0 auto;
}
.lp-web-designer div.wd-merits__div2 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-4deg);
	transform-origin:left;
}
.lp-web-designer h2.wd-merits__h21 {
	margin:4px 0 40px;
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
	line-height:1.4;
}
.lp-web-designer div.wd-merits__div3 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
	gap:20px;
}
.lp-web-designer div.wd-merits__div4 {
	background:#FFFFFF;
	border-radius:14px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:0 2px 0 rgba(30,29,26,.06);
	border:1px solid #E6E6E1;
}
.lp-web-designer div.wd-merits__div5 {
	position:relative;
	aspect-ratio:16/9;
}
.lp-web-designer img.wd-merits__img1 {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.lp-web-designer span.wd-merits__span1 {
	position:absolute;
	left:16px;
	top:16px;
	pointer-events:none;
	background:#F5CB3A;
	color:#1E1D1A;
	font-family:'Josefin Sans',sans-serif;
	font-weight:600;
	font-size:18px;
	line-height:1;
	padding:10px 12px 8px;
	border-radius:4px;
}
.lp-web-designer div.wd-merits__div6 {
	padding:22px 24px 26px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.lp-web-designer span.wd-merits__span2 {
	font-size:18px;
	font-weight:900;
	line-height:1.55;
	text-wrap:balance;
}
.lp-web-designer span.wd-merits__span3 {
	font-size:15px;
	line-height:1.85;
	text-wrap:pretty;
}

/* ---------- terms ---------- */
.lp-web-designer section.wd-terms__section1 {
	padding:96px 24px;
	background:#ECECE8;
}
.lp-web-designer div.wd-terms__div1 {
	max-width:860px;
	margin:0 auto;
}
.lp-web-designer div.wd-terms__div2 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-4deg);
	transform-origin:left;
}
.lp-web-designer h2.wd-terms__h21 {
	margin:4px 0 32px;
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
	line-height:1.4;
}
.lp-web-designer div.wd-terms__div3 {
	border-top:2px solid #1E1D1A;
	background:#FFFFFF;
}
.lp-web-designer div.wd-terms__div4 {
	display:grid;
	grid-template-columns:minmax(110px,180px) minmax(0,1fr);
	gap:16px;
	padding:20px 20px;
	border-bottom:1px solid #D6D6D0;
}
.lp-web-designer span.wd-terms__span1 {
	font-size:15px;
	font-weight:900;
	color:#2A2A2A;
}
.lp-web-designer div.wd-terms__div5 {
	display:flex;
	flex-direction:column;
	gap:4px;
}
.lp-web-designer span.wd-terms__span2 {
	font-size:16px;
	line-height:1.7;
}

/* ---------- apply ---------- */
.lp-web-designer section.wd-apply__section1 {
	padding:96px 24px;
}
.lp-web-designer div.wd-apply__div1 {
	max-width:960px;
	margin:0 auto;
}
.lp-web-designer div.wd-apply__div2 {
	text-align:center;
	margin-bottom:40px;
}
.lp-web-designer div.wd-apply__div3 {
	font-family:'Caveat',cursive;
	font-size:30px;
	color:#9F8A6E;
	transform:rotate(-3deg);
	margin-bottom:24px;
}
.lp-web-designer h2.wd-apply__h21 {
	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-web-designer p.wd-apply__p1 {
	margin:0 0 24px;
	text-align:center;
	font-size:16px;
	font-weight:700;
	line-height:2;
}
.lp-web-designer div.wd-apply__div4 {
	background:#FFFFFF;
	border-radius:6px;
	border:1px solid #E6E6E1;
	padding:clamp(24px,4vw,48px);
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
	column-gap:40px;
}
.lp-web-designer div.wd-apply__div5 {
	display:flex;
	gap:16px;
	align-items:baseline;
	padding:14px 0;
	border-bottom:1px dashed #D6D6D0;
}
.lp-web-designer span.wd-apply__span1 {
	flex:none;
	font-family:'Josefin Sans',sans-serif;
	font-weight:600;
	font-size:15px;
	color:#3D3D3D;
	width:24px;
}
.lp-web-designer span.wd-apply__span2 {
	font-size:16px;
	line-height:1.6;
}
.lp-web-designer p.wd-apply__p2 {
	margin:32px 0 12px;
	text-align:center;
	font-size:17px;
	font-weight:700;
	line-height:1.9;
	text-wrap:pretty;
}
.lp-web-designer p.wd-apply__p3 {
	text-align:center;
	font-size:15px;
	line-height:1.9;
	color:#5A5650;
	text-wrap:pretty;
}

/* ---------- closing ---------- */
.lp-web-designer section.wd-closing__section1 {
	padding:112px 24px 96px;
	background:#1E1D1A;
	color:#F7F7F5;
	position:relative;
	overflow:hidden;
}
/* 最後に：写真（closing-bg.jpg）をセクションいっぱいに拡大して、暗い背景の上に薄く敷く。
 * 濃さは opacity で調整。黄色・青の丸と文章は、この後ろに書かれているので写真より上に出る */
.lp-web-designer section.wd-closing__section1::before {
	content:"";
	position:absolute;
	inset:0;
	background:url(../images/closing-bg.jpg) center / cover no-repeat;
	opacity:.15;
}
.lp-web-designer div.wd-closing__div1 {
	position:absolute;
	top:-120px;
	right:-100px;
	width:340px;
	height:340px;
	border-radius:50%;
	background:#F5CB3A;
	opacity:.9;
}
.lp-web-designer div.wd-closing__div2 {
	position:absolute;
	bottom:40px;
	left:-60px;
	width:180px;
	height:180px;
	border-radius:50%;
	background:#5C5C5C;
	opacity:.7;
}
.lp-web-designer div.wd-closing__div3 {
	max-width:820px;
	margin:0 auto;
	position:relative;
	text-align:center;
	/* 背景の写真に文字が埋もれないよう、文字の周りに薄い影を付けて輪郭をはっきりさせる。
	 * 暗い背景の白文字は antialiased だと細く見えるので、通常の描画（auto）に戻して少し太らせる */
	text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.5);
	-webkit-font-smoothing:auto;
}
/* 黄色のボタンの文字（濃い色）には影を付けない */
.lp-web-designer div.wd-closing__div3 a.wd-closing__a1 {
	text-shadow:none;
}
.lp-web-designer div.wd-closing__div4 {
	font-family:'Caveat',cursive;
	font-size:34px;
	color:#F5CB3A;
	transform:rotate(-3deg);
	margin-bottom:14px;
}
.lp-web-designer h2.wd-closing__h21 {
	margin:8px 0 36px;
	font-size:clamp(28px,4vw,42px);
	font-weight:900;
}
.lp-web-designer p.wd-closing__p1 {
	margin:0 0 20px;
	font-size:17px;
	line-height:2.1;
	text-wrap:pretty;
}
.lp-web-designer p.wd-closing__p2 {
	margin:0 0 50px;
	font-size:17px;
	line-height:2.1;
	text-wrap:pretty;
}
.lp-web-designer div.wd-closing__div5 {
	display:flex;
	flex-direction:column;
	gap:20px;
	align-items:center;
	margin-bottom:50px;
	font-family:'Klee One',cursive;
	font-size:clamp(22px,2.6vw,25px);
	line-height:1.7;
	text-wrap:balance;
}
.lp-web-designer p.wd-closing__p3 {
	margin:0 0 40px;
	font-size:18px;
	/*font-weight:700;*/
	text-wrap:pretty;
}
.lp-web-designer a.wd-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-web-designer span.wd-closing__span1 {
	font-size:24px;
}
.lp-web-designer div.wd-closing__div6 {
	margin-top:72px;
	font-family:'Josefin Sans',sans-serif;
	font-size:12px;
	letter-spacing:.4em;
	color:#A39E92;
}

/* ---------- sticky ---------- */
a.wd-sticky__a1 {
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:10;
	display:flex;
	white-space:nowrap;
	align-items:center;
	gap:12px;
	background:#F5CB3A;
	color:#1E1D1A;
	text-decoration:none;
	font-size:15px;
	font-weight:900;
	padding:16px 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.wd-sticky__a1.is-show {
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	transition:opacity .4s ease, transform .4s ease, visibility 0s;
}

/* ---------- スクロールアニメーション（video-creator と同じ動き） ----------
 * 画面に2割入ったらスクリプトが対象に .is-inview を付ける（一度出したら戻さない）。
 * 初期状態（隠す指定）は、スクリプトが動いたとき（.is-anim-ready が付いたとき）だけ効かせる＝スクリプトが動かなくても内容は見える。
 * 写真が画面外から入っても、.lp-web-designer の overflow:hidden で横スクロールは出ない */
/* intro（Our Message）：文章は下から、写真は右から */
.lp-web-designer.is-anim-ready div.wd-intro__div2 {
	opacity:0;
	transform:translateY(40px);
	transition:opacity 1.5s ease, transform 1.5s ease;
}
.lp-web-designer.is-anim-ready div.wd-intro__div6 {
	opacity:0;
	transform:translateX(80px);
	transition:opacity .9s ease .2s, transform .9s ease .2s;
}
/* role（Our Role）：左のかたまりは下から、右の5項目と一文は下から順番に（0.25秒ずつずらす） */
.lp-web-designer.is-anim-ready div.wd-role__div2 > div:first-child {
	opacity:0;
	transform:translateY(40px);
	transition:opacity 1.5s ease, transform 1.5s ease;
}
.lp-web-designer.is-anim-ready div.wd-role__div4 > * {
	opacity:0;
	transform:translateY(30px);
	transition:opacity 1s ease, transform 1s ease;
}
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(1) { transition-delay:.4s; }
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(2) { transition-delay:.65s; }
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(3) { transition-delay:.9s; }
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(4) { transition-delay:1.15s; }
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(5) { transition-delay:1.4s; }
.lp-web-designer.is-anim-ready div.wd-role__div4 > :nth-child(6) { transition-delay:1.65s; }
/* results（Design for results・Grow the brand）：ブロックごとに画面に入ったら .is-inview が付く。
 * 見出し〜導入文と文章は下から、写真は外側から（1つ目は右から・2つ目は左から） */
.lp-web-designer.is-anim-ready div.wd-results__div10 > :not(.wd-results__div1),
.lp-web-designer.is-anim-ready div.wd-results__div10 div.wd-results__div3 {
	opacity:0;
	transform:translateY(40px);
	transition:opacity 1.5s ease, transform 1.5s ease;
}
.lp-web-designer.is-anim-ready div.wd-results__div2 {
	opacity:0;
	transform:translateX(80px);
	transition:opacity 1.2s ease .2s, transform 1.2s ease .2s;
}
.lp-web-designer.is-anim-ready div.wd-results__div8 {
	opacity:0;
	transform:translateX(-80px);
	transition:opacity 1.2s ease .2s, transform 1.2s ease .2s;
}
.lp-web-designer.is-anim-ready section.is-inview div.wd-intro__div2,
.lp-web-designer.is-anim-ready section.is-inview div.wd-intro__div6,
.lp-web-designer.is-anim-ready section.is-inview div.wd-role__div2 > div:first-child,
.lp-web-designer.is-anim-ready section.is-inview div.wd-role__div4 > *,
.lp-web-designer.is-anim-ready div.wd-results__div10.is-inview > :not(.wd-results__div1),
.lp-web-designer.is-anim-ready div.wd-results__div10.is-inview div.wd-results__div3,
.lp-web-designer.is-anim-ready div.is-inview div.wd-results__div2,
.lp-web-designer.is-anim-ready div.is-inview div.wd-results__div8 {
	opacity:1;
	transform:none;
}
/* persona（このような方を求めています）：見出し横の人物イラストが下からニュっと飛び出す（少し行き過ぎて戻る動き）。
 * スマホでは囲み（div4）の中央寄せに transform を使っているので、イラストは translate・scale で動かす */
.lp-web-designer.is-anim-ready img.wd-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-web-designer.is-anim-ready div.is-inview img.wd-persona__img1 {
	opacity:1;
	translate:none;
	scale:none;
}
/* 頭の左上の飾り：人物が出終わったころ（約1.1秒後）にポンと出て、ピクピクとひねる動きを3回くり返す */
.lp-web-designer.is-anim-ready img.wd-persona__img2 {
	opacity:0;
}
.lp-web-designer.is-anim-ready div.is-inview img.wd-persona__img2 {
	animation:wdPersonaAccentIn .3s ease-out 1.1s forwards, wdPersonaAccentWiggle 1.6s steps(1,end) 1.4s 3;
}
@keyframes wdPersonaAccentIn {
	from { opacity:0; scale:.5; }
	to   { opacity:1; scale:1; }
}
@keyframes wdPersonaAccentWiggle {
	0%, 50%, 100% { rotate:0deg; }
	10% { rotate:-7deg; }
	20% { rotate:3deg; }
	30% { rotate:-5deg; }
	40% { rotate:2deg; }
}
/* 「視差効果を減らす」設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
	.lp-web-designer.is-anim-ready div.wd-intro__div2,
	.lp-web-designer.is-anim-ready div.wd-intro__div6,
	.lp-web-designer.is-anim-ready div.wd-role__div2 > div:first-child,
	.lp-web-designer.is-anim-ready div.wd-role__div4 > *,
	.lp-web-designer.is-anim-ready div.wd-results__div10 > :not(.wd-results__div1),
	.lp-web-designer.is-anim-ready div.wd-results__div10 div.wd-results__div3,
	.lp-web-designer.is-anim-ready div.wd-results__div2,
	.lp-web-designer.is-anim-ready div.wd-results__div8 {
		opacity:1;
		transform:none;
		transition:none;
	}
	.lp-web-designer.is-anim-ready img.wd-persona__img1 {
		opacity:1;
		translate:none;
		scale:none;
		transition:none;
	}
	.lp-web-designer.is-anim-ready img.wd-persona__img2,
	.lp-web-designer.is-anim-ready div.is-inview img.wd-persona__img2 {
		opacity:1;
		animation:none;
	}
}

/* ---------- pagetop（左下） ---------- */
/* 出し入れは「応募する」と同じく .is-show の付け外しで、透明度と位置で行う */
a.wd-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.wd-pagetop__a1.is-show {
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	transition:opacity .4s ease, transform .4s ease, visibility 0s, background .2s;
}
a.wd-pagetop__a1:hover {
	background:#3D3D3D;
	color:#FFFFFF;
}
.lp-web-designer br.br-sp{display:none}

/* ---------- レスポンシブ ---------- */
@media (max-width:700px){
	.lp-web-designer br.br-pc{display:none}
	.lp-web-designer br.br-sp{display:inline}
	.lp-web-designer .sp-left{text-align:left !important}
	/* persona：見出し下に人物イラストを中央配置 */
	.lp-web-designer div.wd-persona__div3{padding-bottom:120px}
	.lp-web-designer div.wd-persona__div4{right:50%;transform:translateX(50%);width:110px}
	/* terms：項目名の列を狭めて内容の幅を広げる（「勤務時間・休日」が1行に収まる幅） */
	.lp-web-designer div.wd-terms__div4{grid-template-columns:104px minmax(0,1fr);gap:12px}
	.lp-web-designer span.wd-terms__span1{font-size:14px}
	a.wd-pagetop__a1{left:12px;bottom:12px;width:44px;height:44px}
	/* hero：スマホ用看板（web_sp）の「WEBデザイナーに応募する」ボタンの位置にリンクを重ねる */
	.lp-web-designer a.wd-hero__a1{left:13%;top:88.2%;width:75.5%;height:7%}
	/* results：縦に長くなるので、背景の幾何学モチーフは高さ基準でなく画面幅の80%で敷く */
	.lp-web-designer section.wd-results__section1::before{background-size:80% auto;background-position:right -40px center}
}