@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	font-family: ;
	color: #333;
}

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

.sp-header-image-inner {
	display: none;
}

.sp-br {
	display: none;
}



h2.underbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-bottom: 2px solid #333;
}







header {
	background-color: #fff;
	height: 70px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	opacity: .7;
}

.header {
	max-width: 1000px;
	width: 100%;
	margin: auto;
	padding: 8px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header .menu {
	margin-right: 0px;
}

.header .menu ul {
	display: flex;
}

.header .menu ul li {
	list-style-type: none;
	margin: 0 20px;
}

.header .menu ul li a {
	color: #000;
	font-weight: bold;
	font-family: 'Kosugi Maru', sans-serif;
}

.header .menu ul li a:hover {
	text-decoration: none;
	opacity: .4;
}




/* ヘッダー画像 */



/* ヘッダー映像 */
#bg-video {
	width: 100%;
	position: relative;
}

.header-image-inner {
	z-index: 10;
}

.header-image-inner .title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.header-image-inner .title h1 {
	color: #fff;
	font-size: 80px;
	position: relative;
	top: 50%;
	width: 7em;
	margin: 0 auto;
	border-right: 2px solid rgba(255, 255, 255, .75);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	transform: translateY(-50%);
}

/* アニメーションセッティング */
.anim-typewriter {
	animation: typewriter 4s steps(44) 1s 1 normal both,
	blinkTextCursor 500ms steps(44) infinite normal;
}
/* タイプライターアニメーション */
@keyframes typewriter {
	from{width: 0;}
	to{width: 7em;}
}
/* 点滅アニメーション */
@keyframes blinkTextCursor {
	from{border-right-color: rgba(255, 255, 255, .75);}
	to{border-right-color: transparent;}
}


.header-image-inner .title .kanji,
.header-image-inner .title .hello {
	color: #fff;
	font-size: 30px;
	text-align: center;
	font-family: 'Kosugi Maru', sans-serif;
}

.header-image-inner .title .hello {
	position: relative;
	left: 15px;
}

.header-image-inner .down-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 110px);
	color: #fff;
	font-size: 40px;
}





/* About Me */

.aboutme div.show h2,
.aboutme div.show p {
	opacity: 1;
	transform: none;
}

.aboutme {
	background-color: #fff;
	padding: 50px 20px;
}

.aboutme .self-introduction h2 {
	display: inline-block;
	font-size: 30px;
	margin-bottom: 30px;
	position: relative;
	opacity: 0;
	transition: 2s;
	transform: translateX(-50px);
}

.aboutme .self-introduction p {
	font-size: 16px;
	line-height: 1.5em;
	margin-left: 20px;
	opacity: 0;
	transition: 2s .5s;
	transform: translateX(-50px);
}

.introduction-box div.show .icon i,
.introduction-box div.show .text p.box-title,
.introduction-box div.show .text p {
	opacity: 1;
	transform: none;
}

.introduction-box .box {
	display: flex;
	margin-top: 20px;
}

