@charset "UTF-8";
/* CSS Document */

#container{
	padding-bottom: 100px;
}
/*
.t-caret{
	display: inline-block;
	width: 5px;
	animation: tjs_blink 1s linear 0s infinite normal both;
}

.tit .t-caret::before{
	content: '';
	display: block;
	width: 20px;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: var(--TOKITA-TEXT-DARK);
}
*/

/*=============================
main
=============================*/
#main {
	/*padding-top: calc(100vh - 265px);*/
	/*padding-top: calc(100vh - 145vw);*/
	padding-top: 70vw;
	position: relative;
}
#main .kvArea{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}
/*
body.kc_GREEN #main .kvArea{background: url(../img/top/sp_kv01_green.png) no-repeat top left/100% auto;}
body.kc_BLUE #main .kvArea{background: url(../img/top/sp_kv01_blue.png) no-repeat top left/100% auto;}
body.kc_RED #main .kvArea{background: url(../img/top/sp_kv01_red.png) no-repeat top left/100% auto;}
body.kc_YELLOW #main .kvArea{background: url(../img/top/sp_kv01_yellow.png) no-repeat top left/100% auto;}
*/
#main #kvImg svg{
	position: absolute;
	top:8%;
	left:50%;
	height: 45%!important;
	width: auto!important;
	-webkit-transform: translateX(-40%) rotate(45deg)!important;
	transform: translateX(-40%) rotate(45deg)!important;
}
.kc_GREEN #main #kvImg svg .ura01 path,
.kc_GREEN #main #kvImg svg .ura01_line path,
.kc_GREEN #main #kvImg svg .ura02 path,
.kc_GREEN #main #kvImg svg .ura02_line path {fill:rgb(151,247,198);}
.kc_BLUE #main #kvImg svg .ura01 path,
.kc_BLUE #main #kvImg svg .ura01_line path,
.kc_BLUE #main #kvImg svg .ura02 path,
.kc_BLUE #main #kvImg svg .ura02_line path {fill:rgb(216,229,253);}
.kc_RED #main #kvImg svg .ura01 path,
.kc_RED #main #kvImg svg .ura01_line path,
.kc_RED #main #kvImg svg .ura02 path,
.kc_RED #main #kvImg svg .ura02_line path {fill:rgb(252,199,199);}
.kc_YELLOW #main #kvImg svg .ura01 path,
.kc_YELLOW #main #kvImg svg .ura01_line path,
.kc_YELLOW #main #kvImg svg .ura02 path,
.kc_YELLOW #main #kvImg svg .ura02_line path {fill:rgb(247,235,152);}

.kc_GREEN #main #kvImg svg .omote01 g:nth-child(1) path,
.kc_GREEN #main #kvImg svg .omote02 g:nth-child(1) path {fill:rgb(218,250,233);}
.kc_GREEN #main #kvImg svg .omote01 g:nth-child(2) path,
.kc_GREEN #main #kvImg svg .omote02 g:nth-child(2) path {fill:rgb(151,247,198);}

.kc_BLUE #main #kvImg svg .omote01 g:nth-child(1) path,
.kc_BLUE #main #kvImg svg .omote02 g:nth-child(1) path {fill:rgb(243,247,255);}
.kc_BLUE #main #kvImg svg .omote01 g:nth-child(2) path,
.kc_BLUE #main #kvImg svg .omote02 g:nth-child(2) path {fill:rgb(216,229,253);}

.kc_RED #main #kvImg svg .omote01 g:nth-child(1) path,
.kc_RED #main #kvImg svg .omote02 g:nth-child(1) path {fill:rgb(255,241,241);}
.kc_RED #main #kvImg svg .omote01 g:nth-child(2) path,
.kc_RED #main #kvImg svg .omote02 g:nth-child(2) path {fill:rgb(252,199,199)}

