#wrapper,
.outer-block {
min-width: 1%;
}

.inner-block {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}

/*============================================
   VISUAL 01
============================================*/

.visual01 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual01 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual01 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 52.2% 0, 52.2% 100px, 0 100px);
clip-path: polygon(0 0, 52.2% 0, 52.2% 100px, 0 100px);
}
.visual01 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(52.2% 0, 100% 0, 100% 100px, 52.2% 100px);
clip-path: polygon(52.2% 0, 100% 0, 100% 100px, 52.2% 100px);
}
.visual01 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual01 .line {
display: block;
font-family: "Josefin Sans";
font-size: 60px;
font-weight: bold;
}
.visual01 .line + .line {
  margin-top: 0px;
}
.visual01 .line,
.visual01 .letter {
  opacity: 0;
}
.visual01 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual01.is-visible .line {
  opacity: 1;
}
.visual01.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual01 .mask.normal,
.edge .visual01 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual01 .mask.burn,
.edge .visual01 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 02
============================================*/

.visual02 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual02 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual02 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 46% 0, 46% 100px, 0 100px);
clip-path: polygon(0 0, 46% 0, 46% 100px, 0 100px);
}
.visual02 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(46% 0, 100% 0, 100% 100px, 46% 100px);
clip-path: polygon(46% 0, 100% 0, 100% 100px, 46% 100px);
}
.visual02 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual02 .line {
display: block;
font-family: "Josefin Sans";
font-size: 60px;
font-weight: bold;
}
.visual02 .line + .line {
  margin-top: 0px;
}
.visual02 .line,
.visual02 .letter {
  opacity: 0;
}
.visual02 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual02.is-visible .line {
  opacity: 1;
}
.visual02.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual02 .mask.normal,
.edge .visual02 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual02 .mask.burn,
.edge .visual02 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 03
============================================*/

.visual03 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual03 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual03 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 52% 0, 52% 100px, 0 100px);
clip-path: polygon(0 0, 52% 0, 52% 100px, 0 100px);
}
.visual03 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(52% 0, 100% 0, 100% 100px, 52% 100px);
clip-path: polygon(52% 0, 100% 0, 100% 100px, 52% 100px);
}
.visual03 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual03 .line {
display: block;
font-family: "Josefin Sans";
font-size: 60px;
font-weight: bold;
}

.visual03 .line + .line {
  margin-top: 0px;
}

.visual03 .line,
.visual03 .letter {
  opacity: 0;
}

.visual03 .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual03.is-visible .line {
  opacity: 1;
}

.visual03.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual03 .mask.normal,
.edge .visual03 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual03 .mask.burn,
.edge .visual03 .mask.burn {
  display: none;
}

/*============================================
   VISUAL FOOTER
============================================*/

.visual_footer {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual_footer .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual_footer .mask.normal {
}
/*============================================
.visual_footer .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
}
============================================*/
.visual_footer .txt {
position: absolute;
left:0%;
right:0%;
}
.visual_footer .line {
display: block;
}

.visual_footer .line + .line {
  margin-top: 0px;
}

.visual_footer .line,
.visual_footer .letter {
  opacity: 0;
}

.visual_footer .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual_footer.is-visible .line {
  opacity: 1;
}

.visual_footer.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual_footer .mask.normal,
.edge .visual_footer .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual_footer .mask.burn,
.edge .visual_footer .mask.burn {
  display: none;
}


/*------------------------------------------------------------------------------
  1500px
------------------------------------------------------------------------------*/

@media(max-width: 1500px){

#wrapper,
.outer-block {
min-width: 1%;
}

.inner-block {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}

/*============================================
   VISUAL 01
============================================*/

.visual01 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual01 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual01 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
}
.visual01 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
}
.visual01 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual01 .line {
display: block;
font-family: "Josefin Sans";
font-size: 55px;
font-weight: bold;
}
.visual01 .line + .line {
  margin-top: 0px;
}
.visual01 .line,
.visual01 .letter {
  opacity: 0;
}
.visual01 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual01.is-visible .line {
  opacity: 1;
}
.visual01.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual01 .mask.normal,
.edge .visual01 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual01 .mask.burn,
.edge .visual01 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 02
============================================*/

