@charset "utf-8";

@import url("https://use.typekit.net/vdx2acl.css"); 


@media only screen and (max-width:991px) {}
@media only screen and (max-width:767px) {}


/*************************************************

 wrapper & page common

*************************************************/
#wrapper {
	overflow: hidden;
	color: #000;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	text-align: left;
}
.wrap {
	width: calc(100% - 60px);
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
}

.serif {
	font-family: 'Noto Serif JP', serif;
}
.en {
	font-family: canto, serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.07em;
}
@media only screen and (max-width:767px) {
	#wrapper {
		font-size: 14px;
	}
}

/* cursor
-----------------------------------------*/
#cursor {
	position: fixed;
	background: rgba(224, 210, 182, 0.8);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	transition: all 0.1s;
}
#cursor.active {
	transform: scale(1.4);
}
.mobile #cursor {
	display: none !important;
}
@media only screen and (max-width:767px) {
	#cursor {
		display: none !important;
	}
}


/* pageRoundTitle
-----------------------------------------*/
.pageRoundTitle {
	overflow: hidden;
	position: relative;
	height: 80px;
	margin-bottom: 40px;
	line-height: 1;
}
.pageRoundTitle:before,
.pageRoundTitle:after {
	position: absolute;
	display: block;
	content: '';
	top: 50%;
	left: 50%;
	background-color: #E0D2B6;
	z-index: 1;
}
.pageRoundTitle:before {
	width: 200vw;
	height: 1px;
	background-color: #BEA36D;
	transform: translateX(-50%);
}
.pageRoundTitle:after {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transform: translate(-50%,-50%);
}
.pageRoundTitle span {
	position: absolute;
	top: 50%;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	transform: translateY(-36%);
	letter-spacing: 0.07em;
	z-index: 2;
}
@media only screen and (max-width:767px) {
	.pageRoundTitle {
		height: 62px;
		margin-bottom: 15px;
	}
	.pageRoundTitle:after {
		width: 62px;
		height: 62px;
	}
	.pageRoundTitle span {
		font-size: 22px;
	}
}

/* pageTitle01
-----------------------------------------*/
.pageTitle01 {
	margin-bottom: 60px;
	font-size: 45px;
	text-align: center;
}
@media only screen and (max-width:767px) {
	.pageTitle01 {
		margin-bottom: 35px;
		font-size: 22px;
	}
}



/*************************************************

 header

*************************************************/
#header {
	position: relative;
}

/* loadLogo
-----------------------------------------*/
#header .loadLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 214px;
	line-height: 0;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: opacity 1.5s;
	z-index: 10;
}
#header.start .loadLogo {
	opacity: 1;
}
#header.start.start02 .loadLogo {
	opacity: 0;
}
@media only screen and (max-width:767px) {
	#header .loadLogo {
		display: none;
	}
}


/* siteLogo
-----------------------------------------*/
#header .siteLogo {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 180px;
	line-height: 0;
	opacity: 0;
	transition: opacity 1.5s;
	z-index: 5;
}
#header .siteLogo a {
	display: block;
}
@media only screen and (min-width:768px) {
	#header.start03 .siteLogo {
		opacity: 1;
	}
}
@media only screen and (max-width:767px) {
	#header .siteLogo {
		top: auto;
		bottom: 19.697%;
		left: 50%;
		width: 80px;
		margin-left: -40px;
	}
	#header .siteLogo a {
		display: block;
	}
	#header.start .siteLogo {
		opacity: 1;
	}
}

