@charset "UTF-8";
/* ============================================================
   デジタルレクリム株式会社 リニューアル第二案（ブルー案）
   ------------------------------------------------------------
   参照: jmc_recruit/design.md（青4階調＋墨色＋白の世界観）
   ・色やフォントは下の「デザイン変数」を書き換えるだけで反映されます
   ============================================================ */

/* ------------------------------------------------------------
   デザイン変数（design.md 3章・4章の実測値）
------------------------------------------------------------ */
:root{
	--c-primary:   #4D8BFF;   /* プライマリブルー（リンク・ラベル・Menuピル） */
	--c-lightblue: #8CB4FF;   /* ライトブルー（パネル01） */
	--c-slate:     #6C80A6;   /* スレートブルー（パネル02） */
	--c-navy:      #323B4D;   /* ダークネイビー（フッター・最重要見出し） */
	--c-text:      #333333;   /* 本文 */
	--c-line:      rgba(77,139,255,.22);            /* 罫線 */
	--bg-grad:     linear-gradient(90deg,#FFFFFF 0%,#E7F0FF 50%,#E7F0FF 100%);
	--ease:        cubic-bezier(.4,.4,0,1);         /* 共通イージング */
	--font-jp:     "Zen Kaku Gothic New","Yu Gothic",Meiryo,sans-serif;
	--font-en:     "Prompt","Work Sans",sans-serif; /* 英字ラベル用 */
	--w-content:   1400px;
	--rail-w:      56px;       /* 左の縦書きレール幅 */
}

/* ------------------------------------------------------------
   リセット・基本
------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	color:var(--c-text);
	font-family:var(--font-jp);
	font-size:16px;
	font-weight:500;
	line-height:2;
	letter-spacing:.05em;
	-webkit-font-smoothing:antialiased;
}
/* ページ全体に横方向グラデーションを固定で敷く（design.md 10章） */
body::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:-1;
	background:var(--bg-grad);
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:var(--c-primary); text-decoration:none; transition:.4s var(--ease); }
a:hover{ opacity:.75; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; color:var(--c-navy); line-height:1.5; font-weight:500; }
p{ margin:0; }

.inner{
	margin:0 auto;
	padding:0 5vw;
	width:100%;
	max-width:var(--w-content);
}

/* ------------------------------------------------------------
   左端の縦書きレール（design.md 5章）
------------------------------------------------------------ */
.rail{
	position:fixed;
	top:0; left:0; bottom:0;
	z-index:50;
	width:var(--rail-w);
	border-right:1px solid var(--c-line);
	background:transparent;
}
.rail__site{
	position:absolute;
	top:28px; left:50%;
	transform:translateX(-50%);
	writing-mode:vertical-rl;
	color:var(--c-slate);
	font-family:var(--font-en);
	font-size:11px;
	letter-spacing:.3em;
	white-space:nowrap;
}
.rail__top{
	position:absolute;
	bottom:24px; left:50%;
	transform:translateX(-50%);
	writing-mode:vertical-rl;
	color:var(--c-navy);
	font-family:var(--font-en);
	font-size:11px;
	letter-spacing:.2em;
	white-space:nowrap;
}
main, .site-footer, .cta{ margin-left:var(--rail-w); }

/* ------------------------------------------------------------
   ヘッダー：透過ロゴ＋ピル型Menu（design.md 6章）
------------------------------------------------------------ */
.header{
	position:absolute;
	top:0; left:var(--rail-w); right:0;
	z-index:100;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:22px 32px;
	background:transparent;
}
.header__logo{ display:flex; align-items:center; gap:14px; }
.header__logo img{ width:190px; }
.header__logo span{
	color:var(--c-navy);
	font-family:var(--font-en);
	font-size:13px;
	letter-spacing:.08em;
}
/* ピル型Menuボタン（固定追従） */
.nav-toggle{
	position:fixed;
	top:22px; right:28px;
	z-index:120;
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 10px 14px 24px;
	border:0;
	border-radius:999px;
	background:var(--c-primary);
	color:#fff;
	font-family:var(--font-en);
	font-size:14px;
	letter-spacing:.05em;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(77,139,255,.35);
	transition:.4s var(--ease);
}
.nav-toggle:hover{ transform:scale(1.05); }
.nav-toggle .dots{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:3px;
	width:34px; height:34px;
	border:1px solid rgba(255,255,255,.5);
	border-radius:50%;
}
.nav-toggle .dots i{
	width:3px; height:3px;
	border-radius:50%;
	background:#fff;
	transition:.4s var(--ease);
}
body.nav-open .nav-toggle{ background:var(--c-navy); }

