@charset "UTF-8";
@import "reset.css";


/*//////////////// 全体 ///////////////////*/

body {
	color: #000000;
	font-size: 1em;
	font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
/*	font-family: "Open Sans", "ＭＳ Ｐゴシック", "Meiryo UI", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;*/
	background-color: #ffffff;
}

li { list-style: none; }
img { vertical-align: bottom; }

a {
	color: #000000;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #0084ff;
}

#wrapper {
	width: 100%;
	position: relative;
}

.mrgT5 { margin-top: 5px; }
.mrgT10 { margin-top: 10px; }
.mrgT15 { margin-top: 15px; }
.mrgT20 { margin-top: 20px; }

.mrgR5 { margin-right: 5px; }
.mrgR10 { margin-right: 10px; }
.mrgR15 { margin-right: 15px; }
.mrgR20 { margin-right: 20px; }

.mrgB5 { margin-bottom: 5px; }
.mrgB10 { margin-bottom: 10px; }
.mrgB15 { margin-bottom: 15px; }
.mrgB20 { margin-bottom: 20px; }

.mrgL5 { margin-left: 5px; }
.mrgL10 { margin-left: 10px; }
.mrgL15 { margin-left: 15px; }
.mrgL20 { margin-left: 20px; }

.pdgT5 { padding-top: 5px; }
.pdgT10 { padding-top: 10px; }
.pdgT15 { padding-top: 15px; }
.pdgT20 { padding-top: 20px; }

.pdgR5 { padding-right: 5px; }
.pdgR10 { padding-right: 10px; }
.pdgR15 { padding-right: 15px; }
.pdgR20 { padding-right: 20px; }

.pdgB5 { padding-bottom: 5px; }
.pdgB10 { padding-bottom: 10px; }
.pdgB15 { padding-bottom: 15px; }
.pdgB20 { padding-bottom: 20px; }

.pdgL5 { padding-left: 5px; }
.pdgL10 { padding-left: 10px; }
.pdgL15 { padding-left: 15px; }
.pdgL20 { padding-left: 20px; }





/*//////////////// clearfix ///////////////////*/

.clearfix {
	zoom: 1;
}
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}


/*//////////////// rollover ///////////////////*/

.rollover {
	background-color: rgba(0, 53, 103, 0.8);
	transition: 0.3s;
}
.rollover:hover {
	background-color: rgba(0, 132, 255, 0.8);
}
a.rollover {
	display: block;
	color: #ffffff;
	text-decoration: none;
	border-radius: 10px;
}
a.rollover::before {	/*矢印*/
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	margin-left: 15px;
	margin-right: 15px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid #ffffff;
}


/*//////////////// header ///////////////////*/

header {
	height: 100px;
	margin: 20px auto 30px;
	font-size: 0.9em;
}
header .font_large {
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

header .header_left {
	float: left;
}
header .header_left h1 {
	text-align: center;
}
header .header_left h1 a {
	color: #2e9aff;
	font-weight: bold;
	letter-spacing: 1.75em;
}
header .header_left h1 a span:first-child {
	font-size: 1.8em;
}
header .header_left h1 a span:last-child {
	display: block;
	margin-top: 12px;
	font-size: 1.2em;
}
header .header_left .header_address {
	margin-top: 1em;
	line-height: 1.5em;
}

header .header_right {
	float: right;
}
header .header_right div {
	padding-bottom: 1em;
	text-align: right;
}
header .header_right .lang {
	line-height: 1.5em;
}
header .header_right .lang a:not(.lang a:first-child) {
	padding-left: 7px;
}
header .header_right .lang a:not(.lang a:last-child) {
	padding-right: 7px;
	border-right: 1px solid #000000;
}


/*//////////////// nav ///////////////////*/

nav ul,
.sp_sub_nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
nav li,
.sp_sub_nav li {
	height: 100px;
	background-color: rgba(0, 53, 103, 0.8);
	box-shadow: 3px 5px 3px 2px rgba(0, 0, 0, 0.5);
}
nav li a,
.sp_sub_nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-size: 1.3em;
	text-align: center;
	line-height: 1.2em;
	text-shadow: 4px 3px 3px rgba(0, 0, 0, 0.5);
	transition: 0.3s;
}
nav li a:hover,
.sp_sub_nav li a:hover {
	color: #ffffff;
}
nav li.on_page,
.sp_sub_nav li.on_page {
	background-color: rgba(0, 132, 255, 0.8);
}
nav li.rollover:not(nav li.on_page):hover,
.sp_sub_nav li.rollover:not(nav li.on_page):hover {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

nav {
	display: block;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 1000;
}
nav::before,
nav::after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	background-color: rgba(0, 53, 103, 0.8);
	box-shadow: 3px 5px 3px 2px rgba(0, 0, 0, 0.5);
}
nav::before {
	left: 0;
}
nav::after {
	right: 0;
}
nav ul {
	flex-wrap: nowrap;
}
nav li {
	width: 100px;
	margin-left: 10px;
	margin-right: 10px;
}

