/* Theme Name: mytheme */
html {
	overscroll-behavior-y: none;
}
body {
	margin: 0;
	overflow-x: hidden;
	overscroll-behavior: none;
}
body.overflowHidden {
	overflow: hidden;
}
@font-face {
	font-family: 'NotoSans';
	src: url('./fonts/NotoSansCJKjp-Regular.woff2') format('woff2'),
		url('./fonts/NotoSansCJKjp-Regular.woff') format('woff');
	font-weight: 400;
}
@font-face {
	font-family: 'NotoSans';
	src: url('./fonts/NotoSansCJKjp-Bold.woff2') format('woff2'),
		url('./fonts/NotoSansCJKjp-Bold.woff') format('woff');
	font-weight: 700;
}
@font-face {
	font-family: 'BebasNeue';
	src: url('./fonts/BebasNeue-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
#main {
	font-size: 16px;
	font-weight: 400;
	font-family: 'NotoSans', sans-serif;
	line-height: 26px;
	overflow-x: hidden;
}
@media screen and (max-width: 1080px) {
	#main {
		font-size: 1.6vw;
		line-height: 2.6vw;
	}
}
@media screen and (max-width: 568px) {
	#main {
		font-size: 4vw;
		line-height: 7vw;
	}
}

header {
	position: fixed;
	width: 100%;
	z-index: 9999;
}
header .columns {
	display: flex;
	margin: 1em;
}
header .columns .column:first-child {
	width: 100%;
}
header .logo {
	width: 8em;
	display: inline-block;
	z-index: 3;
	position: relative;
}
header .logo img {
	width: 100%;
	height: auto;
}


.menu_button {
	position: absolute;
	top: -10em;
	right: -10em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--r) * 0.13em);
	height: calc(var(--r) * 0.13em);
	background: rgba(115, 115, 115, 0.5);
	border-radius: 10em;
	cursor: pointer;
	z-index: 5;

	/* 回転はしない */
	transform: none;

	/* 開閉・移動用の transition のみ */
	transition: top .35s ease-in-out, right .35s ease-in-out;
}


.menu_rotate {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	transform: rotate(var(--parent-rot));
}
.menu_rotate > div {
	position: absolute;
	--a2: calc(var(--a) * 1deg - 90deg);
	--x: calc(cos(var(--a2)) * var(--r) * 0.04em);
	--y: calc(sin(var(--a2)) * var(--r) * -0.04em);
	translate: var(--x) var(--y);
	transform: rotate(calc(-1 * var(--parent-rot)));
	width: 5em;
	height: 5em;
	background-color: #fff;
	border-radius: 50%;
	margin: 0 auto;
	text-align: center;
	line-height: 5em;
	
}
.menu_rotate::before {  
	content: "";
	width: 2em;
	height: 2em;
	position: absolute;
	top: 8.78em;
	left: 8.78em;
	border: solid #fff 0.2em;
	border-radius: 50%;
	box-sizing: border-box;
}
.menu_button.active{
	top: -3em;
	right: 0;
}
.menu_rotate > div a {
	display: block;
	font-size: 1.5em;
	font-family: 'BebasNeue';
	color: #898989;
	text-decoration: none;
}
.menu_rotate > div.cursor,.menu_rotate > div:hover {
	background-color: #003a77;
	transition: 0.3s ease;
}
.menu_rotate > div.cursor a,.menu_rotate > div:hover a {
	color: #fff;
	transition: 0.3s ease;
}