.kc_YELLOW #main #kvImg svg .omote01 g:nth-child(1) path,
.kc_YELLOW #main #kvImg svg .omote02 g:nth-child(1) path {fill:rgb(255,250,237);}
.kc_YELLOW #main #kvImg svg .omote01 g:nth-child(2) path,
.kc_YELLOW #main #kvImg svg .omote02 g:nth-child(2) path {fill:rgb(247,235,152);}

/*
#kvMovie {
}
#kvMovie video {
	//position: absolute;
	//top: 50%;
	//left: 50%;
	//z-index: 1;
	//width: auto;
	//height: auto;
	//min-width: 105%;
	//min-height: 105%;
	//transform: translate(-50%,-50%);
	//display: none;
	//border: 1px solid #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	display: none;
}
.kc_GREEN #kvMovie video.movie_GREEN,
.kc_BLUE #kvMovie video.movie_BLUE,
.kc_RED #kvMovie video.movie_RED,
.kc_YELLOW #kvMovie video.movie_YELLOW{display: block;}
*/

#main > .inner{
	padding: 0 20px;
}
#main h1.tit{
}
#main h1.tit > span{display: inline-block;}
#main h1.tit .en .fen{
	font-size: 0.36rem;
	line-height: 1.65;/*ガタつき防止*/
}
#main h1.tit .en .fen.fl{
	font-size: 0.46rem;
	line-height: 1;/*ガタつき防止*/
}
#main h1.tit .en .t-caret{
	font-size: 0.3rem;
}
#main h1.tit .jp{
	font-size: 0.2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: var(--TOKITA-GREEN);
	border: 1px solid var(--TOKITA-TEXT-DARK);
	padding: 0.05em 0.1em 0.075em 0.05em;
	margin-top: -0.25em;
}
#main h1.tit .jp .fs{
	font-size: 0.18rem;
}


