/* hero */
.hero__photo {
  margin: 0 21px;
  height: 280px;
  overflow: hidden;
  border-radius: 8px 0 0 8px
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero__copy {
  position: relative;
  padding: 35px 49px 0;
  height: 246px
}
.hero h1 {
  color: #ea5a8a;
  font: 400 32px/1.5 var(--serif);
  letter-spacing: .03em;
  font-weight: 500;
}
.hero-title__line {
  display: block;
  opacity: 0;
  filter: blur(6px);
  clip-path: inset(0 100% 0 0);
  transform: translateY(0.45em);
  animation: hero-title-reveal 1.15s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero-title__line:nth-child(2) {
  animation-delay: 0.2s;
}
.hero-title__line:nth-child(3) {
  animation-delay: 0.4s;
}
.hero-title__line:nth-child(4) {
  animation-delay: 0.6s;
}
@keyframes hero-title-reveal {
  to {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title__line {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    animation: none;
  }
}
.hero__character {
  position: absolute;
  top: 112px;
  right: 47px;
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(0.5em) scale(0.75) rotate(-5deg);
  animation: hero-character-reveal 0.8s 1.85s cubic-bezier(.34, 1.56, .64, 1) forwards
}
@keyframes hero-character-reveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0)
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__character {
    opacity: 1;
    transform: none;
    animation: none
  }
}
/* message */
.message {
  position: relative;
  min-height: 328px;
  padding: 0 49px
}
.message__body {
  width: 300px;
  color: #111;
  font: 400 11px/1.9 var(--serif);
  letter-spacing: .035em
}
.message__body p {
  display: inline
}
.message__spbr {
  display: none
}
.message__logo {
  position: absolute;
  right: 0;
  bottom: 37px;
  width: 250px
}
.feature-links {
  width: 305px;
  margin: 0 auto 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px
}
.feature-link__image {
  position: relative;
  display: block;
  overflow: hidden
}
.feature-link__image img {
  display: block;
  width: 140px;
  height: 80px;
  object-fit: cover;
  transition: transform 0.25s ease
}

.feature-link:hover {
  opacity: 1
}

.feature-link:hover .feature-link__image img {
  transform: scale(1.03)
}
.feature-link__text {
  display: block;
  margin-top: 9px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transition: color 0.25s ease
}

.feature-link:hover .feature-link__text {
  color: var(--pink)
}

/* campaign */
.campaign {
  background: var(--pale)
}
.campaign__inner {
  width: 318px;
  margin: auto;
  padding: 27px 0 25px
}
.campaign h2 {
  margin-bottom: 17px;
  color: var(--blue);
  font-size: 19px
}
.coupon {
  width: 100%;
  max-width: 760px;
  margin-top: 30px;
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center
}
.coupon h3, .hanger h3 {
  color: var(--pink);
  font-size: 30px;
  line-height: 1.18
}

.hanger h3 {
  text-align: center
}
.coupon>img {
  flex: 0 0 auto;
  width: 120px
}
.coupon__note {
  color: var(--pink);
  font-size: 14px;
  font-weight: 700
}
.campaign__blue {
  margin: 10px 0 8px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700
}

.coupon + .campaign__blue {
  text-align: center
}
.gift {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em
}
.gift p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35
}
.gift img {
  width: 80px
}
.downloads {
  text-align: center;
  margin-top: 40px
}
.downloads>p {
  font-size: 14px;
  font-weight: 700
}
.downloads>div {
  display: flex;
  gap: 24px;
  margin-top: 24px
}
.downloads a:first-child {
  width: 148px
}
.downloads a:last-child {
  width: 132px
}
/*
.hanger {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px dashed var(--pink)
}
*/
.hanger .campaign__blue {
  margin-top: 12px;
  text-align: center
}
.hanger__body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0
}
.hanger__body p {
  font-size: 20px;
  line-height: 1.45
}
.hanger__body img {
  width: 120px;
  margin-left: -5px
}
.campaign-banner {
  height: 76px;
  /*
  margin-top: 12px;
  */
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  background: #fff;
  border-radius: 9px
}
.campaign-banner img {
  width: 52px
}
.campaign-banner p {
  color: var(--pink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35
}
.campaign-detail {
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  line-height: 1.6
}
/* history */
.history {
  padding: 25px 0 39px
}
.history>h2 {
  text-align: center;
  color: var(--blue);
  font-size: 20px;
  line-height: 1.5
}
.history>h2 span {
  font-size: 22px
}
.timeline {
  position: relative;
  width: 378px;
  height: 1265px;
  margin: 13px auto 0
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--pink)
}
.timeline__item {
  position: absolute;
  width: 174px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 1.35
}
.timeline__item h3 {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
  color: var(--pink);
  font-size: 16px;
  line-height: 1.1
}
.timeline__item--left h3::after,
.timeline__item--right h3::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pink)
}
.timeline__item--left h3::after {
  margin-left: 8px
}
.timeline__item--right h3::before {
  margin-right: 8px
}
.timeline__item--left h3 {
  width: calc(100% + 23px)
}
.timeline__item--right h3 {
  width: calc(100% + 23px);
  margin-left: -23px
}
.timeline__item h3 small {
  font-size: 10px
}
.timeline__item p {
  margin-top: 8px
}
.timeline__item p + p {
  margin-top: 0;
}
.timeline__item p::before {
  content: "・";
  margin-left: -8px
}
.timeline__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  width: 9px;
  height: 9px;
  background: var(--pink);
  border-radius: 50%
}
.timeline__item--left {
  left: 0
}
.timeline__item--left::before {
  right: -20px
}
.timeline__item--right {
  right: 0
}
.timeline__item--right::before {
  left: -19px
}
.timeline__item img {
  width: 80px;
  margin: 8px auto 0
}
.timeline__item:nth-child(1) {
  top: 15px
}
.timeline__item:nth-child(2) {
  top: 54px
}
.timeline__item:nth-child(3) {
  top: 145px
}
.timeline__item:nth-child(4) {
  top: 207px
}
.timeline__item:nth-child(5) {
  top: 244px
}
.timeline__item:nth-child(6) {
  top: 310px
}
.timeline__item:nth-child(7) {
  top: 377px
}
.timeline__item:nth-child(8) {
  top: 452px
}
.timeline__item:nth-child(9) {
  top: 470px
}
.timeline__item:nth-child(10) {
  top: 520px
}
.timeline__item:nth-child(11) {
  top: 558px
}
.timeline__item:nth-child(12) {
  top: 602px
}
.timeline__item:nth-child(13) {
  top: 713px
}
.timeline__item:nth-child(14) {
  top: 731px
}
.timeline__item:nth-child(15) {
  top: 821px
}
.timeline__item:nth-child(16) {
  top: 871px
}
.timeline__item:nth-child(17) {
  top: 958px
}
.timeline__item:nth-child(18) {
  top: 1008px
}
.timeline__item:nth-child(19) {
  top: 1081px
}
.timeline__item:nth-child(20) {
  top: 1114px
}
.timeline__item:nth-child(21) {
  top: 1200px
}
.timeline__item:nth-child(22) {
  top: 1218px
}
.timeline__year {
  display: inline-flex;
  align-items: baseline
}
.js .timeline__item::before {
  opacity: 0;
  transform: scale(.25);
  transition: opacity .22s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--reveal-delay, 0ms)
}
.js .timeline__year {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease, transform .48s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 160ms)
}
.js .timeline__item--left h3::after,
.js .timeline__item--right h3::before {
  transform: scaleX(0);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 360ms)
}
.js .timeline__item--left h3::after {
  transform-origin: left center
}
.js .timeline__item--right h3::before {
  transform-origin: right center
}
.js .timeline__item p,
.js .timeline__item img {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(9px);
  transition: opacity .48s ease, transform .58s cubic-bezier(.22, 1, .36, 1), filter .48s ease;
  transition-delay: calc(var(--reveal-delay, 0ms) + 620ms)
}
.js .timeline__item.is-visible::before {
  opacity: 1;
  transform: scale(1)
}
.js .timeline__item.is-visible .timeline__year,
.js .timeline__item.is-visible p,
.js .timeline__item.is-visible img {
  opacity: 1;
  filter: none;
  transform: none
}
.js .timeline__item.is-visible h3::before,
.js .timeline__item.is-visible h3::after {
  transform: scaleX(1)
}
@media (prefers-reduced-motion: reduce) {
  .js .timeline__item::before,
  .js .timeline__year,
  .js .timeline__item h3::before,
  .js .timeline__item h3::after,
  .js .timeline__item p,
  .js .timeline__item img {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none
  }
}

