:root{

  --main:#0D2454;

  --accent:#00448d;

  --gold:#F3E195;

  --bg:#0b1a3a;

  --panel:#162f65;

}

/* ===== 全体 ===== */

body{

  margin:0;

  font-family:'Noto Sans JP', sans-serif;

  background:var(--bg);

  color:#fff;

}

/* ===== HEADER ===== */

.site-header{

  background:linear-gradient(135deg,var(--main),var(--accent));

  padding:12px 20px;

  position:sticky;

  top:0;

  z-index:1000;

}

.header-inner{

  max-width:1000px;

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.header-logo{

  color:#fff;

  font-weight:900;

  text-decoration:none;

  font-size:18px;

}

.header-nav{

  display:flex;

  gap:16px;

}

.header-nav a{

  color:rgba(255,255,255,.7);

  text-decoration:none;

  font-size:14px;

  position:relative;

}

.header-nav a:hover{

  color:#fff;

}

.header-nav a.active{

  color:#fff;

  font-weight:700;

}

.header-nav a.active::after{

  content:"";

  position:absolute;

  bottom:-4px;

  left:0;

  width:100%;

  height:2px;

  background:var(--gold);

}

/* ===== ラップ ===== */

.fc-wrap{

  padding:40px 15px 60px;

}

/* ===== FAQ ===== */

.faq-panel{

  max-width:900px;

  margin:0 auto 40px;

  padding:40px 20px;

  background:var(--panel);

  border:2px solid var(--gold);

  border-radius:24px;

  box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

/* タイトル */

.section-header{

  text-align:center;

  margin-bottom:30px;

}

.section-header h2{

  color:var(--gold);

  font-size:22px;

  font-weight:900;

  letter-spacing:2px;

}

.section-header p{

  color:#fff;

  font-size:13px;

  opacity:.8;

}

/* ===== FAQ ITEM ===== */

.faq-item{

  border-bottom:1px solid rgba(243,225,149,.2);

}

.faq-question{

  width:100%;

  background:none;

  border:none;

  padding:20px 0;

  display:flex;

  align-items:flex-start;

  gap:12px;

  color:var(--gold);

  font-weight:900;

  cursor:pointer;

}

.faq-question-text{

  flex:1;

}

.faq-toggle{

  font-size:20px;

  transition:.3s;

}

/* 開いたとき回転 */

.faq-item.open .faq-toggle{

  transform:rotate(45deg);

}

/* 回答 */

.faq-answer{

  max-height:0;

  overflow:hidden;

  transition:max-height .3s ease;

}

.faq-item.open .faq-answer{

  max-height:300px;

}

.faq-answer-inner{

  display:flex;

  gap:12px;

  padding-bottom:20px;

}

.faq-answer p{

  color:#fff;

  font-size:14px;

  line-height:1.8;

}

/* ===== CONTACT ===== */

.contact-panel{

  max-width:900px;

  margin:auto;

  text-align:center;

}

.contact-panel h3{

  color:var(--gold);

  font-size:24px;

  font-weight:900;

}

.contact-lead{

  color:#fff;

  margin-bottom:30px;

  line-height:1.8;

}

/* メインボタン */

.contact-main-btn{

  display:block;

  max-width:320px;

  margin:0 auto;

  padding:18px;

  background:linear-gradient(135deg,#F3E195,#D4AF37);

  color:#0D2454;

  text-decoration:none;

  font-weight:900;

  border-radius:50px;

  box-shadow:0 10px 30px rgba(0,0,0,0.3);

  transition:.2s;

}

.contact-main-btn:hover{

  transform:translateY(-3px);

}

/* サブ */

.contact-sub{

  margin-top:40px;

}

.contact-sub p{

  font-size:12px;

  opacity:.7;

}

.contact-sub-btn{

  border:1px solid var(--gold);

  color:var(--gold);

  padding:10px 20px;

  border-radius:40px;

  text-decoration:none;

  display:inline-block;

  margin-top:10px;

  transition:.2s;

}

.contact-sub-btn:hover{

  background:rgba(255,255,255,0.1);

}

/* ===== reveal（ふわっと） ===== */

.reveal{

  opacity:0;

  transform:translateY(20px);

  transition:.6s;

}

.reveal.show{

  opacity:1;

  transform:none;

}

/* ===== スマホ ===== */

@media (max-width:768px){

  .header-inner{

    flex-direction:column;

    gap:10px;

  }

  .header-nav{

    flex-wrap:wrap;

    justify-content:center;

  }

  .faq-panel{

    padding:30px 15px;

  }

  .faq-question{

    font-size:14px;

  }

  .contact-panel h3{

    font-size:20px;

  }

}