@charset "UTF-8";
/*
 * px 基本これを使う
 */
/*
 * pc
 * 第二引数にtrueを設定すると、$minが10pxになります。
 * font-sizeに使うときは設定してください。
 * font-size以外のときは第一引数のみでOKです。
 *
 * .xxxx {
 *   font-size: px(60, true);
 *   margin-top: px(14);
 * }
 */
/*
* withkangoo.css
*
*/
/* --------------------------------------------------------
	WithKANGOO
-------------------------------------------------------- */
.withkangoo__mv {
  position: relative;
}
.withkangoo__mv img {
  width: 100%;
  height: auto;
}

.withkangoo__sticker {
  display: grid;
  position: absolute;
  top: 16%;
  left: 0;
  width: 63.89%;
  height: auto;

  place-items: center;
}
@media (max-width: 767.98px) {
  .withkangoo__sticker {
    text-align: center;

    aspect-ratio: 230/307;
  }
}
@media (min-width: 768px) {
  .withkangoo__sticker {
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 44.2361111111vw;
    height: 22.2916666667vw;
  }
}
.withkangoo__sticker::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background-color: #fff;
}
@media (min-width: 768px) {
  .withkangoo__sticker::before {
    border-radius: 9px;
  }
}
.withkangoo__sticker picture {
  width: 100%;
  text-align: center;
}
.withkangoo__sticker img {
  position: relative;
  width: 73.91%;
  height: auto;
}
@media (min-width: 768px) {
  .withkangoo__sticker img {
    width: 34.375vw;
    height: 17.1527777778vw;
  }
}
.withkangoo__sticker:focus::before {
  transform: scale(1.05);
}
@media (hover: hover) and (pointer: fine) {
  .withkangoo__sticker:hover::before {
    transform: scale(1.05);
  }
}

/* --------------------------------------------------------
GALLERY #WithKANGOO // 既存をベースに調整。ペットページでも使用
-------------------------------------------------------- */
.withkangoo__gallery {
  margin-top: 72px;
}
@media (min-width: 768px) {
  .withkangoo__gallery {
    margin-top: 80px;
  }
}
.withkangoo__gallery .gallery_ttl {
  display: grid;
  justify-content: center;
  text-align: center;
  font-family: "NouvelR";
  font-size: 24px;
  font-weight: 600;

  row-gap: 3px;
}
@media (min-width: 768px) {
  .withkangoo__gallery .gallery_ttl {
    font-size: 50px;
  }
}
.withkangoo__gallery .gallery_ttl .logo {
  width: 190px;
}
@media (min-width: 768px) {
  .withkangoo__gallery .gallery_ttl .logo {
    width: 352px;
  }
}
.withkangoo__gallery .gallery_txt {
  margin-top: 16px;
  text-align: center;
  font-size: 10px;
  line-height: 150%;
}
@media (min-width: 768px) {
  .withkangoo__gallery .gallery_txt {
    font-size: 20px;
  }
}
.withkangoo__gallery .gallery_wrap {
  margin: 18px auto 0;
  width: 100%;
  max-width: 1024px;
}

/* --------------------------------------------------------
　　TOPICS #WithKANGOO // NOTE: 既存からそのまま移植
-------------------------------------------------------- */
.withkangoo-topics {
  display:         flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  margin: 40px auto 0 auto;
  padding-bottom: 60px;
  max-width: 1024px;
}

.withkangoo-topics a {
  display: block;
  width: calc(50% - 10px);
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  line-height: 2;
}

.withkangoo-topics a:nth-child(2n) {
  margin-left: 20px;
}

.withkangoo-topics img {
  width: 100%;
}

/* TB */
@media (min-width: 768px) and (max-width: 1279px) {
  .withkangoo-topics {
    padding: 0 16px 60px;
  }
}
/* SP */
@media (max-width: 767px) {
  .withkangoo-topics {
    display: block;
    padding: 0 16px 60px;
  }
  .withkangoo-topics a {
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
  }
  .withkangoo-topics a:nth-child(2n) {
    margin-left: auto;
  }
  .withkangoo-topics a:not(:first-child) {
    margin-top: 20px;
  }
}
.weblink-categorytopics-with-kangoo .l-section > .headline .en {
  font-family: "NouvelR";
  font-size: 24px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .weblink-categorytopics-with-kangoo .l-section > .headline .en {
    font-size: 50px;
  }
}

.weblink-categorytopics-with-kangoo .l-section .headline .logo {
  margin-left: 13px;
  width: 200px;
}
@media (min-width: 768px) {
  .weblink-categorytopics-with-kangoo .l-section .headline .logo {
    margin-left: 8px;
    width: 352px;
  }
}