#main .slickArea{
	aspect-ratio: 670/857;
	position: relative;
	box-shadow: 0px -10px 0px 0px var(--TOKITA-GREEN);
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 40px;
}
#main .slickArea::before{
	content: '';
	display: block;
	position: absolute;
	top:0;
	left:0;
	z-index: 5;
	width: 100%;
	height: 100%;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAABdJREFUGFdjZGBg+M/AwMDIACNADAwOACNxAQTGOwk4AAAAAElFTkSuQmCC);
	opacity: 0.2;
}
#main .slickArea::after{
	content: '';
	display: block;
	position: absolute;
	top:0;
	left:0;
	z-index: 6;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 70%, rgba(34,34,34,0.6) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 70%,rgba(34,34,34,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 70%,rgba(34,34,34,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
}
#main .slickArea .slick,
#main .slickArea .slick *{
	width: 100%;
	height: 100%;
}
#main .slickArea .slick p img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*main infoArea
=============================*/
#main #infoArea{
	margin: 0 3% 0;
	padding: 20px 15px 20px;
	background: #FFF;
	max-height: 130px;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	top:-70px;
	z-index: 10;
	-webkit-transition: max-height 0.5s ease;
	transition: max-height 0.5s ease;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
}
#main #infoArea.show{
	max-height: 999px;
}
#main #infoArea a.bt_info{
	display: block;
	width: 30px;
	height: 30px;
	padding: 7px;
	position: absolute;
	top:28px;
	right:15px;
	margin-top: -15px;
	opacity: 0.5;
	-webkit-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
}
#main #infoArea a.bt_info:hover{
	opacity: 1;
}
#main #infoArea a.bt_info span{
	display: block;
	width: 6px;
	height: 16px;
	position: absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	animation: bt_info_close 0.5s ease 0s 1 normal both;
}
#main #infoArea a.bt_info.open span{
	animation: bt_info_open 0.5s ease 0s 1 normal both;
}
@-webkit-keyframes bt_info_open {
	0% {
		height: 16px;
	}
	50% {
		width: 6px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	100% {
		width: 16px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
}
@keyframes         bt_info_open {
	0% {
		height: 16px;
	}
	50% {
		width: 6px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	100% {
		width: 16px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
}
@-webkit-keyframes bt_info_close {
	0% {
		width: 16px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	50% {
		width: 6px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	100% {
		width: 6px;
		height: 16px;
	}
}
@keyframes         bt_info_close {
	0% {
		width: 16px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	50% {
		width: 6px;
		height: 6px;
		background: var(--TOKITA-TEXT-DARK);
	}
	100% {
		width: 6px;
		height: 16px;
	}
}
#main #infoArea a.bt_info span::before,
#main #infoArea a.bt_info span::after{
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	background: var(--TOKITA-TEXT-DARK);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#main #infoArea a.bt_info span::before{top:0; left:0;}
#main #infoArea a.bt_info span::after {bottom:0; right:0;}

#main #infoArea a.bt_info.open{opacity: 1;}
#main #infoArea a.bt_info.open span::before,
#main #infoArea a.bt_info.open span::after{
	width: 100%;
}


#main #infoArea > .inner{
}
#main #infoArea h2{
	font-size: 0.15rem;
	border-bottom: 1px solid rgba(69,69,69,0.2);
	padding-bottom: 0.75em;
	margin-bottom: 1em;
}
#main #infoArea .infoList{
}
#main #infoArea .infoList li{
}
#main #infoArea .infoList li:nth-child(n+2){
	margin-top: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#main #infoArea.show .infoList li:nth-child(n+2){
	opacity: 1;
}
#main #infoArea .infoList li > .data{
	padding-left: 10px;
	font-size: 0.12rem;
	margin-bottom: 0.25em;
	border-left-width: 5px;
	border-left-style: solid;
}
#main #infoArea .infoList li > .txtArea{
	padding-left: 15px;
	font-size: 0.12rem;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
}
#main #infoArea .infoList li > .txtArea a{
	text-decoration: underline;
}
/*=============================
kv02
=============================*/
#kv02{
}
/*=============================
section common
=============================*/
section .titArea{
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}
section .titArea.frow{

}
section h2.tit{
}
section .titArea.frow h2.tit{

}
section h2.tit > span{
	display: inline-block;
}
section h2.tit .fen{
	font-size: 0.32rem;
}
section h2.tit .jp{margin-top: 1em;}
section h2.tit .jp .tjtxt{
	font-size: 0.2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: var(--TOKITA-GREEN);
	border: 1px solid var(--TOKITA-TEXT-DARK);
	padding: 0.075em 0.05em 0.1em 0.05em;
}
section h2.tit .jp .tjtxt:nth-of-type(n+2){
	margin-top: -1px;
}


section .titArea .num{
	font-size: 0.08rem;
	color: var(--TOKITA-DARK-GRAY);
	min-width: 18px;
	padding: 0 0.5em;
	height: 12px;
	text-align: center;
	background: var(--TOKITA-LIGHT-GRAY);
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

section .imgAni{position: relative;}
section .imgAni img.bg{
	position: absolute;
	top:0;
	left:0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	-webkit-transform: scale(1.3);
			transform: scale(1.3);
	-webkit-transition:
		opacity 1s ease,
		transform 1s ease;
	transition:
		opacity 1s ease,
		transform 1s ease;
}
section .imgAni.show img.bg{
	opacity: 1;
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
}
/*=============================
message personality
=============================*/
section.gBloc01 {
	padding: 0 30px;
	margin-bottom: 70px;
}
section.gBloc01 > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
section.gBloc01 .titArea{margin-bottom: 45px;}
section.gBloc01 .txtArea a.bt_g{
	font-size: 0.13rem;
	width: 100%;
	height: 50px;
	margin-top: 2.5em;
}

/* message 
=============================*/
#message .txtArea .txt{
	font-size: 0.14rem;
	line-height: 2.2;
}

/* personality
=============================*/
#personality .txtArea{padding-right: 11%;}
#personality .txtArea .txt{
	font-size: 0.14rem;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}

