@charset "utf-8";
/*
 set break point
 */
/*
 Width / Height Settings
 */
/*
 SP Liquid Value
 */
/*
 PC Liquid Value
 */
/*
 Line Height
 */
@media screen and (min-width: 751px) {
  /*------------------------------------------------------------------------------------------
   *
   *
   story_pc.css
   *
   *
   ------------------------------------------------------------------------------------------ */
  /*------------------------------------------------------------------------------------------
   *
   *
   min-width : 751px
   *
   *
   ------------------------------------------------------------------------------------------ */
  /* --------------------------------------------------
   *
   #kv
   *
   -------------------------------------------------- */
  /* --------------------------------------------------
   *
   #story_content
   *
   -------------------------------------------------- */
  /* --------------------------------------------------
   *
   #okanetsu
   *
   -------------------------------------------------- */
  .isIE #page_story {
    overflow: hidden;
  }
  #kv {
    position: relative;
  }
  #kv .title_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    top: 50%;
    left: 0vw;
    transform: translateY(-44.16667%);
  }
  #kv .title_wrap .ttl {
    margin-top: 8.33333vw;
    margin-bottom: 0.83333vw;
    display: table;
    padding: 0.91667vw 0 0.83333vw 0;
    padding-left: 2.5vw;
    padding-right: 1.16667vw;
  }
  #kv .title_wrap .ttl img {
    width: 6.25vw !important;
    max-width: 75px !important;
    height: 1.16667vw !important;
    max-height: 14px !important;
  }
  #kv .title_wrap h2 {
    display: table;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0.12em;
  }
  #kv .title_wrap h2 span.w {
    display: table;
    padding: 1vw 0 0.5vw 0;
    padding-left: 2.5vw;
    padding-right: 1.16667vw;
    background-color: #fff;
  }
  #kv .title_wrap h2 span.w:last-child {
    padding-bottom: 1vw;
  }
  #kv .title_wrap .sub {
    display: table;
    margin-bottom: 7.5vw;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  #kv .title_wrap .sub span.w {
    display: table;
    padding: 1.08333vw 0 1.25vw 0;
    padding-left: 2.5vw;
    padding-right: 1.16667vw;
    background-color: #fff;
  }
  #kv .tagline {
    width: 22.5vw !important;
    max-width: 270px !important;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1em;
    position: absolute;
    right: 0;
    top: 57%;
    text-align: right;
  }
  #kv .tagline span.w {
    display: inline-block;
    padding: 0.5vw 0 0.33333vw 0;
    padding-left: 0.83333vw;
    padding-right: 1.66667vw;
    background-color: #fff;
    white-space: nowrap;
  }
  #kv .tagline span.w:last-child {
    padding-bottom: 0.5vw;
  }
  #story_content {
    background-color: #f5f5f1;
  }
  #story_content .story_inner {
    width: 90vw !important;
    max-width: 1080px !important;
    padding: 6.66667vw 0 7.91667vw 0;
    margin: 0 auto;
    display: flex;
  }
  #story_content .col_l {
    width: 36.66667vw !important;
    max-width: 440px !important;
    display: flex;
    position: relative;
    opacity: 0;
  }
  .ready #story_content .col_l {
    opacity: 1;
  }
  #story_content .col_l p {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 2.08333vw;
    left: -1.66667vw;
    transition: opacity;
    transition-duration: 0.45s;
  }
  #story_content .col_l p img {
    position: relative;
  }
  #story_content .col_l .i01 img {
    width: 23.83333vw !important;
    max-width: 286px !important;
  }
  #story_content .col_l .i02 {
    opacity: 0;
  }
  #story_content .col_l .i02 img {
    width: 23.25vw !important;
    max-width: 279px !important;
  }
  #story_content .col_l.on p {
    width: 36.66667vw !important;
    max-width: 440px !important;
    height: 100%;
    top: 13.75vw;
    left: 50%;
    transform: translateX(-46.75vw);
  }
  .ready #story_content .col_l.on p {
    position: fixed;
  }
  #story_content .col_l.b p {
    top: inherit;
    bottom: 0;
  }
  #story_content .col_l.c .i01 {
    opacity: 0;
  }
  #story_content .col_l.c .i02 {
    opacity: 1;
  }
  #story_content .col_r {
    width: 53.33333vw !important;
    max-width: 640px !important;
    background-color: #fff;
  }
  #story_content .col_r h3 {
    margin-top: -0.41667vw;
    margin-bottom: 3.33333vw;
    font-weight: bold;
    letter-spacing: 0.12em;
    line-height: 1.5em;
  }
  #story_content .col_r .inner {
    padding: 6.66667vw;
  }
  #story_content .col_r .inner p {
    line-height: 2em;
    margin-bottom: 2em;
  }
  #story_content .col_r .inner p:last-child {
    margin-bottom: 0;
  }
  #story_content .col_r .inner .img {
    margin: 4.16667vw 0 3.33333vw 0;
  }
  #story_content .col_r .inner img {
    width: 100%;
  }
  #okanetsu {
    position: relative;
  }
  #okanetsu .inner {
    width: 90vw !important;
    max-width: 1080px !important;
    padding: 4.16667vw 0;
    display: flex;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
  }
  #okanetsu .inner .col_l {
    width: 35.83333vw !important;
    max-width: 430px !important;
  }
  #okanetsu .inner .col_r {
    width: 54.16667vw !important;
    max-width: 650px !important;
    padding-left: 3.33333vw;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }
  #okanetsu .inner .col_r h4 {
    margin-bottom: 1.25vw;
    position: relative;
    z-index: 2;
  }
  #okanetsu .inner .col_r h4 img {
    width: 39.41667vw !important;
    max-width: 473px !important;
  }
  #okanetsu .inner .col_r .desc {
    margin-bottom: 2.08333vw;
    font-weight: bold;
    line-height: 1.75em;
  }
  #okanetsu .inner .col_r ul {
    margin-bottom: -1.25vw;
  }
  #okanetsu .inner .col_r li {
    margin-bottom: 0.5em;
  }
  #okanetsu .inner .col_r li p {
    line-height: 1.5em;
  }
  #okanetsu .inner .col_r li span {
    font-weight: bold;
  }
  #okanetsu .inner .img {
    position: absolute;
    top: 6.66667vw;
    right: 0;
    z-index: 1;
  }
  #okanetsu .inner .img img {
    width: 14.75vw !important;
    max-width: 177px !important;
  }
}
/* -------------------------------------------------- */
/*------------------------------------------------------------------------------------------
 *
 *
 story_pc.css
 *
 *
 ------------------------------------------------------------------------------------------ */