/* 全画面メニュー */
.gnav{
	position:fixed;
	inset:0;
	z-index:110;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:14px;
	background:linear-gradient(135deg, rgba(50,59,77,.97), rgba(77,139,255,.94));
	opacity:0;
	visibility:hidden;
	transition:.4s var(--ease);
}
body.nav-open .gnav{ opacity:1; visibility:visible; }
.gnav a{
	color:#fff;
	font-size:18px;
	letter-spacing:.08em;
}
.gnav .dropdown{ display:flex; gap:22px; margin:-4px 0 6px; }
.gnav .dropdown a{ font-size:13px; color:rgba(255,255,255,.72); }
.gnav .gnav__cta{
	margin-top:18px;
	padding:14px 46px;
	border:1px solid rgba(255,255,255,.6);
	border-radius:999px;
	font-family:var(--font-en);
	letter-spacing:.1em;
}

/* ------------------------------------------------------------
   トップ・ヒーロー（斜めマスク写真コラージュ＋リボン）
------------------------------------------------------------ */
.hero{
	position:relative;
	padding:140px 0 0;
	overflow:hidden;
}
.hero__collage{
	position:relative;
	margin:0 auto;
	max-width:1500px;
	height:560px;
}
/* 平行四辺形フォトマスク（design.md 7章） */
.ph{
	position:absolute;
	overflow:hidden;
	clip-path:polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph--1{ left:4%;  top:180px; width:330px; height:330px; }
.ph--2{ left:36%; top:20px;  width:420px; height:480px; }
.ph--3{ right:14%; top:90px; width:260px; height:200px; }
.ph--4{ right:-3%; top:300px; width:330px; height:300px; }
.ph--5{ left:22%; top:420px; width:240px; height:170px; }
/* リボン（細線の束）と紙吹雪 */
.ribbon{
	position:absolute;
	inset:0;
	z-index:-1;
	width:100%; height:100%;
	pointer-events:none;
}
.confetti i{
	position:absolute;
	display:block;
	background:var(--c-lightblue);
	opacity:.45;
	transform:skewX(-20deg) rotate(8deg);
}
.confetti i:nth-child(1){ left:8%;  top:8%;  width:34px; height:22px; }
.confetti i:nth-child(2){ left:70%; top:6%;  width:48px; height:30px; opacity:.3; }
.confetti i:nth-child(3){ left:90%; top:40%; width:26px; height:16px; }
.confetti i:nth-child(4){ left:30%; top:75%; width:22px; height:14px; opacity:.35; }
.confetti i:nth-child(5){ left:55%; top:88%; width:40px; height:24px; opacity:.25; }
.confetti i:nth-child(6){ left:12%; top:55%; width:18px; height:12px; }

/* キャッチコピー（design.md 4章：88px級・キーワードのみ青字） */
.catch{
	padding:70px 0 110px;
}
.catch h1, .catch__title{
	color:var(--c-navy);
	font-size:clamp(36px, 4.6vw, 88px);
	font-weight:500;
	letter-spacing:-.01em;
	line-height:1.3;
}
.catch em{ font-style:normal; color:var(--c-primary); }
.catch__lead{
	margin:54px 0 0;
	max-width:640px;
	font-size:15px;
	line-height:2.4;
}
.catch__btns{ display:flex; gap:28px; margin:48px 0 0; }

/* ------------------------------------------------------------
   セクション共通
------------------------------------------------------------ */
.section{ padding:130px 0; }
.section--alt{ background:rgba(255,255,255,.45); }
/* 英字ラベル＋大見出し */
.sec-head{ margin:0 0 64px; }
.sec-head--center{ text-align:center; }
.sec-head__en{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 14px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:15px;
	font-weight:400;
	letter-spacing:.06em;
}
.sec-head--center .sec-head__en{ justify-content:center; }
.sec-head__en::before{
	content:"";
	width:18px; height:12px;
	background:
		linear-gradient(var(--c-primary),var(--c-primary)) 0 0/18px 2px no-repeat,
		linear-gradient(var(--c-lightblue),var(--c-lightblue)) 4px 5px/14px 2px no-repeat,
		linear-gradient(var(--c-lightblue),var(--c-lightblue)) 8px 10px/10px 2px no-repeat;
}
.sec-head h2{
	font-size:clamp(26px, 2.6vw, 40px);
	font-weight:500;
	letter-spacing:.03em;
}
.sec-head__lead{ margin:20px auto 0; max-width:720px; font-size:14px; }

/* スクロールリビール（design.md 8章） */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* 円形矢印（design.md 6章：主要導線） */
.c-arrow{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:74px; height:48px;
	border:1px solid currentColor;
	border-radius:50%;
	font-family:var(--font-en);
	transition:.4s var(--ease);
}
a:hover .c-arrow, .c-arrow:hover{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.view-link{
	display:inline-flex;
	align-items:center;
	gap:16px;
	color:var(--c-navy);
	font-family:var(--font-en);
	font-size:15px;
	letter-spacing:.06em;
}

/* ピル型ボタン（CTA用） */
.btn{
	display:inline-block;
	padding:16px 46px;
	border-radius:999px;
	background:var(--c-primary);
	color:#fff;
	font-size:15px;
	box-shadow:0 10px 30px rgba(77,139,255,.35);
}
.btn--ghost{ background:transparent; border:1px solid var(--c-primary); color:var(--c-primary); box-shadow:none; }
.btn--line{ background:#fff; border:1px solid var(--c-primary); color:var(--c-primary); box-shadow:none; }

/* ------------------------------------------------------------
   全幅カラーパネル（事業紹介。design.md 5章）
------------------------------------------------------------ */
.panel{
	position:relative;
	display:flex;
	align-items:center;
	gap:5vw;
	margin:0 0 28px;
	padding:110px 6vw;
	color:#fff;
	overflow:hidden;
}
.panel--01{ background:var(--c-lightblue); }
.panel--02{ background:var(--c-slate); }
.panel__body{ position:relative; z-index:1; flex:0 0 44%; }
.panel__body h3{ margin:0 0 26px; color:#fff; font-size:clamp(22px,1.9vw,36px); line-height:1.5; }
.panel__body p{ font-size:14px; line-height:2.1; }
.panel__body .c-arrow{ margin:40px 0 0; color:#fff; }
.panel__img{ position:relative; z-index:1; flex:1; }
.panel__img img{ width:100%; height:430px; object-fit:cover; }
/* 巨大ゴースト数字 */
.panel__num{
	position:absolute;
	left:3vw; bottom:-60px;
	color:rgba(255,255,255,.16);
	font-family:var(--font-en);
	font-size:260px;
	font-weight:600;
	line-height:1;
	pointer-events:none;
}
.panel__tag{
	display:inline-block;
	margin:0 0 14px;
	color:rgba(255,255,255,.85);
	font-size:13px;
}
.panel__tag::before{ content:"- "; }

/* ------------------------------------------------------------
   カード・グリッド類（design.md 5章 Recruit Info風 2列）
------------------------------------------------------------ */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--c-line); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.card{
	position:relative;
	display:flex;
	flex-direction:column;
	padding:44px 40px 40px;
	border-bottom:1px solid var(--c-line);
	background:transparent;
}
.cards .card:nth-child(odd){ border-right:1px solid var(--c-line); }
.cards--3 .card:nth-child(odd){ border-right:none; }
.cards--3 .card:not(:nth-child(3n)){ border-right:1px solid var(--c-line); }
.card__num{
	margin:0 0 6px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:13px;
}
.card__num b{ display:block; font-size:34px; font-weight:500; line-height:1.2; }
.card__img{ width:min(46%,260px); margin:0 0 22px; align-self:flex-end; aspect-ratio:16/10; object-fit:cover; }
.card h3{ margin:0 0 10px; font-size:21px; }
.card p{ flex:1; font-size:14px; }
.card__tag{
	align-self:flex-start;
	margin:0 0 10px;
	padding:2px 14px;
	border-radius:999px;
	background:rgba(77,139,255,.2);
	color:var(--c-primary);
	font-size:11px;
}
.card__price{
	margin:16px 0 0;
	padding:12px 0 0;
	border-top:1px solid var(--c-line);
	color:var(--c-primary);
	font-size:14px;
}
.card__link{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:14px;
	margin:20px 0 0;
	color:var(--c-navy);
	font-family:var(--font-en);
	font-size:14px;
}
.card__link::after{
	content:"→";
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px; height:38px;
	border:1px solid var(--c-navy);
	border-radius:50%;
	transition:.4s var(--ease);
}
.card:hover .card__link::after{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }

/* 特徴 3列（罫線区切り） */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--c-line); }
.feature{
	padding:44px 36px;
	border-bottom:1px solid var(--c-line);
}
.features .feature:not(:nth-child(3n)){ border-right:1px solid var(--c-line); }
.feature__num{
	display:block;
	margin:0 0 16px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:14px;
	letter-spacing:.1em;
}
.feature h3{ margin:0 0 14px; font-size:19px; }
.feature p{ font-size:13.5px; }

/* 画像＋テキスト交互（斜めマスク付き） */
.media{ display:flex; align-items:center; gap:6vw; }
.media + .media{ margin-top:110px; }
.media--rev{ flex-direction:row-reverse; }
.media__img{ flex:0 0 44%; }
.media__img img{
	clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.media__body h3{ margin:0 0 20px; font-size:clamp(20px,1.8vw,30px); }
.media__body p{ font-size:14.5px; line-height:2.1; }
.media__note{ margin-top:16px; font-size:12px; color:var(--c-slate); }

/* ステップ */
.steps{ max-width:900px; margin:0 auto; counter-reset:step; border-top:1px solid var(--c-line); }
.step{
	position:relative;
	padding:34px 20px 34px 130px;
	border-bottom:1px solid var(--c-line);
}
.step::before{
	counter-increment:step;
	content:"0" counter(step);
	position:absolute;
	left:16px; top:28px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:34px;
	font-weight:500;
}
.step h3{ margin:0 0 6px; font-size:18px; }
.step p{ font-size:14px; }

/* Q&A */
.qa{ max-width:900px; margin:0 auto; border-top:1px solid var(--c-line); }
.qa__item{ border-bottom:1px solid var(--c-line); }
.qa__item h3{
	position:relative;
	padding:26px 20px 10px 64px;
	font-size:16.5px;
}
.qa__item h3::before{
	content:"Q";
	position:absolute;
	left:18px; top:24px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:20px;
}
.qa__item p{ padding:0 20px 26px 64px; font-size:14px; }

/* 料金プラン */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; align-items:stretch; }
.plan{
	position:relative;
	display:flex;
	flex-direction:column;
	padding:42px 34px 36px;
	border:1px solid var(--c-line);
	background:rgba(255,255,255,.7);
	backdrop-filter:blur(6px);
}
.plan--featured{ border:2px solid var(--c-primary); }
.plan__badge{
	position:absolute;
	top:-15px; left:50%;
	transform:translateX(-50%);
	padding:4px 22px;
	border-radius:999px;
	background:var(--c-primary);
	color:#fff;
	font-size:12px;
	letter-spacing:.1em;
}
.plan h3{ margin:0 0 4px; font-size:20px; text-align:center; }
.plan__sub{ margin:0 0 24px; font-size:12px; color:var(--c-slate); text-align:center; }
.plan__price{ margin:0 0 10px; text-align:center; font-size:13px; }
.plan__price b{
	display:block;
	color:var(--c-navy);
	font-family:var(--font-en);
	font-size:30px;
	font-weight:500;
}
.plan__price small{ font-size:12px; color:var(--c-slate); }
.plan ul{
	margin:22px 0 0;
	padding:20px 0 0;
	border-top:1px solid var(--c-line);
	font-size:13px;
}
.plan li{ position:relative; padding:5px 0 5px 24px; }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--c-primary); }
.plan__note{ margin:18px 0 0; font-size:11px; color:var(--c-slate); line-height:1.8; }

