/* スリーテック採用LP — Dr.Playful の style.css(無改変)の後に読み込む追加レイヤー。
   値はすべて参考サイトの 375px 実測値(rem固定帯域)から取っている。 */
:root {
  /* 指定カラー: ベース=砂 #F7F3E8 / メイン=地面の茶 #ac4d00・安全の緑 #45C11F / アクセント=工事の黄 #F2C230
     Dr.Playful の 赤→茶 / 青→黄 / 緑→緑 / 白→砂 に対応させる(黄の面・帯の文字は茶) */
  --color-red: #ac4d00; --color-blue: #F2C230; --color-green: #45C11F; --color-green-light: #45C11F; --color-green-semi: #45C11F; --color-white: #F7F3E8;
  --header-height: 56px;
  /* ブランドシンボル: 地層(改良した地盤)のアイコン。Dr.Playful のキャラシルエットと同じ使い方(ボタン両端・帯・浮遊) */
  --lp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Crect width='16' height='2.6' rx='1.3'/%3E%3Crect x='2.5' y='4.7' width='11' height='2.6' rx='1.3'/%3E%3Crect x='5' y='9.4' width='6' height='2.6' rx='1.3'/%3E%3C/svg%3E");
  --lp-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 0h10L5 8z' fill='%23ac4d00'/%3E%3C/svg%3E");
}
/* ページ全体を #swipe-container(画面いっぱいの箱)でスクロールする(IXCOORE 方式)。document は動かさない */
html, body { height: 100%; overflow: hidden; scroll-behavior: auto !important; }
#swipe-container { position: fixed; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: none; scroll-padding-top: var(--header-height); }
.l-main { padding-top: 0 !important; overflow: visible; height: 100%; }

/* ---------- ヘッダー: 左ロゴ / 右に募集要項・エントリー(既存 .c-btn の見た目) ---------- */
.l-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.m-header { height: var(--header-height); padding: 0 20px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-red); }
.m-header-logo { max-width: none; flex: 0 1 auto; min-width: 0; }
.m-header-logo__title { font-size: 0; margin: 0; }
.lp-logo { display: inline-flex; align-items: center; gap: 8px; line-height: 1; color: var(--color-white); text-decoration: none; white-space: nowrap; }
.lp-logo__mark { width: 22px; height: auto; flex: 0 0 auto; fill: var(--color-blue); }
.lp-logo__text { display: flex; flex-direction: column; align-items: flex-start; }
.lp-logo b { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .02em; line-height: 1; }
.lp-logo small { font-family: Poppins, sans-serif; font-weight: 800; font-size: 8px; letter-spacing: .24em; line-height: 1; margin-top: 4px; }
.m-header__cta { display: flex; align-items: center; flex-wrap: nowrap; flex: 0 0 auto; gap: 8px; }
.m-header__cta > .c-btn.header-cta {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
  width: auto; height: auto; min-width: 0; margin: 0;
  font-size: 13px; line-height: 1.25; letter-spacing: .04em; white-space: nowrap; text-align: center;
  padding: .5em .85em .55em; min-block-size: 2.45em;
}
.m-header__cta > .c-btn.header-cta:before, .m-header__cta > .c-btn.header-cta:after { content: none; }
.m-header__cta > .c-btn.header-cta > .header-cta__label { display: block; font: inherit; line-height: inherit; margin: 0; padding: 0; }
@media (max-width: 359px) {
  .m-header { padding: 0 12px 0 16px; }
  .m-header__cta > .c-btn.header-cta { padding-inline: .72em; }
  .lp-logo b { font-size: 12px; }
}

/* ---------- 1画面セクション ---------- */
.swipe-section {
  position: relative; box-sizing: border-box; width: 100%;
  height: 100%; min-height: 100%; max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: safe center;
  padding: 0 0 var(--header-height); background: var(--color-white); color: #000;
}
.swipe-section:first-child { padding: var(--header-height) 0 0; }
.swipe-section.is-long-section { height: auto; min-height: 100%; max-height: none; overflow: visible; overflow-x: clip; justify-content: flex-start; padding-bottom: 0; }

.lp-inner { position: relative; z-index: 3; width: 100%; max-width: 375px; margin: 0 auto; padding: var(--bh, 0) 20px 0; box-sizing: border-box; text-align: center; }
.is-long-section .lp-inner { padding-top: calc(var(--bh, 0px) + var(--header-height)); padding-bottom: 56px; }

/* 波帯(Dr.Playful .top-svg と同じ構造。幅は375設計値の約0.8倍) */
.lp-band { position: absolute; left: 50%; top: 0; height: 100%; width: var(--bw); transform: translateX(-50%); pointer-events: none; z-index: 1; }
.lp-band svg { position: absolute; left: 0; width: 100%; height: auto; }
.lp-band .top-svg__top { top: 0; }
.lp-band .top-svg__bottom { bottom: 0; }
.swipe-section:not(:first-child) .lp-band.-bottom .top-svg__bottom { bottom: var(--header-height); }
.lp-inner { padding-bottom: var(--bb, 0px); }

/* 文字スタイル(実測: 見出し18〜19px/500、本文13〜14px/1.5、注記10px) */

.lp-text { font-size: 14px; line-height: 1.6; margin: 14px 0 0; }

.lp-c-red { color: var(--color-red); }

/* ---------- KV: 多色見出し(HAVE A NICE TOOTH の文字版)＋赤い波帯 ---------- */
.lp-kv .lp-inner { padding-bottom: 150px; }

/* ボタン両端のシンボルをキャラ→地層に */
.c-btn { font-family: inherit; cursor: pointer; }
.c-btn::before, .c-btn::after, .c-btn__primary::before, .c-btn__primary::after{ -webkit-mask-image: var(--lp-ico); mask-image: var(--lp-ico); background: var(--color-red); }

