@charset "UTF-8";

/*
**************************************************************************
*	natrus_ew.css
**************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

html, body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

sup {
	vertical-align: super;
	font-size: small;
}

.nav-fixed span::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	left: 0;
	height: 100%;
	background-position: center;
}

.nav-fixed .natrus {
	border-right: none;
}

.nav-fixed .inquiry,
.nav-fixed .network {
	border-right: 1px solid #FAD273;
}

.nav-fixed .inquiry a,
.nav-fixed .network a {
	background-color: #f8b417;
}

.nav-fixed .inquiry a:hover span,
.nav-fixed .network a:hover span {
	opacity: 0.7;
}

.nav-fixed .network {
	border-right: none;
}

.nav-fixed #natrus {
	padding-left: 61px;
}

.nav-fixed #natrus::before {
	width: 51px;
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/new_lifestyle/nav-fixed-natrus.svg);
}

.nav-fixed #inquiry {
	padding-left: 36px;
}

.nav-fixed #inquiry::before {
	width: 26px;
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/new_lifestyle/nav-fixed-inquiry.svg);
}

.nav-fixed #network {
	padding-left: 31px;
}

.nav-fixed #network::before {
	width: 21px;
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/new_lifestyle/nav-fixed-network.svg);
}

.contents {
	width: 100%;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: "Noto Sans JP", "ヒラギノ角ゴシック", Hiragino Sans, sans-serif;
	/* font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
	margin: 0 auto;
	/* color: #333333; */
	color: #485157;
	overflow: hidden;
}

.contents * {
	box-sizing: border-box;
}

.contents img {
	width: 100%;
	height: auto;
	max-width: 100%;
	vertical-align: top;
}

.container.css-scale.overlay-open {
	-webkit-transform: inherit;
	transform: inherit;
}

.contents .breadcrumbs {
	width: 978px;
	margin: 0 auto;
}

.contents .breadcrumbs li,
.contents .breadcrumbs li.act,
.contents .breadcrumbs li a:link,
.contents .breadcrumbs li a:visited {
	color: #ffffff;
}

.contents .breadcrumbs li a:hover,
.contents .breadcrumbs li a:active {
	color: #ffa200;
}


/* clearfix */
.cf:before, .cf:after {
	content: "";
	display: block;
	overflow: hidden;
}

.cf:after {
	clear: both;
}

.only-sp,
.sp-only {
	display: none !important;
}


/* # button
----------------------------------- */

.btn a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 10px 35px 9px 12px;
	/* padding-right: 35px;
	padding-left: 12px; */
	width: 100%;
	min-height: 48px;
	/* line-height: 48px; */
	text-align: center;
	transition: background-color .3s;
	font-size: 16px;
}

.btn.btn-next a .inner {
	padding: 0;
}


/* small */
.btn-s a {
	padding-right: 30px;
	height: 48px;
	line-height: 48px;
}


/* middle */
.btn-m a {
	width: 360px;
	height: 48px;
	line-height: 48px;
}


/* large */
.btn-l a {
	width: 460px;
	min-height: 60px;
	font-size: 20px;
}



/* # animation
----------------------------------- */
.inview .fadein-slideup,
.inview.fadein-slideup {
	opacity: 0;
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
	transition-duration: 1.2s;
	transition-timing-function: cubic-bezier(0.3, 0, 0.35, 1);
}

