@charset "utf-8";

/**
 * WinPress - インテリヴィジュアルバージョン
 * layout.css
 *
 * @author DiAL,inc.
 * @version 1.0.0
 * @package WordPress
 * @subpackage WinPress
 */


/* =====================================================================
	global
====================================================================== */

* {
	font-family : "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;
}
body {
	margin: 0;
	background-color: #efefef;
	font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
	letter-spacing : 0.05em;
}
p, li {
	letter-spacing : 0.05em;
}

a {
	text-decoration: underline;
	color: #0000ed;
}
a.btn {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

img {
	vertical-align : bottom;
	border: none;
}

iframe {
	display: inline-block;
}

#header, #contents, #main, #sidebar, #footer {
	position: relative;
	margin: 0;
	padding: 0;
}
.container {
	position: relative;
	margin: 0px auto;
	padding-right: 10px;
	padding-left: 10px;
	background: #fff;
	max-width: 1024px;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}


/* ========================================
 header
======================================== */

#header {}
#header h1.page_headline {
	margin: 0;
	padding: 5px 0px;
	font-size: 13px;
	font-weight: normal;
	color: #999;
}
#header h2.header_logo {
	margin: 0;
	padding: 5px 0px;
}
#header h2.header_title {
	margin: 0;
	padding: 10px 0px;
	font-weight: normal;
	font-size: 24px;
}
#header h2.header_title a {
	text-decoration: none;
}
@media (max-width: 767px) {
	#header h2.header_logo img {
		max-width: 80%;
	}
	#header h2.header_title {
		font-size: 18px;
	}
}

#header .header_navigation {
	position: absolute;
	top: -5px;
	right: 5px;
	padding: 8px 20px 3px 20px;
	background: #1E456E;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 0 0 3px #666, 0 0 2px #666 inset;
}
#header .header_navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}
#header .header_navigation ul li {
	display: inline;
	color: #fff;
	padding: 5px;
}
#header .header_navigation ul li a {
	color: #fff;
	text-decoration: none;
}
#header .header_navigation ul li a:hover {
	background: rgba(255,255,255,0.2)
}

#header .header_description {
	padding: 20px 5px 0 0;
	font-size: 0.8em;
	color: #999;
}

