@charset "UTF-8";
/* CSS Document */
	main {
    margin: 72px 0 0!important;
}
    
    .recipe-wrapper {
        max-width: 750px;
        margin: 0 auto;
        padding: 0px;
        box-sizing: border-box;
    }

    .recipe-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .main-image {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 25px;
    }

    .recipe-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid transparent; 
        margin-bottom: 24px;
    }

    .recipe-title {
        color: #BC7972;
        font-size: 24px!important;
        font-weight: bold;
        margin: 0;
    }

    .recipe-time {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #111;
        font-weight: 500;
        flex-shrink: 0;
        margin-left: 10px;
    }

    .recipe-time svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    /* ▼ recipe-details の新しいレイアウト用CSS ▼ */
    .recipe-details {
        display: flex;
        gap: 80px;
        margin-bottom: 32px;
        align-items: flex-start; /* ★追加: 左右カラムの上端を揃える */
    }

    .recipe-image-col {
        flex: 1; /* 幅を均等に */
        min-width: 0; /* ★Flexboxのはみ出し防止 */
        display: flex; /* ★追加: 動画を中央に配置するため */
        justify-content: center; /* ★追加: 中央寄せ */
    }

    .portrait-image {
        width: 100%;
        height: auto;
        display: block;
    }

    .recipe-info-col {
        flex: 1; /* 幅を均等に */
        min-width: 0; /* ★Flexboxのはみ出し防止 */
    }
    
    .ingredient-list li {
        display: flex;
        justify-content: space-between; /* 左右に広げる */
        align-items: center; /* 縦方向も中央揃え */
        font-size: 13px;
        margin-bottom: 6px;
    }
.ingredient-list li span:first-child {
        /* 材料名の最小幅を固定して、分量の開始位置を揃える */
        min-width: 140px; /* 「ベジタブルストック」が確実に収まる幅に拡大 */
        flex-shrink: 0;
    }

