@charset "utf-8";

* {
  /* outline: 2px solid blue; */
  font-family: 'Noto Sans JP', 'YuMincho', 'Hiragino Mincho ProN', serif, "Noto Sans JP", sans-serif;
}
*, *:before, *:after {
  box-sizing: border-box;
  }

img {
  width: 100%;
}

.heading__h3 {
  font-size: 50px;
  letter-spacing: 5px;
  line-height: 72px;
  text-align: center;
  
}
.h3__span {
  font-family: YuMincho;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 29px;
  text-align: center;
  display: block;
  margin-bottom: 80px;
}

/* 上へ戻る　page top */
.page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
}
.page-top a {
  background: #FFFFFF;
  text-decoration: none;
  color: #121212;
  width: 68px;
  height: 68px;
  padding: 12px;
  text-align: center;
  display: block;
  border-radius: 50%;
  border: 1px solid #121212;
  opacity: 0.9;
  transition: all .3s ease;
}
.page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
/* 　矢印　 */
  .arrow::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #121212;
    transform: rotate(-45deg);
    transform-origin: 50% 0.5px;
  }
  .arrow::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 40px;
    background-color: #121212;
    transform-origin: 50% 0.5px;
  }

.sp-br {
  display: none;
}
@media screen and (max-width: 768px) {
  .l-padding {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sp-br {
    display: block;
  }
  .heading__h3 {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 29px;    
  }
  .h3__span {
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 40px;
  }
}
/* ==== ヘッダー ==== */
.header{
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 1%, rgba(254,229,229,1) 50%, rgba(255,255,255,1) 100%);
  margin-bottom: 123px;
  /* max-width: 1500px; */
  position: relative;
}
.h1--logo {
  width: 90px;
  height: 25.37px;
  position: absolute;
  top: 38px;
  right: 155px;
  margin-bottom: 38px;
}

.header__wrapper {
  position: relative; /* 親要素に relative を指定して、子要素を絶対配置 */
  display: flex;
  justify-content: center; /* 横方向に中央寄せ */
  align-items: center; /* 垂直方向に中央寄せ */
  height: 600px; /* 高さを指定　調整 */
  width: 100%; /* 幅を100%にして中央に配置 */
  margin-bottom: 120px;
}

.mv-side-left{
  position: absolute; /* 位置を絶対指定 */
  left: 0; /* mv-side-left の画像を左に配置 */
  width: 1100px;
  margin-bottom: 120px;
}
.mv-side-left img {
  display: block; /* 画像の下に余白ができないようにする */
  width: 100%; /* 画像が親要素の幅に合わせて伸びる */
  height: auto; /* アスペクト比を保つ */
}

.swiper-container {
  position: absolute; /* 位置を絶対指定 */
  right: 0; /* mv-side-right の画像を右に配置 */
  width: 480px;
}


.swiper {
  padding-bottom: 50px;
}

.swiper-slide {
  /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;
}

