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

/* ================================================== */
/* ローディング画面 */
/* ================================================== */
.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  color:#A8A8A8;
  font-size:7.3rem;
  animation: loadingtext 3.0s both;
  animation-delay: 2.0s;
}
.loading-animation br{
  display:none;
}

@keyframes loadingtext {
0% {
  color:#A8A8A8;
}
50% {
  color:#A8A8A8;
}
100% {
  color:#4F595D
}
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 768px) {
.loading-animation {
  font-size:4.2rem;
}
}
@media only screen and (max-width: 480px) {
.loading-animation {
  font-size:4.2rem;
}
.loading-animation p{
  width:85%;
  padding-bottom: 80px;
}
.loading-animation br{
  display: block;
}
}


/* ================================================== */
/* #logo（ページ個別設定） */
/* ================================================== */

@media only screen and (max-width: 1260px) {
.header #logo a{
  fill: #FFF;
  }
}
/* ============ スクロール後 ============ */
.header.nav_switch #logo a{
  fill: #000 ;
  }

/* ================================================== */
/* .header（ページ個別設定） */
/* ================================================== */
.header{
  z-index:2;
  display:none;
  }
@media only screen and (max-width: 1260px) {
.header{
  z-index:4;
  display: block;
  background-color: rgba(255,255,255,0);
  }
}
/* ============ スクロール後 ============ */
.header.nav_switch{
  background-color: rgba(255,255,255,0.8);
  display: block;
  }

/* ================================================== */
/* .nav（ページ個別設定） */
/* ================================================== */
#global .button > span {
  background-color: #FFF;
  }
#global .button::after {
  color: #FFF;
  }
/* ================================================== */
/* .contents */
/* ================================================== */
.contents{
  margin-top:0;
  }
/* ================================================== */
/* #indexlogo（※基本#logoと位置を揃える） */
/* ================================================== */
#indexlogo{
  position: absolute;
  top:75px;
  left:50px;
  width:112px;
  transition: .3s;
  z-index:4;
  }
#indexlogo a{
  display:inline-block;
  fill: #00608D;
  }
@media only screen and (max-width: 1260px) {
#indexlogo{
  display:none;
  }
}

/* ================================================== */
/* #mainvisual */
/* ================================================== */
#mainvisual{
  position: relative;
  z-index:3;
  overflow: hidden;
  }
#mainvisual .full{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  }
#mainvisual .video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }
#mainvisual .slider{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100vh;
  background-color:#FFF;
  }
#mainvisual .slider .box{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height: 100vh;
  }
#mainvisual .slick-active{
    animation: fadezoom 6s forwards;
    -webkit-transform: translate(0,0,0);
}
@keyframes fadezoom {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
                
#mainvisual .slider .box.bg01{
  background-image: url(/img/index/mainvisual_slider01.jpg);
  background-position:right center;
  }
#mainvisual .slider .box.bg02{
  background-image: url(/img/index/mainvisual_slider02.jpg);
  background-position:right center;
  }
#mainvisual .slider .box.bg03{
  background-image: url(/img/index/mainvisual_slider03.jpg);
  background-position:50% center;
  }
#mainvisual .slider .box.bg03 p{
  position: absolute;
  top: 10px;
  right: 50px;
  font-size: 1.0rem;
  text-align:right;
  }
#mainvisual .wrap{
  position: absolute;
  width:900px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 1024px) {
#mainvisual .wrap{
  top: 50%;
}
/*
#mainvisual .video{
  display: none;
  }
#mainvisual .slider{
  display: block;
  }
*/
}
@media only screen and (max-width: 480px) {
#mainvisual .slider .box.bg01{
  background-image: url(/img/index/mainvisual_slider01_sp.jpg);
  }
#mainvisual .slider .box.bg02{
  background-image: url(/img/index/mainvisual_slider02_sp.jpg);
  background-position:20% center;
  }
#mainvisual .slider .box.bg03{
  background-image: url(/img/index/mainvisual_slider03_sp.jpg);
  background-position:right center;
  }
