@charset "utf-8";

/***************************************************
　基本　白地
****************************************************/






/****************************************************/


* {
	margin: 0;
	padding: 0;
}

html {
	overflow-y: scroll;
	overflow-x: hidden;
}



body{

	background-color:#9eb0b2;
	color:#212121;

	font-size:0.9em;
	line-height:1.8em;
	font-family:"メイリオ";

	/*background-image:url("img/bg9.jpg");
	background-image:url("http://source.unsplash.com/random");*/
	background-size:cover;

	background-repeat:repeat;
	background-attachment:fixed;
	background-position:left center;

}


/***************************************************
　リンク
****************************************************/

a,
a:link {
	text-decoration: none;
	color:#000000;
	font-weight:bold;
}

a:visited {
	text-decoration: none;
	color:#000000;
}

a:hover {
	color:#000000;
	font-weight:bold;
}
a:focus {
	outline: none;
	color:#000000;
    font-weight:bold;
}

/*list リスト*/
ul,ol{
	/*list-style: none disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman
	cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha */
	list-style: none;
	list-style-position: inside;

	font-size:0.8em;	
	line-height:1.6;
	margin:50px 20px 50px 20px ;

}

li{
	/*list-style: none disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman
	cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha */
	list-style: none;
	list-style-position: inside;
}

li::before{
color:#9eb0b2;
content:"● ";
}


/*スマホ用*/
@media screen and (max-width:889px){
ul,ol{
	margin:50px 2px 50px 2px ;

}

}/*スマホ用*/


/************************************/

/*見出し*/

h1{
	font-size:130%;
	line-height:1.8em;
	margin:-15px 0px 25px 0px;
	text-align:center;
}

h2{
	font-size:110%;
	line-height:1.8em;
	margin:120px 0px 60px 0px;
	text-align:left;
	border-bottom:2px solid #000000;
	padding:3px 0px 0px 0px;
}


h2::before{
	content:"";/**/
}



h3{
	font-size:105%;
	line-height:1.8em;
	margin:100px 0px 60px 0px;
	border-bottom:1px dotted #000000;
}

h3::before{
	content:"";
}



h4{
	font-size:100%;
	line-height:1.8em;
	margin:100px 0px 60px 0px;
	border-bottom:1px dotted #000000;
}

h4::before{
	content:"";
}


/************************************/

/*主な要素*/

hr{
	margin:70px auto;
}

input,button{
	margin:30px;
	padding:12px;
	background-color:#727272;
	color:#ffffff;
	border-radius:7px;

}


img{
	max-width:90%;
	height:auto;
	margin:50px 20px;
	box-shadow:3px 3px 13px 3px rgba(22,22,22,4);
}


blockquote{

	margin:50px 10px 50px 20px ;
	padding:50px 20px 50px 20px ;
	border-radius:7px;
	border:1px solid #000000;

}

pre{

	margin:50px 10px 50px 20px ;
	padding:50px 20px 50px 20px ;
	border-radius:7px;
	border:1px solid #000000;

}


code{

	margin:50px 10px 50px 20px ;
	padding:50px 20px 50px 20px ;
	border-radius:7px;
	border:0px solid #000000;

}

/*段落*/
p {
    margin-bottom:2.0em;
	padding:0px 10px 0px 10px;
}


/*スマホ用*/
@media screen and (max-width:889px){
p {
	padding:0px 3px 0px 3px;
}
}/*スマホ用*/
/************************************/

/*基本*/


#contents{
	padding:30px auto 50px 20px;
	width:100%;
}


#footer{

}

#footer:hover{

}




/****************************************************************/

.displaynone{
	display:none;
}
.displayblock{
	display:block;
}

.cursorp{
	cursor:pointer;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.migiyose{
	text-align:right;
	font-size:0.8em;
}






/******************************************************************
　テンプレート用
*******************************************************************/

/*全体*/

#wrapper{
}

#wrapper input{
	padding:3px 8px 3px 8px;
	margin:3px 3px 3px 3px;

}

/******************************************************************/

