/* CSS Document */

.padding20{
	padding-top: 20px !important;
}

.padding-b20{
	padding-bottom: 20px !important;
}

.padding50{
	padding-top: 50px !important;
}

.top-space {
  padding-bottom: 285px!important;
}

@media all and (min-width: 1201px) {
	
	#seminar .day1 {
		width: 100%;
		min-width: 1000px;
	}
	
}

@media all and (max-width: 575px) {
	
  #global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -578px;
    background: #ffffff;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    transition: 0.5s ease-in-out;
  }
	
	.top-video-wrap {
		top: 21vw;
	}
	
.padding20 {
	padding-top: 10px !important;
}
	
#topimage .topimage-btn {
	font-size: 15px;
	padding: 4px;
}
	
.top-space {
	padding-bottom: 210px;
}

.top-video-wrap {
	z-index: -1;
	position: absolute;
	width: 109%;
	overflow: hidden;
}
	
.top-haikei {
	display: inline;
	width: 160%;
	margin-left: -33%;
	overflow: hidden;
}
	
.space-t50b70 {
	padding-top: 10px;
	padding-bottom: 70px;
}
	
#contents .title {
	text-align: center;
	padding-top: 7px;
	padding-bottom: 30px;
	font-size: 22px;
	font-weight: bold;
}
	
#contents .contents-title {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 0.5em;
	border: solid 1px #fff;
	padding-top: 0.5em;
	margin-bottom: 5px;
}
	
#contents .contents-img {
	width: 80%;
	max-width: 300px;
	max-height: 300px;
	margin-left: auto;
	margin-right: auto;
	display: none;
}
	
#nav-toggle {
	position: absolute;
	right: 60px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}
	
#seminar .boxl-img {
	width: 24vw;
	height: 24vw;
	display: block;
}
	
#seminar .boxs-img {
	width: 24vw;
	height: 24vw;
	display: block;
}
	
}

#entrance .top_area {
  margin-top: 3vw !important;
}

.fuusen1 {
	position: absolute;
	top: 13vw;
	width: 3.5vw;
	left: 3vw;
	z-index: 1;
}

.fuusen1 img{
	width: 100%;
}

.fuusen2 {
	position: absolute;
	top: 8vw;
	width: 3.6vw;
	left: 19vw;
	z-index: 1;
}

.fuusen2 img{
	width: 100%;
}

.fuusen3 {
	position: absolute;
	top: 2vw;
	width: 3vw;
	left: 14vw;
	z-index: 1;
}

.fuusen3 img{
	width: 100%;
}

.fuusen4 {
	position: absolute;
	top: 1vw;
	width: 3.5vw;
	left: 23vw;
	z-index: 1;
}

.fuusen4 img{
	width: 100%;
}

.fuusen5 {
    position: absolute;
    top: 1vw;
    width: 4.5vw;
    right: 21vw;
    z-index: 1;
}

.fuusen5 img{
	width: 100%;
}

.fuusen6 {
	position: absolute;
	top: 8vw;
	width: 4vw;
	right: 15vw;
	z-index: 1;
}

.fuusen6 img{
	width: 100%;
}

.fuusen7 {
	position: absolute;
	top: 5vw;
	width: 4vw;
	right: 8vw;
	z-index: 1;
}

.fuusen7 img{
	width: 100%;
}

.fuusen8 {
	position: absolute;
	top: 13vw;
	width: 4vw;
	right: 3vw;
	z-index: 1;
}

.fuusen8 img{
	width: 100%;
}

.fuusen9{
	position: absolute;
	top: 1vw;
	width: 5vw;
	z-index: 1;
}

.fuusen9 img{
	width: 100%;
}

