@charset "utf-8";
/* CSS Document */

h3 {
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 20px;
}

/* リスト
--------------------------------------------------------------------------------------------------------------- */

ul#case {    
	display: flex;
	flex-wrap: wrap;
}

ul#case li {
    position: relative;
    width: 46%;
    margin: 2vh 2% 0 2%;
}

ul#case li:before {
    content: "";
    display: block;
    padding-top: 76.1061%;
}

ul#case li a {
    display: block;
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

ul#case li p { display: none; }

ul#case li a img {
    width: 100%;
    height: 100%;
	object-fit: cover;
	font-family: "object-fit: cover; object-position: center";
}

/* ページ送り
--------------------------------------------------------------------------------------------------------------- */

#navigation {
    margin-top: 30px;
    padding: 0 40px;
}

#navigation ul {
	display: flex;
    justify-content: space-between;
}

#navigation ul li.active,
#navigation ul li.num,
#navigation ul li.dot { display: none; }

#navigation ul li.next img {
    transform: scale(-1, 1);
}

/* スライダー
--------------------------------------------------------------------------------------------------------------- */

.sp-slide {
    text-align: center !important;
    background-color: #f5f5f5;
}

.sp-slide img {
    max-height: 100% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* サムネイル */

.sp-bottom-thumbnails.sp-has-pointer {
    margin-top: 20px !important;
}

.sp-thumbnail img {
    width: 94px;
    height: 60px;
    object-fit: cover;
    font-family: "object-fit: cover; object-position: center";
}

/* 矢印 */

.sp-horizontal .sp-previous-arrow {
    left: 0 !important;
}

.sp-horizontal .sp-next-arrow {
    right: 0 !important;
}

.sp-arrow {
    width: 50px !important;
    height: 30px !important;
}

.sp-arrow:before {
    left: -4px !important;
}

.sp-previous-arrow:before {
    content: '' !important;
    display: block;
    background: url("../../img/case/icon_arrow.svg") no-repeat left center;
    background-size: 130%;
    text-indent: -9999px;
    width: 40px !important;
    height: 30px !important;
    background-color: transparent !important;
}

.sp-next-arrow:before {
    content: '' !important;
    display: block;
    background: url("../../img/case/icon_arrow.svg") no-repeat left center;
    background-size: 130%;
    text-indent: -9999px;
    width: 40px !important;
    height: 30px !important;
    background-color: transparent !important;
    transform: scale(1, -1) !important;
}

.sp-previous-arrow:after, .sp-next-arrow:after { display: none; }

/* ポインター */

.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
    top: 0 !important;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    width: 94px !important;
    height: 60px !important;
    margin-top: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    border-top: solid 5px rgba(255,255,255,0.5) !important;
    border-bottom: 5px solid rgba(255,255,255,0.5) !important;
    border-left: solid 5px rgba(255,255,255,0.5) !important;
    border-right: solid 5px rgba(255,255,255,0.5) !important;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { display: none; }

/* 一覧に戻るボタン
--------------------------------------------------------------------------------------------------------------- */

a.btn {
    width: 175px;
    height: 35px;
    margin: 40px auto 0 auto;
    display: flex;
	justify-content: center;
	align-items: center;
    background: url("../../img/btn_frame.svg") no-repeat;
    font-family: urw-din, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.detailtxt {
    margin-top: 25px;
}