@charset "utf-8";


/* -----------------------------
  Common
------------------------------*/
#header {
border-bottom: 1px solid #494949;
}

#content {
padding-top: 83px;
background: #000000;
color: #ffffff;
}
@media screen and (max-width: 750px) {
#content {
padding-top: 53px;
}
}

/* -----------------------------
  headingArea
------------------------------*/
#content .headingArea {
padding: 50px 0;
}

#content .headingArea p {
margin-bottom: 25px;
font-size: 19px;
text-align: center;
}

#content .headingArea h1 {
text-align: center;
}

@media screen and (max-width: 750px) {
#content .headingArea {
padding: 25px 0;
}

#content .headingArea p {
margin: 0 20px 15px;
font-size: 15px;
}

#content .headingArea h1 {
margin: 0 15px;
}

#content .headingArea h1 img {
width: 100%;
height: auto;
}
}

/* -----------------------------
  period
------------------------------*/
#content #period {
padding: 40px 0;
border: 1px solid #ffffff;
border-left: none;
border-right: none;
}

#content #period h2 {
margin: 0 0 20px;
font-size: 26px;
text-align: center;
}

#content #period p {
font-size: 18px;
text-align: center;
}

@media screen and (max-width: 750px) {
#content #period {
padding: 20px;
}

#content #period h2 {
margin: 0 0 15px;
font-size: 23px;
}

#content #period p {
font-size: 13px;
}
}

/* -----------------------------
  monitor
------------------------------*/
#content #monitor {
margin: 80px auto 100px;
width: 1000px;
}

#content #monitor h2 {
margin: 0 0 30px;
width: 597px;
height: 47px;
background: url(../../event/img/monitor_title.png) no-repeat left top;
text-indent: -9999px;
}

#content #monitor .mb {
margin-bottom: 30px;
}

#content #monitor .bg01 {
padding: 40px;
background-color: #ffffff;
color: #3e3a39;
}

#content #monitor .img01 {
width: 865px;
height: 210px;
background: url(../../event/img/monitor_img01.png) no-repeat left top;
text-indent: -9999px;
}

#content #monitor .img02 {
margin-bottom: 45px;
width: 747px;
height: 119px;
background: url(../../event/img/monitor_img02.png) no-repeat left top;
text-indent: -9999px;
}

#content #monitor .img03 {
margin: 0 -40px;
width: 1000px;
height: 479px;
background: url(../../event/img/monitor_img03.png) no-repeat left top;
text-indent: -9999px;
}

#content #monitor .att {
margin-top: 10px;
font-size: 12px;
text-align: right;
}

@media screen and (max-width: 750px) {
#content #monitor {
margin: 30px 15px 50px;
width: auto;
}

#content #monitor h2 {
margin: 0 0 25px;
width: 281px;
height: 67px;
background-image: url(../../event/img/monitor_title_s.png);
background-size: 281px auto;
}

#content #monitor .bg01 {
padding: 25px 0;
}

#content #monitor .bg01.mb {
padding: 25px;
}

#content #monitor .img01 {
padding-top: calc(871 / 604 * 100%);
width: auto;
height: 0;
background-image: url(../../event/img/monitor_img01_s.png);
background-size: cover;
}

#content #monitor .img02 {
margin: 0 0 30px;
padding-top: calc(364 / 690 * 100%);
width: auto;
height: 0;
background-image: url(../../event/img/monitor_img02_s.png);
background-size: cover;
}

#content #monitor .img03 {
margin: 0;
padding-top: calc(1389 / 690 * 100%);
width: auto;
height: 0;
background-image: url(../../event/img/monitor_img03_s.png);
background-size: cover;
}
}

/* -----------------------------
  thecity
------------------------------*/
#content #thecity {
margin: 0 auto 100px;
width: 1000px;
}

#content #thecity h2 {
margin: 0 0 30px;
width: 336px;
height: 47px;
background: url(../../event/img/thecity_title.png) no-repeat left top;
text-indent: -9999px;
}

#content #thecity h2 span {
font-size: 40px;
}

#content #thecity .bg01 {
padding: 40px 0;
position: relative;
background-color: #ffffff;
color: #3e3a39;
}

#content #thecity .bg01 p {
margin: 0 40px 30px;
font-size: 20px;
font-weight: bold;
}

#content #thecity .bg01 dl {
display: flex;
justify-content: space-between;
margin: 0 0 0 40px;
}

