:root { --ink:#172033; --muted:#697386; --paper:#fbfbfa; --line:#dfe4e8; --blue:#4668e9; --blue-dark:#2f4fc8; --lavender:#eef0ff; --green:#cbf0d7; --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; max-width:var(--max); padding:0 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:1.05rem; letter-spacing:.1em; font-weight:800; white-space:nowrap; }.brand span { color:var(--blue); font-weight:500; }
.site-nav { display:flex; gap:30px; font-size:.9rem; }.site-nav a { color:#41506a; }.site-nav a:hover,.text-link:hover { color:var(--blue); }
.menu-button { display:none; border:0; background:transparent; color:var(--ink); font:inherit; }
.hero { min-height:525px; max-width:var(--max); margin:auto; padding:90px 28px 70px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; }
.eyebrow { margin:0 0 10px; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2,h3,p { margin-top:0; }.hero h1 { margin-bottom:24px; font-size:clamp(1.9rem,4.7vw,3.5rem); letter-spacing:-.06em; line-height:1.25; white-space:nowrap; }.hero-copy>p:not(.eyebrow) { max-width:480px; color:var(--muted); font-size:1.05rem; }
.button { display:inline-flex; align-items:center; gap:16px; margin-top:14px; padding:13px 20px; border-radius:999px; font-size:.9rem; font-weight:700; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.primary { background:var(--ink); color:#fff; }.primary:hover { background:var(--blue-dark); }
.hero-mark { position:relative; width:min(330px,70vw); aspect-ratio:1; justify-self:end; display:grid; place-items:center; border-radius:45% 55% 62% 38% / 42% 35% 65% 58%; background:var(--lavender); overflow:hidden; }.hero-mark span { position:relative; z-index:1; color:var(--blue); font:bold 12rem/1 Georgia,serif; letter-spacing:-.15em; }.hero-mark i { position:absolute; width:200px; height:200px; border:2px solid #b9c1ff; border-radius:50%; }.hero-mark i:nth-of-type(1) { top:-105px; right:-60px; }.hero-mark i:nth-of-type(2) { width:125px; height:125px; bottom:-30px; left:-20px; }.hero-mark i:nth-of-type(3) { width:45px; height:45px; top:36px; left:36px; background:var(--green); border:0; }
.section { padding:105px 28px; }.apps-section { background:#fff; }.section-heading { max-width:var(--max); margin:0 auto 40px; }.section-heading h2,.support-copy h2,.policy-page h1,.not-found h1 { margin-bottom:8px; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.055em; line-height:1.2; }.section-heading>p:not(.eyebrow) { color:var(--muted); }
.app-grid { max-width:var(--max); margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }.app-card { min-height:0; padding:30px; display:flex; gap:27px; border:1px solid var(--line); border-radius:18px; background:#fff; transition:box-shadow .2s,transform .2s; }.app-card:hover { box-shadow:0 14px 35px rgba(26,38,74,.09); transform:translateY(-3px); }.app-card.featured { grid-column:span 2; background:var(--lavender); border-color:transparent; }.app-card img { align-self:flex-start; width:104px; height:104px; object-fit:cover; border-radius:24%; box-shadow:0 8px 16px rgba(18,27,54,.13); }.featured img { width:148px; height:148px; }.app-content { display:flex; flex:1; flex-direction:column; }.app-type { margin-bottom:4px; color:var(--blue); font-size:.67rem; font-weight:800; letter-spacing:.13em; }.app-card h3 { margin-bottom:7px; font-size:1.55rem; letter-spacing:-.04em; }.app-card p:not(.app-type) { color:var(--muted); font-size:.9rem; line-height:1.75; }.text-link { margin-top:auto; padding-top:16px; color:var(--ink); font-size:.85rem; font-weight:700; }.status { margin-top:auto; padding-top:16px; color:var(--muted); font-size:.72rem; letter-spacing:.15em; font-weight:800; }.coming-soon { background:#f6f7f8; }
.updates-section { background:#f0f3f5; }.update-list { max-width:var(--max); margin:0 auto; padding:0; list-style:none; border-top:1px solid var(--line); }.update-list li { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }.update-list time { color:var(--blue); font-size:.82rem; font-weight:700; }.update-list p { margin:0; font-size:.95rem; }.update-list strong { font-weight:700; }
.support-section { max-width:var(--max); margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }.support-copy>p:not(.eyebrow) { color:var(--muted); }.contact-form { padding:30px; border-radius:18px; background:#fff; border:1px solid var(--line); }.form-row { display:grid; gap:6px; margin-bottom:18px; }.form-row label { font-size:.83rem; font-weight:700; }.form-row label span { color:var(--muted); font-weight:400; }.form-row label b { color:var(--blue); font-size:.7rem; } input,select,textarea { width:100%; padding:11px 12px; border:1px solid #cbd3dc; border-radius:8px; color:var(--ink); background:#fff; font:inherit; font-size:.92rem; } input:focus,select:focus,textarea:focus { outline:3px solid #d9e0ff; border-color:var(--blue); }.contact-form .button { border:0; cursor:pointer; }.form-note { margin:14px 0 0; color:var(--muted); font-size:.75rem; }
.site-footer { max-width:var(--max); margin:auto; padding:35px 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.76rem; }.site-footer p { margin:7px 0 0; }.site-footer div { text-align:right; }.site-footer a:not(.brand) { color:var(--ink); }
.policy-page,.not-found { max-width:760px; min-height:calc(100vh - 160px); margin:auto; padding:90px 28px; }.policy-page h1 { margin-bottom:28px; }.policy-meta { padding:20px; border-radius:10px; background:var(--lavender); color:#43506b; font-size:.86rem; }.policy-page section { margin:50px 0; }.policy-page h2 { font-size:1.25rem; letter-spacing:-.03em; }.policy-page section p { color:#48546a; }.back-link { display:inline-block; margin-top:12px; }.not-found { text-align:center; display:grid; align-content:center; justify-items:center; }.not-found p:not(.eyebrow) { color:var(--muted); }
@media (max-width:720px) { .site-header { height:64px; padding:0 20px; position:relative; }.menu-button { display:block; font-size:.82rem; font-weight:700; }.site-nav { display:none; }.site-nav.is-open { display:grid; position:absolute; z-index:10; top:60px; left:14px; right:14px; gap:0; padding:8px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 15px 32px rgba(20,30,60,.12); }.site-nav.is-open a { padding:12px 0; border-bottom:1px solid var(--line); }.site-nav.is-open a:last-child { border:0; }.policy-nav { display:flex; gap:16px; }.hero { min-height:0; padding:60px 25px 65px; grid-template-columns:1fr; gap:25px; }.hero h1 { font-size:clamp(1.9rem,8vw,3rem); }.hero-mark { width:180px; justify-self:start; }.hero-mark span { font-size:7rem; }.hero-mark i:nth-of-type(3) { top:20px; left:20px; }.section { padding:70px 20px; }.app-grid { grid-template-columns:1fr; }.app-card,.app-card.featured { grid-column:auto; min-height:0; padding:22px; gap:18px; }.app-card img,.featured img { width:80px; height:80px; border-radius:22%; }.app-card h3 { font-size:1.3rem; }.app-card p:not(.app-type) { font-size:.84rem; }.update-list li { grid-template-columns:1fr; gap:3px; }.support-section { display:block; }.support-copy { margin-bottom:35px; }.contact-form { padding:22px; }.site-footer { padding:30px 20px; align-items:flex-start; }.site-footer div { text-align:right; }.policy-page,.not-found { padding:60px 22px; }.policy-nav a:nth-child(n+3) { display:none; } }
/* App detail pages */
.breadcrumb { max-width:var(--max); margin:0 auto; padding:8px 28px 0; display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.78rem; }.breadcrumb a:hover { color:var(--blue); }
.app-hero { max-width:var(--max); margin:auto; padding:56px 28px 80px; display:grid; grid-template-columns:200px 1fr; gap:48px; align-items:center; }
.app-hero-icon { width:200px; height:200px; border-radius:23%; box-shadow:0 18px 40px rgba(18,27,54,.16); }
.app-hero h1 { margin-bottom:10px; font-size:clamp(2.4rem,5vw,3.8rem); letter-spacing:-.06em; line-height:1.1; }
.lead { max-width:560px; color:var(--muted); font-size:1.05rem; }
.badges { margin:18px 0 8px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }.badges li { padding:4px 12px; border-radius:999px; background:var(--lavender); color:#3b4a80; font-size:.78rem; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }.button.secondary { background:transparent; border:1px solid #c5ccd6; color:var(--ink); }.button.secondary:hover { background:#fff; border-color:var(--blue); color:var(--blue); }
.detail-section { max-width:none; }.detail-section.alt { background:#f0f3f5; }.detail-section>* { max-width:var(--max); margin-left:auto; margin-right:auto; }
.gallery { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 0 16px; -webkit-overflow-scrolling:touch; }.gallery figure { flex:0 0 min(460px,84vw); margin:0; scroll-snap-align:start; }.gallery img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 10px 26px rgba(18,27,54,.1); }.gallery figcaption { margin-top:10px; color:var(--muted); font-size:.82rem; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }.feature { padding:28px; border-radius:18px; background:#fff; border:1px solid var(--line); }.feature h3 { margin-bottom:8px; font-size:1.1rem; letter-spacing:-.02em; }.feature p { margin:0; color:var(--muted); font-size:.92rem; }
.steps { padding:0; list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.steps li { counter-increment:step; padding:26px; border-radius:18px; border:1px solid var(--line); background:#fff; }.steps li::before { content:counter(step); display:grid; place-items:center; width:34px; height:34px; margin-bottom:14px; border-radius:50%; background:var(--ink); color:#fff; font-weight:800; font-size:.9rem; }.steps h3 { margin-bottom:6px; font-size:1.05rem; }.steps p { margin:0; color:var(--muted); font-size:.9rem; }
.faq { display:grid; gap:10px; }.faq details { border:1px solid var(--line); border-radius:12px; background:#fff; }.faq summary { padding:16px 20px; cursor:pointer; font-weight:700; font-size:.95rem; list-style:none; display:flex; justify-content:space-between; gap:16px; }.faq summary::-webkit-details-marker { display:none; }.faq summary::after { content:"+"; color:var(--blue); font-size:1.2rem; line-height:1; }.faq details[open] summary::after { content:"−"; }.faq details p { margin:0; padding:0 20px 18px; color:var(--muted); font-size:.92rem; }.inline-link { color:var(--blue); text-decoration:underline; }
.history { padding:0; list-style:none; border-top:1px solid var(--line); }.history>li { padding:24px 0; border-bottom:1px solid var(--line); }.history-head { display:flex; gap:16px; align-items:baseline; margin-bottom:10px; }.history-head time { color:var(--blue); font-size:.82rem; font-weight:700; }.history ul { margin:0; padding-left:1.2em; color:#48546a; font-size:.92rem; }
.cta-section { padding-top:20px; }.cta-card { max-width:var(--max); margin:auto; padding:56px 28px; border-radius:24px; background:var(--lavender); text-align:center; }.cta-card h2 { margin-bottom:6px; font-size:clamp(1.6rem,3.4vw,2.2rem); letter-spacing:-.04em; }.cta-card>p { color:var(--muted); }.cta-card .actions { justify-content:center; margin-top:14px; }.cta-links { display:flex; justify-content:center; gap:24px; margin:26px 0 0; font-size:.82rem; }.cta-links a { text-decoration:underline; text-underline-offset:3px; color:#41506a; }
@media (max-width:720px) { .breadcrumb { padding:4px 20px 0; }.notice { padding:0 20px; }.app-hero { grid-template-columns:1fr; padding:30px 20px 55px; gap:24px; }.app-hero-icon { width:110px; height:110px; }.feature-grid,.steps { grid-template-columns:1fr; }.cta-card { padding:40px 20px; }.cta-links { flex-direction:column; gap:10px; } }
.card-links { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:16px; }.card-links .text-link { margin-top:0; padding-top:0; }
.notice { max-width:var(--max); margin:18px auto 0; padding:0 28px; }.notice p { margin:0; padding:14px 18px; border-radius:12px; background:#fff7e0; border:1px solid #f0dca0; color:#5c4a12; font-size:.9rem; }.notice .inline-link { color:#7a5c00; font-weight:700; }
.gallery.portrait figure { flex-basis:min(240px,62vw); }
.nb { white-space:nowrap; }
.badges.scenes { gap:10px; }.badges.scenes li { padding:9px 18px; background:#fff; border:1px solid var(--line); color:var(--ink); font-size:.9rem; font-weight:500; }
.policy-page section ul { margin:0 0 1em; padding-left:1.3em; color:#48546a; }.policy-page section li { margin-bottom:4px; }.policy-page .inline-link { color:var(--blue); text-decoration:underline; }
.shot-label { margin:0 auto 12px; font-size:.95rem; letter-spacing:.04em; }.shot-label ~ .shot-label { margin-top:44px; }.gallery.ipad figure { flex-basis:min(380px,80vw); }

.site-header .brand { margin-right:auto; }.lang-switch { margin-left:22px; padding:5px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#41506a; font-size:.8rem; font-weight:700; line-height:1.4; white-space:nowrap; }.lang-switch:hover { color:var(--blue); border-color:var(--blue); }
@media (max-width:720px) { .menu-button { order:3; }.lang-switch { order:2; margin-left:0; margin-right:12px; } }
.lang-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; padding:9px 20px; background:#eef1ff; border-bottom:1px solid var(--line); color:#33415c; font-size:.85rem; }.lang-banner a { color:var(--blue); font-weight:700; text-decoration:underline; }.lang-banner button { border:0; background:transparent; color:#5b6880; font:inherit; font-size:.8rem; cursor:pointer; text-decoration:underline; }