/*=============================
special
=============================*/
#special {
	padding: 0 30px;
	margin-bottom: 70px;
}
#special > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#special .titArea{margin-bottom: 45px;}
#special .imgAni{
	aspect-ratio: 630/800;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 4.8% 8%;
}
#special .imgAni::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 0%, rgba(34,34,34,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
#special .imgAni.show::before{
	opacity: 0.5;
}

#special .bgArea .txtArea{
	position: relative;
	z-index: 5;
}
#special .bgArea .txtArea .txt01{
	text-align: center;
	font-size: 0.11rem;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 0.5em;
}
#special .bgArea .txtArea .txt02{
	text-align: center;
	font-size: 0.32rem;
	color: #FFF;
}
#special .bgArea .txtArea a.bt_g{
	font-size: 0.13rem;
	height: 50px;
	margin-top: 50%;
}

/*=============================
about
=============================*/
#about {
	padding: 0 10px;
	margin-bottom: 75px;
}
#about > .bgArea{
	padding: 55px 20px 20px;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	position: relative;
}
#about > .bgArea > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#about .titArea{
	margin-bottom: 40px;
}
#about .listArea{
	display: flex;
	overflow-x: scroll;
	margin-left: -20px;
	width: calc(100% + 40px);
	padding: 0 20px;
}
#about .list{
	display: -webkit-flex;
	display: flex;
}
#about .list > li:first-child{
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 4px 0px 0px 4px / 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px / 4px 0px 0px 4px;
	overflow: hidden;
}
#about .list > li:last-child{
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 0px 4px 4px 0px / 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px / 0px 4px 4px 0px;
	overflow: hidden;
}
#about .list > li{
	width: 76vw;
	aspect-ratio: 570/720;
}
#about .list > li a{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: flex-end;
	padding: 0 22% 4.4% 4.5%;
}
#about .list > li a::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 0%, rgba(34,34,34,0.5) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 0%,rgba(34,34,34,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 0%,rgba(34,34,34,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
#about .list > li a.show::before{
	opacity: 1;
}
#about .list > li a.noLink::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: rgba(69,69,69,0.54);
	z-index: 1;
}
#about .list > li > a > *:not(.bg){
	position: relative;
	z-index: 5;
}

#about .list > li > a > *{
	color: #FFF;
}
#about .list > li > a:hover:not(.noLink) > img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
#about .list > li > a > h3 > *{display: inline-block;}
#about .list > li > a > h3 .fen{
	font-size: 0.14rem;
}
#about .list > li > a > h3 .jp{
	font-size: 0.2rem;
	font-weight: 700;
	margin-top: 0.25em;
}
#about .list > li > a > .txt{
	font-size: 0.12rem;
	line-height: 1.5;
	margin-top: 2.5em;
	opacity:1;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	text-align: justify;
	text-justify: inter-ideograph;
}
#about .list > li > a:hover > .txt{
	opacity: 1;
}

#about .list > li > a > .bt_more{
	font-size: 0.14rem;
	margin-top: 5em;
}
#about .list > li > a > .bt_more span{
	display: inline-block;
	position: relative;
	padding-right: 1.5em;
}
#about .list > li > a > .bt_more span::before{
	content: '';
	width: 6px;
	height: 6px;
	position: absolute;
	top:calc(50% - 3px);
	left:calc(100% - 1em);
	background: #FFF;
	-webkit-transition: width 0.5s ease;
	transition: width 0.5s ease;
}
#about .list > li > a:hover > .bt_more span::before{
	width: 16px;
}

