@charset "utf-8";

/*Greeting*/
#Greeting .Contents .Message .Signature {
    text-align: right;
    margin-top: 2rem;
}
#Greeting .Contents .Message .Signature .Post {
    font-size: 0.85em;
    margin-right: 1em;
}
#Greeting .Contents .Message .Signature .name {
    font-size: 1.15em;
}
#Greeting .Contents img {
    filter: drop-shadow(12px 12px 12px rgba(0,0,0,.15));
    border-radius: 12px;
}
/*Philosophy*/
#Philosophy .Contents img {
    filter: drop-shadow(12px 12px 12px rgba(0,0,0,.15));
}
#Philosophy .Contents h3 {
    font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif;
    font-weight: 600;
}
/*Outline*/
#Outline .Contents dl dt,
#Outline .Contents dl dd {
    background: #FFFFFF;
    padding: 1em;
}
#Outline .Contents dl dt {
    font-weight: 600;
}
#Outline .Contents dl dd:nth-last-of-type(1) {
    margin-bottom: 0;
}
#Outline .Contents dl dd ul li {
    list-style: disc;
    margin-left: 1em;
}
#Outline .Contents dl dd ul.post li {
    list-style: none;
    margin-left: 0;
}
#Outline .Contents dl dd ul li span {
    font-size: 0.9em;
    width: 8em;
    display: inline-block;
}
/*BuildingExterior*/
#BuildingExterior {
}
/*Office*/
#Office img { border-radius: 12px; }
/*History*/
#History .Contents {
    display: flex;
    flex-wrap: wrap;
}
#History .Contents dl dt,
#History .Contents dl dd {
    background: #FFFFFF;
    padding: 1em;
}
#History .Contents dl dt {
    font-weight: 600;
}
#History .Contents dl dd:nth-last-of-type(1) {
    margin-bottom: 0;
}
#History .Contents dl dd ul li {
    list-style: disc;
    margin-left: 1em;
}
/*Group*/
#Group img { border-radius: 12px; }
#Group ul {
    display: flex;
    flex-wrap: wrap;
}
#Group a {
    display: block;
    position: relative;
}
#Group a i {
    font-size: 0.9em;
    position: absolute;
    right: -0.5em;
    top: -0.5em;
    margin: 0;
    padding: 0.5em;
    background: #fff;
    border-radius: 2em;
}
#Group a,
#Group a img {
    transition: all .3s ease-out;
}
#Group a:hover {
    transform: scale(1.05);
}
#Group a:hover img {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

/* -------------------------------------------
MediaQuery
------------------------------------------- */
/*SmartPhone*/
@media screen and (max-width:767px) {    
    /*Greeting*/
    #Greeting .Contents {
        flex-direction: column-reverse;
    }
    #Greeting .Contents .Message {
        margin-top: 1.5rem;
    }
    #Greeting .Contents figure {
        margin: 0 10% 0;
    }
    /*Philosophy*/
    #Philosophy .Contents figure {
        transform: scale(1.3);
        transform-origin: top center;
        margin-left: 1rem;
    }
    #Philosophy .Contents h3 {
        margin: 6rem 0 2.5rem;
        text-align: center;
    }
    
    /*Outline*/
    #Outline .Contents dl dt {
        padding-bottom: 0.5em;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    #Outline .Contents dl dd {
        padding: 0.5em 2em 1em 2.5em;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        margin-bottom: 2.5rem;
    }
    
    /*BuildingExterior*/
    #BuildingExterior {
        margin-right: 9%;
    }
    
    /*Access*/
    #Access .GoogleMAP {
        width: 200%;
        height: 100%;
    }
    #Access .GoogleMAP iframe {
        width: 122%;
        height: 480px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    
    /*Office*/
    #Office ul {
        transform: translateX(-5rem);
    }
    #Office ul li {
        margin-bottom: 2rem;
    }
    #Office ul li:nth-of-type(2n) {
        transform: translateX(8rem);
    }
    #Office ul li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    
    /*History*/
    #History .Contents {
        flex-direction: column;
    }
    #History .Contents .History_Box {
        width: 100%;
        margin-bottom: 3rem;
    }
    #History .Contents .History_Box dl {
        padding: 1.25rem 0 1.25rem 1.25rem;
    }
    #History .Contents dl dt {
        padding-bottom: 0.5em;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    #History .Contents dl dd {
        padding: 0.5em 2em 1em 2.5em;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        margin-bottom: 1rem;
    }
    
    /*Group*/
    #Group ul {
        justify-content: space-between;
        width: 90%;
        margin: auto;
    }
    #Group ul li {
        width: 100%;
        margin-bottom: 8%;
    }
    
}

