@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond&display=swap');

/* ===================================
	 KVエリア
   =================================== */

@media screen and (min-width: 641px) {
	.breadcrumb-nav {
		top: 0px;
		z-index: 10;
		margin-top:55px; 
		position: absolute;
	} 
}
@media screen and (max-width: 640px) {
	.container .kv > img.cover {
		margin-top:0;
	}
	.container .kv {
		margin-top:0px;
	}
}
/* 横から表示のオンライン訴求 */

.online_slidein a {
	text-decoration: none;
	background: radial-gradient(ellipse at 50% -30%, rgba(32, 39, 135,0.70) 0%,rgb(32,39,135) 100%);
	transition: 0.4s transform ease-in;
	font-weight: 500;
	color: #fff;
}
.online_slidein a::after {
	content:"";
	width:8px;
	height:8px;
	border-top: 1px solid;
	border-right:1px solid;
	transform:rotate(45deg);
	position: absolute;
	right:30px;
	top:45%;
}
.online_slidein a.view {
	transform: translateX(0)
}
@media screen and (min-width: 641px) {
	.online_slidein {
		position: absolute;
		display: inline-block;
		top:0;
		right:0;
		width:380px;
		z-index: 10;
	}
	.online_slidein a {
		display: block;
		font-size:16px;
		padding:0.5em 1em;
		transform: translateX(100%);
	}
	.online_slidein a:hover {
		background:#1E2685;
	}
}

@media screen and (max-width: 640px) {
	.online_slidein { 
		background-color: #EAEFF4
	}
	.online_slidein a {
		display:block;
		width:100%;
		transform: translatex(-100%);
		padding:0.5em 0;
		position: relative;
		line-height: 1.3;
	}
}
/* ===================================
	 KV下のスライドバナー
   =================================== */
/*（バナー1件対応）*/
.topBanner {
	padding-top:30px;
	background-color: #eee;
	padding-bottom:30px;
}

.topBanner > ul {
	width: 876px;
	margin:0 auto;
}
.topBanner > ul li {
	text-align: center
}
.topBanner > ul li a {
	padding:0 5px;
	display: block;
}
.slick-prev, .slick-next {
	width: 22px;
	height: 48px;
}
.slick-prev {
	left: -38px;
}
.slick-next {
	right: -36px;
}
.slick-prev:before,
.slick-next:before {
	content: "";
	display: block;
	width: 22px;
	height: 48px;	
}
.slick-prev:before{
	background: url(/products/k-tai_d_common_v3/images/btn_slide_left.png) no-repeat left 50%;
}
.slick-next:before {
	background: url(/products/k-tai_d_common_v3/images/btn_slide_right.png) no-repeat right 50%;
}
.slick-dots{
	bottom: -37px;
}
.slick-dots li{
	width: 10px;
	height: 10px;
}
.slick-dots li button:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius:20px;
	background-color:#808080;
}
.slick-dots li.slick-active button:before {
	opacity:1;
}

@media screen and (max-width: 640px) {
	.topBanner {
		padding: 20px 30px;
	}
	.topBanner > ul {
		width: auto;
	}
	.topBanner > ul li a {
		padding:0;
	}
	.slick-dotted.slick-slider {
		margin-bottom: 10px;
	}
	.slick-dots{
		bottom: -25px;
	}
	.slick-dots li{
		width: 8px;
	}
	.slick-dots li button:before {
		width: 8px;
		height: 8px;		
	}
	.multiple-item img {width:100%}
	.slick-prev {
		left: -22px;
	}
	.slick-next {
		right: -22px;
	}
	.slick-prev:before,
	.slick-next:before {
		width: 12px;
	}
	.slick-prev:before {
	margin-right: auto;
	}
	.slick-next:before {
	margin-left: auto;
	}
}

/* ===================================
	POINT
   =================================== */

.t_point > div {
	padding:60px 0 80px;
}

.t_point h3 {
	font-size: 3.74rem;
	font-weight: 500;
}
.t_point h4 {
	font-weight: 500;
	margin:1.5em auto 0.5em;
}
.t_point p {
	font-weight:400;
	font-size:20px;
	line-height: 1.5
}

