@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, th, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	-webkit-text-size-adjust:100%;
	font-size:100%;
	background:transparent;
	font-family:Verdana, Geneva, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic";
}
*::after, * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background:#F5F5F5;
}

#page-top a {
	position: fixed;
	bottom: 50px;
	right: 5px;
	text-align:center;
	vertical-align: middle;
	line-height:35px;
	width : 35px;
	height : 35px;
	font-size:75%;
	color : #333;
	background : #efefef;
	-webkit-border-radius : 50%;
	-moz-border-radius : 50%;
	-ms-border-radius : 50%;
	border-radius : 50%;
	text-decoration:none;
	border:1px solid #999;
	box-shadow:0 0 3px #999999;
}
img {
	vertical-align: top;
	font-size:0;
	line-height: 0;
	border:0;
}
a:hover img {
	opacity:0.7;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
.inner {
	width: 980px;
	margin: 0 auto;
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}
/* header */
#top-head {
	font-size: 14px;
	top: -100px;
	position: absolute;
	width: 100%;
	margin: 100px auto 0;
	padding: 30px 0 0;
	line-height: 1;
	z-index: 999;
}
#top-head a, #top-head {
	color: #000;
	text-decoration: none;
}
#top-head .inner {
	position: relative;
}
#top-head .logo {
	float: left;
	font-size: 36px;
}
#global-nav ul {
	list-style: none;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 14px;
}
#global-nav ul li {
	float: left;
	position: relative;
}
#global-nav ul li a {
	padding: 0 30px;
}
/* Btn Hover */
#global-nav ul li:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	bottom: -20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
	background: #F60;
	bottom: -30px;
}
/* Fixed */
#top-head.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	padding-top: 10px;
	height: 55px;
	background: #fff;
	background: rgba(255,255,255,.7);
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
	font-size: 24px;
	color: #333;
}
#top-head.fixed .logo img {
	height:24px;
	width:126px;
}
#top-head.fixed #global-nav ul li a {
	color: #333;
	padding: 0 20px;
}
/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:after {
	bottom: -10px;
}
#top-head.fixed #global-nav ul li:hover:after {
	background: #F6;
	bottom: -20px;
}
/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}
#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #666;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;
}
 @media screen and (max-width: 980px) {
article {
	padding: 0 30px;
}
.inner {
	width: 100%;
	padding: 0 20px;
}
#global-nav ul li a {
	padding: 0 20px;
}
#top-head.fixed #global-nav ul li a {
	padding: 0 15px;
}
}
/*もっと見るボタン*/
#text-wrap {
	width: 50%;
	height: 100%;
	display: block;
	margin: 0 auto;
	padding: 70px;
}
.hide-wrap {
	display: none;
}
button.readmore {
	position: relative;
	height: 80px;
	width: 90px;
	margin: 0 auto;
	display: block;
	background-color: transparent;
	color: #666;
	padding-bottom: 40px;
	border: none;
	outline: 0;
	transition: .5s;
	-erbkit-transition: .5s;
	cursor:pointer;
}
button.readmore::after {
	content: " ";
	position: absolute;
	width: 30px;
	height: 30px;
	border-top: solid 3px #666;
	border-right: solid 3px #666;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	right: 28px;
	top: 25px;
	transition: .5s;
	-erbkit-transition: .5s;
}
button.readmore:hover::after {
	top: 40px;
}
.on-click {
	color: transparent!important;
}
.on-click {
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
}
/*=======アイテムリスト========*/
.float_box ul, .float_box li, .float_box p {
	margin: 0;
	padding: 0;
}
.float_box {
	overflow: hidden;
}
.float_box ul {
	overflow: hidden;
	margin-right: -30px;
	margin-bottom: -30px;
}
.float_box li {
	list-style-type: none;
	float: left;
	width: 25%;
	margin-bottom: 30px;
	position:relative;
}
@media all and (min-width: 992px) {
/* タブレットサイズ以上のデザイン */
  .float_box li {
	/* 横幅を3個分に設定 */
    width: 25%;
}
.float_box li:nth-of-type(4n+1) {
	/* [4+1個置きにclearを設定] */
    clear: both;
}
}
@media all and (min-width: 641px) and (max-width: 991px) {
/* タブレットサイズ時のデザイン */
  .float_box li {
	/* 横幅を3個分に設定 */
    width: 33.333%;
}
.float_box li:nth-of-type(3n+1) {
	/* [3+1個置きにclearを設定] */
    clear: both;
}
}
.float_box li .badge {
	position: absolute;
	top: 2%;
	left : 2%;
	text-align:center;
	vertical-align: middle;
	line-height:50px;
	width : 50px;
	height : 50px;
	font-size:14px;
	color : #333;
	background : #FD0;
	-webkit-border-radius : 50%;
	-moz-border-radius : 50%;
	-ms-border-radius : 50%;
	border-radius : 50%;
}
.float_box a {
	display: block;
	margin-right: 30px;
	color: #000;
	text-decoration: none;
}
.float_box .image {
	max-width: 100%;
	display: block;
	margin: 0 auto 5px;
}
.float_box .name {
	margin-bottom: .75em;
	font-size: .875em;
	color: #777;
}
#topics {
	color:#666;
	overflow:hidden;
	background-color:#fff;
	text-align:left;
	box-sizing:border-box;
	border-radius:5px;
}
#topics .bx {
	display:block;
	width:100%;
	height:auto;
	position:relative;
}
#topics .bx a {
	text-decoration:none;
	color:#666666;
}
#topics a img {
	float:left;
	margin-right:10px;
}
#topics .txt1 a {
	display:block;
	padding:10px;
	font-size:110%;
	color:#F60;
	font-weight:bold;
}
#topics .txt2 {
	display:block;
	padding:10px;
	font-size:100%;
}
#topics .txt3 a {
	display:block;
	text-align:right;
	padding:10px;
	color:#FF6600;
	font-size:100%;
}
/*PCコンテンツ*/
#content {
	width:100%;
	margin:107px auto 0;
	box-sizing:border-box;
}
#content .block {
	display:block;
	width:100%;
	max-width:980px;
	margin:0 auto;
	padding:30px 10px;
	text-align:center;
	box-sizing:border-box;
}
#content .block p {
	line-height:1.5;
}
.txt-h2 {
	width:100%;
	text-align:center;
	padding:20px 10px;
	box-sizing:border-box;
	background:#FF6600;
	color:#FFF;
	font-weight:normal;
}
.article-block {
	display:block;
	width:100%;
	margin:0 auto;
	padding:10px;
	text-align:left;
	border:1px solid #ccc;
	background:#fff;
	box-sizing:border-box;
	border-radius:3px;
	color:#666666;
}
.txt-h3 {
	box-sizing:border-box;
	color:#F60;
	font-weight:bold;
	font-size:30px;
	line-height:35px;
	vertical-align:middle;
	background-image: url("../images/record.png");
	background-size: 35px 35px; /* 画像サイズ */
	background-repeat: no-repeat; /* 繰り返し表示オフ */
	padding: 0px 0px 0px 40px; /* 画像と重ならないように文字列を右に移動 */
	margin-bottom:20px;
}
.txt-h4 {
	box-sizing:border-box;
	color:#F60;
	font-weight:bold;
	font-size:25px;
	line-height:30px;
	vertical-align:middle;
	background-image: url("../images/record.png");
	background-size: 30px 30px; /* 画像サイズ */
	background-repeat: no-repeat; /* 繰り返し表示オフ */
	padding: 0px 0px 0px 35px; /* 画像と重ならないように文字列を右に移動 */
	margin:50px 0 10px;
}
.txt-mid {
	font-size:20px;
	font-weight:bold;
}
.txt-orange {
	color:#FF6600;
}
 @media screen and (max-width: 640px) {
.pc {
	display: none !important;
}
.sp {
	display: block !important;
}
#top-head, .inner {
	width: 100%;
	padding: 0;
}
#top-head {
	top: 0;
	position: fixed;
	margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
	padding-top: 0;
	background: transparent;
}
#mobile-head {
	background: #fff;
	width: 100%;
	height: 56px;
	z-index: 999;
	position: relative;
}
#top-head.fixed .logo, #top-head .logo {
	position: absolute;
	left: 13px;
	top: 13px;
	color: #333;
	font-size: 26px;
}
#top-head.fixed .logo img, #top-head .logo img {
	height:26px;
	width:137px;
}
#global-nav {
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #333;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#global-nav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 14px;
}
#global-nav ul li {
	float: none;
	position: static;
}
#global-nav ul li:after {
	display: none;
}
#top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	color: #fff;
	padding: 18px 0;
}
#nav-toggle {
	display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}
