@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;
}

html {
	scrollbar-width: auto;
}

html body {
	font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
}

body a:link {
	color: var(--Red2);
}
body a:visited {
	color: var(--Red1_40_Dark);
}
body a:hover,
body a:active {
	color: var(--Red2);
}
body a:link *,
body a:visited *,
body a:hover *,
body a:active * {
	color: inherit;
}

#HeaderArea2 .MMGlobalNaviStyle a {
	line-height: 60px;
}

#HeaderArea2 .MMGlobalNaviStyle.Current a strong,
#HeaderArea2 .MMGlobalNaviStyle.Current a em {
	line-height: 60px;
}

#HeaderArea2 .MMSet {
	top: 100%;
}

body #Contents {
	padding-bottom: 0;
}

body .GridSet:has(.Grid4) {
	width: 100%;
}

body #FloatingContacts {
	width: 100%;
	margin-left: 0;
}

.Grid4 .parts-bottom-cta h2::after {
	display: none;
}

#Contents .wrapper {
	max-width: var(--wide);
	margin: 0 auto;
}

body h2 {
	margin: 0 0 5px;
	background: none;
}

.GridSet .Grid4.Sub .PageTitleStyle3 .Inner {
	width: var(--wide);
}

.GridSet .Grid4 .Section .Inner {
	max-width: var(--wide);
}

.GridSet .button-white-yellow,
.GridSet .button-white-yellow:link,
.GridSet .button-white-yellow:visited,
.GridSet .button-yellow,
.GridSet .button-yellow:link,
.GridSet .button-yellow:visited {
	color: var(--Black);
	text-decoration: none;
}
.GridSet .button-white-yellow::after,
.GridSet .button-yellow::after {
	border-color: var(--Black);
}
.GridSet .button-yellow,
.GridSet .button-yellow:link,
.GridSet .button-yellow:visited {
	background-color: var(--Gray3);
}
.GridSet .button-white-yellow,
.GridSet .button-white-yellow:link,
.GridSet .button-white-yellow:visited {
	border-color: var(--Gray3);
}

.GridSet .hedding-block h2.underline::after {
	background-color: var(--Gray3);
}

.GridSet h2.t-wan span {
	color: var(--Black);
}

.GridSet h3.t-wan {
	color: var(--Gray6);
	border-color: var(--Gray2);
}

.GridSet .Grid4.Sub h3.t-wan {
	color: var(--Gray5);
}

.GridSet .Grid4.Sub.License h3,
.GridSet .Grid4.Sub.Movie h3 {
	border-color: var(--Gray2);
}

.GridSet h3 a {
	color: var(--Gray5);
}

.GridSet ol li h3 {
	color: var(--Gray6);
}

.page-links .content-block ul a {
	color: var(--Black);
}

.wrapper .top-cta {
	padding-left: 15px;
	padding-right: 15px;
}

.GridSet .top-cta,
.GridSet .parts-bottom-cta {
	background: var(--Gray2);
}

.GridSet .parts-bottom-cta .content-block ul li a {
	height: 100%;
	box-sizing: border-box;
}

.parts-bottom-cta .content-block ul li a {
	color: var(--Black);
	text-decoration: none;
}

.GridSet .Grid4 .Section .Inner h2 a:link,
.GridSet .Grid4 .Section .Inner h2 a:hover,
.GridSet .Grid4 .Section .Inner h2 a:visited,
.GridSet .Grid4 .Section .Inner h2 a:active {
	color: var(--Black);
	text-decoration: none;
}

body .FatMenuWide {
	background-color: var(--Gray5);
}

body .FatMenuWide a:link,
body .FatMenuWide a:visited {
	background-color: var(--Gray5);
}
body .FatMenuWide a:hover,
body .FatMenuWide a:active {
	background-color: var(--Gray4);
}

body #FloatingContacts form {
	background-color: rgba(115, 115, 115, 0.555);
}

