/* =====================================================
   DNAform 研究倫理委員会 共通スタイルシート
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans JP","Yu Gothic","Meiryo",sans-serif; background:#f7f9fc; color:#1a2a4a; line-height:1.7; font-size:16px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
:root {
  --navy:#0d2c5b; --teal:#0a7eb4; --teal-lt:#e6f4fb;
  --accent:#f5a623; --green:#2e7d32; --red:#c62828;
  --orange:#e65100; --gray-bg:#f0f4f8; --border:#d0dce8;
  --white:#ffffff; --text:#1a2a4a; --text-lt:#4a6080;
}
/* NAVBAR */
.navbar { background:var(--navy); padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:64px; position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.navbar-brand a { display:flex; align-items:center; gap:.6rem; color:#fff; }
.navbar-brand img { height:44px; width:auto; object-fit:contain; flex-shrink:0; }
.navbar-brand .brand-text { line-height:1.25; }
.navbar-brand .brand-text .t1 { font-size:.82rem; font-weight:700; display:block; }
.navbar-brand .brand-text .t2 { font-size:.75rem; opacity:.88; display:block; }
.navbar-nav { display:flex; gap:1.2rem; list-style:none; flex-wrap:wrap; }
.navbar-nav a { color:rgba(255,255,255,.85); font-size:.85rem; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; white-space:nowrap; }
.navbar-nav a:hover { color:#fff; border-bottom-color:var(--accent); }
/* BACK NAV */
.back-nav { background:#1a3a6a; padding:.6rem 1.5rem; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); }
.back-btn { display:inline-flex; align-items:center; gap:.3rem; color:rgba(255,255,255,.82); font-size:.8rem; font-weight:600; padding:.3rem .8rem; border-radius:20px; border:1px solid rgba(255,255,255,.25); transition:background .15s,color .15s; white-space:nowrap; }
.back-btn:hover { background:rgba(255,255,255,.15); color:#fff; }
/* HERO */
.hero { background:linear-gradient(135deg,var(--navy) 0%,#1a5a9a 60%,#2a8ac0 100%); color:#fff; text-align:center; padding:5rem 2rem 4rem; position:relative; }
.hero-sub { background:linear-gradient(135deg,#1a5a9a 0%,#2a8ac0 100%); padding:3.5rem 2rem 3rem; color:#fff; text-align:center; }
.hero h1 { font-size:2.8rem; font-weight:800; letter-spacing:.05em; text-shadow:0 2px 8px rgba(0,0,0,.25); line-height:1.3; }
.hero-sub h1 { font-size:2rem; }
.hero .org-name { font-size:1.1rem; font-weight:400; margin-bottom:.5rem; opacity:.9; }
.hero .en-title { font-size:1rem; font-weight:300; letter-spacing:.1em; opacity:.8; margin-top:.5rem; }
/* APPEAL BANNER */
.appeal-banner { background:linear-gradient(135deg,#fff8e6,#fff3cc); border-left:6px solid var(--accent); border-top:1px solid #f5d080; border-bottom:1px solid #f5d080; padding:2rem 2.5rem; text-align:center; }
.appeal-banner h2 { font-size:1.6rem; color:var(--navy); margin-bottom:.8rem; }
.highlight-6days { display:inline-block; background:var(--accent); color:#fff; font-size:1.5rem; font-weight:800; padding:.3rem 1.2rem; border-radius:4px; margin:.4rem .2rem; }
.appeal-items { display:flex; justify-content:center; gap:3rem; margin-top:1.2rem; flex-wrap:wrap; }
.appeal-item { display:flex; flex-direction:column; align-items:center; max-width:260px; }
.appeal-item .icon { font-size:2.2rem; margin-bottom:.4rem; }
.appeal-item h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; }
.appeal-item p { font-size:.88rem; color:var(--text-lt); line-height:1.5; }
/* SECTION */
.section { padding:3rem 2rem; max-width:1100px; margin:0 auto; }
.section-title { font-size:1.6rem; font-weight:700; color:var(--navy); border-left:5px solid var(--teal); padding-left:.8rem; margin-bottom:.5rem; }
.section-subtitle { font-size:.9rem; color:var(--text-lt); margin-bottom:2rem; padding-left:1.3rem; }
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
/* BUTTON GROUPS */
.btn-group-label { display:flex; align-items:center; gap:.6rem; font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:1.2rem; padding:.6rem 1rem; background:var(--teal-lt); border-radius:6px; border-left:4px solid var(--teal); }
.btn-group-label .group-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:var(--teal); color:#fff; border-radius:50%; font-size:.9rem; font-weight:800; flex-shrink:0; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem; margin-bottom:2.5rem; }
.card-btn { background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:1.4rem 1.2rem; text-align:center; cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--text); }
.card-btn:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(13,44,91,.12); border-color:var(--teal); }
.card-btn .card-icon { font-size:2.4rem; }
.card-btn .card-title { font-size:.95rem; font-weight:700; color:var(--navy); line-height:1.4; }
.card-btn .card-desc { font-size:.8rem; color:var(--text-lt); line-height:1.4; }
.card-btn.card-apply { border-color:#b8d4f0; background:linear-gradient(to bottom,#fafcff,#eef5fc); }
.card-btn.card-apply:hover { border-color:var(--teal); }
.card-btn.card-internal { border-color:#d0d8e0; background:linear-gradient(to bottom,#fafafa,#f0f4f8); }
/* CONTACT BANNER */
.contact-banner { background:linear-gradient(135deg,var(--navy),#1a4a8a); color:#fff; padding:1.2rem 2rem; text-align:center; font-size:.92rem; line-height:1.8; }
.contact-banner a { color:#ffdd77; }
/* GREETING */
.greeting-section { background:var(--white); border-top:4px solid var(--teal); padding:3rem 2rem; }
.greeting-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:start; }
.greeting-photo { text-align:center; }
.greeting-photo img { width:200px; height:240px; object-fit:cover; object-position:top center; border-radius:8px; border:3px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,.12); margin:0 auto .6rem; }
.greeting-content h2 { font-size:1.5rem; color:var(--navy); margin-bottom:.3rem; }
.greeting-content .greeting-sub { font-size:1rem; color:var(--teal); margin-bottom:1.2rem; font-style:italic; }
.greeting-content p { margin-bottom:1rem; font-size:.95rem; line-height:1.8; }
.greeting-sign { text-align:right; font-size:.95rem; margin-top:1.5rem; color:var(--navy); font-weight:600; }
/* POLICY */
.policy-section { background:var(--gray-bg); padding:3rem 2rem; }
.policy-inner { max-width:1000px; margin:0 auto; }
.policy-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:1.5rem; }
.policy-card { background:var(--white); border-radius:10px; padding:1.5rem; border-top:4px solid var(--teal); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.policy-card.card-urgent { border-top-color:var(--accent); }
.policy-card h3 { font-size:1rem; color:var(--navy); margin-bottom:.8rem; }
.policy-card p { font-size:.88rem; color:var(--text-lt); line-height:1.7; }
.badge-6days { display:inline-block; background:var(--accent); color:#fff; font-size:.9rem; font-weight:800; padding:.15rem .7rem; border-radius:4px; margin:.3rem 0; }
/* FEATURES */
.features-section { background:var(--white); padding:3rem 2rem; }
.features-inner { max-width:1000px; margin:0 auto; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:1.5rem; }
.feature-card { background:var(--gray-bg); border-radius:10px; padding:1.5rem; border-left:4px solid var(--teal); }
.feature-card.feature-highlight { border-left-color:var(--accent); background:#fff9ee; }
.feature-card .feature-icon { font-size:2.8rem; margin-bottom:.7rem; display:block; }
.feature-card h3 { font-size:1rem; color:var(--navy); margin-bottom:.7rem; }
.feature-card p { font-size:.87rem; color:var(--text-lt); line-height:1.7; }
/* RECOMMEND */
.recommend-section { background:var(--teal-lt); padding:3rem 2rem; }
.recommend-inner { max-width:1000px; margin:0 auto; }
.recommend-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.recommend-card { background:var(--white); border-radius:10px; padding:1.2rem 1.4rem; display:flex; align-items:flex-start; gap:1rem; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.recommend-card .rec-icon { font-size:2rem; flex-shrink:0; }
.recommend-card h3 { font-size:.92rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; }
.recommend-card p { font-size:.83rem; color:var(--text-lt); line-height:1.5; }
/* FOOTER */
footer { background:var(--navy); color:rgba(255,255,255,.75); padding:2rem; text-align:center; font-size:.85rem; line-height:2; }
footer a { color:rgba(255,255,255,.6); }
footer strong { color:#fff; }
/* STEP NAV */
.step-nav { background:var(--gray-bg); padding:1rem 2rem; display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.step-pill { display:inline-flex; align-items:center; padding:.35rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; border:1.5px solid var(--border); background:var(--white); color:var(--text-lt); transition:background .15s,color .15s; }
.step-pill:hover,.step-pill.active { background:var(--teal); color:#fff; border-color:var(--teal); }
/* FLOW STEPS */
.flow-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0; }
.flow-step { background:var(--white); border:2px solid var(--border); border-radius:10px; padding:1.2rem 1rem; text-align:center; display:block; transition:transform .15s,box-shadow .15s,border-color .15s; }
.flow-step:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(10,126,180,.15); border-color:var(--teal); }
.flow-step.current { border-color:var(--teal); background:var(--teal-lt); }
.flow-step .step-num { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--teal); color:#fff; border-radius:50%; font-weight:800; font-size:1rem; margin:0 auto .5rem; }
.flow-step .step-label { font-size:.85rem; font-weight:700; color:var(--navy); line-height:1.4; }
.flow-step .step-sub { font-size:.75rem; color:var(--text-lt); margin-top:.3rem; line-height:1.4; }
/* INFO CARD */
.info-card { background:var(--white); border-radius:10px; border:1px solid var(--border); padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.info-card h3 { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:.8rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
/* TARGET BOXES */
.target-box { border:2px solid; border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.target-box.green { border-color:var(--green); background:#f0faf0; }
.target-box.red   { border-color:var(--red);   background:#fff5f5; }
.target-box.green h4 { color:var(--green); font-size:.9rem; font-weight:700; margin-bottom:.6rem; }
.target-box.red h4   { color:var(--red);   font-size:.9rem; font-weight:700; margin-bottom:.6rem; }
.target-box ul { padding-left:1.2rem; font-size:.88rem; line-height:1.8; }
/* RESULT CARDS */
.result-cards { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.result-card { flex:1; min-width:200px; border:2px solid; border-radius:8px; padding:1rem 1.2rem; }
.result-card.green  { border-color:var(--green);  background:#f0faf0; }
.result-card.orange { border-color:var(--orange); background:#fff8f0; }
.result-card.red    { border-color:var(--red);    background:#fff5f5; }
.result-card h4 { font-size:1rem; font-weight:800; margin-bottom:.5rem; }
.result-card.green h4  { color:var(--green); }
.result-card.orange h4 { color:var(--orange); }
.result-card.red h4    { color:var(--red); }
.result-card p { font-size:.87rem; line-height:1.6; }
/* CHECKLIST */
.checklist { list-style:none; padding:0; margin:1rem 0; }
.checklist li { display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #eee; font-size:.9rem; }
.checklist li:last-child { border-bottom:none; }
.checklist li::before { content:"☐"; font-size:1.2rem; color:var(--teal); flex-shrink:0; line-height:1.3; }
/* BUTTONS */
.btn-dl { display:inline-flex; align-items:center; gap:.4rem; background:var(--teal); color:#fff; border-radius:6px; padding:.5rem 1.2rem; font-size:.88rem; font-weight:600; border:none; cursor:pointer; margin:.4rem .2rem; transition:background .2s; }
.btn-dl:hover { background:var(--navy); }
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; background:var(--navy); color:#fff; border-radius:8px; padding:.75rem 1.8rem; font-size:1rem; font-weight:700; border:none; cursor:pointer; transition:background .2s; }
.btn-primary:hover { background:var(--teal); }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background:var(--white); color:var(--navy); border-radius:8px; padding:.7rem 1.5rem; font-size:.92rem; font-weight:600; border:2px solid var(--navy); cursor:pointer; transition:background .2s,color .2s; }
.btn-secondary:hover { background:var(--navy); color:#fff; }
.btn-row { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; align-items:center; }
/* FLOW LIST */
.flow-list { list-style:none; padding:0; counter-reset:flow; }
.flow-list li { display:flex; align-items:flex-start; gap:.8rem; padding:.6rem 0; border-bottom:1px solid #eee; font-size:.88rem; counter-increment:flow; }
.flow-list li::before { content:counter(flow); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--teal); color:#fff; border-radius:50%; font-size:.78rem; font-weight:700; flex-shrink:0; }
/* TABLE */
table { width:100%; border-collapse:collapse; font-size:.88rem; margin:1rem 0; }
th { background:var(--navy); color:#fff; padding:.6rem .8rem; text-align:left; font-weight:600; }
td { padding:.6rem .8rem; border-bottom:1px solid var(--border); vertical-align:top; }
tr:nth-child(even) td { background:var(--gray-bg); }
/* ALERT BOX */
.alert-box { border-left:4px solid; border-radius:4px; padding:1rem 1.2rem; margin:1rem 0; font-size:.9rem; }
.alert-box.info   { border-color:var(--teal);  background:var(--teal-lt); color:#0a4060; }
.alert-box.warn   { border-color:var(--accent); background:#fff9ee;       color:#5a3000; }
.alert-box.danger { border-color:var(--red);    background:#fff5f5;        color:var(--red); }
/* MODAL (password) */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:2000; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:2.5rem 2rem; max-width:400px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.modal-box h3 { font-size:1.2rem; color:var(--navy); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.modal-box label { font-size:.88rem; color:var(--text-lt); display:block; margin-bottom:.3rem; }
.modal-box input { width:100%; border:1.5px solid var(--border); border-radius:6px; padding:.6rem .8rem; font-size:.95rem; margin-bottom:1rem; }
.modal-box input:focus { outline:none; border-color:var(--teal); }
.modal-err { color:var(--red); font-size:.85rem; margin-bottom:.8rem; display:none; }
/* PHOTO SECTION */
.photo-row { display:flex; gap:1.2rem; flex-wrap:wrap; margin:1.2rem 0; }
.photo-row img { border-radius:8px; object-fit:cover; flex:1; min-width:220px; max-height:220px; border:2px solid var(--border); }
.section-photo { width:100%; border-radius:8px; object-fit:cover; max-height:260px; border:2px solid var(--border); margin:1rem 0; }
/* RESPONSIVE */
@media(max-width:768px){
  .hero h1{font-size:2rem}
  .greeting-inner{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr}
  .navbar{flex-wrap:wrap;height:auto;padding:.7rem 1rem}
  .result-cards{flex-direction:column}
  .appeal-items{flex-direction:column;align-items:center}
}

/* Anchor offset for sticky navbar */
#greeting, #policy, #features, #recommend {
  scroll-margin-top: 80px;
}