@charset "utf-8";
/* ------------------------------------------------------------------------ */

/*  キービジュアル

/* ------------------------------------------------------------------------ */
.caseHeader{
	background: #F3F3F3;
}
.caseHeader #crumb{
	position: inherit;
	max-width: 1320px;
	width: calc(100% - 32px);
	margin: 0 auto;
	padding-top: 10px;
}
.caseHeader .inner{
	align-items: flex-start;
	max-width: 1208px;
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 60px 0;
}

.caseHeader .inner > .ttlBox{
	width: 50%;
	text-align: left;
}
.caseHeader .ttlBox .ttl{
	margin-bottom: 16px;
}
.caseHeader .ttl .genericTerm{
	font-size: 1.8rem;
}
.caseHeader .ttl .productName{
	font-size: 4rem;
}
.caseHeader .ttlBox .lead{
	font-size: 1.8rem;
}
.caseHeader .btnBox{
	justify-content: flex-start;
}
.caseHeader .btnBox li{
	max-width: 240px;
	width: 50%;
}
.caseHeader .btnBox li + li{
	margin-left: 20px;
}

.caseHeader .inner > .rightBox{
    position: relative;
    max-width: 580px;
    width: 48%;
    aspect-ratio: 16 / 9;
}
.caseHeader .inner > .rightBox img{
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
}
.caseHeader .inner > .rightBox.movie{
	position: relative;
	margin:0 auto;
}
.caseHeader .inner > .rightBox.movie video{
	width: 100%;
}
.caseHeader .inner > .rightBox.movie .play-btn{
	object-fit: none;
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	cursor: pointer;
}
.caseHeader .inner > .rightBox.movie .play-btn.playActive{display:none;}

.caseHeader .btnBasic{
	padding: 17px 40px 18.44px 20px;
	line-height: 1.286;
	max-width: 360px;
	font-size: 1.6rem;
	margin-top: 32px;
	text-align: left;
}

@media screen and (max-width: 768px){
	.caseHeader .inner{
		display: block;
		padding: 32px 0 40px;
	}
	.caseHeader .inner > .ttlBox{
		width: 100%;
	}
	.caseHeader .ttl .genericTerm{
		font-size: 1.4rem;
	}
	.caseHeader .ttl .productName {
		font-size: 2.8rem;
	}
	.caseHeader .ttlBox .lead{
		font-size: 1.4rem;
	}
	.caseHeader .inner > .rightBox,
	.caseHeader .inner > .rightBox.movie{
		margin: 20px auto 0;
		width: 100%;
	}
	.caseHeader .btnBox{
		margin-top: 34px;
	}
	.caseHeader .btnBasic{
		margin-top: 0;
        padding: 14px 40px 16px 20px;
		font-size: 1.4rem;
	}
	.caseHeader .btnBox li{
		margin: 0 auto;
		max-width: 280px;
		width: 100%;
	}
	.caseHeader .btnBox li + li{
		margin-top: 16px;
		margin-left: auto;
	}
}
@media screen and (max-width: 767px){
}


/* ------------------------------------------------------------------------ */

/*  セクションコンテナ（共通）

/* ------------------------------------------------------------------------ */
#sec_detail .top-hd{
	text-align: left;
	font-size: 2.8rem;
	margin-bottom: 40px;
}
#sec_detail .top-hd .en{
	font-size: 1.4rem;
}
.txtContainer.flex{
	align-items: flex-start;
}

.txtContainer .txtBox{
	text-align: left;
	line-height: 2;
	font-size: 1.8rem;
	font-weight: 400;
}
.txtContainer .txtBox a:hover{
    opacity: 0.5;
}
.txtContainer .txtBox a,
.txtContainer .txtBox a:visited,
.txtContainer .txtBox a:active{
    color: #A2000D;
    transition: 0.5s;
}
.txtContainer.flex .txtBox{
	width: calc(55% - 40px);
	margin-right: 40px;
}
.txtContainer.flex figure{
	max-width: 400px;
	width: 45%;
}
#sec_detail .hd03{
	font-size: 2.4rem;
	margin-bottom: 40px;
	align-items: center;
}

#mainBlock{
	overflow: inherit;
}

#sec_detail > .inner.flex{
	align-items: flex-start;
	position: relative;
}


