@charset "utf-8";
: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;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
	--WhiteOp: #ffffffe6;
	--BlackOp: rgba(0, 0, 0, 0.08);
}
	html {
	scroll-behavior: smooth;
}
.GridSet {
	max-width: var(--wide);
}
body * {
	font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
}
#Contents #FloatingContacts button {
	background-color: var(--Red2)!important;
}
.PageTitleStyle3 {
	max-height: 600px;
}
.PageTitleStyle3 img {
	width: 100%;
}
#Contents .Grid3 h2::before {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	background: var(--Red1_20_Tint);
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;;
}
#Contents .Grid3 h2 {
	position: relative;
	display: flex;
	text-align: left;
	padding: .5em;
	color: var(--Gray5);
	font-size: 1.8em;
	z-index: 1;
}
#Contents .Grid3 .BoxPatternC {
	border: none;
	background: var(--Gray1);
}
#Contents .Grid3 .BoxPatternC h2::before {
	content: none;
}
#Contents .Grid3 .BoxPatternC h2 {
	padding: 0;
	margin: 0 0 .5em;
}
.Grid3 h3 {
	background: linear-gradient(45deg, var(--Red1_20_Tint), var(--WhiteOp));
	border: none;
	margin: 0 0 1em 80px;
	padding: 1em;
	font-size: 1.5em;
	color: var(--Gray6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.Grid3 h4::before {
	content: none;
}
.Grid3 h4 {
	background: transparent!important;
	margin: 0 0 1em;
	padding: 0;
	font-size: 1.2em;
	color: #444!important;
}
.Grid3 .TextStyle1 {
	font-size: 1em;
}

.PageTitleStyle3 {
	position: relative;
	max-height: 600px;
	overflow-y: hidden;
}
.PageTitleStyle3 .Title {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,.8);
	color: var(--White);
	font-size: 2em;
	display: flex;
	flex-flow: column;
	box-sizing: border-box;
	width: 100%;
	padding: .5em;
}
.PageTitleStyle3 .Title span {
	font-size: .6em;
	display: block;
}
.Grid3 .TextStyle3 {
	display: flex;
	justify-content: flex-end;
}
.Grid3 .TextStyle3 span {
	margin: 0 .25em;
}
.Grid3 .Catch {
	font-size: 1.4em;
	font-weight: bold;
	color: var(--Gray4);
	padding: 1em 0;
}
.Grid3 .BeforeAfter {
	border: none;
    border-collapse: separate;
    border-spacing: .15em;
}
.Grid3 .BeforeAfter thead th {
	font-size: 1.6em;
	font-weight: bold;
	border: none;
}
.Grid3 .BeforeAfter thead th:nth-of-type(2) {
	color: var(--Gray5);
}
.Grid3 .BeforeAfter thead th:nth-of-type(4) {
	color: var(--Red2);
}
.Grid3 .BeforeAfter thead th span {
	font-size: .8em;
	margin: 0 .25em 0 0;
}
.Grid3 .BeforeAfter th {
	background: transparent;
}
.Grid3 .BeforeAfter td:nth-of-type(1),
.Grid3 .BeforeAfter td:nth-of-type(3) {
	width: 44%;
	font-weight: bold;
	font-size: 1.2em;
	color: var(--Gray4);
}
.Grid3 .BeforeAfter td:nth-of-type(3) {
	color: var(--Gray6);
}
.Grid3 .BeforeAfter tbody th {
	border: none;
	font-size: 2em;
	background: var(--Red2);
	color: var(--White);
	text-align: center;
}
.Grid3 .BeforeAfter tbody td {
	border-top: none;
	border-left: none;
	border-right: none;
}
#Contents .Grid1 h2 {
	font-size: inherit;
	text-align: inherit;
}
.Grid3 .BoxPatternC {
	padding: 1em;
}
.Grid3 .Flexbox {
	display: flex;
	flex-flow: row;
	width: 100%;
	box-sizing: border-box;
}
.Grid3 .Flexbox.ImgTxt {
	justify-content: flex-start;
}
.Grid3 .Flexbox.Half {
	justify-content: center;
}
.Grid3 .Flexbox.ImgTxt li.Img,
.Grid3 .Flexbox.Half li.Img  {
	width: 40%;
	text-align: center;
}
.Grid3 .Flexbox.ImgTxt li.Txt {
	width: 60%;
}
.Grid3 .Button {
	width: 250px;
	margin: auto;
}
.Grid3 .Section.Link {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.Grid3 .Button a:link,
.Grid3 .Button a:visited {
	color: var(--White);
	background: var(--Gray5);
	border-radius: 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	padding: .5em 1em;
	display: block;
	width: 100%;
	text-align: center;
	transition: .08s ease-in;
	opacity: 1;
}
.Grid3 .Button a:hover {
	opacity: .9;
	text-decoration: none;
}
@media screen and (max-width: 994px) {
	.JS .GridSet {
		padding: 0 1em;
	}
	.JS .Grid3 {
		padding: 0;
	}
	.JS .PageTitleStyle3 {
		max-height: 300px;
	}
	.JS .PageTitleStyle3 h1 {
		margin: 0;
	}
	.JS .PageTitleStyle3 .Title {
		font-size: 1.2em;
	}
}
@media screen and (max-width: 767px) {
	br.PC {
		display: none;
	}
	.JS .GridSet {
		padding: 0;
	}
	.JS .Grid1 {
		margin: 0;
	}
	.JS .Section {
		padding: 1em;
		width: auto;
	}
	.JS .PageTitleStyle3 .Title {
		position: relative;
	}
	.JS .Grid3 .Section.Link {
		flex-flow: column;
		justify-content: center;
	}
	.JS .Grid3 .Section.Link .Button {
		margin: auto auto 1em;
	}
}
@media screen and (max-width: 579px) {
	.JS .PageTitleStyle3 {
		overflow-y: inherit;
		max-height: inherit;
	}
	.JS .Grid3 .BeforeAfter td:nth-of-type(1),
	.JS .Grid3 .BeforeAfter td:nth-of-type(3) {
		font-size: 1em;
	}
	.JS .Grid3 .BeforeAfter thead th {
		text-align: center;
	}
	.JS .Grid3 .BeforeAfter thead th span {
		display: block;
	}
	.JS .Flexbox {
		flex-flow: column;
	}
	.JS .Grid3 .Flexbox.ImgTxt li.Img,
	.JS .Grid3 .Flexbox.ImgTxt li.Txt,
	.JS .Grid3 .Flexbox.Half li.Img {
		width: 100%;
		margin: 001em
	}
}