/*=============================
pStory cTalk
=============================*/
section.gBloc02 {
	padding: 0 30px;
	margin-bottom: 55px;
}
section.gBloc02 > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
section.gBloc02 .titArea{
	margin-bottom: 40px;
}
section.gBloc02 .fbox{}
section.gBloc02 .fbox .list{
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

section.gBloc02 .fbox .list{

}
section.gBloc02 .fbox .txtArea{
	padding-right: 11%;
}

section.gBloc02 .fbox .list > li{
	width: 48.4%;
}
section.gBloc02 .fbox .list > li a{
	display: block;
}
section.gBloc02 .fbox .list > li a .imgAni{
	aspect-ratio: 1/1;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
section.gBloc02 .fbox .list > li a .imgAni::before{
	content: '';
	display: block;
	width: 100%;
	height: 35%;
	position: absolute;
	bottom:0;
	left:0;
	z-index: 1;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 0%, rgba(34,34,34,0.5) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 0%,rgba(34,34,34,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 0%,rgba(34,34,34,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
section.gBloc02 .fbox .list > li a .imgAni.show::before{
	opacity: 1;
}
section.gBloc02 .fbox .list > li a.noLink .imgAni::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: rgba(69,69,69,0.54);
	z-index: 2;
}
section.gBloc02 .fbox .list > li a .imgAni::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	/*-webkit-transition: border 0.35s ease;*/
	/*transition: border 0.35s ease;*/
}
section.gBloc02 .fbox .list > li a:hover:not(.noLink) .imgAni::after{
	border-width: 3px;
	border-style: solid;
}
section.gBloc02 .fbox .list > li a:hover:not(.noLink) img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
section.gBloc02 .fbox .list > li a h3{
	position: absolute;
	bottom:30px;
	left:6.5%;
	bottom:6.5%;
	font-size: 0.14rem;
	font-weight: 700;
	color: #FFF;
	z-index: 5;
}
section.gBloc02 .fbox .list > li a .txt{
	font-size: 0.12rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 1.5em;
}
section.gBloc02 .fbox .list > li a:hover:not(.noLink) .txt{
	text-decoration: underline;
}
section.gBloc02 .fbox .txtArea{margin-top: 3em;}
section.gBloc02 .fbox .txtArea .txt{
	font-size: 0.12rem;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
section.gBloc02 .fbox .txtArea a.bt_g{
	width: 100%;
	height: 50px;
	font-size: 0.13rem;
	margin-top: 1.5em;
}
/*pStory
=============================*/
#pStory .fbox .list > li a .imgAni{
}
/*cTalk
=============================*/
#cTalk .fbox .list > li a .imgAni{
}



/*=============================
bizD
=============================*/
#bizD {
	padding: 0 0 0 10px;
	margin-bottom: 75px;
}
#bizD > .bgArea{
	padding: 55px 30px 75px 20px;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px 0px 0px 6px / 6px 0px 0px 6px;
	border-radius: 6px 0px 0px 6px / 6px 0px 0px 6px;
	position: relative;
}
#bizD > .bgArea > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#bizD .titArea{
	margin-bottom: 30px;
}
#bizD .fbox{}
#bizD .fbox > .txtArea{
	padding-right: 12%;
}
#bizD .fbox > .txtArea h3{
	font-size: 0.2rem;
	font-weight: 700;
	margin-bottom: 1em;
}
#bizD .fbox > .txtArea .txt{
	font-size: 0.14rem;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
#bizD .fbox > a.bt_g{
	width: 88%;
	height: 50px;
	font-size: 0.13rem;
	margin-top: 50px;
}

#bizD .fbox .list{
	margin-top:40px;
	padding-right: 11%;
}
#bizD .fbox .list > li{
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#bizD .fbox .list > li:last-child{
	margin-bottom: 0;
}
#bizD .fbox .list > li a{
	display: block;
}
#bizD .fbox .list > li a .imgAni{
	aspect-ratio: 560/420;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background: var(--TOKITA-TEXT-DARK);
}
#bizD .fbox .list > li a:hover:not(.noLink) img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
#bizD .fbox .list > li a .imgAni::before{
	content: '';
	display: block;
	width: 100%;
	height: 37%;
	position: absolute;
	bottom:0;
	left:0;
	z-index: 1;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 0%, rgba(34,34,34,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
	opacity: 0.2;
}
#bizD .fbox .list > li a .imgAni::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	border: 0px solid var(--TOKITA-GREEN);
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	/*-webkit-transition: border 0.35s ease;*/
	/*transition: border 0.35s ease;*/
}
#bizD .fbox .list > li a:hover:not(.noLink) .imgAni::after{
	border-width: 2px;
	border-style: solid;
}
body.kc_GREEN #bizD .fbox .list > li a:hover:not(.noLink) .imgAni::after{border-color: var(--TOKITA-GREEN);}
body.kc_BLUE #bizD .fbox .list > li a:hover:not(.noLink) .imgAni::after{border-color: var(--TOKITA-BLUE);}
body.kc_RED #bizD .fbox .list > li a:hover:not(.noLink) .imgAni::after{border-color: var(--TOKITA-RED);}
body.kc_YELLOW #bizD .fbox .list > li a:hover:not(.noLink) .imgAni::after{border-color: var(--TOKITA-YELLOW);}

