body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  color: #333333;
  font-size: 16px;
}
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

a {
    color: #f97316;
}
a:hover {
    opacity: 0.7;
    text-decoration: none;
}

h1 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}

h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    #f97316,
    #f97316 4px,
    white 4px,
    white 8px
  );
}

h2{
    font-size: 24px;
    font-weight: bold;
    background-color: #FFF7ED;
    padding: 12px 20px 12px 20px;
    margin-bottom: 30px;
}

h3 {
  position: relative;
  padding: 0.6em 0  0.8em 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: #f97316; /* 縦線の色 */
}

h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #f97316; /* 下線の色 */
}

h4 {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding-left: 14px;
  padding-top: 6px;
  margin-bottom: 20px;
}

h4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 21px;
  height: 21px;
  background-color: #fdebd0; /* 淡いオレンジ (#fdebd0 ≒ #fff3e0) */
  border-radius: 50%;
  z-index: -1;
}

@media (max-width: 768px) {
    h1 {
       font-size: 18px;
    }
    h2{
        font-size: 16px;
    }
    h3{
        font-size: 16px;
    }
    h4{
        font-size: 14px;
    }
}

section{
    margin-bottom: 180px;
}
@media (max-width: 768px) {
    section{
        margin-bottom: 80px;
    }
}

header .navbar .navbar-brand a.logo{
	text-decoration: none;
}
header .navbar .navbar-brand .logo img{
	width: 144px;
	height: 24px;
}

header .navbar .navbar-brand a.about{
	font-size: 14px;
	line-height: 21px;
	color: #757575;
	text-decoration: none;
	font-weight: 700;
}

header .navbar .navbar-brand a.about i{
	color: #f97316;
}
header .navbar .navbar-brand .about img.icon{
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}

@media (max-width: 991px) {
    header{
        padding: 10px 0 15px 0;
    }
    header a.nav-block{
        text-align: center;
        font-size: 10px;
        font-weight: bold;
        text-decoration: none;
    }
    header a.nav-block:hover{
        opacity: 0.7;
    }
    header .logo img{
    	width: 144px;
    	height: 24px;
    }
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.btn:hover {
  opacity: 1;
}

/* 白抜きボタン（アウトライン） */
.btn-outline {
  background-color: #ffffff;
  color: #f97316 !important;
  border: 1px solid #f97316;
}
.btn-outline:hover {
  background-color: #f97316;
  color: #ffffff !important;
}
.btn-outline i.bi{
    color: #f97316;
    font-size: 110%;
}
.btn-outline:hover i.bi {
    color: #FFFFFF;
}

/* 塗りつぶしボタン */
.btn-fill {
  background-color: #f97316;
  color: #ffffff;
  border: 1px solid #f97316;
}
.btn-fill:hover {
  background-color: #ffffff;
  color: #f97316;
  border: 1px solid #f97316;
}
.btn-fill i.bi{
    color: #FFFFFF;
    font-size: 110%;
}
.btn-fill:hover i.bi {
    color: #f97316;
}

.btn-middle{
  font-size: 18px;
  padding: 11px 40px;
}

.btn-line,
.btn-line:hover{
    background-color: #00b900;
    color: #FFFFFF;
}
.btn-line:hover{
    opacity: 0.7;
}

@media (max-width: 768px) {
    .btn-middle{
      font-size: 16px;
      padding: 9px 20px;
    }
}

/* グローバルナビ */
.gnav-row a {
  text-decoration: none;
  transition: opacity 0.2s;
  font-size: 15px;
}

.gnav-row a:hover {
  opacity: 0.8;
}

.gnav-each img {
  max-height: 60px;
}

.gnav-each .sub{
    font-size: 12px;
    color: #BDBDBD;
}

.gnav-each .dropdown-menu{
    width: 210px;
}
.gnav-each .bi{
    color: #333;
    font-size: 9px;
}

.dropdown-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg); /* 上下中央＆上下逆 */
  font-size: 0.5rem;
  color: #333333;
  pointer-events: none; /* アイコンにクリック判定が乗らないように */
}

