@charset "UTF-8";
/* CSS Document */


/* text controll EN */
@import url(style-pj-haptics-lang-en.css);


/*///// Common /////*/


/* local reset */
p{margin: 0em;}
.rdc_img-fluid{ height: auto!important;}

/* inner link [btn] square type */
.lfd-label-inner-wrap-top-spacer {
	margin-top: 80px;
}
.lfd-label-inner-wrap {
	display: flex;
	justify-content: center;
	border: none;
	padding: 0px;
	margin-bottom: 50px;
}
.cmn-inner-link{
	padding: 12px 19px;
	border-radius: 4px;
	background-color: #767676;
	color: #fff;
	font-size: 0.8125rem!important;
	line-height: 1!important;
	transition: 0.3s;
}
.cmn-inner-link:hover{
	border-radius: 4px;
	background-color: #101319;
}

.rdc_movie-caption{
	line-height: 1.85;
}
.rdc_movie-caption.section6-color{
	color: #3B656D;
}

/* PC */
@media (min-width:641px) {

/* lapel */
.sp-lapel{display: none;}
.pc-lapel{}

/* change */
.change-disp-sp{display: none;}
.change-disp-pc{}

/* contents-wrap */
.contents-wrap{
	width: 1230px;
	margin: 0 auto;
}
.contents-full-wrap{
	width: 100%;
	margin: 0 auto;
}
.rdc_movie-caption{
	margin-top: 0;
}

}/* media max641px END */

/* SP */
@media (max-width:640px) {

/* lapel */
.sp-lapel{}
.pc-lapel{display: none;}

/* change */
.change-disp-sp{}
.change-disp-pc{display: none;}

/* contents-wrap */
.contents-wrap{width: 100%;}
.contents-full-wrap{width: 100%;}

.rdc_movie-caption{
	margin-top: 10px;
}

}/* media max640px END */



/*///// Haptics /////*/

/* caption color */
 .content01-cap-color{
 color: #0F0F0F;
 }
 .content06-cap-color{
 color: #3B656D;
 }


