@charset "utf-8";
/* CSS Document */
#topimage{
	width: 660px;
	height:190px;
	margin:0px 0px 0px 0px;
	padding:0px;
	overflow:hidden;
	border:none;
}
#topimage:after{
	content:" ";
	display:block;
	clear:both;
}

.osirase{
	display:block;
	width:658px;
	height:270px;
	border:1px #CCCCCC solid;
	margin:5px 0px 4px 0px;
	overflow:hidden;
}
.osirase:after{
	content:" ";
	display:block;
	clear:both;
}
.osirase h3{
	color:#646464;
	font-size:16px;
	line-height:2.5em;
	font-weight:bold;
	text-indent:1em;
	border-bottom:1px #CCCCCC solid;
	margin:0px;
}
.osirase a{
	text-decoration:none;
}
.osirase .osiraseinbox{
	display:block;
	width:614px;
	height:225px;
	overflow:auto;
	margin:5px 10px 0px 0px;
	float:right;
	padding: 0px 10px;
}
.osirase .osiraseinbox dl{
	display:block;
	border-bottom: dotted 1px #787878;
	color:#464646;
	margin:0px 0px 3px 0px;
}
.osirase .osiraseinbox dl:after{
	content:" ";
	display:block;
	clear:both;
}
.osirase .osiraseinbox dt{
	display:block;
	width:90px;
	font-size:15px;
	color:#646464;
	float:left;
}
.osirase .osiraseinbox dd{
	display:block;
	font-size:13px;
	margin-left:90px;
	padding-top:2px;
}
.btnbox{
	display:block;
	width:315px;
	height:105px;
	margin:10px 0px 0px 0px;
	padding:5px;
	background-color:#efefea;
	overflow:hidden;
}
.btnbox img{
	float:left;
	margin:0px 5px 0px 0px;
}

.btnbox dt{
	font-size:15px;
	color:#000000;
	display:block;
	float:right;
	border-bottom:dotted 1px #787878;
	line-height:1.8em;
	width:128px;
	margin:0px 5px 0px 0px;
	text-align:center;
}
.btnbox dt.br{
	font-size:13px;
	line-height:1.2em;
	letter-spacing:-0.05em;
	padding:0.5em 0px;
}
.btnbox dd{
	font-size:12px;
	color:#454545;
	display:block;
	float:right;
	line-height:1.5em;
	width:128px;
	margin:5px 5px 0px 0px;
	letter-spacing:-0.05em;
}

.btnbox-box{
	display:block;
}
.btnbox-box:after{
	content:" ";
	display:block;
	clear:both;
}
.btnbox-saiyou{
	display:block;
	width:325px;
	height:115px;
	margin:10px 0px 0px 0px;
	padding:0px;
	background-color:#bcd4df;
	overflow:hidden;
}
.btnbox-saiyou img{
	float:right;
	margin:5px 5px 0px 0px;
}
.btnbox-saiyou dt{
	font-size:18px;
	color:#FFFFFF;
	display:block;
	height:28px;
	overflow:hidden;
	line-height:1.8em;
	margin:0px 0px 0px 0px;
	text-align:center;
	background-color:#8bb0c3;
}
.btnbox-saiyou dd{
	font-size:12px;
	color:#454545;
	display:block;
	float:left;
	line-height:1.5em;
	width:145px;
	margin:5px 0px 0px 10px;
	letter-spacing:0em;
}

.bottom-barnner{
	display:block;
	margin:15px 0px 0px 0px;
}
.bottom-barnner a{
	display:block;
	line-height:0px;
	margin:0px 0px 10px 0px;
}

/* ===================================
   コンテナ
   =================================== */
#general-ortho.flexbox {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* ===================================
   アイテム枠
   =================================== */
#general-ortho .item {
  box-sizing: border-box;
  margin-bottom: 10px;
  border: solid 1px #646464;
  width: 49%; /* PCは2列 */
  background-color: #fff;
}

/* ===================================
   スイッチ部分（タイトル ＋ 画像）
   =================================== */
.acc-trigger {
  /* タイトルと画像を横並びにする */
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding: 10px;
  background-color: #f9f9f9;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
}

.acc-trigger:hover {
  background-color: #eefefe;
}

