@charset "UTF-8";

/*----------------------------------------------------------
更新日：2024年6月4日
=PC(960以上)
=PC & タブレット(960以下)
=スマホ(768px以下)
-------------------------------------------------------------*/

/*==================================================================
  Top page
===================================================================*/

/* #keyv
------------------------------------------------------*/
#keyv {
	background: #000 url("../img/keyv_bg.webp") no-repeat center center;
	background-size:cover;
	text-align: center;
	color: #FFF;
}
#keyv .mainTxt {
	width: 100%;
	height: 100%;
	padding: 4vw 0 0;
	position: relative;
	z-index: 5;
}
#keyv .mainTxt .sName {
	margin: 2em auto 0;
}
#keyv .mainTxt .imgTxt {
	margin: 0 auto 6em;
}
#keyv .proSlider {
	padding-bottom: 4em;
}
#keyv .proSlider .picBox {
	padding: 1.5em 0;
	background: #000;
	box-shadow: 0px 2px 7px rgba(255,255,255,0.3);
}
#keyv .proSlider .slick-track{
	display: flex;
	align-items: center;
}
#keyv .proSlider .picBox .thumBox{
	display: flex;
	justify-content: center;
	padding: 0 2.5vw;
}

@media only screen and (max-width:960px) {
	#keyv {
		background: #000 url("../img/keyv_bg_sp.webp") no-repeat center center;
		background-size:cover;
	}
	#keyv .mainTxt .sName {
		margin: 5vw auto 0;
	}
}
@media only screen and (max-width:768px) {
	#keyv .mainTxt {
		padding-top: 16vw;
	}
	#keyv .mainTxt .sName {
		max-width:none;
		width: 70vw;
		margin: 4vw auto 4vw;
	}
	#keyv .mainTxt .imgTxt {
		max-width:none;
		width: 50vw;
		margin: 4vw auto 8vw;
	}
	#keyv .proSlider {
		padding-bottom: 4vw;
	}
	#keyv .proSlider .picBox {
		padding: 3vw 0;
	}
	#keyv .proSlider .slick-slide img{
		width: 80%
	}
	#keyv .proSlider .picBox .thumBox{
		padding: 0 0.5vw;
	}
}
@media only screen and (max-width:1024px) {
}


/* .sec
------------------------------------------------------*/
.sec .topTxt {
	text-align: center;
	margin-bottom: 2em;
	line-height: 1.6;
}
.sec .topTxt p{
	color: #000;
	font-size: 1.5em;
	font-weight: 700;
	display: inline-block;
	background:#91ed00;
	padding: 0 0.8em;
	margin-bottom:0.8em;
}
@media only screen and (max-width:768px) {
	.sec .topTxt {
		margin-bottom: 1.5em;
	}
	.sec .topTxt p{
		color: #000;
		font-size: 1em;
		padding: 0.5em 0.8em;
		margin-bottom:0.5em;
		line-height: 1.5;
	}
}

/* #pvArea
------------------------------------------------------*/
#pvArea.sec header {
	margin-bottom: 2em;
}
@media only screen and (max-width:768px) {
	#pvArea.sec {
		padding: 5vw 1em;
	}
	#pvArea.sec header {
		margin-bottom: 1em;
	}
}


/* .assignment
------------------------------------------------------*/
.assignment{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.assignment .qBox {
	display: flex;
	justify-content: space-between;
	background: #FFF;
	max-width: 800px;
	position: relative;
	z-index: 1;
}
.assignment .qBox:before{
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: -10%;
	left: 8%;
	background: transparent url("../img/icon_arrow.png") no-repeat center center;
	background-size: cover;
}
.assignment .qBox:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 250%;
	height: 100%;
	background-color: #ebebeb;
	box-shadow: 0px 1px 13px rgba(0, 0, 0,0.3);
	z-index: -1;
}
.tDark .assignment .qBox:after {
	background-color: #FFF;
}

.assignment .qBox .pic img{
	width: 100%;
}
.assignment .qBox .txt{
	width: 60%;
	overflow: hidden;
	position: relative;
	padding: 1.5em 0;
}
.assignment .qBox .txt .assTitle{
	color: #000;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.6;
	text-shadow: 6px 6px 0px #fdfa0c;
	margin: -0.2em 0 0.4em 2em;
	padding-left: 0.4em;
	position: relative;
}
.assignment .qBox .txt .assTitle:before {
	content: '';
	position: absolute;
	bottom: 50%;
	left: -2em;
	width: 1px;
	height: 2em;
	background-color: #000;
}
.assignment .qBox .txt .assTitle:after {
	content: '';
	position: absolute;
	top: 50%;
	left: -2em;
	width: 2em;
	height: 1px;
	background-color: #000;
}
.assignment .qBox .txt .point{
	margin: 0 1em 0 2.6em;
	list-style-position: outside;
}
.assignment .qBox .txt .point li {
	padding-left: 1.5em;
	text-indent: -0.4em;
/*	list-style: none;*/
/*	line-height: 1.6;*/
}
.assignment .qBox .txt .point li:last-child{
	margin-bottom: 0;
}
.assignment .qBox .txt .point li i {
	font-size: 0.7em;
}
.assignment .aBox {
	font-size: 1.8em;
	font-weight: 700;
	max-width: 900px;
/*	width: 100%;*/
	position: relative;
	top: -1em;
	left: 1.7em;
	padding: 2.5em 0 1em 1.5em;
	font-feature-settings: "palt";
	background-color: #fdfa0c;
}
.assignment .aBox:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 250%;
	height: 100%;
	background-color: #fdfa0c;
