@charset "UTF-8";


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


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


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


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


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


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


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


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


.item_name {
  margin: 0;
  font-size: 0.8rem;
}


.description {
  font-size: 70%;
  color: #ccc;
}


.seller {
  display: none;
}


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


.terms_heading {
  font-size: 180%;
}


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


.container {
  position : relative;
  display: flex;
  display:-webkit-box; /*--- Android4.3以前ブラウザ用 ---*/
  display:-webkit-flex; /*--- iOS8以前Safari用 ---*/
}


main {
  flex: 1;
  -webkit-box-flex:1; /*--- Android4.3以前ブラウザ用 ---*/
  -webkit-flex:1; /*--- iOS8以前Safari用 ---*/
}


/* -------------------------
 * イメージ画像
/* ------------------------- */
.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_inner { /* 念のためclearflexを設定 */
  content: "";
  display: block;
  clear: both;
}


.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:292px;
}


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


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


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


.about2 {
  line-height: 160%;
}


/* -------------------------
 * 横スクロールのテーブル
/* ------------------------- */
.scroll-table {
  max-width: 500px;
}