@charset "UTF-8";
/* 日本語 charset "utf-8 */
@keyframes test { 0% { background-position: left center; }
  100% { background-position: -1733px center; } }
@keyframes bg-move { 0% { width: 0; }
  100% { width: 100%; left: 180px; } }
/* 日本語 charset "utf-8 */
@keyframes test { 0% { background-position: left center; }
  100% { background-position: -1733px center; } }
@keyframes bg-move { 0% { width: 0; }
  100% { width: 100%; left: 180px; } }
/* 日本語 charset "utf-8 */
@keyframes test { 0% { background-position: left center; }
  100% { background-position: -1733px center; } }
@keyframes bg-move { 0% { width: 0; }
  100% { width: 100%; left: 180px; } }
/* 日本語 charset "utf-8 */
@keyframes test { 0% { background-position: left center; }
  100% { background-position: -1733px center; } }
@keyframes bg-move { 0% { width: 0; }
  100% { width: 100%; left: 180px; } }
#topics.detail .container { width: calc(100% - 40px); margin-top: 80px; margin-left: 40px; }
#topics.detail .container .container-wrap { width: 1024px; margin: 0 auto; }
#topics.detail .detail { width: 100%; margin-bottom: 30px; }
#topics.detail .detail p.top { display: flex; justify-content: flex-start; }
#topics.detail .detail p span { font-size: 16px; font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; line-height: 32px; }
#topics.detail .detail p span.new { margin-right: 10px; }
#topics.detail .detail .bottom { display: flex; justify-content: space-between; }
#topics.detail .detail .bottom span.title { font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; width: 70%; }
#topics.detail .detail .bottom .brand-terms span.term { font-size: 14px; height: 100%; font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; background-color: black; color: white; padding: 5px 15px; }
#topics.detail .detail .bottom .brand-terms span.term:not(:last-of-type) { margin-right: 10px; }
#topics.detail .free-content { margin-bottom: 40px; border-top: solid 1px black; border-bottom: solid 1px black; padding: 46px 0; }
#topics.detail .pager-type2 { margin-bottom: 120px; }

#topics header.page-header { width: calc(100% - 40px); height: 286px; margin-top: 80px; margin-left: 40px; background-image: url("../images/topics/header.png"); background-size: cover; background-color: black; background-repeat: no-repeat; padding-top: 24px; }
#topics header.page-header .header-wrap { margin: 0 auto; width: 1024px; }
#topics header.page-header .header-wrap .page-name { font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; font-size: 40px; line-height: 32px; color: white; text-align: center; margin-top: 44px; margin-bottom: 40px; }
#topics header.page-header .header-wrap .btn-more { width: 164px; height: 40px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; border: solid 1px black; border: solid 1px white; }
#topics header.page-header .header-wrap .btn-more p { width: 100%; height: 38px; display: flex; justify-content: center; align-items: center; font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; font-size: 16px; color: black; }
#topics header.page-header .header-wrap .btn-more span { display: flex; justify-content: center; align-items: center; width: 40px; height: 38px; background-color: black; color: white; border-left: solid 1px white; font-size: 20px; }
#topics header.page-header .header-wrap .btn-more span { background-color: transparent; }
#topics header.page-header .header-wrap .btn-more.active { border: solid 1px black; background-color: white; }
#topics header.page-header .header-wrap .btn-more.active p { color: black; }
#topics header.page-header .header-wrap .btn-more.active span { border-left: solid 1px black; color: black; }
#topics header.page-header .header-wrap .btn-more p { color: white; }
#topics header.page-header .header-wrap .btn-more span { color: white; border-left: solid 1px white; }
#topics header.page-header .header-wrap ul.select { display: flex; justify-content: center; align-items: center; }
#topics header.page-header .header-wrap ul.select > li { margin-right: 40px; }
#topics header.page-header .header-wrap ul.select > li:last-of-type { margin-right: 0; }
#topics .container { width: calc(100% - 40px); margin-top: 80px; margin-left: 40px; }
#topics .container .container-wrap { width: 1024px; margin: 0 auto; }
#topics ul.topics-list { display: flex; justify-content: flex-start; flex-wrap: wrap; }
#topics ul.topics-list li { position: relative; width: 320px; margin-right: 32px; margin-bottom: 40px; }
#topics ul.topics-list li .new { position: absolute; top: 15px; left: 15px; z-index: 1; text-shadow: 1px 1px 2px black; color: white; }
#topics ul.topics-list li:nth-of-type(3n) { margin-right: 0; }
#topics ul.topics-list li a:hover .detail-block p.title { opacity: 0.7; font-size: 14px; line-height: 26px; text-decoration: underline; }
#topics ul.topics-list li a .thumbnail { padding: 66.5625% 0 0; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: 100%; background-size: cover; margin-bottom: 14px; }
#topics ul.topics-list li a .detail-block p { font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; }
#topics ul.topics-list li a .detail-block p.title { font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; font-size: 14px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }
#topics ul.topics-list li a .detail-block p.date { font-size: 14px; line-height: 32px; }
#topics ul.topics-list li a .detail-block p.term { font-size: 14px; line-height: 32px; background-color: black; color: white; padding: 0 15px; }
#topics ul.topics-list li a .detail-block .under { display: flex; justify-content: space-between; align-items: center; }
#topics ul.topics-list li a .detail-block .under .brand-terms { display: flex; justify-content: space-between; align-items: center; }
#topics ul.topics-list li a .detail-block .under .brand-terms > p:not(:last-of-type) { margin-right: 10px; }