@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:wght@100;300;400;500;700;900&display=swap');



body.lock{
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}
.s5-emergencyInfo {
margin: 20px 0 35px 0;
}



/* ==============================================
setting
============================================== */

#bravia-feature *{
font-family: 'Roboto','Noto Sans JP',Meiryo,sans-serif;
font-weight:300;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.5px;
color:#FFF;
margin:0;
padding:0;
box-sizing: border-box;
}
#bravia-feature img{
width: 100%;
height: auto;
border:none;
vertical-align:top;
}
#bravia-feature ul{
list-style:none;
}
#bravia-feature ul:after{
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature a{
text-decoration:none;
}



#bravia-feature .pc{
display:none!important;
}
#bravia-feature .rp{
display:none!important;
}



/* ==============================================
#bravia-feature
============================================== */

#bravia-feature{
background: #000;
margin: -15px 0 0 0;
padding: 0 0 60px 0;
}
#bravia-feature.xr90,
#bravia-feature.xr80,
#bravia-feature.xr70,
#bravia-feature.xr50,
#bravia-feature.a95l{
overflow: hidden;
padding: 0 0 60px 0;
}



/* ==============================================
#bravia-feature #hero
============================================== */

#bravia-feature #hero .inner h1{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 32px;
letter-spacing: 4px;
text-align: center;
}



/* ==============================================
#bravia-feature #list
============================================== */

#bravia-feature #list .inner #tab{
position: sticky;
top: 0;
z-index: 2;
}
#bravia-feature #list .inner #tab ul{
padding: 16px 16px 0 16px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
#bravia-feature #list .inner #tab ul li{
float: left;
width: 50%;
}
#bravia-feature #list .inner #tab ul li a{
font-size: 12px;
line-height: 16px;
display: block;
height: 44px;
text-align: center;
color: #bbb;
border-radius: 22px 0 0 22px;
padding: 5px 0 0 4px;
background: linear-gradient(0deg, #333 0%, #111 100%);
}
#bravia-feature #list .inner #tab ul li:last-child a{
border-radius: 0 22px 22px 0;
padding: 5px 4px 0 0;
}
#bravia-feature #list .inner #tab ul li.select a{
color: #ffffff;
background: linear-gradient(0deg, #222 0%, #555 100%);
position: relative;
z-index: 1;
pointer-events: none;
}



/* ==============================================
#bravia-feature .lineup
============================================== */

#bravia-feature .lineup{
position: relative;
}
#bravia-feature .lineup.off{
display: none;
}



#bravia-feature .lineup p.link{
margin: 12px 0 -10px 16px;
}
#bravia-feature .lineup p.link a{
font-size: 12px;
line-height: 16px;
}
#bravia-feature .lineup p.link a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 8px;
}



#bravia-feature .lineup h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 18px;
line-height: 28px;
text-align: center;
letter-spacing: 2px;
position: relative;
z-index: 1;
padding: 35px 0 0 0;
margin: 0 0 -25px 0;
}



#bravia-feature .lineup .main{
padding: 0 16px;
}
#bravia-feature .lineup .main .item{
margin: 60px 0 0 0;
}
#bravia-feature .lineup .main .item .model{
font-size: 12px;
line-height: 16px;
letter-spacing: 1px;
border: solid 1px #444444;
text-align: center;
height: 23px;
padding: 3px 0 0 0;
margin: 0 0 14px 0;
position: relative;
}
#bravia-feature .lineup .main .item .model span{
font-size: 13px;
line-height: 23px;
font-weight: 500;
position: absolute;
top:-1px;
left: -1px;
width: 40px;
height: 23px;
display: block;
background: #fff;
color: #222;
}
#bravia-feature .lineup .main .item h3{
font-size: 14px;
line-height: 20px;
text-align: center;
}
#bravia-feature .lineup .main .item h3 img{
width: auto;
height: 24px;
display: block;
margin: 12px auto 10px auto;
}
#bravia-feature #lineup-02 .main .item h3 img{
height: 20px;
margin: 10px auto 12px auto;
}
#bravia-feature .lineup .main .item h3 span{
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
#bravia-feature .lineup .main .item h3 strong{
font-size: 24px;
line-height: 28px;
letter-spacing: 1px;
display: block;
padding: 8px 0 0 0;
}
#bravia-feature .lineup .main .item ul{
text-align: center;
padding: 12px 0 0 0;
}
#bravia-feature .lineup .main .item ul li{
font-size: 12px;
line-height: 16px;
display: inline-block;
width: 48px;
height: 24px;
background: #333333;
text-align: center;
padding: 4px 0 0 0;
margin: 0 1px 0 0;
}
#bravia-feature .lineup .main .item figure{
padding: 24px 0 0 0;
}
#bravia-feature .lineup .main .item figure img{
filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
}
#bravia-feature #lineup-02 .main .item figure img{
filter: none;
}
#bravia-feature .lineup .main .item figure span{
display: block;
font-size: 10px;
line-height: 12px;
opacity: 0.8;
text-align: center;
margin: 4px 0 0 0;
}
#bravia-feature .lineup .main .item figure + p{
text-align: center;
padding: 16px 0 0 0;
}
#bravia-feature #lineup-02 .main .item figure + p{
text-align: justify;
padding: 0;
margin: -10px 0 0 0;
}
#bravia-feature .lineup .main .item .button{
padding: 20px 0 0 0;
}
#bravia-feature .lineup .main .item .button:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature .lineup .main .item .button a{
font-size: 15px;
line-height: 20px;
font-weight: 400;
text-align: center;
color: #222;
display: block;
height: 44px;
padding: 11px 0 0 0;
border-radius: 4px;
background: linear-gradient(-60deg, #999 0%, #fff 100%);
}
#bravia-feature .lineup .main .item .button a:first-child{
font-weight: 300;
color: #fff;
background: linear-gradient(-60deg, #735f32 0%, #c8aa78 100%);
margin: 0
}
#bravia-feature #lineup-02 .main .item:nth-child(1) .button a:first-child{
background: linear-gradient(-60deg, #003434 0%, #007f80 100%);
}
#bravia-feature #lineup-02 .main .item:nth-child(2) .button a:first-child{
background: linear-gradient(-60deg, #00153e 0%, #003297 100%);
}
#bravia-feature #lineup-02 .main .item:nth-child(3) .button a:first-child{
background: linear-gradient(-60deg, #3e3b28 0%, #989062 100%);
}
#bravia-feature #lineup-02 .main .item:nth-child(4) .button a:first-child{
background: linear-gradient(-60deg, #151515 0%, #323232 100%);
}
#bravia-feature .lineup .main .item .voice{
text-align: center;
margin: 8px 0 0 0;
}
#bravia-feature .lineup .main .item .voice a{
font-size: 12px;
line-height: 16px;
}
#bravia-feature .lineup .main .item .voice a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 6px 11px;
width: 6px;
height: 11px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 4px;
}



