@charset "UTF-8";
body {
opacity: 1; 
animation: none;
}
#wrapper {
animation: fadein 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.3s;
opacity: 0;
}
.Contents {
width: 100%;
}
.character {
margin: 0 auto;
line-height: 1.6;
display: flex;
flex-direction: column;
}
.characterList {
margin: 20px auto;
width:var(--contents);
order: 2;
}
@media (min-width: 899px) {
.characterList {
order: 1;
}
}
.characterList ul {
display: flex; 
flex-wrap: wrap; 
gap: 10px; 
justify-content: center;
align-items: center;
}
.characterList ul li {
border:1px solid var(--Key-color);
}
.characterList ul li div a img {
background-color: var(--font-color);
width: clamp(55px, 5.5vw, 80px); 
aspect-ratio: 1 / 1;
object-fit: contain;
transition: background-color 0.3s ease; 
}
@media (min-width: 899px) {
.characterList ul li div a img {
width: clamp(65px, 5.5vw, 80px); 
}
}
.characterList ul li div a:hover img {
background-color: var(--Key-color);
}
.gradient-section{
width: 100%;
position: relative;
padding: 60px 0 30px;
margin: 40px auto 0;
order: 1;
}
@media (min-width: 899px) {
.gradient-section{
order: 2;
padding: 30px 0;
margin:60px auto;
}
}
.gradient-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(153, 19, 139, 0.65), rgba(209, 38, 50, 0.65));
z-index: 0; 
transform-origin: left center;
opacity: 0; 
animation: slideInBg 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;  
animation-delay: 0.35s; 
}
@keyframes slideInBg {
0% { 
transform: scaleX(0); 
opacity: 0;
}
1% {
opacity: 1;
  }
100% { 
transform: scaleX(1); 
opacity: 1;
}
}
.container {
margin: 0 auto;
width:var(--contents);
}
.photo-left{
position: relative;
z-index: 1;
margin-top: -120px; 
}
.photo-left img{
width:45%;
}
@media (min-width: 899px) {
.container {
display: grid;
grid-template-columns: 30% 60%;
gap: 40px;
}
.photo-left{
margin-bottom: -120px;
}
.photo-left img{
width:60%;
}
}
.content-right {
position: relative;
z-index: 2;
text-align: center;
flex: 1;
}
@media (min-width: 899px) {
.content-right {
text-align: left;
}
}
h3 {
display: inline-block;
color: var(--font-color);
font-size: 42px;
font-weight:700;
margin:20px auto 10px;
}
h3::before,
h3::after {
content: none;
}
.cv{
position: relative;
align-items: center;
font-weight: 700;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
padding-top: 2em;
}
.cv::before {
content: "CV"; 
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
background-color: var(--bg-color);
border-radius: 0px 15px 0px 15px;
padding: 0 15px;
color: var(--font-color);
font-family: var(--font-en);
font-size: var(--font16);
font-weight: 600;
letter-spacing: 0.05em;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 899px) {
.cv{
padding-left: 3.8em; 
padding-top: 0;
}
.cv::before {
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
.character--detail{
margin: 1em 0;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
text-align: left;
}
.face {
display: flex;
justify-content: center; 
gap: 20px; 
width: 100%;
margin: 20px auto 0;
}
@media (min-width: 899px) {
.face {
justify-content: start; 
width: 60%;
margin: 20px 0 0;
}
}
.face .face_left,
.face .face_right {
background-color: rgba(0, 0, 0, 0.85);
width: 47%; 
max-width: 200px; 
aspect-ratio: 1 / 1; 
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
justify-content: center; 
align-items: flex-end;   
}
.face img {
width: 100%; 
height: 100%;
object-fit: contain; 
}
footer {
margin: 80px auto 0;
}