.column_detail_w{
  padding: 0px 0 ;
}
.column_detail_w .column_detail_h{
  margin-bottom: 40px;
}
.column_detail_w .column_detail_h .column_ttl{
  font-size: 2.6rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.column_detail_w .column_detail_h .tags{
  gap:5px;
  margin-bottom: 20px;
}
.column_detail_w .column_detail_h .tags li a{
  border: 1px solid var(--color-main);
  line-height: 1;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 1.2rem;
  display: inline-block;
}
.column_detail_w .column_detail_h .date_w{
  align-items: center;
}
.column_detail_w .column_detail_h .date_w .date_i{
  margin-right: 15px;
}
.column_detail_w .column_detail_h .date_w .date_i .icon{
  margin-right: 5px;
}
.column_detail_w .column_detail_h .date_w .date_i .icon img{
  width: 15px;
  vertical-align: super;
}
.column_detail_w .column_detail_h .date_w .date_i .date{
  line-height: 1;
  color: #979797;
}
.column_detail_w .eyecatch{
  text-align: center;
  margin-bottom: 40px;
}

#toc-container {
  margin-bottom: 30px;
}
#toc-container .toc_wrapper {
  padding: 20px;
  border-radius: 6px;
  background: #f8f8f8;
  transition: all 0.3s ease;
}

/* --- ヘッダー部 --- */
#toc-container .toc_wrapper .toc_head {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
#toc-container .toc_wrapper .toc_head h2 {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#toc-container .toc_wrapper .toc_head h2 span {
  padding: 10px 15px;
  line-height: 1;
}

/* --- 開閉アイコン --- */
#toc-container .toc_wrapper .toc_head::after {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--color-main);
  border-bottom: 1px solid var(--color-main);
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.3s ease;
}
#toc-container .toc_wrapper.open .toc_head::after {
  transform: translateY(-50%) rotate(135deg);
}

/* --- リスト部 --- */
#toc-container .toc_wrapper .toc_list {
  border-top: 1px solid #d3d3d3;
  padding-top: 20px;
  margin-top: 20px;
  overflow: hidden;
  max-height: 1000px;            /* open時の上限（中身に応じて余裕を持たせる） */
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease,
              padding 0.3s ease, margin 0.3s ease, border-width 0.3s ease;
}
/* 閉じている時（open無し）はリストを畳む */
#toc-container .toc_wrapper:not(.open) .toc_list {
  max-height: 0;
  padding-top: 0;
  margin-top: 0;
  border-top-width: 0;
  opacity: 0;
}
#toc-container .toc_wrapper .toc_list li {
  margin-bottom: 15px;
  line-height: 1.5;
}
#toc-container .toc_wrapper .toc_list li:nth-last-of-type(1) {
  margin-bottom: 0;
}
#toc-container .toc_wrapper .toc_list li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.2s;
}
#toc-container .toc_wrapper .toc_list li a:hover {
  color: var(--color-main);
}
#toc-container .toc_wrapper .toc_list li .cir {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-main);
  margin-right: 8px;
}

/* --- アニメーション（開閉） --- */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  max-height: 500px;
}

.column_contents{}
.column_contents h2.contents_header{
	background: var(--color-main);
	padding-left: 20px;
	position: relative;
	font-size: 1.8rem;
	padding: 10px 10px 10px 25px;
	color: #fff;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 30px;
	margin-top: 40px;
  scroll-margin-top: 100px;
}
.column_contents h2.contents_header:before{
	content: "";
	display: block;
	width: 2px;
	height: 70%;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	left: 14px;
}
.column_contents b {
  font-weight: 800;
}
.column_contents .img_block {
  margin-bottom: 25px;
  margin-top: 15px;
  text-align: center;
}
.column_contents .img_caption {
  margin-bottom: 20px;
  margin-top: -15px;
  background: #f0f0f0;
  padding: 10px;
  font-size: 1.2rem;
  color: #64748b;
}
.column_contents .img_caption::before {
  content: "— ";
}
.column_contents h3.contents_header {
  font-size: 1.8rem;
  font-weight: 700;
  border-left: 4px solid var(--color-main);
  padding-left: 10px;
  margin: 25px 0;
}

