@charset "utf-8";

/*--------------------------------------------------*/
/*		https://www.nssol.nipponsteel.com/hokkaido/
/*		/css/home.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index......目次
/*			$layout.....全体のレイアウト
/*			$visual.....ビジュアル部分
/*			$box01......ページ中段コンテンツ紹介部分
/*			$box02......ページ下段会社情報部分
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$layout
/*--------------------------------------------------*/
#forlayout{background-color: #fcfbfa;}
@media screen and (max-width: 767px) {
#forlayout{padding-bottom: 9.375%;}
}



/*--------------------------------------------------*/
/*			$visual
/*--------------------------------------------------*/
#visual{overflow: hidden; position: relative; width: 100%; height: 0; margin-bottom: 60px; padding-top: 33.333%;}
#visual .visual-inner{position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff;}
#visual .swiper-container{height: 100%;}
#visual .visual01{background: url(/hokkaido/images/home/visual01_pc.jpg) no-repeat center center; background-size: cover;}
#visual .visual02{background: url(/hokkaido/images/home/visual02_pc.jpg) no-repeat center center; background-size: cover;}
#visual .visual03{background: url(/hokkaido/images/home/visual03_pc.jpg) no-repeat center center; background-size: cover;}
#visual .visual04{background: url(/hokkaido/images/home/visual04_pc.jpg) no-repeat center center; background-size: cover;}
#visual .liquid-inner{-webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column; flex-flow: column; height: 100%;}
#visual h2{padding-bottom: .5em; font-size: 4.6rem; line-height: 1.2;}
#visual .txt{width: 57%; padding-bottom: 2em; font-size: 2rem;}
#visual .btn01 a{border-color: #fff;}
#visual .btn01 a:hover{border-color: #fff; background-color: #fff; color: #224c93;}
#visual .swiper-pagination-bullet{opacity: 1; width: 50px; height: 5px; border-radius: 0; border: 1px #fff solid; background-color: transparent;}
#visual .swiper-pagination-bullet-active{background-color: #224c93;}
@media screen and (max-width: 767px) {
#visual{margin-bottom: 3.125%; padding-top: 95%;}
#visual .visual01{background: url(/hokkaido/images/home/visual01_sp.jpg) no-repeat center top; background-size: 100%;}
#visual .visual02{background: url(/hokkaido/images/home/visual02_sp.jpg) no-repeat center top; background-size: 100%;}
#visual .visual03{background: url(/hokkaido/images/home/visual03_sp.jpg) no-repeat center top; background-size: 100%;}
#visual .visual04{background: url(/hokkaido/images/home/visual04_sp.jpg) no-repeat center top; background-size: 100%;}
#visual .liquid-inner{display: block; height: 100%; padding: 9.375% 3.125%;}
#visual h2{font-size: 2.5rem;}
#visual .txt{width: 100%; padding-bottom: 1.5em; font-size: 1.2rem;}
#visual .swiper-pagination-bullet{width: 25px; height: 3px;}
}



/*--------------------------------------------------*/
/*			$box03
/*--------------------------------------------------*/
#box03{padding-bottom: 80px;}
#box03 .tit01{width: 100%; margin-bottom: 0;}
#box03 li{margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eaeaea; font-size: 1.4rem; line-height: 1.6;}
#box03 li:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
#box03 li dl{justify-content: space-between;}
#box03 li dt{width: 120px;}
#box03 li dd{width: 740px;}
#box03 li dd span{display: inline-block; padding: .2em .5em; border: 1px #333 solid; font-size: 1.2rem; line-height: 1;}
#box03 li dd a{color: #09c; text-decoration: underline;}
#box03 li dd a:hover{text-decoration: none;}
@media screen and (max-width: 767px) {
#box03{padding-bottom: 6.125%;}
#box03 li{font-size: 1.2rem;}
#box03 li dl{display: block;}
#box03 li dt{width: 100%; padding-bottom: .5em;}
#box03 li dd{width: 100%;}
}


