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


/**********************************************************/
/* PC */
/**********************************************************/


/* general */
html{
  font-size: 62.5%; /*16px × 62.5% = 10px*/
  width: 100%;
}
body{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  font-feature-settings: "palt"; /* 自動カーニング */
  letter-spacing:0.1em;
  line-height: 1.6;
  min-width: 1100px;
}
img{
  max-width: 100%;
  vertical-align:bottom;
  image-rendering: -webkit-optimize-contrast;
}
a{
	color: #4B4B4B;
　text-decoration: none;
}
a:hover{
	opacity: 0.7;
	transition: 0.3s;
}
.roboto{
  font-family: 'Roboto', sans-serif;
}
/* ◎ここから */
* {
  box-sizing: border-box;
}
.bold{
  font-weight: bold;
}
/* flex */
.flex{
  display: flex;
}
/*右から左へ横並び*/
.reverse{
  flex-direction: row-reverse;
}
.pc{
    display: inline;
}
.sp{
    display: none;
}


.inner {
  max-width: 1190px;
  margin: 0 auto;
}


/**********************************
Loading
**********************************/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  text-align:center;
  color:#fff;
  background-image: url("../images/loding-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:181px;
}

/* fadeUpをするアイコンの動き */
.fadeUp2{
animation-name: fadeUp2Anime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUp2Anime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/**********************************
header
**********************************/
header {
  z-index: 997;
  position: fixed;
  width: 100%;
  height: 80px;
  text-align:center;
  color:#fff;
  font-style: italic;
}
header h1 {
  position: fixed;
  width: 141px;
  top:34px;
  left:38px;
}
header nav{
  position: fixed;
  top:48px;
  right:50px;
}
header nav li{
  margin-left: 36px;
}

header nav a{
  color: #fff;
  font-weight: bold;
  text-decoration : underline;
  font-size: 1.8rem;
}
header nav a:hover{
  color: #47cfff;
  opacity: 1;
}

.openbtn1{
  display: none;
}
#g-nav{
  display: none;
}


/**********************************
スクロールしたら色が変わるエリア
**********************************/
.header.change-color {
  background-color: #8232ff; 
  transition: 0.3s;
  box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
.header.change-color h1{
  transition: 0.2s;
  width: 106px;
  top:8px;
  left:35px;
}
.header.change-color nav{
  position: fixed;
  top:29px;
}
.btn {
	position: relative;
	width: 100%;
  height: 83px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	display: block;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	opacity: 0;
}

/**********************************
fv
**********************************/
.fv {
  width: 100%;
  height: 800px;
  background-image: url("../images/fv-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.fv .inner{
  position: absolute;
  top:98px;
  left:50%;
  transform: translateX(-50%);
  width: 607px;
  justify-content: space-between;
}
.fv h2{
  width: 166px;
}

.phone-frame{
  width: 374px;
  z-index: 10;
  position: relative
}

.bg-slider {
  position: absolute;
top: 22px;
  left:22px;
  width: 331px;
  height: 715px;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
  border-radius: 30px;
}
/**********************************
section
**********************************/
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
  opacity: 1;
}
.delay-time02{
animation-delay: 0.2s;
}
.delay-time04{
animation-delay: 0.4s;
}
.delay-time06{
  animation-delay: 0.6s;
}
.box{
	opacity: 0;
}


section{
  text-align: center;
  padding: 58px 0 112px 0;
  margin-top:100px;
}

section h2 img{
  text-align: center;
  width: 547px;
}

section ul{
  justify-content: space-around;
}
section li{
  width: 30.3%;
}
section li:nth-of-type(2){
  margin-top: 64px;
}
section li:last-of-type{
  margin-top: 130px;
}


/**********************************
footer
**********************************/
footer{
  background: #333333;
  text-align: center;
  margin: 0 auto;
}
footer h2{
  font-size: 1.8rem;
  border-top:solid 1px #fff;
  border-bottom:solid 1px #fff;
  width: 114px;
  margin: 0 auto;
  line-height: 2;
}
footer dl{
  font-weight: 400;
}
footer dt{
  margin: 30px auto 18px;
}
footer dd{
  line-height: 2.5;
}
footer a{
/*  color: #47cfff;
*/ 
  color:#fff;
  text-decoration : underline;
}
.footer-logo{
  width: 145px;
  margin: 55px auto 58px
}
small{
  font-size: 1.2rem;
  padding: 55px 0 23px 0;
  margin: 0 auto;
  display: block;
}