@charset "UTF-8";

/* ▼▼▼ コンセプト
======================================================*/
#main{
	margin-bottom: 40px;
}

section{
	padding: 60px 0 60px 50px;
	font-size: 18px;
}

section h2{
	color: #002D68;
	font-size: 40px;
	margin-bottom: 40px;
}
	section h2 span{
		display: inline-block;
		background: #002D68;
		width: 46px;
		height: 46px;
		line-height: 40px;
		text-align: center;
		margin-right: 10px;
	}
	section h2 span img{
		max-width: 26px;
		vertical-align: middle;
	}
	.inner{
		padding: 0 56px;
	}
	.read{
		margin-bottom: 30px;
	}
	#list_01{
		background: #ebeef3;
	}
	#list_03{
		background: #ebeef3;
	}
	#list_05{
		background: #ebeef3;
	}

/* AI音声 */
.card-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.card {
  border: 2px solid navy;
  border-radius: 12px;
  padding: 16px;
  width: 30%;
  box-sizing: border-box;
  text-align: center;
}

.card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.card p {
  margin-top: 12px;
  text-align: center;
}
.card .top-image {
  width: 25%;
  height: auto;
}

@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }
}

.image-block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;            /* ←ここで列の余白（横方向）を調整 */
  margin-bottom: 40px;  /* ←これで行間（縦方向）を調整 */
}

.image-block {
  width: calc((100% - 60px) / 3); /* gap20px×2を引いた上で3等分 */
  text-align: left;
  box-sizing: border-box;
}

.image-block img {
  width: 100%;              /* ブロック横幅いっぱいに */
  height: auto;             /* 高さは自動（縦横比を維持） */
  display: block;           /* インライン要素の影響を排除 */
  margin: 0 auto;           /* 中央揃え（念のため） */
  object-fit: contain;      /* はみ出さずに収まるように */
}

/* テキスト整形 */
.image-block p {
  margin-top: 12px;
  font-size: 0.95em;
  line-height: 1.6;
  text-align: left;
}

.image-block p strong {
  display: block;         /* 改行させる */
  font-size: 1.2em;       /* 少し大きめに */
  font-weight: bold;      /* 明示的に強調 */
  margin-bottom: 1.5em;  /* 下に余白を追加 */
  margin-top: 1.5em; 
  line-height: 1.4;       /* 高さを若干ゆったりに */
}
  
.image-block p small {
  font-size: 0.85em;
}


@media (max-width: 768px) {
  .image-block-container {
    flex-direction: column;
  }

  .image-block {
    width: 100%;
  }
}

.image-block-container.two-blocks .image-block {
  width: 30%; /* 上段の左2つのブロックと同じ幅に */
}

/* flexのjustify-contentを調整してブロックを左寄せに */
.image-block-container.two-blocks {
  justify-content: flex-start;
}

.list-container {
  display: flex;
  gap: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.list-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.two-columns {
  justify-content: flex-start;
}

.two-columns .list-block {
  width: 45%;
}

.three-columns {
  justify-content: space-between;
}

.three-columns .list-block {
  width: 30%;
}

.list-block h3 {
  margin-bottom: 10px;
  font-size: 1.1em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.list-block ul {
  padding-left: 20px;
  list-style-type: disc; 
}

.list-block li {
  margin-bottom: 0px;
  line-height: 1.5;
}

.multi-column-list {
  display: flex;
  gap: 40px; /* 少し広めで他とバランス調整 */
}

.multi-column-list ul {
  flex: 1;
  padding-left: 20px;
  margin: 0;
  list-style-position: outside; /* ← これが重要 */
  list-style-type: disc;
}

@media (max-width: 768px) {
  .list-row {
    flex-direction: column;
  }

  .list-block {
    width: 100% !important;
  }
}


.section-title {
  background-color: #3F85DE;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  margin: 12px 0 0px;
  font-size: 22px;
  font-weight: bold;
  width: 100%;           /* ← 横幅いっぱいに */
  display: block;        /* ← 横幅に対応するように block に */
  box-sizing: border-box; /* ← padding込みで100%になるように */
}


.section-box p {
  margin: 0px 0 30px 0 !important;
  padding: 10px 10px !important; /* ← パディングを少し減らすと隙間が狭まる */
  background-color: #ebeef3;
  color: inherit;
}

/* 電子カルテ */
#list_01{
	position: relative;
}
	#list_01:before{
		content: "";
		width: 100%;
		height: 438px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
#list_01 ul{
	display: flex;
	justify-content: space-between;
	padding: 60px 0 0;
	position: relative;
}
	#list_01 ul:before{
		content: "";
		border-style: solid;
		border-width: 30px 40px 0 40px;
		border-color: #ffffff transparent transparent transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#list_01 ul li{
		width: 30%;
		font-size: 18px;
		font-weight: bold;
	}
	#list_01 ul li div{
		display: table;
		background: #FA8D30;
		border-radius: 50%;
		width: 214px;
		height: 214px;
		margin: 0 auto 20px;
		filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));
		-ms-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));
		-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));
	}
		#list_01 ul li:nth-child(2) div{background: #62B94D;}
		#list_01 ul li:nth-child(3) div{background: #3265A7;}
	#list_01 ul li div p{
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		font-size: 34px;
		text-align: center;
	}


/* マニュアルいらずの簡単操作 */
.inner h3{
	margin-bottom: 20px;
	color: #002D68;
	font-size: 28px;
}
	.inner .read h3{
		margin-bottom: 10px;
	}
.inner .photo{
	margin-bottom: 30px;
}

