@charset "UTF-8";

/* --------------------------------------------
*                        pagetitle
* -------------------------------------------- */

@media screen and (min-width: 481px) {
#pageTitle {
	text-align: center;
	margin: 2em 0 0 0;
	padding: 0 0 8em 0;
	}
#pageTitle h2 {
	font-size: 1.8em;
	color: #ffffff;
	margin: 0;
	padding: 0.2em 2em;
	border: 2px solid #ffffff;
	display: inline-block;
	}
}

@media screen and (max-width: 480px) {
#pageTitle {
	text-align: center;
	margin: 1em 0 0 0;
	padding: 0 0 5em 0;
	}
#pageTitle h2 {
	font-size: 1.4em;
	color: #ffffff;
	margin: 0;
	padding: 0.2em 2em;
	border: 2px solid #ffffff;
	display: inline-block;
	}
}

/* --------------------------------------------
*                        blogTitle
* -------------------------------------------- */

@media screen and (min-width: 481px) {
.blogTitle {
	text-align: center;
	margin: 1em 0 0 0;
	padding: 0 0 6em 0;
	}
.blogTitle h2 {
	font-size: 1.4em;
	color: #333333;
	margin: 0;
	padding: 0 0 1.8em 0;
	}
.blogTitle h3 {
	font-size: 1.2em;
	color: #ffffff;
	margin: 0.8em 0 0 0;
	padding: 0;
	}

}

@media screen and (max-width: 480px) {
.blogTitle {
	text-align: center;
	margin: 1em 0 0 0;
	padding: 0 0 4em 0;
	}
.blogTitle h2 {
	font-size: 1.2em;
	color: #333333;
	margin: 0;
	padding: 0 0 1.6em 0;
	}
.blogTitle h3 {
	font-size: 1em;
	color: #ffffff;
	margin: 0.6em 0 0 0;
	padding: 0;
	}

}

.blogTitle h2 {
	background: url(../images/icon/icon_sizuku.png) no-repeat bottom center;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.blogTitle h2 {
	background: url(../images/icon/icon_sizuku@2x.png) no-repeat bottom center;
	background-size: 18px 28px;
	}
}

/* --------------------------------------------
*                              list
* -------------------------------------------- */

ul {
	list-style: none;
}

.x2box ,
.x3box {
	margin: 0;
	padding: 0;
}

.x3box h3 {
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	}

/*--- x2box x3box ---------------------------------------------------- */

@media screen and (min-width: 960px) {

.x2box ,
.x3box {
	overflow: hidden;
	_zoom: 1;
	}

.x3box ul {
	list-style: none;
	margin: 0 -60px 0 0;
	overflow: hidden;
	_zoom: 1;
	}

.x3box ul li {
	float: left;
	text-align: left;
	width: 280px;
	margin: 0 60px 0 0;
	display: inline;
	}

.x2box ul {
	list-style: none;
	margin: 0 -80px 0 0;
	overflow: hidden;
	_zoom: 1;
	}

.x2box ul li {
	float: left;
	width: 440px;
	margin: 0 80px 0 0;
	display: inline;
	}

}

@media screen and (min-width: 768px) and (max-width: 960px) {

.x3box {
	margin: 0;
	padding: 0;
	}

.x3box ul {
	display: table;
	width: 100%;
	}

.x3box ul li {
	display: table-cell;
	text-align: left;
	vertical-align: top;
	width: 33.333%;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.x3box p {
	margin: 0 20px;
	}

.x2box {
	width: 70%;
	margin: 0 auto;
	padding: 0;
	}

.x2box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

.x2box ul li {
	margin: 0;
	padding: 0;
	}

}

@media screen and (max-width: 767px) {

.x2box ,
.x3box {
	margin: 0;
	padding: 0;
	}

.x3box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

.x3box ul li {
	max-width: 100%;
	margin: 0 0 2em 0;
	padding: 0;
	}

.x3box ul li img {
	max-width: 30%;
	height: auto;
	width /***/:auto;
	}

.x2box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

.x2box ul li {
	max-width: 100%;
	margin: 0 0 1em 0;
	padding: 0;
	}

}

/*--- x3boxImg ---------------------------------------------------- */

.x3boxImg ul {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 481px) {
.x3boxImg ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	margin: 0 0.4em 1.2em 0.4em;
	padding: 0;
	vertical-align: top;
	width: 280px;
	height: 280px;
	overflow: hidden;
	border: 10px solid #ffffff;
	}
.x3boxImg img {
	width: 280px;
	height: auto;
	top: 0;
	}
}

