@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/**
 * 共通
 */
html,
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	color: #1a1a1a;
	/* 100 200 300 400 500 600 700 800 900 */
	font-weight: 500;
	line-height: 2;
	background-color: #fff;
	position: relative;
	scroll-behavior: smooth;
	word-break: break-all;
}
.poppins{
	font-family: "Poppins", sans-serif;
	/* 100 200 300 400 500 600 700 800 900 */
	font-weight: 500;
	font-style: normal;
}
.inner{
	width: 90vw;
	margin: 0 auto;
}
.nonei{
	display: none!important;
}
.flex{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.fwn{
	flex-wrap: nowrap;
}
.jcsb{
	justify-content: space-between;
}
.jcc{
	justify-content: center;
}
.jce{
	justify-content: end;
}
.aifs{
	align-items: flex-start;
}
.aife{
	align-items: flex-end;
}
.ais{
	align-items: stretch;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.peni{
	pointer-events: none!important;
}
.vertical{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.pr{
	position: relative;
}
.pc_item{
	
}
.sp_item{
	display: none;
}
@media screen and (min-width: 1920px){
	.inner{
		width: 1728px;
	}
}
@media screen and (max-width: 768px){
	.pc_item{
		display: none;
	}
	.sp_item{
		display: block;
	}
}
.text_ellipsis{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}





/**
 * header
 */
header.site_header{
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	height: 100%;
	z-index: 100;
	transition: .8s;
}
header.site_header.act{
	height: 100px;
}
header.site_header h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 152px;
	height: calc(152px * (46/152));
	transition: .8s;
}
header.site_header.act h1{
	left: 5vw;
	transform: translate(0, -50%) scale(1);
}
header.site_header h1 p{
	transform: scale(var(--scale, 3));
	width: 100%;
	height: 100%;
	/*transition: .8s;*/
	transition: 0s;/* 250707 */
}
header.site_header h1 p img{
	display: block;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 1920px){
	header.site_header.act h1{
		left: calc(((100vw - 1920px) / 2) + 96px);
	}
}
@media screen and (max-width: 768px){
	header.site_header{
		transition: .8s;
	}
	header.site_header.act{
		height: 20.51vw;
	}
	header.site_header h1{
		width: 20.51vw;
		height: calc(20.51vw * (46/152));
		transition: .8s;
	}
	header.site_header h1 p{
		transition: 0s;
	}
}





/**
 * mv
 */
section.mv{

}
section.mv .sticky_contents{
	height: 300vh;
}
section.mv .sticky_contents .sticky_content{
	position: sticky;
	top: 0;
	height: calc(100vh + 40px);
	overflow: hidden;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists,
section.mv .sticky_contents .sticky_content ul.circle_lists{
	position: absolute;
	top: calc(50% - (40px / 2));
	left: 50%;
	width: 3000px;
	height: 3000px;
	/*transition: 3s;*/
	transition: 0s;/* 250707 */
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists{
	transform: translate(-50%, -50%) scale(0) rotate(900deg);
}
section.mv .sticky_contents .sticky_content ul.circle_lists{
	transform: translate(-50%, -50%) scale(0) rotate(720deg);
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists.act{
	transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(var(--rotate, 180deg));
}
section.mv .sticky_contents .sticky_content ul.circle_lists.act{
	transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li,
section.mv .sticky_contents .sticky_content ul.circle_lists li{
	position: absolute;
	left: 50%;
	border-radius: 100%;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li:before{
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	width: 25%;
	height: 25%;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li:before{
	transform: translate(-50%, -100%);
	animation: 9s linear infinite roll01;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
section.mv .sticky_contents .sticky_content ul.circle_lists li:before{
	transform: translate(-50%, -50%);
	background-color: #1a1a1a;
	border-radius: 100%;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale01:before{
	display: none;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale02:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_a_5bcae7.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale03:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_r_216cb6.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale04:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_a_ff91b8.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale05:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_h_f2cd54.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale06:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_o_5bcae7.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale07:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_n_216cb6.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale08:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_a_5bcae7_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale09:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_r_216cb6_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale10:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_a_ff91b8_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale11:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_h_f2cd54_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale12:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_o_5bcae7_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale13:before{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/txt_n_216cb6_ol.svg');
}
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale01:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale05:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale09:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale13:before{
	background-color: #ff91b8;
}
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale02:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale06:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale10:before{
	background-color: #5bcae7;
}
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale03:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale07:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale11:before{
	background-color: #216cb6;
}
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale04:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale08:before,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale12:before{
	background-color: #f2cd54;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale01,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale01{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)))));
	width: calc((3000px * 100/3000) * pow(1.15, 9));
	height: calc((3000px * 100/3000) * pow(1.15, 9));
	transform: translate(-50%, -50%) rotate(0deg);
	animation: 48s linear infinite rotate01;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale02,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale02{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)))));
	width: calc((3000px * 100/3000) * pow(1.15, 10));
	height: calc((3000px * 100/3000) * pow(1.15, 10));
	transform: translate(-50%, -50%) rotate(150deg);
	animation: 45s linear infinite rotate02;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale03,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale03{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)))));
	width: calc((3000px * 100/3000) * pow(1.15, 11));
	height: calc((3000px * 100/3000) * pow(1.15, 11));
	transform: translate(-50%, -50%) rotate(300deg);
	animation: 42s linear infinite rotate03;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale04,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale04{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)))));
	width: calc((3000px * 100/3000) * pow(1.15, 12));
	height: calc((3000px * 100/3000) * pow(1.15, 12));
	transform: translate(-50%, -50%) rotate(450deg);
	animation: 39s linear infinite rotate04;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale05,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale05{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)))));
	width: calc((3000px * 100/3000) * pow(1.15, 13));
	height: calc((3000px * 100/3000) * pow(1.15, 13));
	transform: translate(-50%, -50%) rotate(600deg);
	animation: 36s linear infinite rotate05;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale06,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale06{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)))));
	width: calc((3000px * 100/3000) * pow(1.15, 14));
	height: calc((3000px * 100/3000) * pow(1.15, 14));
	transform: translate(-50%, -50%) rotate(750deg);
	animation: 33s linear infinite rotate06;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale07,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale07{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)))));
	width: calc((3000px * 100/3000) * pow(1.15, 15));
	height: calc((3000px * 100/3000) * pow(1.15, 15));
	transform: translate(-50%, -50%) rotate(900deg);
	animation: 30s linear infinite rotate07;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale08,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale08{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)))));
	width: calc((3000px * 100/3000) * pow(1.15, 16));
	height: calc((3000px * 100/3000) * pow(1.15, 16));
	transform: translate(-50%, -50%) rotate(1050deg);
	animation: 27s linear infinite rotate08;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale09,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale09{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)) + ((3000px * 100/3000) * pow(1.15, 16)))));
	width: calc((3000px * 100/3000) * pow(1.15, 17));
	height: calc((3000px * 100/3000) * pow(1.15, 17));
	transform: translate(-50%, -50%) rotate(1200deg);
	animation: 24s linear infinite rotate09;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale10,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale10{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)) + ((3000px * 100/3000) * pow(1.15, 16)) + ((3000px * 100/3000) * pow(1.15, 17)))));
	width: calc((3000px * 100/3000) * pow(1.15, 18));
	height: calc((3000px * 100/3000) * pow(1.15, 18));
	transform: translate(-50%, -50%) rotate(1350deg);
	animation: 21s linear infinite rotate10;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale11,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale11{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)) + ((3000px * 100/3000) * pow(1.15, 16)) + ((3000px * 100/3000) * pow(1.15, 17)) + ((3000px * 100/3000) * pow(1.15, 18)))));
	width: calc((3000px * 100/3000) * pow(1.15, 19));
	height: calc((3000px * 100/3000) * pow(1.15, 19));
	transform: translate(-50%, -50%) rotate(1500deg);
	animation: 18s linear infinite rotate11;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale12,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale12{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)) + ((3000px * 100/3000) * pow(1.15, 16)) + ((3000px * 100/3000) * pow(1.15, 17)) + ((3000px * 100/3000) * pow(1.15, 18)) + ((3000px * 100/3000) * pow(1.15, 19)))));
	width: calc((3000px * 100/3000) * pow(1.15, 20));
	height: calc((3000px * 100/3000) * pow(1.15, 20));
	transform: translate(-50%, -50%) rotate(1650deg);
	animation: 15s linear infinite rotate12;
}
section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale13,
section.mv .sticky_contents .sticky_content ul.circle_lists li.scale13{
	top: calc(50% - (0.04 * (((3000px * 100/3000) * pow(1.15, 0)) + ((3000px * 100/3000) * pow(1.15, 1)) + ((3000px * 100/3000) * pow(1.15, 2)) + ((3000px * 100/3000) * pow(1.15, 3)) + ((3000px * 100/3000) * pow(1.15, 4)) + ((3000px * 100/3000) * pow(1.15, 5)) + ((3000px * 100/3000) * pow(1.15, 6)) + ((3000px * 100/3000) * pow(1.15, 7)) + ((3000px * 100/3000) * pow(1.15, 8)) + ((3000px * 100/3000) * pow(1.15, 9)) + ((3000px * 100/3000) * pow(1.15, 10)) + ((3000px * 100/3000) * pow(1.15, 11)) + ((3000px * 100/3000) * pow(1.15, 12)) + ((3000px * 100/3000) * pow(1.15, 13)) + ((3000px * 100/3000) * pow(1.15, 14)) + ((3000px * 100/3000) * pow(1.15, 15)) + ((3000px * 100/3000) * pow(1.15, 16)) + ((3000px * 100/3000) * pow(1.15, 17)) + ((3000px * 100/3000) * pow(1.15, 18)) + ((3000px * 100/3000) * pow(1.15, 19)) + ((3000px * 100/3000) * pow(1.15, 20)))));
	width: calc((3000px * 100/3000) * pow(1.15, 21));
	height: calc((3000px * 100/3000) * pow(1.15, 21));
	transform: translate(-50%, -50%) rotate(1800deg);
	animation: 12s linear infinite rotate13;
}
@keyframes roll01{
	0%{
		transform: translate(-50%, -100%) rotate(0deg);
	}
	100%{
		transform: translate(-50%, -100%) rotate(360deg);
	}
}
@keyframes rotate01{
	0%{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(0deg + 360deg));
	}
}
@keyframes rotate02{
	0%{
		transform: translate(-50%, -50%) rotate(150deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(150deg - 360deg));
	}
}
@keyframes rotate03{
	0%{
		transform: translate(-50%, -50%) rotate(300deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(300deg - 360deg));
	}
}
@keyframes rotate04{
	0%{
		transform: translate(-50%, -50%) rotate(450deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(450deg + 360deg));
	}
}
@keyframes rotate05{
	0%{
		transform: translate(-50%, -50%) rotate(600deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(600deg - 360deg));
	}
}
@keyframes rotate06{
	0%{
		transform: translate(-50%, -50%) rotate(750deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(750deg + 360deg));
	}
}
@keyframes rotate07{
	0%{
		transform: translate(-50%, -50%) rotate(900deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(900deg - 360deg));
	}
}
@keyframes rotate08{
	0%{
		transform: translate(-50%, -50%) rotate(1050deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1050deg + 360deg));
	}
}
@keyframes rotate09{
	0%{
		transform: translate(-50%, -50%) rotate(1200deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1200deg - 360deg));
	}
}
@keyframes rotate10{
	0%{
		transform: translate(-50%, -50%) rotate(1350deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1350deg + 360deg));
	}
}
@keyframes rotate11{
	0%{
		transform: translate(-50%, -50%) rotate(1500deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1500deg - 360deg));
	}
}
@keyframes rotate12{
	0%{
		transform: translate(-50%, -50%) rotate(1650deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1650deg + 360deg));
	}
}
@keyframes rotate13{
	0%{
		transform: translate(-50%, -50%) rotate(1800deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(calc(1800deg - 360deg));
	}
}
section.mv .sticky_contents .sticky_content .mv_image{
	position: absolute;
	top: calc(50% - (40px / 2));
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3000px;
	height: 3000px;
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/mv.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
@media screen and (max-width: 768px){
	section.mv{

	}
	section.mv .sticky_contents{
		height: 300vh;
	}
	section.mv .sticky_contents .sticky_content{
		/*height: calc(100vh + 40px);*/
		height: 100vh;
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists,
	section.mv .sticky_contents .sticky_content ul.circle_lists{
		/*top: calc(50% - (40px / 2));*/
		top: 50%;
		width: 400vw;
		height: 400vw;
		/*transition: 3s;*/
		transition: 0s;
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li:before{
		animation: 9s linear infinite roll01;
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale01,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale01{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)))));
		width: calc((400vw * 100/3000) * pow(1.15, 9));
		height: calc((400vw * 100/3000) * pow(1.15, 9));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale02,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale02{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)))));
		width: calc((400vw * 100/3000) * pow(1.15, 10));
		height: calc((400vw * 100/3000) * pow(1.15, 10));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale03,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale03{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)))));
		width: calc((400vw * 100/3000) * pow(1.15, 11));
		height: calc((400vw * 100/3000) * pow(1.15, 11));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale04,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale04{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)))));
		width: calc((400vw * 100/3000) * pow(1.15, 12));
		height: calc((400vw * 100/3000) * pow(1.15, 12));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale05,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale05{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)))));
		width: calc((400vw * 100/3000) * pow(1.15, 13));
		height: calc((400vw * 100/3000) * pow(1.15, 13));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale06,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale06{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)))));
		width: calc((400vw * 100/3000) * pow(1.15, 14));
		height: calc((400vw * 100/3000) * pow(1.15, 14));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale07,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale07{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)))));
		width: calc((400vw * 100/3000) * pow(1.15, 15));
		height: calc((400vw * 100/3000) * pow(1.15, 15));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale08,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale08{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)))));
		width: calc((400vw * 100/3000) * pow(1.15, 16));
		height: calc((400vw * 100/3000) * pow(1.15, 16));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale09,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale09{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)) + ((400vw * 100/3000) * pow(1.15, 16)))));
		width: calc((400vw * 100/3000) * pow(1.15, 17));
		height: calc((400vw * 100/3000) * pow(1.15, 17));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale10,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale10{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)) + ((400vw * 100/3000) * pow(1.15, 16)) + ((400vw * 100/3000) * pow(1.15, 17)))));
		width: calc((400vw * 100/3000) * pow(1.15, 18));
		height: calc((400vw * 100/3000) * pow(1.15, 18));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale11,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale11{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)) + ((400vw * 100/3000) * pow(1.15, 16)) + ((400vw * 100/3000) * pow(1.15, 17)) + ((400vw * 100/3000) * pow(1.15, 18)))));
		width: calc((400vw * 100/3000) * pow(1.15, 19));
		height: calc((400vw * 100/3000) * pow(1.15, 19));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale12,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale12{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)) + ((400vw * 100/3000) * pow(1.15, 16)) + ((400vw * 100/3000) * pow(1.15, 17)) + ((400vw * 100/3000) * pow(1.15, 18)) + ((400vw * 100/3000) * pow(1.15, 19)))));
		width: calc((400vw * 100/3000) * pow(1.15, 20));
		height: calc((400vw * 100/3000) * pow(1.15, 20));
	}
	section.mv .sticky_contents .sticky_content ul.circle_txt_lists li.scale13,
	section.mv .sticky_contents .sticky_content ul.circle_lists li.scale13{
		top: calc(50% - (0.04 * (((400vw * 100/3000) * pow(1.15, 0)) + ((400vw * 100/3000) * pow(1.15, 1)) + ((400vw * 100/3000) * pow(1.15, 2)) + ((400vw * 100/3000) * pow(1.15, 3)) + ((400vw * 100/3000) * pow(1.15, 4)) + ((400vw * 100/3000) * pow(1.15, 5)) + ((400vw * 100/3000) * pow(1.15, 6)) + ((400vw * 100/3000) * pow(1.15, 7)) + ((400vw * 100/3000) * pow(1.15, 8)) + ((400vw * 100/3000) * pow(1.15, 9)) + ((400vw * 100/3000) * pow(1.15, 10)) + ((400vw * 100/3000) * pow(1.15, 11)) + ((400vw * 100/3000) * pow(1.15, 12)) + ((400vw * 100/3000) * pow(1.15, 13)) + ((400vw * 100/3000) * pow(1.15, 14)) + ((400vw * 100/3000) * pow(1.15, 15)) + ((400vw * 100/3000) * pow(1.15, 16)) + ((400vw * 100/3000) * pow(1.15, 17)) + ((400vw * 100/3000) * pow(1.15, 18)) + ((400vw * 100/3000) * pow(1.15, 19)) + ((400vw * 100/3000) * pow(1.15, 20)))));
		width: calc((400vw * 100/3000) * pow(1.15, 21));
		height: calc((400vw * 100/3000) * pow(1.15, 21));
	}
	section.mv .sticky_contents .sticky_content .mv_image{
		/*top: calc(50% - (40px / 2));*/
		top: 50%;
		width: 400vw;
		height: 400vw;
	}
}





