/* ===== Local fonts (Inter) ===== */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* ===== Base / Reset ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

img { display: block; max-width: 100%; }
svg { max-width: 100%; }
svg.icon { display: inline-block; }

/* hide inline svg-sprite with no layout impact */
svg.svg-sprite,
svg[style*="display:none"]{
  position: absolute; width: 0; height: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  background: #ffffff;
  color: #1f2937;
}

/* small notes */
.hero-note { margin-top:.8rem; font-size:.9em; opacity:.8; }
.footnote  { margin-top:.6rem; font-size:.9em; opacity:.8; }

/* ===== Header ===== */
header {
  background-color: #0f172a;
  color: #ffffff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}
nav a { color:#cbd5e1; text-decoration:none; margin-left:1.5rem; transition:color .3s; }
nav a:hover { color:#ffffff; }

/* ===== Sections ===== */
section { max-width:1000px; margin:auto; padding:3rem 2rem; box-sizing:border-box; }
.section-title { font-size:2rem; margin-bottom:1.5rem; text-align:center; }
.fade-in { opacity:0; transform:translateY(20px); transition: opacity .8s ease-out, transform .8s ease-out; }
.fade-in.visible { opacity:1; transform:none; }

/* ===== Hero ===== */
section.hero{
  max-width:none !important; margin:0 !important; padding:4rem 0 !important;
  position:relative; margin-left:-50vw; margin-right:-50vw;
  background:linear-gradient(to right,#f8fafc,#e2e8f0);
  text-align:center; background-image:url('../images/bg01.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1; }
.hero > .container{ position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:0 1rem; color:#fff; }
.hero h1{
  font-size:2.5rem; margin:0 0 1rem; line-height:1.2;
  display:inline-flex; align-items:center; gap:.5rem;
}
.hero h1 .icon{ width:1.1em; height:1.1em; vertical-align:middle; }

/* ===== Buttons ===== */
.btn-primary{
  display:inline-block; background:#1d4ed8; color:#fff;
  padding:.75rem 1.5rem; margin-top:1.5rem; text-decoration:none;
  border-radius:5px; transition:background-color .3s;
}
.btn-primary:hover{ background:#2563eb; }

/* ===== Reasons (full width) ===== */
.reasons-section{ background:#fff; padding:60px 20px; }
.reasons-section{
  position:relative; max-width:none !important; margin:0 !important; padding:4rem 0 !important;
  margin-left:-50vw; margin-right:-50vw; background-image:url('../images/bg02.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.reasons-section > div > h2,
.reasons-section > div > p{ color:#fff; text-shadow:1px 1px 4px rgba(0,0,0,.7); }
.reasons-section::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1; }
.reasons-section .container{ position:relative; z-index:2; }

.reason-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:30px; }
.reason-card{
  background:#f9f9f9; border-left:6px solid #007bff; padding:20px;
  border-radius:10px; box-shadow:0 0 12px rgba(0,0,0,.05);
  display:flex; align-items:flex-start; gap:15px; transition:transform .3s ease;
}
.reason-card:hover{ transform:translateY(-5px); }
.reason-icon{ font-size:1.8rem; flex-shrink:0; margin-top:4px; }
.reason-icon.red{ color:#dc3545; } .reason-icon.orange{ color:#fd7e14; }
.reason-icon.gold{ color:#ffc107; } .reason-icon.gray{ color:#6c757d; }
.reason-card p{ margin:0; font-size:1rem; color:#333; line-height:1.6; }

/* ===== Article / Cases ===== */
.case-cards{ display:flex; flex-direction:column; gap:20px; margin:auto; }
.case-card{ display:flex; align-items:flex-start; background:#f8f9fa; padding:20px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.05); }
.case-icon{ font-size:2rem; margin-right:15px; flex-shrink:0; }
.case-icon .icon{ width:1.2em; height:1.2em; }
.case-icon.male{ color:#007bff; } .case-icon.female{ color:#e83e8c; }
.case-content h3{ margin-top:0; font-size:1.1rem; color:#333; }
.case-content p{ margin:5px 0 0; color:#555; line-height:1.6; }

table{ width:100%; border-collapse:collapse; margin:1rem 0; background:#fff; }
table th,table td{ padding:.75rem; border:1px solid #cbd5e1; text-align:left; }

/* ===== Accordion ===== */
.faq-accordion{ max-width:1000px; margin:0 auto; padding:0; }
.accordion-item{ border-bottom:1px solid #ddd; margin-bottom:10px; }
.accordion-button{
  background:#f5f5f5; color:#333; font-size:1.1em; width:100%; text-align:left;
  padding:15px; border:none; outline:none; cursor:pointer; transition:background .3s;
}
.accordion-button:hover,.accordion-button.active{ background:#e0e0e0; }
.accordion-content{ max-height:0; overflow:hidden; transition:max-height .4s ease; background:#fff; padding:0 15px; }
.accordion-content p{ padding:15px 0; margin:0; }

/* ===== Support cards ===== */
.support-section{ background:#f9fafb; padding:4rem 1rem; }
.support-section .section-title{ text-align:center; font-size:2rem; margin-bottom:2.5rem; color:#1e293b; }
.support-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; }
.support-card{ background:#fff; padding:2rem; border-radius:1rem; box-shadow:0 4px 10px rgba(0,0,0,.08); text-align:center; transition:transform .3s ease; }
.support-card:hover{ transform:translateY(-5px); }
.support-card .icon{ width:2rem; height:2rem; margin:0 auto 1rem; color:#2563eb; }
.support-card h3{ font-size:1.2rem; color:#111827; margin-bottom:.5rem; }
.support-card p{ font-size:.95rem; color:#374151; }

/* ===== Full width helper ===== */
.full-width-section{
  max-width:none !important; margin:0 !important; padding:4rem 0 !important; position:relative;
  margin-left:-50vw; margin-right:-50vw; box-sizing:border-box; text-align:center;
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
.reasons-section{ background-color:#f3f3f3; background-image:url('../images/bg02.png'); }
.s03{ background-color:#fff; } .s04{ background-color:#f3f3f3; }
.support-section{ background-color:#fff; } .s05{ background-color:#f3f3f3; }
.article-section{ background-color:#fff; }

.full-width-section > .container{ position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:0 1rem; text-align:left; }
.article-section > .container:hover{ transform:translateY(-2px); }
.article-section h2{ border-left:6px solid #007bff; padding-left:1rem; display:flex; align-items:center; gap:.5rem; }
.article-section h2::before{ content:"🛡️"; font-size:2rem; }

@media (max-width:768px){
  header{ flex-direction:column; }
  .article-section{ padding:1.5rem; }
  .article-section h2{ font-size:1.2rem; }
}

/* ===== Image slider ===== */
.image-slider{ overflow:hidden; width:100%; background:#fff; padding:1rem 0; margin:0; max-width:100%; }
.slider-track{ display:flex; width:calc(14 * 220px); animation:scrollSlider 60s linear infinite; }
.slider-track img{ height:240px; width:auto; margin:0 10px; object-fit:contain; flex-shrink:0; }
@media (max-width:768px){ .slider-track img{ height:120px; } }
@keyframes scrollSlider{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

/* ===== CTA ===== */
.cta-section{ color:#fff; padding:3rem 1rem; text-align:center; max-width:100%; }
.cta-container{ max-width:800px; margin:0 auto; }
.cta-section h2{ font-size:1.8rem; margin-bottom:1rem; }
.cta-section p{ font-size:1rem; margin-bottom:2rem; line-height:1.6; }
.cta-section .btn-primary{ display:inline-block; padding:.8rem 2rem; font-size:1rem; font-weight:bold; color:#fff; background:#1d4ed8; border:none; border-radius:6px; text-decoration:none; transition:background-color .3s ease; }
.cta-section .btn-primary:hover{ background:#2563eb; }

/* ===== Advisor bubble ===== */
.advisor-comment{ display:flex; align-items:flex-start; margin:2rem 0; gap:1rem; }
.advisor-icon img{ width:60px; height:60px; border-radius:50%; object-fit:cover;max-width: 60px; }
.advisor-bubble{ background:#f1f5f9; padding:1rem 1.5rem; border-radius:12px; max-width:1000px; position:relative; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.advisor-bubble::before{ content:''; position:absolute; top:15px; left:-10px; width:0; height:0; border-top:10px solid transparent; border-right:10px solid #f1f5f9; border-bottom:10px solid transparent; }

/* ===== Crypto icons grid ===== */
.crypto-icons-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); gap:12px; justify-content:center; justify-items:center; align-items:center; padding:20px 0; max-width:1000px; margin:0 auto; }
.crypto-icons-grid img{ width:48px; height:48px; object-fit:contain; transition:transform .2s ease; }
.crypto-icons-grid img:hover{ transform:scale(1.2); }
@media (max-width:768px){ .crypto-icons-grid{ grid-template-columns:repeat(auto-fill,minmax(32px,1fr)); gap:8px; padding:0; } .crypto-icons-grid img{ width:32px; height:32px; } }

/* ===== TradingView wrapper ===== */
.tradingview-widget-container{ max-width:1000px; margin:0 auto; width:100%; padding:1rem 0; }
@media (max-width:768px){ .tradingview-widget-container{ max-width:100%; padding:1rem; } }
.tv-embed-widget-wrapper{ height:auto !important; }

/* ===== Icons ===== */
.icon{ width:1em; height:1em; vertical-align:-0.125em; fill:currentColor; }
.reason-icon .icon{ width:1.2em; height:1.2em; }
.reason-icon.red{ color:#ef4444; } .reason-icon.orange{ color:#f59e0b; } .reason-icon.gold{ color:#d97706; } .reason-icon.gray{ color:#6b7280; }

/* ===== Footer ===== */
footer{ text-align:center; padding:2rem 1rem; background:linear-gradient(to right,#0f172a,#1e293b); color:#94a3b8; }