#detailWrap {
	overflow: hidden;
	width: 100%;
}

#detailWrap > .container + .container{
	padding-top: 120px;
}

#detailWrap .container .txtContainer + .hd03 {
	margin-top: 78px;
}

#detailWrap > .container p + p{
	margin-top: 24px;
}
#detailWrap > .container p.suptxt + p.suptxt{
	margin-top: 4px;
}
#detailWrap > .container .scrollWrap + p.suptxt{
	margin-top: 16px;
}


#detailWrap .checkList > li{
	font-size: 2rem;
	font-weight: 700;
	position: relative;
	padding-left: calc(1em + 12.7px);
	text-align: left;
}
#detailWrap .checkList > li::before{
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("/common/img/icon/icon_check.svg") no-repeat center / contain;
	position: absolute;
	top: 3px;
	left: 0;
}
#detailWrap .checkList > li + li{
	margin-top: 17.7px;
}

.container .flexBox{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.container .flexBox li{
	max-width: 280px;
	width: calc(100% / 3 - 21px);
}
#detailWrap .scrollWrap {
	overflow-x: scroll;
}
#detailWrap .scrollWrap + .scrollWrap {
	margin-top: 24px;
}
#detailWrap table{
	border-collapse		: separate;
	*border-collapse	: collapse;
	border-spacing		: 0;
	empty-cells			: show;
	border-top			: 1px solid #D5D5D5;
	border-right		: 1px solid #C1C1C1;
	border-bottom		: none;
	border-left			: none;
	margin				: 0 auto;
	width				: 100%;
	table-layout: fixed;
	min-width: 904px;
}
	#detailWrap table th,
	#detailWrap table td {
		border-top		: none;
		border-bottom	: 1px solid #C1C1C1;
		border-left	: 1px solid #C1C1C1;
		font-size	: 1.6rem;
		font-weight		: normal;
		padding			: 10px;
		text-align	: center;
	}

	#detailWrap table th{ 
		margin			: 0; 
		background		: #F3F3F3;
	}


#sec_about{
	margin-top: -120px;
	padding-top: 120px;
}
#sec_about .txtBox p,
#sec_feature .txtBox p{
	font-weight: 400;
}
#sec_solution .checkList{
	background: #F3F3F3;
	padding: 24px;
}


@media screen and (max-width: 880px){
	#mainBlock{
		overflow: hidden;
	}
	#detailWrap {
		overflow: inherit;
	}
	.txtContainer.flex{
		display: block;
	}
	.txtContainer.flex figure{
		width: 100%;
		margin: 32px auto 0;
	}
	.txtContainer .txtBox{
		font-size: 1.6rem;
		font-weight: 500;
	}
	.txtContainer.flex .txtBox{
		width: 100%;
		margin: 0 auto 32px;
	}
	.txtContainer .txtBox .btnBasic{
		margin-top: 24px;
	}
	#sec_detail > .inner.flex{
		display: block;
	}
	#sec_detail .top-hd{
		text-align: center;
	}
	#detailWrap > .container + .container{
		padding-top: 80px;
	}
	#detailWrap .checkList > li{
		font-size: 1.8rem;
	}
	#detailWrap .checkList > li::before{
		width: 20px;
		height: 20px;
	}
	
	#sec_solution .checkList{
		padding: 40px 16px;
		margin: 0 -16px;
	}
	#detailWrap .checkList > li + li{
		margin-top: 32px;
	}
	#sec_detail .hd03{
		font-size: 2rem;
		margin-bottom: 24px;
	}
	#detailWrap .container .txtContainer + .hd03 {
		margin-top: 48px;
	}
	#detailWrap > .container p + p{
		margin-top: 16px;
	}
	#detailWrap > .container .scrollWrap + p.suptxt,
	#detailWrap > .container p.suptxt + p.suptxt{
		font-size: 14px;
	}
	#detailWrap table th,
	#detailWrap table td {
		font-size	: 1.4rem;
	}
}


/* ------------------------------------------------------------------------ */

/*  サイドナビ

/* ------------------------------------------------------------------------ */
#sec_detail #sideNav{
	text-align: left;
	width: 240px;
	margin-left: 64px;
	flex-shrink: 0;
	position: sticky;
	top: 94px;
	right: 0;
}

