/*
Theme Name: 徽音塾オリジナル
Author: 株式会社白峰社
Version: 1.0
*/

/* =========================
   基本
========================= */
:root{
    
    --congress-title: #6f3c82;

    --congress-title: #211d4d;
    --congress-btn: #211d4d;

    --congress-color0:#6f3c82; /*デフォルト*/   
    --congress-color1:#9b0a57; /*個人*/
    --congress-color1:#9e5166; /*個人　講座のピンクと合わせるべき　竹島意見*/


    --congress-color2:#1d1e57; /*事務局*/   
    --congress-color3:#6e8879; /*法人*/     
    --congress-color4:#927d43; /*講師*/     

    --congress-blue:#6f3c82;
   
   
    
    --congress-blue-hover: #92df9a;
    --congress-blue-hover:#9362a5;

    --aqua-pearl: #bdc08e;
    --aqua-pearl-hover:  #686d40;


    --lily-white: #FAFFEC;


    --log-cabin: #232323;
     --red: #ff0000;
    --white: #ffffff;

    /* パステルカラー版（背景用） */
    --pastel_e: #dff4d1; /* 明るいグリーン */
    --pastel_p: #fde4ea; /* 薄いピンク */
    --pastel_b: #dce8fb; /* 淡いブルー */
    --pastel_o: #e2e2e2; /* ややグレー */




    --course_btn_clik: #3f3f3f;
    --course_btn: #9b9b9b;

    --course-select: #E8E8E8;
    --course-banner:#9A9A9A;

    --footer-hover: #B6CCEC;
    --font-size-25px: 25px;
    --font-size-l: 19px;
    --font-size-m: 16px;
    --font-size-s: 15px;
    --font-size-xl: 20px;
    --font-size-xs: 14px;
    --font-size-xxl: 45px;
    --font-size-xxs: 13px;
    --font-family-noto_sans_jp: "Noto Sans JP", Helvetica;
    --font-family-zen_antique_soft: "Zen Antique Soft", Helvetica;
    --font-family-zen_kaku_gothic_antique: "Zen Kaku Gothic Antique", Helvetica;
    --font-family-zen_maru_gothic: "Zen Maru Gothic", Helvetica;
    --transition-duration: 0.2s;
}

html, body {
  height:100%;
  margin:0;
  scroll-behavior: auto;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  font-family:"Noto Sans JP", serif;
  color:#333;
  padding-top: 100px;
}

body.page main,
body.home main,
body.single-post main {
  max-width: 890px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.pastel-table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pastel-table th,
.pastel-table td {
  border: 1px solid #ccc;
  padding: 10px 8px;
  text-align: center;
  font-size: 14px;
}

.polyline.arrow-line {color: var(--congress-title);}


.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 70vh; /* ビューポートの高さに合わせる */
  width: 100%;
  align-items: stretch; /* 子要素が全幅を使えるようにする */
}





.btn-nv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto; /* 文字量に応じて自動 */
  gap: 8px;

  padding: 10px 20px;

  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: var(--ngress-btn);
  background: #fff;
  border: 1px solid var(--ngress-btn);
  border-radius: 22.5px;

  transition: all 0.25s ease;
}

.btn-nv:hover {
  color: #fff;
  background: var(--ngress-btn);
  border-color: var(--ngress-btn);
}






.pastel-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }


  .course-card {
  display: block;
  background: #fff; /* カード全体は白 */
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #333;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* ===== IDバッジ ===== */
.course-id {
  display: inline-block;
  padding: 0.1rem 0.2rem;
  font-weight: bold;
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-right: 0.6rem;
}

/* ===== タイトル ===== */
.course-title {
  font-size: 1.0rem;
  /*font-weight: bold;*/
  margin: 0.4rem 0;
}



.course-status-red{
  color: var(--red);
}
.course-status-green{
  color: var(--congress-title);
}


.speaker-name {
  text-align: left !important;
}


.course-status {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 6px;
}

.course-status::before {
  margin-right: 0.4rem;
  color: #999;
}

.course-card .course-status {
  background: #f5f5f5;
  color: #555;
}

.course-card .course-status:contains("受付中") {
  background: #e0f6ec;
  color: #008040;
}

.course-card .course-status:contains("受付終了") {
  background: #fce4e4;
  color: #b00020;
}

/**************************/
/**************************/
/**************************/

section {
    scroll-margin-top: 190px;
}

/**************************/


.course-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 0.9rem;
  color: #000;
}

.course-table td {
  padding: 6px 4px;
  text-align: center;
  border: 4px solid #ffffff;
}

.course-table th,
.course-table td {
  padding: 6px 4px;
  text-align: center;
  border: 4px solid #ffffff;
}

.course-table th {
  background-color: var(--pastel_o);
}

.course-table tr.list-e {
  background-color: var(--pastel_e);
}

.course-table tr.list-p {
  background-color: var(--pastel_p);
}

.course-table tr.list-b {
  background-color: var(--pastel_b);
}

.course-table tr.list-o {
  background-color: var(--pastel_o);
}



.card-category {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 30px;
}


.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.code-box {
  font-size: 1.1em;
  font-weight: bold;
  padding: 6px 12px;
  color: var(--white);
  border-radius: 6px;
}

/* タイトル */
.course-title {
  margin: 0;
  font-size: 1.00em;
  font-weight: bold;
  line-height: 1.3;
}

/* サブタイトル（小さめ、色付き） */
.course-sub {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 本文 */
.course-desc {
  font-size: 0.8em;
  line-height: 1.5;
}


/***************************************************/
/*プロフィールの住所は見えないようにする。値は保存する。*/
/***************************************************/
#kiin-address-full-group {
    display: none;
}


/***************************************************/
/*全角カナでないとエラーメッセージを出す。*/
/***************************************************/
.kiin-error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
    display: none; /* 最初は非表示に */
}


/* モバイル：1列に */
@media screen and (max-width: 768px) {
  .course-card {
    flex: 1 1 100%;
  }
}



course-card {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.hover-label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);


  background: #138F45;
  color: var(--white);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* クリックは無効 */
}

.course-card:hover .hover-label {
  opacity: 1;
  transform: translateX(-50%) translateY(10);
}





/* === FINAL DESKTOP FIX FOR LOGIN PAGE HEADER SPACING === */
@media (min-width: 769px) {
  .form-title {
    margin-top: 1rem;
    text-align: center;
  }
}



