@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%; }

#mainContents {
background-color: #f2f2f2;}

.sp{
display:none;}

em {
    font-style: normal;
    background-color: #ddeaf3;
    font-weight: bold;
}

/*==============================================
 .noto
============================================= */

/* 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 .productBoxIn,
.annotation li{
font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
 color: #191919;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;}

#mainContents p {
	font-size:  132%;
	line-height: 2.1;}

#mainContents .cap{
	font-size: 108%;
	line-height: 1.9;}

#mainContents .capS{
    display: block;
    margin-top: 10px;
	font-size: 14px !important;
	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%;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/main_title.png) center top no-repeat;
}
.mainTitle {
width: 1040px;
margin: 0 auto;
padding: 137px 0 100px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/top_img.jpg) right 37px no-repeat;
position: relative;
}

h1 {
width: 930px;
height: 480px;
font-weight: bold;
margin: 0 auto;
z-index: 1;}

h1 span:first-child {
 font-size: 29px;
display: block;}

h1 span:nth-of-type(2){
 font-size: 23px; 
margin-top: 15px;
display: block;}

h1 span:nth-of-type(3){
font-size: 16px;
line-height: 1.3;
border: #191919 1px solid;
display: inline-block;
margin-top: 51px;
padding: 3px 10px 4px;
margin-right: 15px;}

h1 span:nth-of-type(4){
font-size: 54px;}

h1 span:nth-of-type(5){
font-size: 35px;
display: block;
margin-top: 15px;
}


.lead {
    width: 930px;
    margin: 60px auto 0;
}

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


/*-----　point　-----*/
.point {
width: 930px;
padding: 40px 90px;
margin: 0 auto 0;
background-color: #e5e5e5;
box-sizing: border-box;
display: table;}

.point p,
.point ul {
    display: table-cell;
vertical-align: middle;}

.point p {
    width: 200px;
    font-size: 18px;
    font-weight: bold;}

.point li {
    padding-left: 25px;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/check_icon.png) left top no-repeat;
    font-size: 16px;}

.point li + li {
    margin-top: 20px;
}

/*-----　.contentsNavi　-----*/
.contentsNavi {
    padding: 25px 0 50px;
    border-top: #bcbcbc 1px solid;
    border-bottom: #bcbcbc 1px solid;}

.contentsNavi div {
    width: 930px;
    margin: 0 auto;}

.contentsNavi p {
    text-align: center;
    font-size: 18px !important;
    font-weight: bold;
    color: #a7a7a7;
margin-bottom: 15px;}

.contentsNavi li a {
    font-size: 16px;
    display: block;
    padding-left: 20px;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/contents_arrow.png) left 50% no-repeat;}

.contentsNavi li a:hover {
    color: #4888b8;
}

.contentsNavi li a .icon {
    font-weight: bold;
    display: inline-block;
    width: 300px;}

.contentsNavi li a .icon span{
font-size: 16px;
line-height: 21px;
margin-right: 5px;
display: inline-block;
height: 22px;
padding: 0 12px 0 7px;
color: #fff;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/contents_icon.png) right 50% no-repeat;   
}

.contentsNavi li + li {
    margin-top: 17px;
}

/*==============================================
 バナー
============================================= */
.topbnr a{
position: absolute;
font-size: 13px;
line-height: 47px;
text-align: center;
color: #fff;
width: 370px;
height: 48px;
border-radius: 46px;
background-color: #191919;
top:420px;
left: 55px;
transition: 0.1s ease-in-out;}

.topbnr a:after{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;}

.topbnr a:hover{
background-color: #4888b8;}

.innerbnr a{
display: block;
width: 780px;
border: #191919 1px solid;
padding: 15px 40px;
box-sizing: border-box;
margin: 90px auto 0;
overflow: hidden;
transition: 0.1s ease-in-out;}

.innerbnr a:hover{
border: #4888b8 1px solid;
opacity: 0.8;
filter: alpha(opacity=80);}

.innerbnr a .item {
display: table;}

.innerbnr a .item .img,
.innerbnr a .item .info{
display: table-cell;
vertical-align: middle;}

.innerbnr a .item .img {
width: 200px;
text-align: right;}

.innerbnr a .item .info {
text-align: center;}

.innerbnr a .item .catch {
font-size: 16px;
font-weight: 600;}

.innerbnr a .item dt {
margin-top: 8px;
font-size: 36px;
font-weight: bold;}

.innerbnr a .item dd {
font-size: 14px;
line-height: 45px;
color: #fff;
width: 400px;
height: 46px;
border-radius: 46px;
background-color: #191919;
margin: 15px auto 0;
position: relative;
transition: 0.1s ease-in-out;}

.innerbnr a .item dd:after{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
}

.innerbnr a:hover .item dd{
background-color: #4888b8;
}

/*==============================================
#mainContents
============================================= */
.paragraph {
margin:110px auto 0;
}

.paragraphIn {
width: 930px;
margin:50px auto 0;}

.paragraph h2 {
width: 930px;
margin: 110px auto 0;
font-size: 25px;
font-weight: bold;}

.paragraph h2 .icon {
font-size: 30px;
display: block;
margin-bottom: 30px;}

.paragraph h2 .icon .bg {
display: inline-block;
color: #fff;
height: 43px;
line-height: 42px;
padding: 0 20px 0 10px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/h2_icon_bg.png) right 50% no-repeat; 
margin-right: 10px;
}

