/* ===== 側邊選單:對應改色 ===== */
.menu {
    stroke:#E3BC45;
}
.side-bar {
  background:#E3BC45;
}
.side-bar div:hover p {
    color:#E3BC45;
}

/* ===== me-border ===== */
.me-frame {
    position: relative;
    width: 531px;
    height:792px;
    flex-shrink: 0;
}

.me-img {
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 2;
}
.frame-svg {
    position: absolute;
    top:0;
    left:0;
    z-index:1;
}
.contact {
    height:280px;
    position:absolute;
    top:460px;
    left:500px;
    background: #fff;
    z-index: 2;
    padding-top:20px;
    transition: ease 0.3s;
}
.contact p{
    color:#E3BC45;
    font-weight: 900;
    font-size: 32px;
    white-space: nowrap;
    writing-mode: vertical-lr;
}
.frame-svg path {
    stroke:#E3BC45
}
.hover-background {
    opacity: 0;
    transition: ease 0.3s;
}
.hover-background svg:nth-child(1) {
    position: absolute;
    top:56.17px;
    left:110.96px;
}
.hover-background svg:nth-child(2) {
    position: absolute;
    top:334.7px;
    left:361px;
}

.hover {
    width:300px;
    height:700px;
    position: absolute;
    top:460px;
    left:350px;
    opacity: 0;
    z-index: 3;
}
.hover:hover ~ .contact{
    background: #E3BC45;
}
.hover:hover ~ .contact p{
    color: #fff;
}
.canvas:has(.hover:hover) .hover-background {
    opacity: 1;
}
/* ===== layout ===== */
.content {
    display: flex;
    padding:144px 260px 144px 260px;
    gap:200px;
}
.me-text {
    display: flex;
    flex-direction: column;
    z-index: 5;
}
.me-name {
    width: 670px;
    height: 375px;
    position:relative;
    border-bottom:2px solid #E3BC45;
}
.me-name p {
    position: absolute;
}
.name-kanji, .name-kana01, .name-kana02{
    writing-mode: vertical-lr ;
    color:#E3BC45
}
.name-kanji{
    top:65px;
    left:75px;
    font-size: 66px;
    white-space: nowrap;
}
.name-kana01 {
    top:70px;
    left:61px;
    font-size: 20px;
}
.name-kana02 {
    top:210px;
    left:61px;
    font-size: 20px;
}
.name-eng {
    top:300px;
    left:200px;
    font-size:32px;
}
.me-intro {
    width:650px;
    padding-top: 50px;
}
/* ===== seemore ===== */
.seemore {
    width: 250px;
    height: 50px;
    background: #E3BC45;
    position: absolute;
    top:965px;
    left:1545px;
    padding: 10px;
    border-radius: 10px;
    transition: ease 0.3s;
}
.seemore p{
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
    line-height: 50px;
    text-align: center;
}

.seemore:hover {
    transform: scale(1.1);
}