.register-section {
  margin-top: 1rem;
  text-align: center;
}

.register-section p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.register-section .kiin-btn {
  display: inline-block;
  width: auto;
  max-width: 220px;
  text-align: center;
  white-space: nowrap;
}

body.front-page .site-drawer,
body.front-page .drawer-inner {
  max-width: none!important;
  margin: 0!important;
  padding: 0!important;
}

body {
  font-family:"Noto Sans JP", serif;
  color:#333;
  padding-top: 100px;
}


#kiin_page_top {
  scroll-margin-top: 190px; /* 上に100px空ける */
}

h1{
  font-family:"Zen Maru Gothic";
  color:var(--congress-title);
  font-weight:normal;
  padding-bottom:2rem;
  font-size:45px;
}

h2{
  font-family:"Zen Maru Gothic";
  color: var(--congress-title);
  font-weight:normal;
  font-size:1.6rem;
}

h3{
  color:var(--congress-title);
  font-weight:normal;
  /* padding-top:1.2rem; */
  font-size:1.4rem;
}

h4{
  color:var(--congress-title);
  font-weight:normal;
  margin:0.2rem;
  font-size:1.1rem;
}

h5{
  color:var(--congress-title);
  font-weight:normal;
  margin:0.2rem;
  font-size:1.0rem;
}

p{
  font-size:1.1em;
  line-height:1.4;
}

.margin-top2{
  margin-top:2rem;
}




/*********************/
/*上の空きを指定*/
/* スペーサー */
/*********************/

.spacer-s0{ display:block; height:1rem; }
.spacer-ss{ display:block; height:2rem; }
.spacer-sm{ display:block; height:4rem; }
.spacer-md{ display:block; height:1rem; }
.spacer-lg{ display:block; height:1rem; }
.spacer-8rem{ display:block; height:8rem; }



/* 少し上げる（-margin） */
.text-shift-up-1 { margin-top: -1px; }
.text-shift-up-2 { margin-top: -2px; }
.text-shift-up-3 { margin-top: -3px; }
.text-shift-up-4 { margin-top: -4px; }

/* 少し下げる（+margin） */
.text-shift-down-1 { margin-top: 1px; }
.text-shift-down-2 { margin-top: 2px; }
.text-shift-down-3 { margin-top: 3px; }
.text-shift-down-4 { margin-top: 4px; }


.required-mark {
  font-size: 0.6em; /* 小さく */
  color: var(--red);
  margin-left: 0.22em; /* 少しスペースを空ける */
  vertical-align: super; /* 文字の上に寄せる（任意） */
}


.kiin-link-text {
  color: var(--aqua-pearl);
  text-decoration: none;
}

.kiin-link-text:hover {
  color: var(--aqua-pearl-hover);
}

.fw700{ font-weight:500; }

.keyword-label {
  background-color: var(--course_o); /* JS/PHPで上書きされるので任意でOK */
  color: #fff;
  font-size: 0.8rem;
  padding: 0 4px;
  margin-right: 6px;
  display: inline-block;
}

section {
  margin-bottom: 40px;
}

main {
  max-width: 890px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0px auto 80px; /* ← 中央寄せに必要！ */
}

main.login-page {
  margin-bottom: 0px;
}

.kiin-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 1rem; /* 上下: 0, 左右: 2rem */
  box-sizing: border-box;
}

.kiin-admin-container main {
  max-width: none !important;
  width: 100%;
  padding: 0; /* 余白も不要ならリセット */
}

.kiin-admin-container {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 3rem;
  box-sizing: border-box;
  flex: 1; /* 必要なら高さ調整にも使える */
}

.btn-assignment {
  display: inline-block;
  padding: 0.6em 1.2em;
  margin-left: 0.5em;
  border-radius: 4px;
  background-color: var(--aqua-pearl, #63b8ce);
  color: #fff;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
}

.btn-assignment:hover {
  background-color: var(--aqua-pearl-hover, #ACD8E3);
  color: #3a3a3a;
}

/* 修正中 */
.form-radio-group {
  margin: 10px 0px 25px;
}
/* 修正中 */

.form-radio-group label {
  display: inline-block;
  margin-right: 20px;
}

/* アイコンと文字を縦並びにする */
.vertical-nav {
  display: flex;
  flex-direction: column;
  align-items: center; /* ← ここを修正します */
  justify-content: flex-end; /* 下揃えにする */
  height: 100%; /* 親要素の高さ基準で揃える */
}



.front-nav-link {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.vertical-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color:var(--congress-title);
  font-size: 0.8rem;
}

.notice-message, .error-message {
  max-width: 600px;
  margin: 20px auto;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
}

.notice-message {
  background-color: #e7f7e7;
  color: #1a531b;
  border: 1px solid #a6d8a8;
}

.required-checkbox-group {
  display: flex;
  gap: 20px;
  align-items: center;
}
.required-checkbox-group label {
  margin: 0;
  white-space: nowrap;
}

.custom-file-input {
  display: none;
}

.custom-file-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #538157;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.custom-file-label:hover {
  background-color: #86da8d;
}


/* =========================
   共通：ヘッダーの外観
========================= */
.top-header{
  margin: 0 auto;
  width: 100%;
  height: 100px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;
  z-index: 9999;
  background-color: var(--congress-blue);
  color: var(--white);
}



.top-header-inner {
  display: flex;
  width: 100%;
  max-width: 1920px;
  margin: 0 3rem;
  height: 100px;
  color: var(--white);
  align-items: center;

}



.site-main{
  flex:1;
}

.container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0 1.5rem;
}

.flex-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wp-block-heading{
  padding:2rem;
}





.logo img.pc-logo{ display:block; }

.logo img.sp-logo{ display:none; }


.header-desktop {
  display: flex;
}

.header-mobile {
  display: none;
}

.form-wrapper{
  width:100%;
  max-width: 600px;
  margin: 0 auto 60px;
  padding:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  box-sizing: border-box;
}

.form-wrapper-left {
  margin: 10px -20 10px 0px; /* 左寄せにする */
}

input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="number"],select,textarea{
  width:100%;
  max-width:100%;
  padding:12px 16px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:8px;
  outline:none;
  box-sizing:border-box;
  margin-bottom:16px;
  background:#f9f9f9;
  transition:border-color .3s, box-shadow .3s;
}

