@charset "utf-8";

/* Base */

#wrapper {
  background: #f1f7ff;
}

.lp5year {
  position: relative;
  overflow-x: clip;
}

.lp-main {
  position: relative;
  z-index: 2;
}

.lp-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  --lp-inner-top-transparent: 0px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--lp-inner-top-transparent),
    #F1F7FF var(--lp-inner-top-transparent),
    #F1F7FF 100%
  );
}

.lp-section picture,
.lp-section img {
  display: block;
  width: 100%;
  height: auto;
}

/* Header/Menu */
.lp5year #hd {
  top: 20px;
}

@media (max-width: 481px) {
  .sp-menu {
    right: 15px;
    top: 20px;
  }
}

.lp5year #hd .inner-hd {
  width: 69%;
  max-width: 883px;
}

/* Hamburger Menu */
.lp5year #hd .hd-ctn .menu div span,
.lp5year .sp-menu div span {
  background: #0078BE;
  width: 32px;
  height: 3px;
  border-radius: 1.5px;
}

@media (max-width: 481px) {
  .lp5year #hd .hd-ctn .menu div span,
  .lp5year .sp-menu div span {
    background: #0078BE;
    width: 26px;
    height: 2.5px;
    border-radius: 1.5px;
  }
}

/* PC */
.lp5year #hd .hd-ctn .menu div span:nth-child(1) {
  top: 12px;
}
.lp5year #hd .hd-ctn .menu div span:nth-child(2) {
  top: 22px;
}
.lp5year #hd .hd-ctn .menu div span:nth-child(3) {
  top: 32px;
}

/* SP */
.lp5year .sp-menu div span:nth-child(1) {
  top: 0;
}
.lp5year .sp-menu div span:nth-child(2) {
  top: 8px;
}
.lp5year .sp-menu div span:nth-child(3) {
  top: 16px;
}

/* Close Animation - PC */
.lp5year #hd .hd-ctn:hover .menu div span:nth-child(1) {
  transform: translateY(10px) rotate(225deg);
}
.lp5year #hd .hd-ctn:hover .menu div span:nth-child(3) {
  transform: translateY(-10px) rotate(-225deg);
}

/* Close Animation - SP */
.lp5year .sp-menu.active div span:nth-child(1) {
  transform: translate(-50%, 8px) rotate(315deg);
}
.lp5year .sp-menu.active div span:nth-child(3) {
  transform: translate(-50%, -8px) rotate(-315deg);
}

.lp5year #hd .hd-ctn .menu {
  cursor: pointer;
}

.lp5year #hd .hd-ctn nav ul {
  white-space: nowrap;
}

.lp5year #hd .hd-ctn:hover nav {
  width: 530px;
}

.lp5year #hd .hd-ctn nav ul li a:hover {
  color: #0078BE;
}
.lp5year #hd .hd-ctn nav ul li a:hover svg .st0 {
  fill: #0078BE;
}
