@charset "UTF-8";
.l-hamburger {
  position: fixed;
  right: 0;
  z-index: 9;
}
.l-hamburger .l-hamburger__inner {
  text-align: right;
  position: relative;
  background-color: #136a8d;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.l-hamburger .l-hamburger__button {
  width: 2rem;
  aspect-ratio: 1/1;
  position: relative;
  z-index: 12;
  cursor: pointer;
  transition: 0.25s;
  background-color: transparent;
  border: none;
}
.l-hamburger .l-hamburger__button .l-hamburger__button--border {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  top: 92%;
  left: 50%;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.l-hamburger .l-hamburger__button .l-hamburger__button--border::before,
.l-hamburger .l-hamburger__button .l-hamburger__button--border::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.l-hamburger .l-hamburger__button .l-hamburger__button--border::before {
  transform: translateY(-7px);
}
.l-hamburger .l-hamburger__button .l-hamburger__button--border::after {
  transform: translateY(5px);
}
.l-hamburger .l-hamburger__button.is-active {
  width: 2.3rem;
}
.l-hamburger .l-hamburger__button.is-active .l-hamburger__button--border {
  background-color: transparent;
}
.l-hamburger
  .l-hamburger__button.is-active
  .l-hamburger__button--border::before {
  transform: translateX(3%) translateY(-26%) rotate(45deg);
  height: 1px;
}
.l-hamburger
  .l-hamburger__button.is-active
  .l-hamburger__button--border::after {
  transform: translateX(0%) translateY(-50%) rotate(-45deg);
  height: 1px;
}
.l-hamburger .l-hamburger__menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 0px;
  transition: 0.3s ease;
  width: 375px;
  max-width: 500px;
  z-index: 11;
  top: 0;
}
.l-hamburger .l-hamburger__menu.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.l-hamburger .l-hamburger__menu .l-hamburger__menu__inner {
  position: relative;
  z-index: 10;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list {
  padding: 3rem 0;
  overflow-y: scroll;
  height: 56rem;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__heading {
  text-align: center;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__gridBox {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "A B";
  gap: 3rem;
  align-items: center;
  padding: 0 5rem;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__gridBox
  .l-hamburger__menu__item.hamburger__menu-leftArea {
  grid-area: A;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__gridBox
  .l-hamburger__menu__item.hamburger__menu-rightArea {
  grid-area: B;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__gridBox
  .l-hamburger__menu__item
  .l-hamburger__menu__itemimg
  img {
  aspect-ratio: 240/340;
}
.l-hamburger
  .l-hamburger__menu
  .l-hamburger__menu__inner
  .l-hamburger__menu__list
  .l-hamburger__menu__gridBox
  + .l-hamburger__menu__gridBox {
  margin-top: 1.5rem;
}
.l-hamburger .l-hamburger__menu__background {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("/base/pc/store/special/tanabataaccessories/2026/img/common/background_sp.webp");
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}
@media screen and (min-width: 992px) {
  .l-hamburger {
    display: none;
  }
}

.l-backnav {
  display: none;
}
@media screen and (min-width: 992px) {
  .l-backnav {
    display: block;
    position: fixed;
    z-index: 10;
    top: 50%;
    transform: translateY(calc(-50% + 25px))
      translateX(calc(100% + 187.5px + 10px + 30px));
    right: 50%;
  }
}
@media screen and (min-width: 992px) and (min-width: 1200px) {
  .l-backnav {
    transform: translateY(calc(-50% + 25px))
      translateX(calc(100% + 187.5px + 10px + 80px));
  }
}
@media screen and (min-width: 992px) {
  .l-backnav .l-backnav__list .gridBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "leftArea rightArea";
    gap: 3rem;
    align-items: start;
    width: -moz-fit-content;
    width: fit-content;
  }
  .l-backnav .l-backnav__list .gridBox + .gridBox {
    margin-top: 5rem;
  }
  .l-backnav .l-backnav__list .gridBox .l-backnav__item a.l-backnav__itemLink {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
  }
  .l-backnav
    .l-backnav__list
    .gridBox
    .l-backnav__item
    a.l-backnav__itemLink
    .Path__waku {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 0px;
    left: 0;
  }
  .l-backnav
    .l-backnav__list
    .gridBox
    .l-backnav__item
    a.l-backnav__itemLink
    .Path__waku._expansion {
    width: 107%;
  }
  .l-backnav
    .l-backnav__list
    .gridBox
    .l-backnav__item
    a.l-backnav__itemLink
    .mask {
    transition: transform 0.5s;
    transform-origin: center;
  }
}
@media screen and (min-width: 992px) and (any-hover: hover) {
  .l-backnav
    .l-backnav__list
    .gridBox
    .l-backnav__item
    a.l-backnav__itemLink:hover
    .mask {
    transform: scale(1.1);
  }
}
@media screen and (min-width: 992px) {
  .l-backnav .l-backnav__list .gridBox .l-backnav__item.leftArea {
    grid-area: leftArea;
  }
  .l-backnav .l-backnav__list .gridBox .l-backnav__item.rightArea {
    grid-area: rightArea;
  }
}

.l-backImageLogo {
  position: relative;
  display: none;
}
.l-backImageLogo a {
  display: block;
}
.l-backImageLogo .person {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-30%);
  z-index: -1;
}
@media screen and (min-width: 992px) {
  .l-backImageLogo {
    display: block;
    position: fixed;
    aspect-ratio: 294/327;
    overflow: hidden;
    width: 290px;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% + 13px)) translateX(calc(-100% - 210px));
  }
  .l-backImageLogo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    pointer-events: none;
    inset: 0;
  }
  .l-backImageLogo .person {
    max-width: 110px;
    transform: translateX(-50%) translateY(-35%);
  }
}
@media screen and (min-width: 992px) and (min-width: 1200px) {
  .l-backImageLogo .person {
    max-width: 110px;
    transform: translateX(-50%) translateY(-35%);
  }
}
@media screen and (min-width: 992px) and (min-width: 1200px) {
  .l-backImageLogo {
    width: 330px;
    transform: translateY(calc(-50% + 13px)) translateX(calc(-100% - 220px));
  }
}

.l-backImage {
  position: fixed;
  aspect-ratio: 1200/720;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .l-backImage {
    display: none;
  }
}

#page_top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  cursor: pointer;
  transition: 0.3s;
  mix-blend-mode: multiply;
  /* デフォルト非表示 */
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}
@media screen and (min-width: 992px) {
  #page_top {
    bottom: 40px;
    right: 23%;
  }
}
#page_top {
  /* スクロールされたときに適用されるCSS */
}
#page_top.visible {
  opacity: 1;
  visibility: visible;
}
#page_top .peg_top_btn {
  display: block;
}
#page_top .peg_top_btn img {
  max-width: 60px;
}
#page_top:hover {
  opacity: 0.7;
}

