/* CSS Document */

@charset "UTF-8";

#pageOther.pageFair #container section,
#pageOther.pageFair #container nav ul { line-height:0; margin: 0 auto; }
#pageOther.pageFair #container h1,
#pageOther.pageFair #container h2,
#pageOther.pageFair #container p { margin: 0; padding:0; line-height: 0;}

#pageOther.pageFair p.btnList {
	background: #fff;
	display: inline-block;
	padding: 20px 20px 0 !important;
	margin: 0 5vw 15vw !important;
	border-radius: 15px;
}
#pageOther.pageFair p.btnList img {
	width: 64vw;
}
#pageOther.pageFair #container nav ul {
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto 30px;
  text-align: center;
}
#pageOther.pageFair #container nav ul li {
  display: inline-block;
  margin: 8px 0;
  width: 48%;
}
#pageOther.pageFair #container nav ul li a:hover {
  opacity: 0.7;
  transition: 0.3s;
}
#pageOther.pageFair #container nav ul li img {
  max-width: 100%;
}

#pageOther.pageFair #container a.btnNormal {
	line-height:1.6;
	margin-top:1em;
}
#pageOther.pageFair #container #main h1 {
	margin-bottom : 0;
}
#pageOther.pageFair #container #event {
	background:url(images/pc/event-bg.png) center top;
	padding: 0;
	overflow: hidden;
}
#pageOther.pageFair #container #event .wrap {
	position: relative;
	height: 100%;
}
#pageOther.pageFair #container #event h2 {
	margin: 30px auto 50px;
}
#pageOther.pageFair #container #event p {
	margin: 0 0 20px;
}
#pageOther.pageFair #container #event p img {
	margin: 0 0 20px;
}
#pageOther.pageFair #container #event .maruTop {
	margin-top: -2px;
} 
#pageOther.pageFair #container #event .maruBottom {
	margin: 0;
} 

#pageOther.pageFair #container #cm h2 {
	background:#e6416b;
	line-height:1;
	padding: 20px 0;
	margin-bottom: 1em;
}

@media screen and (min-width: 961px) {
#pageOther.pageFair p.btnList {
	width: 850px;
	padding: 20px 20px 0 !important;
	margin: 0 0 10px !important;
}
#pageOther.pageFair p.btnList img {
	width: auto;
}

#pageOther.pageFair #container #cm .movie {
  max-width: 760px;
  margin: 0 auto;
}
#pageOther.pageFair #container section a.btnNormal {
  margin: 1em auto 3em;
}
}

@media only screen and (min-width: 769px) and (max-width: 960px) {
#pageOther.pageFair #container h1 {
	margin:-3vw -3vw 0 -3vw;
}
#pageOther.pageFair p.btnList {
	margin : 0 5vw 5vw !important;
}
#pageOther.pageFair p.btnList img {
	width: auto;
}
#pageOther #container section {
    margin: 3vw;
}
#pageOther.pageFair #container nav ul li {
	margin: 8px 4px;
}
#pageOther.pageFair #container section a.btnNormal {
  width: 15em;
  margin: 1em auto 3em;
  padding: 1em 1.8em 1.2em 1em;
}
#pageOther.pageFair #container #event h2 {
	margin: 3vw 0 5vw 0;
}
#pageOther.pageFair #container #event h2 img {
	width: 70vw;
}
#pageOther.pageFair #container #event p {
	padding: 0 5vw;
}
#pageOther.pageFair #container #cm .movie {
  max-width: 760px;
  margin: 0 auto;
}
#pageOther.pageFair #container .sp {
  display: none;
}
}

@media only screen and (min-width: 641px) and (max-width: 769px) {
#pageOther.pageFair #container h1 {
	margin:-5vw 0 0 0;
}
#pageOther.pageFair #container h2 {
  font-size: 150%;
  margin: 5vw -5vw 2vw -5vw;
}
#pageOther.pageFair #container nav ul li {
  margin: 8px 1%;
  width: 46.3%;
}
#pageOther.pageFair #container section {
	margin:5vw 0;
}
#pageOther.pageFair #container #event h2 {
	margin: 3vw 0 5vw 0;
}
#pageOther.pageFair #container #event h2 img {
	width: 70vw;
}
#pageOther.pageFair #container #event p {
	padding: 0 5vw;
}

#pageOther.pageFair #container section a.btnNormal {
  width: 15em;
  margin: 1em auto 3em;
  padding: 1em 1.8em 1.2em 1em;
}
#pageOther.pageFair #container .sp {
  display: none;
}
}


@media all and (max-width: 640px) {
#pageOther.pageFair #container h1 {
	margin:-1vw 0 0 0;
}
#pageOther #container section {
  margin: 1vw 0;
}
#pageOther.pageFair #container nav ul {
	margin: 0 0 2em 0;
}
#pageOther.pageFair #container nav ul li {
  margin: 1.5% 1%;
  width: 44%;
}
#pageOther.pageFair #container #event {
	padding: 0;
	background-size: 58px auto;
}
#pageOther.pageFair #container #event h2 {
	margin: 5vw 6vw;
}
#pageOther.pageFair #container #event h2 img {
	width: 100%;
}
#pageOther.pageFair #container #event p {
	padding: 0 5vw;
}
#pageOther.pageFair #container #event p img.btn {
	width: 55vw;
}
#pageOther.pageFair #container #event .maruBottom {
	margin: -20px 0 0px;
}
#pageOther.pageFair #container #amusement {
	margin-top: -20px;
}
#pageOther.pageFair #container section a.btnNormal {
  width: 15em;
  margin: 0 auto 3em;
  padding: 1em 1.8em 1.2em 1em;
}
#pageOther.pageFair #container #cm .movie {
  width: 90%;
  margin: 0 auto;
}
#pageOther.pageFair p.btnList {
	border-radius: 8px;
}
}

@media all and (max-width: 414px) {
#pageOther.pageFair #container section a.btnNormal {
  font-size: 100%;
}
}