@media screen and (max-width: 480px) {
.x3boxImg ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	margin: 0 auto 1em auto;
	padding: 0;
	vertical-align: top;
	width: 280px;
	height: 280px;
	overflow: hidden;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	}
.x3boxImg img {
	width: auto;
	max-width: 260px;
	height: auto;
	top: 0;

	}
}

.x3boxImg a {
	color: #ffffff;
	text-decoration: none;
}

/*--- x3boxImg02 ---------------------------------------------------- */

.x3boxImg02 ul {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}


@media screen and (min-width: 481px) {
.x3boxImg02 ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	margin: 0 0.4em 1.2em 0.4em;
	padding: 0;
	vertical-align: top;
	width: 300px;
	height: 300px;
	overflow: hidden;
	border: 10px solid #ffffff;
	}
.x3boxImg02 img {
	max-width: 280px;
	height: auto;
	position: relative;

	}
}

@media screen and (max-width: 480px) {
.x3boxImg02 ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	margin: 0 auto 1em auto;
	padding: 0;
	vertical-align: top;
	width: 280px;
	height: 280px;
	overflow: hidden;
	border: 10px solid #ffffff;

	}
.x3boxImg02 img {
	width: 400px;
	max-width: 400px;
	height: auto;
	position: relative;
	left: -25%;
	}
}

.x3boxImg02 a {
	color: #ffffff;
	text-decoration: none;
}

/*--- x2boxImg ---------------------------------------------------- */

.x2boxImg ul {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 481px) {
.x2boxImg ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;	
	margin: 0 1em 2em 1em;
	padding: 0;
	vertical-align: top;
	}
.x2boxImg img {
	width: 100%;
	max-width: 330px;
	height: auto;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	}
}

@media screen and (max-width: 480px) {
.x2boxImg ul li {
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	margin: 0 auto 1em auto;
	padding: 0;
	vertical-align: top;
	}
.x2boxImg img {
	max-width: 100%;
	height: auto;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	}
}

/*--- newsList newspage ----------------------------- */

@media screen and (min-width: 960px) {

#newsList ul {
	list-style: none;
	text-align: left;
	margin: 0;
	border-bottom: 1px solid #cfc0ab;
	}
#newsList li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #cfc0ab;
	}
#newsList li a {
	overflow: hidden;
	}
#newsList li a span {
	display: block;
	float: left;
	width: 6em;
	padding: 1em;
	}
#newsList li a p {
	margin-left: 6em;
	padding: 1em;
	}
#newsList li a {
	color: #333333;
	text-decoration: none;
	}
#newsList li a:hover p,
#newsList li a:hover span {
	color: #ffffff;
	text-decoration: none;
	}
}
@media screen and (min-width: 481px) and (max-width: 960px) {

#newsList {
	}
#newsList ul {
	list-style: none;
	text-align: left;
	margin: 0;
	border-bottom: 1px solid #cfc0ab;
	}
#newsList li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #cfc0ab;
	}
#newsList li a {
	overflow: hidden;
	}
#newsList li a span {
	display: block;
	float: left;
	width: 6em;
	padding: 1em;
	}
#newsList li a p {
	margin-left: 6em;
	padding: 1em;
	}
#newsList li a {
	color: #333333;
	text-decoration: none;
	}
#newsList li a:hover p,
#newsList li a:hover span {
	color: #ffffff;
	text-decoration: none;
	}
}

@media screen and (max-width: 480px) {

#newsList {
	}
#newsList ul {
	list-style: none;
	text-align: left;
	margin: 0;
	border-bottom: 1px solid #cfc0ab;
	}
