/* Practice-area directory, scoped to areas.php. */
.areas-page{--as-ink:#1e3a5f;--as-body:#53697a;--as-muted:#72818a;--as-line:#dce3d7;--as-paper:#f6f3ec;--as-orange:#b94f0c;background:#fff;color:var(--as-ink);font:14px/1.9 "Noto Sans JP",sans-serif}
.areas-page *{box-sizing:border-box}
.areas-page [hidden]{display:none!important}
.areas-page .container{max-width:1200px}
.areas-page a{color:inherit}
.areas-page :is(a,button,input):focus-visible{outline:3px solid #d99c4b;outline-offset:4px}
.areas-page svg{width:18px;height:18px;stroke-width:1.7;flex-shrink:0}
.as-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--as-paper);padding:20px 0 34px}
.as-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;z-index:-2}
.as-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f6f3ec 0%,rgba(246,243,236,.98) 27%,rgba(246,243,236,.84) 42%,rgba(246,243,236,.08) 69%,transparent)}
.as-hero .container{position:relative}
.as-breadcrumb{display:flex;align-items:center;gap:10px;font-size:10px;line-height:1.8;color:var(--as-body);margin-bottom:25px}
.as-breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.as-eyebrow{font-size:10px;line-height:1.7;letter-spacing:.13em;font-weight:700;color:var(--as-orange);margin:0 0 12px}
.as-hero h1{font:600 37px/1.65 "Noto Serif JP",serif;letter-spacing:.02em;margin:0 0 17px}
.as-hero h1>span{color:#56744c}
.as-hero-lead{font-size:12px;line-height:2;color:var(--as-body);margin:0 0 18px}
.as-hero-link{display:inline-flex;align-items:center;gap:13px;min-height:33px;font-size:11px;font-weight:500;text-decoration:none;border-bottom:1px solid #bbc7b2}
.as-hero-link svg{width:14px;height:14px}
.as-hero-link:hover{color:var(--as-orange)}
.as-image-caption{position:absolute;right:24px;bottom:-13px;padding:3px 8px;border-radius:3px;background:rgba(246,243,236,.86);font-size:8px;line-height:1.7;color:#52675f;margin:0}
.as-role{border-bottom:1px solid #e7eadd;background:#fcfdf9}
.as-role .container{display:flex;align-items:flex-start;gap:8px;padding-top:11px;padding-bottom:11px}
.as-role p{font-size:10px;line-height:1.9;color:var(--as-body);margin:0}
.as-role svg{width:14px;height:14px;color:#7b9270;margin-top:3px}
.as-directory{padding-top:42px;padding-bottom:48px;scroll-margin-top:85px}
.as-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:20px}
.as-section-head .as-eyebrow{margin-bottom:10px}
.as-section-head h2{font:600 29px/1.8 "Noto Serif JP",serif;letter-spacing:.015em;margin:0}
.as-filter{width:340px;flex-shrink:0;margin-bottom:5px}
.as-filter>label{display:block;font-size:10px;font-weight:500;margin-bottom:6px;color:var(--as-body)}
.as-filter-input-wrap{position:relative}
.as-filter-input-wrap>svg{position:absolute;left:13px;top:14px;width:17px;height:17px;color:#7b906e;pointer-events:none}
.as-filter input{display:block;width:100%;height:46px;padding:10px 40px 10px 40px;border:1px solid #d1dcc8;border-radius:6px;background:#f8fbf4;font:12px/1.8 "Noto Sans JP",sans-serif;color:var(--as-ink)}
.as-filter input::placeholder{color:#7b8b8a}
.as-filter input::-webkit-search-cancel-button{-webkit-appearance:none}
.as-filter button{position:absolute;right:4px;top:5px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;color:#667d60;border:0;border-radius:50%;cursor:pointer}
.as-filter button svg{width:16px;height:16px}
.as-filter button:hover{background:#e9f0e0}
.as-directory-note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.as-directory-note>p{font-size:11px;line-height:1.9;color:var(--as-body);margin:0}
.as-directory-note>p:last-child{font-size:10px;flex-shrink:0;color:var(--as-muted)}
.as-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.as-area-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--as-line);border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.as-area-card:hover{border-color:#adbea1;box-shadow:0 6px 22px rgba(30,57,49,.07)}
.as-area-image{position:relative;display:block;width:100%;aspect-ratio:16/8;border-radius:7px 7px 0 0;background:#eef2e8}
.as-area-image>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;border-radius:7px 7px 0 0}
.as-area-icon{display:flex;align-items:center;justify-content:center;position:absolute;left:17px;bottom:-17px;width:38px;height:38px;border-radius:50%;background:#f8fbf3;border:1px solid #dce5d3;color:#6c875d;box-shadow:0 2px 6px rgba(26,57,37,.04)}
.as-area-icon svg{width:20px;height:20px}
.as-guide-badge{position:absolute;right:10px;top:10px;font-size:8px;font-weight:500;line-height:1.7;color:#875118;background:rgba(255,247,232,.97);border:1px solid #ecd6b5;border-radius:3px;padding:3px 6px}
.as-area-body{padding:29px 17px 0;min-width:0}
.as-area-card h3{font:600 20px/1.7 "Noto Sans JP",sans-serif;margin:0 0 8px;overflow-wrap:anywhere}
.as-area-card h3 a{text-decoration:none}
.as-area-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.as-area-lead{font-size:11px;line-height:1.85;min-height:3.7em;color:var(--as-body);margin:0 0 10px}
.as-area-examples{font-size:10px;line-height:1.9;min-height:3.8em;color:var(--as-muted);margin:0 0 19px;overflow-wrap:anywhere}
.as-area-actions{display:flex;flex-direction:column;gap:8px;padding:0 17px 18px;margin-top:auto;min-height:92px}
.as-area-main-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;border-radius:4px;background:#edf3e6;padding:10px 11px;font-size:11px;font-weight:500;line-height:1.8;text-decoration:none}
.as-area-main-link svg{width:13px;height:13px;color:#708d61}
.as-area-main-link:hover{background:#e2ecd7}
.as-area-search-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;align-self:center;min-height:24px;font-size:9px;line-height:1.7;text-decoration:underline;text-underline-offset:4px}
.as-area-search-link svg{width:11px;height:11px;color:#829275}
.as-more-search{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 24px;margin-top:28px;background:#f5f8f0;border:1px solid #dfe7d5;border-radius:6px}
.as-more-search>div{display:flex;align-items:center;gap:13px}
.as-more-search>div>svg{width:24px;height:24px;color:#789467}
.as-more-search p{margin:0}
.as-more-search strong{display:block;font-size:12px;font-weight:500}
.as-more-search p span{display:block;font-size:10px;color:var(--as-body);margin-top:2px}
.as-more-search>a{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:40px;font-size:11px;font-weight:500;text-decoration:none;flex-shrink:0}
.as-more-search>a:hover{text-decoration:underline;text-underline-offset:4px}
.as-more-search>a svg{width:14px;height:14px}
.as-empty{text-align:center;border:1px solid var(--as-line);border-radius:6px;padding:34px 20px;background:#f8faf5}
.as-empty>svg{width:30px;height:30px;color:#7b926e;margin-bottom:14px}
.as-empty h3{font-size:17px;line-height:1.9;font-weight:500;margin:0 0 12px}
.as-empty p{font-size:12px;line-height:1.9;color:var(--as-body);margin:0 0 20px}
.as-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:11px 22px;border:1px solid transparent;border-radius:5px;font:500 12px/1.7 "Noto Sans JP",sans-serif;text-decoration:none;cursor:pointer}
.as-button svg{width:15px;height:15px}
.areas-page .as-button-navy{background:var(--as-ink);border-color:var(--as-ink);color:#fff}
.areas-page .as-button-navy:hover{background:#2b5078}
.as-empty>a{display:table;font-size:11px;line-height:1.8;text-decoration:underline;text-underline-offset:4px;min-height:32px;padding:5px;margin:14px auto 0}
.as-simulators{padding:46px 0 36px;background:#1e3a5f;color:#fff}
.as-simulators .as-eyebrow{color:#eab579}
.as-simulators h2{color:#fff}
.as-section-lead{font-size:11px;line-height:2;color:var(--as-body);margin:0 0 5px}
.as-simulators .as-section-lead{color:#d6e0d9}
.as-simulator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:27px}
.as-simulator-grid>a{display:flex;align-items:center;gap:20px;padding:22px 20px;border:1px solid #728897;border-radius:6px;background:rgba(255,255,255,.035);text-decoration:none}
.as-simulator-grid>a:hover{background:rgba(255,255,255,.11);border-color:#a1b398}
.as-simulator-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #96aa98;border-radius:50%;color:#c4d7ac;flex-shrink:0}
.as-simulator-icon svg{width:23px;height:23px}
.as-simulator-grid>a>div{min-width:0;flex:1}
.as-simulator-grid p{font-size:9px;line-height:1.8;color:#cbd9ce;margin:0 0 5px}
.as-simulator-grid h3{font-size:16px;font-weight:500;line-height:1.8;color:#fff;margin:0 0 13px}
.as-simulator-grid>a>div>span{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;line-height:1.9;color:#e6ede2}
.as-simulator-grid>a>div>span svg{width:13px;height:13px;color:#c5d8b1}
.as-simulator-note{font-size:9px;line-height:1.9;color:#c1d1c7;margin:21px 0 0}
.as-steps{padding-top:47px;padding-bottom:55px}
.as-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:30px 0 0}
.as-step-grid>li{display:flex;align-items:flex-start;gap:12px;position:relative;min-width:0;border-top:1px solid #cbd7c2;padding-top:21px}
.as-step-grid>li>span{font-size:11px;line-height:2;color:#8b9e7d}
.as-step-grid>li>div{min-width:0}
.as-step-grid h3{font-size:15px;font-weight:600;line-height:1.8;margin:0 0 10px;padding-right:25px}
.as-step-grid p{font-size:11px;line-height:2;color:var(--as-body);margin:0}
.as-step-grid>li>svg{position:absolute;right:0;top:24px;width:20px;height:20px;color:#7c956d}
.as-mobile-break{display:none}
@media(max-width:1100px){
 .as-area-grid{gap:17px}.as-area-card h3{font-size:18px}
 .as-area-body{padding-left:14px;padding-right:14px}.as-area-actions{padding-left:14px;padding-right:14px}.as-area-lead{font-size:10px}
 .as-area-main-link{font-size:10px;padding-left:9px;padding-right:9px}
 .as-simulator-grid{gap:17px}.as-simulator-grid>a{gap:13px;padding:20px 16px}.as-simulator-icon{width:41px;height:41px}.as-simulator-grid h3{font-size:14px}
 .as-step-grid{gap:24px}.as-step-grid h3{font-size:13px}
}
@media(max-width:850px){
 .as-hero h1{font-size:33px}.as-hero::before{background:linear-gradient(90deg,#f6f3ec,rgba(246,243,236,.94) 36%,rgba(246,243,236,.66) 60%,rgba(246,243,236,.1))}
 .as-section-head h2{font-size:26px}.as-filter{width:300px}
 .as-area-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
 .as-area-image{aspect-ratio:16/7}
 .as-area-card h3{font-size:20px}.as-area-body{padding-left:18px;padding-right:18px}.as-area-actions{padding-left:18px;padding-right:18px;min-height:90px}.as-area-lead{font-size:12px;min-height:0}.as-area-examples{font-size:11px;min-height:3.8em}
 .as-area-main-link{font-size:11px;padding:10px 13px}.as-area-search-link{font-size:10px}
 .as-simulators .as-section-head{display:block}.as-simulators .as-section-lead{margin-top:16px}
 .as-simulator-grid>a{display:block;padding:21px 17px}.as-simulator-icon{margin-bottom:14px}.as-simulator-grid h3{font-size:14px}
 .as-steps .as-section-head{display:block}.as-steps .as-section-lead{margin-top:14px}
 .as-step-grid{gap:21px}.as-step-grid>li{gap:8px}.as-step-grid h3{font-size:12px}.as-step-grid p{font-size:10px}
}
@media(max-width:639px){
 .as-hero{padding:15px 0 25px}.as-hero-image{object-position:65% 50%}
 .as-hero::before{background:linear-gradient(90deg,rgba(246,243,236,.98),rgba(246,243,236,.9) 52%,rgba(246,243,236,.52))}
 .as-breadcrumb{font-size:9px;gap:7px;margin-bottom:18px}
 .as-eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:10px}
 .as-hero h1{font-size:26px;line-height:1.65;letter-spacing:.015em;margin-bottom:13px}
 .as-hero-lead{font-size:10px;line-height:1.95;margin:0}
 .as-hero-link,.as-image-caption{display:none}
 .as-role .container{gap:6px;padding-top:10px;padding-bottom:10px}
 .as-role p{font-size:9px;line-height:1.9}.as-role svg{width:12px;height:12px}
 .as-directory{padding-top:27px;padding-bottom:31px;scroll-margin-top:80px}
 .as-section-head{display:block;margin-bottom:16px}
 .as-section-head .as-eyebrow{font-size:8px;margin-bottom:7px}
 .as-section-head h2{font-size:24px;line-height:1.7}
 .as-filter{width:100%;margin:19px 0 0}.as-filter>label{font-size:10px;margin-bottom:5px}
 .as-filter input{height:45px;font-size:16px;padding:9px 42px 9px 37px}
 .as-filter input::placeholder{font-size:12px}
 .as-filter-input-wrap>svg{left:11px;top:14px;width:16px;height:16px}
 .as-directory-note{gap:12px;margin-bottom:19px;align-items:flex-start}
 .as-directory-note>p{font-size:9px;line-height:1.9}.as-directory-note>p:last-child{font-size:9px}
 .as-area-grid{gap:16px 12px}
 .as-area-image{aspect-ratio:16/9}
 .as-area-icon{width:30px;height:30px;left:12px;bottom:-14px}.as-area-icon svg{width:16px;height:16px}
 .as-guide-badge{font-size:7px;padding:2px 5px;right:6px;top:6px}
 .as-area-body{padding:25px 12px 0}
 .as-area-card h3{font-size:15px;line-height:1.7;margin-bottom:8px}
 .as-area-lead{font-size:10px;line-height:1.9;min-height:3.8em;margin-bottom:8px}
 .as-area-examples{font-size:9px;line-height:1.9;min-height:5.7em;margin-bottom:14px}
 .as-area-actions{padding:0 12px 14px;gap:6px;min-height:83px}
 .as-area-main-link{font-size:10px;line-height:1.8;min-height:40px;padding:8px 8px;gap:4px}
 .as-area-main-link svg{width:11px;height:11px}
 .as-area-search-link{font-size:8px;min-height:25px;gap:2px}
 .as-area-search-link svg{width:9px;height:9px}
 .as-more-search{display:block;padding:19px 17px;margin-top:21px}
 .as-more-search>div{gap:11px}.as-more-search>div>svg{width:22px;height:22px}
 .as-more-search strong{font-size:11px}.as-more-search p span{font-size:9px}
 .as-more-search>a{margin-left:33px;font-size:11px;min-height:38px;gap:15px;margin-top:8px}
 .as-empty{padding:27px 18px}.as-empty h3{font-size:15px}.as-empty p{font-size:10px}.as-empty .as-button{font-size:11px;min-height:44px}.as-empty>a{font-size:10px}
 .as-simulators{padding:33px 0 28px}
 .as-section-lead{font-size:10px;line-height:1.95}
 .as-simulator-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
 .as-simulator-grid>a{display:flex;padding:18px;gap:16px}
 .as-simulator-icon{width:43px;height:43px;margin:0}.as-simulator-icon svg{width:21px;height:21px}
 .as-simulator-grid p{font-size:9px;margin-bottom:3px}.as-simulator-grid h3{font-size:16px;margin-bottom:8px}
 .as-simulator-grid>a>div>span{font-size:10px}
 .as-simulator-note{font-size:8px;margin-top:17px}
 .as-steps{padding-top:32px;padding-bottom:38px}
 .as-steps .as-section-head h2{font-size:22px}
 .as-step-grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:25px}
 .as-step-grid>li{gap:12px;padding-top:17px}.as-step-grid>li>span{font-size:10px}
 .as-step-grid h3{font-size:14px;margin-bottom:8px}
 .as-step-grid p{font-size:11px;line-height:1.95}
 .as-step-grid>li>svg{width:18px;height:18px;top:21px}
}
@media(max-width:374px){.as-hero h1{font-size:24px}.as-section-head h2{font-size:22px}.as-area-grid{gap:15px 10px}.as-area-body{padding-left:10px;padding-right:10px}.as-area-actions{padding-left:10px;padding-right:10px}.as-area-card h3{font-size:13px}.as-area-main-link{font-size:9px;padding-left:7px;padding-right:7px}.as-area-search-link{font-size:7px}.as-area-lead{font-size:9px}.as-area-examples{font-size:8px}.as-steps .as-section-head h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.areas-page *{transition:none!important;scroll-behavior:auto!important}}