/* ページネーション位置 */
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: -20px;
}
/*  ドットのサイズと色を変更  */
.swiper-pagination-bullet {
  background-color: #FFFFFF;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
/* ページネーション丸の色を変更 */
.swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active {
  background-color: #FFFFFF;
}
.swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active {
  background-color: #FFC0CB;
}
.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active {
  background-color: #707070;
}
/* ページネーション間隔 */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 16px 20px;
}
/* 両方の画像が重なるように設定 */
.img-mv-side {
  position: absolute;
  top: -180px; /* 画像の上端を親要素に合わせる */
}
.img-mv-side img {
  width: 100%; /* 幅を100%にして画像を親要素に合わせる */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、親要素に収まるように調整 */
}
.mv-contents {
  margin: 0 auto;
  width: 980px;
}
.mv-txt {
  background-image: url(../img/box-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  padding: 78px 314px 79px;
}
.mv-ttl__p {
  font-size: 32px;
  color: #121212;
  line-height: 51px;
  font-weight: lighter;
  margin-bottom: 48px;
}
.mv-txt__p {
  font-size: 15px;
  color: #707070;
  line-height: 30px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 32px;
}
.mv-txt-back__p {
  font-size: 15px;
  color: #707070;
  line-height: 30px;
  font-weight: lighter;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .header {
    width: 100%;
  }
  .h1--logo {
    position: static;
    height: auto;
    margin: 24px auto 30px;
  }
  .header__wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: 24px;
  }
  .mv-side-left{
    width: 100%;
    height: auto;
    position: static;
    margin-bottom: 24px;
  }
  .mv-side-right{
    width: 100%;
    margin-bottom: 24px;
  }
  .img-mv-side {
    top: 0; /* 画像の上端を親要素に合わせる */
  }
  .mv-contents {
    width: 100%;
  }
  .mv-txt {
    padding: 54px 37px;
  }
  .mv-ttl__p {
    font-size: 24px;
    line-height: 39px;
    text-align: center;
    margin-bottom: 48px;
  }
  .mv-txt__p {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 32px;
  }
  .mv-txt-back__p {
    font-size: 14px;
    line-height: 28px;
  }
  .swiper {
    padding-bottom: 16px;
  }
  .swiper-container {
    position: static;
    width: 100%;
    margin-bottom: 80px;
  }
  /* ページネーション位置 */
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 25px;
}
}

/* ====　メイン　 ==== */

.bg__img {
  /* max-width: 1500px; */
  /* height: 400px; 400pxで大丈夫？確認*/
  margin-bottom: 112px;
}
.bg__img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .bg__img {
    width: 100%;
    height: auto;
    margin-bottom: 80px;
  }
}
/* ====  item  ==== */

