@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */
:root {
  --theme-colorA: #BDAD1F;
  --theme-colorA2: #978B22;
  --chara-green: #649E35;
  --chara-beige: #D6D0A4;
  --chara-dark_blue: #00698B;
  --chara-orange:#DF7337;
  --chara-red:#A72A2A;
  --chara-black:#34352C;
  --base-text-color:#222222;
  --base-chara-gray:#555;
  --base-chara-gray02:#888;
  --base-chara-gray03:#EFEFEF;
  --base-pat:url(../image/common/bg-pat.png);
  --base-bg-color01:#6C6240;
  --base-bg-color02:#34352C;
  --base-bg-color03:#E1E1DF;
  --base-bg-color04:#E9E9E0;
  --easeInQuad:cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad:cubic-bezier(.25, .46, .45, .94);
  --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
  --easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28); }

/* ==========================================================================
	animations
========================================================================== */
@-webkit-keyframes sdl {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0; }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 100; }
  80% {
    opacity: 100; }
  100% {
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
    opacity: 0; } }
@keyframes sdl {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0; }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 100; }
  80% {
    opacity: 100; }
  100% {
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
    opacity: 0; } }
/* スライダーアニメーションの設定 */
@-webkit-keyframes intro_slide {
  0% {
    z-index: 3;
    opacity: 1; }
  28% {
    opacity: 1; }
  33.33% {
    z-index: 3;
    opacity: 0; }
  34% {
    z-index: 1; }
  38.66% {
    opacity: 1; }
  66.65% {
    z-index: 1; }
  66.66% {
    z-index: 2; }
  99.99% {
    z-index: 2; }
  100% {
    z-index: 2; } }
@keyframes intro_slide {
  0% {
    z-index: 3;
    opacity: 1; }
  28% {
    opacity: 1; }
  33.33% {
    z-index: 3;
    opacity: 0; }
  34% {
    z-index: 1; }
  38.66% {
    opacity: 1; }
  66.65% {
    z-index: 1; }
  66.66% {
    z-index: 2; }
  99.99% {
    z-index: 2; }
  100% {
    z-index: 2; } }
/*
@keyframes intro_slide_black {
    30%{opacity:0;}
    33.33% {opacity:1;}
    40%{opacity:0;}
}
/*

@keyframes intro_slide {
    0% { z-index:10;opacity:1;}
    30% { z-index:10;opacity:1;}
    
    33% { z-index:1; opacity: 0;}
    34% { z-index:1; opacity: 1;}
    35% { opacity:1;z-index:1;}
    60% { z-index:5;}

    90% { z-index:5; }
    100% { z-index:5;}
}*/
/*
@keyframes intro_slide_before {
    0% { z-index:10;}
    33% { z-index:10;animation-timing-function:ease-in;}
    66% { z-index:1;animation-timing-function: ease-out;}

    90% { z-index:5; }
    100% { z-index:5;}
}
*/
@-webkit-keyframes loop {
  0% {
    background-position: -1360px 0; }
  100% {
    background-position: 0 0; } }
@keyframes loop {
  0% {
    background-position: -1360px 0; }
  100% {
    background-position: 0 0; } }
@-webkit-keyframes loop02 {
  0% {
    background-position: -1200px 0; }
  100% {
    background-position: 0 0; } }
@keyframes loop02 {
  0% {
    background-position: -1200px 0; }
  100% {
    background-position: 0 0; } }
@-webkit-keyframes loop03 {
  0% {
    background-position: -2284px 0; }
  100% {
    background-position: 0 0; } }
@keyframes loop03 {
  0% {
    background-position: -2284px 0; }
  100% {
    background-position: 0 0; } }
@-webkit-keyframes loop04 {
  0% {
    background-position: 2284px 0; }
  100% {
    background-position: 0 0; } }
@keyframes loop04 {
  0% {
    background-position: 2284px 0; }
  100% {
    background-position: 0 0; } }
@media screen and (max-width: 800px) {
  @-webkit-keyframes loop {
    0% {
      background-position: -663px 0; }
    100% {
      background-position: 0 0; } }
  @keyframes loop {
    0% {
      background-position: -663px 0; }
    100% {
      background-position: 0 0; } }
  @-webkit-keyframes loop02 {
    0% {
      background-position: -640px 0; }
    100% {
      background-position: 0 0; } }
  @keyframes loop02 {
    0% {
      background-position: -640px 0; }
    100% {
      background-position: 0 0; } }
  @-webkit-keyframes loop03 {
    0% {
      background-position: -1788px 0; }
    100% {
      background-position: 0 0; } }
  @keyframes loop03 {
    0% {
      background-position: -1788px 0; }
    100% {
      background-position: 0 0; } }
  @-webkit-keyframes loop04 {
    0% {
      background-position: 1788px 0; }
    100% {
      background-position: 0 0; } }
  @keyframes loop04 {
    0% {
      background-position: 1788px 0; }
    100% {
      background-position: 0 0; } } }
/* ==========================================================================
	load
========================================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  background: -webkit-gradient(linear, left top, right top, from(#8f8154), to(#585134));
  background: linear-gradient(to right, #8f8154, #585134);
  /*
  background: url(/assets/image/top/mv_bg.jpg) center center #6C6240;
  background-size: cover;
  */ }
  .load:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/assets/image/common/bg-pat.png);
    background-size: 250px 250px;
    mix-blend-mode: multiply;
    opacity: .5;
    z-index: 1; }
  .load p {
    display: block;
    width: 100px;
    height: 365px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10; }
  .load.loaded {
    -webkit-animation: 0.8s slideOut cubic-bezier(0.95, 0.05, 0.7, 0.1) forwards;
            animation: 0.8s slideOut cubic-bezier(0.95, 0.05, 0.7, 0.1) forwards; }

@-webkit-keyframes slideOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); } }

@keyframes slideOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); } }
.head {
  opacity: 0;
  overflow: visible; }

.loaded .head {
  opacity: 100;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s; }

@media screen and (max-width: 800px) {
  .load p {
    width: 70px;
    height: 255px; } }
/* ==========================================================================
	mv
========================================================================== */
#mv {
  position: relative;
  /*
  height: 100vh;
  */
  height: 54vw;
  min-height: 740px;
  max-height: 950px;
  background: url(/assets/image/top/mv_bg.jpg) center center;
  background-size: cover; }
  #mv:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(397px, 29.11vw, 510px) 108.897vw 0 0;
    border-color: #fff transparent transparent transparent; }
  #mv h2 {
    position: absolute;
    z-index: 50;
    width: 661px;
    width: clamp(661px, 48.6029411765vw, 750px);
    left: 0;
    right: 0;
    bottom: 102px;
    margin: auto;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%; }
  #mv .mv_figure {
    position: absolute;
    z-index: 30;
    width: 63.97%;
    max-width: 1050px;
    min-width: 870px;
    max-height: 950px;
    /* height: 828px; */
    left: 50%;
    /*
    right: 0;
    */
    bottom: -150px;
    margin: auto;
    -webkit-transform: translate(-50%, 150px);
            transform: translate(-50%, 150px);
    opacity: 0; }
  #mv .mv_logo {
    position: absolute;
    z-index: 10;
    width: 31.7%;
    max-width: 550px;
    min-width: 430px;
    /* top: 68px; */
    top: calc((83/737)*100%);
    left: calc(50% + 16vw);
    /*
    transform: translateY(150px);
    opacity:0;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    */
    /*
    bottom: calc((230/736)*100%);
    */
    /* right: -20px;*/ }
  #mv .main_banner {
    display: block;
    position: absolute;
    width: 290px;
    right: -3px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    bottom: -30px;
    z-index: 30; }
    #mv .main_banner img {
      position: relative;
      z-index: 20; }
    #mv .main_banner .hv_txt {
      width: 110px;
      top: -37px;
      right: 24px;
      z-index: 5;
      opacity: 0;
      -webkit-transform: translateY(50px);
      transform: translateY(50px); }
  #mv .operated {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    z-index: 40;
    opacity: 0; }
  #mv .scroll {
    display: inline-block;
    position: absolute;
    left: 46px;
    bottom: 50px;
    z-index: 20;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    mix-blend-mode: difference;
    opacity: 0; }
  #mv .line {
    position: absolute;
    width: 1px;
    height: 60px;
    left: 50px;
    top: calc(100% - 30px);
    z-index: 20;
    opacity: 0; }
    #mv .line:before {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 30px;
      left: 0;
      top: 0;
      background: #fff;
      opacity: .25; }
    #mv .line:after {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 30px;
      left: 0;
      top: 30px;
      background: #000;
      opacity: .25; }
    #mv .line .boll {
      content: "";
      display: block;
      width: 7px;
      height: 7px;
      position: absolute;
      left: -3px;
      right: 0;
      top: 0;
      opacity: 0;
      -webkit-transform: translateY(0);
              transform: translateY(0);
      background: var(--theme-colorA);
      border-radius: 50%;
      -webkit-animation: sdl 2s var(--easeInOutCubic) infinite;
              animation: sdl 2s var(--easeInOutCubic) infinite; }
  #mv .sns_area {
    width: 24px;
    height: 104px;
    position: absolute;
    right: 2.05vw;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 40;
    opacity: 0; }
    #mv .sns_area a {
      display: block; }
      #mv .sns_area a:nth-child(2) {
        margin: 16px 0; }
      @media (hover: hover) {
        #mv .sns_area a:hover {
          -webkit-animation: bouce .6s;
          animation: bouce .6s; } }

.loaded #mv {
  /*
  .mv_logo {
      transform: translateY(0);
      transition: all 0.5s ease;
      opacity:1;
      transition-delay: .5s;        
  }
  */ }
  .loaded #mv h2 {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 100;
    -webkit-transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition-delay: .8s;
            transition-delay: .8s; }
  .loaded #mv .mv_figure {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    -webkit-transition: opacity 0.5s ease,-webkit-transform 0.5s ease;
    transition: opacity 0.5s ease,-webkit-transform 0.5s ease;
    transition: transform 0.5s ease,opacity 0.5s ease;
    transition: transform 0.5s ease,opacity 0.5s ease,-webkit-transform 0.5s ease;
    opacity: 1;
    -webkit-transition-delay: .5s;
            transition-delay: .5s; }
  .loaded #mv .main_banner {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: bottom .4s ease,-webkit-transform .3s ease 1.7s;
    transition: bottom .4s ease,-webkit-transform .3s ease 1.7s;
    transition: transform .3s ease 1.7s,bottom .4s ease;
    transition: transform .3s ease 1.7s,bottom .4s ease,-webkit-transform .3s ease 1.7s; }
    .loaded #mv .main_banner .hv_txt {
      opacity: 100;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: transform 0.4s var(--easePopUp), opacity 0.4s var(--easePopUp);
      -webkit-transition: opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      transition: opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), opacity 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      -webkit-transition-delay: 1.7s;
              transition-delay: 1.7s; }
    @media (hover: hover) {
      .loaded #mv .main_banner:hover {
        bottom: -22px;
        -webkit-transition: bottom 0.4s var(--easePopUp);
        transition: bottom 0.4s var(--easePopUp); } }
  .loaded #mv .operated {
    opacity: 100;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s; }
  .loaded #mv .sns_area {
    opacity: 100;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s; }
  .loaded #mv .scroll {
    opacity: 100;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s; }
  .loaded #mv .line {
    opacity: 100;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-delay: 1.3s;
            transition-delay: 1.3s; }

@media screen and (max-width: 800px) {
  #mv {
    height: 117vw;
    min-height: 440px;
    max-height: 950px;
    background: url(/assets/image/top/mv_bg_sp.jpg) center center;
    background-size: cover; }
    #mv:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: clamp(150px, 35vw, 510px) 128.897vw 0 0;
      border-color: #fff transparent transparent transparent; }
    #mv h2 {
      width: 85.3vw;
      left: 0;
      right: 0;
      bottom: 90px;
      margin: auto; }
    #mv .mv_figure {
      position: absolute;
      z-index: 30;
      width: 112%;
      max-width: 870px;
      min-width: 420px;
      max-height: 950px;
      /* height: 828px; */
      left: 50%;
      /*
      right: 0;
      */
      bottom: -20px;
      margin: auto;
      -webkit-transform: translateX(-52%);
              transform: translateX(-52%); }
    #mv .mv_logo {
      position: absolute;
      z-index: 10;
      width: 34.5%;
      max-width: 550px;
      min-width: 134px;
      top: 11vw;
      left: calc(50% + 15vw);
      /*
      bottom: calc((230/736)*100%);
      */
      /* right: -20px;*/ }
    #mv .main_banner {
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      margin: auto;
      bottom: auto;
      z-index: 20;
      width: 90%;
      z-index: 50; }
      #mv .main_banner .hv_txt {
        width: 90px;
        top: -30px;
        right: 9.333vw;
        z-index: 15; }
    #mv .operated {
      bottom: 15px;
      width: 29%;
      min-width: 120px; }
    #mv .scroll {
      display: none; }
    #mv .line {
      display: none; }

  .hamburger {
    opacity: 0; }

  .fixed .hamburger {
    opacity: 100; }

  .loaded .hamburger {
    opacity: 100;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-delay: 1.7s;
            transition-delay: 1.7s; }

  .loaded #mv {
    /*
    .mv_logo {
        transform: translateY(0);
        transition: all 0.5s ease;
        opacity:1;
        transition-delay: .5s;        
    }
    */ }
    .loaded #mv .mv_figure {
      -webkit-transform: translate(-52%, 0);
              transform: translate(-52%, 0);
      -delay: .5s; }
    .loaded #mv .main_banner {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transition-delay: 2s;
              transition-delay: 2s; }
      .loaded #mv .main_banner .hv_txt {
        opacity: 100;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: all 0.4s var(--easePopUp);
        transition: all 0.4s var(--easePopUp);
        -webkit-transition-delay: 2.3s;
                transition-delay: 2.3s; }
    .loaded #mv .operated {
      opacity: 100;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
      -webkit-transition-delay: 1.7s;
              transition-delay: 1.7s; }
    .loaded #mv .scroll {
      opacity: 100;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
      -webkit-transition-delay: 1.4s;
              transition-delay: 1.4s; }
    .loaded #mv .line {
      opacity: 100;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
      -webkit-transition-delay: 1.5s;
              transition-delay: 1.5s; } }
/* ==========================================================================
	sp_fix_link
========================================================================== */
.sp_fix_link {
  display: none; }

@media screen and (max-width: 800px) {
  .sp_fix_link {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 4px;
    background: #6C6240;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 50;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s; }
    .sp_fix_link:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: -webkit-gradient(linear, left top, right top, from(#000), to(#fff));
      background: linear-gradient(to right, #000, #fff);
      mix-blend-mode: overlay;
      opacity: .25;
      z-index: 1; }
    .sp_fix_link:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: url(/assets/image/common/bg-pat02.jpg) center center;
      mix-blend-mode: multiply;
      opacity: .5;
      z-index: 2; }
    .sp_fix_link a {
      position: relative;
      display: block;
      width: calc(50% - 3.5px);
      padding: 10px 0 9px 48px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      background: #fff;
      border-radius: 4px;
      z-index: 5;
      box-sizing: border-box; }
      .sp_fix_link a:before {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 5;
        background: url(/assets/image/top/sp_tell_icon.png);
        background-size: cover; }
      .sp_fix_link a:nth-child(2):before {
        background-image: url(/assets/image/top/sp_free_icon.png); }
      .sp_fix_link a:nth-child(2) p {
        width: 83px; }
    .sp_fix_link p {
      display: block;
      width: 56px;
      margin-bottom: 3px; }
    .sp_fix_link .en {
      font-size: 10px;
      font-weight: 500;
      color: #A0A0A0;
      text-transform: uppercase; }
    .sp_fix_link .ar {
      display: block;
      position: absolute;
      width: 24px;
      height: 24px;
      right: 2px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 5; }
    .sp_fix_link.is-hidden {
      visibility: hidden;
      opacity: 0; } }
/* ==========================================================================
	intro
========================================================================== */
.bg_wrap {
  position: relative;
  z-index: 1;
  background: url(/assets/image/common/bg-pat_gray4.jpg) center center;
  padding-bottom: 0; }
  .bg_wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 500px;
    background: #fff;
    z-index: 1; }

.intro {
  position: relative;
  padding-top: 250px;
  margin-bottom: 9.19vw;
  /*
  padding-bottom: 10.29vw;
  */
    /*
    &:before{
        content:"";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom:0;
        z-index:1;

        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 18.38vw 100vw;
        border-color: transparent transparent #fff transparent;
    }
    */ }
  .intro:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: -10%;
    top: 100%;
    width: 120%;
    height: 510px;
    background: #fff;
    z-index: 1;
    -webkit-transform: rotate(-10.5deg);
            transform: rotate(-10.5deg); }
  .intro .con_inr {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .intro .text_area {
    position: relative;
    width: 45.83%;
    padding-top: clamp(47.7941176471px, 4.7794117647vw, 91.7647058824px); }
  .intro .border_txt {
    position: absolute;
    width: 402px;
    left: -98px;
    top: -30px;
    z-index: 1; }
  .intro p {
    position: relative;
    z-index: 10; }
  .intro .slide_area {
    position: relative;
    width: 40.41%;
    z-index: 5; }
    .intro .slide_area .slide {
      position: relative;
      -webkit-animation: intro_slide 12s linear infinite;
      animation: intro_slide 12s linear infinite;
      -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
              filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); }
    .intro .slide_area .slide01 {
      position: relative;
      z-index: 3;
      -webkit-transform: rotate(-4.37deg);
              transform: rotate(-4.37deg); }
    .intro .slide_area .slide02 {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      -webkit-transform: rotate(-0.5deg);
              transform: rotate(-0.5deg);
      -webkit-animation-delay: 4s;
      animation-delay: 4s; }
    .intro .slide_area .slide03 {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      -webkit-transform: rotate(3.65deg);
              transform: rotate(3.65deg);
      -webkit-animation-delay: 8s;
      animation-delay: 8s; }
  .intro .illust {
    width: 134px;
    position: absolute;
    left: 4.7vw;
    bottom: -14vw;
    z-index: 30; }
    .intro .illust .inview {
      display: block;
      width: 120px;
      position: absolute;
      left: 83px;
      top: -41px; }
  .intro .en_move_txt {
    position: absolute;
    width: 110%;
    height: 39px;
    left: -5%;
    /*
    bottom: 9.9vw;
    */
    bottom: 0;
    mix-blend-mode: overlay;
    background: url(/assets/image/top/intro_move_txt.png) repeat-x 0 0;
    background-size: 1360px 39px;
    -webkit-transform: rotate(-10.5deg);
            transform: rotate(-10.5deg);
    -webkit-animation: loop 20s linear infinite;
    animation: loop 20s linear infinite;
    z-index: 20; }

@media screen and (max-width: 1050px) {
  .intro .con_inr {
    display: block; }
  .intro .intro .border_txt {
    top: -60px; }
  .intro .text_area {
    width: 77.3%;
    margin: 0 auto;
    padding-top: 0;
    margin-top: 20px; }
  .intro .slide_area {
    width: 52%;
    margin: 40px auto 0; } }
@media screen and (max-width: 800px) {
  .bg_wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 500px;
    background: #fff;
    z-index: 1; }

  .intro {
    position: relative;
    padding-top: 34.13vw;
    margin-bottom: 110px; }
    .intro:after {
      left: -20%;
      top: 94%;
      width: 150%;
      height: 460px;
      background: #fff;
      -webkit-transform: rotate(-10.5deg);
              transform: rotate(-10.5deg); }
    .intro .con_inr {
      display: block; }
    .intro .text_area {
      width: 77.3%;
      margin: 0 auto;
      padding-top: 0;
      margin-top: 40px; }
    .intro .border_txt {
      width: 228px;
      left: -39px;
      top: -47px; }
    .intro .slide_area {
      width: 52%;
      margin: 40px auto 0; }
    .intro .en_move_txt {
      width: 120%;
      height: 19px;
      left: -10%;
      bottom: 6%;
      background-size: 663px 19px;
      -webkit-transform: rotate(-10.5deg);
              transform: rotate(-10.5deg);
      -webkit-animation: loop 20s linear infinite;
      animation: loop 20s linear infinite;
      z-index: 20; }
    .intro .illust {
      width: 82px;
      left: 2.6vw;
      bottom: -14vw; }
      .intro .illust .inview {
        width: 100px;
        left: 28px; } }
