@charset "shift_jis";
/*==============================================
common
============================================= */
/*.lead,*/
.contentsNavi,
.pconly{
display:none;
}
#header {
border-bottom: #ededed solid 1px;
}
.copyRight { border-top: 1px solid #ededed; }
.pageTop {
width: 40px;
height: 40px;
right: 10px;
background-size: 40px;
border-radius: 50%;
}

#mainContents {
background-color: #000;
}

/*==============================================
effect
============================================= */

[data-effect] {
opacity: 0;
transition: transform .6s, opacity .6s;
}
[data-effect="top"] {
transform: translateY(-60px);
}
[data-effect="bottom"] {
transform: translateY(60px);
}
[data-effect="left"] {
transform: translateX(60px);
}
[data-effect="right"] {
transform: translateX(-60px);
}
[data-effect].ended {
transform: translateY(0);
opacity: 1;
}

/*==============================================
ΕΒ
============================================= */
.mainTitleWrap .title {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/sp_top_bg.jpg) no-repeat center top;
background-size: 100%;}

h1 {
padding-top: 108%;
margin: 0 auto;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/sp_tit.png) no-repeat center top;
background-size: 100%;
text-indent: -999em;
font-size: 0;
}
p.lead {
padding: 25px 25px 0;
font-size: 1.15rem;
line-height: 1.7;
}

.windowslogo {
padding: 28px;
}

.windowslogo img {
width: 150px;}

.xbox {
background-color: #292929;
padding: 25px;}

.xbox .img {
padding-bottom: 15px;}

.xbox .img img {
width: 150px;
}

.xbox .text p{
font-size: 0.9rem !important;
line-height: 1.6 !important;}

.xbox .text .fontL {
font-size: 1rem !important;
font-weight: bold;
padding-bottom: 8px;
}

.xbox a:link,
.xbox a:visited {
color: #fff;
}
.xbox a:hover,
.xbox a:active {
color: #fff;
text-decoration: underline;
}

/*==============================================
oi[
============================================= */
.bnr a { text-decoration: none; }

/*----@ΕΒΊ@----*/
.topbnr {
padding: 25px 20px 20px 20px;
}
.topbnr a {
box-sizing: border-box;
display:block;
margin-bottom: 10px;
width: 100%;}

.topbnr a img {width: 100%}

/*----@Lΰ@----*/
.innerbnr{
padding: 30px 0 10px;}

.innerbnr a{
display:block;
box-sizing: border-box;
width: 100%;}

.innerbnr  img{ width: 100% }

.innerbnr .bnr{
margin-top: 12px;}

/*==============================================
#mainContents
============================================= */
/*----- Ά -----*/
#mainContents .paragraph,
#mainContents .mainTitleWrap,
#mainContents .lead,
table th,table td,
.productBoxIn{
font-feature-settings: "palt" 1;
letter-spacing: 0.04em;
color: #fff;}

.paragraph p {
font-size: 1.28rem;
line-height: 1.85;
margin-top: 30px;
}
.paragraphIn > p:first-child {
margin-top: 10px;
}
.paragraph .cap {
font-size: 1.1rem;
line-height: 1.6 !important;
margin-top: 10px !important;
}

#mainContents .capS {
font-size: 1.1rem;
margin-top: 5px !important;
}

/*----@paragraph@----*/
.paragraph {
border-top: 1px solid #737373;
transition: background-color .2s, border-top-color .2s;
}
#matome {
border-bottom: 1px solid #737373;
}
.spAccordion {
display: none;
padding: 0 25px 30px;
}
.paragraph h2 {
position: relative;
padding: 20px 20px 20px 25px;
color: #fff;
font-weight: bold;
}

.paragraph h2 br {display: none;}

