@charset "UTF-8";

/* --- PC表示時のレイアウト設定（Flexbox） --- */

/* レイアウトの親箱 */
.layout-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* メインコンテンツ */
#contents {
    width: 560px;
    padding: 20px 0 40px 40px;
    text-align: left;
    box-sizing: content-box;
}

/* 詳細ページ内の2カラムレイアウト */
.lesson-content-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* --- 情報リストエリア（左側） --- */
#info {
    width: 350px;
    padding-right: 20px;
    box-sizing: border-box;
}

#info_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#info_list li {
    margin-bottom: 30px;
}

h2 {
    color: #FF9900;
    margin-bottom: 25px;
    font-size: 20px;
    border-bottom: 1px dotted #FF9900;
    padding-bottom: 10px;
}

p.title {
    color: #713213;
    padding-left: 10px;
    border-left: 5px solid #FF9900;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}
	
p.explain {
    margin-bottom: 15px;
    line-height: 1.8;
    font-size: 14px;
}

.explain a {
    color: #FF9900;
    text-decoration: none;
}

.explain a:hover {
    color: #FF9900;
    text-decoration: underline;
}


/* --- 写真エリア（右側） --- */
#picture {
    width: 160px;
}

/* 写真のラッパー（基本設定） */
p.image {
    width: 100%;
    margin-bottom: 5px;
}

/* 画像そのもの */
p.image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
	
p.caption {
    font-size: 12px;
    line-height: 1.4;
    color: #FF9900;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

/* ▼▼▼ 冷凍パン画像の設定（PC版） ▼▼▼ */
.frozen-bread-img-in-list {
    width: 100% !important; /* 画像幅70% */
    margin-bottom: 5px;
}

.frozen-bread-img-in-list img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* キャプション設定（PC版） */
.frozen-caption-in-list {
    font-size: 12px;
    color: #FF9900;
    margin-bottom: 15px;
    
    /* PCでは画像と同じ幅の中で中央寄せ */
    width: 100%; 
    text-align: center;
}
/* ▲▲▲ ここまで ▲▲▲ */


/* ページトップ */
#pagetop {
    text-align: right;
    margin-top: 20px;
}
#pagetop a {
    color: #713213;
    text-decoration: none;
}

/* --- サイドバー --- */
#sidebar {
    width: 210px;
    padding-top: 20px;
}

#header img {
	height: 250px;
	width: 900px;
}

#inquirybanner, #blog {
    margin-bottom: 20px;
    transition: 0.3s;
}

#inquirybanner a:hover img, 
h3 a:hover img {
    opacity: 0.7;
}


/* --- スマホ対応（レスポンシブ） --- */
@media screen and (max-width: 640px) {
    
    .layout-wrapper {
        width: 100% !important;
        flex-direction: column;
        padding: 0;
    }

    #contents {
        width: 100% !important;
        padding: 20px 20px !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    .lesson-content-flex {
        flex-direction: column;
    }

    #info {
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 30px;
    }

    /* 写真エリア（中央寄せ） */
    #picture {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

/* スマホでの画像サイズ変更（レッスンの写真は70%） */
    p.image {
        width: 70% !important;
        max-width: none;
        margin: 0 auto 5px auto !important; /* 中央寄せ */
    }

    /* ▼▼▼ 追加：冷凍パンの写真だけは100%に戻す設定 ▼▼▼ */
    p.frozen-bread-img-in-list {
        width: 100% !important;
    }
    
    /* ▼▼▼ スマホでのキャプション修正（大きく・中央・幅いっぱい） ▼▼▼ */
    p.caption, 
    .frozen-caption-in-list {
        width: 100% !important; /* PCの70%を打ち消して画面幅いっぱいに */
        font-size: 16px !important; /* 文字サイズ大きく */
        text-align: center !important; /* 中央寄せ */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* ▲▲▲ ここまで ▲▲▲ */

    /* サイドバー */
    #sidebar {
        width: 100% !important;
        text-align: center;
        padding: 20px 0;
    }
    
    #sidebar img {
        max-width: 90%;
        height: auto;
    }

    .insta-card {
        margin: 0 auto 20px !important;
    }

    #header img {
        width: 100% !important;
        height: auto !important;
    }
}

/* --- ▼▼▼ 右側の写真を下に下げるためのスペーサー設定 ▼▼▼ --- */

/* --- .lesson-img-spacer {
    /* この数値で下げる距離を調整します */
/* ---    height: 720px; 
    width: 100%;
}--- */

/* スマホ表示のときは、この隙間を自動的に消す設定 */
/* @media screen and (max-width: 640px) {
    .lesson-img-spacer {
        display: none;
    }*/
	

	
}
/* --- ▼▼▼ 冷凍パン便下のバナーエリア設定 ▼▼▼ --- */

/* 1. 全体の配置（PCは左揃え） */
.frozen-btn-area {
    margin-top: 30px;      /* 上の文章との余白 */
    display: flex;         /* 並べ方を細かく制御するモード */
    flex-direction: column;/* 縦並びにする */
    align-items: flex-start; /* 左揃えにする */
    gap: 20px;             /* ボタン同士の間隔 */
}

/* 2. 「ご注文はこちら」ボタンのデザイン */
.frozen-order-btn {
    display: inline-block;
    background-color: #FF9900; /* テーマカラーのオレンジ */
    color: #FFF !important;    /* 文字色を白に強制 */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 40px;        /* ボタンの大きさ */
    border-radius: 50px;       /* 丸角 */
    
    /* ▼ここがポイント：目立たせるための「影」 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
	transition: all 0.3s;
	margin-bottom: 20px; /* ★これを追加！下に20pxの隙間を作ります */
}


/* ご注文ボタンにマウスを乗せたとき */
.frozen-order-btn:hover {
    background-color: #ffad33; /* 少し明るく */
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* 影を濃く */
}

/* 3. 三越伊勢丹バナーのデザイン */
.frozen-isetan-btn {
    display: inline-block;
    /* ▼サイドバーより目立たせるために「影」をつける */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    background: #fff; /* 画像の背景に白を敷く（念のため） */
}

.frozen-isetan-btn img {
    display: block; /* 画像の下に隙間ができないようにする */
    /* サイドバー用画像(210px)だと少し小さいので、PCでは少し拡大表示する */
    width: 240px; 
    height: auto;
}

/* 伊勢丹バナーにマウスを乗せたとき */
.frozen-isetan-btn:hover {
    opacity: 0.9;
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* --- スマホ表示のときの設定 --- */
@media screen and (max-width: 640px) {
    .frozen-btn-area {
        align-items: center; /* ★スマホでは「中央揃え」に変更 */
        margin-bottom: 30px;
    }

    .frozen-order-btn {
        width: 80%;       /* スマホではボタン幅を広めに */
        text-align: center;
    }
	
	.frozen-isetan-btn {
        display: block;
		margin: 0 auto; 
		width: 240px;
	}
	
    .frozen-isetan-btn img {
        width: 240px;     /* 画像サイズは維持 */
        max-width: 100%;
    }
}
/* --- ▼▼▼ 構造変更に伴う調整 ▼▼▼ --- */

/* 冷凍パンエリアのリスト設定 */
#frozen_list {
    width: 100%; /* 横幅いっぱい使う */
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}