:root { --ink:#24384a; --muted:#66798a; --blue:#75bde8; --blue-deep:#3d9bd2; --pale:#eaf7ff; --cream:#fffdf8; --line:#d5e8f3; --green:#43a77d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.tonari-converter-page { margin:0; padding:0; background:var(--cream); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
#tonari-converter-app { margin:0; padding:0; max-width:none; width:100%; background:var(--cream); color:var(--ink); overflow:hidden; }
#tonari-converter-app [hidden] { display:none!important; }
#tonari-converter-app h1,#tonari-converter-app h2,#tonari-converter-app h3,#tonari-converter-app h4,#tonari-converter-app p { font-family:inherit; color:inherit; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:0 28px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--blue); color:#fff; transform:rotate(-3deg); box-shadow:0 5px 0 #c9e8f7; }
.brand-mark span { font-size:25px; font-weight:900; transform:rotate(3deg); }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand b { font-size:18px; letter-spacing:.04em; }
.brand small { font-size:10px; color:#8092a0; margin-top:2px; }
nav { display:flex; gap:30px; font-size:13px; font-weight:700; color:#617382; }
nav a:hover { color:var(--blue-deep); }
.hero { min-height:610px; padding:70px max(32px, calc((100vw - 1120px)/2)); display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; background:linear-gradient(110deg,#edf9ff 0%,#f6fbfa 50%,#fff9ec 100%); border-top:1px solid #eff5f6; border-bottom:1px solid #e6f1f3; position:relative; }
.hero:before { content:""; position:absolute; width:420px; height:420px; border:1px dashed #bedfed; border-radius:50%; right:-130px; top:-170px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid #b9def0; border-radius:999px; color:#4f7f99; background:#f9fdff; font-size:12px; font-weight:700; }
.eyebrow span { color:#51af82; font-size:9px; }
.hero h1 { font-size:clamp(44px,4.5vw,62px); line-height:1.22; letter-spacing:.035em; margin:25px 0 20px; font-weight:800; }
.hero h1 em { color:var(--blue-deep); font-style:normal; position:relative; }
.hero h1 em:after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:7px; background:radial-gradient(circle,#78bfe8 2px,transparent 3px) 0 0/13px 7px repeat-x; }
.hero-lead { font-size:16px; line-height:2; color:#607585; margin-bottom:29px; }
.primary-link { display:inline-flex; justify-content:center; align-items:center; gap:32px; min-width:245px; padding:17px 25px; background:var(--blue-deep); color:white; border-radius:13px; font-weight:800; box-shadow:0 8px 0 #cce9f7; transition:.2s; }
.primary-link:hover { transform:translateY(2px); box-shadow:0 5px 0 #cce9f7; }
.primary-link span { font-size:20px; }
.tiny-note { color:#8b9ba8; font-size:11px; margin:18px 28px; }
.hero-art { height:440px; position:relative; display:grid; place-items:center; }
.window-card { width:min(470px,90%); background:white; border:1px solid #b9d9e9; border-radius:23px; padding:0 24px 27px; transform:rotate(2deg); box-shadow:18px 22px 0 rgba(136,196,224,.18),0 20px 50px rgba(75,122,145,.12); }
.window-top { height:50px; border-bottom:1px solid #dcecf4; display:flex; align-items:center; gap:7px; color:#9aabb5; font-size:9px; }
.window-top i { width:8px; height:8px; border-radius:50%; background:#bfe3f2; }
.window-top span { margin-left:auto; margin-right:auto; }
.mini-drop { height:270px; margin-top:23px; border:2px dashed #a9d6eb; border-radius:16px; background:#f5fbff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#6e8798; }
.mini-drop b { color:#486276; font-size:15px; }
.mini-drop small { font-size:10px; }
.mini-file { display:grid; place-items:center; width:66px; height:78px; background:white; border:1px solid #acd4e7; border-radius:7px 7px 15px 7px; color:var(--blue-deep); font-size:12px; font-weight:900; box-shadow:0 8px 16px #dcecf4; transform:rotate(-6deg); margin-bottom:13px; }
.floating-chip { position:absolute; width:72px; height:50px; display:grid; place-items:center; background:white; border:1px solid #c5deea; border-radius:14px; color:#438fbc; font-size:12px; font-weight:900; box-shadow:0 9px 18px #d8e9ef; }
.chip-one { right:1%; top:5%; transform:rotate(8deg); }.chip-two { left:2%; bottom:8%; transform:rotate(-8deg); }
.spark { position:absolute; color:#8ac7e8; font-size:23px; }.spark-one { top:6%; left:12%; }.spark-two { bottom:7%; right:15%; font-size:16px; }
.converter-wrap { max-width:1040px; margin:auto; padding:90px 24px 110px; }
.section-heading { text-align:center; margin-bottom:38px; }.section-heading.left { text-align:left; }
.section-kicker { color:#58a7d4!important; font-size:11px!important; font-weight:900; letter-spacing:.2em; margin:0 0 11px!important; }
.section-heading h2 { font-size:34px; letter-spacing:.04em; margin:0 0 12px; }.section-heading > p:last-child { color:#788b99; font-size:14px; }
.tool-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:15px; }
.tool-tabs button { min-height:110px; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--ink); cursor:pointer; display:grid; grid-template-columns:46px 1fr auto; grid-template-rows:1fr 1fr; align-items:center; text-align:left; padding:18px; position:relative; transition:.2s; }
.tool-tabs button:hover { border-color:#83c4e7; }.tool-tabs button.active { border:2px solid var(--blue-deep); background:#f5fbff; box-shadow:0 7px 18px #e1eff5; }
.tab-icon { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#dff3ff; color:#348fca; font-size:19px; }.tab-icon.pdf { background:#fff0e6; color:#dd875c; }.tab-icon.video { background:#eeeaff; color:#8071d3; }
.tool-tabs b { font-size:15px; }.tool-tabs small { color:#8a99a5; font-size:9px; }.tool-tabs i { position:absolute; right:10px; top:8px; background:#eff1f3; color:#8a949b; border-radius:20px; padding:3px 7px; font-size:8px; font-style:normal; }
.converter-panel { border:1px solid var(--line); border-radius:24px; background:white; box-shadow:0 18px 55px rgba(68,116,139,.1); padding:35px 42px 38px; }
.panel-intro { display:flex; align-items:center; gap:18px; padding-bottom:27px; border-bottom:1px solid #e8f0f3; }.panel-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:15px; background:#def2ff; color:#318ec7; font-size:25px; }.panel-icon.pdf { background:#fff0e6;color:#db8054 }.panel-icon.video { background:#eeebff;color:#7d6cd4 }.panel-intro h3 { margin:0 0 7px; font-size:20px; }.panel-intro p { margin:0; color:#758795; font-size:12px; line-height:1.7; }
.drop-zone { height:285px; border:2px dashed #a8d5e9; border-radius:18px; background:#f7fcff; margin-top:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; cursor:pointer; transition:.2s; }.drop-zone:hover,.drop-zone.dragging { background:#eaf8ff; border-color:#55a9d6; transform:scale(1.005); }.drop-zone input { position:absolute; opacity:0; pointer-events:none; }.upload-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#dff3ff; color:#3c9bd1; font-size:27px; font-weight:800; margin-bottom:5px; }.drop-zone b { font-size:17px; }.drop-zone > span:not(.upload-icon) { font-size:12px; color:#81919c; }.drop-zone u { color:#3797cd; font-weight:800; }.drop-zone small { margin-top:9px; color:#9aa7b0; font-size:10px; }
.work-area { margin-top:28px; }.file-preview { display:flex; gap:15px; align-items:center; padding:13px; background:#f6fafc; border-radius:14px; }.file-preview img { width:70px; height:58px; object-fit:cover; border-radius:8px; }.file-preview div { display:flex; flex-direction:column; min-width:0; flex:1; }.file-preview b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }.file-preview span { font-size:10px; color:#8494a0; margin-top:5px; }.file-preview button { border:0; background:transparent; color:#8494a0; font-size:23px; cursor:pointer; }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:25px 0; }.settings label { display:flex; flex-direction:column; gap:8px; font-size:11px; font-weight:800; }.settings select { border:1px solid #cfe2eb; border-radius:10px; padding:12px; background:white; color:var(--ink); font-size:12px; }.settings .quality { grid-column:1/3; }.quality span { display:flex; justify-content:space-between; }.quality input { accent-color:var(--blue-deep); }.convert-button { width:100%; border:0; border-radius:12px; background:var(--blue-deep); color:white; padding:15px; font-weight:900; cursor:pointer; box-shadow:0 5px 0 #c5e5f4; }.convert-button span { float:right; }.convert-button:disabled { opacity:.6; }.result { display:flex; align-items:center; gap:12px; margin-top:18px; background:#effaf5; border:1px solid #ccebdc; padding:13px 15px; border-radius:12px; }.result .check { width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#50ad83;color:white; }.result div { display:flex; flex-direction:column; flex:1; }.result b { font-size:12px; }.result small { font-size:9px; color:#71887c; margin-top:3px; }.result a { background:#45a579; color:white; padding:9px 13px; border-radius:8px; font-size:10px; font-weight:900; }.error { color:#c95858; background:#fff1f1; padding:12px; border-radius:9px; font-size:11px; }
.privacy-row { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:24px; color:#718694; }.privacy-row span { font-size:20px; }.privacy-row p { font-size:10px; line-height:1.65; }.privacy-row b { color:#4b6576; }
.coming-soon { min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.coming-soon > span { width:65px;height:65px;display:grid;place-items:center;background:#edf3f6;border-radius:19px;color:#8295a1;font-size:26px; }.coming-soon h4 { font-size:20px; margin:18px 0 8px; }.coming-soon p { max-width:470px; color:#7a8c98; font-size:12px; line-height:1.8; }.coming-soon button { border:1px solid #9acfe9; background:#f2faff; color:#318bc0; font-weight:800; padding:10px 18px; border-radius:10px; cursor:pointer; margin-top:10px; }
.tools-section { padding:100px max(24px,calc((100vw - 1080px)/2)); background:#edf8fd; }.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.feature-grid article { min-height:150px; background:white; border:1px solid #d4e7f0; border-radius:17px; padding:25px; display:flex; gap:18px; }.feature-grid article > span { flex:0 0 48px; height:48px; display:grid;place-items:center;background:#e2f4fe;border-radius:13px;color:#3593c8;font-size:21px;font-weight:900; }.feature-grid i { font-size:9px; color:#258d62; background:#e9f8f1; padding:3px 7px; border-radius:10px; font-style:normal; }.feature-grid i.soon { color:#8c9399; background:#f0f1f2; }.feature-grid h3 { margin:12px 0 7px; font-size:16px; }.feature-grid p { margin:0; color:#758896; font-size:11px; line-height:1.7; }
.promise { max-width:1050px; margin:auto; padding:120px 25px; display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:center; }.promise-copy h2 { font-size:32px; line-height:1.55; margin:12px 0 22px; }.promise-copy > p:last-child { font-size:13px; color:#6f8290; line-height:2.1; }.promise-card { background:#f4fbff; border:1px solid #cde6f2; border-radius:24px; padding:32px; text-align:center; box-shadow:11px 12px 0 #e3f3fa; }.promise-card .lock { margin:auto auto 12px; width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#d9f0fb;color:#388fbe;font-size:22px; }.promise-card > b { font-size:17px; }.promise-card p { margin:15px 0; padding:11px; background:white; border-radius:10px; font-size:11px; font-weight:700; }.promise-card > span { color:#7ab9dc; }.promise-card small { display:block; color:#718b99; font-size:9px; margin-top:18px; }
footer { min-height:240px; background:#284256; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; }.footer-brand .brand-mark { box-shadow:none; }.footer-brand small { color:#b4c7d3; }.footer-brand b { color:white; } footer p { color:#b8c8d2; font-size:11px; } footer > small { color:#829aa9; font-size:9px; }
.mobile-break { display:none; }
@media(max-width:760px){
  .site-header { height:72px; padding:0 18px; }.site-header nav { display:none; }.brand b { font-size:15px; }.brand-mark { width:39px;height:39px; }
  .hero { min-height:auto; padding:58px 22px 70px; grid-template-columns:1fr; text-align:center; }.hero-copy { display:flex; flex-direction:column; align-items:center; }.hero h1 { font-size:42px; }.hero-lead { font-size:13px; }.mobile-break { display:block; }.hero-art { height:310px; margin-top:35px; }.window-card { padding:0 16px 18px; }.mini-drop { height:180px; }.chip-one { right:0; }.chip-two { left:0; }
  .converter-wrap { padding:70px 15px 85px; }.section-heading h2 { font-size:28px; }.tool-tabs { gap:7px; }.tool-tabs button { min-height:100px; display:flex; flex-direction:column; justify-content:center; padding:10px 4px; text-align:center; }.tool-tabs b { font-size:12px; margin-top:7px; }.tool-tabs small { display:none; }.tool-tabs i { right:4px;top:4px;font-size:7px; }.tab-icon { width:34px;height:34px; }.converter-panel { padding:24px 15px; border-radius:18px; }.panel-intro { align-items:flex-start; }.panel-intro h3 { font-size:17px; }.panel-intro p { font-size:10px; }.panel-icon { width:45px;height:45px; }.drop-zone { height:245px; }.settings { grid-template-columns:1fr; }.settings .quality { grid-column:auto; }.result { flex-wrap:wrap; }.result a { width:100%; text-align:center; }
  .tools-section { padding:75px 17px; }.feature-grid { grid-template-columns:1fr; }.promise { padding:85px 22px; grid-template-columns:1fr; gap:35px; }.promise-copy h2 { font-size:27px; }.promise-card { padding:25px; }
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }