@charset "UTF-8";
/*! Writen  by SCSS */
.inner {
  max-width: 1200px;
  width: calc(100% - 40px);
  margin: 0 auto; }

.contents_wrap::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url(../images/common/bg_01.jpg) center/cover no-repeat; }

section.gb_w {
  width: 100%;
  background: #fff;
  position: relative; }

section.no_bg {
  position: relative; }

.main_area {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  .main_area::before {
    content: "";
    display: block;
    padding-bottom: calc(750%/16); }
    @media screen and (max-width: 480px) {
      .main_area::before {
        padding-bottom: calc(250%/4.14); } }
  .main_area.common01 {
    background-image: url("../images/common/main_common01.jpg") !important; }
    @media screen and (max-width: 480px) {
      .main_area.common01 {
        background-image: url("../images/common/main_common01_sp.jpg") !important; } }
  .main_area.common02 {
    background-image: url("../images/common/main_common02.jpg") !important; }
    @media screen and (max-width: 480px) {
      .main_area.common02 {
        background-image: url("../images/common/main_common02_sp.jpg") !important; } }
  .main_area.obi::before {
    content: "";
    display: block;
    padding-bottom: calc(620%/16); }
    @media screen and (max-width: 480px) {
      .main_area.obi::before {
        padding-bottom: calc(250%/4.14); } }
  .main_area .main_ttl {
    position: absolute;
    top: calc(60%/7.5);
    left: 0;
    right: 0;
    margin: auto;
    max-width: 86px; }
    @media screen and (max-width: 960px) {
      .main_area .main_ttl {
        width: calc(86%/9.6); } }
    @media screen and (max-width: 480px) {
      .main_area .main_ttl {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: auto;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center; } }

.read {
  font-size: 60px;
  font-size: 32px;
  letter-spacing: 0.15em;
  line-height: 1.333;
  font-feature-settings: "palt"; }
  @media screen and (max-width: 1200px) {
    .read {
      font-size: 4vw; } }
  @media screen and (max-width: 768px) {
    .read {
      font-size: 26px;
      line-height: 1.4; } }

.read_copy {
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 3.125;
  font-feature-settings: "palt"; }
  @media screen and (max-width: 1200px) {
    .read_copy {
      font-size: 1.3vw; } }
  @media screen and (max-width: 768px) {
    .read_copy {
      font-size: 14px;
      line-height: 1.8; } }
  .read_copy .cap {
    font-size: 80%; }

.ta_c_pc {
  text-align: center; }
  @media screen and (max-width: 768px) {
    .ta_c_pc {
      text-align: left; } }

.inner_area .inner_box_wrap {
  background-image: url("../images/common/bg001.png");
  background-repeat: no-repeat;
  background-size: 532px 596px;
  background-position: center;
  padding: 70px 0; }
  @media screen and (max-width: 768px) {
    .inner_area .inner_box_wrap {
      background-size: 480px auto; } }
  @media screen and (max-width: 768px) {
    .inner_area .inner_box_wrap {
      padding: 30px 0; } }
.inner_area .inner_box {
  width: calc(100% - 40px);
  margin: 0 auto; }
.inner_area.bg_adjust {
  background-position: top 75px center; }
  @media screen and (max-width: 768px) {
    .inner_area.bg_adjust {
      background-position: bottom -55px center; } }
.inner_area .read .small {
  font-size: 40%;
  display: block; }
  @media screen and (max-width: 768px) {
    .inner_area .read .small {
      font-size: 50%; } }

.main_obi {
  background: #4d6372;
  text-align: center;
  position: relative;
  animation-name: bgextendAnimeBase;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }
  .main_obi .main_txt {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.2em;
    color: #fff; }
    @media screen and (max-width: 1600px) {
      .main_obi .main_txt {
        font-size: 2vw; } }
    @media screen and (max-width: 768px) {
      .main_obi .main_txt {
        font-size: 3vw; } }
    @media screen and (max-width: 480px) {
      .main_obi .main_txt {
        font-size: 4vw; } }
    .main_obi .main_txt::before {
      animation-name: bgLRextendAnime;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      /*伸びる背景色の設定*/ }
    .main_obi .main_txt .bgappear {
      display: block;
      padding: 1.25vw;
      animation-name: bgextendAnimeSecond;
      animation-duration: 2s;
      animation-delay: 1.6s;
      animation-fill-mode: forwards;
      opacity: 0; }
      @media screen and (max-width: 768px) {
        .main_obi .main_txt .bgappear {
          padding: 15px; } }
      @media screen and (max-width: 768px) {
        .main_obi .main_txt .bgappear {
          padding: 15px; } }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }

/*# sourceMappingURL=inner.css.map */