#sec_detail #sideNav p{
	font-weight: 700;
	padding-bottom: 16px;
	margin-bottom: 16px;
	position: relative;
}
#sec_detail #sideNav p::before{
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #C1C1C1;
	position: absolute;
	bottom: 0;
	left: 0;
}
#sec_detail #sideNav ul li + li{
	margin-top: 16px;
}
#sec_detail #sideNav ul li a{
	color: #A2A2A2;
	padding-left: 1em;
	text-decoration: none;
	position: relative;
}
#sec_detail #sideNav ul li a::before{
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	background: #A2A2A2;
	border-radius: 50%;
	position: absolute;
	top: 0.7em;
	left: 0;
}
#sec_detail #sideNav ul li a:hover,
#sec_detail #sideNav ul li.current a{
	color: #A2000D;
}
#sec_detail #sideNav ul li.current a{
	font-weight: 700;
}
#sec_detail #sideNav ul li.current a::before,
#sec_detail #sideNav ul li a:hover::before{
	background: #A2000D;
}
#sec_detail #sideNav ul li.current a::before{
	width: 6px;
	height: 6px;
}

@media screen and (max-width: 1024px){
	#sec_detail #sideNav{
		margin-left: 24px;
	}
}
@media screen and (max-width: 1023px){
	#sec_detail #sideNav{
		display: none;
	}
}

/* ------------------------------------------------------------------------ */

/*  ユースケース

/* ------------------------------------------------------------------------ */

#sec_usecase p{
	font-size: 2.4rem;
}
#sec_usecase p + figure{
	margin-top: 16.6px;
}
#sec_usecase ul{
	margin: 60px -16px 0;
	justify-content: flex-start;
}
#sec_usecase li{
	margin: 0 16px;
	max-width: inherit;
	width: calc(100% / 3);
}
#sec_usecase li figure{
	position: relative;
	aspect-ratio: 7 / 4;
}
#sec_usecase li figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#sec_usecase li figure figcaption{
	display: block;
	position: absolute;
	top: -20px;
	left: 10px;
	width: 48px;
	height: 48px;
	background: #A2000D;
	font-size: 2rem;
	font-family: "Titillium Web", sans-serif;
	color: #fff;
	line-height: 1;
}
#sec_usecase figcaption .en{
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}
body {
	counter-reset: usecase_number 0;
}
#sec_usecase figcaption .num:before{
	counter-increment: usecase_number;
	content: counter(usecase_number, decimal-leading-zero);
}
#sec_usecase ul li p{
	font-size: 1.8rem;
	text-align: left;
	margin-top: 16px;
}

#sec_specification .productName{
	text-align: left;
	font-size: 2rem;
	margin-bottom: 8px;
}

#contactUs{
	padding: 40px 20px;
	margin-top: 120px;
	border: solid 1px #DBDBDB;
}
#contactUs p{
	font-size: 2rem;
	font-weight: 700;
}
#contactUs .btnBox{
	margin-top: 24px;
	max-width: 500px;
	margin: 24px auto 0;
	justify-content: center;
}

#contactUs .btnBox li{
	width: calc(100% / 2 - 10px);
}
#contactUs .btnBox li + li{
	margin-left: 20px;
}
#contactUs .btnBox .btnBasic{
	text-align: left;
	padding: 0 35px 0 20px;
}

#sec_faq dl{
	border-top: solid 1px #C1C1C1;
}
#sec_faq .accordionContainer dl + dl{
	margin-top: 0;
}
#sec_faq .accordionContainer{
	margin: 0 auto;
	max-width: inherit;
}
#sec_faq .accordionContainer dl:last-child{
	border-bottom: solid 1px #C1C1C1;
}

@media screen and (max-width: 880px){
	#sec_usecase ul{
		display: block;
		margin: 60px auto 0;
	}
	#sec_usecase.container .flexBox li{
		max-width: inherit;
		width: 100%;
		margin: 0 auto;
	}
	#sec_usecase.container .flexBox li + li{
		margin-top: 68px;
	}
	#sec_usecase li figure img{
		width: 100%;
		height: 100%;
	}
	#sec_usecase ul li p{
		font-size: 1.6rem;
	}
	#sec_specification .productName{
		font-size: 1.8rem;
	}
	
	#contactUs{
		margin-top: 80px;
	}
	#contactUs .btnBox{
		display: block;
	}
	#contactUs .btnBox li{
		display: flex;
		width: 100%;
	}
	#contactUs .btnBox li + li{
		margin-left: 0;
		margin-top: 16px;
	}
}
@media screen and (max-width: 767px){
	#sec_faq .accordionContainer dl dt{
		padding: 16px 36px 16px 16px;
	}
	#sec_faq .accordionContainer dl dd{
		padding: 0 16px 20px;
	}
}


