@charset "utf-8";

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 基本設定 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

/*===========================
游ゴシック初期設定
===========================*/

@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}

html {
font-family: source-han-sans-japanese,-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;

}
@media all and (-ms-high-contrast: none)  {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}


/*===========================
PC・スマホ切り替え
===========================*/

.pc-display{
display:block!important;	
}

.sp-display{
display:none!important;
}

/*===========================
body
===========================*/

body{
font-family: source-han-sans-japanese, sans-serif;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 付加的アニメーション 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/



/*===========================
.floating 
===========================*/



.floating-left {
animation-name:floating-left;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-top: 20px;
}

.floating-right {
animation-name: floating-right;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-top: 20px;
}

@keyframes floating-left {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }

  to {
    transform: translate(0, -0px);
  }
}



@keyframes floating-right {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }

  to {
    transform: translate(0, -0px);
  }
}


/*===========================
.passing
===========================*/

.passing-wrap{
display: table;
overflow: hidden;
}
.passing-wrap .passing{
display: table;
position: relative;
margin-bottom: .25em;
left: -100%;
overflow: hidden;
}

.passing-wrap .passing-bg{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
}

/*===========================
.move-grade
===========================*/

.move-grade{
background: linear-gradient(to left, rgba(24,125,221,1) 0%,rgba(0,195,193,1) 100%);
border-style: none;
color:#fff;
font-size: 20px;
letter-spacing: 1px;
font-weight: 700;
outline: none;
cursor: pointer;
position: relative;
padding:20px 30px 20px 30px;
overflow: hidden;
transition: all .5s;
text-align:center;
box-shadow: 0px 1px 2px rgba(0,0,0,.2);
border-radius:30px
}

.move-grade a{
color:#fff;
text-decoration:none;
}

.move-grade a:before{
content: "\226B";
font-size: 0.9em;
}

.move-grade span{
position: absolute;
display: block;
}
.move-grade span:nth-child(1){
height: 3px;
width:200px;
top:0px;
left:-200px;
background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
animation: span1 2s linear infinite;
animation-delay: 1s;
border-radius:30px
}

@keyframes span1{
    0%{
        left:-200px
    }
    100%{
        left:200px;
    }
}
.move-grade span:nth-child(2){
height:3px;
width:200px;
right:-200px;
bottom: 0px;
background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
animation: span2 2s linear infinite;
animation-delay: 3s;
border-radius:30px
}
@keyframes span2{
    0%{
        right:-200px;
    }
    100%{
        right: 200px;
    }
}


.move-grade:hover{
transition: all .5s;
transform: rotate(-3deg) scale(1.1);
box-shadow: 0 5px 25px rgba(0,0,0,.30);
}
.move-grade:hover span{

}

 
/*===========================
.drawbtnボタン
===========================*/

 

.drawbtn::before,
.drawbtn::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.drawbtn a:before{
content: "\226B";
font-size: 0.9em;
}
.drawbtn {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
.drawbtn::before, 
.drawbtn::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.drawbtn::before {
top: 0;
left: 0;
}
.drawbtn::after {
bottom: 0;
right: 0;
}
.drawbtn:hover {
color: #60daaa;
}
.drawbtn:hover::before,
.drawbtn:hover::after {
width: 100%;
height: 100%;
}
.drawbtn:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.drawbtn:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}


/*===========================
.effect3
===========================*/

.effect3{
position: relative;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}