body #FloatingContacts .Inner {
	width: auto;
	max-width: 1275px;
	padding-left: 15px;
	padding-right: 15px;
}

body #FloatingContacts li {
	width: 50%;
}

body #FloatingContacts button {
	background-color: var(--Red2);
}
body #FloatingContacts button:hover,
body #FloatingContacts button:active {
	background-color: var(--Black);
}

body #FloatingContacts .Inner button.btnContact {
	background-image: url(/-/media/image/renew/icon_button_contact.png);
	border-radius: 10px;
}
body #FloatingContacts .Inner button.btnDocument {
	background-image: url(/-/media/image/renew/icon_button_document.png);
	border-radius: 10px;
}

.Grid1 .Section {
	text-align: left;
}

.Grid3 .includeColumnCtaBlock {
	padding-bottom: 65px;
}

.nwp {
	white-space: nowrap;
}

ol.NoMarker {
	list-style-type: none;
}

#Contents .Writer_area {
	display: block !important;
	width: auto !important;
}

#FooterArea a[target="_blank"] {
	padding-right: 0;
	background-image: none;
}

/*トップページ*/
.GridSet .main-visual .content-block .image-box {
	max-width: 470px;
}

.GridSet .about .content-block .text-box p strong {
	text-decoration-color: var(--Gray3);
}

.GridSet section.about {
	background-color: var(--Gray1);
}

.GridSet section.problem .content-block {
	justify-content: center;
	align-items: center;
	gap: 1rem 2rem;
}

.GridSet section.problem .image-box {
	max-width: 350px;
}

.GridSet section.solution {
	background-color: var(--Gray1);
}

.GridSet section.solution h2::after {
	background-color: var(--Gray3);
}

.GridSet section.solution .content-block .solution-list .solution-item ul li::before {
	color: var(--Gray3);
}

.GridSet .use-case .content-block {
	background-color: var(--Gray1);
}

.GridSet .use-case .content-block .text-box ol li::before {
	background-color: var(--Gray3);
}

.GridSet section.faq {
	background-color: var(--Gray1);
}

.GridSet section.faq .content-block ul li {
	border-bottom-color: var(--Gray3);
}

.GridSet section.faq .content-block ul li .question::before {
	color: var(--Gray4);
}

.GridSet section.faq .content-block ul li .answer p::before {
	color: var(--Red2);
}

.GridSet section.solution .content-block .solution-list .solution-item {
	width: 300px;
	max-width: calc((100% - 45px) / 4);
}

.GridSet section.solution .content-block .solution-list .solution-item img {
	width: 150px;
}

.Grid4 section.main-visual ~ section h2 {
	color: var(--Gray5);
}

/*4Gridページ（グロナビ・フッター項目ページなど）*/
section.hero.about {
	background-color: var(--Green2);
}

.GridSet .Grid4.Sub.Spec .PageTitleStyle3 {
	background-color: var(--Purple1);
}

section.hero.faq {
	background-color: var(--Green2);
}

section.hero.support {
	background-color: var(--Green2);
}

.Grid4.Sub.Sitemap .PageTitleStyle3 {
	background-color: var(--Green1);
}

.Grid4.Sub.Merit .PageTitleStyle3 {
	background-color: var(--Green2);
}

.Grid4.Sub.Trial .PageTitleStyle3 {
	background-color: var(--Green1);
}

.Grid4.Sub.Comic .PageTitleStyle3 {
	background-color: var(--Green1);
}

section.hero .content-block h1 {
	border-color: var(--Gray2);
}

.GridSet .Grid4.Sub .PageTitleStyle3 .Inner h1 {
	border-color: var(--Gray2);
}

.GridSet .PageTitleStyle1.t-wan h1 a {
	color: var(--Black);
}

section ol li h3::before {
	background-color: var(--Gray2);
}

section.cta {
	background: var(--Gray2);
}

section.feature .content-block ol li .automation-image {
	justify-content: center;
	max-width: 965px;
	margin: 0 auto;
}