@media (max-width: 767px) {
	#header .navbar {
		background: #1A426B;
		border-radius: 5px;
		margin: 10px -10px 10px -10px;
	}
	#header .navbar ul.navbar-nav {
		background: #1A426B;
	}
	#header .navbar ul.navbar-nav li a {
		color: #fff;
		background: none;
	}
}
@media (min-width: 768px) {
	#header .navbar {
		margin: 10px -10px 10px -10px;
		background: url(../images/bg_topmenu.png) repeat;
		border-radius: 5px;
		width: auto;
		min-height: 56px;
	}
	#header .navbar ul.navbar-nav > li {
		display: block;
		float: left;
		margin-bottom: 2px;
		height: 54px;
		box-shadow: -1px 1px 2px rgba(255,255,255,0.2) inset;
		text-align: center;
	}
	#header .navbar ul.navbar-nav > li > a {
		position: relative;
		display: block;
		background: none;
		border-right: 1px solid #333;
		width: auto;
		height: 54px;
		color: #fff;
		text-decoration: none;
	}
	#header .navbar ul.navbar-nav > li.icon_home > a, 
	#header .navbar ul.navbar-nav > li.icon_info > a, 
	#header .navbar ul.navbar-nav > li.icon_rank > a, 
	#header .navbar ul.navbar-nav > li.icon_memo > a, 
	#header .navbar ul.navbar-nav > li.icon_pencil > a, 
	#header .navbar ul.navbar-nav > li.icon_comment > a {
		padding-left: 45px;
	}
	#header .navbar ul.navbar-nav > li.icon_home > a:before, 
	#header .navbar ul.navbar-nav > li.icon_info > a:before, 
	#header .navbar ul.navbar-nav > li.icon_rank > a:before, 
	#header .navbar ul.navbar-nav > li.icon_memo > a:before, 
	#header .navbar ul.navbar-nav > li.icon_pencil > a:before, 
	#header .navbar ul.navbar-nav > li.icon_comment > a:before {
		content: " ";
		position: absolute;
		bottom: 13px;
		left: 0;
		width: 43px;
		height: 39px;
	}
	#header .navbar ul.navbar-nav > li.icon_home > a:before {
		background: url(../images/topmenu_home.png);
	}
	#header .navbar ul.navbar-nav > li.icon_info > a:before {
		background: url(../images/topmenu_info.png);
	}
	#header .navbar ul.navbar-nav > li.icon_rank > a:before {
		background: url(../images/topmenu_rank.png);
	}
	#header .navbar ul.navbar-nav > li.icon_memo > a:before {
		background: url(../images/topmenu_memo.png);
	}
	#header .navbar ul.navbar-nav > li.icon_pencil > a:before {
		background: url(../images/topmenu_pencil.png);
	}
	#header .navbar ul.navbar-nav > li.icon_comment > a:before {
		background: url(../images/topmenu_comment.png);
	}
	#header .navbar ul.navbar-nav > li:last-child a {
		border-right: none;
	}
	#header .navbar ul.navbar-nav > li.current-menu-item a, 
	#header .navbar ul.navbar-nav > li a:hover {
		background: rgba(255,255,255,0.2)
	}
	#header .navbar ul.navbar-nav > li a img {
		position: relative;
		bottom: -5px;
		vertical-align: text-bottom;
	}
	#header .navbar ul.navbar-nav > li.dropdown .dropdown-menu {
	}
	#header .navbar ul.navbar-nav > li.dropdown .dropdown-menu > li {
		float: none;
		color: #000;
		height: auto;
		text-align: left;
	}
	#header .navbar ul.navbar-nav > li.dropdown .dropdown-menu .divider {
	  height: 1px;
	  margin: 9px 0;
	  overflow: hidden;
	  background-color: #e5e5e5;
	}
	#header .navbar ul.navbar-nav > li.dropdown .dropdown-menu > li > a {
		display: block;
		clear: both;
		padding: 5px 20px;
		border: none;
		width: auto;
		height: auto;
		color: #262626;
	}
	#header .navbar ul.navbar-nav > li.dropdown .dropdown-menu > li > a:hover {
		background-color: #f5f5f5 !important;
		color: #333 !important;
	}
}

/* ========================================
 contents
======================================== */

#contents {}
#contents:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html #contents {
	zoom: 1;
}
*:first-child+html #contents {
	zoom: 1;
}

#contents.contents_column_2 {}
#contents.contents_column_2 #main {
}
#contents.contents_column_2 #sidebar {
}
@media (min-width: 768px) {
	#contents.contents_column_2 #main {
		float: none;
		width: auto;
	}
	#contents.contents_column_2 #sidebar {
		float: none;
		width: auto;
	}
}
@media (min-width: 992px) {
	#contents.contents_column_2 #main {
		float: left;
		width: 660px;
	}
	#contents.contents_column_2 #sidebar {
		float: right;
		width: 280px;
	}
	#contents.contents_column_2.sidebar_left #main {
		float: right;
	}
	#contents.contents_column_2.sidebar_left #sidebar {
		float: left;
	}
}
@media (min-width: 1200px) {
	#contents.contents_column_2 #main {
		float: left;
		width: 690px;
	}
	#contents.contents_column_2 #sidebar {
		float: right;
		width: 300px;
	}
	#contents.contents_column_2.sidebar_left #main {
		float: right;
	}
	#contents.contents_column_2.sidebar_left #sidebar {
		float: left;
	}
}

#contents .credit {
	margin: 10px auto 30px auto;
	text-align: center;
}
#contents .credit img {
	margin-right: auto;
	margin-left: auto;
}


/* ========================================
 main
======================================== */

