/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/**************************************
@charset "utf-8";


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

html,
input,
textarea,
select,
button {
  font-family: "Noto Sans JP"; 
}

html {
  background: #fff;
  color: #333;
  font-size: 10px;
  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: 10px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

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

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

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

.visual {
  background: url(https://8118932.fs1.hubspotusercontent-na1.net/hubfs/8118932/2023_SFECEJ/%E6%A1%88%E5%86%85LP_%E3%83%98%E3%83%83%E3%83%80%E3%83%BC_%E6%A1%88%E4%BD%9C%E6%88%90%E4%B8%ADtest12-min.png) no-repeat right top;
  margin: auto;
  position: relative;
  width: 1374px;
  height: 382px;
}

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

.visual .mask.normal {
  color: #000000;
  -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: #000000;
  -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
  clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px);
}

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

.visual .line {
  display: block;
  font-family: "Noto Sans JP";
  font-size: 50px;
  font-weight: bold;
}

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

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

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

.visual .large {
  font-size: 60px;
  color:#D61518
}

.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;
}