.img_box{
  animation: fuusen1 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes fuusen1 {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  12.5% { transform: translateX(3px) translateY(5px) rotate(1deg)}
  25% { transform: translateX(5px) translateY(10px) rotate(0deg)}
  37.5% { transform: translateX(3px) translateY(5px) rotate(-1deg)}
  50% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  62.5% { transform: translateX(-3px) translateY(-5px) rotate(1deg)}	
  75% { transform:  translateX(-5px) translateY(-10px) rotate(0deg)}
  87.5% { transform:  translateX(-3px) translateY(-5px) rotate(-1deg)}	
  100% { transform: translateX(0px) translateY(0px) rotate(0deg)}
}

.img_box2{
  animation: fuusen2 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes fuusen2 {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  12.5% { transform: translateX(3px) translateY(5px) rotate(1deg)}
  25% { transform: translateX(5px) translateY(10px) rotate(0deg)}
  37.5% { transform: translateX(3px) translateY(5px) rotate(-1deg)}
  50% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  62.5% { transform: translateX(-3px) translateY(-5px) rotate(1deg)}	
  75% { transform:  translateX(-5px) translateY(-10px) rotate(0deg)}
  87.5% { transform:  translateX(-3px) translateY(-5px) rotate(-1deg)}	
  100% { transform: translateX(0px) translateY(0px) rotate(0deg)}
}

.img_box3{
  animation: fuusen3 5s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes fuusen3 {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  12.5% { transform: translateX(3px) translateY(5px) rotate(1deg)}
  25% { transform: translateX(5px) translateY(10px) rotate(0deg)}
  37.5% { transform: translateX(3px) translateY(5px) rotate(-1deg)}
  50% { transform: translateX(0px) translateY(0px) rotate(0deg)}
  62.5% { transform: translateX(-3px) translateY(-5px) rotate(1deg)}	
  75% { transform:  translateX(-5px) translateY(-10px) rotate(0deg)}
  87.5% { transform:  translateX(-3px) translateY(-5px) rotate(-1deg)}	
  100% { transform: translateX(0px) translateY(0px) rotate(0deg)}
}


#news .text {
  text-align: center;
}

#exhibition .topimage-btn.thema-blue {
  border-color: #1b4097;
  background-color: #ffffff;
  color: #1b4097;
}

#exhibition .topimage-btn.thema-blue:hover {
  background-color: #EFF6FD;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  transform: scale(0.95, 0.95);
}

#exhibition .topimage-btn {
  border: solid 2px;
  border-radius: 3px;
  padding: 15px;
  display: inline-block;
  font-size: 4vw;
  font-weight: bold;
  transition: background-color 0.5s;
  background-color: #fff;
  width: 100%;
  text-align: center;
  transition: 0.3s ease-in-out;
  transition-duration: 0.3s;
  transform: scale(1, 1);
}

@media all and (max-width: 575px) {
  #exhibition .topimage-btn {
    font-size: 4vw;
    padding: 10px;
  }
}

@media all and (min-width:576px) and (max-width:768px) {
  #exhibition .topimage-btn {
    font-size: 4vw;
    padding: 8px;
  }
}

@media all and (min-width:769px) and (max-width:992px) {
  #exhibition .topimage-btn {
    font-size: 4vw;
    padding: 10px;
  }
}

@media all and (min-width:993px) and (max-width:1200px) {
  #exhibition .topimage-btn {
    font-size: 4vw;
    padding: 12px;
  }
}

@media all and (min-width: 1201px) {
  #exhibition .topimage-btn {
    font-size: 42px;
    padding: 15px;
  }
}

#exhibition .topimage-btnarea-right {
  margin-bottom: 0px;
}

	.video {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		margin-top: 5px;
		margin-bottom: 0px;
	}

.video iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.videoarea{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* lottery ////////////////////////////////////////////////////////////// */

#lottery {
	margin: 0 auto 0;
	width: 100%;
}

#lottery .decoration-subtitle {
	text-align: center;
	font-weight: bold;
	color: #ffffff;
}

#lottery .title {
	text-align: center;
	padding-top: 7px;
	padding-bottom: 50px;
	font-size: 30px;
	font-weight: bold;
	color: #ffffff;
}

#lottery .title::after {
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	margin-top: 0.5em;
	content: "";
	display: block;
	width: 1em;
	height: 3px;
	background: #075696;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