/* ==========================================================================
	service
========================================================================== */
.service {
  position: relative;
  z-index: 10; }
  .service:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 2%;
    height: 100%;
    background: #fff; }
  .service .con_inr .tit_area {
    margin-bottom: 60px; }
    .service .con_inr .tit_area .inview {
      width: 234px;
      left: 40px;
      top: -80px; }
    .service .con_inr .tit_area .tit_jp {
      width: 450px; }

@media screen and (max-width: 800px) {
  .service .con_inr .tit_area {
    margin-bottom: 30px; }
    .service .con_inr .tit_area .inview {
      width: 186px;
      left: 25px;
      top: -65px; }
    .service .con_inr .tit_area .tit_jp {
      width: 315px; } }
/* ==========================================================================
	area
========================================================================== */
.area {
  position: relative;
  z-index: 10;
  padding-top: clamp(36.7647058824px, 3.6764705882vw, 70.5882352941px);
  margin-bottom: 180px; }
  .area .con_inr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1350px; }
  .area .l_area {
    position: relative;
    width: 46.2%;
    min-width: 440px;
    padding-top: clamp(62.5px, 6.25vw, 120px);
    min-height: 480px; }
  .area .tit_area {
    margin-bottom: 49px; }
    .area .tit_area .inview {
      width: 219px;
      left: -75px;
      top: -70px; }
    .area .tit_area .tit_jp {
      width: 233px; }
  .area .link_txt {
    margin-top: 45px; }
    .area .link_txt img {
      width: 149px; }
  .area .r_area {
    position: relative;
    width: 50%; }
  .area .img {
    width: 90.34%; }
  .area .map {
    position: absolute;
    z-index: 10;
    width: calc((310/580)*100%);
    left: calc((311/580)*100%);
    top: calc((352/592)*100%); }
  .area .illust {
    position: absolute;
    left: 253px;
    bottom: -0.6vw;
    width: 224px;
    z-index: 10;
    opacity: 0;
    -webkit-transform: translate(-80px, 20px);
            transform: translate(-80px, 20px);
    -webkit-transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
    -webkit-transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad);
    transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad);
    transition: transform 0.49s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
    transition: transform 0.49s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad); }
    .area .illust.move {
      opacity: 100;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      -webkit-transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
      -webkit-transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad);
      transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad);
      transition: transform 0.49s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
      transition: transform 0.49s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad), -webkit-transform 0.49s var(--easeOutQuad); }

@media screen and (max-width: 1360px) {
  .area .illust {
    bottom: 0.4vw; } }
@media screen and (max-width: 1276px) {
  .area .illust {
    bottom: 1.2vw; } }
@media screen and (max-width: 1160px) {
  .area .illust {
    bottom: 2vw; } }
@media screen and (max-width: 1060px) {
  .area .r_area {
    position: absolute;
    left: 480px;
    width: 450px; }
  .area .illust {
    bottom: 35px; } }
@media screen and (max-width: 910px) {
  .area .illust {
    bottom: 53px; } }
@media screen and (max-width: 800px) {
  .area {
    padding-top: 100px;
    margin-bottom: 80px; }
    .area .con_inr {
      display: block; }
    .area .l_area {
      width: 100%;
      min-width: 10px;
      min-height: 10px;
      padding-top: 0;
      margin: 0 auto 45px;
      text-align: center; }
      .area .l_area p {
        text-align: left; }
    .area .tit_area {
      margin-bottom: 21px; }
      .area .tit_area .inview {
        width: 175px;
        left: -57px;
        top: -56px; }
      .area .tit_area .tit_jp {
        width: 157px; }
    .area .link_txt {
      margin-top: 30px; }
      .area .link_txt img {
        width: 118px; }
    .area .r_area {
      position: relative;
      width: 63.338%;
      margin: 0 auto;
      left: auto; }
    .area .img {
      width: 100%; }
    .area .map {
      position: absolute;
      z-index: 10;
      width: calc((140/206)*100%);
      left: calc((120/207)*100%);
      top: calc((120/233)*100%); }
    .area .illust {
      width: 112px;
      left: -5vw;
      bottom: -1vw; } }
@media screen and (max-width: 501px) {
  .area .illust {
    bottom: 2px; } }
@media screen and (max-width: 491px) {
  .area .illust {
    bottom: 6px; } }
