@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

body {
background: url(../images/bg.png) repeat-y;
}

section:nth-of-type(1) {
margin: 0 auto;
position: relative;
width: var(--container);
}

.swiper {
border-radius: 40px;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
height: 675px;
margin: 270px auto 0 auto;
width: 1200px;
}

.detail {
background: #f5cb36;
padding: 36px;
position: absolute;
right: 0;
bottom: 0;
border-radius: 0 0 40px 0;
}

#works .flex,
#service .flex {
margin-bottom: 3.8rem;
}

#works h4 {
display: none;
}

#works img {
width: 100%;
height: 100%;
border-radius: 6%;
}

#works ul {
display: grid;
grid-template-rows: 222px 222px;
grid-template-columns: 222px 222px 222px 222px;
gap: 24px;
margin-bottom: 3.8rem;
}

#works li:nth-of-type(1) {
grid-row: 1 / 2;
grid-column: 1 / 3;
height: 468px;
}

#works li:nth-of-type(2) {
grid-row: 1 / 2;
grid-column: 3 / 4;
}

#works li:nth-of-type(3) {
grid-row: 1 / 2;
grid-column: 4 / 4;
}

#works li:nth-of-type(4) {
grid-row: 2 / 2;
grid-column: 3 / 4;
}

#works li:nth-of-type(5) {
grid-row: 2 / 2;
grid-column: 4 / 4;
}

#about h4 {
font-size: 3.6rem;
font-weight: 700;
line-height: 6.0rem;
margin: 24px 0 60px 0;
}

#about h4 span {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 100;
}

#about p {
line-height: 3.8rem;
margin-bottom: 3.8rem;
}


#works p {
margin:0 0 60px 0;
columns: 1;
column-gap: 24px;
}

.container {
opacity: 0;
}

.container h3 + p,
.container .title {
display: inline-block;
}

.container .title {
margin-right: 12px;
}

.container h3 + p img {
margin-left: 4px;
margin-bottom: -2px;
}

#works li {
position: relative;
}

#works h4 {
display: none;
position: absolute;
background: rgba(30, 30, 30, 0.5);
height: 48px;
width: 100%;
bottom: -48px;
border-radius: 0 0 12px 12px;
font-size: 1.4rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
line-height: 1.8rem;
color: #FFF;
padding: 4px 12px;
transition: 0.3s;
}

#works li:nth-of-type(1) h4 {
bottom: -294px;
}

#works li:nth-of-type(1) h4:hover {
bottom: -246px;
}

#works img:hover + h4 {
display: block;
bottom: 0px;
}

#contact {
background: rgba(245, 203, 54, 0.7);
}

#contact .title {
display: block;
margin-bottom: 60px;
}

@media (max-width: 1400px) {

section:nth-of-type(1),
.swiper {
height: auto;
padding: 0;
margin: 0 auto 0 auto;
width: 92%;
aspect-ratio: 16 / 9;
border-radius: 40px;
}

#about p:nth-of-type(2) {
margin-bottom: 120px;
}

#service p:nth-of-type(1) {
margin-bottom: 60px;
}

#works ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
}

#works li {
gap: 12px;
width: 48%;
}

#works li:nth-of-type(1) {
height: auto;
}

#works li:nth-of-type(5) {
display: none;
}

#works h4 {
display: block;
position: absolute;
height: 100%;
width: 100%;
background: rgba(30, 30, 30, 0.2);
bottom: 0px;
border-radius: 6%;
font-size: 2.4rem;
padding: 48% 0;
text-align: center;
}

#works li:nth-of-type(1) h4 {
bottom: 0;
}

#works li:nth-of-type(1) h4:hover {
bottom: 0;
}
}

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

.swiper {
height: auto;
padding: 0;
margin: 0 auto 0 auto;
width: 92%;
aspect-ratio: 1 / 1.176;
border-radius: 40px;
}

.detail {
font-size:1.4rem;
padding: 24px;
}

#about h4 {
font-size: 2.4rem;
line-height: 4.0rem;
margin-bottom: 48px;
}

#about p {
line-height: 3.0rem;
}

#works h4 {
font-size: 1.8rem;
}

#works p {
columns: 1;
margin: 48px 0;
}

#works li {
width: 100%;
}

#works ul {
margin-bottom: 120px;
}
.container {
opacity: 1;
}

}