@charset "utf-8";
.wid5{width:5%}
.wid10{width:10%}
.wid15{width:15%}
.wid20{width:20%}
.wid25{width:25%}
.wid30{width:30%}
.wid33{width:33.3333%}
.wid35{width:35%}
.wid40{width:40%}
.wid45{width:45%}
.wid50{width:50%}
.wid55{width:55%}
.wid60{width:60%}
.wid65{width:65%}
.wid70{width:70%}
.wid75{width:75%}
.wid80{width:80%}
.wid85{width:85%}
.wid90{width:90%}
.wid95{width:95%}

.mb0 { margin-bottom:0px !important; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb45 { margin-bottom:45px !important; }
.mb50 { margin-bottom:10px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb80 { margin-bottom:80px !important; }
.mb90 { margin-bottom:90px !important; }
.mb100 { margin-bottom:100px !important; }
.ml10 { margin-left:10px !important; }
.ml20 { margin-left:20px !important; }
.ml30 { margin-left:30px !important; }
.ml40 { margin-left:40px !important; }
.ml50 { margin-left:50px !important; }
.mr10 { margin-right:10px !important; }
.mr15 { margin-right:15px !important; }
.mr20 { margin-right:20px !important; }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr50 { margin-right:50px !important; }
.mr60 { margin-right:60px !important; }
.mr70 { margin-right:70px !important; }
.mt0 { margin-top:0px !important; }
.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }

body {
	background-color: #fff;
	font-family: 'HGｺﾞｼｯｸM', 'Montserrat', sans-serif;
}
.textLeft {
	text-align: left;
}
.center {
	text-align: center;
}
/* box-sizing
-------------------------------------------*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.inner {
	width: 800px;
	margin: 0 auto;
	/*background-color: tan;*/
	padding: 5% 0;
}
h2 {
	position: relative;
	font-size: 300%;
	letter-spacing: 0em;
	font-weight: bold;
	text-align: center;
	font-size: 36px;
    color: #555;
    margin-bottom: 50px;
}
h3 {
	position: relative;
	font-size: 300%;
	letter-spacing: 0em;
	font-weight: bold;
	text-align: center;
	font-size: 36px;
    color: #555;
    margin-bottom: 60px;
}

/*intro*/
#intro {
	overflow: hidden;
}
#intro .introImage img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.introImage {
	width: 50%;
	float: left;
}
.introImageSp, .sp {
	display: none;
}
.slide-item img {
	left: 0;
}
@keyframes slider {
	0% {
		transform: translateX(-600px);
	}
	100% {
		transform: translateX(0px);
	}
}
.introText h1{
	text-align: center;
	word-break: normal;
	padding: 5% 0% 5% 0%;
	font-size: 40px;
}
.introText {
	width: 50%;
	text-align: center;
	word-break: normal;
	padding: 5%;
	float: right;
}
.introText img {
	/*width: 80%;*/
	margin-bottom: 30px;
	/*will-change: transform;
	animation: down 1.5s;*/
}
@keyframes down {
	0% { /*transform: translateY(0); */ opacity: 0;
	}
	100% { /*transform: translateY(-50%); */ opacity: 1;
	}
}
.animation {
	opacity: 0; /* //不透明度0%*/
	-webkit-transform: translate3d(0, 100%, 0); /* //縦方向の位置を100%下げる*/
	transform: translate3d(0, 100%, 0);
	-webkit-transition: all 1s ease; /*//1秒間かけて変化させる*/
	transition: all 2s ease;
}
.animation.active {
	opacity: 1; /* //不透明度100%*/
	-webkit-transform: translate3d(0, 0, 0); /* // 縦方向の位置を戻す*/
	transform: translate3d(0, 0, 0);
}
.transparent {
	opacity: 0; /* //不透明度0%*/
	transition: all 1s ease;
}
.transparent.active {
	opacity: 1; /* //不透明度0%*/
}
.fadeColor {
	width: 50%;
	background: #fff;
	transition: all 2s 0s ease;
}
.fadeColor.active {
	width: 100%;
	background-color: #4b9cad;
}
.introText p {
	font-size: 18px;
	line-height: 2em !important;
	/*will-change: transform;
	animation: down 2.5s;*/
}

#intro .introText a {
	font-weight: bold;
}

/* ---------- コンテンツ ---------- */
#about {
	background: #f2f2f2;
	padding: 3% 0;
}
#about .inner {
	padding: 3% 0%;
	text-align: center;
	font-size: 18px;
}

#about p {
	text-align: left;
}

#OTimportant {
	padding: 3% 0;
}
#OTimportant .inner {
	padding: 3% 0%;
	text-align: center;
	font-size: 14px;
}

.OTimportant_reason {
	display:flex;
	flex-direction: column;
    gap: 30px;
    margin-top: 40px;
	align-items: center;
}

.OTimportant_reason .box {
	background: #b3e0ee;
	padding: 24px 20px;
	border-radius: 8px;
	box-sizing: border-box;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .OTimportant_reason .box-title {
	font-weight: bold;
	font-size: 23px;
	margin-bottom: 12px;
	line-height: 1.4;
	color:#263033;
	text-decoration: underline;
  }

  .OTimportant_reason .box-content {
	font-size: 18px;
	line-height: 1.7;
  }

#features {
	background: #f2f2f2;
}

#services {
	background: #fff;
}

#services p{
	text-align: end;
}

#features p {
	font-size: 18px;
	text-align: left;
	margin-bottom: 5px;
}