.effect3::after, .effect3::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  border: 2px solid;
  transition: all 0.6s ease;
  border-radius: 2px;
}
.effect3::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #435a6b;
  border-right-color: #435a6b;
}
.effect3::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #435a6b;
  border-left-color: #435a6b;
}
.effect3:hover:after, .effect3:hover:before {
  border-bottom-color: #435a6b;
  border-right-color: #435a6b;
  border-top-color: #435a6b;
  border-left-color: #435a6b;
  width: 100%;
  height: 100%;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 ローディング設定 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


/*===========================
.loader-wrap
===========================*/


.loader-wrap {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #000;
z-index:100;
}


/*===========================
.loader-wrap　玉の設定
===========================*/


.loader-wrap .balls {
width:200px;
height: 100px;
margin:0 auto;
}


.loader-wrap .ball {
 width: 10px;
 height: 10px;
 margin: 10px auto;
 border-radius: 50px;
}

.loader-wrap .ball:nth-child(1) {
 background: #ffffff;
 -webkit-animation: ball-right 1s infinite ease-in-out;
 -moz-animation: ball-right 1s infinite ease-in-out;
 animation: ball-right 1s infinite ease-in-out;
}

.loader-wrap .ball:nth-child(2) {
 background: #ffffff;
 -webkit-animation: ball-left 1.1s infinite ease-in-out;
 -moz-animation: ball-left 1.1s infinite ease-in-out;
 animation: ball-left 1.1s infinite ease-in-out;
}

.loader-wrap  .ball:nth-child(3) {
 background: #ffffff;
 -webkit-animation: ball-right 1.05s infinite ease-in-out;
 -moz-animation: ball-right 1.05s infinite ease-in-out;
 animation: ball-right 1.05s infinite ease-in-out;
}

.loader-wrap .ball:nth-child(4) {
 background: #ffffff;
 -webkit-animation: ball-left 1.15s infinite ease-in-out;
 -moz-animation: ball-left 1.15s infinite ease-in-out;
 animation: ball-left 1.15s infinite ease-in-out;
}

.loader-wrap .ball:nth-child(5) {
 background: #ffffff;
 -webkit-animation: ball-right 1.1s infinite ease-in-out;
 -moz-animation: ball-right 1.1s infinite ease-in-out;
 animation: ball-right 1.1s infinite ease-in-out;
}

.loader-wrap .ball:nth-child(6) {
 background: #ffffff;
 -webkit-animation: ball-left 1.05s infinite ease-in-out;
 -moz-animation: ball-left 1.05s infinite ease-in-out;
 animation: ball-left 1.05s infinite ease-in-out;
}

.loader-wrap .ball:nth-child(7) {
 background: #ffffff;
 -webkit-animation: ball-right 1s infinite ease-in-out;
 -moz-animation: ball-right 1s infinite ease-in-out;
 animation: ball-right 1s infinite ease-in-out;
}

@-webkit-keyframes ball-right {
 0% {
  -webkit-transform: translate(-15px);
 }
 50% {
  -webkit-transform: translate(15px);
 }
 100% {
  -webkit-transform: translate(-15px);
 }
}

@-webkit-keyframes ball-left {
 0% {
  -webkit-transform: translate(15px);
 }
 50% {
  -webkit-transform: translate(-15px);
 }
 100% {
  -webkit-transform: translate(15px);
 }
}

@-moz-keyframes ball-right {
 0% {
  -moz-transform: translate(-15px);
 }
 50% {
  -moz-transform: translate(15px);
 }
 100% {
  -moz-transform: translate(-15px);
 }
}

@-moz-keyframes ball-left {
 0% {
  -moz-transform: translate(15px);
 }
 50% {
  -moz-transform: translate(-15px);
 }
 100% {
  -moz-transform: translate(15px);
 }
}

@keyframes ball-right {
 0% {
  transform: translate(-15px);
 }
 50% {
  transform: translate(15px);
 }
 100% {
  transform: translate(-15px);
 }
}

@keyframes ball-left {
 0% {
  transform: translate(15px);
 }
 50% {
  transform: translate(-15px);
 }
 100% {
  transform: translate(15px);
 }
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 トップイメージ 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

/*===========================
#main-top
===========================*/

#main-top{
position:relative;
width:100%;
height:650px;
margin:0 0 150px 0;
}


/*===========================
#hoge
===========================*/


#hoge{
width:100%;
height:100%;
margin:0 auto;
background:rgba(0, 0, 0, 0.9);
position:relative;
z-index:3;
display: block;
}

