@charset "utf-8";

/*ここからreset-------------------------*/

*{/*全称セレクター*/
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
}
ul,ol{
	list-style:none;
}
img{
	vertical-align:middle;
}

/*ここからFluid-img*--------------------*/

img{/*画面幅に合わせて画像サイズが伸縮*/
	max-width:100%;
}

/*ここからHTML--------------------------*/

html{
	font-family:verdana,sans-serif;
	font-size : 75%; /*レスポンシブタイプセッティングの指定*/
	line-height:1.5;
}
body{
	color:#fff;
}

/*ここからhgroup------------------------*/
h1 {
	font-size : 3em; /* 48px */
	line-height : 1; /* 48px */
	margin-bottom : 0.5em;
	color:#800080;
} 
h2 {
	font-size : 2.25em; /* 36px */
	line-height : 1.3333; /* 48px */
	margin-bottom : 0.6667em;
} 
h3 {
	font-size : 1.5em; /* 24px */
	line-height : 1; /* 24px */
	margin-bottom : 0.3em;
	background:#cd44d3 ;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c6c), to(#96c));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#c6c, #96c);	/*同上*/
	background-image: linear-gradient(#c6c, #96c);			/*同上*/
	-webkit-box-shadow: 0px 2px 5px #396;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #396;			/*同上*/

	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
	padding:0.4em;
} 
hgroup h2,h4,h5,h6 {
	font-size : 1em; /* 16px */
	line-height : 1.5; /* 24px */
	margin-bottom : 1.5em;
	color:#118168;
} 

p{
	color:#118168;
}


h1 span{
	font-size:0.5em;
}

h1 a{
	color:#800080;
}


/*ここからheader------------------------*/

header{
	text-align:center;
	padding-top:1.5em;
	background:#ff4470 url("../images/head.jpg");
	margin-bottom:1.3333em;
}


header h1{
	margin-bottom:0.5em;
}

/*ここからnav---------------------------*/



/*ここからデモボタン--------------------*/



.clearfix:after {   
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
/* clearfix for ie7 */
.clearfix{
    display: inline-block;
}
.clearfix {
    display: block;
}


nav ul {
	float:center;
	margin:0 auto;
}


#box{/*ここをnavにいれる*/
  width:19.5em;
  margin:0 auto;
  color: #3F2F69;
  text-align: center;
	max-width:100%;
}
.boxin{
  position: relative;
  float: left;
  width: 6.5em;
  height: 6.5em;
}
#box a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 6.5em;
  height: 6.5em;
  padding: 0px;
  border-radius: 50%;/*角丸のサイズ*/
  color: #fff;
  font-size: 0.8em;
  line-height: 6.5em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  z-index: 10;
  border:solid 0.4em #ddfff4;

}

#circle1{
  background: #00ffa1;
  background: rgba(0,255,161,.8);

}
#circle2{
  background: #fbff1e;
  background: rgba(251,255,30,.8);
}
#circle3{
  background: #4cc9d4;
  background: rgba(76,201,212,.8);
}
#circle4{
  background: #db59ff;
  background: rgba(219,89,255,.8);
}
#circle5{
  background: #f55270;
  background: rgba(245,82,112,.8);
}
#circle6{
  background: #ff8d47;
  background: rgba(255,141,71,.8);
}

#box a:hover{
	background: url("../images/bottan_s.png") rgba(0,0,0,.5);
	border:solid 0.5em #f09;
}

/*ここからcontents----------------------*/

#contents {
	width : 90%;/*画面左右に余白できる*/
	max-width:1480px;
	margin : 0 auto;
	text-align : center;
}
#contents p { 
	margin-bottom : 1.5em;
	text-align : left;
}
#contents img { 
	box-shadow : 0 0 5px #2f1f1f;
	text-align:center;
}

#contents img.bt{ 
	margin-bottom : 1.5em; 
}

/*ここからsection*/

section{
	margin:0 auto 0.5em;
	background:#cfc;
	background: rgba(204,255,204,0.7);
	padding : 0.3em;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */ 
	-webkit-box-shadow: 0px 2px 5px #396;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #396;
}
section a{
	color:#800080;

	text-decoration:underline;
}
section a:hover{
	color:#cd44d3;
	text-decoration:none;
}


/*ここからfooter*/

footer {
	padding : 1.5em 0;
	color : white;
	text-align : center;
	background : #ff4470 ;
}
footer a{
	color : white;
	text-decoration :underline;
}
footer p{
	color:#fff;
}

/*ここからPAGE TOP*/
#pagetop {
	clear: both;
}
#pagetop a {
	background-color: rgba(255,255,255,0.7);	/*背景色。左３つの数値はRGBカラーでの色指定。一番右は透明度（0.7＝70％）の指定。*/
	color: #eb537b;	/*文字色*/
	text-decoration: none;
	text-align: center;
	width: 11em;		/*ボックスの幅*/
	font-size: 10px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔。少し広げる設定。*/
	display: inline-block;
	border-radius: 1em;	/*角丸のサイズ*/
}
#pagetop a:hover {
	background-color: rgba(255,255,255,1);	/*背景色。左３つの数値はRGBカラーでの色指定。一番右は透明度（1＝100％）の指定。*/
	color: #eb537b;
}

/*スクロール*/
.scr1 {
   overflow-y: scroll;   /* スクロール表示 */ 
   width: 95%;
   height: 200px;
   padding:20px;
 }
.scr1 a {
  color: #c06;
  text-decoration:underline;
}

/*ここから768px以上の画面の設定-------------------------------------------------*/

@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/

/*ここから768px用contents---------------*/
#contents {
	text-align : left;
}


/*ここから768px用nav--------------------*/

#box{/*ここをnavにいれる*/
 	 width:39em;
}

#box a:hover{
	background: url("../images/bottan.png") rgba(0,0,0,.5);
  top: -0.5em;
  left:-2em;
  width: 7em;
  height: 7em;
  font-size: 1.5em;
  line-height: 7em;
  z-index: 100;
}
/*768pxここまで*/}


/*ここから1024px以上の画面の設定------------------------------------------------*/
@media screen and (min-width : 1024px) {

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

/*ここから1024px用header----------------*/
header h1{
	float:left;
	margin-left:30px;
}

/*ここから1024px用nav-------------------*/

#box{/*ここをnavにいれる*/
 	 width:40em;
	float:right;
	margin:0 auto;
}
#box a:hover{
	background: url("../images/bottan_b.png") rgba(0,0,0,.5);
}

/*ここから1024px用contents--------------*/
#contents {
	overflow : hidden;
	width : 93.75%;
}
#contents #main,
#contents #sub { 
	margin : 0 1.0416667% 
}





/*1024pxここまで*/}