/* ==========================================================================
	works
========================================================================== */
.works {
  position: relative;
  z-index: 5;
  background: #fff; }
  .works:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: -150%;
    width: 2%;
    height: 150%;
    background: #fff; }
  .works .con_inr {
    position: relative;
    z-index: 10; }
  .works .tit_area {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    margin-bottom: 5.2vw; }
    .works .tit_area .en {
      color: #fff; }
    .works .tit_area .tit_jp {
      width: 92px; }
    .works .tit_area .inview {
      width: 271px;
      right: -87px;
      top: -60px; }
  .works .slide_wrap {
    position: relative;
    width: 92.666%;
    margin-left: 7.334%;
    overflow: hidden;
    padding-top: 180px;
    padding-bottom: 195px; }
  .works .works_slide {
    /*
    width: 100%;
    */
    /*
    width: 95.65%;
    overflow: hidden;
    */
    /*
    padding-left:4.35%;
        */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 95.5%;
    overflow: visible;
    /*
    margin-left: 7.35%;
    */
    margin-bottom: 90px;
    -webkit-transform: translateY(50px) rotate(10deg);
    transform: translateY(50px) rotate(10deg);
    /*
    .slick-dots{
        
    transform: translateX(-53%) rotate(-10deg);
        
    }
    */ }
    .works .works_slide.move {
      -webkit-transform: translateY(0) rotate(10deg);
      transform: translateY(0) rotate(10deg); }
    .works .works_slide .slick-list {
      padding: 0 10% 0 0; }
    .works .works_slide .slick-track,
    .works .works_slide .slick-list {
      -webkit-transform: skewX(10deg);
      transform: skewX(10deg); }
    .works .works_slide .swiper-slide {
      -webkit-transform: skewX(10deg);
      transform: skewX(10deg); }
    .works .works_slide a {
      position: relative;
      display: block;
      /*
      width: 20%;
      */
      border-radius: 4px;
      overflow: hidden;
      /*
      margin:0 15px 0 0;
      */ }
      .works .works_slide a .img_area {
        position: relative;
        overflow: hidden; }
        .works .works_slide a .img_area img {
          width: 130%;
          height: 130%;
          -webkit-transform: skew(0deg, -10deg) translate(-15%, -5%) !important;
                  transform: skew(0deg, -10deg) translate(-15%, -5%) !important; }
        .works .works_slide a .img_area:before {
          content: "";
          display: block;
          padding-top: 62.5%; }
      .works .works_slide a .icon {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 30px;
        -webkit-transition: opacity 0.4s cubic-bezier(0.61, 1, 0.88, 1);
        transition: opacity 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
      .works .works_slide a .text_area {
        background: #fff;
        padding: 26px 30px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1);
        transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
        .works .works_slide a .text_area p {
          position: relative;
          display: block;
          font-size: 18px;
          font-size: clamp(18px, 1.3235294118vw, 21.6px);
          font-weight: 700;
          line-height: 1.4;
          letter-spacing: 0.05em;
          color: #000;
          margin-bottom: 7px;
          -webkit-transform: skewX(-10deg);
                  transform: skewX(-10deg);
          /*平行四辺形の角度*/
          -webkit-transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1);
          transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
        .works .works_slide a .text_area .en {
          position: relative;
          display: block;
          font-size: 14px;
          font-size: clamp(14px, 1.0294117647vw, 16.8px);
          font-weight: 600;
          line-height: 1.4;
          letter-spacing: 0.05em;
          color: var(--theme-colorA);
          -webkit-transform: skewX(-10deg);
                  transform: skewX(-10deg);
          /*平行四辺形の角度*/
          -webkit-transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1);
          transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
      @media (hover: hover) {
        .works .works_slide a:hover {
          /*
          .icon{
              opacity:0;
              transition:opacity 0.4s cubic-bezier(0.61, 1, 0.88, 1);
          }
          */ }
          .works .works_slide a:hover .text_area {
            background: var(--theme-colorA);
            -webkit-transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1);
            transition: background 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
            .works .works_slide a:hover .text_area p {
              color: #fff;
              -webkit-transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1);
              transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1); }
            .works .works_slide a:hover .text_area .en {
              color: #fff;
              -webkit-transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1);
              transition: color 0.4s cubic-bezier(0.61, 1, 0.88, 1); } }
  .works .swiper-pagination {
    position: absolute;
    bottom: 275px;
    left: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    -webkit-transform: translateX(-3vw);
            transform: translateX(-3vw); }
    .works .swiper-pagination .swiper-pagination-bullet {
      display: inline-block;
      cursor: pointer;
      width: 8px;
      height: 8px;
      background: #948b71;
      font-size: 0;
      line-height: 0;
      margin: 0 5px;
      border: none;
      outline: none;
      border-radius: 4px;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
      -webkit-transition-delay: .4s;
              transition-delay: .4s; }
      .works .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #bead1f;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        -webkit-transition-delay: .4s;
                transition-delay: .4s; }
  .works .link_txt {
    display: block;
    width: 205px;
    margin: 0 auto;
    -webkit-transform: translateX(-3vw);
            transform: translateX(-3vw); }
    .works .link_txt img {
      width: 163px; }
  .works .bg_area {
    width: 98%;
    height: calc(100% + 639px);
    /* height: 1500px; */
    position: absolute;
    right: 0;
    top: -394px;
    /*
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    */
    -webkit-clip-path: polygon(0 16.66%, 100% 0, 100% 100%, 0 84%);
            clip-path: polygon(0 16.66%, 100% 0, 100% 100%, 0 84%);
    background: -webkit-gradient(linear, left top, right top, from(#8f8154), to(#585134));
    background: linear-gradient(to right, #8f8154, #585134); }
    .works .bg_area:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(/assets/image/common/bg-pat.png);
      background-size: 250px 250px;
      mix-blend-mode: multiply;
      opacity: .5; }
    .works .bg_area .sou {
      width: 400px;
      position: absolute;
      left: -70px;
      top: 14.5vw;
      z-index: 5;
      mix-blend-mode: overlay;
      opacity: .1; }
  .works .illust {
    position: absolute;
    right: 4.15vw;
    top: 4.5vw;
    width: 218px;
    z-index: 10;
    opacity: 0;
    -webkit-transform: translate(80px, -20px);
            transform: translate(80px, -20px);
    -webkit-transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
    -webkit-transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad);
    transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad); }
    .works .illust.move {
      opacity: 100;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      -webkit-transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
      -webkit-transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad);
      transition: opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad);
      transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad);
      transition: transform 0.4s var(--easeOutQuad), opacity 0.4s var(--easeOutQuad), -webkit-transform 0.4s var(--easeOutQuad); }

/*
@media screen and (max-width : 2410px ){
    .works .illust{top: 4.2vw;}
    
}
@media screen and (max-width : 2250px ){
    .works .illust{top: 3.5vw;}    
}
@media screen and (max-width : 2090px ){
    .works .illust{top: 2.8vw;}    
}
@media screen and (max-width : 1930px ){
    .works .illust{top: 0.1vw;}    
}
*/
@media screen and (min-width: 1771px) {
  .works .illust {
    top: 1.4vw; } }
@media screen and (max-width: 1770px) {
  .works .illust {
    top: -0.4vw; } }
@media screen and (max-width: 1610px) {
  .works .illust {
    top: 0; } }
@media screen and (max-width: 1450px) {
  .works .illust {
    top: -22px; } }
@media screen and (max-width: 1290px) {
  .works .illust {
    top: -44px; } }
@media screen and (max-width: 1130px) {
  .works .illust {
    top: -66px; } }
@media screen and (max-width: 970px) {
  .works .illust {
    top: -88px; } }
