ser-du@charset "UTF-8";
/* CSS Document */

/* google font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;900&family=Noto+Sans+KR:wght@400;700&family=Roboto&display=swap');

/*adobe font*/
  @import url("https://use.typekit.net/fwi4xvd.css");

body{
	font-family: 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
}



.back-main-btn{
	color: #00155C;
	text-decoration: none;
}
.back-main-btn a:link{
		color: #00155C;

}
.back-main-btn a:visited{
		color: #00155C;

}
.back-main-btn a:hover{
	color: #41E7FF;
}
.back-main-btn a:ctive{
	text-decoration: none;
		color: #00155C;

}

.main-station{
	background: url(./images/main_bg_012.jpg) no-repeat left bottom ;
	background-attachment: relative;
	background-position: top center;
	background-color: #317ACB;
	width: 100%; 
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: cover;
	
	padding-bottom: 0px;
	
}


.main-station2{
	background: url(./images/main_bg_02.jpg) no-repeat left bottom ;
	background-attachment: relative;
	background-position: top center;
	background-color: #317ACB;
	width: 100%; 
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: cover;
	padding-bottom: 50px;
	
}

.filter{
    filter:drop-shadow(0px 0px 6px rgba(0,0,0,.9)) ;
  }



.main-logo{
	width: 100%;
	text-align: center;
	margin: 60px 0px;
}
.filter{
    filter:drop-shadow(0px 0px 6px rgba(0,0,0,.9)) ;
  }
.main-logo h3{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 38px;
	color: #FF008E;
	text-transform: uppercase;
	text-shadow: #000 2px 0 6px;
}
.main-logo p{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: #FFFFFF;
	text-shadow: #000 2px 0 6px;
	
}

.main-download{
	padding-bottom: 40px;
	background-color: #000000;
	padding: 20px;
}