.sp-menu-close-wrapper{
    display: none !important;
}

@media (max-width: 991px) {
  .gnav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 230px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1001;
    padding: 15px;
  }

  .gnav.open {
    right: 0;
  }
  
    .gnav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1000;
    }
    
    .gnav-each{
        margin-bottom: 10px;
        text-align: left;
    }
    .sp-menu-close-wrapper{
        display: flex !important;
        justify-content: flex-end;
        height: 50px;
        font-size: 10px;
        font-weight: bold;
        text-decoration: none;   
    }
    .sp-menu-close-wrapper .sp-menu-close-inner{
        width: 40px;
        text-align: center;
        color: #f97316;
    }
    
    .gnav-each .dropdown-menu{
        width: 200px;
    }
    .gnav-each img {
      max-height: 50px;
    }
}

/* footer */
footer .logo img{
	width: 120px;
	height: 21px;
}
@media (max-width: 768px) {
    footer .logo img{
    	width: 120px;
    	height: 21px;
    }
}

/* front-page */

/* TOPページメインビジュアル*/
.main-visual {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* padding: 80px 0 220px 0; */
  height: 600px;
}

.main-visual .message{
    margin-top: 80px;
    margin-bottom: 40px;
}
.main-visual .message img {
    width: 614px;
}

.main-visual .lead{
    font-size: 18px;
    line-height: 37px;
    font-weight: 400;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .main-visual {
        height: 750px;
    }
    
    .main-visual .message{
        margin-top: 100px;
    }
    .main-visual .message img {
        width:  auto;
        min-width: 3
    }
    
    .main-visual .lead{
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 30px;
    }
}

.front-page h2{
    font-size: 36px;
    line-height: 54px;
    padding: 0;
    background-color: transparent;
}

.front-page .purpose-nav-inner{
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 40px 30px 40px 30px;
    box-shadow: 0 0 24px rgba(132, 54, 0, 0.15);
    height: 100%;
}
.front-page .purpose-nav-inner h3{
    padding-left: 0;
    padding-bottom: 0;
    font-size: 28px;
    line-height: 42px;
}
.front-page .purpose-nav-inner h3::before,
.front-page .purpose-nav-inner h3::after {
  content: none !important;
  display: none !important;
}

.front-page .purpose-nav-inner .image{
    text-align: center;
}

.front-page .purpose-nav-inner .sub-inner{
    font-size: 14px;
    line-height: 21px;
    padding: 20px;
    border: 1px solid #f97316;
    border-radius: 8px;
    height: 100%;
}

.front-page .purpose-nav-inner .sub-inner a{
    color: #333333;
    font-weight: bold;
    text-decoration: none;
}

@media (max-width: 768px) {
    .front-page h2{
        font-size: 24px;
        line-height: 36px;
    }
    .front-page .purpose-nav-inner{
        padding: 20px 15px 20px 15px;
    }
    .front-page .purpose-nav-inner h3{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    .front-page .purpose-nav-inner .image img{
        width: 50%;
    }
    .front-page .purpose-nav-inner .sub-inner{
        font-size: 12px;
        padding: 15px;
    }
}
    
/* コラムリスト */
.column-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #333333;
}
.column-card:hover {
  opacity: 0.7;
}
.column-card-inner {
  position: relative;
}

.column-card .image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 10px;
}

.column-card .image img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.column-card .type-label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #10B981;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px 0 6px 0;
}

.column-card .arrow-cover {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 58px;
  height: 58px;
  background-color: #fff;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 4px; /* 視覚調整用 */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-card .arrow-cover::before {
    right: 0;
    top: -20px;
}
.column-card .arrow-cover::after {
    right: 58px;
    top: 38px;
}

