@charset "UTF-8";

/* ----------------------------------
 上部フリースペース用テンプレートCSS
---------------------------------- */
.genre-top-fontents-frame { margin: 0 0 60px;}
.genre-top-fontents-frame * { box-sizing: border-box;}
.genre-top-fontents-frame img { max-width: 100%; max-height: 100%; vertical-align: top;}

/* コンテンツ枠 */
.genre-top-fontents-frame .contents-box { padding: 39px; border: #E0E0E0 1px solid; background: #FFF;}
.genre-top-fontents-frame .contents-box + .contents-box { margin-top: 20px;}
[data-browse-mode="S"] .genre-top-fontents-frame .contents-box { padding: 19px 19px 29px 19px;}

/* コンテンツ 中枠 */
.genre-top-fontents-frame .contents-inner-box + .contents-inner-box { margin-top: 40px;}

/* H2 - 中見出し */
.genre-top-fontents-frame .sec-title { margin: 0 0 30px; font-size: 28px; font-weight: 500; line-height: 1.4; position: relative; color: #4E954F;}
.genre-top-fontents-frame .sec-title.with-icon { display: flex; align-items: center; column-gap: 20px;}
.genre-top-fontents-frame .sec-title .icon { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center;}
[data-browse-mode="S"] .genre-top-fontents-frame .sec-title { margin: 0 0 20px; font-size: 20px;}
[data-browse-mode="S"] .genre-top-fontents-frame .sec-title .icon { width: 30px; height: 30px;}

/* H3 - 中見出し */
.genre-top-fontents-frame .sec-sub-title { padding: 0 0 0 20px; margin: 0 0 20px; font-size: 22px; font-weight: 500; line-height: 1.4; position: relative;}
.genre-top-fontents-frame .sec-sub-title::before {
  content: '';
  height: 70%;
  border-left: #4E954F 2px solid;
  display: inline-block;
  position: absolute;
  top: calc(15% + 2px);
  left: 0;
}
[data-browse-mode="S"] .genre-top-fontents-frame .sec-sub-title { padding: 0 0 0 12px; margin: 0 0 15px; font-size: 18px;}

/* リード文 */
.genre-top-fontents-frame .lead { margin: 0 0 20px; font-size: 16px; font-weight: 400; text-align: center; line-height: 2.0;}
[data-browse-mode="S"] .genre-top-fontents-frame .lead { font-size: 14px; text-align: left;}

/* もっと見るボタン */
.genre-top-fontents-frame .button-link {
	max-width: 380px;
	min-height: 52px;
	margin: 40px auto 0;
	border: #4e954f 1px solid;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.genre-top-fontents-frame .button-link::before {
  content: '';
  width: 102%;
  height: 102%;
  background: #4e954f;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  position: absolute;
  top: -1%;
  left: -1%;
  z-index: 1;
}
.genre-top-fontents-frame .button-link a {
  width: 100%;
  min-height: 52px;
  padding: 10px 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #4E954F;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.genre-top-fontents-frame .button-link a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #4E954F 3px solid;
  border-top: #4E954F 3px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.genre-top-fontents-frame .button-link:has(a):hover::before { transform: scale(1, 1);}
.genre-top-fontents-frame .button-link:hover a { color: #FFF;}
.genre-top-fontents-frame .button-link:hover a::after { border-right: #FFF 3px solid; border-top: #FFF 3px solid;}

[data-browse-mode="S"] .genre-top-fontents-frame .button-link a { font-size: 14px;}


/* ナビゲーションリスト */
.genre-top-fontents-frame .navi-list { margin: 0 0 54px; display: flex; flex-wrap: wrap; gap: 12px;}
.genre-top-fontents-frame .navi-list .nav-item { width: calc((100% - 12px * 3)/ 4); display: flex; justify-content: center; align-items: center; position: relative;}
.genre-top-fontents-frame .navi-list .nav-item a {
	width: 100%;
	height: 100%;
	min-height: 80px;
	padding: 15px 35px 15px 15px;
  border: #4e954f 1px solid;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 14px;
  background: #FFF;
  position: relative;
}
.genre-top-fontents-frame .navi-list .nav-item a::before,
.genre-top-fontents-frame .navi-list .nav-item a::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
	z-index: 2;
}
.genre-top-fontents-frame .navi-list .nav-item a::before { top: 0; left: 0; border-top: #4e954f 5px solid; border-left: #4e954f 5px solid;}
.genre-top-fontents-frame .navi-list .nav-item a::after { right: 0; bottom: 0; border-right: #4e954f 5px solid; border-bottom: #4e954f 5px solid;}
.genre-top-fontents-frame .navi-list .nav-item a:hover {  opacity: .9;}
.genre-top-fontents-frame .navi-list .nav-item a:hover::before,
.genre-top-fontents-frame .navi-list .nav-item a:hover::after {  width: 100%; height: 100%; opacity: 1;}
.genre-top-fontents-frame .navi-list .nav-item .icon { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;}
.genre-top-fontents-frame .navi-list .nav-item .name { font-size: 14px; font-weight: 700; line-height: 1.2; color: #4e954f;}
.genre-top-fontents-frame .navi-list .nav-item .name::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #4E954F 3px solid;
  border-top: #4E954F 3px solid;
  position: absolute;
  right: 20px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(135deg);
}

[data-browse-mode="S"] .genre-top-fontents-frame .navi-list { margin: 0 0 40px; justify-content: space-between;}
[data-browse-mode="S"] .genre-top-fontents-frame .navi-list .nav-item { width: calc(50% - 6px);}
[data-browse-mode="S"] .genre-top-fontents-frame .navi-list .nav-item a { min-height: 60px; padding: 10px 25px 10px 10px;}
[data-browse-mode="S"] .genre-top-fontents-frame .navi-list .nav-item .icon { width: 24px; height: 24px;}
[data-browse-mode="S"] .genre-top-fontents-frame .navi-list .nav-item .name::after { right: 10px;}

/* 画像＋文章リスト */
.genre-top-fontents-frame .detail-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px 36px;}
.genre-top-fontents-frame .detail-list .detail-item { width: calc(50% - 18px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.genre-top-fontents-frame .detail-list .detail-item .title { width: 100%; margin: 0 0 15px; font-size: 20px; font-weight: 700;}
.genre-top-fontents-frame .detail-list .detail-item .image { width: 140px; text-align: center;}
.genre-top-fontents-frame .detail-list .detail-item .image a { display: flex; justify-content: center; align-items: center; position: relative;}
.genre-top-fontents-frame .detail-list .detail-item .image a::before,
.genre-top-fontents-frame .detail-list .detail-item .image a::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
	z-index: 2;
}
.genre-top-fontents-frame .detail-list .detail-item .image a::before { top: 0; left: 0; border-top: #4e954f 5px solid; border-left: #4e954f 5px solid;}
.genre-top-fontents-frame .detail-list .detail-item .image a::after { right: 0; bottom: 0; border-right: #4e954f 5px solid; border-bottom: #4e954f 5px solid;}
.genre-top-fontents-frame .detail-list .detail-item .image a:hover { opacity: .9;}
.genre-top-fontents-frame .detail-list .detail-item .image a:hover::before,
.genre-top-fontents-frame .detail-list .detail-item .image a:hover::after {  width: 100%; height: 100%; opacity: 1;}
.genre-top-fontents-frame .detail-list .detail-item .text { width: calc(100% - 160px); font-size: 16px; font-weight: 400; line-height: 1.8;}
.genre-top-fontents-frame .detail-list .detail-item .button { width: 100%; padding: 0 0 0 160px; margin: 20px 0 0;}
.genre-top-fontents-frame .detail-list .detail-item .button-link { width: 100%; margin: 0;}
.genre-top-fontents-frame .detail-list .detail-item .button-link a { min-height: 46px;}

[data-browse-mode="S"] .genre-top-fontents-frame .detail-list { display: block;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item + .detail-item { margin-top: 40px;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item { width: 100%;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item .title  { margin: 0 0 10px; font-size: 16px;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item .image  { width: 120px;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item .text   { width: calc(100% - 140px); font-size: 14px;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item .button { padding: 0;}
[data-browse-mode="S"] .genre-top-fontents-frame .detail-list .detail-item .button-link { margin: 0 auto;}

/* アイコン付きリスト */
.genre-top-fontents-frame .image-icon-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;}
.genre-top-fontents-frame .image-icon-list .image-icon-item {
  width: calc(50% - 10px);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #F7F7F7;
	position: relative;
}
.genre-top-fontents-frame .image-icon-list .image-icon-item a {
  width: 100%;
  height: 100%;
  border: #CCC 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
	transition: .3s ease;
}
.genre-top-fontents-frame .image-icon-list .image-icon-item a:hover { border-color: #4e954f;}
.genre-top-fontents-frame .image-icon-list .image-icon-item a .desc::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #4E954F 3px solid;
  border-top: #4E954F 3px solid;
  position: absolute;
  right: 20px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.genre-top-fontents-frame .image-icon-list .image-icon-item .icon { width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.genre-top-fontents-frame .image-icon-list .image-icon-item .icon img { transition: .3s ease; vertical-align: top;}
.genre-top-fontents-frame .image-icon-list .image-icon-item a:hover .icon img { transform: scale(1.1);}
.genre-top-fontents-frame .image-icon-list .image-icon-item .desc {
  width: calc(100% - 90px);
  height: 90px;
  padding: 5px 40px 5px 20px;
	font-size: 16px;
	font-weight: 500;
  display: flex;
  align-items: center;
}

[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list { gap: 15px;}
[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list .image-icon-item { width: 100%;}
[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list .image-icon-item .desc { font-size: 14px;}
[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list .image-icon-item a .desc::after { right: 15px;}
[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list .image-icon-item .icon { width: 70px; height: 70px;}
[data-browse-mode="S"] .genre-top-fontents-frame .image-icon-list .image-icon-item .desc { width: calc(100% - 70px); height: 70px; padding: 5px 30px 5px 20px; font-size: 14px;}

/* ボタンリスト */
.genre-top-fontents-frame .btn-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: stretch;}
.genre-top-fontents-frame .btn-list .btn-item {
  width: calc((100% - 10px * 3)/ 4);
  min-height: 54px;
	line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
	overflow: hidden;
}
.genre-top-fontents-frame .btn-list .btn-item a {
  width: 100%;
  height: 100%;
  padding: 10px 25px 10px 0;
	border-bottom: #E0E0E0 1px solid;
	font-size: 16px;
	text-align: left;
	line-height: 1.2;
	color: #111;
  display: flex;
  align-items: center;
  box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.genre-top-fontents-frame .btn-list .btn-item a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #4E954F 3px solid;
  border-top: #4E954F 3px solid;
  position: absolute;
  right: 20px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.genre-top-fontents-frame .btn-list .btn-item:hover a { border-bottom: #4e954f 1px solid; color: #4e954f;}

[data-browse-mode="S"] .genre-top-fontents-frame .btn-list { gap: 0;}
[data-browse-mode="S"] .genre-top-fontents-frame .btn-list .btn-item { width: calc(50% - 10px); margin: 0 0 5px;}
[data-browse-mode="S"] .genre-top-fontents-frame .btn-list .btn-item a { padding: 10px 20px 10px 0; font-size: 14px;}
[data-browse-mode="S"] .genre-top-fontents-frame .btn-list .btn-item a::after {
  width: 6px;
  height: 6px;
  border-right: #4E954F 2px solid;
  border-top: #4E954F 2px solid;
  right: 2px;
  top: calc(50% - 3px);
}


/* メインビジュアル
---------------------------------- */
.genre-top-fontents-frame .visual-contents { width: 100%; margin: 0 0 54px; overflow: hidden;}
.genre-top-fontents-frame #visual_slider { width: 630px; padding: 0 0 20px; margin: 0 auto; overflow: visible; position: relative;}
.genre-top-fontents-frame #visual_slider .swiper-slide { text-align: center;}
.genre-top-fontents-frame #visual_slider .swiper-slide figure { margin: 0 auto; text-align: center;}
.genre-top-fontents-frame #visual_slider .swiper-slide img { width: 100%; vertical-align: top;}
.genre-top-fontents-frame #visual_slider .swiper-slide a { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: stretch; position: relative;}
.genre-top-fontents-frame #visual_slider .swiper-slide a::before,
.genre-top-fontents-frame #visual_slider .swiper-slide a::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
	z-index: 2;
}
.genre-top-fontents-frame #visual_slider .swiper-slide a::before { top: 0; left: 0; border-top: #4e954f 5px solid; border-left: #4e954f 5px solid;}
.genre-top-fontents-frame #visual_slider .swiper-slide a::after { right: 0; bottom: 0; border-right: #4e954f 5px solid; border-bottom: #4e954f 5px solid;}
.genre-top-fontents-frame #visual_slider .swiper-slide a:hover {  opacity: .9;}
.genre-top-fontents-frame #visual_slider .swiper-slide a:hover::before,
.genre-top-fontents-frame #visual_slider .swiper-slide a:hover::after {  width: 100%; height: 100%; opacity: 1;}
.genre-top-fontents-frame #visual_slider .swiper-pagination-bullets {
  max-width: 630px;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 10px;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translateX(-50%);
}
.genre-top-fontents-frame #visual_slider .swiper-pagination-bullet {
  width: 60px;
  height: 2px;
  margin: 0 !important;
  border-radius: 0;
  display: block;
  background: #e0e0e0;
  opacity: 1;
}
.genre-top-fontents-frame #visual_slider .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #4e954f;}
.genre-top-fontents-frame #visual_slider .swiper-pagination-bullet::before { content: none;}
.genre-top-fontents-frame #visual_slider .swiper-button-prev,
.genre-top-fontents-frame #visual_slider .swiper-button-next {
  width: 34px;
  height: 70px;
  background-color: #111;
  transition: .3s ease;
	top: calc(50% + 20px);
  z-index: 1;
	transform: translateY(-50%);
}
.genre-top-fontents-frame #visual_slider .swiper-button-prev:hover,
.genre-top-fontents-frame #visual_slider .swiper-button-next:hover { background-color: #0d2ea1;}
.genre-top-fontents-frame #visual_slider .swiper-button-prev { left: calc(((100% - 630px) / 2) - 17px);}
.genre-top-fontents-frame #visual_slider .swiper-button-next { right: calc(((100% - 630px) / 2) - 17px);}
.genre-top-fontents-frame #visual_slider .swiper-button-prev::after,
.genre-top-fontents-frame #visual_slider .swiper-button-next::after {
  content: '';
  width: 12px;
  height: 12px;
  border-top: #FFF 2px solid;
  border-left: #FFF 2px solid;
  position: absolute;
  z-index: 2;
}
.genre-top-fontents-frame #visual_slider .swiper-button-prev::after { right: 8px; transform: rotate(-45deg);}
.genre-top-fontents-frame #visual_slider .swiper-button-next::after { left: 8px; transform: rotate(-45deg) scale(-1, -1);}

[data-browse-mode="S"] .genre-top-fontents-frame .visual-contents { width: calc(100% + 30px); margin: 0 -15px 40px;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider { width: 100%;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-pagination-bullet { width: 40px;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-prev,
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-next { width: 24px; height: 42px; opacity: 0.8;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-prev { left: 0;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-next { right: 0;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-prev::after { right: 4px;}
[data-browse-mode="S"] .genre-top-fontents-frame #visual_slider .swiper-button-next::after { left: 4px;}

/* キーワードから探す
---------------------------------- */
.genre-top-fontents-frame #sec_option .search-item-frame { display: flex; justify-content: space-between; position: relative;}
.genre-top-fontents-frame #sec_option .search-item-frame::after {
	content: '';
	height: 100%;
	border-left: #E0E0E0 1px solid;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
}
.genre-top-fontents-frame #sec_option .search-item-frame > li { width: calc(50% - 40px);}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a {
	width: 100%;
	height: 100%;
	min-height: 110px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #4e954f;
	background-image: url(/img/usr/genre/btn_here.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 8px) calc(100% - 8px);
	-webkit-background-size: 8px 8px;
	background-size: 8px 8px;
	transition: 0.3s;
	position: relative;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a::before,
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
	z-index: 2;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a::before { top: 0; left: 0; border-top: #4e954f 5px solid; border-left: #4e954f 5px solid;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a::after { right: 0; bottom: 0; border-right: #4e954f 5px solid; border-bottom: #4e954f 5px solid;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a .ttl { 
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a .ttl span { font-size: 24px; font-weight: 700; color: #FFF; position: relative;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a .ttl span::before {
	content: '';
	width: 11px;
	height: 12px;
	display: block;
	background-image: url(/img/usr/genre/btn_pop.png);
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-background-size: 11px auto;
	background-size: 11px auto;
	position: absolute;
	top: 0;
	left: -12px;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a .txt { font-size: 12px; color: #FFF;}

.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover { background-image: url(/img/usr/genre/btn_here_green.png); background-color: #FFF;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover .ttl,
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover .ttl span,
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover .txt { color: #4e954f;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover::before,
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover::after { width: 100%; height: 100%; opacity: 1;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-history a:hover .ttl span::before { background-image: url(/img/usr/genre/btn_pop_green.png);}

.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords h3 { margin: 0 0 20px;}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords form {
  width: 100%;
  height: 52px;
  border: #DEDEDE 1px solid;
  display: flex;
  align-items: center;
  position: relative;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords form::after {
	content: '';
	height: 26px;
	border-left: #0D2EA1 2px solid;
	display: block;
	position: absolute;
	top: 12px;
	left: 12px;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords form .block-search--keyword {
	width: calc(100% - 50px);
	height: 50px;
	padding: 0 20px;
	margin: 0;
	border: none;
	outline: none;
	display: flex;
	align-items: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
}
.genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords form .block-search--submit { 
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 0;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #111;
	background-image: url(/img/usr/genre/ico_search.png);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 20px 20px;
	background-size: 20px 20px;
}

[data-browse-mode="S"] .genre-top-fontents-frame #sec_option .search-item-frame { display: block;}
[data-browse-mode="S"] .genre-top-fontents-frame #sec_option .search-item-frame::after { display: none;}
[data-browse-mode="S"] .genre-top-fontents-frame #sec_option .search-item-frame > li { width: 100%;}
[data-browse-mode="S"] .genre-top-fontents-frame #sec_option .search-item-frame > li + li { margin-top: 20px;}
[data-browse-mode="S"] .genre-top-fontents-frame #sec_option .search-item-frame li.search-item-keywords h3 { margin: 0 0 10px;}


/* 修理保守サービスリスト
---------------------------------- */
.genre-top-fontents-frame .repair-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;}
.genre-top-fontents-frame .repair-list .repair-item {
  width: calc((100% - 40px * 2)/ 3);
  padding: 20px 20px 40px 20px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
	align-items: center;
  background: #E9EBF4;
}
.genre-top-fontents-frame .repair-list .repair-item .title { margin: auto 0 20px; font-size: 18px; font-weight: 500; text-align: center; color: #0D2EA1;}
.genre-top-fontents-frame .repair-list .repair-item .icon { width: 77px; height: 77px; margin: auto auto 0 auto; display: flex; justify-content: center; align-items: center;}

[data-browse-mode="S"] .genre-top-fontents-frame .repair-list { display: block;}
[data-browse-mode="S"] .genre-top-fontents-frame .repair-list .repair-item { width: 100%; padding: 15px 20px 15px 40px; flex-direction: row-reverse; justify-content: space-between;}
[data-browse-mode="S"] .genre-top-fontents-frame .repair-list .repair-item + .repair-item { margin-top: 10px;}
[data-browse-mode="S"] .genre-top-fontents-frame .repair-list .repair-item .icon { width: 45px; height: 45px; margin: 0 auto 0 0;}
[data-browse-mode="S"] .genre-top-fontents-frame .repair-list .repair-item .title { width: calc(100% - 65px); height: auto; margin: 0; font-size: 16px; text-align: left;}


/* バナーリスト
---------------------------------- */
.genre-top-fontents-frame .banner-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;}
.genre-top-fontents-frame .banner-list .banner-item { width: calc(50% - 5px); position: relative;}
.genre-top-fontents-frame .banner-list .banner-item .image { width: 100%;}
.genre-top-fontents-frame .banner-list .banner-item .image img { width: 100%; vertical-align: top;}
.genre-top-fontents-frame .banner-list .banner-item a { display: block; position: relative;}
.genre-top-fontents-frame .banner-list .banner-item a::before,
.genre-top-fontents-frame .banner-list .banner-item a::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
	z-index: 2;
}
.genre-top-fontents-frame .banner-list .banner-item a::before { top: 0; left: 0; border-top: #4e954f 5px solid; border-left: #4e954f 5px solid;}
.genre-top-fontents-frame .banner-list .banner-item a::after { right: 0; bottom: 0; border-right: #4e954f 5px solid; border-bottom: #4e954f 5px solid;}
.genre-top-fontents-frame .banner-list .banner-item a:hover {  opacity: .9;}
.genre-top-fontents-frame .banner-list .banner-item a:hover::before,
.genre-top-fontents-frame .banner-list .banner-item a:hover::after {  width: 100%; height: 100%; opacity: 1;}
.genre-top-fontents-frame .banner-list .banner-item .image + .text { margin-top: 20px;}
.genre-top-fontents-frame .banner-list .banner-item .name {
  width: 100%;
	padding: 5px 15px;
	min-height: 40px;
	font-size: 15px;
	font-weight: 500;
	color: #FFF;
  display: flex;
	text-align: left;
  align-items: center;
  background: rgba(17,17,17,0.6);
  position: absolute;
  left: 0;
	right: 0;
	bottom: 0;
}

[data-browse-mode="S"] .genre-top-fontents-frame .banner-list { gap: 15px;}
[data-browse-mode="S"] .genre-top-fontents-frame .banner-list .banner-item { width: 100%;}
[data-browse-mode="S"] .genre-top-fontents-frame .banner-list .banner-item .image + .text { margin-top: 10px;}


/* 既存のサブジャンル表示を非表示化
---------------------------------- */
[data-browse-mode="P"] .block-genre-page--goods .block-genre-style { display: none !important;}
[data-browse-mode="S"] .block-genre-page--goods .block-genre-style { display: none !important;}