@charset "UTF-8"; /* ======================================== * 0. サイト共通・初期設定 * ======================================== */ .flex-break { display: none; } html { height: 100%; /* PICKUPの全幅化による横スクロールを防止。 ※ overflow-x:hidden を html に付けると、モバイルで が スクロールコンテナ化し position:fixed のハンバーガー等が スクロール時にずれる原因になる。 overflow-x:clip はスクロールコンテナを作らないのでずれない。 */ overflow-x: clip; /* ★スクロールバーの有無でページ幅が変わり、中央寄せのヘッダー等が ページごとに左右へずれるのを防ぐ（BLOGなど縦に短いページ対策）。 常にスクロールバー分の余白を確保して全ページの幅を揃える。 */ scrollbar-gutter: stable; } body { background-color: #f2f2f2; color: #1BAEE0; font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; /* Sticky Footer用設定 */ display: flex; flex-direction: column; min-height: 100vh; opacity: 0; transition: opacity 0.15s ease-out; } /* -------------------------------------------------------------- * 【真っ白防止の保険】 * body は初期状態 opacity:0。通常はJS(revealPage)が表示に戻すが、 * JSの読み込み失敗・遅延・エラー時に画面が真っ白のままになるのを防ぐため、 * CSSだけでも一定時間後に必ずフェードインさせる。 * - ローダー付きのTOP( body.home )だけはJS主導のままにする * （JSが動けばフェードは即上書きされるので二重表示にはならない） * ------------------------------------------------------------ */ body:not(.home) { animation: bodySafetyReveal 0.15s ease-out 1.2s forwards; } @keyframes bodySafetyReveal { to { opacity: 1; } } body.fade-in-start { opacity: 1 !important; animation: fadeIn 0.15s ease-out forwards; } body.fade-out-start { opacity: 1; animation: fadeOut 0.15s ease-in forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } main { flex-grow: 1; padding: 0 5%; box-sizing: border-box; } .page-no-hero main { padding-top: 80px; padding-bottom: 50px; } body:not(.page-no-hero) main { padding-top: 100px; padding-bottom: 100px; } h2 { color: #272727; text-align: center; font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 70px; margin: 50px; text-decoration: none; } /* ======================================== * 1. サイト全体の共通ボタンデザイン * ======================================== */ /* VIEW ALL, CONTACT, 戻るボタンなどを統一 */ .view-all-btn, .back-link { display: inline-flex; align-items: center; justify-content: center; background-color: #1BAEE0; /* 通常時：水色 */ color: #ffffff; font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; padding: 10px 30px; border-radius: 999px; transition: all 0.3s ease; border: none; cursor: pointer; text-align: center; } .view-all-btn:hover, .back-link:hover { background-color: #ff9214 !important; /* ホバー時：オレンジ */ color: #ffffff !important; transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 15px rgba(255, 146, 20, 0.3); } .back-link { padding: 8px 18px; margin-bottom: 30px; } /* ======================================== * 2. トップページ プレースホルダー & タイトル * ======================================== */ .top-placeholder { width: 100%; height: 180px; background-color: transparent; position: relative; padding: 0 5%; /* 下のメインコンテンツと同じ左右余白 */ box-sizing: border-box; display: flex; align-items: center; /* 縦方向だけ中央揃え */ justify-content: flex-start; /* ★横方向は中央揃えを強制解除し、左揃えに */ } .hero-wrapper { width: 100%; max-width: 1500px; margin: 0 auto; } body.home main { position: relative; padding-top: 10px; /* ヘッダー下padding20pxと合わせて計30px相当 */ margin-top: 0; z-index: 1; } body.home main::before { display: none !important; } .top-placeholder::after { border-top-color: #56bbd4 !important; } .hero-title-container { /* 以前あった position: absolute; 等の座標指定をすべて削除 */ text-align: left; color: #272727; width: 100%; } .hero-en-title { font-size: 28px; font-weight: 700; margin: 0; line-height: 1; font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; opacity: 0.9; } .hero-jp-subtitle { font-size: 8pt; font-weight: 500; margin: 0; line-height: 1.5; font-family: 'Noto Sans JP', sans-serif; opacity: 0.9; } /* ======================================== * TOPページ PROFILEセクションの横並び設定 * ======================================== */ /* 右カラム(PROFILE)を縦フレックスにして、MORE VIEWを下端へ寄せCONTACT側と縦位置を揃える */ .profile-cta-right { display: flex; flex-direction: column; } .profile-cta-right .profile-more-btn { margin-top: auto; /* 下端に押し出してCONTACTのMORE VIEWと縦位置を合わせる */ } .top-profile-layout { display: flex; flex-direction: row; /* 横並びにする */ align-items: flex-start; gap: 25px; } .top-profile-img-wrap { flex-shrink: 0; } .top-profile-img-wrap img { width: 220px !important; /* プロフィール画像を拡大 */ height: 220px !important; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .top-profile-text-wrap { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; } /* 名前ブロック（Profileページと同じ体裁） */ .top-profile-name-block { margin: 0 0 6px 0; line-height: 1.6; } .top-profile-name-block strong { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; /* Profileページの名前と同じ */ line-height: 1.6; color: #272727; } .top-profile-name-block .profile-role { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; color: #555; margin-top: 5px; display: inline-block; } /* 本文（Profileページ本文＝#333） */ .top-profile-desc { margin: 0; line-height: 1.9; font-size: 15px; color: #333; } /* ======================================== * 3. 左側固定ナビ (.side-nav) * ======================================== */ .side-nav { position: fixed; left: 0; top: 0; height: 100vh; width: 240px; background: transparent; z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.4s ease; } .side-nav.is-hidden { opacity: 0; pointer-events: none; } .side-nav nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; } .side-nav nav li { margin-left: 0; margin-bottom: 20px; } .side-nav nav a { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; text-decoration: none; color: #ffffff; font-size: 25px; transition: transform 0.2s ease, color 0.2s ease; transform-origin: left center; display: inline-block; } .side-nav nav a::before { content: '・ '; } .side-nav nav a:hover { color: #1BAEE0; transform: scale(1.05); } header.nav-scrolled nav a, body.page-no-hero .side-nav nav a { color: #1BAEE0; } /* ======================================== * 4-0. PCヘッダー（モバイルはハンバーガーを継続使用） * ======================================== */ .site-header { display: none; } @media (min-width: 769px) { .site-header { display: flex; align-items: center; /* 縦中央揃え */ width: 100%; padding: 24px 5%; /* 上下を揃える */ box-sizing: border-box; /* ★スクロールしても画面上部に固定 */ position: sticky; top: 0; z-index: 1000; /* 灰色背景（bodyより少し濃い） */ background-color: #e9e9e9; /* 灰色と白の境界に線（2px・黒20%） */ border-bottom: 2px solid rgba(0, 0, 0, 0.2); } /* 背景に10%のノイズを重ねる */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ヘッダー中身をノイズより前面に */ .site-header-inner { position: relative; z-index: 1; width: 100%; max-width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 30px; } .site-header-title { text-decoration: none; color: #272727; display: block; } .site-header-en { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: 0.05em; opacity: 0.9; } .site-header-jp { display: block; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 11px; line-height: 1.5; margin-top: 4px; opacity: 0.9; } /* ナビはフッター(footer-nav)と同じ書体・サイズ・間隔に合わせる */ .site-header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 25px; } .site-header-nav a { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 15px; color: #272727; text-decoration: none; transition: color 0.3s ease; } .site-header-nav a:hover { color: #ff9214; } /* PCではハンバーガーメニューを廃止しヘッダーに置き換え */ .hamburger-menu, .slide-out-nav { display: none !important; } /* TOPのヒーロータイトルはヘッダー左側に統合されるため非表示 */ .top-placeholder { display: none; } /* PCはヘッダーがあるので、下層ページ本文の上余白を詰めてヘッダーとの間を狭める */ .page-no-hero main { padding-top: 25px; } /* work-detailの「← WORKS」だけはヘッダーとの間隔を30px確保 */ .back-more-btn { margin-top: 30px; } } /* ======================================== * 4. ハンバーガーメニュー & スライドナビ * ======================================== */ .hamburger-menu { position: fixed; top: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background-color: #1BAEE0; border: none; z-index: 2000; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .page-no-hero .hamburger-menu, .home .hamburger-menu { opacity: 1; pointer-events: auto; } .hamburger-menu:hover { background-color: #ff9214; /* ホバー時オレンジ */ transform: scale(1.05); } .hamburger-menu.is-open { background-color: #ff9214 !important; } .hamburger-menu .hamburger-line { width: 28px; height: 3px; background-color: #ffffff; margin: 3px 0; transition: all 0.3s ease; } /* ★ハンバーガーメニューの完璧な「×」アニメーション */ .hamburger-menu.is-open .hamburger-line:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .hamburger-menu.is-open .hamburger-line:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); opacity: 1; } /* スライド式メニュー */ .slide-out-nav { position: fixed; top: 0; right: -300px; width: 300px; box-sizing: border-box; height: 100vh; background-color: #e9e9e9; /* 灰色背景（ヘッダーと統一） */ border-left: 1px solid #ddd; z-index: 1999; padding: 100px 40px; transition: right 0.4s ease-in-out; } /* 背景にノイズを重ねる */ .slide-out-nav::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .slide-out-nav nav { position: relative; z-index: 1; } .slide-out-nav.is-open { right: 0; } .slide-out-nav nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .slide-out-nav nav li { margin-bottom: 25px; margin-left: 0; } .slide-out-nav nav a { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 16px; color: #272727; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; transition: transform 0.2s ease, color 0.2s ease; } .slide-out-nav nav a:hover { color: #ff9214; transform: scale(1.05); } .nav-description { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 10px; color: #272727; margin-top: 4px; transition: color 0.2s ease; } .slide-out-nav nav a:hover .nav-description { color: #ff9214; } /* ======================================== * 5. Works ギャラリー & フィルター * ======================================== */ .filter-controls { text-align: center; margin-bottom: 30px; } .filter-btn { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 12px; background-color: #1BAEE0; /* 未選択時：水色 */ color: #ffffff; border: 2px solid transparent; padding: 8px 25px; margin: 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover, .filter-btn.active { background-color: #ff9214 !important; /* 選択中・ホバー時：オレンジ */ color: #ffffff; border: 2px solid transparent; transform: scale(1.05); } .works-gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* カード廃止に伴い行間(縦)を広めに調整（旧: カード内余白15px + gap30px ≒ 45px） */ gap: 45px 30px; } .work-item { /* フラットデザイン化：白背景・枠線を削除 */ background: none; border: none; border-radius: 0; text-decoration: none; color: #333; transition: transform 0.2s; display: flex; flex-direction: column; } .work-item:hover { transform: translateY(-5px); } .work-item video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; } /* サムネイルのみ角丸を維持 */ .works-gallery .media-container { border-radius: 5px; overflow: hidden; } .work-item-content { background: none; flex-grow: 1; padding: 14px 0 0; position: relative; /* ジャンルタグの右上配置基準 */ } .work-genre-tag { display: inline-block; background-color: #272727; color: #ffffff; font-size: 10px; font-weight: bold; padding: 4px 40px; border-radius: 2px; } /* WORKS一覧：ジャンルタグを右上に配置 */ .works-gallery .work-genre-tag { position: absolute; top: 14px; right: 0; } .work-item h3 { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; margin: 0; color: #272727; } /* WORKS一覧：タイトルがタグと重ならないよう右に余白を確保 */ .works-gallery .work-item h3 { padding-right: 110px; } .work-client { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; color: #888888; margin: 4px 0 0 0; padding: 0; text-align: left; } .view-more-container { margin-top: 40px; } /* View MoreボタンをTOPのページ遷移デザイン（テキスト＋横線）に合わせる。 button要素なので標準の枠・背景を消し、幅いっぱいに */ .view-more-link { width: 100%; background: none; border: none; padding: 0; cursor: pointer; font: inherit; } .works-gallery .work-item.is-hidden { display: none; } /* ======================================== * 6. 詳細ページ (work-detail) * ======================================== */ /* パンくずリスト（Works/Blog > タイトル）。PC・モバイル共通で表示。 本文（Noto Sans JP / #333）の体裁に合わせる */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 24px; max-width: 1500px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } /* Works / Blog リンク：下線なし・黒。リンクは有効、hoverでのみ色を変える */ .breadcrumb .breadcrumb-home { color: #272727; text-decoration: none; font-weight: 500; white-space: nowrap; transition: color 0.2s ease; } .breadcrumb .breadcrumb-home:hover { color: #1BAEE0; } .breadcrumb .breadcrumb-sep { color: #888; flex-shrink: 0; } .breadcrumb .breadcrumb-current { color: #555; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* blog-detailのパンくずは記事幅(800px)に合わせて中央寄せ */ .breadcrumb-blog { max-width: 800px; } .video-container { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 20px; background-color: #000; } /* aspect-ratio対応ブラウザではpadding-topハックを解除して確実に高さを確保 */ @supports (aspect-ratio: 16 / 9) { .video-container { padding-top: 0; aspect-ratio: 16 / 9; } } .no-video { width: 100%; aspect-ratio: 16 / 9; background-color: #1a1a1a; color: #888; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 4px; margin-bottom: 20px; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } /* work-detail本体をヘッダー中身と同じ最大幅(1500px)・中央寄せに揃える */ .work-detail { max-width: 1500px; margin: 0 auto; width: 100%; box-sizing: border-box; } .work-detail-grid { display: grid; grid-template-columns: 3fr 7fr; grid-template-rows: auto 1fr; grid-template-areas: "head video" "meta video"; column-gap: 40px; row-gap: 20px; margin-bottom: 0; } .work-detail-head { grid-area: head; } .work-detail-meta { grid-area: meta; } .work-detail-video { grid-area: video; } .work-detail-head { display: flex; flex-direction: column; align-items: flex-start; } .work-detail-full-width { width: 100%; max-width: 1500px; margin: 50px auto; padding: 0; box-sizing: border-box; } .work-detail-head h2 { font-size: 40px; text-align: left; margin: 0 0 5px 0; color: #272727; line-height: 1.4; } .work-detail-client, .work-detail-client, .work-detail-client a, .work-detail-head h2 + p, .work-detail-head h2 + p a, .work-detail-head h2 + a, .work-detail-head h2 + span { font-family: 'Noto Sans JP', sans-serif !important; font-size: 14px !important; color: #888888 !important; /* 元の落ち着いたグレー */ margin: 0 0 15px 0 !important; line-height: 1.6 !important; font-weight: 500 !important; text-decoration: none !important; } /* ※もしこの部分がリンク（aタグ）だった場合、マウスを乗せた時だけ水色にする設定 */ .work-detail-client a:hover, .work-detail-head h2 + p a:hover, .work-detail-head h2 + a:hover { color: #1BAEE0 !important; text-decoration: underline !important; } .work-detail-genre-tag { display: inline-block; background-color: #272727; color: #ffffff; font-size: 10px; font-weight: 700; padding: 6px 20px; border-radius: 2px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 30px; } .work-info p { font-size: 14px; color: #333; margin-bottom: 30px; } .work-info p strong { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; display: block; color: #1BAEE0; font-size: 12px; margin-bottom: 5px; text-transform: uppercase; } .work-info p span { font-weight: 500; line-height: 1.6; font-size: 14px; } .work-detail-meta .credit { margin-bottom: 0; padding: 0; background-color: transparent; border: none; border-radius: 0; } .work-detail-meta .credit h3 { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; display: block; color: #1BAEE0; font-size: 12px; margin: 30px 0 5px 0; text-transform: uppercase; border-bottom: none; padding-bottom: 0; } .work-detail-meta .credit h3:first-of-type { margin-top: 0; } .work-detail-meta .credit p { font-weight: 500; line-height: 1.6; font-size: 14px; color: #333; margin-bottom: 0; } .pick-images-gallery { margin-top: 0; border-top: 1px solid #ddd; padding-top: 20px; padding-left: 5%; padding-right: 5%; } .pick-images-gallery .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; } .pick-images-gallery .image-grid a img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 4px; display: block; } /* ======================================== * 7. PROFILE & CONTACT ページ * ======================================== */ .profile-page h2, .contact-page h2, .works h2, .blog h2 { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 48px; color: #272727; text-align: center; margin: 0 0 32px 0; } .profile-content, .contact-content { background-color: transparent; border: none; padding: 0; color: #333; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.9; max-width: 1500px; width: 100%; margin: 0 auto; box-sizing: border-box; } .profile-content p, .contact-content p { margin-bottom: 25px; } .profile-content a, .contact-content a { color: #272727; text-decoration: none; font-weight: 700; } .profile-content a:hover, .contact-content a:hover { text-decoration: underline; } .contact-content h3 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; color: #272727; margin: 0 0 5px 0; } .contact-content .highlight { background-color: transparent; font-weight: 700; color: #1BAEE0; display: block; padding: 0; margin-bottom: 20px; font-size: 19px; } .contact-content hr { border: none; border-top: 1px solid #eee; margin: 30px 0; } .contact-content .section-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; color: #333; padding: 0 0 5px 0; border-bottom: 2px solid #eee; display: block; margin: 20px 0 20px 0; } .note-left { font-size: 14px; color: #555; margin-top: 10px; margin-left: 0; text-align: left; } .schedule-section { margin-bottom: 30px; background-color: transparent; border-radius: 0; padding: 0; box-shadow: none; } .schedule-header { display: flex; align-items: center; margin-bottom: 10px; } .schedule-title { font-size: 18px; font-weight: 700; color: #272727; margin: 0; flex-grow: 1; } /* 更新日は廃止。旧 .schedule-update-date のルールは削除 */ .schedule-divider { border: none; border-top: 1px solid #eee; margin: 10px 0; } .schedule-note { font-size: 13px; color: #666; margin: 12px 0 0; line-height: 1.6; } .schedule-item { display: flex; align-items: center; padding: 3px 0; font-size: 15px; font-weight: 500; line-height: 1.5; } .schedule-period { color: #272727; min-width: 60px; } .schedule-period.year { font-weight: 700; } .schedule-period.month { margin-left: 10px; } .schedule-status-text { flex-grow: 1; text-align: right; margin-right: 15px; font-weight: 700; } .schedule-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; font-family: 'Arial', 'Noto Sans JP', sans-serif; /* 記号の字形を揃える */ } .schedule-item.status-unavailable .schedule-status-text, .schedule-item.status-unavailable .schedule-status-icon { color: #aaaaaa; } .schedule-item.status-limited .schedule-status-text, .schedule-item.status-limited .schedule-status-icon { color: #E9922E; } .schedule-item.status-available .schedule-status-text, .schedule-item.status-available .schedule-status-icon { color: #1BAEE0; } /* ======================================== * 8. TOPページ コンテンツレイアウト * ======================================== */ .pickup, .contact-cta, .profile-cta { padding: 0; background-color: transparent; } .pickup { margin-bottom: 40px; } .contact-cta { margin-bottom: 40px; } .profile-cta { margin-bottom: 0; } /* ===== 依頼スケジュール案内ボックス（PICKUPとWORKSの間・灰色四角） ===== */ .schedule-cta { margin: 0 0 40px; } .schedule-cta-box { /* 薄い水色は #e3f4fa（記録用・別デザインで使用）。ここは灰色に戻す */ background-color: #e9e9e9; border-radius: 0; /* 角丸なし */ padding: 28px 48px; /* 中身(Flex)は中央に集まるため、ボックスも内容幅に合わせて 左右の余白ができすぎないようにする。広すぎ防止に上限だけ設定 */ width: fit-content; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } /* Flexboxで横並び：見出し / スケジュール表 / 本文＋リンク カラム分割に縛られず、各要素を内容幅で自然に並べる */ .schedule-cta-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 56px; /* 縦gap / 横gap */ } .schedule-cta-heading { flex: 0 0 auto; } .schedule-cta-table { flex: 0 0 auto; text-align: center; } .schedule-cta-info { flex: 0 0 auto; } /* 1列目：見出し（左寄せ・縦中央） */ .schedule-cta-heading { display: flex; align-items: center; } .schedule-cta-title { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; color: #272727; margin: 0; border-bottom: none; padding: 0; text-align: left; line-height: 1.5; } .schedule-cta-table .schedule-section { margin: 0; display: inline-block; text-align: left; } .schedule-cta-table .schedule-item { padding: 5px 0; font-size: 14px; } /* 表内：日程とステータスを近づける（間延び防止）。flex-growを解除 */ .schedule-cta-table .schedule-period { min-width: 90px; } .schedule-cta-table .schedule-status-text { flex-grow: 0; text-align: left; margin-right: 8px; min-width: 72px; } .schedule-cta-table .schedule-status-icon { width: 18px; height: 18px; font-size: 15px; } .schedule-cta-info { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .schedule-cta-text { font-size: 14px; color: #333; margin: 0; line-height: 1.7; text-align: center; /* Flexで内容幅に並ぶため、通常は1行。狭い画面でのみ折り返す */ max-width: 28em; } .schedule-cta-period { font-size: 15px; font-weight: 700; color: #272727; margin: 0; } .schedule-cta-link { font-size: 14px; font-weight: 700; color: #1BAEE0; text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .schedule-cta-link:hover { color: #ff9214; } /* 本文中のメールリンク */ .schedule-cta-mail { color: #1BAEE0; font-weight: 700; text-decoration: none; word-break: break-all; transition: color 0.2s ease; } .schedule-cta-mail:hover { color: #ff9214; text-decoration: underline; } /* CONTACTページ：見出し列が無いので、表と本文を中央で横並びに */ .schedule-cta--contact .schedule-cta-box { width: 100%; max-width: 100%; } .schedule-cta--contact .schedule-cta-grid { justify-content: center; gap: 24px 48px; } .content-wrapper { width: 100%; max-width: 1500px; margin: 0 auto; } .section-header { display: flex; align-items: baseline; gap: 20px; margin-bottom: 0px; } .section-header h2 { font-size: 40px; color: #272727; margin: 0; text-align: left; } .section-header .section-subtitle { font-size: 14px; color: #888; margin: 0; padding-bottom: 10px; text-align: left; white-space: nowrap; } .contact-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 30px; align-items: stretch; } /* CONTACT削除に伴い、PROFILEのみを1列で全幅表示 */ .contact-cta-grid.single-col { grid-template-columns: 1fr; } /* 両カラムを縦フレックスにし、MORE VIEWを下端で揃える */ .contact-cta-left, .contact-cta-right { display: flex; flex-direction: column; } .contact-cta-left .contact-more-btn { margin-top: auto; } .contact-cta-left .schedule-section { margin-bottom: 0; } /* TOPページのCONTACT枠は上に「CONTACT」見出しがあるため、 更新日を消して空になったSCHEDULEヘッダーは隠して隙間を詰める （独立したCONTACTページ側では SCHEDULE 見出しはそのまま表示） */ .contact-cta-left .schedule-header { display: none; } .contact-cta-right h4 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; color: #272727; margin: 0 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; } .contact-cta-right p { font-size: 15px; margin-bottom: 30px; } .contact-cta-right .view-all-button-container { margin-top: 0; text-align: left; } .profile-summary { display: flex; align-items: center; gap: 25px; margin-bottom: 30px; text-align: left; } .profile-image-cta img { width: 240px; height: 240px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .profile-text-cta h3 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; color: #272727; margin: 0 0 10px 0; } .content-wrapper .view-all-button-container { text-align: left; margin-top: 30px; } /* TOPページ ボタンの右揃え＆余白調整レイアウト */ .pickup-btn-container, .profile-btn-container, .contact-btn-wrapper { display: flex; justify-content: flex-end; } .sub-btn-wrapper { display: flex; justify-content: flex-end; gap: 15px; } .pickup-btn-container { margin-top: 10px; /* VIEW ALLボタンとリールの間の余白 */ } /* PROFILE本文のフォントスタイルをCONTACT（他ページ本文）に合わせる */ .profile-text-cta p { font-size: 14px; color: #333; line-height: 1.8; } /* PICKUP スライダー */ .pickup-gallery-wrapper { margin: 0 auto; overflow: hidden; position: relative; padding: 0; } .slider-wrapper { position: relative; width: 100%; } .slider-track { display: flex; width: max-content; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .pickup-slide { flex-shrink: 0; box-sizing: border-box; display: flex; justify-content: center; transition: transform 0.3s ease, opacity 0.3s ease; } .pickup-slide .work-item { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; } .pickup-slide .work-item:hover { box-shadow: 0 15px 40px rgba(46, 160, 189, 0.2); } .pickup-slide .work-item:hover .slide-info { background-color: #60BBD1; } .pickup-slide .work-item:hover .slide-info h3, .pickup-slide .work-item:hover .work-client { color: #ffffff !important; } .media-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .media-container video, .media-container img { width: 100%; height: 100%; object-fit: cover; } .slide-info { padding: 20px 25px; min-height: 100px; background-color: #ffffff; text-align: left; transition: background-color 0.3s ease; } .slide-info h3 { margin: 10px 0 5px 0; font-size: 16px; color: #272727; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; z-index: 100; color: #1BAEE0; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; font-size: 20px; transition: opacity 0.3s; } .slider-arrow:hover { background: #1BAEE0; color: #fff; } .prev { left: 20px; } .next { right: 20px; } .slider-dots { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } .dot { width: 10px; height: 10px; background: #ddd; border-radius: 50%; cursor: pointer; transition: 0.3s; } .dot.active { background: #1BAEE0; transform: scale(1.4); } /* PC版PICKUP：情報・白背景を非表示にしてサムネイルのみ。 1スライド＝ページ横幅の半分を基準に、前後は見切れさせる */ @media screen and (min-width: 769px) { /* スライド幅を画面の半分の80% = 40vw に縮小。映像同士の横の余白は無くす */ .pickup-slide { width: 40vw; padding: 0; } .pickup-slide .slide-info { display: none; } /* main の左右5%余白を打ち消してPICKUPを画面端まで伸ばす（左右端の見切れ解消）。 上余白は0にしてPICKUP上端をヘッダーの境界線に密着させる */ .pickup-gallery-wrapper { width: calc(100% + 10vw); max-width: none; margin-left: -5vw; margin-right: -5vw; padding: 0 0 35px; } /* TOPページ本文の上余白を消し、PICKUPをヘッダー直下（境界線）に付ける */ body.home main { padding-top: 0; } /* ③-1 ウェブ版のみ：サムネイルの角の丸みを消す */ .pickup-slide .work-item, .pickup-slide .media-container, .pickup-slide .media-container video, .pickup-slide .media-container img { border-radius: 0 !important; } /* ③-2 ウェブ版のみ：ページャを「細長い横長の長方形バー」に変更 */ .slider-dots { margin-top: 22px; gap: 8px; } .dot { width: 26px; /* 横長の長方形 */ height: 4px; border-radius: 2px; /* ほんのわずかな角丸（ほぼ長方形） */ background: #d0d0d0; transition: background 0.3s ease, width 0.3s ease; } .dot:hover { background: #b3dff0; } .dot.active { background: #1BAEE0; width: 40px; /* アクティブは少し長く */ transform: none; /* 丸ドット時代の拡大を無効化 */ } /* ピックアップ枠の下余白だけを使い、二重の余白を解消 */ .pickup { margin-bottom: 0; } } /* ======================================== * 9. フッター * ======================================== */ .site-footer { background-color: #2c2c2c; color: #a0a0a0; padding: 50px 0; font-size: 14px; position: relative; overflow: hidden; } .footer-content { width: 90%; max-width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; position: relative; z-index: 1; } .footer-left { flex-basis: 300px; flex-grow: 1; } .footer-right { flex-basis: 500px; flex-grow: 1; text-align: right; } .footer-hello { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 14px; color: #777; margin: 0 0 15px 0; text-transform: uppercase; } .social-icons a { color: #a0a0a0; font-size: 24px; margin-right: 15px; transition: color 0.3s ease; } .social-icons a:hover { color: #ff9214; } .copyright { font-size: 12px; color: #777; margin: 20px 0 0 0; } .footer-nav ul { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; justify-content: flex-end; gap: 25px; flex-wrap: wrap; } .footer-nav a { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 500; color: #d0d0d0; text-decoration: none; font-size: 15px; transition: color 0.3s ease; } .footer-nav a:hover { color: #ff9214; } /* ======================================== * 10. ローダー & インジケーター * ======================================== */ #loader-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #1BAEE0; z-index: 9999; display: grid; place-items: center; } #loader-bg.is-fading-out { animation: loaderBgFadeOut 0.5s ease-out forwards; pointer-events: none; } .loader-icon { width: 80px; height: 80px; background-color: #ffffff; border-radius: 50%; opacity: 0; animation: loaderSlideIn 1.0s cubic-bezier(0, 1, 0.2, 1) 0.2s forwards; } @keyframes loaderSlideIn { 0% { transform: translateY(100px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes loaderBgFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .scroll-indicator { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; color: #f2f2f2; transition: opacity 0.5s ease-out; } .scroll-indicator span { font-family: 'montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px; } .scroll-indicator .arrow { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 22px solid #f2f2f2; animation: bounce 2s infinite ease-in-out; } /* ======================================== * 11. Profile ページ固有レイアウト * ======================================== */ .profile-grid { display: flex; align-items: flex-start; gap: 60px; } .profile-text-content { flex: 2; min-width: 0; } .profile-name-block { margin-bottom: 15px; line-height: 1.6; } .profile-name-block strong { font-size: 18px; } .profile-role { font-size: 15px; font-weight: 500; color: #555; margin-top: 5px; display: inline-block; } .profile-image-container { flex: 1; min-width: 0; text-align: right; margin-top: 68px; } .profile-img-wrap { display: inline-block; position: relative; text-align: right; } .profile-main-image { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: block; } .icon-credit { font-family: 'fot-tsukuardgothic-std', sans-serif !important; font-size: 14px; color: #555; text-align: right; margin-top: 10px; display: block; width: 100%; } .icon-credit a { color: #1BAEE0; text-decoration: none; } .icon-credit a:hover { text-decoration: underline; } /* ======================================== * 12. レスポンシブ (タブレット 1200px, 900px) * ======================================== */ @media (max-width: 1200px) { .works-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .contact-cta-grid { grid-template-columns: 1fr; gap: 40px; } .contact-cta-right { padding-top: 0; } .contact-cta-right .view-all-button-container { text-align: center; } /* ④モバイルは1カラム縦並び：ヘッダー → 動画 → RELEASE/CREDIT */ .work-detail-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "video" "meta"; gap: 0; } /* ②タイトルを90%に（32px→29px） */ .work-detail-head h2 { font-size: 29px; } /* ③ジャンルタグを80%に */ .work-detail-genre-tag { font-size: 8px; padding: 3px 12px; margin-bottom: 0; align-self: flex-start; /* flex列内で横に伸びるのを防ぐ */ } .work-detail-head { margin-bottom: 20px; } .work-detail-video { margin-bottom: 25px; } /* 動画枠が確実に高さを持つように明示 */ .work-detail-video .video-container { width: 100%; aspect-ratio: 16 / 9; padding-top: 0; position: relative; } /* ③RELEASE/CREDIT/CONTENTの見出し-内容の間隔を統一（すべて5px） */ .work-info p strong, .work-detail-meta .credit h3 { margin-bottom: 5px; } .work-info p span, .work-detail-meta .credit p { margin-top: 0; } /* ⑤PICK UP IMAGESの左右余白を他ページ（本文5%）と揃える */ .work-detail-full-width { margin-top: 30px; margin-bottom: 30px; } .pick-images-gallery { padding-left: 0; padding-right: 0; } /* ⑥PICK UP IMAGES見出しをRELEASE/CREDITと同じデザインに */ .pick-images-gallery h3 { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; color: #1BAEE0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 15px 0; border-bottom: none; padding-bottom: 0; } } /* ======================================== * 13. レスポンシブ (スマホ 768px/600px 以下) * ======================================== */ @media (max-width: 768px) { /* ★モバイルでは読み込み時の水色ローダー画面を表示しない（一瞬のフラッシュ対策） */ #loader-bg { display: none; } /* ①モバイル：背景全体を灰色＋ノイズに（上部のヘッダー帯は廃止） */ html { overflow-x: clip; } body { position: relative; background-color: #e9e9e9; overflow-x: clip; width: 100%; max-width: 100%; } /* ★横オーバーフロー対策：はみ出す要素があると position:fixed ヘッダーが スクロール時に縦へずれて戻らない不具合(iOS/Android)が起きるため、 主要コンテナが画面幅を超えないよう保険をかける */ main, section, .content-wrapper, .contact-content, .profile-content, .contact-grid, .profile-grid, .profile-image-container, .profile-img-wrap { max-width: 100%; box-sizing: border-box; } .profile-main-image, main img, main video, main iframe { max-width: 100%; height: auto; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #e9e9e9; z-index: 0; pointer-events: none; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 背景(z-index:0)より前面にコンテンツを出す ※ .slide-out-nav は元々 position:fixed; z-index:1999 を持つため含めない （含めると開いた際のfixed配置と重なり順が壊れる） */ main, .site-footer, .top-placeholder { position: relative; z-index: 1; } /* ハンバーガーとタイトルはヘッダー帯より前面に */ .hamburger-menu { z-index: 2000; } .top-placeholder { position: relative; z-index: 10; } /* ========================================================== * ★モバイル固定ヘッダー（全ページ統一 / ウェブ版と同じ配色） * - 背景もヘッダーも灰色＋ノイズ（ウェブ版と統一） * - ナビはハンバーガーに任せるため隠す * ========================================================== */ .site-header { display: flex !important; position: fixed; top: 0; left: 0; right: 0; /* 左右端に固定してビューポート幅に一致させ、 ページごとの横スクロール差でずれるのを防ぐ */ width: auto; box-sizing: border-box; align-items: center; padding: 14px 20px; min-height: 64px; background-color: #e9e9e9; /* ウェブ版と同じ灰色 */ border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 境界線 1px・黒10% */ z-index: 1500; /* コンテンツより前・ハンバーガー(2000)より背面 */ overflow: hidden; /* ノイズをヘッダー内に収める */ } /* ウェブ版と同じ10%ノイズを重ねる */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-header-inner { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; display: flex; align-items: center; gap: 0; } /* モバイルではヘッダー内ナビは隠す（ハンバーガーで代替） */ .site-header-nav { display: none !important; } /* タイトルはウェブ版と同じ濃色文字・下線なし */ .site-header-title, .site-header-title:hover, .site-header-en { color: #272727; text-decoration: none !important; } .site-header-en { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0.05em; color: #272727; opacity: 0.9; } .site-header-jp { display: block; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 10px; line-height: 1.4; margin-top: 3px; color: #272727; opacity: 0.9; } /* 固定ヘッダー分の余白を確保し、旧タイトル帯(top-placeholder)は撤去 */ .top-placeholder { display: none !important; } /* TOPはPICKUPがヘッダー直下にぴったり付くよう、余白はヘッダー高さ(66px)ちょうど */ body.home main { padding-top: 56px !important; margin-top: 0 !important; } body:not(.page-no-hero) main { margin-top: 0 !important; } .page-no-hero main { padding-top: 90px; padding-bottom: 40px; } /* ハンバーガーは灰色ヘッダーの右に収める（帯の縦中央に合わせる） 丸い背景は無くして「=」のラインのみ表示。色はタイトル文字と同色 */ .hamburger-menu { top: 12px !important; right: 16px !important; width: 40px !important; height: 40px !important; background-color: transparent !important; /* 丸を消す */ border-radius: 0 !important; } .hamburger-menu:hover, .hamburger-menu.is-open { background-color: transparent !important; } .hamburger-menu .hamburger-line { background-color: #272727; } /* =の色はタイトルと同じ */ .hamburger-menu.is-open .hamburger-line { background-color: #272727; } body.home main::before { display: none !important; } .hero-title-container { position: relative !important; /* 絶対配置を解除して余白の内側に収める */ top: 0 !important; left: 0 !important; padding-top: 0 !important; /* ★縦中央揃えを効かせるため上余白を削除 */ } .hero-en-title { font-size: 22px !important; color: #272727 !important; opacity: 1 !important; } /* モバイルのロゴを20%拡大＋黒 */ .hero-jp-subtitle { font-size: 8.5pt !important; color: #272727 !important; opacity: 1 !important; } .contact-cta, .profile-cta { padding: 40px 0; } /* 依頼スケジュール案内ボックス（モバイル）: 縦積みに */ .schedule-cta { margin: 0 0 30px; } .schedule-cta-box { padding: 19px 15px; /* 22/18 → 各3px縮小 */ width: 100%; max-width: 100%; /* body背景(#e9e9e9)と同色だと溶け込むため、少し濃い灰色にして視認できるように */ background-color: #dcdcdc; border-radius: 0; /* 角丸なし */ } .schedule-cta-grid { flex-direction: column; gap: 13px; } /* 16 → 3px縮小 */ .schedule-cta-heading { justify-content: center; } .schedule-cta-title { font-size: 17px; text-align: center; } /* スケジュール表を中央揃えに（inline-blockのsectionを中央寄せ） */ .schedule-cta-table { width: 100%; margin: 0; text-align: center; } .schedule-cta-table .schedule-section { display: inline-block; text-align: left; margin: 0 auto; } .schedule-cta-table .schedule-item { font-size: 13px; padding: 2px 0; } /* 5 → 3px縮小 */ /* 本文はウェブ版と同じく内容幅で自然に（強制的な折り返し上限を解除） */ .schedule-cta-text { font-size: 13px; max-width: none; } .schedule-cta-info { gap: 11px; } /* 14 → 3px縮小 */ /* TOP CONTACTのSCHEDULE区切り線をモバイルでは非表示に */ .contact-cta-left .schedule-divider { display: none; } /* 線を消した分、項目の縦間隔を確保 */ .contact-cta-left .schedule-item { padding: 10px 0; } /* 下層ページの本文開始位置（固定ヘッダー分の余白）*/ .page-no-hero main { padding-top: 90px; padding-bottom: 40px; } /* TOPのPROFILEボタン下〜フッターの余白を縮小 */ body.home main { padding-bottom: 10px !important; } .contact-cta-grid { gap: 20px !important; } .contact-cta-left .schedule-section { margin-bottom: 0 !important; } /* VIEW MOREとスケジュール表の間隔を5px広く（基本30px→35px） */ .contact-cta-left .contact-more-btn { margin-top: 35px !important; } .contact-cta-right { padding-top: 0 !important; margin-top: 0 !important; } .section-header { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 20px; } .section-header h2 { font-size: 40px; text-align: left; margin-bottom: 0; } .section-header .section-subtitle { text-align: left; padding-bottom: 0; } .profile-summary { flex-direction: column; align-items: center; gap: 20px; } .profile-image-cta img { width: min(360px, 80vw); height: auto; aspect-ratio: 1 / 1; } .content-wrapper .view-all-button-container { text-align: center; } /* PICKUPレイアウト：ヘッダー高さ(66px)ちょうどで開始し余白ゼロ */ body.home main { padding-top: 56px !important; margin-top: 0 !important; } .pickup h2 { text-align: left; } .pickup .section-header { margin-bottom: 0 !important; padding-bottom: 0 !important; } .section-header .section-subtitle { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* モバイルのPICKUPをモニター版に寄せる： サムネのみ表示・角丸なし・影なし・画面幅いっぱい（前後は見切れてOK） */ .pickup-gallery-wrapper { padding: 0 !important; margin-top: 5px !important; /* ヘッダーとの距離をさらに詰める */ width: calc(100% + 10vw) !important; /* mainの左右5%余白を打ち消して全幅に */ margin-left: -5vw !important; margin-right: -5vw !important; } .pickup-slide { width: 100vw; padding: 0; } /* サムネを画面幅いっぱいに */ .pickup-slide .slide-info { display: none; } /* ジャンル・タイトル等を非表示 */ .pickup-slide .work-item { border-radius: 0; /* 角丸削除 */ box-shadow: none; /* ドロップシャドウ削除 */ } /* 左右の矢印ボタンを非表示（スクロールで操作） */ .slider-arrow, .prev, .next { display: none !important; } /* 指で触れたときの浮き上がりモーションを無効化 */ .pickup-slide .work-item:hover { transform: none !important; box-shadow: none !important; } /* ドット(下の丸ボタン)を小さくする */ .slider-dots { width: 100%; text-align: center; margin-top: 0 !important; padding-top: 16px !important; padding-bottom: 4px; gap: 8px; display: flex; justify-content: center; align-items: center; } /* ●→ ■(細長い長方形バー)。ウェブ版と統一 */ .slider-dots .dot { width: 20px; height: 4px; border-radius: 2px; background: #d0d0d0; transform: none; } .slider-dots .dot.active { width: 30px; background: #1BAEE0; transform: none; } .profile-grid { flex-direction: column-reverse; gap: 30px; } .profile-text-content { text-align: left; } .profile-image-container { display: block; width: 100%; margin-top: 0; text-align: left; } .profile-img-wrap { display: block; width: 100%; margin: 0; text-align: left; } /* 画像の左右をテキストと揃える（コンテンツ幅いっぱい） */ .profile-main-image { max-width: 100%; width: 100%; } .icon-credit { position: static; display: block; margin-top: 5px; text-align: right; font-size: 12px; } /* モバイルフッター：リンクナビを削除し、アイコンとコピーライトを中央に揃える */ .site-footer { padding: 30px 0; } .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 12px; } .footer-left, .footer-right { flex-basis: auto; text-align: center; width: 100%; } .footer-nav { display: none; } /* ページリンクを非表示 */ .footer-hello { margin: 0 0 12px 0; } /* アイコンを中央に。右マージンによる中心ずれを解消 */ .social-icons { display: flex; justify-content: center; gap: 20px; } .social-icons a { margin: 0; } .copyright { margin: 0; } /* WORKS フィルタボタン（2段・左揃え完璧版） */ .filter-controls { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px 8px !important; margin-bottom: 25px !important; padding: 0 !important; } .flex-break { display: block !important; flex-basis: 100% !important; height: 0 !important; } .filter-controls .filter-btn { font-size: 8px !important; padding: 2px 10px !important; margin: 0 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; } /* ジャンルタグ（黒四角）を上部のボタンと同じサイズに縮小 */ .work-genre-tag { font-size: 8px !important; padding: 2px 10px !important; letter-spacing: 0.5px !important; display: inline-block !important; } /* タグが小さくなる分、タイトルの右余白も縮小 */ .works-gallery .work-item h3 { padding-right: 75px; } /* スマホ用の余白・スタイルの微調整 */ .pickup { margin-bottom: 20px !important; } .contact-cta { padding-top: 20px !important; padding-bottom: 10px !important; margin-bottom: 20px !important; } .pickup-btn-container { margin-top: 5px !important; } .slider-dots { padding-top: 16px !important; padding-bottom: 6px !important; margin-top: 0 !important; gap: 8px; display: flex; justify-content: center; align-items: center; } .slider-dots .dot { width: 20px; height: 4px; border-radius: 2px; background: #d0d0d0; transform: none; } .slider-dots .dot.active { width: 30px; background: #1BAEE0; transform: none; } .profile-text-cta p { font-size: 14px !important; color: #333 !important; line-height: 1.8 !important; } } @media (max-width: 600px) { .works-gallery { grid-template-columns: 1fr; gap: 35px 20px; } h2, .profile-page h2, .contact-page h2, .works h2, .blog h2 { font-size: 40px; margin-bottom: 20px; } .work-item h3 { font-size: 16px; } .profile-content, .contact-content { padding: 20px 0; font-size: 15px; } .schedule-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; margin-bottom: 15px !important; } .schedule-title { width: auto !important; flex-grow: 1 !important; margin: 0 !important; } .schedule-item { font-size: 14px; } .schedule-period { min-width: 50px; } .schedule-status-text { margin-right: 10px; } .slider-arrow { width: 35px; height: 35px; font-size: 16px; } .prev { left: 10px; } .next { right: 10px; } .pick-images-gallery .image-grid { grid-template-columns: 1fr; } /* ハンバーガーメニュー スマホサイズ（固定ヘッダー帯の中に収める）*/ .hamburger-menu { top: 12px; right: 16px; width: 40px; height: 40px; } .hamburger-menu .hamburger-line { width: 22px; } /* ★完璧に交差するアニメーション（4.5px固定） */ .hamburger-menu.is-open .hamburger-line:nth-child(1) { transform: translateY(4.5px) rotate(45deg) !important; } .hamburger-menu.is-open .hamburger-line:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg) !important; } .slide-out-nav { right: -260px; width: 240px; } body.home .view-all-btn { font-size: 8px !important; padding: 4px 12px !important; letter-spacing: 0.5px !important; } /* スマホ画面でもボタンを完全に右揃えにする */ .pickup-btn-container, .profile-btn-container, .contact-btn-wrapper, .sub-btn-wrapper { display: flex !important; justify-content: flex-end !important; } .sub-btn-wrapper { gap: 8px !important; } .contact-cta, .profile-cta { padding: 0 0 30px !important; /* 上余白を削り、BLOGとの間隔をWORKS/BLOG間(20px)に合わせる */ } .section-header h2 { font-size: 32px !important; /* 40pxの80% */ text-align: left; margin-bottom: 0; } .section-header .section-subtitle { font-size: 11px !important; /* 14pxの80% */ text-align: left; padding-bottom: 0; } .profile-image-cta img { width: min(288px, 78vw) !important; height: auto !important; aspect-ratio: 1 / 1; } .contact-cta-right h4 { font-size: 14.5px !important; /* 18pxの80% */ } /* スマホ版 PROFILEセクション：Profileページ流に縦並び・左寄せ。 画像はコンテンツ幅いっぱい、テキストは左揃え */ .top-profile-layout { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; margin-bottom: 0 !important; } .top-profile-img-wrap { width: 100% !important; } .top-profile-img-wrap img { width: 100% !important; /* profile.htmlモバイル版と同じ：コンテンツ幅いっぱい */ height: auto !important; aspect-ratio: auto !important; /* 正方形固定を解除し元画像比率に */ max-width: 100% !important; } .top-profile-text-wrap { width: 100%; text-align: left; /* テキストは左揃えのまま */ } /* 肩書きをprofile.htmlモバイル版に統一 */ .top-profile-name-block .profile-role { font-size: 13px !important; } /* 名前・肩書き・本文の余白をProfileページに合わせる */ .top-profile-name-block { margin-bottom: 12px; } .top-profile-desc { font-size: 14px; } /* 本文とVIEW MOREの余白をWORKS/CONTACT（24px）に合わせて詰める */ .profile-cta-right .profile-more-btn { margin-top: 24px !important; } } /* ======================================== * 13. BLOG 一覧（4列カードリスト） * ======================================== */ .blog { max-width: 1500px; margin: 0 auto; width: 100%; } .blog-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 30px; } .blog-loading, .blog-empty { grid-column: 1 / -1; text-align: center; color: #888; font-size: 14px; padding: 40px 0; } /* TOPのBLOG/WORKSが空のときのCOMING SOON表示 */ .blog-coming-soon { grid-column: 1 / -1; text-align: center; font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.15em; color: #c5c5c5; padding: 60px 0; margin: 0; } @media (max-width: 768px) { .blog-coming-soon { font-size: 22px; padding: 40px 0; } } .blog-card { text-decoration: none; color: #333; display: flex; flex-direction: column; transition: transform 0.2s; } .blog-card:hover { transform: translateY(-5px); } .blog-card-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #e5e5e5; } .blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 日付を右上、タイトル＋タグを左に。両列は上端で揃える */ .blog-card-body { padding: 14px 0 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .blog-card-main { flex: 1; min-width: 0; } .blog-card-date { font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-weight: 400; /* 太さを一段階下げる */ font-size: 12px; color: #888; margin: 0; white-space: nowrap; flex-shrink: 0; line-height: 1.5; /* タイトル1行目とベースラインを揃える */ } .blog-card-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; color: #272727; margin: 0 0 8px 0; } .blog-card-tags { display: flex; flex-wrap: wrap; gap: 8px; } /* ハッシュタグはWorksのクライアント名と同じ書体・色。枠は無し */ .blog-tag { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; color: #888888; white-space: nowrap; } /* ======================================== * 14. BLOG 記事詳細（ヘッダー左右に合わせた幅） * ======================================== */ .blog-article { max-width: 800px; margin: 0 auto; width: 100%; } .blog-article-header { margin-bottom: 30px; } .blog-article-date { font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-size: 13px; color: #888; margin: 0 0 12px 0; } .blog-article-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.5; color: #272727; margin: 0 0 16px 0; } .blog-article-tags { display: flex; flex-wrap: wrap; gap: 8px; } .blog-article-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-bottom: 40px; background: #e5e5e5; } .blog-article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 本文（Markdown由来）: Note風の読みやすい記事体裁 */ .blog-article-body { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: #333; } .blog-article-body h1, .blog-article-body h2, .blog-article-body h3, .blog-article-body h4 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; color: #272727; line-height: 1.5; margin: 48px 0 16px; } .blog-article-body h1 { font-size: 26px; } .blog-article-body h2 { font-size: 22px; padding-bottom: 8px; border-bottom: 2px solid #eee; } .blog-article-body h3 { font-size: 18px; } .blog-article-body h4 { font-size: 16px; margin: 36px 0 12px; } .blog-article-body p { margin: 0 0 28px; } .blog-article-body a { color: #1BAEE0; text-decoration: underline; font-weight: 500; word-break: break-all; } .blog-article-body a:hover { color: #ff9214; } .blog-article-body strong { font-weight: 700; color: #272727; } .blog-article-body ul, .blog-article-body ol { margin: 0 0 28px; padding-left: 1.6em; } .blog-article-body li { margin-bottom: 8px; } .blog-article-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 30px auto; } /* ブロック形式のメディア（画像・動画）。data-size で幅を変えられる */ .blog-article-body figure.blog-media { margin: 30px auto; max-width: 100%; } .blog-article-body figure.blog-media[data-size="s"] { max-width: 40%; } .blog-article-body figure.blog-media[data-size="m"] { max-width: 70%; } .blog-article-body figure.blog-media[data-size="l"] { max-width: 100%; } .blog-article-body figure.blog-media img, .blog-article-body figure.blog-media video { width: 100%; height: auto; display: block; border-radius: 8px; margin: 0; } .blog-article-body figure.blog-media figcaption { font-size: 13px; color: #888; text-align: center; margin-top: 8px; } @media (max-width: 600px) { /* スマホでは小さすぎないよう下限を上げる */ .blog-article-body figure.blog-media[data-size="s"] { max-width: 60%; } .blog-article-body figure.blog-media[data-size="m"] { max-width: 90%; } } .blog-article-body blockquote { border-left: 4px solid #1BAEE0; background: #f7fbfc; margin: 0 0 28px; padding: 14px 20px; color: #555; } .blog-article-body blockquote p:last-child { margin-bottom: 0; } .blog-article-body hr { border: none; border-top: 1px solid #eee; margin: 40px 0; } .blog-article-body code { background: #f2f2f2; padding: 2px 6px; border-radius: 3px; font-size: 90%; } .blog-article-body pre { background: #2c2c2c; color: #f2f2f2; padding: 16px 20px; border-radius: 6px; overflow-x: auto; margin: 0 0 28px; } .blog-article-body pre code { background: none; padding: 0; color: inherit; } .blog-article-back { margin-top: 60px; text-align: center; } /* ======================================== * 15. BLOG レスポンシブ * ======================================== */ @media (max-width: 1200px) { .blog-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .blog-gallery { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } } @media (max-width: 560px) { .blog-gallery { grid-template-columns: 1fr; gap: 30px; } .blog-article-title { font-size: 24px; } .blog-article-body { font-size: 15px; } } /* ======================================== * 16. TOPページ WORKS / BLOG セクション * ======================================== */ .top-works, .top-blog { max-width: 1500px; margin: 0 auto 40px; width: 100%; } /* ===== 背景スライド装飾（スクロールで左→右に出現・一方通行） ===== WORKSの見出し〜1段目サムネイル上半分を覆う縦幅の四角形。 左端は画面左端に合わせ、右端は「2列目の途中」で止まる。 幅・高さはコンテンツ基準(%)にすることで、画面幅が変わっても 同じ相対位置まで入り込むようにする（入り込み量が一定）。 */ .top-works { position: relative; z-index: 0; } .top-blog { position: relative; z-index: 0; } .top-works > .section-header, .top-works > #top-works-container, .top-works > .top-section-btn, .top-blog > .section-header, .top-blog > #top-blog-container, .top-blog > .top-section-btn { position: relative; z-index: 1; } .bg-slide-deco { position: absolute; top: 20px; /* 20px下に移動 */ /* 左端を画面左端に合わせる（中央寄せコンテンツの左外の余白を打ち消す） */ left: calc(-1 * (100vw - 100%) / 2); /* 右端が「2列目の途中」に来る幅。 画面左端〜コンテンツ左端の余白 + コンテンツの約48%（2列目途中まで） */ width: calc((100vw - 100%) / 2 + 48%); /* 見出し〜1段目サムネイル上半分ぶんの縦幅（固定） */ height: 230px; transform: translateX(-100%); /* 初期位置：自身の幅ぶん左へ（画面外） */ /* 先端(右)ほど背景(#f2f2f2)に馴染むグラデーション。最後は透明へ */ background: linear-gradient( 90deg, #A2DBEE 0%, #A2DBEE 45%, rgba(162, 219, 238, 0.55) 72%, rgba(242, 242, 242, 0) 100% ); /* 右端を斜めにカットして平行四辺形（先が尖る）にする */ clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%); z-index: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; } /* 画面に入ったらJSが .is-visible を付与 → 定位置へスライド（戻りなし） */ .bg-slide-deco.is-visible { transform: translateX(0); opacity: 1; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease-out; } /* オレンジ版（BLOG用）。水色装飾と同じ明度(78.4%)のオレンジ #FFCC91 */ .bg-slide-deco--orange { background: linear-gradient( 90deg, #FFCC91 0%, #FFCC91 45%, rgba(255, 204, 145, 0.55) 72%, rgba(242, 242, 242, 0) 100% ); } /* アニメーションを抑制する設定の利用者には動かさず即表示 */ @media (prefers-reduced-motion: reduce) { .bg-slide-deco { transition: none !important; transform: translateX(0); opacity: 1; } } /* TOP-WORKS：3列×2行=6件 / 2列×2行=4件 / 1列×3行=3件（JSは最新6件を出力） */ #top-works-container { grid-template-columns: repeat(3, 1fr); } #top-works-container .work-item:nth-child(n+7) { display: none; } /* 3列は6件まで */ @media (max-width: 900px) { #top-works-container { grid-template-columns: repeat(2, 1fr); } #top-works-container .work-item:nth-child(-n+4) { display: flex; } /* 2列は4件 */ #top-works-container .work-item:nth-child(n+5) { display: none; } } @media (max-width: 560px) { #top-works-container { grid-template-columns: 1fr; } #top-works-container .work-item:nth-child(-n+3) { display: flex; } /* 1列は3件 */ #top-works-container .work-item:nth-child(n+4) { display: none; } } /* 見出しはSuica Portfolio(CONTACT/PROFILE)と同じ左揃え＋サブタイトル横並び */ .top-works-header, .top-blog-header { margin-bottom: 32px; } .top-works-header h2, .top-blog-header h2 { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 40px; color: #272727; text-align: left; margin: 0; } .top-works-header .section-subtitle, .top-blog-header .section-subtitle { display: block; } /* セクション下のページ遷移リンク（右揃え・線が左端まで伸びる MORE VIEW 風） */ .top-section-btn { margin-top: 40px; } /* work-detailの戻りリンクは本文の上にあるので上余白なし・下余白を確保 */ .back-more-btn { margin-top: 0; margin-bottom: 30px; } .top-more-link { display: flex; align-items: center; gap: 24px; text-decoration: none; color: #272727; transition: color 0.3s ease; } /* 線を先に（左側・可変幅で左端まで伸びる）、テキストを右端に配置 */ .top-more-line { order: 1; flex: 1 1 auto; height: 1px; background-color: #272727; /* 常に黒（ホバーで変化しない） */ } .top-more-text { order: 2; font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; } /* テキストのみホバーで水色。線は反応しない */ .top-more-link:hover { color: #ff9214; } /* CONTACTの「ご依頼の流れ・確認事項」ボタンは見出し（ご依頼にあたって）と同じフォント体裁に */ .contact-link-list .top-more-text { font-family: 'montserrat', 'Noto Sans JP', sans-serif; font-weight: 700; } /* 戻りリンクはテキスト(← WORKS)を左・線を右に伸ばす */ .back-more-link .top-more-text { order: 1; } .back-more-link .top-more-line { order: 2; } /* CONTACT/PROFILE内のMORE VIEWは余白を控えめに（両者統一） */ .contact-more-btn { margin-top: 30px; } .profile-more-btn { margin-top: 30px; } /* TOPのBLOGは列数に応じて表示件数を制御（JSは最新4件を出力） 4列 → 4件(1行) / 3列 → 3件(1行) / 2列 → 4件(2行) / 1列 → 3件(3行) */ #top-blog-container .blog-card:nth-child(n+5) { display: none; } /* 常に4件まで */ @media (max-width: 1200px) { #top-blog-container .blog-card:nth-child(n+4) { display: none; } /* 3列は3件 */ } @media (max-width: 900px) { #top-blog-container .blog-card:nth-child(-n+4) { display: flex; } /* 2列は4件に戻す */ #top-blog-container .blog-card:nth-child(n+5) { display: none; } } @media (max-width: 560px) { #top-blog-container .blog-card:nth-child(n+4) { display: none; } /* 1列は3件 */ } @media (max-width: 768px) { .top-works, .top-blog { margin-bottom: 20px; } /* モバイルはCONTACT/PROFILEと同じ左寄せ見出し＋サブタイトル表示 */ .top-works-header, .top-blog-header { text-align: left; margin-bottom: 20px; } .top-works-header h2, .top-blog-header h2 { font-size: 40px; text-align: left; } .top-works-header .section-subtitle, .top-blog-header .section-subtitle { display: block; text-align: left; padding-bottom: 0; margin: 0; } /* TOP-WORKSのボタンも他と同様に中央 */ .top-section-btn { margin-top: 24px; } /* モバイルは線を削除し、テキストを右揃え */ .top-more-line { display: none; } .top-more-link { justify-content: flex-end; } .top-more-text { font-size: 13px; } /* 80%に縮小 */ /* モバイルのパンくずはフォントを少し小さく */ .breadcrumb { font-size: 13px; margin-bottom: 20px; } } /* ========================================================= * ブログ記事 追加・修正CSS * style.css の末尾に貼り付けてください。 * （既存の .blog-article-body h2 のルールがある場合は * 下の h2 ルールで上書きされます） * ========================================================= */ /* --- H2をH3と同じく黒色・左揃え・下線なしに --- */ .blog-article-body h2 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 22px; color: #272727; text-align: left; border-bottom: none; text-decoration: none; padding-bottom: 0; margin: 48px 0 16px; line-height: 1.5; } /* --- 埋め込み（YouTube / X / 動画）--- */ .blog-embed { margin: 0 0 28px; } .blog-embed-youtube { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; } .blog-embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 8px; } .blog-embed-video video { width: 100%; max-width: 720px; border-radius: 8px; display: block; background: #000; } .blog-embed-x { display: flex; justify-content: flex-start; } /* aspect-ratio非対応の古いブラウザ用フォールバック */ @supports not (aspect-ratio: 16 / 9) { .blog-embed-youtube { padding-top: 56.25%; height: 0; } } /* ========================================================= * 追加・修正CSS（style.css の末尾に貼り付け） * ========================================================= */ /* --- 引用の背景をヘッダーと同じ灰色に（水色の線はそのまま） --- */ .blog-article-body blockquote { background: #e9e9e9; } /* --- モバイル：記事タイトルとハッシュタグの間を3px狭める --- */ @media (max-width: 560px) { .blog-article-title { margin-bottom: 27px; /* 30px → 27px */ } }