@charset "utf-8";
/* CSS Document */

/*============================================
リセット
============================================*/
* {
padding:0px;
margin:0px;
}

*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}

/*============================================
全体領域
============================================*/ 
#slider {
display:flex;
position:relative;
width:500px;
height:350px;
margin:0px;
border:0px;
padding:0px 0px 334px 80px;
background-image:url(../sisetu/images/back.jpg);
flex-direction:row;/*左から右へ*/
justify-content:flex-start;/*左寄せ*/
flex-wrap:nowrap;/*改行*/
}

/*============================================
写真領域
============================================*/ 
#gazou {
position:absolute;
top:50px;
left:0px;
width:500px;
height:300px;
margin:0px;
border:0px;
padding:0px;
background-color:#FFF;
}

/*============================================
ラジオボタン外観リセット
（switchという名に属するものだけ）
============================================*/ 
#slider input[name='switch'] {
display:none;
}

/*============================================
ラベル各々の設定
============================================*/ 
#slider label {
display:block;
width:30px;
height:16px;
margin:0px;
border:0px;
padding:0px;
cursor:pointer;
opacity:0;
}

/*ラベルのホーバー状態*/
#slider label:hover {
display:block;
width:30px;
height:16px;
margin:0px;
border:0px;
padding:0px;
background-image:url(../sisetu/images/maru.jpg);
cursor:pointer;
opacity:1;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

/*チェック時　隣接タグであるラベルの状態*/
#slider input[name='switch']:checked + label {
display:block;
width:30px;
height:16px;
margin:0px;
border:0px;
padding:0px;
background-image:url(../sisetu/images/maru.jpg);
cursor:pointer;
opacity:1;
}

/*チェック時　隣接の隣接タグである（画像が入る）divの状態*/
#slider input[name='switch']:checked + label + div {
opacity:1;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}

/* チェックなし　間接セレクタ内の（画像が入る）divの状態 */
#slider input[name='switch'] ~ div {
opacity:0;/*透明*/
}