/* gNav
-----------------------------------------*/
#header .gNav {
	position: absolute;
	top: 50px;
	right: 50px;
	z-index: 5;
}
#header .gNav ul {
	display: flex;
}
#header .gNav li + li {
	margin-left: 20px;
}
#header .gNav li a {
	display: block;
	font-size: 16px;
	text-decoration: none;
	border-bottom: transparent solid 1px;
	transition: border-color 0.3s;
}
#header .gNav li a > span {
	display: block;
	overflow: hidden;
}
#header .gNav li a > span span {
	display: block;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.5s,transform 1s;
}
#header .gNav li:nth-child(2) a > span span {transition-delay: 0.1s;}
#header .gNav li:nth-child(3) a > span span {transition-delay: 0.2s;}
#header .gNav li:nth-child(4) a > span span {transition-delay: 0.3s;}
@media only screen and (min-width:768px) {
	#header.start03 .gNav li a > span span {
		opacity: 1;
		transform: translateY(0);
	}
	.noT #header.start03 .gNav li a:hover {
		border-color: #fff;
	}
}
@media only screen and (max-width:767px) {
	#header .gNav {
		top: auto;
		bottom: 6.818%;
		right: 0;
		width: 100%;
	}
	#header .gNav ul {
		flex-wrap: wrap;
		justify-content: center;
	}
	#header .gNav li,
	#header .gNav li + li {
		margin: 5px 6px 0;
	}
	#header .gNav li a {
		font-size: 11px;
	}
	#header.start02 .gNav li a > span span {
		opacity: 1;
		transform: translateY(0);
	}
}


/* mainVisual
-----------------------------------------*/
#header .mainVisual {
	overflow: hidden;
	position: relative;
	line-height: 0;
}
#header .mainVisual img {
	width: 100%;
}
#header .mainVisual:before {
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}
#header.start02 .mainVisual:before {
	animation: img-wrap 1.3s 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@media only screen and (min-width:768px) {
	#header.start02 .mainVisual:before {
		animation: img-wrap 1.3s 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
	}
}
@media only screen and (max-width:767px) {
	#header.start .mainVisual:before {
		animation: img-wrap 1.3s 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
	}
}
@keyframes img-wrap {
	100% {
		transform: translateY(-100%);
	}
}


/*************************************************

 movieArea

*************************************************/
#movieArea {
	padding: 100px 0 170px;
}
#movieArea .title {
	margin-bottom: 90px;
	font-size: 35px;
	text-align: center;
	letter-spacing: 0.1em;
}
#movieArea .inMovie {
	position: relative;
	width: calc(100% - 60px);
	max-width: 760px;
	margin: 0 auto;
	line-height: 0;
}
#movieArea .inMovie div {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
#movieArea .inMovie iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width:767px) {
	#movieArea {
		padding: 45px 0 30px;
	}
	#movieArea .title {
		margin-bottom: 40px;
		font-size: 17px;
	}
}



/*************************************************

 allSectopnWarap

*************************************************/
.allSectopnWarap {
	position: relative;
}
.allSectopnWarap:before {
	position: absolute;
	bottom: 0;
	left: calc(50% - 550px);
	display: block;
	content: '';
	width: 1px;
	height: calc(100%);
	background-color: #BEA36D;
	z-index: 100;
}
.allSectopnWarap .allLabes p {
	position: fixed;
	top: 50%;
	left: calc(50% - 570px);
	color: #BEA36D;
	transform: rotate(-90deg) translateX(-50%);
	transform-origin: left top;
	text-align: center;
	line-height: 1;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.3s;
}
.allSectopnWarap .allLabes p.on {
	opacity: 1;
}


