.studio {
	.mail-wrap {
		margin-top: 40px;
		text-align: center;

		@media (768px <= width) {
			.link-mail {
				font-size: 30px;
			}
			.link-mail::before {
				width: 2rem;
				height: 2rem;
				margin-right: 10px;
			}
		}

		@media (width < 768px) {
			.link-mail {
				font-size: 4vw;
			}
		}
	}
}

.detail {
  .info-area {
    margin-top: 10rem;
    padding-bottom: 0;
    @media (width < 768px) {
      margin-top: 6rem;
    }
  }
  .head-image {
    margin-top: -20rem;
    margin-bottom: 10rem;
    @media (width < 768px) {
      margin-top: -12rem;
      margin-bottom: 4rem;
    }
  }

	.page-link {
		display: flex;
		justify-content: center;
		margin-bottom: 60px;

		li:not(:first-child) {
			margin-left: 50px;
		}

		li {
			a {
				display: block;
				position: relative;
			}

			a::after {
				content: '▼';
				display: block;
				margin: 0 auto;
				color: var(--primary-color);
				position: absolute;
				left: 50%;
				bottom: -20px;
				transform: translateX(-50%);
				transition: all ease 300ms;
			}

			a:hover::after {
				bottom: -25px;
			}
		}
	}

	.studio-detail {
		.flex-area {
			@media (768px <= width) {
				display: flex;
				justify-content: space-between;
			}

			.image {
				width: 25%;

				@media (width < 768px) {
					width: 90%;
          margin: 0 auto;
				}

				.image-list {
					display: flex;
					flex-wrap: wrap;
					margin: 50px 30px 0;

					@media (width < 768px) {
						margin: 30px 0 0;
					}

					li {
						width: 48%;
						text-align: center;
					}

					li:not(:nth-child(2n+1)) {
						margin-left: 4%;
					}

					li:nth-child(n+3) {
						margin-top: 5%;
					}
				}
			}

			.map {
				width: 70%;

				@media (width < 768px) {
					width: 100%;
					margin-top: 30px;
				}
			}
		}

		.google-map {
			margin-top: 4rem;

			p {
				margin-top: 10px;
				text-align: center;
			}
		}
	}

	.by-class-titles {
		margin-top: 80px;
	}

	.overview-area {
		margin-top: 80px;
	}
}

.by-class-titles {
	display: flex;

	li {
		cursor: pointer;
		width: 23.5%;
		background-color: #fff;
		border-top: 2px solid var(--primary-color);
		border-left: 2px solid var(--primary-color);
		border-right: 2px solid var(--primary-color);
		border-radius: 15px 15px 0 0;
		padding: 20px 0;
		color: var(--primary-color);
		font-size: 22px;
		text-align: center;

		@media (width < 768px) {
			border-radius: 8px 8px 0 0;
			padding: 10px 0;
			font-size: 14px;
		}
	}

	li:not(:nth-child(4n+1)) {
		margin-left: 2%;
	}

	@media (768px <= width) {
		li {
			transition: all ease 300ms;
		}

		li:hover {
			background-color: var(--primary-color);
			color: #fff;
			transition: all ease 300ms;
		}
	}

	li.show-tab {
		background-color: var(--primary-color);
		color: #fff;
	}
}

.by-class-contents {
	border-top: 2px solid var(--primary-color);
}

.age-level {
	display: none;
}

.level-setting.no-practice {
	.practice-click-text {
		display: none;
	}
}

.level-setting.age-little {
	.age-level-list {
		.age-little {
			display: block;
		}
	}
}

.level-setting.age-elementary {
	.age-level-list {
		.age-elementary {
			display: block;
		}
	}
}

.level-setting.age-regular {
	.age-level-list {
		.age-regular {
			display: block;
		}
	}
}

.level-setting.age-sisters {
	.age-level-list {
		.age-sisters {
			display: block;
		}
	}
}

.studio-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 2rem;
  @media (width < 768px) {
    grid-template-columns: repeat( 2, 1fr);
  }
  li {
    background: #fff;
    border-radius: 2rem;
    padding: 2rem;
    color: #000;
    font-size: var(--fz-14);
    position: relative;
    overflow: hidden;
    z-index: 1;
    @media (width < 768px) {
      padding: 1.5rem;
    }
    .studio-title {
      color: #F5929E;
      font-size: 2rem;
      font-weight: 700;
      @media (width < 768px) {
        font-size: var(--fz-18);
      }
      + * {
        margin-top: 1rem;
      }
    }
    .text-icon-link {
      + .text-icon-link {
        margin-top: 5px;
      }
    }
  }
  li::after {
    content: '';
    background: url('../../img/top/about-bg.png') no-repeat top left / 176px auto;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 2rem;
    left: 43%;
    filter: grayscale(1) brightness(10) contrast(0.3);
    opacity: .1;
    z-index: -1;
  }
}