@charset "UTF-8";

/*ロゴ横にテキスト対応*/
h1.logo span {
	margin-top:6px;
}
@media screen and (max-width: 640px) {
	h1.logo span {
		margin-top:8px;
	}
}
/* ===================================
	KV
   =================================== */
@media screen and (min-width: 641px) {
	.container .kv {
		margin-top:90px;/*(localnav height)*/
	}
}
@media screen and (max-width: 640px) {
	.kv > img.cover {
		margin-top: 85px;/*(localnav height)*/
	}
}

/* ===================================
	KV下のスライドバナー
   =================================== */
.topBanner {
	padding-top:30px;
	background-color: #eee;
	padding-bottom:30px;
}
.topBanner > ul {
	width: 960px;
	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;
}
.slick-track {
	margin:auto;
}
@media screen and (min-width: 641px) {
	.topBanner > ul li img {
		width:220px;
	}
}
@media screen and (max-width: 640px) {
	.topBanner {
		padding: 20px 25px;
	}
	.topBanner > ul {
		width: auto;
	}
	.topBanner > ul li > div {
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between
	}
	.topBanner > ul li a {
		padding:0 3px;
	}
	.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: -19px;
	}
	.slick-next {
		right: -19px;
	}
	.slick-prev:before,
	.slick-next:before {
		width: 12px;
	}
	.slick-prev:before {
		margin-right: auto;
	}
	.slick-next:before {
		margin-left: auto;
	}
}
/* ===================================
	製品特長
   =================================== */
.product_features > div {
	padding:100px 0;
}
.product_features h2 {
	font-size: 60px;
	line-height: 1.5;
	font-weight: 500;
}

.product_features h3 {
	font-size: 42px;
	line-height: 1.5;
	font-weight: 500;
	margin:1em auto;
}
.product_features h4 {
	font-size: 30px;
	line-height: 1.5;
	font-weight: 500;
	margin:1em auto 0.5em;
}
.product_features p {
	font-weight:400;
	font-size:20px;
}
.product_features .t_txt {
	margin-top:2.5em;
	text-align: center;
}
.product_features .t_btn {
	text-align:center;
	margin-top:2.5em;
}
.product_features .t_btn a {
	/*background-color: rgba(170,60,95,1.00);*/
	background-color: #229635;
	color:#fff;
	padding:0.5em 1.2em 0.6em;
	border-radius:2em;
	text-decoration:none;
	font-size:16px;
	font-weight:500;
	margin-top:5px;
	display:inline-block;
	line-height:1.2;
	transition: 0.2s;
}

@media screen and (min-width: 641px) {
	.product_features .t_btn a:hover {
		background-color: #777;
	}
}
@media screen and (max-width: 640px) {
	.product_features > div {
		padding:50px 0;
	}
	.product_features h2 {
		font-weight:600;
		font-size:34px;
		margin: 0 auto 15px;
	}
	.product_features h3 {
		font-size: 30px;
		line-height: 1.5;
		font-weight: 500;
		margin:1em auto;
	}
	.product_features h4 {
		font-size: 25px;
		line-height: 1.5;
		font-weight: 500;
		margin:1em auto 0.5em;
	}
	.product_features h2 span,
	.product_features h3 span,
	.product_features h4 span {
		display: inline-block;
	}
	.product_features p{
		font-weight:500;
		font-size:16px;
	}
	.product_features .t_txt {
		margin-top:1.5em;
		text-align: left;
	}
	.product_features .t_btn {
		margin-top: 1.5em;
	}
	.content_top .t_btn {
		text-align: center;
	}
	.content_top .t_btn a {
		font-size:14px;
	}
}



/* ＜充実機能＞
------------------------------------- */
.product_features #full-function {
	background: #222222;
	color:#fff;
}

/* ＜ユーザビリティ＞
------------------------------------- */
.product_features #usability {
	background: linear-gradient(#A7ADAB, #fff);

}
#usability .mil_icon {
	margin-top:1.5em;
	display:flex;
	flex-wrap: wrap;
	width: 945px;
	padding: 0 7px 0 8px;
}
#usability .mil_icon img {
	width:95px;
	margin:0 5px 10px;
}
@media screen and (max-width: 640px) {
	#usability .mil_icon {
		margin:1.5em 1% 0 3%;
		width:auto;
		padding:0;
	}
	#usability .mil_icon img {
		width:23%;
		margin:0 2% 2% 0;
		max-width:90px
	}
}

/* ＜デザイン＞
------------------------------------- */
.product_features #design {
	/*background: linear-gradient(to bottom,#B4BCD1,#DFE4F3);*/
	background: #222222;
	color:#fff;
}

/* ＜注釈＞
------------------------------------- */
.product_features .annotation {
	/*background: #fafafa*/
}

/* ===================================
	モーダル
   =================================== */
