@charset "utf-8";

/*
トップページスタイル設定
*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■1.common
■2.トップページヘッダー動画
■3.トップページ SDGs
■4.トップページ 他LOM記事
■5.トップページ メニュー一覧
■6.トップページ Believe コンテンツ
■7.事業用リンクバナー

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■1.common
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage{
	width:100%;
	margin:0 auto 0 auto;
	padding:0px 0px 0px 0px;
	padding:30px 0px 0px 0px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■2.トップページヘッダー動画
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #top_movie{
	width:100%;
	margin: 0px 0px 20px 0px;
	padding:0px 0px 0px 0px;
/*	display:none; */
}

#toppage #top_movie .video {
/* 	display:none; */
}
#toppage #top_movie .video video{
	width: 100%;
}

#toppage #top_movie .top_main_image {
	width:100%;
	max-width:100%;
	margin:0 auto 0px auto;
	padding:0 0px 0 0;
	text-align:center;
	overflow:hidden;
	z-index:1;
}
#toppage #top_movie .top_main_image img {
	max-width:100%;
	height:auto;
}
#toppage #top_movie .top_main_image_txt {
	text-align:center;
	margin:20px 0 0 0;
	padding:0 5px 0 5px;
	font-size:12px;
}
#toppage #top_movie .top_main_image_txt .spline{
	line-height:1.8;
}

/*
キャッチコピー
------------------------------------*/
#toppage #top_movie .copy{
	width:100%;
	height:180px;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-image:url(../images/top/top_movie.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position:relative;
}

#toppage #top_movie .copy img{
	position: absolute;
    max-width: calc(100% - 50px);
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/*
リンクバナー
------------------------------------*/
#toppage #top_movie .link{
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
}

#toppage #top_movie .link ul {
	width:100%;
	margin:0 0px 0px 0px;
	padding:0 0px 0px 0px;
	display:table;
	table-layout:fixed;
}

#toppage #top_movie .link ul li {
	margin:0 0px 0px 0px;
	padding:0px 0px 0px 0;
	display:table-cell;
	vertical-align:middle;
}

#toppage #top_movie .link ul li a {
	display:block;
	font-weight: normal;
	text-decoration: none;
	vertical-align:middle;
	position:relative;
}

#toppage #top_movie .link ul li.event {
	width:60%;
	background-color:#00608A;
	text-align:center;
	color:#FFF;
	line-height:1.3;
}

#toppage #top_movie .link ul li.event a{
	margin:0px 0px 0px 0px;
	padding:12px 10px 12px 10px;
	color:#FFF;
	text-decoration:none;
}

#toppage #top_movie .link ul li.event h4{
	margin: 0px 0px 2px 0px;
	padding:0px 0px 0px 0px;
	font-size:12px;
	font-weight:500;
}

#toppage #top_movie .link ul li.event h4 br{
	display:none;
}

#toppage #top_movie .link ul li.event .date{
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 4px;
	font-size:11px;
	font-weight:400;
}

#toppage #top_movie .link ul li.event .date:before {
	margin:0 4px 0 0px;
	content: "\e85b";
	font-family: "fontello";
	font-size:12px;
	display:inline-block;
	position: relative;
	top:0px;
}

#toppage #top_movie .link ul li.event .date strong{
	margin:0 2px 0 2px;
	font-size:14px;
	font-family: 'Marcellus', serif;
	vertical-align:-1px;
}

#toppage #top_movie .link ul li.event p{
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	font-size:11px;
	font-weight:300;
}

#toppage #top_movie .link ul li.event .btn_more{
	display:none;
}

#toppage #top_movie .link ul li.believe {
	margin:0 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-color:#333;
	border-left:10px solid #FFF;
}

#toppage #top_movie .link ul li.believe a {
	display:block;
	font-weight: normal;
	text-decoration: none;
	position:relative;
}

#toppage #top_movie .link ul li.believe a img{
	width: 100%;
	height: auto;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 2019.7.5add JCI houdousenryaku2019 imai
 2020年度会頭内定のお知らせ
 /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#informal_president{

}
#informal_president a{
	width: 90%;
	display: block;
	margin: 0 auto 30px auto;
}
#informal_president img{
	width: 100%;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■3.トップページ SDGs
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #sdgs_link{
	margin: 0px auto 40px auto;
	padding:0px 15px 0px 15px;
    position:relative;
	text-align:center;
}

#toppage #sdgs_link a:active{
	opacity: 0.75; 
	filter: alpha(opacity=75); 
	-ms-filter: "alpha(opacity=75)"; 
	-khtml-opacity: 0.75; 
	-moz-opacity: 0.75; 
}

