﻿div.cMgn{margin:28px auto;}
div.cMgn p{margin-bottom:18px;}
div.cMgn a:hover{filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}
#campaignFix{left:0;}
.animation {}
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
#wrapCpn { font-size: 1.8rem;background-repeat: no-repeat;background-position: top center;padding-top: 52.5%;background-size: contain; }
button { font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: bold; }
h2 + ul li {
list-style-image: url(/campaign/t-point/images/list_01.png);
list-style-position: inside;
margin-bottom: 8px;
}
/* 文字設定 */
.sml {font-size:0.6em;}
/* 位置設定 */
.Right {float:right}
.Left {float:left}
.textCenter {text-align:center}
.textRight {text-align:right}
.textLeft {text-align:left}

.MgnAuto {margin:0 auto}

.MgnBtm0 {margin-bottom:0}
.MgnBtm5 {margin-bottom:5px}
.MgnBtm10 {margin-bottom:10px}
.MgnBtm15 {margin-bottom:15px}
.MgnBtm20 {margin-bottom:20px}
.MgnBtm25 {margin-bottom:25px}
.MgnBtm30 {margin-bottom:30px}
.MgnBtm40 {margin-bottom:40px}
.MgnBtm50 {margin-bottom:50px}
.MgnBtm80 {margin-bottom:80px}
.MgnBtm100 {margin-bottom:100px}

.MgnTop0 {margin-top:0}
.MgnTop5 {margin-top:5px}
.MgnTop10 {margin-top:10px}
.MgnTop15 {margin-top:15px}
.MgnTop20 {margin-top:20px}
.MgnTop25 {margin-top:25px}
.MgnTop30 {margin-top:30px}
.MgnTop40 {margin-top:40px}
.MgnTop50 {margin-top:50px}

.Pad {padding:0}
.Pad5 {padding:5px}
.Pad10 {padding:10px}
.Pad15 {padding:15px}
.Pad20 {padding:20px}
.Pad25 {padding:25px}
.Pad30 {padding:30px}
.Pad40 {padding:40px}
.Pad50 {padding:50px}

#wrapCpn div { margin-bottom: 26px; }	
#wrapCpn div img { width: 100%; }	
ul#carrier {display: table;
table-layout: fixed;
text-align: center;
width: 100%;}
ul#carrier li {display: table-cell;
vertical-align: middle;
padding:0 26px;}
ul#carrier li:last-child {margin-right:none;}

#wrapCpn .one{
float: left;
width: 48%;
margin: 0 2% 0 0;
}
#wrapCpn .two{
float: left;
width: 48%;
margin: 0 0 0 2%;
}
#wrapCpn .one .img, #wrapCpn  .two .img {
text-align: center;
}
h2 {
display: inline-block;
width: 100%;
margin-bottom: .8rem;
font-size: 2.8rem;
font-weight: normal;
}
h2.multi{
padding:6px 0;
border-bottom:8px solid rgba(225,0,51,1.00);
position:relative;
}
h2.multi:before, h2.multi:after{
content:"";
display:block;
height:8px;
position:absolute;
bottom:-8px;
}
h2.multi:before{
width:20%;
left:8%;
background:rgba(255,255,255,0.7);
}
h2.multi:after{
width:30%;
left:12%;
background:rgba(225,0,51,0.6);
}
.flow h5 {
position: relative;
text-align: center;
font-size: 1.8rem;
}
.flow h5 span {
position: relative;
display: inline-block;
padding: 0 0.5em;
background-color: #fff;
}
.flow h5::before {
content: '';
width: 100%;
border-top: 2px solid #ccc;
position: absolute;
top: 50%;
left: 0;
}
.flow p {
padding: 0.5em 1em 1em;
border-bottom: 2px solid #ccc;
}
.sankaku{
width: 0;
height: 0;
border-top: 50px solid #d60a23;
border-right: 30px solid transparent;
border-bottom: 0 solid transparent;
border-left: 30px solid transparent;
margin: 20px auto;
}
.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #FFFFFF;
  border-right: solid 2px #FFFFFF;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

/* 2はボタン2個並び */

