@charset "UTF-8";









h1, h2, h3, h4 {
	letter-spacing: 0.10em;
}

.home .kv .title .type svg path {
	fill: none;
	stroke: #333;
	stroke-width: 0.7px;
	stroke-dasharray: 600px;
	stroke-dashoffset: 600px;
}

.home .kv .title .type.show svg path {
	animation: load_logo 1.8s both;
}

@keyframes load_logo {
	0% {
		stroke-dashoffset: 600px;
		fill: #f4f3ef;
	}
	60% {
		stroke-dashoffset: 0;
		fill: #f4f3ef;
	}
	75% {
		stroke-dashoffset: 0;
		fill: #f4f3ef;
	}
	100% {
		stroke-dashoffset: 0;
		fill: #333;
	}
}

.home .kv .title .line,
.home .kv .title .dot  {
	position: relative;
	overflow: hidden;
}

.home .kv .title .line:after,
.home .kv .title .dot:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f3ef;
	position: absolute;
	right: 0;
	top: 0;
	transition: 0.8s ease-in-out;
}

.home .kv .title .line.show:after,
.home .kv .title .dot.show:after {
	width: 0;
}

.home .kv .title .jp,
.home .kv .title .sholder  {
	opacity: 0;
	transition: 0.4s ease-in-out;
}

.home .kv .title .jp.show,
.home .kv .title .sholder.show  {
	opacity: 1;
}

.key_in .illust:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f3ef;
	position: absolute;
	right: 0;
	top: 0;
	transition: 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.key_in .illust.show:after {
	width: 0;
}

.home .toggle,
.home .scroll,
.home .kv .red {
	opacity: 0;
	transition: 0.4s ease-in-out;
}

.home .toggle.show,
.home .scroll.show,
.home .kv .red.show {
	opacity: 1;
}




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

.kv {
	position: relative;
	width: 100%;
	height: 100%;
	transition: 0.4s ease-in-out;
	z-index: 200;
}

.kv_hide .kv {
	opacity: 0;
}

.kv .title {
	width: 320px;
	position: absolute;
	left: 80px;
	bottom: 20%;
	z-index: 200;
}

.kv .title .inner {
	padding: 84.375% 0 0 0;
	position: relative;
}

.kv .title span, .kv .title p {
	display: block;
	position: absolute;
}

.kv .title span.type {
	width: 100%;
	left: 0;
	bottom: 46.2%;
}

.kv .title span.sholder {
	width: 35.625%;
	left: 59.375%;
	top: 8%;
}

.kv .title .en {
	font-size: 1.1rem;
	line-height: 1.5;
	left: 5.1%;
	bottom: 23.14%;
	letter-spacing: 0.02em;
}

.kv .title .en span {
	position: relative;
}

.kv .title span.jp {
	width: 7.5%;
	right: 5.4%;
	bottom: 23.14%;
}

.kv .title span.dot {
	width: 90%;
	left: 5.1%;
	bottom: 0;
}

.kv .red {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.kv .red span {
	display: block;
	position: absolute;
	right: 55px;
	bottom: 55px;
	font-size: 1.4rem;
	color: #cf2520;
	border: 2px solid #cf2520;
	line-height: 1;
	padding: 20px 20px;
	z-index: 200;
}

.scroll {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 1.0rem;
	line-height: 1;
}

.scroll div.all {
	position: fixed;
	left: 20px;
	bottom: 30px;
	width: 10px;
	z-index: 300;
}

.scroll div .text {
	display: inline-block;
	margin: 0 0 10px 0;
}

.scroll div .img {
	position: relative;
	display: inline-block;
	width: 7px;
}

.scroll div .line {
	display: inline-block;
	width: 1px;
	height: 80px;
	background: #dbd9d0;
	margin: 0 1px 0 0;
}

.scroll div .circle {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #cf2520;
	border-radius: 4px;
	position: absolute;
	left: -2px;
	top: 0;
	animation: scrollanime 6.8s infinite;
}

@keyframes scrollanime {
	0% {
		top: 0px;
	}
	15% {
		top: 80px;
	}
	17% {
		top: 80px;
	}
	25% {
		top: 0px;
	}
	30% {
		top: 0px;
	}
	45% {
		top: 80px;
	}
	47% {
		top: 80px;
	}
	55% {
		top: 0px;
	}
	100% {
		top: 0px;
	}
}

.key {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	min-height: 52vw;
}

.key_in {
	padding: 0 106px 0 480px;
	width: 100%;
	height: 100%;
	transition: 1.2s cubic-bezier(.48, .01, .49, .94);
}

.key_in .illust {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: url(images/kv/kv.jpg) no-repeat center bottom;
	background-size: auto 100%;
	background-size: cover;
}

.key_obj {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center bottom;
	opacity: 0;
	transition: 0.6s ease-in-out;
}

.key_obj.show {
	opacity: 1;
}

.key_cat01 {background-image: url(images/kv/cat01.png);}
.key_cat02 {background-image: url(images/kv/cat02.png);}
.key_cat03 {background-image: url(images/kv/cat03.png);}
.key_bangs01 {background-image: url(images/kv/bangs01.png); transition: 0.8s ease-in-out;}
.key_bangs02 {background-image: url(images/kv/bangs02.png); transition: 0.8s ease-in-out;}
.key_bangs03 {background-image: url(images/kv/bangs03.png); transition: 0.8s ease-in-out;}
.key_book01 {background-image: url(images/kv/book01.png);}
.key_book02 {background-image: url(images/kv/book02.png);}
.key_book03 {background-image: url(images/kv/book03.png);}
.key_book04 {background-image: url(images/kv/book04.png);}

.key_small .key_in {
	padding: 0 0 0 61.1%;
}

#post {
	width: 61.1%;
	transition: 0.8s ease-in-out;
	opacity: 0;
	position: relative;
	z-index: 200;
}