#mainvisual .slider .box.bg03 p{
  position: absolute;
  top: auto;
  bottom: 5px;
  right: 5px;
  }
}
/* ============ タイトル ============ */
#mainvisual .titlebox{
  position:relative;
  white-space: nowrap;
}
#mainvisual .title{
  position:relative;
  font-size:9.0rem;
  color:#4F595D;
  line-height:1;
}
#mainvisual .title br{
  display:none;
  }
#mainvisual .title .layer01{
  position:relative;
  display: inline-block;
  }
#mainvisual .title .layer02{
  position:relative;
  display: block;
  color:#3B85A5;
  margin-top:-4.5rem;
  left:140px;
  }
#mainvisual .titlebox .catch{
  font-size:3.0rem;
  color:#000;
  margin-top:30px;
}
@media only screen and (max-width: 480px) {
#mainvisual .titlebox{
  margin:0 auto;
  }
#mainvisual .title{
  font-size:7.8rem;
  text-align:center;
  color:#FFF;
  }
#mainvisual .title br{
  display:block;
  }
#mainvisual .title .layer01{
  text-align:left;
  }
#mainvisual .title .layer02{
  margin-top:-2.7rem;
  left:0;
  font-size:5.4rem;
  color:#97C4AE;
  }
#mainvisual .titlebox .catch{
  position:absolute;
  top:-100px;
  margin-top:0;
  color:#FFF;
  font-size:1.4rem;
}
}
/* ============ ナビ ============ */
#mainvisual .nav{
}
#mainvisual .nav li + li{
  margin-top:25px;
}
#mainvisual .nav li a{
  color: #4F595D;
  padding: 10px 0;
}
#mainvisual .nav li a::after{
  background-color: #4F595D;
}
#mainvisual .nav .slash{
  display: inline-block;
  background-color:#FFF;
  width:1px;
  height:32px;
  margin:0 18px;
  transform:rotate(45deg);
}
#mainvisual .nav .snslink a{
  display: inline-block;
  line-height: 1;
  width:36px;
  padding:0;
  fill: #FFF;
}
@media only screen and (max-width: 1260px) {
#mainvisual .nav{
  display:none;
}
}


/* ============ スクロール ============ */
#mainvisual .scroll {
  display:inline-block;
  height:110px;
  width:24px;
  position: absolute;
  bottom:0;
  left:50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  cursor: pointer;
  color:#FFF;
}
#mainvisual .scroll::before {
  content: "Scroll";
  position: absolute;
  top:0;
  right:0;
  -ms-writing-mode :tb-rl;
  writing-mode: vertical-rl;
}
#mainvisual .arrow {
  position: relative;
  width: 0;
  height: 100px;
  border: 1px solid #FFF;
}
#mainvisual .arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -3px;
  width: 2px;
  height: 10px;
  border-top: 10px solid #FFF;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}
/* 専用アニメ */
#mainvisual .scroll {
  animation: flash 3s linear infinite;
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 1024px) {
#mainvisual .scroll {
  bottom:80px;
}
}
@media only screen and (max-width: 768px) {
#mainvisual .scroll {
  left:25%;
}
}
@media only screen and (max-width: 480px) {
#mainvisual .scroll {
  left:50%;
}
}
/* ================================================== */
/* .ban_towel */
/* ================================================== */
.ban_towel{
  width:420px;
  position: absolute;
  right: 0;
  top:calc(100vh - 160px);
  background-color:rgba(255,255,255,0.6);
  color: #4F595D;
  font-size:1.6rem;
  padding: 10px 40px 10px 20px;
  align-items: center;
  z-index:3;
  }
.ban_towel .img{
  width:100px;
  }
.ban_towel .text{
  width:calc(100% - 100px);
  white-space: nowrap
  }
.ban_towel .text .min{
  font-size:1.2rem;
  }
