@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切り替え -------------------------- */

.title_bar{
	width: 100%;
	margin-top: 10px !important;
} 

.title_bar img{
	width: 100%;
}

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

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

#logo {
	width:1100px;
	height:auto;
	margin:0 auto;
}

#logo img {
	max-width:100%;
	display:block;
	margin:auto;
	height:auto;
}

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

#menu_navi {
	width:1080px;
	margin:0 auto;
}

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

#menu_navi li {
	width: 180px;
	text-align: center;
	float: left;
}

#menu_navi li img {
	/*width: 180px;
	height:80px;*/
}

#menu_navi li a {
	display:block;
}

#menu_area.m_fixed {
  position: fixed;
  top: 0;
  z-index:100000;
}


@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: 10px 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;
	text-align: center;
}

/*
.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{
		max-width: 100%;
	}
	
	/*
	.top_titlebar 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;
	}

}

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

#contact_bnr .bnr_area {
	clear:both;
	width:900px;
	height:200px;
	margin:0 auto;
}

#contact_bnr .bnr_area img {
	width: 900px;
	height:200px;
}

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

@media screen and (max-width: 770px) {
	#contact_bnr {
		width:100%;
		margin:20px auto 10px auto;
	}
	
	#contact_bnr .bnr_area {
		width:90%;
		height:auto;
	}
	
	#contact_bnr .bnr_area img {
		width: 100%;
		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;
	text-align:center;
	margin-top: 20px;
	padding:20px 0;
	width: 100%;
	height:auto;
}




.effect-fade, .effect-fade2, .effect-fade3, .effect-fade4, .effect-fade5 {
	opacity:0;
	transform:translate(0, 45px);
	transition:all 1300ms;
}

.effect-fade.effect-scroll, .effect-fade2.effect-scroll, .effect-fade3.effect-scroll, .effect-fade4.effect-scroll, .effect-fade5.effect-scroll {
	opacity:1;
	transform:translate(0, 0);
}

.effect-fade2:nth-of-type(2n+1), .effect-fade3:nth-of-type(3n+1), .effect-fade4:nth-of-type(4n+1), .effect-fade5:nth-of-type(5n+1) {
	-moz-transition-delay:0ms;
	-webkit-transition-delay:0ms;
	-o-transition-delay:0ms;
	-ms-transition-delay:0ms;
}	
	
.effect-fade2:nth-of-type(2n+2), .effect-fade3:nth-of-type(3n+2), .effect-fade4:nth-of-type(4n+2), .effect-fade5:nth-of-type(5n+2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
}
.effect-fade3:nth-of-type(3n+3), .effect-fade4:nth-of-type(4n+3), .effect-fade5:nth-of-type(5n+3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
}
.effect-fade4:nth-of-type(4n+4), .effect-fade5:nth-of-type(5n+4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
}
.effect-fade5:nth-of-type(5n+5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
}