@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 36px 0;
}



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

#bravia-feature *{
font-family: 'Roboto','Noto Sans JP',Meiryo,sans-serif;
font-weight:300;
font-size: 15px;
line-height: 30px;
letter-spacing: 1px;
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;
transition: 0.4s ease-out;
}
a:hover{
opacity: 0.5;
}



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



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

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



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

#bravia-feature #hero .inner h1{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 40px;
line-height: 50px;
letter-spacing: 8px;
text-align: center;
margin: 0 0 -160px 0;
}
#bravia-feature #hero .inner h1 img{
max-width: 1280px;
display: block;
margin: auto;
}



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

#bravia-feature #list .inner #tab{
position: sticky;
top: 0;
padding: 126px 0 0 0;
z-index: 2;
}
#bravia-feature #list .inner #tab ul{
max-width: 800px;
margin: auto;
padding: 20px 0 0 0;
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: 16px;
line-height: 24px;
display: block;
height: 60px;
text-align: center;
color: #bbb;
border-radius: 30px 0 0 30px;
padding: 17px 0 0 0;
background: linear-gradient(0deg, #333 0%, #111 100%);
}
#bravia-feature #list .inner #tab ul li a:hover{
color: #ffffff;
opacity: 1;
}
#bravia-feature #list .inner #tab ul li:last-child a{
border-radius: 0 30px 30px 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;
padding: 0 80px;
transition: 0.4s ease-out;
}
@media screen and (max-width:900px) {
#bravia-feature .lineup{
padding: 0 40px;
}
}
#bravia-feature .lineup.off{
display: none;
}



#bravia-feature .lineup p.link{
margin: 30px 0 -60px 0;
}
#bravia-feature .lineup p.link a{
font-size: 15px;
line-height: 20px;
}
#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: 30px;
line-height: 45px;
text-align: center;
letter-spacing: 4px;
position: relative;
z-index: 1;
padding: 70px 0 0 0;
margin: 0 0 -10px 0;
}



#bravia-feature .lineup .main{
display:flex;
flex-wrap:wrap;
}