.paragraph h2 span {
display: block;
padding-left: 26px;
font-size: 1.28rem;
line-height: 1.7;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.paragraph h2 span span{
padding-left: 0;
display: inline-block;
}


.paragraph h2 .icon{
font-size: 1.4rem;
line-height: 1;
padding: 8px 10px 5px;
display: inline-block;
border: 2px solid;
border-image: linear-gradient(90deg, #1ee3ff, #eb1bfe);
border-image-slice: 1;
color: transparent;
background: repeating-linear-gradient( 90deg, #1ee3ff 0, #eb1bfe 100% );
-webkit-background-clip: text;}

#article04 h2 .icon {
display: none;
}

.paragraph h2 .text{
display: block;
margin-top: 10px;
}

.paragraph h2:after {
content: "";
display: inline-block;
position: absolute;
top: 1px;
bottom: 0;
left: 20px;/*----@Ά©ηΜξσΜΚu@----*/
width: 10px;
height: 10px;
margin: auto;
-webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
transition: opacity .2s ease, -webkit-transform .2s ease;
transition: transform .2s ease, opacity .2s ease;
transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
vertical-align: middle;
border-bottom: 4px solid #10ccda;/*----@ξσΜF@----*/
border-right: 4px solid #10ccda;/*----@ξσΜF@----*/
}
.paragraph.active h2:after {
top: 3px;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}

.paragraphIn h3 {
font-size: 1.4rem;
line-height: 1.7;
padding-left: 15px;
font-weight: bold;
border-image: linear-gradient(to bottom, #1ee3ff 0%, #eb1bfe 100%) 1/0 0 0 3px;
border-style: solid;
margin-top: 45px;}


.blue{color: #02ffff;}
.pink{color: #ff08fe;}


/*----- ζ -----*/
.imgBox {margin-top: 30px;
background-color: #2e2e2e;
padding:20px;
box-sizing: border-box;}

#article04 .imgBox {margin-top: 30px;
padding: 0;
background-color: #000;
box-sizing: border-box;}

.imgBox div {overflow: hidden;}
.imgBox img {width: 100%;}
.imgBox div + .cap{
margin-top: 15px;}
.imgBox a + .cap {
margin-top: 0;}

.imgBox .floatL .blue ,
.imgBox .floatR .pink{
font-weight: bold;
font-size: 1.35rem !important;}

.imgBox .floatL .blue{
margin-top: 0 !important;
margin-bottom: 5px;}

.imgBox .floatR .pink {
margin-top: 15px !important;
margin-bottom: 5px;}

.col2 div {
display: table;}

.col2 div a,
.col2 div p.cap{
display: table-cell;
width: 49%;
vertical-align: middle;}


/*==============================================
.productBox
============================================= */
/*----- »ig -----*/
.productBox {
padding:35px 20px;}

.prdtit {
font-size: 1.35rem;
font-weight: bold;
color: #fff;
border-left: #10cddb 8px solid;
padding-left: 10px;
}

/*----@table@----*/
table{
width: 900px;
border-collapse:separate;
border-spacing:0;
box-sizing: border-box;
border: #737373 1px solid;
margin: 25px auto 0;}

table.spw690 {width: 690px;
box-sizing: border-box;}

table th,
table td{
padding: 10px;
box-sizing: border-box;
line-height: 1.7;}

table th{
width: 140px;
font-size: 1rem;
font-weight: bold;
text-align: left;
border-right:#737373 1px solid;
border-bottom: #737373 1px solid;
background-color: #2e2e2e;}

table td {
font-size: 1.1rem;
border-bottom: #737373 1px solid;}

table td + td {
border-left:#737373 1px solid;}

table .end{border-bottom: none;}
table .center {text-align: center;}

table td a{
display: block;
width: 190px;
height: 250px;
text-indent: -999em;
background-color: #333;
overflow: hidden;
transition: 0.2s ease-in-out;}

table td.item01 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo01.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item02 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo02.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item03 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo03.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item04 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo04.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item05 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo05.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item06 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo06.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item07 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo07.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item08 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo08.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item09 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo09.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item10 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo10.jpg) left 50% no-repeat;
background-size: 100%;}

table td.item11 a{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/23/03_asus/prd_photo11.jpg) left 50% no-repeat;
background-size: 100%;}

/*----- .scroll -----*/
.scroll {
overflow: auto;
padding-bottom: 10px;
}
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}

/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 0.85rem; 
padding: 0 20px 35px;
color: #fff;}

#footer {
padding-top: 30px;}