@media screen and (max-width: 640px) {
	.t_point > div {
		padding:35px 0 40px;
	}
	.t_point h3 {
		font-weight:600;
		font-size:34px;
		line-height: 1.3;
		margin: 0 auto;
	}
	.t_point h4 {
		font-size:24px;
	}
}

/* スライド */
.hp_slide {
	width:560px; /* スライド画像のサイズに合わせる */
	margin:3em auto 30px;
}
.hp_slide  .slick-prev,
.hp_slide  .slick-next {
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
}
.hp_slide  .slick-prev {
	left: -65px;
}
.hp_slide  .slick-next {
	right: -65px;
}
.hp_slide .slick-prev:before,
.hp_slide .slick-next:before {
	background-image:none;
	width: 18px;
	height: 18px;
	transform: rotate(45deg);
	position: absolute;
	top: 13px;
	border-width:6px !important;
}
.hp_slide .slick-prev:before {
	border-left: solid #5ec2fd;
	border-bottom: solid #5ec2fd;
	left: 16px;
}
.hp_slide .slick-next:before {
	border-right: solid #5ec2fd;
	border-top: solid #5ec2fd;
	right: 16px;
}
.hp_slide .slick-dots li button:before {
	background-color: #fff;
	opacity:1
}
.hp_slide .slick-dots li.slick-active button:before {
	background-color: #5ec2fd;
}
@media screen and (max-width: 640px) {
	.hp_slide {
		width:auto;
		margin:3em 3% 36px;
	}
	.hp_slide li img {
		width:100%;
	}
	.hp_slide  .slick-prev,
	.hp_slide  .slick-next {
		top:calc(100% + 20px);
		width: 30px;
		height: 30px;
		background: #fff;
		border-radius: 50%;
		z-index: 10;
	}
	.hp_slide  .slick-prev {
		left: 0px;
	}
	.hp_slide  .slick-next {
		right: 0px;
	}
	.hp_slide .slick-prev:before,
	.hp_slide .slick-next:before {
		width: 10px;
		height: 10px;
		top: 8px;
		border-width:4px !important;
	}
	.hp_slide .slick-prev:before {
		left: 10px;
	}
	.hp_slide .slick-next:before {
		right: 10px;
	}
	.hp_slide .slick-dots {
		bottom: -31px;
		z-index: 5;
	}
}

/*リンクボタン*/
.todocomo, .tohome5g {
	text-align: center !important;
}
.todocomo > span {
	color:#fff;
	text-decoration: none;
	padding:15px 30px;
	background: rgb(204,0,51);
	border-radius: 10px;
	position: relative;
	display: inline-block;
}

.todocomo a,
.tohome5g a{
	color:#fff;
	text-decoration: none;
	padding:15px 40px 15px 30px;
	background: rgb(204,0,51);
	border-radius: 10px;
	transition: 0.2s;
	position: relative;
	display: inline-block;
}
.todocomo a::after{
	content:"";
	position: absolute;
	width:10px;
	height:10px;
	right:20px;
	top:calc(50% - 5px);
	background:url("/products/k-tai_d_common_v3/images/icon_newwindow.png") no-repeat;
}
.tohome5g a::after{
	content:"";
	position: absolute;
	right:22px;
	top:calc(50% - 4px);
	display:block;
	width:8px;
	height:8px;
	border-right:1px solid;
	border-bottom:1px solid;
	transform: rotate(-45deg);
}
.todocomo a {
	background: rgb(204,0,51);
}
.tohome5g a {
	background:rgb(40,43,46);
}
@media screen and (min-width: 641px) {
	.todocomo a:hover ,
	.tohome5g a:hover {
		opacity: 0.8;
	}
}
@media screen and (max-width: 640px) {
	.t_point .todocomo, .t_point .tohome5g {
		width: 85%;
	}
	.todocomo > span,
	.todocomo a,
	.tohome5g a{
		font-size: 15px
	}
}