#list_02 ul{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
	#list_02 ul li{
		background: #ebeef3;
		padding: 20px 0;
		width: 30%;
		color: #002D68;
		font-weight: bold;
		text-align: center;
	}
	#list_02 .photo:nth-of-type(2){
		width: 85%;
		margin: 0 auto 40px;
	}


/* 様々な運用に対応 */
h4{
	background: #ebeef3;
	padding: 10px 0;
	margin-bottom: 30px;
	color: #002D68;
	font-size: 20px;
	text-align: center;
}
#list_04 dl{
	display: flex;
	flex-wrap: wrap;
	padding: 0 20px;
	margin-bottom: 50px;
	font-size: 12px;
}
	#list_04 dl dt{
		width: 25%;
	}
	#list_04 dl dd{
		width: 75%
	}
#list_04 .inner:nth-of-type(2){
	border-top: 1px solid #002D68;
	padding-top: 50px
}

#list_04 ul.list{
	display: flex;
	justify-content: space-between;
}
	#list_04 ul.list li{
		position: relative;
	}
	#list_04 ul.list li:not(:last-child):after{
		content: "";
		border-style: solid;
		border-width: 25px 0 25px 30px;
		border-color: transparent transparent transparent #002D68;
		width: 0;
		height: 0;
		position: absolute;
		top: 65px;
		right: -50px;
	}
	#list_04 ul.list li p{
		text-align: center;
	}

/* 豊富なオプション */
#list_06 .photo{
	width: 85%;
	margin: 0 auto 30px;
}

#list_06 ul.list{
	display: flex;
	justify-content: space-between;
}
	#list_06 ul.list li{
		position: relative;
	}
	#list_06 ul.list li:not(:last-child):after{
		content: "";
		border-style: solid;
		border-width: 25px 0 25px 30px;
		border-color: transparent transparent transparent #002D68;
		width: 0;
		height: 0;
		position: absolute;
		top: 65px;
		right: -50px;
	}
	#list_06 ul.list li p{
		text-align: center;
	}


/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

	#main{
		margin-bottom: 20px;
	}

	section{
		padding: 30px 0;
	}

	section h2{
		font-size: 20px;
		margin-bottom: 10px;
		padding-left: 33px;
		text-indent: -33px;
	}
		section h2 span{
			width: 29px;
			height: 29px;
			line-height: 25px;
			margin-right: 5px;
			text-indent: 0;
		}
		section h2 span img{
			max-width: 16px;
		}
		.inner{
			padding: 0;
		}
		.read{
			margin-bottom: 20px;
		}

	/* 電子カルテ */
	#list_01:before{
		height: 435px;
	}
	#list_01 ul{
		flex-wrap: wrap;
		padding: 30px 0 0;
	}
		#list_01 ul:before{
			content: "";
			border-style: solid;
			border-width: 20px 25px 0 25px;
			border-color: #ffffff transparent transparent transparent;
			width: 0;
			height: 0;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		#list_01 ul li{
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 12px;
		}
		#list_01 ul li:not(:last-child){
			margin-bottom: 20px;
		}
		#list_01 ul li div{
			width: 112px;
			height: 112px;
			margin: 0 20px 0 0;
			filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
			-ms-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
			-webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
			flex-shrink: 0;
		}
		#list_01 ul li div p{
			font-size: 18px;
		}

	/* マニュアルいらずの簡単操作 */
	.inner h3{
		margin-bottom: 20px;
		font-size: 16px;
	}
		.inner .read h3{
			margin-bottom: 5px;
		}
	.inner .photo{
		margin-bottom: 20px;
	}

	#list_02 ul{
		flex-wrap: wrap;
		margin-bottom: 50px;
	}
		#list_02 ul li{
			padding: 5px 0;
			width: 100%;
		}
		#list_02 ul li:not(:last-child){
			margin-bottom: 10px;
		}
		#list_02 .photo:nth-of-type(2){
			width: 100%;
			margin: 0 auto 20px;
		}


	/* 様々な運用に対応 */
	h4{
		padding: 5px 0;
		margin-bottom: 20px;
		font-size: 16px;
	}
	#list_04 dl{
		display: block;
		padding: 0;
		margin-bottom: 30px;
		font-size: 12px;
	}
		#list_04 dl dt,
		#list_04 dl dd{
			width: 100%;
		}
		#list_04 dl dt{
			font-weight: bold;
		}
		#list_04 dl dd:not(:last-of-type){
			border-bottom: 1px solid #ccc;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}
	#list_04 .inner:nth-of-type(2){
		padding-top: 30px
	}

	#list_04 ul.list{
		display: block;
		max-width: 242px;
		width: 100%;
		margin: 0 auto;
	}
		#list_04 ul.list li:not(:last-child){
			margin-bottom: 40px;
		}
		#list_04 ul.list li:not(:last-child):after{
			border-width: 20px 20px 0 20px;
			border-color: #002D68 transparent transparent transparent;
			top: auto;
			left: 50%;
			right: auto;
			bottom: -30px;
			transform: translateX(-50%);
		}

	/* 豊富なオプション */
	#list_06 .photo{
		width: 100%;
		margin: 0 auto 20px;
	}

	#list_06 ul.list{
		display: block;
		max-width: 242px;
		width: 100%;
		margin: 0 auto;
	}
		#list_06 ul.list li:not(:last-child){
			margin-bottom: 40px;
		}
		#list_06 ul.list li:not(:last-child):after{
			border-width: 20px 20px 0 20px;
			border-color: #002D68 transparent transparent transparent;
			top: auto;
			left: 50%;
			right: auto;
			bottom: -30px;
			transform: translateX(-50%);
		}

}