/** Shopify CDN: Minification failed

Line 23:0 Unexpected "{"
Line 598:8 All "@import" rules must come first
Line 628:8 All "@import" rules must come first
Line 639:13 All "@import" rules must come first

**/


.blog .card__heading{
   font-size:18px;
}
.blog .article-card__excerpt.rte-width{
  font-size:13px;

}
.blog.color-background-1,
.section-template--16538614333657__main-padding,
#shopify-section-template--16538614333657__6ee7c4ec-2cbe-459a-8302-993fede49e37,
#shopify-section-template--16538614333657__main,
.section-template--16538614333657__main-padding .rte,
{
  /*background:#f6f6f1 !important;*/

}


.page-width.page-width--narrow.section-template--16538614333657__main-padding,
.section-template--16538614333657__main-padding .rte{
  margin:0;
  padding:0;
  width:100vw;
  width:100%;
  max-width:100vw;
  max-width:100%;
 

}
.section-template--16538614333657__main-padding .main-page-title{
  font-size:19px;
  letter-spacing:0.2em;
  text-align:center;
  margin-top:30px;
}
.section-template--16538614333657__6ee7c4ec-2cbe-459a-8302-993fede49e37-padding .blog__title{
  font-size:17px;
  letter-spacing:0.2em;
  text-align:center;
  margin-top:30px;
}