@media only screen and (max-width: 1024px) {
.ban_towel{
  width:400px;
  top:calc(100vh - 210px);
  }
}
@media only screen and (max-width: 480px) {
.ban_towel{
  width:100%;
  position: relative;
  right: 0;
  top:0;
  background-color:rgba(255,255,255,1.0);
  padding: 10px 20px 10px 20px;
  }
.ban_towel .img{
  width:80px;
  }
.ban_towel .text{
  width:calc(100% - 90px);
  }
}
@media only screen and (max-width: 360px) {
.ban_towel .img{
  width:50px;
  }
.ban_towel .text{
  width:calc(100% - 60px);
  }
.ban_towel{
  font-size:1.4rem;
  }
.ban_towel .text .min{
  font-size:0.9rem;
  }
}
/* ================================================== */
/* #news */
/* ================================================== */
#news {
  padding:120px 0;
  background-color:#F4F4F4;
  }
#news .titlewrap{
  position:absolute;
  top:0;
  left:0;
  }
#news .title{
  position:relative;
  font-size:4.0rem;
  line-height:1;
  color:#000;
  }
#news .subtitle{
  color:#000;
  font-size:1.6rem;
  }
#news .list li {
  max-width:700px;
  align-items:center;
  }
#news .list li:nth-child(1){
  margin-left:300px;
  }
#news .list li:nth-child(2){
  margin-left:200px;
  }
#news .list li:nth-child(3){
  margin-left:100px;
  }
#news .list li + li{
  margin-top:50px;
  }
#news .list .day {
  width:100px;
  }
#news .list .text {
  width:calc(100% - 100px);
  padding-left:30px;
  border-left:solid #5F5F5F 1px;
  font-size:1.2rem;
  }
#news .list .newstitle {
  font-size:1.4rem;
  margin-bottom:5px;
  }
@media only screen and (max-width: 768px) {
#news .titlewrap{
  position: relative;
  }
#news .list{
  margin-top:35px;
  }
#news .list li{
  display:block;
  }
#news .list li:nth-child(1){
  margin-left:0;
  }
#news .list li:nth-child(2){
  margin-left:0;
  }
#news .list li:nth-child(3){
  margin-left:0;
  }
#news .list li + li{
  margin-top:20px;
  }
#news .list .text {
  width:100%;
  padding:10px 0 20px;
  border-left:none;
  border-bottom:solid #5F5F5F 1px;
  }
}
@media only screen and (max-width: 480px) {
#news {
  padding:60px 0;
  }
}
/* ================================================== */
/* #pr */
/* ================================================== */
/* ============ 各セクション共通 ============ */
#pr {
  padding:150px 0 50px;
  background-image:url(/img/index/pr_bg01.svg);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:110%;
  }
#pr section + section{
  margin-top:180px;
  }
#pr .catch{
  font-size:4.0rem;
  }
#pr .em{
  font-size:1.8rem;
  margin:50px 0;
  }
#pr .underline{
  padding-bottom:10px;
  border-bottom:solid #5F5F5F 1px;
  }
#pr .viewmore{
  margin-top:65px;
  font-size:2.0rem;
  font-family:Arial, sans-serif;
  }
#pr .viewmore .hover_line_l{
  padding-bottom:5px;
  }
#pr .viewmore .hover_line_l::after{
  background-color:#5F5F5F;
  }
@media only screen and (max-width: 768px) {
#pr .catch{
  font-size:2.8rem;
  }
}
@media only screen and (max-width: 480px) {
#pr {
  padding:50px 0 50px;
  }
#pr section + section{
  margin-top:100px;
  }
#pr .catch{
  font-size:2.0rem;
  line-height: 1.6;
  }
#pr .em{
  font-size:1.4rem;
  margin:30px 0;
  }
#pr .viewmore{
  margin-top:40px;
  font-size:1.6rem;
  }
}
/* ============ 背景 ============ */
.bgparts{
  position: absolute;
  z-index:-1;
  }
.bgparts.p01{
  top:30%;
  right:0;
  width:40%;
  }
.bgparts.p02{
  top:45%;
  right:0;
  width:20%;
  }
.bgparts.p03{
  top:62%;
  left:0;
  width:30%;
  }
.bgparts.p04{
  top:72%;
  right:0;
  width:30%;
  }
