/* profileサイトのCSSファイル */

/* ------------------------------------- */
/* 全体
/* ------------------------------------- */
html {
    color: #333;
    font-size: 16px;
    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}

img {
    /* 画像サイズが親領域サイズを超えないようにする */
    max-width: 100%;
    /* いい感じにするおまじない */
    display: block;
}

h2 {
    /* フォントサイズを32pxにする */
    font-size: 32px;
    /* 黒の下線を引く */
    border-bottom: 1px solid black;
    /* コンテンツ幅を中身の幅と同じにする */
    width: fit-content;
    /* 左右中央寄せにする */
    margin-left: auto;
    margin-right: auto;
}
/* ------------------------------------- */
/* header
/* ------------------------------------- */
header {
    /* 横幅を960pxにする */
    width: 960px;
    /* 子コンテンツを横並びにする */
    display: flex;
    /* 子コンテンツを両端に置く */
    justify-content: space-between;
    /* 子コンテンツを上下中央に配置 */
    align-items: center;
    /* 左右中央寄せ */
    margin-left: auto;
    margin-right: auto;
    /* 左右の内側の余白を取る */
    padding-left: 70px;
    padding-right: 70px;
    /* 上下の内側の余白を取る */
    padding-top: 10px;
    padding-bottom: 10px;
}

header h1 {
    /* 横幅を120pxにする */
    width: 120px;
}

header nav ul {
    /* ナビゲーション内を横並び */
    display: flex;
    /* リストのドットを消す */
    list-style: none;
    /* 項目間の余白を空ける */
    gap: 20px;
}

header nav ul li a {
    /* 文字色を黒にする（リンクタグは元々黒以外の色が設定されているため） */
    color: black;
    /* リンクの下線を消す(リンクタグは元々下線が付いているため) */
    text-decoration: none;
}

/* ------------------------------------- */
/* main visual
/* ------------------------------------- */
#mainvisual {
    /* 高さを600pxにする */
    height: 600px;
}

#mainvisual img {
    /* 画像を枠いっぱいに広げる */
    width: 100%;
    height: 100%;
    /* 画像の縦横比を維持しつつ、見切れありで枠に合わせる */
    object-fit: cover;
}

/* ------------------------------------- */
/* about
/* ------------------------------------- */
#about {
    /* コンテンツ上側の余白を空ける */
    margin-top: 90px;
}

#about .image-text {
    /* 子コンテンツを横並びにする */
    display: flex;
    width: 580px;
    /* 子コンテンツを左右中央寄せ */
    margin-left: auto;
    margin-right: auto;
    /* 子コンテンツ間の余白を空ける */
    gap: 30px;
    /* 上下中央に配置 */
    align-items: center;
    margin-top: 60px;
}

#about .image-text img {
    /* 画像の幅と高さを100pxにする */
    width: 100px;
    height: 100px;
    /* 画像を丸くする */
    border-radius: 50%;
}

/* ------------------------------------- */
/* bicycle
/* ------------------------------------- */
#bicycle{
    /* コンテンツの上側の余白を空ける */
    margin-top: 98px;
}

#bicycle .items {
    /* 子コンテンツを横並びにする */
    display: flex;
    /* 子コンテンツを左右中央寄せ */
    justify-content: center;
    /* 子コンテンツ間の余白を空ける */
    gap: 20px;
    /* リストのドットを消す */
    list-style: none;
    margin-top: 60px;
}

#bicycle .items li {
    width: 260px;
    text-align: center;
}
/* ------------------------------------- */
/* footer
/* ------------------------------------- */
footer {
    /* 上下の余白決める */
    margin-top: 110px;
    margin-bottom: 14px;
}
footer p{
    /* テキストを中央寄せ */
    text-align: center;
    /* フォントサイズを12pxにする */
    font-size: 12px;
}