@charset "euc-jp";
/*========================
/*
/* contents
/*
/*=======================*/
.contents {
  width: 100%;
}

/*======================
 ヒーローエリア
=======================*/
.hero_area {
  background: rgb(var(--color-bg-light));
}

.hero_area_inner {
  width: calc(1080px + 60px);
  margin: 0 auto;
  padding: 36px 30px 38px 0;
  display: flex;
  justify-content: space-between;
}

/*--
人気ランキング
--*/
.ranking_wrap {
  width: 280px;
  background: #FFF;
  border-radius: 14px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  position: relative;
}

.ranking_ttl {
  height: 49px;
  border-bottom: solid 3px rgb(var(--color-primary));
  display: flex;
  align-items: center;
}

.ranking_ttl svg {
  width: 34px;
  height: auto;
  position: absolute;
  top: -.8em;
  left: .5em;
}

.ranking_ttl h2 {
  font-size: 18px;
  font-family: m_plus_bold;
  color: #444;
  margin: 0 0 0 52px;
}

.ranking_list_wrapper {
  display: flex;
  height: calc(100% - 52px);
}

.ranking_list_wrapper .init_message {
  font-size: 1.2rem;
  padding: 1.2em;
  line-height: 1.4em;
}


.ranking_list {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.ranking_list_item {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 100%;
  padding: .5em 1em;
  line-height: 1.4em;
  border-top: solid 2px #ebebeb;
}

.ranking_list_item a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ranking_list_item:first-child{
  border-top: 0;
}

.ranking_list_item::before {
  font-family: m_plus_bold;
  content: "";
  display: flex;
  background: #CCC;
  height: 100%;
  align-items: center;
  border-radius: .2em;
  padding: 0 .4em;
}


.ranking_list_item.rank1::before {
  content:"1";
  background: #dda91a;
  background: -moz-linear-gradient(top, #dda91a 0%, #ebd675 100%);
  background: -webkit-linear-gradient(top, #dda91a 0%,#ebd675 100%);
  background: linear-gradient(to bottom, #dda91a 0%,#ebd675 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dda91a', endColorstr='#ebd675',GradientType=0 );
  color:#fff;
}

.ranking_list_item.rank2::before {
  content:"2";
  background: #989898;
  background: -moz-linear-gradient(top, #989898 0%, #d3d3d3 100%);
  background: -webkit-linear-gradient(top, #989898 0%,#d3d3d3 100%);
  background: linear-gradient(to bottom, #989898 0%,#d3d3d3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#d3d3d3',GradientType=0 );
  color:#fff;
}

.ranking_list_item.rank3::before {
  content:"3";
  background: #a0441b;
  background: -moz-linear-gradient(top, #a0441b 0%, #be7f64 100%);
  background: -webkit-linear-gradient(top, #a0441b 0%,#be7f64 100%);
  background: linear-gradient(to bottom, #a0441b 0%,#be7f64 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0441b', endColorstr='#be7f64',GradientType=0 );
  color:#fff;
}

.ranking_list_item.rank4::before {
  content:"4";
  background: rgb(var(--color-primary));
  color:#fff;
}

.ranking_list_item.rank5::before {
  content:"5";
  background: rgb(var(--color-primary));
  color:#fff;
}

/*--
ヒーロースライダー
--*/
/* splide ページネーション */
#hero_slide .splide__pagination {
  top: 0;
  left: .65em;
  padding: 0;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: .3em;
}

#hero_slide .splide__pagination__page {
  width: 10px;
  height: 10px;
  margin: 0;
  opacity: 1;
  background: rgb(220,215,201);
  transform: none;
}

#hero_slide .splide__pagination__page.is-active {
  background: rgb(var(--color-primary));
  transform: none;
}

/* スライド画像の設定 */
.hero_slide {
  display: flex;
  justify-content: end;
}

.hero_slide_inner {
  width: 750px;
  height: 380px;
  position: relative;
}

.splide__slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* スライド画像のサイズ設定 */
.slide_media {
  width: 750px;
  height: 380px;
  overflow: hidden;
}

/* スライド画像のズームアップ */
.slide_media img {
  transition: 7s 1s ease-out;
}
 
#hero_slide .splide__slide[class*=-active] .slide_media img {
  transition-delay: 0s;
  transform: scale(1.03);
}

/* キャプションの設定 */
.hero_caption {
  max-width: 740px;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: -20px;
  background: rgba(119,167,21,.75);
  color: #FFF;
  padding: 2em;
}

/* キャプションのフェードイン */
#hero_slide .splide__slide[class*=-active] .hero_caption {
  animation: fadeIn 2s .5s var(--easing) both;
}

/* フェードイン用のアニメーション設定 */
@keyframes fadeIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
    filter: blur(200px);
  }
 
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* キャプションの装飾 - 横線 */
.hero_caption::before {
  content:"";
  display: block;
  width: calc(100% + 10px);
  height: 1px;
  background: #444;
  position: absolute;
  bottom: 5px;
  left: -5px;
}

/* キャプションの装飾 - 縦線 */
.hero_caption::after {
  content:"";
  display: block;
  width: 1px;
  height: 30px;
  background: #444;
  position: absolute;
  bottom: -5px;
  left: 5px;
}

/* キャプション - インフォ */
.hero_caption_info {
  font-family: m_plus_light;
  font-size: 13px;
  display: flex;
  gap: .5em;
}

/* 日付 */
.hero_caption_date {
  display: flex;
  align-items: center;
  gap: .5em;
}

/* 日付あとの縦線 */
.hero_caption_date::after {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background: #FFF;
}

/* キャプション - 見出し */
.hero_caption_title {
  font-family: m_plus_mid;
  font-size: 22px;
  line-height: 1.3em;
  margin: .5em 0 0;
  font-weight: bold;
}

/*======================
 コンテンツエリア
=======================*/
.content_area {
  width: calc(1080px + 60px);
  /*margin: 4.5em auto 3em;*/
  margin: 30px auto 40px;
  display: flex;
  flex-wrap: wrap;/*20250708追記*/
  justify-content: space-between;
}

/*--
 メインコンテンツの幅設定
--*/
.main_content {
  width: 750px;
  margin: 0 0 0 30px;
}

/*--
 サイドコンテンツの幅設定
--*/
.side_content {
  width: 280px;
  margin: 0 30px 0 0;
}

.side_content.low .topics_keyword + .archive_box {
  margin: 30px 0 0;
}

/*--
 セクション見出し
--*/
.section_title {
  font-family: m_plus_mid;
  font-size: 24px;
  width: 100%;
  background: rgb(var(--color-bg-light));
  /*margin-left: 30px;*/
  padding: .8em;
  position: relative;
  display: flex;
}

.section_title::before {
  content: "";
  display: block;
  width: calc(100% + 10px);
  height: 3px;
  background: rgb(var(--color-primary));
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
}

.section_title::after {
  content: "";
  display: block;
  width: 3px;
  height: 30px;
  background: rgb(var(--color-primary));
  position: absolute;
  left: 5px;
  bottom: -5px;
  transform: translateX(-50%);
}

.section_title span {
  font-family: m_plus_light;
  font-size: 16px;
  display: flex;
  gap: .2em;
  align-items: center;
  margin: 0 0 0 .5em;
}

.section_title span::before {
content: "";
display: inline-block;
width: .8em;
height: 1px;
background: #444;
}

/*--
 セクション サブ見出し
--*/
.section_sub_title {
  font-family: m_plus_mid;
  font-size: 18px;
  width: 100%;
  margin: 2em 0 0;
  background: rgb(var(--color-bg-light));
  padding: .5em;
  position: relative;
}


/*--
 リンクボタン
--*/
.link_button {
  text-align: center;
  /*margin-left: 30px;*/
}

.link_button a {
  font-family: m_plus_mid;
  font-size: 16px;
  display: inline-block;
  background: rgb(var(--color-primary));
  color: #FFF;
  min-width: 174px;
  height: 30px;
  line-height: 30px;
  position: relative;
  text-decoration: none;
  margin: 16px 0 0;
}

.link_button a::before {
  content: "";
  display: block;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  border: solid 1px rgb(var(--color-text));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/*--
 新着記事・書籍
--*/
#new_articles {
  width: 766px;
  /*margin: 27px 0 0 22px;*/
  margin: 27px 0 0 -8px;
}

/*-- 矢印　--*/
.new-article-arrow {
  width: 19px;
  height: 19px;
  background: rgb(var(--color-primary));
  opacity: 1;
}

.new-article-arrow svg {
  fill: #FFF;
}

.new-article-prev {
  left: -.3em;
}

.new-article-next {
  right: -.3em;
}

.new_article {
  padding: 8px;
  height: 100%;
}

.new_article a {
  transition: .5s ease;
}

.new_article a,
.new_article a:link,
.new_article a:visited,
.new_article a:hover,
.new_article a:active {
  text-decoration: none;
  color: rgb(var(--color-text));
}

.new_article a:hover,
.new_article a:active {
  opacity: .8;
}

.new_article a:hover img {
  scale: 1.05;
}

.new_article_inner {
  background: #FFF;
  padding: 10px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.new_article_img {
  aspect-ratio: 1.75/ 1;
  overflow: hidden;
}

.new_article_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  transition: scale .5s ease;
}

.new_article_info {
  font-size: 11px;
  line-height: 1.3em;
  display: flex;
  gap: 0 .6em;
  margin: .6em 0 0;
}

.new_article_date {
  flex-shrink: 0;
}

.new_article_category {
  color: rgb(var(--color-link));
}

.new_article_title {
  font-size: 14px;
  line-height: 1.4em;
  margin: .5em 0 0;
}

/*--
 健康・ヘルスケアがテーマの動画
--*/
.video_list {
  /*width: 750px;*/
  /*margin: 27px 0 8px 30px;*/
  margin: 27px 0 8px;
  display: flex;
  gap: 12px;
}

.video_list .item {
  width: 100%;
}

.video_list .item .thumb {
  aspect-ratio: 1.75/ 1;
  overflow: hidden;
  position: relative;
}

.video_list .item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
  transition: scale .5s ease;
}

.video_list .item a {
  transition: .5s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFF;
  padding: 10px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  position: relative;
}

.video_list .item a,
.video_list .item a:link,
.video_list .item a:visited,
.video_list .item a:hover,
.video_list .item a:active {
  text-decoration: none;
  color: rgb(var(--color-text));
}

.video_list .item a:hover,
.video_list .item a:active {
  opacity: .8;
}

.video_list .item a:hover .thumb  img {
  scale: 1.05;
}

.video_list .item .thumb::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.8);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.20);
  bottom: 10px;
  left: 10px;
}