section.feature .content-block ol li .text-image .style-p3 {
	width: calc(64.7% - 60px);
}

section.feature .content-block ol li .text-image .image-box {
	width: 35.3%;
}

section.merit .content-block ol li .service-box ul {
	max-width: 966px;
	margin: 0 auto;
}

section.merit .content-block ol li .service-box ul li {
	width: calc((100% - 66px) / 3);
}

.GridSet .Grid4.Sub .Toggle table.TableStyle3.t-wan tr th {
	background-color: var(--Gray3);
	color: var(--Black);
}

.Grid4.Sub .Toggle .TextStyle2 span {
	color: var(--Gray4);
	background-color: var(--Gray1);
}

.GridSet .Grid4.Sub .Toggle table.TableStyle3.t-wan tr td.OnP {
	background-color: rgba(204, 0, 0, 0.5);
}

.GridSet .Grid4.Sub .Toggle table.TableStyle3.t-wan tr td.SaaS {
	background-color: rgba(204, 0, 0, 0.5);
}

.GridSet .Grid4.Sub .Toggle table.TableStyle3.t-wan tr td.Off {
	color: var(--Gray4);
	background-color: var(--Gray1);
}

.GridSet .Grid4.Sub.Spec .TableStyle3.ExSp th:nth-of-type(1) {
	background-color: rgba(204, 0, 0, 0.7);
}

.GridSet .Grid4.Sub.Spec .TableStyle3.ExSp th:nth-of-type(2) {
	background-color: rgba(204, 0, 0, 0.5);
}

.GridSet .Grid4.Sub .Flexbox.Button li.Spec a {
	background: rgba(204, 0, 0, 0.7);
}

.GridSet .Grid4.Sub .Flexbox.Button li.Case a {
	background-color: rgba(204, 0, 0, 0.5);
}

.GridSet .Sub.License .TableStyle3 tr:first-child th:nth-of-type(1) {
	background-color: var(--Gray4);
}

.GridSet .Sub.License .TableStyle3 tr:first-child th:nth-of-type(2),
.GridSet .Sub.License .TableStyle3 tr:first-child th:nth-of-type(3),
.GridSet .Sub.License .TableStyle3 tr:first-child th:nth-of-type(4) {
	background-color: var(--Gray3);
}

.GridSet .Sub.License .TableStyle3 tr:first-child + tr th:nth-of-type(1),
.GridSet .Sub.License .TableStyle3 tr:first-child + tr th:nth-of-type(2),
.GridSet .Sub.License .TableStyle3 tr:first-child + tr th:nth-of-type(2),
.GridSet .Sub.License .TableStyle3 tr:first-child + tr th:nth-of-type(3),
.GridSet .Sub.License .TableStyle3 tr:first-child + tr th:nth-of-type(4) {
	background-color: var(--Gray2);
}

.GridSet .Sub.License .TableStyle3 td:nth-of-type(1) {
	background-color: var(--Gray3);
}

.GridSet .Sub.License .TableStyle3 td:nth-of-type(2),
.GridSet .Sub.License .TableStyle3 td:nth-of-type(3),
.GridSet .Sub.License .TableStyle3 td:nth-of-type(4),
.GridSet .Sub.License .TableStyle3 td:nth-of-type(5) {
	background-color: var(--Gray1);
}

section.use-case .content-block .text-box h3 {
	color: var(--Black);
	border-color: var(--Gray2);
}

section.use-case + .Section .ColumnList {
	margin: 0 auto;
}

section.use-case + .Section .ColumnList li {
	width: calc((100% - 24px) / 3);
}

section.system-integration .content-block .image-list-box .image-box {
	width: 342px;
}

section.system-integration .content-block .image-list-box .list-box {
	width: calc(100% - 452px);
}

.GridSet .Sub.Useful .Section .Column2 h3#Column {
	background-color: var(--Green1);
}

.GridSet .Sub.Useful .Section .Column2 h3#Smart {
	background-color: var(--Blue1);
}