#toppage #sdgs_link a img{
	width:230px;
	height:auto;
}

#toppage #sdgs_link p{
	margin: 10px 0px 0px 0px;
	padding:0px 0 0px 0;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■4.トップページ 他LOM記事
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #hot_article{
	margin: 0px 0px 35px 0px;
	padding:0px 0 0px 0;
    position:relative;
}

#toppage #hot_article ul {
	width:100%;
	margin:0 auto 0px auto;
	padding:0 0px 0px 0px;
}

#toppage #hot_article ul.slider .slick-list li {
	width:180px !important;
	margin:0 20px 0px 0;
	padding:0px 0px 0px 0px;
	position:relative;
	background-color:#FFF
}

#toppage #hot_article ul.slider .slick-list li .area{
	width:74px;
	margin:0px 0px 0px 0px;
	padding:4px 5px 0px 5px;
	text-align:center;
	height:36px;
	line-height:1.3;
	font-size:11px;
	font-weight:300;
	color:#FFF;
	letter-spacing:0.05em;
	text-indent:0.05em;
	background-color:#292929;
	position:absolute;
	left:-5px;
	top:-5px;
	z-index:10;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /* Opera9,10対応 */
}

#toppage #hot_article ul.slider .slick-list li .area span{
	display:block;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	line-height:1.1;
	font-size:10px;
	font-weight:300;
	color:#CCC;
	letter-spacing:0em;
	text-indent:0em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /* Opera9,10対応 */
}

#toppage #hot_article ul .slick-list li a {
	display:block;
	padding:0px 0px 0px 0px;
	font-weight: normal;
	text-decoration: none;
	position:relative;
}

#toppage #hot_article ul .slick-list li a .photo {
	width:100%;
	margin:0 0px 0px 0;
	padding:0 0px 0 0;
	text-align:center;
	position:relative;
	background-color:#EEEEEE;
	overflow:hidden;
	display: block;
}

#toppage #hot_article ul .slick-list li a .photo:before {
    content:"";
    display: block;
	padding-top: 75.0%; /* 比率4:3 */
}

#toppage #hot_article ul .slick-list li a .photo .photo_in {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align:center;
}

#toppage #hot_article ul .slick-list li a .photo .photo_in:before{
	content:"";
    position: absolute;
	width:100%;
	height:100%;
	left:0;
    top: 0px;
	background:url(../images/common/img_mask.png); 
	background-repeat: no-repeat;
	background-size: cover;
	z-index:1;
}

#toppage #hot_article ul .slick-list li a .photo .photo_in img{
	position: absolute;
	height: 101%;
	width: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	display: block
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■5.トップページ メニュー一覧
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #top_menu{
	margin: 0px auto 30px auto;
	padding:0px 15px 0px 15px;
}

#toppage #top_menu ul {
	width:100%;
	margin: 0 auto 0px auto;
}

#toppage #top_menu ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#toppage #top_menu ul > li {
	width: 216px;
	width: calc(50% - 7px);
	margin: 0px 0px 14px 14px;
	padding: 0px 0px 0px 0px;
	float:left;
	display:block;
	vertical-align:middle;
}

#toppage #top_menu ul > li:nth-child(2n + 1) {
	clear: left;
	margin-left:0px;
}

#toppage #top_menu ul > li a {
	display:block;
	text-decoration: none;
	position:relative;
	color:#FFF;
	background-color:#CCC;
	background-repeat: no-repeat;
	background-position: center calc(50% + 10px);
}

#toppage #top_menu ul > li a:before {
    content:"";
    display: block;
	padding-top: 100.0%;
	position:relative;
}

#toppage #top_menu ul > li a .inbox {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align:center;
	vertical-align:middle;
}

#toppage #top_menu ul > li a .inbox .inbox2 {
	position: absolute;
	width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

#toppage #top_menu ul > li a .inbox .inbox2 h2{
	margin: 0px 0px 80px 0px;
	padding: 0px 10px 0px 10px;
	font-size:13px;
	line-height:1.1;
	font-weight:500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /* Opera9,10対応 */
}

#toppage #top_menu ul > li a .inbox .inbox2 p{
	display:none;
}