.openModal{
	cursor: pointer;
}
.modalArea {
	display: none;
	position: fixed;
	z-index: 10000; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
}
.modalBg::before {
	content:"×";
	position: absolute;
	width:1em;
	height:1em;
	top:10px;
	right:10px;
	font-size: 40px;
	font-weight: 800;
	color: #fff;
	line-height: 1em;
	cursor: pointer;
}
.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	/*background-color: #8d2d52;*/
	background-color: #000;
	border-radius:10px;
	transform:translate(-50%,-50%);
	width:100%;
	max-width: 1080px;
	min-width:960px;
	max-height:calc(100% - 100px);
	overflow-y: scroll;
	-ms-overflow-style: none;	/* スクロールバー非表示：IE, Edge */
	scrollbar-width: none;		/* スクロールバー非表示：Firefox */
}
.modalWrapper::-webkit-scrollbar {
	display:none;
}								/* スクロールバー非表示：Chrome, Safari */
.modalWrapper > div {
	/*color:#FFF0E9;*/
	padding: 60px 0;
}
/*背景固定用*/
body.fixed {
	position: fixed;
	/*width: 100%;
	height: 100%;*/
	left: 0;
}
@media screen and (max-width: 640px) {
	.modalBg::before {
		top:5px;
		right:calc(5% - 3px);
		font-size: 30px;
	}
	.modalWrapper {
		width: 90%;
		min-width:0;
		max-height:calc(100% - 80px);
	}
	.modalWrapper > div {
		padding:30px 0;
	}
}


/* ===================================
	キャリア別情報
   =================================== */
#carrier{
	padding:60px 0;
	background: linear-gradient(to bottom,#f2f2f2 ,#fff 80px);
}
#carrier h2{
	font-size:32px;
	font-weight:500;
}
#carrier .each_carrier {
	max-width:1060px;
	margin:0 auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between
}
#carrier .each_carrier > div{
	box-sizing: border-box;
	width:480px;
	padding:30px 26px;
}
#carrier .each_carrier > div:first-child:last-child{
	margin:auto;
}
#carrier .each_carrier .carrier_logo{
	font-size:18px;
	font-weight:500;
	line-height: 25px
}
#carrier .each_carrier .carrier_logo img {
	height:25px;
}
#carrier .each_carrier .series_logo {
	margin-top: 15px;
}
#carrier .each_carrier .series_logo img {
	height:30px;
}
#carrier .each_carrier .model_name {
	font-size:20px;
	font-weight:500;
}
#carrier .each_carrier .model_image {
	margin-top: 10px;
}
#carrier .each_carrier .carrier_link {
	margin-top: 20px;
}
#carrier .each_carrier .carrier_link li{
	margin-top: 10px;
}
#carrier .each_carrier .carrier_link a {
	display: block;
	text-decoration: none;
	margin-top:10px;
	padding:15px 0;
	border-radius: 3px;
	position: relative;
	transition: 0.2s;
}
#carrier .each_carrier .carrier_link .btn_arrow a{
	border:1px solid;
}
#carrier .each_carrier .carrier_link .btn_arrow a::after{
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	border-right:1px solid;
	border-bottom: 1px solid;
	transform: rotate(-45deg);
	right:30px;
	top:calc(50% - 6px);
}
#carrier .each_carrier .carrier_link .btn_blue a{
	background-color: #0071E3;
	color:#fff;
}
#carrier .each_carrier .carrier_link .btn_blue a::after{
	content: url(/products/k-tai_d_common_v3/images/icon_newwindow.png);
	position:absolute;
	line-height: 9px;
	right:30px;
	top:calc(50% - 5px);
}
#carrier .each_carrier .carrier_bnr {
	margin-top: 20px
}
#carrier .each_carrier .carrier_bnr li{
	margin-top:10px
}
@media screen and (min-width: 641px) {
	#carrier .each_carrier .carrier_link .btn_arrow a:hover{
		background-color: #eee;
		border-color:#eee;
	}
	#carrier .each_carrier .carrier_link .btn_blue a:hover{
		background-color: #777;
	}
}
@media screen and (max-width: 640px) {
	#carrier h2{
		font-size:24px;
		font-weight:500;
	}
	#carrier .each_carrier > div{
		margin:auto;
	}
	.each_carrier .carrier_list {
		width:90%;
		margin:30px auto 0;
	}
	.each_carrier .carrier_list li{
		width:100%;
		margin-right:0;
		margin-top:20px;
	}
	.each_carrier .carrier_list li a{
		padding:20px;
	}
	.each_carrier .carrier_list li dt {
		font-size:13px
	}
	.each_carrier .carrier_list li .model_name {
		font-size:18px;
	}

	.each_carrier .carrier_list li .model_image {
		margin-top: 10px;
	}
}