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


.paragraph {
	width: 1230px;
	margin: 0 auto 0;
	padding: 120px 0 0;
	background-color: #fff;}

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

.bggray {
	width: 100%;
	margin: 0 auto;
	background-color: #eaefef;
	padding-bottom: 110px;
	border-bottom: #fff 2px solid;
}

.sponly {
	display: none;}

/*---- 文字　 ----*/
#mainContents .paragraph,
#mainContents .mainTitleWrap,
table th,table td,
.productBox .productBoxIn{
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.08em;}

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

#mainContents .cap{
	font-size: 116%;
	line-height: 1.8;}

#mainContents .capS{
	font-size: 82%;
	line-height: 1.8;}

#mainContents .indent1{
padding-left:1em;
text-indent:-1em;}

#mainContents .indent2{
padding-left:1.5em;
text-indent:-1.5em;}

.cap + .capS,
.capS + .capS{margin-top: 8px !important;}


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

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

.marker {
font-weight: bold;
background:linear-gradient(transparent 60%, #d6d6d6 60%);	
}

/*==============================================
看板
============================================= */
.mainTitleWrap {
width: 1230px;
background-color: #fff;
margin: 0 auto;
}
.mainTitle {
width: 1230px;
margin: 0 auto;}

h1 {
width: 1230px;
height: 684px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/pc_title.jpg) left top no-repeat;
text-indent: -999em;
font-size: 0;
z-index: 1;}

.lead {
	width: 930px;
	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: 930px;
	margin: 0 auto 0;
display: flex;}