.sp_sub_nav {
	display: none;
	width: 100%;
	height: 100%;
}


/*//////////////// top_content ///////////////////*/

#top_content {
	position: relative;
	width: 100%;
	height: 630px;
	margin-top: -80px;
}

#top_content .img_frame {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
}
#top_content .img_frame .mv {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
#top_content .img_frame .img_mv_01 {
	background-image: url("../img/img_mv_pc_001.jpg");
	animation: slide-animation-01 40s infinite;
}
#top_content .img_frame .img_mv_02 {
	background-image: url("../img/img_mv_pc_002.jpg");
	animation: slide-animation-02 40s infinite;
}
#top_content .img_frame .img_mv_03 {
	background-image: url("../img/img_mv_pc_003.jpg");
	animation: slide-animation-03 40s infinite;
}
#top_content .img_frame .img_mv_04 {
	background-image: url("../img/img_mv_pc_004.jpg");
	animation: slide-animation-04 40s infinite;
}
#top_content .img_frame .img_mv_05 {
	background-image: url("../img/img_mv_pc_005.jpg");
	animation: slide-animation-05 40s infinite;
}

/* MV スライドショー */
@-webkit-keyframes slide-animation-01 {
	0%, 100% {
		opacity: 1;
		-webkit-transform: scale(1.1);
	}
	12% {
		opacity: 1;
	}
	20% {
		opacity: 0;
		-webkit-transform: scale(1.0);
	}
	92% {
		opacity: 0;
	}
}

@keyframes slide-animation-01 {
	0%, 100% {
		opacity: 1;
		transform: scale(1.1);
	}
	12% {
		opacity: 1;
	}
	20% {
		opacity: 0;
		transform: scale(1.0);
	}
	92% {
		opacity: 0;
	}
}


@-webkit-keyframes slide-animation-02 {
	0%, 100% {
		opacity: 0;
	}
	12% {
		opacity: 0;
		-webkit-transform: scale(1.0);
	}
	20%, 32% {
		opacity: 1;
	}
	40% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
}

@keyframes slide-animation-02 {
	0%, 100% {
		opacity: 0;
	}
	12% {
		opacity: 0;
		transform: scale(1.0);
	}
	20%, 32% {
		opacity: 1;
	}
	40% {
		opacity: 0;
		transform: scale(1.1);
	}
}


@-webkit-keyframes slide-animation-03 {
	0%, 60%, 100% {
		opacity: 0;
	}
	32% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	40%, 52% {
		opacity: 1;
	}
	60% {
		opacity: 0;
		-webkit-transform: scale(1.0);
	}
}

@keyframes slide-animation-03 {
	0%, 60%, 100% {
		opacity: 0;
	}
	32% {
		opacity: 0;
		transform: scale(1.1);
	}
	40%, 52% {
		opacity: 1;
	}
	60% {
		opacity: 0;
		transform: scale(1.0);
	}
}


@-webkit-keyframes slide-animation-04 {
	0%, 100% {
		opacity: 0;
	}
	52% {
		opacity: 0;
		-webkit-transform: scale(1.0);
	}
	60%, 72% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
}

@keyframes slide-animation-04 {
	0%, 100% {
		opacity: 0;
	}
	52% {
		opacity: 0;
		transform: scale(1.0);
	}
	60%, 72% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		transform: scale(1.1);
	}
}


@-webkit-keyframes slide-animation-05 {
	0% {
		opacity: 0;
	}
	72% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	80%, 92% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1.0);
	}
}

@keyframes slide-animation-05 {
	0% {
		opacity: 0;
	}
	72% {
		opacity: 0;
		transform: scale(1.1);
	}
	80%, 92% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.0);
	}
}


/*//////////////// news_info ///////////////////*/

