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

header { width: 100%; height: 81px; position: fixed; top: 0; z-index: 100;}
header nav { width: 45%; float: right; }
header nav ul { display: flex; justify-content: space-between; min-width: 430px; /*max-width: 560px;*/ background: white;}
header nav ul li {width: 25%; font-weight: bolder; height: 81px; line-height: 81px;}
header nav ul li.last {background: #231815; border-radius: 0 0 75px 75px;}
header nav ul li.last:after {background: white; }
header nav ul li.last a {color: white; display:block;}
header nav ul li.last a:hover {background: #666666; border-radius: 0 0 75px 75px;}
header nav ul li a { width: 100%; height: 81px; display:block;}
header nav ul li a:hover {background: #DAE4EE;}

#voice, #plofile, #blog, #inquiry { padding-top: 81px; margin-top: -81px; }

#plofile {position: relative;}
div.nav--plofile { width: 180px; position: absolute; top: 360px; left: 250px;}
div.nav--plofile ul { display: flex; justify-content: space-between; }
div.nav--plofile a:hover { opacity: 0.6; transition: all 0.2s ease; }

.container {width: calc(100% - 300px); height: 380px; background: #DAE4EE; margin: 0 0 60px; padding: 0 150px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.container div{ width: 300px; display: flexbox; justify-content: space-between; filter: brightness(120%);}
.container div a:hover{ filter: brightness(140%); transition: all 0.2s ease;}