@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,700;1,14..32,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. 基本
　02.ヘッダー（サブ）
　03.CTA
 
******************************************************************************* */


/* ==

　01. 基本

=============================================================================== */




/* 開発実績ギャラリー
=============================================================================== */
.bCaseStudy {
	position: relative;
	padding: 20px 20px 100px;
	background-color: #F6F6F8;
	overflow: hidden;
	font-feature-settings: "palt";
}
.bCaseStudy::before {
	content: "";
	width: 100%;
	height: 480px;
	display: block;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.bCaseStudy::after {
	content: "SELECT BY FACILITY";
	width: 100%;
	font-size: 141px;
	font-size: clamp(7.5rem, -0.5921rem + 10.5263vw, 8.75rem);
	line-height: 1.0;
	font-family: "Inter", sans-serif;
	color: #EFF0F1;
	font-weight: 700;
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	text-align: center;
	opacity: .15;
}

.bCaseStudy .tHeading01 {
	padding: 40px 0;
	font-size: 28px;
	line-height: 1.0;
	color: #fff;
	font-weight: 400;
	position: relative;
	z-index: 3;
	text-align: center;
}
.bCaseStudyInner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	z-index: 3;
}
.bCaseStudyInner::after {
	content: "";
	width: 290px;
	height: 290px;
	background: url(/business/office/images/rn02/ico_search02.png) no-repeat 0 0;
	background-size: 290px;
	position: absolute;
    top: 100px;
    right: -120px;
    z-index: -1;
}

.bCaseStudyList {
	padding-bottom: 20px;
	border-bottom: 1px solid #5D667C;
}

.bCaseStudyNav {
	margin-bottom: 40px;
}
.bCaseStudyNav ul {
	max-width: 890px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}