/**
 * about, skill
 */
section.about,
section.skill{
}
section.about .sticky_contents,
section.skill .sticky_contents{
	height: 400vh;
}
section.about .sticky_contents .sticky_content,
section.skill .sticky_contents .sticky_content{
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
section.about .sticky_contents .sticky_content{
	background-color: #86e1eb;
}
section.skill .sticky_contents .sticky_content{
	background-color: #f1c95c;
}
section.about .sticky_contents .sticky_content .bg_dot,
section.skill .sticky_contents .sticky_content .bg_dot{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-position: left top;
	background-repeat: repeat;
	background-size: 14px;
}
section.about .sticky_contents .sticky_content .bg_dot{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/dot_5bcae7.svg');
}
section.skill .sticky_contents .sticky_content .bg_dot{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/dot_f2cd54.svg');
}
section.about .sticky_contents .sticky_content .h2,
section.skill .sticky_contents .sticky_content .h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
section.about .sticky_contents .sticky_content .h2 h2,
section.about .sticky_contents .sticky_content .h2 .fake,
section.skill .sticky_contents .sticky_content .h2 h2,
section.skill .sticky_contents .sticky_content .h2 .fake{
	position: absolute;
	left: 50%;
	transition: .8s;
}
section.about .sticky_contents .sticky_content .h2 h2,
section.about .sticky_contents .sticky_content .h2 .fake{
	width: 1480px;
	height: calc(1480px * (366/1480));
}
section.skill .sticky_contents .sticky_content .h2 h2,
section.skill .sticky_contents .sticky_content .h2 .fake{
	/*width: 930px;
	height: calc(930px * (370/930));*/
	width: calc(1480px * (930/1480));
	height: calc((1480px * (930/1480)) * (370/930));
}
section.about .sticky_contents .sticky_content .h2 h2,
section.skill .sticky_contents .sticky_content .h2 h2{
	top: 0;
	transform: translate(-50%, -100%);
}
section.about .sticky_contents .sticky_content .h2 h2.act,
section.skill .sticky_contents .sticky_content .h2 h2.act{
	transform: translate(-50%, -50%);
}
section.about .sticky_contents .sticky_content .h2 .fake,
section.skill .sticky_contents .sticky_content .h2 .fake{
	bottom: 0;
	transform: translate(-50%, 100%);
}
section.about .sticky_contents .sticky_content .h2 .fake.act,
section.skill .sticky_contents .sticky_content .h2 .fake.act{
	bottom: 0;
	transform: translate(-50%, 50%);
}
section.about .sticky_contents .sticky_content .h2 h2 .outline,
section.about .sticky_contents .sticky_content .h2 .fake .outline,
section.skill .sticky_contents .sticky_content .h2 h2 .outline,
section.skill .sticky_contents .sticky_content .h2 .fake .outline{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
section.about .sticky_contents .sticky_content .h2 h2 .outline:before,
section.about .sticky_contents .sticky_content .h2 h2 .outline:after,
section.about .sticky_contents .sticky_content .h2 .fake .outline:before,
section.about .sticky_contents .sticky_content .h2 .fake .outline:after,
section.skill .sticky_contents .sticky_content .h2 h2 .outline:before,
section.skill .sticky_contents .sticky_content .h2 h2 .outline:after,
section.skill .sticky_contents .sticky_content .h2 .fake .outline:before,
section.skill .sticky_contents .sticky_content .h2 .fake .outline:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: .8s;
}
section.about .sticky_contents .sticky_content .h2 h2 .outline:before,
section.about .sticky_contents .sticky_content .h2 h2 .outline:after,
section.about .sticky_contents .sticky_content .h2 .fake .outline:before,
section.about .sticky_contents .sticky_content .h2 .fake .outline:after{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/h2_about_outline.svg');
}
section.skill .sticky_contents .sticky_content .h2 h2 .outline:before,
section.skill .sticky_contents .sticky_content .h2 h2 .outline:after,
section.skill .sticky_contents .sticky_content .h2 .fake .outline:before,
section.skill .sticky_contents .sticky_content .h2 .fake .outline:after{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/h2_skill_outline.svg');
}
section.about .sticky_contents .sticky_content .h2 h2.act .outline:before,
section.skill .sticky_contents .sticky_content .h2 h2.act .outline:before{
	top: calc(24px * 2);
	left: calc(calc(24px * -2) * 2);
}
section.about .sticky_contents .sticky_content .h2 h2.act .outline:after,
section.skill .sticky_contents .sticky_content .h2 h2.act .outline:after{
	top: calc(24px * 1);
	left: calc(calc(24px * -2) * 1);
}
section.about .sticky_contents .sticky_content .h2 .fake.act .outline:before,
section.skill .sticky_contents .sticky_content .h2 .fake.act .outline:before{
	top: calc(-24px * 2);
	left: calc(calc(24px * 2) * 2);
}
section.about .sticky_contents .sticky_content .h2 .fake.act .outline:after,
section.skill .sticky_contents .sticky_content .h2 .fake.act .outline:after{
	top: calc(-24px * 1);
	left: calc(calc(24px * 2) * 1);
}
section.about .sticky_contents .sticky_content .h2 h2 img,
section.about .sticky_contents .sticky_content .h2 .fake img,
section.skill .sticky_contents .sticky_content .h2 h2 img,
section.skill .sticky_contents .sticky_content .h2 .fake img{
	display: block;
	width: 100%;
	height: 100%;
}
section.about .sticky_contents .sticky_content .bg_txt,
section.skill .sticky_contents .sticky_content .bg_txt{
	position: absolute;
	bottom: var(--bottom, 0);
	left: 50%;
	transform: translate(-50%, 0);
	width: 1920px;
	height: calc(1920px * (1820/1920));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/*transition: .8s;*/
	transition: 0s;/* 250707 */
}
section.about .sticky_contents .sticky_content .bg_txt{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/bg_about.svg');
}
section.skill .sticky_contents .sticky_content .bg_txt{
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/bg_skill.svg');
}
section.about .sticky_contents .sticky_content .contents,
section.skill .sticky_contents .sticky_content .contents{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
@media screen and (min-width: 1920px){
	section.about .sticky_contents .sticky_content .bg_txt,
	section.skill .sticky_contents .sticky_content .bg_txt{
		width: 100vw;
		height: calc(100vw * (1820/1920));
	}
}
@media screen and (max-width: 768px){
	section.about,
	section.skill{
	}
	section.about .sticky_contents,
	section.skill .sticky_contents{
		height: 300vh;
	}
	section.about .sticky_contents .sticky_content .bg_dot,
	section.skill .sticky_contents .sticky_content .bg_dot{
		background-size: calc(3.59vw / 2);
	}
	section.about .sticky_contents .sticky_content .h2 h2,
	section.about .sticky_contents .sticky_content .h2 .fake,
	section.skill .sticky_contents .sticky_content .h2 h2,
	section.skill .sticky_contents .sticky_content .h2 .fake{
		transition: .8s;
	}
	section.about .sticky_contents .sticky_content .h2 h2,
	section.about .sticky_contents .sticky_content .h2 .fake{
		width: calc(379.49vw / 2);
		height: calc((379.49vw / 2) * (366/1480));
	}
	section.skill .sticky_contents .sticky_content .h2 h2,
	section.skill .sticky_contents .sticky_content .h2 .fake{
		/*width: 930px;
		height: calc(930px * (370/930));*/
		width: calc((379.49vw / 2) * (930/1480));
		height: calc(((379.49vw / 2) * (930/1480)) * (370/930));
	}
	section.about .sticky_contents .sticky_content .h2 h2 .outline:before,
	section.about .sticky_contents .sticky_content .h2 h2 .outline:after,
	section.about .sticky_contents .sticky_content .h2 .fake .outline:before,
	section.about .sticky_contents .sticky_content .h2 .fake .outline:after,
	section.skill .sticky_contents .sticky_content .h2 h2 .outline:before,
	section.skill .sticky_contents .sticky_content .h2 h2 .outline:after,
	section.skill .sticky_contents .sticky_content .h2 .fake .outline:before,
	section.skill .sticky_contents .sticky_content .h2 .fake .outline:after{
		transition: .8s;
	}
	section.about .sticky_contents .sticky_content .h2 h2.act .outline:before,
	section.skill .sticky_contents .sticky_content .h2 h2.act .outline:before{
		top: calc(3.08vw * 2);
		left: calc(calc(3.08vw * -2) * 2);
	}
	section.about .sticky_contents .sticky_content .h2 h2.act .outline:after,
	section.skill .sticky_contents .sticky_content .h2 h2.act .outline:after{
		top: calc(3.08vw * 1);
		left: calc(calc(3.08vw * -2) * 1);
	}
	section.about .sticky_contents .sticky_content .h2 .fake.act .outline:before,
	section.skill .sticky_contents .sticky_content .h2 .fake.act .outline:before{
		top: calc(-3.08vw * 2);
		left: calc(calc(3.08vw * 2) * 2);
	}
	section.about .sticky_contents .sticky_content .h2 .fake.act .outline:after,
	section.skill .sticky_contents .sticky_content .h2 .fake.act .outline:after{
		top: calc(-3.08vw * 1);
		left: calc(calc(3.08vw * 2) * 1);
	}
	section.about .sticky_contents .sticky_content .bg_txt,
	section.skill .sticky_contents .sticky_content .bg_txt{
		width: calc(200vh * (1920/1820));
		height: 200vh;
		transition: 0s;
	}
}





/**
 * about
 */
section.about .sticky_contents .sticky_content .contents .txts p{
	margin-bottom: 14px;
}
section.about .sticky_contents .sticky_content .contents .txts p:last-child{
	margin-bottom: 0;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt{
	width: 100%;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem{
	display: block;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:before,
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:after{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform-origin: left center;
	transition: .8s;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:before{
	transform: translate(calc(-50% + 4px), calc(-50% + 4px)) scale(0, 1);
	background-color: #216cb6;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:after{
	transform: translate(-50%, -50%) scale(0, 1);
	background-color: #60c3e6;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem.act:before{
	transform: translate(calc(-50% + 4px), calc(-50% + 4px)) scale(1, 1);
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem.act:after{
	transform: translate(-50%, -50%) scale(1, 1);
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem span{
	display: block;
	font-size: 14px;
	color: #fff;
	letter-spacing: calc(14px * 0.08);
	font-weight: 400;
	padding: 0 20px;
	z-index: 1;
	opacity: 0;
	transition: .8s;
}
section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem span.act{
	opacity: 1;
}
@media screen and (max-width: 768px){
	section.about .sticky_contents .sticky_content .contents .txts p{
		margin-bottom: 3.08vw;
	}
	section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:before,
	section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:after{
		transition: .8s;
	}
	section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem:before{
		transform: translate(calc(-50% + 1.03vw), calc(-50% + 1.03vw)) scale(0, 1);
	}
	section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem.act:before{
		transform: translate(calc(-50% + 1.03vw), calc(-50% + 1.03vw)) scale(1, 1);
	}
	section.about .sticky_contents .sticky_content .contents .txts p span.txt span.txtitem span{
		font-size: 3.08vw;
		letter-spacing: calc(3.08vw * 0.08);
		line-height: 1.5;
		padding: calc((3.08vw * (1/2)) * (1/2)) 3.08vw;
		transition: .8s;
	}
}





/**
 * skill
 */
section.skill .sticky_contents .sticky_content .contents ul.skill_lists{
	/*height: 360px;*/
	height: 384px;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 24px));
	height: 100%;
	opacity: 0;
	transition: .8s;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list.act{
	transform: translate(-50%, -50%);
	opacity: 1;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list.done{
	transform: translate(-50%, calc(-50% - 24px));
	opacity: 0;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title{
	margin-left: 8px;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title h3,
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title .en,
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.en,
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.jp{
	font-weight: 600;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title h3{
	font-size: 24px;
	line-height: calc(24px + 6px);
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title .en{
	font-size: 12px;
	line-height: calc(12px + 6px);
	padding-top: 4px;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail{
	margin-left: 8px;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail:last-child{
	margin-left: 0;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt{
	margin-left: 8px;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.en,
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.jp{
	display: block;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.en{
	font-size: 36px;
	line-height: calc(36px + 6px);
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.jp{
	font-size: 12px;
	line-height: calc(12px + 6px);
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dd{
	margin: 0;
}
section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dd p{
	font-size: 12px;
	line-height: calc(12px + 6px);
	font-weight: 500;
	padding-top: 20px;
}
@media screen and (max-width: 768px){
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists{
		height: calc(100vh - (20.51vw * 2));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list{
		-ms-writing-mode: lr-tb; /* 横書き・左から右（MS向け） */
		writing-mode: horizontal-tb; /* 横書き・上から下 */
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list{
		transform: translate(-50%, calc(-50% + 3.08vw));
		width: 100%;
		transition: .8s;
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list.done{
		transform: translate(-50%, calc(-50% - 3.08vw));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title{
		margin-left: 0;
		margin-bottom: calc(4.1vw * (12/16));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title h3{
		font-size: 4.1vw;
		line-height: calc(4.1vw + (4.1vw * (4/16)));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list .title .en{
		font-size: calc(4.1vw * (10/16));
		line-height: calc((4.1vw * (10/16)) + (4.1vw * (4/16)));
		padding-top: calc(4.1vw * (4/16));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail{
		margin-left: 0;
		margin-bottom: calc(4.1vw * (8/16));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail:last-child{
		margin-bottom: 0;
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt{
		margin-left: 0;
		margin-bottom: calc(4.1vw * (4/16));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.en{
		font-size: calc(4.1vw * (20/16));
		line-height: calc((4.1vw * (20/16)) + (4.1vw * (4/16)));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dt h4 span.jp{
		font-size: calc(4.1vw * (10/16));
		line-height: calc((4.1vw * (10/16)) + (4.1vw * (4/16)));
	}
	section.skill .sticky_contents .sticky_content .contents ul.skill_lists li.skill_list ul.details li.detail dl dd p{
		font-size: calc(4.1vw * (10/16));
		line-height: calc((4.1vw * (10/16)) + (4.1vw * (4/16)));
		padding-top: 0;
		padding-left: calc(4.1vw * (10/16));
	}
}





/**
 * portfolio
 */
section.portfolio{
	padding: 200px 0;
}
section.portfolio .content_header{
	margin-bottom: 96px;
}
section.portfolio .content_header h2{
	margin-bottom: 24px;
}
section.portfolio .content_header h2 span{
	display: block;
	font-size: 64px;
	font-weight: 300;
}
section.portfolio .content_header .txts p{
	margin-bottom: 14px;
}
section.portfolio .content_header .txts p:last-child{
	margin-bottom: 0;
}
section.portfolio .content_header .txts p span.txt{
	width: 100%;
}
section.portfolio .content_header .txts p span.txt span.txtitem{
	display: block;
}
section.portfolio .content_header .txts p span.txt span.txtitem:before,
section.portfolio .content_header .txts p span.txt span.txtitem:after{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
}
section.portfolio .content_header .txts p span.txt span.txtitem:before{
	transform: translate(calc(-50% + 4px), calc(-50% + 4px));
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/border_1a1a1a.svg');
	background-position: right bottom;
	background-repeat: repeat;
	background-size: 7px;
}
section.portfolio .content_header .txts p span.txt span.txtitem:after{
	transform: translate(-50%, -50%);
	background-color: #fff;
}
section.portfolio .content_header .txts p span.txt span.txtitem span{
	display: block;
	font-size: 14px;
	letter-spacing: calc(14px * 0.08);
	font-weight: 400;
	padding: 0 20px;
	z-index: 1;
}
section.portfolio ul.portfolio_lists li.portfolio_list{
	width: 420px;
	margin-right: 16px;
	margin-bottom: calc(16px * 2);
}
section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(4n){
	margin-right: 0;
}
section.portfolio ul.portfolio_lists li.portfolio_list a{
	display: block;
	padding-bottom: 16px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a .thm{
	width: 420px;
	height: calc(420px * (9/16));
	margin-bottom: 16px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a .thm:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 4px), calc(-50% + 4px));
	width: 100%;
	height: 100%;
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/border_1a1a1a.svg');
	background-position: right bottom;
	background-repeat: repeat;
	background-size: 7px;
	transition: .4s;
}
section.portfolio ul.portfolio_lists li.portfolio_list a:hover .thm:before{
	transform: translate(calc(-50% + 0px), calc(-50% + 0px));
}
section.portfolio ul.portfolio_lists li.portfolio_list a .thm:after{
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.0);
	transition: .4s;
}
section.portfolio ul.portfolio_lists li.portfolio_list a:hover .thm:after{
	background-color: rgba(255, 255, 255, 0.8);
}
section.portfolio ul.portfolio_lists li.portfolio_list a .thm .img,
section.portfolio ul.portfolio_lists li.portfolio_list a .thm img{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags{
	margin-bottom: 4px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags li{
	margin-right: 4px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags li:last-child{
	margin-right: 0;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags li p{
	font-size: 12px;
	font-weight: 400;
	outline: 1px solid #000;
	padding: 0 24px;
	border-radius: 24px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills{
	margin-bottom: 8px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li{
	padding-left: 8px;
	padding-right: 12px;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:last-child{
	padding-right: 0;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	background-color: #1a1a1a;
	border-radius: 100%;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.html:before{
	background-color: #e44d26;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.css:before{
	background-color: #264de4;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.javascript:before{
	background-color: #f7df1e;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.php:before{
	background-color: #8892be;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.illustrator:before{
	background-color: #ff7c00;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.photoshop:before{
	background-color: #31a8ff;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.premierepro:before{
	background-color: #9999ff;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.aftereffects:before{
	background-color: #9999ff;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li.audition:before{
	background-color: #9999ff;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:after{
	position: absolute;
	content: '';
	top: 50%;
	right: calc(12px / 2);
	transform: translate(50%, -50%) rotate(30deg);
	width: 1px;
	height: 12px;
	background-color: #bfbfbf;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:last-child:after{
	display: none;
}
section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li p{
	font-size: 12px;
	font-weight: 400;
}
section.portfolio ul.portfolio_lists li.portfolio_list a h3{
	display: block;
	font-size: 14px;
	letter-spacing: calc(14px * 0.08);
	font-weight: 500;
}
section.portfolio ul.portfolio_lists li.portfolio_list a p.explanation{
	font-size: 12px;
	color: #777777;
	font-weight: 400;
	line-height: 1.5;
}
@media screen and (max-width: 1919px){
	section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(4n){
		margin-right: 16px;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(3n){
		margin-right: 0;
	}
}
@media screen and (max-width: 1435px){
	section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(3n){
		margin-right: 16px;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(2n){
		margin-right: 0;
	}
}
@media screen and (max-width: 951px){
	section.portfolio ul.portfolio_lists li.portfolio_list:nth-child(2n){
		margin-right: 16px;
	}
}
@media screen and (max-width: 768px){
	section.portfolio{
		padding: 51.28vw 0;
	}
	section.portfolio .content_header{
		margin-bottom: 24.62vw;
	}
	section.portfolio .content_header h2{
		margin-bottom: 6.15vw;
	}
	section.portfolio .content_header h2 span{
		font-size: 8.21vw;
	}
	section.portfolio .content_header .txts p{
		margin-bottom: 3.08vw;
	}
	section.portfolio .content_header .txts p span.txt span.txtitem:before{
		transform: translate(calc(-50% + 1.03vw), calc(-50% + 1.03vw));
		background-size: 1.03vw;
	}
	section.portfolio .content_header .txts p span.txt span.txtitem span{
		font-size: 3.08vw;
		letter-spacing: calc(3.08vw * 0.08);
		line-height: 1.5;
		padding: calc((3.08vw * (1/2)) * (1/2)) 3.08vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list{
		width: 90vw;
		margin-right: 0!important;
		margin-bottom: 10.26vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a{
		padding-bottom: 0;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a .thm{
		width: 90vw;
		height: calc(90vw * (9/16));
		margin-bottom: 5.13vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a .thm:before{
		transform: translate(calc(-50% + 1.03vw), calc(-50% + 1.03vw));
		background-size: 1.03vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags{
		margin-bottom: 1.03vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags li{
		margin-right: 1.03vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.tags li p{
		font-size: 2.56vw;
		padding: 0 calc(2.56vw * 2);
		border-radius: calc(2.56vw * 2);
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills{
		margin-bottom: 1.03vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li{
		padding-left: 2.05vw;
		padding-right: 3.08vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:before{
		width: 1.03vw;
		height: 1.03vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li:after{
		right: calc(3.08vw / 2);
		height: 2.56vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a ul.skills li p{
		font-size: 2.56vw;
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a h3{
		font-size: 3.59vw;
		letter-spacing: calc(3.59vw * 0.08);
	}
	section.portfolio ul.portfolio_lists li.portfolio_list a p.explanation{
		font-size: 3.08vw;
	}
}





/**
 * ratio
 */
section.mv .sticky_contents .sticky_content .ratio,
section.about .sticky_contents .sticky_content .ratio,
section.skill .sticky_contents .sticky_content .ratio{
	position: absolute;
	left: calc(5vw / 2);
	transform: translate(-50%, -50%) rotate(90deg);
}
section.mv .sticky_contents .sticky_content .ratio{
	top: calc(50% - (40px / 2));
}
section.about .sticky_contents .sticky_content .ratio,
section.skill .sticky_contents .sticky_content .ratio{
	top: 50%;
}
section.mv .sticky_contents .sticky_content .ratio p span.count,
section.mv .sticky_contents .sticky_content .ratio p span.percent,
section.about .sticky_contents .sticky_content .ratio p span.count,
section.about .sticky_contents .sticky_content .ratio p span.percent,
section.skill .sticky_contents .sticky_content .ratio p span.count,
section.skill .sticky_contents .sticky_content .ratio p span.percent{
	font-weight: 300;
}
section.mv .sticky_contents .sticky_content .ratio p span.count,
section.mv .sticky_contents .sticky_content .ratio p span.percent{
	color: #bfbfbf;
}
section.about .sticky_contents .sticky_content .ratio p span.count,
section.about .sticky_contents .sticky_content .ratio p span.percent{
	color: #216cb6;
}
section.skill .sticky_contents .sticky_content .ratio p span.count,
section.skill .sticky_contents .sticky_content .ratio p span.percent{
	color: #fe9550;
}
section.mv .sticky_contents .sticky_content .ratio p span.count,
section.about .sticky_contents .sticky_content .ratio p span.count,
section.skill .sticky_contents .sticky_content .ratio p span.count{
	width: 36px;
	font-size: 20px;
	margin-right: 4px;
}
section.mv .sticky_contents .sticky_content .ratio p span.percent,
section.about .sticky_contents .sticky_content .ratio p span.percent,
section.skill .sticky_contents .sticky_content .ratio p span.percent{
	font-size: 16px;
}
@media screen and (max-width: 768px){
	section.mv .sticky_contents .sticky_content .ratio{
		top: 50%;
	}
	section.mv .sticky_contents .sticky_content .ratio p span.count,
	section.about .sticky_contents .sticky_content .ratio p span.count,
	section.skill .sticky_contents .sticky_content .ratio p span.count{
		width: 6.15vw;
		font-size: 3.08vw;
		margin-right: 1.03vw;
	}
	section.mv .sticky_contents .sticky_content .ratio p span.percent,
	section.about .sticky_contents .sticky_content .ratio p span.percent,
	section.skill .sticky_contents .sticky_content .ratio p span.percent{
		font-size: 3.08vw;
	}
}





/**
 * loading
 */
section.loading,
section.loading .logo_cutout,
section.loading .logo_cutout:after,
section.loading .logo_cutout .colors{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
section.loading,
section.loading .logo_cutout:after{
	width: 100%;
	height: 100%;
}
section.loading .logo_cutout,
section.loading .logo_cutout:after,
section.loading .logo_cutout .colors,
section.loading .logo_cutout .colors .circle{
	position: absolute;
}
section.loading{
	position: fixed;
	background-color: #fff;
	z-index: 1000;
	opacity: 1;
	transition: .8s;
}
section.loading.done{
	opacity: 0;
}
section.loading.done.noact{
	display: none!important;
}
section.loading .logo_cutout{
	width: 476px;
	height: calc(476px * (158/476));
}
section.loading .logo_cutout:after{
	content: '';
	background-image: url('https://nohara.design/wp-content/themes/twentytwentyone/images/logo_cutout.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
section.loading .logo_cutout .colors{
	width: calc(476px - 10px);
	height: calc((476px * (158/476)) - 10px);
	overflow: hidden;
}
section.loading .logo_cutout .colors .circle{
	transform: translate(-50%, -50%) scale(0);
	width: calc(476px * (20/476));
	height: calc(476px * (20/476));
	border-radius: 100%;
	transition: 1.6s;
}
section.loading .logo_cutout .colors .circle:nth-child(1){
	top: calc((476px * (158/476)) * (1/3));
	left: calc(476px * (0/3));
	background-color: #ff91b8;
}
section.loading .logo_cutout .colors .circle:nth-child(2){
	top: calc((476px * (158/476)) * (2/3));
	left: calc(476px * (1/3));
	background-color: #5bcae7;
}
section.loading .logo_cutout .colors .circle:nth-child(3){
	top: calc((476px * (158/476)) * (1/3));
	left: calc(476px * (2/3));
	background-color: #216cb6;
}
section.loading .logo_cutout .colors .circle:nth-child(4){
	top: calc((476px * (158/476)) * (2/3));
	left: calc(476px * (3/3));
	background-color: #f2cd54;
}
section.loading .logo_cutout .colors .circle.act{
	transform: translate(-50%, -50%) scale(15);
}
@media screen and (max-width: 768px){
	section.loading{
		transition: .8s;
	}
	section.loading .logo_cutout{
		width: calc((20.51vw * 3) + 2.56vw);
		height: calc(((20.51vw * 3) + 2.56vw) * (158/476));
	}
	section.loading .logo_cutout .colors{
		width: calc(((20.51vw * 3) + 2.56vw) - 2.56vw);
		height: calc((((20.51vw * 3) + 2.56vw) * (158/476)) - 2.56vw);
	}
	section.loading .logo_cutout .colors .circle{
		width: calc(((20.51vw * 3) + 2.56vw) * (20/476));
		height: calc(((20.51vw * 3) + 2.56vw) * (20/476));
	}
	section.loading .logo_cutout .colors .circle:nth-child(1){
		top: calc((((20.51vw * 3) + 2.56vw) * (158/476)) * (1/3));
		left: calc(((20.51vw * 3) + 2.56vw) * (0/3));
	}
	section.loading .logo_cutout .colors .circle:nth-child(2){
		top: calc((((20.51vw * 3) + 2.56vw) * (158/476)) * (2/3));
		left: calc(((20.51vw * 3) + 2.56vw) * (1/3));
	}
	section.loading .logo_cutout .colors .circle:nth-child(3){
		top: calc((((20.51vw * 3) + 2.56vw) * (158/476)) * (1/3));
		left: calc(((20.51vw * 3) + 2.56vw) * (2/3));
	}
	section.loading .logo_cutout .colors .circle:nth-child(4){
		top: calc((((20.51vw * 3) + 2.56vw) * (158/476)) * (2/3));
		left: calc(((20.51vw * 3) + 2.56vw) * (3/3));
	}
}





/**
 * footer
 * site_footer
 */
footer.site_footer{
	padding: 120px 0;
	overflow: hidden;
}
footer.site_footer .checkwidth{
	width: 100vw;
}
footer.site_footer .footer_items p.footer_item{
	padding-right: 20px;
	margin-right: 20px;
}
footer.site_footer .footer_items p.footer_item:last-child{
	padding-right: 0;
	margin-right: 0;
}
footer.site_footer .footer_items p.footer_item:after{
	position: absolute;
	content: '';
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	width: 1px;
	height: 20px;
	background-color: #bcbcbc;
}
footer.site_footer .footer_items p.footer_item:last-child:after{
	display: none;
}
footer.site_footer .footer_items p.footer_item a,
footer.site_footer .footer_items p.footer_item span{
	display: block;
	font-size: 14px;
	color: #1a1a1a;
	letter-spacing: calc(14px * 0.05);
}
footer.site_footer .footer_items p.footer_item a.dsm{
	font-weight: 600;
}
footer.site_footer .footer_items p.footer_item span.itc{
	font-weight: 300;
}
@media screen and (max-width: 768px){
	footer.site_footer{
		padding: 30.77vw 0;
	}
	footer.site_footer .footer_items p.footer_item{
		padding-right: 5.13vw;
		margin-right: 5.13vw;
	}
	footer.site_footer .footer_items p.footer_item:nth-last-child(2){
		padding-right: 0;
		margin-right: 0;
	}
	footer.site_footer .footer_items p.footer_item:last-child{
		width: 100%;
		justify-content: center;
	}
	footer.site_footer .footer_items p.footer_item:after{
		height: 5.13vw;
	}
	footer.site_footer .footer_items p.footer_item:nth-last-child(2):after{
		display: none;
	}
	footer.site_footer .footer_items p.footer_item a,
	footer.site_footer .footer_items p.footer_item span{
		font-size: 3.59vw;
		letter-spacing: calc(3.59vw * 0.05);
	}
}