/*************************************************

 point

*************************************************/
#point {
	padding: 50px 0 130px;
}
#point .flexBox {
	display: flex;
	align-items: center;
	max-width: 1366px;
	margin: 0 auto;
}
#point .flexBox + .flexBox {
	margin-top: 170px;
}
#point .flexBox .image {
	width: 56.223%;
}
#point .flexBox .image figure {
	overflow: hidden;
	position: relative;
}
#point .flexBox .image figure:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: '';
	background-color: #EAEAEA;
	transform: translateY(0);
	transition: transform 1s 0.1s cubic-bezier(0.19, 1, 0.22, 1);
}
#point .flexBox .image.is-View figure:after {
	transform: translateY(-100%);
}
#point .flexBox .texts {
	box-sizing: border-box;
	width: 43.777%;
	padding: 0 30px;
}
#point .flexBox .texts .textInner {
	box-sizing: border-box;
	max-width: 320px;
	margin: 0 auto;
}
#point .flexBox .texts .label {
	line-height: 0;
}
#point .flexBox .texts .ttl {
	margin: 80px 0 30px;
	font-size: 25px;
	font-weight: 500;
}
#point .flexBox .texts .ttl span{
	font-size: 14px;
	font-weight: 400;
	margin-left: 20px;
}
#point .flexBox .texts p {
	font-size: 15px;
	font-weight: 300;
	line-height: 2;
}
#point .flexBox.inversion .image {
	order: 2;
}
#point .flexBox.inversion .image img {
	width: 100%;
}
#point .flexBox.inversion .texts {
	max-width: 480px;
	margin-left: auto;
	order: 1;
}
@media only screen and (max-width:767px) {
	#point {
		padding: 30px 0;
	}
	#point .flexBox {
		display: block;
		margin: 0 30px;
	}
	#point .flexBox + .flexBox {
		margin-top: 60px;
	}
	#point .flexBox .image {
		width: auto;
	}
	#point .flexBox .texts {
		width: auto;
		padding: 20px 0 0;
	}
	#point .flexBox .texts .textInner {
		max-width: none;
	}
	#point .flexBox .texts .label img {
		height: 75px;
	}
	#point .flexBox .texts .ttl {
		margin: -25px 0 5px 68px;
		font-size: 17px;
	}
	#point .flexBox .texts p {
		margin-left: 68px;
		font-size: 13px;
		line-height: 1.7;
	}
	#point .flexBox.inversion .texts {
		max-width: none;
	}
}



/*************************************************

 function

*************************************************/
#function {
	padding: 50px 0 130px;
}
@media only screen and (max-width:767px) {
	#function {
		padding: 30px 0;
	}
}

/* functionList
-----------------------------------------*/
#function .functionList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1030px;
	margin-left: auto;
}
#function .functionList > li {
	width: 45.631%;
	margin-bottom: 40px;
}
#function .functionList .num {
	margin: 25px 0 14px;
	color: #BEA36D;
	font-size: 25px;
	border-bottom: #BEA36D solid 1px;
	line-height: 1;
}
#function .functionList .ttl {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}
#function .functionList .txt {
	margin-top: 10px;
	font-weight: 300;
	font-size: 90%;
}
#function .functionList .slick-dots {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 15px;
}
#function .functionList .slick-dots li {
	margin: 0 0 0 5px;
}
#function .functionList .slick-dots button {
	overflow: hidden;
	display: block;
	width: 20px;
	height: 1px;
	margin: 0;
	padding: 0;
	background: #D8D8D8;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#function .functionList .slick-dots .slick-active button {
	height: 2px;
	background-color: #C3AA66;
}
@media only screen and (max-width:767px) {
	#function .functionList {
		display: block;
	}
	#function .functionList > li {
		width: auto;
		margin-bottom: 0;
	}
	#function .functionList > li + li {
		margin-top: 40px;
	}
	#function .functionList .num {
		margin: 10px 0 10px;
		font-size: 23px;
	}
	#function .functionList .ttl {
		margin-bottom: 7px;
		font-size: 18px;
	}
	#function .functionList .txt {
		margin-top: 5px;
		font-size: 12px;
	}
}



/*************************************************

 specifiction

*************************************************/
#specifiction {
	padding: 50px 0 130px;
}
@media only screen and (max-width:767px) {
	#specifiction {
		padding: 30px 0;
	}
}


/* specArea
-----------------------------------------*/
#specifiction .specArea {
	max-width: 985px;
	margin-left: auto;
}
#specifiction .specArea .line {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 25px 0;
}
#specifiction .specArea .line .absTxt01 {
	position: absolute;
	top: 90px;
	left: 45px;
	font-size: 11px;
	font-weight: 300;
}
#specifiction .specArea .line:nth-child(even) {
	background-color: #F5F5F5;
}
#specifiction .specArea .inHead {
	box-sizing: border-box;
	width: 200px;
	padding-left: 45px;
	font-size: 17px;
	font-weight: 500;
}
#specifiction .specArea .detail {
	width: calc(100% / 3 - 66.667px);
	font-size: 14px;
	font-weight: 300;
}
#specifiction .specArea .detail * {
	font-size: 14px;
	font-weight: 300;
}


