/**
*
* Ukelele template
*
**/
.homeTop {
  background-image: url(../template-img/homeTopBackground.jpg);
}

.menu {
  background-image: url(../template-img/menuBackground.jpg);
}

/*
 * Card icons (inside the last .bcard, only rendered when there are 2+ cards).
 * .bcard is position:relative, so these are anchored to the card's corners with
 * fixed px values and do not depend on the card's height/content.
 * Tune only the size/offset values below.
 */
.musicImg,
.kingImg,
.nineImg {
  position: absolute;
}

.musicImg {
  width: 120px;
  top: -90px;
  left: 40px;
}

.kingImg {
  width: 110px;
  top: -60px;
  right: 40px;
}

.nineImg {
  width: 120px;
  bottom: -90px;
  right: 40px;
}

@media (max-width: 576px) {
  .musicImg {
    width: 60px;
    top: -45px;
    left: 10px;
  }

  .kingImg {
    width: 55px;
    top: -30px;
    right: 10px;
  }

  .nineImg {
    width: 60px;
    bottom: -45px;
    right: 10px;
    display: block;
  }
}

/*
 * Note icon above the "Testimonials" title, at the left (below the teacher button).
 * Anchored to the #studentReviews container (outside the .row/carousel) with fixed px values.
 */
.reviewNoteIcon {
  position: absolute;
  width: 80px;
  top: -60px;
  left: 82px;
  pointer-events: none;
}

@media (max-width: 576px) {
  .reviewNoteIcon {
    width: 60px;
    top: -35px;
    left: 10px;
  }
}

/* News card / teacher description backgrounds */
.newsBG {
  background-image: url(../template-img/newsBG.png);
}

.trapezoidRDiv {
  background-image: url(../template-img/descriptor.png);
}

@media (max-width: 576px) {
  .newsBG {
    background-image: url(../template-img/newsBGSP.png);
  }
}

/* Footer background */
.pinkBanner {
  background-image: url(../template-img/background-footer.jpg);
}

/* Menu text color */
.menuLink span {
  color: #61574B;
  transition: color 0.2s;
}

/* Menu hover: warm gold from the template's button/crown color */
.menuLink span:hover {
  color: #C68B4B;
}

/* Contact block (email / phone / reception hours) text color */
.leftOverLap .call div a,
.leftOverLap .call div span {
  color: #4C4B4C !important;
}

/* Login submit button (pill, outlined) */
.ukeleleLoginBtn {
  display: inline-block;
  min-width: 140px;
  padding: 8px 32px;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-weight: 600;
  color: #61574B;
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px solid #61574B;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ukeleleLoginBtn:hover {
  background: #61574B;
  color: #fff;
}

/* Teacher login / logout link at the top (pill style, PC and mobile) */
.ukeleleTeacherLogin {
  display: inline-block;
  width: fit-content;
  padding: 6px 28px !important; /* beats ps-3 and the inline padding-top on mobile */
  color: #61574B;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px solid #61574B;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.ukeleleTeacherLogin span {
  color: inherit;
}

.ukeleleTeacherLogin:hover {
  background: #61574B;
  color: #fff;
}

/* PC: d-sm-block makes it a block, keep it centered and shrink-wrapped */
@media (min-width: 577px) {
  .ukeleleTeacherLogin {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: sits in the .mobilemenu flex row next to the toggler */
@media (max-width: 576px) {
  .ukeleleTeacherLogin {
    margin-left: 12px !important;
    padding: 4px 18px !important;
    align-self: center;
    font-size: 14px;
  }
}

/* "アクセス" section title */
#access .titleTxt {
  color: #CFAF8A;
}

/* Access section: address text centered over the image (horizontally + vertically) */
.ukeleleShed .piaonoShedTxt {
  top: calc(3rem + (100% - 3rem) / 2); /* the images have mt-5 (3rem) */
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center !important; /* beats .text-end */
  color: white;
  font-weight: 400;
}

/* PC font size (shared CSS uses 30px, and 35px from 1369px up) */
@media (min-width: 577px) {
  .ukeleleShed .piaonoShedTxt {
    font-size: 32px;
  }
}