.contentsNavi .blue{color: #19a4c2;}
.contentsNavi .green{color: #53ae43;}

.contentsNavi a {
	float: left;
	width: 230px;
padding: 160px 20px 20px;
box-sizing: border-box;
font-size: 15px;
line-height: 1.6;
transition: 0.2s ease-in-out;}

.contentsNavi a span {
	display: block;
font-size: 18px;
font-weight: bold;
/*letter-spacing: 0.09em;*/
padding-bottom: 12px;
text-align: center;}

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

.contentsNavi a.item01{
	background:#eaefef url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor01.jpg) left top no-repeat;}
.contentsNavi a.item02{
	background:#eaefef url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor02.jpg) left top no-repeat;}
.contentsNavi a.item03{
	background:#eaefef url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor03.jpg) left top no-repeat;}
.contentsNavi a.item04{
	background:#eaefef url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor04.jpg) left top no-repeat;}

.contentsNavi a:hover.item01{
	background:#b3e8f4 url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor01.jpg) left top no-repeat;
opacity: 0.8;
filter: alpha(opacity=80);}
.contentsNavi a:hover.item02{
	background:#b3e8f4 url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor02.jpg) left top no-repeat;
opacity: 0.8;
filter: alpha(opacity=80);}
.contentsNavi a:hover.item03{
	background:#b3e8f4 url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor03.jpg) left top no-repeat;
opacity: 0.8;
filter: alpha(opacity=80);}
.contentsNavi a:hover.item04{
	background:#b3e8f4 url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/anchor04.jpg) left top no-repeat;
opacity: 0.8;
filter: alpha(opacity=80);}

/*==============================================
 バナー
============================================= */
.topbnr a{
display: block;
width: 624px;
height: 80px;
color: #fff;
font-size: 15px;
line-height: 80px;
font-weight: bold;
text-align: center;
background: #036ca7;
background-size: 8px;
margin: 40px auto 80px;
overflow: hidden;
transition: 0.2s ease-in-out;
position: relative;}

.topbnr a:hover{
background-color: #4fcbe6;}

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

.innerbnr a{
display: block;
width: 930px;
height: 180px;
margin: 90px auto 0;
text-indent: -9999px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/innerbnr.jpg) left top no-repeat;
overflow: hidden;
transition: 0.1s ease-in-out;}

.innerbnr a:hover {
opacity: 0;	}

.innerbnr .bnr{
width: 930px;
height: 180px;
margin: 90px auto 0;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/innerbnr_over.jpg) left top no-repeat;}




/*==============================================
#mainContents
============================================= */
.paragraph h2{
height: 273px;
font-size: 27px;
line-height: 1.7;
font-weight: bold;
color: #fff;
padding: 60px 150px 0;
box-sizing: border-box;
letter-spacing: 0.08em;}

#article01 h2 {
padding: 40px 150px 0;	
}

.paragraph h2 .icon {
font-size: 33px;
display: block;
padding-bottom: 10px;}

#article01 h2{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/h2_01.jpg) left top no-repeat;}
#article02 h2{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/h2_02.jpg) left top no-repeat;}
#article03 h2{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/h2_03.jpg) left top no-repeat;}
#matome h2{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/h2_04.jpg) left top no-repeat;}

.blue{color: #4fcbe6;}
.green{color: #86ef74;}

.paragraph h3 {
	background-color: #282f33;
	padding: 8px 18px;
	color: #fff;
	font-size: 28px;
	line-height: 1.7;
	font-weight: bold;
	margin: 90px 0 60px;
}

.paragraph .subtitle {
	border-left: #282f33 8px solid;
	padding-left: 10px;
	font-size: 24px;;
	line-height: 1.5;
	font-weight: bold;
	margin-top: 80px;}

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

.paragraph .floatL .subtitle,
.paragraph .floatR .subtitle{
	margin-bottom: 15px;}

.paragraph .floatL .subtitle,
.paragraph .floatR .subtitle {
	margin-top: 0 !important;}

.imgBox .floatL,
.imgBox .floatR{
	position: relative;
}

.subtxt01,
.subtxt02{
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	padding: 3px 15px 2px;
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
}


.subtxt01 {
	background-color: #4fcbe6;}

.subtxt02 {
	background-color: #595959;}

/*----　画像　----*/
.mtop10 {
	margin-top: 10px;}

.w600{width: 600px;}
.w800{width: 800px;}

.imgBox {margin:80px auto 0;}

.imgBox div {overflow: hidden;}

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

.w420 .floatL {width: 420px;}
.w420 .floatR {width: 490px;}

.w490 .floatL {width: 490px;}
.w490 .floatR {width: 420px;}

.w360 .floatL {width: 360px;}
.w360 .floatR {width: 550px;}

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

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

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


/*==============================================
.productBox
============================================= */
.productBox {
	background-color: #fff;
	width: 1230px;
	margin: 0 auto 0;
	padding: 50px 0 100px;}

.productBoxIn {
	width: 930px;
	margin: 90px auto 0;}

.productBoxIn .prdtit {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 25px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/prd_tit_bg.png) center bottom no-repeat;
}

.productBoxIn .itemBox {
	width: 930px;
margin-top: 80px;
overflow: hidden;}

.productBoxIn .itemBox a {
	width: 290px;
	float: left;
text-align: center;
transition: 0.2s ease-in-out;}

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

.productBoxIn .itemBox a + a {
	margin-left: 30px;}

.productBoxIn .itemBox .name {
	text-indent: -999em;
	height: 93px;
margin-top: 24px;}

.productBoxIn .itemBox a.item01 .name {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/prd_name01.png) center top no-repeat;}

.productBoxIn .itemBox a.item02 .name {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/prd_name02.png) center top no-repeat;}

.productBoxIn .itemBox a.item03 .name {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/06_panasonic/prd_name03.png) center top no-repeat;}

.productBoxIn .itemBox a .btn br {
	display: none;}

.productBoxIn .itemBox a .btn {
	background-color: #036ca7;
	position: relative;
	height: 50px;
	font-size: 14px;
	line-height: 50px;
	font-weight: bold;
	color: #fff;
	transition: 0.2s ease-in-out;
}

.productBoxIn .itemBox a .btn:after {
content: '';
width: 8px;
height: 8px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
left:260px;
margin: auto;
}

.productBoxIn .itemBox a:hover .btn{
	background-color: #4fcbe6;}

/* 注釈 */
.annotation {
margin-top: 60px;}

.annotation li {
font-size: 12px;
line-height: 1.5;
padding-left:2.1em;
text-indent:-2.1em;}

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

/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 11px; 
letter-spacing: 0;
font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
color: #333;
width: 1230px; 
margin: 0 auto 0;
padding: 70px 0 0;
text-align: right;}