@charset "utf-8";

/**************************************************/
/*** top
**************************************************/

/*** メインビジュアル ***/
.mv_block {
  position: relative;
  width: 100%;
  margin-bottom: 45px;
}
.mv_image > img {
  width: 100%;
}
.mv_box {
  position: absolute;
  /* top: 45px;
  left: 22px; */
  top :min(calc(45px + 45 * (100vw - 375px) / (768 - 375)),90px);
  left: min(calc(22.5px + 22.5 * (100vw - 375px) / (768 - 375)),45px);
}
.mv_buddy {
   /* width: 315px; */
   width: min(315px,42vw);
   margin-bottom: 6px;
}
.mv_copy {
  font-family: fot-tsukubrdgothic-std, sans-serif;
    /* font-size: 12px; */
  font-size: min(calc(12px + 12 * (100vw - 375px) / (768 - 375)),24px);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white),1px 1px 5px var(--white);
}

/** slick **/
.top_mv .slick-dots li button:before {
  font-size: 18px;
}
/**********/

@media screen and (min-width: 768px) {
  .mv_box {
    /* top: 200px;
    left: 140px; */
    top :min(calc(80px + 120 * (100vw - 768px) / (1400 - 768)),200px);
    left: min(calc(50px + 90 * (100vw - 768px) / (1400 - 768)),140px);
  }
  .mv_buddy {
    /* width: 560px; */
    width: min(560px, 40vw);
    margin-bottom: 28px;
  }
  .mv_copy {
    /* font-size: 40px; */
    font-size: min(calc(30px + 10 * (100vw - 768px) / (1400 - 768)),40px);
    font-weight: 700;
    letter-spacing: 0;
  }
}

/**********************************
***  TOP 共通
**********************************/
.top_title_eng {
  font-size : 12px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing : 0.05em;
}
.top_title_eng img {
  width: 12px;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  bottom: 0.1em;
}
.top_title {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 0.8;
}
.top_button {
  border: 1px solid var(--main);
  border-radius: 30px;
  background-color: var(--white);
  width: 200px;
  height: 46px;
  margin: 0 auto;
  transition: all .3s ease;
}
.top_button a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  height: 100%;
}
.top_button a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url(../image/common/button-arrow.svg) no-repeat center/20px;
  width: 20px;
  height: 4.5px;
  transition: all .3s ease;
}
.top_button:hover {
  color: var(--white);
  background-color: var(--main);
}
.top_button:hover a::after {
  background-image: url(../image/common/button-arrow-white.svg)
}

@media screen and (min-width: 768px) {
  .top_title_eng {
    font-size : 23px;
  }
  .top_title_eng img {
    width: 31px;
    margin-right: 7px;
  }
  .top_title {
    font-size : 48px;
    line-height: 1.3;
  }
  .top_button {
    width: 280px;
    height: 60px;
  }
  .top_button a {
    font-size: 22px;
  }
  .top_button a::after {
    right: 20px;
  }
}

/**********************************
***  新着レビュー
**********************************/
.top_review {
  position: relative;
  padding: 12px 0 35px;
}
.top_review .inner {
  max-width: 1088px;
}
.top_review_titleWrap {
  position: relative;
}
.top_review_titleWrap::before,
.top_review_titleWrap::after {
  content: '';
  position: absolute;
  top: 5px;
  background: url(../image/top/top_review_footprints.svg) no-repeat center top;
  width: 28vw;
  height: 84px;
  z-index: -1;
}
.top_review_titleWrap::before {
  left: 0;
}
.top_review_titleWrap::after {
  right: -2px;
}
.top_review_icon {
  width: 31px;
}
.top_review .top_title {
  line-height: 1.2;
}
.top_review_button {
  margin-top: 30px;
}
.top_review_image-dog {
  position: absolute;
  bottom: 5px;
  /* right: 15px; */
  right: 50%;
  transform: translateX(140%);
  width: 120px;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .top_review {
    padding: 90px 0 115px;
  }
  .top_review_titleWrap::before,
  .top_review_titleWrap::after {
    top: -2px;
    width: 287px;
  }
  .top_review_titleWrap::before {
    left: 17px;
  }
  .top_review_titleWrap::after {
    right: 39px;
  }
  .top_review .top_title {
    line-height: 1.75;
  }
  .top_review_button {
    margin-top: 90px;
  }
  .top_review_image-dog {
    bottom: 8px;
    right: 145px;
    transform: unset;
    width: auto;
  }
}