/*  item 左寄せのレイアウト
-------------------------------------------- */
.item-left {
  margin-bottom: 120px;
}
.item-p-top {
  width: 282px;
  margin-bottom: 8px;
  height: 72px;
  color: #FFFFFF;
  font-size: 50px;
  background: rgb(253,197,167);
  background: linear-gradient(90deg, rgba(253,197,167,1) 0%, rgba(255,136,112,1) 100%);
}
.item-p {
  width: 382px;
  margin-bottom: 28px;
  height: 72px;
  color: #FFFFFF;
  font-size: 50px;
  background: rgb(253,197,167);
  background: linear-gradient(90deg, rgba(253,197,167,1) 0%, rgba(255,136,112,1) 100%);
}
.item__img-left > img {
  width: 70%;
  height: 450px;
  object-fit: cover;
}
.item__img-left {
  position: relative;
}
.item__left-txt-top {
  position: absolute;
  width: 230px;
  top: -100px;
  right: 24%;
}
.item__left-txt-left {
  position: absolute;
  width: 230px;
  top: 154px;
  left: -22px;
}
.item__left-txt-bottom {
  position: absolute;
  width: 230px;
  right: 40%;
  bottom: -120px;
}
@media screen and (max-width: 1000px) {
  .item__left-txt-top,
  .item__left-txt-left,
  .item__left-txt-bottom {
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .item-p-top,
  .item-p {
    font-size: 24px;
  }
  .item-p-top {
    width: 152px;
    height: 35px;
  }
  .item-p {
    width: 200px;
    height: 35px;
    margin-bottom: 32px;
  }
  .item__img-left > img {
    width: 100%;
  }
  .item-left {
    margin-bottom: 80px;
  }
  .item__left-txt-top {
    width: 136px;
    top: -80px;
    left: 250px;
  }
  .item__left-txt-left {
    width: 136px;
    top: 154px;
    left: -22px;
  }
  .item__left-txt-bottom {
    width: 136px;
    top: 350px;
    left: 200px;
  }
}
/*  item 右寄せのレイアウト
-------------------------------------------- */
.item-right {
  margin-bottom: 254px;
}
.item-p-right {
  color: #FFFFFF;
  width: 182px;
  height: 72px;
  margin-left: auto;
  margin-bottom: 8px;
  font-size: 50px;
  background: rgb(253,197,167);
  background: linear-gradient(90deg, rgba(253,197,167,1) 0%, rgba(255,136,112,1) 100%);
  text-align: center;
}
.item-p-bottom {
  color: #FFFFFF;
  width: 499px;
  height: 72px;
  margin-left: auto;
  margin-bottom: 28px;
  font-size: 50px;
  background: rgb(253,197,167);
  background: linear-gradient(90deg, rgba(253,197,167,1) 0%, rgba(255,136,112,1) 100%);
  text-align: center;
}
.item__img-right {
  position: relative;
  width: 70%;
  margin-left: auto;
}
.item__img-right > img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.item__right-txt-top {
  position: absolute;
  width: 230px;
  top: -50px;
  left: -120px;
}
.item__right-txt-left {
  position: absolute;
  width: 230px;
  top: 30%;
  right: -20px;
}
.item__right-txt-bottom {
  position: absolute;
  width: 230px;
  left: 20%;
  bottom: -150px;
}
@media screen and (max-width: 1000px) {
  .item__right-txt-top,
  .item__right-txt-left,
  .item__right-txt-bottom{
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .item-p-right,
  .item-p-bottom {
    font-size: 24px;
  }
  .item-p-right {
    width: 104px;
    height: 35px;
  }
  .item-p-bottom {
    width: 271px;
    height: 35px;
    margin-bottom: 32px;
  }
  .item__img-right {
    width: 100%;
  }
  .item__img-right > img {
    width: 100%;
  }
  .item__right-txt-top {
    width: 136px;
    top: 6px;
    left: 6px;
  }
  .item__right-txt-left {
    width: 136px;
    top: 187px;
    right: -5px;
  }
  .item__right-txt-bottom {
    width: 136px;
    bottom: -60px;
  }
}
/* ==== color-variations ==== */

.color-variations {
  /* max-width: 1500px; */
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(232,232,232,1) 50%, rgba(255,255,255,1) 100%);
  margin-bottom: 120px;
}

.color-variations__item {
  max-width: 1179px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 120px;
}
.variations__item img {
  width: 28%;
  height: auto;
}

.color-variations__item li {
  position: relative;
  z-index: 1;
}
.product__color-txt{
  position: absolute;
  color: #121212;
  font-size: 16px;
  left: 48%;
  bottom: 20px;
}

/*  丸の中にor文字
-------------------------------------------- */
.color-variations__item li::after {
  content: 'or';
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #121212;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 14px;
  font-family: 'Noto Sans CJK JP';
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #707070;
  position: absolute;
  right: -26%;
  bottom: 39%;
  z-index: -1;
}
.color-variations__item li:last-child::after {
  display: none;
}

/*  丸の中にor文字　　ここまで
-------------------------------------------- */

.color-variations__contents {
  display: flex;
  max-width: 980px;
  margin: 0 auto;
  margin-bottom: 120px;
  position: relative;
}
.color-variations__img {
  width: 36%;
  position: absolute;
  top: 16%;
}
.color-variations__img img {
  width: 100%;
  object-fit: cover; /* 画像が親要素に収まるようにする */
}
.color-variations__txt {
  width: 70%; /* テキストボックスの幅 */
  padding: 50px 90px;
  margin-left: auto;
  background-color: #FFFFFF; /* 注意！色戻す#FFFFFF */
  border: 1px solid #707070;
}
.product-name__p {
  color: #121212;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  line-height: 26px;
}
.product__p {
  color: #121212;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  line-height: 24px;
}
.product__ul li {
  color: #707070;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 20px;
}
.btn{
  display: block;
  width:229px;
  height:52px;
  margin-left: auto;
  line-height:52px;
}
.btn a{
  display:block;
  color:#FFFFFF;
  width:100%;
  height:100%;
  font-size:14px;
  text-decoration: none;
  background:#707070;
  background-image: url(../img/icon-link-w.svg);
  background-repeat: no-repeat;
  background-position: right 20px top 50%;
  text-align:center;
  transition: all 1s ease;
}
.btn a span {
  margin-right: 20px;
}
.btn a:hover{
  color:#FFFFFF;
  margin-left:0px;
  margin-top:0px;
  background:#FFC0CB;
  border:1px solid #707070;
  box-shadow:none;
  background:#707070;
  background-image: url(../img/icon-link-w.svg);
  background-repeat: no-repeat;
  background-position: right 20px top 50%;
}

@media screen and (max-width: 768px) {
  .color-variations {
    width: 100%;
    margin-bottom: 80px;
  }
  .color-variations__item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .color-variations__item li {
    margin-bottom: 80px;
  }
  .variations__item img {
    width: 100%;
    position: static;
  }
  .color-variations__item li::after {
    bottom: -20%;
    right: 35%;
  }
  .color-variations__item li:last-child {
    margin-bottom: 40px;
  }
  .color-variations__contents {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto 40px;
  }
  .color-variations__img {
    width: 40%;
    top: -20%;
  }
  .color-variations__img img {
    width: 100%;
  }
  .color-variations__txt {
    width: 87.6%; /* テキストボックスの幅 */
    padding: 80px 20px 20px;
    margin-top: 53px;
    margin-left: 0;
  }
  .product-name__p {
    font-size: 16px;
    line-height: 24px;
  }
  .product__p {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .product__ul li {
    font-size: 14px;
  }
  .product__ul li:last-child{
    margin-bottom: 24px;
  }
  .btn{
    width:302px;
    margin-left: 0;
  }
  .btn a{
    background-position: right 10% top 50%;
  }
  .btn a:hover{
    background-position: right 10px top 50%;
  }

  /*  モーダル開くボタン　取扱店舗を見る
  -------------------------------------------- */
  .btn {
    width:302px;
    margin: 0 auto;
  }
  .btn a span {
    margin: 0 auto;
  }
}

.btn-open{
  display: block;
  color:#121212;
  width:600px;
  height:96px;
  line-height:96px;
  margin: 0 auto;
  margin-bottom: 234px;
  font-size:14px;
  background:#FFFFFF;
  background-image: url(../img/icon-modal.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: right 40px top 50%;
  border:1px solid #707070;
  text-align:center;
  text-decoration: none;
}
.btn-open:hover{
  color:#111112;
  background:#FFC0CB;
  border:1px solid #707070;
  background-image: url(../img/icon-modal.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: right 40px top 50%;
  box-shadow:none;
  cursor: pointer;
} 
@media screen and (max-width: 768px) {
  .btn-open {
    width: 342px;
    margin-bottom: 80px;
  }
}

/* モーダルウィンドウ */
.modal-window {
  display: none;
  width: 100%;
  height: 100%;
  padding: 72px;
  position: fixed;
  top: 0;
  overflow-y: scroll;
  z-index: 110;
}
.modal-contents {
  color: #000;
  width: 860px;
  height: 1586px;
  margin: 0 auto;
  font-size: 14px;
  background: #FFFFFF;
  position: relative;
  z-index: 700;
}
/* モーダル閉じるボタン */
.btn-close {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 77px;
  right: 300px;
  background-image: url(../img/icon-close.svg);
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: right 20px top 20px;
  padding: 1em;
  cursor: pointer;
  z-index: 800;
}
.modal-txt-p {
  display: inline-block;
  color: #FFFFFF;
  width: 600px;
  margin: 96px 130px 20px;
  font-size: 18px;
  font-weight: bold;
  background: #454545;
  line-height: 50px;
  text-align: center;
}
.modal__dl {
  display: flex;
  max-width: 600px;
  margin: 40px auto;
  gap: 15.3%;
}
.store__info {
  display: flex;
  gap: 30%;
  margin-bottom: 20px;
}
.modal__dd-store {
  white-space: nowrap;
  display: flex;
}
.modal__dd-add {
  white-space: nowrap;
}
.modal__hr {
  width: 600px;
  margin: 0 auto;
  border-bottom: 1px solid #707070;
}

/* オーバーレイ */
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
/* 表示領域外へはスクロールさせない */
.no_scroll {
  overflow: hidden;
}
@media screen and (max-width: 768px){
  .modal-window {
    padding: 72px;
  }
  .modal-contents {
    width: 100%;
    height: auto;
    position: relative;
  }
  /* モーダル閉じるボタン */
  .btn-close {
    width: 75px;
    height: 75px;
    position: absolute;
    top: 77px;
    right: 70px;
  }
  .modal-txt-p {
    width: 80%;
    margin: 74px 20px 20px;
    font-size: 16px;
  }
  .modal__dl {
    display: block;
    width: 90%;
    margin: 10px
  }
  .modal__dl p {
    text-align: left;
    margin-left: 20px;
}
  .modal__dd-add {
    margin: 10px 0;
  }
  .modal__dd-store p {
    margin-left: 0;
  }
  .store__name {
    text-align: left;
    margin: 10px;
  }
  .store__info {
    display: block;
    margin: 10px;
  }
  .modal__hr {
    width: 90%;
  }
}

/* ====  other item  ==== */

.other-item {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 1%, rgba(254,229,229,1) 50%, rgba(255,255,255,1) 100%);
}
.other-item-contents {
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .other-item-contents {
    width: 100%;
  }
}

/*  アコーディオン
-------------------------------------------- */
.accordion {
  position: relative;
  max-width: 980px;
  height: auto;
  margin-inline: auto;
  margin-top: 30px;
  margin-bottom: 56px;
}
.accordion-container {
  margin-bottom: 200px;
}
.accordion-title {
  display: flex;
  padding: 24px;
  margin-bottom: 4px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px #00000029;
  cursor: pointer;
}
.other-item__img {
  width: 16.32%;
}
.other-item__img img{
  width: 100%;
}
.accordion-title ul {
  display: block;
  width: 65%;
  padding: 15px 0px 15px 83px ;
}
.accordion-title  {
  align-items: center;
}
.other-item-ttl__p {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0px;
  margin-bottom: 8px;
}
.other-item-txt__p {
  font-size: 16px;
  margin-bottom: 4px;
}
.other-item-salesname__p {
  font-size: 14px;
  font-weight: lighter;
}
@media screen and (max-width: 768px) {
  .accordion {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 120px;
  }
  .accordion-title {
    padding: 16px;
    margin-bottom: 4px;
  }
  .accordion-title ul {
    width: 65%;
    padding: 16px 0px 16px 16px;
  }
  .other-item__img {
    width: 26%;
  }
  .other-item__img img {
    margin-top: 37px;
  }
  .other-item-ttl__p {
    font-size: 16px;
  }
  .other-item-txt__p {
    font-size: 14px;
  }
  .other-item-salesname__p {
    font-size: 12px;
  }
}

.accordion-content {
  display: none;
  padding: 240px 24px 24px;
  margin-top: -4px;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px #FFFFFF;/* コンテンツボックスの枠線 */
}
.accordion__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.accordion__img {
  width: 36%;
  position: absolute;
  top: -190px;
}
.accordion__img img {
  width: 100%;
}
.product-variations__txt {
  width: 720px;
  padding: 54px 44px;
  margin-bottom: 80px;
  background-color: #FFFFFF; /* 注意！色戻す#FFFFFF */
  border: 1px solid #707070;
}
.product-name__p {
  color: #121212;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
}
.product__p {
  color: #121212;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  margin-bottom: 24px;
}
.product__ul {
  color: #707070;
  font-size: 14px;
  font-weight: 200;
}
/* タイトルの背景色 */
.accordion-title {
  background-color: #FFFFFF;
}
.accordion-title.js-accordion-title.open {
  box-shadow: none;
}

@media screen and (max-width: 768px){
  .product-variations__txt {
    width: 100%;
    padding: 54px 24px;
    margin-top: -140px;
  }
  .accordion-btn a {
    width: 80%;
  }
  .accordion-btn a span {
    font-size: 12px;
  }
}
.voc {
  margin-bottom: 120px;
}
.voc-ttl {
  width: 720px;
  line-height: 50px;
  text-align: center;
  background-color: #454545;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
  margin-bottom: 70px;
}
.faq {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.slide-items {
  width: 100%;
  height: auto;
}
.slide-items > div {
  width: 100%; 
}
.slide-items::before {
  content: url(../img/icon-slide-l.svg);
  display: inline-block;
  position: absolute;
  top: 35%;
  left: -30px;
  cursor: pointer;
}
.slide-items::after {
  content: url(../img/icon-slide-r.svg);
  display: inline-block;
  position: absolute;
  top: 35%;
  right: -10px;
  cursor: pointer;
}
.faq-ttl {
  color: #121212;
  line-height: 24px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}
.faq-left::before,.faq-right::before {
  content: url(../img/slide-top.svg);
  display: block;
}
.faq-txt {
  width: 280px;
  margin: 0 auto 34px; 
}
.faq-txt p {
  color: #121212;
  line-height: 22.4;
  font-size: 14px;
  font-weight: 100;
  text-align-last: left;  
}
.faq-left::after, .faq-right::after {
  content: url(../img/slide-bottom.svg);
  display: block;
}
.accordion-close {
  display: flex;
  justify-content: flex-end;
  margin-top: 73px;
  cursor: pointer;
}
.accordion-close p::after {
  border-right: solid 2px #000000;
  border-top: solid 2px #000000;
  content: "";
  height: 10px;
  transform: rotate(-45deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 10px;
  display: inline-block;
  margin-left: 20px;
}

@media screen and (max-width: 768px){
  .voc {
    margin-bottom: 120px;
  }
  .voc-ttl {
    width: 100%;
    font-size: 18px;
    margin-bottom: 70px;
  }
  .faq {
    width: 100%;
    margin: 0 auto;
  }
  .faq-ttl {
    margin-top: 40px;
    margin-bottom: 50px;
  }
  .slider {
    display: block;
  }
  .slide-items > div {
    width: 80%; 
    margin: 0 auto;
  }
  .slide-items::before {
    top: 40%;
    left: 0px;
  }
  .slide-items::after {
    top: 40%;
    right: 0px;
  }
  /*  レスポンシブ時カッコ装飾
-------------------------------------------- */
  .faq-left::before,
  .faq-right::before {
    content: "";
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width: 100%;
    height: 20px;
  }
  .faq-left::after,
  .faq-right::after {
    content: "";
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width: 100%;
    height: 20px;
    position: static;
  }
  .faq-txt {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 90px;
  }
}

/* 矢印 */
.accordion-title {
  position: relative;
}
.accordion-title::after {
  border-right: solid 2px #000000;
  border-top: solid 2px #000000;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 10px;
}
.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

hr {
  border-bottom: 1px solid #CCCCCC;
}
/* ====  footer  ==== */
.footer {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.footer-logo img {
  width: 90px;
  height: 25.37px;
  margin-top: 56px;
}
.footer__copy {
  font-size: 12px;
  margin-bottom: 56px;
}
.footer__nav ul {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  font-size: 14px;
}
.footer__nav ul li:first-child {
  margin-right: 30px;
}

@media screen and (max-width: 768px){
  .footer {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }
  .footer h1 {
    margin-bottom: 17px;
    text-align: center;
  }
}