/******* IE対応 2022.6.2 *****************************/
@media all and (-ms-high-contrast: none){

	#specifiction .specArea .detail {
		width: auto;
		font-size: 14px;
		font-weight: 300;
	}
	#specifiction .specArea .line.pcView .inHead,
	#specifiction .specArea .line:nth-of-type(3) .inHead,
	#specifiction .specArea .line:nth-of-type(4) .inHead,
	#specifiction .specArea .line:nth-of-type(5) .inHead,
	#specifiction .specArea .line:nth-of-type(6) .inHead,
	#specifiction .specArea .line:nth-of-type(8) .inHead,
	#specifiction .specArea .line:nth-of-type(10) .inHead {
		width: 22%;
	}
	#specifiction .specArea .line.pcView .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(3) .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(4) .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(5) .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(6) .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(8) .detail:nth-of-type(2),
	#specifiction .specArea .line:nth-of-type(10) .detail:nth-of-type(2) {
		width: 25%;
	}
	#specifiction .specArea .line.pcView .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(3) .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(4) .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(5) .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(6) .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(8) .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(10) .detail:nth-of-type(3) {
		width: 25%;
	}
	#specifiction .specArea .line.pcView .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(3) .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(4) .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(5) .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(6) .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(8) .detail:nth-of-type(4),
	#specifiction .specArea .line:nth-of-type(10) .detail:nth-of-type(4) {
		width: 28%;
	}
	
	/* 光束値 */
	#specifiction .specArea .line:nth-of-type(11) .inHead                {width: 22%;}
	#specifiction .specArea .line:nth-of-type(11) .detail:nth-of-type(2) {width: 25%;}
	#specifiction .specArea .line:nth-of-type(11) .detail:nth-of-type(4) {width: 25%;}
	#specifiction .specArea .line:nth-of-type(11) .detail:nth-of-type(6) {width: 28%;}
	
	/* 色温度、配光角度 */
	#specifiction .specArea .line.spTabArea .inHead {width: 22%;}
	#specifiction .specArea .line.spTabArea .detail:nth-of-type(2),
	#specifiction .specArea .line.spTabArea .detail:nth-of-type(3),
	#specifiction .specArea .line:nth-of-type(7) .detail:nth-of-type(4) {
		width: 25%;
	}
	#specifiction .specArea .line:nth-of-type(9) .detail:nth-of-type(4) {
		width: 28%;
	}
	#specifiction .specArea .line:nth-of-type(7) .detail:nth-of-type(6) {
		width: 28%;
	}
}
/******* IE対応 2022.6.2 *****************************/

