#loading-wrapper { 
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #1a1a1a; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 1s; 
  z-index: 9999;
overflow:hidden;
}

.loading-plantmate {
	background: #81b54c !important; 
}
.loading-youmeflow {
	background: #1e1b20 !important;  
}
.loading-dentasmile {
	background: #51dae0 !important; 
}
.loading-ecobud {
	background: #01855b !important; 
}
#loading-wrapper.completed {
  animation:loading-wrapper ease-in-out 0.5s forwards;
	animation-delay:0.8s;
}
@keyframes loading-wrapper{
	0%{opacity:1;transform:translate(0,0)}
	100%{opacity:1;transform:translate(0%,-100%);display:none;visibility: hidden;}
}
.loader, .loader:before, .loader:after {
  width: 2.0em;
  height: 2.0em;
  animation-fill-mode: both;
  animation: bblFadInOut 1s linear infinite;
}
#loading-wrapper .num{
	display:block;
	color:#f6f6f5;
	position:absolute;
	font-size:200px;
	line-height:0.8;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:right;
}
.loader {
  color: #FFF;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.0em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.0em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.0em 0 -1.3em }
  40% { box-shadow: 0 2.0em 0 0 }
}
    
      
    
html{
	height:100%; 
}
body{
	margin:0;
	padding:0;
	height:100%;
	font-size:16px;
	font-feature-settings: "palt" 1;
	letter-spacing:0em;
	background:#ececec;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight:400;
}
@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
}
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
	  position:relative;
  }
}
body::-webkit-scrollbar {
	width: 8px;
}
body::-webkit-scrollbar-track {
	background: transparent;
	background: #ececec;
}
body::-webkit-scrollbar-thumb {
	background: #1a1a1a;
	transition:.3s all ease;
}
body::-webkit-scrollbar-thumb:hover {
	background:#1a1a1a;
}
main,header,footer,section,article,div,span,nav,p{
	box-sizing: border-box;
	padding:0;
	margin:0;
	position:relative;
}
.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
}
h1{
	font-feature-settings: "palt 1";
	font-weight:400;
}
em.magenta{
	color:#ba007c;
	font-style:normal;
}
em.yellow{
	color:#feee00;
	font-style:normal;
}
em.cyan{
	color:#212cdc;
	font-style:normal;
}
.slide-animation {
	animation: slide-animation 0.8s ease forwards;
}
.slide-animation-close {
	animation: slide-animation-close 0.8s ease forwards !important;
}
.slide-animation-body {
	animation: slide-animation-body 0.8s ease forwards;
}
.slide-animation-close-body {
	animation: slide-animation-close-body 0.8s ease forwards !important;
}




.fadeIn {
  opacity: 0;
}
.fadeIn.active {
  animation: fadeIn 1.0s linear forwards;
	will-change: transform;}

@keyframes fadeIn {
  0% {
    opacity:0;
	}
  100%{
      opacity:1; } 
}
.fadeInDown {
  opacity: 0;
}
.fadeInDown.active {
  animation: fadeIn-down 0.4s ease-in forwards;
	will-change: transform;}

@keyframes fadeIn-down {
  0% {
    opacity:0;	transform: translateY(-25%);
	}
  100%{
    opacity:1;	transform: translateY(0%); } 
}
.fadeInUp {
  opacity: 0; }

.fadeInUp.active {
  animation: fadeInUp 0.8s linear forwards;
	will-change: transform;
}
@keyframes fadeInUp {
  0% {
    transform: translateY(15%); opacity: 1;
	}
  100%{
    transform: translateY(0px); opacity: 1; } 
}



.planet_rotate{
	animation: rotation 60s linear infinite;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); } 
}

.univ{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.univ.active{
	z-index:auto;
}


.univ .planet2{
	display:block;
	border-radius:50%;
	width:180px;
	height:180px;
	position:fixed;
	top:calc((100% - 180px) /2);
	left:calc((100% - 180px) /2);
	background:#fbec22;
	z-index:333;
	mix-blend-mode:multiply;
}

.univ .planet5{
	display:block;
	border-radius:50%;
	width:300px;
	height:300px;
	position:fixed;
	top:calc(((100% - 300px) /2));
	left:calc((100% - 300px) /2);
	background: no-repeat center/0% url("../img/pistil.png");
	background-size:contain;
	mix-blend-mode: multiply;
	opacity:0;
}
header{
	width:100%;
	height:auto;
	position:relative;
	margin:0;
	padding:5vh 0 0 0;
	background:#ececec;
	display:flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}
header .header-mob-container{
	width:100%;
	max-width:95vw;
	height:auto;
	margin:0 auto;
	padding:0px;
	box-sizing: border-box;
	position:relative;
	border:2px solid #1a1a1a;
	display:grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(6, 1fr); 
	gap:2px;
	background:#1a1a1a;
}
header .header-mob-container > div{
	background:#ececec;
	width:100%;
	height:100%;
	position:relative;
	aspect-ratio: 1/1;
	overflow:hidden;
}
header .header-mob-container > div > span{
	width:100%;
	height:100%;
}
header .header-mob-container > div:nth-of-type(1){
	aspect-ratio: 2 / 1;
	grid-column-start: 1;
  	grid-column-end:3;
}
header .header-mob-container > div:nth-of-type(2){
	background:#1a1a1a;
	display:grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(3, 1fr); 
	grap:2px;
}
header .header-mob-container > div:nth-of-type(2) > span{
	display:block;
	width:100%;
	height:100%;
}
header .header-mob-container > div:nth-of-type(2) > span:nth-of-type(1){
	grid-column-start: 1;
  	grid-column-end:4;
}
header .header-mob-container > div:nth-of-type(2) > span:nth-of-type(2){
	grid-row-end: span 2;
	background:#ba007c;
}
header .header-mob-container > div:nth-of-type(2) > span:nth-of-type(3){
	grid-row-end: span 2;
	background:#212cdc;
}
header .header-mob-container > div:nth-of-type(2) > span:nth-of-type(4){
	grid-row-end: span 2;
	background:#fbec22;
}
header .header-mob-container > div:nth-of-type(2) span{
	color:#ececec;
	background:#1a1a1a;
	font-size:150%;
	line-height:1.25;
}
header .header-mob-container > div:nth-of-type(4){
	aspect-ratio: 2 / 3;
	grid-column-start: 2;
  	grid-column-end:4;
	grid-row-end: span 3;
}
header .header-mob-container > div:nth-of-type(6){
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
header .header-mob-container > div:nth-of-type(6) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	transition: transform 0.8s;
	border:20px solid #1a1a1a;
	animation: rotation-panel 12s ease infinite;
}
header .header-mob-container > div:nth-of-type(7) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0px;
	border-radius:50%;
	position:relative;
	box-sizing: border-box;
	display:block;
	background:#1a1a1a;
	animation: translate-circle 12s ease infinite;
}
header .header-mob-container > div:nth-of-type(8){
	aspect-ratio: 2 / 1;
	grid-column-start: 2;
  	grid-column-end:4;
	background:#1a1a1a;
}
header .header-mob-container > div:nth-of-type(8) > span{
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	font-size:90px;
	line-height:1;
	color:#ececec;
}
header .header-mob-container > div:nth-of-type(9){
	aspect-ratio: 3 / 1;
	grid-column-start: 1;
  	grid-column-end:4;
}
header .header-mob-container > div:nth-of-type(9) span{
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding:50px;
}
header .header-mob-container > div:nth-of-type(9) > span p{
	display:inline-block;
	font-size:250%;
	line-height:1.0;
}
header .header-mob-container > div:nth-of-type(9) > span p em{
	font-style:normal;
	font-family: 'Major Mono Display', monospace;
}
header .header-container{
	width:100%;
	max-width:90vw;
	height:auto;
	margin:0;
	padding:0px;
	box-sizing: border-box;
	position:relative;
	border:2px solid #1a1a1a;
	display:grid;
	grid-template-columns: repeat(10, 1fr); 
	grid-template-rows: repeat(5, 1fr); 
	gap:2px;
	background:#1a1a1a;
}
header .header-container > div{
	background:#ececec;
	aspect-ratio: 1 / 1;
	overflow:hidden;
	line-height:1;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width:100%;
	height:100%;
}
header .header-container > div:nth-of-type(1){
	aspect-ratio: 4 / 1;
	grid-column-start: 1;
  	grid-column-end:5;
	border-bottom:1px solid #1a1a1a;
	background:#1a1a1a;
	color:#ececec;
	font-size:100px;
}
header .header-container > div:nth-of-type(3){
	aspect-ratio: 1 / 1;
	display:block;
	width:100%;
	height:100%;
}

