@media screen and (min-width: 0px) {
	
	
	body{font-size: calc(0.8rem + ((1vw - 2.8px) * 0.8421));line-height:1.5;letter-spacing:0;}  /* 12.8px - 13.6px */
	#loading-wrapper .num{font-size: 100px;}
	.univ .planet5{
		width:200px;
		height:200px;
	top:calc((100% - 200px) /2);
	left:calc((100% - 200px) /2);
	}
	.univ .planet2{
		width:90px;
		height:90px;
	top:calc((100% - 90px) /2);
	left:calc((100% - 90px) /2);
	}
	main section article{width:95vw;padding:0;margin:0 0 60px 0;}
	header{padding:34px 0 0 0;margin: 0 0 60px 0;}
	
	#mob-slide{width:100vw;}
	#mob-slide-btn{top:0px;left:0px;width:34px;height:34px;padding:10px;}
	#mob-slide-btn .hamburger {width:14px;height:14px;}
	#mob-slide-btn .hamburger .line-hamburger:nth-of-type(1) {
		top: 2px;
	}
	#mob-slide-btn .hamburger .line-hamburger:nth-of-type(2) {
		bottom: calc((100% - 2px)/2);
	}
	#mob-slide-btn .hamburger .line-hamburger:nth-of-type(3) {
		bottom: 2px;
	}
	#mob-slide-close-btn{width:40px;height:40px;padding:10px;}
	
	header .header-container{display:none;}
	header .header-mob-container{display:grid;}
	header .header-title .header-title-container span{font-size:30px;line-height:0.9}
	header .header-title .header-title-container .header-title-ico{
		display:none;
	}
	
	/* headline */
	main section#principal article h1,
	main section article h1,
	main section article h1 span,
	main section#strategy article .seo-container h1 span,
	main section#strategy article h1{font-size: calc(3.25rem + ((1vw - 3.2px) * 14.5455));} /*54px to 60px */
	
	main section article h1{margin: 0 0 60px 0;padding:0;}
	
	main section article .about-grid-mob-container div:nth-of-type(1) h1{padding:0px;margin:0;}
	main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span{margin:-0.1em 0 0 -0.1em;}
	main section#principal article .textbox1 .textbox-container span.title,
	main section#principal article .textbox2 .textbox-container span.title,
	main section#principal article .textbox3 .textbox-container span.title{font-size: calc(1.75rem + ((1vw - 3.2px) * 3.6364));} /* 28 px to 30 px */
	main section#strategy article .seo-container .container .minibox .work-title em{font-size: calc(1.75rem + ((1vw - 3.2px) * 3.6364));padding:0 0 0 14px;width:100%;flex:0 0 100%;}/* 28 px to 30 px */
	
	/* text contents */
	main section#experiences article .pf-detail-box h2{font-size: calc(1.875rem + ((1vw - 2.8px) * 4.2105));}/* 30px - 34px */
	main section#experiences article .pf-detail-box .pf-textbox .num{font-size: calc(1.875rem + ((1vw - 2.8px) * 4.2105));}/* 30px - 34px */
	main section#experiences article .pf-detail-box .pf-textbox .num em::before{top:-10px;height:10px;}
	header .header-mob-container .header-title .header-title-container span{font-size: calc(1.875rem + ((1vw - 2.8px) * 4.2105));} /* 30px - 34px */
	header .header-mob-container > div:nth-of-type(6) span{border:10px solid #1a1a1a}
	header .header-mob-container > div:nth-of-type(8) > span{font-size: calc(1.875rem + ((1vw - 2.8px) * 4.2105));} /* 30px - 34px */
	header .header-mob-container > div:nth-of-type(9) > span{padding:25px;} 
	header .header-mob-container > div:nth-of-type(9) > span p{ font-size: calc(1rem + ((1vw - 2.8px) * 3.3684));} /* 16px - 19.2px */
	header .header-mob-container .warp{height:74%;}

	main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span{font-size: calc(6.25rem + ((1vw - 2.8px) * 21.0526));}/* 100px - 120px */
	main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span em:nth-of-type(1){left:-50px;}
	main section#about article .about-grid-mob-container > div:nth-of-type(11) span{font-size: calc(0.8rem + ((1vw - 2.8px) * 0.8421));padding:7%;}/* 12.8px - 13.6px */
	main section#about article .about-grid-mob-container > div:nth-of-type(3){padding:3%;}
	main section#about article .about-grid-mob-container > div:nth-of-type(3) span{font-size: calc(0.625rem + ((1vw - 2.8px) * 2.1053));}/* 10px - 12px */
	main section#about article .about-grid-mob-container > div:nth-of-type(3) em{font-size: calc(0.875rem + ((1vw - 2.8px) * 2.1053));margin:0 0 15px 0;}/* 14px - 16px */
	

/*--- EXPERIENCES PORTFOLIO -----*/

	main section#experiences article{margin:0 0 60px 0}
	main section#experiences article .pf-detail-box{
		margin:0 0 60px 0;
	}
	main section#experiences article .pf-detail-box h2{
		position:relative;
		flex:0 0 100%;
		top:0;
		width:100%;
		margin: 60px 0 60px 0;
		padding:0 0 0 10%;
		order:2;
	}
	main section#experiences article .pf-detail-box h2 .mini-title{
		font-size:20%;
		display:none;
	}
	main section#experiences article .pf-detail-box:last-of-type{
		margin:0 0 0px 0;
	}
	main section#experiences article .pf-detail-box .pf-textbox{
		flex: 0 0 100%;
		order:3;
		display:flex;
		justify-content: flex-end;
		margin:0;
		padding:0 0 0 10%;
	}
	main section#experiences article .pf-detail-box .pf-textbox .num{
		flex:0.3;
	}
	main section#experiences article .pf-detail-box .pf-textbox .text{
		text-align:left;
	}
	main section#experiences article .pf-detail-box .pf-textbox .detailbtn span{
		width:22vw;
		height:3.5vh;
	}
	main section#experiences article .pf-detail-box .pf-textbox .detailbtn::before{
		width: calc(100% - 28vw);
	}
	main section#experiences article .pf-detail-box .pf-textbox .detailbtn::after{
		right:28.5vw;
		width:18px;
		height:18px;
		top:calc((100% - 18px)/2);
	}
	main section#experiences article .pf-detail-box .pf-textbox .detailbtn:hover::before{
		width:calc((100% - 28vw) + 2vw);
	}
	main section#experiences article .pf-detail-box .pf-textbox .detailbtn:hover::after{
		right:calc(28vw - 2vw);
	}
	main section#experiences article .pf-detail-box .pf-imgbox{
		flex: 0 0 90%;
		order:1;
		height:auto;
		margin:0 10% 0 0;
	}
	main section#experiences article .pf-detail-box .pf-imgbox span{
		max-width:100%;
		max-height:auto;
		width:100%;
		height:auto;
	}
	main section#experiences article .pf-detail-box .pf-imgbox span img{
		max-width:100%;
		max-height:auto;
		width:100%;
		height:auto;
	}
	

	
	
