@charset "utf-8";

* {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "webfont",
		"メイリオ", sans-serif;
	/*以下明朝
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	*/
	line-height: 1.7em;
}

.mincho {
	font-family: Georgia, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

@media all and (-ms-high-contrast: none) {
	* {
		font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic,
			"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック",
			"MS PGothic", sans-serif;
	}
}

@media screen and (max-width: 768px) {
	.h-b-ttl {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.h-b-txt {
		font-size: 14px;
		font-weight: 500;
		line-height: 2em;
	}
	.h-b-note {
		font-size: 12px;
		font-weight: 400;
		line-height: 2em;
	}
	.f-b-ttl {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.f-b-txt {
		font-size: 14px;
		font-weight: 500;
		line-height: 2em;
	}
	.f-b-note {
		font-size: 12px;
		font-weight: 400;
		line-height: 2em;
	}
	.b-ttl {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.b-txt {
		font-size: 14px;
		font-weight: 500;
		line-height: 2em;
	}
	.b-note {
		font-size: 12px;
		font-weight: 400;
		line-height: 2em;
	}
	header {
		width: 100%;
		height: 50px;
	}
	#header1 {
		display: block;
		width: 100%;
		height: 100%;
	}
	.header-wrap {
		display: block;
		width: 100%;
		height: 50px;
		background-color: #fff;
		border-bottom: solid 5px #000;
		position: fixed;
		top: 0;
		left: 0;
		z-index:9000;
	}
	.header-in {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		position: relative;
	}
	.header-logo {
		position: absolute;
		height: 30px;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
	}
	.btn-entry.only-pc {
		display: none !important;
	}
	.btn-entry {
		display: inline-block;
		font-family: Teko, sans-serif;
		border: solid 2px #fff;
		color: #fff;
		margin: 30px 0 0 0;
		text-align: center;
		position: relative;
		overflow: hidden;
	}
	.btn-entry span {
		display: inline-flex;
		padding: 24px 20px 24px 20px;
		line-height: 1em;
		position: relative;
		z-index: 2;
		font-weight: 600;
		transition: color 0.4s;
	}
	.btn-entry:hover span {
		color: #000;
	}
	.btn-entry::before {
		display: block;
		position: absolute;
		top: -30px;
		left: -5%;
		z-index: 1;
		content: "";
		width: 110%;
		height: 500%;
		background: #fff;
		transform-origin: left bottom;
		transform: skewY(-10deg) scale(0, 1);
		transition: transform 0.4s;
	}
	.btn-entry:hover::before {
		transform-origin: left top;
		transform: skewY(-10deg) scale(1.1, 1);
	}
	.btn-hum-wrap {
		background-color: #d23732;
		width: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 50;
	}
	.btn-hum-wrap.active {
		background-color: #fff;
	}
	.btn-hum-wrap .hum-border {
		width: 30px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: all 0.4s;
	}
	.btn-hum-wrap .hum-border:nth-child(1) {
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.btn-hum-wrap .hum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	.btn-hum-wrap .hum-border:nth-child(3) {
		top: 65%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.btn-hum-wrap.active {
		background-color: #fff;
	}
	.btn-hum-wrap.active .hum-border {
		background-color: #d23732;
	}
	.btn-hum-wrap.active .hum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-315deg);
	}
	.btn-hum-wrap.active .hum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
	}
	.btn-hum-wrap.active .hum-border:nth-child(3) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(315deg);
	}

	.submenu {
		background-color: rgba(210, 55, 50, 0.8);
		width: 100%;
		height: 100%;
		position: fixed;
		top: -110%;
		left: 0;
		opacity: 0;
		z-index: 40;
		transition: all 0.4s;
		box-sizing: content-box;
	}
	.submenu.active {
		top: 0%;
		opacity: 1;
	}
	.submenu-wrap {
		width: 80%;
		height: 100%;
		padding: 90px 0;
		margin: 0 auto;
		position: relative;
	}
	.submenu-in {
		width: 100%;
		height: 100%;
	}
	.submenu-in .submenu-list-wrap {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.submenu-in .submenu-list-wrap .submenu-list {
		width: 100%;
		position: relative;
		border-bottom: solid 1px #fff;
	}
	.submenu-in .submenu-list-wrap .submenu-list .submenu-list-title {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.submenu-in
		.submenu-list-wrap
		.submenu-list
		.submenu-list-title
		.submenu-list-link {
		color: #fff;
		display: block;
		padding: 20px 0 20px 10px;
	}
	.submenu-in .submenu-list-wrap2 {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
		border-top: solid 1px #fff;
		display: none;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list {
		width: 100%;
		min-width: 950px;
		margin: 0 0 0 20px;
		position: relative;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list:last-child {
		border: none;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list .submenu-list-title {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.submenu-in
		.submenu-list-wrap2
		.submenu-list
		.submenu-list-title
		.submenu-list-link {
		display: block;
		color: #fff;
		padding: 20px 0 20px 20px;
	}
	.btn-subhum-wrap {
		width: 55px;
		height: 55px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 50;
	}
	.btn-subhum-wrap .subhum-border {
		width: 25px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: all 0.4s;
	}
	.btn-subhum-wrap .subhum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-90deg);
	}
	.btn-subhum-wrap .subhum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
		opacity: 1;
	}
	.btn-subhum-wrap.active .subhum-border {
		background-color: #fff;
	}
	.btn-subhum-wrap.active .subhum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(180deg);
		opacity: 0;
	}
	.btn-subhum-wrap.active .subhum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	footer {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	footer #footer1 {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	footer .footer-wrap {
		background-color: #d23732;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 0 30px 0;
	}
	footer .footergototop {
		background-color: #000;
		display: block;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	footer .footergototop img {
		width: 100%;
		height: auto;
		position: relative;
		z-index: 5;
		margin: 0 auto;
	}
	footer .footergototop::before {
		background: #666;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		content: "";
		width: 0%;
		height: 100%;
		transition: width 0.4s;
	}
	footer .footergototop:hover::before {
		width: 100%;
	}
	footer .footer-in {
		width: 90%;
		margin: 0 auto 0 auto;
		position: relative;
		padding: 50px 0 150px 0;
	}
	footer .footer-in ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0;
	}
	footer .footer-in ul li {
		width: 100%;
		display: inline-block;
		vertical-align: top;
		padding: 0 10px 0 10px;
		margin: 0 0 20px 0;
	}
	.yoko footer .footer-in ul li {
		width: 100%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
		padding: 0 10px 0 10px;
		margin: 0 0 20px 0;
	}
	footer .footer-in ul li a {
		color: #fff;
		display: inline-block;
	}
	footer .footer-in ul li h4 {
		display: inline-block;
		position: relative;
	}
	footer .footer-in ul li h4 .footer-ttl {
		position: relative;
	}
	footer .footer-in ul li h4 span {
		color: #fff;
		display: block;
		content: " ";
		position: absolute;
		width: 0%;
		height: 2px;
		bottom: -2px;
		left: 0;
		transition: width 0.4s;
	}
	footer .footer-in ul li h4:hover span {
		width: 100%;
	}
	footer .footer-in .footer-in-etc {
		text-align: left;
		margin: 0 0 0 0;
		padding: 0 0 0 10px;
	}
	footer .footer-in .footer-in-etc a {
		color: #fff;
		font-weight: 800 !important;
	}
	footer .footer-in .footer-in-etc a img {
		margin: 0 0 0 7px;
		position: relative;
		top: 3px;
	}
	footer .footer-wrap .footer-bottom {
		width: 100%;
		margin: 20px 0 0 0;
	}
	footer .footer-wrap p {
		color: #fff;
		width: 90%;
		text-align: left;
		margin: 0 auto;
		padding: 10px 0 10px 10px;
	}
}

@media screen and (min-width: 769px) {
	.h-b-ttl {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.h-b-txt {
		font-size: 16px;
		font-weight: 500;
		line-height: 2em;
	}
	.h-b-note {
		font-size: 14px;
		font-weight: 400;
		line-height: 2em;
	}
	.f-b-ttl {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.f-b-txt {
		font-size: 16px;
		font-weight: 500;
		line-height: 2em;
	}
	.f-b-note {
		font-size: 14px;
		font-weight: 400;
		line-height: 2em;
	}
	.b-ttl {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.6em;
	}
	.b-txt {
		font-size: 16px;
		font-weight: 500;
		line-height: 2em;
	}
	.b-note {
		font-size: 14px;
		font-weight: 400;
		line-height: 2em;
	}
	header * {
		box-sizing: border-box;
	}
	main {
		width: 100%;
		min-width: 1000px;
	}
	header {
		display: block;
		width: 100%;
		min-width: 1200px;
		height: 90px;
	}
	#header1 {
		display: block;
		width: 100%;
		height: 100%;
	}
	.header-wrap {
		display: block;
		width: 100%;
		height: 90px;
		background-color: #fff;
		border-bottom: solid 10px #000;
		position: fixed;
		top: 0;
		left: 0;
		z-index:9000;
	}
	.header-in {
		width: 100%;
		max-width: 1000px;
		min-width: 1000px;
		height: 100%;
		margin: 0 auto;
		position: relative;
	}
	.header-logo {
		position: absolute;
		top: 50%;
		left: 30px;
		transform: translateY(-50%);
		height: 38px;
	}
	.btn-entry.only-sp {
		display: none !important;
	}
	.btn-entry {
		display: inline-block;
		font-family: Teko, sans-serif;
		position: absolute;
		top: 50%;
		right: 110px;
		transform: translateY(-50%);
		border: solid 2px #000;
		color: #000;
		overflow: hidden;
	}
	.btn-entry span {
		display: inline-flex;
		padding: 6px 20px 8px 20px;
		line-height: 1em;
		position: relative;
		z-index: 2;
		font-weight: 600;
		transition: color 0.4s;
	}
	.btn-entry:hover span {
		color: #fff;
	}
	.btn-entry::before {
		display: block;
		position: absolute;
		top: -30px;
		left: -5%;
		z-index: 1;
		content: "";
		width: 110%;
		height: 500%;
		background: #000;
		transform-origin: left bottom;
		transform: skewY(-10deg) scale(0, 1);
		transition: transform 0.4s;
	}
	.btn-entry:hover::before {
		transform-origin: left top;
		transform: skewY(-10deg) scale(1.1, 1);
	}
	.btn-hum-wrap {
		background-color: #d23732;
		width: 90px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 50;
	}
	.btn-hum-wrap.active {
		background-color: #fff;
	}
	.btn-hum-wrap .hum-border {
		width: 30px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: all 0.4s;
	}
	.btn-hum-wrap .hum-border:nth-child(1) {
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.btn-hum-wrap .hum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	.btn-hum-wrap .hum-border:nth-child(3) {
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.btn-hum-wrap.active .hum-border {
		background-color: #d23732;
	}
	.btn-hum-wrap.active .hum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-315deg);
	}
	.btn-hum-wrap.active .hum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
	}
	.btn-hum-wrap.active .hum-border:nth-child(3) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(315deg);
	}
	.submenu {
		background-color: rgba(210, 55, 50, 0.8);
		width: 100%;
		height: 100%;
		position: fixed;
		top: -110%;
		left: 0;
		opacity: 0;
		z-index: 40;
		transition: all 0.4s;
		box-sizing: content-box;
	}
	.submenu.active {
		top: 0%;
		opacity: 1;
	}
	.submenu-wrap {
		width: 100%;
		max-width: 800px;
		min-width: 800px;
		height: 100%;
		padding: 90px 0;
		margin: 0 auto;
		position: relative;
	}
	.submenu-in {
		width: 100%;
		height: 100%;
	}
	.submenu-in .submenu-list-wrap {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.submenu-in .submenu-list-wrap .submenu-list {
		width: 100%;
		position: relative;
		border-bottom: solid 1px #fff;
	}
	.submenu-in .submenu-list-wrap .submenu-list .submenu-list-title {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.submenu-in
		.submenu-list-wrap
		.submenu-list
		.submenu-list-title
		.submenu-list-link {
		color: #fff;
		display: block;
		padding: 30px 0 30px 20px;
	}
	.submenu-in .submenu-list-wrap2 {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
		border-top: solid 1px #fff;
		display: none;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list {
		width: 100%;
		min-width: 950px;
		margin: 0 0 0 50px;
		position: relative;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list:last-child {
		border: none;
	}
	.submenu-in .submenu-list-wrap2 .submenu-list .submenu-list-title {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.submenu-in
		.submenu-list-wrap2
		.submenu-list
		.submenu-list-title
		.submenu-list-link {
		display: block;
		color: #fff;
		padding: 30px 0 30px 20px;
	}
	.btn-subhum-wrap {
		width: 85px;
		height: 85px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 50;
	}
	.btn-subhum-wrap .subhum-border {
		width: 30px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: all 0.4s;
	}
	.btn-subhum-wrap .subhum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-90deg);
	}
	.btn-subhum-wrap .subhum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
		opacity: 1;
	}
	.btn-subhum-wrap.active .subhum-border {
		background-color: #fff;
	}
	.btn-subhum-wrap.active .subhum-border:nth-child(1) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(180deg);
		opacity: 0;
	}
	.btn-subhum-wrap.active .subhum-border:nth-child(2) {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	footer {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	footer #footer1 {
		display: block;
		width: 100%;
		min-width: 1200px;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	footer .footer-wrap {
		background-color: #d23732;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 0 20px 0;
	}
	footer .footergototop {
		display: block;
		width: 100%;
		min-width: 1200px;
		height: 50px;
		position: relative;
		overflow: hidden;
		background-color: #141414;
	}
	footer .footergototop img {
		width: auto;
		height: 100%;
		position: relative;
		z-index: 5;
		margin: 0 auto;
	}
	footer .footergototop::before {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		content: "";
		width: 0%;
		height: 100%;
		background: #666;
		transform-origin: left bottom;
		transition: width 0.4s;
	}
	footer .footergototop:hover::before {
		width: 100%;
	}
	footer .footer-in {
		width: 1000px;
		margin: 0 auto;
		padding: 100px 0 0 0;
		position: relative;
	}
	footer .footer-in ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0;
	}
	footer .footer-in ul li {
		width: 25%;
		display: inline-block;
		vertical-align: top;
		padding: 0 10px 0 10px;
	}
	footer .footer-in ul li a {
		display: block;
		text-align: center;
	}
	footer .footer-in ul li h4 {
		width: 100%;
		position: relative;
	}
	footer .footer-in ul li h4 .footer-ttl {
		color: #fff;
		position: relative;
		padding: 0 0 15px 0;
		margin: 0 0 30px 0;
	}
	footer .footer-in ul li h4 span {
		background-color: #fff;
		display: block;
		content: " ";
		position: absolute;
		width: 10%;
		height: 2px;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	footer .footer-in .footer-in-etc {
		text-align: center;
		margin: 15px 0 0 0;
	}
	footer .footer-in .footer-in-etc a {
		color: #fff;
		font-weight: 800 !important;
	}
	footer .footer-in .footer-in-etc a img {
		margin: 0 0 0 7px;
		position: relative;
		top: 3px;
	}

	footer .footer-wrap .footer-bottom {
		width: 100%;
	}
	footer .footer-wrap p {
		color: #fff;
		width: 100%;
		min-width: 1200px;
		text-align: center;
		margin: 0 auto;
		padding: 10px 0 10px 0;
	}
}