/* ==========================================================================
   CONCEPT: ロゴ内の「丹・弛・佗」3文字をそれぞれタップして切り替える演出。
   既存の丹・弛・佗カードの文章・構造・配色は変更しない（内容はそのまま）。
   表示方法（3枚同時表示 → 文字タップで1枚ずつ切り替え表示）のみを変更する。
   ========================================================================== */

.concept-interactive{
  text-align:center;
  padding:clamp(32px,6vw,64px) clamp(16px,4vw,32px);
  margin-top:40px;
  background:linear-gradient(180deg,var(--white) 0%,var(--cream) 100%);
  border-radius:16px;
}

/* --- ロゴ本体（浮遊アニメーションは画像+ヒットエリアをまとめた.concept-logo-stageに適用し、
       文字の位置がずれないようにする） --- */
.concept-logo-stage{
  position:relative;
  width:clamp(264px,40.8vw,432px);
  max-width:100%;
  aspect-ratio:400/397; /* logo-navy.png の実寸比率と一致させ、どの画面幅でもホットスポットがずれないようにする */
  margin:0 auto;
  animation:conceptFloat 6s ease-in-out infinite;
}
.concept-logo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(33,58,112,.28));
  pointer-events:none;
  user-select:none;
}
@keyframes conceptFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

.concept-hotspots{
  position:absolute;
  inset:0;
}

/* --- 各文字の透明クリック領域（画像に対する割合指定。%指定なのでリサイズしてもずれない） --- */
.concept-hotspot{
  position:absolute;
  left:var(--hs-left);
  top:var(--hs-top);
  width:var(--hs-w);
  height:var(--hs-h);
  border:none;
  background:none;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.concept-hotspot::before{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 72%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.concept-hotspot:hover::before,
.concept-hotspot:focus-visible::before{
  opacity:1;
}
.concept-hotspot:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:5px;
}
/* 選択中はシャンパンゴールド系の控えめな表示に切り替える */
.concept-hotspot.is-selected::before{
  opacity:1;
  background:radial-gradient(circle,rgba(180,151,97,.5) 0%,rgba(180,151,97,0) 75%);
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- 操作案内 --- */
.concept-logo-hint{
  margin:24px 0 0;
  font-family:var(--font-en);
  color:#213A70;
  letter-spacing:.06em;
  font-size:calc(.95rem + 2pt);
}

/* --- 共通のコンセプト表示エリア（文字タップで中身がフェード切り替え） --- */
.concept-display{
  position:relative;
  margin-top:8px;
}
.concept-panel{
  max-width:560px;
  margin:0 auto;
  opacity:0;
  transition:opacity .4s ease;
}
.concept-panel.is-visible{
  opacity:1;
}

@media(max-width:700px){
  .concept-interactive{ margin-top:32px; }
}