.GridSet .Sub.Useful .Section h3#Trial {
	background-color: var(--Orange1);
}

.GridSet .Sub.Useful .Section h3#Video {
	background-color: var(--Yellow2);
}

.GridSet .Sub.Useful .Section h3#Comic {
	background-color: var(--Yellow1);
}

.GridSet h2.t-wan span {
	padding-bottom: 0.6em;
}

.GridSet p.Faq {
	color: var(--Gray5);
}

.GridSet .support .content-block .item .scroll table th {
	background-color: var(--Gray2);
}

.GridSet .support .content-block .item .scroll table td {
	background-color: var(--Gray1);
}

.GridSet .support .content-block .item .image-text .image-box {
	width: 300px;
}

.GridSet .support .content-block .item .image-text .text-box {
	width: calc(100% - 340px);
}

.GridSet .Grid4 .Section.Read {
	background-color: var(--Gray1);
}

.GridSet .Grid4.Sub.Useful .Section.Read {
	background-color: rgba(244, 244, 244, 0.2);
}

.GridSet .Grid4 .Section.Sax {
	background-color: var(--Gray2);
}

.GridSet .page-links .card {
	background-color: var(--Gray1);
}

.GridSet .page-links .content-block ul li a {
	border-color: var(--Gray3);
}

section.cta .content-block p strong {
	text-decoration-color: var(--Gray4);
}

section.cta .hedding-block .image-box {
	width: 405px;
}

.Grid4 .Wide965 {
	max-width: 965px;
	margin-left: auto;
	margin-right: auto;
}

.Grid4 .Manga h3.Button a {
	background-color: var(--Red2);
}
.Grid4 .Manga h3.Button a:hover,
.Grid4 .Manga h3.Button a:active {
	background-color: var(--Black);
}

.Grid4 .Manga {
	border-color: var(--Red2);
}

.GridSet .Grid4.Sub .BoxPatternC {
	background-color: var(--Gray1);
}

.Comic .BoxPatternC > .ClearFix .TextStyle1.Name > span {
	background-color: var(--Gray2);
}

.BoxPatternC > .ClearFix .TextStyle1 {
	border-color: var(--Red2);
}

.GridSet .Grid4.Sub.Comic .Problem .Inner h2 span {
	color: var(--Gray5);
	background-color: var(--Gray2);
}

.GridSet .Grid4.Sub.Comic .Problem .ListStyle1 li {
	color: var(--Gray4);
}

.GridSet .Indicator li.Current a,
.GridSet .Indicator li.Current a span {
	color: var(--Red2);
}

.GridSet .Grid4.Sitemap .Section .Inner ul {
	background-color: var(--Gray1);
}

.GridSet .Grid4.Sub.Useful .Section .Column2 h3 a {
	color: var(--Gray6);
}

.GridSet .Grid4.Sub .Toggle table.TableStyle3.t-wan tr td {
	border-color: var(--Gray2);
}

.GridSet .Grid4.Sub.Spec .Section .Inner h2 span {
	color: var(--Gray6);
}

.GridSet .Grid4 .Section.Gray {
	background-color: var(--Gray1);
}

.GridSet .Grid4.Sub.Column .Section {
	border-color: var(--Gray3);
}

.TimelineContainer {
	color: var(--Black);
}

.TimelineContainer .smart_day_box.time0900 {
	color: var(--Black);
}

.TimelineContainer .smart_day_box.time1000 {
	color: var(--Black);
	background-color: var(--Gray1);
}

.TimelineContainer .smart_day_box.time1100 {
	background-color: var(--Gray4);
}

.TimelineContainer .smart_day_box.time1115 {
	color: var(--Black);
	background-color: var(--Gray1);
}

.TimelineContainer .smart_day_box.time1300 {
	background-color: var(--Gray1);
}

.TimelineContainer .smart_day_box.time1400 {
	color: var(--Black);
	background-color: var(--Gray2);
}

.TimelineContainer .smart_day_box.time1430 {
	background-color: var(--Gray1);
	min-height: 370px;
}

