@charset "utf-8";
p {
	font-size: clamp(0.875rem, 2vw, 1rem);	
}

.cen {
	text-align: center;
}

/*▼__イントロ */
.fv {
	background: #f91;
	height: auto;
	color: #fff;
	text-align: center;
	margin: 0 auto;
}


.fv-h1, .fv-h2, .fv-p, .fv-img {
	margin: .6em auto;
	line-height: 1.8;
}

.fv-h1 {
	font-size: 3rem;
	line-height: 0.6;
}

.fv-small {
	color: #555;
	font-size: .6em;
}

.fv-h2 {
	font-size: 1.8em;
	font-weight: 600;
}

.fv-p {
	margin: 30px auto;
	width: 70%;
	color: #fff;
	text-align: left;
}

.fv-img {
	text-align: center;
	width: 100%;
	display: block;
	margin: 0.8em auto 1.2em auto;
	max-width: 100px;
}

/*▼__イントロ 囲みリンク-フラット*/

.fv-link {
	background: #18c;
	;
	color: #fff;
	padding: 0.3em 0.8em;
	display: inline-block;
	margin: 0.3em auto 1em;
}

a:link.fv-link {
	color: #fff;
}

a:visited.fv-link {
	color: #fff;
}

a:hover.fv-link {
	background: #26c;
	text-decoration: none;
}

a:active.fv-link {
	color: #fff;
}


/*▼__ｾｶﾝﾄﾞﾋﾞｭｰ*/
.sv-set {
	background-color: rgba(255, 192, 17, 0.2);
	color: #555;
	text-align: center;
	padding: .5em 0;
	line-height: 1.8;
}

.sv-p {
	font-size: 1.4em;
	margin: .5em;
	
}

.sv-p2 {
	font-size: 25px;
	margin: 30px;
	font-weight: bold;
}

a.link-wht {
	color: #f91;
	text-decoration: underline;
	font-weight: bolder;
	line-height: 1.8;
	font-size: 30px;
}

a.link-wht:hover {
	color: rgb(224, 132, 10);
}


/*▼__ｾｶﾝﾄﾞﾋﾞｭｰ ダウンロード用リンク*/
a.sv-link-box {
	border: rgb(33, 87, 168) solid 3px;
	background: rgb(83, 178, 255);
	color: #fff;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	padding: .5em 1em;
	margin: 2em;
	font-size: 1.2em;
	box-shadow: 4px 4px 0px 0 rgba(40, 10, 20, 0.281);
}

a.sv-link-box:link {
	color: #fff;
}

a.sv-link-box:visited {
	color: #fff;
}

a.sv-link-box:hover {
	text-decoration: none;
	color: rgb(33, 87, 168) ;
	background: rgb(161, 213, 255);
}

a.sv-link-box:active {
	color: #aaa;
}

/*▼__banner バナー（PDF資料・別ページへの案内*/
.banner {
	margin: 1.5em 0;	
}

.banner p {
	max-width: clamp(320px, 80vw, 600px);
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	line-height: 1.8;
	text-align: left;
	margin: 1em auto;
}

.banner h2 ,.banner p,.banner h3,.banner h4 {
	color: #555;
}

.banner h2 {
	margin: 10px 0;
	text-align: center;
}

.banners {
	border: 5px solid rgb(255, 132, 17);
	border-width: 5px;
	background-color: rgba(255, 192, 17, 0.2);
	max-width: clamp(320px, 80vw, 1000px);
	margin: 1.5em auto;
	padding: 0.5em;
}

.banner-flex{
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 5em;
	margin: 2em 0;
}

@media screen and (max-width:479px) {
	.banners {
		margin: 1em auto;
	}

	.banner-flex {
		display: block;
		margin: 1em auto;
	}

	.banner-box {
		margin: 1em ;
	}
}

.banner-box { 
	max-width: 500px;
	padding: 30px;
	border-radius: 5px;
	background-color: rgb(255, 205, 69);	
}

