@charset "UTF-8";


/**********************************************************************/
/******************************** Story ********************************/
/**********************************************************************/

#blog
{
	padding: 7rem 2rem 3rem;
	background-color: rgb(250,240,200);
	background-image:url(../_img/blog_bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50%;
}

#blog .contents > div + div
{
	margin-top: 3rem;
}

#blog .text
{
	width: 60%;
	background-image:url(../_img/blog_title.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:50%;
}
#blog .text:before
{
	content:"";
	display:block;
	padding-top:40%;
}

#blog .illust
{
	width: 40%;
	background-image:url(../_img/blog_illust.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:50%;
}
#blog .illust:before
{
	content:"";
	display:block;
	padding-top:75%;
}

#blog .flex
{
	margin: 0 auto;
	max-width:800px;
	width: 100%;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

/**********************************************************************/
/******************************** Contens *****************************/
/**********************************************************************/

.blog_single
{
	padding-top: 4rem;
}

.blog_single + .blog_single
{
	border-top: 1px solid;
	margin-top: 4rem;
}

.blog_single .date
{
	font-size: .9em;
	margin-bottom: 1rem;
}

.blog_single h3
{
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
	font-size: 1.25rem;
	margin-bottom: 1em;
	color:rgb(0, 0, 0);
}

.blog_single .photo
{
	width:50%;
	padding-left: 2em;
}

.blog_single .text
{
	width: 50%;
	padding-right: 2em;
}

.blog_single .photo > .flex._1
{
	flex-direction:column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.blog_single .photo > .flex._2
{
	flex-wrap:wrap;
	margin: 0 -1rem;
}

.blog_single .photo > .flex._2 .photoListPhoto
{
	width:calc(100% / 3 - 2rem);
	margin: 1rem;
}

.blog_single .photo > .flex + .flex
{
	margin-top: 2em;
}

.blog_single .photo > .flex .caption
{
	display:none;
	margin-top: .5em;
	font-size: .9em;
}

.photoListPhoto
{
	background-color: rgb(240, 240, 240);
	width:100%;
	min-height: 300px;
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.photoListPhoto:before
{
	content: ""; 
	display: block;

	box-sizing:border-box;
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(255, 255, 255);
	border-right-color: transparent;
	
	top: calc(50% - 1.25rem);
	left: calc(50% - 1.25rem);

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

@keyframes circle-spin
{
	0%
	{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		filter:alpha(opacity=20);
		-moz-opacity: .2;
		opacity: .2;
	} /*0%の時は20％の透明度*/
	50%
	{
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	} /*50%の時は透明度なし*/
	100%
	{
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		filter:alpha(opacity=20);
		-moz-opacity: .2;
		opacity: .2;
	} /*100%の時に20％の透明度に戻る*/
}

.photoListPhoto.loaded
{
	background-color: rgb(0, 0, 0);
	min-height: auto;
	cursor:pointer;
}

.photoListPhoto.loaded:before
{
	display: none;
}

.photoListPhoto img
{
	display: block;
	height: auto;
	width: 100%;
/*	top:0;
	object-fit: cover;
	object-position: center;*/

	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

body:not(.touch) .photoListPhoto:hover img
{
	filter:alpha(opacity=70);
	-moz-opacity: .7;
	opacity: .7;
}

body:not(.touch) .photoListPhoto:hover span
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}


.photoListPhoto img.loaded
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.photoListPhoto span
{
	display: block;
	font-size: 2rem;
	line-height: 100%;
	color: rgb(255, 255, 255);
	position: absolute;
	top: calc(50% - .5em);
	left: calc(50% - .5em);
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

/**********************************************************************/
/******************************** Archives *****************************/
/**********************************************************************/

#archivesBox
{
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 7rem;
}

/*.archives.accbox label:before
{
	content: "Archives";
	display: block;
}*/

.cssacc:checked + .accshow
{
	padding: 3em 5em;
}

.archives.accbox a
{
	color:black;
	text-decoration: none;
	display: inline-block;
	padding-left: 2em;
	position: relative;
	margin-bottom: 1em;
	border-bottom-width: 0;
}

.archives.accbox a:last-child
{
	margin-bottom: 0em;
}

.archives.accbox a:before
{
	content:"";
	position: absolute;
	width: 1em;
	height: 1px;
	background-color: rgba(0, 0, 0, .3);
	left: 0;
	top: calc(50% + .5px);
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.archives.accbox a:hover
{
	color: rgba(0, 0, 0, 1);
}

.archives.accbox a:hover:before
{
	width: 1.5em;
	background-color: rgba(0, 0, 0, 1);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 980px)
{
	
	.blog_single .text
	{
		width: 60%;
	}
	
	.blog_single .photo
	{
		width: 40%;
		min-width: 40%;
	}
	
	.photoListPhoto img
	{
		width: 100%;
		height: auto;
	}

}

@media screen and (max-width: 650px)
{
	#blog .flex
	{
		flex-direction:column-reverse;
	}
	
	#blog .illust
	{
		width: 90%;
	}

	.text_photo
	{
		flex-direction:column;
	}
	
	.blog_single .text
	{
		width: 100%;
		padding-right: 0em;
		margin-bottom: 2em;
	}
	
	.blog_single .photo
	{
		width: 100%;
		padding-left:0;
	}
}