#newsList li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #cfc0ab;
	}
#newsList li a {
	overflow: hidden;
	}
#newsList li a span {
	display: block;
	padding: 1em 0 0.5em 0 ;
	}
#newsList li a p {
	margin: 0;
	padding: 0 0 1em 0;
	}
#newsList li a {
	color: #333333;
	text-decoration: none;
	}
#newsList li a:hover p,
#newsList li a:hover span {
	color: #ffffff;
	text-decoration: none;
	}
}

/*--- blogList ---------------------------------------------------- */

.blogList {
	margin: 0;
	padding: 0;
}

.blogListImg {
	padding: 10px;
}

.blogList img {
	max-width: 100%;
	height: auto;
	padding: 0;
}

.blogList ul li h3 {
	font-size: 1em;
	line-height: 1.6;
	text-align: left;
	color: #0093b3;
	font-weight: normal;
	margin: 0 20px 10px 20px;
	padding: 0;
}

.blogListP p {
	font-size: 1em;
	line-height: 1.6;
	margin: 0 20px;
	padding: 36px 0 0 0;
}

.blogListP {
	background: url(../images/icon/icon_sizuku_blue.png) no-repeat top center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.blogListP {
	background: url(../images/icon/icon_sizuku_blue@2x.jpg) no-repeat top center;
	background-size: 14px 22px;
	}
}

.blogList ul li a {
	color: #333333;
	text-decoration: none;
	display: block;
	background-color: #ffffff;
}

.blogList ul li a:hover {
	color: #333333;
	text-decoration: none;
	opacity:0.6;
	filter: alpha(opacity=60);

}

.blogListBtm {
	float: right;
	font-size: 0.8em;
	margin: 0;
	padding: 20px;
}

.blogListCat {
	float: left;
	margin: 0;
	padding: 0 10px 0 0;
}

.blogListCat p {
	margin: 0;
	padding: 0.1em 1em;
	background: #f4ede1;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}

.blogListDay {
	float: left;
	margin: 0;
	padding: 0.2em 0 0 0;
}

@media screen and (min-width: 960px) {

.blogList ul {
	list-style: none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: center;
	}

.blogList ul li {
	flex-basis: 300px;
	text-align: left;
	margin: 0 10px 20px 10px;
	padding: 0;
	}

}

@media screen and (min-width: 768px) and (max-width: 960px) {

.blogList ul {
	list-style: none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: center;
	}

.blogList ul li {
	flex-basis: 30%;
	text-align: left;
	margin: 0 10px 20px 10px;
	padding: 0;
	}

}

@media all and (min-width: 481px) and (max-width: 767px) {

.blogList ul {
	list-style: none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: center;
	}

.blogList ul li {
	flex-basis: 46%;
	text-align: left;
	margin: 0 2% 20px 2%;
	padding: 0;
	}

}

@media screen and (max-width: 480px) {

.blogList ul {
	list-style: none;
	}

.blogList ul li {
	max-width: 100%;
	text-align: left;
	margin: 0 0 1em 0;
	padding: 0;
	}

}

/* --------------------------------------------
*                   caption-effect
* -------------------------------------------- */

@media screen and (min-width: 481px) {
figure {
	position: relative;
	overflow: hidden;
	width: 280px;
	height: 280px;
	margin: 0;
	}
figure img {
	margin: 0;
	padding: 0;
	display: block;
	}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	width: 240px;
	-webkit-transition: .3s;
	transition: .3s;
	}
}

@media screen and (max-width: 480px) {
figure {
	position: relative;
	overflow: hidden;
	margin: 0;
	width: 280px; /* minimum width */
	*width: auto; /* for IE7 and below */
	}
figure img {
	margin: 0;
	padding: 0;
	display: block;
	}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	width: 240px;
	-webkit-transition: .3s;
	transition: .3s;
	}
}

figure img {
}

figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	color: #ffffff;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

