@charset "utf-8";
/* ===========================================================================================

nasuluckitchen > useful.css

=========================================================================================== */
/* 外注さんがページに合わせてHTMLに追加するclass 「.longと.first_content_text」*/
.left_content .long{
	width: 730px;
	margin:10px 0 0 27px;
}

.first_content_text {
	margin: 0 0 30px 0;
}
/* ======================================================================================== */


.content {
	width: 948px;
	margin: 0 auto;
}

.content h1 {
	margin: 0 auto;
}

.content h1 img, .right_img img {
	border: 1px solid #cccccc;
}

.content_area {
	width: 825px;
	margin: 30px auto 0;
	padding: 0 20px;
	overflow: hidden;
}

.left_text {
	width: 520px;
	float: left;
}
.lead_text{
	width:45em;
	line-height: 1.7;
}

.left_text p:not(:nth-of-type(1)) {
	margin: 20px 0 0 0;
}
.first_right_img {
	width: 298px;
	height:223px;
	float: right;
	margin:0 0 0 1.2rem;
}

.flex_text{
	line-height:1.7;
}
/* ========================================================================================
		栽培カレンダー
		---------------------------------------------------------------------------------------
	 	#calendar
======================================================================================== */	
#calendar {
	width: 798px;
	margin: 50px auto 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#calendar h2 {
	width: 189px;
}

.cultivation_calendar {
	width: 594px;
	margin:-10px 0 10px;
}


/*カレンダー 時期テキスト*/
.season{
	/* width:600px; */
	font-weight: bold;
	color:#452700;
	font-size:.85rem!important;
    margin:10px 0 10px 100px;
}
.beige{
    background:#e2caab;
	border-radius:30px;
	font-size:.9rem!important;
	font-weight: bold;
	color:#754100;
	padding: 5px 15px;
	margin-right:.5rem;
}
.blue{
    border-radius:30px;
	background:#b7cfec;
	font-size:.9rem!important;
	font-weight: bold;
	color:#004a89;
	padding: 5px 15px;
		margin-right:.5rem;
}
.green{
    border-radius:30px;
	background:#b8e5b5;
	font-size:.9rem!important;
	font-weight: bold;
	color:#227c18;
	padding: 5px 15px;
}


/* 地域の色分けについて */
.color_coding {
	margin: 5px 0 0 0;
	width: 100%;
	background: #f8f8e5;
	padding: 20px 0;
}