#hoge-bg{
width:100%;
height:100%;

}

.hoge-title {
  margin:-650px auto;
  padding:200px 0 20px 0;
  color:#fff;
  width:1000px;
  position:relative;
  z-index:4;
}
.hoge-title h2 {
  padding:0 0 20px 0;
  font-family: upgrade, Aharoni,Arial,sans-serif;
  font-size: 70px;
  font-weight: 500;
  font-style: normal;
  letter-spacing:-1px;
  line-height:1.15;
  text-align:center;
}

.hoge-title h3 {
  padding-bottom: 20px;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 32px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
  line-height: 1.75;
  text-align: center;
}

.hoge-title h3 br {
  display: none;
}

.hoge-title p {
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
  line-height: 1.75;
  text-align: center;
}

.hoge-title p .sp-display {
  display: none;
}

/*===========================
h1.logo p.logo
===========================*/

#main-top .logo{
position:absolute;
top:30px;
left:50px;
z-index:6;
}

#main-top .logo img{
width:150px;
height:auto;
}


/*===========================
グローバルナビ
===========================*/

#main-top nav{
position:absolute;
top:50px;
right:50px;
z-index:6;
}


#main-top nav ul{
display:flex;
justify-content: flex-end;
list-style-type:none;
padding:0px 0 0 0;
}

#main-top nav li a{
color:#fff;
text-decoration:none;
padding:0 10px 0 10px;
font-size:17px;
font-weight: 700;
}

/*===========================
背景スライドショー
===========================*/

.bg-slide{
width: 100%;
height:100%;
overflow: hidden;
position: absolute;
z-index:2;
}



.bg-slide .img-space {
z-index:2;
opacity: 0;
width: 100%;
height:100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: CrossFade 24s 0s infinite;
animation: CrossFade 24s 0s infinite;
}


/* スライドショーを順番に出すcss */
.bg-slide .img-space:nth-of-type(1) {
background-image:url("../images/bg-slide01.jpg");
}


.bg-slide .img-space:nth-of-type(2) {
background-image:url("../images/bg-slide02.jpg");
-webkit-animation-delay: 6s;
animation-delay: 6s;
}

.bg-slide .img-space:nth-of-type(3) {
background-image:url("../images/bg-slide03.jpg");
-webkit-animation-delay: 12s;
animation-delay: 12s;
}

.bg-slide .img-space:nth-of-type(4) {
background-image:url("../images/bg-slide04.jpg");
-webkit-animation-delay: 18s;
animation-delay: 18s;
}

.bg-slide .img-space:nth-of-type(5) {
background-image:url("../images/bg-slide05.jpg");
-webkit-animation-delay: 24s;
animation-delay: 24s;
}


@-webkit-keyframes CrossFade {
  25% {
    opacity: 1;
    transform: scale(1.4) rotate(0);
  }
  40% {
    opacity: 0;
  }
}
@keyframes CrossFade {
  25% {
    opacity: 1;
    transform: scale(1.4) rotate(0);
  }
  40% {
    opacity: 0;
  }
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #about-us 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

#about-us{
width:100%;
padding:0px 0 10px 0;

}

#about-us .inner{
width:100%;
position:relative;
}

#about-us .inner:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


#about-us .left{
width:40%;
float:left;
padding:0 0 0 10%;
position:relative;
z-index:2;
}

#about-us .inner img.gene-bg{
width:45%;
height:auto;
float:left;
position:relative;

}

#about-us h2{
font-size:65px;
font-weight: 900;
font-style: normal;
padding:10px 0 10px 0;
}

#about-us p.en{
font-size:35px;
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
font-style: normal;
padding:20px 0 0 0;
}

#about-us .sentence{
padding:30px 0px 10px 0;
}

#about-us .sentence p{
font-size:1.2em;
padding:10px 30px 10px 0;
line-height:1.75;
letter-spacing:2px;
}