.TimelineContainer .smart_day_box.time1630 {
	background-color: var(--Gray2);
}

.TimelineContainer .smart_day_box.time1800 {
	color: var(--Black);
	background-color: var(--Gray3);
}

/*3Gridページ（ライブラリーページ・コラムページなど）*/
.Grid3 .Wide720 {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.Grid3 div.BoxPatternB {
	padding-top: 15px;
}

.Grid3 div.BoxPatternB div.Inner {
	background-color: var(--Gray1);
	padding: 0;
}

.Grid3 div.BoxPatternB div.Inner {
	background-color: var(--Gray1);
}

.Grid3 .EffectsArea {
	border-color: var(--Gray2);
}

.EffectsArea div.ProblemEffect {
	width: 100%;
}

.EffectsArea div.ProblemEffect dl {
	width: calc(50% - 7px);
	vertical-align: top;
}

.EffectsArea div.ProblemEffect dl dd {
	width: calc(100% - 83px);
	min-height: 70px;
	box-sizing: border-box;
}

.EffectsArea div.ProblemEffect dl.Problem dd {
	background-color: var(--Gray1);
}

.EffectsArea div.ProblemEffect dl.Effect dd {
	background-color: rgba(204, 0, 0, 0.1);
}

.EffectsArea div.ProblemEffect div.Arrow {
	margin-top: 27px;
}

.Grid3 div.LV1CopySet {
	background-image: none;
	background-color: var(--Gray5);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.Grid3 div.LV1CopySet h2 {
	padding-bottom: 7px;
	background-image: none;
}

.Grid3 div.LV1CopySet p {
	background-color: var(--Gray1);
	border-color: var(--Gray3);
}

.Grid3 div.BoxPatternA.BoxA06 {
	background-image: none;
	border-color: var(--Gray2);
	border-radius: 4px;
}

.Grid3 div.BoxPatternA.BoxA06 div.Container {
	padding-top: 15px;
	background-image: none;
}

.Grid3 div.BoxPatternA.BoxA06 div.Inner {
	background-image: none;
}

.Grid3 div.BoxPatternA.BoxA07 {
	background-image: none;
	background-color: var(--Gray1);
	border-color: var(--Gray3);
}

.Grid3 .BoxPatternA.BoxA07 h2 {
	background-image: none;
	background-color: var(--Gray5) !important;
	border-color: var(--Gray3);
}

.Grid3 .BoxPatternA.BoxA07 h2 strong {
	background-image: none;
}

.Grid3 div.BoxPatternA.BoxA07 div.Inner {
	background-image: none;
}

.Grid3 div.CustomerProfile {
	border-color: var(--Gray4);
}

.Grid3 div.CustomerProfile h2 {
	color: var(--Black);
	border-color: var(--Gray5);
	background-color: var(--Gray2);
}

.Grid3 .BoxPatternA.Acknowledgment {
	padding-top: 0;
}

.LinkListStyle1.Large {
	font-size: 100%;
}

.LinkListStyle1.Large li a:link,
.LinkListStyle1.Large li a:visited {
	background-image: url(/-/media/image/jp/r1/icon/icon_link_right_xl_hd.gif);
}
.LinkListStyle1.Large li a:hover,
.LinkListStyle1.Large li a:active {
	background-image: url(/-/media/image/jp/r1/icon/icon_link_right_xl_hover_hd.gif);
}

.Grid3 h2.TitleStyleGen01 {
	position: relative;
	background-image: none;
	background-color: var(--Gray1);
	border-left: 10px solid var(--Red2);
}
.Grid3 h2.TitleStyleGen01::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background-color: var(--White);
}

div.ImgSet table.TableStyleGen02 th {
	background-color: var(--Gray3);
	white-space: nowrap;
}

div.ImgSet table.TableStyleGen02 td {
	background-color: var(--Gray1);
}

.Grid3 h3.TitleStyleGen01 {
	border-color: var(--Red2);
	color: var(--Gray5);
}

.Grid3 div.ColumnSet div.Column1andHalf.FirstItem h3.TitleStyleGen01 span a {
	color: var(--Gray5) !important;
}

.ImgSet .ColumnSet h3.TitleStyleGen01 a {
	background-image: none !important;
}

.ImgW170SetStyle p.Img.RightAdjust {
	margin: 0 0 0 15px;
	padding: 0 0 15px;
}

.ImgW170SetStyle div.ImgSet p.TextStyle1,
.ImgW170SetStyle div.ImgSet > div {
	margin-left: 0 !important;
}

.ImgW170SetStyle .ImgSet .ColumnSet .Column1andHalf {
	padding: 0;
	min-width: 350px;
}

.Grid3 .BoxPatternC {
	padding-bottom: 5px;
	background-color: var(--Gray1) !important;
}

.Grid3 .BoxPatternC p.TextStyle1 {
	padding-bottom: 0;
}

.Grid3 .parts-column-cta {
	background: var(--Gray2);
}

.Grid3 .parts-column-cta .content-block p strong {
	text-decoration-color: var(--Gray4);
}

.Grid3 .table_basic01 {
	border-color: var(--Gray3);
	border-bottom: none;
}

.Grid3 .table_basic01 th {
	border-color: var(--Gray3);
	background-color: var(--Gray1);
}
.Grid3 .table_basic01 th:only-child {
	border-right: none;
}

.Grid3 .table_basic01 th.T_main {
	background-color: var(--Red2);
}

.Grid3 .table_basic01 td {
	border-right: none;
	border-color: var(--Gray3);
}

.Grid3 .table_basic02 th.T_main {
	background-color: var(--Red2);
}

.Grid3 .table_basic02 th.border_W {
	background-color: var(--Red2);
	border-color: var(--White);
	border-bottom: none;
}
.Grid3 .table_basic02 th.border_W:last-child {
	border-right-color: var(--Gray3);
}

.Grid3 .table_basic02 td {
	border-color: var(--Gray3);
}

/*コラムページ対談用*/
.Grid3 .Tax table.TableStyle2 {
	width: 100%;
}

.Grid3 .Tax table th,
.Grid3 .Tax table td {
	border: 2px solid #fff;
}

.Grid3 .Tax table th {
	background-color: var(--Gray2);
	text-align: center;
}

.Grid3 .Tax table thead th[rowspan="2"],
.Grid3 .Tax table thead th[colspan="4"] { 
	background-color: var(--Gray3);
}

.Grid3 .Tax table tr+tr th {
	background-color: var(--Gray2);
	text-align: center;
}

.Grid3 .Tax table td {
	background: var(--Gray1);
	text-align: center;
}

.Grid3 .Tax table.TableStyle2.T-wan th {
	width: 25%;
	padding: 10px 15px;
}

.Grid3 .Tax table.TableStyle2.T-wan td {
	width: 100%;
	padding: 20px 15px;
	text-align: inherit;
}

.Grid3 .Tax dt {
	float: left;
}

.Grid3 .Tax dt.Or .TextStyle1 strong {
	color: var(--Red2);
}

.Grid3 .Tax dt.Bl .TextStyle1 strong {
	color: var(--Blue3);
}

.Grid3 .Tax dd {
	margin-left: 3em;
}
.Grid3 .Tax dd.ImgOnlyStyle {
	margin-left: 0;
}

.Grid3 .Tax dd:after {
	content: "";
	clear: both;
	float: none;
}

.Grid3 .Tax .Writer .BoxPatternC {
	background-color: #fff;
	border: 1px solid var(--Gray3);
}

@media screen and (max-width: 1304px) {
	.OptionWideRWD #Contents:has(.Grid4) {
		padding-left: 0;
		padding-right: 0;
	}

	.OptionWideRWD .GridSet:has(.Grid4) {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.OptionWideRWD .GridSet .Grid4 {
		padding-left: 0;
	}

	.OptionWideRWD body .FatMenuWide {
		padding: 0.6em 0;
	}

	.OptionWideRWD body .FatMenuSet {
		max-width: 1305px;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.OptionWideRWD #Contents .wrapper,
	.OptionWideRWD .GridSet .Grid4 .Section .Inner {
		max-width: none;
		padding-left: 15px;
		padding-right: 15px;
	}

	.OptionWideRWD .GridSet .Grid4.Sub .PageTitleStyle3 .Inner {
		width: 100%;
		padding: 0 15px;
	}

	.OptionWideRWD .Sub.Useful .Section .ColumnSet {
		margin-left: -15px;
	}

	.OptionWideRWD .Sub.Useful .Section .Column2 {
		width: calc(50% - 15px);
		padding: 0;
		margin-right: 0;
		margin-left: 15px;
	}

	.OptionWideRWD #Contents .TimelineContainer img {
		max-width: none;
	}

	.OptionWideRWD #Contents .TimelineContainer .smart_day_box.time1530 .imgArea {
		width: 55%;
		max-width: 562px;
	}

	.OptionWideRWD #Contents .TimelineContainer .smart_day_box.time1530 .imgArea img {
		max-width: 100%;
	}
}

