@charset "utf-8";

/*----------------------------------------------------------------
 animation settings
----------------------------------------------------------------*/
@-webkit-keyframes fadeInLeft {
	0% {
		opacity				: 0;
		-webkit-transform	: translate3d(-30%,0,0);
		transform			: translate3d(-30%,0,0)
	}
	to {
		opacity:1;
		-webkit-transform	: translateZ(0);
		transform			: translateZ(0)
	}
}

@keyframes fadeInLeft {
	0% {
		opacity				: 0;
		-webkit-transform	: translate3d(-30%,0,0);
		transform			: translate3d(-30%,0,0)
	}
	to {
		opacity				: 1;
		-webkit-transform	: translateZ(0);
		transform			: translateZ(0)
	}
}

@-webkit-keyframes fadeOutRight {
	0% {
		opacity				: 1;
	}
	to {
		opacity				: 0;
		-webkit-transform	: translate3d(30%,0,0);
		transform			: translate3d(30%,0,0)
	}
}
@keyframes fadeOutRight {
	0% {
		opacity				: 1;
	}
	to {
		opacity				: 0;
		-webkit-transform	: translate3d(30%,0,0);
		transform			: translate3d(30%,0,0)
	}
}


/*----------------------------------------------------------------
 contents
----------------------------------------------------------------*/
/*-----------------------------------------------------
 class
-----------------------------------------------------*/
/* more
-----------------------------------------------------*/
#contents .more{}
#contents .more a{
	position			: relative;
	display				: inline-block;
	width				: 150px;
	height				: 50px;
	padding				: 15px 0 0 0;
	background			: var(--base-color);
	text-align			: center;
	font-size			: 18px;
	line-height			: 1;
}
#contents .more a:after{
	content				: "";
	position			: absolute;
	top					: 50%;
	right				: -20px;
	transform			: translateY(-50%);
	display				: block;
	height				: 1px;
	width				: 40px;
	background			: var(--link-color);
}

#contents .more.small a{
	display				: block;
	width				: 120px;
	height				: 30px;
	padding				: 7px 0 0 0;
	font-size			: 14px;
}
#contents .more.small a:after{
	right				: -10px;
	width				: 20px;
}

/* meta
-----------------------------------------------------*/
#contents .meta{ font-size: 12px; }

#contents .meta>.date{ margin: 0 0 5px 0; }
#contents .meta>.note{ margin: 0 0 5px 0; }

#contents .meta>.taxonomy{ margin: 0 0 15px 0; }

#contents .meta>.taxonomy>.category{ margin: 0 5px 0 0; }
#contents .meta>.taxonomy>.category,
#contents .meta>.taxonomy>.category>li{ display: inline; }
#contents .meta>.taxonomy>.category>li>a{
	display				: inline-block;
	padding				: 2px 8px 4px 8px;
	background			: var(--link-color);
	line-height			: 1.2;
	color				: var(--base-color);
}

#contents .meta>.taxonomy>.tag,
#contents .meta>.taxonomy>.tag>li{ display: inline; }
#contents .meta>.taxonomy>.tag>li>span{
	display				: inline-block;
	border-radius		: 15px;
	border				: 1px solid var(--link-color);
	padding				: 2px 8px 4px 8px;
	line-height			: 1.2;
	color				: var(--link-color);
}

/* post-data
-----------------------------------------------------*/
#contents .post-data>.the_thumbnail{ margin: 0 0 25px 0; }
#contents .post-data .the_title{
	font-weight			: bold;
	font-size			: 20px;
	color				: var(--heading-color);
}

/* pagenavi
-----------------------------------------------------*/
#contents .pagenavi{ margin: 50px 0 0 0; }
#contents .pagenavi.more a{
	width				: auto;
	padding				: 15px 20px 0 50px;
}
#contents .pagenavi.more a:after{ left: -20px; }

