/*.mobile{
    display: none !important;
}*/
@media(max-width:640px){
	.desktop{
		display: none !important;
	}
}
@media(min-width:641px){
	.mobile{
		display: none !important;
	}
}
/*humberger*/
.openbtn1 {
  position: absolute;
  z-index: 9999;
  top: 10px;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  margin:auto;
  width: 50px;
  height: 50px;
  background: var(--blue-color);
  text-align: center;
  display: none;
}
@media(max-width:1240px){
	.openbtn1{
		display: block;
	}
	.openbtn1 span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		background: #fff;
		width: 45%;
	  }

	.openbtn1 span:nth-of-type(1) {
		top:15px;	
	}

	.openbtn1 span:nth-of-type(2) {
		top:23px;
	}

	.openbtn1 span:nth-of-type(3) {
		top:31px;
	}
	.openbtn1.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	.openbtn1.active span:nth-of-type(2) {
		opacity: 0;
	}
	.openbtn1.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
}
/*end of humberger*/
/*body.bg_column{
	background-image:url("../images/top_fixed_image.webp");
	background-size:cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
}
body.bg_column::after{
	content: "";
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: -2;
	pointer-events: none;
}*/

/* 修正後のCSS */

/* body.bg_column の修正 */
body.bg_column{
	/* モバイルで効かない background-attachment: fixed を削除 */
	background-image: none; /* bodyに直接設定した背景画像を無効化 */
	position: relative; /* コンテンツの位置調整のため保持 */
    /* z-indexの調整が必要な場合があるため、一旦このまま */
}

/* 背景画像用の新しい擬似要素を追加 (::before) */
body.bg_column::before{
	content: "";
	position: fixed; /* ★重要：ビューポートに固定する */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -3; /* ★重要：コンテンツとオーバーレイのさらに後ろに配置 */
	
    /* 固定背景のスタイルをこちらに移動 */
	background-image: url("../images/top_fixed_image.webp");
	background-size: cover;
	background-position: center;
}

