@layer base, el;
@layer base{
/* ---- site base (hand-written) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:#FFFFFF;color:#00053A;font-family:'Noto Sans JP',sans-serif}
picture{display:contents}
img{height:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 16px;background:#00053A;color:#FFFFFF;font-size:14px;text-decoration:none}
.skip:focus{left:8px;top:8px}
.vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* smartphone menu */
.menu:not(.is-open){display:none!important}
.navbtn[aria-expanded="true"] .i-open,.navbtn[aria-expanded="false"] .i-close{display:none!important}
body.menu-open{overflow:hidden}
/* stories filter */
.f-pill[aria-pressed="true"]{background:#00053A!important;color:#FFFFFF!important}
.f-pill[aria-pressed="false"]{background:#FFFFFF!important;color:#00053A!important}
.js-story[hidden]{display:none!important}
/* contact form: theme pills are real checkboxes */
.pill{box-sizing:border-box;line-height:normal;display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
.pill:has(input:checked){background:#00053A!important;color:#FFFFFF!important}
.pill:has(input:checked) span::before{content:"✓ "}
.pill:has(input:focus-visible){outline:2px solid #00053A;outline-offset:3px}
.theme-note{display:none!important}
form:has(input[data-theme="security"]:checked) .theme-note{display:block!important}
.err-list{margin:24px auto 0;padding:0;list-style:none;max-width:560px;text-align:left;font-size:14px;line-height:1.9;color:#00053A}
.err-list li{padding:10px 0 10px 16px;border-bottom:1px solid rgba(0,5,58,.12);position:relative}
.err-list li::before{content:"";position:absolute;left:0;top:21px;width:6px;height:6px;background:#00053A}
.err-list:empty{display:none}
/* Google Map (company page) */
.gmap{position:relative}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) sepia(.18) brightness(1.06) contrast(.86)}
/* touch screens wide enough for the PC layout cannot hover: show the story thumbnails */
@media (hover: none) and (min-width: 960px){.story .thumb{width:200px!important;opacity:1!important}}
/* attachments: "choose files" button + list (built by site.js) */
.fpick-input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;opacity:0!important}
.fpick{margin-top:10px;box-sizing:border-box;border:1px solid rgba(0,5,58,.3);background:#FFFFFF;padding:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.8;color:#00053A}
.fpick-btn{-webkit-appearance:none;appearance:none;margin:0;border:1px solid #00053A;border-radius:0;background:#FFFFFF;color:#00053A;font:inherit;font-weight:700;letter-spacing:.04em;padding:6px 18px;min-height:40px;cursor:pointer}
.fpick-btn:hover{background:#F7F6F5}
.fpick-btn:focus-visible,.fpick-rm:focus-visible{outline:2px solid #00053A;outline-offset:2px}
.fpick-btn:disabled{opacity:.4;cursor:default;background:#FFFFFF}
.fpick-stat{color:#4A4D6A}
.fpick-list{list-style:none;margin:0;padding:0;width:100%}
.fpick-list:empty{display:none}
.fpick-list li{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid rgba(0,5,58,.12)}
.fpick-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fpick-size{flex:none;color:#4A4D6A;font-size:12px}
.fpick-rm{flex:none;-webkit-appearance:none;appearance:none;margin:0;border:0;background:none;color:#00053A;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 2px;min-height:32px}
.fpick-msg{width:100%;margin:0;font-weight:700}
.fpick-msg:empty{display:none}
/* thanks / error / 404: the message right under the header */
.result{padding:clamp(48px,7vw,104px) clamp(20px,5vw,80px) clamp(80px,10vw,144px)}
.result-in{max-width:880px;margin:0 auto}
.result h1{margin-top:0;word-break:keep-all;overflow-wrap:anywhere}
.result-btns{display:flex!important;flex-wrap:wrap;justify-content:center;gap:12px}

.cbtn .circ{transition:background .4s,color .4s,transform .4s cubic-bezier(.2,.7,.1,1)}
.card:hover{color:#00053A}
.btno:hover{background:#00053A !important;color:#FFFFFF !important}
.soft{animation:soft 1.4s ease both;animation-delay:.9s}
.card{text-decoration:none;color:#00053A}
.wipe{display:block;animation:wipe 1.6s cubic-bezier(.7,0,.2,1) both}
.btnp:disabled{background:#9A9CB0 !important;cursor:not-allowed}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #00053A;outline-offset:3px}
@keyframes mk{from{background-size:0% 36%}to{background-size:100% 36%}}
.card .img{transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.btno{transition:background .3s,color .3s}
.kb{animation:kb 24s ease-in-out infinite alternate}
.row{transition:background .4s}
.card .ttl{transition:transform .5s cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 10%}
.mark{animation:mk linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
.vline{animation:vl linear both;animation-timeline:view();animation-range:entry 20% cover 80%}
.hline{animation:hl linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
}}
.cbtn:hover .circ{background:#00053A;color:#FFFFFF;transform:scale(1.08)}
.btnp{transition:background .3s}
.tl::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
@keyframes hl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cbtn{text-decoration:none;color:#00053A}
@keyframes vl{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.tl:hover::after,.tl.cur::after{transform:scaleX(1);transform-origin:left}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);filter:blur(6px)}to{clip-path:inset(0 0 0 0);filter:blur(0)}}
.card:hover .img{transform:scale(1.04)}
.tl{text-decoration:none;position:relative}
.wipe.d1{animation-delay:.25s}.wipe.d2{animation-delay:.5s}
@keyframes rv{from{opacity:0;transform:translateY(28px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
a{color:#00053A}a:hover{color:#2A2F6E}
.card:hover .ttl{transform:translateX(8px)}
.row:hover{background:#F7F6F5}
@keyframes soft{from{opacity:0}to{opacity:1}}
.mark{background-image:linear-gradient(#DCDDEB,#DCDDEB);background-repeat:no-repeat;background-position:0 88%;background-size:100% 36%}
.cbtn:hover{color:#00053A}
.btnp:hover{background:#2A2F6E !important;color:#FFFFFF !important}
.navbtn{background:none;border:0;cursor:pointer;color:#00053A}
@media (prefers-reduced-motion:reduce){.wipe,.soft,.kb,.menu{animation:none}}
.menu{animation:menu .5s cubic-bezier(.2,.7,.1,1) both}
@keyframes menu{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.story{text-decoration:none;color:#00053A}
}