/* === 2025-autumn.css === */
/* 記事タイトル */
.article-page-title-01 {
    /* ★★★背景画像として設定★★★ */
    background-image: url('../2025-autumn_images/article-main-image-01.webp'); 
    background-size: cover; /* 要素全体を覆うように調整 */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;

    /* ★★★表示領域とテキスト配置のためのスタイル★★★ */
    padding: 20px; /* ☆★上下左右のパディングでテキスト位置と表示領域を調整★☆ */
    display: flex; /* Flexboxでテキストを中央揃え */
    flex-direction: column; /* 複数行対応 */
    justify-content: center; /* 垂直中央 */
    align-items: center; /* 水平中央 */

    position: relative; /* ::before 擬似要素の基準位置 */
    z-index: 0; /* ::before やテキストがz-indexで前面に来るように */
    border-radius: 10px; /* ☆★角丸調整★☆ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ☆★影調整★☆ */
    overflow: hidden; /* 角丸のため */

    font-size: 2rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #FFFFFF; /* ☆★文字色を白に★☆ */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ☆★テキストシャドウで読みやすく★☆ */
    line-height: 1.4;
    text-align: center;
    margin-bottom: 30px; /* ☆★次の要素（本文など）との間隔調整★☆ */
    aspect-ratio: 16/9;
}
.article-page-title-02 {
    /* ★★★背景画像として設定★★★ */
    background-image: url('../2025-autumn_images/article-main-image-02.webp'); 
    background-size: cover; /* 要素全体を覆うように調整 */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;

    /* ★★★表示領域とテキスト配置のためのスタイル★★★ */
    padding: 20px; /* ☆★上下左右のパディングでテキスト位置と表示領域を調整★☆ */
    display: flex; /* Flexboxでテキストを中央揃え */
    flex-direction: column; /* 複数行対応 */
    justify-content: center; /* 垂直中央 */
    align-items: center; /* 水平中央 */

    position: relative; /* ::before 擬似要素の基準位置 */
    z-index: 0; /* ::before やテキストがz-indexで前面に来るように */
    border-radius: 10px; /* ☆★角丸調整★☆ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ☆★影調整★☆ */
    overflow: hidden; /* 角丸のため */

    font-size: 2rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #FFFFFF; /* ☆★文字色を白に★☆ */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ☆★テキストシャドウで読みやすく★☆ */
    line-height: 1.4;
    text-align: center;
    margin-bottom: 30px; /* ☆★次の要素（本文など）との間隔調整★☆ */
    aspect-ratio: 16/9;
}
.article-page-title-03 {
    /* ★★★背景画像として設定★★★ */
    background-image: url('../2025-autumn_images/article-main-image-03.webp'); 
    background-size: cover; /* 要素全体を覆うように調整 */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;

    /* ★★★表示領域とテキスト配置のためのスタイル★★★ */
    padding: 20px; /* ☆★上下左右のパディングでテキスト位置と表示領域を調整★☆ */
    display: flex; /* Flexboxでテキストを中央揃え */
    flex-direction: column; /* 複数行対応 */
    justify-content: center; /* 垂直中央 */
    align-items: center; /* 水平中央 */

    position: relative; /* ::before 擬似要素の基準位置 */
    z-index: 0; /* ::before やテキストがz-indexで前面に来るように */
    border-radius: 10px; /* ☆★角丸調整★☆ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ☆★影調整★☆ */
    overflow: hidden; /* 角丸のため */

    font-size: 2rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #FFFFFF; /* ☆★文字色を白に★☆ */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ☆★テキストシャドウで読みやすく★☆ */
    line-height: 1.4;
    text-align: center;
    margin-bottom: 30px; /* ☆★次の要素（本文など）との間隔調整★☆ */
    aspect-ratio: 16/9;
}
.article-page-title-06 {
  /* ★★★背景画像として設定★★★ */
  background-image: url('../2025-autumn_images/article-main-image-06.webp'); 
  background-size: cover; /* 要素全体を覆うように調整 */
  background-position: center; /* 画像の中央を表示 */
  background-repeat: no-repeat;

  /* ★★★表示領域とテキスト配置のためのスタイル★★★ */
  padding: 20px; /* ☆★上下左右のパディングでテキスト位置と表示領域を調整★☆ */
  display: flex; /* Flexboxでテキストを中央揃え */
  flex-direction: column; /* 複数行対応 */
  justify-content: center; /* 垂直中央 */
  align-items: center; /* 水平中央 */

  position: relative; /* ::before 擬似要素の基準位置 */
  z-index: 0; /* ::before やテキストがz-indexで前面に来るように */
  border-radius: 10px; /* ☆★角丸調整★☆ */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ☆★影調整★☆ */
  overflow: hidden; /* 角丸のため */

  font-size: 2rem; /* ☆★サイズ調整★☆ */
  font-weight: 700;
  color: #FFFFFF; /* ☆★文字色を白に★☆ */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ☆★テキストシャドウで読みやすく★☆ */
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px; /* ☆★次の要素（本文など）との間隔調整★☆ */
  aspect-ratio: 16/9;
}