.video_list .item .thumb::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #555555;
  border-right: 0;
  position: absolute;
  z-index: 3;
  bottom: 21px;
  left: 24px;
}

.video_list .new_icon {
  font-size: 0;
  width: 38px;
  height: 38px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  z-index: 6;
  color: #FFF;
  border: solid 1px #e83164;
  transform: rotate(35deg);
  right: -10px;
  top: -10px;
}

.video_list .new_icon::before {
  font-family: m_plus_mid;
  font-size: 12px;
  content: "NEW";
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #e83164;
  z-index: 3;
  position: absolute;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}

.video_list .new_icon::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #FFF;
  z-index: 1;
  position: absolute;
  top: calc(50% - 2px);
  left: -3px;
  transform: rotate(30deg);
}

.video_list .item .title_box {
  margin: 0 0 auto;
}

.video_list .item .title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3em;
  margin: 10px 0 0;
}

.video_list .item .title span {
  font-size: 11px;
  font-weight: normal;
  display: block;
  margin: 5px 0 0;
}

.video_list .item .category_tag {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin: .5em 0 0;
}

.video_list .item .category_tag span {
  display: inline-block;
  font-size: 11px;
  color: rgb(var(--color-link));
  border: solid 1px rgb(var(--color-link));
  padding: .2em .5em;
}