/*---STRATEGY -----*/
	main section#strategy article{margin:0 0 60px 0;text-align:left;}
	main section#strategy article .seo-container .ico-c,
	main section#strategy article .seo-container .ico-m,
	main section#strategy article .seo-container .ico-y{display:none;}

	
	main section#strategy article .seo-container .container .minibox .work-title{
		align-content: center;
		align-items: center;
		border-left:#1a1a1a solid 20px;
		padding:30px 0 30px 0;
	}
	main section#strategy article .seo-container .container .minibox .work-title em{
		padding: 0 0 0 15px;
	}
	main section#strategy article .seo-container .container .minibox .textbox{
		border-left:#1a1a1a solid 20px;
		padding:30px 0 30px 0;
	}
	main section#strategy article .seo-container .container .minibox .textbox .textbox-container{
		flex: 0 0 100%;
		width:100%;
		padding: 0 0 0 40px;
	}




	
	
/*--- PRINCIPAL  -----*/
	main section#principal article h1{text-align:center;}
	main section#principal article{margin:0 0 60px 0}
	main section#principal article .textbox1,
	main section#principal article .textbox2,
	main section#principal article .textbox3{
		width:100%;
		height:auto;
		margin:0 auto 60px auto;
		flex:0 0 100%;
		aspect-ratio: 1/1;
	}
	main section#principal article .textbox1::before,
	main section#principal article .textbox2::before,
	main section#principal article .textbox3::before{
		content:'';
		position:absolute;
		background:transparent;
		border:1px solid #1a1a1a;
		border-radius:50%;
		width:400px;
		height:400px;
		top:calc((100% - 400px)/2);
		left:calc((100% - 400px)/2);
		box-sizing: border-box;
	}
	main section#principal article .textbox1 .textbox-container,
	main section#principal article .textbox2 .textbox-container,
	main section#principal article .textbox3 .textbox-container{
		width:100%;
		aspect-ratio: 1/1;
		top:0%;
		left:0%;
		position:absolute;
		display:flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-wrap:wrap;
		padding:10px;
	}

	main section#principal article .textbox1 .textbox-container span.title,
	main section#principal article .textbox2 .textbox-container span.title,
	main section#principal article .textbox3 .textbox-container span.title{
		width:auto;
		padding:0 0 10px 0;
		margin:0 0 20px 0;
	}

	main section#principal article .textbox1 .textbox-container span.title i,
	main section#principal article .textbox2 .textbox-container span.title i,
	main section#principal article .textbox3 .textbox-container span.title i{
		width:6vw;
		height:auto;
		aspect-ratio:1/1;
		border-width:2vw;
		margin:3px 5px 0 0;
		box-sizing: border-box;
	}
	main section#principal article .textbox1 .textbox-container span.title i{	
		border-top:solid #b10b7c;
		border-right:solid #212cdc;
		background:#fbec22;
		border-width:2vw;
	}
	main section#principal article .textbox2 .textbox-container span.title i{	
		border-left:solid #b10b7c;
		border-bottom:solid #fbec22;
		border-right:solid #b10b7c;
		background:#212cdc;	
		border-width:2vw;
	}
	main section#principal article .textbox3 .textbox-container span.title i{	
		border-left:solid #b10b7c;
		border-right:solid #fbec22;
		background:#212cdc;
		border-width:2vw;
	}

	main section#principal article .textbox1 .satelite,
	main section#principal article .textbox2 .satelite,
	main section#principal article .textbox3 .satelite{
		position: absolute;
		top:calc((100% - 400px)/2);
		left:calc((100% - 30px)/2);
		display: inline-block;
		width: 30px;
		height: 200px; /* 半径 */
		transform-origin: center bottom; /* 回転の基準点 */
		animation:satelite 60s infinite linear;
		transform: rotate(0deg);
	}
	main section#principal article .textbox1 .satelite{
		animation:satelite 10s infinite linear;	
		transform: rotate(0deg);
	}
	main section#principal article .textbox2 .satelite{
		animation:satelite2 15s infinite linear;	
		transform: rotate(45deg);
	}
	main section#principal article .textbox3 .satelite{
		animation:satelite 20s infinite linear;	
		transform: rotate(90deg);
	}
	main section#principal article .textbox1 .satelite::before,
	main section#principal article .textbox2 .satelite::before,
	main section#principal article .textbox3 .satelite::before{
		content:'';
		width:22px;
		height:22px;
		background:#1a1a1a;
		display:block;
		position:absolute;
		border-radius:50%;
		top:-11px;
		left:calc((100% - 22px)/2);
	}

	main section#principal article .textbox2 .satelite::before{
		width:40px;
		height:40px;
		top:-25px;
		left:calc((100% - 40px)/2);	
	}
	main section#principal article .textbox3 .satelite::before{
		width:32px;
		height:32px;
		top:-16px;
		left:calc((100% - 32px)/2);
	}
