@charset "utf-8";

html {
	font-size: 62.5%;
}

body {
	line-height: 1.8;
	font-size: 1.4rem;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--black-color);
}

:root {
	--main-color: #fa99d5;
	--dark-pink-color: #cb6ea7;
	--light-pink-color: #ffd9e4;
	--black-color: #282828;
	--blue-color: #99abfa;
	--current-color: #727272;
	--main-font: 'Noto Serif JP', serif;

}

::-webkit-scrollbar {
	width: 15px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, var(--blue-color) 0%, var(--main-color) 100%);
	border-radius: 10px;
}

::-webkit-scrollbar-track {
	background: var(--light-pink-color);
	border-left: solid 1px #ececec;
}

@font-face {
	/*フォントの名前*/
	font-family: "beverly";
	font-style: normal;
	font-weight: normal;
	/*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
	src: local("beverly"),
		url("../fonts/BeverlyHillsTypeface-Italic.woff2") format("woff2"),
		url("../fonts/BeverlyHillsTypeface-Italic.woff") format("woff");
}

.wrap {
	max-width: 1080px;
	margin: 0 auto 20px;
	padding: 0 10px;
}

body#contact .wrap {
	max-width: 720px;
}

h2.main_title {
	font-family: "tangier", 'Noto Serif JP', serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	color: var(--main-color);
	font-size: 6.4rem;
	margin: 1.5em 0 .5em;
	line-height: 1;

	.heading_jp {
		color: var(--blue-color);
		font-size: 1.3rem;
		font-weight: normal;
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
		margin-left: 20px;
	}
}

h2#contact {
	+p {
		margin-bottom: 3.2em;
	}
}

body#works h2 {
	font-size: 4rem;
	line-height: 1.25;
	font-family: var(--main-font);
	margin-top: 100px;
}

.pc {
	display: block;
}

.sp {
	display: none;
}

.mt_1em {
	margin-top: 1em;
}

/*========= レイアウトのためのCSS ===============*/
ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #fff;
	text-decoration: none;
}

p {
	word-wrap: break-word;
}

@media screen and (max-width: 767px) {
	h2.main_title {
		font-size: 5.6rem;
	}

	body#works h2 {
		font-size: 2.6rem;
		margin-top: 75px;
	}

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
}



/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--main-color);
	z-index: 9999999;
	text-align: center;
	color: #fff;
}

#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
	width: 300px;
}

@media screen and (max-width: 280px) {
	#splash_logo svg {
		width: 240px;
	}
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
	fill-opacity: 0;
	/*最初は透過0で見えない状態*/
	transition: fill-opacity .5s;
	/*カラーがつく際のアニメーション0.5秒で変化*/
	fill: none;
	/*塗りがない状態*/
	stroke: var(--black-color);
	/*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
	fill: var(--black-color);
	/*塗りの色*/
	fill-opacity: 1;
	/*透過1で見える状態*/
	stroke: none;
	/*線の色なし*/
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg {
	display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
	display: block;
	content: "";
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	background-color: var(--main-color);
	/*伸びる背景色の設定*/
	animation-name: PageAnime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes PageAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#wrapper {
	opacity: 0;
	/*はじめは透過0に*/
	overflow: hidden;
}

/*bodyにappearクラスがついたら出現*/
body.appear #wrapper {
	animation-name: PageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}



/*====================================
	header
======================================*/
header {
	position: relative;
}

.logo {
	position: fixed;
	top: 15px;
	left: 15px;
	width: 56px;
	height: 56px;
	z-index: 10;
	mix-blend-mode: plus-lighter;
}

.header_nav {
	display: none;
}

