@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*base*/
html, body, div, ul, li, h1, h2, h3, p, table, form, input, select, textarea, li, ul { font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Noto Sans Japanese', sans-serif, Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; list-style: none inside none; margin: 0; padding: 0; border: 0; color: #000; list-style-type: none; vertical-align: middle; line-height: 20px; word-break: break-all; word-break: normal; }
body { margin: 0; padding: 0; }
a { color: #222; text-decoration: none; cursor: pointer; }
a:hover { color: #666; text-decoration: none;}
li { list-style-type: none; word-break: break-all; }
img { margin: 0; padding: 0; }

input[type="email"], input[type="text"], input[type="number"], input[type="password"], textarea {
	-webkit-appearance:none;
    border: 1px solid #DDD;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #333;
    max-width: 100% !important;
    outline: medium none;
    padding: 7px 10px;
	font-family: initial;
}
select {
    -webkit-appearance:none;
    -moz-appearance: none;
    background: transparent none repeat scroll 0 0;
    border: 1px solid #999;
    border-radius: 2px;
    margin: 0;
    outline: medium none;
    padding: 5px 20px 5px 10px;
    width: 100%;
	background-color: #FFF;
	font-family: initial;
	width: 100%;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(../img/arrow_select.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#EEE 100%);
	background: url(../img/arrow_select.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#EEE 100%);
	background-size: 20px, 100%;
}

.custom { overflow: hidden; }
.custom > select { width: 100%; }
select::-ms-expand { display: none; }

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px whitesmoke inset;
}
@media print{
	#header02 {display:none;}
	#maintitle {display:none;}
	#menubottom {display:none;}
	#footerinfo {display:none;}
    #footer {display:none;}
    #nextpage {display:none;}
	#sheetsize {display:none;}
	#previewcenter {display:none;}
	#copyinfo_p {display:none;}
	.btn_area {display:none;}
}
@media print {
body {
-webkit-print-color-adjust: exact;
}
}

#sheet_bg { width: 100%; background-color: #f9f9f9; padding: 50px 0; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; }
#pre_waku { width: 750px; background-color: #FFF; margin: 0 auto 10px; padding: 10px; border: 1px solid #999; }
#sheetsize {
	width: 750px;
	margin: 30px auto 0;
}
#sheetsize .inner {
	width: 750px;
	margin: 0 auto 30px;
	text-align: center;
}
#sheetsize .inner p {
	background-color: #01aaf1;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 0;
    width: 180px;
}
#nav { position: relative; float: left; padding: 10px 0 0; }
#nav a { text-decoration: none; padding: 0 15px; color: #222; font-size: 16px; }
#nav a:hover { color: #999; }
#nav span { background :#DDD; height: 5px; display: block; position: absolute; width: 40px; left: 0; margin: 25px 0 0; }

span.b { font-weight: bold; background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff66 60%) repeat scroll 0 0; }
span.b_nomal { font-weight: bold; }

/*sheetline*/
.sheetline { border-bottom: 1px dashed #ddd; clear: both; overflow: hidden; margin: 0 0 30px; padding: 0 0 30px; }

/*btn*/
.logout {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    width: 100px;
	padding-top:10px;
}
.button {
    border-radius: 2px;
    display: inline-block;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 100px;
	font-size: 16px;
	background: -moz-linear-gradient(top, #DDD, #AAA);
    background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#AAA));
	border: 1px solid #DDD;

}
.square_btn {
	position: relative;
    display: inline-block;
    padding: 5px 20px;
    text-decoration: none;
	color: #FFFFFF;
    background: #999999;
    border-bottom: solid 2px #444444;
    border-radius: 2px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.square_btn:hover {
	background: #666666;
	color: #FFFFFF;
}
.square_btn:active {
	border-bottom: solid 2px #249fdb;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.button_mypage_setting {
	background: url("../img/icon/icon_mypagesetting.png") no-repeat scroll 15px 17px / 15px auto;
	background-color: #EEE;
    border-bottom: 3px solid #ccc;
    color: #222;
    display: inline-block;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    outline: medium none;
    padding-right: 40px;
    text-decoration: none;
    width: 120px;
	overflow: hidden;
	clear: both;
}
.button_mypage_recipe {
	background: url("../img/icon/icon_mypagerecipe.png") no-repeat scroll 15px 17px / 15px auto;
	background-color: #EEE;
    border-bottom: 3px solid #ccc;
    color: #222;
    display: inline-block;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    outline: medium none;
    padding-right: 30px;
    text-decoration: none;
    width: 140px;
	overflow: hidden;
	clear: both;
}
.button_mainback {
	background: url("../img/icon/icon_toparrowleft.png") no-repeat scroll 15px 17px / 15px auto;
	background-color: #EEE;
    border-bottom: 3px solid #ccc;
    color: #222;
    display: inline-block;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    outline: medium none;
    padding-right: 30px;
    text-decoration: none;
    width: 160px;
	text-align: right;
}
.button_mainsave {
	background: url("../img/icon/icon_topsave.png") no-repeat scroll 15px 17px / 15px auto;
	background-color: #EEE;
    border-bottom: 3px solid #ccc;
    color: #222;
    display: inline-block;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    outline: medium none;
    padding-right: 32px;
    text-decoration: none;
    width: 160px;
	text-align: right;
}

/*100ミニボタン（グレー）*/
.button_mini {
	background-color: #eee;
    border: 1px solid #DDD;
    border-radius: 2px;
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 29px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 100px;
}

/*ミニボタン（グレー）*/
.button_mypage_mini {
	display: inline-block;
	width: 80px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
    background-color: #f5f5f5;
	color: #222;
	border-radius: 1px;
	font-weight: normal;
	margin: 2px 0;
}
/*ミニボタン（青枠）*/
.button_mini_blue {
	border: 2px solid #01aaf1;
    border-radius: 2px;
    color: #01aaf1;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 70px;
}
/*ミニボタン（青ベタ）*/
.button_mini_blue02 {
	display: inline-block;
	width: 130px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
    background-color: #01aaf1;
	color: #fff;
	font-size: 14px;
	border-radius: 2px;
	letter-spacing: 0.1em;
}
.button_mainbtn {
	display: inline-block;
	width: 200px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	outline: none;
    background-color: #333;
	color: #fff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	font-size: 14px;
	font-weight: normal;
}
/*200ボタン（黒ベタ）*/
.button_bottombtn {
	display: inline-block;
	width: 200px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	outline: none;
    background-color: #333;
	color: #fff;
	border-radius: 2px;
	font-size: 14px;
}
/*200ボタン（青ベタ）*/
.button_bottombtn_blue {
	display: inline-block;
	width: 200px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	outline: none;
    background-color: #01aaf1;
	color: #fff;
	border-radius: 2px;
	font-size: 14px;
}
.button_gray {
	background-color: #EEE;
    border-radius: 20px;
    color: #666;
    display: inline-block;
    float: right;
    font-size: 14px;
    font-weight: normal;
    height: 30px;
    line-height: 32px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 120px;
}
.button_square {
	background-color: #ddd;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
    height: 25px;
    line-height: 23px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 25px;
}
.button_middle {
	display: inline-block;
	width: 150px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
    background-color: #161616;
	color: #fff;
	border-radius: 2px;
	font-size: 14px;
	font-weight: normal;
}
.button_big {
	display: inline-block;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
    background-color: #161616;
	color: #fff;
	border-radius: 2px;
	font-size: 14px;
	font-weight: normal;
}
.button_topmain {
	display: inline-block;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
    background-color: #01AAF1;
	color: #fff;
	border-radius: 2px;
	font-size: 18px;
}
.button_topmain02 {
	display: inline-block;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
    /* background-color: #028fee; */
    background-color: #222;
	color: #fff;
	border-radius: 2px;
	font-size: 18px;
}
.button_topmain03 {
	display: inline-block;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
    /* background-color: #01AAF1; */
    background-color: #888;
	color: #fff;
	border-radius: 2px;
	font-size: 16px;
	font-weight: normal;
}
.button_topmain_w {
	display: inline-block;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	outline: none;
    background-color: #FFF;
	color: #01AAF1;
	border-radius: 2px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after,
.button_mini,
.button_mini::before,
.button_mini::after,
.button_mainbtn,
.button_mainbtn::before,
.button_mainbtn::after,
.button_bottombtn,
.button_bottombtn::before,
.button_bottombtn::after,
.button_bottombtn_blue,
.button_bottombtn_blue::before,
.button_bottombtn_blue::after,
.button_mini_blue02,
.button_mini_blue02::before,
.button_mini_blue02::after,
.button_square,
.button_square::before,
.button_square::after,
.button_middle,
.button_middle::before,
.button_middle::after,
.button_big,
.button_big::before,
.button_big::after,
.button_topmain,
.button_topmain::before,
.button_topmain::after,
.button_topmain02,
.button_topmain02::before,
.button_topmain02::after,
.button_topmain_w,
.button_topmain_w::before,
.button_topmain_w::after,
.button_mypage_setting,
.button_mypage_setting::before,
.button_mypage_setting::after,
.button_mypage_recipe,
.button_mypage_recipe::before,
.button_mypage_recipe::after,
.button_mypage_mini,
.button_mypage_mini::before,
.button_mypage_mini::after,
.button_mainback,
.button_mainback::before,
.button_mainback::after,
.button_mainsave,
.button_mainsave::before,
.button_mainsave::after,
.button_gray,
.button_gray::before,
.button_gray::after,
.button_mini_blue,
.button_mini_blue::before,
.button_mini_blue::after
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button_mini:hover, .button_mainbtn:hover, .button_bottombtn:hover, .button_square:hover, .button_middle:hover, .button_big:hover, .button_mypage:hover {
	background-color: #000;
	color: #FFF;
}
.button_gray:hover {
	background-color: #000;
	color: #FFF;
}
.button_topmain:hover {
	background-color: #0399f1;
	color: #FFF;
}
.button_topmain02:hover, .button_bottombtn_blue:hover {
	background-color: #000;
	color: #fff;
}
.button_topmain03:hover {
	background-color: #000;
}
.button_topmain_w:hover {
	background-color: #0180B5;
	color: #FFF;
}
.button_mainback:hover, .button_mainsave:hover, .button_mypage_setting:hover, .button_mypage_recipe:hover, .button_mypage_mini:hover {
	border-bottom: 3px solid #01AAF1;
}
.button_mini_blue:hover {
	background-color: #01aaf1;
	border: 2px solid #01aaf1;
	color: #FFF;
}
.button_mini_blue02:hover {
	background-color: #0180b5;
	color: #FFF;
}

.btn_maincheck_off a {
  display: block;
  cursor: pointer;
  width: 300px;
  margin: 0 auto;
  padding: 15px 0;
  color: #999;
  text-align: center;
  text-decoration: none;
  background-color: #EEE;
  border-radius: 2px;
  box-shadow: 0 5px 0 #999;
  -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  font-size: 16px;
  letter-spacing: 4px;
}
.btn_maincheck_off a:hover {
  background-color: #EEE;
  box-shadow: 0 3px 0 #999;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}
.btn_maincheck_off a:active {
  background-color: #EEE;
  box-shadow: 0 0 0 #999;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  transition-duration: 0.1s;
}
.btn_maincheck_on a {
  display: block;
  cursor: pointer;
  width: 300px;
  margin: 0 auto;
  padding: 15px 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #01AAF1;
  border-radius: 4px;
  box-shadow: 0 5px 0 #0166B5;
  -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  font-size: 16px;
  letter-spacing: 4px;
}
.btn_maincheck_on a:hover {
  background-color: #01AAF1;
  box-shadow: 0 3px 0 #0188F1;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}
.btn_maincheck_on a:active {
  background-color: #01AAF1;
  box-shadow: 0 0 0 #0166B5;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  transition-duration: 0.1s;
}

.button:hover {
	background: -moz-linear-gradient(top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);
	background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
	border: 1px solid #DDD;
	color: #FFF;
}



/*btn_mypage*/
.btn_mypage {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}
.btn_mypage:hover {
	color: #fff;
}
.btn_mypage::after {
	top: -100%;
	width: 100%;
	height: 100%;
}
.btn_mypage:hover::after {
	top: 0;
	background-color: #333;
}

/*span_graph*/
.backtopage {
	background: url(../img/icon/icon_backarrow.png) no-repeat 0px 5px;
	background-size: 20px;
	line-height: 30px;
	margin-top: 20px;
	padding-left: 20px;
	border-top: 1px solid #DDD;
}

/*span_graph*/
span.graph_title_s {
    background-color: #cceefc;
    border-radius: 15px;
    color: #01aaf1;
    font-size: 12px;
    left: 55px;
    padding: 3px 20px;
    position: relative;
    top: -35px;
}
span.graph_title_p {
	background-color: #cceefc;
    border-radius: 15px;
    color: #01aaf1;
    font-size: 12px;
    left: -33px;
    padding: 3px 20px;
    position: relative;
    top: -25px;
}
span.graph_title_f {
	background-color: #cceefc;
    border-radius: 15px;
    color: #01aaf1;
    font-size: 12px;
    left: -20px;
    padding: 3px 20px;
    position: relative;
    top: -35px;
}
span.graph_title_v {
	background-color: #cceefc;
    border-radius: 15px;
    color: #01aaf1;
    font-size: 12px;
    left: 25px;
    padding: 3px 20px;
    position: relative;
    top: -105px;
}
span.graph_title_m {
	background-color: #cceefc;
    border-radius: 15px;
    color: #01aaf1;
    font-size: 12px;
    left: 15px;
    padding: 3px 20px;
    position: relative;
    top: -55px;
}

span.graph_number_s {
    font-size: 28px;
    font-weight: bold;
    left: -10px;
    position: relative;
    top: 20px;
}
span.graph_number_p {
    font-size: 28px;
    font-weight: bold;
    left: 10px;
    position: relative;
    top: -5px;
}
span.graph_number_f {
    font-size: 28px;
    font-weight: bold;
    left: 22px;
    position: relative;
    top: -10px;
}
span.graph_number_v {
    font-size: 28px;
    font-weight: bold;
    left: 55px;
    position: relative;
    top: -85px;
}
span.graph_number_m {
    font-size: 28px;
    font-weight: bold;
    left: 27px;
    position: relative;
    top: -35px;
}
span.graph_persent_s {
    left: 0;
    position: relative;
    top: 17px;
}
span.graph_persent_p {
    left: 25px;
    position: relative;
    top: -5px;
}
span.graph_persent_f {
	 font-size: 12px;
    left: 40px;
    position: relative;
    top: -10px;
}
span.graph_persent_v {
    font-size: 12px;
    left: 70px;
    position: relative;
    top: -85px;
}
span.graph_persent_m {
	font-size: 12px;
    left: 40px;
    position: relative;
    top: -38px;
}
span.graph_sugar {
	left: -100px;
    position: relative;
    top: 15px;
	color: #999;
}
span.graph_g_s {
	font-size: 12px;
    left: -83px;
    position: relative;
    top: 45px;
}
span.graph_g_p {
	font-size: 12px;
    position: relative;
}
span.graph_g_f {
	font-size: 12px;
    left: -37px;
    position: relative;
    top: 15px;
}
span.graph_g_v {
	font-size: 12px;
    left: -224px;
    position: relative;
    top: -25px;
}
span.graph_g_m {
	font-size: 12px;
    left: -220px;
    position: relative;
    top: -30px;
}

/*line*/
.line_ver1 {
	width: 100%;
	border: 1px solid #DDD;
	margin: 20px 0;
}

/*error*/
.error, .error_m, .success {
	margin: 10px auto;
	padding: 10px 0;
	text-align: center;
	border-radius: 1px;
	background-color: #FFF;
}
.success {
	background: url(../img/icon/icon_success.png) no-repeat 15px 10px;
	background-size: 20px;
	border: 2px solid #01aaf1;
	color: #01aaf1;
}
.error {
	border: 2px solid #fa8072;
	color: #fa8072;
}
.error_m {
	background-color: #FFE4E1;
	color: #F08080;
}

.error_mypage {
	background-color: #FFF;
	border: 1px solid #DDD;
	margin: 150px 0;
    padding: 30px 20px;
    text-align: center;
}
.error_mypage a {
	color: #F7931E;
}

/*login*/
/* Form Layout */
#login_bg {
	width: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
	background-color: #f9f9f9;
}
#login_bg .trial {
    overflow: hidden;
    width: 100%;
	margin: 0 0 80px;
}
#login_bg .trial img {
    width: 100%;
}
#regist_bg {
	width: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
	background-color: #f9f9f9;
}
#regist_bg .trial {
    overflow: hidden;
    width: 100%;
	margin: 0 0 80px;
}
#regist_bg .trial02 {
    overflow: hidden;
    width: 100%;
	margin: 0 0 50px;
}
#regist_bg .trial img {
    width: 100%;
}
#regist_bg .trial02 img {
    width: 100%;
}
.form-wrapper .check {
}
.form-wrapper {
  background: #fff;
  border: 2px solid #DDD;
  margin: 10px auto;
  padding: 50px;
  width: 500px;
  border-radius: 5px;
  box-shadow: 0 3px 0 #ddd;
  overflow: hidden;
}
.form-wrapper .btn {
	width: 100%;
	margin: 30px auto 0;
	text-align: center;
}
.form-wrapper .btn .left {
	float: left;
}
.form-wrapper .btn .right {
	float: right;
}
.form-wrapper .regist_attention {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.form-wrapper .regist_attention img {
	width: 70%;
	margin: 50px 0;
}
.form-wrapper .regist_attention p {
	background: url(../img/icon/icon_infocheck.png) no-repeat 15px 11px;
	background-size: 15px;
	background-color: #fff;
    border: 2px solid #07acec;
    border-radius: 4px;
    color: #07acec;
    font-size: 15px;
    padding: 8px 0;
}
.form-wrapper .regist_attention .inner {
	border-top: 1px dashed #DDD;
	padding: 20px 0 0;
	text-align: left;
}
.form-wrapper .regist_attention .inner .addbox {
	background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 2px;
    margin: 10px 0;
    padding: 20px;
}
.form-wrapper .regist_attention .inner .addbox p {
	background: none;
}
.form-wrapper .regist_attention .inner li {
	padding-bottom: 5px;
}
.form-wrapper .regist_attention .inner li a {
	text-decoration: underline;
}
.form-wrapper .regist_attention .inner li span.step {
	background-color: #222;
	color: #FFF;
	padding: 5px 20px;
	border-radius: 2px;
	margin-right: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 30px;
}

.form-wrapper table {
	width: 100%;
	border-collapse: collapse;
	border-spacing:1px;
}
.form-wrapper td {
	border: 1px solid #DDD;
	font-size: 18px;
	padding: 15px 10px;
}
.form-wrapper td.title {
	background-color: #f5f5f5;
	width: 35%;
	text-align: center;
	color: #666;
}
.form-wrapper h1 {
	font-size: 25px;
    font-weight: bold;
	margin: 0 0 20px;
}
.form-wrapper h2 {
	font-size: 14px;
	font-weight: bold;
	float: right;
	padding-bottom: 5px;
}
.form-wrapper h3 {
	font-size: 25px;
    font-weight: bold;
	margin: 0 0 20px;
	text-align: center;
}
.form-wrapper p {
	font-size: 16px;
	padding: 20px 0;
}
.form-wrapper p.title {
	background: url(../img/icon/icon_black.png) no-repeat 0px 10px;
	background-size: 20px;
	font-size: 18px;
	font-weight: bold;
	padding: 8px 0 10px 30px;
}
.form-wrapper p.bold {
	font-size: 18px;
    font-weight: bold;
    padding: 30px 0;
    text-align: center;
	color: red;
}
.form-wrapper .successbox {
	margin: 20px 0 0;
}
.form-wrapper .successbox p.success {
	border: 2px solid #f7931e;
    border-radius: 5px;
    color: #f7931e;
    font-size: 14px;
    margin: 10px;
    padding: 30px;
    text-align: left;
}
.form-item {
  margin-bottom: 0.75em;
  width: 100%;
}
.form-item input {
  background: #f5f5f5;
  border: none;
  border-bottom: 3px solid #CCC;
  color: #666;
  font-size: 20px;
  height: 40px;
  transition: border-color 0.3s;
  width: 96%;
}
.form-item input:focus {
  border: 3px solid #1ab2f2;
  outline: none;
}
.button-panel {
 　margin: 20px 0 0;
   text-align: center;
}

.button-panel .button {
  background: #444;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 45px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
  border-radius: 2px;
}
.button:hover {
  background: #000;
}
.button-panel .button_repass {
  background: #666;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-size: 1.3em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
  border-bottom: 3px solid #000;
  border-radius: 2px;
}
.button_repass:hover {
  background: #000;
}
.form-footer {
  font-size: 16px;
}
.form-footer a {
  text-decoration: none;
  /*transition: border-color 0.3s;*/
  font-size: 14px;
  /*color: #999;*/
  font-weight: bold;
}
.form-footer a:hover {
  background: linear-gradient(transparent 80%, #ffff66 80%);
}

/*header*/
#wrap {
    position: relative;
}
#btn-bd {
    margin-left: 15px;
    top: 0px;
    position: absolute;
}
#header {
	width: 100%;
	margin: 0 auto;
}
#header .mainbox {
	background-color: #f9f9f9;
	overflow: hidden;
	text-align: center;
	height: 40px;
}
#header .mainbox .inner {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    width: 980px;
}
#header .mainbox .inner p {
    float: left;
    font-size: 13px;
    margin: 10px 0;
}
#header .mainbox .inner p.mypage {
	background: url(../img/icon/icon_topuser.png) no-repeat 0px 0px;
	background-size: 20px;
    float: right;
    font-size: 13px;
    margin: 10px 0;
	padding-left: 30px;
	color: #222;
	width: auto;
}
#header .mainbox .inner p.mypage a {
	font-weight:bold;
}
#header .mainbox .inner p.mypage a:hover {
	color: #666;
}
#header .mainbox .inner .guest p {
    float: right;
    margin: 12px 0;
}
#header .mainbox .inner .navigation {
	float: right;
}
#header .mainbox .inner .navigation .btn {
	padding: 10px 10px 10px 0;
	float: right;
}
#header .mainbox .inner .navigation .title01 {
	float: left;
	padding: 3px 20px;
	margin: 8px 10px 8px 0;
	border: 1px solid #000;
	color: #000;
	border-radius: 2px;
	font-size: 12px;
}
#header .mainbox .inner .title02 {
	float: right;
	margin: 7px 0 5px 0;
	padding: 3px 20px;
	background-color: #000;
	color: #000;
	border-radius: 2px;
	margin-bottom: 10px;
	font-size: 12px;
}
#header .logo {
	margin: 0 auto;
	text-align: center;
	background: rgba(0, 0, 0, 0) url("../img/top_mainimg02.jpg") no-repeat scroll center center / cover ;
    height: 200px;
    overflow: hidden;
    width: 100%;
}
#header .logo img {
	margin: 45px auto;
}
#header .menubox {
	height: 60px;
    overflow: hidden;
    padding: 20px 0 0;
}
#header .menubox .inner {
}
#header .menubox .inner li {
	float: left;
	margin-right: 50px;
}
#header .menubox .inner li.recipe {
	background-color: #222;
}
#header .menubox .inner li a {
	color: #222;
}
#header .menubox .inner li.recipe a {
	color: #FFF;
}
#header .menubox .inner .logo {
	float: left;
}
#header .menubox .inner .logo img {
	margin: 20px 0 0;
}
#header .menubox {
	background-color: #FFF;
}
#header .menubox .inner .btn {
	float: right;
}
#header .menubox .inner .btn .recipe {
	margin: 30px 0;
}
#header .menubox .inner {
	margin: 15px auto;
	background-color: #FFF;
	overflow: hidden;
}
#header .menu {
	float: right;
	padding: 10px 0;
	height: 50px;
}
#header .menu li {
	padding: 10px;
	float: left;
}
#header .menu li.about {
	padding: 10px 0 10px 20px;
}
#header .menu li.recipecheck {
	background: url(../img/menu/icon_recipecheck.png) no-repeat 0px 18px;
	background-size: 20px;
	padding: 18px 0 18px 30px;
	width: 180px;
}
#header .menu li.mykitchen {
	padding: 0;
}
#header {
  background-color: #FFF;
  height: 120px;
}
#header .fixbar {
  position: absolute;
  background-color: #FFF;
  width: 100%;
  border-bottom: 1px solid #DDD;
  opacity: 0.9;
}
#header .fixbar .logo_mini {
	float: left;
	padding: 25px 30px 0 0;
}
#header.fixed .fixbar {
  position: fixed;
  top: 0px;
  z-index: 1;
}

