@charset "UTF-8";
/* rakuten */

#rakuten {
	max-width: 1080px;
	width: 90%;
	border-radius: 30px;
	overflow: hidden;
	letter-spacing: .2em;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	animation: fadein 1.7s forwards;
	margin: 0 auto 70px;
	}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/*--- mv ---*/
#rakuten .mv {
	}

/*--- btn ---*/
#rakuten .btn {
	width: 90%;
	background: #fff;
	margin: 50px auto 70px;
	}

#rakuten .btn .link {
	width: 83%;
	height: 80px;
	position: relative;
	background: url(/images/campaign/dennys-table/rakuten/btn-bg.svg) center / 65px 80px repeat-x;
	border-radius: 50px;
	box-shadow: 8px 6px 9px 0px rgba(191, 0, 0, .6);
	transition: .3s;
	margin: auto;
	}

#rakuten .btn .link a {
	width: 100%;
	height: 80px;
	line-height: 80px;
	display: block;
	font-size: 35px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	}

#rakuten .btn .link a:hover {
	text-decoration: none;
	}

#rakuten .btn .link:before {
	content: "";
	display: block;
	background: url(/images/campaign/dennys-table/rakuten/arrow.svg) center / 100% no-repeat;
	width: 45px;
	height: 45px;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 17px;
	}

/*--- content ---*/
#rakuten .content {
	width: 100%;
	background: url(/images/campaign/dennys-table/rakuten/bg-pc.jpg) top center / cover no-repeat;
	padding: 60px;
	}

#rakuten .content .contentIn {
	width: 100%;
	background: #fff;
	border-radius: 30px;
	}

#rakuten .content .contentIn {
	width: 100%;
	background: #fff;
	border-radius: 30px;
	padding: 100px 0;
	}

#rakuten .content .contentIn .txtBox {
	width: 75%;
	margin: auto;
	}

#rakuten .content .contentIn .txtBox .title {
	font-size: 35px;
	font-weight: bold;
	text-align: center;
	color: #231815;
	margin-bottom: 125px;
	}

#rakuten .content .contentIn .txtBox .title span {
	position: relative;
	}

#rakuten .content .contentIn .txtBox .title span:before {
	content: "";
	background: #231015;
    width: 0;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: -20px;
    transition: all 1s ease-in-out;
	}

#rakuten .content .contentIn .txtBox .title.in span:before {
    width: 100%;
	}

#rakuten .content .contentIn .txtBox .titlesp {
	display: none;
	}

#rakuten .content .contentIn .txtBox .midashi {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	color: #231815;
	margin-bottom: 70px;
	}

#rakuten .content .contentIn .txtBox .midashi {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	color: #231815;
	margin-bottom: 70px;
	}

#rakuten .content .contentIn .txtBox .txt {
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	line-height: 2.4;
	margin-bottom: 70px;
	}

#rakuten .content .contentIn .ImgBox {
	margin-bottom: 100px;
	}

#rakuten .content .contentIn .ImgBox img { width: 100%; }

#rakuten .content .contentIn .txtBox ul.scene {
	display: flex;
	flex-wrap: wrap;
	}

#rakuten .content .contentIn .txtBox ul.scene li {
	width: 42%;
	}

#rakuten .content .contentIn .txtBox ul.scene li:first-child {
	margin-right: 16%;
	}

#rakuten .content .contentIn .txtBox ul.scene li .img {
	margin-bottom: 40px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .midashi2 {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .txt2 {
	width: 90%;
	font-size: 15px;
	font-weight: bold;
	text-align: justify;
	letter-spacing: .15em;
	line-height: 1.9;
	margin: 0 auto 0;
	}



/*-------------------------------------------
hover
-------------------------------------------*/
@media only screen and (min-width: 961px){
#rakuten .btn .link:hover {
	background: url(/images/campaign/dennys-table/rakuten/btn-bg2.svg) center / 65px 80px repeat-x;
	/*box-shadow: 8px 6px 9px 0px rgba(191, 0, 0, .6);*/
	}
}