#main h3 {
	position: relative;
	margin: 20px 0 15px 0;
	padding: 0;
	background: url(../images/bg_h3.png) no-repeat;
	width: auto;
	height: 51px;
	line-height: 51px;
	text-indent: 30px;
	vertical-align: middle;
	font-size: 1.5em;
	color: #fff;
}
#main h3:after {
	content: " ";
	position: absolute;
	top: -13px;
	right: 5px;
	background: url(../images/bg_h3_icon.png) no-repeat;
	width: 64px;
	height: 58px;
}
#main h4 {
	margin: 0 0 15px 0;
	padding: 10px 5px 13px 5px;
	background: url(../images/bg_h4.jpg) repeat-x 0 bottom;
	font-size: 1.3em;
}
#main h5 {
	margin: 0 0 15px 0;
	padding: 12px 0;
	background: url(../images/bg_h5.jpg) no-repeat left center;
	text-indent: 30px;
	font-size: 1.2em;
}
#main h6 {
	margin: 0 0 15px 0;
	padding: 12px 0;
	background: url(../images/bg_h6.jpg) no-repeat left center;
	text-indent: 30px;
	font-size: 1em;
}
#main p {
	margin: 0;
	padding: 0 10px 15px 10px;
	line-height: 1.65;
}
#main section {
	margin-bottom: 50px;
}
#main img {
	max-width: 100%;
	height: auto;
}
@media (max-width:767px){
	#main h3 {
		background-position: left center;
		background-size: cover;
		height: 35px;
		line-height: 35px;
		text-indent: 20px;
		font-size: 1.2em;
	}
	#main h3:after {
		top: -6px;
		right: 5px;
		background: url(../images/bg_h3_icon.png) no-repeat;
		background-size: cover;
		width: 32px;
		height: 29px;
	}
	#main h4 {
		font-size: 1.1em;
	}
	#main h5 {
		font-size: 1em;
	}
	#main h6 {
		font-size: 1em;
	}
}

#main article ul.entry_meta {
	padding: 5px;
	border-top: 1px dotted #666;
}


/* =====================================================================
	sidebar
====================================================================== */

#sidebar p {
	margin: 0 0 5px 0;
	font-size: 0.95em;
}

#sidebar .sidemenu h4 {
	margin-bottom: 0;
	padding: 8px;
	background: #2D6CE0 url(../images/bg_h3_sidebar.jpg) repeat-x 0 center;
	background-size: contain;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}
#sidebar .sidemenu h5 {
	margin-bottom: 0;
	padding: 8px;
	background: #FA688C;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}
#sidebar .sidemenu h6 {
	padding: 5px;
	border-bottom: 1px solid #ccc;
}

#sidebar .sidemenu {
	margin-bottom: 30px;
}
#sidebar .sidemenu ul {
	list-style: none;
	margin: 0 5px 15px 5px;
	padding: 0;
}
#sidebar .sidemenu ul li {
	padding: 12px 0 12px 20px;
	background: url(../images/menu_arrow.jpg) no-repeat 5px center;
	background-size: auto 10px;
}
#sidebar .sidemenu.widget_categories ul li {
	padding: 12px 0 12px 40px;
	background: url(../images/icon_sidemenu_cat.png) no-repeat left center;
	background-size: auto 30px;
}
#sidebar .sidemenu ul li a {
	text-decoration: underline;
	color: #134da5;
}
#sidebar .sidemenu ul li a:hover {
 color:#de2c3b
}
#sidebar .sidemenu ul li a img {
}

#sidebar .sidemenu .search_form {
	padding: 10px;
}

#sidebar .sidemenu .tagcloud {
	padding: 10px;
}
#sidebar .sidemenu .tagcloud a {
	display: inline-block;
	padding: 6px 12px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	color: #333;
	line-height:1.42857143;
	text-align:center;
	white-space:nowrap;
	vertical-align:middle;
	text-decoration: none;
}
#sidebar .sidemenu .tagcloud a:hover {
	background-color:#e6e6e6;
	border-color:#adadad;
	color: #333;
}
#sidebar .sidemenu ul li abbr {
	border: none;
}

#sidebar .sidemenu_wrap01 {
	margin: 0 0 10px 0;
	padding: 5px;
	border: 5px solid #1B3F63;
}

#wp-calendar {
	width: 90%;
	margin: 0 auto;
}
#wp-calendar caption {
	text-align: center;
}