.column_contents ul,
.column_contents ol {
  padding: 0;
  margin: 0 0 30px;
  list-style: none !important;
}
.column_contents ol {
  counter-reset: custom-counter;
}
.column_contents ul li {
  position: relative;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.6;
  border-bottom: 1px solid #ccc;
}
.column_contents ul li:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--color-main);
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 17px;
}
.column_contents ol li {
  counter-increment: custom-counter;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.6;
  border-bottom: 1px solid #ccc;
  list-style: none;
}
.column_contents ol li:before {
  content: counter(custom-counter) ". ";
  color: var(--color-main);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 16px;
}
.column_contents blockquote {
  margin-bottom: 30px;
  padding: 20px;
  border-left: 4px solid var(--color-main);
  background: #f7f0e8;
}
.column_contents blockquote p {
  margin: 0 0 10px;
  line-height: 1.8;
}
.column_contents blockquote cite {
  display: block;
  font-size: 1.2rem;
  font-style: normal;
  color: #64748b;
}
.column_contents blockquote cite::before {
  content: "— ";
}


.column_contents p.contents_p{
	margin-bottom: 15px;
}
.column_contents p.contents_p .font_size_L{
	font-size: 2.0rem;
}
.column_contents p.contents_p .font_size_M{
	font-size: 1.6rem;
}
.column_contents p.contents_p .font_size_S{
	font-size: 1.2rem;
}
.column_contents h2.contents_header .font_size_L{
  font-size: 3.0rem;
}
.column_contents h2.contents_header .font_size_M{
  font-size: 2.2rem;
}
.column_contents h2.contents_header .font_size_S{
  font-size: 1.8rem;
}
.column_contents h3.contents_header .font_size_L{
  font-size: 2.4rem;
}
.column_contents h3.contents_header .font_size_M{
  font-size: 1.8rem;
}
.column_contents h3.contents_header .font_size_S{
  font-size: 1.4rem;
}
.column_contents li .font_size_L{
  font-size: 2.0rem;
}
.column_contents li .font_size_M{
  font-size: 1.4rem;
}
.column_contents li .font_size_S{
  font-size: 1.2rem;
}
.column_contents blockquote p .font_size_L{
	font-size: 2.0rem;
}
.column_contents blockquote p .font_size_M {
	font-size: 1.4rem;
}
.column_contents blockquote p .font_size_S {
	font-size: 1.2rem;
}
.column_contents blockquote cite .font_size_L{
	font-size: 1.4rem;
}
.column_contents blockquote cite .font_size_M{
	font-size: 1.2rem;
}
.column_contents blockquote cite .font_size_S{
	font-size: 1.0rem;
}