header .header-container > div:nth-of-type(5){
	aspect-ratio: 3 / 5;
	grid-column-start: 8;
  	grid-column-end:11;
	grid-row-end: span 5;
	background:#ececec;
	position:relative;
}

header .header-container > div:nth-of-type(7){
	aspect-ratio: 4 / 1;
	grid-column-start: 2;
  	grid-column-end:6;
	border-bottom:1px solid #1a1a1a;
	background:#1a1a1a;
	color:#ececec;
	font-size:100px;
}

header .header-container > div:nth-of-type(17){
	aspect-ratio: 2 / 1;
	grid-column-start: 1;
  	grid-column-end:5;
	grid-row-end: span 2;
	background:#1a1a1a;
	color:#1a1a1a;
	display:grid;
	grid-template-columns: repeat(8, 1fr); 
	grid-template-rows: repeat(4, 1fr); 
	gap:2px;
}
header .header-container > div:nth-of-type(20) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0px;
	border-radius:50%;
	position:relative;
	box-sizing: border-box;
	display:block;
	background:#1a1a1a;
	animation: translate-circle 12s ease infinite;
}
header .header-container > div:nth-of-type(22) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	transition: transform 0.8s;
	border:20px solid #1a1a1a;
	animation: rotation-panel 12s ease infinite;
}
header .header-container > div:nth-of-type(17) > span{
	aspect-ratio: 1 / 1;
	background:#ececec;
	color:#1a1a1a;
	height:100%;
	width:100%;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	overflow:hidden;
}
header .header-container > div:nth-of-type(17) > span em{
	font-style:normal;
	font-family: 'Major Mono Display', monospace;
}
header .header-container > div:nth-of-type(17) > span:nth-of-type(1){
	aspect-ratio: 6 / 1;
	grid-column-start: 1;
  	grid-column-end:7;
}
header .header-container > div:nth-of-type(17) > span:nth-of-type(5){
	aspect-ratio: 3 / 1;
	grid-column-start: 2;
  	grid-column-end:5;
}
header .header-container > div:nth-of-type(17) > span:nth-of-type(12){
	aspect-ratio: 3 / 1;
	grid-column-start: 3;
  	grid-column-end:6;
}
header .header-container > div:nth-of-type(17) > span:nth-of-type(19){
	aspect-ratio: 5 / 1;
	grid-column-start: 4;
  	grid-column-end:9;
}
header .header-container > div:nth-of-type(17) > span:nth-of-type(19).active{
	animation:message 0.5s linear forwards;
}
@keyframes message{
	0%{background: #212cdc}
	30%{background: #212cdc}
	31%{background: #b10b7c}
	60%{background: #b10b7c}
	61%{background: #fbec22}
	91%{background: #1a1a1a}
	100%{background: #1a1a1a;color:#ececec;}
}

header .header-container h1{
	margin:0;
	padding:0;
	display:inline-block;
	text-align:justify;
	position:absolute;
	top:0px;
	left:0px;
	background:#1a1a1a;
	color:#ececec;
	font-size:180px;
	letter-spacing:-0.05em;
	line-height:1;
	box-sizing: border-box;
	opacity:1;
	aspect-ratio: 2 / 1;
}
header .header-container h1 em{
	display:flex;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	width:100%;
	text-align: justify;
	font-style:normal;
	line-height:0.8;
}
header .header-mob-container .warp,
header .header-container .warp{
	display:flex;
	align-content:space-around;
	align-items: flex-end;
	flex-wrap:wrap;
	position:absolute;
	width:100%;
	height:72%;
	margin:0;
	bottom:0px;
	right:0px;
	aspect-ratio: 3 / 5;
}
header .header-mob-container .warp{
	height:90%;	
}
header .header-mob-container .warp span,
header .header-container .warp span{
	display:block;
	height:75px;
	width:100%;
	border:2px solid #1a1a1a;
	border-radius:50%;
	margin-top:-50%;
	bottom:0px;
	position:relative;
}


header .header-title{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	padding:0;
	margin:0;
	box-sizing: border-box;
	z-index:333;
}
header .header-title .header-title-container{
	position:relative;
	top:0;
	left:0;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width:100%;
	animation:header-title-bg 0.3s forwards linear;
	animation-delay:1.0s;
	aspect-ratio: 3/1;
}
header .header-mob-container .header-title .header-title-container{
	aspect-ratio: 2/1;
}
@keyframes header-title-bg{
	0%{background:#212cdc}
	30%{background:#212cdc}
	31%{background:#b10b7c}
	60%{background:#b10b7c}
	61%{background:#fbec22}
	90%{background:#fbec22;}
	91%{background:transparent}
	100%{background:transparent}
}
header .header-title .header-title-container span{
	color:#1a1a1a;
	display:inline-block;
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-feature-settings: "palt" 1;
	text-align: justify;
	animation:header-title 0.3s forwards linear;
	animation-delay:1.0s;
	opacity:0;
	letter-spacing:-0.05em;
	font-family: 'Major Mono Display', monospace;
}
header .header-title .header-title-container span em{
	display:block;
	overflow:hidden;
	font-style:normal;
}
@keyframes header-title{
	0%{opacity:0}
	49%{opacity:0}
	50%{opacity:1}
	100%{opacity:1;}
}
header .header-title .header-title-container .header-title-ico{
	position:relative;
	display:inline-block;
	margin:0;
	padding:0;
	width:36px;
	height:36px;
	animation:header-title 0.3s forwards linear;
	animation-delay:1.0s;
	opacity:0;
}
header .header-title .header-title-container .header-title-ico i{
	display:block;
	margin:0;
	padding:0;
	box-sizing: border-box;
	position:absolute;
}
header .header-title .header-title-container .header-title-ico i:nth-of-type(1){
	width:100%;
	height:12px;
	background:#1a1a1a;
	top:0;
	left:0;
}
header .header-title .header-title-container .header-title-ico i:nth-of-type(2){
	width:calc(36px/3);
	height:24px;
	background:#b10b7c;
	top:12px;
	left:0;
}
header .header-title .header-title-container .header-title-ico i:nth-of-type(3){
	width:calc(36px/3);
	height:24px;
	background:#212cdc;
	top:12px;
	left:calc((100% - (36px/3))/2);
}
header .header-title .header-title-container .header-title-ico i:nth-of-type(4){
	width:calc(36px/3);
	height:24px;
	background:#fbec22;
	top:12px;
	right:0;
}
main{
	display:block;
	position:relative;
	box-sizing: border-box;
	width:100%;
	padding:0;
	margin:0;
	overflow:hidden;

}
main section{
	position:relative;
	display:flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	box-sizing: border-box;
	width:100%;
	margin:0;	
}

main section#experiences{
	background:#ececec;
	padding:0;
}
main section#strategy{
	background:#ececec;
}
main section#strategy artice{
	background:#ececec;
}


main section#principal{
	width:100%;
	height:100%;
	min-height:100vh;
	box-sizing: border-box;
	position:relative;
	padding:0;
	background:#ececec;

}


main section#rain{
	height:100vh;
	margin:0;
	padding:0;
	overflow:hidden;
	transform: translateZ(1px);
	z-index:333;
	position:relative;
	mix-blend-mode: difference;
	background:#ececec
}


main section article{
	position:relative;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	top:0;
	left:0;
	display:flex;
	justify-content:center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap; 
}


main section#rain article{
	display:flex;
	justify-content: center;
align-content: center;
align-items: center;}

main section#rain article .container{
	width:auto;
	display:inline-block;
	margin: 0 auto;
}



main section#experiences article h1{
	position:relative;
	padding:0;
	flex:0 0 100%;
	width:100%;
	height:auto;
	display:block;
	text-align:left;
	z-index:20;
	line-height:1;
}
main section#experiences article h1 span{
	display:block;
	position:relative;
	width:100%;
	flex: 0 0 100%;
	padding:0;
	margin:0;
}

main section#experiences article .textbox2{
	position:relative;
	top:0;
	left:0;
	flex: 0 0 100%;
	width:100%;
	height:100%;
	min-height:auto;
	box-sizing: border-box;
	justify-content: center;
	align-items:center;
	align-content:center;
	flex-wrap:wrap;
	z-index:999;
}
main section#experiences article .textbox2 .container{
	flex: 0 0 100%;
	width:100%;
	height:100%;
	position:relative;
	display:flex;
	justify-content: space-between;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
	margin:0;
	padding:0px;
	box-sizing: border-box;
}

main section#experiences article .textbox2 .container .pf-box{
	padding:0;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	position:relative;
}

main section#experiences article .textbox2 .container .pf-box{flex: 0 420px;width:420px;height:420px;}
main section#experiences article .textbox2 .container .pf-box:hover{transform:scale(1.00); transition:.3s  all;cursor:pointer;}
main section#experiences article .textbox2 .container .pf-box:hover > .pf-banner{filter: grayscale(0%);transition:.1s ease all;}
main section#experiences article .textbox2 .container .pf-box:hover > .pf-banner span{
	cursor: pointer;
}

