@charset "utf-8";

/*------------------------------------------------------------------------------
common - CSS Modules
Date: 2014-0309-
------------------------------------------------------------------------------*/

/* リンク設定
-----------------------------*/
#contents_box a:link {
  color: #1af/*009*/;	/* リンクの色 */
  text-decoration:none;
}
#contents_box a:visited {
  text-decoration:none;
  color: #1af/*009*/;	/* 訪問済リンクの色 */
}
#contents_box a:hover{
  color: #397/*009*/;	/* ロールオーバーリンクの色 */
  text-decoration:underline;
}
#contents_box a:active, #contents_box a:focus {
  color: #1af/*009*/;	/* 選択中リンクの色 */
  outline:0;
  text-decoration:underline;
}

/* 全体
------------------------------*/
#contents_box{
  margin:0 auto;
  width:100%;
  position:relative;
  min-height: 100%;
  height: auto !important;
  background:transparent;
}

/* メインコンテンツ
------------------------------*/
#contents {
  width: 100%;
  /*position: absolute;*/
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

#prev, #next {
  cursor: pointer;
}


/* グリッド
------------------------------*/
.gridContainer{
  overflow: hidden;
}

* html .gridContainer{height:1%;}

.grid{
  float:left;
  background:transparent;
}

.box{
  margin:0;
  padding:0;
}


/* テーブル
------------------------------*/
table.table{
  border-collapse:collapse;
  margin:5px auto 15px auto;
}

table.table td{
  border-collapse:collapse;
  background-color:#F9F9F9;
  text-align:left;
  padding:8px;
  border:1px solid #D6D6D6;
  line-height:20px;
}

table.table th{
  background-color:#F5F5F5;
  text-align:right;
  padding:8px;
  white-space:nowrap;
  color: #151515;
  border-top:1px solid #D4D4D4;
  border-right:4px solid #D4D4D4;
  border-bottom:1px solid #D4D4D4;
  border-left:1px solid #D4D4D4;
  font-size:13px;
  font-weight:normal;
  letter-spacing:1px;
  background-repeat:repeat-x;
  background-position:top;
}

.baseTb {
  width: 100%;
}

.baseTb td{
  padding: 4px;
}

/* リスト
------------------------------*/
ul.list li{
  clear:both;
  margin-bottom:5px;
  padding:5px 0;
  overflow:hidden;
}

ul.list li{height:1%;}

ul.list li img{
  float:left;
  margin-right:10px;
}

ul.list li{
  font-size:12px;
  line-height:1.35;
}

ul.list li:last-child{
  border:0;
  margin-bottom:0px;
}

.stdlist ul,.stdlist dl {
  margin-bottom:	0;
  padding: 4px;
}

.stdlist li {
  margin-left: 2.5em;
  margin-bottom: 1.0em;
}

.stdlist dt {
  margin-left: 0.5em;
}

.stdlist dd {
  margin-left: 1.5em;
  margin-bottom: 1.0em;
}

.dot li {
  list-style-type: disc;
}


/* showcase
------------------------------*/
#showcase {
  border-bottom: 1px solid #A69B7D;
  border-left: 1px solid #A69B7D;
  border-right: 1px solid #A69B7D;
  background-color: #F4EEE3;
  padding: 16px 0 0 14px;
}

#showcase table td {
  text-align: left;
  padding-bottom: 12px;
  font-size: 0.9em;
  vertical-align: top;
}

/* no script
------------------------------*/
#noscript {
  background-color: #f00;
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  margin: 0 auto;
}

/* to top
------------------------------*/
#toTop img {
  vertical-align: bottom;
}

/* h
------------------------------*/
h3{
  text-indent: 0.3em;
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ Pro W3' ,'Hiragino Kaku Gothic Pro';
  font-size: 2em;
  color: #161515;
  margin: 4px 0;
}

h4{
  height: 42px;
  text-indent: 1.2em;
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ Pro W3' ,'Hiragino Kaku Gothic Pro';
  font-size: 1.4em;
  color: #111;
  padding-top: 8px;
  margin-bottom: 15px;
}

h4.doubleLine{
  height: 68px;
}

h5{
  text-indent: 1.2em;
  font-weight: bold;
  font-size: 1.2em;
  color: #c47000;
  margin-bottom: 15px;
}

#pageTopTab{
  display: block;
  width: 153px;
  height: 32px;
  margin: 0 auto;
  padding: 5px;
  text-indent: 1.5em;
}


