/*Base*/
@charset "UTF-8";

#home-contentswide{
	width:1024px;
	margin:0 auto;
	margin-bottom:20px;
	border:0px dotted#333;
	}

#home-backcercle{
	width:100%;
	height:550px;
	margin:0 auto;
	background-color:#e0f4d9;
	border-radius:0 0 45% 45%;
	margin-top:-5px;
	margin-bottom:50px;
	}

#home-contents{
	width:1024px;
	margin:0 auto;
	border:0px solid#333;
	}

/*home-foundation*/
#home-contents img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border: none;
}

#home-sustainability{
	width:1024px;
	margin:0 auto;
	margin:0px auto 40px;
}

#home-sustainability .cercle01{
text-align:left;
	margin-top:90px;
}

#home-sustainability .cercle02{
text-align:right;
	margin-top:590px;
}

#home-sustainability .cercle01 img, #home-sustainability .cercle02 img{
	width:75%;
	height:auto;
}

.sustainindex{
	width:230%;
	text-align:center;
	margin:-30px 0px 50px 0;
	border:0px solid#333;
}

/*!
 * all link color setting
 */

/*!
 * common container
 */
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

/*Swipe 1*/
.swiper-container{
      width: 100%;
      height: auto;
padding-bottom:160px;
    }

.swiper-wrapper img {
    width: 100%;
    height: auto;
}
	
.wrap{
  padding: 16px;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 20s linear 0s 1 normal both;  
}


.slide-img{
  display: inline-block;
}
.slide-img-sp{
  display: none;
}


/*Swipe 1*/



/*swiper text*/

.s-fade-wrap {
  position: relative;
  margin: 0 auto;
}

.s-fade-text {
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 4.1em;
	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	letter-spacing:5px;
}

.s-fade-text p{
	margin-top:10px;
	font-size: 0.32em;
	letter-spacing:0px;
	font-weight:normal;
	line-height:28px;
	text-shadow:1px 1px 1px #999;
  }

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 3.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 45% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
	

/*swiper text*/

.disa{
	display:inline;
	}
.disasp{
	display:none;
	}

/*swiper 2*/
.slider2 {
	width:960px;
	height:280px;
	margin: 10px auto;
	margin-bottom:30px;
	text-align:left;
	
}

.swiper-button-prev,
.swiper-button-next {
	background-image: none; /* デフォルトのボタン画像を消す */
	width: 28px; /* ボタンの幅 */
	height: 28px; /* ボタンの高さ */
	margin: -50px 5px 0 5px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
	color: #333;
	outline: none
}

.swiper-custom-parent{
  margin: 0px -24px;
  position: relative;
}

.swiper-pagination-bullet {
	width: 0.8em; /* 幅 */
	height: 0.8em; /* 高さ */
	background: #ccc; /* 色：緑 */
	opacity: 0.9; /* 半透明（デフォルトでは0.2） */
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	width: 0.8em; /* 幅 */
	height: 0.8em; /* 高さ */
	background: #666; /* 色：黄色 */
	opacity: 1; /* 不透明 */
}


/*swiper 2*/

#home-contentswide .topcopy br{
	display:none;
	}

#home-contents hr{
	border-top: 1px solid #00bc36;
	margin:0 auto;
	width:100%;
	}
.catalogoneall {
	display:flex;
	justify-content: space-between;
}
.contents-webcatalog .catalog-contents{
	height:400px;
	position:top;
	}
	
.contents-webcatalog .catalog-contents .catalogone{
  display: table-cell;
  vertical-align: top;
  text-align:left;
	}
	
.contents-webcatalog .catalog-contents .catalogone2{
  display: table-cell;
  vertical-align: top;
  padding-right:42px;
  width:200px;
  text-align:left;
	}

.catalog-contents .catalogtext{
	text-align:left;
	font-size:0.9em;
	}


#home-contents .nikkocontent{
	width:1024px;
	margin-bottom:20px;
	}
#home-contents .nikkocontent ul{
	margin:10px -10px 0 -54px;
	}
#home-contents .nikkocontent ul li{	
	display:inline-block;
	margin:0px 10px 30px 14px;
	}
#home-contents .nikkocontent img{
	width:497px;
	height:145px;
	}

