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



/*==============================================
 .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:'游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 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;
}



.marker {
font-weight: bold;
background-color: #f8dada;
}


/*==============================================
ボーダーでカッコをつくる
============================================= */
/* 鍵かっこ */
.border {
    position: relative;
    padding: 1rem;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

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

.border::before {
    border-left: solid 3px;
    border-top: solid 3px;
    top: 0;
    left: 0;
}

.border::after {
    border-right: solid 3px;
    border-bottom: solid 3px;
    bottom: 0;
    right: 0;
}


/*==============================================
看板
============================================= */

.mainTitleWrap {
width: 100%;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/top_bg.jpg) center top no-repeat;
padding-bottom: 40px;
}
.mainTitle {
width: 840px;
margin: 0 auto;
}

h1 {
width: 840px;
height: 553px;
text-indent: -999em;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/pc_title.png) center 186px no-repeat;
font-size: 0;
z-index: 1;
}

.lead {
    padding: 50px 0;
}

.lead a:link,
.lead a:visited {
color: #cd0505;
text-decoration: underline;
font-weight: bold;
}
.lead a:hover,
.lead a:active {
color: #f20000;
text-decoration: none;
}

/*----　contentsNavi　----*/
.contentsNavi {
    background-color: #f5f5f6;
    padding: 30px 0;}

.contentsNavi div {
    width: 840px;
    margin: 0 auto;
    display: table;}

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

.contentsNavi div p {
width: 130px;
text-indent: -999em;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/index_tit.png) left 50% no-repeat;
}

.contentsNavi div ul li a {
display: block;
font-size: 16px;
transition: 0.1s ease-in-out;
}

.contentsNavi div ul li a:hover{
color: #cd0505;}


.contentsNavi div ul li a span {
    font-weight: bold;
    display: inline-block;
    text-align: center;
    width: 100px;
    color: #fff;
    padding: 5px 0;
    margin-right: 20px;
    background-color: #181818;
    transition: 0.1s ease-in-out;}

.contentsNavi div ul li a:hover span{
    background-color: #cd0505;}

.contentsNavi div ul li + li {
    margin-top: 8px;}

/*==============================================
 バナー
============================================= */
.topbnr a{
display: block;
width: 560px;
height: 62px;
background: #cd0505 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 540px 50% no-repeat ;
color: #fff;
font-size: 16px;
line-height: 62px;
font-weight: bold;
text-align: center;
margin: 50px auto 0;
overflow: hidden;
border-radius: 5px;
transition: 0.1s ease-in-out;}

.topbnr a:hover{
background:#f20000 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 540px 50% no-repeat; }


.innerbnr a{
display: block;
width: 840px;
height: 192px;
margin: 90px auto;
text-indent: -9999px;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/inner_bnr.png) no-repeat;
overflow: hidden;
transition: 0.1s ease-in-out;}

.innerbnr a:hover {
opacity: 0;	}

.innerbnr .bnr{
width: 840px;
height: 192px;
margin: 90px auto 0;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/inner_bnr_over.png) no-repeat;}


/*==============================================
#mainContents
============================================= */
.paragraph {
padding: 50px 0 90px; }

#article02,
#article04,
.bggray{background-color: #f5f5f6;}

.bggray {
    border-bottom: #fff 2px solid;
}

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

/*----　h2　----*/
.paragraph h2{
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}

.paragraph h2 .icon {;
    font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
    font-size: 28px;
    color: #fff;
    background-color: #181818;
    padding: 13px 0;
    width: 145px;
    display: inline-block;}

.paragraph h2 .text {
    display: block;
    padding-top: 30px;
    line-height: 1.7;
}

/*----　h3　----*/
.paragraph h3 {
font-size: 23px;
position: relative;
font-weight: bold;
text-align: center;
padding: 15px 0;
margin: 100px 0 50px;}

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

.paragraph h3::before {
border-left: solid 5px #cd0505;
border-top: solid 5px #cd0505;
top: 0;
left: 0;}

.paragraph h3::after {
border-right: solid 5px #cd0505;
border-bottom: solid 5px #cd0505;
bottom: 0;
right: 0;}

/*----　subtitle　----*/
.paragraph .subtitle {
margin: 80px 0 15px;
border-left: #cd0505 5px solid;
padding-left: 10px;
font-size: 20px;
font-weight: bold;
}

.paragraph .subtitle + .imgBox {
    margin-top: 0;
}

/*----　注釈　----*/
.paragraph .annotation,
.productBox .annotation {
    margin-top: 50px;}

.paragraph .annotation li,
.productBox .annotation li{
    font-size: 12px;
    line-height: 1.7;
  padding-left: 2em;
  text-indent: -2em;}

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

.paragraph .annotation a,
.productBox .annotation a{color: #2a51e4;
text-decoration: underline;}


/*----　画像　----*/
.w580 {width: 580px;}
.w660{width: 660px;}

.imgBox {margin:80px auto 0;}
.imgBox div {overflow: hidden;}

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

.imgBox.w459 .floatL {width: 459px;}
.imgBox.w459 .floatR {width: 361px;}

.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: 80px;
}

/*----　column　----*/
.column{
    width: 840px;
    background-color: #fff;
    box-shadow: 5px 5px 3px #d1d1d2;
    margin: 0 auto;
    padding: 75px;
    box-sizing: border-box;
}

.column .paragraphIn{
    width: 690px !important; 
    box-sizing: border-box;
    margin-top: 50px !important;
}

.column h2 .icon {;
    font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
    font-size: 23px;
    color: #fff;
    background-color: #181818;
    padding: 12px 0 13px;
    width: 100px;
    display: inline-block;}

.column h2 .text {
    display: block;
    padding-top: 30px;
    line-height: 1.7;
}

.column a {
display: table;
width: 600px;
margin: 20px auto 0;
transition: 0.1s ease-in-out;}

.column a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}

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

