/* css/self.css */
@charset "utf-8";
/* ------- header ------- */
header{
  background: url(../img/self/bg_header.png) no-repeat;
  background-position: top center;
  background-size: cover;
  height: 465px;
  padding: 50px 5% 0;
}
.read_area .text{ margin:34px auto 0; }
h1{
  text-align:center;
  margin-top:133px;
  font-size:48px;
  letter-spacing:.13em;
}

/* ------- Notice???? ------- */
.read_area.notice{
  background:#f6f7f8;
  border:1px solid #e8ecef;
  border-radius:16px;
  padding:2rem 1rem;
  margin:24px auto;
  text-align:center;
}
.read_area.notice .text{ max-width:800px; margin:0 auto; }
.read_area.notice .lead{
  font-family:"M PLUS 1p","Noto Serif JP",system-ui,-apple-system,sans-serif;
  font-size:clamp(16px,2.2vw,18px);
  line-height:1.9;
  color:#596C79;
  font-weight:500;
  letter-spacing:.02em;
}
.read_area.notice .lead strong{ color:#475a66; }
.read_area.notice .lead-title{
  display:block;
  font-weight:700;
  color:#222;
  font-size:clamp(18px,3vw,22px);
  margin-bottom:.4em;
  letter-spacing:.03em;
}
.cta-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:1.2rem;
}
.btn.btn-ghost{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.7em 1.2em;
  border-radius:9999px;
  border:1px solid #AEB5BD;
  background:#fff; color:#596C79;
  text-decoration:none; font-weight:600; letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease,transform .05s ease;
}
.btn.btn-ghost:hover{ background:#f1f4f6; border-color:#8f9aa3; }
.btn.btn-ghost:active{ transform:translateY(1px); }
.btn.btn-ghost .icon{ width:18px; height:18px; display:inline-block; }

/* ------- Q&A ------- */
section.QandA .q-box{
  position:relative;
  max-width:1000px;
  background:#fff;
  border-radius:19px;
  color:#888;
  padding:20px 0 16px 87px;
  margin:0 auto 20px;
  cursor:pointer;
}
section.QandA .q-box::before{
  content:" ";
  position:absolute; top:4px; left:12px;
  background:url(../img/self/icon-question.png) no-repeat;
  background-size:63px; width:73px; height:82px;
}
section.QandA .q-box::after{
  content:" ";
  position:absolute; top:29px; right:11px;
  background:url(../img/self/icon-yaji05.png) no-repeat;
  background-size:24px; width:27px; height:17px;
  pointer-events:none; z-index:1;
}
section.QandA .q-box.open::after{ top:27px; right:15px; transform:rotate(-180deg); }
section.QandA .q-box p.Q-p{ display:inline-block; font-size:21px; letter-spacing:.05em; }
section.QandA .q-box .A-box{ display:none; margin:20px 77px 0 0; }
section.QandA .q-box .qa-toggle{
  position:absolute; right:0; top:0; width:56px; height:100%;
  background:transparent; border:0; padding:0; margin:0; cursor:pointer; z-index:2;
}
section.QandA .q-box .qa-toggle:focus{ outline:2px solid #aaa; outline-offset:2px; }
section.QandA .menseki{ color:#596C79; width:fit-content; margin:40px auto; }

/* ------- PC??????????????????UP ------- */
@media screen and (min-width:1024px){
  header{
    background-size:cover;
    background-position:center 96%; /* 90?96%????? */
    height:520px;
  }
  h1{ margin-top:90px; }
}
@media screen and (min-width:1440px){
  header{ background-position:center 95%; height:620px; }
  h1{ margin-top:110px; }
}

/* ------- Tablet ------- */
@media screen and (max-width:820px){
  header{ height:345px; }
}

/* ------- Phone ------- */
@media screen and (max-width:420px){
  header{ background-size:cover; height:150px; padding:25px 5% 0; }
  h1{
    margin-top:64px;
    font-size:clamp(20px,6vw,26px);
    letter-spacing:.05em;
    line-height:1.2;
  }
  .cta-buttons{ gap:10px; }
  .btn.btn-ghost{ padding:.65em 1.05em; font-size:14px; }
  section.QandA .q-box{ border-radius:16px; min-height:42px; padding:9px 48px 10px 69px; }
  section.QandA .q-box::before{ background-size:50px; }
  section.QandA .q-box::after{ top:27px; right:0; width:20px; background-size:15px; }
  section.QandA .q-box p.Q-p{ font-size:14px; }
  section.QandA .q-box .A-box{ margin:25px -23px 0 -45px; font-size:13px; }
  section.QandA .menseki{ font-size:12px; }
  section.QandA .q-box .qa-toggle{ width:64px; }
}