@charset "UTF-8";
/* ==========================================================================
   ご利用ガイド (/ja/forvisitors/guide/)
   - mypage_guide.css のトーンに準ずる
   - 3つの機能（来場登録 / 聴講予約 / マイページ）をカラーで識別
   ========================================================================== */

/* ---------- Color Tokens ---------- */
.g_page {
  --g-visit: #ec6767;
  --g-visit-strong: #ec6767;
  --g-visit-bg: #fff2f7;

  --g-conf: #22a7f3;
  --g-conf-strong: #22a7f3;
  --g-conf-bg: #f0f5ff;

  --g-mypage: #33b182;
  --g-mypage-strong: #33b182;
  --g-mypage-bg: #f2f9ed;

  --g-primary: #c22222;
  --g-text: #222;
  --g-note: #555;
  --g-border: #e3e3e3;
}


/* ---------- Base Layout ---------- */
.g {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--g-text);
}

/* 見出しは /ja/forvisitors/regist_conference/ と同様 style.css の .c-contents-title（35px / 768px以下22px）に従う */
.g .c-contents-title {
  text-align: left;
}


/* ---------- Hero ---------- */
.g_hero {
  margin-bottom: 30px;
}

.g_lead {
  font-size: inherit;
  line-height: 1.6;
  margin-bottom: 32px;
}


/* ---------- Top Menu Nav (3 large buttons) ---------- */
.g_menu_nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.g_menu_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 40px 14px 16px;
  border-radius: 8px;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.g_menu_item:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

.g_menu_item::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-75%) rotate(135deg);
  opacity: 0.85;
  pointer-events: none;
}

.g_menu_label {
  font-size: inherit;
}

.g_menu_icon {
  margin-right: 8px;
  font-size: 1.1em;
}

.g_menu_sub {
  font-size: 11px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.92;
}

.g_menu--visit   { background: var(--g-visit); }
.g_menu--conf    { background: var(--g-conf); }
.g_menu--mypage  { background: var(--g-mypage); }


/* ---------- Section ---------- */
.g_sec {
  padding: 0 0 48px;
}

.g_sec:last-of-type {
  border-bottom: 1px solid var(--g-border);
}

/* セクション見出し: regist_conference #regist_conference .c-sub-section-title に準ず（18px / 480px以下15px） */
.g_h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #222;
}

.g_h_icon {
  display: block;
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.g_h_icon--visit   { color: var(--g-visit); }
.g_h_icon--conf    { color: var(--g-conf); }
.g_h_icon--mypage  { color: var(--g-mypage); }

.g_sec--visit  .g_h { border-bottom-color: var(--g-visit); }
.g_sec--conf   .g_h { border-bottom-color: var(--g-conf); }
.g_sec--mypage .g_h { border-bottom-color: var(--g-mypage); }


/* ---------- Intro / Body Text ---------- */
.g_intro {
  font-size: inherit;
  font-weight: 700;
  margin: 6px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.g_intro_bullet {
  font-size: 12px;
}

.g_intro_bullet--visit   { color: var(--g-visit); }
.g_intro_bullet--conf    { color: var(--g-conf); }
.g_intro_bullet--mypage  { color: var(--g-mypage); }

.g_txt {
  font-size: inherit;
  line-height: 1.75;
  margin-bottom: 14px;
}

.g_note {
  font-size: inherit;
  color: var(--g-note);
  line-height: 1.6;
  /* padding: 12px 16px; */
  /* background: #f7f7f7; */
  /* border-radius: 6px; */
  margin-bottom: 24px;
}

.g_note--alert {
  background: #fff5f2;
  color: var(--g-primary);
}

/* マイページ紹介：テキスト左・画像右 */
.g_mypage_lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 40%);
  gap: 20px 28px;
  align-items: start;
  margin-bottom: 24px;
}

.g_mypage_lead_text .g_txt {
  margin-bottom: 0;
}

.g_mypage_lead_fig {
  margin: 0;
  text-align: center;
}

.g_mypage_lead_fig img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--g-border);
}

.mg_notice {
  margin: 0;
  padding: 14px 20px;
  background: #fffcd6;
  border-left: 5px solid #fbea1c;
  border-radius: 6px;
}

.mg_notice_title i {
    margin-right: 0.5em;
    color: #e8cb0a;
}

/* ---------- Figure ---------- */
.g_fig {
  margin: 24px 0 28px;
  text-align: center;
}

.g_fig img {
  max-width: 100%;
  height: auto;
}


/* ---------- Buttons ---------- */
.g_btn_cont {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 0;
  margin: 24px 0 0;
}

.g_btn_cont > li {
  flex: 0 1 auto;
}

.g_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 300px;
  border-radius: 40px;
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  border: 2px solid transparent;
  padding: 20px;
  max-width: 300px;
}

/* .g_btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
} */

.g_btn i {
  font-size: 12px;
}

/* Outline variant */
.g_btn--outline {
  background: #fff;
  color: var(--g-primary) !important;
  border-color: var(--g-primary);
}

.g_btn--outline:hover {
  background: var(--g-primary);
  color: #fff !important;
}

.g_btn--outline.g_btn--visit   { color: var(--g-visit-strong) !important; border-color: var(--g-visit-strong); }
.g_btn--outline.g_btn--visit:hover  { background: var(--g-visit-strong); color: #fff !important; }

.g_btn--outline.g_btn--conf    { color: var(--g-conf-strong) !important; border-color: var(--g-conf-strong); }
.g_btn--outline.g_btn--conf:hover   { background: var(--g-conf-strong); color: #fff !important; }

.g_btn--outline.g_btn--mypage  { color: var(--g-mypage-strong) !important; border-color: var(--g-mypage-strong); }
.g_btn--outline.g_btn--mypage:hover { background: var(--g-mypage-strong); color: #fff !important; }

/* Primary variant (塗り) */
.g_btn--primary {
  background: var(--g-visit);
  color: #fff !important;
  border-color: var(--g-visit);
}

.g_btn--primary:hover {
  filter: brightness(1.05);
}

/* .g_btn--primary.g_btn--visit   { background: var(--g-visit-strong); border-color: var(--g-visit-strong); } */
.g_btn--primary.g_btn--conf    { background: var(--g-conf-strong); border-color: var(--g-conf-strong); }
.g_btn--primary.g_btn--mypage  { background: var(--g-mypage-strong); border-color: var(--g-mypage-strong); }

/* Disabled (coming soon) */
.g_btn--disabled {
  background: #a9a9a9;
  color: #fff !important;
  border-color: #a9a9a9;
  cursor: not-allowed;
  pointer-events: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 28px;
}

.g_btn--disabled:hover {
  transform: none;
  box-shadow: none;
}

.g_btn_sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.95;
}


/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
  .g_mypage_lead {
    grid-template-columns: 1fr;
  }

  .g_mypage_lead_fig {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .g_menu_nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .g_menu_item {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .g_menu_sub {
    font-size: 10px;
  }

  .g_btn_cont {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }

  .g_btn {
    min-width: 0;
    width: 100%;
  }

  .mg_notice {
    margin: 0 0 10px;
  }

}

@media screen and (max-width: 480px) {
  .g {
    padding: 0;
  }
  .g_hero { margin-bottom: 30px; }
  .g_sec { padding: 0 0 30px; }

  /* regist_conf.css: #regist_conference .c-sub-section-title */
  .g_h {
    font-size: 15px;
    line-height: 1.3;
  }

  .g_btn {
    padding: 15px;
    font-size: 14px;
  }
}