@media screen and (max-width: 800px) {
  .works .con_inr {
    padding-bottom: 140px;
    width: 100%;
    padding-bottom: 140px; }
  .works .tit_area {
    position: relative;
    margin-bottom: 30px; }
    .works .tit_area .tit_jp {
      width: 60px; }
    .works .tit_area .inview {
      width: 216px;
      right: -70px;
      top: -50px; }
  .works .slide_wrap {
    position: relative;
    width: 92%;
    margin-left: 8%;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0; }
  .works .works_slide {
    width: 94%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 68px;
    -webkit-transform: translateY(30px) rotate(0deg);
    transform: translateY(50px) rotate(0deg);
    /*
    .slick-list{ padding: 0 3% 0 0;}
    .slick-track,
    .slick-list{
        -webkit-transform: skewX(0deg);
        transform: skewX(0deg);
    }
    */ }
    .works .works_slide.move {
      -webkit-transform: translateY(0) rotate(0deg);
      transform: translateY(0) rotate(0deg); }
    .works .works_slide .swiper-slide {
      -webkit-transform: skewX(0deg);
      transform: skewX(0deg); }
    .works .works_slide a {
      border-radius: 4px 4px 0 4px;
      /*
      margin:0 9px 0 0;
      */ }
      .works .works_slide a .icon {
        width: 24px; }
      .works .works_slide a .img_area img {
        width: 110%;
        height: 110%;
        -webkit-transform: skew(0deg, 0deg) translate(-5%, -5%) !important;
                transform: skew(0deg, 0deg) translate(-5%, -5%) !important; }
      .works .works_slide a .text_area {
        padding: 12px 16px; }
        .works .works_slide a .text_area p {
          font-size: 12px;
          font-size: clamp(12px, 3.2vw, 14.4px);
          margin-bottom: 6px;
          -webkit-transform: skewX(0deg);
                  transform: skewX(0deg); }
        .works .works_slide a .text_area .en {
          font-size: 12px;
          font-size: clamp(12px, 3.2vw, 14.4px);
          -webkit-transform: skewX(0deg);
                  transform: skewX(0deg); }
    .works .works_slide .slick-dots {
      -webkit-transform: translateX(-50%) rotate(0deg);
              transform: translateX(-50%) rotate(0deg); }
  .works .swiper-pagination {
    bottom: 66px; }
  .works .link_txt {
    width: 160px; }
    .works .link_txt img {
      width: 129px; }
  .works .bg_area {
    width: 96%;
    height: calc(100% + 272px);
    top: -164px;
    -webkit-clip-path: polygon(0 7.22%, 100% 0, 100% 100%, 0 92.5%);
            clip-path: polygon(0 7.22%, 100% 0, 100% 100%, 0 92.5%);
    background: -webkit-gradient(linear, left top, right top, from(#8f8154), to(#585134));
    background: linear-gradient(to right, #8f8154, #585134);
    overflow: hidden; }
    .works .bg_area .sou {
      width: 155px;
      left: -24px;
      top: 9.5vw; }
  .works .illust {
    width: 90px;
    top: 10.5%;
    right: 3.85vw; } }
@media screen and (max-width: 500px) {
  .works .illust {
    top: 70px; }

  .works .bg_area .sou {
    top: 11vw; } }
/* ==========================================================================
	voice_bnr_area
========================================================================== */
.voice_bnr_area {
  position: relative;
  width: 90%;
  max-width: 960px;
  margin: 0 auto 160px;
  position: relative;
  z-index: 10; }
  .voice_bnr_area a {
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 4px; }
    .voice_bnr_area a:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(/assets/image/top/voice_bg_slider.jpg) repeat-x 0 0;
      background-size: 1200px 300px;
      overflow: hidden;
      -webkit-animation: loop02 40s linear infinite;
              animation: loop02 40s linear infinite;
      border-radius: 4px;
      z-index: 1; }
    @media (hover: hover) {
      .voice_bnr_area a:hover:after {
        opacity: .5;
        -webkit-transition: opacity .4s ease;
        transition: opacity .4s ease; }
      .voice_bnr_area a:hover .tit_area .en:after {
        background: url(/assets/image/common/b_link_icon02.png) var(--theme-colorA);
        border-color: var(--theme-colorA);
        background-size: cover;
        -webkit-transition: background .4s ease,border .4s ease;
        transition: background .4s ease,border .4s ease; } }
    .voice_bnr_area a:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      z-index: 2;
      background: var(--base-bg-color02);
      opacity: .25;
      -webkit-transition: opacity .4s ease;
      transition: opacity .4s ease; }
  .voice_bnr_area .tit_area {
    position: absolute;
    left: 0;
    right: 0;
    top: 113px;
    margin: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 5; }
    .voice_bnr_area .tit_area .en {
      position: relative;
      color: #fff;
      display: inline-block;
      padding-right: 30px;
      font-size: 64px; }
      .voice_bnr_area .tit_area .en:after {
        content: "";
        display: block;
        width: 46px;
        height: 46px;
        position: absolute;
        right: -36px;
        top: 9px;
        background: url(/assets/image/common/b_link_icon.png) #fff;
        border: 1px solid #fff;
        background-size: cover;
        border-radius: 50%;
        -webkit-transition: background .4s ease, border .4s ease;
        transition: background .4s ease, border .4s ease;
        z-index: 1; }
    .voice_bnr_area .tit_area .tit_jp {
      display: block;
      width: 83px;
      margin: 0 auto; }
    .voice_bnr_area .tit_area .inview {
      width: 229px;
      right: 68px;
      top: -70px; }
  .voice_bnr_area .people {
    display: block;
    position: absolute;
    width: calc((125/960)*100%);
    left: calc((15/960)*100%);
    bottom: 276px;
    z-index: 10; }
  .voice_bnr_area .illust01 {
    display: block;
    position: absolute;
    width: calc((236/960)*100%);
    left: calc((87/960)*-100%);
    bottom: -44px;
    z-index: 10; }
  .voice_bnr_area .illust02 {
    display: block;
    position: absolute;
    width: calc((109/960)*100%);
    right: calc((78/960)*-100%);
    bottom: -30px;
    z-index: 10; }

@media screen and (max-width: 800px) {
  .voice_bnr_area {
    width: 70%;
    margin: 0 auto 80px; }
    .voice_bnr_area a {
      height: 160px; }
      .voice_bnr_area a:before {
        background-size: 640px 160px; }
    .voice_bnr_area .tit_area {
      top: 56px; }
      .voice_bnr_area .tit_area .en {
        padding-right: 29px;
        font-size: 36px; }
        .voice_bnr_area .tit_area .en:after {
          width: 32px;
          height: 32px;
          right: -12px;
          top: 5px; }
      .voice_bnr_area .tit_area .tit_jp {
        width: 68px; }
      .voice_bnr_area .tit_area .inview {
        width: 183px;
        right: 37px;
        top: -60px; }
      .voice_bnr_area .tit_area.c_tit .img_area {
        position: absolute;
        top: -100px; }
    .voice_bnr_area .people {
      width: 62px;
      left: -15px;
      bottom: 145px;
      z-index: 2; }
    .voice_bnr_area .illust01 {
      width: 129px;
      left: -45px;
      bottom: -24px; }
    .voice_bnr_area .illust02 {
      width: 60px;
      right: -42px;
      bottom: -16px;
      z-index: 10; } }
/* ==========================================================================
	blog
========================================================================== */
.blog {
  position: relative; }
  .blog .con_inr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse; }
  .blog .v_tit_area {
    width: 115px;
    /*
    width: clamp(105px,7.7vw,150px);
    */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse; }
    .blog .v_tit_area a {
      position: relative; }
      .blog .v_tit_area a:after {
        content: "";
        display: block;
        position: absolute;
        width: 58px;
        height: 58px;
        bottom: -80px;
        /*
        left: 0;
        */
        right: 0;
        /*margin:auto;*/
        background: url(/assets/image/common/b_link_icon02.png) var(--theme-colorA);
        border: 2px solid var(--theme-colorA);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-size: cover;
        border-radius: 50%;
        -webkit-transition: background .4s ease;
        transition: background .4s ease;
        z-index: 1; }
      @media (hover: hover) {
        .blog .v_tit_area a:hover:after {
          background: url(/assets/image/common/b_link_icon.png) #F6F6F3;
          background-size: cover;
          -webkit-transition: background .4s ease;
          transition: background .4s ease; } }
    .blog .v_tit_area .tit_jp {
      display: block;
      width: 22px; }
  .blog .link_area {
    width: 83.103%;
    max-width: calc(100% - 135px); }
    .blog .link_area li {
      opacity: 0;
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
      -webkit-transition: all 0.4s var(--easePopUp);
      transition: all 0.4s var(--easePopUp); }
    .blog .link_area.move li {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-transition: all 0.4s var(--easePopUp);
      transition: all 0.4s var(--easePopUp); }
      .blog .link_area.move li:nth-child(2) {
        -webkit-transition-delay: .2s;
                transition-delay: .2s; }
      .blog .link_area.move li:nth-child(3) {
        -webkit-transition-delay: .4s;
                transition-delay: .4s; }
    .blog .link_area a {
      display: block;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 24px 0;
      border-bottom: 1px solid #e7e7e7; }
      .blog .link_area a:before {
        content: "";
        display: block;
        position: absolute;
        left: -5%;
        top: 0;
        width: 0;
        height: 100%;
        background: #F6F6F3;
        z-index: 1;
        -webkit-transition: width .4s ease;
        transition: width .4s ease; }
      @media (hover: hover) {
        .blog .link_area a:hover:before {
          left: 0;
          width: 100%;
          -webkit-transition: width .4s ease;
          transition: width .4s ease; } }
    .blog .link_area li:first-child a {
      border-top: 1px solid #e7e7e7; }
    .blog .link_area .img_area {
      position: relative;
      width: 23.85%;
      min-width: 230px;
      border-radius: 4px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      overflow: hidden;
      z-index: 10; }
      .blog .link_area .img_area:before {
        content: "";
        display: block;
        padding-top: 66.375%; }
    .blog .link_area .text_area {
      position: relative;
      width: 71.5%;
      max-width: calc(95% - 230px);
      padding-right: 110px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      z-index: 10; }
      .blog .link_area .text_area:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 46px;
        height: 46px;
        background: url(/assets/image/common/b_link_icon.png) #fff;
        background-size: cover;
        border-radius: 50%;
        z-index: 1; }
      .blog .link_area .text_area p {
        display: block;
        color: #000;
        margin-bottom: 12px; }
      .blog .link_area .text_area .en {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        margin-right: 11px; }
      .blog .link_area .text_area .cate {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        padding: 4px 8px 5px;
        background: var(--theme-colorA);
        border-radius: 20px; }

@media screen and (max-width: 800px) {
  .blog .con_inr {
    display: block; }
  .blog .v_tit_area {
    display: block;
    width: 100%;
    margin-bottom: 30px; }
    .blog .v_tit_area a {
      display: inline-block; }
      .blog .v_tit_area a:after {
        width: 36px;
        height: 36px;
        bottom: 3px;
        left: auto;
        right: -48px; }
    .blog .v_tit_area .tit_jp {
      display: block;
      width: 44px; }
  .blog .link_area {
    width: 100%;
    max-width: 100%; }
    .blog .link_area a {
      padding: 20px 0;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; }
    .blog .link_area .img_area {
      width: 15.8%;
      min-width: 100px;
      border: 1px solid #E7E7E7; }
    .blog .link_area .text_area {
      width: calc(84.2% - 15px);
      max-width: calc(100% - 115px);
      padding-right: 27px; }
      .blog .link_area .text_area:after {
        width: 24px;
        height: 24px; }
      .blog .link_area .text_area p {
        margin-bottom: 10px; }
      .blog .link_area .text_area .en {
        font-size: 12px;
        margin-right: 8px; }
      .blog .link_area .text_area .cate {
        font-size: 10px;
        padding: 3px 6px 4px; } }
/* ==========================================================================
	henshin
========================================================================== */
.henshin {
  position: relative;
  width: 95.5%;
  max-width: 1920px;
  margin: clamp(400px, 30.6617vw, 588px) auto 2.25vw; }
  .henshin .henshin_bg {
    position: relative;
    z-index: 10; }
  .henshin .staff {
    position: absolute;
    left: 0;
    right: 0;
    width: calc((812/1300)*100%);
    min-width: 752px;
    top: calc((313/1618)*-100%);
    z-index: 1;
    margin: auto;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s var(--easePopUp);
    transition: -webkit-transform 0.4s var(--easePopUp);
    transition: transform 0.4s var(--easePopUp);
    transition: transform 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp); }
    .henshin .staff .bubble {
      display: block;
      position: absolute;
      width: calc((160/812)*100%);
      height: calc((100/530)*100%); }
      .henshin .staff .bubble.bubble01 {
        left: calc((84/812)*100%);
        top: calc((38/530)*100%); }
      .henshin .staff .bubble.bubble02 {
        left: calc((340/812)*100%);
        top: calc((52/530)*100%); }
      .henshin .staff .bubble.bubble03 {
        right: calc((48/812)*100%);
        top: calc((24/530)*100%); }
  .henshin.move .staff {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 100;
    -webkit-transition: -webkit-transform 0.4s var(--easePopUp);
    transition: -webkit-transform 0.4s var(--easePopUp);
    transition: transform 0.4s var(--easePopUp);
    transition: transform 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp); }
  .henshin .illust {
    display: block;
    position: absolute;
    z-index: 10;
    /*
    .bubble{display:none;}
    */ }
    .henshin .illust.illust01 {
      width: calc((105/1300)*100%);
      min-width: 91px;
      right: calc((40/1300)*100%);
      top: calc((71/1618)*-100%); }
      .henshin .illust.illust01 .bubble {
        display: block;
        position: absolute;
        width: calc((240/210)*100%);
        left: calc((140/210)*-100%);
        top: calc((108/442)*-100%); }
    .henshin .illust.illust02 {
      width: calc((97/1300)*100%);
      min-width: 83px;
      left: calc((63/1300)*100%);
      top: calc((163/1618)*100%); }
      .henshin .illust.illust02 .bubble {
        display: block;
        position: absolute;
        width: calc((240/194)*100%);
        right: calc((70/194)*-100%);
        top: calc((108/456)*-100%); }
    .henshin .illust.illust03 {
      width: calc((95/1300)*100%);
      min-width: 81px;
      right: calc((134/1300)*100%);
      top: calc((444/1618)*100%); }
      .henshin .illust.illust03 .bubble {
        display: block;
        position: absolute;
        width: calc((240/190)*100%);
        left: calc((56/190)*-100%);
        top: calc((108/462)*-100%); }
    .henshin .illust.illust04 {
      width: calc((54/1300)*100%);
      min-width: 46px;
      left: calc((166/1300)*100%);
      top: calc((841/1618)*100%); }
      .henshin .illust.illust04 .bubble {
        display: block;
        position: absolute;
        width: calc((240/108)*100%);
        right: calc((154/108)*-100%);
        top: calc((108/460)*-100%); }
    .henshin .illust.illust05 {
      width: calc((125/1300)*100%);
      min-width: 107px;
      right: calc((128/1300)*100%);
      bottom: calc((52/1618)*-100%); }
      .henshin .illust.illust05 .bubble {
        display: block;
        position: absolute;
        width: calc((240/250)*100%);
        left: calc((126/250)*-100%);
        top: calc((120/468)*-100%); }

