@charset "UTF-8";
/* =========================== */
/*
Theme Name: D4U
Theme URI: https://damonge.com/
Author: BIG_MON
*/
:root {
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
  color: #1d1d1d; font-size: 100%; font-display: swap;
  background: #f0f0f0;
}
body {padding: 52px 0 0;}
section, article, header, nav, main, div {box-sizing: border-box;}
img {max-width: 100%; height: auto; vertical-align: bottom;}

/*
背景: f0f0f0
白: ffffff
黒: 1d1d1d
灰: 999999
罫線: e3e3e3
赤: ba2636
*/

section.contents {margin: 0 0 28px;}
header.sectionTitle {padding: 16px; font-weight: bold;}
@media screen and (min-width: 760px) {
  .container {margin: 0 auto; max-width: 760px;}
  header.sectionTitle {padding: 16px 0;}
  article {border: 1px solid #e3e3e3; border-radius: 4px;}
}

/* グローバルナビゲーション
=========================== */
#globalNavigation {position: fixed; top: 0; left: 0; padding: 12px 20px; width: 100%; background: #fff; color: #1d1d1d; border: 1px solid #e3e3e3; z-index: 999;}
#globalNavigation .container {position: relative;}

#humbergerMenu {position: absolute; top: 50%; left: 16px; transform: translateY(-50%); font-size: 20px; cursor: pointer;}
#siteTitle {display: block; margin: 0 auto; width: 150px;}
#siteTitle img {width: 100%; height: auto; display: block;}

#slideMenu {display: none; margin: 12px 0 0; padding: 8px 20px 12px; border-top: 1px solid #e3e3e3;}
#globalNavigation .menu li {padding: 4px 0; list-style-type: none;}
#globalNavigation .menu a {color: #999; text-decoration: none;}
#globalNavigation .searchForm {position: relative; margin: 16px 0 12px; border: 1px solid #e3e3e3; border-radius: 4px;}
#globalNavigation .searchField {
  display: block; padding: 0.25rem 1.6rem 0.25rem 0.6rem; width: 100%; box-sizing: border-box;
  font-size: 0.8rem; line-height: 1;
}
#globalNavigation .searchSubmit {
  position: absolute; top: 0.25rem; right: 0.25rem; width: 1.4rem;
  font-family: 'FontAwesome'; cursor: pointer; color: #1d1d1d;
}

/* ランキング
=========================== */
.swiper-container {padding: 0 16px;}
.swiper-slide {max-width: 70%; height: auto!important;}
@media screen and (min-width: 760px) {
  .swiper-container {padding: 0;}
}

/* フッター
=========================== */
#pageFooter {padding: 0 20px 12px; text-align: center;}
#pageFooter nav {padding: 8px 0;}
#pageFooter ul {display: flex; flex-flow: row wrap; justify-content: center;list-style-type: none;}
#pageFooter li {margin: 0 8px; font-size: 0.85rem;}
#pageFooter a {color: #ba2636; text-decoration: none;}
#legal {font-size: 0.8rem;}

/* 記事カード
=========================== */
article.miniCard {height: 100%; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff;}
article.miniCard .thumbnail {margin: 0 0 8px; height: 150px;}
article.miniCard .thumbnail img {width: 100%; height: 100%; object-fit: cover; object-position: center; border: 1px solid #e3e3e3;}
article.miniCard h1 {font-size: 0.9rem;}
article.miniCard a {display: block; padding: 10px; height: 100%; color: #1d1d1d; text-decoration: none;}

article.card {margin: 0 0 36px; background: #fff; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}
article.card .catogory {padding: 12px 16px; font-size: 0.85rem; font-weight: bold;}
article.card .thumbnail {border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}
article.card header {padding: 16px;}
article.card h1 {font-size: 1.1rem;}
article.card h1::after {content: attr(data-excerpt); display: block; margin: 8px 0 0; font-size: 0.9rem; font-weight: normal;}
article.card a {color: #1d1d1d; text-decoration: none;}

/* 広告
=========================== */
.ad-rect {margin: 0 auto 20px; padding: 0 20px; text-align: center;}
.ad-responsive {margin: 0 auto 2rem; padding: 0 20px; text-align: center;}
.ad-relation {margin: 0 auto 20px; padding: 0 20px;}