/* 既存のオーバーレイ(::after)の修正 */
body.bg_column::after{
	content: "";
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: absolute; /* position: fixed; でも可ですが、ここでは既存のabsoluteを活かします */
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: -2; /* ★重要：背景(z-index:-3)より手前、コンテンツ(z-index:auto/0)より奥に配置 */
	pointer-events: none;
}
span.newMark{
    display: block;
    width: 30px;
    height: 12px;
    background: url("../images/icon_new.svg") no-repeat;
    background-size: 30px;
    position: absolute;
    left: 0;
    top: -15px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
h3 span.newMark{
	top:-7px !important;
}
div.headerWrapper{
    width: 100%;
    border-top: 10px solid transparent;
    border-image: linear-gradient(to right, var(--green-color), var(--blue-color)) 1;
    position: fixed;
    top: 0;
    height: 130px;
    z-index: 100;
	border-bottom:1px solid var(--green-color);
	background-color:#fff;
}
@media(max-width:640px){
	div.headerWrapper{
		height: 80px;
	}
}
div.header{
	width:94%;
	margin:auto;
	max-width:1400px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
div.h1 img{
	width:160px;
}
@media(max-width:640px){
	div.h1{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	div.h1 a{
		display: block;
		display: flex;
	}
	div.h1 img{
		width:120px;
		height: auto;
	}
}
p.scsk img{
	width:120px;
}
@media(max-width:1240px){
	p.scsk{
		margin-right:60px;
	}
}
@media(max-width:640px){
	p.scsk img{
		width:80px;
	}
}
ul.nav{
	display: flex;
	justify-content: center;
	gap:1.5em;
	font-weight: bold;
	font-size:min(1.353vw,1.7rem);
}
@media(max-width:1240px){
	ul.nav{
		display: none;
		position: fixed;
		top:130px;
		width:375px;
		right:0;
		background:#fff;
		font-size:1.7rem;
	}
	ul.nav.active{
		display: block;
	}
}
@media(max-width:640px){
	ul.nav{
		top:80px;
		width:100%;
	}
}

ul.nav li{
    position: relative;
}
@media(max-width:1240px){
	ul.nav li{
		padding:0.5em 1em;
		border-bottom:1px solid #ccc;
	}
}
ul.nav li.new::before{
	content: "";
	position: absolute;
    width: 30px;
    height: 30px;
    background-image: url("../images/icon_new.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    right: -10px;
    top: -25px;
}
@media(max-width:1240px){
	ul.nav li.new::before{
		content: "";
		position: absolute;
		width: 30px;
		height: 30px;
		background-image: url("../images/icon_new.svg");
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: center;
		right: 10px;
		top: 0;
		bottom:0;
		margin:auto;
	}
}
ul.nav li::after{
    content: "";
    width:0%;
    height: 3px;
    background-color:var(--green-color);
    transition:width 0.25s;
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
@media(max-width:1240px){
	ul.nav li::after{
		content: "";
		display: none;
		width:0%;
		height: 3px;
		background-color:var(--green-color);
		transition:width 0.25s;
		position: absolute;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
	}
}
ul.nav li:hover a,
ul.nav li.active a{
    color:var(--green-color);
    width:100%;
    transition:width 0.25s;
}
ul.nav li:hover::after,
ul.nav li.active::after{
    width:100%;
    transition:width 0.25s;
}
ul.nav li a{
    color:var(--blue-color);
}
div.mainVisualWrapper{
	margin-top:130px;
	height: 500px;
	overflow: hidden;
	position: relative;
	background:var(--blue-color);
}
@media(max-width:640px){
	div.mainVisualWrapper{
		margin-top:80px;
		height: calc((100vh - 80px) * .8);
	}
}
ul.slick-dots{
	display: flex;
	justify-content: center;
	gap:1em;
	margin-top:1em;
}
ul.slick-dots li{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width:.75em;
	height: .75em;
	border-radius: 1em;
	background-color:var(--green-color);
}
ul.slick-dots li.slick-active{
	opacity: 0.5;
}
ul.nav li > ul{
	display: none;
	position: absolute;
	left:0;
	top:30px;
	padding:15px 30px;
	background:#fff;
	width:360px;
	box-shadow: 3px 3px 12px rgba(0,0,0,0.35);
}
@media(max-width:1240px){
	ul.nav li > ul{
		display: none;
		position: static;
		padding:0.5em 1em;
		width:100%;
		box-shadow: none;
	}
}
ul.nav li > ul li{
	line-height: 2em;
	margin-bottom:1em;
}
ul.nav li:hover > ul{
	display: block;
}
div.mainVisualWrapper video{
	width:100%;
	height: 500px;
	object-fit: cover;
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
@media(max-width:640px){
	div.mainVisualWrapper video{
		height: 100%;
	}
}
div.mainVisualWrapper::after{
	content: "";
	width:100%;
	height: 100%;
	background:rgba(0,0,0,0.4);
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	display: none;
}
div.mainVisual{
	width:94%;
	height: 100%;
	margin:auto;
	max-width:1400px;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
	align-items: center;
}
@media(max-width:640px){
	div.mainVisual{
		width:94%;
		height: 100%;
		margin:auto;
		max-width:1400px;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 2;
		align-items: center;
		
		flex-direction: column;
	}
}
div.mainVisual > div{
	width:50%;
}
@media(max-width:640px){
	div.mainVisual > div{
		width:100%;
		flex:1;
	}
}
div.mainVisual div.left{
	height: 100%;
	position: relative;
	color:#fff;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
div.mainVisual div.left p{
	font-size:min(3vw,4.4rem);
	font-weight: bold;
	text-align: right;
}
@media(max-width:640px){
	div.mainVisual div.left p{
		font-size:2.2rem;
		text-align: left;
	}
}
div.mainVisual div.left span{
	font-size:1.2rem;
	line-height: 1.5em !important;
	display: block;
	margin-top:1em;
}
div.mainVisual div.right{
	width:50%;
	/*height: 100%;*/
	padding:75px 25px;
}
@media(max-width:640px){
	div.mainVisual div.right{
		width:100%;
		height: 100%;
		padding:25px;
	}
}
div.mainVisual div.right img{
	width:100%;
	aspect-ratio:630/350;
	object-fit: cover;
}
div.contentsWrapper{
	width:100%;
	position: relative;
	/*margin-top:50px;*/
	background:#fff;
	/*z-index: -1;*/
	border-top:50px solid #fff
}
div.contentsWrapper.green{
	background-color:var(--green-color);
}
div.contentsWrapper.blue{
	background-color:var(--blue-color);
}
div.contentsWrapper.left,
div.contentsWrapper.right{
	/*z-index: -1;*/
}
div.contentsWrapper.left::after{
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 50%;         /* 左半分だけ背景色 */
	background:var(--green-color);
	height: auto;
	z-index: -1;
	z-index: 0;
	
}
div.contentsWrapper.right::after{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 50%;         /* 左半分だけ背景色 */
	background:var(--blue-color);
	height: auto;
	z-index: -1;
	z-index: 0;
}
div.contentsWrapper.split{
	margin-top:100px;
	margin-bottom:150px;
}
div.contentsWrapper.faq{
	background:#efefef;
	padding:50px 0 100px;
	border:none;
}
div.contentsWrapper.blue,
div.contentsWrapper.blues{
	border-bottom: 100px solid #fff;
}
@media(max-width:640px){
	div.contentsWrapper.blue,
	div.contentsWrapper.blues{
		border-bottom: 50px solid #fff;
	}
}
div.contentsWrapper.blue.mb0{
	border-bottom:none;
}
div.contentsWrapper.column{
	background:transparent;
	border-top:none;
}
div.contents{
	width:94%;
	max-width:1200px;
	margin:auto;
	overflow: hidden;
}
div.index{
	display: flex;
	gap:5px;
}
@media(max-width:640px){
	div.index{
		flex-direction: column;
	}
	div.index.reverse{
		flex-direction: column-reverse;
	}
}
div.index img{
	max-width:100%;
	height: auto;
}
div.index > div{
	width:50%;
	flex: 1;
	padding:100px 0;
}
@media(max-width:640px){
	div.index > div{
		width:100%;
		flex: 1;
		padding:25px 0;
	}
}
div.index > div p{
	color:#fff;
	font-size:2.2rem;
	font-weight: bold;
	margin-bottom:2em;
}
div.contentsWrapper.green div.contents,
div.contentsWrapper.greens div.contents{
	background:var(--green-color);
}
div.contentsWrapper.blue div.contents,
div.contentsWrapper.blues div.contents{
	background:var(--blue-color);
}
div.open{
	cursor: pointer;
	position: relative;
	z-index: 1;
}
div.contents h2.why{
	text-align: center;
	font-size:min(8.5vw,12rem);
	font-weight: bold;
	font-style: italic;
	color:var(--green-color);
	color:#fff;
	font-family: "Raleway", sans-serif;
	font-family: "Roboto", sans-serif;
	position: relative;
	padding-bottom: 75px;
	transition:font-size 0.25s;
}
div.contents h2.why::before{
	font-size:2rem;
	position: absolute;
	margin:auto;
	text-align: center;
	left:0;
	right:0;
	bottom:25px;
}
@media(max-width:640px){
	div.contents h2.why::before{
		font-size:1.4rem;
		line-height: 1.25em;
		bottom:50px;
	}
}
div.contents h2.why.asteria::before{
	content: "豊富な機能と柔軟な活用領域。その選ばれる理由とは？";
}
div.contents h2.why.scsk::before{
	content: "導入実績と手厚いサポート。SCSKが選ばれる理由を解説。";
}
div.contents h2.why::after{
	content: "";
	background-image:url("../images/arrow_open.svg");
	width:25px;
	height: auto;
	aspect-ratio:110/150;
	background-repeat:no-repeat;
	background-size:25px;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:75px;
}
@media(max-width:640px){
	div.contents h2.why::after{
		background-size:15px;
		bottom:5px;
	}
}
div.open:hover h2.why{
	font-size:min(8.6vw,12.5rem);
	transition:font-size 0.25s;
}
div.contentsWrapper h2.top{
	font-size:4.8rem;
	font-weight: bold;
	color:var(--blue-color);
	border-bottom:4px solid var(--blue-color);
	text-align: center;
}
@media(max-width:640px){
	div.contentsWrapper h2.top{
		font-size:2.4rem;
	}
}
div.column h2.top{
	color:#fff;
	border-color: #fff;
}
div.contentsWrapper h2.top::after{
	content: "";
	pointer-events: none;
}
div.contentsWrapper h2.topFaq{
	font-size:5.4rem;
	font-weight: bold;
	text-align: center;
	color:var(--green-color);
}
div.contentsWrapper h2.top.event{
	margin-bottom:50px;
}
div.contentsWrapper.contact{
	background-color:var(--blue-color);
	margin-top:0;
}
div.contentsWrapper.contact h2{
	color:#fff;
	margin-top:50px;
}
div.contentsWrapper.contact p.white{
	color:#fff;
	font-size:1.8rem;
	text-align: center;
}
div.blogWrapper{
	margin:50px auto;
	display: flex;
	justify-content: flex-start;
	gap:3%;
	flex-wrap: wrap;
}
div.blogWrapper > div,
div.otherLink{
	width:calc((100% / 3) - 25px);
	position: relative;
	padding:10px;
	background:#fff;
	margin-bottom: 25px;
}
@media(max-width:640px){
	div.blogWrapper > div,
	div.otherLink{
		width:calc((100%) - 25px);
		margin:10px auto;
	}
}
div.blogWrapper.individual{
    margin:auto;
}
div.blogWrapper.individual > div,
div.otherLink{
	background:#efefef;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
}
div.blogWrapper > div a,
div.otherLink a{
	display: block;
	width:100%;
	aspect-ratio:16 / 9;
	overflow: hidden;
}
div.blogWrapper > div a img,
div.otherLink a img{
	width:100%;
	transform: scale(1);
	transition: all 0.2s;
}
div.blogWrapper > div a img:hover,
div.otherLink a img:hover{
	transform: scale(1.05);
	transition: all 0.5s;
}
div.blogWrapper > div p.category,
div.blogWrapper > div p.date,
div.otherLink p.category,
div.otherLink p.date{
	position: absolute;
	display: inline-block;
	color:#fff;
	padding:0 10px;
}
div.blogWrapper > div p.category,
div.otherLink p.category{
	background:var(--green-color);
	top:20px;
	left:20px;
	font-size:1.4rem;
}
div.blogWrapper > div ul.category,
div.otherLink ul.category{
	position: absolute;
	top:20px;
	left:20px;
	font-size:1.4rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
div.blogWrapper > div ul.category li,
div.otherLink ul.category li{
	background:var(--green-color);
	display: inline-block !important;
	color:#fff;
	padding:0 10px;
	margin-bottom:0.5em;
}
div.blogWrapper > div p.date,
div.otherLink p.date{
	top:20px;
	right:20px;
	background:var(--blue-color);
	font-size:1.2rem;
}
div.blogWrapper > div p.title,
div.otherLink p.title{
	line-height: 1.5em;
	margin-top:0.5em;
}
div.blogWrapper div.document img{
	object-fit: contain !important;
	width:100%;
	height: 100%;
	aspect-ratio:1;
}
div.submit{
	margin:25px auto 50px;
	display: flex;
	justify-content: center;
	gap:25px;
}
div.submit.white{
	background:#fff;
	width:fit-content;
	border:25px solid #fff;
}
@media(max-width:1240px){
	div.submit.white{
		width:auto;
	}
}
@media(max-width:1010px){
	div.submit.white{
		width:fit-content;
		flex-direction: column;
	}
}
div.submit.columns{
	flex-direction: column !important;
}
a.more{
	display: inline-block;
	background-color:var(--green-color);
	padding:15px 50px;
	color:#fff;
	background-image:url("../images/arrow_right.svg");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size:15px;
	transition: background-color 0.2s;
	min-width:300px;
	text-align: center;
}
a.more:hover{
	background-color:var(--blue-color);
	transition: background-color 0.2s;
}
a.more.wide{
	width:90% !important;
	max-width: none !important;
	position: relative !important;
}
a.more.blue{
	background-color:var(--blue-color);
}
a.more.blue:hover{
	background-color:var(--green-color);
}
a.moreproduct{
	display: inline-block;
	border:3px solid #fff;
	padding:15px 50px;
	color:#fff;
	background-image:url("../images/arrow_right.svg");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size:15px;
	transition: background-color 0.2s;
	min-width:300px;
	text-align: center;
	font-weight: bold;
}
@media(max-width:640px){
	a.moreproduct{
		display: block;
		margin:auto;
	}
}
a.moreproduct.green:hover{
	background-color:#fff;
	color:var(--green-color);
	background-image:url("../images/arrow_right_green.svg");
}
a.moreproduct.blue:hover{
	background-color:#fff;
	color:var(--blue-color);
	background-image:url("../images/arrow_right_blue.svg");
}
p.why_open{
	background-image:url("../images/arrow_open.svg");
	width:25px;
	height: auto;
	aspect-ratio:110/150;
	background-repeat:no-repeat;
	background-size:25px;
	margin:auto;
	margin-top:-25px;
	margin-bottom: 25px;
	cursor: pointer;
}
div.why_contents{
	background:#fff;
	margin:25px;
	padding:25px;
	position: relative;
	z-index: 2;
	display: none;
	border-radius: 12px;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35) inset;
}
@media(max-width:640px){
	div.why_contents{
		margin:10px;
		padding:10px;
		border-radius: 8px;
	}
}
div.why_contents::before{
	opacity: 0.25;
	position: absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	text-align: center;
	font-weight: bold;
	font-size:min(8.5vw,12rem);
	font-style: italic;
	font-family: "Roboto", sans-serif;
	padding-bottom: 75px;
	transition:font-size 0.25s;
}
div.why_contents.as::before{
	content: "Why ASTERIA Warp ?";
	color:var(--green-color);
}
div.why_contents.sc::before{
	content: "Why SCSK ?";
	color:var(--blue-color);
}
p.why_top{
    margin: 0.5em;
    margin-top: 7em;
    margin-bottom: 1em;
    font-size: min(2vw,2.6rem);
    font-weight: bold;
}
@media(max-width:640px){
	p.why_top{
		margin-top:3em;
		font-size:1.6rem;
	}
}
dl.faq{
	width:100%;
	max-width:980px;
	margin:25px auto 50px;
	background:#fff;
}
dl.faq dt{
	padding:25px;
	cursor:pointer;
	padding-left:80px;
	position: relative;
	font-size:1.8rem;
	font-weight: bold;
	background-image:url("../images/arrow_faq_open.svg");
	background-position: right 25px center;
	background-repeat: no-repeat;
	background-size:20px;
}
@media(max-width:640px){
	dl.faq dt{
		padding-left:40px;
		background-position: right 10px center;
		background-size:10px;
	}
}
dl.faq dt.new::after{
	content: "";
	position: absolute;
    width: 30px;
    height: 30px;
    background-image: url("../images/icon_new.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    right: -10px;
    top: -10px;
}
dl.faq dt h1{
	font-size:1.8rem;
	font-weight: bold;
}
dl.faq dt.open{
	background-image: url("../images/arrow_faq_close.svg");
}
dl.faq dt::before{
	content: "Q";
	font-size:4.8rem;
	position: absolute;
	margin:auto;
	top:-0.2em;
	left:0.5em;
	font-weight: bold;
	color:var(--green-color);
}
@media(max-width:640px){
	dl.faq dt::before{
		content: "Q";
		font-size:2.4rem;
		position: absolute;
		margin:auto;
		top:1em;
		left:0.5em;
		font-weight: bold;
		color:var(--green-color);
	}
}
dl.faq dd{
	background:var(--green-color);
	padding:25px;
	color:#fff;
	display: none;
	overflow: hidden;
}
dl.faq dd.open{
	display: block;
}
dl.faq table td{
	border:1px solid #fff;
	padding:10px;
}
dl.faq table {
	margin-bottom:1em;
}
dl.faq a.faq{
	padding:15px 50px;
	color:var(--green-color);
	background-color:#fff;
	background-image:url("../images/arrow_right.svg");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size:15px;
	transition: background-color 0.2s;
	text-decoration: none !important;
}
dl.faq a.faq:hover{
	background-color:var(--blue-color);
	color:#fff;
	transition: background-color 0.2s;
}
dl.faq dd a{
	text-decoration: underline;
	color:#fff;
}
dl.faq dd a:hover{
	color:var(--blue-color);
}
dl.faq a.permalink{
	display: block;
	width:20px;
	height: 20px;
	float: right;
	margin-top:25px;
}
dl.faq a.permalink img{
	object-fit:contain;
	opacity: 0.75;
}
dl.faq a.permalink img:hover{
	opacity: 1;
}
div.event{
	display: flex;
	margin:25px auto;
	gap:50px;
	padding-bottom:25px;
	border-bottom:1px solid #ccc;
	width:980px;
}
@media(max-width:640px){
	div.event{
		width:100%;
		flex-direction: column;
	}
}
div.event div.left{
	width:40%;
	position: relative;
}
@media(max-width:640px){
	div.event div.left{
		width:100%;
		position: relative;
	}
}
div.event div.left img{
	width:100%
}
div.event div.right{
	position: relative;
}
div.event a.more{
	position: absolute;
	left:0;
	bottom:0;
	border:2px solid var(--blue-color);
	background-color:#fff;
	color:var(--blue-color);
	background-image:url("../images/arrow_right_blue.svg");
}
@media(max-width:640px){
	div.event a.more{
		position: static;
		margin-top:1em;
	}
}
a.more.relative{
	position: static !important;
}
div.event a.more:hover{
	background-color:var(--blue-color);
	color:#fff;
	background-image:url("../images/arrow_right.svg");
}
div.event h3{
	color:var(--blue-color);
	font-size:2.4rem;
	font-weight: bold;
	border-bottom:2px solid var(--blue-color);
	margin-bottom:0.5em;
}
div.event dl.news{
	overflow: hidden;
	border-bottom:1px solid #ccc;
	margin:15px auto;
}
dl.news dt,
dl.news dd{
	padding:1em;
	border-top:1px solid #ccc;
}
dl.news dt{
	width:calc(30%);
	float: left;
	clear: both;
}
dl.news dd{
	width:calc(70%);
	float: right;
}
a#totop{
	position: fixed;
	width:50px;
	height: 50px;
	right:30px;
	bottom:30px;
	display: none;
	background-image:url("../images/icon_totop.svg");
	background-repeat: no-repeat;
	background-size:50px;
	background-position: center top;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
}
a#totop:hover{
	background-position: center bottom;
}
div#footerWrapper{
	background-color:#333;
	overflow: hidden;
}
div.footer{
	width:94%;
	max-width:1400px;
	margin:auto;
}
div.footer_logo{
	margin-top:50px;
	display: flex;
	justify-content: space-between;
}
div.footer_logo img{
	width:160px;
}
@media(max-width:640px){
	div.footer_logo img{
		width:120px;
	}
}
ul.footer{
	margin-top:25px;
	margin-bottom:75px;
	display: flex;
	justify-content: center;
	gap:25px;
}
@media(max-width:1240px){
	ul.footer{
		flex-wrap: wrap;
	}
}
ul.footer a{
	color:#fff;
	font-weight: bold;
}
ul.footer a:hover{
	color:var(--green-color);
}
p.footer_copy{
	text-align: center;
	font-size:1.4rem;
	color:#fff;
	margin-bottom:1em;
}

div.float_contact{
	width:300px;
	background-color:var(--green-color);
	background-color:orangered;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	border:8px solid #fff;
	position: fixed;
	margin:auto;
	top:0;
	bottom:0;
	right:-240px;
	height: fit-content;
	box-shadow: -3px -3px 12px rgba(0,0,0,0.35);
	padding-left:80px;
	background-image:url("../images/icon_contact.svg");
	background-repeat: no-repeat;
	background-position: left 15px center;
	background-size:24px;
	cursor: pointer;
	padding-top:50px;
	padding-bottom:50px;
	padding-right:25px;
	transition: right 0.25s;
	gap:10px;
	z-index: 10;
}
@media(max-width:640px){
	div.float_contact{
		display: none;
	}
}
div.float_contact:hover{
	right:-15px;
	transition:right 0.25s;
}
div.contactWrapper{
	display: flex;
	flex-direction: column;
	gap:10px;
}
div.contactWrapper a{
	display: inline-block;
	padding:15px;
	text-align: center;
	background:#fff;
	color:var(--blue-color);
	font-weight: bold;
}
div.contactWrapper a:hover{
	color:#fff;
	background:var(--blue-color);
}
div.pageTitleWrapper{
	width:100%;
	margin-top:130px;
	background:blue;
	position: relative;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
}
@media(max-width:640px){
	div.pageTitleWrapper{
		margin-top:80px;
	}
}
div.pageTitleWrapper.column{
    background-image:url("../images/page_title_column.webp");
}
div.pageTitleWrapper.product{
    background-image:url("../images/page_title_product.webp");
}
div.pageTitleWrapper.document{
    background-image:url("../images/page_title_document.webp")
}
div.pageTitleWrapper.service{
    background-image:url("../images/page_title_service.webp")
}
div.pageTitleWrapper.faq{
	background-image:url("../images/page_title_faq.webp")
}
div.pageTitleWrapper.news{
	background-image:url("../images/page_title_news.webp")
}
div.pageTitleWrapper.casestudy{
	background-image:url("../images/page_title_casestudy.webp")
}
div.pageTitleWrapper::after{
	content: "";
	position: absolute;
	margin:auto;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	background: linear-gradient(to right, rgba(26,39,146,0.7) 0%, rgba(26,39,146,0) 100%);
	background: linear-gradient(to right, rgba(0,184,162,0.7) 0%, rgba(0,184,162,0) 100%);
	z-index: 1
}
div.pageTitle{
	width:94%;
	max-width:1400px;
	height: 160px;
	margin:auto;
}
@media(max-width:640px){
	div.pageTitle{
		height: 80px;
	}
}
div.pageTitle h1,
div.pageTitle p{
	line-height: 160px;
	color:#fff;
	font-weight: bold;
	font-size:4rem;
	position: relative;
	z-index: 2;
	text-indent: 3em;
}
@media(max-width:640px){
	div.pageTitle h1,
	div.pageTitle p{
		line-height: 80px;
		font-size:2.0rem;
		text-indent: 1em;
	}
}
div.wrapper{
    width:100%;
}
p.pankuzu{
    width:94%;
    max-width:1400px;
    margin:1em auto;
    display: flex;
    justify-content: flex-start;
    gap:1em;
    align-items: center;
}
@media(max-width:640px){
	p.pankuzu{
		position: static;
		padding: 10px;
		/*display: flex;
		justify-content: flex-start;*/
		align-items: center;
		overflow-x: auto;
		word-break: keep-all;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 10px;
		gap: 10px;
		width: 100%;
		box-sizing: border-box;
	}
}
p.pankuzu span.next{
    width:1em;
    aspect-ratio:1;
    height: 1em;
    background-image:url("../images/arrow_next.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size:1em;
}
div.page {
	width: calc(100% - 10px);
	padding: 5px;
	margin: 50px auto;
	display: flex;
    justify-content: center;
	overflow: hidden;
    font-family: proxima-nova,proxima nova,open sans,Arial,Helvetica,sans-serif;
    gap:3px;
}
div.page span.current_page {
	background: var(--blue-color);
	padding: 1px;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
    color:#fff;
}
div.page a,
a.link_next,
a.link_before{
	display: block;
	background: #CCC;
	padding: 1px;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color:var(--blue-color);
}
a.link_next {
    padding-left:10px !important;
    padding-right: 10px !important;
    border-left:1px solid #fff;
}
a.link_before {
    padding-left:10px !important;
    padding-right: 10px !important;
    border-right:1px solid #fff;
}
div.page span:first-child a{
	padding-right:20px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}
div.page span:last-child a{
	padding-right:20px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
    margin-left:3px;
}
div.page a:hover {
	background: var(--blue-color);
	color: #fff;
}
h1.blogTitle,
h2.category{
    color:var(--blue-color);
    font-weight: bold;
    font-size:3.6rem;
    width:94%;
    max-width:980px;
    margin:auto;
    border-bottom:2px solid var(--blue-color);
}
@media(max-width:640px){
	h1.blogTitle,
	h2.category{
		font-size:2rem;
	}
}
h1.blogTitle.docs{
	max-width:none;
}
h2.category{
	width:100%;
	margin-bottom:50px;
	max-width:none;
}
div.blogBody{
    width:94%;
    max-width:980px;
    margin:auto;
}
div.blogBody h2,
div.blogBody h3,
div.blogBody h4,
div.blogBody h5,
div.blogBody h6{
    font-weight: bold;
    color:var(--blue-color);
    margin-top:1.5em;
    margin-bottom:1em;
}
div.blogBody h2{
	font-size:3.2rem;
}
div.blogBody h3{
	font-size:2.8rem;
}
div.blogBody h4{
	font-size:2.4rem;
}
div.blogBody h5{
	font-size:2.0rem;
}
div.blogBody h6{
	font-size:1.8rem;
}
@media(max-width:640px){
	div.blogBody h2{
		font-size:2.2rem;
	}
	div.blogBody h3{
		font-size:2.0rem;
	}
	div.blogBody h4{
		font-size:1.8rem;
	}
	div.blogBody h5{
		font-size:1.6rem;
	}
	div.blogBody h6{
		font-size:1.4rem;
	}
}
div.blogBody figure{
    margin:25px auto;
}
div.blogBody img{
    max-width:94%;
}
div.blogBody figcaption{
	font-size:1.5rem;
	margin-top:.25em;
	font-weight: bold;
}
dl.blogInfo{
    padding:10px;
    background:#efefef;
    display: flex;
    margin-top:50px;
    margin-bottom:25px;
}
@media(max-width:640px){
	dl.blogInfo{
		/*flex-direction: column;*/
	}
}
dl.blogInfo dt,
dl.blogInfo dd{
    padding:10px;
    background:#fff;
    font-size: 1.4rem;
}
dl.blogInfo dt{
	width:8em;
}
dl.blogInfo dd{
    font-weight: bold;
    margin-right: 10px;
	display: flex;
	flex-wrap: wrap;
	gap:1em;
}
div.blogBody p{
    clear: both;
	margin:1em auto 1em;
}
div.blogBody ul,
div.blogBody ol{
    margin:1em 1em 1em 2em;
}
div.blogBody ul li{
    list-style: disc;
}
div.prevnext{
    margin-top:50px;
    padding-top:25px;
    border-top:2px solid var(--blue-color);
    overflow: hidden;
}
div.prevnext div.otherLink:first-child{
    float: left !important;
}
div.prevnext div.otherLink:last-child{
    float: right;
}
div.blogBody p.strong,
div.blogBody h4.strong{
	padding:15px;
	background-color:var(--green-color);
	color:#fff;
	padding-left:50px;
	background-image:url("../images/check_w_g.svg");
	background-size:25px;
	background-repeat: no-repeat;
	background-position: left 15px top 18px;
	border-radius: 4px;
	font-weight: bold;
}
div.blogBody h4.strong{
	background-position: left 15px center;
}
div.blogBody dl.green{
	padding:15px;
	background-color:var(--green-color);
	color:#fff;
	border-radius: 4px;
	margin-bottom:1em;
	padding-left:50px;
	background-image:url("../images/check_w_g.svg");
	background-size:25px;
	background-repeat: no-repeat;
	background-position: left 15px top 18px;
}
div.blogBody dl.green dt{
	font-weight: bold;
}
div.blogBody a[target="_blank"]:not(.notblank)::after {
    content: "";
    background: url("../images/icon_link.svg") right center no-repeat;
    background-size: 15px;
    width: 21.5px;
    height: 1em;
    display: inline-block;
}
dl.merit,
dl.demerit{
	padding:15px;
	margin-bottom:1em;
	color:#fff;
	border-radius: 4px;
	padding-left:50px;
	display: flex;
	gap:15px;
	background-size:25px;
	background-repeat: no-repeat;
	background-position: left 15px top 18px;
}
dl.merit{
	background-color:var(--green-color);
	background-image:url("../images/check_w_g.svg");
}
dl.merit dt,
dl.demerit dt{
	width:100px;
	font-weight: bold;
}
dl.merit dd,
dl.demerit dd{
	flex:1;
}
dl.demerit{
	background-color:#b8001e;
	background-color:#999;
	background-image:url("../images/icon_fail.svg");
}
div.blog2img{
	display: flex;
	justify-content: flex-start;
	gap:0;
	margin-bottom:1em;
}
div.blog2img figure{
	margin:0;
	padding:0;
}
/* 2枚並びのエリアだけで画像を100%に */
div.blog2img figure img{
  display:block;          /* 念のため */
  width:100%;
  max-width:none;         /* ←これが肝 */
  /* または max-width:100% !important; でも可 */
}
div.selectWrapper{
	display: flex;
	justify-content: flex-end;
}
div.selectWrapper select{
	border:2px solid var(--green-color);
	padding:10px 15px;
	border-radius: 4px;
	margin-bottom:1em;
	cursor: pointer;
	background-image:url("../images/arrow_faq_open.svg");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size:10px;
	min-width: 160px;
}
div.why_separate {
	display: flex;
	border:1px solid var(--green-color);
	padding:25px;
	border-radius: 6px;
	margin-bottom:25px;
	gap:25px;
}
@media(max-width:640px){
	div.why_separate {
		display: flex;
		border:1px solid var(--green-color);
		padding:25px;
		border-radius: 6px;
		margin-bottom:25px;
		gap:25px;
		flex-direction: column;
	}
}
div.sc div.why_separate{
	border:1px solid var(--blue-color);
}
img.why_pic1{
	height: 400px;
}
div.why_separate div.pic{
	text-align: center;
}
div.why_img2{
	width:50%;
	display: flex;
	margin-top:50px;
	justify-content: space-around;
}
@media(max-width:640px){
	div.why_img2{
		width:100%;
		margin-top:10px;
		flex-direction: column;
	}
	div.why_img2 img{
		max-width:100%;
		height: auto;
 	}
}
div.why_separate h3{
	font-weight:bold;
	font-size:min(1.8vw,2.4rem);
	background-color:var(--green-color);
	text-align: center;
	color:#fff;
	margin-bottom:1em;
	flex:none;
	background-repeat: no-repeat;
	background-image:
		url("../images/icon_star.svg"),
		url("../images/icon_star.svg");
	background-position: 
		left 0.5em center,
		right 0.5em center;
	background-size:1em;
	line-height: 2.5em;
}
@media(max-width:640px){
	div.why_separate h3{
		font-size:1.7rem;
	}
}
div.sc div.why_separate h3{
	background-color:var(--blue-color);
}
div.why_separate > div{
	width:50%;	
	position: relative;
}
@media(max-width:640px){
	div.why_separate > div{
		width:100%;	
	}
}
div.why_img2.single,
div.why_img2.single2{
    width: 80%;
    margin: auto;
    margin: 50px auto 0;
}
div.why_separate p{
	line-height: 2.5em;
	font-size:1.8rem;
}
@media(max-width:640px){
	div.why_separate p{
		font-size:1.6rem;
		line-height: 2em;
	}
}
div.why_separate strong{
	font-size: 1.5em;
	font-weight: bold;
	color:var(--green-color);
}
div.why_separate strong.blue{
	color:var(--blue-color);
}
div.why_separate a.more{
	position: absolute;
	margin:auto;
	bottom:0;
	left:0;
	right:0;
	width:min(50%,250px);
}
@media(max-width:640px){
	div.why_separate a.more{
		position: static;
		margin:15px auto 0;
	}
}
img.nocode{
	height: 280px;
	max-width:200%;
}
@media(max-width:640px){
	img.nocode{
		height: auto;
		width:100%;
	}
}
img.adapt{
	max-height: 350px;
	width:100%;
	margin:auto;
	display: block;
	flex:none;
}
h3.second,
h2.second{
	color:var(--green-color);
	font-size:2.4rem;
	border-bottom:2px solid var(--green-color);
}
div.caseWrapper{
	display: flex;
	gap:2%;
	flex-wrap: wrap;
}
div.case{
	width:calc(33% - 1%);
	padding:25px;
	/*border:1px solid var(--blue-color);*/
	background:#efefef;
	margin-bottom:3%;
}
@media(max-width:640px){
	div.case{
		width:calc(50% - 1%);
		padding:15px;
	}
}
div.case h2{
	border-bottom:3px solid var(--blue-color);
	color:var(--blue-color);
	margin-bottom:0.5em;
	font-size:2rem;
	font-weight: bold;
	line-height: 1.25em;
	padding-bottom:0.25em;
}
div.case img{
	max-width:100%;
}
div.caseTitle{
	margin-top:15px;
}
ul.tags{
	display: flex;
	flex-wrap: wrap;
	gap:0.5em;
	margin-top:1em;
}
ul.tags li{
	display: inline-block;
	white-space: normal;
	background:#fff;
	padding:0 5px;
}
@media(max-width:640px){
	ul.tags li{
		font-size:1.4rem;
	}
}
ul.caseCategory{
	padding:25px;
	padding-top:50px;
	border:2px solid var(--blue-color);
	border-radius: 8px;
	margin-bottom:25px;
	display: flex;
	flex-wrap: wrap;
	gap:1em;
	position: relative;
	margin-top:25px;
	overflow: visible;
}
ul.caseCategory::before{
	content: "業種で絞り込む";
	color:var(--blue-color);
	position: absolute;
	background:#fff;
	padding:0 25px;
	margin:auto;
	left:0;
	right:0;
	top:-1em;
	font-weight: bold;
	text-align: center;
	width:12em;
	font-size:2rem;
}
ul.caseCategory li{
	display:inline-block;
	line-height: 1em;
	background:#ccc;
	border-radius: 4px;
}
ul.caseCategory li:hover{

}
ul.caseCategory li a{
	color:#fff;
	display: block;
	width:100%;
	height: 100%;
	padding:10px 20px;
}
ul.caseCategory li:hover,
ul.caseCategory li.active{
	background:var(--blue-color);
}
ul.caseCategory li:hover a,
ul.caseCategory li.active{
	color:#fff;
}
div.caseBanner{
	/*width:640px;*/
	margin:25px auto 50px;
	border-radius: 8px;
	padding-left:100px;
	padding-right:10%;
	padding-top:50px;
	padding-bottom:50px;
}
@media(max-width:640px){
	div.caseBanner{
		/*width:640px;*/
		margin:25px auto 50px;
		border-radius: 8px;
		padding-left:15px;
		padding-right:15px;
		padding-top:25px;
		padding-bottom:25px;
	}
}
div.caseBanner.blue{
	background:var(--blue-color);
	background-image: repeating-linear-gradient(45deg, rgba(118, 118, 118, 0.05) 0px, rgba(118, 118, 118, 0.05) 19px,rgba(59, 59, 59, 0.05) 19px, rgba(59, 59, 59, 0.05) 67px,rgba(195, 195, 195, 0.05) 67px, rgba(195, 195, 195, 0.05) 87px,rgba(121, 121, 121, 0.05) 87px, rgba(121, 121, 121, 0.05) 133px,rgba(250, 250, 250, 0.05) 133px, rgba(250, 250, 250, 0.05) 172px,rgba(106, 106, 106, 0.05) 172px, rgba(106, 106, 106, 0.05) 197px,rgba(151, 151, 151, 0.05) 197px, rgba(151, 151, 151, 0.05) 226px,rgba(219, 219, 219, 0.05) 226px, rgba(219, 219, 219, 0.05) 260px),repeating-linear-gradient(45deg, rgba(70, 70, 70, 0.05) 0px, rgba(70, 70, 70, 0.05) 40px,rgba(220, 220, 220, 0.05) 40px, rgba(220, 220, 220, 0.05) 79px,rgba(95, 95, 95, 0.05) 79px, rgba(95, 95, 95, 0.05) 103px,rgba(15, 15, 15, 0.05) 103px, rgba(15, 15, 15, 0.05) 148px,rgba(51, 51, 51, 0.05) 148px, rgba(51, 51, 51, 0.05) 186px,rgba(225, 225, 225, 0.05) 186px, rgba(225, 225, 225, 0.05) 202px,rgba(60, 60, 60, 0.05) 202px, rgba(60, 60, 60, 0.05) 239px,rgba(67, 67, 67, 0.05) 239px, rgba(67, 67, 67, 0.05) 259px),repeating-linear-gradient(45deg, rgba(146, 146, 146, 0.05) 0px, rgba(146, 146, 146, 0.05) 40px,rgba(166, 166, 166, 0.05) 40px, rgba(166, 166, 166, 0.05) 54px,rgba(156, 156, 156, 0.05) 54px, rgba(156, 156, 156, 0.05) 71px,rgba(134, 134, 134, 0.05) 71px, rgba(134, 134, 134, 0.05) 95px,rgba(77, 77, 77, 0.05) 95px, rgba(77, 77, 77, 0.05) 111px,rgba(26, 26, 26, 0.05) 111px, rgba(26, 26, 26, 0.05) 153px,rgba(46, 46, 46, 0.05) 153px, rgba(46, 46, 46, 0.05) 202px,rgba(197, 197, 197, 0.05) 202px, rgba(197, 197, 197, 0.05) 216px),linear-gradient(90deg, rgb(30, 178, 248),rgb(46, 36, 197));
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
div.caseBanner.blue:hover{
	background-image: repeating-linear-gradient(45deg, rgba(208, 208, 208, 0.13) 0px, rgba(208, 208, 208, 0.13) 43px,rgba(195, 195, 195, 0.13) 43px, rgba(195, 195, 195, 0.13) 85px,rgba(41, 41, 41, 0.13) 85px, rgba(41, 41, 41, 0.13) 109px,rgba(88, 88, 88, 0.13) 109px, rgba(88, 88, 88, 0.13) 129px,rgba(24, 24, 24, 0.13) 129px, rgba(24, 24, 24, 0.13) 139px,rgba(92, 92, 92, 0.13) 139px, rgba(92, 92, 92, 0.13) 179px,rgba(37, 37, 37, 0.13) 179px, rgba(37, 37, 37, 0.13) 219px),repeating-linear-gradient(45deg, rgba(18, 18, 18, 0.13) 0px, rgba(18, 18, 18, 0.13) 13px,rgba(48, 48, 48, 0.13) 13px, rgba(48, 48, 48, 0.13) 61px,rgba(130, 130, 130, 0.13) 61px, rgba(130, 130, 130, 0.13) 84px,rgba(233, 233, 233, 0.13) 84px, rgba(233, 233, 233, 0.13) 109px,rgba(8, 8, 8, 0.13) 109px, rgba(8, 8, 8, 0.13) 143px,rgba(248, 248, 248, 0.13) 143px, rgba(248, 248, 248, 0.13) 173px,rgba(37, 37, 37, 0.13) 173px, rgba(37, 37, 37, 0.13) 188px),repeating-linear-gradient(45deg, rgba(3, 3, 3, 0.1) 0px, rgba(3, 3, 3, 0.1) 134px,rgba(82, 82, 82, 0.1) 134px, rgba(82, 82, 82, 0.1) 282px,rgba(220, 220, 220, 0.1) 282px, rgba(220, 220, 220, 0.1) 389px,rgba(173, 173, 173, 0.1) 389px, rgba(173, 173, 173, 0.1) 458px,rgba(109, 109, 109, 0.1) 458px, rgba(109, 109, 109, 0.1) 516px,rgba(240, 240, 240, 0.1) 516px, rgba(240, 240, 240, 0.1) 656px,rgba(205, 205, 205, 0.1) 656px, rgba(205, 205, 205, 0.1) 722px),linear-gradient(90deg, rgb(21, 145, 22),rgb(39, 248, 84));
	box-shadow: 3px 3px 12px rgba(0,0,0,0.35);
}
div.caseBanner.green{
	border-top:10px solid var(--green-color);
	border-bottom:10px solid var(--green-color);
	border-radius: 0;
	text-align: center;
	background-image:
		url("../images/case_doc.svg"),
		url("../images/icon_hint.svg");
	background-position:
		left 10% center,
		right 10% center;
	background-repeat: no-repeat;
	background-size:
		100px,
		120px;
}
div.caseBanner.blue p{
	color:#fff;
}
div.caseBanner.blue p.t1{
	font-size:4rem;
	font-weight: bold;
}
@media(max-width:640px){
	div.caseBanner.blue p.t1{
		font-size:2rem;
		margin-bottom:1em;
	}
}
div.caseBanner strong{
	color:crimson;
}
div.caseBanner.blue p.t2{
	font-size:2rem;
	font-weight: bold;
	background:#fff;
	color:var(--blue-color);
	text-align: center;
	line-height: 3em;
	padding:0 50px;
	background-image:url("../images/case_dl.gif");
	background-repeat: no-repeat;
	background-position:right 10px center;
	background-size:40px;
	border-radius: 100px;
}
@media(max-width:640px){
	div.caseBanner.blue p.t2{
		line-height: 1.5em;
		padding:1em 50px;
	}
}
div.caseBanner.green p.t1{
	text-align: center;
	font-size:2.4rem;
	color:var(--green-color);
	font-weight: bold;
}
div.caseBanner.green p.t2{
	font-size:2.2rem;
	text-align:center;
	background:var(--green-color);
	line-height: 3em;
	color:#fff;
	font-weight: bold;
	margin-top:1em;
	display: inline-block;
	padding:0 50px;
}
div.caseBanner.green:hover p.t2{
	background-color:orangered
}
p.h2{
	color: var(--blue-color);
	font-size:2.4rem;
	font-weight: bold;
	border-bottom:4px solid var(--blue-color);
	margin-bottom:25px;
}
div.docseparate {
	margin:50px auto;
	display: flex;
	gap:25px;
	width:94%;
}
div.docseparate > div{
	width:50%;
}
div.docseparate div.left{
	text-align: center;
}
div.docseparate div.left img{
	max-width:100%;
}
div.docseparate div.right p{
	line-height: 2em;
	margin-bottom:25px;
}
.blockWrapper {
	display: flex; 
	justify-content: space-between; 
	gap: 10px; 
	flex-wrap: nowrap; 
	margin:50px auto;
}
@media(max-width:640px){
	.blockScroll {
		width:800px;
		overflow-x: auto;
		overflow-y: visible; 
	}
}
.block {
	background: var(--blue-color);
	background: linear-gradient(to left, var(--blue-color), var(--green-color));
	border-radius: 4px; 
	padding: 20px;
	flex: 1; 
	box-sizing: border-box;
	position: relative;
}
@media(max-width:640px){
	.block{
		/*width:calc((100% / 6) - 10px)*/
		flex: 0 0 auto;           /* ← flex:1 を上書きして縮小を止める */
		max-width:calc((100% / 4) - 10px);         /* 見やすい幅に（任意で調整） */
		min-width:calc((100% / 4) - 10px);         /* 見やすい幅に（任意で調整） */
		white-space: normal;      /* テキストはブロック内で改行 */
	}
}
.block:not(:last-child)::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid var(--blue-color);
	border-right: 0;
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	right:-13px;
	z-index: 2;
}
.block:not(:first-child)::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	border-right: 0;
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:-1px;
	z-index: 1;
}
.block dt {
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
	font-size: 1.2em;
	color:#fff;
}

.ddWrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ddWrapper div {
	background: #fff;
	border-radius: 4px;
	padding: 10px;
	text-align: center;
	font-size: 0.95em;
	line-height: 1.4;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	min-height: 7em;
}
h2.service{
	font-size: 4rem;
	font-weight: bold;
	color:var(--blue-color);
	border-bottom: 4px solid var(--blue-color);
	margin-bottom: 1em;
}
@media(max-width:640px){
	h2.service{
		font-size: 2rem;
		font-weight: bold;
	}
}
h3.service{
	font-weight: bold;
	font-size:3.2rem;
	color:var(--blue-color);
	border-bottom: 4px solid var(--blue-color);
	margin-bottom: 1em;
}
@media(max-width:640px){
	h3.service{
		font-size:2rem;
	}
}
table.pocTable{
	width:100%;
}
@media(max-width:640px){
	table.pocTable{
		width:800px;
	}
}
table.pocTable td,
table.pocTable th{
	padding:1em;
}
table.pocTable th{
	background-color:var(--blue-color);
	color:#fff;
	text-align: center;
	font-weight: bold;
}
table.pocTable td{
	border:1px solid #ccc;
	vertical-align: middle;
}
ul.service{
	margin:2em 2em 4em;
}
table.pocTable td.fase{
	font-weight: bold;
	position: relative;
	font-size: 1.8rem;
}
table.pocTable td.f1::after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-top: 15px solid var(--blue-color);
	border-bottom: 0;
	position: absolute;
	margin:auto;
	right:0;
	left:0;
	bottom:-8px;
}
p.blockDesc{
	text-align: center;
	font-weight: bold;
	color:#fff;
	font-size:2rem;
	background: linear-gradient(to left, var(--blue-color), var(--green-color));
	margin:0 30px;
	margin-bottom:6em;
	position: relative;
}
@media(max-width:640px){
	p.blockDesc{
		width:calc(1190px - 60px) !important;
		margin-bottom:3em;
	}
}
p.blockDesc::before{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 30px solid var(--green-color);
	border-left: 0;
	position: absolute;
	top:0;
	bottom:0;
	left:-28px;
	margin:auto;
}
p.blockDesc::after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid var(--blue-color);
	border-right: 0;
	position: absolute;
	top:0;
	bottom:0;
	right:-28px;
	margin:auto;
}
div.product h2{
	font-size:3.6rem;
	background:var(--green-color);
	background-image: linear-gradient(56deg, rgba(254, 254, 254, 0.05) 0%, rgba(254, 254, 254, 0.05) 69%,rgba(160, 160, 160, 0.05) 69%, rgba(160, 160, 160, 0.05) 100%),linear-gradient(194deg, rgba(102, 102, 102, 0.02) 0%, rgba(102, 102, 102, 0.02) 60%,rgba(67, 67, 67, 0.02) 60%, rgba(67, 67, 67, 0.02) 100%),linear-gradient(76deg, rgba(169, 169, 169, 0.06) 0%, rgba(169, 169, 169, 0.06) 89%,rgba(189, 189, 189, 0.06) 89%, rgba(189, 189, 189, 0.06) 100%),linear-gradient(326deg, rgba(213, 213, 213, 0.04) 0%, rgba(213, 213, 213, 0.04) 45%,rgba(66, 66, 66, 0.04) 45%, rgba(66, 66, 66, 0.04) 100%),linear-gradient(183deg, rgba(223, 223, 223, 0.01) 0%, rgba(223, 223, 223, 0.01) 82%,rgba(28, 28, 28, 0.01) 82%, rgba(28, 28, 28, 0.01) 100%),linear-gradient(3deg, rgba(20, 20, 20, 0.06) 0%, rgba(20, 20, 20, 0.06) 62%,rgba(136, 136, 136, 0.06) 62%, rgba(136, 136, 136, 0.06) 100%),linear-gradient(200deg, rgba(206, 206, 206, 0.09) 0%, rgba(206, 206, 206, 0.09) 58%,rgba(6, 6, 6, 0.09) 58%, rgba(6, 6, 6, 0.09) 100%),linear-gradient(304deg, rgba(162, 162, 162, 0.07) 0%, rgba(162, 162, 162, 0.07) 27%,rgba(24, 24, 24, 0.07) 27%, rgba(24, 24, 24, 0.07) 100%),linear-gradient(186deg, rgba(166, 166, 166, 0.04) 0%, rgba(166, 166, 166, 0.04) 5%,rgba(210, 210, 210, 0.04) 5%, rgba(210, 210, 210, 0.04) 100%),linear-gradient(90deg, rgb(0,184,162),rgb(0,184,162),rgb(0,184,162));
	line-height: 2em;
	color:#fff;
	padding:0 1em;
}
@media(max-width:640px){
	div.product h2{
		font-size:2.4rem;
		line-height: 1.25em;
		padding:0.5em 1em;
	}
}
div.product h2.blue{
	background-image: linear-gradient(56deg, rgba(254, 254, 254, 0.05) 0%, rgba(254, 254, 254, 0.05) 69%,rgba(160, 160, 160, 0.05) 69%, rgba(160, 160, 160, 0.05) 100%),linear-gradient(194deg, rgba(102, 102, 102, 0.02) 0%, rgba(102, 102, 102, 0.02) 60%,rgba(67, 67, 67, 0.02) 60%, rgba(67, 67, 67, 0.02) 100%),linear-gradient(76deg, rgba(169, 169, 169, 0.06) 0%, rgba(169, 169, 169, 0.06) 89%,rgba(189, 189, 189, 0.06) 89%, rgba(189, 189, 189, 0.06) 100%),linear-gradient(326deg, rgba(213, 213, 213, 0.04) 0%, rgba(213, 213, 213, 0.04) 45%,rgba(66, 66, 66, 0.04) 45%, rgba(66, 66, 66, 0.04) 100%),linear-gradient(183deg, rgba(223, 223, 223, 0.01) 0%, rgba(223, 223, 223, 0.01) 82%,rgba(28, 28, 28, 0.01) 82%, rgba(28, 28, 28, 0.01) 100%),linear-gradient(3deg, rgba(20, 20, 20, 0.06) 0%, rgba(20, 20, 20, 0.06) 62%,rgba(136, 136, 136, 0.06) 62%, rgba(136, 136, 136, 0.06) 100%),linear-gradient(200deg, rgba(206, 206, 206, 0.09) 0%, rgba(206, 206, 206, 0.09) 58%,rgba(6, 6, 6, 0.09) 58%, rgba(6, 6, 6, 0.09) 100%),linear-gradient(304deg, rgba(162, 162, 162, 0.07) 0%, rgba(162, 162, 162, 0.07) 27%,rgba(24, 24, 24, 0.07) 27%, rgba(24, 24, 24, 0.07) 100%),linear-gradient(186deg, rgba(166, 166, 166, 0.04) 0%, rgba(166, 166, 166, 0.04) 5%,rgba(210, 210, 210, 0.04) 5%, rgba(210, 210, 210, 0.04) 100%),linear-gradient(90deg, rgb(26,39,146),rgb(26,39,146),rgb(26,39,146));
}
p.product{
	margin:25px 10% 25px 0;
	font-size:2rem;
	text-align: justify;
}
p.product.center{
	margin:25px 10%;
}
@media(max-width:640px){
	p.product{
		margin:10px;
		font-size:1.6rem;
	}
}
p.product.sap{
	background-image:url("../images/ERP_SAP_logo.webp");
	background-position: right top;
	background-repeat: no-repeat;
	padding-right:225px;
}
@media(max-width:640px){
	p.product.sap{
		background-image:url("../images/ERP_SAP_logo.webp");
		background-position: center top;
		background-repeat: no-repeat;
		padding-right:0;
		padding-top:125px;
	}
}
div.product div.separate{
	display: flex;
	gap:25px;
	margin-top:100px;
	margin-bottom: 50px;
	padding-bottom:50px;
	border-bottom:1px solid var(--green-color);
}
@media(max-width:640px){
	div.product div.separate{
		flex-direction: column;
		gap:15px;
		margin-top:50px;
		margin-bottom: 25px;
		padding-bottom:25px;
	}
}
div.product div.separate.blue{
	border-bottom:1px solid var(--blue-color);
}
div.product div.separate.reverse{
	flex-direction: row-reverse;
}
@media(max-width:640px){
	div.product div.separate.reverse{
		flex-direction: column-reverse;
	}
}
div.product div.separate > div{
	width:50%;
}
@media(max-width:640px){
	div.product div.separate > div{
		width:100% !important;
	}
	img.product{
		width:90%;
		display: block;
		margin:auto;
		margin-top:5%;
	}
}
div.product div.separate > div.wide{
	width:65%;
}
div.product div.separate > div.wide + div{
	width:35%;
}
div.product h3.dl{
	display: flex;
	border:5px solid var(--green-color);
	border-radius: 100px;
	overflow: hidden;
}
div.product h3.dl.blue{
	border:5px solid var(--blue-color);
}
div.product h3.dl dt{
	color:#fff;
	background:var(--green-color);
	padding:0.5em 1em;
	font-size:2.4rem;
}
@media(max-width:640px){
	div.product h3.dl dt{
		font-size:1.6rem;
		text-align: center;
	}
}
div.product h3.dl.blue dt{
	background:var(--blue-color);
	text-align: center;
}
div.product h3.dl dd{
    display: flex;
    align-items: center;
    padding-left: 0.5em;
    font-weight: bold;
    font-size: 2.2rem;
    color: var(--green-color);
}
@media(max-width:640px){
	div.product h3.dl dd{
		font-size: 1.6rem;
		padding-right: 1em;
	}
}
div.product h3.dl.blue dd{
    color: var(--blue-color);
}
div.product div.separate > div.right{
	text-align: center;
}
div.product div.separate > div.right img{
	width:90%;
	margin-top:5%;
}
div.separate div.left p{
	margin-top:50px;
	margin:50px 5%;
	line-height: 2em;
	font-size:1.8rem;
	text-align: justify;
}
@media(max-width:640px){
	div.product div.separate div.left p{
		margin-top:25px;
		margin:10px;
		line-height: 1.5em;
		font-size:1.4rem;
		text-align: center;
	}
}
h3.tableCaption{
	font-size:2.2rem;
	text-align: center;
	font-weight: bold;
	border-bottom: 2px solid #333;
	margin:100px auto 50px;
}
@media(max-width:640px){
	h3.tableCaption{
		font-size:1.8rem;
		margin:50px auto 25px;
	}
}
table.asteria {
	border-collapse: collapse;
	width: 100%;
	font-family: "Helvetica", "Arial", sans-serif;
}
@media(max-width:640px){
	table.asteria,
	div.asteria{
		width:1000px;
	}
	table.asteria.small{
		width:500px;
	}
}
table.asteria th,
table.asteria td {
	border: 1px solid #fff;
	padding: 0.5em;
	font-size:1.4rem;
}
/* 見出し */
table.asteria th:first-child:not(.single){
	background-color:#fff;
}
table.asteria th {
	font-weight: bold;
	text-align: center;
	font-size:1.6rem;
	background:#277d6d;
	color:#fff;
}
table.asteria th.light{
	background-color:#4ebb58;
}
/* 左端の項目カラム */
table.asteria tr:not(.single) td:first-child {
	background-color: #cfe2f3; /* 淡いブルー */
	font-weight: bold;
	text-align: left !important;
	width:160px;
	font-size:1.6rem;
}
/* フローデザイナー〜チェックポイントの行を中央寄せ */
table.asteria tbody tr:nth-child(n+3):nth-child(-n+15) td {
	text-align: center;
}
table.asteria tr:nth-child(2n+1){
	background:#e9f3ea;
}
table.asteria tr:nth-child(2n){
	background:#d0e7d1;
}
p.notice{
	margin:1em;
}
div.separateTable{
	display: flex;
	gap:20px;
}
@media(max-width:640px){
	div.separateTable{
		width:1000px;
	}
}
div.separateTable > table{
	flex:3;
}
@media(max-width:640px){
	div.separateTable > table{
		width:600px;
		flex:none;
	}
}
div.separateTable > div{
	flex:1;
}
@media(max-width:640px){
	div.separateTable > div{
		width:300px;
		flex:none;
	}
	div.separateTable > div table.asteria{
		width:100% !important;
	}
}

p.option{
	border:3px solid var(--green-color);
	padding:0.5em;
	margin:25px auto;
	border-radius: 8px;
}
p.option span{
	font-size:1.4rem;
}
div.singleImg img{
	width:100%;
}
.lightbox img[src$=".svg"] {
  width: 3000px;
  height: auto;
}
a[rel=lightbox] {
  display: inline-block;
  position: relative; /* 疑似要素の基準にする */
}

a[rel=lightbox]::after {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../images/icon_zoom.svg");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: 15px;
  right: 30px;
  z-index: 1;
}
div.circle{
	width:300px;
	height: 300px;
	border:4px solid var(--blue-color);
	margin:25px auto;
	border-radius: 150px;
	padding-top:150px;
	background-repeat: no-repeat;
	background-size:100px;
	background-position: center top 25px;
	text-align: center;
}
@media(max-width:640px){
	div.circle{
		border-radius: 75px;
	}
}
div.circle.db1{
	background-image:url("../images/icon_db1.svg");
}
div.circle.sap1{
	background-image:url("../images/icon_sap1.svg");
}
div.circle.sap2{
	background-image:url("../images/icon_sap2.svg");
	background-position: center top 35px;
}
div.circle.sap3{
	background-image:url("../images/icon_sap3.svg");
	background-size:120px;
	background-position: center top 45px;
}
div.circle h4{
	font-size:2rem;
	color:var(--blue-color);
	font-weight: bold;
}
div.circle p{
	margin:0 10%;
}
@media(max-width:640px){
	div.circle p{
		margin:0 20%;
		font-size:1.4rem;
	}
}
table.general{
	width:100%;
}
table.general thead{
	background:#ccc;
	font-weight: bold;
}
table.general th,
table.general td{
	border:1px solid #ccc;
	padding:1em;
}
table.general ul li{
	list-style: disc;
	margin-left:2em;
}
table.general ul li > ul li{
	list-style: none;
	position: relative;
}
table.general ul li > ul li::before{
	content: "※";
}
table.general ul li > ul li span{
	display: block;
	margin-left:1em;
}
.mt50{
	margin-top:50px;
}
div.cooperation{
	margin-bottom:50px;
	text-align: center;
}
div.cooperation img{
	width:80%;
}
table.sap_b{
	margin-bottom:50px;
}
td.sap_b {
	text-align: center;
}
td.sap_b img{
	height: 50px;
}
h4.db{
	font-size:2rem;
	font-weight: bold;
	/*color:var(--blue-color);*/
	border:3px solid var(--blue-color);
	padding:0.5em 3em;
	border-radius: 100px;
	background-color:var(--blue-color);
	color:#fff;
}
h4.db + ol{
	margin:2em;
	color:var(--green-color);
	font-weight: bold;
	font-size:2.2rem;
}
h4.db + ol li{
	margin-bottom:1em;
}
div.conpact{
	height: 400px;
	overflow: hidden;
	position: relative;
	transition: all 0.5s;
}
div.conpact.full{
	height: auto;
	transition: all 0.5s;
}
div.dot{
	width:8px;
	height: 37.5px;
	background-image:url("../images/table_more.svg");
	background-size:8px;
	background-repeat: no-repeat;
	display: block;
	margin:auto;
}
p.full{
	width:340px;
	line-height: 3em;
	text-align: center;
	border:3px solid var(--green-color);
	border-radius: 45px;
	margin:0 auto 50px;
	color:var(--green-color);
	cursor: pointer;
}
p.full:hover{
	background:var(--green-color);
	color:#fff;
}
a.quotation{
	background-color:orangered;
	width:800px;
	height: 120px;
	text-align: center;
	background-image:
		url("../images/icon_docs.svg"),
		url("../images/icon_docs2.svg");
	background-size:
		70px,
		50px;
	background-repeat: no-repeat;
	background-position: 
		left 30px center,
		right 30px center;
	font-size:2.2rem;
	font-weight: bold;
	color:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:100px auto;
}
@media(max-width:640px){
	a.quotation{
		margin: 50px auto;
		width: 94%;
		height: 80px;
		font-size: 1.8rem;
		background-size: 35px,
				25px;
		background-position: left 10px center,
				right 10px center;
		padding: 1em 3em;
	}
}

a.quotation:hover{
	background-color:var(--blue-color);
}
ul.event{
	border-bottom:1px solid #ccc;
}
ul.event li{
	padding:1em;
	border-top:1px solid #ccc;
	display: flex;
	gap:2em;
	align-items: center;
}
ul.event li div{
	display: flex;
	flex-direction: column;
	width:150px;
	position: relative;
}
ul.event span{
	font-size:1.4rem;
}
ul.event span.new,
div.blogWrapper span.new{
	position: absolute;
	width:30px;
	height: 30px;
	background-image:url("../images/icon_new.svg");
	background-size:30px;
	background-repeat: no-repeat;
	background-position: center;
	right:-10px;
	top:-10px;
}
ul.event span.event_date{
	padding:2px 0;
	background:#efefef;
	text-align:center;
}
ul.event span.evet_category{
	text-align: center;
	padding:2px 0;
	color:#fff;
}
ul.event span.evet_category.event{
	background:var(--blue-color);
}
ul.event span.evet_category.notice{
	background:var(--green-color);
}
ul.event span.evet_category.expire{
	background:#333;
}