@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{--ink:#171915;--muted:#72756c;--paper:#f7f7f2;--line:#dedfd7;--lime:#d5f36a;--green:#294a32;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.site-header,.site-footer{max-width:1240px;margin:auto;padding:24px 5.5%;display:flex;align-items:center;justify-content:space-between}.site-header{border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.04em}.wordmark em{font-style:normal;color:#8a8d82;font-weight:500}.mark{width:29px;height:29px;border-radius:9px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:19px}.site-header nav{display:flex;gap:32px;color:#55594f;font-size:13px}.site-header nav a:hover,.footer-links a:hover{color:#809b27}.header-cta{font-size:10px;letter-spacing:.12em;font-weight:700}.header-cta span{margin-left:8px}.hero{max-width:1240px;margin:auto;padding:98px 8% 104px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#85897d;margin:0 0 22px}.hero h1{font-size:clamp(48px,7vw,86px);line-height:1.2;letter-spacing:-.075em;margin:0 0 22px;font-weight:600}.lead{font-size:15px;color:#71756b;margin:0 0 35px}.button{display:inline-flex;align-items:center;gap:32px;padding:16px 20px;font-size:12px;font-weight:600}.button-dark{background:var(--ink);color:white}.button-dark span{color:var(--lime)}.hero-art{height:390px;position:relative;background:#e9ecdf;overflow:hidden;display:grid;place-items:center;transform:rotate(2deg)}.disc{width:300px;height:300px;border-radius:50%;background:repeating-radial-gradient(circle at center,#171915 0px,#171915 2px,#242820 3px,#171915 4px,#171915 12px);box-shadow:0 18px 40px #363e2b33;display:grid;place-items:center}.disc:before{content:'';position:absolute;width:94px;height:94px;border-radius:50%;background:var(--lime)}.disc i{width:9px;height:9px;background:#252821;border-radius:50%;z-index:1}.art-label{position:absolute;right:20px;bottom:20px;font-size:8px;letter-spacing:.12em;line-height:1.7}.section{max-width:1070px;margin:auto;padding:90px 5.5%;}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:15%;border-top:1px solid var(--line)}h2{font-size:38px;letter-spacing:-.06em;line-height:1.3;font-weight:500;margin:0}.body-copy{line-height:2;color:#696d63;font-size:14px;margin:0 0 24px}.text-link{font-size:12px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:8px}.text-link span{margin-left:18px}.platform-band{background:var(--lime);padding:70px max(8%,calc((100% - 1030px)/2));display:flex;align-items:center;justify-content:space-between}.platform-band h2{font-size:30px}.platform-band .eyebrow{color:#63713b;margin-bottom:12px}.platform-links{display:flex;gap:35px}.platform-links a{font-size:13px;font-weight:600;border-bottom:1px solid #718147;padding:0 0 10px}.platform-links span{padding-left:20px}.site-footer{border-top:1px solid var(--line);font-size:11px;color:#777a71;padding-top:30px;padding-bottom:30px}.footer-links{display:flex;gap:24px}.site-footer small{font-size:10px}.page-hero{max-width:1240px;margin:auto;padding:83px 8% 68px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(40px,6vw,66px);line-height:1.18;letter-spacing:-.07em;font-weight:500;margin:0 0 18px}.page-hero .lead{max-width:600px;line-height:1.9;margin-bottom:0}.eyebrow .slash{color:#c2c5b8;padding:0 7px}.content{max-width:1000px;margin:auto;padding:55px 7% 110px}.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.download-card{padding:34px;background:#fff;border:1px solid var(--line);min-height:270px;display:flex;flex-direction:column;align-items:flex-start}.platform-icon{font-size:24px;margin-bottom:24px}.download-card h2{font-size:25px;margin-bottom:10px}.download-card p{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 22px}.download-card .button{margin-top:auto}.button-outline{border:1px solid var(--line)}.button-outline span{margin-left:24px}.button.is-disabled{opacity:.4;pointer-events:none}.data-list{margin:0;border-top:1px solid var(--line)}.data-row{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:190px 1fr;font-size:13px}.data-row dt{color:var(--muted)}.data-row dd{margin:0;font-weight:500}.notes{padding-left:19px;color:#65695f;line-height:2;font-size:13px}.content h2.section-title{font-size:23px;margin:45px 0 18px}.notice{background:#eef0e7;padding:18px 20px;color:#65695f;line-height:1.8;font-size:12px;margin-top:28px}.policy{max-width:790px}.policy h2{font-size:19px;margin:38px 0 12px}.policy p,.policy li{font-size:13px;line-height:2;color:#65695f}.policy ul{padding-left:20px}.contact-form{display:grid;gap:18px;max-width:630px}.contact-form label{display:grid;gap:8px;font-size:12px;font-weight:600}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:13px;font:inherit;font-size:13px;color:var(--ink);border-radius:0}.contact-form textarea{min-height:150px;resize:vertical}.contact-form button{border:0;cursor:pointer;justify-self:start}.contact-form button:disabled{opacity:.45;cursor:not-allowed}.contact-form[data-placeholder=true]:after{content:'フォーム送信先は assets/js/config.js で設定できます。';color:#777;font-size:11px}.contact-options{display:flex;gap:35px;align-items:center;margin-top:30px;color:var(--muted);font-size:12px}.contact-options a{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}@media(max-width:720px){.site-header{padding:19px 6%}.site-header nav{gap:14px}.site-header nav a{font-size:11px}.header-cta{display:none}.hero{padding:64px 7% 72px;grid-template-columns:1fr;gap:45px}.hero-art{height:300px}.disc{width:230px;height:230px}.intro-grid{grid-template-columns:1fr;gap:20px;padding-top:65px;padding-bottom:65px}.platform-band{align-items:flex-start;gap:30px;flex-direction:column;padding:55px 7%}.platform-links{width:100%;justify-content:space-between}.site-footer{padding:25px 6%;flex-wrap:wrap;gap:20px}.footer-links{order:3;width:100%;gap:18px}.page-hero{padding:62px 7% 48px}.content{padding:40px 7% 80px}.download-grid{grid-template-columns:1fr}.data-row{grid-template-columns:130px 1fr}.contact-options{flex-wrap:wrap}.site-header nav a:nth-child(2){display:none}}

/* Minimal visual treatment */
:root{--ink:#20211f;--muted:#73756f;--paper:#fff;--line:#e7e8e4;--lime:#dce9d4;--green:#294a32}
body{background:#fff;color:var(--ink);font-family:'DM Sans','Noto Sans JP',sans-serif}
.site-header,.site-footer{max-width:1080px;padding-left:6%;padding-right:6%}
.brand-icon{width:30px;height:30px;display:block;border-radius:9px;object-fit:cover}
.site-header{min-height:72px}
.mark{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:50%;width:28px;height:28px}
.site-header nav{gap:26px}
.site-header nav a,.footer-links a{color:#62645f}
.site-header nav a:hover,.footer-links a:hover{color:#111}
.header-cta{letter-spacing:.06em}
.hero{max-width:1080px;grid-template-columns:1fr;padding:88px 6% 92px}
.hero h1{font-size:clamp(44px,6vw,70px);font-weight:500;letter-spacing:-.065em}
.hero-art{display:none}
.eyebrow{color:#777a73;letter-spacing:.14em}
.button{padding:14px 17px;gap:25px}
.button-dark{background:#242522;color:#fff}
.button-dark span{color:#fff}
.section{max-width:930px;padding-top:72px;padding-bottom:72px}
.intro-grid{gap:12%}
h2{font-size:32px;font-weight:500}
.body-copy{color:#666862}
.text-link{border-bottom-color:#bfc1ba}
.platform-band{background:#f6f7f4;padding:56px max(6%,calc((100% - 930px)/2))}
.platform-band h2{font-size:27px}
.platform-band .eyebrow{color:#777a73}
.platform-links a{border-bottom-color:#bfc1ba}
.site-footer{min-height:86px}
.page-hero{max-width:1080px;padding:68px 6% 48px}
.page-hero h1{font-size:clamp(38px,5vw,56px);font-weight:500;letter-spacing:-.06em}
.content{max-width:900px;padding-top:42px;padding-bottom:88px}
.download-grid{gap:16px}
.download-card{min-height:245px;padding:27px;background:#fff;border-color:var(--line)}
.download-card h2{font-size:22px}
.download-card p{color:#6b6d67}
.data-row{padding:15px 0}
.notice{background:#f6f7f4;color:#64665f}
.contact-form input,.contact-form select,.contact-form textarea{border-color:#dfe0db}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid #aeb2a7;outline-offset:1px}
.button.is-disabled{opacity:.42}
@media(max-width:720px){.hero{padding:63px 7% 68px}.section{padding-top:56px;padding-bottom:56px}.page-hero{padding:56px 7% 40px}.content{padding-top:34px;padding-bottom:68px}.platform-band{padding:44px 7%}}

/* Secondary pages stay focused on one task. */
.subpage .site-header{max-width:900px;padding-top:22px;padding-bottom:22px;border-bottom:0}
.subpage .site-header nav,.subpage .header-cta{display:none}
.subpage-home-link{display:inline-flex;align-items:center;gap:8px;color:#62645f;font-size:12px;font-weight:600}
.subpage-home-link span{font-size:14px}
.subpage .page-hero{max-width:900px;padding:28px 6% 40px;border-bottom:0}
.subpage .page-hero .eyebrow{display:none}
.subpage .page-hero h1{font-size:clamp(36px,5vw,54px);margin-bottom:16px}
.subpage .content{max-width:900px;padding:0 6% 78px}
.subpage .site-footer{max-width:900px}
.subpage .download-card{min-height:228px}
.subpage .notice{margin-top:24px}
@media(max-width:720px){
  .subpage .site-header{padding-top:18px;padding-bottom:18px}
  .subpage-home-link{font-size:0}
  .subpage-home-link span{font-size:20px}
  .subpage .page-hero{padding-top:28px;padding-bottom:32px}
  .subpage .content{padding-bottom:62px}
}

/* Light water palette for the simplified home screen. */
:root{--ink:#173246;--muted:#718b9a;--paper:#f3fbff;--line:#d9ebf2;--lime:#d9f0f4;--green:#31596b}
body{background:var(--paper);color:var(--ink)}
.site-header{border-bottom-color:var(--line)}
.brand-icon{box-shadow:0 4px 12px rgba(83,145,169,.16)}
.button-dark{background:#1f465b}
.button-dark span{color:#d4f6f7}
.home-hero{min-height:calc(100vh - 72px);align-content:center}
.home-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:6%;padding-top:72px;padding-bottom:72px}
.home-hero h1{font-size:clamp(40px,5vw,66px)}
.home-hero h1 span{display:block;white-space:nowrap}
.home-hero .hero-copy{position:relative;z-index:1}
.hero-ui{min-width:0;overflow:hidden;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:linear-gradient(135deg,#2d6ee8 0%,#273e91 45%,#131b30 100%);box-shadow:0 24px 70px rgba(33,71,112,.25);color:#fff}
.ui-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 4px 15px;color:rgba(255,255,255,.58);font-size:9px;letter-spacing:.18em;font-weight:700}
.ui-gear{display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(13,22,43,.35);font-size:18px;color:#fff}
.ui-content{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:center}
.player-panel{min-width:0}
.album-art{aspect-ratio:1/1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);background:linear-gradient(135deg,#6fb5df,#8e78dc 52%,#d08fb8);box-shadow:0 0 32px rgba(174,160,255,.6)}
.album-art span{font-size:74px;color:rgba(255,255,255,.68);font-family:Georgia,serif}
.player-panel h2{margin:18px 0 13px;font-size:18px;line-height:1.35;letter-spacing:-.04em;color:#fff}
.ui-progress{height:6px;background:rgba(255,255,255,.25)}
.ui-progress span{display:block;width:22%;height:100%;background:rgba(255,255,255,.8)}
.ui-time{display:flex;justify-content:space-between;margin-top:8px;color:rgba(255,255,255,.65);font-size:10px}
.transport{display:flex;align-items:center;justify-content:space-between;margin:24px 13% 0;color:#fff;font-size:24px}
.transport strong{font-size:33px;font-weight:400}
.app-grid{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.layout-tile,.app-tile{aspect-ratio:1/1;display:grid;place-items:center;border-radius:18px;background:#fff;color:#84858d;box-shadow:0 8px 18px rgba(9,22,58,.12)}
.layout-tile{align-content:center;gap:7px}
.layout-tile b{font-size:27px;font-weight:400;line-height:1}
.layout-tile small{font-size:10px;color:#888991}
.app-tile{font-size:34px;color:#fff;font-weight:700;text-shadow:0 2px 5px rgba(0,0,0,.18)}
.chatgpt{background:linear-gradient(145deg,#fff,#e9edf5);color:#1d2639}.music{background:linear-gradient(145deg,#ff5b76,#f30d3f)}.notes{background:linear-gradient(145deg,#ffe34b,#f7bd29);color:#7d6a35}.safari{background:linear-gradient(145deg,#72c7f6,#1d72e9)}.xcode{background:linear-gradient(145deg,#18b9f5,#0876cd);color:#1d2b3d}.vscode{background:linear-gradient(145deg,#fff,#e7eef6);color:#087cc3}.photos{background:linear-gradient(145deg,#fff,#f3f5fb);color:#31a7d6}.calendar{background:linear-gradient(145deg,#ff6d73,#e8323f);font-size:18px;letter-spacing:2px}
@media(max-width:1200px){.home-hero{grid-template-columns:1fr;gap:45px}.hero-ui{max-width:620px;width:100%;justify-self:center}}
@media(max-width:720px){.home-hero{padding-top:63px;padding-bottom:68px}.hero-ui{padding:12px;border-radius:22px}.ui-content{grid-template-columns:1fr 1.08fr;gap:10px}.player-panel h2{font-size:14px}.album-art span{font-size:52px}.transport{margin-top:16px;font-size:18px}.transport strong{font-size:25px}.app-grid{gap:6px}.layout-tile,.app-tile{border-radius:12px}.layout-tile b{font-size:20px}.layout-tile small{font-size:8px}.app-tile{font-size:24px}}

/* Supplied iPhone 18 Pro bezel with the MusicDeck screen placed inside it. */
.hero-ui{display:grid;place-items:center;overflow:visible;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit}
.iphone-device{position:relative;width:min(620px,100%);aspect-ratio:2760/1350;overflow:hidden;background:url('../images/iphone-18-pro-bezel.png') center/100% 100% no-repeat;filter:drop-shadow(18px 28px 34px rgba(36,75,102,.25));transform:rotate(1deg)}
.iphone-device::before,.iphone-device::after{display:none}
.iphone-screen{position:absolute;z-index:1;inset:5% 2.1% 4.8%;overflow:hidden;border-radius:6.5%;background:#142137}
.iphone-screen img{display:block;width:100%;height:100%;object-fit:fill}
.iphone-bezel{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.iphone-portrait{display:none}
@media(min-width:1201px){
  .iphone-landscape{display:none}
  .iphone-portrait{display:block;width:min(330px,100%);aspect-ratio:1350/2760;background:none}
  .iphone-portrait .iphone-screen{inset:2.5% 3.2% 2.4%;border-radius:9.5%}
}
@media(max-width:720px){.hero-ui{padding:0}.iphone-device{width:100%;transform:none}.iphone-screen{inset:5% 2.1% 4.8%}}