/* empty
-----------------------------------------------------*/
#contents .empty{
	margin: 30px 0;
}
/* entry-list
-----------------------------------------------------*/
#contents .entry-list{ margin: 30px 0; }
#contents .entry-list>li{
	display				: flex;
	flex-direction		: row-reverse;
	justify-content		: space-between;
	flex-wrap			: wrap;
	margin				: 0 0 20px 0;
	padding				: 20px;
	background			: var(--base-color);
}
#contents .entry-list>li>.the_thumbnail{ flex: 0 0 250px; }
#contents .entry-list>li>.text{
	flex				: 1 0 calc(100% - 250px);
	padding				: 0 0 0 20px;
}
#contents .entry-list>li>.text>.the_title{
	margin: 0 0 10px 0;
	line-height			: 1.5;
	font-size			: 20px;
	font-weight			: bold;
}

#contents .entry-list>li>.text>.the_excerpt{ font-size: 14px; }
#contents .entry-list>li>.text>.more{ margin: 15px 0 0 0; }
#contents .entry-list>li>.text>.more a{ border: 1px solid var(--link-color); }


/* category-data
-----------------------------------------------------*/
#contents .category-data{
	display				: flex;
	flex-direction		: row;
	margin				: 30px 0 50px 0;
}
#contents .category-data>.image{ flex: 0 0 310px; }
#contents .category-data>.text{
	flex				: 0 0 calc(100% - 310px);
	padding				: 0 0 0 30px;
}

/* update-list
-----------------------------------------------------*/
#contents .update-list{
	margin				: 0 0 40px 0;
	font-size			: 14px;
}
#contents .update-list>li{
	display				: flex;
	border-bottom		: 1px solid var(--sub-color);
	padding				: 5px 0;
}
#contents .update-list>li>.the_time{ flex: 0 0 100px; }

/*----------------------------------------------------------------
 side
----------------------------------------------------------------*/
/*-----------------------------------------------------
 class
-----------------------------------------------------*/
/* widget
-----------------------------------------------------*/
#side .widget{}
#side .widget dt{
	margin				: 0 0 30px 0;
	font-family			: var(--font-serif);
	font-size			: 20px;
	color				: var(--heading-color);
}
#side .widget ul{
	margin				: 35px 0 0 0;
	border-top			: 3px solid var(--sub-color);
}
#side .widget ul>li{
	border-bottom		: 1px solid var(--sub-color);
	line-height			: 1.4;
}
#side .widget ul>li>a{
	position			: relative;
	display				: block;
	padding				: 14px 0 14px 20px;
	color				: var(--text-color);
}
#side .widget ul>li>a::before{
	content				: "";
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	left				: 2px;
	display				: inline-block;
	width				: 16px;
	height				: 16px;
	background			: url(../images/angle-right-solid.svg) left center /contain no-repeat;
}


/*----------------------------------------------------------------
 main
----------------------------------------------------------------*/
/*-----------------------------------------------------
 class
-----------------------------------------------------*/
/* page-title
-----------------------------------------------------*/
#main .page-title{
	border-bottom		: 3px solid var(--sub-color);
	padding-bottom		: 20px;
	font-family			: var(--font-serif);
	font-size			: 28px;
	color				: var(--heading-color);
}

/* wp-pagenavi
-----------------------------------------------------*/
#main .wp-pagenavi{
	position			: relative;
	padding				: 70px 0 0 0;
	text-align			: center;
	font-size			: 14px;
}
#main .wp-pagenavi .page,
#main .wp-pagenavi .current{
	display				: inline-block;
	border				: 1px solid var(--link-color);
	padding				: 2px 8px;
	font-weight			: normal;
}
#main .wp-pagenavi .current{
	background			: var(--link-color);
	color				: var(--base-color);
}
#main .wp-pagenavi .nextpostslink,
#main .wp-pagenavi .previouspostslink{
	position			: absolute;
	top					: 0;
	width				: 150px;
	height				: 50px;
	padding				: 15px 0 0 0;
	background			: var(--base-color);
	text-align			: center;
	font-size			: 18px;
	line-height			: 1;
	border				: none;
}
#main .wp-pagenavi .nextpostslink{ right: 0; }
#main .wp-pagenavi .previouspostslink{ left: 0; }
#main .wp-pagenavi .nextpostslink:after,
#main .wp-pagenavi .previouspostslink:after{
	content				: "";
	position			: absolute;
	display				: block;
	height				: 1px;
	width				: 40px;
	top					: 25px;
	background			: var(--link-color);
}
#main .wp-pagenavi .nextpostslink:after{ right: -20px; }
#main .wp-pagenavi .previouspostslink:after{ left: -20px; }

