@charset "UTF-8";
/*$base-width: 1400px;*/
.l-page {
  padding-bottom: 0;
}

.p-op {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}
@media screen and (max-width: 767px) {
  .p-op {
    height: 100svh;
  }
}
.p-op-num {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  font-size: 18.8rem;
  font-weight: 200;
  margin: 0 auto;
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .p-op-num {
    font-size: 4.6rem;
  }
}
.p-op-num span {
  display: inline-block;
  width: 11rem;
}
@media screen and (max-width: 767px) {
  .p-op-num span {
    width: 3rem;
  }
}
.p-op-num span:nth-last-of-type(3), .p-op-num span:nth-last-of-type(6) {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .p-op-num span:nth-last-of-type(3), .p-op-num span:nth-last-of-type(6) {
    margin-bottom: 1rem;
  }
}
.p-op .bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.p-op .bg img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: none;
}
.p-op .bg img.is-show {
  display: block;
}

.p-anniversary {
  margin-top: 32.5rem;
  /*margin-top: 16.5rem;*/
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-anniversary {
    margin-top: 16rem;
    /*margin-top: 8rem;*/
  }
}
.p-anniversary-conts {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt {
    width: 100%;
  }
}
.p-anniversary-conts .txt .headline {
  background: #000;
  width: 82.5rem;
  margin: 0 auto 4.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt .headline {
    width: 30rem;
    margin-bottom: 2.5rem;
  }
}
.p-anniversary-conts .txt .headline:before {
  content: "";
  background: linear-gradient(80deg, rgb(0, 0, 0), rgb(255, 97, 97) 8%, rgb(233, 178, 45) 16%, rgb(202, 196, 68) 23%, rgb(179, 200, 73) 29%, rgb(100, 187, 62) 35%, rgb(53, 179, 56) 43%, rgb(71, 140, 161) 50%, rgb(86, 110, 243) 55%, rgb(154, 39, 238) 62%, rgb(100, 95, 242) 68%, rgb(75, 133, 181) 74%, rgb(56, 173, 73) 78%, rgb(192, 202, 75) 83%, rgb(225, 183, 51) 87%, rgb(250, 116, 85) 92%, rgb(0, 0, 0));
  position: absolute;
  left: -500%;
  top: -8%;
  width: 500%;
  height: 110%;
  z-index: 0;
  -webkit-transition: 7s;
  transition: 7s;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
  border-radius: 30% 30% 10% 30%;
  -webkit-filter: blur(6px);
          filter: blur(6px);
}
.p-anniversary-conts .txt .headline:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 1px solid #fff;
  z-index: 0;
}
.p-anniversary-conts .txt .headline img {
  position: relative;
  z-index: 3;
}
.p-anniversary-conts .txt .headline.is-inview:before {
  left: 500%;
}
.p-anniversary-conts .txt .catch {
  width: 67rem;
  margin: 1.3rem auto 0;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt .catch {
    width: 26rem;
  }
}
.p-anniversary-conts .txt .detail {
  margin-top: 16.2rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt .detail {
    margin-top: 4rem;
  }
}
.p-anniversary-conts .txt .detail p {
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 2.7;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt .detail p {
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    line-height: 2.1428571429;
  }
}
.p-anniversary-conts .txt .detail p + p {
  margin-top: 6rem;
}
.p-anniversary-conts .txt .detail .img {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .txt .detail .img {
    display: none;
  }
}
.p-anniversary-conts .txt .detail .img.m-01 {
  right: calc(50% - 58rem);
  top: -2rem;
  width: 13rem;
}
.p-anniversary-conts .txt .detail .img.m-02 {
  left: calc(50% - 64rem);
  top: 6.5rem;
  width: 19.5rem;
}
.p-anniversary-conts .txt .detail .img.m-03 {
  right: calc(50% - 45rem);
  top: 31.5rem;
  width: 15.5rem;
}
.p-anniversary-conts .txt .detail .img.m-04 {
  left: calc(50% - 48rem);
  top: 44.5rem;
  width: 13rem;
}
.p-anniversary-conts .txt .detail .img.m-05 {
  right: calc(50% - 64.5rem);
  top: 70.5rem;
  width: 21.5rem;
}
.p-anniversary-conts .txt .detail .img.m-06 {
  left: calc(50% - 59rem);
  top: 86.2rem;
  width: 23rem;
}
.p-anniversary-conts .img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 59rem;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-anniversary-conts .img {
    width: 100%;
    margin-top: 4rem;
  }
}

.p-history {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 要素を横並び */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  /*&-line {			
  	width: 100%;
  	height: 50%;
  	transform: translateY(50%);			
  	position: relative;
  	top:-100vh;
  	left: 0;
  }*/
}
@media screen and (max-width: 767px) {
  .p-history {
    display: block;
    margin-top: 5rem;
  }
}
.p-history-conts {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
  gap: 10rem;
  padding: 0 0 7vh 8vw;
}
@media screen and (max-width: 767px) {
  .p-history-conts {
    padding: 0;
    height: auto;
    display: block;
  }
}
.p-history .unit {
  width: 75rem;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-history .unit {
    width: 30rem;
    margin: 0 auto;
  }
  .p-history .unit + .unit {
    margin-top: 4rem;
  }
}
.p-history .unit .img {
  position: relative;
  /*.bg {
  	position: absolute;
  	right: -2rem;
  	bottom: -2rem;
  	background: $green;
  	width: 100%;
  	height: 100%;
  	border-radius: 2rem;
  	z-index: -1;
  	opacity: 0;
  	@include mq(m) {
  		border-radius: .8rem;
  		right: -1rem;
  		bottom: -1rem;
  	}
  }*/
}
.p-history .unit p {
  margin-top: 2rem;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-history .unit p {
    font-size: 1.6rem;
  }
}
.p-history .unit.m-line {
  position: absolute;
  left: 50vw;
  top: 50%;
  height: 50%;
  z-index: -1;
  -webkit-transform: translate(0, -50%) !important;
          transform: translate(0, -50%) !important;
  overflow: hidden;
  padding-top: 4rem;
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-history .unit.m-line {
    display: none !important;
  }
}
.p-history .unit.m-line .line {
  width: 166rem;
  -webkit-animation: fuwaline02 15s ease-in-out infinite;
          animation: fuwaline02 15s ease-in-out infinite;
}