.bCaseStudyNav ul li {
	width: 19.101123596%;
	max-width: 170px;
}
.bCaseStudyNav ul a,
.bCaseStudyNav ul span {
	color: #fff;
	display: block;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 5px;
	text-decoration: none;
	font-size: 15px;
	cursor: pointer;
}
.bCaseStudyNav ul span:hover {
	opacity: 0.8;
}
.bCaseStudyNav ul span.current {
	background-color: #555555;
	border: 1px solid #555555;
}
.bCaseStudyNav_more {
    display: block;
    margin: 20px auto 0;
    width: 180px;
    padding: 10px;
    background-color: #859DAB;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
	color: #fff !important;
}
.bCaseStudyNav_search {
    display: block;
    margin: 20px auto 0;
    width: 180px;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
.bCaseStudyNav_search span {
	position: relative;
}
.bCaseStudyNav_search span::before {
	content: "";
	width: 20px;
	height: 20px;
	display: inline-block;
	background: url(/business/office/images/rn02/ico_search01.svg) no-repeat 0 0;
	background-size: 20px;
	margin-right: 10px;
    transform: translateY(3px);
}
.bCaseStudyNav_more:hover,
.bCaseStudyNav_search:hover {
	opacity: 0.8;
}

.bCaseStudy_more {
	display: block;
    margin: 50px auto 0;
    width: 180px;
    padding: 10px;
	color: #fff !important;
    background-color: #000;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

/* silver用 */
#casestudy .mainInner {
	padding-top: 30px;
}
.bCaseStudy-silver {
	background-color: #FFFFFF;
    padding: 0 0 100px;
}
.bCaseStudy-silver::before,
.bCaseStudy-silver::after {
	display: none;
}
.bCaseStudy-silver .tHeading01 {
	color: #888888;
	font-size: 36px;
}
.bCaseStudy-silver .bCaseStudyList {

}
.bCaseStudy-silver .bCaseStudyNav ul {
	width: 100%;
	max-width: none;
}

.bCaseStudy-silver .bCaseStudyNav ul li {
	width: 19.2857%;
	max-width: 216px;
	margin-bottom: 10px;
}
.bCaseStudy-silver .bCaseStudyNav ul span,
.bCaseStudy-silver .bCaseStudyNav ul a {
    border: 1px solid #000;
	color: #000;
	padding: 10px 5px;
	line-height: 1.3;
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
}
.bCaseStudy-silver .bCaseStudyNav ul span.current {
    background-color: #999;
    border: 1px solid #999;
    color: #fff !important;
}
.bCaseStudy-silver .bCaseStudyNav ul a.bCaseStudyNav_more {
	width: auto;
	margin: 0;
}
.bCaseStudy-silver .bCaseStudyNav_search {
	background-color: #000;
	color: #fff;
}

.bCaseStudy-silver .bCaseStudyNav_search {
	width: 280px;
}
.bCaseStudy-silver .bCaseStudyNav_search span::before {
	background: url(/business/office/images/rn02/ico_search03.svg) no-repeat 0 0;
	background-size: 20px;
}

.bCaseStudy-silver .case-list__item {
	box-shadow:none;
	border-bottom: 1px solid #CCCCCC;
}


.bCaseStudy-silver .case-card__title::before,
.bCaseStudy-silver .case-card__title::after {
    display: block;
    position: absolute;
    top: calc(50% - 3px);
    width: 32px;
    height: 6px;
    content: "";
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
}
.bCaseStudy-silver .case-card:hover .case-card__title {
	color: #c80028;
}
.bCaseStudy-silver .case-card__title::before {
	left: calc(100% - 32px);
	width: 0;
	background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 6'%3E%3Cpolyline points='25 0.35 30 5.35 0 5.35' fill='none' stroke='%23c80028' stroke-miterlimit='10' /%3E%3C/svg%3E") no-repeat left center;
	background-size: 32px 6px;
	z-index: 1;
}

.bCaseStudy-silver .case-card__title::after {
	right: 0;
	background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 6'%3E%3Cpolyline points='25 0.35 30 5.35 0 5.35' fill='none' stroke='%23222222' stroke-miterlimit='10' /%3E%3C/svg%3E") no-repeat right center;
	background-size: 32px 6px;
}
.bCaseStudy-silver .case-card:hover .case-card__title::before {
	width: 32px;
}




.title {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
}
.lead {
	margin: 0 0 24px;
	color: #555;
	font-size: 14px;
}
.status {
	margin: 0 0 20px;
	color: #444;
	font-size: 14px;
}

.case-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.case-list__item {
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
}
.case-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.case-card__thumb {
	overflow: hidden;
	background: #e8e8e8;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.case-card__thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .3s ease;
}
.case-card:hover .case-card__thumb img { transform: scale(1.03); }
.case-card__body {
	padding: 20px;
}
.case-card__col {
	display: flex;
}
.case-card__case {
	margin: 0 10px 4px 0;
	padding-right: 10px;
	color: #666;
	font-size: 13px;
	border-right: 1px solid #CCCCCC;
}
.case-card__category {
	margin: 0 0 4px;
	color: #fff;
	background-color: #555555;
	padding: 3px 10px 4px;
	font-size: 13px;
	border-radius: 4px;
}
.case-card__title {
	position: relative;
	margin: 10px 0 0;
	padding-right: 40px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}
.case-card__title::after {
    content: "";
    width: 19px;
    height: 10px;
    background: url(/business/office/images/rn02/ico_arw01.svg) left top no-repeat;
    background-size: 100% auto;
    display: block;
    position: absolute;
    top: 0.6em;
    right: 5px;
}

.mfp-bg { 
	background: rgba(0, 0, 0, 0.72);
	position: fixed !important;
}
.mfp-close { display: none !important; }

.case-modal__panel {
	position: relative;
	width: min(92vw, 860px);
	margin: 0 auto;
	padding: 46px 36px 28px;
	background: #fff;
	border-radius: 2px;
}
.case-modal__panel--lg { width: min(92vw, 860px); }
.case-modal__panel--md { width: min(92vw, 720px); }
.case-modal__panel--sm { width: min(92vw, 540px); }

.case-modal__close {
	position: absolute;
    top: 0;
    right: -45px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 0px;
	line-height: 1;
	background: url(/business/office/images/rn02/ico_close01.png) no-repeat 0 0;
	background-size: 28px;
}

.case-modal__head { margin-bottom: 22px; }
.case-modal__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.case-modal__label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 10px 3px;
	border-radius: 2px;
	color: #555;
	font-size: 13px;
	line-height: 1.2;
	border-right: 1px solid #CCCCCC;
	margin-right: 10px;
	padding-right: 10px;
}
.case-modal__label--dark {
	background: #555555;
	color: #fff;
	border-right: none;
}
.case-modal__title {
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid #ddd;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}

.case-modal__body { text-align: center; }

.case-modal__single-image {
	max-width: 560px;
	margin: 0 auto 18px;
}
.case-modal__single-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.case-modal__single-image--narrow { max-width: 320px; }
.case-modal__single-image--grid img {
	width: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
.case-modal__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 28px;
	margin: 16px 0 0;
	font-size: 13px;
	color: #555;
}
.case-modal__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid #CCCCCC;
}
.case-modal__meta-item dt { margin: 0; color: #888; }
.case-modal__meta-item dd { margin: 0; color: #333; }

.case-gallery {
	max-width: 870px;
	margin: 0 auto 18px;
}
.case-gallery__main { 
	margin-bottom: 12px;
	max-width: 460px;
}
.case-gallery__main .swiper-slide img,
.case-gallery__thumbs .swiper-slide img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.case-gallery__thumbs .swiper-slide {
	margin-bottom: 10px;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
}
.case-gallery__thumbs .swiper-slide:nth-child(8) {
	margin-right: 0 !important;
}
.case-gallery__thumbs .swiper-slide-thumb-active { opacity: 1; }

.case-gallery__thumbs .swiper-wrapper {
	flex-wrap: wrap;
}

.case-modal__image-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	max-width: 520px;
	margin: 0 auto 18px;
}
.case-modal__image-grid-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.case-modal__link {
	display: inline-block;
	margin-top: 18px;
	color: #005bbb;
	text-decoration: none;
	font-size: 14px;
}
.case-modal__link:hover { text-decoration: underline; }


@media (max-width: 767px) {
	/* .case-list { grid-template-columns: 1fr; } */
	.case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.case-modal__panel { padding: 40px 18px 24px; }
	.case-modal__title { font-size: 22px; }
	.case-modal__image-grid { grid-template-columns: 1fr; max-width: 320px; }
	.case-modal__meta { flex-direction: column; align-items: center; gap: 8px; }
}


.modalSearch {
	width: 980px;
	margin: 100px auto;
	border: 1px solid #878787;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .5);
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.modalSearchInner {
	padding: 50px 40px;
}

.modalSearchList {
	width: 890px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 15px;
	margin-bottom: 30px;
}
.modalSearchList li .modalSearchList_btn {
	min-height:60px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-decoration: none;
	border: 1px solid #878787;
	border-radius: 4px;
	cursor: pointer;
}
.modalSearchList li .modalSearchList_btn:hover {
	opacity: 0.8;
}
.modalSearchList li .modalSearchList_btn.current {
	background-color: #555555;
	border: 1px solid #555555;
}
.modalSearchList_dpl {
	position: relative;
	border: 1px solid #fff;
	display: flex;
	align-items: center;
	width: 520px;
	text-decoration: none;
	margin-top: 20px;
}
.modalSearchList_dpl::before {
	content: "";
	width: 130px;
	height: 88px;
	background: url(/business/office/images/rn02/img_logo01.png) no-repeat 0 0;
	background-size: cover;
	display: block;
}
.modalSearchList_dpl span {
	position: relative;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	margin-left: 10px;
}
.modalSearchList_dpl span::after {
	content: "";
	width: 20px;
	height: 10px;
	background: url(/business/office/images/rn02/ico_arw02.svg) no-repeat 0 0;
	background-size: cover;
	display: inline-block;
	margin-left: 10px;
}
.modalSearchTitle {
	font-size: 24px;
	font-weight: 100;
	margin-bottom: 20px;
	color: #fff;
}
.modalSearchChange {
	background-color: #859DAB;
	padding: 20px;
}
.modalSearchBtn {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 20px 0;
	border-radius: 4px;
	color: #859DAB;
	background-color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}
.modalSearchBtn:hover {
	opacity: 0.8;
}