#top_content .news_info {
	position: absolute;
	top: 370px;
	width: 100%;
	font-size: 0.8em;
	background-color: rgba(0, 0, 0, 0.8);
}
#top_content .news_info .info_container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

#top_content .news_info .info_box {
	flex: 1;
	width: 40%;
	padding: 30px 10px 40px;
	color: #ffffff;
}
#top_content .news_info .info_box h2 {
	width: 95%;
	margin-bottom: 10px;
	padding: 7px;
	border: solid 2px #ffffff;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.2em;
}
#top_content .news_info .info_box p {
	width: 100%;
	margin-bottom: 10px;
	border-bottom: dotted 1px #ffffff;
	line-height: 2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#top_content .news_info .info_box p a {
	color: #ffffff;
	text-decoration: none;
}
#top_content .news_info .info_box p a:hover {
	color: #009fff;
}
#top_content .news_info .info_box p a span {
	display: inline-block;
	padding-right: 15px;
}


#top_content .news_info .info_box div {
	position: relative;
}
#top_content .news_info .info_box div .detail {
	position: absolute;
	right: 0;
	width: 115px;
	height: 25px;
	padding-left: 10px;
	border: groove 2px #ffffff;
	text-align: center;
	line-height: 25px;
}


/*//////////////// catch_copy ///////////////////*/

.catch_copy {
	height: 200px;
	margin: 0 auto;
}
.catch_copy img {
	width: 100%;
	height: auto;
}


/*//////////////// main_content ///////////////////*/

#main_content {
	margin: 0 auto;
	background: url("../img/top_main_content_bg.jpg") no-repeat top 145px right 26px / 62%;
}


/*//////////////// sub_menu ///////////////////*/

#main_content #sub_menu {
	float: left;
}
#main_content #sub_menu li {
	width: 260px;
	height: 170px;
}
#main_content #sub_menu li img {
	width: 100%;
	height: auto;
	transition: transform 0.3s linear;

}
#main_content #sub_menu li img:hover {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}


/*//////////////// bacic_info ///////////////////*/

#main_content #bacic_info {
	float: left;
	position: relative;
	width: 57%;
	margin-top: 333px;
	margin-left: 34px;
	padding: 6% 3% 12%;
	color: #003567;
	background: url("../img/bacic_info_bg_01.png") top left,
	url("../img/bacic_info_bg_02.png") top right,
	url("../img/bacic_info_bg_03.png") bottom right,
	url("../img/bacic_info_bg_04.png") bottom left;
	background-size: 20%;
	background-repeat: no-repeat;
}
#main_content #bacic_info h2 {
	margin-bottom: 5%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
#main_content #bacic_info h2 span {
	display: inline-block;
	width: 45%;
	text-align-last: justify;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

#main_content #bacic_info .info_menu {
	width: 94%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: nowrap;
	padding-top: 5%;
	padding-bottom: 3%;
	margin-left: 4%;
	margin-right: 4%;
	border-bottom: 1px solid #9b9b9b;
	line-height: 1.2em;
}
#main_content #bacic_info .info_menu h3 {
	flex: 1 1 15%;
	margin-right: 3%;
	padding: 5px;
	font-weight: bold;
	text-align-last: justify;
	border: solid 1px #003567;
}
#main_content #bacic_info .info_menu ul {
	flex: 1 1 85%;
	padding-left: 4%;
}
#main_content #bacic_info .info_menu li {
	margin-bottom: 3%;
	list-style : disc outside;
}
#main_content #bacic_info .info_menu dd {
	padding-top: 5px;
}
#main_content #bacic_info .info_menu dd:not(ul li:last-child) {
	padding-bottom: 10px;
}
#main_content #bacic_info .info_menu .notes {
	color: #ff0000;
	font-size: 1.3em;
	font-weight: bold;
}

#main_content #bacic_info .detail {
	position: absolute;
	bottom: 6%;
	right: 10%;
	width: 31%;
	height: 40px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 2.5em;
}


/*//////////////// page_top ///////////////////*/

