@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 ip-call LP
Description: TDSC 衛星IP通話サービス 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-gray{ border: 0.0625em solid #E9E9E9;}
.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 #35A0D2;}

.bg-white{ background-color: #ffffff;}
.bg-gray{ background-color: #E9E9E9;}
.bg-black{ background-color: #010101;}
.bg-anchor{ background-color: #2448be;}
.bg-red{ background-color: #FF0000;}
.bg-blue{ background-color: #35A0D2;}

.c-white{ color: #ffffff;}
.c-gray{ color: #E9E9E9;}
.c-black{ color: #010101;}
.c-anchor{ color: #2448be;}
.c-red{ color: #FF0000;}
.c-blue{ color: #35A0D2;}

.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{
	display: inline-block;
	text-decoration: none;
	border-radius: 100vw;
	font-size: 1.143rem;
	line-height: 1;
	font-weight: bold;
	background-color: #FF3C3C;
	color: #fff;
	padding: 1em 2.286em;
	transition: all .5s;
	border: none;
}
.link-btn a.pointer-none{
	pointer-events: none;
	background-color: #e3e3e3;
}
.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:hover{background-color: #FF8888;}

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

.thr-blur{position: relative;}
.thr-blur::before{
	position: absolute;
	display: block;
	top: 0;
	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;
}

.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: #010101;
	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: 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: #07b9ff;}

nav.drawer-innner ul.page-menu .contact{text-align: center;}
nav.drawer-innner ul.page-menu .contact a{
	display: inline-block;
	text-decoration: none;
	border-radius: 100vw;
	font-size: 1.143rem;
	line-height: 1;
	font-weight: bold;
	background-color: #FF3C3C;
	color: #fff;
	padding: 1em 2.286em;
	transition: all .5s;
	border: none;
}
nav.drawer-innner ul.page-menu .contact a::after{
	font-family: "Font awesome 6 Free";
	content:"\f054";
	font-weight: bold;
	padding-left: 1em;
}
nav.drawer-innner ul.page-menu .contact a:hover{background-color: #FF8888;}

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{
		display: block;
		position: fixed;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 4.2em;
		background-color: rgba(255,255,255,0.95);
	}
	header .header-wrap{
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
  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:last-child{	padding-right: 0;}
	header .global-nav li a{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		font-weight: bold;
		padding: .57em;
		text-decoration: none;
		color: #35A0D2;
	}
	header .global-nav li a:hover{color: #010101;}
	header .global-nav .contact{text-align: center;height: auto;}
	header .global-nav .contact a{
		display: inline-block;
		text-decoration: none;
		border-radius: 100vw;
		font-size: 1.143rem;
		line-height: 1;
		font-weight: bold;
		background-color: #FF3C3C;
		color: #fff;
		padding: .8em 1.5em;
		transition: all .5s;
		border: none;
	}
	header .global-nav .contact a:hover{background-color: #FF8888;color: #fff;}
	.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 .inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0);
	z-index: 0;
}
footer .inner::before{
	content: "";
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url("img/footer-sp.jpg");
	background-repeat: no-repeat;
	background-position:center bottom;
	background-size: cover;
}
footer .content{
	width: 100%;
	position: absolute;
	bottom: 3em;
	border-top: .5em solid #35a0d2;
	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: #35A0D2;
	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;
	padding-top: 1em;
	padding-bottom: 1em;
	z-index: 3;
}
footer p.copy{
	font-size: .8em;
	color: #FFFFFF;
	margin-top: 0;
	margin-bottom: 0;
}
footer ul.policy-list{
	font-size: .8rem;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}
footer ul.policy-list a{padding: .5em 1em;color: #fff;}
footer ul.policy-list a:hover{color: #D9D9D9;}

@media (min-width: 768px){
	footer{height: 65vw;}
	footer .inner::before{height: 65vw; background-position:center center;}
	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){
	footer,footer .inner::before{height: 26vw;}
	footer .inner::before{background-position:center center;}
}
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* TOP PAGE */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* TOP - HERO */
#top-hero{position: relative;height: 175vw;}
#top-hero h1{
	width: 100%;
	padding: 0;
	margin: 0;
}
#top-hero .wrap{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 84vw;
}
#top-hero .top-notice{
	background-color: rgba(0, 0, 0, 0.50);
	color: #fff;
	border-radius: 1.4em;
	padding: 1em;
}
#top-hero .top-notice p{margin-top: 0;font-size: .8em;}
#top-hero .top-notice p span{font-size: .9em;}
#top-hero .top-notice ul{padding-left: 0;list-style-type: none;font-size: .65em;}
#top-hero .top-cta{color: #FF3C3C;text-align: center;}
#top-hero .top-cta p{font-size: 1.2em;font-weight: 700;}

@media (min-width: 768px){
	#top-hero{height: 92vw;}
	#top-hero .wrap{
		display: flex;
		justify-content: space-between;
		top: 50vw;
	}
	#top-hero .top-notice,
	#top-hero .top-cta{width: 50%;}
	#top-hero .top-cta p{margin-top: 0;}
}
@media (min-width: 1280px){
	#top-hero{
		height: 1178px;
		background-image: url(img/top-image-pc.png);
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: cover;
		overflow: hidden;
		z-index: 0;
	}
	#top-hero:before {
		content: '';
		background: inherit;
		filter: grayscale(100%) blur(20px);
		position: absolute;
		top: -20px;
		left: -20px;
		right: -20px;
		bottom: -20px;
		z-index: -1;
	}
	#top-hero h1{
		width: 1280px;
		margin: 0 auto;
	}
	#top-hero .wrap{top: 730px;}
	#top-hero .top-notice{width: 63%;padding: 1.2em;}
	#top-hero .top-notice p{font-size: 1.05em;}
	#top-hero .top-notice ul{font-size: 1em;}
	#top-hero .top-cta{width: 35%;padding-top: 1.2em;}
}
@media (min-width: 1920px) {
	#top-hero{height: 61.35vw;}
	#top-hero h1{width: 66.66%;}
	#top-hero .wrap{top: 38vw;}
}

/* CATCH */
#catch .wrap{
	position: relative;
	height: 12em;
}
#catch p{
	position: absolute;
	width: 100%;
	top: 0;
	text-align: center;
	font-weight: 700;
	font-size: 1.6em;
}
#catch ul{
	position: absolute;
	width: 100%;
	bottom: -2em;
	padding-left: 0;
	list-style-type: none;
	display: flex;
	justify-content: space-evenly;
}
#catch ul li{
	background-color: #010101;
	border-radius: 1em;
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	line-height: 1;
	padding: 1em 0;
	width: 45%;
	position: relative;
}
#catch ul li::before{
	position: absolute;
	display: block;
	content: "";
	background-color: #010101;
	width: 1em;height: 1.5em;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	top: -1em;left: 50%;
	transform: translateX(-50%);
}
@media (min-width: 768px){
	#catch .wrap{height: 1em;}
	#catch p{top: -5em;font-size: 2em;}
	#catch ul{bottom: -3em;}
	#catch ul li{font-size: 2.2em;width: 8em;}
}
@media (min-width: 1280px){
	#catch p{font-size: 2.25em;}
	#catch ul{bottom: -4em;}
	#catch ul li{font-size: 2.5em;}
}

h2{text-align: center;}
.container.bg-blue h2{color: #fff;}

/* CTA */
.cta{padding: 2em 0;position: relative;}
.cta p{font-size: 1.5em;font-weight: 700;text-align: center;}
.cta::before{
	position: absolute;
	display: block;
	top: -1.2em;
	content: "";
	width: 100%;
	height: 1.2em;
	background: linear-gradient(180deg,rgba(68, 65, 65, 0) 0%, rgba(68, 65, 65, 0.5) 100%);
	z-index: 1;
}

/* CONTENT01 */
#content01 h2{
	position: relative;
	padding-top: 3.5em;
}
#content01 h2::before{
	position: absolute;
	display: block;
	content: "";
	width: 3em;height: 3em;
	top: 0;left: 50%;transform: translateX(-50%);
	background-image: url("img/point-icon.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
.point-item{
	position: relative;
	background-color: #fff;
	border-radius: 1em;
	margin-bottom: 2em;
	width: 100%;
	display: flex;
	align-items: stretch;
}
.point-item .number{
	background-color: #010100;
	border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	width: 3em;
	padding: .5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.point-item .text{
	width: calc(100% - 3em);
	padding: 1em;
}
.point-item .text h3,.point-item .text strong{font-weight: 700;}
.point-item .text strong{color: #f00;}
.point-item .text p{font-size: .8em;width: 80%;}
.point-item .text ul.note{font-size: .6em;width: 80%;}
.point-item .image{
	position: absolute;
	width: 20%;
	bottom: .2em;right: 0;
}
#point01 .text p{width: 100%;}
#point01 .image{bottom: -.5em;}
#point02 .image,#point05 .image{bottom: 2em;}
#point03 .text p{width: 100%;}
#point04 .image{right: .2em;}

@media (min-width: 768px){
	.point-item .number{width: 7em;padding: 1.7em;}
	.point-item .text{width: calc(100% - 7em - 10em);padding-left: 1.5em;}
	.point-item .text h3{font-size: 1.7em;}
	.point-item .image{
		position: inherit;
		width: 10em;
		padding: .5em;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.point-item .text p,.point-item .text ul.note{width: 100%;}
	.point-item .image,#point01 .image,#point02 .image,#point04 .image,#point05 .image{right: auto;bottom: auto;}
}

/* CONTENT02 */
table.compare{
	border-collapse: collapse;
	font-size: .8em;
	width: 100%;
}
table.compare th,table.compare td{border: .2em solid #35A0D2;}
table.compare th{
	background-color: #010101;
	color: #fff;
	font-weight: 700;
	text-align: center;padding: .5em;
	line-height: normal;
}
table.compare th:first-child{background-color: transparent;}
table.compare th:not(:first-child){width: 10em;}
table.compare th img{width: 4em;display: inline-block;}
table.compare td{text-align: center;line-height: normal;height: 3em;vertical-align: middle;}
table.compare td span{font-size: .8em;}
table.compare tr:nth-child(even) td{background-color: #e9e9e9;}
table.compare tr:nth-child(odd) td{background-color: #FFFFFF;}

@media (min-width: 768px){
	table.compare{ width: auto;margin: 2em auto 0;font-size: 1em;}
	table.compare th:first-child,table.compare th:not(:first-child){width: 13em;}
}


/* CONTENT03 */
table.cost{width: 100%;border-collapse: collapse;}
table.cost thead{font-weight: 700;color: #35A0D2;}
table.cost th,table.cost td{border: .1em solid #35A0D2;padding: .5em;line-height:inherit;}
table.cost span{font-size: .5em;}
table.cost th{font-weight: 400;background-color: #e9e9e9;width: 14em;}
table.cost td{font-weight: 700;font-size: 1.2em;width: 20em;}
table.cost td span{font-weight: 400;}
table.cost ~ p.note{font-size: .8em;margin-top: 0;}

#content03 ul.note{
	margin: 1em 0;
	padding: .5em 1em;
	padding-left: 2em;
	background-color: #e9e9e9;
	border-radius: .2em;
	font-size: .8em;
}
@media (min-width: 768px){
	table.cost,table.cost ~ p.note{width: 80%;margin: 0 auto;}
}
@media (min-width: 1280px){
	table.cost,table.cost ~ p.note{width: 60%;}
}

/* CONTENT04 */
@media (min-width: 768px){
	#content04 p{letter-spacing: .1em;font-size: 1.2em;}
}
@media (min-width: 1280px){
}

/* CONTENT05 */
.faq-list{padding: 1em 0;}
.faq-list dt,.faq-list dd{
	position: relative;
	left: 0;
	padding: 1.5rem 1rem;
	padding-left: 3rem;
	margin: 0;
}
.faq-list dt{font-size: 1.1em;}
.faq-list dt:first-child{border-top: .1em solid #35A0D2;}
.faq-list dd{background-color: #e9e9e9;border-bottom: .1em solid #35A0D2;}
.faq-list dt::before,.faq-list dd::before{
	position: absolute;
	display: block;
	content: "";
	left: .5rem;	top: 50%;transform: translateY(-50%);
	width: 2rem;height: 2rem;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
.faq-list dt::before{background-image: url("img/faq-Q.svg");}
.faq-list dd::before{background-image: url("img/faq-A.svg");}
@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;}