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

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body{	
		margin:0;
		padding:0; 
		background-image: url(../image/sora.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-color: #464646;
		font-family: 'Noto Sans Japanese', sans-serif;
}	
	





#wrap{
		width: 1200px;
		margin:0 auto;
		
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ヘッダー＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#header{
		width: 1200px;
		background-color:rgba(255,255,255,0.70);

}

#topA{
		width: 300px;
		float: left;
		padding: 20px;
		font-size: 30px;
}


#topA h1{

		color: #fff;
  		text-shadow: 0 0 15px green;


}



}

#topB{
		width: 600px;
		height: 300px;
		
}


.logo{	
		padding-top: 20px;
		margin-left: 220px;
}

.logo:hover{
		opacity: 0.70;
		transition: 1.0s ;
}




#topC{
		width: 200px;
		background-color: green;
		border-radius: 5px;
		margin-left: 1000px;
		text-align: center;
}




#topC p a{
		text-decoration: none;
		color: white;
}

#topC:hover{
		opacity: 0.70;
		transition: 1.0s ;
}


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊メニュー＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/



.button_base {
    margin: 0;
    border: 0;
    font-size: 18px;
    /*position: relative;*/
    top: 50%;
    left: 50%;
    /*margin-top: -25px;
    margin-left: -100px;*/
    width: 200px;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}

.button_base:hover {
    cursor: pointer;/*カーソルが指になるnaru*/
}

.b05_3d_roll {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.b05_3d_roll div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    padding: 10px;
    border: white solid 1px;/*枠の色*/
    pointer-events: none;
    box-sizing: border-box;/*ボーダーの線を内側に入れる*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b05_3d_roll div:nth-child(1) {
    color: white;/*中間の文字色*/
    background-color:  #87CEFA;/*変化後の背景色*/
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;



}

.b05_3d_roll div:nth-child(2) {
    color: white;/*変化前の文字色*/
    background-color: #87CEFA;/*変化前背景色*/
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b05_3d_roll:hover div:nth-child(1) {
    color: white;/*変化後の文字色*/
    text-decoration: underline;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);

}

.b05_3d_roll:hover div:nth-child(2) {
    background-color: #87CEFA;/*下側の背景色*/
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);

}

.menu{
		float: left;
		
	}


.haikei{
		opacity: 0.90;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊コンテンツ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#contents{
		
		background-color: rgba(255,255,255,0.80);
}

.news{
		color: #87CEFA;
  		font-size: 50px;
		text-align: center;
		text-decoration: underline;
		padding-top: 20px;
		padding-bottom: 30px;
}

#contentsA{
		width: 1000px;
		margin-left: 100px;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊テーブル＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

table{
		width: 1000px;

}

.kijiA{
		border:solid 2px white;
		border-left: solid 5px #87CEFA;
		background-color: rgba(0,255,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}

.kijiB{
		border:solid 2px white;
		border-right: solid 5px #87CEFA;
		background-color: rgba(0,230,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}

.kijiC{
		border:solid 2px white;
		border-left: solid 5px #87CEFA;
		border-top: solid 5px #87CEFA;
		background-color: rgba(0,255,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}

.kijiD{
		border:solid 2px white;
		border-right: solid 5px #87CEFA;
		border-bottom: solid 5px #87CEFA;
		background-color: rgba(0,230,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}

.kijiE{
		border:solid 2px white;
		border-left: solid 5px #87CEFA;
		border-bottom: solid 5px #87CEFA;
		background-color: rgba(0,255,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}

.kijiF{
		border:solid 2px white;
		border-right: solid 5px #87CEFA;
		border-top: solid 5px #87CEFA;
		background-color: rgba(0,230,255,1);
		color: rgba(0,0,0,1);
		padding: 5px;
}
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊お申し込みフォーム＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#contentsB{
		width: 800px;
		margin-left: 200px;
}

.under{
		text-decoration: underline;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊お申し込みフォームボタン＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#contentsC{
		width: 400px;
		margin-left: 400px;

}

.form{
		font-size: 20px;
		text-align: center;
		margin-top: 30px;
		
		
}

.form a{
		color: white;
		text-shadow: 0 0 10px black;
		padding: 30px;
		background-color: rgba(255,255,0,1);
		text-decoration: none;
		border-radius: 15px;

}

.form a:hover{
		background-color: rgba(255,0,0,0.50);
		transition: 0.7s;
}

.retu{
		margin-bottom:20px;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊フッター＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#footer{

		width: 1200px;		
		height: 220px;
		background-color:#8EF1FF;
		opacity: 0.80;

}

#footerA{
		width: 300px;
		height: 180px;
		float: left;
		margin-left: 50px;

}

.footermenu{
		font-size: 15px;

}

.footermenu li a{
		text-decoration: none;
		color:green ;
		opacity: 0.70;
		
}

.footermenu li a:hover{
		color: blue;
		opacity: 0.40;
}

#footerB{
		width: 300px;
		height: 180px;
		float: left;
		margin-left: 50px;
}

#footerC{
		width: 300px;
		width: 180px;
		float: left;
}


.footerBmenu li{
		display: inline;

}

.ad{
		padding-top: 150px;
		color: white;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊その他＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

.clearfix:after{
		content: ".";
			display: block;
			visibility:hidden;
			height:0.1px;
			font-size:0.1em;
			line-height:0;
			clear:both;	
}

#scroll-top{   /* ボタンのデザイン */
	width:150px;   /* ボタンの横幅 */
	height:50px;   /* ボタン高さ */
	background-color:#1F5E73;   /* ボタンの背景色 */
	color:#fff;    /* ボタンの文字色 */
	text-align:center;    /* ボタン内の文字を中央に */
	position:fixed;    /* 画面がスクロールしても固定する */
	right:20px;    /* 固定する場所は右から20px */
	bottom:20px;    /* 固定する場所は下から20px */
	display:none;    /* ボタン表示は最初は非表示 */
	margin:0 0;    /* ボタンの余計な余白はいらない */
	border-radius: 10px;        /* 角を丸く */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px; 
	cursor:pointer;   /* カーソルを指のマークに */
}
#scroll-top p{        /* ボタンのテキスト部分 */
	font-weight: bold;    /* 文字を太く */
	line-height: 50px;    /* 文字の高さ */
	margin: 0 0 0 0;      /* 余計な余白はいらない */
}