.page_top {
	position: fixed;
	bottom: 30px;
	right: 70px;
	width: 40px;
	height: 70px;
	z-index: 1100;
	opacity: 0.5;
	transition: 0.3s;
}
.page_top:hover {
	opacity: 1;
}
.page_top::before {
	content: "";
	position: absolute;
	top: 41px;
	left: -4px;
	width: 9px;
	height: 23px;
	background: #6582c1;
	border-radius: 50%;
	box-shadow: 8px -4px 0 0px #6582c1, -7px 5px 0 0px #6582c1;
	-webkit-transform: rotate(27deg);
	transform: rotate(27deg);
}
.page_top::after {
	content: "";
	position: absolute;
	top: 41px;
	left: 55px;
	width: 9px;
	height: 23px;
	background: #6582c1;
	border-radius: 50%;
	box-shadow: -8px -4px 0 0px #6582c1, 7px 5px 0 0px #6582c1;
	-webkit-transform: rotate(-27deg);
	transform: rotate(-27deg);
}
.page_top a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px 10px;
	text-align: center;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}
.page_top a::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 14px;
	width: 32px;
	height: 58px;
	background-color: #6582c1;
	border-radius: 50%;
}
.page_top a::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 26px;
	width: 0;
	height: 0;
	background: transparent;
	border-bottom: 10px solid #6582c1;
	border-left: 4px solid transparent;
	border-right: 7px solid transparent;
	border-radius: 20%;
	-webkit-transform: rotate(125deg);
	transform: rotate(125deg);
}
.page_top a p {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #6582c1;
/*	background-color: rgba(0, 53, 102, 0.5);*/
	border-radius: 50%;
	box-shadow: -7px 24px 0 -17px #6582c1, -1px 26px 0 -16px #6582c1, 5px 24px 0 -17px #6582c1;
}
.page_top a p::before {
	content: "";
	position: absolute;
	top: 25px;
	left: -36px;
	width: 0;
	height: 0;
	background: transparent;
	border-bottom: 32px solid #6582c1;
	border-left: 19px solid transparent;
	border-right: 51px solid transparent;
	border-radius: 50%;
	-webkit-transform: rotate(123deg);
	transform: rotate(123deg);
}
.page_top a p::after {
	content: "";
	position: absolute;
	top: 25px;
	left: 5px;
	width: 0;
	height: 0;
	background: transparent;
	border-bottom: 32px solid #6582c1;
	border-left: 51px solid transparent;
	border-right: 19px solid transparent;
	border-radius: 50%;
	-webkit-transform: rotate(231deg);
	transform: rotate(231deg);
}
.page_top a p span {
	position: absolute;
	bottom: -18px;
	left: 0;
	width: 100%;
	height: 100%;
	color: #ffffff;
	line-height: 1.1em;
	z-index: 100;
}

.page_top.scroll_move {
	-webkit-animation: 1s linear infinite scroll_move;
	animation: 1s linear infinite scroll_move;
}

@-webkit-keyframes scroll_move {
	0%, 50% {
		-webkit-transform: translateX(0);
	}
	25% {
		-webkit-transform: translateX(6px);
	}
	100% {
		-webkit-transform: translateX(-6px);
	}
}

@keyframes scroll_move {
	0%, 50% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(6px);
	}
	100% {
		transform: translateX(-6px);
	}
}


/*//////////////// footer ///////////////////*/

footer {
	clear: both;
	width: 100%;
	height: 100%;
	padding-bottom: 20px;
	font-size: 0.9em;
	background: url("../img/footer_bg.jpg") no-repeat #ffffff center; bottom 0;
	background-size: cover;
}
footer .footer_container {
	width: 100%;
	padding-top: 40%;
}
footer .footer_container .footer_bdr_container {
	display: flex;
	justify-content: center;
	width: 100%;
	border-top: 1px solid #9b9b9b;
}
footer .footer_container .footer_box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: nowrap;
}
footer .footer_container .footer_box > div {
	padding-top: 20px;
}
footer .footer_container .footer_box .footer_left {
	flex: 2 1 33%;
}
footer .footer_container .footer_box .footer_left h4 {
	padding-bottom: 5px;
	font-size: 1.2em;
	font-weight: bold;
}
footer .footer_container .footer_box .footer_left p {
	padding-bottom: 5px;
}
footer .footer_container .footer_box .footer_center {
	flex: 3 1 40%;
	align-self: end;
	text-align: center;
}
footer .footer_container .footer_box .footer_center a:not(.footer_center a:first-child) {
	padding-left: 7px;
}
footer .footer_container .footer_box .footer_center a:not(.footer_center a:nth-child(3)) {
	padding-right: 7px;
	border-right: 1px solid #000000;
}
footer .footer_container .footer_box .footer_center .copyright {
	padding-top: 30px;
}
footer .footer_container .footer_box .footer_right {
	flex: 1 1 20%;
	text-align: right;
}
footer .footer_container .footer_box .footer_right a img {
	padding-left: 7px;
}
footer .footer_container .footer_box .footer_right a:hover {
	opacity: 0.7;
}


