/* primary色
  --primary: #06066a;
  --primary-hover: #06066a;
    https://encycolorpedia.jp/ --primaryの25%飽和度
  --primary-shadow: 55, 125, 255
    https://tech-unlimited.com/color.html
*/
:root {
  --primary: #06066a;
  --primary-hover: #06066a;
  --primary-shadow: 0, 0, 119;

  --original1: #595757;
  --original1-hover: #555654;
  --original1-shadow: 64, 65, 67;

  --text: #454f5b;
}

/* 法人・団体名 */
.group-name {
  /*font-family: serif;*/
}

/* フッター背景 */
.bg-footer {
  background-color: var(--dark) !important;
}

@media (min-width: 576px) {
  .h1-sm {
    font-size: 2.5rem;
  }
  .h2-sm {
    font-size: 1.875rem;
  }
  .h3-sm {
    font-size: 1.3125rem;
  }
  .h4-sm {
    font-size: 1.125rem;
  }
  .h5-sm {
    font-size: 1rem;
  }
  .h6-sm {
    font-size: 0.875rem;
  }
  .lead-sm {
    font-size: 1.25rem;
    font-weight: 400;
  }
  .display-sm-1 {
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-sm-2 {
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-sm-3 {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-sm-4 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
}

@media (min-width: 768px) {
  .h1-md {
    font-size: 2.5rem;
  }
  .h2-md {
    font-size: 1.875rem;
  }
  .h3-md {
    font-size: 1.3125rem;
  }
  .h4-md {
    font-size: 1.125rem;
  }
  .h5-md {
    font-size: 1rem;
  }
  .h6-md {
    font-size: 0.875rem;
  }
  .lead-md {
    font-size: 1.25rem;
    font-weight: 400;
  }
  .display-md-1 {
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-md-2 {
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-md-3 {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-md-4 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
}

@media (min-width: 992px) {
  .h1-lg {
    font-size: 2.5rem;
  }
  .h2-lg {
    font-size: 1.875rem;
  }
  .h3-lg {
    font-size: 1.3125rem;
  }
  .h4-lg {
    font-size: 1.125rem;
  }
  .h5-lg {
    font-size: 1rem;
  }
  .h6-lg {
    font-size: 0.875rem;
  }
  .lead-lg {
    font-size: 1.25rem;
    font-weight: 400;
  }
  .display-lg-1 {
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-lg-2 {
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-lg-3 {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .display-lg-4 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
}

@media (min-width: 1280px) {
  .h1-xl {
    font-size: calc(1.375rem + 1.5vw) ;
  }
  .h2-xl {
    font-size: calc(1.3125rem + 0.75vw) ;
  }
  .h3-xl {
    font-size: calc(1.25625rem + 0.075vw) ;
  }
  .h4-xl {
    font-size: 1.125rem;
  }
  .h5-xl {
    font-size: 1rem;
  }
  .h6-xl {
    font-size: 0.875rem;
  }
  .lead-xl {
    font-size: 1.25rem;
    font-weight: 400;
  }
  .display-xl-1 {
    font-size: calc(1.725rem + 5.7vw) ;
  }
  .display-xl-2 {
    font-size: calc(1.675rem + 5.1vw) ;
  }
  .display-xl-3 {
    font-size: calc(1.575rem + 3.9vw) ;
  }
  .display-xl-4 {
    font-size: calc(1.475rem + 2.7vw) ;
  }
}

/* Navbar Brand */
.navbar-brand,
.navbar-brand > img {
  width: 19.5rem;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm .navbar-brand,
  .navbar-expand-sm .navbar-brand > img {
    /*width: 16rem;*/
    width: 19.5rem;
  }
}
@media (max-width: 767.98px) {
  .navbar-expand-md .navbar-brand,
  .navbar-expand-md .navbar-brand > img {
    /*width: 16rem;*/
    width: 19.5rem;
  }
}
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-brand,
  .navbar-expand-lg .navbar-brand > img {
    /*width: 16rem;*/
    width: 19.5rem;
  }
}
@media (max-width: 1199.98px) {
  .navbar-expand-xl .navbar-brand,
  .navbar-expand-xl .navbar-brand > img {
    width: 19.5rem;
  }
}
.navbar-expand .navbar-brand,
.navbar-expand .navbar-brand > img {
  width: 19.5rem;
}

/* ボタン */
.btn-original1 {
  color: #fff;
  background-color: var(--original1);
  border-color: var(--original1);
}

.btn-original1:hover {
  color: #fff;
  background-color: var(--original1-hover);
  border-color: var(--original1-hover);
}

.btn-original1:focus, .btn-original1.focus {
  color: #fff;
  background-color: var(--original1-hover);
  border-color: var(--original1-hover);
  box-shadow: 0 0 0 0.2rem rgba(var(--original1-shadow), 0.5);
}

.btn-original1.disabled, .btn-original1:disabled {
  color: #fff;
  background-color: var(--original1);
  border-color: var(--original1);
}

.btn-original1:not(:disabled):not(.disabled):active, .btn-original1:not(:disabled):not(.disabled).active,
.show > .btn-original1.dropdown-toggle {
  color: #fff;
  background-color: var(--original1-hover);
  border-color: black;
}

.btn-original1:not(:disabled):not(.disabled):active:focus, .btn-original1:not(:disabled):not(.disabled).active:focus,
.show > .btn-original1.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--original1-shadow), 0.5);
}

/* original1 button :hover, :focus, :active effects */
.btn-original1[href]:hover, .btn-original1[href]:focus, .btn-original1[href]:active, .btn-original1[type]:hover, .btn-original1[type]:focus, .btn-original1[type]:active {
  box-shadow: 0 4px 11px rgba(var(--original1-shadow), 0.35);
}

.btn-original1:not(label.btn), .btn-original1:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-original1:not([href]), .btn-original1:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: var(--original1);
  border-color: var(--original1);
}

.btn-original1:hover {
  background-color: var(--original1);
  border-color: var(--original1);
}

.bg-original1 {
  background-color: var(--original1) !important;
}

a.bg-original1:hover, a.bg-original1:focus,
button.bg-original1:hover,
button.bg-original1:focus {
  background-color: var(--original1-hover) !important;
}

/*2024-11-26 ヘッダー固定での対応*/
body{
  padding-top: 60px;
}

.header-section .container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .header-section .container {
    /*max-width: 540px;*/
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .header-section .container {
    /*max-width: 720px;*/
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .header-section .container {
    /*max-width: 960px;*/
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  .header-section .container {
    /*max-width: 1260px;*/
    max-width: 100%;
  }
}

.header-section .container{
  background-color: #FFFFFF;
}