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


#keyvisual { width: max(100%,1020px); height: 640px; margin-top: -105px; z-index: -1; position: relative; overflow: hidden; }
#keyvisual img#visual { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#key-box { width: min(100%,960px); height: 640px; margin: 0 auto; position: relative; }
#key-box dt { width: 120px; position: absolute; top: 220px; left: 100px; }
#key-box dd { width: 440px; position: absolute; right: 0; bottom: 30px; }
@media only screen and (max-width: 1100px) {
  #keyvisual img#visual { width: auto; height: 640px; }
}

#index-keynote { background: #E2E3DD; }
#index-subevent { background: #D9E6EE; }
.index-column { margin-top: 1px; }
.inner-box { width: min(92%,720px); margin: 0 auto; padding: 2.5rem 0; }
.index-column h2 { font-size: 1.5rem; line-height: 1.2; text-align: center; letter-spacing: .3rem; color: #005A8E; height: 1.7rem; margin-bottom: 1rem; position: relative; }
.index-column h2 strong { font-weight: normal; padding: 0 .4rem 0 .7rem; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; }
#index-keynote h2 strong { background: #E2E3DD; }
#index-subevent h2 strong { background: #D9E6EE; }
.index-column h2::before { content: ""; width: 100%; height: 1px; background: #005A8E; position: absolute; top: 50%; left: 0; transform: translateY(-2px); }
.index-column h2::after { content: ""; width: 100%; height: 1px; background: #005A8E; position: absolute; top: 50%; left: 0; transform: translateY(2px); }
#index-subevent ul { width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }
#index-subevent ul::after { content: ""; width: 1px; height: 100%; background: #005A8E; display: block; position: absolute; top: 0; left: 50%; }
#index-subevent ul li { width: 340px; }
.index-column a:hover img { opacity: .8; }

#index-sponsor h2 strong { background: #FFF; }
#index-sponsor dl { display: flex; align-items: stretch; justify-content: space-between; }
#index-sponsor dl dt { font-size: 93%; line-height: 1.2; color: #005A8E; width: 6rem; border: solid 1px #005A8E; display: flex; align-items: center; justify-content: center; }
#index-sponsor dl dd { width: calc(100% - 7rem); }
#index-sponsor dl#organizer { margin-bottom: 10px; }
#index-sponsor dl#organizer dd { font-size: 123%; line-height: 1.2; font-weight: bold; padding: .2rem 0; display: flex; align-items: center; }
#index-sponsor dl#organizer dd a { color: #333; }
#index-sponsor dl#organizer dd a:hover { color: #F63; }
#index-sponsor dl#organizer dd strong { vertical-align: middle; width: 150px; padding-right: .5rem; display: inline-block; }
#index-sponsor dl#support dd { padding: .2rem 0 .1rem 0; }
#index-sponsor dl#support dd ul { display: flex; flex-wrap: wrap; }
#index-sponsor dl#support dd ul li { font-size: .9rem; line-height: 1.4; }
#index-sponsor dl#support dd ul li::after { content: "／"; }
#index-sponsor dl#support dd ul li a { color: #333; }
#index-sponsor dl#support dd ul li a:hover { color: #F63; }