/*header_landing*/
#header_lan {
  background-color: #222;
}
#header_lan .mainbox {
	overflow: hidden;
	text-align: center;
}
#header_lan .mainbox .inner {
	width: 98%;
	margin: 0 auto;
}
#header_lan .mainbox .inner p {
    color: #FFF;
    font-size: 13px;
    padding: 10px 0;
    text-align: left;
}
#header_logo {
    color: #FFF;
}
#header_logo .logo_mini {
	padding: 10px 0;
}

/*header02*/
#wrap {
    position: relative;
}
#btn-bd {
    margin-left: 15px;
    top: 0px;
    position: absolute;
}
#header02 .mainbox {
	background-color: #f9f9f9;
	overflow: hidden;
	text-align: center;
	border-bottom: 1px solid #f1f1f1;
	height: 45px;
}
#header02 .mainbox .inner {
	width: 980px;
	margin: 0 auto;
}
#header02 .mainbox .inner p {
    float: left;
    font-size: 13px;
    margin: 12px 0;
}
#header02 .mainbox .inner p.mypage {
	background: url(../img/icon/icon_topuser.png) no-repeat 0px 0px;
	background-size: 20px;
    float: right;
    font-size: 13px;
    margin: 12px 0;
    width: auto;
	padding-left: 30px;
}
#header02 .mainbox .inner p.mypage a {
	font-weight: bold;
}
#header02 .mainbox .inner p.mypage a:hover {
	color: #DDD;
}
#header02 .mainbox .inner .navigation {
	float: right;
}
#header02 .mainbox .inner .navigation .btn {
	padding: 10px 10px 10px 0;
	float: right;
}
#header02 .mainbox .inner .navigation .title01 {
	float: left;
	padding: 3px 20px;
	margin: 8px 10px 8px 0;
	border: 1px solid #000;
	color: #000;
	border-radius: 2px;
	font-size: 12px;
}
#header02 .mainbox .inner .title02 {
	float: right;
	margin: 7px 0 5px 0;
	padding: 3px 20px;
	background-color: #000;
	color: #000;
	border-radius: 2px;
	margin-bottom: 10px;
	font-size: 12px;
}
#header02 .logo {
	width: 980px;
	margin: 100px auto;
	text-align: center;
}
#header02 .menubox {
	width: 100%;
	height: 70px;
    margin: 0;
    overflow: hidden;
    padding: 8px 0 0;
}
#header02 .menubox .logo_mini {
	float: left;
	padding: 15px 30px 0 0;
}
#header02 .menubox .inner {
}
#header02 .menubox .inner li {
	float: left;
	margin-right: 50px;
}
#header02 .menubox .inner li.recipe {
	background-color: #222;
}
#header02 .menubox .inner li a {
	color: #222;
}
#header02 .menubox .inner li.recipe a {
	color: #FFF;
}
#header02 .menubox .inner .logo {
	float: left;
}
#header02 .menubox .inner .logo img {
	margin: 20px 0 0;
}
#header02 .menubox {
	background-color: #fff;
}
#header02 .menubox .inner .btn {
	float: right;
}
#header02 .menubox .inner .btn .recipe {
	margin: 30px 0;
}
#header02 .menubox .inner {
	margin: 15px auto;
	background-color: #FFF;
	overflow: hidden;
}
#header02 .menu {
	float: right;
	padding: 10px 0;
	height: 50px;
}
#header02 .menu li {
	padding: 10px;
	float: left;
}
#header02 .menu li.about {
	padding: 10px 0 10px 20px;
}
#header02 .menu li.recipecheck {
	background: url(../img/menu/icon_recipecheck.png) no-repeat 0px 18px;
	background-size: 20px;
	padding: 18px 0 18px 30px;
	width: 180px;
}
#header02 .menu li.mykitchen {
	padding: 0;
}
#header02 {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  height: 122px;
}
#header02 .fixbar {
  position: absolute;
  background-color: #fff;
  width: 100%;
  top: 43px;
  opacity: 0.9;
}
#header02.fixed .fixbar {
  position: fixed;
  top: 0px;
  z-index: 1;
}
#container {
	background-color: #FFF;
	overflow: hidden;
}

/*visual_copyinfo*/
.copyinfo_title {
	padding: 50px 0 30px;
	background-color: #F9f9f9;
}
.copyinfo_title h1 {
	background: url(../img/icon/icon_seacret.png) no-repeat 0px 0px;
	background-size: 20px;
	width: 950px;
	font-size: 25px;
	font-weight: bold;
	margin: 0 auto;
	padding-left: 30px;
}
#visual_copyinfo {
	width: 980px;
	margin: 30px auto;
}
#visual_copyinfo .maintitle {
	background: url(../img/icon/icon_mypageprint.png) no-repeat 0px 0px;
	background-color: #222;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
	margin: 100px 0 0;
    padding: 15px 50px;
}
#copyinfo {
	background-color: #FFF;
    overflow: hidden;
    padding: 20px;
	border: 1px solid #eee;
}
#copyinfo h2 {
	background-color: #222;
    border-radius: 2px;
    color: #fff;
    margin: 0 0 10px;
    padding: 5px 10px;
    text-align: center;
    width: 150px;
}
#copyinfo .inner {
	overflow: hidden;
	border-bottom: 3px solid #f5f5f5;
}
#copyinfo .inner .left {
	float: left;
	width: 48%;
	padding: 10px 0 5px;
}
#copyinfo .inner .left .img img{
	width: 100%;
	border: 1px solid #DDD;
}
#copyinfo .inner .right {
	float: right;
	width: 50%;
	padding: 10px 0;
}
#copyinfo .inner .right .number {
	margin: 0 0 20px;
	overflow: hidden;
}
#copyinfo .inner .right .number .step {
	background-color: #222;
    border-radius: 2px;
    color: #fff;
    float: left;
    font-size: 16px;
    padding: 5px 0;
    text-align: center;
    width: 100px;
}
#copyinfo .inner .right .number .stepname {
	float: left;
    font-size: 18px;
    padding: 5px 15px;
}
#copyinfo .inner .right p {
	font-size: 16px;
	line-height: 1.3em;
}
#copyinfo_p {
	width: 750px;
	margin: 10px auto 50px;
}
#copyinfo_p p {
	text-align: right;
}
#copyinfo_p p a {
	text-decoration: underline;
}


/*visual_readyfor*/
#visual_readyfor .topimgBox {
	background: url(../img/readyfor/readyfor_topimg.jpg) no-repeat 0px 0px;
	width: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    overflow: hidden;
    min-width: 100%;
	_display: inline;
	_zoom:1;
}
#visual_readyfor .topimgBox .maintop {
	width: 1000px;
	margin: 5% auto;
}
#visual_readyfor .topimgBox .maintop .title {
	padding: 5% 0 0;
	text-align: center;
}
#visual_readyfor .topimgBox .maintop p {
	font-size: 20px;
    font-weight: 400;
    line-height: 1.7em;
	letter-spacing: 0.5em;
    text-align: center;
}
#visual_readyfor .topimgBox .maintop p.mini {
	font-size: 14px;
    padding-right: 110px;
    text-align: right;
}
#visual_readyfor .topimgBox .maintop p span.bold {
	font-weight: bold;
}
#visual_readyfor .topimgBox .maintop .img {
	text-align: center;
	padding: 3% 0 0;
}
#visual_readyfor .aboutBox {
	background-color: #fff;
	width: 100%;
	padding: 50px 0 100px;
}
#visual_readyfor .aboutBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_readyfor .aboutBox .inner .title {
	padding: 10% 0 5%;
	text-align: center;
}
#visual_readyfor .aboutBox .inner .title_m {
	padding: 50px 0 15px;
	text-align: center;
}
#visual_readyfor .aboutBox .inner .movie {
	text-align: center;
}
#visual_readyfor .aboutBox .inner p {
	font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 1% 0 5%;
    text-align: center;
}
#visual_readyfor .aboutBox .inner p span.bold {
	font-weight: bold;
}
#visual_readyfor .aboutBox .inner .img_c {
	text-align: center;
	padding: 5% 0 10%;
}
#visual_readyfor .comingsoon {
	background-color: #fff;
	width: 100%;
	padding: 10% 0;
}
#visual_readyfor .comingsoon .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_readyfor .comingsoon .inner .img {
	text-align: center;
}
#visual_readyfor .meritBox {
	background-color: #f5f5f5;
	width: 100%;
}
#visual_readyfor .meritBox .btn {
	padding: 0 0 5%;
    text-align: center;
}
#visual_readyfor .meritBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_readyfor .meritBox .inner p {
	font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 1% 0 5%;
    text-align: center;
}
#visual_readyfor .meritBox .inner .title {
	padding: 10% 0 5%;
	text-align: center;
}
#visual_readyfor .meritBox .inner .img {
	padding: 5% 0 10%;
	text-align: center;
}
#visual_readyfor .meritBox .inner p span.bold {
	font-weight: bold;
}
#visual_readyfor .sheetBox {
	background-color: #0180B5;
	width: 100%;
	padding: 50px 0 150px;
	overflow: hidden;
}
#visual_readyfor .sheetBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_readyfor .sheetBox .inner .title {
	background-color: #fff;
    color: #fff;
    padding: 0;
    text-align: center;
}
#visual_readyfor .sheetBox .inner .title02 {
	padding: 5% 0;
	text-align: center;
}
#visual_readyfor .sheetBox .inner .img {
	padding: 3%  0 10%;
	text-align: center;
}
#visual_readyfor .sheetBox .inner p {
	font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    text-align: center;
	color: #FFF;
	padding: 0 0 5%;
}

/*visual_landing*/
#visual_landing .topimgBox {
	background: url(../img/landing/landing_topimg.jpg) no-repeat 0px 0px;
	width: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1050px;
    overflow: hidden;
    min-width: 100%;
	_display: inline;
	_zoom:1;
}
#visual_landing .topimgBox .maintop {
	width: 1000px;
	margin: 5% auto;
}
#visual_landing .topimgBox .maintop .title {
	margin: 5% 0 0;
	text-align: center;
}
#visual_landing .topimgBox .maintop p {
	font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 1% 0 5%;
    text-align: center;
}
#visual_landing .topimgBox .maintop p span.bold {
	font-weight: bold;
}
#visual_landing .topimgBox .maintop .btn {
    text-align: center;
}
#visual_landing .aboutBox {
	background-color: #f5f5f5;
	width: 100%;
}
#visual_landing .aboutBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_landing .aboutBox .inner .top {
	text-align: center;
}
#visual_landing .aboutBox .inner .top h1 img {
	margin: 10% 0 5%;
}
#visual_landing .aboutBox .inner .top p {
	font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 1% 0 5%;
    text-align: center;
}
#visual_landing .aboutBox .inner .top p span.bold {
	font-weight: bold;
}
#visual_landing .aboutBox .inner .top p span.bold_hr {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff66 60%) repeat scroll 0 0;
}
#visual_landing .aboutBox .inner .img {
	padding: 0 0 10%;
}
#visual_landing .introBox {
	background: rgba(0, 0, 0, 0) url("../img/landing/landing_bgmasu.jpg") no-repeat scroll center center / cover ;
    height: 980px;
    min-width: 100%;
    overflow: hidden;
    width: 100%;
}
#visual_landing .introBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_landing .introBox .inner .title {
	margin: 10% 0 0;
    text-align: center;
}
#visual_landing .introBox .inner img {
	padding: 0 0 5%;
}
#visual_landing .priceBox {
	background-color: #f5f5f5;
	width: 100%;
	padding: 5% 0 10%;
}
#visual_landing .priceBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual_landing .priceBox .inner .title {
	background: rgba(0, 0, 0, 0) url("../img/icon/icon_infocheck.png") no-repeat scroll 0 10px / 20px auto;
    color: #000;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 20px;
    padding: 10px 0 0 30px;
    text-align: left;
}
#visual_landing .priceBox .inner table {
	background-color: #f9f9f9;
    border-collapse: collapse;
    border-radius: 6px;
    width: 100%;
}
#visual_landing .priceBox .inner td {
	background-color: #FFF;
	border: 4px solid #f5f5f5;
    font-size: 18px;
    padding: 15px;
}
#visual_landing .priceBox .inner td.title_c {
	background-color: #DCEEFC;
    font-size: 20px;
    text-align: center;
}
#visual_landing .priceBox .inner td.title_f {
	background-color: #fff;
    font-size: 20px;
    text-align: center;
}
#visual_landing .priceBox .inner td.title_free {
	background-color: #222;
    color: #fff;
    text-align: center;
}
#visual_landing .priceBox .inner td.title_pay {
	width: 20%;
	background-color: #01AAF1;
    color: #fff;
    text-align: center;
}
#visual_landing .priceBox .inner h1 {
	text-align: center;
}
#visual_landing .priceBox .inner h1 img {
	padding: 0 0 5%;
}
#visual_landing .priceBox .inner .btn {
    text-align: center;
	padding: 10% 0 0;
}
#visual_landing .priceBox .inner .plan {
    background: #fff none repeat scroll 0 0;
    float: left;
    margin: 0;
    min-height: 440px;
    position: relative;
    width: 48%;
}
#visual_landing .priceBox .inner .plan .plan-name {
    background: #222 none repeat scroll 0 0;
    color: #fff;
    font-size: 2.2em;
    line-height: 120%;
    margin-bottom: 50px;
    padding: 25px 0;
    text-align: center;
}
#visual_landing .priceBox .inner .plan .plan-name .sub {
    color: #fff;
    font-size: 0.5em;
    line-height: 120%;
}
#visual_landing .priceBox .inner .plan .plan-name .name {
    color: #fff;
    font-size: 1.4em;
    margin: 30px 0 15px;
    text-align: center;
}
#visual_landing .priceBox .inner .plan .plan-name .plan-price {
    border-bottom: 1px solid #eee;
    padding-bottom: 50px;
    text-align: center;
}
#visual_landing .priceBox .inner .plan .plan-name .plan-price .sub {
    color: #999;
    font-size: 1em;
    margin-bottom: 10px;
}
#visual_landing .priceBox .inner .plan .plan-name .plan-price .price {
    color: #222;
    font-size: 3.2em;
    font-weight: bold;
    line-height: 1;
}
#visual_landing .priceBox .inner .attention {
	padding: 1% 0;
}

/*visual*/
#visual .topBox {
	background: url(../img/wbs/wbs_bg.jpg) repeat 0px 0px;
    overflow: hidden;
    width: 100%;
    padding: 50px 0;
}
#visual .topBox p {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
	line-height: 1.3em;
}
#visual .topBox p.waku {
	border: 1px solid;
    border-radius: 2px;
    font-size: 16px;
    margin: 0 auto 30px;
    padding: 5px 10px;
    text-align: center;
    width: 100px;
    background-color: rgb(255,255,255,0.3);
}
#visual .topBox p.mini {
	font-size: 16px;
    font-weight: normal;
    padding: 10px 0 30px;
    text-align: center;
}
#visual .topBox p.mini a {
	text-decoration: underline;
}
#visual .topBox li {
}


#visual .topBox .logo {
	text-align: center;
	margin: 100px 0 30px;
}
#visual .topBox .logo p {
    font-family: "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝",serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.4em;
    line-height: 1.7em;
    margin: 40px 0;
	color: #FFF;
	text-align: center;
}

#visual .topimgBox {
	background: url(../img/pro_topimg.jpg) no-repeat 0px 0px;
	width: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 750px;
    overflow: hidden;
    min-width:980px;
	_display: inline;
	_zoom:1;
}
#visual .topimgBox .btn_go {
	text-align: center;
	margin: 500px 0 0;
}
#visual .topimgBox .btn_go img {
	width: 450px;
}
#visual .main_btn {
	background-color: rgba(245, 245, 245, 0.9);
    border-radius: 2px;
    height: 400px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 190px;
    width: 750px;
}
#visual .main_btn .inner {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#visual .main_btn .inner .title {
	margin: 50px 0 30px;
}
#visual .main_btn .inner .title img {
	width: 600px;
	text-align: center;
}
#visual .main_btn .inner .img {
	margin: 0 0 30px;
}
#visual .main_btn .inner .img img {
	width: 600px;
	text-align: center;
}
#visual .main_free {
    left: 590px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 150px;
    width: 0;
}
#visual .main_free .free img {
	width: 160px;
}
#visual .aboutBox {
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
	margin: 30px 0;
	text-align: center;
}
#visual .aboutBox .whatis {
	width: 980px;
	margin: 50px auto 0;
}
#visual .aboutBox .whatis p {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 50px 0;
	text-align: center;
}
#visual .aboutBox .whatis p span.bold {
	font-weight: bold;
}
#visual .aboutBox .whatis p span.bold_hr {
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
#visual .aboutBox .whatis .title  {
	text-align: center;
}
#visual .aboutBox .whatis .photo {
	text-align: center;
	margin: 50px 0 0;
}


