@charset "UTF-8";

/*------------MV------------*/
.m-subpage-title {
    background-image: url("../../images/water_tank/mv_img.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media (max-width: 768px) {
    .m-subpage-title {
        background-position: left;
    }
}

/*---ソリューション---*/
.p-solution-list_item {
    width: calc((100% - 15px*3)/4);
}
@media (max-width: 768px) {
    .p-solution-list_item {
        width: 100%;
    }
}


/*------------ラインナップ------------*/
.p-lineup {
    background: #EFEFEF url("../../images/common/bg_dot.svg");
    background-size: 24px;
    padding: 120px 0;
}
.p-lineup-box{ margin-top: 40px;}
.p-lineup-box.mt0 { margin-top: 0;}

@media (max-width: 768px) {
    .p-lineup {
        padding: 13vw 0;
    }
	.p-lineup-box{ margin-top: 8vw;}
}


/*------タブ------*/
.p-rentallist-tab {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 60px auto 0;
}
.tab-label {
    width: calc((100% - 40px) / 5);
    color: White;
    background: #E60015;
    border-radius: 10px 10px 0 0;
    padding: 15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    order: -1;
    text-align: center;
    font-weight: 700;
	line-height: 1.1;
}
.tab-label span {
	font-size: 14px;
}
.tab-content {
    width: 100%;
    padding: 0 40px 50px;
    background: #fff;
    display: none;
}
.tab-pdf{
    display: inline-block;
    width: 40px;
    vertical-align: middle;
    margin:8px 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: #fff;
    color: #E60015;
}
.tab-switch:checked+.tab-label+.tab-content {
    display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}

@media (max-width: 768px) {
    .p-rentallist-tab {
        margin: 5vw auto 0;
    }
    .tab-label {
		width: calc((100% - 2vw) / 5);
        border-radius: 2vw 2vw 0 0;
        padding: 2vw 0;
		font-size: 2.7vw;
        line-height: 1.4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
	.tab-label span {
		font-size: 2.0vw;
	}
	
    .tab-content {
        padding: 0 5vw 5vw;
    }
    .tab-pdf{
        width: 8vw;
        margin:2vw 0;
    }
}


/*---仕様---*/
.tab-content .m-bar-ttl {
	margin: 40px auto 30px;
}
.tab-content .m-bar-ttl span {
    font-size: 20px;
}

.tab-content .p-lineup-box-ttl {
	margin-bottom: 5px;
	padding-left: 20px;
	position: relative;
    font-size: 22px;
	font-weight: 700;
}
.tab-content .p-lineup-box-ttl::before {
	content: '';
	width: 12px;
	height: 12px;
	background: #E60015;
	border-radius: 50%;
	position: absolute;
	top: 14px;
	left: 0;
}
.tab-content .p-lineup-box-ttl span {
    font-size: 16px;
	font-weight: 500;
}
.tab-content .p-box-txt {
	margin-bottom: 30px;
}
.tab-content .p-box-caption {
	 font-size: 14px;
}

.text-indent {
	text-indent: -1em;
	padding-left: 1em;
}

/* before after */
.tab-content .p-lineup-box-in{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}
.p-box-item.before{
    width: 55%;
    position: relative;
	z-index: 2;
}
.p-box-item.before::after{
    content: '';
    display: block;
    position: absolute;
    width: 50px;
    height: 45px;
    background: url("../../images/common/icon_arrow_double_r.svg") no-repeat;
    background-size: 100%;
    top: calc(50% - 22.5px);
	right: -57px;
	z-index: 3;
}
.p-box-item.after{
    width: 39.4%;
    position: relative;
	z-index: 1;
}

.p-box-item.photo{
    width: 63%;
}
.p-box-item.blueprint{
    width: 33%;
}
.p-box-blueprint-ttl {
	padding: 8px 0;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #707070;
	text-align: center;
	font-weight: 400;
}

.p-box-item-4column {
    width: 23.5%;
	margin-top: 20px;
}
.p-box-item-flow {
    width: 23.5%;
	margin-top: 20px;
	margin-bottom: 70px;
    position: relative;
}
.p-box-item-flow+.p-box-item-flow::before{
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 25px;
    background: url("../../images/common/icon_arrow_double_r.svg") no-repeat;
    background-size: 100%;
    top: calc(50% - 12.5px);
	left: -20px;
	z-index: 3;
}
.p-lineup-flow-box {
	width: calc((100% - 168px) / 3);
	box-sizing: border-box;
	position: relative;
	background: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.16);
}
.p-lineup-flow-box:nth-child(1), .p-lineup-flow-box:nth-child(2), .p-lineup-flow-box:nth-child(3) {
	margin-right: 56px;
	margin-bottom: 30px;
}
.p-lineup-flow-box:nth-child(4), .p-lineup-flow-box:nth-child(5), .p-lineup-flow-box:nth-child(6) {
	margin-left: 56px;
}

.p-lineup-flow-box::before {
    content: '';
    display: block;
    position: absolute;
    width: 46px;
    height: 42px;
    background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
    background-size: 100%;
    top: calc(50% - 21px);
	z-index: 3;
}
.p-lineup-flow-box:nth-child(1)::before, .p-lineup-flow-box:nth-child(2)::before, .p-lineup-flow-box:nth-child(3)::before {
	right: -51px;
}
.p-lineup-flow-box:nth-child(4)::before, .p-lineup-flow-box:nth-child(5)::before, .p-lineup-flow-box:nth-child(6)::before {
	left: -51px;
}

.p-lineup-wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.p-lineup-wrap .p-lineup-box-half {
	width: 47%;
	margin-top: 40px;
}

.p-box-item.before-50 {
	width: 47.5%;
    position: relative;
	z-index: 2;
}
.p-box-item.before-50 ::after{
    content: '';
    display: block;
    position: absolute;
    width: 50px;
    height: 45px;
    background: url("../../images/common/icon_arrow_double_r.svg") no-repeat;
    background-size: 100%;
    top: calc(50% - 22.5px);
	right: -57px;
	z-index: 3;
}
.p-box-item.after-50 {
	width: 47%;
    position: relative;
	z-index: 1;
}

.p-box-item.tab05-left {
	width: 43%;
	margin-top: 40px;
	padding: 0 40px;
}
.p-box-item.tab05-right {
	width: 51%;
	margin-top: 40px;
}

.p-lineup-wrap .p-lineup-box-short {
	width: 33.7%;
	margin-top: 40px;
}
.p-lineup-wrap .p-lineup-box-long {
	width: 62%;
	margin-top: 40px;
}


ul.spec-note {
	width: 100%;
	margin: 20px auto 0;
	font-size: 12px;
}
ul.spec-note li{
	padding-left: 1.7em;
	text-indent: -1.7em;
}
ul.spec-note li .spec-notes-index {
	width: 1.7em;
	display: inline-block;
	text-indent: 0;
}
ul.feature-list {
	width: 100%;
	margin: 20px auto 0;
}
ul.feature-list li {
	margin-bottom: 10px;
	padding-left: 1em;
	position: relative;
	text-decoration: underline;
	text-decoration-color: #E60015;
	text-underline-offset: 5px;
}
ul.feature-list li::before {
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
}


/* table */
.tab-content .over { margin-top: 40px;}
.tab-content table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
.tab-content table th {
    margin: 0;
    text-align: center;
    border: 1px solid #fff;
    background-color: #000;
    color: #FFF;
    padding: 8px 8px 8px 0;
}
.tab-content table th:not(.tategaki){padding: 8px 8px 8px 15px;}
.tab-content table td {
    padding: 5px;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #d3d3d3;
}
.tab-content table tr:nth-child(odd) td {
    background-color: #FFF5F5;
}

@media (max-width: 768px) {

	/*---仕様---*/
	.tab-content .m-bar-ttl {
		margin: 8vw auto 6vw;
        font-size: 4.2vw;
        line-height: 1.6;
	}
	.tab-content .m-bar-ttl span {
		font-size: 3.2vw;
	}

	.tab-content .p-lineup-box-ttl {
		margin-bottom: 1vw;
		padding-left: 4vw;
		position: relative;
		font-size: 3.8vw;
	}
	.tab-content .p-lineup-box-ttl::before {
		content: '';
		width: 2.5vw;
		height: 2.5vw;
		background: #E60015;
		border-radius: 50%;
		position: absolute;
		top: 2.5vw;
		left: 0;
	}
	.tab-content .p-lineup-box-ttl span {
		font-size: 3.0vw;
	}
	.tab-content .p-box-txt {
		margin-bottom: 6vw;
	}
	.tab-content .p-box-caption {
		 font-size: 3.0vw;
	}
	
	

	/* before after */
	.p-box-item.before{
		width: 55%;
		position: relative;
		z-index: 2;
	}
	.p-box-item.before::after{
		content: '';
		display: block;
		position: absolute;
		width: 5vw;
		height: 5vw;
		background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
		background-size: 100%;
		top: calc(50% - 2.5vw);
		right: -5.1vw;
		z-index: 3;
	}
	.p-box-item.after{
		width: 39.4%;
		position: relative;
		z-index: 1;
	}

	.p-box-item.photo{
		width: 100%;
	}
	.p-box-item.blueprint{
		width: 100%;
		margin-top: 5vw;
	}
	.p-box-blueprint-ttl {
		padding: 8px 0;
		border-top: 1px solid #707070;
		border-bottom: 1px solid #707070;
		text-align: center;
		font-weight: 400;
	}

	.p-box-item-4column {
		width: 48%;
		margin-top: 4vw;
	}
	.p-box-item-flow {
		width: 50%;
		margin-top: 4vw;
		margin-bottom: 0;
		position: relative;
	}
	.p-box-item-flow:nth-child(1), .p-box-item-flow:nth-child(2) {
		padding-right: 5vw;
	}
	.p-box-item-flow:nth-child(3), .p-box-item-flow:nth-child(4) {
		padding-left: 5vw;
	}
	.p-box-item-flow::before, 
	.p-box-item-flow+.p-box-item-flow::before{
		content: '';
		display: block;
		position: absolute;
		width: 5vw;
		height: 5vw;
		background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
		background-size: 100%;
		top: calc(50% - 2.5vw);
		left: 0;
		z-index: 3;
	}
	.p-box-item-flow:nth-child(1)::before, .p-box-item-flow:nth-child(2)::before{
		left: auto;
		right: 0;
	}
	.p-lineup-flow-box {
		width: calc((100% - 13vw) / 2);
		box-sizing: border-box;
		position: relative;
		background: #fff;
		box-shadow: 0 0 15px rgba(0,0,0,0.16);
	}
	.p-lineup-flow-box:nth-child(1), .p-lineup-flow-box:nth-child(2), .p-lineup-flow-box:nth-child(3), .p-lineup-flow-box:nth-child(4) {
		margin-right: 6vw;
		margin-left: 0;
		margin-bottom: 6vw;
	}
	.p-lineup-flow-box:nth-child(5), .p-lineup-flow-box:nth-child(6) {
		margin-left: 6vw;
	}

	.p-lineup-flow-box::before {
		content: '';
		display: block;
		position: absolute;
		width: 6vw;
		height: 6vw;
		background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
		background-size: 100%;
		top: calc(50% - 4vw);
		z-index: 3;
	}
	.p-lineup-flow-box:nth-child(1)::before, .p-lineup-flow-boxx:nth-child(2)::before, .p-lineup-flow-box:nth-child(3)::before, .p-lineup-flow-box:nth-child(4)::before {
		right: -6.5vw;
		left: auto;
	}
	.p-lineup-flow-box:nth-child(5)::before, .p-lineup-flow-box:nth-child(6)::before {
		left: -6.5vw;
	}

	.p-lineup-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.p-lineup-wrap .p-lineup-box-half {
		width: 48%;
		margin-top: 8vw;
	}

	.p-box-item.before-50 {
		width: 47.5%;
		position: relative;
		z-index: 2;
	}
	.p-box-item.before-50 ::after{
		content: '';
		display: block;
		position: absolute;
		width: 5vw;
		height: 5vw;
		background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
		background-size: 100%;
		top: calc(50% - 2.5vw);
		right: -5.1vw;
		z-index: 3;
	}
	.p-box-item.after-50 {
		width: 47.5%;
		position: relative;
		z-index: 1;
	}

	.p-box-item.tab05-left {
		width: 100%;
		margin-top: 0;
		padding: 0 2vw;
	}
	.p-box-item.tab05-right {
		width: 100%;
		margin-top: 5vw;
	}

	.p-lineup-wrap .p-lineup-box-short {
		width: 33.7%;
		margin-top: 40px;
	}
	.p-lineup-wrap .p-lineup-box-long {
		width: 62%;
		margin-top: 40px;
	}

	ul.spec-note {
		width: 100%;
		margin: 20px auto 0;
		font-size: 12px;
	}
	ul.spec-note li{
		padding-left: 1.7em;
		text-indent: -1.7em;
	}
	ul.spec-note li .spec-notes-index {
		width: 1.7em;
		display: inline-block;
		text-indent: 0;
	}
	ul.feature-list {
		width: 100%;
		margin: 20px auto 0;
	}
	ul.feature-list li {
		margin-bottom: 10px;
		padding-left: 1em;
		position: relative;
		text-decoration: underline;
		text-decoration-color: #E60015;
		text-underline-offset: 5px;
	}
	ul.feature-list li::before {
		content: '・';
		position: absolute;
		top: 0;
		left: 0;
	}
	
    .tab-content table th,.tab-content table td{white-space: nowrap;}
    .tab-content table th {
        padding: 2vw 2vw 2vw 2vw;
    }
    .tab-content table th:not(.tategaki){padding: 2vw 2vw 2vw 3vw;}
    .tab-content table td {
        padding: 2vw;
    }
}


/*------case・voice------*/
.p-case {
    width: 100%;
    padding: 120px 0 100px;
    background-image: url("../../images/water_tank/case_bg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
.cases {
    position: relative;
    margin: 60px auto 0;
}
.case-box-list {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.case-sub-box-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.case-box {
    width: calc((100% - 50px)/2);
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
}
.case-box:nth-child(2n) {
	 margin-left: 50px;
}
.case-num{
    color: #E60015;
    font-size: 26px;
    font-family: 'Poppins';
    font-weight:700;
    line-height: 0.7;
}
.case-num span{
    font-size: 51px;
    font-weight:500;
    display: inline-block;
    margin-left:5px;
}
.case-box img {
    width: 100%;
}
.case-box-text {
    position: relative;
    width: 92%;
    background-color: #fff;
    padding: 20px 20px 50px;
    text-align: left;
    border-top: 5px solid #E60015;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.18);
    margin:-30px auto 0;
    flex-grow: 1;
}
.case-box-ttl {
    margin: 0 0 15px;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    line-height: 1.6;
}
.case-box-text p:not(.case-box-ttl) {
    font-size: 14px;
    font-weight: 400;
}
.case-box .m-bk-btn{
    position: absolute;
    bottom:-32px;
    left:0;
    right:0;
    margin:auto;
}
.case-box .m-bk-btn a{padding-left:10px;}


.case-sub-box {
    width: 30%;
	margin-top: 90px;
    display: flex;
    flex-direction: column;
	background: #fff;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.18);
	transition: 0.3s ease-in-out;
}
@media (min-width: 769px) {
	.case-sub-box:hover {
		opacity: 0.5;
	}
}
.case-sub-box-ttl {
    border-top: 5px solid #E60015;
	padding: 15px 40px 15px 15px;
    font-size: 18px;
    color: #000;
    font-weight: bold;
    line-height: 1.6;
	position: relative;
}
.case-sub-box-ttl::before {
    content: '';
    display: block;
    position: absolute;
    width: 18px;
    height: 17px;
    background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
    background-size: 100%;
    top: calc(50% - 8.5px);
	right: 10px;
}
.case-sub-box-ttl span {
	display: inline-block;
	border-bottom: 1px solid #707070;
    padding-bottom:10px;
}
.case-sub-box-text {
	padding: 0 15px 15px;
    font-size: 14px;
	font-weight: 400;
}
.case-sub-box-text span {
    font-size: 14px;
	font-weight: 400;
}


@media (max-width: 768px) {
    .p-case {
        padding: 13vw 0 20vw;
        background-image: url("../../images/water_tank/case_bg.jpg");
    }
    .cases {
        margin:5vw auto 0;
    }
    .case-box {
        width: 100%;
        margin-bottom: 0;
    }
    .case-box+.case-box{margin-top:15vw;}
    .case-box:nth-child(2n) {
		 margin-left: 0;
	}
    .case-num{
        font-size: 5.2vw;
    }
    .case-num span{
        font-size: 8vw;
        margin-left:1vw;
    }
    .case-box-text {
        padding: 3vw 3vw 10vw;
        margin: -5vw auto 0;
        flex-grow: 1;
    }
    .case-box-ttl {
        margin: 0 0 2vw;
        font-size: 4.2vw;
    }
    .case-box-text p:not(.case-box-ttl) {
        font-size: 3.2vw;
    }
    .case-box .m-bk-btn{
        position: absolute;
        bottom:-8vw;
    }
    .case-box .m-bk-btn a{
		padding-left: 0;
    }
	
	.case-sub-box {
		width: 100%;
		margin-top: 15vw;
	}
	.case-sub-box+.case-sub-box {
		margin-top: 5vw;
	}
	.case-sub-box-ttl {
		padding: 3vw 8vw 3vw 3vw;
        font-size: 4.2vw;
	}
	.case-sub-box-ttl::before {
		content: '';
		display: block;
		position: absolute;
		width: 4vw;
		height: 4vw;
		top: calc(50% - 2vw);
		right: 2vw;
	}
    .case-sub-box-ttl span {
        padding-bottom:3vw;
    }
	.case-sub-box-text {
		padding: 0 3vw 3vw;
        font-size: 3.0vw;
	}
	.case-sub-box-text span {
		font-size: 3.0vw;
	}
}

/*--------------基礎知識---------------*/
.p-point {
    width: 100%;
    padding: 120px 0;
    background: #EFEFEF url("../../images/common/bg_dot.svg");
    background-size: 24px;
}
.bg-white {
	background: #fff;
}
.point-box {
	width: 100%;
	margin-top: 70px;
	padding: 0 40px;
}
.bg-white .point-box {
	padding: 40px;
	background: #fff;
}

.point-movie-wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.point-movie-wrap .point-movie-box {
	width: 31%;
}
.point-movie-wrap .point-movie-ttl {
	font-size: 18px;
	margin-bottom: 5px;
}
.point-movie-wrap .youtube-wrap {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.point-movie-wrap .point-movie-box .youtube-wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.point-flow-wrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.point-flow-box {
	width: calc((100% - 168px) / 3);
	box-sizing: border-box;
	position: relative;
	background: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.16);
}
.point-flow-box:nth-child(1), .point-flow-box:nth-child(2), .point-flow-box:nth-child(3) {
	margin-right: 56px;
	margin-bottom: 30px;
}
.point-flow-box:nth-child(4), .point-flow-box:nth-child(5), .point-flow-box:nth-child(6) {
	margin-left: 56px;
}

.point-flow-box::before {
    content: '';
    display: block;
    position: absolute;
    width: 46px;
    height: 42px;
    background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
    background-size: 100%;
    top: calc(50% - 21px);
	z-index: 3;
}
.point-flow-box:nth-child(1)::before, .point-flow-box:nth-child(2)::before, .point-flow-box:nth-child(3)::before {
	right: -51px;
}
.point-flow-box:nth-child(4)::before, .point-flow-box:nth-child(5)::before, .point-flow-box:nth-child(6)::before {
	left: -51px;
}
.point-flow-ttl {
	padding: 5px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 768px) {
    .p-point {
        padding: 13vw 0;
    }
	.point-box {
		width: 100%;
		margin-top: 6vw;
		padding: 0 0 8vw;
	}
	.bg-white .point-box {
		padding: 5vw;
	}

	.point-movie-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.point-movie-wrap .point-movie-box {
		width: 100%;
	}
	.point-movie-wrap .point-movie-ttl {
		font-size: 3.6vw;
		margin-bottom: 1vw;
	}

	.point-flow-wrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.point-flow-box {
		width: calc((100% - 13vw) / 2);
		box-sizing: border-box;
		position: relative;
		background: #fff;
		box-shadow: 0 0 15px rgba(0,0,0,0.16);
	}
	.point-flow-box:nth-child(1), .point-flow-box:nth-child(2), .point-flow-box:nth-child(3), .point-flow-box:nth-child(4) {
		margin-right: 6vw;
		margin-left: 0;
		margin-bottom: 6vw;
	}
	.point-flow-box:nth-child(5), .point-flow-box:nth-child(6) {
		margin-left: 6vw;
	}

	.point-flow-box::before {
		content: '';
		display: block;
		position: absolute;
		width: 6vw;
		height: 6vw;
		background: url("../../images/common/icon_arrow_double_r.svg") center center no-repeat;
		background-size: 100%;
		top: calc(50% - 4vw);
		z-index: 3;
	}
	.point-flow-box:nth-child(1)::before, .point-flow-box:nth-child(2)::before, .point-flow-box:nth-child(3)::before, .point-flow-box:nth-child(4)::before {
		right: -6.5vw;
		left: auto;
	}
	.point-flow-box:nth-child(5)::before, .point-flow-box:nth-child(6)::before {
		left: -6.5vw;
	}
	.point-flow-ttl {
		padding: 1vw;
		font-size: 3.0vw;
	}
}