/***** ボタンの基本 *****/
#btnBasic {
box-sizing: border-box;
position: relative;
width: 100%;
max-width: 480px;
height: auto;
margin: 20px auto;
}
#btnBasic span{
display: block;
width: 100%;
height:100%;
padding: 20px;
}
/***** ボタンの基本2 *****/
#btnBasic2 {
width: 100%;
position: relative;
overflow: hidden;
margin-top: -40px;
}
#btnBasic2 ul {
float: left;
left: 50%;
position: relative;
}
#btnBasic2 ul li {
float: left;
left: -50%;
position: relative;
display: inline-block;
width: 60%;
height: auto;
padding: 6px;
font-size: 1rem;
margin: 0 25px;
}
/***** 黄色のボタン *****/
.btnYel {
display: block;
text-align: center;
-ms-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
text-decoration: none;
color: #fff;
cursor: pointer;
-ms-transition: background-color .5s ease 0;
-moz-transition: background-color .5s ease 0;
-webkit-transition: background-color .5s ease 0;
transition: background-color .5s ease 0;
background: #feae31;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #feae31), color-stop(0.00, #efe457));
background: -webkit-linear-gradient(top, #efe457 0%, #feae31 100%);
background: -moz-linear-gradient(top, #efe457 0%, #feae31 100%);
background: -o-linear-gradient(top, #efe457 0%, #feae31 100%);
background: -ms-linear-gradient(top, #efe457 0%, #feae31 100%);
background: linear-gradient(top, #efe457 0%, #feae31 100%);
}
.btnYel span {
color: #3d3333;
text-decoration: none;
font-size: 2.2rem
}
.btnYel:hover,
.btnYel:focus,
.btnYel:active {
background: #efe457;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #efe457), color-stop(0.00, #feae31));
background: -webkit-linear-gradient(top, #feae31 0%, #efe457 100%);
background: -moz-linear-gradient(top, #feae31 0%, #efe457 100%);
background: -o-linear-gradient(top, #feae31 0%, #efe457 100%);
background: -ms-linear-gradient(top, #feae31 0%, #efe457 100%);
background: linear-gradient(top, #feae31 0%, #efe457 100%);
}

/***** 赤いボタン *****/
.btnRed span:hover{
color: #ffffff;
}
.btnRed {
display: block;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-decoration: none;
color: #fff;
cursor: pointer;
-ms-transition: background-color .5s ease 0;
-moz-transition: background-color .5s ease 0;
-webkit-transition: background-color .5s ease 0;
transition: background-color .5s ease 0;
background-image: -moz-linear-gradient(top, #d60a23, #940718);
background-image: -ms-linear-gradient(top, #d60a23, #940718);
background-image: -o-linear-gradient(top, #d60a23, #940718);
background-image: -webkit-gradient(linear, center top, center bottom, from(#d60a23), to(#940718));
background-image: -webkit-linear-gradient(top, #d60a23, #940718);
background-image: linear-gradient(top, #d60a23, #940718);
}
.btnRed span {
color: #ffffff;
text-decoration: none;
font-size: 2.2rem
}
.btnRed:hover,
.btnRed:focus,
.btnRed:active {
background: #940718;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#940718', endColorstr = '#d60a23');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#940718', endColorstr = '#d60a23')";
background-image: -moz-linear-gradient(top, #940718, #d60a23);
background-image: -ms-linear-gradient(top, #940718, #d60a23);
background-image: -o-linear-gradient(top, #940718, #d60a23);
background-image: -webkit-gradient(linear, center top, center bottom, from(#940718), to(#d60a23));
background-image: -webkit-linear-gradient(top, #940718, #d60a23);
background-image: linear-gradient(top, #940718, #d60a23);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

/* 店舗検索用 */
.btnLv2 {
margin: 0;
font-size: 2.2rem;	
}
.btnColumn {
margin-bottom: 2.0rem;
padding: 2.0rem;
border-radius: 1.0rem;
background: #f0f0f0;
}
.btnColumn .btnLv2 {
margin: 0 0 1.0rem 0;
}
.btnColumn .btnLv2:last-child {
margin-bottom: 0;	
}
.btnLv2 span {
display: block;
width: 80%;
margin: 0 auto;
padding: 2.0rem;
font-size: 2.2rem;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 1.0rem;
background: #cc0000;
box-shadow: 0 2px #930000;
}
.btnLv2 a:hover {
background-color: #e43636;
}
.btnLv2 a:focus {
box-shadow: 0 2px #930000 inset;
}

@media screen and (min-width: 768px){
.none {
display: none;
}
.btn{
width: 80%;
padding: 10px 0;
}
}
@media only screen and (max-width: 767px) {
#wrapCpn h2 {
background-color: rgba(255,255,255,1.00);
color: #3d3333;}
#btnBasic {
width: 80%;
}
#btnBasic2 {
position: relative;
text-align: center;
}
#btnBasic2 ul li {
margin: 20px 30px;
}
ul#carrier {
display: list-item;
table-layout: fixed;
text-align: center;
}
ul#carrier li {
display: inline-block;
margin-bottom: 24px;
}
ul#carrier li.ListUnder {
background-image:url(/campaign/t-point/images/arrow.png);
background-position:6px 3px;
background-repeat:no-repeat;
margin-bottom: 8px;
}
ul#carrier div { margin:0; }
ul#carrier img { width: 60%; }
}