#visual .recipeBox {
	width: 100%;
  background-color: #F5F5F5;
  overflow: hidden;
  text-align: center;
  padding: 80px 0;
}
#visual .recipeBox .whatis {
	width: 980px;
	margin: 0 auto 30px;
}
#visual .recipeBox .whatis p {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    margin: 50px 0;
	text-align: center;
}
#visual .recipeBox .submovie {
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
}
#visual .recipeBox .submovie li {
  float: left;
  margin-right: 5px;
}
#visual .recipeBox .submovie li p {
  text-align: left;
}
#visual .btn {
  clear: both;
  margin: 50px auto 0;
}
#visual .btn p {
  font-size: 16px;
  border: 1px solid #222;
  width: 200px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  margin: 0 auto;
}

#visual .whyBox {
	width: 100%;
	background-color: #f9f9f9;
	overflow: hidden;
	padding: 100px 0 80px;
}
#visual .whyBox .inner {
	width: 980px;
	margin: 0 auto;
}
#visual .whyBox .inner .title02 {
	text-align: center;
}
#visual .whyBox .inner .title02 img {
	padding: 20px 0;
}
#visual .whyBox .inner p {
	font-size: 18px;
    font-weight: 400;
    line-height: 2em;
    margin: 0;
    text-align: center;
}
#visual .whyBox02 {
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	padding: 80px 0;
}
#visual .whyBox02 .title {
	text-align: center;
}
#visual .whyBox02 .inner {
	width: 800px;
	margin: 0 auto 50px;
	overflow: hidden;
}
#visual .whyBox02 .inner .left {
	width: 50%;
	float: left;
}
#visual .whyBox02 .inner .left p {
	float: left;
    font-size: 24px;
    font-weight: bold;
    line-height: 2em;
    margin: 72px 0;
    text-align: left;
    width: 400px;
}
#visual .whyBox02 .inner .left p span.bold_hr {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff66 60%) repeat scroll 0 0;
}
#visual .whyBox02 .inner .right {
	width: 50%;
	float: right;
}
#visual .whyBox02 .inner .right img {
	width: 400px;
	border-radius: 5px;
}

#visual .whyBox02 .meritpoint .inner h1 {
    font-size: 30px;
    font-weight: bold;
    line-height: 35px;
    margin: 0 0 50px;
    text-align: center;
}
#visual .whyBox02 .meritpoint {
	width: 800px;
	margin: 0 auto;
}
#visual .whyBox02 .meritpoint .inner {
	margin: 50px auto;
    width: 800px;
}
#visual .whyBox02 .meritpoint .inner .Box {
	width: 256px;
	float: left;
	padding-right: 10px;
}
#visual .whyBox02 .meritpoint .inner .Box .img img {
	width: 260px;
}
#visual .whyBox02 .meritpoint .inner .Box p {
	line-height: 1.5em;
	font-size: 14px;
}
#visual .whyBox02 .meritpoint .inner .Box p.effectinfo {
    border-radius: 2px;
    padding: 10px;
    font-size: 14px;
}
#visual .whyBox02 .meritpoint .inner .Box p.title {
    font-weight: bold;
    padding: 20px 0;
    font-size: 15px;
}
#visual .whyBox02 .meritpoint .inner .Box p.title02 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 0;
    text-align: center;
	height: 25px;
}
#visual .whyBox02 .meritpoint .inner .Box p.titlesub {
    color: #999;
    text-align: center;
    margin: 0 0 10px;
}

#visual .whyBox03 {
	width: 100%;
	background-color: #EEE;
	overflow: hidden;
	padding: 50px 0 80px;
}
#visual .whyBox03 .inner {
	width: 980px;
	margin: 0 auto;
}
#visual .whyBox03 .inner .title02 {
	text-align: center;
}
#visual .whyBox03 .inner p {
	font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2em;
    margin: 20px 0 0;
    text-align: center;
}

span.bold {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff66 80%) repeat scroll 0 0;
	font-weight: bold;
	line-height: 1.8em;
}




#visual .howtoBox {
	width: 100%;
	background-color: #01AAF1;
	overflow: hidden;
	padding: 180px 0 50px;
}
#visual .howtoBox .title {
	text-align: center;
}
#visual .howtoBox p {
    font-size: 20px;
	font-weight: bold;
    letter-spacing: 0.4em;
    line-height: 1.7em;
    margin: 80px 0;
	text-align: center;
	color: #FFF;
}
#visual .howtoBox .step {
	width: 980px;
	margin: 0 auto;
}
#visual .howtoBox .step .left {
	float: left;
	width: 480px;
	text-align: center;
}
#visual .howtoBox .step .right {
	border-left: 1px dashed #fff;
    float: right;
    padding: 30px 0 30px 50px;
    width: 440px;
}
#visual .howtoBox .step .right h1 {
	overflow: hidden;
}
#visual .howtoBox .step .right h1 .number {
	background-color: #fff;
    border-radius: 2px;
    color: #01aaf1;
    float: left;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
    padding: 10px;
    text-align: center;
}
#visual .howtoBox .step .right h1 p {
	font-family: inherit;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
}
#visual .howtoBox .step .right p {
	color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: inherit;
	line-height: 1.5em;
    margin: 20px 0;
    text-align: left;
}
#visual .howtoBox .step .right p.arrow {
	background: url(../img/icon/icon_toparrow_left.png) no-repeat 0px 0px;
	background-size: 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: inherit;
    text-align: left;
	line-height: 21px;
	padding: 0 0 0 30px;
}
#visual .howtoBox .step .right p.arrow a {
	color: #FFF;
}
#visual .howtoBox .step .right p.arrow a:hover {
	border-bottom: 1px dotted #FFF;
}
#visual .howtoBox .arrow {
	margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    text-align: center;
    width: 980px;
}
#visual .howto .btn {
	background-color: #01aaf1;
    overflow: hidden;
    padding: 0 0 150px;
    text-align: center;
}


#visual .howtoBox02 {
	width: 100%;
	background-color: #0180b5;
	overflow: hidden;
	padding: 150px 0;
}
#visual .howtoBox02 .title {
	text-align: center;
}
#visual .howtoBox02 p {
    font-family: "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝",serif;
    font-size: 20px;
	font-weight: bold;
    letter-spacing: 0.4em;
    line-height: 1.7em;
    margin: 80px 0;
	text-align: center;
	color: #FFF;
}
#visual .howtoBox02 .step {
	width: 980px;
	margin: 0 auto;
}
#visual .howtoBox02 .step .left {
	float: left;
	width: 480px;
	text-align: center;
}
#visual .howtoBox02 .step .right {
	border-left: 1px dashed #fff;
    float: right;
    padding: 30px 0 30px 50px;
    width: 440px;
}
#visual .howtoBox02 .step .right h1 {
	overflow: hidden;
}
#visual .howtoBox02 .step .right h1 .number {
	background-color: #fff;
    border-radius: 2px;
    color: #01aaf1;
    float: left;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
    padding: 10px;
    text-align: center;
}
#visual .howtoBox02 .step .right h1 p {
	font-family: inherit;
    font-size: 18px;
    letter-spacing: inherit;
    margin: 0;
    padding: 5px 0;
    text-align: left;
}
#visual .howtoBox02 .step .right p {
	color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: inherit;
    margin: 20px 0;
    text-align: left;
}
#visual .howtoBox02 .step .right p.arrow {
	background: url(../img/icon/icon_toparrow_left.png) no-repeat 0px 0px;
	background-size: 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: inherit;
    text-align: left;
	line-height: 21px;
	padding: 0 0 0 30px;
}
#visual .howtoBox02 .step .right p.arrow a {
	color: #FFF;
}
#visual .howtoBox02 .step .right p.arrow a:hover {
	border-bottom: 1px dotted #FFF;
}
#visual .howtoBox02 .arrow {
	margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    text-align: center;
    width: 980px;
}
#visual .howtoBox03 .top {
	background-color: #f5f5f5;
	width: 100%;
	padding: 50px 0;
}
#visual .howtoBox03 {
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
}
#visual .howtoBox03 .title {
	text-align: center;
}

#visual .howtoBox03 .link-box {
	width: 720px;
	margin: 50px auto 0;
	overflow: hidden;
}
#visual .howtoBox03 .link-box .inner {
	text-align: center;
	overflow: hidden;
}
#visual .howtoBox03 .link-box .left {
	background-color: #fff;
	border: 3px solid #01aaf1;
	border-radius: 4px;
    color: #01aaf1;
    float: left;
    padding: 20px 10px;
    width: 320px;
}
#visual .howtoBox03 .link-box .left small {
	font-size: 15px;
    color: #01aaf1;
}
#visual .howtoBox03 .link-box .left p {
	font-size: 18px;
	font-weight: bold;
    color: #01aaf1;
	line-height: 1.5em;
}
#visual .howtoBox03 .link-box .right {
	background-color: #fff;
	border: 3px solid #01aaf1;
	border-radius: 4px;
    color: #01aaf1;
    float: right;
    padding: 20px 10px;
    width: 320px;
}
#visual .howtoBox03 .link-box .right small {
	font-size: 15px;
    color: #01aaf1;
}
#visual .howtoBox03 .link-box .right p {
	font-size: 18px;
	font-weight: bold;
    color: #01aaf1;
	line-height: 1.5em;
}
#visual .howtoBox03 .link-box .center {
	background-color: #01aaf1;
	border: 3px solid #01aaf1;
    border-radius: 4px;
    overflow: hidden;
    padding: 20px 10px;
	clear: both;
}
#visual .howtoBox03 .link-box .center small {
	font-size: 15px;
    color: #FFF;
}
#visual .howtoBox03 .link-box .center p {
	font-size: 18px;
	font-weight: bold;
    color: #FFF;
	line-height: 1.5em;
}


#visual .howtoBox03 .dotline {
	width: 980px;
	margin: 10px auto;
	overflow: hidden;
}
#visual .howtoBox03 .stepBox {
	width: 980px;
	margin: 150px auto;
	overflow: hidden;
}
#visual .howtoBox03 .step {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
}
#visual .howtoBox03 .step h1 {
	font-size: 25px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 15px;
    overflow: hidden;
}
#visual .howtoBox03 .step .img_01 {
	margin: 0 0 20px;
}
#visual .howtoBox03 .step .left {
	float: left;
	width: 500px;
	text-align: center;
}
#visual .howtoBox03 .step .left img {
	border: 1px solid #DDD;
	padding: 5px;
}
#visual .howtoBox03 .step .right {
	border-left: 1px dashed #fff;
    float: right;
    padding: 0 0 30px 0;
    width: 440px;
}
#visual .howtoBox03 .step .right h1 {
	overflow: hidden;
}
#visual .howtoBox03 .step .right h1 .number {
    background-color: #01aaf1;
    border-radius: 2px;
    color: #fff;
    float: left;
    font-weight: bold;
    margin-right: 20px;
    padding: 5px 8px;
    text-align: center;
}
#visual .howtoBox03 .step .right h1 p {
	font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: inherit;
    margin: 0;
    text-align: left;
}
#visual .howtoBox03 .step .right p {
	color: #222;
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: inherit;
	line-height: 1.5em;
    margin: 20px 0 10px;
    text-align: left;
}
#visual .howtoBox03 .step .right p span.bold_hr {
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff66 60%) repeat scroll 0 0;
}
#visual .howtoBox03 .step .right .check {

}
#visual .howtoBox03 .step .right .check h2 {
background-color: #01aaf1;
    border-radius: 2px;
    color: #fff;
	margin: 20px 0 0;
    padding: 2px 5px;
    text-align: center;
    width: 100px;
}
#visual .howtoBox03 .step .right .check ul {
	padding: 5px 0;
}
#visual .howtoBox03 .step .right .check li {
	padding: 2px 0;
	color: #01aaf1;
	line-height: 1.3em;
}


#visual .howtoBox03 .step .right p.arrow {
	background: url(../img/icon/icon_toparrow_left.png) no-repeat 0px 0px;
	background-size: 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: inherit;
    text-align: left;
	line-height: 21px;
	padding: 0 0 0 30px;
}
#visual .howtoBox03 .step .right p.arrow a {
	color: #FFF;
}
#visual .howtoBox03 .step .right p.arrow a:hover {
	border-bottom: 1px dotted #FFF;
}
#visual .howtoBox03 .arrow {
	margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
    text-align: center;
    width: 980px;
}






#twoway {
	width: 100%;
	overflow: hidden;
	padding: 0 0 50px;
}
#twoway .twowayBox {
	width: 980px;
	margin: 0 auto 50px;
}
#twoway .twowayBox .title {
	text-align: center;
	margin: 0 0 80px;
}
#twoway .twowayBox .inner {
}

#twoway .twowayBox .inner .left {
	border-radius: 2px;
    border-right: 1px dashed #ccc;
    float: left;
    text-align: center;
    width: 480px;
}
#twoway .twowayBox .inner .left02 {
    float: left;
	text-align: center;
	width: 50%;
}
#twoway .twowayBox .inner .left02 img {
    width: 480px;
	border: 1px solid #DDD;
}
#twoway .twowayBox .inner .left p {
	border: 2px solid #01aaf1;
    border-radius: 40px;
    color: #01aaf1;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto 20px;
    padding: 15px 0;
    text-align: center;
    width: 200px;
}
#twoway .twowayBox .inner .left p.catch {
	border: medium none;
    color: #222;
    font-weight: normal;
    line-height: 1.7em;
    margin: 0;
    text-align: center;
    width: auto;
	border-radius: 0;
}
#twoway .twowayBox .inner .right {
	border-radius: 2px;
    float: right;
    text-align: center;
    width: 480px;
}
#twoway .twowayBox .inner .right02 {
    float: right;
	text-align: center;
	width: 50%;
}
#twoway .twowayBox .inner .right02 img {
    width: 480px;
	border: 1px solid #DDD;
}
#twoway .twowayBox .inner .right p {
	border: 2px solid #01aaf1;
    border-radius: 40px;
    color: #01aaf1;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto 20px;
    padding: 15px 0;
    text-align: center;
    width: 200px;
}
#twoway .twowayBox .inner .right p.catch {
	border: medium none;
    color: #222;
    font-weight: normal;
    line-height: 1.7em;
    margin: 0;
    text-align: center;
    width: auto;
	border-radius: 0;
}

#twoway_bottom {
	width: 100%;
	overflow: hidden;
	padding: 30px 0;
	background-color: #f9f9f9;
}
#twoway_bottom .btn {
	width: 980px;
	margin: 0 auto;
	text-align: center;
}

.arrow_box {
  display: none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #222;
  color: #FFF;
  text-align: center;
}
.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #222;
  border-width: 10px;
  pointer-events: none;
  content: " ";
}
span:hover + p.arrow_box {
  display: block;
}

#visual .topBox .title {
	width: 500px;
	margin: 0 auto;
}
#visual .topBox .title p {
	text-align: center;
	margin: 60px 0;
}
#visual .container .recipe {
	width: 980px;
	margin: 0 auto;
	padding: 80px 0;
}
#visual .container .recipe .title {
	text-align: center;
}
#visual .container .recipe .title img {
	text-align: center;
	width: 300px;
}
#visual .container .recipe .img {
	margin: 30px 0 0;
}
#visual .container .recipe .img img {
	text-align: center;
	width: 980px;
}
#visual .container .recipe .btn {
	text-align: center;
	width: 980px;
	margin: 30px 0 0;
}
#visual .container .shokulab {
	width: 980px;
	margin: 0 auto;
	padding: 80px 0;
}
#visual .container .shokulab img {
	text-align: center;
}
#visual .container .shokulab .inner {
	margin: 30px auto;
    text-align: center;
    width: 980px;
}
#visual .container .shokulab .inner img {
	margin: 0 10px;
    width: 200px;
}

/*mypage*/
#mypage {
	width: 100%;
	background-color: #f9f9f9;
	padding: 50px 0;
}
#mypage h1 {
	width: 980px;
	margin: 0 auto 10px;
	overflow: hidden;
}
#mypage .btn_go {
    border-bottom: 1px solid #ddd;
    margin: 0 auto 50px;
    padding-bottom: 50px;
    text-align: center;
    width: 980px;
}
#mypage .btn_go .btn_recipe {
	margin: 0;
}
#mypage .btn_go .btn_recipe img {
    width: 400px;
}
#mypage h1 p.title {
	border-left: 3px solid #222;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    padding-left: 15px;
}
#mypage h1 p.title span.p_mini {
	font-size: 12px;
	color: #999;
	letter-spacing: 2px;
	font-weight: normal;
}
#mypage .inner {
	width: 980px;
	margin: 0 auto;
}
#mypage .inner .box table {
	width: 960px;
	border-collapse: collapse;
}
#mypage .inner .box table td {
	background-color: #FFF;
	padding: 5px 10px;
	border: 1px solid #DDD;
	line-height: 1.3em;
}
#mypage .inner .box table td.img {
	text-align: center;
}
#mypage .inner .box table td.img img {
	height: 39px;
	border: 1px solid #DDD;
	border-radius: 2px;
}
#mypage .inner .box table td.kcal {
	font-weight: bold;
	text-align: center;
}
#mypage .inner .box table td.kcal span.kcal {
	font-weight: normal;
	font-size: 12px;
}
#mypage .inner .box table td.recipename {
	font-size: 14px;
}
#mypage .inner .box table td.day {
	text-align: center;
	color: #999;
	font-size: 12px;
}
#mypage .inner .box table td.icon {
	background-color: #f9f9f9;
}
#mypage .inner .box table td.title {
	padding: 5px;
	background-color: #f1f1f1;
	font-size: 13px;
	text-align: center;
	color: #666;
}
#mypage .inner .box table td.title02 {
	padding: 5px;
	font-size: 13px;
	text-align: center;
	color: #666;
	background: -moz-linear-gradient(top, #FFF, #DDD);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
}
#mypage .inner .box table td.delete {
	text-align: center;
}
#mypage .inner .box table td.delete a {
	color: #fff;
}
#mypage .userinfo {
	width: 100%;
	background: #f9f9f9;
	overflow: hidden;
	padding: 50px 0 0;
}
#mypage .userinfo .inner {
	margin: 0 auto;
}
#mypage .userinfo .inner .left {
	float: left;
	width: auto;
}
#mypage .userinfo .inner .left .icon {
}
#mypage .userinfo .inner .left .icon img {
	border-radius: 50px;
	border: 1px solid #DDD;
	margin-right: 30px;
	padding: 20px;
	background-color: #FFF;
	width: 120px;
}
#mypage .userinfo .inner .right {
	float: left;
}
#mypage .userinfo .inner .right .name01 {
	font-size: 30px;
    font-weight: bold;
    line-height: 30px;
}
#mypage .userinfo .inner .right .name02 {
	background: url(../img/icon/icon_shop.png) no-repeat 0px 0px;
	background-size: 20px;
    color: #666;
    font-size: 16px;
    margin: 20px 0 0;
	padding-left: 25px;
}
#mypage .userinfo .inner .right .name02 span.url {
	background-color: #f1f1f1;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
    padding: 3px 15px;
}
#mypage .userinfo .inner .right .name02 span.url a {
	color: #222;
}
#mypage .userinfo .inner .right .name02 span.url a:hover {
	color: #666;
}
#mypage .registinfo {
	width: 980px;
	margin: 0 auto;
}
#mypage .registinfo table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	border-spacing: 1px;
	background-color: #FFFFFF;
}
#mypage .registinfo table td {
	padding: 8px;
	border: 1px solid #DDD;
}
#mypage .registinfo table td.title {
	background-color: #EEEEEE;
	font-weight: bold;
}