/* ------------------------------------------------------------------------ */

/*  導入事例

/* ------------------------------------------------------------------------ */
#sec_casestudy .lead{
	text-align: left;
	font-size: 2rem;
	font-weight: 700;
}

#sec_casestudy .mvBox {
    margin-bottom: 40px;
}

#sec_casestudy .mvBox iframe {
    aspect-ratio: 16 / 9;
}

#sec_casestudy .makerBox {
	background: #F3F3F3;
	padding: 24px;
	margin-top: 16px;
}

#sec_casestudy .makerBox .txtBox{
	flex-shrink: 0;
	margin-right: 56px;
	text-align: left;
	font-size: 1.8rem;
	font-weight: 700;
	color: #A2000D;
}

#sec_casestudy .makerBox .txtBox .fnt-titillium{
	font-size: 6rem;
}
#sec_casestudy .makerBox .txtBox .unit{
	font-size: 2.4rem;
	margin-left: 10px;
}
#sec_casestudy .makerBox .txtBox .date{
	color: #A2A2A2;
	font-size: 1.4rem;
	margin-top: 0;
}

#sec_casestudy .makerBox .logoBox_wrap{
	width: calc(100% - 224px);
}
#sec_casestudy .makerBox.w100 .logoBox_wrap{
	width: 100%;
}
#sec_casestudy .makerBox .logoBox_wrap h3{
	text-align: left;
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 8px;
}
#sec_casestudy .makerBox .logoBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0;
}
#sec_casestudy .makerBox.w100 .logoBox{
	width: 100%;
}
#sec_casestudy .makerBox .logoBox li{
	margin: 0;
    width: calc((100% - 48px) / 4);
	border-radius: 6px;
    overflow: hidden;
}
#sec_casestudy .makerBox .logoBox li:nth-child(n+5){
	margin-top: 16px;
}
#sec_casestudy .makerBox .logoBox li img{
    overflow: hidden;
    aspect-ratio: 200 / 72;
}
#sec_casestudy .makerBox .logoBox li:not(:nth-of-type(4n)){
	margin-right: 16px;
}
#sec_casestudy .makerBox .logoBox li img{
	width: 100%;
}

#sec_casestudy .caseList {
	margin-top: 40px;
	margin-left: -32px;
	justify-content: flex-start;
}
#sec_casestudy .caseList li{
	margin-left: 32px;
}
#sec_casestudy .caseList li a{
	text-align: left;
	text-decoration: none;
	color: #000;
}
#sec_casestudy .caseList li a figure{
    overflow: hidden;
    aspect-ratio: 280 / 160;
}
#sec_casestudy .caseList li a .companyName{
	color: #131313;
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 16px;
}
#sec_casestudy .caseList li a .companyName span{
    background: linear-gradient(#2D2D2D, #2D2D2D) 0 100% / 0 1px no-repeat;
    transition: background .4s;
}
#sec_casestudy .caseList li a:hover .companyName span{
    background-size: 100% 1px;
}
#sec_casestudy .caseList li a .txt{
	font-weight: 400;
	margin-top: 16px;
}
#sec_casestudy .btnBasic{
	margin-top: 40px;
}

