/* CSS Document */

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

top-contents
=================================================*/

.keyword {
	margin: 0 auto 60px;
}
.keyword .photo-item {
	margin: 4% auto 0;
}
.keyword .key-head {
    width: 100%;
	display: table;
}
.keyword .key-head .icon {
    width: 12%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 2%;
}
.keyword .key-head .icon img {
    width: 100%;
	max-width: 100px;
	height: auto;
}
.keyword .key-head h2 {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    line-height: 160%;
    padding: .2em 1em;
}
.keyword p {
    padding: 3% 0 0;
}
.keyword.col1 .key-head {
    color: #d36534;
    border: 3px solid #d36534;
}
.keyword.col1 .key-head .icon {
    background-color: #d36534;
}
.keyword.col2 .key-head {
    color: #e3aa57;
    border: 3px solid #e3aa57;
}
.keyword.col2 .key-head .icon {
    background-color: #e3aa57;
}
.keyword.col3 .key-head {
    color: #5fbebc;
    border: 3px solid #5fbebc;
}
.keyword.col3 .key-head .icon {
    background-color: #5fbebc;
}
.keyword.col4 .key-head {
    color: #3789c2;
    border: 3px solid #3789c2;
}
.keyword.col4 .key-head .icon {
    background-color: #3789c2;
}
.keyword.col5 .key-head {
    color: #7662a2;
    border: 3px solid #7662a2;
}
.keyword.col5 .key-head .icon {
    background-color: #7662a2;
}
.keyword.col6 .key-head {
    color: #cad877;
    border: 3px solid #cad877;
}
.keyword.col6 .key-head .icon {
    background-color: #cad877;
}
.keyword.col7 .key-head {
    color: #8c9eb1;
    border: 3px solid #8c9eb1;
}
.keyword.col7 .key-head .icon {
    background-color: #8c9eb1;
}

.message {
	
}
.message p.name {
	text-align: center;
	margin: 4% 0;
}
.message p.name span {
	font-size: 1.6rem;
}
.message p.name strong {
	font-size: 2.2rem;
	font-weight: 400;
}
.message .photo-item {
	margin-top: 6%;
}
.message section {
	margin-top: 8%;
}

.contents-menu {
    width: 100%;
    max-width: 600px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 4% auto 0;
}
.contents-menu li {
    width: 45%;
}
.contents-menu li a {
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    background-color: #760000;
    background-image: url("../images/opt_arrow.png");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: auto;
    border-radius: 24px;
    padding: .5em 1em;
}
.contents-menu.col2 li a {
    background-color: #677600;
}

.senior {
    position: relative;
}

.senior section {
    margin-top: 6%;
}
.senior .photo-item {
    position: relative;
    margin-top: 6%;
}
.senior .photo-item .profile {
    width: 36%;
    position: absolute;
    color: #FFF;
    background-color: #760000;
    border-left: 10px solid #500000;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%);
    padding: 3%;
}
.senior .photo-item .profile.right {
    left: initial;
    lef: auto;
    right: 0;
}

.senior.col1 .title {
    color: #760000;
}
.senior.col1 .profile {
    background-color: #760000;
    border-left: 10px solid #500000;
}
.senior.col1 .small-title {
	color: #760000;
}
.senior.col1 .small-title span {
	background-color: #760000;
}

.senior.col2 .title {
    color: #677600;
}
.senior.col2 .profile {
    background-color: #677600;
    border-left: 10px solid #425000;
}
.senior.col2 .small-title {
	color: #677600;
}
.senior.col2 .small-title span {
	background-color: #677600;
}

.senior.col3 .title {
    color: #004876;
}
.senior.col3 .profile {
    background-color: #004876;
    border-left: 10px solid #002950;
    left: initial;
    left: auto;
    right: 0;
}
.senior.col3 .small-title {
	color: #004876;
}
.senior.col3 .small-title span {
	background-color: #004876;
}

.senior-menu {
	width: 100%;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    
    margin-top: 8%;
}
.senior-menu li {
	width: 30%;
	margin-top: 3%;
}
.senior-menu li p {
	color: #760000;
}
.senior-menu li p span {
	font-weight: 600;
	margin-top: 5%;
}
.senior-menu li p span a {
	text-decoration: none;
	color: #760000;
}
.senior-menu li a.link-b {
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 24px;
    background-color: #760000;
    background-image: url("../images/opt_arrow.png");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: auto;
    margin-top: 20px;
    padding: .5em 1em;
}
.senior-menu li p.no-link {
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 24px;
    background-color: #760000;
    background-size: auto;
    margin-top: 20px;
    padding: .5em 1em;
}
.senior-menu li:nth-of-type(2) a.link-b {
    background-color: #677600;
}
.senior-menu li:nth-of-type(3) a.link-b {
    background-color: #004876;
}
.senior-menu li:nth-of-type(3) p.no-link {
    background-color: #004876;
}

.education {
	margin: 60px auto 0;
}

.photo {
	
}
.spacer {
	position: relative;
}
/* img */
.senior-menu img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* cf */
.senior-menu:after {
	content:" ";
	display:block;
	clear:both;
}


@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.keyword {
		margin-bottom: 6%;
	}
    .keyword .key-head .icon {
        width: 20%;
        text-align: center;
        padding: 2%;
    }
    
	.message p.name span {
		font-size: 1.5rem;
	}
	.message p.name strong {
		font-size: 1.8rem;
		font-weight: 400;
	}
	.senior {
		margin-top: 6%;
	}
	.senior section {
		margin-top: 6%;
	}
	.education {
		margin: 6% auto 0;
	}
    .contents-menu li a {
        display: block;
        width: 100%;
        color: #FFF;
        font-size: 1.3rem;
        background-size: 15px;
        padding: .2em 1em;
    }
    .senior-menu {
		width: 100%;
        
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
	}
	.senior-menu li {
		width: 48%;
        max-width: 300px;
		margin: 8% 0 0;
	}
	.senior-menu li .s-photo {
		width: 100%;
	}
    .senior-menu li a.link-b {
        display: block;
        width: 100%;
        font-size: 1.3rem;
        color: #FFF;
        text-align: center;
        background-size: 15px;
        margin-top: 5%;
        padding: .2em 1em;
    }
    .senior-menu li p.no-link {
        display: block;
        width: 100%;
        font-size: 1.3rem!important;
        color: #FFF;
        text-align: center;
        background-size: 15px;
        margin-top: 5%;
        padding: .2em 1em;
    }
    
    .senior .photo-item .profile {
        width: 100%;
        position: relative;
        line-height: 180%;
        top: initial;
        top: auto;
        left: 0;
        -webkit-transform: translate(0, 0); 
        transform: translate(0, 0);
        padding: 3% 3%;
    }
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	
	
}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	

}