@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
html,
body {
	padding: 0;
	margin: 0;

}
body::before {
	content: "";
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2
	
}
img,video,svg {
	width: 100%;
	border:none;
}
ul,li {
	list-style: none;
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: #000;
}
h1,h2,h3,p {
	padding: 0;
	margin: 0;
	font-weight: 300;
}

#cl_wrap {
	position: relative;
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
}

.section {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	overflow: hidden;
}
.section h1 {
	width: 100%;
	padding: 12% 5%;
	position: relative;
	z-index: 10
}

.section .look {
	background: #FFF;
	position: relative;
	padding-bottom: 3vw;
}
.section .box {
	position: relative;
	margin: 0 auto 10vw;
}
.section:nth-of-type(1) .box:nth-of-type(1) {
	margin: 0 auto;
}
.section {
	position: relative;
}
.section .img {
	position: relative;
	line-height: 0;
	box-sizing: border-box;
}

.section .top_title {
	position: relative;
	margin-top: 10%;
	left: 5%;
	color: #000;
	transform: translate(0%,-50%) scale(0.88, 1);
	transform-origin: left center;
	text-align: center;
	line-height: 1.8;
}

.section .top_title a {
	margin-top: 4%;
	text-decoration: underline;
	line-height: 3.0;
}

.section .top_title a:hover {
	margin-top: 4%;
	text-decoration: none;
}


.section:nth-of-type(3) .top_title {
	color: #000;
	left: 10%
}
.section .box .title {
	margin: 0 auto;
		padding: 2% 0 3%
}


.section .box .title h1 {
	font-size: 8vw;
	transform: scale(0.85, 1);
	transform-origin: center center;
	text-align: center;
	letter-spacing: 2px;
	margin: 5% auto 3%;
	padding: 0;
}
.section .box .title h1::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section:nth-of-type(2) .box .title h1::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 50%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section:nth-of-type(2) .box .title h1::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 50%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section .box .title.ac h1::before,.section .box .title.ac h1::after{
	left: 100%;
}
.section .box .title.ac h1::after{
	transition-delay: 0.5s
}




.section .box .title h2 {
	font-size: 10vw;
	transform: scale(0.85, 1);
	transform-origin: center center;
	text-align: center;
	letter-spacing: 2px;
	margin: 1% auto 0;
	padding: 0;
}
.section .box .title h2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section:nth-of-type(2) .box .title h2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 50%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section:nth-of-type(2) .box .title h2::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFF;
	width: 100%;
	height: 50%;
	z-index: 10;
	transition: 0.8s all 0s ease;
}
.section .box .title.ac h2::before,.section .box .title.ac h2::after{
	left: 100%;
}
.section .box .title.ac h2::after{
	transition-delay: 0.5s
}
.section .box .list a,.section .box .list p {
	font-size: 2.6vw;
	display: block;
	color: #000;
	text-decoration: none;
	line-height: 2.6;
	transform: scale(0.85, 1);
	transform-origin: left center;
}

@media only screen and (min-width: 769px)  {
	.section .box .thema {
		font-size: 20px;
	}
	.section .look {
		background: #FFF;
		position: relative;
		padding-bottom: 5%;
	}
	.section .top_title {
		font-size: 20px;
	}
	.section .box {
		position: relative;
		margin: 0 auto 10%;
	}
	
	.section .box .title {
		margin: 0 auto;
		padding: 2% 0 3%
	}
	
	.section .box .title h1 {
		font-size: 60px;
	}

	.section .box .title h2 {
		font-size: 60px;
	}
	.section .box .list a,.section .box .list p {
		font-size: 14px;
	}
}

.list a .typewriter,.list p .typewriter {
	display: inline-block;
	overflow: hidden;
	width: 0;
	white-space: nowrap;
	 margin: 0 auto;
}
.list.ac a .typewriter,.list.ac p .typewriter {
  animation: typing 0.7s forwards;
	width: 0;
}
.list.ac a:nth-of-type(2) .typewriter,.list.ac p:nth-of-type(2) .typewriter {
	animation-delay: 0.3s;
}
.list.ac a:nth-of-type(3) .typewriter,.list.ac p:nth-of-type(3) .typewriter {
	animation-delay: 0.6s;
}
.list.ac a:nth-of-type(4) .typewriter,.list.ac p:nth-of-type(4) .typewriter {
	animation-delay: 0.9s;
}
.list.ac a:nth-of-type(5) .typewriter,.list.ac p:nth-of-type(5) .typewriter {
	animation-delay: 1.2s;
}

@media only screen and (min-width: 769px)  {
	.section .foot {
		position: relative;
		background: #f1e5be;
		padding: 8% 5% 5%;
	}
	.section .foot h1 {
		font-size: 16px;
		transform: scale(0.85, 1);
		transform-origin: left center;
	}
	.section .foot h2 {
		font-size: 16px;
		transform: scale(0.85, 1);
		transform-origin: left center;
	}
	.section .foot .credit {
		margin: 8% auto 0%;
	}
	.section .foot .credit p {
		font-size: 12px;
		transform: scale(0.85, 1);
		transform-origin: left center;
		font-style: italic;
		line-height: 1.8;
		letter-spacing: .5px;
	}
	.section .foot .copyright {
		font-size: 12px;
		transform: scale(0.85, 1);
		text-align: center;
	}
	
}