.bgparts.p05{
  top:90%;
  right:0;
  width:20%;
  }
@media only screen and (max-width: 480px) {
.bgparts.p01{
  top:25%;
  width:80%;
  }
.bgparts.p02{
  top:47%;
  width:40%;
  }
.bgparts.p03{
  top:62%;
  width:60%;
  }
.bgparts.p04{
  top:70%;
  width:60%;
  }
.bgparts.p05{
  top:92%;
  width:40%;
  }
  }
/* ============ #intro ============ */
#intro{
  position:relative;
  }
#intro .catch br.switch{
  display:none;
  }
#intro .textbox{
  margin-top:95px;
  }
#intro .textbox p{
  font-size:1.8rem;
  line-height:2.4;
  }
#intro .imgbox01{
  position:absolute;
  right:10%;
  top:25%;
  width:28%;
  }
#intro .imgbox02{
  width:50%;
  min-width:400px;
  margin-top:150px;
  }
@media only screen and (max-width: 1024px) {
#intro .imgbox01{
  right:3%;
  top:40%;
  }
}
@media only screen and (max-width: 768px) {

}
@media only screen and (max-width: 640px) {
#intro .imgbox01 {
    top: 12%;
    width: 25%;
}
}
@media only screen and (max-width: 480px) {
#intro .catch{
  line-height: 2.8;
  }
#intro .catch br.switch{
  display: block;
  }
#intro .textbox{
  margin-top:50px;
  }
#intro .textbox p{
  font-size:1.2rem;
  line-height:3.4;
  }
#intro .imgbox01 {
    top: 12%;
    right:8%;
    width: 30%;
}
#intro .imgbox02{
  margin-top:80px;
  }
}
/* ============ #technology ============ */
#technology{
  }
#technology .pileup_title .en .layer02{
  left: 0.5em;
  }
#technology .coating{
  margin-top:200px;
  text-align:center;
  }
#technology .coating .catch{
  display: inline-block;
  margin-bottom: 20px;
  }
#technology .coating .catch br{
  display:none;
  }
#technology .coating .boxwrap{
  }
#technology .coating .box{
  width:47%;
  text-align:left;
  }
#technology .coating .em{
  font-size:1.4rem;
  font-weight:600;
  margin:0 0 20px
  }
#technology .coating .box .logoimg{
  position:relative;
  text-align:center;
  height:270px;
  }
#technology .coating .box .logoimg img{
  position:absolute;
  display:block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }
#technology .coating .box:nth-child(1) .logoimg img{
  max-width:240px;
  }
#technology .coating .box:nth-child(2) .logoimg img{
  width:80%;
  }
@media only screen and (max-width: 640px) {
#technology .coating .boxwrap{
  display:block;
  }
#technology .coating .box{
  width:100%;
  }
}
@media only screen and (max-width: 480px) {
#technology .coating{
  margin-top:80px;
  text-align:left;
  }
#technology .coating .catch{
  display:block;
  }  
#technology .coating .catch br{
  display:block;
  }
#technology .coating .box + .box{
  margin-top:50px;
  }
#technology .coating .box .logoimg{
  height: auto;
  }
#technology .coating .box .logoimg img{
  position: relative;
  top: 0;
  left: 0;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  margin: 20px auto;
  }
}
/* ============ #partner ============ */
#partner{
  }
#partner .pileup_title .en .layer02{
  left: 3.5em;
  }
#partner .linkban{
  display:block;
  margin-top:100px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s
  }
#partner .linkban:hover {
	opacity: 0.7;
}
#partner .merit{
  max-width:840px;
  margin:180px auto 0;
  text-align:center;
  }
#partner .merit .em{
  margin:0;
  }
#partner .merit .info{
  margin-top:45px;
  align-items:center;
  text-align:left;
  }
#partner .merit .info .textbox{
  font-size:1.8rem;
  width:calc(100% - 400px);
  }
#partner .merit .info .linkbtn{
  width:330px;
  }
#partner .merit .info .linkbtn a{
  position: relative;
  display: inline-block;
  font-size:2.0rem;
  border: solid #707070 1px;
  padding:10px 50px 10px 20px;
  }