#content {
	margin-top:57px;
}
.txt-h2 {
	font-size:16px;
}
/* スマホサイズ時のデザイン */
  .float_box li {
	/* 横幅を2個分に設定 */
    width: 100%;
}
.float_box li:nth-of-type(2n+1) {
	/* [2+1個置きにclearを設定] */
    clear: both;
}
#topics a img {
	width:100%;
	height:auto;
	margin-bottom:10px;
}
#topics .txt1 {
	display:block;
	padding:10px;
	font-size:100%;
	color:#F60;
	font-weight:bold;
}
#topics .txt2 {
	display:block;
	padding:10px;
	font-size:14px;
}
#topics .txt3 {
	display:block;
	text-align:right;
	padding:10px;
	font-size:12px;
}
.article-block {
	font-size:14px;
}
.txt-h3 {
	font-size:20px;
	line-height:1.2;
	background-image: none;
	border-left:10px #FF6600 solid;
	padding: 0px 0px 0px 10px; /* 画像と重ならないように文字列を右に移動 */
	margin-bottom:20px;
}
.txt-h4 {
	font-size:130%;
	line-height:1.2;
	border-left:10px #FF6600 solid;
	background-image:none;
	padding: 0px 0px 0px 10px; /* 画像と重ならないように文字列を右に移動 */
	margin-bottom:10px;
}
.txt-mid {
	font-size:120%;
}
/* スマホサイズ時のデザイン */
  .float_box li {
	/* 横幅を2個分に設定 */
    width: 50%;
}
.float_box li:nth-of-type(2n+1) {
	/* [2+1個置きにclearを設定] */
    clear: both;
}
}
/*==============横スクロールナビ==============*/
.nav-horizontal {
	background-color: #fff;
	overflow: hidden;
	height: 66px;
	width: 100%;
	font-size:95%;
	position: relative;
}
.nav-horizontal .mask {
	height: 86px;
	width: 100%;
	max-width:1497px;
	margin:0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.nav-horizontal .list {
	display: inline-table;
	margin: 0 auto;
	max-width: 100%;
}
.nav-horizontal .list li {
	display: table-cell;
} 
.nav-horizontal .list a {
	display: block;
	padding: 0 1em;
	text-decoration: none;
	color: #333;
	line-height: 3;
	white-space:nowrap;
}


/*==============フィルター==============*/
.filter {
	padding:10px;
	margin: 0;
	background:#FFF;
	font-size:80%;
}
.filter a {
	display: inline-block;
	padding: 10px;
	border-radius:3px;
	position: relative;
	margin: 5px;
	text-decoration:none;
	color:#666;
	background:#efefef;
	border:1px solid #efefef;
}
.boxes {
	display: flex;
	flex-wrap: wrap;
}
.filter a.active:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-color: #000 transparent transparent transparent;
}
.is-animated {
	animation: .6s zoom-in;
}
 @keyframes zoom-in {
 0% {
 transform: scale(.1);
}
 100% {
 transform: none;
}
}