@charset "utf-8";
/* CSS Document */
.under_mv{
  background: url(../../img/mv.png) no-repeat center;
  background-size: cover;
}
.catalog{
	padding: 50px 0 30px;
	max-width: 1100px;
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
}
#wrap #container #maincol .section ul li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 230px;
}

.other_inner{
	max-width: 1024px;
	width: 90%;
	margin: 0 auto;
}
.other_head{
  font-size: var(--fs-32);
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 10px;
  text-align: center;
}
.other_list	{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;
	margin-top: 20px;
}
.other_btn {
  display: flex;
  align-items: center;
  padding: 5px 25px 5px 10px;
  position: relative;
  font-weight: bold;
  background: #bde6f9;
  color: var(--blue);
  border-radius: 6px;
  width: calc((100% / 4) - (15px / 4));
  min-height: 70px;
  &::after {
		content: '';
		width: 0;
		height: 0;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 12px solid var(--blue);
		display: block;
		position: absolute;
		right: 10px;
  }
}
@media screen and (max-width: 767px){

#wrap #container #maincol .section ul li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 165px;
}

.other_btn {
  width: calc(50% - 2.5px);
  min-height: 50px;
	font-size: min(1.6rem, 3vw);
  &::after {
		content: '';
		width: 0;
		height: 0;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 12px solid var(--blue);
		display: block;
		position: absolute;
		right: 10px;
  }
}
}
@media screen and (max-width: 510px){
	#wrap {
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	#wrap #container{
		transform: scale(.9);
    transform-origin: top;
    margin-bottom: -215px;
  }
}
@media screen and (max-width: 400px){
	#wrap #container{
		transform: scale(.75);
    margin-bottom: -545px;
	}
}