#about-us .to-page{
padding:50px 0 0 0;
width: 350px;
font-size:20px;
font-weight:700;
}


#about-us .move-grade{
width:300px;
margin:30px 0 0 40px;
}


/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #product 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

#product{
background: linear-gradient(to left, rgba(24,125,221,1) 0%,rgba(0,195,193,1) 100%);
position:relative;
height:540px;
padding:110px 0 110px 0;
margin:70px 0 120px 0;
overflow: hidden;
}


#product .inner{

}



#product .inner .right{
padding:0 10% 0 5%;
width:35%;
text-align:left;
float:right;

}

#product .inner .right .semi{
font-size: 27px;
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
color:#fff;
text-shadow:0px 0px 4px #1175aa;
letter-spacing: 2px;
padding:50px 0 40px 0;
}

#product .inner .right .catch{
font-size: 67px;
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
color:#fff;
text-shadow:0px 0px 4px #1175aa;
letter-spacing: 2px;
padding:0 0 40px 0;
}

#product .inner .right h2.title{
font-weight: 700;
color:#fff;
text-shadow:0px 0px 4px #1175aa;
letter-spacing:2px;
font-size:1.2em;
line-height:1.5;
}

#product .inner .product-slider{
padding:0 0% 0 15%;
width:50%;
float:left;

}

#product .inner .product-slider img{
width:90%;
height:auto;
padding:5%;
background:#fff;
border-radius:30px;
}



#product .to-link{
padding:80px 0 0 0;
}
#product .to-link .drawbtn{
box-sizing: border-box;
display: block;
padding:15px 30px;
box-shadow: inset 0 0 0 2px #fff;
color:#fff;
font-weight: 700;
position: relative;
vertical-align: middle;
width:70%;
margin:0 0 0;
text-align:center;
font-size:1.2em;
text-decoration:none;
letter-spacing:1px;
}

#product .to-link .drawbtn:hover{
color:#8adbe7;
}

#product .to-link .drawbtn span.small{
font-size:0.9em;
position:relative;
top:-3px;
left:-2px;
}



/*===========================
背景エフェクト
===========================*/

/* 参考：https://codepen.io/vaibhavarora/pen/xmpxjp */

#product .circle .inner:after{
content:"";
background: -moz- linear-gradient(90deg, rgba(3,175,173,1) 0%, rgba(5,107,177,1) 100%);
background: -webkit- linear-gradient(90deg, rgba(3,175,173,1) 0%, rgba(5,107,177,1) 100%);
background: linear-gradient(90deg, rgba(3,175,173,1) 0%, rgba(5,107,177,1) 100%);
position: absolute;
width:100%;
height:100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index:9;
}



#product .circle{
position: absolute;
border-radius: 50%;
background: #8adbe7;
animation: ripple 15s infinite;
box-shadow: 0px 0px 1px 0px #508fb9;
}


#product　.small{
width: 200px;
height: 200px;
right: -100px;
bottom: -100px;
}

#product　.medium{
width: 400px;
height: 400px;
right: -200px;
bottom: -200px;
}

#product .large{
width: 600px;
height: 600px;
right: -300px;
bottom: -300px;
}

#product .xlarge{
width: 800px;
height: 800px;
right: -400px;
bottom: -400px;
}


.shade1{
opacity: 0.1;
}
.shade2{
opacity: 0.2;
}



@keyframes ripple{
  0%{
    transform: scale(0.8);
  }
  
  50%{
    transform: scale(1.2);
  }
  
  100%{
    transform: scale(0.8);
  }
}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #company 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

#company{
width:100%;
padding:0px 0 10px 0;
margin:0 0 100px 0;
}

#company .inner{
width:100%;
position:relative;
}

#company .inner:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


#company .left{
width:45%;
float:left;
padding:0 0 0 10%;
position:relative;
z-index:2;
}



#company h2{
font-size:65px;
font-weight: 900;
font-style: normal;
padding:10px 0 10px 0;
}