#bravia-feature .lineup .sub + h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 18px;
line-height: 24px;
letter-spacing: 1px;
text-align: center;
padding: 60px 0 0 0;
}
#bravia-feature .lineup .sub{
display:flex;
flex-wrap:wrap;
padding: 0 16px;
}
#bravia-feature .lineup .sub:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature .lineup .sub .item{
float: left;
width: calc(50% - 6px);
margin: 60px 12px 0 0;
padding: 0 0 236px 0;
position: relative;
}
#bravia-feature .lineup .sub .item:nth-child(2n){
margin: 60px 0 0 0;
}
#bravia-feature .lineup .sub .item .model{
font-size: 12px;
line-height: 16px;
letter-spacing: 1px;
border: solid 1px #444444;
text-align: right;
height: 23px;
padding: 3px 8px 0 0;
margin: 0 0 10px 0;
position: absolute;
top: -36px;
left: 0;
width: 100%;
}
#bravia-feature .lineup .sub .item .model span{
font-size: 13px;
line-height: 23px;
font-weight: 500;
text-align: center;
position: absolute;
top:-1px;
left: -1px;
width: 40px;
height: 23px;
display: block;
background: #fff;
color: #222;
}
#bravia-feature .lineup .sub .item h3{
font-size: 12px;
line-height: 16px;
text-align: center;
}
#bravia-feature .lineup .sub .item h3 img{
width: auto;
height: 12px;
display: block;
margin: 8px auto 6px auto;
}
#bravia-feature .lineup .sub .item h3 strong{
font-size: 16px;
line-height: 20px;
display: block;
padding: 4px 0 0 0;
}
#bravia-feature .lineup .sub .item h3 span{
font-size: 12px;
line-height: 20px;
display: block;
}
#bravia-feature .lineup .sub .item ul{
text-align: center;
padding: 8px 0 0 0;
}
#bravia-feature .lineup .sub .item ul li{
font-size: 11px;
line-height: 16px;
display: inline-block;
width: 40px;
height: 20px;
background: #333333;
text-align: center;
padding: 3px 0 0 0;
margin: -1px 1px 0 0;
}
#bravia-feature .lineup .sub .item figure{
padding: 16px 0 0 0;
}
#bravia-feature .lineup .sub .item figure img{
filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
}
#bravia-feature #lineup-02 .sub .item figure img{
filter: none;
}
#bravia-feature #lineup-02 h2 + .sub .item figure img{
filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
}
#bravia-feature .lineup .sub .item figure + p{
font-size: 12px;
line-height: 20px;
text-align: justify;
padding: 4px 0 0 0;
}
#bravia-feature #lineup-02 .sub .item figure + p{
padding: 12px 0 0 0;
}
#bravia-feature .lineup .sub .item .button{
position: absolute;
bottom: 180px;
left: 0;
width: 100%;
}
#bravia-feature .lineup .sub .item .button a{
font-size: 15px;
line-height: 20px;
font-weight: 400;
text-align: center;
color: #222;
display: block;
height: 44px;
padding: 11px 0 0 0;
border-radius: 4px;
background: linear-gradient(-60deg, #999 0%, #fff 100%);
}
#bravia-feature #lineup-02 .main + .sub .item:nth-child(1) .button a:first-child{
color: #fff;
background: linear-gradient(-60deg, #530d11 0%, #cc2029 100%);
}
#bravia-feature #lineup-02 .main + .sub .item:nth-child(4) .button a:first-child{
background: linear-gradient(-60deg, #84c5f3 0%, #abd0ea 100%);
}



#bravia-feature .lineup .item .store{
margin: 10px 0 0 0;
}
#bravia-feature .lineup .sub .item .store{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
#bravia-feature .lineup .item .store .s5-sonyStoreCustom{
background: #333;
padding: 0 15px 15px 15px;
}
#bravia-feature .lineup .sub .item .store .s5-sonyStoreCustom{
padding: 0 10px;
height: 170px;
}
#bravia-feature .lineup .item .store .s5-sonyStoreCustom__text{
display: block;
padding: 12px 0 8px 0;
font-size: 12px;
line-height: 20px;
}
#bravia-feature .lineup .sub .item .store .s5-sonyStoreCustom__text{
letter-spacing: 0;
padding: 8px 0 6px 0;
}
#bravia-feature .lineup .item .store .s5-listItem4__storePrice{
font-size: 24px;
line-height: 24px;
display: inline-block;
vertical-align: middle;
margin: -6px 0 12px 0;
}
#bravia-feature .lineup .sub .item .store .s5-listItem4__storePrice{
font-size: 20px;
line-height: 20px;
margin: -6px 0 8px 0;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeUnit{
font-size: 11px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 0 12px 0;
}
#bravia-feature .lineup .sub .item .store .s5-listItem4__storeUnit{
margin: 0 0 8px 0;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved{
display: table;
width: 100%;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved span{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 13px;
line-height: 16px;
letter-spacing: 0;
font-weight: 400;
color: #222;
height: 44px;
padding: 0 2px 0 2px;
}
#bravia-feature .lineup .sub .item .store .s5-listItem4__storeSaved span{
font-size: 11px;
line-height: 13px;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved span::before{
top: -6px;
}
#bravia-feature .lineup .sub .item .store .s5-listItem4__storeSaved span br{
display: none;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved strong{
display: inline-block;
font-size: 13px;
line-height: 16px;
letter-spacing: 0;
font-weight: 700;
color: #222;
}
#bravia-feature .lineup .sub .item .store .s5-listItem4__storeSaved strong{
font-size: 11px;
line-height: 13px;
}
#bravia-feature .lineup .item .store .s5-storeDiscountButton{
width: 100%;
height: 44px;
border-radius: 4px;
font-size: 13px;
line-height: 16px;
letter-spacing: 0;
color: #222;
font-weight: 400;
background: linear-gradient(-60deg, #999 0%, #fff 100%);
padding: 0 4px;
border: none;
}
#bravia-feature .lineup .sub .item .store .s5-storeDiscountButton{
font-size: 11px;
line-height: 15px;
}
#bravia-feature .lineup .item .store .s5-storeButton{
width: 100%;
height: 44px;
border-radius: 4px;
text-align: center;
padding: 9px 0 0 0;
margin: 10px 0 0 0;
background: linear-gradient(-60deg, #962800 0%, #d24615 100%);
border: none;
}



