@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #fff;
}
.noto-sans-jp-main {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*==================================
　全体
==================================*/
.container{
	display: grid;
	gap: 20px;
	max-width: 800px;
	width: 90%;
	margin: 50px auto;
	grid-template-columns: repeat(4, minmax(0,1fr));
	grid-template-areas: 
		"i1 i2 i3 i4"
		"tt tt tt i5"
		"i9 i8 i7 i6";
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
	overflow-x: hidden;
	width: min(90%, 800px);
	align-items: stretch;
	container-type: inline-size;
	grid-auto-rows: 1fr;
	aspect-ratio: 4 / 3;
	
}

.title-area{ grid-area: tt; }
.item1{ grid-area: i1; }
.item2{ grid-area: i2; }
.item3{ grid-area: i3; }
.item4{ grid-area: i4; }
.item5{ grid-area: i5; }
.item6{ grid-area: i6; }
.item7{ grid-area: i7; }
.item8{ grid-area: i8; }
.item9{ grid-area: i9; }

.item2:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test2.png"); }
.item3:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test3.png"); }
.item1:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test1.png"); }
.item4:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test4.png"); }
.item5:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test5.png"); }
.item6:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test6.png"); }
.item7:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test7.png"); }
.item8:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test8.png"); }
.item9:hover { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(0, 0, 0, 0.5)), url("../images/test9.png"); }

.item1:hover,
.item2:hover,
.item3:hover,
.item4:hover,
.item5:hover,
.item6:hover,
.item7:hover,
.item8:hover,
.item9:hover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(61, 61, 61, 0.8);
}

.work-box {
	aspect-ratio: 1/1;
    width: 100%;
    background-color: rgb(128, 128, 128, 0.8);
    color: #fff;  
	font-size: 20cqw;
	font-weight: 900;
	text-decoration: none;
	border-radius: 2%;
	display: flex;
	align-items: center;  
	justify-content: flex-start;

	overflow: hidden;
	padding: 10px;
	transition: transform 0.5s ease, opacity 0.6s ease;

}

.work-box .inner {
	transform: translateX(-120%);
	opacity: 0;
 	transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease;
	background: transparent;
}
.work-box:hover .inner {
	transform: translateX(0);
	opacity: 1;
	background: transparent;
}
.work-box .num {
	transform: translateX(-30%);
	display: block;
	font-size: 16cqw;
	line-height: 1;
	margin-bottom: 5px;
	background: transparent;
}

.work-box .text {
	display: block;
	font-size: 18px;
	background: transparent;
}

.title-area { 
	grid-area: tt;
	width: 100%;
	height: 100%;
    background-color: lavenderblush; 
    display: flex;
    justify-content: center;
	align-items: center;
	padding: 0px;
	align-self: stretch;
	border-radius: 2%;
}
.title {
	color: coral;
	background-color: lavenderblush; 
	font-size: clamp(36px,6vw,60px);
	line-height: 1;
	text-align: center;
	display: block;
	width: 100%;
	text-shadow: 2px 2px 5px  rgba(58, 58, 58, 0.3);
}

/*==================================
　タブレット版
==================================*/
@media(max-width:768px){
	.container{
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: 
			"tt tt tt"
			"i1 i2 i3"
			"i4 i5 i6"
			"i7 i8 i9";
		aspect-ratio: auto;
		gap: 15px;
	}
	.title{
    	font-size: clamp(28px, 7vw, 60px);
	}
	.work-box .num {
		transform: translateX(-20%);
		font-size: 20cqw;
	}
	.work-box .text {
		font-size: 4cqw;
		line-height: 1;
	}
}

/*==================================
　スマホ版
==================================*/
@media (max-width:480px){
	.container{
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			"tt tt"
			"i1 i2"
			"i3 i4"
			"i5 i6"
			"i7 i8"
			"i9 ."
			;
		aspect-ratio: auto;
		gap: 12px;
	}
	
	.title-area{
		grid-area: tt;

		display: flex;
    	justify-content: center;
    	align-items: center;
		
		width: 100%;
    	height: 100%;
	}
	.title{
		font-size: 30px;
    	line-height: 1.2;
		letter-spacing: 0.1em;
	}
	.work-box .num {
		transform: translateX(-20%);
		font-size: 30cqw;
	}
	.work-box .text {
		font-size: 5cqw;
		line-height: 1;
	}
}