@charset "UTF-8";


/* =====================================================
 * ページ全体
 * ===================================================== */




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


header {
  border-bottom: 1px dotted #ccc;
}


#header_wrap {
  position: relative;
  width: 992px;
  margin: 0 auto;
}


#top {
  width: 100%;
}


.logoImg { /* ロゴ画像の位置調整 */
  vertical-align: top;
  width: 200px;
  height: 50px;
}


#logo p {
  display: inline-block;
  margin: 0.5rem 0 0 0.5rem;
  font-size: 80%;
  line-height: 130%;
  color: #ccc;
}


/* =====================================================
 * トップページ
 * ===================================================== */


/* -------------------------
 * メインビジュアル画像
/* ------------------------- */
.visual {
  height: 450px;
}


.visual h1 {
  font-size: 2.5rem;
}


/* -------------------------
 * STYLEが厳選したおすすめ
/* ------------------------- */
.heading_2 {
  margin: 0;
  font-size: 180%;
  font-weight: bold;
}


/* -------------------------
 * おすすめアイテム
/* ------------------------- */
.menu_card {
  margin-top: 10px;
  padding: 0;
  width: 50%;
}


/* =====================================================
 * お問合せページ＆利用規約
 * ===================================================== */


.terms_heading {
  font-size: 180%;
}


/* =====================================================
 * メインコンテンツ
 * ===================================================== */


.container {
  position : relative;
  width:992px;
  margin: 0 auto;
  overflow: hidden;

}


main {
  float: left;
  width: 700px;
}


.width {
  width: 100%;
}


section {
  width: 100%;
}


/* -------------------------
 * イメージ画像
/* ------------------------- */
.images {
  position: relative;
  padding: 50px 0px;
  margin: 0 auto;
  max-width: 500px;
}


/* -------------------------
 * イメージ画像余白なし
/* ------------------------- */
.images0 {
  position: relative;
  margin: 0 auto;
  max-width: 500px;
}


/* -------------------------
 * 商品概要などに使用するボックス
 * （PCでは画像左、説明文右に配置）
/* ------------------------- */
.wrap {
  position: relative;
  border: 1px solid #ccc;
  padding: 10px;
}


.wrap_inner {
  overflow: hidden;
}


.wrap_left {
  width: 49%;
  float: left;
}


.wrap_left img {
  width: 100%;
}


.wrap_right {
  width: 49%;
  margin: 0; /* PCサイズの場合は空白はいらない */
  float: right;
}


/* =====================================================
 * 著者
 * ===================================================== */


.writer_section {
  border-left: 1px dotted #ccc;
  border-right: 1px dotted #ccc;
}


/* -------------------------
 * “編集部”
/* ------------------------- */
.editor {
  font-size: 180%;
  font-weight: bold;
}


/* =====================================================
 * 人気の記事ランキング
 * ===================================================== */


/* -------------------------
 * ランキングカウントのボックス
/* ------------------------- */
.ranking_box {
  counter-reset: ranking;
  border-left: 1px dotted #ccc;
  border-right: 1px dotted #ccc;
}


.textTitle{
  display: block;
  line-height: 160%;
  font-weight: bold;
  overflow: hidden;
}


.textDescription {
  display: inline-block;
  margin-top: 5px;
  font-size: 80%;
  line-height: 160%;
  font-weight: normal;
}


/* =====================================================
 * サイドバー
 * ===================================================== */


aside {
  width: 280px;
  float: right;

}


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


footer {
  clear: both;
}


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


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


.about2 {
  line-height: 160%;
}