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

.cafeaulait-color_camp {
	color: #000;
	font-feature-settings: "palt";
  text-align: center; 
}

.cafeaulait-color_camp img{
	max-width: 100%;
	height: auto;
}

.cafeaulait-color_camp ul li{
  list-style: none;
}

/*---------------------------
CSS animetion
 --------------------------*/
/* 右から左へスライドイン */
.RightSlideIn{
  animation: LightSlideIn 3s;
}
@keyframes LightSlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左から右へスライドイン */
.LeftSlideIn{
  animation: LeftSlideIn 1.6s;
}
@keyframes LeftSlideIn {
 0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 上から下へスライドイン */
.DownSlideIn{
  animation: DownSlideIn 1.6s;
}
@keyframes DownSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 下から上へスライドイン */
.UpSlideIn{
  animation: UpSlideIn 4s;
}
@keyframes UpSlideIn {
  0% {
    opacity: 0;
    transform: translateY(64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*---------------------------
hero-image h1
 --------------------------*/
.hero-image {
  position: relative;
  width: 740px;
  height: 550px;
  margin-bottom: 45px; 
  }

.hero-image .catch_copy1 {
	position: absolute;
	top: 245px;
	left: 9px;
	margin: 0;
	padding: 0;
  }


/*---------------------------
4-lineup_cart
 --------------------------*/
.style-lineup-cart_box ul {
	display: flex;
	justify-content:center;
	align-items:flex-start;
  padding-left: 0;
}
.tent-image ,.tarpaulin-image ,.lowchair-image ,.chair-image ,.low-table-image ,.height-table-image ,.sleeping-bag-image ,.petbottle-image {
  position: relative;
  }

.tent-image__pat ,.low-table-image__pat {
  margin-top: 32px;
  }
.lowchair-image__pat ,.petbottle-image__pat {
  margin-top: 6px;
  }
.chair-image__pat {
  margin-top: -26px;
  }

 .sleeping-bag-image__pat {
  margin-top: -48px;
  }

.style-lineup-cart1 ,.style-lineup-cart5 ,.style-lineup-cart7{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:80px 0 0;
  padding-left:14px;
  width: 265px;
  height: 48px;
}

.style-lineup-cart2 ,.style-lineup-cart8{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:75px 0 0;
  padding-right:10px;
  width: 265px;
  height: 48px;
}

.style-lineup-cart3{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:60px 0 0 10px;
  padding:0;
  width: 265px;
  height: 48px;
}

.style-lineup-cart4{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:92px 0 0;
  padding:0;
  width: 265px;
  height: 48px;
}

.style-lineup-cart6{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:120px 0 0;
  padding:0;
  width: 265px;
  height: 48px;
}

.cafeaulait-color_camp .style-lineup-cart1 p ,.cafeaulait-color_camp .style-lineup-cart2 p ,.cafeaulait-color_camp .style-lineup-cart5 p ,.cafeaulait-color_camp .style-lineup-cart7 p ,.cafeaulait-color_camp .style-lineup-cart8 p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin-left:5px;
  padding:0;
  color: #000;
  font-size: 0.8rem;
  font-weight: 400;
  width: max-content;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

.cafeaulait-color_camp .style-lineup-cart3 p ,.cafeaulait-color_camp .style-lineup-cart4 p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin-left:12px;
  padding:0;
  color: #000;
  font-size: 0.8rem;
  font-weight: 400;
  width: max-content;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

.cafeaulait-color_camp .style-lineup-cart6 p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin-left:12px;
  padding:0;
  color: #000;
  font-size: 0.8rem;
  font-weight: 400;
  width: max-content;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

.cafeaulait-color_camp .style-lineup-cart1_comment ,.cafeaulait-color_camp .style-lineup-cart5_comment ,.cafeaulait-color_camp .style-lineup-cart7_comment{
  position: absolute;
  top: 335px;
  left: 55px;
  margin:0;
  padding:0;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: 275px;
	font-feature-settings: "palt";
  text-align: justify;
}
.cafeaulait-color_camp .style-lineup-cart2_comment,.cafeaulait-color_camp .style-lineup-cart8_comment{
  position: absolute;
  top: 335px;
  left: 42px;
  margin:0;
  padding:0;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: 275px;
	font-feature-settings: "palt";
  text-align: justify;
}
.cafeaulait-color_camp .style-lineup-cart3_comment{
  position: absolute;
  top: 280px;
  left: 55px;
  margin:0;
  padding:0;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: 275px;
	font-feature-settings: "palt";
  text-align: justify;
}
.cafeaulait-color_camp .style-lineup-cart4_comment{
  position: absolute;
  top: 345px;
  left: 42px;
  margin:0;
  padding:0;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: 275px;
	font-feature-settings: "palt";
  text-align: justify;
}
.cafeaulait-color_camp .style-lineup-cart6_comment{
  position: absolute;
  top: 410px;
  left: 42px;
  margin:0;
  padding:0;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  width: 275px;
	font-feature-settings: "palt";
  text-align: justify;
}
/*---------------------------
タイトル字
 --------------------------*/
.cafeaulait-color_camp h2 {
    margin: 40px 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.cafeaulait-color_camp p {
  text-align: left;
}

/*---------------------------
 ふきだしtitle black
 --------------------------*/
.btn-gradient {
  position: relative;
  margin: 1.6rem 0 2rem;
  padding: 0.2rem;
  border-radius: 10px;
  background: #000;
}

.btn-gradient:before,
.btn-gradient:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: #000;
}

.btn-gradient:before {
  bottom: -15px;
  left: 30px;
  width: 30px;
  height: 30px;
}

.btn-gradient:after {
  bottom: -30px;
  left: 50px;
  width: 15px;
  height: 15px;
}
.btn-gradient span {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  color: #FFF;
}

/*---------------------------
sab_title
--------------------------*/
.episode00_txt p {
	font-size: 1.2rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  text-align: center !important;
  padding-bottom: 30px;
}
/*---------------------------
アンダーライン
--------------------------*/
.under {
  background: linear-gradient(transparent 80%, #a4b7d0 80%);
}

.under_tobe {
  background: linear-gradient(transparent 80%, #c6bcac 80%);
}

/*---------------------------
sceneコーデ
--------------------------*/
.cafeaulait-color_camp_scene{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cafeaulait-color_camp_scene li{
  padding: 0 45px 10px;
	}
.cafeaulait-color_camp_scene li:nth-child(3) {
  margin-left: 52px;
}

/*---------------------------
 レビューふきだし 
--------------------------*/
.balloon-set-box {
  display: flex;
  flex-wrap: nowrap;
}
.balloon-set-box.left { /* 左 */
  flex-direction: row;
}
.balloon-set-box.right { /* 右 */
  flex-direction: row-reverse; /* アイコンと吹き出しの並びを入れ替える */
}
.balloon {
  position: relative; /* 三角の位置を固定するために設定 */
  display: inline-block;
/*  max-width: 300px; */
  margin: 10px 20px 20px; /* 上 左右 下のマージン */
  padding: 8px 15px; /* ふきだし内の余白 */
  background: #FFF5ED; /* 背景色 */
  text-align: left; /* テキストの揃え */
  border-radius: 15px;
  font-size: 0.9rem;
  flex: 1;
}
.balloon::after {
  content: '';
  border: 14px solid transparent;
  border-top-color: #FFF5ED;
  position: absolute;
  top: 0;
}
.left .balloon::after { /* 左側からの三角の位置 */
  left: -10px;
}
.right .balloon::after { /* 右側からの三角の位置 */
  right: -10px;
}

.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  overflow: hidden;
}

/*---------------------------
 ROSAさんコメント 
--------------------------*/
.rosa-san_comment-list{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding-bottom:10px;
	}
.rosa-san_comment-item{
	position: relative;
	}
.rosa-san_comment-item__title{
	position: absolute;
	top:50%;
	left: 50%;
	width: 100%;
	color: #000;
	font-size: 16px;
	line-height: 1.8;
	transform: translate3d(-50%,-50%,0);
	padding: 0 20px 100px;
}

/*---------------------------
もっと見るを非表示にする 
--------------------------*/
.block-link { 
  display: none;
}

/*---------------------------
イベントタイトルレイアウト調整
--------------------------*/
.block-top-event {
    padding: 0;

}

/*---------------------------
商品呼び出し情報部分非表示
--------------------------*/

.block-goods-list--sort-order-items{
  display: none;
}