main section#experiences article .textbox2 .container .pf-box .pf-banner{
	width:100%;
	height:100%;
	position:relative;
	max-width:420px;
	max-height:420px;
	margin:0;
	padding:0;
	z-index:2;
	background:rgba(49,45,45,.8);
}

main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(1){animation-delay: 0.0s;}
main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(2){animation-delay: 1.3s;}
main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(3){animation-delay: 2.6s;}
main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(4){animation-delay: 3.9s;}

@keyframes banner {
  0%   { opacity:1; }
  25%   { opacity:1; }
  26%   { opacity:0; }
  50%   { opacity:0; }
  75%   { opacity:0; }
  100% { opacity:0; }
}
main section#experiences article .textbox2 .container .pf-box .pf-banner span{
	width:100%;
	height:100%;
	position:absolute;
	display:block;
	max-width:420px;
	max-height:420px;
	opacity:1;
}

main section#experiences article .textbox2 .container .pf-box .pf-banner span img{
	border:0;
	width:100%;
	height:100%;
	position:relative;
	display:block;
	max-width:420px;
	max-height:420px;
 }

main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(1){
	color:#fff;
	position:absolute;
	top:0;
	left:0;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	width:100%;
	height:100%;
	font-size:30px;
}
main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(1) em.title{
	font-style: normal;
	color:#fff;
	font-size:100%;
	padding:0;
	margin:0 0 30px 0;
	width:100%;
	display:inline-block;
	text-align:center;
}
main section#experiences article .textbox2 .container .pf-box .pf-banner span:nth-of-type(1) em.more{
	font-style: normal;
	color:#fff;
	font-size:70%;
	display:block;
	padding:20px 40px 20px 40px;
	box-sizing:border-box;
}

main section#experiences article .pf-detail-box{
	display:flex;
	width:100%;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	position:relative;
	z-index:333;
	transition:.3 ease-in-out all;
}

main section#experiences article .pf-detail-box .pf-imgbox{
	margin:0;
	cursor:pointer;
	position:relative;
	aspect-ratio: 7/5;
}
main section#experiences article .pf-detail-box .pf-imgbox .noise{opacity:.25;height:auto;width:100%;aspect-ratio: 7/5;background:rgba(112,104,105,1.00)}

main section#experiences article .pf-detail-box h2{
	font-size:400%;
	color:#1a1a1a;
	position:absolute;
	display:block;
	top:8%;
	left:-0.05em;
	font-weight:400;
	line-height:1.0;
}
main section#experiences article .pf-detail-box h2 .mini-title{
	margin:0;
	padding:0 0 0 0.5em;
	display:block;
	flex-wrap:wrap;
	position:relative;
	color:#1a1a1a;
	opacity:.5;
	padding:1.5%;
	line-height:1.0;
	font-size:20%;
	font-weight:400;
}
main section#experiences article .pf-detail-box .pf-imgbox span{
	display:block;
	position:absolute;
	top:0;
	left:0;
	opacity:1.0;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	transition:.3s ease-in all;
	filter:grayscale(100%);
}
main section#experiences article .pf-detail-box .pf-imgbox.active span{animation:pf-img 6s ease infinite;filter:grayscale(0%);}
main section#experiences article .pf-detail-box .pf-imgbox span:nth-of-type(3){animation-delay: 0s;opacity:1.0;}
main section#experiences article .pf-detail-box .pf-imgbox span:nth-of-type(2){animation-delay: 2s;opacity:0;}
main section#experiences article .pf-detail-box .pf-imgbox span:nth-of-type(1){animation-delay: 4s;opacity:0;}
@keyframes pf-img{
  0%   { opacity:1;}
  16.66%   { opacity:1; }
  33.33%  { opacity:1; }
  34.33%  { opacity:0; }
  49.98%  { opacity:0; }
  66.64%  { opacity:0; }
  83.33%  { opacity:0; }
  100% { opacity:0; }
}

main section#experiences article .pf-detail-box .pf-imgbox span img{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

main section#experiences article .pf-detail-box .pf-textbox{
	flex:1;
	margin:28% 8% 0 0;
	padding:0;
	display:flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap:wrap;
}

main section#experiences article .pf-detail-box .pf-textbox .num{
	display:block;
	flex:0.4;
	font-size:500%;
	line-height:1;
	margin:-0.1em 0 0 0;
	padding:0;
	position:relative;
	color:#1a1a1a;
	letter-spacing:-0.05em;
}
main section#experiences article .pf-detail-box .pf-textbox .num em{
	display:inline-block;
	font-style:normal;
	margin:0 0 0 0;
	padding:0;
	position:relative;
	box-sizing: border-box;
}
main section#experiences article .pf-detail-box .pf-textbox .num em::before{
	content:'';
	background:#1a1a1a;
	width:100%;
	height:20px;
	display:block;
	position:absolute;
}

main section#experiences article .pf-detail-box .pf-textbox .text{
	flex:1;
	width:100%;
	height:auto;
	display:block;
	color:#1a1a1a;
	padding:0 0 0 0;
	margin:0 0 0 0;
	text-align: justify;
	hyphens: auto;
}

main section#experiences article .pf-detail-box .pf-textbox .detailbtn{
	width:100%;
	padding:0;
	margin:30px 0 0 0;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	flex-wrap:wrap;
	color:#1a1a1a;
	position:relative;
	}

main section#experiences article .pf-detail-box .pf-textbox .detailbtn span{
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width:140px;
	height:60px;
	padding:20px;
	box-sizing: border-box;
	text-align:right;
	position:relative;
	transition:.3s ease all;
	background:#1a1a1a;
	color:#ececec;
	cursor:pointer;
}