.inview-on .fadein-slideup,
.inview-on.fadein-slideup {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


/* header slideinをfadein-slideupに変更 */
.container.css-scale {
	transition: 0s;
	-webkit-animation-duration: 0s;
	animation-duration: 0s;
}

.container.css-scale header {
	opacity: 0;
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
	transition: 0.5s;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.container.clickstream-out header {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


/* # box
----------------------------------- */

.box {
	width: 100%;
}

.box-breadcrumbs {
	width: 978px;
	margin: 0 auto;
}


/* # bl
----------------------------------- */
.bl {
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 918px;
	z-index: 2;
}

/* MV
----------------------------------- */
.bl-mainvisual {
	position: relative;
	padding-top: 233px;
	padding-bottom: 44px;
	padding-left: 5%;
	padding-right: 5%;
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_mv_sp.png) no-repeat left top;
	background-size: 100% 554px;
}

.bl-mainvisual__img.img-01 {
	position: absolute;
	width: 253px;
	left: -40px;
	top: -34px;
	border-radius: 50%;
	overflow: hidden;
}

.bl-mainvisual__img.img-02 {
	position: absolute;
	width: 154px;
	right: -12px;
	top: 50px;
	border-radius: 50%;
	overflow: hidden;
}

.bl-mainvisual__img.img-03 {
	position: absolute;
	width: 105px;
	right: -29px;
	bottom: 0;
	border-radius: 50%;
	overflow: hidden;
}

.bl-mainvisual__title {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.bl-mainvisual__title .green{
	color: #00A395;
}

.bl-mainvisual__title .blue{
	color: #00A0E6;
}

.bl-mainvisual__title .name{
	display: block;
	color: #00A0E6;
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
}

.bl-mainvisual__title img {
	display: block;
	max-width: 330px;
	margin: 10px auto 0;
}

.bl-mainvisual__lead_wrp {
	max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.bl-mainvisual__lead_wrp .bl-tout__note {
	margin-top: 10px;
	padding: 0 20px;
}
.bl-mainvisual__lead {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 18px 15px;
	background: #fff;
	color: #485157;
	line-height: 1.75;
	border-radius: 40px;
	box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.04);
}
.bl-mainvisual__lead .bl-mainvisual__title {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 20px;
	text-align: left;
}

.bl-mainvisual__lead strong {
	font-weight: bold;
}

.bl-mainvisual__feature {
	max-width: 270px;
	margin: 0 auto 14px;
}

@media (min-width: 768px) {
	.bl-mainvisual {
		max-width: 100%;
		padding-top: 68px;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
		background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_mv.png);
		background-size: 100% 490px;
	}

	.bl-mainvisual__inner {
		position: relative;
		max-width: 918px;
		margin: auto;
	}

	.bl-mainvisual__img.img-01 {
		width: 480px;
		left: auto;
		right: 805px;
		/* top: 0; */
		top: 30px;
	}

	.bl-mainvisual__img.img-02 {
		width: 390px;
		right: auto;
		left: 850px;
		/* top: -30px; */
		top: 5px;
	}

	.bl-mainvisual__img.img-03 {
		width: 160px;
		right: -56px;
	}

	.bl-mainvisual__title {
		margin-top: -5px;
		margin-bottom: 60px;
		font-size: 30px;
	}

	.bl-mainvisual__title .name{
		font-size: 20px;
	}

	.bl-mainvisual__title img {
		max-width: 600px;
		margin: 45px auto 0;
	}

	.bl-mainvisual__lead {
		max-width: 580px;
		margin-left: auto;
		margin-right: auto;
		padding: 16px 40px 40px;
	}
	.bl-mainvisual__lead .bl-mainvisual__title {
		margin-top: 10px;
		margin-bottom: 0;
		font-size: 20px;
		text-align: center;
	}

	.bl-mainvisual__feature {
		max-width: 440px;
		margin: 0 auto 10px;
	}
}

/* 訴求
----------------------------------- */
.bl-tout {
	padding: 57px 5% 100px;
}

.bl-tout__title {
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 20px;
	color: #00A0E6;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.bl-tout__title:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 40px;
	height: 4px;
	margin: auto auto 0;
	border-radius: 2px;
	background: #00A0E6;
}

.bl-tout__scene:not(:last-child) {
	margin-bottom: 40px;
}

.bl-tout__scene figcaption {
	display: block;
	margin-top: 26px;
	text-align: center;
	font-weight: bold;
	color: #485157;
}

.bl-tout__banner {
	margin-top: 80px;
	padding: 25px 30px;
	border-radius: 20px;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	background: #00A0E6;
	text-align: center;
}

.bl-tout__banner .name {
	position: relative;
	display: inline-block;
	padding-top: 10px;
}

.bl-tout__banner .name i {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	font-size: 10px;
	text-align: center;
	white-space: nowrap;
}

.bl-tout__banner .emphasis {
	color: #FFF200;
}

.bl-tout__media {
	margin-top: 80px;
}

.bl-tout__detail {
	color: #485157;
	line-height: 1.75;
}

.bl-tout__sttl {
	margin-bottom: 26px;
	color: #00A0E6;
	font-size: 20px;
	font-weight: bold;
}

.bl-tout__vis {
	margin-top: 30px;
}

.bl-tout__vis .swiper-containe-wrap {
	position: relative;
	padding-bottom: 40px;
}

.bl-tout__vis .swiper-container {
	position: relative;
	border: 2px solid #00A0E6;
	border-radius: 30px;
	overflow: hidden;
}


.bl-tout__vis .swiper-pagination{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.bl-tout__vis .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0 10px;
}

.bl-tout__vis .swiper-pagination-bullet-active {
	background: #00A0E6;;
}

.bl-tout__vis .swiper-button-prev {
	top: auto;
	left: -3px;
    right: auto;
	bottom: 0;
	width: 50px;
	height: 38px;
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/swiper_arrow_left.png) no-repeat left bottom;
	background-size: contain;
}

.bl-tout__vis .swiper-button-next {
	top: auto;
	left: auto;
    right: -3px;
	bottom: 0;
	width: 50px;
	height: 38px;
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/swiper_arrow_right.png) no-repeat right bottom;
	background-size: contain;
}

