@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,
.spimg{
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,
.productBoxIn a{
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.2;}

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


#mainContents p + p {
margin-top: 30px;}

sup {
font-size: 60%;
vertical-align: top;
position: relative;
top: 0.3em;
}

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

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

.mainTitleWrap {
width: 100%;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/top_bg.jpg) center top no-repeat;
}

h1 {
margin: 0 auto;
width: 962px;
height: 565px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/pc_title.png) right 140px no-repeat;
text-indent: -999em;
font-size: 0;
z-index: 1;
}

.lead {
width: 840px;
margin: 0 auto 0;
padding-top: 35px;
}

.lead a:link,
.lead a:visited {
color: #01a982;
text-decoration: underline;
transition: 0.1s ease-in-out;
}

.lead a:hover,
.lead a:active {
color: #fdd138;
}

.mainTitle .annotation {
width: 840px;
margin: 0 auto;
text-align: right;
font-size: 12px !important;}

/*--アンカーリンク--*/
.contentsNavi {
background-color: #f2f2f2;
width: 1030px;
margin: 60px auto 0;
border-radius: 30px;
padding: 40px 0;}

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

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

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

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

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

.contentsNavi div a:hover {
color: #fdd138;
}

.contentsNavi div a span {
font-weight: bold;
display: inline-block;
width: 130px;}

/*==============================================
バナー
============================================= */
.textbnr a{
display: block;
width: 530px;
height: 56px;
font-size: 15px;
line-height: 56px;
border-radius: 60px;
color: #fff;
text-align: center;
background: #01a982 url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/arrow.svg) 505px 50% no-repeat;
margin: 50px auto 0;
overflow: hidden;
transition: 0.1s ease-in-out;
}

.textbnr a:hover {
background: #fdbe38 url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/arrow.svg) 505px 50% no-repeat;
}

.paragraph .textbnr a{margin: 85px auto 0;}


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

.innerbnr a:hover {
opacity: 0;	}

.innerbnr .bnr{
width: 840px;
height: 194px;
margin: 90px auto 0;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/banner_over.png) left top no-repeat;}

/*==============================================
#mainContents
============================================= */
.paragraph {
width: 840px;
margin: 120px auto 0;}

.paragraph h2 {
font-size: 23px;
padding:7px 0 0 30px;
min-height: 78px;
font-weight: 600;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/h2_icon.png) left top no-repeat;}

.paragraph h2 .icon {
font-size: 27px;
font-weight: bold;
padding-bottom: 15px;
display: block;}

.paragraph h3 {
margin: 90px 0 50px;
font-size: 23px;
font-weight: 600;
padding-left: 30px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/h3_icon.png) left 50% no-repeat;
}

.paragraphIn {
margin-top: 50px;
}


/*----　画像　----*/
.w600 {width: 600px;}

.imgBox {margin:80px auto 0;}

.imgBox div {overflow: hidden;}

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

.imgBox.col4 .floatL {width:200px;}

.imgBox.col4 .floatL + .floatL {
margin-left: 13px;}

.imgBox.col3 .photo {
float: left;
width: 410px;}

.imgBox.col3 div.col2 {
float: right;
width: 415px;
overflow: hidden;}

.imgBox.col3 div.col2 .item01 {
width: 200px !important;
float: left;}

.imgBox.col3 div.col2 .item02 {
width: 200px !important;
float: right;}


.border {
border: #e1e1e1 1px solid;
box-sizing: border-box;
}

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

a.floatL + .cap,
a.floatR + .cap{
margin-top: 0;}

.imgBox + p {
margin-top: 80px;}

.arrangeR {
float: right;
margin: 0 0 10px 20px;
}

/*==============================================
.productBox
============================================= */
.productBoxIn a{
display: table;
width: 840px;
margin: 80px auto 0;
background-color: #01a982;
border-radius: 30px;
padding: 70px 70px 50px 87px;
box-sizing: border-box;
transition: 0.1s ease-in-out;
}

.productBoxIn a .img,
.productBoxIn a .info {
display: table-cell;
vertical-align: top;}

.productBoxIn a .img {
width: 335px;}

.productBoxIn a .info {
width: 345px;
}

.productBoxIn a .name {
height: 200px;
text-indent: -999em;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/prd_name.png) center 45px no-repeat;}


.productBoxIn a .btn {
width: 345px;
height: 46px;
border-radius: 46px;
text-align: center;
font-size: 15px;
line-height: 46px;
color: #01a982;
font-weight: 600;
background: #fff url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/arrow02.svg) 325px 50% no-repeat;
transition: 0.1s ease-in-out;
} 

.productBoxIn a:hover .btn {
color: #fff;
background: #fdd138 url(https://img1.kakaku.k-img.com/images/article/tieup/25/07_hpe/arrow02_over.svg) 325px 50% no-repeat;
}

/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 11px; 
color: #333;
width: 840px; 
margin: 40px auto 20px; 
text-align: right;}


.questionnaireInner {
width: 840px !important;
}

/*==============================================
.link
============================================= */
.link {
font-size: 13px;
width: 840px;
text-align: right;
margin: 0 auto;
padding-bottom: 100px;
}

.link a:link,
.link a:visited {
color: #01a982;
text-decoration: underline;
transition: 0.1s ease-in-out;
}

.link a:hover,
.link a:active {
color: #fdd138;
}