#partner .merit .info .linkbtn a::after{
  position: absolute;
  top:50%;
  right:20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '';
  display: inline-block;
  width: 25px;
  padding-top:100%;
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  background-image: url(/img/common/icon_blank.svg); 
  }
#partner .merit .info .linkbtn .blue{
  color:#69A9D9;
  }
#partner .linkarea.ver02{
  display:none;
  }
@media only screen and (max-width: 768px) {
#partner .merit .info{
  display:block;
  }
#partner .merit .info .textbox{
  width:100%;
  margin-bottom:50px;
  }
#partner .merit .info .linkbtn{
  width:100%;
  }
}
@media only screen and (max-width: 640px) {
#partner .linkban{
  display:none;
  }
#partner .linkarea.ver02{
  display:block;
  margin-top:40px;
  }
#partner .linkarea.ver02 .box{
  width:100%;
  }
#partner .merit p.em br {
  display: none;
  }
}
@media only screen and (max-width: 480px) {
#partner .merit{
  text-align: left;
  margin:100px auto 0;
  }
#partner .merit .info{
  margin-top:25px;
  }
#partner .merit .info .textbox{
  font-size:1.2rem;
  }
#partner .merit .info .linkbtn a{
  font-size:1.5rem;
  }
}
/* ============ #product ============ */
#product{
  text-align:center;
  }
#product .pileup_title .en .layer01{
  left: -1.7em;
  }
#product .item{
  text-align:left;
  }
#product .item .em{
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 20px;
  }
#product .item .box{
  width:30%;
  }
#product .linkarea{
  margin:180px auto 260px;
  }
#product .subscription{
  }
#product .subscription .plan{
  text-align:left;
  }
#product .subscription .plan .box{
  position:relative;
  width:47%;
  }
#product .subscription .plan p + p{
  margin-top:20px;
  }
#product .subscription .plan .price{
  margin-top: 50px;
  font-weight: 600;
  font-size: 1.6rem;
}
#product .subscription .plan .planname{
  position:absolute;
  top:0;
  left:0;
  font-size:2.0rem;
  }
#product .subscription .plan .em{
  font-size:1.6rem;
  font-weight:600;
  margin:20px 0;
  }
#product .subscription .plan .em .min{
  font-size:1.4rem;
  }
@media only screen and (max-width: 768px) {

}
@media only screen and (max-width: 640px) {
#product .subscription .plan{
  display:block;
  }
#product .subscription .plan .box{
  position:relative;
  width:100%;
  }
#product .subscription .plan .box + .box{
  margin-top:50px;
  }
#product .subscription .plan .price{
  margin-top: 20px;
}
#product .linkarea {
    margin: 120px auto 180px;
}
}
@media only screen and (max-width: 480px) {
#product{
  text-align:left;
  }
#product .pileup_title .en .layer01{
  left: 0;
  }
#product .pileup_title .en .layer02{
  left: 0.5em;
  }
#product .catch + .em br{
  display:none;
  }
#product .linkarea{
  margin:50px auto 100px;
  }
#product .subscription .plan .em{
  font-size:1.4rem;
  }
#product .subscription .plan .em .min{
  font-size:1.2rem;
  }
}

/* ============ #voice ============ */
#voice{
  }
#voice .pileup_title .en .layer02{
  left: 2.3em;
  }
#voice .box{
  position:relative;
  color:#FFF;
  height:520px;
  /*padding:100px 80px 100px;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }
#voice .bg01{
  background-image: url(/img/index/voice_slider01.jpg);
  }
#voice .bg02{
  background-image: url(/img/index/voice_slider02.jpg);
  }
#voice .bg03{
  background-image: url(/img/index/voice_slider03.jpg);
  }
#voice .slider .box .inner{
  /*position:relative;*/
  position:absolute;
  top:80px;
  left:80px;
  width:80%;
  max-width:660px;
  padding-bottom:100px;
  z-index:1;
  }
