@charset "utf-8";

/*=====================================
top.css
=====================================*/

.mainArea {
	padding: 0;
}


/*-------------------------------------
 visual
-------------------------------------*/
.topMainVisual {
	position: relative;
	height: 540px;
	overflow: hidden;
}
.topMainVisual .inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.topMainVisual figure img {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: inherit;
	margin-left: -640px;
}
.topMainVisual .title {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 3px 3px 4px rgba(0,0,0,0.6);
}
.topMainVisual .title {
	font-size: 56px;
}
.topMainVisual .title h1 {
	font-size: 42px;
}

.topVisual {
	position: relative;
	height: 240px;
	overflow: hidden;
}
.topVisual .inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.topVisual figure img {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: inherit;
	margin-left: -640px;
}


/*-------------------------------------
 topSection
-------------------------------------*/
.topSection {
	padding: 75px 0;
}
.topSection:after {
	clear: both;
	content: "";
	display: block;
}
.topSection h2 {
	margin: 0 0 15px 0;
	font-size: 25px;
	font-weight: bold;
}
.topSection h3 {
	margin: 0 0 15px 0;
	font-size: 25px;
	font-weight: bold;
}
.topSection p {
	line-height: 1.9;
}
.topSectionBg01 {
	background-color: #F7F7F7;
}

.topSection .btn {
	display: inline-block;
	width: 280px;
}
.topSection .btn a {
	position: relative;
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 82px 0 30px;
	color: #fff;
	text-decoration: none;
	background: #0082D8;
}
.topSection .btn a:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	display: block;
	width: 70px;
	height: 1px;
	background: #fff;
}
.topSection .btn a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	display: block;
	width: 12px;
	height: 12px;
	border-top: 1px solid #fff;
	transform-origin: top right;
	transform: rotate(45deg);
}


/*-------------------------------------
 topBlock
-------------------------------------*/
.topBlock {
	display: flex;
	align-items: center;
}
.topBlock .item {
	width: 100%;
	padding: 0 30px 0 0;
}
.topBlock .btn {
	margin-left: auto;
	flex-shrink: 0;
}


/*-------------------------------------
 topGroup
-------------------------------------*/
.topGroup .item {
	margin: 0 0 50px 0;
}
.topGroup .item h2 {
	margin: 0 75px 0 0;
}


/*-------------------------------------
 topList
-------------------------------------*/
.topList01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -40px 30px 0;
}
.topList01 .clm {
	width: 50%;
	padding: 0 40px 40px 0;
	flex-shrink: 0;
}
.topList01 .clm figure {
	margin: 0 0 15px 0;
}
.topList01 .clm .en {
	margin: 0 0 5px 0;
	font-weight: bold;
}
.topList01 .clm h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
}
.topList01 .clm p {
	line-height: 1.5;
}
.topBtnC {
	text-align: center;
}


/*-------------------------------------
 topNews
-------------------------------------*/
.topNews {
	display: flex;
	max-width: 920px;
	margin: 0 auto;
}
.topNews h2 {
	width: 140px;
	flex-shrink: 0;
	line-height: 1;
}
.topNewsList {
	width: 100%;
}
.topNewsList ul {
	border-top: 1px solid #999;
}
.topNewsList ul li {
	display: flex;
	border-bottom: 1px solid #999;
}
.topNewsList ul li .date {
	width: 118px;
	padding: 10px 0;
	font-weight: bold;
	flex-shrink: 0;
}
.topNewsList ul li .txt {
	width: 100%;
	padding: 10px 0 10px 20px;
}
.topNewsList .link {
	padding: 15px 0 0 0;
	text-align: right;
}













/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

/* SP layout
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/*-------------------------------------
 visual
-------------------------------------*/
.topMainVisual {
	height: 375px;
}
.topMainVisual figure img {
	height: 375px;
	margin-left: 0;
	transform: translateX(-50%);
}
.topMainVisual .title {
	font-size: 32px;
	line-height: 1.4;
}
.topMainVisual .title h1 {
	padding: 5px 0 0 0;
	font-size: 20px;
}

.topVisual {
	height: 145px;
}
.topVisual figure img {
	height: 145px;
	margin-left: 0;
	transform: translateX(-50%);
}


/*-------------------------------------
 topSection
-------------------------------------*/
.topSection {
	padding: 35px 0;
}
.topSection h2 {
	margin: 0 0 5px 0;
	font-size: 20px;
}
.topSection h3 {
	margin: 0 0 5px 0;
	font-size: 20px;
}
.topSection p {
	line-height: 1.7;
}
.topSection .btn {
	display: block;
	width: auto;
	text-align: center;
}
.topSection .btn a {
	width: 100%;
	max-width: 335px;
	height: 50px;
	margin: 0 auto;
}


/*-------------------------------------
 topBlock
-------------------------------------*/
.topBlock {
	display: block;
}
.topBlock .item {
	padding: 0;
}
.topBlock .btn {
	margin: 0;
	padding: 30px 0 0 0;
}


/*-------------------------------------
 topGroup
-------------------------------------*/
.topGroup .item {
	margin: 0 0 30px 0;
	text-align: center;
}
.topGroup .item h2 {
	margin: 0 0 5px 0;
}


/*-------------------------------------
 topList
-------------------------------------*/
.topList01 {
	display: block;
	margin: 0;
}
.topList01 .clm {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 0 0 35px 0;
}
.topList01 .clm figure {
	text-align: center;
}


/*-------------------------------------
 topNews
-------------------------------------*/
.topNews {
	display: block;
	max-width: 920px;
}
.topNews h2 {
	width: auto;
	margin: 0 0 20px 0;
	text-align: center;
}
.topNewsList ul li {
	display: block;
}
.topNewsList ul li .date {
	width: auto;
	padding: 8px 0 0 0;
}
.topNewsList ul li .txt {
	padding: 0 0 8px 0;
}













}










/* PC layout
-------------------------------------------------------------------*/

@media screen and (min-width: 1281px) {

.topMainVisual {
	position: relative;
	height: auto;
}
.topMainVisual .inner {
	height: 100%;
}
.topMainVisual figure img {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	margin-left: 0;
}

.topVisual {
	position: relative;
	height: auto;
}
.topVisual .inner {
	height: 100%;
}
.topVisual figure img {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	margin-left: 0;
}

}

@media screen and (min-width: 769px) {





}