/* 基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Kiwi Maru', serif;
  color: #333;
  line-height: 1.8; /* 行間を少し広げて読みやすく */
  background-color: #f0f0f0;
  font-family: setofont-sp, sans-serif;
 font-style: normal;
 font-weight: 400;
}

.container {
  max-width: 390px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden; /* はみ出した画像を隠す */
}

/* ヘッダー */
header {
  padding: 15px 20px;
  background: white;
}

.img-logo img {
  width: 120px;
  height: auto;
}

/* ヒーローエリア */
.hero {
  position: relative;
  border-bottom: 8px solid white;
  padding:0 ;
}

.bg-image {
  width: 100%;
  display: block;
}

.handwritten-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.8rem;
  text-align: center;
  width: 100%;
  letter-spacing: 0.15em;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* ノートエリア */
.note-section {
  background-color: #F5B83F;
  padding: 130px 30px; /* 上下に余裕を持たせる */
  position: relative;
  z-index: 1;
}

/* 鉛筆と消しゴムの位置 */
.pencil-img {
  position: absolute;
  width: 180px;
  top: 20px;
  right: -20px; /* 少しはみ出させる */
  z-index: 20;
  
}

.note-image {
  position: absolute;
  width: 390px;
  top: 185px;
  left: 0px;
  z-index: 10;
  transform: rotate(0deg);
}
.kesigomu-img {
  position: absolute;
  width: 100px;
  bottom: 20px;
  left: -10px;
  z-index: 10;
  margin-bottom: 20px;
}




