@charset "UTF-8";
.header {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.header.visible {
  opacity: 1;
}
.link_style01 {
  color: #231815;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  background-color: #fff;
  border: 3px solid #231815;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 6.25rem;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.link_style01:hover {
  color: #fff;
  background-color: #f49700;
  opacity: 1;
}
.link_style02 {
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  background-color: #231815;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding: 1.1875rem 1rem;
  max-width: 100%;
  width: 20rem;
}
.link_style03 {
  color: #18171a;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #231815;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1.1875rem 1rem;
  max-width: 100%;
  width: 19.75rem;
}
.section:not(.section_news) .inner {
  padding-top: 11.875rem;
}
.section.section_news {
  overflow-x: hidden;
}
.section.section_news .inner {
  padding-top: 12.25rem;
}
.section:not(.section_news):not(.section_instagram) .section_title {
  letter-spacing: .05em;
}
.section_sub_title {
  margin-top: 2.125rem;
}
.section_description {
  color: #231815;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 2;
  margin-top: 6.875rem;
}
.section_link_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 4.375rem;
}
.section_link_item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 16.5rem;
}
.section_link_item.small {
  margin-bottom: 2.5rem;
}
.section_link_item.small + .small {
  margin-left: 1.5rem;
}
.section_image {
  width: 94.375rem;
}
.section:nth-of-type(odd) .section_image {
  float: right;
}
.section:nth-of-type(even) .section_image {
  float: left;
}
.section_image::after {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  margin-bottom: -2.5rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
.pets .section_image::after {
  background-image: url(../images/common/icon/tag/tag_icon_pets.svg);
  width: 14.875rem;
  height: 6.25rem;
}
.partner .section_image::after {
  background-image: url(../images/common/icon/tag/tag_icon_partner.svg);
  width: 9.375rem;
  height: 13.875rem;
}
.single .section_image::after {
  background-image: url(../images/common/icon/tag/tag_icon_single.svg);
  width: 9.375rem;
  height: 6.25rem;
}
.diy .section_image::after {
  background-image: url(../images/common/icon/tag/tag_icon_diy.svg);
  width: 10.25rem;
  height: 6.25rem;
}
.section_image_wrapper {
  margin-top: 4.625rem;
  position: relative;
}
.section_image_tag {
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .3rem;
  -webkit-text-orientation: upright;
          text-orientation: upright;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-color: #f0f1f2;
  padding: 1.25rem 1rem;
  position: absolute;
  top: 0;
}
.section:nth-of-type(odd) .section_image_tag {
  margin-right: 2.5rem;
  right: 0;
}
.section:nth-of-type(even) .section_image_tag {
  margin-left: 2.5rem;
  left: 0;
}
.home_section_wrapper {
  background-color: #f0f1f2;
  overflow-x: hidden;
  padding-bottom: 12.5rem;
}
.mv {
  opacity: 0;
  position: relative;
  z-index: -1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.mv.visible {
  opacity: 1;
}
.mv_scroll {
  color: #231815;
  font-size: .9375rem;
  letter-spacing: .2em;
  text-align: center;
  opacity: 0;
  margin: 0 0 1rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}
.mv_scroll.visible {
  opacity: 1;
}
.mv_scroll::after {
  content: '';
  background: url(../images/home/mv_arrow.svg) center 0 no-repeat;
  background-size: contain;
  display: block;
  margin: 0 auto;
  width: .4375rem;
  height: 3.75rem;
  -webkit-animation: scroll_animation 1.5s cubic-bezier(1, 0, 0, 1) infinite;
          animation: scroll_animation 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes scroll_animation {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50.1% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}

@keyframes scroll_animation {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50.1% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}
.mv_scroll_label {
  margin: 0 0 .75rem;
  position: relative;
  z-index: 1;
}
.mv_bg,
.mv_section {
  min-height: 1080px;
  height: 100vh;
}
.mv_section {
  position: relative;
}
.mv_bg {
  background: url(../images/home/mv_bg@2x.jpg) center center no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mv_bg_wrapper {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mv_mask {
  background-color: #231815;
  background-image: url(../images/home/mv_mask.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.mv_mask.on_img {
  background-color: transparent;
}
.mv_mask[data-type="vertical"] {
  -webkit-transform-origin: calc(50% - 100vh * 1920 / 1080 * 52.6 / 1920) calc(50% - 100vh * 44.8 / 1080);
          transform-origin: calc(50% - 100vh * 1920 / 1080 * 52.6 / 1920) calc(50% - 100vh * 44.8 / 1080);
}
.mv_mask[data-type="horizontal"] {
  -webkit-transform-origin: calc(50% - 100vw * 52.6 / 1920) calc(50% - 100vw * ( 1080 / 1920 ) * 44.8 / 1080);
          transform-origin: calc(50% - 100vw * 52.6 / 1920) calc(50% - 100vw * ( 1080 / 1920 ) * 44.8 / 1080);
}
.mv_mask_wrapper {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.mv_copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mv_copy img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.clip_container {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.with_icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.section_link_item:not(.small) .with_icon {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section_link_item.small .with_icon {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.with_icon::before {
  content: '';
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
.front.with_icon::before {
  margin: 0 .625rem 0 0;
}
.top.with_icon::before {
  margin: 0 0 .625rem;
}
.tag_dog.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_dog.svg);
  width: 1.75rem;
  height: 2.4375rem;
}
.tag_cat.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_cat.svg);
  width: 2.0625rem;
  height: 2.125rem;
}
.tag_multi.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_multi.svg);
  width: 7.1875rem;
  height: 2.4375rem;
}
.tag_pets.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_pets.svg);
  width: 4.0625rem;
  height: 2.8125rem;
}
.tag_couple.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_couple.svg);
  width: 4.4375rem;
  height: 2.8125rem;
}
.tag_single.with_icon::before {
  background-image: url(../images/common/icon/tag/icon_single.svg);
  width: 2.9375rem;
  height: 2.875rem;
}
#sb_instagram {
  padding-bottom: 0 !important;
}
#sbi_images {
  padding: 0 0 !important;
}
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
.instagram_item {
  margin-left: 1.3125rem !important;
  padding: 0 0 !important;
  width: calc(1 / 3 * 100% - 21 / 16 * 1rem);
  -webkit-transition-property: none;
  transition-property: none;
}
#sb_instagram.sbi_col_3 #sbi_images .sbi_item:nth-of-type(n+4),
.instagram_item:nth-of-type(n+4) {
  margin-top: 1.3125rem !important;
}
.instagram_item_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1.3125rem;
  width: 66.27272727%;
}
#sb_instagram .sbi_photo_wrap,
.instagram_item_link {
  background-color: #f0f1f2;
  display: block;
  padding: 9.00900901% 9.00900901%;
}
.instagram_link_wrapper {
  margin-top: 5rem;
}
.instagram_section_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5.25rem;
}
.instagram_section_header {
  margin-left: 6.90909091%;
}