/*-------------------------------------------
TAB
-------------------------------------------*/
@media only screen and (max-width: 960px){
#rakuten {
    border-radius: 15px;
	}

#rakuten .btn {
    width: 90%;
    margin: 35px auto 35px;
	}

#rakuten .content .contentIn {
    border-radius: 15px;
    padding: 50px 0;
	}

#rakuten .content .contentIn .txtBox {
    width: 85%;
	}

#rakuten .content .contentIn .txtBox .title {
    margin-bottom: 65px;
	}

#rakuten .content .contentIn .txtBox .midashi {
    margin-bottom: 36px;
	}

#rakuten .content .contentIn .txtBox .txt {
    text-align: left;
    margin-bottom: 50px;
	}

#rakuten .content .contentIn .ImgBox {
    margin-bottom: 50px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .img {
    margin-bottom: 25px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .midashi2 {
    margin-bottom: 20px;
	}
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media only screen and (max-width: 520px){
#rakuten {
	width: 100%;
	}

#rakuten .btn .link {
    height: 40px;
	}

#rakuten .btn .link a {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    text-align: left;
    padding-left: 23px;
	}

#rakuten .btn .link:before {
    width: 22px;
    height: 22px;
	}

#rakuten .content {
    padding: 25px;
	}

#rakuten .content .contentIn .txtBox .title {
	display: none;
	}

#rakuten .content .contentIn .txtBox .titlesp {
	display: block;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	color: #231815;
	margin-bottom: 20px;
	}

#rakuten .content .contentIn .txtBox .titlesp span.line1,
#rakuten .content .contentIn .txtBox .titlesp span.line2 {
	position: relative;
	}

#rakuten .content .contentIn .txtBox .titlesp span.line1:before,
#rakuten .content .contentIn .txtBox .titlesp span.line2:before {
	content: "";
	background: #231015;
    width: 0;
    height: 4px;
    position: absolute;
    left: 0;
    bottom: -13px;
    transition: all 1s ease-in-out;
	}

#rakuten .content .contentIn .txtBox .titlesp.in span.line1:before,
#rakuten .content .contentIn .txtBox .titlesp.in span.line2:before {
    width: 100%;
	}

#rakuten .content .contentIn .txtBox .titlesp.in span.line1:before {transition-delay: 0;}
#rakuten .content .contentIn .txtBox .titlesp.in span.line2:before {transition-delay: 0.5s;}

#rakuten .content .contentIn .txtBox .midashi {
    font-size: 18px;
    margin-top: 65px;
	}

#rakuten .content .contentIn .txtBox .txt {
	text-align: justify;
    line-height: 1.8;
	}

#rakuten .content .contentIn .txtBox ul.scene {
    display: block;
	}

#rakuten .content .contentIn .txtBox ul.scene li {
    width: 100%;
	}

#rakuten .content .contentIn .txtBox ul.scene li:first-child {
    margin-right: 0;
    margin-bottom: 50px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .midashi2 {
    font-size: 18px;
	}

#rakuten .content .contentIn .txtBox ul.scene li .txt2 {
    width: 100%;
    line-height: 1.8;
	}
}



/*-------------------------------------------
アニメーション
-------------------------------------------*/
.focus.out {
	opacity: 0;
	transform: translateY(30px);
	}
	
.focus.in {
	transform: translateY(0);
	transition: all 1s ease;
    animation: animation 1.5s ease forwards;
    animation-delay: 0.8s;
    transition-delay: 0.8s;
	}

@keyframes animation {
  0% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
  }
100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}



/*-------------------------------------------
改行
-------------------------------------------*/
.tabnone{ display: block; }
.pcnone{ display: none; }


@media only screen and (max-width: 960px){
.tabnone{ display: none; }
}

@media only screen and (max-width: 520px){
.pcnone{ display: block; }
}