/* CSS Document */

@charset "UTF-8";

*:focus { outline: none;}
#pageOther.pageFair #container h1 { margin: 0;}
#pageOther.pageFair #container h1 + .contents-menu { padding: 0; margin: -4px auto 0 auto;}
#pageOther.pageFair #container h2 { padding: 1em 0;}

#pageOther.pageFair #container #anniversary h2  { background:#e95383;}
#pageOther.pageFair #container #Bag h2  { background:#6b1685;}
#pageOther.pageFair #container #gourmet h2  { background:#f37d6e;}
#pageOther.pageFair #container #present h2  { background:#0068b7;}
#pageOther.pageFair #container #sale h2{ background:#c9a059;}
#pageOther.pageFair #container #point h2  { background:#fff100; color: #000;}
#pageOther.pageFair #container #event h2  { background:#ed7923;}
#pageOther.pageFair #container #cm h2     { background:#a9cb61;}
#pageOther.pageFair #container #fuji h2   { background:#f5a100;}

#pageOther.pageFair #container small{ margin:6px 0; display:inline-block;}


#pageOther.pageFair #container #main {
	position: relative;
	margin-bottom: 0 ;
}
#pageOther.pageFair #container #main .menuBtn {
	position: absolute;
	bottom: -12px;
	right: -15px;
	line-height: 1;
}
#pageOther.pageFair #container #main .menuBtn a {
	position: relative;
	background: #df1354;
	color: #FFF;
	padding: 5px 15px 5px 35px;
}
#pageOther.pageFair #container #main .menuBtn a::before {
	font-family: 'FontAwesome';
	content: "\f107";
	font-size: 100%;
	position: absolute;
	top: 25%;
	left: 15px;
}

#main + #menu > .text { display:none;}

#pageOther.pageFair #container .inpage-menu {
  overflow: hidden;
  padding: 1.5em 0 0.8em 0;
  background: linear-gradient(#ecdbd4, #ffffff);
}
#pageOther.pageFair #container .inpage-menu ul li a {
  padding-left:10px;
  padding-right:10px;
  text-align: center;
  font-size: 15px;
  height: 6em;
}
#pageOther.pageFair #container .inpage-menu ul li a::after {
  right:46%;
  top: auto;
  bottom: 5%;
}

#pageOther.pageFair #container .inpage-menu ul li.anniversary a {		background-color:#BE1D66; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.anniversary a:hover {	background-color:#940c49;}
#pageOther.pageFair #container .inpage-menu ul li.bag a {			background-color:#BE1D66; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.bag a:hover {		background-color:#940c49;}
#pageOther.pageFair #container .inpage-menu ul li.gourmet a {			background-color:#f37d6e; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.gourmet a:hover {		background-color:#f06a5b;}
#pageOther.pageFair #container .inpage-menu ul li.sale a {				background-color:#c9a059; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.sale a:hover {		background-color:#ad843c;}
#pageOther.pageFair #container .inpage-menu ul li.present a {			background-color:#77AC72; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.present a:hover 	{	background-color:#51854c;}
#pageOther.pageFair #container .inpage-menu ul li.point a {			background-color:#fff100; color: #000;}
#pageOther.pageFair #container .inpage-menu ul li.point a:hover {	background-color:#ffba00;}
#pageOther.pageFair #container .inpage-menu ul li.million a {		background-color:#e7336e;}
#pageOther.pageFair #container .inpage-menu ul li.million a:hover {	background-color:#dc1e4e;}
#pageOther.pageFair #container .inpage-menu ul li.event a {			background-color:#ed7923; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.event a:hover {	background-color:#e85b0d;}
#pageOther.pageFair #container .inpage-menu ul li.fuji a {			background-color:#f5a100; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.fuji a:hover {	background-color:#f57900;}
#pageOther.pageFair #container .inpage-menu ul li.cm a {			background-color:#a9cb61; padding-top: 1.8em;}
#pageOther.pageFair #container .inpage-menu ul li.cm a:hover {		background-color:#94bc49;}

#pageOther.pageFair #container section a:hover img {
  opacity: 0.7;
  transition: 0.3s;
}

#pageOther.pageFair #container .text p {
	margin: 1.5em 0 1em 0;
	padding:0;
	line-height: 1.5;
	font-size: 82%;
	text-align: center;
}

@media screen and (min-width: 961px) {
#pageOther.pageFair #container #main .menuBtn a {
	font-size: 124%;
}
#main + .contents-menu { margin-top:-5px !important;}
#pageOther.pageFair #container .inpage-menu ul {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
#pageOther.pageFair #container .inpage-menu ul li {
	width:30%;
	float:none;
	margin:0 10px 15px;
}
#pageOther.pageFair #container #cm .movie {
  max-width: 760px;
  margin: 0 auto;
}
#pageOther.pageFair #container .text p {
	line-height: 1.5;
	font-size: 100%;
}
}
@media screen and (max-width: 961px) {
#pageOther.pageFair #container h2 { margin:10vw -5vw 3vw -5vw; padding:1em 0;}
#main + .contents-menu { margin-top:-1vw !important;}
.sp { display:none;}
}