@media screen and (max-width: 767px) {
  .link_style01 {
    height: 4.28571429rem;
  }
  .link_style02 {
    padding: 1.42857143rem 1rem;
  }
  .link_style03 {
    padding: 1.42857143rem 1rem;
  }
  .section:not(.section_news) .inner {
    padding-top: 2.85714286rem;
  }
  .home_section_wrapper .section + .section {
    margin-top: 2.85714286rem;
  }
  .section.section_news .inner {
    padding-top: 2.85714286rem;
  }
  .section.section_instagram {
    margin-top: 2.85714286rem;
  }
  .section_sub_title {
    margin-top: 1.14285714rem;
  }
  .section_description {
    font-size: 1rem;
    margin-top: 3.92857143rem;
  }
  .section_link_wrapper {
    margin-top: 2.5rem;
  }
  .section_link_item {
    width: 100%;
  }
  .section_link_item.small {
    margin-bottom: 1.42857143rem;
  }
  .section_link_item.small + .small {
    margin-left: 0;
  }
  .section_image {
    margin: 0 -1.42857143rem;
    width: auto;
  }
  .section:nth-of-type(odd) .section_image {
    float: none;
  }
  .section:nth-of-type(even) .section_image {
    float: none;
  }
  .section_image::after {
    margin-bottom: 0;
    left: initial;
    -webkit-transform: translate(0%, 50%);
            transform: translate(0%, 50%);
  }
  .section:nth-of-type(odd) .section_image::after {
    left: 0;
  }
  .section:nth-of-type(even) .section_image::after {
    right: 0;
  }
  .pets .section_image::after {
    width: 8.5rem;
    height: 3.57142857rem;
  }
  .partner .section_image::after {
    width: 5.35714286rem;
    height: 7.92857143rem;
  }
  .single .section_image::after {
    width: 5.35714286rem;
    height: 3.57142857rem;
  }
  .diy .section_image::after {
    width: 5.125rem;
    height: 3.125rem;
  }
  .section_image_wrapper {
    margin-top: 2.28571429rem;
  }
  .section_image_tag {
    font-size: .71428571rem;
    -webkit-writing-mode: lr;
        -ms-writing-mode: lr;
            writing-mode: lr;
    padding: .57142857rem .85714286rem;
    top: initial;
    bottom: 0;
  }
  .section:nth-of-type(odd) .section_image_tag {
    margin-right: 0;
  }
  .section:nth-of-type(even) .section_image_tag {
    margin-left: 0;
  }
  .home_section_wrapper {
    padding-bottom: 2.85714286rem;
  }
  .mv_scroll {
    font-size: .85714286rem;
    margin-bottom: .71428571rem;
  }
  .mv_scroll::after {
    width: .25rem;
    height: 2.14285714rem;
  }
  .mv_scroll_label {
    padding: .71428571rem 1rem;
  }
  .mv_bg,
  .mv_section {
    min-height: initial;
  }
  .mv_section {
    max-height: 66.14285714rem;
  }
  .mv_mask {
    background-image: url(../images/home/mv_mask_sp.svg);
  }
  .mv_mask[data-type="vertical"] {
    -webkit-transform-origin: calc(50% - 100vh * 320 / 568 * 25.45 / 320) calc(50% - 100vh * 20.8 / 568);
            transform-origin: calc(50% - 100vh * 320 / 568 * 25.45 / 320) calc(50% - 100vh * 20.8 / 568);
  }
  .mv_mask[data-type="horizontal"] {
    -webkit-transform-origin: calc(50% - 100vw * 25.4 / 320) calc(50% - 100vw * ( 568 / 320 ) * 20.8 / 568);
            transform-origin: calc(50% - 100vw * 25.4 / 320) calc(50% - 100vw * ( 568 / 320 ) * 20.8 / 568);
  }
  .section_link_item.small .with_icon {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .front.with_icon::before {
    margin-right: .71428571rem;
  }
  .top.with_icon::before {
    margin-bottom: 0;
    margin-right: .71428571rem;
  }
  .tag_dog.with_icon::before {
    width: 1.4rem;
    height: 1.95rem;
  }
  .tag_cat.with_icon::before {
    width: 1.65rem;
    height: 1.7rem;
  }
  .tag_multi.with_icon::before {
    width: 5.75rem;
    height: 1.95rem;
  }
  .tag_pets.with_icon::before {
    width: 3.25rem;
    height: 2.25rem;
  }
  .tag_couple.with_icon::before {
    width: 3.55rem;
    height: 2.25rem;
  }
  .tag_single.with_icon::before {
    width: 2.35rem;
    height: 2.3rem;
  }
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  .instagram_item {
    margin-left: .71428571rem !important;
    width: calc(1 / 3 * 100% - 10 / 14 * 1rem);
  }
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item:nth-of-type(n+4),
  .instagram_item:nth-of-type(n+4) {
    margin-top: .71428571rem !important;
  }
  .instagram_item_wrapper {
    margin-left: -.71428571rem;
    width: auto;
  }
  .instagram_link_wrapper {
    margin-top: 1.42857143rem;
  }
  .instagram_section_content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 2.85714286rem;
  }
  .instagram_section_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 0;
    margin-top: 2.85714286rem;
  }
}