/**********************************
***  検索
**********************************/
.top_search {
  position: relative;
  border: solid var(--main);
  border-width: 4px 0;
  background-color: var(--sub);
  padding: 12px 0 48px;
}
.top_search::before,
.top_search::after {
  content: '';
  position: absolute;
  left: 0;
  background: url(../image/top/line.svg) center/8px;
  width: 100%;
  height: 3px;
}
.top_search::before {
  top: 4px;
}
.top_search::after {
  bottom: 4px;
}
.top_search .top_title_eng img {
  width: 12.5px;
}

.top_search_list {
  display: flex;
  justify-content: center;
  gap: 0 25px;
  margin-top: 20px;
}
.top_search_list li a {
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 50%;
  background-color: var(--main);
  /* width: 280px;
  height: 280px; */
  width: min(calc(100vw/750*280),280px);
  height: min(calc(100vw/750*280),280px);
  transition: opacity .3s ease;
}
.top_search_list li a:hover {
  opacity: 0.85;
}
.top_search_list_image {
  margin-bottom: 12px;
}
.top_search_list li:nth-child(1) .top_search_list_image {
  /* margin-top: 75px; */
  margin-top: min(calc(100vw/750*75),75px);
}
.top_search_list li:nth-child(2) .top_search_list_image {
  /* margin-top: 72px; */
  margin-top: min(calc(100vw/750*72),72px);
}
.top_search_list li:nth-child(1) .top_search_list_image img {
  /* width: 90px; */
  width: min(calc(100vw/750*90),90px);
}
.top_search_list li:nth-child(2) .top_search_list_image img {
  /* width: 100px; */
  width: min(calc(100vw/750*100),100px);
}
.top_search_list_text {
  /* font-size: 24px; */
  font-size: min(calc(100vw/750*24),24px);
  font-weight: bold;
  color: var(--white);
}

@media screen and (min-width: 768px) {
  .top_search {
    border-width: 8px 0;
    padding: 65px 0 85px;
  }
  .top_search::before,
  .top_search::after {
    background-size: auto;
  }
  .top_search::before {
    top: 10px;
  }
  .top_search::after {
    bottom: 10px;
  }
  .top_search .top_title_eng img {
    width: 25px;
  }
  .top_search_list {
    gap: 0 90px;
    margin-top: 40px;
  }
  .top_search_list_image {
    margin-bottom: 25px;
  }
}

/**********************************
***  投稿
**********************************/
.top_post {
  position: relative;
  padding: 37px 0 85px;
}
.top_post .inner {
  max-width: 1042px;
}
.top_post_image-flag {
  position: absolute;
  top: 0;
  right: -5px;
  max-width: 178px;
  width: 55vw;
  height: 163px;
  z-index: -1;
}
.top_post_titleWrap {
  margin-bottom: 25px;
}
.top_post_block {
  margin-top: 17px;
}
.top_post_block_title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}
.top_post_block_title::before {
  content: '';
  display: inline-block;
  background: url(../image/common/footprint-icon.svg) no-repeat center/12.5px;
  width:  12.5px;
  height: 11px;
  margin-right: 5px;
}
.top_post_block_list {
  display: flex;
  gap: 0 6px;
}
.top_post_block_list li {
  flex-basis: calc((100% - 18px)/4);
  border-radius: 5px;
  overflow: hidden;
}
.top_post_block_list li a {
  display: block;
}
.top_post_block_list li a img {
  transition: all .3s ease;
}
.top_post_button {
  margin-top: 38px;
}
.top_post_block_list li a:hover img {
  transform: scale(1.15);
}

@media screen and (max-width: 480px) {
  .top_post_scroll {
    margin-right: -18.5px;
    overflow-x: scroll;
  }
  .top_post_block_list {
    min-width: 424px;
    padding-right: 6px;
  }
}
@media screen and (min-width: 768px) {
  .top_post  {
    padding: 90px 0 195px;
  }
  .top_post_image-flag {
    top: 20px;
    right: 15px;
    max-width: 500px;
    width: 40vw;
  }
  .top_post_titleWrap {
    margin-bottom: 60px;
  }
  .top_post_block {
    margin-top: 55px;
  }
  .top_post_block_title {
    font-size: 28px;
    margin-bottom: 15px;
  }
  .top_post_block_title::before {
    background-size: 25px;
    width: 25px;
    height: 22px;
    margin-right: 10px;
  }
  .top_post_block_list {
    gap: 0 14px;
  }
  .top_post_block_list li {
    flex-basis: calc((100% - 42px)/4);
    border-radius: 16.839px;
  }
  .top_post_button {
    margin-top: 75px;
  }
}