/* バーチャル背景＆壁紙集 */


/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/

html {-webkit-overflow-scrolling:touch;}

body {
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    text-align:center;
}

#contents img,
#title img {
    max-width:100%;
    height:auto;
}


/* head */
#title {
    position:relative;
    background:url("../images/wallpaper/head_bg.png") repeat-x center top;
    margin:0 auto 80px;
}
#title h1 {
    display:block;
    width:100%;
    max-width:950px;
    height:400px;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../images/wallpaper/head_title.png");
    margin:0 auto;
    text-indent:-9999px;
}
#title .anime {
    position:absolute;
    left:50%;
    bottom:-3%;
    margin-left:-430px;
}


/* contents */
#contents {
    width:90%;
    max-width:950px;
    margin:0 auto 80px;
    text-align:left;
}
#contents * {
    box-sizing:border-box;
}


/* tab */
input.tab_check {display:none;}
ul#tab {
    position:relative;
    width:100%;
    max-width:950px;
    margin:0 auto;
    text-align:left;
    line-height:0;
    font-size:0;
    letter-spacing:-0.5em;
}

ul#tab li {
    display:inline-block;
    width:43.15%;
    height:90px;
    letter-spacing:normal;
}
ul#tab li:first-child {
    margin-right:3%;
}
ul#tab li label {
    display:block;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:left top;
    background-size:contain;
    box-sizing:border-box;
    cursor:pointer;
}
ul#tab li.tab_wp label {
    background-image:url("../images/wallpaper/tab_wp.png");
}
ul#tab li.tab_vwp label {
    background-image:url("../images/wallpaper/tab_vwp.png");
}

.cnt_area {display:none;}
#wp:checked ~ #cnt_wp,
#vwp:checked ~ #cnt_vwp {
    display:block;
}

.cnt_area {
    width:100%;
    margin:0 auto 80px;
    padding:6% 3% 1%;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    text-align:left;
}
#cnt_wp.cnt_area {background-color:#fbdac8;}
#cnt_vwp.cnt_area {background-color:#d0e6e5;}

.cnt_area h2 {
    margin-bottom:50px;
}
.cnt_area ul {
    margin:0 auto 8%;
    letter-spacing:-0.5em;
}
.cnt_area ul li {
    display:inline-block;
    position:relative;
    width:48.5%;
    letter-spacing:normal;
}
.cnt_area ul li:nth-child(odd) {
    margin-right:3%;
}
.cnt_area li .new {
    display:block;
    position:absolute;
    top:-12%;
    right:5%;
    width:18%;
}
.cnt_area li .img {
    display:block;
    margin-bottom:20px;
}
.cnt_area li a {
    display:block;
    margin-bottom:15px;
    padding:8px 16px;
    border-radius:16px;
}
#cnt_wp.cnt_area li a {background-color:#f3697b;}
#cnt_vwp.cnt_area li a {background-color:#8bbbb9;}
.cnt_area li a span {
    display:inline-block;
    width:100%;
    background:url("../images/wallpaper/arrow_dl.png") no-repeat right center;
}
.cnt_area li a img {
    vertical-align:middle;
}


/* setting */
h2.setting_title {
    margin-bottom:30px;
    text-align:left;
}
.setting_area {
    position:relative;
}
input.setting_check {display:none;}
.setting_area label {
    display:block;
    width:100%;
    background-color:#eebca1;
    margin-bottom:20px;
    padding:0 3%;
    border-radius:4px;
    text-align:left;
    cursor:pointer;
}
.setting_area label span {
    display:inline-block;
    width:100%;
    background-repeat:no-repeat;
    background-position:right center;
    background-image:url("../images/wallpaper/icon_plus.png");
    padding:12px 0;
}
.setting_area label img {
    vertical-align:middle;
}

.setting_cnt {
    visibility:hidden;
    height:0;
    padding:0 4%;
    transition:.3s all ease-in;
}
.setting_cnt h3 {
    font-size:1.0em;
    font-weight:normal;
}
.setting_cnt ol {
    padding-left:1.5em;
}
.setting_cnt p.note {
    padding-left:1em;
    text-indent:-1em;
}
.setting_cnt .eol {
    margin-bottom:1em;
}


input#setting_pc:checked ~ label.label_pc,
input#setting_sp:checked ~ label.label_sp,
input#setting_zoom:checked ~ label.label_zoom {
    margin-bottom:0;
}
input#setting_pc:checked ~ .setting_cnt.cnt_pc,
input#setting_sp:checked ~ .setting_cnt.cnt_sp,
input#setting_zoom:checked ~ .setting_cnt.cnt_zoom {
    visibility:visible;
    height:auto;
    background-color:#fbdac8;
    margin-top:-2px;
    margin-bottom:20px;
    padding:2% 4% 4%;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    text-align:left;
    line-height:1.8;
    font-size:1.2em;
}
input#setting_pc:checked ~ label.label_pc span,
input#setting_sp:checked ~ label.label_sp span,
input#setting_zoom:checked ~ label.label_zoom span {
    background-image:url("../images/wallpaper/icon_minus.png");
}



/* 950px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {


/* head */
#title {
    background:none;
    margin:0 auto 12%;
}
#title h1 {
    height:0;
    background-image:url("../images/wallpaper/head_title_950.png");
    background-size:contain;
    padding-top:42.10%;
}
#title .anime {
    left:3%;
    bottom:-3%;
    width:26.3%;
    margin-left:0;
}


/* tab */
ul#tab li {
    height:auto;
}
ul#tab li label {
    height:0;
    padding-top:21.95%;
}
.cnt_area li a img {
    width:90%;
    max-width:346px;
}




}
/*-------------------------------------------------------------------------------------------*/
/* 950px以下 END */



/* 750px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 750px) {

section .pc {display:none;}
section .sp {display:block;}


/* head */
#title {
    margin:0 auto 8%;
}
#title h1 {
    background-image:url("../images/wallpaper/head_title_sp.png");
    padding-top:60%;
}
#title .anime {
    left:3%;
    bottom:30%;
    width:26.3%;
}


/* tab */
ul#tab li {
    width:40.666%;
}
ul#tab li:first-child {
    margin-right:1.5%;
}
ul#tab li label {
    padding-top:27.3%;
}
ul#tab li.tab_wp label {
    background-image:url("../images/wallpaper/tab_wp_sp.png");
}
ul#tab li.tab_vwp label {
    background-image:url("../images/wallpaper/tab_vwp_sp.png");
}

.cnt_area {
    margin:0 auto 10%;
    padding:6% 6% 1%;
}
.cnt_area h2 {
    width:80%;
    margin-bottom:8%;
}
.cnt_area ul li {
    width:100%;
    margin-bottom:12%;
}
.cnt_area li a {
    padding:2% 4%;
}
.cnt_area li img {
    width:100%;
}



}
/*-------------------------------------------------------------------------------------------*/
/* 750px以下 END */



/* 430px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 430px) {


.setting_area label span {
    background-size:7%;
}
.setting_area label img {
    width:45%;
}



}
/*-------------------------------------------------------------------------------------------*/
/* 430px以下 END */