#bravia-feature .lineup ul.link{
padding: 30px 60px 0 60px;
}
#bravia-feature .lineup ul.link li{
margin: 10px 0 0 0;
}
#bravia-feature .lineup ul.link li a{
font-size: 15px;
line-height: 20px;
display: block;
height: 44px;
border: solid 1px #666666;
border-radius: 4px;
text-align: center;
padding: 10px 0 0 0;
}
#bravia-feature .lineup ul.link li a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 8px;
}



/* ==============================================
#bravia-feature #floating
============================================== */

#bravia-feature #floating{
height: 44px;
}
#bravia-feature #floating .inner{
position: relative;
width: 100%;
height: 44px;
background: #000;
border-bottom: 1px solid #444444;
z-index: 2;
}
#bravia-feature #floating .inner.floating{
position: fixed;
top:0;
left: 0;
}
#bravia-feature #floating .inner h2 {
font-size: 19px;
line-height: 19px;
text-align: right;
position: absolute;
top:0;
left: 0;
width: 66px;
height: 44px;
padding: 12px 0 0 0;
border-bottom: 1px solid #32b9e1;
background: #000;
}
#bravia-feature.xr90 #floating .inner h2 {
border-bottom: 1px solid #c83755;
}
#bravia-feature.xr80 #floating .inner h2 {
border-bottom: 1px solid #3c6ed2;
}
#bravia-feature.xr70 #floating .inner h2 {
border-bottom: 1px solid #d27832;
}
#bravia-feature.xr50 #floating .inner h2 {
border-bottom: 1px solid #b29a38;
}
#bravia-feature.xr90 #floating .inner h2,
#bravia-feature.xr80 #floating .inner h2,
#bravia-feature.xr70 #floating .inner h2,
#bravia-feature.xr50 #floating .inner h2 {
font-size: 11px;
line-height: 11px;
text-align: left;
padding: 12px 0 0 8px;
}
#bravia-feature #floating .inner h2 span {
display: block;
font-size: 13px;
line-height: 18px;
}
#bravia-feature #floating h2::after{
content: "";
position: absolute;
top:0;
right: -20px;
width: 20px;
height: 43px;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
#bravia-feature #floating .inner div{
overflow: hidden;
overflow-x: scroll;
}
#bravia-feature #floating .inner div ul{
padding: 0 0 0 80px;
width: 580px;
height: 44px;
}
#bravia-feature #floating .inner div ul li{
display: inline-block;
}
#bravia-feature #floating .inner div ul li a{
font-size: 13px;
line-height: 20px;
display: block;
height: 44px;
padding: 8px 5px 0 5px;
}
#bravia-feature #floating .inner div ul li a span{
font-size: 10px;
line-height: 10px;
display: block;
}
#bravia-feature #floating .inner .button{
position: absolute;
bottom: -45px;
right: 10px;
}
#bravia-feature #floating .inner .button a{
font-size: 13px;
line-height: 17px;
letter-spacing: 0;
display: block;
width: 120px;
height: 32px;
border-radius: 16px;
text-align: center;
background: linear-gradient(-60deg, #735f32 0%, #c8aa78 100%);
padding: 7px 0 0 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}



/* ==============================================
#bravia-feature #introduction
============================================== */

#bravia-feature #introduction{
position: relative;
z-index: 1.5;
}
#bravia-feature #introduction .bg{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background: linear-gradient(135deg, #2896c3 0%, #000000 60%);
}
#bravia-feature.xr90 #introduction .bg{
background: linear-gradient(135deg, #c83755 0%, #000000 60%);
}
#bravia-feature.xr80 #introduction .bg{
background: linear-gradient(135deg, #3c6ed2 0%, #000000 60%);
}
#bravia-feature.xr70 #introduction .bg{
background: linear-gradient(135deg, #d27832 0%, #000000 60%);
}
#bravia-feature.xr50 #introduction .bg{
background: linear-gradient(135deg, #b29a38 0%, #000000 50%);
}
#bravia-feature #introduction .inner{
padding: 0 30px;
}
#bravia-feature #introduction .inner h1 {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 16px;
line-height: 28px;
letter-spacing: 2px;
padding: 48px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature.xr90 #introduction .inner h1 {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
padding: 56px 0 0 0;
}
#bravia-feature #introduction .inner h1 strong {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 30px;
line-height: 45px;
letter-spacing: 4px;
font-weight: 200;
display: block;
margin: 0 0 15px 0;
}
#bravia-feature.xr80 #introduction .inner h1 strong {
font-size: 24px;
line-height: 36px;
}
#bravia-feature.xr50 #introduction .inner h1 strong {
letter-spacing: 1px;
}
#bravia-feature.a95l #introduction .inner h1 strong {
font-size: 24px;
line-height: 36px;
letter-spacing: 2px;
}
#bravia-feature #introduction .inner figure {
margin: 25px -100px 0 30px;
position: relative;
z-index: 1;
}
#bravia-feature #introduction .inner figure img {
width: auto;
height: 240px;
filter: drop-shadow(0 0 8px rgba(40,150,195,0.4));
}
#bravia-feature.xr90 #introduction .inner figure img {
filter: drop-shadow(0 0 8px rgba(200,55,85,0.4));
}
#bravia-feature.xr80 #introduction .inner figure img {
filter: drop-shadow(0 0 8px rgba(60,110,210,0.4));
}
#bravia-feature.xr70 #introduction .inner figure img {
filter: drop-shadow(0 0 8px rgba(210,120,50,0.4));
}
#bravia-feature.xr50 #introduction .inner figure img {
filter: drop-shadow(0 0 8px rgba(255,220,80,0.4));
}
#bravia-feature #introduction .inner figure small {
display: block;
text-align: right;
font-size: 10px;
line-height: 15px;
color: #ccc;
margin: 8px 80px 0 0;
}
#bravia-feature #introduction .inner figure span {
display: block;
width: 400px;
height: 400px;
border-radius: 200px;
background: linear-gradient(0deg, rgba(40,150,195,0.1) 0%, rgba(40,150,195,0.4) 100%);
position: absolute;
top:0;
bottom: 0;
right: -150px;
margin: auto;
z-index: -1;
}
#bravia-feature.xr90 #introduction .inner figure span {
background: linear-gradient(0deg, rgba(200,55,85,0.1) 0%, rgba(200,55,85,0.4) 100%);
}
#bravia-feature.xr80 #introduction .inner figure span {
background: linear-gradient(0deg, rgba(60,110,210,0.1) 0%, rgba(60,110,210,0.4) 100%);
}
#bravia-feature.xr70 #introduction .inner figure span {
background: linear-gradient(0deg, rgba(210,120,50,0.1) 0%, rgba(210,120,50,0.4) 100%);
}
#bravia-feature.xr50 #introduction .inner figure span {
background: linear-gradient(0deg, rgba(255,220,80,0.1) 0%, rgba(255,220,80,0.4) 100%);
}
#bravia-feature #introduction .inner .button {
margin: 40px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature #introduction .inner .button + .button {
margin: 20px 0 0 0;
}
#bravia-feature #introduction .inner .button a {
font-size: 16px;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
padding: 19px 0 0 0;
display: block;
height: 60px;
background: linear-gradient(150deg, #2896c3 0%, #103d4f 80%);
border-radius: 4px;
}
#bravia-feature.xr90 #introduction .inner .button a {
background: linear-gradient(150deg, #c83755 0%, #501622 80%);
}
#bravia-feature.xr80 #introduction .inner .button a {
background: linear-gradient(150deg, #3c6ed2 0%, #182c54 80%);
}
#bravia-feature.xr70 #introduction .inner .button a {
background: linear-gradient(150deg, #d27832 0%, #543014 80%);
}
#bravia-feature.xr50 #introduction .inner .button a {
background: linear-gradient(150deg, #b29a38 0%, #4d4218 80%);
}
#bravia-feature #introduction .inner .button a::after{
content: "";
background: url("../images/cmn_icn_plus.png");
background-size: 13px 13px;
width: 13px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
opacity: 0.5;
}
#bravia-feature #introduction .inner .button.blank a::after{
background: url("../images/cmn_icn_blank.png");
background-size: 12px 10px;
width: 12px;
height: 10px;
}