/*///// PC /////*/
@media (min-width:641px) {

/* unique */
/* kv */
.haptics-header-kv-wrap{
	min-width: 1230px;
	height: 400px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../haptics/images/header-pc.jpg");
	background-size: cover;

/*	min-width: 1230px;
	width: 100%;
	height: 400px;
	padding-top: calc(400 / 1600 * 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../haptics/images/header-pc.jpg");
	background-size: cover;
	position: relative; */
	/*
	
	min-width: 1230px;
	width: 100%;
	height: auto;
    padding-top: 25%;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../haptics/images/header-pc.jpg");
	background-size: cover;
	
    text-align: center;
    display: flex;
	align-items: center;
	justify-content: center;
	
	box-sizing: border-box;

	position: relative;
	overflow: hidden;
    z-index: 1;	
	*/
}
.haptics-header-kv{
	display: flex;
	align-items: center;
	justify-content: center;
    height: 100%;
/*
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	*/
	/*
	position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
	height: 100%;
    max-width: 1230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(-50%);
    */
}
.haptics-visual-copy{
	/*font-size: 1.5625rem; *//* lang */
	line-height: 1.2;
	/*letter-spacing: 0.18em; *//* lang */
	font-weight: normal;
	color: #fff;
	text-shadow: 0 0 4px rgb(0 0 0 / 80%);
}

.haptics-section-wrap-1{background: linear-gradient(to right, #67A9B4 48%,#90C3CC 52%);}
.haptics-section-wrap-2{background: linear-gradient(to right, #0F323F 48%,#2A3235 52%);}
.haptics-section-wrap-3{background: linear-gradient(to right, #D0E5E6 48%,#F8FCFD 52%);}
.haptics-section-wrap-4{background: linear-gradient(to right, #67A9B4 48%,#90C3CC 52%);}
.haptics-section-wrap-5{background: linear-gradient(to right, #D0E5E6 48%,#F8FCFD 52%);}
.haptics-section-wrap-6{background: linear-gradient(to right, #DFE2E3 48%,#F4F6F7 52%);}

.bg-slant-1,.bg-slant-2,.bg-slant-3,.bg-slant-4,.bg-slant-5,.bg-slant-6{
	background-position: 50% 0%;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
/* lang *//*
.bg-slant-1{background-image: url("../haptics/images/bg-contents1-slant-jp-pc.svg");}
.bg-slant-2{background-image: url("../haptics/images/bg-contents2-slant-jp-pc.png");}
.bg-slant-3{background-image: url("../haptics/images/bg-contents3-slant-jp-pc.svg");}
.bg-slant-4{background-image: url("../haptics/images/bg-contents4-slant-jp-pc.svg");}
.bg-slant-5{background-image: url("../haptics/images/bg-contents5-slant-jp-pc.svg");}
.bg-slant-6{background-image: url("../haptics/images/bg-contents6-slant-jp-pc.svg");}
*/
.slant-visual-spacer{padding-top: 0}

.haptics-topsection{
	width: 1026px;
	margin: 0 auto;
	padding-bottom: 10px;
}
.haptics-content01,.haptics-content02,
.haptics-content03,.haptics-content04,
.haptics-content05,.haptics-content06{
	width: 1026px;
	margin: 0 auto;
	padding-top: 88px;
	padding-bottom: 110px;
}

/* top pr */
.haptics-pr-article{
	margin: 0 auto;
	width: 782px;/*986px*/
}
.haptics-top-pr-cap{
	text-align: center;
	font-size: 1.125rem;
	/*line-height: 2; *//* lang */
	letter-spacing: 0.02rem;
	margin: 95px 0;
}

.haptics-pr-mov-caption{
	text-align: center;
}

.haptics-top-pr-title-a{
	text-align: center;
	margin: 60px 0 30px;
	/*font-size: 1.625rem; *//* lang */
	color: #3B656D;
	/*line-height: 1.15; *//* lang */
	/*letter-spacing: 0.02rem; *//* lang */
}
.haptics-top-pr-title-b{
	text-align: center;
	margin: 60px 0 30px;
	/*font-size: 1.625rem; *//* lang */
	color: #3B656D;
	/*line-height: 1.15; *//* lang */
	/*letter-spacing: 0.02rem; *//* lang */
}
.haptics-top-pr-text{
	text-align: center;
	margin-bottom: 140px;
	font-size: 0.9375rem;
	/*line-height: 2; *//* lang */
}

/* contents */
.haptics-article{
	margin: 60px auto 0;
	width: 782px;/*986px*/
}
.haptics-footer-article{
	margin: 0 auto;
	width: 782px;/*986px*/
}
/* article */
.content01-title,.content02-title,
.content03-title,.content04-title,
.content05-title,.content06-title{
	text-align: center;
	font-size: 2.25rem;
	letter-spacing: 0.05rem;
	margin-bottom: 6px;
}
.content01-title{color: #0F0F0F;}
.content02-title{color: #fff;}
.content03-title{color: #3B656D;}
.content04-title{color: #0F0F0F;}
.content05-title{color: #3B656D;}
.content06-title{color: #3B656D;}

.content01-text,.content02-text,
.content03-text,.content04-text,
.content05-text,.content06-text{
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.75;
	margin-bottom: 80px;
	/*letter-spacing: 0; *//* lang */
}
.content01-text{color: #0F0F0F;}
.content02-text{color: #fff;}
.content03-text{color: #3B656D;}
.content04-text{color: #0F0F0F;}
.content05-text{color: #3B656D;}
.content06-text{color: #3B656D;}

.content01-article,.content02-article,
.content03-article,.content04-article,
.content05-article,.content06-article,
.content-f-article{
	font-size: 0.9375rem;
	/*line-height: 2; *//* lang */
	margin-bottom: 1rem;
}
.content01-article{color: #0F0F0F;}
.content02-article{color: #fff;}
.content03-article{color: #3B656D;}
.content04-article{color: #0F0F0F;}
.content05-article{color: #3B656D;}
.content06-article{color: #3B656D;}
.content-f-article{
	color: #3D3D3D;
	text-align: center;
}
.content-footer-title{
	text-align: center;
	font-size: 1.625rem;
	line-height: 1.15;
	margin-bottom: 43px;
	color: #3B656D;
	margin-top: 72px; 
}

.haptics-content-f{
	margin: 0;
	padding-bottom: 60px;
}
.haptics-content-f img{
	width: 100%;
	min-width: 1230px;
	height: auto;
}

.haptics-rows-wrap{
	margin: 0 auto;
	width: 986px;
	display: flex;
	justify-content: space-between;
}
.haptics-mono-wrap{
	margin: 0 auto;
	width: 986px;
}
.haptics-column-wrap{
	margin: 76px auto 0;
	width: 782px;
	display: flex;
	flex-direction: column;
}

.content02-cell p{color: #fff;}
.content03-cell p{color: #3B656D;}
.content04-cell p{color: #0F0F0F;}
.content05-cell p{color: #3B656D;}

.content05-cell{margin-bottom: 76px;}
.content05-1-cell{}
.content05-2-cell{}
.content05-3-cell{}

.figure-cell-caption-type-a{
	font-size: 0.875rem;
	line-height: 1.85;
}
.figure-cell-caption-type-b{
	font-size: 0.75rem;
	line-height: 1.85;
}

/* related link */
.content02-rerated{color: #fff;}
.content04-rerated{color: #0F0F0F;}
.content05-rerated{color: #3B656D;}
.content06-rerated{color: #3B656D;}

.related-link-title{
	font-size: 0.9375rem;
	line-height: 2;
	margin-bottom: 6px;
	margin-top: 32px;
}
ul.related-linklist{
	list-style: none;
	padding-left: inherit;
	font-size: 0.9375rem;
	line-height: 1.66;
	margin-top: 0;/* reset */
}
ul.related-linklist li{
	margin-bottom: 12px;
}
a.related-link {
	text-decoration: underline;
	transition: all 0.3s;
	opacity: 1;
}
a.related-link:hover{
	text-decoration: none;
/* 	opacity: 0.6; */
}



}/* media max641px END */



/*///// SP /////*/
@media (max-width:640px) {

/* unique */
/* kv */
.haptics-header-kv-wrap{
	width: 100%;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../haptics/images/header-sp.jpg");
	background-size: cover;
	position: relative;
}
.haptics-header-kv{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.haptics-visual-copy{
	font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.03rem;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 0 4px rgb(0 0 0 / 80%);
	text-align: center;
}

.haptics-section-wrap-1{background: linear-gradient(to right, #67A9B4 48%,#90C3CC 52%);}
.haptics-section-wrap-2{background: linear-gradient(to right, #0F323F 48%,#2A3235 52%);}
.haptics-section-wrap-3{background: linear-gradient(to right, #D0E5E6 48%,#F8FCFD 52%);}
.haptics-section-wrap-4{background: linear-gradient(to right, #67A9B4 48%,#90C3CC 52%);}
.haptics-section-wrap-5{background: linear-gradient(to right, #D0E5E6 48%,#F8FCFD 52%);}
.haptics-section-wrap-6{background: linear-gradient(to right, #DFE2E3 48%,#F4F6F7 52%);}

.bg-slant-1,.bg-slant-2,.bg-slant-3,.bg-slant-4,.bg-slant-5,.bg-slant-6{
	background-position: 50% 0%;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
/* lang *//*
.bg-slant-1{background-image: url("../haptics/images/bg-contents1-slant-jp-sp.svg");}
.bg-slant-2{background-image: url("../haptics/images/bg-contents2-slant-jp-sp.jpg");}
.bg-slant-3{background-image: url("../haptics/images/bg-contents3-slant-jp-sp.svg");}
.bg-slant-4{background-image: url("../haptics/images/bg-contents4-slant-jp-sp.svg");}
.bg-slant-5{background-image: url("../haptics/images/bg-contents5-slant-jp-sp.svg");}
.bg-slant-6{background-image: url("../haptics/images/bg-contents6-slant-jp-sp.svg");}
*/
.slant-visual-spacer{padding-top: 130px;}

/* top section */
.haptics-topsection{
	margin: 0 auto 72px;
	/*padding-bottom: 10px;*/
}

.haptics-content01,.haptics-content02,
.haptics-content03,.haptics-content04,
.haptics-content05,.haptics-content06{
	/*width: 100%;*/
	margin: 0 30px;
	padding-top: 55px;
	padding-bottom: 60px;
}

/* top pr */
.haptics-pr-article{
	margin: 0 30px;
}
.haptics-pr-article img{
	width: 100%;
}
.haptics-top-pr-cap{
	text-align: center;
	font-size: 0.9375rem;
	/*line-height: 2; *//* lang */
	letter-spacing: 0.02rem;
	margin: 45px 0;
}

.haptics-pr-mov-caption{
	text-align: left;
	margin-bottom: 40px;
}

.haptics-top-pr-title-a{
	text-align: center;
	margin: 40px 0 28px;
	font-size: 1.25rem;
	color: #3B656D;
	line-height: 1.5;
	letter-spacing: 0.02rem;
}
.haptics-top-pr-title-b{
	text-align: center;
	margin: 40px 0 28px;
	font-size: 1.25rem;
	color: #3B656D;
	line-height: 1.5;
	letter-spacing: 0.02rem;
}
.haptics-top-pr-text{
	text-align: left;
	margin-bottom: 60px;
	font-size: 0.9375rem;
	/*line-height: 1.86; *//* lang */
}

/* contents */
.haptics-article{
	margin: 10px auto 0;
	/*width: 782px;986px*/
}
.haptics-footer-article{
	margin: 0 30px;
	/*width: 782px;986px*/
}
/* article */
.content01-title,.content02-title,
.content03-title,.content04-title,
.content05-title,.content06-title{
	text-align: center;
	font-size: 1.625rem;
	letter-spacing: 0.05rem;
	margin-bottom: 6px;
}
.content01-title{color: #0F0F0F;}
.content02-title{color: #fff;}
.content03-title{color: #3B656D;}
.content04-title{color: #0F0F0F;}
.content05-title{color: #3B656D;}
.content06-title{color: #3B656D;}

.content01-text,.content02-text,
.content03-text,.content04-text,
.content05-text,.content06-text{
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 45px;
	/*letter-spacing: 0; *//* lang */
}
.content01-text{color: #0F0F0F;}
.content02-text{color: #fff;}
.content03-text{color: #3B656D;}
.content04-text{color: #0F0F0F;}
.content05-text{color: #3B656D;}
.content06-text{color: #3B656D;}

.content01-article,.content02-article,
.content03-article,.content04-article,
.content05-article,.content06-article,
.content-f-article{
	font-size: 0.9375rem;
	/*line-height: 1.86; *//* lang */
	margin-bottom: 1rem;
}
.content01-article{color: #0F0F0F;}
.content02-article{color: #fff;}
.content03-article{color: #3B656D;}
.content04-article{color: #0F0F0F;}
.content05-article{color: #3B656D;}
.content06-article{color: #3B656D;}
.content-f-article{
	color: #3D3D3D;
	text-align: left;
}
.content-footer-title{
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: 0.02rem;
	margin-bottom: 28px;
	color: #3B656D;
	margin-top: 30px;
}

.haptics-content-f{
	margin: 0;
	padding-bottom: 40px;
}
.haptics-content-f img{
	width: 100%;
	/*min-width: 1230px;*/
	height: auto;
}

.haptics-rows-wrap{
	margin: 0 auto;
	/*width: 986px;*/
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.haptics-mono-wrap{
	margin: 0 auto 30px;
	/*width: 986px;*/
}
.haptics-column-wrap{
	margin: 54px auto 0;
	/*width: 782px;*/
	display: flex;
	flex-direction: column;
}

.content02-cell p{color: #fff;}
.content03-cell p{color: #3B656D;}
.content04-cell p{color: #0F0F0F;}
.content05-cell p{color: #3B656D;}

.content02-cell img{width: 100%; height: auto;}
.content03-cell img{width: 100%; height: auto;}
.content04-cell img{width: 100%; height: auto;}
.content05-cell img{width: 100%; height: auto;}

.content05-cell{}
.content05-1-cell{margin-bottom: 50px;}
.content05-2-cell{margin-bottom: 50px;}
.content05-3-cell{margin-bottom: 15px;}

.figure-cell-caption-type-a{
	font-size: 0.75rem;
	line-height: 1.66;
	margin-bottom: 22px;
}
.figure-cell-caption-type-b{
	font-size: 0.625rem;
	line-height: 1.4;
}

/* related link */
.content02-rerated{color: #fff;}
.content04-rerated{color: #0F0F0F;}
.content05-rerated{color: #3B656D;}
.content06-rerated{color: #3B656D;}

.related-link-title{
	font-size: 0.9375rem;
	line-height: 2;
	margin-bottom: 6px;
	margin-top: 32px;
}
ul.related-linklist{
	list-style: none;
	padding-left: inherit;
	font-size: 0.9375rem;
	line-height: 1.66;
	margin-top: 0;/* reset */
}
ul.related-linklist li{
	margin-bottom: 12px;
}
a.related-link {
	text-decoration: underline;
	transition: all 0.3s;
	opacity: 1;
}
a.related-link:hover{
	text-decoration: none;
	opacity: 0.6;
}

.caption-sp-spacer{
margin: 0 30px;
}

}/* media max640px END */



