/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box}

/* ===== Base ===== */
body{
  font-family:Arial, sans-serif;
  background:#eaeaea;
}

/* ===== Header ===== */
header{
  background:#343a40; color:#fff; padding:20px; text-align:center; position:relative; z-index:10;
}
.header-container{max-width:1200px;margin:0 auto;padding:0 20px;text-align:center}
.container{width:90%;max-width:1200px;margin:0 auto;padding:20px}

/* Site title */
header h1{font-size:30px;padding-bottom:10px}

/* ===== Global Nav ===== */
nav ul{
  list-style:none; display:flex; justify-content:center; gap:15px; padding:0;
}
nav ul li a{color:#fff; text-decoration:none; font-size:18px}

/* Hamburger */
.hamburger-menu{display:none; flex-direction:column; cursor:pointer}
.hamburger-menu span{width:30px;height:3px;background:#fff;margin:5px 0;transition:.4s}

/* Mobile Nav */
@media (max-width:768px){
  .hamburger-menu{display:flex; position:absolute; top:20px; right:20px; z-index:15}
  header h1{font-size:20px}
  #nav-menu ul{
    display:none; flex-direction:column; background:rgba(52,58,64,.9);
    padding:10px; position:absolute; top:60px; right:20px; width:200px;
    border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,.2); z-index:20;
  }
  #nav-menu ul.show{display:flex}
}

/* ===== Hero ===== */
#hero{
  background:url('./img/top.png') no-repeat center/cover;
  color:#fff; padding:200px 0; text-align:center; position:relative;
  opacity:0; transform:translateY(20px); animation:fadeIn 1.6s ease forwards; z-index:1;
}
#hero::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1;
}
#hero .container{position:relative; z-index:2}
#hero h2{font-size:48px; margin-bottom:20px}
#hero p{font-size:24px; margin-bottom:30px}
#hero .btn{
  display:inline-block; margin-top:20px; background:#ff5722; color:#fff;
  padding:10px 20px; text-decoration:none; font-size:18px; border-radius:5px;
}
@keyframes fadeIn{to{opacity:1; transform:none}}

/* ===== Sections ===== */
section{padding:60px 0}
h2{text-align:center; margin-bottom:20px}