#lottery .text {
	text-align: center;
	color: #ffffff;
}

#lottery .text2 {
	text-align: left;
	color: #ffffff;
	padding-top: 40px;
	padding-bottom: 20px;
}

#lottery .text2 ul{
	padding-left: 20px;
}

#lottery .emphasis {
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	font-size: 30px;
	padding-top: 40px;
	padding-bottom: 25px;
}

#lottery .steparea {
	border: solid 2px #ffffff;
	padding: 10px;
	padding-top: 20px;
	padding-bottom: 30px;
	background-color: #ffffff;
	color: #153D95;
	border-radius: 5px;
}

#lottery .steptitle {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	width: 100%;
}

#lottery .steptext {
	text-align: center;
	width: 100%;
	font-size: 20px;
	padding-top: 15px;
}

#lottery .lobby-imgarea {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
}

#lottery .lobby-btnarea {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

#lottery .lobbybtn {
	border: solid 2px #ffffff;
	border-radius: 3px;
	padding: 15px;
	display: inline-block;
	font-size: 3vw;
	font-weight: bold;
	color: #1b4097 ;
	transition: background-color 0.5s;
	background-color: #fff;
	width: 100%;
	text-align: center;
	transition: 0.3s ease-in-out;
	transition-duration: 0.3s;
	transform: scale(1,1);
}

#lottery .lobbybtn:hover{
	border: solid 2px #1b4097 ;
	border-radius: 3px;
	padding: 15px;
	display: inline-block;
	font-size: 3vw;
	font-weight: bold;
	background-color:#EFF6FD;
	color:#1b4097 ;
	transition: background-color 0.5s;
	text-decoration: none;
	width: 100%;
	text-align: center;
	transition: 0.3s ease-in-out;
	transition-duration: 0.3s;
	transform: scale(0.95,0.95);
}

@media all and (max-width:575px) {
	#lottery .title {
		text-align: center;
		padding-top: 7px;
		padding-bottom: 50px;
		font-size: 22px;
		font-weight: bold;
		color: #ffffff;
	}	
	#lottery .emphasis {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 20px;
		padding-top: 40px;
		padding-bottom: 25px;
	}
	#lottery .steparea {
		border: solid 2px #ffffff;
		padding: 10px;
		padding-top: 10px;
		padding-bottom: 15px;
		background-color: #ffffff;
		color: #1b4097 ;
		border-radius: 5px;
		margin-bottom: 30px;
	}
	#lottery .steptitle {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		width: 100%;
	}
	#lottery .steptext {
		text-align: center;
		width: 100%;
		font-size: 18px;
		padding-top: 15px;
	}
}

@media all and (min-width:576px) and (max-width:768px) {
	#lottery .title {
		text-align: center;
		padding-top: 7px;
		padding-bottom: 50px;
		font-size: 22px;
		font-weight: bold;
		color: #ffffff;
	}	
	#lottery .emphasis {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 22px;
		padding-top: 40px;
		padding-bottom: 25px;
	}
	#lottery .steparea {
		border: solid 2px #ffffff;
		padding: 10px;
		padding-top: 20px;
		padding-bottom: 30px;
		background-color: #ffffff;
		color: #153D95;
		border-radius: 5px;
		margin-bottom: 30px;
	}
	#lottery .steptitle {
		text-align: center;
		font-size: 22px;
		font-weight: bold;
		width: 100%;
	}
	#lottery .steptext {
		text-align: center;
		width: 100%;
		font-size: 18px;
		padding-top: 15px;
	}
}

@media all and (min-width:769px) and (max-width:992px) {
	#lottery .title {
		text-align: center;
		padding-top: 7px;
		padding-bottom: 50px;
		font-size: 25px;
		font-weight: bold;
		color: #ffffff;
	}
	#lottery .emphasis {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 25px;
		padding-top: 40px;
		padding-bottom: 25px;
	}
	#lottery .steparea {
		border: solid 2px #ffffff;
		padding: 10px;
		padding-top: 20px;
		padding-bottom: 30px;
		background-color: #ffffff;
		color: #153D95;
		border-radius: 5px;
		margin-bottom: 30px;
	}
	#lottery .steptitle {
		text-align: center;
		font-size: 25px;
		font-weight: bold;
		width: 100%;
	}
	#lottery .steptext {
		text-align: center;
		width: 100%;
		font-size: 18px;
		padding-top: 15px;
	}
}

