/*── 色・共通変数 ───────────────────────*/
:root{
  --orange:#ff7a00;
  --deep-red:#b10021;
  --gold:#c49a32;
  --bg-light:#fff8f4;
  --text:#333;
  --max-w:960px;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg-light);color:var(--text);
  line-height:1.8;text-align:center
}
/*── ヘッダー ─────────────────────────*/
header{
  background:linear-gradient(120deg,var(--orange),var(--deep-red));
  color:#fff;padding:0rem 1rem 3.2rem;position:relative
}
header h1{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(1.8rem,5vw,3rem);
  margin:0 auto;max-width:var(--max-w);font-weight:700
}
header::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--gold)}
/* タイトル画像 */
header figure{margin:1.6rem auto 0;max-width:var(--max-w)}
header figure img{width:100%;height:auto;border-radius:8px;border:3px solid var(--gold)}
header figure figcaption{font-size:.8rem;color:#fff;margin-top:.1rem}

/* section に挿入したイラスト */
figure.section-illust{
  margin:0rem 0;
  text-align:center;
}
figure.section-illust img{
  width:100%;
  height:auto;
  border-radius:8px;
  border:3px solid var(--gold);
}
figure.section-illust figcaption{
  font-size:.85rem;
  color:var(--deep-red);
  margin-top:.0rem;
}

/*── パンくず ───────────────────────*/
nav[aria-label="breadcrumb"]{max-width:var(--max-w);margin:0 auto;padding:1rem 1rem 0}
.breadcrumb{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;font-size:.9rem}
.breadcrumb-item{margin:0 .3rem;display:flex;align-items:center}
.breadcrumb-item+.breadcrumb-item:before{content:"›";color:var(--gold);margin-right:.3rem}
.breadcrumb-link{color:var(--deep-red);text-decoration:none}
.breadcrumb-link:hover{text-decoration:underline;opacity:.85}
.current-page{font-weight:700}

/*── 目次 ─────────────────────────*/
.toc{max-width:var(--max-w);margin:2rem auto;padding:1.2rem;border:2px solid var(--gold);border-radius:12px;background:#fff}
.toc h2{margin:.2rem 0 1rem;font-family:'Noto Serif JP',serif;font-size:1.2rem;color:var(--deep-red)}
.toc ul{list-style:none;margin:0;padding:0;text-align:left}
.toc li{margin:.4rem 0}
.toc a{color:var(--deep-red);font-weight:600;text-decoration:none}
.toc a:hover{text-decoration:underline;opacity:.85}

/*── 更新・SNS ───────────────────────*/
.article-info{max-width:var(--max-w);margin:0 auto 1.8rem;padding:0 1rem}
.info-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.update-info{display:flex;align-items:center;font-size:.9rem}
.time-icon{width:18px;height:18px;border:2px solid var(--gold);border-radius:50%;margin-right:.4rem;position:relative}
.time-icon:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:6px;background:var(--gold);transform:translate(-50%,-100%)}
.time-icon:before{content:"";position:absolute;left:50%;top:50%;width:4px;height:2px;background:var(--gold);transform:translate(0,-50%)}
.share-buttons .share-group{display:flex;gap:.8rem}

/*── 本文 ─────────────────────────*/
main{max-width:var(--max-w);margin:0 auto;padding:2rem 1rem 4rem;text-align:left}
main h2{margin:3.2rem 0 1.4rem;font-family:'Noto Serif JP',serif;font-size:clamp(1.3rem,4vw,1.9rem);color:var(--deep-red);border-left:8px solid var(--gold);padding-left:.6rem}
main h3{margin:2.4rem 0 1rem;font-family:'Noto Serif JP',serif;font-size:1.3rem;color:var(--orange)}
a{color:var(--deep-red);text-decoration:none;border-bottom:1px dotted var(--gold)}
a:hover{opacity:.8}
img{max-width:100%;height:auto;border-radius:6px}

/*── 吹き出し ───────────────────────*/
.speech{margin:1.5rem 0;padding:1rem 1.2rem;border:2px solid var(--gold);border-radius:12px;background:linear-gradient(145deg,#fff,#fffdf8);position:relative;display:inline-block}
.speech:before{content:"";position:absolute;left:1.2rem;top:-12px;border:8px solid transparent;border-bottom:12px solid var(--gold)}
.speech .avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;float:left;margin:0 .8rem .5rem 0}

/*── 動画 ───────────────────────*/
.video-wrap{position:relative;width:100%;padding-bottom:56.25%;margin:1.5rem 0;overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}

/*── トップへ ──────────────────────*/
#toTop{position:fixed;right:1rem;bottom:1.2rem;background:var(--deep-red);color:#fff;width:44px;height:44px;border:none;border-radius:50%;font-size:1.3rem;line-height:44px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:transform .2s,opacity .2s;opacity:0;pointer-events:none}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px)}

/*── ★ おすすめ ─────────────────────*/
.recommend-section{max-width:var(--max-w);margin:0 auto 4rem}
.recommend-section h2{font-family:'Noto Serif JP',serif;font-size:1.6rem;margin:0 0 1rem;color:var(--deep-red)}
#recommendations{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:600px){#recommendations{grid-template-columns:1fr 1fr}}
@media(min-width:900px){#recommendations{grid-template-columns:1fr 1fr 1fr}}
#recommendations .push0{display:block;background:#fff;border:2px solid var(--gold);border-radius:12px;overflow:hidden;color:var(--deep-red);font-size:.92rem;font-weight:600;text-decoration:none;transition:opacity .2s}
#recommendations .push0:hover{opacity:.85}
#recommendations .push0 img{width:100%;height:auto;display:block}
#recommendations .push0 span{display:block;padding:.8rem 1rem}

/*── フッター ───────────────────────*/
.site-footer{position:relative;background:linear-gradient(120deg,var(--deep-red),var(--orange));color:#fff;padding:4.5rem 1rem 3rem;text-align:left}
.wave-decoration{position:absolute;top:-60px;left:0;width:100%;height:60px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%23ff7a00" d="M0,0h1440v120H0V0z"/><path fill="%23fff8f4" d="M0,0c90,40,180,60,270,60s180-20,270-20s180,20,270,20s180-20,270-20s180,20,270,20v80H0V0z"/></svg>') center/cover no-repeat}
.footer-content{max-width:var(--max-w);margin:0 auto;display:flex;flex-direction:column;gap:2.5rem}
.contact-section .mail-link{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:600;text-decoration:none}
.mail-link:hover{text-decoration:underline}
.contact-text{font-size:.85rem;margin:.4rem 0 0}
.usage-terms{font-size:.85rem}
.terms-main p{margin:.3rem 0}
.terms-list{margin:.5rem 0 0 1.2rem;padding:0}
.terms-list li{margin:.25rem 0;list-style:disc}
.link-text{color:#fff;text-decoration:underline}
.site-name{font-weight:700}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;margin-top:.5rem}
.brand-link{display:flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none}
.brand-link:hover{text-decoration:underline}
.copyright{font-size:.8rem;margin-left:2.2rem}

/*===== セクション内ナビボタン =====*/
.section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin:2.5rem 0;
}
.nav-btn{
  flex:1;                               /* 横幅いっぱい伸長 */
  display:inline-block;
  padding:1rem 1.2rem;
  font-size:1rem;
  font-weight:700;
  text-align:center;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  transition:opacity .2s;
}
/* 色バリエーション */
.back-toc{background:var(--orange);}
.related-link{background:var(--deep-red);}

.nav-btn:hover{opacity:.85}

/* モバイルは縦並び */
@media(max-width:600px){
  .section-nav{flex-direction:column}
}

/* マンゴーサイトのための追加スタイル */
.conversation {
  margin: 2rem 0;
}

.speech-bubble {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(145deg,#fff,#fffdf8);
  max-width: 80%;
}

.speech-left {
  margin-right: auto;
}

.speech-right {
  margin-left: auto;
  text-align: right;
}

.speech-left:before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: -12px;
  border: 8px solid transparent;
  border-bottom: 12px solid var(--gold);
}

.speech-right:before {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: -12px;
  border: 8px solid transparent;
  border-bottom: 12px solid var(--gold);
}

.speaker {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}

.speaker-left {
  margin-left: 1.2rem;
}

.speaker-right {
  margin-right: 1.2rem;
  justify-content: flex-end;
}

.speaker img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 0.5rem;
  box-shadow: none;
}

.speaker-right img {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* 特徴ボックス */
.feature-box {
  background-color: #fff;
  border: 2px solid var(--gold);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 12px;
}

.feature-title {
  font-weight: bold;
  color: var(--deep-red);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-family: 'Noto Serif JP', serif;
}

/* テーブルスタイル */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: #fff;
}

th, td {
  padding: 0.8rem;
  border: 1px solid var(--gold);
}

th {
  background-color: var(--orange);
  color: white;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #fff8f0;
}

/* グリッド */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.grid-item {
  background-color: #fff;
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s;
}

.grid-item:hover {
  transform: translateY(-5px);
}

.grid-item img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.grid-item-content {
  padding: 1rem;
}

.grid-item h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--deep-red);
  font-family: 'Noto Serif JP', serif;
}

/* 用語カード */
.glossary-container {
  margin: 2rem 0;
}

.glossary-card {
  background-color: white;
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}

.glossary-card:hover {
  transform: translateY(-5px);
}

.glossary-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #fff8f0;
  border-bottom: 1px solid var(--gold);
}

.glossary-icon {
  width: 64px;
  height: 64px;
  margin-right: 1rem;
  border-radius: 8px;
  object-fit: cover;
}

.glossary-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--deep-red);
  font-family: 'Noto Serif JP', serif;
}

.glossary-subtitle {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.3rem;
}

.glossary-content {
  padding: 1.5rem;
}

.glossary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.glossary-tag {
  background-color: #fff8f0;
  color: var(--deep-red);
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--gold);
}