#mypage .registinfo table td .title {
	float: left;
    font-weight: bold;
}
#mypage .registinfo table td .attention {
	font-size: 12px;
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    height: 22px;
    line-height: 22px;
	margin-left: 20px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#mypage .registinfo table td .non_attention {
	font-size: 12px;
	background-color: #DDD;
    border-radius: 2px;
    color: #666;
    float: right;
    height: 22px;
    line-height: 22px;
	margin-left: 20px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#mypage .registinfo table td input {
}
#mypage .registinfo table td .imgInput {
	text-align: center;
}
#mypage .registinfo table td .imgInput img {
	border-radius: 50px;
	border: 1px solid #DDD;
	margin: 10px 0;
	padding: 20px;
	background-color: #FFF;
	width: 120px;
}
#mypage .registinfo table td input[type="file"] {
    border: 1px solid #ddd;
    padding: 10px;
    width: 640px;
	background-color: #EEE;
}
#mypage .btn_bottom {
	border-top: 1px dashed #ddd;
    margin: 0 auto 50px;
    overflow: hidden;
    padding: 20px 0 0;
    width: 980px;
}
#mypage .btn_bottom .btn_left {
	float:left;
}
#mypage .btn_bottom .btn_right {
	text-align: center;
}
#mypage .btn {
    background-color: #f9f9f9;
    margin: 0 auto;
    width: 100%;
}
#mypage .btn_mini {
    margin: 0 auto;
    width: 100%;
	overflow: hidden;
	clear: both;
}
#mypage .btn .inner {
	height: 50px;
    margin: 0 auto;
    text-align: right;
    width: 980px;
}

/*pagetitle*/
#pagetitle {
	width: 100%;
	overflow: hidden;
}
#pagetitle .inner {
	width: 980px;
	margin: 0 auto;
}
#pagetitle .inner .title {
	float: left;
    font-size: 30px;
    font-weight: bold;
    height: 32px;
    letter-spacing: 10px;
}
#pagetitle .inner .title p {
	float: left;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 3px 0 0;
}
#pagetitle .inner .title span.step{
	background-color: #01AAF1;
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    margin-right: 15px;
    padding: 5px 10px;
	float: left;
}
#pagetitle .inner p.info{
	color: #999;
    float: right;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 16px;
    padding: 5px 0 0;
}

/*preview_header*/
#preview_header {
	border-top: 5px solid #222;
    margin: 0 auto;
    width: 750px;
}
#preview_header {
	border-top: 5px solid #222;
    margin: 0 auto;
    width: 750px;
}
#preview_header .inner .tab  {
	background-color: #222;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 3px 0 5px;
    text-align: center;
    width: 200px;
}
#preview_header .inner .tab p {
	color: #FFF;
	font-size: 12px;
}
#preview_header .inner .name  {
	float: left;
    font-size: 11px;
    left: 210px;
    position: relative;
    top: -24px;
}

/*preview_title*/
#sheetBox {
    background-color: #f5f5f5;
    margin: 0 auto 50px;
    overflow: hidden;
    width: 750px;
}
#sheetBox_w {
	background-color: #fff;
	margin: 5px;
}
#previewmini_title {
}
#previewmini_title h1 {
	font-size: 25px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    padding: 40px 0;
    text-align: center;
}
#previewmini_title h2 {
	font-size: 13px;
    padding: 0 30px;
}
#previewmini_kcal {
	padding: 10px 30px;
	border-bottom: 5px solid #000;
}
#previewmini_kcal .inner {
	text-align: right;
}
#previewmini_kcal span.kcal {
	font-size: 20px;
	font-weight: bold;
}
#previewmini_eiyo {
	margin: 10px;
    overflow: hidden;
    position: relative;
}
#previewmini_eiyo .leftbox {
	float: left;
	overflow: hidden;
	width: 48%;
}
#previewmini_eiyo .maintitle .title {
	background: url(../img/icon/preview_h1.png) no-repeat 0px 0px;
	background-size: 20px;
	overflow: hidden;
	padding-left: 30px;
	border-bottom: 2px solid #222;
	margin-bottom: 10px;
}
#previewmini_eiyo .maintitle .sub {
	text-align: right;
	font-size: 12px;
}
#previewmini_eiyo .rightbox {
	float: right;
	overflow: hidden;
	width: 48%;
}
#previewmini_eiyo .rightbox .inner {
	margin: 0 0 5px;
	overflow: hidden;
}
#previewmini_eiyo .rightbox .left {
	background-color: #ddd;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    box-shadow: 0 2px #ddd;
    height: 90px;
    padding: 5px;
    width: 100px;
	float: left;
}
#previewmini_eiyo .rightbox .left .icon {
	margin: 15px 0 0;
    text-align: center;
}
#previewmini_eiyo .rightbox .left .icon img {
	width: 70px;
}
#previewmini_eiyo .rightbox .left .effect {
	font-weight: bold;
    margin: 5px 0 0;
    text-align: center;
}
#previewmini_eiyo .rightbox .right {
	background-color: #f9f9f9;
    box-shadow: 0 4px #ddd;
    height: 90px;
    padding: 5px 10px;
    width: 215px;
	float: right;
}
#previewmini_eiyo .rightbox .right .mini_title {
	background: rgba(0, 0, 0, 0) url("../img/icon/preview_check.png") no-repeat scroll 0 3px / 15px auto;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0;
    padding-left: 20px;
}
#previewmini_eiyo .rightbox .right .recipeeiyo {
	overflow: hidden;
}
#previewmini_eiyo .rightbox .right .recipeeiyo p.eiyo {
	background-color: #ddd;
    text-align: center;
    width: 100px;
	border-radius: 10px;
	float: left;
	font-size: 12px;
	margin-right: 10px;
}
#previewmini_eiyo .rightbox .right .recipeeiyo p.g {
	font-size: 12px;
}
#previewmini_eiyo .rightbox .right .food {
	font-size: 12px;
}
#sheetfooter {
	background-color: #EEE;
	margin: 0 auto;
}
#sheetfooter .inner {
	text-align: center;
	padding: 2px 0;
}
#sheetfooter .inner p {
	font-size: 12px;
}

#preview_title {
	width: 750px;
	margin: 0 auto;
}
#preview_kcal {
	float: right;
}
#preview_kcal p {
	font-size: 14px;
}
#preview_kcal p span.main {
	font-size: 25px;
	font-weight: bold;
}
.sheettitlebox {
	margin: 30px 0 0;
}
.sheettitle {
    width: 750px;
	overflow: hidden;
	height: 25px;
	line-height: 25px;
}
.sheettitle .left {
	float: left;
}
.sheettitle .left p {
	font-size: 20px;
	font-weight: bold;
	color: #026bb4;
}
.sheettitle .right {
	float: left;
}
.sheettitle .right p {
	background-color: #026bb4;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    margin-left: 10px;
    padding: 2px;
    text-align: center;
    width: 40px;
}
.titleinfo {
	background-color: #cce9fc;
    border-radius: 4px;
    margin: 5px 0 20px;
    padding: 8px 0;
    position: relative;
    text-align: center;
}
.titleinfo_blue {
	background-color: #026bb4;
    height: 20px;
    margin: 0 auto 20px;
    padding: 10px 0;
    width: 770px;
}
.triangle {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #cce9fc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.triangle_blue {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #026bb4;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


.titleinfo p {
	color: #000;
    font-size: 14px;
}



#sheet_photo .upload {
	border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
    padding: 10px;
}
#sheet_photo .upload p {
	font-size: 12px;
	color: #999;
}
#sheet_photo .kcal {
	background-color: #222;
	padding: 10px;
	overflow: hidden;
}
#sheet_photo .kcal .left {
	float: left;
}
#sheet_photo .kcal .left p {
	background: url(../img/icon/preview_kcal.png) no-repeat 0px 2px;
	background-size: 20px;
	color: #FFF;
	padding-left: 35px;
	height: 25px;
	line-height: 25px;
}
#sheet_photo .kcal .right {
	float: right;
}


#sheet_photo {
	width: 750px;
	margin: 0 auto;
}
#sheet_photo .leftbox {
	float: left;
	width: 48%;
}
#sheet_photo .foodphoto {
	background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 240px;
    overflow: hidden;
}
#sheet_photo .foodphoto img {
	position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}




#sheet_photo .rightbox {
	float: right;
	width: 48%;
}
#sheet_photo .rightbox .eiyotitle {
	border-bottom: 1px solid #222;
    overflow: hidden;
    padding-bottom: 2px;
}
#sheet_photo .rightbox .eiyotitle {
	border-bottom: 1px solid #222;
	overflow: hidden;
    padding-bottom: 10px;
}
#sheet_photo .rightbox .eiyotitle .title {
	background: url(../img/icon/preview_eiyotitle.png) no-repeat 0px 0px;
	background-size: 20px;
}
#sheet_photo .rightbox .eiyotitle .title p {
    font-size: 16px;
    font-weight: bold;
    padding-left: 30px;
}
#sheet_photo .rightbox .eiyotitle .left {
	float: left;
}
#sheet_photo .rightbox .eiyotitle .left p {
	height: 35px;
    line-height: 35px;
    text-align: right;
    width: 240px;
}
#sheet_photo .rightbox .eiyotitle .right {
	float: right;
}


/*sheet_photo_c*/
#sheet_photo_c .rightbox {
}
#sheet_photo_c .rightbox .eiyotitle {
	border-bottom: 1px solid #222;
    overflow: hidden;
    padding-bottom: 2px;
}
#sheet_photo_c .rightbox .eiyotitle {
	border-bottom: 1px solid #222;
	overflow: hidden;
    padding-bottom: 10px;
}
#sheet_photo_c .rightbox .eiyotitle .title {
	background: url(../img/icon/preview_eiyotitle.png) no-repeat 0px 0px;
	background-size: 20px;
}
#sheet_photo_c .rightbox .eiyotitle .title p {
    font-size: 16px;
    font-weight: bold;
    padding-left: 30px;
}
#sheet_photo_c .rightbox .eiyotitle .left {
	float: left;
}
#sheet_photo_c .rightbox .eiyotitle .left p {
	height: 30px;
    line-height: 30px;
    text-align: right;
    width: 660px;
}
#sheet_photo_c .rightbox .eiyotitle .right {
	float: right;
}

#preview_title h1 {
	font-size: 25px;
	line-height: 30px;
    font-weight: bold;
	margin: 40px 0;
    text-align: center;
}
#preview_title h1.nomal {
	font-family: inherit;
}
#preview_title .comment {
	background-color: #f5f5f5;
	margin: 20px 0;
	padding: 30px 100px;
}
#preview_title .comment p {
	font-size: 12px;
	line-height: 1.5em;
}
#preview_title h2 {
	font-size: 14px;
	float: left;
}

/*preview_photo*/
#preview_photo {
	width: 750px;
	margin: 30px auto 0;
}
#preview_photo .foodphoto {
	width: 750px;
    height: 350px;
    overflow: hidden;
    background-color: #f9f9f9;
    border: 1px solid #DDD;
}
#preview_photo .foodphoto img {
	position: relative;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#preview_photo .k_s {
	background: url(../img/icon/preview_ks.png) no-repeat 10px 18px;
	background-size: 25px;
    float: right;
    overflow: hidden;
    padding: 8px 15px;
    position: relative;
    top: -90px;
    width: 210px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	margin-bottom: -90px;
	background-color: rgba(221,221,221,0.5);
	height: 40px;
}
#preview_photo .k_s .kcal {
	float: left;
	font-weight: bold;
	font-size: 18px;
	padding-left: 40px;
	padding-top: 12px;
}
#preview_photo .k_s .kcal span.mini {
	font-size: 10px;
	font-weight: normal;
}
#preview_photo .k_s .sugar {
    float: left;
    font-size: 18px;
    font-weight: bold;
	padding-left: 10px;
	padding-top: 12px;
}
#preview_photo .k_s .sugar span.mini {
	font-size: 10px;
	font-weight: normal;
}
#preview_photo .k_s .info {
	text-align: center;
	font-size: 8px;
	padding: 0;
}

/*preview_bottom*/
#preview_bottom {
	margin: 20px auto 0;
    overflow: hidden;
    width: 100%;
	clear: both;
	position: relative;
}
#preview_bottom .inner {
	width: 750px;
	margin: 0 auto;
}

#preview_bottom .left {
	float: left;
	width: 48%;
}
<<<<<<< .mine
#preview_bottom .photo img {
	width: 100%;
}
#preview_bottom .photoinfo {
	background-color: #222;
	margin: 0;
	padding: 8px;
	overflow: hidden;
}
#preview_bottom .photoinfo p {
	height: 22px;
	line-height: 22px;
	color: #FFF;
}
#preview_bottom .photoinfo .left {
	float: left;
}
#preview_bottom .photoinfo .left p {
	background: url(../img/icon/preview_kcal.png) no-repeat 0px 2px;
	background-size: 20px;
	font-size: 18px;
	text-align:right;
	width: 100px;
}
#preview_bottom .photoinfo .left p span.kcal {
	font-size: 10px;
}
#preview_bottom .photoinfo .right {
	float: right;
}
#preview_bottom .photoinfo .right p {
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 12px;
	text-align: right;
}
#preview_bottom .right {
	float: right;
	width: 48%;
}
#preview_bottom .right .eiyotitle {
	border-bottom: 1px solid #222;
	overflow: hidden;
    padding-bottom: 2px;
}
#preview_bottom .right .eiyotitle p {
}
#preview_bottom .right .eiyotitle .left {
	background: url(../img/icon/preview_eiyotitle.png) no-repeat 0px 0px;
	background-size: 20px;
}
#preview_bottom .right .eiyotitle .left p {
    padding-left: 25px;
}
#preview_bottom .right .eiyotitle .right {
	float: right;
}
#preview_bottom .right .eiyotitle .right p {
	font-size: 10px;
	text-align: right;
}

/*preview_topthree*/
#preview_topthree {
	margin: 10px auto 0;
    overflow: hidden;
    width: 100%;
	clear: both;
	position: relative;
}
#preview_topthree .p_title {
    margin: 10px 0 0;
    overflow: hidden;
    padding-bottom: 3px;
}
#preview_topthree .p_title p {
}
#preview_topthree .p_title .left {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	padding-left: 30px;
    width: 200px;
	float: left;
}
#preview_topthree .p_title .right {
	float: right;
}
#preview_topthree .p_title .right p {
	font-size: 10px;
}
#preview_topthree .threebox_lr p {
}
#preview_topthree .threebox_lr {
	background-color: #c4dd8d;
    height: 270px;
    margin: 5px 0;
    padding: 20px 5px;
    text-align: center;
    width: 32%;
	float: left;
}
#preview_topthree .threebox_lr .top {
	background-color: #FFF;
    height: 120px;
    width: 120px;
	margin: 0 auto 10px;
	border-radius: 60px;
}
#preview_topthree .threebox_lr .top img {
	padding: 20px 0 0;
    width: 50%;
}
#preview_topthree .threebox_lr .top .maineffect {
	font-size: 12px;
}
#preview_topthree .threebox_lr .bottom .subeffect {
	font-weight: bold;
	font-size: 16px;
	padding: 5px 0;
}
#preview_topthree .threebox_lr .bottom .subinfo {
	font-size: 10px;
    height: 30px;
    line-height: 1.5em;
    padding: 10px 5px;
    text-align: left;
}
#preview_topthree .threebox_lr .bottom .eiyo {
	background-color: #9acea6;
    border-radius: 20px;
    color: #416549;
    font-size: 11px;
    margin: 10px auto 0;
    padding: 0;
    width: 130px;
}
#preview_topthree .threebox_lr .bottom .eiyoinfo {
	font-size: 10px;
}
#preview_topthree .threebox_lr .bottom .food {
	font-size: 12px;
}

#preview_food .listbox {
	background-color: #f5f5f5;
	margin: 5px 0;
	padding: 20px;
}
#preview_food .listbox p {
	font-size: 12px;
	line-height: 1.5em;
}

#allergy_food .listbox {
	background-color: #f5f5f5;
	margin: 5px 0;
	padding: 20px;
}
#allergy_food .listbox p {
	font-size: 12px;
	line-height: 1.5em;
}


#listbox {
	overflow: hidden;
}
#listbox .inner {
	width: 48%;
	float: left;
	margin: 0 15px 15px 0;
}
#listbox .top {
	margin: 20px 0;
}
#listbox .top p {
	text-align: center;
    width: 100%;
	font-size: 10px;
}
#listbox .top .title {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	padding-left: 30px;
	border-bottom: 1px solid #222;
	padding-bottom: 3px;
}
#listbox .top .left {
	float: left;
	margin: 10px 0;
	width: 48%;
}
#listbox .top .imgcompare {
	border: 1px solid #ddd;
    margin: 10px 0;
    padding: 5px 10px;
    width: 340px;
}
#listbox .top .left img {
	width: 170px;
	height: 120px;
}
#listbox .top .right {
	float: right;
	width: 48%;
	margin: 7px 0;
}
#listbox .top .right table {
	width: 100%;
}
#listbox .top .right td {
	text-align: center;
	font-size: 10px;
	width: 50px;
}
#listbox .top .right td.eiyo_s {
	background-color: #eba5c6;
	color: #7b4960;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_t {
	background-color: #f3b334;
	color: #805c25;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_f {
	background-color: #cdbcd6;
	color: #615068;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_v {
	background-color: #9acea6;
	color: #416549;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_m {
	background-color: #a6cee5;
	color: #496476;
	border-radius: 10px;
}
#listbox .top .right td.g {
	font-size: 12px;
	text-align: right;
}

#listbox .bottom {
	overflow: hidden;
	clear: both;
}
#listbox .bottom table {
	width: 100%;
}
#listbox .bottom td {
	font-size: 10px;
	padding: 2px 5px;
}
#listbox .bottom td.eiyo {
	width: 30%;
	background-color: #c4dd8d;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
#listbox .bottom td.eiyo_info {
	width: 20%;
	background-color: #d8e8b3;
	text-align: center;
}
#listbox .bottom td.effect {
	width: 50%;
	background-color: #f5f5f5;
	text-align: center;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}





=======
#preview_bottom .photo img {
	width: 100%;
}
#preview_bottom .photoinfo {
	background-color: #222;
	margin: 0;
	padding: 8px;
	overflow: hidden;
}
#preview_bottom .photoinfo p {
	height: 22px;
	line-height: 22px;
	color: #FFF;
}
#preview_bottom .photoinfo .left {
	float: left;
}
#preview_bottom .photoinfo .left p {
	background: url(../img/icon/preview_kcal.png) no-repeat 0px 2px;
	background-size: 20px;
	font-size: 18px;
	text-align:right;
	width: 100px;
}
#preview_bottom .photoinfo .left p span.kcal {
	font-size: 10px;
}
#preview_bottom .photoinfo .right {
	float: right;
}
#preview_bottom .photoinfo .right p {
	font-size: 12px;
	text-align: right;
}
#preview_bottom .right {
	float: right;
	width: 48%;
}
#preview_bottom .right .eiyotitle {
	border-bottom: 1px solid #222;
	overflow: hidden;
    padding-bottom: 2px;
}
#preview_bottom .right .eiyotitle p {
}
#preview_bottom .right .eiyotitle .left {
	background: url(../img/icon/preview_eiyotitle.png) no-repeat 0px 0px;
	background-size: 20px;
}
#preview_bottom .right .eiyotitle .left p {
    padding-left: 25px;
}
#preview_bottom .right .eiyotitle .right {
	float: right;
}
#preview_bottom .right .eiyotitle .right p {
	font-size: 10px;
	text-align: right;
}

/*preview_topthree*/
#preview_topthree {
	margin: 10px auto 0;
    overflow: hidden;
    width: 100%;
	clear: both;
	position: relative;
}
#preview_topthree .p_title {
    margin: 10px 0 0;
    overflow: hidden;
    padding-bottom: 3px;
}
#preview_topthree .p_title p {
	font-size: 16px;
    font-weight: bold;
}
#preview_topthree .p_title .left {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	padding-left: 30px;
    width: 200px;
	float: left;
}
#preview_topthree .p_title .right {
	float: right;
}
#preview_topthree .p_title .right p {
	font-size: 10px;
}

#preview_topthree .threebox_lr p {
}
#preview_topthree .threebox_lr {
	background-color: #c4dd8d;
    height: 280px;
    margin: 5px 0;
    padding: 10px 5px;
    text-align: center;
    width: 32%;
	float: left;
}
#preview_topthree .threebox_lr .top {
	background-color: #FFF;
    height: 120px;
    width: 120px;
	margin: 0 auto 10px;
	border-radius: 60px;
}
#preview_topthree .threebox_lr .top img {
	padding: 20px 0 0;
    width: 50%;
}
#preview_topthree .threebox_lr .top .maineffect {
	font-size: 13px;
    font-weight: bold;
}
#preview_topthree .threebox_lr .bottom .subeffect {
	font-weight: bold;
	font-size: 16px;
	padding: 5px 0;
}
#preview_topthree .threebox_lr .bottom .subinfo {
	font-size: 12px;
    height: 30px;
    line-height: 1.5em;
    padding: 10px 5px;
    text-align: left;
}
#preview_topthree .threebox_lr .bottom .eiyo {
	background-color: #9acea6;
    border-radius: 20px;
    color: #416549;
    font-size: 12px;
    margin: 10px auto 0;
    padding: 0;
    width: 130px;
}
#preview_topthree .threebox_lr .bottom .eiyoinfo {
	font-size: 10px;
}
#preview_topthree .threebox_lr .bottom .food {
	font-size: 12px;
}


