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

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

.ModuleSet_Standard_5609 .syobo_bana_ak ul {
    list-style: none;
    padding: 0;
    margin: 0 33px;
    
    /* Flexboxで項目を配置 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 項目間の隙間 */
    
    /* 条件3: 項目数が4個に満たない場合の「中央揃え」を実現 */
    /*     justify-content: center; */
}

/* 2. リスト項目 (li) の共通スタイル */
.ModuleSet_Standard_5609 .syobo_bana_ak li {
    /* 1個あたりの幅と高さ (画像原寸から計算) */
    width: 220px; 
    height: 70px; 
    background-color: #FADBD9; /* バナーの濃い青色 */
    overflow: hidden; /* 疑似要素の三角形がはみ出さないように */
    position: relative; /* 疑似要素 (三角形) の基準位置 */
    transition: background-color 0.3s;
    border: 3px solid #E50112;
}

/* 3. リンク (a) のスタイル */
.ModuleSet_Standard_5609 .syobo_bana_ak li a {
    /* 条件1: liの領域全体を占め、どこをクリックしてもリンクに遷移 */
    display: flex; 
    width: 66%;
    height: 100%;
    
    /* テキストスタイル */
    text-decoration: none !important;
/*    color: #000 !important; */
    font-size: large;
    /*font-weight: bold;*/
    
    /* 配置 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 0 15px;
    padding-left: 70px; /* アイコン分のスペースを開ける */
    
    /* アイコン (背景画像) の基準 */
    position: relative;
   /* z-index: 2;*/ /* 三角形より手前に配置 */
}


/* 4. アイコン (〇の枠組み) の描画 */
.ModuleSet_Standard_5609 .syobo_bana_ak li a::before
 {
    content: '';
    position: absolute;
    left: 15px; /* 左端からの位置 */
    
    /* 〇のサイズと配置 */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    
    /* 垂直方向中央揃え */
    top: 50%;
    transform: translateY(-50%); 
    
    /* 〇の見た目（白背景と青い縁取り） */
    background-color: #fff;
    /*border: 3px solid #b3d4f1;*/ /* 薄い水色の内側の枠 */
    /*box-shadow: 0 0 0 3px #ffffff; *//* 白い外側の枠 */
    z-index: 1; /* リンクテキストよりも手前に */
}