/*--
 おすすめ電子書籍
--*/
.ebook_list {
  margin: 27px 0 8px;
  display: flex;
  gap: 32px;
}

.ebook_list .ebook_list_item {
  width: 100%;
}

.ebook_list .ebook_list_item .thumb {
  filter: drop-shadow(0px 0px 4px rgba(0,0,0,.35));
}

.ebook_list .ebook_list_item .thumb img {
  width: 100%;
  height: 100%;
}

.ebook_list .ebook_list_item a {
  transition: .5s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.ebook_list .ebook_list_item a,
.ebook_list .ebook_list_item a:link,
.ebook_list .ebook_list_item a:visited,
.ebook_list .ebook_list_item a:hover,
.ebook_list .ebook_list_item a:active {
  text-decoration: none;
  color: rgb(var(--color-text));
}

.ebook_list .ebook_list_item a:hover,
.ebook_list .ebook_list_item a:active {
  opacity: .8;
}

.ebook_list .new_icon {
  font-size: 0;
  width: 38px;
  height: 38px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  z-index: 6;
  color: #FFF;
  border: solid 1px #e83164;
  transform: rotate(35deg);
  right: -12px;
  top: -12px;
}

.ebook_list .new_icon::before {
  font-family: m_plus_mid;
  font-size: 12px;
  content: "NEW";
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #e83164;
  z-index: 3;
  position: absolute;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}

.ebook_list .new_icon::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #FFF;
  z-index: 1;
  position: absolute;
  top: calc(50% - 2px);
  left: -3px;
  transform: rotate(30deg);
}

