#mainbody #title {
background-color: #6D1338;
}
#mainbody #title dl:after {
background-image: url("image/mainimage2.jpg");
}
@media screen and (min-width: 641px),print {
#page {
padding: 100px 0 0 0;
}
/***** subnavi *******************/
ul.subnavi {
max-width: 1200px;
width: 100%;
margin: 40px auto 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease-out;
}
/*タブのスタイル*/
ul.subnavi li {
max-width: 380px;
width: 33%;
}
ul.subnavi li a {
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.5em;
font-size: clamp(0.813rem, 0.608rem + 1.02vw, 1.375rem);
background-color: #632D60;
color: #FFF;
display: block;
text-align: center;
position: relative;
box-sizing: border-box;
padding: 0.4em 0 0.4em 0em;
border-radius: 100vh;
text-decoration: none;
}

#list ul.list {
width: 90%;
margin: 40px auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#list ul.list:after {
display: block;
content:"";
width: 33%;
}
#list ul.list li {
display: block;
line-height: 0;
width: 33%;
margin-bottom: 1.5%;
}
#list ul.list li a {
text-decoration: none;
display: block;
width: 100%;
overflow: hidden;
}
#list ul.list li a:hover img{
transform: scale(1.05);
}
#list .image {
position: relative;
width: 100%;
text-align: center;
display: block;
overflow: hidden;
}
#list .image img {
height: 18vw;
max-height: 18vw;
min-height: 18vw;
aspect-ratio: 4 / 3;
object-fit: cover; /* 画像を枠いっぱいにフィット */
transition: transform 0.4s ease-in-out;
}
#list p {
color: #000;
font-family: shippori-mincho, sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);
line-height: 1.5em;
padding: 0.5em 0 0 0;
}

#project_list {
text-align: left;
max-width: 1200px;
width: 100%;
margin: 40px auto 100px;
}
#project_list h5 {
font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
line-height: 1.8em;
font-weight: 700;
padding: 0 0 0.3em 0;
}
#project_list dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
line-height: 1.8em;
border-bottom: 1px solid #D9D9D9;
margin: 0px auto 40px auto;
}
#project_list dt {
width: 10%;
border: 1px solid #D9D9D9;
box-sizing: border-box;
text-align: center;
padding: 0.7em;
background-color: #F7F7F7;
border-bottom: none;
}
#project_list dd {
width: 90%;
border: 1px solid #D9D9D9;
box-sizing: border-box;
border-left: none;
border-bottom: none;
padding: 0.7em;
}
#project_list dd ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#project_list dd ul li:nth-child(1) {
width: 8em;
}
#project_list dd ul li:nth-child(2) {
width: 15em;
}
#project_list dd ul li:nth-child(3) {
width: 4em;
}
}

@media screen and (min-width: 0px) and (max-width: 640px) {
#page {
padding: 0px 0 0 0;
}
/***** subnavi *******************/
ul.subnavi {
width: 90%;
margin: 20px auto 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease-out;
}
/*タブのスタイル*/
ul.subnavi li {
width: 100%;
margin-bottom: 10px;
}
ul.subnavi li a {
font-family: shippori-mincho, sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.5em;
font-size: 16px;
background-color: #632D60;
color: #FFF;
display: block;
text-align: center;
position: relative;
box-sizing: border-box;
padding: 0.6em 0 0.6em 0em;
border-radius: 100vh;
text-decoration: none;
}


#list ul.list {
width: 90%;
margin: 40px auto 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#list ul.list:after {
display: block;
content:"";
width: 48%;
}
#list ul.list li {
display: block;
width: 48%;
margin-bottom: 20px;
}
#list .image {
position: relative;
width: 100%;
}
#list .image img {
height: auto;
width: 100%;
}
#list ul.list li p {
width: 100%;
color: #000;
font-family: shippori-mincho, sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem);
line-height: 1.3em;
}

#project_list {
text-align: left;
width: 90%;
margin: 20px auto 50px;
}
#project_list h5 {
font-size: 18px;
line-height: 1.2em;
font-weight: 700;
padding: 0 0 0.3em 0;
}
#project_list dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
font-size: 16px;
line-height: 1.2em;
border-bottom: 1px solid #D9D9D9;
margin: 0px auto 40px auto;
}
#project_list dt {
width: 25%;
border: 1px solid #D9D9D9;
box-sizing: border-box;
text-align: center;
padding: 0.5em;
background-color: #F7F7F7;
border-bottom: none;
}
#project_list dd {
width: 75%;
border: 1px solid #D9D9D9;
box-sizing: border-box;
border-left: none;
border-bottom: none;
padding: 0.5em;
}
#project_list dd ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#project_list dd ul li {
display: block;
width: 100%;
}

}