:root{color-scheme:light;--bg:#ffffff;--fg:#151515;--muted:#62625e;--line:#deded8;--accent:#276d43;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.page{width:min(720px,100%);margin:0 auto;padding:0 40px}
.brand-banner{display:flex;justify-content:center;background:#fff}
.brand-banner img{display:block;width:100%;max-width:640px;height:auto}
.brand-statement{padding:24px 0 30px;border-bottom:1px solid var(--line);text-align:center}
.brand-statement h1{font-size:23px;line-height:1.8;letter-spacing:.4px;margin:0;font-weight:500}
main{padding:36px 0 48px}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
h2{font-size:31px;letter-spacing:-1.2px;font-weight:500;margin:0}
.section-heading>span{font-size:10px;color:var(--muted);letter-spacing:1px}
.intro{font-size:13px;color:var(--muted);line-height:1.95;margin:17px 0 27px}
.links{display:flex;flex-direction:column;gap:12px}
.link-row{position:relative;display:flex;min-height:104px;gap:16px;align-items:center;border:1.5px solid #c5c8c2;border-radius:12px;padding:20px;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.link-row[href]{cursor:pointer;box-shadow:0 2px 5px rgb(0 0 0 / 4%)}
.link-row[href]:hover{background:#f4f7f3;border-color:#64806d;box-shadow:0 4px 12px rgb(0 0 0 / 8%)}
.link-row[href]:active{transform:scale(.985);box-shadow:none}
.line-row{background:#f1faf4;border-color:#8bbb9b}
.line-row[href]:hover{background:#e6f5ec;border-color:#287e49}
.email-row{background:#f8f8f7;border-color:#b9bcb5}
.email-row[href]:hover{background:#f0f0ed;border-color:#4b4c48}
.channel-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #cecec7;border-radius:50%}
.line-row .channel-icon{color:var(--accent);border-color:#a7c5b0}
.link-copy{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.link-label{font-size:15px;font-weight:600;letter-spacing:.3px}
.link-detail{font-size:10px;color:var(--muted);line-height:1.4}
.status{font-size:9px;border:1px solid #cecec7;border-radius:3px;padding:5px 7px;color:#62625e;white-space:nowrap}
.link-row[aria-disabled="true"]{cursor:default;background:#fafafa;border-color:#e1e1dc;color:#70706c}
.link-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:46px;padding:0 16px;border-radius:8px;background:#20221f;color:#fff;font-size:13px;font-weight:700;white-space:nowrap}
.line-row .link-action{background:#087a38}
.arrow{width:16px;height:16px;flex:none}
.email-address{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 0;color:var(--muted);font-size:10px}
#email-text{overflow-wrap:anywhere;line-height:1.7;user-select:all}
#copy-email{border:0;background:none;color:var(--muted);display:flex;gap:6px;align-items:center;padding:8px 0 8px 8px;cursor:pointer;white-space:nowrap;font-size:9px;min-height:44px}
#copy-email svg{width:13px;height:13px}
#copy-email:hover{color:var(--fg)}
.save-contact{display:flex;gap:10px;align-items:center;font-size:12px;padding:18px 0;border-top:1px solid var(--line);color:#343431;min-height:56px}
.save-contact>svg{width:17px;height:17px}
.save-contact:hover{color:var(--accent)}
.save-note{color:var(--muted);font-size:9px;margin-left:auto}
footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;height:78px;color:var(--muted);font-size:8px;letter-spacing:1px}
.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,16px);padding:13px 20px;border-radius:4px;border:1px solid #bdd3c0;background:#f4f8f3;color:var(--fg);font-size:12px;line-height:1.7;text-align:center;max-width:calc(100vw - 32px);width:max-content;opacity:0;pointer-events:none;transition:.2s}
.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){
 .page{max-width:480px;padding:0 28px}
 .brand-statement{padding:22px 0 26px}
 .brand-statement h1{font-size:17px;letter-spacing:.2px}
 main{padding:27px 0}
 h2{font-size:26px}.intro{font-size:11px;margin:12px 0 19px}.intro br{display:none}
 .link-row{min-height:98px;gap:10px;padding:16px 12px}.channel-icon{width:36px;height:36px}.channel-icon svg{width:21px;height:21px}
 .link-label{font-size:14px;line-height:1.5}.link-copy{gap:5px}.link-detail{font-size:10px;line-height:1.5}
 .link-action{min-height:44px;gap:5px;padding:0 10px;font-size:11px}.arrow{width:14px;height:14px}
 .email-address{padding:9px 0;font-size:9px;gap:5px}#copy-email{font-size:9px;gap:4px}
 .save-contact{font-size:11px;min-height:55px;padding:17px 0}.save-note{font-size:8px}
 footer{height:66px;font-size:7px;letter-spacing:.6px;gap:12px}
}
@media(max-width:359px){.page{padding:0 20px}.link-row{gap:8px}.link-label{font-size:13px}.channel-icon{width:32px;height:32px}.link-action{font-size:10.5px;padding:0 8px;gap:4px}.brand-statement h1{font-size:16px}.section-heading>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* The language control stays in the physical top-right corner in both reading directions. */
.language-tools {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 4px;
}
.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 14px;
  border: 1px solid #ced8d0;
  border-radius: 24px;
  background: white;
  color: #1c3426;
  cursor: pointer;
}
.language-picker > svg { width: 17px; height: 17px; color: var(--accent); }
.language-caption { font-size: 12px; }
#language-name {
  padding-left: 9px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.language-chevron {
  width: 7px;
  height: 7px;
  margin: -3px 1px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
#language-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.language-picker:hover { border-color: var(--accent); }
.language-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
html:not(:lang(ja)) .ja-connect-note { display: none; }
.intro { white-space: pre-line; }
.brand-statement h1, h2, .link-copy, .link-action, .status { overflow-wrap: anywhere; }
.link-label { line-height: 1.5; }
.save-note { margin-left: 0; margin-inline-start: auto; }
html[dir="rtl"] :is(h1,h2,.link-label,footer) { letter-spacing: normal; }
html[dir="rtl"] .link-action .arrow { transform: scaleX(-1); }
footer {
  flex-wrap: wrap;
  height: auto;
  min-height: 78px;
  padding: 18px 0;
}
@media (max-width: 760px) {
  .intro { white-space: normal; }
  footer { min-height: 66px; }
  html:not(:lang(ja)) .link-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
  }
  html:not(:lang(ja)) .channel-icon { grid-column: 1; grid-row: 1; align-self: start; }
  html:not(:lang(ja)) .link-copy { grid-column: 2; grid-row: 1; }
  html:not(:lang(ja)) :is(.link-action, .status) {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    line-height: 1.5;
    text-align: center;
  }
  html:not(:lang(ja)) .link-action { padding: 9px 12px; }
  html:not(:lang(ja)) .save-contact { display: grid; grid-template-columns: 17px minmax(0, 1fr); row-gap: 4px; }
  html:not(:lang(ja)) .save-note { grid-column: 2; margin: 0; }
}