.note-card {
    margin-top: 150px;
    margin-bottom: 200px;
    padding: 30px 20px;
    transform: rotate(2deg); /* Figmaの傾きを再現 */
    position: relative;
    z-index: 20;
    
    /* 追加: テキストを中央揃えにする */
    text-align: center;
    /* ノートの幅に合わせてテキストを中央に配置するための調整 */
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.note-inner p {
    /* 修正: 行間をFigmaの見た目（ゆったりめ）に合わせる */
    margin-bottom: 1.8em; 
    line-height: 1.8;
    font-size: 0.95rem;
    /* 文字が少し詰まって見える場合は以下を追加 */
    letter-spacing: 0.05em;
    color: #333;
}
  
.note-inner p:last-child {
    margin-bottom: 0;
}
  
  /* マーカー（波線）の調整 */
.marker {
    text-decoration: underline wavy #E57373;
    text-underline-offset: 4px; /* 波線の位置を少し下げる */
    font-weight: bold;
}

/* セクション全体を中央揃えにする共通スタイル */
section {
  max-width: 390px; /* セクションの最大幅を指定 */
  margin: 0 auto; /* 左右中央揃え */
  padding: 30px 20px; /* 内側の余白を追加 */
  text-align: center; /* テキストを中央揃え */
}



/* 黒板エリア */
.nutrition-section {
    background-color: #1B4332;
    color: white;
    /* paddingを調整: 上のpaddingを少し減らし、下のpaddingを増やすなどしてバランスを見る */
    padding: 40px 30px 100px; /* 例: 上40px, 左右30px, 下100px */
    text-align: center;
    margin: 0 auto; /* 左右中央揃え */
    /* margin-bottom: 50px;  ← ここは一旦コメントアウトまたは削除して、下のセクションとの間隔はpaddingで調整する方が安全かもしれません */
}

/* フッター */
footer {
  background-color: #F5B83F;
  border-radius: 60px 60px 0 0;
  padding: 50px 30px 30px;
  margin-top: 50px; /* フッターと上部のセクションの間に余白を追加 */
  max-width: 390px; /* フッターの幅を中央揃え */
  margin: 0 auto; /* 左右中央揃え */

  color: white;
  padding: 100px 30px;
  text-align: center;

}
/* 受験生画像のスタイルを追加 */
.jyukensei_image {
    width: 100%; /* コンテナ幅に合わせてリサイズ */
    max-width: 300px; /* 必要に応じて最大幅を指定（例: 300px） */
    height: auto; /* アスペクト比を保持 */
    display: block; /* ブロック要素として扱う */
    margin: 0 auto 20px; /* 左右中央揃えにし、下に20pxの余白を作る */
}




.badge {
  background: #EE7800;
  padding: 2px 12px;
  font-size: 0.75rem;
  margin-bottom: 15px;
  border-radius: 2px;
}

.section-title {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 40px;
  font-weight: 500;
}

.circle-frame {
  width: 278px;
  height: 278px;
  border: 4px solid white;
  border-radius: 50%;
  margin: 20px auto;
  overflow: hidden;
}
.circle-frame img {
    width: 100%; /* 親要素の幅に合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    object-fit: cover; /* 画像を枠内に収める */
}

.nutrient-item {
    margin-bottom: 80px;
}
.nutrient-item h3{
    font-size:40px ;
    
   
}
.protein-title {
  color: #FF775C;
}
.vitamin-title {
  color: #FFD97D;
}
.mineral-title {
  color: #6CDBD5;
}

.nutrient-item p{
    margin: 20px ;
    margin-top: 40px;
}

.nutrient-desc {
  font-size: 0.85rem;
  margin-top: 15px;
  opacity: 0.9;
}
/* ミネラルのタイトルの調整 */
.mineral-title {
    line-height: 1.2; /* 改行した時の行間を少し詰める */
}
  
.mineral-title span {
    display: block;    /* 強制的に改行させる */
    font-size: 24px;   /* ミネラル(40px)より小さく設定 */
    margin-top: 10px;  /* 上の文字との隙間を少しあける */
}
 
.mineral-text {
    /* 1. フォントサイズを14pxに（15pxだと20文字以上で溢れるリスクがあります） */
    font-size: 14px; 
    
    /* 2. 行間を少し広めに設定して読みやすく */
    line-height: 1.9; 
    
    /* 3. 幅を100%にして、意図しない自動改行を防止する */
    max-width: 100%; 
    
    /* 4. 文字の間隔を少し詰める（これが収まりに効きます） */
    letter-spacing: -0.03em; 
    
    margin: 40px auto 0;
    text-align: center;
    /* 念のため、単語の途中で変に切れないように設定 */
    word-break: keep-all; 
}

/* --- メッセージセクション（修正箇所） --- */

.message-section {
  padding: 60px 20px;
  text-align: center;
}
.nutrient-text{
    margin-top: 180px;
}
.bold-text {
    margin-top: 40px;
    
}

.product-images {
    margin-top: 80px;
    display: flex;
    justify-content: center; /* これで400pxの円を中央に配置します */
    width: 100%;             /* 横幅いっぱいの基準を作る */
    overflow: visible;       /* 子要素のはみ出しを許可する */
}
.product-images .circle-frame {
    width: 420px;            /* ご希望のサイズを維持 */
    height: 420px;
    flex-shrink: 0;          /* 親の幅が390pxでも、400pxを維持して縮ませない設定 */
    margin: 20px 0;          /* 左右の auto は消してOKです */
    
    border: 8px solid #ffdc2c; 
    border-radius: 50%;
    overflow: hidden;        /* 円の中の画像は円の形に切り取る */
    background-color: #fff;
    
    /* 中の画像を上下左右中央に置く */
    display: flex;
    justify-content: center;
    align-items: center;
}
.balance {
    width: 110%;             /* 円の中の画像も少し大きくして見切れ感を出す場合 */
    height: auto;
    object-fit: contain;
}


.chalk-notice {
  margin-top: 60px;
  border: 2px solid #F8BBD0;
  border-radius: 50px;
  padding: 15px 20px;
  display: inline-block;
  font-size: 0.85rem;
  color: #F8BBD0;
  margin-bottom: 80px ;
}
.message-footer-text {
    margin-top: 180px;
    margin-bottom: 200px;

}

/* フッター全体のスタイル */
footer {
    background-color: #F5B83F;
    border-radius: 60px 60px 0 0;
    padding: 80px 30px 60px; /* 上下の余白をデザイン案に近づける */
    text-align: center;
    max-width: 390px;
    margin: 50px auto 0;
}
  
  /* SNSアイコンのレイアウト */
.sns-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* アイコン同士の間隔 */
    margin-bottom: 30px; /* ロゴとの間隔 */
    margin-top: 40px;    /* ボタンとの間隔 */
}
  
.sns-icons img {
    width: 30px; /* アイコンのサイズ（適宜調整してください） */
    height: auto;
    display: block;
}
  
  /* カロリーメイトロゴの調整 */
.footer-logo img {
    width: 269px; /* デザイン案に合わせて少し大きく */
    height: auto;
}
  
  /* ボタンの微調整（既存のスタイルを活かしつつ） */
.footer-buttons {
    margin-bottom: 20px;
}
  
.btn {
    width: 100%;
    background: black;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 40px;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}