/* /entry/226/ 採用活動用ポケットフォルダーの作り方 専用CSS */
.pocket-226-page,
.pocket-226-page * { box-sizing: border-box; }
.pocket-226-page {
  min-width: 0;
  color: #26383d;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.86;
  overflow-wrap: anywhere;
}
.pocket-226-page img { display:block; max-width:100%; height:auto; }
.pocket-226-page a { text-underline-offset:.2em; }
.pocket-226-page-title {
  margin:0 0 20px; padding:18px 22px;
  border-bottom:4px solid #315b7d;
  background:#eef4f8; color:#294c61;
  font-size:clamp(1.42rem,2.65vw,2.02rem); line-height:1.48;
}
.pocket-226-hero { margin:0 0 26px; overflow:hidden; border:1px solid #d3dcdd; border-radius:16px; background:#eeebe3; box-shadow:0 10px 28px rgba(31,57,66,.11); }
.pocket-226-hero img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.pocket-226-lead { margin:0 0 30px; padding:clamp(22px,4vw,38px); border:1px solid #c5d6e0; border-radius:16px; background:linear-gradient(135deg,#f2f7fb 0%,#fff 50%,#faf3e9 100%); }
.pocket-226-eyebrow { margin:0 0 8px; color:#3c6f89; font-size:.82rem; font-weight:900; letter-spacing:.13em; }
.pocket-226-lead h2,.pocket-226-final-cta h2 { margin:0 0 16px; color:#2a536a; font-size:clamp(1.34rem,2.55vw,1.88rem); line-height:1.52; }
.pocket-226-lead p,.pocket-226-section>p,.pocket-226-final-cta>p { margin:0 0 14px; }
.pocket-226-lead-actions,.pocket-226-final-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.pocket-226-button { display:inline-flex; min-width:0; min-height:50px; align-items:center; justify-content:center; padding:12px 20px; border:2px solid transparent; border-radius:9px; font-weight:800; line-height:1.45; text-align:center; text-decoration:none!important; transition:background-color .2s,color .2s,border-color .2s,transform .2s; }
.pocket-226-button--product { border-color:#315b7d; background-color:#315b7d; color:#fff!important; }
.pocket-226-button--product:hover,.pocket-226-button--product:focus-visible { border-color:#1f3f59; background-color:#1f3f59; color:#fff!important; transform:translateY(-1px); }
.pocket-226-button--sample { border-color:#7a5a2d; background-color:#7a5a2d; color:#fff!important; }
.pocket-226-button--sample:hover,.pocket-226-button--sample:focus-visible { border-color:#513915; background-color:#513915; color:#fff!important; transform:translateY(-1px); }
.pocket-226-button--estimate { border-color:#922f3b; background-color:#922f3b; color:#fff!important; }
.pocket-226-button--estimate:hover,.pocket-226-button--estimate:focus-visible { border-color:#641a25; background-color:#641a25; color:#fff!important; transform:translateY(-1px); }
.pocket-226-understand { margin:0 0 28px; padding:24px; border:1px solid #d3dfe0; border-radius:14px; background:#fff; }
.pocket-226-understand>h2 { margin:0 0 18px; color:#2d5675; font-size:clamp(1.28rem,2.3vw,1.65rem); }
.pocket-226-understand-grid,.pocket-226-feature-grid,.pocket-226-use-grid,.pocket-226-point-grid,.pocket-226-scenarios,.pocket-226-service-grid,.pocket-226-related-grid { display:grid; gap:18px; }
.pocket-226-understand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pocket-226-understand-grid article { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; padding:17px; border-radius:11px; background:#f0f6fa; }
.pocket-226-understand-grid span { grid-row:1/3; display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:#315b7d; color:#fff; font-weight:900; }
.pocket-226-understand-grid h3 { margin:0 0 5px; color:#2b526f; font-size:1rem; }
.pocket-226-understand-grid p { margin:0; font-size:.93rem; }
.pocket-226-toc { margin:0 0 34px; padding:22px 25px; border-left:5px solid #315b7d; background:#f6f7f5; }
.pocket-226-toc>p { margin:0 0 10px; color:#294f6d; font-weight:900; }
.pocket-226-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 28px; margin:0; padding-left:1.5em; }
.pocket-226-toc a { color:#356987; font-weight:700; }
.pocket-226-section { margin:0 0 38px; padding:clamp(22px,3.5vw,34px); border:1px solid #d8e0e1; border-radius:15px; background:#fff; box-shadow:0 5px 18px rgba(34,59,64,.055); scroll-margin-top:20px; }
.pocket-226-heading { display:flex; gap:15px; align-items:flex-start; margin:0 0 22px; padding-bottom:14px; border-bottom:2px solid #dbe6ec; }
.pocket-226-heading>span { display:flex; flex:0 0 43px; height:43px; align-items:center; justify-content:center; border-radius:10px; background:#315b7d; color:#fff; font-size:.83rem; font-weight:900; }
.pocket-226-heading h2 { margin:1px 0 0; color:#294f6d; font-size:clamp(1.3rem,2.45vw,1.78rem); line-height:1.52; }
.pocket-226-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px; }
.pocket-226-feature-grid article { position:relative; padding:22px 20px 20px 68px; border:1px solid #d8e3e4; border-radius:12px; background:#f7faf9; }
.pocket-226-icon { position:absolute; top:20px; left:18px; display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:9px; background:#dbe9f3; color:#315b7d; font-weight:900; }
.pocket-226-feature-grid h3,.pocket-226-use-grid h3,.pocket-226-point-grid h3,.pocket-226-scenarios h3,.pocket-226-service-grid h3,.pocket-226-check-layout h3 { margin:0 0 8px; color:#2d5675; font-size:1.05rem; }
.pocket-226-feature-grid p,.pocket-226-use-grid p,.pocket-226-point-grid p,.pocket-226-scenarios p,.pocket-226-service-grid p { margin:0; }
.pocket-226-note,.pocket-226-warning { margin-top:22px; padding:20px 22px; border-radius:12px; }
.pocket-226-note { border:1px solid #e0cda9; background:#fff9ee; }
.pocket-226-note--blue { border-color:#bfd4df; background:#f2f7fb; }
.pocket-226-note h3,.pocket-226-warning h3 { margin:0 0 8px; color:#64461e; font-size:1.05rem; }
.pocket-226-note--blue h3 { color:#2d5675; }
.pocket-226-note p,.pocket-226-warning p { margin:0; }
.pocket-226-use-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pocket-226-use-grid article { padding:22px; border:1px solid #d8e1e1; border-radius:12px; background:linear-gradient(180deg,#fff,#f7f8f6); }
.pocket-226-label { margin:0 0 7px!important; color:#8b6938; font-size:.76rem; font-weight:900; letter-spacing:.1em; }
.pocket-226-point-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; }
.pocket-226-point-grid article { padding:19px; border-radius:11px; background:#edf4f9; }
.pocket-226-table-wrap { width:100%; margin-top:20px; overflow-x:auto; border:1px solid #cfdadb; border-radius:12px; background:#fff; -webkit-overflow-scrolling:touch; }
.pocket-226-table { width:100%; min-width:760px; border-collapse:collapse; }
.pocket-226-table caption { padding:14px 16px; background:#edf4f8; color:#3c6069; font-weight:900; text-align:left; }
.pocket-226-table th,.pocket-226-table td { padding:14px 15px; border-top:1px solid #dde5e5; border-right:1px solid #e3e9e9; vertical-align:top; text-align:left; }
.pocket-226-table th:last-child,.pocket-226-table td:last-child { border-right:0; }
.pocket-226-table thead th { background:#315b7d; color:#fff; }
.pocket-226-table tbody th { width:22%; background:#f4f7f9; color:#2d5675; }
.pocket-226-warning { border:1px solid #e6c2c4; background:#fff5f5; }
.pocket-226-warning h3 { color:#7b2b35; }
.pocket-226-steps { display:grid; gap:15px; }
.pocket-226-steps article { display:grid; grid-template-columns:85px minmax(0,1fr); gap:5px 15px; padding:19px 21px; border-left:5px solid #315b7d; border-radius:0 12px 12px 0; background:#f2f7fb; }
.pocket-226-steps span { grid-row:1/3; color:#315b7d; font-size:.78rem; font-weight:900; letter-spacing:.06em; }
.pocket-226-steps h3 { margin:0; color:#2d5675; font-size:1.05rem; }
.pocket-226-steps p { margin:0; }
.pocket-226-scenarios { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:22px; }
.pocket-226-scenarios article { padding:20px; border:1px solid #d9e1df; border-radius:11px; background:#fffdf8; }
.pocket-226-check-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:22px; }
.pocket-226-check-list { margin:0; padding-left:1.4em; }
.pocket-226-check-list li { margin-bottom:9px; }
.pocket-226-check-card { padding:22px; border-radius:13px; background:#315b7d; color:#fff; }
.pocket-226-check-card h3 { color:#fff; }
.pocket-226-check-card ul { margin:0; padding-left:1.25em; }
.pocket-226-check-card li { margin-bottom:8px; }
.pocket-226-service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pocket-226-service-grid article { display:flex; min-width:0; flex-direction:column; padding:21px; border:1px solid #d7e0e0; border-radius:12px; background:#f8faf9; }
.pocket-226-service-grid a { display:inline-block; margin-top:auto; padding-top:13px; color:#356987; font-weight:900; }
.pocket-226-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:22px; }
.pocket-226-related-grid a { display:flex; min-width:0; flex-direction:column; gap:5px; padding:17px 18px; border:1px solid #d7e1e2; border-radius:11px; background:#fff; color:#2d5675; text-decoration:none; }
.pocket-226-related-grid a:hover,.pocket-226-related-grid a:focus-visible { border-color:#315b7d; background:#f0f7f7; color:#203f57; }
.pocket-226-related-grid span { color:#5b6d77; font-size:.9rem; }
.pocket-226-back { margin:22px 0 0!important; text-align:center; }
.pocket-226-back a { color:#356987; font-weight:800; }
.pocket-226-faq details { margin-bottom:12px; border:1px solid #d3dddd; border-radius:10px; background:#fff; }
.pocket-226-faq summary { position:relative; padding:17px 48px 17px 19px; color:#2d5675; font-weight:800; cursor:pointer; list-style:none; }
.pocket-226-faq summary::-webkit-details-marker { display:none; }
.pocket-226-faq summary::after { content:"＋"; position:absolute; top:50%; right:18px; transform:translateY(-50%); color:#315b7d; font-size:1.35rem; }
.pocket-226-faq details[open] summary::after { content:"−"; }
.pocket-226-faq details>div { padding:0 19px 18px; }
.pocket-226-faq details p { margin:0; }
.pocket-226-final-cta { margin:4px 0 12px; padding:clamp(25px,4vw,40px); border:1px solid #b9d1e2; border-radius:16px; background:linear-gradient(135deg,#edf5fb,#fff 58%,#fbf0df); text-align:center; }
.pocket-226-final-actions { justify-content:center; }
@media (max-width:1100px) {
  .pocket-226-use-grid,.pocket-226-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pocket-226-check-layout { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .pocket-226-page-title { padding:15px 16px; }
  .pocket-226-hero { border-radius:10px; }
  .pocket-226-lead,.pocket-226-section { padding:20px 16px; }
  .pocket-226-understand { padding:18px 15px; }
  .pocket-226-understand-grid,.pocket-226-feature-grid,.pocket-226-use-grid,.pocket-226-point-grid,.pocket-226-scenarios,.pocket-226-service-grid,.pocket-226-related-grid { grid-template-columns:1fr; }
  .pocket-226-toc { padding:18px 16px; }
  .pocket-226-toc ol { grid-template-columns:1fr; }
  .pocket-226-heading { gap:11px; }
  .pocket-226-heading>span { flex-basis:38px; height:38px; }
  .pocket-226-steps article { grid-template-columns:1fr; }
  .pocket-226-steps span { grid-row:auto; }
  .pocket-226-lead-actions,.pocket-226-final-actions { display:grid; grid-template-columns:1fr; }
  .pocket-226-button { width:100%; }
}
@media (max-width:480px) {
  .pocket-226-understand-grid article { grid-template-columns:32px minmax(0,1fr); padding:14px; }
  .pocket-226-understand-grid span { width:32px; height:32px; }
  .pocket-226-feature-grid article { padding:18px 15px 18px 61px; }
  .pocket-226-icon { left:15px; }
}