@charset "shift_jis";


/*==============================================
common
============================================= */

#header {
border-bottom: #ededed solid 1px;
}
.headerIn,
.footerIn {
width: 930px;
margin: 0 auto;
}
.copyRight { border-top: 1px solid #ededed; }
#footer { margin-top: 10px; }
.pageTop { border-radius: 50%; }

.sponly {display: none;}

/*==============================================
 .noto
============================================= */
/* regular */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Light.woff);
  font-weight: 200;
}

/* regular */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Regular.woff);
  font-weight: 400;
}

/* b */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Medium.woff);
  font-weight: 600;
}

/* bold */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Bold.woff);
  font-weight: 700;
}



/*---- 文字　 ----*/
#mainContents .paragraph,
#mainContents .mainTitleWrap,
table th,table td,
.productBox{
font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;}

#mainContents p {
	font-size:  124%;
	line-height: 2.1;
}

#mainContents .cap{
	font-size: 108%;
	line-height: 1.9;}


#mainContents p + p {
	margin-top: 20px;}

sup {
font-size: 60%;
vertical-align: top;
position: relative;
top: 0.3em;
}


.marker {
background-color: #fff589;
font-weight: bold;}

/*==============================================
看板
============================================= */

.mainTitleWrap {
width: 100%;

}
.mainTitle {
width: 100%;
margin: 0 auto;
padding: 32px 0;
background-color: #f4f2f3;
}

h1 {
width: 930px;
height: 417px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/pc_title.png) center top no-repeat;
text-indent: -999em;
font-size: 0;
z-index: 1;
margin: 0 auto;
}

.lead {
width: 880px;
margin: 50px auto 0;}

.lead a:link,
.lead a:visited {
color: #0054ee;
text-decoration: underline;
}
.lead a:hover,
.lead a:active {
color: #699dfc;
}

.contentsNavi {
width: 880px;
margin: 70px auto 0;
display: table;}

.contentsNavi p,
.contentsNavi ul{
display: table-cell;
vertical-align: top;}

.contentsNavi p {
    width: 80px;
text-indent: -999em;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/index_tit.png) left top no-repeat;
    background-size: 64px;}

.contentsNavi ul li {
    font-size: 16px;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/arrow_down.svg) left 50% no-repeat;
    padding-left: 20px;
}

.contentsNavi ul li span {
    width: 118px;
    display: inline-block;
}

.contentsNavi ul li a {
    display: block;
}

.contentsNavi ul li a:hover {
    color: #ff008c;
}

.contentsNavi ul li + li {
    margin-top: 20px;
}

/*==============================================
 バナー
============================================= */
.topbnr a{
display: block;
width: 548px;
height: 70px;
font-size: 15px;
line-height: 70px;
font-weight: bold;
text-align: center;
color: #fff;
background:#ff008c url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/arrow.svg) 520px 50% no-repeat;
border-radius: 70px;
margin: 60px auto 0;
overflow: hidden;
transition: 0.1s ease-in-out;}

.topbnr a:hover{
background-color: #ff96d0;
/*opacity: 0.7;
filter: alpha(opacity=70);*/}

.innerbnr {
width: 794px;
margin: 60px auto 0;
}

.innerbnr .attention {
    margin-top: 5px !important;}

.innerbnr .attention li + li {
    margin-top: 1px;
}

.innerbnr a{
display: block;
width: 794px;
height: 213px;
/*margin: 50px auto;*/
text-indent: -9999px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/bnr03.png) left top no-repeat;
transition: 0.1s ease-in-out;}

.innerbnr a:hover {
opacity: 0.5;
filter: alpha(opacity=50);	}

.txtLink a {
    font-size: 16px;
    line-height: 50px;
    font-weight: bold;
    border: #ff008c 3px solid;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/arrow02.svg) 480px 50% no-repeat;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    color: #ff008c;
    display: block;
    width: 500px;
    margin: 50px auto 0;
transition: 0.1s ease-in-out;}

.txtLink a:hover {
border: #ff008c 3px solid;
background-color: #ffb1dc;
}


/*==============================================
#mainContents
============================================= */
#article01,
#article03{
    background-color: #f4f2f3;
    padding: 80px 0 80px;
    margin-top: 100px;}

#article02,
#matome{margin-top: 80px;}

.paragraphIn {
    width: 880px;
    margin: 50px auto 0;}

.paragraph h2 {
    width: 880px;
    margin: 0 auto;
    font-size: 30px;
    line-height: 1.7;
    font-weight: bold;
    text-align: center;}

.paragraph h2 .icon {
    text-indent: -999em;
    font-size: 0;
    height: 118px;
    display: block;}

.paragraph h2 .icon.no01 {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/h2_icon01.png) center top no-repeat; }
.paragraph h2 .icon.no02 {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/h2_icon02.png) center top no-repeat; }
.paragraph h2 .icon.no03 {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/h2_icon03.png) center top no-repeat; }
.paragraph h2 .icon.no04 {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/h2_icon04.png) center top no-repeat; }

.paragraph h2 .text span {
    color: #ff008c;
}

.paragraph h2 ul.attention {
    margin-top: 5px !important;
}

.paragraph h3 {
text-align: center;}

.paragraph h3 span {
    font-size: 30px;
    line-height: 1.7;
    font-weight: bold;
    margin: 80px auto 0;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;}

.paragraph h3 span:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 80px;/*線の長さ*/
  height: 3px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #ff008c;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

.paragraph h3 + p {
    margin-top: 40px;}

.subtitle {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
margin-top: 80px;}