main section#experiences article .pf-detail-box .pf-textbox .detailbtn:hover > span{
	background:#1a1a1a;
	color:#ececec;
	animation:detailbtn 0.5s forwards ease-in;
}
@keyframes detailbtn{
	0%{background:#212cdc}
	30%{background:#212cdc}
	31%{background:#b10b7c}
	60%{background:#b10b7c}
	61%{background:#fbec22}
	90%{background:#fbec22;}
	91%{background:#1a1a1a}
	100%{background:#1a1a1a}
}

main section#experiences article .pf-detail-box .pf-textbox .detailbtn::before{
	content:'';
	position:absolute;
	height:2px;
	width:calc(100% - 160px);
	background:#1a1a1a;
	display:block;
	top:calc( ((100% - 2px)/2) + 1px);
	left:0;
	transition:.3s ease all;
	}
main section#experiences article .pf-detail-box .pf-textbox .detailbtn::after{
	content:'';
	position:absolute;
	border-top:2px #1a1a1a solid;
	border-right:2px #1a1a1a solid;
	width:24px;
	height:24px;
	transform:rotate(45deg);
	display:block;
	top:calc((100% - 24px)/2);
	right:163px;
	transition:.3s ease all;
}
main section#experiences article .pf-detail-box .pf-textbox .detailbtn:hover::before{
	width:calc((100% - 160px) + 10px);
}
main section#experiences article .pf-detail-box .pf-textbox .detailbtn:hover::after{
	right:153px;
}

main section#strategy article{
	height:100%;
	position:relative;
}

main section#strategy article .seo-container{
	position:relative;
	z-index:333;
	top:0;
	left:0;
	flex: 0 0 100%;
	width:100%;
	height:100%;
	box-sizing: border-box;
	display:flex;
	justify-content: flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
}

main section#strategy article .seo-container h1{
	position:relative;
	flex:0 0 100%;
	width:100%;
	display:block;
	padding:0;
	box-sizing: border-box;
	color:#1a1a1a;
	text-align:left;
}

main section#strategy article .seo-container h1 span{
	display:inline-block;
	width:auto;
	padding:0px;
	margin:0;
	top:0;
	left:0;
	color:#1a1a1a;
	position:relative;
}	
main section#strategy article .seo-container h1 span em{
	padding:0;
	font-size:100%;
	margin:0 -0.1em;
	font-style:normal;
	display:inline-block;
	animation: rotation 8s steps(20,end) infinite;
	font-family: 'Major Mono Display', monospace;
	transform-origin: center center; /* 回転の基準点 */
}
main section#strategy article .seo-container .container{
	flex: 0 0 100%;
	width:100%;
	display:flex;
	justify-content: flex-start;
	align-items:flex-start;
	align-content: flex-start;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	position:relative;
	box-sizing: border-box;
}

main section#strategy article .seo-container .container .minibox{
	width:100%;
	padding:0;
	box-sizing: border-box;
	position:relative;
	display:flex;
	justify-content: space-between;
	align-content: stretch;
	align-items: flex-start;
	flex-wrap:wrap;
}

main section#strategy article .seo-container .container .minibox .work-title{
	flex:0 0 100%;
	color:#1a1a1a;
	margin:0;
	display:flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	text-align:right;
	height:auto;
	position:relative;
	font-weight:500;
}
main section#strategy article .seo-container .container .minibox .work-title::before{
	color:#1a1a1a;
	position:absolute;
	top:-16px;
	right:0;
	display:block;
	padding:0;
	margin:0;
}
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:block;
	width:30px;
	padding:0;
	margin:0;
	top:6px;
	position:absolute;
	background:#1a1a1a;
}
main section#strategy article .seo-container .ico-c,
main section#strategy article .seo-container .ico-m,
main section#strategy article .seo-container .ico-y{height:100%;}

main section#strategy article .seo-container .ico-c{right:40px;top:0;}
main section#strategy article .seo-container .ico-y{right:0px;top:0;}
main section#strategy article .seo-container .ico-m{right:80px;top:0;}

main section#strategy article .seo-container .container .minibox .work-title em{
	display:block;
	margin:0;
	text-align:left;
	font-style:normal;
	position:relative;
	z-index:30;
	color:#1a1a1a;
	box-sizing: border-box;
	padding: 0 0 0 40px;
}


