@charset "UTF-8";
/*------------------------------------------
	friend
------------------------------------------*/
.friend-page .container.-pc {
	width: 100%;
	height: 100%
}
.friend-page .container.-pc #global-nav {
	position: relative;
	z-index: 999;
	min-width: 1000px
}
.friend-page .container.-pc .container-inner {
	width: 100%;
	height: 817px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#main-area.friend {
	position: absolute;
	top: 38px;
	left: 0;
	background: url(../images/main_bg.png) no-repeat center 143px;
	width: 100%;
	height: 100%;
	min-width: 1000px;
	margin: 0 auto;
}
.friend-page .container.-pc .container-inner .friend-inner {
	position: relative;
	width: 1000px;
	height: 600px;
	top: 133px;
	margin: 0 auto;
}
#friend .frame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../images/friend/friend_frame___.png) no-repeat center -15px;
	width: 100%;
	height: 100%;
}
#main-area #friend .friend-inner .curtain_left {
	position: absolute;
	top: 10px;
	left: 28px;
	z-index: 5;
	background: url(../images/curtain_left.png) no-repeat 0 0;
	width: 180px;
	height: 567px;
}
#main-area #friend .friend-inner .curtain_right {
	position: absolute;
	top: 10px;
	right: 28px;
	z-index: 5;
	background: url(../images/curtain_right.png) no-repeat 0 0;
	width: 180px;
	height: 567px;
}
#friend .chara-box .chara-01, #friend .chara-box .chara-02, #friend .chara-box .chara-03, #friend .chara-box .chara-04, #friend .chara-box .chara-05, #friend .chara-box .chara-06, #friend .chara-box .chara-07, #friend .chara-box .chara-bg {
	display: none;
	position: absolute;
}
#friend .chara-box .chara-01 {
	top: 18px;
	left: 23px;
	width: 288px;
	height: 184px;
}
#friend .chara-box .chara-02 {
	bottom: 82px;
	left: 0;
	width: 317px;
	height: 318px;
}
#friend .chara-box .chara-03 {
	bottom: -23px;
	left: 135px;
	width: 180px;
	height: 227px;
}
#friend .chara-box .chara-04 {
	bottom: 3px;
	left: 707px;
	width: 250px;
	height: 222px;
}
#friend .chara-box .chara-05 {
	top: 181px;
	right: 29px;
	width: 212px;
	height: 235px;
}
#friend .chara-box .chara-06 {
	right: -14px;
	top: -129px;
	width: 328px;
	height: 328px;
}
#friend .chara-box .chara-07 {
	bottom: -40px;
	left: 312px;
	width: 393px;
	height: 259px;
}
#friend .chara-box .chara-bg {
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)";
	bottom: 27px;
	left: 147px;
	width: 721px;
	height: 361px;
	display: block;
}
#friend .chara-link .chara-link01 {
	position: absolute;
	top: 40px;
	left: 28px;
	width: 288px;
	height: 134px;
}
#friend .chara-link .chara-link02 {
	position: absolute;
	bottom: 82px;
	left: 0px;
	width: 287px;
	height: 258px;
}
#friend .chara-link .chara-link03 {
	position: absolute;
	bottom: -23px;
	left: 179px;
	width: 120px;
	height: 227px;
}
#friend .chara-link .chara-link04 {
	position: absolute;
	bottom: 3px;
	left: 735px;
	width: 140px;
	height: 221px;
}
#friend .chara-link .chara-link05 {
	position: absolute;
	top: 215px;
	right: 28px;
	width: 201px;
	height: 180px;
}
#friend .chara-link .chara-link06 {
	position: absolute;
	top: -15px;
	right: -8px;
	width: 363px;
	height: 220px;
}
#friend .chara-link .chara-link07 {
	position: absolute;
	bottom: 3px;
	left: 312px;
	width: 393px;
	height: 227px;
}
#friend .chara-link .chara-link01 a, #friend .chara-link .chara-link02 a, #friend .chara-link .chara-link03 a, #friend .chara-link .chara-link04 a, #friend .chara-link .chara-link05 a, #friend .chara-link .chara-link06 a,#friend .chara-link .chara-link07 a {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
}
#friend .text {
	width: 292px;
	height: 290px;
	position: absolute;
	top: 65px;
	left: 349px;
	z-index: 5;
}
#friend .text .text01, #friend .text .text02, #friend .text .text03, #friend .text .text04, #friend .text .text05, #friend .text .text06, #friend .text .text07 {
	display: none;
	opacity: 0;
}
#friend .back {
	width: 312px;
	height: 308px;
	position: absolute;
	top: 65px;
	left: 349px;
	z-index: 4;
}
#friend .back .back01 {
	position: absolute;
	width: 312px;
	height: 308px;
	display: none;
	opacity: 0;
}
#main-area #friend .on-mouse {
	position: absolute;
	bottom: 230px;
	left: 445px;
	width: 130px;
	height: 18px;
	display: none;
}
@media only screen and (max-width: 768px) {
/*------------------------------------------
			friend
		------------------------------------------*/
#friend {
	padding: 17% 2% 30%;
}
#friend ul li {
	margin-bottom: 30%;
}
#friend ul li:last-child {
	margin-bottom: 0%;
}
#friend ul li h2 {
	margin-bottom: 4%;
}
}