.banner-box h3 {
	color: #555;
	line-height: 2rem; 
	letter-spacing: 0.1em;
}

a:link.banner-box {
	display: block;
	color: #555;
	text-decoration: none;
}

a:hover.banner-box {
	background: #f91;
	border-radius: 5px;
	  transition: background-color 0.3s ease-in-out;
}

a:active.banner-box {
	text-decoration: none;
}


/*▼__ 対応業務、使用用途紹介*/

.services {
	text-align: center;
	margin:2em ;
}

.services p {
	max-width: clamp(320px, 80vw, 850px);
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	line-height: 1.8;
	text-align: left;
	margin: 1em auto;
}

.services_flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
}

@media screen and (max-width:425px) {
	.services_flex  {
		flex-direction: column;
	}
	.services-box {
		margin: 10px;
	}
}

.services_flex h1 {
	font-size: 1.5rem;
	margin: 10px auto;
	font-weight: 700;
}

.services-box {
	padding: 10px;
	margin: 20px;
	background-color: rgb(255, 198, 41);
}


.services-box-ul {
	text-align: left;
	list-style-position: inside;
	background-color: #fff;
	padding: 1em 0;
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
}

.services-box-li {
	position: relative;
	padding-left: 1.5em;
	margin: 1em;
	text-indent: -1.5em;
}


.li-span {
	display: flex;
}
@media screen and (min-width:720px) {
	.li-span {
		display: inline;
	}
}

.cont-float{
	font-size: 20px;
	
}

.br_425px {
	display: none;
}

/*▼__機能1-6+注意事項*/

.four-clm {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}

.col {
	box-sizing: border-box;
	padding: 20px;
	max-height: 500px;
	background-color: #f0f0f0;
}
.col img {
	width: 100%;
}

.col h2, .col p {
	width: 300px;
	text-align: left;
}

.col h2 {
	font-size: 1.4em;
}

.col p {
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	margin: 10px auto;
	line-height: 1.8;
}


@media screen and (max-width:425px) {
	.four-clm {
		flex-direction: column;
		gap: 40px;
	}
	.col img {
		width: 10%;
	}
}

/*▼__ VC6製品おすすめ*/

.cmn-p {
	max-width: clamp(320px, 80vw, 850px);
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	line-height: 1.8;
	text-align: left;
	margin: 1em auto;
}

/* mes margin padding一括設定 */

.mes {
	margin: 0 auto;
	/*上下0、ブロック中央*/
	padding: .6em 0;
	/*基本area上下空白*/
}

.mes h1, .mes h2, .mes h3, .mes h4, .mes img, .mes p, .mes small {
	margin: .6em auto;
	/*ulパターンが多いので除外,intro同時使用だとimgに隙間が出るので注意*/
}

.mes section, .mes article {
	margin: .6em auto;
	/*mes以下のｾｸｼｮﾝ余白、一部相殺*/
}


/*▼__紹介 */

.mes h1 {
	color: #555;
	font-size: 2.4em;
	font-weight: normal;
}

.mes h2 {
	color: #18c;
	font-size: 1.4em;
	font-weight: normal;
}

.mes h3 {
	font-size: 1.3em;
	font-weight: bold;
	border-bottom: thin #888 solid;
}

.mes img {
	display: block;
}

@media screen and (max-width:720px) {
	.mes h1 {
		font-size: 2.1em;
	}
	.mes h2 {
		font-size: 1.5em;
	}
	.mes h3 {
		font-size: 1.1em;
	}
	.mes p {
		font-size: 1.05em;
	}
}

@media screen and (max-width:479px) {
	.mes h1 {
		font-size: 1.6em;
	}
	.mes h2 {
		font-size: 1.3em;
	}
	.mes h3 {
		font-size: 1.05em;
	}
	.mes p {
		font-size: .95em;
	}
}

.cmn {
	text-align: center;
	margin: 10px;
}

