@charset "utf-8";

/* **************************************************

Name: adworld_wide.css

***************************************************** */

:root{
	--w965: 965px;
	--wide: 1275px;
	--wideSub: 1030px;
	--wh: #fff;
	--lgray: #F2F2F2;
	--baige: #F6F1E8;
	--gray: #E6E6E6;
	--bgray: #DBE5E7;
	--mgray: #C1BFBF;
	--dgray: #727171;
	--bk: #333;
	--bkOp: rgba(0,0,0,.8);
	--red: #8A2119;/*jyumin*/
	--fgreen: #198A22;/*zei*/
	--pl: #8640A9;/*fukushi*/
	--lblue: #19AFC3;/*hoken*/
	--navy: #387096;/*ryoukin*/
	--brown: #C69219;/*naibu*/
	--dbrown: #946932;/**/
	--green: #197C8A;/*dx*/
		--dgreen: #436243;
	--two: calc((100% / 2) - 1em);
	--three: calc((100% / 3) - 1em);
	--four: calc((100% / 4) - 1em);
	--shadow: 4px 4px 16px 0px #0000001A;
	--font-family: /*'Noto Snas CJK JP',*/ 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif;
	--bold-font-family: 'Noto Snas CJK JP', sans-serif;
}
html {
	  scroll-behavior: smooth;
}
body * {
	font-family: var(--font-family);
}
#Contents {
	padding-bottom: 0;
}
#Contents * {
	box-sizing: border-box;
	color: var(--bk);
}
#Contents a:link {
	color: #06417E;
}
#Contents .Section {
	padding: 2em 0;
}
#Contents .TextStyle1,
#Contents .ListStyle1,
#Contents .LinkListStyle1 {
	font-size: .88em;
}
/*注記調整*/
dl.AdditionalNotesStyle2 dt {
	width: 1em;
}
dl.AdditionalNotesStyle2 dd {
	margin: -1.2em 0 4px 1em;
}
/*----------------------------------
4Grid OverFlow Control
||e.g.
	<div class="Section"><!--BrowserWidth-->
		<div class="Inner"><!--MaxWidth:1275px-->
------------------------------------- */

div#Contents,
.GridSet,
.Grid4 {
	width: 100%;
	margin: auto;
	overflow: visible;
}
div.Section {
	width: 100%;
}
div.Section.Gray {
	background: var(--gray);
}
#Contents .Section.Notes {
	padding: 0;
}
.Section>.Inner {
	width: var(--wide);
	margin: auto;
	padding: 1em 0;
	word-break: break-word;
}
#Contents sup {
	font-size: .5em;
	vertical-align: 1em;
}
#Contents h2 {
	font-size: 1.85em;
	font-weight: bold;
	margin: auto;
	border-bottom: 1px solid var(--green);
	width: fit-content;
}
#Contents h3 {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 1.55em;
}
#Contents h4 {
	margin: 0;
	font-size: 1.05em;
}
#Contents h4::before {
	content: none;
}
#Contents .Products .Leg p {
	display: flex;
	gap: .5em;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 .5em;
}
#Contents .Products .Leg p span {
	color: var(--green);
	background: var(--green);
	border: 2px solid var(--green);
	line-height: 1;
}
#Contents .Products .Leg p span.dashed {
	color: transparent;
	background: transparent;
	border: 2px dashed var(--dbrown);
	padding: 0;
}
#Contents .Products .Leg.hannrei li.jyumin::before {	background: var(--red);}
#Contents .Products .Leg.hannrei li.zei::before {	background: var(--fgreen);}
#Contents .Products .Leg.hannrei li.hoken::before {	background: var(--lblue);}
#Contents .Products .Leg.hannrei li.fukushi::before {	background: var(--pl);}
#Contents .Products .Leg.hannrei li.ryoukin::before {	background: var(--navy);}
#Contents .Products .Leg.hannrei li.naibu::before {	background: var(--brown);}
#Contents .Products .Leg.hannrei li.dx::before {	background: var(--green);}
#Contents .Products .Leg.hannrei li {
	display: flex;
	gap: .25em;
	align-items: center;
}
#Contents .Products .Leg.hannrei li::before {
	content: "";
	display: block;
	width: 2rem;
	height: 1rem;
	border-radius: 3px;
	cursor: pointer;
}
.PageTitleStyleGen013 .Inner {
	max-width: var(--wide);
	min-height: inherit;
	margin: 0 auto;
	display: flex;
}
@media screen and (max-width: 994px) {
	.JS #Contents,
	.JS .GridSet,
	.JS .Grid4 {
		padding:0;
		margin: 0;
		width: auto;
	}
	.JS .GridSet {
		max-width: inherit;
	}

	.JS .Inner {
		padding: 1em;
		width: auto;
	}
}