/* desktop composition based on 1280px comp */
.hero {
  position: relative;
  height: clamp(700px, 50vw, 800px);
}
.hero__photo {
  position: absolute;
  top: 96px;
  left: 32.58%;
  right: 0;
  width: auto;
  height: clamp(600px, 40vw, 700px);
  margin: 0;
  border-radius: 24px 0 0 0
}
.hero__copy {
  position: static;
  height: auto;
  padding: 0
}
.hero h1 {
  position: absolute;
  z-index: 2;
  top: 258px;
  left: 16.1%;
  font-size: 48px;
  line-height: 1.72
}
.hero__character {
  top: 618px;
  left: 17.5%;
  right: auto;
  width: 150px;
  height: 150px
}
.message {
  width: 844px;
  min-height: 445px;
  margin: auto;
  padding: 124px 0 0
}
.message__body {
  width: 610px;
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: .06em
}
.message__body p {
  display: block;
  margin-bottom: 1px
}
.feature-links {
  width: 844px;
  margin: 50px auto 120px;
  gap: 64px
}
.feature-link__image img {
  width: 388px;
  height: 222px
}
.feature-link__text {
  font-size: 21px
}
.campaign__inner {
  width: min(930px, calc(100% - 80px));
  padding: 70px 0
}
.campaign h2 {
  font-size: 34px
}
.coupon h3, .hanger h3 {
  font-size: 52px
}
.coupon>img {
  width: 240px
}
.coupon__note, .campaign__blue {
  font-size: 23px
}
.gift p, .hanger__body p {
  font-size: 34px
}
.gift img {
  width: 160px
}
.downloads>p {
  font-size: 24px
}
.downloads>div {
  justify-content: center
}
.downloads a:first-child {
  width: 296px
}
.downloads a:last-child {
  width: 264px
}
.hanger__body img {
  width: 240px
}
.campaign-banner {
  height: 150px
}
.campaign-banner img {
  width: 104px
}
.campaign-banner p {
  font-size: 34px
}
.campaign-detail {
  margin-top: 16px;
  font-size: 16px
}
.history {
  padding: 70px 0
}
.history>h2 {
  font-size: 34px
}
.history>h2 span {
  font-size: 38px
}
.timeline {
  column-gap: 40px
}
@media (min-width: 768px) and (max-width: 1050px) {
  .hero h1 {
    font-size: 38px
  }
  .message, .feature-links {
    width: 76%
  }
  .message__body {
    width: 62%;
    font-size: 12px
  }
  .message__body p br {
    display: none
  }
  .message__logo {
    width: 200px
  }
  .feature-link__image img {
    width: 100%;
    height: auto
  }
}
@media (min-width: 768px) {
  .timeline {
    transform: scale(2);
    transform-origin: top center;
    margin-bottom: 1265px
  }
}