#bravia-feature .lineup .main .item{
position: relative;
float: left;
width: calc(20% - 48px);
margin: 80px 60px 0 0;
padding: 0 0 296px 0;
transition: 0.4s ease-out;
}
#bravia-feature .lineup .main .item:last-child{
margin: 80px 0 0 0;
}
#bravia-feature #lineup-02 .main .item{
width: calc(25% - 45px);
margin: 80px 60px 0 0;
padding: 0 0 276px 0;
}
#bravia-feature #lineup-02 .main .item:last-child{
margin: 80px 0 0 0;
}
@media screen and (max-width:1200px) {
#bravia-feature .lineup .main .item{
width: calc(50% - 30px)!important;
}
#bravia-feature .lineup .main .item:nth-child(even){
margin: 80px 0 0 0!important;
}
}
#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;
position: absolute;
top: -36px;
left: 0;
width: 100%;
}
#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: 28px;
display: block;
margin: 12px auto 10px auto;
transition: 0.4s ease-out;
}
#bravia-feature #lineup-02 .main .item h3 img{
height: 24px;
}
@media screen and (max-width:1600px) {
#bravia-feature #lineup-02 .main .item h3 img{
height: 20px;
}
}
@media screen and (max-width:1400px) {
#bravia-feature #lineup-02 .main .item h3 img{
height: 16px;
}
}
@media screen and (max-width:1200px) {
#bravia-feature #lineup-02 .main .item h3 img{
height: 24px;
}
}
#bravia-feature .lineup .main .item h3 span{
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
#bravia-feature .lineup .main .item h3 strong{
font-size: 32px;
line-height: 40px;
letter-spacing: 1px;
display: block;
padding: 4px 0 28px 0;
}
#bravia-feature .lineup .main .item ul{
text-align: center;
padding: 10px 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: justify;
padding: 16px 0 0 0;
transition: 0.4s ease-out;
}
#bravia-feature #lineup-02 .main .item figure + p{
padding: 0 0 0 0;
}
#bravia-feature .lineup .main .item .button{
position: absolute;
bottom: 234px;
left: 0;
width: 100%;
}
#bravia-feature #lineup-02 .main .item .button{
bottom: 214px;
}
#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;
margin: 10px 0 0 0;
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{
position: absolute;
bottom: 205px;
left: 0;
width: 100%;
text-align: center;
}
#bravia-feature .lineup .main .item .voice a{
display: block;
font-size: 12px;
line-height: 16px;
letter-spacing: 0;
}
#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: 24px;
line-height: 32px;
letter-spacing: 2px;
text-align: center;
padding: 80px 0 0 0;
}
#bravia-feature .lineup .sub{
display:flex;
flex-wrap:wrap;
}
#bravia-feature .lineup .sub:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#bravia-feature .lineup .sub .item{
float: left;
width: calc(20% - 48px);
margin: 80px 60px 0 0;
padding: 0 0 274px 0;
position: relative;
transition: 0.4s ease-out;
}
#bravia-feature .lineup .sub .item:nth-child(5n){
margin: 80px 0 0 0;
}
@media screen and (max-width:1400px) {
#bravia-feature .lineup .sub .item{
width: calc(20% - 32px);
margin: 80px 40px 0 0;
}
}
@media screen and (max-width:1200px) {
#bravia-feature .lineup .sub .item{
width: calc(25% - 30px);
}
#bravia-feature .lineup .sub .item:nth-child(4n){
margin: 80px 0 0 0;
}
#bravia-feature .lineup .sub .item:nth-child(5n){
margin: 80px 40px 0 0;
}
}
@media screen and (max-width:1000px) {
#bravia-feature .lineup .sub .item{
width: calc(33.33333% - 27px);
margin: 80px 40px 0 0;
}
#bravia-feature .lineup .sub .item:nth-child(3n){
margin: 80px 0 0 0;
}
#bravia-feature .lineup .sub .item:nth-child(4n){
margin: 80px 40px 0 0;
}
}
#bravia-feature .lineup .sub .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 15px 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;
position: absolute;
top:-1px;
left: -1px;
width: 40px;
height: 23px;
display: block;
background: #fff;
color: #222;
}
#bravia-feature .lineup .sub .item h3{
font-size: 14px;
line-height: 20px;
text-align: center;
}
#bravia-feature .lineup .sub .item h3 img{
width: auto;
height: 24px;
display: block;
margin: 12px auto 4px auto;
transition: 0.4s ease-out;
}
#bravia-feature #lineup-02 .sub .item h3 img{
height: 20px;
}
@media screen and (max-width:1600px) {
#bravia-feature #lineup-02 .sub .item h3 img{
height: 16px;
}
}
@media screen and (max-width:1400px) {
#bravia-feature #lineup-02 .sub .item h3 img{
height: 12px;
}
}
@media screen and (max-width:1200px) {
#bravia-feature #lineup-02 .sub .item h3 img{
height: 20px;
}
}
#bravia-feature .lineup .sub .item h3 strong{
font-size: 24px;
line-height: 28px;
display: block;
padding: 8px 0 0 0;
}
#bravia-feature #lineup-02 .sub .item h3 strong{
padding: 8px 0 32px 0;
}
#bravia-feature .lineup .sub .item h3 span{
font-size: 18px;
line-height: 24px;
display: block;
padding: 8px 0 0 0;
}
#bravia-feature .lineup .sub .item ul{
text-align: center;
padding: 10px 0 0 0;
}
#bravia-feature .lineup .sub .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: -1px 1px 0 0;
}
#bravia-feature .lineup .sub .item figure{
padding: 24px 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: 14px;
line-height: 26px;
text-align: justify;
padding: 8px 0 0 0;
}
#bravia-feature #lineup-02 .sub .item figure + p{
padding: 20px 0 0 0;
}
#bravia-feature .lineup .sub .item .button{
position: absolute;
bottom: 214px;
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{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#bravia-feature .lineup .item .store .s5-sonyStoreCustom{
background: #333;
padding: 0 15px;
height: 190px;
}
#bravia-feature .lineup .item .store .s5-sonyStoreCustom__text{
padding: 12px 0 8px 0;
font-size: 12px;
line-height: 20px;
}
#bravia-feature .lineup .sub .item .store .s5-sonyStoreCustom__text{
letter-spacing: 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 .item .store .s5-listItem4__storeUnit{
font-size: 12px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 0 12px 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: 12px;
line-height: 16px;
letter-spacing: 0;
font-weight: 400;
color: #222;
height: 44px;
padding: 6px 8px 6px 8px;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved span::before{
top: -7px;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved span br{
display: none;
}
#bravia-feature .lineup .item .store .s5-listItem4__storeSaved strong{
display: inline-block;
font-size: 12px;
line-height: 16px;
letter-spacing: 0;
font-weight: 700;
color: #222;
}
#bravia-feature .lineup .item .store .s5-storeDiscountButton{
width: 100%;
height: 44px;
border-radius: 4px;
font-size: 12px;
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 .item .store .s5-storeButton{
width: 100%;
height: 44px;
border-radius: 4px;
text-align: center;
padding: 6px 0 0 0;
margin: 10px 0 0 0;
background: linear-gradient(-60deg, #962800 0%, #d24615 100%);
border: none;
}



#bravia-feature .lineup ul.link{
margin: 80px 0 0 0;
text-align: center;
}
#bravia-feature .lineup ul.link li{
display: inline-block;
margin: 0 8px;
}
#bravia-feature .lineup ul.link li a{
font-size: 15px;
line-height: 20px;
display: block;
width: 240px;
height: 44px;
border: solid 1px #666666;
border-radius: 4px;
text-align: center;
margin: auto;
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 #introduction .inner .voice{
position: absolute;
top: 15px;
right: 10px;
z-index: 1;
}
#bravia-feature #introduction .inner .voice a{
display: block;
font-size: 12px;
line-height: 16px;
}
#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 #floating
============================================== */

#bravia-feature #floating{
height: 60px;
}
#bravia-feature #floating .inner{
position: relative;
width: 100%;
height: 60px;
background: #000;
border-bottom: 1px solid #444444;
z-index: 2;
padding: 0 10px;
}
#bravia-feature #floating .inner.floating{
position: fixed;
top:126px;
left: 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:991px) {
#bravia-feature #floating .inner.floating{
top:0;
}
}
#bravia-feature #floating .inner h2 {
font-size: 30px;
line-height: 30px;
max-width: 1200px;
margin: auto;
padding: 15px 0 0 0;
position: relative;
}
#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: 14px;
line-height: 14px;
padding: 14px 0 0 0;
}
#bravia-feature #floating .inner h2 span {
display: block;
font-size: 20px;
line-height: 30px;
}
#bravia-feature #floating .inner div{
position: absolute;
top:0;
left: 0;
right: 0;
max-width: 1220px;
margin: auto;
}
#bravia-feature #floating .inner div ul{
padding: 0 0 0 120px;
}
#bravia-feature #floating .inner div ul li{
display: inline-block;
}
#bravia-feature #floating .inner div ul li a{
font-size: 15px;
line-height: 20px;
display: block;
height: 60px;
padding: 19px 18px 0 18px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1100px) {
#bravia-feature #floating .inner div ul li a{
padding: 19px 13px 0 13px;
}
}
@media screen and (max-width:1000px) {
#bravia-feature #floating .inner div ul li a{
padding: 19px 8px 0 8px;
}
}
@media screen and (max-width:900px) {
#bravia-feature #floating .inner div ul li a{
font-size: 13px;
padding: 21px 5px 0 5px;
}
}
#bravia-feature #floating .inner div ul li a span{
font-size: 13px;
line-height: 13px;
display: inline-block;
vertical-align: middle;
margin: -4px 8px 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #floating .inner div ul li a span{
display: block;
margin: -8px 8px 4px 0;
}
}
#bravia-feature #floating .inner .button{
position: absolute;
top:0;
left: 0;
right: 0;
max-width: 1200px;
margin: auto;
}
#bravia-feature #floating .inner .button a{
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
position: absolute;
top:7px;
right: 0;
display: block;
width: 160px;
height: 44px;
border-radius: 22px;
text-align: center;
background: linear-gradient(-60deg, #735f32 0%, #c8aa78 100%);
padding: 13px 0 0 0;
margin: 0 7px 0 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
transition: 0.4s ease-out;
}
@media screen and (max-width:1000px) {
#bravia-feature #floating .inner .button a{
width: 120px;
}
}



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