.stars {
  position: relative;
  width: 100%;
  height: inherit;
  background-color: #0c021d;
  overflow: hidden;
}

.star {
  position: absolute;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.2);
  opacity: 0;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.stars2 {
  position: relative;
  width: 100%; /* 星空の横幅 */
  height: auto; /* 星空の縦幅 */
  background-color: #263061;
  overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}
.stars2 .star {
  position: absolute;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.2);
  opacity: 0;
  animation: twinkle 3s infinite;
}

* {
  font-size: 10px;
}

body {
  font-family: YuGothic, "Yu Gothic", sans-serif;
}

.tks-theme-com-simple-page__header,
.tks-theme-com-simple-page__footer {
  background-color: #ffffff;
  max-width: 100%;
}

figure {
  margin: 0;
}

#dear-my-happiness * {
  box-sizing: border-box;
}
#dear-my-happiness img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
#dear-my-happiness a {
  text-decoration: none;
}
@media (any-hover: hover) {
  #dear-my-happiness a:hover {
    opacity: 0.7;
  }
}
#dear-my-happiness a {
  transition: opacity 0.25s;
}
#dear-my-happiness.l-wrapper {
  position: relative;
}
#dear-my-happiness .contents {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  line-height: 2;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  #dear-my-happiness .contents {
    max-width: 375px;
  }
}
#dear-my-happiness .contents {
  min-height: 2000px;
}
#dear-my-happiness .contents .titleBox {
  position: relative;
  width: 100%;
  color: #ffffff;
}
#dear-my-happiness .contents .titleBox .title__inner {
  padding: 3.5rem 0 4.5rem;
}
#dear-my-happiness .contents .titleBox .title__inner .title__category__Number {
  width: 128px;
  margin: 0 auto;
  padding-bottom: 4rem;
}
#dear-my-happiness .contents .titleBox .title__inner .title__category__Name {
  width: 95px;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}
