@charset "UTF-8";

html,
body {
	height: 100%;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

:root {
	--main-color: #f7e4e8;
	--sub1-color: #62bcb8;
	--sub2-color: #cec176;
	--accent-color: #e35a76;
	--main-block: #050000;
	--font-color: #3f1727;
}

/* 全体 */
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1001;
	background: var(--main-color);
	text-align: center;
}

#splash__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	transform: translate(-50%, -50%);
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.main-container {
	background-image: url(../img/bg-dot.png);
	background-repeat: repeat;
	background-size: 100%;
	background-position: center;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 70px;
	background: var(--accent-color);
}

.top-logo {
	width: 70px;
}

.main-nav {
	display: none;
}

.g-nav {
	position: fixed;
	z-index: 999;
	top: 0;
	right: -120%;
	width: 100%;
	height: 100vh;
	background: var(--sub2-color);
	transition: all 0.6s;
}

.g-nav.panelactive {
	right: 0;
}

.g-nav.panelactive .main-nav__wrapper {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.g-nav__list {
	position: absolute;
	z-index: 998;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
}

.gnav__item {
	padding: 20px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.gnav__item a {
	color: #fff;
}

.openbtn {
	position: relative;
	width: 70px;
	height: 70px;
	cursor: pointer;
	z-index: 1000;
}

.openbtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 13px;
	height: 2px;
	background-color: #fff;
}

.openbtn span:nth-of-type(1) {
	top: 29px;
	width: 50%;
}

.openbtn span:nth-of-type(2) {
	top: 39px;
	width: 30%;
}

.openbtn.active span:nth-of-type(1) {
	top: 20px;
	left: 16px;
	transform: translateY(6px) rotate(-45deg);
	width: 35%;
}

.openbtn.active span:nth-of-type(2) {
	top: 32px;
	left: 16px;
	transform: translateY(-6px) rotate(45deg);
	width: 35%;
}

.main-visual {
	display: flex;
	flex-direction: column-reverse;
}

.main-visual__img img {
	width: 100%;
	height: 600px;
	object-fit: cover;
}

.main__title {
	width: 300px;
	animation: fadeIn2 4s ease .01s;
}

.main__animation-box {
	position: absolute;
	top: 550px;
	left: 18px;
	transform: translateY(-50px);
	transition: 2s ease;
}

@keyframes fadeIn2 {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.title {
	width: 200px;
}

.wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px;
	padding: 160px 9% 130px;
}

.inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px;
}

.txt {
	max-width: 500px;
	color: var(--font-color);
	font-size: 1rem;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 1.8;
}

.about__img {
	width: 140px;
}

.design__img {
	width: 270px;
}

.btn {
	display: flex;
	order: 3;
	margin-top: 35px;
}

.btn a {
	background: #e8e8e8;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 290px;
	padding: 15px 25px;
	color: var(--font-color);
	transition: 0.3s ease-in-out;
}

.btn a::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	border: 2px solid var(--accent-color);
	transition: 0.2s;
}

.btn a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--main-block);
	border-right: 1px solid var(--main-block);
	margin-left: 10px;
	transform: rotate(45deg);
}

.btn a:hover::before {
	top: 0;
	left: 0;
}

.btn a:hover {
	background: var(--main-color);
}

.portfolio__warapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px;
	padding: 70px 9%;
}

.portfolio__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 9% 70px 9%;
}

.list__img {
	max-width: 450px;
}

.illust .list__item:nth-of-type(3),
.illust .list__img:nth-of-type(3) {
        max-width: 300px;
    }

.list__link {
	color: var(--font-color);
}

.portfolio__list {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.list__title {
	margin: 14px 0 9px;
}

.list__title a {
	color: var(--font-color);
	text-align: left;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.6;
	cursor: pointer;
}

.item__tug {
	display: inline;
	font-size: 0.875rem;
	text-align: center;
	line-height: 1;
	letter-spacing: 1px;
}

.website {
	padding: 3px 11px;
	background: #d4d8f4;
}

.practicesite {
	padding: 3px 11px;
	background: #bde6d8;
}

.portfolio .btn {
	margin-top: 50px;
}

.about__wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px;
	padding: 130px 9% 100px;
}

.contact .wrapper {
	padding-top: 70px;
}

.contact .btn {
	position: relative;
	margin-left: -50px;
	margin-bottom: 30px;
}

.contact .btn a {
	background: var(--main-color);
	border: 1px solid transparent;
	transition: 0.3s ease-in-out;
	padding: 15px 25px 15px 10px;
}

.contact .btn a::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid var(--main-block)
}

.contact .btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
	width: 40px;
	height: 1px;
	background: var(--main-block);
}

.contact .btn a:hover {
	background: var(--sub2-color);
}

.contact .btn a::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	border: 2px solid var(--accent-color);
	transition: 0.2s;
}

.contact .btn a:hover::before {
	top: 0;
	left: 0;
}

.contact__icon {
	position: absolute;
	left: 215px;
	top: 10px;
	width: 40px;
}

.contact__img {
	width: 110px;
}


.footer {
	background: var(--sub1-color);
	height: 42px;
	text-align: center;
}

small {
	color: #fff;
	line-height: 1;
}

/*about*/
.top-title {
	width: 300px;
	padding-top: 160px;
	margin: auto;
}

.me .wrapper,
.book .warapper {
	flex-direction: column-reverse;
	padding: 90px 9%;
}

.sub__title {
	color: var(--accent-color);
	font-weight: 400;
	order: 1;
}

.me .inner,
.book .inner,
.cat .inner {
	flex-direction: column-reverse;
	align-items: center;
	gap: 15px
}

.me .img,
.illust .img {
	width: 160px;
	height: 160px;
	order: 2;
	object-fit: cover;
}

.me .img img {
	border-radius: 50%;
	box-shadow: var(--accent-color) 4px 4px 0 0px;
}

.me .txt {
	margin: 10px 0 0 0;
}

.book .txt {
	margin-bottom: 30px;
}

.book__img {
	max-width: 400px;
	margin: auto;
}

.book__img img {
	border-radius: 0 38px 0 37px;
	box-shadow: var(--sub1-color) 8px 8px 0px 0px;
}

.cat .txt {
	margin: 0;
}

.cat .wrapper {
	align-items: center;
	flex-direction: column;
	gap: 30px;
	padding-bottom: 40px;
}

.cat__images {
	display: flex;
	flex-direction: row;
	gap: 15px;
	justify-content: center;
	align-items: flex-end;
}

.cat__image-01,
.cat__image-02 {
	width: 90%;
	height: 100%;
	object-fit: cover;

}

.cat__image-01 img,
.cat__image-02 img {
	width: 90%;
	height: 100%;
	border-radius: 0 38px 0 37px;
	box-shadow: var(--main-color) 8px 8px 0px 0px;
}

.cat .btn {
	padding-bottom: 140px;
}

.illust .sub__title {
	order: 0;
}

.illust .wrapper {
	padding-top: 90px;
}

.illust .inner {
	gap: 15px;
}

.illust .txt {
	margin: 10px 0 0 0;
}