<div class="contents">
		<div class="left">
			<div class="sousa_type">
				<p class="type_title">手動調理</p>
				<p class="btn">レンジ<br />(発酵)</p>
				<p class="btn">オーブン<br />(発酵)</p>
				<p class="btn">トースター<br /グリル></p>
			</div>
			<div class="sousa_time">
				<p class="btn">10分</p>
				<p class="btn">1分</p>
				<p class="btn">10秒</p>
			</div>
			<div class="sousa_ondo">
				<p class="type_title">温度・仕上がり</p>
				<p class="btn">↑</p>
				<p class="btn">↓</p>
			</div>
			<div class="sousa_nioi">
				<p class="btn">脱臭</p>
			</div>
		</div>
		<div class="right">
			<div class="disp">
				<div class="tuyosa">
					<span>弱</span>
					<span>中</span>
					<span>強</span>
				</div>
				<div class="gamen"></div>
				<div class="type_text">
					<span>レンジ</span>
					<span>トースター・グリル</span>
					<span>オーブン</span>
				</div>
			</div>
			<div class="start_btn">
				<div class="raius_btn">
					<p class="btn_txt">
					あたため<br />スタート<br />
					<span>1あたため</span>
					</p>
				</div>
			</div>
			<div class="stop_btn">
				<p class="radius_btn">とりけし</p>
			</div>
			<div class="start_chori_qik">
				<div class="btn_wapper">
					<p class="btn">
						<span>2</span>
						<span>飲み物<br />牛乳</span>
					</p>
				</div>
				<div class="btn_wapper">
					<p class="btn">
						<span>3</span>
						<span>コンビニ<br />弁当</span>
					</p>
				</div>
				<div class="btn_wapper">
					<p class="btn">
						<span>4</span>
						<span>トースト</span>
					</p>
				</div>
				<div class="btn_wapper">
					<p class="btn">
						<span>5</span>
						<span>冷凍ご飯</span>
					</p>
				</div>
			</div>
			<div class="select_menu">
				<div class="btn_wapper">
					<p class="btn">
						<span>6~17</span>
						<span>デイリー<br />お菓子</span>
					</p>
				</div>
				<div class="btn_wapper">
					<p class="btn">
						<span>18~19</span>
						<span>10分メニュー</span>
					</p>
				</div>
				<div class="btn_wapper">
					<p class="btn">
						<span>20~24</span>
						<span>ノンフライ</span>
					</p>
				</div>
			</div>
			<div class="logo">
				logo
			</div>
		</div>
	</div>
@charset "utf-8";
/*
各種色
ボディ:#1a1c1b
アクセント赤:#cf4150
グレー(銀):#98958e
*/

.contents{
	width:450px;
	max-width:1024px;
	display:flex;
	margin:0 auto;
	background:#1a1c1b;
	color:#98958e;
	padding:10px;
	box-sizing:border-box;
}

.contents .left{
	width:22%;
	margin-right:20px;
}

.contents .right{
}

.contents .btn{
	display:inline-block;
	margin:0;
	padding:5px;
	border-radius:5px;
	text-align:center;
	border:#98958e solid 1px;
	min-width:3.5em;
	box-sizing:border-box;
}


/* 左側 */
.contents .left .btn{
	width:100%;
	min-height:4em;
	margin-bottom:20px;
}

.type_title{
	text-align:center;
	margin-bottom:0;
}

/* 右側 */

.contents .right .disp{
	background:#98958e;
	color:#1a1c1b;
	box-sizing:border-box;
	padding:10px;
	margin-bottom:10px;
}

.contents .right .disp .tuyosa{
	text-align:right;
}
.contents .right .disp .gamen{
	height:10em;
	background:#504b45;

}
.contents .right .disp .type_text{
	text-align:center;
}


.contents .right .start_btn{
	width:150px;
	height:150px;
	border-radius:150px;
	background:#98958e;
	text-align:center;
	color:#1a1c1b;
	padding:5px;
	box-sizing:border-box;
	margin:0 auto;
}

.contents .right .start_btn .raius_btn{
	margin:0;
	border:#cf4150 solid 1px;
	width:140px;
	height:140px;
	border-radius:146px;
	box-sizing:border-box;
	display:flex;
	justify-content: center;
	align-items: center;
}


.contents .right .stop_btn{
}
.contents .right .stop_btn .radius_btn{
	border:#cf4150 solid 1px;
	width:80px;
	height:80px;
	border-radius:80px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin-left:auto;
}


.contents .right .start_chori_qik{
	margin-bottom:20px;
}
.contents .right .select_menu,
.contents .right .start_chori_qik{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.contents .right .select_menu .btn_wapper,
.contents .right .start_chori_qik .btn_wapper{
	width:48%;
	background:#98958e;
	color:#1a1c1b;
	margin-bottom:2%;
	height:5.5em;
	padding:1%;
	box-sizing:border-box;
}

.contents .right .select_menu .btn_wapper .btn,
.contents .right .start_chori_qik .btn_wapper .btn{
	width:98%;
	height:98%;
	border-color:#1a1c1b;
}

.btn_wapper .btn span{
	display:block;
	width:100%;
	margin-bottom:0;
}
.btn_wapper .btn span:first-of-type{
	font-size:80%;
	text-align:left;
}





.logo{
	width:50%;
	height:5em;
	text-align:center;
	margin:auto;
}

.logo img{
	width:100%;
	height:100%;
	margin:auto;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.