@charset "utf-8";

/* =======================================
	SP Elements
======================================= */

/*CONT Default*/

section{
	position:relative;
    color:#000;
}


p{
	font-size:0.9em;
	line-height:1.5em;
	text-align: left;
	margin:0 auto 1.2em;
	color:#000;
}
img{
    width:100%;
}

p span{
	font-size:0.8em;
}

section .contBox{
    /*position:relative;*/
    margin:0 auto;
    text-align: left;
}


section .contBox .mainp img{
    width:100%;
}

/*SP TOP*/
section#top{
	width:100%;
	height:auto;
	position:relative;
    animation-duration: 2s;
}

section#top picture img{
    width:100%;
    height:auto;
}

section#top h1{
    display:none;
}


section#top div.main div.link_area{
    position:absolute;
    right:5%;
    top:30%;
    width:45%;
}

section#top div.main div.link_area img#main_win{
   width:100%;
}

section#top div.main div.link_area img#mnotes{
    display:none;
}

section#top div.txtArea{
}

section .contBox div.txtArea p{
    margin:1em auto;
    width:90%;
    font-size:0.8em;
    line-height:1.5em;
}

img.top_bnr{
    width:26%;
    position:absolute;
    right:2%;
    top:52%;
}

img.sp_mnotes{
    position:absolute;
    width:23%;
    right:0;
    top:0;
    animation-name:fadeInUp3;
    animation-delay: 0.8s;
}

section#top div.main img.kv{
    width:100%;
}


/*SP CONT1 Wait at home*/
section#cont1{
    padding:1em 0;
    background:#FFF;
    position:relative;
}

section#cont1 .contBox{
    padding-bottom:5em;
    background:#F7F0E0 url("../img/CM_210222/sp_cont1_btm.png")no-repeat left bottom;
    background-size:100% auto;
}

section#cont1 .contBox div{
    width:100%;
    position:relative;
}

section#cont1 .contBox div h3{
    width:100%;
}

section#cont1 .contBox div h5{
    display:none;
}

section#cont1 .contBox div img.cm_thumb{
    width:84%;
    margin:0 8% 1em;
}

section#cont1 p{
    width:80%;
    margin:0 auto;
    color:#000;
    line-height:1.6em;
    font-size:0.9em;
}

section#cont1 img.cont1_fs2{
    display:none;
}

/*SP CONT2 Campaign*/

section#cont2{
    padding:0 0 3em;
}

section#cont2 div.contBox{
    width:96%;
    margin:0 auto;
}

section#cont2 h2{
    width:100%;
    text-align:left;
    vertical-align: top;
}

section#cont2 div.cont2_p{
    display:none;
}


section#cont2 p.cont2_lead{
    margin:1em 5% 2.5em;
    font-size:0.9em;
}

section#cont2 div.cont2_oubo{
    width:94%;
    background: url("../img/CM_210222/cont2_oubo_mid.jpg") repeat-y center top;
    background-size:100% auto;
    position:relative;
    padding:2em 0 2.5em;
    margin:0 auto 3em;
}

section#cont2 div.cont2_oubo .oubo_top{
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
}

section#cont2 div.cont2_oubo .oubo_btm{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
}

section#cont2 div.cont2_oubo .leaf_top{
    position:absolute;
    right:-3%;
    top:-1em;
    width:25%;
}

section#cont2 div.cont2_oubo .leaf_btm{
    position:absolute;
    left:-3%;
    bottom:-1em;
    width:25%;
}

section#cont2 div.cont2_oubo dl{
    width:86%;
    margin:0 auto;
    text-align:left;
    color:#333;
}

section#cont2 div.cont2_oubo dl hr {
    background-image: url("../img/CM_210222/cont2_oubo_hr.png");
    background-repeat: repeat-x;
    background-size:auto 100%;
    height: 15px;
    border: 0px none;
}

section#cont2 div.cont2_oubo dl dt{
    width:8.8em;
    text-align:center;
    background:#aa8d77;
    border-radius:5px;
    padding:0.5em 0;
    color:#fff;
    font-size:0.9em;
    font-weight:bold;
    margin-left:0.5em;
    margin-bottom:1em;
    display:inline-block;
}

