@charset "UTF-8";
/* 2026-10-25〜: デザイン/2026年10月/タスクル_林さん渡し一式_20261025_2（v1.1）§6依頼フォーム。
   タスクル_モック_ゴミ屋敷.html 等の<style>から該当クラスをそのまま移植（色・余白は変更していない）。
   他ページのCSS（Bootstrap 3 CDN等）と.opt/.inp等の汎用的なクラス名が衝突しないよう、
   全セレクタに.ad2-formのスコープを付けている（ai_genchi.scssの.ai-genchi-appと同じ考え方）。
   ジャンル別の配色（§3）は.ad2-form.category-*側の変数上書きで切り替える。 */
/* line 6, app/assets/stylesheets/ad2.scss */
.ad2-form {
  --main:#479DE0;
  --dark:#013156;
  --light:#EAF4FC;
  --red:#E8462B;
  --green:#2BB673;
  --sub:#5b6670;
  --ink:#1c2329;
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  max-width: 430px;
  margin: 0 auto;
  background: #F4F7FA;
  color: var(--ink);
}

/* line 11, app/assets/stylesheets/ad2.scss */
.ad2-form.category-fuyouhin {
  --main:#17A7A0;
  --dark:#074845;
  --light:#E6F6F5;
}

/* line 12, app/assets/stylesheets/ad2.scss */
.ad2-form.category-ihinseiri {
  --main:#AF78C0;
  --dark:#3E134C;
  --light:#F5ECF8;
}

/* line 14, app/assets/stylesheets/ad2.scss */
.ad2-form .trust {
  background: var(--dark);
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 12.5px;
  font-weight: 700;
}

/* line 15, app/assets/stylesheets/ad2.scss */
.ad2-form .hd2 {
  padding: 14px 16px 10px;
  background: #fff;
}

/* line 16, app/assets/stylesheets/ad2.scss */
.ad2-form .hd2 small {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

/* line 17, app/assets/stylesheets/ad2.scss */
.ad2-form .hd2 h1 {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.4;
}

/* line 18, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e3e8ec;
  font-size: 11.5px;
  color: var(--sub);
  font-weight: 700;
}

/* line 19, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3 .on {
  color: var(--main);
}

/* line 20, app/assets/stylesheets/ad2.scss */
.ad2-form .prog {
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e8ec;
  position: sticky;
  top: 0;
  z-index: 4;
}

/* line 21, app/assets/stylesheets/ad2.scss */
.ad2-form .prog .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 7px;
}

/* line 22, app/assets/stylesheets/ad2.scss */
.ad2-form .prog .row span:last-child {
  color: #E66400;
}

/* line 23, app/assets/stylesheets/ad2.scss */
.ad2-form .bars {
  display: grid;
  gap: 4px;
}

/* line 24, app/assets/stylesheets/ad2.scss */
.ad2-form .bars i {
  height: 6px;
  border-radius: 3px;
  background: #dde3e8;
  transition: background .3s;
  display: block;
}

/* line 25, app/assets/stylesheets/ad2.scss */
.ad2-form .bars i.on {
  background: var(--green);
}

/* line 26, app/assets/stylesheets/ad2.scss */
.ad2-form .q {
  background: #fff;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: 16px;
  transition: box-shadow .3s;
  border-bottom: 8px solid #F4F7FA;
}

/* line 27, app/assets/stylesheets/ad2.scss */
.ad2-form .q.err {
  box-shadow: inset 0 0 0 2px var(--red);
}

/* line 28, app/assets/stylesheets/ad2.scss */
.ad2-form .qh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
}

/* 直しメモ#21-5：質問番号の丸は濃紺、答えたら緑の✓に変わる。 */
/* line 30, app/assets/stylesheets/ad2.scss */
.ad2-form .qh .num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

/* line 31, app/assets/stylesheets/ad2.scss */
.ad2-form .q.done .qh .num {
  background: var(--green);
}

/* line 32, app/assets/stylesheets/ad2.scss */
.ad2-form .req {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
}

/* line 33, app/assets/stylesheets/ad2.scss */
.ad2-form .req.req-opt {
  background: #8a949c;
}

/* 直しメモ#21-2：3ステップを点と線のインジケーターに（表示名はメール確認のまま）。 */
/* line 36, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 14px 28px 10px;
  background: #fff;
  border-bottom: 1px solid #e3e8ec;
}

/* line 37, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots:before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 21px;
  height: 2px;
  background: #dde3e8;
}

/* line 38, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa4ad;
}

/* line 39, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots span i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c3cad0;
  box-shadow: 0 0 0 4px #fff;
  display: block;
}

/* line 40, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots span.on {
  color: var(--main);
  font-weight: 900;
}

/* line 41, app/assets/stylesheets/ad2.scss */
.ad2-form .steps3dots span.on i {
  background: var(--main);
}

/* 2026-10-29〜: 修正指示第2回#5。希望日・時間帯の入力を見本/希望日_見本.html のとおりに作り直し。 */
/* line 44, app/assets/stylesheets/ad2.scss */
.ad2-form .dates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 45, app/assets/stylesheets/ad2.scss */
.ad2-form .dates[hidden] {
  display: none;
}

