@charset "utf-8";

/* Keyboard Page Layout
--------------------------- */

#keyboard-style {
                 max-width: 1480px;

}



/* ------------------------------------------------
   Keyboard Page Title:画像上にタイトルを重ねて表示
--------------------------------------------------- */

#keyboard-style .title-top-left,
#keyboard-style .title-center,
#keyboard-style .title-center-left,
#keyboard-style .title-center-right {
          position: relative;

}


#keyboard-style .title-top-left h2,
#keyboard-style .title-top-left h3,
#keyboard-style .title-top-left p {
          position: absolute;
          top: 0;
          left: 0%;
          -ms-transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
          margin:0;
          padding:0;

}


#keyboard-style .title-center h2,
#keyboard-style .title-center h3,
#keyboard-style .title-center p {
          position: absolute;
          top: 50%;
          left: 50%;
          -ms-transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
          margin:0;
          padding:0;

}


#keyboard-style .title-center-left h2,
#keyboard-style .title-center-left h3,
#keyboard-style .title-center-left p {
          position: absolute;
          top: 50%;
          left: 0%;
          -ms-transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
          margin:0;
          padding:0;

}


#keyboard-style .title-center-right h2,
#keyboard-style .title-center-right h3,
#keyboard-style .title-center-right p {
          position: absolute;
          top: 50%;
          left: 100%;
          -ms-transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
          margin:0;
          padding:0;

}

/*--------------------------------------
  text Slider :テキストスライド表示
----------------------------------------*/

.text-slider {
          margin: 1px;
	  position: relative;
	  float: left;
	  overflow: hidden;
}


.spl {
          display: block;
          position: absolute;
          width:398px;
          height:398px;
          line-height: 100px;
          top:0;
          left:0;
          background: rgba(0,0,0,0.5);
          -webkit-transition: all 0.4s;
          -moz-transition: all 0.4s;
          -ms-transition: all 0.4s;
          -o-transition: all 0.4s;
          transition: all 0.4s;
          opacity: 1;

}


.text-slider-point {
          top:300px;
}


.text-slider a:hover span {
          display: block;
          top:0;
          left:0;
          opacity: 1;
}

/*
.text-slider a:hover img {

} */


.text-slider a {
          display: block;
	  color: #fff;
	  text-decoration: none;
	  margin: 0;
	  padding: 0;
	  width: 398px;
	  height: auto;
}


.text-slider-l {
          margin: 1px;
	  position: relative;
	  float: left;
	  overflow: hidden;
}


.spl-l {
          display: block;
          position: absolute;
          width: 100%;
	  max-width:1280px;
          max-height:640px;
          line-height: 160px;
          top:0;
          left:0;
          background: rgba(0,0,0,0.0);
          -webkit-transition: all 0.4s;
          -moz-transition: all 0.4s;
          -ms-transition: all 0.4s;
          -o-transition: all 0.4s;
          transition: all 0.4s;
          opacity: 0;

}


.text-slider-l-point {
          left:100%;/*1280px;*/
	  
}


.text-slider-l .top1:hover .spl-l {
          display: block;
          top:0;
          left: 0;
          opacity: 1;
}

/*
.text-slider a:hover img {

} */


.text-slider-l .top1 {
          display: block;
	  color: #c33;
	  text-decoration: none;
	  margin: 0;
	  padding: 0;
	  width: 100%;
	  max-width: 1280px;
	  height: auto;
}


/*--------------------------------------
  fadein :スライドフェードイン表示
----------------------------------------*/


.text-slider-fadein {
          margin: 1px;
	  position: relative;
	  float: left;
	  overflow: hidden;
}


.spl-fadein {
          display: block;
          position: absolute;
          width: 100%;
	  max-width:1280px;
          max-height:640px;
          line-height: 160px;
          top:0;
          left:0;
          background: rgba(0,0,0,0.0);
          opacity: 0; 
}


.text-slider-fadein-point {
          left:100%;/*1280px;*/
	  
}


