@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.7.2/css/all.min.css');
/*
Theme Name: IoT CSmonitor Lite LP a
Description: IoTシステム開発事業 CSmonitor Lite LP a
Author: TOYO DENSO Co., Ltd.
Author URI: https://t-denso.com/
Version: 1.0.2
*/


/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* 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-gray{ border: 0.0625em solid #d9d9d9;}
.frame-black{ border: 0.0625em solid #010101;}
.frame-anchor{ border: 0.0625em solid #2448be;}
.frame-orange{ border: 0.0625em solid #FF884D;}
.frame-lblue{ border: 0.0625em solid #CAD9EF;}
.frame-dblue{ border: 0.0625em solid #002E77;}

.bg-white{ background-color: #ffffff;}
.bg-gray{ background-color: #d9d9d9;}
.bg-black{ background-color: #010101;}
.bg-anchor{ background-color: #2448be;}
.bg-orange{ background-color: #FF884D;}
.bg-lblue{ background-color: #CAD9EF;}
.bg-dblue{ background-color: #002E77;}

.c-white{ color: #ffffff;}
.c-gray{ color: #d9d9d9;}
.c-black{ color: #010101;}
.c-anchor{ color: #2448be;}
.c-orange{ color: #FF884D;}
.c-lblue{ color: #CAD9EF;}
.c-dblue{ color: #002E77;}

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

.cc-message{ font-size: 0.8em;}
.cc-compliance .cc-btn.cc-deny {display:none;}

.link-btn a{
	font-size: 1.5em;
	display: inline-block;
	text-decoration: none;
	line-height: normal;
	padding: 1em 1.2em;
	border: .25em solid #FF884D;
	color: #FF884D;
	background-color: #fff;
}
.link-btn a:hover{background-color: #FF884D;color: #fff;border-color: #FFFFFF;}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* COMMON */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* FONT */
body {
	color: #010101;background-color: #002e77;
	font-family: 'Roboto', 'Noto Sans JP', sans-serif, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
img{width: 100%;}
main{width: 100%;background-color: #fff;}
@media (min-width: 960px){
	main{width: 960px;margin: 0 auto;box-shadow: 0 .1em .7em rgba(0, 0, 0, 0.75);}
}
/* 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: 3.75rem;
	height: 3.75rem;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1.9rem;
	text-decoration: none;
}
.scrollTop a i{font-size: 2.4rem;}
.scrollTop a:hover{
	color: #515151;
	background-color: #FFFFFF;
	border: .12rem solid #515151;
}


/* HEADER */
header{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
	height: 4.5em;
	background-color: #FFFFFF;
}
header .wrap{
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .header-logo{
	display: flex;
	-ms-align-items: center;
	align-items: center;
}
header .header-logo a{
	height: 2.7em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}
header .header-logo a .title{	height: 100%; width: auto;}

header .nav-links{
	display: flex;
	align-items: center;
	padding-left: 0;
	list-style-type: none;
}
header .nav-links li{padding: .2em;}
header .nav-links a{text-decoration: none;}
header .nav-links .to-tel{padding-right: 1em;}
header .nav-links .to-tel a{
	font-family: oswald, sans-serif;font-weight: 400;
	font-size: 1.5em;
	color: #010101;
}
header .nav-links .to-tel a i{padding-right: .5em;}
header .nav-links .to-tel a:hover{color: #FF884D;}
header .nav-links .to-contact a{
	line-height: normal;
	font-size: 1em;
	display: inline-block;
	padding: .3em 1em;
	border: .1em solid #FF884D;
	color: #FF884D;
	background-color: #fff;
	border-radius: 100vw;
}
header .nav-links .to-contact a::after{
	font-family: "Font awesome 6 Free";
	content:"\f054";
	font-weight: bold;
	padding-left: 1em;
}
header .nav-links .to-contact a:hover{
	background-color: #FF884D;
	color: #fff;
}
@media (min-width: 960px){
	header{width: 960px;}
}

.vacant{height: 4.5em;}
.link-container{
	padding-top: 5.5em;
	margin-top: -4.5em;
}
.container{padding-top: 3em;padding-bottom: 3em;}


/* FOOTER */
a.blank-window{position: relative;}
a.blank-window::after{
	position: absolute;
	display: block;
	color: #211815;
	font-size: .5em;
	font-family: "Font awesome 6 Free";
	content:"\f08e";
	font-weight: 600;
	top: 0;
	right: -.7em;
}

footer{	padding-top: 2em;line-height: normal;}
footer .foot{
	padding: 0 1em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer .add{width: 55%;}
footer .corp-title{
	display: block;
	box-sizing: border-box;
	padding-right: 1em;
}
footer p.copy{
	width: 100%;height: 2.7em;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}
footer .biz-title{
	text-decoration: none;color: #010101;
	display: flex;
	align-items: center;
	width: 18em;
}
footer .biz-title img{width: 8em;padding-right: 1em;}
footer .biz-title:hover{color: #909090;}
footer .links{width: 36%;}
ul.policy-list{
	list-style-type: none;
	padding-left: 0;
}
ul.policy-list li{padding-top: .2em;padding-bottom: .2em;}
ul.policy-list a{
	text-decoration: none;
	color: #010101;
}
ul.policy-list a::after{right: -1.5em;}
ul.policy-list a:hover{color: #909090;}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* TOP PAGE */
/* - - - - - - - - - - - - - - - - - - - - - - -*/

h2{display: none;}

/* TOP - HERO */
#top-hero{
	padding-top: 4em;
	width: 100%;
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: #f3f3f3;
}
#top-hero h1{padding: 0;margin: 0;}
#top-hero h1 img{display: block;}
.top-link{
	position: absolute;
	bottom: 10%;right: 9%;
}
.top-link a{
	font-size: 1.5em;
	display: inline-block;
	text-decoration: none;
	line-height: normal;
	padding: 1em 1.2em;
	border: .25em solid #FF884D;
	color: #FF884D;
	background-color: #fff;
}
.top-link a::after{
	font-family: "Font awesome 6 Free";
	content:"\f054\f054\f054";
	font-weight: bold;
	padding-left: 1em;
}
.top-link a:hover{background-color: #FF884D;color: #fff;border-color: #FFFFFF;}
@media (min-width: 768px){
	#top-hero{padding-top: 1em;}
	.top-link{bottom: 7%;right: auto;left: 4%;}
}


/* CATCH */
#catch01{position: relative;padding-top: 6.5em;}
#catch01 .text{
	position: absolute;
	height: 6.5em;width: 100%;
	top: 0;
	border-bottom: .15em solid #002e77;
}
#catch01 .text p{
	position: relative;
	width: 100%;height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.3em;
	letter-spacing: .05em;
}
#catch01 .text p::before{
	position: absolute;
	display:block;
	content:"";
	height: 1.5em;width: 1.3em;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color: #002e77;
	bottom: -1.5em;left: 50%;
	transform: translateX(-50%);
}
#catch01 .text p::after{
	position: absolute;
	display:block;
	content:"";
	height: 1.5em;width: 1.3em;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color: #fff;
	bottom: -1.3em;left: 50%;
	transform: translateX(-50%);
}
#catch01 .image img{display: block;}


@media (min-width: 768px){
#catch01{padding-top: 4.5em;}
#catch01 .text{height: 4.5em}
}


/* APPEAL */
.appeal{padding: 5em 0;}
.appeal .mincho{
	font-family: "Noto Serif JP", serif;
	font-size: 2.5em;
	font-weight: 900;
	line-height: 1;
	padding: .2em;
	vertical-align: -.1em;
	position: relative;
}
.appeal p{text-align: center;font-size: 1.6em;font-weight: 500;margin: 0;}

.appeal__text01 p img{width: 9em;margin-bottom: -.3em;margin-right: .3em;}
.appeal__text01 .mincho::after,.appeal__text02 .mincho::after{
	position: absolute;
	display: block;
	content:"";
	width: .7em;height: .7em;
	background-image: url("img/emphasis.svg");
	background-position: right top;
	background-repeat: no-repeat;
	top: 0;right: -.3em;
}
.appeal__text02 .mincho{font-size: 2em;}
.appeal__text03 p{position: relative;}
.appeal__text03 p::before,.appeal__text03 p::after{
	position: absolute;
	display: block;
	content:"";
	height: 1.1em;width: .7em;
	background-color: #010101;
	top: 50%;transform: translateY(-10%);
}
.appeal__text03 p::before{
	clip-path: polygon(0 .1em, .1em 0, 100% calc(100% - .1em), calc(100% - .1em) 100%);
	left: .3em;
}
.appeal__text03 p::after{
	clip-path: polygon(calc(100% - .1em) 0, 100% .1em, .1em 100%, 0 calc(100% - .1em));
	right: .3em;
}




/* POINT */
#point{	background-color: #002e77;}
#point section{
	width: 83%;margin: auto;padding: 2.5em 0;
	display: flex;
	justify-content: space-between;
}
#point section .image,#point section .text{width: 48%;}
#point section .text{color: #fff;}
#point section dl{font-size: 1.2em;}
#point section dt{font-weight: bold;margin-bottom: 1.5em;}
#point section dd{margin-left: 0;}

/* CTA */
.cta{padding: 2em 0;}
.cta .links{
	display: flex;
	justify-content: space-evenly;
}
.cta .links dl{text-align: center;padding: 1em 0;width: 40%;}
.cta .links dt{font-size: 1.1em;position: relative;margin-bottom: .5em;}
.cta .links dt::before,.cta .links dt::after{
	position: absolute;
	display: block;
	content:"";
	height: 1.1em;width: 1em;
	background-color: #010101;
	top: 50%;transform: translateY(-50%);
}
.cta .links dt::before{
	clip-path: polygon(0 .1em, .1em 0, 100% calc(100% - .1em), calc(100% - .1em) 100%);
	left: 0;
}
.cta .links dt::after{
	clip-path: polygon(calc(100% - .1em) 0, 100% .1em, .1em 100%, 0 calc(100% - .1em));
	right: 0;
}
.cta .links dd{margin-left: 0;}
.cta .links .link-btn a{width: 100%;}

/* BUCYO */
#bucho-statement,#bucho-interact{background-color: #e8eef7;}
#bucho-statement .wrap{
	padding: 2em 0;
	display: flex;
	justify-content: space-between;
}
#bucho-statement figure{width: 23%;}
#bucho-statement figure figcaption{
	font-size: 1.2em;
	text-align: center;
	line-height: normal;
	font-weight: 500;
}
#bucho-statement .comment{width: 73%;}

#bucho-interact p{font-weight: 500;font-size: 1.3em;}
#bucho-interact .memo-point{
	background-color: #f0f5fc;
	border: .3em solid #cad9ef;
	border-radius: .5em;
	padding: 1.5em 5em;
	width: 80%;
	margin: auto;
}
#bucho-interact .memo-point ul{
	padding-left: 3em;
	list-style-type: none;
}
#bucho-interact .memo-point li{
	position: relative;
	font-size: 1.2em;
	font-weight: 500;
	padding: .5em 0;
}
#bucho-interact .memo-point li::before{
	position: absolute;
	display: block;
	content: "";
	width: 1.6em;height: 1.6em;
	background-image: url("img/iine.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	top: 50%;left: -2.5em;transform: translateY(-50%);
}

/* COMPARE */
#compare{background-color: #e8eef7;}
table.compare{border-collapse: collapse;width: 85%;margin: auto;}
table.compare th,table.compare td{
	background-color: #e8eef7;
	padding: .2rem;
	border: .06em solid #231815;
	width: 25%;
}
table.compare th:first-child,table.compare td:first-child{width: 13%;}
table.compare th:first-child{border: none;}
table.compare th{text-align: left;padding-top: .8rem;border-top: none;font-weight: 400;}
table.compare th .logo{display: block;width: 80%;margin: auto;}
table.compare th .image{display: block;margin: .5em auto;}
table.compare td{vertical-align: top}
table.compare td .scale{display: block;width: 90%;margin: .1em auto;}
table.compare td:first-child{text-align: center;font-size: 1.2em;font-weight: 700;vertical-align: middle}
table.compare td.highlight,table.compare th.highlight {
	background-color: #e8eef7;
  position: relative;
  z-index: 1;
}
table.compare th.highlight::before,
table.compare td.highlight::before {
  content: '';
  position: absolute;
	display: block;
	top: 0;right: 0;bottom: 0;left: 0;
  width: 100%;height: 100%;
  box-shadow: 0 .1em .7em rgba(0, 0, 0, 0.75);
  z-index: -1;
}
table.compare td.highlight::after {
  content: '';
  position: absolute;
	display: block;
	background-color: #e8eef7;
	width: 100%;height: .7em;
	top: -.8em;left: 0;
}
table.compare td.circle,table.compare td.double,table.compare td.triangle{
	background-position: center center;
	background-size: 5em;
	background-repeat: no-repeat;
}
table.compare td.circle{background-image: url("img/compare-circle.svg")}
table.compare td.double{background-image: url("img/compare-double-circle.svg")}
table.compare td.triangle{background-image: url("img/compare-triangle.svg")}

/* FAQ */
#faq{background-color: #e8eef7;}

.faq-list{
	width: 85%;margin: auto;
	padding: 1em 0;
	counter-reset: faq-counter;
}
.faq-list dt,.faq-list dd{
	position: relative;
	left: 0;
	padding: .5rem 1rem;
	padding-left: 3rem;
	margin: 0;
}
.faq-list dt{font-size: 1.1em;font-weight: 700;}
.faq-list dt::before,.faq-list dd::before{
	font-family: "Roboto Serif", serif;
	font-size: 1.8em;
	font-weight: 400;
	position: absolute;
	display: block;
	left: .5rem;	top: 50%;transform: translateY(-50%);
}
.faq-list dt::before{
	counter-increment: faq-counter;
	content: "Q" counter(faq-counter);
	color: #00a5eb;
	left: -.5rem;
}
.faq-list dd::before{
	content: "A";
	top: 0;
	transform: translateY(0);
	color: #FF803A;
}




table.traditional{
	border-collapse: collapse;
	line-height: 1.3;
}
table.traditional th,table.traditional td{
	border: .06em solid #010101;
	padding: .5em;
}
table.traditional th{
	font-weight: 600;
	text-align: right;
	background-color: #EAEDEC;
	min-width: 9em;
}
table.traditional td{background-color: #fff;}
@media (min-width: 768px){
	table.traditional{
		width: 90%;
		margin: auto;
	}
}
@media (min-width: 960px){
	table.traditional{width: 80%;}
}
div.terms{
	background-color: #fff;
	padding: 1.5em;
	border-radius: .5em
}
div.terms dl dd{margin-left: 1em;}
div.terms ol{padding-left: 1em;}
ol.in-brackets{
	list-style: none;
	counter-reset: number;
	padding-left: 2em;
}
ol.in-brackets li::before {
	counter-increment: number;
	content: '('counter(number)')';
	margin-left: -2em;
	margin-right: .5em;
}
ol.katakana { list-style-type: katakana; }
ol.katakana li::before{content:"";margin-left: 0;margin-right: 0;}