/* post
-----------------------------------------------------*/
#main .post{
	background			: var(--base-color);
	padding				: 30px;
}

/*----------------------------------------------------------------
 pages own styles
----------------------------------------------------------------*/

/*----------------------------------------------------
 home
----------------------------------------------------*/

/* mainview
-----------------------------------------------------*/
.home #mainview{
	position			: relative;
	clear				: both;
	padding				: 50px 0 0 0;
}

/*---------------------------------
 slider
---------------------------------*/
.home #mainview .slider{ margin: 30px 0 50px 0; }

.home #mainview .slick-slide{ display: block; }
.home #mainview .slick-slide figure{
	position			: relative;
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: center;
	margin				: 0 auto;
	width				: var(--content-width);
	height				: 450px;
}
.home #mainview .slick-slide figure>.the_thumbnail{
	object-fit			: contain;
	position			: relative;
	right				: 30px;
	z-index				: 1;
	flex				: 0 0 auto;
	height				: 100%;
}
.home #mainview .slick-slide figure>figcaption{
	position			: relative;
	right				: 120px;
	z-index				: 2;
	flex				: 0 0 440px;
	width				: 470px;
}
.home #mainview .slick-slide figure>figcaption .the_title,
.home #mainview .slick-slide figure>figcaption .field_note{ display: block; }

.home #mainview .slick-slide figure>figcaption .the_title	{ animation-duration:  1s; }
.home #mainview .slick-slide figure>figcaption .field_note	{ animation-duration:  0.7s; }

.home #mainview .slick-slide figure>figcaption .the_title + .field_note{ margin: 30px 0 0 0; }

.home #mainview .slick-slide figure>figcaption .the_title>strong,
.home #mainview .slick-slide figure>figcaption .field_note>small{
	display				: inline;
	padding				: 0 5px;
	background			: var(--base-color);
	line-height			: 1.2;
	font-family			: var(--font-serif);
	font-weight			: normal;
}
.home #mainview .slick-slide figure>figcaption .the_title>strong{ font-size: 50px; }
.home #mainview .slick-slide figure>figcaption .field_note>small{ font-size: 20px; }

.home #mainview .slick-slide figure>.the_thumbnail,
.home #mainview .slick-slide figure>figcaption .the_title,
.home #mainview .slick-slide figure>figcaption .field_note{ opacity: 0; }

.home #mainview .slick-dots li {
	margin				: 0 3px;
	width				: 15px;
	height				: 15px;
}
.home #mainview .slick-dots { bottom: -38px; }

.home #mainview .slick-dots li button::before {
	content				: '';
	border				: 1px solid var(--link-color);
	border-radius		: 5px;
	width				: 10px;
	height				: 10px;
	background			: var(--base-color);
	line-height			: 10px;
	opacity				: 1;
}

.home #mainview .slick-dots .slick-active button::before{ background: var(--link-color); }


/* update
-----------------------------------------------------*/
.home #update{}
.home #update .update-content{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
}
.home #update .update-content h2{
	flex				: 0 0 80px;
	font-family			: var(--font-serif);
	font-size			: 14px;
}
.home #update .update-content .item{
	flex				: 1 0 auto;
	font-size			: 14px;
}
.home #update .update-content .item a{ text-decoration: underline; }
.home #update .update-content .item a .the_time{
	display: inline-block;
	margin: 0 10px 0 0;
}
.home #update .update-content .more{ flex: 0 0 120px; }


/* introduction
-----------------------------------------------------*/
.home #introduction{
	margin				: 40px 0 45px 0;
	text-align			: center;
	font-family			: var(--font-serif);
}
.home #introduction h2{
	margin				: 0 0 30px 0;
	line-height			: 1.527777777;
	font-size			: 36px;
}
.home #introduction p{
	font-size			: 18px;
	line-height			: 2;
}


/* archive
-----------------------------------------------------*/
.home #archive{ margin: 0 0 80px 0; }


/* slick overwrite
---------------------------------*/
.home #archive .slick-track{
	display				:flex;
	align-items			: stretch;
	flex-direction		: row;
}
.home #archive .slick-slide { height: auto !important; }

