@charset "utf-8";


/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/

html,
input,
textarea,
select,
button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

html {
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
  word-break: break-word;
}

body {
  background: #fff;
  margin: 0;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#wrapper,
.outer-block {
  min-width: 862px;
}

.inner-block {
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 862px;
}

/*------------------------------------------------------------------------------
  visual
------------------------------------------------------------------------------*/

.visual {
  background: url(../images/visual.jpg) no-repeat right top;
  margin: auto;
  position: relative;
  width: 862px;
  height: 350px;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
  color: #1b1e65;
  -webkit-clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
  clip-path: polygon(0 0, 262px 0, 262px 460px, 0 460px);
}

.visual .mask.burn {
  color: #1d71d6;
  -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  mix-blend-mode: color-burn;
}

.visual .txt {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 25px;
  left: 40px;
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 80px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 15px;
}

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

.visual .letter {
  display: inline-block;
  padding-top: 5px;
}

.visual .large {
  font-size: 100px;
}

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

.visual.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 .mask.normal,
.edge .visual .mask.normal {
  color: #004480;
  opacity: 0.7;
}

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