/**********************************
ページ全体の記述↓
**********************************/

img {
	width: 100%;
	height: 100%;
}
body{
	/* width: 100vw; */
	overflow-x: hidden;
}

/**********************************
ページ全体の記述↑
**********************************/
/**********************************
indexの記述↓
**********************************/
.index_wrap {
	display: flex;
	flex-direction: row-reverse;
	overflow-x: hidden;
	/*スマホ用の記述*/
	-webkit-touch-callout: none;
	/* リンク長押しのポップアップを無効化 */
	user-select: none;
	/* テキスト長押しの選択ボックスを無効化 */
}

.index_header {
	position: relative;
	margin-right: -15%;
}

.h1_title_index {
	padding: 1em 1em 0 0;
}

.h1_title_index img {
	max-width: 440px;
	margin: 0 auto;
}


/*******************
navの記述
*******************/

/*navの背景の記述*/
.nav_link_bg {
	position: absolute;
	top: 0.35em;
	left: -0.2em;
	height: 2em;
	opacity: 0;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.about_margin .nav_link_bg,
.works_margin .nav_link_bg {
	width: 7em;
}

.blog_margin .nav_link_bg {
	width: 5.6em;
}

.contact_margin .nav_link_bg {
	width: 9em;
}

.nav_link_bg span {
	display: block;
	content: "";
	width: 0.8em;
	height: 0.8em;
	position: absolute;
	transition: transform 0.5s ease;
}

.nav_link_bg span:nth-child(1) {
	top: -0.5em;
	left: -0.5em;
	transform: translate(25px, 25px);
	border-top: 8px solid #70d954;
	border-left: 8px solid #70d954;
	border-radius: 5px 0 0 0;
	animation: nav_hover_move1 2.5s ease infinite;
}

.nav_link_bg span:nth-child(2) {
	top: -0.5em;
	right: -0.5em;
	transform: translate(-25px, 25px) rotate(0deg);
	border-top: 8px solid #70d954;
	border-right: 8px solid #70d954;
	border-radius: 0px 5px 0 0;
	animation: nav_hover_move2 2.5s ease infinite;
}

.nav_link_bg span:nth-child(3) {
	bottom: -0.5em;
	right: -0.5em;
	transform: translate(-25px, -25px) rotate(0deg);
	border-bottom: 8px solid #70d954;
	border-right: 8px solid #70d954;
	border-radius: 0 0 5px 0;
	animation: nav_hover_move3 2.5s ease infinite;
}

.nav_link_bg span:nth-child(4) {
	bottom: -0.5em;
	left: -0.5em;
	transform: translate(25px, -25px) rotate(0deg);
	border-bottom: 8px solid #70d954;
	border-left: 8px solid #70d954;
	border-radius: 0 0 0 5px;
	animation: nav_hover_move4 2.5s ease infinite;
}

.index_nav ul li a:hover .nav_link_bg {
	opacity: 1;
}

.index_nav ul li a:hover .nav_link_bg span:nth-child(1),
.index_nav ul li a:hover .nav_link_bg span:nth-child(2),
.index_nav ul li a:hover .nav_link_bg span:nth-child(3),
.index_nav ul li a:hover .nav_link_bg span:nth-child(4) {
	transform: translate(0px, 0px);
}

@keyframes nav_hover_move1 {
	50% {
		top: -0.7em;
		left: -0.7em;
	}
}

@keyframes nav_hover_move2 {
	50% {
		top: -0.7em;
		right: -0.7em;
	}
}

@keyframes nav_hover_move3 {
	50% {
		bottom: -0.7em;
		right: -0.7em;
	}
}

@keyframes nav_hover_move4 {
	50% {
		bottom: -0.7em;
		left: -0.7em;
	}
}

/*navの背景の記述の終わり*/

/*nav本体の記述*/

.index_nav_img,
.index_nav_img_blog,
.index_nav_img_contact {
	transition: transform 0.2s ease;
}

.index_nav_img {
	width: 6.5em;
}

.index_nav_img_blog {
	width: 5.2em;
}

.index_nav_img_contact {
	width: 8.5em;
}

.index_nav {
	margin-top: 4em;
	max-width: 10em;
}

.index_nav ul {
	list-style: none;
}

.index_nav ul li a {
	position: relative;
	text-decoration: none;
	display: block;
	font-size: 2em;
	padding: 0.5em 0;
	font-weight: bold;
}

.index_nav_link {
	transition: opacity 0.3s ease, filter 0.3s ease;
}

/*クラス.hoverはJSで制御しています*/
.index_nav_link.hover {
	opacity: 0.6;
	filter: blur(1.5px);
}

.index_nav_link:hover {
	opacity: 1;
	filter: blur(0px);
}

.index_nav ul li a:hover .index_nav_img,
.index_nav ul li a:hover .index_nav_img_blog,
.index_nav ul li a:hover .index_nav_img_contact {
	transform: scale(1.05);
}

/* .index_nav ul li a:active .index_nav_img,
.index_nav ul li a:active .index_nav_img_blog,
.index_nav ul li a:active .index_nav_img_contact {
	filter: invert(80%) sepia(100%) saturate(5000%) hue-rotate(40deg) brightness(90%) contrast(90%) drop-shadow(0 0 3px #fff);
} */

@media screen and (max-width:1050px) and (min-width:600px) {

	.about_margin .nav_link_bg,
	.works_margin .nav_link_bg {
		width: 6.5em;
	}

	.blog_margin .nav_link_bg {
		width: 5.1em;
	}

	.contact_margin .nav_link_bg {
		width: 8.5em;
	}
}

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

	.nav_link_bg {
		position: absolute;
		top: 1.1em;
		left: -0em;
		height: 1em;
		opacity: 0;
		z-index: -1;
		transition: opacity 0.3s ease;
	}

	.about_margin .nav_link_bg,
	.works_margin .nav_link_bg {
		width: 4em;
	}

	.blog_margin .nav_link_bg {
		width: 3.1em;
	}

	.contact_margin .nav_link_bg {
		width: 5em;
	}
}

