.s1{
	font-size: 11pt;
	color: #333333;
	margin-bottom: 0;
	margin-top: 5px;
	text-align: left;
	margin-left: 2em;
}

.s2 {
	font-size: 8pt;
	text-align: center;

}

p1{
	font-size: 11pt;
	color: #333333;
	margin-bottom: 0;
	margin-top: 5px;
	text-align: left;
	margin-left: 2em;
}

p2 {
  font-size: 8pt;
  color: #333;
}

h1 {
    color: #1e3a8a;
   	text-align: left;
	margin-top: 0;
    margin-left: 30px;

}


h2 {
   color: #333;
   font-size:14pt;
   border-left: 4px solid #0056b3;
   padding-left: 0.5em;
   margin-left: 5pt;
   margin-top: 30pt;
   margin-bottom: 0;
    
}

h3 {
   font-weight:normal;
   font-size: 10.5pt;
   color: #333333;
   margin-left:10px;
   margin-bottom:3px;
   margin-top:0;
 
}


h4 {
    font-size:17px;
    font-weight:normal;
    text-indent: 0px;
  	text-align: left;
	margin-left: 30px; 
	color:#333;

}

ul {
   list-style: none;
   padding-left: 1em;
}

ul li::before {
   content: "■";
   margin-left: 1em;
   margin-right: 0.5em;
   color: #333;
}

ul li{
   font-size:11pt;
   color:#333;
   margin-bottom:5pt;
   
}

.btn-main-cta{
    display: inline-block; /* ブロック要素のように扱いながら、インライン要素の特性も持たせます */
    margin-left:20px;
    margin-top:20px;
    padding: 10px 10px; /* ボタン内の余白を設定（縦横）*/
    background-color: #0056b3; /* ボタンの背景色 */
    color: #FFFFFF; /* ボタン内のテキストカラーに */
    font-size: 11pt; /* フォントサイズ */
    font-weight: bold; /*文字を太字に*/
    text-decoration: none; /*テキストの下線などを削除*/
    border-radius: 30px; /*角丸ボタンにする*/
    width:125px;
    text-align: center;

}

.btn-main-cta:hover {
    background-color: #0056b3; /* ホバー時のボタンの背景色 暗めの色 */
    transform: translateY(-1px); /* ホバー時にボタンを1px上に移動させることで、浮き上がるようなエフェクトを演出 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);  /*影をつけて立体的に*/

}


.maicon-tabs-area {
    display: flex;
    border-bottom: 2px solid #ccc;
    width:880px;
    margin-left: 1em;

}

.maicon-tab-button {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 12pt;
    border: none;
    background: none;
    outline: none;
    color: #666666;
    position: relative;
    border-bottom: 3px solid transparent; /* 透明なボーダーを常に表示 */
     
}

.maicon-tab-button:hover {
    color: #0056b3;
    font-weight: bold;

}

.maicon-tab-button.active {
    color: #0056b3;
    font-weight: bold;
    border-bottom-color: #0056b3; /* 色だけ変更する */
}

.maicon-tab-content {
    display: none;
    padding: 20px;
    font-size: 14px;
}

.maicon-tab-content.active {
    display: flex;
    flex-wrap: wrap; /* 画面サイズに応じて折り返し可能に */
    gap: 0px; /* アイテム間の余白調整 */
}

.product-card {
    outline: 1px solid #CCC;
    padding: 5px;
    text-align: center;
    width: calc(33.33% - 2px); /* 最大横3つまで */
    height: 230px; /* 高さ */
    background-color: #ffffff;
    transition: background 0.3s ease;
    box-sizing: border-box;
}

.product-card a {
    text-decoration: none; /* リンクの下線を消す */
}

.product-card h3 {
    color: #0056b3;
    font-size: 11pt;
    font-weight:bold 
}

.product-card p {
    color: #333;
    font-size: 10.5pt; 
}

.product-card:hover {
    background-color: #F0F8FF;
    box-shadow: 0px 4px 8px rgba(0, 86, 179, 0.15); /* 軽い影を追加 */

}

.product-card img {
    width: 100%;
    height: 120px;
    object-fit: contain; /* coverは拡大、containは縮小 */
}


/**比較表**/

.motor-table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
  margin-left:6px;
  margin-left: 1em;
  
}

.motor-table th,
.motor-table td {
  font-size:10.5pt;
  border: 1px solid #ccc;
  padding: 7.5px;
  text-align: center;
  color:#333;
}

.motor-table tr:hover {
  background-color: #F0F8FF; 
  cursor: pointer; 
}

.motor-table th {
  background-color: #e0e0e0;
}


.motor-table-link{
	text-decoration: none;
	color:#333;
}

.motor-table-link:hover{
	text-decoration:underline;
	color:#00006A;

}



/**問い合わせ先**/

.contact-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #f8f8f8;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    margin-left:15px;
    margin-top:15px;
}

.contact-button:hover {
     text-decoration:underline;

}