@media screen and (max-width: 767px) {
	.logo {
		width: 44px;
		height: 44px;
	}
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/
.outer-menu {
	position: fixed;
	left: 0;
	z-index: 998;

	.openbtn {
		&.active {
			+.btn_inner {
				>div {
					transform: rotate(135deg);
				}

				&::before,
				&::after {
					top: 0;
					transform: rotate(90deg);
				}

				&::after {
					opacity: 0;
				}
			}

			~.menu {
				pointer-events: auto;
				visibility: visible;

				>div {
					transform: scale(1);
					transition-duration: 0.75s;

					>div {
						opacity: 1;
						transition: opacity 0.4s ease 0.4s;
					}
				}
			}
		}

		&:hover+.btn_inner {
			box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
		}

		&:hover.active+.btn_inner>div {
			transform: rotate(225deg);
		}

		>div {

			&::before,
			&::after {
				content: '';
				position: absolute;
				z-index: 1;
				top: -10px;
				left: 0;
				width: 100%;
				height: 2px;
				background: inherit;
				transition: all 0.4s ease;
			}

			&::after {
				top: 10px;
			}
		}
	}

	.menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		visibility: hidden;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		outline: 1px solid transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-align: center;
		opacity: 0;
		transition: .5s ease-in-out;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'Playfair Display', 'Noto Serif JP', serif;

		&.is-open {
			opacity: 1;
		}

		>div {
			width: 200vw;
			height: 200vw;
			color: #FEFEFE;
			background: rgba(41, 41, 41, 0.97);
			border-radius: 50%;
			transition: all 0.4s ease;
			flex: none;
			transform: scale(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			>div {
				text-align: center;
				max-width: 90vw;
				max-height: 100vh;
				opacity: 0;
				transition: opacity 0.4s ease;
				overflow-y: auto;
				flex: none;
				display: flex;
				align-items: center;
				justify-content: center;

				>.logo {
					padding-right: 5em;

					>img {
						max-width: 300px;
						width: 100%;
					}
				}

				>ul {
					list-style: none;
					padding: 0 1em;
					margin: 0;
					display: block;
					max-height: 100vh;
					text-align: left;

					>li {
						padding: 0;
						margin: 1em;
						font-size: 24px;
						display: block;

						>a {
							position: relative;
							display: inline;
							cursor: pointer;
							transition: color 0.4s ease;

							&:hover {
								color: var(--current-color);
							}

							&.current {
								color: var(--current-color);
								cursor: default;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.outer-menu {
		.menu {
			>div {
				width: 260vw;
				height: 260vw;

				>div {
					display: block;

					>.logo {
						padding: 0 0 1em 0;
					}

					>ul {
						text-align: center;
					}
				}
			}
		}
	}
}


/*==================================================
SVGアニメーションボタン
===================================*/
.openbtn {
	position: absolute;
	right: -10rem;
	top: -10rem;
	background-color: var(--main-color);
	cursor: pointer;
	width: 20rem;
	height: 20rem;
	border-radius: 50%;
	z-index: 999;
	position: fixed;
	transition: all .3s;
}

.btn_inner {
	--color: #fff;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	outline: none;
	position: absolute;
	top: 8.5em;
	left: 3em;
	border: none;
	background: none;
	cursor: pointer;
	-webkit-appearence: none;
	-webkit-tap-highlight-color: transparent;
	z-index: 1000;

	svg {
		width: 64px;
		height: 48px;
		top: -6px;
		left: -14px;
		stroke: var(--color);
		stroke-width: 4px;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
		display: block;
		position: absolute;

		path {
			transition: stroke-dasharray var(--duration, .85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, .85s) var(--easing, ease) var(--delay, 0s);
			stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
			stroke-dashoffset: var(--offset, 126px);
			transform: translateZ(0);

			&:nth-child(2) {
				--duration: .7s;
				--easing: ease-in;
				--offset: 100px;
				--array-2: 74px;
			}

			&:nth-child(3) {
				--offset: 133px;
				--array-2: 107px;
			}
		}
	}

	&.active {
		svg {
			path {
				--offset: 57px;

				&:nth-child(1),
				&:nth-child(3) {
					--delay: .15s;
					--easing: cubic-bezier(.2, .4, .2, 1.1);
				}

				&:nth-child(2) {
					--duration: .4s;
					--offset: 2px;
					--array-1: 1px;
				}

				&:nth-child(3) {
					--offset: 58px;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.openbtn {
		width: 18rem;
		height: 18rem;
	}

	.btn_inner {
		top: 8em;
		left: 2.1em;
	}
}



/*====================================
	main
======================================*/
/*==================================================
	MVエリア
===================================*/
#mv {
	height: 100vh;
	width: 100%;
}

.name_text {
	color: #fff;
	text-shadow: 2px 2px 3px var(--black-color);
	position: absolute;
	left: 10px;
	top: 60%;

	.name {
		font-size: 5rem;
		font-family: "beverly", sans-serif;
		font-weight: 400;
		font-style: normal;
		line-height: 1.4;
	}

	.title {
		font-size: 2.4rem;
		font-family: 'Playfair Display', serif;
		margin-top: 1em;
		line-height: 1.4;
	}
}

@media screen and (max-width: 767px) {
	.name_text {
		.name {
			font-size: 4rem;
		}

		.title {
			font-size: 1.8rem;
		}
	}
}

@media screen and (max-width: 280px) {
	.name_text {
		.name {
			font-size: 3rem;
		}
	}
}



/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-3 マウスが動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown3 {
	/*描画位置※位置は適宜調整してください*/
	position: absolute;
	bottom: 10px;
	right: 50%;
	/*マウスの動き1.6秒かけて動く永遠にループ*/
	animation: mousemove 1.6s ease-in-out infinite;
}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove {
	0% {
		bottom: 10px;
	}

	50% {
		bottom: 5px;
	}

	100% {
		bottom: 10px;
	}
}

/*Scrollテキストの描写*/
.scrolldown3 span {
	/*描画位置*/
	position: absolute;
	left: -12px;
	bottom: 45px;
	/*テキストの形状*/
	color: #eee;
	font-size: 1.1rem;
	font-family: 'Playfair Display', serif;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 1px #000;
}

/*マウスの中の線描写 */
.scrolldown3 span::after {
	content: "";
	/*描画位置*/
	position: absolute;
	top: 10px;
	left: 14px;
	/*線の形状*/
	width: 1px;
	height: 15px;
	background: #eee;
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity: 0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove {
	0% {
		height: 0;
		top: 10px;
		opacity: 0;
	}

	50% {
		height: 15px;
		opacity: 1;
	}

	100% {
		height: 0;
		top: 30px;
		opacity: 0;
	}
}

/*マウスの描写 */
.scrolldown3:before {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom: 0;
	left: -10px;
	/*マウスの形状*/
	width: 25px;
	height: 37px;
	border-radius: 10px;
	border: 1px solid #eee;
}

/*マウスの中の丸の描写*/
.scrolldown3:after {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom: 26px;
	left: 0;
	/*丸の形状*/
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: 1px solid #eee;
}



/*==================================================
	背景色が伸びて出現
===================================*/

/*全共通*/
.bgextend_image,
.bgextend_text,
.bgextend_btn {
	animation-name: bgextendAnimeBase;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	opacity: 0;
	margin: 20px 0;
}

.bgextend_image,
.bgextend_text,
.bgextend_btn {
	margin: 0;
}

.bgextend_btn {
	margin: 0;

	/* &:last-child {
		margin-left: 10px;
	} */
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*中の要素*/
.bgappear_image,
.bgappear_text,
.bgappear_btn {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.bgLRextend_image::before,
.bgLRextend_text::before,
.bgLRextend_btn::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--blue-color);
}

.bgLRextend_image {
	display: inline-block;
}

.bgLRextend_image::before,
.bgLRextend_text::before,
.bgLRextend_btn::before {
	background-color: var(--main-color);
}

.bgLRextend_btn::before {
	display: block;
}

@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger_image,
.bgLRextendTrigger_image,
.bgappearTrigger_text,
.bgLRextendTrigger_text,
.bgappearTrigger_btn,
.bgLRextendTrigger_btn {
	opacity: 0;
}



/*==================================================
	Aboutエリア
===================================*/
.about_inner {
	display: flex;

	>.icon_image {
		max-width: 230px;
		width: 100%;

		img {
			width: 100%;
		}
	}

	>.about_text {
		margin-left: 3em;

		>.name_en {
			font-size: 4.8rem;
			font-family: "beverly", sans-serif;
			margin: 0 0 20px -2em;
			line-height: 1.2;

			.name_ja {
				display: inline;
				font-size: 1.8rem;
				font-family: 'Playfair Display', serif;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.about_inner {
		display: block;

		>.icon_image {
			margin: 0 auto;
			max-width: 150px;
		}

		>.about_text {
			margin-left: 0;

			>.name_en {
				font-size: 4rem;
				margin: 0 0 20px;

				.name_ja {
					font-size: 1.8rem;
				}
			}
		}
	}
}

@media screen and (max-width: 280px) {
	.about_inner {
		>.about_text {
			>.name_en {
				font-size: 3rem;
			}
		}
	}
}



/*==================================================
	Skillsエリア
===================================*/
.skill_title {
	color: #fff;
	font-size: 4rem;
	font-family: "joly-display", sans-serif;
	font-weight: 700;
	font-style: italic;
	margin: 3em 0 .5em;

	&:first-child {
		margin-top: 0;
	}

	&::before {
		content: "";
	}
}

.tools {
	color: var(--blue-color);
	font-size: 2.4rem;
	font-family: "joly-display", sans-serif;
	font-weight: 500;
	font-style: normal;
	margin-top: 40px;
	line-height: 1;
}

.explanation {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;

	p {
		margin-left: 3%;
	}

	.skill__icon {
		max-width: 200px;

		img {
			width: 100%;
		}
	}
}

.skills_wrap {
	display: flex;
	flex-wrap: wrap;
}

/* スキル全体を囲うdiv */
.skill {
	margin: 10px 0 0 25px;
	/* 上下のマージンを指定 */
	flex: 1 1 calc(100% / 3 - 25px);

	&:nth-child(3n+1) {
		margin-left: 0;
	}
}

/* スキルの情報 */
.skill-info {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
	font-family: 'Playfair Display', serif;
}

.skill-name {
	font-size: 1.8rem;
	padding-left: 32px;
	position: relative;

	&.icon::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 25px;
		height: 25px;
		background-size: 25px;
	}

	&.illustrator::before {
		background-image: url(../images/icon_illustrator.svg);
	}

	&.photoshop::before {
		background-image: url(../images/icon_photoshop.svg);
	}

	&.html-css::before {
		background-image: url(../images/icon_html-css.svg);
	}

	&.sass::before {
		background-image: url(../images/icon_sass.svg);
	}

	&.javascript::before {
		background-image: url(../images/icon_javascript.svg);
	}

	&.jquery::before {
		background-image: url(../images/icon_jquery.svg);
	}

	&.wordpress::before {
		background-image: url(../images/icon_wordpress.svg);
	}

	&.vscode::before {
		background-image: url(../images/icon_visual-studio.svg);
	}

	&.figma::before {
		background-image: url(../images/icon_figma.svg);
	}

	&.clipstadio::before {
		background-image: url(../images/icon_clipstadio.svg);
	}

	&.sai::before {
		background-image: url(../images/icon_sai.svg);
	}
}

/* スキルの熟練度（パーセンテージ） */
.skill-percentage {
	opacity: 0;
	/* 初期状態では透明に */
	transition: opacity 0.6s;
}

/* スキルバーの親要素 */
.skill-bar-container {
	position: relative;
	width: 100%;
	height: 20px;
	/* スキルバーの高さ */
	background-color: #f3f3f3;
	/* スキルバーの背景色 */
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 0 6px rgba(243, 243, 243, .7);
}

/* スキルバー本体 */
.skill-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	/* 初期状態では0 */
	background: linear-gradient(90deg, var(--blue-color) 0%, var(--main-color) 100%);
	/* スキルバーの色 */
	transition: width 3s cubic-bezier(0.22, 1, 0.36, 1);
	/* スキルバーが伸びる速度を調整 */
	border-radius: 20px;
}

.icon_link {
	text-align: right;
	margin-top: 40px;

	a {
		color: var(--current-color);
		text-decoration: underline;
		transition: all 0.5s 0s ease-in-out;

		&:hover {
			color: #b9b9b9;
		}
	}
}

@media screen and (max-width: 767px) {
	.skill_title {
		font-size: 3.2rem;
		line-height: 1.2;
	}

	.explanation {
		flex-direction: column-reverse;

		p {
			margin-left: 0;
		}

		.skill__icon {
			max-width: 150px;
		}
	}

	.skills_wrap {
		display: block;

		.skill {
			margin-left: 0;
		}
	}

	.skill-bar-container {
		height: 16px;
	}
}


/*==================================================
	ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn {
	background: var(--blue-color);
	padding: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2em;
}

.sort-btn dt {
	font-weight: bold;
	margin: 0 0 10px 0;
	color: var(--black-color);
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
}

.sort-btn dd {
	margin: 0 0 10px 0;
}

.sort-btn ul {
	display: flex;
	flex-wrap: wrap;
}

.sort-btn li {
	margin: 0 10px;
}

.sort-btn ul li {
	position: relative;
	cursor: pointer;
	margin: 0 10px 0 0;
	display: inline-block;
	color: #fff;

	>span {
		display: inline-block;
		position: relative;
		background-color: transparent;
		width: 25px;
		height: 25px;
		transform-origin: center;
		border: 2px solid #fff;
		border-radius: 50%;
		vertical-align: -6px;
		margin-right: 10px;
		transition: background-color 150ms 200ms, transform 350ms cubic-bezier(.78, -1.22, .17, 1.89);

		&:before {
			content: "";
			width: 0px;
			height: 2px;
			border-radius: 2px;
			background: #fff;
			position: absolute;
			transform: rotate(45deg);
			top: 10px;
			left: 7px;
			transition: width 50ms ease 50ms;
			transform-origin: 0% 0%;
		}

		&:after {
			content: "";
			width: 0;
			height: 2px;
			border-radius: 2px;
			background: #fff;
			position: absolute;
			transform: rotate(305deg);
			top: 14px;
			left: 8px;
			transition: width 50ms ease;
			transform-origin: 0% 0%;
		}
	}

	&:hover {
		span {
			&:before {
				width: 5px;
				transition: width 100ms ease;
			}

			&:after {
				width: 10px;
				transition: width 150ms ease 100ms;
			}
		}
	}
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
	.sort-btn li {
		width: 100%;
		margin: 0;
	}

	.sort-btn ul li {
		width: auto;
	}

}

.sort-btn ul li.active {
	span {
		background-color: #fff;
		transform: scale(1.25);

		&:after {
			width: 10px;
			background: var(--blue-color);
			transition: width 150ms ease 100ms;
		}

		&:before {
			width: 5px;
			background: var(--blue-color);
			transition: width 150ms ease 100ms;
		}
	}

	&:hover {
		span {
			background-color: #fff;
			transform: scale(1.25);

			&:after {
				width: 10px;
				background: var(--blue-color);
				transition: width 150ms ease 100ms;
			}

			&:before {
				width: 5px;
				background: var(--blue-color);
				transition: width 150ms ease 100ms;
			}
		}
	}
}

.checkbox {
	vertical-align: middle;
	text-align: center;
}



/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;
	/*並び替えの基準点を指定*/
	margin: 0 auto;
}

.item {
	display: block;
	z-index: 1;
	position: absolute;
	width: calc(100% / 4 - 1px);
	padding: 0 10px 10px 10px;
	/*画像に余白をつける*/
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	a {
		&:hover img {
			transform: scale(1.1);
		}
	}
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	/*画像の下にできる余白を削除*/
	transition: .5s ease-in-out;
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.item {
		width: calc(100% / 3 - 1px);
	}
}

@media only screen and (max-width: 768px) {
	.item {
		width: calc(100% / 2 - 1px);
	}
}

/*＝＝＝lightboxサムネイル背景と画像選択時の枠線の指定*/
.lightbox-thumbs {
	background: transparent !important;
}

.lightbox-thumbs__list a:before {
	border: 6px solid var(--main-color);
}


/* area */
.skills_area,
.contact_area {
	margin: 50px auto 0;
	padding: 1px 0 7em;
	background-color: var(--black-color);

	p {
		color: #fff;
	}
}

.about_area {
	margin-bottom: 7em;
}

.skills_area {
	margin-top: 0;
}

.contact_area {
	text-align: center;
}

.btn_area {
	display: flex;
	justify-content: center;

	&.right {
		justify-content: flex-end;
		margin-top: 20px;
	}
}

/* btn */
.lb-data .lb-caption .c-button._shiny,
.btn_area .c-button._shiny {
	display: block;
	position: relative;
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 1.6rem;
	color: #fff;
	max-width: 220px;
	width: 100%;
	padding: 16px 1.5em;
	margin: 10px auto 10px 0;
	line-height: 1;
	background-color: var(--main-color);
	box-shadow: 0 3px 0 0 var(--dark-pink-color);
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: 300ms;
}

.btn_area .c-button._shiny {
	margin: 0 0 3px 0;
}

.lb-data .lb-caption .c-button._shiny::before,
.btn_area .c-button._shiny::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #b5e7ff;
	transition: 300ms;
	animation: shinyshiny 2.5s ease-in-out infinite;
}

.lb-data .lb-caption .c-button._shiny:hover,
.btn_area .c-button._shiny:hover {
	text-decoration: none;
	box-shadow: none;
	transform: translateY(3px);
}

@keyframes shinyshiny {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}



/*====================================
	footer
======================================*/
footer {
	text-align: center;
	position: relative;
}

.footer_inner {
	color: #fff;
	padding: 15px;
	background-color: var(--blue-color);
}

.attribution {
	a {
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}
}

#top_btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);

	>a {
		font-family: tangier, sans-serif;
		font-style: normal;
		font-weight: 300;
		display: inline-block;
		text-align: center;
		border: 3px solid var(--main-color);
		background-color: #fff;
		width: 70px;
		height: 70px;
		box-sizing: border-box;
		padding: 8px 0;
		border-radius: 50%;
		transition: all 0.5s 0s ease-in-out;

		>span {
			display: block;
			font-size: 2rem;
			color: var(--main-color);
			line-height: 1;
			margin-top: 5px;
			transition: all 0.5s 0s ease-in-out;
		}

		>img {
			width: 20px;
			height: auto;
			margin: 0 auto;
			transition: all 0.5s 0s ease-in-out;

			&.off {
				display: block;
			}

			&.on {
				display: none;
			}
		}

		&:hover {
			background-color: var(--main-color);

			>span {
				color: #fff;
			}

			>img {
				transition: all 0.5s 0s ease-in-out;
				animation: PageTop 0.7s infinite alternate ease-in-out;

				&.off {
					display: none;
				}

				&.on {
					display: block;
				}
			}
		}
	}

	/*　上に上がる動き　*/
	&.UpMove {
		animation: UpAnime 0.5s forwards;
	}

	/*　下に下がる動き　*/
	&.DownMove {
		animation: DownAnime 0.5s forwards;
	}
}

@keyframes PageTop {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(-25%);
	}
}

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

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

@keyframes DownAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 1;
		transform: translateY(100px);
	}
}

@media only screen and (max-width: 768px) {
	#top_btn {
		right: 10px;
		bottom: 10px;

		a {
			width: 55px;
			height: 55px;
			padding: 4px 0;

			>img {
				width: 15px;
			}

			>span {
				font-size: 1.8rem;
			}
		}
	}
}



/*====================================
	About詳細ページ
======================================*/
.profile {
	margin: 6em 0 12em;
}

h2.profile__heading {
	color: var(--blue-color);
	font-size: 2.4rem;
	font-weight: bold;
	font-family: var(--main-font);
	margin: 1.5em 0 .5em;
	text-align: center;
	line-height: 8em;
	position: relative;

	span {
		position: relative;
		z-index: 1;
	}

	&::before {
		content: "About";
		font-family: "tangier", 'Noto Serif JP', serif;
		font-weight: 700;
		font-style: normal;
		text-shadow: 0 0 10px var(--main-color);
		color: #fff;
		font-size: 15rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}

.about__inner {
	display: flex;
}

.about__image {
	position: relative;

	img {
		max-width: 400px;
		width: 100%;
		transform: rotate(5deg);
	}

	&::after {
		position: absolute;
		content: "";
		left: 60px;
		bottom: -80px;
		z-index: -1;
		max-width: 400px;
		width: 90%;
		height: 100%;
		opacity: 0.8;
		background-image: url(../images/about_image.jpg);
		background-size: contain;
		filter: blur(6px);
		transform: rotate(5deg);
	}
}

.name__text {
	margin: 70px 0 0 8em;

	h1 {
		font-weight: normal;
		margin-bottom: 1em;
	}
}

h2.biography__heading {
	color: var(--blue-color);
	font-size: 2.4rem;
	font-weight: bold;
	font-family: var(--main-font);
	margin: 1.5em 0 1em;
	text-align: center;
	line-height: 8em;
	position: relative;

	span {
		position: relative;
		z-index: 1;
	}

	&::before {
		content: "Biography";
		font-family: "tangier", 'Noto Serif JP', serif;
		font-weight: 700;
		font-style: normal;
		text-shadow: 0 0 10px var(--main-color);
		color: var(--black-color);
		font-size: 15rem;
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* biography */
.biography {
	background-color: var(--black-color);
	min-height: 100dvh;
	min-height: 100vh;
	color: #fff;
	position: relative;
	padding: 1px 0 7em;
}

.biography__inner {
	padding-inline: 30px;
}

.biography__wrapper {
	margin-bottom: 46px;
}

.biography__container {
	position: relative;
	width: 100%;
	height: 390px;
}

.biography__list {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	gap: 90px;
}

.biography__item {
	position: relative;
	z-index: 1;
	width: 240px;
	color: #fff;
}

.biography__item:last-of-type {
	margin-right: 75px;
}

.biography__date {
	display: inline-block;
	margin-bottom: 20px;
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 1.6rem;
	letter-spacing: 0.07em;
}

.biography__title {
	margin-bottom: 48px;
	font-size: 1.6rem;
}

.biography__dot {
	display: block;
	position: relative;
	width: 10px;
	height: 10px;
	margin-bottom: 44px;
	background-color: var(--main-color);
	border-radius: 50%;
}

.biography__dot::after {
	position: absolute;
	content: "";
	top: 5px;
	left: 0;
	z-index: -1;
	width: 330px;
	height: 1px;
	background-color: var(--light-pink-color);
}

.biography__item:last-of-type .biography__dot::after {
	width: 360px;
}

.biography__description {
	font-size: 1.3rem;
	line-height: 2.7;
}

.biography__bg-text {
	position: absolute;
	bottom: 0;
	margin-left: 6vw;
	font-size: 13.2rem;
	font-weight: 900;
	font-family: var(--main-font);
	white-space: nowrap;
	background: linear-gradient(to bottom, #101010, rgba(255, 255, 255, 0));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
	#biography {
		padding-top: 120px;
		padding-bottom: 278px;
	}

	.biography::before {
		width: 45vw;
	}

	.biography__inner {
		margin-inline: auto;
		padding-inline: 40px;
		max-width: 1160px;
	}

	.biography__wrapper {
		margin-bottom: 0;
	}

	.biography__container {
		height: 400px;
	}

	.biography__list {
		gap: 140px;
	}

	.biography__item {
		width: 300px;
	}

	.biography__item:last-of-type {
		margin-right: 120px;
	}

	.biography__date {
		margin-bottom: 24px;
		font-size: 2.0rem;
	}

	.biography__title {
		margin-bottom: 62px;
		font-size: 1.8rem;
	}

	.biography__dot {
		width: 12px;
		height: 12px;
		margin-bottom: 52px;
	}

	.biography__dot::after {
		width: 535px;
	}

	.biography__item:last-of-type .biography__dot::after {
		width: calc(100vw - 440px);
	}

	.biography__description {
		font-size: 1.5rem;
		line-height: 2.5;
	}

	.biography__bg-text {
		margin-left: 29.375vw;
		font-size: 27.0rem;
	}
}

@media screen and (max-width: 767px) {
	h2.profile__heading {
		&::before {
			font-size: 8rem;
		}
	}

	h2.biography__heading {
		line-height: 6em;

		&::before {
			font-size: 8rem;
		}
	}

	.about__inner {
		display: block;
	}

	.about__image {
		text-align: center;
		width: 80%;
		margin: 0 auto;
		left: -4%;

		&::after {
			left: 20%;
			bottom: -50px;
		}
	}

	.name__text {
		margin-left: 0;

		h1 {
			font-weight: normal;
			margin-bottom: 1em;
		}
	}
}

/*====================================
	contact page
======================================*/
body:not(#top) #splash {
	display: none;
}

body#contact {
	-webkit-font-smoothing: antialiased;
}

h3.sub_title {
	margin-top: 1em;
	color: var(--main-color);
}

h4 {
	margin-top: 10px;
	color: var(--blue-color);
}

.form {
	margin: 20px auto;
	padding: 0 10px;
	max-width: 720px;
}

.form_item {
	border-top: 1px solid #ddd;
	padding-top: 24px;
	padding-bottom: 24px;
	width: 100%;
	display: flex;
	align-items: center;

	&:nth-child(5) {
		border-bottom: 1px solid #ddd;
	}
}

@media screen and (max-width: 540px) {
	.form_item {
		padding-left: 14px;
		padding-right: 14px;
		padding-top: 16px;
		padding-bottom: 16px;
		flex-wrap: wrap;
	}
}

.form_item_label {
	width: 100%;
	max-width: 248px;
	letter-spacing: 0.05em;
	font-weight: bold;
	font-size: 1.4rem;

	small {
		font-weight: normal;
		display: block;
	}
}

@media screen and (max-width: 540px) {
	.form_item_label {
		max-width: inherit;
		display: flex;
		align-items: center;

		small {
			margin-left: 20px;
		}
	}
}

.form_item_label.isMsg {
	margin-top: 8px;
	margin-bottom: auto;
}

@media screen and (max-width: 540px) {
	.form_item_label.isMsg {
		margin-top: 0;
	}
}

.form_item_label_required,
.form_item_label_any {
	border-radius: 6px;
	margin-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 48px;
	display: inline-block;
	text-align: center;
	background: var(--main-color);
	color: #fff;
	font-size: 1.4rem;
}

.form_item_label_any {
	background: var(--blue-color);
}

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

	.form_item_label_required,
	.form_item_label_any {
		border-radius: 4px;
		padding-top: 4px;
		padding-bottom: 4px;
		width: 32px;
		font-size: 1rem;
	}
}

.form_item_input {
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-left: 40px;
	padding-left: 1em;
	padding-right: 1em;
	height: 34px;
	flex: 1;
	width: 100%;
	max-width: 410px;
	background: #eaedf2;
	font-size: 1.4rem;
}

.form_item_select {
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-left: 40px;
	padding-left: 1em;
	padding-right: 1em;
	height: 34px;
	flex: 1;
	width: 100%;
	max-width: 60px;
	background: #eaedf2;
	font-size: 1.4rem;
}

.form_checkbox {
	margin-left: 40px;
	flex: 1;
	width: 100%;
	max-width: 410px;
	font-size: 1.4rem;

	input {
		margin-left: 20px;

		&:first-child {
			margin-left: 0;
		}
	}
}

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

	.form_item_input,
	.form_item_select {
		margin-left: 0;
		margin-top: 18px;
		flex: inherit;
		font-size: 1.2rem;
	}
}

.form_item_textarea {
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-left: 40px;
	padding-left: 1em;
	padding-right: 1em;
	height: 216px;
	flex: 1;
	width: 100%;
	max-width: 410px;
	background: #eaedf2;
	font-size: 1.8rem;
}

@media screen and (max-width: 540px) {
	.form_item_textarea {
		margin-top: 18px;
		margin-left: 0;
		height: 200px;
		flex: inherit;
		font-size: 1.5rem;
	}
}

.form_btn {
	margin: 20px auto 0;
	min-width: 200px;
	color: #fff;
	padding: 10px 10px;
	font-size: 1.8rem;
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: block;
	outline: none;
	border-radius: 5px;
	border: none;
	background-size: 120% auto;
	background-image: linear-gradient(315deg, var(--blue-color) 0%, var(--main-color) 75%);

	&:hover {
		background-position: right center;
	}

	&:active {
		top: 2px;
	}
}

input[type="submit"] {
	-webkit-appearance: none;
}

@keyframes shinyshiny {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}



/*==================================================
	実績詳細ページ
===================================*/
.genre {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;

	>li {
		color: var(--blue-color);
		border: 2px solid var(--blue-color);
		padding: 6px 10px;
		border-radius: 5px;
		line-height: 1;
		margin-left: 10px;

		&:first-child {
			margin-left: 0;
		}
	}
}

.center {
	text-align: center;
	margin-bottom: 10px;
}

.slick-img {
	img {
		display: block;
		margin: 0 auto;
		height: 40vw;
	}

	&.large_img {
		img {
			height: auto;
			width: 100%;
		}
	}

	&.small_img,
	&.small_img2 {
		img {
			height: auto;
		}
	}
}

.slick-img.border {
	>img {
		border: 1px solid #cbcbcb;
	}
}

.slide-arrow {
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 50px;
	z-index: 10;
}

.prev-arrow {
	left: 0;
}

.next-arrow {
	right: 0;
}

.concept_box {
	margin: 60px auto 0;
	display: table;

	.concept_inner {
		display: flex;
		align-items: baseline;
		margin-bottom: 20px;

		>h3 {
			background-color: var(--main-color);
			color: #fff;
			padding: 6px 10px;
			margin-right: 10px;
			border-radius: 5px;
			line-height: 1;
			width: 100px;
			font-size: 1.4rem;
			font-family: 'Playfair Display', 'Noto Serif JP', serif;
			text-align: center;
		}
	}
}

.url {
	color: var(--blue-color);
	text-decoration: underline;
	transition: all 0.5s 0s ease-in-out;

	&:hover {
		opacity: .7;
	}
}

@media screen and (max-width: 767px) {
	.slick-img {
		img {
			height: 58vw;
		}

		&.small_img {
			img {
				height: 58vw;
			}
		}

		&.small_img2 {
			img {
				height: auto;
			}
		}
	}

	.prev-arrow {
		left: -20px;
	}

	.next-arrow {
		right: -20px;
	}


	.concept_box {
		.concept_inner {
			display: block;

			>h3 {
				margin: 0 0 5px 0;
			}

			>p {
				font-size: 1.2rem;
			}
		}
	}
}