#content #thecity .bg01 dl dt {
margin: 0 40px;
}

#content #thecity .bg01 .btn {
width: 200px;
position: absolute;
left: 40px;
bottom: 85px;
}

#content #thecity .bg01 .btn li a {
display: block;
width: 200px;
height: 42px;
background: url(../../event/img/thecity_arrow.png) no-repeat 18px center #000000;
background-size: 10px auto;
font-size: 17px;
text-align: center;
color: #ffffff;
line-height: 42px;
}

#content #thecity .bg01 .btn li a:hover {
text-decoration: none;
}

#content #thecity .bg01 .btn .text {
margin: 15px 0 0 -13px;
width: 223px;
height: 15px;
background: url(../../event/img/thecity_btn_text.png) no-repeat left top;
background-size: 223px auto;
text-indent: -9999px;
}

@media screen and (max-width: 750px) {
#content #thecity {
margin: 0 15px 50px;
width: auto;
}

#content #thecity h2 {
margin: 0 0 15px;
width: 203px;
height: 29px;
background-image: url(../../event/img/thecity_title_s.png);
background-size: 203px auto;
}

#content #thecity h2 span {
font-size: 22px;
}

#content #thecity .bg01 {
padding: 25px 0;
}

#content #thecity .bg01 p {
margin: 0 25px 15px;
font-size: 15px;
}

#content #thecity .bg01 dl {
display: block;
margin: 0;
}

#content #thecity .bg01 dl dt {
margin: 0 0 15px;
text-align: center;
}

#content #thecity .bg01 dl dt img {
width: 70px;
height: auto;
}

#content #thecity .bg01 dl dd {
margin-left: 30px;
}

#content #thecity .bg01 dl dd img {
width: 100%;
height: auto;
}

#content #thecity .bg01 .btn {
margin: 25px auto 0;
width: 170px;
position: relative;
left: 0;
bottom: 0;
}

#content #thecity .bg01 .btn li a {
padding-left: 15px;
width: 100%;
height: 38px;
box-sizing: border-box;
background-size: 10px auto;
font-size: 15px;
line-height: 36px;
}

#content #thecity .bg01 .btn .text {
margin: 10px 0 0 -13px;
width: 191px;
height: 13px;
background-size: 191px auto;
}
}

/* -----------------------------
  information
------------------------------*/
#content #information {
margin: 0 auto 100px;
width: 1000px;
}

#content #information h2 {
margin: 0 0 20px;
width: 576px;
height: 49px;
background: url(../../event/img/infomation_title.png) no-repeat left top;
background-size: 576px auto;
text-indent: -9999px;
}

#content #information p {
margin: 0 0 20px;
font-size: 20px;
color: #ffffff;
}

#content #information .img01 {
width: 1000px;
height: 1506px;
background: url(../../event/img/infomation_img01.jpg) no-repeat left top;
text-indent: -9999px;
}

@media screen and (max-width: 750px) {
#content #information {
margin: 0 15px 50px;
width: auto;
}

#content #information h2 {
margin: 0 0 15px;
width: 290px;
height: 25px;
background-size: 290px auto;
}

#content #information p {
margin: 0 0 15px;
font-size: 15px;
}

#content #information .img01 {
padding-top: calc(5426 / 690 * 100%) ;
width: auto;
height: 0;
background-image: url(../../event/img/infomation_img01_s.jpg);
background-size: cover;
}

}

/* -----------------------------
  btnArea
------------------------------*/
#content .btnArea {
margin-bottom: -99px;
padding-bottom: 95px;
border-bottom: 1px solid #494949;
}

#content .btnArea li {
margin: auto;
width: 660px;
}

#content .btnArea li a {
display: block;
width: 660px;
height: 80px;
background: url(../../event/img/btn_arrow.png) no-repeat right 48px center #ffffff;
background-size: 13px auto;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #3e3a39;
line-height: 80px;
}

#content .btnArea li a:hover {
text-decoration: none;
}

@media screen and (max-width: 750px) {
#content .btnArea {
margin-bottom: -70px;
padding-bottom: 105px;
}

#content .btnArea li {
margin: 0 33px;
width: auto;
}

#content .btnArea li a {
padding-right: 20px;
width: auto;
height: 56px;
box-sizing: border-box;
background-position: right 12px center;
background-size: 10px auto;
font-size: 18px;
line-height: 56px;
}
}