@charset "UTF-8";

/* ------------------------------
	import module
------------------------------ */

@import url('../module/column.css');
@import url('../module/font.css');
@import url('../module/margin.css');
@import url('../module/padding.css');
@import url('../module/image.css');
@import url('../module/color.css');

html,
body {
	font-family: "Rounded Mplus 1c", 'メイリオ','MS PGothic','ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	color: #111111;
	background: #fff;
}

[class*='fw-100'] { font-weight: 100; }
[class*='fw-200'] { font-weight: 200; }
[class*='fw-300'] { font-weight: 300; }
[class*='fw-400'] { font-weight: 400; }
[class*='fw-500'] { font-weight: 500; }
[class*='fw-600'] { font-weight: 600; }
[class*='fw-700'] { font-weight: 700; }
[class*='fw-800'] { font-weight: 800; }
[class*='fw-900'] { font-weight: 900; }

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #008fd9;
}

dd {
	margin: 0;
}

ul {
	list-style-type: none;
}

p {
	margin: 0;
}

.img-area {
	line-height: 0;
}

.img-fuild {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.heading-article {
	text-align: center;
}

/* ------------------------------
	Wrapper
------------------------------ */
.hover-Scale:hover,
.hover-Scale:focus,
.hover-Scale:active {
	animation: hover-Scale 3s infinite ease-out;
	transform-origin: 50% 50%;
}

@keyframes hover-Scale {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}

.btn {
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #ea574d;
}

.btn:active {
	color: #fff;
}

.btn-small {
	line-height: 1;
}

.btn-large {
	display: block;
}

.btn.btn-yellow {
	color: #333333;
	background: #f3e600
}

.d-block {
	display: block !important;
}

@media screen and (min-width: 751px), print  {
	html,
	body {
		font-size: 16px;
	}	
	
	.wrapper {
		min-width: 1171px;
		height: auto;
		overflow: hidden;
	}	
	
	.content-area {
		width: 1170px;
		padding: 0 15px;
		margin: 0 auto;
		position: relative;
		box-sizing: border-box;
	}

	.pc-hide {
		display: none;
	}
	
	.btn:hover {
		color: #fff;
		background: #e03a32;
	}

	.btn {
		display: inline-block;
	}
	
	.btn-small {
		padding: 2px 14px 3px;
		font-size: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 0 #c34940;
	}
	
	.btn-medium {
		display: block;
		padding: 23px 10px;
		font-size: 20px;
		border-radius: 20px;
		box-shadow: 0 6px 0 #c34940;
	}
	
	.btn-large {
		display: block;
		padding: 30px 14px 31px;
		font-size: 30px;
		border-radius: 20px;
		box-shadow: 0 6px 0 #c34940;
	}
	
	.btn-top {
		padding: 10px 22px 11px;
		font-size: 18px;
		border-radius: 6px;
		box-shadow: 0 6px 0 #c5ba00;
	}
	
	.btn-small.btn.btn-yellow {
		box-shadow: 0 2px 0 #c5ba00;
	}
	
	.btn-medium.btn.btn-yellow {
		box-shadow: 0 6px 0 #c5ba00;
	}
	
	.btn-large.btn.btn-yellow {
		box-shadow: 0 6px 0 #c5ba00;
	}
		
	.btn.btn-yellow:hover {
		color: #333;
		background: #e8cf00;
	}
	
} @media screen and (max-width: 750px) {
	html,
	body {
		font-size: 14px;
	}

	*:hover,
	*:focus,
	*:active {
		animation: none !important;
	}	
	
	.wrapper {
		min-width: 320px;
		overflow: hidden;
	}
	
	.content-area {
		padding: 0 15px;
		position: relative;
		box-sizing: border-box;
	}

	.sp-hide {
		display: none;
	}
	
	.btn {
		display: block;
	}
	
	.btn-small {
		padding: 10px 14px;
		font-size: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 0 #c34940;
	}

	.btn-top {
		padding: 6px 12px 5px;
		font-size: 12px;
		border-radius: 6px;
		box-shadow: 0 3px 0 #c5ba00;
	}
	
	.btn-medium,
	.btn-large {
		padding: 16px 14px 15px;
		font-size: 15px;
		border-radius: 10px;
		box-shadow: 0 3px 0 #c34940;
	}
	
	.btn-large.btn.btn-yellow {
		box-shadow: 0 3px 0 #c5ba00;
	}
		
	
}


/* ------------------------------
	globa-nav
------------------------------ */
#global-nav {
	width: 100%;
	background: url(../images/global-nav/bg_dot.png) repeat;
	position: relative;
}

#global-nav:after {
	content: "";
	display: block;
	clear: both;
}