@media screen and (max-width: 994px) {
	.JS body #Contents .GridSet .Section {
		margin-left: 0;
		margin-right: 0;
	}

	.JS body #FloatingContacts form {
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.JS body #FloatingContacts li,
	.JS body #FloatingContacts li:last-child {
		width: 50%;
	}

	.JS body #Contents .GridSet .PageTitleStyle1 {
		margin-left: 0;
		margin-right: 0;
	}

	.JS .GridSet .ColumnSet {
		margin-left: -15px;
	}

	.JS #Contents:has(.Grid3) {
		padding: 0 15px;
	}

	.JS body #Contents .GridSet .Grid1 {
		margin: 0;
		padding: 0 0 0 15px;
	}

	.JS .Sub.Useful .Section .ColumnSet {
		margin: auto;
	}

	.JS .Sub.Useful .Section .Column2 {
		width: 100%;
		margin-left: 0;
	}

	.JS #Contents .TimelineContainer .smart_day_box.time1530 .imgArea {
		width: 52%;
		max-width: calc(100% - 420px);
	}

	.JS .Grid3 div.BoxPatternA.BoxA06 div.Container div.Inner {
		border :none;
		border-radius: 0;
	}
}

@media screen and (max-width: 767px) {
	.JS #Contents .wrapper,
	.JS .GridSet .Grid4 .Section .Inner {
		padding-left: 15px;
		padding-right: 15px;
	}

	.JS .wrapper .top-cta {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.JS body h2 {
		margin: 0 0 5px;
	}

	.JS body #Contents .GridSet .Grid1 {
		margin: 0 -15px 0 0;
		padding: 15px 15px 0;
	}

	.JS body #Contents .GridSet .Grid1:not(:has(#VerticalLocalNavi)) {
		margin-bottom: -15px;
		border-style: none;
	}

	.JS .Grid3 .includeColumnCtaBlock {
		margin: 0 -15px;
		padding-bottom: 0;
	}

	.JS .GridSet .main-visual .content-block .image-box {
		max-width: none;
	}

	.JS .GridSet section.solution .content-block .solution-list .solution-item {
		width: 300px;
		max-width: 100%;
	}

	.JS section.merit .content-block ol li .service-box ul li {
		width: auto;
	}

	.JS section.feature .content-block ol li .text-image .style-p3,
	.JS section.feature .content-block ol li .text-image .image-box {
		width: 100%;
	}

	.JS section.feature .content-block ol li .automation-image {
		max-width: 453px;
		margin: 1rem auto;
	}

	.JS section.use-case + .Section .ColumnList li {
		width: 47.5%;
		max-width: calc((100% - 16px) / 2);
	}

	.JS section.system-integration .content-block .image-list-box .image-box {
		width: auto;
	}

	.JS section.system-integration .content-block .image-list-box .list-box {
		width: 100%;
	}

	.JS section.faq ~ .page-links .content-block ul li:nth-child(2n+1) {
		text-align: right;
	}

	.JS .banner .content-block ul li:nth-child(2n+1) {
		text-align: right;
	}

	.JS .GridSet .support .content-block .item .image-text .text-box {
		width: 100%;
	}

	.JS section.cta .hedding-block .image-box {
		width: auto;
	}

	.JS .Grid4 .Manga .Column2 {
		padding-left: 15px;
	}

	.JS div.ImgSet table th,
	.JS div.ImgSet table td {
		display: table-cell;
		width: auto;
	}

	.JS div.Grid3 div.ImgW170SetStyle div.ImgSet {
		width: auto !important;
	}

	.JS #Contents div.ImgW170SetStyle p.Img img {
		margin-bottom: 5px !important;
	}

	.JS div.Grid3 div.ImgW170SetStyle div.ImgSet {
		width: auto !important;
	}

	.JS #Contents .ImgW170SetStyle .Img img {
		margin-bottom: 5px !important;
	}

	.JS .ImgW170SetStyle .ImgSet .ColumnSet .Column1andHalf {
		min-width: auto;
		height: auto;
	}

	.JS .ImgW170SetStyle .ImgSet h3.TitleStyleGen01 {
		margin-top: 0;
	}

	.JS #Contents .ImgW170SetStyle .ImgSet h3.TitleStyleGen01 img {
		margin-bottom: 3px !important;
	}

	.JS .ImgRightAdjust .ImgW290 {
		text-align: left;
	}

	.JS .Grid3 .table_basic02 td.spB {
		background-color: var(--Black);
	}

	.JS .Grid3 .table_basic02 td::before {
		color: var(--Red2);
	}

	.JS .Grid3 .table_basic01 th {
		border-right: none;
	}

	.JS .page-links .card .content-block ul li a br {
		display: none;
	}
}