figcaption h3 {
	top: 100px;
}
figcaption p {
	top: 160px;
}
figure:hover figcaption {
	opacity: 1;
}
figure:hover figcaption h3 ,
figure:hover figcaption p {
	left: 20px;
}
figure:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
figure:hover figcaption p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

/* --------------------------------------------
*                        button
* -------------------------------------------- */

.btnArea{
	margin: 0;
	padding: 0;
}

.btnArea:hover {
	color: #ffffff;
	text-decoration: none;
	opacity:0.6;
	filter: alpha(opacity=60);
}

/*--- btn ----------------------------- */

@media screen and (min-width: 481px) {

.btnArea p {
	text-align: right;
	margin: 0;
	padding: 1.2em 1.2em 0 0;
	}

.btnArea a {
	font-size: 1.2em;
	color: #ffffff;
	text-decoration: none;
	}

.btnMail {
	background: #732b66 url(../images/button/btnbg_mail.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnMail {
	background: #732b66 url(../images/button/btnbg_mail@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnWeb {
	background: #479a23 url(../images/button/btnbg_web.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnWeb {
	background: #732b66 url(../images/button/btnbg_web@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnIllust {
	background: #ac6169 url(../images/button/btnbg_illust.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnIllust {
	background: #ac6169 url(../images/button/btnbg_illust@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnDesign {
	background: #b16f26 url(../images/button/btnbg_design.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnDesign {
	background: #b16f26 url(../images/button/btnbg_design@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnAbout {
	background: #006b8a url(../images/button/btnbg_about.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnAbout {
	background: #006b8a url(../images/button/btnbg_about@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnBlog {
	background: #b16f26 url(../images/button/btnbg_blog.jpg) no-repeat;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.btnBlog {
	background: #b16f26 url(../images/button/btnbg_blog@2x.jpg) no-repeat;
	background-size: 440px 80px;
	}
}

.btnMail ,
.btnWeb ,
.btnIllust ,
.btnDesign ,
.btnAbout ,
.btnBlog {
	background-size: 440px 80px;
	-webkit-background-size: 440px 80px;
	-moz-background-size: 440px 80px;
	-o-background-size: 440px 80px;
	width: 440px;
	height: 80px;
	margin: 2em auto 0 auto;
	padding: 0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	}

}

@media screen and (max-width: 480px) {

.btnArea p {
	text-align: right;
	margin: 0;
	padding: 0.7em 0.4em 0.7em 0;
	}

.btnArea a {
	font-size: 1em;
	color: #ffffff;
	text-decoration: none;
	}

.btnMail {
	background: #732b66 url(../images/button/btnbg_mail@2x.jpg) no-repeat top left;
	}
.btnWeb {
	background: #479a23 url(../images/button/btnbg_web@2x.jpg) no-repeat top left;
	}
.btnIllust {
	background: #ac6169 url(../images/button/btnbg_illust@2x.jpg) no-repeat top left;
	}
.btnDesign {
	background: #b16f26 url(../images/button/btnbg_design@2x.jpg) no-repeat top left;
	}
.btnAbout {
	background: #006b8a url(../images/button/btnbg_about@2x.jpg) no-repeat top left;
	}
.btnBlog {
	background: #b16f26 url(../images/button/btnbg_blog@2x.jpg) no-repeat top left;
	}

.btnMail ,
.btnWeb ,
.btnIllust ,
.btnDesign ,
.btnAbout ,
.btnBlog {
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	width: 100%;
	height: auto;
	margin: 2em auto 0 auto;
	padding: 0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	}

}

/* --------------------------------------------
*                        about
* -------------------------------------------- */

/*--- aboutImgText ----------------------------- */

.aboutImgText {
	margin: 0;
	padding: 0;
}
.aboutText h3 {
	text-align: left;
	font-size: 1.4em;
	color: #cc186d;
	font-weight: normal;
	margin: 0 0 1em 0;
	padding: 0;
}
.aboutText p {
	margin: 0 0 2em 0;
	padding: 0;
}

@media screen and (min-width: 960px) {
.aboutImg {
	float: left;
	width: 260px;
	margin: 0;
	padding: 0;
	}
.aboutText {
	float: left;
	width: 700px;
	text-align: left;
	margin: 0;
	padding: 0;
	}
}

