/*-----------------------
//COMMON
-----------------------*/
:root {
	--ColorRed 			:	#C4403F ;
	--ColorBlack		:	#4A4A4A ;
	--ColorGray 		:	#EFEFF0 ;
	--ColorLightGray 	:	#f1f1f1 ;
	--ColorWhite		:	#FFFFFF ;
	--ColorYellow		:	#E6B33E ;
	--ColorBlue			:	#747886 ;
	--ColorTxt			:	#8A8A8A ;
}

body {
	letter-spacing: 0.12em;
	line-height: 200%;
	font-size: 16px;
	color: var(--ColorTxt) !important;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.container-fluid {
	padding: 0 !important;
}

.cf {
	width: 100%;
}

.cf::after {
	content: "";
	display: block;
	clear: both; 
}

.SpSmall {
	display: none;
}

.SpMid {
	display: none;
}

.fs-10 {
	font-size: 10px;
}

.fs-12 {
	font-size: 12px;
}

.fs-13 {
	font-size: 13px;
}

.fs-14 {
	font-size: 14px;
}

.fs-16 {
	font-size: 16px;
}

.fs-20 {
	font-size: 20px;
}

.mt-100 {
	margin-top: 100px;
}

.text-custom-light {
	color: var(--ColorGray);
}

.Inner {
	width: 1200px;
	margin: 0 auto;
}

.ShortInner {
	width: 600px;
	margin: 0 auto;
}

.Site {
	overflow:hidden;
}

.SpPadding {
	padding-left: 10px;
	padding-right: 10px;
}

.ColorTxt {
	color: var(--ColorTxt);
}

.ColorRed {
	color: var(--ColorRed);
}

.ColorBlue {
	color: var(--ColorBlue);
}

.ColorYellow {
	color: var(--ColorYellow);
}

.ColorBlack {
	color: var(--ColorBlack);
}

.LineHeight {
	line-height: 150%;
}

.letter-spacing-5 {
	letter-spacing: 5px;
}

.ListStyleDisc {
	list-style: disc !important;
}

table.table th,
table.table td {
	padding: 25px 20px;
	border-bottom: solid 1px var(--ColorGray);
	color: var(--ColorTxt);
}

table.table th {
	white-space: nowrap;
}

.map {
	position: relative;
	width: 100%;
	padding-top: 40%;
	/* 16:9のアスペクト比 */
	height: 0;
}

.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.w-100px {
	width: 100px;
}

.w-200px {
	width: 200px;
}

.JostFont {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

#PageTop {
	position: fixed;
	right: 10px;
	bottom: 50%;
	z-index: 9;
	display: none;
}

#PageTop span {
	writing-mode: vertical-rl;
	position: relative;
	cursor: pointer;
}

#PageTop span:before {
	content: "";
	width: 1px;
	height: 20px;
	background: var(--ColorBlack);
	display: block;
	position: absolute;
	left: 50%;
	top: -30px;
	transform: translate(-50%, 0);
}


/*-----------------------
//HEADER
-----------------------*/
header {
	position: fixed;
	background: var(--ColorWhite);
	width: 100% !important;
	z-index: 10;
	box-shadow: 1px 1px 5px 1px #e6e6e6;
	height: 53px;
	top: 0;
}

header .hdrLogo img {
	width: 120px;
	margin: 17px 0 0 10px;
}

header .hs01 {
	background: var(--ColorRed);
	display: block;
	line-height: 53px;
	padding: 0 10px;
	height: 53px;
	font-size: 16px;
}

header .hs01:before {
	content: "\f0e0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 16px;
	margin-right: 10px;
}

header .HeaderMenuList {
	text-align: right;
	display: inline-block;
}

header .GlobalNav {
	text-align: right;
	display: initial;
}

header .GlobalNav li {
	display: inline-block;
}

header .headerFloat {
	float: left;
}

header .headerFloat1 {
	width: 13%;
}

header .headerFloat2 {
	width: 87%;
}

header .headerFloat3 {
	width: 100%;
}

header .HeaderLink {
	width: 200px;
	display: inline-block;
	text-align: center;
}

header .HeaderLink a:hover {
	opacity: .7;
}

