/* header */
.header{
	position: relative;
}

.header img{
	max-width: 100%;
	border-radius: 15px 15px 0 0 / 15px 15px 0 0;
}

.header .slide1, .header .slide2{
	position: absolute;
	font-family: YuMincho, 'Yu Mincho', 'MS PMincho', serif;
	color: white;
	font-size: 1.5em;
	filter: dropshadow(color=#000000,offx=3,offy=3);
	text-shadow: 3px 3px 10px black;
 }

.header .slide1{
	top: 0;
	left: 25px;
}

.header .slide2{
	bottom: 0;
	right: 25px;
}


/* text-info */
.info{
	text-shadow: 1px 1px 3px white;
	line-height: 1.0;
	position: relative;
}

.info p{
	margin-top: 15px;
}

.info .info-text{
	position: absolute;
	top: 0;
	left: 0;
	padding: 4% 5%;
}

/* topics */
#topics #news h3, #topics #blog h3{
	border-radius: 10px;
	padding: 5px 0 5px 20px;
}

#topics #news h3{
	background-color: #ffa500;
}

#topics #blog h3{
	background-color: #77c22a;
}

.topics-wrap{
	border-radius: 10px;
	border: solid 1px #e7e7e7;
	background-color: white;
	overflow: hidden;
}

.entry-wrap{
	margin: 0 10px;
	border-top: 2px dashed black;
	overflow: hidden;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position: left center;
}

#news .entry-wrap{
	/*padding-left: 10px;*/
}

#blog .entry-wrap{
	padding-left: 62px;
}

.entry-wrap:first-child{
	border-top: none;
}

.福祉の駅マルシェ{
	background-image:url(../img/icon/icon_shirogane.png) ;
}

.グループホーム・ポケット{
	background-image:url(../img/icon/icon_pocket.png) ;
}

.グループホーム・パレット{
	background-image:url(../img/icon/icon_pallet.png) ;
}

.グループホーム・トミー{
	background-image:url(../img/icon/icon_tommy.png) ;
}

.グループホーム・マーチ{
	background-image:url(../img/icon/icon_march.png) ;
}

.グループホーム・まきば{
	background-image:url(../img/icon/icon_ghmakiba.png) ;
}

.ジョイフルパークユートピア{
	background-image:url(../img/icon/icon_joyful.png) ;
}

.リヴェールユートピア{
	background-image:url(../img/icon/icon_riveru.png) ;
}

.スタッフブログ{
	background-image:url(../img/icon/icon_blog.png) ;
}

.ボランティアブログ{
	background-image:url(../img/icon/icon_volan.png) ;
}

.社会福祉法人　ユートピアの会本部{
	background-image:url(../img/icon/icon_makiba.png) ;
}

/* shop link banners */
.shop-button a:hover{
	text-decoration: none;
	color: #337ab7;
	text-align: center;
}

#button-form, #button-marche{
	padding: .5em 3em .5em .5em;
	position: relative;
	margin-bottom: 15px;
	line-height: 1.2;
	background-color: #fff2df;
	color: #505050;
	border: 6px solid #ffa500;
	border-radius: 8px;
	font-size: larger;
	text-align: center;
	width: 100%;
	box-shadow: 4px 4px 2px #bbb;
}

#button-form span, #button-marche span{
}

#button-form:hover{
	background-image: url(../img/button_daikon.png);
	background-size: contain;
	background-position: 93% 50%;
	background-repeat: no-repeat;
}

#button-marche:hover{
	background-image: url(../img/button_ichiba.png);
	background-size: contain;
	background-position: 93% 50%;
	background-repeat: no-repeat;
}

/* top-page banners */
.banner{
	margin: 15px auto 0 auto;
}

.banner a:hover{
	text-decoration: none;
	color: #337ab7;
}

.banner .item{
	list-style-type: none;
	padding: 15px 8px 15px 30px;
	margin-bottom: 15px;
	line-height: 1.5;
	background: #fff;
	vertical-align: middle;
	color: #505050;
	border-radius: 8px;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	font-size: larger;
	text-indent: calc(-1em - 8px);
}

.banner .item:before{
	display:inline-block; 
	vertical-align: middle;
	content:'';
	width:1em;
	height: 1em;
	background: #77c22a;
	border-radius: 50%;
	margin: 0 8px 0 1px;
}

.banner .item:hover{
	background: #94cbf7;
}

/* media queries */
@media screen and (min-width:480px) {
	.info img{
		border-radius: 15px;
	}

	#button-marche, #button-form{
		font-size: x-large;
		width: 48%;
		float: left;
	}

	#button-marche{
		margin-right: 2%;
	}

	#button-form{
		margin-left: 2%;
	}
}

@media screen and (min-width:768px){
	.header .slide1, .header .slide2{
		font-size: 2em;
	}

	#news, #blog{
		width: 48%;
		float: left;
	}

	#news{
		margin-right: 2%;
	}

	#blog{
		margin-left: 2%;
	}

	.info .info-text{
		width: 60%;
	}
}

@media screen and (min-width:992px){
	.header .slide1, .header .slide2{
		font-size: 3em;
	}

	.banner{
		margin-top: 0;
	}
}

@media screen and (min-width:1200px){
	.header .slide1, .header .slide2{
		font-size: 3.8em;
	}	
}