@media screen and (min-width: 751px), print {
	#global-nav {
		padding: 35px 0 48px;
		box-sizing: border-box;
	}
	
	#global-nav:before {
		content: "";
		width: 100%;
		min-width: 66px;
		height: 25px;
		background: url(../images/global-nav/pattern_bg_dot-top.png) repeat-x;
		background-size: contain;
		position: absolute;
		top: -25px;
		left: 0;
	}
	
	#global-nav:after {
		content: "";
		width: 100%;
		min-width: 67px;
		height: 16px;
		background: url(../images/global-nav/pattern_bg_dot-bottom.png) repeat-x;
		background-size: contain;
		position: absolute;
		bottom: -16px;
		left: 0;
	}

	#gnav_menu {
		display: flex;
		justify-content: center;
		align-items: center;
		list-style-type: none;
		padding: 0;
	}

	#gnav_menu li {
		margin: 0 15px;
	}
	
	#gnav_menu > li > a {
		display: block;
		padding: 0 22px;
		font-size: 24px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}
	
	#gnav_menu > li > a:before,
	#gnav_menu > li > a:after {
		content: "";
		display: block;
		width: 11px;
		height: 27px;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	#gnav_menu > li > a:before {
		background: url(../images/global-nav/gnav-menu-left.png) no-repeat;
		background-size: contain;
		left: 0;
	}

	#gnav_menu > li > a:after {
		background: url(../images/global-nav/gnav-menu-right.png) no-repeat;
		background-size: contain;
		right: 0;
	}

} @media screen and (max-width: 750px) {
	#global-nav {
		padding: 0 0 7px;
		box-sizing: border-box;
		position: relative;
		background-size: 7px;
	}
	
	#global-nav:before {
		content: "";
		width: 100%;
		min-width: 50px;
		height: 19.5px;
		background: url(../images/global-nav/pattern_bg_dot-top_sp.png) repeat-x;
		background-size: contain;
		position: absolute;
		top: -19.5px;
		left: 0;
	}
	
	#global-nav:after {
		content: "";
		width: 100%;
		min-width: 51.5px;
		height: 11.5px;
		background: url(../images/global-nav/pattern_bg_dot-bottom_sp.png) repeat-x;
		background-size: contain;
		position: absolute;
		bottom: -11.5px;
		left: 0;
		z-index: 100;
	}

	#gnav_menu:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#gnav_menu > li {
/*
		padding: 0 35px;
*/
		text-align: center;
		border-top: 1px solid #fff;
		position: relative;
	}
	
	#gnav_menu > li:first-child {
		border-top: none;
	}
	
	#top #gnav_menu > li:before {
		content: "";
		display: block;
		width: 16px;
		height: 16px;
		background: url(../images/global-nav/gnav-anchor.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 21px;
		margin: auto;
		pointer-events: none;
	}
	
	#gnav_menu > li > a {
		display: block;
		padding: 18px 0;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}
	
	#gnav_menu > li > a:before,
	#gnav_menu > li > a:after {
		content: "";
		display: inline-block;
		width: 16px;
		height: 20px;
		vertical-align: middle;
	}
	
	#gnav_menu > li > a:before {
		margin-right: 5px;
		background: url(../images/global-nav/gnav-menu-left.png) no-repeat;
		background-size: contain;
	}

	#gnav_menu > li > a:after {
		margin-left: 5px;
		background: url(../images/global-nav/gnav-menu-right.png) no-repeat;
		background-size: contain;
	}

}

/* ------------------------------
	#copyright
------------------------------ */
@media screen and (min-width: 751px), print {
	#copyright {
		width: 100%;
		padding: 23px 20px 38px;
		font-size: 12px;
		text-align: center;
		border-top: 1px solid #ccc;
	}
	
} @media screen and (max-width: 750px) {
	#copyright {
		width: 100%;
		padding: 15px 0 24px;
		font-size: 12px;
		text-align: center;
		border-top: 2px solid #ccc;
	}
	
}


/* ------------------------------
	#fix-content
------------------------------ */
@media screen and (min-width: 751px), print {
	#fix-content {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 100;
	}
	
	#fix-content:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#fix-content > ul {
		float: left;
		padding: 10px 12px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.9);
	}
	
	#fix-content > ul > li {
		float: left;
		margin-left: 7px;
		background: #fff;
	}

	#fix-content > ul > li:first-child {
		margin-left: 0;
	}
	
	#fix-content > ul > li > a {
		display: block;
		width: 30px;
		height: 30px;
		line-height: 0;
		text-indent: -9999px;
	}
	
	#fix-content > ul > li.link-twitter > a {
		background: url(../images/btn-twitter.png) no-repeat;
		background-size: contain;
	}
	
	#fix-content > ul > li.link-facebook > a {
		background: url(../images/btn-facebook.png) no-repeat;
		background-size: contain;
	}
	
	#fix-content > ul:after {
		content: "";
		display: block;
		clear: both;
	}
	
	#toPageTop {
		float: right;
		display: block;
		margin-left: 10px;
	}
	
	#toPageTop > a {
		display: block;
		width: 50px;
		height: 50px;
		text-indent: -9999px;
		border-radius: 10px;
		background: rgba(211, 199, 0 ,0.9) url(../images/topagetop.png) no-repeat center;
		background-size: 21px 24px;
	}
	
} @media screen and (max-width: 750px) {
	#fix-content {
		display: none;
	}
	
}