body{
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}


html {overflow: auto;}

img{
margin : 0;
padding : 0;
border: none;
}

/* ヘッダー */
#header{
margin: 0;
padding:0;
text-align: center;
background: #fff url(img/title_bg.jpg) no-repeat;
background-position: center bottom;
overflow: hidden;
}



/* パンクズ */

#topicpath{
margin : 0;
padding : 3px 0 0 0;
background: rgba(255,255,255,0.7);
}
#topicpath p{
margin : 0 auto;
max-width :500px;
padding-top : 3px;
font-size : 12px;
line-height : 14px;
text-align: left;
float: left;
}

@media print, screen and (min-width: 769px) { /* for PC  */
.topicpath-in{
margin : 0 auto;
padding : 0 0 0 10px;
max-width :960px;
overflow:hidden;
}
} /* end for PC */


@media screen and (max-width: 768px) { /* for SP,Tablet */
#topicpath{
margin : 0;
padding : 4px 0 2px 10px;
overflow:hidden;
}
} /* end for SP,Tablet */



/* シェアボタン */
#share{
margin: 0 auto;
padding :0 0 5px 0;
overflow:hidden;
width: 320px;
height: 20px;
float: right;
}

#share ul{
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}

#share ul:after {
overflow: hidden;
}

#share li{
float: left;
margin: 0 0 0 5px;
padding: 0;
display: inline-block;
height: 20px;
overflow: hidden;
}

.fb-like {
display: inline-block;
height: 20px;
overflow: hidden;
}
.fb_iframe_widget span {
vertical-align: top !important;
}
.fb-share-button{
margin: 0;
padding: 0;
text-align: left;
}


/* タイトル */
#title{
margin: 0;
text-align: center;
}
@media print, screen and (min-width: 769px) { /* for PC  */
#header{background-size: 100%;}
#title{background-size: 100%;padding:30px 0;}
#title img{width: 250px;margin: 0 auto;padding:0;}
}

@media screen and (max-width: 768px) { /* for SP */
#header{background-size: 130%;}
#title{padding:15px 0;}
#title img{width: 40%;margin: 0 auto;padding:0;}
}


/* 概要 */

#vr-gaiyou{
margin : 30px auto 50px auto;
background: #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
border-radius: 8px;
color:#41656b;
}
@media print, screen and (min-width:769px) {
#vr-gaiyou{max-width :92%;padding: 1em 0;text-align: center;}
}
@media screen and (max-width: 768px) {
#vr-gaiyou{max-width :84%;padding: 5%;text-align: left;}
}



/* リスト枠　右斜 */
#vr-contents {
background:#00c9ff;
background: linear-gradient(135deg, #d0ffd5, #3fd6ff);
transform: skew(0deg, -2deg);
}
#vr-contents #vr-list{
transform: skew(0deg, 2deg);
margin : 0 auto;
padding : 0;
max-width :94%;
overflow: hidden;
clear:both;
}



/* 一覧 */

#vr-list h3{
margin : 20px auto 5px auto;
padding : 0;
clear:both;
text-align: center;
}

#vr-list ul{
margin : 0;
padding : 0 0 20px 0;
clear:both;
overflow: hidden;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

#vr-list li{
float: left;
padding:0;
margin: 1%;
list-style: none;
display: inline-block;
text-align: center;
font-size: 12px;
line-height : 140%;
color:#2386af;
background:#fff;
}
@media print, screen and (min-width:769px) {
#vr-list h3{width: 60%;}
#vr-list li{width: 31.3%;}
}
@media screen and (max-width: 768px) {
#vr-list li{width: 48%;}
}

#vr-list li h4{
margin : 0;
padding : 8px 0 4px 0;
color:#2386af;
font-size: 16px;
clear:both;
text-align: center;
font-weight: normal;
}


#vr-list li p{
margin : 0;
padding : 2px 0 4px 0;
text-align: center;
}

.ie7 #vr-list li{
width: 240px;
}


#vr-list img{
width :96%;
border-radius: 4px;
}
#vr-list a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha( opacity=70 )";
}




/* コピーライト */
#cr{
padding : 8px 0;
font-size : 11px;
line-height : 130%;
clear:both;
text-align: center;
}