#pageTopTab{
  display: block;
  width: 153px;
  height: 32px;
  margin: 0 auto;
  padding: 5px;
  text-indent: 1.5em;
}

/*
* media query
*/
/* pc */
@media screen and (min-width: 1025px)  {

  .contentsWidth {
    width:950px;
    margin: 0 auto;
  }

  #main_photo {
    position: absolute;
    width: 10000px;
    left: 50%;
    height:450px;
  }

  #main_photo_area_set  {
    margin-left: -7650px;
  }

  #main_photo_area_set img {
    width: 860px;
    height: 450px;
  }

  #overImage {
    position: absolute;
    width: 100%;
    height:450px;
    left:0;
  }

  #overImage img {
    width: 860px;
    height:450px;
  }

  #arrowArea {
    position: absolute;
    top:190px;
    width:100%;
    z-index: 100;
    left:0;
  }

  #posiArea {
    background-color: #000;
    position:absolute;
    width:100%;
    top:450px;
    padding: 9px 5px;
    left:0;
  }

  .bnrLargeWidth,
  .bnrLargeInnerBox {
    width:970px;
    margin: 0 auto;
  }

  #lBnrArea {
    padding-top: 30px;
  }

  .largeBnr {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
  }

  #footMenu img {
    width: 182px;
    height: 250px;
  }

  .bnrSmallWidthTop {
    width:960px;
    margin: 0 auto;
    padding-bottom: 50px;
  }

  .bnrSmallWidth,
  .bnrSmallInnerBox {
    width:960px;
    margin: 0 auto;
  }

  #subFooterMenu{
    width: 374px;
    height: 250px;
    padding: 2px;
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgSubContents.png) no-repeat;
  }

  #subFooterMenu div{
    /*padding: 11px 8px;*/
    height: 100%;
  }

  #prev {
    position: absolute;
    top:0;
    left:10px;
  }

  #prev , #next {
    width: 71px;
    height: 71px;
  }

  #next {
    position: absolute;
    top:0;
    right:10px;
  }

  #bnrArea {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgContentsAreaPc.jpg) repeat-x;
  }

  .largeBnr img {
    width: 465px;
    height: 200px;
  }

  .bgCrossTop{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossTop.png) repeat-x;
    background-position: top;
  }

  .bgCrossBtm{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtm.png) repeat-x;
    background-position: bottom;
  }

  .bgCrossBtmQaNone {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtmQaNone.png) repeat-x;
    background-position: bottom;
  }

  .bgCrossTopBlack{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossTopBlack.png) repeat-x;
    background-position: top;
  }

  .bgCrossBtmBlack{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtmBlack.png) repeat-x;
    background-position: bottom;
  }

  #loupePosition{
    position: absolute;
    left: 50%;
    margin-left: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
  }

  #lookOtherSize {
    width: 200px;
    height: 20px;
  }

  .loupeBox {
    padding-top: 50px;
  }

  .bnrBox {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
  }

  .explh {
    line-height: 2.5em;
  }
}