/*
個別設定（背景色）
------------------------------------*/
/*
#toppage #top_menu ul > li[class^="menu01"] a {
	background-color:#EA9143;
}
#toppage #top_menu ul > li.menu02 a {
	background-color:#27AE60;
}
#toppage #top_menu ul > li.menu03 a {
	background-color:#A1B91D;
}
#toppage #top_menu ul > li.menu04 a {
	background-color:#E67168;
}
#toppage #top_menu ul > li.menu05 a {
	background-color:#2DA991;
}
#toppage #top_menu ul > li.menu06 a {
	background-color:#AA72C1;
}
#toppage #top_menu ul > li.menu07 a {
	background-color:#526476;
}
*/
#toppage #top_menu ul > li.menu01_01 a {
	background-color:#e4011e;
}
#toppage #top_menu ul > li.menu01_02 a {
	background-color:#d6a600;
}
#toppage #top_menu ul > li.menu01_03 a {
	background-color:#1b963a;
}
#toppage #top_menu ul > li.menu01_04 a {
	background-color:#c50e28;
}
#toppage #top_menu ul > li.menu01_05 a {
	background-color:#e83418;
}
#toppage #top_menu ul > li.menu01_06 a {
	background-color:#00a6d8;
}
#toppage #top_menu ul > li.menu01_07 a {
	background-color:#fabc00;
}
#toppage #top_menu ul > li.menu01_08 a {
	background-color:#970931;
}
#toppage #top_menu ul > li.menu01_09 a {
	background-color:#ec6a06;
}
#toppage #top_menu ul > li.menu02 a {
	background-color:#dc097b;
}
#toppage #top_menu ul > li.menu03 a {
	background-color:#f5a10b;
}
#toppage #top_menu ul > li.menu04 a {
	background-color:#d39206;
}
#toppage #top_menu ul > li.menu05 a {
	background-color:#28a738;
}
#toppage #top_menu ul > li.menu06 a {
	background-color:#004c88;
}
#toppage #top_menu ul > li.menu07 a {
	background-color:#023067;
}


#toppage #top_menu ul > li.menu01_01 a {
	background-image: url(../images/top/sp_menu01_01.png);
	background-size: 110px auto;
}
#toppage #top_menu ul > li.menu01_02 a {
	background-image: url(../images/top/sp_menu01_02.png);
	background-size: 66px auto;
}
#toppage #top_menu ul > li.menu01_03 a {
	background-image: url(../images/top/sp_menu01_03.png);
	background-size: 80px auto;
}
#toppage #top_menu ul > li.menu01_04 a {
	background-image: url(../images/top/sp_menu01_04.png);
	background-size: 66px auto;
}
#toppage #top_menu ul > li.menu01_05 a {
	background-image: url(../images/top/sp_menu01_05.png);
	background-size: 74px auto;
}
#toppage #top_menu ul > li.menu01_06 a {
	background-image: url(../images/top/sp_menu01_06.png);
	background-size: 70px auto;
}
#toppage #top_menu ul > li.menu01_07 a {
	background-image: url(../images/top/sp_menu01_07.png);
	background-size: 46px auto;
}
#toppage #top_menu ul > li.menu01_08 a {
	background-image: url(../images/top/sp_menu01_08.png);
	background-size: 70px auto;
}
#toppage #top_menu ul > li.menu01_09 a {
	background-image: url(../images/top/sp_menu01_09.png);
	background-size: 70px auto;
}
#toppage #top_menu ul > li.menu02 a {
	background-image: url(../images/top/sp_menu02.png);
	background-size: 66px auto;
}
#toppage #top_menu ul > li.menu03 a {
	background-image: url(../images/top/sp_menu03.png);
	background-size: 54px auto;
}
#toppage #top_menu ul > li.menu04 a {
	background-image: url(../images/top/sp_menu04.png);
	background-size: 56px auto;
}
#toppage #top_menu ul > li.menu05 a {
	background-image: url(../images/top/sp_menu05.png);
	background-size: 70px auto;
}
#toppage #top_menu ul > li.menu06 a {
	background-image: url(../images/top/sp_menu06.png);
	background-size: 66px auto;
}
#toppage #top_menu ul > li.menu07 a {
	background-image: url(../images/top/sp_menu07.png);
	background-size: 52px auto;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■6.トップページ Believe コンテンツ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #believe_contents{
	margin: 0px 0px 0px 0px;
	padding:30px 0 30px 0;
	background-color:#EEEEEE;
	border-bottom:1px solid #CCC;
}

#toppage #believe_contents h3{
	margin:0px auto 4px auto;
	padding:0px 0px 0px 0px;
	line-height:1.2;
	font-size:25px;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	color:#0097D7;
	letter-spacing:0.02em;
	text-indent:0.02em;
	text-align:center;
	position:relative;
	border:none;
}

#toppage #believe_contents p{
	width:100%;
	margin:0px 0px 20px 0;
	padding:0px 10px 0px 10px;
	font-size:12px;
	font-weight:400;
	color:#333;
	text-align:center;
}