#bizD .fbox .list > li a .imgAni.show img.bg{opacity: 0.85};
#bizD .fbox .list > li a:hover:not(.noLink) img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
#bizD .fbox .list > li a .txtArea{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 5;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 8.3% 3.5% 4.5%;
	color: #FFF;
}
#bizD .fbox .list > li a .txtArea h3 span{display: block;}
#bizD .fbox .list > li a .txtArea h3 .fen{
	font-size: 0.16rem;
}
#bizD .fbox .list > li a .txtArea h3 .jp{
	font-size: 0.2rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0.2em;
}
#bizD .fbox .list > li a .txtArea .catList li{
	font-size: 0.15rem;
	line-height: 1.5;
	font-weight: 700;
}

#bizD .fbox .list > li a .txtArea .bt_more{
	font-size: 0.14rem;
	text-align: right;
}
#bizD .fbox .list > li a .txtArea .bt_more span{
	display: inline-block;
	position: relative;
	padding-right: 1.5em;
}
#bizD .fbox .list > li a .txtArea .bt_more span::before{
	content: '';
	width: 6px;
	height: 6px;
	position: absolute;
	top:calc(50% - 3px);
	left:calc(100% - 1em);
	background: #FFF;
	-webkit-transition: width 0.5s ease;
	transition: width 0.5s ease;
}
#bizD .fbox .list > li a:hover .txtArea .bt_more span::before{
	width: 16px;
}



#bizD .fbox .list > li a .txt{
	padding: 0 3.5%;
	font-size: 0.14rem;
	font-weight: 700;
	line-height: 1.45;
	margin-top: 1.5em;
	opacity: 0.34;
	text-align: justify;
	text-justify: inter-ideograph;
}
#bizD .fbox .list > li a:hover:not(.noLink) .txt{
	text-decoration: underline;
}



/*=============================
people
=============================*/
#people {
	padding: 0 30px;
	margin-bottom: 75px;
	position: relative;
	z-index: 10;
}
#people > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#people .titArea{
	margin-bottom: 40px;
}
#people .fbox{}
#people .fbox .list{
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#people .fbox > .txtArea{
}
#people .fbox > .txtArea h3{
	font-size: 0.34rem;
	font-weight: 700;
	margin-bottom: 55px;
}
#people .fbox .list{margin-top: 40px;}
#people .fbox .list > li{
	width: 48.5%;
}
#people .fbox .list > li:nth-child(n+3){margin-top: 3em;}
#people .fbox .list > li a{
	display: block;
}
#people .fbox .list > li a .imgAni{
	aspect-ratio: 305/300;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#people .fbox .list > li a .imgAni::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	border-width: 0;
	border-style: solid;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 4px;
	border-radius: 4px;
	/*-webkit-transition: border 0.35s ease;*/
	/*transition: border 0.35s ease;*/
}
#people .fbox .list > li a:hover:not(.noLink) .imgAni::after{
	border-width: 3px;
	border-style: solid;
}
#people .fbox .list > li a:hover:not(.noLink) img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
#people .fbox .list > li a .icon_blank::before{
	top:6%;
	right:6%;
}

