.align-right{
    text-align: right;
}

nav{
    z-index: 1000;
 }

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.8);
  z-index: 100; 
  display: none;
}

iframe{
  position:absolute;
  margin: 68px 0px 0px;
  top: 0;
  left: 0;
  width:100%;
  height: calc( 100% - 68px );
  z-index: 1 !important;
}
#nav {
  color: #333333;
  background-color: #F4F5F7!important;
  border-color: #333333;
  padding: 0%;
}

.modal-dialog {
  background-color: #f8f9fa;
}
.btn-secondary {
  background: #F4F5F7;
  color: #333333;
  margin : 3px;
}
.btn-secondary:hover, .btn-secondary:focus, 
.btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover, .btn-secondary:active.focus,
.btn-secondary.active, .btn-secondary.active:focus, .btn-secondary.active:hover, .btn-secondary.active.focus,
.open > .dropdown-toggle.btn-secondary, 
.open > .dropdown-toggle.btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary:focus, 
.open > .dropdown-toggle.btn-secondary.focus,
.btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus {
  background: #eaeaea!important;
  color: #333333;
  border: 1px solid #333333;
}

.cpbtn {
  cursor: pointer;
  position: relative;
}
.cpbtn::before {
  content: '共有URLコピー済';
  width: 10em;
  color: #F4F5F7;
  padding: 0.3em 0;
  text-align: center;
  font-size: 13px;
  background: #333333;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  top: calc(-100% - 6px);
  right: 0;
  pointer-events: none;
  z-index: 3;
}
.cpbtn::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #333333;
  opacity: 0;
  position: absolute;
  top: calc(-100% + 17px);
  right: 8px;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 2;
}
.cpbtn.-tooltip::before,
.cpbtn.-tooltip::after {
  opacity: 1;
}

.charhover{
  color:#666666;
  text-decoration: none  !important
}
.charhover:hover{
  color: #333333;
  text-decoration: none !important
}

@media screen and (max-width: 500px) {
    .container-fluid {
        height: 69px;
        display: flex;           /* Flexboxを有効化 */
        align-items: center;     /* 縦方向中央揃え */
        justify-content: space-between; /* 横方向の間隔を均等に */
    }
    .navbar-brand.nav-logo {
        width: 30%; /* 画面幅の30%ずつ */
        padding: 5px 0px;
        display: flex;           /* Flexboxを有効化 */
        align-items: center;     /* 縦方向中央揃え */
    }
    .navbar-brand.nav-link {
        width: 30%; /* 画面幅の30%ずつ */
        padding: 5px 0px;
        display: flex;           /* Flexboxを有効化 */
        align-items: center;     /* 縦方向中央揃え */
    }
      
    .navbar-toggler {
        min-width: 69px;
        padding: 5px 0px;
    }

    .nav-logo img, .nav-link img {
        width: 100%; /* 親要素いっぱいに広げる */
        height: auto;
    }
}

@media screen and (min-width: 501px) {
    .nav-logo img {
        width: 100%;
        max-width: 265px; /* 必要に応じて調整 */
        height: auto;
    }
    .nav-link img {
        width: 100%;
        max-width: 107px;
        height: auto;
    }
}
#navbarsExample01 {
padding: 12px;
}