@charset "UTF-8";
/*******************************
 
TopCss
 
*******************************/

#main{
	width: 100%;
	display: block;
	margin-bottom: 100px;
}

#social{
padding-bottom: 60px;
}

#social .layout{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 80px;
margin-bottom: 50px;
}

#social .layout .item:nth-of-type(1){
	flex-basis: 500px;
}

#social .layout .item:nth-of-type(2){
	flex-basis: 270px;
}

#social .layout .item:nth-of-type(2) ul li a.snslink{
display: block;
background: #fff;
text-align: left;
padding: 15px;
position: relative;
margin-bottom: 2px;
}

#social .layout .item:nth-of-type(2) ul li span{
display: block;
background: #fff;
text-align: left;
padding: 15px;
position: relative;
margin-bottom: 2px;
}

#social .layout .item:nth-of-type(2) ul li span a{
font-size: 10px;
position: absolute;
top: 14px;
left: 155px;
}

#social .layout .item:nth-of-type(2) ul li span a:nth-of-type(2){
position: absolute;
top: 35px;
left: 155px;
}

#social .layout .item:nth-of-type(2) ul li span a:before{
color: #fe9865;
margin-right: 5px;
content: "\f0da";
font-family: "FontAwesome";
font-weight: bold;
font-style: normal;
display: inline-block;
}

#latest{
background: #fff;
padding: 50px 0;
}

#latest .title{
margin-bottom: 50px;
}

#latest ul{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

#latest ul li{
flex-basis: 30%;
border-left:1px dotted #ee9e0d;
}

#latest ul li:first-child{
border-left:0;
}

#latest ul li a{
text-align: center;
}

#latest ul li a .img{
background: url(../img/top/latest-bg.jpg) bottom -20px left 20px no-repeat;
display: block;
margin-bottom: 15px;
padding: 0 50px 20px;
}

#latest ul li a .img img{
width: 100%;
height: auto;
}

#latest ul li a .btn{
display: block;
margin-top: 15px;
}

#latest ul li a .title-hikari img{
width: 150px;
height: auto;
}

#latest ul li a .title-natural img{
width: 80px;
height: auto;
}


#contents{
padding-top: 70px;
padding-bottom: 70px;
}

#contents img{
width: 100%;
height: auto;
}


.flex2{
padding-top: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.flex2 .item{
flex-basis: 49%;
}


/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){

#main{
	width: 100%;
	display: block;
	margin-bottom: 30px;
}

#social{
padding-bottom: 60px;
}

#social .layout{
display: block;
padding: 0;
margin-bottom: 50px;
}

#social .layout .item:nth-of-type(1){
	flex-basis: auto;
}

#social .layout .item:nth-of-type(2){
	flex-basis: auto;
	padding-top: 30px;
}

#latest{
background: #fff;
padding: 50px 0;
}

#latest .title{
margin-bottom: 50px;
}

#latest ul{
display: block;
}

#latest ul li{
flex-basis: auto;
border-left:0;
margin-bottom: 50px;
}

#latest ul li:first-child{
border-left:0;
}

#latest ul li a{
text-align: center;
}

#latest ul li a .img{
background: url(../img/top/latest-bg.jpg) bottom -20px left 20px no-repeat;
display: block;
margin-bottom: 15px;
padding: 0 50px 20px;
}

#latest ul li a .img{
max-width: 300px;
margin: 0 auto 20px;
}


#contents{
padding-top: 50px;
padding-bottom: 30px;
}

#contents img{
width: 100%;
height: auto;
}


.flex2{
padding-top: 30px;
display:block;
}

.flex2 .item{
flex-basis: auto;
margin-bottom: 30px;
}

}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
}