@charset "utf-8";

/* 共通 ================================================== */
:root {
	--white: #fff;
	--main: #333333;
	--bg: #ECF1F5;

	--year-s: #C42D69;
	--year-h: #2074FE;
	--year-r: #65B822;

	--sab_year-s: #FFB2B4;
	--sab_year-h: #69DCFF;
	--sab_year-r: #a9e700;

	--fs-b: 26px;
	--fs-m: 20px;
	--fs-s: 15px;
	--fs-ss: 13px;

	--hover-t: all 0.2s ease;
}

main {
	& p,span {
		letter-spacing: 0.05rem;
	}
	& a {
		box-sizing: content-box;
		letter-spacing: 0.05rem;
		line-height: 2rem;
		display: block;
		text-decoration: none;
		& img {
			margin: auto;
			display: block;
		}
	}
}

h2 {
	background: var(--year-s);
}

h3 {
	border-bottom: 1px solid var(--year-s);
	color: var(--year-s);
	font-size: var(--fs-b);
	padding-bottom: 0.5rem;
	margin-bottom: 4rem;
}

section {
    max-width: 1580px;
	width: 92%;
    margin: auto;
}

#main_title {
	background: url(../award/title.jpg) no-repeat center top #ebf1f5;
}

/* 事業・実績紹介 ================================================== */
#work {
	display: flex;
	margin-bottom: 2rem;
	&::before, &::after {
	content: "";
	background: url(../award/work_bg.jpg) no-repeat center;
	display: block;
	width: 20px;
	height: 20px;
	}
	&::before {transform: rotate(90deg);}
}

#work a {
	background: var(--bg);
	border-radius: 0 0 20px 20px;
	color: var(--year-s);
	font-weight: bold;
	padding: .3rem 1rem;
	&:hover { opacity: .7; }
}

/* 矢印・丸 */
#work a::after {
	content: "";
	background: url(../award/arrow.svg) no-repeat right 6px center / 6px,linear-gradient(145deg, var(--sab_year-s) 6%, var(--year-s) 94%);
	border-radius: 50%;
	display: inline-block;
	margin-left: .3rem;
	height: 20px;
	width: 20px;
	transition: var(--hover-t);
	vertical-align: sub;
	z-index: 1;
}

/* 年代切り替え ================================================== */
#year {
	position: relative;
	margin-bottom: 2rem;
	& ul {
		display: flex;
		align-items: flex-end;
		gap: 2%;
		justify-content: space-between;
		margin: auto;
		max-width: 970px;
		padding-bottom: 5px;
		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 5px; /* borderの太さと同じ */
			width: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(236, 241, 245, 1) 10%, rgba(236, 241, 245, 1) 90%, rgba(255, 255, 255, 1) 100%);
			}
		& li {
			background: url(../award/award-S.jpg) no-repeat top center;
			background-size: cover !important;
			border-radius: 20px 20px 0 0;
			position: relative;
			width: 33%;
			&:hover::before {
				right: 15px;
				bottom: 14px;
				rotate: 90deg;
				}
			& a {
				color: var(--year-s);
				font-weight: bold;
				font-size: var(--fs-b);
				padding: 1.5rem;
				&:hover {
					padding: 3.3rem 1.5rem;
				}
				& span {
					font-size: var(--fs-ss);
					font-weight: bold;
					display: block;
					line-height: 1.5rem;
				}
			} 
		}
	}
}

/* 年代切り替え < 表示中／アイコン */
#year ul li {
	/* 表示中 */
	&.pu { 
		&::before {
			right: 15px;
			bottom: 14px;
			rotate: 90deg;
		}
		& a {
			padding: 3.3rem 1.5rem;
		}
	}
	/* 矢印・丸 */
	&::before {
		content: "";
		background: url(../award/arrow.svg) no-repeat right 10px center / 8px,linear-gradient(145deg, var(--sab_year-s) 6%, var(--year-s) 94%);
		border-radius: 50%;
		box-shadow: 0 0 10px var(--white);
		position: absolute;
		height: 30px;
		width: 30px;
		right: 15px;
		bottom: 15px;
		transition: var(--hover-t);
		z-index: 1;
	}
}

/* 賞状一覧 ========================================== */
#list {
	margin-bottom: 4rem;
}