.visual02 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual02 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual02 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
}
.visual02 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
}
.visual02 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual02 .line {
display: block;
font-family: "Josefin Sans";
font-size: 55px;
font-weight: bold;
}
.visual02 .line + .line {
  margin-top: 0px;
}
.visual02 .line,
.visual02 .letter {
  opacity: 0;
}
.visual02 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual02.is-visible .line {
  opacity: 1;
}
.visual02.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual02 .mask.normal,
.edge .visual02 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual02 .mask.burn,
.edge .visual02 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 03
============================================*/

.visual03 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual03 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual03 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
}
.visual03 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
}
.visual03 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual03 .line {
display: block;
font-family: "Josefin Sans";
font-size: 55px;
font-weight: bold;
}

.visual03 .line + .line {
  margin-top: 0px;
}

.visual03 .line,
.visual03 .letter {
  opacity: 0;
}

.visual03 .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual03.is-visible .line {
  opacity: 1;
}

.visual03.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual03 .mask.normal,
.edge .visual03 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual03 .mask.burn,
.edge .visual03 .mask.burn {
  display: none;
}

/*============================================
   VISUAL FOOTER
============================================*/

.visual_footer {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual_footer .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual_footer .mask.normal {
}
/*============================================
.visual_footer .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
}
============================================*/
.visual_footer .txt {
position: absolute;
left:0%;
right:0%;
}
.visual_footer .line {
display: block;
}

.visual_footer .line + .line {
  margin-top: 0px;
}

.visual_footer .line,
.visual_footer .letter {
  opacity: 0;
}

.visual_footer .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual_footer.is-visible .line {
  opacity: 1;
}

.visual_footer.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual_footer .mask.normal,
.edge .visual_footer .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual_footer .mask.burn,
.edge .visual_footer .mask.burn {
  display: none;
}


}

/*------------------------------------------------------------------------------
  1024px
------------------------------------------------------------------------------*/

@media(max-width: 1024px){

#wrapper,
.outer-block {
min-width: 1%;
}

.inner-block {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}

/*============================================
   VISUAL 01
============================================*/

.visual01 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual01 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual01 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
}
.visual01 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
}
.visual01 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual01 .line {
display: block;
font-family: "Josefin Sans";
font-size: 50px;
font-weight: bold;
}
.visual01 .line + .line {
  margin-top: 0px;
}
.visual01 .line,
.visual01 .letter {
  opacity: 0;
}
.visual01 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual01.is-visible .line {
  opacity: 1;
}
.visual01.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual01 .mask.normal,
.edge .visual01 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual01 .mask.burn,
.edge .visual01 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 02
============================================*/

.visual02 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual02 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual02 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
}
.visual02 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
}
.visual02 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual02 .line {
display: block;
font-family: "Josefin Sans";
font-size: 50px;
font-weight: bold;
}
.visual02 .line + .line {
  margin-top: 0px;
}
.visual02 .line,
.visual02 .letter {
  opacity: 0;
}
.visual02 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual02.is-visible .line {
  opacity: 1;
}
.visual02.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual02 .mask.normal,
.edge .visual02 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual02 .mask.burn,
.edge .visual02 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 03
============================================*/

.visual03 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual03 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual03 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
}
.visual03 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
}
.visual03 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual03 .line {
display: block;
font-family: "Josefin Sans";
font-size: 50px;
font-weight: bold;
}

.visual03 .line + .line {
  margin-top: 0px;
}

.visual03 .line,
.visual03 .letter {
  opacity: 0;
}

.visual03 .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual03.is-visible .line {
  opacity: 1;
}

.visual03.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual03 .mask.normal,
.edge .visual03 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual03 .mask.burn,
.edge .visual03 .mask.burn {
  display: none;
}

/*============================================
   VISUAL FOOTER
============================================*/

