/* =============================================================
 ALPS Website
 Home
 localcommon.css
 =============================================================== */
@import url( ../common/css/header.css );
@import url( ../common/css/footer.css );
@import url( ../common/css/common.css );
@import url( ../common/css/base.css );


.bx-wrapper .bx-prev{left: 20px;}
.bx-wrapper .bx-next{right: 20px;}

.bx-wrapper .bx-pager{
	bottom: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a{
	background: #F3F2F0;
}

.bx-wrapper .bx-pager.bx-default-pager a.active{
	background: #104C95;
}

.bx-wrapper img{
	width: 100%;
	max-width: 100%;
}



#companyLinkArea{
	position: absolute ;
	top: 38%;
	right: 11%;
	width:32%;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
/*	background-color: #FFCCCC;*/
}

li:nth-child(3) #companyLinkArea{
	top: 70%;
	width:100%;
	right: 0;
	justify-content: center;
/*	background-color: #FFCCCC;*/
}


#companyLinkArea p{
	font-size: 30px;
	color: #004A9A;
	padding-bottom: 30px;
	text-shadow:0px 0px 4px #ffffff;
}

#companyLinkArea .companyLink{
	width: 205px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #004A9A;
	border-radius: 3px;
	color: #FFFFFF;
	font-weight: bold;
	margin-right: 10px;
	margin-bottom: 3px;
}

#companyLinkArea .companyLink::before{
	right: -85%;
	width: 14px;
	height: 14px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #FFFFFF;
}


#companyLinkArea .companyLink::after{
	right: -84.5%;
	width: 3px;
	height: 3px;
	border-top: 1px solid #004A9A;
	border-right: 1px solid #004A9A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


#topCatchArea{
	width: 100%;
	background-color: #004A9A;
	height: 120px;
}

#newsArea{
	width: 100%;
	background-color: #F8F8F8;
/*	background-color: #FFAABB;*/
	padding: 70px 0px;
}

#newsArea p.title{ 
	font-size: 26px;
	color: #4A4A4A;
}

#newsArea #newstabsLine{
	width: 100%;
	max-width:960px;
	height: 30px;
	border-bottom: 1px solid #C7C7C7;
}

#newsArea #newstabs{
	width: 100%;
	max-width: 646px;
/*	margin-left: auto;
	margin-right: auto;*/
}

#newsArea #newstabs li{
	width: 49%;
	max-width: 320px;
	height: 30px;
	margin-right: 1px;
	float:left;
}

#newsArea #newstabs li:last-child{margin-right: 0px;}


#newsArea #newstabs li a{
	width: 100%;
	height: 30px;
	text-align: center;
	display: block;
	color: #ffffff;
	cursor: pointer;
}

#newsArea #newstabs li:nth-child(1) a{ background-color: #599FEB ;}
/*#newsArea #newstabs li:nth-child(2) a{ background-color: #0C79C2 ;}*/
#newsArea #newstabs li:nth-child(2) a{ background-color: #8B63A7 ;}
#newsArea #newstabs li:nth-child(4) a{ background-color: #7CBF38 ;}

#newsArea #newstabs li a p{ padding-top: 4px;}

#newsArea a.listLink{
	font-size: 14px;
	float: right;
	border-left: 1px solid #C7C7C7;
	padding-left: 10px;
}

#newsArea a.listLink:after{
	content: url('../common/images/header_yajirushi_blue.png');
    margin: 10px;
    position: relative;
    top: 3px;
}



#newsbox1, #newsbox2, #newsbox3, #newsbox4{
	width: 100%;
	max-width: 960px;
/*	height: 210px;*/
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

#newsArea .block-index {
	text-align: left;
	overflow: hidden;
	padding: 4px 0 4px;

}
* html #main .block-index {
	height: 0.1em;
	overflow: visible;
}

#newsArea .block-index p {
	float: left;
	font-size: 12px;
}

#newsArea  .block-index p.inddate {
	width: 95px;
	margin: 0;
	color: #393939;
}

#newsArea .block-index p.indcate {
	width: 95px;
}

#newsArea .block-index p.indtit {
	width:70%;
	max-width: 750px;
	margin: 0;
/*
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
*/
}

#newsArea .block-index p.indtit a{
	color: #393939;
	text-decoration: none;
}



#menuArea{
	padding: 70px 0px;

}

#menuArea .block{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#menuArea .menuBox{
	width: 48%;
}

#menuArea .menuBox .imgBox{position: relative;}
#menuArea .menuBox .imgBox p{ position: absolute; top: 44%; left: 7%; font-size: 24px; font-weight: bold; color: #FFFFFF;}
#menuArea .menuBox .imgBox img {width: 100%;}

#menuArea .menuBox ul{
	padding: 25px 0px 40px;
}

#menuArea .menuBox ul li{
	float: left;
	width: 50%;
}

#menuArea .menuBox ul a{
	padding-left: 20px;
	padding-right: 10px;
	box-sizing: border-box;
	display: block;
}
#menuArea .menuBox ul a.arrow::before{
	margin: 3px auto auto auto;
	left: 5px;
	box-sizing: border-box;
	width: 5px;
	height: 5px;
	border: 5px solid transparent;
	border-left: 5px solid #0D4A95;
}


#groupArea{
	padding: 70px 0px;
	background-color: #E8EBF1;
}

#groupArea p.title{ 
	font-size: 26px;
	width: 100%;
	color: #4A4A4A;
	margin-bottom: 10px;
}


#groupArea .block{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#groupArea .menuBox{
	width: 48%;
	background-color: #FFFFFF;
	border-radius: 3px;
}

