/* =========================================================
   ENTRY / JOIN
   ---------------------------------------------------------
   ・フェードイン
   ・メッセージ
   ・CTA
   ・entry list（2項目）
   ・SNS chips
========================================================= */

.entry{
  padding-bottom: 96px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}

.entry.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Company/Infoと同じ思想の幅 */
.entry .entryWrap{
  width: min(66.666%, 960px);
  margin-inline: auto;
}

@media (max-width: 767px) {
    .entry .entryWrap {
      width: min(92%, 960px);
    }
}

/* message */
.entry-message{ margin-top: 28px; }

.entry-message .lead{
  margin: 0 0 14px;
  font-size: calc(18px * var(--official-font-scale, 1));
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--deepblue);
}

.entry-message .copy{
  margin: 0 0 14px;
  font-size: calc(22px * var(--official-font-scale, 1));
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .10em;
  color: var(--fg);
}

.entry-message .muted{
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: calc(14px * var(--official-font-scale, 1));
  line-height: 1.9;
  letter-spacing: .14em;
  color: var(--muted);
}

/* CTA */
.entry-cta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}

/* ※ .btn は components.css 側に寄せるのが理想
   ただし今壊したくないので、btnが未定義なら override.css に保険を入れる（後述） */

   /* list */
.entry-list{
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 14px;
}

.entry-list li{
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(141,197,227,.14);
  overflow: hidden;
}

@media (max-width: 767px) {

  .entry-list li{
    padding: 0;
  }

}


/* 左の帯 */
.entry-list li::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 8px;
  background: linear-gradient(180deg,#ffaeef,#f9c543,#8dc5e3);
  opacity: .65;
}

@media (max-width: 767px) {

  .entry-list li::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:100%;
    height: 8px;
    background: linear-gradient(90deg,#ffaeef,#f9c543,#8dc5e3);
    opacity: .65;
  }

}

/* 左ラベル */
.entry-list strong{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(141,197,227,.14);
  border: 1px solid rgba(255,255,255,.45);
}

.entry-list strong span:first-child{
  font-size: calc(12px * var(--official-font-scale, 1));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.entry-list strong span:last-child{
  font-size: calc(10px * var(--official-font-scale, 1));
  opacity: .75;
}

/* 説明 */
.entry-list .expln{
  font-size: calc(14px * var(--official-font-scale, 1));
  letter-spacing: .1em;
}

/* 2行目の説明だけ色変え（あなたのHTML構造前提） */
.entry-list span:nth-of-type(2).expln{
  font-size: calc(11px * var(--official-font-scale, 1));
  color: var(--deepblue);
}

/* note */
.entry-note{
  margin: 18px 0 0;
  text-align: center;
  font-size: calc(13px * var(--official-font-scale, 1));
  letter-spacing: .10em;
  color: var(--muted);
}

/* SNS chips */
.entry-contact-links{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.contact-chip{
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  backdrop-filter: blur(6px);
}

@media (hover:hover){
  .contact-chip:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(141,197,227,.14);
  }
}

.contact-chip .label{
  font-size: calc(12px * var(--official-font-scale, 1));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
}

.contact-chip .desc{
  font-size: calc(12px * var(--official-font-scale, 1));
  color: var(--muted);
}

/* Instagram */
.contact-chip:nth-child(1){
  background: linear-gradient(135deg, rgba(255,174,238), rgba(249,197,67));
}

/* X */
.contact-chip:nth-child(2){
  background: linear-gradient(135deg, rgba(40,40,40,.85), rgba(90,90,90,.65));
  color: #fff;
}
.contact-chip:nth-child(2) .desc{
  color: rgba(255,255,255,.75);
}

/* LINE */
.contact-chip:nth-child(3){
  background: linear-gradient(135deg, rgb(19,203,19), rgba(6,228,6,.655));
}

@media (max-width: 767px){

  .entry-list li{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .entry-list strong span:first-child{
    font-size: calc(14px * var(--official-font-scale, 1));
  }
  .entry-list li span.expln:first-of-type{
    font-size: calc(11px * var(--official-font-scale, 1));
  }
  .entry-contact-links,
  #top .entry .entry-contact-links{
    grid-template-columns: minmax(0, 1fr);
  }
  
}
/* 768px以上：PCの横並びを保ち、固定ラベル幅によるはみ出しを防ぐ */
@media (min-width: 768px){
  .entry-list li{ grid-template-columns: min(280px, 38%) minmax(0, 1fr) auto; }
  .entry-list li > *, .entry-contact-links > *{ min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
  .entry .entry-contact-links .contact-chip .label,
  #top .entry .entry-contact-links .contact-chip .label { font-size: calc(14px * var(--official-font-scale, 1)); }
}

@media (max-width: 767px) {
  .entry .entry-contact-links .contact-chip .desc,
  #top .entry .entry-contact-links .contact-chip .desc { font-size: calc(12px * var(--official-font-scale, 1)); }
}