.visual_footer {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual_footer .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual_footer .mask.normal {
}
/*============================================
.visual_footer .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
}
============================================*/
.visual_footer .txt {
position: absolute;
left:0%;
right:0%;
}
.visual_footer .line {
display: block;
}

.visual_footer .line + .line {
  margin-top: 0px;
}

.visual_footer .line,
.visual_footer .letter {
  opacity: 0;
}

.visual_footer .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual_footer.is-visible .line {
  opacity: 1;
}

.visual_footer.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual_footer .mask.normal,
.edge .visual_footer .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual_footer .mask.burn,
.edge .visual_footer .mask.burn {
  display: none;
}


}

/*------------------------------------------------------------------------------
  768px
------------------------------------------------------------------------------*/

@media(max-width: 768px){

#wrapper,
.outer-block {
min-width: 1%;
}

.inner-block {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}

/*============================================
   VISUAL 01
============================================*/

.visual01 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual01 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual01 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
clip-path: polygon(0 0, 53.2% 0, 53.2% 100px, 0 100px);
}
.visual01 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
clip-path: polygon(53.2% 0, 100% 0, 100% 100px, 53.2% 100px);
}
.visual01 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual01 .line {
display: block;
font-family: "Josefin Sans";
font-size: 38px;
font-weight: bold;
}
.visual01 .line + .line {
  margin-top: 0px;
}
.visual01 .line,
.visual01 .letter {
  opacity: 0;
}
.visual01 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual01.is-visible .line {
  opacity: 1;
}
.visual01.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual01 .mask.normal,
.edge .visual01 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual01 .mask.burn,
.edge .visual01 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 02
============================================*/

.visual02 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual02 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual02 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
clip-path: polygon(0 0, 44.45% 0, 44.45% 100px, 0 100px);
}
.visual02 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
clip-path: polygon(44.45% 0, 100% 0, 100% 100px, 44.45% 100px);
}
.visual02 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual02 .line {
display: block;
font-family: "Josefin Sans";
font-size: 38px;
font-weight: bold;
}
.visual02 .line + .line {
  margin-top: 0px;
}
.visual02 .line,
.visual02 .letter {
  opacity: 0;
}
.visual02 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual02.is-visible .line {
  opacity: 1;
}
.visual02.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual02 .mask.normal,
.edge .visual02 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual02 .mask.burn,
.edge .visual02 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 03
============================================*/

.visual03 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual03 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual03 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
clip-path: polygon(0 0, 52.5% 0, 52.5% 100px, 0 100px);
}
.visual03 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
clip-path: polygon(52.5% 0, 100% 0, 100% 100px, 52.5% 100px);
}
.visual03 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual03 .line {
display: block;
font-family: "Josefin Sans";
font-size: 38px;
font-weight: bold;
}

.visual03 .line + .line {
  margin-top: 0px;
}

.visual03 .line,
.visual03 .letter {
  opacity: 0;
}

.visual03 .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual03.is-visible .line {
  opacity: 1;
}

.visual03.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual03 .mask.normal,
.edge .visual03 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual03 .mask.burn,
.edge .visual03 .mask.burn {
  display: none;
}

/*============================================
   VISUAL FOOTER
============================================*/

.visual_footer {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual_footer .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual_footer .mask.normal {
}
/*============================================
.visual_footer .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
}
============================================*/
.visual_footer .txt {
position: absolute;
left:0%;
right:0%;
}
.visual_footer .line {
display: block;
}

.visual_footer .line + .line {
  margin-top: 0px;
}

.visual_footer .line,
.visual_footer .letter {
  opacity: 0;
}

.visual_footer .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual_footer.is-visible .line {
  opacity: 1;
}

.visual_footer.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual_footer .mask.normal,
.edge .visual_footer .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual_footer .mask.burn,
.edge .visual_footer .mask.burn {
  display: none;
}


}

/*------------------------------------------------------------------------------
  624px
------------------------------------------------------------------------------*/