#specifiction .specArea .title span {
	position: relative;
	display: inline-block;
	padding-right: 35px;
	font-size: 20px;
	font-weight: 500;
}
#specifiction .specArea .title span:before {
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	background: url(../images/arw.svg) no-repeat center center / contain;
	transform: translateY(-50%);
}
#specifiction .specArea .tabBtn {
	display: flex;
	max-width: 210px;
	height: 35px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	background-color: #F5F5F5;
	border-radius: 20px;
	transition: opacity 0.2s;
	cursor: pointer;
}
#specifiction .specArea .tabBtn:hover {
	opacity: 0.5;
}
#specifiction .specArea .spTabBtns {
	display: none;
}
#specifiction .specArea .sp_on3 .spBtn {
	display: none;
}
@media only screen and (max-width:767px) {
	#specifiction .specArea {
		width: auto;
		max-width: none;
	}
	#specifiction .specArea .line,
	#specifiction .specArea .line:nth-child(even) {
		display: block;
		padding: 0;
		background-color: transparent;
	}
	#specifiction .specArea .line + .line {
		margin-top: 30px;
	}
	#specifiction .specArea .line .absTxt01 {
		top: 20px;
		left: 20px;
	}
	#specifiction .specArea .line:nth-child(odd) {
		background-color: transparent;
	}
	#specifiction .specArea .inHead {
		width: 100%;
		margin-bottom: 10px;
		padding: 0 0 7px;
		border-bottom: 1px solid #B1B1B1;
		font-size: 15px;
	}
	#specifiction .specArea .detail {
		width: auto;
		display: flex;
		font-size: 12px;
		line-height: 1.6;
	}
	#specifiction .specArea .detail + .detail {
		margin-top: 7px;
	}
	#specifiction .specArea .detail * {
		font-size: 12px;
	}
	#specifiction .specArea .detail > * {
		width: calc(100% - 95px);
	}
	#specifiction .specArea .detail .spTtl {
		width: 95px;
		margin-bottom: 3px;
		font-size: 13px;
		font-weight: 400;
	}
	#specifiction .specArea .spTabBtns {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	#specifiction .specArea .spTabBtns  > * {
		width: 47%;
	}
	#specifiction .specArea .tabBtn {
		height: 25px;
		/* max-width: 135px; */
		max-width: none;
	}
	#specifiction .specArea .sp_on3 {
		align-items: center;
		margin-top: 7px;
	}
	#specifiction .specArea .sp_on3 > * {
		width: calc(100% - 200px);
	}
	#specifiction .specArea .sp_on3 .spBtn {
		display: block;
	}
	#specifiction .specArea .sp_on3 .pc {
		display: none;
	}
	#specifiction .specArea .haikou .w_size{
		width: 160px;
	}
	#specifiction .specArea .haikou .w_size_m{
		display: none;
		}
}

/* tabTarget
-----------------------------------------*/
#specifiction .specArea .tabTarget {
	width: 100%;
}
#specifiction .specArea .tabTarget .spTabbodys {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	height: 920px;
	overflow: scroll;
	padding: 0 0 40px;
}
#specifiction .specArea .tabTarget .spTabbodys:before {
	display: block;
	content: '';
	width: 200px;
}
#specifiction .specArea .tabTarget .spTabbodys .box {
	box-sizing: border-box;
	width: calc(100% / 3 - 66.667px);
}
#specifiction .specArea .tabTarget .spTabbodys .box .pcView{
	font-size: 14px;
    font-weight: 300;
	padding-top: 20px;
}
#specifiction .specArea .tabTarget .spTabbodys .box figure img {
	max-width: 84%;
}
#specifiction .specArea .spClose {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	line-height: 0;
	cursor: pointer;
}
@media only screen and (min-width:768px) {
	#specifiction .specArea .tabTarget .spTabbodys .box {
		display: block !important;
	}
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .tabTarget .spTabbodys {
		display: block;
		padding: 0;
	}
	#specifiction .specArea .tabTarget .spTabbodys:before {
		display: none;
	}
	#specifiction .specArea .tabTarget .spTabbodys .box {
		position: relative;
		width: auto;
		/* display: none; */
		margin-top: 26px;
		padding: 45px 30px 30px 30px;
		background-color: #F5F5F5;
	}

	#specifiction .specArea .tabTarget .spTabbodys .box:before {
		position: absolute;
		bottom: 100%;
		display: block;
		content: '';
		border-style: solid;
		border-color: transparent transparent #F5F5F5 transparent;
		border-width: 0 12px 10px 12px;
	}
	#specifiction .specArea .tabTarget .spTabbodys .box:nth-child(1):before {
		left: 20%;
		transform: translateX(-50%);
	}
	#specifiction .specArea .tabTarget .spTabbodys .box:nth-child(2):before {
		right: 20%;
		transform: translateX(50%);
	}
	#specifiction .specArea .tabTarget .spTabbodys .box figure {
		margin-left: 0;
		text-align: center;
	}
	#specifiction .specArea .tabTarget .spTabbodys .box figure img {
		max-width: 100%;
	}
	#specifiction .specArea .tabTarget .spTabbodys .tabBody {
		display: none;
	}
}