/*******************
navの記述おわり
*******************/


/*********************
左側
*********************/

.index_main {
	width: 100vw;
}

.index_main_title_bar {
	position: absolute;
	z-index: 0;
	min-width: 20px;
	max-width: 130px;
	height: 100vh;
	max-height: 600px;
}

.index_main_menu_chan {
	position: relative;
	width: 100%;
}

.fuwafuwa {
	animation-name: fuwafuwa;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	/*-webkit-animation-direction:alternate;*/
	animation-timing-function: ease;

	-moz-animation-name: fuwafuwa;
	-moz-animation-duration: 4s;
	-moz-animation-iteration-count: infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function: ease;
}

@keyframes fuwafuwa {
	0% {
		-webkit-transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, -10px);
	}

	100% {
		-webkit-transform: translate(0, 0);
	}
}

@-moz-keyframes fuwafuwa {
	0% {
		-moz-transform: translate(0, 0);
	}

	50% {
		-moz-transform: translate(0, -50px);
	}

	100% {
		-moz-transform: translate(0, 0);
	}
}

.normal_footer {
	z-index: 50;
}

/**********************************
indexの記述↑
**********************************/
/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:1050px) and (min-width:600px) {

	.index_header {
		margin-right: 0;
	}

	.index_main_menu_chan {
		position: relative;
		width: 150%;
		margin-left: -42%;
	}

	.index_nav_img {
		width: 6em;
	}

	.index_nav_img_blog {
		width: 4.8em;
	}

	.index_nav_img_contact {
		width: 7.5em;
	}
}

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

	.index_header {
		margin-right: 0;
	}

	.index_main_menu_chan {
		position: relative;
		width: 190%;
		margin-left: -70%;
	}

	.index_nav_img {
		width: 3.8em;
	}

	.index_nav_img_blog {
		width: 3em;
	}

	.index_nav_img_contact {
		width: 4.7em;
	}

	.index_main_title_bar {
		position: absolute;
		z-index: 0;
		min-width: 20px;
		max-width: 100px;
		height: 400px;
		margin-left: -0.8em;
	}

	.about_margin {
		margin-top: -1em;
	}

	.works_margin {
		margin-top: -0.5em;
	}

	.contact_margin {
		margin-top: -0.5em;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/