@charset "utf-8";
/* ==================================================================
	Site Name:
	Author:高橋 潤
	Version: 1.0

	Page Title:	TOP

=================================================================== */

/* ページ内リンクズレ解消　*/
div[id*="course"] {
    margin-top: -30px;
    padding-top: 30px;
}

h2.title {
    background: url("../../company/images/title-bg.png") no-repeat;
    background-position: center;
}

.greeting {
    display: flex;
    width: 100%;
}
.president {
    width: 200px;
    padding-right: 2rem;
}
.president h6 {
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    color: #0064b3;
    border-bottom: 1px solid #0064b3;
    padding-bottom: 0.5rem;
}
.greeting-copy {
    width: calc(100% - 200px);
}
.greeting-copy h5 {
    font-size: 2rem;
    text-align: left;
    color: #302c2c;
}
.greeting-copy p {
    padding-bottom: 2rem;
}
.greeting-copy p:last-of-type {
    text-align: right;
}
.greeting-copy strong {
    font-size: 2rem;
    margin-left: 1rem;
}
.identity ul {
    display: flex;
    flex-wrap: wrap;
}
.identity ul li {
    width: calc(50% - 2rem) ;
    padding: 2rem;
    margin: 1rem;
    background: #fff;
    box-shadow:0px 0px 6px 3px #d6d6d6;
}


h4 {
    font-size: 2rem;
    text-align: left;
    border-left: 5px solid #0064b3;
    padding-left: 1rem;
    margin-bottom: 2rem;
    color: #0064b3;
    
}

div.info dl {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    text-align: left;
    border-top: 1px dotted #333;
}

div.info dt {
    width: 12rem;
    border-bottom: 1px dotted #333;
    padding: 1rem 0rem 1rem 0;
}
div.info dd {
    /*width: calc(100% - 10rem);*/
    margin-right: auto;
    border-bottom: 1px dotted #333;
    padding: 1rem 0;
}
.info dd span {
    background: #0064B3;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 5px;
    margin-left: 2rem;
}
.info dd span::before {
    content: "▶";
    margin-right: 0.5rem;
}

.history dl {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    text-align: left;
    border-top: 1px dotted #333;
}

.history dt {
    width: 8rem;
    border-bottom: 1px dotted #333;
    padding: 1rem 1rem 1rem 0;
}
.history dl dd.month {
    width: 4rem;
    text-align: right;
    padding-right: 1rem;
}
.history dl dd {
    width: calc(100% - 12rem);
    border-bottom: 1px dotted #333;
    padding: 1rem 0;
}

/*responsive*/
@media screen and (max-width:768px) {

}

@media screen and (max-width:479px) {
h1, h2, h3 {
    font-size: 2rem;
}

    .greeting {
        flex-wrap: wrap;
        
    }
    .greeting div {
        width: 100%;
    }
    .president {
        padding: 0;
    }
    .president p:first-of-type {
        text-align: center;
    }
    .identity ul {
        flex-wrap: wrap;
    }
    .identity ul li {
        width: 100%;
    }
    .info span {
        margin: 1rem 0;
        font-size: 0.8rem;
    }
    .info dd span {
        display: inline-block;
        margin-left: 0;
    }
    
}