@charset "UTF-8";

/********************

common

********************/
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.8em;
	color: #333;
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 18px;
    font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #FFF;
	letter-spacing: 0.05em;
}

#content {
	top: 0!important;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: #555;
    overflow: hidden;
}

.imganimation {
	position: relative;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.hide {
	display: none !important;
}

.fadeIn {
	display: block !important;
    animation: fadein 1000ms 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.next {
    animation: blinking 0.8s ease-in-out infinite alternate;
}
.next:hover {
    animation: none;
}
@keyframes blinking {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.wrapArea {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 1200px;
	height: auto;
}

.wrapArea .filter {
	position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: brightness(0.6);
    -webkit-backdrop-filter: brightness(0.6);
    z-index: 10;
}

.wrapArea .cutout {
	position: absolute;
    backdrop-filter: brightness(1.7);
    -webkit-backdrop-filter: brightness(1.7);
    z-index: 20
}

/*
.wrapArea::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 10;
}

.wrapArea::after {
    position: absolute;
    content: "";
    background-color: rgba(255,255,255,0.4);
    z-index: 20;
}
*/

.wrapArea img {
    position: relative;
	width: 100%;
	height: auto;
}

.wrapArea .announce {
	position: absolute;
	width: 400px;
	height: auto;
	padding: 20px;
	border: solid 1px #333;
	border-radius: 12px;
	background-color: #FFF;
    z-index: 30;
}

.wrapArea .announceS,
.wrapArea .announceF {
	width: 600px;
}

.wrapArea .announce .start,
.wrapArea .announce .finish {
	margin: 10px 0 25px 0;
	font-size: 1.6rem;
	font-weight: 600;
	color: #333;
}

.wrapArea .announce .describe {
	margin-bottom: 10px;
}

.wrapArea .announce .describe .smallfont {
    font-size: 0.95rem;
}

.wrapArea .announce .next {
    cursor: pointer;
	display: block;
	width: fit-content;
	margin: 0 auto;
	border-radius: 6px;
	background-color: #ff9900ff;
	color: #FFF;
	padding: 5px 25px;
}

.wrapArea .announce .page {
	position: absolute;
	bottom: 6px;
	right: 14px;
	text-align: right;
	color: #777;
}