/* 仕様テーブル */
.table-wrap{ overflow-x:auto; }
table.spec{
	width:100%;
	border-collapse:collapse;
	background:rgba(255,255,255,.7);
	font-size:14px;
}
table.spec th, table.spec td{
	padding:16px 18px;
	border-bottom:1px solid var(--c-line);
	text-align:center;
}
table.spec thead th{ background:var(--c-navy); color:#fff; font-weight:500; }
table.spec td:first-child{ background:rgba(77,139,255,.08); text-align:left; min-width:150px; }

/* 実績グリッド */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; }
.work{ background:transparent; }
.work img{
	width:100%;
	aspect-ratio:7/5;
	object-fit:cover;
	clip-path:polygon(5% 0, 100% 0, 95% 100%, 0 100%);
	transition:.4s var(--ease);
}
.work:hover img{ transform:translateY(-6px); }
.work__body{ padding:16px 6px 0; }
.work__body h3{ font-size:15px; }
.work__cat{ display:block; margin-top:2px; color:var(--c-primary); font-size:12px; font-family:var(--font-en); }

/* お知らせ */
.news-list{ max-width:900px; margin:0 auto; border-top:1px solid var(--c-line); }
.news-list a{
	display:flex;
	gap:26px;
	align-items:baseline;
	padding:24px 10px;
	border-bottom:1px solid var(--c-line);
	color:var(--c-text);
	font-size:14px;
}
.news-list time{ flex:0 0 7em; color:var(--c-slate); font-family:var(--font-en); }
.news-list .news-cat{
	flex:0 0 auto;
	padding:2px 14px;
	border-radius:999px;
	background:rgba(77,139,255,.2);
	color:var(--c-primary);
	font-size:11px;
}

