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

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

/* 全体コンテナの基本設定 */
.ModuleSet_Standard_5606 .bana_big ul,
.ModuleSet_Standard_5606  .bana_ao ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /*  バナー間の隙間 */
}

/* 左側：大きな画像バナー部分 */
.ModuleSet_Standard_5606 .bana_big {
    float: left; /* レイアウトに合わせて調整してください */
    width: 700px;  /* 画像の横幅に合わせて調整 */
}

.ModuleSet_Standard_5606 .bana_big li {
    width: 100%;
}

/* バナー枠囲い　不要
.ModuleSet_Standard_5606 .bana_big .bana_a
{
border: 1px solid #8FC33D;
}
.ModuleSet_Standard_5606 .bana_big .bana_b
{
border: 1px solid #73CBF3;
}
.ModuleSet_Standard_5606 .bana_big .bana_c
{
border: 1px solid #003A72;
}
*/

.ModuleSet_Standard_5606 .bana_big img {
    width: 100%;
    height: auto;
}

.ModuleSet_Standard_5606 .bana_big img:hover {
    opacity: 0.8; /* マウスを乗せた時に少し透明にする */
}
/* ------------------------------------------------------------- */
/* 右側：青枠のテキストリンク部分 */
.ModuleSet_Standard_5606 .bana_ao {
    float: left;
    margin-left: 15px;
    padding: 0; /* 上下の余白 */
    box-sizing: border-box;
}

.ModuleSet_Standard_5606 .bana_ao ul {
    flex-direction: column; /* 縦に並べる */
}
/* リストアイテム */
.ModuleSet_Standard_5606 .bana_ao li {
  width: 280px;
  height: 70px;
background-color: #E5EBF7;
  overflow: hidden;
  position: relative;
  border: 2px solid #003366; /* 濃い青の枠線 */
}

/* リンク（ボタン部分） */
.ModuleSet_Standard_5606 .bana_ao li a {
    display: flex;         /* ★高さを固定した際に文字を中央にするためflexに変更 */
/*  width: 100%; */
  height: 100%;
  text-decoration: none !important; /* 下線を削除 */
  color: #000000; /* 文字色を黒に */
  font-size: large;
/*  font-weight: bold; */
  align-items: center; /* 上下中央 */
  padding: 0 0 0 15px; /* 内側の余白 */
  position: relative; /* 疑似要素の基準点にする */
 }

/* 右下の折り返し部分の三角形を作成 (疑似要素) */
.ModuleSet_Standard_5606 .bana_ao li a::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    /* CSSによる三角形の作成 */
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #003366 transparent; /* 下辺のみ濃い青 */
}

/*  ホバーエフェクト */
.ModuleSet_Standard_5606 .bana_ao li:hover {
    background-color: #A2C6F6; /* マウスオーバー時に少し明るい青色へ変化 */
}

/* マウス操作時は枠線を出さず、キーボード操作時のみ出す最新の書き方（推奨） */
.ModuleSet_Standard_5606 .bana_ao li a:focus-visible {
    outline: 3px solid ##0064AE;
    outline-offset: -4px;
}
}


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

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

/* 全体コンテナの基本設定 */
.ModuleSet_Standard_5606 .bana_big ul,
.ModuleSet_Standard_5606  .bana_ao ul
{
    list-style: none;
    padding: 0;
    margin: 0;
/*
    display: flex;
    flex-wrap: wrap;
    gap: 10px; */ /*  バナー間の隙間 */
}

/* 左側：大きな画像バナー部分 */
.ModuleSet_Standard_5606 .bana_big {
    float: left; /* レイアウトに合わせて調整してください */
    width: 300px;  /* 画像の横幅に合わせて調整 */
}

.ModuleSet_Standard_5606 .bana_big li {
    width: 100%;
margin: 0 10px;
}

/* バナー枠囲い　不要
.ModuleSet_Standard_5606 .bana_big .bana_a
{
border: 1px solid #8FC33D;
}
.ModuleSet_Standard_5606 .bana_big .bana_b
{
border: 1px solid #73CBF3;
}
.ModuleSet_Standard_5606 .bana_big .bana_c
{
border: 1px solid #003A72;
}
*/

.ModuleSet_Standard_5606 .bana_big img {
    width: 100%;
    height: auto;
}

.ModuleSet_Standard_5606 .bana_big img:hover {
    opacity: 0.8; /* マウスを乗せた時に少し透明にする */
}
/* ------------------------------------------------------------- */
/* 右側：青枠のテキストリンク部分 */
.ModuleSet_Standard_5606 .bana_ao {
    float: left;
    margin: 0 5px;
    padding: 0; /* 上下の余白 */
    box-sizing: border-box;
}

.ModuleSet_Standard_5606 .bana_ao ul
{
/*
    flex-direction: column; *//* 縦に並べる */
}
/* リストアイテム */
.ModuleSet_Standard_5606 .bana_ao li {
  width: 280px;
  min-height: 70px;
background-color: #E5EBF7;
  overflow: hidden;
  position: relative;
  border: 2px solid #003366; /* 濃い青の枠線 */
float: left;
margin: 0 10px 10px;
}

/* リンク（ボタン部分） */
.ModuleSet_Standard_5606 .bana_ao li a {
    display: flex;         /* ★高さを固定した際に文字を中央にするためflexに変更 */
/*  width: 100%; */
  height: 100%;
  text-decoration: none !important; /* 下線を削除 */
  color: #000000; /* 文字色を黒に */
  font-size: large;
/*  font-weight: bold; */
  align-items: center; /* 上下中央 */
  padding: 0 0 0 15px; /* 内側の余白 */
  position: relative; /* 疑似要素の基準点にする */
min-height: 70px;
 }

/* 右下の折り返し部分の三角形を作成 (疑似要素) */
.ModuleSet_Standard_5606 .bana_ao li a::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    /* CSSによる三角形の作成 */
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #003366 transparent; /* 下辺のみ濃い青 */
}

/*  ホバーエフェクト */
.ModuleSet_Standard_5606 .bana_ao li:hover {
    background-color: #A2C6F6; /* マウスオーバー時に少し明るい青色へ変化 */
}
}