/*** for PC Browser ***/
@media (min-width:401px)
{
.ModuleSet_Standard_5455
{
}
.ModuleSet_Standard_5455 .ModuleReference
{
width: 1000px;
margin: 50px auto 50px;
clear: both;
}

/* H2 (タイトル) のスタイル */
.ModuleSet_Standard_5455 .Module_h2Title {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 10px;           /* 各要素間の隙間 */
    color: #003366;      /* テキストの紺色 */
    font-size: 24px;     /* フォントサイズ（適宜調整） */
    font-weight: bold;
    padding-bottom: 8px; /* 下線との余白 */
    border-bottom: 2px dotted #003366; /* 下部の点線 */
    margin-bottom: 30px;
}

/* 2重の四角形アイコン */
.ModuleSet_Standard_5455 .Module_h2Title::before {
  content: "";
  display: inline-block;
  width: 8px;   /* 中の濃い部分の幅 */
  height: 8px;  /* 中の濃い部分の高さ */
  background-color: #004080; /* 中の濃い色 */
  /* 外側の薄い色の枠線 */
  border: 3px solid #7799cc; 
  flex-shrink: 0;
  /* 垂直位置の微調整（テキストの中心に合わせる） */
  margin-top: 1px;
}

/* 右側のグラデーションライン */
.ModuleSet_Standard_5455 .Module_h2Title::after {
    content: "";
    flex-grow: 1;    /* 残りの幅いっぱいに広げる */
    height: 8px;     /* ラインの太さ */
    background: linear-gradient(to right, #6688bb, #ccddee); /* 青から薄い青へのグラデーション */
    border-radius: 0; /* 角を丸くする場合は数値を指定 */
}

/* ---------------グループアイコン（画像・アイコン未使用版）---------------------- */

/* == 共通設定 == */
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"] {
    position: relative;
/*    display: inline-block; */
    float: left;
    height: 1.6em;
    line-height: 1.6em;
    margin-right: 10px;
    padding: 0 5px 0 0; /* 右側は三角形確保 */
    min-width: 60px;
    border-radius: 9px;
    color: #fff;
    font-size: medium;
/*    box-sizing: border-box; */
    text-align: center;
}

/* 左側の白い円（擬似要素で描画） */
/*
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}
*/

/* 右側の三角形（擬似要素で描画） */
/* ※参照CSSの border-right: 4px solid を活かしつつ、先端に三角形を配置 */
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"]::after {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px; /* 右向きの三角形 */
    border-color: transparent transparent transparent #fff; /* 白色の三角形 */
}

/* == 事務局 (id_1083) == */
.ModuleSet_Standard_5455 .R_Contents .id_1083 {
    background-color: #00a650; /* 画像に合わせた緑色 */
}
.ModuleSet_Standard_5455 .R_Contents .id_1083::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "事務";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* == 消防 (id_1084) == */
.ModuleSet_Standard_5455 .R_Contents .id_1084 {
    background-color: #ff0000;
}
.ModuleSet_Standard_5455 .R_Contents .id_1084::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "消防";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* == 環境 (id_1085) == */
.ModuleSet_Standard_5455 .R_Contents .id_1085 {
    background-color: #315FAC;
}
.ModuleSet_Standard_5455 .R_Contents .id_1085::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "環境";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* 事務局用の三角形を別途配置 */
.ModuleSet_Standard_5455 .R_Contents .id_1083::after {
    /* 丸の後に三角形を足すための構造調整が必要な場合、こちらで制御 */
}

/* --- テキストとアイコンの分離構造（より正確な再現） --- */

/* 汎用的なラベルテキスト流し込み */
/*
.ModuleSet_Standard_5455 .R_Contents .id_1083::before { content: "事務"; }
.ModuleSet_Standard_5455 .R_Contents .id_1084::before { content: "消防"; }
.ModuleSet_Standard_5455 .R_Contents .id_1085::before { content: "環境"; }
*/
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
.ModuleSet_Standard_5455
{
margin: 20px 0;
}
.ModuleSet_Standard_5455 .ModuleReference
{
width: 320px;
margin: 0px auto 0px;
clear: both;
}