/* line 46, app/assets/stylesheets/ad2.scss */
.ad2-form .drow {
  background: #F4F7FA;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 47, app/assets/stylesheets/ad2.scss */
.ad2-form .drow[hidden] {
  display: none;
}

/* line 48, app/assets/stylesheets/ad2.scss */
.ad2-form .drow .lab {
  font-size: 14px;
  font-weight: 900;
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

/* line 49, app/assets/stylesheets/ad2.scss */
.ad2-form .drow .rmd {
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

/* line 50, app/assets/stylesheets/ad2.scss */
.ad2-form .drow .sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: -4px;
}

/* line 51, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn {
  position: relative;
  height: 56px;
  border: 2px solid var(--main);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  transition: border-color .2s,box-shadow .2s,background .2s;
}

/* line 52, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn .ic {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--main);
}

/* line 53, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn .tx {
  flex: 1;
  font-size: 17px;
  font-weight: 900;
  color: var(--main);
}

/* line 54, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn .go {
  flex: none;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--main);
  border-radius: 999px;
  padding: 4px 10px;
}

/* line 55, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn.ok {
  border-color: var(--green);
  background: #F2FBF6;
}

/* line 56, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn.ok .tx {
  color: var(--ink);
}

/* line 57, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn.ok .ic {
  color: var(--green);
}

/* line 58, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn.ok .go {
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--green);
}

/* line 59, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn:focus-within {
  box-shadow: 0 0 0 4px rgba(238, 122, 51, 0.22);
  border-color: #EE7A33;
}

/* line 60, app/assets/stylesheets/ad2.scss */
.ad2-form .dbtn input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  border: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
}

/* line 61, app/assets/stylesheets/ad2.scss */
.ad2-form .tms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* line 62, app/assets/stylesheets/ad2.scss */
.ad2-form .tm {
  min-height: 52px;
  border: 2px solid #cfd8df;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  color: #2a3540;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  padding: 4px 2px;
}

/* line 63, app/assets/stylesheets/ad2.scss */
.ad2-form .tm small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
}

/* line 64, app/assets/stylesheets/ad2.scss */
.ad2-form .tm.on {
  border-color: var(--main);
  background: var(--light);
  color: var(--dark);
}

/* line 65, app/assets/stylesheets/ad2.scss */
.ad2-form .tm.on small {
  color: var(--dark);
}

/* line 66, app/assets/stylesheets/ad2.scss */
.ad2-form .tm:active {
  transform: scale(0.97);
}

/* line 67, app/assets/stylesheets/ad2.scss */
.ad2-form .add {
  height: 50px;
  border: 2px dashed var(--main);
  border-radius: 10px;
  background: #fff;
  color: var(--main);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

/* line 68, app/assets/stylesheets/ad2.scss */
.ad2-form .add[hidden] {
  display: none;
}

/* 直しメモ#21-8：希望日と場所の間の安心バナー。 */
/* line 71, app/assets/stylesheets/ad2.scss */
.ad2-form .reassure2 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--light);
  margin: 14px 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
}

/* line 72, app/assets/stylesheets/ad2.scss */
.ad2-form .reassure2 img {
  width: 36px;
  flex-shrink: 0;
}

/* line 73, app/assets/stylesheets/ad2.scss */
.ad2-form .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* line 74, app/assets/stylesheets/ad2.scss */
.ad2-form .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* line 75, app/assets/stylesheets/ad2.scss */
.ad2-form .opt {
  min-height: 50px;
  border: 2px solid #cfd8df;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  color: #2a3540;
  cursor: pointer;
  padding: 6px 2px;
  gap: 3px;
  transition: transform .1s;
}

/* line 76, app/assets/stylesheets/ad2.scss */
.ad2-form .opt:active {
  transform: scale(0.97);
}

/* line 77, app/assets/stylesheets/ad2.scss */
.ad2-form .opt.on {
  border-color: var(--main);
  background: var(--light);
  color: var(--dark);
}

/* line 78, app/assets/stylesheets/ad2.scss */
.ad2-form .opt small {
  font-size: 10px;
  color: var(--sub);
  font-weight: 700;
}

/* line 79, app/assets/stylesheets/ad2.scss */
.ad2-form .opt img {
  width: 96px;
  height: auto;
  margin-bottom: 4px;
}

/* line 80, app/assets/stylesheets/ad2.scss */
.ad2-form .hint2 {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.5;
}

/* line 81, app/assets/stylesheets/ad2.scss */
.ad2-form .lab {
  font-size: 13px;
  font-weight: 700;
  color: #3b4650;
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* line 82, app/assets/stylesheets/ad2.scss */
.ad2-form .inp {
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #cfd8df;
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: border-color .2s ease,box-shadow .2s ease;
}

/* line 83, app/assets/stylesheets/ad2.scss */
.ad2-form .inp.ok {
  border-color: var(--green);
  background: #F0FAF4;
  font-weight: 700;
}

/* 2026-10-29〜: 修正指示第2回#4。依頼フォームの入力欄も、タップ時の青い枠をオレンジに統一。
   new_lp_ad2top.scss（LP側）とは別ファイルとしてコンパイルされるため、同じ@keyframesを
   こちらにも定義する（名前はそろえているが二重定義が必要）。 */
/* line 87, app/assets/stylesheets/ad2.scss */
.ad2-form .inp:focus {
  outline: none;
  -webkit-animation: ad2CityFocus .45s ease-out;
          animation: ad2CityFocus .45s ease-out;
  border-color: #EE7A33;
  box-shadow: 0 0 0 4px rgba(238, 122, 51, 0.22);
}

@-webkit-keyframes ad2CityFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(238, 122, 51, 0.45);
  }
  60% {
    box-shadow: 0 0 0 8px rgba(238, 122, 51, 0.12);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(238, 122, 51, 0.22);
  }
}

@keyframes ad2CityFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(238, 122, 51, 0.45);
  }
  60% {
    box-shadow: 0 0 0 8px rgba(238, 122, 51, 0.12);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(238, 122, 51, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 89, app/assets/stylesheets/ad2.scss */
  .ad2-form .inp:focus {
    -webkit-animation: none;
            animation: none;
  }
}

/* line 90, app/assets/stylesheets/ad2.scss */
.ad2-form .opt-tag {
  background: #8a949c;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  padding: 1px 5px;
}

/* line 91, app/assets/stylesheets/ad2.scss */
.ad2-form .must-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
  line-height: 1.5;
}

