@charset "UTF-8";

/* CSS Document */
.wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/*ローディングアニメーション*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #EDECE9;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 200px;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ヘッダー */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}

.header-logo {
  width: 130px;
  height: auto;
  display: flex;
  align-items: center;
}

.header-content-wrapper {
  padding: 0 48px;
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.header-content-wrapper a {
  display: block;
  text-align: center;
  line-height: 50px;
}

/* ヘッダーSP */
@media screen and (max-width: 700px) {
  .header-content-wrapper {
    padding: 0 16px;
    height: 50px;
  }

  .header-logo {
    width: 104px;
    height: auto;
  }
}

/* ハンバーガーメニュー　*/
@media not screen and (max-width: 700px) {
  .openbtn {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .openbtn {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: transparent;
    z-index: 9999;
  }

  .openbtn span {
    display: block;
    transition: .4s;
    position: absolute;
    left: 13px;
    height: 1px;
    background-color: #424746;
  }

  .openbtn span:nth-of-type(1) {
    top: 22px;
    width: 50%;
  }

  .openbtn span:nth-of-type(2) {
    top: 29px;
    width: 30%;
  }

  .openbtn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
    width: 35%;
    top: 20px;
    left: 16px;
  }

  .openbtn.active span:nth-of-type(2) {
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
    top: 32px;
    left: 16px;
  }
}

/* ナビゲーション */
#nav-content ul {
  font-size: 1.9rem;
  list-style: none;
}

#nav-content ul li a {
  text-decoration: none;
  color: inherit;
}

@media not screen and (max-width: 700px) {
  #nav-content {
    /*     position: fixed; */
    top: 15px;
    right: 50px;
    z-index: 999;
  }

  #nav-content ul {
    display: flex;
    gap: 32px;
  }

  #nav-content .nav-logo,
  #nav-content .ham-border,
  #nav-content .ham-reserveguidance,
  #nav-content .ham-button,
  #nav-content .ham-img {
    display: none;
  }
}

/* ナビゲーション　ホバーで下線が伸びる */
.link-scale li a {
  position: relative;
}

.link-scale li a:hover {
  opacity: 1;
}

.link-scale li a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 1px;
  background: #424746;
  /*アニメーションの指定*/
  transition: all .4s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: left top;
  /*左上基点*/
}

/*現在地とhoverの設定*/
.link-scale li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

@media screen and (max-width: 700px) {
  .nav-logo {
    display: block;
    margin: 16px auto;
    width: 16%;
  }

  #nav-content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: #DBDAD6;
    text-align: left;
    display: none;
  }

  #nav-content.active {
    transition: .5s;
    display: block;
    animation: appear .5s ease;
  }

  @keyframes appear {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .header-navigation ul {
    display: block;
  }

  .header-navigation ul li {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 2.0rem;
  }

  .ham-border {
    margin-top: 24px;
    margin-bottom: 24px;
    border: 0.5px solid #424746;
  }

  .ham-reserveguidance {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .ham-button {
    color: #fff;
    background-color: #424746;
    padding: 20px 0;
    width: 227px;
    margin: 0 auto;
    display: block;
    font-size: 2.0rem;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 24px;
  }

  .ham-img {
    width: 100%;
    height: 200px;
  }

	.header-content-wrapper a{
		line-height: 32px;
	}
	
}

/* トップセクション */
.section-top {
  background-color: #DBDAD6;
  position: relative;
}

.section-top-mainpic {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-top-mainpic-bg {
  max-height: 800px;
  width: 40%;
}

.section-top-mainpic h1 img {
  padding: 0 48px;
}

.section-top-scroller {
  position: absolute;
  right: 48px;
  bottom: 24px;
}



/*　 スクロールダウンアニメーション */
/*スクロールダウン全体の場所*/
.scrolldown1 {
  /*描画位置*/
  position: absolute;
  left: 100%;
  bottom: 120px;
  /*全体の高さ*/
  height: 24px;
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/
  width: 1px;
  height: 120px;
  background: #424746;
  /*線の動きのはやさ。永遠にループ*/
  animation: pathmove 3.0s linear infinite;
  /*pathmoveというアニメーションの定義をしている*/
  opacity: 0;
}


.scrolldown1::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 120px;
  background: rgba(255, 255, 255, 0.3);
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }

  50% {
    height: 60px;
    opacity: 1;
  }

  100% {
    height: 0;
    top: 120px;
    opacity: 1;
  }
}