/*//////////////// @media ///////////////////*/

@media (min-width: 1440px) {

	#top_content {
		height: 800px;
	}
	#top_content .news_info {
		top: 540px;
	}

	footer {
		background-size: 70%;
	}
	footer .footer_container {
		width: 1440px;
		margin: 0 auto;
		padding-top: 25%;
	}

}


@media (min-width: 860px) {

	.tb_none {
		display: none;
	}

	header,
	#top_content .news_info .info_container,
	.catch_copy,
	#main_content,
	footer .footer_container .footer_box {
		width: 860px;
	}

	footer {
		margin: 10px;
	}
}


@media (max-width: 859px) {

	header,
	#top_content .news_info .info_container,
	footer .footer_container .footer_box {
		width: 98%;
	}

	header .header_left,
	header .header_right,
	#top_content .news_info .info_box,
	#main_content #sub_menu,
	#main_content #bacic_info,
	footer .footer_container .footer_box .footer_left,
	footer .footer_container .footer_box .footer_right {
		margin-left: 1%;
		margin-right: 1%;
	}

	header {
		margin: 0;
		padding: 30px 0;
	}
	header .header_left {
		width: 260px;
	}
	header .header_left h1 a span:first-child {
		letter-spacing: 0.2em;
	}
	header .header_left h1 a span:last-child {
		letter-spacing: 0.7em;
	}
	header .header_right {
		width: 240px;
	}

	nav::before,
	nav::after {
		display: none;
	}
	nav li {
		width: 100%;
		margin-left: 1%;
		margin-right: 1%;
	}

	.catch_copy {
		height: 100%;
	}

	#main_content {
		background-position-x: 85%;
		background-size: 55%;
	}
	#main_content #sub_menu {
		width: 30%;
	}
	#main_content #sub_menu li,
	#main_content #sub_menu li img {
		width: 100%;
		height: 100%;
	}
	#main_content #sub_menu li {
		margin-bottom: 10px;
	}
	#main_content #bacic_info {
		margin-top: 33%;
		margin-left: 3%;
	}

	footer .footer_container .footer_box {
		flex-wrap: wrap;
	}
	footer .footer_container .footer_box > div {
	}
	footer .footer_container .footer_box .footer_center {
		order: 3;
	}
	footer .footer_container .footer_box .footer_right {
		flex-basis: 50%;
	}

}


@media (max-width: 768px) {

	.tb_none {
		display: block;
	}

	nav li a,
	.sp_sub_nav li a {
		font-size: 1em;
	}

	#main_content {
		background-position-y: 13%;
	}
	#main_content #bacic_info {
		margin-top: 35%;
		margin-left: 2%;
	}
	#main_content #bacic_info h2 {
		margin-bottom: 2%;
	}
	#main_content #bacic_info .info_menu {
		flex-wrap: wrap;
		padding-bottom: 0;
		border-bottom: none;
	}
	#main_content #bacic_info .info_menu h3 {
		margin-bottom: 5%;
		margin-right: 0;
		padding-left: 3.5em;
		text-align: center;
		text-align-last: center;
		letter-spacing: 3.5em;
	}
	#main_content #bacic_info .detail {
		width: 65%;
	}

}


@media (min-width: 541px) {

	.pc_none {
		display: block;
	}
	.sp_none {
		display: none;
	}

	.spmenu_btn,
	.spmenu_btn p {
		display: none !important;
	}

	nav {
		display: block !important;
	}

}