input:focus,select:focus,textarea:focus{
  border-color:#007bff;
  box-shadow:0 0 0 3px rgba(0,123,255,.2);
  background:#fff;
}


.form-group.text-center {
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
}

.text-center{
 text-align: center;
}

.text-right{
 text-align: right;
}

/* =========================
   ヒーロー
========================= */
.hero-image{
  position:relative;
  display:inline-block;
}

.hero-image img{
  display:block;
  width:100%;
  height:auto;
}

.osusume-badge{
  position:absolute;
  left:200px;
  top:40%;
  transform:translateY(-50%);
  width:600px; height:auto;
}

.nobr {
  white-space: nowrap;
}


.error-message {
  color:var(--red); /* 赤色 */
  background-color:var(--lily-white);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.success-message {
  color: #1a7f37; /* 緑色 */
  background-color: #e6f4ea; /* 薄い緑色の背景 */
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
}

:root {
  --drawer-top: 150px;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


.textarea-lg {
  min-height: 14rem;   /* 好みで 12rem, 16rem など */
  line-height: 1.6;
  resize: vertical;    /* ユーザーが縦方向だけ伸縮できるように */
  width: 100%;
}

.course-handouts {
  margin-top: 10px;
}

.course-handouts__title {
  display:block;
  margin-bottom: 6px;
  color:#334155;
  font-weight:600;
}

.course-handouts__list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.doc-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  box-shadow:0 1px 1px rgba(0,0,0,.02);
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
}

.doc-chip:hover {
  background:#fcfaf8;
  border-color:#94a3b8;
}

.doc-chip:active {
  transform: translateY(1px);
}

.doc-chip__icon {
  width:16px;
  height:16px;
  display:block;
}

.doc-chip__ext {
  font-size:12px;
  padding:2px 6px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
}


/*==========================
   フッター
========================= */



.site-footer {
  background: var(--congress-blue);
  color: #fff; /* 全体の文字色 */
  padding: 1.8rem 1.4rem;
  text-align: center;
  border-top: 2px solid var(--congress-blue);


}

.footer-buttons {
  max-width: 1200px;
  margin: 0 auto;
}

/* 上段リンクの行 */
.footer-buttons-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.footer-buttons-top a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.footer-buttons-top a:hover {
  color: var(--footer-hover, #B6CCEC);
}

.footer-buttons-top a + a::before {
  content: "|";
  color: #fff;
  margin: 0 0.8px;
  opacity: 0.9;
  font-weight: 300;
}


/* リンク共通 */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem; /* リンク間のスペース */
  margin-bottom: 0.6rem;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
}

.footer-links a:hover {
  color: var(--footer-hover, #B6CCEC);
  text-decoration: underline;
}

.footer-copy {
  margin-top: 0.3rem;
  color: #fff;
  font-size: 0.85rem;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.footer-btn .x-icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  vertical-align: middle;
  transform: translateY(0.5px);
}

.footer-btn svg {
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.2em;
  fill: currentColor;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* アイコンとの余白 */
  font-weight: normal;
  font-size: 1rem; /* 必要なら他と揃える */
  color: var(--congress-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

.news-link:hover {
  color: var(--congress-blue-hover);
  text-decoration: none;
}

.news-arrow-icon {
  width: 1.2em;              /* ← 少し大きく */
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;    /* 基本位置合わせ */
  transform: translateY(2px); /* ↓ 下に2pxずらす */
}
.news-meta {
  margin-right: 0.5rem; /* スペース相当の余白を追加 */
}

.news-item{
  margin-bottom: 1.2rem;
}

.news-link:hover .news-arrow-icon {
  margin-left: 6px; /* ← ホバー時に右へ6px移動（4 → 10） */
  stroke: var(--congress-blue-hover);
}

.header-logo {
  padding-TOP: 5px;
  padding-left: 2rem;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color:var(--white);
  font-family: var(--font-family-zen_maru_gothic, sans-serif);
  line-height: 1.2;
}




.header-subtitle {
  font-size: 12px;
  margin: 0;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.header-title {
  color:var(--white);
  letter-spacing: 0.2em;
  font-size: 46px;
  font-weight: bold;
  margin-top: -4px;
  font-family: 'Shippori Mincho', serif;
}



.header-rub {
  color: var(--white);
  margin-left: 1.2rem;
  font-size: 10px;
  letter-spacing: 0.2em;

}





/* =========================
   ヘッダー内 NAV
========================= */
.universal-nav {
  position: absolute;
  top: 8px;
  right: 3rem; /* ← paddingの内側に固定 */
  padding: 10px 20px;
  background-color: var(--congress-blue, #004899);
}

.nav-item{
  display:flex;
  align-items:center;
}

.nav-link{
  color:inherit;
  text-decoration:none;
  padding:6px 8px;
  display:block;
  transition:color .2s ease;
}

.nav-link:hover{
  color:#727272;
}

.header-logo-link {
  text-decoration: none;
  color: inherit;
  z-index: 20;
}

.header-logo-link:hover,
.header-logo-link:visited,
.header-logo-link:active {
  text-decoration: none;
  color: inherit;
}

/* =========================
   マイページ用サブnavi
========================= */
.mypage-nav-menu {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.mypage-nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: normal;
  padding: 5px 15px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
}

.mypage-nav-menu a:hover {
  background-color: #97b7da;
  color: white;
}

.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  z-index: 10;
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link,
.nav-hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: none;
  border: none;
  color: #fff; /* ← テキスト白 */
  font-size: 0.75rem;
  cursor: pointer;
}

.nav-hamburger {
  margin-top: 2px;
  margin-bottom: -4px;
}

.icon-img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
  margin-bottom: 4px;
  transition: transform 0.2s ease; /* ← スムーズな拡大 */
}

.nav-link:hover .icon-img,
.nav-hamburger:hover .icon-img {
  transform: scale(1.2); /* ← ホバーで1.2倍に拡大 */
}

/* ホバーでアイコン拡大 */
.nav-hamburger-icon:hover .icon-img {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.news-arrow-icon {
  margin-left: 0px;
  vertical-align: middle;
  transition: margin-left 0.3s ease, stroke 0.3s ease;
  stroke: var(--congress-title);
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-text {
  margin-top: 2px;
  line-height: 1;
  color: #fff; /* 念のため明示 */
}


.internal-menu {
  text-align: left; /* 全体を中央揃え */
  margin-top: 8rem;
}

.internal-menu ul {
  font-size : 1.0em;
  display: flex; /* 横並び */
  flex-wrap: wrap; /* 折り返し可能にする場合 */
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 1.5rem; /* リンク間のスペース */
  width: 100%;
}

.internal-menu li {
  margin: 0;
}

.internal-link {
  display: inline-flex;
  align-items: flex-start;
  color: var(--congress-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

.internal-link.active {
  background: var(--congress-title);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}


.internal-link:hover {
  color: var(--congress-blue-hover);
}

.link-icon svg {
  width: 2em;
  height: 2em;
  fill: none;
  stroke: currentColor;
  transform: translateY(0);
  transition: transform 0.2s ease;
}

.internal-link:hover .link-icon svg {
  transform: translateY(2px);
}

.link-icon {
  display: inline-block;
  margin-left: -0.4rem;
  line-height: 1;
}

.internal-link:hover {
  color: var(--congress-blue-hover);
}

.internal-link:hover .link-icon svg {
  transform: translateY(2px);
}

.kiin-image-wrapper {
  margin: 2rem auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
  width: 80%; /* ＝左右20%のマージン */
}

.kiin-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.kiin-image-wrapper80{
  width: 80%; /* ＝左右15%のマージン */
}

/********************
マイページ゛のメニュー
*********************/
.mypage-link-text {
  display: inline-flex;
  align-items: center;
}

.mypage-link-text:hover .mypage-arrow-icon {
  transform: translateX(3px); /* 右にだけスライド */
  stroke: var(--congress-blue-hover);
}

.mypage-arrow-icon {
/*  margin-left: 4px;*/
  transition: transform 0.3s ease;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 暗幕 */
body.front-page .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: none;
  pointer-events: none;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.front-page .drawer-overlay.active {
  display: block;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* ドロワーメニュー */
body.front-page .site-drawer {
  position: fixed;
  top: 120px;
  left: 0;
  width: clamp(320px, 34vw, 520px);
  height: 100vh;
  transform: translateX(-100%);
  background: transparent;
  color: var(--brand-fg, #424242);
  z-index: 2001;
  transition: transform .4s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  overflow: visible;
}


body.front-page .site-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

/* 半円背景 */
body.front-page .site-drawer::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: 20%;
  left: -60%;
  border-radius: 50%;
  background: rgb(255, 250, 200);
  backdrop-filter: blur(8px);
  transform: scale(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .55s ease, opacity .35s ease;
  pointer-events: none;
}
body.front-page .site-drawer[aria-hidden="false"]::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

/* メニュー内部 */
body.front-page .drawer-inner {
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 1;
  overflow: auto;
}

.drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.drawer-menu > li > a {
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 1.05rem;
  color: var(--brand-fg, #1d1d1d);
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.drawer-menu > li > a:hover {
  background: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

.drawer-menu {
  position: relative;
  height: 500px; /* 必要に応じて調整 */
}

.drawer-menu li {
  position: absolute;
}

.drawer-menu li:nth-child(1) {
  top: 20px;
  left: 20px;
}
.drawer-menu li:nth-child(2) {
  top: 70px;
  left: 30px;
}
.drawer-menu li:nth-child(3) {
  top: 120px;
  left: 40px;
}
.drawer-menu li:nth-child(4) {
  top: 170px;
  left: 50px;
}
.drawer-menu li:nth-child(5) {
  top: 220px;
  left: 40px;
}
.drawer-menu li:nth-child(6) {
  top: 270px;
  left: 30px;
}
.drawer-menu li:nth-child(7) {
  top: 320px;
  left: 20px;
}

.course--guide {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.course-guide th,
.course-guide td {
  border: 1px solid #ccc;
  padding: 0.6rem;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  font-size: 1rem;
}


.course--catalog{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}


.course-catalog th,
.course-catalog td {
  border: 1px solid #ccc;
  padding: 0.6rem;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  font-size: 1rem;
}



/*============================================
=============================================
  ナビゲ―ション
==============================================
=============================================*/

.universal-nav {
  background-color: var(--congress-blue, #004899);
  padding: 0.5rem 1rem;
}



/*=========================
 Login Page Styling (kiin-login-member.php)
=========================*/
.login-page {
  width: 100%;
  max-width: 600px;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
  padding: 1rem 1rem;
  margin-top: 150px;

}

.login-container {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  padding: 2.5rem;
}

.login-title {
  text-align: center;
  color: var(--congress-title);
  font-family: "Zen Maru Gothic", sans-serif;
  margin-bottom: 2rem;
}

.login-form .form-group label{
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #333;
}

.login-form input {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  margin-bottom: 1.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.login-form input:focus {
  border-color: var(--congress-title);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .2);
  background: #fff;
}

.login-btn {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  border-radius: 999px;
  background: var(--congress-title);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background: var(--congress-blue-hover);
}

.login-links {
  text-align: center;
  margin-top: 1.5rem;
}

.login-links .kiin-link-text {
  display: inline-block;
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}






  /*=========================
    Login Page Styling (kiin-login-member.php)
    Mobile Version
  =========================*/
  .login-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
  }

  .login-container {
    width: 100%;
    max-width: 500px;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  }

  .login-title {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
  }

  .login-form input {
    font-size: 0.95rem;
    padding: 0.8rem;
  }

  .login-btn {
    font-size: 1rem;
    padding: 0.8rem;
  }

  .register-link {
    font-size: 0.9rem;
  }


  .login-page h2 {
    margin-top: 1rem !important;
    text-align: center;
  }


.register-link {
  font-size: 0.95rem;
  color: #333;
}

/* 修正中 */
.register-btn {
  /* margin-left: 0.4rem; */
  /* background: #fff;
  /* color: var(--aqua-pearl);
  /* border: 1px solid var(--aqua-pearl);
}
/* 修正中 */

/*.register-btn:hover {
 /*  background: var(--aqua-pearl-hover);
 /*  color: #fff;
}



.btn-remov,.btn2{
  margin-left: 0.4rem;
  background: #bf3f3f;
  color: var(--white);
  /*border: 1px solid  #f87e7e;*/
}


/*
.btn-remov:hover.btn2 {
  background: #e98989;
 /*  border: 1px solid #e98989;*/
  /* color: var(--white);
}

*/

/* =========================================
   法人登録フォーム (page-corporation-registration.php)
========================================= */
.register-form {
  max-width: 600px;
  margin: 2rem auto;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.form-title {
  text-align: center;
  color: var(--congress-title);
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.alert {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem;
}

.alert-danger {
  background: #fdecea;
  color: #d93025;
  border: 1px solid #f5c2c0;
}

.alert-success {
  background: #e6f4ea;
  color: #1e8e3e;
  border: 1px solid #b7e1b0;
}


/* ======================
  Mobile first Front Pages
=========================*/
/* Mobile header adjustments */
/*****************************/
/*****************************/
/*****************************/
/*****************************/
/*****************************/
/*****************************/
/*****************************/
/*****************************/
@media (max-width: 768px) {
  .header-desktop {
    display: none !important;
  }

  .header-logo-link {
    text-decoration: none;
  }
  .header-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--congress-blue);
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    min-height: 80px;
  }

  .kiin-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*margin: 5px;*/
    padding: 0;
  }

  .header-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    height: auto;
    color:var(--white);
    font-family: var(--font-family-zen_maru_gothic, sans-serif);
    line-height: 1.2;
  }


  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
/*  background: var(--congress-blue);*/
    padding: 0 1rem !important;
    width: 100%;
    height: 80px !important;
  }


  .header-title-with-ruby {
    display: flex;
    gap: 0.2;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .ruby-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Shippori Mincho', serif;
  }

  .ruby {
    font-size: 0.6rem;
    line-height: 1;
    margin-bottom: 0.2rem;
    color: #fff;
  }

  .kanji {
    font-size: 2.6rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
  }

  .header-subtitle {
    font-size: 0.6rem;
    margin: 0;
    letter-spacing: 0em;
  }


  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .course-dropdown,
  .toggle-button {
    width: auto;
    min-width: 100px;
  }

  .header-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
  }

  .mobile-nav-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding-right: 1.5rem;
    align-items: center;
  }

  .mobile-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
    cursor: pointer;
  }

  .site-drawer {
    position: fixed;
    top: 120px;
    right: 0;
    width: 80%;
    height: calc(100vh - 120px);
    background:#fff;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    padding: 2rem 1.5rem;
    overflow: auto;
  }

  .site-drawer[aria-hidden="false"] {
    transform: translateX(0);
  }

  .drawer-inner{
    position: absolute;
    top: 120px;
    bottom: 24px;
    left: 24px;                 /* 左余白 */
    right: 30px;                /* 右端からの距離（寄せ具合はここを調整） */
    z-index: 1;
    overflow: auto;
  }

  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1500;
  }

  .drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .drawer-menu li a {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003c88;
    text-decoration: none;
  }


  .site-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: var(--congress-blue); */
    padding: 2rem 1rem;
    text-align: center;
  }

  .footer-buttons-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }

  .footer-buttons-top a + a::before {
    content: none !important; /* ← 区切り線を消す */
  }

  .footer-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    border-radius: 9999px;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
  }

  .footer-btn:hover {
    background: #fff;
    color: var(--congress-title);
  }

  .footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
  }

  .footer-links a {
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;
  }

  .footer-links a:hover {
    text-decoration: underline;
  }

  .footer-copy {
    font-size: 0.8rem;
    color: #fff;
    margin: 0;
  }

  .footer-btn .x-icon {
    width: 18px;
    height: 18px;
    transform: none;
  }

  /* About page */
  main {
    margin: 0 auto 60px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .kiin-image-wrapper {
    width: 100%; /* フル幅 */
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .internal-menu {
    margin: 8px;
    max-width: 800px;
  }

  .internal-menu ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .internal-menu li {
    width: 100%;
  }

  .internal-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem;
    border: 2px solid var(--congress-title);
    border-radius: 2px;
    text-decoration: none;
    color: var(--congress-title);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
  }

  .internal-link:hover {
    background: var(--congress-title);
    color: #fff;
  }

  .internal-link .link-icon {
    display: none;
  }

  .page-aboutus {
    padding: 0 1.2rem;
  }

  .page-aboutus h2 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
  }

  .page-aboutus h3 {
    font-size: 1.1rem;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
  }

  .page-aboutus p {
    font-size: 0.95em;
    line-height: 1.7;
    margin-bottom: 1.2rem;
  }


  .kiin-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 6px;
  }

  .kiin-map-wrapper iframe {
    height: 250px;
    border-radius: 6px;
  }

  .custom-list {
    /*margin-left: 1rem;*/
    font-size: 1rem;
  }

  form {
    margin-top: 1rem;
  }

  form h4 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

/*  .kiin-btn {
    width: 50%;
    display: block;
    margin: 0 auto;
    padding: 0.9rem;
    font-size: 1rem;
    border-radius: 5px;
  }

  /* 修正中 */
  /*button[type="submit"].kiin-btn {
    margin-top: 40px;
  }
  .form-group button.kiin-btn {
    margin-bottom: 10px;
  }
  .form-group a.kiin-btn {
    box-sizing: border-box;
  }
  .form-group.text-center {
   margin-top: 60px;
  }
  /* 修正中 */

  .required-mark {
    color: #e63946;
    font-weight: bold;
    margin-left: 0.2em;
  }

  /* Section spacing */
  .page-aboutus section {
    margin-top: 1.8rem !important;
    margin-bottom: 2.5rem !important;
  }

  .kiin-image-wrapper {
    width: 90% !important;
    margin: 2rem auto !important;
  }

  /* Internal navigation margin fix */
  .internal-menu {
    margin-top: 8rem;
  }

  .page-aboutus ul{
    list-style: none;
    padding-left: 0;
  }

  .page-aboutus li {
    font-size: 1.1em;
    line-height: 1.8rem;
    color: #333;
  }

  body.page main,
  .page-aboutus,
  main.page-aboutus,
  .kiin-container {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .aboutus-nav,
  .internal-menu,
  .aboutus-nav-wrapper {
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .aboutus-nav hr,
  .internal-menu hr,
  .aboutus-nav .nav-border,
  .internal-menu .nav-border {
    display: none !important;
  }

   /* Restore mobile button borders */
  .internal-link {
    border: 2px solid var(--congress-blue) !important;
  }

  /* Remove ONLY the bottom underline on the wrapper */
  #aboutus-nav,
  #aboutus-nav ul {
    border-bottom: none !important;
  }

  #aboutus-nav::after {
    content: none !important;
    display: none !important;
  }

  #aboutus-nav::after,
  #course-guide-nav::after,
  #mypage-nav::after {
    content: none !important;
    display: none !important;
  }

  #aboutus-nav,
  #course-guide-nav,
  #mypage-nav {
    margin-top: 110px !important;  /* push below the header */
  }

  .spacer-lg{
    display:block;
    height:0;
  }

  .spacer-md{
    display:block;
    height:1rem;
  }

  .course-guide img,
  .course-guide svg {
    max-width: 100%;
    height: auto;
  } */

  .course-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border: 1px solid var(--course_btn, #ccc);
    border-radius: 6px;
    font-size: 0.95rem;
  }
  .course-options {
    position: static;
    display: none;
  }
  .course-dropdown.open .course-options {
    display: block;
    margin-top: 0.5rem;
  }

   .course-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /*border: 1px solid #ddd;*/
    border-radius: 6px;
    /*padding: 1rem;*/
    margin-bottom: 1.5rem;
  }

  .course-code-box {
    width: auto;
    height: auto;
    padding: 0.3rem 0.3rem;
    font-size: 1rem;
  }

.course-main-content {
  flex: 1; /* 横幅を自動で使う */
  min-width: 0; /* 内容がはみ出さないように */
  box-sizing: border-box; /* 幅の制御を安定させる */
  overflow-wrap: break-word; /* 長い文字列が折り返されるように */
}

  .course-sidebar {
    order: 2;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }


  .course-title {
    font-size: 1.1rem;
    margin: 0.5rem 0;
  }


  .course-keywords {
    font-size: 0.85rem;
  }


  /* 講座カード内要素を横並びに */
  .course-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .course-content .course-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0; /* 既存スタイル上書き */
  }

  .course-content .course-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  .course-content .course-meta.text-right {
    white-space: nowrap;
    margin-top: 0; /* 既存スタイル上書き */
  }

  .toggle-details-button {
    font-size: 0.9rem;
  }

  #course-cart {
    font-size: 0.9rem;
    padding: 1rem;
  }

  #apply-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }


  /*=========================
    Mobile version of Forgot Password Page
  =========================*/
  .forgot-password-page {
    padding: 3rem 1rem;
    align-items: center;
    min-height: 90vh;
  }

  .forgot-password-page h1 {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
  }

  .forgot-password-page .form-wrapper {
    width: 100%;
    max-width: 95%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 2rem 1.5rem;
  }

  .forgot-password-page input[type="email"] {
    font-size: 0.95rem;
    padding: 0.8rem;
  }

  .forgot-password-page .btn {
    font-size: 1rem;
    padding: 0.8rem;
  }

  .forgot-password-page p {
    font-size: 0.9rem;
  }

  /* =========================================
   Course Guide Page – Mobile Enhancements
  ========================================= */
   /* section titles and paragraphs */
  .page-course-guide h2 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.4;
  }

  .page-course-guide p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* レイアウト修正中 */
  .form-wrapper {
    width: 100%;
    max-width: 95%;
    margin: 100px auto 60px; /*  push down and center horizontally */
    padding: 1.5rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
  }
  /* レイアウト修正中 */

  .form-title {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    width: 100% !important;
    margin: 0 auto 1rem;
    display: block;
    box-sizing: border-box;
  }
}
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/