#people .fbox .list > li a h3{
	font-size: 0.12rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 1em;
}
#people .fbox .list > li a .txt{
	font-size: 0.08rem;
	line-height: 1.25;
	margin-top: 1.25em;
	opacity: 0.34;
}
#people .fbox .list > li a:hover:not(.noLink) h3,
#people .fbox .list > li a:hover:not(.noLink) .txt{
	text-decoration: underline;
}

#people .fbox .txtArea .txt{
	font-size: 0.14rem;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
#people .fbox > a.bt_g{
	width: 89%;
	height: 50px;
	font-size: 0.13rem;
	margin-top: 2.5em;
}
/*=============================
job
=============================*/
#job {
	padding: 0 30px;
	margin-bottom: 75px;
	position: relative;
}
#job .kvArea{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 130vw;
	z-index: 0;
}
body.kc_GREEN #job .kvArea{background: url(../img/top/sp_kv03_green.png) no-repeat top left/100% auto;}
body.kc_BLUE #job .kvArea{background: url(../img/top/sp_kv03_blue.png) no-repeat top left/100% auto;}
body.kc_RED #job .kvArea{background: url(../img/top/sp_kv03_red.png) no-repeat top left/100% auto;}
body.kc_YELLOW #job .kvArea{background: url(../img/top/sp_kv03_yellow.png) no-repeat top left/100% auto;}

#job > .inner{
	padding-top: 15px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
	position: relative;
	z-index: 1;
}
#job > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
#job .titArea{
	margin-bottom: 30px;
}
#job .fbox{
}
#job .fbox .txtArea{
}
#job .fbox .txtArea .txt{
	font-size: 0.14rem;
	line-height: 1.8;
}
#job .fbox .ph{
	aspect-ratio: 630/354;
	overflow: hidden;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin-top: 30px;
}
#job .fbox > a.bt_g{
	width: 89%;
	height: 50px;
	font-size: 0.13rem;
	margin-top: 40px;
}

/*=============================
office
=============================*/
#office {
	padding: 0 0 0 10px;
	margin-bottom: 75px;
}
#office > .bgArea{
	background: #F7F7F7;
	padding: 50px 0px 40px 20px;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
#office > .bgArea > .inner{

}
#office .titArea{
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
	padding-top: 10px;
	width: calc(100% - 30px);
	margin-bottom: 40px;
}
#office .titArea .num{
	background: var(--TOKITA-WHITE);
}
#office .fbox .slideArea .list{
	margin-top: 40px;
	display: -webkit-flex;
	display: flex;
}
#office .fbox{
}
#office .fbox > .txtArea{
	padding-right: 30px;
}
#office .fbox > .txtArea .txt{
	font-size: 0.14rem;
	line-height: 1.8;
}
#office .fbox > a.bt_g{
	width: 72vw;
	height: 50px;
	font-size: 0.13rem;
	margin-top: 4em;
}

#office .fbox .phArea{
}
#office .fbox .phArea .slideArea{
	overflow-x: scroll;
}
#office .fbox .phArea .slideArea::-webkit-scrollbar {
	display:none;
}
#office .fbox .phArea .slideArea .list{
	/*margin-left: -52%;*/
}
#office .fbox .phArea .slideArea .list li{
	
}
#office .fbox .phArea .slideArea .list li div{
	aspect-ratio: 305/300;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;/*iPhone safari対応*/
	-webkit-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	padding: 7% 5%;
}
/*
#office .fbox .phArea .slideArea .list li div:hover:not(.noLink) img.bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
*/
#office .fbox .phArea .slideArea .list li div::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: -moz-linear-gradient(top,  rgba(34,34,34,0) 0%, rgba(34,34,34,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	background: linear-gradient(to bottom,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#80222222',GradientType=0 );
	z-index: 1;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
