@charset "utf-8";
/* CSS Document */

/* -----------------------------
店長（サロン）ブログ
----------------------------- */

.blog-wraps {
    margin: 8px auto 0 auto;
    width: 100%;
    max-width: 800px;
    display: flex;
	border: 2px #3386BC solid;
	border-radius: 8px;
	padding: 15px;
	text-align: left;
	background: #FFFFFF;
}

.blog-wraps.newinfo {
    border: 2px #A1C92F solid;
}

.blog-wraps.kuchikomi {
    border: 2px #C54B78 solid;
}

.blog-wraps.this {
	background: #FFF9EE;
	}

.blog-wraps .blog-title {
    background: #a979d5;
    color: #fff;
    padding: 2px 8px;
    display: inline-block; /* コンテンツに合わせた幅 */
    margin-bottom: 8px; /* 下のテキストとの間のスペース */
}

.blog-wraps .text-content {
    display: block;
	padding: 0px 10px 0px 0px;
}

.blog-wraps .text-content img{
	width:80px;
	margin-right:10px;
	float: left;
	}

.blog-wraps .text-content p.b_date{
	font-size: 0.7rem;
	margin: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-wraps .text-content p.b_title{
	color: #3386BC;
	margin: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-wraps.newinfo .text-content p.b_title{
    color: #A1C92F;
}

.blog-wraps.kuchikomi .text-content p.b_title{
    color: #C54B78;
}

.blog-wraps .text-content p.b_kuchikomi{
	margin: 2px;
}

.blog-wraps .text-content p.b_kuchikomi_return{
	margin: 8px auto;
  background: #FAF1F5;
  padding:8px 12px;
  border-radius:8px;
}

.blog-wraps .text-content p.b_kuchikomi_return span{
  /* color: #C54B78; */
  font-weight:bold;
}

.blog-wraps .text-content p.b_msg{
	margin: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-content::after {
    content: "";
    display: block;
    clear: both;
}

a.blog-link{
	text-decoration: none;
	color:#000;
}


/* スマホ用のスタイル */
@media (max-width: 600px) {

	.blog-wraps {
		margin: 5px auto;
		width: 94%;
		display: block;
	}
}

.anime-top {
	opacity: 0; /* 初期状態では透明にする */
	transform: translateY(50px); /* 初期状態では30px下に配置 */
	transition: opacity 0.6s ease, transform 0.6s ease; /* アニメーションの設定 */
}

.anime-top.animate {
	opacity: 1; /* 表示状態 */
	transform: translateY(0); /* 元の位置に移動 */
	animation: fadeIn 2s forwards; /* アニメーションの持続時間を2秒に設定 */
}

.anime-txt {
	opacity: 0;
	display: inline-block;
}

.anime-txt.animate {
	opacity: 1;
}

.anime-txt span {
	display: inline-block;
	opacity: 0;
	animation: fadeIn 0.5s forwards;
}



/* -----------------------------------------
 サロン写真スライド
-------------------------------------------*/

.salon-photo {
  max-width: 1000px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
}

.swiper-slide p{
	margin: 1px;
	}

.photo-slider {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.4s ease;
  will-change: transform;
}

.photo-slider li {
  flex: 0 0 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

.photo-slider img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.dot-nav {
  text-align: center;
  margin-top: 3px;
}

.dot-nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.dot-nav span.active {
  background: #333;
}

.arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  font-size: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
  z-index: 10;
}

.arrow.prev {
  left: 0px;
}

.arrow.next {
  right: 0px;
}

/* PCでは横並び3枚表示＋スライド禁止 */
@media (min-width: 769px) {
  .photo-slider {
    transition: none !important;
    transform: none !important;
  }

  .photo-slider li {
    flex: 0 0 33.33%;
  }

  .arrow,
  .dot-nav {
    display: none;
  }
}