/* グラフ全体を囲むコンテナ */
        .pie-chart-container {
            position: relative; /* 子要素のテキストを絶対配置するための基準点 */
            width: 450px;       /* グラフのサイズ */
            height: 450px;
            margin: 0 auto;
            justify-items: end;
        }

        /* 円グラフ本体 */
        .pie-chart {
            width: 85%;
            height: 85%;
            border-radius: 50%; /* 正方形を円にする */
            /* conic-gradientで円グラフを表現 */
            background: conic-gradient(
                #FFC107 0deg 288deg,    /* 濃い黄色 (8割部分: 360*0.8=288deg) */
                #FFECB3 288deg 360deg   /* 薄い黄色 (2割部分) */
            );
            
            /* グラフに少し立体感を出すための内側の影 */
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
        }

        /* テキストグループの共通スタイル */
        .text-group {
            position: absolute; /* コンテナを基準に絶対配置 */
            text-align: center;
            font-weight: bold;
            color: #5D4037; /* 視認性の高い濃い茶色 */
            
            /* 元画像のように背景をまとめて設定 */
            background-color: rgba(255, 253, 231, 0.9); /* 少し透明なクリーム色 */
            padding: 10px 15px;
            border-radius: 5px;
            line-height: 1.6; /* 行間を調整 */
        }
        
        .text-group p {
            margin: 0; /* pタグのデフォルトマージンをリセット */
        }

        /* 2割部分のテキスト */
        .text-small {
            top: 16%;
            left: 34%;
            transform: translate(-50%, -50%); /* 要素の中心を基準に配置 */
            font-size: 18px;
        }

        /* 8割部分のテキスト */
        .text-large {
            bottom: 28%;
            left: 58%;
            transform: translateX(-50%); /* 水平方向の中央揃え */
            font-size: 19px;
        }

        /*本文・グラフ横並び*/
        .content-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
        }

        .left-box {
            display: flex;
            flex-direction: column; /* 中の要素(.item)を縦方向に並べる */
            gap: 10px;             /* 縦に並ぶアイテム間の隙間 */
        }

        /*本文・イラスト横並び*/
        .content-flex {
            display: flex;
            flex-direction: row;
            /* gap: 30px; */
            gap: 50px;
        }
        @media screen and (max-width: 768px) {
            .content-flex {
                flex-direction: column;
                gap: 20px;
            }
        }
        .content-flex-left {
            display: flex;
            flex-direction: column;
            width: 800px;
            max-width: 100%;
        }
        .content-flex-right img{
            width: 80%;
            height: auto;
        }
        /* ☆★テーブル★☆ */
        /* テーブル全体のスタイル */
        .symptom-table {
            width: 100%;
            max-width: 800px; /* PCでの最大幅を指定 */
            margin: 0 auto; /* 中央寄せ */
            border-collapse: collapse; /* セルの境界線を結合 */
            border: 2px solid #FFC107; /* 外枠線（濃い黄色） */
            border-radius: 10px; /* テーブル全体の角を丸める */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* 影をつけて立体感を出す */
            overflow: hidden; /* border-radiusを有効にするため */
        }

        /* ヘッダーセル（th）のスタイル */
        .symptom-table th {
            background-color: #FFC107; /* 濃い黄色 */
            color: #FFFFFF; /* 文字色を白に */
            padding: 16px;
            font-size: 1.1em;
            font-weight: bold;
            text-align: center;
            border-right: 2px solid #FFECB3; /* 薄い黄色の区切り線 */
        }
        
        /* ヘッダー内の注釈（※...）のスタイル */
        .symptom-table th .note {
            display: block; /* 改行して表示 */
            font-size: 0.8em;
            font-weight: normal; /* 太字を解除 */
            margin-top: 5px;
            opacity: 0.9;
        }

        /* データセル（td）のスタイル */
        .symptom-table td {
            background-color: #FFF8E1; /* 薄いクリーム色 */
            padding: 25px;
            vertical-align: top; /* 内容を上揃えに */
            width: 50%; /* 2つのセルが均等な幅になるように */
        }

        /* 左側セルの右側に区切り線を追加 */
        .symptom-table td:first-child {
            border-right: 2px solid #FFECB3; /* 薄い黄色の区切り線 */
        }

        /* リスト（ul）のスタイル */
        .symptom-table ul {
            list-style: none; /* デフォルトの黒丸を非表示 */
            padding: 0;
            margin: 0;
            color: #5D4037; /* テキストの色（濃い茶色） */
        }

        /* リスト項目（li）のスタイル */
        .symptom-table li {
            line-height: 1.6; /* 行間を調整 */
            padding-left: 1.8em; /* マーカー分のインデントを確保 */
            text-indent: -1.8em; /* マーカーをインデントの外に配置 */
            list-style: none!important;
        }
        
        /* 最後の項目以外に下のマージンを設定 */
        .symptom-table li:not(:last-child) {
            margin-bottom: 12px;
        }

        /* リストのマーカー（●）を疑似要素で作成 */
        .symptom-table li::before {
            content: '●'; /* 表示する文字 */
            color: #FFC107; /* マーカーの色（濃い黄色） */
            font-weight: bold;
            margin-right: 0.7em; /* マーカーとテキストの間の余白 */
        }

        /*画像の中央寄せ*/
        .img-center {
            justify-self: center;
        }
        .content-flex-recipe {
            display: flex;
            flex-direction: row; /* 中の要素(.item)を横方向に並べる */
            gap: 30px;             /* 縦に並ぶアイテム間の隙間 */
        }

        .flex-left {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .flex-right {
            justify-self: center;
            margin-top: 20px;
        }
        .content-flex .flex-left {
            flex: 1;
        }
        .content-flex .flex-right {
            flex: 1;
        }
        .content-flex-recipe .flex-left {
            flex: 2;
        }
        .content-flex-recipe .flex-right {
            flex: 1;
        }

        .flex-right img {
            width: 100%;
            height: auto;
        }

        .bg-yellow {
            background-color: #fdcb66;
            padding: 10px 30px;
            border-radius: 45px;
        }
        .recipe-title {
            display: inline-block;
            position: relative;
            z-index: 1;
        }
        .recipe-title::after {
            display: inline-block;
            content: url('../2025-autumn_images/recipe-title.webp');
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
            z-index: -1;
        }
        .recipe-time {
            padding-left: 50px;
            position: relative;
        }
        .recipe-time::before {
            content: url('../2025-autumn_images/recipe-time.webp');
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .recipe-list {
            list-style: none;
            padding: 0;
            width: 550px; 
          }
          
          .recipe-list li {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
          }
          .recipe-grid-container {
            display: grid; /* グリッドレイアウトを有効にする */
            grid-template-columns: repeat(2, 1fr); /* 4つの均等な幅のカラムを作成 (1frは利用可能なスペースの1単位) */
            gap: 60px; /* グリッドアイテム間の隙間を20pxに設定 */
            padding: 20px; /* コンテナーの内側に余白を追加 */
            margin: 0;
            list-style: none;
            counter-reset: recipe-counter;
          }

          /* 各グリッドアイテムのスタイル */
          .recipe-grid-item {
            display: flex;
            flex-direction: column;
            gap: 15px; /* 画像とテキストの間の隙間 */
            text-align: left;
            counter-increment: recipe-counter;
          }
                  
          /* グリッドアイテム内の画像のスタイル */
          .recipe-grid-item img {
            max-width: 100%; /* 画像が親要素の幅を超えないようにする */
            height: auto; /* 画像の縦横比を維持 */
            margin-bottom: 15px; /* 画像とテキストの間に余白を設定 */
          }
          .instruction {
            margin: 0;
            position: relative;
            padding-left: 1.8em;
          }
          .instruction::before {
            content: counter(recipe-counter) "."; /* liで増やしたカウンターの値を表示 */
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
          }
          .note-recipe {
            margin: 0;
            font-size: 0.9em;
            color: #333333;
            padding-left: 3.2em;
            text-indent: -1.2em;
          }
          .recipe-steps {
            counter-reset: halloween-step-counter; /* カウンターに名前を付ける（自由） */
          }
          
          /* 番号を表示したいテキスト（pタグ）に、番号を配置するスペースを作る */
          .recipe-steps .step p {
            position: relative; /* 番号を配置する際の基準点 */
            padding-left: 2em;  /* 番号用のスペースを確保（em単位がおすすめ） */
          }
          
          /* テキストの「前」に、CSSで番号を生成して配置 */
          .recipe-steps .step p::before {
            /* カウンターの数字を1つ増やし、それを表示する */
            counter-increment: halloween-step-counter; 
            content: counter(halloween-step-counter) "."; /* 「(カウンターの数字).」という内容を生成 */
          
            /* 番号の配置とデザイン */
            position: absolute; /* 親(p)を基準に絶対配置 */
            left: 0;
            top: 0;
            font-weight: bold;
            color: #333; /* 番号の色（お好みで調整） */
          }
            

          
          @media (max-width: 768px) {
            .recipe-grid-container {
              grid-template-columns: repeat(2, 1fr); /* 2カラムに変更 */
            }
          }
          
          /* 画面幅が480px以下の場合 */
          @media (max-width: 480px) {
            .recipe-grid-container {
              grid-template-columns: 1fr; /* 1カラムに変更 */
            }
          }

          .ingredient-name {
            display: flex;
            margin-right: 8px;
            flex-grow: 1;
            align-items: center;
            gap: 5px;
            font-size: 1.3rem;
          }
          
          .ingredient-amount {
            flex-shrink: 0;
            background-color: #fff;
            padding-left: 8px;
            font-size: 1.3rem;
          }
          
          /* 点線を生成する部分 */
          .ingredient-name::after {
            content: '';
            flex-grow: 1; /* スペースを埋めるように伸長 */
            border-bottom: 2px dotted #888888;
            
            /* 点線の縦位置を調整 */
            position: relative;
            top: 0;
          }
          .ls-none {
            list-style: none!important;
          }
          .recipe-point-title {
            background-color: #fdcb66;
            padding: 5px 20px;
          }
          .recipe-point-list {
            border: #fdcb66 3px solid;
          }
          .idea {
            padding: 0 40px 40px 40px;
            border: #a5a4a4 2px dashed;
            border-radius: 10px;
          }
          .idea-title {
            padding-left: 50px;
            position: relative;
        }
        .idea-title::before {
            content: url('../2025-autumn_images/idea-title.webp');
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .idea .content-flex .flex-left {
            flex: 1;
        }
        .idea .content-flex .flex-right {
          flex: 1;
            /* flex: 2; */
        }
        .step {
            display: flex;         /* 中の要素（画像とテキスト）を横並びにする */
            align-items: flex-start;   /* 画像とテキストを垂直方向の中央に揃える */
            gap: 15px;             /* 画像とテキストの間の隙間 */
            margin-bottom: 20px;   /* 各ステップの下に余白を設定 */
          }
          
          /* ステップ内の画像のスタイル */
          .step img {
            width: 150px;          /* 横幅を100pxに設定 */
            height: auto;          /* 高さを75pxに設定 */
            flex-shrink: 0;        
            border-radius: 0;
          }
          
          /* ステップ内のテキストのスタイル */
          .step p {
            margin: 0;             /* pタグのデフォルトのマージンをリセット */
            line-height: 1.7;      /* 行間を少し広げて読みやすくする */
          }

        .question-block {
            display: flex; /* Flexboxを使い、子要素を横並びに */
            align-items: center; /* 子要素を上下中央に揃える */
            gap: 20px; /* アイコンとテキストの間の隙間 */
            padding: 20px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-radius: 8px;
            margin: 20px;
            justify-content: center;
          }
          .content-flex-quiz {
            display: flex;
            flex-direction: row;
            gap: 30px;
        }
        .flex-left-quiz {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1;
            padding-left: 160px;
        }
        .flex-right-quiz {
            justify-content: center;
            flex: 1;
        }
          
          /* 左側の「問題」アイコン */
          .question-icon {
            /* アイコンのサイズ */
            width: 120px;
            height: 120px;
            /* コンテナが縮んでもアイコンサイズを維持する */
            flex-shrink: 0;
          
            background-color: #ea70a9; /* 背景色 */
            color: white; /* 文字色 */
            font-size: 28px; /* 文字サイズ */
            font-weight: bold; /* 文字の太さ */
            border-radius: 50%; /* 要素を正円にする */
            
            /* 文字を円の上下左右中央に配置 */
            display: flex;
            justify-content: center;
            align-items: center;
          }
          
          /* 右側のテキスト */
          .question-text {
            font-size: 1.3rem;
            color: #333;
          }
          .quiz-title {
            border-left: 8px solid #ea70a9;
            padding-left: 12px;
          }
          .quiz-list {
            margin-left: 0!important;
            padding-left: 0!important;
          }
          .quiz-list li {
            line-height: 1.6; /* 行間を調整 */
            padding-left: 1.7em; /* マーカー分のインデントを確保 */
            text-indent: -1.7em; /* マーカーをインデントの外に配置 */
            list-style: none!important;
          }
          .quiz-list li::before {
            content: '●'; /* 表示する文字 */
            color: #ea70a9; /* マーカーの色（濃い黄色） */
            font-weight: bold;
            margin-right: 0.7em; /* マーカーとテキストの間の余白 */
          }
          /* 全体を囲むコンテナ */
          .labeled-box {
            display: inline-flex; /* Flexboxを有効にし、子要素を横並びにする */
            border: 1px solid #ea70a9; /* 全体をピンクの枠線で囲む */
            border-radius: 4px; /* 角を少し丸くする */
            font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
            overflow: hidden; /* 子要素がはみ出ないようにする（角丸のため） */
            margin: 20px; /* 周囲の余白 */
          }
  
          /* 左側の「前回の答え」ラベル */
          .labeled-box .box-label {
            background-color: #ea70a9; /* 背景色をピンクに */
            color: white; /* 文字色を白に */
            padding: 10px 20px; /* 内側の余白（上下10px、左右20px） */
            font-weight: bold;
            font-size: 1.3rem;
          }
  
          /* 右側の「⑥桜餅」の内容部分 */
          .labeled-box .box-content {
            background-color: white; /* 背景色を白に */
            color: #333; /* 文字色を濃いグレーに */
            padding: 10px 20px; /* 内側の余白 */
            display: flex;
            align-items: center;
            font-size: 1.3rem;
          }

		/*決算*/
		h2.kessan-title{
            text-align:center;
        }

		h2.kessan-title span.sub{
            display:inline-block;
            background:#fdc902;
            padding:5px 20px;
            border-radius:100vw;
            font-size:80%;
        }

		h2.kessan-title span{
            display:block;
        }
		h3.kessan-title2 {
			margin-top:80px;
			text-align:center;
		}

		h3.kessan-title2 span{
			margin:0 auto;
            display:inline-block;
            background:#fdc902;
            padding:5px 20px;
            border-radius:100vw;
        }


		h3.kessan-title2._kaigo span{
            background:#f79659;
			color:#fff;
        }

		.kessan-table02,
		.kessan-table{
			margin:0 auto;
			width:70%;
      font-size:1.3rem;
		}

		.kessan-table02 td,
		.kessan-table02 th,
		.kessan-table th,
		.kessan-table td{
			padding:5px 10px;
		}

		.kessan-table th{
			background:#5580c1;
			border-radius:100vw;
			color:#fff;
			width:40%
		}

		.kessan-table td{
			background:#c7d1ea;
			text-align:right;
		}

		.kessan-table tbody tr:last-child th{
			background:#3d69aa;
		}

		.kessan-table02 th{
			background:#f79659;
			border-radius:100vw;
			color:#fff;
			width:40%
		}

		.kessan-table02 td{
			background:#fedec6;
			text-align:right;
		}
		.kessan-table02 tbody tr:last-child th{
			background:#e37f40;
		}

		.kessan-box{
			margin-top:50px;
			border:7px double #b4dbb2;
			padding:20px;
		}

		h5.kessan-title3{
			text-align:center;
			font-size:1.6em;
		}
		.kessan-box .kessan-title{
			margin-top:0;
		}

		.kessan-box .kessan-title .sub{
			background:#f27190;
			color:#fff;
		}
		.kessan-box .kessan-title span{
			display:inline-block;
			color:#1ab26b;
		}

		.kessan-box .disc-list  li::marker{
			color: #66c18c;
		}
/* === Responsive Styles === */
@media (max-width: 768px) {     /* ☆★ブレークポイント調整★☆ */
    /* 本文とグラフのコンテナを1カラムに変更 */
    .content-grid {
        grid-template-columns: 1fr; /* 2カラムから1カラムに */
        gap: 40px; /* 縦に並んだ際の要素間の余白 */
    }

    /* グラフコンテナのサイズ調整 */
    .pie-chart-container {
        width: 90%; /* 画面幅の90%に */
        max-width: 400px; /* ただし最大でも400pxまで */
        height: auto; /* 高さは自動調整 */
        aspect-ratio: 1 / 1; /* 常に正方形を維持する */
        
        /* 水平中央寄せは維持 */
        justify-self: center; 
    }

    .text-group {
     padding: 10px;   
    }

    .text-large {
        bottom: 15%;
        left: 52%;
        font-size: 16px;
    }

    /* グラフ内の文字サイズを少し小さくする */
    .text-small {
        font-size: 16px;
        left: 22%;
    }
    /* 円グラフ本体 */
    .pie-chart {
        width: 100%;
        height: 100%;
        border-radius: 50%; /* 正方形を円にする */
        /* conic-gradientで円グラフを表現 */
        background: conic-gradient(
            #FFC107 0deg 288deg,    /* 濃い黄色 (8割部分: 360*0.8=288deg) */
            #FFECB3 288deg 360deg   /* 薄い黄色 (2割部分) */
        );
        
        /* グラフに少し立体感を出すための内側の影 */
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
    }
    /*本文・イラスト横並び→縦並び*/
    .content-flex-quiz {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .flex-left-quiz {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding-left: 0;
        max-width: 100%;
    }
    .flex-right-quiz {
        justify-content: center;
        flex: 1;
    }
    .content-flex-right img{
        justify-self: center;
    }
    .content-flex-recipe {
        display: flex;
        flex-direction: column-reverse;
        gap: 30px;
    }
    .question-block {
          /* 横並びから縦並びに変更 */
          flex-direction: column;
          /* 上揃えに変更（お好みでcenterでも可） */
          align-items: flex-start; 
        }
    .question-icon {
          /* スマートフォン向けにアイコンを少し小さくする */
          width: 90px;
          height: 90px;
          font-size: 22px;
        }
    .question-text {
          /* スマートフォン向けにテキストサイズを調整 */
          font-size: 15px;
        }
        

		/*決算*/
		.kessan-table02,
		.kessan-table{
			width:100%;
		}
		.kessan-box{
			padding:10px 5px;
		}
    
}
.recipe-column-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-top: 20px;
}
.recipe-detail {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}
.recipe-detail span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0%);
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
.recipe-detail img {
    justify-self: center;
    width: 500px;
    padding: 1.0em;
}
.step-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding-top: 20px;
    position: relative;
}
.step-column span {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0%);
}
.step-column img {
    justify-self: center;
    width: 350px;
    padding: 1.0em;
}