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

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

MAINIMAGE

************************************/
#circle #mainimage{
	background-image:url(../circle/images/mainimage.jpg);
}
@media only screen and (max-width:767px){
	#circle #mainimage{
	background-image:url(../circle/images/mainimage-sp.jpg);
}
}

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

NAVI

************************************/
#circle #navi {
	margin: 0;
	background:#f8f8f3;
	padding:50px 0;
}
#circle #navi article {
	display:inline-block;
	width:120px;
	margin:0 7px;
	text-align:left;
vertical-align: top;
}
#circle #navi article a{
	color:#6c6c6c;
	text-decoration:none;
}
#circle #navi article a p {

	font-size:80%;
	padding:5px 0 0 12px;
	position:relative;
}
#circle #navi article a p:before{
  position: absolute;
  top: 8px;
  left: 0px;
  color: #65c2d0;
  font: 10px 'FontAwesome';
  content: "\f105";
}
/* Flashing */
#circle #navi article a:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@media only screen and (max-width:767px){
	#circle #navi {
	padding:30px 0;
}
#circle #navi article {
	float:left;
	display:block;
	width:47%;
	margin:0 1% 5px 1%;
	background:#fff;
	border:1px solid #cbcba4;
	/*全体角丸*/
border-radius: 3px; /* CSS3草案 */ 
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */ 
-moz-border-radius: 3px; /* Firefox用 */ 
}
#circle #navi article:last-child {
	width:97%;
}
#circle #navi article .image {
	display:none;
}

#circle #navi article a p {
	padding:7px 7px 7px 25px;
}
#circle #navi article a p:before{
  top:10px;
  left: 12px;
  font: 10px 'FontAwesome';
}
}
/************************************

紹介

************************************/
#circle #info article {
	padding:100px 0 0 0 ;
}
#circle #info article:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
#circle #info article .text {
	text-align:left;
	float:left;
	width:640px;
}
#circle #info article .text p {
	margin-bottom:20px;
	line-height:170%;
}
#circle #info article .text .data {
	background:#e7f5f7;
	padding:20px 30px;
}
#circle #info article .text .data dl {
	margin:0 0 10px 0;
}
#circle #info article .text .data dl:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
#circle #info article .text .data dl dt {
	float:left;
	width:75px;
	border:1px solid #65c2d0;
	background:#fff;
	text-align:center;
	color:#65c2d0;
	font-size:90%;
}
#circle #info article .text .data dl dd {
	float:left;
	margin:0 0 0 15px;
	width:470px;
}
#circle #info article .text .data dl dd a {
	text-decoration:none;
}
#circle #info article .text .data dl dd a:hover {
	text-decoration:underline;
}
#circle #info article .image {
	float:right;
	width:300px;
}
@media only screen and (max-width:767px){
	#circle #info article {
	padding:60px 0 0 0 ;
}
#circle #info article .text {
	text-align:left;
	float:none;
	width:100%;
	font-size:90%;
	margin:0 0 30px 0;
	
}

#circle #info article .text .data {
	padding:8%;
}
#circle #info article .text .data dl {
	margin:0 0 10px 0;
}
#circle #info article .text .data dl dt {
	float:none;
	width:75px;
	border:1px solid #65c2d0;
	background:#fff;
	text-align:center;
	color:#65c2d0;
	font-size:90%;
}
#circle #info article .text .data dl dd {
	float:none;
	margin:5px 0 0 0;
	width:100%;
}
#circle #info article .image {
	float:none;
	width:100%;
	text-align:center;
}
#circle #info article .image img {
	max-width:300px;
	width:100%;
}
}