@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.mincho {font-family: "Kaisei Opti", serif; font-weight: 700; font-style: normal;}

.bgWH {background-color: #FFF;}
.bgBR {background-color: #D88D00;}
.bgBE {background-color: #FBF3E5;}
.bgGR {background-color: #4A8308;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtBR {color: #D88D00;}
.txtGR {color: #4A8308;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

header {position: relative; width: 100%; padding-top: 40px;}
#top01 {height: 100vh;}
header .logo {width: 42.6%;}
header .logo img {position: relative; z-index: 1;}
header .info {width: 57.4%; padding: 0 0 0 20px; position: relative;}
header .logo > .mb30 > img{position: relative; z-index: 1;} 
header .year {display: inline-block; padding: 10px 60px; border-radius: 40px; background: #E33C0B; border: 5px solid #222; margin-top: -25px; position: relative;}
header#under .date {text-align: center;}
header .date,header .place {text-shadow: 3px 3px 3px #FFF;}
header .date dt {font-size: 100px; line-height: 1.45; margin-right: 8px;}
header .date dd {font-size: 40px;}
header .date dd p {line-height: 1.1;}
header .date dd p:first-child {font-size: 30px;}
header .date dd p:first-child span {font-size: 160%;}
header .place {padding: 15px 20px; display: inline-block;}
header .place::before,header .place::after {position: absolute; content: ''; background: #222; width: 100%; height: 6px; border-radius: 3px; left: 0;}
header .place::before {top: 0;}
header .place::after {bottom: 0;}
#hanburger {display: none;}
.menu_button {width: 55px; height: 55px; position: fixed; top: 0; right: 0; background: #222; z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 34px; transform: rotate(45deg); top: 27px; right: 11px;}
#hanburger:checked ~ .span3 {width: 34px; transform: rotate(-45deg); top: 27px; right: 11px;}
.global_menu {visibility: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0; color: #FFF; overflow-y: scroll; text-align: center;}
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 10px 30px; border-radius: 25px; color: #FFF; background: #222;}
.global_menu a:hover {background: #FFF; color: #222;}
.menu {font-size: 20px; white-space: nowrap; margin-right: 20px;}
.menu .pd {display: none;}
.menu:last-child {margin-right: 0px;}
#hanburger,.spOnly {display: none;}
@media screen and (min-width: 985px) {
  .menu_button {display: none;}
  .global_menu {position: inherit; padding: 0; color: #fff; visibility: visible; overflow-y: visible; height: auto; width: auto; margin-bottom: 80px;}
}
@media screen and (max-width: 1160px) {
	.menu {font-size: 16px; margin-right: 10px;}
}
@media screen and (max-width: 985px) {
  #header .spOnly {display: block;}
  span.span1,span.span2,span.span3 {width: 29px; height: 1px; background-color: #FFF; position: absolute; right: 13px; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 17px;}
  .span2 {top: 27px;}
  .span3 {top: 37px;}
  .menu {display: block; margin-right: 0;}
  .menu > a {padding: 10px 15px; text-align: left; border-bottom: 1px solid #CCC;}
  .menu > a span {margin-right: 10px; width: 30px!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10;}
  .global_menu a {border-radius: 0;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; background: rgba(255,255,255,1); /*position: fixed;*/ top: 0; z-index: 5;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
	#top01 {height: auto;}
	header .logo,header .info {width: 100%;}
	header .info {padding: 0;}
	header .logo {display: flex; flex-wrap: wrap; align-items: flex-end;}
	header .logo > .mincho {width: 100%;}
	header .logo > .mb30,header#under .logo,header#under .info {width: 50%;}
	header .logo > .mb30 {width: 100%;}
	header#under .info {margin-top: auto; margin-bottom: 30px;}
	header .logo > .date.mincho {width: 50%; margin-bottom: 30px;}
	header .date dt {font-size: 12vw;}
	header .date dd {font-size: 4.5vw;}
	header .date dd p:first-child {font-size: 4vw;}
}
@media screen and (max-width: 530px) {
	header#under .logo,header#under .info {width: 100%;}
	header .logo > .mb30,header .logo > .date.mincho {width: 100%; margin-bottom: 10px;}
	header#under .date.mincho {align-items: center;}
	header .date dt {font-size: 20vw;}
	header .date dd {font-size: 9.5vw;}
	header .date dd p:first-child {font-size: 7vw;}
}

footer {padding: 100px 0 20px;}
footer h2 span,footer p.mincho span {background: #222;}
footer .inner {padding: 0 40px 40px;}
footer .inner::after {position: absolute; content: ''; width: 100%; height: calc(100% - 29px); bottom: 0; left: 0; background: rgba(34,34,34,.8);}
footer h2,footer p.mincho,footer .flex {position: relative; z-index: 1;}
footer h3 {margin-right: 20px;}
footer .contact li:not(:last-child) {margin-right: 40px;}
footer .contact dt {margin-right: 15px;}
footer .contact li {display: flex; flex-direction: column;}
footer .contact li p {flex-grow: 1;}
.footLink li {margin-left: 40px;}
.footLink a {color: #FFF;}
.footCopy small {font-size: 14px;}
#ftNavi {display: none;}
@media screen and (max-width: 1125px) {
	footer .contact li {margin-bottom: 15px;}
}
@media screen and (max-width: 985px) {
	footer {margin-bottom: 57px; padding: 40px 0 10px;}
  footer #fnavi {width: 100%;}
	.footLink a {text-shadow: 2px 2px 2px rgba(0,0,0,.8); font-size: 12px;}
	.footCopy small {font-size: 12px;}
	#ftNavi {display: block; background: #222; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #333; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {width: calc(100%/3);}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #333; border-right: 1px solid #111;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
	footer .contact dd {margin-top: 10px;}
}

.w1300 {width: 100%; max-width: 1332px; padding-left: 0; padding-right: 0;}
.w1500 {width: 100%; max-width: 1520px; padding-left: 0; padding-right: 0;}
.container {width: 100%; max-width: 1212px; padding-left: 0; padding-right: 0;}
.containers {width: calc(100% - 40px); max-width: 888px; padding-left: 0; padding-right: 0;}
.mlr,.container,.containers {margin-left: auto; margin-right: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.w300 {max-width: 300px; width: 100%;}
.full {width: 100%;}
.half {width: 50%;}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  .mlr5 {margin-left: 5px; margin-right: 5px;}
  .box4 {width: calc(50% - 20px); margin-left: 10px; margin-right: 10px;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFF;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; line-height: 1.7; text-align: center; border: 1px solid #CCCCCC;}
table.tblGR th {width: 25%; background: #4A8308; color: #FFF;}
table.tblGR2 th {width: 280px; background: #4A8308; color: #FFF;}
table.tblGR2 td {text-align: left; width: calc(100% - 250px);}
@media screen and (max-width: 568px) {
  table.tblGR th,table.tblGR td {padding: 10px 5px;}
  table.tblGR2 th,table.tblGR2 td {width: 100%; display: block;}
  table.tblGR2 td {border-top: none;}
}

.abs {position: absolute;}
.movie {position: relative; width: 100%; padding-top: 56.25%;}
.movie iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%; border: 5px solid #222;}
.r10 {border-radius: 10px;}

.btnCmn {display: block; width: 100%; padding: 10px 40px 10px 30px; border-radius: 30px; background-repeat: no-repeat; background-position: right 20px center; line-height: 1.5;}
.btnCmn:hover {background-position: right 10px center;}
.btnBK {border: 2px solid #222; background-color: #222; color: #FFF; background-image: url("../img/cmn/arrow_wh.svg");}
.btnBK:hover {background-color: #FFF; color: #222; background-image: url("../img/cmn/arrow_bk.svg");}
.btnOR {border: 2px solid #F39800; background-color: #F39800; color: #FFF; background-image: url("../img/cmn/arrow_wh.svg");}
.btnOR:hover {background-color: #FFF; color: #F39800; background-image: url("../img/cmn/arrow_or.svg");}
.btnWH {border: 2px solid #FFF; background-color: #FFF; color: #222; background-image: url("../img/cmn/arrow_bk.svg");}
.btnWH:hover {background-color: #222; color: #FFF; background-image: url("../img/cmn/arrow_wh.svg");}
.typeLogo {z-index: -1; width: 100%;}
.typeLogo p {width: 120px;}
.typeLogo p:first-of-type {margin-left: auto;}
.typeLogo p:last-of-type {margin-top: -125px;}

#bgImg {position: fixed; width: 100%; height: 100vh; top: 0; z-index: -1; background: url("../img/cmn/bg01.png") no-repeat top center; background-size: 100% auto;}
#bgImg::after {position: absolute; content: ''; bottom: 0; width: 100%; height: 160px; background: url("../img/cmn/bg07.svg") repeat-x bottom center;}
#bgImg .inner {width: 100%; max-width: 1680px; height: 100%; margin: 0 auto;}
#bgImg .inner li {position: absolute;}
#bgImg .inner li:first-child {width: 19.35%; top: 4.7vh; left: 2.4%;}
#bgImg .inner li:nth-child(2) {width: 26.25%; top: 22.85vh; right: 2.4%;}
#bgImg .inner li:nth-child(3) {width: 35.7%; bottom: 100px; left: calc(50% - 50px);}
#bgImg .inner li:nth-child(4) {width: 245px; bottom: 60px; left: calc(50% + 390px);}
#bgImg .inner li:last-child {width: 295px; bottom: 70px; right: calc(50% + 240px);}
@media screen and (max-width: 1280px) {
	#bgImg .inner li:nth-child(4) {left: calc(50% + 300px);}
}
@media screen and (max-width: 985px) {
	#bgImg::after {bottom: 57px; background-size: 985px auto;}
	#bgImg .inner li:first-child {width: 40%;}
	#bgImg .inner li:nth-child(2) {width: 40%;}
	#bgImg .inner li:nth-child(3) {width: 70%; bottom: 57px; left: 20%;}
	#bgImg .inner li:nth-child(4) {width: 30%; bottom: 67px; right: 0; left: inherit;}
	#bgImg .inner li:last-child {width: 30%; bottom: 90px; left: 0; right: inherit;}
}
@media screen and (max-width: 568px) {
	#bgImg::after {background-size: 900px auto;}
	#bgImg .inner li:nth-child(4) {bottom: 67px;}
	#bgImg .inner li:last-child {bottom: 75px;}
}

#top01 .col6 {height: 100%;}
#top01 .flyer {padding-bottom: 70px; top: 50%; transform: translateY(-50%); width: 100%;}
#top01 .flyer li {width: calc(50% - 20px); padding: 10px; background: url("../img/top/01-01.png") repeat-y top;}
#top01 .flyer li:last-child {margin-top: 80px;}
#top01 .flyer li img {width: 100%;}
#top01 .copy {left: 0; bottom: 0;}
#top01 .copy span {position: relative; display: inline-block;}
#top01 .copy span::before {position: absolute; content: ''; width: 100%; height: 6px; border-radius: 3px; background: #222; bottom: 0; left: 0;}
#top01 .copy span:first-of-type {transform: rotate(3deg);}
#top01 .copy span:last-of-type {transform: rotate(-3deg); display: block; margin: 12px 0 0 22px;}
#top01 .scroll {bottom: 0;}
#top01 .scroll a {padding-bottom: 60px; position: relative;}
#top01 .scroll a::before {position: absolute; content: ''; width: 2px; height: 50px; background: #FFF; bottom: 0; left: 50%; transform: translateX(-50%);}
@media screen and (max-width: 985px) {
	#top01 .flyer {position: relative;}
	#top01 .flyer li {width: calc(50% - 10px);}
	#top01 .flyer li:last-child {margin-top: 110px;}
	#top01 .copy {left: 50%; bottom: inherit; top: 0; margin-left: 20px;}
	#top01 .scroll {display: none;}
}

#top02 .alEnd li {margin-top: 10px;}
#top02 .alEnd li:not(:last-child) {margin-right: 30px;}
#top02 .txtArea {width: calc(100%/3)}
#top02 .imgArea {width: calc(100%/3 * 2 - 40px);}
#top02 .movieSlide {width: 100%; max-width: 1470px; margin: 0 auto;}
#top02 .movieSlide li {margin: 0 20px;}
@media screen and (max-width: 1125px) {
	#top02 .txtArea,#top02 .imgArea {width: 100%;}
}

#top03 .bgImg {background: #000;}
#top03 .bgImg ul {width: 25%; opacity: 0.4;}
#top03::before {width: calc(100% - 80px); height: calc(100% - 80px); margin: 40px; position: absolute; content: ''; border: 3px solid #FFF; z-index: 1;}
#top03 .inner {width: 100%; top: 50%; transform: translateY(-50%); z-index: 2; padding: 0 100px;}
#top03 .logo {width: 444px; margin-right: 110px;}
@media screen and (max-width: 1200px) {
	#top03 .logo {width: calc(50% - 40px); margin-right: 40px;}
	#top03 .txtArea {width: 50%;}
}
@media screen and (max-width: 1024px) {
	#top03::before {width: calc(100% - 40px); height: calc(100% - 40px); margin: 20px;}
}
@media screen and (max-width: 720px) {
	#top03 .bgImg ul {width: 50%; opacity: 0.4;}
	#top03 .bgImg ul:nth-child(3),#top03 .bgImg ul:nth-child(4) {display: none;}
	#top03 .inner {padding: 60px;}
}
@media screen and (max-width: 568px) {
	#top03 .logo,#top03 .txtArea {width: 100%; margin-right: 0;}
	#top03 .bgImg ul:nth-child(3) {display: flex; width: 100%;}
}

#top04 h2 {padding: 15px 30px; background: #222;}
#top04 .inner {background: #FFC400; border: 2px solid #222; margin-top: -37px;}
#top04 .txtArea {padding: 67px 30px 0; z-index: 1;}
#top04 .imgArea {margin-top: -27px;}

#top05 {border-bottom: 2px solid #222;}
#top05,#top06 {padding: 80px 0; background: #FFC400;}
#top06 img {width: 100%;}
#top06 .sponsor01 {margin: 0 -15px;}
#top06 .sponsor01 li {width: calc(100%/3 - 30px); margin: 0 15px 30px;}
#top06 .sponsor02 {margin: 0 -10px;}
#top06 .sponsor02 li {width: calc(20% - 20px); margin: 0 10px 20px;}
@media screen and (max-width: 1024px) {
	#top06 .sponsor01 {margin: 0 -5px;}
	#top06 .sponsor01 li {width: calc(50% - 10px); margin: 0 5px 10px;}
	#top06 .sponsor02 {margin: 0 -5px;}
	#top06 .sponsor02 li {width: calc(100%/3 - 10px); margin: 0 5px 10px;}
}
@media screen and (max-width: 568px) {
	#top06 .sponsor01 li {width: calc(100% - 10px); margin: 0 5px 10px;}
	#top06 .sponsor02 li {width: calc(50% - 10px); margin: 0 5px 10px;}
}

#event .inlb {background: #222;}
.eventInner::after {position: absolute; content: ''; width: 100%; height: calc(100% - 28px); background: rgba(34,34,34,.8); bottom: 0;}
.eventInner .detail,.eventInner .imgArea {position: relative; z-index: 1;}
.eventInner .detail {width: 65.5%; margin-bottom: 40px;}
.eventInner .detail h2 {background: #EB7F00 url("../img/cmn/bg_ttl.png") repeat; background-size: 290px auto; padding: 10px 20px; display: inline-block; margin-bottom: 35px;}
.eventInner .detail dl {margin-left: 40px; margin-right: 40px;}
.eventInner .detail dt,.eventInner .detail dd {padding: 15px 0; border-bottom: 1px solid #FFF;}
.eventInner .detail dt {width: 100px;}
.eventInner .detail dd {width: calc(100% - 100px); padding-left: 20px;}
.eventInner .detail dd a {color: #FFF; padding-right: 30px; background: url("../img/cmn/icon_win.svg") no-repeat right center; word-break: break-all;}
.eventInner .detail dd a:hover {text-decoration: underline;}
.eventInner .detail .txt {margin: 0 40px 40px;}
.eventInner .detail .txt p:not(:last-of-type) {margin-bottom: 20px;}
.eventInner .imgArea {width: 34.5%; padding: 0 40px 40px 0;}
@media screen and (max-width: 700px) {
	.eventInner .detail,.eventInner .imgArea {width: 100%;}
	.eventInner .detail {margin-bottom: 0;}
	.eventInner .imgArea {padding: 0 20px 20px; display: flex;}
	.eventInner .detail dl {margin-left: 20px; margin-right: 20px;}
	.eventInner .detail .txt {margin: 0 20px 20px;}
}
@media screen and (max-width: 530px) {
	.eventInner .imgArea {display: block;}
	.eventInner .imgArea li {width: 100%;}
}

#privacy .inner {padding: 40px; background: rgba(34,34,34,.8);}
#privacy dt {background: #222; display: inline-block; padding: 5px 10px; margin-bottom: 10px;}
#privacy dd {margin-bottom: 20px;}

.galleryItem {width: calc(25% - 10px); margin: 0 5px 10px;}
@media screen and (max-width: 1024px) {
	.galleryItem {width: calc(100%/3 - 10px);}
}
@media screen and (max-width: 568px) {
	.galleryItem {width: calc(50% - 10px);}
}

#mailform {padding: 40px; background: rgba(34,34,34,.8);}