/*月替わり通信のWebページTemplate*/

         /* --- ベーススタイル --- */
        :root {
            --text-main: #000000;       /* メインテキスト色 */
            --text-light: #000000;      /* 薄いテキスト色 */
            --bg-color: #ffffff;        /* 背景色 */
            --accent-color: #f4f5f7;    /* 薄いグレーのアクセント */
            --spacing-unit: 2rem;       /* 基本の余白単位 */
            --capsule-bg: #000000;      /* カプセルの背景色（黒） */
            --capsule-accent: #ffe600;  /* カプセルのアクセント色（黄色） */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            /* 游ゴシックなどを優先し、エッセイのような繊細さを出す */
            font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans JP", sans-serif;
            color: var(--text-main);
            background-color: var(--bg-color);
            line-height: 2.0; /* 行間をさらに広げてゆったりと */
            font-weight: 300; /* 全体を細字(Light)ベースに変更 */
            letter-spacing: 0.05em; /* 文字の間隔を少し広げる */
            /*font-size: 16px; */
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 4px; /* 角を少しだけ丸く */
        }

        /* --- レイアウトコンテナ (PCでも縦積み 1カラム) --- */
        .container {
            display: flex;
            flex-direction: column; /* 常に縦積み */
            min-height: 100vh;
        }

        /* --- 上部：導入エリア --- */
        .intro-area {
            width: 100%;
            background-color: var(--accent-color);
            padding: calc(var(--spacing-unit) * 3);
        
            align-items: center;
            gap: 4rem; /* テキストと画像の間隔 */
            
            position: relative;
            height: auto; /* 高さはコンテンツなりに */
            min-height: 400px; /* 最低限の高さを確保 */
        }

        /* 導入エリアのテキスト部分 */
        .intro-text-box {
            flex: 1;
            max-width: 500px; /* 幅が広がりすぎないように */
        }

        .intro-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: var(--spacing-unit);
            letter-spacing: 0.05em;
        }

        .intro-desc {
            font-size: 1.1rem; 
            font-size: 1.6rem; 
            color: var(--text-light);
            margin-bottom: var(--spacing-unit);
            font-weight: 300;
            line-height:1.9;
        }

        .intro-image {
            flex: 1;
            max-width: 500px; /* 画像が巨大になりすぎないように制限 */
            opacity: 0.9;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        /* --- 下部：コンテンツエリア --- */
        .content-area {
            width: 100%;
            max-width: 800px; /* 縦積みで見やすくなるよう最大幅を少し絞りました */
            margin: 0 auto; /* 中央寄せ */
            padding: calc(var(--spacing-unit) * 4);
            background-color: var(--bg-color);
        }

        /* コンテンツ内のスタイル */
        .section-title {
            font-size: 2.2rem; /* 1.8rem -> 2.2rem に拡大 */
            font-weight: 500; /* 見出しは中字 */
            margin-bottom: calc(var(--spacing-unit) * 2);
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
            letter-spacing: 0.05em;
        }

        /* ミニコンテンツのレイアウト変更：常に縦積み */
        .mini-content-grid {
            display: flex; /* GridからFlexに変更 */
            flex-direction: column; /* 縦方向に並べる */
            gap: calc(var(--spacing-unit) * 4); /* 縦積みなので間隔を広めに */
            margin-bottom: calc(var(--spacing-unit) * 4);
        }

        .mini-card {
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

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

        .card-image {
            width: 100%;
            /*aspect-ratio: 16/9; *//* 縦積み用に少し横長に変更 */
            object-fit: cover;
            margin-bottom: 1.5rem; /* 画像下の余白を少し増やす */
            background-color: #fff;
            border:0px;
            border:none !important;
        }

        /* カードタイトルのスタイル */
        .card-title {
            font-size: 1.8rem; /* 1.3rem -> 1.8rem に拡大 */
            font-weight: 700;
            margin-bottom: 0.8rem;
            letter-spacing: 0.08em;
            line-height: 1.4;
        }

        /* ★ サブタイトルのスタイル変更 */
        .card-subtitle {
            display: flex;              /* 左右に要素を並べる */
            justify-content: space-between; /* 両端に配置 */
            align-items: center;
            width: 100%;                /* 横幅いっぱい */
            
            background-color: var(--capsule-bg); /* 黒背景 */
            background-color: lightgray;
            padding: 0.7rem 1.4rem;     /* 内側の余白も少し大きく */
            border-radius: 0px;    
            margin-bottom: 1.2rem;        /* 本文との距離 */
            
            font-size: 1.5rem; 
            font-weight: 500;
            letter-spacing: 0.05em;
        }

        /* 左側の黄色いテキスト */
        .sub-accent {
            color: #000;
            font-weight: 700;
        }

        /* 右側の白いテキスト */
        .sub-text {
            color:#666;            
            font-weight: 700;
            font-size: 1.65rem; 
        }

        .card-text {
            font-size: 1.05rem; /* 0.9rem -> 1.05rem に拡大（本文の読みやすさ向上） */
            font-size: 1.6rem; 
            color: var(--text-light);
            
            font-weight: 300; /* 細字 */
            line-height:1.9;
        }

        /* まとめセクション */
        .summary-section {
            background-color: #fafafa;
            padding: calc(var(--spacing-unit) * 2);
            border-radius: 8px;
            text-align: center;
            margin-top: calc(var(--spacing-unit) * 4);
        }

        .summary-title {
            font-size: 1.6rem; /* 1.3rem -> 1.6rem に拡大 */
            margin-bottom: 0.1rem;
        }

        .summary-text {
            max-width: 600px;
            margin: 0 auto;
            color: var(--text-light);
            font-size: 1rem; /* 0.9rem程度だったのを1remへ */
        }
         .summary-text.intro{
            max-width: 600px;
            margin: 0 auto;
            color: var(--text-light);
            font-size: 1.3rem; /* 0.9rem程度だったのを1remへ */
            text-align:left;
        }

        /* --- スマホ・タブレット対応 (レスポンシブ) --- */
        @media (max-width: 900px) {
            /* .container は最初から縦積みなので変更なし */

            .intro-area {
                flex-direction: column; /* スマホでは縦並びに */
                padding: var(--spacing-unit);
                gap: 2rem;
            }
            
            .intro-text-box {
                max-width: 100%;
            }

            .content-area {
                padding: var(--spacing-unit);
                max-width: 100%; /* スマホでは画面幅いっぱい使う */
            }
            
            /* .mini-content-grid はデフォルトで縦積み設定にしたのでここでの指定は不要 */

            .intro-title {
                font-size: 2.4rem; /* スマホ時も少し大きく 2rem -> 2.4rem */
            }
            
            .intro-image {
                width: 100%;
            }
        }

        /*--------レシピ用--------------------------------------------------------------------------*/
     
        
        .recipe-container * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

   
        .recipe-container h1, .recipe-container h2, .recipe-container h3 {
            
            font-weight: 600;
        }

        /* --- レイアウトコンテナ --- */
        .recipe-container {
            max-width: 600px; /* スマホ〜タブレットサイズを想定 */
            margin: 0 auto;
            background-color: #fff;
            min-height: 100vh;
            box-shadow: 0 0 20px rgba(0,0,0,0.03);
            position: relative;
        }

        /* --- ヘッダー・メインビジュアル --- */
        .recipe-hero-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            background-color: #ddd; /* 画像読み込み前の色 */
            display: block;
        }

        .recipe-header {
            padding: 24px 20px;
            text-align: center;
        }

        .recipe-title {
            font-size: 24px;
            margin-bottom: 12px;
            line-height: 1.4;
            letter-spacing: 0.05em;
        }

        .recipe-meta {
            display: flex;
            justify-content: center;
            gap: 16px;
            font-size: 13px;
            color: #888;
            font-family: 'Zen Kaku Gothic New', sans-serif;
        }

        .recipe-meta span {
            display: flex;
            align-items: center;
        }
        
        .recipe-description {
            margin-top: 16px;
            font-size: 14px;
            text-align: left;
            color: #555;
        }

        /* --- タブナビゲーション --- */
        .recipe-tabs-container {
            position: sticky;
            top: 0;
            background-color: #fff;
            z-index: 100;
            border-bottom: 1px solid #eee;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        }

        .recipe-tabs {
            display: flex;
            justify-content: space-around;
        }

        .recipe-tab-btn {
            flex: 1;
            padding: 16px 0;
            background: none;
            border: none;
            font-family: 'Shippori Mincho', serif;
            font-size: 16px;
            color: #999;
            cursor: pointer;
            position: relative;
            transition: color 0.3s;
        }

        .recipe-tab-btn.recipe-active {
            color: #333;
            font-weight: 600;
        }

        /* アクティブなタブの下線アニメーション */
        .recipe-tab-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background-color: #C1A68D; /* 落ち着いたアースカラー */
            transition: width 0.3s ease;
        }

        .recipe-tab-btn.recipe-active::after {
            width: 40px;
        }

        /* --- タブコンテンツエリア --- */
        .recipe-tab-content {
            display: none;
            padding: 24px 20px 60px;
            animation: fadeIn 0.4s ease;
        }

        .recipe-tab-content.recipe-active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- 材料リストのデザイン --- */
        .recipe-servings {
            text-align: right;
            font-size: 13px;
            color: #888;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px dashed #eee;
        }

        .recipe-ingredient-group h3 {
            font-size: 16px;
            margin: 20px 0 12px;
            color: #555;
            border-left: 3px solid #C1A68D;
            padding-left: 10px;
        }

        .recipe-ingredient-list {
            list-style: none;
        }

        .recipe-ingredient-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: 15px;
            cursor: pointer; /* クリックできることを示唆 */
            transition: background-color 0.2s;
        }
        
        .recipe-ingredient-item:hover {
            background-color: #fafafa;
        }

        /* チェックボックス風の動作（JSでクラス付与） */
        .recipe-ingredient-item.recipe-checked {
            color: #ccc;
            text-decoration: line-through;
        }
        
        .recipe-ingredient-item.recipe-checked .recipe-amount {
            color: #ccc;
        }

        .recipe-ingredient-name {
            display: flex;
            align-items: center;
        }
        
        /* 疑似的なチェックボックス円 */
        .recipe-ingredient-name::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #ddd;
            border-radius: 50%;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .recipe-ingredient-item.recipe-checked .recipe-ingredient-name::before {
            background-color: #ddd;
            border-color: #ddd;
        }

        .recipe-amount {
            font-weight: 500;
            color: #555;
        }

        /* --- 作り方のデザイン --- */
        .recipe-step-list {
            counter-reset: step;
            list-style: none;
        }

        .recipe-step-item {
            margin-bottom: 32px;
            position: relative;
            padding-left: 0;
        }

        .recipe-step-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .recipe-step-number {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 28px;
            height: 28px;
            background-color: #333;
            color: #fff;
            border-radius: 50%;
            font-family: 'Shippori Mincho', serif;
            font-size: 14px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .recipe-step-title {
            font-weight: 600;
            font-size: 16px;
        }

        .recipe-step-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 12px;
            display: block;
        }

        .recipe-step-text {
            font-size: 15px;
            color: #444;
            line-height: 1.9;
            margin-left: 40px; /* 数字の下に文字が来ないようにインデント */
        }
        
        /* スマホなどの狭い画面ではインデントを解除 */
        @media (max-width: 400px) {
            .recipe-step-text {
                margin-left: 0;
                padding-left: 4px;
            }
        }

        /* --- フッター --- */
        .recipe-footer-action {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 540px;
            display: flex;
            gap: 10px;
            z-index: 200;
        }

        .recipe-btn-clip {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 14px;
            border-radius: 50px;
            width: 100%;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            text-align: center;
            transition: transform 0.2s;
        }
        
        .recipe-btn-clip:active {
            transform: scale(0.98);
        }




        /*2026-1-25 add*/

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');