div.cont2_oubo dl dd.date{
    display:inline-block;
    vertical-align: baseline;
    font-weight:bold;
    font-size:0.9em;
    margin-left:1em;
}

div.cont2_oubo dl div.oubo_pre{
    width:98%;
    margin:1.5em auto;
}

div.cont2_oubo dl div.oubo_pre > dd{
    display:block;
    width:90%;
    margin:0 auto 2em;
    padding-bottom:1.5em;
    text-align: center;
    line-height:1.4em;
    vertical-align: top;
    font-size:0.9em;
    font-weight:bold;
    border-bottom:solid 1px #FFF;
}

div.cont2_oubo dl div.oubo_pre > dd img{
    width:90%;
    margin:0 auto 1em;
    display:block;
}

div.cont2_oubo dl div.oubo_pre > dd span{
    display:inline-block;
    width:4em;
    height:1.7em;
    background:url("../img/CM_210222/icon_nfs.png")no-repeat left top;
    background-size:auto 100%;
    vertical-align: middle;
}

div.cont2_oubo dl div.oubo_pre > ul{
    width:94%;
    margin:0 auto;
    font-size:0.8em;
}

div.cont2_oubo dl div.oubo_pre > ul li span{
    font-size:0.7em;
}


div.cont2_oubo dl dd.notes{
    display:inline-block;
    font-size:0.8em;
}


div.cont2_oubo dd.info{
    display:inline-block;
    width:94%;
    margin:0 auto ;
    font-size:0.9em;
    border:solid 1px #000;
    line-height:1.4em;
}

dd.terms{
    width:98%;
    margin:0.5em auto 1em;
    background:rgba(255,255,255,0.83);
    padding:1em 0 1.5em;
}

dd.terms > h3{
    font-size:0.9em;
    position:relative;
    line-height:1.5em;
    margin:0 0 0 1em;
    padding-bottom:1em;
}

dd.terms > h3 span{
    font-size:0.8em;
}


dd.terms > ul{
    width:94%;
    margin:1em auto 3em;
    position:relative;
    display:none;
}

dd.terms > ul li{
    margin-bottom:1.5em;
}

dd.terms ul li h4{
    font-size:0.9em;
    color:#b51440;
    width:94%;
    margin:1em auto 0.5em;
}

dd.terms ul li p{
    width:94%;
    margin-left:3%;
    font-size:0.7em;
}

dd.terms ul.items li,
dd.terms ul.notes li{
    font-size:0.7em;
    margin:0 1em 0.8em 2em;
    line-height:1.2em;
}

img.opn_terms{
    position:absolute;
    right:0.8em;
    bottom:-0.5em;
    width:auto;
    height:1.5em;
}

img.cls_terms{
    position:absolute;
    right:0.8em;
    bottom:-3em;
    width:auto;
    height:1.5em;
}

section#cont2 h4.bnk{
    width:75%;
    margin:0.5em auto 1em;
}

section#cont2 .btn_step{
    width:46%;
    margin:0 0.5% 0 1%;
}

div.cont2_oubo dl dd.tel{
    display:block;
    vertical-align: baseline;
    font-weight:bold;
    font-size:0.8em;
    width:95%;
    margin:0 auto;
    line-height:1.3em;
    text-align:center;
}

div.cont2_oubo p.tel{
    display:block;
    font-size:0.8em;
    width:95%;
    margin:1em auto 1.5em;
    text-align:center;
}


/*SP CONT3 FB_step*/
section#cont3{
    padding:2em 0;
}

section#cont3 .contBox{
    text-align:center;
    margin:0 auto;
}

section#cont3 .contBox > div{
    width:92%;
    border-bottom:dashed 1px #666666;
    margin:0 auto 1.5em;
    text-align: left;
}

section#cont3 .contBox h3{
    width:100%;
    text-align: left;
    margin:0 auto 1em;
}

section#cont3 .contBox h3 img{
    width:85%;
}

section#cont3 .contBox p a:link{
    color:#3553bb;
}