.ingredient-list li span:last-child {
        flex-shrink: 1;
        /* ★重要：分量を1行にまとめる（複数行にするよりクリーンです） */
        white-space: nowrap !important;
        text-align: right;
    }
    
    .mt-32 {
        margin-top: 32px;
    }
    /* ▲ ここまで ▲ */

    .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 12px;
		color: #857554;
    }
	.p__aojiru{
		color: #798D44;
	}
	.p__vegetable{
		color: #BC7972;
	}
	.p__curry{
		color: #D8BD50;
	}
	.p__stew{
		color: #E4AA7E;
	}

    .recipe-wrapper ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
    }

    .recipe-info-col li {
    font-size: 13px;
    margin-bottom: 6px;
}

    .spacer-list {
        margin-top: 12px;
    }

    .instructions-section {
        background-color: #F4F3F2;
        padding: 24px;
        margin-bottom: 32px;
        border-radius: 2px;
    }

    .instructions-section .section-title {
        border-bottom: 1px solid #857554;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    .instruction-list {
        counter-reset: step-counter;
    }

    .instruction-list li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.5;
    }

    .instruction-list li::before {
        content: counter(step-counter);
        counter-increment: step-counter;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #857554;
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 11px;
        font-weight: bold;
    }

    .points-section {
        margin-bottom: 32px;
    }

    .points-section .section-title {
        border-bottom: 1px solid #857554;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    .points-list li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 10px;
        font-size: 13px;
    }

    .points-list li svg {
        position: absolute;
        left: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #6d8e40;
        stroke-width: 1.5;
    }

    .footer-promo {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .promo-box {
        display: flex;
        padding: 0px;
        width: 65%;
        box-sizing: border-box;
		margin-right: 20px;
    }
	
	.promo-box_aojiru{
		background-color: #EEF2E6;
	}
	.promo-box_curry{
		background-color: #F3EBCA;
	}
	.promo-box_vegetable{
		background-color: #EBD7D5;
	}
	.promo-box_stew{
		background-color: #F7E5D8;
	}

    .promo-text {
        flex: 1;
        font-size: 12px;
        line-height: 1.5;
        margin: 20px 0 20px 15px;
    }

    .promo-text p {
        margin: 0 0 12px 0;
		letter-spacing: 0px;
		font-size: 13px;
    }
	.promo-box_aojiru a{
		color: #fff;
        text-decoration: none;
        padding: 5px 40px;
        border-radius: 15px;
		background-color: #798D44;
	}
	.promo-box_curry a{
		color: #fff;
        text-decoration: none;
        padding: 5px 40px;
        border-radius: 15px;
		background-color: #D8BD50;
	}
	.promo-box_vegetable a{
		color: #fff;
        text-decoration: none;
        padding: 5px 40px;
        border-radius: 15px;
		background-color: #BC7972;
	}
	.promo-box_stew a{
		color: #fff;
        text-decoration: none;
        padding: 5px 40px;
        border-radius: 15px;
		background-color: #E4AA7E;
	}

    .promo-image {
        width: 105px;
        height: auto;
        object-fit: cover;
        margin-left: 12px;
    }

    .tags {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
    }

.insta-wrapper {
    position: relative; 
    overflow: hidden; 
    width: 100%;
    max-width: 450px; /* PCでの最大幅 */
    
    /* ★修正: 正方形を解除し、縦長のポートレート比率にする（例: 3:4） */
    aspect-ratio: 2.5 / 3; 
    
    border-radius: 4px; 
    margin: 0 auto; /* ★修正: 中央寄せ */
}

.insta-wrapper blockquote.instagram-media {
    /* ★重要追加: Instagramの強制設定(min-width: 326px;)を解除 */
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
.insta-wrapper iframe.instagram-media {
    position: absolute;
    top: -60px !important; /* ヘッダーを隠す */
    left: 0 !important;
    width: 100% !important;
	min-width: 100%!important;
    height: calc(100% + 120px) !important;
    max-height: none !important;
    margin: 0 !important;
}

/*パンくず*/
.breadcrumb {
    margin-bottom: 20px;
	padding: 0;
}
.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.breadcrumb li {
    display: flex;
    align-items: center;
	font-size: 12px!important;
}
.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin: 0 8px;
    color: #999;
}
.breadcrumb a {
    color: #666;
    text-decoration: none;
	font-size: inherit !important;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
    color: #333;
    font-weight: bold;
}



    /* ▼ スマートフォン向け調整（横幅が600px以下の場合に適用） ▼ */
    @media (max-width: 600px) {
        .recipe-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .recipe-time {
            margin-left: 0;
        }

        .recipe-details {
            flex-direction: column;
            gap: 24px;
        }
        
        .recipe-image-col {
            width: 100%;
        }

        .footer-promo {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .promo-box {
            width: 100%;
			margin: 0!important;
        }

        .tags {
            text-align: left;
        }
		.p-page_content{
			padding: 0!important;
		}
		.promo-text p {
        margin: 0 0 12px 0;
		letter-spacing: 0px;
		font-size: 12px;
    }
		
	.insta-wrapper {
  /* 枠の基本設定 */
  position: relative; /* ポイント①：中身の基準位置にする */
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  height: 110vw;
  /* ▼ Safari（iPhoneなど）ではみ出しを防ぐためのおまじない */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.insta-wrapper iframe {
  /* ポイント②：枠の中で「絶対配置」にしてブラウザ間のズレをなくす */
  position: absolute;
  top: -55px !important; /* ヘッダー分だけ上にずらす */
  left: 0 !important;
  
  /* 幅は枠にぴったり合わせる */
  width: 100% !important;
  
  /* 高さは枠の100% ＋ 上下で隠したい分のピクセル数を足す */
  height: calc(100% + 110px) !important; 
  
  /* インスタ側の余計な設定を打ち消す */
  max-height: none !important;
  margin: 0 !important; 
}
/*パンくず*/
.breadcrumb {
    margin-bottom: 20px;
	padding: 0 20px;
}

    }