/* mobile */
@media (max-width: 767px) {
  .message__spbr {
    display: inline;
  }

  .hero {
    height: auto;
  }

  .hero__photo {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: 71.8vw;
    margin: 0 5.38vw;
    border-radius: 2.05vw 0 0 2.05vw;
  }

  .hero__copy {
    position: relative;
    height: 63.08vw;
    padding: 8.97vw 12.56vw 0;
  }

  .hero h1 {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    font-size: 8.21vw;
    line-height: 1.5;
  }

  .hero__character {
    top: 28.72vw;
    left: auto;
    right: 12.05vw;
    width: 20.51vw;
    height: 20.51vw;
  }

  .message {
    width: auto;
    min-height: 84.1vw;
    margin: 0;
    padding: 0 12.56vw;
  }

  .message__body {
    display: flow-root;
    width: 76.92vw;
    font-size: 3.1vw;
    line-height: 1.9;
    letter-spacing: 0.035em;
  }

  .message__body p {
    display: inline;
    margin-bottom: 0;
  }

  .message__body p br:not(.message__spbr) {
    display: none;
  }

  .message__logo {
    position: static;
    float: right;
    width: 26.67vw;
    margin: -3.85vw 0 2.05vw 7.69vw;
  }

  .feature-links {
    width: 78.21vw;
    margin: 1em auto 11.79vw;
    gap: 6.41vw;
  }

  .feature-link__image img {
    width: 35.9vw;
    height: 20.51vw;
  }

  .feature-link__text {
    font-size: 3.1vw;
  }

  .campaign__inner {
    width: 80vw;
    padding: 7.95vw 0 8.94vw;
  }

  .campaign h2 {
    font-size: 4.72vw;
    white-space: nowrap;
  }

  .coupon {
    margin-top: 0;
    margin-bottom: 2.56vw;
  }

  .coupon h3,
  .hanger h3 {
    font-size: 6.8vw;
    text-align: left;
    white-space: nowrap;
  }

  .coupon > img {
    width: 29.8vw;
  }

  .coupon__note,
  .campaign__blue {
    font-size: 3vw;
    white-space: nowrap;
  }

  .coupon__note {
    font-size: 2.8vw;
  }

  .coupon + .campaign__blue {
    text-align: left;
  }

  .gift p,
  .hanger__body p {
    font-size: 4.6vw;
    white-space: nowrap;
  }

  .gift img {
    width: 19.9vw;
  }

  .gift {
    gap: 3vw;
  }

  .downloads > p {
    font-size: 3.2vw;
    white-space: nowrap;
  }

  .downloads > div {
    justify-content: center;
    gap: 4vw;
    margin-top: 3.59vw;
  }

  .downloads a:first-child {
    width: 38.5vw;
  }

  .downloads a:last-child {
    width: 34.5vw;
  }

  .downloads > div a {
    flex: 0 0 auto;
  }

  .downloads > div img {
    display: block;
    width: 100%;
    height: auto;
  }

  .downloads {
    margin-top: 5vw;
  }
/*
  .hanger {
    margin-top: 7.18vw;
    padding-top: 7.69vw;
  }
*/

  .hanger .campaign__blue {
    margin-top: 3.08vw;
    text-align: left;
  }

  .hanger__body {
    justify-content: space-between;
    margin: 2vw 0 5.64vw;
  }

  .hanger__body img {
    width: 29.8vw;
  }

  .campaign-banner {
    height: 18.9vw;
    padding: 2.2vw 5vw;
    gap: 4.2vw;
  }

  .campaign-banner img {
    width: 12.9vw;
  }

  .campaign-banner p {
    font-size: 4vw;
    white-space: nowrap;
  }

  .campaign-detail {
    margin-top: 2vw;
    font-size: 2.6vw;
  }

  .history {
    padding: 6vw 6vw 10vw;
  }

  .history > h2 {
    font-size: 4.5vw;
    white-space: nowrap;
  }

  .history > h2 span {
    font-size: 5.2vw;
  }

  .timeline {
    display: block;
    width: 88vw;
    height: 294.47vw;
    margin: 3.03vw auto 0;
  }

  .timeline > .timeline__item {
    position: absolute;
    width: 40.5vw;
    padding: 0 1.63vw;
    font-size: 2.33vw;
  }

  .timeline__item h3 {
    font-size: 3.72vw;
  }

  .timeline__item h3 small {
    font-size: 2.33vw;
  }

  .timeline__item--left h3 {
    width: calc(100% + 5.36vw);
  }

  .timeline__item--right h3 {
    width: calc(100% + 5.36vw);
    margin-left: -5.36vw;
  }

  .timeline__item--left h3::after {
    margin-left: 1.86vw;
  }

  .timeline__item--right h3::before {
    margin-right: 1.86vw;
  }

  .timeline__item--left h3::after,
  .timeline__item--right h3::before {
    position: relative;
    top: 0.5vw;
  }

  .timeline__item p {
    margin-top: 1.86vw;
    font-size: 3.1vw;
  }

  .timeline__item p::before {
    margin-left: -1.86vw;
  }

  .timeline__item::before {
    top: 1.43vw;
    width: 2.1vw;
    height: 2.1vw;
  }

  .timeline__item--left::before {
    right: -4.55vw;
  }

  .timeline__item--right::before {
    left: -4.55vw;
  }

  .timeline__item img {
    width: 18.62vw;
    margin-top: 1.86vw;
  }

  .timeline__item:nth-child(1) { top: 3.49vw; }
  .timeline__item:nth-child(2) { top: 12.57vw; }
  .timeline__item:nth-child(3) { top: 33.76vw; }
  .timeline__item:nth-child(4) { top: 48.19vw; }
  .timeline__item:nth-child(5) { top: 56.80vw; }
  .timeline__item:nth-child(6) { top: 72.17vw; }
  .timeline__item:nth-child(7) { top: 87.77vw; }
  .timeline__item:nth-child(8) { top: 105.23vw; }
  .timeline__item:nth-child(9) { top: 109.42vw; }
  .timeline__item:nth-child(10) { top: 125.06vw; }
  .timeline__item:nth-child(11) { top: 129.93vw; }
  .timeline__item:nth-child(12) { top: 140.15vw; }
  .timeline__item:nth-child(13) { top: 165.99vw; }
  .timeline__item:nth-child(14) { top: 192.18vw; }
  .timeline__item:nth-child(15) { top: 191.17vw; }
  .timeline__item:nth-child(16) { top: 202.77vw; }
  .timeline__item:nth-child(17) { top: 223.03vw; }
  .timeline__item:nth-child(18) { top: 234.67vw; }
  .timeline__item:nth-child(19) { top: 251.67vw; }
  .timeline__item:nth-child(20) { top: 259.39vw; }
  .timeline__item:nth-child(21) { top: 279.37vw; }
  .timeline__item:nth-child(22) { top: 283.56vw; }

}