@charset "UTF-8";
@charset "utf-8";
.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}

/* ============================================================
   sd-service.css  —  サービス詳細ページ共通スタイル
   ------------------------------------------------------------
   対象: /service/ 配下の sd- 系テンプレート 7本
     sns-operation / ec-mall / intangible-sns / sns-promotion
     system-building / sns-ai-training / flyer
   ------------------------------------------------------------
   収録しているのは「7ページすべてで1文字も差が無かった38ルール」だけです。

   含めていないもの（各テンプレートのインラインCSSに残してください）:
   - :root（CSS変数の定義）… 2ページで --sd-violet が未定義のため
   - 値がページごとにズレている12ルール … 意図的な調整の可能性があるため
   - @media(max-width:900px) … 中身がページごとに異なるため
   詳細は 手順書.md「ページ間でズレているCSS」を参照してください。
   ------------------------------------------------------------
   読み込み順: style.css の後、各ページのインライン <style> の前。
   インライン側が後勝ちになるため、ページ固有の上書きはそのまま効きます。
============================================================ */

/* ---------- 基盤・レイアウト ---------- */
.sd{background:var(--sd-bg);color:var(--sd-txt);font-size:15px;line-height:1.9;position:relative;z-index:2;}
.sd *{box-sizing:border-box;}
.sd-wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.sd section{padding:88px 0;}
.sd section + section{border-top:1px solid #1d1d22;}

/* ---------- 見出し・リード文 ---------- */
.sd-en{font-size:12px;letter-spacing:.22em;color:var(--sd-accent);text-transform:uppercase;font-weight:600;margin:0 0 12px;}
.sd-ttl{font-size:clamp(24px,3vw,34px);line-height:1.5;margin:0 0 14px;font-weight:700;}
.sd-lead{color:var(--sd-sub);font-size:15px;max-width:640px;margin:0 0 44px;}

/* ---------- ボタン ---------- */
.sd-btn:hover{transform:translateY(-2px);opacity:.9;}
.sd-btn--primary{background:var(--sd-accent);color:#111;}
.sd-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- ヒーロー ---------- */
.sd-hero{padding:132px 0 72px;}
/* 固定ヘッダー分の余白を確保 */ .sd-crumb{font-size:12px;color:var(--sd-dim);margin:0 0 36px;}
.sd-crumb a{color:var(--sd-dim);text-decoration:none;}
.sd-hero__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center;}
.sd-hero__studio{font-size:13px;color:var(--sd-accent);letter-spacing:.12em;margin:0 0 16px;font-weight:600;}
.sd-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.45;margin:0 0 18px;font-weight:700;}
.sd-hero__stats{display:grid;gap:14px;}
.sd-stat{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:20px 26px;display:flex;align-items:baseline;gap:16px;}
.sd-stat span{font-size:13px;color:var(--sd-sub);}

