/* =====================================================
   佐倉ミント 公式サイト - guideline.css
   guideline.html 専用スタイル（STEP 7）
   common.css の後に読み込む
   ※ send_mail.php / phpmailer / SMTP は一切参照しない
===================================================== */

/* =====================================================
   PAGE HEADER
===================================================== */
.guideline-page-header {
  padding: 5rem 0 3.5rem;
  background: linear-gradient(160deg, var(--sakura-pale) 0%, var(--mint-pale) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.guideline-page-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(212,95,138,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 50%, rgba(90,171,143,.07) 0%, transparent 60%);
  pointer-events: none;
}
.guideline-page-header .container { position: relative; z-index: 1; }

.guideline-page-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: .5rem;
  line-height: 1.15;
}
.guideline-page-title span { color: var(--sakura); }

.guideline-page-catch {
  font-size: 1rem;
  color: var(--text-sub);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.guideline-updated {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* =====================================================
   目次
===================================================== */
.guideline-toc {
  display: flex; flex-wrap: wrap; gap: .6rem;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}
.guideline-toc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 99px;
  font-family: var(--font);
  font-size: .82rem; font-weight: 700;
  text-decoration: none;
  border: 1.5px solid;
  transition: all .2s;
}
.toc--fan     { color: var(--sakura);    border-color: var(--sakura-light);  background: var(--sakura-pale); }
.toc--works   { color: #4a3560;          border-color: #c8b8e0;              background: #f5f0ff; }
.toc--goods   { color: var(--mint-dark); border-color: var(--mint-light);    background: var(--mint-pale); }
.toc--business{ color: var(--brown);     border-color: #d0b8ae;              background: #fdf6f2; }
.guideline-toc-btn:hover { filter: brightness(.93); transform: translateY(-1px); }

/* =====================================================
   セクション共通
===================================================== */
.gl-section { padding: 4rem 0; }
.gl-section--fan     { background: var(--white); }
.gl-section--works   { background: #f8f5ff; }
.gl-section--goods   { background: var(--mint-pale); }
.gl-section--business{ background: #fdf6f2; }
.gl-section--contact { background: var(--sakura-pale); }

/* セクションラベル（色分け） */
.gl-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  padding: .28rem .85rem;
  border-radius: 99px;
  border: 1.5px solid;
  margin-bottom: .9rem;
}
.gl-label--fan      { color: var(--sakura);    border-color: var(--sakura-light); background: var(--sakura-pale); }
.gl-label--works    { color: #4a3560;           border-color: #c8b8e0;             background: #f5f0ff; }
.gl-label--goods    { color: var(--mint-dark);  border-color: var(--mint-light);   background: var(--mint-pale); }
.gl-label--business { color: var(--brown);      border-color: #d0b8ae;             background: #fdf6f2; }

.gl-section-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 900; color: var(--text-main);
  margin-bottom: .4rem; line-height: 1.2;
}
.gl-section-desc {
  font-size: .92rem; color: var(--text-sub);
  margin-bottom: 2.5rem; line-height: 1.7;
}

/* =====================================================
   ルールブロック（サブセクション）
===================================================== */
.gl-blocks { display: flex; flex-direction: column; gap: 2rem; }

.gl-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gl-block--fan-alt    { background: var(--sakura-pale); border-color: var(--sakura-light); }
.gl-block--works-alt  { background: #f5f0ff;            border-color: #c8b8e0; }
.gl-block--goods-alt  { background: var(--mint-pale);   border-color: var(--mint-light); }
.gl-block--business-alt { background: #fdf6f2;          border-color: #d0b8ae; }

.gl-block-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.gl-block-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.gl-block-icon svg { width: 18px; height: 18px; }
.icon-fan      { background: var(--sakura-pale); color: var(--sakura); }
.icon-works    { background: #f5f0ff; color: #4a3560; }
.icon-goods    { background: var(--mint-pale); color: var(--mint-dark); }
.icon-business { background: #fdf6f2; color: var(--brown); }
.icon-danger   { background: #fef2f2; color: #c0392b; }

.gl-block-title {
  font-size: 1rem; font-weight: 700; color: var(--text-main);
}

.gl-block-body { padding: 1.4rem 1.5rem; }

/* =====================================================
   OK / NG リスト
===================================================== */
.gl-list { display: flex; flex-direction: column; gap: .55rem; }

.gl-item {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .88rem; color: var(--text-sub); line-height: 1.6;
}
.gl-item-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: .1rem;
}
.gl-item-icon svg { width: 11px; height: 11px; }

.gl-item--ok   .gl-item-icon { background: var(--mint-pale);  color: var(--mint-dark); }
.gl-item--ng   .gl-item-icon { background: #fef2f2;           color: #c0392b; }
.gl-item--note .gl-item-icon { background: #fffbee;           color: #7a5000; }
.gl-item--info .gl-item-icon { background: var(--sakura-pale);color: var(--sakura); }

.gl-item strong { color: var(--text-main); font-weight: 700; }

/* リスト内の区切り */
.gl-list-divider {
  height: 1px;
  background: var(--border);
  margin: .6rem 0;
}

/* =====================================================
   タグバッジ
===================================================== */
.gl-tag-examples {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .75rem 0;
}
.gl-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .85rem;
  border-radius: 99px;
  font-size: .82rem; font-weight: 700;
  border: 1.5px solid;
  text-decoration: none;
  transition: all .2s;
}
.gl-tag--sakura { color: var(--sakura);    border-color: var(--sakura-light); background: var(--sakura-pale); }
.gl-tag--mint   { color: var(--mint-dark); border-color: var(--mint-light);   background: var(--mint-pale); }
.gl-tag--r18    { color: #a0304c;          border-color: #f5b8c8;             background: #fff0f4; }
.gl-tag:hover { filter: brightness(.92); }

/* =====================================================
   強調ボックス（AI禁止・重要事項）
===================================================== */
.gl-emphasis {
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 1rem 0;
  font-size: .88rem; line-height: 1.7;
}
.gl-emphasis svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .1rem; }
.gl-emphasis--danger {
  background: #fef2f2;
  border: 1.5px solid #f5b8b8;
  color: #7a2020;
}
.gl-emphasis--danger svg { color: #c0392b; }
.gl-emphasis--warning {
  background: #fffbee;
  border: 1.5px solid #f5c878;
  color: #7a5000;
}
.gl-emphasis--warning svg { color: #c07800; }
.gl-emphasis--info {
  background: var(--mint-pale);
  border: 1.5px solid var(--mint-light);
  color: var(--mint-dark);
}
.gl-emphasis--info svg { color: var(--mint); }

/* =====================================================
   2カラムグリッド（OKとNGを横並び）
===================================================== */
.gl-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
.gl-col-card {
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
}
.gl-col-card--ok  { background: #edfaf3; border: 1px solid #a3e0be; }
.gl-col-card--ng  { background: #fef2f2; border: 1px solid #f5b8b8; }
.gl-col-card-title {
  font-size: .82rem; font-weight: 700;
  margin-bottom: .6rem;
  display: flex; align-items: center; gap: .35rem;
}
.gl-col-card-title svg { width: 15px; height: 15px; }
.gl-col-card--ok .gl-col-card-title { color: #1a6639; }
.gl-col-card--ng .gl-col-card-title { color: #7a2020; }

/* =====================================================
   お問い合わせセクション
===================================================== */
.gl-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .guideline-page-header { padding: 4rem 0 2.5rem; }
  .gl-section { padding: 3rem 0; }
  .gl-block-header { padding: 1rem 1.2rem; }
  .gl-block-body   { padding: 1.1rem 1.2rem; }
  .gl-two-col { grid-template-columns: 1fr; }
  .guideline-toc { gap: .4rem; }
  .guideline-toc-btn { font-size: .78rem; padding: .4rem .9rem; }
}

@media (max-width: 480px) {
  .gl-item { font-size: .84rem; }
  .gl-block-body { padding: .9rem 1rem; }
  .gl-contact-grid { grid-template-columns: 1fr; }
}