/**
 *  sliderkit-core.css
 *	> Core CSS styles
 *
 *  This file is part of Slider Kit jQuery plugin.
 *  http://www.kyrielles.net/sliderkit/
 *
 *  Copyright (c) 2010-2012 Alan Frog
 *  Licensed under the GNU General Public License
 *  See <license.txt> or <http://www.gnu.org/licenses/>
 *
 */

/*
 *  PLUGIN BASICS
 *  ------------------------------------------------
 */
.sliderkit {
    display: none;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.sliderkit a,
.sliderkit a:hover {
    text-decoration: none;
}

.sliderkit a:focus {
    outline: 1px dotted #000;
    /*optional*/
}

.sliderkit img {
    border: 0;
}

/*---------------------------------
 *  Navigation
 *---------------------------------*/
.sliderkit .sliderkit-nav {
    z-index: 10;
    position: absolute;
    text-align: center;
}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.sliderkit .sliderkit-nav-clip ul {
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sliderkit .sliderkit-nav-clip ul li {
    float: left;
}

.sliderkit .sliderkit-nav-clip ul li a {
    display: block;
    overflow: hidden;
}

/*---------------------------------
 *  Buttons
 *---------------------------------*/
.sliderkit .sliderkit-btn {
    z-index: 10;
}

/*---------------------------------
 *  Panels
 *---------------------------------*/
.sliderkit .sliderkit-panel {
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

.sliderkit .sliderkit-panel-active {
    z-index: 5;
}

.sliderkit .sliderkit-panel-old {
    z-index: 4;
}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox {
    position: absolute;
    z-index: 1;
}

.sliderkit .sliderkit-panel .sliderkit-panel-text {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
}

.sliderkit .sliderkit-panel .sliderkit-panel-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

/*---------------------------------
 *  Counter
 *---------------------------------*/
.sliderkit .sliderkit-count {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    padding: 5px;
    color: #fff;
    background: #000;
}

/*---------------------------------
 *  Loader
 *---------------------------------*/
.sliderkit .sliderkit-timer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: 3px;
    background: #ccc;
}
/*---------------------------------
 *  Photos gallery > Standard
 *---------------------------------*/
.photosgallery-std {
    width: 738px;
    height: 388px
}

/* Navbar */
.photosgallery-std .sliderkit-nav {
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 0 14px 0;
    height: 51px;
    display: block;

    @media (max-width: 768px) {
        height: 35px;
        display: flex;
        align-items: center;
        padding: 0;
    }
}

.photosgallery-std .sliderkit-nav-clip ul li {
    float: left;
    margin: 0;
}

.sliderkit .sliderkit-nav-clip {
    @media (max-width: 768px) {
        overflow: visible !important;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.photosgallery-std .sliderkit-nav-clip ul li a img {
    width: 124px;
    border: 2px solid #fff;
    display: block;

    @media (max-width: 768px) {
        display: none;
    }
}

.photosgallery-std .sliderkit-nav-clip ul {
    @media (max-width: 768px) {
        gap: 5px;
        display: flex;
    }
}

.photosgallery-std .sliderkit-nav-clip ul li a {
    display: block;
    width: 125px;
    height: 51px;
    overflow: hidden;
    margin: 0;
    padding: 3px;

    @media (max-width: 768px) {
        width: 7px;
        height: 7px;
        background: #666666;
        border-radius: 50%;
        padding: 0;
        display: block;
    }
}

.photosgallery-std .sliderkit-nav-clip ul li.sliderkit-selected a {
    padding: 3px;

    @media (max-width: 768px) {
        background: #107FC9;
        padding: 0;
    }
}

.photosgallery-std .sliderkit-nav-clip ul li.sliderkit-selected a img {
    border: 2px solid #3d7193;
}


/* Buttons */
.photosgallery-std .sliderkit-go-btn {
    position: absolute;
    top: 0;
    border: 0;
}

.photosgallery-std .sliderkit-go-btn span {
    display: none;
}

.photosgallery-std .sliderkit-go-btn-disable {
    opacity: 0.3;
    cursor: default;
}

.photosgallery-std .sliderkit-go-btn-disable a:hover {
    cursor: default;
}

.photosgallery-std .sliderkit-nav .sliderkit-go-next,
.photosgallery-std .sliderkit-nav .sliderkit-go-prev {
    display: block;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    @media (max-width: 768px) {
        width: 25px;
        height: 25px;
        margin-top: 4px;
    }
}
.photosgallery-std .sliderkit-nav .sliderkit-go-next:hover,
.photosgallery-std .sliderkit-nav .sliderkit-go-prev:hover {
    background: rgba(255, 255, 255, 0.85);
}
.photosgallery-std .sliderkit-nav .sliderkit-go-prev {
    left: 12px;
    @media (max-width: 768px) {
        left: 10px;
    }
}
.photosgallery-std .sliderkit-nav .sliderkit-go-next:active,
.photosgallery-std .sliderkit-nav .sliderkit-go-prev:active {
    background: rgba(255, 255, 255, 1);
}
.photosgallery-std .sliderkit-nav .sliderkit-go-prev::before {
    content: '\f060';
    font: var(--fa-font-solid);
    font-size: 23px;
    position: absolute;
    color: #107FC9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease;
    @media (max-width: 768px) {
        font-size: 16px;
    }
}
.photosgallery-std .sliderkit-nav .sliderkit-go-next {
    right: 12px;
    @media (max-width: 768px) {
        right: 10px;
    }
}
.photosgallery-std .sliderkit-nav .sliderkit-go-next::before {
    content: '\f061';
    font: var(--fa-font-solid);
    font-size: 23px;
    position: absolute;
    color: #107FC9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease;
    @media (max-width: 768px) {
        font-size: 16px;
    }
}
.photosgallery-std .sliderkit-nav .sliderkit-go-prev:active:before,
.photosgallery-std .sliderkit-nav .sliderkit-go-next:active:before {
    color: #107FC9; /* ホバー時のアイコン色を白に変更 */
}

/* Panel */
.sliderkit-panels {
    position: relative;
    left: 15px;
    top: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    aspect-ratio: 738 / 298;
    overflow: hidden;

    @media (max-width: 768px) {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
}

.photosgallery-std .sliderkit-panel {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

/* This code can be reduced and pasted in any other CSS file :

Here is a compact version :
-------------------------------

.sliderkit {
    display: none;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.sliderkit a,
.sliderkit a:hover {
    text-decoration: none;
}

.sliderkit a:focus {
    outline: 1px dotted #000;
}

.sliderkit img {
    border: 0;
}

.sliderkit .sliderkit-nav {
    z-index: 10;
    position: absolute;
    text-align: center;
}

.sliderkit .sliderkit-nav-clip {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.sliderkit .sliderkit-nav-clip ul {
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sliderkit .sliderkit-nav-clip ul li {
    float: left;
}

.sliderkit .sliderkit-nav-clip ul li a {
    display: block;
    overflow: hidden;
}

.sliderkit .sliderkit-btn {
    z-index: 10;
}

.sliderkit .sliderkit-panel {
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

.sliderkit .sliderkit-panel-active {
    z-index: 5;
}

.sliderkit .sliderkit-panel-old {
    z-index: 4;
}

.sliderkit .sliderkit-panel .sliderkit-panel-textbox {
    position: absolute;
    z-index: 1;
}

.sliderkit .sliderkit-panel .sliderkit-panel-text {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
}

.sliderkit .sliderkit-panel .sliderkit-panel-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

.sliderkit .sliderkit-count {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    padding: 5px;
    color: #fff;
    background: #000;
}

.sliderkit .sliderkit-timer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: 3px;
    background: #ccc;
} */