@charset "UTF-8";

:root {
	--pc-headerTop-H: 4.6rem;
}

@media screen and (max-width:1200px) {
	:root {
		--pc-headerTop-H: 3.8rem;
	}
}

.header-top {position:relative;}
.scr .header-top {background:#fff;}
.header-top:before {content:"";display:block;background:#D1D9E2;width:calc(100% - 20rem - (100% - 148rem)/2);height:100%;position:absolute;top:0;left:0;}
.header-top .inwrap {display:flex;align-items:flex-end;justify-content:flex-end;height:var(--pc-headerTop-H);position:relative;z-index:1;}
.header-top .box {min-width:20rem;margin-right:-15px;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;height:100%;border-radius:15px 0 0 0;color:#fff;padding:0 3rem;padding-right:35px;box-shadow:-5px -3px 10px rgba(0, 0, 0, 0.1);text-align:center;font-size:1.6rem;}
.header-top .box * {color:#fff;}
.header-top .box .txt {display:flex;align-items:center;gap:0.8rem;}
.header-top .box .txt:after {content:"";display:block;width:6px;height:10px;background:url(../img/Layout/header-top_arrow.svg) no-repeat center center /100% 100%;filter:brightness(0) invert(1)}
.header-top .box.handicap,
.header-top .box.handicap * {color:var(--black);}
.header-top .box.handicap .txt:after {filter:none;}
.header-top .box.handicap {box-shadow:none;}
.header-top .box.young {background:#0086cd;}
.header-top .box.senior {background:#e4007f;}
.header-top .box.bjob {background:#601986}
.header-top .box.now {background:#fff;margin-right:0;position:relative;padding-right:3rem;box-shadow:-8px -5px 8px rgba(0, 0, 0, 0.1);}
.header-top .box.now.young {background: linear-gradient(90deg,#0eadcf 0%, #1da7cf 100%);}
.header-top .box.now .txt {font-weight:600;}
.header-top .box.now:before {content:"";display:block;width:1.6rem;height:1.5rem;background:url(../img/Layout/header-top_round.svg) no-repeat center center /100% 100%;position:absolute;bottom:0;left:-1.6rem;}
.header-top .box.now.young:before {background-image:url(../img/Layout/header-top_round_young.svg)}
.header-top .box.now .txt:after {display:none;}
.header-top .box.bjob {order:2;}
.header-top .box.young {order:2;}
.header-top .box.senior {order:3;}
.header-top .box.handicap {order:1;}
.header-top .box.now {order:4;}
.header-top .box.bjob.now .txt {color:#601986;}
.header-top .box.senior.now .txt {color:#e4007f;}

.open .header-top {background:#fff;}
.scr .header-top .box.now.young,
.open .header-top .box.now.young {background:#fff;}
.scr .header-top .box.now.young:before,
.open .header-top .box.now.young:before {background-image:url(../img/Layout/header-top_round.svg)}
.scr .header-top .box.now.young:after,
.open .header-top .box.now.young:after {filter:brightness(0) invert(1);}
.scr .header-top .box.now.young .txt,
.open .header-top .box.now.young .txt {color:#0086cd;}

.header-top .box.bjob.no-h {display:none;}
body:has(.no-header) .header-top {background: #D1D9E2;}
body:has(.no-header) .header-top .box.bjob {display:none;background:#601986;order:2;margin-right: -15px;}
body:has(.no-header) .header-top .box.bjob:before {display:none;}
body:has(.no-header) .header-top .box.bjob .txt {color:#fff;font-weight:400;}
body:has(.no-header) .header-top .box.bjob .txt:after {display:block;}
body:has(.no-header) .header-top .box.bjob.no-h {display:flex;}
body:has(.no-header) .header-top .box.senior {border-radius:15px 15px 0 0;}
body:has(.no-header) .header-top .box:nth-last-child(3) {z-index:1;}
body:has(.no-header) .header-top .box:nth-last-child(2) {z-index:2;}

@media screen and (max-width:1200px) {
	
	.header-top .inwrap {padding: 0;}
	.header-top .box {width:auto;flex:1;min-width:0;position:relative;border-radius:0 10px 0 0;margin-right:0;margin-left:-10px;padding:0;}
	.header-top .box .txt,
	.header-top .box .txt * {font-size: 1.3rem;}
	.header-top .box .txt:after {display:none;}
	.header-top .box.now {z-index:2;padding-right:0;}
	.header-top .box:first-child {margin-left:0;}
	.header-top .box.bjob {order:1;}
	.header-top .box.young {order:2;z-index:1;padding-left:10px;}
	.header-top .box.senior {order:3;border-radius:0;padding-left:10px;}
	.header-top .box.handicap {display:none;}
	
	.header-top .box.now.bjob:before {left:auto;right:-1.5rem;transform:rotate(90deg);}
	
	.header-top .box.now.young {border-radius:10px 10px 0 0;padding-right:0;padding-left:0;background: linear-gradient(90deg,#127cc2 0%, #0c8dc6 100%);}
	.header-top .box.now.young:after {content:"";display:block;width:1.6rem;height:1.5rem;background:url(../img/Layout/header-top_round_young_ml.svg) no-repeat center center /100% 100%;position:absolute;bottom:0;left:-1.6rem;}
	.header-top .box.now.young:before {left:auto;right:-1.5rem;transform:rotate(90deg);background-image:url(../img/Layout/header-top_round_young_mr.svg);}
	
	.header-top .box.now.senior {padding-right:0;padding-left:0;border-radius:10px 0 0 0;}
	.header-top:has(.box.now.senior) .box.bjob {border-radius:0;}
	.header-top:has(.box.now.senior) .box.young {border-radius:10px 0 0 0;}
	
	body:has(.no-header) .header-top .box.bjob {padding-right:0;border-radius:0 10px 0 0;}
	body:has(.no-header) .header-top .box.bjob .txt:after {display:none;}
	
	body:has(.no-header) .header-top {background:#fff;}
	body:has(.no-header) .header-top:before {display:none;}
	body:has(.no-header) .header-top .box.senior {border-radius:0 10px 0 0;}
	body:has(.no-header) .header-top .box:nth-last-child(3) {z-index:1;}
	body:has(.no-header) .header-top .box:nth-last-child(2) {z-index:0;}
}