#sidebar .sidemenu_ranking {}
#sidebar .sidemenu div.sidemenu_ranking h4 {
	margin-top: 0;
	padding-left: 40px;
	background-image: url(../images/icon_ranking_title.png);
	background-repeat: no-repeat;
	background-position: 3px center;
}
#sidebar .sidemenu div.sidemenu_ranking ul {
	margin-bottom: 0px;
}
#sidebar .sidemenu div.sidemenu_ranking ul li {
	padding: 8px 0 8px 27px;
	background: none;
}
#sidebar .sidemenu div.sidemenu_ranking ul li.sidemenu_rank1 {
	background: url(../images/rankmenu_no1.gif) no-repeat left center;
}
#sidebar .sidemenu div.sidemenu_ranking ul li.sidemenu_rank2 {
	background: url(../images/rankmenu_no2.gif) no-repeat left center;
}
#sidebar .sidemenu div.sidemenu_ranking ul li.sidemenu_rank3 {
	background: url(../images/rankmenu_no3.gif) no-repeat left center;
}
#sidebar .sidemenu div.sidemenu_ranking ul li.more {
	border: none;
	text-align: right;
}


/* ========================================
 footer
======================================== */

#footer {}

#footer .footer_navigation {
	padding: 20px 10px 0 10px;
	border-top: 3px solid #efefef;
}
#footer .footer_navigation ul {
	list-style: none;
	padding: 0;
}
#footer .footer_navigation ul li {
	display: inline;
	padding: 5px 10px;
}
@media (max-width:767px){
	#footer .footer_navigation ul li {
		display: list-item;
	}
}

#footer p.pagetop {
	margin: 0;
	padding: 5px;
	text-align: right;
}


#footer div.footer_bg {
	padding: 20px 0 40px 0;
	background: transparent url(../images/bg_footer2.jpg) repeat 0 0;
}
#footer div.footer_bg .container {
	background: none;
}
#footer div.footer_bg p.copyright {
	text-align: center;
	color: #fff;
}


/* ========================================
 CUSTOM bootstrap
======================================== */

.breadcrumb {
  margin-bottom: 10px;
  padding: 5px 15px;
 	background: none;
}
.breadcrumb > li + li:before {
  content: ">";
}
@media (max-width: 767px) {
	.breadcrumb {
		display: none;
	}
}


/* ========================================
 layout
======================================== */

/*** point ***/

.point1, .point2, .point3, .point4, .point5, .point6, .point7, .point8, .point9, .point10 {
	margin: 0 0 20px 0;
	padding: 10px 0 0 70px;
	min-height: 60px;
}
.point1 {
	background: url(../images/icon_point1.jpg) no-repeat;
}
.point2 {
	background: url(../images/icon_point2.jpg) no-repeat;
}
.point3 {
	background: url(../images/icon_point3.jpg) no-repeat;
}
.point4 {
	background: url(../images/icon_point4.jpg) no-repeat;
}
.point5 {
	background: url(../images/icon_point5.jpg) no-repeat;
}
.point6 {
	background: url(../images/icon_point6.jpg) no-repeat;
}
.point7 {
	background: url(../images/icon_point7.jpg) no-repeat;
}
.point8 {
	background: url(../images/icon_point8.jpg) no-repeat;
}
.point9 {
	background: url(../images/icon_point9.jpg) no-repeat;
}
.point10 {
	background: url(../images/icon_point10.jpg) no-repeat;
}
@media (max-width:767px){
	.point1, .point2, .point3, .point4, .point5, .point6, .point7, .point8, .point9, .point10 {
		padding: 10px 0 0 60px;
		background-size: 50px;
		min-height: 50px;
	}
}

/*** arrow ***/

.arrow_orange, .arrow_red, .arrow_black, .arrow_blue {
	padding: 2px 0 0 30px !important;
}
p.arrow_orange, p.arrow_red, p.arrow_black, p.arrow_blue {
	margin-bottom: 5px !important;
}
.arrow_orange {
	background: url(../images/arrow_orange.png) no-repeat;
}
.arrow_red {
	background: url(../images/arrow_red.png) no-repeat;
}
.arrow_black {
	background: url(../images/arrow_black.png) no-repeat;
}
.arrow_blue {
	background: url(../images/arrow_blue.png) no-repeat;
}