@media screen and (max-width: 1300px) {
  .henshin .staff {
    top: -300px; } }
@media screen and (max-width: 800px) {
  .henshin {
    width: 92%;
    max-width: 1920px;
    margin-top: calc(44vw + 80px);
    margin-bottom: 4vw; }
    .henshin .staff {
      width: 92%;
      min-width: 10px;
      top: calc((292/860)*-100%); }
      .henshin .staff .bubble {
        width: calc((110/345)*100%);
        height: calc((68/205)*100%); }
        .henshin .staff .bubble.bubble01 {
          left: calc((9/345)*-100%);
          top: calc((15/205)*-100%); }
        .henshin .staff .bubble.bubble02 {
          left: calc((107/345)*100%);
          top: calc((12/205)*-100%); }
        .henshin .staff .bubble.bubble03 {
          right: calc((21/345)*-100%);
          top: calc((18/205)*-100%); }
    .henshin .illust {
      display: block;
      position: absolute;
      z-index: 10;
      /*
      .bubble{display:none;}
      */ }
      .henshin .illust.illust01 {
        width: calc((105/690)*100%);
        min-width: 1px;
        right: calc((15/690)*100%);
        top: calc((20/860)*-100%); }
        .henshin .illust.illust01 .bubble {
          display: block;
          position: absolute;
          width: calc((180/105)*100%);
          left: calc((102/105)*-100%);
          top: calc((80/220)*-100%); }
      .henshin .illust.illust02 {
        width: calc((96/690)*100%);
        min-width: 1px;
        left: calc((28/690)*100%);
        top: calc((16/860)*100%); }
        .henshin .illust.illust02 .bubble {
          display: block;
          position: absolute;
          width: calc((180/96)*100%);
          right: calc((64/96)*-100%);
          top: calc((82/226)*-100%); }
      .henshin .illust.illust03 {
        width: calc((94/690)*100%);
        min-width: 1px;
        right: calc((87/690)*100%);
        top: auto;
        bottom: calc((325/860)*100%); }
        .henshin .illust.illust03 .bubble {
          display: block;
          position: absolute;
          width: calc((180/94)*100%);
          left: calc((70/94)*-100%);
          top: calc((78/230)*-100%); }
      .henshin .illust.illust04 {
        width: calc((56/690)*100%);
        min-width: 1px;
        left: calc((53/690)*100%);
        top: calc((475/860)*100%); }
        .henshin .illust.illust04 .bubble {
          display: block;
          position: absolute;
          width: calc((180/56)*100%);
          right: calc((126/56)*-100%);
          top: calc((80/230)*-100%); }
      .henshin .illust.illust05 {
        width: calc((124/690)*100%);
        min-width: 1px;
        right: calc((59/690)*100%);
        bottom: calc((50/860)*-100%); }
        .henshin .illust.illust05 .bubble {
          display: block;
          position: absolute;
          width: calc((180/124)*100%);
          left: calc((105/124)*-100%);
          top: calc((80/232)*-100%); } }