/*--- ABOUT ME  -----*/
	main section#about article .about-grid-container{display:none;}
	main section#about article .about-grid-mob-container{display:grid;}
	main section#about article .about-grid-container{margin:0 0 100px 0;}
	main section#about article .about-grid-mob-container{margin:0 0 100px 0;}
	main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span em:nth-of-type(1){left:-30px;}
	
/*--- FOOTER  -----*/
		footer .footer-container{justify-content: flex-end;padding:30px 0;}
		footer .footer-btn-container{flex:0 0 100%;height:100%;bottom:auto;margin:0 0 30px 0;padding:0;justify-content: center;position:relative;}
		footer .footer-btn-container a{
			flex:1;padding:8px;margin:0 10px 0 0;height:100%;background:#1a1a1a;color:#ececec;
			font-size: calc(0.8rem + ((1vw - 2.8px) * 0.8421)); /* 12.8px -  13.6px */
		}
		footer .footer-btn-container a:nth-of-type(3){margin:0;}
		footer .footer-container p.copywrite{font-size: calc(0.8rem + ((1vw - 2.8px) * 0.8421));flex:0 0 100%;margin:0 0 30px 0;} /* 12.8px -  13.6px */
		footer .footer-container p.copywrite em{font-size:100%;}
		footer .footer-container .btn{width:70px;height:100px;}
		footer .footer-container .btn .btn-container{height:70px;}
		footer .footer-container .btn p{height:30px;font-size: calc(0.8rem + ((1vw - 2.8px) * 0.8421));} /* 12.8px -  13.6px */
	