.bl-tout__vis .swiper-button-prev::after,
.bl-tout__vis .swiper-button-next::after {
	display: none;
}

.bl-tout__note {
	margin-top: 26px;
	font-size: 13px;
}

@media (min-width: 768px) {
	.bl-tout {
		padding: 80px 0 110px;
	}

	.bl-tout__title {
		display: flex;
		align-items: center;
		position: static;
		margin-bottom: 50px;
		padding-bottom: 0;
		color: #00A0E6;
		font-size: 32px;
	}

	.bl-tout__title span {
		display: block;
		margin: 0 16px;
	}

	.bl-tout__title:before {
		content: '';
		display: block;
		width: 80px;
		height: 4px;
		margin: 0;
		border-radius: 2px;
		background: #00A0E6;
	}

	.bl-tout__title:after {
		display: block;
		position: static;
		width: 80px;
		margin: 0;
	}

	.bl-tout__scenes {
		display: flex;
		margin: 0 -20px;
	}

	.bl-tout__scene {
		margin: 0 20px;
		width: calc(50% - 40px);
	}

	.bl-tout__scene:not(:last-child) {
		margin: 0 20px;
	}

	.bl-tout__scene figcaption {
		font-size: 18px;
	}

	.bl-tout__banner {
		padding: 27px 10px 37px;
		font-size: 28px;
	}

	.bl-tout__banner .name i {
		font-size: 12px;
	}

	.bl-tout__media {
		display: flex;
		flex-direction: row-reverse;
	}

	.bl-tout__detail {
		flex: 1;
	}

	.bl-tout__sttl {
		font-size: 26px;
	}

	.bl-tout__vis {
		flex-shrink: 0;
		width: 440px;
		margin-top: 0;
		margin-right: 40px;
	}
}


/* 特徴
----------------------------------- */
.bl-feature {
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	padding: 0 5% 100px;
}

.bl-feature + .bl-feature {
	border-top: none;
}

.bl-feature__header {
	margin-bottom: 50px;
	padding-top: 100px;
}

.bl-feature__icon {
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #00A0E6;
}

.bl-feature__icon img {
	display: inline-block;
	vertical-align: middle;
	width: 56px;
	height: auto;
	margin-right: 10px;
}

.bl-feature__icon span {
	display: inline-block;
	vertical-align: middle;
}

.bl-feature__title {
	position: relative;
	display: table;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	padding-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #485157;
}

.bl-feature__title:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 4px;
	border-radius: 2px;
	background: #00A0E6;
}

.bl-feature__media + .bl-feature__media {
	margin-top: 50px;
}

.bl-feature__vis {
	margin-bottom: 20px;
}

.bl-feature__detail {
	color: #485157;
	font-size: 16px;
	line-height: 1.75;
}

.bl-feature__detail p + p{
	margin-top: 25px;
}

.bl-feature__sttl {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: bold;
	color: #00A0E6;
}

.bl-feature__tag {
	margin-top: 0!important;
	margin-bottom: 26px;
}

.bl-feature__tag span {
	display: inline-block;
	padding: 5px 14px;
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	background: #00A0E6;
	border-radius: 15px;
}

.bl-feature__note {
	margin-top: 26px;
	font-size: 13px;
	line-height: 1.7;
}

.bl-feature.green .bl-feature__icon {
	color: #00A395;
}

.bl-feature.green .bl-feature__title:after {
	background: #00A395;
}

.bl-feature.green .bl-feature__sttl {
	color: #00A395;
}

.bl-feature.green .bl-feature__tag span {
	background: #00A395;
}

.bl-feature.ecology .bl-feature__header  {
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/txt_ecology.png) no-repeat center 28px;
	background-size: 210px auto;
}

.bl-feature.accessibility .bl-feature__header  {
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/txt_accessibility.png) no-repeat center 10px;
	background-size: 337px auto;
}

@media (min-width: 768px) {
	.bl-feature {
		padding: 0 0 120px;
	}

	.bl-feature__header {
		margin-bottom: 60px;
		padding-top: 120px;
	}

	.bl-feature__icon img {
		width: 64px;
	}

	.bl-feature__title {
		margin-bottom: 60px;
		font-size: 36px;
	}

	.bl-feature__media {
		display: flex;
	}

	.bl-feature__media + .bl-feature__media {
		margin-top: 54px;
	}

	.bl-feature__vis {
		flex-shrink: 0;
		width: 440px;
		margin-right: 40px;
		margin-bottom: 0;
	}

	.bl-feature__detail {
		flex: 1 1 0;
	}

	.bl-feature__sttl {
		font-size: 26px;
	}

	.bl-feature.ecology .bl-feature__header  {
		background-position: center 20px;
		background-size: 280px auto;
	}

	.bl-feature.accessibility .bl-feature__header  {
		background-position: center 20px;
		background-size: 450px auto;
	}
}


