@charset "utf-8";
/* ============================================================================
 * ダイアル「テプラ」SR55 スペシャルサイト 専用スタイル
 * ========================================================================= */
html
{
  margin: 0;
  padding: 0;
}

body
{
  background: #e9e1d7;
  color: #41210f;
  font-family: "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 75%; /* 1rem = 16px (Browser Default) / 12px (Page Default) */
  line-height: 1.5;
  margin: 0;
  padding: 0 0 1px 0;
}

p
{
  margin: 0;
}

img,
a img
{
  border: 0;
}


/* ----------------------------------------------------------------------------
 * 構造
 * ------------------------------------------------------------------------- */
#header
{
  background: #e9e1d7;
  border-bottom: 1px solid #41210f;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  left: 0;
  padding: 10px 0 0 0;
  position: fixed;
  top: 0;
  white-space: nowrap;
  width: 100%;
  z-index: 100;
}

#main
{
  margin: 0 auto;
  padding: 74px 0 50px 0;
}

#footer
{
  /* EMPTY */
}


/* ----------------------------------------------------------------------------
 * セクション
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * リード文
 * --------------------------------- */
.section--lead
{
  margin: 20px 0 0 0;
  position: relative;
  z-index: 1;
}
.section--lead .movie{
margin-top: 8px;
text-align: center;
}

/* ------------------------------------
 * 歴史
 * --------------------------------- */
.section--history
{
  background: #ffffff;
  margin: -16px 0 0 0;
  padding: 58px 0 0 0;
}


/* ------------------------------------
 * 機能・使い方
 * --------------------------------- */
.section--function
{
  margin: 80px auto 0 auto;
  width: 950px;
}

.section--function__item
{
  margin: 40px 0 0 0;
}


/* ------------------------------------
 * ラベル例
 * --------------------------------- */
.section--label
{
  margin: 80px auto 0 auto;
  width: 950px;
}


/* ------------------------------------
 * スペック
 * --------------------------------- */
.section--spec
{
  margin: 80px auto 0 auto;
  width: 950px;
}


/* ----------------------------------------------------------------------------
 * 汎用モジュール
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * 見出し
 * --------------------------------- */
.heading--02
{
  font-size: 200%; /* 24px / 1rem */;
  margin: 0 0 24px /* 2rem */ 0;
  text-align: center;
}

.heading--03
{
  font-size: 133.33%; /* 16px / 1rem */
  margin: 0 0 24px /* 2rem */ 0;
}


/* ------------------------------------
 * 段落
 * --------------------------------- */
.p
{
  margin: 0 0 20px 0;
}

p.discon 
{
text-align: center;
margin-top: 8px;
font-weight: bold;
color: #e20000;
padding: 4px;
background: #fff;
}


/* ------------------------------------
 * 複数カラム
 * --------------------------------- */
.column--2
{
  /* EMPTY */
}

.column--2__item
{
  float: left;
  width: 50%;
}


/* ------------------------------------
 * 重要な語句
 * --------------------------------- */
.layout--important
{
  text-align: center;
}


/* ----------------------------------------------------------------------------
 * ヘッダ
 * ------------------------------------------------------------------------- */
.header--items
{
  border-top: 3px solid #41210f;
  display: table;
  line-height: 1;
  margin: 0 auto;
  table-layout: auto;
  width: 950px;
}

.header--items a
{
  display: block;
  line-height: 60px;
  text-align: center;
}

.header--logo
{
  display: table-cell;
  width: 223px;
}

.header--logo a
{
  width: 223px;
}


.header--nav
{
  display: table-cell;
  list-style-type: none;
  padding: 0;
  text-align: right;
}

.header--nav > *
{
  display: table-cell;
}

.header--special_nav
{
  display: table-cell;
  width: 310px;
}


/* ----------------------------------------------------------------------------
 * リード文
 * ------------------------------------------------------------------------- */
.lead
{
  background: url("/sp/dial_tepra/images/bnr-lead-01.jpg") 0 0 no-repeat;
  height: 400px;
  margin: 0 auto;
  position: relative;
  width: 950px;
}

.lead__info
{
  left: 68px;
  position: absolute;
  top: 100px;
}

.lead__info__title
{
  font-size: 250%; /* 30px / 1rem */;
  margin: 0;
}

.lead__info__price
{
  margin: 12px 0 0 0;
}

.lead__info__release_date
{
  margin: 12px 0 0 0;
}


/* ------------------------------------
 * 各種シェア（共有）ボタン群
 * --------------------------------- */