@media all and (min-width:993px) and (max-width:1200px) {
	#lottery .title {
		text-align: center;
		padding-top: 7px;
		padding-bottom: 50px;
		font-size: 28px;
		font-weight: bold;
		color: #ffffff;
	}
	#lottery .emphasis {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 30px;
		padding-top: 40px;
		padding-bottom: 25px;
	}
	#lottery .steparea {
		border: solid 2px #ffffff;
		padding: 10px;
		padding-top: 20px;
		padding-bottom: 30px;
		background-color: #ffffff;
		color: #1b4097;
		border-radius: 5px;
	}
	#lottery .steptitle {
		text-align: center;
		font-size: 25px;
		font-weight: bold;
		width: 100%;
	}
	#lottery .steptext {
		text-align: center;
		width: 100%;
		font-size: 18px;
		padding-top: 15px;
	}
}

@media all and (min-width:1201px) {
	#lottery .title {
		text-align: center;
		padding-top: 7px;
		padding-bottom: 50px;
		font-size: 30px;
		font-weight: bold;
		color: #ffffff;
	}
	#lottery .emphasis {
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 30px;
		padding-top: 40px;
		padding-bottom: 25px;
	}
	#lottery .steparea {
		border: solid 2px #ffffff;
		padding: 10px;
		padding-top: 20px;
		padding-bottom: 30px;
		background-color: #ffffff;
		color: #1b4097;
		border-radius: 5px;
	}
	#lottery .steptitle {
		text-align: center;
		font-size: 30px;
		font-weight: bold;
		width: 100%;
	}
	#lottery .steptext {
		text-align: center;
		width: 100%;
		font-size: 20px;
		padding-top: 15px;
	}
}

.dxarea {
	border: double 18px #1b4097;
	border-radius: 10px;
	padding: 4%;
	margin-top: 60px;
	margin-bottom: 60px;
	width: 77% !important;
}

.dxarea_title {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.dxarea_title img {
    width: 100%;
}

#topimage .topimage-btnarea {
	width: 62%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 107px;
	margin-bottom: 57px;
	position: relative;
	z-index: 1;
}


/* access ////////////////////////////////////////////////////////////// */

#access {
  margin: 0 auto 0;
  width: 100%;
  color: #ffffff;
}

#access.thema-yellow {
  color: #000000;
}

#access .decoration-subtitle {
  text-align: center;
  font-weight: bold;
}

#access .title {
  text-align: center;
  padding-top: 7px;
  padding-bottom: 50px;
  font-size: 30px;
  font-weight: bold;
}

#access .title::after {
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-top: 0.5em;
  content: "";
  display: block;
  width: 1em;
  height: 3px;
  background: #075696;
  background: linear-gradient(135deg, #b63954 0%, #971b36 100%);
}

#access .text {
  text-align: center;
}

#access .emphasis {
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  padding-top: 10px;
  padding-bottom: 0px;
}

@media all and (max-width: 575px) {
  #access .title {
    font-size: 22px;
  }

  #access .emphasis {
    font-size: 25px;
  }
}

@media all and (min-width: 576px) and (max-width: 768px) {
  #access .title {
    font-size: 22px;
  }

  #access .emphasis {
    font-size: 28px;
  }
}

@media all and (min-width: 769px) and (max-width: 992px) {
  #access .title {
    font-size: 25px;
  }

  #access .emphasis {
    font-size: 30px;
  }
}

@media all and (min-width: 993px) and (max-width: 1200px) {
  #access .title {
    font-size: 28px;
  }

  #access .emphasis {
    font-size: 35px;
  }
}