.nikkoviewbanner{
	margin:15px 0 120px;
	}

.nikkoviewbanner .banner {
	width:49%;
}
	
#home-contents .event{
	margin-bottom:30px;
	}
#home-contents .link{
	width:1035px;
	margin-bottom:30px;
	margin-left:-2px;
	}
#home-contents .link img{
	width:160px;
	height:auto;
	margin:0px 8px 0px 0px;
	}
	
#home-contents .sns{
	width:1024px;
	margin-bottom:80px;
	}
#home-contents .sns span{
	text-align:center;
	font-size:2.8em;
	display:inline-block;
	margin:0px 30px 30px 0px;
	color:#55acee;
	}

#home-contents .sns h3{
	font-size:0.42em;
	font-family: 'Roboto', sans-serif;
	color:#666;
	font-weight:normal;
	}

.s-youtube{color:#ea3223;}
.s-twitter {color:#55acee;}
.s-facebook {color:#3B5998;}
.s-instagram {color:#f13f79;}
	

#home-contents .sns img{
	width:265px;
	height:210px;
	}

#home-contentswide h1{
font-weight:normal;
color:#00bc36;
font-size:2.2em;
text-align:center;
font-family: 'M PLUS 1p', sans-serif;
font-weight:300;
padding:20px 0;
	letter-spacing:1px;
}
#home-contentswide h1 p{
font-size:0.47em;
font-weight:400;
color:#666;
	margin-top:5px;}

#home-contentswide h1 p .br::before {
	display:inline-block;
	}


.youtubeicon{
	background-image: url("../images/youtubeicon.svg");
	background-repeat: no-repeat;
	background-size: 20px 25px;
	height:5px;
	vertical-align:middle;
}
.s-youtube{
	background-image: url("../images/youtubeicon.svg");
	background-repeat: no-repeat;
	background-size: 20px 10px;
	height:5px;
	vertical-align:middle;
}

.yaright{
	background-image: url("../images/ya-cercle-right.svg");
	width:12px;
	height:12px;
	letter-spacing:0px;
	padding-left:12px;
	background-repeat: no-repeat;
}
.yaleft{
	background-image: url("../images/ya-cercle-left.svg");
	width:12px;
	height:12px;
	padding-right:12px;
	background-repeat: no-repeat;
}

#home-contents h2{
font-family: 'Cormorant Garamond', serif;
font-weight:normal;
color:#666;
font-size:1.9em;
text-align:center;
font-feature-settings:"palt";
	letter-spacing:1px;
padding:20px;
}

#home-contents h2 p{font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
font-size:0.45em;
font-feature-settings:"palt";
padding-top:5px;}

h2 p a{
color:#666;
}

.allindexlink{
	text-align:right;
	font-size:0.85em;
	color:#666;
	margin-left:380px;
	margin-right:10px;
	margin-top:-30px;
	margin-bottom:10px;
	}


/*3 works*/
#home-contentswide .nikkoworks{
	width:100%;
	height:auto;
	color:#fff;
	font-size:0.85em;
	line-height:20px;
	text-align:left;
}

#home-contentswide .nikkoworks a{
	color:#fff;
	}

.nikkoworks h3{
	font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	font-size:1.55em;
	text-align:center;
	padding:20px 0 10px;
}

.nikkoworks .text{
	padding:0px 40px 0px;
	line-height:20px;
	height:80px;
	text-align:justify;  font-feature-settings: "palt";
	}
.nikkoworks .text span{
	font-size:0.9em;
	line-height:2px;
}
	
.nikkoworks .doboku{
	display:inline-block;
	background:#b3836e;
	width:342px;
	height:auto;
	margin-right:-5px;
}
.nikkoworks .exteria{
	display:inline-block;
	background:#5e9b79;
	width:343px;
	height:auto;
	margin-right:-6px;
}
.nikkoworks .landscape{
	display:inline-block;
	background:#5274ab;
	width:342px;
	height:auto;
	margin-right:-5px;
}

.nikkoworks p{
	text-align:center;
	margin:10px 0 20px;
	font-size:0.9em;
	}
.nikkoworks .icon{
	vertical-align:top;
	display:inline-block;
	text-align:center;
	padding:8px;
	line-height:12px;
	}
	
