@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&subset=japanese');
body{
	font-family: 'Noto Sans JP', sans-serif;
	color: #3A3E49;
	margin: 0;
	padding: 0;
	width: 100%;
}
a{
	text-decoration: none;}

.btn:hover{
	opacity: 0.8;
}
.sp{
	display: none;
	}
@media screen and (max-width:768px) {
.title{
	font-size: 1.2em;
}
.hero-pc{
	display: none;
	}
.main-pc{
	display: none;
	}
.sp{
	display: block;
	}
}

/*hero*/
.hero-pc{
	width:100%;
	background-image: url("../img/bg-1@3x.png");
	background-size: cover;
	background-position: bottom;
}
.hero-pc .hero-inner{
	display: flex;
	width:100%;
	max-width: 1060px;
	margin: 0 auto;
}
.hero-pc .hero_copy-area {
	width:50%;
    display: inline-table;
}
.hero-pc .hero_copy-area .logo{
	padding:40px 0 120px 0;
}
.hero-pc .hero_copy-area .logo img{
	width:220px;
}
.hero-pc .hero_copy-area .catchphrase{
	width:100%;
	max-width:580px;	
}
.hero-pc .hero_copy-area .catchphrase img{
	width:100%;
	padding:0 0 120px 0;
	max-width:630px;
}
.hero-pc .hero_copy-area .btn img{
	width:100%;
	max-width:270px;
}
.hero-pc .img-area-img img{
	width:100%;
	max-width: 500px;
}
h1.catchcopy {
  font-size : 2.4em;
  margin : 0px 0px 80px 0px;
  letter-spacing : 0px;
  line-height : 1.6em;
}

h1.catchcopy>span {
  font-size : 0.7em;
}
.catchphrase p {
  width : 260px;
  font-weight : bold;
  font-size : 1em;
  line-height: 1.6;
  color : #FF7878;
  margin : 0px 0px 10px 9px;
  text-align : center;
  text-shadow : rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}
/*main*/
.main-pc{
	width:100%;
	background-image: url("../img/bg-2@3x.png");
	background-size: contain;
	background-position:top ;
	padding-bottom: 40px;
}
.main-pc img{
	width: 100%;
	max-width: 900px
}
.main-pc .company{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 120px;
}
.main-pc .feature{
	width: 100%;
	padding-bottom: 80px;
	text-align: center;
}

.main-pc .registration{
	max-width: 400px;
	background: rgba(255,255,255,0.9);
	padding: 60px 20px 40px;
	text-align: center;
	margin: 0 auto 120px;
}
.main-pc .registration .registration-text{
	padding-bottom: 0;
}
.main-pc .registration .registration-text img{
	max-width: 320px;
}
.main-pc .registration .btn img{
	max-width: 270px;
}
.registration-text p {
  width : 260px;
  font-weight : bold;
  font-size : 1em;
  line-height: 1.6;
  color : #FF7878;
  margin: 0 auto;
  text-align : center;
  text-shadow : rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}
.main-pc .howTo{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 120px;
}
.main-pc .userVoice{
	width: 100%;
	padding-bottom: 80px;
	text-align: center;
}
.main-pc .registration-2{
	width: 500px;
	background: rgba(255,255,255,0.9);
	padding: 40px 20px 40px;
	text-align: center;
	margin: 0 auto 120px;
}
.main-pc .registration-2 .registration-text{
	padding-bottom: 0;
}

.main-pc .registration-2 .registration-text img{
	width: 100%;
	max-width: 430px;
}
.main-pc .registration-2 .btn img{
	max-width: 270px;
}
div.footer {
  line-height : normal;
  background-color : rgb(0, 71, 113);
  margin-bottom : -40px;
}

div.copylightArea {
  display : flex;
  padding : 0px;
  max-width : 1140px;
  margin : 0px auto;
  align-items : center;
  justify-content : space-between;
}

div.copylightArea>p {
  font-size : 0.8em;
  color : rgb(255, 255, 255);
}

div.copylightArea>p>a {
  color : rgb(255, 255, 255);
  position : relative;
  display : inline-block;
  transition-duration : 0.3s;
  transition-timing-function : ease;
  transition-delay : 0s;
  transition-property : all;
}

div.copylightArea>p>a::after {
  position : absolute;
  bottom : 0px;
  left : 0px;
  content : "";
  width : 0px;
  height : 1px;
  background-color : rgb(255, 255, 255);
  transition-duration : 0.3s;
  transition-timing-function : ease;
  transition-delay : 0s;
  transition-property : all;
}

div.copylightArea>p>a:hover::after {
  width : 100%;
}

div.copylightArea>ul {
  display : flex;
  justify-content : flex-end;
  align-items : center;
  margin : 0px;
}

