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

旬の花と緑を楽しむ

------------------------------------------------------------*/

/* h2
--------------------------------------------------*/
.sp_seasonal_h2 {
	margin: 40px 0 10px;
	text-align: center;
}
.sp_seasonal_h2 img {
	display: inline;
}

/* リード分
--------------------------------------------------*/
.sp_seasonal_lead {
	margin-top: 20px;
	text-align: center;
}

/* 豆知識
--------------------------------------------------*/
.sp_seasonal_knowledge {
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	background: url(../img/img/knowledge_bg_middle.gif) repeat-y left top;
	background-size: 100% auto;
}
.sp_seasonal_knowledgeOuter {
	width: 100%;
	background: url(../img/img/knowledge_bg_bottom.gif) no-repeat left bottom;
}
.sp_seasonal_knowledgeInner {
	width: 100%;
	padding: 0 30px 35px;
	background: url(../img/img/knowledge_bg_top.gif) no-repeat left top;
	text-align: center;
}
.sp_seasonal_knowledge h3 {
	margin-bottom: -.5em;
	padding-top: 30px;
	color: #4c4c4c;
	font-size: 22px;
	font-weight: bold;
}
.sp_seasonal_knowledge .language {
	margin-top: 1em;
}
.sp_seasonal_knowledge .language.tal {
	text-align: left;
}
.sp_seasonal_knowledge .languageList {
	text-align: left;
}
.sp_seasonal_knowledge .languageList dl:first-child {
	float: left;
	width: 48%;
}
.sp_seasonal_knowledge .languageList dl:last-child {
	float: right;
	width: 48%;
}
.sp_seasonal_knowledge .languageList dl dt {
	margin-top: 1em;
	font-weight: bold;
}
.sp_seasonal_knowledge .box {
	margin-top: 20px;
	padding: 30px;
	background: #fbedf1;
}
.sp_seasonal_knowledge .box ul li:not(:first-of-type) {
	margin-top: 1em;
}
.sp_seasonal_knowledge .box .inner {
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	text-align: left;
}
.sp_seasonal_knowledge .box .type {
	float: left;
	width: 260px;
	margin-top: 20px;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	text-align: left;
	vertical-align: top;
}
.sp_seasonal_knowledge .box .type .pic img {
	border-radius: 6px;
}
.sp_seasonal_knowledge .box .note {
	clear: both;
	padding-top: 10px;
}
.sp_seasonal_knowledge .section {
	margin-top: 20px;
	text-align: left;
}
.sp_seasonal_knowledge .section h4 {
	font-weight: bold;
}
.sp_seasonal_knowledge .type:nth-child(1),
.sp_seasonal_knowledge .type:nth-child(2) {
	margin-top: 0;
}
.sp_seasonal_knowledge .type:nth-child(odd) {
	margin-right: 7px;
}
.sp_seasonal_knowledge .type:nth-child(even) {
	margin-left: 7px;
}
.sp_seasonal_knowledge .type h4 {
	margin: 5px 0;
}
@media (max-width: 768px) {
	.sp_seasonal_knowledge,
	.sp_seasonal_knowledgeOuter,
	.sp_seasonal_knowledgeInner
	 {
		background: #fbedf1;
	}
	.sp_seasonal_knowledgeInner{
		padding: 0 20px 20px;
	}
	.sp_seasonal_knowledge .box {
		padding: 0;
	}
	.sp_seasonal_knowledge .box .type {
		width: 100%;
		margin:  15px auto !important;
	}
}

