@charset "utf-8";

.hero2 {
  height: 65vh;
  background-color: #a9966335;
  position: relative;

}

.hero2:nth-child(3) {
  height: 25vh;
  border-radius: 0 0 50% 50%;
}

/* ABOUTページ */

h2 {
  margin-bottom: 2rem;
}

p {
  text-align: start;
  line-height: 2;
}

.hero2 {
  height: 70vh;
  background-color: #a9966335;
  position: relative;
}

.hero2:nth-child(3) {
  height: 25vh;
  border-radius: 0 0 50% 50%;
}

/* トレーナー紹介 */
.sec06 {
  background-color: #a9966335;
  border-radius: 50% 50% 0 0;
}

.sec07 {
  background-color: #a9966335;
}


.introduction {
  font-size: 1rem;
  line-height: 2em;
  margin-top: 2rem;
  text-align: left;
}

.introduction details {
  margin-bottom: 2rem;
  border-bottom: 1px dashed #2eb087;

}

summary {
  font-size: large;
  margin-bottom: 1rem;
}

.avatar {
  float: right;
  border-radius: 100%;
  shape-outside: circle();
  shape-margin: 1rem;
  width: 30%;
  margin: 1.5rem;
}

.txt-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
}

/* 資格・経歴 */

.list {
  padding: 1.5rem;
  font-size: smaller;
  line-height: 1.7;
  width: 90%;
  margin: 0 auto;
}

/* レギュラーレッスン */

/* お客様の声 */

.nyano-feedback-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: auto;
}

.nyano-feedback-card {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.nyano-feedback-card:nth-child(odd) {
  background-color: #F6D7C2;
}

.nyano-feedback-card:nth-child(even) {
  background-color: #8EA9C4;
}

.nyano-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-right: 15px;
}

.nyano-profile-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.nyano-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nyano-profile-footer {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.nyano-feedback-content {
  flex: 1;
  margin-bottom: 1rem;
}

.nyano-feedback-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

.nyano-feedback-content p span {
  font-weight: bold;
  color: #e56b3c;
}

@media (max-width: 480px) {
  .nyano-feedback-card {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .nyano-profile {
    margin-right: 0;
    margin-bottom: 10px;
    width: auto;
  }

  .nyano-feedback-content {
    text-align: left;
  }
}

.sec10 {
  height: 100vh;
  position: relative;
  background-position: center center;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 1) 100%), url(/images/regular.jpg);
  /* background-size: contain; */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* カレンダー */
.sec12 {
  width: 80%;
  margin: 0 auto;
}

.calendar-wrap {
  margin: 0 auto;
  max-width: 1110px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 5rem 0;
}

@media (max-width: 767.98px) {
  .calendar-wrap {
    display: flex;
    flex-direction: column;
  }
}

.calendar {
  width: 100%;
  border-collapse: collapse;
}

.calendar th,
.calendar td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}

.calendar th {
  padding: 6px 10px;
}

@media (max-width: 767.98px) {

  .calendar th,
  .calendar td {
    padding: 6px;
    font-size: 12px;
  }

  .calendar th {
    padding: 3px 6px;
  }
}

.calendar .sun {
  color: #e17f7e;
  background-color: #f8e4e2;
}

.calendar .sat {
  color: #7ab6f3;
  background-color: #e7f6fd;
}

.calendar .mute {
  color: #aaa;
}

.calendar .today {
  background-color: #7d7d7d;
}

.calendar .off {
  background-color: #fadcdb;
}

/* スマホの時はchild1非表示
 */
/* .child1 {
  display: none;
 } */


/* タブレット以上で */
/* @media screen and (min-width: 768px) {

.sp-nav {
  display: block;
}
}

/* PC以上で */
/* @media screen and (min-width: 1024px) {
.sp-nav {
  display: block;
}
}