/* Home page styles */
body {
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 500;
}

body {
  background: #AE1E24;
  letter-spacing: 0.2rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'M PLUS 1p', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #363637;
  letter-spacing: 0.2rem;
}

a {
    color:#db4f28;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

a:hover,
a:focus,
a:active  {
    color:#ae1e24;
    -webkit-transition:all 0.2s easeout;
    transition:all 0.2s ease-out;
}

/*Header*/
.header-logo-v img {
  width: 150px;
}

.top {
  background: #fff;
  padding: 0 3rem;
  margin: 1rem auto 0;
}

.top-login {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 60px;
  border-radius: 0 0 0 100px;
  background: #AE1E24;
}

.top-login a{
  color: #fff;
  display: inline-flex;
  align-items: center;
  padding: 2rem 1rem;
  width: 100%;
  justify-content: center;
}

.top-inner {
  text-align: center;
  background: url('../img/flare-text.png') no-repeat;
  background-position:bottom;
  padding-bottom: 5rem;
}

.point-text {
  background: #AE1E24;
  border-radius: 50vh;
  line-height: 3rem;
  height: 3rem;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding: 0 2rem;
}

@media screen and (max-width: 640px) {
  .top {
    padding: 0 2rem;
  }
  .top-inner {
    background-size: contain;
  }
  .point-text{
    font-size: 1.4rem;
  }
}

.catch-text {
  color: #ae1e24;
  font-weight: 700;
}

.catch-text-large {
  font-size: 6rem;
  margin: 0;
  color: #ae1e24;
}

.catch-text-middle {
  font-size: 4rem;
}

.catch-text-small {
  font-size: 3rem;
  letter-spacing: 0.5rem;
  padding: 0;
}

.catch-text-em {
  background: linear-gradient(transparent 0, #FFE200 0);
  color: #ae1e24;
}

.catch-text-under {
  background: linear-gradient(transparent 50%, #FFE200 50%);
}

.catch-box {
  background: #ae1e24;
  margin: 3rem auto;
  width: 70%;
  padding: 3rem;
  color: #fff;
  font-size: 3rem;
  font-weight: 500;
}

.catch-box-w {
  margin: 3rem auto;
  width: 70%;
  padding: 3rem;
  color: #ae1e24;
  font-size: 3rem;
  font-weight: 500;
}

@media screen and (max-width: 640px) {
  .catch-box {
    width: 95%;
    font-size: 2rem;
  }
  .catch-box-w {
    width: 95%;
    font-size: 2.2rem;
  }
}

.boomerang-content {
  margin: 5rem 0;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2rem;
  background-image: url('../img/mark-bg.png'), url('../img/mark-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left, right;
  background-size: contain, contain;
  
}

@media screen and (max-width: 640px) {
  .boomerang-content {
    padding: 0 2rem;
  }
}

.content-title-c {
  color: #fff;
  padding: 2rem 0;
}

.content-title-en {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.yel-box {
  background: #FFE200;
  padding: 1rem 5rem;
  margin: 3rem auto;
  display: inline-block;
  color: #ae1e24;
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
}

.img-box {
  padding: 3rem;
  background: #fff;
  width: 800px;
  margin: 0 auto;
}

.img-box img {
  width: 500px;
}

@media screen and (max-width: 640px) {
  .img-box {
    width: 100%;
  }
  .img-box img {
    width: 280px;
  }
}

.merit-title {
  background: #DB4F28;
  padding: 3rem 5rem;
}

.merit-content {
  margin: 5rem 0;
  padding: 3rem 0;
  position: relative;
}

.title-sub {
  font-size: 1.2rem;
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid #fff;
  width: 150px;
  color: #fff;
}

.title-sub-r {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid #fff;
  width: 150px;
  color: #fff;
}

.merit-title-flex {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

@media screen and (max-width: 640px) {
  .merit-title-flex {
    flex-direction: column;
  }
}

.merit-num {
  font-size: 15rem;
  color: #fff;
  text-align: center;
  width: 30%;
}

.merit-title-inner {
  background: #fff;
  width: 65%;
  text-align: center;
  padding: 3rem;
  color: #ae1e24;
  height: 180px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}

.merit-title-inner-s {
  height: 150px;
}

.merit-content-l{
  color: #ae1e24;
  font-size: 5rem;
}

@media screen and (max-width: 640px) {
  .merit-title-inner {
    width: 100%;
    height: auto;
  }
  .merit-content-l {
    font-size: 4rem;
  }
}

.merit-content-r{
  padding: 
}

.merit-content-m {
  color: #ae1e24;
  font-size: 2rem;
}

.merit-imgbox, .merit-imgbox-s {
  padding: 3rem;
  margin: 0 5rem;
}

.merit-imgbox img {
  width: 400px;
}

.merit-imgbox-s img {
  width: 300px
}

.merit-content-r, .merit-content-le {
  width: 60%;
  color: #fff;
  letter-spacing: 0.1rem;
}

.merit-content-le {
  padding: 3rem 0 3rem 10rem;
}

@media screen and (max-width: 640px) {
  .merit-imgbox img {
    width: 300px;
  }
  .merit-content-r, .merit-content-le {
    width: 100%;
    padding: 2rem;
  }
  .merit-content-le {
    padding: 3rem 2rem;
  }
}

.merit-content-r p {
  padding: 1rem 0;
}

.merit-content-le p {
  padding: 1rem 0;
  line-height: 5rem;
}

.border-box-ud {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 3rem 0;
  width: 500px;
  margin: 3rem 0;
}

@media screen and (max-width: 640px) {
  .border-box-ud {
    width: 100%;
  }
  .flex-c {
    flex-direction: column-reverse;
  }
}

.large-text-box {
  padding: 3rem 0;
  margin: 3rem 0;
  font-size: 4rem;
  letter-spacing: 0.2rem;
}

.merit-text-m {
  font-size: 2.4rem;
}

.merit-text-l {
  font-size: 3.5rem;
}

.merit-point {
  background: #DB4F28;
  padding: 2rem;
  margin: 1rem;
}

.merit-inner-flex {
  display: flex;
}

.features-content {
  background: #fff;
  text-align: center;
  margin: 5rem 0;
  padding: 5rem 0;
}

.features-yel {
  background: #FFA700;
  padding: 3rem;
  font-size: 4.5rem;
  color: #fff;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}

.features-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.features-text {
  font-size: 2.4rem;
  color: #ae1e24;
  letter-spacing: 0.2rem;
}

.features-l {
  padding-top: 5rem;
  font-size: 3rem;
}

@media screen and (max-width: 640px) {
  .features-yel {
    font-size: 2.8rem;
  }
  .features-flex {
    flex-direction: column;
  }
  .features-text {
    padding: 0 2rem;
  }
  .features-l {
    font-size: 2.6rem;
    padding: 2rem;
  }
}

.application-content{
  color: #fff;
  text-align: center;
  margin: 5rem 0;
  padding: 5rem 0;
  background: url('../img/axiom-pattern.png');
}

.application-text {
  font-size: 4rem;
}

@media screen and (max-width: 640px) {
  .application-content{
    padding: 5rem 2rem;
  }
  .application-text {
    font-size: 3rem;
  }
}

.button{
  background: #fff;/*ch*/
  border:transparent;/*ch*/
  border-radius:50vh;/*ch*/
  color:#ae1e24;
  cursor:pointer;
  display:inline-block;
  font-size:3rem;/*ch*/
  font-weight:700;/*ch*/
  height:10rem;/*ch*/
  letter-spacing:.5rem;/*ch*/
  line-height:10rem;/*ch*/
  padding:0 10.0rem;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap
}

.button:focus,.button:hover,button:focus,button:hover{
  background-color:#db4f28;
  border-color:#db4f28;
  color:#fff;
  outline:0
}

.material-icons-r {
  padding-right: 3rem;
}

.application-btn {
  padding: 5rem 0;
}

@media screen and (max-width: 640px) {
  .button {
    padding: 0 3rem;
  }
  .application-btn {
    padding: 5rem 0 0;
  }
}

.footer {
  padding: 2rem 0;
  text-align: center;
}

.copyright {
  font-size: 1.4rem;
  color: #fff;
}


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.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);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

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

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

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
ボンッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2356A7;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
  opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.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;}
}