@media (max-width: 600px) {
  .internal-menu ul {
    grid-template-columns: 1fr; /* 1列に変更 */
  }

  .internal-link {
    padding: 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--congress-title);
    border-radius: 2px;
  }

  .course-guide {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .course-guide table {
    width: 100%;
    border-collapse: collapse;
  }

  .register-form {
    padding: 1.5rem;
    margin: 1rem;
  }

  .form-title {
    font-size: 1.4rem;
  }

  .form-control {
    font-size: 0.95rem;
    padding: 0.8rem;
  }

  .btn-primary {
    width: 100%;
    font-size: 1rem;
    padding: 0.9rem;
  }



  .forgot-password-page,
  .reset-password-page {
    padding: 3rem 1rem;
    align-items: center;
    min-height: 90vh;
  }

  .forgot-password-page h1,
  .reset-password-page h1 {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
  }

  .forgot-password-page .form-wrapper,
  .reset-password-page .form-wrapper {
    width: 100%;
    max-width: 95%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 2rem 1.5rem;
  }

  .forgot-password-page input[type="email"],
  .reset-password-page input[type="password"] {
    font-size: 0.95rem;
    padding: 0.8rem;
  }

  .forgot-password-page .btn,
  .reset-password-page .btn {
    font-size: 1rem;
    padding: 0.8rem;
  }

  .forgot-password-page p,
  .reset-password-page p {
    font-size: 0.9rem;
  }

}
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
@media (max-width: 480px) {

  body.page main,
  body.home main,
  body.single-post main {
    padding-left: 0.5rem;
    padding-right:  0.5rem;
  }

  .form-wrapper {
    padding: 1.2rem;
    margin: 1.5rem auto;
  }

  /* 修正中 */
  .form-wrapper {
    margin-top: 80px;
    padding: 1.5rem;
    border-radius: 0px;
    box-shadow: none;
    box-sizing: border-box;
  }
  /* 修正中 */

  .form-label {
    font-size: 0.95rem;
  }

  .form-wrapper input,
  .form-wrapper button {
    font-size: 0.95rem;
  }
}