.section .padding {
	padding: 3vw;
}
.section .padding_top {
	padding: 3vw 3vw 0;
}
.section .padding_top_bottom {
	padding: 3vw 0;
}
.section .padding_left {
	padding: 3vw 3vw 3vw 25vw;
}
.section .padding_right {
	padding: 3vw 25vw 3vw 3vw;
}
.section .padding_side {
	margin-top: 42%;
	padding: 0 3vw;
}
.section .padding_side_left {
	padding: 0vw 3vw 0vw 25vw;
}
.section .padding_harf {
	padding: 15vw;
}
.section .padding_small {
	padding: 0 15vw;
}

.section .margin_top {
	margin-top: 3vw;
}
.section .margin_bottom {
	margin-bottom: 3vw;
}
.section .small {
	width: 50%;
	margin: 0 auto;
}

.section .switch1 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	padding: 3vw;
	animation: change 5s infinite;
}
.section .switch1b img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	padding: 3vw;
	animation: change2 5s infinite;
}
.section .switch3 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	padding: 0vw 30vw 0vw 3vw;
	animation: change 5s infinite;
}
.section .switch4 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	padding: 0vw;
	animation: change 5s infinite;
}
.section .switch1 img:nth-of-type(1),
.section .switch1b img:nth-of-type(1),
.section .switch2 img:nth-of-type(1),
.section .switch3 img:nth-of-type(1),
.section .switch4 img:nth-of-type(1){
	position: relative;
	opacity: 1;
}
.section .switch1 img:nth-of-type(2),
.section .switch1b img:nth-of-type(2),
.section .switch2 img:nth-of-type(2),
.section .switch3 img:nth-of-type(2),
.section .switch4 img:nth-of-type(2){
	animation-delay: 2.5s;
}
.section .grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2vw;
	padding: 0 3vw 3vw
}
@media only screen and (min-width: 769px)  {
	.section .padding {
		padding: 2.5% 5%;
	}
	.section .padding_top {
		padding: 2.5% 5% 0;
	}
	.section .padding_top_bottom {
		padding: 2.5% 0;
	}
	.section .padding_left {
		padding: 2.5% 5% 2.5% 30%;
	}
	.section .padding_right {
		padding: 2.5% 30% 2.5% 5%;
	}
	.section .padding_side {
	margin-top: 50%;
		padding: 0 5%;
	}
	.section .padding_side_left {
		padding: 0vw 5% 0vw 30%;
	}
	.section .padding_harf {
		padding: 15%;
	}
	.section .padding_small {
		padding: 0 15%;
	}
	.section .margin_top {
		margin-top: 2.5%;
	}
	.section .small {
		width: 50%;
		margin: 0 auto;
	}

	.section .grid2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 3%;
		padding: 0 5% 2.5%
	}
	
}




@keyframes change {
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    50%{ opacity: 1;}
	60% {opacity: 0;}
    100%{ opacity: 0;}
}
@keyframes change2 {
    0%{ opacity: 0;}
    20%{ opacity: 0;}
    30%{ opacity: 1;}
	70% {opacity: 1;}
	80%{opacity: 0;}
    100%{ opacity: 0;}
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.img {
	opacity: 0;
	transition: 1.4s all 0s ease;
}
.img.ac {
	opacity: 1;
}




.remodal {
	padding-bottom: 5%;
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	max-width: 1000px;
}
.remodal a {
	color: #000 !important;
	text-decoration: none;
}
.remodal .title {
	
}
.remodal .title .index {
	display: block;
	text-align: center;
	font-size: 14px;
	margin: 0% auto 15%;
	transform: scale(0.88, 1);
	transform-origin: center center;
}
.remodal .story {
	position: relative;
	box-sizing: border-box;
	padding: 3%;
	margin-bottom: 25%;
}
.remodal .story .top {
	width: 70%;
	margin: 0 auto;
}
.remodal .story .name {
	font-size: 6vw;
	transform: scale(0.88, 1);
	transform-origin: center center;
	margin:10% auto;
	line-height: 1.2;
}
.remodal .story ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3%;
}
.remodal .story ul li {
	line-height: 0;
	margin-bottom: 6%;
}
@media only screen and (min-width: 769px)  {
	.remodal .story .name {
		font-size: 28px;
		transform: scale(0.88, 1);
		transform-origin: center center;
		margin:10% auto;
		line-height: 1.2;
	}
	.remodal .title .index {
		display: block;
		text-align: center;
		font-size: 18px;
		margin: 0% auto 15%;
		transform: scale(0.88, 1);
		transform-origin: center center;
	}
}