#bravia-feature #introduction{
position: relative;
z-index: 1.5;
padding: 0 80px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #introduction{
padding: 0 40px;
}
}
#bravia-feature #introduction .bg{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background: linear-gradient(160deg, #2896c3 0%, #000000 50%);
}
#bravia-feature.xr90 #introduction .bg{
background: linear-gradient(160deg, #c83755 0%, #000000 50%);
}
#bravia-feature.xr80 #introduction .bg{
background: linear-gradient(160deg, #3c6ed2 0%, #000000 50%);
}
#bravia-feature.xr70 #introduction .bg{
background: linear-gradient(160deg, #d27832 0%, #000000 50%);
}
#bravia-feature.xr50 #introduction .bg{
background: linear-gradient(160deg, #b29a38 0%, #000000 50%);
}
#bravia-feature #introduction .inner{
position: relative;
max-width: 1200px;
margin: auto;
padding: 0 0 160px 0;
z-index: 1;
}
#bravia-feature #introduction .inner h1 {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
letter-spacing: 4px;
padding: 95px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature #introduction .inner h1 strong {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 60px;
line-height: 90px;
letter-spacing: 8px;
font-weight: 200;
display: block;
margin: 0 0 35px 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1000px) {
#bravia-feature #introduction .inner h1 strong {
font-size: 50px;
line-height: 75px;
margin: 5px 0 35px 0;
}
}
#bravia-feature.xr80 #introduction .inner h1 strong {
font-size: 40px;
line-height: 60px;
margin: 15px 0 35px 0;
}
#bravia-feature.a95l #introduction .inner h1 strong {
font-size: 40px;
line-height: 60px;
letter-spacing: 2px;
margin: 15px 0 35px 0;
}
#bravia-feature #introduction .inner figure {
position: absolute;
bottom:125px;
left: 540px;
transition: 0.4s ease-out;
}
#bravia-feature.xr80 #introduction .inner figure {
bottom:130px;
}
#bravia-feature.xr70 #introduction .inner figure {
bottom:115px;
}
#bravia-feature.xr50 #introduction .inner figure {
bottom:115px;
}
#bravia-feature.a95l #introduction .inner figure {
bottom:130px;
}
@media screen and (max-width:1000px) {
#bravia-feature #introduction .inner figure {
left: 440px;
}
}
#bravia-feature #introduction .inner figure img {
width: auto;
height: 480px;
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: 20px;
color: #ccc;
margin: 10px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1500px) {
#bravia-feature #introduction .inner figure small {
text-align: center;
}
}
@media screen and (max-width:1200px) {
#bravia-feature #introduction .inner figure small {
text-align: left;
}
}
#bravia-feature #introduction .inner figure span {
display: block;
width: 800px;
height: 800px;
border-radius: 400px;
background: linear-gradient(0deg, rgba(40,150,195,0.1) 0%, rgba(40,150,195,0.4) 100%);
position: absolute;
top:0;
bottom: 40px;
right: -400px;
margin: auto;
z-index: -1;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #introduction .inner figure span {
right: inherit;
left: 160px;
}
}
#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: 60px 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: 17px;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
padding: 19px 0 0 0;
display: block;
width: 330px;
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;
}
#bravia-feature #introduction .inner .link a{
font-size: 15px;
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 #menu
============================================== */