.p-countdown {
  margin-bottom: 17rem;
  color: #008080;
}
@media screen and (max-width: 767px) {
  .p-countdown {
    margin: 10rem 0 8rem;
  }
}
.p-countdown-headline {
  font-size: 3.5rem;
  letter-spacing: 0.112em;
  text-align: center;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-countdown-headline {
    font-size: 2.8rem;
  }
}
.p-countdown-catch {
  font-size: 1.9rem;
  letter-spacing: 0.13em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-countdown-catch {
    font-size: 1.5rem;
  }
}
.p-countdown-catch .en {
  font-size: 2.2rem;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 767px) {
  .p-countdown-catch .en {
    font-size: 2rem;
  }
}
.p-countdown-num {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  font-size: 15.8rem;
  font-weight: 300;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-countdown-num {
    font-size: 4.6rem;
    margin-top: 3rem;
  }
}
.p-countdown-num span {
  display: inline-block;
  width: 10rem;
}
@media screen and (max-width: 767px) {
  .p-countdown-num span {
    width: 3rem;
  }
}
.p-countdown-num span:nth-last-of-type(3), .p-countdown-num span:nth-last-of-type(6) {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .p-countdown-num span:nth-last-of-type(3), .p-countdown-num span:nth-last-of-type(6) {
    margin-bottom: 1rem;
  }
}

.p-policy {
  margin: 16rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-policy {
    margin-top: 8rem;
  }
}
.p-policy-unit {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 27.5rem 1fr;
  grid-template-columns: 27.5rem 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid #000;
  padding: 8rem 5rem;
}
@media screen and (max-width: 767px) {
  .p-policy-unit {
    padding: 3rem 0;
    display: block;
  }
}
.p-policy-unit:last-of-type {
  border-bottom: 1px solid #000;
}
.p-policy-unit .headline .ja {
  font-size: 4rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .p-policy-unit .headline .ja {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }
}
.p-policy-unit .headline .en {
  font-size: 2rem;
  color: #008080;
  display: block;
}
@media screen and (max-width: 767px) {
  .p-policy-unit .headline .en {
    font-size: 1.6rem;
    text-align: center;
  }
}
.p-policy-unit .detail {
  font-size: 2.8rem;
  letter-spacing: 0.12em;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .p-policy-unit .detail {
    font-size: 2rem;
    letter-spacing: 0.03em;
    margin-top: 2rem;
    text-align: center;
  }
}

.p-message {
  background: url(../img/passion/bg_message_2504_pc.webp) no-repeat center bottom/cover;
  padding: 6.5rem 0 18rem;
}
@media screen and (max-width: 767px) {
  .p-message {
    padding: 2rem 0 16rem;
    background: #f8f6f5 url(../img/passion/bg_message_2504_sp.webp) no-repeat center bottom/100% auto;
  }
}
.p-message-headline {
  margin: 5rem;
}
@media screen and (max-width: 767px) {
  .p-message-headline {
    margin-bottom: 3rem;
  }
}
.p-message-txt .catch {
  font-size: 3.8rem;
  line-height: 1.7894736842;
  letter-spacing: -0.3rem;
  font-weight: 600;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .p-message-txt .catch {
    font-size: 2rem;
    text-align: center;
  }
}
.p-message-txt .detail p {
  font-size: 1.6rem;
  letter-spacing: -0.055em;
  line-height: 2.525;
}
@media screen and (max-width: 767px) {
  .p-message-txt .detail p {
    font-size: 1.4rem;
    line-height: 2.5;
  }
}
.p-message-txt .name {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  margin-top: 5rem;
  mix-blend-mode: multiply;
}
.p-message-txt .name span {
  font-size: 1.5rem;
}
.p-message-txt .name img {
  display: inline-block;
  width: 10.3rem;
  margin-left: 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-message-txt .name img {
    width: 10rem;
    margin-left: 1.5rem;
  }
}

.js-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  -webkit-animation: fuwaline 5s ease-in-out infinite;
          animation: fuwaline 5s ease-in-out infinite;
  width: 53.8rem;
  height: auto;
}
@media screen and (max-width: 767px) {
  .js-line {
    width: 23rem;
  }
}
.js-line path {
  opacity: 0;
}

@-webkit-keyframes fuwaline {
  50% {
    -webkit-transform: translate(1%, 1%);
            transform: translate(1%, 1%);
  }
}

@keyframes fuwaline {
  50% {
    -webkit-transform: translate(1%, 1%);
            transform: translate(1%, 1%);
  }
}



.anni-logo {
	max-width: 90%;
	width: 75rem;
	margin: 0 auto 22rem;
	position: relative;
}
.anni-logo::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #FFFFFF;
    transition: 500ms;
    animation: shinyshiny 4s ease-in-out;
	animation-iteration-count: 1;
}

@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media screen and (max-width: 767px) {
  .anni-logo {
    margin: 0 auto 10rem;
  }
}

.p-anniversary.exp {
  margin-top: 16.5rem;
}
@media screen and (max-width: 767px) {
  .p-anniversary.exp {
    margin-top: 8rem;
  }
}