/* ===== Pricing ===== */
.pricing-grid{display:flex; justify-content:space-around; gap:40px; margin-top:40px}
.pricing-item{
  width:30%; background:#fff; padding:20px; border-radius:8px; text-align:center;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.pricing-light{background:#ffe0b2}
.pricing-standard{background:#b2dfdb}
.pricing-full{background:#c5cae9}
@media (max-width:768px){
  .pricing-grid{flex-direction:column; align-items:center}
  .pricing-item{width:100%; margin-bottom:20px}
}

/* ===== Videos / Testimonials ===== */
.video-container{text-align:center; margin-bottom:40px}
.testimonials-grid{
  display:flex; justify-content:space-around; gap:20px; padding:20px;
}
.testimonial{
  width:45%; background:#fff; padding:20px; border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,.1); font-style:italic; text-align:center;
}
@media (max-width:768px){
  .testimonials-grid{flex-direction:column; align-items:center}
  .testimonial{width:100%; margin-bottom:20px}
}

/* ===== Contact Form ===== */
form{
  background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.1);
  max-width:600px; margin:0 auto;
}
form label{font-size:16px; margin-bottom:5px; display:inline-block}
form input, form textarea, form button, form select{
  width:100%; padding:10px; margin-bottom:20px; border:1px solid #ccc; border-radius:4px; font-size:16px;
}
form button{background:#ff5722; color:#fff; border:none; cursor:pointer; font-size:18px}
form button:hover{background:#e64a19}

/* ===== About ===== */
#about p{
  text-align:center; margin:0 auto; max-width:800px; line-height:1.6;
}
#about .container{text-align:center}
.btn-policy{
  display:inline-block; background:#ff5722; color:#fff; padding:10px 20px; text-decoration:none;
  font-size:18px; border-radius:5px; margin-top:20px; transition:background-color .3s ease;
}
.btn-policy:hover{background:#e64a19}

/* ===== Options ===== */
.options-section{
  margin-top:40px; padding:30px;
  background:linear-gradient(135deg, #b0bec5, #78909c);
  border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.1); color:#fff;
}
.options-section h3{
  text-align:center; font-size:26px; margin-bottom:20px; text-transform:uppercase; letter-spacing:1px;
}
.options-list{list-style:none; padding:0; text-align:center; font-size:18px}
.options-list li{
  padding:10px 0; font-size:20px; background:rgba(255,255,255,.1);
  margin-bottom:10px; border-radius:5px; transition:background-color .3s ease; color:#fff;
}
.options-list li:hover{background:rgba(255,255,255,.2)}

/* ===== Modeling ===== */
#modeling{padding:60px 0}
#modeling h2{ text-align:center; font-size:36px; margin-bottom:40px}
.intro{
  text-align:center; margin:0 auto 40px; max-width:800px; font-size:18px; line-height:1.6;
}
.modeling-step{margin-bottom:40px; text-align:center}
.modeling-step h3{font-size:28px; margin-bottom:20px}
.modeling-step p{
  font-size:18px; margin-bottom:20px; max-width:800px; margin-inline:auto; line-height:1.6;
}
.modeling-step img{
  max-width:100%; height:auto; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.1); margin-top:20px;
}

/* ===== Policy ===== */
#policy{padding:60px 20px}
#policy h2{ text-align:center; font-size:36px; margin-bottom:40px}
#policy p, #policy h3{
  max-width:800px; margin:0 auto 20px; line-height:1.8; font-size:18px; text-align:justify;
}
#policy h3{margin-top:40px; font-size:24px; text-align:center}

/* ===== After Support ===== */
.after-support{
  margin-top:40px; padding:20px; background:#f1f1f1; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.after-support h3{text-align:center; font-size:24px; margin-bottom:20px}
.after-support ul{list-style:disc; margin-left:20px}
.after-support ul li{font-size:16px; line-height:1.6; margin-bottom:10px}

/* ===== Notice / Footer ===== */
#notice{
  background:#f8f9fa; padding:40px 20px; color:#333; border-top:1px solid #ddd; text-align:left;
}
#notice h3{font-size:24px; text-align:center; margin-bottom:20px}
#notice ul{list-style:disc; padding-left:20px; max-width:800px; margin:0 auto}
#notice ul li{font-size:16px; line-height:1.6; margin-bottom:10px}

/* ===== Thank You ===== */
.thank-you-container{
  text-align:center; padding:40px; max-width:600px; margin:0 auto; background:#fff;
  border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.thank-you-image{max-width:100%; height:auto; border-radius:8px; margin-bottom:20px}
.thank-you-container h1{font-size:28px; margin-bottom:20px; color:#333}
.thank-you-container p{font-size:16px; color:#555; line-height:1.6}
.thank-you-container .btn{
  display:inline-block; margin-top:20px; padding:12px 24px; background:#ff5722; color:#fff;
  text-decoration:none; border-radius:5px; transition:background-color .3s ease;
}
.thank-you-container .btn:hover{background:#e64a19}

/* ===== Avatar listing (画像背景を黒→やさしい色へ) ===== */
.av-media{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px;
  background:linear-gradient(135deg, #e0f7f5, #f0fffc); /* 柔らかいシアン系 */
}
.av-media img.av-thumb{width:100%; height:100%; object-fit:cover; display:block}


.av-card[data-cat="male"] .av-media {
  background: linear-gradient(135deg, #d0e7ff, #e6f3ff); /* 青系 */
}
.av-card[data-cat="female"] .av-media {
  background: linear-gradient(135deg, #ffe0f0, #fff0f8); /* ピンク系 */
}
.av-card[data-cat="other"] .av-media {
  background: linear-gradient(135deg, #e7e7e7, #f8f8f8); /* グレー系 */
}
.contact-text {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #333;
}

.contact-btn-wrapper {
  display: flex;
  justify-content: center;
}

.contact-btn {
  display: inline-block;
  background-color: #1a73e8;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-btn:hover {
  background-color: #155fc4;
  transform: translateY(-2px);
}

/* レイアウトの都合で調整してOK */
.header-container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* ハンバーガー */
.hamburger-menu{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; border:0; border-radius:8px; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08); cursor:pointer;
}
.hamburger-menu span{
  display:block; height:2px; width:22px; background:#0d1b16; border-radius:2px;
  transition:.2s ease;
}
/* 開いた時のアニメ */
.hamburger-menu.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger-menu.is-open span:nth-child(2){ opacity:0; }
.hamburger-menu.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ナビ：モバイルはデフォ非表示 */
.site-nav{
  position:fixed; inset:64px 12px auto 12px; /* ヘッダー下に重ねる */
  background:#fff; border:1px solid #e7eee9; border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
  padding:10px; display:none; opacity:0; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:1000;
}
.site-nav.is-open{ display:block; opacity:1; transform:none; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.site-nav li a{
  display:block; padding:10px 12px; border-radius:10px; color:#0d1b16; text-decoration:none; font-weight:700;
}
.site-nav li a:hover{ background:#f6faf8; }

/* PC幅では常時横並び＆ハンバーガー非表示 */
@media (min-width: 960px){
  .hamburger-menu{ display:none; }
  .site-nav{
    position:static; display:block; opacity:1; transform:none; border:0; box-shadow:none; padding:0;
  }
  .site-nav ul{ flex-direction:row; gap:10px; }
  .site-nav li a{ padding:8px 12px; }
}

/* ===== Plan Compare Table ===== */
#plan-compare{
  padding:60px 0;
}

.table-wrap{
  overflow-x:auto;                 /* スマホは横スクロール */
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}

.compare-table{
  width:100%;
  min-width:720px;                 /* つぶれ防止 */
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,.1);
  border-radius:10px;
  overflow:hidden;
}

.compare-table th,
.compare-table td{
  padding:14px 12px;
  border-bottom:1px solid #eee;
  text-align:center;
  font-size:16px;
}

.compare-table thead th{
  background:#343a40;
  color:#fff;
  font-weight:700;
}

.compare-table thead th:first-child{
  text-align:left;
}

.compare-table tbody th{
  text-align:left;
  background:#f8f9fa;
  font-weight:700;
  color:#333;
  white-space:nowrap;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{
  border-bottom:none;
}

.compare-table .price{
  display:inline-block;
  margin-top:6px;
  font-size:14px;
  opacity:.9;
}

.circle{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff5722;
  color:#fff;
  font-weight:800;
  line-height:1;
}

/* 目立たせたい列があれば（任意） */
.compare-table thead th:nth-child(4){
  /* フルセット列を少し強調（不要なら消してOK） */
  background:#2f3439;
}