#preview_food {
	margin: 20px 0 0;
    overflow: hidden;
}
#preview_food .p_title {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
    background-size: 20px;
    padding-left: 30px;
    width: 200px;
}
#preview_food .p_title .left p {
	font-size: 16px;
    font-weight: bold;
}


#allergy_food {
	margin: 20px 0 0;
    overflow: hidden;
}
#allergy_food .p_title {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
    background-size: 20px;
    padding-left: 30px;
    width: 200px;
}
#allergy_food .p_title .left p {
	font-size: 16px;
    font-weight: bold;
}


/*preview_topthree_c .threebox_lr*/
#preview_topthree_c .threebox_lr {
	background-color: #c4dd8d;
    height: 280px;
    margin: 5px 0;
    padding: 10px 5px;
    text-align: center;
    width: 32%;
	float: left;
}
#preview_topthree_c .threebox_lr .top {
	background-color: #FFF;
    height: 120px;
    width: 120px;
	margin: 0 auto 10px;
	border-radius: 60px;
}
#preview_topthree_c .threebox_lr .top img {
	padding: 20px 0 0;
    width: 50%;
}
#preview_topthree_c .threebox_lr .top .maineffect {
	font-size: 12px;
}
#preview_topthree_c .threebox_lr .bottom .subeffect {
	font-weight: bold;
	font-size: 16px;
	padding: 5px 0;
}
#preview_topthree_c .threebox_lr .bottom .subinfo {
	font-size: 10px;
    height: 30px;
    line-height: 1.5em;
    padding: 10px 5px;
    text-align: left;
}
#preview_topthree_c .threebox_lr .bottom .eiyo {
	background-color: #9acea6;
    border-radius: 20px;
    color: #416549;
    font-size: 11px;
    margin: 10px auto 0;
    padding: 0;
    width: 130px;
}
#preview_topthree_c .threebox_lr .bottom .eiyoinfo {
	font-size: 10px;
}
#preview_topthree_c .threebox_lr .bottom .food {
	font-size: 12px;
}





/*preview_bottom_c*/
#preview_bottom_c  {
	width: 100%;
}
#preview_bottom_c .right h1 {
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
    font-weight: bold;
	padding-left: 30px;
	border-bottom: 1px solid #222;
}
#preview_bottom_c .right .effect .inner {
	width: 100%;
	overflow: hidden;
	margin: 3px 0 0;
}
#preview_bottom_c .right .effect .inner .left {
	background-color: #fde9d2;
	border-right: 1px solid #fde9d2;
    border-top: 1px solid #fde9d2;
	border-bottom: 1px solid #fde9d2;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    height: 90px;
    padding: 5px;
    width: 100px;
}
#preview_bottom_c .right .effect .inner .left .icon {
	text-align: center;
}
#preview_bottom_c .right .effect .inner .left .icon img {
	width: 60px;
}
#preview_bottom_c .right .effect .inner .left .title {
	text-align: center;
	font-weight: bold;
	margin: 0;
	font-size: 12px;
}
#preview_bottom_c .right .effect .inner .right {
	border-right: 1px solid #fde9d2;
    border-top: 1px solid #fde9d2;
	border-bottom: 1px solid #fde9d2;
    padding: 5px 10px;
    width: 227px;
	height: 90px;
}
#preview_bottom_c .right .effect .inner .right .mini_title p {
	background: url(../img/icon/preview_check.png) no-repeat 0px 3px;
	background-size: 15px;
	font-size: 13px;
	font-weight: bold;
	margin: 8px 0;
	padding-left: 20px;
	color: #f15a24;
}
#preview_bottom_c .right .effect .inner .right .maineiyo p {
	font-size: 11px;
	font-weight: bold;
}
#preview_bottom_c .right .effect .inner .right .maineiyo p.eiyo {
	font-size: 11px;
	font-weight: normal;
	line-height: 16px;
}
#preview_bottom_c .right .effect .inner .right .recipeeiyo p {
	font-size: 10px;
    font-weight: bold;
}
#preview_bottom_c .right .effect .inner .right .recipeeiyo table {
	width: 100%;
}
#preview_bottom_c .right .effect .inner .right .recipeeiyo td {
	font-size: 10px;
	line-height: 1.3em;
}
#preview_bottom_c .right .effect .inner .right .recipeeiyo td.eiyo_title {
	border-radius: 2px;
	margin: 0;
	padding: 0;
	width: 50%;
	line-height: 20px;
}
#preview_bottom_c .eiyotitle {
	border-bottom: 1px solid #222;
    padding: 20px 0 10px;
	overflow: hidden;
	clear: both;
}
#preview_bottom_c .eiyotitle p {
	font-size: 20px;
	font-weight: bold;
}
#preview_bottom_c .eiyotitle .left {
	background: url(../img/icon/preview_eiyotitle.png) no-repeat 0px 0px;
	background-size: 20px;
}
#preview_bottom_c .eiyotitle .left p {
    padding-left: 25px;
}
#preview_bottom_c .eiyotitle .right {
	float: right;
}
#preview_bottom_c .eiyotitle .right p {
	font-size: 10px;
	text-align: right;
}
#preview_bottom_c .chartbox {
	width: 100%;
	background-color: #FFF;
}

/*preview_topthree_c*/
#preview_topthree_c {
	margin: 30px auto 0;
    overflow: hidden;
    width: 100%;
	clear: both;
	position: relative;
}
#preview_topthree_c .p_title {
    margin: 10px 0 0;
    overflow: hidden;
    padding-bottom: 3px;
}
#preview_topthree_c .p_title p {
	font-size: 20px;
	font-weight: bold;
}
#preview_topthree_c .p_title .left {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	padding-left: 30px;
	float: left;
}
#preview_topthree_c .p_title .right {
	float: right;
}
#preview_topthree_c .p_title .right p {
	font-size: 14px;
}
#preview_topthree_c .threebox_lr {
	background-color: #c4dd8d;
    float: left;
    height: 230px;
    margin: 5px 0;
    padding: 30px 5px;
    text-align: center;
    width: 32%;
}
#preview_topthree_c .threebox_lr .top {
	background-color: #FFF;
    height: 120px;
    width: 120px;
	margin: 0 auto 10px;
	border-radius: 60px;
}
#preview_topthree_c .threebox_lr .top img {
	padding: 20px 0 0;
    width: 50%;
}
#preview_topthree_c .threebox_lr .top .maineffect {
	font-size: 13px;
	font-weight: bold;
}
#preview_topthree_c .threebox_lr .bottom .subeffect {
	font-weight: bold;
	font-size: 18px;
	padding: 5px 0;
}
#preview_topthree_c .threebox_lr .bottom .subinfo {
	font-size: 10px;
    height: 30px;
    line-height: 1.5em;
    padding: 10px 5px;
    text-align: left;
}
#preview_topthree_c .threebox_lr .bottom .eiyo {
	background-color: #9acea6;
    border-radius: 20px;
    color: #416549;
    font-size: 14px;
    margin: 10px auto 0;
    padding: 2px 0;
    width: 130px;
	font-weight: bold;
}
#preview_topthree_c .threebox_lr .bottom .eiyoinfo {
	font-size: 14px;
}
#preview_topthree_c .threebox_lr .bottom .food {
	font-size: 16px;
    padding: 5px 0 0;
}


#preview_food .listbox {
	background-color: #f5f5f5;
	margin: 5px 0;
	padding: 20px;
}
#preview_food .listbox p {
	font-size: 12px;
	line-height: 1.5em;
}


#allergy_food .listbox {
	background-color: #f5f5f5;
	margin: 5px 0;
	padding: 20px;
}
#allergy_food .listbox p {
	font-size: 12px;
	line-height: 1.5em;
}


#listbox {
	overflow: hidden;
}
#listbox .inner {
	width: 32%;
	float: left;
	margin: 0 10px 0 0;
}
#listbox .top {
	margin: 20px 0;
}
#listbox .top p {
	font-size: 12px;
    font-weight: bold;
    padding: 2px 0;
    text-align: left;
    width: 100%;
}
#listbox .top .title {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	padding-left: 30px;
	border-bottom: 1px solid #222;
	padding-bottom: 3px;
}
#listbox .top .left {
	float: left;
	margin: 10px 0 5px;
	width: 48%;
}
#listbox .top .imgcompare {
	border: 1px solid #ddd;
    margin: 10px 0;
    padding: 5px 10px;
    width: 340px;
}
#listbox .top .left img {
	width: 110px;
	height: 80px;
	border: 1px solid #DDD;
}
#listbox .top .right {
	float: right;
	width: 50%;
	margin: 10px 0 5px;
}
#listbox .top .right table {
	width: 100%;
}
#listbox .top .right td {
	font-size: 10px;
    padding: 3px 5px;
    text-align: left;
    width: 50px;
}
#listbox .top .right td.effect {
	background-color: #EEE;
	color: #000;
	border-radius: 2px;
}
#listbox .top .right td.eiyo_s {
	background-color: #eba5c6;
	color: #000;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_t {
	background-color: #f3b334;
	color: #000;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_f {
	background-color: #cdbcd6;
	color: #000;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_v {
	background-color: #9acea6;
	color: #000;
	border-radius: 10px;
}
#listbox .top .right td.eiyo_m {
	background-color: #a6cee5;
	color: #000;
	border-radius: 10px;
}
#listbox .top .right td.g {
	font-size: 12px;
	text-align: right;
}

#listbox .bottom {
	overflow: hidden;
	clear: both;
}
#listbox .bottom p {
	font-size: 10px;
	line-height: 1.3em;
}
#listbox .bottom table {
	width: 100%;
}
#listbox .bottom td {
	font-size: 10px;
	padding: 2px 5px;
}
#listbox .bottom td.eiyo {
	width: 30%;
	background-color: #c4dd8d;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
#listbox .bottom td.eiyo_info {
	width: 20%;
	background-color: #d8e8b3;
	text-align: center;
}
#listbox .bottom td.effect {
	width: 50%;
	background-color: #f5f5f5;
	text-align: center;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

#preview_bottom .left .eiyo {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
	overflow: hidden;
}
#preview_bottom .left .eiyo p.title {
	background: rgba(0, 0, 0, 0) url("../img/icon/preview_food.png") no-repeat scroll 0 0 / 20px auto;
    font-size: 16px;
    font-weight: bold;
	padding-left: 30px;
	float: left;
}
#preview_bottom .left .eiyo p.sub {
	font-size: 11px;
	float: right;
}
#preview_bottom .left .comment h1 {
	background: url(../img/icon/preview_h1.png) no-repeat 0px 0px;
	background-size: 20px;
	border-bottom: 2px solid #222;
    font-size: 10px;
    font-weight: bold;
	padding-left: 30px;
}
#preview_bottom .left .comment .inner {
	width: 100%;
	overflow: hidden;
}
#preview_bottom .left .comment .inner .left {
	float: left;
	padding: 10px 0;
	width: 48%;
}
#preview_bottom .left .comment .inner img {
	border: 1px solid #DDD;
	border-radius: 2px;
}
#preview_bottom .left .comment .inner .right {
	float: right;
    font-size: 10px;
    line-height: 16px;
    padding: 10px 0;
	width: 52%;
}
#preview_bottom .right {
	float: right;
	width: 48%;
}
#preview_bottom .right h1 {
	background: url(../img/icon/preview_food.png) no-repeat 0px 0px;
	background-size: 20px;
    font-weight: bold;
	padding-left: 30px;
	border-bottom: 1px solid #222;
}
#preview_bottom .right .effect .inner {
	width: 100%;
	overflow: hidden;
	margin: 3px 0 0;
}
#preview_bottom .right .effect .inner .left {
	background-color: #fde9d2;
	border-right: 1px solid #fde9d2;
    border-top: 1px solid #fde9d2;
	border-bottom: 1px solid #fde9d2;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    height: 90px;
    padding: 5px;
    width: 100px;
}
#preview_bottom .right .effect .inner .left .icon {
	text-align: center;
}
#preview_bottom .right .effect .inner .left .icon img {
	width: 60px;
}
#preview_bottom .right .effect .inner .left .title {
	text-align: center;
	font-weight: bold;
	margin: 0;
	font-size: 12px;
}
#preview_bottom .right .effect .inner .right {
	border-right: 1px solid #fde9d2;
    border-top: 1px solid #fde9d2;
	border-bottom: 1px solid #fde9d2;
    padding: 5px 10px;
    width: 227px;
	height: 90px;
}
#preview_bottom .right .effect .inner .right .mini_title p {
	background: url(../img/icon/preview_check.png) no-repeat 0px 3px;
	background-size: 15px;
	font-size: 14px;
	font-weight: bold;
	margin: 8px 0;
	padding-left: 20px;
	color: #1d1d1d;
}
#preview_bottom .right .effect .inner .right .maineiyo p {
	font-size: 11px;
	font-weight: bold;
}
#preview_bottom .right .effect .inner .right .maineiyo p.eiyo {
	font-size: 11px;
	font-weight: normal;
	line-height: 16px;
}
#preview_bottom .right .effect .inner .right .recipeeiyo p {
	font-size: 10px;
    font-weight: bold;
}
#preview_bottom .right .effect .inner .right .recipeeiyo table {
	width: 100%;
}
#preview_bottom .right .effect .inner .right .recipeeiyo td {
	font-size: 10px;
	line-height: 1.3em;
}
#preview_bottom .right .effect .inner .right .recipeeiyo td.eiyo_title {
	border-radius: 2px;
	margin: 0;
	padding: 0;
	width: 50%;
	line-height: 20px;
}

/*recipelist*/
#preview_recipe {
	margin: 0 auto;
    overflow: hidden;
    width: 100%;
	clear: both;
}
#preview_recipe .inner {
	margin: 30px auto;
    overflow: hidden;
    width: 750px;
	clear: both;
}
#preview_recipe .title {
	background: url(../img/icon/preview_h1.png) no-repeat 0px 0px;
	background-size: 20px;
	overflow: hidden;
	margin: 0 0 20px;
}
#preview_recipe .title h1 {
    font-size: 12px;
    font-weight: bold;
	padding-left: 30px;
}
#preview_recipe .list {
}
#preview_recipe .list .left {
	float: left;
	width: 45%;
}
#preview_recipe .list .left table {
	width: 100%;
}
#preview_recipe .list .left td {
	font-size: 12px;
	border-bottom: 1px dashed #DDD;
}
#preview_recipe .list .left td.food {
	font-size: 12px;
	width: 70%;
}
#preview_recipe .list .left td.kcal {
	text-align: right;
	width: 30%;
}
#preview_recipe .list .right {
    float: right;
    width: 50%;
}
#preview_recipe .list .right .box {
	border-bottom: 1px dashed #ddd;
	overflow: hidden;
	padding: 10px 0;
}
#preview_recipe .list .right .box .photo {
	float: left;
	width: 100px;
}
#preview_recipe .list .right .box .infolist {
	float: right;
    margin: 0 10px 10px 0;
    width: 250px;
}
#preview_recipe .list .right .box .infolist p {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #222;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
	padding: 5px 0 0;
}
#preview_recipe .list .right .box .infolist .number {
	background: #DDD none repeat scroll 0 0;
    border-radius: 4px;
    height: 15px;
    padding: 2px;
    width: 15px;
}
#preview_recipe .list .right .box .infolist .number p {
	font-size: 10px;
    font-weight: bold;
    padding: 0;
    position: relative;
    text-align: center;
    top: 1px;
}

#nextpage { width: 750px; margin: 30px auto; }

/*STEP_last*/
#steplast {
	margin: 100px auto;
	text-align: center;
	overflow: hidden;
}
#steplast .last_inner p {
	font-size: 14px;
	margin-top: 20px;
}
#steplast .last_inner p.title {
	font-size: 30px;
	font-weight: bold;

}
#steplast .last_btn {
    border-radius: 4px;
    margin: 50px auto;
    padding: 20px 0;
    text-align: center;
    width: 630px;
}
#steplast .last_btn li {
	float: left;
    margin: 10px 10px 10px 0;
}

/*maintitle*/
#maintitle{
	background-color: #f9f9f9;
	width: 100%;
	margin: 0 0 30px;
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
#maintitle .inner{
	margin: 0 auto;
	width: 980px;
	overflow: hidden;
}
#bottombtn {
	background-color: #f9f9f9;
    width: 100%;
	margin: 0;
}
#bottombtn .inner {
    width: 980px;
	margin: 0 auto;
}
#maintitle .inner .title_step {
	margin: 0 0 30px;
    text-align: center;
    width: 980px;
}
#maintitle .inner .title_step img {
    width: 450px;
}
#maintitle .print{
	margin: 0 auto;
	width: 980px;
	overflow: hidden;
}
#maintitle .print .btn{
	text-align: right;
}
#maintitle .inner .title {
	float: left;
    font-size: 30px;
    font-weight: bold;
	line-height: 35px;
    letter-spacing: 10px;
}
#maintitle .inner .title p {
	float: left;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 10px 0 0;
	height: 25px;
}
#maintitle .inner .title span.step{
	background-color: #01AAF1;
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    margin-right: 15px;
    padding: 5px 10px;
	float: left;
}
#maintitle .inner p.info{
	color: #999;
    float: right;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 16px;
    padding: 5px 0 0;
}

/*maintitle*/
#maintitle02{
	background-color: #01aaf1;
    width: 100%;
}
#maintitle02 .inner{
	margin: 0 auto;
	width: 980px;
	overflow: hidden;
}
#bottombtn02 {
	background-color: #01aaf1;
    padding: 20px 0;
    width: 100%
}
#bottombtn02 .inner {
    margin: 0 auto;
    text-align: center;
    width: 980px;
}
#bottombtn02 .inner p {
	color: #FFF;
    font-weight: 400;
    line-height: 1.3em;
    margin: 10px 0 0;
	text-align: center;
	font-size:16px;
}
#bottombtn02 .inner p span.bold {
	font-weight: bold;
}
#bottombtn02 .inner .sheetinfo_box {
	margin: 30px 0 0;
	overflow: hidden;
}
#bottombtn02 .inner .sheetinfo_box .left {
	border-right: 1px dashed #fff;
    float: left;
    width: 50%;
}
#bottombtn02 .inner .sheetinfo_box .right {
	float: right;
    width: 45%;
}
#bottombtn02 .inner .sheetinfo_box .right p {
	margin: 10px 0 40px;
	font-size: 16px;
}

#visual .twoway {
	width: 100%;
	overflow: hidden;
	background-color: #f5f5f5;
	padding: 80px 0;
}
#visual .twoway .twowayBox {
	width: 980px;
	margin: 0 auto 50px;
}
#visual .twoway .twowayBox .title {
	text-align: center;
	margin: 0 0 80px;
}
#visual .twoway .twowayBox .inner {
}
#visual .twoway .twowayBox .inner .left {
	border-radius: 2px;
    border-right: 1px dashed #ccc;
    float: left;
    text-align: center;
    width: 480px;
}
#visual .twoway .twowayBox .inner .left p {
	border: 1px solid #222;
    border-radius: 2px;
    margin: 0 auto 50px;
    padding: 8px 0;
    text-align: center;
    width: 150px;
}
#visual .twoway .twowayBox .inner .left p.catch {
	border: medium none;
    color: #222;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 20px 0;
    text-align: center;
    width: auto;
}
#visual .twoway .twowayBox .inner .right {
	border-radius: 2px;
    float: right;
    text-align: center;
    width: 480px;
}
#visual .twoway .twowayBox .inner .right p {
	border: 1px solid #222;
    border-radius: 2px;
    margin: 0 auto 50px;
    padding: 8px 0;
    text-align: center;
    width: 150px;
}
#visual .twoway .twowayBox .inner .right p.catch {
	border: medium none;
    color: #222;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 20px 0;
    text-align: center;
    width: auto;
}

