@charset "utf-8";

html{
	font-size: 0.813rem;
}

#contents{
	font-size: 1.077rem;
}

#contents .top {
	background-image: url("/support/ichigan/enjoy/magazine/zoo/images/index_top.png");
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto 4em;
	width: 100%;
	min-height: 282px;
    display: flex;
	flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
}

#contents .top h1 {
	color: #000;
	border-bottom: #000 solid 2px;
    margin: 0;
	padding: 0.3em 1.5em 0.5em 1.5em;
    font-size: 2.5rem;	
}

#contents .top h1 span{
	padding-right: 1em;
	font-size: 2.5rem
}

#contents section {
	margin: 3em 0.1em;
}

#contents .flex {
	display: flex;
	justify-content: space-evenly;
}

#contents h2.title {
	border-bottom: 1px solid #D0D0D0;
	border-bottom-color: #000;
	font-size: 1.23008rem;
	padding: 0 0 0.5em 1em;
	margin-bottom: 1em;
}

#contents h3 {
	margin: 0 0 1em 1em;
	font-size: 1.1532rem;
}

#contents p {
	margin: 0 0 1em 1em;
}

#contents figure,
#contents .pct {
	text-align: center;
	margin: 2em 0;
}

#contents .fgt_left figcaption {
	text-align: left;
}

#contents .disc {
    margin: 1em;
}

#contents .disc li {
    list-style-type: disc;
	margin-left: 1.5em;
}

#contents .onepointArea {
	background: #FAF5C8;
    margin: 2em 1em;
    padding: 1.5em 1em;
}

#contents .onepointArea p {
	font-weight: bold;
}

#contents .onepointArea p {
	background: url(/support/ichigan/enjoy/magazine/share/images/ico_point.png) no-repeat;
    margin: 0px;
    padding: 10px 0px 0px 45px;
    min-height: 36px;
}

#contents .onepointArea ul {
    margin: 0.5em 0 0 2.5em;
}

#contents .onepointArea ul li {
    padding-bottom: 0.5em;
}

#contents .onepointArea ul li:last-child {
    padding-bottom: 0;
}

#contents .singleBtn {
	display: inline-block;
	margin: 1em 0 2em 1em;
}

#contents .singleBtn a {
	display: block;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	padding: 0.7em 1em;
	color: #333;
	box-sizing: border-box;
}

#contents .singleBtn a:hover,
#contents .singleBtn a:focus {
	text-decoration:none;
	color:#000;
	opacity:0.7;
}

#contents .singleBtn.topLink {
	display: block;
	margin: 3em auto;
	width: 15em;
}

#contents span.textLink {
    background: url(/support/share/images/arrow_black.gif) no-repeat;
    background-position: 0 6px;
    padding-left: 1em;
    display: inline-block;
}


@media (max-width: 640px){
	#contents .top{
        background-size: cover;
		min-height: 140px;
	}
	
	#contents .top h1{
        font-size: 2rem;
		padding: 0.3em 2em 0.5em 2em;
		text-align: center;
    }
	
	#contents .top h1 span{
		display: block;
		padding: 0;
		font-size: 1.5rem;
		font-weight: normal;
	}
	
	#contents h2.title {
		padding-left: 0;
	}

	#contents h3 {
		margin-left: 0;
	}

	#contents p {
		margin-left: 0;
	}

	#contents .flex {
		flex-direction: column;
	}
	
	#contents figure img, 
	#contents .pct img {
		max-width: 400px;
		width: 100%
	}
	
	#contents .disc {
		margin: 1em 0;
	}
	
	#contents .onepointArea {
		margin: 2em 0;
	}
	
	#contents .onepointArea ul {
		margin-left: 2em;
	}

}

@media (max-width: 540px){
	#contents .top h1 {
		padding: 0.3em 1.5em 0.5em 1em;
    }
}

@media (max-width: 460px){	
	#contents .top {
		background-size: contain;
		margin-bottom: 0;
	}
	
	#contents .top h1 {
		padding: 0.3em 1.5em 0.3em 1.5em;
    }
		
	#contents .top h1 span {
		display: block;
		padding: 0;
		font-size: 1.3rem;
		font-weight: normal;
	}
}

@media (max-width: 390px){	
	#contents .top h1 {
		padding: 0.3em 0.8em 0 0.8em;
    }
}