@charset "utf-8";

/*==========================================
 body
===========================================*/
body {width: 100%;
color:#222222;
background-color:#111111;
text-align: left;
line-height: 1.8;
letter-spacing: -0.001em;		/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;		/* 文字サイズの自動調整機能のキャンセル */}


/*==========================================
 demo.css
===========================================*/
button:focus {outline: none;}

section {padding: 1em;}

html, body, .container, .content-wrap {
overflow: hidden;
width: 100vw;
height: 100vh;}

#curveUpColor path,
#curveDownColor path {
fill: #ffffff;
stroke: #ffffff;}

/* Big half circle */
#bigHalfCircle path {
	fill: #ffffff;
	stroke: #ffffff;
}


.container {background: #58b947;/* we don't want the pseudo-elements sticking out */}
.container svg {/*display: block;*/}

.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;}

.content {position: relative;
background-color:#333333;}

.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: opacity 0.3s, transform 0s 0.3s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}


/*==========================================
 topCSS
===========================================*/
/* codrops-header ---------------------------------------*/
.codrops-header {
/*
height: 100vh;
overflow: hidden;
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100vh);
scroll-snap-points-y: repeat(100vh);
*/
}
.codrops-header {margin: 0 auto; padding: 28px 0 88px;
text-align: center;
background-image: url("../images/bkg/codrops-header.webp");
background-size:cover;
background-repeat: no-repeat;
background-position:center bottom;
background-attachment:fixed;}

.codrops-header h1 {margin: 18px auto; color: #222222; font-size: 1.8em; font-weight:bolder; letter-spacing:1px;}
.codrops-header h1 span {display: block;}

.codrops-header a:link {text-decoration: none; color:#eb3b24;}
.codrops-header a:visited {text-decoration: none; color:#eb3b24;}

/* related ----------------------------------------------*/
.related {margin:48px auto; padding: 0; color:#ffffff; text-align: center;/*background-color:#4e4e4e; border-top:1px solid #ff3385; border-bottom: 1px dashed #ff3385;*/}
.related #copyright {font-size:0.88em; color:#ffffff; margin: 0; padding: 8px 0px 8px 0px;}