/* tab */
@media screen and (min-width: 761px) and (max-width: 1024px) {

  .contentsWidth {
    width:720px;
    margin: 0 auto;
  }

  #main_photo {
    position: absolute;
    width: 10000px;
    left: 50%;
    height:450px;
  }

  #main_photo_area_set  {
    margin-left: -7650px;
  }

  #main_photo_area_set img {
    width: 860px;
    height: 450px;
  }

  #overImage {
    position: absolute;
    /*width: 100%;*/
    height:450px;
    left:50%;
    margin-left: -430px;
  }

  #overImage img {
    width: 860px;
    height:450px;
  }

  #arrowArea {
    position: absolute;
    top:190px;
    width:100%;
    z-index: 100;
    left:0;
  }

  #posiArea {
    background-color: #000;
    position:absolute;
    width:100%;
    top:450px;
    padding: 9px 5px;
    left:0;
  }

  .bnrLargeWidth {
    width:720px;
    margin: 0 auto;
  }

  #footMenu img {
    width: 182px;
    height: 250px;
  }

  .bnrLargeInnerBox {
    width:630px;
    margin: 0 auto;
  }

  #lBnrArea {
    padding-top: 30px;
  }

  .largeBnr {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px;
  }

  .bnrSmallWidth {
    width:720px;
    margin: 0 auto;
  }

  .bnrSmallInnerBox {
    width:640px;
    margin: 0 auto;
  }

  #prev {
    position: absolute;
    top:0;
    left:-20px;
  }

  #prev , #next {
    width: 71px;
    height: 71px;
  }

  #next {
    position: absolute;
    top:0;
    right:-20px;
  }

  #bnrArea {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgContentsArea.jpg) repeat-x;
  }

  .largeBnr img {
    width: 618px;
    height: 188px;
  }

  .bgCrossTop{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossTop.png) repeat-x;
    background-position: top;
  }

  .bgCrossBtm{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossTabBtm.png) repeat-x;
    background-position: bottom;
  }

  .bgCrossBtmQaNone {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtmQaNone.png) repeat-x;
    background-position: bottom;
  }

  #loupePosition{
    position: absolute;
    left: 50%;
    margin-left: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
  }

  #lookOtherSize {
    width: 200px;
    height: 20px;
  }

  #subFooterMenu{
    width: 565px;
    height: 250px;
    padding: 2px;
    margin-top: 10px;
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgSubContentsTab.png) no-repeat;
  }

  #subFooterMenu div{
    height: 100%;
  }

  #subFooterMenu div a img {
    padding-left : 10px;
  }

  .loupeBox {
    padding-top: 50px;
  }

  .bnrBox {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
  }

  .explh {
    line-height: 2.5em;
  }
}

/* smp */
@media screen and (min-width: 0px) and (max-width: 760px) {

  .contentsWidth {
    width:320px;
    margin: 0 auto;
  }

  #main_photo {
    position: absolute;
    width: 10000px;
    left: 50%;
    height:168px;
  }

  #main_photo_area_set  {
    margin-left: -3060px;
  }

  #main_photo_area_set img {
    width: 320px;
    height: 168px;
  }

  #overImage {
    position: absolute;
    width: 100%;
    height:168px;
    left:0;
  }

  #overImage img {
    width: 320px;
    height:168px;
  }

  #arrowArea {
    position: absolute;
    top:174px;
    width:100%;
    z-index: 100;
    left:0;
  }

  #posiArea {
    background-color: #000;
    position:absolute;
    width:100%;
    top:168px;
    padding: 14px 5px;
    left:0;
  }

  #prev {
    position: absolute;
    top:0;
    left:5px;
  }

  #prev , #next {
    width: 36px;
    height: 36px;
  }

  #next {
    position: absolute;
    top:0;
    right:5px;
  }

  .bnrLargeWidth {
    width:315px;
    margin: 0 auto;
  }

  #footMenu img {
    width: 91px;
    height: 125px;
  }

  .bnrLargeInnerBox {
    width:315px;
    margin: 0 auto;
  }

  #bnrArea {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgContentsAreaSmp.jpg) repeat-x;
    background-size: 100px;
  }

  #lBnrArea {
    padding-top: 15px;
  }

  .largeBnr {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
  }

  .largeBnr img {
    width: 315px;
    height: 100px;
  }

  .bnrSmallWidth {
    width:318px;
    margin: 0 auto;
  }

  .bnrSmallInnerBox {
    width:315px;
    margin: 0 auto;
  }

  #sBnrArea {
    /*background-color: #F4F6F8;*/
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .bgCrossBtm{
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtmSmp.png) repeat-x;
    background-size: auto 100%;
    background-position: bottom;
  }

  .bgCrossBtmQaNone {
    background:url(/~/Media/com/mens-deou/promotion/201603/common/201606/bgCrossBtmQaNone.png) repeat-x;
    background-size: auto 100%;
    background-position: bottom;
  }

  #loupePosition{
    position: absolute;
    left: 50%;
    margin-left: -13px;
    top: -13px;
    width: 26px;
    height: 26px;
  }

  #lookOtherSize {
    width: 150px;
    height: 15px;
  }

  #subFooterMenu{
    width: 374px;
    height: 250px;
    padding: 2px;
    background-color: rgba(255, 255, 255, 0.7);
  }

  #subFooterMenu div{
    padding: 11px 8px;
    height: 100%;
  }

  .loupeBox {
    padding-top: 5px;
  }

  .bnrBox {
    padding-bottom: 5px;
  }

  .bbLeft {
    padding-left: 0;
    padding-right: 5px;
  }

  .bbRight {
    padding-left: 0;
    padding-right: 0;
  }

  .explh {
    line-height: 1.7em;
  }
}