/* =====================================================================
	alert
====================================================================== */

.alert_frame, .accept_frame, .attention_frame, .thint_frame {
	position: relative;
	margin: 30px auto 30px auto;
	padding: 20px 20px 20px 100px;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
}
.alert_frame:before, .accept_frame:before, .attention_frame:before, .thint_frame:before {
	position: absolute;
	content: " ";
	width: 100px;
	height: 94px;
}
.alert_frame {
	background: #FCEFF6;
	border: 3px solid #FFCEE9;
}
.alert_frame:before {
	top: -20px;
	left: -20px;
	background: url(../images/alert.png);
}
.accept_frame {
	background: #EBF5EC;
	border: 3px solid #C9E8C9;
}
.accept_frame:before {
	top: -20px;
	left: -20px;
	background: url(../images/alert_accept.png);
}
.attention_frame {
	background: #FFFEEF;
	border: 3px solid #FCF4C5;
}
.attention_frame:before {
	top: -20px;
	left: -20px;
	background: url(../images/alert_attention.png);
}
.thint_frame {
	background: #E9F6FE;
	border: 3px solid #D5ECFC;
}
.thint_frame:before {
	top: -20px;
	left: -20px;
	background: url(../images/alert_thint.png);
}

.user1_frame, .user2_frame, .user3_frame, .user4_frame {
	position: relative;
	margin: 0 auto 20px auto;
	padding: 20px 20px 20px 180px;
	background: #fff;
	border: 1px solid #ccc;
	min-height: 200px;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
}
.user1_frame:before, .user2_frame:before, .user3_frame:before, .user4_frame:before {
	content: " ";
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 176px;
	height: 193px;
}
.user1_frame {}
.user1_frame:before {
	background: url(../images/user1.png) no-repeat;
}
.user2_frame {}
.user2_frame:before {
	background: url(../images/user2.png) no-repeat;
}
.user3_frame {}
.user3_frame:before {
	background: url(../images/user3.png) no-repeat;
}
.user4_frame {}
.user4_frame:before {
	background: url(../images/user4.png) no-repeat;
}


@media (max-width:767px){
	.alert_frame, .accept_frame, .attention_frame, .thint_frame {
		padding: 20px 10px 20px 55px;
		box-shadow: 1px 1px 2px #ddd;
	}
	.alert_frame:before, .accept_frame:before, .attention_frame:before, .thint_frame:before {
		background-size: contain;
		top: -5px;
		left: -10px;
		width: 60px;
		height: 56.4px;
	}

	.user1_frame, .user2_frame, .user3_frame, .user4_frame {
		position: relative;
		margin: 0 auto 20px auto;
		padding: 20px 10px 20px 90px;
		min-height: 100px;
	}
	.user1_frame:before, .user2_frame:before, .user3_frame:before, .user4_frame:before {
		background-size: contain;
		width: 88px;
		height: 96.5px;
	}
}

.noimage {
	padding-left: 20px;
	background-image: none;
	min-height: auto;
}
.noimage:before {
	content: none;
}


/* =====================================================================
	box
====================================================================== */

.nmlbox, .dottbox, .ylwbox, .graybg, .rbox1, .rbox2, .rbox3, .rbox4 {
	margin: 0 auto 20px auto;
	padding: 20px;
	box-shadow: 1px 1px 2px #ddd;
}
.nmlbox {
	border: 1px solid #ccc;
}
.dottbox {
	border: 1px dotted #ccc;
}
.ylwbox {
	border: 2px solid #FFF1C8;
	background: #FFFEEF
}
.rbox1 {
	border: 1px solid #ccc;
	background: #efefef;
}
.rbox2 {
	padding: 18px;
	border: 3px solid #EF9E04;
}
.rbox3 {
	border: 1px solid #efefef;
}
.rbox4 {
	background: #efefef;
}
.graybg {
	background: #efefef;
}
.rnd1 {
	border-radius: 10px;
}
.shadow1 {
	box-shadow: 2px 2px 3px #999;
}
.shadow2 {
	box-shadow: 0px 0px 3px #999;
}