/* 表彰状／感謝状切り替え ============================== */
.tab-menu {
	border: 1px solid var(--year-s);
	border-radius: 2rem;
	display: flex;
	justify-content: space-around;
	margin: 0 auto 2rem;
	max-width: 970px;
	position: relative;
	& a {
		color: var(--year-s);
		display: block;
		font-weight: bold;
		padding: 0.5rem 1rem;
		text-align: center;
		width: 100%;
		&:hover {
			opacity: 0.5;
		}
	}
	/* 中央線 */
	&::after {
		content: "";
		border-right: 1px solid var(--year-s);
		display: block;
		position: absolute;
		height: 3rem;
	}
}

.tab {
	display: none;
	}

/* 各タブの:targetを表示 */
#tab-award:target,
#tab-thanks:target {
	display: block;
	}

/* タブ1を初期表示（URLに#がない時だけ） */
.tab-contents:not(:has(:target)) #tab-award {
	display: block;
	}

/* 各表彰状／モーダル 詳細 ============================== */
.tab ul,
#modal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 1%;
	align-items: baseline;
	justify-content: space-between;
	&::after {
			content: "";
			display: block;
			width: 32%;
	}
	& li {
		position: relative;
		max-width: 500px;
		transition: var(--hover-t);
		width: 32%;
		&:hover {
		cursor: pointer;
		opacity: 0.7;
		}
		& img {
			margin: 0 auto 1rem;
		}
		/* アイコン < 年数 */
		& span {
			background: linear-gradient(145deg, var(--sab_year-s) 6%, var(--year-s) 94%);
			border-radius: 1.2rem;
			color: var(--white);
			display: inline-block;
			font-size: var(--fs-ss);
			line-height: 1rem;
			margin-bottom: 0.4rem;
			padding: 0.25rem 0.75rem;
		}
		/* アイコン < 詳細 */
		& .sab {
			background: #FBE4F4;
			color: var(--year-s);
		}
		& p {
			line-height: 1.4rem;
		}
	}
}

#modal ul {gap: 0;}

/* 縦長画像 */
.vertical {
	max-width: 354px;
	width: 71%;
}

.img {
	position: relative;
	/* switch */
	& .m-menu {
		display: none;
		& a {
			background: var(--main);
			border: 2px solid var(--white);
			border-radius: 0.4rem;
			color: var(--white);
			display: inline-block;
			font-weight: bold;
			line-height: 1rem;
			padding: 0.5rem;
			text-align: center;
			width: 1rem;
			height: 1rem;
		}
	}
	/* switch 切り替え */
	& .m-tab {
		display: none;
		&.show {
		display: block;
		}
	}
}

/* モーダル表示 */
#modal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
	z-index: 10;

	& .modal-content {
		background: var(--white);
		border-radius: 0.5rem;
		box-sizing: border-box;
		padding: 2.5rem;
		position: relative;
		max-width: 680px;
		width: 92%;

		/* 閉じるボタン */
		& .close {
			background: var(--main);
			border: 2px solid var(--white);
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			position: absolute;
			top: -20px;
			right: -20px;
			width: 50px;
			height: 50px;
			/* × */
			&::before, &::after {
				content: "";
				background: var(--white);
				position: absolute;
				width: 3px;
				height: 20px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%) rotate(45deg);
				}
				&::after {
				transform: translate(-50%,-50%) rotate(-45deg);
				}
			}

		& li {
			max-width: 100% !important;
			width: 100% !important;
			/* モーダル中は透過なし */
			&:hover {
			cursor: auto;
			opacity: 1;
			}

		/* switch モーダルのみ表示 */
		& .m-menu {
			display: block;
			position: absolute;
			right: 1rem;
			bottom: 1rem;
			& a {
				display: inline-block;
				}
			}
		}
	}
}


/* 年代別 色・画像変更 ================================================== */
#award-h h3 {border-bottom: 1px solid var(--year-h); color: var(--year-h); }
#award-r h3 {border-bottom: 1px solid var(--year-r); color: var(--year-r); }

/* 背景画像 */
#year ul li:nth-child(2) {background: url(../award/award-H.jpg) no-repeat top center; & a {color: var(--year-h);} }
#year ul li:nth-child(3) {background: url(../award/award-R.jpg) no-repeat top center; & a {color: var(--year-r);} }