#bravia-feature #introduction .inner .link{
margin: 12px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature #introduction .inner .link a{
font-size: 14px;
line-height: 20px;
}
#bravia-feature #introduction .inner .link a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 8px;
}



#bravia-feature #introduction .inner .voice{
position: absolute;
top: 10px;
left: 12px;
z-index: 1;
}
#bravia-feature #introduction .inner .voice a{
display: block;
font-size: 12px;
line-height: 16px;
letter-spacing: 0;
}
#bravia-feature #introduction .inner .voice a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 6px 11px;
width: 6px;
height: 11px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 4px;
}



/* ==============================================
#bravia-feature #menu
============================================== */

#bravia-feature #menu{
padding: 40px 0 0 0;
}
#bravia-feature #menu h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 35px;
letter-spacing: 2px;
padding: 0 30px;
margin: 40px 0 0 0;
}
#bravia-feature #menu h2 span{
font-size: 70px;
line-height: 70px;
letter-spacing: 0;
font-weight: 100;
display: block;
}
#bravia-feature.xr90 #menu h2 span,
#bravia-feature.xr80 #menu h2 span,
#bravia-feature.xr70 #menu h2 span,
#bravia-feature.xr50 #menu h2 span{
font-size: 24px;
line-height: 28px;
letter-spacing: 1px;
}
#bravia-feature #menu h2 span img {
width: auto;
height: 32px;
display: block;
margin: 12px 0 4px 0;
}
#bravia-feature #menu h2 span small{
font-size: 10px;
line-height: 14px;
letter-spacing: 1px;
font-weight: 400;
display: block;
color: #32b9e1;
margin: 0 0 5px 0;
}
#bravia-feature.xr90 #menu h2 span small{
color: #e94d6d;
}
#bravia-feature.xr80 #menu h2 span small{
color: #558af5;
}
#bravia-feature.xr70 #menu h2 span small{
color: #d27832;
}
#bravia-feature.xr50 #menu h2 span small{
color: #ffdc50;
}
#bravia-feature #menu .inner{
background: linear-gradient(135deg, #2896c3 0%, #103d4f 100%);
margin: 30px 0 0 0;
}
#bravia-feature.xr90 #menu .inner{
background: linear-gradient(135deg, #c83755 0%, #501622 100%);
}
#bravia-feature.xr80 #menu .inner{
background: linear-gradient(135deg, #3c6ed2 0%, #182c54 100%);
}
#bravia-feature.xr70 #menu .inner{
background: linear-gradient(135deg, #d27832 0%, #543014 100%);
}
#bravia-feature.xr50 #menu .inner{
background: linear-gradient(135deg, #b29a38 0%, #4d4218 100%);
}
#bravia-feature #menu .inner ul:nth-child(1){
padding: 1px 0 0 0;
}
#bravia-feature #menu .inner ul:nth-child(1) li{
float: left;
width: calc(50% - 0.5px);
margin: 0 1px 1px 0;
position: relative;
overflow: hidden;
}
#bravia-feature #menu .inner ul:nth-child(1) li:nth-child(2){
margin: 0 0 1px 0;
}
#bravia-feature #menu .inner ul:nth-child(1) li a{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 32px;
letter-spacing: 4px;
text-align: center;
display: block;
background: #000;
position: relative;
z-index: 1;
padding: 20px 0 72px 0;
text-indent: 4px;
}
#bravia-feature #menu .inner ul:nth-child(1) li a span{
font-size: 10px;
line-height: 10px;
font-weight: 400;
color: #32b9e1;
display: block;
position: absolute;
top:7px;
left: 7px;
}
#bravia-feature.xr90 #menu .inner ul:nth-child(1) li a span{
color: #e94d6d;
}
#bravia-feature.xr80 #menu .inner ul:nth-child(1) li a span{
color: #558af5;
}
#bravia-feature.xr70 #menu .inner ul:nth-child(1) li a span{
color: #d27832;
}
#bravia-feature.xr50 #menu .inner ul:nth-child(1) li a span{
color: #ffdc50;
}
#bravia-feature #menu .inner ul:nth-child(1) li a::after{
content: "";
display: block;
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
transform: rotate(90deg);
margin: 8px auto 0 auto;
}
#bravia-feature #menu .inner ul:nth-child(1) li a img{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
z-index: -1;
}
#bravia-feature #menu .inner ul:nth-child(2) li{
padding: 0 0 1px 0;
}
#bravia-feature #menu .inner ul:nth-child(2) li a{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 16px;
line-height: 20px;
letter-spacing: 1px;
display: block;
background: #000;
position: relative;
height: 44px;
padding: 12px 0 0 30px;
}
#bravia-feature #menu .inner ul:nth-child(2) li a span{
font-size: 10px;
line-height: 10px;
font-weight: 400;
color: #32b9e1;
display: block;
position: absolute;
top:7px;
left: 7px;
}
#bravia-feature.xr90 #menu .inner ul:nth-child(2) li a span{
color: #e94d6d;
}
#bravia-feature.xr80 #menu .inner ul:nth-child(2) li a span{
color: #558af5;
}
#bravia-feature.xr70 #menu .inner ul:nth-child(2) li a span{
color: #d27832;
}
#bravia-feature.xr50 #menu .inner ul:nth-child(2) li a span{
color: #ffdc50;
}
#bravia-feature #menu .inner ul:nth-child(2) li a::after{
content: "";
display: block;
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
transform: rotate(90deg);
position: absolute;
top:15px;
right: 16px;
}