@media(max-width: 624px){

#wrapper,
.outer-block {
min-width: 1%;
}

.inner-block {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}

/*============================================
   VISUAL 01
============================================*/

.visual01 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual01 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual01 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 54.6% 0, 54.6% 100px, 0 100px);
clip-path: polygon(0 0, 54.6% 0, 54.6% 100px, 0 100px);
}
.visual01 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(54.6% 0, 100% 0, 100% 100px, 54.6% 100px);
clip-path: polygon(54.6% 0, 100% 0, 100% 100px, 54.6% 100px);
}
.visual01 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual01 .line {
display: block;
font-family: "Josefin Sans";
font-size: 30px;
font-weight: bold;
}
.visual01 .line + .line {
  margin-top: 0px;
}
.visual01 .line,
.visual01 .letter {
  opacity: 0;
}
.visual01 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual01.is-visible .line {
  opacity: 1;
}
.visual01.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual01 .mask.normal,
.edge .visual01 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual01 .mask.burn,
.edge .visual01 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 02
============================================*/

.visual02 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual02 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual02 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 40.8% 0, 40.8% 100px, 0 100px);
clip-path: polygon(0 0, 40.8% 0, 40.8% 100px, 0 100px);
}
.visual02 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(40.8% 0, 100% 0, 100% 100px, 40.8% 100px);
clip-path: polygon(40.8% 0, 100% 0, 100% 100px, 40.8% 100px);
}
.visual02 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual02 .line {
display: block;
font-family: "Josefin Sans";
font-size: 29px;
font-weight: bold;
}
.visual02 .line + .line {
  margin-top: 0px;
}
.visual02 .line,
.visual02 .letter {
  opacity: 0;
}
.visual02 .letter {
  display: inline-block;
  padding-top: 0px;
}
.visual02.is-visible .line {
  opacity: 1;
}
.visual02.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual02 .mask.normal,
.edge .visual02 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual02 .mask.burn,
.edge .visual02 .mask.burn {
  display: none;
}

/*============================================
   VISUAL 03
============================================*/

.visual03 {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual03 .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual03 .mask.normal {
color: #253057;
-webkit-clip-path: polygon(0 0, 53.7% 0, 53.7% 100px, 0 100px);
clip-path: polygon(0 0, 53.7% 0, 53.7% 100px, 0 100px);
}
.visual03 .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(53.7% 0, 100% 0, 100% 100px, 53.7% 100px);
clip-path: polygon(53.7% 0, 100% 0, 100% 100px, 53.7% 100px);
}
.visual03 .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 1px;
left:0%;
right:0%;
}
.visual03 .line {
display: block;
font-family: "Josefin Sans";
font-size: 30px;
font-weight: bold;
}

.visual03 .line + .line {
  margin-top: 0px;
}

.visual03 .line,
.visual03 .letter {
  opacity: 0;
}

.visual03 .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual03.is-visible .line {
  opacity: 1;
}

.visual03.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual03 .mask.normal,
.edge .visual03 .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual03 .mask.burn,
.edge .visual03 .mask.burn {
  display: none;
}

/*============================================
   VISUAL FOOTER
============================================*/

.visual_footer {
margin: auto;
position: relative;
width: 100%;
height: 100px;
}
.visual_footer .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visual_footer .mask.normal {
}
/*============================================
.visual_footer .mask.burn {
color: #f6ad16;
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
clip-path: polygon(50% 0, 100% 0, 100% 100px, 50% 100px);
}
============================================*/
.visual_footer .txt {
position: absolute;
left:0%;
right:0%;
}
.visual_footer .line {
display: block;
}

.visual_footer .line + .line {
  margin-top: 0px;
}

.visual_footer .line,
.visual_footer .letter {
  opacity: 0;
}

.visual_footer .letter {
  display: inline-block;
  padding-top: 0px;
}

.visual_footer.is-visible .line {
  opacity: 1;
}

.visual_footer.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* IE・Edge用調整 */

.ie .visual_footer .mask.normal,
.edge .visual_footer .mask.normal {
  color: #004480;
  opacity: 0.7;
}

.ie .visual_footer .mask.burn,
.edge .visual_footer .mask.burn {
  display: none;
}

}