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

html,body { 
	height:100%; margin:0; 
	//font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow:hidden;
}

#navi {
	top:6%;left:8%;
	width:100%;
	list-style:none;	
	font-size:18px;
	color:#fff;
	position:fixed;
	z-index:100;
}
@media screen and (max-width:425px) {
    #navi { left:2%; }
}
#navi li {
	margin:0 0 1% 1%;
	float:left;
	background-color:rgba(0,0,0,0.4);
}
#navi li:hover {
	color: #F7CBB1;/*#DD8586;*/
	cursor:pointer;
}

#container { 
	position:absolute;
	width:100%;height:100%;
	top:0;
	transition:top 1s ease;
 }
.page { position:relative;
	width:100%;height:100%;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

#d1 { background-image:url(img/background4.jpg); }
#d1 span { font-size:78px;color:#fff;position:absolute;bottom:25%;left:10%;background:rgba(0,0,0,0.15); }
#d1 img { width:230px;height:480px;position:absolute;bottom:0;right:15%; }
#d2 { background-image:url(img/profile_bg.jpg); }
#d3 { background-image:url(img/topicks_bg.jpg); }
#d4 { background-image:url(img/memos_bg.jpg); }
#d5 { background-image:url(img/gallery_bg.jpg); }
#d6 { background-image:url(img/contact_bg.jpg); }

@media screen and (max-width:768px) {
	#d1 { background-image:url(img/background4m.jpg); }
	#d2 { background-image:url(img/profile_bgm.jpg); }
	#d3 { background-image:url(img/topicks_bgm.jpg); }
	#d4 { background-image:url(img/memos_bgm.jpg); }
	#d5 { background-image:url(img/gallery_bgm.jpg); }
	#d6 { background-image:url(img/contact_bgm.jpg); }
}

.contents {
	position:absolute;
	margin:auto;top:20%;bottom:0;left:0;right:0;
	width: 60%;
	min-width:400px;
	height: 550px;
}
.textbox {
	height: 540px;
	overflow: scroll;
	font-size: 16px;
	color: #000000;
	background-color: rgba( 0, 0, 0, 0.6 );
	color:#fff;
	border:#fff 10px solid;
	padding: 0 10px 0 10px;
}
.textbox a {
	color:#fff;
}
.textbox a:hover {
	color:orange;
}
.contents2 {
	position:absolute;
	margin:auto;top:20%;bottom:0;left:0;right:0;
	width:42%;
	font-size:14px;
	min-width:360px;
	max-height:65%;
	overflow:auto;
}
#div1 { float:left;margin-right:30px; }
#div2 { float:left;margin-left:0px; }
/*@media screen and (max-width:1500px) {
.contents2 {
	width:90%;
	padding:5px;
	margin-top:1%;
	margin-left:0;
	margin-right:5%;
	font-size:14px;
}
}*/

.description1 {
	width:100%;
	display:inline-block;
	line-height:1.2em;
	background-color: rgba( 255, 255, 255, 0.8 );
	padding:8px;
	box-sizing:border-box;
	font-weight:650;
	font-size:16px;
}
.description2 {
	width:100%;
	display:inline-block;
	background-color: rgba( 0, 0, 0, 0.6 );
	color:#fff;
	line-height:1.3em;
	padding:8px;
	border-left: rgba( 255, 255, 255, 0.8 ) 15px solid;
	border-right: rgba( 255, 255, 255, 0.8 ) 15px solid;
	border-bottom: rgba( 255, 255, 255, 0.8 ) 15px solid;
	box-sizing:border-box;
}
.description2 a {
	text-decoration:none;
	color:#fff;
}
.description2 a:hover {
	font-size:16px;
	color:#6FF;
}
.description2 ul {
	margin-left:-20px;
}

.textbox_s {
	width:20%;
	height:10%;
	position:absolute;
	margin:auto;
	top:75%;right:0;bottom:0;left:0;
	color:#fff;
	font-size:24px;
}
#d5 #gal-frame {
    position:relative;
    //width:65%;height:75%;
    //margin:150px auto 0 auto;
    
}
#d5 #iframe0 {
    //margin-top:150px;
    position:absolute;
    top:120px;
	border:0px;
}
@media screen and (max-width:768px) {
	#d5 #iframe0 {
		width:90%;
	}
}
@media screen and (max-width:450px) {
	#d5 #iframe0 {
		width:100%;
        top:100px;
	}
}


input { display:none; }

#r1:checked ~ #container { top:0%; }
#r2:checked ~ #container { top:-100%; }
#r3:checked ~ #container { top:-200%; }
#r4:checked ~ #container { top:-300%; }
#r5:checked ~ #container { top:-400%; }
#r6:checked ~ #container { top:-500%; }

/* for the gallery page */
body { position:relative; overflow:hidden; }
#r11, #r12, #r13, #r14, #r15 {
	display: none;
}
#gallery_page {
	position:absolute;
	width:100%;
	top:12%;
}
#s-menu {
	margin: 0 auto;
	width: 70%;
	height: 40px;
}
#s-menu div {
	display: block;
	float: left;
	min-width: 14%;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-style: bold;
	background-color: blue;
	color: #ffffff;
	margin: 0 30px 0 0;
	transition: opacity ease 0.3s;
}
#s-menu div:hover {
	color: orange;
	cursor: pointer;
	/*width: 16%;
	height: 32px;
	font-size: 20px;*/
}
@media screen and (max-width:425px) {
    #s-menu div {
	    min-width: 14%;
        margin-top:2px;
    }
}
li {
	list-style: none;
}
.clL {
	clear: left;
}
#gal-stage {
    position:relative;
	width: 70%;
    min-height: 800px;
	margin: 0 auto;
}
    @media screen and (max-width:425px) {
        #gal-stage { width:100%; }
    }
#ifr1, #ifr2, #ifr3, #ifr4, #ifr5 {
	opacity: 0;
	transition: opacity 2s ease;
	position: absolute;
	top: 2%;
	left: 0;
}
#r11:checked ~ #gal-stage #ifr1 {
	opacity: 1;z-index:100;
}
#r12:checked ~ #gal-stage #ifr2 {
	opacity: 1;z-index:100;
}
#r13:checked ~ #gal-stage #ifr3 {
	opacity: 1;z-index:100;
}
#r14:checked ~ #gal-stage #ifr4 {
	opacity: 1;z-index:100;
}
#r15:checked ~ #gal-stage #ifr5 {
	opacity: 1;z-index:100;
}
#r11:checked ~ #s-menu #menu1 {
	color: orange;
	/*width: 150px;
	height: 32px;
	font-size: 20px;*/
}
#r12:checked ~ #s-menu #menu2 {
	color: orange;
	/*width: 150px;
	height: 32px;
	font-size: 20px;*/
}
#r13:checked ~ #s-menu #menu3 {
	color: orange;
	/*width: 150px;
	height: 32px;
	font-size: 20px;*/
}
#r14:checked ~ #s-menu #menu4 {
	color: orange;
	/*width: 150px;
	height: 32px;
	font-size: 20px;*/
}
#r15:checked ~ #s-menu #menu5 {
	color: orange;
	/*width: 150px;
	height: 32px;
	font-size: 20px;*/
}