@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
/*
Theme Name: TDSC water LP
Description: TDSC 水道向け LP
Author: TOYO DENSO Co., Ltd.
Author URI: https://t-denso.com/
Version: 1.0.0
*/


/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* OTHER SETTING */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* COMMON */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* FONT */
/* SCROLL TOP */
/* HEADER */
/* FOOTER */
/* - - - - - - - - - - - - - - - - - - - - - - -*/


/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* OTHER SETTING */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
a{color: #2448be;}
a:hover{color: #657ed1;}
a.pointer-none{pointer-events: none;}
@media (min-width: 960px){
	a.tel{pointer-events: none;text-decoration: none;color: #515151;}
}

.frame-white{ border: 0.0625em solid #ffffff;}
.frame-lgray{ border: 0.0625em solid #F5F5F5;}
.frame-gray{ border: 0.0625em solid #D9D9D9;}
.frame-black{ border: 0.0625em solid #010101;}
.frame-anchor{ border: 0.0625em solid #2448be;}
.frame-red{ border: 0.0625em solid #ff0000;}
.frame-blue{ border: 0.0625em solid #0068B7;}

.bg-white{ background-color: #ffffff;}
.bg-lgray{ background-color: #F5F5F5;}
.bg-gray{ background-color: #D9D9D9;}
.bg-black{ background-color: #010101;}
.bg-anchor{ background-color: #2448be;}
.bg-red{ background-color: #FF0000;}
.bg-blue{ background-color: #0068B7;}

.c-white{ color: #ffffff;}
.c-lgray{ color: #F5F5F5;}
.c-gray{ color: #D9D9D9;}
.c-black{ color: #010101;}
.c-anchor{ color: #2448be;}
.c-red{ color: #FF0000;}
.c-blue{ color: #0068B7;}

.hover-op07:hover,
.hover-op07:hover img{opacity: .7;}

.cc-message{ font-size: 0.8em;}
.cc-compliance .cc-btn.cc-deny {display:none;}
.cc-color-override--958013087 .cc-btn{background-color: #0068B7;}
.cc-color-override--958013087 .cc-btn:hover, .cc-color-override--958013087 .cc-btn:focus { background-color: #4DB2FF;}

.link-btn a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 1.143em;
	width: 15.5em;height: 4em;
	box-sizing: border-box;
	line-height: 1;
	font-weight: bold;
	background-color: #FFFFFF;
	color: #484849;
	transition: all .5s;
	border: .1em solid #484849;
	margin-top: .5em;
	margin-bottom: .5em;
}
.link-btn a.pointer-none{
	pointer-events: none;
	color: #e3e3e3;
	border-color: #E3E3E3;
}
.link-btn a.dl{
	background-color: #0068B7;color: #fff;
	border-color: #0068B7;
}
.link-btn a::after,.link-btn button::after{
	font-family: "Font awesome 6 Free";
	content:"\f054";
	font-weight: bold;
	padding-left: 1em;
}
.link-btn a.dl::after{content:"\f019";}
.link-btn a.contact::after{content:"\f138";}
.link-btn a:hover{background-color: #F5F5F5;}
.link-btn a.dl:hover{background-color: #fff;color: #0068B7;}

ul.note{list-style-type: none;padding-left: 1em;}
ul.note li{padding-left: .3em;}
ul.note li::marker{content:"※";}

ul.check{list-style-type: none;padding-left: 1em;}
ul.check li{padding-left: .3em;}
ul.check li::marker{content:"□";}

.scroll-box {
	width:100%;
	overflow-x: auto;
	padding-bottom: 1em;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: .2em;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
@media screen and (min-width: 768px){
	.scroll-box {
		overflow-x: infinite;
		white-space: normal;
	}
}
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* COMMON */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* FONT */
html{font-family: 'Roboto', 'Noto Sans JP', sans-serif, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
body {
	color: #484849;
	font-family: "source-han-sans-japanese", sans-serif, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN";
}
img{display: block;width: 100%;}
/* SCROLL TOP */
.scrollTop {
	position: fixed;
	right: 1em;
	bottom:  1em;
	opacity: 0;
	z-index: 1000;
	transition: all 0.4s ease-in-out 0s;
}
.scrollTop a {
	box-sizing: border-box;
	border: .12rem solid #FFFFFF;
	background-color: #515151;
	color: #FFFFFF;
	width: 3rem;
	height: 3rem;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	border-radius: 100vw;
	text-decoration: none;
}
.scrollTop a i{font-size: 2rem;}
.scrollTop a:hover{
	color: #515151;
	background-color: #FFFFFF;
	border: .12rem solid #515151;
}

/* HEADER */
header{
	display: block;
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 4em;
	background-color: rgba(255,255,255,0.95);
}
header .header-wrap{
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .header-wrap .header-logo{max-width: 50%;}
header .header-wrap .header-logo a{display: inline-block;}
header .header-wrap .header-logo img{max-width: 100%; max-height: 100%;}
header .header-wrap .global-nav{display: none;}

.overlay {
  content: "";
  display: block;
  width: 0; height: 0;
  background-color: rgba(0, 0, 0, 0.3);
  position:fixed;
  top: 0; left: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%; height: 100%;
  opacity: 1;
}

.menu-trigger{
	display: block;
	background: none;
	border: none;
	padding: 0;
	width: 3em;
	height: 3em;
	border-radius: 100vw;
	background-color: #010101;
	color: #FFFFFF;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: fixed;
	top: 0.4em;
	right: 0.4em;
	z-index: 3000;
	text-align: center;
	outline: none;
	transform: translateX(0);
  transition: all .5s;
}
.menu-trigger::after{
	font-family: "Font Awesome 6 Free","Font Awesome 6 Brands";
	content:'\f0c9';
	transition:  all 2s ease-out;
	font-size: 1.5em;
	font-weight:900;
	top: 50%;left: 50%;
	position: fixed;
	transform: translate(-50% , -50%);
}
.menu-trigger.active::after {
	content:'\f00d';
	transition: all .5s;
}
.inner-menu-trigger{display: none;}
nav.drawer-innner{
  width: 70%;
  height: 100%;
	padding-top: 4.785em;
	overflow-y: scroll;
	box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  transform: translateY(100%);
  transition: all .0s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 1rem;
}
nav.drawer-innner.open {
  transform: translateY(0);
	z-index: 1000;
}
nav.drawer-innner a{
	box-sizing: border-box;
	display: inline-block;
	font-weight: bold;
	padding: .57em;
	text-decoration: none;
	color: #909090;
}
nav.drawer-innner ul.page-menu{
	list-style-type: none;
	line-height: 1;
	padding: 0 1.28rem;
	margin: 0;
}
nav.drawer-innner ul.page-menu li{
	padding: .857em 0;
	text-align: right;
}
nav.drawer-innner ul.page-menu a:hover,
nav.drawer-innner ul.page-menu a:active{color: #0068B7;}

nav.drawer-innner ul.delegate-menu{
	list-style-type: none;
	line-height: 1;
	padding: 1em 1.28rem;
	margin: 0;
	background-color: #f3f3f3;
}
nav.drawer-innner ul.delegate-menu a{font-weight: normal;}
nav.drawer-innner ul.delegate-menu li{
	padding: .5em 0;
	text-align: right;
	font-size: .857em;
}
nav.drawer-innner ul.delegate-menu a:hover,
nav.drawer-innner ul.delegate-menu a:active{color: #515151;}

.container{padding-top: 3.43em;padding-bottom: 3.43em;}

@media (min-width: 768px){
	.menu-trigger{display: none;}
	header .header-wrap .header-logo{max-width: 15em;}
  header .header-wrap .global-nav{
		list-style-type: none;
		line-height: 1;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	header .global-nav{height: 100%;}
	header .global-nav li{
		padding: 0 .5em;
		position: relative;
		height: 100%;
	}
	header .global-nav li::after{
		position: absolute;
		display: block;
		content:"";
		height: 1em;width: .1em;background-color: #151515;
		right: 0;top: 50%;transform: translateY(-50%);
	}
	header .global-nav li:last-child{	padding-right: 0;}
	header .global-nav li:last-child::after{display: none;}
	header .global-nav li a{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: .57em .5em;
		text-decoration: none;
		color: #151515;
	}
	header .global-nav li a:hover{color: #D9D9D9;}
	.vacant{height: 4.2em;}
	.link-container{
		padding-top: 5.2em;
		margin-top: -4.2em;
	}
	.container{padding-top: 6.64em;padding-bottom: 6.64em;}
}
@media (min-width: 1920px){}


/* FOOTER */

footer{
	position: relative;
	height: 100vw;
}
footer::before{
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 1.2em;
	background: linear-gradient(180deg,rgba(68, 65, 65, 0.5) 0%, rgba(68, 65, 65, 0) 100%);
	z-index: 1;
}
footer .content{
	width: 100%;
	position: absolute;
	bottom: 3em;
	border-top: .5em solid #0068B7;
	background-color: rgba(255,255,255,0.8);
	z-index: 2;
}
footer .content .comp-info{padding-top: 3em;padding-bottom: 3em;}
footer .content .comp-info .logo{width: 10em;}
footer .content .comp-info .add dt{font-weight: bold;}
footer .content .comp-info .add dd{font-size: .8em;margin-left: 0;}
footer .content .comp-info .corp-link{padding: 1em 0;}
footer .content .comp-info .corp-link a{
	display: inline-block;
	text-decoration: none;
	border-radius: .7em;
	font-size: 1.143rem;
	line-height: 1;
	font-weight: bold;
	background-color: #0068B7;
	color: #fff;
	padding: 1em 2.286em;
	transition: all .5s;
	border: none;
}
footer .content .comp-info .corp-link a:hover{background-color: #88C7E4;}

footer .foot{
	width: 100%;
	position: absolute;
	background-color: #010101;
	bottom: 0;
	font-size: .8em;
	padding-top: 1em;
	padding-bottom: 1em;
	z-index: 3;
}
footer p.copy{
	color: #FFFFFF;
	margin-top: 0;
	margin-bottom: 0;
}
footer ul.policy-list{
	list-style-type: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}
footer ul.policy-list a{padding: .5em .5em;color: #fff;}
footer ul.policy-list a:hover{color: #D9D9D9;}

@media (min-width: 768px){
	footer{height: 65vw;}
	footer .content .comp-info{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	footer .content .comp-info .corp-link a{padding: 1.5em 1em;}
	footer .foot .wrap{
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
@media (min-width: 1280px){
	footer,footer .inner::before{height: 500px;}
	footer .content .comp-info .add dt{font-size: 1.3em;}
}
@media (min-width: 1920px){
}
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* TOP PAGE */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* TOP - HERO */
#top-hero{position: relative;height: 155vw;background-color: #f5f5f5;}
#top-hero .wrap{padding-top: 5em;}
.top-notice, .top-cta{position: relative;}
#top-hero .link-btn a{margin: 1em auto;}
#top-hero .image{
	position: absolute;
	width: 80%;
	right: 0;bottom: 0;	
}

@media (min-width: 768px){
	#top-hero{height: 62vw;}
	#top-hero h1{font-size: 3em;}
	#top-hero .link-btn a{margin-left: 0;}
	#top-hero .image{width: 65%;bottom: 4vw;}
}
@media (min-width: 1280px){
	#top-hero{height: 630px;}
	#top-hero h1{font-size: 4em;}
	#top-hero .top-notice p{font-size: 1.3em;}
	#top-hero .image{
		width: 935px;
		right: 50%;bottom: 2em;	
		transform: translateX(72%);
	}

}
@media (min-width: 1920px) {
	#top-hero{height: 32.8vw;}
	#top-hero .image{width: 48.69vw;}
}

h2.heading-bar{
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	font-size: 1.5em;
}
.heading-bar::before,
.heading-bar::after {
  content: "";
  width: 1px;
  height: 1em;      /* 文字の高さに合わせる */
  background: #484849;
  margin: 0 1em;   /* 縦棒とテキストの間隔 */
}

/* CTA */
.cta{position: relative;}
.cta .link-btn{display: flex;justify-content: center;flex-wrap: wrap;}
.cta .link-btn a{margin: .5em 2em;}
/* CONTENT01 */

#content01 .wrap > ul{
	list-style-type: none;
	padding-left: 0;
	font-size: .8em;
	display: grid;
	grid-template-columns: repeat(2 , 1fr);
	column-gap: 4em;row-gap:3.5em;
	text-align: center;
	margin-bottom: 2em;
}
#content01 .inner-wrap{margin-bottom: -10em;}
#content01 ~ .cta{padding-top: 10em;}

@media (min-width: 768px){
	#content01 .wrap > ul{grid-template-columns: repeat(4 , 1fr);column-gap:3em;margin: 3em 0;}
	#content01 ul.check{width: 74%;margin: auto;}
	#content01 .inner-wrap{margin-bottom: -12em;}
}

/* CONTENT02 */
table.compare{
	border-collapse: collapse;
	font-size: .8em;
	width: 100%;
}
table.compare th,table.compare td{
	border: .3em solid #fff;
	font-weight: normal;
	text-align: center;padding: .5em;
	line-height: normal;
}
table.compare th{background-color: #D9D9D9;}
table.compare thead th{font-size: 1.2em;font-weight: 600;}
table.compare td{background-color: #f5f5f5;}
table.compare td span{font-size: .8em;}
#content02 table.compare ul{list-style-type: none;padding-left: 0;}
#content03 table.compare th,#content03 table.compare td{border-top-width: .5em;border-bottom-width: .5em;}
#content03 table.compare td{text-align: left;}

@media (min-width: 768px){
	table.compare{margin: 2em auto 0;font-size: 1em;}
	#content02 table.compare th:first-child{width: 8em;}
	#content03 table.compare td{padding: 1em;}
}


/* CONTENT04 */
#content04 .inner-wrap{padding: 0 1em;}
ul.demo-point{list-style-type: none;padding-left: 0;margin: 1em 0;}
ul.demo-point li{
	background-color: #fff;
	color: #0068B7;
	text-align: center;
	font-weight: 700;
	padding: 1em;margin-bottom: 1em;
}

/* CONTENT05 */
.merit-grid{
	display: grid;
	grid-template-columns:repeat(2 , 1fr);
	column-gap:1em;row-gap:1em;
}
.merit-grid .item dl{
	background-color: #f5f5f5;
	border-radius: 1em;
	padding: 1em 1.5em;
	height: 100%;
}
.merit-grid .item dt{font-size: 1.2em;font-weight: bold;margin-bottom: .5em;}
.merit-grid .item dd{margin-left: 0;}
@media (min-width: 768px){
	.merit-grid{column-gap:2em;row-gap:2.5em;}
}

/* CONTENT06 */
.ex-case{border-radius: 1em;}

/* CONTENT07 */
.scene-grid{
	display: grid;
	grid-template-columns:repeat(3 , 1fr);
	column-gap:1em;row-gap:1em;
}
@media (min-width: 768px){
}
@media (min-width: 1280px){
}

/* CONTENT08 */
.faq-list{padding: 1em 0;}
.faq-list dt,.faq-list dd{
	position: relative;
	left: 0;
	padding: 1em;
	padding-left: 3em;
	margin: 0;
}
.faq-list dt:first-child{border-top: .1em solid #0068B7;}
.faq-list dd{background-color: #F5F5F5;border-bottom: .1em solid #0068B7;}
.faq-list dt::before,.faq-list dd::before{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "";
	left: .3em;	top: 50%;transform: translateY(-50%);
	font-size: 2em;font-weight: bold;
	width: 1em;height: 1em;
}
.faq-list dt::before{content: "Q";color: #0068B7;}
.faq-list dd::before{content: "A";color: #000;}
@media (min-width: 768px){
	.faq-list{font-size: 1.2em;letter-spacing: .1em;}
	.faq-list dt,.faq-list dd{padding: 3rem 1rem;padding-left: 5rem;}
	.faq-list dt::before,.faq-list dd::before{left: 1rem;width: 3rem;height: 3rem;}
}
@media (min-width: 1280px){
	.faq-list{width: 75%;margin: auto;}
}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* CONTACT */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
.head{
	height: 4.5em;
	position: relative;
}
.head .wrap{
	height: 100%;
	display: flex;
	align-items: center;
}
.head .head-logo{width: 10em;}