/* --------------------------------------------------
 *
 #kv
 *
 -------------------------------------------------- */
@media screen and (min-width: 1200px) {
  /* --------------------------------------------------
   *
   #story_content
   *
   -------------------------------------------------- */
  /* --------------------------------------------------
   *
   #okanetsu
   *
   -------------------------------------------------- */
  #kv {
    position: relative;
  }
  #kv .title_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%70px);
  }
  #kv .title_wrap .ttl {
    margin-top: 100px;
    margin-bottom: 10px;
    display: table;
    padding: 11px 0 10px 0;
    padding-left: 30px;
    padding-right: 14px;
  }
  #kv .title_wrap .ttl img {
    width: 6.25vw !important;
    max-width: 75px !important;
    height: 1.16667vw !important;
    max-height: 14px !important;
  }
  #kv .title_wrap h2 {
    display: table;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0.12em;
  }
  #kv .title_wrap h2 span.w {
    display: table;
    padding: 12px 0 6px 0;
    padding-left: 30px;
    padding-right: 14px;
    background-color: #fff;
  }
  #kv .title_wrap h2 span.w:last-child {
    padding-bottom: 12px;
  }
  #kv .title_wrap .sub {
    display: table;
    margin-bottom: 90px;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  #kv .title_wrap .sub span.w {
    display: table;
    padding: 13px 0 15px 0;
    padding-left: 30px;
    padding-right: 14px;
    background-color: #fff;
  }
  #kv .tagline {
    width: 22.5vw !important;
    max-width: 270px !important;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1em;
    position: absolute;
    right: 0;
    top: 57%;
    text-align: right;
  }
  #kv .tagline span.w {
    display: inline-block;
    padding: 6px 0 4px 0;
    padding-left: 10px;
    padding-right: 20px;
    background-color: #fff;
    white-space: nowrap;
  }
  #kv .tagline span.w:last-child {
    padding-bottom: 6px;
  }
  #story_content {
    background-color: #f5f5f1;
  }
  #story_content .story_inner {
    width: 90vw !important;
    max-width: 1080px !important;
    padding: 80px 0 95px 0;
    margin: 0 auto;
    display: flex;
  }
  #story_content .col_l {
    width: 36.66667vw !important;
    max-width: 440px !important;
    display: flex;
    position: relative;
  }
  #story_content .col_l p {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 25px;
    left: -20px;
    transition: opacity;
    transition-duration: 0.45s;
  }
  #story_content .col_l p img {
    position: relative;
  }
  #story_content .col_l .i01 img {
    width: 23.83333vw !important;
    max-width: 286px !important;
  }
  #story_content .col_l .i02 {
    opacity: 0;
  }
  #story_content .col_l .i02 img {
    width: 23.25vw !important;
    max-width: 279px !important;
  }
  #story_content .col_l.on p {
    width: 36.66667vw !important;
    max-width: 440px !important;
    height: 100%;
    position: fixed;
    top: 165px;
    left: 50%;
    transform: translateX(-561px);
  }
  #story_content .col_l.b p {
    top: inherit;
    bottom: 0;
  }
  #story_content .col_l.c .i01 {
    opacity: 0;
  }
  #story_content .col_l.c .i02 {
    opacity: 1;
  }
  #story_content .col_r {
    width: 53.33333vw !important;
    max-width: 640px !important;
    background-color: #fff;
  }
  #story_content .col_r h3 {
    margin-top: -5px;
    margin-bottom: 40px;
    font-weight: bold;
    letter-spacing: 0.12em;
    line-height: 1.5em;
  }
  #story_content .col_r .inner {
    padding: 80px;
  }
  #story_content .col_r .inner p {
    line-height: 2em;
    margin-bottom: 2em;
  }
  #story_content .col_r .inner p:last-child {
    margin-bottom: 0;
  }
  #story_content .col_r .inner .img {
    margin: 50px 0 40px 0;
  }
  #story_content .col_r .inner img {
    width: 100%;
  }
  #okanetsu {
    position: relative;
  }
  #okanetsu .inner {
    width: 90vw !important;
    max-width: 1080px !important;
    padding: 50px 0;
    display: flex;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
  }
  #okanetsu .inner .col_l {
    width: 35.83333vw !important;
    max-width: 430px !important;
  }
  #okanetsu .inner .col_r {
    width: 54.16667vw !important;
    max-width: 650px !important;
    padding-left: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }
  #okanetsu .inner .col_r h4 {
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
  }
  #okanetsu .inner .col_r h4 img {
    width: 39.41667vw !important;
    max-width: 473px !important;
  }
  #okanetsu .inner .col_r .desc {
    margin-bottom: 25px;
    font-weight: bold;
    line-height: 1.75em;
  }
  #okanetsu .inner .col_r ul {
    margin-bottom: -15px;
  }
  #okanetsu .inner .col_r li {
    margin-bottom: 0.5em;
  }
  #okanetsu .inner .col_r li p {
    line-height: 1.5em;
  }
  #okanetsu .inner .col_r li span {
    font-weight: bold;
  }
  #okanetsu .inner .img {
    position: absolute;
    top: 80px;
    right: 0;
    z-index: 1;
  }
  #okanetsu .inner .img img {
    width: 14.75vw !important;
    max-width: 177px !important;
  }
}
/* ----- min-width : 1200px ----- */
html {
  position: relative;
}
html {
  position: relative;
}