/* =============================
   Shared Base Styles (afftec.jp)
   Extracted from original inline styles and normalized
   ============================= */
:root{
  --afftec-accent:#962B1A;
  --afftec-gray:#555555;
  --afftec-muted:#888;
  --afftec-bg:#ffffff;
  --afftec-card:#f0f0f0;
  --afftec-card-strong:#e0e0e0;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background-color:var(--afftec-bg);
  color:#333;
  /* font-family:"Yu Gothic","Meiryo","Hiragino Kaku Gothic Pro","Noto Sans JP","Segoe UI","Helvetica Neue",sans-serif; */
  font-family: "Helvetica Neue", Helvetica, Arial, 
               "Yu Gothic", "Meiryo", 
               "Hiragino Kaku Gothic Pro", "Noto Sans JP", 
               "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* Simple page header */
header{
  background-color:#f0f0f0;
  padding:8px 16px;
  font-size:14px;
  color:var(--afftec-gray);
}

/* Containers */
.container{
  padding:32px 24px;
  max-width:880px;
  margin:0 auto;
}

h2{
  font-size:20px;
  border-bottom:1px solid #ccc;
  padding-bottom:4px;
  margin-top:32px;
  color:var(--afftec-accent);
}

p{ line-height:1.8; }

/* Buttons (used for back-to-home) */
.back-button{
  display:block;
  text-align:center;
  margin:48px 0 32px;
}
.back-button a{
  display:inline-block;
  padding:12px 28px;
  background-color:var(--afftec-card);
  border-radius:8px;
  text-decoration:none;
  color:#333;
  font-size:16px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:background-color .3s ease;
}
.back-button a:hover{ background-color:#d0eaff; }

/* Footer */
footer{
  background-color:#f8f8f8;
  text-align:center;
  padding:12px;
  font-size:12px;
  color:var(--afftec-muted);
}

/* ===== index page header / nav styles ===== */
.site-header{
  background-color:#ffffff;
  padding:15px;
  position:relative;
}
.site-logo{ font-weight:bold; margin:0; }
.logo-main{ font-size:30px; color:var(--afftec-accent); margin-left:20px; }
.logo-sub{ font-size:14px; color:#777; margin-left:8px; }
.lang-switch{
  position:absolute; top:20px; right:35px;
  font-size:12px; color:#666;
}
.lang-policy{
  position:absolute; top:64px; left:39px;
  font-size:12px; color:var(--afftec-accent);
}

.nav-wrapper{ background-color:#fff; padding:10px 10px; margin-top:5px; }
nav{
  margin-left:0; margin-right:0;
  background-color:#e0e0e0;
  padding:10px 12px;
  border-radius:6px;
  display:flex; flex-wrap:wrap;
}
nav a, nav span{
  display:inline-block;
  padding:6px 12px;
  margin-right:8px;
  text-decoration:none;
  font-size:14px;
  border-radius:6px;
}
nav a{ color:#555; background-color:#f0f0f0; transition:background-color .3s ease; }
nav a:hover{ background-color:#d0eaff; }
nav .disabled{
  color:#999; background-color:#e0e0e0;
  cursor:not-allowed; opacity:.6; pointer-events:none;
}

.main-message{
  margin:60px 10% 60px;
  font-size:18px; line-height:1.8;
}

.bottom-left{
  position:fixed; bottom:10px; left:15px;
  font-size:12px; color:#888; font-family:'Segoe UI',sans-serif;
}
.bottom-right-img{
  position:fixed; bottom:15px; right:15px;
  max-width:200px; border-radius:16px;
}

/* ===== faq styles ===== */
#faqSearch{
  width:100%; padding:8px 12px; font-size:14px;
  margin:16px 0; border:1px solid #ccc; border-radius:6px;
}
.faq-section{
  background-color:#f1ded4;
  padding:24px; border:1px solid #ccc; border-radius:8px;
}
.faq-item{
  border:1px solid #999; border-radius:4px;
  margin-bottom:12px; background-color:#fff; overflow:hidden;
}
.faq-question{
  background-color:#f9e8e2; padding:12px 16px; font-size:14px; font-weight:bold;
  cursor:pointer; border:none; width:100%; text-align:left;
}
.faq-answer{
  display:none; padding:12px 16px; font-size:13px; border-top:1px solid #ddd; background-color:#fff7f4;
}
.faq-item.open .faq-answer{ display:block; }

/* ===== page-specific images ===== */
.future-image{
  float:right; margin-left:24px; width:120px; height:auto;
  opacity:.4; border-radius:10px; border:1px solid #ccc;
}
.developer-portrait{
  float:right; margin-left:54px; width:120px; height:auto; opacity:1; border-radius:10px;
}
.future-image-large{ float:right; margin-left:24px;margin-top:25px;width:320px; height:auto; opacity:1; }

/* ===== Responsive tweaks ===== */
@media (max-width: 768px){
  .logo-main{ font-size:30px; }
  .logo-sub{ font-size:13px; }
  .main-message{
    font-size:14px; max-width:90%; margin:20px auto; text-align:left;
  }
  .bottom-right-img{
    position:static; display:block; margin:10px auto 0; max-width:50%;
  }
  .bottom-left{ position:static; text-align:center; margin-top:20px; }
  .nav-wrapper{ padding:10px; }
  nav{ justify-content:center; gap:6px; }
  nav a, nav span{ padding:4px 8px; font-size:13px; }
}

@media (max-width: 600px){
  .back-button a{ padding:16px 32px; font-size:18px; }
  .future-image, .developer-portrait, .future-image-large{ display:none; }
}