/**
* メインスタイルシート
* Tailwind CSSベース + カスタムスタイル
*/
/* 基本設定 */
:root {
--color-brand-purple: #7C3AED;
--color-cyan-400: #22d3ee;
--color-cyan-500: #06b6d4;
--color-cyan-600: #0891b2;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* アクセシビリティ: モーション削減 */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* カスタムユーティリティ */
.text-balance {
text-wrap: balance;
}
.brand-purple {
color: var(--color-brand-purple);
}
.bg-brand-purple {
background-color: var(--color-brand-purple);
}
/* アニメーション定義 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
/* スクロールインジケーターアニメーション */
@keyframes scrollDown {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(10px);
opacity: 0.5;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.scroll-dot {
animation: scrollDown 1.5s ease-in-out infinite;
}
/* カスタムグラデーション */
.gradient-text {
background: linear-gradient(135deg, var(--color-cyan-500), var(--color-brand-purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-bg-purple-cyan {
background: linear-gradient(135deg, var(--color-brand-purple), var(--color-cyan-500));
}
/* カードホバーエフェクト */
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* グラスモーフィズム */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* カスタムボタンスタイル */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-weight: 700;
border-radius: 0.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, var(--color-cyan-500), #3b82f6);
color: white;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--color-cyan-600), #2563eb);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3);
}
.btn-outline {
background: transparent;
border: 2px solid currentColor;
}
.btn-outline:hover {
background: currentColor;
color: white;
}
/* セクション共通スタイル */
section {
position: relative;
overflow: hidden;
}
.section-title {
margin-bottom: 3rem;
text-align: center;
}
.section-title h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.section-title h2 {
font-size: 2.5rem;
}
}
/* コンテナ */
.container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* ヒーローセクション */
.hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}
.hero-image.active {
opacity: 1;
transform: scale(1.05);
}
/* レスポンシブイメージ */
img {
max-width: 100%;
height: auto;
}
/* フォーカススタイル */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--color-cyan-500);
outline-offset: 2px;
}
/* プリントスタイル */
@media print {
header,
footer,
.no-print {
display: none !important;
}
body {
font-size: 12pt;
}
a {
text-decoration: underline;
}
a[href^="http"]:after {
content: " (" attr(href) ")";
}
}
/* カスタムスクロールバー（Webkit） */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--color-cyan-500);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-cyan-600);
}
/* ユーティリティクラス */
.aspect-video {
aspect-ratio: 16 / 9;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
/* パルスアニメーション */
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* フェードインアニメーション */
.fade-in {
animation: fadeIn 0.6s ease-out;
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* レスポンシブテキストサイズ */
@media (max-width: 640px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
}
/* WordPressエディタースタイル調整 */
.wp-block {
max-width: 100%;
}
/* アクセシビリティ: スクリーンリーダー専用 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* ヒータイトル縁取り（GSAPのtext-shadowを上書き） */
.hero-title {
  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;
  text-shadow: none !important;
}

/* ヒーロースライドショー（transitionはJS側で制御） */
.hero-slide {
  will-change: opacity, transform;
}

/* 上3下2レイアウト：下段カードを上段グリッドと同サイズに統一 */
.bottom-card-wrap {
  width: 100%;
}

@media (min-width: 768px) {
  .bottom-card-wrap {
    /* 上段3列グリッドと同幅: コンテナ幅の1/3 - gap分 */
    flex: 0 0 calc(33.333% - 1.334rem);
  }
}

/* ===========================
   先輩社員の声 アコーディオン
=========================== */
.voice-accordion {
  border-top: 1px solid #e2e8f0;
  margin-top: 1rem;
}

.voice-accordion-item {
  border-bottom: 1px solid #e2e8f0;
}

.voice-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  gap: 0.5rem;
}

.voice-accordion-btn:hover {
  color: #06b6d4;
}

.voice-accordion-btn .accordion-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  color: #06b6d4;
}

.voice-accordion-btn.open .accordion-icon {
  transform: rotate(180deg);
}

.voice-accordion-btn .accordion-num {
  color: #06b6d4;
  margin-right: 0.25rem;
}

.voice-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.voice-accordion-body.open {
  max-height: 600px;
}

.voice-accordion-body p {
  padding: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.75;
}

/* 詳しく見るボタン＋詳細エリア */
.voice-detail-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.voice-detail-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.voice-detail-body.open {
  max-height: 2000px;
}

.voice-detail-icon.open {
  transform: rotate(180deg);
}

.voice-detail-content {
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 1rem;
}

.voice-detail-section {
  margin-bottom: 1.25rem;
}

.voice-detail-section:last-child {
  margin-bottom: 0;
}

.voice-detail-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.375rem;
}

.voice-detail-text {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.75;
}