@charset "utf-8";

/* -------------------------------------------------
     common
 --------------------------------------------------- */
body {
	color:#fff;
	font-size:14px;
	width:100%;
}

#container {
	width: 100%;
	height:auto;
	z-index:1;
}

/* clear both -------------------------- */
.cl{
	clear:both;
	margin:0 auto;
}


/* PC/SP切り替え -------------------------- */
.pc_view{
	display:block !important;
	margin:0 auto;
}

.sp_view{
	display:none !important;
	margin:0 auto;
}

@media screen and (max-width: 770px) {
	.pc_view{
		display:none !important;
		margin:0 auto;
	}
	
	.sp_view{
		display:block !important;
		margin:0 auto;
	}
	.sp_view img{
		width:100%
		height:auto;
	}
}

/* 間隔用 -------------------------- */
.interval40 {
	clear:both;
	width:100%;
	height: 40px;
}

.interval20 {
	clear:both;
	width:100%;
	height: 20px;
}

.interval10 {
	clear:both;
	width:100%;
	height: 10px;
}

/* -------------------------------------------------
     header
 --------------------------------------------------- */
header{
	color:#ccc;
	font-size:11px;
	width:100%;
	height:250px;
	margin:0 auto;
	text-align:center;
}

#logo {
	max-width:1100px;
	/*height:170px;*/
	margin:0 auto;
}

#logo img {
	width: 100%;
}

#menu_area {
	clear:both;
	width:100%;
	height:80px;
	margin:0 auto;
}

#menu_navi {
	width:1096px;
	height:80px;
	margin:0 auto;
}

#menu_navi ul {
	list-style: none;
	overflow: hidden;
}

#menu_navi li {
	width: 137px;
	height:80px;
	text-align: center;
	float: left;
}

#menu_navi li img {
	width: 137px;
	height:80px;
}

#menu_navi li a {
	display:block;
}

@media screen and (max-width: 770px) {
	header{
		height:auto;
	}
	
	#logo {
		width:100%;
		height:auto;
	}
	
	#logo img {
		width:100%;
		height:auto;
	}

	#menu_area {
		height:0px;
	}

}


/* -------------------------------------------------
     contents
 --------------------------------------------------- */
#contents {
	width:1100px;
	margin:0 auto;
}

@media screen and (max-width: 770px) {
	#contents {
		width:100%;
	}
}

/* -------------------------------------------------
     breadcrumb
 --------------------------------------------------- */
#breadcrumb {
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
}
#breadcrumb li {
	font-size:10px;
	float:left;
	margin:5px;
}
#breadcrumb li a{
	-webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
	text-decoration:none;
}

/* -------------------------------------------------
     top_titlebar
 --------------------------------------------------- */
.top_titlebar {
	clear:both;
	float:left;
	width:1100px;
	height:100px;
	/*margin-top:30px;*/
}

.top_titlebar img {
	width:1100px;
	height:100px;
}

@media screen and (max-width: 770px) {
	.top_titlebar {
		width:100%;
		height:auto;
		/*margin-top:15px;*/
	}
	
	.top_titlebar img {
		width:100%;
		height:auto;
	}
}

/* -------------------------------------------------
     page_title
 --------------------------------------------------- */
.page_title {
	clear:both;
	/*float:left;*/
	display:block;
	width:1100px;
	height:100px;
	margin:10px auto;
}

.page_title img {
	width:1100px;
	height:100px;
}

@media screen and (max-width: 770px) {
	.page_title {
		width:100%;
		height:auto;
	}
	
	.page_title img {
		width:100%;
		height:auto;
	}

}


/* -------------------------------------------------
     group_link
 --------------------------------------------------- */
#group_link {
	clear:both;
	float:left;
	width:1100px;
	height:auto;
	margin:10px auto;
}

#group_link .group_list {
	float:left;
	width: 260px;
	height:130px;
	margin: 5px 7px;
	text-align:center;
}

#group_link .group_list img {
	width: 260px;
	height:130px;
}

#group_link .group_list a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
}

@media screen and (max-width: 770px) {
	#group_link {
		width:100%;
		height:auto;
	}
	
	#group_link .group_list {
		width: 33.333%;
		height:auto;
		margin: 0 0px;
	}

	#group_link .group_list img {
		width: 98%;
		height:auto;
	}

}

/* -------------------------------------------------
     footer
 --------------------------------------------------- */
footer {
	margin-top:60px;
	width:100%;
	clear:both;
}
footer a {
	text-decoration:none;
	color:#424251;
	margin:0 10px;
}
footer a:hover {
	color:#F18B8D;
	text-decoration: underline;
}
footer section {
	width:1000px;
	margin:10px auto;
	position:relative;
	overflow:hidden;
}

footer ul {
	margin:10px auto;
	padding:0 20px 8px;
	text-align:center;
}

footer li {
	display:inline-block;
	font-size:12px;
	margin-top:9px;
}

footer div {
	background:#ffdbe5;
	color:#666;
	text-align:center;
	font-size:12px;
    padding:14px 0;
	clear:both;
}

@media screen and (max-width: 770px) {
	footer section {
		width:100%;
	}
    footer div {
        padding:14px 0 25vw 0;
    }
}


/* -------------------------------------------------
     page_top
 --------------------------------------------------- */
#page_top {
	position:fixed;
	width:72px;
	height:72px;
	text-align:center;
	bottom:10px;
	right:30px;
	z-index:100;
}
#page_top a {
	display:block;
}
#page_top:hover {
	cursor:pointer;
}

@media screen and (max-width: 770px) {
	#page_top {
		bottom:10px;
		right:10px;
	}
}


/* -------------------------------------------------
     pager
 --------------------------------------------------- */
.page_list_box {
	clear:both;
	float:left;
	text-align:center;
	margin-top: 20px;
	width: 100%;
	height:auto;
}

.pager_area{
	display:block;
	clear:both;
	margin:10px auto;
}