#office .fbox .phArea .slideArea .list li div.show::before{
	opacity: 0.2;
}
#office .fbox .phArea .slideArea .list li div h3{
	position: relative;
	z-index: 2;
	color: var(--TOKITA-WHITE);
}
#office .fbox .phArea .slideArea .list li div h3 span{
	display: block;
}
#office .fbox .phArea .slideArea .list li div h3 span.fen{
	font-size: 0.2rem;
}
#office .fbox .phArea .slideArea .list li div h3 span.jp{
	font-size: 0.1rem;
	font-weight: 700;
	margin-top: 0.25em;
}
#office .fbox .phArea .slider{
	width: calc(100% - 60px);
	margin-left: 15px;
	height: 12px;
	margin-top: 3em;
	position: relative;
}
#office .fbox .phArea .slider::before{
	content: '';
	display: block;
	width: calc(100% + 30px);
	height: 1;
	position: absolute;
	top:50%;
	left:-15px;
	opacity: 0.2;
	border-top: 1px dashed var(--TOKITA-TEXT-DARK);
	z-index: 0;
}
#office .fbox .phArea .slider a{
	position: absolute;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	cursor: grab;
}
#office .fbox .phArea .slider a:active{
	cursor: grabbing;
}
#office .fbox .phArea .slider a::after{
	display: inline-block;
	font-size: 0.16rem;
	content: '■scroll';
	font-family: neue-haas-grotesk-display, sans-serif !important;
	font-weight: 600!important;
	/*-webkit-transform: scale(1.0);
	transform: scale(1.0);
	-webkit-transition: transform 0.35s ease;
	transition: transform 0.35s ease;*/
	margin-top: -2px;
}
/*
#office .fbox .phArea .slider a:hover::after,
#office .fbox .phArea .slider a:active::after{
	-webkit-transform: scale(1.3);
			transform: scale(1.3);
}
*/

/*=============================
wStyle recruit
=============================*/
.gBloc03 {
	padding: 0 30px;
}
.gBloc03 section:nth-of-type(n+2){
	margin-top: 75px;
}
.gBloc03 section > .inner{
	padding-top: 7px;
	border-top: 1px solid var(--TOKITA-TEXT-DARK-RGB01);
}
.gBloc03 section .titArea{
	margin-bottom: 35px;
}
.gBloc03 section .titArea h2.tit .fen{
	font-size: 0.26rem;
}
.gBloc03 section .titArea h2.tit .jp {margin-top: 0.5em;}
.gBloc03 section .titArea h2.tit .jp .tjtxt{
	font-size: 0.16rem;
}

.gBloc03 section .list li:nth-child(n+2){
	margin-top: 2em;
}
.gBloc03 section .list li a{
	font-size: 0.14rem;
	font-weight: 700;
	line-height: 1.5;
	display: inline-block;
}
.gBloc03 section .list li a.bt_blank{
	padding-right: 1em;
}
.gBloc03 section .list li a.bt_blank::before{
	background: var(--TOKITA-TEXT-DARK);
	margin-top: -1px;
}
.gBloc03 section .list li a.noLink{
	opacity: 0.34;
}
.gBloc03 section .list li a:hover:not(.noLink){
	text-decoration: underline;
}

/*wStyle
=============================*/
/*
#wStyle .titArea h2.tit .jp .tjtxt{
	background: none;
}
*/




/*
.scroll-pane {
	overflow: auto;
	width: 99%;
	float:left;
}
.scroll-content {
	width: 2440px;
	float: left;
}
.scroll-content-item {
	width: 100px;
	height: 100px;
	float: left;
	margin: 10px;
	font-size: 3em;
	line-height: 96px;
	text-align: center;
}
.scroll-bar-wrap {
	clear: left;
	padding: 0 4px 0 2px;
	margin: 0 -1px -1px -1px;
}
.scroll-bar-wrap .ui-slider {
	background: none;
	border:0;
	height: 2em;
	margin: 0 auto;

}
.scroll-bar-wrap .ui-handle-helper-parent {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.scroll-bar-wrap .ui-slider-handle {
	top:.2em;
	height: 1.5em;
}
.scroll-bar-wrap .ui-slider-handle .ui-icon {
	margin: -8px auto 0;
	position: relative;
	top: 50%;
}*/