.ebook_list .ebook_list_item .title {
  font-size: 12px;
  line-height: 1.3em;
  margin: 5px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ebook_button {
  font-size: 13px;
  display: block;
  text-align: center;
  background: rgb(var(--color-primary));
  color: #FFF;
  padding: .5em;
  margin: auto 0 0;
}


/*--
 カテゴリー別新着記事
--*/
.top_categories {
  /*width: 750px;*/
  /*margin: 22px 0 0 30px;*/
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 30px;
}

.category_item {
  width: calc(50% - 15px);
}

.category_title_box {
  background: rgb(var(--color-bg-light));
  border: solid 1px rgb(var(--color-bg-dark));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
}

.category_title {
  font-size: 18px;
  font-family: m_plus_mid;
  display: flex;
  align-items: center;
  gap: 0 1em;
}

.category_sub_title {
  font-size: 14px;
  font-family: m_plus_light;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 0 .8em;
}

.category_sub_title::before {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background: rgb(var(--color-text));
}

.top_category_link {
  font-size: 12px;
  font-family: m_plus_mid;
  display: flex;
  align-items: center;
  gap: 0 .3em;
}

.top_category_link::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid rgb(var(--color-link));
  border-right: 0;
}

.category_article_list {
  margin: 1em 0 0;
}

.category_article_list a {
  display: flex;
  gap: 0 10px;
}

.category_article_list a,
.category_article_list a:link,
.category_article_list a:visited,
.category_article_list a:hover,
.category_article_list a:active {
  color: rgb(var(--color-text));
  text-decoration: none;
  transition: opacity .5s ease;
}

.category_article_list a:hover,
.category_article_list a:active {
  opacity: .8;
}

.category_article_list a:hover .category_article_thumb img {
  scale: 1.05;
}

.category_article_thumb {
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 1.75/1;
  overflow: hidden;
}

.category_article_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: scale .5s ease;
}

.category_article_info {
  display: flex;
  flex-direction: column;
  padding: .2em 0;
}

.category_article_title {
  font-size: 14px;
  line-height: 1.3em;
  margin :0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.category_article_tag {
  font-size: 11px;
  margin: auto 0 0;
  color: rgb(var(--color-link));
}


/*======================
 サイドコンテンツ
=======================*/
/*--
 バナーボックス
--*/
.banner_box {
  margin: 20px 0 0;
}

.banner_box.light {
  margin: 0;
}

.banner_box img {
  width: 100%;
  height: auto;
}

.banner_box ul li {
  margin: 10px 0 0;
}

.banner_box ul li:first-child {
  margin: 0;
}

.banner_box img.pc {
  display: block;
}

.banner_box img.sp {
  display: none;
}

/*--
 アーカイブリスト
--*/
.banner_box + .archive_box {
margin: 36px 0 0;
}

.archive_title {
  font-family: m_plus_mid;
  font-size: 16px;
  background: rgb(var(--color-bg-light));
  border-top: solid 4px rgb(var(--color-primary));
  border-bottom: solid 2px #ebebeb;
  padding: 10px;
  margin: 0;
}

.archive_list + .archive_title {
  margin: 36px 0 0;
}

.archive_list {
  border-bottom: solid 2px #ebebeb;
}

.archive_list_head {
  font-size: 16px;
  font-weight: normal;
  display: flex;
  gap: 0 .5em;
  align-items: center;
  padding: 12px 10px;
  cursor: pointer;
}

.archive_list_head::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: solid 3px rgb(var(--color-primary));
  border-left: solid 3px rgb(var(--color-primary));
  transform: rotate(135deg);
  transition: transform .3s;
}

.active .archive_list_head::before {
  transform: rotate(225deg);
}

 .archive_list_child li a {
  display: flex;
  gap: 0 .5em;
  text-decoration: underline;
  margin: 0 0 0 28px;
  padding: .4em 0;
}

.archive_list_child {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  transition: .2s;
  line-height: 1.4em;
}

.active .archive_list_child {
  margin: 0 0 12px;
}

.archive_list_child li a::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: rgb(var(--color-primary));
  flex-shrink: 0;
  margin: .5em 0 0;
}

