@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-functions
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
voice
-----------------------------------------------------*/
.p-voice-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem 0;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 960px) {
  .p-voice-flex {
    max-width: 100%;
    padding: 0 48px;
    width: 100%;
    max-width: 1096px;
  }
}
.p-voice-flex .-L {
  margin-left: auto;
  margin-right: auto;
  width: 86vw;
}
.p-voice-flex .-L h2 {
  font-size: clamp(0.875rem, 0vw + 0.875rem, 0.875rem);
  margin-bottom: clamp(1rem, 0.31vw + 0.93125rem, 1.25rem);
  font-weight: 600;
}
.p-voice-flex .-R {
  width: 100%;
}
@media screen and (min-width: 1080px) {
  .p-voice-flex {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
  }
  .p-voice-flex .-L {
    width: 26%;
    margin: 0;
  }
  .p-voice-flex .-R {
    width: 69%;
  }
}
.p-voice-tab {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (min-width: 960px) {
  .p-voice-tab {
    max-width: 100%;
    padding: 0 48px;
    width: 100%;
    max-width: 1096px;
  }
}
.p-voice-tab a {
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 1;
  font-size: clamp(1rem, 0vw + 1rem, 1rem);
  display: block;
  padding: 20px 8%;
  border-bottom: 1px solid #BBB0AB;
  background: #fff;
}
@media screen and (min-width: 1080px) {
  .p-voice-tab a {
    width: 33.3333333333%;
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #BBB0AB;
    background: none;
  }
}
.p-voice-tab a span {
  position: relative;
  display: block;
}
@media screen and (min-width: 1080px) {
  .p-voice-tab a span {
    display: inline-block;
  }
}
.p-voice-tab a i {
  position: absolute;
  right: 0px;
  top: 1px;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background-color: #6A5246;
  background-image: url(../img/common/icon_arrowW.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 6px 8px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
@media screen and (min-width: 1080px) {
  .p-voice-tab a i {
    right: -2rem;
    top: 1px;
  }
}
@media screen and (min-width: 1080px) {
  .p-voice-tab a i {
    background-position: 58% 50%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-voice-tab a:hover {
    cursor: pointer;
    color: #fff;
    background: #934849;
  }
  .p-voice-tab a:hover i {
    background-image: url(../img/common/icon_arrowR.svg);
    background-color: #fff;
    background-position: 50% 50%;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  .p-voice-tab a:hover {
    border-bottom: 2px solid #934849;
    background: none;
    color: #934849;
  }
  .p-voice-tab a:hover i {
    background-color: #934849;
    background-image: url(../img/common/icon_arrowW.svg);
    background-position: 58% 50%;
  }
}
.p-voice-tab a.-here {
  color: #fff;
  background: #934849;
}
.p-voice-tab a.-here i {
  background-image: url(../img/common/icon_arrowR.svg);
  background-color: #fff;
  background-position: 50% 50%;
}
@media screen and (min-width: 1080px) {
  .p-voice-tab a.-here {
    border-bottom: 2px solid #934849;
    color: #934849;
    background: none;
  }
  .p-voice-tab a.-here i {
    background-image: url(../img/common/icon_arrowW.svg);
    background-color: #934849;
    background-position: 58% 50%;
  }
}
.p-voice-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.6rem;
}
@media screen and (min-width: 1080px) {
  .p-voice-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.6rem 0;
  }
}
.p-voice-nav li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: #fff;
  border-radius: 9999px;
  line-height: 1;
  font-size: clamp(0.875rem, 0vw + 0.875rem, 0.875rem);
  display: inline-block;
  padding: 0.6rem 1.2rem;
}
@media (hover: hover) and (pointer: fine) {
  .p-voice-nav li a:hover {
    background: #934849;
    color: #fff;
  }
}
.p-voice-nav li.-here a {
  background: #E4DDD0;
}
@media (hover: hover) and (pointer: fine) {
  .p-voice-nav li.-here a:hover {
    background: #E4DDD0;
    color: #6A5246;
  }
}
.p-voice-voiceList .-item {
  background: #fff;
  padding: 40px 8%;
}
.p-voice-voiceList .-item + .-item {
  margin-top: 40px;
}
@media screen and (min-width: 1080px) {
  .p-voice-voiceList .-item {
    padding: 45px 60px;
  }
}
.p-voice-voiceList .-item .-head h2 {
  height: 36px;
  line-height: 1;
  font-size: clamp(14px, 0vw + 14px, 14px);
  padding: 0 0 0 56px;
  background: url(../img/common/icon_voice.svg) no-repeat 0 50%/36px;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 20px;
}
.p-voice-voiceList .-item .-head h3 {
  font-size: clamp(18px, 0vw + 18px, 18px);
  font-weight: 600;
  margin-bottom: 28px;
}
.p-voice-voiceList .-item .-body .-ph {
  margin-top: 1rem;
}
.p-voice-voiceList .-item .-body .-ph img {
  border: 1px solid #BBB0AB;
  display: block;
}
/*# sourceMappingURL=voice.css.map */