/* 会社概要テーブル */
.about-table{
	width:100%;
	max-width:900px;
	margin:0 auto;
	border-collapse:collapse;
	font-size:15px;
}
.about-table th, .about-table td{
	padding:26px 18px;
	border-bottom:1px solid var(--c-line);
	text-align:left;
	vertical-align:top;
}
.about-table th{ width:200px; color:var(--c-navy); white-space:nowrap; }

/* ------------------------------------------------------------
   下層ページのタイトル（明るい背景版に上書き）
------------------------------------------------------------ */
.page-hero{
	position:relative;
	padding:170px 0 60px;
	background:transparent;
	overflow:hidden;
}
.page-hero__bg{ display:none; }   /* 旧・写真背景は使わない */
.page-hero__en{
	display:block;
	margin:0 0 10px;
	color:var(--c-primary);
	font-family:var(--font-en);
	font-size:15px;
	letter-spacing:.08em;
}
.page-hero h1{
	color:var(--c-navy);
	font-size:clamp(34px, 3.6vw, 64px);
	font-weight:500;
	letter-spacing:-.01em;
}
.page-hero__lead{ margin:24px 0 0; max-width:680px; color:var(--c-text); font-size:14.5px; }
.breadcrumb{ padding:10px 0 0; font-size:12px; color:var(--c-slate); }
.breadcrumb a{ color:var(--c-slate); }
.breadcrumb span{ margin:0 8px; }