/* =====================================================================
	border
====================================================================== */

.border1,.border2,.border3,.borderdot,.borderdot2{
	margin: 10px;
	padding: 0px;
	line-height: 1px;
	height: 1px;
	_zoom: 1;
	overflow: hidden;
}

.border1 {
	border-bottom:solid 1px #999;
}
.border2 {
	border-bottom:solid 1px #e8380d;
}
.border3 {
	border-bottom:solid 1px #008cd6;
}
.borderdot {
	border-top:dotted 1px #999;
}
.borderdot2 {
	border-top:dotted 2px #999;
}


/* =====================================================================
	question
====================================================================== */

.question1 {
	margin: 0 20px 20px auto;
	padding: 30px 20px 30px 90px;
	background: url(../images/question1.jpg) no-repeat 6px 6px;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
}
.answer1 {
	margin: 0 auto 30px 20px;
	padding: 30px 20px 30px 90px;
	background: #FFFEEF url(../images/answer1.jpg) no-repeat 6px 6px;
	border: 3px solid #FCF4C5;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
}

.question2 {
	position: relative;
	margin: 0 100px 0px 100px;
	padding: 20px;
	border-top: 2px dashed #666;
	border-bottom: 2px dashed #666;
}
.question2:before {
	content: " ";
	position: absolute;
	top: -5px;
	left: -100px;
	width: 94px;
	height: 88px;
	background: url(../images/question2.png) no-repeat;
}
.answer2 {
	position: relative;
	margin: 0 100px 30px 100px;
	padding: 20px;
	border-bottom: 2px dashed #666;
	text-align: right;
}
.answer2:after {
	content: " ";
	position: absolute;
	top: -10px;
	right: -100px;
	width: 96px;
	height: 88px;
	background: url(../images/answer2.png) no-repeat;
}
@media (max-width:767px){
	.question1 {
		padding: 25px 20px 25px 25%;
		background-size: 20%;
		min-height: 80px;
	}
	.answer1 {
		padding: 25px 20px 25px 25%;
		background-size: 20%;
		min-height: 80px;
	}

	.question2 {
		margin: 0 60px 0px 60px;
	}
	.question2:before {
		top: 10px;
		left: -60px;
		width: 47px;
		height: 44px;
		background-size: contain;
	}
	.answer2 {
		margin: 0 60px 30px 60px;
	}
	.answer2:after {
		content: " ";
		position: absolute;
		top: 10px;
		right: -60px;
		width: 47px;
		height: 44px;
		background-size: contain;
	}
}


/* =====================================================================
	balloon
====================================================================== */

.balloon_container {
	_zoom: 1;
	overflow: hidden;
	padding: 0;
	margin: 0 0 20px 0;
}
.balloon_container:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height:0;
}

.balloon_container .balloon_user {
	float: left;
	width: 25%;
}
.balloon_container .balloon {
	position: relative;
	float: right;
	width: 73%;
	background-color: #F5F5F5;
	border: 1px solid #CCC;
	border-radius: 10px;
}
.balloon_container .balloon .balloon_body {
	padding: 12px 19px;
}
.balloon_container .balloon:before {
	content: '';
	top: 13px;
	left: -20px;
	position: absolute;
	border: 10px solid transparent;
	border-right-color: #CCC;
}
.balloon_container .balloon:after {
	content: '';
	top: 15px;
	left: -16px;
	position: absolute;
	border: 8px solid transparent;
	border-right-color: #F5F5F5;
}
.balloon_container.balloon_left {}
.balloon_container.balloon_left .balloon_user {
	float: right;
}
.balloon_container.balloon_left .balloon {
	float: left;
}
.balloon_container.balloon_left .balloon:before {
	content: '';
	left: auto;
	right: -20px;
	border-right-color: transparent;
	border-left-color: #CCC;
}
.balloon_container.balloon_left .balloon:after {
	left: auto;
	right: -16px;
	border-right-color: transparent;
	border-left-color: #F5F5F5;
}
.balloon_container .balloon.balloon_blue {
	background-color:#EAF1FF;
	border: 1px solid #6AA3F9;
}
.balloon_container .balloon.balloon_blue:before {
	border-right-color: #6AA3F9;
}
.balloon_container .balloon.balloon_blue:after {
	border-right-color: #EAF1FF;
}
.balloon_container.balloon_left .balloon.balloon_blue:before {
	border-right-color: transparent;
	border-left-color: #6AA3F9;
}
.balloon_container.balloon_left .balloon.balloon_blue:after {
	border-right-color: transparent;
	border-left-color: #EAF1FF;
}