@media only screen and (min-width:768px) {
	#specifiction .specArea .tabBtnTarget {
		display: none !important;
	}
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .tabBtnTarget {
		display: none;
		padding: 5px 0 20px;
	}
	#specifiction .specArea .tabBtnTarget .inWrap {
		position: relative;
		margin-top: 15px;
		padding: 20px;
		background: #F5F5F5;
	}
	#specifiction .specArea .tabBtnTarget .inWrap:before {
		position: absolute;
		bottom: 100%;
		right: 40px;
		display: block;
		content: '';
		border-style: solid;
		border-color: transparent transparent #F5F5F5 transparent;
		border-width: 0 12px 10px 12px;
	}
	#specifiction .specArea .tabBtnTarget .absTxt01 {
		position: static;
		margin-top: 20px;
	}
}



/* photoLine01
-----------------------------------------*/
#specifiction .specArea .photoLine01 figure {
	position: relative;
	display: inline-block;
	transform: translateX(-30%);
}
#specifiction .specArea .photoLine01 figure {
	max-width: 84%;
}
#specifiction .specArea .photoLine01 figcaption {
	position: absolute;
	left: 100%;
	bottom: 10px;
	width: 100%;
	font-size: 11px;
	font-weight: 300;
}
@media only screen and (max-width:991px) {
	#specifiction .specArea .photoLine01 figcaption {
		position: static;
		text-align: right;
	}
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .photoLine01 {
		display: block;
	}
	#specifiction .specArea .photoLine01 .detail {
		width: 100%;
	}
	#specifiction .specArea .photoLine01 .detail + .detail {
		margin-top: 30px;
	}
	#specifiction .specArea .photoLine01 figure {
		display: block;
		text-align: center;
		transform: translateX(0);
	}
	#specifiction .specArea .photoLine01 figure {
		max-width: 100%;
		width: 100%;
	}
}


/* tabTarget01
-----------------------------------------*/
#specifiction .specArea .tabTarget01 .spTabbodys .box figure {
	margin-left: -30px;
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .tabTarget .spTabbodys .box figure {
		margin-left: 0;
	}
}


/* tabTarget03
-----------------------------------------*/
#specifiction .specArea .tabTarget03 {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20px 0 0;
}
#specifiction .specArea .tabTarget03:before {
	display: block;
	content: '';
	width: 234px;
}
#specifiction .specArea .tabTarget03 .box {
	box-sizing: border-box;
	width: calc(50% - 117px);
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .tabTarget03 {
		padding: 10px 0 0;
	}
	#specifiction .specArea .tabTarget03:before {
		display: none;
	}
	#specifiction .specArea .tabTarget03 .box {
		width: 47%;
	}
}