header .RecruitLink a {
	background: var(--ColorYellow);
}

header .ContactLink {
	margin-left: -6px;
}


/*-----------------------
//メガドロップ
-----------------------*/
header .GlobalNavItem {
	margin: 0 10px;	
}

header .GlobalNavItem a {
	display: inline-block;
	height: 53px;
	line-height: 53px
}

header .HeaderMenu {
	position: relative;
	text-align: center;
	list-style: none;
	padding: 0;
}

header .HeaderMenu li {
	display: inline-block;
}

header .HeaderMenu li:hover {
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

header .MegaMenuSecond {
	visibility: hidden;
	opacity: 0;
	border-bottom: none;
}

header .MegaMenu .MegaMenuSecond {
	position: fixed;
	top: 70px;
	left: 0;
	width: 100%;
	padding: 30px 20px 30px 20px;
	box-sizing: border-box;
	text-align: left;
	box-shadow: 1px 3px 5px -2px var(--ColorGray);
	background: rgba( 255 , 255 , 255 , .9 );
}

header .MegaMenu:hover .MegaMenuSecond {
	top: 51px;
	visibility: visible;
	opacity:1;
}

header .HeaderMenu .MegaMenuSecond a {
	height: auto;
	line-height: initial;
	margin: 8px 4px;
}

header .MegaMenuSecond li {
	width: 14.285%;
	border-bottom: none;
	vertical-align: top;
}

header .MegaMenuSecond li img {
	width: 100%;
}

header .DropMenuLi {
	padding: 0;
	width: 250px;
}

header .DropMenuLi:active {
	background: none;
}

header .DropMenuLi:hover {
	opacity: .7;
}

header .DropMenuLi a {
	font-size: 12px;
	color: var(--ColorTxt) !important;
}


/*-----------------------
//メインビジュアル
-----------------------*/
.mvTop img {
	margin-top: 53px;
	width: 100%;
}


/*-----------------------
//BTN
-----------------------*/
.Btn a ,
button.Btn {
	display: inline-block;
	padding: 18px 20px;
	text-align: center; 
	font-weight: bold;
	width: 300px;
}

.WhiteBtn a ,
button.WhiteBtn {
	color: var(--ColorRed);
	background: var(--ColorWhite);
}

.RedBtn a ,
button.RedBtn {
	color: var(--ColorWhite);
	background: var(--ColorRed);
}

.YellowBtn a ,
button.YellowBtn {
	color: var(--ColorWhite);
	background: var(--ColorYellow);
}


/*-----------------------
//TOP
-----------------------*/
.CatchPhrase .CatchPhraseTxt {
	font-size: 58px;
}

.Feature {
	position: relative;
	background: var(--ColorRed);
	padding: 140px 84px 70px 84px; 
	letter-spacing: 3px;
	margin-bottom: 130px;
}

.Feature:before {
	position: absolute;
	content:"";
	width: 340px;
	height: 100%;
	background: var(--ColorWhite);
	top: 0;
	right: 0;
	z-index: 0;
}

.Feature:after {
	position: absolute;
	content:"";
	width: 500px;
	height: 100%;
	background: var(--ColorRed);
	top: 0;
	left: 0;
	z-index: 0;
}

.HeadingTtl {
	font-size: 90px;
	letter-spacing: 20px;
	white-space: nowrap;
}

.HeadingImg {
	position: absolute;
	top: 270px;
	right: 0%;
	z-index: 0;
}

.HeadingSubTtl {
	font-size: 12px;
	white-space: nowrap;
}

.HeadingTxt {
	font-size: 34px;
}

.Strength .StrengthImg {
	height: 700px;
	object-fit: cover;
}

.Strength .HeadingTtl {
	position: relative;
	left: -97px;
}

.ContactUs .ContactUsBg {
	background: url(../images/dot.png) , url(../images/img_cmn_01.jpg) no-repeat 50% 50%;
	/*background-size: cover;*/
	height: 100%;
}


/*-----------------------
//下層共通
-----------------------*/
#effect_01 img {
	opacity: 0;
}

#effect_01 .block-revealer__content img {
	opacity: 1;
}

.LowerTtlWrap {
	position: absolute;
	left: 100%;
	bottom: -11px;
}

