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

h3 {
    font-size: 1.45em;
    text-align: center;
    margin-bottom: 50px;
}

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

ul#case {
    width: 1020px;
    margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

ul#case li {
    width: 235px;
    height: 180px;
    margin: 30px 10px 0 10px;
}

ul#case li a {
    display: block;
    width: 235px;
    height: 180px;
	position: relative;
	list-style: none;
	overflow: hidden;
}

ul#case li a p {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 30px;

	font-size: 16px;
	font-weight: 700;

	color: #fff;
	line-height: 1.5;

	opacity: 0;
	visibility: hidden;

	transition: .4s;

	background: rgba(0,0,0,.6);
	z-index: 10;
}

ul#case li a:hover {
	opacity: 1;
}

ul#case li a:hover p {
	visibility: visible;
	opacity: 1;
}

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

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

#navigation {
	margin-top: 60px;
    font-family: urw-din, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.4em;
}

#navigation ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

#navigation ul li {
	margin: 0px 10px;
    padding: 6px;
}

#navigation ul li.active {
    margin-bottom: -1px; 
    border-bottom: solid 1px #3E3A39;
}

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

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

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

.sp-slide.tate img {
    object-fit: contain;
}

.sp-slide img {
    max-height: 666px !important;
    /* max-height: 430px !important; */
}

/* サムネイル */

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

.sp-bottom-thumbnails {
    margin-top: 60px !important;
}

.sp-top-thumbnails .sp-thumbnail-container, .sp-bottom-thumbnails .sp-thumbnail-container {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* 矢印 */

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

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

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

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

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

.sp-next-arrow:before {
    content: '' !important;
    display: block;
    background: url("../../img/case/icon_arrow.svg") no-repeat left center;
    text-indent: -9999px;
    width: 72px !important;
    height: 50px !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: 235px !important;
    height: 150px !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: 80px 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;
}


p.p-lead {
    text-align: center;
    line-height: 2em;
    margin-top: 20px;
    font-size: 18px;
}

p.p-lead + p.p-lead {
    font-size: 16px;
}

.detailtxt {
    margin-top: 50px;
}