/* JIS規格
----------------------------------- */
.bl-jis {
	padding: 100px 5% 0;
}

.bl-jis__body {
	padding: 20px;
	font-size: 13px;
	border: 2px solid #00A0E6;
	border-radius: 20px;
}

.bl-jis__title {
	margin-bottom: 14px;
	color: #00A0E6;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}

@media (min-width: 768px) {
	.bl-jis {
		padding: 120px 0 0;
	}

	.bl-jis__body {
		display: flex;
		align-items: center;
		padding: 20px 40px;
	}


	.bl-jis__title {
		flex-shrink: 0;
		margin-bottom: 0;
		margin-right: 30px;
		font-size: 24px;
		text-align: left;
	}
}

/* 利用シーン
----------------------------------- */
.bl-scene {
	padding: 100px 0 0;
}

.bl-scene__title {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 24px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
}

.bl-scene__title:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 40px;
	height: 4px;
	margin: auto auto 0;
	background: #00A0E6;
	border-radius: 2px;
}

.bl-scene__text {
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
}

.bl-scene__figures {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 56px 0 100px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
}

.bl-scene__figures:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin-top: 40px;
	margin-right: 14px;
	background: #EDF9FF;
}

.bl-scene__figure {
	position: relative;
	z-index: 1;
	width: calc(50% - 14px);
	margin: 0 0 26px;
}

.bl-scene__figure:nth-child(odd) {
	margin-right: 14px;
}

.bl-scene__figure img {
	border-radius: 20px;
}

.bl-scene__figure figcaption {
	display: block;
	margin-top: 16px;
	font-size: 14px;
	text-align: center;
}

.bl-scene__movie {
	padding-left: 5%;
	padding-right: 5%;
}

.bl-scene__movieFrame {
	position: relative;
	padding-bottom: 56.25%;
	margin-bottom: 20px;
}

.bl-scene__movieFrame iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bl-scene__toTop {
	margin-top: 30px;
	padding-left: 5%;
	padding-right: 5%;
}

.bl-scene__toTop a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 182px;
	min-height: 35px;
	height: 35px;
	line-height: 35px;
	padding-left: 34px;
	padding-right: 50px;
	border-radius: 6px;
	position: relative;
	background-color: #0B9FE6;
	font-size: 14px;
	color: #fff;
}
.bl-scene__toTop a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 16px;
    border-top: 8px solid transparent;
	border-bottom: 8px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	transform: translateY(-12px);
}
.bl-scene__toTop .btn-wrap {
	max-width: 180px;
	margin-left: auto;
}

@media (min-width: 768px) {
	.bl-scene {
		max-width: 100%;
		padding: 120px 0 0;
	}

	.bl-scene__title {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		max-width: 918px;
		padding-left: 0;
		padding-right: 0;
		font-size: 32px;
	}

	.bl-scene__text {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		max-width: 918px;
		padding-left: 0;
		padding-right: 0;
	}

	.bl-scene__figures {
		max-width: 918px;
		margin-top: 40px;
		margin-bottom: 120px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 40px;
	}

	.bl-scene__figures:after {
		margin-top: 36px;
		margin-left: -36px;
		margin-right: -36px;
	}

	.bl-scene__figure {
		width: 168px;
		margin: 0 18px 0 0;
	}

	.bl-scene__figure:nth-child(odd) {
		margin-right: 18px;
	}

	.bl-scene__figure:last-child {
		margin-right: 0;
	}

	.bl-scene__figure figcaption {
		margin-top: 10px;
	}

	.bl-scene__movie {
		max-width: 918px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	.bl-scene__toTop {
		margin-top: -26px;
		max-width: 918px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	.bl-scene__toTop .btn-wrap {
		max-width: 180px;
		margin-left: auto;
	}
}


/* 施工性
----------------------------------- */
.bl-workability {
	padding: 100px 5% 100px;
}

.bl-workability__title {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 24px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
}

.bl-workability__title:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 40px;
	height: 4px;
	margin: auto auto 0;
	background: #00A0E6;
	border-radius: 2px;
}

.bl-workability__lead {
	margin-bottom: 20px;
	color: #00A0E6;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}

.bl-workability__text {
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
}

.bl-workability__figures {
	margin-top: 30px;
}

.bl-workability__figure {
	position: relative;
	text-align: center;
}

.bl-workability__figure.after img {
	border: 2px solid #00A0E6;
}

.bl-workability__figure:not(:last-child):after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 49px;
	height: 53px;
	background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/arrow_down.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, 15px);
}