main section#strategy article .seo-container .container .minibox .textbox{
	flex:0 0 100%;
	width:100%;
	box-sizing: border-box;
	padding:0;
	margin:0;
	justify-content: flex-start;
	align-content:center;
	align-items: center;
	flex-wrap:wrap;
	display:flex;
	border-left:30px solid #1a1a1a;
	position:relative;
}
main section#strategy article .seo-container .container .minibox:nth-of-type(1) .textbox.active{
	animation:st-textbox1 0.2s linear forwards;
}
main section#strategy article .seo-container .container .minibox:nth-of-type(2) .textbox.active{
	animation:st-textbox2 0.2s linear forwards;
}
main section#strategy article .seo-container .container .minibox:nth-of-type(3) .textbox.active{
	animation:st-textbox3 0.2s linear forwards;
}
@keyframes st-textbox1{
	0%{border-color: #212cdc}
	30%{border-color: #212cdc}
	91%{border-color: #b10b7c}
	100%{border-color: #b10b7c}
}
@keyframes st-textbox2{
	0%{border-color: #b10b7c}
	30%{border-color: #b10b7c;}
	91%{border-color: #212cdc}
	100%{border-color: #212cdc}
}
@keyframes st-textbox3{
	0%{border-color: #212cdc}
	30%{border-color: #212cdc}
	91%{border-color: #fbec22}
	100%{border-color: #fbec22}
}
main section#strategy article .seo-container .container .minibox:nth-last-of-type(1) .textbox{margin:0;}


main section#strategy article .seo-container .container .minibox .textbox .textbox-container{
	flex: 0 0 100%;
	width:100%;
	padding:0;
	margin:0;
	position:relative;
}

main section#strategy article .seo-container .container .minibox .textbox .textbox-container p{
	width:100%;
	display:block;
	color:#1a1a1a;
	padding:0;
	margin:0;
	line-height:1.3;
	position:relative;
	hyphens: auto;
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay1{
	opacity:1;
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay3,
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay2{
	opacity:0;
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay1.active,
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay2.active,
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay3.active{
	animation:delay1 0.2s linear forwards;
	
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay1.active{
	animation-delay:-1s;
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay2.active{
	animation-delay:0.1s;
}
main section#strategy article .seo-container .container .minibox .textbox .textbox-container p span.delay3.active{
	animation-delay:0.2s;
}
@keyframes delay1{
	0%{opacity:0;}
	100%{opacity:1;}
}
main section#principal article h1{
	width:100%;
	height:auto;
	flex:0 0 100%;
	line-height:1.0;
	color:#1a1a1a;
	position:relative;
	padding:0;
}

main section#principal article .textbox1,
main section#principal article .textbox2,
main section#principal article .textbox3{
	flex:0 0 600px;
	width:600px;
	height:600px;
	position:relative;
	padding:30px 30px;
	box-sizing: border-box;
	color:#1a1a1a;
	margin:0
}



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 20px 0;
	margin:0  0 30px 0;
	height:auto;
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
	align-content: center;
	align-items: center;
	position:relative;
	color:#1a1a1a;
	line-height:1.0;
	z-index:333;
}

main section#principal article .textbox1 span.title em,
main section#principal article .textbox2 span.title em,
main section#principal article .textbox3 span.title em{
	display:inline-block;
	width:auto;
	padding:0;
	margin:0 auto;
	line-height:1.0;
	font-style:normal;
	letter-spacing:-0.05em;
	font-family: 'Major Mono Display', monospace;
}


main section#principal article .textbox1 .textbox-container p,
main section#principal article .textbox2 .textbox-container p,
main section#principal article .textbox3 .textbox-container p{
	width:100%;
	display:block;
	padding:0 0 0 0;
	box-sizing: border-box;
	margin:0;
	position:relative;
	color:#1a1a1a;
	text-align:left;
	hyphens: auto;
	font-weight:300;
}
@keyframes satelite{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@keyframes satelite2{
	0%{transform: rotate(0);}
	100%{transform: rotate(-360deg);}
}

main section#about{
	position:relative;
	background:#ececec;
	padding:0;
	margin:0;
}

main section#about article{
	box-sizing: border-box;
	margin:0;
	width:100%;
}
main section#about article .about-grid-mob-container{
	display:grid;
	position:relative;
	width:100%;
	height:100%;
	max-width:90vw;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(7, 1fr); 
	background:#1a1a1a;
	gap: 2px;
	box-sizing: border-box;
	border:2px solid #1a1a1a;
}

main section#about article .about-grid-mob-container > div{
	background:#ececec;
	overflow:hidden;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	width:100%;
	height:100%;
}
main section#about article .about-grid-mob-container > div:nth-of-type(1){
	grid-column-start: 1;
  	grid-column-end:4;
	grid-row-end: span 2;	
	background:#1a1a1a;
	aspect-ratio: 3/2;
}
main section#about article .about-grid-mob-container div:nth-of-type(1) h1{
	line-height:1.0;
	width:100%;
	height:100%;
	position:relative;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
}
main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span{
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	width:100%;
	height:50%;
	color:#ececec;
	text-align:center;
	line-height:0.6;
	font-family: 'Major Mono Display', monospace;
	letter-spacing:-0.1em;
	margin:-0.05em -0.1em 0 -0.1em;
}
main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span em:nth-of-type(1){
	font-family: 'Major Mono Display', monospace;
	font-style:normal;
	letter-spacing:-1em;
	font-size:100%;
	position:relative;
	left:-50px;
	top:-4px;
}
main section#about article .about-grid-mob-container div:nth-of-type(1) h1 span em:nth-of-type(2){
	font-family: 'Major Mono Display', monospace;
	font-style:normal;
	font-size:100%;
}
main section#about article .about-grid-mob-container div:nth-of-type(2) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#b10b7c;
	transition: transform 0.8s;
	animation: flip-red-yellow 20s ease infinite;
}
main section#about article .about-grid-mob-container > div:nth-of-type(3){
	grid-column-start: 2;
  	grid-column-end:4;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	padding:25px;
	position:relative;
}
main section#about article .about-grid-mob-container > div:nth-of-type(3) span{
	text-align:center;
}
main section#about article .about-grid-mob-container > div:nth-of-type(3) em{
	width:auto;
	font-style:normal;
	text-align:center;
	margin:0 0 20px 0;
}
main section#about article .about-grid-mob-container div:nth-of-type(6) {
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width:100%;
	height:100%;
	margin:0;
	padding:0
}
main section#about article .about-grid-mob-container div:nth-of-type(5) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#fbec22;
	transition: transform 0.8s;
	animation: flip-yellow-blue 20s ease infinite;
}
main section#about article .about-grid-mob-container div:nth-of-type(7) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#b10b7c;
	transition: transform 0.8s;
	animation: flip-blue-red 20s ease infinite;
}
main section#about article .about-grid-mob-container div:nth-of-type(9) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	border:20px solid #1a1a1a;
	animation: rotation-panel 20s ease infinite;
}
main section#about article .about-grid-mob-container > div:nth-of-type(11){
	grid-column-start: 2;
  	grid-column-end:4;
	grid-row-end: span 2;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
}
main section#about article .about-grid-mob-container > div:nth-of-type(11) span{
	letter-spacing:-0.05em;
	line-height:1.5;
	padding:25px;
	display:flex;
}
main section#about article .about-grid-mob-container div:nth-of-type(12) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0px;
	border-radius:50%;
	position:relative;
	box-sizing: border-box;
	display:block;
	background:#1a1a1a;
	animation: translate-circle 20s ease infinite;
}


main section#about article .about-grid-container{
	display:grid;
	width:100%;
	max-width:90vw;
	grid-template-columns: repeat(8, 1fr); 
	grid-template-rows: repeat(4, 1fr); 
	background:#1a1a1a;
	gap: 2px;
	box-sizing: border-box;
	border:2px solid #1a1a1a;
}
main section#about article .about-grid-container > div{
	aspect-ratio: 1 / 1;
	background:#ececec;
	overflow:hidden;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	width:100%;
	height:100%;
}
main section#about article .about-grid-container div:nth-of-type(1){
	aspect-ratio: 3 / 2;
	grid-column-start: 1;
  	grid-column-end:4;
	grid-row-end: span 2;
	border-bottom:1px solid #1a1a1a;
	background:#1a1a1a;
	color:#ececec;
	padding:0;
	display:block;
}

