@charset "UTF-8";

/* CSS Document */
:root {
  --font-family-en: 'Roboto', sans-serif;
  --font-family-en-2: 'Arial', sans-serif;
  --font-family-en-3: 'Oswald', sans-serif;
  --font-family-M: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  --font-family-J: 'Noto Sans JP', sans-serif;
  --red: #F80000;
  --orange: #FF8000;
  --blue: #39A1DD;
  --black: #000;
}


/* ミディアムデバイス (タブレット) のスタイル */
@media (max-width: 1024px) {
	
	.header{
	width: 100%;
	height: 80px;	
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	padding-top: 18px;	
	}
	
	h3{
	width: 100%;
	height: 44px;
	background:url("../images/h3_site.png") no-repeat center center;
	background-size: contain;
	}
	.contents {
		width: 400px;
        position: relative;	
        padding-bottom: 40px;
    }
	
	#site_wrap{
		width: 400px;
	}
	.site_detail{
		width: 360px;
		padding: 10px;
		margin: 0px auto 20px;
	}
	
	#detail1{
		background: #E0FCF9;
	}
	#detail2{
		background: #CCEAFF;
	}
	#detail3{
		background: #FFE0FE;
	}
	.detail_tit{
		background: #fff;
		color: #000;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		height: 30px;
		line-height: 28px;
		width: 100%;
		border-radius: 15px;
		margin-bottom: 10px;
	}
	#detail1 table{
		width: 100%;
	}
	#detail1 table tr th{
		width: 120px;
		background: #00AC99;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		padding: 6px 0;
	}

	#detail1 table tr td{
		background: #fff;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
	}
	#detail1 table tr td.sp_os{
		background: #333;
		color: #fff;
	}
	
	#detail1 table tr td span{
		font-size: 16px;
	}
	
	.detail_read{
		width: 100%;
		padding: 10px;
		background: rgba(255,255,255,0.6);
		font-size: 16px;
		font-weight: 400;
		position: relative;
	}
	
	#detail2 .detail_read{
		padding-top:  140px;
	}
	#detail3 .detail_read{
		padding-top: 1px;
	}
	#detail2 .detail_read span{
		font-size: 16px;
	}
	
	.detail_photo{
		position: absolute;
		top: 10px;
		left: 0px;
		width: 340px;
		height: 124px;
		background: url("../images/my_menu_sp.png") no-repeat top left / 100%;
	}
	
	.detail_komida{
		width: 100%;
		padding-bottom: 4px;
		font-size: 20px;
		font-weight: 600;
		color: #760072;
		margin-top: 20px;
	}
	.detail_read dl{
		margin-bottom: 10px;
		
	}
	.detail_read dl dt{
		width: 100%;
		background: #A00C9B;
		color: #fff;
		text-align: center;
		padding: 6px 0;
		min-height: 40px;
		display: flex;
    align-items: center;
    justify-content: center;
	}
	#detail3 .detail_read dl dd{
		width: 100%;
		background: #fff;
		padding: 6px;
		line-height: 160%;
	}
	#detail3 .detail_read dl dd span{
		font-weight: 600;
	}


}

/* ラージデバイス (デスクトップ) のスタイル */
@media (min-width: 1025px) {
	.contents{
		width: 94.8%;
		padding-bottom: 40px;
	}
	
	.header{
	width: 100%;
	height: 110px;
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	}
	
	h3{
	width: 100%;
	height: 110px;
	background:url("../images/h3_site.png") no-repeat center center;
	background-size: 360px 57px;
	}
	#site_wrap{
		width: 1600px;
		margin: 0px auto;
	}
	.site_detail{
		width: 100%;
		padding: 20px 40px;
		margin-bottom: 40px;
	}
	
	#detail1{
		background: #E0FCF9;
	}
	#detail2{
		background: #CCEAFF;
	}
	#detail3{
		background: #FFE0FE;
	}
	.detail_tit{
		background: #fff;
		color: #000;
		font-size: 22px;
		font-weight: 700;
		text-align: center;
		height: 40px;
		line-height: 38px;
		width: 100%;
		border-radius: 20px;
		margin-bottom: 20px;
	}
	#detail1 table{
		width: 100%;
	}
	#detail1 table tr th{
		width: 42%;
		background: #00AC99;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		padding: 6px 0;
	}
	#detail1 table tr th:first-child{
		width: 16%;
	}
	#detail1 table tr td{
		background: #fff;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
	}
	#detail1 table tr td span{
		font-size: 16px;
	}
	
	.detail_read{
		width: 100%;
		padding: 20px 40px;
		background: rgba(255,255,255,0.6);
		font-size: 18px;
		font-weight: 400;
		position: relative;
	}
	#detail2 .detail_read{
		height: 392px;
		padding-left: 260px;
	}
	#detail3 .detail_read{
		padding-top: 1px;
	}
	#detail2 .detail_read span{
		font-size: 16px;
	}
	
	.detail_photo{
		position: absolute;
		top: 20px;
		left: 40px;
		width: 155px;
		height: 350px;
		background: url("../images/my_menu_pc.png") no-repeat top left / 100%;
	}
	.detail_komida{
		width: 100%;
		padding-bottom: 4px;
		font-size: 20px;
		font-weight: 600;
		color: #760072;
		margin-top: 20px;
	}
	.detail_read dl{
		display: flex;
		margin-bottom: 10px;
		
	}
	.detail_read dl dt{
		width: 220px;
		background: #A00C9B;
		color: #fff;
		text-align: center;
		padding: 6px 0;
		min-height: 40px;
		display: flex;
    align-items: center;
    justify-content: center;
	}
	#detail3 .detail_read dl dd{
		width: 1220px;
		background: #fff;
		padding: 6px 20px;
	}
	#detail3 .detail_read dl dd span{
		font-weight: 600;
	}
	

}