/* 見出し (h4) */
.acc-trigger h4 {
  color: #00B4bb;
  font-size: 14px;
  margin: 0;
  /* アイコン分の余白を右に確保 */
  padding-right: 25px; 
  flex: 1; /* 余白を埋める */
  border-bottom: none !important; /* 既存の下線を消す */
}

/* 画像 (サムネイル) */
.acc-trigger img.thumb {
  height: 100px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0; /* 縮まないようにする */
  margin-left: 10px;
  background-color: #fff; /* 背景透過画像対策 */
}

/* ===================================
   ＋アイコンの配置
   =================================== */
.acc-trigger::after {
  content: '+';
  position: absolute;
  /* タイトルのすぐ右横、あるいは中央エリアに配置 */
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);
  
  font-size: 24px;
  color: #646464;
  font-weight: bold;
  transition: transform 0.3s;
  opacity: 0.3; /* 画像があるので少し薄くして邪魔しないように */
}

/* 開いている時のアイコン */
.acc-trigger.active::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* PCで2列表示のとき、アイコンが画像と被るのを防ぐため
   配置を「タイトルの右」に固定する調整 */
@media screen and (min-width: 769px) {
  .acc-trigger::after {
    left: auto;
    right: 120px; /* 画像(100px+余白)の左側に配置 */
    transform: translateY(-50%);
  }
  .acc-trigger.active::after {
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ===================================
   中身（テキスト部分）
   =================================== */
.acc-content {
  display: none; /* 初期非表示 */
  padding: 15px;
  border-top: 1px dotted #ccc;
}

.acc-content p {
  color: #454545;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

@media screen and (max-width: 899px) {
	#topimage{
		width: auto;
		height:auto;
		overflow:auto;
	}
	#topimage img{
		width:100%;
	}
	.osirase{
		width:auto;
	}
	.osirase .osiraseinbox{
		display:block;
		width:93%;
		height:225px;
		overflow:auto;
		margin:5px 2% 0px 2%;
		float:right;
		padding: 0px 1.5%;
	}
	.osirase .osiraseinbox dl{
		display:block;
		border-bottom: dotted 1px #787878;
		color:#464646;
		margin:0px 0px 3px 0px;
	}
	.osirase .osiraseinbox dl:after{
		content:" ";
		display:block;
		clear:both;
	}
	.osirase .osiraseinbox dt{
		width:auto;
		float:none;
	}
	.osirase .osiraseinbox dd{
		display:block;
	}
	
	.btnbox{
		width:47%;
		height:auto;
		margin:1% 0px 1% 0px;
		padding:1%;
	}
	.btnbox img{
		padding:0px 1% 0px 0px;
		background-color:#efefea;
		width:48%;
	}
	
	.btnbox dt{
		display:block;
		float:none;
		width:auto;
		margin:0px 1% 0px 0px;
		text-align:center;
		letter-spacing:0em;
	}
	.btnbox dd{
		display:block;
		float:none;
		width:auto;
		margin:1% 1% 0px 0px;
		letter-spacing:0em;
	}
	
	.btnbox-box{
		display:block;
	}
	.btnbox-box:after{
		content:" ";
		display:block;
		clear:both;
	}
	.btnbox-saiyou{
		width:49%;
		height:auto;
		margin:1% 0px 1% 0px;
		padding:0;
	}
	.btnbox-saiyou img{
		float:right;
		margin:5px 5px 5px 0px;
		width:48%;
	}
	.btnbox-saiyou dt{
		display:block;
	}
	.btnbox-saiyou dd{
		float:none;
		width:auto;
	}
	
	.bottom-barnner a{
		width:49.5%;
	}
	.bottom-barnner img{
		width:100%;
	}

}
@media screen and (max-width: 768px) {
	.btnbox{
		width:98%;
		margin:1% 0px 1% 0px;
		padding:1%;
	}
	.btnbox-saiyou{
		width:100%;
		margin:1% 0px 1% 0px;
		padding:0;
	}

	#general-ortho .item {
		width: 100%; /* 1列 */
	}
	
	/* スマホでアイコン位置を調整 */
	.acc-trigger::after {
		left: auto;
		right: 120px; /* 画像の左側に配置 */
		transform: translateY(-50%);
	}
	.acc-trigger.active::after {
		transform: translateY(-50%) rotate(45deg);
	}

}
@media screen and (max-width: 480px) {


}
@media screen and (max-width: 320px) {
}

#front_b {
	width:100%;
	height:auto;
}