/*
Theme Name: Himeji Collection LP
Theme URI: https://example.com/
Author: Himeji Collection
Description: Himeji Collection audition landing page theme.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: himeji-collection-lp
*/

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body.image-lp {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.96) 0 9%, transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(112, 204, 242, 0.5), transparent 30%),
    radial-gradient(circle at 20% 82%, rgba(190, 235, 252, 0.56), transparent 32%),
    linear-gradient(135deg, #f7fdff 0%, #e1f5ff 45%, #c7ebfb 100%);
  color: #09234c;
}

body.image-lp::before,
body.image-lp::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  transform: none;
  animation: none !important;
}

body.image-lp::before {
  opacity: 0.5;
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    linear-gradient(60deg, transparent 45%, rgba(50, 154, 204, 0.2) 46%, rgba(50, 154, 204, 0.2) 50%, transparent 51%),
    linear-gradient(120deg, transparent 45%, rgba(50, 154, 204, 0.16) 46%, rgba(50, 154, 204, 0.16) 50%, transparent 51%);
  background-size: 52px 52px, 42px 42px, 42px 42px;
}

body.image-lp::after {
  opacity: 0.42;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 34%, rgba(255, 255, 255, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 72%, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, 0.34) 47% 49%, transparent 50% 100%);
  background-size: 170px 170px, 132px 132px, 210px 210px, 260px 260px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.image-lp-main {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  margin: 0 auto;
  background: transparent;
  box-shadow: 0 24px 70px rgba(20, 92, 133, 0.18);
}

.image-lp-main > img {
  width: 100%;
  height: auto;
}

.lp-line-cta {
  position: absolute;
  top: var(--cta-y);
  left: 50%;
  z-index: 3;
  display: block;
  width: min(92%, 620px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 20px rgba(19, 84, 41, 0.22));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.lp-line-cta:hover {
  transform: translate(-50%, -52%) scale(1.03);
  filter: drop-shadow(0 18px 24px rgba(19, 84, 41, 0.28));
}

.lp-line-cta img {
  width: 100%;
  height: auto;
}