.area_list {
	width: 670px;
	margin: 0 auto 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.area_list dt {
	width: 100%;
	text-align: center;
}

.area_list dd {
	width: 206px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	border: 2px solid #000;
	margin: 20px 0 0 0;
}

.area_list dd span:nth-of-type(2) {
	text-align: center;
	background: #fff;
	padding: 5px 0;
	border-top: 2px solid #000;
}

/* 注釈 */
.attention {
	width: 654px;
	margin: 7px auto 0;
	padding: 0 0 0 1em;
}

.attention span {
	margin: 0 0 0 -1em;
}
.ondan{
	padding:.3rem;
	background: #ffe097;
	color: #f18200;
	text-align: center;
	font-weight:bold;
}
.chukan{
	padding:.3rem;
	background: #cfe89d;
	color: #609200;
	text-align: center;
	font-weight:bold;
}
.kanrei{
	padding:.3rem;
	background: #b0dff3;
	color: #0185bc;
	text-align: center;
	font-weight:bold;
}


/* ========================================================================================
		○○を作るのに必要な資材
		---------------------------------------------------------------------------------------
	 	.material 
======================================================================================== */	
.material {
	width: 790px;
	margin: 35px auto 0;
}

.material dt {
	background: url(../image/bg_material.png) 0 0 no-repeat;
	width: 790px;
	margin: 0 auto 0;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	line-height: 5.4;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.material dt .ico {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.title_text {
	margin: -20px 18px;
	font-size:23px;
}

/* 使用する資材のアイコン部分 */
.use_material {
	width: 730px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
}

.use_material.short_space {
	width: 540px;
}

.use_material li {
	margin: 20px 30px 0 0;
	text-align: center;
	width: 160px;
	font-size: 18px;
	font-weight: bold;
	color: #00566b;
}

/* 配置によって余白の指定が変わるため一部ここで指定 */
.use_material li:nth-of-type(4n) {
	margin: 20px 0 0;
}

.use_material li:nth-last-of-type(1) {
	margin: 20px 0 0;
}

/* 使う資材が5～6個or9個の場合 */
.use_material.short_space li:nth-of-type(4n) {
	margin: 20px 30px 0 0;
}

.use_material.short_space li:nth-of-type(3n) {
	margin: 20px 0 0;
}

/* ========================================================================================
		育て方などの説明部分
		---------------------------------------------------------------------------------------
	 	.howto_box 
======================================================================================== */	
/*.howto_box {
	width: 890px;
	margin: 30px auto 0;
}*/

.howto_box,
.howto_box02 {
	width: 780px;
	margin: 30px auto 0;
}

.howto_box h2,
.howto_box02 h2 {
	width: 766px;
	width: calc(890px - 20px);
	margin: 20px auto 0;
	padding: 4px 0 0 20px;
	background: url(../image/bg_ttl_line.png) 0 0 no-repeat;
	font-size: 20px;
}

.howto_conotent,
.howto_conotent02 {
	width:750px;
	margin: 20px 0 0 20px;
}


.howto_conotent > p:not(:nth-of-type(1)) {
	margin: 20px 0 0 0;
}

.howto_conotent > * > p:not(:nth-of-type(1)) {
	margin: 20px 0 0 0;
}

.howto_conotent > * > dt:not(:nth-of-type(1)) {
	margin: 30px 0 0 0;
}

dl{
	width: 750px;
}
dt{
	width:auto;
}
dd{
	margin-left:5px;
	/*margin-right:10px;*/
	font-size:100%!important;
}

dd figure.waku{
	border:1px solid #ccc;
	
}

.flex{
	display: flex;
}

.txtimg{
	/*width: 370px;*/
	margin-right:20px;
}



/* 左のテキスト部分 */
.left_content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}



/* 右の画像部分 */
.right_img {
	float: right;
}

.right_img02{
	float:right;
	margin: 0 0 .5rem 1.5rem;
}

.right_img img {
	display: block;
}

/* figre内の画像が2つ以上だった場合 */
.right_img img:not(:nth-of-type(1)) {
	margin: 20px 0 0 0;
}

/* アイコン */

[class^="ico_"] {
	padding: 2px 0 2px 28px;
	font-size: 18px!important;
	font-weight: bold;
	line-height: 1;
}

.ico_management {
	background: url(../image/ico_young_bud.png) 0 0 no-repeat;
	color: #b4214e;
}

.ico_pest {
	background: url(../image/ico_sick.png) 0 0 no-repeat;
	color: #0a7b8f;
}

/* 料理レシピを見るボタン */
.btn {
	width: 228px;
	margin: 40px auto 0;
}

/* マウスオーバー */
.over:hover {
	opacity: 0.7;
}

/* 管理本文（management_text) */
.management_text{
	padding-left: 1.5em;
	padding-right:1.5em;
	margin-top: 0.5em;
}
.left_content > .management_text{
	width: 466px !important;
}
.shukaku_text{
	padding:0 1.3rem 0 0;
	margin:.5rem 0 0;
	line-height: 1.5;
}
/* h3見出し */
h3 {
  background-color: #F46177;/*文字色*/
  padding: 0.5em 0.5em;/*上下の余白*/
  color: #ffffff;
	font-size: 20px;
}
h3{
background: #F46177;
    display: block;
    padding: 6px 0;
    color: #ffffff;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px;
    width: 130px;
    text-align: center;
	  margin-left: -5px;
}
/*栄養価*/
.howto_box_food_value {
    width: 720px;
    margin: 30px auto 0;
}

.howto_conotent_food_value{
	  width: 720px;
    margin: 5px auto 0;
    overflow: hidden;
		background: #EFD4D8;
		box-shadow: 0px 0px 0px 5px #EFD4D8;
		border: dashed 2px #F46177;
		padding: 0.2em 0.5em;
}

.food_value_text{
	padding: 10px 10px
}

/*文字間調整*/
.ls_005{
	letter-spacing: 0.05em;
}

.ls_pack_005{
	letter-spacing: -0.05em;
}