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

#aboutArea{
padding: 60px 10px 100px;
}

@media screen and (max-width: 999px){
#aboutArea{
padding: 40px 10px 50px;
}
}/*999*/





#aboutArea>div{
max-width: 1000px;
margin: 0 auto;
}





#aboutArea .heading{
margin-bottom: 1.5em;
}
#aboutArea>div>div+div{
margin-top: 100px;
}

@media screen and (max-width: 999px){
#aboutArea .heading{
margin-bottom: 1em;
}
#aboutArea>div>div+div{
margin-top: 80px;
}
}/*999*/





#aboutGreeting p+p{
margin-top: 1.5em;
}
#aboutGreeting p.signature{
text-align: right;
font-size: 0.875rem;
}
#aboutGreeting p.signature img{
display: inline-block;
}

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

}/*999*/





#aboutPhilosophyContent{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
}
#aboutPhilosophyContent figure{
width: 480px;
border-radius: 20px;
overflow: hidden;
}
#aboutPhilosophyContent .txt{
width: calc(100% - 540px);
}
#aboutPhilosophyContent .txt h3{
font-size: 1.875rem;
line-height: 1.5;
font-weight: 700;
}
#aboutPhilosophyContent .txt ul li{
position: relative;
margin-top: 1.5em;
padding-left: 15px;
}
#aboutPhilosophyContent .txt ul li::before{
content: '';
display: block;
position: absolute;
top: calc(0.9em - 5px);
left: 0;
width: 10px;
height: 10px;
background-color: #387ebe;
border-radius: 50%;
}

@media screen and (max-width: 999px){
#aboutPhilosophyContent{
display: block;
}
#aboutPhilosophyContent figure{
width: auto;
}
#aboutPhilosophyContent .txt{
width: auto;
margin-top: 1.5em;
}
#aboutPhilosophyContent .txt h3{
font-size: 1.5rem;
}
}/*999*/





#aboutArea #aboutOutline .heading{
margin-bottom: 1em;
}
#aboutOutline dl{
display: flex;
flex-wrap: wrap;
}
#aboutOutline dl dt{
width: 17em;
border-bottom: 1px dashed #787878;
padding: 20px 0;
font-weight: 700;
}
#aboutOutline dl dd{
width: calc(100% - 17em);
border-bottom: 1px dashed #787878;
padding: 20px 0;
}
#aboutOutline dl dd span{
display: inline-block;
margin-left: 20px;
}
#aboutOutline dl dd span.nonLink{
margin-left: 0;
}
#aboutOutline dl dd span.nonLink a{
pointer-events: none;
text-decoration: none;
color: #333333;
}
#aboutOutline dl dd ul li+li{
margin-top: 1.5em;
}

@media screen and (max-width: 999px){
#aboutArea #aboutOutline .heading{
margin-bottom: 0.5em;
}
#aboutOutline dl{
display: block;
}
#aboutOutline dl dt{
width: auto;
border-bottom: none;
padding: 20px 0 0;
}
#aboutOutline dl dd{
width: auto;
padding: 0 0 20px;
margin-top: 0.5em;
}
#aboutOutline dl dd span{
display: block;
margin-left: 0;
}
}/*999*/





#aboutHistory dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#aboutHistory dl dt{
position: relative;
width: 140px;
font-size: 1.5rem;
line-height: 1.4;
font-weight: 700;
color: #387ebe;
}
#aboutHistory dl dt::before{
content: '';
display: block;
position: absolute;
top: calc(0.7em - 7px);
right: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #387ebe;
z-index: 2;
}
#aboutHistory dl dt::after{
content: '';
display: block;
position: absolute;
top: 0.7em;
right: 0;
bottom: -0.7em;
width: 14px;
background-image: url(../images/about_history_obj.png);
background-repeat: repeat-Y;
background-position: center top;
background-size: 2px auto;
z-index: 1;
}
#aboutHistory dl dt:last-of-type::after{
content: none;
}
#aboutHistory dl dd{
width: calc(100% - 200px);
padding-bottom: 50px;
}
#aboutHistory dl dd:last-of-type{
padding-bottom: 0;
}

@media screen and (max-width: 999px){
#aboutHistory dl dt{
width: 100px;
}
#aboutHistory dl dd{
width: calc(100% - 130px);
padding-bottom: 40px;
}
}/*999*/