@media screen and (min-width:768px) and (max-width:1024px) {
    /*Greeting*/
    #Greeting .Contents {
        flex-direction: row-reverse;
    }
    #Greeting .Contents .Message {
        width: 70%;
    }
    #Greeting .Contents figure {
        width: 40%;
        position: absolute;
        left: -15%;
    }
    /*Philosophy*/
    #Philosophy .Contents figure {
        transform: scale(1.25);
        transform-origin: top center;
    }
    #Philosophy .Contents h3 {
        width: 100%;
        margin: 5rem 0 2.5rem;
        text-align: center;
    }
    
    /*Outline*/
    #Outline .Contents dl {
        display: flex;
        flex-wrap: wrap;
    }
    #Outline .Contents dl dt {
        box-sizing: border-box;
        width: 11em;
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        text-align: center;
    }
    #Outline .Contents dl dt:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    #Outline .Contents dl dd {
        box-sizing: border-box;
        width: calc(100% - 11em);
        margin-bottom: 1em;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 1em 2em 1em 1em;
    }
    
    /*BuildingExterior*/
    #BuildingExterior {
        margin-right: 9%;
    }
    
    /*Access*/
    #Access .GoogleMAP {
        width: 200%;
        height: 100%;
    }
    #Access .GoogleMAP iframe {
        width: 122%;
        height: 480px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    
    /*Office*/
    #Office ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #Office ul li {
        width: 48%;
        margin-bottom: 2rem;
    }
    #Office ul li:nth-of-type(2n) {

    }
    #Office ul li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    
    /*History*/
    #History .Contents {
        flex-direction: column;
    }
    #History .Contents .History_Box {
        /*width: 31%;*/
        width: 100%;
        margin-bottom: 3rem;
    }
    #History .Contents .History_Box dl {
        padding: 2rem 0 2rem 2rem;
    }
    #History .Contents dl {
        display: flex;
        flex-wrap: wrap;
    }
    #History .Contents dl dt {
        box-sizing: border-box;
        width: 11em;
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        text-align: center;
    }
    #History .Contents dl dt:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    #History .Contents dl dd {
        box-sizing: border-box;
        width: calc(100% - 11em);
        margin-bottom: 1em;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 1em 2em 1em 1em;
    }
    
    /*Group*/
    #Group ul {
        justify-content: flex-start;
    }
    #Group ul li {
        width: 30%;
        margin-bottom: 5%;
        margin-right: 5%;
    }
    #Group ul li:nth-of-type(3n) {
        margin-right: 0;
    }

}
/*Tablet*/
@media screen and (max-width:1024px) {

}

/*Desktop*/
@media screen and (min-width:768px) {
}

@media screen and (min-width:1025px) {
    /*Greeting*/
    #Greeting .Contents {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    #Greeting .Contents .Message {
        width: 58%;
    }
    #Greeting .Contents figure {
        width: 35%;
        max-width: 480px;
    }
    /*Philosophy*/
    #Philosophy .Contents h3 {
        font-size: 2rem;
        width: 100%;
        margin: 7rem 0 5rem;
        text-align: center;
    }
    
    /*Outline*/
    #Outline .Contents dl {
        display: flex;
        flex-wrap: wrap;
    }
    #Outline .Contents dl dt {
        box-sizing: border-box;
        width: 11em;
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        text-align: center;
    }
    #Outline .Contents dl dt:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    #Outline .Contents dl dd {
        box-sizing: border-box;
        width: calc(100% - 11em);
        margin-bottom: 1em;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 1em 2em 1em 1em;
    }
    
    /*BuildingExterior*/
    #BuildingExterior {
        margin-right: 0%;
        margin-left: 0%;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-image:url("../images/webp/BuildingExterior.webp");
        height: 100vh;
    }
    #BuildingExterior img {
        display: none;
    }
    
    /*Access*/
    #Access .GoogleMAP {
        width: 250%;
        height: 100%;
    }
    #Access .GoogleMAP iframe {
        width: 105%;
        height: 60vh;
        border-radius: 12px;
    }
    
    /*Office*/
    #Office ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #Office ul li {
        width: 30%;
        margin-bottom: 5%;
    }
    #Office ul li:nth-of-type(2n) {

    }
    #Office ul li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    
    /*History*/
    #History .Contents {
        justify-content: space-between;
    }
    #History .Contents .History_Box {
        /*width: 31%;*/
        width: 48%;
    }
    #History .Contents .History_Box dl {
        padding: 2rem 0 2rem 2rem;
    }
    #History .Contents dl {
        display: flex;
        flex-wrap: wrap;
    }
    #History .Contents dl dt {
        box-sizing: border-box;
        width: 11em;
        margin-bottom: 1em;
        display: flex;
        justify-content: flex-end;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        text-align: right;
    }
    #History .Contents dl dt:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    #History .Contents dl dd {
        box-sizing: border-box;
        width: calc(100% - 12em);
        margin-bottom: 1em;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 1em 2em 1em 1em;
    }
    
    /*Group*/
    #Group ul {
        justify-content: flex-start;
    }
    #Group ul li {
        width: 22%;
        margin-bottom: 4%;
        margin-right: 4%;
    }
    #Group ul li:nth-of-type(4n) {
        margin-right: 0;
    }

}

@media screen and (min-width:1368px) {

}