.contBox .p_notes::before{
  color:#e72d00; 
}

p.step{
    display:inline-block;
    width:15%;
    vertical-align: top;
}

p.cap{
    display:inline-block;
    width:80%;
    margin-left:2%;
    padding-top:0.5em;
    vertical-align: top;
}


p.cap br{
    display:none;
}

p.thumb{
    display:block;
    width:90%;
    text-align: center;
    margin-left:10%;
}

p.step img{
    width:100%;
}

p.thumb img{
    width:80%;
}

img.w100{
    width:100%!important;
    margin-left:-7%;
}

.entry{
    display:block;
    width:80%;
    margin:0 auto 1em;
}

.entry img{
    width:100%;
}

p.p_notes.entry{
    width:70%;
    margin-left:18%;
    font-size:0.8em;
}

/*SP CONT4 Twitter_step*/
section#cont4{
    padding:2em 0;
}

section#cont4 .contBox{
    text-align:center;
}

section#cont4 .contBox > div{
    width:92%;
    border-bottom:dashed 1px #666666;
    margin:0 auto 1.5em;
}

section#cont4 .contBox h3{
    width:100%;
    text-align: left;
    margin:0 auto 1em;
}

section#cont4 .contBox h3 img{
    width:85%;
}

section#cont4 .contBox p a:link,
section#cont4 .contBox p a:visited{
    color:#1da1f2;
}

section#cont4 a.link_twibtn{
    display:block;
    background:#1da1f2;
    border-radius:12px;
    padding:0.2em 1em;
    color:#FFF!important;
    text-decoration: none;
    font-size:0.9em;
    margin:0.5em 0 1em;
    text-align:center;
}


/*SP CONT5 YouTube linkArea*/
section#cont5{
    padding:4em 0 0;
}

section#cont5 h4{
    width:100%;
    position:absolute;
    left:0;
    top:0.5em;
    z-index:5;
}

section#cont5 h4 img{
    width:100%;
    margin:0 auto;
}

section#cont5 > div{
    margin-top:-0.2em;
    padding:1em 0 0;
}

section#cont5 > div >img.cmImage{
    width:92%;
    margin:0 auto;
}

section#cont5 img.yt_btn{
    width:80%;
    margin:-1em auto 0;
    display:block;
}

/*FB ButtonArea*/
#fbbtnArea{
	width:100%;
	height:100vh;
	position:fixed;
	top: 0;
	left: 0;
	margin: auto;
	background: rgba(0, 0, 0, 0.9);
	zoom: 1;
	display: none;
	z-index: 99999;
}

#fbbtnArea div.btnWrap{
    width:100%;
    height:100vh;
    position:relative;
}

#fbbtnArea div.btnWrap > div{
    width:80%;
    position:absolute;
    top:50%;
    left:10%;
    text-align:center;
    transform: translateY(-50%);
}

#fbbtnArea div.btnWrap > div span{
    position:absolute;
    left:-9999px;
    top:-9999px;
}
#fbbtnArea div.btnWrap > div > a img,
#fbbtnArea div.btnWrap > div > button img{
    display:block;
    width:100%;
    margin:0 auto 10%;
}

#fbbtnArea div.btnWrap > div > p{
    font-size:1em;
    display:inline-block;
    width:auto;
    color:#FFF;
    cursor:pointer;
    margin:5% auto 10%;
    text-align: center;
}

/*Smph display*/
.spdn{
	display:none;
}

.pcdn{
	display:block;
}

div.modal-wrapper{
	width:90%;
	height:95%;
	position:absolute;
	left:5%;
	top:30%;
}

div.modal-box{
	position: relative;
  	width: 100%;
	margin:0px auto;
  	padding: calc(345 / 640 * 100%) 0 0 /* topを0、bottomをcalc()としてもOK */
}

#close{
	position:absolute;
	right:0;
	top:-30px;
	width:30px;
	height:30px;
	cursor:pointer;
	background:url("../img/CM_210222/b_cls.png") no-repeat center bottom;
	background-size:contain;
	z-index:9999;
	transition:0.6s;
}

