@charset "UTF-8";
@import url('style.css');

.FAB {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0 32px 64px 0;
    height: 48px;
    z-index: 1000;
    align-items: center;
}

body.secondpage {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    align-items: start;
}


.second_container {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 72px); /* ウィンドウサイズからスクロールバーの幅を引いた値に設定 */
    padding: 32px 36px 36px 36px;
    gap: 16px;
    overflow: hidden;
}

.second-content{
    display: flex;
    flex-direction: column;
}

.image_kazu {
    width: calc(100vw - 64px); /* 幅をウィンドウ幅からボタンの幅を引いた値に設定 */
    height: calc(100vw - 64px); /* 高さも同じく */
    max-width: 330px; /* 幅の最大値を指定 */
    max-height: 330px; /* 高さの最大値を指定 */
    flex-shrink: 0;
    background-image: url("../assets/kazu_bustup.jpeg");
    background-size: cover;
    background-position: center top;
    border-radius: 40%;
}




.timeline-container {
    width: 100%;
}

.timeline {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0px;
}

.timeline.works{
    gap: 8px;
}

.year {
    width: 80px;
    font-weight: bold;
    margin-right: 20px;
}

.event {
    flex: 1 0 calc(100% - 70px);
}

.magazine-cont{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.image_magazine{
    width: 100%;
}

.image_magazine img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 100%; /* 親要素の幅に合わせるため */
    max-height: 100%; /* 親要素の高さに合わせるため */
    object-fit: contain;
}

.img-scroll{
    width: calc(100% + 64px);
     gap:16px;
    overflow-x: auto; /* 横方向のスクロールを有効にする */
    white-space: nowrap; /* 子要素を横一列に配置する */
    
}

.img-scroll img{
    height: 96px;
}

/*works*/

.client-container{
    display: flex;
    flex-direction: row;
    gap:16px;
}

.client-cont{
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 8px;
}

.client-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* テキストを縦横中央揃えにする */
    aspect-ratio: 1 / 1; /* 幅と高さの比率を1:1に設定 */
    border-radius: 8px;
    color: white;
    background-image: url("../assets/client01.png");
    background-size: cover; /* 画像をコンテナにフィットさせる */
    background-position: center; /* 画像を中央に配置する */
    position: relative; /* 相対位置指定 */
    overflow: hidden; /* オーバーフローを隠す */ 
    
}


.embed-container {
    width: 100%; /* 動画の幅を親要素の100%に設定 */
    height: 0; /* 初期の高さを0に設定 */
    padding-bottom: 56.25%; /* 16:9のアスペクト比の場合の高さを設定 */
    position: relative; /* 相対位置指定 */
    overflow: hidden; /* 内容がはみ出た場合には隠す */
    border-radius: 10px;
}

.embed-container video {
    position: absolute; /* 絶対位置指定 */
    top: 0; /* 上端を親要素の上端に配置 */
    left: 0; /* 左端を親要素の左端に配置 */
    width: 100%; /* 幅を親要素の100%に設定 */
    height: 100%; /* 高さを親要素の100%に設定 */
    object-fit: cover; /* ビデオが親要素のサイズにフィットするように設定 */
}

@media screen and (min-width: 920px) {
    body{
        width: 920px;
        justify-content: center;
    }
    .second_container{
        max-width: 920px;
        display: flex;
        justify-content: center;
    }
    .second-content{
        display: flex;
        justify-content: center;
    }
    .image_magazine img {
        max-width: 920px;
    }
    .client-cont{
        max-width: 160px;
    }
}