/* slider
---------------------------------*/
.home #archive .slider{ margin: 0 0 40px 0; }
.home #archive .slider li{
	width				: 350px;
	padding				: 0 20px 0 0;
}

.home #archive .slider li a{
	display				: block;
	height				: 100%;
	padding				: 20px;
	background			: var(--base-color);
}
.home #archive .slider li .the_thumbnail{
	display				: block;
	margin				: 0 0 20px 0;
}
.home #archive .slider li .the_thumbnail>img{
	object-fit			: contain;
	width				: 290px;
	height				: 290px;
}
.home #archive .slider li .the_title,
.home #archive .slider li .field_note,
.home #archive .slider li .the_category{ display: block; }
.home #archive .slider li .the_title{
	font-size			: 16px;
	font-weight			: normal;
}
.home #archive .slider li .field_note{
	font-size			: 12px;
	color				: var(--text-color);
}
.home #archive .slider li .the_category>span{
	display				: inline-block;
	padding				: 2px 7px 4px 7px;
	background			: var(--link-color);
	line-height			: 1.2;
	font-size			: 12px;
	color				: var(--base-color);
}

/* more
---------------------------------*/
.home #archive .more{ text-align: center; }
.home #archive .more a{
	position			: relative;
	left				: -20px;
}

/* news
-----------------------------------------------------*/
.home #news{ padding: 0 0 50px 0; }
.home #news .content{
	position			: relative;
	margin				: 0 0 50px 0;
}
.home #news h2{
	position			: absolute;
	left				: 0;
	top					: 35px;
	z-index				: 1;
	line-height			: 1;
	font-family			: var(--font-serif);
	font-size			: 36px;
}

/* news-list
---------------------------------*/
.home #news .news-list{
	width				: 760px;
	margin				: 0 0 0 72px;
	padding				: 1px;
	background			: var(--base-color);
}
.home #news .news-list>li{
	margin				: 39px 0 39px 170px;
	width				: 550px;
}
.home #news .news-list>li>a{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	align-items			: center;
}
.home #news .news-list>li>a .the_thumbnail{
	flex				: 0 0 290px;
	margin				: 0 25px 0 0;
}
.home #news .news-list>li>a .the_thumbnail>img{
	object-fit			: contain;
	width				: 290px;
	height				: 210px;
}
.home #news .news-list>li>a .text{
	flex				: 0 1 auto;
	line-height			: 1.6666;
}
.home #news .news-list>li>a .text>.the_title{
	display				: block;
	font-weight			: normal;
	font-size			: 18px;
}
.home #news .news-list>li>a .text>.the_time{
	display				: block;
	margin				: 5px 0 0 0;
	font-size			: 14px;
	color				: var(--text-color);
}

/* more
---------------------------------*/
.home #news .more{
	position			: absolute;
	right				: 20px;
	bottom				: 0;
}

.home .the_content .main-copy{
	margin				: 0 0 25px 0;
	border				: 0;
	padding				: 0;
	font-size			: 28px;
}


/*----------------------------------------------------
 single-post
----------------------------------------------------*/
.single-post #contents .post-data{ margin: 0 0 25px 0; }
.single-post #contents .post-data .the_thumbnail{
	width				: calc(100% + 60px);
	position			: relative;
	left				: -30px;
	top					: -30px;
	margin				: 0 0 -15px 0;
}
.single-post #contents .post-data .the_thumbnail img{
	width: 100%;
}
.single-post #contents .post-data .the_title{
	margin				: 0 0 10px 0;
	font-size			: 36px;
	font-family			: var(--font-serif);
	font-weight			: normal;
}

/*----------------------------------------------------
 single-post
----------------------------------------------------*/
.single-update #contents .post-data{ margin: 0 0 25px 0; }
.single-update #contents .post-data .the_thumbnail{
	width				: calc(100% + 60px);
	position			: relative;
	left				: -30px;
	top					: -30px;
	margin				: 0 0 -15px 0;
}
.single-update #contents .post-data .the_thumbnail img{
	width: 100%;
}
.single-update #contents .post-data .the_title{
	margin				: 0 0 10px 0;
	font-family			: var(--font-serif);
	font-weight			: normal;
}

/*----------------------------------------------------
 page-works
----------------------------------------------------*/
.page-works #content{ margin-top: 0; }