.main-youtubelist{
  background-color: #333333;
  background-image: 
    radial-gradient(closest-side, rgba(10, 10, 10, 1), rgba(50, 50, 50, 0)),
    radial-gradient(closest-side, rgba(50, 50, 50, 1), rgba(100, 100, 100, 0)),
    radial-gradient(closest-side, rgba(100, 100, 100, 1), rgba(150, 150, 150, 0)),
    radial-gradient(closest-side, rgba(150, 150, 150, 1), rgba(200, 200, 200, 0)),
    radial-gradient(closest-side, rgba(200, 200, 200, 1), rgba(10, 10, 10, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s movement linear infinite;
}

@keyframes movement {
  0%, 100% {
    background-size: 
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }
  25% {
    background-size: 
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }
  50% {
    background-size: 
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax,
      20vmax 10vmax,
      30vmax 70vmax;
  }
  75% {
    background-size: 
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}


hr.style-two {
    border: 1px solid #FF008E;
    height: 2px;
	opacity: 0.6;
	margin: 30px 0;
}

hr.style-one {
    border: 1px solid #FFFFFF;
    height: 2px;
	opacity: 1;
	margin: 30px 0 50px 0;
	text-align: center;
}

.ser-gp{
	width: 100%;
	border: 2px #FFFFFF solid;
	text-align: center;
	position: relative;
	background: url(./images/main_ser_bg_05.jpg) no-repeat left bottom ;
	background-position: top center;
	padding: 0px 30px 70px 30px;
	
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;


	
}
.ser-gp:hover{
	background-color:rgba(0,138,255,0.38);
	background: url(./images/main_ser_bg_05_over.jpg) no-repeat left bottom ;
	background-attachment: relative;
	background-position: top center;
	
	-webkit-transform: scale(1.2);
	transform: scale(1.1);
	overflow: hidden;
	
	z-index: 2;
	

}

.ser-du{
	width: 100%;
	border: 2px #FFFFFF solid;
	text-align: center;
	position: relative;
	background: url(./images/main_ser_bg_03.jpg) no-repeat left bottom ;
	background-position: top center;
	padding: 0px 30px 70px 30px;
	
	
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	
}


.ser-du:hover{
	background-color:rgba(0,138,255,0.38);
	background: url("./images/main_ser_bg_03_over.jpg") no-repeat left bottom ;
	background-attachment: relative;
	background-position: top center;
	
	-webkit-transform: scale(1.2);
	transform: scale(1.1);
	overflow: hidden;
	
}

.ser-w:hover{
	background-color:rgba(0,138,255,0.38);
	background: url(./images/main_ser_bg_06_over.jpg) no-repeat center;
	background-attachment: relative;
	background-position: top center;
    background-size: cover;
	
	-webkit-transform: scale(1.2);
	transform: scale(1.1);
	overflow: hidden;
	
	z-index: 2;
	

}

.ser-w{
	width: 100%;
	border: 2px #FFFFFF solid;
	text-align: center;
	position: relative;
	background: url(./images/main_ser_bg_06.jpg) no-repeat center;
	background-position: top center;
	padding: 0px 30px 70px 30px;
    background-size: cover;
	
	
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	
}

.dow-pic{
	display: block;
}

.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.enter{
	width: 200px;
	padding: 7px 10px;
	background-color: #FFFFFF;
	font-size: 15px;
	text-align: center;
	margin: 0 auto;
}
.footer p{
	font-size: 13px;
	color: #DBDBDB;
	padding: 10px 0;
	margin: 0;
	
}




/*次頁*/

.page-logo-gp{
	width: 600px;
	
}
.page-logo-du{
	width: 500px;
	}

.page-header{
		padding-bottom: 10px;
	}
.page-logo-maker{
	width: 100%;
	text-align: center;
}
.page-header h3{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 30px;
	color: #FF008E;
	text-align: left;
	text-transform: uppercase;
	text-shadow: #000 2px 0 6px;
	padding-top: 90px;
	padding-left: 60px;
	}
.ytmv p{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: #FFFFFF;
	text-shadow: #000 2px 0 6px;
	text-align: center;
	padding: 40px 30px 40px 20px;
}
.ser-gp{
	width: 100%;
	padding: 30px;
	border: 2px #FFFFFF solid;
	text-align: center;
	margin: 60px 0;
	
}
.ser-gp:hover{
	background-color:rgba(255,255,255,0.48);
}

.dow-pic{
	display: block;
}


.kv{ 
	background: url(./images/temp_bg_01.jpg) no-repeat left bottom;
	background-attachment: relative;
	background-position: center center;
	width: 100%; 
	padding-bottom:0 30px ;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: cover;
	
}


.download{ 
	background: url("/images/download_bg.png") no-repeat center top;
	background-attachment: relative;
	background-position: center center;
	background-color: #317ACB;
	width: 100%;
	padding-bottom:30px;
	padding-top: 30px;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: cover;
	
}

.download_2{ 
	background-attachment: relative;
	background-position: center center;
	background-color: #C9C9C9;
	width: 100%;
	padding-bottom:30px;
	padding-top: 30px;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: cover;
	
}

.t1{
	color: #00CBFF;
}
.t1 A:link {
	color: #00CBFF;
}
.t1 A:active {
	color: #00CBFF;
	text-decoration: none
}
.t1 A:visited {
	COLOR: #FFF;
	text-decoration: none
}
.t1 A:hover {
	color:#FFD600 ;
	text-decoration: underline
}
.t2{
	color: #FFF;
}
.t2 A:link {
	color: #FFF;
}
.t2 A:active {
	color: #FFF;
	text-decoration: none
}
.t2 A:visited {
	COLOR: #FFF;
	text-decoration: none
}
.t2 A:hover {
	color:#FFD600 ;
	text-decoration: underline
}

.solution5 {
  background: url(./download_bg.png);
  background-size: cover;
}

.socialcolor {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 35px;
	color: #FFF;
	line-height: 18px;
}
.socialcolor A:link {
	color: #000;
	text-decoration: none
}
.socialcolor A:active {
	color: #000;
	text-decoration: none
}
.socialcolor A:visited {
	COLOR: #000;
	text-decoration: none
}
.socialcolor A:hover {
	color:#FFF ;
	text-decoration: underline
}


.card {
  background: #222222;
  border: 0px solid #00A2FD;
  color: rgba(250, 250, 250, 1);
  margin-bottom: 2rem;
}
.card2 {
  background: white;
  border: 0px solid #000000;
  color: rgba(250, 250, 250, 0.8);
  margin-bottom: 2rem;
}


/*平板*/
@media  (max-width:996px) { 
  .main-station2{
	padding-bottom: 20px;	
	}

  .page-logo-gp{
		width: 100%;
	}
  .page-logo-du{
	width: 80%;
	text-align: center;
	padding: 0;
	margin: 0;
	}
  .page-header h3{
	text-align: center;
	text-transform: uppercase;
	text-shadow: #000 2px 0 6px;
	padding: 40px 0 0 0 ;
	}
	.page-header{
		padding: 0;
	}
}


/*手機*/
@media  (max-width:768px) { 
  .main-station{
	background: url(./images/kv_bg.png) no-repeat left bottom ;
	padding-bottom: 10px;
	}
  .ytmv p{
	font-size: 15px;
	}

  .page-header h3{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: #FF008E;
	text-transform: uppercase;
	text-shadow: #000 2px 0 6px;
	padding-top: 20px;
	}
  .page-logo-maker{
	width: 90%;
	text-align: center;
	}
  .main-logo h3{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 23px;
	color: #FF008E;
	text-transform: uppercase;
	}
  .main-logo p{
	font-family: "century-gothic", 'Roboto','Noto Sans JP','Noto Sans KR', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 15px;
	color: #FFFFFF;
	text-shadow: #000 2px 0 6px;
	}
  .main-logo{
	margin: 20px 10px;
	}
  .ser-gp{
	width: 100%;
	margin: 20px;
	}

  .ser-du{
	width: 100%;
	margin: 20px;

	}

}

.protablecontainer{
  display: -webkit-flex; 
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;       
  -webkit-justify-content: center;
  display: flex;
  flex-wrap:wrap;
  justify-content:center;      
  width:100%;
}


.protabledata
{
	float:left;
	width:310px;
	flex-basis:310px;
	flex-grow:0;
	flex-shrink:1;
}

.probox
{
	width:280px;
	border:#323232 1px solid;
	height:300px;
	background-color:#121212;
}

.probox:hover
{
	background-color:#000;
	/*background:rgba(70,70,70,.5);*/
	cursor:pointer;
}

.t-white01,.t-gary02 { 
	font:14px/24px DINPro,"source-han-sans-traditional",Helvetica,Arial,Sans-Serif;
	color: #FFFFFF;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}

.t-gary02{
    COLOR: #666;
}