/* H2 (タイトル) のスタイル */
.ModuleSet_Standard_5455 .Module_h2Title {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 10px;           /* 各要素間の隙間 */
    color: #003366;      /* テキストの紺色 */
    font-size: 24px;     /* フォントサイズ（適宜調整） */
    font-weight: bold;
    padding-bottom: 8px; /* 下線との余白 */
    border-bottom: 2px dotted #003366; /* 下部の点線 */
    margin-bottom: 30px;
}

/* 2重の四角形アイコン */
.ModuleSet_Standard_5455 .Module_h2Title::before {
  content: "";
  display: inline-block;
  width: 8px;   /* 中の濃い部分の幅 */
  height: 8px;  /* 中の濃い部分の高さ */
  background-color: #004080; /* 中の濃い色 */
  /* 外側の薄い色の枠線 */
  border: 3px solid #7799cc; 
  flex-shrink: 0;
  /* 垂直位置の微調整（テキストの中心に合わせる） */
  margin-top: 1px;
}

/* 右側のグラデーションライン */
.ModuleSet_Standard_5455 .Module_h2Title::after {
    content: "";
    flex-grow: 1;    /* 残りの幅いっぱいに広げる */
    height: 8px;     /* ラインの太さ */
    background: linear-gradient(to right, #6688bb, #ccddee); /* 青から薄い青へのグラデーション */
    border-radius: 0; /* 角を丸くする場合は数値を指定 */
}

/* ---------------グループアイコン（画像・アイコン未使用版）---------------------- */

/* == 共通設定 == */
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"] {
    position: relative;
/*    display: inline-block; */
    float: left;
    height: 1.6em;
    line-height: 1.6em;
    margin-right: 10px;
    padding: 0 5px 0 0; /* 右側は三角形確保 */
    min-width: 60px;
    border-radius: 9px;
    color: #fff;
    font-size: medium;
/*    box-sizing: border-box; */
    text-align: center;
}

/* 左側の白い円（擬似要素で描画） */
/*
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}
*/

/* 右側の三角形（擬似要素で描画） */
/* ※参照CSSの border-right: 4px solid を活かしつつ、先端に三角形を配置 */
.ModuleSet_Standard_5455 .R_Contents [class^="id_108"]::after {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px; /* 右向きの三角形 */
    border-color: transparent transparent transparent #fff; /* 白色の三角形 */
}

/* == 事務局 (id_1083) == */
.ModuleSet_Standard_5455 .R_Contents .id_1083 {
    background-color: #00a650; /* 画像に合わせた緑色 */
}
.ModuleSet_Standard_5455 .R_Contents .id_1083::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "事務";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* == 消防 (id_1084) == */
.ModuleSet_Standard_5455 .R_Contents .id_1084 {
    background-color: #ff0000;
}
.ModuleSet_Standard_5455 .R_Contents .id_1084::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "消防";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* == 環境 (id_1085) == */
.ModuleSet_Standard_5455 .R_Contents .id_1085 {
    background-color: #315FAC;
}
.ModuleSet_Standard_5455 .R_Contents .id_1085::before {
    /* 既存のcontentを上書きされないよう、ラベルテキストをここに定義 */
    content: "環境";
    position: static; /* テキストとして扱う */
    border: none;
    padding-left: 0;
}
/* 事務局用の三角形を別途配置 */
.ModuleSet_Standard_5455 .R_Contents .id_1083::after {
    /* 丸の後に三角形を足すための構造調整が必要な場合、こちらで制御 */
}

/* --- テキストとアイコンの分離構造（より正確な再現） --- */

/* 汎用的なラベルテキスト流し込み */
/*
.ModuleSet_Standard_5455 .R_Contents .id_1083::before { content: "事務"; }
.ModuleSet_Standard_5455 .R_Contents .id_1084::before { content: "消防"; }
.ModuleSet_Standard_5455 .R_Contents .id_1085::before { content: "環境"; }
*/
}