@media screen and (min-width: 481px) and (max-width: 960px) {
.aboutImg {
	float: left;
	width: 25%;
	margin: 0 5% 0 0;
	padding: 0;
	}
.aboutText {
	float: left;
	width: 70%;
	text-align: left;
	margin: 0;
	padding: 0;
	}
}

@media screen and (max-width: 480px) {
.aboutImg {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	}
.aboutText {
	text-align: left;
	margin: 0;
	padding: 0;
	}
}

/* --------------------------------------------
*                      article
* -------------------------------------------- */

.articleText {
	text-align: left;
	margin: 0 0 3em 0;
	padding: 0;
}

.articleText img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

@media all and (min-width: 768px) {
article {
	text-align: center;
	width: 720px;
	margin: 0 auto 3em auto;
	}
.articleText img {
	margin: 2em auto;
	padding: 0;
	border: 10px solid #ffffff;
	}
}

@media all and (min-width: 481px) and (max-width: 767px) {
article {
	text-align: left;
	margin: 0;
	padding: 0 0 3em 0;
	}
.articleText img {
	margin: 2em 0;
	padding: 0;
	border: 10px solid #ffffff;
	}
}

@media all and (max-width: 480px) {
article {
	text-align: left;
	margin: 0;
	padding: 0 0 3em;
	}
.articleText img {
	margin: 1em 0;
	padding: 0;
	border: 10px solid #ffffff;
	}
}

/*--- eyeCatch ----------------------------- */

@media all and (min-width: 768px) {
.eyeCatch {
	text-align: center;
	margin: 0 0 2em 0;
	padding: 0;
	}
.eyeCatch img {
	max-width: 700px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	border: 10px solid #ffffff;
	}
}

@media all and (min-width: 481px) and (max-width: 767px) {
.eyeCatch {
	width: 100%;
	margin: 0 0 2em 0;
	padding: 0;	
	}
.eyeCatch img {
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	}
}

@media all and (max-width: 480px) {
.eyeCatch {
	width: 100%;
	margin: 0 0 1em 0;
	padding: 0;
	}
.eyeCatch img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	}
}

/*--- prevNext ----------------------------- */

#prevNext {
	width: 100%;
	margin: 0;
	padding: 0;
	display: table;
	border-top: 1px solid #cfc0ab;
	border-bottom: 1px solid #cfc0ab;
}
#prevNext a {
	color: #333333;
}
#prevNext  #prev, #prevNext  #next {
	width: 44%;
	padding: 30px 10px 15px;
	display: table-cell;
	position: relative;
	text-decoration: none;
}
#prevNext #prevNextCenter {
	width: 12%;
	padding: 0;
	vertical-align: middle;
	display: table-cell;
	position: relative;
	text-decoration: none;
	border-left: 1px solid #cfc0ab;
	border-right: 1px solid #cfc0ab;
}
#prevNext #prev p {
	text-align: left;
}
#prevNext #next p {
	text-align: right;
}
#prevNext #prevNextCenter p ,
#prevNext #prevNextHome p {
	text-align: center;
}
#prevNext #prev:hover,
#prevNext #next:hover,
#prevNext #prevNextCenter:hover ,
#prevNext #prevNextHome:hover {
	background-color: #ffffff;
}
#prevNext #prevTitle, #prevNext #nextTitle {
	font-size: 90%;
	top: -1em;
	position: absolute;
	background: #0097ae;
	text-align: center;
	padding: 3px;
	color: #ffffff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}
#prevNext #nextTitle {
	right: 10px;
}
#prevNext #prev img, #prevNext #next img {
	margin: 0 auto;
	border: 5px solid #ffffff;
}
#prevNext #prevNextHome {
	width: 44%;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}

