@charset "utf-8";

/*-------------------------------
	Keyvisual
-------------------------------*/

.Keyvisual{
	padding-top: 9rem;
	padding-bottom: 0;
}
.Keyvisual__content{
	width: 100%;
	padding-bottom: 0;
	padding-right: 0;
}
.Keyvisual__title {
	width: 100%;
	display: block;
	text-align: center;
	position: static;
}

.Keyvisual__title-en,
.Keyvisual__title-jp {
	writing-mode:horizontal-tb;
}

.Keyvisual__title-en {
	padding-top:0;
	padding-left:0;
	margin-right:0;
	margin-bottom:1em;
	color: #B0BAC4;
}

.Keyvisual__title-en::before {
	display: none;
}

.Keyvisual__title-jp {
	line-height:1.5;
}

/*-------------------------------
	Worries
-------------------------------*/

.Worries{
	padding-top: 9.2rem;
}
.Worries_title {
	margin-bottom:3rem;
	border-bottom:.1rem solid var(--maincolor);
}

.Worries_title h3,
.Worries_title h3 span {
	font-size:2rem;
	font-weight:700;
	color:#fff;
	line-height:1.75;
	text-align: center;
}

.Worries_title h3 {
	background:var(--maincolor);
	border-radius:1rem 1rem 0 0;
	min-width:29.6rem;
	padding:0.2em 0.5em;
}

.Worries_title time {
	font-size:2rem;
	font-weight:500;
	color:var(--maincolor);
	letter-spacing: 0.06em;
	margin-left:3.6rem;
}

.Worries_wrap {
	max-width:99rem;
	margin:0 auto;
	align-items: flex-start;
}

