/* Your custom styles */

/* Main color */
.m-color {
    background-color: #343838 !important;
    color: #FFF;
}

/* Accent color */
.a-color {
    background-color: #FFCB3C !important;
}

h1.h-color {
    font-size: 1.75rem;
    color: #333;
    font-weight: bold;
    border-bottom: 5px solid #333;
    padding: .5rem 0;
}

h2.h-color {
    font-size: 1.5rem;
    font-weight: bold;
    color: #343838;
    border-bottom: 4px solid #FFCB3C;
    padding: .5rem;
}

h3.h-color {
    font-size: 1rem;
    font-weight: bold;
    background: #343838;
    color: #FFF;
    border-bottom: 4px solid #ffd24c;
    padding: .8rem .5rem;
    margin-bottom : 1rem;
}

h4.h-color {
    font-size: 1rem;
    font-weight: bold;
    background-color: #d3d3d3;
    border-bottom: 3px solid #343838;
    padding: .6rem .5rem;
    margin-bottom : 1rem;
}

h5.h-color {
    font-size: 1.15rem;

}

/*
.h1, h1 {
    font-size: 1.75rem;
}

.h2, h2 {
    font-size: 1.5rem;
}

.h3, h3 {
    font-size: 1.3rem;
}

.h4, h4 {
    font-size: 1.2rem;
}

.h5, h5 {
    font-size: 1.15rem;
}
*/


/* ページネーション */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
    background-color: #343838;
    color: #fff;
    font-weight: bold;
}

.btn {
    text-transform: none;
}

.carousel-indicators li {
    background-color: #343838 !important;
}

table.table th,
table.table td {
    vertical-align: middle;
}

@media screen and (max-width:767px) {
/* 画面サイズが767px以下の場合読み込む */
table {
    width: 100%;
}

th,td {
    display: block;
    width: 100%;
}

.table-bordered {
    border: none;
}

.table-bordered td,
.table-bordered th {
    margin-top: -1px;
}

table.tc th,
table.tc td {
    display: table-cell;
}}

#mailbox .list-group-item {
    padding: 0;
}

#mailbox .list-group-item a{
    color: #333;
    padding: .75rem 1.25rem;
}

#mailbox .list-group-item a.active{
    border-left: #FFCB3C 5px solid;
}

#mailbox .list-group-item a.read {
    color: #d1d1d1;
}

#mailbox .list-group-item a.unread:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0e0';
    padding-right: .4rem;
    color: #FFCB3C;
}

#mailbox .list-group-item a.read:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f2b6';
    padding-right: .4rem;
    color: #d1d1d1;
}

#mailbox .list-group-item a.send:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f1d8';
    padding-right: .4rem;
    color: #FFCB3C;
}

/* #info table.table td,
#info table.table th {
    padding-top: 1rem;
} */

@media screen and (max-width:767px) {
/* 画面サイズが767px以下の場合読み込む */
.table-bordered {
    border: none;
}}

button.navbar-toggler span.navbar-toggler-icon {
    font-size: 1.1rem;
    margin-left: .5rem;
}

button.navbar-toggler span.counter {
    top: -11px;
    left: 14px;
    text-align: right;
}

.navbar-nav a.nav-link .counter {
    position: relative;
    top:-1px;
    left: 0px;
    margin-left: 3px;
}

#mypage_menu .counter, .media .media-left img, .modal-dialog.modal-notify .modal-header ,
nav.navbar  .counter, .media .media-left img, .modal-dialog.modal-notify .modal-header {
    box-shadow: none;
}

#mailshow .break {
    overflow-wrap: break-word;
}

#laws table tr th {
    width: 25%;
}

@media screen and (max-width:767px) {
/* 画面サイズが767px以下の場合読み込む */
#laws table tr th {
    width: 100%;
}}

#synchro img,
#column img {
    max-width: 100%;
}

#synchro b, strong,
#column  b, strong {
    font-weight: bold;
}

#column iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.floating-banner {
    position: fixed; /* バナーを追従させる */
    z-index: 99999; /* 他の要素の下に隠れないように */
    bottom: 0; /* バナーの上下の位置 */
    right: 0; /* バナーの左右の位置 */
    width: 300px; /* バナーの横幅 */
}
.floating-banner__image {
    max-width: 100%; /* 画像の最大幅 */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .floating-banner {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}
@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .floating-banner {
        display: block;/* 消していたバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
}