.bl-workability__figure img {
	width: 100%;
	height: auto;
	border-radius: 30px;
}

.bl-workability__figure:not(:last-child) {
	margin-bottom: 90px;
}

.bl-workability__toDetail {
	margin-top: 100px;
	padding: 0 20px;
}

.bl-workability__sttl {
	display: block;
	margin-bottom: 26px;
	text-align: center;
	font-weight: bold;
	color: #485157;
	font-size: 16px;
}

.bl-workability__toDetail .btn-wrap {
	display: block;
	width: 100%;
}

.bl-workability__toDetail .btn--pdf a::after {
    content: "";
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 16px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("/wp-content/themes/nabtesco/img/nabco-select/hds4ia-tl/icon-pdf.png");
}

@media (min-width: 768px) {
	.bl-workability {
		padding: 130px 0 125px;
	}

	.bl-workability__title {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		max-width: 918px;
		padding-left: 0;
		padding-right: 0;
		font-size: 32px;
	}

	.bl-workability__lead {
		font-size: 20px;
	}

	.bl-workability__figures {
		display: flex;
		margin-top: 40px;
		margin-left: -40px;
		margin-right: -40px;
	}

	.bl-workability__figure {
		width: 420px;
		margin: 0 40px;
	}

	.bl-workability__figure:not(:last-child) {
		margin-bottom: 0;
	}

	.bl-workability__figure:not(:last-child):after{
		top: 50%;
		left: 100%;
		width: 53px;
		height: 49px;
		background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/arrow_right.png);
		transform: translate(15px, -50%);
	}

	.bl-workability__toDetail {
		width: 100%;
		margin-top: 90px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	.bl-workability__toDetail .btn-wrap {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.bl-workability__toDetail .btn-wrap .btn {
		width: 290px;
		margin-bottom: 0;
	}

	.bl-workability__toDetail .btn-wrap .btn-pdf {
		width: 460px;
		margin-right: auto;
		margin-left: auto;
	}

	.bl-workability__toDetail .btn-wrap .btn--l {
		width: 374px;
		margin: 0 auto;
		font-size: 18px;
	}

	.bl-workability__sttl {
		font-size: 18px;
	}

}

/*  デモ設置での改善例
----------------------------------- */
.bl.bl-example {
	margin-bottom: 100px;
}
.bl-example .bl-example__item .bl-example__ttl {
	margin-bottom: 24px;
    padding: 20px;
    border: 2px solid #00A0E6;
    border-radius: 20px;
	color: #00a0e6;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.bl-example .bl-example__item .bl-tout__note {
    font-size: 13px;
}
.bl-example .bl-example__item .btn-wrap {
	margin-top: 15px;
}
.bl-example .bl-example__item .bl-example__txt {
	font-size: 16px;
}
.bl-example .bl-example__item .blue {
    color: #00A0E6;
}
@media (max-width: 767px) {
	.bl-example {
		padding-right: 5%;
		padding-left: 5%;
	}
	.bl-example .bl-example__item:nth-child(2) {
		margin-top: 40px;
		text-align: center;
	}
	.bl-example .bl-example__item img {
		width: 100%;
		max-width: 280px;
	}
	.bl-example .bl-example__item .btn-wrap {
		padding: 0 20px;
	}

}
@media (min-width: 768px) {
	.bl-example {
		display: flex;
		width: 100%;
	}
	.bl-example .bl-example__item {
		box-sizing: border-box;
	}
	.bl-example .bl-example__item:nth-child(1) {
		width: 65%;
		padding-right: 30px;
	}
	.bl-example .bl-example__item:nth-child(2) {
		width: 35%;
	}
	.bl-example .bl-example__item .bl-example__ttl {
		font-size: 20px;
	}

}

/* leaflet
----------------------------------- */
.bl-leaflet {
	max-width: 100%;
	margin-top: 80px;
	padding: 60px 5% 20px;
	background-color: #EDF9FF;
}

.bl-leaflet__title {
	font-family: "AxisStd-Medium", serif;
	text-align: center;
	font-size: 24px;
}

.bl-leaflet__item {
	max-width: 280px;
	margin: 60px auto 0;
}

.bl-leaflet__item > p {
	margin-top: 16px;
	margin-bottom: 16px;
	text-align: center;
	font-size: 14px;
}

.bl-leaflet__catalog {
	margin-top: 60px;
	padding: 20px;
	background-color: #fff;
}

.bl-leaflet__catalog > div > p {
	font-family: "AxisStd-Medium", serif;
	font-size: 14px;
	margin-bottom: 16px;
	color: #0B9FE6;
}

.bl-leaflet .btn > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 48px;
    height: 48px;
    line-height: 48px;
	padding-left: 12px;
	padding-right: 40px;
	border-radius: 6px;
	position: relative;
	background-color: #0B9FE6;
	font-size: 16px;
	color: #fff;
}
.bl-leaflet .btn--pdf > a::after,
.bl-leaflet .btn--next > a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 16px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.bl-leaflet .btn--pdf > a::after {
	background-image: url("/wp-content/themes/nabtesco/img/nabco-select/hds4ia-tl/icon-pdf.png");
}
.bl-leaflet .btn--next > a::after {
	background-image: url("/wp-content/themes/nabtesco/img/nabco-select/hds4ia-tl/icon-right.svg");
}