.LowerTtl {
	font-size: 3rem;
	margin-top: 100px;
}

.LowerHeadingImgRight {
	position: absolute;
	right: 0;
	z-index: -2;
}

.LowerHeadingLayer {
	position: relative;
	z-index: 0;
	min-height: 660px;
	margin-top: 60px;
}

.LowerHeadingLayer:before {
	position: absolute;
	content:"";
	width: 100%;
	height: 100%;
	background: var(--ColorWhite);
	top: 0;
	right: 3px;
	z-index: -1;
}

.CeoName {
	width: 120px;
}

.CircleIcon {
	position: relative;
	padding-left: 40px !important;
}

.CircleIcon:before {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	background: var(--ColorYellow);
	border-radius: 100px;
	top: 50%;
	left: 16px;
	transform: translate(0, -50%);

}

.SystemReq {
	background: var(--ColorGray);
	padding: 20px;
}

.BigIcon {
	font-size: 40px;
}

.required {
	background: var(--ColorRed);
}

.HT_margin {
	margin: 70px 0 40px;
}

.LowerUpside {
	margin-top: 53px;
}

a[href^="tel:"] {
	pointer-events: none;
}

.StepNum {
	right: 5px;
	top: 0px;
	background: var(--ColorBlue);
	color: var(--ColorWhite);
	height: 40px;
	line-height: 40px;
	width: 40px;
	text-align: center;
}

.composition li:not(:last-child) {
	display: inline-block;
	color: var(--ColorBlue);
	background: var(--ColorGray);
	padding: 5px 10px;
	margin-bottom: 5px;
	font-weight: bold;
}

.composition li:last-child {
	display: inline-block;
	vertical-align: bottom;
	margin-left: 5px;
}


/*-----------------------
//FOOTER
-----------------------*/
footer {
	background: var(--ColorBlue);
}

footer .GlobalNavItem a {
	display: block;
	margin-bottom: 10px;
	color: var(--ColorWhite);
}

footer .GlobalNavItem a:hover {
	color: var(--ColorWhite) !important;
}

footer .CopyRight {
	background: var(--ColorBlack);
}



/*------------------------------------------
//レスポンシブ responsive
------------------------------------------*/
@media only screen and (max-width: 1199px) {

	/*----------------------
	//COMMON
	----------------------*/
	.Inner {
		width: 100%;
	}

	.SpMid {
		display: block;
	}

	#PageTop {
		right: -6px;
		bottom: 5px;
	}


	/*----------------------
	//HEADER
	----------------------*/
	header .GlobalNav {
		position: fixed;
		right: -320px;
		top: 0;
		width: 315px;
		height: 100vh;
		padding-top: 40px;
		background-color: var(--ColorWhite);
		transition: all .6s;
		z-index: 200;
		overflow-y: auto;
		padding-right: 5px; 
		padding-left: 5px; 
	}

	header .GlobalNav li 	,
	header .GlobalNav li a {
		display: block;
	}

	header .HeaderLink {
		width: 48.9%;
		margin-bottom: 5px;
	}

	header .ContactLink {
		margin-left: 0px;
	}

	header .hamburger {
		position: absolute;
		right: 20px;
		top: 7px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 300;
	}

	header .GlobalNavItem {
		text-align: center;
		margin: 0;
	}

	header .GlobalNavItem a {
		display: block;
		padding:  0;
		text-decoration: none;
	}

	header .HeaderMenuList {
		text-align: left;
		display: block;
		width: 100%;
	}

	header .HamburgerLine {
		position: absolute;
		left: 11px;
		width: 18px;
		height: 1px;
		background-color: var(--ColorBlack)!important;
		transition: all .6s;
	}

	header .HamburgerLine1 {
		top: 14px;
	}

	header .HamburgerLine2 {
		top: 20px;
	}

	header .HamburgerLine3 {
		top: 26px;
	}

	header .BlackBg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		opacity: 0;
		visibility: hidden;
		transition: all .6s;
		cursor: pointer;
		background: #000;
	}

	.NavOpen .BlackBg {
		opacity: .8;
		visibility: visible;
	}

	header .headerFloat {
		float: none;
		width: 100%;
		display: block;
	}

	.NavOpen .GlobalNav {
		right: 0;
		padding-bottom: 30px;
	}

	.NavOpen .HamburgerLine1 {
		transform: rotate(45deg);
		top: 20px;
	}

	.NavOpen .HamburgerLine2 {
		width: 0;
		left: 50%;
	}

	.NavOpen .HamburgerLine3 {
		transform: rotate(-45deg);
		top: 20px;
	}



	/*-----------------------
	//メガドロップ
	-----------------------*/
	header .MegaMenu .MegaMenuSecond {
		position: static;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	header .MegaMenuSecond {
		visibility: initial;
		opacity: 1;
	}

	header .MegaMenuSecond li {
		width: 100%;
		display: block;
		padding-left: 10px;
	}

	header .DropMenuLi img {
		display: none;
	}

	header .DropMenuLi:hover {
		opacity: 1;
	}

	header .DropdownToggle {
		text-align: left;
	}

	header .GlobalNavItem a {
		padding: 12px 10px 12px;
		font-size: 12px;
		height: auto;
		line-height: initial;
		text-align: left;
		border-bottom: solid 1px var(--ColorGray);
		margin: 8px 4px;
	}

	header .SpArrow a {
		background: url(../images/icon_cmn_01.png) no-repeat right 8px center;
		background-size: 5px;
	}




/*▲@media only screen and (max-width: 1199px)▲*/
}



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