/* ------------------------------------------------------------
   CTA帯（Join Us風：グラデ＋透かし＋ガラスカード）
------------------------------------------------------------ */
.cta{
	position:relative;
	padding:120px 5vw;
	background:linear-gradient(180deg, var(--c-lightblue), var(--c-primary));
	overflow:hidden;
}
.cta::before{                /* 巨大透かし文字 */
	content:"Contact Contact Contact";
	position:absolute;
	left:-2vw; bottom:-40px;
	color:rgba(255,255,255,.14);
	font-family:var(--font-en);
	font-size:170px;
	font-weight:600;
	letter-spacing:.02em;
	white-space:nowrap;
	pointer-events:none;
}
.cta .inner{
	position:relative;
	padding:56px 6vw;
	border-radius:24px;
	background:rgba(255,255,255,.16);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.35);
	text-align:left;
}
.cta h2{ margin:0 0 10px; color:#fff; font-size:clamp(26px,2.6vw,44px); font-weight:500; }
.cta p{ margin:0 0 30px; color:rgba(255,255,255,.92); font-size:14px; }
.cta .btn{ background:#fff; color:var(--c-primary); box-shadow:0 10px 30px rgba(0,0,0,.15); }
.cta__tel{ margin-top:24px; color:#fff; font-size:13px; }
.cta__tel b{ font-family:var(--font-en); font-size:26px; font-weight:500; letter-spacing:.04em; }

/* ------------------------------------------------------------
   フッター（design.md 6章）
------------------------------------------------------------ */
.footer{ background:var(--c-navy); color:rgba(255,255,255,.78); margin-left:var(--rail-w); }
.footer a{ color:rgba(255,255,255,.78); }
.footer a:hover{ color:#fff; }
.footer__banners{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:18px;
	padding:48px 24px;
	border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__banners img{ width:210px; border-radius:6px; }
.footer__main{
	display:flex;
	justify-content:space-between;
	gap:48px;
	margin:0 auto;
	padding:72px 5vw;
	max-width:var(--w-content);
}
.footer__info img{ width:200px; margin-bottom:22px; background:#fff; padding:14px 18px; border-radius:12px; box-sizing:border-box; }
.footer__info p{ font-size:13px; }
.footer__nav{ display:flex; gap:72px; }
.footer__nav h4{
	margin:0 0 18px;
	color:rgba(255,255,255,.6);
	font-family:var(--font-en);
	font-size:13px;
	font-weight:400;
	letter-spacing:.12em;
}
.footer__nav li{ margin:0 0 12px; font-size:13px; }
.footer__copy{
	padding:22px 24px;
	border-top:1px solid rgba(255,255,255,.12);
	text-align:center;
	color:rgba(255,255,255,.45);
	font-family:var(--font-en);
	font-size:12px;
}

/* お問い合わせフォーム */
.form{ max-width:780px; margin:0 auto; }
.form dl{ margin:0 0 28px; }
.form dt{ margin:0 0 8px; font-size:14px; color:var(--c-navy); }
.form dt .req{
	margin-left:10px;
	padding:1px 10px;
	border-radius:999px;
	background:var(--c-primary);
	color:#fff;
	font-size:11px;
}
.form dd{ margin:0; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea{
	width:100%;
	padding:15px 18px;
	border:1px solid var(--c-line);
	border-radius:12px;
	background:rgba(255,255,255,.85);
	font-family:var(--font-jp);
	font-size:15px;
}
.form input:focus, .form textarea:focus{ outline:2px solid var(--c-primary); border-color:transparent; }
.form .form__submit{ text-align:center; margin-top:44px; }
.form button{
	padding:18px 90px;
	border:0;
	border-radius:999px;
	background:var(--c-primary);
	color:#fff;
	font-family:var(--font-jp);
	font-size:16px;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(77,139,255,.35);
}

/* ------------------------------------------------------------
   レスポンシブ
------------------------------------------------------------ */
@media screen and (max-width: 1024px){
	.cards--3, .features, .plans, .works-grid{ grid-template-columns:repeat(2,1fr); }
	.features .feature:not(:nth-child(3n)){ border-right:none; }
	.features .feature:nth-child(odd){ border-right:1px solid var(--c-line); }
	.panel__num{ font-size:170px; }
}
@media screen and (max-width: 800px){
	:root{ --rail-w:0px; }
	body{ font-size:15px; }
	.rail{ display:none; }
	.section{ padding:72px 0; }
	.header{ left:0; padding:16px 18px; }
	.header__logo img{ width:150px; }
	.nav-toggle{ top:14px; right:14px; padding:11px 8px 11px 18px; }

	.hero{ padding:120px 0 0; }
	.hero__collage{ height:330px; }
	.ph--1{ left:0;   top:120px; width:170px; height:180px; }
	.ph--2{ left:30%; top:10px;  width:230px; height:280px; }
	.ph--3{ right:6%; top:50px;  width:140px; height:110px; }
	.ph--4{ right:-6%; top:190px; width:180px; height:160px; }
	.ph--5{ display:none; }
	.catch{ padding:44px 0 70px; }
	.catch__btns{ flex-direction:column; gap:14px; }
	.catch__btns .btn{ text-align:center; }

	.cards, .cards--3, .features, .plans, .works-grid{ grid-template-columns:1fr; }
	.cards .card, .features .feature{ border-right:none !important; }
	.panel, .media, .media--rev{ flex-direction:column; gap:30px; padding-left:6vw; padding-right:6vw; }
	.panel{ padding-top:70px; padding-bottom:90px; }
	.panel__img img{ height:240px; }
	.panel__num{ font-size:120px; bottom:-26px; }
	.media__img{ flex:none; }
	.footer__main{ flex-direction:column; gap:36px; }
	.footer__nav{ flex-wrap:wrap; gap:28px 44px; }
	.step{ padding:26px 14px 26px 92px; }
	.step::before{ left:10px; }
	.cta::before{ font-size:90px; }
	.cta .inner{ padding:40px 7vw; }
}
@media screen and (max-width: 480px){
	.works-grid{ grid-template-columns:repeat(2,1fr); gap:20px 14px; }
	.work__body h3{ font-size:12px; }
}