/* ==============================
   カスタマイズ用変数
============================== */
:root {
  --spinner-size: 65px;
  --spinner-color: #6CA8E0;
  --company-name-color: #6B7280;
  --background-color: #D7DEE6;
  --animation-duration: 2s;
  --spinner-display-time: 2s; /* ← 表示時間を変更 */
}

/* ==============================
   ローディング全体
============================== */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--background-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: hide-loader 0.5s ease forwards;
  animation-delay: var(--spinner-display-time);
  z-index: 9999;
}

/* フェードアウト */
@keyframes hide-loader {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ==============================
   会社名
============================== */
.company-name {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: var(--company-name-color);
  letter-spacing: 0.1em;
}

/* ==============================
   スピナー本体
============================== */
.breeding-rhombus-spinner {
  height: var(--spinner-size);
  width: var(--spinner-size);
  position: relative;
  transform: rotate(45deg);
}

.breeding-rhombus-spinner,
.breeding-rhombus-spinner * {
  box-sizing: border-box;
}

.breeding-rhombus-spinner .rhombus {
  height: calc(var(--spinner-size) / 7.5);
  width: calc(var(--spinner-size) / 7.5);
  animation-duration: var(--animation-duration);
  top: calc(var(--spinner-size) / 2.3077);
  left: calc(var(--spinner-size) / 2.3077);
  background-color: var(--spinner-color);
  position: absolute;
  animation-iteration-count: infinite;
}

.breeding-rhombus-spinner .rhombus.child-1 {
  animation-name: child-1;
  animation-delay: 0.1s;
}

.breeding-rhombus-spinner .rhombus.child-2 {
  animation-name: child-2;
  animation-delay: 0.2s;
}

.breeding-rhombus-spinner .rhombus.child-3 {
  animation-name: child-3;
  animation-delay: 0.3s;
}

.breeding-rhombus-spinner .rhombus.child-4 {
  animation-name: child-4;
  animation-delay: 0.4s;
}

.breeding-rhombus-spinner .rhombus.child-5 {
  animation-name: child-5;
  animation-delay: 0.5s;
}

.breeding-rhombus-spinner .rhombus.child-6 {
  animation-name: child-6;
  animation-delay: 0.6s;
}

.breeding-rhombus-spinner .rhombus.child-7 {
  animation-name: child-7;
  animation-delay: 0.7s;
}

.breeding-rhombus-spinner .rhombus.child-8 {
  animation-name: child-8;
  animation-delay: 0.8s;
}

.breeding-rhombus-spinner .rhombus.big {
  height: calc(var(--spinner-size) / 3);
  width: calc(var(--spinner-size) / 3);
  top: calc(var(--spinner-size) / 3);
  left: calc(var(--spinner-size) / 3);
  background-color: var(--spinner-color);
  animation: child-big var(--animation-duration) infinite;
}

/* ==============================
   アニメーション
============================== */
@keyframes child-1 { 50% { transform: translate(-325%, -325%); } }
@keyframes child-2 { 50% { transform: translate(0, -325%); } }
@keyframes child-3 { 50% { transform: translate(325%, -325%); } }
@keyframes child-4 { 50% { transform: translate(325%, 0); } }
@keyframes child-5 { 50% { transform: translate(325%, 325%); } }
@keyframes child-6 { 50% { transform: translate(0, 325%); } }
@keyframes child-7 { 50% { transform: translate(-325%, 325%); } }
@keyframes child-8 { 50% { transform: translate(-325%, 0); } }

@keyframes child-big {
  50% {
    transform: scale(0.5);
  }
}