@charset "UTF-8";


/* =====================================================
 * ページ全体
 * ===================================================== */
html {
  font-size: 62.5%; /* ルートのフォントサイズを10pxにする */
}


body, nav, section, header, main, footer, h1, h2, p, ul, ol, li, dl, dt, dd, div, table, input, textarea, select {
  font-size: 1.7rem;
}


/* -------------------------
 * フォント調整
 * ------------------------- */
h1, .sub {
  font-size: 130%;
}


.sub2 {
  font-size: 120%;
}


.sub3, .subCount, .subCount2 {
  font-size: 110%;
}


.sub4 {
  font-size: 110%;
}


.grid-cell-ttl { /* トップページ：各カテゴリー記事のタイトル */
  font-size: 85%;
}


.ranking { /* メニュー：ランキング記事のタイトル */
  font-size: 75%;
}


/* =====================================================
 * ヘッダー
 * ===================================================== */


header {
  height: 100px;
}


.logoImg { /* ロゴ画像の位置調整 */
  width: 85px;
  height: 80px;
}



.header-under {
  position: relative;
  width: 100%;
  margin: 100px auto 0;
}


/* -------------------------
 * 共有幅
 * ------------------------- */
.inner {
  position: relative;
  width: 1044px;
  margin: 0 auto;
}


/* -------------------------
 * ヘッダーメニューリスト
 * ------------------------- */
.header-nav {
  list-style-type: none;
}


.header-nav li { /* ナビゲーションそれぞれのボックス */
  display: inline-block;
}


.header-nav a {
  text-decoration: none;
}


/* リストの枠の中 */
.nav-icon {
  width: 55px;
  height: 100%;
}


.nav-icon img { /* 画像 */
  width: 50px;
  height: 50px;
  border: 2px solid #444;
}


/* =====================================================
 * コンテンツ
 * ===================================================== */


.container {
  position : relative;
  width: 1044px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 1 0 auto; /* IE対策（flex:1のみだとバグ) */
  padding: 20px 0 50px;
}


/* -------------------------
 * メイン
 * ------------------------- */
main {
  width: 714px;
  margin: 0;
  padding: 0 0 50px;
}


/* -------------------------
 * メイン中の要素
 * ------------------------- */
.width {
  width: 100%;
}


section {
  width: 100%;
}


/* =====================================================
 * サイドメニュー
 * ===================================================== */


aside {
  width: 300px;
  margin: 0;
  margin-left: 30px;
  padding: 0 0 0 20px;
  border-left: 1px solid #c7c7c7;
}


.small {
  font-size: 90%;
}


.sticky { /* ランキング以下を固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 120px; /* ヘッダーの高さ100px+上部余白20pxで設定 */
}


/* =====================================================
 * フッター
 * ===================================================== */


footer {
  position: relative;
  width: 100%;
}


footer li { /* リストを横並びにする */
  display: inline-block;
  list-style-type:none;
  margin: 0 3em 0 0;
}

/* -------------------------
 * サービスメニュー
 * ------------------------- */
.footer-menu li {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0 0 0 10px;
  border-left: 1px dotted #666;
  border-bottom: none;
  font-size: 80%;
  font-weight: bold;
}


.footer-menu li p {
  margin: 15px 0 0;
  font-size: 100%;
  font-weight: normal;
}


.footer-menu li:first-child {
  border-left: none;
}


.footer-menu li:nth-last-child(1) {
  margin: 0;
}


/* =====================================================
 * スペシャル
 * ===================================================== */


.arrow_box_left, .arrow_box_right {
  font-size: 100%;
}


.about2 {
  line-height: 160%;
}