/* ---------- 導入企業ロゴ（マーキー） ---------- */
.sd-logos{padding:40px 0 56px;}
.sd-logos__label{font-size:12px;letter-spacing:.14em;color:var(--sd-dim);text-align:center;margin:0 0 26px;}
.sd-logos__ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
.sd-logos__track{display:flex;align-items:center;gap:48px;width:max-content;animation:sd-logo-marquee 30s linear infinite;}
.sd-logos__ticker:hover .sd-logos__track{animation-play-state:paused;}
@keyframes sd-logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 課題カード ---------- */
.sd-prob{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.sd-prob__item b{display:block;font-size:16px;line-height:1.7;margin:0 0 8px;font-weight:700;}
.sd-prob__item p{font-size:13px;color:var(--sd-sub);margin:0;}

/* ---------- フロー ---------- */
.sd-flow{position:relative;max-width:760px;}
.sd-flow::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:var(--sd-line);}
.sd-flow__item:last-child{padding-bottom:0;}
.sd-flow__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px;}
.sd-flow__term{font-size:12px;color:#111;background:var(--sd-accent);border-radius:99px;padding:2px 14px;font-weight:800;white-space:nowrap;}

/* ---------- CTA・フッター周り ---------- */
.sd-cta{text-align:center;background:radial-gradient(ellipse 55% 90% at 50% 100%,#232f11 0%,transparent 70%);}
.sd-cta .sd-lead{margin-left:auto;margin-right:auto;}
.c-ftStmp,.footer{position:relative;z-index:2;}
.c-ftStmp,.c-ftStmp a,.c-ftStmp li{color:#a0a0ab;}

/*!
 * TaTap 採用ページ 追加スタイル
 * theme: tatap / template: page-recruit.php
 * ------------------------------------------------------------
 * 基本デザインは sd-service.css（サービス詳細ページ共通デザインシステム）に
 * 準拠しています。このファイルは、採用ページにしか無いパーツの差分のみ。
 * 読み込み順：style.css → sd-service.css → recruit.css
 * ------------------------------------------------------------
 * 色・角丸・影・余白はすべて sd-* の変数を継承しています。
 * 新しい色は足していません。
 */

/* ---------- 動画（1本のときは中央1カラム） ---------- */
.sd-video.-single{grid-template-columns:1fr;max-width:900px;margin:0 auto;}

/* ---------- 支援企業名（ロゴ画像がないためテキストチップ） ---------- */
.rc-clients{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.rc-clients span{font-size:12.5px;font-weight:700;border:1px solid var(--sd-line);background:var(--sd-panel);border-radius:99px;padding:6px 16px;color:var(--sd-sub);}

/* ---------- 合わない人（sd-menu の ✓ を × に） ---------- */
.rc-unfit li::before{content:"×";color:#c53a4d;font-weight:800;}

/* ---------- メンバーカード（sd-res をベースに、アバターを追加） ---------- */
.rc-member{text-align:left;}
.rc-avatar{width:60px;height:60px;border-radius:50%;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);color:var(--sd-accent-ink);font-weight:800;font-size:18px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;margin:0 0 16px;overflow:hidden;flex:none;}
.rc-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.rc-member em{display:block;}
.rc-member b{display:block;font-size:17px;margin:6px 0 10px;}
.rc-member > p{font-size:12.5px;color:var(--sd-dim);line-height:1.8;margin:0 0 4px;}

/* ---------- 定義表（sd-cmp を2カラムの仕様表として使う） ---------- */
.sd-cmp.-spec{min-width:0;}
.sd-cmp.-spec th{width:210px;background:var(--sd-panel2);font-weight:700;color:var(--sd-txt);font-size:13.5px;text-align:left;vertical-align:top;}
.sd-cmp.-spec td{text-align:left;color:var(--sd-sub);font-size:14px;}
.sd-cmp.-spec td strong{color:var(--sd-txt);font-size:17px;font-weight:800;}
.sd-cmp.-spec tr:last-child th,.sd-cmp.-spec tr:last-child td{border-bottom:none;}
@media(max-width:700px){
  .sd-cmp.-spec,.sd-cmp.-spec tbody,.sd-cmp.-spec tr,.sd-cmp.-spec th,.sd-cmp.-spec td{display:block;width:auto;}
  .sd-cmp.-spec th{border-bottom:none;padding:18px 16px 4px;}
  .sd-cmp.-spec td{padding:0 16px 18px;}
}

/* ---------- 1日の流れ（sd-fnl の時刻表示） ---------- */
.rc-time{flex:0 0 76px;font-weight:800;font-size:15px;color:var(--sd-accent-ink);letter-spacing:.02em;}

/* ---------- エントリーフォーム（白地版） ----------
   sd-service.css の .sd-form は黒面の中に置く前提で暗色になっているため、
   採用ページでは明るい面に置けるよう上書きしています。 */
.sd-form.rc-form{background:var(--sd-panel);border:1px solid var(--sd-line);box-shadow:var(--sd-shadow);border-radius:18px;}
.sd-form.rc-form,.sd-form.rc-form p,.sd-form.rc-form span,.sd-form.rc-form small{color:var(--sd-sub);}
.sd-form.rc-form label{color:var(--sd-txt);display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.6;}
/* 必須／任意のバッジ。ラベル文字より小さく、色で区別する */
.sd-form.rc-form .req,
.sd-form.rc-form .opt{font-size:10.5px;font-weight:800;line-height:1;letter-spacing:.06em;padding:4px 8px;border-radius:4px;flex:none;}
.sd-form.rc-form .req{background:var(--sd-accent);color:#1b2400;}
.sd-form.rc-form .opt{background:var(--sd-panel2);border:1px solid var(--sd-line);color:var(--sd-dim);font-weight:700;}
/* ラジオ・チェックボックスの選択肢ラベルには適用しない */
.sd-form.rc-form .wpcf7-list-item label,
.sd-form.rc-form .accept label{display:inline-flex;font-size:14px;}
.sd-form.rc-form input,.sd-form.rc-form select,.sd-form.rc-form textarea{background:#fff;border:1px solid #c9cddb;color:var(--sd-txt);}
.sd-form.rc-form input::placeholder,.sd-form.rc-form textarea::placeholder{color:#9aa0b0;}
.sd-form.rc-form input:focus,.sd-form.rc-form select:focus,.sd-form.rc-form textarea:focus{border-color:var(--sd-accent-ink);box-shadow:0 0 0 3px rgba(85,110,0,.12);}
.sd-form.rc-form a{color:var(--sd-accent-ink);}
.sd-form.rc-form input[type="checkbox"],.sd-form.rc-form input[type="radio"]{width:auto;accent-color:var(--sd-accent-ink);}
.sd-form.rc-form .wpcf7-list-item{margin:0;}
.sd-form.rc-form .wpcf7-radio,.sd-form.rc-form .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:10px;}
.sd-form.rc-form .wpcf7-list-item label{display:flex;align-items:center;gap:8px;border:1px solid #c9cddb;border-radius:99px;padding:11px 20px;margin:0;font-weight:500;font-size:14px;cursor:pointer;background:#fff;transition:border-color .2s;}
.sd-form.rc-form .wpcf7-list-item label:hover{border-color:var(--sd-accent-ink);}
.sd-form.rc-form input[type="submit"],.sd-form.rc-form .wpcf7-submit{display:block;width:auto;margin:28px auto 0;background:var(--sd-accent);color:#1b2400;border:0;border-radius:99px;padding:16px 46px;font-size:15px;font-weight:800;cursor:pointer;transition:transform .2s,opacity .2s;}
.sd-form.rc-form input[type="submit"]:hover{transform:translateY(-2px);opacity:.92;}
.sd-form.rc-form .wpcf7-not-valid-tip{color:#c53a4d;font-size:12.5px;margin-top:6px;display:block;}
.sd-form.rc-form .wpcf7-response-output{border:1px solid var(--sd-accent-line)!important;background:var(--sd-accent-soft);color:var(--sd-txt);border-radius:12px;padding:14px 18px!important;margin:22px 0 0!important;font-size:14px;}
.sd-form.rc-form .row{margin-bottom:20px;}
.sd-form.rc-form .row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){
  .sd-form.rc-form{padding:28px 22px;}
  .sd-form.rc-form .row.two{grid-template-columns:1fr;}
}

/* ---------- 未確定箇所ハイライト（編集権限者のみ表示） ---------- */
#rc-reviewbar{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;gap:8px;align-items:center;background:var(--sd-dark);color:#f4f4f6;border-radius:99px;padding:8px 8px 8px 18px;font-size:12px;box-shadow:0 6px 24px rgba(16,24,40,.28);}
#rc-reviewbar button{background:var(--sd-accent);color:#1b2400;border:0;border-radius:99px;padding:8px 16px;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit;}
body.rc-show-todo [data-todo]{background:#fff3c4;outline:1px dashed #b58900;outline-offset:2px;}
body.rc-show-todo [data-todo]::after{content:" 要差し替え";font-size:10px;font-weight:800;color:#5a4200;background:#ffd84d;padding:1px 6px;border-radius:4px;white-space:nowrap;}
body.rc-show-todo [data-assumed]{background:#e6efff;outline:1px dashed #6d8fd0;outline-offset:2px;}
body.rc-show-todo [data-assumed]::after{content:" 仮置き・要確認";font-size:10px;font-weight:800;color:#123a7a;background:#b7cdf5;padding:1px 6px;border-radius:4px;white-space:nowrap;}

/* ---------- 固定ヘッダー分のアンカーオフセット ---------- */
.sd section[id]{scroll-margin-top:96px;}