/* =========================
   Mv
========================= */

.mv {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
  background-image: url(../img/top/mv-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mv__content {
  margin-left: clamp(24px, 8vw, 120px);
  max-width: 480px;
}
.mv__catch{
  margin-bottom: var(--space-l);
  font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem);
}
.mv__link {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  padding: var(--space-l) 0;
  background: rgba(255,255,255,0.6);
  font-size: var(--font-size-xs);
}
.mv__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
transition: ease .4s;
line-height: 1rem;
}
.mv__link a:hover{
color:#929fc0;
transition: ease .4s;
}

.mv__link a span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* 共通：アイコン */
.mv__link a span::before {
  content: "";
  min-width: 14px;
  min-height: 14px;
  line-height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  display: inline-block;
}

/* 共通：英語テキスト */
.mv__link a::after {
  font-size: 0.85em;
  letter-spacing: 0.05em;
  font-family: serif;
}

/* 個別指定 */
.mv__link a.access span::before {
  background-image: url("../img/top/icon-access.svg");
}
.mv__link a.access::after {
  content: "・ ACCESS MAP";
}

.mv__link a.hour span::before {
  background-image: url("../img/top/icon-hour.svg");
}
.mv__link a.hour::after {
  content: "・ OFFICE HOUR";
}

.mv__link a.line span::before {
  background-image: url("../img/top/icon-line.svg");
}
.mv__link a.line::after {
  content: "・ LINE CONSULTATION";
}

@media (max-width: 768px) {
  
.mv {
  background-position: center right 28%;
  position: relative;
}
.mv {
  min-height: calc(100dvh - 64px);
}

.mv__content {
  margin-left: 0;
  max-width: 100%;
  position: absolute;
  bottom: 15%;
  padding: 0 1rem;
}
    .mv__link {
    justify-content: center;
  }
  .mv__link a {
    flex-wrap: wrap; 
  }
  .mv__link a span {
    justify-content: center;
    width: 100%;
}
  .mv__link a::after {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.2em;
  }
  .mv__link a::after {
  font-size: 0.55em;
  letter-spacing: 0.08em;
}
}
.mv__catch{
    font-family:var(--font-serif)
}

.mv__catch span{
    display: block;
    margin-left: 3rem;
}
/* =========================
   Concept
========================= */
.concept__inner {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: center;
}
.concept__title{
  font-size: var(--font-size-l);
  margin-bottom: var(--space-xl);
}
.concept__text{
  
  margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
  .concept__inner {
    flex-direction: column-reverse;
  }
  .concept__inner{
  gap: 0px;
  }
 .concept__image{
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
  }
}

/* =========================
   Menu
========================= */

.menu .section-title__en{
    background-image: url(../img/top/ttl-menu.svg);
}
.menu__grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 24px;
  justify-content: center;
}

@media (max-width: 768px) {
  .menu__grid {
    grid-template-columns: 1fr;
  }
}
/* ===== card ===== */
.menu-card {
  width: 400px;
  aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, #f7ebf9 0%, #e2e8f6 100%);
  border-radius: 20px;
  box-shadow: 5px 10px 20px rgba(156, 145, 140, 0.1);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* ===== link (card full) ===== */
.menu-card__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* ===== image ===== */
.menu-card__img {
  width: 350px;
  margin: 0 auto;
  display: block;
  transition: transform 0.4s ease-in;
  will-change: transform;
}

/* hover effect */
.menu-card:hover .menu-card__img {
  transform: scale(1.03);
}
.menu-card:hover{
  opacity: 0.8;
  transition: all 0.4s ease-in;
}
/* ===== title ===== */
.menu-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: var(--space-m);
  padding: 0.5rem 0;
}

/* ===== title EN ===== */
.menu-title__en {
  display: block;
  font-size: 11px;
  color: #b9aebb;
  letter-spacing: 2px;
}

.menu-title__jp {
  display: block;
}

@media (max-width: 768px) {
.menu-card {
  width: 100%;
}

}
/*******************/