.balloon_container .balloon.balloon_red {
	background-color:#FFEAEA;
	border: 1px solid #F96565;
}
.balloon_container .balloon.balloon_red:before {
	border-right-color: #F96565;
}
.balloon_container .balloon.balloon_red:after {
	border-right-color: #FFEAEA;
}
.balloon_container.balloon_left .balloon.balloon_red:before {
	border-right-color: transparent;
	border-left-color: #F96565;
}
.balloon_container.balloon_left .balloon.balloon_red:after {
	border-right-color: transparent;
	border-left-color: #FFEAEA;
}

.balloon_container .balloon.balloon_green {
	background-color:#FFF;
	border: 2px solid #739221;
}
.balloon_container .balloon.balloon_green:before {
	border-right-color: #739221;
}
.balloon_container .balloon.balloon_green:after {
	border-right-color: #FFF;
}
.balloon_container.balloon_left .balloon.balloon_green:before {
	border-right-color: transparent;
	border-left-color: #739221;
}
.balloon_container.balloon_left .balloon.balloon_green:after {
	border-right-color: transparent;
	border-left-color: #FFF;
}

.balloon_container .balloon.balloon_orange {
	background-color:#FFF;
	border: 2px solid #FF8201;
}
.balloon_container .balloon.balloon_orange:before {
	border-right-color: #FF8201;
}
.balloon_container .balloon.balloon_orange:after {
	border-right-color: #FFF;
}
.balloon_container.balloon_left .balloon.balloon_orange:before {
	border-right-color: transparent;
	border-left-color: #FF8201;
}
.balloon_container.balloon_left .balloon.balloon_orange:after {
	border-right-color: transparent;
	border-left-color: #FFF;
}


/* =====================================================================
	rank
====================================================================== */

.rank1, .rank2, .rank3, .rank4, .rank5, .rank6, .rank7, .rank8, .rank9, .rank10 {
	padding: 32px 0 0 120px;
	margin: 0 0 20px 0;
	min-height: 75px;
	font-size: 2em;
}
.rank1 {
	background: url(../images/rank1.png) no-repeat;
}
.rank2 {
	background: url(../images/rank2.png) no-repeat;
}
.rank3 {
	background: url(../images/rank3.png) no-repeat;
}
.rank4 {
	background: url(../images/rank4.png) no-repeat;
}
.rank5 {
	background: url(../images/rank5.png) no-repeat;
}
.rank6 {
	background: url(../images/rank6.png) no-repeat;
}
.rank7 {
	background: url(../images/rank7.png) no-repeat;
}
.rank8 {
	background: url(../images/rank8.png) no-repeat;
}
.rank9 {
	background: url(../images/rank9.png) no-repeat;
}
.rank10 {
	background: url(../images/rank10.png) no-repeat;
}
@media (max-width:767px){
	.rank1, .rank2, .rank3, .rank4, .rank5, .rank6, .rank7, .rank8, .rank9, .rank10 {
		padding: 18px 0 0 70px;
		background-size: 62px 50px;
		min-height: 65px;
		font-size: 1.2em;
	}
}


/* =====================================================================
	rank（フレーム）
====================================================================== */

