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

html   { 
                font-size: 62.5%; 
        }

body {
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.8rem;
  line-height: 1.65;
  color: #ffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  word-break: break-all;
}
img{
	width: 100%;
}

@media screen and (min-width: 500px) {
	body{
		background-image: url("../img/bg.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed
	}
	}
@media screen and (max-width: 500px) {
  body {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}
#wrapper500{
  margin: 0 auto;
    background-color: #000
}
@media screen and (min-width: 500px) {
	#wrapper500{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
    background-color: #000;
    box-shadow: 0px 10px 15px 10px rgba(92, 92, 92, 0.45);
	}}

  .margin-2{
    margin: 2rem auto;
  }
  .margin-1{
    margin: 1rem auto;
  }

/*テキスト*/

.a-text-w{
	font-size: 9px;
	color: #fff;
	font-family: 'Noto Sans JP';
  text-align: left;         /* テキストは左揃え */
  margin-left: auto;        /* 要素を右寄せ */
  margin-right: 0!important;
  width: fit-content;       /* 幅をテキストにフィットさせる */
}
.a-text-wc{
	font-size: 9px;
	color: #fff;
	text-align: center;
}

.a-text-b{
	font-size: 9px;
	color: #000;
	font-family: 'Noto Sans JP';
  text-align: left;         /* テキストは左揃え */
  margin-left: auto;        /* 要素を右寄せ */
  margin-right: 0!important;
  width: fit-content;       /* 幅をテキストにフィットさせる */
}

.wh-15{
	color:#ffff;
	font-size:1.5rem ;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}
.wh-15-L{
	color:#ffff;
	font-size:1.5rem ;
	text-align: left;
	margin: 0 auto;
}

.wh-16{
	color:#ffff;
	font-size:1.6rem ;
}

.wh-20-b{
	color:#ffff;
	font-size:2rem ;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}
.wh-22-b{
	color:#ffff;
	font-size:2.2rem ;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}
.bl-20-b{
  color:#000;
	font-size:2rem ;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;

}
.bl-16-b{
  color:#000;
  font-size:1.6rem ;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}
.bl-16{
  color:#000;
  font-size:1.6rem ;
}
.bl-14{
  color:#000;
  font-size:1.4rem ;
}

.gy-20-b{
    color:#C4BEBB;
	font-size:2rem ;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;

}
.red{
    color:#D34020;
}

.title-b {
  position: relative;
  display: block;
  width: fit-content; /* ← 必須！中央寄せには幅指定が必要 */
  margin:0 auto;  /* ← 上下2rem、左右中央揃え */
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 3.2rem;
  font-weight: bold;
  color: #000;
}
.title-b::after {
  content: "";
  display: block;
  width: 60px; /* 下線の長さ */
  height: 1px;
  background-color: #000;
  margin: 0px auto 0; /* 中央揃え */
}

.title-g {
  position: relative;
  display: block;
  width: fit-content; /* ← 必須！中央寄せには幅指定が必要 */
  margin:0 auto;  /* ← 上下2rem、左右中央揃え */
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 3.2rem;
  font-weight: bold;
  color: #C4BEBB;
}
.title-g::after {
  content: "";
  display: block;
  width: 60px; /* 下線の長さ */
  height: 1px;
  background-color: #C4BEBB;
  margin: 0px auto 0; /* 中央揃え */
}


/*box*/
l-box{
  text-align: left;
}
.w-box{
  width: 90%;
  background-color: #FFF;
  margin: 2rem auto;
  padding: 2rem 0;

}
/*wrapper*/
.wrapper90{
width: 90%;
margin: 0 auto;
}

/*sc-1*/
.sc-1{
	background-color: #000;
}

/*sc-2*/
.sc-2{
	background-color: #000;
  padding-top: 2rem;
}
/*sc-3*/
.sc-3{
	background-color: #F4F4F4;
  padding: 2rem 0;
}
/*sc-4*/
.sc-4{
	background-color: #000;
  padding-top: 2rem;
}

/*sc-5*/
.sc-5{
	background-color: #0000;
 padding-bottom: 2rem;
}
/*sc-6*/
.sc-6{
	background-color: #0000;
 padding-bottom: 2rem;
}

.sc-7{
  background-color: #E6E6E6;
 padding: 2rem 0;
}
.sc-8{
  padding-top: 2rem;
}

.sc-9{
  background-color: #F4F4F4;
 padding: 3rem 0;
}
.sc-10{
  background-color: #F4F4F4;
  padding: 2rem 0;
}
.sc-14{
  background-color: #F4F4F4;
 padding: 3rem 0;
}
.cta-2{
  background-color: #F4F4F4;
}

/*-------CTA------*/
.cv_btn {
	padding: 4rem auto 4rem auto;
  margin: 0 auto;
	width: 90%;
  }
  .cv_btn img {
	animation: anime1 0.6s ease 0s infinite alternate;
	transform-origin: center;
  }
  @keyframes anime1 {
	from {
	  transform: scale(0.9,0.9);
	}
	to {
	  transform: scale(1,1);
	}
  }

/*-------VIDEO------*/

video {
	width: 100%;
	max-width: 450px;
	height: auto;
	display: block;
	margin: auto;
  }

   
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 90%;
    max-width: 450px;
    margin:0 auto;
    background-color: #FFF;
      border-radius:2rem;
}

.accordion-area li{
    margin: 10px 0;
}



/*Q*/
.title {
    position: relative;
    cursor: pointer;
	color: #595959;
    font-size:1.6rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}
.title {

    color: #595959;
    font-weight: bold;
    padding: 16px 30px 16px 55px;
    background-image: url(../img/faq-q.png);
    background-position: left 20px top 16px;
    background-repeat: no-repeat;
}

/*+×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #595959;
    
}
.title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 15px;
    transform: rotate(90deg);

}
/*　close　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*A*/
.box {
    display: none;

}
.box {
    padding: 25px 15px 25px 55px;
    background-image: url(../img/faq-a.png);
    background-position: left 20px top 25px;
    background-repeat: no-repeat;
}
.box p{
  color: #595959;
  font-size: 1.6rem;}
/*footer*/

footer{
	background-color: #0000;
	padding: 5rem 0 5rem 0;
	margin: 0 auto;
}
footer p{
	text-align: center;
}

.logo{
	width: 40%;
	margin: 0 auto;
}
.footer-link {
    display: flex;
    width: 30%;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 2rem;
	color: #fff;
	font-size: 9px;
}

/* スライドイン左から */

/* 左からふわっとJQ */
.fadeInLeft {
  -webkit-animation-name: fadeInLeftAnime;
          animation-name: fadeInLeftAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.fadeInLeftTrigger {
  opacity: 0;
}

/* 右からふわっとJQ */
.fadeInRight {
  -webkit-animation-name: fadeInRightAnime;
          animation-name: fadeInRightAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInRightAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); 
  }
}
@keyframes fadeInRightAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px); 
  }
  100% {
    opacity: 1; 
    -webkit-transform: translateX(0);
            transform: translateX(0); 
  }
}
.fadeInRightTrigger {
  opacity: 0; 
}

/* 下からふわっとJQ */

.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); 
  }
}
.fadeUpTrigger {
  opacity: 0; 
}
/* テキストアニメーション*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}