.author_area{
  border: 1px solid #d3d3d3;
  padding: 15px;
  margin-top: 60px;
  box-sizing: border-box;
}
.author_area .author_w{
  display: block;
}
.author_area .imgarea{
  width: 80px;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 100%;
  margin: auto;
  margin-bottom: 15px;
}
.author_area .imgarea img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.author_area .txtarea{}
.author_area .txtarea h3{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1;
  text-align: center;
}
.author_area .txtarea .name_w{
  border-bottom: 1px solid #d3d3d3;
  margin-bottom: 15px;
  padding-bottom: 15px;
  text-align: center;
}
.author_area .txtarea .name_w .author_job{
}
.author_area .txtarea .name_w .author_name{
  font-size: 1.6rem;
}
.column_contents #job_list{
  padding-bottom: 0;
}
.column_contents #job_list .job_list_w{
  justify-content: center;
}
.column_contents .delimiter {
  margin: 40px 0;
}
.column_contents .delimiter:before {
  display: block;
  width: 100%;
  content: '';
  height: 1px;
  background: #aaa;
}
@media screen and (max-width: 750px) {
  .column_detail_w {
      padding: 25px 0 40px;
  }
  .column_detail_w .column_detail_h{
    margin-bottom: 10px;
  }
  .column_detail_w .column_detail_h .column_ttl {
      font-size: 2.0rem;
      margin-bottom: 10px;
  }
  .column_detail_w .column_detail_h .tags{
    margin-bottom: 15px;
  }
  .column_detail_w .eyecatch {
      text-align: center;
      margin-bottom: 35px;
  }
  .column_contents h2.contents_header{
    padding-left: 20px;
    font-size: 1.8rem;
    padding: 10px 10px 10px 25px;
    color: #fff;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 20px;
    margin-top: 30px;
  }
  .column_contents p.contents_p{
    margin-bottom: 15px;
  }
  .column_contents .img_block {
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
  }
  .column_contents .img_caption {
    margin-bottom: 20px;
    margin-top: -5px;
    font-size: 1.0rem;
  }
  .column_contents h3.contents_header {
    font-size: 1.6rem;
    margin: 20px 0;
  }
  .column_contents ul,
  .column_contents ol {
    padding: 0;
    margin: 0 0 30px;
    list-style: none !important;
  }
  .column_contents li {
    position: relative;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6;
    border-bottom: 1px solid #ccc;
  }
  .column_contents blockquote cite {
    display: block;
    font-size: 1.0rem;
    font-style: normal;
    color: #64748b;
  }
  

.column_contents p.contents_p .font_size_L{
	font-size: 1.8rem;
}
.column_contents p.contents_p .font_size_M{
	font-size: 1.2rem;
}
.column_contents p.contents_p .font_size_S{
	font-size: 1.0rem;
}
.column_contents h2.contents_header .font_size_L{
  font-size: 2.8rem;
}
.column_contents h2.contents_header .font_size_M{
  font-size: 2.0rem;
}
.column_contents h2.contents_header .font_size_S{
  font-size: 1.6rem;
}
.column_contents h3.contents_header .font_size_L{
  font-size: 2.4rem;
}
.column_contents h3.contents_header .font_size_M{
  font-size: 1.8rem;
}
.column_contents h3.contents_header .font_size_S{
  font-size: 1.4rem;
}
.column_contents li .font_size_L{
  font-size: 2.0rem;
}
.column_contents li.contents_header .font_size_M{
  font-size: 1.4rem;
}
.column_contents li.contents_header .font_size_S{
  font-size: 1.2rem;
}
.column_contents blockquote p .font_size_L{
	font-size: 2.0rem;
}
.column_contents blockquote p .font_size_M {
	font-size: 1.4rem;
}
.column_contents blockquote p .font_size_S {
	font-size: 1.2rem;
}
.column_contents blockquote cite .font_size_L{
	font-size: 1.6rem;
}
.column_contents blockquote cite .font_size_M{
	font-size: 1.2rem;
}
.column_contents blockquote cite .font_size_S{
	font-size: 1.0rem;
}

}

.other_chek_columns{
  padding: 40px 0;
}
.other_chek_columns .other_chek_columns_w{
  gap:20px 13px
}

.card_slider {
  overflow: hidden;
}

@media screen and (max-width: 750px) {
  .other_chek_columns .in{
    width: 100%;
  }
  .other_chek_columns .swiper {
        padding-left: 4%;
  }
  .sec_ttl_w{
    padding: 0 4%;
  }
  .sec_ttl_w .sec_ttl{
  font-size: 1.8rem;
}
}


.reccommend_point_i{
  margin-bottom: 0;
  margin-bottom: 30px;
}
.reccommend_point_i.img_r{
  flex-direction: row-reverse;
}
.reccommend_point_i .imgarea{
  width: 50%;
  margin-right: 30px;
  flex-shrink: 0;
  text-align: center;
}
.reccommend_point_i.img_r .imgarea{
  margin-right: 0;
  margin-left: 30px;
  text-align: center;
}
.reccommend_point_i .txtarea{
  width: 100%;
}
@media screen and (max-width: 750px) {
  .reccommend_point_i{
    margin-bottom: 20px;
  }
  .reccommend_point_i .imgarea{
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}


#new_column_list,#ranking_list,#new_column_list{
  padding-bottom: 30px;
}