.text-slider-fadein .spl-fadein {
          display: block;
          top:0;
          left: 0;
          opacity: 0;
}


.text-slider-fadein .top1 {
          display: block;
	  color: #c33;
	  text-decoration: none;
	  margin: 0;
	  padding: 0;
	  width: 100%;
	  max-width: 1280px;
	  height: auto;
}


#inview {
color: #ff0000;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*------------------ Label  ----------------*/
.labelRed02 {
	              padding: 3px 0 3px 12px;
                      background: none;
                      border-style: none none none solid;
                      border-left: solid #f66 10px;
                      margin-top: 15px;
                      margin-left: 5px;
                      height: auto;
	              }
         
.labelBlue02 {
	               padding: 3px 0 3px 12px;
                       background: none;
                       border-style: none none none solid;
                       border-left: solid #09f 10px;
                       margin-top: 15px;
                       margin-left: 5px;
                       height: auto;
	              }
	 

/*------------------ Label  //----------------*/


/*------------------ ARROW -------------------*/

.arrow {
        position: relative;
        display: inline-block;
        padding: 0 0 0 16px;
        color: #000;
        vertical-align: middle;
        text-decoration: none;
       /* font-size: 15px;*/
       }

.arrow12 {
        position: relative;
        display: inline-block;
        padding: 0 0 0 32px;
        color: #000;
        vertical-align: middle;
        text-decoration: none;
       /* font-size: 15px;*/
       }

.arrow::before,
.arrow::after,
.arrow12::before,
.arrow12::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: "";
        vertical-align: middle;
        }

.type-1::before {
         left: 2px;
         width: 7px;
         height: 3px;
         background: #7a0;
         }

.type-1::after {
         left: 2px;
         width: 6px;
         height: 6px;
         border-top: 3px solid #7a0;
         border-right: 3px solid #7a0;
         -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
         }

.type-2::before {
         left: 6px;
         box-sizing: border-box;
         width: 6px;
         height: 6px;
         border: 6px solid transparent;
         border-left: 6px solid #09f;
         }

.type12-2::before {
         left: 12px;
         box-sizing: border-box;
         width:12px;
         height: 12px;
         border: 12px solid transparent;
         border-left: 12px solid #09f;
         }

.type-3::before {
         left: 3px;
         width: 4px;
         height: 4px;
         border-top: 2px solid #7a0;
         border-right: 2px solid #7a0;
         -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
         }



/*------------------ ARROW //-----------------*/



/*------------------ PC  ----------------*/
@media (min-width: 1024px){


.fs300 {
        font-size: 42px;
       }

.fs200 {
        font-size: 28px;
	font-weight: normal;
       }

.fs160 {
        font-size: 24px;
       }

.fs160x2 {
        font-size: 24px;
       }


.fs150 {
        font-size: 22px;
       }

.fs100 {
        font-size: 20px;
       }

.fs80 {
        font-size: 18px
       }

}

h3.hover-box-size {
         font-size: 28px;
	 font-weight: normal;
	 color:#fff;
       }


/*------------------ PC  //----------------*/

/*------------------ Tablet (1024px以下)----------------*/
@media (min-width: 640px) and (max-width: 1023px){


.fs300 {
        font-size: 26px;
       }

.fs200 {
        font-size: 24px !important;
	font-weight: normal;
       }

.fs160 {
        font-size: 22px;
       }

.fs160x2 {
        font-size: 22px !important;
       }

.fs150 {
        font-size: 18px;
       }

.fs100 {
        font-size: 16px;
       }

.fs80 {
        font-size: 414px;
       }


}



/*------------------ Tablet //----------------*/


@media (max-width: 1023px){

.pc_off {
         display:  block !important;
        }

.smart_off {
            display: none !important;
           }


h3.hover-box-size {
         font-size: 18px;
	 font-weight: normal;
	 color: #fff;
       }

.fs200 {
        font-size: 18px;
	font-weight: normal;
       }

.fs150 {
        font-size: 16px;
       }

}



/*------------------ tablet Mini(640px以下) ----------------*/
@media (min-width: 481px) and (max-width: 639px){




}