.Worries-subcategory{
	width: 100%;
	margin-bottom: 3rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Worries-subcategory__item{
	border: 1px solid var(--maincolor);
	margin: 0 1rem 1rem 0;
	line-height: 1.25;
	border-radius: 2rem;
	display: inline-block;
}
.Worries-subcategory__item span,
.Worries-subcategory__item span::before{
	color: var(--maincolor);
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.25;
	font-weight: 500;
    position: relative;
}
.Worries-subcategory__item span{
    padding: 0.32em 0.47em;
}
.Worries-subcategory__item span::before{
	content: "#";
    padding-right: 0.25em;
}

.owner {
	width:19rem;
}

.owner_img {
	width:19rem;
	height:19rem;
	border-radius: 50%;
}

.owner_img img {
	width:100%;
	height:100%;
	object-fit: contain;
}

.owner h4 {
	width:100%;
	height:3.1rem;
	line-height:3.1rem;
	font-size:1.6rem;
	font-weight:700;
	text-align: center;
	background:var(--maincolor);
	border-radius:1.6rem;
	color:#fff;
	margin-top:-2.2rem;
	position: relative;
}

.owner_comment {
	width:calc(100% - 28.5rem);
	margin-left:9.5rem;
	background:#ECF2F7;
	border-radius: 2rem;
	padding:4rem 6rem;
	position:relative;
}

.owner_comment::before {
	content:"";
	display: block;
	width:4.7rem;
	height:4.7rem;
	background:url(../images/case_study/icon_triangle_comment.svg) no-repeat center / contain;
	position:absolute;
	left:-4.1rem;
	top:10rem;
}

.owner_comment p {
	font-size:2.2rem;
	font-weight:700;
	line-height:1.8;
}

/*-------------------------------
	Detail
-------------------------------*/

.Detail {
	background:#ECF2F7;
	border-top-right-radius:3rem;
}

.Detail_txt dl {
	display: flex;
	flex-wrap:wrap;
}

.Detail_txt dt,
.Detail_txt dd {
	padding:2.75rem 0;
	border-top:.1rem solid var(--maincolor);
}

.Detail_txt dt {
	width:8rem;
}

.Detail_title {
	width:8rem;
	height:8rem;
	line-height:8rem;
	border-radius: 50%;
	text-align: center;
	background:var(--maincolor);
	font-size:2.4rem;
	font-weight:700;
	color:#fff;
}

.Detail_txt dd {
	width:calc(100% - 8rem);
	padding-left:2.2rem;
}

.Detail_txt dd.flex {
	align-items: center;
}

.Detail_txt dd p,
.Detail_txt dd .list-circle li,
.Detail_txt dd .list-circle li::before {
	font-size:2.4rem;
	font-weight:700;
	line-height:1.65;
}

.Detail_txt dd .list-circle li {
	margin:0;
	padding-left:1.5em;
}

.Detail_txt dd .list-no li {
	margin:0;
	font-size:1.8rem;
	line-height:1.65;
	font-weight:500;
}

.Detail_txt01 {
	width:51%;
}

.Detail_txt02 {
	width:100%;
}

.Detail_txt02 dt:last-of-type,
.Detail_txt02 dd:last-of-type {
	padding-bottom:5rem;
	border-bottom:.1rem solid var(--maincolor);
}

.Detail_bottom {
	margin-top:7rem;
	padding:4rem 6rem;
	border:.1rem solid #343638;
}

.Detail_bottom p,
.Detail_bottom p span {
	font-size:1.4rem;
	line-height:1.7;
	font-weight:500;
}

.Detail_bottom p:not(:last-of-type) {
	margin-bottom:2em;
}

.Detail_bottom p span {
	padding-right:0.5em;
	display: inline-block;
}

.Detail .C-Button {
	max-width:51rem;
	margin:12rem auto 0;
}

.Detail .C-Button a {
	height:8rem;
	line-height:8rem;
	border-radius: 4rem;
	font-size:2rem;
}

.Detail .C-Button a::before {
	content:"";
	display: block;
	width:2.5rem;
	height:2.8rem;
	background:url(../images/common/icon_req-black.svg) no-repeat center / contain;
	position:absolute;
	left:5.5rem;
	top:50%;
	transform:translateY(-50%);
}
.Detail .C-Button a:hover::before{
	background:url(../images/common/icon_req-white.svg) no-repeat center / contain;
}

/*-------------------------------
	Detail slider
-------------------------------*/

.Detail_slider_wrap {
	width:45%;
	max-width:47.5rem;
}

.Detail_slider .swiper-slide .slide-media {
	width:100%;
	height:clamp(20rem,27.5vw,33rem);
	border-bottom-left-radius:3rem;
	overflow: hidden;
}

.Detail_slider .swiper-slide .slide-media img,
.thumb-media img {
	width:100%;
	height:100%;
	object-fit: cover;
}

.slide-title {
	font-size:1.8rem;
	font-weight:500;
	text-align: right;
	display: block;
}

.thumb-wrapper {
	width:100%;
	margin:1rem 0 3.5rem;
}

.thumb-media {
	width:100%;
	max-width:11rem;
	padding-top:100%;
	position:relative;
	transition:var(--transition);
}

.thumb-media:not(.thumb-media-active) {
	cursor:pointer;
}

.thumb-media:not(.thumb-media-active):hover {
	opacity:var(--opacity);
}

.thumb-media-active::after {
	content:"";
	display: block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	border:.4rem solid var(--maincolor);
}

.thumb-media img {
	position:absolute;
	top:0;
	left:0;
}

.thumb-wrapper {
	display: grid;
	grid-template-columns:repeat(4,1fr);
	gap:1.16677rem;
}

/*-------------------------------
	responsive
-------------------------------*/

@media screen and (max-width:960px){

.Keyvisual{
	padding-top: 0;
}

.owner_comment {
	padding:3rem 3rem;
}

.Detail_txt01 {
	width:100%;
}

.Detail_slider_wrap {
	width:100%;
	max-width:100%;
	order:-1;
}

.Detail_slider .swiper-slide .slide-media {
	width:100%;
	height:clamp(33rem,62.1vw,59.6rem);
}

.thumb-wrapper {
	display: grid;
	grid-template-columns:repeat(6,1fr);
	gap:1.6rem;
}

.thumb-media {
	max-width:100%;
}


} /* end 960px */

/*-------------------------------
	ver sp
-------------------------------*/

@media screen and (max-width:768px){

/*-------------------------------
	Keyvisual
-------------------------------*/

.Keyvisual__content {
	padding-top:14rem;
}

/*-------------------------------
	Worries
-------------------------------*/

.Worries_title {
	margin-bottom:1.5rem;
	border-bottom:none;
}

.Worries_title h3,
.Worries_title h3 span {
	font-size:3rem;
}

.Worries_title h3 {
	min-width:auto;
	width:100%;
}

.Worries_title time {
	font-size:2.8rem;
	margin-left:auto;
	text-align: right;
}

.Worries_wrap {
	max-width:100%;
}

.Worries-subcategory__item span,
.Worries-subcategory__item span::before{
	font-size: 2rem;
}
.Worries-subcategory__item span{
	display: block;
}

.owner {
	width:28.5rem;
}

.owner_img {
	width:28.5rem;
	height:28.5rem;
}

.owner h4 {
	height:4.6rem;
	line-height:4.6rem;
	font-size:2.4rem;
	border-radius:2.3rem;
	margin-top:-3.3rem;
}

.owner_comment {
	width:100%;
	margin-left:0;
	margin-top:10rem;
	padding:4rem 6rem;
}

.owner_comment::before {
	width:7rem;
	height:7rem;
	left:15rem;
	top:-6rem;
	transform:scale(-1,1);
}

.owner_comment p {
	font-size:2.8rem;
}

/*-------------------------------
	Detail
-------------------------------*/

.Detail_txt dt,
.Detail_txt dd {
	padding:4rem 0;
	border-width:.2rem;
}

.Detail_txt dt {
	width:12rem;
}

.Detail_title {
	width:12rem;
	height:12rem;
	line-height:12rem;
	font-size:3.6rem;
}

.Detail_txt dd {
	width:calc(100% - 12rem);
	padding-left:3rem;
}

.Detail_txt dd p,
.Detail_txt dd .list-circle li,
.Detail_txt dd .list-circle li::before {
	font-size:3rem;
}

.Detail_txt dd .list-no li {
	font-size:2.4rem;
}

.Detail_txt01 {
	width:100%;
}

.Detail_txt02 dt:last-of-type,
.Detail_txt02 dd:last-of-type {
	padding-bottom:6rem;
	border-width:.2rem;
}

.Detail_bottom {
	margin-top:9rem;
	padding:4rem 6rem;
	border-width:.2rem;
}

.Detail_bottom p,
.Detail_bottom p span {
	font-size:2.4rem;
}

.Detail .C-Button {
	max-width:100%;
	margin:10rem auto 0;
}

.Detail .C-Button a {
	height:9.8rem;
	line-height:9.8rem;
	border-radius: 5rem;
	font-size:3rem;
}

.Detail .C-Button a::before {
	width:3.75rem;
	height:4.2rem;
	left:4rem;
}

.Detail .C-Button a::after {
	right:4rem;
}

/*-------------------------------
	Detail slider
-------------------------------*/

.Detail_slider_wrap {
	width:100%;
	max-width:100%;
	order:-1;
}

.Detail_slider .swiper-slide .slide-media {
	width:100%;
	height:43.7rem;
}

.slide-title {
	font-size:2.8rem;
}

.thumb-wrapper {
	width:100%;
	margin:2rem 0 5rem;
}

.thumb-media {
	width:100%;
	max-width:100%;
}

.thumb-media-active::after {
	border:.6rem solid var(--maincolor);
}

.thumb-wrapper {
	grid-template-columns:repeat(4,1fr);
	gap:1rem;
}

} /* end 768px */