.ft { --ft-sky: url("../assets/img/footer-sky.webp"); --ft-grass: url("../assets/img/footer-grass.webp"); --ft-tulip: url("../assets/img/footer-tulip.webp");
  position: relative; overflow: hidden; isolation: isolate; background: #f6fbd9 var(--ft-sky) center 20% / cover no-repeat; color: var(--ms-ink); padding: clamp(28px, 4vw, 56px) clamp(18px, 6vw, 110px) clamp(190px, 27vw, 400px); }
.ft-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 31.5vw; max-height: 480px; z-index: -2; background: var(--ft-grass) center bottom / 100% auto no-repeat; pointer-events: none; }
.ft-tu { position: absolute; bottom: -3vw; width: clamp(170px, 27vw, 420px); aspect-ratio: 520 / 403; z-index: -1; background: var(--ft-tulip) center / contain no-repeat; pointer-events: none; transform-origin: 50% 100%; }
.ft-tu.l { left: -3vw; } .ft-tu.r { right: -3vw; transform: scaleX(-1); }
.ft-in { max-width: 1500px; margin: 0 auto; }
.ft-logo { display: inline-block; margin: 0 0 clamp(12px, 1.6vw, 20px); }
.ft-about { margin: 0 0 clamp(30px, 5vw, 76px); max-width: 100%; font: 600 clamp(.95rem, 1.45vw, 1.2rem)/1.75 var(--font-te); color: var(--ms-ink); }
.ft-logo img { display: block; height: clamp(64px, 8.5vw, 124px); width: auto; }
.ft-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 90px); padding-left: clamp(0px, 2vw, 40px); }
.ft h2 { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); margin: 0 0 clamp(4px, .8vw, 10px); font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.1; color: var(--ms-ink); }
.ft-lily { flex: none; width: clamp(34px, 4vw, 58px); aspect-ratio: 95 / 99; background: var(--ms-lily-img) center / contain no-repeat; }
.ft-list { list-style: none; margin: 0; padding: 0 0 0 calc(clamp(34px, 4vw, 58px) + clamp(10px, 1.4vw, 18px)); }
.ft-list:has(a:hover) a:not(:hover) { opacity: .5; }
.ft-list a { display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); padding: .08em 0; font-family: var(--font-en); font-weight: 500; font-size: clamp(1.05rem, 1.9vw, 1.65rem); line-height: 1.55; color: var(--ms-ink); text-decoration: none; overflow-wrap: anywhere; }
.ft-list .arrow { flex: none; width: clamp(28px, 3vw, 44px); aspect-ratio: 320 / 200; background: var(--ms-arrow-img) center / contain no-repeat; }
.ft-list .t { position: relative; }
.ft-list a:focus-visible { outline: 3px solid var(--ms-ink); outline-offset: 4px; border-radius: 6px; }
:root { --ic-mail: url(../assets/img/icon-mail.webp); --ic-call: url(../assets/img/icon-call.webp); --ic-wa: url(../assets/img/icon-whatsapp.webp); }
.ft-list .ic { flex: none; width: clamp(26px, 2.8vw, 40px); height: clamp(26px, 2.8vw, 40px); display: inline-flex; align-items: center; justify-content: center; background: center / contain no-repeat; }
.ft-list .ic.ic-call { background-size: auto 95%; }
.ft-list .ic.ic-wa { background-size: 94% auto; }
.ft-list .ic.ic-mail { background-size: 94% auto; }
.ic-mail { background-image: var(--ic-mail) !important; } .ic-call { background-image: var(--ic-call) !important; } .ic-wa { background-image: var(--ic-wa) !important; }
.ft-list .sp { height: clamp(14px, 2vw, 28px); }
.ft-bar { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.8vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 0 14px; font: 600 clamp(12.5px, 1.2vw, 14.5px)/1.4 var(--font-en); color: #0b3d63; }
.ft-click { --c: #0d5f82; position: relative; display: inline-flex; align-items: center; margin-left: 12px; padding: .75em 1.4em; font: 800 11px/1 var(--font-en); letter-spacing: .22em; color: var(--c); text-decoration: none; text-transform: uppercase;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 10px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 10px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 10px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 10px no-repeat;
  transition: background-size .4s cubic-bezier(.3,.9,.3,1), letter-spacing .4s cubic-bezier(.3,.9,.3,1); }
.ft-click .t { position: relative; }
.ft-click:hover, .ft-click:focus-visible { letter-spacing: .3em; background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px; }
.ft-click:focus-visible { outline: 3px solid #0d5f82; outline-offset: 4px; }
@media (max-width: 760px) { .ft-cols { grid-template-columns: 1fr; padding-left: 0; } .ft-tu { width: 44vw; } .ft-grass { height: 52vw; background-size: auto 100%; } .ft { padding-bottom: clamp(190px, 50vw, 300px); } }
@media (prefers-reduced-motion: reduce) { .ft-tu, .ft-lily { animation: none; } .ft-list .arrow, .ft-list .t, .ft-click { transition: none; } }