@charset "UTF-8";
/* CSS Document */

.popup {
	width: 480px;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
}

#sp_popup {
	margin: 0 5%;
	background: #fff;
	border-radius: 10px;
	padding: 25px 0 0;
}




/*********************************
+
+季節　タイトル
+
*********************************/
/***はる***/
.popup .spr_title{
	color: #f171a7;
	font-weight: bold;
	font-size: 50px;
	margin: 0px 0px 20px 0px;
	text-align: center;
	line-height: 100%;
}
.popup .spr_title:before {
	content:" ";
	margin: -5px 10px 0 0;
	display:inline-block;
	width:26px;
	height:32px;
	background:url(../img/spring/st01.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
.popup .spr_title:after {
	content:" ";
	margin: -5px 0 0 7px;
	display:inline-block;
	width:31px;
	height:27px;
	background:url(../img/spring/st02.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
/***なつ***/
.popup .sum_title{
	color: #246cda;
	font-weight: bold;
	font-size: 50px;
	margin: 0px 0px 20px 0px;
	text-align: center;
	line-height: 100%;
}
.popup .sum_title:before {
	content:" ";
	margin: 0 10px 0 0;
	display:inline-block;
	width:34px;
	height:34px;
	background:url(../img/summer/st01.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
.popup .sum_title:after {
	content:" ";
	margin: 0 0 0 10px;
	display:inline-block;
	width:31px;
	height:39px;
	background:url(../img/summer/st02.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
/***あき***/
.popup .aut_title{
	color: #dc2c00;
	font-weight: bold;
	font-size: 50px;
	margin: 0px 0px 20px 0px;
	text-align: center;
	line-height: 100%;
}
.popup .aut_title:before {
	content:" ";
	margin: 0 10px 0 0;
	display:inline-block;
	width:41px;
	height:38px;
	background:url(../img/autumn/st01.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
.popup .aut_title:after {
	content:" ";
	margin: 0 0 0 10px;
	display:inline-block;
	width:41px;
	height:34px;
	background:url(../img/autumn/st02.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
/***ふゆ***/
.popup .win_title{
	color: #246cda;
	font-weight: bold;
	font-size: 50px;
	margin: 0px 0px 20px 0px;
	text-align: center;
	line-height: 100%;
}
.popup .win_title:before {
	content:" ";
	margin: 0 10px 0 0;
	display:inline-block;
	width:36px;
	height:42px;
	background:url(../img/winter/st01.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}
.popup .win_title:after {
	content:" ";
	margin: 0 0 0 10px;
	display:inline-block;
	width:19px;
	height:45px;
	background:url(../img/winter/st02.png);
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
}









/*********************************
+
+いきもの名・植物名　タイトル
+
*********************************/
.popup .ribon{
	position: relative;
	margin: 0px 0px 15px;
}
.popup .ribon .img {
	text-align: center;
}
.popup .ribon .name {
	font-size: 24px;
	text-align: center;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	line-height: 60px;
}
/*IEのみに適用*/
@media all and (-ms-high-contrast: none){
.popup .ribon .name {
	line-height: 1.5;
}
}

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
.popup .ribon .name {
	line-height: 1.5;
}
}
#sp_popup .ribon{
	position: relative;
	margin: 0px 3% 15px;
}
#sp_popup .ribon .img {
	text-align: center;
}
#sp_popup .ribon .name {
	font-size: 18px;
	text-align: center;
	position: absolute;
	left: -1px;
	top: 0px;
	right: 0px;
	line-height: 56px;
}



/*********************************
+
+いきもの名・植物名　特徴
+
*********************************/
.popup .bg.spr , #sp_popup .bg.spr {
	background: #B4D849 url(../img/spring/popup_bg.png) no-repeat center top;
	background-size: 100% auto;
	border-radius: 0 0 10px 10px;
	padding: 0px 0px 35px;
}
.popup .bg.sum , #sp_popup .bg.sum {
	background: #35C807 url(../img/summer/popup_bg.png) no-repeat center top;
	background-size: 100% auto;
	border-radius: 0 0 10px 10px;
	padding: 0px 0px 35px;
}
.popup .bg.aut , #sp_popup .bg.aut {
	background: #F5DB64 url(../img/autumn/popup_bg.png) no-repeat center top;
	background-size: 100% auto;
	border-radius: 0 0 10px 10px;
	padding: 0px 0px 35px;
}
.popup .bg.win , #sp_popup .bg.win {
	background: #B8CEDD url(../img/winter/popup_bg.png) no-repeat center top;
	background-size: 100% auto;
	border-radius: 0 0 10px 10px;
	padding: 0px 0px 35px;
}

.popup .bg .img_area {
	text-align: center;
	margin: 0px 0px 30px;
}
.popup .bg .img_area ul li {
	display: inline-block;
}
.popup .bg .img_area ul .prev {
	margin: 0 10px 0 0;
	width:20%;
}
.popup .bg .img_area ul .next {
	margin: 0 0 0 10px;
	width:20%;
}
.popup .bg .img_area ul .img {
	width: 41%;
	box-shadow:6px 6px 10px -3px rgba(0,0,0,0.2);
}
.popup .bg .feature {
	background: #FFF;
	margin: 0px auto 20px;
	width: 85%;
	padding: 10px 10px 20px;
}
.popup .bg .feature .sst {
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background: #9f6b54;
	line-height: 40px;
	margin: 0px 0px 15px;
	border-radius: 6px;
}
.popup .bg .feature ul {
	margin: 0 0 20px;
}
.popup .bg .feature ul li {
	text-indent: -1.0em;
	margin: 0 0 5px 1.0em;
}
.popup .bg .feature ul li span{
	color:#b49870;
 }

#sp_popup .bg .img_area {
	text-align: center;
	margin: 0px 3% 15px;
}
#sp_popup .bg .img_area ul li {
	display: inline-block;
}
#sp_popup .bg .img_area ul .prev {
	margin: 0 5px 0 0;
	width: 22%;
}
#sp_popup .bg .img_area ul .next {
	margin: 0 0 0 5px;
	width: 22%;
}
#sp_popup .bg .img_area ul .img {
	box-shadow:6px 6px 10px -3px rgba(0,0,0,0.7);
	width: 45%;
}
#sp_popup .bg .img_area ul .img img {
	width: 100%;
	height: auto;
}
#sp_popup .bg .feature {
	background: #FFF;
	margin: 0px auto;
	width: 85%;
	padding: 10px 10px 20px;
}
#sp_popup .bg .feature .sst {
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background: #9f6b54;
	line-height: 40px;
	margin: 0px 0px 10px;
	border-radius: 6px;
}
#sp_popup .bg .feature ul {
	margin: 0 0 20px;
}
#sp_popup .bg .feature ul li {
	text-indent: -1.0em;
	margin: 0 0 5px 1.0em;
}
#sp_popup .bg .feature ul li:first-letter{
	color:#b49870;
 }
.popup .bg .btn {
	margin: 0px auto;
	width: 140px;
}
#sp_popup .back_bt {
	text-align: center;
	margin: 20px auto 0px;
	width:  30%;
}

/* 21.4.21追加　*/
.feature .img-clm1 , .feature .img-clm2 , .feature .img-clm3 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.feature .img-clm2 li {
	width: 50%;
	text-align:center;
}
.feature .img-clm3 li {
	width: 30%;
	text-align:center;
}
#sp_popup .bg .feature .sst.attention , .popup .bg .feature .sst.attention {
	background: #C00;
}