@media screen and (max-width: 880px){
}
@media screen and (max-width: 768px){
	#sec_casestudy ul{
		display: block;
		margin: 48px -16px 0;
	}
	#sec_casestudy ul li{
		margin: 0 12px;
		max-width: inherit;
	}
	#sec_casestudy ul li .txtBox h3{
		font-size: 1.6rem;
	}
	#sec_casestudy .caseList li a,
	#sec_casestudy ul li img{
		width: 100%;
	}
	#sec_casestudy .caseList{
		margin: 48px -16px 0;
	}
	#sec_casestudy .caseList li{
		margin: 0 12px;
	}
}
@media screen and (max-width: 767px){
	#sec_casestudy .makerBox,
	#sec_casestudy .makerBox.w100{
		display: block;
		margin-top: 41px;
		padding: 24px 16px;
	}
	#sec_casestudy .makerBox .txtBox{
		text-align: center;
		margin: 0 auto;
	}
	#sec_casestudy .makerBox .logoBox_wrap{
		width: 100%;
		margin: 30px auto 0;
	}
	#sec_casestudy .makerBox.w100 .logoBox_wrap{
		margin-top: 0;
	}
	#sec_casestudy .makerBox .logoBox_wrap h3{
		margin-bottom: 16px;
	}
	#sec_casestudy .makerBox .logoBox{
		justify-content: space-between;
		width: 100%;
	}
	#sec_casestudy .makerBox.w100 .logoBox{
		margin: 0 auto;
	}
	#sec_casestudy .makerBox .logoBox li{
        width: calc((100% - 16px) / 2);
		margin: 0;
	}
	#sec_casestudy .makerBox .logoBox li:nth-child(n+5){
		margin-top: 0;
	}
	#sec_casestudy .makerBox .logoBox li:nth-child(n+3) {
		margin-top: 17px;
    }
	#sec_casestudy .makerBox .logoBox li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
}


/* ------------------------------------------------------------------------ */

/*  関連商品

/* ------------------------------------------------------------------------ */
#sec_relatedproducts .lead{
	font-size: 1.8rem;
	font-weight: 400;
	text-align: left;
}
#sec_relatedproducts .list > li{
	margin-top: 40px;
}
#sec_relatedproducts .list > li.no_link,
#sec_relatedproducts .list > li > a{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
    text-decoration: none;
    color: #131313;
}
#sec_relatedproducts .list > li > a[target="_blank"] .productName::after{
    content: url('../../common/img/icon/icon_blank.svg');
    vertical-align: text-top;
	margin-left: 9px;
}
#sec_relatedproducts .list > li figure{
	width: 300px;
	flex-shrink: 0;
	margin-right: 24px;
}
#sec_relatedproducts .list > li .txtBox{
	text-align: left;
}
#sec_relatedproducts .genericTerm{
	font-size: 1.2rem;
}
#sec_relatedproducts .productName{
	font-size: 1.8rem;
}
#sec_relatedproducts .list > li a .productName {
    display: inline;
    position: relative;
    background: linear-gradient(#2D2D2D, #2D2D2D) 0 100% / 0 1px no-repeat;
    transition: background .4s;
}
#sec_relatedproducts .list > li a:hover .productName {
    background-size: 100% 1px;
}
#sec_relatedproducts .productName .detailLink{
	color: #131313;
	font-size: 1.6rem;
	margin-left: 24px;
}
#sec_relatedproducts .productName .detailLink:hover{
	text-decoration: none;
}
#sec_relatedproducts .list > li p{
	font-weight: 400;
	margin-top: 16px;
}
#detailWrap #sec_relatedproducts .checkList{
	margin-top: 16px;
}
#detailWrap #sec_relatedproducts .checkList > li{
	font-size: 1.6rem;
	padding-left: calc(1em + 9.7px);
	color: #A2000D;
}
#detailWrap #sec_relatedproducts .checkList > li::before{
	width: 16.31px;
	height: 16.31px;
	top: 5px;
}
#detailWrap #sec_relatedproducts .checkList > li + li{
	margin-top: 4px;
}

@media screen and (max-width: 767px){
	#sec_relatedproducts .lead{
		font-size: 1.6rem;
	}
	#sec_relatedproducts .list > li.no_link,
	#sec_relatedproducts .list > li > a{
		display: block;
	}
	#sec_relatedproducts .list > li + li{
		margin-top: 48px;
	}
	#sec_relatedproducts .list > li p {
		font-size: 1.6rem;
		margin-top: 8px;
	}
	#sec_relatedproducts .list > li figure{
		margin: 0 auto;
		width: 100%;
	}
	#sec_relatedproducts .list > li figure img{
		width: 100%;
	}
	#sec_relatedproducts .list > li .txtBox,
	#detailWrap #sec_relatedproducts .checkList{
		margin-top: 8px;
	}
}