main section#about article .about-grid-container div:nth-of-type(1) h1{
	line-height:1.0;
	width:100%;
	height:100%;
	position:relative;
	left:-0.1em;
	top:0;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
}
main section#about article .about-grid-container div:nth-of-type(1) h1 span{
	display:block;
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:50%;
	text-align:center;
	line-height:1.0;
	font-family: 'Major Mono Display', monospace;
	letter-spacing:-0.1em;
}
main section#about article .about-grid-container div:nth-of-type(1) h1 span em:nth-of-type(1){
	font-family: 'Major Mono Display', monospace;
	font-style:normal;
	letter-spacing:-1em;
	font-size:100%;
	position:relative;
	left:-50px;
	top:-4px;
}
main section#about article .about-grid-container div:nth-of-type(1) h1 span em:nth-of-type(2){
	font-family: 'Major Mono Display', monospace;
	font-style:normal;
	font-size:100%;
}
main section#about article .about-grid-container div:nth-of-type(3) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0px;
	border-radius:50%;
	position:relative;
	box-sizing: border-box;
	display:block;
	background:#1a1a1a;
	animation: translate-circle 20s ease infinite;
}
@keyframes translate-circle{
	0%{transform:rotateY(0deg);}
	45%{transform:rotateY(0deg);}
	50%{transform:rotateY(0deg);}
	60%{transform:rotateY(180deg);}
	70%{transform:rotateY(180deg);}
	100%{transform:rotateY(180deg);}
}
@keyframes rotation-panel{
	0%{width:100%;height:100%;transform:rotate(0deg);}
	45%{width:100%;height:100%;transform:rotate(0deg);}
	50%{width:60%;height:60%;transform:rotate(0deg);}
	55%{width:60%;height:60%;transform:rotate(180deg);}
	60%{width:100%;height:100%;transform:rotate(0deg);}
	100%{width:100%;height:100%;transform:rotate(0deg);}
}
@keyframes flip-blue-red{
	0%{background:#212cdc;}
	10%{background:#212cdc;}
	10.5%{background:#fbec22;}
	11.0%{background:#b10b7c;}
	70%{background:#b10b7c;}
	70.5%{background:#fbec22;}
	71.0%{background:#212cdc;}
	100%{background:#212cdc;}
}
@keyframes flip-blue-yellow{
	0%{background:#212cdc;}
	30%{background:#212cdc;}
	30.5%{background:#b10b7c;}
	31.0%{background:#fbec22;}
	60%{background:#fbec22;}
	80%{background:#fbec22;}
	80.5%{background:#b10b7c;}
	81.0%{background:#212cdc;}
	100%{background:#212cdc;}
}
@keyframes flip-red-yellow{
	0%{background:#b10b7c;}
	40%{background:#b10b7c;}
	40.5%{background:#212cdc;}
	41.0%{background:#fbec22;}
	90%{background:#fbec22;}
	90.5%{background:#212cdc;}
	91.0%{background:#b10b7c;}
	100%{background:#b10b7c;}
}
@keyframes flip-red-blue{
	0%{background:#b10b7c;}
	25%{background:#b10b7c;}
	25.5%{background:#fbec22;}
	26.0%{background:#212cdc;}
	70%{background:#212cdc;}
	70.5%{background:#fbec22;}
	71.0%{background:#b10b7c;}
	100%{background:#b10b7c;}
}
@keyframes flip-yellow-blue{
	0%{background:#fbec22;}
	15%{background:#fbec22;}
	15.5%{background:#212cdc;}
	50%{background:#212cdc;}
	50.5%{background:#fbec22;}
	100%{background:#fbec22;}
}
@keyframes flip-yellow-red{
	0%{background:#fbec22;}
	35%{background:#fbec22;}
	35.5%{background:#b10b7c;}
	80%{background:#b10b7c;}
	80.5%{background:#fbec22;}
	100%{background:#fbec22;}
}

main section#about article .about-grid-container div:nth-of-type(6) em{
	margin:0;
	padding:0;
	display:inline-block;
	transition: transform 0.8s;
	font-weight:600;
	font-style:normal;
	transform:rotate(45deg);
	font-family: 'Major Mono Display', monospace;
	letter-spacing:0em;
}
main section#about article .about-grid-container div:nth-of-type(7) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#fbec22;
	transition: transform 0.8s;
	animation: flip-yellow-blue 20s ease infinite;
	
}
main section#about article .about-grid-container div:nth-of-type(11) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#fbec22;
	transition: transform 0.8s;
	animation: flip-blue-yellow 20s ease infinite;
}
main section#about article .about-grid-container div:nth-of-type(13) span{
	background:#1a1a1a;
}
main section#about article .about-grid-container div:nth-of-type(16){background:#1a1a1a;}
main section#about article .about-grid-container div:nth-of-type(16) span.copy{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	background:#1a1a1a;
	color:#ececec;
	opacity:0;
}
main section#about article .about-grid-container div:nth-of-type(19) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#b10b7c;
	transition: transform 0.8s;
	animation: flip-yellow-red 20s ease infinite;
}

main section#about article .about-grid-container div:nth-of-type(21) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0;
	left:0;
	display:block;
	position:relative;
	transition: transform 0.8s;
	border:20px solid #1a1a1a;
	animation: rotation-panel 20s ease infinite;
}
main section#about article .about-grid-container div:nth-of-type(23) span{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	background:#212cdc;
	transition: transform 0.8s;
	animation: flip-red-yellow 20s ease infinite;
}
main section#about article .about-grid-container div.email{
	aspect-ratio: 2 / 1;
	grid-column-start: 6;
  	grid-column-end: 8;
	background:#1a1a1a;
	border-bottom:1px solid #1a1a1a;
	color:#ececec;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	letter-spacing:0.05em;
	position:relative;
}
main section#about article .about-grid-container div.email span,
main section#about article .about-grid-container div.email em{
	text-align:left;
	font-style:normal;
	display:inline-block;
	letter-spacing:0.025em;
	width:100%;
	margin:0 0 0.5em 0;
}
main section#about article .about-grid-container div.email em{	font-size:150%;	letter-spacing:0.025em;}
main section#about article .about-grid-container div.comment{
	box-sizing: border-box;
	color:#1a1a1a;
	aspect-ratio: 1/1;
	grid-column-start: 4;
  	grid-column-end:6;
	grid-row-end: span 2;
	hyphens: auto;
	display:flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding:50px;

}

footer{
	display:block;
	border-top:2px solid #1a1a1a;
	width:100%;
	box-sizing: border-box;
	background:#ececec;
}
footer .footer-container{
	width:90vw;
	padding:50px 0;
	margin:0 auto;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	position:relative;
	background:#ececec;
}
footer .footer-btn-container{
	position:absolute;
	display:flex;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
	flex-wrap:wrap;
	bottom:30px;
	left:0;
	width:100%;
	height:50px;
	padding:0 120px 0 0;
	margin:0;
}
footer .footer-btn-container a{
	display:flex;
	justify-content: center;
	align-items: center;
	position:relative;
	margin:0;
	width:150px;
	height:50px;
	padding:8px;
	box-sizing: border-box;
	color:#1a1a1a;
	letter-spacing:0.05em;
	text-decoration: none;
	transition:.3s ease all;
	font-size:150%;
}
footer .footer-btn-container a:hover{
	background:#1a1a1a;
	color:#ececec;
}

footer .footer-container p.copywrite{
	font-size:200%;
}
footer .footer-container p.copywrite em{
	font-style:normal;
	font-size:50%;
}
footer .footer-container .btn{
	width:90px;
	height:130px;
	position:relative;
	display:block;
	bottom:0;
}
footer .footer-container .btn a{
	position:absolute;
	cursor:pointer;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	z-index:999;
}
footer .footer-container .btn .btn-container{
	width:100%;
	height:100px;
	display:flex;
	align-content:space-around;
	align-items: flex-end;
	justify-content: center;
	flex-wrap:wrap;
	bottom:0;
	transition:0.3s ease-in-out all;
}
footer .footer-container .btn:hover > .btn-container{
	padding-top:30px;
}
footer .footer-container .btn p{
	width:100%;
	height:50px;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	color:#ececec;
	background:#1a1a1a;
	line-height:1;
	letter-spacing:0.05em;
	font-size:150%;
	padding:8px;
}
footer .footer-container .btn .btn-container > span{
	flex:0 0 100%;
	height:20px;
	display:block;
	position:relative;
	border:2px solid #1a1a1a;
	margin:-20px 0 0 0;
	padding:0;
	bottom:0px;
	border-radius:50%;
}
/* The Modal (background) */
.modal{
	/* Hidden by default */
	display:none;
	position: fixed; /* Stay in place */
	z-index: 99999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	transform: translateY(0%);
	padding:0;
	margin:0;
	border:0px solid #1a1a1a;box-sizing: border-box;
}

.modal-slide {
	animation: modalin 0.3s ease forwards;
}
@keyframes modalin {
	from{
		opacity:1.0;
		transform: translateY(-100%) skew(0deg,0deg);
	}
	to{
		opacity:1.0;
		transform: translateY(0%) skew(0deg,0deg);
	}
}
.modal iframe{
	width:100%;
	height:100%;
	box-sizing: border-box;
	padding:0;
	margin:0;
	position:absolute;
	top:0px;
	left:0;
	border:0;
}
/* Modal Content/Box */

aside.pf-menu{
	display:block;
	position:fixed;
	top:0;
	right:0;
	background:#000;
	width:200px;
	height:100%;
	z-index:999;
	padding:5% 2.5% 5% 2.5%;
	margin:0;
	box-sizing: border-box;
	animation-delay:2s;
	opacity:0;
	transform:translateX(100%);
}
aside.animation{animation: pf-menu 0.3s ease forwards;}
@keyframes pf-menu {
	0%{transform:translateX(100%); opacity:0;}
	100%{transform:translateX(0%); opacity:1;}
}
aside.pf-menu .pf-menu-container{
	position:relative;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap:wrap;
	padding:0;
	margin:0;
}
aside.pf-menu .pf-menu-container .pf-menu-sns{
	display:flex;
	width:100px;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	position:relative;
}
aside.pf-menu .pf-menu-container .pf-menu-sns a{
	flex:0 0 26px;
	height:26px;
	display:block;
	padding:0;
	margin:0;
}
aside.pf-menu .pf-menu-container .pf-menu-sns a img{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
aside.pf-menu .pf-menu-container .pf-menu-thumbnail{
	width:100px;
	height:71px;
	margin:0 0 50px 0;
	padding:0;
	position:relative;
}
aside.pf-menu .pf-menu-container .pf-menu-thumbnail::before{
	content:'';
	position:absolute;
	display:block;
	top:-10px;
	left:-10px;
	width:calc(100% + 20px);
	height:calc(100% + 20px);
	transition:.2s ease all;
	border:0 solid #fff;
	z-index:333;
	padding:0;
	box-sizing: border-box;
	background:rgba(0,0,0,0.3);
	}
aside.pf-menu .pf-menu-container .selected::before{
		background:rgba(0,0,0,0) !important;
		border:3px solid #fff;
}

aside.pf-menu .pf-menu-container .pf-menu-thumbnail:hover::before{
	display:block;
	top:-10px;
	left:-10px;
	width:calc(100% + 20px);
	height:calc(100% + 20px);
	border:3px solid #fff;
	box-sizing: border-box;
	background:rgba(0,0,0,0);
}
aside.pf-menu .pf-menu-container .pf-menu-thumbnail img{
	position:relative;
	width:100%;
	height:100%;
}
aside.pf-menu .pf-menu-container .pf-menu-thumbnail a{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:333;
}
.modal-content {
  background: #000;
  margin: 0; 
  padding: 5% calc(200px + 5%) 5% 5% !important;
  width: 100%; /* Could be more or less, depending on screen size */
  position:relative;
}

.modal-content .dentasmile{
	background: #35393f;
}

/* The Close Button */
.modal .close-detail2,
.modal .close-detail3,
.modal .close-detail5,
.modal .close-detail1,
.modal .close1,
.modal .close2,
.modal .close3,
.modal .close5{
	display:block;
	position:fixed;
	top:25px;
	width:50px;
	height:50px;
	margin:0;
	padding:0;
	box-sizing: border-box;
	border-radius:50%;
	border:2px solid #fff;
	z-index:99999;
	transition: .3s ease all;
	mix-blend-mode: difference;
	filter: grayscale(100%);
}
	.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;
	}
.modal .close-detail5 span.line,
.modal .close-detail2 span.line,
.modal .close-detail3 span.line,
.modal .close-detail1 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{
	display:block;
	position:absolute;
	top:calc((100% - 3px)/2);
	left:15%;
	width:70%;
	height:3px;
	background:#1a1a1a;
	transform:rotate(-45deg);
	mix-blend-mode:difference;
	filter: grayscale(1);

}
.modal .close-detail5 span.line:first-child,
.modal .close-detail2 span.line:first-child,
.modal .close-detail3 span.line:first-child,
.modal .close-detail1 span.line:first-child,
.modal .close1 span.line:first-child,
.modal .close5 span.line:first-child,
.modal .close4 span.line:first-child,
.modal .close3 span.line:first-child,
.modal .close2 span.line:first-child,
.modal .close span.line:first-child{
	transform:rotate(-45deg);
}
.modal .close-detail5 span.line:last-child,
.modal .close-detail2 span.line:last-child,
.modal .close-detail3 span.line:last-child,
.modal .close-detail1 span.line:last-child,
.modal .close1 span.line:last-child,
.modal .close5 span.line:last-child,
.modal .close4 span.line:last-child,
.modal .close3 span.line:last-child,
.modal .close2 span.line:last-child,
.modal .close span.line:last-child{
	transform:rotate(45deg);
}

.modal-footer{
	height:100%;
	min-height:40vh;
	background:#000;
	margin:0;
	padding:5% calc(200px + 5%) 5% 5%;
	box-sizing: border-box;
	width:100%;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
	flex-wrap:wrap;
	position:relative;
	color:#fff;
}
.modal-footer .modal-footer-contact{
	width:100%;
	flex: 0 0 100%;
	padding:0;
	margin:0 0 50px 0;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
	flex-wrap:wrap;
	position:relative;
	color:#fff;
}
.modal-contact{
	width:100%;
	height:auto;
	min-height:100vh;
	background:#000;
	display:flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	position:relative;
	margin:0;
	padding:5% calc(200px + 5%) 5% 5%;
	box-sizing: border-box;
}
.modal-contact-center{
	align-content: center !important;
	align-items: center !important;
}
.modal-contact .modal-contact-container{
	width:100%;
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.modal-contact span.title{
	display:inline-block;
	padding:0px;
	margin:0 0 30px 0;
	font-size:90px;
	color:#fff;
	line-height:1.0;
}
.modal-contact #submittedmsg{
	color:#fff !important;
	font-size:100%;
	text-align:center;
	width:100%;
	display:inline-block;
}
.modal-contact .modal-contact-container form{
	display:flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap:wrap;
	margin:0 auto;
	padding:0 0 5% 0;
	width:60%;
	position:relative;
	box-sizing: border-box;
}
.modal-contact .modal-contact-container form .mailform-submit,
.modal-contact .modal-contact-container form .mailform-mailaddress,
.modal-contact .modal-contact-container form .mailform-name,
.modal-contact .modal-contact-container form .mailform-message{
	flex: 0 0 100%;
	width:100%;
	position:relative;
	box-sizing: border-box;
}
.modal-contact .modal-contact-container form .mailform-submit input,
.modal-contact .modal-contact-container form .mailform-name input,
.modal-contact .modal-contact-container form .mailform-mailaddress input{
	background:#000;
	border:0;
	border-bottom:3px solid #fff;
	border-radius:0;
	width:100%;
	height:40px;
	color:#fff;
	-webkit-appearance: none !important;
	appearance: none;
	outline:none;
	box-sizing: border-box;
}

.modal-contact .modal-contact-container form .mailform-submit input{
	width:200px;
	height:70px;
	border:3px solid #fff;
	margin:0 0 0 0;
	box-sizing: border-box;
	display:none;
}
.modal-contact .modal-contact-container form .mailform-submit label{
	color:#fff;
	font-size:150%;
	border:3px solid #fff;
	font-weight:bold;
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:70px;
	display:flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	cursor:pointer;
}
.modal-contact .modal-contact-container form .mailform-name input{
	margin:0 0 25px 0;
}
.modal-contact .modal-contact-container form .mailform-mailaddress input{
	margin:0 0 50px 0;
}
.modal-contact .modal-contact-container form .mailform-message textarea{
	background:#000;
	border:#fff 3px solid;
	width:100%;
	height:250px;
	resize:none;
	border-radius: 0;
	focus:none;
	color:#fff;
	-webkit-appearance: none !important;
	appearance: none;
	outline:none;
	margin: 0 auto 25px auto;
}
.modal-contact .modal-contact-container form .mailform-message textarea:focus{
	outline: none;
}
.modal-footer span.contact{
	display:inline-block;
	padding:10px;
	margin:0 0 30px 0;
	font-size:90px;
	color:#fff;
	line-height:1.0;
}
.modal-footer span.more{
	display:inline-block;
	padding:10px;
	margin:0 0 30px 0;
	font-size:90px;
	color:#fff;
	line-height:1.0;
}
.modal-footer::before{
	content:'';
	width:100%;
	height:52px;
	top:-50px;
	left:0;
	display:block;
	background:#000;
	position:absolute;
}


.modal-container{
	display:flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	position:relative;
	top:0px;
	z-index:10;
}


.modal-container .modal-garalley{
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
	padding:0;
	margin:0;
	box-sizing: border-box;
}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box,
.modal-container .modal-garalley .modal-garalley-box{
	flex: 0 0 100%;
	width:100%;
	padding:0px;
	margin:0px;
	border:0;
	box-sizing: border-box;
	position:relative;
	z-index:20;
}
.modal-container .modal-garalley .modal-garalley-box .video-responsive{
    overflow:hidden;
    position:relative;
    height:0;
}
.modal-container .modal-garalley .modal-garalley-box .video-responsive-dentasmile{    padding-bottom:75.08%;}
.modal-container .modal-garalley .modal-garalley-box .video-responsive-ecobud{    padding-bottom:58.63%;}
.modal-container .modal-garalley .modal-garalley-box .video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box{
	position:absolute !important;
	top:0;
	left:0;
	width:100%;
	margin:0;
	padding:0;
}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box span{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	animation: pf-slider 6s infinite linear;
	margin:0;
	padding:0;
	opacity:0;
}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box span:nth-of-type(1){animation-delay: 0s;}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box span:nth-of-type(2){animation-delay: 2s;}
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box span:nth-of-type(3){animation-delay: 4s;}

@keyframes pf-slider {
  0%   { opacity:1;}
  16.65%   { opacity:1; }
  16.66%   { opacity:1; }
  33.32%  { opacity:1; }
  33.33%  { opacity:0; }
  49.98%  { opacity:0; }
  100% { opacity:0; }
}

.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box img,
.modal-container .modal-garalley .modal-garalley-box .modal-garalley-slide-box span img,
.modal-container .modal-garalley .modal-garalley-box img{
	margin:0;
	padding:0;
	box-sizing: border-box;
	border:0;
	width:100%;
	height:auto;
	display:block;
}

.modal-container .modal-garalley .modal-garalley-box　iframe{
	width:100%;
	height:auto;
}
.modal-container .modal-garalley .modal-garalley-box img{
	margin:0;
	padding:0;
	box-sizing: border-box;
	border:0;
	width:100%;
	height:auto;
	display:block;
}

.modal-container .modal-garalley-box img{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}

/* width */
.modal::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.modal::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
.modal::-webkit-scrollbar-thumb {
  background: #1a1a1a;
}

/* Handle on hover */
.modal::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a;
}

.rain-gray,
.rain {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 9998;
	will-change:transform;
}
.rain {  animation: rain 5s linear infinite;}
@keyframes rain {
  0%   { opacity:0; }
  10%   { opacity:1; }
  15%  { opacity:1; }
  25%  { opacity:0; }
  40%  { opacity:1; }
  50%  { opacity:1; }
  60%  { opacity:0; }
  100% { opacity:0; }
}

.rain-gray.back-row,
.rain.back-row {
  display: none;
  z-index: 9999;
  bottom: 0px;
  opacity: 1;
	will-change:transform;
}

.drop-gray,
.drop {
  position: absolute;
  top:0;
  width: 15px;
  height: 80px;
  pointer-events: none;
  animation: drop 3.5s linear infinite;
	will-change:transform;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.stem,
.stem-gray{
  width: 1px;
  height: 100%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.2), rgba(26, 26, 26, 1.0));
  animation: stem 1s linear infinite;
	will-change:transform;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#mob-slide{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100%;
	background:#fff;
	z-index:9999;
	opacity:0;
	display:none;
	overflow:hidden;
}
.mob-slide-animation{
	animation: mob-slide-animation 0.5s linear forwards;
}
.mob-slide-close-animation{
	animation: mob-slide-close-animation 0.3s linear forwards;
}
@keyframes mob-slide-animation{
  0% {
    opacity:0;
  }
  100% {
    opacity:1.0;

  }
}
@keyframes mob-slide-close-animation{
  0% {
    opacity:1.0;
  }
  100% {
    opacity:0;
  }
}
#mob-slide-btn{
	top:0px;
	left:0px;
	display:flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	position:fixed;
	z-index:9999;
	cursor:pointer;
	box-sizing: border-box;
}
#mob-slide-btn:hover{
	background:#1a1a1a;	
}
#mob-slide-btn .hamburger{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	box-sizing: border-box;
	display:block;
	position:relative;
	cursor:pointer;
	box-sizing: border-box;
}


#mob-slide-btn:hover > .hamburger .line-hamburger{
	background:#fff;
}
#mob-slide-btn .hamburger .line-hamburger {
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background:#1a1a1a;
	left: 0;
	transition:.3s all ease;
}
#mob-slide-btn .hamburger .line-hamburger:nth-of-type(1) {
	top: 3px;
}
#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: 3px;
}

#mob-slide-close-btn{
	top:0;
	left:0;
	display:block;
	position:absolute;
	z-index:9999;
	cursor:pointer;
	transition:.2s all ease;
}
#mob-slide-close-btn:hover{
	background:#1a1a1a;
}
#mob-slide-close-btn:hover > .hamburger .line-hamburger{
	background:#ececec;
}
#mob-slide-close-btn .hamburger{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	box-sizing: border-box;
	display:block;
	position:relative;
	cursor:pointer;
	z-index:9999;
}


#mob-slide-close-btn .hamburger .line-hamburger {
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background:#1a1a1a;
	left: 0;
	transition:.3s all ease;
}
#mob-slide-close-btn .hamburger .line-hamburger:first-child {
	transform: rotate(-45deg);
	top: calc((100% - 2px)/2);
}
#mob-slide-close-btn .hamburger .line-hamburger:last-child {
	transform: rotate(45deg);
	top: calc((100% - 2px)/2);
}
.mob-slide-container {
	width: 100%;
	height:100%;
	margin: 0;
	box-sizing: border-box;
	padding: 0px 0px 0px 20px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	top:0;
	left:0;
	overflow-x:hidden;
	overflow-y:auto;
	background:#ececec;
}

.mob-slide-container ul{
	width: 90vw;
	height: 90vh;
	margin: 0 0 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	list-style-position: inside;
	position:relative;
}

.mob-slide-container ul.category li {
	flex: 0 0 100%;
	width: 100%;
	height: auto;
	padding:0px 0 10px 0px;
	margin:0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#1a1a1a;
	position:relative;
	letter-spacing:0.15em;
	font-family: 'Major Mono Display', monospace;
	transition: .2s ease all;
}
.mob-slide-container ul.category li:nth-of-type(1),
.mob-slide-container ul.category li:nth-of-type(2),
.mob-slide-container ul.category li:nth-of-type(3),
.mob-slide-container ul.category li:nth-of-type(4){
	background:#ececec;
	color:#1a1a1a;
}
.mob-slide-container ul.category li:nth-of-type(1):hover{	background:#ba007c;}
.mob-slide-container ul.category li:nth-of-type(2):hover{	background:#212cdc;}
.mob-slide-container ul.category li:nth-of-type(3):hover{	background:#feee00;}
.mob-slide-container ul.category li:nth-of-type(4):hover{	background:#1a1a1a;}
.mob-slide-container ul.category li:nth-of-type(1):hover > a{	color:#1a1a1a;}
.mob-slide-container ul.category li:nth-of-type(2):hover > a{	color:#1a1a1a;}
.mob-slide-container ul.category li:nth-of-type(3):hover > a{	color:#1a1a1a;}
.mob-slide-container ul.category li:nth-of-type(4):hover > a{	color:#ececec;}

.mob-slide-container ul.category li:nth-of-type(4){
	margin:0 0 30px 0;
}
.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{
	position:relative;
	margin:0 0 0 10px;
	display:inline-block;
	width:4.2vw;
	height:4.2vw;
	border:4px solid #1a1a1a;
	border-width:4px 4px 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{
	content:'';
	width:140%;
	height:4px;
	display:block;
	position:absolute;
	background:#1a1a1a;
	transform:rotate(-45deg);
	top:calc(((100% - 4px)/2));
	left:-20%;
}
.mob-slide-container ul li a{
	display:inline-block;
	text-decoration:none;
	font-size:100%;
	color:#1a1a1a;
	letter-spacing:0.15em;
}



.mob-slide-container::-webkit-scrollbar{
    width: 6px;
}
.mob-slide-container::-webkit-scrollbar-track {
	background:rgba(255,255,255,1);
}
.mob-slide-container::-webkit-scrollbar-thumb {
	background: #1a1a1a;
}