<!--css2-->
@charset "euc-jp";
.header-leadtext h1 {
	font-weight:700;
	color:#0059ff;
	padding-bottom:8px;
	border-bottom:3px solid #0059ff;
	line-height:100%;
	position:relative;
	z-index:10;
}
.top-leadtext-cosme {
	text-align:center;
}
@media screen and (max-width : 767px){
	.header-leadtext {
	padding-bottom:48px;	
	}
	.leadtext-catch {
	padding-top:16px;
	position:relative;
	z-index:10;
	text-align:center;
	}
	.header-leadtext h1 {
	font-size:4.4vw;
	text-align:center;
	margin-top:16px;
	margin-bottom:16px;
	position:relative;
	z-index:10;	
	}
}
@media screen and (min-width : 768px){
	.leadtext-catch {
	padding-top:16px;
	position:relative;
	z-index:10;	
	}
	.header-leadtext {
	min-height:490px;	
	}
	.header-leadtext h1 {
	font-size: 3.0rem;
	margin-top:36px;
	margin-bottom:36px;
	position:relative;
	z-index:10;	
	}
	.header-leadtext:after {
	content:"";
	position:absolute;
	z-index:5;
	background-image:url();
	background-repeat:no-repeat;
	width:366px;
	height:393px;
	right:0px;
	bottom:0px;
	}
	.header-leadtext p {
	margin-bottom:32px;	
	}
		.leadtext-btn-box {
	width:800px;
	margin:auto;
	}
}
.top-reason {
	background:#baeaff;
	position:relative;
	z-index:15;	
}
.top-reason:before {
	content:"";
	background-image:url(https://img21.shop-pro.jp/PA01510/982/etc_base64/Z2FtZV9mYWNl.png?cmsp_timestamp=20240926124838);
	background-repeat:no-repeat;
	width:66px;
	height:77px;
	position:absolute;
	top:-22px;
	left:50%;
	margin-left:-33px;
}
.top-reason h2 {
	text-align:center;
	color:#0059ff;
	font-weight:700;
	padding-top:60px;	
}
.top-reason .reasonball {
	width:160px;
	height:160px;
	border-radius:50%;
	margin:24px auto;
	background:#ffffff;	
	display:-webkit-box; /* Android rower */
	display:-ms-flexbox;/*--- IE10 ---*/
	display:-webkit-flex; /* Safari */
	display:flex;
	-webkit-justify-content: center; /* Safari */
	justify-content:center;
	-webkit-align-items:center; /* Safari */
	align-items:center;
}
.top-reason p,.top-reason span {
	font-weight:700;	
}
@media screen and (max-width : 767px){
	.top-reason h2 {
	font-size:4vw;
	margin-bottom:32px;	
	}
	.top-reason li {
	text-align:center;	
	}
}
@media screen and (min-width : 768px){
	.top-reason h2 {
	font-size:3.0rem;
	margin-bottom:32px;	
	}
	.top-reason li {
	padding-left:72px;
	padding-right:72px;	
	}
}
.top-step-tt,.top-step-st {
	font-weight:700;
}
.fire .reasonball {
	animation: bounce 0.3s linear 1;
}
@keyframes bounce{
	0%	{transform: scale(1.4);}
	80%	{transform: scale(0.9);}
	90%	{transform: scale(1.1);}
	100%	{transform: scale(1);}
}
.top-step-img {
	width:160px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
.top-step-img img {
	width:160px;
	height:160px;
	border-radius:50%;
	margin:0px auto;
	background:#ffffff;	
	display:-webkit-box; /* Android rower */
	display:-ms-flexbox;/*--- IE10 ---*/
	display:-webkit-flex; /* Safari */
	display:flex;
	-webkit-justify-content: center; /* Safari */
	justify-content:center;
	-webkit-align-items:center; /* Safari */
	align-items:center;
	position:relative;
	z-index:10;
}
.top-step-img:before {
	position:absolute;
	top:0px;
	left:0px;
	width:50px;
	height:50px;
	color:#ffffff;
	text-align:center;
	line-height:50px;
	z-index:15;
	border-radius:50%;
	font-size:2.4rem;
	font-weight:700;
	font-family: 'Roboto Condensed', sans-serif;
}
.top-step-1:before {
	content:"1";
	background:#26afaf;	
}
.top-step-2:before {
	content:"2";
	background:#f69a0c;	
}
.top-step-3:before {
	content:"3";
	background:#0059ff;	
}
.top-step-box h3 {
	text-align:center;
	font-weight:700;
}
@media screen and (max-width : 767px){
	.top-step-tt {
	margin-top:20px;
	font-size:1.8rem;
	padding-bottom:8px;
	}
	.top-step-st {
	font-size:1.6rem;
	padding-bottom:32px;
	}
	.top-step-box li {
	text-align:center;	
	}
	.top-step-box h3 {
	font-size:1.6rem;
	padding-top:24px;
	padding-bottom:24px;
	}
	.voice-frame {
	height:240px;	
	}
	.news-frame {
	height:240px;	
	}
	.snsframe {
	margin-top:30px;
	}
	.btn-step {
	margin-top:24px;
	margin-bottom:24px;
	}

.top-leadtext-cosme .btn-contact,
.top-leadtext-cosme .btn-line,
.top-leadtext-cosme .btn-beginner {
	height:60px;
	max-width:240px;
	margin-bottom:16px;
}

}
@media screen and (min-width : 768px){
	.top-step-tt {
	font-size:3.0rem;
	margin-top:30px;
	padding-bottom:8px;	
	}
	.top-step-st {
	font-size:1.8rem;
	padding-bottom:64px;
	}
	.top-step-box li {
	padding-left:24px;
	padding-right:24px;
	position:relative;	
	}
	.top-step-box h3 {
	font-size:1.8rem;
	padding-top:24px;
	padding-bottom:24px;
	}
	.top-step-box li:after {
	position:absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight:900;
	top:64px;
	right:-16px;
	width:32px;
	height:32px;
	color:#adb5bd;
	text-align:center;
	font-size:3.2rem;
	z-index:15;
	}
	.top-step-box li:last-child:after {
	display:none;	
	}
	.voice-frame {
	height:480px;
	}
	.news-frame {
	height:320px;
	}
	.snsframe {
	margin-top:60px;
	}
	.btn-step {
	margin-top:32px;
	margin-bottom:32px;
	}
}
.voice-frame,.news-frame {
	border:1px solid #dddddd;
	border-radius:3px;
	padding:16px;
	overflow-y:auto;
	line-height:200%;
}


.top-nande {
	background:#e5faff;
	position:relative;
}
.top-nande h2 {
	color:#0059ff;
	font-weight:700;
	padding-bottom:30px;
}
@media screen and (max-width : 767px){
	.top-nande {
	padding:16px;
	}
	.top-nande h2 {
	font-size:1.8rem;
	}
}
@media screen and (min-width : 768px){
	.top-nande {
	padding:30px 20px 20px 394px;
	}
	.top-nande h2 {
	font-size:2.4rem;
	}
	.top-nande:before {
	content:"";
	position:absolute;
	left:8px;
	bottom:0px;
	width:327px;
	height:373px;
	background-image:url(https://img21.shop-pro.jp/PA01510/982/etc_base64/bmFuZGU.png?cmsp_timestamp=20241001084934);
	background-repeat:no-repeat;
	}
  .snsbox-twitter {padding-left:20px;}
}
  .carousel{
  background:#e5faff;  
}
  .carousel img{
  margin : 0 auto
}
 .carousel div{
 margin:5px ;
}

/* 前後の矢印（← →）の色 */
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
   font-size: 40px; !important;
}

/* 矢印の位置と重なり順 */
.slick-next {
  right: 20px !important;
  z-index: 10;
}
.slick-prev {
  left: 20px !important;
  z-index: 10;
}

/* ドットのサイズ */
.slick-dots li button:before {
  font-size: 15px !important;
}

.slider {
  overflow: hidden;
}
.slider .slick-track {
  display: flex;
}
.slider .slick-slide {
  margin-right: 10px;
}
.slider .slick-slide:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .slider .slick-slide {
    margin-right: 5px;
  }
}

  .slider > div {
    aspect-ratio: 1070 / 600;
    max-width: 100%;
    overflow: hidden;
  }

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