@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Noto+Sans+JP:wght@300;400;700&display=swap');

:root{
  --color-dblue:#222b82;
  --color-gray:#333;
  --color-black:#000;
  --color-sky:#57b3ed;
  --color-pink:#f26f9d;
  --color-white:#fff;
  --color-line:#ccc;
  --color-linesns:#06c755;
  --color-orange1:#ff6600;
  --color-orange2:#ff9933;
  --hero-blue1:#c6edfc;
  --hero-blue2:#c6cffc;
  --footer-blue:#cfe8f9;
}

*{box-sizing:border-box;}
body{
  margin:0;
  overflow-x:hidden;
  font-size:16px;
  background:var(--color-white);
  color:var(--color-gray);
  font-family:"Noto Sans JP","游ゴシック体","Yu Gothic",YuGothic,sans-serif;
  font-weight:400;
  line-height:1.7;
  padding-top:64px;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0 0 .5em;}

.innerArea{max-width:1200px;margin:0 auto;padding:0 16px;}

/* ===== Header ===== */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
header .innerArea{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;max-width:1200px;
}
header .logo img{height:34px;width:auto;}
header nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
header nav a{font-size:.92rem;color:var(--color-gray);font-weight:700;white-space:nowrap;}
header nav a:hover{color:var(--color-dblue);}
.nav-dropdown{position:relative;}
.nav-dropdown > a::after{content:" ▾";font-size:.7em;}
.nav-dropdown .dropdown-menu{
  display:none;position:absolute;top:100%;left:0;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12);min-width:180px;padding:6px 0;border-radius:4px;
}
.nav-dropdown:hover .dropdown-menu{display:block;}
.nav-dropdown .dropdown-menu li a{display:block;padding:8px 16px;font-weight:400;font-size:.88rem;}
.nav-dropdown .dropdown-menu li a:hover{background:#f5f7fb;}

/* ===== Hero ===== */
.hero{background:linear-gradient(to top right,var(--hero-blue1),var(--hero-blue2));}
.hero img{width:100%;display:block;}

.hero-inner{
  background:linear-gradient(to top right,var(--hero-blue1),var(--hero-blue2));
  padding:60px 16px;text-align:center;position:relative;
}
.hero-inner h2{font-size:2rem;color:var(--color-dblue);margin:0;}
.hero-inner .breadcrumb{position:absolute;bottom:14px;left:24px;font-size:.8rem;color:#555;}

/* ===== Buttons ===== */
.button{border:none;font-weight:700;font-size:1em;cursor:pointer;text-align:center;display:block;}
.button.orange{background:linear-gradient(to right,var(--color-orange1),var(--color-orange2));color:#fff;padding:18px 20px;border-radius:6px;}
.button.dblue{background:var(--color-dblue);color:#fff;padding:14px 20px;border-radius:40px;}
.button.line{background:var(--color-linesns);color:#fff;padding:12px 20px;border-radius:40px;display:inline-block;}
.mbbutton{margin-bottom:14px;}
.mw370{min-width:280px;max-width:370px;margin:0 auto;}

.ap-btn-ask{
  display:inline-block;background:var(--color-dblue);color:#fff;font-weight:700;
  padding:10px 28px;border-radius:20px;font-size:1rem;
}

/* ===== 掲示板 question list ===== */
.board-heading{font-size:1.6rem;margin:30px 0 12px;font-weight:700;}
.board-desc{color:#555;margin-bottom:20px;font-size:.95rem;}

.ap-list-head{display:flex;justify-content:flex-end;margin-bottom:14px;}

.ap-search-form{display:flex;margin-bottom:14px;gap:0;}
.ap-search-form input[type=text]{flex:1;border:1px solid var(--color-line);padding:10px 14px;border-radius:4px 0 0 4px;font-size:.9rem;}
.ap-search-form button{background:#fff;border:1px solid var(--color-line);border-left:none;padding:10px 18px;border-radius:0 4px 4px 0;cursor:pointer;font-weight:700;}
.ask-btn-row{text-align:right;margin-bottom:10px;}

.ap-filters{display:flex;align-items:center;gap:16px;margin-bottom:16px;font-size:.88rem;}
.ap-filters a{color:#2ea86b;}
.ap-filters .reset{color:#2ea86b;display:flex;align-items:center;gap:4px;}

.question-item{
  display:flex;gap:14px;padding:18px 0;border-bottom:1px solid #eee;
}
.q-avatar{width:45px;height:45px;border-radius:50%;background:#ddd;flex-shrink:0;}
.q-body h3{font-size:1.05rem;margin:0 0 8px;font-weight:700;}
.q-meta{font-size:.82rem;color:#888;display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px;}
.q-questioner{font-size:.85rem;color:#555;display:flex;align-items:center;gap:8px;}
.badge{display:inline-block;background:var(--color-sky);color:#fff;font-size:.75rem;padding:2px 10px;border-radius:20px;}
.badge.female{background:var(--color-pink);}

.pagination{display:flex;gap:6px;justify-content:center;margin:24px 0;flex-wrap:wrap;}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--color-line);border-radius:4px;font-size:.85rem;color:#333;
}
.pagination .current{background:var(--color-dblue);color:#fff;border-color:var(--color-dblue);}

.cta-block{text-align:center;padding:30px 16px;}
.cta-block p{margin-bottom:16px;}
.cta-block .btn-wrap{max-width:370px;margin:0 auto 12px;}
.cta-block .line-wrap{margin-top:6px;}

/* ===== About / Point section ===== */
#question, #point{padding:40px 0;}
.section-title{font-size:2.4rem;font-family:"Courgette",cursive;color:var(--color-dblue);text-align:center;margin-bottom:6px;}
.section-title span{display:block;font-family:"Noto Sans JP",sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:2px;color:var(--color-gray);margin-top:6px;}

.about-flex{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:30px;}
.about-item{flex:1 1 260px;max-width:320px;text-align:center;}
.about-item .img-circle{width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 auto 16px;}
.about-item h4{font-size:1.05rem;margin-bottom:10px;}
.about-item p{font-size:.9rem;color:#555;}

#point{background:#fafafa;}
#point h3{font-size:1.5rem;text-align:center;margin-bottom:16px;}
.point-photo{text-align:center;margin-bottom:20px;}
.point-photo img{max-width:480px;margin:0 auto;border-radius:6px;}
#point .point-desc{max-width:720px;margin:0 auto;font-size:.92rem;color:#444;}

/* ===== Banner partners ===== */
.partner-flex{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:20px 16px 40px;}
.partner-flex a{flex:1 1 260px;max-width:400px;}
.partner-flex img{border:1px solid var(--color-line);border-radius:10px;}

/* ===== Profile ===== */
#profile{padding:40px 0;}
.profile-flex{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start;margin-bottom:40px;}
.profile-flex img.profile-photo{width:220px;border-radius:6px;object-fit:cover;}
.profile-info{flex:1;min-width:260px;}
.profile-info h3{font-size:1.3rem;}
.profile-info h3 .small{display:block;font-size:.85rem;font-weight:400;color:#666;}
.ishrs-badge{text-align:center;margin:10px 0;}
.ishrs-badge img{max-width:100px;margin:0 auto;}
.ishrs-badge a.member-link{display:block;text-align:center;margin-top:6px;font-size:.85rem;color:#333;}
.sns-icons{display:flex;gap:12px;margin-top:14px;}
.sns-icons img{width:32px;height:32px;}
.sns-icons .black-bg{background:#000;border-radius:8px;padding:6px;}

/* ===== Footer ===== */
#footer{background:var(--footer-blue);padding:40px 0 16px;margin-top:40px;}
.footer-flex{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;}
.footer-col h2 img{height:30px;}
.footer-col ul li{margin-bottom:8px;font-size:.88rem;}
.footer-col ul li a::before{content:"❯ ";color:var(--color-dblue);font-size:.7em;}
.footer-sub{margin-left:14px;}
.footer-copy{text-align:center;font-size:.8rem;color:#555;margin-top:30px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08);}

/* ===== Forms (registration / login) ===== */
.form-wrap{max-width:640px;margin:30px auto 60px;padding:0 16px;}
.form-wrap h2{font-size:1.4rem;margin-bottom:24px;}
.form-group{margin-bottom:22px;}
.form-group label{display:block;font-weight:700;margin-bottom:8px;font-size:.92rem;}
.form-group label .required{color:#d33;margin-left:4px;}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group input[type=date]{
  width:100%;border:1px solid var(--color-line);padding:10px 12px;border-radius:4px;font-size:.95rem;
}
.radio-row{display:flex;gap:20px;}
.radio-row label{display:flex;align-items:center;gap:6px;font-weight:400;}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;}
.captcha-code{
  display:inline-block;background:#f0f0f0;padding:8px 22px;font-weight:700;letter-spacing:4px;
  border-radius:4px;margin-bottom:10px;font-family:monospace;
}
.submit-btn{
  background:#fff;border:1px solid #333;padding:10px 40px;border-radius:4px;font-weight:700;cursor:pointer;
}
.form-note{font-size:.82rem;color:#666;margin-top:20px;}
.form-links{margin-top:16px;font-size:.9rem;}
.form-links a{color:var(--color-dblue);text-decoration:underline;}

/* ===== breadcrumb path ===== */
.breadcrumb-path{font-size:.82rem;color:#666;margin:16px 0;}
.breadcrumb-path a{color:var(--color-dblue);text-decoration:underline;}

/* ===== NEW: membership / pricing ===== */
.plan-flex{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin:30px 0 50px;}
.plan-card{
  flex:1 1 280px;max-width:340px;border:1px solid var(--color-line);border-radius:10px;
  padding:26px 22px;background:#fff;position:relative;
}
.plan-card.highlight{border:2px solid var(--color-dblue);box-shadow:0 8px 24px rgba(34,43,130,.15);}
.plan-card .tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--color-dblue);color:#fff;font-size:.75rem;padding:4px 16px;border-radius:20px;white-space:nowrap;
}
.plan-card h3{font-size:1.15rem;text-align:center;margin-bottom:6px;}
.plan-card .price{text-align:center;font-size:1.8rem;font-weight:700;color:var(--color-dblue);margin-bottom:16px;}
.plan-card .price span{font-size:.9rem;font-weight:400;color:#666;}
.plan-card ul{margin-top:14px;}
.plan-card ul li{font-size:.88rem;padding:6px 0;border-bottom:1px dashed #eee;display:flex;gap:8px;}
.plan-card ul li::before{content:"✔";color:#2ea86b;flex-shrink:0;}
.plan-card ul li.no::before{content:"✕";color:#ccc;}
.plan-card ul li.no{color:#aaa;}

/* ===== NEW: paywall demo ===== */
.view-switcher{
  display:flex;gap:10px;justify-content:center;margin:26px 0;flex-wrap:wrap;
  background:#f5f5f5;padding:14px;border-radius:10px;
}
.view-switcher button{
  border:1px solid var(--color-line);background:#fff;padding:10px 18px;border-radius:20px;font-size:.88rem;
  font-weight:700;cursor:pointer;color:#555;
}
.view-switcher button.active{background:var(--color-dblue);color:#fff;border-color:var(--color-dblue);}

.answer-card{border:1px solid #eee;border-radius:8px;padding:20px;margin-bottom:16px;background:#fff;}
.answer-card .answerer{font-weight:700;font-size:.92rem;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.answerer .role-tag{background:var(--color-dblue);color:#fff;font-size:.7rem;padding:2px 10px;border-radius:20px;}
.answer-text{position:relative;}
.answer-text.locked .fade-content{
  max-height:3.4em;overflow:hidden;position:relative;
}
.answer-text.locked .fade-content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
  background:linear-gradient(rgba(255,255,255,0),#fff 85%);
}
.unlock-cta{
  text-align:center;background:#fff7ec;border:1px dashed var(--color-orange1);border-radius:8px;
  padding:16px;margin-top:10px;font-size:.9rem;
}
.unlock-cta a{color:var(--color-orange1);font-weight:700;text-decoration:underline;}

.like-row{display:flex;align-items:center;gap:10px;margin-top:14px;}
.like-btn{
  border:1px solid var(--color-line);background:#fff;padding:8px 18px;border-radius:20px;font-size:.85rem;
  cursor:pointer;display:flex;align-items:center;gap:6px;
}
.like-btn.disabled{color:#aaa;cursor:not-allowed;background:#f5f5f5;}
.like-btn.enabled{color:var(--color-dblue);border-color:var(--color-dblue);font-weight:700;}
.like-count{font-size:.85rem;color:#666;}

.tier-note{text-align:center;font-size:.85rem;color:#888;margin-top:10px;}

/* ===== NEW: 1on1 booking demo ===== */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:20px 0 30px;}
.slot{
  border:1px solid var(--color-line);border-radius:8px;padding:12px 8px;text-align:center;font-size:.85rem;
  cursor:pointer;background:#fff;
}
.slot.selected{background:var(--color-dblue);color:#fff;border-color:var(--color-dblue);}
.slot.disabled{background:#f0f0f0;color:#bbb;cursor:not-allowed;}

.consult-steps{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0;}
.consult-step{flex:1 1 200px;background:#f8f9fc;border-radius:8px;padding:18px;text-align:center;}
.consult-step .num{
  width:32px;height:32px;border-radius:50%;background:var(--color-dblue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-weight:700;
}
.consult-step h4{font-size:.95rem;margin-bottom:6px;}
.consult-step p{font-size:.8rem;color:#666;}

.zoom-box{
  border:1px solid var(--color-line);border-radius:8px;padding:20px;margin:20px 0;background:#fafcff;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.zoom-box .zoom-icon{
  width:44px;height:44px;border-radius:50%;background:#2d8cff;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;flex-shrink:0;
}

.demo-banner{
  background:var(--color-dblue);color:#fff;text-align:center;padding:10px;font-size:.85rem;position:relative;z-index:99;
}
.demo-banner strong{color:#ffd166;}

@media (max-width:768px){
  header nav{display:none;}
  .profile-flex{flex-direction:column;align-items:center;text-align:center;}
  .footer-flex{flex-direction:column;gap:20px;}
}