@media only screen and (min-width: 769px) and (max-width: 960px) {
#pageOther.pageFair #container h1 {
	margin:-3vw -3vw 0 -3vw;
}

#pageOther #container section {
    margin: 3vw;
}
.contents-menu {
    margin: 5vw 0 -5vw 0vw;
    text-align: left;
}
#pageOther.pageFair #container .inpage-menu {
  margin: auto 0;
}
#pageOther.pageFair #container .inpage-menu ul {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
#pageOther.pageFair #container .inpage-menu ul li {
	width:30%;
	float:none;
	margin:0 10px 15px;
}
#pageOther.pageFair #container .inpage-menu ul li a {
  padding-bottom: 25px;
}

}

@media only screen and (min-width: 641px) and (max-width: 769px) {
#pageOther.pageFair #container h1 {
	margin:-5vw -5vw 0 -5vw;
}
#pageOther.pageFair #container h2 {
  font-size: 150%;
  margin: 5vw -5vw 2vw -5vw;
}
#pageOther.pageFair #container .contents-menu {
	margin:8vw -5vw 5vw -5vw;
	overflow:hidden;
}
#pageOther.pageFair #container h1 + .contents-menu {
	margin:-4px -5vw 0 -5vw;
}
#pageOther.pageFair #container .inpage-menu {
  margin: auto -5vw;
  padding: 2vw 0 0 1vw;
}
#pageOther.pageFair #container .inpage-menu ul {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
#pageOther.pageFair #container .inpage-menu ul li {
	width:25.5%;
	float:none;
	margin:0 1% 15px;
}
#pageOther.pageFair #container .inpage-menu ul li a {
  padding-bottom: 1.5em;
  font-size: 13px;
  height: 6.2em;
}
#pageOther.pageFair #container .inpage-menu ul li a::after {
  right: 48% !important;
}
#pageOther.pageFair #container .inpage-menu ul li a br {
	display:inline-block;
}
#pageOther.pageFair #container .inpage-menu ul li.point a,
#pageOther.pageFair #container .inpage-menu ul li.million a,
#pageOther.pageFair #container .inpage-menu ul li.fuji a {
	padding-top: 1em;
}
}


@media all and (max-width: 640px) {
.sp { display:block;}
#pageOther.pageFair #container h1 {
	margin:-5vw -5vw 0 -5vw;
}
#pageOther.pageFair #container .contents-menu {
	margin:8vw -5vw 5vw -5vw;
	overflow:hidden;
}
#pageOther.pageFair #container h1 + .contents-menu {
	margin:-4px -5vw 0 -5vw;
}
#pageOther.pageFair #container .inpage-menu {
  padding: 4vw 0 0 1vw;
}
#pageOther.pageFair #container .inpage-menu ul {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
#pageOther.pageFair #container .inpage-menu ul li {
	width:42%;
	float:none;
	margin:0 1vw 2vw;
	font-size:84%;
}
#pageOther.pageFair #container .inpage-menu ul li.fuji a {
	padding-top: 1em;
}

#pageOther #container section#event,
#pageOther #container section#point {
  margin: 0;
}
#pageOther #container section#anniversary,
#pageOther #container section#gourmet,
#pageOther #container section#sale,
#pageOther #container section#present {
  margin: 10vw 0 0;
}
#pageOther.pageFair #container section a.btnNormal {
  width: 90%;
  margin: auto;
  font-size : 110%;
}
}

@media all and (max-width: 414px) {
#pageOther.pageFair #container .inpage-menu ul li a {
  font-size:88%;
  padding-left:5px;
  padding-right:5px;
  height: 5.3em;
}
#pageOther.pageFair #container .contents-menu ul li a::after {
    font-size: 100%;
}
}

@media all and (max-width: 360px) {
#pageOther.pageFair #container .inpage-menu ul li {
  font-size: 75%;
}
#pageOther.pageFair #container .inpage-menu ul li a {
  height: 5.4em;
  font-size: 100%;
}
}


.youtube-tate {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 9 / 16;
	position: relative;
	margin: 20px auto;
}
.youtube-tate iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.movie-tate {
	display: none;
}
@media screen and (min-width: 961px) {
	.movie-tate {
		display: none;
	}
}
@media all and (max-width: 640px) {
	.movie {
		display: none;
	}
	.movie-tate {
		display: block;
	}
}