@charset "Shift_JIS";
/* --------------------------------------------------------------------
キッズ「カテゴリーページ用」CSS
--------------------------------------------------------------------- */
/* --------------------------------------------------------------------
PC用 / .mainframe_ >
--------------------------------------------------------------------- */
/* 紐づけたイベントの出力枠（.event_）
================================================== */
.mainframe_ > .block_of_event .event_ .m-title04_ {
  border: none;
  font-size: 30px;
  line-height: 1.2;
}

.mainframe_ > .block_of_event .event_ .m-detailbtn01_ {
  margin: 0 0 60px;
  text-align: center;
}

.mainframe_ > .block_of_event .event_ .m-detailbtn01_ a {
  display: block;
  width: 400px;
  margin: 20px auto;
  padding: 15px;
  color: #383C3B;
  border: 1px solid #ccc;
  border-radius: 3em;
}

/* スライダーフリースペース2の非表示 ※非表示にするdivに、クラス「import_hidden」を設置 */
.mainframe_ > .block_of_event .event_ .import_hidden {
  display: none;
}

/* 自動出力エリア：画像 見出し（.m-titleimg_）
================================================== */
.mainframe_ > .m-titleimg_ {
  margin: 0 0 10px 0;
}

/* 自動出力エリア：タイトル表示
================================================== */
.mainframe_ > .m-title06_ {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: end;
  color: #000;
  font-size: 24px;
  text-align: right;
  letter-spacing: 0.20rem;
  line-height: 1;
  height: 40px;
  padding: 3px 5px;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #333;
}

.mainframe_ > .m-title06_::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  display: block;
  width: auto;
  height: 40px;
  aspect-ratio: 290 / 60;
  background: url("/contents/proper/kids/genre/img/logo.png") 0 0 / contain no-repeat;
}

/* 自動出力エリア：下層カテゴリー表示（.free_block_)
================================================== */
.mainframe_ > .free_block_ .m-title04_ {
  border-top: none;
  border-bottom: 1px solid #cccccc;
}

/* 特集バナー設置エリア
================================================== */
.mainframe_ > #event_recommend_wrap p.all_list_link {
  font-size: 14px;
  text-align: right;
}

.mainframe_ > #event_recommend_wrap ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.mainframe_ > #event_recommend_wrap ul li {
  width: calc(100% / 2);
  padding: 5px;
}

.mainframe_ > #event_recommend_wrap ul:has(> :nth-child(1):last-child) li {
  width: 60%;
  margin: 0 auto;
}

.mainframe_ > #event_recommend_wrap ul li a {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 10px 10px 170px;/* 画像幅+左余白10px+文字横余白10px */
  min-height: 172px; /* 画像高さ+上余白10px+下余白10px+線幅1px*2 */
}

.mainframe_ > #event_recommend_wrap ul li > a:hover {
  text-decoration: none;
  opacity: 1;
  border-color: #333;
}

.mainframe_ > #event_recommend_wrap ul li a img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  height: auto;
}

.mainframe_ > #event_recommend_wrap ul li a h3 {
  font-size: 15px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.mainframe_ > #event_recommend_wrap ul li a p {
  font-size: 14px;
}

/* アイコン */
.mainframe_ > #event_recommend_wrap ul li.icon_reco > a::before {
  content: "おすすめ特集";
  display: inline-block;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 15px;
  background: #333;
  margin: 5px 0 10px 0;
}

.mainframe_ > #event_recommend_wrap ul li.icon_gentei > a::before {
  content: "期間限定特集";
  display: inline-block;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 15px;
  background: #bf0d0d;
  margin: 5px 0 10px 0;
}

/* 回遊ボタン（#around_button_wrap)
================================================== */
.mainframe_ > #around_button_wrap {
  margin-bottom: 60px;
  margin-top: 60px; /* pager無しの時に必要なmargin */
}

/* トップに戻るボタン */
.mainframe_ > #around_button_wrap .btn_pageback {
  width: 400px;
  margin: 0 auto 20px auto;
}

.mainframe_ > #around_button_wrap .btn_pageback > a {
  position: relative;
  display:flex;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #a7a7a7;
  background: #000;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #fff;
  padding: 14px 30px;
}

/* 左矢印（＜） */
.mainframe_ > #around_button_wrap .btn_pageback a::after {
  position: absolute;
  content: '';
  display: block;
  top: 50%;
  left: 12px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(135deg);
}

.mainframe_ > #around_button_wrap .btn_pageback a span {
  text-align: center;
  margin: 0 auto;
}

