@charset "utf-8";
/* CSS Document */
:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
}
.WideSet.Under.Case .EffectsArea>.ColumnSet {
	max-width: 90%;
	margin: auto;
}

.CaseTitle {
    margin: auto;
    max-width: 720px;
    max-height: 395px;
    position: relative;
}
.CaseTitle p {
    width: 100%;
    max-width: 720px;
    margin: auto;
    position: relative;
}
.WideSet.Under.Case .CaseTitle p.CatchCopy {
    margin-top: 0;
    margin-bottom: 0;
    bottom: 0;
    padding: 1em;
    position: absolute;
    background: rgba(0,0,0,0.7);
    color: #fff;
    box-sizing: border-box;
}

.WideSet.Under.Case p.CatchCopy {
	font-size: 130%;
	font-weight: bold;
	color: #555;
	margin-top: 15px;
	margin-bottom: 15px;
}

.WideSet.Under.Case .HorizontalInnerLinks {
	margin-top: 50px;
}
.WideSet.Under.Case .HorizontalInnerLinks ul {
	text-align: center;
}

.WideSet.Under.Case .HorizontalInnerLinks li {
	display: inline-block;
	float:none;
}

.WideSet.Under.Case .HorizontalInnerLinks li a {
	background-image: url(/-/media/ind/flexworkplace/image/icon_inner_link.png);
	background-position: right;
	transition: .05s ease-in;
}
.WideSet.Under.Case .HorizontalInnerLinks li a:hover {
	background-position:right 9px;
}

.WideSet.Under.Case .Inner.purpose {
background: linear-gradient(145deg, var(--Gray1), var(--Gray2));
	border: 1px solid var(--Gray3);
	padding: 1em;
	border-radius: 2px;
	box-shadow: 0 5px 5px 1px rgba(0,0,0,0.1);
}

.WideSet.Under.Case .Inner.effect {
	/*background: linear-gradient(145deg, #fffafa, #e4dbd1);*/
	background: var(--Gray1);
	padding: 1em;
	border: 4px solid var(--Gray3);
	border-radius: 2px;
	box-shadow: 0 5px 5px 1px rgba(0,0,0,0.1);	
}

.WideSet.Case dt.before {
	border: 1px solid #ccc;
	background: linear-gradient(45deg, var(--Gray1), var(--Gray2));;
}
.WideSet.Case dt.after {
	border: 1px solid #ccc;
	/*background: linear-gradient(45deg, #e5f9f7, #e0e5f1);*/
		background: linear-gradient(45deg, var(--Red1_20_Tint), var(--Red1_40_Tint));

}

.EffectsArea .ColumnHalf {
	width: calc((100% / 2) - 3em);
	padding-top: 0px;
	min-height: 150px;
}

.EffectsArea .ColumnHalf.FirstItem {
	margin-right: 90px;
}

.profile ul li {
	display: inline-block;
	padding: 15px;
	vertical-align: top;
}

.profile ul {
	text-align: center;
}

.WideSet .EffectsArea dt.before:after {
	position: absolute;
	content: url("/-/media/ind/flexworkplace/unifier_appself/image/arrow_uniapp.png");
	top: 30%;
	left: 102%;
}

.WideSet.Case .Inner.Contact.flex>.contact {
		background: var(--Gray5) url(/-/media/ind/flexworkplace/image/bg_contact.png) no-repeat 20px center;;
		margin-bottom: 30px;
}

/*お客さまプロフィール*/
.WideSet.Case .CustomerSummay dt {
	background: transparent;
	float: left;
	padding: 0 3em 1em 0;
}

.WideSet.Case .CustomerSummay dd {
	border: none;
	margin-bottom: 0em;
	margin-left: 7em;
	padding: 0 0 1em 0;
}

.WideSet.Case .GuideLine dt {
	background: transparent;
	padding: 0;
	font-weight: bold;
}
.WideSet.Case .GuideLine dd {
	margin-bottom: 0;
	border: none;
	padding: .2em 1em 1em;
}
.WideSet.Case .GuideLine .ImgOnlyStyle {
	text-align: center;
}
/*
#customer span,
#comment span {
	background:#a56a00;
}
*/

.WideSet.LFont h2#customer>span {
	border-bottom: 3px dotted var(--Gray4);
}

.WideSet .Inner.Contact>.contact a, .WideSet #Sec07 .contact a {
	font-size: 160%;
	line-height: 1.2;
}


.Case div.BoxPatternA p.Title strong {
	/*border: 1px solid #ccc;
    background: linear-gradient(45deg, #e5f9f7, #e0e5f1);*/
}

.Case div.BoxPatternA div.Inner {
	/*border: 1px solid #ccc;*/
}

/**youtube **/
a.ModalYouTubeLink:hover {
	opacity: 0.8;
}


@media screen and (max-width: 994px){
	.JS .EffectsArea .ColumnHalf {
		width: calc((100% / 2) - 45px);
	}
	.Under995 .WideSet .PageTitleStyle3>div h1 {
		padding-left: 0;
	}
	.JS .BoxPatternA .Title	{
		margin: 0;
	}
	
	.Under995 .WideSet .BoxPatternA>.Inner {
		padding-top: 1em;
	}
	.JS .WideSet.Under.Case .Inner.effect,
		.JS .WideSet.Under.Case .Inner.purpose {
			margin: 0 1em;
		}
		.JS .PageTop {
			padding: 0 1em;
		}
}

@media screen and (max-width: 767px){
	.JS .WideSet .EffectsArea dt.before:after {
		position: absolute;
		content:  url("/-/media/ind/flexworkplace/unifier_appself/image/under_arrow_uniapp.png");
		top: 104%;
		left: 45%;
	}
	.JS .WideSet .EffectsArea dd {
		margin-bottom: 15px;
		background: #fff;
	}
	.JS .WideSet.Under.Case .EffectsArea>.ColumnSet {
		/*
		padding: 1em;
		*/
		padding: 1em 1em 0;
/*		background: #efefef;*/
		background: #f1f1f1;
		margin-bottom: 2em;
	}
	
	.JS .WideSet.Case .EffectsArea .FirstItem dl {
		margin-bottom: 77px;
	}	
	
	.JS .WideSet.Under.Case p.CatchCopy {
		font-size: 110%;
	}
}

@media screen and (max-width: 579px){
	.JS .WideSet .EffectsArea dt.before:after {
		position: absolute;
		content:  url("/-/media/ind/flexworkplace/unifier_appself/image/under_arrow_uniapp.png");
		top: 104%;
		left: 45%;
	}

	
	.JS .EffectsArea .ColumnHalf {
		margin-bottom: 15px;
	}
	
	.JS .WideSet .EffectsArea dt.after {
		margin-top: 63px;
	}
	
	.JS .WideSet.Case .Inner.Contact.flex>.contact a {
	    padding:0 4px;
	}
	
	.JS .WideSet.Under.Case .CaseTitle p.CatchCopy {
		position: relative;
	}
}

@media screen and (max-width: 339px){
		.JS .WideSet .EffectsArea dt.after {
		margin-top: 75px;
	}
}