@media only screen and (min-width: 960px) {
#prevNext #prev, #prevNext #prev::before, #prevNext #prev::after,
#prevNext #next, #prevNext #next::before, #prevNext #next::after,
#prevNext #prevNextCenter, #prevNext #prevNextCenter::before, #prevNext #prevNextCenter::after ,
#prevNext #prevNextHome, #prevNext #prevNextHome::before, #prevNext #prevNextHome::after {	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	}
#prevNext #prevTitle, #prevNext #nextTitle{
	padding: 3px 10px;
	}
#prevNext #nextTitle{
	right:10px;
	}
#prevNext #prev img{
	float:left;
	margin-right:10px
	}
#prevNext #next img{
	float:right;
	margin-left: 10px;
	}
}

/*--- articleBtm ----------------------------- */

@media all and (min-width: 768px) {
.articleBtm {
	float: right;
	margin: 2em 0 0 0;
	padding: 0;
	}
}

@media all and (min-width: 481px) and (max-width: 767px) {
.articleBtm {
	float: right;
	margin: 2em 0;
	padding: 0;
	}
}

@media all and (max-width: 480px) {
.articleBtm {
	float: right;
	margin: 2em 0;
	padding: 0;
	}
}

.articleBtm ul {
	margin: 0;
	padding: 0;
}
.articleBtm ul li {
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
}
.articleDay p {
	margin: 0 0 1em 1em;
	padding: 0;
}
.articleCat p a {
	color: #333333;
	margin: 0 0 0.5em 0.5em;
	padding: 0.5em 1em;
	background: #f4ede1;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}
.articleCat p a:hover {
	color: #ffffff;
	margin: 0 0 0.5em 0.5em;
	padding: 0.5em 1em;
	background: #0097ae;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}

/*--- cateList ----------------------------- */

.cateList {
	margin: 0;
	padding: 0;
}
.cateList ul {
	margin: 0;
	padding: 0;
}
.cateList ul li {
	float: left;
	margin: 0 0 0.5em 0.5em;
	padding: 0;
}
.cateList p a {
	color: #333333;
	margin: 0;
	padding: 0.5em 1em;
	background: #f4ede1;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}
.cateList p a:hover {
	color: #ffffff;
	margin: 0;
	padding: 0.5em 1em;
	background: #0097ae;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}

/*--- cateList ----------------------------- */

.cateListAll {
	position: relative;
	overflow: hidden;
}
.cateListAll ul {
	margin: 0;
	padding: 0;
	float: left;
	left: 50%;
	position: relative;
}
.cateListAll ul li {
	float: left;
	left: -50%;
	position: relative;
	margin: 0.5em 0.25em;
	padding: 0;
}
.cateListAll p a {
	color: #333333;
	margin: 0;
	padding: 0.5em 1em;
	background: #f4ede1;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}
.cateListAll p a:hover {
	color: #ffffff;
	margin: 0;
	padding: 0.5em 1em;
	background: #0097ae;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}

.cateListAll a span {
	font-size: 0.8em;
	color: #777777;
}
.cateListAll a:hover span {
	font-size: 0.8em;
	color: #ffffff;
}


/* --------------------------------------------
*                      pagination
* -------------------------------------------- */

.paginationArea {
	position: relative;
	overflow: hidden;
}

.pagination {
	clear: both;
	padding: 2em 0;
	float:left;
	left:50%;
	position: relative;
	font-size: 1em;
	line-height: 1;
}
.pagination span, .pagination a {
	display: block;
	float: left;
	width: auto;
	margin: 4px 4px 4px 0;
	padding: 10px 14px;
	background: #ffffff;
	color:#333333;
	text-decoration: none;
	left: -50%;
	position: relative;
}
.pagination a:hover{
	background: #00819d;
	color: #ffffff;
}
.pagination .current{
	padding: 10px 14px;
	background: #00819d;
	color: #ffffff;
}


.pager{
	text-align:center;
}
a.page-numbers,
.pager .current{
	background:rgba(0,0,0,0.02);
	border:solid 1px rgba(0,0,0,0.1);
	border-radius:5px;
	padding:5px 8px;
	margin:0 2px;
}
.pager .current{
	background:rgba(0,0,0,1);
	border:solid 1px rgba(0,0,0,1);
	color:rgba(255,255,255,1);
}