@media (min-width: 768px) {
	.bl-leaflet .btn > a {
		transition: background-color 0.3s;
	}
	.bl-leaflet .btn > a:hover {
		background-color: #FFA200;
	}
	.bl-leaflet .btn--l > a {
		min-height: 64px;
        line-height: 64px;
	}
}

@media (min-width: 768px) {
	.bl-leaflet {
		margin-top: 150px;
		padding: 90px 0 80px;
	}
	.bl-leaflet__title {
		font-size: 30px;
	}
	.bl-leaflet__items {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 918px;
		margin: 72px auto 0;
	}
	.bl-leaflet__item {
        flex: 1 0 auto;
		/* width: 188px; */
		/* flex: 0 0 188px; */
		margin: 0;
	}
	.bl-leaflet__item>p {
		min-height: 3.2em;
		font-size: 13px;
	}
	.bl-leaflet__item>.btn {
		width: 197px;
		margin: 0 auto;
	}
	.bl-leaflet__catalog {
		width: 918px;
		margin: 80px auto 0;
		padding: 40px 48px;
		border-radius: 20px;
	}
	.bl-leaflet__catalog > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bl-leaflet__catalog > div > p {
		flex: 1 1 auto;
		font-size: 20px;
		margin-bottom: 0;
	}
	.bl-leaflet__catalog > div > .btn {
		width: 374px;
		flex: 0 0 374px;
		margin-left: 32px;
	}
}

/* # inquiry
----------------------------------- */
.bl.bl-inquiry {
	position: relative;
	max-width: 100%;
	height: 500px;
	color: #fff;
	text-align: center;
	overflow: hidden;
	max-width: inherit;
	margin-bottom: 100px;
}

.bl-inquiry::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 500px;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: -webkit-transform 0.5s cubic-bezier(0.2, 0.675, 0.626, 1);
	transition: transform 0.5s cubic-bezier(0.2, 0.675, 0.626, 1);
	transition: transform 0.5s cubic-bezier(0.2, 0.675, 0.626, 1), -webkit-transform 0.5s cubic-bezier(0.2, 0.675, 0.626, 1);
	z-index: -1;
	content: "";
}

.bl-inquiry:hover::before {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
}

.bl-inquiry {
	margin-bottom: 72px;
	padding-top: 150px;
}

.bl-inquiry::before {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/products/natrus_2005/bg_inquiry.jpg);
}

.txt-inquiry {
	margin-bottom: 53px;
	font-size: 28px;
	line-height: 1.5;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}

.bl-inquiry .cl2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 912px;
	margin: 0 auto;
}

.bl-inquiry .cl2 .col {
	width: calc((100% - 60px) / 2 - 0.01px);
	margin-right: 15px;
	margin-left: 15px;
}

.bl-inquiry .cl2 .col a {
	text-align: center;
}