/* ==========================================================================
	foot_top_area
========================================================================== */
.foot_top_area {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1142px;
  padding-top: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center; }
  .foot_top_area:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(75%, rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0) 75%);
    opacity: .25; }
  .foot_top_area:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .25; }
  .foot_top_area h2 {
    position: relative;
    display: block;
    width: 400px;
    margin: 0 auto;
    z-index: 10; }
  .foot_top_area .provided {
    position: relative;
    display: block;
    width: 181px;
    margin: 0 auto 35px;
    z-index: 10; }
  .foot_top_area h3 {
    position: relative;
    display: block;
    width: 619px;
    margin: 0 auto 3px;
    z-index: 10; }
  .foot_top_area p {
    position: relative;
    display: block;
    font-size: 16px;
    font-size: clamp(16px, 1.1764705882vw, 18px);
    line-height: 2;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #fff;
    margin-bottom: 23px;
    z-index: 10;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
  .foot_top_area h3 > p {
    margin-bottom: 0; }
  .foot_top_area .bg_area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%; }
    .foot_top_area .bg_area:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 571px;
      background: url(/assets/image/top/foot_top_line01.jpg) repeat-x 0 0;
      background-size: 2284px 571px;
      -webkit-animation: loop03 50s linear infinite;
      animation: loop03 50s linear infinite; }
    .foot_top_area .bg_area:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 571px;
      background: url(/assets/image/top/foot_top_line02.jpg) repeat-x 0 0;
      background-size: 2284px 571px;
      -webkit-animation: loop04 50s linear infinite;
      animation: loop04 50s linear infinite; }
  .foot_top_area .triangle {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 180px 50vw;
    border-color: transparent transparent #fff transparent;
    z-index: 5; }

@media screen and (max-width: 800px) {
  .foot_top_area {
    width: 92%;
    height: auto;
    max-height: 894px;
    padding-top: 39px;
    padding-bottom: 105px;
    margin: 0 auto; }
    .foot_top_area h2 {
      width: 280px; }
    .foot_top_area .provided {
      width: 141px;
      margin: 0 auto 15px; }
    .foot_top_area h3 {
      width: 315px;
      margin: 0 auto 3px; }
    .foot_top_area p {
      width: 75%;
      font-size: 14px;
      line-height: 1.8;
      text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      margin: 0 auto 12px;
      text-align: left; }
    .foot_top_area .bg_area {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%; }
      .foot_top_area .bg_area:before {
        height: 447px;
        background-size: 1788px 447px; }
      .foot_top_area .bg_area:after {
        height: 447px;
        background-size: 1788px 447px; }
    .foot_top_area .triangle {
      border-width: 0 45vw 12.26vw 45vw; } }
.foot_contact .text_area {
  padding-bottom: 58px; }

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