@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");
#arsoasalon {
  margin-top: 0;
}

#art .font-moto {
  font-family: "Noto Serif JP", serif;
  font-size: min(2.003vw, 24px);
  line-height: 2.1;
}
#art .btn-art {
  width: 360px;
  margin: 0 auto;
  padding: 8px 5px;
  font-size: 18px;
  text-align: center;
  color: #727171;
  border: 1px solid #727171;
  border-radius: 50px;
  background-color: #fff;
  cursor: pointer;
}
#art .btn_artHover, #art .contents_link:hover p, #art .read_link:hover p {
  color: #fff;
  background-color: #727171;
}
#art .kv {
  width: 100%;
}
#art .kv img {
  max-width: none;
  width: 100%;
}
#art .read {
  max-width: 790px;
  width: 100%;
  margin: 50px auto 0;
  padding: 0 10px min(11.7vw, 140px);
}
#art .read_title {
  width: 100%;
  text-align: center;
  margin: 0 auto min(4.2vw, 50px);
}
#art .read_title img {
  width: min(40.2vw, 512px);
}
#art .read_comment {
  text-align: center;
  padding-bottom: min(3.3vw, 40px);
}
#art .read_comment p {
  margin-bottom: min(3.3vw, 40px);
}
#art .read_link:hover img {
  transform: scale3d(1.1, 1.1, 1.1);
}
#art .read_linkImg {
  margin: 0 auto min(4.2vw, 50px);
  overflow: hidden;
}
#art .read_linkImg img {
  transition: 0.5s;
}
#art .read_linkText {
  transition: 0.5s;
}
#art .contents {
  width: 100%;
  padding: min(12.5vw, 150px) 10px min(11.7vw, 140px);
  background-color: #fff;
  transition: background-color 7s ease;
}
#art .contents_title {
  width: 100%;
  margin: 0 auto min(12.2vw, 145px);
  text-align: center;
}
#art .contents_title img:nth-child(1) {
  width: min(69.3vw, 1217px);
}
#art .contents_title img:nth-child(3) {
  width: min(16.8vw, 295px);
}
#art .contents_subTitle {
  width: 100%;
  margin: 0 auto min(4.2vw, 50px);
  text-align: center;
}
#art .contents_subTitle img {
  width: min(40.2vw, 512px);
}
#art .contents_comment {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
  text-align: center;
}
#art .contents_pallet {
  max-width: 1300px;
  width: 100%;
  margin: min(7vw, 135px) auto min(7.2vw, 140px);
  padding: min(5.4vw, 70px);
  display: flex;
  justify-content: space-around;
  background-color: #fff;
}
#art .contents_pallet figure {
  width: 40%;
}
#art .contents_pallet p {
  width: 51%;
  font-size: min(1.43vw, 18px);
  line-height: 2.1;
}
#art .contents_pallet p span {
  margin-bottom: min(3.28vw, 40px);
  line-height: 1;
  font-size: min(2.86vw, 36px);
  display: block;
}
#art .contents_link {
  display: block;
  padding: min(4.2vw, 50px) 0 0;
}
#art .change-bg {
  background-color: #f5f2ef; /* JS用背景色の変更用のクラス */
}
#art .art_swiper {
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
}
#art .art_swiper .swiper-wrapper {
  transition-timing-function: linear;
}
#art .art_swiper .swiper-slide {
  cursor: pointer;
  overflow: hidden;
}
#art .art_swiper .swiper-slide img {
  cursor: pointer;
  transition: 0.3s;
}
#art .art_swiper .swiper-slide:hover img {
  transform: scale3d(1.1, 1.1, 1.1);
}
#art .m-modal {
  width: 100%;
  height: 100vh;
  display: none;
}
#art .m-modal__bg {
  width: 100%;
  height: 100vh;
  background: rgba(245, 242, 239, 0.8);
  position: fixed;
  z-index: -10;
}
#art .m-modal__content {
  width: 64vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#art .m-modal__content--YouTube {
  width: 80%;
  padding-top: 45%;
  position: relative;
}
#art .m-modal__content--YouTube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0px 0px 4px 1px rgba(113, 113, 113, 0.6196078431);
}
#art .m-modal__close {
  color: #727171;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 0;
}
#art .m-modal__on {
  display: block;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  animation: modal ease-in 0.2s forwards;
}
@keyframes modal {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (max-width: 768px){
  #art .font-moto {
    font-size: 4vw;
    line-height: 8vw;
  }
  #art .btn-art {
    width: 71.3333333333vw;
    padding: 1.3333333333vw 0.9333333333vw;
    font-size: 4vw;
  }
  #art .read {
    padding: 0 10px 16vw;
  }
  #art .read_title {
    margin: 0 auto 8.6666666667vw;
  }
  #art .read_title img {
    width: 75.4666666667vw;
  }
  #art .read_comment {
    margin: 0 auto 7.3333333333vw;
  }
  #art .read_comment p {
    margin: 0 auto 7.3333333333vw;
  }
  #art .read_linkImg {
    margin: 0 auto 5.3333333333vw;
  }
  #art .contents {
    padding: 16vw 10px 17.3333333333vw;
  }
  #art .contents_title {
    margin: 0 auto 10.6666666667vw;
  }
  #art .contents_title img:nth-child(1) {
    width: 98vw;
  }
  #art .contents_title img:nth-child(3) {
    width: 28.6666666667vw;
  }
  #art .contents_subTitle {
    margin: 0 auto 5.3333333333vw;
  }
  #art .contents_subTitle img {
    width: 75.4666666667vw;
  }
  #art .contents_comment {
    max-width: none;
  }
  #art .contents_pallet {
    width: 95%;
    margin: 12vw auto 12vw;
    padding: 8vw 2vw;
    display: block;
  }
  #art .contents_pallet figure {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #art .contents_pallet figure img {
    width: 75.3333333333vw;
    margin-bottom: 6.6666666667vw;
  }
  #art .contents_pallet p {
    width: 100%;
    line-height: 1.5;
    font-size: 3.3333333333vw;
  }
  #art .contents_pallet p span {
    margin-bottom: 4.6666666667vw;
    text-align: center;
    font-size: 7.3333333333vw;
  }
  #art .m-modal__content {
    width: 95%;
  }
  #art .m-modal__content--YouTube {
    width: 90%;
    padding-top: 50.625%;
  }
}