/*--- MODAL WINDOW  -----*/
	.modal{	
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	border:0px solid #26241d;
	box-sizing: border-box;
	padding:0;
	}
	.modal-content {
	padding: 0px;
	margin:0;
	width: 100%; 
	}
	
	.modal-container .modal-garalley-large,
	.modal-container .modal-garalley{
	margin:0;
	padding:0;
	}
	.modal-container .modal-garalley .modal-garalley-box{
	flex: 0 0 100%;
	padding:0;
	margin:0;
	}
	.modal-container .modal-garalley .modal-garalley-box:nth-of-type(2n){
		top:0px;
	}
	.modal-container .modal-textbox{	margin:0 0 0 0;}
	.modal-container .modal-textbox p{max-width:100%;}
	.modal-container .modal-textbox .title{font-size:30px;}

	.modal-contact span.title,
	.modal-footer span.more,
	.modal-footer span.contact{font-size:25px}
	.modal-footer .modal-footer-contact a{font-size:15px;padding:20px;}
	.modal-footer .modal-footer-more a{font-size:15px; padding:20px;}
	.modal .close-detail1,
	.modal .close-detail5,
	.modal .close-detail2,
	.modal .close-detail3,
	.modal .close1,
	.modal .close5,
	.modal .close2,
	.modal .close3{
	width:32px;
	height:32px;
	top:10px;
	left:10px;
	border:1px solid #fff;
	box-shadow:0px 0px 0px #26241d;
	}
	.modal .close-detail1:hover,
	.modal .close-detail5:hover,
	.modal .close-detail2:hover,
	.modal .close-detail3:hover,
	.modal .close1:hover,
	.modal .close4:hover,
	.modal .close5:hover,
	.modal .close3:hover,
	.modal .close2:hover,
	.modal .close:hover{
		background:#fff;
		mix-blend-mode:normal;
		left:10px;
		top:10px;
	}
	.modal .close-detail1 span.line,
	.modal .close-detail5 span.line,
	.modal .close-detail2 span.line,
	.modal .close-detail3 span.line,
	.modal .close1 span.line,
	.modal .close5 span.line,
	.modal .close3 span.line,
	.modal .close4 span.line,
	.modal .close2 span.line,
	.modal .close span.line{
		height:2px;
		background:#fff;
	}
	aside.pf-menu{
		display:none;
	}
	.modal-footer,
	.modal-content{
		padding:0 !important;
	}
	.modal-footer{
		padding:0px !important;
	}
	.modal-contact{
		padding:50px 20px 150px 20px;
	}
	.modal-contact .modal-contact-container form{
		width:95%;
		left:-3px;
	}
	.modal-contact .modal-contact-container form textarea,
	.modal-contact .modal-contact-container form input{
		font-size:16px;
	}
	.modal-contact .modal-contact-container form .mailform-submit label{
		width:160px;
		height:50px;
		font-size:120%;
	}
/*--- NAV  -----*/
	
	nav#menu-bar{
	margin:10px;
	width:40px;
	height:30px;}
	nav#menu-bar .mob-menu-btn{
	width:40px;
	height:30px;
	}
	nav#menu-bar .mob-menu-btn .line-hamburger:nth-of-type(1) {
	top: 0px;
	}
	nav#menu-bar .mob-menu-btn .line-hamburger:nth-of-type(2) {
	top: 13px;
	}
	nav#menu-bar .mob-menu-btn .line-hamburger:nth-of-type(3) {
	bottom:0;
	}
	.mob-menu-close-btn-container label.mob-menu-close-btn{
	width:40px;
	height:40px;
	top: 10px;
	right: 10px;
	}
	.mob-menu-close-btn-container label.mob-menu-close-btn:hover{
	top: 12px;
	right: 8px;
	}
	.mob-nav-container {
	width: 100%;
	transform: translateX(100vw);
	overflow-x: hidden;
	}
	
	.mob-nav-container h1.anime2,
	.mob-nav-container h1.anime1{
		display:none
	}
	.mob-nav-container ul li a{font-size:100%}
	
	.mob-slide-container ul.category li{font-size: 32px;}
	.mob-slide-container ul.category li:nth-of-type(5) i,
	.mob-slide-container ul.category li:nth-of-type(6) i,
	.mob-slide-container ul.category li:nth-of-type(7) i{
		width:20px;
		height:20px;
		border:2px solid #1a1a1a;
		border-width:2px 2px 0 0;
	}
	.mob-slide-container ul.category li:nth-of-type(5) i::before,
	.mob-slide-container ul.category li:nth-of-type(6) i::before,
	.mob-slide-container ul.category li:nth-of-type(7) i::before{
		height:2px;
		top:calc(((100% - 2px)/2));
	}
}