/* ==============================================
#bravia-feature .feature
============================================== */

#bravia-feature .feature{
margin: 0;
}
#bravia-feature .feature .inner{
padding: 0 30px;
}
#bravia-feature .feature .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 35px;
letter-spacing: 2px;
padding: 80px 0 0 0;
}
#bravia-feature .feature .inner h2 span{
font-size: 50px;
line-height: 50px;
letter-spacing: -2px;
font-weight: 100;
color: #32b9e1;
display: block;
position: relative;
margin: 0 0 20px 0;
}
#bravia-feature.xr90 .feature .inner h2 span{
color: #e94d6d;
}
#bravia-feature.xr80 .feature .inner h2 span{
color: #558af5;
}
#bravia-feature.xr70 .feature .inner h2 span{
color: #d27832;
}
#bravia-feature.xr50 .feature .inner h2 span{
color: #ffdc50;
}
#bravia-feature .feature .inner h2 span small{
font-size: 10px;
line-height: 14px;
font-weight: 400;
color: #32b9e1;
display: block;
float: left;
margin: 4px 4px 0 0;
}
#bravia-feature.xr90 .feature .inner h2 span small{
color: #e94d6d;
}
#bravia-feature.xr80 .feature .inner h2 span small{
color: #558af5;
}
#bravia-feature.xr70 .feature .inner h2 span small{
color: #d27832;
}
#bravia-feature.xr50 .feature .inner h2 span small{
color: #ffdc50;
}
#bravia-feature .feature .inner h2 strong{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 40px;
line-height: 50px;
letter-spacing: 4px;
}
#bravia-feature .feature .inner h2 sup{
font-size: 10px;
vertical-align: top;
}
#bravia-feature .feature .inner figure span{
font-size: 10px;
line-height: 15px;
display: block;
text-align: right;
opacity: 0.8;
margin: 8px 10px 0 0;
}
#bravia-feature .feature .button a{
font-size: 16px;
line-height: 20px;
text-align: center;
padding: 19px 0 0 0;
display: block;
height: 60px;
background: linear-gradient(150deg, #2896c3 0%, #103d4f 80%);
border-radius: 4px;
}
#bravia-feature.xr90 .feature .button a{
background: linear-gradient(150deg, #c83755 0%, #501622 80%);
}
#bravia-feature.xr80 .feature .button a{
background: linear-gradient(150deg, #3c6ed2 0%, #182c54 80%);
}
#bravia-feature.xr70 .feature .button a{
background: linear-gradient(150deg, #d27832 0%, #543014 80%);
}
#bravia-feature.xr50 .feature .button a{
background: linear-gradient(150deg, #b29a38 0%, #4d4218 80%);
}
#bravia-feature .feature .inner p sup{
font-size: 10px;
}
#bravia-feature .feature .button.s a{
font-size: 13px;
}
#bravia-feature .feature .button a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
opacity: 0.5;
}
#bravia-feature .feature .button.plus a::after{
background: url("../images/cmn_icn_plus.png");
background-size: 13px 13px;
width: 13px;
}
#bravia-feature .feature .button.blank a::after{
background: url("../images/cmn_icn_blank.png");
background-size: 12px 10px;
width: 12px;
height: 10px;
}



/* ==============================================
#bravia-feature #resolution
============================================== */

#bravia-feature.xr90 #resolution .inner h2 strong{
font-size: 28px;
line-height: 40px;
letter-spacing: 0;
}
#bravia-feature.xr50 #resolution .inner h2 strong{
font-size: 30px;
line-height: 40px;
letter-spacing: 0;
}
#bravia-feature #resolution .inner figure{
margin: 55px -30px 0 -30px;
}
#bravia-feature.xr90 #resolution .inner figure,
#bravia-feature.xr80 #resolution .inner figure,
#bravia-feature.xr70 #resolution .inner figure,
#bravia-feature.xr50 #resolution .inner figure{
margin: 55px -30px 0 0px;
}
#bravia-feature #resolution .inner .button{
margin: 20px 0 0 0;
}



/* ==============================================
#bravia-feature #sound
============================================== */

#bravia-feature.xr70 #sound .inner h2 strong,
#bravia-feature.xr50 #sound .inner h2 strong{
font-size: 30px;
line-height: 40px;
}
#bravia-feature.xr80 #sound .inner figure,
#bravia-feature.a95l #sound .inner figure{
margin: 0 -30px;
width: calc(100% + 60px);
height: 300px;
}
#bravia-feature.xr90 #sound .inner figure,
#bravia-feature.xr70 #sound .inner figure,
#bravia-feature.xr50 #sound .inner figure{
margin: 35px -30px -15px -30px;
}
#bravia-feature.xr80 #sound .inner figure img,
#bravia-feature.a95l #sound .inner figure img{
width: 100%;
height: 300px;
object-fit: cover;
}
#bravia-feature #sound .inner p{
text-align: justify;
margin: 35px 0 0 0;
}
#bravia-feature #sound .inner .button{
margin: 35px 0 0 0;
}
#bravia-feature #sound .inner .button + .button{
margin: 20px 0 0 0;
}



/* ==============================================
#bravia-feature #movie
============================================== */