.subtitle span {
    border: #333 1px solid;
    padding: 10px 20px;
}

.subtitle02 {
    font-size: 19px !important;
    text-align: center;
    margin-top: 30px;
    font-weight: bold;
}

.subtitle02 span {
    color: #ff008c;
}

.answer {
    text-align: center;
    font-weight: bold;
    font-size: 27px !important;
line-height: 0;}

.answer span {
    color: #ff008c;
    font-size: 38px !important;}

.subtitle02 + .answer{
    margin-top: 0 !important;}

.answer + .imgBox {
    margin-top: 40px;
}

ul.attention + p,
.reviewbox + p
{
    margin-top: 70px;
}

ul.attention.mbtm30 + p {
    margin-top: 30px !important;}

ul.attention.mbtm30{
    margin-top: 10px !important;
}

/*---- .attention　----*/
ul.attention {
margin:25px auto 0;
width: 880px;}

ul.attention li{
    font-size: 12px;
    line-height: 1.6;
    padding-left: 2em;
  text-indent: -2em;}

ul.attention li + li {
    margin-top: 5px;}

.attention02 {
    font-size: 12px !important;
}


/*---- .reviewbox ----*/
.reviewbox {
 padding: 50px 50px 50px;
border-radius: 10px;
margin-top: 70px;}

.reviewbox .cap {
    margin-top: 25px;
    font-size: 12px !important;
    line-height: 1.6;
    text-align: center;}

.reviewbox ul.attention {
    width: auto;}

.reviewbox .title{
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;}

.reviewbox .title span::before{    content: "";
    display: inline-block;
    width: 50px;
    height: 31px;
    background-image: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/review_left.png) ;
    background-position: left bottom;
background-repeat: no-repeat;}

.reviewbox .title span::after{    content: "";
    display: inline-block;
    width: 50px;
    height: 31px;
    background-image: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/review_right.png) ;
    background-position: right bottom;
background-repeat: no-repeat;}

.reviewbox .review {
display: table;
padding: 20px 25px;
box-sizing: border-box;
border-radius: 5px;
margin-top: 20px;}

.reviewbox .cap + .review {
    margin-top: 35px;}

.reviewbox .review .img,
.reviewbox .review p{
    display: table-cell;
    vertical-align: middle;}

.reviewbox .review .img{
    width: 100px;}

.reviewbox .review p{
    line-height: 1.8 !important;}

.reviewbox .review p span.attention {
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding-left: 3em;
  text-indent: -3em;
}

.reviewbox.white {
background-color: #fff;}
.reviewbox.white .review {
background-color: #f4f2f3;}

.reviewbox.gray {
background-color: #f4f2f3;}
.reviewbox.gray .review {
background-color: #fff;}

/*----　画像　----*/
.w520 {width: 520px;}
.w650 {width: 650px;}
.w725 {width: 725px;}
.w762 {width: 762px;}
.w820 {width: 820px;}

.border {
    border: #e9e9e9 1px solid;
    box-sizing: border-box;
}

.imgBox {margin:70px auto 0;}

.imgBox.w762 {
    margin: 20px auto 0 !important;
}

.imgBox div {overflow: hidden;}

.imgBox .floatL,
.imgBox .floatR {width:450px;}
.imgBox img {width: 100%;}

.imgBox a {
font-size: 0;
display: block;
cursor: zoom-in;}

.imgBox a img{
transition: 0.2s ease-in-out;}

.imgBox a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);}

.imgBox .cap a {
	font-size: 100% !important;
	display: inline-block !important;
	color: #5a7ddd;
	text-decoration: underline;}

.imgBox div + .cap,
.imgBox a + .cap{
	margin-top: 15px;}

a.floatL + .cap,
a.floatR + .cap{
	margin-top: 0;}

.imgBox + p {
    margin-top: 70px;
}

/*----　table　----*/

table{
width: 880px;
margin: 70px auto 0;
border-collapse:separate;
border-spacing:0;
box-sizing: border-box;
border-left:#000 1px solid;
border-top:#000 1px solid; }

table th,
table td{
padding: 10px 15px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.7;
text-align: center;}

table th{
background-color: #000;
color: #fff;
border-right: #4e4e4e 1px solid;
border-bottom: #4e4e4e 1px dotted;
word-break: break-all;}

table td{width: 290px;}

table td span{font-size: 12px;}

table td{
border-right: #000 1px solid;
border-bottom: #000 1px dotted;}

table th.end,
table td.end{
border-bottom: #000 1px solid;}

.mainbgcolor {background-color: #ff008c;}
.bgcolor01 {background-color: #ffb2dc;}
.bgcolor02 {background-color: #ffcce8;}
.bgcolor03 {background-color: #ffe5f3;}

table .white {
width: 300px;    
color: #fff;
font-weight: bold;
font-size: 18px;}

/*==============================================
.kakomi
============================================= */
.kakomi {
    border: #ff008c 3px solid;
    border-radius: 10px;
box-sizing: border-box;
margin-top: 80px;}

.kakomiIn {
    width: 730px;
    margin: 20px auto 0;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.kakomi .title {
    text-indent: -999em;
    background: #ff008c url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_rakuten/kakomi_tit02.png) center 25px no-repeat;
    height: 268px;
}

.kakomi ul.attention {
    width: 730px !important;
}

.kakomi ul.attention li{
    padding-left: 3em;
  text-indent: -3em;}

.kakomi ul.attention + p{
    margin-top: 30px;}


/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 11px; 
color: #333;
width: 880px; 
margin: 50px auto 0;
padding-bottom: 100px;
text-align: right;}

