@charset "utf-8";


/*====================================================================

index

=====================================================================*/
#index header .logo {
 display: none;
}

#index .main_photo {
 position: static;
 width: 100%;
 height: 65vw;
 margin: 0 auto;
 text-align: center;
 background: url(../img/index/main_photo.jpg) center no-repeat;
 background-size: cover;
}

#index .main_photo>img {
 width: 100%;
 max-width: 1561px;
 margin: 0 auto;
}

@media screen and (max-width:640px) {
 #index .main_photo {
  height: 100vw;
  background-size: 190% auto;
  background-position: top 16px center;
 }

 #index .main_photo>img {}
}



#index main {}

#index main .contents h2,
#index main .event h2 {
 padding-bottom: 0.8em;
 color: #0d3896;
 font-size: 2em;
 font-weight: 400;
}

#index main .info {
 border: 1px solid #e2e2e2;
 margin-bottom: 9%;
}

#index main .info h2 {
 padding: 1em 3%;
 font-size: 1.21em;
 font-weight: 500;
 background: #f6f6f6;
}

#index main .info ul {
 width: 100%;
}

#index main .info li {
 padding: 0.7em 3%;
 border-top: 1px solid #e2e2e2;
}

#index main .info li:nth-child(even) {
 background: #f6f6f6;
}

#index main .info li a {
 display: block;
 text-decoration: none;
}

#index main .info li span {
 float: left;
 padding: 0 0.8em 0 0;
 font-size: 0.79em;
}

#index main .info li span img {
 padding-right: 0.8em;
}

#index main .info li a:hover {
 color: #0578E3
}

/* #index main .pickupBanner {
 margin-bottom: 6%;
 overflow: hidden;
 box-sizing: border-box;
 border: 1px solid #e2e2e2;
 background: #f6f6e1;
}

#index main .pickupBanner img {
 width: 100%;
 max-width: 860px;
}

@media screen and (max-width:640px) {
 #index main .pickupBanner img {
  width: 157%;
 }
} */

#index main .contents {}

#index main .contents div.inner {
 width: 100%;
 margin-bottom: 4%;
 box-sizing: border-box;
}

#index main .contents div.inner:nth-of-type(1) {
 width: 100%;
 margin-bottom: 4%
}

#index main .contents div.inner div {
 float: left;
 position: relative;
 margin: 0 2.5% 5%;
 box-sizing: border-box;
 border: 1px solid #e2e2e2;
}

#index main .contents div.inner div img {
 width: 100%;
}

#index main .contents div.inner div span {
 position: absolute;
 left: 0;
 display: block;
 width: 98%;
 text-align: center;
}

#index main .contents div.inner div a>img {
 box-sizing: border-box;
 padding: 3px;
}

#index main .contents div.inner div.boxB {
 width: 48%;
 margin: 0 1% 5%;
 background: #fff;
}

#index main .contents div.inner div.boxS {
 width: 28.3%;
}

#index main .contents div.inner div.boxW {
 width: 100%;
 margin: 0 0 1em;
}

#index main .contents div.inner div.boxW .showPc {
 display: block;
 width: 100%;
}

#index main .contents div.inner div.boxB span {
 background: #f6f6f6;
 margin: 0 1%;
 bottom: 1%;
}

#index main .contents div.inner div.boxS span {
 top: 0;
}

#index main .contents div.inner div.boxB span img {
 width: 80%;
 max-width: 250px;
}

#index main .contents div.inner div:hover {
 background: #0d3896;
}

#index main .contents div.inner div:hover a>img {}


#index main .event .inner * {}

#index main .event .inner {
 width: 90%;
 max-width: 692px;
 margin: 0 auto 4em;
}

#index main .event .inner li {
 width: 80vw !important;
 max-width: 692px;
}

#index main .event .inner li img {
 width: 100% !important;
 max-width: 692px;
}



@media screen and (max-width: 960px) {}

@media screen and (max-width: 750px) {

 #index main .contents div.inner div.boxB,
 #index main .contents div.inner div.boxS {
  width: 95%;
 }

 #index main .contents div.inner div.boxS {}

 #index main .contents div.inner div.boxW .showPc {
  display: none;
  width: 100%;
 }
}