#bravia-feature #movie .inner h2 strong{
font-size: 31px;
line-height: 43px;
letter-spacing: 4px;
}
#bravia-feature #movie .inner p{
margin: 50px 0 0 0;
text-align: justify;
}
#bravia-feature #movie .inner .note{
margin: 15px 0 0 0;
}
#bravia-feature #movie .inner .note li{
font-size: 10px;
line-height: 14px;
text-indent: -10px;
margin: 5px 0 0 10px;
opacity: 0.8;
}
#bravia-feature #movie .inner .note li a{
font-size: 10px;
line-height: 14px;
color: #fff;
text-decoration: underline;
}
#bravia-feature #movie .inner .note li a.blank::after{
content: "";
display: inline-block;
background: url("../images/cmn_icn_blank.png");
background-size: 10px 8px;
width: 10px;
height: 8px;
vertical-align: middle;
margin: -2px 4px 0 4px;
}
#bravia-feature #movie .inner figure{
margin: 20px 0 0 0;
}
#bravia-feature #movie .inner .button{
margin: 40px 0 0 0;
}
#bravia-feature #movie .modal .modal-inner .note {
margin: 25px 0 0 0;
}
#bravia-feature #movie .modal .modal-inner .note li {
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 5px 0 0 10px;
opacity: 0.8;
}
#bravia-feature #movie .modal .modal-inner .note li a{
font-size: 10px;
line-height: 15px;
color: #fff;
text-decoration: underline;
}
#bravia-feature #movie .modal .modal-inner .note li a.blank::after{
content: "";
display: inline-block;
background: url("../images/cmn_icn_blank.png");
background-size: 10px 8px;
width: 10px;
height: 8px;
vertical-align: middle;
margin: -2px 4px 0 4px;
}
#bravia-feature #movie .modal .modal-inner .movie .note {
margin: 15px 0 0 0;
}



/* ==============================================
#bravia-feature #operation
============================================== */

#bravia-feature #operation .inner div h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 30px;
margin: 45px 0 0 0;
}
#bravia-feature #operation .inner div h3 sup{
font-size: 10px;
line-height: 10px;
}
#bravia-feature #operation .inner div figure{
margin: 35px -10px 0 -30px;
}
#bravia-feature #operation .inner div + div figure{
margin: 35px -30px 0 -30px;
}
#bravia-feature #operation .inner div figure span{
font-size: 10px;
line-height: 15px;
}
#bravia-feature #operation .inner div p{
text-align: justify;
margin: 30px 0 0 0;
}
#bravia-feature #operation .inner div p sup{
font-size: 10px;
}
#bravia-feature #operation .inner div .note li{
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 5px 0 0 10px;
opacity: 0.8;
}
#bravia-feature #operation .inner .button{
margin: 35px 0 0 0;
}



#bravia-feature.xr50 #operation .inner figure{
margin: 50px -30px 0 -30px;
}
#bravia-feature.xr50 #operation .inner figure span{
font-size: 10px;
line-height: 15px;
}
#bravia-feature.xr50 #operation .inner h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 30px;
margin: 35px 0 0 0;
}
#bravia-feature.xr50 #operation .inner p{
margin: 10px 0 0 0;
text-align: justify;
}
#bravia-feature.xr50 #operation .inner .note li{
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 5px 0 0 10px;
opacity: 0.8;
}
#bravia-feature.xr50 #operation .inner .button{
margin: 35px 0 0 0;
}



/* ==============================================
#bravia-feature #game
============================================== */

#bravia-feature #game .inner figure{
margin: 0 -30px;
width: calc(100% + 60px);
height: 300px;
}
#bravia-feature #game .inner figure img{
width: 100%;
height: 300px;
object-fit: cover;
}
#bravia-feature #game .inner .button{
margin: 40px 0 0 0;
}



/* ==============================================
#bravia-feature #eco
============================================== */

#bravia-feature #eco .inner figure{
margin: 50px -30px 0 -30px;
}
#bravia-feature #eco .inner figure span{
font-size: 10px;
line-height: 15px;
}
#bravia-feature #eco .inner h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 30px;
margin: 10px 0 0 0;
}
#bravia-feature #eco .inner p{
margin: 10px 0 0 0;
text-align: justify;
}
#bravia-feature #eco .inner .button{
margin: 35px 0 0 0;
}



/* ==============================================
#bravia-feature #design
============================================== */

#bravia-feature #design .inner h2{
position: relative;
z-index: 1;
}
#bravia-feature.xr50 #design .inner h2 strong{
font-size: 30px;
line-height: 40px;
letter-spacing: 0;
}
#bravia-feature #design .inner figure{
margin: -70px -30px 0 -30px;
}
#bravia-feature #design .inner figure + figure{
margin: 0 -30px;
}
#bravia-feature #design .inner p{
margin: 35px 0 0 0;
text-align: justify;
}
#bravia-feature #design .inner p span{
display: block;
font-size: 10px;
line-height: 15px;
opacity: 0.8;
margin: 10px 0 0 0;
}



#bravia-feature #design #safety{
padding: 0 30px;
}
#bravia-feature #design #safety h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 20px;
line-height: 35px;
margin: 50px 0 0 0;
}
#bravia-feature #design #safety figure{
margin: 15px 0 0 0;
}
#bravia-feature #design #safety figure img{
margin: 20px 0 0 0;
}
#bravia-feature #design #safety p{
margin: 35px 0 0 0;
text-align: justify;
}



#bravia-feature #design #safety + ul{
border-top: solid 1px #444444;
margin: 60px 0 0 0;
padding: 50px 30px 0 30px;
}
#bravia-feature #design #safety + ul li{
margin: 10px 0 0 0;
}
#bravia-feature #design #safety + ul li a{
font-size: 16px;
line-height: 20px;
display: block;
height: 60px;
border: solid 1px #666666;
border-radius: 4px;
text-align: center;
padding: 19px 0 0 0;
}
#bravia-feature #design #safety + ul li a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
}
#bravia-feature #design #safety + ul + .button{
margin: 30px 0 0 0;
padding: 0 30px;
}



/* ==============================================
#bravia-feature #store
============================================== */

#bravia-feature #store{
margin: 60px 0 0 0;
}
#bravia-feature #store .inner{
position: relative;
border-top: solid 1px #444444;
padding: 0 30px;
}
#bravia-feature #store .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 22px;
line-height: 34px;
letter-spacing: 1px;
margin: 50px 0 0 0;
}
#bravia-feature #store .inner h2 + p{
margin: 30px 0 0 0;
}
#bravia-feature #store .inner .slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
border: none!important;
border-radius: 0!important;
}
#bravia-feature #store .inner .slick-prev,
#bravia-feature #store .inner .slick-next {
display: none!important;
}
#bravia-feature #store .inner ul li{
margin: 40px 0 0 0;
}
#bravia-feature #store .inner ul li span{
display: block;
font-size: 12px;
line-height: 20px;
margin: 15px 0 0 0;
}
#bravia-feature #store .inner ul li span strong{
display: block;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
#bravia-feature #store .inner .button{
margin: 40px 0 0 0;
}
#bravia-feature #store .inner .button a{
font-size: 16px;
line-height: 20px;
text-align: center;
padding: 19px 0 0 0;
display: block;
height: 60px;
background: linear-gradient(150deg, #666 0%, #333 100%);
border-radius: 4px;
}
#bravia-feature.xr90 #store .inner .button a{
background: linear-gradient(150deg, #c83755 0%, #501622 80%);
}
#bravia-feature.xr80 #store .inner .button a{
background: linear-gradient(150deg, #3c6ed2 0%, #182c54 80%);
}
#bravia-feature.xr70 #store .inner .button a{
background: linear-gradient(150deg, #d27832 0%, #543014 80%);
}
#bravia-feature.xr50 #store .inner .button a{
background: linear-gradient(150deg, #b29a38 0%, #4d4218 80%);
}
#bravia-feature.a95l #store .inner .button a{
background: linear-gradient(150deg, #2896c3 0%, #103d4f 80%);
}
#bravia-feature #store .inner .button a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
opacity: 0.5;
}