.lead__share
{
  bottom: 15px;
  left: 17px;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

.lead__share__evernote
{
  float: left;
  margin: 0 25px 0 0;
  padding: 0;
}

.lead__share__twitter
{
  float: left;
  margin: 0;
  padding: 0;
}

.lead__share__facebook
{
  float: left;
  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------------------------
 * 歴史
 * ------------------------------------------------------------------------- */
.history
{
  margin: 0 auto;
  width: 950px;
}

.history__photo
{
  float: left;
  width: 50%;
}

.history__description
{
  overflow: hidden;
}

.history__description > *
{
  margin: 0 0 20px 0;
}

.history__description > *:last-child
{
  margin: 0;
}


/* ----------------------------------------------------------------------------
 * 機能・使い方
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * 「豊富なPROテープカートリッジに対応」
 * --------------------------------- */
/**
 * ラインナップ一覧
 */
.function__tape__lineup
{
  margin: 0 0 0 40px;
}


/**
 * 注釈
 */
.function__tape__note
{
  font-size: 83.33%; /* 10px / 1rem */
  margin: 20px 0 0 0;
}


/* ------------------------------------
 * 「書体や絵文字を豊富に搭載」
 * --------------------------------- */
.function__font
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 950px;
}

.function__font__font
{
  float: left;
  margin: 0 7px 0 0;
  padding: 0;
}

.function__font__print
{
  float: left;
  margin: 0 7px 0 0;
  padding: 0;
}

.function__font__icon
{
  float: left;
  margin: 0;
  padding: 0;
}

.function__font__table
{
  float: left;
  margin: 0 7px 0 0;
  padding: 0;
}

.function__font__file
{
  float: left;
  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------------------------
 * ラベル例
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * 注釈
 * --------------------------------- */
.label__note
{
  margin: 0 0 10px 0;
}


/* ------------------------------------
 * ラベル一覧
 * --------------------------------- */
.label__photo
{
  text-align: center;
}


/* ----------------------------------------------------------------------------
 * スペック
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * 商品画像
 * --------------------------------- */
.spec__photo
{
  margin: 0 0 40px 0;
  text-align: center;
}


/* ------------------------------------
 * スペック表
 * --------------------------------- */
.spec__table
{
  border-color: #41210f;
  border-spacing: 0;
  border-style: solid;
  border-width: 0 0 1px 0;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

.spec__table th,
.spec__table td
{
  border-color: #41210f;
  border-style: solid;
  border-width: 1px 0 0 0;
  padding: 10px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.spec__table th
{
  background: #cec5a4;
  font-weight: normal;
  text-align: left;
  width: 15%;
}

.spec__table td
{
  background: #fbfcfd;
  width: 35%;
}


/* ------------------------------------
 * 注釈
 * --------------------------------- */
.spec__note
{
  font-size: 83.33%; /* 10px / 1rem */
  margin: 20px 0 0 0;
}


/* ----------------------------------------------------------------------------
 * フッタ
 * ------------------------------------------------------------------------- */
/* ------------------------------------
 * 「ページ上部へ」
 * --------------------------------- */
.footer__page_top
{
  margin: 0 auto;
  width: 950px;
}

.footer__page_top__button
{
  background: #41210f;
  color: #ffffff;
  display: block;
  float: right;
  line-height: 2.33; /* 28px (image height) / 12px (Page Default) */;
}

.footer__page_top__button:link,
.footer__page_top__button:visited,
.footer__page_top__button:hover,
.footer__page_top__button:focus,
.footer__page_top__button:active
{
  color: #ffffff;
}


/* ------------------------------------
 * Copyright
 * --------------------------------- */
.footer__copyright
{
  background: #41210f;
  color: #ffffff;
  font-family: "Verdana", "Arial", "Helvetica", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1;
  padding: 12px;
  text-align: center;
}


/* ----------------------------------------------------------------------------
 * 「ラベル例」拡大表示 (Colorbox)
 * ------------------------------------------------------------------------- */
#colorbox,
#cboxOverlay,
#cboxWrapper
{
  left:0;
  position: absolute;
  top:0;
  z-index: 1000;
}

#cboxOverlay
{
  background: #000000;
  height: 100%;
  position: fixed;
  width: 100%;
}

#cboxWrapper
{
  max-width: none;
}

#cboxMiddleLeft,
#cboxBottomLeft
{
  clear: left;
}

#cboxContent
{
  position: relative;
}

#cboxLoadedContent
{
  overflow: auto;

  -webkit-overflow-scrolling: touch;
}

#cboxTitle
{
  margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic
{
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  /*
   * HACK:
   * 一瞬だけ見える → 非表示 → コンテンツ表示になるのが見苦しいため、非表示のままとする
   */
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow
{
  cursor: pointer;
}

#cboxClose
{
  background: url("/sp/dial_tepra/images/icon-close-01.png") 0 0 no-repeat;
  border: 0;
  height: 29px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: -15px;
  top: -13px;
  white-space: nowrap;
  width: 30px;
  z-index: 1;

  /*
   * HACK:
   * Firefox 29 では 100% 指定だと微妙に先頭文字が見えてしまう
   * 少しだけ加算した値なら問題ないため、現在値を指定している
   */
  text-indent: 110%;
}

.cboxPhoto
{
  border: 0;
  display: block;
  float: left;
  margin: auto;
  max-width: auto;

  -ms-interpolation-mode: bicubic;
}

.cboxIframe
{
  border: 0;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
{
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}


/* ----------------------------------------------------------------------------
 * Clearfix
 * ------------------------------------------------------------------------- */
.lead__share,
.history,
.column--2:after,
.function__font:after,
.footer__page_top:after
{
  content: "";
  display: table;
  clear: both;
}