body.oshiri1104 {
  /* background: url("/assets/img/bg/bg_oshiri1104.jpg") center top; */
  /* background-size: 500px 500px; */
  
  /* background-color: #fdebdd; */
  background-color: #ffeedc;
  background-image: url(/assets/img/oshiri1104/bg_sm.svg);
  background-position: top left, top center;
  background-size: 200px, 105% auto;
  background-repeat: repeat, no-repeat;
  overflow-x: hidden;
}
body.oshiri1104 .tit{
  color: #ed797a;
  text-shadow: 4px 4px 1px #fff, -4px -4px 1px #fff, -3px -4px 1px #fff, -4px 4px 1px #fff, 4px -4px 1px #fff, 4px 0 1px #fff, -4px 0 1px #fff, 0 4px 1px #fff, 0 -4px 1px #fff;
  background:none;
  position: relative;
}
body.oshiri1104 .tit span{
  font-size: 2rem;
  line-height: 1.5;
}
h1.tit:before {
  /* content: "1104"; */
  position: absolute;
  top: -12px;
  font-size: 1.6rem;
  letter-spacing: 27px;
  left: calc(50% - 50px);
  transform: translateX(-50%);
}
.logo-birthday {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 24vw;
  height: auto;
  z-index: 10;
}
.logo-birthday img{
  width: 100%;
}
.link-ttl {
  margin-bottom: -34px;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  background: url(/assets/img/oshiri1104/link-ttl.png) center top no-repeat;
  background-size: contain;
  padding: 12px 0 22px;
  position: relative;
  z-index: 1;
}
.oshiri1104-main{
  position: relative;
  margin-top: 100px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.oshiri1104-main-img{
  width: 100%;
  max-width: 280px;
  display: block;
  margin: 0 auto -15%;
  position: relative;
  z-index: 1;
  /* margin: 0 auto -136px; */
}
.oshiri1104-main-img img{
  width: 100%;
}
.content-oshiri1104{
  font-size: 1.375rem;
  padding-top: 90px;
}
.content-oshiri1104 .txt{
  line-height: 1.8;
  /* font-size: 1.5rem; */
  font-size: min(2.88888vw, 25px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 64vw;
  max-width: 690px; */
  width: 70vw;
  max-width: 730px;
}
.content-oshiri1104 .btn-thisyear{
  margin-bottom: 160px;
}
.content-oshiri1104 .btn-list a:hover,
.btn-thisyear a:hover {
  -webkit-animation: bounce 1s linear;
  animation: bounce 1s linear;
  opacity: 1;
}
.content-oshiri1104 .btn-list{
  -ms-flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.content-oshiri1104 .btn-list li{
  width: calc(100% / 4 - 10px);
  margin: 0 5px 30px;
}
.content-oshiri1104 .btn-list a{
  max-width: 208px;
  height: 52px;
  margin: 0 auto;
  border-radius: 30px;
  background-color: #efa31f;
  box-shadow: 0 6px 1px #aa5a05;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-shadow: 0 6px 1px #aa5a05;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-area{
  border-radius: 40px;
  border: 8px solid rgb(238 153 144);
  position: relative;
  padding: 77px 2% 30px;
  width: 100%;
  background: #fff;
}
.btn-area .txt{
  margin-bottom: 20px;
}
.btn-thisyear a {
  /* background: #f06b40; */
  color: #fff;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;

  max-width: 590px;
  padding: 25px 70px;
  border-radius: 50px;
  background-color: #e6385d;
  box-shadow: 0 10px 0 #894034;
  -webkit-box-shadow: 0 10px 0 #894034;
}
.content-inner{
  padding: 0;
  background: url("/assets/img/oshiri1104/oshiri_bg.png") center top no-repeat;
  background-size: contain;
  text-align: justify;
}

.content-oshiri1104 .inner {
  position: relative;
  padding-top: 55%;
  margin-bottom: 50px;
}

.sp{
  display: none;
}
@media screen and (max-width: 812px) {
  .content-oshiri1104 .txt{
    width: 74vw;
  }
  .content-inner{
    background-size: 124%;
  }
  #main{
    padding: 35px 0 100px 0;
  }
  .content-oshiri1104 .inner{
    margin-bottom: 40px;
    padding-top: 62%;
  }
  .link-ttl{
    font-size: 4.444444vw;
  }
}
@media only screen and (max-width: 768px){
  .sp{
    display: block;
  }
  h1.tit:before{
    top: -5px;
    letter-spacing: 11px;
    left: calc(50% - 37px);
  }
  .content-oshiri1104{
    padding-top: 90px;
    padding-bottom: 30px;
  }
  .content-inner {
    background: url(/assets/img/oshiri1104/oshiri_bg_sp.png) center top no-repeat;
    background-size: cover;
    border-radius:0;
  }
  .content-oshiri1104 .inner{
    padding: 0 3%;
  }
  .content-oshiri1104 .btn-list a{
    max-width: 100%;
    /* border-radius: 0; */
    height: 100%;
    /* box-shadow: none; */
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: 600;
    box-shadow: 0 4px 1px #aa5a05;
    margin: 0 4px;
  }
  .content-oshiri1104 .btn-list li{
    width: calc(100% / 4);
    margin: 0 0 1px;
    min-height: 60px;
    position: relative;
  }
  /* .content-oshiri1104 .btn-list li:before{
    content: "";
    top: 50%;
    right: 0;
    width: 1px;
    height: 30%;
    background-color: #f2e1d5;
    position: absolute;
    transform: translateY(-50%);
  }
  .content-oshiri1104 .btn-list li:last-child:before {
    background: none;
    width: 0;
  } */
  .oshiri1104-main-img{
    width: min(42%, 280px);
    margin: 0 auto -64px;
  }
  .content-oshiri1104 .txt{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
    margin: auto;
    font-size: 1.125rem;
  }
  .btn-area{
    border: 6px solid rgb(238 153 144);
    position: relative;
    padding: 55px 1% 32px;
    margin: auto;
    width: 98%;

  }
  .btn-thisyear a{
    font-size: 1.6rem;
  }
  .content-oshiri1104 .btn-thisyear {
    padding: 0 3%;
    margin-bottom: 140px;
  }
}
.mv__balloon {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  animation-name: mvBalloons;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 1;
}
.mv__balloon:nth-of-type(1) {
  width: min(15%, 120px);
  background-image: url(/assets/img/oshiri1104/balloon-green.svg);
  animation-duration: 5s;
  animation-delay: 0s;
  aspect-ratio: 120 / 135;
  top: -16%;
  left: 19.5%;
}
.mv__balloon:nth-of-type(2) {
  width: min(19.2%, 152px);
  background-image: url(/assets/img/oshiri1104/balloon-yellow.svg);
  animation-duration: 5.5s;
  animation-delay: 0.5s;
  aspect-ratio: 152 / 166;
  top: -12%;
  right: 14.1%;
}
.mv__balloon:nth-of-type(3) {
  width: min(18.9%, 151px);
  background-image: url(/assets/img/oshiri1104/balloon-blue.svg);
  animation-duration: 6s;
  animation-delay: 1s;
  aspect-ratio: 151 / 173;
  top: 17.4%;
  left: 1.7%;
}
.mv__balloon:nth-of-type(4) {
  width: min(14.8%, 118px);
  background-image: url(/assets/img/oshiri1104/balloon-pink.svg);
  animation-duration: 5.2s;
  animation-delay: 1.5s;
  aspect-ratio: 118 / 133;
  top: 26.4%;
  right: 4.7%;
}
.mv__balloon:nth-of-type(5) {
  width: min(14.3%, 114px);
  background-image: url(/assets/img/oshiri1104/balloon-red.svg);
  animation-duration: 5.6s;
  animation-delay: 2s;
  aspect-ratio: 114 / 126;
  top: 63.5%;
  left: 16.7%;
}
.mv.is-animate .mv__balloon:nth-of-type(1) {
  animation-duration: 1s, 5s;
  animation-delay: 4s, 4s;
}
.mv.is-animate .mv__balloon:nth-of-type(2) {
  animation-duration: 1s, 5.5s;
  animation-delay: 4s, 4.5s;
}
.mv.is-animate .mv__balloon:nth-of-type(3) {
  animation-duration: 1s, 6s;
  animation-delay: 4s, 5s;
}
.mv.is-animate .mv__balloon:nth-of-type(4) {
  animation-duration: 1s, 5.2s;
  animation-delay: 4s, 6.5s;
}
.mv.is-animate .mv__balloon:nth-of-type(5) {
  animation-duration: 1s, 5.6s;
  animation-delay: 4s, 7s;
}
@media only screen and (max-width: 768px){

}
@keyframes mvBalloons_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mvBalloons {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(1px, -5px);
  }
  40% {
    transform: translate(-2px, -10px);
  }
  60% {
    transform: translate(2px, -5px);
  }
  70% {
    transform: translate(1px, -4px);
  }
  80% {
    transform: translate(-1px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}