/* 4-1. 〇の中にアイコン画像を設定 (各liクラスに個別設定) */
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak1 a::before
{ 
    background-image: url('../../../Images/2026/sb_01.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak2 a::before
{ 
    background-image: url('../../../Images/2026/sb_02.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak3 a::before
{ 
    background-image: url('../../../Images/2026/sb_03.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak4 a::before
{ 
    background-image: url('../../../Images/2026/sb_04.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak5 a::before
{ 
    background-image: url('../../../Images/2026/sb_05.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak6 a::before
{ 
    background-image: url('../../../Images/2026/sb_06.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak7 a::before
{ 
    background-image: url('../../../Images/2026/sb_07.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak8 a::before
{ 
    background-image: url('../../../Images/2026/sb_08.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* 5. clip-pathによる右下角の三角形の描画 */
/*
.ModuleSet_Standard_5609 .syobo_bana_ak li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
*/    
    /* li全体と同じサイズ（バナー全体を覆う） */
/*
    width: 100%;
    height: 100%;
*/    
    /* 三角形の色を設定 */
/*
    background-color: #E50112; */ /* 濃い青色の矢印の色 */
   
    /* Z軸順序 */
/*
    z-index: 1;*/ /* リンクテキストより奥に配置 */

    /*
     * clip-path の適用
     * 右下角を頂点とする90度の二等辺三角形に切り抜きます。
     * 頂点座標の指定:
     * 1. 左上角 (0% 0%)
     * 2. 右上角 (100% 0%)
     * 3. 右下角を頂点から左に70px離れた点 (100%から70px引いた値 100%)
     *
     * ここでは、バナーの右端から70pxの幅で三角形を作ります。
     */
/*
    clip-path: polygon(98.5% 70%, *//* 右上角 */ /*calc(98% - 20px) 97%, *//* 左下の角（右から70pxの位置、下端） */ /*98.5% 97%*/ /* 右下角（頂点） *//*);*/
/*
    clip-path: polygon(98.5% 70%, calc(98% - 20px) 97%, 98.5% 97%/);
*/    
    /* * clip-path の解説
     * - 100% 0%:   右上の角
     * - calc(100% - 70px) 100%: バナーの下端、右端から70px離れた点 (三角形の底辺の左端)
     * - 100% 100%:  右下角 (90度の頂点)
     */
/*
}
*/

/*三角形の描画 */
.ModuleSet_Standard_5609 .syobo_bana_ak li::after
{
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #E50112 transparent;
}

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

/* 3. キーボード操作時のみ、内側に強調線を表示 */
.ModuleSet_Standard_5609 .syobo_bana_ak li a:focus-visible {
    outline: 3px solid #0064AE; /* 濃い紺色で強調 */
    outline-offset: -6px;       /* 赤い枠線の内側に表示 */
}
}


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

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

.ModuleSet_Standard_5609 .syobo_bana_ak ul {
    list-style: none;
    padding: 0;
/*    margin: 0 33px; */
    
    /* Flexboxで項目を配置 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 項目間の隙間 */
    
    /* 条件3: 項目数が4個に満たない場合の「中央揃え」を実現 */
    /*     justify-content: center; */
}

/* 2. リスト項目 (li) の共通スタイル */
.ModuleSet_Standard_5609 .syobo_bana_ak li {
    /* 1個あたりの幅と高さ (画像原寸から計算) */
    width: 280px; 
    min-height: 70px; 
    background-color: #FADBD9; /* バナーの濃い青色 */
    overflow: hidden; /* 疑似要素の三角形がはみ出さないように */
    position: relative; /* 疑似要素 (三角形) の基準位置 */
    transition: background-color 0.3s;
    border: 3px solid #E50112;
}

/* 3. リンク (a) のスタイル */
.ModuleSet_Standard_5609 .syobo_bana_ak li a {
    /* 条件1: liの領域全体を占め、どこをクリックしてもリンクに遷移 */
    display: flex; 
    width: 66%;
    height: 100%;
    
    /* テキストスタイル */
    text-decoration: none !important;
/*    color: #000 !important; */
    font-size: large;
    /*font-weight: bold;*/
    
    /* 配置 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 0 10px;
    padding-left: 70px; /* アイコン分のスペースを開ける */
    
    /* アイコン (背景画像) の基準 */
    position: relative;
   /* z-index: 2;*/ /* 三角形より手前に配置 */
}


/* 4. アイコン (〇の枠組み) の描画 */
.ModuleSet_Standard_5609 .syobo_bana_ak li a::before
 {
    content: '';
    position: absolute;
    left: 15px; /* 左端からの位置 */
    
    /* 〇のサイズと配置 */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    
    /* 垂直方向中央揃え */
    top: 50%;
    transform: translateY(-50%); 
    
    /* 〇の見た目（白背景と青い縁取り） */
    background-color: #fff;
    /*border: 3px solid #b3d4f1;*/ /* 薄い水色の内側の枠 */
    /*box-shadow: 0 0 0 3px #ffffff; *//* 白い外側の枠 */
    z-index: 1; /* リンクテキストよりも手前に */
}


/* 4-1. 〇の中にアイコン画像を設定 (各liクラスに個別設定) */
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak1 a::before
{ 
    background-image: url('../../../Images/2026/sb_01.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak2 a::before
{ 
    background-image: url('../../../Images/2026/sb_02.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak3 a::before
{ 
    background-image: url('../../../Images/2026/sb_03.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak4 a::before
{ 
    background-image: url('../../../Images/2026/sb_04.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak5 a::before
{ 
    background-image: url('../../../Images/2026/sb_05.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak6 a::before
{ 
    background-image: url('../../../Images/2026/sb_06.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak7 a::before
{ 
    background-image: url('../../../Images/2026/sb_07.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ModuleSet_Standard_5609 .syobo_bana_ak .sb_ak8 a::before
{ 
    background-image: url('../../../Images/2026/sb_08.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* 5. clip-pathによる右下角の三角形の描画 */
/*
.ModuleSet_Standard_5609 .syobo_bana_ak li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
*/    
    /* li全体と同じサイズ（バナー全体を覆う） */
/*
    width: 100%;
    height: 100%;
*/    
    /* 三角形の色を設定 */
/*
    background-color: #E50112; */ /* 濃い青色の矢印の色 */
   
    /* Z軸順序 */
/*
    z-index: 1;*/ /* リンクテキストより奥に配置 */

    /*
     * clip-path の適用
     * 右下角を頂点とする90度の二等辺三角形に切り抜きます。
     * 頂点座標の指定:
     * 1. 左上角 (0% 0%)
     * 2. 右上角 (100% 0%)
     * 3. 右下角を頂点から左に70px離れた点 (100%から70px引いた値 100%)
     *
     * ここでは、バナーの右端から70pxの幅で三角形を作ります。
     */
/*
    clip-path: polygon(98.5% 70%, *//* 右上角 */ /*calc(98% - 20px) 97%, *//* 左下の角（右から70pxの位置、下端） */ /*98.5% 97%*/ /* 右下角（頂点） *//*);*/
/*
    clip-path: polygon(98.5% 70%, calc(98% - 20px) 97%, 98.5% 97%/);
*/    
    /* * clip-path の解説
     * - 100% 0%:   右上の角
     * - calc(100% - 70px) 100%: バナーの下端、右端から70px離れた点 (三角形の底辺の左端)
     * - 100% 100%:  右下角 (90度の頂点)
     */
/*
}
*/

/*三角形の描画 */
.ModuleSet_Standard_5609 .syobo_bana_ak li::after
{
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #E50112 transparent;
}

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