#price .twoway {
	background-color: #f9f9f9;
	width: 100%;
	overflow: hidden;
	padding: 80px 0;
}
#price .twoway .twowayBox {
	width: 980px;
	margin: 0 auto;
}
#price .twoway .twowayBox .title {
	text-align: center;
	margin: 0 0 50px;
}
#price .twoway .twowayBox .inner {
	margin: 0 auto;
	overflow: hidden;
}
#price .twoway .twowayBox_w {
	width: 100%;
	margin: 50px auto;
	padding: 100px 0 10px;
	background-color: #FFF;
}
#price .twoway .twowayBox_w .introBox {
	width: 900px;
	margin: 0 auto 100px;
	overflow: hidden;
}
#price .twoway .twowayBox .plan {
	background: #fff none repeat scroll 0 0;
    border-bottom: 5px solid #ddd;
    float: left;
    margin: 0 10px 0 0;
    height: 420px;
    position: relative;
    width: 316px;
}
#price .twoway .twowayBox .plan .plan-name {
	background: #222 none repeat scroll 0 0;
    color: #fff;
    font-size: 2.2em;
    line-height: 120%;
	margin-bottom: 40px;
    padding: 25px 0;
    text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#price .twoway .twowayBox .plan .plan-name .sub {
	color: #fff;
    font-size: 16px;
    font-weight: bold;
}
#price .twoway .twowayBox .plan .plan-name .name {
	font-size: 1.4em;
    margin: 30px 0 15px;
    text-align: center;
	color: #FFF;
	font-weight: bold;
}
#price .twoway .twowayBox .plan .plan-price {
    text-align: center;
}
#price .twoway .twowayBox .plan .plan-price .sub {
	background-color: #222;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto 20px;
    padding: 5px 3px;
    width: 120px;
}
#price .twoway .twowayBox .plan .plan-price .price {
	color: #222;
    font-size: 3.2em;
    font-weight: bold;
    line-height: 1;
}
#price .twoway .twowayBox .plan .plan-info {
	border-top: 3px solid #f9f9f9;
    margin: 40px 0 10px;
    padding: 20px 10px;
}
#price .twoway .twowayBox .plan .plan-info .feature .title {
	background: url("../img/icon/icon_infocheck.png") no-repeat scroll 0px 10px;
	background-size: 20px;
    color: #000;
    margin: 0 0 10px 20px;
    padding: 10px 0 0 30px;
	text-align: left;
	font-weight: bold;
}
#price .twoway .twowayBox .plan .plan-info .feature ul {
	padding-left: 30px;
}
#price .twoway .twowayBox .plan .plan-info .feature li {
	list-style: outside none disc;
    margin-left: 10px;
    padding-left: 0;
	font-size: 1em;
}
#price .twoway .twowayBox .plan .plan-info .feature li a {
	color: #666;
}
#price .twoway .twowayBox .plan .plan-info .feature li a:hover {
	color: #666;
	text-decoration: underline;
}
#price .twoway .twowayBox .plan .link {
	bottom: 0;
    left: 0;
    margin: 40px 0 20px;
    position: absolute;
    right: 0;
    text-align: center;
}
#price .twoway .twowayBox .plan_pay01 {
	background: #fff none repeat scroll 0 0;
    border-bottom: 5px solid #ddd;
    float: left;
    margin: 0 10px 0 0;
    min-height: 300px;
    position: relative;
    width: 316px;
}
#price .twoway .twowayBox .plan_pay01 .plan-name {
	background: #01aaf1 none repeat scroll 0 0;
    color: #fff;
    font-size: 2.2em;
    line-height: 120%;
	margin-bottom: 40px;
    padding: 25px 0;
    text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#price .twoway .twowayBox .plan_pay01 .plan-name .sub {
	color: #fff;
    font-size: 16px;
    font-weight: bold;
}
#price .twoway .twowayBox .plan_pay01 .plan-name .name {
	font-size: 1.4em;
    margin: 30px 0 15px;
    text-align: center;
	color: #FFF;
	font-weight: bold;
}
#price .twoway .twowayBox .plan_pay01 .plan-price {
    text-align: center;
}
#price .twoway .twowayBox .plan_pay01 .plan-price .sub {
	background-color: #01aaf1;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto 20px;
    padding: 5px 3px;
    width: 120px;
}
#price .twoway .twowayBox .plan_pay01 .plan-price .price {
	color: #222;
    font-size: 3.2em;
    font-weight: bold;
    line-height: 1;
}
#price .twoway .twowayBox .plan_pay01 .plan-info {
	border-top: 3px solid #f9f9f9;
    margin: 40px 0 10px;
    padding: 20px 10px;
}
#price .twoway .twowayBox .plan_pay01 .plan-info .feature .title {
	background: url("../img/icon/icon_infocheck.png") no-repeat scroll 0px 10px;
	background-size: 20px;
    color: #000;
    margin: 0 0 10px 20px;
    padding: 10px 0 0 30px;
	text-align: left;
}
#price .twoway .twowayBox .plan_pay01 .plan-info .feature ul {
	padding-left: 30px;
}
#price .twoway .twowayBox .plan_pay01 .plan-info .feature li {
	list-style: outside none disc;
    margin-left: 10px;
    padding-left: 0;
	font-size: 1em;
}
#price .twoway .twowayBox .plan_pay01 .link {
	bottom: 0;
    left: 0;
    margin: 40px 0 20px;
    position: absolute;
    right: 0;
    text-align: center;
}




#price .twoway .twowayBox .plan_pay02 {
	background: #fff none repeat scroll 0 0;
    border-bottom: 5px solid #ddd;
    float: left;
    margin: 0 10px 0 0;
    min-height: 300px;
    position: relative;
    width: 316px;
}
#price .twoway .twowayBox .plan_pay02 .plan-name {
	background: #0d7ca9 none repeat scroll 0 0;
    color: #fff;
    font-size: 2.2em;
    line-height: 120%;
	margin-bottom: 40px;
    padding: 25px 0;
    text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#price .twoway .twowayBox .plan_pay02 .plan-name .sub {
	color: #fff;
    font-size: 16px;
    font-weight: bold;
}
#price .twoway .twowayBox .plan_pay02 .plan-name .name {
	font-size: 1.4em;
    margin: 30px 0 15px;
    text-align: center;
	color: #FFF;
	font-weight: bold;
}
#price .twoway .twowayBox .plan_pay02 .plan-price {
    text-align: center;
}
#price .twoway .twowayBox .plan_pay02 .plan-price .sub {
	background-color: #0d7ca9;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto 20px;
    padding: 5px 3px;
    width: 120px;
}
#price .twoway .twowayBox .plan_pay02 .plan-price .price {
	color: #222;
    font-size: 3.2em;
    font-weight: bold;
    line-height: 1;
}
#price .twoway .twowayBox .plan_pay02 .plan-info {
	border-top: 3px solid #f9f9f9;
    margin: 40px 0 10px;
    padding: 20px 10px;
}
#price .twoway .twowayBox .plan_pay02 .plan-info .feature .title {
	background: url("../img/icon/icon_infocheck.png") no-repeat scroll 0px 10px;
	background-size: 20px;
    color: #000;
    margin: 0 0 10px 20px;
    padding: 10px 0 0 30px;
	text-align: left;
}
#price .twoway .twowayBox .plan_pay02 .plan-info .feature ul {
	padding-left: 30px;
}
#price .twoway .twowayBox .plan_pay02 .plan-info .feature li {
	list-style: outside none disc;
    margin-left: 10px;
    padding-left: 0;
	font-size: 1em;
}
#price .twoway .twowayBox .plan_pay02 .link {
	bottom: 0;
    left: 0;
    margin: 40px 0 20px;
    position: absolute;
    right: 0;
    text-align: center;
}




#price .twoway .twowayBox .plan-freepay {
	clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0 0;
}
#price .twoway .twowayBox .plan-freepay .title {
	background: url("../img/icon/icon_infocheck.png") no-repeat scroll 0px 10px;
	background-size: 20px;
    color: #000;
    margin: 0;
    padding: 10px 0 0 30px;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
}
#price .twoway .twowayBox .plan-freepay .inner {
	margin: 0 auto;
}
#price .twoway .twowayBox .plan-freepay table {
	width: 100%;
	background-color: #f9f9f9;
	border-collapse: collapse;
	border-radius: 6px;
}
#price .twoway .twowayBox .plan-freepay td {
	padding: 10px;
	background-color: #FFF;
}
#price .twoway .twowayBox .plan-freepay td.title_f {
	background-color: #f9f9f9;
	text-align: center;
}
#price .twoway .twowayBox .plan-freepay td.title_c {
	background-color: #fff;
    border: 5px solid #f9f9f9;
    font-size: 16px;
    text-align: center;
}
#price .twoway .twowayBox .plan-freepay td.title_blue {
	background-color: #dceefc;
	text-align: center;
	font-size: 20px;
}
#price .twoway .twowayBox .plan-freepay td.title_free {
	background-color: #222;
	color: #FFF;
	text-align: center;
	width: 15%;
}
#price .twoway .twowayBox .plan-freepay td.title_pay_free {
	background-color: #222;
    border: 5px solid #f9f9f9;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 15%;
}
#price .twoway .twowayBox .plan-freepay td.title_pay01 {
	background-color: #0fa5e0;
    border: 5px solid #f9f9f9;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 15%;
}
#price .twoway .twowayBox .plan-freepay td.title_pay02 {
	background-color: #0d7ca9;
    border: 5px solid #f9f9f9;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 15%;
}
#price .twoway .twowayBox .plan-freepay .attention {
}
#price .twoway .twowayBox .plan-freepay .attention p {
	font-size: 13px;
}


/*recipetitle*/
#recipetitle {
    width: 100%;
	margin: 50px 0 0;
}
#recipetitle .inner {
	border-bottom: 1px dashed #ddd;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 15px;
    width: 980px;
}
#recipetitle .inner table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
#recipetitle .inner td {
	border: 0;
}
#recipetitle .inner td.nameleft {
	background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 0 20px;
    width: 20%;
}
#recipetitle .inner td.nameleft .title {
	float: left;
    font-weight: bold;
    padding-top: 2px;
	font-size: 18px;
}
#recipetitle .inner td.nameleft .attention {
	background-color: #026bb4;
    border-radius: 15px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#recipetitle .inner td.nameleft .attention_non {
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#recipetitle .inner td.nameright input {
    font-size: 20px;
    margin: 0 0 0 10px;
    padding: 15px 10px;
    width: 96%;
	font-family: initial;
}
#recipetitle .inner .btn {
	float: right;
	padding: 10px 0 0;
}


/*topBox*/
.info {
	clear: both;
    overflow: hidden;
    padding: 10px 0;
    text-align: center;
}

.info p {
	position: relative;
	background: #EEEEEE;
	border: 2px solid #DDDDDD;
	padding: 8px 0;
	color: #666;
	font-size: 16px;
	height: 30px;
	line-height: 30px;
}
.info p:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.info p:after {
	border-color: rgba(238, 238, 238, 0);
	border-top-color: #DDDDDD;
	border-width: 10px;
	margin-left: -10px;
}
.info p:before {
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #DDDDDD;
	border-width: 13px;
	margin-left: -13px;
}


#topBox {
    width: 100%;
	margin: 15px 0 50px;
}
#topBox .inner{
	margin: 0 auto;
	width: 980px;
	overflow: hidden;
}
#topBox .inner .title {
	float: left;
}
#topBox .inner .title h1 p.title {
	font-size: 18px;
    height: 30px;
    line-height: 25px;
	font-weight: bold;
}
#topBox .inner .title h1 p.attention {
	font-size: 12px;
	background-color: #026bb4;
    border-radius: 15px;
    color: #fff;
    float: right;
    height: 22px;
    line-height: 22px;
	margin-left: 20px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#topBox .inner .title h1 p.attention_non {
	border-radius: 2px;
    color: #999;
    float: right;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    margin-left: 150px;
    padding: 0 10px;
}
#topBox .inner .regist {
    clear: both;
    padding: 10px 0;
}
#topBox .inner .regist p.set {
	background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    color: #999;
    height: 20px;
    padding: 60px 0;
    text-align: center;
}
#topBox .inner .regist .setbox {
	background-color: #FFF;
	border: 1px solid #DDD;
	border-radius: 2px;
	padding: 20px;
}
#topBox .inner .regist .setbox table.set {
	width: 100%;
	border-collapse: collapse;
}

#topBox .inner .regist .setbox td.name {
	background-color: #f1f1f1;
	text-align: center;
	padding: 8px;
	color: #666;
	font-size: 14px;
}
#topBox .inner .regist .setbox td.recipe {
	padding: 8px;
	border-right: 1px dashed #ddd;
	font-size: 16px;
}
#topBox .inner .regist .setbox td.kcal {
	padding: 8px;
	text-align: center;
	border-right: 1px dashed #ddd;
	font-size: 14px;
}
#topBox .inner .regist .setbox td.check {
	padding: 8px;
	text-align: center;
}

#topBox .inner .regist table {
	width: 100%;
	border-collapse: collapse;
}
#topBox .inner .regist td input {
    padding: 10px;
    width: 96%;
	font-size: 18px;
	margin: 0 0 5px;
}
#topBox .inner .regist td.count01 {
	padding: 0 0 0 2px;
	text-align: center;
}
#topBox .inner .regist td.count02 input {
    font-size: 18px;
    padding: 10px;
	text-align: center;
}
#topBox .inner .regist td.count03 {
	text-align: right;
}
#topBox .inner .btn {
	width: 100%;
	text-align: right;
	overflow: hidden;
}
#topBox .inner .btn_regist {
	border-top: 1px solid #ddd;
    clear: both;
    margin: 10px 0 0;
    padding: 20px 0 9px;
    text-align: center;
    width: 100%;
}
#topBox .inner .btn_regist .back {
	background: url("../img/icon/icon_backarrow.png") no-repeat scroll 0px 10px;
	background-size: 20px;
	float: left;
    font-size: 18px;
	font-weight: bold;
    padding: 10px 0 0 25px;
}
#topBox .inner .btn_regist .back a {
	color: #222;
}
#topBox .inner .btn_check {
    border-top: 1px dashed #ddd;
    clear: both;
    margin: 25px auto;
    padding: 50px 0 0;
    text-align: center;
    width: 100%;
}
#topBox .recipebox {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    box-shadow: 0 3px 0 #ddd;
    float: left;
    overflow: hidden;
    padding: 20px 20px 10px;
    width: 520px;
	min-height: 365px;
	margin-right: 15px;
}
#topBox .recipebox table {
	width: 100%;
	border-collapse: collapse;
}
#topBox .recipebox td {
	border: 0;
	font-size: 15px;
}
#topBox .recipebox td a:hover {
	border-bottom: 1px dotted #DDD;
}
#topBox .recipebox td.nameleft {
	 background-color: #f5f5f5;
    padding: 5px 20px;
    width: 30%;
}
#topBox .recipebox td.nameleft .title {
	float: left;
    font-weight: bold;
    padding-top: 2px;
}
#topBox .recipebox td.nameleft .attention {
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#topBox .recipebox td.nameright input {
    font-size: 20px;
    padding: 15px 10px;
    width: 96%;
}
#topBox .photobox {
    border: 1px solid #ddd;
    box-shadow: 0 3px 0 #e3e4e8;
    min-height: 470px;
    overflow: hidden;
    text-align: center;
    width: 400px;
}
#topBox .photobox table {
	width: 100%;
	border-collapse: collapse;
}
#topBox .photobox td {
	border: 0;
}
#topBox .photobox td.photo {
}
#topBox .photobox td.photo img {
	height: auto;
    padding: 10px 0;
    position: relative;
    width: 330px;
}
#topBox .photobox td.photo input[type="file"] {
	border: 1px solid #ddd;
    padding: 5px;
    width: 315px;
	cursor: pointer;
}
#topBox .photobox .title {
	float: none;
	overflow: hidden;
}
#topBox .photobox .title h1 p.title {
	font-size: 18px;
    text-align: left;
	margin: 20px 0 5px;
	height: 50px;
}
#topBox .photobox .title h1 p.kcal {
    float: right;
	font-size: 20px;
}
#topBox .photobox .title h1 p.kcal span.kcal {
	font-size: 14px;
    letter-spacing: 1px;
}
#topBox .photobox .recipelist {
	background-color: #f5f5f5;
    margin: 10px 0 0;
    padding: 10px;
	overflow: hidden;
}
#topBox .photobox .recipelist table {
	width: 100%;
	border-collapse: collapse;
}
#topBox .photobox .recipelist td {
	border: 0;
}
#topBox .photobox .recipelist td.food {
	text-align: left;
	font-size: 14px;
}
#topBox .photobox .recipelist td.g {
	text-align: right;
	font-size: 13px;
	color: #999;
}
#topBox .photobox .recipelist td a.modal-open {
	border-bottom: 1px dotted #444;
}
#topBox .photobox .recipelist td a:hover {
	border-bottom: 1px dotted #01aaf1;
}
#topBox .photobox .btn {
	width: 100%;
	text-align: right;
	float: right;
}
#topBox .left {
    border-top: 1px solid #ddd;
    margin: 0;
    overflow: hidden;
    padding: 18px;
    text-align: center;
}
#topBox .btnbox {
	background-color: #f5f5f5;
    float: left;
    margin: 20px 0 50px;
    width: 560px;
	border: 1px solid #EEE;
}
#topBox .btnbox .inner {
	margin: 0 auto;
    padding: 20px;
    text-align: center;
    width: 420px;
}
#topBox .btnbox .inner .left {
	float: left;
}
#topBox .btnbox .inner .right {
}

/*bottomBox*/
#bottomBox {
    width: 100%;
	margin: 0 0 50px;
}
#bottomBox .inner{
	margin: 0 auto;
	width: 980px;
	overflow: hidden;
}
#bottomBox .inner .title {
	float: left;
}
#bottomBox .inner .title h1 p.title {
	font-size: 14px;
    font-weight: bold;
    height: 30px;
    line-height: 25px;
}
#bottomBox .inner .title h1 p.kcal {
    float: right;
    font-weight: bold;
    line-height: 25px;
}
#bottomBox .inner .title h1 p.kcal span.kcal {
	font-size: 12px;
}
#bottomBox .inner .title h1 p.attention {
	font-size: 12px;
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    height: 22px;
    line-height: 22px;
	margin-left: 20px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#bottomBox .inner .title h1 p.attention_non {
	font-size: 12px;
	background-color: #CCC;
    border-radius: 2px;
    color: #fff;
    float: right;
    height: 22px;
    line-height: 22px;
	margin-left: 20px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#bottomBox .inner .regist {
	border-top: 1px dashed #ddd;
    clear: both;
    margin: 50px 0 0;
    padding: 20px 0 10px;
}
#bottomBox .inner .regist table {
	width: 100%;
	border-collapse: collapse;
}
#bottomBox .inner .regist td input {
    font-size: 18px;
    padding: 10px;
    width: 90%;
}
#bottomBox .inner .regist td.count01 {
	text-align: center;
}
#bottomBox .inner .regist td.count02 input {
    font-size: 18px;
    padding: 10px;
	text-align: center;
}
#bottomBox .inner .regist td.count03 {
	text-align: right;
}
#bottomBox .inner .btn {
	width: 100%;
	text-align: right;
	float: right;
}
#bottomBox .inner .btn_regist {
	border-top: 1px dashed #ddd;
    clear: both;
    margin: 15px 0 0;
    padding: 20px 0 0;
    text-align: center;
    width: 100%;
}
#bottomBox .recipebox {
	background-color: #f5f5f5;
    border: 1px solid #ddd;
    clear: both;
    float: left;
    padding: 20px;
    width: 560px;
}
#bottomBox .recipebox table {
	width: 100%;
	border-collapse: collapse;
}
#bottomBox .recipebox td {
	border: 0;
}
#bottomBox .recipebox td.nameleft {
	 background-color: #f5f5f5;
    padding: 5px 20px;
    width: 30%;
}
#bottomBox .recipebox td.nameleft .title {
	float: left;
    font-weight: bold;
    padding-top: 2px;
}
#bottomBox .recipebox td.nameleft .attention {
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#bottomBox .recipebox td.nameright input {
    font-size: 20px;
    padding: 15px 10px;
    width: 96%;
}
#bottomBox .listbox {
	background-color: #f9f9f9;
    float: right;
	margin: 0 0 10px;
    padding: 20px;
    width: 330px;
	border-top: 1px dashed #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
#bottomBox .listbox table {
	width: 100%;
	border-collapse: collapse;
}
#bottomBox .listbox td {
	border: 0;
}
#bottomBox .listbox td.food {
	text-align: left;
}
#bottomBox .listbox td.g {
	text-align: right;
	font-size: 11px;
	color: #999;
}

/*mainbox*/
#mainbox {
	width: 100%;
	overflow: hidden;
}
#mainbox .inner {
	width: 980px;
	margin: 0 auto;
}


/*mainbtn*/
#mainbtn{
	background-color: #fff;
    width: 100%;
	margin: 0;
}
#mainbtn .inner{
	margin: 0 auto;
	padding: 0;
	width: 980px;
	overflow: hidden;
}