#voice .slider .box h4{
  font-size:2.2rem;
  margin-bottom:40px;
  }
#voice .slider .box .profile{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  font-size:1.6rem;
  }
/* 横幅の間隔をとる */
#voice .slick-slide{
    margin-right: 0.5vw!important;
    margin-left: 0.5vw!important;
	}
/* スライダーボタンスタイル変更 */
#voice .slick-dots {
  position:relative !important;
  bottom:0 !important;
  margin-top:50px !important;
  }  
#voice .slick-dots li {
  margin:0 10px;
  width:120px !important;
  height:3px !important;
  }                           
#voice .slick-dots li button:before {
  display:none !important;/* ●の非表示 */
  }             
#voice .slick-dots li button {
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  }
#voice .slick-dots li button {background:#CCC !important;}              /* ● DFの色 */
#voice .slick-dots li.slick-active button {background:#999 !important;} /* ● active色 */

#voice .slick-prev, #voice .slick-next {
  z-index:2;
  top:auto;
  bottom:-8px;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  display:none !important;
}
#voice .slick-prev{
  left: calc(50% - 160px);
  transform:rotate(180deg);
  }
#voice .slick-next{
  right: calc(50% - 160px);
  }
#voice .slick-next:before, #voice .slick-prev:before  {
  content: url(/img/common/icon_arrow.svg);
  font-size: 0;
}


@media only screen and (max-width: 1024px) {
#voice .box{
  height:560px;
  }
}
@media only screen and (max-width: 768px) {
#voice .box{
  color:#5F5F5F;
  padding:0;
  height: auto;
  background-size: contain;
  background-position: center top;
  }
#voice .bg01{
  background-image: url(/img/index/voice_slider01_sp.jpg);
  }
#voice .bg02{
  background-image: url(/img/index/voice_slider02_sp.jpg);
  }
#voice .bg03{
  background-image: url(/img/index/voice_slider03_sp.jpg);
  }
#voice .slider .box .inner{
  position: relative;
  top: auto;
  left: auto;
  width:100%;
  z-index:1;
  padding-bottom:0;
  }
#voice .slider .box h4{
  position:relative;
  color:#FFF;
  padding-top: 52.9595%;
  margin-bottom: 30px;
  }
#voice .slider .box h4 span{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width:90%;
  }
#voice .slider .box .profile{
  position: relative;
  margin-bottom:20px;
  }
/*横幅の間隔をとる */
#voice .slick-slide{
  margin-right: 10px!important;
  margin-left: 10px!important;
  }
/* スライダーボタンスタイル変更 */
#voice .slick-dots li {
  margin: 0 5px;
  width: 15% !important;
}
}
@media only screen and (max-width: 480px) {
#voice .slider .box h4{
  font-size:1.6rem;
  }
#voice .slider .box .profile{
  font-size:1.4rem;
  }

/* スライダーボタンスタイル変更 */
#voice .slick-dots li {
  margin: 0 3px;
  width: 20% !important;
}
#voice .slick-prev, #voice .slick-next {
  display: block !important;
}
}
/* ================================================== */
/* アニメ設定 */
/* ================================================== */
/* ============ #intro ============ */
#intro .textbox{
  animation: fadein 3.0s both;
  animation-delay: 2.5s;
  }
/* ============ #mainvisual ============ */
#mainvisual .title .layer01,
#mainvisual .title .layer02,
#mainvisual .titlebox .catch,
#mainvisual .nav,
#mainvisual .slider{
  opacity: 0;
  }
#mainvisual.active .title .layer01{
  animation: l-fadein 3.0s both;
  animation-delay: 1.0s;
}
#mainvisual.active .title .layer02{
  animation: r-fadein 3.0s both;
  animation-delay: 1.0s;
}
#mainvisual.active .titlebox .catch{
  animation: b-fadein 2.0s both;
  animation-delay: 1.8s;
}
#mainvisual.active .nav{
  animation: l-fadein 1.5s both;
  animation-delay: 3.0s;
}
#mainvisual.active .slider{
  animation: fadein 1.5s both;
  animation-delay: 0.5s;
}