/*▲@media only screen and (max-width: 991px)▲*/
}



@media only screen and (max-width: 767px) {
	/*----------------------
	//COMMON
	----------------------*/
	.SpSmall {
		display: block;
	}

	.PcSmall {
		display: none;
	}

	.ShortInner {
		width: 100%;
	}

	.SpPadding {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	table.table th,
	table.table td {
		width: 100%;
		display: block;
		padding: 10px; 
	}

	table.table th {
		background: var(--ColorGray);
	}


	/*-----------------------
	//BTN
	-----------------------*/
	.Btn a {
		width: 100%;
	}


	/*----------------------
	//TOP
	----------------------*/
	.CatchPhrase .CatchPhraseTxt {
		font-size: 25px;
	}

	.HeadingTtl {
		font-size: 3.2rem;
	}

	.HeadingTxt {
		font-size: 29px;
	}

	.Feature {
		margin-bottom: 0;
		padding: 15px 0px;
	}

	.Feature:before,
	.Feature:after {
		content: none;
	}

	.Feature .HeadingImg {
		position: relative;
		right: 0;
		top: 0;
		width: calc(100% + 10px);
	}

	.Feature .HeadingImg img {
		width: calc(100% + 10px);
	}

	.Strength .StrengthImg {
		height: 350px;
	}

	.Strength .HeadingTtl {
		position: static;
	}

	.Service {
		background: #FAFAFA;
	}


	/*-----------------------
	//下層共通
	-----------------------*/
	.LowerTtl {
		font-size: 2rem;
		margin-top: 70px;
		margin-bottom: 30px;
	}


	.LowerPage .HeadingTtl{
		font-size: 16px;
		letter-spacing: 10px;
		line-height: 100%;
	}

	.LowerHeadingImgRight {
		position: static;
		width: calc(100% + 10px);
	}

	.LowerHeadingImgRight img {
		position: relative;
		right: 0px;
		width: calc(100% + 10px);
	}

	.LowerHeadingLayer {
		min-height: auto;
		margin-top: 0;
	}

	.LowerTtlWrap {
		position: static;
	}

	.SystemReq {
		padding: 20px 7px;
	}

	.BigIcon {
		font-size: 30px;
	}

	.HT_margin {
		margin: 24px 0;
	}

	.map {
		padding-top: 80%;
	}

	.EffectImgAdjust {
		width: calc(100% - 10px);
	}

	a[href^="tel:"] {
		pointer-events: auto;
	}

	.StepNum {
		right: 3px;
	}


	/*----------------------
	//FOOTER
	----------------------*/
	footer .GlobalNavItem a {
		margin: 0px;
		padding: 7px 10px 7px;
	}

	footer {
		padding-top: 0px;
	}

/*▲@media only screen and (max-width: 767px)▲*/
}