.column a .img {
    width: 300px;}

.column a .info {
    width: 300px;
    text-align: center;}

.column a .info .btn{
font-size: 15px;
line-height: 48px;
font-weight: bold;
color: #fff;
margin: 15px auto 0;
width:270px;
background:#cd0505 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 250px 50% no-repeat; 
border-radius: 5px;
height: 48px;
transition: 0.1s ease-in-out;
}


.column a:hover .info .btn { 
background:#f20000 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 250px 50% no-repeat; 
}


/*----　まとめ　----*/
#matome .paragraphIn {
    display: table;}

#matome .paragraphIn .text,
#matome .paragraphIn .img{
    display: table-cell;
    vertical-align: top;}

#matome .paragraphIn .text {
    width: 540px;
padding-right: 40px;
box-sizing: border-box;}

#matome .paragraphIn .img {
    width: 300px;
}

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

.productBox .prdtitle {
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
margin-bottom: 50px;}

.productBox .productBoxIn div{
    overflow: hidden;}

.productBox .productBoxIn div +div {
    margin-top: 20px;}

.productBox .productBoxIn a {
    display: block;
    width: 410px;
    padding: 38px 0;
    text-align: center;
    float: left;
background-color: #fff;
border: #fff 2px solid;
box-sizing: border-box;
transition: 0.1s ease-in-out;}

.productBox .productBoxIn a:hover {
    border: #f20000 2px solid;
    opacity: 0.8;
filter: alpha(opacity=80);
}

.productBox .productBoxIn a + a {
    margin-left: 20px;}

.productBox .productBoxIn a .catch{
    margin-top: 20px;
    font-size: 17px;
font-weight: bold;}

.productBox .productBoxIn a .name {
    margin-top: 10px;}

.productBox .productBoxIn a .btn {
font-size: 15px;
line-height: 48px;
font-weight: bold;
color: #fff;
margin: 15px auto 0;
width: 300px;
background:#cd0505 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 280px 50% no-repeat; 
border-radius: 5px;
height: 48px;
transition: 0.1s ease-in-out;
}

.productBox .productBoxIn a:hover .btn { 
background:#f20000 url(https://img1.kakaku.k-img.com/images/article/tieup/25/03_gx7130/arrow.svg) 280px 50% no-repeat; 
}

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