/*popup*/
.modal-content {
    position:fixed;
    display:none;
    z-index:2;
    width:35%;
    margin:0;
    padding:20px;
    border:5px solid #DDD;
    background:#fff;
	border-radius: 5px;
}
.modal-content .innerbox {
    margin: 0;
	width: auto;
}
.modal-content .innerbox h1 {
	margin-bottom: 30px;
	font-size: 16px;
	color: #999;
}
.modal-content .innerbox .food {
	text-align: center;
}
.modal-content .innerbox .food .title {
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
}
.modal-content .innerbox .food .kcal {
	color: #999;
}
.modal-content .innerbox .btn {
	text-align: center;
	margin: 30px 0 0;
	padding: 20px 0 0;
	border-top: 1px dashed #DDD;
}

.modal-content .innerbox .count {
	border-top: 1px dashed #ddd;
    margin: 30px 0 0;
    padding: 30px 0 0;
}
.modal-content .innerbox .count table {
	width: 100%;
	border-collapse: collapse;
}
.modal-content .innerbox .count td {
	text-align: center;
}
.modal-content .innerbox .count td.title {
	background-color: #f9f9f9;
	border: 1px solid #DDD;
	width: 40%;
}
.modal-content .innerbox .count td.count01 {
}
.modal-content .innerbox .count td.count02 input {
	width: 40%;
	text-align: center;
}
.modal-content .innerbox .count td.count03 {
	text-align: right;
    width: 24%;
}
.modal-content .innerbox .count td.count03 input[type="number"] {
	margin-right: 10px;
	width: 70px;
	padding: 10px;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}
.modal-content p a {
	cursor: pointer;
	color: #FFF;
}

/*registbox*/
#registbox {
	width: 980px;
	margin: 0 auto 50px;
}
#registbox .inner {
}
#registbox .inner h1 {
	margin: 50px auto 20px;
    width: 980px;
}
#registbox .inner h1 p.title {
	border-left: 3px solid #222;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    padding-left: 15px;
}
#registbox .inner h1 p.title span.p_mini {
	color: #999;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
}

#registbox .inner table {
	width: 100%;
	border-collapse: collapse;
}
#registbox .inner table td {
	width: 100%;
	border: 1px solid #DDD;
	padding: 20px;
}
#registbox .inner table td.title {
	background-color: #f5f5f5;
	width: 30%;
}
#registbox .inner table td.title .title {
	float: left;
    font-weight: bold;
    padding-top: 6px;
}
#registbox .inner table td.title .attention {
	background-color: #f53a67;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    padding: 0px 10px;
	height: 25px;
    line-height: 25px;
	position:relative;
	top: 5px;
}
#registbox .inner table td.title .option {
	background-color: #999;
    border-radius: 1px;
    color: #fff;
    float: right;
    font-size: 12px;
    padding: 0px 10px;
	height: 25px;
    line-height: 25px;
	position:relative;
	top: 5px;
}
#registbox .inner table td.regist {
	width: 70%;
}
#registbox .inner table td.regist .imgInput {
	text-align:center;
}
#registbox .inner table td.regist .imgInput img {
	width: 30%;
	border: 1px solid #DDD;
}
#registbox .inner table td.regist input[type="text"] {
    font-size: 16px;
    height: 20px;
    padding: 10px;
    width: 96%;
}
#registbox .inner table td.regist input[type="file"] {
    border: 1px dashed #ddd;
    padding: 10px;
    width: 450px;
	text-align: center;
}
#registbox .inner table td.regist textarea {
	width: 96%;
	padding: 10px;
	font-size: 16px;
}


/*step*/
#step{
	width: 100%;
}
#step .inner{
	margin: 0 auto;
	padding: 30px 0;
	width: 500px;
	height: 110px;
	overflow: hidden;
}
#step .inner img{
	width: 100%;
}

/*setting*/
#setting {
	width: 100%;
}
#setting .user {
	width: 740px;
	margin: 20px auto;
}
#setting .user p.title {
	background: url(../img/menu/icon_recipecheck.png) no-repeat 0px 10px;
	background-size: 20px;
	font-weight: bold;
	padding: 10px 0 10px 30px;
	float: left;
}
#setting .user select {
    border-radius: 3px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
	width: 20%;
	height: 40px;
	font-size: 14px;
	text-align: center;
	padding: 0;
	padding: 0 5px;
	background-color: #FFF;
}
#setting .user option {
	padding: 0;
}

/*foodregist*/
#foodregist {
	width: 100%;
}
#foodregist .inner {
	width: 940px;
	border: 1px solid #DDD;
	border-radius: 2px;
	padding: 20px;
	margin: 0 auto;
	box-shadow: 0 4px 0 #e3e4e8;
	background-color: #FFF;
}
#foodregist .btn_center {
	width: 100%;
	margin: 30px 0;
}
#foodregist .btn_center .btn {
	width: 700px;
	margin: 0 auto;
	text-align: center;
}
#foodregist .inner .name table {
	width: 100%;
	margin: 0 0 10px;
	border: 2px solid #FFF;
}
#foodregist .inner .name table td {
}
#foodregist .inner .name table td.nameleft {
	background-color: #f5f5f5;
	padding: 5px 10px 5px 20px;
	width: 30%;
}
#foodregist .inner .name table td.nameleft .title {
	float: left;
	padding-top: 2px;
	font-weight: bold;
}
#foodregist .inner .name table td.nameleft .attention {
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#foodregist .inner .name table td.nameright {
	width: 70%;
}
#foodregist .inner .name table td.nameright input {
	padding: 15px 10px;
	font-size: 20px;
	width: 97%;
}

#foodregist .inner .food {
}
#foodregist .inner .food table {
	width: 100%;
}
#foodregist .inner .food table td {
	background-color: #FFF;
	border: 2px solid #FFF;
}
#foodregist .inner .food table td.regist_food {
	width: 48%;
}
#foodregist .inner .food table td.regist_number {
	width: 26%;
}

#foodregist .inner .food table td.nameleft {
	background-color: #f5f5f5;
	padding: 12px 10px 12px 20px;
	width: 40%;
}
#foodregist .inner .food table td.nameleft .title {
	float: left;
	padding-top: 2px;
	font-weight: bold;
}
#foodregist .inner .food table td.nameleft .attention {
	background-color: #F08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#foodregist .inner .food table td.nameright {
	background-color: #f5f5f5;
	padding: 5px 10px 5px 20px;
	width: 22%;
}
#foodregist .inner .food table td.nameright .title {
	float: left;
	padding-top: 6px;
	font-weight: bold;
}
#foodregist .inner .food table td.nameright .attention {
	background-color: #F08080;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    position: relative;
    top: 1px;
}
#foodregist .inner .food table td.regist_food input {
    border-radius: 3px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
	width: 98%;
	height: 40px;
	font-size: 20px;
	padding: 5px 10px;
}
#foodregist .inner .food table td.regist_number .number01 {
	float: left;
    margin: 0;
    padding: 12px 0;
    text-align: center;
    width: 20%;
}
#foodregist .inner .food table td.regist_number .number02 select {
    border-radius: 2px;
    display: inline-block;
    float: left;
    font-size: 16px;
    height: 45px;
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
    width: 20%;
	margin: 0;
}
#foodregist .inner .food table td.regist_number .number02 option {
	padding: 0 0 0 5px;
}
#foodregist .inner .food table td.regist_number .number03 {
	float: left;
	width: 35%;
	text-align: center;
	font-weight: bold;
}
#foodregist .inner .food table td.delete {
	color: #A37E38;
	border: 1px solid #A37E38;
	border-radius: 2px;
	padding: 5px 15px;
	height: 40px;
	text-align: center;
}
#foodregist .inner .post-contents{
	border-top: 1px dashed #ddd;
	margin: 10px 0 0;
    padding: 20px 0 0;
    width: 100%;
	overflow: hidden;
}
#foodregist .inner .post-contents .btn{
	width: 100%;
	text-align: center;
}

/*recipelist*/
#recipelist {
	width: 100%;
	background-color: #f9f9f9;
	margin: 50px 0 0;
	overflow: hidden;
}
#recipelist .inner {
	margin: 0 auto;
	padding: 0;
	border: none;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	background-color: #f5f5f5;
}
#recipelist .inner .recipetitle {
	background-color: #f9f9f9;
    height: 45px;
    overflow: hidden;
}
#recipelist .inner .recipetitle h1 {
	float: left;
	font-size: 25px;
	font-weight: bold;
	width: 50%;
}
#recipelist .inner .recipetitle h2 {
	float: right;
	font-weight: bold;
}
#recipelist .inner .recipetitle span.number {
	font-size: 30px;
	line-height: 30px;
	margin: 0 10px;
}
#recipelist .inner .leftbox {
	float: left;
	width: 500px;
}
#recipelist .inner .leftbox .foodphoto {
	height: 500px;
	border: 1px solid #DDD;
	border-radius: 2px;
	background-color: #FFF;
}
#recipelist .inner .leftbox .foodphoto {
	width: 500px;
}
#recipelist .inner .leftbox .registimg {
	border: 2px dotted #ddd;
    float: left;
    margin: 10px 0 0;
    padding: 20px;
    width: 455px;
	text-align: center;
}
#recipelist .inner .leftbox .registimg p {
	color: #999;
}
#recipelist .inner .foodlist {
	width: 940px;
}
#recipelist .inner .foodlist table {
	width: 100%;
	border-collapse: collapse;
	background-color: #FFF;
	border: 1px solid #DDD;
}
#recipelist .inner .foodlist td {
	padding: 8px 10px;
}
#recipelist .inner .foodlist td.food {
	width: 50%;
	font-size: 16px;
}
#recipelist .inner .foodlist td.kcal {
	color: #999;
	width: 50%;
	text-align: right;
}
#recipelist .inner .photo {
	margin: 50px 0 0;

}
#recipelist .inner .photo table {
	width: 100%;
	border-collapse: collapse;
}
#recipelist .inner .photo table td {
	border: 1px solid #DDD;
	text-align: center;
}
#recipelist .inner .photo table td.title {
	background-color: #f5f5f5;
}
#recipelist .inner .photo table td.title .title {
    font-weight: bold;
}
#recipelist .inner .photo table td.title .attention {
    background-color: #999;
    border-radius: 2px;
    color: #fff;
    height: 25px;
    line-height: 25px;
    margin: 5px auto 0;
    padding: 0 10px;
    text-align: center;
    top: 1px;
    width: 35px;
	font-size: 12px;
}
#recipelist .inner .photo table td.photo .imgInput {
	background-color: #fff;
    padding: 20px;
}
#recipelist .inner .photo table td.photo .imgInput img {
	width: 250px;
	border: 1px solid #DDD;
}
#recipelist .inner .photo table td.photo input[type="file"] {
    border: 1px dashed #ddd;
	margin: 20px 0 0;
    padding: 10px;
    width: 600px;
	text-align: center;
}


#recipelist .inner .btn_bottom {
	float: right;
	margin: 15px 0 0;
}
#recipelist .inner .btn_bottom p.btn {
	color: #A37E38;
	padding: 5px 10px;
	border: 1px solid #A37E38;
	border-radius: 2px;
}

#recipelist .regist {
	width: 50%;
}
#recipelist .regist .imgInput {
	float: left;
    text-align: center;
    width: 100%;
}
#recipelist .regist .imgInput input {
	background-color: #FFF;
	border: 1px dashed #ddd;
    padding: 10px;
    width: 95%;
}
#recipelist .regist .imgInput img {
	border: 1px solid #ddd;
    width: 99%;
}


/*recipelist*/
#menubox{
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
#menubox .setting{
	background-color: #161616;
    border-radius: 2px;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    width: 120px;
}
#menubox h1{
	border-bottom: 1px dashed #ddd;
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 30px;
    padding: 20px 0;
    text-align: center;
	overflow: hidden;
}
#menubox .top{
	margin: 50px 0;
}
#menubox .top h1.name{
	font-size: 35px;
	font-weight: bold;
	margin: 20px 0;
	text-align: center;
}
#menubox .top .catch{
	font-size: 16px;
	margin: 20px 0;
	text-align: center;
	color: #666;
}
#menubox .left {
	float: left;
}
#menubox .left .total {
　　border-bottom: 1px dashed #ddd;
    color: #01aaf1;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    padding-bottom: 10px;
}
#menubox .left .total p.title {
    float: left;
    font-size: 20px;
	margin: 5px 0;
	font-weight: bold;
}
#menubox .left .total p.sub {
    float: right;
	margin: 5px 0;
}
#menubox .left .kcalbox{
	float: left;
	width: 200px;
	padding: 10px;
}
#menubox .left .kcalbox p.title{
	font-size: 12px;
	float: left;
}
#menubox .left .kcalbox p.kcal{
	font-size: 18px;
	font-weight: bold;
	float: right;
	color: #F7931E;
}
#menubox .left .kcalbox p.kcal span.kcal{
	font-size: 12px;
	font-weight: normal;
	color: #161616;
}
#menubox .left .saltbox{
	background-color: #f1f1f1;
	float: right;
	width: 200px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 10px;
}
#menubox .left .saltbox p.title{
	font-size: 12px;
	float: left;
}
#menubox .left .saltbox p.g{
	font-size: 20px;
	font-weight: bold;
	float: right;
	color: #F7931E;
}
#menubox .left .saltbox p.g span.kcal{
	font-size: 12px;
	font-weight: normal;
	color: #222;
}
#menubox .left .salt{
	background-color: #DDD;
	float: left;
	width: 200px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 10px;
}
#menubox .left .foodphoto {
}
#menubox .left .foodphoto .imgInput{
    width: 450px;
    height: 210px;
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid #DDD;
}
#menubox .left .foodphoto img {
    position: relative;
    width: 100%;
    height: auto;
    /*-webkit-transform: translate(-50%,-50%);*/
    /*-ms-transform: translate(-50%,-50%);*/
    /*transform: translate(-50%,-50%);*/
}
#menubox .left .imgcompare {
	margin: 10px 0 0;
	padding: 5px;
	border: 1px solid #DDD;
}
#menubox .left p {
}
#menubox .left .comment{
	border: 1px dashed #DDD;
	margin: 10px 0 0;
	padding: 10px;
}
#menubox .right{
	float: right;
	width: 390px;
	overflow: hidden;
}
#menubox .right .total {
    color: #01aaf1;
    font-size: 20px;
    font-weight: bold;
	padding-bottom: 10px;
	overflow: hidden;
}
#menubox .right .total p.title{
    float: left;
    font-size: 16px;
	font-weight: bold;
}
#menubox .right .total p.sub{
	float: right;
}
.pre_btitle {
    border-bottom: 4px solid #ddd;
    margin: 50px auto 10px;
    padding: 0 0 8px;
    position: relative;
    width: 980px;
}
.pre_btitle:after {
    position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 50%;
	height: 4px;
	background-color: #3498db;
}


.pre_btitle p {
	font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    width: 980px;
}
.pre_btitle p span.attention {
	background-color: #f08080;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    margin-bottom: 3px;
    padding: 5px 10px;
    position: relative;
    top: -3px;
}
.pre_btitle p span.non_attention {
	background-color: #CCC;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    margin-bottom: 3px;
    padding: 5px 10px;
    position: relative;
    top: -3px;
}
#comment_display {
    font-size: 16px;
    padding: 10px 0;
}

#menubox .right p.top3{
	font-size: 18px;
	font-weight: bold;
	color: #F7931E;
	margin: 0 0 20px;
	text-align: center;
}
#menubox .right .effect .box{
	margin: 0 0 5px;
	overflow: hidden;
	background-color: #f5f5f5;
}
#menubox .right .effect .box .left{
	float: left;
	width: 120px;
	height: 150px;
	border-bottom: 3px solid #DDD;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	background-color: #f1f1f1;
}
#menubox .right .effect .box .left .icon{
	text-align: center;
	padding: 10px 0 0;
}
#menubox .right .effect .box .left .title{
	font-size: 18px;
    font-weight: bold;
    text-align: center;
}
#menubox .right .effect .box .right{
	float: right;
	width: 330px;
	height: 120px;
	border-bottom: 3px solid #DDD;
	padding: 15px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	background-color: #f9f9f9;
}
#menubox .right .effect .box .btn{
	border-top: 1px dashed #999;
    padding: 5px 0 0;
    text-align: right;
}
#menubox .right .effect .box .right h1{
	background-color: #666;
	margin: 5px 0;
	padding: 3px 10px;
	border-radius: 2px;
	color: #FFF;
}
#menubox .right .effect .box .right p {
	height: 60px;
	font-size: 13px;
}
#menubox .right .effect .box .right p.main {
	margin: 5px 0 10px;
	font-size: 12px;
	height: auto;
}
#menubox .right .effect .box .right p.main span.title {
	font-size: 12px;
	font-weight: bold;
}
#menubox .right .effect .effect_more{
	float: right;
	overflow: hidden;
	padding: 10px 15px;
}

/*genre*/
#genre {
    margin: 30px auto 0;
    overflow: hidden;
    width: 770px;
}
#genre .inner{
	margin: 0 auto;
    overflow: hidden;
    width: 530px;
}
#genre .inner .tab{
	background-color: #35a5f3;
    border-bottom: 5px solid #028ff0;
	border-right: 1px solid #026bb4;
    color: #fff;
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    padding: 5px 10px;
    text-align: center;
    width: 171px;
}
#genre_info {
    margin: 0 auto;
	padding: 0 0 50px;
    overflow: hidden;
    width: 770px;
}
#genre_info .inner {
	border: 1px solid #DDD;
	padding: 10px 20px;
	overflow: hidden;
}
#genre_info .inner {
	border: 2px solid #026bb4;
	padding: 20px;
	overflow: hidden;
}
#genre_info .inner h1 {
	background-color: #026bb4;
    border-radius: 2px;
    color: #fff;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto 20px;
    padding: 5px 10px;
    text-align: center;
    width: 180px;
}
#genre_info .inner .left {
	border-bottom: 1px dashed #026bb4;
    float: left;
    margin: 0 0 20px;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}
#genre_info .inner .left li {
	/*background: url(../img/icon/icon_arrow.png) no-repeat 0px 0px;*/
	font-size: 16px;
    font-weight: bold;
}
#genre_info .inner .left p {
	padding-left: 20px;
	padding-bottom: 10px;
}
#genre_info .inner .right {
    float: right;
    text-align: center;
    width: 100%;
}
#genre_info .inner .right img {
	width: 80%;
}
#genre_info .inner .bottom {
	border-top: 1px solid #ddd;
    float: left;
    margin: 10px 0 0;
    padding: 20px 0 0;
    text-align: center;
    width: 100%;
}
#genre_info .inner .bottom span.title {
	background-color: black;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
    padding: 4px 10px;
}
span.mini {
	font-size: 12px;
}


/*sheet_effect*/
#effect_top3 {
	margin: 0 auto 30px;
    overflow: hidden;
    width: 990px;
}
#effect_top3 .box {
	float: left;
	width: 320px;
	margin-left: 10px;
}
#effect_top3 .box p.title {
	color: #01aaf1;
    font-size: 16px;
    padding: 10px 0 0;
    text-align: center;
	letter-spacing: 0.1em;
}
#effect_top3 .box p.title_sub {
	font-size: 20px;
    font-weight: bold;
    padding: 5px 0;
    text-align: center;
}
#effect_top3 .box p.maininfo {
	margin: 10px 0 0;
	color: #01aaf1;
	height: 80px;
}
#effect_top3 .box h1{
	border-bottom: 1px dashed #ddd;
    font-size: 15px;
    height: 35px;
    line-height: 35px;
	margin: 5px 0;
    padding-left: 25px;
	background: url(../img/icon/icon_calory.png) no-repeat 0px 5px;
	background-size: 20px;
	font-weight: bold;
}
#effect_top3 .box .eiyou {
	margin: 5px 0;
}
#effect_top3 .box .eiyou p.info {
    font-size: 14px;
    height: 60px;
    line-height: 1.5em;
    margin: 5px 0;
    padding: 0;
    text-align: left;
}
#effect_top3 .box .eiyou p.food {
	font-size: 12px;
}
#effect_top3 .box .eiyou p.info span.marker {
	color: #f53a67;
    font-weight: bold;
}
#effect_top3 .box .eiyou h2 {
	border-bottom: 1px dashed;
    border-radius: 2px;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    text-align: center;
}
#effect_top3 .box .eiyou h3 {
	font-weight: bold;
}