/* tabTarget03Body
-----------------------------------------*/
#specifiction .specArea .tabTarget03Body {
	margin-left: 90px;
}
#specifiction .specArea .inTableStyle01 {
	position: relative;
	box-sizing: border-box;
	max-width: 510px;
	margin-top: 30px;
	padding: 40px 30px;
	background-color: #F5F5F5;
}
#specifiction .specArea .tabTarget03Body .tabBody {
	display: none;
}
#specifiction .specArea .inTableStyle01:nth-child(2) {
	margin-left: auto;
	margin-right: auto;
}
#specifiction .specArea .inTableStyle01:nth-child(3) {
	margin-left: auto;
}
#specifiction .specArea .inTableStyle01:before {
	position: absolute;
	bottom: 100%;
	left: 50%;
	display: block;
	content: '';
	border-style: solid;
	border-color: transparent transparent #F5F5F5 transparent;
	border-width: 0 12px 10px 12px;
	transform: translateX(-50%);
}
#specifiction .specArea .inTableStyle01 table {
	width: 100%;
}
#specifiction .specArea .inTableStyle01 th,
#specifiction .specArea .inTableStyle01 td {
	padding: 5px 0;
	text-align: center;
	border-bottom: #707070 solid 1px;
	vertical-align: middle;
}
#specifiction .specArea .inTableStyle01 th,
#specifiction .specArea .inTableStyle01 thead td {
	font-size: 17px;
	font-weight: 400;
}
#specifiction .specArea .inTableStyle01 th {
	border-right: #707070 solid 1px;
	line-height: 1.1;
}
#specifiction .specArea .inTableStyle01 td {
	font-size: 15px;
	font-weight: 300;
}
#specifiction .specArea .inTableStyle01 .wh {
	border-bottom: none;
	background-color: #fff;
}
#specifiction .specArea .inTableStyle01 .last,
#specifiction .specArea .inTableStyle01 .last * {
	border-bottom: none;
}
#specifiction .specArea .inTableStyle01 thead th,
#specifiction .specArea .inTableStyle01 thead td {
	padding: 15px 0;
}
@media only screen and (min-width:768px) {
	#specifiction .specArea .inTableStyle01:nth-child(1):before {
		left: 35%;
	}
	#specifiction .specArea .inTableStyle01:nth-child(3):before {
		left: 67%;
	}
}
@media only screen and (max-width:767px) {
	#specifiction .specArea .tabTarget03Body {
		margin-left: 0;
	}
	#specifiction .specArea .inTableStyle01 {
		position: relative;
		max-width: none;
		margin-top: 0;
		padding: 20px 0 0;
	}
	/* #specifiction .specArea .inTableStyle01:nth-child(1):before {
		left: 20%;
		transform: translateX(-50%);
	}
	#specifiction .specArea .inTableStyle01:nth-child(2):before {
		left: auto;
		right: 20%;
		transform: translateX(50%);
	} */
	#specifiction .specArea .inTableStyle01 .spClose {
		position: absolute;
		top: -10px;
		right: 0;
		width: 30px;
		line-height: 0;
		cursor: pointer;
	}
	#specifiction .specArea .inTableStyle01 th,
	#specifiction .specArea .inTableStyle01 thead td {
		font-size: 14px;
	}
	#specifiction .specArea .inTableStyle01 td {
		font-size: 11px;
	}
}




/*************************************************

 usecase

*************************************************/
#usecase {
	padding-top: 50px;
}
@media only screen and (max-width:767px) {
	#usecase {
		padding-top: 30px;
	}
}

#usecase .usecaseList {
	max-width: 770px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#usecase .usecaseList li {
	display: flex;
	width: 42.857%;
}

/******* IE対応 2022.6.2 *****************************/

@media all and (-ms-high-contrast: none){
	#usecase .usecaseList li {
		display: block;
		width: 42.857%;
	}
}
/******* IE対応 2022.6.2 *****************************/

#usecase .usecaseList li a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-shadow: 0px 6px 16px -6px rgba(0,0,0,0.3);
}
#usecase .usecaseList li img {
	width: 100%;
}
#usecase .usecaseList li .texts {
	display: table;
	width: 100%;
	height: 115px;
	text-align: center;
}
#usecase .usecaseList li .cell {
	display: table-cell;
	vertical-align: middle;
}
#usecase .usecaseList li .ttl {
	font-size: 18px;
	line-height: 1.6;
}
#usecase .usecaseList li .ttl02 {
	margin-top: 5px;
	font-size: 15px;
	font-weight: 300;
}
#usecase .usecaseList li .ttl02 span {
	display: inline-block;
	border-bottom: #E0CE9C solid 1px;
}
@media only screen and (max-width:767px) {
	#usecase .usecaseList li {
		width: 47.273%;
	}
	#usecase .usecaseList li .texts {
		height: 60px;
	}
	#usecase .usecaseList li .ttl {
		font-size: 14px;
	}
	#usecase .usecaseList li .ttl02 {
		margin-top: 3px;
		font-size: 10px;
	}
}