#post.post_show {
	opacity: 1;
}

#post .inner {
	padding: 100px 10%;
}

.bottom_home {
	position: relative;
	z-index: 300;
}



#post ul {
	margin: 0 0 40px 0;
}

#post ul li {
	width: 100%;
	margin: 0 0 4em 40px;
	transition: 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

#post ul li.show {
	margin-left: 0;
}

#post ul li .date {
	font-size: 1.4rem;
	width: 60px;
	padding-top: 0.7em;
	color: #888;
}

#post ul li .date span {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

#post ul li a {
	display: block;
}

#post ul li .main {
	flex: 1;
}

#post ul li .main .title {
	font-size: 4.0rem;
	margin: 0 0 0.650em 0;
}

#post ul li .main .author {
	line-height: 1.75;
	margin-bottom: -0.2em;
	line-break: strict;
	word-break: keep-all;
}

#post ul li .main .flex {
	line-height: 1;
}

#post ul li .main .author {
	flex: 1;
	padding-right: 30px;
}

#post ul li .main .link {
	margin-right: 5.2em;
	padding-right: 0.9em;
	border-right: 1px solid #333;
}

#post ul li .main .all {
	display: inline-block;
	text-align: right;
	float: right;
	font-size: 1.4rem;
	margin-top: -1.3em;
}

#post ul li .main:after {
	content: '';
	display: block;
	width: 100%;
	height: 12px;
	background: url(images/dot_red.svg);
	background-size: 20px auto;
	margin: 50px 0 0 0;
}

.bottom_home {
	position: relative;
	z-index: 200;
	width: 100%;
	background: #f4f3ef;
	padding: 180px 0 0 0;
}




































/*------------------------------------------------------------------------------------------------------------------------------------

	スマホここから
	
------------------------------------------------------------------------------------------------------------------------------------*/


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



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

.kv {
	position: relative;
	width: 100%;
	height: 100%;
	transition: 0.4s ease-in-out;
}

.kv_hide .kv {
	opacity: 1;
}

.kv .title {
	/*background: url(images/logo.svg) no-repeat;
	background-size: 100% auto;*/
	width: 220px;
	position: relative;
	left: auto;
	bottom: auto;
	
	padding: 40px 0;
	margin: 0 auto;
	


}

.kv .title .inner {
	padding: 68% 0 0 0;
}


.kv .title p,
.kv .title span.type,
.kv .title span.sholder,
.kv .title .en,
.kv .title span.jp,
.kv .title span.dot {
	/*display: none;*/
}

.kv .title span.dot {
	display: none;
}

.kv .title span.sholder {
	top: 10%;
}

.kv .title span.type {
	bottom: 30%;
}


.kv .title .en {
	font-size: 1.0rem;
	bottom: 0;
}

.kv .title .en {
	transform: scale(0.70);
	transform-origin: bottom left;
}

.kv .title .en .line {
	width: 120%;
}

.kv .title span.jp {
	bottom: 0;
}


.kv .red {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.kv .red span {
	display: block;
	position: absolute;
	right: 1.5em;
	bottom: 1.5em;
	font-size: 1.0rem;
	color: #fff;
	border: 2px solid #fff;
	padding: 6px 6px;
	z-index: 200;
}

.scroll {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 1.0rem;
	line-height: 1;
}

.scroll div.all {
	position: absolute;
	left: 1.5em;
	bottom: 1.0em;
	width: auto;
	color: #fff;
}

.scroll div .text {
	display: inline-block;
	margin: 0 0 10px 0;
}

.scroll div .img,
.scroll div .line {
	display: none;
}











.key {
	padding: 230px 0 0 0;
	position: absolute;
}

.key_in {
	padding: 0 0 0 0;

}


.key_small .key_in {
	padding: 0 0 0 0;
}

.key_in .illust,
.key_obj {
	background-size: auto 120%;
}


#post {
	width: 100%;

}

#post.post_show {
	opacity: 1;
}

#post .inner {
	padding: 12vw 6vw;
}

#post .st_box {
	font-size: 1.2rem;
	padding: 5px 8px;
}

#post ul {
	margin: 0 0 0 0;
}

#post ul li {
	margin: 0 0 10vw 0;
}

#post ul li:last-child {
	margin-bottom: 2vw;
}

#post ul li .date {
	font-size: 1.2rem;
	width: 36px;
	padding-top: 0.4em;
}


#post ul li .main .title {
	font-size: 2.4rem;
	margin: 0 0 0.650em 0;
}

#post ul li .main .author {
	font-size: 1.2rem;
}


#post ul li .main .link {
	border-right: 1px solid #333;
}

#post ul li .main .all {

	font-size: 1.2rem;

}

#post ul li .main .arrow {
	font-size: 1.2rem;
}

#post ul li .main .arrow .line {
	display: none;
}

#post ul li .main:after {
	margin: 30px 0 0 0;
}

.bottom_home {
	padding: 12vw 0 0 0;
}


/*--------------------------------------
	
	border
	
--------------------------------------*/

#post ul li .main .link {
	border-width 0.5px;
}

#post ul li .main .link {
	border-width 0.5px;
}


}