#company p.en{
font-size:35px;
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
font-style: normal;
padding:20px 0 0 0;
}




#company .sentence{
padding:30px 0px 10px 0;
}

#company .sentence p{
font-size:1.2em;
padding:10px 30px 10px 0;
line-height:1.75;
letter-spacing:2px;
}

#company .to-page{
padding:50px 0 0 0;
width: 350px;
font-size:20px;
font-weight:700;
}


#company .move-grade{
width:300px;
margin:30px 0 0 40px;
}



/*===========================
右側サムネイル画像
===========================*/


#company .inner .right{
width:38%;
height:auto;
float:left;
position:relative;
padding:0 7% 0 0;
webkit-font-smoothing: subpixel-antialiased;
}
#company .thumb-img {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
width: 100%;
height: auto;
-webkit-animation: transform-liquid 25s ease-in-out infinite both alternate;
animation: transform-liquid 25s ease-in-out infinite both alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

#company .thumb-img img{
width:100%;
height:auto;
}

@-webkit-keyframes transform-liquid{0%,100%{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50%/35% 61% 39% 65%}}

@keyframes transform-liquid{0%,100%{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50%/35% 61% 39% 65%}}



/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 #community 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/
#community{
position:relative;
padding:60px 0 80px 0px;
margin:0 0 100px 0;
}

#community .inner{
position:relative;
z-index:20;
}



/*===========================
タイトル
===========================*/

#community p.en {
font-size: 18px;
width:300px;
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
font-style: normal;
padding: 10px 0 10px 0;
color:#fff;
text-align:center;
letter-spacing:1px;
transform: skew(-15deg);
border: solid 2px #fff;
margin:0 auto 0;
}

#community p.en span{
    display: block;
    transform: skew(15deg);
}

#community p.semi {
font-weight: 700;
font-size: 20px;
font-style: normal;
padding:30px 0 0 0;
color:#fff;
text-align:center;
letter-spacing:1px;
}

#community h2{
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
color:#fff;
text-shadow:0px 0px 4px #000;
letter-spacing:2px;
font-size:80px;
line-height:1.25;
padding:0px 0 20px 0;
text-align:center;
}

#community p.sentence {
font-size: 1.1em;
font-style: normal;
padding:30px 0 10px 0;
color:#fff;
text-align:center;
letter-spacing:1px;
width:800px;
margin:0 auto;
}



/*===========================
スライダー
===========================*/


#community .com-slider .wrapper{
padding:0 15px 0 15px;
}

#community .com-slider li{
list-style-type:none;

}
#community .com-slider li img{
width:100%;
height:auto;

}


/*===========================
背景
===========================*/

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}
@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}
@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}
@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}
@-webkit-keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}
@-moz-keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}
@-ms-keyframes move-clouds-back {
  from {
    background-position: 0;
  }
  to {
    background-position: 10000px 0;
  }
}

#community .stars,
#community .twinkling,
#community .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index:10;
}

#community .stars {
  background: #000
    url(../images/stars.png) repeat top
    center;
  z-index: 0;
}

#community .twinkling {
  background: transparent
    url(../images/twinkling.png) repeat
    top center;
  z-index: 1;

  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

#community .clouds {
  background: transparent
    url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top
    center;
  z-index: 3;

  -moz-animation: move-clouds-back 200s linear infinite;
  -ms-animation: move-clouds-back 200s linear infinite;
  -o-animation: move-clouds-back 200s linear infinite;
  -webkit-animation: move-clouds-back 200s linear infinite;
  animation: move-clouds-back 200s linear infinite;
  opacity:0.5;
}


/*===========================
ボタン
===========================*/

#community .to-link{
padding:40px 0 0 0;
}
#community .to-link a{
box-sizing: border-box;
display: block;
padding:17px 30px;
color:#fff;
font-weight: 700;
vertical-align: middle;
width:500px;
margin:0 auto 0;
font-size:1.2em;
text-decoration:none;
letter-spacing:1px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
overflow: hidden;
-webkit-transition: .3s;
transition: .3s;
}

