/* Theme Name: Ruru Voice Actor Portfolio Theme URI: https://example.com/ruru Author: Your Name Author URI: https://example.com Description: A modern voice actor portfolio theme built with Tailwind CSS Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ruru Tags: portfolio, voice-actor, custom-header, custom-menu, featured-images, threaded-comments, translation-ready */ /* インラインスタイルをクラス化 */ .bg-gradient-primary { background: linear-gradient(180deg, #F54368 0%, #E22652 100%); } /* ネオングロー効果 */ .neon-glow { box-shadow: 0 0 20px rgba(245, 67, 104, 0.8), 0 0 40px rgba(245, 67, 104, 0.6), 0 0 60px rgba(245, 67, 104, 0.4); } .bg-sd2 { background-image: url('html/img/SD2.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; } .bg-sd3 { background-image: url('html/img/SD3.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; } .invisible-spacer { opacity: 0; pointer-events: none; } .work-card-link { border-radius: 8px; overflow: hidden; display: block; background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .work-card-link:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } .work-card-link img { width: 100%; height: auto; display: block; } .work-info { padding: 12px 16px; background: white; } .work-info p { margin: 0; line-height: 1.4; } .work-info p:first-child { color: #6b7280; font-size: 0.75rem; } .work-info p:last-child { color: #1f2937; font-size: 0.875rem; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .transparent-spacer { width: 100%; background: transparent; padding: 10px 16px; } /* フォント設定（31種類のフォント切り替え対応） */ /* Google Fontsは各HTML内で読み込み */ /* デフォルトフォント */ h1, h2, h3, h4, h5, h6 { font-family: 'Hachi Maru Pop', 'Noto Sans JP', sans-serif; } /* ♡の装飾はDotGothicのままにする */ .heart-deco { font-family: 'DotGothic16', sans-serif; } body { font-family: 'RocknRoll One', 'Noto Sans JP', sans-serif; } .sidebar-menu-item { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; } /* 横スクロール防止 */ body { overflow-x: hidden; } /* サイドバーのスタイル（全デバイス） */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; background: linear-gradient(180deg, #F54368 0%, #E22652 100%); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); z-index: 100; transition: transform 0.3s ease-in-out; transform: translateX(-100%); /* デフォルトで隠す */ } /* サイドバーが開いている状態 */ .sidebar.open { transform: translateX(0); } /* タブレット以上では常時表示 */ @media (min-width: 1024px) { .sidebar { transform: translateX(0); } } /* オーバーレイ（モバイル・タブレット用） */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sidebar-overlay.active { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .sidebar-overlay { display: none; } } /* メインコンテンツエリアのマージン調整 */ .main-content { margin-left: 0; transition: margin-left 0.3s ease-in-out; padding-top: 0; overflow-x: hidden; /* 横スクロール防止 */ } @media (min-width: 1024px) { .main-content { margin-left: 280px; padding-top: 0; } } /* モバイル用ヘッダー（固定なし） */ .mobile-header { position: relative; width: 100%; padding: 16px; background: linear-gradient(135deg, #FFF1F2 0%, #FFE1E6 50%, #FFC7D2 100%); z-index: 10; } @media (min-width: 1024px) { .mobile-header { display: none; } } /* サイドバーメニューアイテム */ .sidebar-menu-item { position: relative; display: block; padding: 12px 24px; color: white; font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: all 0.3s ease; } .sidebar-menu-item:hover, .sidebar-menu-item.active { background: rgba(255, 255, 255, 0.15); } .sidebar-menu-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 0; background: white; transition: all 0.3s ease; } .sidebar-menu-item:hover::before, .sidebar-menu-item.active::before { width: 4px; height: 100%; } /* スマホ向けサイドバー調整 */ @media (max-width: 1023px) { /* サイドバー全体の高さ確保 */ .sidebar { display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* iOS Safari対応 */ } /* ロゴエリア - 固定高さ */ .sidebar > .flex-shrink-0:first-child { flex: 0 0 auto; } .sidebar > .flex-shrink-0:first-child .p-4 { padding: 0.5rem; } .sidebar > .flex-shrink-0:first-child img { max-height: 60px; width: auto; margin: 0 auto; display: block; } /* ナビゲーションエリア - スクロール可能 */ .sidebar > .flex-1 { flex: 1 1 auto; overflow-y: auto; min-height: 0; /* flexboxスクロールのため必須 */ } /* 下部エリア - 固定高さで必ず表示 */ .sidebar > .flex-shrink-0:last-child { flex: 0 0 auto; max-height: 40vh; overflow-y: auto; } .sidebar-menu-item { padding: 10px 20px; font-size: 0.95rem; } /* 下部エリアのパディング調整 */ .sidebar .flex-shrink-0:last-child .px-6 { padding-left: 1rem; padding-right: 1rem; } .sidebar .flex-shrink-0:last-child .py-3 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* SNSアイコン間隔調整 */ .sidebar .flex-shrink-0:last-child .space-y-3 { gap: 0.5rem; } /* コピーライトの文字サイズ */ .sidebar .flex-shrink-0:last-child .text-xs { font-size: 0.65rem; } } /* 縦が短い画面向け（横持ちや小型スマホ） */ @media (max-height: 600px) { /* ロゴエリアをさらに縮小 */ .sidebar > .flex-shrink-0:first-child .p-4 { padding: 0.25rem; } .sidebar > .flex-shrink-0:first-child img { max-height: 45px; } .sidebar-menu-item { padding: 6px 12px; font-size: 0.8rem; } .sidebar .flex-shrink-0:last-child .py-3 { padding-top: 0.15rem; padding-bottom: 0.15rem; } /* ナビゲーション部分のパディング調整 */ .sidebar nav.py-4 { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* SDキャラクターをさらに小さく */ .sidebar-sd-character { max-height: 6vh !important; } /* SNSアイコンを小さく */ .sidebar .flex-shrink-0:last-child .p-2\.5, .sidebar .flex-shrink-0:last-child .p-3 { padding: 0.375rem; } .sidebar .flex-shrink-0:last-child .w-5 { width: 1rem; height: 1rem; } .sidebar .flex-shrink-0:last-child .w-6 { width: 1.25rem; height: 1.25rem; } } /* ハンバーガーメニューのアニメーション */ .hamburger-icon span { display: block; } .hamburger-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-active span:nth-child(2) { opacity: 0; } .hamburger-active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* メニューアイテム */ .menu-item { opacity: 1; transform: translateY(0); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* ハートアニメーション */ @keyframes heartExpand { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(60); opacity: 1; } } .heart-expanding { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: heartExpand 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; z-index: 35; } .menu-open .menu-item:nth-child(1) { animation-delay: 0.1s; } .menu-open .menu-item:nth-child(2) { animation-delay: 0.2s; } .menu-open .menu-item:nth-child(3) { animation-delay: 0.3s; } .menu-open .menu-item:nth-child(4) { animation-delay: 0.4s; } .menu-open .menu-item:nth-child(5) { animation-delay: 0.5s; } .menu-open .menu-item:nth-child(6) { animation-delay: 0.6s; } /* メニューアイテムのホバーアニメーション */ .menu-item { position: relative; display: inline-block; transition: color 0.3s ease; } .menu-item::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 3px; background-color: white; transition: width 0.3s ease-out; } .menu-item:hover::after { width: 100%; } /* ホバー時のテキスト色変更（より明るく） */ .menu-item:hover { color: rgba(255, 255, 255, 1) !important; } /* スプラッシュ画面 */ #splash-screen { position: fixed; inset: 0; background: linear-gradient(135deg, #FFF1F2 0%, #FFE1E6 50%, #FFC7D2 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.1s ease-out; } #splash-screen.fade-out { opacity: 0; pointer-events: none; } .splash-logo { width: 80%; max-width: 600px; height: auto; clip-path: inset(0 100% 0 0); animation: revealFromLeft 1.8s ease-out 0.3s forwards; } @keyframes revealFromLeft { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } /* ページコンテンツの表示制御 */ #main-content { opacity: 1; transition: opacity 0.5s ease-in; } /* トップページのスプラッシュ中のみ非表示 */ body.home.loading #main-content, body.front-page.loading #main-content { opacity: 0; } body.home.loaded #main-content, body.front-page.loaded #main-content { opacity: 1; } /* ヒーローSwiper */ .hero-swiper { width: 100%; padding: 0 !important; } .hero-swiper .swiper-wrapper { align-items: center; } .hero-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; height: auto; transition: all 0.5s ease; opacity: 0.5; transform: scale(0.75); } /* 中央のアクティブスライドを大きく */ .hero-swiper .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 10; } .hero-swiper .swiper-slide img { width: 100%; height: auto; max-height: 450px; object-fit: contain; display: block; border-radius: 16px; transition: transform 0.3s ease; } .hero-swiper .swiper-slide img:hover { transform: translateY(-4px); } /* オーバーフローを許可（タブレット・デスクトップ） */ .hero-swiper { overflow: visible; } /* モバイルでは中央のみ表示 */ @media (max-width: 767px) { .hero-swiper { overflow: hidden; } .hero-swiper .swiper-slide { opacity: 1; transform: scale(1); } } /* Swiperナビゲーションボタンのカスタマイズ */ .hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev { color: #F54368; background: rgba(255, 255, 255, 0.9); width: 44px; height: 44px; border-radius: 50%; transition: all 0.3s ease; } .hero-swiper .swiper-button-next:hover, .hero-swiper .swiper-button-prev:hover { background: rgba(255, 255, 255, 1); transform: scale(1.1); } .hero-swiper .swiper-button-next::after, .hero-swiper .swiper-button-prev::after { font-size: 20px; font-weight: bold; } /* ペジネーション */ .hero-swiper .swiper-pagination { bottom: 20px !important; } .hero-swiper .swiper-pagination-bullet { width: 12px; height: 12px; background: #F54368; opacity: 0.5; transition: all 0.3s ease; } .hero-swiper .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.3); } /* ヒーローセクション背景パターン */ .hero-bg-pattern { background: linear-gradient(135deg, #FFF1F2 0%, #FFE1E6 50%, #FFC7D2 100%); position: relative; } .hero-bg-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(245, 67, 104, 0.08) 1px, transparent 1px), radial-gradient(circle, rgba(245, 67, 104, 0.05) 1px, transparent 1px); background-size: 40px 40px, 20px 20px; background-position: 0 0, 10px 10px; opacity: 1; } .hero-bg-pattern::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 15 C28 10 23 7 18 7 C12 7 7 12 7 18 C7 25 18 35 30 40 C42 35 53 25 53 18 C53 12 48 7 42 7 C37 7 32 10 30 15 Z' fill='rgba(245, 67, 104, 0.03)' /%3E%3C/svg%3E"); background-size: 120px 120px; background-position: 30px 30px; opacity: 1; } /* セクション見出しスタイル */ .section-heading { position: relative; display: inline-block; padding-left: 24px; border-left: 4px solid #F54368; transition: color 0.3s ease; } /* 下borderアニメーション */ .section-heading::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #F54368 0%, #FF6B8D 100%); transition: width 0.5s ease-out; } .section-heading:hover::after { width: 100%; } .section-heading:hover { color: #F54368; } /* サイドバー上部エリアのスクロールバーカスタマイズ */ .sidebar .flex-1::-webkit-scrollbar { width: 6px; } .sidebar .flex-1::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .sidebar .flex-1::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } .sidebar .flex-1::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* スタンプ風カード */ .stamp-card { transform: rotate(-2deg); border: 3px dashed #F54368; transition: all 0.3s ease; } .stamp-card:hover { transform: rotate(0deg); } .stamp-card:nth-child(2) { transform: rotate(1deg); } .stamp-card:nth-child(3) { transform: rotate(-1.5deg); } /* サイドバーSDキャラクター画像のサイズ調整 */ .sidebar-sd-character { max-height: 15vh; width: auto; object-fit: contain; } /* 縦長画面（モバイル縦持ちなど）では更に小さく */ @media (max-height: 800px) { .sidebar-sd-character { max-height: 12vh; } } @media (max-height: 700px) { .sidebar-sd-character { max-height: 10vh; } } @media (max-height: 600px) { .sidebar-sd-character { max-height: 8vh; } } /* 横長画面（デスクトップなど）では少し大きく */ @media (min-height: 900px) { .sidebar-sd-character { max-height: 18vh; } } @media (min-height: 1080px) { .sidebar-sd-character { max-height: 20vh; } } /* タブレット以上でグリッドの高さを揃える */ @media (min-width: 768px) { .grid-1980-4cols { grid-auto-rows: 1fr; } } /* 1980px以上で4グリッドレイアウト */ @media (min-width: 1980px) { .grid-1980-4cols { grid-template-columns: repeat(4, 1fr) !important; } /* 1980px以上では下部ボーダーを非表示 */ .grid-1980-4cols > div { border-bottom: none !important; } } /* 出演作品Swiper */ .works-swiper { width: 100%; padding: 0 !important; position: relative; overflow: hidden; } .works-swiper .swiper-wrapper { align-items: stretch; } .works-swiper .swiper-slide { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: auto; width: 100%; flex-shrink: 0; } /* ========== ページ固有のスタイル ========== */ /* request.htmlの料金表・見積もりシミュレーター */ .pricing-card { transition: all 0.3s ease; } .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(245, 67, 104, 0.15); } .step-number { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #F54368 0%, #FF6B8D 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(245, 67, 104, 0.3); flex-shrink: 0; } .flow-container { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border: 2px solid #FFC7D2; } .step-item { position: relative; padding-bottom: 2rem; border-left: 3px solid #FFC7D2; margin-left: 24px; } .step-item:last-child { border-left: 3px solid transparent; padding-bottom: 0; } .step-number-wrapper { position: absolute; left: -27px; top: 0; } .step-content { margin-left: 2.5rem; } .calculator-input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.5rem; transition: all 0.3s ease; font-size: 1rem; } .calculator-input:focus { outline: none; border-color: #F54368; box-shadow: 0 0 0 3px rgba(245, 67, 104, 0.1); } .calculator-result { background: linear-gradient(135deg, #FFF1F2 0%, #FFE1E6 100%); border: 3px solid #FF6B8D; border-radius: 1rem; padding: 2rem; margin-top: 2rem; } .warning-box { background: #FEF2F2; border-left: 4px solid #EF4444; padding: 1rem 1.5rem; border-radius: 0.5rem; } .info-box { background: #EFF6FF; border-left: 4px solid #3B82F6; padding: 1rem 1.5rem; border-radius: 0.5rem; } .slide-section { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: max-height 0.4s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out; } .slide-section.active { max-height: 2000px; opacity: 1; transform: translateY(0); } .slide-section-enter { animation: slideIn 0.4s ease-out forwards; } .slide-section-exit { animation: slideOut 0.3s ease-out forwards; } @keyframes slideIn { from { max-height: 0; opacity: 0; transform: translateY(-10px); } to { max-height: 2000px; opacity: 1; transform: translateY(0); } } @keyframes slideOut { from { max-height: 2000px; opacity: 1; transform: translateY(0); } to { max-height: 0; opacity: 0; transform: translateY(-10px); } } /* voice-sample.htmlの見出しスタイル */ .page-heading-h1 { font-size: 2rem; font-weight: 700; color: #F54368; position: relative; display: inline-block; padding: 0 2rem; margin-bottom: 2rem; } .page-heading-h1::before { content: '✦'; position: absolute; left: -10px; top: -10px; font-size: 1.5rem; color: #FF6B8D; animation: sparkle 2s ease-in-out infinite; } .page-heading-h1::after { content: '✦'; position: absolute; right: -10px; bottom: -10px; font-size: 1.5rem; color: #FFA0B4; animation: sparkle 2s ease-in-out infinite 0.5s; } .page-heading-h1-line { position: absolute; top: 50%; height: 2px; background: linear-gradient(90deg, transparent 0%, #FFC7D2 50%, transparent 100%); } .page-heading-h1-line.left { right: 100%; width: 100px; margin-right: 1rem; } .page-heading-h1-line.right { left: 100%; width: 100px; margin-left: 1rem; } @keyframes sparkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: 0.6; transform: scale(1.2) rotate(180deg); } } .page-heading-h2 { font-size: 1.5rem; font-weight: 600; color: #F54368; position: relative; display: inline-block; padding-left: 2rem; margin-bottom: 0.75rem; } .page-heading-h2::before { content: '♥'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: #FF6B8D; font-family: 'DotGothic16', sans-serif; animation: heartBeat 1.5s ease-in-out infinite; } @keyframes heartBeat { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.1); } } /* 音声プレイヤーUI */ .voice-player { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(245, 67, 104, 0.1); transition: all 0.3s ease; border: 2px solid transparent; } .voice-player:hover { box-shadow: 0 8px 25px rgba(245, 67, 104, 0.2); border-color: #FFC7D2; } .play-button { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #F54368 0%, #FF6B8D 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(245, 67, 104, 0.3); } .play-button:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(245, 67, 104, 0.4); } .play-button:active { transform: scale(0.95); } .play-button svg { width: 20px; height: 20px; fill: white; } .progress-bar-container { position: relative; height: 6px; background: #FFE1E6; border-radius: 3px; cursor: pointer; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #F54368 0%, #FF6B8D 100%); border-radius: 3px; position: relative; will-change: width; } .progress-bar::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border: 2px solid #F54368; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .time-display { font-size: 0.875rem; color: #6B7280; font-variant-numeric: tabular-nums; } .voice-title { font-weight: 600; color: #1F2937; font-size: 1rem; } .voice-description { font-size: 0.875rem; color: #6B7280; margin-top: 0.25rem; } .playing .play-button { animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(245, 67, 104, 0.3); } 50% { box-shadow: 0 4px 20px rgba(245, 67, 104, 0.6); } } .loading-icon { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 動画カードUI */ .video-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(245, 67, 104, 0.1); transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; width: 100%; max-width: 800px; } .video-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(245, 67, 104, 0.2); border-color: #FFC7D2; } .video-thumbnail-container { position: relative; padding-top: 56.25%; background: linear-gradient(135deg, #FFE1E6 0%, #FFC7D2 100%); overflow: hidden; } .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .video-card:hover .video-thumbnail { transform: scale(1.05); } .video-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .video-card:hover .video-play-overlay { opacity: 1; } .video-play-button { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #F54368 0%, #FF6B8D 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(245, 67, 104, 0.5); transition: all 0.3s ease; } .video-card:hover .video-play-button { transform: scale(1.15); box-shadow: 0 6px 30px rgba(245, 67, 104, 0.7); } .video-play-button svg { width: 28px; height: 28px; fill: white; margin-left: 4px; } .video-duration { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.75); color: white; padding: 4px 12px; border-radius: 6px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(4px); } .video-info { padding: 1.5rem; } .video-title { font-weight: 600; color: #1F2937; font-size: 1.125rem; margin-bottom: 0.5rem; line-height: 1.4; } .video-description { font-size: 0.875rem; color: #6B7280; line-height: 1.6; } #video-modal.active { display: flex; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* レスポンシブ対応 */ @media (min-width: 768px) { .page-heading-h1 { font-size: 2.5rem; } .page-heading-h2 { font-size: 1.75rem; } .voice-player { padding: 2rem; } .play-button { width: 56px; height: 56px; } .play-button svg { width: 24px; height: 24px; } .video-play-button { width: 80px; height: 80px; } .video-play-button svg { width: 36px; height: 36px; } .video-info { padding: 2rem; } } @media (min-width: 1024px) { .page-heading-h1 { font-size: 3rem; } .page-heading-h2 { font-size: 2rem; } } /* ========== contact.html用: フォームスタイル ========== */ /* フォームラベル */ .form-label { display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem; } .form-required { color: #F54368; margin-left: 0.25rem; } /* フォーム入力欄 */ .form-input, .form-textarea, .form-select { width: 100%; padding: 0.75rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.5rem; transition: all 0.3s ease; font-size: 1rem; } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: #F54368; box-shadow: 0 0 0 3px rgba(245, 67, 104, 0.1); } /* ラジオボタングループ */ .form-radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; } .form-radio-label { display: flex; align-items: center; cursor: pointer; font-size: 1rem; } .form-radio { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; accent-color: #F54368; cursor: pointer; } /* ========== index.html用: フォント切り替え機能 ========== */ /* フォント切り替えボタンのスタイル */ .font-switcher-btn { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: linear-gradient(135deg, #F54368 0%, #E22652 100%); color: white; border: none; border-radius: 50%; width: 56px; height: 56px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(245, 67, 104, 0.4); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: bold; } .font-switcher-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(245, 67, 104, 0.6); } .font-switcher-btn:active { transform: scale(0.95); } /* フォント選択パネル */ .font-panel { position: fixed; bottom: 90px; right: 20px; z-index: 9998; background: white; border-radius: 16px; padding: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); max-width: 280px; max-height: 70vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .font-panel.active { opacity: 1; visibility: visible; transform: translateY(0); } .font-panel-title { font-size: 14px; font-weight: bold; color: #9F1239; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #FFE1E6; } .font-option { padding: 12px 16px; margin: 6px 0; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; background: #FFF1F2; border: 2px solid transparent; font-size: 15px; font-weight: 500; } .font-option:hover { background: #FFE1E6; border-color: #FFA0B4; } .font-option.active { background: linear-gradient(135deg, #F54368 0%, #E22652 100%); color: white; border-color: #C01843; } @media (max-width: 768px) { .font-switcher-btn { width: 48px; height: 48px; font-size: 18px; bottom: 16px; right: 16px; } .font-panel { bottom: 76px; right: 16px; max-width: calc(100vw - 32px); } } /* ================================================ reCAPTCHA v3バッジ表示制御 ================================================ */ /* デフォルトで全ページ非表示 */ .grecaptcha-badge { visibility: hidden !important; } /* お問い合わせページでのみ表示 */ body.page-template-page-contact .grecaptcha-badge { visibility: visible !important; } /* ========================================================================== Contact Form 7 カスタムスタイル ========================================================================== */ /* フォームフィールド共通スタイル */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form textarea, .wpcf7-form select { width: 100%; padding: 0.75rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.5rem; font-size: 1rem; transition: all 0.3s ease; background-color: #ffffff; } .wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form input[type="url"]:focus, .wpcf7-form input[type="tel"]:focus, .wpcf7-form input[type="number"]:focus, .wpcf7-form input[type="date"]:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: #F54368; box-shadow: 0 0 0 3px rgba(245, 67, 104, 0.1); } /* テキストエリア */ .wpcf7-form textarea { min-height: 120px; resize: vertical; } /* セレクトボックス */ .wpcf7-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5rem 1.5rem; padding-right: 2.5rem; } /* ラジオボタンとチェックボックス */ .wpcf7-form input[type="radio"], .wpcf7-form input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; border: 2px solid #D1D5DB; cursor: pointer; vertical-align: middle; flex-shrink: 0; } .wpcf7-form input[type="radio"]:checked, .wpcf7-form input[type="checkbox"]:checked { background-color: #F54368; border-color: #F54368; } /* ラジオボタングループのスタイル */ .wpcf7-form .wpcf7-list-item { display: inline-block; margin: 0 1rem 0.5rem 0; } .wpcf7-form .wpcf7-list-item label { display: flex; align-items: center; cursor: pointer; padding: 0.5rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.5rem; transition: all 0.3s ease; } .wpcf7-form .wpcf7-list-item label:hover { border-color: #F54368; background-color: #FFF1F2; } .wpcf7-form .wpcf7-list-item input:checked + span { color: #F54368; font-weight: 600; } .wpcf7-form .wpcf7-list-item-label { line-height: 1.25rem; vertical-align: middle; } /* 送信ボタン */ .wpcf7-form input[type="submit"] { display: inline-block; width: 100%; max-width: 300px; min-width: 200px; padding: 1rem 2rem; background: linear-gradient(135deg, #F54368 0%, #E22652 100%); color: white; font-weight: bold; font-size: 1rem; border: none; border-radius: 9999px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(245, 67, 104, 0.3); white-space: nowrap; } .wpcf7-form input[type="submit"]:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(245, 67, 104, 0.4); } .wpcf7-form input[type="submit"]:active { transform: scale(0.98); } /* バリデーションエラー */ .wpcf7-form .wpcf7-not-valid-tip { color: #DC2626; font-size: 0.875rem; margin-top: 0.25rem; display: block; } .wpcf7-form .wpcf7-not-valid { border-color: #DC2626 !important; } /* 送信結果メッセージ */ .wpcf7-form .wpcf7-response-output { margin: 1.5rem 0; padding: 1rem; border-radius: 0.5rem; border: 2px solid; } /* 初期状態・空の場合は非表示 */ .wpcf7-form .wpcf7-response-output:empty { display: none; } /* CF7 v5.4+: data-status属性による表示制御 */ .wpcf7 form[data-status="sent"] .wpcf7-response-output, .wpcf7 form[data-status="failed"] .wpcf7-response-output, .wpcf7 form[data-status="invalid"] .wpcf7-response-output, .wpcf7 form[data-status="spam"] .wpcf7-response-output { display: block; } /* 旧バージョン互換: クラスが追加された場合も表示 */ .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok, .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng, .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors, .wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked { display: block; } /* 送信成功スタイル */ .wpcf7-form .wpcf7-mail-sent-ok, .wpcf7 form[data-status="sent"] .wpcf7-response-output { background-color: #D1FAE5; border-color: #10B981; color: #065F46; } /* 送信失敗・エラースタイル */ .wpcf7-form .wpcf7-mail-sent-ng, .wpcf7-form .wpcf7-validation-errors, .wpcf7-form .wpcf7-spam-blocked, .wpcf7 form[data-status="failed"] .wpcf7-response-output, .wpcf7 form[data-status="invalid"] .wpcf7-response-output, .wpcf7 form[data-status="spam"] .wpcf7-response-output { background-color: #FEE2E2; border-color: #DC2626; color: #991B1B; } /* スピナー（送信中） */ .wpcf7-form .wpcf7-spinner { margin-left: 1rem; } /* レスポンシブ対応 */ @media (max-width: 768px) { .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form textarea, .wpcf7-form select { font-size: 16px; /* iOS のズームを防ぐ */ } .wpcf7-form .wpcf7-list-item { display: block; margin-bottom: 0.75rem; } .wpcf7-form .wpcf7-list-item label { width: 100%; justify-content: center; } } /* ========================================================================== サークル作品サブ画像ギャラリー ========================================================================== */ /* サブ画像ギャラリーのスクロールバーカスタマイズ */ .sub-image-thumb { cursor: pointer; position: relative; } .sub-image-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.2s ease; pointer-events: none; border-radius: 0.5rem; } .sub-image-thumb:hover::after { background: rgba(0, 0, 0, 0.1); } .sub-image-thumb:active::after { background: rgba(0, 0, 0, 0.2); } /* Webkit系ブラウザのスクロールバースタイル */ .sub-image-thumb::-webkit-scrollbar { height: 6px; } .sub-image-thumb::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; } .sub-image-thumb::-webkit-scrollbar-thumb { background: rgba(245, 67, 104, 0.3); border-radius: 3px; } .sub-image-thumb::-webkit-scrollbar-thumb:hover { background: rgba(245, 67, 104, 0.5); } /* ギャラリーコンテナ */ .overflow-x-auto { scrollbar-width: thin; scrollbar-color: rgba(245, 67, 104, 0.3) rgba(0, 0, 0, 0.05); -webkit-overflow-scrolling: touch; } /* メイン画像のトランジション */ .work-main-image { transition: opacity 0.3s ease-in-out; } /* ========================================================================== ヒーロースライダー ========================================================================== */ .hero-swiper { width: 100%; } /* 高さが不足するスライドのみに適用 */ .hero-swiper .swiper-slide.needs-padding { background: white; }