#groupArea .menuBox .imgBox{
	width: 35%;
	float:left;
}

#groupArea .menuBox .imgBox img{ width: 100%; }



#groupArea .menuBox .textBox{
	width: 65%;
	height: 100%;
	float:right;
	box-sizing: border-box;
	padding-left: 10%;
	padding-right: 10%;
	display: flex;
	align-items: center;
}

#groupArea .menuBox .textBox span{font-size: 22px; font-weight: bold; display: block;}


#under600{ display: none; }


#trademarkArea {
	width: 100%;
	background-color: #E8EBF1;
	box-sizing: border-box;
	padding: 75px 0px 100px;
}

#trademarkArea p.title{
	text-align: center;
	font-size: 26px;
}

.bottomlink {
	margin-top: 45px;
	margin-bottom: 30px;
	justify-content: center;
}

.bottomlink li { background-color: #FFFFFF;}
.bottomlink .arrow::before{
	left: 14px;
	width: 14px;
	height: 14px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #004A9A;
}

.bottomlink .arrow::after{
	left: 20px;
	box-sizing: border-box;
	width: 4px;
	height: 4px;
	border: 4px solid transparent;
	border-left: 4px solid #fff;
}


@media screen and (min-width: 1601px){

}

/**/
/*-------------------------------1000pxȏづ-------------------------------*/
@media screen and (min-width: 1001px){


#topCatchArea .imgBox{
	float: left; 
	width: 27%;
}
#topCatchArea img { width: 100%; }

#topCatchArea .catchBox{
	width: 72%;
	height: 100%;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 1.8em;
	box-sizing: border-box;
	padding-left: 5%;
	display: flex;
	align-items: center;
}

.bottomlink li:first-child{ margin-right: 20px;}

}/*------------------------------1000pxȏっ-------------------------------*/
/**/
/*-------------------------------1000pxȉ-------------------------------*/
@media screen and (max-width: 1000px){

#companyLinkArea{
	top: 20%;
}


#companyLinkArea p{
	font-size: 14px;
	color: #FFFFFF;
	padding-bottom: 20px;
}


/*
#companyLinkArea{
	top: 10%;
	right: 5%;
}

#companyLinkArea p{
	font-size: 20px;
	color: #004A7A;
	padding-bottom: 30px;
	text-shadow:0px 0px 4px #ffffff;
}

#companyLinkArea .companyLink{
	width: 205px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #004A7A;
	border-radius: 3px;
	color: #FFFFFF;
	font-weight: bold;
	margin-right: 10px;
}
*/



#topCatchArea .imgBox{display: none;}
#topCatchArea .catchBox{
	width: 100%;
	height: 100%;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 1.8em;
	box-sizing: border-box;
	padding: 5%;
	display: flex;
	align-items: center;
}

#newsArea p.title{ 
	width: 68%;
	float: left;
}

#newstabsLine{
	float: none;
	clear: both;
}

#newsArea a.listLink{
	margin-top: 7px;
}

#newsbox1, #newsbox2, #newsbox3, #newsbox4{
	width: 92%;
}

	#newsArea .block-index p.inddate { width: 80px; }
	#newsArea .block-index p.indcate { width: 90px; }




}/*------------------------------1000pxȉ-------------------------------*/
/**/
/*-------------------------------600pxȉ-------------------------------*/
@media screen and (max-width: 600px){

.bx-wrapper .bx-controls .bx-pager{ display: none;}

	#over600{ display: none;}
	#under600{ display: block; }


#mainPromotion .bx-wrapper{ overflow: hidden;}
/*#mainPromotion .bx-wrapper img{ min-width: 600px; }*/


#companyLinkArea{
	top: 10%;
}

#companyLinkArea p{
	font-size: 14px;
}

/*
#companyLinkArea{
	position: absolute ;
	top: 10%;
	right: 0;
	width:100%;
	background-color: #FFAABB;
}

#companyLinkArea p{
	font-size: 16px;
	color: #004A7A;
	padding-bottom: 30px;
	text-shadow:0px 0px 4px #ffffff;
}

#companyLinkArea .companyLink{
	width: 205px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #004A7A;
	border-radius: 3px;
	color: #FFFFFF;
	font-weight: bold;
	margin-right: 10px;
}
*/

	#newsArea .block-index { border-bottom: 1px solid #EDEDED; }
	#newsArea .block-index p.indtit{ width: 100%;}

#menuArea .menuBox{
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}

#groupArea .menuBox{
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#newsArea p.title,
#groupArea p.title{ 
	box-sizing: border-box;
	padding-left: 4%;
}

}/*------------------------------600pxȉ-------------------------------*/
/**/
/*-------------------------------480pxȉ-------------------------------*/
@media screen and (max-width: 480px){


.bx-wrapper .bx-prev{left: 0px;}
.bx-wrapper .bx-next{right: 0px;}

#topCatchArea .catchBox{
	font-size: 14px;
	line-height: 1.6em;
}
li:nth-child(3) #companyLinkArea,
#companyLinkArea{
	width: 100%;
	top: 0%;
	right: 0%;
	justify-content: space-evenly;
}



#companyLinkArea p{
	position: absolute;
	top: 10px;
	right: 0px;
	font-size: 14px;
	color: #FFFFFF;
}

#companyLinkArea .companyLink{
	margin-top: 200px;
	width: 140px;
	font-size: 10px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #004A9A;
	border-radius: 3px;
	color: #FFFFFF;
	font-weight: bold;
	margin-right: 0px;
}

}/*------------------------------480pxȉ-------------------------------*/