html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

img {
margin: 0 auto;
vertical-align: bottom;
margin-top: -1px;
}

img.img-gap {
  margin-top: -1px;
}

.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

#result {
  max-width: 750px;
  margin: 0 auto;
}

.en {
  color: #c3c3c3;
  font-size: 1.8em;
  font-weight: 800;
  margin-right: 7px;
  font-family: math;
}

/* .wrapper .title-page .fv img {
  vertical-align: bottom;
  line-height: 1.0em;
} */

.scroll-container {
  display: flex;
  overflow-x: auto; /* 横スクロールを許可 */
  scroll-behavior: smooth; /* スムーズなスクロール */
  white-space: nowrap; /* 要素が折り返されないようにする */
  width: 100%; /* コンテナの幅を親要素に合わせる */
}

.scroll-container img {
  max-width: 136%; /* 画像の幅を親要素に合わせる */
  height: auto; /* アスペクト比を維持 */
  margin: 0 6% 5% 6%;/* 画像間の余白 */
}

.soudan_img{
  margin-top: 10%;
}

.details {
	transition: .3s;
	overflow: hidden;
	margin-top: -10px;
	padding: 4% 5%;
	&:last-of-type {
		margin-bottom: 0;
	}
}
.details[open] {
	margin-top: 0;
	padding-bottom: 10px;
} 
.details-summary {
	display: flex;
	padding: 12px 15px;
    transition: .3s;
	transform: translateY(10px);
	background-color: #eb8689;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	&:hover {
		cursor: pointer;
	}
}
.details-summary::-webkit-details-marker {
	display: none;
}
.details[open] .details-summary {
	transform: translateY(0);
}
.details-content {
	padding: 20px;
	background-color: #fff2ee;
}

p.details-content{
  font-size: 14px;
  text-align: left;
  line-height: 23px;
  letter-spacing: 2px;
  font-family: sans-serif;
  color: #4a4a4a;
}

.Qsize {
    margin: 1% 3% 0 0;
    font-size: 29px;
    font-family: serif;
    flex: inherit;
    color: #fff;
}

p.maintx {
  padding: 7px;
  font-size: 0.7em;
  text-align: left;
  line-height: 20px;
  letter-spacing: 1px;
  font-family: sans-serif;
  font-weight: 600;
  color: #fff;
}

.all_list{
  margin: 0px 4px 40px 4px;
}

.page ul {
  width: 100%;
  list-style-type: none; /* デフォルトのリストマーカーを削除（オプション） */
  padding: 0;            /* リストの余白を削除（オプション） */
  text-align: center!important; /* ul自体を中央揃え */
  background-color: #fff2ee;
}

.page li {
  display: inline-block;  /* liをインラインブロックに */
  width: 100%;     
  margin: 0 auto;
}

.loading relative{
  background-color:#fff7f5;
}

.q {
  display: block;
  padding: 2% 0 0 0;
  margin: 20px 15px 0 15px;
  font-size: 1.5em;
  font-weight: normal;
  font-family: sans-serif;
  text-align: left;
}

.page ul li:first-child .q {
  margin-top: 15px;
  padding-top: 0;
}

.title-page .absolute {
  bottom: 2.9%;
  left: 0;
  right: 0;
  width: 82%;
}


.relative {
  position: relative;
}

.absolute {
  position: absolute!important;
}

.cta-anim {
  animation: yureru 2s infinite;
  cursor: pointer;
  transform-origin: center;
}

/* スライド */
@media screen and (max-width: 767px) {
	.slider-2 .slick-slide {
    width: 370px;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
}

.slider-2 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-2 .slick-arrow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 180px;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.slider-2 .slick-next {
  right: 0;
}
.slider-2 .slick-prev {
 background: url(https://recolor.life/lp/06a/06a_test/assets/media/ico_arrow01.webp) no-repeat center/cover;
    left: 5px;
    width: 40px !important;
    height: 40px;
    border: none;
    position: absolute;
    top: 170px;
    z-index: 1;
}
.dots-2 .slick-dots {
  text-align: center;
}
.dots-2 .slick-dots li {
  display: inline-block;
}
.dots-2 .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
}
.dots-2 .slick-dots .slick-active button {
  background: #fff;
}

.button.slick-prev.slick-arrow {
    background: url(https://recolor.life/lp/06a/06a_test/assets/media/ico_arrow01.webp) no-repeat center/cover;
    right: 5px;
    width: 40px !important;
    height: 40px;
    border: none;
    position: absolute;
    top: 170px;
    z-index: 1;}

.slider-2 .slick-next {
    background: url(https://recolor.life/lp/06a/06a_test/assets/media/ico_arrow02.webp) no-repeat center/cover;
    right: 5px;
    width: 40px !important;
    height: 40px;
    border: none;
    position: absolute;
    top: 170px;
    z-index: 1;
}

/*一番初めのCTA*/
img.cta-anim {
  padding: 1% 3% 7%;
  margin-top: -31%;
}

/* CTAのゆれるアニメーション */
@keyframes yureru {
  0% {
      transform: translate(0px, 2px);
  }
  5% {
      transform: translate(0px, -2px);
  }
  10% {
      transform: translate(0px, 2px);
  }
  15% {
      transform: translate(0px, -2px);
  }
  20% {
      transform: translate(0px, 2px);
  }
  25% {
      transform: translate(0px, -2px);
  }
  30% {
      transform: translate(0px, 0px);
  }
}

/* フッター */
footer {
  width: 100%;
  height: 50%;
  background: #fff;
  text-align: center;
  padding: 10% 0 10% !important;
  display: block;
}

footer img {
  width: 15%;
  height: auto;
  margin-bottom: 5%;
}

footer a {
text-decoration: none;
}

footer a,p {
  color: #333;
  font-size: 1rem;
}
/* フッター */



@media screen and (min-width: 750px) {

  .en {
    color: #c3c3c3;
    font-size: 1.9em;
    font-weight: 800;
    margin-right: 8px;
    font-family: math;
  }

  .q {
    padding: 3% 0 0 7%;
    font-size: 2.5em;
    font-weight: 500;
    text-align: left;
  }
  
  footer a,p {
    font-size: 1.2rem;
  }


}

@media (min-width: 768px) {
  .slick-initialized .slick-slide{
  display: block;
  width: 3%;}
  }