#bravia-feature #menu{
position: relative;
min-height: 400px;
padding: 0 80px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #menu{
padding: 0 40px;
}
}
#bravia-feature #menu h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 36px;
letter-spacing: 4px;
margin: auto;
max-width: 1200px;
position: relative;
z-index: 1.5;
}
#bravia-feature #menu h2 span{
font-size: 88px;
line-height: 88px;
letter-spacing: -1px;
font-weight: 100;
display: block;
margin: 0 0 5px 0;
}
#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;
margin: 0;
}
#bravia-feature #menu h2 span img {
width: auto;
height: 40px;
display: block;
margin: 15px 0 5px 0;
}
#bravia-feature #menu h2 span small{
font-size: 12px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 400;
display: block;
color: #32b9e1;
margin: 0 0 10px 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{
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, #2896c3 0%, #103d4f 100%);
width: calc(50% + 280px);
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #menu .inner{
position: inherit;
top: inherit;
right: inherit;
background: linear-gradient(135deg, #2896c3 0%, #103d4f 100%);
width: calc(100% + 40px);
margin: 40px -40px 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 1px;
}
#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: 30px;
line-height: 40px;
letter-spacing: 4px;
text-align: center;
display: block;
background: #000;
position: relative;
z-index: 1;
height: 320px;
padding: 30px 0 0 0;
}
#bravia-feature #menu .inner ul:nth-child(1) li a span{
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: #32b9e1;
display: block;
margin: 0 auto 5px auto;
}
#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: 10px auto 0 auto;
}
#bravia-feature #menu .inner ul:nth-child(1) li a img{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
#bravia-feature #menu .inner ul:nth-child(2){
padding: 0 0 1px 0;
}
#bravia-feature #menu .inner ul:nth-child(2) li{
float: left;
width: calc(20% - 1px);
margin: 0 0 0 1px;
}
#bravia-feature #menu .inner ul:nth-child(2) li a{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 18px;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
display: block;
background: #000;
position: relative;
height: 80px;
padding: 10px 0 0 0;
}
#bravia-feature #menu .inner ul:nth-child(2) li a span{
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: #32b9e1;
display: block;
margin: 0 auto 5px auto;
}
#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);
margin: 8px auto 0 auto;
}



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

#bravia-feature .feature{
position: relative;
padding: 0 80px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature .feature{
padding: 0 40px;
}
}
#bravia-feature .feature .inner{
max-width: 1200px;
margin: auto;
}
#bravia-feature .feature .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
letter-spacing: 2px;
padding: 220px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature .feature .inner h2 span{
font-size: 58px;
line-height: 58px;
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: 12px;
line-height: 16px;
font-weight: 400;
color: #32b9e1;
display: block;
float: left;
margin: 5px 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: 60px;
line-height: 75px;
letter-spacing: 4px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1000px) {
#bravia-feature .feature .inner h2 strong{
font-size: 50px;
line-height: 65px;
}
}
#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: 15px auto 0 auto;
padding: 0 20px;
max-width: 1200px;
}
#bravia-feature .feature .inner p sup{
font-size: 10px;
}
#bravia-feature .feature .button{
text-align: center;
}
#bravia-feature .feature .button a{
font-size: 17px;
line-height: 20px;
text-align: center;
padding: 19px 0 0 0;
display: inline-block;
width: 360px;
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 .button.s a{
font-size: 14px;
}
#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 #resolution .inner figure{
position: absolute;
top:310px;
left: 50%;
}
#bravia-feature #resolution .inner figure img{
width: 1000px;
}
#bravia-feature #resolution .inner .button{
margin: 190px 0 0 0;
position: relative;
z-index: 1;
}



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

#bravia-feature.xr80 #sound .inner figure,
#bravia-feature.a95l #sound .inner figure{
position: absolute;
top:290px;
left: 0;
width: 100%;
height: 600px;
}
#bravia-feature.xr90 #sound .inner figure,
#bravia-feature.xr70 #sound .inner figure,
#bravia-feature.xr50 #sound .inner figure{
position: absolute;
top:160px;
left: 45%;
}
#bravia-feature.xr80 #sound .inner figure img,
#bravia-feature.a95l #sound .inner figure img{
width: 100%;
height: 600px;
object-fit: cover;
}
#bravia-feature.xr90 #sound .inner figure img,
#bravia-feature.xr70 #sound .inner figure img,
#bravia-feature.xr50 #sound .inner figure img{
display: block;
width: 1000px;
}
#bravia-feature #sound .inner figure + p{
text-align: justify;
margin: 530px auto 0 auto;
max-width: 725px;
}
#bravia-feature #sound .inner .button{
margin: 50px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature.xr90 #sound .inner .button,
#bravia-feature.xr70 #sound .inner .button,
#bravia-feature.xr50 #sound .inner .button{
margin: 190px 0 0 0;
max-width: 100%;
text-align: center;
}
#bravia-feature #sound .inner .button + .button{
margin: 20px 0 0 0;
}



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

#bravia-feature #movie .inner{
position: relative;
}
#bravia-feature #movie .inner p{
margin: 56px 0 0 0;
}
#bravia-feature #movie .inner .note{
margin: 16px 0 0 0;
}
#bravia-feature #movie .inner .note li{
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 5px 0 0 10px;
opacity: 0.8;
}
#bravia-feature #movie .inner .note li a{
font-size: 10px;
line-height: 15px;
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: 48px 0 0 0;
}
#bravia-feature #movie .inner .button{
margin: 50px 0 0 0;
}



#bravia-feature #movie .modal .modal-inner .note {
margin: 30px 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: 20px 0 0 0;
}
#bravia-feature #movie .modal .modal-inner h4 + p + figure {
text-align: center;
}
#bravia-feature #movie .modal .modal-inner h4 + p + figure img {
width: 315px;
}



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

@media screen and (max-width:1100px) {
#bravia-feature #operation .inner h2 .rp{
display: block!important;
}
}
#bravia-feature #operation .inner div{
float: left;
width: calc(50% - 40px);
margin: 0 80px 0 0;
}
#bravia-feature #operation .inner div + div{
margin: 0;
}
#bravia-feature #operation .inner div h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
margin: 60px 0 0 0;
}
#bravia-feature #operation .inner div h3 sup{
font-size: 10px;
line-height: 10px;
display: inline-block;
vertical-align: super;
}
#bravia-feature #operation .inner div figure{
margin: 30px 0 0 0;
}
#bravia-feature #operation .inner div figure span{
margin: 10px 0 0 0;
}
#bravia-feature #operation .inner div p{
text-align: justify;
margin: 25px 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{
clear: both;
padding: 50px 0 0 0;
}