.nikkoworks .icon p{
	margin-top:3px;
	}
	
.nikkoworks .icon i{
	background:#fff;
	border:0.021em solid #00bc36;
	padding:13px;
	font-size:4.1em;
	margin-bottom:5px;
	border-radius:50%;
	color:#00bc36;
	}
	
.nikkoworks .icon img{
	margin-bottom:5px;
	width:54px;
	height:54px;
	}


.nikkoworks .doboku .icon i{
	color:#ae6b53;
	border:0.021em solid #ae6b53;
	}

.nikkoworks .landscape .icon i{
	color:#2d559c;
	border:0.021em solid #2d559c;
	}
	
/*3 works*/


/* mouse over 1.2x*/

.doboku, .exteria, .landscape, .exterior {
	overflow: hidden;
}
.doboku img, .exteria img, .landscape img, .exterior img {
	display: block;
	transition: 0.5s;
}
.doboku  img:hover, .exteria  img:hover, .landscape  img:hover, .exterior img:hover {
	transform: scale(1.07, 1.07);
}

/* mouse over 1.2x*/



/*INFORMATION　Tab*/
.information{
	text-align:left;
	margin:0 0 30px 0px;
	border:0px solid#333;
	font-size:1.1em;
	line-height:36px;
	}

.information  .check{
	display:none;
}

.information  .checkon{
	display:inline;
}

.information  .win{
	display:none;
}

.information  .winopen{
	display:inline;
}

.information  .fa-file-pdf{
	background-image: url("../svg/pdf02.svg");
	background-repeat: no-repeat;
	padding-left:15px;
	vertical-align:middle;
}

.information  .newsline br{
	display:none;
}

.tabs {
  width: 1024px;
  font-size:1.2em;
  margin-top: 50px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border:1px solid #ccc;
	border:0px dotted#333;
}



/*タブのスタイル*/
.tab_item {
  width: calc(100%/6);
  height: 50px;
  border-bottom: 1px solid #999;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: .8em;
  text-align: center;
  color: #565656;
  display: block;
  float: right;
  text-align: center;
  transition: all 0.2s ease;
  border-right: 0.05em solid #ccc;
  box-sizing: border-box;
}

/* IE10 以降*/
@media all and (-ms-high-contrast: none) {
  .tab_item {
  margin-right:-0.01em;
  border-right: 0.1em solid #ccc;
  }
}
.tab_item:hover {
  opacity: 0.75;
  cursor: move;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
 position: relative;
  height:240px;
  display: none;
  text-align:left;
  font-size:1em;
  line-height:36px;
  color:#666;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}

.more{
	position: absolute;
	right: 20px;
	bottom: -8px;
}
.information .newsline{
	border-bottom:1px solid#999;
}

.information .day{
	color:#5e7a66;
	padding-right:10px;
	font-size:1.0em;
	}
.information a{
  color:#666;
  line-height:32px;
	padding-left:15px;
	}
	
.information .doboku{
	font-size:0.8em;
	color:#fff;
	border:1px solid #ccc;
	padding:3px 7px;
	margin-right:1px;
	background:#b3836e;
	border-radius:4px;
	}
.information .doboku:after {
	content: "土木";}

.information .exteria, .information .exterior{
	font-size:0.8em;
	color:#fff;
	border:1px solid #ccc;
	padding:3px 2px;
	margin-right:1px;
	background:#5e9b79;
	border-radius:4px;
	}
.information .exteria:after, .information .exterior:after{
	content: "ｴｸｽﾃﾘｱ";}

.information .scape{
	font-size:0.8em;
	color:#fff;
	border:1px solid #ccc;
	padding:3px 7px;
	margin-right:1px;
	background:#5274ab;
	border-radius:4px;
	}
.information .scape:after {
	content: "景観";}

/*icon特別*/
.information .scape02{
	margin-left:-18px;
	font-size:0.8em;
	color:#fff;
	border:1px solid #ccc;
	padding:3px 7px;
	margin-right:11px;
	background:#5274ab;
	border-radius:4px;
	}
.information .scape02:after {
	content: "景観";}

.information .ir{
	font-size:0.8em;
	color:#333;
	border:1px solid #ccc;
	padding:3px 13px;
	margin-right:1px;
	background:#fff;
	border-radius:4px;
	}
.information .ir:after {
	content: "IR";}


.information .info{
	font-size:0.65em;
	letter-spacing:-0.13em;
	color:#095b2d;
	border:1px solid #2b8e56;
	padding:4px 1px;
	margin-right:1px;
	background:#fff;
	border-radius:4px;
	}
.information .info:after {
	content: "お知らせ";}


#information .exterior02{
	color:#fff;
	padding:3px 2px;
	background:#5e9b79;
	}