div.copylightArea>ul>li {
  display : flex;
  list-style-type : none;
  list-style-position : initial;
  list-style-image : initial;
  margin : 0px auto;
  padding : 10px 20px 10px 0px;
  font-size : 0.8em;
}

div.copylightArea>ul>li>a {
  color : rgb(255, 255, 255);
  position : relative;
  display : inline-block;
  transition-duration : 0.3s;
  transition-timing-function : ease;
  transition-delay : 0s;
  transition-property : all;
}

div.copylightArea>ul>li>a::after {
  position : absolute;
  bottom : 0px;
  left : 0px;
  content : "";
  width : 0px;
  height : 1px;
  background-color : rgb(255, 255, 255);
  transition-duration : 0.3s;
  transition-timing-function : ease;
  transition-delay : 0s;
  transition-property : all;
}

div.copylightArea>ul>li>a:hover::after {
  width : 100%;
}

/*sp*/
.sp img{
	width: 100%;
	max-width: 900px;
	vertical-align: bottom;
}
.sp .btn{
	text-align: center;
	margin: 0 auto;
}
.sp .bnt-space{
	width: 100%;
	text-align: center;
}
.sp .btn img{
	width:280px;
	margin: 0 auto;
}
.top {
	margin: 0 0 1.9em;
}
.top>h1 {
  position : absolute;
  top :  35.5%;
  left : 50%;
  transform : translate(-48%, -50%);
  margin : 0px;
  padding : 0px;
  font-size : 1.5em;
  letter-spacing : 0px;
  line-height : 1.6em;
  width : 96%;
  text-align : center;
}

.top>h1>span {
  font-size : 0.7em;
}
.bnt-space {
  width : 280px;
  font-weight : bold;
  font-size : 1em;
  color : #FF7878;
  margin : 0px auto 10px auto;
  text-align : center;
  text-shadow : rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}

.bnt-space>p {
  margin : 20px 0px 10px 0px !important;
}
.btn-space-btm {
	    width: 100%;
    text-align: center;
    margin: 0px auto -4px;
}
.btn-ph-top {
    display: inline-block;
    width: 280px;
    height: 60px;
	text-align: center;
    background-color: #ff7878;
    font-size: 1.4em;
    line-height: 58px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 4px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  box-shadow: 0 0 14px #dadada;
  margin-bottom: 12px;
  letter-spacing:1px;
}
.btn-ph-top:hover{
	background-color: #ff7878;
    color: #fff !important;
    opacity: 0.6;
}
/* .btn-ph-top:before {
	content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent #fff;
	display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    left: 220px;
} */
.btn-ph-top .btn span {
	font-weight:1em;
    text-align: center;
    position: absolute;
    left: 57px;
    line-height: 84px;
    letter-spacing: 2.5px;
}
.btn-ph-btm {
    display: inline-block;
    width: 280px;
    height: 60px;
    /* text-align: center; */
    background-color: #ff7878;
    font-size: 1.4em;
    line-height: 58px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 4px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  box-shadow: 0 0 14px #dadada;
  letter-spacing:1px;
  margin-bottom: 12px;
}
}
.btn-ph-btm:hover{
	background-color: #ff7878;
    color: #fff !important;
    opacity: 0.6;
}
/* .btn-ph-btm:before {
	content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent #fff;
	display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    left: 220px;
} */
btn-ph-btm .btn span {
	font-weight:1em;
    text-align: center;
    position: absolute;
    left: 57px;
    line-height: 84px;
    letter-spacing: 2.5px;
}
.btn-space-btm p {
	color:#FF7878;
  font-weight: bold;
    font-size: 1.1em;
    letter-spacing:1px;
    line-height:1.5;
}
.footer-sp {
  line-height : normal;
  background-color : rgb(0, 71, 113);
  margin-bottom : -40px;
}
.copylightArea-sp {
  display : flex;
  padding : 0px;
  width : 340px;
  margin : 0px auto;
  align-items : center;
  justify-content : space-between;
}

.copylightArea-sp>p {
  font-size : 0.8em;
  color : rgb(255, 255, 255);
}

.copylightArea-sp>p>a {
  color : rgb(255, 255, 255);
}

.copylightArea-sp>p>a:hover {
  opacity : 0.4;
}

.copylightArea-sp>ul {
  display : flex;
  justify-content : flex-end;
  align-items : center;
  margin : 0px;
}

.copylightArea-sp>ul>li {
  display : flex;
  list-style-type : none;
  list-style-position : initial;
  list-style-image : initial;
  font-size : 0.8em;
  padding : 0px;
  margin : 0px 0px 0px 15px;
}

.copylightArea-sp>ul>li>a {
  color : rgb(255, 255, 255);
}

.copylightArea-sp>ul>li>a:hover {
  opacity : 0.4;
}