@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: 30px; }
.pageTop { border-radius: 50%; }


/*---- 文字　 ----*/
#mainContents .paragraph,
#mainContents .mainTitleWrap,
.productBoxIn,
table th,table td{
font-family:"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;}

#mainContents p {
font-size:  124%;
line-height: 2;
}

#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;
}


/*==============================================
看板
============================================= */
.mainTitleWrap {
width: 100%;

}
.mainTitle {
width: 890px;
margin: 0 auto;
padding: 50px 0 0;
}
h1 {
width: 890px;
height: 600px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/pc_title.jpg) center top no-repeat;
text-indent: -999em;
font-size: 0;
z-index: 1;
}

.lead {width: 840px;
margin: 0 auto;}

.lead a:link,
.lead a:visited {
color: #ce0303;
text-decoration: underline;
}
.lead a:hover,
.lead a:active {
color: #ce0303;
}

.contentsNavi {
display: flex;
overflow: hidden;
width: 840px;
margin: 50px auto 0;
}

.contentsNavi a{
display: block;
float: left;
width: 201px;
padding: 10px 10px 38px;
box-sizing: border-box;
align-items: stretch;
border: #f2f2f2 1px solid;
background: #f2f2f2 url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/anchor_arrow.svg) center 92% no-repeat;
transition: 0.1s ease-in-out;}

.contentsNavi a:hover {
border: #ce0303 1px solid;
background: #f2f2f2 url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/anchor_arrow.svg) center 95% no-repeat;	
}

.contentsNavi a + a {
margin-left: 12px;}

.contentsNavi a .icon {
display: block;
font-size: 16px;
color: #fff;
background-color: #000;
padding: 8px 5px;
text-align: center;}

.contentsNavi a .text {
padding: 15px 10px 0;
font-size: 15px;
line-height: 1.6;
display: block;
}

/*==============================================
バナー
============================================= */
.topbnr a{
font-size: 15px;
line-height: 65px;
display: block;
width: 545px;
height: 65px;
color: #fff;
text-align: center;
background: #ce0303 url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/link_arrow.svg) 510px 50% no-repeat;
margin: 50px auto 0;
border-radius: 5px;
overflow: hidden;
transition: 0.1s ease-in-out;}

.topbnr a:hover{
background-color: #fa8e01;
opacity: 0.8;
filter: alpha(opacity=80);}


.innerbnr a{
display: block;
width: 852px;
height: 219px;
margin: 90px auto;
text-indent: -9999px;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/inner_bnr.jpg) right bottom no-repeat;;
overflow: hidden;}

.innerbnr a:hover {
opacity: 0;	}

.innerbnr .bnr{
width: 852px;
height: 219px;
margin: 90px auto 0;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/inner_bnr_over.jpg) right bottom no-repeat;}


/*==============================================
#mainContents
============================================= */

.paragraphIn {
width: 840px;
margin: 80px auto 0;
}

.paragraph h2 {
font-size: 28px;
line-height: 1.7;
padding: 40px 0;
background-color: #f2f2f2;
margin-top: 90px;
text-align: center;}

.paragraph h2 .w840 {
width: 840px;
margin: 0 auto;
display: block;
}

.paragraph h2 .icon {
font-size: 22px;
color: #fff;
display: block;
width:300px;
padding:8px 15px;
background-color: #000;
margin: 0 auto;}

.paragraph h2 .text {
padding-top: 20px;
display: block;
}

.subtex {
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
}

/*----　画像　----*/
.w650 {width: 650px;}
.w720{width: 720px;}

.imgBox {margin:90px auto 0;}

.imgBox div {overflow: hidden;}

.imgBox .floatL,
.imgBox .floatR {width:410px;}
.imgBox img {width: 100%;}

.imgBox a {
font-size: 0;
display: block;
cursor: zoom-in;}



.imgBox a img{
transition: 0.1s 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: 90px;}

/*-- カコミ --*/
.kakomi {
margin-top: 90px;
padding: 70px;
box-sizing: border-box;
position: relative;}

