@charset "UTF-8";

.page_common_body {
  background-color: #fff;
}
.page_common_body_wrapper{
  position: relative;
  overflow-x: hidden;
}
.page_common_body .vegas-transition-fade-in, .page_common_body .vegas-transition-fade2-in {
  opacity: .16!important;
}
.page_common_slider_wrapper {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .15;
}
.page_common_slider.slick-slider{
  height: 100%;
}
.page_common_slider li{
  z-index: -1 !important;
  height: 100%;
}
.page_common_slider li img{
  width: 100%;
  height: 100%;
}
.page_common_slider .slick-list,
.page_common_slider .slick-track{
  height: 100%;
}
.page_common_bg .vegas-content-scrollable {
  overflow-x: hidden;
}
.page_common_bg_slide {
  position: fixed;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity .3s ease-out, opacity .3s ease-out;
  z-index: -1;
}
.page_common_bg_slide_bk {
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: scroll;
  background-color: rgba(1,1,1,.3);
  opacity: 0;
  transition: opacity .3s ease-out;
  z-index: -1;
}
.page_common_bg_slide_bk::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: calc(50/var(--view-size)*100vw);
  display: block;
  text-align: center;
  height: calc(72/var(--view-size)*100vw);
  line-height: calc(72/50);
  font-family: "Dela Gothic One";
  transition: all .3s ease-out;
  color: #fff;
  z-index: 2;
}
.page_common_circle_bg {
  position: absolute;
  transition: all .3s ease-out;
  z-index: 1;
  border-radius: calc(400/var(--view-size)*100vw) calc(350/var(--view-size)*100vw) calc(500/var(--view-size)*100vw) calc(300/var(--view-size)*100vw);
}
.page_common_circle_bg1 {
  top: calc(-70/var(--view-size)*100vw);
  left: calc(720/var(--view-size)*100vw);
  width: calc(300/var(--view-size)*100vw);
  height: calc(300/var(--view-size)*100vw);
  transform: rotate(10deg);
}
.page_common_circle_bg2 {
  top: calc(180/var(--view-size)*100vw);
  left: calc(400/var(--view-size)*100vw);
  width: calc(200/var(--view-size)*100vw);
  height: calc(200/var(--view-size)*100vw);
  transform: rotate(-10deg);
}
.page_common_circle_bg3 {
  top: calc(550/var(--view-size)*100vw);
  left: calc(1129.77/var(--view-size)*100vw);
  width: calc(300/var(--view-size)*100vw);
  height: calc(300/var(--view-size)*100vw);
  transform: rotate(-30deg);
}
.page_common_circle_bg4 {
  top: calc(980/var(--view-size)*100vw);
  left: calc(320/var(--view-size)*100vw);
  width: calc(250/var(--view-size)*100vw);
  height: calc(250/var(--view-size)*100vw);
  transform: rotate(-10deg);
}
.page_common_circle_bg5 {
  top: calc(1190/var(--view-size)*100vw);
  left: calc(900/var(--view-size)*100vw);
  width: calc(250/var(--view-size)*100vw);
  height: calc(250/var(--view-size)*100vw);
  transform: rotate(-10deg);
}
.page_common_circle_bg6 {
  top: calc(1570/var(--view-size)*100vw);
  left: calc(-185/var(--view-size)*100vw);
  width: calc(500/var(--view-size)*100vw);
  height: calc(500/var(--view-size)*100vw);
  transform: rotate(-30deg);
}
.page_common_circle_bg7 {
  top: calc(2090/var(--view-size)*100vw);
  left: calc(808/var(--view-size)*100vw);
  width: calc(200/var(--view-size)*100vw);
  height: calc(200/var(--view-size)*100vw);
  transform: rotate(25deg);
}