.c-btn__primary:hover::before, .c-btn__primary:hover::after{ background: var(--color-white); }

/* ---------- 募集要項: 破線で区切る定義リスト ---------- */
.lp-dl { margin: 26px 0 0; text-align: left; }
.lp-dl > div { padding: 14px 0 0; }
.lp-dl > div:after { content: ""; display: block; height: 1px; margin-top: 14px; background: var(--color-red); -webkit-mask: url(images/common/line.svg) no-repeat left center / cover; mask: url(images/common/line.svg) no-repeat left center / cover; }
.lp-dl dt { font-size: 13px; font-weight: 500; color: var(--color-red); margin: 0 0 4px; }
.lp-dl dd { margin: 0; font-size: 14px; line-height: 1.7; color: #000; }

/* ---------- エントリー: 入力欄はピル(2px赤枠)、自由記述は16px角丸 ---------- */
.lp-form { margin-top: 24px; text-align: left; }
.lp-field { margin-top: 18px; }
.lp-field label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-red); margin-bottom: 7px; }
.lp-req, .lp-opt { display: inline-block; flex: 0 0 auto; font-size: 10px; line-height: 1; padding: 4px 8px; border-radius: 999px; }
.lp-req { background: var(--color-red); color: var(--color-white); }
.lp-opt { color: var(--color-red); border: 1px solid var(--color-red); padding: 3px 7px; }
.lp-input, .lp-select, .lp-textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: .05em; color: #000;
  background: var(--color-white); border: 2px solid var(--color-red); border-radius: 999px; padding: 10px 20px; /*input*/ outline: 0;
  appearance: none; -webkit-appearance: none;
}
.lp-input::placeholder, .lp-textarea::placeholder { color: rgba(0, 0, 0, .35); }
.lp-input:focus, .lp-select:focus, .lp-textarea:focus { border-color: var(--color-blue); }
.lp-select { padding-right: 48px; background-image: var(--lp-caret); background-repeat: no-repeat; background-position: right 18px center; background-size: 10px 8px; }
.lp-textarea { min-height: 170px; resize: vertical; border-radius: 16px; padding: 14px 20px; }
.lp-form__submit { text-align: center; margin-top: 30px; }

/* ---------- フッター(.m-footer の実測値を1社分に) ---------- */
.l-footer { width: 100%; margin-top: 56px; }

.m-footer__bottom .lp-logo { flex-direction: column; gap: 8px; } .m-footer__bottom .lp-logo__text { align-items: center; } .m-footer__bottom .lp-logo__mark { width: 26px; } .m-footer__bottom .lp-logo b { font-size: 19px; } .m-footer__bottom .lp-logo small { font-size: 9px; }
.lp-copy { font-size: 10px; letter-spacing: .08em; margin: 0; }

/* ---------- うねる道(top-about-line の構造): キャリア=人生改良ロード / 出張=旅路 ---------- */
.lp-road { position: relative; width: 100%; margin: 18px auto 0; }
.lp-road svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-road path { stroke-width: 42.52; fill: none; stroke-linecap: round; }

.lp-road .story-text { font-family: inherit; font-weight: 500; }
.lp-road.is-drawn path { transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1); }

    
/* 赤いヘッダー上: 主(エントリー)=白ピル赤文字(既存 .c-btn そのもの) / 副(募集要項)=白線の中抜き。hoverで入れ替わる */
.m-header__cta > .c-btn.header-cta.-sub { color: var(--color-white); background: transparent; border-color: var(--color-white); }
.m-header__cta > .c-btn.header-cta.-sub:hover { color: var(--color-red); background: var(--color-white); }
.m-header__cta > .c-btn.header-cta.-main:hover { color: var(--color-white); background: transparent; border-color: var(--color-white); }
.m-footer__authentic { width: auto; }

/* 黄(アクセント)の面・帯の上は茶文字 */

.lp-input:focus, .lp-select:focus, .lp-textarea:focus { border-color: var(--color-green); }

/* 帯のバリエーション(参考サイトの .svg-repeat--reverse と線描画に相当): 反転・傾き・入場時に線が描かれる */
.lp-band.-tilt-l { transform: translateX(-50%) rotate(-4deg); }
.lp-band.-tilt-r { transform: translateX(-50%) rotate(3deg); }
.lp-band path { transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.lp-band text { opacity: 0; transition: opacity .5s ease .7s; }
.lp-band.is-reset text { transition: none; }
.lp-band.is-in text { opacity: 1; }

/* 社名が長い(有限会社スリーテック)ので 360〜389px はひと回り小さく */
@media (max-width: 389px) and (min-width: 360px) { .lp-logo b { font-size: 13px; } }

.m-footer__bottom .lp-logo b { font-size: 17px; }

/* 端から半分見える太い文字帯(参考: top-about-line の HAVE A NICE TOOTH アーク)。縦線の代わりに2箇所だけ */
.lp-road.-edge { position: absolute; z-index: 1; width: var(--vw); margin: 0; pointer-events: none; }

/* Header English name centered under the company name. */
.m-header-logo .lp-logo__text { align-items: center; }

/* ---------- オープニング縦型動画(9:16)。表示中はヘッダーを出さない ---------- */
.lp-video { padding: 0 !important; background: #000; overflow: hidden; }
.lp-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lp-swipe-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-white); font-family: Poppins, sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .3em; text-indent: .3em; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.lp-swipe-hint svg { display: block; animation: lpHintBob 1.6s ease-in-out infinite; }
@keyframes lpHintBob { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(6px); opacity: .5; } }
.l-header { transition: opacity .35s ease, visibility .35s; }
html.is-video .l-header { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lp-swipe-hint svg { animation: none; } }