@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;
		
	}



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

#contents{
		width: 1200px;
		height: 500px;
		background-color:rgba(255,255,255,0.80);
	    
		
}

#contentsA{
		float: left;
		width: 600px;
		height: 500px;
		margin-top: 50px;
		margin-left: 50px;
		
}

#sideA{
		margin-top: 100px;

}

#contentsA dl dd{
		line-height: 170%;
}

.aisatu{
		color: white;
		font-size: 25px;
		text-shadow: 0 0 30px black;

}

.sen0{
		width: 475px;
		margin-left: -12.5px;
		border:#8EF1FF solid 1px;
		box-shadow: 0 0 10px blue;
}

.ben{
		text-decoration: underline;
		font-weight: bold;
}

.daihyou{
		font-weight: bold;
}

#contentsB{
		
		float: right;
		width: 500px;
		height: 500px;
		margin-top: 50px;
}


.dai{
		box-sizing: border-box;/*ボーダーの線を内側に入れる*/
        -webkit-box-sizing: border-box;			
        -moz-box-sizing: border-box;
    	border:#8EF1FF solid 5px;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊メインコンテンツ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#maincontents{
		width: 1200px;
		height: 600px;
		background-image: url("../image/kabe.jpg");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-attachment: fixed;


}





#maincontents dl{
		padding-top: 100px;
		padding-left: 50px;
}


#maincontents dl dt{
		color: #fff;
  		text-shadow: 0 0 15px #FF6694;
  		font-size: 50px;
}

#maincontents dl dd{
		color: #fff;
  		text-shadow: 0 0 15px #FF6694;
  		font-size: 30px;
}

em{
  background: linear-gradient(transparent 30%, #fbd 30%);/*マーカー*/
}


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊サブAコンテンツ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#subAcontents{
		width: 1200px;
		background-color:rgba(255,255,255,0.80);
}

.menuA li{
		display: inline;
		
}

.menuA li a:hover{
		opacity: 0.50;
		transition:1s;
}

.waku{
	box-sizing: border-box;/*ボーダーの線を内側に入れる*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:#8EF1FF solid 5px;

}



/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊サブBコンテンツ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

#subBcontents{
		width: 1200px;
		height: 800px;
		background-image: url("../image/genba.jpg");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-attachment: fixed;

}



.arrow_box {
	position: relative;
	background: pink;
	border: 5px solid #8EF1FF;
	margin-top: 100px;
	margin-left: 50px;
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(168, 213, 212, 0);
	border-left-color: #a8d5d4;
	border-width: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #c2e1f5;
	border-width: 37px;
	margin-top: -37px;
}

#wakuwaku{
		width: 600px;
		line-height: 200%;
		float: left;
		color: white;
}


.rei{
	color: red;
  	background: linear-gradient(transparent 30%, yellow 30%);/*マーカー*/
}


.syoukai{
		border:#8EF1FF solid 5px;
		
		transform: rotate(-10deg);
		margin-right: 70px;
		margin-top: 50px;
		float: right;

}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊サブCコンテンツ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/


.cap{
		text-align: center;
		color: white;
		text-shadow: 0 0 30px white;
}

.sirase{
		text-decoration: none;
		color: blue;
}

.taitle2{
		font-size: 20px;
		text-decoration: underline;
}

figure {
	position: relative;
	overflow: hidden;
	width: 350px;
}
figcaption {
	position: absolute;
	bottom: -60px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}
figure:hover figcaption {
	bottom: 0;
}




#subCcontents{
		width: 1200px;
		height: 800px;
		background-color:rgba(255,255,255,0.80);
}


#subC1{
		width: 350px;
		height: 800px;
		float: left;
		margin-left: 25px;
		margin-top: 25px;

}

#subC2{
		width: 350px;
		height: 800px;
		float: left;
		margin-left: 25px;
		margin-top: 25px;
}


.sen{
		width: 325px;
		margin-left: -12.5px;
		border:#8EF1FF solid 1px;
		box-shadow: 0 0 10px blue;
}

.ken{
	box-sizing: border-box;/*ボーダーの線を内側に入れる*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:#8EF1FF solid 5px;
}

#subC3{
		width: 300px;
		height: 800px;
		float: left;
		margin-top: 25px;
		margin-left: 125px;
}

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

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

#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;      /* 余計な余白はいらない */
}