.column-card .arrow-cover::before, 
.column-card .arrow-cover::after {
    content: "";
    position: absolute;
    background: transparent;
    width: 20px;
    aspect-ratio: 1;
    border-bottom-right-radius: 20px;
    box-shadow: 4px 4px 0 4px #fff;
}

/* 矢印アイコンは円形＋SVG背景 */
.column-card .arrow-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background-image: url('/ashita-lab/wp-content/themes/ashitalab/assets/images/card-arrow.svg'); /* SVGファイルパス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
}
.column-card .title{
    font-weight: bold;
}
    
@media (max-width: 768px) {
    .column-card {
      padding: 12px;
    }  
    .column-card .type-label {
      font-size: 10px;
      padding: 3px 8px;
    }
    .column-card .arrow-cover {
      width: 35px;
      height: 35px;
      border-top-left-radius: 17px;
      border-bottom-right-radius: 4px; /* 視覚調整用 */
    }
    .column-card .arrow-icon {
      width: 30px;
      height: 30px;
    }
    .column-card .arrow-cover::before {
        right: 0;
        top: -20px;
    }
    .column-card .arrow-cover::after {
        right: 35px;
        top: 15px;
    }
    
    .column-card .arrow-cover::before, 
    .column-card .arrow-cover::after {
        border-bottom-right-radius: 12px;
        box-shadow: 2px 2px 0 2px #fff;
    }
    .column-card .title{
        font-size: 12px;
    }
}

/* 固定ページ、記事詳細 */

.auto-margin{

}
.auto-margin p{
    margin-bottom: 1.5rem;
}

.auto-margin h2,
.auto-margin h3,
.auto-margin h4,
.auto-margin h5,
.auto-margin p{
    margin-bottom: 1.5rem;
}

/* TOPページリスト */
.list a{
    color: #333333;
    text-decoration: none;
}
.list a:hover{
    opacity: 0.7;
}
.list a .title{
    font-weight: 700;
}

/* 画像枠全体に背景と角丸を適用 */
.list a .image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3; /* 例：4:3。1/1や16/9でも可 */
  background-color: #999999;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list a .image-wrapper img.image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 画像を丸く表示 */
.list a .image-wrapper-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list a .image-wrapper-circle img.image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;     /* はみ出した部分を切り抜く */
  object-position: center; /* 中央寄せ */
  display: block;
}

/* 共通 */
.bg-light-orange{
    background-color: #FFF7ED;
}

/* 非活性リンク（ポインターと色を変更） */
.disabled-link {
  pointer-events: none;
  opacity: 0.6;
}

/* グレースケールフィルターで画像をグレーに */
.gray-img {
  filter: grayscale(100%);
  opacity: 0.5;
}

/* ログイン・会員登録フォーム */
#wpmem_login_form fieldset,
#wpmem_register_form fieldset,
#wpmem_profile_form fieldset,
#wpmem_pwdchange_form fieldset
{
    margin-bottom: 40px;
}

legend{
    font-weight: bold;
}

#wpmem_login_form label,
#wpmem_register_form label,
#wpmem_profile_form label,
#wpmem_pwdchange_form label
{
    font-weight: bold;
    margin-bottom: 10px;
}
#wpmem_login_form .div_text,
#wpmem_register_form .div_text,
#wpmem_profile_form .div_text,
#wpmem_pwdchange_form .div_text
{
    margin-bottom: 15px;
}

#wpmem_login_form .buttons,
#wpmem_register_form .buttons,
#wpmem_profile_form .buttons,
#wpmem_pwdchange_form .buttons
{
  background-color: #f97316;
  color: #ffffff;
  border: 1px solid #f97316;
    display: block;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
    margin-bottom: 10px;
}
#wpmem_login_form .buttons:hover,
#wpmem_register_form .buttons:hover {
  background-color: #ffffff;
  color: #f97316;
  border: 1px solid #f97316;
}
#wpmem_login_form input[type="text"],
#wpmem_login_form input[type="password"],
#wpmem_register_form input[type="text"],
#wpmem_register_form input[type="password"],
#wpmem_register_form input[type="email"],
#wpmem_profile_form  input[type="text"],
#wpmem_profile_form  input[type="password"],
#wpmem_profile_form  input[type="email"],
#wpmem_pwdchange_form  input[type="text"],
#wpmem_pwdchange_form  input[type="password"],
#wpmem_pwdchange_form  input[type="email"]
{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    max-width: 375px;
}