/*--------------------------------------------------*/
/*			$box01
/*--------------------------------------------------*/
#box01{padding-bottom: 60px;}
#box01 h3{padding-bottom: 3rem; font-size: 2.2rem; font-weight: 700; line-height: 1.6;}
#box01 h3 strong{background: linear-gradient(transparent 70%, #d2ef99 70%);}
#box01 .btn01 a{border-color: #333;}
#box01 .btn01 a:hover{border-color: #224c93; background-color: #224c93; color: #fff;}
#box01 .box01-top{-webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 4px;}
#box01 .box01-top ul{width: 49.83%;}
#box01 .box01-top ul.box01-left{-webkit-flex-flow: column; flex-flow: column; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: space-between; justify-content: space-between;}
#box01 .box01-top ul.box01-left li{-webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-flow: column; flex-flow: column; -webkit-justify-content: center; justify-content: center;}
#box01 .box01-top ul.box01-left li:nth-child(1){margin-bottom: 4px; padding: 3rem 0 3rem 4rem; background: url(/hokkaido/images/common/logo_hns_symbol.jpg) no-repeat 90% center #fff; background-size:23.809% auto;}
#box01 .box01-top ul.box01-left li:nth-child(1) h3{width: 55%;}
#box01 .box01-top ul.box01-left li:nth-child(2){padding: 3rem 0 3rem 4rem; background: url(/hokkaido/images/home/box01_bg01.jpg) no-repeat right center #fff; background-size:auto 100%;}
#box01 .box01-top ul.box01-left li:nth-child(2) h3{width: 61%;}
#box01 .box01-top ul.box01-right{-webkit-flex-flow: column; flex-flow: column; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: space-between; justify-content: space-between;}
#box01 .box01-top ul.box01-right li{-webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-flow: column; flex-flow: column; -webkit-justify-content: center; justify-content: center;}
#box01 .box01-top ul.box01-right li:nth-child(1){margin-bottom: 4px; padding: 3rem 0 3rem 4rem; background: url(/hokkaido/images/home/box01_bg04.jpg) no-repeat right center #fff; background-size:auto 100%;}
#box01 .box01-top ul.box01-right li:nth-child(1) h3{width: 75%;}
#box01 .box01-top ul.box01-right li:nth-child(2){padding: 3rem 0 3rem 4rem; background: url(/hokkaido/images/home/box01_bg05.jpg) no-repeat right center #fff; background-size:auto 100%;}
#box01 .box01-top ul.box01-right li:nth-child(2) h3{width: 70%;}
#box01 ul.flex{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
#box01 ul.flex li{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; width: 49.83%; margin-bottom: 4px; padding: 3rem 0 3rem 4rem;}
#box01 ul.flex li.philosophy{background: url(/hokkaido/images/home/box01_bg07.jpg) no-repeat right center #fff; background-size: 100% auto;}
#box01 ul.flex li.philosophy h3{width: 60%;}
#box01 ul.flex li.company{background: url(/hokkaido/images/common/logo_hns_symbol.jpg) no-repeat 90% center #fff; background-size:23.809% auto;}
#box01 ul.flex li.sustainability{background: url(/hokkaido/images/home/box01_bg06.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.sustainability h3{width: 63%;}
#box01 ul.flex li.recruit{background: url(/hokkaido/images/home/box01_bg04.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.recruit h3{width: 63%;}
#box01 ul.flex li.solution{background: url(/hokkaido/images/home/box01_bg01.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.solution h3{width: 63%;}
#box01 ul.flex li.partnership{background: url(/hokkaido/images/home/box01_bg05.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.partnership h3{width: 70%;}
@media screen and (max-width: 767px) {
#box01{padding-bottom: 3.125%;}
#box01 h3{width: 65%; padding-bottom: 2rem; font-size: 1.3rem;}
#box01 ul.flex{display: block;}
#box01 ul.flex li{width: 100%; margin-bottom: 3.125%; padding: 6.25%;}
#box01 .box01-top ul.box01-left li:nth-child(1) h3{width: 65%;}
#box01 .box01-top ul.box01-left li:nth-child(2){margin-bottom: 3.125%; padding: 6.25%;}
#box01 .box01-top ul.box01-left li:nth-child(2) h3{width: 65%;}
#box01 .box01-top ul.box01-right{display: block;}
#box01 .box01-top ul.box01-right li:nth-child(1){margin-bottom: 3.125%; padding: 6.25%;}
#box01 .box01-top ul.box01-right li:nth-child(1) h3{width: 65%;}
#box01 .box01-top ul.box01-right li:nth-child(2){margin-bottom: 3.125%; padding: 6.25%;}
#box01 .box01-top ul.box01-right li:nth-child(2) h3{width: 75%;}
#box01 ul.flex li.philosophy{background: url(/hokkaido/images/home/box01_bg07.jpg) no-repeat right center #fff; background-size: auto 100%;}
#box01 ul.flex li.philosophy h3{width: 60%;}
#box01 ul.flex li.company{background: url(/hokkaido/images/common/logo_hns_symbol.jpg) no-repeat right center #fff; background-size: auto 90%;}
#box01 ul.flex li.sustainability{background: url(/hokkaido/images/home/box01_bg06.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.sustainability h3{width: 63%;}
#box01 ul.flex li.recruit{background: url(/hokkaido/images/home/box01_bg04.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.recruit h3{width: 63%;}
#box01 ul.flex li.solution{background: url(/hokkaido/images/home/box01_bg01.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.solution h3{width: 63%;}
#box01 ul.flex li.partnership{background: url(/hokkaido/images/home/box01_bg05.jpg) no-repeat right top #fff; background-size: auto 100%;}
#box01 ul.flex li.partnership h3{width: 70%;}

}