/* 矢印 グラデ */
#year ul li:nth-child(2)::before { background: url(../award/arrow.svg) no-repeat right 10px center / 8px,linear-gradient(145deg, var(--sab_year-h) 6%, var(--year-h) 94%); }
#year ul li:nth-child(3)::before { background: url(../award/arrow.svg) no-repeat right 10px center / 8px,linear-gradient(145deg, var(--sab_year-r) 6%, var(--year-r) 94%); }

/* グラデ */
#award-h .tab   ul li span,
#award-h #modal ul li span {background: linear-gradient(145deg, var(--sab_year-h) 6%, var(--year-h) 94%);}

#award-r .tab   ul li span,
#award-r #modal ul li span {background: linear-gradient(145deg, var(--sab_year-r) 6%, var(--year-r) 94%);}

/* 表彰状／感謝状切り替え */
#award-h .tab-menu { border: 1px solid var(--year-h); & a { color: var(--year-h); } /* 中央線 */ &::after {border-right: 1px solid var(--year-h);} }
#award-r .tab-menu { border: 1px solid var(--year-r); & a { color: var(--year-r); } /* 中央線 */ &::after {border-right: 1px solid var(--year-r);} }

/* 各表彰状／モーダル 詳細 < アイコン < 詳細 */
#award-h .tab   ul li .sab,
#award-h #modal ul li .sab { background: #dfefff; color: var(--year-h); }
#award-r .tab   ul li .sab,
#award-r #modal ul li .sab { background: #eefac7; color: var(--year-r); }


/* ===================================================================
タブレット・スマホ
=================================================================== */
@media screen and (max-width: 990px){
#main_title {background-position: center top;}

	/* ========== 各表彰状／モーダル 詳細 ========== */
	.tab ul,
	#modal ul {
		& li {
			width: 48%;
		}
	}

	/* モーダル表示 */
	#modal {
		& .modal-content {
			padding: 4%;
			/* 閉じるボタン */
			& .close {
				top: -15px;
				right: -15px;
				width: 30px;
				height: 30px;
				/* × */
				&::before, &::after {
					height: 15px;
				}
			}
			& li {
				/* switch モーダルのみ表示 */
				& .m-menu {
					right: 0.5rem;
					bottom: 0.5rem;
					}
				}
			}
		}
	}

/* ===================================================================
スマホ
=================================================================== */
@media screen and (max-width: 570px){

	/* 事業・実績紹介 ================================================== */
	#work {margin-left: 0;}
	#work a {font-size: var(--fs-ss);}
	/* 矢印・丸 */
	#work a::after {
		background: url(../award/arrow.svg) no-repeat right 5px center / 4px,linear-gradient(145deg, var(--sab_year-s) 6%, var(--year-s) 94%);
		height: 15px;
		width: 15px;
	}

	/* ========== 年代切り替え ========== */
	#year {
		& ul {
			& li {
				border-radius: 10px 10px 0 0;
				/* 矢印 */
				&::before {
					content: "";
					background: url(../award/arrow.svg) no-repeat right 6px center / 6px,linear-gradient(145deg, var(--sab_year-s) 6%, var(--year-s) 94%);
					right: 6px;
					bottom: 10px;
				}
				&:hover::before {
					right: 5px;
					bottom: 5px;
					rotate: 90deg;
					}
				& a {
					font-size: var(--fs-m);
					padding: 0.7rem 1.5rem;
					& span {
						display: none;
					}
					&:hover {
					padding: 1.5rem;
					}
				} 
			}
		}
	}
	/* 年代切り替え < 表示中／アイコン */
	#year ul li {
		/* 表示中 */
		&.pu { 
			& a {
				padding: 1.5rem;
			}
		}
		& .img {
			/* switch */
			& .m-menu {
				& a {
					padding: 0.25rem;
				}
			}
		}
		/* 共通 */
		&::before, &::after {
			height: 20px;
			width: 20px;
			right: 5px !important;
			bottom: 5px !important;
		}
	}


	/* 矢印 グラデ */
	#year ul li:nth-child(2)::before { background: url(../award/arrow.svg) no-repeat right 6px center / 6px,linear-gradient(145deg, var(--sab_year-h) 6%, var(--year-h) 94%); }
	#year ul li:nth-child(3)::before { background: url(../award/arrow.svg) no-repeat right 6px center / 6px,linear-gradient(145deg, var(--sab_year-r) 6%, var(--year-r) 94%); }


}