/* line 92, app/assets/stylesheets/ad2.scss */
.ad2-form .stepbar {
  background: var(--light);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  color: var(--dark);
}

/* line 93, app/assets/stylesheets/ad2.scss */
.ad2-form .link {
  background: none;
  border: none;
  color: #1d5fd1;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

/* line 94, app/assets/stylesheets/ad2.scss */
.ad2-form .rmd {
  background: none;
  border: none;
  color: var(--sub);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

/* 直しメモ#21-9：営業電話の注記は薄いオレンジの箱にタスクン、太字はオレンジ。 */
/* line 96, app/assets/stylesheets/ad2.scss */
.ad2-form .note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 4px 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sub);
  background: #FFF3E8;
}

/* line 97, app/assets/stylesheets/ad2.scss */
.ad2-form .note img {
  width: 34px;
  flex-shrink: 0;
}

/* line 98, app/assets/stylesheets/ad2.scss */
.ad2-form .note b {
  color: #E66400;
}

/* 直しメモ#21-11・#2と同じ考え方：下固定バーはfixedにして、その高さぶんページ末尾にpadding-bottomを
   足し、フッター（利用規約文言等）が隠れないようにする。 */
/* line 102, app/assets/stylesheets/ad2.scss */
#ad2-form-root {
  padding-bottom: 76px;
}