@media screen and (max-width: 767px) {
	.only-pc,
	.pc-only {
		display: none !important;
	}
	.only-sp,
	.sp-only  {
		display: block !important;
	}
	.wrap {
		min-width: inherit;
		padding-top: 0;
	}
	.line-top {
		display: none !important;
	}
	.line-left {
		display: none !important;
	}
	.line-right {
		display: none !important;
	}
	.line-bottom {
		display: none !important;
	}
	.sp-text-center {
		text-align: center;
	}
	.nav-fixed {
		display: block !important;
		height: 60px;
	}
	.nav-fixed .products-all,
	.nav-fixed .natrus {
		display: none;
	}
	.nav-fixed ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.nav-fixed .inquiry, .nav-fixed .network {
		width: 50%;
	}
	.nav-fixed .inquiry a, .nav-fixed .network a {
		width: 100%;
		font-size: 13px;
		opacity: 1;
		transition: 0.3s;
	}
	.nav-fixed .inquiry a:hover, .nav-fixed .network a:hover {
		opacity: 0.7;
	}
	/* iOS用のフロートナビをオーバーライド */
	.ios-portrait .nav-fixed {
		height: 60px;
	}
	.ios-portrait .nav-fixed li a {
		min-height: 60px;
		font-size: 13px;
	}
	.ios-portrait .nav-fixed li a span {
		margin-top: 20px;
		padding-left: 36px !important;
	}
	.ios-portrait .nav-fixed li a span svg,
	.ios-portrait .nav-fixed li a span div {
		position: relative !important;
		display: block;
		margin: 0 auto !important;
		-moz-transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
	.ios-portrait .nav-fixed li a span#navAll svg,
	.ios-portrait .nav-fixed li a span#navAll div {
		margin-top: 0 !important;
		margin-bottom: 0;
	}
	/* ------------------------------------
		* ヘッダー override
	* ------------------------------------ */
	.ja header,
	.en header {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 56px;
		min-height: 0;
		margin: 0;
	}
	.ja header .logo,
	.en header .logo {
		float: none;
		width: 100%;
		height: 100%;
		padding: 15px 0 0;
		box-sizing: border-box;
	}
	.ja header .logo > a,
	.en header .logo > a {
		display: block;
	}
	.ja header .logo > a span,
	.en header .logo > a span {
		position: relative;
		left: .5px;
		display: block;
		width: 100px;
		height: 32px;
		transform: scale(.89);
		transform-origin: top center;
		margin-inline: auto;
	}
	.ja header .nav-global,
	.en header .nav-global {
		display: none;
	}

	header .title {
		width: 100%;
		background: #0B9FE6;
		color: #fff;
		font-size: 22px;
		padding: 10px 0;
	}

	/* ------------------------------------
		* フッター
	* ------------------------------------ */
	/* .wrp-footer {
		margin-top: 40px;
		border-top: solid 2px #00a0e6;
		text-align: left;
		padding-bottom: 60px;
	}
	.wrp-footer a {
		display: block;
	}
	.wrp-footer .link-top {
		margin-bottom: 27px;
		border-bottom: solid 1px #dddddd;
		font-size: 15px;
		text-align: center;
	}
	.wrp-footer .link-top a {
		display: block;
		padding: 12px 0;
		color: #333333;
	}
	.wrp-footer .link-top a .link-inner {
		display: inline-block;
		padding-left: 25px;
		background: url(/en/assets/before-data/wp-content/themes/nabtesco/img/common/icn_top.png) no-repeat left 2px;
		background-size: 16px 11px;
	}
	.wrp-footer .global-nav {
		margin: 0 25px 20px;
	}
	.wrp-footer .global-nav li {
		float: left;
		width: 50%;
		margin-bottom: 24px;
		font-size: 15px;
	}
	.wrp-footer .global-nav li a {
		color: #333333;
	}
	.wrp-footer .sub-nav {
		margin: 0 15px 30px;
	}
	.wrp-footer .sub-nav li {
		display: inline-block;
		margin: 0 10px 5px;
		font-size: 12px;
		line-height: 1.8;
		font-family: "AxisStd-Medium";
	}
	.wrp-footer .footer-copy {
		padding: 32px 0;
		background-color: #f7f7f7;
		text-align: center;
	}
	.wrp-footer .footer-copy .logo-nabtesco {
		margin-bottom: 7px;
	}
	.wrp-footer .footer-copy .group {
		margin-bottom: 7px;
		font-size: 11px;
	}
	.wrp-footer .footer-copy .group .copy-logo {
		width: auto;
		margin-right: 15px;
	}
	.wrp-footer .footer-copy .group .copy-logo img {
		max-width: 200px;
	}
	.wrp-footer .footer-copy .group .copy-logo::after {
		margin-left: 5px;
	}
	.wrp-footer .footer-copy .group a {
		display: inline;
	}
	.wrp-footer .footer-copy .copyright {
		font-size: 10px;
	} */
	.contents-sp {
		padding: 0;
	}
	.contents-sp * {
		box-sizing: border-box;
	}
	.contents-sp .line-gray {
		border: none;
		border-top: 1px solid #eee;
	}

	.contents-sp .col .btn-wrap {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}
	.contents-sp .btn-wrap {
		width: 100%;
		display: block;
	}
	.contents-sp .btn-wrap .btn {
		width: 100%;
		margin: 0;
	}
	.contents-sp .btn-wrap .btn a {
		height: auto;
		font-size: 14px;
		line-height: 20px;
		padding: 10px 10px;
	}
	.contents-sp .btn-wrap .btn a .inner {
		padding: 0 10px;
	}
	.contents-sp .btn.col2 {
		width: calc(50% - 7px);
		margin: 0 14px 20px 0;
	}
	.contents-sp .btn.col2 a {
		font-size: 12px;
	}
	.contents-sp .btn.col2:nth-of-type(even) {
		margin-right: 0;
	}

	.contents-sp .bl.bl-inquiry {
		margin-bottom: 50px;
		padding: 106px 0;
		height: auto;
	}
	.contents-sp .bl.bl-inquiry .txt-inquiry {
		font-size: 20px;
		text-align: left;
		padding: 0 30px;
		margin-bottom: 24px;
	}
	.contents-sp .bl.bl-inquiry .cl2 {
		display: block;
		width: 100%;
		padding: 0 20px;
	}
	.contents-sp .bl.bl-inquiry .cl2 .col {
		width: 100%;
		margin: 0 0 16px;
	}
	.contents-sp .bl.bl-inquiry .cl2 .col a {
		height: 40px;
		line-height: 40px;
	}
	.contents-sp .bl-inquiry::before {
		background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/products/natrus_2005/bg_inquiry.jpg);
	}
	.contents-sp .txt-inquiry {
		margin-bottom: 53px;
		font-size: 28px;
		line-height: 1.5;
		-webkit-font-feature-settings: "palt";
		font-feature-settings: "palt";
		letter-spacing: 0.05em;
	}
	.contents-sp .bl-inquiry .cl2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		width: 912px;
		margin: 0 auto;
	}
	.contents-sp .bl-inquiry .cl2 .col {
		width: calc((100% - 60px) / 2 - 0.01px);
		margin-right: 15px;
		margin-left: 15px;
	}
	.contents-sp .bl-inquiry .cl2 .col a {
		text-align: center;
	}

	#cnt-svgmenu {
		margin-top: -32px !important;
	}
	.overlay .overlay-close {
		margin-top: 0 !important;
		right: 20px;
	}
	.overlay #cnt-svgmenu ul {
		height: calc(100vh - 180px);
		overflow-y: scroll;
	}
	.overlay #cnt-svgmenu ul li {
		float: none;
	}

}