#usecase .inBtn {
	display: flex;
	justify-content: center;
	margin: 100px 30px 0;
}
#usecase .inBtn a {
	position: relative;
	display: block;
	width: 100%;
	max-width: 340px;
	text-align: center;
	background-color: #E0D2B6;
}
#usecase .inBtn span {
	position: relative;
	display: inline-block;
	font-size: 17px;
	padding: 10px 110px 10px 20px;
	text-decoration: none;
}
#usecase .inBtn span:before,
#usecase .inBtn span:after {
	position: absolute;
	top: 50%;
	right: 20px;
	display: block;
	content: '';
	height: 1px;
	margin-top: 5px;
	transform-origin: right bottom;
	background-color: #000;
}
#usecase .inBtn span:before {
	width: 75px;
}
#usecase .inBtn span:after {
	width: 10px;
	transform: rotate(45deg);
}
@media only screen and (max-width:767px) {
	#usecase .inBtn {
		margin: 50px 30px 0;
	}
	#usecase .inBtn span {
		font-size: 13px;
		padding: 10px 90px 10px 0;
	}
	#usecase .inBtn span:before,
	#usecase .inBtn span:after {
		right: 10px;
		margin-top: 2px;
	}
	#usecase .inBtn span:before {
		width: 70px;
	}
}


#usecase .bigslide {
	width: calc(100% - 60px);
	max-width: 900px;
	margin: 80px auto 0;
	background-color: #fff;
	box-shadow: 0px 6px 16px -6px rgba(0,0,0,0.3);
}
#usecase .bigslide .imageSlide {
	position: relative;
}
#usecase .bigslide .textSlide .item p {
	padding: 20px;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
}
	#usecase .bigslide .textSlide .item .ttl{
		text-align: center;
		padding-bottom: 0;
		font-weight: 500;	
	}
#usecase .bigslide .slick-arrow {
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	width: 100px;
	background: url(../images/modal_arw.svg) no-repeat center center / 30px auto;
	cursor: pointer;
	z-index: 10;
}
#usecase .bigslide .prev-arrow {
	left: 0;
}
#usecase .bigslide .next-arrow {
	right: 0;
	transform: rotate(180deg);
}
@media only screen and (max-width:767px) {
	#usecase .bigslide {
		margin-top: 35px;
	}
	#usecase .bigslide .textSlide .item p {
		padding: 10px 15px 15px;
		font-size: 12px;
		text-align: left;
	}

	#usecase .bigslide .slick-arrow {
		width: 30px;
		background-size: 12px auto;
	}
}



#cookie_agreement{display:none;box-sizing:border-box;position:fixed;z-index:10000000000;bottom:0;left:0;padding:6.6666666667vw 0;border-top:1px solid rgba(140,152,162,.3);width:100%;background:#fff}
@media (min-width:1024px){#cookie_agreement{padding:min(1.7361111111vw,25px) min(18.3333333333vw,264px) min(1.5277777778vw,22px) min(1.7361111111vw,25px)}}
#cookie_agreement>a{display:block;right:4vw;margin:2.6666666667vw auto 0;padding:2.1333333333vw 0 1.6vw;width:85.3333333333vw;background:#67717a;text-align:center;text-decoration:none;color:#fff;font-size:2.9333333333vw}
@media (min-width:1024px){#cookie_agreement>a{position:absolute;top:50%;right:min(1.6666666667vw,24px);margin:0;padding:min(.6944444444vw,10px) 0 min(.5555555556vw,8px);width:min(15.2777777778vw,220px);transition:.3s;transform:translateY(-50%);font-size:min(.8333333333vw,12px)}}
@media (min-width:1024px){#cookie_agreement>a:hover{opacity:.7}}
#cookie_agreement p{font-size:2.6666666667vw;line-height:1.5em}
@media (max-width:1023.98px){#cookie_agreement p{margin:0 auto;width:85.3333333333vw}}
@media (min-width:1024px){#cookie_agreement p{font-size:min(.8333333333vw,12px)}}
#cookie_agreement p.text{margin-top:1.0666666667vw;font-size:2.6666666667vw}
@media (min-width:1024px){#cookie_agreement p.text{margin-top:min(.2777777778vw,4px);font-size:min(.7638888889vw,11px)}}
@media (min-width:1024px){#cookie_agreement p.text a{color: #8c98a2;} #cookie_agreement p.text a:hover{text-decoration:none}}