/* ==============================================
#bravia-feature #print
============================================== */

#bravia-feature #print{
margin: 60px 0 0 0;
}
#bravia-feature #print .inner{
position: relative;
border-top: solid 1px #444444;
padding: 0 30px;
}
#bravia-feature #print .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 22px;
line-height: 34px;
letter-spacing: 1px;
margin: 50px 0 0 0;
}
#bravia-feature #print .inner figure{
margin: 40px 0 0 0;
}
#bravia-feature #print .inner .button{
margin: 40px 0 0 0;
}
#bravia-feature #print .inner .button a{
font-size: 16px;
line-height: 20px;
text-align: center;
padding: 19px 0 0 0;
display: block;
height: 60px;
background: linear-gradient(150deg, #666 0%, #333 100%);
border-radius: 4px;
}
#bravia-feature.xr90 #print .inner .button a{
background: linear-gradient(150deg, #c83755 0%, #501622 80%);
}
#bravia-feature.xr80 #print .inner .button a{
background: linear-gradient(150deg, #3c6ed2 0%, #182c54 80%);
}
#bravia-feature.xr70 #print .inner .button a{
background: linear-gradient(150deg, #d27832 0%, #543014 80%);
}
#bravia-feature.xr50 #print .inner .button a{
background: linear-gradient(150deg, #b29a38 0%, #4d4218 80%);
}
#bravia-feature.a95l #print .inner .button a{
background: linear-gradient(150deg, #2896c3 0%, #103d4f 80%);
}
#bravia-feature #print .inner .button a::after{
content: "";
background: url("../images/cmn_icn_arrow.png");
background-size: 7px 13px;
width: 7px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
opacity: 0.5;
}



/* ==============================================
#bravia-feature #banner
============================================== */

#bravia-feature #banner{
margin: 60px 0 0 0;
}
#bravia-feature #banner .inner{
position: relative;
border-top: solid 1px #444444;
padding: 0 30px;
}
#bravia-feature #banner .inner h2{
font-size: 20px;
line-height: 30px;
font-weight: 500;
margin: 50px 0 0 0;
}
#bravia-feature #banner .inner ul li{
margin: 20px 0 0 0;
}



/* ==============================================
#bravia-feature #notes
============================================== */

#bravia-feature #notes .inner{
border-top: solid 1px #444444;
margin: 60px 0 0 0;
}
#bravia-feature #notes .inner ul{
margin: 60px 30px 0 30px;
}
#bravia-feature #notes .inner ul li{
font-size: 10px;
line-height: 15px;
text-indent: -20px;
margin: 10px 0 0 20px;
}



/* ==============================================
#bravia-feature .modal
============================================== */

#bravia-feature .modal {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
overflow-y: scroll;
z-index: -1;
opacity: 0;
pointer-events: none;
transition: 0.5s ease-out;
}
#bravia-feature .modal.on {
z-index: 4;
opacity: 1;
pointer-events: inherit;
}



#bravia-feature .modal .title {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 60px;
background: #000;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
z-index: 1;
}
#bravia-feature .modal .title p:first-child {
position: relative;
padding: 11px 0 0 12px;
font-size: 16px;
letter-spacing: 2px;
}
#bravia-feature #modal-photo .title p:first-child {
padding: 15px 0 0 16px;
}
#bravia-feature .modal .title p:first-child span {
display: block;
font-size: 10px;
line-height: 14px;
font-weight: 400;
color: #32b9e1;
}
#bravia-feature.xr90 .modal .title p:first-child span {
color: #e94d6d;
}
#bravia-feature.xr80 .modal .title p:first-child span {
color: #558af5;
}
#bravia-feature.xr70 .modal .title p:first-child span {
color: #d27832;
}
#bravia-feature.xr50 .modal .title p:first-child span {
color: #ffdc50;
}
#bravia-feature .modal .title .close {
position: fixed;
top:0;
right: 0;
width: 60px;
height: 60px;
}
#bravia-feature .modal .title .close a {
position: relative;
display: block;
width: 60px;
height: 60px;
font-size: 0;
line-height: 0;
color: #000;
}
#bravia-feature .modal .title p a::before {
content: "";
position: absolute;
top:0;
bottom: 2px;
left: 0;
right: 0;
margin: auto;
width: 40px;
height: 1px;
background: #999;
transform: rotate(45deg);
}
#bravia-feature .modal .title p a::after {
content: "";
position: absolute;
top:0;
bottom: 2px;
left: 0;
right: 0;
margin: auto;
width: 40px;
height: 1px;
background: #999;
transform: rotate(-45deg);
}



#bravia-feature .modal #thumb{
margin: 0 -30px;
}
#bravia-feature .modal #thumb li{
width: calc(20% - 0.8px);
float: left;
margin: 1px 1px 0 0;
transition: 0.4s ease-out;
}
#bravia-feature .modal #thumb li:nth-child(5n){
margin: 1px 0 0 0;
}
#bravia-feature .modal #thumb li.select{
opacity: 0.5;
}
#bravia-feature .modal #photo{
position: relative;
width: calc(100% + 60px);
margin: 0 -30px;
padding: 79% 0 0 0;
overflow: hidden;
}
#bravia-feature .modal #photo .photo{
position: absolute;
top:0;
left: 0;
}
#bravia-feature .modal #photo .photo.off{
display: none;
}
#bravia-feature .modal #photo .photo span{
font-size: 10px;
line-height: 14px;
display: block;
position: absolute;
bottom:10px;
right: 10px;
color: #222;
}