#bravia-feature.xr50 #operation .inner figure{
position: absolute;
bottom:116px;
right: 0;
transition: 0.4s ease-out;
}
#bravia-feature.xr50 #operation .inner figure img{
transition: 0.4s ease-out;
}
@media screen and (max-width:1450px) {
#bravia-feature.xr50 #operation .inner figure img{
width: 600px;
}
}
@media screen and (max-width:1300px) {
#bravia-feature.xr50 #operation .inner figure img{
width: 500px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature.xr50 #operation .inner figure img{
width: 400px;
}
}
@media screen and (max-width:1050px) {
#bravia-feature.xr50 #operation .inner figure{
position: inherit;
bottom:inherit;
right: inherit;
margin: 50px -40px 0 -40px;
}
#bravia-feature.xr50 #operation .inner figure img{
width: 100%;
}
}
#bravia-feature.xr50 #operation .inner h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
margin: 50px 0 0 0;
}
#bravia-feature.xr50 #operation .inner h3 + p{
margin: 15px 0 0 0;
text-align: justify;
max-width: 560px;
}
#bravia-feature.xr50 #operation .inner .note{
max-width: 560px;
}
#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 #game
============================================== */

#bravia-feature #game .inner figure{
position: absolute;
top:240px;
left: 0;
width: 100%;
height: 600px;
}
#bravia-feature #game .inner figure img{
width: 100%;
height: 600px;
object-fit: cover;
}
#bravia-feature #game .inner .button{
margin: 450px 0 0 0;
}


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

#bravia-feature #eco .inner figure{
position: absolute;
bottom:85px;
right: 0;
transition: 0.4s ease-out;
}
#bravia-feature #eco .inner figure img{
transition: 0.4s ease-out;
}
@media screen and (max-width:1300px) {
#bravia-feature #eco .inner figure img{
width: 600px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #eco .inner figure img{
width: 500px;
}
}
@media screen and (max-width:1050px) {
#bravia-feature #eco .inner figure img{
width: 400px;
}
}
@media screen and (max-width:950px) {
#bravia-feature #eco .inner figure{
position: inherit;
bottom:inherit;
right: inherit;
margin: 50px -40px -55px -40px;
}
#bravia-feature #eco .inner figure img{
width: 100%;
}
}
#bravia-feature #eco .inner h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
margin: 50px 0 0 0;
}
#bravia-feature #eco .inner h3 + p{
margin: 15px 0 0 0;
text-align: justify;
max-width: 450px;
}
#bravia-feature #eco .inner .button{
margin: 50px 0 0 0;
}



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

#bravia-feature #design{
background: url("../images/a95l_dsg_img_01-pc.jpg") top 220px center repeat-x;
}
#bravia-feature.xr90 #design{
background: url("../images/xr90_dsg_img_01-pc.jpg") top 220px center repeat-x;
}
#bravia-feature.xr80 #design{
background: url("../images/xr80_dsg_img_01-pc.jpg") top 220px center repeat-x;
}
#bravia-feature.xr70 #design{
background: url("../images/xr70_dsg_img_01-pc.jpg") top 220px center repeat-x;
}
#bravia-feature.xr50 #design{
background: url("../images/xr50_dsg_img_01-pc.jpg") top 220px center repeat-x;
}
@media screen and (max-width:800px) {
#bravia-feature #design .inner h2 .rp{
display: block!important;
}
}
#bravia-feature #design .inner h2 + figure img{
display: none;
}
#bravia-feature #design .inner figure + figure{
position: absolute;
top:960px;
right: 0;
transition: 0.4s ease-out;
}
#bravia-feature #design .inner figure + figure img{
width: 700px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1350px) {
#bravia-feature #design .inner figure + figure{
width: 50%;
}
#bravia-feature #design .inner figure + figure img{
width: 100%;
}
}
@media screen and (max-width:800px) {
#bravia-feature #design .inner figure + figure{
width: 100%;
}
}
#bravia-feature #design .inner figure + figure + p{
max-width: 500px;
height: 210px;
margin: 605px 0 0 0;
text-align: justify;
transition: 0.4s ease-out;
}
@media screen and (max-width:1350px) {
#bravia-feature #design .inner figure + figure + p{
max-width: 100%;
width: calc(50% - 40px);
}
}
@media screen and (max-width:1350px) {
#bravia-feature #design .inner figure + figure + p{
height: auto;
}
}
@media screen and (max-width:800px) {
#bravia-feature #design .inner figure + figure + p{
width: 100%;
margin-top: calc(44% + 525px);
}
}
#bravia-feature #design .inner figure + figure + p sup{
font-size: 10px;
}
#bravia-feature #design .inner figure + figure + p span{
display: block;
font-size: 10px;
line-height: 15px;
opacity: 0.8;
margin: 10px 0 0 0;
}
#bravia-feature #design .inner .button{
margin: 60px 0 0 0;
position: relative;
z-index: 1;
}
#bravia-feature.xr80 #design .inner figure + figure + p{
margin: 700px 0 0 0;
}
@media screen and (max-width:1350px) {
#bravia-feature.xr80 #design .inner figure + figure + p{
margin-top: calc(15% + 500px);
}
}
@media screen and (max-width:800px) {
#bravia-feature.xr80 #design .inner figure + figure + p{
margin-top: calc(74% + 550px);
position: relative;
z-index: 1;
}
}
#bravia-feature.xr80 #design .inner .button{
margin: 125px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1350px) {
#bravia-feature.xr80 #design .inner .button{
margin-top: calc(15% + 40px);
}
}
@media screen and (max-width:1000px) {
#bravia-feature.xr80 #design .inner .button{
margin-top: calc(10% + 40px);
}
}
@media screen and (max-width:800px) {
#bravia-feature.xr80 #design .inner .button{
margin-top: 50px;
}
}
#bravia-feature #design #safety{
max-width: 840px;
margin: auto;
}
#bravia-feature #design #safety h3{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 24px;
line-height: 40px;
letter-spacing: 2px;
margin: 70px 0 0 0;
text-align: center;
}
@media screen and (max-width:1000px) {
#bravia-feature #design #safety h3 .rp{
display: block!important;
}
}
#bravia-feature #design #safety figure{
max-width: 840px;
margin: 30px 0 0 0;
}
#bravia-feature #design #safety figure img{
margin: 0 20px 0 0;
float: left;
width: calc(50% - 10px);
}
#bravia-feature #design #safety figure img:last-child{
margin: 0;
}
#bravia-feature #design #safety figure + p{
clear: both;
padding: 30px 0 0 0;
}



