/* ========== setting-and-repair 共通 ========== */
h3.settingmenu {
	display:block;
	margin:20px 5px 5px;
	padding:5px 0 0 10px;
	font-size:16px;
	font-weight:bold;
	border-left:5px solid #666;
	border-bottom:2px solid #D2691E;
}

h3.settingmenu a{
	font-weight:bold;
}

.section {
	width:700px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.section {
		width:98%;
	}
}

/* ========== 設定・修理メニューカテゴリ (PC用) ========== */
#settingmenu {
	display:table;
	width:750px;
	height:100px;
	font-size:15px;
}

#settingmenu ul {
	margin:0;
	padding:0;
}

#settingmenu li {
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
}

#settingmenu li a {
	display:table-cell;
	width:105px;
	height:95px;
	text-align:center;
	vertical-align:bottom;
	font-size:90%;
	font-weight:bold;
	border-top:5px solid #C3C3C3;
	border-right:1px solid #C3C3C3;
	border-bottom:5px solid #C3C3C3;
	border-left:1px solid #C3C3C3;
	background:#ddc;
	text-decoration: none;
}

#settingmenu li a:hover {
	color:#fff;
	border-top:5px solid #D2691E;
	border-bottom:5px solid #D2691E;
	background:#6a6a6a;
}

/* ========== 設定・修理メニューカテゴリ (スマホ用) ========== */
@media (max-width: 768px) {
	#settingmenu,
	.menu-category {
		display:none;
	}
}

/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ========== 設定・修理メニュー一覧 (NEW) ========== */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ------------------------------------------------ */


/* ========== 共通設定（はみ出し防止の基本） ========== */
.menu-card, 
.m-name, 
.m-price, 
.m-content {
    box-sizing: border-box;
}

/* ========== メニューカテゴリ（連結する親の箱） ========== */
.menu-category-group {
    width: 700px;           /* PC版の標準幅 */
    margin: 0 auto 40px;    /* カテゴリ間の隙間 */
    border: 2px solid #666; /* 全体の外枠 */
    background: #fff;
    overflow: hidden;       /* 角の処理などを綺麗に */
}

/* ========== 個別のメニューカード（連結構造） ========== */
.menu-card {
    display: grid;
    /* PCレイアウト：左側に名前と価格、右に内容 */
    grid-template-areas: 
        "name    content"
        "price   content"; 
    grid-template-columns: 200px 1fr; /* 左エリア幅を固定 */
    grid-template-rows: auto 1fr;
    width: 100%;
    border-bottom: 2px solid #666; /* 項目間の仕切り線 */
}

/* カテゴリ内、最後のカードだけは下の線を消す（外枠と重ならないように） */
.menu-category-group .menu-card:last-child {
    border-bottom: none;
}

/* --- 各パーツの装飾 --- */

/* 1. メニュー名（左上） */
.m-name {
    grid-area: name;
    background: #faebd7;
    padding: 5px;
    font-weight: bold;
    font-size: 13px;
	border-bottom:1px dotted #666;
    display: flex;
    align-items: center;
}

/* 2. 価格（左下） */
.m-price {
    grid-area: price;
    background: #fcf4e7;
    padding: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #b31031;
    text-align: right; /* 右揃え */
	display: flex;
    flex-direction: column;   /* 念のため縦並び設定 */
	justify-content: center;
}

/* 3. 内容（右側ぶち抜き） */
.m-content {
    grid-area: content;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6;
    background: #f5f5dc;
    border-left: 1px dotted #666; /* 左エリアとの縦の仕切り線 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ========== スマホ向けレイアウト（768px以下） ========== */
@media (max-width: 768px) {
    .menu-category-group {
        width: 97%; /* 画面端に少し余白を作るなら96〜98% */
        margin: 0 auto 30px;
    }

    .menu-card {
        /* スマホレイアウト：上段に名前と価格、下段に内容 */
        grid-template-areas: 
            "name  price"   
            "content content"; 
        grid-template-columns: 1fr auto; /* 価格は中身の幅に合わせる */
        grid-template-rows: auto auto;
	}

    .m-name {
        padding: 10px;
		border-bottom: 1px dotted #666; /* 下段（内容）との区切り */
        font-size: 14px;
    }

    .m-price {
        padding: 10px;
        text-align: right;
        font-size: 15px;
        border-bottom: 1px dotted #666; /* 下段（内容）との区切り */
        border-left: 1px dotted #666;   /* 名前との間の縦線 */
        width: 170px;              /* 最低限の幅を確保 */
        white-space: nowrap;           /* 途中で改行させない */
        display: flex;
        justify-content: center;
    }

    .m-content {
        padding: 12px 10px;
        border-left: none; /* スマホでは縦線は不要 */
        font-size: 13px;
	}
}