.section-top-scroller p {
  font-size: 1.6rem;
}




/* トップセクションSP */
@media screen and (max-width: 700px) {
  .section-top-mainpic-bg {
    height: 610px;
    width: 100%;
    object-fit: cover;
  }

  .section-top-mainpic h1 img {
    display: none;
  }

  .section-top-scroller {
    right: 24px;
    bottom: -55px;
  }
}



/* コンセプト */


.section-concept-wrapper {
  padding: 240px 0px 200px 0px;
}

.section-concept-wrapper-description {
  margin-bottom: 180px;
}

.section-concept-wrapper-description h2 {
  margin: 0 auto;
  max-width: 900px;
  width: 90%;
  height: auto;
  margin-bottom: 88px;
}

.section-concept-wrapper-description h3 {
  width: 90%;
  font-size: 2.4rem;
  line-height: 3.2rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 88px;
}

.section-concept-wrapper-description p {
  width: 90%;
  font-size: 1.6rem;
  line-height: 4.0rem;
  text-align: center;
  margin: 0 auto;
}

/* スクロールで流れる文字 */

.section-concept-widetext {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.section-concept-widetext-bg {
  position: relative;
  z-index: 1;
}

.section-concept-widetext-scroll {
  position: absolute;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  top: 40%;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  right: 0;
  mix-blend-mode: difference;
  z-index: 2;
}



.elegancebeauty {
  width: 100%;
  height: auto;
}





/* コンセプトSP */
@media screen and (max-width: 700px) {
  .section-concept-wrapper {
    padding: 160px 0px 100px 0px;
  }

  .section-concept-wrapper-description {
    margin-bottom: 100px;
  }

  .section-concept-wrapper-description h2 {
    max-width: 340px;
    height: auto;
    margin-bottom: 40px;
  }

  .section-concept-wrapper-description h3 {
    font-size: 1.6rem;
    margin-bottom: 48px;
  }

  .section-concept-wrapper-description p {
    font-size: 1.4rem;
  }
	

.elegancebeauty {
  display: block;
  width: 100%;
  height: auto;
}





}

/* ブランドメニュー */
.section-brands {
  background-color: white;
}

.section-brands-wrapper {
  padding-top: 120px;
}

.section-brands-wrapper h2 {
  margin: 0 auto;
  max-width: 156px;
  height: auto;
  margin-bottom: 56px;
}

.section-brands-wrapper-description {
  width: 90%;
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 120px;
}

.section-brands-wrapper ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.section-brands-wrapper-brand {
  padding-top: 64px;
  padding-bottom: 64px;
  width: 33.33%;
  text-align: center;
  border: solid 0.5px #424746;
}

.section-brands-wrapper-brand:not(:first-child) {
  border-left: none;
}

.section-brands-wrapper-image {
  max-width: 271px;
  width: 100%;
  height: auto;
  margin-bottom: 64px;
  padding-right: 16px;
  padding-left: 16px;
}

.section-brands-wrapper-link {
  text-align: center;
}

.section-brands-wrapper-linkbutton {
  text-decoration: none;
  color: #424746;
}

.section-brands-wrapper-p {
  font-size: 2.0rem;
  margin-bottom: 16px;
}

.section-brands-wrapper-arrow {
  margin: 0 auto;
}

/* ブランドメニューSP */
@media screen and (max-width: 700px) {
  .section-brands-wrapper {
    padding-top: 100px;
  }

  .section-brands-wrapper h2 {
    max-width: 97px;
    margin-bottom: 40px;
  }

  .section-brands-wrapper-description {
    font-size: 1.2rem;
    line-height: 2.4rem;
    margin-bottom: 64px;
  }

  .section-brands-wrapper ul {
    display: flex;
    flex-direction: column;
  }

  /* listの1番目はnailtip */
  .section-brands-wrapper-brand:nth-of-type(1) {
    order: 2;
  }

  .section-brands-wrapper-brand:nth-of-type(2) {
    order: 1;
  }

  .section-brands-wrapper-brand:nth-of-type(3) {
    order: 3;
  }

  .section-brands-wrapper-brand {
    display: flex;
    justify-content: space-around;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    height: 200px;
    border: solid 0.5px #424746;
  }

  .section-brands-wrapper-brand:not(:first-child) {
    border: solid 0.5px #424746;
  }

  .section-brands-wrapper-brand:nth-of-type(1) {
    border-top: none;
  }

  .section-brands-wrapper-brand:nth-of-type(3) {
    border-top: none;
  }

  .section-brands-wrapper-image {
    width: 120px;
    max-width: 100%;
    padding: 0px;
    margin-bottom: 0px;
  }

  .section-brands-wrapper-link {
    width: 120px;
    max-width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
  }

  .section-brands-wrapper-p {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }

  .section-brands-wrapper-arrow {
    margin: 0 auto;
  }
}

/* ネイルサロン */
.section-nailsalon-wrapper-topimage {
  width: 100%;
  height: auto;
}

.section-nailsalon-wrapper-content {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-nailsalon-wrapper-content h2 {
  max-width: 454px;
  width: 80%;
  height: auto;
  margin: 0 auto 160px auto;
  position: relative;
}

/*
.section-nailsalon-wrapper-content h2::before {
  content: "";
  width: 200px;
  height: 0.5px;
  background: #EDECE9;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
*/
.section-nailsalon-wrapper-content h2::after {
  content: "";
  width: 200px;
  height: 0.5px;
  background: #424746;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  /* animation: border_anim 1s ease forwards; アニメーション重複してる。js-activeになったらの方に記載
  transform-origin: bottom left; */
}

@keyframes border_anim {
  0% {
    transform: scale(0, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.section-nailsalon-wrapper-content h3 {
  width: 90%;
  font-size: 2.4rem;
  line-height: 3.2rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 160px;
}

.section-nailsalon-wrapper-flex {
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 885px;
  gap: 24px;
}

.section-nailsalon-wrapper-img-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
}

.section-nailsalon-wrapper-img-vertical img {
  max-width: 360px;
  width: 100%;
  height: auto;
}

.section-nailsalon-wrapper-flex ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-nailsalon-wrapper-flex ul li {
  list-style: none;
}

.section-nailsalon-wrapper-list h4 {
  color: #918C85;
  font-size: 3.2rem;
  font-weight: 100;
  margin-bottom: 32px;
  line-height: 1;
}

.section-nailsalon-wrapper-list h4 span {
  font-size: 5.6rem;
}

.section-nailsalon-wrapper-list p {
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.section-nailsalon-wrapper-button {
  padding-top: 120px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: end;
  width: 885px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  gap: 25px;
}

.section-nailsalon-wrapper-button li {
  list-style: none;
  max-width: 50%;
}

.section-nailsalon-wrapper-button-guidance {
  margin-bottom: 16px;
}

.section-nailsalon-wrapper-frame {
  text-decoration: none;
  color: #fff;
  background-color: #424746;
  padding: 20px 0;
  width: 290px;
  max-width: 100%;
  /* liを50%にしたのでそのサイズを超えない */
  display: block;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 2px;
}

.section-nailsalon-wrapper-img {
  display: flex;
  width: 100%;
  margin-bottom: 200px;
}

.section-nailsalon-wrapper-img img {
  width: 20%;
  height: auto;
}

.section-nailsalon-wrapper-img-sp {
  display: none;
}

/* ネイルサロンSP */
@media screen and (max-width: 700px) {
  .section-nailsalon-wrapper-content {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .section-nailsalon-wrapper-content h2 {
    max-width: 224px;
    width: 80%;
    margin: 0 auto 80px auto;
  }

  .section-nailsalon-wrapper-content h2::after {
    width: 200px;
    bottom: -40px;
  }

  .section-nailsalon-wrapper-content h3 {
    width: 100%;
    font-size: 1.6rem;
    margin-bottom: 40px;
  }

  .section-nailsalon-wrapper-flex {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .section-nailsalon-wrapper-img-vertical {
    display: flex;
    justify-content: space-around;
    flex-direction: unset;
    gap: 24px;
    margin-bottom: 80px;
  }

  .section-nailsalon-wrapper-img-vertical img {
    max-width: 148px;
  }

  .section-nailsalon-wrapper-flex ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 32px;
  }

  .section-nailsalon-wrapper-list h4 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .section-nailsalon-wrapper-list h4 span {
    font-size: 4.0rem;
  }

  .section-nailsalon-wrapper-list p {
    font-size: 1.4rem;
  }

  .section-nailsalon-wrapper-button li {
    max-width: 100%;
  }

  .section-nailsalon-wrapper-button {
    padding-top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: end;
    width: 227px;
    gap: 16px;
    margin: 0 auto;
  }

  .section-nailsalon-wrapper-frame {
    width: 227px;
    display: block;
    font-size: 1.6rem;
  }

  .section-nailsalon-wrapper-img {
    display: none;
  }

  .section-nailsalon-wrapper-img-sp {
    display: block;
  }

  .section-nailsalon-wrapper-img-sp {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 120px;
  }

  .section-nailsalon-wrapper-img-sp img {
    width: 45%;
    height: auto;
  }
}

/* ネイルチップ */
.section-nailtip-wrapper-topimage {
  width: 100%;
  height: auto;
}

.section-nailtip-wrapper-content {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-nailtip-wrapper-content h2 {
  max-width: 454px;
  width: 90%;
  height: auto;
  margin: 0 auto 160px auto;
  position: relative;
}

.section-nailtip-wrapper-content h2::after {
  content: "";
  width: 200px;
  height: 0.5px;
  background: #424746;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.section-nailtip-wrapper-content h3 {
  width: 90%;
  margin: 0 auto;
  font-size: 2.4rem;
  line-height: 3.2rem;
  margin-bottom: 160px;
  text-align: center;
}

.section-nailtip-wrapper-content ul {
  display: flex;
  justify-content: space-around;
  margin-bottom: 120px;
  width: 885px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.section-nailtip-wrapper-content ul li {
  list-style: none;
  text-align: center
}

.section-nailtip-wrapper-content ul li h4 {
  color: #918C85;
  font-size: 3.2rem;
  font-weight: 100;
  margin-bottom: 32px;
  line-height: 1;
}

.section-nailtip-wrapper-content ul li h4 span {
  font-size: 5.6rem;
}

.section-nailtip-wrapper-content ul li p {
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.section-nailtip-wrapper-frame {
  text-decoration: none;
  color: #fff;
  background-color: #424746;
  padding: 20px 0;
  width: 290px;
  display: block;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0 auto 200px auto;
  text-align: center;
}

.section-nailtip-wrapper-img {
  display: flex;
  justify-content: space-around;
  width: 1200px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.section-nailtip-wrapper-img img {
  max-width: 480px;
  width: 45%;
  height: auto;
}

/* ネイルチップSP */
@media screen and (max-width: 700px) {
  .section-nailtip-wrapper-content {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-nailtip-wrapper-content h2 {
    max-width: 254px;
    width: 90%;
    margin: 0 auto 80px auto;
  }

  .section-nailtip-wrapper-content h2::after {
    width: 200px;
    bottom: -40px;
  }

  .section-nailtip-wrapper-content h3 {
    width: 100%;
    font-size: 1.6rem;
    margin-bottom: 40px;
  }

  .section-nailtip-wrapper-content ul {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin-bottom: 64px;
    width: 90%;
    gap: 32px;
  }

  .section-nailtip-wrapper-content ul li {
    text-align: left;
  }

  .section-nailtip-wrapper-content ul li h4 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .section-nailtip-wrapper-content ul li h4 span {
    font-size: 4.0rem;
  }

  .section-nailtip-wrapper-content ul li p {
    font-size: 1.4rem;
  }

  .section-nailtip-wrapper-frame {
    width: 227px;
    font-size: 1.6rem;
    margin: 0 auto 80px auto;
  }
}

/* インテリア */
.section-interior {
  background-color: #DBDAD6;
}

.section-interior-wrapper-topimage {
  width: 100%;
  height: auto;
}

.section-interior-wrapper-content {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-interior-wrapper-content h2 {
  max-width: 454px;
  width: 90%;
  height: auto;
  margin: 0 auto 160px auto;
  position: relative;
}

.section-interior-wrapper-content h2::after {
  content: "";
  width: 200px;
  height: 0.5px;
  background: #424746;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.section-interior-wrapper-content h3 {
  width: 90%;
  font-size: 2.4rem;
  margin: 0 auto;
  margin-bottom: 160px;
  text-align: center;
}

.section-nailsalon-wrapper-ul {
  display: flex;
  justify-content: space-around;
  margin-bottom: 120px;
  width: 1200px;
  /*画面幅縮めると見切れるので、max-width 100%を入れておく*/
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  gap: 25px;
}

.section-nailsalon-wrapper-ul li {
  list-style: none;
  text-align: center
}

.section-nailsalon-wrapper-ul li h4 {
  color: #918C85;
  font-size: 3.2rem;
  font-weight: 100;
  margin-bottom: 32px;
  line-height: 1;
}

.section-nailsalon-wrapper-ul li h4 span {
  font-size: 5.6rem;
}

.section-nailsalon-wrapper-ul li p {
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.section-interior-wrapper-frame-ul {
  width: 885px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
  text-align: center;
  gap: 24px;
}

.section-interior-wrapper-frame {
  text-decoration: none;
  color: #fff;
  background-color: #424746;
  padding: 20px 0;
  width: 290px;
  display: block;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0 auto;
  text-align: center;
}

.section-interior-wrapper-frame-ul li {
  list-style: none;
  text-align: center;
  margin-bottom: 120px;
}

.interior-border {
  border: 0.5px solid #424746;
}

.section-interior-wrapper-galleryguide {
  display: none;
  /* margin: 0 auto;
  width: 600px;
  height: auto;
  max-width: 80%;
  padding: 20px; */
}

.section-interior-wrapper-img {
  padding-top: 80px;
}

.section-interior-wrapper-img-chair,
.section-interior-wrapper-img-accessories,
.section-interior-wrapper-img-vase {
  display: none;
}

.section-interior-wrapper-img-pc {
  width: 1120px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.scroll-infinity {
  display: block;
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
  align-items: center;
}

.scroll-infinity__list--left {
  animation: infinity-scroll-left 120s infinite linear 0.5s both;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroll-infinity__item {
  width: calc(80vw / 2);
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: 40px;
}

.scroll-infinity__item>img {
  width: 96%;
  max-width: 100%;
  height: auto;
  display: flex;
  align-items: center;
}

/* インテリアSP */
@media screen and (max-width: 700px) {
  .section-interior-wrapper-content {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-interior-wrapper-content h2 {
    max-width: 254px;
    margin: 0 auto 80px auto;
  }

  .section-interior-wrapper-content h2::after {
    width: 200px;
    bottom: -40px;
  }

  .section-interior-wrapper-content h3 {
    width: 100%;
    font-size: 1.6rem;
    margin-bottom: 40px;
  }

  .section-nailsalon-wrapper-ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 64px;
    width: 90%;
    gap: 32px;
  }

  .section-nailsalon-wrapper-ul li {
    text-align: left;
  }

  .section-nailsalon-wrapper-ul li h4 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .section-nailsalon-wrapper-ul li h4 span {
    font-size: 4.0rem;
  }

  .section-nailsalon-wrapper-ul li p {
    font-size: 1.4rem;
  }

  .section-interior-wrapper-frame-ul {
    padding-top: 0px;
    width: 227px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    gap: 16px;
    margin: 0 auto;
    margin-bottom: 64px;
  }

  .section-interior-wrapper-frame {
    width: 100%;
    font-size: 1.6rem;
  }

  .section-interior-wrapper-frame-ul li {
    margin-bottom: 0px;
  }

  .section-interior-wrapper-galleryguide {
    display: none;
  }

  .section-interior-wrapper-img {
    padding-top: 40px;
  }

  .section-interior-wrapper-img-chair,
  .section-interior-wrapper-img-accessories,
  .section-interior-wrapper-img-vase {
    display: block;
  }

  .section-interior-wrapper-img-pc {
    display: none;
  }

  .section-interior-wrapper-img-chair {
    width: 70%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 32px;
  }

  .section-interior-wrapper-img-accessories {
    width: 60%;
    height: auto;
    margin-left: 16px;
    margin-bottom: 32px;
  }

  .section-interior-wrapper-img-vase {
    width: 208px;
    height: 240px;
    object-position: -16px 0px;
    display: block;
    margin-left: auto;
  }

  .scroll-infinity__item {
    width: calc(100vw / 1.5);
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 14px;
  }
}

/* プロフィール*/
.section-profile-wrapper {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-profile-wrapper h2 {
  text-align: center;
  font-size: 5.6rem;
  font-weight: 100;
  margin: 0 auto;
  margin-bottom: 40px;
  width: 90%;
}

.section-profile-wrapper-subheading {
  text-align: center;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 120px;
}

.profile-border {
  border: 0.5px solid #424746;
  transform: scale(0, 0)
}

.section-profile-wrapper-content {
  padding-top: 120px;
  display: flex;
  justify-content: space-around;
  width: 1120px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  gap: 24px;
}

.section-profile-wrapper-content img {
  max-width: 417px;
  width: 100%;
  height: auto;
}

.section-profile-wrapper-content h3 {
  font-size: 2.4rem;
  font-weight: 100;
  margin-bottom: 64px;
}

.section-profile-wrapper-description {
  line-height: 3.2rem;
}

/* プロフィールSP */
@media screen and (max-width: 700px) {
  .section-profile-wrapper {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-profile-wrapper h2 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .section-profile-wrapper-subheading {
    margin-bottom: 48px;
    font-size: 1.2rem;
  }

  .section-profile-wrapper-content {
    padding-top: 40px;
    display: block;
    width: 90%;
  }

  .section-profile-wrapper-content img {
    max-width: 194px;
    width: 100%;
    margin: 0 auto;
    display: block;
    margin-bottom: 48px;
  }

  .profile-wrapper-name {
    width: 90%;
    margin: 0 auto;
  }

  .section-profile-wrapper-content h3 {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .section-profile-wrapper-description {
    font-size: 1.4rem;
  }
}

/* メッセージ */
.section-message {
  background-image: url("../images/pc/message_bg.jpg");
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: cover;
  background-position: center;
}

.section-message-wrapper {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-message-wrapper h2 {
  text-align: center;
  font-size: 5.6rem;
  font-weight: 100;
  margin-bottom: 80px;
  color: #fff;
}

.message-border {
  border: 0.5px solid #fff;
}

.section-message-wrapper-message {
  width: 90%;
  padding-top: 120px;
  color: #fff;
  line-height: 4.0rem;
  max-width: 800px;
  margin: 0 auto;
}

/* メッセージSP */
@media screen and (max-width: 700px) {
  .section-message {
    background-position: 65% 100%;
  }

  .section-message-wrapper {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-message-wrapper h2 {
    font-size: 2.4rem;
    margin-bottom: 48px;
  }

  .section-message-wrapper-message {
    padding-top: 48px;
    font-size: 1.4rem;
    line-height: 3.2rem;
  }
}

/* コンタクト */
.section-contact {
  background: #fff;
}

.section-contact-wrapper {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-contact-wrapper h2 {
  text-align: center;
  font-size: 5.6rem;
  font-weight: 100;
  margin-bottom: 40px;
  color: #424746;
  ;
}

.section-contact-wrapper-subheading {
  text-align: center;
  margin-bottom: 80px;
}

.section-contact-wrapper-frame {
  text-decoration: none;
  color: #fff;
  background-color: #424746;
  padding: 20px 0;
  width: 290px;
  display: block;
  font-size: 2.4rem;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0 auto;
  text-align: center;
}

/* コンタクトSP */
@media screen and (max-width: 700px) {
  .section-contact-wrapper {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-contact-wrapper h2 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .section-contact-wrapper-subheading {
    margin-bottom: 48px;
    font-size: 1.2rem;
  }

  .section-contact-wrapper-frame {
    width: 227px;
    font-size: 1.6rem;
  }
}

/* フッター */
footer {
  padding-top: 200px;
  padding-bottom: 200px;
}

.footer-concept-descroption {
  width: 90%;
  font-size: 2.0rem;
  line-height: 5.6rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 120px;
}

footer img {
  margin: 0 auto;
  display: block;
  width: 90px;
  max-width: 100%;
  margin-bottom: 60px;
}

footer small {
  text-align: center;
  display: block;
}

/* フッターSP */
@media screen and (max-width: 700px) {
  footer {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .footer-concept-descroption {
    font-size: 1.4rem;
    line-height: 4.0rem;
    margin-bottom: 80px;
  }

  footer img {
    margin-bottom: 48px;
  }

  footer small {
    font-size: 1.4rem;
  }
}

/* js ふわっと浮き上がる：使用せず */
.fadeUpTrigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* js 順番にふわっと浮き上がる：使用せず */
.box {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* inview ビューインでふわっと浮き上がる */
.view {
  opacity: 0;
  transform: translateY(50px);
  transition: 2.5s;
}

.view.js-active {
  opacity: 1;
  transform: translateY(0%);
}

/* inview ビューインで線が伸びる　*/
.section-nailsalon-wrapper-content h2.js-active::after,
.section-nailtip-wrapper-content h2.js-active::after,
.section-interior-wrapper-content h2.js-active::after {
  animation: border_anim 1.5s linear forwards;
  transform-origin: bottom left;
}

@keyframes border_anim {
  0% {
    transform: scale(0, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* inview ビューインで線が伸びる　*/
.section-profile-wrapper div.extend.js-active,
.section-message-wrapper div.extend.js-active {
  animation: border_anim 3.0s linear forwards;
  transform-origin: bottom left;
}

@keyframes border_anim {
  0% {
    transform: scale(0, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* js pagetop  */

@media screen and (max-width: 700px) {
	
#page-top {
	display: none!important;
}

#page-top a {
	display: none!important;
}
}

/*pcのみ表示*/

#page-top {
	display: block;
}

#page-top a {
	display: block;
}


/*リンクの形状*/
#page-top a {
  padding-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: transparent;
  width: 60px;
  height: 60px;
  color: #424746;
  text-align: center;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  transition: all 0.5s;
}

#page-top a::before {
  content: "";
  width: 32px;
  height: 1px;
  background: #424746;
  position: absolute;
  bottom: 40px;
  left: 14px;
  right: 0;
}

#page-top a:hover {
  background: rgba(66, 71, 70, 0.5);
  outline-width: 0;
  color: #fff;
  ransition: all 0.5s;
}

#page-top a:hover::before {
  background: #fff;
  transition: all 0.5s;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(100px);
  }
}