#bravia-feature #design #safety + ul{
border-top: solid 1px #444444;
margin: 80px 0 0 0;
padding: 70px 0 0 0;
}
#bravia-feature #design #safety + ul li{
float: left;
width: calc(25% - 7.66666px);
margin: 10px 10px 0 0;
}
#bravia-feature #design #safety + ul li:last-child{
margin: 10px 0 0 0;
}
@media screen and (max-width:1200px) {
#bravia-feature #design #safety + ul li{
width: calc(50% - 5px);
}
#bravia-feature #design #safety + ul li:nth-child(2n){
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: 18px 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: 40px 0 0 0;
}
#bravia-feature #design #safety + ul + .button a{
width: calc(33.33333% - 7px);
}



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

#bravia-feature #store{
margin: 80px 0 0 0;
padding: 0 80px;
}
#bravia-feature #store .inner{
position: relative;
max-width: 1200px;
margin: auto;
border-top: solid 1px #444444;
}
#bravia-feature #store .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 32px;
line-height: 48px;
letter-spacing: 4px;
margin: 70px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1300px) {
#bravia-feature #store .inner h2{
font-size: 24px;
line-height: 32px;
}
}
@media screen and (max-width:1200px) {
#bravia-feature #store .inner h2 .rp{
display: block!important;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #store .inner h2{
font-size: 40px;
line-height: 60px;
letter-spacing: 8px;
text-align: center;
}
#bravia-feature #store .inner h2 .rp{
display: none!important;
}
}
#bravia-feature #store .inner h2 + p{
margin: 30px 0 0 0;
max-width: 560px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1300px) {
#bravia-feature #store .inner h2 + p{
max-width: 400px;
}
}
@media screen and (max-width:1200px) {
#bravia-feature #store .inner h2 + p{
max-width: 300px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #store .inner h2 + p{
max-width: 560px;
text-align: center;
margin: 30px auto 0 auto;
}
}
#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 .slider{
position: absolute;
top:80px;
right: 0;
width: 540px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1150px) {
#bravia-feature #store .inner .slider{
position: inherit;
top:inherit;
right: inherit;
width: 100%;
margin: 40px 0 0 0;
}
}
#bravia-feature #store .inner ul li span{
display: block;
font-size: 12px;
line-height: 20px;
text-align: center;
margin: 15px 0 0 0;
}
#bravia-feature #store .inner ul li span strong{
display: block;
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
}
#bravia-feature #store .inner .button{
max-width: 400px;
margin: 40px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #store .inner .button{
max-width: 300px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #store .inner .button{
max-width: 400px;
margin: 40px auto -40px auto;
}
}
#bravia-feature #store .inner .button a{
font-size: 17px;
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: 120px 0 0 0;
padding: 0 80px;
}
#bravia-feature #print .inner{
position: relative;
max-width: 1200px;
margin: auto;
border-top: solid 1px #444444;
}
#bravia-feature #print .inner h2{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 32px;
line-height: 48px;
letter-spacing: 4px;
margin: 70px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1300px) {
#bravia-feature #print .inner h2{
font-size: 24px;
line-height: 32px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #print .inner h2{
font-size: 40px;
line-height: 60px;
letter-spacing: 8px;
text-align: center;
}
}
#bravia-feature #print .inner figure{
position: absolute;
top:80px;
right: 0;
width: 540px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1150px) {
#bravia-feature #print .inner figure{
position: inherit;
top:inherit;
right: inherit;
width: 100%;
margin: 40px 0 0 0;
}
}
#bravia-feature #print .inner .button{
max-width: 400px;
margin: 40px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #print .inner .button{
max-width: 300px;
}
}
@media screen and (max-width:1150px) {
#bravia-feature #print .inner .button{
max-width: 400px;
margin: 40px auto -40px auto;
}
}
#bravia-feature #print .inner .button a{
font-size: 17px;
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: 120px 0 0 0;
padding: 0 80px;
}
#bravia-feature #banner .inner{
position: relative;
max-width: 1200px;
margin: auto;
border-top: solid 1px #444444;
}
#bravia-feature #banner .inner h2{
font-size: 20px;
line-height: 30px;
font-weight: 500;
margin: 70px 0 0 0;
}
#bravia-feature #banner .inner ul li{
float: left;
width: calc(50% - 20px);
margin: 40px 40px 0 0;
}
#bravia-feature #banner .inner ul li:last-child{
margin: 40px 0 0 0;
}



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

#bravia-feature #notes{
padding: 0 80px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1200px) {
#bravia-feature #notes{
padding: 0 40px;
}
}
#bravia-feature #notes .inner{
max-width: 1200px;
margin: 120px auto 0 auto;
border-top: solid 1px #444444;
}
#bravia-feature #notes .inner ul{
margin: 80px 0 0 0;
}
#bravia-feature #notes .inner ul li{
font-size: 12px;
line-height: 20px;
text-indent: -24px;
margin: 10px 0 0 24px;
}