.cmn h2 {
	font-size: clamp(1.75rem, 5vw, 2.8rem);
}

.cmn-flex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4em;
	margin: 2em 0;
}

.cmn-flex h3 {
	font-size: clamp(1.5rem, 4vw, 2rem);
}
@media screen and (max-width:479px) {
	.cmn-item {
		margin: 30px auto;
	}
}

.cmn-item {
	max-width: clamp(320px, 50vw, 500px);
}

.cmn-item h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #555;
}

.cmn-item-p {
	margin: 30px auto;
	width: 80%;
	text-align: left;
}

.box-ul_flex {
	gap: 10px;
	margin: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}


.cmn-box-ul {
	list-style-position: inside;
}


.cmn-box-li{
	font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
	margin: 20px;
	text-align: left
}

.heading-wrapper  {
	background-color: #fff;
	border: 10px solid  rgb(38, 107, 187);
	border-radius: 0;	
}


/*▼__アイコンサークル_circle */

.circle {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media screen and (max-width: 834px) {
  .circle {
	  width: 150px;
	  height: 150px;
  }
}
@media screen and (max-width: 425px) {
  .circle {
	  width: 130px;
	  height: 130px;
  }
}

.circle:hover {
  background:  rgb(102, 197, 252);
}
@media screen and (max-width: 834px) {
  .circle:hover{
	    transform: none;
	  transition: none;
	   animation: unset;
	
  }
}

	  
.circle img {
  text-align: center;
  display: inline-block;
  margin: 30px;
  width: 60%;
  height: 60%;
}
@media screen and (max-width: 834px) {
  .circle img{
	  margin:25% auto;
  }
}

@media screen and (max-width: 479px) {
  .circle img{
	  margin:20% auto;
  }
}

.circle:hover img {
  transform: scale(1.2);
  transition-duration: 0.5s;
}
.top-product-anime {
  width: 200px; /*ボックスの幅*/
  height: 200px; /*ボックスの高さ*/
  overflow: hidden; /*画像拡大時にはみ出た部分を隠す*/
}
@media screen and (max-width: 834px) {
  .top-product-anime{
	transform: none;
	  transition: none;
	   animation: unset;
	
  }
}


@media screen and (max-width: 720px) {
	.cmn-flex {
		display: block;
		font-size: 90%;
	}
}

@media screen and (max-width: 479px) {
	.cmn-flex {
		font-size: 80%;
	}
}



.cmn-cen {
	text-align: center;
}


/*▼__セクション、DL申請 sect*/

.sect-set {
	padding: 1em;
	background-color: rgba(255, 152, 17, 0.40);
	text-align: left;
}
.sect-background {
	background-color: #fff;
	max-width: clamp(320px, 80vw, 850px);
	padding: 10px;
	margin: 30px auto;
}

.sect-h {
	font-size: clamp(1.5rem, 6vw, 2rem);
	margin: 20px 0;
	color: #141E3E;
}

.sect-p {
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	margin: 10px 0;
}

.list-non {
	list-style: none;
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
}


/*mail*/
.mail {
	font-size: 1.2em;
	font-style: normal;
	font-weight: 900;
	background-color: rgb(245, 253, 255);
	color: #fff;
	padding: 0.5em;
	margin: .5em auto;
	display: inline-block;
	text-align: center;
	border: 2px solid #259;
}


/*.summary*/

.sum {
	max-width: clamp(320px, 80vw, 1080px);
	margin: 1.5em auto;
}

.sum-h {
	text-align: center;
	border: 1px;
	font-size: 2em;
	margin: .6em 0;
	font-weight: normal;
	color: #555;
	text-align: left;
}

/*t*/

.sum-table {
	border-collapse: collapse;
	margin-bottom: .5%;
	width: 100%;
	font-size: 1.2em;
}

.sum-th {
	border: 3px solid #bbb;
	text-align: right;
	padding: .5em;
}

.sum-td {
	text-align: left;
	border: 3px solid #bbb;
	padding: .5em;
}