.kakomi::before, .kakomi::after {
content: '';
width: 30px;
height: 30px;
position: absolute;}

.kakomi::before {
border-left: solid 8px #d1d1d1;
border-top: solid 8px #d1d1d1;
top: 0;
left: 0;}

.kakomi::after {
border-right: solid 8px #d1d1d1;
border-bottom: solid 8px #d1d1d1;
bottom: 0;
right: 0;}

.kakomi .title {
text-align: center;
font-size: 20px;
line-height: 1.7;
font-weight: bold;
margin-bottom: 40px;}

.kakomi .imgBox {
width: 700px;
overflow: hidden;
margin: 50px auto 0;}

.kakomi .imgBox .col2 {
width: 344px;
float: left;
overflow: hidden;}

.kakomi .imgBox .col2 .floatL,
.kakomi .imgBox .col2 .floatR {
width: 166px;}

.kakomi .imgBox .cap {
margin-top: 15px;}

.kakomi .imgBox .col2 + .col2{
margin-left: 12px;}

.kakomi .imgBox .floatL,
.kakomi .imgBox .floatR {
width: 345px;
border: #dadada 1px solid;}

.note{
margin-top: 30px;}

.note li{
font-size: 12px;
line-height: 1.8;
padding-left:2em;
text-indent:-2em;}

.note li + li {
margin-top: 8px;}

/*==============================================
.productBox
============================================= */
.productBox {
margin-top: 100px;
background-color: #f2f2f2;
padding: 80px 0;}

.productBoxIn {
width: 840px;
margin: 0 auto;}

.prdtit {
text-align: center;
font-size: 25px;
line-height: 1.7;}

.prdtit span {
color: #ce0303;
font-weight: bold;
display: block;
}

.productBoxIn .item {
overflow: hidden;
display: flex;
margin-top: 40px;}

.productBoxIn .item a {
width: 400px;
padding: 28px;
box-sizing: border-box;
display: block;
float: left;
background-color: #fff;
border: #fff 1px solid;
text-align: center;
transition: 0.1s ease-in-out;}

.productBoxIn .item a:hover {
border: #fa8e01 1px solid;	
}

.productBoxIn .item a + a {
margin-left: 40px;}

.productBoxIn .item img {
width: 280px;
margin: 0 auto;}

.productBoxIn .item .name {
font-size: 40px;
font-weight: bold;
margin-top: 15px;
display: inline-block;}

.productBoxIn .item .name.review,
.productBoxIn .item .name.new{

padding-left: 94px;
min-height: 50px;
line-height: 49px;}

.productBoxIn .item .name.review {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/icon_review.png) left 50% no-repeat;
background-size: 88px;}

.productBoxIn .item .name.new {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/icon_new.png) left 50% no-repeat;
background-size: 88px;}

.productBoxIn .item .text {
font-size: 15px;
line-height: 1.6;
margin-top: 10px;} 

.productBoxIn .item a .btn{
font-size: 14px;
line-height: 50px;
height: 50px;
color: #fff;
margin-top: 15px;
border-radius: 5px;
background: #ce0303 url(https://img1.kakaku.k-img.com/images/article/tieup/22/12_g3370/link_arrow.svg) 324px 50% no-repeat;
transition: 0.1s ease-in-out;}

.productBoxIn .item a:hover .btn{
background-color: #fa8e01;}	

.mtop90 {
margin-top: 90px !important;}

/*==============================================
.articlelink
============================================= */
.articlelink {
padding: 80px 0 50px;}

.articlelink a {
display: block;
width: 860px;
transition: 0.1s ease-in-out;
margin: 0 auto 30px;}

.articlelink a:hover{
opacity: 0.7;
filter: alpha(opacity=70);}


/*==============================================
.releasedate
============================================= */
.releasedate {
background-color: #f2f2f2;
font-size: 11px; 
color: #333;
width: 840px; 
padding: 50px 0;
margin: 0 auto; 
text-align: right;}