.page_common_section {
  position: relative;
  z-index: 3;
  padding-top: calc(73/var(--view-size)*100vw);
  padding-bottom: calc(20/var(--view-size)*100vw);
}
.page_common_heading {
  padding-left: calc(200/var(--view-size)*100vw);
}
.page_common_copy {
  font-size: calc(18/var(--view-size)*100vw);
  letter-spacing: .35em;
}
.page_common_title {
  /* padding-left: calc(35/var(--view-size)*100vw); */
  position: relative;
  margin-top: calc(8/var(--view-size)*100vw);
  font-size: calc(50/var(--view-size)*100vw);
  letter-spacing: .2em;
  font-family: "Dela Gothic One";
  font-weight: normal;
}
.page_common_title::before {
  /* content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(25/var(--view-size)*100vw);
  height: calc(5/var(--view-size)*100vw);
  background-color: #000; */
}
.page_common_items_wrapper {
  margin-top: calc(85/var(--view-size)*100vw);
}
.page_common_items {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.page_common_item {
  transition: z-index .3s ease-out;
  width: calc(250/var(--view-size)*100vw);
}
.page_common_item2, .page_common_item6, .page_common_item8, .page_common_item18 {
  width: calc(230/var(--view-size)*100vw);
}
.page_common_item13, .page_common_item20 {
  width: calc(240/var(--view-size)*100vw);
}
.page_common_item12, .page_common_item15, .page_common_item19 {
  width: calc(260/var(--view-size)*100vw);
}
.page_common_item9, .page_common_item14 {
  width: calc(280/var(--view-size)*100vw);
}
.page_common_item1 ,.page_common_item2, .page_common_item3 {
  margin-right: calc(73/var(--view-size)*100vw);
}
.page_common_item5, .page_common_item13 {
  margin-left: auto;
}
.page_common_item6 ,.page_common_item7, .page_common_item8 {
  margin-left: calc(80/var(--view-size)*100vw);
}
.page_common_item9 ,.page_common_item10, .page_common_item11 {
  margin-right: calc(70/var(--view-size)*100vw);
}
.page_common_item14 ,.page_common_item15, .page_common_item16 {
  margin-left: calc(73/var(--view-size)*100vw);
}
.page_common_item17 ,.page_common_item18, .page_common_item19 {
  margin-right: calc(73/var(--view-size)*100vw);
}
.page_common_item1,
.page_common_item9,
.page_common_item17{
  margin-left: calc(50/var(--view-size)*100vw);
}
.page_common_item8,
.page_common_item16{
  margin-right: calc(50/var(--view-size)*100vw);
}
.page_common_item1 {
  padding-top: calc(71/var(--view-size)*100vw);
}
.page_common_item2 {
  padding-top: calc(121/var(--view-size)*100vw);
}
.page_common_item3 {
  padding-top: calc(50/var(--view-size)*100vw);
}
.page_common_item5 {
  padding-top: calc(94/var(--view-size)*100vw);
}
.page_common_item6 {
  padding-top: calc(54/var(--view-size)*100vw);
}
.page_common_item7 {
  padding-top: calc(84/var(--view-size)*100vw);
}
.page_common_item8 {
  padding-top: calc(164/var(--view-size)*100vw);
}
.page_common_item9 {
  padding-top: calc(95/var(--view-size)*100vw);
}
.page_common_item10 {
  padding-top: calc(55/var(--view-size)*100vw);
}
.page_common_item11 {
  padding-top: calc(75/var(--view-size)*100vw);
}
.page_common_item12 {
  padding-top: calc(145/var(--view-size)*100vw);
}
.page_common_item13 {
  padding-top: calc(144/var(--view-size)*100vw);
}
.page_common_item14 {
  padding-top: calc(94/var(--view-size)*100vw);
}
.page_common_item15 {
  padding-top: calc(64/var(--view-size)*100vw);
}
.page_common_item16 {
  padding-top: calc(124/var(--view-size)*100vw);
}
.page_common_item17 {
  padding-top: calc(94/var(--view-size)*100vw);
}
.page_common_item18 {
  padding-top: calc(146/var(--view-size)*100vw);
}
.page_common_item19 {
  padding-top: calc(54/var(--view-size)*100vw);
}
.page_common_item20 {
  padding-top: calc(74/var(--view-size)*100vw);
}
.page_common_item_img_wrapper{
  /* border: solid 2px #000; */
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .16);
}
.page_common_item_img_wrapper img {
  position: relative;
  cursor: pointer;
  transition: .3s;
}
@media (hover: hover) {
  .page_common_item_img_wrapper:hover img{
    transform: scale(1.1);
  }
}

