.inner_wrap {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: #c4d7e0;
  position: relative; }

.header {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 10px 5px 10px;
  background: #3ec294;
  text-align: left;
  position: relative;
  z-index: 5; }
  .header .headline_logo {
    display: block;
    width: 24%;
    min-width: 94px !important;
    max-width: 106px !important;
    height: auto;
    margin: 0;
    left: 5px;
    top: 2px;
    position: absolute; }
  .header .headerlogo_pc {
    display: none; }

/*INTRO*/
.introWrap {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 20px 0;
  background: #3ec294 url("../img/bg_int.webp") center top no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
  line-height: 0; }

.int_copy1 {
  display: block;
  width: 86%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative; }

.int_copy2 {
  display: block;
  width: 94%;
  max-width: 720px;
  margin: 2% auto 2% auto;
  padding-bottom: 0.2%;
  position: relative; }

.intro_txtWrap {
  display: block;
  width: 86%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative; }
  .intro_txtWrap .tit_int {
    width: 56%;
    max-width: 399px;
    height: auto;
    margin: 2% auto;
    padding: 0;
    position: relative; }
  .intro_txtWrap p.int_txt {
    font-size: 1.46rem;
    line-height: 1.6;
    text-shadow: 0 0 1px #000,0 0 2px #165f5d,0 0 5px #165f5d,0 0 7px #165f5d,0 0 10px #165f5d;
    font-weight: 500; }

/* flow */
.pc_flow {
  display: none; }

.sp_flow1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #3ec294;
  position: relative;
  z-index: 4; }
  .sp_flow1 .flowImg {
    display: block;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background: url("../img/flow_sp1.webp") 0 0 repeat-x;
    background-size: auto 100%;
    animation: storybgscroll2 130s linear infinite; }
@keyframes storybgscroll2 {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 2020px 0; } }
.sp_flow2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  background: #3ec294;
  position: relative;
  z-index: 4; }
  .sp_flow2 .flowImg {
    display: block;
    width: 100%;
    height: 120px;
    margin: 0;
    padding: 0;
    background: url("../img/flow_sp2.webp") 0 0 repeat-x;
    background-size: auto 100%;
    animation: storybgscroll3 120s linear infinite; }
@keyframes storybgscroll3 {
  0% {
    background-position: 1616px 0; }
  100% {
    background-position: 0 0; } }
.storyWrap {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 20px 0;
  background: #92bed4 url("../img/bg_st.webp") center bottom no-repeat;
  background-size: cover;
  color: #0f4574;
  position: relative;
  line-height: 0; }

.story_txtWrap {
  display: block;
  width: 86%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative; }
  .story_txtWrap .tit_story {
    width: 26%;
    max-width: 358px;
    height: auto;
    margin: 2% auto;
    padding: 0;
    position: relative; }
  .story_txtWrap p.st_txt {
    font-size: 1.46rem;
    line-height: 1.5;
    text-shadow: 0 0 1px #fff,0 0 2px #fff,0 0 5px #fff,0 0 7px #fff,0 0 10px #fff;
    font-weight: 500; }

.st_blc {
  display: block;
  width: 100%;
  height: 42vw;
  margin: 0;
  padding: 0;
  position: relative; }

.footer_gr {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 10px 0;
  background: url("../img/footbg_1.webp") center top no-repeat;
  background-size: cover;
  position: relative; }
  .footer_gr p {
    text-shadow: 0 0 1px #000,0 0 2px #165f5d,0 0 5px #165f5d,0 0 7px #165f5d,0 0 10px #165f5d; }

/*-----  tablet  -----*/
@media screen and (min-width: 760px) and (max-width: 1023px) {
  .intro_txtWrap p.int_txt {
    font-size: 1.56rem;
    line-height: 1.6;
    text-shadow: 0 0 1px #000,0 0 2px #165f5d,0 0 5px #165f5d,0 0 7px #165f5d,0 0 10px #165f5d;
    font-weight: 500; }

  .story_txtWrap p.st_txt {
    font-size: 1.56rem;
    line-height: 1.6;
    text-shadow: 0 0 1px #fff,0 0 2px #fff,0 0 5px #fff,0 0 7px #fff,0 0 10px #fff;
    font-weight: 500; } }
/*-----  PC  -----*/
@media screen and (min-width: 1024px) {
  .header {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    background: transparent;
    top: -1px;
    left: 0;
    position: absolute;
    z-index: 5; }
    .header .headline_logo {
      display: none; }
    .header .headerlogo_pc {
      display: block;
      width: 18vw;
      max-width: 210px;
      height: auto;
      margin: 0;
      padding: 0;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 5; }
      .header .headerlogo_pc img {
        width: 100%; }

  .introWrap {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 80px 0 0 0;
    background: url("../img/bg_int.webp") center top no-repeat;
    background-size: cover;
    color: #fff;
    position: relative; }

  .int_copy1 {
    display: block;
    width: 86%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    position: relative; }

  .int_copy2 {
    display: block;
    width: 94%;
    max-width: 900px;
    margin: 2% auto 0 auto;
    padding-bottom: 2%;
    position: relative; }

  .intro_txtWrap {
    display: block;
    width: 86%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    position: relative; }
    .intro_txtWrap .tit_int {
      width: 56%;
      max-width: 399px;
      height: auto;
      margin: 2% auto;
      padding: 0;
      position: relative; }
    .intro_txtWrap p.int_txt {
      font-size: 1.68rem;
      line-height: 1.8;
      text-align: center;
      text-shadow: 0 0 1px #000,0 0 2px #165f5d,0 0 5px #165f5d,0 0 7px #165f5d,0 0 10px #165f5d;
      font-weight: 500; }

  /* flow */
  .sp_flow1 {
    display: none; }

  .sp_flow2 {
    display: none; }

  .pc_flow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    background: #3ec294;
    position: relative;
    z-index: 4; }
    .pc_flow .flowImg {
      display: block;
      width: 100%;
      max-width: 2400px;
      height: 200px;
      margin: 0;
      padding: 0;
      background: url("../img/flow_pc.webp") 0 0 repeat-x;
      background-size: auto 100%;
      animation: storybgscroll 160s linear infinite; }
  @keyframes storybgscroll {
    0% {
      background-position: 3636px 0; }
    100% {
      background-position: 0 0; } }
  .story_txtWrap {
    display: block;
    width: 86%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    position: relative; }
    .story_txtWrap .tit_story {
      width: 26%;
      max-width: 358px;
      height: auto;
      margin: 2% auto;
      padding: 0;
      position: relative; }
    .story_txtWrap p.st_txt {
      font-size: 1.7rem;
      line-height: 2.2;
      text-shadow: 0 0 1px #fff,0 0 2px #fff,0 0 5px #fff,0 0 7px #fff,0 0 10px #fff;
      font-weight: 700;
      text-align: center; }

  .st_blc {
    display: block;
    width: 100%;
    height: 37vw;
    margin: 0;
    padding: 0;
    position: relative; } }