@media screen and (max-width: 579px) {
	.JS body #FloatingContacts li button.btnContact,
	.JS body #FloatingContacts li button.btnDocument {
		font-size: 0.875em;
		background-size: 16px auto;
	}

	.JS .GridSet .ImgW170SetStyle .Img {
		width: 170px;
	}

	.JS #Contents .TimelineContainer .smart_day_box.time1530 .imgArea {
		width: 85%;
		max-width: none;
	}

	.JS .EffectsArea div.ProblemEffect dl dd {
		width: 100%;
		min-height: 80px;
	}

	.JS .EffectsArea div.ProblemEffect div.Arrow {
		margin-top: 65px;
	}

	.JS .Grid3 div.BoxPatternA.BoxA07 .CatchCopy {
		clear: both;
	}

	.JS div.Grid3 div.ImgW170SetStyle div.ImgSet {
		clear: both;
	}

	.JS div.ImgSet table th, .JS div.ImgSet table td {
		display: block;
	}

	.JS div.Grid3 div.ImgW170SetStyle div.ImgSet {
		overflow: visible;
	}

	.JS div.Grid3 div.ImgW170SetStyle .Img.RightAdjust + div.ImgSet {
		clear: none;
	}

	.JS .ImgW170SetStyle div.ImgSet p.TextStyle1 {
		min-height: 118px;
		overflow: hidden;
	}
}

@media screen and (max-width: 479px) {
}

@media screen and (max-width: 399px) {
	.JS body #FloatingContacts li button {
		padding-left: 2em;
	}

	.JS div.Grid3 div.ImgW170SetStyle div.ImgSet {
		overflow: visible;
	}

	.JS .ImgW170SetStyle div.ImgSet p.TextStyle1 {
		min-height: 118px;
		overflow: hidden;
	}

	.JS .PageTitleStyle1.t-wan h1.small {
		font-size: 130%;
	}

	.JS .page-links .card .content-block ul li a br.sp-only {
		display: inline;
	}
}