/* サービス一覧テーブル用 ここから*/
.otservice-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 30px;
	background: #fff;
	font-size: 16px;
  }

  .otservice-table:first-child {
	margin-top: 0px;
  }
  .otservice-table th, .otservice-table td {
	border: 1px solid #b2b2b2;
	padding: 12px 8px;
	text-align: center;
	vertical-align: middle;
  }
  .otservice-table th {
	background: #b3e0ee;
	color: #333;
	font-weight: bold;
	text-align: center;
  }
  .otservice-table tr:nth-child(even) {
	background: #f7fafd;
  }

  /* カテゴリごとに色分け */
  .otservice-table tr.cat-ux      { background: #4682b4; color: #fff; font-weight: bold;}/* ユーザーエクスペリエンス */
  .otservice-table tr.cat-support { background: #4682b4; color: #fff; font-weight: bold; } /* 導入支援 */
  .otservice-table tr.cat-build   { background: #4682b4; color: #fff; font-weight: bold; } /* 構築 */
  .otservice-table tr.cat-maint   { background: #4682b4; color: #fff; font-weight: bold; }/* 運用保守 */
  
  .otservice-table td.left-cell {
	width:15%;
}

  /* サービスメニュー列は常に白＋黒文字 */
.otservice-table td.menu-cell {
	background: #fff !important;
	color: #222 !important;
	font-weight: normal !important;
	width:50%;
}

  /* テーブルを横スクロール可能に */
.otservice-table-wrapper {
	width: 100%;
	overflow-x: auto;
  }
  
  /* テーブル自体は常にtable表示 */
  .otservice-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
  }

  /* 表の最下部右下に※を表示 */
  .note-cell {
	white-space: nowrap;
	font-size: 14px;
	text-align: right !important;
	padding: 0px !important;
	background: #fff;
	border: none !important;
  }
/* サービス一覧テーブル用 ここまで*/

/*Contact(PC共通)*/
#contact {
	background-color: #f2f2f2;
	padding: 5% 0;
}
#contact h3 {
	position: relative !important;
	font-size: 38px !important;
	letter-spacing: 0.2em !important;
	font-family: Montserrat !important;
	font-weight: bold !important;
	text-align: center !important;
	padding-bottom: 0 !important;
	margin-bottom: 30px !important;
}
#contact h3::after {
	position: absolute;
	display: block;
	content: "";
	width: 50px;
	height: 3px;
	background: #b2b2b2;
	left: 0;
	right: 0;
	margin: 30px auto;
}
.contactContents {
	clear: both;
	background-color: #fff;
	text-align: center;
	padding: 7% 0;
}
.contactBtn {
	margin: 70px 15px 15px 15px;
}
.contactBtn a {
	display: block;
	width: 300px;
	height: 60px;
	margin: 0 auto;
	color: #fff;
	line-height: 60px;
	font-size: 16px;
	letter-spacing: 0.3em;
	background-color: #545454;
	text-decoration: none;
}
.contactBtn a:hover {
	background-color: #737373;
	text-decoration: none;
	color: #fff;
}
.contactContents p {
	font-size: 14px;
	letter-spacing: 0.15em;
}

/* ===================================================================================
 for sp max-width: 740px
 =================================================================================== */
@media screen and (max-width: 740px) {
	.inner {
		width: 90%;
		padding: 10% 0;
	}
	.introImage, .pc {
		display: none;
	}
	.introImageSp {
		display: block;
	}
	.introImageSp img {
		width: 100%;
	}
	h1 img {
		width: 80%;
		margin-bottom: 15px;
	}
	.introText p {
		font-size: 14px;
		line-height: 2em !important;
	}
	.introText {
		width: 100%;
		padding: 5%;
		float: none;
	}

	.introText h1 {
		font-size: 7vw;
		text-align: center;
		margin: 20px 0 10px 0;
		line-height: 1.3;
		padding: 3% 0;
		display: block;
	  }

	h2 {
		font-size: 7vw !important;
		margin-bottom: 20px;
	}
	h3 {
		font-size: 7vw !important;
	}

	.inner p {
		font-size: 16px;
	}

	.OTimportant_reason .box-content {
		font-size: 16px;
	}

	#features p {
		font-size:16px;
	}

	#about .inner, #OTimportant .inner{
		padding:7% 0;
	}

	.OTimportant_reason {
		margin-top: 20px;
		gap:15px;
	  }

	/* サービス表調整 */
	.otservice-table {
		font-size: 13px;
		min-width: 500px; /* 3列分の最小幅を確保 */
		margin-top: 20px;
	  }

	  .otservice-table:first-child {
		font-size: 13px;
		min-width: 500px; /* 3列分の最小幅を確保 */
		margin-top: 0px;
	  }

	  .otservice-table th,
	  .otservice-table td {
		padding: 6px 4px;
	  }

	  .note-cell {
		white-space: nowrap;
		font-size: 12px;
		text-align: right !important;
		padding: 0px !important;
		background: #fff;
		border: none !important;
	  }

	/*Contact(SP共通)*/
	#contact h3 {
		position: relative !important;
		font-size: 26px !important;
		letter-spacing: 0.2em !important;
		font-family: Montserrat !important;
		font-weight: bold !important;
		text-align: center !important;
	}
	#contact h3::after {
		display: none;
	}
	.contactBtn {
		margin: 0 15px 15px 15px !important;
	}
	.contactBtn a {
		width: 225px;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
	}
	.contactContents p {
		font-size: 11px;
	}
	/*sp OPERATION ここまで*/
}