body::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #f1f5ff;
}

p {
    margin: 0;
}

ul {
    margin-bottom: 0;
}

hr {
    margin: 50px auto;
    background-color: unset;
    border-style: none;
    border-bottom-style: solid;
    border-width: 1.5px;
    width: 20%;
    opacity: 80%;
}

.nav-item {
    font-size: 1.4em;
}

.brandImage {
    width: 140px;
}



.browserLayout {
    background-color: white;
    max-width: 1000px;
    margin: auto;
    min-height: 100vh;
    /* padding: 0 10px; */
}

#currentNav, #currentNav:hover {
    font-weight: 600;
    color: rgb(86, 120, 255);
}

/* Dropdown Section */
@media (min-width:576px) {
    li.nav-item.dropdown:active {
        pointer-events: none;
    }
    li.nav-item.dropdown > .dropdown-menu li:active {
        pointer-events: all;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* remove the gap so it doesn't close */
     }

    .dropdown:hover .dropdown-menu {
        margin-top: 0px;
        border: none;
        border-radius: 0;
        background-color: #f8f9fa;
    }
    
    .dropdown-item {
        padding: 10px 0 10px 8px;
        border-bottom: solid thin black;
    }
    
    .dropdown-menu > li:last-of-type .dropdown-item {
        border: 0px;
    }
    
    .dropdown-menu {
        padding-bottom: 0;
    }
}

/* Index Section */
.homeContainer {
    margin: 20px 0 0;
    background-color: white;
    border: solid;
    border-width: thin;
}

@media (max-width:1000px) {
    .homeContainer {
        flex-wrap: nowrap;
    }
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* SlideShow */
.slideRatio {
    width: 100%;
}

.row {
    column-gap: 20px;
}

.containerWidth {
    max-width: 100%;
}

.center {
    text-align: center;
}

.innerContent {
    margin-bottom: 20px;
}

.sectionTitle {
    font-size: 2em;
    margin: 20px 0;
}

.sectionImage {
    margin: auto;
    max-width: 100%;
}

.sectionButton {
    text-align: end;
}

.buttonPadding {
    padding-left: 20px;
    padding-right: 20px;
}

/* Image Section */
/* Filter */
.button {
    background-color: rgb(180, 180, 180);
    padding: 0.5em 1.0em;
    border: solid thin rgb(193, 193, 193);
    border-radius: 7px;
    font-family: sans-serif;
}

.button:hover:not(.is-checked) {
    background-color: rgb(150, 150, 150);
    text-shadow: none;
}

.button.is-checked {
    background-color: white;
    color: black;
    box-shadow: none;
}

.button:focus:not(.is-checked) {
    background-color: rgb(110, 110, 110);
    box-shadow: none;
}

/* Images */
.imageSize {
    width: 180px;
    height: 180px;
}

.grid {
    margin: 10px 0;
}

/* Video Section */
/* 読み込み中アイコン */
.loadImg {
    margin: 50px 0;
}

/* Video */
.videoFit {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.videoSize {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Description */
.showHide {
    margin: 8px 0;
    padding: 0 25px;
}

.btn-outline-secondary:focus {
    box-shadow: none;
}

.description {
    display: none;
}

/* About Section */
.content {
    margin: 20px 0;
    opacity: 0;
    transition: opacity 1s; 
}

.opacity {
    opacity: 100%;
}

/* クリック押し込み時 */
.btn-check:active+.btn-outline-dark {
    background-color: rgb(90, 90, 90);
    color: rgb(225, 225, 225);

}

/* チェック完了時 */
.btn-check:checked+.btn-outline-dark {
    background-color: white;
    color: black;
    border-bottom: none;
    font-weight: 600;
}

.select {
    background-color: rgb(150, 150, 150);
    color: white;
    font-size: 1.5em;
}

.select:hover {
    background-color: rgb(110, 110, 110);
}

.spanParagraphSize {
    font-size: 16px;
    font-weight: 400;
}

/* _________________ */