/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/
/**********************************/

@media (max-width: 465px) {

  .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0;
  }

  .header-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    height: auto;
  }

  .header-title {
    font-size: 1.2rem;
    margin: 0;
  }

  .header-subtitle {
    font-size: 0.5rem;
    margin-bottom: 2px;
  }

  .header-title-with-ruby {
    display: flex;
    gap: 0.1em;
    align-items: flex-end;
    transform: translateY(1px); /* fine vertical centering tweak */
  }

  .course-buttons {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow: hidden;
  }

  .ruby {
    font-size: 0.55rem;
  }

  .kanji {
    font-size: 1.8rem;
  }

  .mobile-nav {
    display: flex;
    align-items: center;
  }

  .mobile-nav-list {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
  }

  .mobile-icon {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
  }

  #mobile-menu-toggle .mobile-icon.menu-icon {
    transform: translateY(1px);
  }

  .site-drawer {
    top: 80px;
    width: 85%;
    height: calc(100vh - 80px);
    padding: 1.2rem 1rem;
  }

  .drawer-inner{
    top: 80px;
    left: 16px;
    right: 16px;
  }

  .drawer-menu {
    gap: 1rem;
  }

  .drawer-menu li a {
    font-size: 1rem;
  }

  .site-footer {
    padding: 1.5rem 0.5rem;
  }

  .footer-buttons-top {
    gap: 0.8rem;
    margin-bottom: 0.5rem;
  }

  .footer-btn {
    max-width: 280px;
    font-size: 0.9rem;
    font-weight: 600;
   /* padding: 0.6rem 1rem;*/
  }

  .footer-links {
    gap: 1.2rem;
    margin-bottom: 1rem;
  }

  .footer-links a {
    font-size: 0.8rem;
  }

  .footer-copy {
    font-size: 0.7rem;
  }

  .footer-btn .x-icon {
    width: 16px;
    height: 16px;
  }

  /* About page */
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .internal-menu {
    margin-top: 8rem !important;
    max-width: 100%;
  }

  .internal-menu ul {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .internal-link {
    padding: 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--congress-title);
    border-radius: 2px;
  }

  .internal-link:hover {
    background: var(--congress-title);
    color: #fff;
  }

  .page-aboutus li {
    font-size: 1em;
    line-height: 1.6rem;
  }

  /*==========================
   Login Page Styling (kiin-login-member.php)
  =========================*/
  .login-container {
    padding: 1.8rem 1.2rem;
    max-width: 95%;
    border-radius: 8px;
  }

  .login-form input {
    font-size: 0.9rem;
    padding: 0.7rem;
  }

  body.page-template-kiin-login-member,
  .login-page {
    padding-top: 0 !important;
  }

  .login-page h2 {
    margin-top: 1rem !important;
    font-size: 1.4rem !important;
  }

  /* =========================================
   Forgot Password Page Styling
   (forgot_password.php)
  ========================================= */
  .forgot-password-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 80vh;
    padding: 5rem 1rem 6rem;
    background: #fff;
  }

  .forgot-password-page h1 {
    font-family: "Zen Maru Gothic", sans-serif;
    color: var(--congress-title);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .forgot-password-page .form-wrapper {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 2.5rem 2rem;
    text-align: left;
  }

  .forgot-password-page label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
  }

  .forgot-password-page input[type="email"] {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f9f9f9;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .forgot-password-page input[type="email"]:focus {
    border-color: var(--congress-title);
    box-shadow: 0 0 0 3px rgba(63, 175, 74, 0.2);
    background: #fff;
  }

  .forgot-password-page .btn {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--congress-title);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .forgot-password-page .btn:hover {
    background: var(--congress-blue-hover);
  }

  .forgot-password-page p {
    text-align: center;
    margin-top: 1.8rem;
    font-size: 0.95rem;
  }

  .forgot-password-page a {
    color: var(--aqua-pearl);
    text-decoration: none;
    font-weight: 500;
  }

  .forgot-password-page a:hover {
    color: var(--aqua-pearl-hover);
    text-decoration: underline;
  }

  /* Success message styling */
  .success-message {
    color: #1a7f37;
    background-color: #e6f4ea;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
  }

  /*-------------------------
    Course Guide Page – full mobile redesign
  ------------------------*/
  .course-guide-wrapper {
    overflow-x: hidden !important;
  }

  .course-guide {
    width: 100vw;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    font-size: 3vw;
  }

  .course--guide th,
  .course--guide td {
    padding: 0.3rem;
    font-size: 3vw;
  }

  .course--guide th {
    font-size: 0.8rem;
  }

  .course-guide td.nake {
    text-align: right;
  }

  section .course-guide:last-child {
    margin-bottom: 2rem;
  }

  .course-guide-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .form-wrapper {
    margin: 80px auto 40px; /* avoid top overlap */
    padding: 1.2rem;
  }

  .form-title {
    font-size: 1.3rem !important;
  }

  input, textarea, select {
    font-size: 0.95rem;
  }

  .course-buttons-mobile {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }

  .course-buttons-mobile a,
  .course-buttons-mobile button {
    flex: 1 1 auto;
    max-width: 140px;
    text-align: center;
  }

  div.course-buttons-mobile div.btn-with-img a.course-btn-wide  {
    flex: 0 1 auto;
    max-width: none;
    text-align: left;
  }

}