.archive_list_child li a:hover,
.archive_list_child li a:active {
  text-decoration: none;
}

/*======================*/
/*
/* SP用
/*
/*======================*/

@media screen and (max-width: 480px) {
/*-- max-width: 480px //--*/
html,
body {
overflow-x: hidden;
}

/*--
ヒーローエリア
--*/
.hero_area {
  width: 100%;
}

.hero_area_inner {
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  padding: 0;
}

/*--
ヒーロースライダー
--*/
#hero_slide {
  margin: 1.5em auto 0;
}

/* splide ページネーション */
#hero_slide .splide__pagination {
  top: calc(100% - .5em);
  left: 50%;
  padding: 0;
  flex-direction: row;
  justify-content: center;
  transform: translateX(-50%);
  gap: .6em;
}

/* スライド画像の設定 */
.hero_slide_inner {
  width: 100%;
  height: auto;
}

/* スライド画像のサイズ設定 */
.slide_media {
  width: 100%;
  height: auto;
  /*aspect-ratio: 16/9;*/
}

#hero_slide .splide__slide[class*=-active] .slide_media img {
  transition-delay: none;
  transform: scale(1);
}

/* スライド画像のズームアップ */
.slide_media img {
  height: 100%;
  transition: none;
}

/* キャプションの設定 */
.hero_caption {
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1em;
}

/* キャプションのフェードイン */
#hero_slide .splide__slide[class*=-active] .hero_caption {
  animation: none;
}

/* キャプションの装飾 - 横線 */
.hero_caption::before {
  display: none;
}

/* キャプションの装飾 - 縦線 */
.hero_caption::after {
  display: none;
}

/* キャプション - インフォ */
.hero_caption_info {
  font-size: 11px;
}

/* キャプション - 見出し */
.hero_caption_title {
  font-size: 16px;
}

/*--
 ランキング
--*/
.ranking_wrap {
  width: 92%;
  margin: 3em auto 1.5em;
  padding: 1em 1em .5em;
}

.ranking_ttl {
  justify-content: center;
  height: auto;
  padding: 0 0 .8em;
}

.ranking_ttl h2 {
  margin: 0;
  font-size: 16px;
}

.ranking_ttl svg {
  width: 30px;
  left: .8em;
}

.ranking_list_item {
  padding: .5em 0;
}

/*--
 コンテントエリア
--*/
.content_area {
  width: 100%;
  flex-direction: column;
  margin: 2em 0 3em;
}

/*--
 メインコンテント
--*/
/*--
 メインコンテンツの幅設定
--*/
.main_content {
  width: 100%;
  margin: 0;
}

/*--
 セクション見出し
--*/
.section_title {
  font-size: 18px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.section_title::before {
  width: calc(100% + 8px);
  height: 2px;
  bottom: 4px;
}

.section_title::after {
  width: 2px;
  left: 4px;
  bottom: -4px;
}

.section_title span {
  font-size: 11px;

}

/*--
 セクション サブ見出し
--*/
.section_sub_title {
  font-size: 16px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

/*--
 リンクボタン
--*/
.link_button {
  margin: 1em auto 0;
}
/*--
 新着記事・書籍
--*/
#new_articles {
  width: 96%;
  margin: 1.3em auto 0 auto;
}

/*--
 動画
--*/
.video_list {
  width: 92%;
  margin: 2em auto 1.5em;
  flex-wrap: wrap;
  gap: 16px;
}

.video_list .item {
  width: calc(50% - 8px);
}

.video_list .item .thumb::before {
  width: 28px;
  height: 28px;
  bottom: 5px;
  left: 5px;
}

.video_list .item .thumb::after {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #555555;
  bottom: 13px;
  left: 16px;
}

/*--
 おすすめ電子書籍
--*/
.ebook_list {
  width: 92%;
  margin: 2em auto 1.5em;
  flex-wrap: wrap;
  gap: 12px;
}

.ebook_list .ebook_list_item {
  width: calc(25% - 9px);
}

.ebook_list .new_icon {
  width: 28px;
  height: 28px;
  right: -8px;
  top: -8px;
}

.ebook_list .new_icon::before {
  font-size: 10px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  top: 1px;
  left: 1px;
}

.ebook_list .new_icon::after {
  width: 30px;
  height: 2px;
}

.ebook_button {
font-size: 11px;
}


/*--
 カテゴリー別新着記事
--*/
.top_categories {
  width: 100%;
  margin: 0;
  gap: 0;
}

.category_item{
  width: 92%;
  margin: 1.5em auto;
}

.category_title {
  font-size: 16px;
}

.category_title_box {
  padding: .6em;
}

.category_sub_title {
  font-size: 12px;
}


/*--
 サイドコンテンツの幅設定
--*/
.side_content {
  width: 92%;
  margin: 0 auto 0 auto;
  display: flex;
  flex-direction: column;
}

.main_content + .side_content.low {
  margin: 36px auto 0;
}

.banner_box {
  order: 2;
}

.banner_box.light {
  margin: 20px 0 0;
}

.banner_box img.pc {
  display: none;
}

.banner_box img.sp {
  display: block;
}

.archive_box {
  order: 1;
}

/*--// max-width: 480px --*/
}