@media (max-width: 768px) {
    #wpmem_login_form legend,
    #wpmem_register_form legend,
    .line-register-wrapper legend,
    .line-login-wrapper legend{
        font-size: 18px;;
    }
}

/* Asgaros Forum */
#af-wrapper{
    font-size: 14px;
}
a.subscriptions-link,
a.logout-link,
#memberslist-filter-toggle,
#memberslist-filter,
#statistics,
.topic-button-sticky,
.edit-profile-link,
#profile-header {
  display: none !important;
}
h1.main-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  width: 100%;
}

h1.main-title::after {
  content: "";
  position: static;
  height: auto;
  width: auto;
  background-image: none;
}

#af-wrapper #forum-header{
    background-color: #f97316;
    margin-bottom: 10px;
}
#af-wrapper #forum-navigation a, 
#af-wrapper #forum-navigation-mobile a{
    border-left-color: #FFFFFF;
}
#af-wrapper .title-element{
    background-color: #f97316;
    border-bottom-color: #f97316;
}
#af-wrapper .content-container, 
#af-wrapper .editor-element{
  border-width: 1px 1px 2px;
}
#af-wrapper small{
    font-size: 14px;
}
#af-wrapper .button-normal{
        background: #f97316;
}
#af-wrapper #forum-search {
    float: right;
    width: 238px;
    height: 38px;
    line-height: 38px;
    margin: 3px;
    padding: 0;
    box-sizing: border-box;
    background-color: #fff;
    color: #444;
    border: none;
    border-radius: 3px;
    cursor: text;
}
#af-wrapper #forum-search .search-icon {
    padding: 0;
    width: 35px;
    height: 38px;
    line-height: 38px;
    text-align: center;
}
#af-wrapper #bottom-navigation{
    font-size: 14px;
}
#af-wrapper #bottom-navigation .fas{
    font-size: 14px;
}
#af-wrapper #bottom-navigation a{
    font-size: 14px;
    font-style: normal;
}

#af-wrapper .forum-name, 
#af-wrapper .topic-name{
    font-size: 18px;
    font-weight: bold;
    padding: 15px 20px 15px 0;
}
#af-wrapper .forum-name > a, 
#af-wrapper .topic-name > a{
    margin-bottom: 10px;
    display: block;
}
#af-wrapper .last-post-headline{
    font-style: normal;
}
#af-wrapper .post-reactions .reaction{
    font-size: 21px;
}
#af-wrapper .post-reactions .reaction-icon:before{
    font-size: 24px;
}
#af-wrapper .post-reactions .reaction.down{
    display: none;
}
#af-wrapper .post-reactions-summary .reaction-names{
    font-size: 14px;
        margin: 10px 0;
}
#af-wrapper #profile-content .profile-row .profile-row-value{
    font-style: normal;
}
#af-wrapper #profile-navigation{
        background: #f97316;
}
#af-wrapper #profile-navigation a.active{
        background: #e96306;
}
#af-wrapper .member-last-seen{
    font-style: normal;
    font-size: 14px;
}
#af-wrapper .member-posts{
    font-size: 14px;
}
#af-wrapper .first-post{
    border: 2px solid #f97316;
}
#af-wrapper .first-post .forum-post-header-container{
    background-color: #FFF7ED;
    border-bottom: 2px solid #f97316;
}

#af-wrapper .post-author img.avatar{
    height: 48px;
    width: 48px;
}
#af-wrapper .first-post .post-author img.avatar{
    height: 64px;
    width: 64px;
}