/*絵文字表示エリア*/
#moguracity {
	position:fixed;
	z-index:1000;
	color:#eeeeee;
}


#page_menu{
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	background-color:#212121;
	height:60px;
	padding:10px 32px 10px 0px;
	text-align:center;
	display:block;
	z-index:997;
}

#page_menu a{
	font-weight:normal;
}


/*スマホ用*/
@media screen and (max-width:889px){
#page_menu{
	height:75px;
	padding:5px 35px 10px 2px;
	text-align:left;
}
}/*スマホ用*/


#menuicon{
	color:#ffffff;
	cursor:pointer;
	font-size:400%;
	position:fixed;
	right:3px;
	top:30px;
	z-index:996;
}

#menuicon2{
	color:#9eb0b2;
	cursor:pointer;
	font-size:200%;
	position:fixed;
	right:5px;
	top:5px;
	z-index:999;
}

/*スマホ用*/
@media screen and (max-width:889px){
#menuicon{
	font-size:300%;
	right:3px;
	top:10px;
}
#menuicon2{
	font-size:300%;
	right:3px;
	top:10px;
}
}/*スマホ用*/

/******************************************************************/
/*メインエリアmain_article*/
#main_article{
	border:1px solid #212121;
	color:#212121;
	background-color:#eeeeee;
	width:55%;
	margin:130px auto;
	display:none;
	padding:5px 10px 0px 10px;
	font-size:100%;
	border-radius:11px;
}

#indexpage #main_article{
	border:1px solid #212121;
	color:#212121;
	background-color:#eeeeee;
	width:55%;
	margin:250px auto;
	display:none;
	padding:5px 10px 0px 10px;
	font-size:100%;
	border-radius:11px;
}

#main_article a{
	color:#000000;
}




#mogura_msg1{
	margin:50px 10% 120px 10%;
	text-align:center;
}



/*スマホ用*/
@media screen and (max-width:889px){
#main_article{
	width:90%;
	margin:120px auto;
}

#indexpage #main_article{
	width:90%;
	margin:120px auto;
}

}/*スマホ用*/


/******************************************************************/


#moguratokei{
/*	margin:180px auto 20px auto;*/
	margin:180px auto 2px auto;
	text-align:center;
	font-size:70%;
}

/*スマホ用*/
@media screen and (max-width:889px){
#moguratokei{
	margin:80px auto 20px auto;
}


}/*スマホ用*/

/******************************************************************/
//ヘッダ（ページタイトル）
#page_title{
	position:fixed;
	top:200px;
	text-align:center;
	margin:0px auto 300px auto;
}


#page_title a{
#ffffff}


#page_title p{
	text-align:center;
	font-size:0.8em;
}

.indexemoji{
	font-size:100px;
	margin:90px auto;
	text-align:center;
	cursor:pointer;
}

/*スマホ用*/
@media screen and (max-width:889px){
#page_title{
	margin:150px 2% 150px 2%;
	padding:0px 5% 0px 5% ;
line-height:1.7;
}
#page_title h1{
	font-size:200%;
	margin:0px auto 30px auto;

}
#indexpage #page_title{
	margin:150px auto 150px auto;
	padding:0px 5% 0px 5% ;


}
#indexpage #page_title h1{
	font-size:200%;
}

}/*スマホ用*/


/***************************************************************************/


#page_title h1{
	text-align:center;
	font-size:500%;
	margin:140px auto 30px auto;
}

/*スマホ用*/
@media screen and (max-width:889px){
#page_title{
	margin:120px 2% 150px 2%;
}
#page_title h1{
	margin:2px auto 15px auto;
	font-size:200%;
}

}/*スマホ用*/


/*スマホ用*/
@media screen and (max-width:889px){
.indeximage{
	margin:30px auto 20px auto;
	border:0px solid #ffffff;
}

}/*スマホ用*/

/***************************************************************************/


#homesetumei{
	margin:50px auto 30px auto;
	font-size:0.7em;
	line-height:1.6;
	text-align:center;
}
#homesetumei_rireki{
	margin:30px 5% 30px 5%;
	font-size:0.7em;
	line-height:1.4;
	text-align:center;
}