body {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
background-color: #fafaf9;
}


.checked-ingredient {
opacity: 0.4;
text-decoration: line-through;
}


/* グラスモーフィズムの調整：モバイル対応強化 */
.glass-card {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}


/* チェックボックスのアニメーション */
.checkbox-transition {
transition: all 0.2s ease-in-out;
}

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
        .checked-ingredient { opacity: 0.4; text-decoration: line-through; }
        /* グラスモーフィズムの微調整 */
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

             @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        
        body { 
            font-family: 'Inter', 'Noto Sans JP', sans-serif; 
            background-color: #fafaf9;
            color: #44403c;
        }

        .checked-ingredient { 
            opacity: 0.4; 
            text-decoration: line-through; 
        }

        /* --- グラスモーフィズムの微調整（モバイル対応強化版） --- */
        .glass-card {
            /* 背景色の透明度を少し上げて、ぼかしが効かない環境でも文字を読みやすくします */
            background: rgba(255, 255, 255, 0.2);
            
            /* iOS (Safari) 用の記述：必ず先に書きます */
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            /* 標準ブラウザ用 */
            backdrop-filter: blur(16px) saturate(180%);
            
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
        }

        /* アニメーション */
        .checkbox-transition {
            transition: all 0.2s ease-in-out;
        }

            .aspr-wrapper {
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      color: #334155;
      background-color: #fff;
      padding: 20px;
      line-height: 1.6;
    }

    .aspr-container {
      max-width: 800px;
      margin: 0 auto;
    }

    .aspr-header {
      text-align: center;
      margin-bottom: 32px;
    }

    .aspr-header h2 {
      color: #0891b2;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .aspr-header p {
      color: #64748b;
      font-size: 14px;
      line-height:1.2em;
      margin: 0;
    }

    /* グリッドレイアウト */
    .aspr-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 768px) {
      .aspr-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* カードの基本スタイル */
    .aspr-card {
      background: white;
      border: 2px solid #ecfeff;
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .aspr-tag {
      background-color: #fb923c;
      color: white;
      font-size: 12px;
      font-weight: bold;
      padding: 4px 12px;
      border-radius: 999px;
      display: inline-block;
      margin-bottom: 16px;
    }

    .aspr-card-title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 24px;
    }

    /* 効果セクション */
    .aspr-effect-item {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }

    .aspr-icon-bg {
      background-color: #ecfeff;
      padding: 8px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: fit-content;
    }

    .aspr-effect-text h3 {
      color: #0891b2;
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .aspr-effect-text p {
      font-size: 13px;
      margin: 0;
      color: #475569;
    }

    /* 含量比較セクション */
    .aspr-bar-group {
      margin-bottom: 16px;
    }

    .aspr-bar-label {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .aspr-bar-bg {
      height: 24px;
      background-color: #f1f5f9;
      border-radius: 999px;
      overflow: hidden;
    }

    .aspr-bar-fill {
      height: 100%;
      border-radius: 999px;
    }

    .aspr-info-box {
      background-color: #ecfeff;
      padding: 12px;
      border-radius: 12px;
      
      font-size: 12px;
      color: #164e63;
    }

    /* 部位セクション */
    .aspr-parts-layout {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .aspr-parts-labels {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 192px;
      padding: 16px 0;
      font-size: 10px;
      font-weight: bold;
      color: #64748b;
      text-align: right;
      width: 32px;
    }

    .aspr-illustration {
      width: 64px;
      height: 192px;
      position: relative;
    }

    .aspr-data-bars {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .aspr-data-bar {
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 12px;
      padding: 0 8px;
    }

    /* 季節セクション */
    .aspr-season-layout {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 32px;
    }

    .aspr-season-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .aspr-season-item {
      text-align: center;
    }

    .aspr-season-main {
      font-weight: bold;
      font-size: 14px;
    }

    .aspr-season-value {
      color: #0891b2;
      font-weight: bold;
      font-size: 14px;
    }

    .aspr-footer-note {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: #64748b;
    }

    .aspr-site-footer {
      text-align: center;
      margin-top: 32px;
      font-size: 12px;
      color: #94a3b8;
    }

      .article-footer-credits {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid #eeeeee; /* 非常に薄い枠線 */
    border-radius: 4px;
    color: #888; /* 文字色をさらに薄く */
    font-size: 0.75rem; /* サイズを少し小さく */
    line-height: 1.5;
    display: inline-block; /* 幅をコンテンツに合わせる */
    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  .article-footer-credits .credit-item {
    margin-bottom: 0.4rem;
  }

  .article-footer-credits .credit-item:last-child {
    margin-bottom: 0;
  }

  .article-footer-credits .credit-label {
    font-weight: normal; /* 太字を解除 */
    color: #888;
  }

  .article-footer-credits .credit-content {
    display: inline;
  }

  /* モバイル対応 */
  @media screen and (max-width: 767px) {
    .article-footer-credits {
      font-size: 0.7rem;
      padding: 0.8rem;
    }
  }