@charset "UTF-8";
	/*
	Theme Name:My portfolio
	Author: Nasshi
	Description:学習成果を掲載するポートフォリオ
	Version:1.0
	License: GNU General Publiclicencses v2 or later
	License URI:http://ww.gnu.org/licenses/gp1-2.0.html
	*/


	/*header--------------------*/
	#menu {
		font-size: 2rem;
		animation: me 5s;

	}

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

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	#menu nav {
		position: fixed;
		color: white;
		top: 20px;
		right: -300px;
		width: 250px;
		height: 80%;
		padding-top: 80px;
		background-color: #CC8914;
		opacity: 0.91;
		font-size: 1.5rem;
		z-index: 7;
		border-radius: 4px;
	}

	#menu nav ul li {
		width: 100%;
		padding: 10px;
		text-align: center;
	}

	#menu nav ul li img {
		width: 100%;
	}

	#menu nav ul li a {
		text-decoration: none;
		color: #e2dbdb
	}


	#menu .menubtn {
		position: fixed;
		top: 20px;
		right: 14px;
		width: 52px;
		height: 52px;
		z-index: 8;
		cursor: pointer;
		transition: all 400ms;

	}

	#menu .menubtn span {
		position: absolute;
		transition: all 400ms;
		box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.7);
	}

	#menu .menubtn span:nth-child(1) {
		top: 3px;
		left: 4px;
		height: 14px;
		width: 29px;
		border-radius: 2px;
		background-color: #FFF;
	}

	#menu .menubtn span:nth-child(2) {
		top: 3px;
		left: 36px;
		width: 14px;
		height: 14px;
		border-radius: 1px;
		background-color: #FFF;
	}

	#menu .menubtn span:nth-child(3) {
		top: 20px;
		left: 4px;
		width: 14px;
		height: 14px;
		border-radius: 1px;
		background-color: #FFF;
	}

	#menu .menubtn span:nth-child(4) {
		top: 20px;
		left: 21px;
		width: 29px;
		height: 14px;
		border-radius: 1px;
		background-color: #FFF;
	}

	#menu .menubtn span:nth-child(5) {
		top: 37px;
		left: 4px;
		width: 29px;
		height: 14px;
		border-radius: 1px;
		background-color: #FFF;
	}

	#menu .menubtn span:nth-child(6) {
		top: 37px;
		left: 36px;
		width: 14px;
		height: 14px;
		border-radius: 1px;
		background-color: #FFF;
	}

	#menu .menubtn.open span {
		background: #FFF;
		transition: all 500ms;
		box-shadow: none;
	}

	#menu .menubtn.open span:nth-child(1) {
		width: 30px;
		height: 10px;
		transform: translate(25px, 24px) rotate(135deg)
	}

	#menu .menubtn.open span:nth-child(4) {
		width: 44px;
		height: 10px;
		transform: translateX(-14px)
	}

	#menu .menubtn.open span:nth-child(5) {
		width: 30px;
		height: 10px;
		transform: translate(25px, -24px) rotate(-135deg)
	}

	#menu .menubtn.open span:nth-child(2) {
		opacity: 0;
		transform: translateY(-10px);
	}

	#menu .menubtn.open span:nth-child(3) {
		opacity: 0;
		transform: translateY(-10px);
	}

	#menu .menubtn.open span:nth-child(6) {
		opacity: 0;
		transform: translateY(-10px);
	}

	/*main-----------------------------------------*/

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

	.background-2 {
		background-image: url(images/background.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		padding: 10px 0;
	}




	.bgcover {
		height: 100%;
		animation: bg 6s forwards;
	}
	@keyframes bg{
		65%{
			background-color: rgba(255,255,255,0);
		}
		100%{
			background-color: rgba(255,255,255,0.3);	
		}
	}

	.bgcover2 {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}


	.main {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		box-shadow: 0 1px 2px 3px  rgba(0,0,0,0.15);
	}

	.logo {
		width: 75%;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translateY(-50%)translateX(-50%);
		animation: logo 4s;
	}

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

		100% {
			opacity: 1
		}
	}

	.line {
		width: 100%;
		position: absolute;
		top: 47%;
		left: 50%;
		transform: translateY(15%)translateX(-50%);
		animation: logo 4s;
	}


	.scroll{
		cursor: pointer;
	}

	.main span {
		display: none;
		position: absolute;
		top: 80%;
		left: 50%;
		width: 46px;
		height: 46px;
		margin-left: -23px;
		border: 1px solid black;
		border-radius: 100%;
		box-sizing: border-box;
		-webkit-animation: sdb 3s infinite;
		animation: sdb 3s infinite;
	}

	.main span::after {
		position: absolute;
		top: 50%;
		left: 50%;
		content: '';
		width: 16px;
		height: 16px;
		margin: -12px 0 0 -8px;
		border-left: 1px solid black;
		border-bottom: 1px solid black;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		box-sizing: border-box;
	}

	.main span::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		content: '';
		width: 44px;
		height: 44px;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
		border-radius: 100%;
		opacity: 0;
		box-sizing: border-box;
	}

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

		20% {
			-webkit-transform: translate(0px, 15px);
		}

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

	@keyframes sdb {
		0% {
			transform: translate(0, 0);
		}

		20% {
			transform: translate(0, 15px);
		}

		40% {
			transform: translate(0, 0);
		}
	}





	/*Profile--------------*/



	.profile {
		width: 100%;
		height: 18vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.profile img {
		width: 80%;
		height: 40%;
	}

	.profile h1 {
		font-size: 2.5rem;
		text-align: center;
		color: #fff;
		text-shadow:
			3px 3px 13px rgba(0,0,0, 1),
			-3px 3px 13px rgba(0,0,0, 1),
			3px -3px 13px rgba(0,0,0, 1),
			-3px -3px 13px rgba(0,0,0, 1),
			3px 0px 13px rgba(0,0,0, 1),
			0px 3px 13px rgba(0,0,0, 1),
			-3px 0px 13px rgba(0,0,0, 1),
			0px -3px 13px rgba(0,0,0, 1);
	}

	.pro-item {
		height: 100%;
		width: 90vw;
		padding: 20px 0;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		position: relative;
		box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3), -2px -2px 3px 3px rgba(0, 0, 0, 0.3);
	}

	.pro-text {
		margin-top: 2rem;
	}

	.pro-text h2 {
		font-size: 1.5rem;
		text-align: center;
		margin: 1rem 2rem 2rem 2rem;
		align-items: center;
		justify-content: center;
	}

	.pro-text p {
		text-align: center;
		margin: 1rem 2rem;
		align-items: center;
		justify-content: center;
	}

	.pro-item img {
		align-items: center;
		border-radius: 4px;
		margin: 10px auto 0 auto;
		width: auto;
		height: 200px;
	}

	.anime {
		opacity: 0;
		transform: translateY(50px);
	}

	.fadein {
		animation-name: fdin;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}

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

		100% {
			opacity: 1;
			transform: translate(0);
		}
	}

	/*experience----------------------------------------------------------------*/


	.experience {
		width: 100%;
		height: 20vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 3px 9px 4px rgba(255, 255, 255, 0.7) inset, 0px -2px 9px 4px rgba(0, 0, 0, 0.7) inset;
		background-image: url(images/bg-exp.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.experience h1 {
		font-size: 2.5rem;
		padding-top: 1rem;
		text-shadow:
			3px 3px 12px rgba(255, 255, 255, 0.91),
			-3px 3px 12px rgba(255, 255, 255, 0.91),
			3px -3px 12px rgba(255, 255, 255, 0.91),
			-3px -3px 12px rgba(255, 255, 255, 0.91),
			3px 0px 12px rgba(255, 255, 255, 0.91),
			0px 3px 12px rgba(255, 255, 255, 0.91),
			-3px 0px 12px rgba(255, 255, 255, 0.91),
			0px -3px 12px rgba(255, 255, 255, 0.91);
	}

	.experience img {
		width: 80%;
		height: 40%;

	}

	.ex-item {
		height: 100%;
		width: 90vw;
		margin: 0 auto;
		padding: 10px 0;
		display: block;
	}

	.ex-item p {
		text-align: center;
		padding: 1rem 0.5rem;
		font-size: 0.70rem;
		margin: 0px 0;
		line-height: 1.6;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 4px;
		height: 8rem;
		background-image: url(images/noise.png);
		background-repeat: repeat;
		background-blend-mode: luminosity;
		box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3), -2px -2px 3px 3px rgba(0, 0, 0, 0.3);
	}

	.ex-item img {
		width: 8rem;
		height: 8rem;
		border-radius: 4px;
		margin: 30px 0;
		background-color: #fff;
		box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3), -2px -2px 3px 3px rgba(0, 0, 0, 0.3);
	}

	.ex-item a:nth-child(1) {
		margin-left: auto;
		margin-right: 0px;
	}

	.ex-item a:nth-child(2) {
		margin-right: auto;
		margin-left: 0px;
	}

	.exp {
		display: flex;
		height: 20rem;
		flex-flow: column-reverse;
	}


	.exp:nth-child(2) {
		flex-flow: column;
	}

	.ex-anime {
		opacity: 0;
		transform: translateX(-70px);
	}


	/*modal------------------------------------------------------------*/
	body.fixed {
		position: fixed;
	}

	.modal {
		display: none;
		height: 100vh;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}


	.modal__bg {
		background: rgba(0, 0, 0, 0.8);
		height: 100vh;
		position: absolute;
		width: 100%;
	}

	.modal__content,
	.modal__content2 {
		display: block;
		background: #fff;
		left: 50%;
		padding: 10px 20px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 85%;
		height: 85%
	}

	.modal__content img {
		width: 80px;
	}

	.modal__content2 {
		display: flex;
		overflow: hidden;
	}

	.modal__content2 img {
		margin: auto 0;
		width: 100%;
		height: auto;
		align-content: center;

	}


	.btnclose {
		display: block;
		width: 40px;
		/*枠の大きさ*/
		height: 40px;
		/*枠の大きさ*/
		position: absolute;
		top: 2px;
		right: 2px;
	}

	.btnclose:hover {
		cursor: pointer;
	}

	.btnclose::before,
	.btnclose::after {
		content: "";
		display: block;
		width: 100%;
		/*バツ線の長さ*/
		height: 8px;
		/*バツ線の太さ*/
		background: #fff;
		transform: rotate(45deg);
		transform-origin: 0% 50%;
		position: absolute;
		top: calc(14% - 5px);
		left: 14%;
		border-radius: 4px;
	}

	.btnclose::after {
		transform: rotate(-45deg);
		transform-origin: 100% 50%;
		left: auto;
		right: 14%;
	}

	/*footer*/
	footer {
		color: #fff;
		text-align: end;
	}

	@keyframes ex-fdin {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
			transform: translate(0);
		}
	}

	/*contact*/

	.contact {
		width: 100%;
		height: 20vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 3px 9px 4px rgba(255, 255, 255, 0.7) inset, 0px -2px 9px 4px rgba(0, 0, 0, 0.7) inset;
		background-image: url(images/contact.png);
		background-repeat: no-repeat;
		background-size: cover;
	}


	.contact h1 {
		font-size: 2.5rem;
		padding-top: 1rem;
		text-shadow:
			3px 3px 12px rgba(255, 255, 255, 0.91),
			-3px 3px 12px rgba(255, 255, 255, 0.91),
			3px -3px 12px rgba(255, 255, 255, 0.91),
			-3px -3px 12px rgba(255, 255, 255, 0.91),
			3px 0px 12px rgba(255, 255, 255, 0.91),
			0px 3px 12px rgba(255, 255, 255, 0.91),
			-3px 0px 12px rgba(255, 255, 255, 0.91),
			0px -3px 12px rgba(255, 255, 255, 0.91);
	}

	.contact img {
		width: 80%;
		height: 40%;
	}


	.con-item {
		height: 80vh;
		width: 80%;
		display: flex;
		padding: 5vh 5%;
		margin: 0 auto;
		justify-content: center;
	
	}

	.mw_wp_form p {
		margin-top: 2px;
		color: white;
	}

	.mw_wp_form dl {
		display: flex;
		flex-wrap: wrap;
		margin: 30px 0px 0px;
		border: 1px solid #3388dd;
		border-top: none;
	}

	.mw_wp_form dl > dt,
	.mw_wp_form dl > dd {
		width: 100%;
		padding: 1em;
		border-top: 1px solid #3388dd;
		text-align: center;
	}


	.mw_wp_form input[type="text"],
	.mw_wp_form input[type="email"],
	.mw_wp_form input[type="tel"],
	.mw_wp_form textarea {
		padding: 1em;
		width: 100%;
		font-size: 15px;
		border: 1px solid #ccc;
	}

	.mw_wp_form input[type="submit"],
	.mw_wp_form input[type="submit"]:hover {
		display: table;
		margin: 30px auto;
		background-color: #3388dd;
	}

	.mw_wp_form .form_step {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0px;
		list-style: none;
	}

	.mw_wp_form .form_step > li {
		display: block;
		position: relative;
		padding: 0.5em;
		width: 22%;
		border: 1px solid currentColor;
		color: #3388dd;
		font-size: 1.5vw;
		font-weight: bold;
		text-align: center;
	}

	.mw_wp_form .form_step > li:nth-of-type(n + 2) {
		margin: 0px 0px 0px 4%;
	}

	.mw_wp_form .form_step > li:nth-of-type(n + 2)::before {
		position: absolute;
		top: 50%;
		left: -1.5em;
		width: 0.5em;
		height: 0.5em;
		border-top: 2px solid #3388dd;
		border-left: 2px solid #3388dd;
		transform: translateY(-50%) rotate(135deg);
		content: "";
	}

	.mw_wp_form_input .form_step > li:nth-of-type(1),
	.mw_wp_form_preview .form_step > li:nth-of-type(2),
	.mw_wp_form_complete .form_step > li:nth-of-type(4) {
		background-color: #3388dd;
		color: #fff;
	}


	/*(min-width:768px)and(max-width:1024px)----------*/
	@media (min-width:768px)and(max-width:1024px) {
		.ex-item p {
			padding: 1rem;
			padding-top: 0;
		}

		.mw_wp_form dl > dt,
		.mw_wp_form dl > dd {
			text-align: left;
		}

		.mw_wp_form dl > dt {
			display: flex;
			align-items: center;
			width: 20%;
		}

		.mw_wp_form dl > dd {
			width: 80%;
			border-left: 1px solid #3388dd;
		}
	}




	/*min-width:1024px------------------------------------*/

	@media(min-width:1024px) {

		.logo {
			width: 50%;
		}

		.line {
			width: 70%;
		}

		.pro-item {
			height: 80vh;
			width: 65vw;
			padding-top: 2rem;
			margin: 0 auto;
			background-color: #fff;
			opacity: 0.95;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			position: relative;
		}


		.pro-text h2 {
			margin-bottom: 2rem;
		}

		.pro-text p {
			margin-top: 1rem;
		}


		.ex-item {
			height: 120vh;
			width: 65vw;
			margin: 0 auto;
			padding-top: 60px;
			display: block;
		}

		.ex-item p {
			text-align: center;
			font-size: 1rem;
			padding: 2rem;
			margin: 30px 0;
			line-height: 1.6;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border-radius: 4px;
			height: 10rem;
			width: 37rem;
			background-image: url(images/noise.png);
			background-repeat: repeat;
			background-blend-mode: luminosity;
		}

		.ex-item img {
			width: 10rem;
			height: 10rem;
			border-radius: 4px;
			margin: 30px 0;
			background-color: #fff
		}

		.ex-item a:nth-child(1) {
			margin-left: auto;
			margin-right: 30px;
		}

		.ex-item a:nth-child(2) {
			margin-right: auto;
			margin-left: 30px;
		}

		.exp {
			display: flex;
			height: auto;
			flex-flow: row;
		}

		.exp:nth-child(2) {
			flex-flow: row;
		}
		
	.ex-anime:nth-child(2) {
		opacity: 0;
		transform: translateX(70px);
	}

		.profile img,
		.experience img,
		.contact img {
			width: 60%;
			height: 40%;
		}


		.btnclose {
			width: 50px;
			/*枠の大きさ*/
			height: 50px;
			/*枠の大きさ*/
			top: 2rem;
			right: 2rem;
		}

		.modal__content {
			padding: 5rem
		}

		.modal__content img {
			width: 100px;
			margin-bottom: 5px;
		}

		.mw_wp_form .form_step > li {
			font-size: 18px;
		}
	}

	.mw_wp_form_complete div {
		margin: 30px 0px 0px;
		text-align: center;
	}