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

#aboutGreeting{
position: relative;
padding: 10% 0 0;
max-width: 2000px;
margin: 0 auto;
z-index: 1;
}
#aboutGreeting .txt{
position: relative;
padding: 0 42% 0 28%;
z-index: 2;
}
#aboutGreeting .txt h2{
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.15em;
}
#aboutGreeting .txt p{
font-size: 0.875rem;
line-height: 2.85;
margin-top: 3em;
letter-spacing: 0.1em;
}
#aboutGreeting .txt p.signature{
text-align: right;
}
#aboutGreeting figure{
position: relative;
overflow: hidden;
}
#aboutGreeting figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#aboutArchitect{
position: absolute;
top: -10vw;
right: 0;
padding: 0 4% 0 0;
width: 29%;
max-width: calc(400px + 4%);
z-index: 1;
}
#aboutArchitect figure{
width: 100%;
padding-top: 143%;
margin: 0 0 0 auto;
}
#aboutGreetingFigure{
position: absolute;
top: min(calc((25vw * 1.43) - 10vw + 130px), calc((400px * 1.43) - 10vw + 130px));
right: 0;
padding: 0 16% 0 3%;
width: 100%;
z-index: 1;
}
#aboutGreetingFigure figure:first-child{
width: 17.5%;
padding-top: 24%;
margin: 0 0 0 auto;
}
#aboutGreetingFigure figure+figure{
width: 17.5%;
padding-top: 24%;
margin: -11vw auto 0 0;
}



@media screen and (max-width: 999px){
#aboutGreeting{
padding: 15% 0 0;
}
#aboutGreeting .txt{
padding: 0 20px;
}
#aboutArchitect{
position: relative;
top: auto;
right: auto;
padding: 0 0 0 28%;
margin: 30px 0 0 auto;
width: auto;
max-width: calc(350px + 28%);
}
#aboutGreetingFigure{
position: relative;
top: auto;
right: auto;
padding: 0 9% 0 0;
width: auto;
margin: 30px 0 0;
}
#aboutGreetingFigure figure:first-child{
width: 45%;
padding-top: 56%;
margin: 0 0 0 auto;
}
#aboutGreetingFigure figure+figure{
width: 45%;
padding-top: 56%;
margin: -36vw auto 0 0;
}
}/*999*/





#aboutHistory{
position: relative;
padding: 8% 0 0;
}
#aboutHistoryDetail{
position: relative;
padding: 0 29% 0 0;
max-width: 72%;
margin: 0 0 0 auto;
z-index: 2;
}
#aboutHistory h2{
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.15em;
}
#aboutHistory dl{
display: flex;
flex-wrap: wrap;
font-size: 0.875rem;
letter-spacing: 0.1em;
margin-top: 1em;
}
#aboutHistory dl dt{
width: 10em;
padding: 1em 0;
}
#aboutHistory dl dd{
width: calc(100% - 10em);
padding: 1em 0;
}
#aboutHistoryFigure{
position: absolute;
bottom: 5vw;
right: 0;
padding: 0 4% 0 0;
width: calc(29% - 50px);
z-index: 1;
}

@media screen and (max-width: 999px){
#aboutHistory{

}
#aboutHistoryDetail{
padding: 0 20px;
max-width: none;
margin: 0;
}
#aboutHistory dl{
display: flex;
flex-wrap: wrap;
font-size: 0.875rem;
letter-spacing: 0.1em;
margin-top: 1em;
}
#aboutHistory dl dt{
width: 7em;
}
#aboutHistory dl dd{
width: calc(100% - 7em);
}
#aboutHistoryFigure{
position: relative;
bottom: auto;
right: auto;
padding: 0 0 0 15%;
width: auto;
margin: 30px 0 0;
}
}/*999*/





#aboutLogo{
position: relative;
padding: 12.5% 0 0;
}
#aboutLogo h2{
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.15em;
text-align: center;
}
#aboutLogo figure{
max-width: 230px;
margin: 50px auto 0;
}
#aboutLogo p{
text-align: center;
margin: 3em 0 0;
font-size: 0.875rem;
line-height: 2.85;
letter-spacing: 0.1em;
}



@media screen and (max-width: 999px){
#aboutLogo{
padding: 20% 20px 0;
}
#aboutLogo h2{
text-align: left;
}
#aboutLogo p{
text-align: left;
}
}/*999*/





#aboutOutline{
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
padding: 12.5% 0 0;
}
#aboutOutline h2{
position: sticky;
top: calc(2vw + 110px);
font-size: 1.25rem;
font-weight: 500;
width: 38%;
letter-spacing: 0.15em;
padding: 20px 0 0 10%;
}
#aboutOutlineDetail{
width: 62%;
}
#aboutOutlineDetail dl{
display: flex;
flex-wrap: wrap;
font-size: 0.875rem;
letter-spacing: 0.1em;
}
#aboutOutlineDetail dl dt{
width: 170px;
padding: 30px 10px;
border-bottom: 1px solid #cdcdcd;
}
#aboutOutlineDetail dl dd{
width: calc(100% - 170px);
padding: 30px 10px;
border-bottom: 1px solid #cdcdcd;
}



@media screen and (max-width: 999px){
#aboutOutline{
display: block;
padding: 20% 20px 0;
}
#aboutOutline h2{
position: relative;
top: auto;
width: auto;
padding: 0;
}
#aboutOutlineDetail{
width: auto;
}
#aboutOutlineDetail dl{
display: block;
margin: 1em 0 0;
}
#aboutOutlineDetail dl dt{
width: auto;
padding: 25px 0 0;
border-bottom: none;
}
#aboutOutlineDetail dl dd{
width: auto;
padding: 0 0 25px;
border-bottom: 1px solid #cdcdcd;
}
}/*999*/