@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: 900px - 210px(sidebar) - gap = 残りを計算 */
    width: 560px; /* 余白込みで600px相当 */
    padding: 20px 0 40px 40px; /* 左にスペース(40px)を追加 */
    text-align: left;
    box-sizing: content-box;
}

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

/* ヘッダー画像 */
#header img {
	height: 250px;
	width: 900px;
}

/* 見出しデザイン */
h2 {
	color: #FF9900;
	font-size: 20px;
    border-bottom: 1px dotted #FF9900; /* 他のページと統一感を出すため追加 */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.lessontitle {
	color: #713213;
    padding-left: 10px;
	margin: 30px 0 10px 0; /* 上の余白を少し広げました */
	border-left: 5px solid #FF9900;
	font-size: 16px;
    font-weight: bold;
}

/* パンくずリスト（PCは12pxのまま） */
#menu_link {
	color: #FF9900;
	margin-bottom: 20px;
    font-size: 12px;
}
	
#menu_link a {
	color: #FF9900;
	text-decoration: none;
}

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

/* 解説エリア */
#exp {
	width: 100%; /* 親要素に合わせる */
	margin-top: 10px;
}

/* 写真の設定（スマホではみ出さないようにする） */
.responsive-img {
    width: 520px; /* PCでの基準サイズ */
    max-width: 100%; /* 画面幅より大きくならない */
    height: auto; /* 比率を維持 */
	margin: 10px 0;
    border-radius: 5px; /* 角を少し丸く */
}

.text {
	margin-bottom: 20px;
	font-size: 14px;
    line-height: 1.8; /* 行間を読みやすく */
}

/* サイドバー内の画像調整 */
#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) {
    
    /* 1. コンテナ全体 */
    .layout-wrapper {
        width: 100% !important;
        flex-direction: column; /* 縦並び */
        padding: 0;
    }

    /* 2. メインコンテンツ */
    #contents {
        width: 100% !important;
        padding: 20px !important; /* スマホでは左右均等な余白に */
        box-sizing: border-box;
    }

    /* ▼▼▼ 追加修正：パンくずリストの文字を大きく ▼▼▼ */
    #menu_link {
        font-size: 14px !important; /* 12px -> 14px */
        line-height: 1.6;
        margin-bottom: 15px !important;
    }
    /* ▲▲▲ 追加修正ここまで ▲▲▲ */

    /* 3. サイドバー */
    #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;
    }
    
    /* 写真のサイズ調整 */
    .responsive-img {
        width: 100% !important; /* 画面幅いっぱいに */
    }
}

/* 本文内のリンク（お問い合わせなど）のデザイン変更 */
.text a {
    color: #FF9900 !important;        /* ★!importantを追加 */
    text-decoration: none !important; /* ★!importantを追加 */
    font-weight: bold;
}

/* マウスを乗せたときだけ下線を出す */
.text a:hover {
    text-decoration: underline !important;
    color: #FF9900 !important;
}