/* ==============================================
#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;
padding: 0 40px;
}
#bravia-feature .modal.on {
z-index: 1000;
opacity: 1;
pointer-events: inherit;
}



#bravia-feature .modal .title {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 80px;
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: 19px 0 0 20px;
font-size: 20px;
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: 12px;
line-height: 16px;
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: 80px;
height: 80px;
}
#bravia-feature .modal .title .close a {
position: relative;
display: block;
width: 80px;
height: 80px;
font-size: 0;
line-height: 0;
color: #000;
}
#bravia-feature .modal .title .close 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 .close 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 li{
width: calc(10% - 1px);
float: left;
margin: 1px 1px 0 0;
transition: 0.4s ease-out;
}
#bravia-feature .modal #thumb li:nth-child(10n){
margin: 1px 0 0 0;
}
#bravia-feature .modal #thumb li.select{
opacity: 0.5;
}
#bravia-feature .modal #photo{
position: relative;
width: 100%;
height: 500px;
background: #ddd;
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: 11px;
line-height: 15px;
display: block;
position: absolute;
bottom:10px;
right: 10px;
color: #222;
}



#bravia-feature .modal .modal-inner {
max-width: 750px;
margin: auto;
padding: 100px 0 90px 0;
opacity: 0;
transition: 0.5s ease-out;
}
#bravia-feature .modal.on .modal-inner {
padding: 80px 0 90px 0;
opacity: 1;
}
#bravia-feature #modal-photo .modal-inner {
position: fixed;
top:0;
bottom: -40px;
left: 0;
right: 0;
margin: auto;
padding: 0;
height: 620px;
}
#bravia-feature #modal-photo.on .modal-inner {
bottom: 0;
}



#bravia-feature .modal .modal-inner h3 {
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-size: 30px;
line-height: 45px;
letter-spacing: 4px;
font-weight: 400;
margin: 80px 0 0 0;
}
#bravia-feature .modal .modal-inner h3 span {
display: block;
text-align: right;
margin: 10px 0 0 0;
}
#bravia-feature .modal .modal-inner h3 img {
width: auto;
height: 44px;
}
#bravia-feature .modal .modal-inner h3 sup{
font-size: 10px;
vertical-align: top;
}
#bravia-feature .modal .modal-inner p {
text-align: justify;
margin: 25px 0 0 0;
}
#bravia-feature .modal .modal-inner .note li {
font-size: 10px;
line-height: 15px;
text-indent: -10px;
margin: 10px 0 0 10px;
opacity: 0.8;
}
#bravia-feature .modal .modal-inner figure {
margin: 40px 0 5px 0;
}
#bravia-feature .modal .modal-inner figure span{
font-size: 10px;
line-height: 15px;
display: block;
text-align: right;
opacity: 0.8;
margin: 15px 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: 40px 0 5px 0;
filter: drop-shadow(0 0 16px rgba(255,255,255,0.3));
}
#bravia-feature .modal .modal-inner .movie{
margin: 40px 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: 20px 0 0 0;
}
#bravia-feature .modal .modal-inner .movie .note li{
margin: 0 0 0 12px;
}
#bravia-feature .modal .modal-inner .button {
margin: 40px 0 0 0;
text-align: center;
}



#bravia-feature .modal .modal-inner .lineup-main div{
position: relative;
width: 560px;
margin: auto;
padding: 0 0 64px 0;
}
#bravia-feature .modal .modal-inner .lineup-main div h3{
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
margin: 50px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div h3 img{
width: auto;
height: 24px;
display: block;
margin: 10px auto 5px auto;
}
#bravia-feature .modal .modal-inner .lineup-main div h3 span{
font-size: 18px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 400;
text-align: center;
}
#bravia-feature .modal .modal-inner .lineup-main div h3 strong{
font-size: 32px;
line-height: 40px;
letter-spacing: 1px;
display: block;
padding: 4px 0 19px 0;
}
#bravia-feature .modal .modal-inner h4 {
font-size: 20px;
line-height: 30px;
letter-spacing: 2px;
font-weight: 400;
margin: 50px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div figure{
margin: 35px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div figure span{
font-size: 10px;
line-height: 15px;
display: block;
text-align: right;
opacity: 0.8;
margin: 15px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-main div .button{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#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;
text-align: center;
color: #222;
display: block;
float: left;
width: calc(50% - 6px);
height: 44px;
margin: 0 0 0 12px;
padding: 11px 0 0 0;
border-radius: 4px;
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(20% - 16px);
margin: 0 20px 0 0;
padding: 0 0 120px 0;
position: relative;
}
#bravia-feature .modal .modal-inner .lineup-sub div:nth-child(5n){
margin: 0;
}


#bravia-feature .modal .modal-inner .lineup-sub div h3{
font-size: 12px;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
margin: 35px 0 0 0;
}
#bravia-feature .modal .modal-inner .lineup-sub div h3 span{
font-size: 13px;
line-height: 13px;
letter-spacing: 0;
display: block;
margin: 5px 0 0 0;
text-align: center;
}
#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: 20px 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: 13px;
line-height: 20px;
font-weight: 400;
text-align: center;
color: #222;
display: block;
width: auto;
height: 44px;
padding: 12px 0 0 0;
border-radius: 4px;
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 #game .modal .modal-inner{
max-width: 1200px;
padding: 80px 0 170px 0;
}
#bravia-feature .modal .modal-inner #game-tab{
margin: auto;
position: fixed;
bottom:0;
left: 0;
width: 100%;
z-index: 1;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
}
#bravia-feature .modal .modal-inner #game-tab ul{
height: 80px;
background: linear-gradient(150deg, #2896c3 0%, #103d4f 80%);
}
#bravia-feature.xr90 .modal .modal-inner #game-tab ul{
background: linear-gradient(150deg, #c83755 0%, #501622 80%);
}
#bravia-feature.xr80 .modal .modal-inner #game-tab ul{
background: linear-gradient(150deg, #3c6ed2 0%, #182c54 80%);
}
#bravia-feature.xr70 .modal .modal-inner #game-tab ul{
background: linear-gradient(150deg, #d27832 0%, #543014 80%);
}
#bravia-feature.xr50 .modal .modal-inner #game-tab ul{
background: linear-gradient(150deg, #b29a38 0%, #4d4218 80%);
}
#bravia-feature .modal .modal-inner #game-tab ul li{
position: relative;
float: left;
width: 20%;
}
#bravia-feature .modal .modal-inner #game-tab ul li a:first-child{
display: block;
height: 80px;
text-align: right;
font-size: 15px;
line-height: 24px;
position: relative;
border-right: 1px solid #000;
padding: 16px 22px 0 0;
transition: 0.4s ease-out;
}
#bravia-feature .modal .modal-inner #game-tab ul li:last-child a{
border-right: none;
}
#bravia-feature .modal .modal-inner #game-tab ul li a:first-child span{
position: absolute;
top:20px;
left: 22px;
font-size: 12px;
line-height: 16px;
transition: 0.4s ease-out;
}
@media screen and (max-width:1000px) {
#bravia-feature .modal .modal-inner #game-tab ul li a:first-child span{
top:12px;
left: 14px;
}
}
#bravia-feature .modal .modal-inner #game-tab ul li.select a:first-child{
background: #fff;
color: #008caf;
font-weight: 400;
}
#bravia-feature.xr90 .modal .modal-inner #game-tab ul li.select a:first-child{
color: #e94d6d;
}
#bravia-feature.xr80 .modal .modal-inner #game-tab ul li.select a:first-child{
color: #558af5;
}
#bravia-feature.xr70 .modal .modal-inner #game-tab ul li.select a:first-child{
color: #d27832;
}
#bravia-feature.xr50 .modal .modal-inner #game-tab ul li.select a{
color: #b48c00;
}
#bravia-feature .modal .modal-inner #game-tab ul li.select a:first-child span{
color: #008caf;
font-weight: 400;
}
#bravia-feature.xr90 .modal .modal-inner #game-tab ul li.select a:first-child span{
color: #e94d6d;
}
#bravia-feature.xr80 .modal .modal-inner #game-tab ul li.select a:first-child span{
color: #558af5;
}
#bravia-feature.xr70 .modal .modal-inner #game-tab ul li.select a:first-child span{
color: #d27832;
}
#bravia-feature.xr50 .modal .modal-inner #game-tab ul li.select a span{
color: #b48c00;
}
@media screen and (max-width:1000px) {
#bravia-feature .modal .modal-inner #game-tab ul li a:first-child{
font-size: 14px;
line-height: 20px;
padding: 10px 14px 0 0;
}
#bravia-feature .modal .modal-inner #game-tab ul li a:first-child .rp{
display: block!important;
}
}
#bravia-feature .modal .modal-inner #game-04{
max-width: 750px;
margin: auto;
}
#bravia-feature .modal .modal-inner #game-05{
max-width: 750px;
margin: auto;
}
#bravia-feature .modal .modal-inner .game.off{
display: none;
}
#bravia-feature .modal .modal-inner .game table th{
vertical-align: top;
}
#bravia-feature .modal .modal-inner .game table th:nth-child(1),
#bravia-feature .modal .modal-inner .game table th:nth-child(3){
width: 48%;
}
#bravia-feature .modal .modal-inner .game table th:nth-child(2){
width: 4%;
}
#bravia-feature .modal .modal-inner #game-03 table th:nth-child(1),
#bravia-feature .modal .modal-inner #game-03 table th:nth-child(3),
#bravia-feature .modal .modal-inner #game-03 table th:nth-child(5){
width: 31.33333%;
}
#bravia-feature .modal .modal-inner #game-03 table th:nth-child(2),
#bravia-feature .modal .modal-inner #game-03 table th:nth-child(4){
width: 4%;
}
#bravia-feature .modal .modal-inner .game table td{
vertical-align: top;
}
#bravia-feature .modal .modal-inner .game h3 {
text-align: center;
}
#bravia-feature .modal .modal-inner .game h4 {
font-size: 18px;
letter-spacing: 1px;
margin: 45px 0 0 0;
}
#bravia-feature .modal .modal-inner .game p {
font-size: 14px;
line-height: 24px;
}



#bravia-feature .modal .modal-inner #design-tab ul{
margin: 40px 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: 16px;
line-height: 24px;
display: block;
height: 60px;
text-align: center;
color: #bbb;
border-radius: 30px 0 0 30px;
padding: 17px 0 0 0;
background: linear-gradient(0deg, #333 0%, #111 100%);
}
#bravia-feature .modal .modal-inner #design-tab ul li a:hover{
color: #ffffff;
opacity: 1;
}
#bravia-feature .modal .modal-inner #design-tab ul li:last-child a{
border-radius: 0 30px 30px 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: 80px 0 0 0;
}
#bravia-feature .modal .modal-inner p.close a {
font-size: 15px;
line-height: 20px;
display: block;
width: 200px;
height: 44px;
border: solid 1px #666666;
border-radius: 4px;
text-align: center;
margin: auto;
padding: 10px 0 0 0;
}
#bravia-feature .modal .modal-inner p.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;
}