@charset "shift_jis";

/* -------------------------------------------------------------------- 
 2018.9.3 追加クーポン説明ページ制作
-------------------------------------------------------------------- */
.spOnly{
  display:none;
}
#ui1065 h3.grayH{
  padding: 10px;
  border: 1px solid #4d4d4d;
  background: #676767;
  color: #ffffff;
  font-size: 150%;
}
#ui1065 .rule dl{
  padding: 0 0 30px 50px;
  background: #e8edf4;
  margin-top: 0;
}
#ui1065 .rule dt{
  float:left;
}
#ui1065 .blueH{
  padding: 10px;
  border: 1px solid #054a99;
  background: #0662cc;
  color: #ffffff;
  font-size: 150%;
}
#ui1065 h3.blueH .hLeft{
  margin-right: 11px;
  background: white;
  color: #0662cc;
  padding: 0 10px;
  border-radius: 5px;
}
#ui1065 h3.blueH em{
  margin-left: 10px;
  font-style: normal;
  font-size: 90%;
}
#ui1065 ol{
  padding: 0;
  list-style: none;
}
#ui1065 .descArea .figure{
  margin-top: 8px;
  border: 1px solid #cccccc;
  margin: 10px 30px;
}
#ui1065 .descArea .figure img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}



h2 {
  font-size: 200%;
}

.itemArea {
  margin: 0 9px;
  border-bottom: 1px solid #DACFB1;
  background: url(/image/campaign/common/back_coupon_m.gif) repeat-y left / 100% auto;
  -moz-box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
  -webkit-box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
  box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
}
.itemAreaInner {
  background: url(/image/campaign/common/back_coupon_t.gif) no-repeat left top;
  padding: 18px 60px 18px 60px;
  padding-left: 350px;
  position: relative;
  min-height: 195px;
}

#ui1065 .itemArea h3 {
  font-size: 190%;
  color: #917650;
  margin-top: 0;
}

.couponArea {
  font-size: 120%;
  background: #917650;
  width: 550px;
  margin: 10px 0 4px 0;
  border: 1px solid #917650;
}

.couponArea dt {
  float: left;
  width: 110px;
  position: relative;
}

.couponArea dt:after {
  content: '：';
  position: absolute;
  right: 0;
}

.couponArea h4 {
  float: left;
  padding: 10px 15px;
  color: #fff;
  margin-top: 45px;
}


.couponArea dl {
  margin: 0 0 0 170px;
  background: #fff;
  padding: 0 10px;
}

.couponArea dt,.couponArea dd {
  padding:10px;
  margin-right: 10px;
}

.couponArea dd {
  margin: 0;
  border-bottom: dashed 1px #917650;
}

.couponArea dd:last-child {
  border-bottom: 0;
}

.itemArea img {
  height: 240px;
  width: auto;
  float: left;
  position: absolute;
  left: 60px;
  -moz-box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
  -webkit-box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
  box-shadow: 0px 0px 7px rgba(000,000,000,0.2);
  opacity: 0;
}

.itemArea .noteTxt {font-size: 95%;}

.itemArea .noteTxt a:hover {text-decoration: underline;}

#ui1065 .btn01 {
  position: relative;
  display: block;
  color: #fff !important;
  background: #c83232;
  padding: 10px 20px 10px 30px;
  border: solid #c83232 2px;
  text-decoration: none;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: all 0.2s ease-out;
  width: 200px;
  margin-left: 310px;
}

#ui1065 .btn01:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: #fff;
}

#ui1065 .btn01:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 0;
  height: 0;
  margin-top: -4px;
  border: 4px solid rgba(0, 0, 0, 0);
  border-left: 8px solid #c83232;
}

#ui1065 .btn01:hover {
  text-decoration: none;
  color: #c83232 !important;
  background: #fff;
}

.itemArea a {
  text-decoration: none;
  margin-top: 5px;
}


.ribbonArea {
  position: relative;
  height: 70px;
}
.ribbonInner {
  position: absolute;
  z-index: 1;
}
.ribbon {
   width: 980px;
   position: absolute;
   text-align: center;
   font-size: 170%;
   background: #d64b4b;
   background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
   background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
   background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   }
.ribbon h2 {
   font-size: 150%;
   color: #ffffff;
   text-shadow: #6b0c0c 0 1px 0;
   margin:0px;
   padding: 2px 10px;
   }
.ribbon:before, .ribbon:after {
   content: '';
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #c23a3a;
   z-index: -1;
   }
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   }
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #871616 transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }
.ribbon-stitches-top {
   margin-top:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
   }
.ribbon-stitches-bottom {
   margin-bottom:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
   }


