@charset "utf-8";


:root {
    --color-purple-01:#6361FE;
    --color-pink-01:#FE7CA9;
}


#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    background:#fff url(../imgs/bg.webp) no-repeat 0 0 / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease; 
}


#logo {
    width:160px;
    animation: float 1s ease-in-out infinite;
}


@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}


.shrink-fade {
    animation: shrinkFade 0.8s cubic-bezier(.5,-3,.29,2.17) forwards !important;
}

@keyframes shrinkFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}


body {
  font-size:1.5rem;
  line-height: 1.75;
  font-family:"Noto Sans JP",'ヒラギノ角ゴシック','Hiragino Sans',游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  background:url(../imgs/bg.webp) no-repeat 0 0 / cover;
  background-attachment:fixed;
}

a {
  text-decoration: none;
  color:#1E1E1E;
}

a:hover {
  text-decoration: none;

}

img {
	vertical-align:bottom;
	display: block;
}

.wrapper {

}

main {
	width:390px;
	box-shadow: 0px 0px 8px -1px #ccc;
	position:relative;
	background:#fff;
	margin:auto;
  overflow:hidden !important;
}

.pagelogo {
  position:fixed;
  top:24px;
  left:24px;
  width:200px;
}

@keyframes scaling {
    0% {
        transform:scale(0.93);
    }
    50% {
        transform:scale(1);
    }
    100% {
        transform:scale(0.93);
    }
}

.btnAnime {
    animation:scaling 2s infinite;
}

.offer p {
    text-align:center;
    font-size:1.1rem;
    line-height:1.55;
    padding-top:5px;
}

.mb-01 {
  margin:8px 0 16px;
}

.poRelative {
  position:relative;
}


.about {
    background:url(../imgs/bg-blue.webp) repeat 0 0;
    padding:24px 0 32px;
}

.about__elegant {
    padding:32px 0;
}

/*
.slider-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
  }

  .faceslide {
    display: flex;
    width: max-content;
  }

  .faceslide li {
    list-style: none;
    flex: 0 0 auto;
    margin-right:4px;
  }

  .faceslide img {
    max-height: 100px;
    width: auto;
    border-radius:3px;
  }

.slide-left {
    animation: marqueeL 17s linear infinite;
}

.slide-right {
    animation: marqueeR 17s linear infinite;
}

.slide-left, .slide-right {
    will-change: transform;
}

  @keyframes marqueeL {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes marqueeR {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
*/


.loop-slider,
.loop-slider-bo {/*横幅100%*/
    width:100%;
    margin:0 auto;
}
 
.loop-slider img,
.loop-slider-bo img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
    border-radius:4px;
}
 
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.loop-slider .slick-slide,
.loop-slider-bo .slick-slide {
    margin:0 6px 0 0;
}


.media {
    background:url(../imgs/bg-gray.webp) repeat 0 0 / 100%;
    padding:24px 0 32px;
}

.mt8 {
  margin-top:8px;
}

.app {
    background:#E2F3E4;
}

.flow {
    background:url(../imgs/bg-green.webp) repeat 0 0;
    padding:0 0 24px;
}

.but {
  margin-top:-8px;
}

.arrow-01 {
  display:block;
  margin:auto;
  width:6%;
}

.support {
    background:url(../imgs/bg-yellow.webp) 0 0 repeat;
    padding:0 0 24px;
}

.voice {
  background:#383838 url(../imgs/bg-voice.webp) no-repeat -2px 0 / 100%;
  color:#fff;
  padding-bottom:24px;
}

.want {
  background:url(../imgs/bg-want.webp) 0 0 no-repeat;
  padding-bottom:24px;
}

/*
.fix-btn01 {
	width:390px;
	position:fixed;
	bottom:0;
	z-index:2;
	display:none;
	padding:0 1.5%;
}
*/


.sideNav {
	position:fixed;
	top:40px;
	left:24px;
}


.sideNav__logo {
  width:180px;
	margin-bottom:24px;
}

.sideNav__qr {
	width:114px;
}

.sideNav__list {
	margin-bottom:32px;
}

.sideNav__list li {
	margin-bottom:20px;
}

.sideNav a {
	transition:.5s;
	display:inline-block;
	padding:2px 10px;
	font-weight:500;
	letter-spacing:1px;
	font-size:1.5rem;
  line-height:1.5;
  border-radius:3px;
}

.sideNav a:hover {
	opacity:.4;
}

.sideNav__active {
	color:#ff0;
}



.padding__lr-4 {
  padding:0 4%;
}


.faq {
  padding-bottom:28px;
}

.privacy {
  padding-bottom:28px;
  background:#F4F4F4;
}


.elegant__studio {
  width:100%;
  margin:0 auto;
  padding:0 8%;
}

.icon-04 {
  position:absolute;
  top:2.5%;
  left:6.5%;
  z-index:2;
  width:13.5%;
}
 
.elegant__studio {

}

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

.elegant__studio .slick-slide {
  width:100%;
    margin:0;

}
 

.slick-prev, 
.slick-next {
    position: absolute;
    top: 48%;
    cursor: pointer;
    outline: none;
    border-top: 3px solid #36A7FF;
    border-right: 3px solid #36A7FF;
    height: 14px;
    width: 14px;
}
 
.slick-prev {
    left: 13%;
    transform: rotate(-135deg);
    z-index: 2;
}
 
.slick-next {
    right: 13%;
    transform: rotate(45deg);
    z-index: 2;
}
 
.slick-dots {
    text-align:center;
    margin:10px 0 0 0;
}
 
.slick-dots li {
    display:inline-block;
    margin:0 5px;
}
 
.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;
    height:8px;
    display:block;
    border-radius:50%;
    background:#fff;
}
 
.slick-dots .slick-active button{
    background:#ff0;
}


.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}


.fade-in-R {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-R.visible {
    opacity: 1;
    transform: translateX(0);
}


.fade-in-L {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-L.visible {
    opacity: 1;
    transform: translateX(0);
}


/*
.triangle {
  height: calc(60px / 2);
  width: 60px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:#f00;
  transform:rotate(180deg) translateX(50%);
  position:absolute;
  left:50%;
  z-index:2;
}
*/










.hover {
	opacity:1;
	transition:.5s;
}

.hover:hover {
	opacity:0.9;
}

.ac {
  margin-bottom: 10px;
}

.ac dt {
  cursor: pointer;
}

.ac dt img {
  width: 100% !important;
  height: auto;
}

.ac .wrap_btn .btn {
  width: auto;
  top: 0;
  left: 0;
  bottom: 20%;
}

.ac dd,
.ac .wrap_btn .btn.cls {
  display: none;
}

.ac .wrap_btn.open .btn.opn {
  display: none !important;
}

.ac .wrap_btn.open .btn.cls {
  display: inline !important;
}

.ft {
	padding:50px 0 0;

	margin:auto;
	color:#fff;
background:#000;
}

.ftLogo {
	width:40%;
	display:block;
	margin:auto;
}

.ft ul {
	display:flex;
	justify-content:center;
	padding-top:20px;
}

.ft a {
	color:#fff;
	text-decoration:none;
	font-size:1.1rem;
	padding:0 1em;
}

.copy {
	text-align:center;
	font-size:1rem;
	letter-spacing:0.5px;
	padding:10px 0;
	background:#000;
	margin-top:30px;
}


@media screen and (max-width:840px) {


.sideNav {
	display:none;
}


.pagelogo {
  display:none;
}


.hover:hover {
	opacity:1;
}
}

@media screen and (max-width: 480px) { 
main {
  width:100%;
}








}