/* =========================
   講座カード修正版（1列表示対応）
========================= */

/* カード全体を縦並びに */
.card-container {
  display: block !important; /* フレックス解除 */
}

.course-card {
  display: block;
  flex: 1 1 31%;
  width: 100%;
  min-width: 240px;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 4px;
  background: var(--white, #fff);
  color: var(--log-cabin, #333);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* ホバー時の軽い浮き上がり */
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* ===== コース内要素を横並び（1カード内のみ） ===== */
.course-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.course-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  margin: 0;
}

.course-meta.text-right {
  white-space: nowrap;
}



/* 受付状況バッジ */
.course-status {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 6px;
  background: #f5f5f5;
  color: #555;
}

.course-card .course-status:contains("受付中") {
  background: #e0f6ec;
  color: #008040;
}

.course-card .course-status:contains("受付終了") {
  background: #fce4e4;
  color: #b00020;
}

/* ===== レスポンシブ調整 ===== */
@media screen and (max-width: 768px) {
  .course-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .course-title {
    white-space: normal;
  }

  .card-container{
    width: 100%;
    padding: 0px;
    margin: 0px;
  }
}


/* ======================================
   GLOBAL STICKY NAVIGATION
====================================== */

/* Make ALL internal menus sticky when they have an ID */
#aboutus-nav,
#course-guide-nav,
#mypage-nav {
  position: sticky;
  top: 100px; /* Adjust based on header height */
  z-index: 2000;
  background: #fff;
 /* border-bottom: 2px solid var(--congress-blue);*/
  padding: 0.9rem 0;
}



/* 底辺から5px上に線を描画 */
#aboutus-nav::after,
#course-guide-nav::after,
#mypage-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px; /* ←底辺から5px上に配置 */
  height: 2px; /* 線の太さ */
  background-color: var(--congress-title);
}



