@charset "UTF-8";
/* CSS Document */

html {
	font-family: "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.full {
	width: 100vw;
	height: 100vh;
}

#about {
	width: 100vw;
	height: 90vh;
}

.flexcenter {
	display: flex;
	align-items: center;	
}
.flex1 {
	flex: 1;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
	letter-spacing: 0.1em;
	color: #000;
}

.title {
	font-size: 25vmin;
	text-align: right;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
@media (min-width: 1080px) {
  .title { font-size: 30vmin; }
}

.logo {
	position: fixed;
	left: 1.5rem;
	top: 1.5rem;
}

.down {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
}
.down p {
	margin-block-start: 0.1em;
    margin-block-end: 0.1em;
}

.uk-container h2 {
	font-size: .875rem;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.uk-description-list>dt {
	float:left;
	font-size: .8rem;
	line-height: 2.4;
	letter-spacing: 0.1em;
	color: #000;
}
.uk-description-list>dt:nth-child(n+2) {
	margin-top: 0;
}
.uk-description-list>dd {
	margin-left: 9rem;
	font-size: .8rem;
	line-height: 2.4;
	letter-spacing: 0.1em;
	color: #000;
}
@media (min-width: 640px) {
  .uk-description-list>dd { margin-left: 12rem; }
}

.uk-link, a {
	text-decoration: underline;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #666;
}

footer {
	width: 100vw;
	height: 10vh;
	text-align: center;
}

footer p small {
	font-size: 70%;
	letter-spacing: 0.1em;
	color: #000;
}


/* Title Blur and Transition
---------------------------------------- */
.blur {
	filter: blur(10px);
	transition: 1s;
	-webkit-transition: transform all 1s;
	-webkit-transition: -webkit-transform all 1s;
	/* mix-blend-mode: luminosity; */
	/* mix-blend-mode: overlay; */
	/* mix-blend-mode: lighten; */
}
@media (min-width: 640px) {
  .blur { filter: blur(20px); }
}
.blur:hover {
	filter: blur(0px);
}


/* Title Gradation CODE
---------------------------------------- */
.gradientTX1 {
	background-image: linear-gradient(135deg, #000 0%, #666 100%);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	color: transparent;
	animation: gradAni 3s linear infinite;
}

.gradientTX2 {
	background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	color: transparent;
	animation: gradAni 3s linear infinite;
}

@keyframes gradAni {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.gradientTX3 {
	background-image: linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%);
	background-size: 100% 200%;
	-webkit-background-clip: text;
	color: transparent;
	animation: gradAni2 3s linear infinite;
}
@keyframes gradAni2 {
  from {
    background-position: 0 200%;
  }
  to {
    background-position: 0 0;
  }
}

.gradientTX4, .gradientTX5 {
	position: relative;
	background: white;
	color: black;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.gradientTX4:before, .gradientTX5:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	filter: blur(20px);
	mix-blend-mode: screen;
	animation: ptrnAni 8s linear infinite alternate;
	background-size: 3em 3em, 2em 2em;
}

.gradientTX4:before {
	/* background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, orange 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, pink 1em, #571B3D 50%); */
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #e5b2ca 50%), repeating-linear-gradient(45deg, #13547a, #13547a 1em, pink 1em, #28a9ae 50%);
}

.gradientTX5:before {
	background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}

@keyframes ptrnAni {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400% 0;
  }
}

.gradientTX6, 
.gradientTX7, 
.gradientTX8, 
.gradientTX9, 
.gradientTX10 {
	background-size: auto 100%;
	-webkit-background-clip: text;
	color: transparent;
	animation: bg-slider 15s linear infinite;
}
.gradientTX6 {
	background-image: url("../img/6.jpg");
}
.gradientTX7 {
	background-image: url("../img/7.jpg");
}
.gradientTX8 {
	background-image: url("../img/8.jpg");
}
.gradientTX9 {
	background-image: url("../img/9.jpg");
}
.gradientTX10 {
	background-image: url("../img/10.jpg");
}

.gradientTX11,
.gradientTX12 {
	background-size: auto 100%;
	-webkit-background-clip: text;
	color: transparent;
	animation: bg-slider 20s linear infinite;
}
.gradientTX11 {
	background-image: url("../img/11.png");
}
.gradientTX12 {
	background-image: url("../img/12.png");
}

@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: 1000% 0; }
}

.gradientTX13 {
	color: blue;
}

/* Background Gradation CODE
---------------------------------------- */
.gradientBG1 {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	background-size: 300% 300%;
	animation: gradientBG 10s linear infinite alternate;
}
.gradientBG2 {
	background: linear-gradient(135deg, #e05252 20%, #99e052 35%, #52e0e0 50%, #9952e0 65%, #e05252 80%);
	background-size: 300% 300%;
	animation: gradientBG 10s linear infinite alternate;
}
@keyframes gradientBG {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

.gradientBG13 {
	background-color: red;

	/* Reverse */
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
	transform: matrix(-1, 0, 0, 1, 0, 0);
	filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);

}
.gradientBG13 h2,
.gradientBG13 p,
.gradientBG13 a,
.gradientBG13 small,
.gradientBG13 dt,
.gradientBG13 dd {
	color: blue;
}
.gradientBG13 .st0 {
	stroke: currentColor;
}