/* =========================
   Gallery
========================= */
.gallery {
  display: flex;
}
.gallery__item{
  width: 33%;
  height: 300px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {

.gallery__item{
  height: 130px;
}
}

/* =========================
   Profile
========================= */
.profile__inner {
  display: flex;
  gap: 40px;
}
.profile__left{
 width: 40%;
 position: relative;
}
.profile__left img{
  width: 100%;
  margin: 0 auto;
}
.profile__title{
  margin-bottom: var(--space-l);
}
.profile__left .section-title__en{
    background-image: url();
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 220px;
    height: 80px;
    display: block;
    margin: 0 auto;
}

.profile__content{
 width: 60% ;
}
.profile__text{
  margin-bottom: var(--space-l);
}

.profile__certification {
  font-size: 14px;
}
.profile__certification span{
  background-color: #333;
  color: #fff;
  padding: 5px 15px;
  margin: 10px;
}
.profile__certification li{
  display: inline-block;
  margin: 3px 10px;
}



@media (max-width: 768px) {
  
.profile__left,
.profile__content{
 width: 100%
}
.profile__left img{
  width: 100%;
  max-width: 350px;
  display: block;
}
  .profile__inner {
    flex-direction: column;
  }
  
.profile__text br{
  display: none;
}
}
/* =========================
   Q&A
========================= */

.faq .section-title__en{
    background-image: url(../img/top/ttl-qa.svg);
}
.profile .section-title{
  position: absolute;
  left: 0;
  top:0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  z-index: 1;
}
.profile  .section-title__jp{
  writing-mode:vertical-lr;
  display: block;
}
.profile .section-title__en{
    background-image: url(../img/top/ttl-profile.svg);
    width: 80px;
    height: 200px;
}

.faq:before{
    width: 100%;
    height: 500px;
    content: "";
    min-width: 100vw;
    position: absolute;
    z-index: -1;
    background-image: url(../img/common/bg-gradiant.webp);
    background-repeat: no-repeat;
    background-size: cover;
}
.faq{
    position: relative;
}
.faq .layout{
    background-color: #fff;
    margin-top: 150px;
    min-height: 500px;
    padding: 10%;
    box-shadow: 5px 5px 10px rgba(143, 149, 159, 0.2);
}
.faq__item .faq__question {
  position: relative;
  width: 100%;
  margin: 0 0 1em 0;
  color: #1b2538;
  border-bottom: solid #d7d7d7 1px;
}
.faq__item .faq__question:last-child{
  border-bottom:none
}
.faq__item .faq__question input {
  display: none;
}
/* 質問 */
/* label本体（質問文） */
.faq__item .faq__question label {
  position: relative;
  display: block;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
}
.faq__item .faq__question label span{
  content: '';
  font-family: serif;
  font-size: 1.5em;
  color: #b9aebb;
  font-family:
    "MS P明朝",
    "MS PMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    serif;
    margin-right: 5px;
}
.faq__item .faq__question label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.6rem;
  width: 1.2em;
  height: 2px;
  background-color: #b9aebb;
  transform: translateY(-50%);
}
.faq__item .faq__question label:hover {
  color: #b9aebb;
  transition: all 0.3s;
}
/* --質問の＋アイコン */
/* 縦線（＋の縦棒） */
.faq__item .faq__question label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.6em;
  width: 1.2em;
  height: 2px;
  background-color: #b9aebb;
  transform: translateY(-50%) rotate(90deg);
  transition: opacity 0.3s ease;
}
/* 答え */
.faq__item .faq__question .faq__answer {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition:
    max-height 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    padding 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 質問を開いた時の仕様 */
/* --答えの高さ */
.faq__item .faq__question input:checked ~ .faq__answer {
  max-height: 40em;
  padding: 1em;
  background-color: #f8f6f8;
}
/* 質問をクリックした時の+の動き */
.faq__item .faq__question input:checked + label::after {
  opacity: 0;
}

@media (max-width: 768px) {
  .faq .layout{
    padding: 10% 0;
    max-width: 90%;
}
}