@media screen and (max-width: 767px) {
	.JS br.PC {	display: none;}
	.JS br.RWD {	display: block;}
}

/*Common*/
br.PC {	display: block;}
br.RWD {	display: none;}
.MT {	margin: auto 0 0 0;}
.MR {	margin: 0 auto 0 0;}
.MB {	margin: 0 0 auto 0;}
.ML {	margin: 0 0 0 auto;}
.Flex {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1.5em;
	margin: 2em 0;
	flex-wrap: wrap;
}
.Flex li {
	flex: 0 1 auto;
}
.Flex.Two li { width: var(--two);}
.Flex.Three li { width: var(--three);}
.Flex.Four li {
	width: var(--four);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background: var(--wh);
}
.Flex.Col {	flex-direction: column;}
.Flex.Bet {	justify-content: space-between;}
.Flex.JuCenter {	justify-content: center;}
.Flex.NwpPC {	flex-wrap: nowrap;}
.Flex.Start {	align-items: flex-start;}
.Flex li img,
.Frame li img {
	width: 100%;
}
.gap0 {	gap: 0;}
.gap1 {	gap: 1em;}
.gap2 { gap: 2em;}

.Frame li .ImgOnlyStyle {/*sample setting*/
	margin: 0;
	max-height: 320px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Frame li img {/*sample setting*/
	mix-blend-mode: multiply;
}
.Shadow li {
	box-shadow: var(--shadow);
}
.Frame {
	display: flex;
	padding: 1em;
	gap: 1em;
}
.Frame li {
	width: calc((100% / 2) - 1em);
}
.Modern .Plate {
	position: relative;
	background: var(--bgray);
	padding: 4em;
}
.Modern .Plate::before {
	content: "";
	position: absolute;
	bottom: -26px;
	left: -48px;
	width: 115px;
	height: 167px;
	display: block;
	background: url(/-/media/ind/adworld/image/wide/pict_catch.svg) no-repeat center;
}
#Contents .Modern .Plate h3 {
	text-align: center;
	display: flex;
	align-items: center;
	padding: 0;
	justify-content: center;
	gap: 1em;
}
#Contents .Modern .Plate h3 span {
	padding: 0;
}
.Modern .Plate h3::before,
.Modern .Plate h3::after {
	content: "";
	display: block;
	background: var(--green);
	width: 82px;
	height: 2px;
	margin: 0;
}
#Contents .Modern .Plate h3 b {
	color: var(--green);
}
.Modern .Flex.Three li {
	background: var(--wh);
	display: flex;
	flex-direction: column;
}
#Contents .Modern .Flex.Three li h4 {
	width: 100%;
	background: var(--green);
	color: var(--wh);
	padding: 1em;
	text-align: center;
}
.Modern .Flex.Three li h4::after {
	content: "";
	display: block;
	position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg); /* 中央に配置 */
	width: 16px;
	height: 10px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 逆三角形の形状 */
	background: var(--green);
}
#Contents .Modern .Flex.Three li .TextStyle2 {
	text-align: center;
	padding: 3em;
	color: var(--green);
}
#Contents .Section.Solution {
	background: var(--lgray);
}
#Contents .Section.Solution .Plate {
	background: var(--wh);
	border-radius: 30px;
	padding: 4em;
	max-width: var(--wideSub);
	margin: 4em auto;
}
.TopPage .DX .ColumnSet {
	padding: 5em 0 0;
	position: relative;
	align-items: stretch;
	flex-wrap: wrap;
}
.DX .ColumnSet::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 336px;
	height: 174px;
	background: url(/-/media/ind/adworld/image/wide/img_jichitai_dx.svg) no-repeat center;
}
.DX .Column1andHalf {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.DX .Column1andHalf .TextStyle2 {
	font-size: .88em;
	text-align: center;
}
.Curcle {
	background: var(--lgray);
	border-radius: 50%;
	width: 234px;
	height: 234px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .5em;
}
#Contents .Curcle p,
#Contents .Curcle p span {
	color: var(--dbrown);
	line-height: 1;
}
#Contents .Curcle p.Title,
#Contents .Curcle p.Value {
	font-weight: bold;
}
#Contents .Curcle p.Title {
	font-size: 1.15em;
}
#Contents .Curcle p.Value {
	font-size: 2.6em;
}
#Contents .Curcle p.Value span {
	font-size: .6em;
}
#Contents .Curcle p.Date {
	font-size: .88em;
	line-height: 1.6;
}
.BannerArea {
	background: var(--gray);
}
#Contents .cta {
	margin: 0 0 2em;
}
#Contents .cta .TextStyle1 {
	text-align: center;
}
#Contents .Button a:link,
#Contents .Button a:visited {
	background: var(--green);
	color: var(--wh);
	border-radius: 40px;
	font-weight: bold;
	font-size: 1.125em;
	text-decoration: none;
	padding: 1em 2em;
	margin: 1em auto;
	display: flex;
	gap: .5em;
	align-items: center;
	justify-content: center;
	width: fit-content;
	opacity: 1;
	transition: .08s ease;
}
#Contents .DX .Button a:link,
#Contents .DX .Button a:visited,
#Contents .TopPage .Products .Button a:link,
#Contents .TopPage .Products .Button a:visited {
	background: var(--dbrown);
	min-width: 300px;
}
#Contents .Button a:hover,
#Contents .Button a:active,
#Contents .Button a:focus {
	opacity: .8;
}
.Button a::after {
	content: "";
	display: block;
	width: 7px;
	height: 14px;
	background: url(/-/media/ind/adworld/image/wide/icon_link_arrow.svg) no-repeat center;
	transition: transform .08s ease;
}
.PageTitleStyle3 .Button a:hover::after,
.Products .Button a:hover::after,
.DX .Button a:hover::after,
.cta .Button a:hover::after {
		transform: translateX(0.15em);
}
#contact_area {
	border: 1px solid var(--green);
	background: url(/-/media/ind/adworld/image/wide/bg_town.svg) no-repeat center bottom / 100%,url(/-/media/ind/adworld/image/wide/bg_cta.png) no-repeat center / cover;
	padding: 2em 0;
}
#contact_area .Title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	text-align: center;
	font-weight: bold;
	font-size: 1.9em;
	margin: 0 0 1em;
}
#contact_area .Title::before,
#contact_area .Title::after {
	content: "";
	width: 114px;
	height: 103px;
	display: block;
}
#contact_area .Title::before {
	background: transparent url(/-/media/ind/adworld/image/wide/icon_contact_before.svg) no-repeat center;
}
#contact_area .Title::after {
	background: url(/-/media/ind/adworld/image/wide/icon_contanct_after.svg) no-repeat center;
}
@media screen and (max-width: 994px) {
	.JS .TopPage .DX .ColumnSet {
		padding: 8em 0 0;
	}
}
@media screen and (max-width: 767px) {
	.JS .Flex.Four li {
		width: calc((100% /2) - 1em);
	}
}
@media screen and (max-width: 579px) {
	.JS .TopPage #NewsArea .Info li {
		flex-direction: column;
		gap: .5em;
	}
	.JS .TopPage .ColumnSet {
		flex-direction: column;
	}
	.JS .TopPage .Column1andHalf {
		width: 100%;
		gap: 1em;
	}
	.JS .Frame {
		flex-direction: column;
	}
	.JS .Frame li {
		width: auto;
	}
}
.Section ul.LinkListStyle1.ListRightAdjust {
	display: flex;
	justify-content: flex-end;
	font-size: 14px;
}
#Contents .Section li.Important a:link,
#Contents .Section li.Important a:visited,
#Contents .Section dt.Important a:link,
#Contents .Section dt.Important a:visited {
	border: 1px solid var(--green);
	padding: .6em 1em .6em 5em;
	width: 224px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	background-image: none!important;
	transition: opacity .08s ease;
}
#Contents .Section li.Important a:hover,
#Contents .Section li.Important a:active,
#Contents .Section dt.Important a:hover,
#Contents .Section dt.Important a:active {
	opacity: .8;
	text-decoration: none;
}
#Contents .Section li.Important a::after,
#Contents .Section dt.Important a::after {
	content: "";
	background: var(--green) url(/-/media/ind/adworld/image/wide/icon_link_arrow.svg) no-repeat 55% 50% / 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: block;
	transition: transform .08s ease;
}
#Contents .Section li.Important a:hover::after,
#Contents .Section dt.Important a:hover::after {
	transform: translateX(.15em);
}
#Contents .Section.w965 .Inner {
	max-width: var(--w965);
	margin: auto;
}
#Contents .Section.w1030 .Inner {
	max-width: var(--wideSub);
	margin: auto;
}
/*Products*/
#Contents h3 span {
	padding-left: .5em;
}
#Contents .jyumin h3 {
	border-left: 5px solid var(--red);
}
#Contents .jyumin li.Important a::after {
	background-color: var(--red);
}
#Contents .jyumin li.Important a:link,
#Contents .jyumin li.Important a:visited {
	border: 1px solid var(--red);
}
#Contents .zei h3 {
	border-left: 5px solid var(--fgreen);
}
#Contents .zei li.Important a::after {
	background-color: var(--fgreen);
}
#Contents .zei li.Important a:link,
#Contents .zei li.Important a:visited {
	border: 1px solid var(--fgreen);
}
#Contents .fukushi h3 {
	border-left: 5px solid var(--pl);
}
#Contents .fukushi li.Important a::after {
	background-color: var(--pl);
}
#Contents .fukushi li.Important a:link,
#Contents .fukushi li.Important a:visited {
	border: 1px solid var(--pl);
}
#Contents .hoken h3 {
	border-left: 5px solid var(--lblue);
}
#Contents .hoken li.Important a::after {
	background-color: var(--lblue);
}
#Contents .hoken li.Important a:link,
#Contents .hoken li.Important a:visited {
	border: 1px solid var(--lblue);
}
#Contents .ryoukin h3 {
	border-left: 5px solid var(--navy);
}
#Contents .ryoukin li.Important a::after {
	background-color: var(--navy);
}
#Contents .ryoukin li.Important a:link,
#Contents .ryoukin li.Important a:visited {
	border: 1px solid var(--navy);
}
#Contents .naibu h3 {
	border-left: 5px solid var(--brown);
}
#Contents .naibu li.Important a::after {
	background-color: var(--brown);
}
#Contents .naibu li.Important a:link,
#Contents .naibu li.Important a:visited {
	border: 1px solid var(--brown);
}
#Contents .dx h3 {
	border-left: 5px solid var(--green);
}
#Contents .dx li.Important a::after {
	background-color: var(--green);
}
#Contents .dx li.Important a:link,
#Contents .dx li.Important a:visited {
	border: 1px solid var(--green);
}
.Products .PageTitleStyleGen01 {
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/-/media/ind/adworld/image/wide/bg_title.png) center / cover no-repeat;
	margin: 0 0 2em;
}
.Products .PageTitleStyleGen01 h1 {
	font-size: 1.85em;
	font-weight: bold;
}
.Products .PageTitleStyleGen01 .Inner {
	max-width: 1305px;
	margin: auto;
	padding: 3em;
	width: 100%;
	text-align: center;
}
#Contents .Products .PageTitleStyleGen01 .summary {
	font-size: 1.15em;
	font-weight: bold;
}
.Product.Flex {
	background: var(--baige);
	border-radius: 20px;
	padding: 2em 2em 2em 3em;
	gap: 1em;
}
.Product.Flex li {
	font-size: .9em;
	list-style: disc outside;
	flex: 0 0 auto;
	width: calc((100% / 4) - 1em);
	font-weight: bold;
}
.Products dl {
	display: flex;
	align-items: stretch;
	gap: 2em;
	margin: 0 0 2em;
}
.Products dl dt {
	flex: 0;
	min-width: fit-content;
}
.Products dl.AdditionalNotesStyle2 {
	display: block;
	margin: 0 0 1em;
}
#Contents .Products dt h3 {
	display: flex;
	align-items: center;
}
.Products dt h3::before,
.Products dt h3::after {
	content: "";
	display: block;
	width: 82px;
	height: 2px;
	margin: 0 1em;
}
#Contents dl.Jyumin h3 {	color: var(--green);}
#Contents dl.Jyumin h3::before,
#Contents dl.Jyumin h3::after {
	background: var(--green);
}
#Contents dl.Naibu h3 {	color: var(--dgreen);}
#Contents dl.Naibu h3::before,
#Contents dl.Naibu h3::after {
	background: var(--dgreen);
}
#Contents dl.Fukushi h3 { color: var(--dbrown);}
#Contents dl.Fukushi h3::before,
#Contents dl.Fukushi h3::after {
	background: var(--dbrown);
}
.Products dl dt {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.Products dl dt p {
	padding: 1em;
}
.Products dl dd {
	flex: auto;
}
#Contents .Products dl dd ul {
	margin: 0;
	gap: 1em;
}
#Contents .Products dl dd li {
	position: relative;
	width: calc((100% / 5) - 1em);
	min-height: 4em;
	line-height: 1.2;
	background: var(--green);
	border-radius: 14px;
	text-align: center;
	font-size: .8em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wh);
	cursor: pointer;
	transition: .3s ease;
}
#Contents .Products dl dd li.lite {
	background: var(--bgray);
	color: var(--bk);
}
#Contents .Products dl dd li.dashed {
	background: var(--wh);
	border: 2px dashed var(--dbrown);
	color: var(--bk);
	cursor: auto;
}
#Contents .Products dd li.hovered[data-type="jyumin"] { background: var(--red); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="zei"] { background: var(--fgreen); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="hoken"] { background: var(--lblue); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="fukushi"] { background: var(--pl); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="ryoukin"] { background: var(--navy); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="naibu"] { background: var(--brown); color: var(--wh);}
#Contents .Products dd li.hovered[data-type="dx"] { background: var(--green); color: var(--wh);}
#Contents .Products dd li.hovered::before {
	content: "";
	color: var(--wh);
	display: inline-flex;
	width: fit-content;
	min-height: 1em;
	background: var(--bkOp);
	padding: .5em 1em;
	border-radius: 5px;
	top: -2em;
	position: absolute;
	align-items: center;
	transition: opacity .1s ease;
	opacity: 0;
	transform: translateY(1em);
}
#Contents .Products dd li.hovered::after {
	content: '';
	position: absolute;
	display: inline-block;
	bottom: 2.5em; /* 吹き出し下部に配置 */
	border-width: 10px;
	border-style: solid;
	border-color: var(--bkOp) transparent transparent transparent;
	opacity: 0;
	transition: opacity .1s ease;
}
#Contents .Products dd li.hovered:hover::after {
	opacity: 1;
}
#Contents .Products dd li.hovered:hover::before {
	content: "";
	transform: translateY(0);
	opacity: 1;
}
#Contents .Products dd li[data-type="jyumin"].hovered:hover::before {
	content: "住民基本";
}
#Contents .Products dd li[data-type="zei"].hovered:hover::before {
	content: "税";
}
#Contents .Products dd li[data-type="hoken"].hovered:hover::before {
	content: "保険・医療";
}
#Contents .Products dd li[data-type="fukushi"].hovered:hover::before {
	content: "福祉";
}
#Contents .Products dd li[data-type="ryoukin"].hovered:hover::before {
	content: "料金徴収";
}
#Contents .Products dd li[data-type="naibu"].hovered:hover::before {
	content: "内部事務";
}
#Contents .Products dd li.dashed.hovered:hover::before,
#Contents .Products dd li.dashed.hovered:hover::after {
	content: none;
}