/* .page_common_item_img_wrapper:hover ~ .page_common_item_body,
.page_common_item_img_wrapper:hover ~ .page_common_item_body .page_common_item_name {
  color: #fff;
}
.page_common_item_img_wrapper:hover ~ .page_common_item_body .page_common_item_name::before {
  background-color: #fff;
} */
.page_common_item_body {
  padding-top: calc(13/var(--view-size)*100vw);
  text-align: center;
}
.page_common_item_name {
  position: relative;
  /* padding-left: calc(15/var(--view-size)*100vw); */
  font-size: calc(14/var(--view-size)*100vw);
  line-height: calc(17/14);
  color: #000;
  transition: all 0.3s ease-out;
}
.page_common_item_name::before {
  /* content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(10/var(--view-size)*100vw);
  height: 1px;
  background-color: #7D7D7D;
  transition: all 0.3s ease-out; */
}
.page_common_item_title {
  margin-top: calc(6/var(--view-size)*100vw);
  font-size: calc(18/var(--view-size)*100vw);
  line-height: calc(17/14);
  font-weight: 400;
  transition: all 0.3s ease-out;
}

.page_common_hover_img{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
}
.page_common_hover_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page_common_modal{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  display: none;
}
.page_common_modal_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.page_common_modal_bg_hokkori{
  background: rgba(248, 255, 245, .8);
}
.page_common_modal_bg_yuugana{
  background: rgba(245, 253, 255, .8);
}
.page_common_modal_bg_amaging{
  background: rgba(255, 251, 244, .8);
}
.page_common_modal_bg_animalcafe{
  background: rgba(253, 245, 232,.8);
}
.page_common_modal_bg_halloween{
  background: rgba(249, 241, 251,.8);
}
.page_common_modal_img{
  width: 30%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.page_common_modal_img img{
  width: 100%;
  box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.page_common_modal_inner{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: calc(30/var(--view-size)*100vw);
  color: #000;
}
.page_common_modal_name{
  font-size: calc(18/var(--view-size)*100vw);
}
.page_common_modal_title{
  margin-top: calc(10/var(--view-size)*100vw);
  font-size: calc(23/var(--view-size)*100vw);
}

.page_common_modal_close{
  width: calc(35/var(--view-size)*100vw);
  height: calc(35/var(--view-size)*100vw);
  position: relative;
  margin-right: -35%;
  margin-bottom: 3%;
}
.page_common_modal_close:hover{
  cursor: pointer;
}
.page_common_modal_close::before,
.page_common_modal_close::after{
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: #000;
  position: absolute;
  top: calc(15/var(--view-size)*100vw);
  left: 0;
}
.page_common_modal_close::before{
  transform: rotate(45deg);
}
.page_common_modal_close::after{
  transform: rotate(-45deg);
}

@media(max-width: 768px){
  .page_common_bg_slide_bk::after {
    font-size: calc(14/var(--view-size)*100vw);
  }
  .page_common_circle_bg1 {
    top: calc(-47.08/var(--view-size)*100vw);
    left: calc(142.08/var(--view-size)*100vw);
    width: calc(100/var(--view-size)*100vw);
    height: calc(100/var(--view-size)*100vw);
  }
  .page_common_circle_bg2 {
    top: calc(131.12/var(--view-size)*100vw);
    left: calc(88.38/var(--view-size)*100vw);
    width: calc(150/var(--view-size)*100vw);
    height: calc(150/var(--view-size)*100vw);
  }
  .page_common_circle_bg3 {
    top: calc(401.6/var(--view-size)*100vw);
    left: calc(236.6/var(--view-size)*100vw);
    width: calc(200/var(--view-size)*100vw);
    height: calc(200/var(--view-size)*100vw);
  }
  .page_common_circle_bg4 {
    top: calc(686/var(--view-size)*100vw);
    left: calc(-25/var(--view-size)*100vw);
    width: calc(150/var(--view-size)*100vw);
    height: calc(150/var(--view-size)*100vw);
  }
  .page_common_circle_bg5 {
    top: calc(1150.94/var(--view-size)*100vw);
    left: calc(187.06/var(--view-size)*100vw);
    width: calc(180/var(--view-size)*100vw);
    height: calc(180/var(--view-size)*100vw);
  }
  .page_common_circle_bg6 {
    top: calc(1670.75/var(--view-size)*100vw);
    left: calc(-39/var(--view-size)*100vw);
    width: calc(250/var(--view-size)*100vw);
    height: calc(250/var(--view-size)*100vw);
  }
  .page_common_circle_bg7 {
    top: calc(2409.74/var(--view-size)*100vw);
    left: calc(222.26/var(--view-size)*100vw);
    width: calc(180/var(--view-size)*100vw);
    height: calc(180/var(--view-size)*100vw);
  }
  .page_common_section {
    padding-top: calc(44.5/var(--view-size)*100vw);
    padding-bottom: calc(68.9/var(--view-size)*100vw);
  }
  .page_common_heading {
    padding-left: calc(20/var(--view-size)*100vw);
  }
  .page_common_copy {
    font-size: calc(14/var(--view-size)*100vw);
    letter-spacing: .2em;
  }
  .page_common_title {
    /* padding-left: calc(30/var(--view-size)*100vw); */
    font-size: calc(25/var(--view-size)*100vw);
    letter-spacing: .1em;
    line-height: calc(50/25);
    margin-top: 0;
  }
  .page_common_title::before {
    /* width: calc(20/var(--view-size)*100vw);
    height: calc(3/var(--view-size)*100vw);
    transform: translateY(-10%); */
  }
  .page_common_items_wrapper {
    margin-top: calc(18/var(--view-size)*100vw);
  }
  .page_common_item {
    width: calc(172/var(--view-size)*100vw)!important;
    margin-right: 0;
    margin-left: calc(16/var(--view-size)*100vw);
  }
  .page_common_item:nth-child(4n - 3) {
    margin-left: calc(15/var(--view-size)*100vw);
  }
  .page_common_item:nth-child(4n - 1) {
    margin-left: calc(25/var(--view-size)*100vw);
  }
  .page_common_item:nth-child(2n - 1) {
    padding-top: calc(30/var(--view-size)*100vw);
  }
  .page_common_item:nth-child(4n){
    margin-right: calc(15/var(--view-size)*100vw);
  }
  .page_common_item:nth-child(2n) {
    padding-top: calc(50/var(--view-size)*100vw);
  }
  .page_common_item_body {
    padding-top: calc(13/var(--view-size)*100vw);
  }
  .page_common_item_title{
    font-size: calc(16/var(--view-size)*100vw);
  }


  .page_common_modal_close{
    width: calc(25 / var(--view-size)* 100vw);
    height: calc(25 / var(--view-size)* 100vw);
    margin: 0 5% 5% auto;
  }
  .page_common_modal_img{
    width: 90%;
  }
  .page_common_modal_inner{
    margin-top: calc(20/var(--view-size)*100vw);
  }
  .page_common_modal_title{
    font-size: calc(18/var(--view-size)*100vw);
  }
  .page_common_modal_name{
    font-size: calc(16/var(--view-size)*100vw);
  }


  /* @supports (-webkit-touch-callout: none) {
    .page_common_modal {
      height: -webkit-fill-available;
    }
  } */
}