@charset "UTF-8";

.path-box{display:flex;justify-content:space-between;align-items:center;padding:3.7rem 0;border-bottom:4px solid var(--color07);}
.path-box .path{display:flex;align-items:center;}
.path-box .path-home{flex-shrink:0;position:relative;padding:0 3rem 0 0;font-size:1.4rem;line-height:1.9rem;letter-spacing:1.2px;color:var(--color01);font-weight:var(--font-weight-medium);}
.path-box .path-home:after{content:'';display:block;position:absolute;top:50%;right:0;width:1.7rem;height:1.5rem;background:url(../img/common/ico-home%402x.png) no-repeat center center / 100%;transform:translateY(-50%);}
.path-depth-wrap{padding:0 0 0 4.4rem;}
.path-depth-wrap > ul{display:flex;flex-wrap:wrap;gap:2rem 0;}
.path-depth-wrap > ul > li{position:relative;padding:0 2.8rem 0 0;}
.path-depth-wrap .path-selected{display:block;position:relative;padding:0 2.8rem 0 0;font-size:1.6rem;line-height:2.1rem;font-weight:var(--font-weight-semibold);letter-spacing:-0.5px;color:var(--black03);transition:all .3s;}
.path-depth-wrap .path-selected:after{content:'';display:inline-block;position:absolute;top:50%;right:1rem;width:1rem;height:6px;background:url(../../_share/img/sj-common/ico-path-arrow%402x.png) no-repeat center center / 100%;transform:translateY(-50%);transition:transform .3s;}
.path-depth-wrap .path-selected span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;text-overflow:ellipsis;overflow:hidden;}
.path-depth-wrap .active .path-selected{padding:0 3.7rem 0 0;font-weight:var(--font-weight-bold);color:var(--color01);}
.path-depth-wrap .active .path-selected:before{content:'';display:block;position:absolute;top:50%;right:0;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--color01);transform:translateY(-50%);}
.path-depth-wrap .active .path-selected:after{top:50%;background:url(../../_share/img/sj-common/ico-path-arrow-w%402x.png) no-repeat center center / 100%;transform:translateY(-50%) rotate(180deg);}
.path-depth-wrap .path-depth{display:none;position:absolute;top:calc(100% + 2.5rem);left:0;z-index:20;padding:2.8rem 3.4rem;width:18rem;border:1px solid #c8c8c8;border-radius:6px;background:#fff;}
.path-depth-wrap .path-depth li{padding:0 0 1.5rem;}
.path-depth-wrap .path-depth li:last-of-type{padding:0;}
.path-depth-wrap .path-depth li a{display:inline-block;position:relative;font-size:1.6rem;line-height:2.1rem;letter-spacing:-0.5px;font-weight:var(--font-weight-medium);word-break:keep-all;color:var(--black05);}
.path-depth-wrap .path-depth li a:is(:hover, .active){color:var(--color01);}
.path-depth-wrap .path-depth li a span{display:inline-block;position:relative;word-break:break-word;}
.path-depth-wrap .path-depth li a:is(.active, :hover) span{text-decoration:underline;text-underline-offset:3px;}
.path-depth-wrap .path-depth li a.disabled{color:var(--color31);pointer-events:none;}
.path-depth-wrap .path-depth li a.active:before{content:'';display:block;position:absolute;top:9px;left:-1rem;width:4px;height:4px;border-radius:50%;background:var(--color01);}
.path-depth-wrap .path-depth li a:is(:hover, .active) span{background-size:100% 100%;}

.share-box ul{display:flex;gap:1rem 2.8rem;}
.share-box ul li a{display:block;width:2.5rem;height:2.4rem;background:url(../../_share/img/sj-common/ico-share%402x.png) no-repeat center center / 100%;}
.share-box ul li.print a{background-image:url(../../_share/img/sj-common/ico-print%402x.png);}

@media screen and (max-width:1024.98px) {
	.path-box{display:block;padding:0;border-width:3px;}
	.path-box .path{display:block;}
	.path-box .path-home{display:none;}
	.path-depth-wrap{padding:0;}
	.path-depth-wrap > ul{flex-wrap:nowrap;gap:0;}
	.path-depth-wrap > ul > li{display:none;padding:0;width:100%;}
	.path-depth-wrap > ul > li:nth-last-child(-n+3){display:block;}
	.path-depth-wrap > ul > li:after{content:'';display:block;position:absolute;top:0;right:0;width:1px;height:100%;background:var(--color08);opacity:0.16;}
	.path-depth-wrap > ul > li:last-of-type:after{display:none;}
	.path-depth-wrap .path-selected{display:flex;align-items:center;padding:2rem 2.5rem 2rem 1rem;height:100%;font-size:1.3rem;line-height:2rem;box-sizing:border-box;}
	.path-depth-wrap .active .path-selected{padding:0 2.8rem 0 1rem;}
	.path-depth-wrap .active .path-selected:before{right:5px;width:2rem;height:2rem;}
	.path-depth-wrap .path-depth{top:calc(100% + 3px);padding:2rem 1rem;width:100%;border-radius:0;box-sizing:border-box;}
	.path-depth-wrap .path-depth li{padding:0 0 1rem;}
	.path-depth-wrap .path-depth li a{font-size:1.3rem;line-height:2rem;}
	.path-depth-wrap .path-depth li a.active:before{display:none;}

	.share-box{display:none;}
}