.introduction-box .box .icon i {
	font-size: 50px;
	display: inline-block;
	border: 2px solid #666;
	padding: 10px 20px;
	border-radius: 50%;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.introduction-box .box .text {
	margin-left: 20px;
}

.introduction-box .box .text .box-title {
	font-size: 20px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.introduction-box .box .text p {
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.aboutme div.show img {
	opacity: 1;
	transform: none;
}

.aboutme .myphoto img {
	opacity: 0;
	transform: translateX(40px);
	transition: 2s;
}



/* パララックスエリア(1) */

.parallax {
	height: 300px;
	position: relative;
}

.parallax1 {
	background-image: url(../img/nagasaki01.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.parallax .contact-btn {
	position: absolute;
	top: 50%;
	left: 50px;
}

.parallax .contact-btn a {
	font-size: 25px;
	color: #fff;
	padding: 10px 20px;
	border: 1px solid #fff;
	border-radius: 10px;
	transition: .5s;
}

.parallax .contact-btn a:hover {
	text-decoration: none;
	color: #2D2E3F;
	background-color: #fff;
}

.parallax .par-text {
	position: absolute;
	top: 50%;
	right: 10%;
}

.parallax .par-text p {
	color: #fff;
	font-size: 24px;
}



/* パララックスエリア(0-1) */

.parallax0-1 {
	height: 150px;
	background-image: url(../img/web-design.jpeg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}


/* バナー画像のポートフォリオ */

.banner-portfolio {
	padding-top: 30px;
	padding-bottom: 100px;
}

.banner-portfolio .title {
	text-align: center;
}

.banner-portfolio .title .small-p {
	font-size: 14px;
}

.banner-portfolio .portfolio-boxes img {
	transition: 0.4s;
}

.banner-portfolio .portfolio-boxes img:hover {
	opacity: .5;
}


/* Photoshop記事のポートフォリオ */

.photoshop-portfolio {
	padding-bottom: 100px;
}

.photoshop-portfolio .title {
	text-align: center;
}

.photoshop-portfolio .title .small-p {
	font-size: 14px;
}

.photoshop-portfolio .portfolio-boxes img {
	transition: .4s;
}

.photoshop-portfolio .portfolio-boxes img:hover {
	opacity: .5;
}



/* Webデザインのポートフォリオ */

.web-design-portfolio {
	position: relative;
}

.web-design-portfolio .title {
	text-align: center;
	margin-bottom: 50px;
}

.web-design-portfolio .title .p-message {
	margin-top: 20px;
}

.web-design-portfolio .title .p-message .small-p {
	font-size: 14px;
}


.web-design-portfolio .portfolio-boxes .p-box p {
	text-align: center;
	font-weight: bold;
	position: relative;
	right: 40px;
}

.web-design-portfolio .portfolio-boxes .p-box img {
	border-radius: 15px;
	transition: .4s;
}

.web-design-portfolio .portfolio-boxes .p-box img:hover {
	opacity: .5;
}

.web-design-portfolio {
	padding-bottom: 100px;
}







/* ポートフォリオ */

.portfolio div.show h2,
.portfolio div.show p.p-title,
.portfolio div.show p.small-p {
	opacity: 1;
	transform: none;
}

.portfolio {
	background-color: #ddd;
	padding: 50px 20px;
}

.portfolio .title {
	text-align: center;
}

.portfolio .title h2 {
	font-size: 30px;
	position: relative;
	margin-bottom: 30px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.portfolio .title .p-title {
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.portfolio .title .small-p {
	font-size: 12px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.portfolio-boxes .p-box {
	margin-top: 20px;
}

.portfolio-boxes div.show img,
.portfolio-boxes div.show div.btn {
	opacity: 1;
	transform: none;
}

.portfolio-boxes .p-box img {
	width: 350px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.portfolio-boxes .p-box .btn {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	font-size: 10px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.portfolio-boxes .p-box .btn a {
	color: #fff;
	background-color: #333;
	padding: 5px 8px;
	border-radius: 3px;
	text-decoration: none;
	margin: 0 5px 0 5px;
	transition: .3s;
}

.portfolio-boxes .p-box .btn a:hover {
	opacity: .5;
}




/* ボタンアニメーション */

.unfinished-btn::before,
.unfinished-btn::after {
	position: absolute;
	z-index: 1;
	display: block;
	content: "";
}

.unfinished-btn,
.unfinished-btn::before,
.unfinished-btn::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.unfinished-btn {
	position: relative;
	z-index: 10;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.unfinished-btn:hover {
	color: #333!important;
	opacity: 1!important;
	background-color: #fff!important;
	font-weight: bold;
}

.unfinished-btn::after {
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}

.unfinished-btn:hover::after {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	border-radius: 5px 5px 0 0;
}



/* SEOのポートフォリオ */

#seo .portfolio-box p {
	text-align: center;
}

#seo .portfolio-box img {
	border-radius: 10px;
}






/* パララックスエリア(2) */

.parallax2 {
	background-image: url(../img/nagasaki02.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.parallax2 .par-text p {
	font-size: 25px;
	text-shadow: 1px 1px 0 #333, -1px -1px 0 #333,
				 -1px 1px 0 #333, 1px -1px 0 #333,
				 0px 1px 0 #333, 0 -1px 0 #333,
				 -1px 0 0 #333, 1px 0 0 #333;
}



/* サービス */

.services .title {
	text-align: center;
}

.services div.show h2,
.services div.show p.title {
	opacity: 1;
	transform: none;
} 

.services .title h2 {
	margin-top: 50px;
	font-size: 30px;
	position: relative;
	margin-bottom: 30px;
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.services .title p.title {
	opacity: 0;
	transform: translateY(30px);
	transition: 2s;
}

.service-boxes .row {
	margin-bottom: 30px;
}

.service-boxes .box {
	text-align: center;
}

.service-boxes div.show i.fromleft,
.service-boxes div.show i.fromright,
.service-boxes div.show h3.fromleft,
.service-boxes div.show h3.fromright,
.service-boxes div.show p.fromleft,
.service-boxes div.show p.fromright {
	opacity: 1;
	transform: none;
} 

.service-boxes .box i {
	font-size: 50px;
}

.service-boxes .box i.fromleft {
	opacity: 0;
	transform: translateX(-30px);
	transition: 2s;
}

.service-boxes .box i.fromright {
	opacity: 0;
	transform: translateX(30px);
	transition: 2s;
}

.service-boxes .box h3.fromleft {
	opacity: 0;
	transform: translateX(-30px);
	transition: 2s;
}

.service-boxes .box h3.fromright {
	opacity: 0;
	transform: translateX(30px);
	transition: 2s;
}

.service-boxes .box p {
	text-align: left;
}

.service-boxes .box p.fromleft {
	opacity: 0;
	transform: translateX(-30px);
	transition: 2s;
}

.service-boxes .box p.fromright {
	opacity: 0;
	transform: translateX(30px);
	transition: 2s;
}




/* パララックスエリア(3) */

.parallax3 {
	background-image: url(../img/nagasaki03.png);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}



/* コンタクト */

.contact {
	background-color: #fff;
	margin-top: 30px;
}

.contact div.show h2,
.contact div.show p {
	opacity: 1;
	transform: none;
}

.contact .title {
	text-align: center;
	margin-bottom: 50px;
}

.contact .title h2 {
	font-size: 30px;
	position: relative;
	margin-bottom: 30px;
	opacity: 0;
	transition: 4s;
}

.contact .title p {
	opacity: 0;
	transition: 4s;
}

.contact form label {
	transform: translateX(145px);
	font-size: 14px;
	color: #666;
}

.contact form input {
	display: block;
	width: 60%;
	margin: auto;
	margin-bottom: 30px;
	background-color: #E9CDC1;
	border-style: none;
	font-size: 14px;
	padding: 14px;
	border-radius: 5px;
}

.contact form input:focus {
	outline: 0;
}

.contact form textarea {
	display: block;
	width: 60%;
	margin: auto;
	background-color: #E9CDC1;
	border-style: none;
	font-size: 14px;
	padding: 14px;
	border-radius: 5px;
}

.contact form textarea:focus {
	outline: 0;
}

.contact form button {
	display: block;
	margin: 30px auto 20px;
	width: 30%;
	border-style: none;
	background-color: #333;
	color: #fff;
	padding: 10px 0;
	font-size: 20px;
	border-radius: 25px;
	transition: .3s;
}

.contact form button:hover {
	opacity: .7;
}

.contact form button:focus {
	outline: 0;
}

.contact .annotation {
	text-align: center;
	font-size: 12px;
	color: #555;
	margin-bottom: 30px;
}



/* パララックスエリア(4) */

.parallax4 {
	background-image: url(../img/blue-bird.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}



/* フッター */

.footer {
	margin-top: 30px;
	padding-bottom: 50px;
	background-color: #333;
}

.footer .footer-inner {
	padding-top: 30px;
}

.footer .sns-link {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.footer .sns-link i {
	color: #fff;
	font-size: 30px;
	margin: 0 8px;
	transition: .4s;
}

.footer .sns-link i.fa-twitter:hover {
	color: #4682b4;
}

.footer .sns-link i.fa-instagram:hover {
	color: #D53E61;
}


.footer .copyright small {
	display: block;
	text-align: center;
	color: #fff;
}







/* レスポンシブ */

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

	.wrap {
		overflow: hidden;
	}

	.sp-br {
		display: block;
	}


	header .menu ul li a {
		font-size: 10px;
	}


	.header-image-inner {
		display: none;
	}

	.sp-header-image-inner {
		display: block;
		position: absolute;
		top: 100px;
		left: 100px;
		color: #fff;
	}

	.sp-header-image-inner p {
		font-size: 18px;
		text-align: center;
	}



	.aboutme {
		padding: 20px 20px;
		margin-bottom: 20px;
	}

	.aboutme .self-introduction h2.underbar {
		font-size: 20px;
		margin-left: 20px;
	}

	h2.underbar::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 30px;
		border-bottom: 2px solid #333;
	}

	.aboutme .self-introduction p {
		font-size: 14px;
	}

	.aboutme .introduction-box .icon i {
		font-size: 18px;
	}

	.aboutme .myphoto img {
		display: block;
		width: 80%;
		margin: auto;
	}



	.parallax {
		height: 200px;
	}

	.parallax .contact-btn a {
		display: block;
		width: 100px;
		background-color: #fff;
		color: #20326C;
		font-size: 14px;
		text-align: center;
	}

	.parallax .par-text {
		position: absolute;
		top: 20%;
		left: 10%;
	}

	.parallax .par-text p {
		font-size: 20px;
	}



	.portfolio  h2.underbar {
		font-size: 20px;
	}

	.services h2.underbar {
		font-size: 20px;
	}

	.services .service-boxes i {
		font-size: 26px;
	}

	.services .service-boxes h3 {
		font-size: 26px;
	}


	.contact h2.underbar {
		font-size: 20px;
	}

	.contact p.title {
		font-size: 12px;
	}

	.contact form label {
		transform: translateX(85px);
	}

	.contact form input {
		width: 80%;
	}

	.contact form textarea {
		width: 80%;
	}

	.contact form button {
		width: 40%;
		font-size: 14px;
	}




}