/*========================
/*
/* topics_list
/*
/*=======================*/
/*--
 パンくず
--*/
.breadcrumbs {
  display: flex;
  font-size: 12px;
  width: 1080px;
  margin:8px auto 5px;
  padding:0;
}

.breadcrumbs li {
  display:flex;
  color:#567b05;
}

.breadcrumbs li::after {
  content: ">";
  margin: 0 .2em;
}

.breadcrumbs li:last-child {
  font-weight:600;
}

.breadcrumbs li:last-child::after {
  content: "";
}

.breadcrumbs li a {
  color:#333;
}

.breadcrumbs li a:hover {
  color:#267298;
}

/*--
 トピックリスト
--*/
.topics_list {
  width: calc(100% + 16px);
  display: flex;
  flex-wrap: wrap;
  margin: .5em 0 0 -8px;
}

.topics_list .splide__slide {
  width: calc(100%/4);
}

@media screen and (max-width: 480px) {
/*-- max-width: 480px //--*/

  .breadcrumbs {
    font-size: 11px;
    width: 92%;
  }

  .topics_list {
    width: 96%;
    margin: .5em auto 0;
  }
  
  .topics_list .splide__slide {
    width: calc(100%/2);
  }

}

/*--
 キーワード
--*/
.topics_keyword {
}

.keyword_ttl {
  font-family: m_plus_mid;
  font-size: 16px;
  border-top: solid 4px rgb(var(--color-primary));
  background: rgb(var(--color-bg-light));
  position: relative;
  padding: .7em 0 .6em 30px;
}

.keyword_ttl svg {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 28px;
  height: auto;
}

.keyword_icon {
  fill: rgb(255,225,11);
}

.keyword_list {
  border-top: solid 2px #EBEBEB;
  border-bottom: solid 2px #EBEBEB;
  border-left: solid 2px #EBEBEB;
  border-right: solid 2px #EBEBEB;
  padding: 0 1em;
}

.keyword_list_item {
  display: flex;
  align-items: center;
  line-height: 1.3em;
  gap: 0 .4em;
  width: 100%;
  padding: .8em .5em .8em .5em;
}

.keyword_list_item + .keyword_list_item {
  border-top: solid 2px #EBEBEB;
}

.keyword_list_item::before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgb(var(--color-primary));
  border-right: 0;
}

.keyword_list_item a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
/*-- max-width: 480px //--*/
  .topics_keyword {
    margin: 30px 0 0;
  }
}


/*--
 お知らせ欄：20250708追記
--*/
.information_box {
  width: 1080px;
  margin: 0 auto 2em;
  border: solid 2px #EBEBEB;
  padding: .2em;
  display: flex;
}

.information_title {
padding: 0 1em;
background: rgb(var(--color-bg-light));
font-size: 11px;
font-weight: bold;
flex-shrink: 0;
display: flex;
align-items: center;
}

.information_item {
padding: 1em;
display: flex;
flex-direction: column;
gap: .5em 0;
line-height: 1.4em;
}

.information_head {
display: flex;
gap: 0 .5;
font-weight: bold;
}

.information_date {
display: flex;
gap: 0 .4em;
align-items: center;
font-weight: normal;
}

.information_date::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid rgb(var(--color-primary));
border-right: 0;
}

@media screen and (max-width: 480px) {
/*-- max-width: 480px //--*/
  .information_box {
    width: 92%;
    flex-direction: column;
  }
  
  .information_title {
    padding: 1em 0;
    justify-content: center;
  }

  .information_date {
    align-items: start;
  }

  .information_date::after {
    margin: .35em 0 0;
  }

/*  .information_item {
    flex-direction: column;
    gap: .5em 0;
  }
/*

}