/******************************************************************/
/*通常ウィンドウエリア*/

#main_homes{
	margin:100px 10% 120px 10%;
	position:relative;
	z-index:20;
}



/******************************************************************/
/*pagetop*/

#pagetop{
cursor:pointer;
font-size:300%;
position:fixed;
right:8px;
bottom:20px;
z-index:1111;

}

/******************************************************************/
.tate{
font-size:120%;

}

.batu{
	color:#aaaaaa;
	text-align:right;
	cursor:pointer;
	font-size:1.2em;
}

/******************************************************************/
/*ステータス*/

#status_win{
	border:1px solid #212121;
	background-color:#ffffff;
	width:45%;
	margin:130px auto;
	display:none;
	padding:5px 10px 0px 10px;
	font-size:100%;
	border-radius:11px;
	line-height:1.5em;
}

#status_win form{
	margin:30px auto 30px 7%;;
}


#status_win input{
	margin:3px;
	padding:4px 12px 4px 12px;
	background-color:#9eb0b2;
	color:#212121;
	border-radius:7px;
	font-size:0.7em;

}



/*スマホ用*/
@media screen and (max-width:889px){
#status_win{
	width:90%;
	margin:120px auto;
}
}/*スマホ用*/

/******************************************************/

/*function.php関数で使用 ランダム画像*/
.rand_img0{



    width:300px;
    height:300px;

	border-radius:300px;
		-webkit-border-radius:300px;
		-moz-border-radius:300px;

    margin:0px auto 0px auto ;

    display: inline-block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;

	border:1px solid #000000;

/*
	box-shadow:3px 3px 13px 3px rgba(122,122,122,4);*/

	/*画像フィルタ
	grayscale(100%)
	sepia(100%)
	saturate(200%)
	*/

	-webkit-filter:saturate(100%); 
	-moz-filter:saturate(100%);  
	-o-filter:saturate(100%); 
	-ms-filter:saturate(100%);


}

.indeximage{
	margin:50px auto 50px auto;
	text-align:center;
	cursor:pointer;
}


/*スマホ用*/
@media screen and (max-width:889px){
.rand_img0{

    width:120px;
    height:120px;

	border-radius:120px;
		-webkit-border-radius:120px;
		-moz-border-radius:120px;

	box-shadow:0px 0px 0px 0px rgba(122,122,122,0);

    margin:0px auto 15px auto ;

}

.indeximage{
	margin:20px auto 10px auto;
}

}/*スマホ用*/


/******************************************************/


.menu_botan{
	cursor:pointer;
	font-size:0.7em;
	line-height:2.6em;
	padding:2px 10px 2px 10px;
	margin:1px;
	border-radius:11px;

	border:2px solid #ffffff;
	color:#ffffff;
/*
	border:1px solid #212121;
	background-color:#ffffff;
	color:#212121;
*/
}

.menu_botan:hover{
	border:3px solid;
}


.btn1{
	cursor:pointer;
	font-size:0.7em;
	line-height:2.6em;
	padding:2px 10px 2px 10px;
	margin:1px;
	border-radius:11px;

	border:1px solid #9eb0b2;

}


/******************************************************/


.gallery{
    width:130px;
    height:130px;

    margin:3px 3px 3px 3px ;

    display: inline-block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;

    border:0px solid #ffffff;

	border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;

	box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-webkit-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-moz-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
}

.js_randclickimg{
    width:90%;
    height:300px;

    margin:30px 2% 30px 2%;

    display: inline-block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;

    border:0px solid #ffffff;

	border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;

	box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-webkit-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-moz-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
}


.rand_img2{
    width:70%;
    height:350px;

    margin:0px 2% 0px 2%;

    display: inline-block;
    background-position:top center;
    background-repeat:no-repeat;
    background-size: cover;

	border:1px solid #000000;


	border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;
/*
	box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-webkit-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-moz-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
*/

}
/*スマホ用*/
@media screen and (max-width:889px){
.rand_img2{
    width:100%;
    height:300px;
    margin:0px auto 0px auto;

}

}/*スマホ用*/


/******************************************************/