header .projects{
	position: absolute;
	top: 2.5em;
	right: -20em;
	z-index: 3;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
header .projects.active{
	top: 15.5em;
	right: 0;
}
header .projects div{
	display: block;
	padding: 1em;
	border-radius: 50%;
	width: 6em;
	height: 6em;
	border-radius: 50%;
	margin: 0 auto;
	text-align: center;
	line-height: 10em;
}
header .projects a{
	display: block;
}
header .projects img{
	width: 100%;
}
header .sns{
	position: absolute;
	top: 2.5em;
	right: -20em;
	z-index: 3;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
header .sns.active{
	top: 32em;
	right: 1em;
}
header .sns div {
	width: 4em;
}
header .sns div img {
	width: 100%;
	height: auto;
}
.menu_mode {
	visibility: hidden;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	overflow: auto;
	width: 100%;
	transition: all 0.5s ease;
	opacity: 0;
}
.menu_mode.open {
	visibility: unset;
	opacity: 1;
}
.menu_button a, header .projects, header .sns, .menu_mode {
	pointer-events: none;
}
.menu_button.active a, header .projects.active, header .sns, .menu_mode.open {
	pointer-events: auto;
}





.innerBox {
	width: 62.5em;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
	.innerBox {
		width: 95%;
	}
}
@media screen and (max-width: 568px) {
	.innerBox {
		width: 90%;
	}
}


.slider-wrapper {
	display: flex;
	overflow: hidden;
	margin: 5em 0 -10em;
	padding: 1em;
}
.slider {
	animation: scroll-left 40s infinite linear .5s both;
	display: flex;
	list-style: none;
	padding: 0;
}
.slide {
	width: calc(210em / 3);
}
.slide p {
	font-size: 6em;
	font-family: 'BebasNeue';
	opacity: 0.05;
	white-space: nowrap;
	margin: 0;
	user-select: none;
}
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}


#page_title{
	padding: 15em;
}
@media screen and (max-width: 568px) {
	#page_title {
		padding: 11em 0 6em;
	}
}
#page_title h1{
	position: absolute;
	margin: 0 0 0 -1.5em;
	font-size: 10em;
	font-family: 'BebasNeue';
	color: #003a77;
}
@media screen and (max-width: 1470px) {
	#page_title h1 {
		margin: 0 0 0 0;
		left: 0;
	}
}
@media screen and (max-width: 568px) {
	#page_title h1 {
		margin: 0 0 0 0.2em;
		font-size: 7em;
	}
}
.char-wrapper {
	overflow: hidden;
	display: inline-block;
	line-height: 1;
	margin: -0.3em 0 0 0;
}
.char {
	display: inline-block;
	transform: translateY(1em);
}
.char.is-active {
	animation: slideUp 0.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes slideUp {
	to {
		transform: translateY(0);
	}
}
.br_sp{
	display: none;
}
@media screen and (max-width: 568px) {
	.br_sp{
		display: block;
	}
}




#next_page{
	position: relative;
	display: block;
	font-size: 10em;
	font-family: 'BebasNeue';
	color: #e5e5e5;
	text-align: center;
	line-height: 0.65em;
	text-decoration: none;
	padding: 0 0 0.5em;
	background-color: #003a77;
	transform: translate3d(-100%, 0, 0);
	transition: 0.5s ease;
	opacity: 0;
}
@media screen and (max-width: 568px) {
	#next_page{
		font-size: 7em;
	}
}
#next_page.displayed{
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
#next_page div{
	display: inline-block;
}
#next_page span{
	font-size: 50%;
}
#next_page .cp_arrows {
	height: 1em;
	transform: rotate(-90deg);
	margin-left: 0.1em;
}
#next_page .cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
	position: absolute;
	top: 50%;/*着地点(cp_arrowsの高さの50%)*/
	left: 50%;
	transform: translateX(-50%);
	width: 1.37em;
	opacity: 0;
}
#next_page .cp_arrows .cp_arrow:first-child {
	animation: arrow-move08 2s ease-in-out infinite;
}
#next_page .cp_arrows .cp_arrow:nth-child(2)  {
	animation: arrow-move08 2s 1s ease-in-out infinite;
}
#next_page .cp_arrows .cp_arrow:before,
#next_page .cp_arrows .cp_arrow:after {/*矢印全体の設定*/
	position: absolute;
	content: '';
	top: 0;
	width: 0.5em;
	height: 0.02em;
	background: #e5e5e5;
}
#next_page .cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
	left: 0.22em;
	transform: rotate(30deg);
}
#next_page .cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
	right: 0.22em;
	transform: rotate(-30deg);
}
@keyframes arrow-move08 {
	0% { opacity: 0; top: 40%;/*スタート地点(cp_arrowsの高さの40%)*/}
	70% { opacity: 1;}
	100% { opacity: 0;}
}