/* attendance */
.attendance-inner {
  border-radius: 16px;
  padding: 38px 24px 32px; /* ←上の余白を広げる */
  background: white;
  box-shadow: 0 0 24px rgba(132, 54, 0, 0.15); /* #843600の15% */
  position: relative;
  overflow: visible;
  height: 100%;
}

.attendance-inner .label {
  position: absolute;
  top: -20px;
  left: 15px;
  width: 60px; /* 必要に応じて調整 */
  height: auto;
}

.attendance-inner .label img {
  display: block;
  width: 56px;
  height: 58.5px;
  height: auto;
}

.attendance-inner .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.attendance-inner p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}
@media (max-width: 768px) {
    .attendance-inner .title {
      font-size: 20px;
      line-height: 30px;
    }
    .attendance-inner p {
      font-size: 14px;
      line-height: 24px;
    }
}

/* high-school */
.hs-feature-inner {
  border-radius: 16px;
  padding: 48px 24px 32px; /* ←上の余白を広げる */
  background: white;
  box-shadow: 0 0 24px rgba(132, 54, 0, 0.15); /* #843600の15% */
  position: relative;
  overflow: visible;
  height: 100%;
}

.hs-feature-inner .label {
  position: absolute;
  top: -20px;
  left: 15px;
  width: 56px;
  height: 59px;
  background: url("../images/hs_label_bg.svg") no-repeat center center;
  background-size: contain; /* 縦横比を維持してフィット */
  
  display: flex;            /* 中央寄せにする */
  align-items: center;      /* 縦方向の中央揃え */
  justify-content: center;  /* 横方向の中央揃え */
  
  font-size: 30px;
  font-weight: bold;
  color: #FFFF;              /* 数字の色。背景に合わせて調整 */
  line-height: 1;           /* 高さを詰めて中央に */
}

.hs-feature-inner .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.hs-feature-inner p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}
.hs-feature-inner a {
    display: none;
}
@media (max-width: 768px) {
    .hs-feature-inner .title {
      font-size: 20px;
      line-height: 30px;
    }
    .hs-feature-inner p {
      font-size: 14px;
      line-height: 24px;
    }
}

/* 全体背景 */
.board-inner {
  padding: 80px 20px;
  text-align: center;
  border: 15px solid #FED7AA;
  background-color: #047857;
}

.board-inner h2{
    color: #FFFFFF;
}

.board-inner h2 img{
    max-height: 60px;
}

/* カード全体レイアウト */
.board-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

/* カード個別 */
.board-container .board-card {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 552px; /* 通常は2カラムのための幅 */
  padding: 40px 24px 32px;
  text-align: left;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
  flex: 1 1 45%; /* 45%程度で2カラム構成 */
}

/* テープ風の装飾 */
.board-container .board-card .tape {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 145px;
  height: 32px;
  opacity: 0.8;
}

.board-container .board-card .tape-yellow {
  background: #FDE68A;
}

.board-container .board-card .tape-pink {
  background: #FBCFE8;
}

.board-container .board-card .link-icon{
  width: 48px;
  height: 48px;
}

/* タイトル */
.board-container .board-card .title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.board-container .board-card .title img {
  width: 90px;
  height: 90px;
  margin-right: 10px;
}

@media (max-width: 768px) {
    .board-container .board-card {
      flex: 1 1 100%;
      max-width: 100%; /* 横幅いっぱいに */
      padding: 30px 15px 20px;
    }
    .board-inner {
      padding: 20px 15px;
      border: 10px solid #FED7AA;
    }
    .board-container .board-card .tape {
      width: 108px;
      height: 24px;
    }
    .board-container .board-card .title {
      font-size: 20px;
      line-height: 30px;
    }
    .board-container .board-card .title img {
      width: 54px;
      height: 54px;
      margin-right: 10px;
    }
    .board-container .board-card .link-icon{
      width: 30px;
      height: 30px;
    }
}