@media (max-width: 540px) {

	.pc_none {
		display: none;
	}
	.sp_none {
		display: block;
	}

	header {
		height: auto;
	}
	header .header_left,
	header .header_right {
		float: none;
		width: 100%;
	}
	header .header_left p,
	header .header_right div {
		text-align: center;
	}
	header .header_right {
		margin-top: 30px;
	}

	.spmenu_btn {
		display: block;
		position: fixed;
		top: 20px;
		right: 10px;
		width: 45px;
		height: 45px;
		background-color: #335d85;
		cursor: pointer;
		z-index: 2100;
	}
	.spmenu_btn p {
		display: flex;
		justify-content: center;
		margin-top: 32px;
		/*position: absolute;
		bottom: 2px;
		left: 8px;*/
		color: #ffffff;
		font-size: 0.6em;
	}
	.spmenu_btn span {
		position: absolute;
		top: 10px;
		right: 8px;
		width: 66%;
		height: 36%;
		background-color: #ffffff;
		border-top: 7px solid #335d85;
		border-bottom: 7px solid #335d85;
		box-sizing: border-box;
		transition: 0.3s;
	}
	.spmenu_btn span::before,
	.spmenu_btn span::after {
		content: '';
		position: absolute;
		right: 0;
		width: 100%;
		height: 3px;
		background-color: #ffffff;
		transition: 0.3s;
	}
	.spmenu_btn span::before {
		top: -10px;
	}
	.spmenu_btn span::after {
		bottom: -10px;
	}
	.spmenu_btn.active span {
		-webkit-transform: translate3d(1px, 0, 0) rotate(-45deg);
		transform: translate3d(1px, 0, 0) rotate(-45deg);
	}
	.spmenu_btn.active span::before {
		width: 40%;
		-webkit-transform: translate3d(-10px, 1px, 0) rotate(450deg);
		transform: translate3d(-10px, 1px, 0) rotate(450deg);
	}
	.spmenu_btn.active span::after {
		width: 40%;
		-webkit-transform: translate3d(-10px, -1px, 0) rotate(270deg);
		transform: translate3d(-10px, -1px, 0) rotate(270deg);
	}

/*	nav.sp_nav {
		display: none;
	}*/
	nav {
		display: none;
		position: fixed;
		height: 100%;
		background: rgba(0, 53, 103, 0.8);
		overflow-y: scroll;
		z-index: 2000;
	}
	nav ul {
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 65px;
	}
	nav li {
		height: 50px;
	}
	nav li.rollover:hover {
		background-color: rgba(0, 53, 103, 0.8);
	}
	nav li.rollover:not(nav li.on_page):hover,
	.sp_sub_nav li.rollover:not(nav li.on_page):hover {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.sp_sub_nav {
		display: block;
		margin-top: 30px;
	}
	.sp_sub_nav ul {
		flex-wrap: wrap;
	}
	.sp_sub_nav li {
		flex: 1 25%;
		margin: 10px;
	}

	#top_content {
		height: 100%;
		margin-top: 0;
	}
	#top_content .img_frame {
		height: 50vh;
	}
	#top_content .news_info {
		position: relative;
		top: 0;
	}
	#top_content .news_info .info_container {
		flex-wrap: wrap;
	}
	#top_content .news_info .info_box {
		flex-basis: 50%;
		width: 90%;
		padding-left: 0;
		padding-right: 0;
	}

	.catch_copy {
		margin-top: -3px;
	}

	#main_content {
		background-position-y: 8%;
		background-size: contain;
	}
	#main_content #sub_menu,
	#main_content #bacic_info {
		float: none;
		margin-left: 2%;
		margin-right: 2%;
	}
	#main_content #sub_menu {
		width: 96%;
		margin-top: 85%;
	}
	#main_content #sub_menu li img:hover {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	#main_content #bacic_info {
		width: 90%;
		margin-top: 10%;
		padding: 10% 3% 30%;
	}
	#main_content #bacic_info h2 {
		margin-bottom: 5%;
	}
	#main_content #bacic_info .info_menu h3 {
		padding-left: 2.5em;
		letter-spacing: 2.5em;
	}

	.page_top {
		bottom: 130px;
	}

	footer .footer_container .footer_box > div {
		flex-basis: 100% !important;
	}
	footer .footer_container .footer_box .footer_right {
		text-align: center;
	}

}


@media (max-width: 280px) {

	header .header_left h1 a span:first-child {
		font-size: 1.5em;
	}
	header .header_left h1 a span:last-child {
		font-size: 0.8em;
	}

	.sp_sub_nav li {
		flex-basis: 30%;
	}

	#main_content {
		background-position-y: 7%;
	}
	#main_content #bacic_info h2 {
		font-size: 1em;
	}
	#main_content #bacic_info h2 span {
		width: 70%;
	}
	#main_content #bacic_info .info_menu h3 {
		padding-left: 1.2em;
		letter-spacing: 1.2em;
	}
	#main_content #bacic_info .detail {
		bottom: 3%;
		right: 7%;
		width: 83%;
	}

}