#dear-my-happiness .contents .titleBox .title__inner .title__category__Text {
  margin: 0 auto;
  width: 300.5px;
}
#dear-my-happiness .contents .sabtitleBox {
  margin-top: 5rem;
}
#dear-my-happiness .contents .sabtitleBox .sabtitleBox__category {
  width: 190px;
  margin: 5rem auto 0;
}
#dear-my-happiness .contents .sabtitleBox .sabtitleBox__category__ReadText {
  margin-top: 5rem;
  padding: 0 2.8rem;
  font-size: 1.5rem;
  color: #263061;
  font-family: serif, sans-serif;
  font-weight: bold;
}
#dear-my-happiness .contents .coordinateBox + .coordinateBox {
  margin-top: 7.5rem;
}
#dear-my-happiness .contents .coordinateBox {
  margin-top: 5rem;
}
#dear-my-happiness .contents .coordinateBox .coordinate__head {
  width: 318.30715px;
  margin: 0 auto 4rem;
}
#dear-my-happiness .contents .coordinateBox .coordinate__head {
  position: relative;
}
#dear-my-happiness .contents .coordinateBox .coordinate__copy {
  margin-top: 5rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__copy
  .coordinate__copy__txt {
  padding: 0 2.8rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #263061;
}
#dear-my-happiness .contents .coordinateBox .item__detail {
  margin-top: 4rem;
  padding: 0 2.8rem;
}
#dear-my-happiness .contents .coordinateBox .item__detail .item__detail_txt {
  font-size: 1.4rem;
  line-height: 1.5;
}
#dear-my-happiness .contents .coordinateBox .item__detail img {
  width: -moz-fit-content;
  width: fit-content;
}
#dear-my-happiness .contents .coordinateBox .item__detail .OLSbtn {
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-top: 0.5rem;
}
#dear-my-happiness .contents .coordinateBox .item__detail .OLSbtn p {
  cursor: pointer;
  width: 16rem;
  background-color: #263061;
  color: #ffffff;
  border: solid 1px #263061;
  padding: 1.3rem 2.7rem;
  text-align: center;
  border-radius: 80px;
  line-height: 0;
  font-size: 1.3rem;
  transition: all 0.6s ease;
}
@media (any-hover) {
  #dear-my-happiness .contents .coordinateBox .item__detail .OLSbtn p:hover {
    background-color: #ffffff;
    color: #263061;
  }
}
#dear-my-happiness .contents .coordinateBox .item__detail .item__detail__set {
  line-height: 1.4;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .item__detail
  .item__detail__set
  + .item__detail__set {
  margin-top: 1rem;
}
#dear-my-happiness .contents .coordinateBox .item__detail .targetStores {
  font-size: 1.4rem;
  color: #697cda;
  font-weight: bold;
}
#dear-my-happiness .contents .coordinateBox .coordinate__items {
  margin-top: 7.5rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__heading {
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid {
  margin-top: 3rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner {
  padding-left: 2.7rem;
  padding-right: 2.7rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner
  .gridBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "L R";
  gap: 2rem;
  align-items: start;
  justify-content: center;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner
  .gridBox
  .item__txt {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-top: 1rem;
  letter-spacing: -0.05em;
  margin-bottom: 0;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner
  .gridBox
  .item__txtLink {
  color: #697cda;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner
  .gridBox
  + .gridBox {
  margin-top: 4rem;
}
#dear-my-happiness
  .contents
  .coordinateBox
  .coordinate__items
  .coordinate__items__grid
  .coordinate__items__grid__inner
  .gridBox
  div
  img {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
#dear-my-happiness .contents .coordinateBox .coordinate__items .OLSbtn {
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-top: 0.5rem;
}
#dear-my-happiness .contents .coordinateBox .coordinate__items .OLSbtn p {
  cursor: pointer;
  width: 16rem;
  background-color: #263061;
  color: #ffffff;
  border: solid 1px #263061;
  padding: 1.3rem 2.7rem;
  text-align: center;
  border-radius: 80px;
  line-height: 0;
  font-size: 1.3rem;
  transition: all 0.6s ease;
}
@media (any-hover) {
  #dear-my-happiness
    .contents
    .coordinateBox
    .coordinate__items
    .OLSbtn
    p:hover {
    background-color: #ffffff;
    color: #263061;
  }
}
#dear-my-happiness .contents .brandContentsBox {
  margin-top: 10rem;
}
#dear-my-happiness .contents .brandContentsBox + .brandContentsBox {
  margin-top: 7.5rem;
}
#dear-my-happiness .contents .brandContentsBox .photo .photo-inner img {
  width: 99%;
  position: relative;
  transform: translateX(2px);
}
#dear-my-happiness .contents .brandContentsBox .brandContents__head {
  text-align: center;
}
#dear-my-happiness .contents .brandContentsBox .brandContents__copy {
  margin-top: 5rem;
  margin-bottom: 3rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .brandContents__copy
  .brandContents__copy__txt {
  font-weight: bold;
  font-size: 1.7rem;
  text-align: center;
  line-height: 1.6;
}
#dear-my-happiness .contents .brandContentsBox .line {
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 0;
  bottom: -2px;
}
#dear-my-happiness .contents .brandContentsBox .line2 {
  text-align: center;
  line-height: 0;
}
#dear-my-happiness .contents .brandContentsBox .branditem__container {
  padding-top: 6rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 6rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__name {
  text-align: center;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__img {
  padding-top: 2rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt {
  padding-top: 2rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  p {
  font-size: 1.4rem;
  line-height: 1.5;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  img {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  .branditem__targetStores {
  color: #697cda;
  font-size: 1.2rem;
  font-weight: bold;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  .branditem__OLSbtn {
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-top: 0.5rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  .branditem__OLSbtn
  p {
  cursor: pointer;
  width: 16rem;
  background-color: #263061;
  color: #ffffff;
  border: solid 1px #263061;
  padding: 1.4rem 2.7rem 1.3rem;
  text-align: center;
  border-radius: 80px;
  line-height: 0;
  font-size: 1.3rem;
  transition: all 0.6s ease;
}
@media (any-hover) {
  #dear-my-happiness
    .contents
    .brandContentsBox
    .branditem__container
    .branditem__txt
    .branditem__OLSbtn
    p:hover {
    background-color: #ffffff;
    color: #263061;
  }
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  .branditem__OLSbtn
  + .branditem__targetStores {
  margin-top: 1rem;
}
#dear-my-happiness
  .contents
  .brandContentsBox
  .branditem__container
  .branditem__txt
  .branditem__OLSbtn
  + p {
  margin-top: 1rem;
}
#dear-my-happiness .contents .commonPartsBox {
  margin-top: 10rem;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .carouselBanner__txt {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
#dear-my-happiness .contents .commonPartsBox .carouselBanner .splide {
  margin-top: 7.5rem;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  transform: scale(0.8);
  transition: 0.7s;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__slide {
  width: 65% !important;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__slide.is-active
  .splide__content {
  transform: scale(1);
  z-index: 1;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__pagination__page {
  background: #ffffff;
  border: 1px solid #136a8d;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__pagination__page.is-active {
  background: #136a8d;
  transform: scale(1);
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .carouselBanner
  .splide
  .splide__pagination {
  bottom: -4em;
}
#dear-my-happiness .contents .commonPartsBox .accessoriesBanner {
  margin-top: 10.9rem;
  text-align: center;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .accessoriesBanner
  .accessoriesBanner__txt {
  width: 308.09155px;
}
#dear-my-happiness
  .contents
  .commonPartsBox
  .accessoriesBanner
  .accessoriesBanner__img {
  width: 310.5px;
  margin-top: 3rem;
}
#dear-my-happiness .contents .commonPartsBox .TopLincButton {
  margin-top: 7.5rem;
  margin-bottom: 4rem;
}
#dear-my-happiness .contents .commonPartsBox .TopLincButton .TopLink {
  color: #000000;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  display: block;
  padding: 8px 65px;
  text-align: center;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.1rem;
  position: relative;
  min-width: 200px;
  border: 1px solid #000000;
  transition: opacity 0.25s;
}
#dear-my-happiness .contents .commonPartsBox .TopLincButton .TopLink span {
  font-size: 14px;
  display: block;
  transition: opacity 0.25s;
}
#dear-my-happiness .contents .commonPartsBox .TopLincButton .TopLink::before {
  content: "";
  position: absolute;
  width: 41px;
  aspect-ratio: 1/1;
  left: -23px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/base/pc/store/special/tanabataaccessories/2026/img/common/arrow-left.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.25s, transform 0.25s;
}
@media (any-hover: hover) {
  #dear-my-happiness
    .contents
    .commonPartsBox
    .TopLincButton
    .TopLink:hover::before {
    transform: translateX(-10px) translateY(-50%);
    opacity: 0.8;
  }
}
#dear-my-happiness {
  /*   ふわっと表示 start*/
}
#dear-my-happiness .effFI {
  opacity: 0;
}
#dear-my-happiness .effFI.effanm {
  animation: effFI 2.5s both;
}
@keyframes effFI {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#dear-my-happiness .js-animation {
  position: relative;
  overflow: hidden;
}
#dear-my-happiness .js-animation::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #263061;
  transform: translatex(-100%);
}
#dear-my-happiness .js-animation .photo-inner {
  opacity: 0;
}
#dear-my-happiness .js-animation.show::before {
  animation: showMask 1s forwards;
}
#dear-my-happiness .js-animation.show .photo-inner {
  animation: showElements 0.01s 0.6s forwards;
}
@keyframes showMask {
  0% {
    transform: translatey(100%);
  }
  45%,
  50% {
    transform: translate(0%);
  }
  100% {
    transform: translatey(-100%);
  }
}
@keyframes showElements {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} /*# sourceMappingURL=common.css.map */