/* 花と緑の講座
--------------------------------------------------*/
.sp_seasonal_course {
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	background: url(../img/img/course_bg_middle.gif) repeat-y left top;
	background-size: 100% auto;
}
.sp_seasonal_courseOuter {
	width: 100%;
	background: url(../img/img/course_bg_bottom.gif) no-repeat left bottom;
}
.sp_seasonal_courseInner {
	width: 100%;
	padding: 30px 30px 35px;
	background: url(../img/img/course_bg_top.gif) no-repeat left top;
}
.sp_seasonal_course h3 {
	text-align: center;
}
.sp_seasonal_course h3 span {
	border: 3px solid #95c076;
	font-size: 18px;
}
.sp_seasonal_course h3 span.theme {
	background: #95c076;
	padding: 2px 20px;
	color: #fff;
}
.sp_seasonal_course h3 span.flower {
	padding: 2px 40px;
}
.sp_seasonal_course .lead {
	display: table-cell;
	padding: 20px 20px 0 30px;
	vertical-align: middle;
}
.sp_seasonal_course .pic {
	display: table-cell;
	padding: 20px 30px 0 0;
	vertical-align: middle;
}
.sp_seasonal_course .point {
	position: relative;
	margin-top: 30px;
	padding: 25px;
	border: 4px solid #dcead2;
	border-radius: 10px;
}
.sp_seasonal_course .point .icon {
	position: absolute;
	top: -31px;
	left: 0;
}
.sp_seasonal_course .point .heading {
	margin-bottom: 10px;
	font-weight: bold;
}
.sp_seasonal_course .point .lead {
	padding: 0 0 20px;
}
.sp_seasonal_course .point dl {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px dotted #8bb56d;
	overflow: hidden;
}
.sp_seasonal_course .point dl.btm {
	border-bottom: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.sp_seasonal_course .point dl dt {
	float: left;
	width: 90px;
	padding: 5px;
	background: #cadfba;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}
.sp_seasonal_course .point dl dd {
	float: right;
	width: 500px;
}
.sp_seasonal_course .point .pointBox {
	
}
.sp_seasonal_course .point .pointBox:not(:first-of-type) {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed #8bb56d;
}
.sp_seasonal_course .point .pointBox h4 span {
	display: inline-block;
	margin-right: 10px;
	padding: 5px;
	background: #cadfba;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}
.sp_seasonal_course .point .pointBox .pic {
	float: left;
	margin: 1em 0 0 0;
	padding: 0;
}
.sp_seasonal_course .point .pointBox .body {
	margin-left: 270px;
}
.sp_seasonal_course .point .pointBox .body h5 {
	margin-top: 1em;
	font-weight: bold;
	font-size: 100%;
}
.sp_seasonal_course .point .pointBox .body ol li {
	margin: 1em 0 0 1em;
	text-indent: -1em;
}
.sp_seasonal_course .point .pointBox .body p {
	margin-top: 1em;
}
.sp_seasonal_course .point .pointBox .body h5 + p {
	margin-top: 0;
}
@media (max-width: 768px) {
	.sp_seasonal_course,
	.sp_seasonal_courseOuter,
	.sp_seasonal_courseInner{
		background: #cadfba;
	}
	.sp_seasonal_courseInner{
		padding: 20px 20px 20px;
	}
	.sp_seasonal_course .box {
		padding: 0;
	}
	.sp_seasonal_course .box .type {
		width: 100%;
		margin:  15px auto !important;
	}
	.sp_seasonal_course h3 {

	}
	.sp_seasonal_course h3 span {
		display: block;
		border: none;
	}
	.sp_seasonal_course h3 span.flower {
		margin-top: 5px;
	}
	.sp_seasonal_course .lead {
		padding: 0 15px 0 0 ;
	}
	.sp_seasonal_course .pic {
		width: 80px;
		padding: 0;
	}
	.sp_seasonal_course .point {
		padding: 20px;
		background-color: #fff;
	}
	.sp_seasonal_course .point dl dt {
		margin-bottom: 5px;
		float: none;		
	}
	.sp_seasonal_course .point dl dd {
		float: none;
		width: 100%;
	}
	.sp_seasonal_course .point .pointBox h4 {
		margin-bottom: 15px;
	}
	.sp_seasonal_course .point .pointBox .body {
		margin: 0;
	}
	.sp_seasonal_course .point .pointBox .pic {
		float: none;
		width: 100%;
		margin: 10px;
	}
}

/* おうちで簡単アレンジメント
--------------------------------------------------*/
.sp_seasonal_arrange {
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	background: url(../img/img/arrange_bg_middle.gif) repeat-y left top;
	background-size: 100% auto;
}
.sp_seasonal_arrangeOuter {
	width: 100%;
	background: url(../img/img/arrange_bg_bottom.gif) no-repeat left bottom;
}
.sp_seasonal_arrangeInner {
	width: 100%;
	background: url(../img/img/arrange_bg_top.gif) no-repeat left top;
	padding: 30px 30px 35px;
}
.sp_seasonal_arrange .lead {
	position: relative;
	width: 100%;
	background-color: #f8f4e9;
}
.sp_seasonal_arrange .leadInner {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.sp_seasonal_arrange .lead:after,
.sp_seasonal_arrange .lead:before,
.sp_seasonal_arrange .leadInner:after,
.sp_seasonal_arrange .leadInner:before {
	background-color: #fff;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	transition: all .3s ease-out;
}
/* 左上へ配置 */
.sp_seasonal_arrange .lead:after {
	height: 1px;
	left: 5px;
	top: 5px;
	width: 665px;
}
/* 右下へ配置 */
.sp_seasonal_arrange .lead:before {
	bottom: 5px;
	height: 1px;
	right: 5px;
	width: 665px;
}
/* 左下へ配置 */
.sp_seasonal_arrange .leadInner:after {
	bottom: 5px;
	min-height: 270px;
	left: 5px;
	width: 1px;
}
/* 右下へ配置 */
.sp_seasonal_arrange .leadInner:before {
	min-height: 270px;
	right: 5px;
	top: 5px;
	width: 1px;
}
.sp_seasonal_arrange .lead .pic {
	display: table-cell;
	width: 200px;
}
.sp_seasonal_arrange .lead .leadBody {
	display: table-cell;
	width: 475px;
	padding: 20px 50px;
	vertical-align: middle;
}
.sp_seasonal_arrange .lead .leadBody h3 {
	font-weight: bold;
}
.sp_seasonal_arrange .lead .leadBody p {
	margin-top: 20px;
}
.sp_seasonal_arrange .box {
	float: left;
	width: 210px;
	margin-top: 20px;
	vertical-align: top;
}
.sp_seasonal_arrange .box.middle {
	margin-right: 20px;
	margin-left: 20px;
}
.sp_seasonal_arrange .box h3 {
	margin: 20px 0 5px;
	font-weight: bold;
}
.sp_seasonal_arrange .box h3:nth-of-type(1) {
	margin-top: 5px;
}

@media (max-width: 768px) {
	.sp_seasonal_arrange,
	.sp_seasonal_arrangeOuter,
	.sp_seasonal_arrangeInner{
		background: #f9f4e9;
	}
	.sp_seasonal_arrangeInner{
		padding: 20px 20px 20px;
	}
	.sp_seasonal_arrange .leadInner {
		display: block;
	}
	.sp_seasonal_arrange .lead:after,
	.sp_seasonal_arrange .lead:before,
	.sp_seasonal_arrange .leadInner:after,
	.sp_seasonal_arrange .leadInner:before {
		display: none;
	}
	
	.sp_seasonal_arrange .lead .pic {
		display: block;
		width: auto;
		padding: 0;
		margin-bottom: 5px;
	}
	.sp_seasonal_arrange .lead .pic img{
		margin: 0 auto;
	}
	.sp_seasonal_arrange .lead .leadBody {
		display: block;
		width: auto;
		padding: 0;
	}

	.sp_seasonal_arrange .box {
		width: auto;
		float: none;
	}
	.sp_seasonal_arrange .box img{
		margin-left: auto;
		margin-right: auto;
	}
	.sp_seasonal_arrange .box.middle {
		margin-left: auto;
		margin-right: auto;
	}
}

/* バナー
--------------------------------------------------*/
.sp_seasonal_bnr {
	margin-top: 50px;
}

/* 他の月の旬の草花を見る
--------------------------------------------------*/
.sp_seasonal_otherlink {
	padding: 50px 0 5em;
}
.sp_seasonal_otherlink ul {
	overflow: hidden;
	padding-left: 10px;
}
.sp_seasonal_otherlink ul li {
	float: left;
	width: 100px;
	padding: 15px 10px 0;
}
.sp_seasonal_otherlink a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.sp_seasonal_otherlink .bnr {
	margin: 0 auto;
	width: 540px;
	height: 100px;
}

@media (max-width: 768px) {
	.sp_seasonal_otherlink h2 {
		overflow: hidden;
	}
	.sp_seasonal_otherlink h2 img{
		height: 16px;
    width: auto;
    max-width: inherit;
	}
	.sp_seasonal_otherlink ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0 ;
		padding: 0 ;
	}
	.sp_seasonal_otherlink ul li {
		width: 33%;
	}
}