/* LINE会員登録・ログイン */
.line-register-wrapper{

}
.line-login-wrapper{

}

/* column-single */
.column-single .thumbnail{
    margin-bottom: 30px;
}
.column-single .column-single-content{
    font-family: "Noto Sans", sans-serif;
    word-break: break-all;
}
.column-single .column-single-content p{
    margin-bottom: 30px;
    line-height: 24px;
}
.column-single .column-single-content .supervisor{
    background-color: #FFFBEB;
    padding: 30px;
}
.column-single .column-single-content .supervisor .name{
    margin-bottom: 10px;
    font-weight: bold;
}
.column-single .column-single-content .supervisor .position{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.column-single .column-single-content .supervisor .introduction{
    font-size: 14px;
}
@media (max-width: 768px) {
    .column-single .column-single-content .supervisor{
        padding: 20px;
    }
}

/* 画像の見た目を少しだけ整える（必要に応じて） */
.column-single .expert-img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* はみ出しを切り抜き */
  object-position: center;  /* 中央配置 */
  border-radius: 50%;       /* 正円 */
  display: block;
}

@media (max-width: 768px) {
  .column-single .expert-img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ベース */
.table.basic-table {
  width: 100%;
  border-collapse: separate;  /* 角丸を効かせるため separate + overflow:hidden */
  border-spacing: 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}

/* セル共通 */
.table.basic-table th,
.table.basic-table td {
  padding: 22px 28px;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

/* 行末セル／最終行の罫線を消す */
.table.basic-table tr > *:last-child { border-right: 0; }
.table.basic-table tr:last-child > * { border-bottom: 0; }

/* 見出し行（「種類」「特徴」「向いているお子さま」） */
.table.basic-table thead th {
  background: #F5F5F5;
  font-weight: 700;
}

/* 1列目の行見出し（学年式／無学年式）を太めに */
.table.basic-table tbody th {
  font-weight: 700;
  background: #FAFAFA;
}

/* レスポンシブ（任意：小さめ画面で少し締める） */
@media (max-width: 768px) {
  .table.basic-table {
    table-layout: auto;
  }
    .table.basic-table th,
    .table.basic-table td {
      padding: 10px 12px;
    }
}

/* 目次枠（画像の雰囲気に寄せた淡いオレンジ系） */
.toc-box{
  border-width:2px !important;
  border-color:#ffa375 !important;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg,#ffa375,#ff8a5c) border-box;
}

/* トグルリンク色 */
.toc-box .link-orange{ color:#ff8a3d; text-decoration:none; }
.toc-box .link-orange:hover{ text-decoration:underline; }
.toc-box .toc-toggle{
    font-size: 14px;
}
/* 行間と番号 */
.toc-list .toc-num{
  min-width:1em;
  font-weight:700;
  color:#ff7a27;
}

.toc-list li{
    margin-top: 5px;
}
.toc-list li.indent-2{
    padding-left: 10px;
    margin-top: 10px;
}
.toc-list li.indent-2:first-child{
    margin-top: 0;
}
.toc-list li.indent-3{
    padding-left: 30px;
}
.toc-list li.indent-4{
    padding-left: 40px;
}

.toc-list li.indent-2 .toc-num{
    
}
.toc-list li.indent-2 .toc-text{
    font-weight: bold;
}
.toc-list li.indent-3 .toc-num,
.toc-list li.indent-4 .toc-num{
    font-size: 12px;
    padding-right: 8px;
    border-right: 1px solid #E0E0E0;
    min-width: 35px;
}
.toc-list li.indent-3 .toc-text,
.toc-list li.indent-4 .toc-text{
    font-size: 12px;
}

.toc-link{ color:#333; text-decoration:none; }
.toc-link:hover{ text-decoration:none; }

/* SP：少し詰める */
@media (max-width: 576px){
  .toc-box{ padding:1rem!important; }
}