﻿@charset "utf-8";
/* トップページ 
-------------------------------------------------------------------*/
body.home #visual .firstview {
  background: url(../img/top/bg.png) no-repeat top center / cover;
  overflow: hidden;
}
body.home #visual hgroup {
  display: flex;
  flex-direction: column-reverse;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 10.5em auto 6.65em;
  width: 580px;
  letter-spacing: 0.06em;
}
body.home #visual hgroup p {
  color: #AB091B;
  font-weight: 800;
  line-height: 1.35;
}
body.home #visual hgroup h1 {
  font-size: 1.8em;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.1em;
}
body.home #visual #main-slider {
  margin-bottom: 6.65em;
}
body.home .slick-slider {
  padding-inline: 5em;
}
body.home .slick-slide a {
  width: fit-content;
  background: #fff;
  display: block;
  margin: 0.5em auto;
  text-decoration: none;
  overflow: clip;
  border: solid 1px #D9D9D9;
  border-radius: 0.45rem;
  transition: transform .4s, background .4s, color .4s;
}
body.home .slick-slide a:has(p) {
  border: solid 1px #D9D9D9;
  margin-bottom: 1.25em;
}
body.home #main-slider .slick-slide a {
  padding: 0.5em;
  border-radius: 0.5em
}
body.home .common-slider {
  margin-bottom: 1.0em;
}
body.home .common-slider.slick-slider {
  padding-inline: 2.75em;
}
body.home .common-slider .slick-slide a p {
  text-align: center;
  padding-block: 1em 2.25em;
  font-size: 0.875rem;
}
.slide-arrows {
  position: absolute;
  aspect-ratio: 1 / 1;
  height: 3.125rem;
  background: var(--main_color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  border: solid 1px var(--main_color);
  inset: 0 auto;
  margin: auto 0;
  transition: background .4s;
}
.slide-arrows.prev-arrow {
  left: 0;
}
.slide-arrows.next-arrow {
  right: 0;
}
.slide-arrows:before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  height: 0.685em;
  mask: url(../img/common/icon-arrow.svg) no-repeat;
  mask-size: contain;
  background: #fff;
  transform: rotate(90deg);
  margin-inline: -0.15em 0;
  transition: background .4s;
}
.slide-arrows.next-arrow:before {
  transform: rotate(-90deg);
  margin-inline: 0 -0.15em;
}
@media (any-hover: hover) {
  body.home .slick-slide a:hover {
    transform: translateY(-0.5em);
  }
  body.home #main-slider .slick-slide a:hover {
    background: var(--main_color);
  }
  .slide-arrows:hover {
    background: #fff;
  }
  .slide-arrows:hover:before {
    background: var(--main_color);
  }
}
body.home .slick-dots {
  display: flex;
  justify-content: center;
  gap: 1em;
  position: absolute;
  inset: auto 0 -2em;
  margin: auto;
}
body.home .slick-dots button {
  cursor: pointer;
  border: none;
  height: 0.5em;
  width: 0.5em;
  text-indent: -9999px;
  border-radius: 0.25em;
  transition: 1s;
  position: relative;
  background: #d1d1d1;
  --speed: 0.8s;
  transition: var(--speed);
  outline: solid 2px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1))
}
body.home .slick-dots button:before,
body.home .slick-dots button:after {
  height: 0.5em;
  width: 0.5em;
  left: 0;
  top: 0;
  content: "";
  display: block;
  position: absolute;
  transition: var(--speed);
  background: var(--main_color);
  border-radius: 0.25em;
  z-index: 1;
  transition: var(--speed);
}
body.home .slick-dots button:after {
  background: transparent;
  z-index: 2;
  transition: background .8s, left 4.0s linear;
}
body.home .slick-dots li.slick-active button {
  width: 3em;
}
body.home .slick-dots li.slick-active button:before {
  width: 3em;
  animation: slick_dot 4.0s 0s linear forwards;
}
body.home .slick-dots li.slick-active button:after {
  background: #fff;
  left: calc(100% - 0.5em);
}
@keyframes slick_dot {
  0% {
    width: 0.5em;
  }
  100% {
    width: 100%;
  }
}
body.home .shop-search {
  background: var(--main_color);
  padding-block: 2.5em;
}
body.home .shop-search a {
  display: flex;
  background: #fff;
  border-radius: 1rem;
  justify-content: center;
  font-size: 1.25rem;
  text-align: center;
  padding: 1.5em 2em;
  text-decoration: none;
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  border: solid 1px #707070;
  transition: transform .4s, color .4s;
}
body.home .shop-search figure img {
  margin-block: 0.5em 1em;
  display: inline-block;
  transition: opacity .4s;
}
body.home .shop-search figcaption {
  font-weight: 500;
}
body .c-arrow {
  aspect-ratio: 1 / 1;
  height: 3.125rem;
  background: var(--main_color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  border: solid 1px var(--main_color);
  inset: 0 auto;
  margin: auto 0;
  transition: background .4s;
}
body .c-arrow:before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  height: 0.685rem;
  background: #fff;
  mask: url(../img/common/icon-arrow.svg) no-repeat;
  mask-size: contain;
  transform: rotate(-90deg);
  margin-inline: 0 -0.15em;
  transition: background .4s;
}
body.home .shop-search .c-arrow {
  position: absolute;
  right: 1em;
}
body.home #service {
  padding-block: 3.0em;
}
body .ttl-style {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.75em;
  gap: 0.75em;
}
body .ttl-style :is(h2, h3, h4) {
  font-size: 1.5rem;
  font-weight: 600;
}
body .ttl-style p {
  font-size: 0.875rem;
  color: var(--main_color);
  font-weight: 500;
}
body .right-content {
  text-align: right;
}
body .right-content>* {
  margin-inline: auto 0;
}
body .btn-style {
  display: flex;
  width: 360px;
  justify-content: space-between;
  border: solid 1px #B7B7B7;
  border-radius: 2em;
  padding: 0.5em 0.5em 0.5em 2.0em;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  transition: color .4s;
  background: #fff;
  letter-spacing: 0.05em;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
body .btn-style .c-arrow {
  height: 2.5em;
  position: relative;
  z-index: -1;
}
body .btn-style .c-arrow:before {
  height: 0.625em;
}
body .btn-style .c-arrow:after {
  position: absolute;
  z-index: -1;
  display: inline-block;
  content: "";
  width: 45em;
  aspect-ratio: 1/1;
  background: var(--main_color);
  border-radius: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: 0.01;
  transition: scale .4s ease;
}
@media (any-hover: hover) {
  body.home .shop-search a:hover {
    color: var(--main_color);
    transform: translateY(0.25em);
  }
  body.home .shop-search a:hover img {
    opacity: 0.7;
  }
  body.home .shop-search a:hover .c-arrow {
    background: #fff;
  }
  body.home .shop-search a:hover .c-arrow:before {
    background: var(--main_color);
  }
  body .btn-style:hover {
    color: #fff;
  }
  body .btn-style:hover .c-arrow:after {
    scale: 1;
  }
}
body .slide-wrap+.right-content {
  margin-right: 3.5em;
}
body.home #information {
  padding-block: 1.5em 9em;
}
body.home #links {
  padding-block: 5.75em;
  background: var(--main_color);
}
body.home #links .bnr-flex {
  display: flex;
  justify-content: space-between;
  gap: 4%;
}
body.home #links .bnr-flex a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column-reverse;
  text-decoration: none;
  background: url(../img/top/bnr_trivia.png) 50% 50% / 100%;
  aspect-ratio: 520 / 240;
  flex-grow: 1;
  border-radius: 1em;
  flex: 1;
  gap: 1.5em;
  padding-block: 2.25em 0;
  font-weight: 500;
  transition: transform .4s, background .4s, color .4s;
}
body.home #links .bnr-flex a[href*="company"] {
  background-image: url(../img/top/bnr_company.png);
}
body.home #links .bnr-flex hgroup {
  gap: 0.5em;
  margin: 0;
}
body.home #links .bnr-flex hgroup h2 {
  font-size: 1.25rem;
}
@media (any-hover: hover) {
  body.home #links .bnr-flex a:hover {
    transform: translateY(0.5em);
    color: var(--main_color);
  }
}
body.home #news {
  background: #F4F3F4;
  padding-block: 5em;
}
body .content-flex {
  display: flex;
  justify-content: space-between;
  --width: 180px;
  align-items: flex-start;
}
body .content-flex>*:first-child {
  width: var(--width);
}
body .content-flex>*:last-child {
  flex-grow: 1;
  max-width: calc(100% - var(--width))
}
body .content-flex .ttl-style {
  align-items: flex-start;
  margin-bottom: 0;
}
body .content-flex .ttl-style :is(h2, h3, h4) {
  font-size: 1.44em;
}
body.home .news-list ul {
  margin-bottom: 2em;
  background: #fff;
  padding: 1.75em 3.25em 2.5em;
  border-radius: 1em;
}
body.home .news-list ul li:not(:first-child) {
  border-top: 1px solid #707070;
}
body.home #recruit {
  overflow: clip;
}
body.home #recruit .sitewrap {
  padding-block: 5.5em 2.5em;
  position: relative;
  z-index: 2;
}
body.home #recruit .content-flex {
  margin-bottom: 8.125em
}
body.home #recruit .left-content hgroup {
  margin-bottom: 1.5em;
}
body.home #recruit .left-content>p {
  font-weight: 500;
}
body.home #recruit .bg-content {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 27.5%;
}
body.home #recruit .bg-content img {
  max-width: fit-content;
}
body.home #faq {
  padding-block: 5em 5em;
  border-top: solid #B7B7B7 1px;
  border-bottom: solid #B7B7B7 2px;
}
body.home #faq .btn-style {
  margin-top: 1.5em;
}
@media screen and (max-width:1100px) {
  body.home .slick-slide a {
    margin-inline: 0.5em;
  }
}
@media screen and (max-width:767px) {
  body.home #visual .firstview {
    background-image: url(../img/top/bg@sp.jpg);
    background-size: contain;
    margin-top: 72px;
    background-color: #FCFCFC;
  }
  body.home #visual hgroup {
    font-size: 0.857rem;
    margin: 17.5em 1em 2em auto;
    width: fit-content;
    gap: 1em;
  }
  body.home #visual hgroup h1 {
    font-size: 2em;
  }
  body.home #visual #main-slider {
    margin-bottom: 5.65em;
  }
  body.home .slick-slider {
    padding-inline: 0em;
  }
  body.home .slick-slider .slick-list {
    overflow: visible;
  }
  body.home .slick-slider a {
    margin-inline: 1.42em;
    width: 252px;
  }
  body.home .slick-slide a:has(p) {
    margin-bottom: 0.5em;
    width: 240px;
  }
  body.home .common-slider {
    margin-bottom: 1em;
  }
  body.home .common-slider.slick-slider {
    padding-inline: 2.75em;
  }
  body.home .common-slider .slick-slide a p {
    padding-block: 0.5em 1.25em;
    font-size: 1rem;
  }
  .slide-arrows {
    height: 1.85rem;
  }
  .slide-arrows.prev-arrow {
    left: 0.35em;
  }
  .slide-arrows.next-arrow {
    right: 0.35em;
  }
  .slide-arrows:before {
    height: 0.65em;
  }
  body.home .slick-dots {
    inset: auto 0 -2.5em;
  }
  body.home .slick-dots button {
    height: 0.65em;
  }
  body.home .shop-search {
    padding: 1.5em 1.5em;
  }
  body.home .shop-search a {
    border-radius: 0.5rem;
    font-size: 1.35rem;
    padding: 1.0em 1.0em 1.25em;
  }
  body.home .shop-search figure img {
    margin-block: 0.5em 0.25em;
    width: 138px;
  }
  body .c-arrow {
    height: 1.75rem;
  }
  body .c-arrow:before {
    height: 0.6rem;
  }
  body.home .shop-search .c-arrow {
    right: 0.5em;
  }
  body.home #service {
    padding-block: 4.0em;
  }
  body .ttl-style {
    margin-bottom: 1em;
    gap: 1em;
  }
  body .ttl-style :is(h2, h3, h4) {
    font-size: 1.475rem;
  }
  body .ttl-style p {
    font-size: 0.94rem;
  }
  body .btn-style {
    display: flex;
    width: auto;
    border-radius: 2em;
    padding: 0.75em 0.75em 0.75em 2.0em;
    margin-inline: auto;
    max-width: 325px;
    font-size: 1.14rem;
  }
  body .btn-style .c-arrow {
    height: 2em;
  }
  body .btn-style .c-arrow:before {
    height: 0.6rem;
  }
  body .slide-wrap+.right-content {
    margin-right: 0em;
  }
  body.home #information {
    padding-block: 4em 8.25em;
  }
  body.home #links {
    padding: 2.75em 0em;
  }
  body.home #links .bnr-flex {
    flex-direction: column;
    gap: 0.5em;
  }
  body.home #links .bnr-flex a {
    border-radius: 0.75em;
    flex: 1;
    gap: 1.0em;
    padding-block: 2.25em 0;
    font-size: 0.725rem;
  }
  body.home #links .bnr-flex hgroup {
    gap: 0em;
    margin: 0;
  }
  body.home #links .bnr-flex hgroup h2 {
    font-size: 1.14rem;
  }
  body.home #news {
    padding-block: 3.25em 5.5em;
  }
  body .content-flex {
    flex-direction: column;
    gap: 2.75em;
    align-items: stretch;
  }
  body .content-flex>*:first-child {
    width: 100%;
  }
  body .content-flex>*:last-child {
    max-width: 100%;
  }
  body .content-flex .ttl-style {
    align-items: center;
  }
  body .content-flex .ttl-style :is(h2, h3, h4) {
    font-size: 1.44em;
  }
  body .content-flex:has(.news-list) {
    padding-inline: 0.75em;
  }
  body.home .news-list ul {
    margin-bottom: 1.75em;
    padding: 0.6em 1em 0.0em;
    border-radius: 0.5em;
  }
  body.home #recruit .sitewrap {
    padding-block: 3em 5.25em;
  }
  body.home #recruit .content-flex {
    margin-bottom: 0;
    gap: 2.5em;
    padding-inline: 0;
  }
  body.home #recruit .left-content hgroup {
    margin-bottom: 1.25em;
  }
  body.home #recruit .left-content>p {
    text-align: center;
  }
  body.home #recruit .bg-content {
    position: relative;
    inset: 0;
    aspect-ratio: 390 / 244;
  }
  body.home #recruit .bg-content:before {
    content: "";
    display: block;
    z-index: -1;
    position: absolute;
    inset: 0 0 auto;
    aspect-ratio: 1 / 1;
    background: url(../img/top/bg_recruit@sp.png) 60% 0% / 143%;
  }
  body.home #recruit .bg-content img {
    max-width: 100%;
    visibility: hidden;
  }
  body.home #faq {
    padding-block: 3em 5.25em;
    border-bottom: solid #B7B7B7 1px;
  }
  body.home #faq .btn-style {
    margin-top: 2.75em;
  }
}
body.home .blockwrap {
  position: relative;
  z-index: 2;
}
body.home .blockwrap .search-anime {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(50% - 385px);
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 0;
  translate: -50%;
}
body.home .blockwrap .itemwrap {
  position: relative;
  z-index: 2;
}
body.home .blockwrap .itemwrap .attent {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
}
body.home .once.search-anime {
  animation: slide-rotate-squash 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
body.home .once.search-anime .chara {
  animation: chara-blink-rotate 0.65s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  animation-delay: 1s;
}
body.home .once.search-anime .attent {
  animation: flash-attent 0.65s ease-in-out forwards;
  animation-delay: 1s;
}
@keyframes slide-rotate-squash {
  0% {
    transform: translate(-15em, 5em) rotate(-90deg) scale(0.9);
    opacity: 0;
  }
  10% {
    transform: translate(-15em, 3em) rotate(-70deg) scale(0.95);
    opacity: 1;
  }
  70% {
    transform: translate(8em, 0.1em) rotate(15deg) scaleY(0.9) scaleX(1.05);
  }
  80% {
    transform: translate(8.5em, -0.2em) rotate(-7deg) scaleY(1.05) scaleX(0.95);
  }
  90% {
    transform: translate(8.55em, 0) rotate(3deg) scale(1);
  }
  100% {
    transform: translate(8.5em, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
@keyframes chara-blink-rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes flash-attent {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width:1200px) {
  body.home .shop-search:has(.search-anime) {
    padding-top: 8.5em;
  }
  body.home .blockwrap .search-anime {
    top: -6em;
    right: calc(50% - 425px);
    transform: translate(0, 8em) rotate(0) scale(1);
  }
  body.home .once.search-anime {
    animation: slide-rotate-squash_sp 1s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  }
  @keyframes slide-rotate-squash_sp {
    0% {
      transform: translate(0, 8em) rotate(0) scale(0.9);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    70% {
      transform: translate(0, 0.1em) rotate(15deg) scaleY(0.9) scaleX(1.05);
    }
    80% {
      transform: translate(0, -0.2em) rotate(-7deg) scaleY(1.05) scaleX(0.95);
    }
    90% {
      transform: translate(.5em, 0) rotate(3deg) scale(1);
    }
    100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
      opacity: 1;
    }
  }
}
@media screen and (max-width:767px) {
  body.home .shop-search:has(.search-anime) {
    padding-top: 5.5em;
  }
  body.home .blockwrap .search-anime {
    top: -9em;
    right: -7%;
    font-size: 0.5em;
  }
  body.home .blockwrap .search-anime img {
    width: 80px;
  }
}
/* */
.walking-anime {
  position: absolute;
  bottom: 1em;
  left: calc(100% - 157.5px);
  z-index: 15;
}
.walking-anime>div {
  position: relative;
  width: 105px;
  height: 130px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
}
.walking-anime>.walker {
  background-image: url('../img/top/walking.gif');
}
.walking-anime>.walker {
  animation: walk-body-motion 0.8s linear infinite, walk-fade 20s linear infinite;
}
@keyframes walk-body-motion {
  0% {
    transform: translateY(0) rotate(0deg) scaleY(1);
  }
  25% {
    transform: translateY(2px) rotate(1deg) scaleY(0.98);
  }
  50% {
    transform: translateY(-2px) rotate(0deg) scaleY(1.02);
  }
  75% {
    transform: translateY(2px) rotate(-1deg) scaleY(0.98);
  }
  100% {
    transform: translateY(0) rotate(0deg) scaleY(1);
  }
}
.walking-anime>.flight {
  background-image: url('../img/top/flying.gif');
  position: absolute;
  inset: 0;
  z-index: 2;
}
.walking-anime>.flight {
  animation: fly-body-motion 0.5s infinite alternate, fly-fade 20s linear infinite;
}
@keyframes fly-body-motion {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}
.walking-anime {
  animation: main-movement-loop 20s linear infinite;
  transform: scaleX(1);
}
@keyframes main-movement-loop {
  0% {
    left: calc(100% - 157.5px);
    transform: scaleX(1);
  }
  50% {
    left: calc(0% + 52.5px);
    transform: scaleX(1);
  }
  51.25% {
    left: calc(0% + 52.5px);
    transform: scaleX(-1);
  }
  100% {
    left: calc(100% - 157.5px);
    transform: scaleX(-1);
  }
}
@keyframes walk-fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51.25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fly-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51.25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#sns-wrap:has(.walking-anime) {
  padding-bottom: 10em;
}
@media screen and (max-width:767px) {
  #sns-wrap:has(.walking-anime) {
    padding-bottom: 9em;
  }
  .walking-anime>div {
    position: relative;
    width: 78px;
    height: 97px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
  }
  .walking-anime {
    animation-duration: 24s;
  }
  .walking-anime>.flight {
    animation-duration: 0.5s, 24s;
  }
  .walking-anime>.walker {
    animation-duration: 0.8s, 24s;
  }
  @keyframes main-movement-loop {
    0% {
      left: calc(100% - 65px);
      transform: scaleX(1);
    }
    50% {
      left: calc(0% + 18px);
      transform: scaleX(1);
    }
    50.25% {
      left: calc(0% + 18px);
      transform: scaleX(-1);
    }
    100% {
      left: calc(100% - 65px);
      transform: scaleX(-1);
    }
  }
  @keyframes walk-fade {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    50.25% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes fly-fade {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    50.25% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
}
/* 下層ページ共通 
-------------------------------------------------------------------*/
.kaso .head-wrap,
.post-customer .customer-head-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 17.5em;
  overflow: hidden;
}
.kaso .head-wrap::before,
.kaso .head-wrap::after {
  position: absolute;
  z-index: -10;
  display: inline-block;
  content: "";
  width: 416px;
  aspect-ratio: 416/290;
  background: var(--main_color);
  top: 50%;
  right: 120px;
  transform: skew(-40.1265deg, 0);
  translate: 0 -50%;
}
.kaso .head-wrap::before {
  z-index: -5;
  background: var(--white);
  right: 180px;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3));
}
.kaso .head-wrap .head-ttl_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 2.5em;
  text-align: center;
  line-height: 1.2;
}
.kaso .head-wrap .head-ttl_box p {
  font-size: 0.875rem;
  color: var(--main_color);
  text-transform: uppercase;
}
.kaso .head-wrap .head-ttl_box :is(h1, p[lang="ja"]) {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--black);
}
.kaso .main-wrap {
  background: #F4F3F4;
  padding-block: 1.875em 7.5em;
  padding-inline: 136px;
}
@media screen and (min-width:1455px) {
  .kaso .head-wrap::before,
  .kaso .head-wrap::after {
    right: calc(50% - 810px);
    translate: -50% -50%;
  }
  .kaso .head-wrap::before {
    right: calc(50% - 750px);
  }
}
@media screen and (max-width:767px) {
  .kaso .head-wrap,
  .post-customer .customer-head-wrap {
    min-height: 9.14285714286em;
  }
  .kaso .head-wrap::before,
  .kaso .head-wrap::after {
    width: 70px;
    aspect-ratio: 70/130;
    right: 0px;
    transform: skew(-35deg, 0);
  }
  .kaso .head-wrap::before {
    right: 22px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  }
  .kaso .head-wrap .head-ttl_box {
    gap: .5em;
  }
  .kaso .head-wrap .head-ttl_box :is(h1, p[lang="ja"]) {
    font-size: 1.42857142857rem;
  }
  .kaso .head-wrap .head-ttl_box p {
    font-size: 1rem;
  }
  .kaso .main-wrap {
    padding-bottom: 3.5em;
    padding-inline: 0;
  }
}
/* お知らせ一覧ページ 
-------------------------------------------------------------------*/
body .news-list ul li a {
  display: flex;
  width: 100%;
  padding: 1.5em 0;
  gap: 2em;
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background .4s, color .4s;
}
body .news-list ul li a mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10em;
  background: #FDF3F5;
  border-radius: 3em;
  font-size: 0.857em;
  padding: 0.15em;
  transition: background .4s, color .4s;
}
body .news-list ul li a mark[data-category="shop"] {
  background: #FDF3F5;
}
body .news-list ul li a mark[data-category="information"] {
  background: #F4F3F4;
}
body .news-list ul li a p {
  text-decoration: underline;
  font-weight: 400;
  text-underline-offset: 0.15em;
  transition: text-decoration .4s, color .4s;
}
body .news-list ul li a[href$="pdf"] p {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
body .news-list ul li a[href$="pdf"] p:before {
  content: "";
  display: inline-block;
  height: 1.15em;
  aspect-ratio: 144 / 158;
  background: url(../img/common/icon-pdf.svg) no-repeat top left / contain;
  vertical-align: middle;
  margin-top: 0.25em;
}
.post-news .news-list ul li:not(:first-child) {
  margin-top: 0.25em;
}
.post-news .news-list ul li a {
  background: var(--white);
  border: 1px solid #D9D9D9;
  border-radius: 0.85714285714em;
  padding-inline: 1.71428571429em;
}
.post-news .news_navi_link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1.5em;
}
.post-news .news_navi_link li a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 11.6666666667em;
  min-height: 2.75em;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  border: 1px solid #B7B7B7;
  border-radius: 2.75em;
  background: var(--white);
  text-decoration: none;
  padding: 0.25em 1.5em;
  transition: background .4s, color .4s;
}
.post-news .news_navi_link li.is-current a {
  border-color: var(--main_color);
  pointer-events: none;
  cursor: default;
}
.post-news .news-single_headwrap time {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.5em;
}
.post-news .news-single_headwrap .news-single_headttl {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 2em;
}
@media (any-hover: hover) {
  body .news-list ul li a:hover {
    background: #FDF3F5;
    color: var(--main_color);
  }
  body .news-list ul li a:hover mark {
    background: var(--main_color);
    color: #fff;
  }
  body .news-list ul li a:hover p {
    text-decoration-color: transparent;
  }
  .post-news .news_navi_link li a:hover {
    background: #FDF3F5;
    color: var(--main_color);
  }
}
@media screen and (max-width:767px) {
  body .news-list ul li a {
    padding: 1.65em 0;
    gap: 1.25em 2em;
    font-size: 0.94rem;
    flex-wrap: wrap;
  }
  body .news-list ul li a mark {
    width: 9em;
    font-size: 0.94em;
  }
  body .news-list ul li a p {
    width: 100%;
  }
  .post-news .news_navi_link li a {
    min-width: 8em;
    min-height: 2.5em;
  }
}
/* よくある質問ページ 
-------------------------------------------------------------------*/
.post-faq .faq-item {
  background: var(--white);
  border: 1px solid var(--border_color);
  border-radius: 1em;
  overflow: hidden;
  margin-top: 0.75em;
}
.post-faq .faq-item .faq-item_q,
.post-faq .faq-item .faq-item_a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25em;
  padding: 1.5em 2.25em;
}
.post-faq .faq-item .faq-item_q {
  position: relative;
  z-index: 10;
  min-height: 5em;
  font-weight: bold;
  padding-right: 4.5em;
  cursor: pointer;
}
.post-faq .faq-item[open] .faq-item_q {
  background: #F2F2F2;
}
.post-faq .faq-item .faq-item_a {
  align-items: flex-start;
}
.post-faq .faq-item .faq-item_q::before,
.post-faq .faq-item .faq-item_a::before {
  content: "Q";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 4em;
  min-height: 1.5em;
  font-size: 1rem;
  font-weight: bold;
  color: var(--main_color);
  background: var(--white);
  border: 1px solid;
  border-radius: 1.5em;
}
.post-faq .faq-item .faq-item_a::before {
  content: "A";
}
.post-faq .faq-item .faq-item_q::after {
  position: absolute;
  z-index: 10;
  content: "\FF0B";
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 2.5em;
  aspect-ratio: 1/1;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 900;
  color: var(--white);
  background: var(--main_color);
  border-radius: 100%;
  top: 1.35em;
  right: 0.75em;
}
.post-faq .faq-item[open] .faq-item_q::after {
  content: "\FF0D";
}
@media screen and (max-width:767px) {
  .kaso.post-faq .paged_navi_link {
    display: none;
  }
  .post-faq .faq-item {
    border-radius: 0.42857142857em;
  }
  .post-faq .faq-item+.faq-item {
    margin-top: 0.71428571428em !important;
  }
  .post-faq .faq-item .faq-item_q,
  .post-faq .faq-item .faq-item_a {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
    padding: 1.14285714286em 1em;
  }
  .post-faq .faq-item .faq-item_q {
    min-height: 0;
    padding: 1.7857142857em 1em;
  }
  .post-faq .faq-item .faq-item_a {
    align-items: flex-start;
  }
  .post-faq .faq-item .faq-item_q::before,
  .post-faq .faq-item .faq-item_a::before {
    font-size: 1.14285714286rem;
  }
  .post-faq .faq-item .faq-item_q::after {
    min-width: 2.5em;
    font-size: 0.71428571428rem;
    top: 2.5em;
    right: 1.5em;
  }
}
/* 豆知識ページ 
-------------------------------------------------------------------*/
:root .post-customer,
:root .cat-health_recipe {
  --category_color: #4E9F21;
  --category_sub_color: #D7ED89;
}
:root .cat-health {
  --category_color: #2B5EB6;
  --category_sub_color: #B0DFF7;
}
:root .cat-consultation {
  --category_color: #CA3548;
  --category_sub_color: #fad7d5;
}
:root .cat-baby {
  --category_color: #ec9bb1;
  --category_sub_color: #fde8ed;
}
:root .cat-care {
  --category_color: #309578;
  --category_sub_color: #c5e5e0;
}
:root .cat-oralcare {
  --category_color: #37a7bd;
  --category_sub_color: #ade8ec;
}
:root .cat-pet {
  --category_color: #e88723;
  --category_sub_color: #fce2c7;
}
:root .cat-kaji {
  --category_color: #86be17;
  --category_sub_color: #d7e6af;
}
:root .cat-woman {
  --category_color: #a373ae;
  --category_sub_color: #ead6e8;
}
.post-customer .customer-head-wrap {
  background: url(../img/customer/img-mv01.png) no-repeat;
  background-position: center;
  background-color: #bae24a;
  -webkit-text-stroke: 6px #bae24a;
  paint-order: stroke;
}
.post-customer .customer-head-wrap .customer-head-ttl_box p {
  font-size: 1rem;
  font-weight: bold;
}
.post-customer .customer-head-wrap .customer-head-ttl_box .customer-head-ttl {
  font-size: 1.625em;
  font-weight: bold;
  line-height: 1.4;
}
.post-customer .customer-category_navi {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.25em;
}
.post-customer:not(.single-customer) .customer-category_navi {
  margin-bottom: 5em;
}
.post-customer .customer-category_navi li {
  width: 156px;
}
.post-customer .customer-category_navi li a,
.post-customer .customer-list .customer-item_category a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 3em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  background: var(--category_color);
  border: 1px solid #666;
  border-radius: 3em;
  transition: color .4s, background .4s, border-color .4s;
}
.post-customer .customer-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  font-size: 1.125rem;
  font-weight: bold;
  color: #414141;
  margin-bottom: 2.222223em;
}
.post-customer .customer-ttl.image-kusurin::before {
  display: inline-block;
  content: "";
  width: 5.44444444444em;
  aspect-ratio: 98/82;
  background: url(../img/customer/img-heding01.png);
  background-size: 100%;
}
.post-customer.category-health_recipe .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_health_recipe.png);
}
.post-customer.category-health .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_health.png);
}
.post-customer.category-consultation .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_consultation.png);
}
.post-customer.category-baby .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_baby.png);
}
.post-customer.category-care .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_care.png);
}
.post-customer.category-oralcare .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_oralcare.png);
}
.post-customer.category-pet .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_pet.png);
}
.post-customer.category-kaji .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_kaji.png);
}
.post-customer.category-woman .customer-ttl.image-kusurin::before {
  background-image: url(../img/customer/img-heding01_woman.png);
}
.post-customer .customer-ttl:has(+ .customer-category_leadtext) {
  margin: 0;
}
.post-customer .customer-category_leadtext {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #414141;
  margin-bottom: 2.75em;
}
.post-customer .customer-list {
  --gap: 1.25em;
  --wide: 100%;
  display: flex;
}
.post-customer .customer-list .draggable {
  min-width: 100%;
}
.post-customer .customer-list.customer-list_category {
  --wide: calc((100% - var(--gap) * 3) / 4);
  flex-wrap: wrap;
  gap: var(--gap);
}
.post-customer .more-box,
.post-customer .edit-wrap,
.post-customer .customer-list.customer-list_category {
  margin-bottom: 5em;
}
.post-customer .customer-list .slick-track {
  display: flex;
  align-items: stretch;
}
.post-customer .customer-item.slick-slide {
  display: flex;
  height: auto !important;
  margin-inline: 2px;
}
.post-customer .customer-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: var(--wide);
  background: var(--white);
  border: 1px solid var(--border_color);
  border-radius: 0.125em;
  border-bottom-right-radius: 1.5em;
  padding: 3.125vw 1em 1.375em;
  transition: translate .4s;
}
.post-customer .customer-list_category .customer-item {
  padding-top: 1.5em;
}
.post-customer .customer-item>* {
  width: min(100%, 240px);
}
.post-customer .customer-item>a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  transition: color .4s;
}
.post-customer .customer-item .customer-item_image {
  width: 83.3333333333%;
  aspect-ratio: 1/1;
  border: 1px solid var(--border_color);
  border-radius: 0.25em;
  border-bottom-right-radius: 1.5em;
  overflow: hidden;
  margin-bottom: 1.75em;
}
.post-customer .customer-item .customer-item_image img {
  object-fit: cover;
  max-width: inherit;
  width: 100%;
  height: 100%;
}
.post-customer .customer-item .customer-item_ttl {
  min-height: 3.29875em;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 0.625em;
}
.post-customer .customer-item p {
  font-size: 0.875rem;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: 2.14285714286em;
}
.post-customer .customer-item .customer-item_category {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25em;
  flex-grow: 1;
}
.post-customer .customer-item .customer-item_category a {
  min-height: 0;
  font-weight: normal;
  padding: 0.25em 1em;
}
.post-customer .customer-item .customer-item_arrow {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 0.3125em;
}
.post-customer .customer-item:not(:has(.customer-item_category)) .customer-item_arrow {
  flex-grow: 1;
}
.post-customer .customer-item .c-arrow {
  width: auto;
  height: 1.25em;
  margin: 0;
  margin-left: auto;
}
.post-customer .customer-item .c-arrow::before {
  height: 0.5em;
}
.post-customer .customer-list .slide-arrows.prev-arrow {
  left: -3.75em;
}
.post-customer .customer-list .slide-arrows.next-arrow {
  right: -3.75em;
}
.post-customer .customer-category_list {
  --gap_row: 0.75em;
  --gap_column: 0.625em;
  --wide: calc((100% - var(--gap_column) * 2) / 3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap_row) var(--gap_column);
}
.post-customer .customer-category_item {
  width: var(--wide);
  height: auto;
}
.post-customer .customer-category_item a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;
  background: var(--category_color);
  border-radius: 0.125em;
  border-bottom-right-radius: 0.75em;
  text-decoration: none;
  transition: translate .4s;
}
.post-customer .customer-category_item .customer-category_lead {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  font-size: 0.875rem;
  min-height: 7.14285714286em;
  background: var(--category_sub_color);
  padding-block: 1em;
  overflow: hidden;
}
.post-customer .customer-category_item .customer-category_lead p {
  width: 100%;
  padding-inline: 8.5%;
  -webkit-text-stroke: 6px var(--category_sub_color);
  paint-order: stroke;
}
.post-customer .customer-category_item .customer-category_image {
  position: absolute;
  z-index: -5;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}