.rank_gold, .rank_silver, .rank_copper {
	margin: 0 0 15px 0;
	padding: 5px;
	border-radius: 10px;
}
.rank_gold .rank_inner, .rank_silver .rank_inner, .rank_copper .rank_inner {
	padding: 10px 15px;
	background-color: #fff;
	border-radius: 5px;
}
.rank_gold {
	background-color: #F29E07;
	background: -moz-linear-gradient(top left, #F29E07, #FFDA00); 
	background: -webkit-gradient(linear, left top, right bottom, from(#F29E07), to(#FFDA00)); 
}
.rank_silver {
	background-color: #CACACA;
	background: -moz-linear-gradient(top left, #CACACA, #EDEDED); 
	background: -webkit-gradient(linear, left top, right bottom, from(#CACACA), to(#EDEDED)); 
}
.rank_copper {
	background-color: #96441C;
	background: -moz-linear-gradient(top left, #96441C, #EED8CA); 
	background: -webkit-gradient(linear, left top, right bottom, from(#96441C), to(#EED8CA)); 
}


/* =====================================================================
	btn
====================================================================== */

.animation_btn03 {
	position: relative;
	display: inline-block;
	transform-style: preserve-3d;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 300px;
}
.animation_btn03 img {
}
.animation_btn03 img.btn_bg_blue {
	width: 100%;
	transform-origin: center top;
	-webkit-transform-origin: center top;
}
.animation_btn03 img.btn_bg_green {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform-origin: center top;
	-webkit-transform-origin: center top;
}
.animation_btn03 img.btn_txt {
	position: absolute;
	top: 17%;
	left: 2%;
	width: 95%;
	z-index: 1000;
}

.animation_btn03 img.btn_bg_blue_sp {
	width: 90%;
	transform-origin: center top;
	-webkit-transform-origin: center top;
}
.animation_btn03 img.btn_bg_green_sp {
	position: absolute;
	top: 0;
	left: 5%;
	width: 90%;
	transform-origin: center top;
	-webkit-transform-origin: center top;
}
.animation_btn03 img.btn_txt_sp {
	position: absolute;
	top: 10%;
	left: 16%;
	width: 68%;
	z-index: 1000;
}

.animation_btn04 {
	position: relative;
	display: inline-block;
}
a .animation_btn04:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}
.animation_btn04 img.btn_bg {
	position: relative;
	width: 100%;
}
.animation_btn04 img.btn_arrow {
	position: absolute;
	width: 13%;
	top: 15%;
	left: -3%;
}
.animation_btn04 img.btn_txt1 {
	position: absolute;
	width: 85%;
	top: 17%;
	left: 9%;
	z-index: 5;
}
.animation_btn04 img.btn_txt1_shadow {
	position: absolute;
	width: 85%;
	top: 17%;
	left: 9%;
	z-index: 2;
}

.animation_btn04 img.btn_bg_sp {
	position: relative;
	width: 90%;
}
.animation_btn04 img.btn_arrow_sp {
	position: absolute;
	width: 20%;
	top: 17%;
	left: -2%;
}
.animation_btn04 img.btn_txt1_sp {
	position: absolute;
	width: 60%;
	top: 5%;
	left: 20%;
	z-index: 5;
}
.animation_btn04 img.btn_txt1_shadow_sp {
	position: absolute;
	width: 60%;
	top: 5%;
	left: 20%;
	z-index: 2;
}

.btn_zindex_0 {
	z-index: 0;
}
.btn_zindex_1 {
	z-index: 1;
}
.btn_zindex_2 {
	z-index: 2;
}
.btn_zindex_3 {
	z-index: 3;
}
.btn_zindex_4 {
	z-index: 4;
}
.btn_zindex_5 {
	z-index: 5;
}
.btn_rotate0 {
	transform: rotateX(0deg);
	transition: all .3s;
	-webkit-transform: rotateX(0deg);
	-webkit-transition: all .3s;
}
.btn_rotate90 {
	transform: rotateX(90deg);
	transition: none;
	-webkit-transform: rotateX(90deg);
	-webkit-transition: none;
}
.btn_hidden {
	visibility: hidden;
}
.btn_visible {
	visibility: visible;
}


.width_90 {
	max-width: 90%;
}
.width_80 {
	max-width: 80%;
}
.width_70 {
	max-width: 70%;
}
.width_60 {
	max-width: 60%;
}
.width_50 {
	max-width: 50%;
}
.width_40 {
	max-width: 40%;
}
.width_30 {
	max-width: 30%;
}
.width_20 {
	max-width: 20%;
}
.width_10 {
	max-width: 10%;
}