#community .to-link a:after {
position: absolute;
-webkit-transition: .3s;
transition: .3s;
content: '';
width: 0;
bottom: 0;
background: #f7f7f7;
height: 120%;
left: -10%;
-webkit-transform: skewX(15deg);
      transform: skewX(15deg);
z-index: -1;
}


#community .to-link a:hover {
  cursor: pointer;
  color: #000;
  box-shadow: inset 0 0 0 2px #000;
}

#community .to-link a:hover:after {
  left: -10%;
  width: 120%;
}

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 .contact-space 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/

.contact-space{
width:1000px;
margin:0 auto 0;
box-sizing: border-box;
border:solid 4px #000;
padding:50px 50px 50px 50px;
}

.contact-space p.semi{
font-family: upgrade, Aharoni,Arial,sans-serif;
font-weight: 500;
color:#000;
letter-spacing: 2px;
padding:20px 0 20px 0;
text-align:center;
font-size:45px;
}

.contact-space h2{
font-size:25px;
font-weight: 900;
font-style: normal;
padding:30px 0 10px 0;
text-align:center;
}

.contact-space p{
font-size:1.2em;
padding:20px 0 20px 0;
line-height:1.5;
text-align:center;
}

.contact-space .effect3{
display:block;
text-decoration:none;
margin:0 auto 0;
width:300px;
text-align:center;
color:#000;
font-weight:700;
padding:10px 0 10px 0;
}

.contact-space .effect3 span.small{
font-size:0.9em;
position:relative;
top:-3px;
left:-2px;
}

.contact-space .effect3::after {
  border-bottom-color: #000;
  border-right-color: #000;
}
.contact-space .effect3::before {
  border-top-color: #000;
  border-left-color:  #000;
}
.contact-space .effect3:hover:after, .effect3:hover:before {
  border-bottom-color:  #000;
  border-right-color:  #000;
  border-top-color:  #000;
  border-left-color:  #000;
}

/*=============================================
 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

〇 footer 〇

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
=============================================*/


footer{
background-image: url(../images/footer-bg.jpg);
background-size: cover;
background-position:center center;
position: relative;
padding: 70px 0 50px 0;
z-index:8;
margin:120px auto 0;
}

/*===========================
背景色
===========================*/

footer:after{
content:"";
background: -moz-linear-gradient(left, rgba(10,10,10,0.9.5) 0%, rgba(0,0,0,0.95) 100%);
background: -webkit-linear-gradient(left, rgba(10,10,10,0.95) 0%, rgba(0,0,0,0.95) 100%);
background: linear-gradient(left, rgba(10,10,10,0.95) 0%, rgba(0,0,0,0.95) 100%);
position: absolute;
width:100%;
height:100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index:9;
}


/* inner z-index有り */

footer .inner{
width:80%;
height:100%;
position:relative;
z-index:10;
margin:0 auto 0;
}

footer .logo img{
width:200px;
height:auto;
display:block;
margin:0 auto 0;
}

footer nav ul{
display:flex;
justify-content: center; /* 子要素をflexboxにより中央に配置する */
list-style-type:none;
padding:50px 0 20px 0;
}

footer nav li{

}

footer nav li a{
padding:0 20px 0 20px;
color:#fff;
text-decoration:none;
}


/*===========================
footer img.floating
===========================*/

footer img.floating-left{
width:120px;
height:auto;
position:absolute;
z-index:12;
top:50px;
left:6%;
}


footer img.floating-right{
width:180px;
height:auto;
position:absolute;
z-index:12;
top:30px;
right:6%;
}


/*===========================
copyright
===========================*/

footer .copyright{
position: absolute;
left: 20px;
bottom: 20px;
font-size: rem(12);
letter-spacing: 3px;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index:12;
color:#fff;
}