@media screen and (max-width: 350px) {
	.nav-fixed .inquiry a,
	.nav-fixed .network a {
		font-size: 12px;
	}
}



/* # bg 背景水玉パララックス
----------------------------------- */
.bg-wrap {
	position: absolute;
	height: 100%;
	top: 0;
	margin: 0 auto;
	width: 100vw;
	max-width: 1440px;
	left: 50%;
	/* left: 0; */
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 100%;
	z-index: -1;
}

.bg-wrap .bg-content {
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

.bg-wrap .bg-content-01 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_01.png);
	width: 300px;
	right: 153px;
	top: 687px;
	height: 300px;
}

.bg-wrap .bg-content-02 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_02.png);
	width: 300px;
	left: -100px;
	top: 1387px;
	height: 300px;
}

.bg-wrap .bg-content-03 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_02.png);
	width: 180px;
	right: 153px;
	top: 2087px;
	height: 180px;
}

.bg-wrap .bg-content-04 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_01.png);
	width: 180px;
	left: -100px;
	top: 2667px;
	height: 180px;
}

.bg-wrap .bg-content-05 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_01.png);
	width: 300px;
	right: 153px;
	top: 3297px;
	height: 300px;
}

.bg-wrap .bg-content-06 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_02.png);
	width: 300px;
	left: -100px;
	top: 4127px;
	height: 300px;
}

.bg-wrap .bg-content-07 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_02.png);
	width: 180px;
	right: 153px;
	top: 4697px;
	height: 180px;
}

.bg-wrap .bg-content-08 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_01.png);
	width: 180px;
	left: -100px;
	top: 5307px;
	height: 180px;
}

.bg-wrap .bg-content-09 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_01.png);
	width: 300px;
	right: 153px;
	top: 5907px;
	height: 300px;
}

.bg-wrap .bg-content-10 {
	background-image: url(/en/assets/before-data/wp-content/themes/nabtesco/img/nabco-select/natrus_ew/bg_02.png);
	width: 300px;
	left: -100px;
	top: 6767px;
	height: 300px;
}

@media screen and (max-width: 767px) {
	.contents-sp .bg-wrap .bg-content {
		display: none;
	}
	/* .contents-sp .bg-wrap .bg-content-01 {
		display: block;
		width: 41.6%;
		left: -13.86667%;
		top: 0px;
		height: 2.37755%;
	}
	.contents-sp .bg-wrap .bg-content-02 {
		display: block;
		width: 67.2%;
		left: 74.93333%;
		top: 344px;
		height: 4.19388%;
	}
	.contents-sp .bg-wrap .bg-content-03 {
		display: block;
		width: 66.13333%;
		left: -36.53333%;
		top: 626px;
		height: 4.26531%;
	} */

	.bl-workability__toDetail .btn-wrap .btn {
		width: 100%;
		margin-bottom: 10px;
	}
}