.arrow_box{
    position:relative;
    padding:10px;
    border-bottom: 1px solid #040802;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left: 11%;
}
.arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width: 17px;
    border-bottom-width: 17px;
    border-left-width: 17px;
    border-right-width: 17px;
    margin-left: -17px;
    border-top-color:#FFFFFF;
}
.arrow_box:before{
    border-color: rgba(4, 8, 2, 0);
    border-top-width: 17px;
    border-bottom-width: 17px;
    border-left-width: 17px;
    border-right-width: 17px;
    margin-left: -17px;
    margin-top: 1px;
    border-top-color:#040802;
}



.descArea p {
  background: #e8edf4;
  font-size: 120%;
  padding: 20px 50px;
}


/* ---------------------------- */

#pcwrap .descArea p {
  background: no-repeat;
  border: solid #0662cc;
  border-width: 0 3px 3px 3px;
}

#pcwrap .descArea .figure {
  border: 3px solid #b8d7fa;
  margin: 0;
  padding: 10px 30px;
  border-width: 0 3px 3px 3px;
}

#pcwrap .rule dl {
  background: none;
  border: solid #676767;
  border-width: 0 3px 3px 3px;
}

#pcwrap .rule p {
  border: solid #676767;
  border-width: 0 3px;
}

#pcwrap .descArea.rule .figure {
  border-color: #c7c7c7;
}

.contentsarea {
  margin-bottom: 40px;
}


/* ---------------------------- */



/* ---------------------------- 

#pcwrap .descArea {
  background: #e8edf4;
  padding-bottom: 20px;
}

#pcwrap .descArea p {
  position: relative;
  padding-left: 70px;
}

#pcwrap .descArea p:before {
  background: #4CAF50;
  content: '';
  width: 42px;
  height: 4px;
  position: absolute;
  top: 29px;
  left: 15px;
}

#pcwrap .descArea p:after {
  background: #4caf50;
  content: '';
  width: 4px;
  height: 42px;
  position: absolute;
  top: 10px;
  left: 35px;
}

#pcwrap #ui1065 .descArea .figure{
  margin: 10px 30px 10px 110px;
}


 ---------------------------- */



/* クーポンエリア追加
---------------------------- */
.twtCpnArea .couponArea{
  width: 700px;
  margin: 10px auto 25px;
}
#ui1065 .twtCpnArea .itemArea h3{
  margin-bottom: 5px;
  font-size: 160%;
}
.twtCpnArea .couponArea h4{
  margin: 45px 20px;
}
.twtCpnArea .couponArea dl{
  margin: 0 0 0 210px;
}
.twtCpnArea .itemArea, #ui1065 .sumVac.first{
  width: 32%;
  margin: 0;
  float: left;
}
.twtCpnArea .itemArea + .itemArea{
  margin-left: 2%;
}
.twtCpnArea .itemArea .itemAreaInner{
  padding: 20px;
  background: url(/image/campaign/common/back_coupon_t.gif) no-repeat left top / 100% auto;
  text-align: center;
}
.twtCpnArea .itemArea .itemAreaInner img{
  position: static;
  float: none;
  width: 100%;
  height: auto;
  margin: 15px 0 18px;
}
#ui1065 .twtCpnArea .btn01{
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.twtCpnArea .cautionTxt{
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.twtCpnArea .cautionTxt li{
  margin: 0;
}

/* 1カラムの場合
---------------------------- */
#ui1065 .itemArea.column01{
  width: 72%;
  margin: 0 auto;
  float: none;
}
.twtCpnArea .itemArea.column01 .itemAreaInner img{
  width: 350px;
}
#ui1065 .twtCpnArea .itemArea.column01 .btn01{
  width: 70%;
}

/* 2カラムの場合
---------------------------- */
#ui1065 .itemArea.column02{
  width: 49%;
}
.twtCpnArea .itemArea.column02 .itemAreaInner img{
  width: 350px;
}
#ui1065 .twtCpnArea .itemArea.column02 .btn01{
  width: 70%;
}

/* 夏休み応援キャンペーン
---------------------------- */
.sumVac .leadTxt{
  text-align: center;
  margin: 20px 0;
  font-size: 120%;
}
.sumVac .leadTxt .leadTxtTop{
  border-bottom: 7px dotted #c70201;
  width: 55%;
  display: inline-block;
  font-size: 155%;
  font-weight: bold;
  color: #444;
}
.sumVac .leadTxt .leadTxtTop span{
  color: #E00;
}
.sumVac .leadTxt .leadTxtTop + p{
  margin-top: 15px;
}
.twtCpnArea .couponItem{
  font-size: 170%;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: #917650;
}

.twtCpnArea .periodTxt{
  font-size: 160%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

/* どのモバイルPCがいい？
---------------------------- */
.twtCpnArea .periodTxt02 {
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  color: #917650;
}
.twtCpnArea .couponArea02{
  margin-bottom: 10px;
  font-weight: bold;
  color: #917650;
}
.twtCpnArea .couponArea02 p + p{
  margin-top: 5px;
}
.twtCpnArea .couponArea02 span{
  font-size: 160%;
  color: #c83232;
  margin-left: 5px;
}