/* line 103, app/assets/stylesheets/ad2.scss */
.ad2-form .formbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(1, 49, 86, 0.95);
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 900;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 104, app/assets/stylesheets/ad2.scss */
.ad2-form .formbar .left {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* line 105, app/assets/stylesheets/ad2.scss */
.ad2-form .formbar .left b {
  color: #FFE600;
  font-size: 20px;
}

/* line 106, app/assets/stylesheets/ad2.scss */
.ad2-form .formbar button {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff;
  border: none;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

/* line 108, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap {
  padding: 18px 16px;
  text-align: center;
  background: #fff;
}

/* line 109, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap .lead {
  font-size: 13px;
  font-weight: 900;
  color: var(--main);
  margin-bottom: 10px;
}

/* line 110, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap button {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff;
  border: none;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* line 111, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap .ok2 {
  margin-top: 10px;
  font-size: 12px;
  color: var(--sub);
}

/* line 112, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap .terms {
  margin-top: 8px;
  font-size: 11px;
  color: var(--sub);
}

/* line 113, app/assets/stylesheets/ad2.scss */
.ad2-form .submitwrap .terms a {
  color: var(--main);
}

/* 依頼完了アニメーション（§8） */
/* 2026-10-27〜: Hayashiから「下の部分が切れていておかしい」との指摘。モックは固定サイズの
   スマホ枠(.view{position:absolute;inset:0})の中で表示されるため余白が目立たないが、実機では
   見出し＋カード一覧＋注記の高さが画面の高さに届かず、その下に（.ad2-formに背景色はあるが
   高さの指定が無いため）白い空白ができてしまっていた。アニメーション画面だけ画面いっぱいの
   高さ・背景にする。 */
/* line 121, app/assets/stylesheets/ad2.scss */
#ad2-anim-root.ad2-form {
  min-height: 100vh;
  min-height: 100dvh;
}

/* 直しメモ#25：上部はジャンルのメイン色（濃紺ではない）、余白・輪・札・見出しの影をモックの値に。 */
/* line 123, app/assets/stylesheets/ad2.scss */
.ad2-form .anim-head {
  background: var(--main);
  color: #fff;
  text-align: center;
  padding: 20px 16px 30px;
}

/* line 124, app/assets/stylesheets/ad2.scss */
.ad2-form .mascot-wrap {
  position: relative;
  width: 150px;
  height: 110px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 125, app/assets/stylesheets/ad2.scss */
.ad2-form .mascot-circle {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 126, app/assets/stylesheets/ad2.scss */
.ad2-form .mascot-img {
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-animation: ad2bob 1.2s ease-in-out infinite;
          animation: ad2bob 1.2s ease-in-out infinite;
}

/* line 127, app/assets/stylesheets/ad2.scss */
.ad2-form .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-animation: ad2ring 1.8s ease-out infinite;
          animation: ad2ring 1.8s ease-out infinite;
}

/* line 128, app/assets/stylesheets/ad2.scss */
.ad2-form .ring.r2 {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}

/* line 129, app/assets/stylesheets/ad2.scss */
.ad2-form .ring.r3 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@-webkit-keyframes ad2ring {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@keyframes ad2ring {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@-webkit-keyframes ad2bob {
  50% {
    transform: translateY(-4px);
  }
}

@keyframes ad2bob {
  50% {
    transform: translateY(-4px);
  }
}

/* line 132, app/assets/stylesheets/ad2.scss */
.ad2-form .pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

/* line 133, app/assets/stylesheets/ad2.scss */
.ad2-form .big {
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 2px 0 var(--dark);
  margin-bottom: 6px;
}

/* line 134, app/assets/stylesheets/ad2.scss */
.ad2-form .big b {
  color: #FFE600;
  font-size: 40px;
  display: inline-block;
}

/* line 135, app/assets/stylesheets/ad2.scss */
.ad2-form .big.pop b {
  -webkit-animation: ad2pop .5s;
          animation: ad2pop .5s;
}

@-webkit-keyframes ad2pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ad2pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* line 137, app/assets/stylesheets/ad2.scss */
.ad2-form .cwrap {
  height: 300px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(transparent 0, #000 22%);
  mask-image: linear-gradient(transparent 0, #000 22%);
  background: #F4F7FA;
}

/* line 138, app/assets/stylesheets/ad2.scss */
.ad2-form .clist {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* line 139, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard {
  border: 2px solid var(--main);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(1, 49, 86, 0.08);
  opacity: 0;
  transform: translateX(28px) translateY(26px);
}

/* line 140, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard.in {
  -webkit-animation: ad2fly 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: ad2fly 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@-webkit-keyframes ad2fly {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ad2fly {
  to {
    opacity: 1;
    transform: none;
  }
}

/* line 142, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard .ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

/* line 143, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard .nm {
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  color: #9aa4ad;
  letter-spacing: 2px;
}

/* line 144, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard .nm div {
  letter-spacing: 0;
  color: #F5B700;
  font-size: 13px;
}

/* line 145, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard .ok {
  opacity: 0;
  transform: scale(0.6);
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* line 146, app/assets/stylesheets/ad2.scss */
.ad2-form .vcard.in .ok {
  -webkit-animation: ad2okin .3s .3s ease-out forwards;
          animation: ad2okin .3s .3s ease-out forwards;
}

@-webkit-keyframes ad2okin {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ad2okin {
  to {
    opacity: 1;
    transform: none;
  }
}

/* line 148, app/assets/stylesheets/ad2.scss */
.ad2-form .cards-note {
  font-size: 11.5px;
  color: var(--sub);
  text-align: center;
  padding: 10px 16px;
}

/* line 149, app/assets/stylesheets/ad2.scss */
.ad2-form .conf {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* line 150, app/assets/stylesheets/ad2.scss */
.ad2-form .conf i {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  -webkit-animation: ad2fall 1.4s ease-in forwards;
          animation: ad2fall 1.4s ease-in forwards;
}

@-webkit-keyframes ad2fall {
  to {
    transform: translateY(100vh) rotate(540deg);
    opacity: 0;
  }
}

@keyframes ad2fall {
  to {
    transform: translateY(100vh) rotate(540deg);
    opacity: 0;
  }
}

/* 確認コード入力画面（§7.1〜7.2、実装順1番目）。
   2026-10-27〜: Hayashiから「モックと違う」との指摘を受けて追加。初版（Step1の動作確認用）は
   ad2.scss自体を読み込んでおらず完全に独自styleだったため、他の画面（依頼フォーム・完了アニメ）と
   見た目が揃っていなかった。タスクル_モック_ゴミ屋敷.html の.hd/.vbox/.codes/.mailapps/.sumrow を
   このファイル（.ad2-formスコープ）に正式に移植し、他画面と同じ土台に統一した。 */
/* line 158, app/assets/stylesheets/ad2.scss */
.ad2-form .vhd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e3e8ec;
}

/* line 159, app/assets/stylesheets/ad2.scss */
.ad2-form .vhd img {
  height: 26px;
  width: auto;
}

/* line 160, app/assets/stylesheets/ad2.scss */
.ad2-form .vhd .ssl {
  font-size: 11px;
  font-weight: 700;
  color: var(--dark);
}

/* line 161, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox {
  background: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* line 162, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox h2 {
  margin: 0;
  font-size: 20px;
  color: var(--dark);
  line-height: 1.4;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* line 163, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox h2 img {
  width: 46px;
}

/* line 164, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox .lead {
  font-size: 14px;
  line-height: 1.7;
  color: #3b4650;
  margin: 0;
}

/* line 165, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox .lead b {
  color: var(--ink);
  font-size: 16px;
}

/* line 166, app/assets/stylesheets/ad2.scss */
.ad2-form .codes {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* line 167, app/assets/stylesheets/ad2.scss */
.ad2-form .codes span {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid #cfd8df;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  transition: border-color .2s;
}

/* line 168, app/assets/stylesheets/ad2.scss */
.ad2-form .codes span.cur {
  border-color: var(--main);
  box-shadow: 0 0 0 3px var(--light);
}

/* line 169, app/assets/stylesheets/ad2.scss */
.ad2-form .codes input {
  position: absolute;
  inset: 0;
  opacity: 0;
  font-size: 16px;
  width: 100%;
}

/* line 170, app/assets/stylesheets/ad2.scss */
.ad2-form .mailapps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* line 171, app/assets/stylesheets/ad2.scss */
.ad2-form .mailapps span, .ad2-form .mailapps a {
  border: 1.5px solid #cfd8df;
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--ink);
  text-decoration: none;
}

/* line 172, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox .cta {
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

/* line 173, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox .cta i {
  font-style: normal;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 14px;
}

/* line 174, app/assets/stylesheets/ad2.scss */
.ad2-form .vbox .cta:disabled {
  opacity: .6;
  cursor: default;
}

/* line 175, app/assets/stylesheets/ad2.scss */
.ad2-form .vreassure {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
}

/* line 176, app/assets/stylesheets/ad2.scss */
.ad2-form .sumrow {
  margin: 14px 16px 0;
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

/* line 177, app/assets/stylesheets/ad2.scss */
.ad2-form .sumrow .lb {
  font-size: 12px;
  color: var(--sub);
  font-weight: 700;
}

/* line 178, app/assets/stylesheets/ad2.scss */
.ad2-form .sumrow .vl {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 179, app/assets/stylesheets/ad2.scss */
.ad2-form .vfoot {
  padding: 14px 16px 30px;
  text-align: center;
  font-size: 13px;
  color: #3b4650;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 180, app/assets/stylesheets/ad2.scss */
.ad2-form .vfoot .resend {
  background: none;
  color: #9aa4ad;
  font-weight: 700;
  border: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* line 181, app/assets/stylesheets/ad2.scss */
.ad2-form .vfoot .resend:disabled {
  cursor: default;
}

/* line 182, app/assets/stylesheets/ad2.scss */
.ad2-form .vfoot .note {
  font-size: 12px;
  color: var(--sub);
}

/* line 183, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-error {
  color: var(--red);
  font-size: 13px;
  min-height: 18px;
  margin: 0;
}

/* 待機画面・下から出るシート（§9、実装順4番目）。既存の案件ページ(items/shered/_show_item_user.html.erb
   等)はad=1・無印ページとも共有しているため、ad2_source（qaのフラグ）がある案件だけに適用される
   .ad2-wait-scope配下のクラスで追加する（既存のCSSとは衝突しない新規クラス名）。
   .ad2-formとは別の軽量スコープ（item_show側は.ad2-formの基本レイアウト(max-width等)を持ち込みたくないため）。 */
/* 直しメモ#26-2：右下の浮きコンシェルジュボタン（.ConciergeChatBtn、items.scss・全画面共通）に
   ページ下部のリンクが重なって押せない問題。ボタン自体（他の全ページでも使う共通パーツ）は
   変更せず、ad2の待機画面側だけ下に余白を足して避ける。 */
/* line 192, app/assets/stylesheets/ad2.scss */
.ad2-wait-scope {
  --ad2-main:#479DE0;
  --ad2-dark:#013156;
  --ad2-light:#EAF4FC;
  display: block;
  padding-bottom: 120px;
}

/* line 193, app/assets/stylesheets/ad2.scss */
.ad2-wait-scope.category-fuyouhin {
  --ad2-main:#17A7A0;
  --ad2-dark:#074845;
  --ad2-light:#E6F6F5;
}

/* line 194, app/assets/stylesheets/ad2.scss */
.ad2-wait-scope.category-ihinseiri {
  --ad2-main:#AF78C0;
  --ad2-dark:#3E134C;
  --ad2-light:#F5ECF8;
}

/* line 195, app/assets/stylesheets/ad2.scss */
.ad2-wait-card {
  background: #fff;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 12px;
  margin: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

/* line 196, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 6px;
}

/* line 197, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track:before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 9px;
  height: 3px;
  background: #dde3e8;
}

/* line 198, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
  width: 64px;
  font-size: 10.5px;
  font-weight: 700;
  color: #7a858f;
  white-space: nowrap;
}

/* line 199, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c3cad0;
  box-shadow: 0 0 0 4px #fff;
  display: block;
}

/* line 200, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track div.on {
  color: var(--ad2-main, #479DE0);
  font-weight: 900;
}

/* line 201, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-track div.on i {
  background: var(--ad2-main, #479DE0);
  box-shadow: 0 0 0 4px var(--ad2-light, #EAF4FC);
}

/* line 202, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-sbox {
  background: var(--ad2-light, #EAF4FC);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 203, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-sbox .top {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* line 204, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-sbox .top img {
  width: 46px;
  -webkit-animation: ad2bob 1.6s infinite ease-in-out;
          animation: ad2bob 1.6s infinite ease-in-out;
}

/* line 205, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-sbox h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ad2-dark, #013156);
  line-height: 1.4;
}

/* line 206, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-sbox p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #3b4650;
}

/* line 207, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-stores-row {
  display: flex;
  gap: 16px;
  padding-top: 6px;
}

/* line 208, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st {
  position: relative;
  transition: transform .3s;
  width: 40px;
  height: 40px;
}

/* line 209, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st.lit {
  transform: translateY(-4px);
}

/* line 210, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st .bub {
  position: absolute;
  right: -10px;
  top: -10px;
  background: #fff;
  border: 1.5px solid var(--ad2-main, #479DE0);
  border-radius: 10px 10px 10px 2px;
  padding: 3px 4px;
  display: flex;
  gap: 2px;
}

/* line 211, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st .bub i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ad2-main, #479DE0);
  -webkit-animation: ad2dot 1s infinite;
          animation: ad2dot 1s infinite;
  display: block;
}

/* line 212, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st .bub i:nth-child(2) {
  -webkit-animation-delay: .15s;
          animation-delay: .15s;
}

/* line 213, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st .bub i:nth-child(3) {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

@-webkit-keyframes ad2dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .35;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes ad2dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .35;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* line 215, app/assets/stylesheets/ad2.scss */
.ad2-wait-card .ad2-st .chk {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2BB673;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* 直しメモ#26-1「このあとの流れ」：LPのチャット見本と同じ見た目を案件ページ(.ad2-wait-scope)側にも用意。 */
/* line 218, app/assets/stylesheets/ad2.scss */
.ad2-how {
  background: #fff;
  padding: 14px 16px 16px;
  margin: 14px 12px 4px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* line 219, app/assets/stylesheets/ad2.scss */
.ad2-how-h {
  font-size: 16px;
  font-weight: 900;
  color: var(--ad2-dark, #013156);
}

/* line 220, app/assets/stylesheets/ad2.scss */
.ad2-how-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #3b4650;
}

/* line 221, app/assets/stylesheets/ad2.scss */
.ad2-how-flow div {
  background: var(--ad2-light, #EAF4FC);
  border-radius: 10px;
  padding: 10px 4px;
  line-height: 1.4;
}

/* line 222, app/assets/stylesheets/ad2.scss */
.ad2-how-flow span {
  display: block;
  font-size: 20px;
  margin-bottom: 2px;
}

/* line 223, app/assets/stylesheets/ad2.scss */
.ad2-how-chat {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cfd8df;
  background: #7494C0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 224, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .day {
  align-self: center;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 1px 9px;
}

/* line 225, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .lm {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(8px);
  transition: all .35s;
}

/* 2026-10-28〜: サイト全体で読み込まれているBootstrap 3に`.show{display:block!important}`という
   汎用クラスがあり、このチャット演出で使っている`.show`（表示トリガー用のクラス名）と衝突して、
   !importantに負けて.lmのdisplay:flex（吹き出しの横並び）が実機でdisplay:blockに潰されていた
   （実際にはモック通りに実装していたが、.showクラスを足した瞬間だけ壊れるため気づきにくかった）。
   display:flex!importantで打ち返して直す。 */
/* line 231, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .lm.show {
  display: flex !important;
  opacity: 1;
  transform: none;
}

/* line 232, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .lm.r {
  flex-direction: row-reverse;
}

/* line 233, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .b {
  max-width: 72%;
  background: #fff;
  border-radius: 16px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1c2329;
}

/* line 234, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .lm.r .b {
  background: #8de07a;
}

/* line 235, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .t {
  font-size: 9px;
  color: #fff;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

/* line 236, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .ic {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

/* line 237, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .ic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* line 238, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .qb {
  background: #fff;
  overflow: hidden;
  width: 72%;
  padding: 0;
  font-size: 12px;
}

/* line 239, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .qbh {
  background: #EE7A33;
  color: #fff;
  font-weight: 900;
  padding: 5px 10px;
  font-size: 11.5px;
}

/* line 240, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .qbp {
  padding: 8px 10px;
}

/* line 241, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .qbp b {
  font-size: 19px;
  color: #D2470F;
}

/* line 242, app/assets/stylesheets/ad2.scss */
.ad2-how-chat .qbp div {
  color: #5b6670;
  font-size: 11px;
}

/* line 243, app/assets/stylesheets/ad2.scss */
.ad2-how p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #3b4650;
}

/* 直しメモ#26-2「タスクルコンシェルジュ」カード。 */
/* line 246, app/assets/stylesheets/ad2.scss */
.ad2-concierge-card {
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 12px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 247, app/assets/stylesheets/ad2.scss */
.ad2-concierge-card img {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

/* line 248, app/assets/stylesheets/ad2.scss */
.ad2-concierge-card {
  flex-wrap: nowrap;
}

/* line 249, app/assets/stylesheets/ad2.scss */
.ad2-concierge-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* 2026-10-29〜: 修正指示第2回#1。「タスクルコンシェルジュ」がNoto Sans JP(900)だと幅が広がり
   「コンシェル／ジュ」で折り返していた。white-space:nowrapで1行に固定（はみ出す場合は
   .ad2-concierge-bodyがflex:1で縮むのでボタン側は確保される）。 %>
.ad2-concierge-body b{font-size:14px;color:#1c2329;white-space:nowrap}
.ad2-concierge-body p{margin:2px 0 0;font-size:11.5px;color:#5b6670}
.ad2-concierge-btn{flex-shrink:0;font-size:13px;font-weight:900;color:var(--ad2-main,#479DE0);border:2px solid var(--ad2-main,#479DE0);border-radius:999px;padding:7px 12px;white-space:nowrap;background:none;text-decoration:none}

/* 直しメモ#26-5「メールが見当たらないとき」（ad2版）。 */
/* line 258, app/assets/stylesheets/ad2.scss */
.ad2-mailbox {
  background: #FFFBF3;
  border: 2px solid #F6D7A7;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 259, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-h {
  font-size: 14px;
  font-weight: 900;
  color: #1c2329;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 260, app/assets/stylesheets/ad2.scss */
.ad2-mailbox p {
  margin: 0;
  font-size: 12.5px;
  color: #3b4650;
  line-height: 1.6;
  word-break: break-all;
}

/* line 261, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* line 262, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-grid div {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #3b4650;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 263, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-grid span {
  color: #E66400;
  font-weight: 900;
}

/* line 264, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-more {
  font-size: 12px;
  color: #3b4650;
  line-height: 1.6;
}

/* line 265, app/assets/stylesheets/ad2.scss */
.ad2-mailbox-more a {
  color: #1b6fb5;
  text-decoration: underline;
  font-weight: 700;
}

/* §9.4「届いた見積もり（届いた順）」の見出し・注記。既存の.allRoomsWrapper/.storesはそのまま
   再利用するため、ここでは上の状況カードと重ならないよう前後のスペーシングだけを追加している。 */
/* line 269, app/assets/stylesheets/ad2.scss */
.ad2-arrived-head {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ad2-dark, #013156);
  margin: 16px 12px 0;
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

/* line 270, app/assets/stylesheets/ad2.scss */
.ad2-arrived-head span {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a858f;
  margin-left: 4px;
}

/* line 271, app/assets/stylesheets/ad2.scss */
.ad2-arrived-note {
  font-size: 11.5px;
  color: #6b7680;
  text-align: center;
  margin: -2px 12px 12px;
}

/* line 273, app/assets/stylesheets/ad2.scss */
.ad2-toast {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translate(-50%, -140%);
  background: #1c2630;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 1200;
  transition: transform .3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* line 274, app/assets/stylesheets/ad2.scss */
.ad2-toast.show {
  transform: translate(-50%, 0);
}

/* line 276, app/assets/stylesheets/ad2.scss */
.ad2-next-card {
  background: #fff;
  border: 2px solid #EE7A33;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 12px 4px;
}

/* line 277, app/assets/stylesheets/ad2.scss */
.ad2-next-card .tag {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #EE7A33;
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
}

/* line 278, app/assets/stylesheets/ad2.scss */
.ad2-next-card .ad2-next-body {
  font-size: 13px;
  line-height: 1.6;
  color: #3b4650;
}

/* line 279, app/assets/stylesheets/ad2.scss */
.ad2-next-card button, .ad2-cta-link {
  display: block;
  width: 100%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff !important;
  border: none;
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

/* line 281, app/assets/stylesheets/ad2.scss */
.ad2-sheet-dim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 36, 0.55);
  opacity: 0;
  transition: opacity .3s;
  z-index: 1000;
  display: none;
}

/* line 282, app/assets/stylesheets/ad2.scss */
.ad2-sheet-dim.show {
  opacity: 1;
}

/* line 283, app/assets/stylesheets/ad2.scss */
.ad2-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.2, 1, 0.3, 1);
  z-index: 1001;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 2026-10-28〜: Bootstrap 3の`.show{display:block!important}`との衝突で、.showを足した瞬間
   display:flexがdisplay:blockに潰され、中身が中央寄せされず・あとで/相談リンクが1行に並んで
   しまっていた（追加修正#24で報告された実機の崩れの正体）。display:flex!importantで打ち返す。 */
/* line 287, app/assets/stylesheets/ad2.scss */
.ad2-sheet.show {
  display: flex !important;
  transform: none;
}

/* 2026-10-28〜: 直しメモ追加修正#24。<i>は既定でinline要素のため、幅・高さの指定が効かず
   つまみが実機で見えていなかった（.ic chatアイコンと同じバグパターン）。display:blockで解決。 */
/* line 290, app/assets/stylesheets/ad2.scss */
.ad2-sheet .grab {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 3px;
  background: #d5dbe0;
  flex-shrink: 0;
  align-self: center;
}

/* line 291, app/assets/stylesheets/ad2.scss */
.ad2-sheet .tag {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  align-self: center;
  font-size: 12px;
  font-weight: 900;
  color: #E66400;
  background: #FFF1E0;
  border-radius: 999px;
  padding: 3px 12px;
  text-align: center;
  white-space: nowrap;
}

/* line 292, app/assets/stylesheets/ad2.scss */
.ad2-sheet h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: #1c2329;
  text-align: center;
  line-height: 1.45;
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

/* line 293, app/assets/stylesheets/ad2.scss */
.ad2-sheet p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #3b4650;
  text-align: center;
}

/* line 294, app/assets/stylesheets/ad2.scss */
.ad2-sheet .bx {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: var(--ad2-light, #EAF4FC);
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  color: #3b4650;
}

/* line 295, app/assets/stylesheets/ad2.scss */
.ad2-sheet .bx img {
  width: 44px;
  flex-shrink: 0;
}

/* line 296, app/assets/stylesheets/ad2.scss */
.ad2-sheet .pri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff !important;
  border: none;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

/* line 297, app/assets/stylesheets/ad2.scss */
.ad2-sheet .later {
  background: none;
  border: none;
  color: #5b6670;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* line 298, app/assets/stylesheets/ad2.scss */
.ad2-sheet .concierge-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #1b6fb5;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

/* 直しメモ#30「依頼内容タブを作り直す」。03_依頼内容_改善案.html・04/05画像が仕様。
   お客様用(_ad2_genchi_overview_user)・業者用(_ad2_genchi_overview_store)共通のクラス。
   この.ad2goブロックはそれぞれitems#show／rooms#show配下に追加されるだけの新規要素なので、
   既存の.itemsDetailWrapper等のスタイルとは衝突しない独立したクラス名にしている。 */
/* line 304, app/assets/stylesheets/ad2.scss */
.ad2go {
  font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0;
  color: #1c2329;
}

/* line 305, app/assets/stylesheets/ad2.scss */
.ad2go-hero {
  background: linear-gradient(135deg, #479DE0, #2f7fc4);
  color: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* line 306, app/assets/stylesheets/ad2.scss */
.ad2go-hero.category-fuyouhin {
  background: linear-gradient(135deg, #17A7A0, #0f756f);
}

/* line 307, app/assets/stylesheets/ad2.scss */
.ad2go-hero.category-ihinseiri {
  background: linear-gradient(135deg, #AF78C0, #8c53a3);
}

/* line 308, app/assets/stylesheets/ad2.scss */
.ad2go-hero img {
  width: 52px;
}

/* line 309, app/assets/stylesheets/ad2.scss */
.ad2go-hero-lb {
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
}

/* line 310, app/assets/stylesheets/ad2.scss */
.ad2go-hero-v {
  font-size: 26px;
  font-weight: 900;
}

/* line 311, app/assets/stylesheets/ad2.scss */
.ad2go-hero-acc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* line 312, app/assets/stylesheets/ad2.scss */
.ad2go-hero-acc-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

/* line 313, app/assets/stylesheets/ad2.scss */
.ad2go-hero-acc-bar i {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 4px;
}

/* line 314, app/assets/stylesheets/ad2.scss */
.ad2go-hero-acc span {
  font-size: 11.5px;
  font-weight: 700;
}

/* line 315, app/assets/stylesheets/ad2.scss */
.ad2go-hero-badge {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 900;
}

/* line 317, app/assets/stylesheets/ad2.scss */
.ad2go-sec {
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 318, app/assets/stylesheets/ad2.scss */
.ad2go-sec-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  font-weight: 900;
  color: #1c2329;
}

/* line 319, app/assets/stylesheets/ad2.scss */
.ad2go-sec-h a {
  font-size: 12.5px;
  font-weight: 700;
  color: #1b6fb5;
  text-decoration: underline;
}

/* line 320, app/assets/stylesheets/ad2.scss */
.ad2go-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* line 321, app/assets/stylesheets/ad2.scss */
.ad2go-cards div {
  background: #F4F7FA;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
}

/* line 322, app/assets/stylesheets/ad2.scss */
.ad2go-cards div.warn {
  background: #FFF3E8;
}

/* line 323, app/assets/stylesheets/ad2.scss */
.ad2go-cards .ic {
  font-size: 15px;
}

/* line 324, app/assets/stylesheets/ad2.scss */
.ad2go-cards b {
  font-size: 10.5px;
  color: #5b6670;
  font-weight: 700;
}

/* line 325, app/assets/stylesheets/ad2.scss */
.ad2go-row {
  font-size: 12.5px;
  color: #3b4650;
}

/* line 326, app/assets/stylesheets/ad2.scss */
.ad2go-row b {
  color: #1c2329;
  font-weight: 900;
  margin-right: 4px;
}

/* line 328, app/assets/stylesheets/ad2.scss */
.ad2go-shotrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: #5b6670;
}

/* line 329, app/assets/stylesheets/ad2.scss */
.ad2go-shotrow b {
  font-size: 14px;
  color: #1c2329;
}

/* line 330, app/assets/stylesheets/ad2.scss */
.ad2go-ring {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F0FAF4;
  border: 3px solid #2BB673;
  color: #1d7a46;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 331, app/assets/stylesheets/ad2.scss */
.ad2go-ring.lg {
  width: 64px;
  height: 64px;
  font-size: 17px;
  flex-direction: column;
  background: #F0FAF4;
  border-color: #2BB673;
}

/* line 332, app/assets/stylesheets/ad2.scss */
.ad2go-ring.lg small {
  font-size: 9px;
  font-weight: 700;
}

/* line 334, app/assets/stylesheets/ad2.scss */
.ad2go-skip {
  background: #FDEEF4;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 335, app/assets/stylesheets/ad2.scss */
.ad2go-skip-h {
  font-size: 13px;
  font-weight: 900;
  color: #A3255A;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 336, app/assets/stylesheets/ad2.scss */
.ad2go-skip-h .tag {
  font-size: 10.5px;
  background: #fff;
  border: 1.5px solid #E86A9A;
  border-radius: 999px;
  padding: 1px 8px;
}

/* line 337, app/assets/stylesheets/ad2.scss */
.ad2go-skip-item {
  font-size: 12px;
  color: #5b6670;
}

/* line 338, app/assets/stylesheets/ad2.scss */
.ad2go-skip-item small {
  display: block;
  color: #A3255A;
}

/* line 340, app/assets/stylesheets/ad2.scss */
.ad2go-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--light, #EAF4FC);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #1c2329;
}

/* line 341, app/assets/stylesheets/ad2.scss */
.ad2go-tip img {
  width: 32px;
  flex-shrink: 0;
}

/* line 342, app/assets/stylesheets/ad2.scss */
.ad2go-addbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 8px;
  background: #EE7A33;
  box-shadow: 0 4px 0 #B8521A;
  color: #fff !important;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

/* line 344, app/assets/stylesheets/ad2.scss */
.ad2go.store .ad2go-hero-s {
  background: #F0FAF4;
  border: 1.5px solid #bfe5cf;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 345, app/assets/stylesheets/ad2.scss */
.ad2go-hero-v.dark {
  color: #1d7a46;
  font-size: 22px;
}

/* line 346, app/assets/stylesheets/ad2.scss */
.ad2go-hero-note {
  font-size: 11px;
  color: #3b4650;
  line-height: 1.5;
  margin-top: 2px;
}

/* line 347, app/assets/stylesheets/ad2.scss */
.ad2go-warn {
  background: #FFF3E8;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  color: #B8521A;
  line-height: 1.5;
}

/* line 348, app/assets/stylesheets/ad2.scss */
.ad2go-warn span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #5b6670;
  margin-top: 2px;
}

/* line 349, app/assets/stylesheets/ad2.scss */
.ad2go-warn.peach {
  background: #FDEEF4;
  color: #A3255A;
}

/* line 350, app/assets/stylesheets/ad2.scss */
.ad2go-ok {
  background: #F0FAF4;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  color: #1d7a46;
}

/* line 351, app/assets/stylesheets/ad2.scss */
.ad2go-ok span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #3b4650;
  margin-top: 2px;
}

/* line 352, app/assets/stylesheets/ad2.scss */
.ad2go-divider {
  text-align: center;
  font-size: 11px;
  color: #9aa4ad;
  border-top: 1px dashed #cfd8df;
  padding-top: 10px;
  margin-top: 4px;
}

/* 確認コード画面（§7） */
/* line 355, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap {
  padding: 16px;
  text-align: center;
}

/* line 356, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap h1 {
  font-size: 18px;
  text-align: left;
}

/* line 357, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap .lead {
  font-size: 13px;
  color: var(--sub);
  text-align: left;
  margin-bottom: 20px;
}

/* line 358, app/assets/stylesheets/ad2.scss */
.ad2-form .code-boxes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

/* line 359, app/assets/stylesheets/ad2.scss */
.ad2-form .code-boxes div {
  width: 50px;
  height: 60px;
  border: 2px solid #cfd8df;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  background: #fff;
}

/* line 360, app/assets/stylesheets/ad2.scss */
.ad2-form .code-boxes div.filled {
  border-color: var(--main);
}

/* line 361, app/assets/stylesheets/ad2.scss */
.ad2-form .code-boxes.shake {
  -webkit-animation: ad2shake .4s;
          animation: ad2shake .4s;
}

@-webkit-keyframes ad2shake {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-8px);
  }
  40%, 60% {
    transform: translateX(8px);
  }
}

@keyframes ad2shake {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-8px);
  }
  40%, 60% {
    transform: translateX(8px);
  }
}

/* line 363, app/assets/stylesheets/ad2.scss */
.ad2-form #code-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* line 364, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-error {
  color: var(--red);
  font-size: 13px;
  min-height: 18px;
}

/* line 365, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap button.pri {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  background: var(--main);
  color: #fff;
  border: none;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 4px;
}

/* line 366, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap .resend {
  background: none;
  color: var(--main);
  font-weight: 700;
  font-size: 13px;
  margin-top: 14px;
  border: none;
  cursor: pointer;
}

/* line 367, app/assets/stylesheets/ad2.scss */
.ad2-form .verify-wrap .resend:disabled {
  color: var(--sub);
}