#toppage #believe_contents .art_slide {
	margin:0 auto 0px auto;
	padding:0 0px 0px 0px;
    position:relative;
}

#toppage #believe_contents .art_slide ul {
	width:100%;
	margin:0 auto 0px auto;
	padding:0 0px 0px 0px;
}

#toppage #believe_contents .art_slide ul.slider .slick-list li {
	width:180px !important;
	margin:0 15px 0px 0;
	padding:0px 0px 0px 0px;
	position:relative;
	background-color:#FFF
}

#toppage #believe_contents .art_slide ul .slick-list li a {
	display:block;
	padding:0px 0px 0px 0px;
	text-decoration: none;
	position:relative;
	height:265px;
}

#toppage #believe_contents .art_slide ul .slick-list li a .category{
	width:70px;
	margin:0px 0px 0px 0px;
	padding:0px 5px 0px 5px;
	text-align:center;
	height:20px;
	line-height:19px;
	font-size:11px;
	font-weight:300;
	color:#FFF;
	letter-spacing:0.05em;
	text-indent:0.05em;
	background-color:#292929;
	position:absolute;
	left:8px;
	top:8px;
	z-index:10;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /* Opera9,10対応 */
}

#toppage #believe_contents .art_slide ul .slick-list li a .photo {
	width:100%;
	margin:0 0px 0px 0;
	padding:0 0px 0 0;
	text-align:center;
	position:relative;
	overflow:hidden;
	display: block;
}

#toppage #believe_contents .art_slide ul .slick-list li a .photo:before {
    content:"";
    display: block;
	padding-top: 100.0%; /* 比率1:1 */
}

#toppage #believe_contents .art_slide ul .slick-list li a .photo .photo_in {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align:center;
}

#toppage #believe_contents .art_slide ul .slick-list li a .photo .photo_in:before{
	content:"";
    position: absolute;
	width:100%;
	height:100%;
	left:0;
    top: 0px;
	background:url(../images/common/img_mask.png); 
	background-repeat: no-repeat;
	background-size: cover;
	z-index:1;
}

#toppage #believe_contents .art_slide ul .slick-list li a .photo .photo_in img{
	position: absolute;
	height: 101%;
	width: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	display: block
}

#toppage #believe_contents .art_slide ul .slick-list li a h4{
	width:auto;
	margin: 10px 0 10px 0;
	padding: 0px 10px 0px 10px;
	font-size:11px;
	line-height:13px;
	letter-spacing:0;
	font-weight:300;
	border:none;
	color:#333;
	height:39px;
	overflow:hidden;
	word-break : break-all;
	text-align:left;
}

#toppage #believe_contents .art_slide ul .slick-list li a .date {
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
	color:#666;
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	font-size:11px;
	line-height:1.1;
}

#toppage #believe_contents a.btn_more{
	width:250px;
	margin: 20px auto 0px auto;
	padding:0px 0px 0px 0px;
	display:block;
	height:50px;
	line-height:48px;
	color:#FFF;
	background-color:#0097D7;
	text-align:center;
	text-decoration:none;
	position:relative;
	font-size:14px;
	font-weight:400;
}

#toppage #believe_contents a.btn_more:after {
	margin:0px 0px 0 10px;
	content: "\e813";
	font-family: "fontello";
	font-size:20px;
	font-weight:normal;
	position: relative;
	display:inline-block;
	color:#FFF;
	top:2px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■7.事業用リンクバナー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#toppage #project_banner{
	margin: 0px auto 0px auto;
	padding:0px 10px 40px 10px;
	position: relative;
}

#toppage #project_banner ul {
	width:100%;
	margin: 0 auto 0px auto;
	text-align:center;
	letter-spacing:-0.4em;
}

#toppage #project_banner ul li {
	width:calc(50% - 10px);
	display:inline-block;
	margin:0px 5px 10px 5px;
	padding:0px 0px 0px 0;
	letter-spacing:normal;
	vertical-align: middle;
}

#toppage #project_banner ul li a {
	display:block;
	margin:0 0px 0px 0;
	padding:0 0px 0 0;
	text-align:center;
	position:relative;
}

#toppage #project_banner ul li a img{
    width: 100%;
    height: auto;
}

#toppage #special_banner {
	margin:10px auto 10px auto;
	padding:0 15px;
	text-align: center;
}

#toppage #special_banner a{
	display:block;
	margin:0 0 20px 0;
	width:100%;
	height:auto;
}
#toppage #special_banner img{
	width:100%;
}