.mainframe_ > #around_button_wrap .btn_pageback a:hover {
  text-decoration: none;
}

/* --------------------------------------------------------------------
SP用 / .wrapper_
--------------------------------------------------------------------- */
/* 紐づけたイベントの出力枠（.event_）
================================================== */
.wrapper_ > .event_ .m-title01_ {
  position: relative;
  margin-bottom: 30px;
  padding: 20px 120px 0 10px;
  background: none;
  border: none;
  font-size: 24px;
}

.wrapper_ > .event_ .m-title01_ .ttl {
  padding: 0;
}

.wrapper_ > .event_ .m-title01_ .detail {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 5em;
  background: #FFF;
}

.wrapper_ > .event_ .m-title01_ .detail a {
  display: block;
  padding: 15px 10px;
  color: #3d3d3d;
}

/* スライダーフリースペース2の非表示 ※非表示にするdivに、クラス「import_hidden」を設置 */
.wrapper_ > .event_ .import_hidden {
  display: none;
}

/* 自動出力エリア：タイトル表示
================================================== */
.wrapper_ > .m-title03_ {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: end;
  flex-wrap: wrap;
  font-family: initial;
  color: #000;
  font-size: 1.2rem;
  text-align: right;
  line-height: 1;
  height: 30px;
  padding: 3px 1% 3px 38%;
  margin: 0;
  border-top: 2px solid #0a0a0a;
  border-bottom: 1px solid #333;
}

.wrapper_ > .m-title03_::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1%;
  display: block;
  width: auto;
  height: 20px;
  margin: 10px 0 0 0;
  aspect-ratio: 290 / 60;
  background: url("/contents/proper/kids/genre/img/logo.png") 0 0 / contain no-repeat;
}

/* 手動設置：下層カテゴリー表示（#category_wrap)(.m-catlist_)
================================================== */
.wrapper_ > #category_wrap .m-title01_ {
  border: none;
  background: none;
  text-align: center;
  margin: 0;
  font-size: 2.4rem;
}

/* 特集バナー設置エリア
================================================== */
.wrapper_ > #event_recommend_wrap {
  position: relative;
  margin: 10px 0 0 0;
}

.wrapper_ > #event_recommend_wrap p.all_list_link {
  text-align: right;
  font-size: 1.4rem;
  padding: 0 3%;
  margin: 15px 0 0 0;
}

.wrapper_ > #event_recommend_wrap ul li {
  width: 100%;
  padding: 5px;
}

.wrapper_ > #event_recommend_wrap ul li a {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 10px 10px 140px;/* 画像幅+左余白10px+文字横余白10px */
  min-height: 142px; /* 画像高さ+上余白10px+下余白10px+線幅1px*2 */
}

.wrapper_ > #event_recommend_wrap ul li a img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: auto;
}

.wrapper_ > #event_recommend_wrap ul li a h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.wrapper_ > #event_recommend_wrap ul li a p {
  font-size: 1.4rem;
  line-height: 1.4;
}

.wrapper_ > #event_recommend_wrap ul li.icon_reco > a::before {
  content: "おすすめ特集";
  display: inline-block;
  color: #fff;
  font-size: 1.0rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 15px;
  background: #333;
  margin: 5px 0 10px 0;
}

.wrapper_ > #event_recommend_wrap ul li.icon_gentei > a::before {
  content: "期間限定特集";
  display: inline-block;
  color: #fff;
  font-size: 1.0rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 15px;
  background: #bf0d0d;
  margin: 5px 0 10px 0;
}

/* 回遊ボタン（#around_button_wrap)
================================================== */
.wrapper_ > #around_button_wrap {
  margin-bottom: 50px;
  margin-top: 50px; /* pager無しの時に必要なmargin */
}

/* トップに戻るボタン */
.wrapper_ > #around_button_wrap .btn_pageback {
  width: 80%;
  margin: 0 auto 20px auto;
}

.wrapper_ > #around_button_wrap .btn_pageback > a {
  position: relative;
  display:flex;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #a7a7a7;
  background: #000;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #fff;
  padding: 14px 30px;
}

/* 左矢印（＜） */
.wrapper_ > #around_button_wrap .btn_pageback a::after {
  position: absolute;
  content: '';
  display: block;
  top: 50%;
  left: 12px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(135deg);
}

.wrapper_ > #around_button_wrap .btn_pageback a span {
  text-align: center;
  margin: 0 auto;
}