.paragraph h2 .icon .bg span {
    font-family: Arial, Helvetica, "sans-serif";
}

#article02,#article03,#article04,#matome {
 border-top: #bcbcbc 1px solid;
}

.paragraph h3 {
    margin-top: 80px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;}

/*----　reviewbox　----*/
.reviewbox{
padding: 50px 35px;
background-color: #fff;
background-image: url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/reviewbg_top.png) , url(https://img1.kakaku.k-img.com/images/article/tieup/25/12_mcnx500k/reviewbg_btm.png) ;
  background-position: 15px 15px, right bottom;
  background-repeat: no-repeat, no-repeat;}

.reviewbox.column1{
 padding: 60px 50px; }

.reviewbox.column1 .imgBox{
    margin-top: 40px;}

.reviewbox.column1 .imgBox .floatL,
.reviewbox.column1 .imgBox .floatR {width:405px;}

.reviewbox .title {
    font-size: 23px;
    font-weight: bold;
    margin-top: 50px;
    text-align: center;}

.reviewbox .title + p{
    margin-top: 30px;}

.reviewbox .name {
font-size: 17px;
font-weight: bold;
text-align: center;}

.reviewbox .img {
    margin: 15px 0;}

.reviewbox .img img {
    width: 100%;}

.column2 {
margin-top: 30px;
display: -webkit-flex;
display: flex;
justify-content:space-between;}

.column2 .reviewbox {
    width: 450px;
    box-sizing: border-box;}

.mtop80 {
margin-top: 80px !important;}

.profile {
padding: 30px;
background-color: #f2f2f2;
box-sizing: border-box;
display: table;}

.profile .img,
.profile dl{
display: table-cell;
vertical-align: middle;}

.profile .img {
    width: 130px;}

.profile dl {
    padding-left: 20px;
    box-sizing: border-box;}

.profile dt.name {
text-align: left;}

.profile dd {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.7;
}



/*----　画像　----*/
.w560 {width: 560px;}

.imgBox {margin:80px auto 0;}

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

/*----- 動画 -----*/
.movBox { 
margin: 80px auto 0;
}
.movIcon span {
background: #333;
padding: 4px 7px 3px;
color: #fff;
line-height: 140%;
font-size: 13px;
display: inline-block;
margin-bottom: 5px;
}
.movBox .mov video {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.mov .movTxt {
font-size: 13px;
line-height: 1.5;}

.movBox.floatR {
width: 450px;
height: auto;
vertical-align: bottom;
margin-top: 0 !important;}


/*==============================================
#matome
============================================= */
#matome.paragraph {
padding-bottom: 80px;}

#matome h2 .icon {
    display: none;}

#matome .paragraphIn img {
    float: right;
    margin: 10px 0 0 30px;
}

/*==============================================
.productBox
============================================= */
.productBox {
    width: 930px;
    margin: 80px auto 0;
}

.productBox a.item01,
.productBox .item02 a{
border: #191919 1px solid;
    box-sizing: border-box;}

.productBox a.item01{
    display: table;
    padding: 30px 50px;}

.productBox .item02 {
margin-top: 30px;
 display: -webkit-flex;
display: flex;
justify-content:space-between;   
}

.productBox .item02 a {
text-align: center;
padding: 30px;}

.productBox a.item01 .img,
.productBox a.item01 .info{
    display: table-cell;
    vertical-align: middle;}

.productBox a.item01{
    display: block;
    width: 930px;
    transition: 0.1s ease-in-out;}

.productBox .item02 a {
    display: block;
    width: 450px;
    transition: 0.1s ease-in-out;}

.productBox a:hover{ 
    border: #4888b8 1px solid;
opacity: 0.8;
filter: alpha(opacity=80);}

.productBox a.item01 .info,
.productBox .item02 a .info{
    text-align: center;}

.productBox .item02 a .info {
    margin-top: 20px;}

.productBox a.item01 .info .catch,
.productBox .item02 a .info .catch{
    font-size: 16px}

.productBox a.item01 .info dt,
.productBox .item02 a .info dt{
    font-size: 42px;
    font-weight: bold;
    margin-top: 15px;}

.productBox a.item01 .info dd,
.productBox .item02 a .info dd{
font-size: 14px;
line-height: 45px;
color: #fff;
height: 46px;
border-radius: 46px;
background-color: #191919;
margin: 15px auto 0;
position: relative;
transition: 0.1s ease-in-out;}

.productBox a.item01 .info dd{width: 400px;}
.productBox .item02 a .info dd{width: 390px;}

.productBox a.item01 .info dd:after,
.productBox .item02 a .info dd:after{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
}

.productBox a:hover.item01 .info dd,
.productBox .item02 a:hover .info dd{
background-color: #4888b8;
}

/*==============================================
.annotation
============================================= */
.annotation {
    width: 930px;
    margin: 50px auto 0;}

.annotation li{
    font-size: 13px;
    line-height: 1.6;
    padding-left: 2em; 
  text-indent: -2em; 
}

.annotation li + li {
    margin-top: 5px;
}

/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 11px; 
color: #333;
width: 930px; 
padding-bottom: 100px;
margin: 30px auto 0; 
text-align: right;}