#information .exterior02:after {
	content: "ｴｸｽﾃﾘｱ";}


.information .sustainability{
	font-size:0.65em;
	letter-spacing:-0.13em;
	color:#5a7139;
	border:1px solid #3d7f03;
	padding:4px 2px;
	margin-right:1px;
	background:#cce7b4;
	border-radius:4px;
	}
.information .sustainability:after{
	content: "サステナ";}
	
.information .more a{
  padding: 5px 10px;
border-radius:6px;
  }
.information .more a:hover{
  padding: 5px 10px;
  color:#fff;
  background:#ccc;
border-radius:6px;
  }

/*選択されているタブのコンテンツのみを表示*/
#info:checked ~ #info_content,
#ir:checked ~ #ir_content,
#randscape:checked ~ #randscape_content,
#exteria:checked ~ #exteria_content,
#doboku:checked ~ #doboku_content,
#all_news:checked ~ #all_news_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #666;
  color: #fff;
}

/*INFORMATION　tab2*/

/*product pickup*/
.pickup{
	margin:140px 0 40px;
}

.pickup .swiper-custom-button{
	margin-top:-10%;
	}
	
.pickup .doboku{
	color:#b3836e;
	font-size:0.95em;
	line-height:28px;
	}
.pickup .ext{
	color:#5e9b79;
	font-size:0.95em;
	line-height:28px;
	}
.pickup .land{
	color:#5274ab;
	font-size:0.95em;
	line-height:28px;
	}



/*works icon*/

.titlesub{
	padding:0px;
	font-size:0.85em;
	margin:0px 0 5px;
	font-weight:bold;
	margin-bottom:10px;
}

.titlesub p{
	margin:0px 0 0px;
}

.titlesub span{
	color:#fff;
 white-space: nowrap;
	font-weight:normal;
	padding:4px 10px;
	font-size:1em;
	line-height:28px;
	border-radius:5px;
	border:1px solid#ccc;
	margin-right:5px;
}

.titlesub .doboku{
	background:#b3836e;
	color:#fff;
}
.titlesub .exteria{
	background:#5e9b79;
}
.titlesub .environment{
	background:#5274ab;
}

/*works icon*/

/*nikko contents Catalog*/

.contents-webcatalog{
	background:#eee;
	min-height:400px;
	}
.catalog-contents{
	width:855px;
	margin:0 auto;
	}

.contents-webcatalog h2{
font-family: 'Cormorant Garamond', serif;
font-weight:normal;
color:#666;
font-size:1.9em;
text-align:center;
font-feature-settings:"palt";
	letter-spacing:1px;
padding:20px;
}

.contents-webcatalog h2 p{font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
font-size:0.45em;
font-feature-settings:"palt";}





/*nikko YouTube*/


#home-contents .youtube{
	margin-top:50px;
}	

#youtube-area{
	margin-bottom:50px;
}

#youtube-area{
    overflow: hidden;
  opacity: 0;   
	margin-bottom:40px;
}



/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  animation-name:PageAnimeAppear;
  animation-duration:.5s;
  animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}


#home-contents .youtube i{
	margin-left:10px;
	}
#home-contents .youtube .mvlist{
	display:inline-block;
	margin:5px auto 15px;
	}

#home-contents .youtube .mvlist h3{
	font-weight:normal;
	color:#00bc36;
	font-size:1.3em;
	text-align:center;
	font-family: 'M PLUS 1p', sans-serif;
	padding:5px 0 0;
	letter-spacing:0px;
	}
	
#home-contents .youtube .mvlist p{
	letter-spacing:0px;
	text-align:left;
	font-size:0.8em;
	height:10px;
	color:#666;
	padding:0px;
	margin-top:5px;}