/* ============================================================ index.css ぱっとマイニング SPA ------------------------------------------------------------ base.css と併用 ・SPAレイアウト ・右側コンテンツ ・ページ共通レイアウト ・ニュース ・プライバシーポリシー ・お問い合わせ ・レスポンシブ ・印刷 ============================================================ */ /* ============================================================ SPA全体 ============================================================ */ body { display: block; } /* ============================================================ 右側コンテンツ ============================================================ */ .content { width: 100%; min-height: 100vh; margin-left: 0; padding: 126px 40px 40px; background: var(--bg); } /* ============================================================ #app ============================================================ */ #app { width: 100%; min-width: 0; } /* ============================================================ コンテンツ最大幅 ============================================================ */ #app > .container, #app > .main-wrap { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; } /* ============================================================ 共通見出し ============================================================ */ #app h1, #app h2, #app h3 { line-height: 1.4; } /* ============================================================ カードタイトル ============================================================ */ #app .card h1, #app .card h2, #app .card h3 { color: var(--primary); } /* ============================================================ 共通リンク ============================================================ */ #app a { color: var(--primary); } /* ============================================================ 共通セクション ============================================================ */ #app .section { scroll-margin-top: 30px; } /* ============================================================ images ============================================================ */ #app .images { margin: 25px 0; text-align: center; } #app .images img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; } /* ============================================================ 戻る ============================================================ */ #app .back { margin-top: 18px; text-align: right; font-size: 12px; } #app .back a { color: var(--primary); text-decoration: none; } #app .back a:hover { color: var(--primary-dark); } /* ============================================================ ニュース ============================================================ */ #app .news-card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; margin-bottom: 15px; padding: 18px 20px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04); } #app .news-date { color: var(--primary); font-size: 12px; font-weight: 700; } #app .news-body { margin-top: 6px; } /* ============================================================ プライバシーポリシー ============================================================ */ #app .privacy { max-width: 1000px; margin: 0 auto; } #app .policy-card, #app .lead-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 25px; margin-bottom: 18px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04); } #app .policy-card h2 { color: var(--primary); border-left: 4px solid var(--primary); padding-left: 10px; } /* ============================================================ お問い合わせ・会社案内 ============================================================ */ #app .contact { max-width: 900px; margin: 0 auto; } #app .contact-box { background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: 12px; padding: 28px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); } #app .contact-box a { color: var(--primary); } /* ============================================================ タブレット ============================================================ */ @media screen and (max-width: 900px) { .content { width: calc(100% - 235px); margin-left: 235px; padding: 28px; } } /* ============================================================ スマートフォン ============================================================ */ @media screen and (max-width: 640px) { body { display: block; } .content { width: 100%; margin-left: 0; padding: 20px 15px; } #app .card { padding: 18px; } } /* ============================================================ 非常に小さい画面 ============================================================ */ @media screen and (max-width: 420px) { .content { padding: 16px 12px; } } /* ============================================================ 印刷 ============================================================ */ @media print { .sidebar { display: none; } .content { width: 100%; margin-left: 0; padding: 0; } } /* v31.7.36: compact header clearance */ @media(min-width:1101px){body #app{padding-top:76px!important}body .main-content{padding-top:76px!important}} /* v31.7.37: tablet navigation and compact viewport safeguards */ *,*::before,*::after{box-sizing:border-box} #app,.content,.top-page,.top-page section{min-width:0;max-width:100%} .top-page img{max-width:100%;height:auto} .top-about-image{display:block;max-width:min(100%,800px);height:auto;object-fit:contain;margin:22px auto 0;border-radius:12px} @media(max-width:1024px){ .content{padding:88px 20px 28px!important;width:100%!important;margin-left:0!important} #app{width:100%!important;min-width:0!important} .top-page .top-hero,.top-page .top-download,.top-page .top-news,.top-page .top-about-card{max-width:100%;min-width:0} .top-page .top-hero-inner,.top-page .top-download-inner,.top-page .top-cms-cta-inner{max-width:100%;min-width:0;flex-wrap:wrap} .top-page .top-hero h1{font-size:clamp(25px,4.5vw,48px)!important;overflow-wrap:anywhere} .top-page .top-cms-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:640px){.content{padding:80px 12px 20px!important}.top-page .top-cms-featured-grid{grid-template-columns:minmax(0,1fr)!important}.top-page .top-hero{padding:22px 18px!important}.top-page .top-hero h1{font-size:clamp(24px,7vw,36px)!important}} /* Tablet navigation */ .pm-tablet-toggle{display:none} @media(max-width:1024px){ .pm-tablet-toggle{display:flex;position:fixed;right:16px;top:14px;z-index:10050;align-items:center;justify-content:center;border:1px solid #17365b;background:#fff;color:#17365b;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer} body .sidebar{display:none!important} body.pm-menu-open .sidebar{display:block!important;position:fixed!important;top:0!important;right:0!important;left:auto!important;width:min(86vw,340px)!important;height:100dvh!important;z-index:10040!important;overflow:auto!important;padding-top:68px!important;background:#fff!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)} body.pm-menu-open .sidebar .menu{display:block!important} }