@charset "UTF-8";


/* ---------- 基本リセット ---------- */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ---------- 基本文字設定 ---------- */
body{
  font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height:1.6;
  color:#333;
  background:#f9f9f9;
}

/* ---------- レイアウト ---------- */
.container{
  max-width:800px;
  margin:0 auto;
  padding:20px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* ---------- ヘッダー ---------- */
.header{
  text-align:center;
  margin-bottom:30px;
  padding:20px 0;
  border-bottom:3px solid #ff6b9d;
}
.main-title{
  font-size:28px;
  font-weight:bold;
  color:#ff6b9d;
  margin-bottom:10px;
}

/* ---------- サブタイトル ---------- */
.subtitle-box{
  background:#ff6b9d;
  color:#fff;
  padding:20px;
  border-radius:15px;
  margin:20px 0;
  text-align:center;
  font-weight:bold;
  font-size:16px;
}

/* ---------- 記事本文 ---------- */

.article-content{
  padding:20px 0;
}
.section-title{
  font-size:20px;
  font-weight:bold;
  color:#333;
  margin:30px 0 15px;
  padding-left:15px;
  border-left:4px solid #ff6b9d;
}
.text-content{
  font-size:15px;
  line-height:1.8;
  margin-bottom:15px;
  padding:0 10px;
}

/* ---------- 吹き出し ---------- */
.balloon-container{
  margin:25px 0;
  display:flex;
  align-items:flex-start;
  gap:15px;
}
.balloon-left{
  justify-content:flex-start;
}
.balloon-right{
  justify-content:flex-end;
  flex-direction:row-reverse;
}
.character-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  border:3px solid #ff6b9d;
  flex-shrink:0;
}
.balloon-speech{
  max-width:300px;
  padding:15px;
  border-radius:20px;
  position:relative;
  font-size:14px;
  line-height:1.5;
  background:#f0f0f0;
  color:#333;
}
.balloon-left .balloon-speech::before{
  content:'';
  position:absolute;
  left:-10px;
  top:20px;
  border:10px solid transparent;
  border-right-color:#f0f0f0;
}
.balloon-right .balloon-speech::before{
  content:'';
  position:absolute;
  right:-10px;
  top:20px;
  border:10px solid transparent;
  border-left-color:#f0f0f0;
}

/* ---------- 汎用ボックス ---------- */
.product-link-box,
.product-summary-box,
.god-item-box{
  background:#f0f0f0;
  padding:20px;
  border-radius:15px;
  margin:20px 0;
}
.product-link-box{border-left:5px solid #ff6b9d;}
.god-item-box{border:3px solid #ff6b9d;}
.god-item-box strong,
.product-link-box strong{color:#ff6b9d;font-size:16px;}
.product-summary-box{border:3px solid #ff6b9d;}
.product-summary-box ul{list-style:none;padding-left:0;}
.product-summary-box li{
  margin-bottom:8px;
  padding-left:20px;
  position:relative;
}
.product-summary-box li::before{
  content:'▶';
  position:absolute;
  left:0;
  color:#ff6b9d;
  font-weight:bold;
}

/* ---------- 成長記録ボックス ---------- */
.growth-record-box{
  background:#a2f2d6;
  color:#000;
  padding:20px;
  border-radius:15px;
  margin:20px 0;
  box-shadow:0 4px 15px rgba(0,0,0,.2);
}
.growth-record-box strong{
  font-size:16px;
  margin-bottom:10px;
  display:block;
}

/* ---------- 感謝ボックス ---------- */
.thanks-box{
  background:#ff6b9d;
  color:#fff;
  padding:20px;
  border-radius:15px;
  margin:20px 0;
  text-align:center;
  font-weight:bold;
  font-size:16px;
}

/* ---------- YouTube 埋込 ---------- */
.youtube-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  max-width:100%;
  background:#000;
  margin:20px 0;
  border-radius:10px;
}
.youtube-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* ---------- フッター ---------- */
.footer{
  text-align:center;
  padding:30px 0;
  border-top:2px solid #ff6b9d;
  margin-top:40px;
  color:#333;
}

/* ---------- 汎用ユーティリティ ---------- */
.highlight{
  background:#f0f0f0;
  font-weight:bold;
  padding:2px 4px;
  border-radius:3px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width:1023px){
  .container{margin:10px;padding:15px;}
  .main-title{font-size:24px;}
}

/*834px以下*/
@media screen and (max-width:834px){
  .section-title{font-size:18px;}
}

/*600px以下（追加）*/
@media screen and (max-width:600px){
  .balloon-container{flex-direction:column;align-items:center;}
  .balloon-right{flex-direction:column;}
  .balloon-speech{max-width:100%;margin-top:10px;}
  .balloon-left .balloon-speech::before,
  .balloon-right .balloon-speech::before{display:none;}
}

/*480px以下*/
@media screen and (max-width:480px){
  .main-title{font-size:22px;}
  .section-title{font-size:16px;}
}