.post-customer .customer-category_item.cat-health_recipe .customer-category_image {
  top: 60%;
  right: -1%;
}
.post-customer .customer-category_item.cat-health .customer-category_image {
  top: 69%;
}
.post-customer .customer-category_item.cat-consultation .customer-category_image {
  top: 65%;
}
.post-customer .customer-category_item.cat-baby .customer-category_image {
  top: 63%;
}
.post-customer .customer-category_item.cat-care .customer-category_image {
  top: 60%;
  right: -1%;
}
.post-customer .customer-category_item.cat-oralcare .customer-category_image {
  top: 43%;
  right: -1%;
}
.post-customer .customer-category_item.cat-pet .customer-category_image {
  right: -1.5%;
}
.post-customer .customer-category_item.cat-kaji .customer-category_image {
  top: 65%;
  right: -1.5%;
}
.post-customer .customer-category_item.cat-woman .customer-category_image {
  top: 65%;
  right: -3%;
}
.post-customer .customer-category_item .customer-category_name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 4.5em;
  font-size: 1rem;
  color: var(--white);
  padding-inline: 8.5% 5%;
}
.post-customer .customer-category_item .customer-category_name * {
  font-weight: bold;
}
.post-customer .customer-category_item .customer-category_name .c-arrow {
  height: 2.5em;
  background: var(--white);
  border-color: var(--white);
}
.post-customer .customer-category_item .customer-category_name .c-arrow:before {
  background: #343434;
  height: 0.625em;
}
.post-customer .customer-instagram {
  margin-top:5em;
}
.post-customer.single-customer .customer-instagram {
  margin-bottom:5em;
}
.post-customer .customer-instagram a {
  display: flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  transition: translate .4s;
}
.post-customer .customer-single_headwrap {
  --gap_column: 2em;
  --wide_image: 37.5%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap_column);
  margin-block: 2em 5em;
}
.post-customer .customer-single_headwrap .customer-single_headimage {
  width: var(--wide_image);
}
.post-customer .customer-single_headwrap .customer-single_headtext {
  width: calc(100% - var(--gap_column) - var(--wide_image));
}
.post-customer .customer-single_headwrap .customer-single_headtext time {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 1.5em;
}
.post-customer .customer-single_headwrap .customer-single_headttl {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1em;
}
.post-customer .customer-single_headwrap .customer-single_headlead {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1em;
}
@media (any-hover: hover) {
  .post-customer .customer-category_navi li a:hover,
  .post-customer .customer-item .customer-item_category a:hover {
    color: var(--category_color);
    background: var(--white);
    border-color: var(--category_color);
  }
  .post-customer .customer-item:has(> a:hover),
  .post-customer .customer-category_item a:hover,
  .post-customer .customer-instagram a:hover{
    translate: 0 3px;
  }
  .post-customer .customer-item>a:hover {
    color: var(--main_color);
  }
  .post-customer .customer-category_item a:hover .customer-category_name .c-arrow:before {
    background: var(--main_color);
  }
}
@media screen and (max-width: 1060px) {
  .post-customer .customer-category_list {
    --wide: calc((100% - var(--gap_column) * 1) / 2);
  }
}
@media screen and (max-width:767px) {
  .post-customer .customer-head-wrap {
    justify-content: flex-start;
    background-image: url(../img/customer/img-mv01_sp.png);
    background-size: 100%;
    aspect-ratio: 39/28;
    padding-top: 10%;
  }
  .post-customer .customer-head-wrap .customer-head-ttl_box {
    text-align: center;
  }
  .post-customer .customer-head-wrap .customer-head-ttl_box p {
    font-size: 1.14285714286rem;
  }
  .post-customer:not(.single-customer) .customer-category_navi {
    display: none;
  }
  .post-customer .customer-category_navi li {
    width: auto;
  }
  .post-customer .customer-category_navi li a {
    padding-inline: 1.5em;
  }
  .post-customer .customer-ttl {
    font-size: 1.28571428571rem;
  }
  .post-customer .customer-list {
    flex-direction: column;
    gap: var(--gap);
  }
  .post-customer .customer-list.customer-list_category {
    --wide: 100%;
    flex-wrap: wrap;
  }
  .post-customer .customer-item,
  .post-customer .customer-list_category .customer-item {
    min-height: 13.5em;
    padding: 1.375em 1em 1em;
    margin-inline: 0;
  }
  .post-customer .customer-item>* {
    width: 100%;
  }
  .post-customer .customer-item>a {
    position: relative;
    z-index: 10;
    align-items: flex-start;
    padding-right: 40%;
  }
  .post-customer .customer-item .customer-item_image {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: min(35%, 7.5em);
    margin-bottom: 0;
  }
  .post-customer .customer-item .customer-item_ttl {
    min-height: 0;
    text-align: left;
    font-size: 1.14285714286rem;
  }
  .post-customer .customer-item p {
    font-size: 1rem;
    -webkit-line-clamp: 4;
    margin-bottom: 1em;
  }
  .post-customer .customer-item .customer-item_category a {
    min-height: 0;
    font-weight: normal;
    padding: 0.25em 1em;
  }
  .post-customer .customer-category_list {
    --gap_row: 1.42857142857em;
    --wide: 100%;
  }
  .post-customer .customer-category_item .customer-category_lead {
    font-size: 1rem;
  }
  .post-customer .customer-category_item .customer-category_name {
    font-size: 1.14285714286rem;
  }
  .post-customer .customer-instagram {
    margin-top: 3em;
  }
  .post-customer .customer-single_headwrap {
    --gap_column: 1em;
    --wide_image: 80%;
    flex-direction: column-reverse;
    align-items: center;
    margin-block: 1em 3em;
  }
  .post-customer .customer-single_headwrap .customer-single_headimage {
    width: var(--wide_image);
  }
  .post-customer .customer-single_headwrap .customer-single_headtext {
    width: 100%;
  }
  .post-customer .customer-single_headwrap .customer-single_headtext time,
  .post-customer .customer-single_headwrap .customer-single_headttl {
    margin-bottom: 0.5em;
  }
  .post-customer .customer-single_headwrap .customer-single_headlead {
    line-height: 1.6;
  }
}