@media (max-width: 465px) {
  #aboutus-nav::after,
  #course-guide-nav::after,
  #mypage-nav::after {
    content: none;
  }

  .course-card {
    padding: 0rem;
  }
}

/* Allow sticky to work (parent elements must NOT clip scroll area) */
.site-wrapper,
.kiin-container,
main,
body {
  overflow: visible !important;
}

/* 全体補強：スクロールはみ出し防止 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}


/* page-aboutus テーブルに罫線を表示 */
table.page-aboutus {
  border-collapse: collapse;
  width: 100%;
}

table.page-aboutus th,
table.page-aboutus td {
  border: 1px solid #797979;

  padding: 0.6rem;
  font-size: 0.95rem;
}

.page-aboutus ul{
  list-style: none;
  padding-left: 0;
}

.page-aboutus li {
  font-size: 1.1em;
  line-height: 1.8rem;
  color: #333;
}




/* ======================================
   DISABLE STICKY ON MOBILE
/* ======= モバイル表示用：main要素の右はみ出し対策 ======= */
@media (max-width: 768px) {

  #aboutus-nav,
  #course-guide-nav,
  #mypage-nav {
    position: static !important;
    top: auto !important;
    border-bottom: none;
    padding: 0; /* optional */
  }


  main.page-aboutus,main.course-catalog {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }


  .page-aboutus img,
  .page-aboutus table,
  .page-aboutus iframe {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  table.page-aboutus th,
  table.page-aboutus td {
    border: 1px solid #ccc;
    padding: 0.0rem;
    font-size: 0.8rem;
  }



  .login-page {
    margin-top: 0px;
  }


  body.page main, body.home main, body.single-post main {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  h4 {
      font-size: 0.9rem;
  }

  h5 {
      font-size: 0.85rem;
  }

  .page-aboutus li {
    font-size: 0.9em;
    line-height: 1.2rem;
    color: #333;
  }

  h2 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1.0em;
  }


  .course-content p {
    font-size: 0.8em;
  }


  .lec_area {
    display: block;
    padding: 0;
    gap: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    cursor: auto;
  }

  .lec_area:hover {
    background: none;
    box-shadow: none;
  }


  .course-id,
  .course-date-block,
  .lecture_time,
  .course-format,
  .course-title,
  .course-subtitle,
  .speaker-name,
  .course-meta{
    font-size: 0.9rem;
  }

  /*姓名でカナ出ない場合のエラー表示エリア
  最初は消しておく。
  プロフィール画面等で使用*/
  .kiin-error-message {
    display: none;
    color: red;
    margin-top: 5px;
  }
}