/*graphbox*/
#graphbox{
	width: 980px;
	margin: 0px auto;
	overflow: hidden;
}
#graphbox .title{
}
#graphbox .title h1{
	border-bottom: 1px solid #ddd;
    font-size: 20px;
	font-weight: bold;
    margin: 50px 0 5px;
    padding: 0 0 10px;
	text-align: left;
}
#graphbox .graph{
}
#graphbox .graph table{
	width: 100%;
	border-collapse: collapse;
}
#graphbox .graph table td{
	border-bottom: 1px solid #ddd;
    font-size: 12px;
}
#graphbox .graph table td.title{
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff 0%, #ddd 100%) repeat scroll 0 0;
	padding: 10px;
	text-align: center;
	border: 1px solid #DDD;
	font-size: 14px;
}
#graphbox .graph table td span.left {
	font-size: 14px;
	font-weight: bold;
	color: #444;
	float: right;
	margin: 4px 10px;
}
#graphbox .graph table td.center{
	text-align: center;
	padding: 5px 0;
}
#graphbox .graph table td.center .icon img{
	vertical-align: middle;
	text-align: center;
}
#graphbox .graph table td .compare{
	border: 1px solid #333;
    border-radius: 2px;
    color: #333;
    float: left;
    font-size: 12px;
    margin: 2px;
    padding: 2px 5px;
}

/*recipelist_preview*/
#recipelist_pre {
	width: 980px;
	margin: 50px auto;
	overflow: hidden;
}
#recipelist_pre .list table {
	width: 100%;
	border-collapse: collapse;

}
#recipelist_pre .list table td {
	padding: 10px;
	border: 1px solid #EEE;
}
#recipelist_pre .list table td.recipetitle {
	background-color: #f5f5f5;
	text-align: center;
}
#userinfo_pre {
	width: 750px;
	background-color: #222;
	margin: 20px auto 0;
	padding: 10px 0;
	overflow: hidden;
}
#userinfo_pre .inner_gray {
	width: 750px;
	margin: 0 auto;
	text-align: center;
}
#userinfo_pre .inner_gray p {
	font-size: 12px;
	color: #FFF;
}
#userinfo_pre .inner {
	width: 980px;
	margin: 0 auto;
}
#userinfo_pre .inner p {
	font-size: 10px;
	line-height: 15px;
}
#userinfo_pre .inner .left {
    float: left;
    width: 48%;
	margin-left: 10px;
}
#userinfo_pre .inner .left p.name {
	font-weight: bold;
	padding-bottom:10px;
	font-size: 12px;
}
#userinfo_pre .inner .left p span.url {
	margin-left: 20px;
	font-size: 14px;
	font-weight: normal;
}
#userinfo_pre .inner .left p span.url a {
	background-color: #eee;
    border-radius: 2px;
    font-size: 10px;
    font-weight: normal;
    padding: 3px 15px;
}
#userinfo_pre .inner .right {
	border-left: 1px solid #ddd;
	float: right;
    text-align: center;
    width: 49%;
}

/*graphbox_preview*/
#graphbox_pre{
	width: 980px;
	margin: 50px auto;
	overflow: hidden;
}
#graphbox_pre .title{
}
#graphbox_pre .title h1{
	border-bottom: 1px solid #ddd;
    font-size: 25px;
	font-weight: bold;
    margin: 0 0 10px;
    padding: 0 0 10px;
}
#graphbox_pre .graph{
}
#graphbox_pre .graph table{
	width: 100%;
	border-collapse: collapse;
}
#graphbox_pre .graph table td{
	padding: 15px 0;
	border-bottom: 1px dashed #DDD;
}
#graphbox_pre .graph table td.title{
	padding: 5px 10px;
	text-align: center;
	font-size: 14px;
	background-color: #f9f9f9;
	color: #999;
	border-bottom: 1px solid #DDD;
}
#graphbox_pre .graph table td.center{
	text-align: center;
}
#graphbox_pre .graph table td.center .icon img{
	vertical-align: middle;
	text-align: center;
}
#graphbox_pre .graph table td .compare{
	border: 1px solid #222;
    border-radius: 2px;
    float: left;
    padding: 0 5px;
	margin: 3px 3px 0 0;
}

/*goodnutBox*/
#fivenutBox {
	width: 750px;
	margin: 10px auto 50px;
}
#allBox {
	margin: 0 auto;
    overflow: hidden;
    width: 750px;

}
#leftBox {
	float: left;
	width: 40%;
	margin-left: 30px;
}
#leftBox .inner {
	background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
	margin: 18px 0 0;
    padding: 30px;
}
#leftBox .inner .box {
	overflow: hidden;
}
#leftBox .inner .box h1 {
	float: left;
    font-size: 14px;
    font-weight: bold;
	margin: 5px 0 0;
}
#leftBox .inner .box .total {
	float: right;
	margin: 5px 0 0;
}
#leftBox .inner .box .total span.bold {
	background: none;
	font-size: 30px;
	font-weight: bold;
}
#leftBox .inner .over {
	float: right;
    font-size: 12px;
    padding: 10px 0 0;
}

#goodnutBox {
	margin: 10px auto;
}
#goodnutBox .title {
	margin: 20px 0 5px;
}
#goodnutBox .title h1 {
	background: url(../img/icon/preview_h1.png) no-repeat 0px 0px;
	background-size: 20px;
    font-size: 16px;
	font-weight: bold;
	border-bottom: 3px solid #222;
	padding-left: 30px;
}
#goodnutBox .inner table {
	width: 100%;
	border-collapse: collapse;
}
#goodnutBox .inner td {
	font-size: 10px;
}
#goodnutBox .inner td.icon img {
	vertical-align: middle;
}
#goodnutBox .inner td.name {
	width: 35%;
}
#goodnutBox .inner td.food {
	width: 30%;
}
#goodnutBox .inner td.nut {
	width:40%
}
#goodnutBox .inner td.nut .compare {
	border: 1px solid #222;
    border-radius: 2px;
    float: left;
    margin: 0 3px 0 0;
    padding: 0 5px;
	font-size: 10px;
}

#goodnutBox2 {
    margin: 10px auto;
}
#goodnutBox2 .title {
    margin: 20px 0 5px;
}
#goodnutBox2 .title h1 {
    color: #999;
    font-size: 18px;
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
}
#goodnutBox2 .inner table {
    width: 100%;
    border-collapse: collapse;
}
#goodnutBox2 .inner td {
    font-size: 10px;
}
#goodnutBox2 .inner td.icon img {
    vertical-align: middle;
}
#goodnutBox2 .inner td.name {
    width: 35%;
}
#goodnutBox2 .inner td.food {
    width: 30%;
}
#goodnutBox2 .inner td.nut {
    width:40%
}
#goodnutBox2 .inner td.nut .compare {
    border: 1px solid #222;
    border-radius: 2px;
    float: left;
    margin: 0 3px 0 0;
    padding: 0 5px;
    font-size: 10px;
}
#nutinBox {
	margin: 10px auto;
}
#nutinBox .inner table {
	width: 100%;
	border-collapse: collapse;
}
#nutinBox .inner td {
	font-size: 10px;
}
#nutinBox .inner td.icon img {
	vertical-align: middle;
}
#nutinBox .inner td.name {
	width: 25%;
}
#nutinBox .inner td.graph {
	width: 50%;
}
#nutinBox .inner td.graph img {
	vertical-align: middle;
}
#nutinBox .inner td.number {
	width: 20%;
	text-align: right;
	padding-right: 25px;
}
#nutinBox .inner td.number span.black {
	font-size: 12px;
}
#nutinBox .inner td.number span.gray {
	color: #999;
}

#threenut {
	width: 70%;
	margin: 0 auto 20px;
}
#threenut .inner table {
	width: 90%;
}
#threenut .inner td {
}
#threenut .inner td.title {
    font-size: 12px;
    padding: 5px;
}
#threenut .inner td.title img {
	margin-left: 10px;
}
#threenut .inner td.center_low {
	border: 1px solid #57c8d8;
    border-radius: 2px;
    text-align: center;
	padding: 10px;
	width: 15%;
	font-size: 18px;
	font-weight: bold;
	color: #57c8d8;
}
#threenut .inner td.center_good {
	text-align: center;
	border: 1px solid #85C075;
	border-radius: 2px;
	padding: 10px;
	width: 15%;
	font-size: 18px;
	font-weight: bold;
	color: #85C075;
}
#threenut .inner td.center_over {
	text-align: center;
	border: 1px solid #EB717C;
	border-radius: 2px;
	padding: 10px;
	width: 15%;
	font-size: 18px;
	font-weight: bold;
	color: #EB717C;
}
#threenut .inner td.center {
	text-align: center;
	vertical-align: middle;
}

/*menubottom*/
#menubottom {
	width: 100%;
	margin: 30px 0;
	overflow: hidden;
}
#menubottom .inner {
	width: 450px;
	margin: 0 auto;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
#menubottom .inner p.left {
	background-color: #161616;
    border-radius: 2px;
    color: #fff;
    float: left;
    padding: 10px 0;
    text-align: center;
    width: 200px;
}
#menubottom .inner p.left span {
	position: relative;
    right: 15px;
}
#menubottom .inner p.right {
	float: right;
	background-color: #161616;
    border-radius: 2px;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    width: 200px;
}
#menubottom .inner p.right span {
	position: relative;
    left: 35px;
}
#menubottom .inner span.icon_left img {
	width: 7px;
	padding-right: 5px;
}
#menubottom .inner span.icon_right img {
	width: 7px;
	padding-left: 5px;
}

.about_title { background-color: #EEE; margin: 10px 0; padding: 5px 10px; border-radius: 2px; height: 25px; line-height: 25px; }

/*casestudy*/
#info_title {
	margin: 80px auto;
    text-align: center;
    width: 1000px;
}
#info_title h1 {
	font-size: 40px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}
#info_title h2 {
	font-size: 16px;
    height: 16px;
    letter-spacing: 0.3em;
    line-height: 16px;
    padding: 20px 0 0;
}
#casestudy {
	width: 1000px;
	margin: 80px auto;
	overflow: hidden;
}
#casestudy ul {
	margin-left: -10px;
    margin-top: 10px;
}
#casestudy li {
	display: block;
    float: left;
    height: 370px;
    margin-bottom: 20px;
    margin-left: 10px;
    position: relative;
    width: 326px;
}
#casestudy li img {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	position: absolute;
}
#casestudy a:hover {
	opacity: 0.9;
}
#casestudy li .commentbox {
	background-color: #000;
    margin: 170px 0 0;
    opacity: 0.8;
    padding: 10px;
}
#casestudy li .commentbox p.comment {
	background: rgba(0,0,0,0.3);
	color: #FFF;
}
#casestudy li .commentbox p.name {
	background: rgba(0,0,0,0.3);
	color: #FFF;
	font-size: 12px;
	position: relative;
	text-align: right;
}


#casestudy li .graybox {
	padding: 10px;
	background-color: #f5f5f5;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
#casestudy li .graybox p.category {
	font-size: 12px;
}
#casestudy li .graybox p.shopname {
	font-size: 14px;
	font-weight: bold;
    padding: 0 0 20px;
}
#casestudy li .graybox p.sub {
	font-size: 12px;
	color: #666;
	line-height: 1.5em;
}

/*casestudy_TV*/
#casestudy_tv {
	background-color: #f5f5f5;
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px;
    width: 930px;
}
#casestudy_tv .left {
	float: left;
    margin-right: 10px;
    width: 48%;
}
#casestudy_tv .left p {
	font-size: 14px;
    padding: 20px 0 0;
}
#casestudy_tv .left p a {
	color: #222;
}
#casestudy_tv .left p a:hover {
	color: #666;
}
#casestudy_tv .left p.title {
	font-size: 28px;
    font-weight: bold;
    line-height: 1.3em;
}
#casestudy_tv .left p.mini {
    padding: 28px 0 0;
	font-size: 12px;
}
#casestudy_tv .left p.mini a {
	color: #01aaf1;
}
#casestudy_tv .left p.mini a:hover {
	text-decoration: underline;
}
#casestudy_tv .right {
	float: right;
	width: 50%;
}
#casestudy_tv .right img {
}


/*shopinfo*/
#shopinfo {
	width: 1000px;
	margin: 80px auto;
}
#shopinfo p {
	border-bottom: 1px solid #000;
    font-weight: bold;
    padding-bottom: 10px;
}
#shopcomment {
	width: 720px;
	margin: 80px auto;
}
#shopcomment .inner {
	margin: 0 0 20px;
}
#shopcomment p.comment {
	font-size: 40px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    font-weight: bold;
    line-height: 50px;
}
#shopcomment p.name {
	text-align: right;
}
#shopcomment .qa {
	margin: 20px 0 50px;
}
#shopcomment .qa img {
	margin: 20px 0 0;
}
#shopcomment .qa h1 {
    font-weight: bold;
}
#shopcomment .qa p.title {
	border-left: 5px solid #249fdb;
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 30px 0;
    padding-left: 15px;
    position: relative;
}
#shopcomment .qa p.answer {
	background-color: #f5f5f5;
    line-height: 1.5em;
    margin: 10px 0 20px;
    padding: 20px;
}
#shopcomment .qa p span.name {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
#shopcomment .qa p span.bold {
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
#shopcomment .qa p.answer a {
	color: #01aaf1;
}
#shopcomment .qa p.answer a:hover {
	text-decoration: underline;
}
#shopinfo_footer {
	border-top: 1px solid;
    margin: 80px auto;
    padding: 10px 0 0;
    text-align: center;
    width: 1000px;
}
#shopinfo_footer p a {
	color: #FFF;
}
#shopinfo_footer p a:hover {
	color: #DDD;
}
#shopinfo_footer p {
	background-color: #000;
    border-radius: 2px;
    color: #fff;
    height: 25px;
    line-height: 25px;
    padding: 10px;
    text-align: center;
    width: 200px;
}


/*howtouse*/
#howtouse {
	width: 1000px;
	margin: 80px auto;
}
#howtouse .arrow {
	margin: 40px auto;
    overflow: hidden;
    text-align: center;
    width: 1000px;
}
#howtouse .title {
}

#howtouse .title h1 {
	border-bottom: 1px solid #000;
    font-size: 30px;
    font-weight: bold;
    padding: 0 0 15px;
}
#howtouse .title h1 span.step {
	background-color: #000;
    border-radius: 2px;
    color: #fff;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
    margin-right: 20px;
    padding: 5px 15px;
}
#howtouse .title .stepbox {
	margin: 15px 0;
	overflow: hidden;
}
#howtouse .title .stepbox .left {
	float: left;
	width: 450px;
}
#howtouse .title .stepbox .left .stepnumber {
	font-size: 25px;
    font-weight: bold;
    margin: 30px 0;
}
#howtouse .title .stepbox .left p {
    line-height: 1.5em;
}
#howtouse .title .stepbox .right {
	float: right;
	border: 1px solid #DDD;
}
#howtouse .title .stepbox .right img {
    padding: 20px;
    width: 480px;
}
#recipe_btn {
	width: 1000px;
	margin: 80px auto;
}
#recipe_btn .btn {
	text-align: center;
}



/*footerinfo*/
#footerinfobox {
	width: 100%;
	margin: 0;
	padding: 0 0 50px;
	background-color: #f9f9f9;
}
#footerinfobox .inner {
	width: 980px;
	margin: 0 auto;
}
#footerinfobox .inner h1 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 100px 0;
	text-align: center;
}
#footerinfobox .inner h2 {
	border-bottom: 1px dotted #ccc;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 4px;
}
#footerinfobox .inner h3 {
	background: url("../img/icon/icon_q.png") no-repeat scroll 0px 0px;
	border-bottom: 1px dashed #ccc;
    color: #01aaf1;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
	padding: 8px 0 10px 60px;
}
#footerinfobox .inner p {
	margin: 10px 0;
    padding: 8px 0 10px;
}
#footerinfobox .inner p.answer {
	background: url("../img/icon/icon_a.png") no-repeat scroll 0px 8px;
	margin: 10px 0 80px;
	padding: 8px 0 10px 60px;
	line-height: 3em;
}
#footerinfobox .inner ul {
	margin: 30px 0;
}

#footerinfobox .inner table {
	border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
	margin: 20px 0;
}
#footerinfobox .inner td {
	border: 1px solid #ccc;
    font-size: 14px;
    padding: 10px;
    text-align: left;
	background-color: #fff;
}
#footerinfobox .inner td.name {
	background-color: #f5f5f5;
    border: 1px solid #ccc;
    text-align: center;
    width: 30%;
}
#footerinfo {
	background-color: #f9f9f9;
	text-align: center;
	padding: 20px 0;
	overflow: hidden;
}
#footerinfo .footerlist {
	width: 700px;
	margin: 0 auto;
}
#footerinfo .footerlist li {
	border-right: 1px solid #ddd;
    float: left;
    font-size: 13px;
    padding: 0 15px;
    text-align: center;
}
#footerinfo .footerlist li a {
	font-weight: normal;
	color: #161616;
}
#footerinfo .footerlist li a:hover{
	font-weight: normal;
	color: #999;
}

/*footerinfo*/
#footerinfo {
}
#footerinfo .inner {
	width: 980px;
	margin: 0 auto;
}
#footerinfo h1 {
	text-align: center;
	font-size: 18px;
}
#footerinfo p {
	text-align: left;

}


/*footer*/
#footer {
	background-color: #EEE;
	width: 100%;
	margin: 0;
	overflow: hidden;
}
#footer .copyright {
	color: #999;
	font-size: 12px;
	text-align: center;
	margin: 0;
	padding: 20px 0;
}

/*popup*/
#lean_overlay{
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #161616;
  display: none;
}
#popup, #popup02{
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  display: none;
  padding: 20px;
  width: 600px;
  border-radius: 10px;
 }
.modal_close{
  position: absolute;
  top: 12px;
  right: 12px;
  display: block;
  width: 14px;
  height: 14px;
  background: url(../img/modal_close.png);
  z-index: 2;
}
#popup .top, #popup02 .top{
	margin: 20px 0;
}
#popup .top .icon, #popup02 .top .icon {
	width: 100%;
	text-align: center;
}
#popup .top .title{
	font-size: 30px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: 20px 0;
    text-align: center;
    width: 100%;
}
#popup h1, #popup02 h1{
	border-left: 5px solid #161616;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 0 0 10px;
    text-align: left;
}
#popup .main, #popup02 .main {
}
#popup .main .box, #popup02 .main .box{
	border: 1px solid #DDD;
	border-radius: 2px;
	margin: 10px 0;
	padding: 15px;
}
#popup02 .main .limitcol {
	background-color: #ebebeb;
    border-radius: 2px;
    box-shadow: 0 2px 0 #d1d1d1;
    float: left;
    font-size: 14px;
    margin:  5px 5px 5px 0;
    padding: 5px;
    text-align: center;
}
#popup .main .box span.marker {
	font-weight: bold;
	color: #f53a67;
}
#popup .main table {
	width: 100%;
}
#popup .main table td.title {
	background-color: #161616;
    color: #fff;
    padding: 5px 8px;
    text-align: center;
    width: 18%;
	font-size: 12px;
	border-radius: 2px
}
#popup .main table td.eiyou {
    padding: 5px 8px;
    width: 82%;
}
#popup .food {
	margin: 20px 0;
}
#popup .food table {
	width: 100%;
}
#popup .food table td.title {
	background-color: #161616;
    color: #fff;
    padding: 5px 8px;
    text-align: center;
    width: 25%;
	font-size: 12px;
	border-radius: 2px
}
#popup .food table td.food {
    padding: 5px 8px;
    width: 75%;
}

.segmented {
    display: inline-block;
}
.segmented .label {
    background-color: #eee;
    background-image: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    border: 1px #ccc;
    border-style: solid none solid solid;
    cursor: pointer;
    float: left;
    padding: 8px;
    text-align: center;
    text-shadow: 1px 1px #fff;
    width: 60px;
    font-size: 12px;
}
.segmented :first-child .label {
    border-radius: 4px 0 0 4px;
}
.segmented :last-child .label {
    border-radius: 0 4px 4px 0;
    border-right-style: solid;
}
.segmented input {
    display: none;
}
.segmented input:checked + .label {
    background-color: #00f;
    background-image: linear-gradient(to bottom, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    border-color: hsl(214, 90%, 60%);
    box-shadow: 3px 2px 10px rgba(0,0,0,.2) inset, -3px 2px 10px rgba(0,0,0,.2) inset;
    color: #fff;
    text-shadow: -1px -1px rgba(0,0,0,.3);
}

.segmented .label {
    background-image: -moz-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: -ms-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
    background-image: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
}
.segmented input:checked + span {
    background-image: -moz-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -ms-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
    background-image: -webkit-linear-gradient(to bottom, hsl(214,90%,40%) 0%, hsl(214,90%,70%) 100%);
}