/* 赤*/
.point_red{
	background-color:#CC0033;
	color:#fff;
	max-width:960px;
	margin: auto;
	padding:1em 0;

}
.point_red h3{
	font-size:28px;
}
.point_red .yellow {
	color:rgb(255,510,0)
}
@media screen and (max-width: 640px) {
	.point_red {
		max-width:960px;
		margin: auto 3%;
		padding:1em ;
		font-size:20px;
	}
	.point_red h3{
		font-size:20px;
		font-weight:400;
	}
}

/* ===================================
	 SPEC SUPPORT
   =================================== */

.content_top>.section{
	padding-top:70px;
	padding-bottom:70px;
}
.content_top>.section>h2{
	width:95%;
	margin:0 auto 80px;
	padding-bottom:10px;
	border-bottom: 1px solid;
}
.content_top>.section>h2 span {
	font-family: 'Cormorant Garamond','Noto Serif JP', serif;
	letter-spacing: 1em;
	padding-left: 1em;
	font-size:33px;
	transform:scaleY(1.1);
	display: inline-block;
}

@media screen and (max-width: 640px) {
	.content_top>.section{
		padding-top:35px;
		padding-bottom:50px;
	}
	.content_top>.section>h2{
		margin-bottom:50px;
		max-width:100%;
		padding-bottom:7px;
	}
	.content_top>.section>h2 span {
		font-size:28px;
		letter-spacing: 0.4em;
		padding-left: 0.4em;
	}
}
.t_spec_table {
	width:800px;
	margin:0 auto;
}
.t_spec_table th, 
.t_spec_table td {
	border:1px solid #999;
	padding:0.5em 1em;
	text-align: left;
	vertical-align: top
}
.t_spec_table th{
	font-weight:500;
	background-color: #eee;
	font-size:18px;
	width:35%;
}
.t_spec_table td{
	font-weight:400;
	font-size:16px
}
@media screen and (max-width: 640px) {
	.t_spec_table {
		width:94%;
	}
	.t_spec_table th{
		font-size:15px;
	}
	.t_spec_table td{
		font-weight:400;
		font-size:14px
	}
}

.content_top .t_support .support_list {
	max-width:1200px;
	min-width:960px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	/*flex-wrap:wrap;*/
	align-items:stretch;
}
.content_top .t_support .support_list li {
	width:300px;
}
.content_top .t_support .support_list li:first-child:nth-last-child(2),
.content_top .t_support .support_list li:first-child:nth-last-child(2) ~ li {
	width:600px;
}
.content_top .t_support .support_list li a {
	display:block;
	background-color:#FFF;
	padding-top:180px;
	text-decoration:none;
	border-radius:8px;
	font-size:26px;
	background-repeat:no-repeat;
	background-position:center 3px;
	transition-property: background-image;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
	background-size:160px;
}
.content_top .t_support .support_list li.s_support a {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_support.png)
}
.content_top .t_support .support_list li.s_support a:hover {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_support_hover.png)
}
.content_top .t_support .support_list li.s_faq a {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_faq.png)
}
.content_top .t_support .support_list li.s_faq a:hover {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_faq_hover.png)
}
.content_top .t_support .support_list li.s_accessory a {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_accessory.png)
}
.content_top .t_support .support_list li.s_accessory a:hover {
	background-image:url(/products/k-tai_d_common_v3/images/ico_index_support_accessory_hover.png)
}

.content_top .t_support .support_list li a span {
	padding:5px 10px;
	transition-property: border;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}
.content_top .t_support .support_list li a:hover span {
	border-bottom:3px solid #585858;
}

@media screen and (max-width: 640px) {
	.content_top .t_support .support_list {
		max-width:none;
		min-width:0;
	}
	.content_top .t_support .support_list li {
		width:33.33%;
	}
	.content_top .t_support .support_list li:first-child:nth-last-child(2),
	.content_top .t_support .support_list li:first-child:nth-last-child(2) ~ li {
		width:50%;
	}
	.content_top .t_support .support_list li a {
		padding:100px 5px 5px 5px;
		background-size:80px;
		font-size:14px;
	}
	.content_top .t_support .support_list li a span {
		padding:0 3px 3px;
	}
	.content_top .t_support .support_list li a span img {
		height:20px;
	}
}