/* =================================================
   Course Catalog – remove side padding (≤465px)
================================================= */
@media (max-width: 465px) {
  main.page-aboutus {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-course-catalog .course-status-red,
  body.page-template-page-course-catalog .course-status-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;   /* prevent 「終 / 了」 split */
    font-size: 0.75rem;    /* slightly smaller for narrow width */
    line-height: 1;        /* prevent vertical stretch */

    padding: 0.25em 0.6em; /* compact but readable */
    border-radius: 999px;  /* keep pill shape */
  }

  .course-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .course-datetime {
    flex: 1 1 auto;     /* allow shrinking */
    min-width: 0;       /* IMPORTANT: prevents overflow */
    font-size: 0.95rem;
  }

  .course-status {
    margin-left: auto;  /* ← FORCE RIGHT */
    flex-shrink: 0;     /* never shrink */
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.25em 0.6em;
    border-radius: 999px;
  }

}



/* 管理者サブメニュー */
/* 管理者サブメニュー */
/* 管理者サブメニュー */
/* 管理者サブメニュー */
/* =========================
   管理者メニュー（完成版）
   ========================= */
/* ==========================
   WordPress競合回避済みCSS
   ========================== */

.kiin_admin-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  
  gap: 10 !important;  /* ← これで他のgap指定を完全無効化 */
}



.kiin_admin-menu ul {
   gap: 0rem;
   width: auto; 
}

.kiin_admin-menu > li {
  position: relative;
}

.kiin_admin-menu > li > a {
  display: inline-block;
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.kiin_admin-menu > li > a:hover {
  background-color: #e0e0e0;
 color: #0073aa;   /* ← これを追加 */

}

.kiin_has-submenu > a::after {
  content: ' ▼';
  font-size: 10px;
  margin-left: 6px;
}





/* ▼ サブメニュー */
.kiin_submenu {
  position: absolute;
  top: 100%;
  left: 0;

  list-style: none;
  margin: 6px 0 0;
  padding: 4px 0;

  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

  z-index: 999;

  /* ✔ 文字に合わせた幅 */
  width: 400px;
  min-width: unset;

  /* ✔ アニメーション維持 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}



/* 完全な縦並び */
.kiin_submenu > li {
  display: block;
  margin: 0;
  padding: 0;
}

.kiin_submenu > li > a {
  display: inline-block;     /* ✔ 背景を文字幅に合わせる */
  width: auto;
  padding: 6px 8px;
  line-height: 1.35;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;       /* ✔ 折り返さない */
}

.kiin_submenu > li > a:hover {
  background-color: #f2f4f7;
  color: #0073aa;
}

/* Hover時に表示 */
.kiin_has-submenu:hover .kiin_submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/*パスワードの目玉です*/
.kiin-password-wrapper {
    position: relative;
}

.kiin-password-input {
    width: 100%;
    padding-right: 40px; /* アイコン分の余白 */
}

.kiin-password-toggle {
    position: absolute;
    right: 10px;
    top: 40%;
    transform: translateY(-50%);
    
    background: none;
    border: none;
    padding: 0;
    margin: 0;

    font-size: 18px;
    cursor: pointer;
}

/* フォーカス時も枠を出さない */
.kiin-password-toggle:focus {
    outline: none;
}


.kiin-invoice-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    text-align:center;
    align-items:center;
    margin-top:20px;
}

.kiin-head{
  font-weight:bold;
}

.invoice-box{
  min-height:60px;
}

.kiin-invoice-hidden {
    display: none;
}