@charset "UTF-8";
header {
position: relative;
}


h1 {

font-size: 50px;
padding-right: 0px;
}

nav {
 position: absolute;
 top: 50px;
 font-size: 20px;
}

nav ul {
 position: absolute;
 list-style: none;
 margin-right: 200px;_
}

nav ul li:hover {
 text-decoration: underline;
}
.main-visual {
 background-image: url(宿題用画像/リビング　画像.jpg);
 background-size: cover;
 background-position: center;
 height: 280px;
 width: auto;
 margin-top: 100px;
}
h2 {
 font-size: 40px; 
 text-align: center;  
 font-weight: bold;
 padding-top: 120px
}
.Service {
 text-align: center;
 font-size: 20px;
 font-family: system-ui, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
}
.div {
 font-size: 20px;
}

ul {
 display: flex;
 gap: 100px;
 margin: 100px 100px;
 }

img {
 width: 200px;
 height: auto;
 margin-top: 30px;
}

h4 {
font-size: 40px;

}

p {
 font-size: 35px;
 text-align: left;
 font-family: 'Segoe UI', Tahoma,  Verdana, sans-serif;
}

.Works {
 text-align: center;   
 font-family: system-ui, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
}

p {
text-align: center;
}

.img-container {
  display: flex;
  gap: 100px;
  margin-left: 100px;
  overflow: hidden;
  border-radius: 8px;
}

/* 画像の基本設定 */
.img-container img {
    width: 200px;
    height: auto;
    
}
img:nth-child(3) {
 width: 265px;
 height: auto;
}


h3 {
 text-align: center;
 font-size: 55px; 
 margin-top: 150px; 
}
h4 {
text-align: center;
font-size: 30px;
padding: 30px;
}

footer {
 background-color: #eff1ef;
 color: #838282;
 font-size: 24px;
 margin-top: 150px;
 padding: 45px;
 text-align: center;
}
@media screen and (max-width: 820px){
 
h1 {
 font-size: 45px;
 margin-left: 30px;
}

nav {
 margin-top: 30px;
 margin-right: 0px;
 font-size: 20px;
 gap: 5px;
}
ul {
 margin-left: 20px;
}
.main-visual {
 background-size: cover;
 background-position: center;
 width: 820px;
 height: 500px;
 margin-right: 10px;
}

h2 {
 font-size: 40px;
 margin-right: 60px;
 font-weight: bold;
 padding-top: 240px
}
.Service {
 margin-right: 20px;
 margin-left: 20px;
}

h3 {
 font-size: 15px;
}

ul {
 margin: 20px
 display: flex;
 gap: 80px;
}
p {
 font-size: 15px;
}
.Works p {
 font-size: 10px;
 text-align: center;
}
.Works img {
 width: 120px;
 height: 120px;
}
img:nth-child(3) {
 width: 135px;
 height: 100px;
}

.img-container {
  display: flex;
  gap: 30px;
  margin-left: 70px;
  width: 600px;
  height: auto;
}
footer {
 background-color: #eff1ef;
 color: #838282;
 font-size: 10px;
 margin-top: 100px;
 padding: 20px;
 text-align: center;
}
}

@media screen and (max-width: 430px){
 header {
 position: relative;
 }
 h1 {
 position: relative;
 margin-top: 30px;
 margin-left: 30px;
 font-size: 50px;
 }
 nav {
 position: absolute;
 margin-top: 50px;
 margin-right: 200px;

}
ul {
 position:absolute;
 margin-left: 110px;
 margin-bottom: 20px;
 font-size: 20px;
 gap: 20px;
}

li.Works {
margin-top: 2px; 
margin-left: 15px; 
}
.main-visual {
 background-size: cover;
 background-position: center; 
 position: relative;
 margin-top: 150px;
 margin-left: 5px;
}

h3 {
 position: relative;
 margin-top: 30px;
 margin-left: 350px;
}
ul {
 margin-top: 0px;
 margin-left: 150px;
 gap: 80px;
}
h4 {
 font-size: 25px;
 margin-top: 0px;
}

.Works {
position: relative;
margin-top: 600px;
margin-left: 45px;
}
.Works p {
position: relative; 
margin-left: 25px;
white-space: nowrap;
font-size: 18px;
}
footer {
background-color: #eff1ef;
 color: #838282;
 font-size: 20px;
 height: 100px;
 width: 930px;
 margin-top: 100px;
 padding-top: 80px;
 padding-left: 0px;
 text-align: center;
}
}