/*	background: #CCC;*/
	z-index: -1;
	transform: translate(25vw, 0);
}
.sec.tDark header .headline1 {
	color: #FFF;
		--x-gradient: linear-gradient(90deg, #FFF 0 50px, transparent 0 calc(100% - 50px), #FFF calc(100% - 50px));
		--y-gradient: linear-gradient(#FFF 0 50px, transparent 0 calc(100% - 50px), #FFF calc(100% - 50px));
}

@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	.assignment {
		margin-bottom: 1.5em;
	}
	.assignment .qBox {
		display: block;
		left: 0;
	}
	.assignment .qBox:before {
		bottom: -4%;
		left: 11%;
	}
	.assignment .qBox .txt,
	.assignment .qBox .pic {
		width: auto;
	}
	.assignment .qBox .txt .assTitle {
		font-size: 1.2em;
		margin: -0.2em 0 0.5em 1.5em;
		padding-left: 0;
	}
	.assignment .qBox .txt .assTitle:before{
		left: -1.5em;
	}
	.assignment .qBox .txt .assTitle:after{
		width: 1em;
		left: -1.5em;
	}
	.assignment .qBox .txt .point{
		margin: 0 1em 0 1.6em;
/*		margin-bottom: 1em;*/
	}
	.assignment .qBox .txt .point li{
		padding-left: 1em;
	}
	.assignment .aBox {
		font-size: 1.2em;
		line-height: 1.6;
		min-width:inherit;
		left: 1em;
		padding: 2.5em 1em 1em 1.5em;
	}
	.assignment .aBox:after {
		display: none;
	}
}

/* .caseStudy
------------------------------------------------------*/
.caseStudy .caseList{
	max-width: 700px;
	margin: 0 auto;
}
.caseStudy .caseList li{
	margin-bottom: 3.5em;
/*	list-style: none;*/
}
.caseStudy .caseList li:last-child{
	margin-bottom: 0;
}
.caseStudy .caseList dl{
	text-align: center;
	margin-bottom: 1.4em;
	color: #000;
}
.caseStudy .caseList dt{
	font-weight: 700;
	font-size: 1.25em;
	position: relative;
	border-bottom: 2px solid #000;
	margin-bottom: 0.1em;
}
.tDark .caseStudy .caseList dt,
.tDark .caseStudy .caseList dd{
	color: #FFF;
	border-bottom-color: #FFF;
}
.caseStudy .caseList dt span{
	color: #f20c88;
	font-size: 2em;
	font-family: 'Century Gothic';
	font-style: italic;
	position: absolute;
	left:0;
	top: -0.4em;
	letter-spacing: -2px;
}
.contactArea{
	display: flex;
	margin: 1.5em 0;
	justify-content: flex-end;
}
@media only screen and (max-width:768px) {
	.caseStudy .caseList li{
		margin-bottom: 2.5em;
	}
	.caseStudy .caseList dl{
		margin-bottom: 1em;
	}
	.caseStudy .caseList dt{
		font-size: 1.1em;
		margin-bottom: 0.6em;
		text-align: left;
		line-height: 1.4;
		padding-bottom: 0.4em;
		padding-left: 2.5em;
	}
	.caseStudy .caseList dd{
		margin: 0;
		text-align: left;
	}
	.contactArea{
		margin: 1em 0;
	}
}

/* .supportBox
------------------------------------------------------*/
.supportBox{
	width: 90%;
	max-width: 960px;
	margin: 0 auto 3em;
	position: relative;
}
.supportBox .txt{
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	padding: 4em 0 0;
	font-feature-settings: "palt";
}
.supportBox .txt dt{
	font-size: 1.9em;
}
.supportBox .txt dd{
	font-size: 1.25em;
	margin: 1.2em 0 0;
}
.supportBox .pic{
	display: flex;
	justify-content: flex-end;
}

@media only screen and (max-width:768px) {
	.supType{
		padding: 0 1em 12vw;
	}
	.supportBox{
		position:static;
		display: flex;
		flex-direction: column-reverse;
		margin-bottom: 0;
	}
	.supportBox .txt{
		position:static;
		padding: 0;
	}
	.supportBox .txt dt {
		font-size: 1.2em;
	}
	.supportBox .txt dd {
		font-size: 1em;
	}
	.supportBox .pic{
		justify-content: center;
	}
}

/* #contactSec
------------------------------------------------------*/
#contactSec{
	background-color: #EEE;
	padding:5em 1em;
}
#contactSec .txtLink {
	border-bottom: 1px solid #000;
	color: inherit !important;
}
#contactSec .txtLink:hover {
	border-bottom: 0;
}
#contactSec .contactInner {
	background-color: #FFF;
	padding:0 4% 3%;
	border-radius: 10px;
}
#contactSec .txt {
	margin-bottom: 2em;
	text-align: center;
}
#contactSec .backBox{
	margin-top: 5%;
}
#contactSec.sec.thanks{
	margin-top: 70px;
	padding-bottom: 10em;
}
#contactSec.thanks .contactInner {
	padding:6% 4% 6%;
}

@media only screen and (max-width:768px) {
	#contactSec{
		padding:12vw 1em;
	}
	#contactSec.sec.thanks{
		margin-top: 14vw;
		padding-bottom: 12vw;
	}
	#contactSec .txt{
		text-align: left;
	}
	#contactSec .txt br { display: none; }
}