/*------------------ Tablet Mini //----------------*/

/*------------------ Smart (480px以下)----------------*/
@media (max-width: 480px){



}

/*------------------ Smart //----------------*/




/* =========================================================
 * @class Gig5: Module: OfferingMenu
** ====================================================== */

.hoverbox-inside {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.hoverbox-content .figure {
	position: relative;
	overflow: hidden;
}
.hoverbox-content .figure img {
	display: block;
	width: 100%;
}
.hoverbox-content .figure .link-case {
	text-decoration: none;
	background: rgba(0, 0, 0, .7);
	position: absolute;
	z-index: 2;
	bottom: -83%;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: .9881vw;
	transition: bottom .3s, background .3s;
}
.hoverbox-content .figure h3 {
	font-weight: normal;
	text-align: center;
	color: #fff;
	margin-bottom: .8088em;
}
.hoverbox-content .figure a:focus h3,
.hoverbox-content .figure:hover .link-case h3 {
	padding: 0 1vw;
}
.stage #bodyarea.home .maincontents .hoverbox-content .figure a:focus h3,
.stage #bodyarea.home .maincontents .hoverbox-content .figure:hover a h3 {
	text-align: left;
}
.hoverbox-content .figure .link-case p {
	font-size: 1.57791vw;
	color: #fff;
}
.hoverbox-content .figure .link-case:focus p,
.hoverbox-content .figure:hover .link-case p {
	margin-top: 1.57791vw;
	padding: 0 1vw;
}
.hoverbox-content .figure a:focus,
.hoverbox-content .figure:hover .link-case {
	text-decoration: none;
	background: rgba(175,39,46,.7);
	bottom: 0;
}
.hoverbox .hoverbox-inside .hoverbox-content:first-child {
	font-size: 1.6rem;
	height: auto;
	-ms-flex-preferred-size: auto;
	-webkit-flex-basis: auto;
	-ms-flex-basis: auto;
	flex-basis: auto;
}

@media only screen and (min-width: 1013px) {
	.hoverbox-content .figure .link-case {
		padding: 10px;
	}
	.hoverbox-content .figure h3 {
		margin-bottom: 1.6rem;
	}
	.hoverbox-content .figure .link-case p {
		font-size: 1.6rem;
	}
	.hoverbox-content .figure a:focus h3,
	.hoverbox-content .figure:hover .link-case h3 {
		padding: 0 14px;
	}
	.hoverbox-content .figure a:focus p,
	.hoverbox-content .figure:hover .link-case p {
		margin-top: 16px;
		padding: 0 14px;
	}
}
@media only screen and (max-width: 768px) {
	.hoverbox-content .figure img {
		width: 120px;
		box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
	}
	
	.hoverbox .hoverbox-inside .hoverbox-content:first-child > p {
		padding-bottom: 8px;
	}
}


/*
 * @class Gig5: Module: Offering menu : .hover-3col
** ------------------------------------------------------ */

.hover-3col {
	padding: 0;
}
.hover-3col .hoverbox-content {
	margin: 0 0 24px 0;
}
.hover-3col .hoverbox-content .figure h3 {
	font-size: 2.3692vw;
}
.hover-3col .hoverbox-content {
	width: 33.3333%;
}
.hover-3col .hoverbox-content {
	max-width: 100%;
}

@media only screen and (min-width: 1013px) {
	.hover-3col .hoverbox-content .figure h3 {
		margin-top: 0.8rem;
	}
}

