/* ========================================================= ONAHO.NET Multilingual Modern Theme Applies only to pages with: ========================================================= */ /* ---------- Theme variables ---------- */ .multilingual { --ml-blue: #2457b8; --ml-blue-dark: #173f8e; --ml-blue-light: #edf5ff; --ml-blue-border: #bfd6ff; --ml-text: #232936; --ml-muted: #667085; --ml-border: #dfe6f1; --ml-surface: #ffffff; --ml-page: #f7f4ec; --ml-shadow: 0 10px 28px rgba(28, 47, 78, 0.08); --ml-shadow-soft: 0 5px 18px rgba(28, 47, 78, 0.06); --ml-radius: 12px; } /* ---------- Page ---------- */ body.multilingual { background-color: var(--ml-page); color: var(--ml-text); } .multilingual #container { max-width: 1200px; margin-right: auto; margin-left: auto; } .multilingual #contents.multilingual-layout { align-items: flex-start; gap: 28px; } .multilingual #main { min-width: 0; background: var(--ml-surface); border: 1px solid rgba(212, 220, 232, 0.9); border-radius: 14px; padding: 30px; box-shadow: var(--ml-shadow); } .multilingual #main > section > h1 { margin-top: 0; } /* ---------- Breadcrumb ---------- */ .multilingual .breadcrumb { margin-top: 14px; margin-bottom: 18px; padding-left: 0; color: var(--ml-muted); font-size: 0.92rem; } .multilingual .breadcrumb a { color: var(--ml-blue); text-decoration: none; } .multilingual .breadcrumb a:hover, .multilingual .breadcrumb a:focus { text-decoration: underline; } /* ---------- Affiliate disclosure ---------- */ .multilingual .box27 { margin: 0 0 24px; padding: 16px 18px; background: var(--ml-blue-light); border: 1px solid var(--ml-blue-border); border-radius: 10px; color: #41506b; line-height: 1.7; box-shadow: none; } .multilingual .affiliate-notice { display: flex; align-items: flex-start; gap: 14px; } .multilingual .affiliate-notice > i { flex: 0 0 auto; margin-top: 0.18em; color: var(--ml-blue); font-size: 1.3rem; line-height: 1; } .multilingual .affiliate-text { flex: 1; min-width: 0; } .multilingual .affiliate-text strong { display: block; margin-bottom: 2px; color: #1d3f88; font-weight: 700; } /* ---------- Main heading ---------- */ .multilingual #main h1 { margin-bottom: 16px; color: #172033; font-size: clamp(1.8rem, 2.3vw, 2.4rem); line-height: 1.25; letter-spacing: -0.02em; } .multilingual #main h1 i { margin-right: 0.35em; } /* ---------- Modern content boxes ---------- */ .multilingual .box6 { margin: 20px 0; padding: 20px 24px; background: var(--ml-surface); border: 1px solid var(--ml-blue-border); border-radius: var(--ml-radius); box-shadow: var(--ml-shadow-soft); } .multilingual .box6 > :first-child { margin-top: 0; } .multilingual .box6 > :last-child { margin-bottom: 0; } .multilingual .box6 p { line-height: 1.8; } /* Multilingual H2 design inside boxes */ .multilingual .box6 h2 { display: flex; align-items: center; gap: 0.42em; margin: 0 0 12px; padding: 0; background: none; border: 0; color: var(--ml-blue); font-size: clamp(1.18rem, 1.7vw, 1.42rem); font-weight: 700; line-height: 1.35; box-shadow: none; } .multilingual .box6 h2::before, .multilingual .box6 h2::after { display: none; content: none; } .multilingual .box6 h2 i { flex: 0 0 1.2em; width: 1.2em; margin: 0; color: var(--ml-blue); font-size: 0.9em; text-align: center; } .multilingual .box6 h3 { margin: 0 0 10px; padding: 0; background: none; border: 0; color: var(--ml-blue); font-size: 1.12rem; line-height: 1.4; } /* Optional numbered section titles */ .multilingual .box6 .section-number { display: inline-block; margin-right: 0.35em; color: var(--ml-blue); font-weight: 700; } /* ---------- Links ---------- */ .multilingual #main a { color: var(--ml-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .multilingual #main a:hover, .multilingual #main a:focus { color: var(--ml-blue-dark); } /* ---------- Sidebar ---------- */ .multilingual .multilingual-sidebar { min-width: 0; } /* Reviewer profile card */ .multilingual .author-profile { overflow: hidden; margin: 0 0 22px; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--ml-radius); box-shadow: var(--ml-shadow); } .multilingual .author-profile .sidebar-title { display: none; } .multilingual .author-image { display: block; width: 100%; height: auto; margin: 0; object-fit: cover; } .multilingual .author-body { padding: 18px; } .multilingual .author-name { margin: 0 0 8px; color: #202838; font-size: 1.2rem; font-weight: 700; line-height: 1.35; } .multilingual .author-meta { margin: 0 0 12px; color: #49566b; line-height: 1.65; } .multilingual .author-body p { margin: 0 0 10px; line-height: 1.7; } .multilingual .author-facts { margin: 14px 0; padding: 0; list-style: none; } .multilingual .author-facts li { margin: 0; padding: 5px 0; border-bottom: 1px solid #edf0f5; line-height: 1.5; } .multilingual .author-facts li:last-child { border-bottom: 0; } .multilingual .author-note { margin-bottom: 0; color: var(--ml-muted); font-size: 0.94rem; } /* Sidebar menu cards */ .multilingual .sidebar-section.sidebar-menu { overflow: hidden; margin: 0 0 18px; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: 9px; box-shadow: var(--ml-shadow-soft); } .multilingual .sidebar-title { margin: 0; padding: 10px 14px; background: linear-gradient(180deg, #3970d7 0%, #1c4b9e 100%); border: 0; border-radius: 0; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.35; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); box-shadow: inset 0 -3px 0 rgba(255, 112, 112, 0.9); } .multilingual .sidebar-title::before, .multilingual .sidebar-title::after { display: none; content: none; } .multilingual .sidebar-link-list { margin: 0; padding: 10px 14px 12px; background: var(--ml-surface); border: 0; list-style: none; } .multilingual .sidebar-link-list li { margin: 0; } .multilingual .sidebar-link-list a { display: block; padding: 6px 0; color: #204fb4; line-height: 1.45; text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .multilingual .sidebar-link-list a:hover, .multilingual .sidebar-link-list a:focus { color: var(--ml-blue-dark); transform: translateX(3px); } .multilingual .sidebar-link-list a[aria-current="page"] { color: #162f67; font-weight: 700; } /* ---------- Contact form ---------- */ .multilingual .demo01 { width: 100%; } .multilingual .demo01 th { background: #f4f7fb; } .multilingual .demo01 input[type="text"], .multilingual .demo01 input[type="email"], .multilingual .demo01 textarea { max-width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; padding: 9px 10px; background: #fff; font: inherit; } .multilingual .demo01 input[type="text"]:focus, .multilingual .demo01 input[type="email"]:focus, .multilingual .demo01 textarea:focus { outline: 2px solid rgba(36, 87, 184, 0.2); border-color: var(--ml-blue); } .multilingual .demo01 input[type="submit"], .multilingual .demo01 input[type="reset"] { min-width: 110px; margin: 4px; padding: 10px 18px; border: 0; border-radius: 7px; font: inherit; font-weight: 700; cursor: pointer; } .multilingual .demo01 input[type="submit"] { background: var(--ml-blue); color: #fff; } .multilingual .demo01 input[type="submit"]:hover { background: var(--ml-blue-dark); } .multilingual .demo01 input[type="reset"] { background: #e9edf3; color: #344054; } /* ---------- Footer ---------- */ .multilingual #footer { margin-top: 28px; } .multilingual .footer-copy-only { padding: 18px; color: var(--ml-muted); text-align: center; } .multilingual .footer-copy { margin: 0; } /* ---------- Back to top ---------- */ .multilingual .nav-fix-pos-pagetop a { border-radius: 6px; background: rgba(31, 46, 70, 0.78); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .multilingual #contents.multilingual-layout { display: block; } .multilingual #main { padding: 24px; } .multilingual .multilingual-sidebar { margin-top: 24px; } .multilingual .author-profile, .multilingual .sidebar-section.sidebar-menu { max-width: none; } } @media (max-width: 600px) { .multilingual #main { padding: 18px 14px; border-radius: 10px; } .multilingual .box6 { margin: 16px 0; padding: 17px 16px; border-radius: 10px; } .multilingual .box27 { padding: 14px 15px; } .multilingual .affiliate-notice { gap: 11px; } .multilingual .affiliate-notice > i { margin-top: 0.2em; font-size: 1.15rem; } .multilingual .demo01, .multilingual .demo01 tbody, .multilingual .demo01 tr, .multilingual .demo01 th, .multilingual .demo01 td { display: block; width: 100%; box-sizing: border-box; } .multilingual .demo01 th { padding-bottom: 6px; } .multilingual .demo01 td { padding-top: 0; padding-bottom: 14px; } .multilingual .demo01 input[type="text"], .multilingual .demo01 input[type="email"], .multilingual .demo01 textarea { width: 100%; box-sizing: border-box; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .multilingual .sidebar-link-list a { transition: none; } } /* ========================================================= Mobile horizontal overflow fix Keeps the master HTML unchanged; multilingual pages only. ========================================================= */ /* Limit border-box correction to the layout boxes that actually use width:100%. */ .multilingual #main, .multilingual .multilingual-sidebar { box-sizing: border-box; min-width: 0; max-width: 100%; } /* Media should shrink inside the article without changing desktop layout widths. */ .multilingual #main img, .multilingual #main video, .multilingual #main iframe { max-width: 100%; height: auto; } @media (max-width: 900px) { .multilingual #contents.multilingual-layout, .multilingual #main, .multilingual .multilingual-sidebar { width: 100%; max-width: 100%; } /* Long text and URLs may wrap on narrow screens only. */ .multilingual #main a, .multilingual #main p, .multilingual #main li, .multilingual #main span, .multilingual #main th, .multilingual #main td { overflow-wrap: anywhere; word-break: break-word; } } /* ========================================================= Mobile review image centering Keeps desktop layout unchanged; multilingual pages only. ========================================================= */ @media (max-width: 600px) { /* Each review-gallery item uses the full article width. */ .multilingual #main .review-gallery, .multilingual #main .review-gallery .item, .multilingual #main .single-image, .multilingual #main figure { width: 100%; max-width: 100%; box-sizing: border-box; } /* Remove float/inline positioning inherited from older page styles. */ .multilingual #main .review-gallery .item, .multilingual #main .single-image, .multilingual #main figure { float: none; margin-right: auto; margin-left: auto; } /* Make image links occupy the row so their images can center reliably. */ .multilingual #main .review-gallery .item > a, .multilingual #main .single-image > a, .multilingual #main a.image-link { display: block; width: fit-content; max-width: 100%; margin-right: auto; margin-left: auto; } /* Center the actual review images without altering small inline icons. */ .multilingual #main .review-gallery .item img:not(.zoom_icon), .multilingual #main .single-image img, .multilingual #main .seihin img, .multilingual #main img.pake, .multilingual #main img.pake2 { display: block; float: none; max-width: 100%; height: auto; margin-right: auto; margin-left: auto; } } /* =============================== Top introduction =============================== */ .top-introduction{ background:#ffffff; border:1px solid #d9e7f6; border-left:6px solid #3b91d9; border-radius:10px; padding:26px 30px; margin:20px 0 35px; box-shadow:0 4px 12px rgba(0,0,0,.05); } .top-introduction h1{ margin:0 0 18px; font-size:2rem; line-height:1.3; color:#1f3558; font-weight:700; } .top-introduction p{ margin:0 0 14px; line-height:1.9; color:#444; font-size:1.03rem; } .top-introduction .intro-last{ margin-top:20px; color:#3b91d9; font-weight:600; } /* =============================== Index category heading =============================== */ body.multilingual .index-category-heading { position: relative; margin: 42px 0 22px; padding: 0 0 12px 18px; color: #24364a; font-size: 1.55rem; line-height: 1.35; font-weight: 700; background: none !important; background-image: none !important; border: 0 !important; border-left: 0 !important; border-bottom: 1px solid #d8e2ec !important; box-shadow: none !important; text-shadow: none !important; } /* 左の短いアクセント */ body.multilingual .index-category-heading::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 5px; height: 1.15em; border-radius: 999px; background: #3f9ddd; } /* 下線に少しだけアクセント */ body.multilingual .index-category-heading::after { content: ""; position: absolute; left: 18px; bottom: -1px; width: 72px; height: 2px; border-radius: 999px; background: #3f9ddd; } /* ========================================= Language menu: current language ========================================= */ body.multilingual .language-list li.is-current { margin: 2px 0; } body.multilingual .language-list li.is-current .current-language { display: block !important; box-sizing: border-box; padding: 7px 10px !important; color: #174f9c !important; font-weight: 700 !important; background: #eef5ff !important; background-image: none !important; border: 0 !important; border-left: 4px solid #2f73c9 !important; border-radius: 3px !important; text-decoration: none !important; } /* 通常言語リンク */ body.multilingual .language-list li:not(.is-current) a { display: block; box-sizing: border-box; padding: 7px 10px; font-weight: 400 !important; } /* ホバー */ body.multilingual .language-list li:not(.is-current) a:hover { background: #f3f7fc; border-radius: 3px; }