@media screen and (max-width: 1304px) {
	.OptionWideRWD #Contents,
	.OptionWideRWD .Grid4 {
		padding: 0;
	}
	.OptionWideRWD .GridSet {
		margin: 0;
	}
	.OptionWideRWD .Section>.Inner {
		width: auto;
		padding: 1em;
	}
	.OptionWideRWD .TopPage .PageTitleStyle3 .Inner {
		padding: 2em 1em 4em;
	}
	/*Products*/
	.Products dl {
		width: 100%;
	}
	#Contents .Products dl dd ul {
		flex-wrap: wrap;
	}
	#Contents .Products dl dd li {
		flex: 0 0 auto;
	}
	.TopPage .PageTitleStyle3 {
		min-height: 500px;
		background: url(/-/media/ind/adworld/image/wide/bg_title.png) top center / 100% auto no-repeat;
		margin: 0;
	}
	.OptionWideRWD .ColumnSet {
		margin: 0;
	}	
}
@media screen and (min-width: 1304px) {
	.TopPage .PageTitleStyle3 {
		min-height: 600px;
		background: url(/-/media/ind/adworld/image/wide/bg_title.png) top center / cover no-repeat;
		margin: 0;
	}
}
.TopPage .PageTitleStyle3 .Wrapper {
	background-image: url(/-/media/ind/adworld/image/wide/bg_town.svg);
	background-position-y: 100%;
	background-repeat: repeat-x;
  position: relative;
  animation: moveBackground 30s linear infinite;
	border-bottom: 1px solid var(--green);
}
/* ホバー時にアニメーションを停止 */
.TopPage .PageTitleStyle3 .Wrapper:hover {
  animation-play-state: paused; /* アニメーションを停止 */
}
/* 背景を右から左へ移動するアニメーション */
@keyframes moveBackground {
  0% {
    background-position: 0% 100%; /* 左端からスタート */
  }
  100% {
    background-position: 100% 100%; /* 右端に移動 */
  }
}
.TopPage .PageTitleStyle3 .Inner {
	max-width: var(--wideSub);
	min-height: inherit;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	justify-content: space-evenly;
	flex-direction: column;
	gap: 1em;
	padding: 2em 0 4em
}
.TopPage .ColumnSet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	width: 100%;
	margin: 2em 0;
}
.TopPage .Column1andHalf {
	display: flex;
	flex-direction: column;
	margin: 0;
	float: none;
	gap: 1em;
	width: calc((100% / 2) - 1em);
}
.TopPage .PageTitleStyle3 .SubTitle {
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
}
#Keyword {
	display: flex;
	background: linear-gradient(180deg, var(--wh) 50%, var(--baige) 50%);
}
#Keyword dl {
	/*max-width: 827px;*/
	max-width: 900px;
	margin: 1.5em auto;
	background: var(--lgray);
	border-radius: 20px;
	/*padding: 1.5em;*/
	padding: 1.5em 1.5em 0em;
	border: 1px solid var(--green);
}
#Keyword dl dt h3 {
	text-align: center;
}
#Keyword .Flex {
	gap: 1em;
}
#Keyword dl ul li {
	color: var(--dgray);
	font-size: .88em;
	background: var(--wh);
	border-radius: 40px;
	border: 1px solid var(--mgray);
	padding: .25em 1em;
}
#Keyword li a:link,
#Keyword li a:visited {
		color: var(--dgray);
}
.TopPage #NewsArea {
	background: var(--baige);
}
.TopPage #NewsArea .Info {
	margin: 2em auto;
	max-width: var(--wideSub);
}
.TopPage #NewsArea .Info li {
	display: flex;
	align-items: flex-start;
	gap: 2em;
	margin: 0 0 1em;
	font-size: .88em;
}
.TopPage #NewsArea .Info li span {
	min-width: 8em;
}
.TopPage #NewsArea .Info li a:link,
.TopPage #NewsArea .Info li a:visited {
	text-decoration: underline;
	color: var(--bk);
}
#Contents .TopPage .Products {
	background: var(--lgray);
}
#Contents .TopPage .TextStyle1 {
	font-size: 1.115em;
}
#Contents .TopPage .Products .TextStyle1 {
	width: fit-content;
	margin: 0 auto 1em;
}
.TopPage #products_area {
	margin: 4em 0;
}
#Contents .TopPage .Inner h2 {
	margin: 0 auto 2em;
	text-align: center;
}
.TopPage .Flex h3 {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}
.TopPage .Flex .ImgOnlyStyle {
	max-height: 166px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.TopPage .Flex .ImgOnlyStyle,
.TopPage .Flex .ImgOnlyStyle img {
	margin: 0;
	padding: 0;
}
.Flex h3 a:link,
.Flex h3 a:visited {
	color: var(--bk);
	background: var(--wh);
	padding: 1em;
	display: flex;
	justify-content: space-between;
}
.TopPage .Frame {
	width: 100%;
	justify-content: space-between;
	background: var(--bgray);
}
.TopPage .Frame .Txt {
	padding: 1em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.TopPage .Frame h3 {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 1.4em;
}
#Contents .TopPage .Section.Contact .Inner,
#Contents .TopPage .Section.Contact {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
}
#Contents .TopPage .Section.Contact #contact_area {
	border: none;
	width: 100%;
}
@media screen and (max-width: 994px) {
	.JS #Contents .Products dl dd li {
		width: calc((100% / 4) - 1em);
	}
	.JS .TopPage .PageTitleStyle3 {
		background-size: auto 100%;
		background-position: 10% 0%;
	}
	.JS .TopPage .PageTitleStyle3 .Wrapper {
		animation-direction: reverse;
	}
	.JS .Product.Flex li {
		width: calc((100% / 3) - 1em);
	}
		.JS #Keyword dl {
			margin: 1.5em 1em;
	}
}
@media screen and (max-width: 767px) {
	.JS #Contents .Products dl dd li {
		width: calc((100% / 3) - 1em);
	}
	.JS #Contents .Products dl {
		flex-direction: column;
		}
	.JS #Contents .TopPage .Flex li img, .JS #Contents .TopPage .Frame li img {
		width: 100%;
		height: auto;
	}
	.JS .TopPage .PageTitleStyle3 {
		min-height: 430px;
		background: url(/-/media/ind/adworld/image/wide/bg_title.png) top center / 100% auto no-repeat;
	}
	.JS #Keyword dl {
		padding: 1em;
	}
	.JS .Flex.Three {
		flex-wrap: wrap;
	}
	.JS .Product.Flex li,
	.JS .Flex.Three li {
		width: calc((100% / 2) - 1em);
	}
	.JS .TopPage .Plate .Flex.Three {
		flex-direction: column;
	}
	.JS .TopPage .Plate .Flex.Three li {
		width: 100%;
	}
	.JS #Contents .Products .Leg.gap2.hannrei {
		gap: .5em;
	}
}
@media screen and (max-width: 579px) {
	.JS #Contents h2 {
		font-size: 5vw;
	}
	.JS .Product.Flex li {
		width: calc((100% / 2) - 1em);
	}
	.OptionWideRWD.JS #Contents .PageTitleStyle3 .Button a:link,
	.OptionWideRWD.JS #Contents .PageTitleStyle3 .Button a:visited,
	.JS #Contents .cta .Button a:link,
	.JS #Contents .cta .Button a:visited,
	.JS #Contents .Products .Button a:link,
	.JS #Contents .Products .Button a:visited,
	.JS #contact_area .Title {
		font-size: 4vw;
	}
	.JS .Section .Summary {
		font-size: 5vw;
	}
	.JS .PageTitleStyle3 {
		background-color: transparent;
	}
	.JS .TopPage .PageTitleStyle3 {
		min-height: 200px;
	}
	.JS .TopPage .PageTitleStyle3 .Inner {
		padding: 1.5em 1em;
	}
	.JS .TopPage .PageTitleStyle3 .Inner h1 {
		font-size: 1em;
	}
	.JS #Contents .PageTitleStyle3 .ColumnSet {
			flex-direction: column;
	}
	.JS #Keyword .Flex {
		gap: .5em;
		margin: 1em auto;
	}
	.JS #Contents .Products dl dd li {
		width: calc((100% / 2) - 1em);
	}
	.JS .TopPage .Flex .ImgOnlyStyle {
		flex: 0 1 40%;
	}
	.JS .Modern .Plate {
		padding: 2em;
	}
	.JS .TopPage .Flex h3 {
		width: 100%;
	}
	.JS #Contents .Section.Solution .Plate {
		padding: 2em;
		margin: 2em auto;
	}
	.JS .TopPage .ColumnSet {
		gap: 1em;
	}
}
@media screen and (max-width: 479px) {
	.JS #Contents .Products dl dd li {
		width: calc((100% / 2) - 1em);
	}
	.JS .Product.Flex li {
		width: auto;
	}
	.JS .Product.Flex {
		flex-direction: column;
		gap: .5em;
	}
	.JS .TopPage .PageTitleStyle3 {
		min-height: 180px;
        background-size: auto 100%;
        background-position: 0% 0%;
	}
	.JS .TopPage .PageTitleStyle3 h1 {
		margin: 0;
	}
	.JS #Contents .Products dt h3 {
		gap: 1em;
	}
	.JS .Products dt h3::before,
	.JS .Products dt h3::after {
		margin: 0;
	}
}