@media only screen and (min-width: 769px) {
	.hoverbox.hover-3col .hoverbox-inside .hoverbox-content {
		padding: 4.8rem 2.4rem 0 2.4rem;
	}
	.hoverbox.hover-3col .hoverbox-inside .hoverbox-content:first-child {
		background-color: #3f3f3f;
	}
	.hoverbox.hover-3col .hoverbox-inside .hoverbox-content .figure {
		margin: -4.8rem -2.4rem 0 -2.4rem;
	}
	.hover-3col .hoverbox-content {
		max-width: 33.3333%;
	}
	.hover-3col .hoverbox-content .figure h3 {
		font-size: 2.4rem;
	}
	.hover-3col .hoverbox-content .figure a:focus h3,
	.hover-3col .hoverbox-content .figure:hover .link-case h3 {
		margin: 40px 0 16px;
	}
	.hover-3col .hoverbox-content {
		margin: 0;
	}
	
	.pc_768off {
         display:  block;
        }

        .smart_768off {
            display: none;
        }
	
}
@media only screen and (max-width: 768px) {
	.hover-3col .hoverbox-content {
		width: 100%;
	}
	
	.hover-3col .hoverbox-content .figure h3 {
		text-align: left;
	}
	
	.hover-3col .hoverbox-content .figure a:focus h3,
	.hover-3col .hoverbox-content .figure:hover .link-case h3 {
		margin: 40px 0 16px;
	}
	
	.pc_768off {
         display:  none;
        }

        .smart_768off {
            display: block;
        }
	
}


/*
 * @class Gig5: Module: Offering menu : .hover-4col
 ** ------------------------------------------------------ */

.hover-4col .hoverbox-content .figure h3 {
	font-size: 1.9762799vw;
}
.hover-4col .hoverbox-content {
	-webkit-box-flex: 1 25%;
	-webkit-flex: 1 25%;
	-ms-flex: 1 25%;
	flex: 1 25%;
	display: block;
	width: 100%;
}
.hover-4col .hoverbox-content {
	margin: 0;
}
.hoverbox.hover-4col .hoverbox-inside .hoverbox-content:first-child > p {
	padding: 0	0 8px 0;
}
.hover-4col .hoverbox-content:not(:first-child) {
	max-width: 25%;
}

@media only screen and (min-width: 1013px) {
	.hover-4col .hoverbox-content .figure h3 {
		font-size: 2rem;
	}
	.hover-4col .hoverbox-content .figure a:focus h3,
	.hover-4col .hoverbox-content .figure:hover .link-case h3 {
		margin: 48px 0 16px;
	}
}

@media screen and (max-width:768px) {
	.hover-3col {
		padding: 0 0.4rem;
	}
	.hover-4col .hoverbox-content {
		margin: 0 0 24px 0;
	}
	.hoverbox .hoverbox-inside {
		display: block;
	}
	.hoverbox .hoverbox-inside .hoverbox-content:not(:first-child) {
		overflow: hidden;
		max-width: 100%;
		margin: 0 0 24px;
	}
	.hoverbox-inside .hoverbox-content .figure {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.hoverbox-content img {
		width: 120px;
		min-width: 120px;/* IE11 */
		height: 120px;
	}
	.hoverbox-inside .hoverbox-content .figure .link-case {
		background: transparent;
		position: static;
		min-height: 120px;
		padding: 0 0 0 8px;
		width: 80%;
		
	}
	.hoverbox-inside .hoverbox-content .figure .link-case * {
	}
	.hoverbox-inside .hoverbox-content .figure:hover .link-case,
	.hoverbox-inside .hoverbox-content .figure .link-case:focus {
		background: transparent;
	}
	.hoverbox-inside .hoverbox-content .figure .link-case h3 {
		font-size: 1.8rem;
		margin: 0 0 0 1em;
	}
	.stage #bodyarea.home .maincontents .hoverbox-inside .hoverbox-content .figure .link-case h3 {
		text-align: left;
	}
	.hoverbox-inside .hoverbox-content .figure .link-case p {
		font-size: 1.4rem;
		margin: 0 0 0 1.25em;
	}
	.hoverbox .hoverbox-inside .hoverbox-content .figure:hover .link-case h3,
	.hoverbox .hoverbox-inside .hoverbox-content .figure .link-case:focus h3,
	.hoverbox .hoverbox-inside .hoverbox-content .figure:hover .link-case p,
	.hoverbox .hoverbox-inside .hoverbox-content .figure .link-case:focus p {
		margin: 0;
		padding: 0;
	}
}