@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=M+PLUS+1p:wght@800&display=swap');
body{
	background-color: #f5f5f0;
	font-feature-settings: "palt";
	letter-spacing: .15em;
	color: #373737;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.youtube iframe,
#sect3 iframe,
.movie-dummy{
	aspect-ratio:16/9;
	background-color: #cbcbcb;
	width: 100%;
	border: 10px solid #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
}
.movie-dummy:after{
	display: block;
	content:"▶";
	color: #FFF;
	font-size: 3rem;
}
a:hover{
	opacity: .8;
}
h1,h2,h3,h4,h5{
	font-family: 'M PLUS 1p', sans-serif;
}
h2{
	color: #2986c8;
}
#main-visual{
	background-color: #989898;
	background-image: url(../img/asset0.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
	z-index: -5;
}
#main-visual h1{
	position: relative;
	z-index: 10;
	color: #FFF;
}
/*
#main-visual:before{
	position: absolute;
	content:"";
	display: block;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(3px) brightness(100%);
	background-color: rgba(0, 0, 0, 0.15);
	top:0;
	left:0;
	z-index: -4;
}
*/
.pop{
	background-color: #FFF;
	border-radius: 10px;
    border: 5px solid #a5c8e9;
	position: relative;
}
.pop:after {
	z-index: -2;
    position: absolute;
    bottom: -40px;
    left: -40px;
    display: block;
    background-color: #4994db;
    width: 100%;
    height: 100%;
    content: "";
	border-radius: 10px;
}
.pop:before {
	z-index: -1;
    position: absolute;
    bottom: -20px;
    left: -20px;
    display: block;
    background-color: #7cb3e6;
    width: 100%;
    height: 100%;
    content: "";
	border-radius: 10px;
/*
	z-index: -1;
    position: absolute;
    bottom: -8px;
    left: -1px;
    display: block;
    width: calc(100% + 2px);
    height: 14px;
    content: "";
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border: 2px solid #000;
    border-top: 1px solid #000;
    border-radius: 0 0 0.5rem 0.5rem;
    background-image: -webkit-repeating-linear-gradient( 
135deg, #000, #000 1px, transparent 2px, transparent 5px );
    background-image: repeating-linear-gradient( 
-45deg, #000, #000 1px, transparent 2px, transparent 5px );
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
*/
}
.underdots{
	border-bottom: 4px dotted #d36060;
}
.b-shadow{
	box-shadow: 0px 0px 20px rgba(85, 83, 61, 0.16);
}
#sect1{
	position: relative;
}
/*
#sect1:before{
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 200px;
	background-color: #f5f5f0;
	left: 0;
	top: -100px;
	transform: skewY(-5deg);
	z-index: -3;
}
*/
#sect1{
	background-color: #f5f5f0;
	border-top-left-radius: 100% 20%;
	border-top-right-radius:  100% 20%;
}
#sect2{
	background-color: #d6e9f1;
	border-top-left-radius: 60% 5%;
	border-top-right-radius:  60% 5%;
}
#sect3{
/*
	background-image:
	linear-gradient(-90deg, #e2eff8 50%, transparent 50%),
	linear-gradient(#e2eff8 50%, transparent 50%);
	background-size: 5px 5px;
	border: 20px solid #2986c8;
*/
	position: relative;
background-color: #20B2FF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(360,817,443)'%3E%3Cstop offset='0' stop-color='%2320B2FF'/%3E%3Cstop offset='1' stop-color='%23197AFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='335' height='279.2' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
/*
#sect3:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: #2986c8;
    left: 0;
    top: -70px;
    transform: skewY(5deg);
    z-index: 0;
}
*/
#sect3 *{
	position: relative;
	z-index: 1;
	color: #FFF;
}
footer{
	background-color: #FFF;
}
.font{
	font-family: 'DotGothic16', sans-serif;
}
.marker{
	background: -webkit-linear-gradient(90deg, #f9b683 0%, #f9b683 50%, transparent 50%, transparent 100%);
	border-bottom:3px dotted #e16d6d;
}
.youtuber{
/* 	filter:drop-shadow(20px 5px 0px #FFF); */
}
.h-style{
	background-color: #f0f5f8;
	transform: rotate(-2deg) skew(-2deg);
	padding: 2rem 0;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	border-top:8px solid #0f5d87;
	border-bottom:8px solid #0f5d87;
}
.h-style span{
	color: #000!important;
}
.comment{
	padding: 1.5rem;
	background-color: #ffffff;
	box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.4);
	z-index: 2!important;
	color: #000!important;
	min-width: 24rem;
	top:calc(50% - 4rem);
	border-radius: 10px 10px 0 10px;
}
@media screen and (min-width:768px){
	.shaftman{
		max-height: 16vw;
	}
}
@media screen and (max-width:768px){
	main{
		overflow-x: hidden;
	}
	.shaftman{
		max-height: 300px;
	}
	#sect1:before{
		top: -20px;
	}
	.pop:after {
	    bottom: -20px;
	    left: -20px;
	}
	.pop:before {
	    bottom: -10px;
	    left: -10px;
	}
	#sect3 iframe,
	.movie-dummy{
		height: 100%;
	}
	.comment{
		min-width: inherit;
	}
}