/* ======================================= 部活動ページ 共通スタイル （サッカー部など、各部のページ間で共有） 各ページ側の で、このファイルの後に ページ固有CSS（soccer.css 等）を読み込む。 ======================================= */ body { background-color: #fff; } /* ======================================= 共通インナー ======================================= */ .club-inner { max-width: 100rem; margin: 0 auto; padding: 0 1.6rem; } @media (min-width: 768px) { .club-inner { padding: 0 8rem; } } /* ======================================= ヒーロー（OH! 大分高校の部活動） ======================================= */ .club-hero { margin-top: var(--header-h-sp); width: 100%; } @media (min-width: 768px) { .club-hero { margin-top: var(--header-h-pc); } } .club-hero img { width: 100%; } /* ======================================= 部のセクション ======================================= */ .club-section { background-color: #fff; padding: 3.2rem 0 4rem; } /* 部名見出し（サッカー部 など、装飾込みの見出し画像） */ .club-heading-wrap { text-align: center; margin-bottom: 2.4rem; } .club-heading-wrap img { width: auto; max-width: 100%; max-height: 8rem; margin: 0 auto; } @media (min-width: 768px) { .club-heading-wrap img { max-height: 10rem; } } /* ======================================= 集合写真＋監督（PC: 横並び／SP: 縦並び） ======================================= */ .club-team { display: flex; flex-direction: column; max-width: 65vw; text-align: center; margin: 0 auto 2.4rem auto; } .club-team__photo img { width: 100%; border-radius: 0.4rem; } .club-team__staff { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; } .club-team__staff-photo { width: 8rem; flex-shrink: 0; text-align: center; } .club-team__staff-name { font-size: 1.6rem; font-weight: bold; color: var(--color-navy); } .club-team__staff-role { font-size: 1.2rem; font-weight: 600; margin-left: 0.6rem; color: var(--color-text); } @media (min-width: 768px) { .club-team { flex-direction: row; align-items: flex-end; gap: 2.4rem; } .club-team__photo { flex: 1; text-align: center; } .club-team__photo img { display: inline-block; max-height: 240px; width: auto; } .club-team__staff { flex-direction: column; align-items: center; text-align: center; width: 16rem; flex-shrink: 0; margin-top: 0; } .club-team__staff-photo { width: 15rem; } } /* ======================================= 指導方針／チームの魅力・目標 ======================================= */ .club-block__heading { font-size: 1.6rem; font-weight: bold; color: var(--color-navy); margin: 2.4rem 0 0.8rem; } .club-block__text { font-size: 1.75rem; font-weight: 600; line-height: 1.9; } @media (min-width: 768px) { .club-block__text { font-size: 1.5rem; } } /* ======================================= 実績一覧（年度＋内容） 左に縦のアクセントバーを添える ======================================= */ .club-results { margin: 2.6rem 0 1.0rem 0; padding-left: 1.6rem; border-left: 1.25rem solid var(--color-text2); display: flex; flex-direction: column; gap: 0.6rem; } @media (min-width: 768px) { .club-results { margin: 3.4rem 0 1.4rem 0; padding-left: 1.6rem; border-left: 1.25rem solid var(--color-text2); display: flex; flex-direction: column; gap: 0.6rem; } } .club-results__summary p { font-size: 1.75rem; font-weight: bold; color: var(--color-text); } .club-results__item { display: flex; flex-direction: column; gap: 0.2rem; } .club-results__year { font-size: 1.6rem; font-weight: bold; } .club-results__desc { font-size: 1.75rem; font-weight: 600; } @media (min-width: 768px) { .club-results__desc { font-size: 1.5rem; } } @media (min-width: 768px) { .club-results__item { flex-direction: row; align-items: baseline; gap: 0.1rem; } .club-results__year { width: 8rem; flex-shrink: 0; } } /* ======================================= 部員の声（背景色つき） SP: 画面幅いっぱい／PC: コンテンツ幅まで（club-inner の max-width に追従） ======================================= */ .club-voice-section { padding: 1.6rem 0 3.2rem 0; } @media (min-width: 768px) { .club-voice-section { padding: 1.6rem 0 3.2rem 0; } } .club-voice { padding: 2.4rem 1.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; } .club-voice__photo { position: relative; top: 0; left: 0; width: 11rem; border-radius: 50%; } @media (min-width: 768px) { .club-voice__photo { position: relative; left: 6rem; width: 11rem; border-radius: 50%; } } .club-voice__text { padding: 2.4rem 2.6rem; background-color: #e6eef2; font-size: 1.75rem; font-weight: 600; line-height: 1.9; text-align: left; } @media (min-width: 768px) { .club-voice__text { margin-right: 2rem; padding: 2.4rem 4rem 2.4rem 8rem; font-size: 1.5rem; } } @media (min-width: 768px) { .club-voice { flex-direction: row; align-items: center; text-align: left; justify-content: center; gap: 1.6rem; } } /* ======================================= Instagram リンクボタン（アカウントがある部のみ） ======================================= */ .club-instagram-wrap { background-color: #fff; text-align: center; padding: 3.2rem 1.6rem 4.8rem; } .club-instagram { display: inline-flex; align-items: center; gap: 0.8rem; background-color: var(--color-text2); color: #fff; font-weight: bold; font-size: 1.4rem; line-height: 1.5; padding: 1.2rem 2.4rem; border-radius: 0; transition: opacity 0.2s; } .club-instagram:hover { opacity: 0.7; } .club-instagram::after { content: '▶'; font-size: 0.7em; } @media (min-width: 768px) { .club-instagram { font-size: 1.6rem; padding: 1.4rem 3.2rem; } } /* ======================================= SP/PC 表示切り替え ======================================= */ .u-sp-only { display: block; } .u-pc-only { display: none; } @media (min-width: 768px) { .u-sp-only { display: none; } .u-pc-only { display: block; } }