/* ============================================================
   小田警備保障 ｜ 手作り感レイヤー（Handmade Overrides）
   既存デザインの上から、角の硬さ・機械的な正円/格子模様を弱め、
   柔らかく人の手が入ったような見た目に寄せるための上書き専用CSS。
   文言・構造・機能には一切触れていません。
   ============================================================ */

/* 1) 背景の格子模様は維持（指示により変更しない） */

/* 2) ボタン：ピンクの付箋（ポストイット）風に */
.btn{
  background:#FFC2D6 !important;
  color:#3A2418 !important;
  border:none !important;
  border-radius:3px 3px 3px 22px;
  transform:rotate(-2deg);
  box-shadow:3px 7px 0 rgba(0,0,0,.65);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
             box-shadow .3s cubic-bezier(.34,1.56,.64,1);
}
/* 角のめくれは普段は非表示。クリックした瞬間のアニメーションでだけ見せる */
.btn::before{
  content:'';position:absolute;right:0;bottom:0;width:0;height:0;
  background:rgba(0,0,0,.35);border-radius:0 0 4px 0;
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.btn::after{
  content:'';position:absolute;right:0;bottom:0;width:0;height:0;
  background:linear-gradient(135deg,#fff 0%,#f2d5e0 55%,#e3a9c0 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
  box-shadow:-2px -2px 5px -2px rgba(0,0,0,.3);
  transform-origin:bottom right;
}
/* 元々あったホバー時の光沢スイープ／塗りつぶしスライドを完全に無効化
   （これが「ホバーで色が変わって見える」原因だったため） */
.btn-gold::before,.btn-line::before{ content:none !important; display:none !important; }
.btn-gold,.btn-line{ background:#FFC2D6 !important; color:#3A2418 !important; }

/* ホバーで矢印が伸びてボタンごと横に伸びるのを止める */
.btn:hover .arw{ width:22px; }

/* 2b) ホバー：まっすぐになって、机に貼り付くように影が消える */
.btn:hover,.btn-gold:hover,.btn-line:hover{
  transform:rotate(0deg) translateY(0) !important;
  box-shadow:0 0 0 rgba(0,0,0,0) !important;
}

/* クリック時：ペリッと剥がれて画面外へ飛んでいく */
.btn.is-peeling{
  animation:btnPeelAway .48s cubic-bezier(.5,0,.75,0) forwards;
  pointer-events:none;
  z-index:5;
}
.btn.is-peeling::before,.btn.is-peeling::after{
  animation:btnPeelCurl .48s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes btnPeelAway{
  0%{ transform:rotate(-2deg) translate(0,0) scale(1); opacity:1; }
  35%{ transform:rotate(10deg) translate(24px,-14px) scale(1.05); opacity:1; }
  100%{ transform:rotate(35deg) translate(220px,-160px) scale(.4); opacity:0; }
}
@keyframes btnPeelCurl{
  0%{ width:20px; height:20px; }
  100%{ width:140%; height:140%; }
}
@media (prefers-reduced-motion:reduce){
  .btn.is-peeling{ animation:none !important; }
}
.btn:active{ transform:rotate(0deg) translateY(0) !important; box-shadow:0 0 0 rgba(0,0,0,0) !important; }

/* ホバーで貼り付いた瞬間、円がぽっと現れて広がりながら消える（波紋） */
.btn-impact{
  position:fixed;width:36px;height:36px;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%;
  border:4px solid rgba(40,26,18,.6);
  opacity:.9;pointer-events:none;z-index:2000;
  animation:btnRingPulse .6s ease-out forwards;
}
@keyframes btnRingPulse{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:.9; border-width:4px; }
  55%{ transform:translate(-50%,-50%) scale(2); opacity:.6; border-width:2.2px; }
  100%{ transform:translate(-50%,-50%) scale(3.4); opacity:0; border-width:1px; }
}

/* 3) カード類：角を丸め、わずかな傾きで“貼った感”を出す */
.card,.tool,.pcl-card{
  border-radius:16px;
  box-shadow:0 10px 26px -16px rgba(40,30,20,.35);
}
.cards .card:nth-child(3n+1),.cards .tool:nth-child(3n+1){ transform:rotate(-.4deg); }
.cards .card:nth-child(3n+2),.cards .tool:nth-child(3n+2){ transform:rotate(.3deg); }
.cards .card:nth-child(3n+3),.cards .tool:nth-child(3n+3){ transform:rotate(-.2deg); }
.cards .card:hover,.cards .tool:hover{ transform:rotate(0deg) translateY(-3px); }

/* 4) テーブル：角を丸め、線を少し温かい色に */
.tbl{ border-radius:10px; overflow:hidden; }
.tbl th,.tbl td{ border-color:rgba(90,66,48,.16) !important; }

/* 5) 丸い写真装飾（.bub）：正円のまま維持（指示により歪ませない） */

/* 6) トップの大きな丸（見出しの背景）も正円のまま維持（指示により歪ませない） */

/* 7) 写真ギャラリー：ポラロイド風の余白と、互い違いの傾き */
.gal{
  border:none;
  background:#FBF7F0;
  padding:10px 10px 34px;
  border-radius:4px;
  box-shadow:0 14px 26px -14px rgba(40,30,20,.4);
  aspect-ratio:auto;
}
.gal-photo img{
  position:static !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
}
.gal-photo-full img{
  object-fit:contain;
  background:#FBF7F0;
}
.gal:nth-child(4n+1){ transform:rotate(-1.6deg); }
.gal:nth-child(4n+2){ transform:rotate(1.1deg); }
.gal:nth-child(4n+3){ transform:rotate(-.8deg); }
.gal:nth-child(4n+4){ transform:rotate(1.6deg); }
.gal:hover{ transform:rotate(0deg) scale(1.02); }

/* 8) 先輩社員の声：カードの角を少し丸める（写真の丸は歪ませない） */
.voice{ border-radius:14px; box-shadow:0 10px 24px -16px rgba(40,30,20,.3); }

/* 9) 資格・業務などの図版枠、イラスト枠も角を少し丸く */
.detail-visual,.illust{ border-radius:10px; overflow:hidden; }

/* 10) 見出しの強調語（<em>）はサイト共通の明朝体のまま */
h1 em,.sec-title em,.chero h1 em{
  font-weight:600;
}

/* 11) セクションラベルの下線を、まっすぐな線から手描きの一筆風に */
.sec-label{ position:relative; }

/* 12) チップ・バッジ類：角を丸く、輪郭を少し粗く */
.badge,.tag,.cat{ border-radius:999px; }

/* 13) 入力欄・フォームも少し柔らかく */
input,textarea,select{ border-radius:8px !important; }

/* 15) 見出しの文字が、一文字ずつ弾むように現れる演出 */
.rv-char{
  display:inline-block;opacity:0;transform:translateY(.5em) scale(.3) rotate(6deg);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.rv-chars-in .rv-char{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
@media (prefers-reduced-motion:reduce){
  .rv-char{opacity:1;transform:none;transition:none}
}
@media (max-width:640px){
  .cards .card,.cards .tool,.gal{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .cards .card,.cards .tool,.gal,.bub{ transform:none !important; }
}

/* カーソル：ペルソナ5風の、赤×黒のギザギザした切り込みデザイン */
html.has-slime-cursor, html.has-slime-cursor *{ cursor:none !important; }
#slime-cursor{
  position:fixed;top:0;left:0;width:0;height:0;
  pointer-events:none;z-index:9999;
}
.sl-layer{
  position:absolute;top:0;left:0;width:40px;height:40px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  transition:width .28s cubic-bezier(.34,1.56,.64,1),
             height .28s cubic-bezier(.34,1.56,.64,1),
             border-radius .28s ease-out,
             transform .28s ease-out,
             opacity .28s ease-out,
             background .28s ease-out;
}
.sl-pink{ background:rgba(255,178,200,.45); }
.sl-red{ background:rgba(255,70,90,.35); }
.sl-white{ background:rgba(255,255,255,.55); }
#slime-cursor.is-hit .sl-layer{ width:68px;height:68px; }
#slime-cursor.is-hit .sl-pink{ opacity:0; }
#slime-cursor.is-hit .sl-red{ background:rgba(230,35,50,.6); }
#slime-cursor.is-hit .sl-white{ opacity:.3; }
@media (max-width:900px){
  html.has-slime-cursor, html.has-slime-cursor *{ cursor:auto !important; }
  #slime-cursor{ display:none; }
}

/* 応募のお誘いCTAボックス：背景の格子模様・金の縁取り・丸い光を活かした装飾 */
.cta-invite{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(50px,6vw,80px);
  border:1px solid var(--line-gold);
  padding:clamp(34px,4.5vw,58px) clamp(24px,4vw,50px);
  text-align:center;
  background:linear-gradient(130deg,var(--ink-700),var(--ink-800));
}
/* サイト全体と同じ意匠の、薄い格子模様 */
.cta-invite::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(237,216,210,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,216,210,.07) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 90% 120% at 50% 0%,#000 35%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 120% at 50% 0%,#000 35%,transparent 100%);
}
/* 見出しの背後に、ふわっと滲む金色の光 */
.cta-invite::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;top:0;width:min(520px,80%);height:100%;transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 55% at 50% 38%,rgba(237,216,210,.14),transparent 72%);
}
/* 四隅の金の角飾り（シールを貼ったような、控えめなL字） */
.cta-invite .corner{position:absolute;z-index:1;width:26px;height:26px;pointer-events:none;opacity:.75}
.cta-invite .corner::before,.cta-invite .corner::after{content:'';position:absolute;background:var(--gold-500)}
.cta-invite .corner::before{width:100%;height:1px;top:0;left:0}
.cta-invite .corner::after{width:1px;height:100%;top:0;left:0}
.cta-invite .corner.corner-tl{top:10px;left:10px;margin:0;padding:0}
.cta-invite .corner.corner-tr{top:10px;right:10px;transform:scaleX(-1);margin:0;padding:0}
.cta-invite .corner.corner-bl{bottom:10px;left:10px;transform:scaleY(-1);margin:0;padding:0}
.cta-invite .corner.corner-br{bottom:10px;right:10px;transform:scale(-1,-1);margin:0;padding:0}
.cta-invite > *{position:relative;z-index:2}
.cta-invite h3{font-family:var(--ff-serif);font-size:clamp(20px,2.6vw,28px);letter-spacing:.07em;margin-bottom:14px}
.cta-invite p{color:var(--text-soft);margin-bottom:28px}
.cta-invite .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media (max-width:640px){ .cta-invite::before{background-size:24px 24px} }

/* ============================================================
   トップページ 試作：信頼感のある紺色を差し色に加えた、
   カードとバッジ中心の構成（他サイトの参考意匠とブレンド）
   ============================================================ */
:root{
  --trust-navy:#1E3A5F;
  --trust-navy-deep:#132840;
  --trust-blue:#4A7FB5;
}

/* サービスカード：上部に紺のアクセントバー、バッジ風の番号表示 */
.svc-grid{ background:none!important; border:none!important; gap:24px!important; }
.svc{
  position:relative;
  background:linear-gradient(155deg,var(--ink-700),var(--ink-800))!important;
  border:1px solid rgba(74,127,181,.28)!important;
  border-radius:14px;
  overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s;
}
.svc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--trust-blue),var(--trust-navy));
}
.svc:hover{ transform:translateY(-6px); border-color:rgba(74,127,181,.6)!important; }
.svc-no{
  display:inline-block;font-family:var(--ff-en);font-size:11px;letter-spacing:.22em;
  color:var(--trust-blue);background:rgba(74,127,181,.12);
  border:1px solid rgba(74,127,181,.35);border-radius:999px;
  padding:5px 14px;margin-bottom:18px;
}
.svc .badge{
  border-color:var(--trust-blue)!important;color:var(--trust-blue)!important;
  border-radius:999px;
}

/* SAFETY FIRST の帯にも、紺のアクセントを一本 */
.arrowband{ border-top:1px solid rgba(74,127,181,.35); border-bottom:1px solid rgba(74,127,181,.35); }