/* 165（2026-10-08）AIKATA「社員のような相方」 本文16px以上（スマホ14px以上） */

/* ── FV：チャット ── */
html body.aikata .chat165{align-self:center;display:flex;flex-direction:column;width:100%;max-width:440px;margin-left:auto;border-radius:24px;overflow:hidden;background:#fbfaff;border:1px solid rgba(255,255,255,.4)}
.chat165-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid #ece7fb}
.chat165-head img{width:44px;height:44px;border-radius:50%}
.chat165-head b{display:block;font:700 18px/1.2 Arial,'Noto Sans JP',sans-serif;color:#29243c;letter-spacing:.06em}
.chat165-head small{display:flex;align-items:center;gap:6px;font-size:14px;color:#5d5776}
.chat165-head small i{width:8px;height:8px;border-radius:50%;background:#3ccf8e;animation:c165blink 2s ease-in-out infinite}
@keyframes c165blink{50%{opacity:.35}}
.chat165-log{display:flex;flex-direction:column;gap:10px;padding:18px 16px;min-height:300px}
.c165{margin:0;max-width:86%;font-size:15px;line-height:1.7;opacity:0;animation:c165in .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.9s + var(--d) * .9s)}
.c165.me{align-self:flex-end;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#29243c;color:#fff}
.c165.typing{display:flex;gap:5px;align-self:flex-start;padding:12px 14px;border-radius:16px;background:#ece7fb;animation:c165in .3s both,c165out .3s both;animation-delay:calc(.9s + 3 * .9s),calc(.9s + 4 * .9s - .1s)}
.c165.typing i{width:7px;height:7px;border-radius:50%;background:#8f7dff;animation:c165dot 1s ease-in-out infinite}
.c165.typing i:nth-child(2){animation-delay:.15s}.c165.typing i:nth-child(3){animation-delay:.3s}
.c165.ai{display:flex;align-items:flex-start;gap:10px;align-self:flex-start;max-width:96%}
.c165.ai img{flex:none;width:40px;height:40px;border-radius:50%}
.c165.ai p{margin:0;padding:12px 14px;border-radius:4px 16px 16px 16px;background:linear-gradient(135deg,#4b3bd0,#7b68f0);color:#fff;font-size:15px;line-height:1.75}
.c165.ai b{color:#f3c876}
@keyframes c165in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes c165out{to{opacity:0;height:0;padding:0;margin:-10px 0 0}}
@keyframes c165dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.chat165-foot{padding:14px 16px 16px;background:#fff;border-top:1px solid #ece7fb}
.chat165-foot>p{margin:0 0 10px!important;font-size:14px;font-weight:700;color:#4b3bd0}
.chat165-chips{display:grid;gap:8px}
.chat165-chips a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:#f6f3ff;border:1px solid #ddd5f3;color:#29243c!important;font-size:15px;font-weight:700;text-decoration:none!important;transition:background-color .2s,border-color .2s,transform .2s}
.chat165-chips a span{color:#4b3bd0;transition:transform .2s}
@media(hover:hover){.chat165-chips a:hover{background:#f3c876;border-color:#f3c876;transform:translateY(-1px)}.chat165-chips a:hover span{transform:translateX(3px);color:#29243c}}
.chat165-foot small{display:block;margin-top:10px;font-size:14px;color:#5d5776}
@media(prefers-reduced-motion:reduce){.c165{opacity:1;animation:none}.c165.typing{display:none}}
@media(min-width:601px){.c165,.c165.ai p,.chat165-chips a{font-size:16px}}

/* 価値セクション：AIKATAの箱に案内役 */
html body.aikata .v151-mate{display:block;width:56px;height:56px;margin:0 auto 8px;border-radius:50%;border:3px solid rgba(255,255,255,.6)}

/* ── 料金：稼働時間ダイヤル ── */
html body.aikata .dial165{margin:28px 0 0;padding:32px;border-radius:22px;background:#fff;border:1px solid #ddd5f3}
.dial165-head{text-align:center;margin-bottom:22px}
.dial165-head h3{margin:0 0 10px;font-size:26px;color:#29243c}
.dial165-head p{margin:0;font-size:16px;color:#3d3757}
.dial165-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
.dial165-gauge{text-align:center}
.dial165-gauge svg{display:block;width:100%;max-width:340px;margin:0 auto}
.dial165-arc{transition:stroke-dashoffset .35s cubic-bezier(.22,1,.36,1)}
.dial165-needle{transform-box:view-box;transform-origin:120px 120px;transform:rotate(0deg);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.dial165-num{margin:-6px 0 14px!important;font-size:18px;font-weight:700;color:#29243c}
.dial165-num b{font:700 52px/1 Arial,'Noto Sans JP',sans-serif;color:#4b3bd0;margin-right:4px}
.dial165-gauge input{--p:37.5%;-webkit-appearance:none;appearance:none;width:100%;max-width:340px;height:12px;border-radius:12px;background:linear-gradient(90deg,#4b3bd0 0 var(--p),#ece7fb var(--p));outline-offset:6px}
.dial165-gauge input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#f3c876;border:6px solid #29243c;cursor:grab}
.dial165-gauge input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#f3c876;border:6px solid #29243c}
.dial165-scale{display:flex;justify-content:space-between;max-width:340px;margin:6px auto 0!important;font-size:14px;color:#5d5776}
.dial165-plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 16px!important;padding:16px 20px;border-radius:16px;background:#29243c;color:#fff;font-size:16px}
.dial165-plan span{padding:3px 12px;border-radius:999px;background:#f3c876;color:#29243c;font-weight:700}
.dial165-plan b{font:700 30px/1.2 'Noto Sans JP',sans-serif;margin-left:auto}
.dial165-plan small{font-size:14px;opacity:.8}
.dial165-lbl{margin:0 0 8px!important;font-size:16px;font-weight:700;color:#4b3bd0}
.dial165-tasks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dial165-tasks li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 10px 44px;position:relative;border-radius:12px;background:#f7f6fa;color:#9a95ad;font-size:16px;transition:background-color .25s,color .25s}
.dial165-tasks li::before{content:'';position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid #cdc7de;background:#fff;transition:all .25s}
.dial165-tasks li.is-on{background:#f1eefc;color:#29243c;font-weight:700}
.dial165-tasks li.is-on::before{border-color:#4b3bd0;background:#4b3bd0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.dial165-tasks li.is-extra{background:#fff7e6;color:#29243c}
.dial165-tasks li.is-extra::before{border-color:#e0a83a;background:#f3c876}
.dial165-tasks small{font-size:14px;font-weight:400;white-space:nowrap}
.dial165-note{margin:12px 0 0!important;font-size:14px;color:#5d5776}

/* ── 社員証カード ── */
html body.aikata .card165{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin:28px 0 0;padding:32px;border-radius:22px;background:linear-gradient(135deg,#29243c,#4b3bd0);color:#fff}
.card165-eyebrow{margin:0 0 8px!important;font:700 14px/1 Arial,sans-serif;letter-spacing:.16em;color:#f3c876}
.card165-copy h3{margin:0 0 12px;font-size:28px;line-height:1.45;color:#fff}
.card165-copy>p{margin:0 0 16px!important;font-size:16px;line-height:1.85;color:#e4e0f5}
.card165-in{display:grid;gap:6px;font-size:14px;font-weight:700;color:#f3c876}
.card165-in input{padding:14px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px}
.card165-in input::placeholder{color:rgba(255,255,255,.55)}
.card165-in input:focus{outline:none;border-color:#f3c876;background:rgba(255,255,255,.14)}
.card165-safe{margin:8px 0 0!important;font-size:14px;color:#cfc9e6}
.card165-id{position:relative;max-width:380px;margin:0 auto;padding:22px 24px 20px;border-radius:20px;background:#fff;color:#29243c;transform:rotate(-2deg);transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
.card165.is-flip .card165-id{animation:c165flip .5s cubic-bezier(.34,1.4,.64,1)}
@keyframes c165flip{0%{transform:rotate(-2deg) scale(1)}40%{transform:rotate(1deg) scale(1.03)}100%{transform:rotate(-2deg) scale(1)}}
@media(hover:hover){.card165-id:hover{transform:rotate(0deg) translateY(-4px)}}
.card165-strap{position:absolute;left:50%;top:-38px;width:22px;height:46px;margin-left:-11px;border-radius:6px;background:#f3c876}
.card165-strap::after{content:'';position:absolute;left:50%;bottom:-4px;width:46px;height:12px;margin-left:-23px;border-radius:6px;background:#29243c}
.card165-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:14px;border-bottom:2px dashed #ece7fb}
.card165-top span{font:700 14px/1 Arial,sans-serif;letter-spacing:.14em;color:#8f7dff}
.card165-top b{font:700 18px/1 Arial,sans-serif;letter-spacing:.1em;color:#4b3bd0}
.card165-main{display:flex;gap:16px;align-items:center}
.card165-main img{flex:none;width:96px;height:96px;border-radius:16px;background:#ece7fb}
.card165-co{margin:0!important;font-size:16px;font-weight:700;color:#4b3bd0;word-break:break-all}
.card165-dept{margin:2px 0 6px!important;font-size:14px;color:#5d5776}
.card165-name{margin:0!important;font:700 26px/1.2 Arial,'Noto Sans JP',sans-serif;letter-spacing:.06em}
.card165-name small{display:block;margin-top:4px;font-size:14px;font-weight:700;letter-spacing:0;color:#5d5776}
.card165-dl{margin:16px 0 10px;display:grid;gap:6px}
.card165-dl>div{display:grid;grid-template-columns:4.5em 1fr;gap:8px;font-size:14px}
.card165-dl dt{color:#8f7dff;font-weight:700}
.card165-dl dd{margin:0;font-weight:700}
.card165-no{margin:0!important;font:700 14px/1 'Courier New',monospace;letter-spacing:.1em;color:#9a95ad;text-align:right}
@media(min-width:601px){.card165-in,.card165-safe,.card165-dl>div,.card165-dept,.card165-name small,.dial165-tasks small,.dial165-note,.dial165-scale,.dial165-plan small,.chat165-head small,.chat165-foot>p,.chat165-foot small{font-size:16px}}

@media(max-width:900px){
  .dial165-body,html body.aikata .card165{grid-template-columns:1fr;gap:24px}
  html body.aikata .dial165,html body.aikata .card165{padding:22px 16px}
  .dial165-head h3{font-size:21px}
  .card165-copy h3{font-size:23px}
  .card165-id{margin-top:30px}
}
@media(max-width:600px){
  html body.aikata .chat165{max-width:none;margin-top:24px}
  .chat165-log{min-height:0;padding:14px 12px}
  .dial165-num b{font-size:42px}
  .dial165-plan b{font-size:24px}
  .card165-main img{width:72px;height:72px}
  .card165-name{font-size:22px}
}

/* 165b：既存の「画像は横幅いっぱい」指定に負けないよう、アイコンの大きさを固定 */
html body.aikata .chat165 img,html body.aikata .card165 img,html body.aikata img.v151-mate{max-width:none!important;flex:none!important;aspect-ratio:1/1;object-fit:cover;min-width:0!important}
html body.aikata .chat165-head img{width:44px!important;height:44px!important}
html body.aikata .c165.ai img{width:40px!important;height:40px!important}
html body.aikata .card165-main img{width:96px!important;height:96px!important}
html body.aikata img.v151-mate{width:56px!important;height:56px!important}
html body.aikata .card165-main>div{min-width:0;flex:1}
html body.aikata .c165.ai p{flex:1;min-width:0}
@media(max-width:600px){html body.aikata .card165-main img{width:72px!important;height:72px!important}}
html body.aikata[data-ak165] main .card165-dl>div{align-items:baseline!important;padding:0!important;border:0!important}
html body.aikata[data-ak165] main .card165-dl :is(dt,dd){margin:0!important;padding:0!important;border:0!important;line-height:1.6!important}
/* 既存の html body.aikata[data-titles117] main img（16:9・横幅いっぱい）より強く */
html body.aikata[data-ak165] main :is(.chat165,.card165,.v151-core) img{aspect-ratio:1/1!important;max-width:none!important;object-fit:cover}
html body.aikata[data-ak165] main .chat165-head img{width:44px!important;height:44px!important}
html body.aikata[data-ak165] main .c165.ai img{width:40px!important;height:40px!important}
html body.aikata[data-ak165] main .card165-main img{width:96px!important;height:96px!important}
html body.aikata[data-ak165] main img.v151-mate{width:56px!important;height:56px!important}
@media(max-width:600px){html body.aikata[data-ak165] main .card165-main img{width:72px!important;height:72px!important}}
@media(min-width:601px){html body.aikata .card165-top span,html body.aikata .card165-no,html body.aikata .card165-eyebrow{font-size:16px!important}}
html body.aikata .card165{margin-bottom:40px!important}

/* 181（2026-10-09）ダイヤル：スライダーと目盛りの位置を合わせる
   - スライダーはゲージの真下・幅340pxに固定（下層の input 共通指定に負けないように）
   - 目盛り（16・30・50・80）は等間隔ではなく値の位置に置く。つまみ（32px）の中心が動く範囲＝左右16pxを除いた幅 */
html body.aikata .dial165-gauge input[type=range]{display:block!important;box-sizing:border-box;width:100%!important;max-width:340px!important;height:12px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:12px!important;background:linear-gradient(90deg,#4b3bd0 0 var(--p),#ece7fb var(--p))!important}
html body.aikata .dial165-scale{position:relative;display:block!important;width:100%!important;max-width:340px!important;height:1.7em;margin:12px auto 0!important;padding:0!important}
html body.aikata .dial165-scale span{position:absolute;top:0;left:calc(16px + (100% - 32px) * var(--f));transform:translateX(-50%);line-height:1.7}
html body.aikata .dial165-scale span:nth-child(1){--f:0}
html body.aikata .dial165-scale span:nth-child(2){--f:.21875}
html body.aikata .dial165-scale span:nth-child(3){--f:.53125}
html body.aikata .dial165-scale span:nth-child(4){--f:1}
html body.aikata .dial165-scale span{white-space:nowrap}

/* 195：全項目がそろった後（69時間〜）、余った時間で厚くする施策 */
.dial165-tasks li.is-deep195{background:#fff7e6}
.dial165-tasks li.is-deep195 small{font-weight:700;color:#8a5a00}
.dial165-tasks li em{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#f3c876;color:#29243c;font-style:normal;font-size:14px;font-weight:700;vertical-align:2px}
@media(min-width:601px){.dial165-tasks li em{font-size:16px}}