#bravia-feature .modal .modal-inner {
padding: 80px 30px 70px 30px;
transition: 0.5s ease-out;
}
#bravia-feature .modal.on .modal-inner {
padding: 60px 30px 70px 30px;
}
#bravia-feature .modal .modal-inner h3 {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 36px;
letter-spacing: 2px;
font-weight: 400;
margin: 50px 0 0 0;
}
#bravia-feature .modal .modal-inner h3 span {
display: block;
text-align: right;
margin: 15px 0 0 0;
}
#bravia-feature .modal .modal-inner h3 img {
width: auto;
height: 28px;
}
#bravia-feature .modal .modal-inner h3 sup{
font-size: 10px;
vertical-align: top;
}
#bravia-feature .modal .modal-inner h4 {
font-size: 18px;
line-height: 28px;
letter-spacing: 1px;
font-weight: 400;
margin: 50px 0 0 0;
}
#bravia-feature .modal .modal-inner h4 + p {
margin: 15px 0 0 0;
}
#bravia-feature .modal .modal-inner p {
text-align: justify;
margin: 25px 0 0 0;
}
#bravia-feature .modal .modal-inner p sup{
font-size: 10px;
}
#bravia-feature .modal .modal-inner .note li {
font-size: 12px;
line-height: 18px;
text-indent: -16px;
margin: 10px 0 0 16px;
opacity: 0.8;
}
#bravia-feature .modal .modal-inner figure {
margin: 30px 0 5px 0;
}
#bravia-feature .modal .modal-inner figure.wide {
margin: 30px -30px 5px -30px;
}
#bravia-feature .modal .modal-inner figure span{
font-size: 10px;
line-height: 15px;
display: block;
text-align: right;
opacity: 0.8;
margin: 8px 0 0 0;
}
#bravia-feature .modal .modal-inner figure span + img{
margin: 10px 0 0 0;
}
#bravia-feature .modal .modal-inner video {
width: 100%;
margin: 30px 0 5px 0;
}
#bravia-feature .modal .modal-inner video.wide {
width: calc(100% + 60px);
margin: 30px -30px 5px -30px;
}
#bravia-feature .modal .modal-inner .movie{
margin: 30px 0 5px 0;
}
#bravia-feature .modal .modal-inner .movie div{
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
filter: drop-shadow(0 0 16px rgba(255,255,255,0.3));
}
#bravia-feature .modal .modal-inner .movie div iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#bravia-feature .modal .modal-inner .movie .note{
margin: 10px 0 0 0;
}
#bravia-feature .modal .modal-inner .movie .note li{
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 0 0 0 10px;
}
#bravia-feature .modal .modal-inner .button {
margin: 30px 0 0 0;
}



#bravia-feature .modal .modal-inner .lineup-main div h3{
font-size: 12px;
line-height: 20px;
text-align: center;
margin: 20px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div h3 img{
width: auto;
height: 16px;
display: block;
margin: 8px auto 0 auto;
}
#bravia-feature .modal .modal-inner .lineup-main div h3 span{
font-size: 16px;
line-height: 20px;
text-align: center;
font-weight: 400;
}
#bravia-feature .modal .modal-inner .lineup-main div figure{
margin: 20px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div .button{
margin: 20px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div .button:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature .modal .modal-inner .lineup-main div .button a{
font-size: 15px;
line-height: 20px;
font-weight: 400;
color: #222;
float: left;
width: calc(50% - 6px);
height: 44px;
margin: 0 0 0 12px;
padding: 11px 0 0 0;
background: linear-gradient(-60deg, #999 0%, #fff 100%);
}
#bravia-feature .modal .modal-inner .lineup-main div .button a:first-child{
font-weight: 300;
color: #fff;
background: linear-gradient(-60deg, #735f32 0%, #c8aa78 100%);
margin: 0;
}
#bravia-feature .modal .modal-inner .lineup-main div .button a:after {
display: none;
}



#bravia-feature .modal .modal-inner .lineup-sub{
display:flex;
flex-wrap:wrap;
}
#bravia-feature .modal .modal-inner .lineup-sub:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature .modal .modal-inner .lineup-sub div{
float: left;
width: calc(50% - 6px);
margin: 0 12px 0 0;
padding: 0 0 115px 0;
position: relative;
}
#bravia-feature .modal .modal-inner .lineup-sub div:nth-child(2n){
margin: 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div h3{
font-size: 12px;
line-height: 16px;
text-align: center;
margin: 30px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div h3 span{
font-size: 13px;
line-height: 17px;
text-align: center;
display: block;
margin: 5px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div h3 span small{
font-size: 11px;
line-height: 19px;
display: block;
}
#bravia-feature .modal .modal-inner .lineup-sub div figure{
margin: 15px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div .button{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#bravia-feature .modal .modal-inner .lineup-sub div .button a{
font-size: 15px;
line-height: 20px;
font-weight: 400;
color: #222;
height: 44px;
padding: 11px 0 0 0;
background: linear-gradient(-60deg, #999 0%, #fff 100%);
}
#bravia-feature .modal .modal-inner .lineup-sub div .button a:first-child{
font-weight: 300;
color: #fff;
background: linear-gradient(-60deg, #333333 0%, #666666 100%);
margin: 0 0 8px 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div .button a:after {
display: none;
}



#bravia-feature .modal .modal-inner #design-tab ul{
margin: 30px 0 0 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
#bravia-feature .modal .modal-inner #design-tab ul li{
float: left;
width: 50%;
}
#bravia-feature .modal .modal-inner #design-tab ul li a{
font-size: 12px;
line-height: 16px;
display: block;
height: 44px;
text-align: center;
color: #bbb;
border-radius: 22px 0 0 22px;
padding: 12px 0 0 4px;
background: linear-gradient(0deg, #333 0%, #111 100%);
}
#bravia-feature .modal .modal-inner #design-tab ul li:last-child a{
border-radius: 0 22px 22px 0;
padding: 12px 4px 0 0;
}
#bravia-feature .modal .modal-inner #design-tab ul li.select a{
color: #ffffff;
background: linear-gradient(0deg, #222 0%, #555 100%);
position: relative;
z-index: 1;
pointer-events: none;
}
#bravia-feature .modal .modal-inner .design.off{
display: none;
}



#bravia-feature .modal .modal-inner .close {
margin: 60px 0 0 0;
}
#bravia-feature .modal .modal-inner .close a {
font-size: 15px;
line-height: 20px;
display: block;
height: 44px;
border: solid 1px #666666;
border-radius: 4px;
text-align: center;
padding: 10px 0 0 0;
}
#bravia-feature .modal .modal-inner .close a::after{
content: "";
background: url("../images/cmn_icn_plus.png");
background-size: 13px 13px;
width: 13px;
height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
opacity: 0.5;
transform: rotate(45deg);
}



/* ==============================================
anime
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8,0.8);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}


p.link.fadeInLeft.wow{
  position: relative;
  z-index: 2;
}