/*--------------------------------------------------*/
/*			$box02
/*--------------------------------------------------*/
#box02 .box02-inner{padding: 30px; background-color: #fff;}
#box02 .box02-inner dl{-webkit-align-content: center; align-content: center;}
#box02 .box02-inner dt{width: 30%; margin: 0 auto; padding-bottom: 3rem; font-size: 0; line-height: 0;}
#box02 .box02-inner dt a{display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box02 .box02-inner dt a .symbol{box-sizing: content-box; width: 11%; padding-right: 10px;}
#box02 .box02-inner dt a .japanese{box-sizing: content-box; width: 81%;}
#box02 .box02-inner dt img{width: 360px;}
#box02 .box02-inner dd{width: 77%; margin: 0 auto; font-size: 1.4rem;}
#box02 .box02-inner dd ul{justify-content: space-between;}
#box02 .box02-inner dd ul li{justify-content: space-between; width: 48%;}
#box02 .box02-inner dd ul li figure{width: 48%;}
#box02 .box02-inner dd ul li address{width: 48%;}
@media screen and (max-width: 767px) {
#box02 .box02-inner{width: 100%; height: auto; padding: 6.25% 3.125%;}
#box02 .box02-inner dl{display: block; position: static; width: 100%; height: auto;}
#box02 .box02-inner dt{width: 90%; padding-bottom: 3.125%;}
#box02 .box02-inner dt a{-webkit-justify-content: flex-start; justify-content: flex-start;}
#box02 .box02-inner dt a .symbol{width: 20%; padding-right: 5%;}
#box02 .box02-inner dt a .japanese{width: 70%;}
#box02 .box02-inner dd{width: 100%; font-size: 1.2rem;}
#box02 .box02-inner dd a{color: #0298cb; text-decoration: underline;}
#box02 .box02-inner dd ul{display: block;}
#box02 .box02-inner dd ul li{width: 100%;}

}