@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* リセットcss*/
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #334155;
  background-color: #FAF9F6;    
}

main {
    margin-top: 15vh;
    
}

main h2 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.8vw;
}

.h2-decoration {
    display: block;
    font-family: 'Tenor Sans', serif; /* エレガントな英字フォント */
    font-size: 1.1vw;
    color: #94A3B8;
    letter-spacing: 0.1em;
}

.profile-box {
    display: flex;
    width: 60%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 7%;
}

.profile-left-box {
    width: 30%;
}

.profile-rigtht-box {
    width: 70%;
}

.profile-rigtht-box h4 {
    font-size: 1.8vw;
    font-weight: 600;
}

.profile-rigtht-box h4 span {
    margin-left: 1em;
    font-size: 0.9vw;
    color: #94A3B8;
}

.profile-job-title {
   line-height: 2;
   font-size: 0.9vw;
   color: #94A3B8;
}

.profile-flex-container {
    display: flex;
    align-items: flex-start; /* 上揃えにする */
    gap: 40px;               /* 文章と写真の間の余白（お好みで調整） */
    margin-top: 4%;

}

.profile-text {
    width: 60%;              /* 文章の横幅 */

}

/* 右側の写真エリア */
.profile-image {
    width: 40%;              /* 写真のエリア幅 */
    aspect-ratio: 3 / 4;     /* 「3:4」の比率にする（2/3 に変えてもOK） */
    
    /* 以下は装飾 */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;        /* はみ出した部分を隠す */
}

/* 2つの文章かたまりを共通の設定にする */
.profile-text p {
    font-size: 1.0vw;  /* 二つとも同じサイズに固定 */
    line-height: 1.8;  /* 行間をたっぷり取って読みやすく */
    margin-bottom: 20px; /* 文章同士の隙間 */
    color: #333;       /* 真っ黒より少しだけ柔らかい色 */
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* ここを追加！ */
    /* 「右側（right）を基準に、上下は真ん中（center）」で表示する */
    object-position: right center; 
    display: block;
}

.skill-box {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 5%;
}

.skill-left-box {
     width: 30%;

}

.skill-rigtht-box {
    width: 70%;
}

.skill-topbox, .skill-bottombox {
    display: flex;
    /* 【ポイント1】アイテム同士の隙間を2%に固定 */
    gap: 2%; 
    width: 100%;
}

.skill-topbox {
    margin-bottom: 2%;
}

.skill-item {
    /* (100% - 隙間3つ分の6%) / 4個 = 23.5% */
    width: 23.5%; 
    line-height: 3;
    text-align: center;
    border: 1px solid #E0E0E0;
    font-size: 1vw;
}

.skill-bottombox {
    display: flex;
}

.strengths-box {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 5%;

}

.strengths-left-box {
    width: 30%;
}

.strengths-right-box {
    width: 70%;
}

/* .strengths-right-box .strengths-contents:nth-of-type(2) {
    margin-top: 7%;
    margin-bottom: 7%;
} */

.strengths-contents {
    margin-bottom: 10%;
}

.strengths-title {
    display: flex;
    width: 100%;
    align-items: center;
}

.strengths-title h4 {
    display: flex;
    width: 100%;
    align-items: flex-end; /* 数字の底辺とテキストを合わせる */
    font-size: 1.3vw;
    margin-bottom: 3%;
    font-weight: 600;
}

.strengths-title h4 span {
    margin-right: 2%;
    font-family: 'Tenor Sans', serif; /* 前に出てきたエレガントなフォント */
    font-size: 2vw;   /* 数字を思い切り大きく */
    line-height: 0.8;    /* 高さを抑えてテキストと馴染ませる */
    color: #94A3B8;
    /* color: #D1C4B1; */
    font-weight: 400;
}

.strengths-contents p {
    line-height: 1.8;
    font-size: 1vw;
}


.mystory-box {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    justify-content: space-between; 
}

.mystory-left-box {
    width: 30%;
}

.mystory-title {
    position: sticky; /* スクロールしてもタイトルを追従させたい場合に便利 */
}

h3 {
    font-size: 1.5vw;
}

.h3-decoration {
    display: block;
    margin-bottom: 2%;
    font-family: 'Tenor Sans', serif; /* エレガントな英字フォント */
    font-size: 0.8vw;
    color: #94A3B8;
    letter-spacing: 0.1em;
    
}

/* タイムライン本体（右側） */
.mystory-right-box {
    width: 70%;
    border-left: 1px solid #dcd6d0; /* 親要素の左線を「タイムラインの線」にする */
    padding-left: 40px; /* 線から文字までの余白 */
    position: relative;
}

/* 各項目 */
.timeline-item {
    position: relative;
    margin-bottom: 60px; /* 項目間の余白 */
}

/* 最後の項目の余白を調整 */
.timeline-item:last-child {
    margin-bottom: 0;
}

/* ドット */
.timeline-dot {
    position: absolute;
    left: -45.5px; /* 親のpadding-leftと線の幅を考慮して調整 */
    top: 8px;      /* 年号の高さに合わせる */
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
}

/* 中身のスタイリング */
.timeline-year {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
    font-weight: 500;
}

.timeline-content h4 {
    font-size: 1.3vw;
    margin-bottom: 1%;
    font-weight: 600;
}

.timeline-content p {
    margin-top: 2%;
    margin-bottom: 6%;
    line-height: 1.7;
    font-size: 1vw;
}


/*footer {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 6%;
    padding-right: 6%;
    background-color: beige;
}

.footer-flexbox {
    display: flex;
}

footer ul {
    display: flex;
    width: 70%;
    list-style-type: none;
}

footer ul li {
    width: 20%;
    margin-right: 10%;
}

footer ul li:nth-of-type(2) {
    width: 30%;
  
}
footer ul li a {
    text-decoration: none;
    color: #202020;
    font-size: 1.2vw;
}

address {
    width: 20%;
    margin-left: 10%;
    font-style: normal;
    /* 斜体だった文字を通常の角度にした。ほぼ毎回使う  
}
.copy {
    text-align: center;
    font-size: 1.2vw;
}*/