@charset "UTF-8";
@import url("https://use.fontawesome.com/releases/v6.0.0/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap");
@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru");
@import url("https://fonts.googleapis.com/css2?family=Allison&display=swap");
.font_josefin {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
}

.fee_font {
  font-family: "YakuHanJP", "Josefin Sans", "sans-serif";
  font-weight: 500;
}

.font_anton {
  font-family: "Anton", sans-serif;
  font-weight: 500;
}

.font_parisienne {
  font-family: "Parisienne", cursive;
  letter-spacing: 0;
  font-weight: normal;
  text-transform: capitalize;
  text-transform: lowercase !important;
}

.font_parisienne:first-letter {
  text-transform: uppercase !important;
}

.font_kaisei {
  font-family: "Kaisei Opti", serif;
  font-weight: 500;
}

.font_maru {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 500;
}

body {
  color: #555;
  background: #fff;
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.4rem;
  line-height: 2.0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.1em;
}

a {
  color: #959595;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

#main_area {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.bold {
  font-weight: bold !important;
}

h2,
h3,
h4 {
  line-height: 1.4;
  font-weight: 600;
}

.mincho {
  font-family: "Noto Serif JP", "YakuHanMP", "Noto Serif JP", "游明朝 Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
  font-weight: 500;
  font-weight: 500 !important;
}

.bigger {
  font-size: 2.0rem;
}

@media all and (max-width: 639px) {
  .bigger {
    font-size: inherit;
  }
}

.en-big {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  text-transform: uppercase;
}

.en-big:first-letter {
  text-transform: uppercase;
}

.animation {
  opacity: 0;
}

.slideup.on {
  opacity: 1;
  -webkit-animation: view-slideup 0.65s cubic-bezier(0.2, 1, 0.2, 1);
          animation: view-slideup 0.65s cubic-bezier(0.2, 1, 0.2, 1);
}

.zoomin.on {
  opacity: 1;
  -webkit-animation: view-zoomin 0.65s cubic-bezier(0.2, 1, 0.2, 1);
          animation: view-zoomin 0.65s cubic-bezier(0.2, 1, 0.2, 1);
}

/*=============== SVGアニメーション内の指定 =================*/
/*アニメーション前の指定*/
#mask path {
  -webkit-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s;
  /*カラーがつく際のアニメーション0.5秒で変化*/
  fill: #888;
  /*塗りがない状態*/
  stroke: #888;
  /*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
  fill: #888;
  /*塗りの色*/
  fill-opacity: 1;
  /*透過1で見える状態*/
  stroke: none;
  /*線の色なし*/
}

.cls-1 {
  fill: #888;
}

.blinking {
  -webkit-animation: blink 1.5s ease-in-out infinite alternate;
  animation: blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup {
  -webkit-animation: popup 0.5s ease-in-out infinite alternate;
  animation: popup 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes popup {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes popup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup {
  -webkit-animation-name: popup-transform-keyframes;
          animation-name: popup-transform-keyframes;
  -webkit-animation-duration: 3000ms;
          animation-duration: 3000ms;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  display: inline-block;
}

@-webkit-keyframes popup-transform-keyframes {
  0% {
    -webkit-transform: translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    opacity: 0;
  }
  33.33% {
    -webkit-transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    opacity: 1;
  }
  66.67% {
    -webkit-transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(8px, -15px) scale(0.8) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(8px, -15px) scale(0.8) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    opacity: 0;
  }
}

@keyframes popup-transform-keyframes {
  0% {
    -webkit-transform: translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    opacity: 0;
  }
  33.33% {
    -webkit-transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    opacity: 1;
  }
  66.67% {
    -webkit-transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(0px, -20px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(8px, -15px) scale(0.8) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
            transform: translate(8px, -15px) scale(0.8) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
    opacity: 0;
  }
}

.truck {
  -webkit-animation: truck 2s infinite;
  animation: truck 2s infinite;
}

@-webkit-keyframes truck {
  0% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  5% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  10% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  15% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  20% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  25% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}

@keyframes truck {
  0% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  5% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  10% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  15% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  20% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  25% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}

.fuwafuwa {
  -webkit-animation-name: fuwafuwa;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: fuwafuwa;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
}

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}

.yurayura {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-name: yurayura;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: yurayura;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease;
}

@-webkit-keyframes yurayura {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

.rotate {
  -webkit-animation: rotate-anime 5s linear infinite;
  animation: rotate-anime 5s linear infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  animation: heartbeat 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  /*   width: 36px;
  height: 36px;
 */
  /* -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%; */
  /* 
  &:after {
    position: absolute;
    content: "";
    background: #e87;
  }

  &:before {
    position: absolute;
    content: "";
    background: #e87;
    -moz-border-radius-topleft: 12px;
    -webkit-border-top-left-radius: 12px;
    border-top-left-radius: 12px;
    -moz-border-radius-bottomleft: 12px;
    -webkit-border-bottom-left-radius: 12px;
    border-bottom-left-radius: 12px;
    top: 12px;
    left: 0;
    width: 36px;
    height: 24px;
  }

  &:after {
    -moz-border-radius-topleft: 12px;
    -webkit-border-top-left-radius: 12px;
    border-top-left-radius: 12px;
    -moz-border-radius-topright: 12px;
    -webkit-border-top-right-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
    left: 12px;
    width: 24px;
    height: 13px;
  } */
}

.loader {
  background-color: #888;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.loader.type1 {
  background: #f6f6f4;
  background: radial-gradient(circle, #f6f6f4 0%, #d0d0d0 100%);
}

.loader .loader_item {
  display: -ms-grid;
  display: grid;
  place-items: center;
}

.loader.off {
  display: none;
}

.lorder_rotate {
  display: -ms-grid;
  display: grid;
  place-items: center;
  margin: auto;
  -webkit-animation: lorder_rotate 0.5s linear infinite;
          animation: lorder_rotate 0.5s linear infinite;
  border: 1px solid #fff;
  border-radius: 50%;
  border-right: 1px solid rgba(136, 136, 136, 0.8);
  border-top: 1px solid rgba(136, 136, 136, 0.8);
  content: "";
  height: 70px;
  width: 70px;
}

@-webkit-keyframes lorder_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes lorder_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.lorder_ball > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}

.lorder_ball > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.lorder_ball > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.lorder_ball > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}

.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}

.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
}

.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}

.loader2 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.loader2.off {
  display: none;
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #888;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#splash_logo img {
  width: 100%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

#splash_logo .splash-logo1 {
  width: 200px;
}

#splash_logo .splash-logo1 img {
  width: 100%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

#splash_logo .list3 {
  margin-top: 40px !important;
}

#splash_logo .splash-logo1-in {
  -webkit-animation: anime-logo3 0.2s ease-in 0s forwards;
          animation: anime-logo3 0.2s ease-in 0s forwards;
}

#splash_logo .splash-logo2 {
  width: 80px;
  opacity: 0;
  -webkit-animation: anime-logo3 0.2s ease-in 0.4s forwards;
          animation: anime-logo3 0.2s ease-in 0.4s forwards;
}

#splash_logo .splash-logo3 {
  width: 80px;
  opacity: 0;
  -webkit-animation: anime-logo3 0.2s ease-in 0.8s forwards;
          animation: anime-logo3 0.2s ease-in 0.8s forwards;
}

#splash_logo .splash-logo4 {
  width: 80px;
  opacity: 0;
  -webkit-animation: anime-logo3 0.2s ease-in 1.2s forwards;
          animation: anime-logo3 0.2s ease-in 1.2s forwards;
}

@media all and (max-width: 639px) {
  #splash_logo .splash-logo2 {
    width: 40px;
    opacity: 0;
    -webkit-animation: anime-logo3 0.2s ease-in 0.4s forwards;
            animation: anime-logo3 0.2s ease-in 0.4s forwards;
  }
  #splash_logo .splash-logo3 {
    width: 40px;
    opacity: 0;
    -webkit-animation: anime-logo3 0.2s ease-in 0.8s forwards;
            animation: anime-logo3 0.2s ease-in 0.8s forwards;
  }
  #splash_logo .splash-logo4 {
    width: 40px;
    opacity: 0;
    -webkit-animation: anime-logo3 0.2s ease-in 1.2s forwards;
            animation: anime-logo3 0.2s ease-in 1.2s forwards;
  }
}

#splash_logo .logo3 {
  width: 280px;
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2 {
  display: none;
}

body.appear {
  background: transparent;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2 {
  display: block;
}

/*右に消えるエリア*/
body.appear .splashbg1 {
  -webkit-animation-name: PageAnime;
          animation-name: PageAnime;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 50%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  background-color: #888;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes PageAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes PageAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

/*左に消えるエリア*/
body.appear .splashbg2 {
  -webkit-animation-name: PageAnime2;
          animation-name: PageAnime2;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 50%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  background-color: #888;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes PageAnime2 {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes PageAnime2 {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#container {
  opacity: 0;
  /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  -webkit-animation-name: PageAnimeAppear;
          animation-name: PageAnimeAppear;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#container,
#footer {
  position: relative;
  /*#header-imgよりも配置を上にするためにrelativeをつける*/
  z-index: 3;
  /*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
  width: 300px;
}

@media all and (max-width: 639px) {
  #splash_logo svg {
    width: 200px;
  }
}

@-webkit-keyframes spinner-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.spinner-loader:not(:required) {
  -webkit-animation: spinner-loader 1500ms infinite linear;
  animation: spinner-loader 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
  display: inline-block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin: 1.5em;
  overflow: hidden;
  text-indent: 100%;
}

@-webkit-keyframes refreshing-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes refreshing-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.refreshing-loader:not(:required) {
  -webkit-animation: refreshing-loader 1000ms infinite linear;
  animation: refreshing-loader 1000ms infinite linear;
  border-radius: 2.4em;
  border: 0.4em solid #9ac;
  border-left-color: transparent;
  color: transparent;
  display: inline-block;
  font-size: 10px;
  line-height: 1.2;
  width: 3em;
  height: 3em;
  text-indent: 100%;
}

.refreshing-loader:not(:required):after {
  display: block;
  border: 0.5em solid transparent;
  border-top-color: #9ac;
  border-left-color: #9ac;
  content: '';
  width: 0;
  height: 0;
  overflow: hidden;
  margin-left: -0.2em;
  margin-top: 1em;
}

@-webkit-keyframes throbber-loader {
  0% {
    background: #e9e9e9;
  }
  10% {
    background: #888;
  }
  40% {
    background: #e9e9e9;
  }
}

@keyframes throbber-loader {
  0% {
    background: #e9e9e9;
  }
  10% {
    background: #888;
  }
  40% {
    background: #e9e9e9;
  }
}

/* :not(:required) hides these rules from IE9 and below */
.throbber-loader:not(:required) {
  -webkit-animation: throbber-loader 2000ms 300ms infinite ease-out;
  animation: throbber-loader 2000ms 300ms infinite ease-out;
  background: #e9e9e9;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.9em;
  height: 1.5em;
  margin: 0 1.6em;
}

.throbber-loader:not(:required):before, .throbber-loader:not(:required):after {
  background: #e9e9e9;
  content: '\x200B';
  display: inline-block;
  width: 0.9em;
  height: 1.5em;
  position: absolute;
  top: 0;
}

.throbber-loader:not(:required):before {
  -webkit-animation: throbber-loader 2000ms 150ms infinite ease-out;
  animation: throbber-loader 2000ms 150ms infinite ease-out;
  left: -1.6em;
}

.throbber-loader:not(:required):after {
  -webkit-animation: throbber-loader 2000ms 450ms infinite ease-out;
  animation: throbber-loader 2000ms 450ms infinite ease-out;
  right: -1.6em;
}

@-webkit-keyframes marumaru-loader {
  0% {
    background: #e9e9e9;
  }
  10% {
    background: #888;
  }
  40% {
    background: #e9e9e9;
  }
}

@keyframes marumaru-loader {
  0% {
    background: #e9e9e9;
  }
  10% {
    background: #888;
  }
  40% {
    background: #e9e9e9;
  }
}

/* :not(:required) hides these rules from IE9 and below */
.marumaru-loader:not(:required) {
  -webkit-animation: marumaru-loader 2000ms 300ms infinite ease-out;
  animation: marumaru-loader 2000ms 300ms infinite ease-out;
  background: #e9e9e9;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  margin: 0 1.6em;
}

.marumaru-loader:not(:required):before, .marumaru-loader:not(:required):after {
  background: #e9e9e9;
  content: '\x200B';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  position: absolute;
  top: 0;
}

.marumaru-loader:not(:required):before {
  -webkit-animation: marumaru-loader 2000ms 150ms infinite ease-out;
  animation: marumaru-loader 2000ms 150ms infinite ease-out;
  left: -1.6em;
}

.marumaru-loader:not(:required):after {
  -webkit-animation: marumaru-loader 2000ms 450ms infinite ease-out;
  animation: marumaru-loader 2000ms 450ms infinite ease-out;
  right: -1.6em;
}

@-webkit-keyframes heartbeat-loader {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

@keyframes heartbeat-loader {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat-loader:not(:required) {
  -webkit-animation: heartbeat-loader 1300ms ease 0s infinite normal;
  animation: heartbeat-loader 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.heartbeat-loader:not(:required):after {
  position: absolute;
  content: "";
  background: #e87;
}

.heartbeat-loader:not(:required):before {
  position: absolute;
  content: "";
  background: #e87;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  top: 12px;
  left: 0;
  width: 36px;
  height: 24px;
}

.heartbeat-loader:not(:required):after {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
  left: 12px;
  width: 24px;
  height: 13px;
}

@-webkit-keyframes gauge-loader {
  0% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

@keyframes gauge-loader {
  0% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.gauge-loader:not(:required) {
  background: #6ca;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  display: inline-block;
  width: 64px;
  height: 32px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
}

.gauge-loader:not(:required)::before {
  -webkit-animation: gauge-loader 4000ms infinite ease;
  animation: gauge-loader 4000ms infinite ease;
  background: white;
  border-radius: 2px;
  content: '';
  position: absolute;
  left: 30px;
  top: 5.33333px;
  width: 4px;
  height: 26.66667px;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.gauge-loader:not(:required)::after {
  content: '';
  background: white;
  border-radius: 8px;
  position: absolute;
  left: 25.6px;
  top: 25.6px;
  width: 12.8px;
  height: 12.8px;
}

@-webkit-keyframes timer-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes timer-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.timer-loader:not(:required) {
  border: 6px solid #c8d;
  border-radius: 24px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  width: 48px;
  height: 48px;
}

.timer-loader:not(:required)::before {
  -webkit-animation: timer-loader 1250ms infinite linear;
  animation: timer-loader 1250ms infinite linear;
  -webkit-transform-origin: 3px 3px;
  transform-origin: 3px 3px;
  background: #c8d;
  border-radius: 3px;
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 19.2px;
  left: 15px;
  top: 15px;
}

.timer-loader:not(:required)::after {
  -webkit-animation: timer-loader 15000ms infinite linear;
  animation: timer-loader 15000ms infinite linear;
  -webkit-transform-origin: 3px 3px;
  transform-origin: 3px 3px;
  background: #c8d;
  border-radius: 3px;
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 16px;
  left: 15px;
  top: 15px;
}

@-webkit-keyframes three-quarters-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes three-quarters-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.three-quarters-loader:not(:required) {
  -webkit-animation: three-quarters-loader 1250ms infinite linear;
  animation: three-quarters-loader 1250ms infinite linear;
  border: 8px solid #38e;
  border-right-color: transparent;
  border-radius: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
}

@-webkit-keyframes wobblebar-loader {
  0% {
    left: 4px;
  }
  3% {
    left: 104px;
  }
  6% {
    left: 4px;
  }
  9% {
    left: 104px;
  }
  12% {
    left: 4px;
  }
  15% {
    left: 104px;
  }
  18% {
    left: 32px;
  }
  27% {
    left: 32px;
  }
  30% {
    left: 104px;
  }
  33% {
    left: 4px;
  }
  36% {
    left: 104px;
  }
  39% {
    left: 4px;
  }
  42% {
    left: 104px;
  }
  45% {
    left: 4px;
  }
  48% {
    left: 104px;
  }
  51% {
    left: 52px;
  }
  63% {
    left: 52px;
  }
  66% {
    left: 4px;
  }
  69% {
    left: 104px;
  }
  72% {
    left: 4px;
  }
  75% {
    left: 104px;
  }
  78% {
    left: 4px;
  }
  81% {
    left: 104px;
  }
  84% {
    left: 72px;
  }
  94% {
    left: 72px;
  }
  97% {
    left: 104px;
  }
}

@keyframes wobblebar-loader {
  0% {
    left: 4px;
  }
  3% {
    left: 104px;
  }
  6% {
    left: 4px;
  }
  9% {
    left: 104px;
  }
  12% {
    left: 4px;
  }
  15% {
    left: 104px;
  }
  18% {
    left: 32px;
  }
  27% {
    left: 32px;
  }
  30% {
    left: 104px;
  }
  33% {
    left: 4px;
  }
  36% {
    left: 104px;
  }
  39% {
    left: 4px;
  }
  42% {
    left: 104px;
  }
  45% {
    left: 4px;
  }
  48% {
    left: 104px;
  }
  51% {
    left: 52px;
  }
  63% {
    left: 52px;
  }
  66% {
    left: 4px;
  }
  69% {
    left: 104px;
  }
  72% {
    left: 4px;
  }
  75% {
    left: 104px;
  }
  78% {
    left: 4px;
  }
  81% {
    left: 104px;
  }
  84% {
    left: 72px;
  }
  94% {
    left: 72px;
  }
  97% {
    left: 104px;
  }
}

/* :not(:required) hides this rule from IE9 and below */
.wobblebar-loader:not(:required) {
  background: #a9d;
  border-radius: 10.66667px;
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
  width: 128px;
  height: 21.33333px;
  position: relative;
}

.wobblebar-loader:not(:required)::after {
  -webkit-animation: wobblebar-loader 15000ms infinite ease;
  animation: wobblebar-loader 15000ms infinite ease;
  background: white;
  display: block;
  border-radius: 7.11111px;
  content: '';
  position: absolute;
  top: 3.55556px;
  left: 4px;
  width: 21.33333px;
  height: 14.22222px;
}

@-webkit-keyframes atebits-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  3% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  10% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  13% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  20% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  23% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  30% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  33% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  43% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  53% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  60% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  63% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  70% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  73% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  83% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  90% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  93% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes atebits-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  3% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  10% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  13% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  20% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  23% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  30% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  33% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  43% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  53% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  60% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  63% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  70% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  73% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  83% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  90% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  93% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.atebits-loader:not(:required) {
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 9px;
  height: 9px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
  box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
  -webkit-animation: atebits-loader 8s infinite ease-in-out;
  animation: atebits-loader 8s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes whirly-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes whirly-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.whirly-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 100%;
  -webkit-box-shadow: #e66 0px 26px 0 6px, #e66 0.90971px 26.05079px 0 5.93333px, #e66 1.82297px 26.06967px 0 5.86667px, #e66 2.73865px 26.05647px 0 5.8px, #e66 3.65561px 26.01104px 0 5.73333px, #e66 4.57274px 25.93327px 0 5.66667px, #e66 5.48887px 25.8231px 0 5.6px, #e66 6.40287px 25.68049px 0 5.53333px, #e66 7.31358px 25.50548px 0 5.46667px, #e66 8.21985px 25.2981px 0 5.4px, #e66 9.12054px 25.05847px 0 5.33333px, #e66 10.01448px 24.78672px 0 5.26667px, #e66 10.90054px 24.48302px 0 5.2px, #e66 11.77757px 24.1476px 0 5.13333px, #e66 12.64443px 23.78072px 0 5.06667px, #e66 13.5px 23.38269px 0 5px, #e66 14.34315px 22.95384px 0 4.93333px, #e66 15.17277px 22.49455px 0 4.86667px, #e66 15.98776px 22.00526px 0 4.8px, #e66 16.78704px 21.48643px 0 4.73333px, #e66 17.56953px 20.93855px 0 4.66667px, #e66 18.33418px 20.36217px 0 4.6px, #e66 19.07995px 19.75787px 0 4.53333px, #e66 19.80582px 19.12626px 0 4.46667px, #e66 20.5108px 18.468px 0 4.4px, #e66 21.1939px 17.78379px 0 4.33333px, #e66 21.85416px 17.07434px 0 4.26667px, #e66 22.49067px 16.34043px 0 4.2px, #e66 23.10251px 15.58284px 0 4.13333px, #e66 23.68881px 14.80241px 0 4.06667px, #e66 24.24871px 14.0px 0 4px, #e66 24.7814px 13.1765px 0 3.93333px, #e66 25.28607px 12.33284px 0 3.86667px, #e66 25.76198px 11.46997px 0 3.8px, #e66 26.2084px 10.58888px 0 3.73333px, #e66 26.62462px 9.69057px 0 3.66667px, #e66 27.01001px 8.77608px 0 3.6px, #e66 27.36392px 7.84648px 0 3.53333px, #e66 27.68577px 6.90284px 0 3.46667px, #e66 27.97502px 5.94627px 0 3.4px, #e66 28.23116px 4.97791px 0 3.33333px, #e66 28.4537px 3.99891px 0 3.26667px, #e66 28.64223px 3.01042px 0 3.2px, #e66 28.79635px 2.01364px 0 3.13333px, #e66 28.91571px 1.00976px 0 3.06667px, #e66 29px 0.0px 0 3px, #e66 29.04896px -1.01441px 0 2.93333px, #e66 29.06237px -2.03224px 0 2.86667px, #e66 29.04004px -3.05223px 0 2.8px, #e66 28.98185px -4.07313px 0 2.73333px, #e66 28.88769px -5.09368px 0 2.66667px, #e66 28.75754px -6.1126px 0 2.6px, #e66 28.59138px -7.12863px 0 2.53333px, #e66 28.38926px -8.14049px 0 2.46667px, #e66 28.15127px -9.1469px 0 2.4px, #e66 27.87755px -10.1466px 0 2.33333px, #e66 27.56827px -11.1383px 0 2.26667px, #e66 27.22365px -12.12075px 0 2.2px, #e66 26.84398px -13.09268px 0 2.13333px, #e66 26.42956px -14.05285px 0 2.06667px, #e66 25.98076px -15.0px 0 2px, #e66 25.49798px -15.93291px 0 1.93333px, #e66 24.98167px -16.85035px 0 1.86667px, #e66 24.43231px -17.75111px 0 1.8px, #e66 23.85046px -18.63402px 0 1.73333px, #e66 23.23668px -19.49789px 0 1.66667px, #e66 22.5916px -20.34157px 0 1.6px, #e66 21.91589px -21.16393px 0 1.53333px, #e66 21.21024px -21.96384px 0 1.46667px, #e66 20.4754px -22.74023px 0 1.4px, #e66 19.71215px -23.49203px 0 1.33333px, #e66 18.92133px -24.2182px 0 1.26667px, #e66 18.10379px -24.91772px 0 1.2px, #e66 17.26042px -25.58963px 0 1.13333px, #e66 16.39217px -26.23295px 0 1.06667px, #e66 15.5px -26.84679px 0 1px, #e66 14.58492px -27.43024px 0 0.93333px, #e66 13.64796px -27.98245px 0 0.86667px, #e66 12.69018px -28.50262px 0 0.8px, #e66 11.7127px -28.98995px 0 0.73333px, #e66 10.71663px -29.4437px 0 0.66667px, #e66 9.70313px -29.86317px 0 0.6px, #e66 8.67339px -30.2477px 0 0.53333px, #e66 7.6286px -30.59666px 0 0.46667px, #e66 6.57001px -30.90946px 0 0.4px, #e66 5.49886px -31.18558px 0 0.33333px, #e66 4.41643px -31.42451px 0 0.26667px, #e66 3.32401px -31.6258px 0 0.2px, #e66 2.22291px -31.78904px 0 0.13333px, #e66 1.11446px -31.91388px 0 0.06667px, #e66 0.0px -32px 0 0px, #e66 -1.11911px -32.04713px 0 -0.06667px, #e66 -2.24151px -32.05506px 0 -0.13333px, #e66 -3.36582px -32.02361px 0 -0.2px, #e66 -4.49065px -31.95265px 0 -0.26667px, #e66 -5.61462px -31.84212px 0 -0.33333px, #e66 -6.73634px -31.69198px 0 -0.4px, #e66 -7.8544px -31.50227px 0 -0.46667px, #e66 -8.9674px -31.27305px 0 -0.53333px, #e66 -10.07395px -31.00444px 0 -0.6px, #e66 -11.17266px -30.69663px 0 -0.66667px, #e66 -12.26212px -30.34982px 0 -0.73333px, #e66 -13.34096px -29.96429px 0 -0.8px, #e66 -14.4078px -29.54036px 0 -0.86667px, #e66 -15.46126px -29.07841px 0 -0.93333px, #e66 -16.5px -28.57884px 0 -1px, #e66 -17.52266px -28.04212px 0 -1.06667px, #e66 -18.52792px -27.46878px 0 -1.13333px, #e66 -19.51447px -26.85936px 0 -1.2px, #e66 -20.48101px -26.21449px 0 -1.26667px, #e66 -21.42625px -25.53481px 0 -1.33333px, #e66 -22.34896px -24.82104px 0 -1.4px, #e66 -23.2479px -24.07391px 0 -1.46667px, #e66 -24.12186px -23.29421px 0 -1.53333px, #e66 -24.96967px -22.48279px 0 -1.6px, #e66 -25.79016px -21.64052px 0 -1.66667px, #e66 -26.58223px -20.76831px 0 -1.73333px, #e66 -27.34477px -19.86714px 0 -1.8px, #e66 -28.07674px -18.938px 0 -1.86667px, #e66 -28.7771px -17.98193px 0 -1.93333px, #e66 -29.44486px -17.0px 0 -2px, #e66 -30.07908px -15.99333px 0 -2.06667px, #e66 -30.67884px -14.96307px 0 -2.13333px, #e66 -31.24325px -13.91039px 0 -2.2px, #e66 -31.7715px -12.83652px 0 -2.26667px, #e66 -32.26278px -11.74269px 0 -2.33333px, #e66 -32.71634px -10.63018px 0 -2.4px, #e66 -33.13149px -9.5003px 0 -2.46667px, #e66 -33.50755px -8.35437px 0 -2.53333px, #e66 -33.84391px -7.19374px 0 -2.6px, #e66 -34.14px -6.0198px 0 -2.66667px, #e66 -34.39531px -4.83395px 0 -2.73333px, #e66 -34.60936px -3.63759px 0 -2.8px, #e66 -34.78173px -2.43218px 0 -2.86667px, #e66 -34.91205px -1.21916px 0 -2.93333px, #e66 -35px 0.0px 0 -3px, #e66 -35.04531px 1.22381px 0 -3.06667px, #e66 -35.04775px 2.45078px 0 -3.13333px, #e66 -35.00717px 3.6794px 0 -3.2px, #e66 -34.92345px 4.90817px 0 -3.26667px, #e66 -34.79654px 6.13557px 0 -3.33333px, #e66 -34.62643px 7.36007px 0 -3.4px, #e66 -34.41316px 8.58016px 0 -3.46667px, #e66 -34.15683px 9.79431px 0 -3.53333px, #e66 -33.85761px 11.001px 0 -3.6px, #e66 -33.5157px 12.19872px 0 -3.66667px, #e66 -33.13137px 13.38594px 0 -3.73333px, #e66 -32.70493px 14.56117px 0 -3.8px, #e66 -32.23675px 15.72291px 0 -3.86667px, #e66 -31.72725px 16.86968px 0 -3.93333px, #e66 -31.17691px 18px 0 -4px, #e66 -30.58627px 19.11242px 0 -4.06667px, #e66 -29.95589px 20.2055px 0 -4.13333px, #e66 -29.28642px 21.27783px 0 -4.2px, #e66 -28.57852px 22.32799px 0 -4.26667px, #e66 -27.83295px 23.35462px 0 -4.33333px, #e66 -27.05047px 24.35635px 0 -4.4px, #e66 -26.23192px 25.33188px 0 -4.46667px, #e66 -25.37819px 26.27988px 0 -4.53333px, #e66 -24.49018px 27.1991px 0 -4.6px, #e66 -23.56888px 28.0883px 0 -4.66667px, #e66 -22.6153px 28.94626px 0 -4.73333px, #e66 -21.6305px 29.77183px 0 -4.8px, #e66 -20.61558px 30.56385px 0 -4.86667px, #e66 -19.57168px 31.32124px 0 -4.93333px, #e66 -18.5px 32.04294px 0 -5px, #e66 -17.40175px 32.72792px 0 -5.06667px, #e66 -16.27818px 33.37522px 0 -5.13333px, #e66 -15.1306px 33.98389px 0 -5.2px, #e66 -13.96034px 34.55305px 0 -5.26667px, #e66 -12.76875px 35.08186px 0 -5.33333px, #e66 -11.55724px 35.56951px 0 -5.4px, #e66 -10.32721px 36.01527px 0 -5.46667px, #e66 -9.08014px 36.41843px 0 -5.53333px, #e66 -7.81748px 36.77835px 0 -5.6px, #e66 -6.54075px 37.09443px 0 -5.66667px, #e66 -5.25147px 37.36612px 0 -5.73333px, #e66 -3.95118px 37.59293px 0 -5.8px, #e66 -2.64145px 37.77443px 0 -5.86667px, #e66 -1.32385px 37.91023px 0 -5.93333px;
  box-shadow: #e66 0px 26px 0 6px, #e66 0.90971px 26.05079px 0 5.93333px, #e66 1.82297px 26.06967px 0 5.86667px, #e66 2.73865px 26.05647px 0 5.8px, #e66 3.65561px 26.01104px 0 5.73333px, #e66 4.57274px 25.93327px 0 5.66667px, #e66 5.48887px 25.8231px 0 5.6px, #e66 6.40287px 25.68049px 0 5.53333px, #e66 7.31358px 25.50548px 0 5.46667px, #e66 8.21985px 25.2981px 0 5.4px, #e66 9.12054px 25.05847px 0 5.33333px, #e66 10.01448px 24.78672px 0 5.26667px, #e66 10.90054px 24.48302px 0 5.2px, #e66 11.77757px 24.1476px 0 5.13333px, #e66 12.64443px 23.78072px 0 5.06667px, #e66 13.5px 23.38269px 0 5px, #e66 14.34315px 22.95384px 0 4.93333px, #e66 15.17277px 22.49455px 0 4.86667px, #e66 15.98776px 22.00526px 0 4.8px, #e66 16.78704px 21.48643px 0 4.73333px, #e66 17.56953px 20.93855px 0 4.66667px, #e66 18.33418px 20.36217px 0 4.6px, #e66 19.07995px 19.75787px 0 4.53333px, #e66 19.80582px 19.12626px 0 4.46667px, #e66 20.5108px 18.468px 0 4.4px, #e66 21.1939px 17.78379px 0 4.33333px, #e66 21.85416px 17.07434px 0 4.26667px, #e66 22.49067px 16.34043px 0 4.2px, #e66 23.10251px 15.58284px 0 4.13333px, #e66 23.68881px 14.80241px 0 4.06667px, #e66 24.24871px 14.0px 0 4px, #e66 24.7814px 13.1765px 0 3.93333px, #e66 25.28607px 12.33284px 0 3.86667px, #e66 25.76198px 11.46997px 0 3.8px, #e66 26.2084px 10.58888px 0 3.73333px, #e66 26.62462px 9.69057px 0 3.66667px, #e66 27.01001px 8.77608px 0 3.6px, #e66 27.36392px 7.84648px 0 3.53333px, #e66 27.68577px 6.90284px 0 3.46667px, #e66 27.97502px 5.94627px 0 3.4px, #e66 28.23116px 4.97791px 0 3.33333px, #e66 28.4537px 3.99891px 0 3.26667px, #e66 28.64223px 3.01042px 0 3.2px, #e66 28.79635px 2.01364px 0 3.13333px, #e66 28.91571px 1.00976px 0 3.06667px, #e66 29px 0.0px 0 3px, #e66 29.04896px -1.01441px 0 2.93333px, #e66 29.06237px -2.03224px 0 2.86667px, #e66 29.04004px -3.05223px 0 2.8px, #e66 28.98185px -4.07313px 0 2.73333px, #e66 28.88769px -5.09368px 0 2.66667px, #e66 28.75754px -6.1126px 0 2.6px, #e66 28.59138px -7.12863px 0 2.53333px, #e66 28.38926px -8.14049px 0 2.46667px, #e66 28.15127px -9.1469px 0 2.4px, #e66 27.87755px -10.1466px 0 2.33333px, #e66 27.56827px -11.1383px 0 2.26667px, #e66 27.22365px -12.12075px 0 2.2px, #e66 26.84398px -13.09268px 0 2.13333px, #e66 26.42956px -14.05285px 0 2.06667px, #e66 25.98076px -15.0px 0 2px, #e66 25.49798px -15.93291px 0 1.93333px, #e66 24.98167px -16.85035px 0 1.86667px, #e66 24.43231px -17.75111px 0 1.8px, #e66 23.85046px -18.63402px 0 1.73333px, #e66 23.23668px -19.49789px 0 1.66667px, #e66 22.5916px -20.34157px 0 1.6px, #e66 21.91589px -21.16393px 0 1.53333px, #e66 21.21024px -21.96384px 0 1.46667px, #e66 20.4754px -22.74023px 0 1.4px, #e66 19.71215px -23.49203px 0 1.33333px, #e66 18.92133px -24.2182px 0 1.26667px, #e66 18.10379px -24.91772px 0 1.2px, #e66 17.26042px -25.58963px 0 1.13333px, #e66 16.39217px -26.23295px 0 1.06667px, #e66 15.5px -26.84679px 0 1px, #e66 14.58492px -27.43024px 0 0.93333px, #e66 13.64796px -27.98245px 0 0.86667px, #e66 12.69018px -28.50262px 0 0.8px, #e66 11.7127px -28.98995px 0 0.73333px, #e66 10.71663px -29.4437px 0 0.66667px, #e66 9.70313px -29.86317px 0 0.6px, #e66 8.67339px -30.2477px 0 0.53333px, #e66 7.6286px -30.59666px 0 0.46667px, #e66 6.57001px -30.90946px 0 0.4px, #e66 5.49886px -31.18558px 0 0.33333px, #e66 4.41643px -31.42451px 0 0.26667px, #e66 3.32401px -31.6258px 0 0.2px, #e66 2.22291px -31.78904px 0 0.13333px, #e66 1.11446px -31.91388px 0 0.06667px, #e66 0.0px -32px 0 0px, #e66 -1.11911px -32.04713px 0 -0.06667px, #e66 -2.24151px -32.05506px 0 -0.13333px, #e66 -3.36582px -32.02361px 0 -0.2px, #e66 -4.49065px -31.95265px 0 -0.26667px, #e66 -5.61462px -31.84212px 0 -0.33333px, #e66 -6.73634px -31.69198px 0 -0.4px, #e66 -7.8544px -31.50227px 0 -0.46667px, #e66 -8.9674px -31.27305px 0 -0.53333px, #e66 -10.07395px -31.00444px 0 -0.6px, #e66 -11.17266px -30.69663px 0 -0.66667px, #e66 -12.26212px -30.34982px 0 -0.73333px, #e66 -13.34096px -29.96429px 0 -0.8px, #e66 -14.4078px -29.54036px 0 -0.86667px, #e66 -15.46126px -29.07841px 0 -0.93333px, #e66 -16.5px -28.57884px 0 -1px, #e66 -17.52266px -28.04212px 0 -1.06667px, #e66 -18.52792px -27.46878px 0 -1.13333px, #e66 -19.51447px -26.85936px 0 -1.2px, #e66 -20.48101px -26.21449px 0 -1.26667px, #e66 -21.42625px -25.53481px 0 -1.33333px, #e66 -22.34896px -24.82104px 0 -1.4px, #e66 -23.2479px -24.07391px 0 -1.46667px, #e66 -24.12186px -23.29421px 0 -1.53333px, #e66 -24.96967px -22.48279px 0 -1.6px, #e66 -25.79016px -21.64052px 0 -1.66667px, #e66 -26.58223px -20.76831px 0 -1.73333px, #e66 -27.34477px -19.86714px 0 -1.8px, #e66 -28.07674px -18.938px 0 -1.86667px, #e66 -28.7771px -17.98193px 0 -1.93333px, #e66 -29.44486px -17.0px 0 -2px, #e66 -30.07908px -15.99333px 0 -2.06667px, #e66 -30.67884px -14.96307px 0 -2.13333px, #e66 -31.24325px -13.91039px 0 -2.2px, #e66 -31.7715px -12.83652px 0 -2.26667px, #e66 -32.26278px -11.74269px 0 -2.33333px, #e66 -32.71634px -10.63018px 0 -2.4px, #e66 -33.13149px -9.5003px 0 -2.46667px, #e66 -33.50755px -8.35437px 0 -2.53333px, #e66 -33.84391px -7.19374px 0 -2.6px, #e66 -34.14px -6.0198px 0 -2.66667px, #e66 -34.39531px -4.83395px 0 -2.73333px, #e66 -34.60936px -3.63759px 0 -2.8px, #e66 -34.78173px -2.43218px 0 -2.86667px, #e66 -34.91205px -1.21916px 0 -2.93333px, #e66 -35px 0.0px 0 -3px, #e66 -35.04531px 1.22381px 0 -3.06667px, #e66 -35.04775px 2.45078px 0 -3.13333px, #e66 -35.00717px 3.6794px 0 -3.2px, #e66 -34.92345px 4.90817px 0 -3.26667px, #e66 -34.79654px 6.13557px 0 -3.33333px, #e66 -34.62643px 7.36007px 0 -3.4px, #e66 -34.41316px 8.58016px 0 -3.46667px, #e66 -34.15683px 9.79431px 0 -3.53333px, #e66 -33.85761px 11.001px 0 -3.6px, #e66 -33.5157px 12.19872px 0 -3.66667px, #e66 -33.13137px 13.38594px 0 -3.73333px, #e66 -32.70493px 14.56117px 0 -3.8px, #e66 -32.23675px 15.72291px 0 -3.86667px, #e66 -31.72725px 16.86968px 0 -3.93333px, #e66 -31.17691px 18px 0 -4px, #e66 -30.58627px 19.11242px 0 -4.06667px, #e66 -29.95589px 20.2055px 0 -4.13333px, #e66 -29.28642px 21.27783px 0 -4.2px, #e66 -28.57852px 22.32799px 0 -4.26667px, #e66 -27.83295px 23.35462px 0 -4.33333px, #e66 -27.05047px 24.35635px 0 -4.4px, #e66 -26.23192px 25.33188px 0 -4.46667px, #e66 -25.37819px 26.27988px 0 -4.53333px, #e66 -24.49018px 27.1991px 0 -4.6px, #e66 -23.56888px 28.0883px 0 -4.66667px, #e66 -22.6153px 28.94626px 0 -4.73333px, #e66 -21.6305px 29.77183px 0 -4.8px, #e66 -20.61558px 30.56385px 0 -4.86667px, #e66 -19.57168px 31.32124px 0 -4.93333px, #e66 -18.5px 32.04294px 0 -5px, #e66 -17.40175px 32.72792px 0 -5.06667px, #e66 -16.27818px 33.37522px 0 -5.13333px, #e66 -15.1306px 33.98389px 0 -5.2px, #e66 -13.96034px 34.55305px 0 -5.26667px, #e66 -12.76875px 35.08186px 0 -5.33333px, #e66 -11.55724px 35.56951px 0 -5.4px, #e66 -10.32721px 36.01527px 0 -5.46667px, #e66 -9.08014px 36.41843px 0 -5.53333px, #e66 -7.81748px 36.77835px 0 -5.6px, #e66 -6.54075px 37.09443px 0 -5.66667px, #e66 -5.25147px 37.36612px 0 -5.73333px, #e66 -3.95118px 37.59293px 0 -5.8px, #e66 -2.64145px 37.77443px 0 -5.86667px, #e66 -1.32385px 37.91023px 0 -5.93333px;
  -webkit-animation: whirly-loader 1.25s infinite linear;
  animation: whirly-loader 1.25s infinite linear;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes flower-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
  }
  50% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
  }
}

@keyframes flower-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
  }
  50% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
  }
}

/* :not(:required) hides this rule from IE9 and below */
.flower-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #e96;
  border-radius: 100%;
  -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
  box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
  -webkit-animation: flower-loader 5s infinite ease-in-out;
  animation: flower-loader 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes dots-loader {
  0% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  8.33% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  16.67% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  25% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  33.33% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
  }
  41.67% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  50% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  58.33% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  66.67% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  75% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  83.33% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
  }
  91.67% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  100% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
}

@keyframes dots-loader {
  0% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  8.33% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  16.67% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  25% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  33.33% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
  }
  41.67% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  50% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  58.33% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  66.67% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  75% {
    -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
  }
  83.33% {
    -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
    box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
  }
  91.67% {
    -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
  100% {
    -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  }
}

/* :not(:required) hides this rule from IE9 and below */
.dots-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: transparent;
  border-radius: 100%;
  -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  -webkit-animation: dots-loader 5s infinite ease-in-out;
  animation: dots-loader 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes circles-loader {
  0% {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@keyframes circles-loader {
  0% {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.circles-loader:not(:required) {
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: rgba(255, 204, 51, 0.9);
  border-radius: 100%;
  -webkit-animation: circles-loader 3s infinite ease-in-out;
  animation: circles-loader 3s infinite ease-in-out;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.circles-loader:not(:required)::before {
  background: rgba(255, 102, 0, 0.6);
  border-radius: 100%;
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: -10.82532px;
}

.circles-loader:not(:required)::after {
  background: rgba(255, 51, 0, 0.4);
  border-radius: 100%;
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: 10.82532px;
}

@-webkit-keyframes plus-loader-top {
  2.5% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  27.5% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-loader-top {
  2.5% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  27.5% {
    background: #fc6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    background: #4ae;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    background: #f86;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-webkit-keyframes plus-loader-bottom {
  0% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  50% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  75% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  100% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-loader-bottom {
  0% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  50% {
    background: #fc6;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  75% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  100% {
    background: #4ae;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-webkit-keyframes plus-loader-background {
  0% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  25% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  27.5% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  75% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  77.5% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
  100% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-loader-background {
  0% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  25% {
    background: #f86;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  27.5% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  50% {
    background: #6d7;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  52.5% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  75% {
    background: #6d7;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
  77.5% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
  100% {
    background: #f86;
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

/* :not(:required) hides this rule from IE9 and below */
.plus-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #f86;
  border-radius: 24px;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: plus-loader-background 3s infinite ease-in-out;
  animation: plus-loader-background 3s infinite ease-in-out;
}

.plus-loader:not(:required)::after {
  background: #f86;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: plus-loader-top 3s infinite linear;
  animation: plus-loader-top 3s infinite linear;
}

.plus-loader:not(:required)::before {
  background: #fc6;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: plus-loader-bottom 3s infinite linear;
  animation: plus-loader-bottom 3s infinite linear;
}

@-webkit-keyframes hexdots-loader {
  0% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  8.33% {
    -webkit-box-shadow: #888 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  16.67% {
    -webkit-box-shadow: #888 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  25% {
    -webkit-box-shadow: #888 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  33.33% {
    -webkit-box-shadow: #888 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  41.67% {
    -webkit-box-shadow: #888 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
  }
  50% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
  }
  58.33% {
    -webkit-box-shadow: #888 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
    box-shadow: #888 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
  }
  66.67% {
    -webkit-box-shadow: #888 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
    box-shadow: #888 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
  }
  75% {
    -webkit-box-shadow: #888 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
    box-shadow: #888 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
  }
  83.33% {
    -webkit-box-shadow: #888 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
    box-shadow: #888 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
  }
  91.67% {
    -webkit-box-shadow: #888 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  100% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
}

@keyframes hexdots-loader {
  0% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  8.33% {
    -webkit-box-shadow: #888 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  16.67% {
    -webkit-box-shadow: #888 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  25% {
    -webkit-box-shadow: #888 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  33.33% {
    -webkit-box-shadow: #888 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  41.67% {
    -webkit-box-shadow: #888 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
  }
  50% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
  }
  58.33% {
    -webkit-box-shadow: #888 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
    box-shadow: #888 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
  }
  66.67% {
    -webkit-box-shadow: #888 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
    box-shadow: #888 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
  }
  75% {
    -webkit-box-shadow: #888 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
    box-shadow: #888 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
  }
  83.33% {
    -webkit-box-shadow: #888 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
    box-shadow: #888 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
  }
  91.67% {
    -webkit-box-shadow: #888 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
  100% {
    -webkit-box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
    box-shadow: #888 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  }
}

/* :not(:required) hides this rule from IE9 and below */
.hexdots-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: transparent;
  border-radius: 100%;
  -webkit-box-shadow: #888 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
  box-shadow: #888 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
  -webkit-animation: hexdots-loader 5s infinite ease-in-out;
  animation: hexdots-loader 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

/* :not(:required) hides this rule from IE9 and below */
.inner-circles-loader:not(:required) {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: rgba(25, 165, 152, 0.5);
  border-radius: 50%;
  overflow: hidden;
  text-indent: -9999px;
  /* Hides inner circles outside base circle at safari */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
  content: '';
  position: absolute;
  top: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.inner-circles-loader:not(:required):before {
  -webkit-animation: inner-circles-loader 3s infinite;
  animation: inner-circles-loader 3s infinite;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  left: 0;
  background: #c7efcf;
}

.inner-circles-loader:not(:required):after {
  -webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
  animation: inner-circles-loader 3s 0.2s reverse infinite;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  right: 0;
  background: #eef5db;
}

@-webkit-keyframes inner-circles-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes inner-circles-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.pulse-loader:not(:required) {
  display: inline-block;
  width: 50px;
  height: 50px;
  -webkit-animation: pulse-loader 0.7s linear infinite alternate;
  animation: pulse-loader 0.7s linear infinite alternate;
  border: 0px solid #888;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 50px;
}

@-webkit-keyframes pulse-loader {
  0% {
    -webkit-box-shadow: #888 0 0 0px 20px;
    box-shadow: #888 0 0 0px 20px;
  }
  40% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  100% {
    -webkit-box-shadow: #888 0 0 0px 25px inset;
    box-shadow: #888 0 0 0px 25px inset;
  }
}

@keyframes pulse-loader {
  0% {
    -webkit-box-shadow: #888 0 0 0px 20px;
    box-shadow: #888 0 0 0px 20px;
  }
  40% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  100% {
    -webkit-box-shadow: #888 0 0 0px 25px inset;
    box-shadow: #888 0 0 0px 25px inset;
  }
}

.row {
  margin-top: 50px;
}

.col-sm-2 {
  height: 100px;
}

/* header
----------------------------------*/
@-webkit-keyframes hd-scrolled {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes hd-scrolled {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.gradient {
  background: linear-gradient(45deg, #ccc, #0083de, #eee);
  background-size: 600% 600%;
  -webkit-animation: anim-gradient 10s ease infinite;
          animation: anim-gradient 10s ease infinite;
}

@-webkit-keyframes anim-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes anim-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.logo_name {
  color: #888;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

.logo_name .txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
}

.logo_name .img {
  width: 40px;
  height: 40px;
}

.logo_name.logo1 .eng,
.logo_name.logo1 .ja {
  color: #fff;
}

.logo_name .eng {
  font-size: 6rem;
  display: block;
  line-height: 0.8;
  color: #888;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.logo_name .eng:first-letter {
  text-transform: uppercase;
}

.logo_name .ja {
  font-size: 1.4rem;
  line-height: 1;
  color: #333;
}

@media all and (max-width: 639px) {
  .logo_name .eng {
    font-size: 3rem;
  }
  .logo_name .ja {
    font-size: 1.1rem;
  }
}

#top {
  position: relative;
}

#header_box {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 10;
  width: 400px;
  height: auto;
  background-color: #e6e6e6;
  -webkit-box-shadow: rgba(17, 17, 17, 0.2) 0 0 5px 5px;
          box-shadow: rgba(17, 17, 17, 0.2) 0 0 5px 5px;
  padding: 40px;
}

#header_box #logo {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 20px;
}

#header_box .header_box_tel {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 8px 0;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

#header_box .header_box_tel a {
  font-size: 3.0rem;
  line-height: 1.2;
  color: #888;
}

#header_box .header_box_tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
  font-size: 80%;
}

#header_box #header_box_nav {
  width: 90%;
  margin: 20px auto;
}

#header_box #header_box_nav li {
  padding: 10px 0;
  color: #888;
  position: relative;
  border-bottom: 1px solid rgba(136, 136, 136, 0.3);
}

#header_box #header_box_nav li.before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -100px;
  width: 20px;
  height: 20px;
}

#header_box #header_box_nav li a {
  display: block;
  position: relative;
  padding: 0;
  color: #888;
  font-size: 1.9rem;
  font-weight: bold;
}

#header_box #header_box_nav li a span {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #888;
  position: relative;
  letter-spacing: 0.1rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#header_box #header_box_nav li a span:first-letter {
  text-transform: uppercase;
}

#header_box #header_box_nav li a:before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 0%;
  border-bottom: 2px solid #888;
  -webkit-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}

#header_box #header_box_nav li:hover a,
#header_box #header_box_nav li.active a {
  color: #888;
}

#header_box #header_box_nav li:hover a:before,
#header_box #header_box_nav li.active a:before {
  content: "";
  width: 100%;
  border-bottom: 2px solid #888;
}

#header_box #header_box_nav li:hover a span,
#header_box #header_box_nav li.active a span {
  color: #fef7f7;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

@media all and (max-width: 896px) {
  #header_box {
    width: 300px;
    padding: 20px;
  }
}

@media all and (max-width: 639px) {
  #header_box {
    width: 140px;
    padding: 10px;
    top: 10px;
    left: 10px;
  }
  #header_box #logo {
    padding: 10px 0;
    margin-bottom: 0px;
  }
  #header_box .header_box_tel {
    display: none;
  }
  #header_box #header_box_nav {
    display: none;
  }
}

#header {
  width: 100%;
  position: absolute;
  z-index: 90;
  top: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  padding: 5px 0 0;
}

@media all and (max-width: 639px) {
  #header {
    padding: 0;
  }
}

#header.is-fixed {
  margin: 0px auto;
  right: 0;
  position: fixed;
  padding: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  background-color: #fff;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 2px 10px 2px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 2px 10px 2px;
}

#header.is-fixed:before {
  width: 140%;
}

#header.is-fixed .head-right_tel span {
  color: #555;
}

#header.is-fixed .head-right_tel a {
  color: #555;
  position: relative;
}

#header.is-fixed .head-right_tel a:hover {
  color: #888;
}

#header.is-fixed .inner #logo {
  width: 310px;
  position: relative;
}

#header.is-fixed .inner #logo img {
  -webkit-filter: none;
          filter: none;
}

#header.is-fixed .inner #logo .logo1 {
  display: none;
}

#header.is-fixed .inner #logo .logo2 {
  display: block;
}

@media all and (max-width: 639px) {
  #header.is-fixed .inner #logo {
    width: 260px;
  }
}

#header.is-hide {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

#header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 5% 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

#header .inner.bar:before {
  position: absolute;
  content: "";
  width: 90%;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: 0 auto;
  background-color: #fff;
}

@media all and (max-width: 1100px) {
  #header .inner.bar:before {
    bottom: 0px;
    width: 100%;
  }
}

@media all and (max-width: 1450px) {
  #header .inner {
    padding: 20px 5% 12px;
  }
}

@media all and (max-width: 1100px) {
  #header .inner {
    display: block;
  }
}

@media all and (max-width: 896px) {
  #header .inner {
    min-width: inherit;
    max-width: 90%;
    margin: 0 auto;
    display: block;
    padding: 8px 0;
  }
}

#header .inner #logo {
  width: 390px;
  padding-left: 35px;
}

#header .inner #logo img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

@media all and (max-width: 1100px) {
  #header .inner #logo {
    width: 320px;
    margin: 0 auto;
    text-align: center;
  }
}

@media all and (max-width: 896px) {
  #header .inner #logo {
    width: 270px;
    text-align: left;
    margin-left: 0px;
    margin: 0 0;
    text-align: left;
    padding: 0 0 10px 0;
  }
}

@media all and (max-width: 639px) {
  #header .inner #logo {
    max-width: 320px;
    max-height: 50px;
    text-align: left;
    margin-left: 0px;
    padding: 0;
  }
  #header .inner #logo img {
    height: 50px;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

#header .inner #logo .logo1 {
  display: block;
}

@media all and (max-width: 1100px) {
  #header .inner #logo .logo1 {
    margin: 0 auto;
  }
}

@media all and (max-width: 896px) {
  #header .inner #logo .logo1 {
    margin: 0 auto 0 0;
  }
}

#header .inner #logo .logo2 {
  display: none;
}

@media all and (max-width: 1100px) {
  #header .inner #logo .logo2 {
    margin: 0 auto;
  }
}

#header .head-right {
  margin-left: auto;
  margin-right: 5px;
}

@media all and (max-width: 1100px) {
  #header .head-right {
    text-align: center;
    margin: 0px auto 0;
    width: 760px;
  }
  #header .head-right .head-right_tel,
  #header .head-right .head-right_btn {
    display: none;
  }
}

@media all and (max-width: 896px) {
  #header .head-right {
    display: none;
  }
}

#header .head-right_contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  margin-right: 50px;
  margin-bottom: 10px;
}

#header .head-right_tel a,
#header .head-right_btn a {
  display: block;
  padding: 4px 10px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  color: #fff;
  font-size: 1.3rem;
}

#header .head-right_tel a:before,
#header .head-right_btn a:before {
  margin-right: 5px;
}

#header .head-right_tel {
  line-height: 1;
  text-align: center;
}

#header .head-right_tel span {
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0;
  padding-bottom: 10px;
}

#header .head-right_tel a {
  background: transparent;
  color: #fff;
  padding-top: 12px;
  font-weight: 600;
  font-size: 2.6rem;
  position: relative;
  line-height: 0.4;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#header .head-right_tel a:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 896px) {
  #header .head-right_tel a {
    pointer-events: inherit;
  }
}

#header .head-right_tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
}

#header .head-right_tel a:hover {
  color: #a2a2a2;
}

#header .head-right_btn {
  margin: 0 4px;
}

#header .head-right_btn a {
  font-size: 1.6rem;
  text-align: center;
  width: 200px;
  position: relative;
  color: #fefefe;
  background: #888;
  border: 1px solid #888;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#header .head-right_btn a span {
  display: block;
  font-size: 13px;
  margin-bottom: -5px;
}

#header .head-right_btn a:first-letter {
  text-transform: uppercase;
}

#header .head-right_btn a:hover {
  background: #fff;
  color: #888;
}

#header.type_r {
  background-color: #fff;
  color: #333;
}

#header.type_r.is-fixed {
  background-color: #fff;
}

#header.type_r .head-right_tel span {
  color: #555;
}

#header.type_r .head-right_tel a {
  font-size: 3.6rem;
  line-height: 1;
  color: #888;
  position: relative;
}

#header.type_r .head-right_tel a:hover {
  opacity: 0.8;
}

#header.type_r .head-right_btn {
  line-height: 1.6;
}

#header.type_r .head-right_btn i {
  font-size: 3rem;
}

#header.type_r #header_nav {
  width: 100%;
  max-width: 1000px;
}

#header.type_r #header_nav ul li a {
  color: #333;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 1.6rem;
  text-align: center;
}

#header.type_r #header_nav ul li a::after {
  display: none;
}

#header.type_r #header_nav ul li a span {
  color: #888;
}

#header.type_r #header_nav ul li a.active span, #header.type_r #header_nav ul li a:hover span {
  opacity: 0.6;
}

#header.type_r #header_nav ul li a:hover {
  color: #888;
  background-color: #d5d5d5;
}

#header.type_r #header_nav ul li a:hover span {
  color: #555;
}

#header.type_r #header_nav ul li .dropdown .dropdown-li a {
  font-size: 1.4rem;
  text-align: left;
}

#header.type_r .inner {
  padding: 10px 0;
}

#header.type_r .inner:before {
  display: none;
}

@media all and (max-width: 1100px) {
  #header.type_r .inner {
    padding: 10px 0;
  }
}

#header.type_r .inner #logo {
  position: relative;
}

#header.type_r .inner #logo img {
  -webkit-filter: none;
          filter: none;
}

#header.type_r .inner #logo .logo1 {
  display: none;
}

#header.type_r .inner #logo .logo2 {
  display: block;
  margin: 0 0;
  text-align: left;
}

@media all and (max-width: 1100px) {
  #header.type_r .inner #logo {
    padding: 10px 0;
  }
}

@media all and (max-width: 639px) {
  #header.type_r .inner #logo {
    padding: 0;
  }
}

#header.type1 {
  background-color: #fff;
  color: #333;
}

#header.type1.is-fixed {
  background-color: #fff;
}

#header.type1 .head-right_tel span {
  color: #555;
}

#header.type1 .head-right_tel a {
  color: #888;
  position: relative;
}

#header.type1 .head-right_tel a:hover {
  color: #888;
}

#header.type1 #header_nav ul li a {
  color: #333;
  padding: 8px 8px;
}

#header.type1 #header_nav ul li a::after {
  display: none;
}

#header.type1 #header_nav ul li a span {
  color: #888;
}

#header.type1 #header_nav ul li a.active span, #header.type1 #header_nav ul li a:hover span {
  color: #aeaeae;
}

#header.type1 #header_nav ul li a:hover {
  color: #fff;
  background-color: #bbbbbb;
}

#header.type1 #header_nav ul li a:hover span {
  color: #000;
}

#header.type1 #header_nav ul li .dropdon-li a {
  text-align: left;
}

#header.type1 .inner {
  padding: 10px 0 0;
}

#header.type1 .inner:before {
  display: none;
}

@media all and (max-width: 1100px) {
  #header.type1 .inner {
    padding: 10px 0;
  }
}

#header.type1 .inner #logo {
  width: 310px;
  position: relative;
  padding: 10px 10px 10px 35px;
}

#header.type1 .inner #logo img {
  -webkit-filter: none;
          filter: none;
}

#header.type1 .inner #logo .logo1 {
  display: none;
}

#header.type1 .inner #logo .logo2 {
  display: block;
  margin: 0 0;
  text-align: left;
}

@media all and (max-width: 1100px) {
  #header.type1 .inner #logo {
    padding: 10px 0;
  }
}

@media all and (max-width: 639px) {
  #header.type1 .inner #logo {
    padding: 0;
  }
}

#header_nav {
  position: relative;
  width: 650px;
  max-width: 1200px;
}

@media all and (max-width: 1100px) {
  #header_nav {
    width: 100%;
  }
}

.is-fixed #header_nav .head-right_tel a {
  color: #888;
}

@media all and (max-width: 1100px) {
  .is-fixed #header_nav {
    margin: 0 auto 0;
  }
}

.is-fixed #header_nav ul li a {
  color: #333;
}

.is-fixed #header_nav ul li a::after {
  display: none;
}

.is-fixed #header_nav ul li a span {
  color: #888;
}

.is-fixed #header_nav ul li a.active span, .is-fixed #header_nav ul li a:hover span {
  color: #aeaeae;
}

.is-fixed #header_nav ul li a:hover {
  color: #888;
}

.is-fixed #header_nav ul li a:hover span {
  color: rgba(51, 51, 51, 0.8);
}

#header_nav ul {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#header_nav ul li {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

#header_nav ul li .sub_nav {
  display: none;
}

#header_nav ul li .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 999;
  padding-top: 30px;
}

#header_nav ul li .dropdown .dropdown-li {
  border-right: 0;
  margin: 0 0 0px;
  background: #fff;
  padding: 0;
}

#header_nav ul li .dropdown .dropdown-li a {
  display: block;
  font-size: 1.2rem;
  width: 240px;
  padding: 8px 8px;
  color: #333;
}

#header_nav ul li .dropdown .dropdown-li.foot_only {
  display: none;
}

#header_nav ul li a {
  display: block;
  font-weight: 600;
  position: relative;
  line-height: 1.3;
  font-size: 1.2rem;
  padding: 12px 0;
  color: #fff;
}

#header_nav ul li a span {
  display: block;
  font-size: 1.6rem;
  color: #fff;
  position: relative;
  letter-spacing: 0.1rem;
  font-weight: 600;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#header_nav ul li a span:first-letter {
  text-transform: uppercase;
}

#header_nav ul li a:after {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  background: #888;
  left: 0;
  bottom: 0px;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

@media all and (max-width: 1100px) {
  #header_nav ul li a:after {
    right: 0;
    text-align: center;
    margin: 0 auto;
  }
}

#header_nav ul li a:hover span, #header_nav ul li a.active span {
  color: #bbbbbb;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

#header_nav_sub {
  background-color: #eee;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  z-index: 110;
  padding: 20px 0;
}

#header_nav_sub.is-fixed {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: rgba(170, 170, 170, 0.19) 0px 6px 6px 0px;
          box-shadow: rgba(170, 170, 170, 0.19) 0px 6px 6px 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  padding: 13px 0;
}

@media all and (max-width: 639px) {
  #header_nav_sub {
    display: none;
  }
}

#header_nav_sub .header_nav_sub_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#header_nav_sub .header_nav_sub_inner #logo {
  width: 14%;
}

#header_nav_sub .header_nav_sub_inner #logo img {
  width: 90%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

#header_nav_sub ul {
  width: 100%;
  max-width: 43%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#header_nav_sub ul li {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  border-right: 1px solid #fff;
}

#header_nav_sub ul li:last-child {
  border-right: 0px solid #fff;
}

#header_nav_sub ul li.before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -100px;
  width: 20px;
  height: 20px;
}

#header_nav_sub ul li a {
  display: block;
  position: relative;
  line-height: 1.2;
  font-size: 1.2rem;
  padding: 0;
  font-weight: 600;
  color: #333;
  text-align: center;
}

#header_nav_sub ul li a span {
  display: block;
  font-size: 1.6rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  color: #888;
  position: relative;
  letter-spacing: 0.1rem;
}

#header_nav_sub ul li a span:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 896px) {
  #header_nav_sub ul li a {
    font-size: 1.1rem;
  }
  #header_nav_sub ul li a span {
    font-size: 1.4rem;
  }
}

#header_nav_sub ul li a:after {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  background: #888;
  left: 0;
  bottom: 0px;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

@media all and (max-width: 1100px) {
  #header_nav_sub ul li a:after {
    right: 0;
    text-align: center;
    margin: 0 auto;
  }
}

#header_nav_sub ul li:hover a, #header_nav_sub ul li.active a {
  color: #888;
}

#header_nav_sub ul li:hover a span, #header_nav_sub ul li.active a span {
  color: #888;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

#main_nav01 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#main_nav01 ul {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#main_nav01 ul li {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 12px 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#main_nav01 ul li:hover {
  opacity: 0.6;
  background-color: #eee;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#main_nav01 ul li a {
  display: block;
  font-weight: 600;
  position: relative;
  line-height: 1.1;
  color: #333;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
}

#main_nav01 ul li a span {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  color: #888;
  font-size: 1.9rem;
  display: block;
  position: relative;
  letter-spacing: 0.1rem;
  font-weight: 600;
}

#main_nav01 ul li a span:first-letter {
  text-transform: uppercase;
}

#main_nav01 ul li a.active {
  color: #a2a2a2;
}

#main_nav01 ul > li a {
  border-right: 1px solid #eee;
}

#main_nav01 ul > li:last-child a {
  border-right: 0px solid #eee;
}

#main_nav01 .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 999;
  padding-top: 30px;
}

#main_nav01 .dropdown .dropdown-li {
  border-right: 0;
  margin: 0 0 2px;
  background: #fff;
  text-align: left;
  padding: 0;
}

#main_nav01 .dropdown .dropdown-li a {
  display: block;
  text-align: left;
  font-size: 1.2rem;
  width: 220px;
  padding: 8px 8px;
  color: #333;
  -webkit-box-shadow: rgba(51, 51, 51, 0.3) 0 0 5px;
          box-shadow: rgba(51, 51, 51, 0.3) 0 0 5px;
}

#main_nav01 .dropdown .dropdown-li.foot_only {
  display: none;
}

@media all and (max-width: 1100px) {
  #main_nav01 ul li a {
    font-size: 1.2rem;
  }
  #main_nav01 ul li a span {
    font-size: 1.4rem;
  }
}

@media all and (max-width: 896px) {
  #main_nav01 {
    display: none;
  }
}

#main_nav02 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  z-index: 110;
  background-color: white;
}

#main_nav02 .main_nav_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: 20px 0;
  margin: 0 auto;
}

#main_nav02 .main_nav_tel {
  background: transparent;
  color: #888;
  width: auto;
  height: auto;
  text-align: center;
  line-height: 1.8rem;
  position: relative;
  font-size: 1.8rem;
  font-weight: normal;
}

#main_nav02 .main_nav_tel span {
  font-size: 1.8rem;
  font-weight: normal;
  font-family: "PT Serif", serif;
  font-weight: 500;
}

#main_nav02 .main_nav_tel span:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  font-size: 80%;
  margin-right: 8px;
}

#main_nav02:after {
  content: "";
  background-color: rgba(238, 132, 125, 0.2);
  position: absolute;
  width: 25%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
}

#main_nav02.is-fixed {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: rgba(170, 170, 170, 0.19) 0px 6px 6px 0px;
  box-shadow: rgba(170, 170, 170, 0.19) 0px 6px 6px 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  padding: 0;
}

#main_nav02 ul {
  margin: 0 auto 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 80px;
}

#main_nav02 ul li {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

#main_nav02 ul li:last-child {
  border-right: 0px solid #fff;
}

#main_nav02 ul li.before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -100px;
  width: 20px;
  height: 20px;
}

#main_nav02 ul li a {
  display: block;
  position: relative;
  line-height: 1.5;
  font-size: 1.5rem;
  padding: 0;
  font-weight: 300;
  color: #555;
}

#main_nav02 ul li a span {
  display: block;
  font-size: 1.8rem;
  font-family: "PT Serif", serif;
  font-weight: 500;
  color: #888;
  position: relative;
  letter-spacing: 0.1rem;
}

#main_nav02 ul li a:before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 0%;
  border-bottom: 2px solid #888;
  -webkit-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}

#main_nav02 ul li:hover a,
#main_nav02 ul li.active a {
  color: #888;
}

#main_nav02 ul li:hover a:before,
#main_nav02 ul li.active a:before {
  content: "";
  width: 100%;
  border-bottom: 2px solid #888;
}

#main_nav02 ul li:hover a span,
#main_nav02 ul li.active a span {
  color: #fef7f7;
  -webkit-transition: 0.2s width ease-in;
  transition: 0.2s width ease-in;
}

#main_nav02 .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 999;
  padding-top: 20px;
}

#main_nav02 .dropdown .dropdown-li {
  border-right: 0;
  margin: 0;
}

#main_nav02 .dropdown .dropdown-li a {
  display: block;
  width: 220px;
  padding: 10px 8px;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  text-align: left;
  color: #333;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
}

#main_nav02 .dropdown .dropdown-li a:before {
  display: none;
}

#main_nav02 .dropdown .dropdown-li a:hover {
  color: #888;
  background: rgba(242, 242, 242, 0.8);
}

#main_nav02 .dropdown .dropdown-li a:after {
  display: none;
}

#main_nav02.UpMove {
  position: fixed;
  width: 100%;
  -webkit-animation: UpAnime 0.5s forwards;
  animation: UpAnime 0.5s forwards;
}

#main_nav02.DownMove {
  position: fixed;
  top: 0;
  margin-top: 0;
  width: 100%;
  -webkit-animation: DownAnime 0.5s forwards;
  animation: DownAnime 0.5s forwards;
  background-color: white;
  -webkit-box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
}

#main_nav02.DownMove ul {
  width: 100%;
  max-width: 880px;
}

#main_nav02.DownMove ul li:before {
  display: none;
}

@media all and (max-width: 1100px) {
  #main_nav02 {
    text-align: center;
    margin: 0 auto;
    width: 80%;
    width: 760px;
  }
}

@media all and (max-width: 639px) {
  #main_nav02 {
    display: none;
  }
}

#page-top_img {
  position: fixed;
  bottom: 10px;
  right: 7px;
  z-index: 980;
}

#page-top_img a {
  display: block;
}

#page-top_img a img {
  width: 120px;
}

@media all and (max-width: 639px) {
  #page-top_img a img {
    bottom: 40px;
  }
}

#page-top_img a:hover {
  opacity: 0.6;
}

@media all and (max-width: 639px) {
  #page-top_img {
    bottom: 70px;
  }
}

#page-top {
  position: fixed;
  bottom: 10px;
  right: 7px;
  z-index: 980;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#page-top a {
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: #fff;
  -webkit-box-shadow: rgba(51, 51, 51, 0.1) 0px 2px 2px 2px;
          box-shadow: rgba(51, 51, 51, 0.1) 0px 2px 2px 2px;
  color: #888;
  border: 1px solid #888;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 2.2rem;
}

#page-top a:hover {
  opacity: 0.6;
}

@media all and (max-width: 639px) {
  #page-top {
    bottom: 50px;
  }
  #page-top a {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }
}

#bxslider_flow_wrap {
  width: 100%;
  height: auto;
  max-height: 630px;
  margin: 0px auto 0;
  position: relative;
}

@media all and (max-width: 896px) {
  #bxslider_flow_wrap {
    height: auto !important;
  }
}

#bxslider_flow_wrap .bxslider_flow_txt {
  height: 100%;
  padding: 160px 15px 0;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  z-index: 10;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  #bxslider_flow_wrap .bxslider_flow_txt {
    padding: 50px 0 0;
  }
}

#bxslider_flow_wrap .bxslider_flow_txt .txt01 span {
  background: #888;
  color: #fff;
  padding: 10px 30px;
  font-size: 6rem;
}

@media all and (max-width: 896px) {
  #bxslider_flow_wrap .bxslider_flow_txt .txt01 span {
    font-size: 4.5vw;
    padding: 5px 0px;
  }
}

#bxslider_flow_wrap .bxslider_flow_txt .txt02 {
  margin-top: 10px;
}

#bxslider_flow_wrap .bxslider_flow_txt .txt02 span {
  background: #fff;
  color: #888;
  padding: 10px 30px;
  font-size: 3rem;
  letter-spacing: 0.2rem;
}

@media all and (max-width: 896px) {
  #bxslider_flow_wrap .bxslider_flow_txt .txt02 {
    margin-top: 5px;
  }
  #bxslider_flow_wrap .bxslider_flow_txt .txt02 span {
    font-size: 3vw;
    padding: 5px 5px;
  }
}

@media all and (max-width: 896px) {
  #bxslider_flow_wrap .bxslider_flow_txt {
    margin-top: 5px;
    height: 60%;
    padding: 0 !important;
    top: inherit;
    bottom: 0;
    background: none;
  }
}

#bxslider_flow_wrap .txt03 {
  color: #fff;
  padding: 10px 30px;
  font-size: 3rem;
  display: inline-block;
}

#bxslider_flow_wrap .txt03 span {
  font-size: 1.2rem;
}

@media all and (max-width: 896px) {
  #bxslider_flow_wrap .txt03 {
    font-size: 1.2rem;
    padding: 5px 10px;
  }
  #bxslider_flow_wrap .txt03 span {
    font-size: 1.2rem;
  }
}

#bxslider_flow_wrap .bxslider_flow li figure {
  width: 100%;
  height: 630px;
}

#bxslider_flow_wrap .bxslider_flow li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  #bxslider_flow_wrap .bxslider_flow li {
    height: 330px;
  }
  #bxslider_flow_wrap .bxslider_flow li figure {
    width: 100%;
    height: 330px;
  }
}

#bxslidertop {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 182px;
  padding-bottom: 20px;
  background-color: #888;
}

@media all and (max-width: 639px) {
  #bxslidertop {
    padding-top: 95px;
  }
}

#bxslider {
  width: 100%;
  margin-left: 50%;
}

#bxslider li {
  margin-left: calc(-960px / 2);
  /* 画像サイズ / 2 */
  margin-right: calc((960px / 2) + 20px) !important;
  /* 画像サイズ / 2 + 20 */
  /* div {
      height: 600px;
    }

    img {
      border-radius: 25px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    } */
}

#bxslider li figure {
  width: 100%;
  height: 100%;
  max-height: 500px;
  overflow: hidden;
}

#bxslider li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 960px) {
  #bxslider {
    width: 100%;
    margin-left: 0%;
  }
  #bxslider li {
    width: 90%;
    margin-left: 0%;
    margin-right: 0% !important;
  }
}

@media all and (max-width: 639px) {
  #bxslider li figure {
    max-height: 300px;
  }
}

.bxslider_wrap {
  position: relative;
}

.bxslidertext {
  z-index: 10;
  position: absolute;
  left: 5%;
  bottom: 10%;
  width: 100%;
  max-width: 800px;
  -webkit-transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.bxslidertext .eng {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 8rem;
  line-height: 8rem;
  color: #888;
  /*     color: transparent;
      background: #fff;
      text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(148, 148, 148, 0.4);
      -webkit-background-clip: text;
   */
}

.bxslidertext .eng:first-letter {
  text-transform: uppercase;
}

.bxslidertext .ja_middle {
  display: inline-block;
  font-size: 4.5rem;
  line-height: 4.5rem;
  color: #fff;
  text-shadow: rgba(17, 17, 17, 0.8) 0 0 10px;
  font-weight: bold;
  padding: 8px 0;
}

.bxslidertext .ja {
  font-size: 1.8rem;
  line-height: 6rem;
  color: #fff;
  background-color: #888;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 10px 10px;
  font-weight: bold;
  padding: 8px 20px;
}

@media all and (max-width: 896px) {
  .bxslidertext .ja_middle {
    font-size: 2vw;
    line-height: 1.6;
  }
}

@media all and (max-width: 639px) {
  .bxslidertext {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  .bxslidertext .ja_middle {
    font-size: 5vw;
    line-height: 1.6;
  }
  .bxslidertext .eng {
    font-size: 8vw;
    line-height: 1.6;
  }
  .bxslidertext .ja {
    font-size: 1.2rem;
    line-height: 1.3rem;
    padding: 4px 10px;
  }
}

@media all and (max-width: 639px) {
  .bxslidertext {
    bottom: 80px;
    left: 10px;
    width: 100%;
  }
}

#scrolldown_bx {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  color: #888;
  font-size: 1rem;
  z-index: 100;
  height: 110px;
  text-align: center;
  font-weight: bold;
}

#scrolldown_bx:before, #scrolldown_bx:after {
  position: absolute;
  content: "";
  z-index: 2;
  left: 50%;
}

#scrolldown_bx:before {
  width: 1px;
  height: 80px;
  bottom: 0;
  background: #aaa;
  -webkit-transform: translateX(-80%);
          transform: translateX(-80%);
}

#scrolldown_bx:after {
  width: 8px;
  height: 8px;
  background: rgba(136, 136, 136, 0.9);
  border-radius: 100%;
  top: 0px;
  margin-left: -4px;
  -webkit-animation: scroll-point1 2.3s ease-out infinite;
          animation: scroll-point1 2.3s ease-out infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@media all and (max-width: 896px) {
  #scrolldown_bx {
    display: none;
  }
}

#scrolldown_02 {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  color: #fff;
  font-size: 1rem;
  z-index: 100;
  height: 50px;
  text-align: center;
  font-weight: bold;
}

#scrolldown_02:before, #scrolldown_02:after {
  position: absolute;
  content: "";
  z-index: 2;
  left: 50%;
}

#scrolldown_02:before {
  width: 1px;
  height: 120px;
  bottom: -120px;
  background: #fff;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

#scrolldown_02:after {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100%;
  top: 0px;
  margin-left: -4px;
  -webkit-animation: scroll-point02 2.3s ease-out infinite;
          animation: scroll-point02 2.3s ease-out infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@media all and (max-width: 896px) {
  #scrolldown_02 {
    display: none;
  }
}

@-webkit-keyframes scroll-point02 {
  0% {
    top: 50px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: 160px;
    opacity: 0;
  }
}

@keyframes scroll-point02 {
  0% {
    top: 50px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: 160px;
    opacity: 0;
  }
}

@-webkit-keyframes zoom-in {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}

@keyframes zoom-in {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  -webkit-animation: zoom-in 11s linear 0s 1 normal both;
          animation: zoom-in 11s linear 0s 1 normal both;
}

.swiper-slide {
  position: relative;
}

.swiper-slide:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  right: 0;
  top: 0;
  background-position: 50%;
  background-size: cover;
  z-index: -1;
}

.swiper-slide.slide1:before {
  background-image: url(../img/1.jpg);
  background-position: 60% 50%;
}

.swiper-slide.slide2:before {
  background-image: url(../img/2.jpg);
  background-position: 50% 50%;
}

.swiper-slide.slide3:before {
  background-image: url(../img/3.jpg);
  background-position: 90% 50%;
}

.slide-img {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.slide-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

@media all and (max-width: 1100px) {
  .slide-img {
    height: 80vw;
  }
}

@media all and (max-width: 896px) {
  .slide-img {
    height: 80vw;
  }
}

@media all and (max-width: 639px) {
  .slide-img {
    height: 130vw;
  }
}

#slide-wrap_small {
  position: relative;
  padding-bottom: 120px;
}

#slide-wrap_small.type1 {
  padding-bottom: 0;
  position: relative;
}

#slide-wrap_small.type1:before {
  content: "";
  position: absolute;
  top: -400px;
  left: -400px;
  background-color: #888;
  width: 800px;
  height: 800px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 9;
}

@media all and (max-width: 639px) {
  #slide-wrap_small.type1:before {
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
  }
}

@media all and (max-width: 639px) {
  #slide-wrap_small {
    overflow: hidden;
    padding-bottom: 40px;
  }
}

.slide-wrap_small_bg {
  position: relative;
}

.slide-wrap_small_bg:before {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(../images/slide-wrap_small_bg.jpg);
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  top: inherit;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#slideshow_small {
  position: relative;
  width: 83%;
  margin-left: auto;
  margin-right: 2%;
  padding-top: 10vh;
}

@media all and (max-width: 896px) {
  #slideshow_small {
    width: calc(100% - 60px);
    margin-right: 2%;
    padding-top: 100px;
    margin-bottom: 50px;
  }
}

#slideshow_small .slide-img {
  overflow: hidden;
  width: 100%;
  height: 75vh;
}

#slideshow_small .slide-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

@media all and (max-width: 1100px) {
  #slideshow_small .slide-img {
    height: 55vw;
  }
}

@media all and (max-width: 896px) {
  #slideshow_small .slide-img {
    height: 48vh;
  }
}

@media all and (max-width: 639px) {
  #slideshow_small .slide-img {
    height: 50vh;
  }
}

#slideshow_small.type1 {
  overflow: hidden;
  border-radius: 40px 0 0 40px;
  padding-top: 0;
  margin-right: 0%;
}

#slideshow_small.type1 .slide-img {
  height: 80vh;
}

@media all and (max-width: 1100px) {
  #slideshow_small.type1 .slide-img {
    height: 55vw;
  }
}

@media all and (max-width: 896px) {
  #slideshow_small.type1 .slide-img {
    height: 48vh;
  }
}

@media all and (max-width: 639px) {
  #slideshow_small.type1 .slide-img {
    height: 50vh;
  }
}

#slideshow_small.type_r {
  overflow: hidden;
  border-radius: 40px 40px;
  padding: 0;
  margin: 0 auto;
  width: 96%;
}

#slideshow_small.type_r .slide-img {
  height: 75vh;
}

@media all and (max-width: 1100px) {
  #slideshow_small.type_r .slide-img {
    height: 55vw;
  }
}

@media all and (max-width: 896px) {
  #slideshow_small.type_r .slide-img {
    height: 48vh;
  }
}

@media all and (max-width: 639px) {
  #slideshow_small.type_r .slide-img {
    height: 50vh;
  }
}

#slideshow_small.type2 {
  overflow: hidden;
  margin-right: 0%;
  padding-top: 0px;
}

#slideshow_small.type2 .slide-img {
  height: 100vh;
}

@media all and (max-width: 1100px) {
  #slideshow_small.type2 .slide-img {
    height: 100vw;
  }
}

@media all and (max-width: 896px) {
  #slideshow_small.type2 .slide-img {
    height: 80vh;
  }
}

@media all and (max-width: 639px) {
  #slideshow_small.type2 .slide-img {
    height: 80vh;
  }
}

.slide-txt {
  position: absolute;
  left: 50%;
  top: 47%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 34%;
  padding: 10px;
  z-index: 20;
  text-align: center;
}

@media all and (max-width: 1100px) {
  .slide-txt {
    width: 55%;
  }
}

@media all and (max-width: 639px) {
  .slide-txt {
    margin-top: 30px;
    width: 80%;
  }
}

.slide-fixed {
  position: absolute;
  left: 50%;
  bottom: 2%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 20;
}

@media all and (max-width: 896px) {
  .slide-fixed {
    width: 50%;
  }
}

.slide-fixed li {
  width: 31%;
}

@media all and (max-width: 639px) {
  .slide-fixed {
    width: 60%;
  }
}

.top_space {
  width: 100%;
  height: 100px;
}

.top_space.type1 {
  height: 180px;
}

@media all and (max-width: 639px) {
  .top_space.type1 {
    height: 80px;
  }
}

@media all and (max-width: 639px) {
  .top_space {
    height: 90px;
  }
}

#swiper_catch {
  opacity: 0;
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  top: 0;
  display: gap;
  place-items: center;
  width: 100%;
  max-width: 940px;
  height: 200px;
  text-align: center;
}

#swiper_catch.on {
  opacity: 1;
}

#swiper_catch .eng {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 8rem;
  line-height: 8rem;
  color: #888;
  /*     color: transparent;
    background: #fff;
    text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(148, 148, 148, 0.4);
    -webkit-background-clip: text;
 */
}

#swiper_catch .eng:first-letter {
  text-transform: uppercase;
}

#swiper_catch .ja_middle {
  display: inline-block;
  font-size: 4.8rem;
  line-height: 6rem;
  color: #888;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  padding: 8px 20px;
  font-family: "Noto Serif JP", "YakuHanMP", "Noto Serif JP", "游明朝 Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
  font-weight: 500;
}

#swiper_catch .ja {
  font-size: 1.8rem;
  line-height: 6rem;
  color: #fff;
  background-color: #888;
  font-weight: bold;
  padding: 8px 20px;
}

@media all and (max-width: 896px) {
  #swiper_catch .ja_middle {
    font-size: 4vw;
    line-height: 1.6;
  }
}

@media all and (max-width: 639px) {
  #swiper_catch {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  #swiper_catch .ja_middle {
    font-size: 4vw;
    line-height: 1.6;
  }
  #swiper_catch .eng {
    font-size: 8vw;
    line-height: 1.6;
  }
  #swiper_catch .ja {
    font-size: 1.2rem;
    line-height: 1.3rem;
    padding: 4px 10px;
  }
}

@media all and (max-width: 639px) {
  #swiper_catch {
    bottom: 80px;
    left: 10px;
    width: 100%;
  }
}

#swiper_catch_small {
  z-index: 50;
  position: absolute;
  left: 20px;
  bottom: 30%;
  width: 100%;
  max-width: 940px;
  -webkit-transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  opacity: 0;
}

#swiper_catch_small.on {
  opacity: 1;
}

#swiper_catch_small .eng {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 8rem;
  line-height: 8rem;
  color: #888;
  /*     color: transparent;
    background: #fff;
    text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(148, 148, 148, 0.4);
    -webkit-background-clip: text;
 */
}

#swiper_catch_small .eng:first-letter {
  text-transform: uppercase;
}

#swiper_catch_small .ja_middle {
  display: inline-block;
  font-size: 4.8rem;
  line-height: 6rem;
  color: #888;
  font-weight: bold;
  padding: 8px 20px;
  /* text-shadow: rgba(#fff,0.8) 0 0 2px; */
  text-shadow: 1.9px 1.9px 0 #fff, -1.9px 1.9px 0 #fff, 1.9px -1.9px 0 #fff, -1.9px -1.9px 0 #fff;
}

#swiper_catch_small .ja {
  font-size: 1.8rem;
  line-height: 6rem;
  color: #fff;
  background-color: #888;
  border-radius: 20px;
  font-weight: bold;
  padding: 8px 20px;
}

@media all and (max-width: 896px) {
  #swiper_catch_small .ja_middle {
    font-size: 4vw;
    line-height: 1.6;
  }
}

@media all and (max-width: 639px) {
  #swiper_catch_small {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    bottom: 80%;
  }
  #swiper_catch_small .ja_middle {
    font-size: 7vw;
    line-height: 1.6;
  }
  #swiper_catch_small .eng {
    font-size: 8vw;
    line-height: 1.6;
  }
  #swiper_catch_small .ja {
    font-size: 1.2rem;
    line-height: 1.3rem;
    padding: 4px 10px;
  }
}

@media all and (max-width: 639px) {
  #swiper_catch_small {
    bottom: 20%;
    left: 10px;
    width: 100%;
  }
}

#swiper_catch_small02 {
  z-index: 50;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36%;
  height: 100%;
  margin: auto;
  -webkit-transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  opacity: 0;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  text-align: center;
}

#swiper_catch_small02.on {
  opacity: 1;
}

#swiper_catch_small02 .ja_middle {
  font-size: 8vw;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  padding: 8px 20px;
  text-shadow: 0px 0px 5px #111, 0px 0px 5px #111, 0px 0px 10px #111, 0px 0px 10px #111, 0px 0px 15px #111, 0px 0px 15px;
}

#swiper_catch_small02 .ja_small {
  font-size: 2vw;
  line-height: 6rem;
  color: #fff;
  background-color: #888;
  border: 4px double #fff;
  font-weight: bold;
  padding: 30px 8px;
}

@media all and (max-width: 639px) {
  #swiper_catch_small02 {
    bottom: 20%;
    left: 10px;
  }
  #swiper_catch_small02 .ja_middle {
    font-size: 16vw;
  }
  #swiper_catch_small02 .ja_small {
    font-size: 7vw;
  }
}

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  -webkit-animation-name: slideTextX100;
          animation-name: slideTextX100;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes slideTextX100 {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX100 {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  -webkit-animation-name: slideTextX-100;
          animation-name: slideTextX-100;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes slideTextX-100 {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX-100 {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

/* 4-2　パタッ（左へ） */
.flipLeft {
  -webkit-animation-name: flipLeftAnime;
          animation-name: flipLeftAnime;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-perspective-origin: left center;
          perspective-origin: left center;
  opacity: 0;
}

@-webkit-keyframes flipLeftAnime {
  from {
    -webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(50deg);
            transform: perspective(600px) translate3d(0, 0, 0) rotateY(50deg);
    opacity: 0;
  }
  to {
    -webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
            transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipLeftAnime {
  from {
    -webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(50deg);
            transform: perspective(600px) translate3d(0, 0, 0) rotateY(50deg);
    opacity: 0;
  }
  to {
    -webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
            transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}

/*========= レイアウトのためのCSS ===============*/
.bgextend {
  width: 220px;
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*========= 背景色の動きのCSS ===============*/
/*背景色が伸びて出現 共通*/
.bgextend {
  -webkit-animation-name: bgextendAnimeBase;
          animation-name: bgextendAnimeBase;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  -webkit-animation-name: bgextendAnimeSecond;
          animation-name: bgextendAnimeSecond;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*--------- 左から --------*/
.bgLRextend::before {
  -webkit-animation-name: bgLRextendAnime;
          animation-name: bgLRextendAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #888;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

/*--------- 右から --------*/
.bgRLextend::before {
  -webkit-animation-name: bgRLextendAnime;
          animation-name: bgRLextendAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgRLextendAnime {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes bgRLextendAnime {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

/*--------- 下から --------*/
.bgDUextend::before {
  -webkit-animation-name: bgDUextendAnime;
          animation-name: bgDUextendAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgDUextendAnime {
  0% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50.001% {
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes bgDUextendAnime {
  0% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50.001% {
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

/*--------- 上から --------*/
.bgUDextend::before {
  -webkit-animation-name: bgUDextendAnime;
          animation-name: bgUDextendAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgUDextendAnime {
  0% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50.001% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes bgUDextendAnime {
  0% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50.001% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

.flogo {
  margin: 0 auto 40px;
  min-height: 0;
  max-width: 300px;
  text-align: center;
}

@media all and (max-width: 639px) {
  .flogo {
    margin: 0 auto 20px;
    width: 50%;
  }
}

.flogo.white img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.footer_type01 {
  font-size: 1.3rem;
  position: relative;
  overflow: hidden;
  padding: 0 0 20px;
}

@media all and (max-width: 639px) {
  .footer_type01 {
    padding: 0 0 120px;
  }
}

.footer_type01.type1 {
  color: #555;
}

.footer_type01.type1 .flogo img {
  -webkit-filter: none;
          filter: none;
}

.footer_type01.type1 .footer_navi {
  margin: 0 0 0 30px;
}

.footer_type01.type1 .footer_navi ul li a {
  color: #555;
}

.footer_type01.type1 .footer_navi ul li a:before {
  color: #555;
  display: none;
}

.footer_type01.type1 .footer_navi ul li a:hover {
  opacity: 0.6;
}

.footer_type01 .copy {
  text-align: center;
  padding: 20px 0;
  background-color: #fff;
  color: #333;
}

@media all and (max-width: 896px) {
  .footer_type01 .copy {
    padding-bottom: 80px;
  }
}

.footer_type01 .ggmap {
  position: relative;
  padding-bottom: 40%;
  height: 0;
  overflow: hidden;
}

@media all and (max-width: 896px) {
  .footer_type01 .ggmap {
    padding-bottom: 80%;
    height: 0;
  }
}

.footer_type01 .ggmap iframe,
.footer_type01 .ggmap object,
.footer_type01 .ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#footer {
  font-size: 1.4rem;
  position: relative;
  background-color: #f2f2f2;
  z-index: 100;
}

#footer .footer_navi {
  margin: 0 0 0 20px;
}

#footer .footer_navi ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[1];
      grid-template-columns: repeat(1, 1fr);
}

#footer .footer_navi ul li {
  display: block;
  margin-bottom: 4px;
}

#footer .footer_navi ul li a {
  color: #333;
}

#footer .footer_navi ul li a:before {
  color: #888;
}

#footer .footer_navi ul li .dropdown {
  display: none;
}

#footer .flogo {
  margin: 20px 0;
  text-align: left;
}

@media all and (max-width: 639px) {
  #footer .flogo {
    text-align: center;
    margin: 0 auto 20px;
  }
}

#footer .copy {
  text-align: center;
  background-color: #eee;
  padding: 20px 0;
}

@media all and (max-width: 896px) {
  #footer .copy {
    padding-bottom: 80px;
    background-color: #fff;
  }
}

#footer .inner {
  border-top: 1px solid #aaa;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  z-index: 3;
  padding: 50px 20px 30px;
}

@media all and (max-width: 896px) {
  #footer .inner {
    text-align: center;
  }
}

@media all and (max-width: 1100px) {
  #footer .inner {
    width: 100%;
  }
}

@media all and (max-width: 639px) {
  #footer {
    font-size: 1.2rem;
    background-color: #f0f0f0;
  }
  #footer .inner {
    padding: 30px 20px;
  }
}

.footer-lead {
  margin-bottom: 20px;
}

.footer-wrap {
  margin: 0px auto;
}

.footer-wrap .footer-left {
  border-bottom: 1px solid #acacac;
}

.footer-wrap .footer-center {
  margin-left: 40px;
}

.footer-wrap .footer-right {
  margin-left: 40px;
}

@media all and (max-width: 639px) {
  .footer-wrap .footer-center {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }
  .footer-wrap .footer-left {
    border-bottom: none;
  }
}

/* footer_navi
----------------------------------*/
.footer_navi {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin: 40px auto 0;
}

.footer_navi ul {
  margin: 0 auto 0px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 900px;
  padding: 10px 0;
}

.footer_navi ul li {
  display: inline-block;
  padding: 0 10px;
}

@media all and (max-width: 1100px) {
  .footer_navi ul li {
    padding: 0px;
  }
}

.footer_navi ul li a {
  color: #fff;
  font-size: 1.3rem;
  position: relative;
  font-weight: 600;
  /*     &:before {
          content: "";
          background-color: rgb(180, 180, 180);
          width: 130px;
          height: 1px;
          position: absolute;
          bottom: -6px;
          left: 0;
        } */
}

.footer_navi ul li a span {
  display: none;
}

.footer_navi ul li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f068";
  font-weight: 900;
  margin-right: 5px;
  color: #fff;
}

.footer_navi ul li a:hover {
  opacity: 0.6;
}

.footer_navi ul li:last-child a {
  /*  &:before {
            display: none;
          } */
}

.footer_navi ul li .dropdown {
  display: none;
}

.footer_navi ul li .dropdown .dropdon-li a {
  font-size: 1.2rem;
}

.footer_navi.type1 ul {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  text-align: center;
}

.footer_navi.type1 ul li a {
  color: #333;
}

.footer_navi.type1 ul li a:before {
  color: #333;
}

.footer_navi.base ul {
  max-width: 100%;
}

.footer_navi.base ul li {
  padding: 0 25px 0 0;
}

.footer_navi.base ul li a {
  color: #555;
}

.footer_navi.base ul li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a9";
  font-weight: 900;
  color: #fff;
}

.footer_navi.white {
  margin-bottom: 30px;
}

.footer_navi.white ul {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
}

.footer_navi.white ul li a {
  color: #fff;
}

.footer_navi.white ul li a:before {
  color: #fff;
}

.footer_navi.type2 ul li {
  display: block;
}

.copyright {
  background-color: #F2F2F2;
  text-align: center;
  margin: 0 auto 0;
  padding: 24px 0px 24px;
  font-size: 1.4rem;
  position: relative;
  z-index: 2;
  color: #555;
}

@media all and (max-width: 896px) {
  .copyright {
    font-size: 12px;
    margin-top: 0;
    padding: 20px 0 80px;
  }
}

/*----------------------------------
 top-contents
----------------------------------*/
.top-lead {
  position: relative;
  margin: 0 auto;
  padding: 160px 20px 80px;
  z-index: 2;
  max-width: 1200px;
}

.top-lead .mtitle4 {
  margin-bottom: 20px;
  text-align: left;
}

.top-lead .mtitle4 .ja {
  -webkit-writing-mode: inherit;
  -ms-writing-mode: inherit;
  writing-mode: inherit;
  color: #2e553b;
}

@media all and (max-width: 1367px) {
  .top-lead {
    padding: 160px 20px 80px;
  }
}

@media all and (max-width: 639px) {
  .top-lead {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.top-leadimg {
  max-width: 700px;
}

.top-leadimg img {
  width: 100%;
}

.top-lead-imgtxt {
  position: absolute;
  bottom: -10px;
  right: 0;
}

.anime-txt {
  opacity: 0;
}

.anime-txt-in {
  -webkit-animation: txt-in 1s linear 1s forwards;
  animation: txt-in 1s linear 1s forwards;
}

@-webkit-keyframes txt-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes txt-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.top-leadtxt {
  max-width: 750px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  margin-right: 4%;
}

.top-leadtxt img {
  width: 100%;
}

@media all and (max-width: 639px) {
  .top-leadtxt {
    margin: 20px 0px;
    font-size: 1.4rem;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 20px 20px;
  }
}

@media all and (max-width: 639px) {
  .top-leadtxt .txt {
    margin-bottom: 20px;
    font-size: 1.3rem;
  }
}

@media all and (max-width: 1100px) {
  .top-leadtxt .btnarea .btn05 a {
    margin-bottom: 20px;
    font-size: 1.4rem;
  }
}

@media all and (max-width: 639px) {
  .top-leadtxt .btnarea {
    margin-bottom: 40px;
  }
}

.single {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

@media all and (max-width: 639px) {
  .single.sp100 {
    padding-top: 100px;
  }
}

.single.type1 {
  padding: 80px 20px 0px !important;
  margin-bottom: 60px !important;
}

@media all and (max-width: 639px) {
  .single.type1 {
    padding: 40px 0px 0px !important;
    margin-bottom: 40px !important;
  }
}

.single02 {
  margin: 120px auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

@media all and (max-width: 639px) {
  .single02 {
    margin: 20px auto;
    padding-top: 0px;
  }
}

.single02.p60w {
  padding: 120px 120px;
}

@media all and (max-width: 639px) {
  .single02.p60w {
    padding: 40px 0;
  }
}

.single02.p60 {
  padding: 60px 0;
}

@media all and (max-width: 639px) {
  .single02.p60 {
    padding: 40px 0;
  }
}

.single02.p120 {
  padding: 120px 0;
}

@media all and (max-width: 639px) {
  .single02.p120 {
    padding: 40px 0;
  }
}

.single02.p130-80 {
  padding: 130px 0 80px;
}

@media all and (max-width: 639px) {
  .single02.p130-80 {
    padding: 60px 0 40px;
  }
}

.single03 {
  max-width: 1500px;
  margin: 0 auto;
  padding: 80px 0;
  position: relative;
}

.small-box {
  max-width: 800px;
  margin: 20px auto;
  position: relative;
}

@media all and (max-width: 639px) {
  .small-box .mtitle_box {
    margin-bottom: 20px;
  }
}

@media all and (max-width: 639px) {
  .small-box.p40-25 {
    padding: 0 20px;
  }
}

@media all and (max-width: 639px) {
  .small-box {
    padding: 5px 0;
  }
}

.mbox {
  padding: 35px 30px;
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
}

.mbox.type1 {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 3px 3px 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 3px 3px 3px 3px;
}

.mbox.transparent {
  background: transparent;
}

@media all and (max-width: 639px) {
  .mbox.transparent {
    padding: 0;
  }
}

.mbox.transparent2 {
  background: transparent;
}

@media all and (max-width: 639px) {
  .mbox.transparent2 {
    margin-top: 100px;
    padding: 30px 10px;
  }
}

.mbox.transparent3 {
  background: transparent;
}

@media all and (max-width: 639px) {
  .mbox.transparent3 {
    margin-top: 0px;
    padding: 40px 10px 0;
  }
}

.mbox.transparent4 {
  background: transparent;
}

@media all and (max-width: 639px) {
  .mbox.transparent4 {
    margin-top: 0px;
    padding: 0px 0px 0;
  }
}

.mbox.transparent5 {
  background: transparent;
}

@media all and (max-width: 639px) {
  .mbox.transparent5 {
    margin-top: 0px;
    padding: 0px 0px 0;
  }
}

.mbox.p40 {
  padding: 40px 40px;
}

@media all and (max-width: 639px) {
  .mbox.p40 {
    padding: 20px 15px;
  }
}

.mbox.p60 {
  padding: 60px 30px;
}

@media all and (max-width: 639px) {
  .mbox.p60 {
    padding: 40px 10px;
  }
}

.mbox.p0 {
  padding: 0 30px;
}

@media all and (max-width: 639px) {
  .mbox.p0 {
    padding: 15px 10px;
  }
}

.mbox.border2 {
  border: 2px solid #888;
  background: #fefefe;
  padding: 35px 30px 30px;
}

@media all and (max-width: 639px) {
  .mbox.border2 {
    padding: 35px 10px 20px;
    margin: 80px 0 50px;
  }
}

.mbox.border {
  border: 3px double #888;
  padding: 35px 30px 30px;
}

@media all and (max-width: 639px) {
  .mbox.border {
    padding: 35px 10px 20px;
    margin: 80px 0 50px;
  }
}

@media all and (max-width: 639px) {
  .mbox {
    padding: 15px 10px;
  }
  .mbox.sp-m10 {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.mbox.type1 {
  max-width: 800px;
}

@media all and (max-width: 639px) {
  .mbox .mtitle_box {
    margin-bottom: 20px;
  }
}

@media all and (max-width: 639px) {
  .mbox.p40-25 {
    padding: 0 20px;
  }
}

@media all and (max-width: 639px) {
  .mbox {
    padding: 30px 10px;
  }
}

#main {
  float: left;
  width: 70%;
}

#main .mbox {
  min-height: 300px;
}

@media all and (max-width: 896px) {
  #main .mbox {
    min-height: initial;
  }
}

@media all and (max-width: 896px) {
  #main {
    float: none;
    width: 100%;
  }
}

#side {
  float: right;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 130px;
  width: 28%;
  padding-right: 10px;
}

@media all and (max-width: 896px) {
  #side {
    float: none;
    width: 100%;
    position: static;
    margin-top: 40px;
  }
}

.bnr01 {
  text-align: center;
  margin-bottom: 30px;
}

.bnr01 img {
  width: 100px;
}

.mtitle {
  margin: 0 auto 40px;
  text-align: center;
}

.mtitle.inline {
  text-align: center;
}

.mtitle.inline .eng,
.mtitle.inline .ja {
  display: inline-block;
}

.mtitle.inline .ja:before {
  content: "/";
  margin: 0 10px;
}

.mtitle.bar {
  position: relative;
}

.mtitle.bar:before {
  content: "";
  background-color: #aaa;
  background-size: contain;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #aaa), color-stop(50%, #888));
  background-image: linear-gradient(to right, #aaa 50%, #888 50%);
  z-index: -1;
  width: 120px;
  height: 3px;
  position: absolute;
  top: inherit;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .mtitle.bar:before {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
    height: 2px;
  }
}

.mtitle.icon {
  position: relative;
}

.mtitle.icon:before {
  content: "";
  background: url(../images/icon/mtitle.png) top left no-repeat;
  background-size: contain;
  z-index: -1;
  width: 50px;
  height: 64px;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .mtitle.icon:before {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

.mtitle.tleft {
  text-align: left;
}

.mtitle.white {
  color: #fff;
}

.mtitle.white .ja {
  color: #fff;
}

.mtitle.white .eng {
  color: #fff;
}

.mtitle .eng {
  font-size: 6rem;
  display: block;
  line-height: 1.2;
  color: #888;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle .eng:first-letter {
  text-transform: uppercase;
}

.mtitle .eng:first-letter {
  color: #111;
}

.mtitle .ja {
  font-size: 1.8rem;
  color: #333;
  font-weight: normal;
}

.mtitle .ja.type2 {
  color: #888;
}

.mtitle .ja:first-letter {
  color: #888;
}

.mtitle .ja.white {
  color: #fff;
}

.mtitle.white {
  color: #fff;
}

.mtitle.white span {
  color: #fff;
}

.mtitle.white span:after {
  background-color: #eee;
}

.mtitle.white span.eng {
  opacity: 1;
  font-size: 5rem;
}

.mtitle.white span.eng:first-letter {
  color: #ffc517;
}

.mtitle.white span.eng:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 130px;
  background-color: #fff;
  left: 0;
  right: 0;
  top: -150px;
  margin: 0 auto;
}

.mtitle.black {
  color: #333;
}

.mtitle.black span {
  color: #555;
}

.mtitle.black span:after {
  background-color: #555;
}

@media all and (max-width: 639px) {
  .mtitle {
    text-align: center;
    margin-bottom: 20px;
  }
  .mtitle .eng {
    font-size: 3rem;
  }
  .mtitle .eng:before {
    height: 60px;
    top: -64px;
  }
  .mtitle .ja {
    font-size: 1.3rem;
  }
  .mtitle.white {
    color: #fff;
  }
  .mtitle.white span {
    color: #fff;
  }
  .mtitle.white span:after {
    background-color: #eee;
  }
  .mtitle.white span.eng {
    opacity: 1;
    font-size: 2rem;
  }
  .mtitle.white span.eng:first-letter {
    color: #ffc517;
  }
  .mtitle.white span.eng:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 130px;
    background-color: #fff;
    left: 0;
    right: 0;
    top: -150px;
    margin: 0 auto;
  }
}

.mtitle_smart {
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
}

.mtitle_smart.white .eng:first-letter {
  color: #fff;
}

.mtitle_smart.white:after {
  position: absolute;
  border-bottom: 1px solid #fff;
}

.mtitle_smart:after {
  position: absolute;
  border-bottom: 1px solid #888;
  content: "";
  background-size: contain;
  width: 97px;
  z-index: -1;
  bottom: -12px;
  left: 0;
}

.mtitle_smart.tcenter {
  margin: 0 auto 50px;
  left: 0;
}

.mtitle_smart.tcenter:after {
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 130px;
}

.mtitle_smart .eng {
  margin-bottom: 10px;
  display: block;
  font-size: 4.2rem;
  line-height: 4.2rem;
  position: relative;
  font-weight: normal;
  z-index: 2;
  color: #333;
  font-family: "PT Serif", serif;
  font-weight: 500;
}

.mtitle_smart .eng:first-letter {
  color: #888;
  text-transform: uppercase !important;
}

.mtitle_smart .ja {
  padding-top: 10px;
  position: relative;
  z-index: 2;
  font-size: 1.7rem;
  color: #555;
  letter-spacing: 0.15em;
  font-weight: 600;
  font-family: "YakuHanMP", "Cinzel", "Noto Serif JP", "游明朝 Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
  font-weight: 500;
}

.mtitle_smart.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mtitle_smart.white {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.mtitle_smart.white .eng,
.mtitle_smart.white .ja {
  color: #fefefe;
}

@media all and (max-width: 639px) {
  .mtitle {
    text-align: center;
  }
  .mtitle:after {
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  .mtitle .eng {
    font-size: 3rem;
    line-height: 3rem;
  }
  .mtitle .ja {
    font-size: 1.8rem;
  }
}

.mtitle_s {
  width: 100%;
  margin: 0 auto 0;
  text-align: center;
  background-color: #eaeaea;
  padding: 5px 0;
}

.mtitle_s.white {
  background: #fff;
}

.mtitle_s.white .ja,
.mtitle_s.white .eng {
  color: #888;
}

.mtitle_s.white .ja:first-letter,
.mtitle_s.white .eng:first-letter {
  color: #888;
}

.mtitle_s .ja {
  display: inline-block;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #131313;
  margin-left: 10px;
}

.mtitle_s .eng {
  display: inline-block;
  font-size: 3.2rem;
  color: #333;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_s .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_s .eng:first-letter {
  color: #888;
}

.mtitle_s.attention .eng {
  font-size: 2.8rem;
}

.mtitle_s.attention:before {
  position: absolute;
  content: "";
  width: 20%;
  height: 2px;
  left: 0;
  top: 40%;
  background: #998969;
  background: -webkit-gradient(linear, left top, right top, from(#998969), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, #998969 0%, rgba(255, 255, 255, 0) 100%);
}

.mtitle_s.attention:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 2px;
  right: 0;
  top: 40%;
  background: #998969;
  background: -webkit-gradient(linear, right top, left top, from(#998969), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(270deg, #998969 0%, rgba(255, 255, 255, 0) 100%);
}

@media all and (max-width: 639px) {
  .mtitle_s {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .mtitle_s .eng {
    font-size: 1.8rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-left: auto;
    line-height: 1.3;
    letter-spacing: .1em;
  }
  .mtitle_s .ja {
    font-size: 1.2rem;
  }
}

@media all and (max-width: 639px) {
  .mtitle2_s2.attention .eng {
    font-size: 1.8rem;
  }
}

.mtitle_eng {
  font-size: 8vw;
  color: #888;
  position: absolute;
  top: -5%;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1;
  letter-spacing: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_eng:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 1100px) {
  .mtitle_eng {
    top: -24%;
  }
}

@media all and (max-width: 896px) {
  .mtitle_eng {
    font-size: 4vw;
    position: relative;
  }
}

@media all and (max-width: 639px) {
  .mtitle_eng {
    font-size: 11vw;
  }
}

.mtitle_eng.white {
  color: rgba(187, 187, 187, 0.3) !important;
  top: -22%;
}

.mtitle_eng.tright {
  text-align: right;
  left: inherit;
  right: 0;
}

.mtitle_eng.tcenter {
  text-align: center;
  left: 0;
  right: 0;
}

.mtitle_inline {
  margin: 0 auto 40px;
  text-align: center;
  text-align: center;
  position: relative;
}

.mtitle_inline.bar:before {
  content: "";
  background-color: #888;
  background-size: contain;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #888), color-stop(50%, #aaa));
  background-image: linear-gradient(to right, #888 50%, #aaa 50%);
  z-index: -1;
  width: 120px;
  height: 3px;
  position: absolute;
  top: inherit;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .mtitle_inline.bar:before {
    left: 0;
    right: 0;
    width: 80px;
    margin: 0 auto;
    bottom: -15px;
    height: 2px;
  }
}

.mtitle_inline.bar2:before {
  content: "";
  background-color: #888;
  z-index: -1;
  width: 80%;
  height: 1px;
  position: absolute;
  top: inherit;
  bottom: -5px;
  left: auto;
  right: 0;
  margin: 0 0 0 auto;
}

@media all and (max-width: 639px) {
  .mtitle_inline.bar2:before {
    left: 0;
    right: 0;
    width: 80px;
    margin: 0 auto;
    bottom: -15px;
    height: 2px;
  }
}

.mtitle_inline .eng,
.mtitle_inline .ja {
  display: inline-block;
}

.mtitle_inline .ja:before {
  content: "/";
  margin: 0 10px;
}

.mtitle_inline .eng {
  font-size: 4rem;
  line-height: 1.2;
  color: #888;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_inline .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_inline .ja {
  font-size: 1.8rem;
  color: #333;
}

@media all and (max-width: 639px) {
  .mtitle_inline .eng {
    font-size: 3rem;
    display: block;
  }
  .mtitle_inline .eng:before {
    height: 60px;
    top: -64px;
  }
  .mtitle_inline .ja {
    font-size: 1.6rem;
    display: block;
  }
  .mtitle_inline .ja:before {
    content: "";
    margin: 0 0px;
  }
}

.mtitle_ja {
  margin: 0 auto 40px;
  text-align: center;
}

.mtitle_ja.tleft {
  text-align: left;
}

@media all and (max-width: 639px) {
  .mtitle_ja.tleft {
    text-align: center !important;
  }
}

.mtitle_ja.white {
  color: #fff;
}

.mtitle_ja.white .ja {
  color: #fff;
}

.mtitle_ja.white .ja:first-letter {
  color: #fff;
}

.mtitle_ja.white .eng {
  color: #fff;
}

.mtitle_ja .eng {
  font-size: 2rem;
  display: block;
  line-height: 1.6;
  color: #333;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_ja .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_ja .ja {
  font-size: 3.6rem;
  color: #888;
}

.mtitle_ja .ja.type2 {
  color: #888;
}

.mtitle_ja .ja:first-letter {
  color: #888;
}

.mtitle_ja .ja.white {
  color: #fff;
}

.mtitle_ja.white {
  color: #fff;
}

.mtitle_ja.white span {
  color: #fff;
}

.mtitle_ja.white span:after {
  background-color: #eee;
}

.mtitle_ja.white span.eng {
  opacity: 1;
  font-size: 5rem;
}

.mtitle_ja.white span.eng:first-letter {
  color: #ffc517;
}

.mtitle_ja.white span.eng:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 130px;
  background-color: #fff;
  left: 0;
  right: 0;
  top: -150px;
  margin: 0 auto;
}

.mtitle_ja.black {
  color: #555;
}

.mtitle_ja.black span {
  color: #555;
}

.mtitle_ja.black span:after {
  background-color: #555;
}

@media all and (max-width: 639px) {
  .mtitle_ja {
    text-align: center;
    margin-bottom: 20px;
  }
  .mtitle_ja .eng {
    font-size: 1.6rem;
  }
  .mtitle_ja .eng:before {
    height: 60px;
    top: -64px;
  }
  .mtitle_ja .ja {
    font-size: 2.2rem;
  }
  .mtitle_ja.white {
    color: #fff;
  }
  .mtitle_ja.white span {
    color: #fff;
  }
  .mtitle_ja.white span:after {
    background-color: #eee;
  }
  .mtitle_ja.white span.eng {
    opacity: 1;
    font-size: 2rem;
  }
  .mtitle_ja.white span.eng:first-letter {
    color: #ffc517;
  }
  .mtitle_ja.white span.eng:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 130px;
    background-color: #fff;
    left: 0;
    right: 0;
    top: -150px;
    margin: 0 auto;
  }
}

.mtitle_dashed {
  width: 100%;
  max-width: 100%;
  padding: 0.4em 0.5em 0.4em;
  margin: 30px auto;
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1.2;
  color: white;
  text-align: center;
  letter-spacing: 0.2em;
  background: #888;
  border: dashed 1px white;
  -webkit-box-shadow: 0 0 0 5px #888;
          box-shadow: 0 0 0 5px #888;
}

@media all and (max-width: 639px) {
  .mtitle_dashed {
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 15px 0;
  }
}

.mtitle_fleter {
  margin-bottom: 20px;
  padding: 5px 0;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.2;
  border-bottom: solid thin #aaa;
}

.mtitle_fleter::first-letter {
  font-size: 1.8em;
  color: #888;
}

.mtitle_fleter.big {
  font-size: 1.2em;
}

.mtitle_fleter.big::first-letter {
  font-size: 2.2em;
  color: #888;
}

.mtitle_num {
  margin: 15px 0;
  padding: 5px 0;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.2;
  border-bottom: solid thin #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mtitle_num > .num {
  font-size: 1.8em;
  color: #888;
  margin-right: 12px;
}

.mtitle_num.type_r > .num {
  font-size: 1.8em;
  color: #fff;
  background: #888;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 50px;
  padding: 0 10px;
  height: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}

.mtitle_num > .txt {
  color: #888;
}

.mtitle_line {
  width: 100%;
  position: relative;
  margin: 0 auto 30px;
  text-align: center;
}

.mtitle_line:before {
  position: absolute;
  content: "";
  width: 25%;
  height: 2px;
  left: 0;
  top: 40%;
  background: #888;
  background: -webkit-gradient(linear, left top, right top, from(#888), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, #888 0%, rgba(255, 255, 255, 0) 100%);
}

.mtitle_line:after {
  position: absolute;
  content: "";
  width: 25%;
  height: 2px;
  right: 0;
  top: 40%;
  background: #888;
  background: -webkit-gradient(linear, right top, left top, from(#888), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(270deg, #888 0%, rgba(255, 255, 255, 0) 100%);
}

.mtitle_line .ja {
  display: block;
  font-size: 2.5rem;
  line-height: 1.4;
  color: #888;
}

.mtitle_line .eng {
  display: block;
  font-size: 1.8rem;
  color: #888;
  line-height: 1;
}

@media all and (max-width: 639px) {
  .mtitle_line {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .mtitle_line .eng {
    font-size: 1.2rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    margin-left: auto;
    line-height: 1.3;
  }
  .mtitle_line .ja {
    font-size: 1.8rem;
  }
}

.mtitle_line.attention .eng {
  font-size: 2.8rem;
}

@media all and (max-width: 639px) {
  .mtitle_line.attention .eng {
    font-size: 1.8rem;
  }
}

.mtitle_line.attention:before {
  position: absolute;
  content: "";
  width: 20%;
  height: 2px;
  left: 0;
  top: 40%;
  background: #998969;
  background: -webkit-gradient(linear, left top, right top, from(#998969), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, #998969 0%, rgba(255, 255, 255, 0) 100%);
}

.mtitle_line.attention:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 2px;
  right: 0;
  top: 40%;
  background: #998969;
  background: -webkit-gradient(linear, right top, left top, from(#998969), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(270deg, #998969 0%, rgba(255, 255, 255, 0) 100%);
}

.mtitle_deco {
  margin: 0 auto 40px;
  position: relative;
  text-align: center;
}

.mtitle_deco.ita .eng {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_deco.ita .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_deco .eng {
  font-family: "Anton", sans-serif;
  font-size: 6.5rem;
  color: rgba(136, 136, 136, 0.1);
  background-image: url(../images/mtitle_deco.png);
  background-repeat: repeat;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
  display: block;
}

@media all and (-ms-high-contrast: none) {
  .mtitle_deco .eng {
    color: #888;
    background-image: none;
  }
}

.mtitle_deco .eng.big {
  font-size: 8rem;
}

@media all and (max-width: 639px) {
  .mtitle_deco .eng.big {
    font-size: 5rem;
  }
}

.mtitle_deco .ja {
  position: relative;
  z-index: 2;
  letter-spacing: 0.2em;
  font-size: 2rem;
}

.mtitle_deco .ja.big {
  font-size: 2.5rem;
}

@media all and (max-width: 639px) {
  .mtitle_deco .ja.big {
    font-size: 2rem;
  }
}

.mtitle_deco.left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.mtitle_deco.left:before {
  left: 2%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.mtitle_deco.left span:after {
  left: 0;
  -webkit-transform: none;
          transform: none;
}

@media all and (max-width: 639px) {
  .mtitle_deco {
    text-align: center;
  }
  .mtitle_deco .eng {
    font-size: 4rem;
  }
  .mtitle_deco .ja {
    font-size: 1.3rem;
  }
}

.mtitle2 {
  position: relative;
}

.mtitle2.tleft {
  text-align: left;
}

.mtitle2 .eng {
  font-size: 10rem;
  color: #888;
  display: block;
  line-height: 1.2;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  position: absolute;
  opacity: 0.2;
  bottom: -56px;
  right: 0;
}

.mtitle2 .eng:first-letter {
  text-transform: uppercase;
}

.mtitle2 .ja {
  font-size: 3rem;
  color: #888;
  position: relative;
}

.mtitle2 .ja:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  bottom: -30px;
  background-color: #888;
}

@media all and (max-width: 639px) {
  .mtitle2 .ja:before {
    bottom: -7px;
  }
}

@media all and (max-width: 639px) {
  .mtitle2 {
    text-align: center;
  }
  .mtitle2 .eng {
    font-size: 4rem;
  }
  .mtitle2 .ja {
    font-size: 1.6rem;
  }
}

.mtitle3 {
  margin: 0 0 0px;
  text-align: right;
  position: relative;
}

@media all and (max-width: 639px) {
  .mtitle3 {
    text-align: center;
  }
}

.mtitle3.tright {
  text-align: right;
}

.mtitle3 .eng {
  font-size: 5rem;
  color: #888;
  display: block;
  line-height: 1.2;
}

.mtitle3 .ja {
  font-size: 3rem;
  color: #555;
  font-weight: 300;
  position: relative;
}

@media all and (max-width: 639px) {
  .mtitle3 {
    text-align: center;
  }
  .mtitle3 .eng {
    font-size: 3rem;
  }
  .mtitle3 .ja {
    font-size: 1.4rem;
  }
}

.mtitle4 {
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
}

.mtitle4.tleft {
  text-align: left;
}

.mtitle4 .eng {
  font-size: 3rem;
  color: #888;
  display: block;
  line-height: 1.2;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  position: absolute;
  left: -35px;
}

.mtitle4 .eng:first-letter {
  text-transform: uppercase;
}

.mtitle4 .ja {
  font-size: 3rem;
  color: #333;
  position: relative;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
}

.mtitle4 .ja:before {
  position: absolute;
  content: "";
  width: 80px;
  height: 1px;
  bottom: -30px;
  background-color: #888;
}

@media all and (max-width: 639px) {
  .mtitle4 {
    text-align: center;
  }
  .mtitle4 .eng {
    font-size: 4rem;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    position: inherit;
    left: auto;
    right: auto;
    bottom: auto;
    text-align: center;
  }
  .mtitle4 .ja {
    font-size: 1.6rem;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    text-align: center;
    margin: 0 auto;
    display: block;
  }
  .mtitle4 .ja:before {
    width: 70px;
    height: 1px;
    bottom: -10px;
  }
}

.mtitle_sub {
  padding: 0 0 0 10px;
  font-weight: 600;
  position: relative;
  border-left: 6px solid #888;
  margin: 0px 0 15px 0px;
  font-size: 1.1em;
  line-height: 1.4;
  text-align: left;
}

.mtitle_sub .hissu {
  color: #fff;
  background: #a2a2a2;
  padding: 5px 8px;
  margin-right: 5px;
  font-size: 11px;
  border-radius: 20px;
}

.mtitle_sub:before {
  position: absolute;
  left: -6px;
  bottom: 0;
  content: "";
  width: 6px;
  height: 50%;
  background-color: #888;
}

.mtitle_bar {
  margin: 15px 0;
}

.mtitle_bar::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.7rem;
  background: repeating-linear-gradient(-45deg, transparent 0, transparent 0.3rem, rgba(136, 136, 136, 0.2) 0.3rem, rgba(136, 136, 136, 0.2) 0.7rem);
}

.mtitle_box {
  background: #888;
  color: #fff;
  font-size: 1.8rem;
  position: relative;
  padding: 15px 25px;
  margin-bottom: 25px;
  font-weight: 600;
  overflow: hidden;
  margin: 25px 0;
}

.mtitle_box.f-2 {
  text-align: center;
}

.mtitle_box.f-2 span {
  font-size: 2rem;
  text-align: center;
}

.mtitle_box span {
  font-weight: normal;
  font-size: 14px;
  padding-left: 10px;
}

.mtitle_box:before {
  background-color: rgba(255, 255, 255, 0.6);
  content: "";
  display: block;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  position: absolute;
  bottom: -250px;
  right: -150px;
  width: 300px;
  height: 280px;
}

@media all and (max-width: 896px) {
  .mtitle_box:before {
    font-size: 1.5rem;
    right: -200px;
  }
}

@media all and (max-width: 639px) {
  .mtitle_box {
    font-size: 1.5rem;
    margin: 0 0 15px;
  }
}

.mtitle_box.type1 {
  background-image: -webkit-gradient(linear, right top, left top, from(#888), to(#888));
}

.mtitle_box.type2 {
  background: #8FB8C9;
}

.mtitle_box2 {
  background: rgba(136, 136, 136, 0.2);
  font-size: 2.2rem;
  color: #232323;
  position: relative;
  font-weight: 600;
  overflow: hidden;
  letter-spacing: 0.1rem;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 6px 3px 2px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 6px 3px 2px;
  padding: 60px 60px;
  margin-bottom: 25px;
}

.mtitle_box2 .small-cap {
  font-weight: normal;
  font-size: 14px;
}

.mtitle_box2:after {
  background-color: #888;
  content: "";
  display: block;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  position: absolute;
  top: -250px;
  left: -150px;
  width: 300px;
  height: 280px;
}

.mtitle_box2:before {
  background-color: #888;
  content: "";
  display: block;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  position: absolute;
  bottom: -250px;
  right: -150px;
  width: 300px;
  height: 280px;
}

@media all and (max-width: 639px) {
  .mtitle_box2 {
    font-size: 15px;
    line-height: 1.5;
    padding: 25px 20px;
  }
  .mtitle_box2 span {
    font-size: 2rem;
  }
  .mtitle_box2:after {
    width: 123px;
    left: -170px;
    top: -98px;
  }
  .mtitle_box2:before {
    width: 123px;
    right: -170px;
    top: -106px;
  }
}

.mtitle_box3 {
  background: #888;
  color: #fff;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  margin: 25px 0;
}

@media all and (max-width: 639px) {
  .mtitle_box3 {
    font-size: 1.5rem;
  }
}

.mtitle_box3.b-m0 {
  margin-bottom: 0px !important;
}

.mtitle_box3::before {
  background-color: #fff;
  content: "";
  -webkit-transform: rotate(-144deg);
          transform: rotate(-144deg);
  display: block;
  opacity: 0.1;
  position: absolute;
  top: 350%;
  left: -4%;
  width: 200%;
  height: 930%;
}

@media all and (max-width: 639px) {
  .mtitle_box3::before {
    top: 280%;
    left: -64%;
  }
}

.mtitle_box3::after {
  background-color: #fff;
  content: "";
  display: block;
  opacity: 0.2;
  position: absolute;
  bottom: -190%;
  left: 85%;
  width: 10%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 620%;
}

@media all and (max-width: 639px) {
  .mtitle_box3::after {
    width: 40%;
  }
}

.mtitle_box3 .photo {
  margin: 0 auto;
  text-align: center;
}

.photo-h img {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .photo-h img {
    width: 100%;
    height: 130px;
    -o-object-fit: cover;
       object-fit: cover;
    margin-top: 60px;
    margin-bottom: 16px;
  }
}

.mtext1 {
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 600;
  color: #888;
}

.mtext1.tb-rl {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
}

@media all and (max-width: 639px) {
  .mtext1.tb-rl {
    -ms-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
            writing-mode: horizontal-tb;
  }
}

.mtext1.type1 {
  margin-left: 30px;
}

@media all and (max-width: 639px) {
  .mtext1.type1 {
    margin-left: 0px;
  }
}

@media all and (max-width: 639px) {
  .mtext1 {
    font-size: 1.5rem;
    padding: 0;
    margin-top: 30px;
  }
}

.mtext_line {
  padding: 10px;
  margin: 20px 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  border-top: solid 2px #212529;
  border-bottom: solid 2px #212529;
}

.mtext_line span {
  font-size: 1.3rem;
}

@media all and (max-width: 639px) {
  .mtext_line {
    font-size: 1.4rem;
  }
  .mtext_line span {
    font-size: 1.1rem;
  }
}

.mtext_large {
  font-weight: bold;
  font-size: 3.0rem;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 10px;
}

.mtext_large:first-letter {
  color: #888;
}

@media all and (max-width: 1100px) {
  .mtext_large {
    font-size: 2.0rem;
  }
}

@media all and (max-width: 639px) {
  .mtext_large {
    font-size: 2rem;
  }
}

.mtext_large.t-center {
  text-align: center;
}

.mtext_large.white {
  color: #fff;
}

@media all and (max-width: 639px) {
  .mtext_large.white {
    font-size: 2rem;
  }
}

.mtext_middle {
  font-weight: bold;
  font-size: 2.6rem;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 10px;
}

@media all and (max-width: 1100px) {
  .mtext_middle {
    font-size: 2.0rem;
  }
}

@media all and (max-width: 639px) {
  .mtext_middle {
    font-size: 1.6rem;
  }
}

.mtext_middle.t-center {
  text-align: center;
}

.mtext_middle.white {
  color: #fff;
}

.mtitle_bl {
  font-size: 1.6rem;
  border-left: 3px solid #888;
  line-height: 1.6;
  font-weight: 600;
  margin: 24px 0;
  padding: 6px 0.5em;
}

@media all and (max-width: 639px) {
  .mtitle_bl {
    font-size: 1.5rem;
    padding: 6px 0.5em;
    margin-top: 30px;
  }
}

.mtitle_cursol_b {
  position: relative;
  padding: 1rem 0.5rem;
  margin-bottom: 30px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #888;
  border-top: solid 1px #888;
  border-bottom: solid 1px #888;
}

.mtitle_cursol_b::after {
  position: absolute;
  top: 100%;
  left: 110px;
  width: 0;
  height: 0;
  content: "";
  border: solid 15px transparent;
  border-top-color: #888;
}

.mtitle_cursol_b.tcenter::after {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  content: "";
  border: solid 10px transparent;
  border-top-color: #888;
}

@media (max-width: 992px) {
  .mtitle_cursol_b {
    padding: 1rem 0;
    text-align: center;
  }
  .mtitle_cursol_b::after {
    left: 50%;
    border-width: 10px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.mtitle_cursol_b2 {
  color: #fff;
  position: relative;
  padding: 20px 1rem;
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  background-color: #888;
}

.mtitle_cursol_b2.tcenter::after {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  content: "";
  border: solid 15px transparent;
  border-top-color: #888;
}

.mtitle_cursol_b2::after {
  position: absolute;
  top: 100%;
  left: 50px;
  width: 0;
  height: 0;
  content: "";
  border: solid 15px transparent;
  border-top-color: #888;
}

@media (max-width: 1100px) {
  .mtitle_cursol_b2::after {
    border-width: 10px;
  }
}

@media (max-width: 576px) {
  .mtitle_cursol_b2 {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
}

.mttl_bl {
  font-size: 1.6rem;
  border-left: 2px solid #888;
  background-color: #f2f2f2;
  line-height: 1.6;
  font-weight: 600;
  margin: 24px 0;
  padding: 6px 0.5em;
}

@media all and (max-width: 639px) {
  .mttl_bl {
    font-size: 1.5rem;
    padding: 6px 0.5em;
    margin-top: 30px;
  }
}

.s-txt {
  font-size: 1.8rem;
}

@media all and (max-width: 639px) {
  .s-txt {
    font-size: 1.5rem;
    padding: 0 20px;
  }
}

.mtext2-list {
  width: 95%;
  margin-top: 50px;
}

.mtext2 {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .mtext2 {
    font-size: 1.8rem;
    padding: 4px 8px;
  }
}

.mtext3 {
  font-size: 1.8rem;
  letter-spacing: 0.15em;
}

@media all and (max-width: 639px) {
  .mtext3 {
    font-size: 1.4rem;
  }
}

.mtitle_category {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: normal;
}

.mtitle_category:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0ca";
  font-weight: 900;
  margin-right: 5px;
  color: #888;
}

/* btn
----------------------------------*/
.btn_aline.center {
  text-align: center;
}

.btn_aline .child {
  display: inline-block;
}

@media all and (max-width: 896px) {
  .btn_aline .child {
    display: block;
  }
}

.btn_more01 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 50px;
}

.btn_more01 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #888;
  padding-right: 30px;
}

.btn_more01:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #888;
  border-radius: 50%;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn_more01:after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  top: 50%;
  right: 10px;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn_more01:hover:before {
  background: #888;
}

.btn_more01:hover:after {
  border-color: #fefefe !important;
}

@media all and (max-width: 896px) {
  .btn_more01 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    max-width: 160px;
    margin: 10px auto;
    background: #fff;
    padding: 6px 20px;
    border-radius: 30px;
  }
  .btn_more01:before {
    right: 10px;
  }
  .btn_more01:after {
    right: 20px;
  }
}

.btn01 a {
  background: #fefefe;
  text-align: center;
  max-width: 300px;
  margin: 15px auto;
  color: #888;
  display: block;
  padding: 8px 5px;
  font-weight: 600;
  border: 1px solid #888;
}

.btn01 a:hover {
  background: #888;
  color: #fefefe;
}

.btn01.mail {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn01.mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 5px;
}

.btn01.tel {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn01.tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

@media all and (max-width: 639px) {
  .btn01 a {
    width: 95%;
  }
}

.btn02 a {
  text-align: center;
  max-width: 300px;
  margin: 15px auto;
  display: block;
  padding: 8px 5px;
  font-weight: 600;
  border: 1px solid #888;
  background: #888;
  color: #fefefe;
}

.btn02 a:hover {
  background: #fff;
  color: #888;
}

.btn02.mail {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn02.mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 5px;
}

.btn02.tel {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn02.tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

@media all and (max-width: 639px) {
  .btn02 a {
    width: 95%;
  }
}

.btn03 a {
  background: #fff;
  -webkit-box-shadow: rgba(136, 136, 136, 0.2) 0 0 2px 2px;
          box-shadow: rgba(136, 136, 136, 0.2) 0 0 2px 2px;
  text-align: center;
  max-width: 300px;
  margin: 15px auto;
  color: #888;
  display: block;
  padding: 8px 5px;
  font-weight: 600;
}

.btn03 a:hover {
  background: #888;
  color: #fefefe;
}

.btn03.mail {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn03.mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 5px;
}

.btn03.tel {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.btn03.tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

@media all and (max-width: 639px) {
  .btn03 a {
    width: 95%;
  }
}

.btn04 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn04.center a {
  margin: 0 auto;
}

.btn04.right a {
  margin: 0 0 0 auto;
}

@media all and (max-width: 896px) {
  .btn04.right a {
    margin: 0 auto;
  }
}

.btn04.radius a {
  overflow: hidden;
}

.btn04.radius a::before {
  border-radius: 20px;
}

.btn04.white a {
  color: #555;
  background: #fff;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 2px 2px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 2px 2px;
}

.btn04.white a:after {
  color: #888;
}

.btn04.white a::before {
  background: #888;
  color: #fff;
}

.btn04.white a:hover::after {
  color: #fff;
}

.btn04.white a:hover {
  opacity: 1;
}

.btn04 a {
  color: #fff;
  display: block;
  font-size: 1.8rem;
  letter-spacing: .1px;
  line-height: 1;
  padding: 30px 40px;
  position: relative;
  text-align: center;
  -webkit-transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
  max-width: 360px;
  background: #888;
  position: relative;
  z-index: 10;
  color: #fff;
  font-weight: bold;
}

@media all and (max-width: 896px) {
  .btn04 a {
    font-size: 1.3rem;
    margin: 0 auto;
  }
}

.btn04 a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  display: -ms-grid;
  display: grid;
  top: 0;
  bottom: 0;
  right: 10%;
  place-items: center;
  color: #fff;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn04 a:hover::after {
  right: 1%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn04 a::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  content: '';
  background: #111;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.btn04 a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.btn_mini.radius a {
  border-radius: 20px;
}

.btn_mini a {
  background: #fefefe;
  text-align: center;
  width: 150px;
  color: #888;
  display: block;
  padding: 3px 5px;
  font-weight: 600;
  border: 1px solid;
  font-size: 1.4rem;
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.btn_mini a:hover {
  background: #888;
  color: #fefefe;
}

.btn_mini.center a {
  margin: 10px auto;
}

@media all and (max-width: 639px) {
  .btn_mini {
    margin: 10px auto;
  }
}

.btn_mini.mail {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.btn_mini.mail a {
  background: #ffc517;
  margin: 15px auto 25px;
}

.btn_mini.mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 5px;
}

.tbtn {
  width: 93%;
  margin: 0 auto;
  text-align: right;
  font-weight: bold;
}

@media all and (max-width: 639px) {
  .tbtn {
    margin-bottom: 40px;
    text-align: center;
  }
}

.btn05 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 1.5rem;
  font-weight: 700;
  background-color: #cccccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn05 a:before {
  content: "";
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 100%;
  height: 2px;
  background-color: #bbbbbb;
  -webkit-transition: 0.2s ease 0s;
  transition: 0.2s ease 0s;
}

.btn05 a:after {
  content: "";
  position: absolute;
  top: 7px;
  right: -7px;
  width: 2px;
  height: 100%;
  background-color: #bbbbbb;
  -webkit-transition: 0.2s ease 0.2s;
  transition: 0.2s ease 0.2s;
}

.btn05 a:hover {
  text-decoration: none;
  background-color: rgba(136, 136, 136, 0.7);
}

.btn05 a:hover:before {
  width: 0%;
}

.btn05 a:hover:after {
  height: 0%;
}

/* news
----------------------------------*/
.news .news-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid #333;
  font-size: 1.4rem;
  font-weight: 600;
}

.news .news-inner:last-of-type {
  border-bottom: 1px solid #333;
}

@media all and (max-width: 639px) {
  .news .news-inner {
    font-size: 13px;
    padding: 10px 4px;
  }
}

.news dt {
  width: 7em;
  color: #888;
  text-align: center;
}

@media all and (max-width: 639px) {
  .news dt {
    width: 6em;
  }
}

.news dd {
  width: calc(100% - 8.5em);
  margin-left: 8px;
}

@media all and (max-width: 639px) {
  .news dd {
    width: calc(100% - 7.5em);
  }
}

.page_title02 {
  position: relative;
  width: 100%;
  z-index: 0;
}

.page_title02.type_r .photo {
  border-radius: 30px;
  width: 96%;
}

.page_title02 .photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.page_title02 .photo img {
  width: 100%;
  height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .page_title02 .photo img {
    height: 250px;
  }
}

.page_title02 .photo:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #111;
  opacity: 0.3;
  z-index: 1;
}

.page_title02 .ttl {
  font-size: 1.8rem;
  display: -ms-grid;
  display: grid;
  place-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}

.page_title02 .ttl .mtitle_ja .ja,
.page_title02 .ttl .mtitle_ja .eng,
.page_title02 .ttl .mtitle .ja,
.page_title02 .ttl .mtitle .eng {
  color: #fff;
}

.page_title02 .ttl .mtitle_ja .ja::first-letter,
.page_title02 .ttl .mtitle_ja .eng::first-letter,
.page_title02 .ttl .mtitle .ja::first-letter,
.page_title02 .ttl .mtitle .eng::first-letter {
  color: #fff;
}

.page_title02 .ttl .mtitle_ja .ja {
  font-size: 5rem;
}

@media all and (max-width: 639px) {
  .page_title02 .ttl .mtitle_ja .ja {
    font-size: 2rem;
  }
}

.page_title02.bg_white:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page_title02.bg_black:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.page_title02.bg_base:before {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.page_title02.bg_base:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(136, 136, 136, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.page_title01 {
  position: relative;
  padding-bottom: 120px;
  padding-bottom: 0;
  position: relative;
  height: 75vh;
}

.page_title01.type1:after {
  background-image: url(../images/01.jpg);
}

.page_title01.type2:after {
  background-image: url(../images/02.jpg);
}

.page_title01.column-inner-contents-txtarea.type3:after {
  background-image: url(../images/03.jpg);
}

.page_title01.type4:after {
  background-image: url(../images/04.jpg);
}

.page_title01.type5:after {
  background-image: url(../images/05.jpg);
}

.page_title01:before {
  content: "";
  position: absolute;
  top: -400px;
  left: -400px;
  background-color: #888;
  width: 800px;
  height: 800px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 9;
}

@media all and (max-width: 639px) {
  .page_title01:before {
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
  }
}

.page_title01:after {
  content: "";
  position: absolute;
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 90%;
  height: 100%;
  z-index: 0;
}

@media all and (max-width: 639px) {
  .page_title01:after {
    overflow: hidden;
    padding-bottom: 40px;
  }
}

.page_title01 .ttl {
  z-index: 50;
  position: absolute;
  line-height: 6.2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36%;
  height: 100%;
  margin: auto;
  -webkit-transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  text-align: center;
}

.page_title01 .ttl .ja_middle {
  font-size: 5vw;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  padding: 8px 20px;
  text-shadow: 0px 0px 5px #111, 0px 0px 5px #111, 0px 0px 10px #111, 0px 0px 10px #111, 0px 0px 15px #111, 0px 0px 15px;
}

.page_title01 .ttl .ja_small {
  font-size: 2vw;
  line-height: 6rem;
  color: #fff;
  background-color: #888;
  border: 4px double #fff;
  font-weight: bold;
  padding: 30px 8px;
}

@media all and (max-width: 639px) {
  .page_title01 .ttl {
    bottom: 20%;
    left: 10px;
  }
  .page_title01 .ttl .ja_middle {
    font-size: 14vw;
  }
  .page_title01 .ttl .ja_small {
    font-size: 6vw;
  }
}

.page-title {
  position: relative;
  z-index: 1;
}

.page-title.radius {
  border-radius: 0px;
  -webkit-clip-path: ellipse(100% 100% at top);
  clip-path: ellipse(100% 100% at top);
}

.page-title.radius a {
  border-radius: 0px;
}

.page-title.slash:after {
  position: absolute;
  content: "";
  left: 31%;
  top: 0;
  width: 40%;
  height: 100%;
  z-index: -1;
  background: rgba(255, 255, 255, 0.2);
  -webkit-transform: skew(-31deg);
          transform: skew(-31deg);
}

.page-title:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.page-title.type1 {
  background: #111;
}

.page-title.type2 {
  background: url(../images/02.jpg) no-repeat center 100%/cover;
}

.page-title.type3 {
  background: url(../images/03.jpg) no-repeat center 100%/cover;
}

.page-title.type4 {
  background: url(../images/04.jpg) no-repeat center 100%/cover;
}

.page-title.type5 {
  background: url(../images/05.jpg) no-repeat center 100%/cover;
}

.page-title .inner {
  margin: 0 auto;
  padding: 60px 0 0px;
  max-width: 1200px;
  overflow: hidden;
}

.page-title .inner .page-lead {
  color: #fff;
  text-align: center;
  font-size: 2.2rem;
  position: relative;
  margin: 0 auto;
}

.page-title .inner .page-lead .eng {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 8rem;
  color: #fff !important;
  /*  color: transparent; */
  /*  background: #fff;
        text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(148, 148, 148, 0.4);
        -webkit-background-clip: text; */
}

.page-title .inner .page-lead .eng:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 639px) {
  .page-title .inner .page-lead {
    font-size: 1.5rem;
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  .page-title .inner .page-lead .eng {
    font-size: 3.5rem;
  }
}

@media all and (max-width: 896px) {
  .page-title .inner {
    width: 100%;
    padding: 100px 0 30px;
  }
}

@media all and (max-width: 639px) {
  .page-title .inner {
    width: 100%;
    padding: 40px 0 40px;
  }
}

.white_txt .mtitle .eng,
.white_txt .mtitle .ja {
  color: #fff !important;
}

.white_txt .mtitle .eng:first-letter,
.white_txt .mtitle .ja:first-letter {
  color: #fff !important;
}

.white_txt p {
  color: #fff !important;
}

.border-bg:after {
  position: absolute;
  content: "";
  width: 0;
  height: 10px;
  left: -31.3%;
  top: 130px;
  z-index: 1;
  background: #50874f;
  background: linear-gradient(140deg, #50874f 0%, #80ad7a 42%, #53a454 72%, #3f7534 100%);
}

@media all and (max-width: 896px) {
  .border-bg:after {
    height: 6px;
    left: -4.3%;
    top: 136px;
  }
}

.border-bg-anime:after {
  -webkit-animation: bganime1 0.8s linear forwards;
  animation: bganime1 0.8s linear forwards;
}

@-webkit-keyframes bganime1 {
  0% {
    width: 0%;
  }
  100% {
    width: 64%;
  }
}

@keyframes bganime1 {
  0% {
    width: 0%;
  }
  100% {
    width: 64%;
  }
}

.greeting_bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(136, 136, 136, 0.2);
}

.greeting_bg .single {
  z-index: 2;
}

.greeting_bg .single .mbox {
  padding: 80px;
}

.greeting_bg:before {
  content: "";
  position: absolute;
  width: 100%;
  background: url(../images/01.jpg) no-repeat;
  background-size: 700px auto;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.2;
}

.greeting_bg:after {
  content: "";
  position: absolute;
  width: 100%;
  background: url(../images/02.jpg) no-repeat;
  top: inherit;
  bottom: 0;
  left: inherit;
  right: 0;
  margin-top: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: 700px auto;
  background-position: bottom right;
  opacity: 0.2;
}

.greeting_photo {
  position: absolute;
  top: -95px;
  right: -180px;
}

.greeting_photo figure {
  max-width: 380px;
  height: 240px;
}

.greeting_photo figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 840px) {
  .greeting_photo {
    position: relative;
    top: 0;
    right: 0;
  }
  .greeting_photo figure {
    text-align: center;
    margin: 0 auto;
    height: auto;
  }
}

@media all and (max-width: 639px) {
  .greeting_bg .single .mbox {
    padding: 20px;
  }
}

@media all and (max-width: 639px) {
  .greeting_bg:before {
    background-size: 60% auto;
  }
}

@media all and (max-width: 639px) {
  .greeting_bg:after {
    background-size: 60% auto;
  }
}

.bg-base {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  position: relative;
}

.bg-base .inner {
  width: calc(100% - 100px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.bg-base .inner:before {
  position: absolute;
  content: "Greeting";
  font-size: 20rem;
  font-family: "Akshar", sans-serif;
  font-weight: 500;
  left: 0;
  top: -120px;
  display: inline-block;
  background: #50874f;
  background: linear-gradient(140deg, #50874f 0%, #80ad7a 42%, #53a454 72%, #3f7534 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-base:before {
  position: absolute;
  content: "";
  width: 580px;
  height: 100%;
  background-position: bottom right;
  background-size: cover;
  right: 0;
  bottom: 0;
}

@media all and (max-width: 1367px) {
  .bg-base.t-m100 {
    margin-top: 0px;
  }
  .bg-base .inner {
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .bg-base .inner:before {
    position: absolute;
    content: "Greeting";
    font-size: 14rem;
    font-family: "Akshar", sans-serif;
    font-weight: 500;
    left: 0;
    top: -40px;
  }
}

@media all and (max-width: 896px) {
  .bg-base.t-m100 {
    margin-top: 0px;
  }
  .bg-base .inner {
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .bg-base .inner:before {
    position: absolute;
    content: "Greeting";
    font-size: 10rem;
    font-family: "Akshar", sans-serif;
    font-weight: 500;
    left: 0;
    top: -20px;
  }
}

@media all and (max-width: 639px) {
  .bg-base .inner {
    width: calc(100% - 0px);
    margin-left: auto;
    margin-right: auto;
  }
  .bg-base .inner:before {
    position: absolute;
    content: "Greeting";
    font-size: 6rem;
    font-family: "Akshar", sans-serif;
    font-weight: 500;
    left: 20px;
    top: 20px;
  }
}

.bg-gray {
  margin: 50px auto;
  padding: 30px 0;
  width: calc(100% - 80px);
  position: relative;
  border-radius: 20px;
  background-image: linear-gradient(23deg, rgba(224, 224, 224, 0.02) 0%, rgba(202, 202, 202, 0.02) 13%, transparent 13%, transparent 80%, rgba(65, 65, 65, 0.02) 80%, rgba(163, 163, 163, 0.02) 100%), linear-gradient(42deg, rgba(98, 98, 98, 0.02) 0%, rgba(128, 128, 128, 0.02) 36%, transparent 36%, transparent 77%, rgba(252, 252, 252, 0.02) 77%, rgba(252, 252, 252, 0.02) 100%), linear-gradient(286deg, rgba(173, 173, 173, 0.02) 0%, rgba(173, 173, 173, 0.02) 2%, transparent 2%, transparent 12%, rgba(196, 196, 196, 0.02) 12%, rgba(105, 105, 105, 0.02) 100%), linear-gradient(77deg, rgba(87, 87, 87, 0.02) 0%, rgba(136, 136, 136, 0.02) 18%, transparent 18%, transparent 55%, rgba(247, 247, 247, 0.02) 55%, rgba(247, 247, 247, 0.02) 100%), linear-gradient(90deg, #fff, #fff);
}

@media all and (max-width: 896px) {
  .bg-gray {
    width: calc(100% - 20px);
    margin: 50px auto;
    padding: 0 10px;
  }
}

@media all and (max-width: 639px) {
  .bg-gray {
    width: calc(100% - 0px);
    margin: 30px auto;
    padding: 0 0px;
  }
}

.bg-gray2 {
  margin-left: 20px;
  margin-right: 20px;
  padding: 40px 15px;
  background-image: linear-gradient(23deg, rgba(228, 228, 228, 0.02) 0%, rgba(202, 202, 202, 0.02) 13%, transparent 13%, transparent 80%, rgba(107, 107, 107, 0.02) 80%, rgba(11, 11, 11, 0.02) 100%), linear-gradient(42deg, rgba(98, 98, 98, 0.02) 0%, rgba(98, 98, 98, 0.02) 36%, transparent 36%, transparent 77%, rgba(252, 252, 252, 0.02) 77%, rgba(252, 252, 252, 0.02) 100%), linear-gradient(286deg, rgba(173, 173, 173, 0.02) 0%, rgba(173, 173, 173, 0.02) 2%, transparent 2%, transparent 12%, rgba(59, 59, 59, 0.02) 12%, rgba(59, 59, 59, 0.02) 100%), linear-gradient(77deg, rgba(87, 87, 87, 0.02) 0%, rgba(87, 87, 87, 0.02) 18%, transparent 18%, transparent 55%, rgba(247, 247, 247, 0.02) 55%, rgba(247, 247, 247, 0.02) 100%), linear-gradient(90deg, #fff, #fff);
}

@media all and (max-width: 639px) {
  .bg-gray2 {
    padding: 0px 5px;
    margin: 0px;
  }
}

.bg-gray3 {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: #f2f2f2;
}

.bg-gray4 {
  position: relative;
}

.bg-gray4:before {
  content: "";
  position: absolute;
  width: 100%;
  background-color: #f2f2f2;
  background-position: center center;
  top: 3%;
  bottom: 0;
  right: 0;
  left: auto;
  width: 80%;
  height: 90%;
  z-index: -1;
}

.bg-gray4.reverse:before {
  right: auto;
  left: 0;
}

.bg-gray5 {
  background: #f2f2f2;
  position: relative;
}

.bg-gray5:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
          clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
}

.bg-beige {
  position: relative;
  background: #f6f0df;
}

.bg-beige.type1 {
  background: transparent;
}

.bg-beige.type1:before {
  position: absolute;
  content: "";
  width: calc(100% - 80px);
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  background: #f6f0df;
  z-index: -1;
  opacity: 0.8;
}

@media all and (max-width: 639px) {
  .bg-beige.type1:before {
    width: calc(100% - 10px);
  }
}

.bg-beige2 {
  background: #f6f0df;
  position: relative;
}

.bg-beige2:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
          clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
}

.bg_pattern {
  position: relative;
}

.bg_pattern:before {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(../pattern/elegant.jpg);
  background-repeat: repeat;
  background-attachment: cover;
  top: 0%;
  right: auto;
  left: 0;
  width: 50%;
  height: 60%;
  z-index: -1;
}

.bg_pattern.reverse:before {
  right: auto;
  left: 0;
}

.bg_base_color {
  background-color: rgba(136, 136, 136, 0.6);
}

.bg_base_color.beta {
  background-color: #888888;
}

.bg_base_color.type1 {
  background-color: rgba(136, 136, 136, 0);
  position: relative;
}

.bg_base_color.type1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  bottom: 0;
  background-color: rgba(136, 136, 136, 0.3);
}

.bg_base_color.type_beta {
  background-color: rgba(136, 136, 136, 0);
  position: relative;
}

.bg_base_color.type_beta:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 90%;
  left: 0;
  bottom: 0;
  background-color: #888888;
}

.bg_sharp {
  clip-path: polygon(0 0, 100% 4rem, 100% 100%, 0 calc(100% - 4rem));
  -webkit-clip-path: polygon(0 0, 100% 4rem, 100% 100%, 0 calc(100% - 4rem));
}

.bg_gingata {
  background: url(../okinawa/bingata.jpg);
  z-index: 1;
}

.bg_deco01 {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg_deco01.fixed:before, .bg_deco01.fixed:after {
  position: fixed;
  z-index: -1;
}

@media all and (max-width: 639px) {
  .bg_deco01.fixed:before, .bg_deco01.fixed:after {
    position: absolute;
  }
}

.bg_deco01:before {
  content: "";
  position: absolute;
  background: url(../okinawa/bg_deco01.png) no-repeat;
  background-size: 700px auto;
  top: 60px;
  right: -120px;
  left: inherit;
  width: 50%;
  height: 100%;
  z-index: 0;
  opacity: 0.2;
}

.bg_deco01:after {
  content: "";
  position: absolute;
  width: 100%;
  background: url(../okinawa/bg_deco02.png) no-repeat;
  bottom: -45%;
  left: 0;
  right: inherit;
  width: 700px;
  height: 100%;
  z-index: 1;
  background-size: 700px auto;
  opacity: 0.2;
}

@media all and (max-width: 639px) {
  .bg_deco01 {
    overflow: hidden;
  }
  .bg_deco01:before {
    top: -30px;
    right: -120px;
    width: 100%;
    background-size: 500px auto;
  }
  .bg_deco01:after {
    bottom: -80%;
    left: -60px;
    width: 100%;
    background-size: 300px auto;
  }
}

.bg_deco02 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg_deco02:after {
  content: "";
  position: absolute;
  width: 100%;
  background: url(../okinawa/bg_footer02.png) no-repeat;
  bottom: 0;
  left: inherit;
  right: 0;
  width: 700px;
  height: 75%;
  z-index: 1;
  background-size: 700px auto;
}

@media all and (max-width: 639px) {
  .bg_deco02:after {
    bottom: -10%;
    left: 0px;
    width: 100%;
    background-size: 100% auto;
    opacity: 0.4;
  }
}

.bg_deco03 {
  background-image: url(../okinawa/bg_top.png), url(../okinawa/bg_footer.png);
  background-position: top, bottom;
  background-repeat: repeat-x;
  background-color: #fff;
}

.bg_img_growing_ttl {
  position: fixed;
  top: 30%;
  left: 10%;
  z-index: -2;
}

@media all and (max-width: 639px) {
  .bg_img_growing_ttl {
    left: 2%;
  }
}

.bg_img_growing_wrap {
  padding: 300px 0;
}

.bg_img_growing {
  position: fixed;
  z-index: -2;
  top: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.bg_img_growing.type1 {
  background: url("../images/01.jpg") no-repeat top center;
}

.bg_img_growing.type2 {
  background: url("../images/02.jpg") no-repeat top center;
}

.bg_img_growing.type3 {
  background: url("../images/03.jpg") no-repeat top center;
}

.bg_img_growing.type4 {
  background: url("../images/04.jpg") no-repeat top center;
}

.bg_img_growing.type5 {
  background: url("../images/05.jpg") no-repeat top center;
}

.bg_img_growing.bg_black:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_img_scroll {
  position: fixed;
  z-index: -2;
  top: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.bg_img_scroll.type1 {
  background: url("../images/01.jpg") no-repeat top center;
}

.bg_img_scroll.type2 {
  background: url("../images/02.jpg") no-repeat top center;
}

.bg_img_scroll.type3 {
  background: url("../images/03.jpg") no-repeat top center;
}

.bg_img_scroll.type4 {
  background: url("../images/04.jpg") no-repeat top center;
}

.bg_img_scroll.type5 {
  background: url("../images/05.jpg") no-repeat top center;
}

.bg_img_scroll.bg_black:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_resycle {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg_resycle.fixed:before {
  background-attachment: fixed;
}

.bg_resycle:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: -2;
  top: 0;
  left: 0;
}

.bg_resycle.bg_white:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_resycle.type1:before {
  background-image: url(../resycle/bg01.jpg);
}

.img_deco {
  position: absolute;
  top: -110px;
  right: 0;
  left: 0;
  margin: 0 auto 20px;
  max-width: 260px;
}

.img_deco img {
  width: 100%;
}

@media all and (max-width: 896px) {
  .img_deco {
    position: relative;
    margin: 20px auto 0px;
    top: -30px;
    max-width: 300px;
  }
}

.bg_img {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg_img:after {
  content: "";
  position: absolute;
  background-color: rgba(17, 17, 17, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.bg_img:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -2;
  top: 0;
  left: 0;
}

.bg_img.fixed:before {
  background-attachment: fixed;
}

.bg_img.bg_white:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_img.bg_black:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_img.bg_base:before {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.bg_img.bg_base:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(136, 136, 136, 0.8);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg_img.type1:before {
  background-image: url(../images/04.jpg);
}

.bg_img.type2:before {
  background-image: url(../images/bg_img02.jpg);
}

.bg_img.type3:before {
  background-image: url(../images/bg_img03.jpg);
}

.bg_img.type4:before {
  background-image: url(../images/bg_img04.jpg);
}

.bg_img.type5:before {
  background-image: url(../images/bg_img05.jpg);
}

/* tbl
----------------------------------*/
.tbl {
  width: 100%;
  font-size: 1.1rem !important;
  margin: 10px 0;
}

.tbl a {
  text-decoration: underline;
}

.tbl a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1c1";
  font-weight: 900;
  color: #D81E1E;
  margin-right: 3px;
}

.tbl.shima th:nth-child(2n), .tbl.shima th:nth-child(3n), .tbl.shima th:nth-child(4n), .tbl.shima th:nth-child(5n) {
  width: 55px;
}

@media all and (max-width: 639px) {
  .tbl.shima th:nth-child(2n), .tbl.shima th:nth-child(3n), .tbl.shima th:nth-child(4n), .tbl.shima th:nth-child(5n) {
    width: 20px !important;
  }
}

.tbl.callendar {
  text-align: center;
}

.tbl.callendar th {
  width: calc(100% / 8);
}

.tbl.callendar td {
  width: calc(100% / 8);
}

.tbl th,
.tbl td {
  font-size: 1.2rem !important;
}

@media all and (max-width: 639px) {
  .tbl {
    font-size: 1.1rem !important;
    padding: 5px;
  }
  .tbl th,
  .tbl td {
    font-size: 1.1rem !important;
  }
}

.tbl.type01 th {
  width: 35%;
}

.tbl th,
.tbl td {
  padding: 10px;
  vertical-align: middle;
  border: 1px solid #aaa;
}

.tbl th {
  color: #888;
  background: #fbfbfb;
}

.tbl th span {
  font-size: 1.4rem;
}

.tbl td.price {
  text-align: right;
  font-size: 1.2em;
  font-weight: 600;
}

.tbl td.price span {
  font-size: 1.1rem;
}

.tbl .cell01 {
  width: 25%;
}

.tbl.type_shima th,
.tbl.type_shima td {
  padding: 10px;
  vertical-align: middle;
  border: 1px solid #ddd;
}

.tbl.type_shima th:first-child {
  width: 20%;
}

.tbl.type_shima th:nth-child(2n) {
  width: 60%;
}

.tbl.type_shima th:last-child {
  width: 20%;
}

.tbl.type_shima td:last-child {
  text-align: center;
}

@media all and (max-width: 639px) {
  .tbl th {
    width: 35%;
    text-align: left;
  }
  .tbl th,
  .tbl td {
    padding: 10px;
  }
}

.fee {
  font-size: 1.2em;
  font-weight: 600;
}

.tbl_fee {
  width: 100%;
  line-height: 1.2;
  margin-bottom: 20px;
  background-color: #fafafa;
  border: 1px solid #ddd;
}

.tbl_fee.type1 {
  background-color: #fff;
  border: 0px solid #333;
  font-weight: bold;
}

.tbl_fee.type1 th,
.tbl_fee.type1 td {
  vertical-align: top;
  padding: 15px 0px;
  border-bottom: 1px solid #333;
  font-weight: bold;
  color: #111;
}

.tbl_fee.type1 td {
  color: #D81E1E;
}

.tbl_fee.type1 tr:nth-child(even) {
  background-color: rgba(238, 238, 238, 0.2);
}

.tbl_fee tr:nth-child(even) {
  background-color: #eee;
}

.tbl_fee th,
.tbl_fee td {
  vertical-align: top;
  padding: 15px 10px;
  border-bottom: 1px solid #ddd;
}

.tbl_fee th span,
.tbl_fee td span {
  font-size: 80%;
}

.tbl_fee th {
  text-align: left;
  font-weight: 500;
}

.tbl_fee td {
  text-align: right;
  font-size: 1.2em;
  font-weight: 600;
}

.tbl_fee td.price {
  color: #888;
}

.tbl_fee td span {
  font-size: 1.1rem;
}

.tbl_price_calc {
  width: 100%;
}

.tbl_price_calc th,
.tbl_price_calc td {
  font-size: 1.4rem;
  padding: 15px;
  vertical-align: middle;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}

.tbl_price_calc th span.price,
.tbl_price_calc td span.price {
  font-size: 2rem;
  color: #888;
  font-family: "YakuHanJP", "Josefin Sans", "sans-serif";
}

@media all and (max-width: 639px) {
  .tbl_price_calc th span.price,
  .tbl_price_calc td span.price {
    font-size: 1.4rem;
  }
}

.tbl_price_calc th .small,
.tbl_price_calc td .small {
  font-weight: normal;
}

.tbl_price_calc th {
  background: rgba(136, 136, 136, 0.1);
  border: 2px solid #888;
}

.tbl_price_calc td {
  background-color: #EFF4DD;
}

.tbl_price_calc .th-1 {
  background-color: #fff !important;
  padding: 5px;
  font-weight: 3.2rem;
}

@media all and (max-width: 639px) {
  .tbl_price_calc th,
  .tbl_price_calc td {
    padding: 10px 5px;
    font-size: 10px;
  }
  .tbl_price_calc th span,
  .tbl_price_calc td span {
    font-size: 10px;
  }
}

.tbl_price_kaigo {
  width: 100%;
}

.tbl_price_kaigo th,
.tbl_price_kaigo td {
  padding: 15px;
  vertical-align: middle;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  border: 1px solid #fff;
}

.tbl_price_kaigo th .small,
.tbl_price_kaigo td .small {
  font-weight: normal;
}

.tbl_price_kaigo tr {
  background-color: #E1EDC5;
}

.tbl_price_kaigo tr:nth-child(even) td {
  background-color: #E1EDC5;
}

.tbl_price_kaigo th {
  background: #C1DB80;
}

.tbl_price_kaigo td {
  background-color: #EFF4DD;
}

.tbl_price_kaigo .th-1 {
  background-color: #fff !important;
  padding: 5px;
}

@media all and (max-width: 639px) {
  .tbl_price_kaigo th,
  .tbl_price_kaigo td {
    padding: 10px 5px;
    font-size: 10px;
  }
  .tbl_price_kaigo th span,
  .tbl_price_kaigo td span {
    font-size: 10px;
  }
}

.tbl_new {
  width: 100%;
}

.tbl_new tr th,
.tbl_new tr td {
  vertical-align: middle;
  padding: 15px 10px;
}

.tbl_new tr th {
  font-weight: 600;
  width: 20%;
  color: #888;
  text-align: left;
  padding-left: 30px;
  letter-spacing: 0;
}

@media all and (max-width: 639px) {
  .tbl_new tr th {
    padding-left: 10px;
  }
}

.tbl_new tr:nth-child(odd) th,
.tbl_new tr:nth-child(odd) td {
  background: #f0f0f0;
}

.tbl_new2 {
  width: 100%;
}

.tbl_new2 tr th,
.tbl_new2 tr td {
  vertical-align: middle;
  padding: 15px 10px;
  border: 1px solid #d4d4d4;
}

.tbl_new2 tr th {
  width: 80%;
}

.tbl_new2 tr td {
  width: 20%;
}

.tbl_new2 tr th {
  font-weight: 700;
}

.tbl_new2 tr th span {
  font-size: 1.4rem;
}

@media all and (max-width: 639px) {
  .tbl_new2 tr th span {
    font-size: 1.2rem;
  }
}

.tbl-box {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  width: 100%;
  table-layout: fixed;
}

.tbl-box tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: 0.35em;
}

.tbl-box th,
.tbl-box td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}

.tbl-box th {
  font-size: 0.85em;
}

.tbl-box thead tr {
  background-color: #eee;
}

.tbl-box .txt {
  text-align: left;
  font-size: 0.85em;
}

.tbl-box .price {
  text-align: right;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  color: #888;
  font-weight: bold;
}

.tbl-box .price:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 639px) {
  .tbl-box {
    border: 0;
    width: 100%;
    margin-top: 20px;
  }
  .tbl-box th {
    background-color: #eee;
    display: block;
    border-right: none;
  }
  .tbl-box thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .tbl-box tr {
    display: block;
    margin-bottom: 0.625em;
  }
  .tbl-box td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: 0.8em;
    text-align: right;
    position: relative;
    padding: 0.625em 0.625em 0.625em 4em;
    border-right: none;
  }
  .tbl-box::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
  .tbl-box:last-child {
    border-bottom: 0;
  }
}

.tbl-border {
  width: 100%;
}

.tbl-border .t-right {
  text-align: right;
}

.tbl-border th,
.tbl-border td {
  padding: 15px;
  border-bottom: 2px solid #dddddd;
  vertical-align: middle;
}

.tbl-border th.type1,
.tbl-border td.type1 {
  width: 190px;
}

@media all and (max-width: 639px) {
  .tbl-border th.type1,
  .tbl-border td.type1 {
    width: 150px;
  }
}

.tbl-border th.b-no,
.tbl-border td.b-no {
  padding-bottom: 0;
  border-bottom: none;
}

.tbl-border th.tm-no,
.tbl-border td.tm-no {
  padding-top: 0;
}

@media all and (max-width: 639px) {
  .tbl-border th,
  .tbl-border td {
    padding: 10px;
    font-size: 1.2rem;
  }
}

.tbl-border th {
  width: 25%;
  text-align: left;
  font-weight: 600;
  border-bottom-color: #888;
}

.tbl-border th.th-1 {
  width: 45%;
}

.tbl_color {
  width: 100%;
  background-color: rgba(136, 136, 136, 0.1);
}

.tbl_color .t-right {
  text-align: right;
}

.tbl_color.black {
  background-color: rgba(17, 17, 17, 0.1);
}

.tbl_color.black th,
.tbl_color.black td {
  border-bottom: 3px solid rgba(255, 255, 255, 0);
}

.tbl_color.black th {
  background-color: rgba(17, 17, 17, 0.6);
  border-right: 3px solid rgba(255, 255, 255, 0);
}

.tbl_color.black tr:nth-child(2n) {
  background-color: rgba(17, 17, 17, 0.05);
}

.tbl_color.black tr:nth-child(2n) th {
  background-color: rgba(17, 17, 17, 0.9);
}

.tbl_color.black tr:hover {
  background-color: rgba(17, 17, 17, 0.12);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.tbl_color.black tr:hover th {
  background-color: rgba(17, 17, 17, 0.62);
}

.tbl_color tr:nth-child(2n) {
  background-color: rgba(136, 136, 136, 0.05);
}

.tbl_color tr:nth-child(2n) th {
  background-color: rgba(136, 136, 136, 0.9);
}

.tbl_color tr:hover {
  background-color: rgba(136, 136, 136, 0.12);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.tbl_color tr:hover th {
  background-color: rgba(136, 136, 136, 0.92);
}

.tbl_color th,
.tbl_color td {
  padding: 25px;
  border-bottom: 3px solid #fff;
  vertical-align: middle;
}

.tbl_color th.type1,
.tbl_color td.type1 {
  width: 190px;
}

@media all and (max-width: 639px) {
  .tbl_color th.type1,
  .tbl_color td.type1 {
    width: 150px;
  }
}

.tbl_color th.b-no,
.tbl_color td.b-no {
  padding-bottom: 0;
  border-bottom: none;
}

.tbl_color th.tm-no,
.tbl_color td.tm-no {
  padding-top: 0;
}

@media all and (max-width: 639px) {
  .tbl_color th,
  .tbl_color td {
    padding: 10px;
    font-size: 1.2rem;
  }
}

.tbl_color th {
  width: 25%;
  background-color: rgba(136, 136, 136, 0.8);
  color: #fff;
  text-align: left;
  font-weight: 600;
  border-right: 3px solid #fff;
}

.tbl_color th.th-1 {
  width: 45%;
}

.list {
  position: relative;
  padding-left: 20px;
}

.list::before {
  position: absolute;
  left: 0;
  top: 15px;
  content: "";
  width: 10px;
  height: 2px;
  background: #125fca;
}

.list_grd li {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
  line-height: 1.3;
  color: #999;
  background: white;
  border-left: solid 6px #d1cab6;
  -webkit-box-shadow: 2px 2px 6px #aaa inset;
  box-shadow: 2px 2px 6px #aaa inset;
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  font-size: 1.8rem;
}

.list_grd li span {
  font-size: 1.6rem;
}

@media all and (max-width: 639px) {
  .list_grd li {
    font-size: 1.3rem;
  }
  .list_grd li span {
    font-size: 1rem;
  }
}

.tbl_company {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
}

.tbl_company th,
.tbl_company td {
  padding: 10px 10px;
  vertical-align: middle;
}

.tbl_company th {
  text-align: left;
  width: 25%;
  position: relative;
  background: #888;
  color: #fff;
  font-weight: 600;
}

.tbl_company th::after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: #f9f9f9;
  border-width: 10px;
  border-left-color: #888;
  margin-top: -10px;
}

.tbl_company td {
  background: #f9f9f9;
  padding-left: 20px;
}

.tbl0 {
  width: 100%;
}

.tbl0 th,
.tbl0 td {
  padding: 3px 5px;
  border: 0;
}

.tbl0 th {
  padding-left: 0;
  font-weight: normal;
  background: none;
  width: 25%;
  color: #111;
}

.tbl0 th:after, .tbl0 th:before {
  display: none;
}

@media all and (max-width: 639px) {
  .tbl0 th {
    width: 40%;
  }
}

/* ggmap
----------------------------------*/
.gmapbox {
  padding: 40px;
  background-color: rgba(136, 136, 136, 0.2);
}

@media all and (max-width: 639px) {
  .gmapbox {
    padding: 20px;
  }
}

.gmapbox2 {
  padding: 20px;
  border: 2px solid #ddd;
  margin-top: 20px;
  background-color: #fff;
}

@media all and (max-width: 639px) {
  .gmapbox2 {
    padding: 20px;
    margin-top: -2px;
  }
}

.ggmap {
  position: relative;
  padding-bottom: 40%;
  height: 0;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  .ggmap {
    padding-bottom: 50%;
    height: 0;
  }
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.g-ttl {
  background-color: #888;
  color: #fff;
  padding: 5px 10px;
  font-size: 1.8rem;
}

@media all and (max-width: 639px) {
  .g-ttl {
    font-size: 1.3rem;
  }
}

.g-txt {
  margin-bottom: 20px;
}

@media all and (max-width: 639px) {
  .g-txt {
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}

/* list
----------------------------------*/
.list_common li {
  padding-bottom: 5px;
  padding-left: 1rem;
  margin-bottom: 5px;
  border-bottom: 1px dotted #cccccc;
}

.list_common li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.list-policy {
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  margin-bottom: 40px;
}

.list-policy li {
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 2rem;
  padding-bottom: 5px;
  margin-bottom: 6px;
  font-weight: 600;
}

.list-policy li:before {
  content: "一、";
  margin-right: 7px;
  color: #888;
}

@media all and (max-width: 639px) {
  .list-policy {
    padding: 15px;
  }
  .list-policy li {
    font-size: 1.4rem;
  }
}

.list_check {
  display: none;
}

.list_check.type1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list_check.type1 li {
  background: #333;
  color: #fff;
  padding: 12px 8px;
  width: 48%;
}

.list_check.type1 li:nth-child(2n) {
  margin-left: 4%;
}

@media all and (max-width: 639px) {
  .list_check.type1 li {
    width: 95%;
    margin: 0 auto 5px;
  }
  .list_check.type1 li:nth-child(2n) {
    margin-left: auto;
  }
}

.list_check.type2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 96%;
  margin: 0 0 0 10%;
}

.list_check.type2 li {
  width: 45%;
}

@media all and (max-width: 639px) {
  .list_check.type2 li {
    width: 92%;
  }
}

.list_check.type3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin: 0 0 0 5px;
}

.list_check.type3 li {
  width: 100%;
  margin-bottom: 5px;
}

@media all and (max-width: 639px) {
  .list_check.type3 li {
    width: 92%;
  }
}

.list_check li {
  padding: 4px;
  padding-left: 30px;
  font-weight: 600;
  font-size: 1.1em;
  position: relative;
  margin-bottom: 5px;
}

.list_check li span {
  font-weight: normal;
  font-size: 0.9em;
  display: block;
  padding: 10px;
  background: rgba(246, 240, 223, 0.2);
  margin-top: 10px;
}

.list_check li a {
  color: #888;
  border-bottom: 1px dotted #888;
}

.list_check li:before {
  position: absolute;
  left: 0;
  top: 20px;
  content: "";
  width: 10px;
  height: 2px;
  background: #888;
}

@media all and (max-width: 639px) {
  .list_check li {
    width: 98%;
    margin: 0 auto 10px;
    font-size: 1.3rem;
  }
}

.list_check2 li {
  padding: 8px;
  font-weight: 600;
}

.list_check2 li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  margin-right: 8px;
  color: #888;
}

.list_check2 li:not(:last-child) {
  margin-bottom: 4px;
  border-bottom: 1px solid #ccc;
}

.list-inline2 {
  text-align: center;
  margin: 10px auto;
}

.list-inline2 li {
  display: inline-block;
  padding: 4px 15px;
  background: #fefefe;
  border: 1px solid #dddddd;
  font-weight: 600;
  border-radius: 30px;
}

.list-inline2 li:not(:last-child) {
  margin-right: 8px;
}

@media all and (max-width: 639px) {
  .list-inline2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .list-inline2 li:not(:last-child) {
    margin-right: 0px;
  }
}

.list-inline li {
  display: inline-block;
  padding: 3px;
}

.list-inline li:not(:last-of-type):after {
  content: "/";
  margin: 0 5px;
  color: #888;
  font-weight: normal;
}

@media all and (max-width: 639px) {
  .list-inline li {
    display: block;
    padding: 0;
  }
  .list-inline li:before {
    content: "-";
    color: #888;
  }
  .list-inline li:not(:last-of-type):after {
    display: none;
  }
}

.ol-list {
  counter-reset: number;
  list-style: none;
  padding: 5px;
}

.ol-list.white li {
  color: #fff;
}

.ol-list.white li:before {
  color: #fff;
  border-left: #f2f2f2;
  border-top: #f2f2f2;
}

.ol-list.type2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ol-list.type2 > li {
  width: 48%;
  border-bottom: 1px solid #aaa;
}

.ol-list.type2 > li:nth-child(2n) {
  margin-left: 4%;
}

@media all and (max-width: 639px) {
  .ol-list.type2 > li {
    width: 100%;
  }
  .ol-list.type2 > li:nth-child(2n) {
    margin-left: 0%;
  }
}

.ol-list.type2 > li:before {
  counter-increment: number;
  content: counter(number);
  background: rgba(136, 136, 136, 0.1);
  display: inline-block;
  width: 2em;
  height: 2em;
  text-align: center;
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 2rem;
  color: #888;
  margin-right: 20px;
  border-left: 1px solid #888;
  border-top: 1px solid #888;
  border-radius: 0%;
}

.ol-list.type1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ol-list.type1 > li {
  width: 48%;
}

.ol-list.type1 > li:nth-child(2n) {
  margin-left: 4%;
}

.ol-list li {
  line-height: 1.8em;
  padding: 0 0 8px 2.5em;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
  position: relative;
}

.ol-list li span {
  font-weight: normal;
  display: block;
  padding: 10px;
  line-height: 1.6;
}

.ol-list li:before {
  counter-increment: number;
  content: counter(number);
  background: rgba(136, 136, 136, 0.6);
  color: #888;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  text-align: center;
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #fff;
  margin-right: 10px;
  border-radius: 100%;
}

@media all and (max-width: 639px) {
  .ol-list li span {
    font-size: 0.9em;
  }
}

.list_disc {
  margin: 15px 0;
}

.list_disc.black li:before {
  content: "●";
  color: #aaa;
}

.list_disc li {
  position: relative;
  line-height: 1.8em;
  padding-left: 1.5em;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.list_disc li:last-of-type {
  margin-bottom: 0;
}

.list_disc li:before {
  content: "●";
  color: #888;
  position: absolute;
  top: 0;
  left: 0;
}

.list-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list-btn li {
  width: 32%;
  margin: 0 calc(1.33% + (1.33% / 2)) 10px 0;
}

.list-btn li a {
  display: block;
  background: #0083de;
  font-weight: 600;
  padding: 20px 3px;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-size: 1.8rem;
  letter-spacing: 0;
  color: #fff;
}

.list-btn li a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f358";
  font-weight: 900;
  margin-left: 5px;
}

.list-btn li:nth-child(2) a {
  background: #888;
}

.list-btn li:nth-child(3) a {
  background: #8FB8C9;
}

.list-btn li:nth-child(3n) {
  margin-right: 0;
}

@media all and (max-width: 639px) {
  .list-btn li {
    width: 90%;
    margin: 0 auto 10px;
  }
  .list-btn li a {
    font-size: 1.2rem;
  }
  .list-btn li:nth-child(3n) {
    margin-right: auto;
  }
}

.list-btn.type1 {
  max-width: 1000px;
  margin: 0 auto 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.list-btn.type1 li a {
  background: #1FA33A;
  border: 1px solid #6f6f6f;
}

.list-btn.type1 li a:hover {
  background: #27ce49;
}

.list-btn.type1 li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f13a";
  font-weight: 900;
  margin-right: 5px;
}

.list-archive-wrapp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list-archive-wrapp .list-archivebox {
  width: 48%;
}

.list-archive-wrapp .list-archivebox .mtitle_sub {
  margin-top: 0;
}

@media all and (max-width: 1100px) {
  .list-archive-wrapp .list-archivebox {
    width: 100%;
  }
  .list-archive-wrapp .list-archivebox:last-child {
    margin-top: 40px;
  }
}

.list-archive li {
  width: 100%;
  font-size: 1.4rem;
  padding-bottom: 2px;
  margin-bottom: 10px;
}

.list-archive li .date {
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
  background-color: #888;
  padding: 4px 6px;
  margin: 0 20px;
  width: 100px;
  text-align: center;
}

@media all and (max-width: 639px) {
  .list-archive li .date {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .list-archive li .link {
    display: block;
    margin: 0 20px;
  }
}

.list-archive li a:hover {
  border-bottom: 1px solid #888;
}

/* STAFF
----------------------------------*/
.staff-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.staff-list .title {
  top: 10%;
  position: relative;
  display: inline-block;
  margin: 1rem 0 1rem -10px;
  padding: 1rem 3rem;
  color: #fff;
  background: #888;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

@media all and (max-width: 639px) {
  .staff-list .title {
    font-size: 1.5rem;
    padding: 10px 35px;
  }
}

.staff-list .title:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: "";
  border-top: 10px solid #888;
  border-left: 10px solid transparent;
}

.staff-list .staff-list-box {
  width: 28%;
  margin-right: 8%;
}

.staff-list .staff-list-box:nth-child(2) {
  margin-top: 30px;
  margin-right: 0;
}

.staff-list .staff-list-box:nth-child(3) {
  margin-top: 60px;
  margin-right: 0;
}

.staff-list .staff-list-box figure {
  -webkit-box-shadow: 0 8px 8px rgba(136, 136, 136, 0.2);
          box-shadow: 0 8px 8px rgba(136, 136, 136, 0.2);
}

@media all and (max-width: 896px) {
  .staff-list .staff-list-box {
    width: 60%;
    margin: 0 auto 20px;
  }
  .staff-list .staff-list-box:nth-child(2) {
    margin-top: 0px;
  }
  .staff-list .staff-list-box:last-child {
    margin-right: auto;
  }
}

@media all and (max-width: 639px) {
  .staff-list .staff-list-box {
    width: 86%;
    margin: 0 auto 20px;
  }
  .staff-list .staff-list-box:nth-child(2) {
    margin-top: 0px;
  }
  .staff-list .staff-list-box:last-child {
    margin-right: auto;
  }
}

.staff-list .staff-list-box .txtbox {
  position: relative;
  background-color: #888;
  padding: 25px 25px;
  color: #fff;
  font-size: 1.5rem;
  overflow: hidden;
  -webkit-box-shadow: 0 8px 8px rgba(136, 136, 136, 0.2);
          box-shadow: 0 8px 8px rgba(136, 136, 136, 0.2);
}

@media all and (max-width: 639px) {
  .staff-list .staff-list-box .txtbox {
    padding: 20px;
  }
  .staff-list .staff-list-box .txtbox .txt {
    font-size: 1.4rem;
  }
}

.staff-list .staff-list-box .txtbox:before {
  position: absolute;
  content: "";
  top: -10px;
  right: -64px;
  height: 2px;
  width: 116px;
  background: #c3a349;
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

.staff-list .staff-list-box .txtbox:after {
  position: absolute;
  top: 20px;
  left: 0;
  content: "";
  width: 320px;
  height: 2px;
  background: #fff;
  -webkit-transform: rotate(-7deg);
          transform: rotate(-7deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* blog
----------------------------------*/
.blog_list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
}

.blog_list > li {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 15px 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  position: relative;
}

.blog_list > li:hover .blog_img img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.blog_list > li:hover .blog_ttl {
  color: #888;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.blog_list > li > a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.blog_list > li .blog_detail {
  background-color: #fff;
  width: calc(100% - 50px);
  margin: -60px 0 0 auto;
  padding: 20px;
  z-index: 1;
  position: relative;
}

.blog_list > li .blog_ttl {
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@media all and (max-width: 639px) {
  .blog_list > li .blog_ttl {
    font-size: 1.4rem;
  }
}

.blog_list > li .blog_txt {
  line-height: 1.5;
  color: #333;
  font-size: 1.2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: none;
}

@media all and (max-width: 639px) {
  .blog_list > li .blog_txt {
    font-size: 12px;
  }
}

.blog_list > li .blog_img {
  width: 100%;
  height: 260px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.blog_list > li .blog_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.blog_list > li .blog_category {
  line-height: 1.3;
  color: #888;
  padding: 5px 0;
}

@media all and (max-width: 896px) {
  .blog_list > li .blog_img {
    height: 200px;
  }
}

@media all and (max-width: 639px) {
  .blog_list {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    gap: 0px 0px;
  }
}

.blog_date {
  line-height: 1.3;
  color: #888;
  font-size: 12px;
  display: block;
}

.blog_date:before {
  font-family: "Font Awesome 5 Free";
  content: "\f017";
  font-weight: 900;
  margin-right: 5px;
}

.blog_title {
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0;
  color: #888;
}

.pages {
  text-align: center;
  margin-top: 30px;
}

.pages .page_next,
.pages .page_prev {
  display: inline-block;
  margin: 0 20px;
}

.pages .page_next a,
.pages .page_prev a {
  color: #888;
  padding: 4px 5px;
  background: #fff;
  font-size: 12px;
}

#main .blog_list,
.list-area .blog_list {
  display: block;
}

#main .blog_list.type1 > li,
.list-area .blog_list.type1 > li {
  padding: 30px 10px;
  border-bottom: 3px solid #eee;
}

#main .blog_list > li,
.list-area .blog_list > li {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#main .blog_list > li .blog_ttl,
.list-area .blog_list > li .blog_ttl {
  margin-bottom: 5px;
}

@media all and (max-width: 639px) {
  #main .blog_list > li .blog_ttl,
  .list-area .blog_list > li .blog_ttl {
    font-size: 1.2rem;
  }
}

#main .blog_list > li .blog_txt,
.list-area .blog_list > li .blog_txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#main .blog_list > li .blog_img,
.list-area .blog_list > li .blog_img {
  width: 300px;
  height: 160px;
}

@media all and (max-width: 639px) {
  #main .blog_list > li .blog_img,
  .list-area .blog_list > li .blog_img {
    width: 180px;
    height: 100px;
  }
}

#main .blog_list > li .blog_detail,
.list-area .blog_list > li .blog_detail {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  position: relative;
}

#side .blog_list {
  display: block;
  margin-bottom: 30px;
}

#side .blog_list > li {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#side .blog_list > li:before {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #888;
  color: #fff;
  width: 25px;
  height: 25px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  z-index: 1;
}

#side .blog_list > li:nth-child(1n):before {
  content: "1";
}

#side .blog_list > li:nth-child(2n):before {
  content: "2";
}

#side .blog_list > li:nth-child(3n):before {
  content: "3";
}

#side .blog_list > li .blog_ttl {
  font-size: 1.4rem;
  margin-bottom: 0;
}

@media all and (max-width: 639px) {
  #side .blog_list > li .blog_ttl {
    font-size: 1.2rem;
  }
}

#side .blog_list > li .blog_txt {
  display: none;
}

#side .blog_list > li .blog_category,
#side .blog_list > li .blog_date {
  font-size: 1.1rem;
  padding: 0;
}

#side .blog_list > li .blog_img {
  width: 80px;
  height: 60px;
}

#side .blog_list > li .blog_detail {
  width: 100%;
  margin: 0;
  padding: 0px 10px;
  position: relative;
}

#blog_article {
  padding: 20px;
  background-color: #fff;
  min-height: 500px;
}

#blog_article .blog_ttl {
  font-size: 2.2rem;
  border-left: 3px solid #888;
  padding: 0 0 0 0.5em;
  margin-bottom: 20px;
}

@media all and (max-width: 639px) {
  #blog_article .blog_ttl {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

#blog_article .blog_category {
  color: #888;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

#blog_article .blog_category:before {
  content: "";
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 1px;
  left: 0;
  border-bottom: 1px solid #888;
  z-index: 1;
}

#blog_article .blog_date {
  display: block;
  margin-bottom: 10px;
}

.category_nav {
  border: 1px solid #dddddd;
}

.category_nav li a {
  display: block;
  padding: 15px;
  border-bottom: 1px dotted #dddddd;
  background-color: #ffffff;
}

.category_nav li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a9";
  font-weight: 900;
  margin-right: 5px;
}

.category_nav li a:hover {
  background: #f2f2f2;
}

.category_nav li:last-child a {
  border-bottom: none;
}

/* etc
----------------------------------*/
.cut {
  overflow: hidden;
  zoom: 1;
}

.w300 {
  width: 300px;
}

.spbr {
  display: none;
}

.color1 {
  color: #888;
}

.color2 {
  color: #0083de;
}

.color3 {
  color: #111;
}

.relative {
  position: relative;
}

.relative.type1 {
  z-index: 5;
}

.num {
  font-weight: 600;
}

.num a {
  color: #888;
  font-size: 2.8rem;
  text-align: center;
  margin-left: 5px;
}

@media all and (max-width: 639px) {
  .num a {
    font-size: 2rem;
  }
}

.num a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

.num a:hover {
  color: #f66009;
}

.telbox {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 20px;
  background: #333;
  text-align: center;
}

.telbox .inner {
  background: #fff;
  padding: 10px;
}

.txt-link {
  font-weight: 600;
  text-decoration: underline;
  pointer-events: none;
}

@media all and (max-width: 896px) {
  .txt-link {
    pointer-events: inherit;
  }
}

.txt-link:hover {
  text-decoration: none;
}

.telbnr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 30px auto 30px;
}

.telbnr li {
  width: 47%;
  border: 3px solid #ccc;
  padding: 10px 10px;
  text-align: center;
  border-radius: 50px;
}

.telbnr li.telbnr-mail a {
  pointer-events: inherit;
  font-size: 2rem;
  padding-top: 5px;
}

.telbnr li.telbnr-mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
}

@media all and (max-width: 639px) {
  .telbnr li.telbnr-mail a {
    font-size: 1.4rem;
    padding: 0;
  }
}

.telbnr li.telbnr-fax a {
  pointer-events: inherit;
  font-size: 2rem;
  padding-top: 5px;
}

.telbnr li.telbnr-fax a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1ac";
  font-weight: 900;
}

@media all and (max-width: 639px) {
  .telbnr li.telbnr-fax a {
    font-size: 1.4rem;
    padding: 0;
  }
}

.telbnr li a {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  color: #888;
  pointer-events: none;
}

@media all and (max-width: 896px) {
  .telbnr li a {
    pointer-events: inherit;
  }
}

.telbnr li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

.telbnr li a:hover {
  color: #888;
}

@media all and (max-width: 639px) {
  .telbnr {
    max-width: 90%;
  }
  .telbnr li {
    width: 100%;
    margin: 0 auto 30px;
  }
  .telbnr li a {
    font-size: 2rem;
  }
}

.telbnr-ttl {
  font-weight: 600;
  font-size: 1.6rem;
  color: #333;
  margin-top: -30px;
}

.telbnr-ttl span {
  background: #fff;
  padding: 0 20px;
}

@media all and (max-width: 639px) {
  .telbnr-ttl {
    font-size: 1.3rem;
  }
}

.bg_slash {
  position: relative;
}

.bg_slash:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: -1;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
  background-color: #fff;
}

.bg_curve {
  position: relative;
}

.bg_curve:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 300px;
  top: -100px;
  left: 0;
  background-color: #888;
  z-index: -1;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 67.71%, 1% 67.67%, 2% 67.55%, 3% 67.34%, 4% 67.06%, 5% 66.7%, 6% 66.27%, 7% 65.76%, 8% 65.18%, 9% 64.53%, 10% 63.81%, 11% 63.04%, 12% 62.21%, 13% 61.32%, 14% 60.39%, 15% 59.42%, 16% 58.4%, 17% 57.36%, 18% 56.28%, 19% 55.19%, 20% 54.07%, 21% 52.95%, 22% 51.83%, 23% 50.7%, 24% 49.58%, 25% 48.48%, 26% 47.39%, 27% 46.33%, 28% 45.3%, 29% 44.3%, 30% 43.34%, 31% 42.43%, 32% 41.57%, 33% 40.76%, 34% 40.02%, 35% 39.33%, 36% 38.72%, 37% 38.17%, 38% 37.69%, 39% 37.29%, 40% 36.97%, 41% 36.72%, 42% 36.55%, 43% 36.47%, 44% 36.47%, 45% 36.54%, 46% 36.7%, 47% 36.94%, 48% 37.26%, 49% 37.65%, 50% 38.12%, 51% 38.67%, 52% 39.28%, 53% 39.96%, 54% 40.7%, 55% 41.5%, 56% 42.36%, 57% 43.26%, 58% 44.22%, 59% 45.21%, 60% 46.24%, 61% 47.3%, 62% 48.38%, 63% 49.49%, 64% 50.6%, 65% 51.73%, 66% 52.86%, 67% 53.98%, 68% 55.09%, 69% 56.19%, 70% 57.27%, 71% 58.32%, 72% 59.33%, 73% 60.31%, 74% 61.25%, 75% 62.14%, 76% 62.97%, 77% 63.75%, 78% 64.47%, 79% 65.12%, 80% 65.71%, 81% 66.23%, 82% 66.67%, 83% 67.03%, 84% 67.32%, 85% 67.53%, 86% 67.66%, 87% 67.71%, 88% 67.67%, 89% 67.56%, 90% 67.36%, 91% 67.09%, 92% 66.74%, 93% 66.31%, 94% 65.8%, 95% 65.23%, 96% 64.59%, 97% 63.88%, 98% 63.11%, 99% 62.28%, 100% 61.4%);
  clip-path: polygon(100% 0%, 0% 0%, 0% 67.71%, 1% 67.67%, 2% 67.55%, 3% 67.34%, 4% 67.06%, 5% 66.7%, 6% 66.27%, 7% 65.76%, 8% 65.18%, 9% 64.53%, 10% 63.81%, 11% 63.04%, 12% 62.21%, 13% 61.32%, 14% 60.39%, 15% 59.42%, 16% 58.4%, 17% 57.36%, 18% 56.28%, 19% 55.19%, 20% 54.07%, 21% 52.95%, 22% 51.83%, 23% 50.7%, 24% 49.58%, 25% 48.48%, 26% 47.39%, 27% 46.33%, 28% 45.3%, 29% 44.3%, 30% 43.34%, 31% 42.43%, 32% 41.57%, 33% 40.76%, 34% 40.02%, 35% 39.33%, 36% 38.72%, 37% 38.17%, 38% 37.69%, 39% 37.29%, 40% 36.97%, 41% 36.72%, 42% 36.55%, 43% 36.47%, 44% 36.47%, 45% 36.54%, 46% 36.7%, 47% 36.94%, 48% 37.26%, 49% 37.65%, 50% 38.12%, 51% 38.67%, 52% 39.28%, 53% 39.96%, 54% 40.7%, 55% 41.5%, 56% 42.36%, 57% 43.26%, 58% 44.22%, 59% 45.21%, 60% 46.24%, 61% 47.3%, 62% 48.38%, 63% 49.49%, 64% 50.6%, 65% 51.73%, 66% 52.86%, 67% 53.98%, 68% 55.09%, 69% 56.19%, 70% 57.27%, 71% 58.32%, 72% 59.33%, 73% 60.31%, 74% 61.25%, 75% 62.14%, 76% 62.97%, 77% 63.75%, 78% 64.47%, 79% 65.12%, 80% 65.71%, 81% 66.23%, 82% 66.67%, 83% 67.03%, 84% 67.32%, 85% 67.53%, 86% 67.66%, 87% 67.71%, 88% 67.67%, 89% 67.56%, 90% 67.36%, 91% 67.09%, 92% 66.74%, 93% 66.31%, 94% 65.8%, 95% 65.23%, 96% 64.59%, 97% 63.88%, 98% 63.11%, 99% 62.28%, 100% 61.4%);
}

@media all and (max-width: 639px) {
  .bg_curve:before {
    height: 150px;
    top: -30px;
  }
}

.bg_curve:after {
  content: "";
  position: absolute;
  width: 130%;
  height: 300px;
  top: -90px;
  left: -30%;
  background-color: rgba(136, 136, 136, 0.3);
  z-index: -2;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 67.71%, 1% 67.67%, 2% 67.55%, 3% 67.34%, 4% 67.06%, 5% 66.7%, 6% 66.27%, 7% 65.76%, 8% 65.18%, 9% 64.53%, 10% 63.81%, 11% 63.04%, 12% 62.21%, 13% 61.32%, 14% 60.39%, 15% 59.42%, 16% 58.4%, 17% 57.36%, 18% 56.28%, 19% 55.19%, 20% 54.07%, 21% 52.95%, 22% 51.83%, 23% 50.7%, 24% 49.58%, 25% 48.48%, 26% 47.39%, 27% 46.33%, 28% 45.3%, 29% 44.3%, 30% 43.34%, 31% 42.43%, 32% 41.57%, 33% 40.76%, 34% 40.02%, 35% 39.33%, 36% 38.72%, 37% 38.17%, 38% 37.69%, 39% 37.29%, 40% 36.97%, 41% 36.72%, 42% 36.55%, 43% 36.47%, 44% 36.47%, 45% 36.54%, 46% 36.7%, 47% 36.94%, 48% 37.26%, 49% 37.65%, 50% 38.12%, 51% 38.67%, 52% 39.28%, 53% 39.96%, 54% 40.7%, 55% 41.5%, 56% 42.36%, 57% 43.26%, 58% 44.22%, 59% 45.21%, 60% 46.24%, 61% 47.3%, 62% 48.38%, 63% 49.49%, 64% 50.6%, 65% 51.73%, 66% 52.86%, 67% 53.98%, 68% 55.09%, 69% 56.19%, 70% 57.27%, 71% 58.32%, 72% 59.33%, 73% 60.31%, 74% 61.25%, 75% 62.14%, 76% 62.97%, 77% 63.75%, 78% 64.47%, 79% 65.12%, 80% 65.71%, 81% 66.23%, 82% 66.67%, 83% 67.03%, 84% 67.32%, 85% 67.53%, 86% 67.66%, 87% 67.71%, 88% 67.67%, 89% 67.56%, 90% 67.36%, 91% 67.09%, 92% 66.74%, 93% 66.31%, 94% 65.8%, 95% 65.23%, 96% 64.59%, 97% 63.88%, 98% 63.11%, 99% 62.28%, 100% 61.4%);
  clip-path: polygon(100% 0%, 0% 0%, 0% 67.71%, 1% 67.67%, 2% 67.55%, 3% 67.34%, 4% 67.06%, 5% 66.7%, 6% 66.27%, 7% 65.76%, 8% 65.18%, 9% 64.53%, 10% 63.81%, 11% 63.04%, 12% 62.21%, 13% 61.32%, 14% 60.39%, 15% 59.42%, 16% 58.4%, 17% 57.36%, 18% 56.28%, 19% 55.19%, 20% 54.07%, 21% 52.95%, 22% 51.83%, 23% 50.7%, 24% 49.58%, 25% 48.48%, 26% 47.39%, 27% 46.33%, 28% 45.3%, 29% 44.3%, 30% 43.34%, 31% 42.43%, 32% 41.57%, 33% 40.76%, 34% 40.02%, 35% 39.33%, 36% 38.72%, 37% 38.17%, 38% 37.69%, 39% 37.29%, 40% 36.97%, 41% 36.72%, 42% 36.55%, 43% 36.47%, 44% 36.47%, 45% 36.54%, 46% 36.7%, 47% 36.94%, 48% 37.26%, 49% 37.65%, 50% 38.12%, 51% 38.67%, 52% 39.28%, 53% 39.96%, 54% 40.7%, 55% 41.5%, 56% 42.36%, 57% 43.26%, 58% 44.22%, 59% 45.21%, 60% 46.24%, 61% 47.3%, 62% 48.38%, 63% 49.49%, 64% 50.6%, 65% 51.73%, 66% 52.86%, 67% 53.98%, 68% 55.09%, 69% 56.19%, 70% 57.27%, 71% 58.32%, 72% 59.33%, 73% 60.31%, 74% 61.25%, 75% 62.14%, 76% 62.97%, 77% 63.75%, 78% 64.47%, 79% 65.12%, 80% 65.71%, 81% 66.23%, 82% 66.67%, 83% 67.03%, 84% 67.32%, 85% 67.53%, 86% 67.66%, 87% 67.71%, 88% 67.67%, 89% 67.56%, 90% 67.36%, 91% 67.09%, 92% 66.74%, 93% 66.31%, 94% 65.8%, 95% 65.23%, 96% 64.59%, 97% 63.88%, 98% 63.11%, 99% 62.28%, 100% 61.4%);
}

@media all and (max-width: 639px) {
  .bg_curve:after {
    height: 150px;
    top: -30px;
  }
}

.repeat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: -53%;
  overflow: hidden;
  position: absolute;
  top: 63.2px;
  white-space: nowrap;
  width: 153%;
  z-index: -2;
}

.repeat > span {
  -webkit-animation: animation-repeat 10s linear infinite;
  animation: animation-repeat 10s linear infinite;
  color: rgba(136, 136, 136, 0.1);
  padding: 10px 0;
  font-size: 6vw;
  line-height: 1;
  z-index: -2;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.repeat > span:first-letter {
  text-transform: uppercase;
}

@-webkit-keyframes animation-repeat {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes animation-repeat {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.breadcrumb {
  padding: 20px 30px;
  position: relative;
  z-index: 10;
  max-width: 90%;
  margin: 0 auto;
  font-size: 1.2rem;
  text-align: left;
}

.breadcrumb.tcenter {
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}

.breadcrumb.type1 {
  position: absolute;
  bottom: -20px;
  padding: 10px 30px;
  background-color: #888;
}

.breadcrumb.type1 li {
  color: #fff;
}

.breadcrumb.type1 li a {
  color: #fff;
}

.breadcrumb li {
  display: inline-block;
  color: #333;
}

.breadcrumb li a {
  color: #888;
}

.breadcrumb li + li:before {
  margin: 0 10px;
  content: ">";
}

@media all and (max-width: 1100px) {
  .breadcrumb {
    padding: 10px 0px;
  }
}

/* form
----------------------------------*/
.form {
  margin: 0 auto;
  width: 90%;
}

.form dl dt {
  float: left;
  width: 280px;
  padding-top: 20px;
  font-weight: 600;
}

.form dl dt span {
  color: #fff;
  background: #888;
  padding: 5px 8px;
  margin-right: 5px;
  font-size: 11px;
  border-radius: 20px;
  position: relative;
  top: -2px;
}

.form dl dt span.nini {
  background: #ffc517;
  color: #333;
}

.form dl dd {
  padding-left: 280px;
  padding-bottom: 20px;
  padding-top: 23px;
  line-height: 1.5;
  border-bottom: 1px dotted #cccccc;
}

.form dl dd.type1 p {
  display: inline;
}

.form dl dd.type1 .w20 {
  width: 20%;
}

@media all and (max-width: 896px) {
  .form dl dd.type1 .w20 {
    width: 30%;
  }
}

.form dl dd.type1 .w30 {
  width: 30%;
}

@media all and (max-width: 639px) {
  .form dl dd.type1.type1-name .w30 {
    width: 48%;
  }
}

.form dl dd.type1 .w60 {
  width: 60%;
}

.form dl dd:last-child {
  border-bottom: none;
}

.form .textarea,
.form textarea {
  border: 0;
  padding: 15px;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  background: #f0f0f0;
}

.form .textarea02 {
  width: 48.5%;
  margin-right: 3%;
  background: #f9fcff;
  -webkit-box-shadow: 0 8px 8px rgba(165, 165, 165, 0.4);
          box-shadow: 0 8px 8px rgba(165, 165, 165, 0.4);
}

.form .textarea02:last-child {
  margin-right: 0;
}

.form .textarea03 {
  width: 20%;
  margin-right: 1%;
}

.form button {
  cursor: pointer;
  display: block;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
  border: 1px solid #363636;
  font-weight: 600;
  padding: 12px 5px;
  margin: 0 auto;
  width: 250px;
  background: #363636;
  border-radius: 25px;
}

.form button:hover {
  background: #fff;
  color: #363636;
}

.form button:before {
  font-weight: normal;
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 10px;
}

.form .select-wrap {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 192px;
  min-width: 12em;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  color: #333;
}

.form .select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  display: block;
  width: 200%;
  width: -webkit-calc(100% + 5em);
  margin: 0;
  padding: 11px 35px 11px 11px;
  padding: 0.6875rem 2.1875rem 0.6875rem 0.6875rem;
  background: transparent;
  border: 0;
  outline: none;
  line-height: 1.5;
}

.form .entypo-down-open-mini:before {
  font-family: "FontAwesome";
  content: "\f0ab";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 12px;
  right: 0.75rem;
  margin-top: -8px;
  margin-top: -0.5rem;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  color: #888;
}

.form label.radio_text {
  cursor: pointer;
  position: relative;
  margin-right: 20px;
  overflow: hidden;
  padding-left: 20px;
  display: inline-block;
}

.form label.radio_text:before {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid #ccc;
  border-radius: 50%;
  left: 0px;
  top: 5px;
  content: "";
  z-index: 3;
}

@media all and (max-width: 639px) {
  .form label.radio_text:before {
    top: 4px;
  }
}

.form label.radio_text:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 100%;
  left: 2px;
  top: 7px;
  background-color: #888;
  z-index: 1;
}

@media all and (max-width: 639px) {
  .form label.radio_text:after {
    top: 6px;
  }
}

.form label.radio_text input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  left: -23px;
  top: 0px;
  margin: 0px;
  -webkit-box-shadow: 20px -1px #fff;
          box-shadow: 20px -1px #fff;
}

.form label.radio_text input[type="radio"]:checked {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form label.radio_text input[type="radio"]:focus {
  opacity: 0.2;
  -webkit-box-shadow: 20px -1px #eeebda;
          box-shadow: 20px -1px #eeebda;
}

.form label.checkbox_text {
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin: 0 20px 5px 0;
  overflow: hidden;
  display: inline-block;
}

.form label.checkbox_text:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0px;
  top: 0;
  border: 1px solid #ccc;
  z-index: 3;
  padding: 1px;
}

.form label.checkbox_text:after {
  content: "";
  position: absolute;
  top: 40%;
  left: 5px;
  display: block;
  margin-top: -9px;
  width: 8px;
  height: 12px;
  border-right: 3px solid #888;
  border-bottom: 3px solid #888;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

@media all and (max-width: 639px) {
  .form label.checkbox_text:after {
    margin-top: -6px;
  }
}

.form label.checkbox_text input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: -40px;
  width: 20px;
  height: 20px;
  display: block;
  -webkit-box-shadow: 41px 0px #fff;
          box-shadow: 41px 0px #fff;
  z-index: 2;
  margin: 0px;
  padding: 0px;
}

.form label.checkbox_text input[type="checkbox"]:checked {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form label.checkbox_text input[type="checkbox"]:checked:focus {
  -webkit-box-shadow: 40px 0px #666;
          box-shadow: 40px 0px #666;
  opacity: 0.1;
}

.form label.checkbox_text input[type="checkbox"]:focus {
  -webkit-box-shadow: 41px 0px #eee;
          box-shadow: 41px 0px #eee;
}

.form textarea {
  font-size: 16px;
}

@media all and (max-width: 639px) {
  /* form */
  .form {
    width: 100%;
    padding-bottom: 30px;
  }
  .form dl {
    margin: 10px 0;
  }
  .form dl dt {
    float: none;
    width: 100%;
    padding-top: 15px;
  }
  .form dl dd {
    width: 100%;
    padding-left: 0;
    padding-bottom: 15px;
    padding-top: 10px;
    line-height: 20px;
  }
  .form dl dd:last-child {
    border-bottom: 0px;
    margin-bottom: 0px;
  }
  .form .textarea,
  .form textarea {
    width: 100%;
    font-size: 16px;
  }
  .form .textarea.textarea03 {
    width: 35%;
  }
  .form .textarea02 {
    width: 43.5%;
  }
  .form button {
    width: 95%;
    padding: 20px 0;
    border-radius: 50px;
  }
}

.fm-txt {
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.5);
  padding: 5px;
}

.thanks {
  padding: 40px;
  border: 3px solid #949494;
  background-color: #fff;
  max-width: 700px;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .thanks {
    max-width: 90%;
    padding: 30px 10px;
  }
}

.shadow {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.policy {
  padding: 30px;
  background: rgba(255, 255, 255, 0.4);
}

.mtitle_back {
  margin-top: 80px;
  margin-bottom: 80px;
  margin-left: 0;
  position: relative;
}

@media all and (max-width: 639px) {
  .mtitle_back.s-p0 {
    margin-bottom: 0px;
  }
}

.mtitle_back .eng {
  position: absolute;
  font-size: 15rem;
  color: rgba(136, 136, 136, 0.6);
  font-weight: normal;
  opacity: 0.8;
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  top: -100px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.mtitle_back .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_back .eng.basecolor {
  color: #888;
}

@media all and (max-width: 639px) {
  .mtitle_back .eng {
    font-size: 4rem;
  }
}

.mtitle_back .ja {
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  color: #888;
  letter-spacing: 0.15em;
  font-weight: 600;
}

.mtitle_back .ja.black {
  color: #333;
}

.mtitle_back.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mtitle_back.white {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.mtitle_back.white .eng {
  color: #fefefe;
}

.mtitle_back.white .ja {
  color: #fefefe;
}

@media all and (max-width: 639px) {
  .mtitle_back {
    text-align: center;
  }
  .mtitle_back .eng {
    font-size: 21vw;
    top: -61px;
  }
  .mtitle_back .ja {
    font-size: 1.6rem;
  }
}

.mtitle_small {
  position: relative;
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #888;
  font-weight: 600;
  padding: 10px;
  border-bottom: 1px double #ccc;
}

.mtitle_small:before {
  content: "";
  width: 50px;
  height: 1px;
  background-color: #888;
  position: absolute;
  left: 0;
  bottom: -1px;
}

@media all and (max-width: 639px) {
  .mtitle_small {
    font-size: 1.3rem;
    line-height: 1.5;
    padding: 10px 0;
  }
}

.mtitle_small2 {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
}

.mtitle_small2:before {
  content: "";
  background-color: #888;
  width: 10px;
  height: 4px;
  position: absolute;
  top: 0.6em;
  left: 0;
}

.gallery_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -2%;
  margin-bottom: -4%;
}

@media all and (max-width: 639px) {
  .gallery_ul {
    margin-left: auto;
    margin-right: auto;
  }
}

.gallery_ul > li {
  width: 31.33%;
  margin-left: 2%;
  margin-bottom: 4%;
  font-weight: 600;
}

.gallery_ul > li .photobox-wrap {
  width: 100%;
  height: 320px;
  text-align: center;
  overflow: hidden;
  background: #aaa;
  margin-bottom: 10px;
}

.gallery_ul > li .photobox-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  font-family: "object-fit:contain;";
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

@media all and (max-width: 896px) {
  .gallery_ul > li {
    width: 48%;
  }
}

@media all and (max-width: 639px) {
  .gallery_ul > li {
    width: 85%;
    margin: 0 auto 30px;
  }
  .gallery_ul > li .photobox-wrap {
    height: 180px;
  }
}

.comment {
  font-size: 1.4rem;
  letter-spacing: 0;
  padding: 0 5px;
  color: #333;
}

@media all and (max-width: 639px) {
  .comment {
    font-size: 12px;
  }
}

.gallery.insta {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr);
  gap: 3px 3px;
}

.gallery.insta p {
  display: none;
}

@media all and (max-width: 896px) {
  .gallery.insta {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 639px) {
  .gallery.insta {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

.gallery.insta figure {
  background: rgba(255, 255, 255, 0.2);
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
  height: 14vw;
  overflow: hidden;
}

@media all and (max-width: 896px) {
  .gallery.insta figure {
    height: 28vw;
  }
}

@media all and (max-width: 639px) {
  .gallery.insta figure {
    height: 29vw;
  }
}

.gallery.insta figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.gallery.type1 figure {
  border: 10px solid #eee;
}

.gallery.type1 p {
  margin-top: -32px;
  position: relative;
  margin-left: auto;
  width: 90%;
  background-color: #eee;
  padding: 10px 0;
}

.gallery li {
  position: relative;
}

.gallery li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.gallery li:hover img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.gallery li:hover a {
  background-color: rgba(255, 255, 255, 0.5);
}

.gallery li figure {
  background: rgba(246, 240, 223, 0.2);
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
  height: 17vw;
  overflow: hidden;
}

@media all and (max-width: 896px) {
  .gallery li figure {
    height: 23vw;
  }
}

@media all and (max-width: 639px) {
  .gallery li figure {
    height: 33vw;
  }
}

.gallery li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.gallery li p {
  font-size: 1.2rem;
  background-color: rgba(136, 136, 136, 0.2);
  font-weight: bold;
  padding: 0px 5px;
  text-align: center;
  margin-top: 5px;
}

@media all and (max-width: 896px) {
  .gallery li p {
    font-size: 12px;
  }
}

.list2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.list2.gap {
  gap: 10px 10px;
}

.list2.gap > li,
.list2.gap .child {
  width: calc(50% - 10px);
}

@media all and (max-width: 639px) {
  .list2.gap > li,
  .list2.gap .child {
    width: 100%;
  }
}

.list2.type1 > li,
.list2.type1 .child {
  background: #fefefe;
  padding: 15px;
}

@media all and (max-width: 639px) {
  .list2.type2 > li {
    width: 100%;
    margin: 0 auto 0;
  }
  .list2.type2 > li:nth-child(2) {
    margin-top: 30px;
  }
}

.list2 > li,
.list2 .child {
  width: 50%;
  position: relative;
}

.list2 > li .mtitle_circle,
.list2 .child .mtitle_circle {
  position: absolute;
  top: -20px;
  left: -20px;
}

.list2 > li:nth-child(2n),
.list2 .child:nth-child(2n) {
  /* margin-left: 4%; */
}

@media all and (max-width: 639px) {
  .list2 > li:nth-child(2n),
  .list2 .child:nth-child(2n) {
    margin-left: auto;
  }
}

@media all and (max-width: 639px) {
  .list2 > li,
  .list2 .child {
    width: 100%;
    margin: 25px auto 0;
  }
}

.list2 .child2 {
  width: 34%;
  margin-top: 50px;
}

.list2 .child2:nth-child(2n) {
  margin-left: 4%;
}

@media all and (max-width: 639px) {
  .list2 .child2:nth-child(2n) {
    margin-left: auto;
  }
}

@media all and (max-width: 639px) {
  .list2 .child2 {
    width: 100%;
    margin: 25px auto 0;
  }
}

.list3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.list3.works-list3 > li {
  margin-bottom: 80px;
}

.list3.works-list3 > li img {
  -webkit-box-shadow: 5px 5px rgba(136, 136, 136, 0.2);
          box-shadow: 5px 5px rgba(136, 136, 136, 0.2);
}

.list3.works-list3 > li .text {
  padding: 8px;
  letter-spacing: 0;
}

.list3.type1 li {
  background: #fefefe;
  padding: 15px;
  border-radius: 8px;
}

.list3 > li {
  width: 31%;
  position: relative;
  margin: 0 calc(2.33% + (2.33% / 2)) 30px 0;
}

.list3 > li.t-m200 {
  margin-top: 200px;
}

.list3 > li:nth-child(3n) {
  margin-right: 0;
}

@media all and (max-width: 639px) {
  .list3 > li {
    width: 95%;
    margin: 0 auto 20px;
  }
  .list3 > li:nth-child(3n) {
    margin-right: auto;
  }
}

@media all and (max-width: 639px) {
  .list3.res_none {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .list3.res_none > li {
    width: 31% !important;
  }
}

.list4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list4 li {
  width: 24%;
  margin: 0 calc(1% + (1% / 3)) 25px 0;
  position: relative;
}

.list4 li:nth-child(4n) {
  margin-right: 0;
}

.list4 li .mtitle_circle {
  position: absolute;
  top: -20px;
  left: -20px;
}

.list5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.list5 li {
  width: 19%;
  margin: 0.5%;
  position: relative;
}

@media all and (max-width: 639px) {
  .list5 li {
    width: 49%;
  }
}

.prv dt {
  color: #888;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}

#works:before {
  content: "";
  height: 80px;
  margin-top: -80px;
  display: block;
  visibility: hidden;
}

.note {
  padding: 15px;
  margin-top: 10px;
  background: #333;
  font-size: 1.4rem;
}

@media all and (max-width: 639px) {
  .note {
    font-size: 12px;
  }
}

.mtitle_box4 {
  background: rgba(136, 136, 136, 0.2);
  font-size: 1.6rem;
  position: relative;
  padding: 13px 22px;
  margin: 20px 0;
  font-weight: 700;
}

.mtitle_box4 span {
  font-weight: normal;
  font-size: 14px;
  padding-left: 10px;
}

.mtitle_box4:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-weight: 900;
  display: block;
  left: -1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
}

@media all and (max-width: 639px) {
  .mtitle_box4 {
    font-size: 1.5rem;
  }
}

.btn06 {
  width: 300px;
  margin: 20px auto 20px;
}

.btn06 a {
  display: block;
  position: relative;
  padding: 15px 0;
  background-color: #888;
  border: 1px solid #888;
  line-height: 24px;
  letter-spacing: 0.1rem;
  font-size: 1.4rem;
  text-align: center;
  color: #ffffff;
  border-radius: 50px;
}

.btn06 a i {
  display: block;
  position: absolute;
  top: 50%;
  right: -10px;
  width: 50px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn06 a:hover {
  background-color: #fff;
  border: 1px solid #888;
  color: #888;
}

.btn06 a:hover i {
  width: 34px;
  background-color: #888;
}

.btn06.type2 a {
  background-color: #1FA33A;
  border: 1px solid #1FA33A;
}

.btn06.type2 a:hover {
  background-color: #fff;
  border: 1px solid #1FA33A;
  color: #1FA33A;
}

.btn06.type2 a:hover i {
  width: 34px;
  background-color: #1FA33A;
}

@media all and (max-width: 639px) {
  .btn06 {
    width: 90%;
  }
  .btn06 a {
    font-size: 1.2rem;
  }
}

/*矢印*/
/*ボタンhover　追加*/
.list_check3.type1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list_check3.type1 li {
  padding: 4px 12px;
  width: calc((100% / 2) - 1%);
  border-radius: 10px;
  font-size: 1.2rem;
  background-color: #f2f2f2;
  margin-right: 1%;
}

.list_check3.type1 li:nth-child(4n) {
  margin-right: 0;
}

@media all and (max-width: 639px) {
  .list_check3.type1 li {
    width: 100%;
    margin: 0 auto 5px;
    margin-right: 0;
  }
  .list_check3.type1 li:nth-child(4n) {
    margin-right: 0;
  }
}

.list_check3 li {
  padding: 8px;
  font-weight: 700;
  margin-bottom: 5px;
}

.list_check3 li span {
  font-weight: normal;
  font-size: 0.9em;
  display: block;
  padding: 10px;
  background: rgba(246, 240, 223, 0.2);
  margin-top: 10px;
}

.list_check3 li a {
  color: #888;
  border-bottom: 1px dotted #888;
}

.list_check3 li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  margin-right: 10px;
  color: #888;
}

@media all and (max-width: 639px) {
  .list_check3 li {
    width: 98%;
    margin: 0 auto 10px;
    font-size: 1.2rem;
  }
}

.flow_tr {
  display: -ms-grid;
  display: grid;
  max-width: 90%;
  -ms-grid-columns: (1fr)[17];
      grid-template-columns: repeat(17, 1fr);
  gap: 2%;
  margin: 30px auto;
}

@media all and (max-width: 896px) {
  .flow_tr {
    display: block;
    max-width: 100%;
  }
}

.flow_tr li {
  position: relative;
  max-height: 260px;
}

.flow_tr li .figure {
  padding: 10px 5px;
  border-radius: 3px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  margin: 0 auto;
  color: #fff;
  background-color: rgba(136, 136, 136, 0.7);
  overflow: hidden;
  font-weight: bold;
  line-height: 1.2;
  font-size: 1.4rem;
  height: 100%;
}

.flow_tr li .figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 896px) {
  .flow_tr li .figure {
    font-size: 1.2rem;
    -ms-writing-mode: inherit;
    -webkit-writing-mode: inherit;
            writing-mode: inherit;
    text-align: center;
  }
}

.flow_tr li .txt {
  font-size: 1.2rem;
  margin-top: 10px;
}

.flow_tr li:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -37%;
  margin: auto 0;
  display: -ms-grid;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 1.8rem;
}

@media all and (max-width: 896px) {
  .flow_tr li:after {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    font-weight: 900;
    top: 25px;
    right: 0;
    left: 0;
    font-size: 2rem;
  }
}

.flow_tr li:first-child .figure {
  background-color: #888888;
}

.flow_tr li:last-child .figure {
  background-color: #888888;
}

.flow_tr li:last-child:after {
  content: none;
}

@media all and (max-width: 896px) {
  .flow_tr li {
    margin-bottom: 21px;
  }
}

.flow_circle {
  display: -ms-grid;
  display: grid;
  max-width: 90%;
  -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr);
  gap: 6%;
  margin: 30px auto;
}

@media all and (max-width: 896px) {
  .flow_circle {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    margin: 60px auto;
  }
}

@media all and (max-width: 639px) {
  .flow_circle {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 20px 6%;
  }
}

.flow_circle li {
  position: relative;
}

@media all and (max-width: 639px) {
  .flow_circle li {
    width: 90%;
  }
}

.flow_circle li .ttl {
  text-align: center;
  margin: 20px auto 0;
  font-weight: 600;
  position: relative;
  font-size: 1.2rem;
  background: #fff;
  border: 1px solid #888;
  border-bottom: 3px solid #888;
  padding: 6px 4px;
  border-radius: 40px;
}

.flow_circle li .ttl:before {
  position: absolute;
  content: "";
  left: 50%;
  top: -40px;
  width: 1px;
  height: 35px;
  background: #888;
}

@media all and (max-width: 639px) {
  .flow_circle li .ttl {
    font-size: 1.1rem;
  }
}

.flow_circle li .figure {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  color: #fff;
  border-radius: 50%;
  background-color: rgba(136, 136, 136, 0);
  border: 2px solid #888;
  overflow: hidden;
  display: -ms-grid;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  font-size: 1.6rem;
}

.flow_circle li .figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 896px) {
  .flow_circle li .figure {
    height: 19vw;
  }
}

@media all and (max-width: 639px) {
  .flow_circle li .figure {
    font-size: 1.2rem;
    width: 90%;
    height: 33vw;
  }
}

.flow_circle li .txt {
  font-size: 1.2rem;
  margin-top: 10px;
}

.flow_circle li:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  top: 54px;
  right: -25%;
  margin: auto 0;
  display: -ms-grid;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 3rem;
}

@media all and (max-width: 896px) {
  .flow_circle li:after {
    right: -15%;
  }
}

.flow_circle li:nth-child(1n) .figure {
  background-color: #c8c8c8;
}

.flow_circle li:nth-child(2n) .figure {
  background-color: #bbbbbb;
}

.flow_circle li:nth-child(3n) .figure {
  background-color: #a2a2a2;
}

.flow_circle li:nth-child(4n) .figure {
  background-color: #9c9c9c;
}

.flow_circle li:nth-child(5n) .figure {
  background-color: #959595;
}

.flow_circle li:nth-child(6n) .figure {
  background-color: #8d8d8d;
}

.flow_circle li:last-child:after {
  content: none;
}

.flow-dl .flow-inner {
  padding: 8px;
}

.flow-dl .flow-inner:not(:last-of-type) {
  margin-bottom: 5px;
  border-bottom: solid 1px #aaa;
}

.flow-dl .flow-inner dt {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0083de;
}

.flow-dl .flow-inner dt .eng {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 2.5rem;
  color: #8FB8C9;
  margin-right: 8px;
}

.flow-dl .flow-inner dt .eng:first-letter {
  text-transform: uppercase;
}

.flow-dl .flow-inner dd {
  margin-top: 5px;
  padding-left: 40px;
}

@media all and (max-width: 639px) {
  .flow-dl .flow-inner {
    padding: 6px;
  }
  .flow-dl .flow-inner dt {
    font-size: 1.25rem;
  }
  .flow-dl .flow-inner dt .eng {
    font-size: 1.7rem;
  }
  .flow-dl .flow-inner dd {
    padding-left: 30px;
  }
}

.txt1 {
  padding-left: 10px;
}

.fee-box {
  margin: 10px 0 20px;
  font-weight: 600;
  background: lemonchiffon;
  padding: 5px;
}

.fee-box span {
  display: block;
  font-weight: normal;
}

.blog_month {
  margin-bottom: 30px;
}

.blog_month ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.blog_month ul li {
  width: 49%;
  margin-bottom: 5px;
}

.blog_month ul li:nth-child(2n) {
  margin-left: 2%;
}

.blog_month ul li a {
  display: block;
  width: 100%;
  color: #333;
  font-size: 12px;
  padding: 4px 0;
  text-align: center;
  letter-spacing: 0;
  background: #fff;
  border: 1px solid #eee;
}

.blog_month ul li a:hover {
  color: #888;
}

.blog_category_list {
  margin-bottom: 30px;
}

.blog_category_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px 0px;
}

.blog_category_list ul li {
  width: calc(100% / 1);
}

.blog_category_list ul li a {
  color: #333;
  font-size: 12px;
  display: block;
  width: 100%;
  padding: 5px;
  text-align: left;
  letter-spacing: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.blog_category_list ul li a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.blog_category_list ul li a:hover {
  color: #888;
}

.blog_category_list ul li a:hover:after {
  right: 4px;
}

#i01,
#i02,
#i03,
#i04,
#i05,
#i06,
#i07,
#i08,
#i09,
#i10,
#laser,
#worries,
#price,
#faq,
#anc01,
#anc02,
#anc03,
#anc04,
#anc05,
#anc06,
#anc07,
#anc08,
#anc09,
#anc10,
#anc11,
#anc12,
#anc13,
#anc14,
#anc15,
#anc16,
#anc17,
#a01,
#a02,
#a03,
#a04,
#a05,
#a06,
#a07,
#a08,
#a09,
#a10,
#a11,
#a12 {
  display: block;
  padding-top: 150px;
  margin-top: -150px;
}

#l01,
#l02,
#l03,
#l04,
#l05,
#l06,
#l07,
#l08 {
  display: block;
  padding-top: 100px;
  margin-top: -100px;
}

.list-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.list-center li {
  width: 50%;
}

@media all and (max-width: 639px) {
  .list-center {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .list-center li {
    width: 100%;
  }
}

.faq-list {
  max-width: 1500px;
  margin: 30px auto;
  overflow: hidden;
}

.faq-list li {
  margin-bottom: 50px;
}

.faq-list li .q-area {
  font-size: 2rem;
  position: relative;
}

.faq-list li .q-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #888;
  bottom: 0;
}

.faq-list li .q-area span {
  font-size: 3rem;
  padding-right: 10px;
  color: #888;
}

@media all and (max-width: 639px) {
  .faq-list li .q-area {
    font-size: 1.7rem;
  }
  .faq-list li .q-area span {
    font-size: 2rem;
    line-height: 2rem;
  }
}

.faq-list li .a-area {
  position: relative;
  max-width: 90%;
  margin: 40px 0 0 auto;
  background: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
}

.faq-list li .a-area span {
  font-size: 5rem;
  padding-right: 10px;
  position: absolute;
  top: -30px;
  left: -50px;
  color: #D81E1E;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.faq-list li .a-area span:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 639px) {
  .faq-list li .a-area {
    max-width: 85%;
  }
  .faq-list li .a-area span {
    font-size: 2rem;
    line-height: 2rem;
    top: 0px;
    left: -35px;
  }
}

.faq-dl .faq-inner {
  padding: 10px;
  margin-bottom: 20px;
}

.faq-dl .faq-inner:not(:last-of-type) {
  margin-bottom: 35px;
  padding-bottom: 20px;
  border-bottom: 3px solid #eee;
}

.faq-dl .faq-inner dt,
.faq-dl .faq-inner dd {
  position: relative;
  padding: 10px 10px 10px 55px;
}

.faq-dl .faq-inner dt:before,
.faq-dl .faq-inner dd:before {
  position: absolute;
  content: "";
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  left: 0;
  top: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.faq-dl .faq-inner dt:before:first-letter,
.faq-dl .faq-inner dd:before:first-letter {
  text-transform: uppercase;
}

.faq-dl .faq-inner dt {
  margin-bottom: 10px;
  font-weight: 600;
}

.faq-dl .faq-inner dt:before {
  content: "Q";
  color: #888;
  font-size: 3rem;
  background: rgba(136, 136, 136, 0.2);
}

.faq-dl .faq-inner dd:before {
  content: "A";
  color: #f66009;
  font-size: 3rem;
  background: rgba(255, 197, 23, 0.2);
}

.works-list > li {
  padding: 15px 20px;
  border-top: 2px solid #333;
  font-weight: 600;
}

.works-list > li:before {
  content: "●";
  margin-right: 5px;
  color: #0083de;
}

.works-list > li:last-child {
  border-bottom: 2px solid #222;
}

.point-num {
  position: relative;
  z-index: 2;
  line-height: 1;
  color: #0083de;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 5rem;
  text-align: center;
  margin: 0 auto -30px;
}

.point-num:first-letter {
  text-transform: uppercase;
}

.bnr_list {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.bnr_list.grid1 li {
  max-width: 400px;
}

.bnr_list li {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  height: 100%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 2px 2px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 2px 2px;
  position: relative;
}

.bnr_list li img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

@media all and (max-width: 639px) {
  .bnr_list li {
    font-size: 12px;
    line-height: 1.5;
    width: 60%;
    padding: 0;
  }
}

.bnr_list .bnr_txt {
  margin-top: 4px;
  padding: 2px 0;
  font-size: 1.2rem;
  line-height: 1;
  background: #f2f2f2;
}

@media all and (max-width: 639px) {
  .bnr_list .bnr_txt {
    font-size: 1.5rem;
  }
}

.bnr_list a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.bnr_list a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.box-txtarea {
  padding: 0 70px;
}

@media all and (max-width: 1100px) {
  .box-txtarea {
    padding: 0 40px;
  }
}

@media all and (max-width: 639px) {
  .box-txtarea {
    padding: 0 10px;
  }
}

.top-gallery {
  margin: 30px auto;
}

.top-gallery li {
  margin: 0 8px;
}

.top-gallery li a {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.top-gallery li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

@media all and (max-width: 639px) {
  .top-gallery li a {
    height: 250px;
  }
}

/*====================================================================
slick
====================================================================*/
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}

.sliderArea.w300 {
  max-width: 300px;
}

.slick-slide {
  margin: 0 5px;
}

.slick-slide img {
  width: 100%;
  height: auto;
}

.slick-prev,
.slick-next {
  z-index: 1;
  background: #333;
}

.slick-prev:before,
.slick-next:before {
  color: #000;
}

.slick-prev:before {
  position: absolute;
  content: "";
  color: #000;
  background: url(../img/arrow-left.png) no-repeat !important;
  background-size: contain !important;
  width: 40px;
  height: 40px;
  left: -10px;
  top: -4px;
}

@media all and (max-width: 639px) {
  .slick-prev:before {
    width: 20px;
    height: 20px;
    left: 0px;
    top: 0px;
  }
}

@media all and (max-width: 639px) {
  .slick-prev {
    left: -30px !important;
  }
}

.slick-next:before,
.slick-next:before {
  color: #000;
  position: absolute;
  content: "";
  background: url(../img/arrow-right.png) no-repeat !important;
  background-size: contain !important;
  width: 40px;
  height: 40px;
  right: -10px;
  top: -4px;
}

@media all and (max-width: 639px) {
  .slick-next:before,
  .slick-next:before {
    width: 20px;
    height: 20px;
    right: 0px;
    top: 0px;
  }
}

@media all and (max-width: 639px) {
  .slick-next {
    right: -30px !important;
  }
}

.slick-slide {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  opacity: 0.2;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.thumb {
  margin: 20px 0 0;
}

.thumb .slick-slide {
  cursor: pointer;
}

.thumb .slick-slide:hover {
  opacity: 0.7;
}

.rssBox {
  height: 450px;
  overflow: auto;
}

.rssBox li {
  border-bottom: 1px dashed #aaa;
  margin-bottom: 10px;
  padding: 10px 0 10px 20px;
}

.rssBox li:after {
  display: block;
  content: "";
  clear: both;
}

.rssBox .rss-img {
  width: 140px;
  height: 120px;
  overflow: hidden;
  float: left;
  margin-right: 25px;
  background: rgba(136, 136, 136, 0.4);
}

.rssBox .rss-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit:cover";
}

.rssBox span {
  display: block;
  font-size: 11px;
}

@media all and (max-width: 639px) {
  .rssBox {
    height: 300px;
  }
  .rssBox .rss-img {
    width: 100px;
    height: 80px;
  }
}

.rssBox__article {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  color: #19262e;
}

.scroll_sp {
  overflow: auto;
  margin-bottom: 10px;
}

.scroll_sp::-webkit-scrollbar {
  width: 5px;
  background: #ccc;
}

.scroll_sp::-webkit-scrollbar:horizontal {
  height: 5px;
  background: #ccc;
}

.scroll_sp::-webkit-scrollbar-thumb {
  background: #969696;
  border-radius: 2px;
}

.bg-triangle {
  position: relative;
  overflow: hidden;
}

.bg-triangle:before {
  position: absolute;
  content: "";
  width: 25%;
  height: 100%;
  bottom: -40%;
  right: 10%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#888), to(rgba(136, 136, 136, 0.6)));
  background-image: linear-gradient(to top, #888, rgba(136, 136, 136, 0.6));
  -webkit-transform: skew(-50deg);
          transform: skew(-50deg);
  z-index: 2;
}

.bg-triangle:after {
  position: absolute;
  content: "";
  width: 42%;
  height: 100%;
  right: 2%;
  top: -53%;
  background: #125fca;
  -webkit-transform: skew(-59deg);
          transform: skew(-59deg);
  opacity: 0.5;
}

@media all and (max-width: 896px) {
  .bg-triangle:before {
    left: -180px;
  }
}

@media all and (max-width: 639px) {
  .bg-triangle:before {
    left: -80px;
    -webkit-transform: skew(10deg);
            transform: skew(10deg);
    width: 40%;
  }
  .bg-triangle:after {
    display: none;
  }
}

.bg-triangle.type1:before, .bg-triangle.type1:after {
  opacity: 0.2;
}

.content-head {
  height: 350px;
  background: url(../img/content-head.jpg) no-repeat center/cover;
}

@media all and (max-width: 639px) {
  .content-head {
    height: 280px;
  }
}

.works-title01 {
  margin-top: 10px;
  position: relative;
  font-size: 1.4rem;
  color: #888;
}

.works-title01 span {
  position: relative;
  background: #888;
  color: #fff;
  padding: 3px 8px;
  margin-right: 4px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  font-size: 13px;
}

.works-title01 span:first-letter {
  text-transform: uppercase;
}

.people-block {
  position: relative;
}

.people-block .name-block {
  position: absolute;
  left: 30px;
  top: 0;
  z-index: 2;
}

@media all and (max-width: 639px) {
  .people-block .name-block {
    position: relative;
    left: auto;
  }
}

.profi-box {
  position: relative;
  max-width: 440px;
  width: 100%;
}

.profi-box img {
  width: 100%;
}

@media all and (max-width: 639px) {
  .profi-txtarea {
    padding: 0 20px;
  }
}

.name {
  width: 200px;
  margin: -20px auto 20px;
  position: absolute;
  z-index: 2;
  background: #888;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 15px 6px;
  -webkit-box-shadow: 0 0 8px rgba(51, 51, 51, 0.05);
          box-shadow: 0 0 8px rgba(51, 51, 51, 0.05);
  line-height: 1.5;
  font-size: 1.6rem;
  bottom: 0;
  -webkit-filter: drop-shadow(6px 5px 1px rgba(0, 0, 0, 0.6));
          filter: drop-shadow(6px 5px 1px rgba(0, 0, 0, 0.6));
}

.name .small {
  font-size: 0.8em;
}

.profi-txt {
  background-color: #fff;
  border-top: 2px solid #888;
  text-align: left;
  padding: 20px;
}

.profi-txt span {
  color: #888;
  font-weight: bold;
  padding-right: 8px;
}

.dl_list {
  overflow: hidden;
  font-size: 1.4rem;
  margin: 20px 0;
}

.dl_list dt {
  float: left;
  width: 9em;
  padding: 5px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  border: 1px solid #888;
  border-radius: 30px;
  background: #888;
  font-size: 1.3rem;
}

@media all and (max-width: 639px) {
  .dl_list dt {
    font-size: 1.2rem;
  }
}

.dl_list dd {
  padding: 0 0 12px 10.2em;
  line-height: 1.6;
  border-bottom: 1px dotted #dddddd;
  margin: 0 0 10px;
}

.dl_list dd a {
  color: #333;
  background-image: -webkit-gradient(linear, left top, right top, from(#888), to(#1FA33A));
  background-image: linear-gradient(to right, #888, #1FA33A);
  padding-bottom: 0.25em;
  background-position: 100% 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  -webkit-transition: background-size 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-size 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-weight: 700;
}

.dl_list dd a:hover {
  background-position: 0 100%;
  background-size: 100% 1px;
}

.dl_list dd:last-child {
  margin: 0;
  border-bottom: none;
}

@media all and (max-width: 639px) {
  .dl_list dt {
    float: none;
  }
  .dl_list dd {
    padding: 8px 5px;
  }
}

.dl_news {
  border-top: solid 1px #aaa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 1.6;
}

.dl_news dt {
  padding: 16px 0px;
  border-bottom: solid 1px #aaa;
  color: #888;
  width: 25%;
}

.dl_news dt span {
  display: inline-block;
  padding: 0 8px;
  border: #888 1px solid;
  margin: 0 16px;
  color: #888;
}

.dl_news dd {
  width: 75%;
  padding: 16px 0px;
  border-bottom: solid 1px #aaa;
}

.dl_news dd:first-child {
  border-top: solid 1px #aaa;
}

@media all and (max-width: 639px) {
  .news-col {
    display: block;
  }
  .news-col dt {
    width: 100%;
    border-bottom: solid 0px #aaa;
    padding: 16px 0px 6px;
    text-align: left;
  }
  .news-col dd {
    width: 100%;
    padding: 0px 0px 16px;
  }
}

/* txtdeco
----------------------------------*/
.txtdeco {
  font-size: 3rem;
  font-weight: bold;
  color: #888;
}

@media all and (max-width: 896px) {
  .txtdeco {
    font-size: 1.6rem;
  }
}

.txtdeco.black {
  color: #000;
  font-weight: 800;
}

.txtdeco.white {
  color: #fff;
}

@media all and (max-width: 896px) {
  .txtdeco.white {
    font-size: 1.4rem;
  }
}

.txtdeco .bgLRextendTrigger:before {
  background-color: #888;
}

.txtdeco.txt-eng {
  font-size: 5rem;
  opacity: 0.5;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.txtdeco.txt-eng:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 896px) {
  .txtdeco.txt-eng {
    font-size: 3rem;
  }
}

.txtdeco.txt-ja {
  font-size: 2rem;
  color: #333;
}

@media all and (max-width: 896px) {
  .txtdeco.txt-ja {
    font-size: 1.4rem;
  }
}

.txtdeko_a {
  font-size: 3rem;
  font-weight: bold;
  color: #888;
}

@media all and (max-width: 896px) {
  .txtdeko_a {
    font-size: 1.6rem;
  }
}

.txtdeko_a.black {
  color: #000;
  font-weight: 800;
}

.txtdeko_a.white {
  color: #fff;
}

@media all and (max-width: 896px) {
  .txtdeko_a.white {
    font-size: 1.4rem;
  }
}

.txtdeko_a .bgLRextendTrigger:before {
  background-color: #888;
}

.txtdeko_a.txt-eng {
  font-size: 3rem;
  opacity: 0.5;
}

@media all and (max-width: 896px) {
  .txtdeko_a.txt-eng {
    font-size: 3rem;
  }
}

.txtdeko_a.txt-ja {
  font-size: 2rem;
  color: #333;
}

@media all and (max-width: 896px) {
  .txtdeko_a.txt-ja {
    font-size: 1.4rem;
  }
}

.txtdeco-ttl {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.txtdeco-ttl .bgLRextendTrigger.txt-ja:before {
  background-color: #888;
}

.txtdeko2 span {
  color: #888;
  padding: 8px 35px;
  margin-right: 5px;
  border-radius: 40px;
  line-height: 3rem;
  border: 2px solid #888;
  font-weight: bold;
}

.txtdeko3 {
  line-height: 3rem;
  font-weight: bold;
  position: relative;
  font-size: 1.6rem;
  margin: 6px 0;
}

@media all and (max-width: 896px) {
  .txtdeko3 {
    font-size: 1.4rem;
  }
}

.txtdeko3 span {
  font-weight: bold;
  background-color: #888;
  color: #fff;
  padding: 2px 10px;
}

.ttl_box {
  margin: 30px 0;
}

.ttl_box .ttl .txtsub {
  font-weight: bold;
}

.ttl_box .ttl .ttlmain {
  font-weight: bold;
  color: #888;
  border-bottom: 2px solid #888;
  font-size: 2rem;
  margin-bottom: 20px;
}

@media all and (max-width: 639px) {
  .ttl_box .ttl .ttlmain {
    font-size: 1.4rem;
  }
}

.txtdeko4 {
  padding: 5px 15px;
  margin-right: 5px;
  line-height: 2rem;
  position: relative;
  display: table;
}

.txtdeko4 .num {
  font-weight: bold;
  margin-right: 10px;
  background-color: #ffc517;
  color: #333;
  padding: 2px 10px;
  display: table-cell;
  vertical-align: middle;
}

.txtdeko4 .sub {
  font-weight: bold;
  margin-right: 10px;
  border: 1px solid #fff;
  color: #fff;
  padding: 2px 10px;
  display: table-cell;
  vertical-align: middle;
  width: 140px;
  margin-right: 10px;
}

.txtdeko4 .txt {
  padding-left: 15px;
  text-align: left;
  display: table-cell;
}

@media all and (max-width: 896px) {
  .txtdeko4 {
    display: block;
    padding: 5px 0px;
  }
  .txtdeko4 .num {
    font-weight: bold;
    margin-right: 10px;
    background-color: #fff;
    color: #fff;
    padding: 2px 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 1.4rem;
  }
  .txtdeko4 .sub {
    font-weight: bold;
    margin-right: 10px;
    border: 1px solid #fff;
    color: #fff;
    padding: 2px 10px;
    display: table-cell;
    vertical-align: middle;
    width: 140px;
    margin-right: 10px;
    font-size: 1.4rem;
  }
  .txtdeko4 .txt {
    padding-left: 5px;
    padding: 10px;
    text-align: left;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.4rem;
  }
}

.txtdeco-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media all and (max-width: 896px) {
  .txtdeco-list li {
    display: block;
  }
}

.txtdeco-list li i {
  color: #888;
  padding-right: 5px;
  padding-top: 7px;
}

@media all and (max-width: 896px) {
  .txtdeco-list li p {
    display: contents;
  }
}

/* flow-list
----------------------------------*/
.flow-list {
  padding-left: 120px;
  position: relative;
  margin: 0 auto;
  max-width: 1500px;
}

.flow-list:before {
  content: "";
  width: 4px;
  height: 100%;
  background: #bbbbbb;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}

@media all and (max-width: 639px) {
  .flow-list:before {
    left: 74px;
  }
}

.flow-list li {
  position: relative;
}

.flow-list li:not(:last-child) {
  margin-bottom: 70px;
}

.flow-list li .icon {
  font-size: 3rem;
  color: #fff;
  background: #888;
  border-radius: 5px;
  padding: 8px 20px 4px;
  display: block;
  position: absolute;
  top: 5px;
  left: -120px;
  z-index: 100;
  width: 100%;
  max-width: 74px;
  line-height: 1;
}

.flow-list li .icon span {
  font-size: 1.2rem;
  display: block;
}

@media all and (max-width: 639px) {
  .flow-list li .icon {
    font-size: 2rem;
    padding: 8px 10px;
  }
}

.flow-list li .icon.bgLRextend {
  overflow: inherit;
}

.flow-list li .icon.bgLRextend:before {
  top: 0;
  left: 0;
}

.flow-list li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #888;
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flow-list li .txtarea {
  padding-left: 70px;
  position: relative;
}

.flow-list li .txtarea img {
  border: 1px solid #aaa;
  -webkit-box-shadow: rgba(170, 170, 170, 0.2) 1px 1px 2px 2px;
          box-shadow: rgba(170, 170, 170, 0.2) 1px 1px 2px 2px;
}

@media all and (max-width: 639px) {
  .flow-list li .txtarea {
    padding-left: 0px;
    margin-right: 10px;
  }
}

.flow-list li .txtarea:before, .flow-list li .txtarea:after {
  content: "";
  display: block;
  position: absolute;
  top: 35px;
}

.flow-list li .txtarea:before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #888;
  border-radius: 50%;
  left: -9px;
}

@media all and (max-width: 639px) {
  .flow-list li .txtarea:before {
    left: -55px;
  }
}

.flow-list li .txtarea:after {
  width: 50px;
  border-bottom: 1px dashed #888;
  position: absolute;
  left: 5px;
}

@media all and (max-width: 639px) {
  .flow-list li .txtarea:after {
    width: 20px;
    left: -40px;
  }
}

.flow-list li .txtarea .txtarea {
  margin-bottom: 40px;
}

.flow-list li .txtarea .ttl {
  font-size: 2rem;
  color: #888;
  margin-bottom: 10px;
  font-weight: bold;
}

@media all and (max-width: 639px) {
  .flow-list li .txtarea .ttl {
    font-size: 1.4rem;
  }
}

.flow-list li .txtarea .txt {
  font-size: 1.5rem;
  color: #333;
}

@media all and (max-width: 639px) {
  .flow-list li .txtarea .txt {
    margin-top: 10px;
    font-size: 1.2rem;
  }
}

.price-dl dt {
  background: #f0e7cb;
  padding: 14px 20px;
  color: #333;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
}

.price-dl dd {
  padding: 20px;
  margin-bottom: 25px;
}

/* menu_bnr
----------------------------------*/
.buttonBox {
  margin: 0 auto 40px;
  position: relative;
  width: 100%;
  max-width: 420px;
  min-width: 150px;
}

.buttonBox.type-bm0 {
  margin-bottom: 0px;
}

.buttonBox.type-tm30 {
  margin-top: 30px;
}

.buttonBox .button {
  padding: 5% 0 0;
  width: 100%;
  height: 80px;
  position: relative;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  font-size: 2rem;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  outline: none;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media all and (max-width: 896px) {
  .buttonBox .button {
    padding: 6% 0 0;
  }
}

@media all and (max-width: 639px) {
  .buttonBox .button {
    padding: 8% 0 0;
  }
}

.buttonBox .button .button_bnr {
  color: #888;
}

.buttonBox .button .button_bnr span {
  text-align: center;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #888;
  position: relative;
  font-size: 2rem;
}

@media all and (max-width: 639px) {
  .buttonBox .button .button_bnr span {
    font-size: 1.3rem;
    padding-right: 60px;
  }
}

.buttonBox .button .button_bnr span::before, .buttonBox .button .button_bnr span::after {
  content: "";
  position: absolute;
  background: #888;
}

.buttonBox .button .button_bnr span::before {
  top: 21px;
  right: 20px;
  height: 1px;
  width: 42px;
}

.buttonBox .button .button_bnr span::after {
  top: 17px;
  right: 19px;
  height: 1px;
  width: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media all and (max-width: 639px) {
  .buttonBox.type-w {
    margin: 30px auto;
    text-align: center;
    max-width: 320px;
  }
}

.buttonBox::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #888;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform ease 0.3s;
  transition: -webkit-transform ease 0.3s;
  transition: transform ease 0.3s;
  transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

.buttonBox:hover {
  color: #fff;
}

.buttonBox:hover .button_bnr span {
  color: #fff;
}

.buttonBox:hover .button_bnr span::before, .buttonBox:hover .button_bnr span::after {
  content: "";
  position: absolute;
  background: #fff;
}

.buttonBox:hover::before {
  background: #0044a3;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.buttonBox:hover::before .button {
  background: #0044a3;
}

.buttonBox .border,
.buttonBox .border2 {
  position: absolute;
  background: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.buttonBox .border {
  top: 0;
  left: 0;
  border-left: 1px solid #888;
  border-top: 1px solid #888;
  width: 30px;
  height: 30px;
}

.buttonBox .border2 {
  bottom: 0;
  right: 0;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  width: 30px;
  height: 30px;
}

.buttonBox:hover .border,
.buttonBox:hover .border2 {
  width: 102%;
  height: 105%;
}

.buttonBox.type1 .button {
  background: #888;
  color: #fff;
}

.buttonBox.type1 .button_bnr span {
  color: #fff;
}

.buttonBox.type1 .button_bnr span::before, .buttonBox.type1 .button_bnr span::after {
  content: "";
  position: absolute;
  background: #fff;
}

.buttonBox.type1 .border {
  border-left: 1px solid #8FB8C9;
  border-top: 1px solid #8FB8C9;
}

.buttonBox.type1 .border2 {
  border-right: 1px solid #8FB8C9;
  border-bottom: 1px solid #8FB8C9;
}

.buttonBox.type1:hover {
  color: #fff;
}

.buttonBox.type1:hover .button_bnr span {
  color: #fff;
}

.buttonBox.type1:hover .button_bnr span::before, .buttonBox.type1:hover .button_bnr span::after {
  content: "";
  position: absolute;
  background: #fff;
}

.buttonBox.type1:hover::before {
  background: #0044a3;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.buttonBox.type1:hover::before .button {
  background: #0044a3;
}

.animation-content .animation-bar {
  position: relative;
  width: 100%;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.animation-content .animation-bar::before {
  -webkit-animation: animation-bar 0.8s ease 0s 1 normal forwards;
  animation: animation-bar 0.8s ease 0s 1 normal forwards;
}

.point_box01 {
  padding-bottom: 60px;
}

.point_box01.contain li figure {
  height: 300px;
}

.point_box01.contain li figure img {
  -o-object-fit: contain;
     object-fit: contain;
}

@media all and (max-width: 639px) {
  .point_box01.contain li figure {
    height: 300px;
  }
}

.point_box01.contain li .txtbox {
  margin: 0px auto 0;
}

.point_box01.radius li {
  border-radius: 20px;
}

.point_box01.radius li figure {
  border-radius: 20px 20px 0 0;
}

.point_box01.radius li .txtbox {
  background: none;
}

.point_box01.type1 li figure {
  height: 500px;
}

@media all and (max-width: 639px) {
  .point_box01.type1 li figure {
    height: 300px;
  }
}

.point_box01.type1 li .txtbox {
  position: relative;
  margin: -180px auto 0;
  padding: 40px 80px 80px;
  width: 95%;
  max-width: 1200px;
  background-color: white;
}

@media all and (max-width: 1100px) {
  .point_box01.type1 li .txtbox {
    width: 90%;
  }
}

@media all and (max-width: 639px) {
  .point_box01.type1 li .txtbox {
    width: 90%;
    padding: 20px 10px 0px;
  }
}

.point_box01 li {
  position: relative;
  width: 100%;
  background-color: white;
}

.point_box01 li > a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.point_box01 li > a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.point_box01 li figure {
  width: 100%;
  height: 16vw;
  overflow: hidden;
  position: relative;
}

@media all and (max-width: 639px) {
  .point_box01 li figure {
    height: 50vw;
  }
}

.point_box01 li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.point_box01 li .txtbox {
  position: relative;
  margin: -60px auto 0;
  width: calc(100% - 10%);
  background-color: #fff;
  padding: 20px 30px 30px;
}

@media all and (max-width: 639px) {
  .point_box01 li .txtbox {
    padding: 20px 10px 30px;
  }
}

.point_box01 li .txtbox > .num {
  font-size: 2.8rem;
  line-height: 1;
  font-family: "Josefin Sans", sans-serif;
  border-radius: 50%;
  border: 1px solid #888;
  color: #888;
  width: 70px;
  height: 70px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #fff;
  margin: 0 auto 15px;
}

.point_box01 li .txtbox .ttl {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin: 15px auto 35px;
  position: relative;
  color: #888;
}

.point_box01 li .txtbox .ttl:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #888;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.pagelink_photo {
  position: relative;
  margin: 0px auto 0px;
}

.pagelink_photo .flipLeftTrigger {
  position: relative;
  margin-bottom: 50px;
  margin: 0 0;
}

@media all and (max-width: 639px) {
  .pagelink_photo .flipLeftTrigger {
    padding: 0px 0;
  }
}

.pagelink_photo .flipLeftTrigger a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.pagelink_photo .flipLeftTrigger .photo {
  position: relative;
}

.pagelink_photo .flipLeftTrigger .photo img {
  width: 100%;
  height: 550px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 1100px) {
  .pagelink_photo .flipLeftTrigger .photo img {
    height: 850px;
  }
}

.pagelink_photo .flipLeftTrigger .num {
  position: absolute;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  left: 0;
  right: 0;
  margin: 0 auto;
  line-height: 11rem;
  top: 36%;
  font-size: 16rem;
  text-align: center;
  color: #fff;
  opacity: 0.6;
}

.pagelink_photo .flipLeftTrigger .num:first-letter {
  text-transform: uppercase;
}

.pagelink_photo .flipLeftTrigger .txtarea {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 10;
}

.pagelink_photo .flipLeftTrigger .txtarea.bgLRextendTrigger:before {
  background-color: #888;
}

.pagelink_photo .flipLeftTrigger .eng {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  left: 0;
  right: 0;
  margin: 0 auto;
  line-height: 1;
  top: 0%;
  font-size: 5.8rem;
  text-align: center;
  color: #fff;
  opacity: 0.6;
}

.pagelink_photo .flipLeftTrigger .eng:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 639px) {
  .pagelink_photo .flipLeftTrigger .eng {
    font-size: 3rem;
  }
}

.pagelink_photo .flipLeftTrigger .txt {
  padding: 0 20px;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  opacity: 0.6;
}

.pagelink_photo .flipLeftTrigger .txt .bgextend {
  margin: 0 auto;
}

.pagelink_photo .flipLeftTrigger .txt .bgLRextendTrigger {
  padding: 20px 20px;
}

.pagelink_photo .flipLeftTrigger .txt .bgLRextendTrigger:before {
  left: 0;
  top: 0;
}

.pagelink_photo .flipLeftTrigger .txt2 {
  padding: 0 20px;
  color: #fff;
  font-size: 2.2rem;
  text-align: center;
  top: 45px;
  font-weight: normal;
}

.pagelink_photo .flipLeftTrigger .sub-txtarea {
  font-size: 1.8rem;
}

.pagelink_photo .flipLeftTrigger:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
  z-index: 1;
  bottom: 0;
  opacity: 0.7;
}

.pagelink_photo .flipLeftTrigger.type1:before {
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
}

.pagelink_photo .flipLeftTrigger.type2:before {
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
}

.pagelink_photo .flipLeftTrigger.type3:before {
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
}

.pagelink_photo .flipLeftTrigger.type4:before {
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
}

.pagelink_photo .flipLeftTrigger.type5:before {
  background: rgba(136, 136, 136, 0.8);
  background: linear-gradient(113deg, #888888 0%, rgba(136, 136, 136, 0.8) 100%);
}

.pagelink_photo .flipLeftTrigger:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  bottom: 0;
  opacity: 0.6;
}

.pagelink_photo .flipLeftTrigger .sub-txtarea {
  display: block;
  color: #fff;
  padding: 20px 10% 0;
}

.pagelink_photo .flipLeftTrigger .sub-txt {
  margin-top: 10px;
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  z-index: 3;
  opacity: 1;
}

.pagelink_photo .flipLeftTrigger .sub-txt span {
  border: 1px solid #fff;
  padding: 3px 20px;
  color: #fff;
  border-radius: 50px;
}

.pagelink_photo .flipLeftTrigger:hover:before {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pagelink_photo .flipLeftTrigger:hover .photo {
  overflow: hidden;
}

.pagelink_photo .flipLeftTrigger:hover .photo img {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  -webkit-transform: rotate(5deg) scale(1.2);
          transform: rotate(5deg) scale(1.2);
}

@media all and (max-width: 1367px) {
  .pagelink_photo .flipLeftTrigger .num {
    font-size: 12rem;
    line-height: 8rem;
  }
  .pagelink_photo .flipLeftTrigger .photo img {
    height: 500px;
  }
}

@media all and (max-width: 1100px) {
  .pagelink_photo .flipLeftTrigger .num {
    top: 26%;
  }
  .pagelink_photo .flipLeftTrigger .photo img {
    height: 500px;
  }
  .pagelink_photo .flipLeftTrigger .txt {
    font-size: 1.7rem;
  }
  .pagelink_photo .flipLeftTrigger .txt2 {
    font-size: 1.4rem;
  }
  .pagelink_photo .flipLeftTrigger .sub-txt span {
    font-size: 1.6rem;
  }
  .pagelink_photo .flipLeftTrigger .sub-min-txt {
    font-size: 1.2rem;
  }
}

@media all and (max-width: 639px) {
  .pagelink_photo .flipLeftTrigger {
    width: 100%;
    height: 100%;
    padding: 0px 0;
    margin-bottom: 6px;
  }
  .pagelink_photo .flipLeftTrigger .num {
    line-height: 6rem;
    top: 23%;
    font-size: 8rem;
  }
  .pagelink_photo .flipLeftTrigger .txt {
    font-size: 1.4rem;
  }
  .pagelink_photo .flipLeftTrigger .txt2 {
    font-size: 1.2rem;
  }
  .pagelink_photo .flipLeftTrigger .sub-txt {
    bottom: 10%;
  }
  .pagelink_photo .flipLeftTrigger .sub-txt span {
    padding: 2px 20px;
    font-size: 1rem;
  }
  .pagelink_photo .flipLeftTrigger .sub-min-txt {
    font-size: 1.2rem;
  }
  .pagelink_photo .flipLeftTrigger .photo img {
    width: 100%;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .pagelink_photo .flipLeftTrigger .txtarea .txt2,
  .pagelink_photo .flipLeftTrigger .txtarea .sub-min-txt {
    font-size: 1rem !important;
  }
  .pagelink_photo .flipLeftTrigger .photo img {
    height: 400px;
  }
}

.topic-box {
  display: table;
  margin: 60px auto;
  width: 100%;
}

.topic-box .ttl-area {
  display: table-cell;
  width: 25%;
  vertical-align: middle;
  padding: 0px 40px;
}

.topic-box .ttl-area.type1 {
  vertical-align: inherit;
}

.topic-box .ttl-area .mtitle {
  text-align: right;
}

.topic-box .ttl-area.type1 {
  background-color: #fff;
}

.topic-box .ttl-area.type1 .mtitle .eng,
.topic-box .ttl-area.type1 .mtitle .ja {
  color: #fff;
}

.topic-box .list-area {
  display: table-cell;
  width: 75%;
  padding: 0px 60px;
}

@media all and (max-width: 896px) {
  .topic-box {
    display: block;
  }
  .topic-box .ttl-area {
    display: block;
    width: 100%;
    padding: 20px 0px;
  }
  .topic-box .ttl-area .mtitle {
    text-align: center;
    margin-bottom: 0px;
  }
  .topic-box .list-area {
    display: block;
    width: 100%;
    padding: 40px 30px;
  }
}

@media all and (max-width: 639px) {
  .topic-box {
    display: block;
    padding: 40px 0;
  }
  .topic-box .ttl-area {
    display: block;
    width: 100%;
    padding: 10px 0 10px;
  }
  .topic-box .list-area {
    padding: 20px 20px;
  }
}

.page_title03 {
  position: relative;
  width: 100%;
}

.page_title03 .photo {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.page_title03 .photo img {
  width: 100%;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
}

.page_title03 .photo:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #111;
  opacity: 0.2;
}

.page_title03 .ttl {
  font-size: 1.8rem;
  margin-bottom: 20px;
  position: absolute;
  left: 0;
  margin: 0 auto;
  bottom: 0;
  text-align: left;
  width: 100%;
  padding: 15px 30px 0;
  color: #888;
}

.page_title03 .ttl.left {
  width: auto;
}

.page_title03 .ttl.right {
  width: auto;
  left: auto;
  right: 0;
  margin: 0 0 0 auto;
}

.page_title03 .ttl.bg_color {
  background-color: white;
}

.page_title03 .ttl .mtitle {
  margin: 0;
}

.page_title03 .ttl span {
  font-size: 1.8rem;
  margin-bottom: 20px;
  position: absolute;
  left: 0;
  margin: 0 auto;
  bottom: 0;
  text-align: left;
  padding: 15px 30px;
  background-color: rgba(136, 136, 136, 0.8);
  color: #fff;
}

@media all and (max-width: 639px) {
  .page_title03 .ttl {
    padding: 0;
  }
  .page_title03 .ttl span {
    position: relative;
    display: block;
    font-size: 1.6rem;
    padding: 15px;
  }
}

.page_title03 .txtarea {
  background-color: rgba(170, 170, 170, 0.2);
  padding: 30px;
  width: 100%;
}

@media all and (max-width: 639px) {
  .page_title03 .txtarea {
    padding: 15px;
  }
}

.recruit-box {
  margin-top: 100px;
}

.recruit-box .txtarea {
  margin-right: 4%;
}

.recruit-box .ttl-sub {
  margin-top: 30px;
}

.recruit-box .ttl-sub span {
  color: #fff;
  border: 1px solid #888;
  background-color: #888;
  padding: 10px 10px;
  font-size: 1.4rem;
  max-width: 300px;
}

.recruit-box .ttl {
  font-size: 2.6rem;
  color: #888;
}

@media all and (max-width: 639px) {
  .recruit-box {
    margin-bottom: 40px;
  }
  .recruit-box .photo {
    margin-top: 10px;
  }
}

.area-box {
  position: relative;
  line-height: 2.5;
  text-align: left;
}

@media all and (max-width: 639px) {
  .area-box {
    margin-top: 50px;
  }
  .area-box .area-boxtxt {
    text-align: center;
    font-size: 1.2rem !important;
  }
}

.service-box {
  position: relative;
  margin: 0 auto;
}

.service-box .txtarea {
  position: relative;
}

.service-box .txtarea .ttl {
  font-weight: bold;
  font-size: 3rem;
  margin-left: 10px;
  color: #fff;
}

.service-box .txtarea .ttl.type1 {
  color: #888;
}

.service-box .txtarea .txt {
  margin-top: 20px;
}

.service-box .txtarea .num {
  font-size: 7rem;
  top: -60px;
  left: 32px;
  color: #ffc517;
}

.service-box .txtarea .num.type2 {
  color: #363636;
}

.service-box .photoarea {
  position: absolute;
  right: 10%;
  bottom: -100px;
  width: 280px;
}

.service-box .photoarea img {
  width: 100%;
}

@media all and (max-width: 896px) {
  .service-box .photoarea {
    right: 4%;
    bottom: -100px;
    width: 240px;
  }
}

@media all and (max-width: 639px) {
  .service-box {
    margin: 0px auto 40px;
  }
  .service-box .txtarea {
    padding: 30px 15px;
  }
  .service-box .txtarea .ttl {
    font-size: 1.8rem;
  }
  .service-box .txtarea .num {
    font-size: 3rem;
    top: -34px;
    left: 12px;
  }
  .service-box .photoarea {
    position: inherit;
    right: auto;
    left: 0;
    bottom: 20px;
    width: 180px;
    margin-right: auto;
    margin-left: auto;
  }
}

.service-box.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: 0 auto 50px;
}

.service-box.reverse .photoarea {
  position: absolute;
  left: 0;
  top: -30px;
  width: 440px;
}

@media all and (max-width: 896px) {
  .service-box.reverse .photoarea {
    top: -50px;
    width: 360px;
  }
}

@media all and (max-width: 639px) {
  .service-box.reverse .photoarea {
    position: inherit;
    right: auto;
    left: 0;
    top: -22px;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
  }
}

.info-list {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.info-list li .ttl {
  border-top: 2px solid #888;
  text-align: center;
  padding-top: 10px;
  font-weight: bold;
}

.info-list li .txt {
  margin-top: 10px;
  font-size: 1.4rem;
}

.info-list li .txt span {
  color: #888;
}

.business-list {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.business-list li {
  margin-bottom: 40px;
}

.business-list li:last-child {
  margin-bottom: 0;
}

.business-list li .ttl {
  padding-top: 10px;
  font-weight: bold;
}

.business-list li .ttl span {
  color: #fff;
  background-color: #888;
  padding: 5px 20px;
}

.business-list li .ttl span.m-10 {
  margin-right: 10px;
}

.business-list li .txt {
  margin-top: 10px;
  font-size: 1.4rem;
}

.business-list li .txt span {
  color: #888;
}

.news_list.type1 > li .data {
  color: #333;
  background-color: inherit;
}

.news_list.type1 > li .data:before {
  font-family: "Font Awesome 5 Free";
  content: "\f017";
  font-weight: 900;
  margin-right: 5px;
}

.news_list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 4px 6px;
  border-bottom: 1.9px solid #ddd;
}

.news_list > li:not(:last-of-type) {
  margin-bottom: 15px;
}

.news_list > li .data {
  font-size: 1.6rem;
  color: #fff;
  padding: 0px 16px;
  min-width: 120px;
  background-color: #888;
  text-align: center;
}

.news_list > li .tag {
  font-size: 1.4rem;
  color: #888;
  background-color: #fff;
  border: 1px solid #888;
  padding: 1px 16px;
  margin-left: 5px;
  min-width: 120px;
  text-align: center;
  /*background: #111;*/
}

.news_list > li .txt {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
  padding: 3px 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.4;
}

.news_list > li .txt a {
  color: #888;
}

.news_list > li .txt a:hover {
  opacity: 0.5;
}

@media all and (max-width: 896px) {
  .news_list > li .data {
    display: inline-block;
    font-size: 1.2rem;
    padding: 3px 6px;
    margin-left: 0;
  }
  .news_list > li .tag {
    font-size: 1.2rem;
    padding: 2px 6px;
    margin-left: 8px;
  }
  .news_list > li .txt {
    -webkit-box-flex: 100;
        -ms-flex: 100;
            flex: 100;
    margin: 5px 0 0;
    width: 100%;
    display: block;
    font-size: 1.2rem;
  }
}

@media all and (max-width: 639px) {
  .news_list > li .data {
    font-size: 12px;
    width: 120px;
    text-align: center;
  }
  .news_list > li .tag {
    font-size: 12px;
    margin-left: 4px;
  }
  .news_list > li .txt {
    font-size: 12px;
    padding: 8px 0;
    margin-left: 4px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

.single.type1 {
  padding-bottom: 0;
}

.single.type2 {
  padding: 20px 0 40px;
}

.single.type4 {
  padding: 20px 0 40px;
}

@media all and (max-width: 639px) {
  .single.type4 {
    padding: 20px 20px 40px;
  }
}

.single.area {
  padding: 120px;
}

@media all and (max-width: 896px) {
  .single.area {
    padding: 60px 0;
  }
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.flex.gap {
  gap: 0px 30px;
}

@media all and (max-width: 639px) {
  .flex {
    display: block;
  }
}

.flex.w-100 {
  width: 100%;
}

.flex.j-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex.a-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex.a-first {
  -ms-flex-wrap: inherit;
      flex-wrap: inherit;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media all and (max-width: 1100px) {
  .flex.flex-pro {
    display: block;
  }
}

.flex.flex-pro .flex-30 {
  width: 30%;
}

@media all and (max-width: 1100px) {
  .flex.flex-pro .flex-30 {
    width: 100%;
    margin: 0 auto;
  }
}

.flex.flex-pro .flex-60 {
  width: 60%;
}

@media all and (max-width: 1100px) {
  .flex.flex-pro .flex-60 {
    width: 100%;
    margin: 0 auto;
  }
}

@media all and (max-width: 896px) {
  .flex.flex-tablet {
    display: block;
  }
}

@media all and (max-width: 896px) {
  .flex.flex-tablet .flex-36 {
    width: 35%;
    margin: 0 auto;
  }
}

@media all and (max-width: 896px) {
  .flex.flex-tablet .flex-56 {
    width: 90%;
    margin: 20px auto 0;
    margin-left: auto;
  }
}

.flex.flex-tablet .flex-50 {
  width: 50%;
}

@media all and (max-width: 896px) {
  .flex.flex-tablet .flex-50 {
    width: 100%;
  }
}

.flex.flex-tablet .flex-70 {
  width: 70%;
}

@media all and (max-width: 896px) {
  .flex.flex-tablet .flex-70 {
    width: 100%;
  }
}

.flex .flex-15 {
  width: 15%;
}

@media all and (max-width: 639px) {
  .flex .flex-15 {
    width: 50%;
    margin: 0 auto;
  }
}

.flex .flex-18 {
  width: 18%;
  margin-left: 2%;
}

@media all and (max-width: 639px) {
  .flex .flex-18 {
    width: 90%;
    margin-left: auto;
    margin: 0 auto;
  }
}

.flex .flex-20 {
  width: 20%;
}

@media all and (max-width: 639px) {
  .flex .flex-20 {
    width: 90%;
    margin: 0 auto;
  }
}

.flex .flex-25 {
  width: 25%;
}

@media all and (max-width: 639px) {
  .flex .flex-25 {
    width: 90%;
    margin: 0 auto;
  }
}

.flex .flex-30 {
  width: 30%;
}

@media all and (max-width: 639px) {
  .flex .flex-30 {
    width: 90%;
    margin: 0 auto;
  }
}

.flex .flex-36 {
  width: 36%;
}

@media all and (max-width: 639px) {
  .flex .flex-36 {
    width: 100%;
    margin: 0 auto;
  }
}

.flex .flex-38 {
  width: 38%;
}

@media all and (max-width: 639px) {
  .flex .flex-38 {
    width: 100%;
    margin: 0 auto;
  }
}

.flex .flex-40 {
  width: 40%;
}

@media all and (max-width: 639px) {
  .flex .flex-40 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.flex .flex-48 {
  width: 48%;
}

@media all and (max-width: 639px) {
  .flex .flex-48 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.flex .flex-48.l-m2 {
  margin-left: 2%;
}

@media all and (max-width: 639px) {
  .flex .flex-48.l-m2 {
    width: 96%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

.flex .flex-50 {
  width: 50%;
}

@media all and (max-width: 896px) {
  .flex .flex-50 {
    width: 100%;
  }
}

.flex .flex-56 {
  width: 56%;
}

@media all and (max-width: 639px) {
  .flex .flex-56 {
    width: 100%;
  }
}

.flex .flex-56.l-m6 {
  margin-left: 6%;
}

@media all and (max-width: 896px) {
  .flex .flex-56.l-m6 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media all and (max-width: 639px) {
  .flex .flex-56.l-m6 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.flex .flex-60 {
  width: 60%;
}

@media all and (max-width: 639px) {
  .flex .flex-60 {
    width: 100%;
  }
}

.flex .flex-62 {
  width: 62%;
  margin-left: 4%;
}

@media all and (max-width: 639px) {
  .flex .flex-62 {
    width: 100%;
    margin-left: auto;
  }
}

.flex .flex-68 {
  width: 68%;
  margin-left: 2%;
}

@media all and (max-width: 639px) {
  .flex .flex-68 {
    margin-left: auto;
    width: 100%;
  }
}

.flex .flex-70 {
  width: 70%;
}

@media all and (max-width: 639px) {
  .flex .flex-70 {
    width: 100%;
  }
}

.flex .flex-78 {
  width: 78%;
  margin-left: 2%;
}

@media all and (max-width: 639px) {
  .flex .flex-78 {
    margin-left: auto;
    width: 100%;
  }
}

.flex .flex-80 {
  width: 80%;
  margin-left: 3%;
}

@media all and (max-width: 639px) {
  .flex .flex-80 {
    margin-left: auto;
    width: 100%;
  }
}

.contentlist li {
  background-color: #fff;
  position: relative;
  width: 100%;
  padding: 1%;
}

.contentlist li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.contentlist li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.contentlist li:hover {
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.contentlist li:hover .link-arrow {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  right: 10px;
  mix-blend-mode: color-burn;
}

.contentlist li:hover figure {
  position: relative;
}

.contentlist li:hover figure img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  position: relative;
}

.contentlist li:hover .txt-box {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  background-color: #888;
}

.contentlist li:hover .txt {
  display: block;
  bottom: 0;
  left: 110px;
  color: #fff;
  text-align: left;
  padding: 56px 0 0 30px;
}

@media all and (max-width: 896px) {
  .contentlist li:hover .txt {
    position: initial;
    padding: 0 0 0 0;
    text-align: center;
  }
}

.contentlist li figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 20vw;
}

@media all and (max-width: 639px) {
  .contentlist li figure {
    height: 40vw;
  }
}

.contentlist li figure img {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.contentlist li .txt-box {
  position: relative;
  background-color: #888;
  padding: 30px 0;
}

.contentlist li .ttl {
  text-align: center;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.11em;
  font-weight: normal;
  color: #fff;
}

@media all and (max-width: 639px) {
  .contentlist li .ttl {
    font-size: 1rem;
  }
}

.contentlist li .subttl {
  font-size: 2rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

@media all and (max-width: 896px) {
  .contentlist li .subttl {
    text-align: center;
    font-size: 1.4rem;
  }
}

.arrow-line {
  position: absolute;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  outline: none;
  width: 40%;
  bottom: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

@media all and (max-width: 896px) {
  .arrow-line {
    width: 40%;
    bottom: 20px;
  }
}

@media all and (max-width: 639px) {
  .arrow-line {
    width: 50%;
    bottom: 20px;
  }
}

.arrow-line:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 1px;
  background: #fff;
}

.arrow-line:after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -300px;
  width: 21px;
  height: 11px;
  border-top: 1px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media all and (max-width: 639px) {
  .arrow-line:after {
    bottom: -3px;
    width: 18px;
  }
}

.arrow-line:before {
  -webkit-animation: arrowlong01 2s ease infinite;
          animation: arrowlong01 2s ease infinite;
}

.arrow-line:after {
  -webkit-animation: arrowlong02 2s ease infinite;
          animation: arrowlong02 2s ease infinite;
}

@-webkit-keyframes arrowlong01 {
  0% {
    width: 0;
    opacity: 0;
  }
  20% {
    width: 0;
    opacity: 1;
  }
  80% {
    width: 105%;
    opacity: 1;
  }
  100% {
    width: 105%;
    opacity: 0;
  }
}

@keyframes arrowlong01 {
  0% {
    width: 0;
    opacity: 0;
  }
  20% {
    width: 0;
    opacity: 1;
  }
  80% {
    width: 105%;
    opacity: 1;
  }
  100% {
    width: 105%;
    opacity: 0;
  }
}

@-webkit-keyframes arrowlong02 {
  0% {
    left: 0;
    opacity: 0;
  }
  20% {
    left: 0;
    opacity: 1;
  }
  80% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes arrowlong02 {
  0% {
    left: 0;
    opacity: 0;
  }
  20% {
    left: 0;
    opacity: 1;
  }
  80% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.greet-box {
  position: relative;
}

.greet-box .bg-white {
  padding: 25px;
}

@media all and (max-width: 1367px) {
  .greet-box .flex-48 {
    width: 48%;
  }
  .greet-box .flex-50 {
    width: 48%;
  }
}

@media all and (max-width: 1100px) {
  .greet-box {
    display: block;
  }
  .greet-box .flex-40 {
    width: 100%;
  }
  .greet-box .flex-50 {
    width: 90%;
  }
  .greet-box .greet-photobox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .greet-box .greet-photobox .greet-photo {
    width: 31%;
    margin-right: 1%;
  }
  .greet-box .greet-photobox .greet-photo:last-child {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
  }
  .greet-box .greet-photobox .greet-photo2 {
    margin-top: 30px;
  }
}

.greet-photobox {
  position: relative;
  z-index: 1;
}

.greet-photo2 {
  margin-top: 30px;
}

.txt-line {
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
}

.txt-line::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  background-color: #8a8a8a;
}

.txt-filter {
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
}

.whitebox {
  padding: 40px 20px;
  background-color: #fff;
  -webkit-box-shadow: 0px 7px 0px 0px rgba(96, 210, 214, 0.6);
          box-shadow: 0px 7px 0px 0px rgba(96, 210, 214, 0.6);
}

.whitebox .f-tel {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.whitebox .f-tel:hover {
  opacity: 0.6;
}

.whitebox.p0 {
  padding: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.whitebox.white {
  color: #fff;
}

.border-box {
  padding: 40px 30px;
  border: 1px solid #363636;
}

/* Q and A
----------------------------------*/
.qa-list dl {
  position: relative;
  margin: 15px 0 0;
  cursor: pointer;
  border: 1px solid #888;
  overflow: hidden;
  background: #fff;
}

.qa-list dl:first-child {
  margin-top: 0;
}

.qa-list dl:after {
  position: absolute;
  top: 27px;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: "";
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.qa-list .open::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  font-weight: bold;
  background: #bbbbbb;
}

.qa-list dl dt:before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  content: "Q.";
  color: #888;
}

.qa-list dl dd {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
}

.qa-list dl dd:before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  left: 20px;
  display: block;
  content: "A.";
  font-weight: bold;
  color: #D81E1E;
}

.qa-list dl dd p {
  margin: 30px 0 0;
}

.qa-list dl dd p:first-child {
  margin-top: 0;
}

@media all and (max-width: 896px) {
  .qa-list dl {
    margin: 10px 0 0;
  }
  .qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
  }
  .qa-list dl dt {
    padding: 16px 26px 16px 40px;
    font-size: 14px;
  }
  .qa-list dl dt:before {
    font-size: 14px;
    top: 20px;
    left: 15px;
  }
  .qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 40px;
    font-size: 14px;
  }
  .qa-list dl dd:before {
    font-size: 14px;
    left: 15px;
    margin-top: 5px;
  }
  .qa-list dl dd p {
    margin: 30px 0 0;
  }
  .qa-list dl dd p:first-child {
    margin-top: 0;
  }
}

/*----------------------------------
pc/sp
----------------------------------*/
@media all and (max-width: 639px) {
  .pconly {
    display: none;
  }
}

@media all and (max-width: 896px) {
  .tabletonly {
    display: none;
  }
}

.sponly {
  display: none;
}

@media all and (max-width: 639px) {
  .sponly {
    display: block;
  }
}

/* contact_bnr
----------------------------------*/
.contact_bnr {
  position: relative;
  z-index: 2;
  margin: 40px auto;
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.contact_bnr.type2 > li:last-child:before {
  border-left: 0px solid #888;
}

@media all and (max-width: 639px) {
  .contact_bnr {
    margin: 20px auto;
  }
}

.contact_bnr > li {
  width: 49%;
  text-align: center;
  background-color: #fff;
}

.contact_bnr > li.border {
  border: 2px solid #888;
}

.contact_bnr > li:last-child {
  position: relative;
}

.contact_bnr > li:last-child:before {
  position: absolute;
  content: "";
  border-left: 2px solid #888;
  width: 100%;
  height: 100%;
  top: 0px;
  left: -7px;
}

@media all and (max-width: 639px) {
  .contact_bnr > li:last-child:before {
    display: none;
  }
}

@media all and (max-width: 639px) {
  .contact_bnr > li {
    width: 90%;
    margin: 0 auto;
    font-size: 1rem;
    -webkit-box-shadow: rgba(17, 17, 17, 0.2) 0px 0px 1px 2px;
            box-shadow: rgba(17, 17, 17, 0.2) 0px 0px 1px 2px;
    padding-bottom: 5px;
  }
  .contact_bnr > li:last-child {
    border-left: 0px solid #888;
    margin-bottom: 5px;
  }
  .contact_bnr > li:not(:last-child) {
    border-right: 0;
    margin-bottom: 5px;
  }
}

.contact_bnr > li .bnr_tel:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  font-size: 80%;
}

.contact_bnr > li .bnr_fax:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1ac";
  font-weight: 900;
}

.contact_bnr > li .bnr_mail:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
}

.contact_bnr > li a,
.contact_bnr > li span {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  position: relative;
  display: block;
  font-size: 3.5rem;
  line-height: 3.5rem;
  color: #555;
  padding: 10px;
  margin: 0 auto;
}

.contact_bnr > li a:first-letter,
.contact_bnr > li span:first-letter {
  text-transform: uppercase;
}

@media all and (max-width: 639px) {
  .contact_bnr > li a,
  .contact_bnr > li span {
    font-size: 1.8rem;
    line-height: 1.8rem;
    padding: 10px 0 0;
  }
}

.contact_bnr > li a:hover,
.contact_bnr > li span:hover {
  color: #888;
}

.contact_bnr > li a:before,
.contact_bnr > li span:before {
  margin-right: 5px;
}

@media all and (max-width: 896px) {
  .contact_bnr > li a,
  .contact_bnr > li span {
    font-size: 1.6rem;
  }
}

@media all and (max-width: 639px) {
  .contact_bnr > li a,
  .contact_bnr > li span {
    width: 100%;
  }
  .contact_bnr > li a:before,
  .contact_bnr > li span:before {
    font-size: 1.4rem;
  }
}

.contact_bnr.type1 > li {
  background-color: inherit;
  color: #fff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

@media all and (max-width: 639px) {
  .contact_bnr.type1 > li {
    border: 1px solid #fff;
  }
}

.contact_bnr.type1 > li:last-child:before {
  border-left: 1px solid #fff;
}

.contact_bnr.type1 > li:hover {
  opacity: 0.3;
}

.contact_bnr.type1 > li span,
.contact_bnr.type1 > li a {
  color: #fff;
}

.point_number {
  /* position: absolute;
  top: -12%;
  left: 12%;
  color: rgba($base_color, 0.8);
  width: 80px;
  height: 80px; */
  color: #c3a349;
  display: inline !important;
  line-height: 1;
  font-size: 3.5rem;
  z-index: -1;
  font-size: bold;
}

.point_number span {
  font-size: 2.8rem;
  margin-right: 1em;
}

@media all and (max-width: 639px) {
  .point_number {
    top: 12%;
    left: 2%;
  }
}

.sec_r {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  position: relative;
  margin: 64px auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.sec_r .ttl {
  font-size: 2.7rem;
  margin-bottom: 16px;
  color: #888;
}

.sec_r .ttl span {
  font-size: 1.3rem;
  color: #555;
}

.sec_r p {
  margin-bottom: 8px;
}

@media all and (max-width: 639px) {
  .sec_r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    width: 100%;
    margin: 0 auto;
  }
  .sec_r .ttl {
    font-size: 2rem;
    margin-bottom: 8px;
  }
}

.sec_l {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  position: relative;
  margin: 64px auto;
}

.sec_l .ttl {
  font-size: 2.7rem;
  margin-bottom: 16px;
  color: #888;
}

.sec_l .ttl span {
  font-size: 1.3rem;
  color: #555;
}

.sec_l p {
  margin-bottom: 8px;
}

@media all and (max-width: 639px) {
  .sec_l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    width: 100%;
    margin: 0 auto;
  }
  .sec_l .ttl {
    font-size: 2rem;
    margin-bottom: 8px;
  }
}

.sec_text {
  width: 45%;
  padding: 0% 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sec_img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 45%;
}

.sec_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

@media all and (max-width: 639px) {
  .sec_text {
    width: calc(100% - 4%);
    vertical-align: middle;
    padding: 15% 2%;
    margin: 0 auto;
  }
  .sec_img {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    padding: 0% 0%;
  }
  .sec_img img {
    width: 100%;
    height: 100%;
    -o-object-fit: none;
       object-fit: none;
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
  }
}

@media all and (max-width: 639px) {
  .sec_img img {
    -o-object-fit: cover;
       object-fit: cover;
    font-family: "object-fit: cover;";
  }
}

[data-aos="slidein"] {
  opacity: 0;
}

[data-aos="slidein"].aos-animate {
  -webkit-animation-name: play;
          animation-name: play;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
          animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  position: relative;
  opacity: 1 !important;
}

[data-aos="slidein"].aos-animate:before {
  -webkit-animation-name: maskOut;
          animation-name: maskOut;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
          animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(109.6deg, #888 11.2%, #888 91.1%);
}

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

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

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

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

.slidein_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.icon-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 30px auto 0;
}

@media all and (max-width: 639px) {
  .icon-list {
    max-width: 90%;
    margin-top: 30px;
  }
}

.icon-list.type1 {
  margin-top: 0;
}

.icon-list li {
  width: calc((100% / 4) - 4%);
  padding: 2%;
  margin: 0 0.5%;
  display: block;
  line-height: 1.4;
  height: 100%;
  -webkit-transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  position: relative;
  padding: 25px 0;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: transform 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: transform 0.2s cubic-bezier(0.26, 0.06, 0, 1), -webkit-transform 0.2s cubic-bezier(0.26, 0.06, 0, 1);
}

@media all and (max-width: 639px) {
  .icon-list li {
    padding: 18px 0;
  }
}

.icon-list li figure {
  margin: 0 auto 10px;
  width: 70px;
}

@media all and (max-width: 639px) {
  .icon-list li figure {
    width: 60px;
    margin-bottom: 10px;
  }
}

.icon-list li figure .icon-title {
  text-align: left;
  font-size: 1.2rem;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
}

@media all and (max-width: 639px) {
  .icon-list li figure .icon-title {
    padding: 12px 5px;
  }
}

@media all and (max-width: 639px) {
  .icon-list li {
    width: 48%;
    margin-bottom: 15px;
  }
}

.page_link > li {
  position: relative;
}

.page_link > li figure {
  width: 100%;
  overflow: hidden;
  height: 14vw;
  border: 10px solid #f2f2f2;
}

@media all and (max-width: 896px) {
  .page_link > li figure {
    height: 15vw;
    border: 5px solid #f2f2f2;
  }
}

@media all and (max-width: 639px) {
  .page_link > li figure {
    height: 20vw;
    border: 3px solid #f2f2f2;
  }
}

.page_link > li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.page_link > li:hover figure img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.page_link > li:hover p:before {
  right: 4px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.page_link > li:hover a {
  background-color: rgba(255, 255, 255, 0.4);
}

.page_link > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.page_link > li p {
  background-color: #888;
  color: #fff;
  padding: 10px 10px;
  text-align: left;
  position: relative;
  width: 100%;
}

@media all and (max-width: 639px) {
  .page_link > li p {
    font-size: 1rem;
  }
}

.page_link > li p:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  right: 8px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.page_link > li p:after {
  position: absolute;
  left: 8px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.page_link.type1 li figure {
  border: 5px solid #888;
  height: 200px;
}

.page_link.type1 li p {
  position: absolute;
  background: none;
  top: 0;
  height: 100%;
  width: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.8rem;
  background-color: rgba(136, 136, 136, 0.8);
}

.page_link.type1 li p:before {
  content: "";
  right: 10%;
  width: 50px;
  height: 1px;
  background-color: #fff;
}

.page_link.type1 li p:after {
  content: "";
  left: 10%;
  width: 50px;
  height: 1px;
  background-color: #fff;
}

@media all and (max-width: 639px) {
  .page_link.type1 li p {
    font-size: 1.4rem;
  }
  .page_link.type1 li p:before {
    width: 20px;
  }
  .page_link.type1 li p:after {
    width: 20px;
  }
}

.page_link.type1 li:hover p:before {
  width: 20px;
}

.page_link.type1 li:hover p:after {
  width: 20px;
}

@media all and (max-width: 639px) {
  .page_link.type1 li:hover p:before {
    width: 5px;
  }
  .page_link.type1 li:hover p:after {
    width: 5px;
  }
}

.page_link.type2 li {
  border-radius: 20px;
  overflow: hidden;
}

.page_link.type2 li figure {
  border: 0px;
  height: 160px;
  border-radius: 10px;
}

@media all and (max-width: 639px) {
  .page_link.type2 li figure {
    height: 120px;
  }
}

.page_link.type2 li figure img {
  opacity: 0.2;
}

.page_link.type2 li p {
  position: absolute;
  background: none;
  top: 0;
  height: 100%;
  width: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 3.0rem;
  color: #333;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.3);
}

.page_link.type2 li p b {
  padding: 8px 35px;
  border-radius: 20px;
}

.page_link.type2 li p .txt {
  font-size: 1.8rem;
  margin-top: -20px;
}

@media all and (max-width: 639px) {
  .page_link.type2 li p .txt {
    font-size: 1.1rem;
  }
}

.page_link.type2 li p:before {
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900;
  right: 10%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #fff;
}

.page_link.type2 li p:after {
  display: none;
  left: 10%;
  width: 50px;
  height: 50px;
}

@media all and (max-width: 639px) {
  .page_link.type2 li p {
    font-size: 1.4rem;
  }
  .page_link.type2 li p:before {
    width: 30px;
    height: 30px;
  }
  .page_link.type2 li p:after {
    width: 30px;
    height: 30px;
  }
}

.page_link.type2 li:hover p:before {
  right: 6%;
  width: 50px;
}

.page_link.type2 li:hover p:after {
  width: 20px;
}

@media all and (max-width: 639px) {
  .page_link.type2 li:hover p:before {
    width: 5px;
  }
  .page_link.type2 li:hover p:after {
    width: 5px;
  }
}

.page_link.type3 li {
  border-radius: 20px;
  overflow: hidden;
}

.page_link.type3 li:hover figure:before {
  left: 60px;
  background-color: #888;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.page_link.type3 li figure {
  border: 0px;
  height: 426px;
  border-radius: 20px 50px 20px 20px;
  position: relative;
}

.page_link.type3 li figure img {
  opacity: 1;
}

.page_link.type3 li figure:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900;
  left: 20px;
  bottom: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 3rem;
  border: 2px solid #fff;
  z-index: 999;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media all and (max-width: 639px) {
  .page_link.type3 li figure {
    height: 330px;
  }
  .page_link.type3 li figure:before {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
}

.page_link.type3 li p {
  position: absolute;
  top: -10px;
  right: -5px;
  height: 95%;
  width: 90px;
  padding: 25px 20px;
  text-align: left;
  font-size: 1.8rem;
  color: #333;
  font-weight: bold;
  background-color: #fff;
  border-radius: 0 0 0 10px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
}

.page_link.type3 li p b {
  padding: 8px 35px;
  border-radius: 20px;
}

.page_link.type3 li p:before {
  display: none;
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900;
}

.page_link.type3 li p:after {
  display: none;
}

@media all and (max-width: 639px) {
  .page_link.type3 li p {
    font-size: 1.3rem;
    width: 60px;
    padding: 25px 10px;
  }
  .page_link.type3 li p:before {
    width: 30px;
    height: 30px;
  }
  .page_link.type3 li p:after {
    width: 30px;
    height: 30px;
  }
}

.page_link.type3 li:hover p:before {
  right: 6%;
  width: 50px;
}

.page_link.type3 li:hover p:after {
  width: 20px;
}

@media all and (max-width: 639px) {
  .page_link.type3 li:hover p:before {
    width: 5px;
  }
  .page_link.type3 li:hover p:after {
    width: 5px;
  }
}

.price_txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.price_txt.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.price_txt .icn_circle {
  background: #888;
  color: #fff;
  width: 80px;
  height: 80px;
  font-size: 1.2rem;
  border-radius: 50%;
  text-align: center;
  margin-right: 10px;
}

.price_txt .icn_circle > span {
  display: -ms-grid;
  display: grid;
  place-items: center;
  line-height: 1.1;
  height: 100%;
  margin: auto;
  width: 100%;
}

.price_txt .price b {
  font-size: 3.6rem;
  color: #888;
  margin-right: 0.2rem;
}

.price_txt .price > span {
  font-weight: bold;
  font-size: 1.6rem;
  margin-left: 0.5rem;
}

@media all and (max-width: 639px) {
  .price_txt .icn_circle {
    width: 50px;
    height: 50px;
    font-size: 1.0rem;
  }
  .price_txt .price {
    line-height: 1.2;
  }
  .price_txt .price b {
    font-size: 2.2rem;
  }
  .price_txt .price > span {
    font-size: 1.1rem;
  }
}

.accent_txt {
  font-size: 40px;
  color: #111;
  text-align: center;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  padding: 32px 0;
  font-weight: bold;
  font-style: italic;
  text-shadow: rgba(17, 17, 17, 0.2) 3px 3px 0;
}

@media all and (max-width: 639px) {
  .accent_txt {
    font-size: 18px;
    padding: 16px 0;
  }
}

.accent_txt.green {
  color: #1FA33A;
  border-top: 3px solid #1FA33A;
  border-bottom: 3px solid #1FA33A;
}

.accent_txt.white {
  color: #fff;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.accent_txts {
  font-size: 40px;
  color: #111;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  text-shadow: rgba(17, 17, 17, 0.2) 3px 3px 0;
}

@media all and (max-width: 639px) {
  .accent_txts {
    font-size: 18px;
    padding: 16px 0;
  }
}

.accent_txts.green {
  color: #1FA33A;
}

.accent_txts.white {
  color: #fff;
}

.voice {
  position: relative;
}

.voice li {
  margin: 10px auto;
  padding: 10px;
  /*   &:nth-child(2n) {
      padding-left: 10%;

      @include for-size(phone-only) {
        padding-left: 0%;
      }
    } */
}

@media all and (max-width: 639px) {
  .voice li {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.voice li .flow_item {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}

.voice li .flow_item .left {
  width: 80px;
  position: absolute;
  left: 0;
  display: block;
  /* @include for-size(phone-only) {
          width: 100%;
          position: relative;
          margin: auto;
        } */
}

.voice li .flow_item .left .thm {
  width: 80px;
  display: block;
  text-align: center;
  height: 80px;
  vertical-align: middle;
  border-radius: 50%;
  margin-bottom: 15px;
  overflow: hidden;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#d5d5d5), color-stop(1%, #eeeeee), to(white));
  background-image: linear-gradient(to top, #d5d5d5 0%, #eeeeee 1%, white 100%);
}

@media all and (max-width: 639px) {
  .voice li .flow_item .left .thm {
    margin: 0 auto 20px;
  }
}

.voice li .flow_item .left .thm img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.voice li .flow_item .left .thm i {
  font-size: 4vw;
  padding-top: 10px;
  color: rgba(17, 17, 17, 0.6);
}

@media all and (max-width: 639px) {
  .voice li .flow_item .left .thm i {
    font-size: 10vw;
    padding-top: 20px;
  }
}

.voice li .flow_item .right {
  padding-left: 90px;
  padding-top: 0px;
  /* @include for-size(phone-only) {
          padding-left: 0;
          padding-top: 0;
        } */
}

.voice li .flow_item .right .item_read {
  font-size: 1.1rem;
  line-height: 1.5em;
  color: #888;
  margin-bottom: 15px;
  font-weight: 900;
  border: 1px solid #888;
  padding: 5px 25px;
  display: inline-block;
  border-radius: 20px;
}

@media all and (max-width: 639px) {
  .voice li .flow_item .right .item_read {
    text-align: center;
  }
}

.voice li .flow_item .right .item_read span {
  color: #888;
}

.voice li .flow_item .right .item_main {
  font-weight: 500;
}

.voice li .flow_item .right .item_main a {
  text-decoration: underline;
  color: #888;
}

.top-link-box li {
  position: relative;
  width: 100%;
}

.top-link-box li:nth-child(2n) .photo {
  top: 40px;
}

@media all and (max-width: 1100px) {
  .top-link-box li:nth-child(2n) .photo {
    top: 0px;
  }
}

.top-link-box li .txtarea {
  position: absolute;
  background-color: rgba(136, 136, 136, 0.8);
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  width: 10vw;
  height: 10vw;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

@media all and (max-width: 1100px) {
  .top-link-box li .txtarea {
    width: 20vw;
    height: 20vw;
  }
}

@media all and (max-width: 639px) {
  .top-link-box li .txtarea {
    width: 35vw;
    height: 35vw;
  }
}

.top-link-box li .txtarea .icon img {
  width: 60px;
  height: 60px;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

@media all and (max-width: 639px) {
  .top-link-box li .txtarea .icon img {
    width: 30px;
    height: 30px;
  }
}

.top-link-box li .txtarea .ttl {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 1.7rem;
}

.top-link-box li .photo {
  position: relative;
  overflow: hidden;
}

.top-link-box li .photo:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.top-link-box li .photo img {
  width: 100%;
  height: 440px;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-link-box li .btn06_s {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  max-width: 200px;
}

.top-link-box li:hover .photo {
  overflow: hidden;
}

.top-link-box li:hover .photo img {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.top-link-box li:hover .btn06_s {
  color: #fff;
}

.top-link-box li:hover .btn06_s:after {
  width: 100%;
}

.top-link-box li:hover .btn06_s span {
  color: #fff;
}

.top-link-box li:hover .btn06_s span:after {
  color: #fff;
  right: 15px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

@media all and (max-width: 1100px) {
  .top-link-box li {
    width: 50%;
  }
}

@media all and (max-width: 639px) {
  .top-link-box li {
    width: 100%;
  }
  .top-link-box li .photo img {
    width: 100%;
    height: 250px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .top-link-box li .txtarea {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
  }
  .top-link-box li .txtarea .ttl {
    font-size: 1.7rem;
  }
}

.top-link-box02 {
  margin-top: 0px;
}

.top-link-box02 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0 10px;
}

.top-link-box02 li {
  position: relative;
  width: 32%;
}

.top-link-box02 li .txtarea {
  position: absolute;
  background-color: rgba(136, 136, 136, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: -50px;
  margin: auto auto 0;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  display: block;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.top-link-box02 li .txtarea .ttl {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 1.5rem;
}

.top-link-box02 li .txtarea .txtimg {
  margin-top: 20px;
}

.top-link-box02 li .txtarea .txtimg img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  width: 80px;
}

.top-link-box02 li .photo {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.top-link-box02 li .photo:before {
  position: absolute;
  content: "";
  width: 130%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.top-link-box02 li .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.top-link-box02 li:hover .photo {
  overflow: hidden;
}

.top-link-box02 li:hover .photo img {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.top-link-box02 li:hover .btn06 {
  color: #fff;
}

.top-link-box02 li:hover .btn06:after {
  width: 100%;
}

.top-link-box02 li:hover .btn06 span {
  color: #fff;
}

.top-link-box02 li:hover .btn06 span:after {
  color: #fff;
  right: 15px;
  border-top: 1px solid white;
  border-right: 1px solid white;
}

@media all and (max-width: 639px) {
  .top-link-box02 li {
    width: 100%;
    margin-bottom: 60px;
  }
}

@media all and (max-width: 639px) {
  .top-link-box02 li .txtarea {
    width: 120px;
    height: 130px;
  }
}

@media all and (max-width: 639px) {
  .top-link-box02 li .txtarea .ttl {
    font-size: 1.3rem;
  }
}

@media all and (max-width: 639px) {
  .top-link-box02 li .txtarea .txtimg img {
    width: 40px;
  }
}

@media all and (max-width: 1100px) {
  .top-link-box02 li .photo {
    width: 100%;
    height: 100%;
  }
}

@media all and (max-width: 639px) {
  .top-link-box02 li .photo {
    width: 300px;
    height: 300px;
  }
}

@media all and (max-width: 639px) {
  .top-link-box02 li {
    width: 100%;
  }
  .top-link-box02 li .photo img {
    width: 100%;
    height: 380px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .top-link-box02 li .txtarea {
    position: absolute;
    text-align: center;
    width: 120px;
    height: 120px;
  }
  .top-link-box02 li .txtarea .ttl {
    font-size: 1.2rem;
  }
  .top-link-box02 li .txtarea .txtimg {
    text-align: center;
  }
  .top-link-box02 li .txtarea .txtimg img {
    width: 50px;
  }
}

.btn06_s {
  position: relative;
  color: #fff;
  padding: 10px 50px 10px 30px;
  display: inline-block;
  text-decoration: none;
  outline: none;
}

@media all and (max-width: 639px) {
  .btn06_s {
    padding: 10px 30px 10px 30px;
    max-width: 250px;
    width: 100%;
  }
}

.btn06_s:before, .btn06_s:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  /*線の形状*/
  background: #fff;
  width: 100%;
  height: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn06_s:after {
  width: 0;
  background-image: linear-gradient(-225deg, #fbc2eb 0%, #a6c1ee 100%);
}

.btn06_s:hover:after {
  width: 100%;
}

.btn06_s:hover span:after {
  right: 15px;
}

.btn06_s span:after {
  content: "";
  position: absolute;
  top: 1.3em;
  right: 20px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.list_kome > li {
  position: relative;
  line-height: 1.8em;
  padding-left: 1.5em;
  margin-bottom: 5px;
}

.list_kome > li:last-of-type {
  margin-bottom: 0;
}

.list_kome > li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.list_num li {
  margin-bottom: 10px;
}

.list_num li .num {
  color: #fff;
  background-color: #888;
  font-size: 2rem;
  padding: 4px 10px;
}

.list_num li .txt {
  padding-left: 10px;
}

.list_num.type2 li {
  font-weight: bold;
}

.list_num.type2 li .num {
  background-color: #256cd6;
}

.timetable {
  width: 100%;
}

.timetable.type1 {
  border-top: none;
}

.timetable.type1 th,
.timetable.type1 td {
  border: none;
}

.timetable th,
.timetable td {
  border-bottom: 1px solid rgba(136, 136, 136, 0.3);
  padding: 20px 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
  font-weight: normal;
}

.timetable th .txt,
.timetable td .txt {
  letter-spacing: 0;
  font-size: 12px;
}

@media all and (max-width: 639px) {
  .timetable th,
  .timetable td {
    font-size: 12px;
  }
}

.timetable thead tr {
  background: rgba(136, 136, 136, 0.3);
}

.timetable .th-1 {
  width: 35%;
  text-align: center;
  ont-weight: normal;
}

.timetable .circle {
  color: #888;
}

.timetable .circle.type-brown {
  color: #888;
}

.timetable .triangle {
  color: #0083de;
}

@media all and (max-width: 639px) {
  .timetable {
    padding: 15px 10px;
  }
  .timetable .th-1 {
    width: 25%;
  }
}

.timetable.type2 .circle {
  color: #888;
}

.txt_tel {
  margin: 10px 0;
}

.txt_tel.large a {
  font-size: 3vw;
}

@media all and (max-width: 639px) {
  .txt_tel.large a {
    font-size: 8vw;
  }
}

.txt_tel.white a {
  color: #fff;
}

@media all and (max-width: 639px) {
  .txt_tel {
    text-align: center;
  }
}

.txt_tel a {
  background: transparent;
  font-size: 2.8rem;
  position: relative;
  color: #888;
}

@media all and (max-width: 896px) {
  .txt_tel a {
    pointer-events: inherit;
  }
}

@media all and (max-width: 639px) {
  .txt_tel a {
    font-size: 2.4rem;
  }
}

.txt_tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
  font-size: 80%;
}

.txt_tel a:hover {
  color: #999999;
}

.mtitle_icon {
  font-size: 1.8rem;
  color: #888;
  font-weight: bold;
  margin: 16px 0;
  border-bottom: 3px double #888;
}

.mtitle_icon:before {
  content: "";
  width: 1.8em;
  height: 1.8em;
  background: url(../images/icon/mtitle_icon.png) no-repeat;
  background-size: contain;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  margin-right: 5px;
  color: #888;
}

@media all and (max-width: 639px) {
  .mtitle_icon {
    font-size: 1.4rem;
  }
  .mtitle_icon:before {
    content: "";
    width: 1.3em;
    height: 1.3em;
  }
}

.mtitle_border_item {
  position: relative;
  padding: 0.75em 1em;
  margin: 0 0 1.6em 0;
  border: 2px solid #aaa;
  line-height: 1;
  text-align: center;
  color: #888;
  font-size: 24px;
}

.mtitle_border_item:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid 2px #aaa;
}

.mtitle_border_item:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid 2px #aaa;
  top: -7px;
  left: -7px;
}

.mtitle_border_item:before {
  bottom: -7px;
  right: -7px;
}

.mtitle_tline {
  position: relative;
  padding: 0 65px;
  margin: 30px 0;
  text-align: center;
}

@media all and (max-width: 639px) {
  .mtitle_tline {
    padding: 0 25px;
  }
}

.mtitle_tline:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #aaa;
}

.mtitle_tline span {
  position: relative;
  padding: 0 1em;
  font-size: 1.6rem;
  color: #888;
  background: #fff;
}

.concept-box2 {
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  max-width: 900px;
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
}

.concept-box2 a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.concept-box2 .concept-box-inner {
  border: 2px solid #f5f5f5;
  background-color: #fff;
  padding: 20px;
}

.concept-box2 .concept-box-inner img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

.concept-box2 .txtarea {
  background-color: #f5f5f5;
  padding: 0px 0px;
}

.concept-box2 .txtarea .txt {
  padding: 20px;
  border: 2px solid #888;
  font-size: 1.2rem;
}

.concept-box2 .txtarea .txt .txtdeco {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 5px;
}

.concept-box2 .txtarea .txtmain {
  padding: 20px;
}

.concept-box2 .txtarea .txtsub {
  padding: 0 20px 20px;
  text-align: left;
}

.concept-box2 .pointarea .pointarea-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.concept-box2 .pointarea .pointarea-box li {
  display: table;
  margin-bottom: 10px;
}

.concept-box2 .pointarea .pointarea-box .num {
  display: table-cell;
  font-size: 4rem;
  color: #888;
}

.concept-box2 .pointarea .pointarea-box .txtarea {
  display: table-cell;
  background-color: transparent;
  padding: 0 20px;
  vertical-align: middle;
}

.concept-box2 .pointarea .pointarea-box .ttl {
  font-weight: bold;
  font-size: 2rem;
}

.concept-box2 .pointarea .pointarea-box .txt {
  padding: 0px 0;
}

@media all and (max-width: 896px) {
  .concept-box2 .pointarea .pointarea-box {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
  }
  .concept-box2 .pointarea .pointarea-box li {
    display: table;
    margin-bottom: 10px;
  }
  .concept-box2 .pointarea .pointarea-box .num {
    display: table-cell;
    font-size: 2.2rem;
    color: #888;
  }
  .concept-box2 .pointarea .pointarea-box .txtarea {
    display: table-cell;
    background-color: transparent;
    padding: 0 20px;
    vertical-align: middle;
  }
  .concept-box2 .pointarea .pointarea-box .ttl {
    font-weight: bold;
    font-size: 1.4rem;
  }
  .concept-box2 .pointarea .pointarea-box .txt {
    padding: 0px 0;
  }
}

.menu-list {
  margin: 0 1% 0;
  width: 48%;
  display: inline-table;
}

.menu-list:nth-child(2n) {
  margin-right: 0%;
}

@media all and (max-width: 639px) {
  .menu-list:nth-child(2n) {
    margin-left: 0;
  }
}

@media all and (max-width: 639px) {
  .menu-list {
    width: 100%;
    margin: 0 auto 0;
  }
}

.menu-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 8px 4px;
}

.menu-list li::before {
  background: radial-gradient(#aaa 20%, transparent 0) center center/8px 8px;
  content: "";
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 4px;
  margin: 0 1.2em;
}

@media all and (max-width: 639px) {
  .menu-list li::before {
    margin: 0 5px;
  }
}

.menu-list li p {
  display: inline-block;
  line-height: 1.5;
}

.menu-list li .left {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  max-width: 65%;
  letter-spacing: 0.1rem;
  font-weight: 600;
  position: relative;
}

.menu-list li .left:before {
  font-family: "Font Awesome 5 Free";
  content: "\f219";
  font-weight: 900;
  color: #888;
  margin-right: 3px;
}

.menu-list li .left span {
  font-size: 90%;
  font-weight: normal;
}

@media all and (max-width: 639px) {
  .menu-list li .left {
    max-width: 100%;
  }
}

.menu-list li .right {
  max-width: 55%;
  text-align: right;
  color: #888;
  font-size: 1.1em;
}

.about-list li {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
  border-radius: 20px;
}

.about-list .figure {
  text-align: center;
}

.about-list .numbox {
  position: relative;
  display: table;
  margin: 0 auto;
  padding-bottom: 10px;
  width: 100%;
  border-bottom: 1px solid #888;
}

.about-list .num {
  font-size: 10rem;
  color: #888;
  display: table-cell;
  line-height: 1;
}

.about-list .ttl {
  padding-left: 10px;
  display: table-cell;
  color: #000;
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1;
  vertical-align: bottom;
  text-align: left;
}

.about-list .ttl span {
  font-size: 1.8rem;
}

.about-list .detail-num {
  font-size: 2rem;
  color: #888;
  font-weight: bold;
}

.about-list .detail-num span {
  font-size: 10rem;
  line-height: 1;
  color: #888;
  text-shadow: 2px 2px 0 #222, -2px -2px 0 #222, -1px 1px 0 #222, 1px -1px 0 #222, 0px 1px 0 #222, 0 -1px 0 #222, -1px 0 0 #222, 1px 0 0 #222;
}

.about-list .maintxt {
  text-align: center;
  font-weight: bold;
}

.about-list .txt {
  margin-top: 10px;
  text-align: left;
}

@media all and (max-width: 896px) {
  .about-list .num {
    font-size: 8rem;
    display: table-cell;
    line-height: 1;
  }
  .about-list .ttl {
    font-size: 2rem;
    vertical-align: bottom;
    text-align: left;
  }
  .about-list .ttl span {
    font-size: 1.6rem;
  }
  .about-list .detail-num {
    font-size: 2rem;
  }
  .about-list .detail-num span {
    font-size: 7rem;
  }
}

@media all and (max-width: 639px) {
  .about-list .numbox {
    position: relative;
    display: table;
    margin: 0 auto;
    text-align: center;
  }
  .about-list .num {
    font-size: 6rem;
    display: table-cell;
    line-height: 1;
  }
  .about-list .ttl {
    font-size: 1.8rem;
    vertical-align: bottom;
    text-align: left;
  }
  .about-list .ttl span {
    font-size: 1.4rem;
  }
  .about-list .detail-num {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .about-list .detail-num span {
    font-size: 6rem;
    line-height: 1;
    color: #888;
  }
}

/* category_tab
----------------------------------*/
.category_tab {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin-top: 10px;
  gap: 0 1px;
  /*margin-bottom: 30px;*/
}

.category_tab:before {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #888;
}

.category_tab li {
  position: relative;
  width: 20%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #888;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
  border-radius: 5px 5px 0 0;
  color: #fff;
  padding: 10px 10px;
  cursor: pointer;
  margin-left: 0px;
  font-size: 1.4rem;
}

.category_tab li:hover {
  background: #a2a2a2;
  color: #fff;
}

.category_tab li:last-child {
  margin-right: 0px;
}

.category_tab li.active {
  background: #fff;
  color: #555;
}

.category_tab li.active:before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: #fff;
}

@media all and (max-width: 639px) {
  .category_tab li {
    width: 33.33%;
    font-size: 1.2rem;
    padding: 5px 5px;
  }
}

@media all and (max-width: 639px) {
  .category_tab li {
    width: 33.33%;
  }
}

.panel {
  display: none;
  background-color: #fff;
  padding: 60px 40px;
}

@media all and (max-width: 639px) {
  .panel {
    padding: 20px 0;
  }
}

.panel.show {
  display: block;
}

.tabbtn01 {
  overflow: hidden;
  position: relative;
  /*  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff; */
  background-color: #888;
}

.tabbtn01:before {
  background-color: rgba(255, 255, 255, 0.3);
  content: "";
  display: block;
  -webkit-transform: rotate(48deg);
          transform: rotate(48deg);
  position: absolute;
  top: -125px;
  right: -160px;
  width: 300px;
  height: 280px;
}

.tabbtn01 .actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1px;
  color: #1b2538;
}

.tabbtn01 .actab > input {
  position: absolute;
  opacity: 0;
}

.tabbtn01 .actab label {
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  color: #fff;
  line-height: 1.2;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
}

@media all and (max-width: 639px) {
  .tabbtn01 .actab label {
    font-size: 1.8rem;
  }
}

.tabbtn01 .actab label span {
  font-size: 1.6rem;
  font-weight: normal;
}

@media all and (max-width: 639px) {
  .tabbtn01 .actab label span {
    font-size: 1.1rem;
  }
}

.tabbtn01 .actab label:hover {
  color: #fff;
}

.tabbtn01 .actab .content {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.tabbtn01 .actab .content .bx {
  padding: 0 20px;
}

@media all and (max-width: 639px) {
  .tabbtn01 .actab .content .bx {
    padding: 0;
  }
}

.tabbtn01 .actab input:checked ~ label {
  color: #fff;
}

.tabbtn01 .actab input:checked ~ .content {
  max-height: 300em;
}

.tabbtn01 .actab label::after {
  line-height: 1.6;
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 3em;
  margin-top: -20.5px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
}

.tabbtn01 .actab input[type="checkbox"] + label::after {
  content: "＋";
}

.tabbtn01 .actab input[type="checkbox"]:checked + label::after {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  content: "－";
}

.tabbtn02 {
  background-color: #888;
  overflow: hidden;
  position: relative;
}

.tabbtn02:before {
  background-color: rgba(255, 255, 255, 0.3);
  content: "";
  display: block;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  position: absolute;
  top: -120px;
  right: -150px;
  width: 300px;
  height: 280px;
}

.tabbtn02 .actab {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.tabbtn02 .actab > input {
  position: absolute;
  opacity: 0;
}

.tabbtn02 .actab label {
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  color: #fff;
  line-height: 1.6;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
}

@media all and (max-width: 639px) {
  .tabbtn02 .actab label {
    font-size: 1.8rem;
  }
}

.tabbtn02 .actab label span {
  font-size: 1.6rem;
}

@media all and (max-width: 639px) {
  .tabbtn02 .actab label span {
    font-size: 1.2rem;
  }
}

.tabbtn02 .actab label:hover {
  color: #fff;
}

.tabbtn02 .actab .content {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.tabbtn02 .actab input:checked ~ label {
  color: #fff;
}

.tabbtn02 .actab input:checked ~ .content {
  max-height: 10000em;
}

.tabbtn02 .actab label::after {
  line-height: 1.6;
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 3em;
  margin-top: -20.5px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
}

.tabbtn02 .actab input[type="checkbox"] + label::after {
  content: "＋";
}

.tabbtn02 .actab input[type="checkbox"]:checked + label::after {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  content: "－";
}

.cov li {
  border-radius: 20px;
  background-color: #f2f2f2;
  text-align: center;
  font-weight: bold;
  color: #888;
  padding: 20px 0;
}

#luxy {
  width: 100%;
  height: 100vh;
  display: block;
  z-index: 999;
}

.luxy_area {
  position: relative;
  margin: 0 auto 10% auto;
  padding: 0 30px;
  max-width: 1600px;
  width: 100%;
}

.luxy_area figure {
  position: relative;
  left: 0;
  top: 0;
  width: 80%;
  height: 500px;
  line-height: 0;
}

.luxy_area figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 896px) {
  .luxy_area figure {
    height: 300px;
  }
}

@media all and (max-width: 639px) {
  .luxy_area figure {
    height: 250px;
  }
}

.luxy_area:nth-child(2n) figure {
  left: auto;
  right: 0%;
  margin-left: auto;
}

.luxy_area .box {
  position: absolute;
  top: 30%;
  right: 30px;
  width: 600px;
  background: rgba(255, 255, 255, 0.9);
  padding: 50px;
  margin-left: auto;
}

.luxy_area .box.type1 {
  top: 10%;
  width: 400px;
}

.luxy_area:nth-child(2n) .box {
  right: inherit;
  margin-right: auto;
}

@media all and (max-width: 896px) {
  .luxy_area {
    padding: 0;
  }
  .luxy_area:nth-child(2n) figure {
    left: 0;
  }
  .luxy_area figure {
    width: 100%;
  }
  .luxy_area .box,
  .luxy_area:nth-child(2n) .box {
    position: relative;
    top: 0;
    left: 0;
    right: inherit;
    padding: 20px;
    margin-right: 0;
  }
  .luxy_area .box {
    margin-top: -100px;
    width: 90%;
    margin-right: 0;
  }
}

.photo_s {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: 20px;
}

@media all and (max-width: 896px) {
  .photo_s {
    margin-bottom: 80px;
  }
}

.photo_s .p1 {
  position: absolute;
  width: 340px;
  height: 227px;
  top: 50px;
  left: 0;
}

.photo_s .p1 img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.photo_s .p2 {
  position: absolute;
  width: 238px;
  height: 161px;
  top: 0;
  right: 20px;
}

.photo_s .p2 img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 1100px) {
  .photo_s {
    padding-bottom: 18%;
    height: auto;
  }
  .photo_s .p1 {
    width: 50%;
  }
  .photo_s .p2 {
    width: 35%;
  }
}

@media all and (max-width: 639px) {
  .photo_s {
    padding-bottom: 54%;
  }
  .photo_s .p1 {
    width: 55%;
  }
  .photo_s .p2 {
    width: 40%;
    right: 0px;
  }
}

.gallerybox {
  position: relative;
  padding: 0px 0;
  margin: 60px 0;
}

.gallerybox .gallerybox_wrap {
  position: absolute;
  background-color: #fff;
  width: 40%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto 0 0;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media all and (max-width: 896px) {
  .gallerybox .gallerybox_wrap {
    width: 50%;
  }
}

.gallerybox .gallerybox_wrap .inner {
  width: 60%;
  height: auto;
  margin: auto;
}

.gallerybox .gallerybox_wrap .inner .bnr {
  text-align: center;
}

@media all and (max-width: 639px) {
  .gallerybox .gallerybox_wrap .inner .bnr img {
    width: 130px;
  }
}

@media all and (max-width: 896px) {
  .gallerybox .gallerybox_wrap .inner {
    width: 80%;
  }
}

@media all and (max-width: 639px) {
  .gallerybox .gallerybox_wrap .inner {
    padding: 30px 0;
  }
}

@media all and (max-width: 639px) {
  .gallerybox .gallerybox_wrap {
    width: 90%;
    height: 90%;
    margin: auto;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
  }
}

.gallerybox.type1 {
  background-color: #888;
}

.gallerybox.type1 img {
  opacity: 0.3;
}

.gallerybox.type2 {
  background-color: #fff;
}

.gallerybox.type2 .gallerybox_wrap {
  width: 90%;
  height: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, 0);
}

.slide_list li {
  margin-right: 1%;
  width: 500px;
  height: auto;
  position: relative;
}

@media all and (max-width: 639px) {
  .slide_list li {
    width: 280px;
    height: auto;
  }
}

.slide_list li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.slide_list li:hover img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.slide_list li:hover a {
  background-color: rgba(255, 255, 255, 0.5);
}

.slide_list li figure {
  background: rgba(246, 240, 223, 0.2);
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
  height: 52vh;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  .slide_list li figure {
    height: 30vh;
  }
}

.slide_list li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.slide_list li p {
  display: none;
  font-size: 1.2rem;
  background-color: rgba(136, 136, 136, 0.2);
  font-weight: bold;
  padding: 2px 5px;
  text-align: center;
  margin-top: 0px;
}

@media all and (max-width: 896px) {
  .slide_list li p {
    font-size: 12px;
  }
}

.slide_list li {
  margin-right: 1%;
  width: 500px;
  height: auto;
  position: relative;
}

@media all and (max-width: 639px) {
  .slide_list li {
    width: 280px;
    height: auto;
  }
}

.slide_list li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.slide_list li:hover img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.slide_list li:hover a {
  background-color: rgba(255, 255, 255, 0.5);
}

.slide_list li figure {
  background: rgba(246, 240, 223, 0.2);
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
  height: 52vh;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  .slide_list li figure {
    height: 30vh;
  }
}

.slide_list li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.slide_list li p {
  display: none;
  font-size: 1.2rem;
  background-color: rgba(136, 136, 136, 0.2);
  font-weight: bold;
  padding: 2px 5px;
  text-align: center;
  margin-top: 0px;
}

@media all and (max-width: 896px) {
  .slide_list li p {
    font-size: 12px;
  }
}

.main_content {
  width: calc(100% - 338px);
  margin: 0 0 0 auto;
  background: url(../img/bg-pink.jpg) repeat;
  background-size: 200px 200px;
}

@media all and (max-width: 1100px) {
  .main_content {
    width: calc(100% - 240px);
  }
}

@media all and (max-width: 896px) {
  .main_content {
    width: 100%;
  }
}

.side_header_bg {
  position: relative;
}

.side_header_bg:before {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(../images/side_header_bg.png);
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  top: inherit;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  mix-blend-mode: multiply;
}

#side_header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 50px;
  background-color: #888;
  z-index: 100;
  height: 100vh;
  max-width: 340px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(48, 48, 48, 0.2));
          filter: drop-shadow(0px 0px 10px rgba(48, 48, 48, 0.2));
  /* 
  &:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 100%;
    //background: url(../img/nav-bg.png) repeat-y;
    background-size: 50px 700px;
    right: -30px;
    top: 0;
  } */
}

@media all and (max-width: 639px) {
  #side_header {
    padding: 0;
    height: auto;
  }
}

#side_header.fix {
  position: fixed;
}

#side_header #side_header_nav {
  margin-top: 40px;
}

#side_header #side_header_nav.type1 ul > li {
  border-bottom: 0px solid #ddd;
}

#side_header #side_header_nav.type1 ul > li > a {
  color: #fff;
  background-color: #6f6f6f;
}

#side_header #side_header_nav.type1 ul > li > a:before {
  border-left: 6px solid #fff;
}

#side_header #side_header_nav.type1 ul > li > a:hover {
  color: #fff;
  background-color: #555555;
}

#side_header #side_header_nav ul.globalNav > li {
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

#side_header #side_header_nav ul.globalNav > li > a {
  color: #555;
  display: block;
  font-weight: bold;
  position: relative;
  padding: 10px 0px 10px 25px;
  font-size: 1.4rem;
}

#side_header #side_header_nav ul.globalNav > li > a:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 5px;
  top: 38%;
  border-left: 6px solid #888;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

#side_header #side_header_nav ul.globalNav > li > a:hover {
  color: #888;
  background-color: rgba(136, 136, 136, 0.1);
}

#side_header #side_header_nav ul.globalNav > li span {
  display: block;
  color: #333;
}

#side_header #side_header_nav .dropdown {
  display: none;
  margin-top: 10px;
}

#side_header #side_header_nav .dropdown .dropdown-li {
  border-right: 0;
  margin: 0 0 5px;
}

#side_header #side_header_nav .dropdown .dropdown-li a {
  display: block;
  padding: 8px 8px;
  color: #333;
  font-size: 1.3rem;
  background: #f2f2f2;
}

#side_header #side_header_nav .dropdown .dropdown-li a:hover {
  background: rgba(170, 170, 170, 0.4);
}

#side_header #side_header_nav .dropdown .dropdown-li.foot_only {
  display: none;
}

@media all and (max-width: 896px) {
  #side_header #side_header_nav {
    display: none;
  }
}

#side_header .pagesub_nav {
  background-color: #fff;
  padding: 10px 20px;
  margin-bottom: 40px;
  text-align: center;
}

#side_header .pagesub_nav li {
  padding-top: 5px;
  margin-bottom: 5px;
  border-top: 1px solid #888;
}

#side_header .pagesub_nav li:first-child {
  border-top: none;
}

#side_header .pagesub_nav li a {
  color: #363636;
  font-weight: bold;
  font-size: 1.4rem;
}

#side_header .pagesub_nav li a:hover {
  color: #888;
}

#side_header .pagesub_nav li span {
  display: block;
  color: #333;
}

@media all and (max-width: 1100px) {
  #side_header {
    padding: 50px 20px;
  }
  #side_header:before {
    background-size: 30px 480px;
    right: -30px;
  }
  #side_header #logo {
    width: 200px;
  }
}

@media all and (max-width: 896px) {
  #side_header {
    background: none;
    position: absolute;
    max-width: auto;
    height: auto;
    left: 0;
    right: inherit;
    margin: 0 auto;
    top: 0;
    padding: 15px;
  }
  #side_header.fix {
    position: absolute;
  }
  #side_header .head_tel,
  #side_header .head_mail {
    display: none;
  }
  #side_header .logo {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  #side_header:before {
    display: none;
  }
}

.head_tel {
  text-align: center;
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.head_tel span {
  display: block;
}

.head_tel a {
  font-size: 2.4rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.head_tel a:first-letter {
  text-transform: uppercase;
}

.head_tel a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  margin-right: 5px;
}

.head_tel.white {
  color: #fff;
}

.head_tel.white a {
  color: #fff;
}

.head_tel a {
  font-size: 2rem;
  font-weight: normal;
}

.head_tel a:hover {
  font-size: 2.2rem;
}

.head_mail {
  margin: 0 8px;
  background-color: #888;
  border: 1px solid #888;
  padding: 10px 20px;
  text-align: center;
}

.head_mail.white {
  border: 1px solid #fff;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  margin: 10px 0px;
}

.head_mail a {
  color: #fff;
  position: relative;
}

.head_mail a span {
  display: block;
  font-size: 1.6rem;
  margin-bottom: -5px;
}

.head_mail a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 5px;
}

.head_mail:hover {
  background-color: #fff;
  border: 1px solid #888;
}

.head_mail:hover a {
  color: #888;
}

#top_navi ul.globalNav {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  gap: 16px 16px;
}

@media all and (max-width: 896px) {
  #top_navi ul.globalNav {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 639px) {
  #top_navi ul.globalNav {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    font-size: 1rem !important;
  }
}

#top_navi ul.globalNav .ttl {
  font-size: 1.2rem;
  color: #888;
  padding: 0px 0px;
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
}

#top_navi ul.globalNav .ttl:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  margin-right: 5px;
}

#top_navi ul.globalNav > li {
  width: 100%;
  margin-bottom: 10px;
}

#top_navi ul.globalNav > li > a {
  color: #555;
  display: block;
  font-weight: bold;
  position: relative;
  padding: 10px 0px 10px 25px;
  font-size: 1.2rem;
  color: #fff;
  background-color: #6f6f6f;
  line-height: 1.2;
}

#top_navi ul.globalNav > li > a:before {
  border-left: 6px solid #fff;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 5px;
  top: 38%;
  border-left: 6px solid #888;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

#top_navi ul.globalNav > li > a:hover {
  color: #fff;
  background-color: #555555;
}

@media all and (max-width: 639px) {
  #top_navi ul.globalNav > li > a {
    font-size: 1rem;
  }
}

#top_navi ul.globalNav > li span {
  color: #fff;
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#top_navi ul.globalNav > li span:first-letter {
  text-transform: uppercase;
}

#top_navi .dropdown {
  margin-top: 10px;
}

#top_navi .dropdown .dropdown-li {
  border-right: 0;
  margin: 0 0 2px;
}

#top_navi .dropdown .dropdown-li a {
  display: block;
  padding: 8px 8px;
  color: #333;
  font-size: 1.2rem;
  background: #f2f2f2;
}

#top_navi .dropdown .dropdown-li a:hover {
  background: rgba(170, 170, 170, 0.4);
}

@media all and (max-width: 639px) {
  #top_navi .dropdown .dropdown-li a {
    font-size: 1rem;
  }
}

#top_firstview {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #ddd;
  overflow: hidden;
}

#top_firstview.type1 {
  background-color: rgba(255, 255, 255, 0.2);
}

#top_firstview.type1:before {
  content: "";
  background-color: rgba(136, 136, 136, 0);
}

#top_firstview:before {
  content: "";
  position: absolute;
  width: 100%;
  background-color: #888888;
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  z-index: 1;
}

#top_firstview ul {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  width: 100%;
  height: 100%;
}

@media all and (max-width: 896px) {
  #top_firstview ul {
    width: 100%;
  }
}

#top_firstview ul > li {
  position: absolute;
}

#top_firstview ul > li:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -55px;
  width: 50px;
  height: 50px;
  fill: #fff;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

@media all and (max-width: 639px) {
  #top_firstview ul > li:before {
    top: -150%;
    width: 30px;
    height: 30px;
    text-align: center;
  }
}

#top_firstview ul > li.type1:before, #top_firstview ul > li.type2:before, #top_firstview ul > li.type3:before, #top_firstview ul > li.type4:before, #top_firstview ul > li.type5:before, #top_firstview ul > li.type6:before {
  z-index: -1;
  background-size: 90%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#top_firstview ul > li:hover {
  opacity: 0.6;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#top_firstview ul > li:hover.type1:before, #top_firstview ul > li:hover.type2:before, #top_firstview ul > li:hover.type3:before, #top_firstview ul > li:hover.type4:before, #top_firstview ul > li:hover.type5:before, #top_firstview ul > li:hover.type6:before {
  background-size: 90%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#top_firstview ul > li a {
  color: #fff;
  padding: 60px 0 10px;
}

@media all and (max-width: 639px) {
  #top_firstview ul > li a {
    font-size: 0.8rem;
  }
}

#top_firstview ul > li.type1 {
  top: 45%;
  left: 20%;
}

#top_firstview ul > li.type1:before {
  background: url(../images/icon/business/icon04.png) no-repeat;
  background-size: cover;
}

#top_firstview ul > li.type2 {
  top: 26%;
  left: 15%;
}

#top_firstview ul > li.type2:before {
  background: url(../images/icon/business/icon05.png) no-repeat;
  background-size: cover;
}

#top_firstview ul > li.type3 {
  top: 10%;
  left: 23%;
}

#top_firstview ul > li.type3:before {
  background: url(../images/icon/business/icon06.png) no-repeat;
  background-size: cover;
}

#top_firstview ul > li.type4 {
  top: 10%;
  right: 23%;
}

#top_firstview ul > li.type4:before {
  background: url(../images/icon/business/icon07.png) no-repeat;
  background-size: cover;
}

#top_firstview ul > li.type5 {
  top: 26%;
  right: 15%;
}

#top_firstview ul > li.type5:before {
  background: url(../images/icon/business/icon08.png) no-repeat;
  background-size: cover;
}

#top_firstview ul > li.type6 {
  top: 45%;
  right: 20%;
}

#top_firstview ul > li.type6:before {
  background: url(../images/icon/business/icon09.png) no-repeat;
  background-size: cover;
}

@media all and (max-width: 1100px) {
  #top_firstview ul > li.type1 {
    top: 45%;
    left: 5%;
  }
  #top_firstview ul > li.type2 {
    top: 26%;
    left: 0%;
  }
  #top_firstview ul > li.type3 {
    top: 10%;
    left: 8%;
  }
  #top_firstview ul > li.type4 {
    top: 10%;
    right: 8%;
  }
  #top_firstview ul > li.type5 {
    top: 26%;
    right: 0%;
  }
  #top_firstview ul > li.type6 {
    top: 45%;
    right: 5%;
  }
}

@media all and (max-width: 639px) {
  #top_firstview ul > li.type1 {
    top: 13%;
    left: 1%;
  }
  #top_firstview ul > li.type2 {
    top: 5%;
    left: 13%;
  }
  #top_firstview ul > li.type3 {
    top: 0%;
    left: 30%;
  }
  #top_firstview ul > li.type4 {
    top: 0%;
    right: 30%;
  }
  #top_firstview ul > li.type5 {
    top: 5%;
    right: 13%;
  }
  #top_firstview ul > li.type6 {
    top: 13%;
    right: 1%;
  }
}

#top_firstview .ttl {
  position: absolute;
  width: 80%;
  height: 18%;
  bottom: 297px;
  right: 0;
  left: 0;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: center;
      grid-template-columns: center;
  z-index: 3;
  text-align: center;
  line-height: 1;
}

@media all and (max-width: 639px) {
  #top_firstview .ttl {
    width: 90%;
    height: 13%;
  }
}

#top_firstview .ttl .ja {
  font-size: 5vw;
  color: #f66009;
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 15px;
}

@media all and (max-width: 639px) {
  #top_firstview .ttl .ja {
    font-size: 9vw;
    margin-bottom: 20px;
  }
}

#top_firstview .ttl .ja_small {
  font-size: 3vw;
  display: inline-block;
  color: #111;
  background-color: #ffc517;
  border: 2px solid #111;
  padding: 20px 30px 0;
}

@media all and (max-width: 639px) {
  #top_firstview .ttl .ja_small {
    font-size: 5vw;
    padding: 10px 30px;
  }
}

#top_firstview .model01 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 80px;
  right: 0;
  left: 0;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: center;
      grid-template-columns: center;
  z-index: 2;
}

#top_firstview .model01 figure {
  width: 100%;
  height: 62vh;
  margin: 0 auto;
}

#top_firstview .model01 figure img {
  width: 100%;
  height: 138%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center top;
     object-position: center top;
}

@media all and (max-width: 896px) {
  #top_firstview .model01 {
    top: -20px;
  }
  #top_firstview .model01 figure {
    width: 100%;
    height: 80%;
  }
  #top_firstview .model01 figure img {
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center center;
       object-position: center center;
  }
}

#top_firstview .slide_list {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 157vh;
  z-index: 2;
}

@media all and (max-width: 639px) {
  #top_firstview .slide_list {
    height: 150vh;
  }
}

#top_firstview .slide_list li {
  margin-right: 0%;
  margin-right: 0%;
  width: 200px;
  position: relative;
}

@media all and (max-width: 639px) {
  #top_firstview .slide_list li {
    width: 80px;
  }
}

#top_firstview .slide_list li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

#top_firstview .slide_list li:hover img {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#top_firstview .slide_list li:hover a {
  background-color: rgba(255, 255, 255, 0.5);
}

#top_firstview .slide_list li figure {
  background: rgba(246, 240, 223, 0.2);
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  #top_firstview .slide_list li figure {
    height: 100%;
  }
}

#top_firstview .slide_list li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#top_firstview .slide_list li p {
  display: none;
  font-size: 1.2rem;
  background-color: rgba(136, 136, 136, 0.2);
  font-weight: bold;
  padding: 2px 5px;
  text-align: center;
  margin-top: 0px;
}

@media all and (max-width: 896px) {
  #top_firstview .slide_list li p {
    font-size: 12px;
  }
}

@media all and (max-width: 639px) {
  #top_firstview .slide_list li {
    width: 180px;
    height: 145px;
  }
}

.top {
  position: relative;
  overflow: hidden;
}

.view_b {
  position: relative;
}

.view_b:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 500px;
  margin: auto auto 0;
  background-image: url(../images/figure_1.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  bottom: 0;
  z-index: 1;
}

#u-firstview {
  overflow: hidden;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#u-firstview.radius {
  -webkit-clip-path: ellipse(100% 100% at top);
  clip-path: ellipse(100% 100% at top);
  overflow: hidden;
}

#u-firstview.bg_grd:after {
  content: "";
  position: absolute;
  width: 100%;
  background: #41525e;
  background: linear-gradient(120deg, #41525e 0%, #d4cfc9 100%);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}

#u-firstview.bg_black:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  background-position: center center;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#u-firstview #underlay1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#u-firstview #underlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70%;
  height: 80%;
  z-index: -2;
}

#u-firstview #catch_s {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

#u-firstview #catch_s.bg_eng {
  position: relative;
}

#u-firstview #catch_s.bg_eng:before {
  content: "ROLLER STONE";
  position: absolute;
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  color: rgba(136, 136, 136, 0.2);
  font-size: 18vw;
  line-height: 1;
  text-align: center;
  height: 100%;
  z-index: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

#u-firstview #catch_s.bg_eng:before:first-letter {
  text-transform: uppercase;
}

#u-firstview #catch_s .catch_copy {
  position: absolute;
  top: 50%;
  bottom: inherit;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  padding: 30px 0;
  display: block;
}

#u-firstview #catch_s .catch_copy .eng {
  font-size: 8rem;
  line-height: 8rem;
  font-weight: bold;
  color: #fff;
  display: block;
  padding: 20px 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 8px;
}

#u-firstview #catch_s .catch_copy .eng:first-letter {
  text-transform: uppercase;
}

#u-firstview #catch_s .catch_copy .eng_small {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  padding: 20px 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 8px;
}

#u-firstview #catch_s .catch_copy .eng_small:first-letter {
  text-transform: uppercase;
}

#u-firstview #catch_s .catch_copy .ja {
  font-size: 6vw;
  line-height: 6vw;
  font-weight: bold;
  color: #fff;
  display: block;
  padding: 20px 0;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 8px;
}

#u-firstview #catch_s .catch_copy .ja_middle {
  font-size: 3vw;
  line-height: 1.4;
  font-weight: normal;
  color: #fff;
  display: block;
  padding: 20px 0;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 8px;
  letter-spacing: 0.01em;
}

#u-firstview #catch_s .catch_copy .ja_middle.border {
  border: 1px solid #fff;
  display: inline-block;
  padding: 5px 30px;
}

#u-firstview #catch_s .catch_copy .ja_middle.bg_color {
  padding: 20px 30px;
  display: inline-block;
  margin: 10px;
  background-color: #888;
}

#u-firstview #catch_s .catch_copy .ja_middle.bg_color.type1 {
  background-color: #0083de;
}

#u-firstview #catch_s .catch_copy .ja_middle.bg_color.type2 {
  background-color: #888;
}

@media all and (max-width: 639px) {
  #u-firstview #catch_s .catch_copy .ja_middle.bg_color {
    font-size: 3vw;
    margin: 5px 0;
    display: block;
  }
}

@media all and (max-width: 639px) {
  #u-firstview #catch_s .catch_copy .ja_middle.bg_color {
    font-size: 3vw;
  }
}

#u-firstview #catch_s .catch_copy .ja_small {
  font-size: 2.2rem;
  line-height: 1.8;
  font-weight: normal;
  color: #fff;
  display: block;
  padding: 10px 0;
  text-shadow: rgba(17, 17, 17, 0.5) 0 0 8px;
}

#u-firstview #catch_s .catch_copy .ja_small.bg_color {
  padding: 20px 30px;
  border-radius: 50px;
  display: inline-block;
  margin: 10px;
  line-height: 1.3;
  background-color: #888;
}

#u-firstview #catch_s .catch_copy .ja_small.bg_color.type1 {
  background-color: #0083de;
}

#u-firstview #catch_s .catch_copy .ja_small.bg_color.type2 {
  background-color: #888;
}

#u-firstview #catch_s .catch_copy .ja_small.bg_color.radius {
  border-radius: 100%;
  width: 180px;
  height: 180px;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

@media all and (max-width: 639px) {
  #u-firstview #catch_s .catch_copy .ja_small.bg_color {
    margin: 5px 0;
    display: block;
  }
  #u-firstview #catch_s .catch_copy .ja_small.bg_color.radius {
    width: 100px !important;
    height: 100px;
    padding: 0;
  }
}

@media all and (max-width: 639px) {
  #u-firstview #catch_s .catch_copy {
    /* border: 5px solid $red;
        border-radius: 10px; */
    padding: 30px 0;
    width: 90%;
    max-width: 90%;
    top: 70%;
    left: 0;
    right: 0;
    width: 100%;
    height: 200px;
  }
  #u-firstview #catch_s .catch_copy .eng {
    font-size: 6vw;
    line-height: 1;
  }
  #u-firstview #catch_s .catch_copy .eng_small {
    font-size: 5vw;
  }
  #u-firstview #catch_s .catch_copy .ja {
    font-size: 6vw;
    line-height: 1;
    font-weight: bold;
    padding: 20px 0;
  }
  #u-firstview #catch_s .catch_copy .ja_middle {
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: normal;
    letter-spacing: 0.02em;
    padding: 5px 0;
    display: block;
  }
  #u-firstview #catch_s .catch_copy .ja_small {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: normal;
    padding: 20px 0;
    display: block;
  }
  #u-firstview #catch_s .catch_copy .ja_small.type1 {
    padding: 10px 0;
    margin-top: 10px;
  }
}

@media all and (max-width: 639px) {
  #u-firstview #catch_s {
    top: 28%;
  }
}

#u-firstview #catch_s .inner {
  position: relative;
}

#u-firstview #catch_s .inner img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
}

#u-firstview #catch_s .inner img:nth-child(1) {
  display: block;
}

#u-firstview #catch_s .inner img:nth-child(2) {
  display: none;
}

#u-firstview #catch_s .inner img:nth-child(3) {
  display: none;
}

@media all and (max-width: 639px) {
  #u-firstview {
    height: 80vh;
  }
  #u-firstview #catch {
    width: 100%;
    max-width: 100%;
  }
}

/* catch svg
----------------------------------*/
.catch-logo {
  width: 100%;
  margin: 0 auto;
  -webkit-animation: anime-logo2 4s ease-in 5.5s forwards;
          animation: anime-logo2 4s ease-in 5.5s forwards;
  position: relative;
  z-index: 400;
}

.cls-1 {
  fill: none;
  stroke-width: 0.5;
  stroke-miterlimit: 50;
  -webkit-animation: anime-logo 3s ease-in forwards;
          animation: anime-logo 3s ease-in forwards;
}

.logo-txt1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.logo-txt2 {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

.logo-txt3 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.logo-txt4 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.logo-txt5 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.logo-txt6 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.logo-txt7 {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.logo-txt8 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.logo-txt9 {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.logo-txt10 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.logo-txt11 {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.logo-txt12 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.logo-txt13 {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.logo-txt14 {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.logo-txt15 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.logo-txt16 {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

@-webkit-keyframes anime-logo {
  0% {
    fill: none;
    /*塗りつぶし色*/
    stroke-dashoffset: 2500;
    /*線の始まりの開始位置*/
    stroke: #fff;
    /*パスの色*/
  }
  80% {
    fill: none;
    /*塗りつぶし色*/
  }
  100% {
    stroke-dashoffset: 0;
    /*線の始まりの開始位置*/
    stroke: #888;
    fill: #888;
    /*パスの色*/
  }
}

@keyframes anime-logo {
  0% {
    fill: none;
    /*塗りつぶし色*/
    stroke-dashoffset: 2500;
    /*線の始まりの開始位置*/
    stroke: #fff;
    /*パスの色*/
  }
  80% {
    fill: none;
    /*塗りつぶし色*/
  }
  100% {
    stroke-dashoffset: 0;
    /*線の始まりの開始位置*/
    stroke: #888;
    fill: #888;
    /*パスの色*/
  }
}

@-webkit-keyframes anime-logo2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes anime-logo2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime-logo2-2 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes anime-logo2-2 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.catch-logo2 {
  -webkit-animation: anime-logo3 2s ease-in 8.5s forwards;
          animation: anime-logo3 2s ease-in 8.5s forwards;
  opacity: 0;
  margin-top: -20%;
}

#slideshow {
  position: relative;
}

#slideshow .position_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1ch;
  position: absolute;
  z-index: 100;
  margin: auto;
  width: 100%;
  height: 100%;
}

#slideshow:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-animation: anime-logo2-2 8s ease-in forwards;
          animation: anime-logo2-2 8s ease-in forwards;
  opacity: 0;
  background-position: center center;
  background-size: cover;
}

#slideshow:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #111111;
  -webkit-animation: anime-logo2-2 8s ease-in forwards;
          animation: anime-logo2-2 8s ease-in forwards;
}

#slide-wrap {
  position: relative;
}

#catch {
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  top: 46%;
  width: 70%;
  opacity: 1;
  font-size: 6rem;
  color: #fff;
}

#catch.on {
  opacity: 1;
  -webkit-transition: 2s;
  transition: 2s;
}

@media all and (max-width: 1367px) {
  #catch {
    left: 2%;
    font-size: 4rem;
  }
}

@media all and (max-width: 896px) {
  #catch {
    width: 60%;
    font-size: 3rem;
  }
}

@media all and (max-width: 639px) {
  #catch {
    width: 100%;
    font-size: 1.9rem;
  }
}

.catch2 {
  -webkit-animation: rotate-anime 35s linear infinite;
          animation: rotate-anime 35s linear infinite;
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  margin: 0 auto;
  z-index: -1;
  width: 100%;
  text-align: center;
}

@media all and (max-width: 1100px) {
  .catch2 {
    width: 50%;
  }
}

@-webkit-keyframes rotate-anime {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate-anime {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.catch1 {
  z-index: 200;
  width: 100%;
  text-align: center;
  opacity: 1 !important;
}

#scrolldown {
  position: absolute;
  right: 35px;
  bottom: 120px;
  color: #fefefe;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  font-size: 1.4rem;
  z-index: 80;
  height: 210px;
}

#scrolldown:first-letter {
  text-transform: uppercase;
}

#scrolldown:before, #scrolldown:after {
  position: absolute;
  content: "";
  z-index: 2;
  left: 50%;
}

#scrolldown:before {
  width: 1px;
  height: 100px;
  bottom: 0;
  background: #f0f0f0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#scrolldown:after {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100%;
  top: 100px;
  margin-left: -4px;
  -webkit-animation: scroll-point2 2.3s ease-out infinite;
          animation: scroll-point2 2.3s ease-out infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@media all and (max-width: 896px) {
  #scrolldown {
    display: none;
  }
}

@-webkit-keyframes scroll-point2 {
  0% {
    bottom: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    top: 180px;
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: 210px;
    opacity: 0;
  }
}

@keyframes scroll-point2 {
  0% {
    bottom: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    top: 180px;
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    top: 210px;
    opacity: 0;
  }
}

@-webkit-keyframes anime-logo3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anime-logo3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mtitle_large {
  margin-bottom: 40px;
  position: relative;
}

.mtitle_large.white {
  color: #fff;
}

.mtitle_large.white .ja:first-letter {
  color: #fff;
}

.mtitle_large .ja {
  margin-bottom: 20px;
  display: block;
  font-size: 5.5rem;
  line-height: 5.5rem;
  letter-spacing: 0.15em;
  font-weight: bold;
  position: relative;
  z-index: 2;
  color: #333;
  /* &:first-letter {
      color: $base_color;
    } */
}

.mtitle_large .ja .num {
  color: #888;
  font-size: 8rem;
}

@media all and (max-width: 639px) {
  .mtitle_large .ja .num {
    font-size: 4rem;
  }
}

.mtitle_large .eng {
  padding-top: 10px;
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  color: #333;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #888;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_large .eng:first-letter {
  text-transform: uppercase;
}

.mtitle_large.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mtitle_large.white {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.mtitle_large.white .eng {
  color: #fefefe;
}

.mtitle_large.white .ja {
  color: #fefefe;
}

@media all and (max-width: 639px) {
  .mtitle_large {
    text-align: center;
    margin-bottom: 0px;
  }
  .mtitle_large .eng {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }
  .mtitle_large .ja {
    font-size: 3rem;
    line-height: 3rem;
    margin-bottom: 5px;
  }
}

.feature_bg {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1px 0;
}

.feature_bg.bar {
  border: 4px double #888;
}

@media all and (max-width: 639px) {
  .feature_bg.bar {
    padding: 80px 10px;
  }
}

.feature_bg:after {
  content: "";
  position: absolute;
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(90%, rgba(255, 255, 255, 0.5)));
  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 90%);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 0;
}

.feature_bg:before {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(../images/feature_bg.jpg);
  background-position: center bottom;
  background-size: cover;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.feature_bg.type1:before {
  background-image: url(../images/feature_bg01.jpg);
}

.feature_bg.type2:before {
  background-image: url(../images/feature_bg02.jpg);
}

.feature_bg.type3:before {
  background-image: url(../images/feature_bg03.jpg);
}

.two-columnbox {
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
  margin: 0 auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.two-columnbox .column-inner {
  width: 30%;
  margin-right: 4%;
  margin-top: 30px;
  position: relative;
}

.two-columnbox .column-inner:nth-child(2) {
  margin-top: 100px;
}

.two-columnbox .column-inner:nth-child(3n) {
  margin-right: 0;
}

.two-columnbox .column-inner:nth-child(5) {
  margin-top: 100px;
}

.two-columnbox .column-inner .photo {
  margin: 0px auto;
  text-align: center;
  width: 100%;
  height: 15vw;
  border-radius: 20px;
  position: relative;
}

.two-columnbox .column-inner .photo:before {
  border-radius: 20px;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #bbbbbb;
  background: -webkit-gradient(linear, left top, right top, from(#bbbbbb), color-stop(83%, #eeeeee));
  background: linear-gradient(90deg, #bbbbbb 0%, #eeeeee 83%);
  left: 20px;
  top: 20px;
  z-index: -1;
}

.two-columnbox .column-inner .photo img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 896px) {
  .two-columnbox .column-inner {
    width: 100%;
    margin: 10px 0;
  }
  .two-columnbox .column-inner:nth-child(2) {
    margin-top: 10px;
  }
  .two-columnbox .column-inner:nth-child(3n) {
    margin-right: 0;
  }
  .two-columnbox .column-inner:nth-child(5) {
    margin-top: 10px;
  }
  .two-columnbox .column-inner .photo {
    height: 55vw;
  }
  .two-columnbox .column-inner .photo:before {
    left: 10px;
    top: 10px;
  }
}

@media all and (max-width: 896px) {
  .two-columnbox {
    display: block;
  }
}

.two-columnbox_f {
  max-width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto 0;
}

@media all and (max-width: 639px) {
  .two-columnbox_f {
    width: 90%;
  }
}

.two-columnbox_f .column-inner:nth-of-type(2n-1) .column-inner-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.two-columnbox_f .column-inner:nth-of-type(2n-1) .column-inner-contents .photo {
  /*  &:after {
          bottom: -30px;
          left: 30px;
          right: -30px;
        } */
}

.two-columnbox_f .column-inner {
  margin-top: 50px;
  position: relative;
}

.two-columnbox_f .column-inner-contents {
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.two-columnbox_f .column-inner-contents.no1 {
  position: relative;
}

.two-columnbox_f .column-inner-contents.no1:before {
  /*  content: "";
        position: absolute;
        background-color: rgba($base_color, 0.1);
        width: 100%;
        height: 90%;
        bottom: 0;
        z-index: -1; */
}

.two-columnbox_f .column-inner-contents.no2 {
  position: relative;
}

.two-columnbox_f .column-inner-contents.no2:before {
  content: "";
  position: absolute;
  background-color: #eeeeee;
  width: 100%;
  height: 90%;
  bottom: 0;
  z-index: -1;
}

.two-columnbox_f .column-inner-contents.no3 {
  background-color: rgba(255, 197, 23, 0.3);
}

.two-columnbox_f .column-inner-contents.no4 {
  background-color: rgba(0, 131, 222, 0.3);
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents.type2 {
    display: block;
    margin-bottom: 100px;
  }
}

.two-columnbox_f .column-inner-contents.type3 {
  color: #333;
  -webkit-box-align: inherit;
      -ms-flex-align: inherit;
          align-items: inherit;
  display: block;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents.type3 {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents {
    display: block;
  }
}

.two-columnbox_f .photo {
  position: relative;
  width: 50%;
  /* &:after {
      content: "";
      background-color: $base_color;
      display: block;
      position: absolute;
      right: 0px;
      bottom: -30px;
      left: -30px;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
      z-index: -1;
    } */
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo {
    width: 90%;
    margin: 0 auto;
  }
}

.two-columnbox_f .photo2 {
  max-width: 400px;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo2 {
    width: 90%;
    margin: 0 auto;
  }
}

.two-columnbox_f .photo2 .photo-txt {
  position: absolute;
  bottom: 0;
  right: 30px;
  font-size: 6rem;
  color: #888;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo2 .photo-txt {
    font-size: 4rem;
  }
}

.two-columnbox_f .photo3 {
  max-width: 400px;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
}

.two-columnbox_f .photo3:before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo3 {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  .two-columnbox_f .photo3:before {
    display: none;
  }
}

.two-columnbox_f .photo3 .photo-txt {
  position: absolute;
  bottom: 0;
  right: 30px;
  font-size: 6rem;
  color: #888;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo3 .photo-txt {
    font-size: 4rem;
  }
}

.two-columnbox_f .photo3-2 {
  max-width: 400px;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.two-columnbox_f .photo3-2:before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .photo3-2 {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  .two-columnbox_f .photo3-2:before {
    display: none;
  }
}

.two-columnbox_f .column-inner-contents-txtarea {
  left: 40px;
  width: 47%;
  max-width: 600px;
  padding: 20px 40px 120px;
  color: #333;
  margin: 0 auto;
  /* 
    &:before {
      content: "";
      background: inherit;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -1;
    } */
}

.two-columnbox_f .column-inner-contents-txtarea.bdr {
  position: relative;
}

.two-columnbox_f .column-inner-contents-txtarea.bdr:before {
  content: "";
  position: absolute;
  border: 3px solid #fff;
  width: 110%;
  height: 90%;
  bottom: 0;
  z-index: -1;
}

.two-columnbox_f .column-inner-contents-txtarea.type2 {
  padding: 50px 70px;
  border: none;
  border-bottom: 1px solid #888;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type2 {
    position: relative;
    margin-top: 0;
    padding: 50px 20px;
  }
}

.two-columnbox_f .column-inner-contents-txtarea.type2 span {
  font-size: 3rem;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type2 span {
    font-size: 1.8rem;
  }
}

.two-columnbox_f .column-inner-contents-txtarea.type2 .txt {
  font-size: 1.8rem;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type2 .txt {
    font-size: 1.3rem;
  }
}

.two-columnbox_f .column-inner-contents-txtarea.type3 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 50px 70px;
  border: none;
  text-align: left;
  background-color: transparent;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type3 {
    position: relative;
    margin-top: 0;
    padding: 50px 20px;
  }
}

.two-columnbox_f .column-inner-contents-txtarea.type3 .txt {
  font-size: 1.6rem;
  text-align: left;
  margin-top: 10px;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type3 .txt {
    font-size: 1.3rem;
  }
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea {
    width: 90%;
    padding: 20px 20px;
    left: 0;
    right: 0;
    margin: 0px auto;
  }
}

.two-columnbox_f .column-inner-contents-txtarea.type-right {
  left: auto;
  right: 40px;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-inner-contents-txtarea.type-right {
    width: 90%;
    padding: 20px 20px;
    left: 0;
    right: 0;
    margin: 0px auto;
  }
}

.two-columnbox_f .txt {
  font-size: 1.6rem;
  width: auto;
  margin: 0;
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  font-weight: normal;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .txt {
    font-size: 1.3rem;
  }
}

.two-columnbox_f img {
  width: 100%;
  height: 100%;
}

.two-columnbox_f .column-sub-txt {
  font-size: 1.8rem;
  width: auto;
  margin: 40px auto;
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  font-weight: normal;
  color: #333;
}

@media all and (max-width: 639px) {
  .two-columnbox_f .column-sub-txt {
    font-size: 1.3rem;
    margin: 0;
    padding-top: 20px;
  }
}

.two-columnbox2 {
  max-width: 1500px;
  margin: 50px auto;
  position: relative;
  z-index: 1;
}

@media all and (max-width: 896px) {
  .two-columnbox2 {
    margin-top: 100px;
  }
}

@media all and (max-width: 639px) {
  .two-columnbox2 {
    margin-top: 100px;
  }
}

.two-columnbox2 li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  margin-bottom: 50px;
}

@media all and (max-width: 639px) {
  .two-columnbox2 li {
    margin-bottom: 150px;
  }
}

.two-columnbox2 .photo {
  width: 40%;
}

@media all and (max-width: 639px) {
  .two-columnbox2 .photo {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 80%;
  }
  .two-columnbox2 .photo:before {
    position: absolute;
    content: "";
    background-color: #fff;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

.two-columnbox2 .txtarea {
  width: 50%;
  margin-left: 2%;
  position: relative;
}

@media all and (max-width: 639px) {
  .two-columnbox2 .txtarea {
    margin-left: 30%;
    width: 64%;
  }
}

.two-columnbox2 .ttl {
  position: absolute;
  top: -80px;
  left: -100px;
  font-size: 2rem;
}

@media all and (max-width: 639px) {
  .two-columnbox2 .ttl {
    font-size: 1.6rem;
    top: -20%;
    left: -60px;
  }
}

.two-columnbox2 .ttl span {
  font-size: 5rem;
  padding-right: 5px;
  color: #888;
}

@media all and (max-width: 639px) {
  .two-columnbox2 .ttl span {
    font-size: 3rem;
  }
}

.two-columnbox2 .ttl:before {
  position: absolute;
  content: "";
  width: 400px;
  height: 2px;
  top: 80px;
  background-color: #888;
}

@media all and (max-width: 639px) {
  .two-columnbox2 .ttl:before {
    top: 100%;
  }
}

.two-columnbox2 .txt {
  margin-top: 20px;
}

.mtitle_circle {
  color: #333;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1;
  position: relative;
  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
  border: 1px solid #fff;
  color: #fff;
}

.mtitle_circle.type2 {
  border: 1px solid #888;
  background: #fff;
  color: #888;
}

.mtitle_circle.type2 .ttl {
  color: #888;
}

.mtitle_circle.type3 {
  border: 1px solid #888;
  background: #888;
  color: #fff;
}

.mtitle_circle.type3 .ttl {
  color: #fff;
}

.mtitle_circle.tcenter {
  margin: 0 auto 20px;
}

.mtitle_circle a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.mtitle_circle.black {
  background-color: #111;
  color: #fff;
}

.mtitle_circle.black .ttl,
.mtitle_circle.black .num {
  color: #fff;
}

.mtitle_circle .num {
  font-size: 300%;
  padding-top: 5px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.mtitle_circle .num:first-letter {
  text-transform: uppercase;
}

.mtitle_circle i {
  margin-bottom: 5px;
  font-size: 130%;
  color: #888;
}

@media all and (max-width: 639px) {
  .mtitle_circle {
    color: #888;
    font-size: 1.2rem;
    width: 100px;
    height: 100px;
  }
  .mtitle_circle a {
    color: #888;
  }
}

.check01 {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-weight: normal;
  font-size: 1.1rem;
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1;
  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
  border: 1px solid #fff;
  background-color: #111;
  color: #fff;
}

.check01 a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.check01 .num {
  font-size: 300%;
  padding-top: 5px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.check01 .num:first-letter {
  text-transform: uppercase;
}

.check01 i {
  font-size: 180%;
  color: #fff;
}

@media all and (max-width: 639px) {
  .check01 {
    color: #888;
    font-size: 1.1rem;
    width: 50px;
    height: 50px;
  }
  .check01 a {
    color: #888;
  }
}

.concept-list2 {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media all and (max-width: 639px) {
  .concept-list2 {
    margin: 40px auto;
  }
}

.concept-list2 li {
  padding: 0 20px;
}

.concept-list2 li figure img {
  width: 100%;
  height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .concept-list2 li figure img {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

@media all and (max-width: 639px) {
  .concept-list2 li {
    padding: 0 0px 0px;
  }
}

@media all and (max-width: 639px) {
  .concept-list2 li:last-child {
    padding: 60px 0px 0px;
  }
}

.concept-list2 li:nth-child(even) .mtext_top::first-letter {
  color: #333;
}

.concept-list2.type1 li {
  padding: 0 20px;
}

@media all and (max-width: 639px) {
  .concept-list2.type1 li {
    padding: 0 0px 0px;
  }
}

@media all and (max-width: 639px) {
  .concept-list2.type1 li:last-child {
    padding: 60px 0px 0px;
  }
}

.concept-list2.type1 li:nth-child(even) .mtext_top::first-letter {
  color: #333;
}

.concept-list2.type1 li:nth-child(even) .mtext_top,
.concept-list2.type1 li:nth-child(even) .list-txt {
  color: #333;
}

.concept-list2.type1:before {
  content: "";
  position: absolute;
  background-color: rgba(136, 136, 136, 0);
  background-position: center center;
  background-size: cover;
  top: 30%;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 80%;
  z-index: -1;
}

.concept-list2.type1:after {
  content: "";
  position: absolute;
  background-color: rgba(136, 136, 136, 0);
  background-position: center center;
  background-size: cover;
  top: 30%;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 80%;
  z-index: -1;
}

.concept-list2:before {
  content: "";
  position: absolute;
  background-color: rgba(136, 136, 136, 0.2);
  background-position: center center;
  background-size: cover;
  top: 30%;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 80%;
  z-index: -1;
}

.concept-list2:after {
  content: "";
  position: absolute;
  background-color: #eee;
  background-position: center center;
  background-size: cover;
  top: 30%;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 80%;
  z-index: -1;
}

@media all and (max-width: 639px) {
  .concept-list2:before {
    content: "";
    position: absolute;
    background-position: center center;
    background-size: cover;
    top: 50%;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50%;
    z-index: -1;
  }
  .concept-list2:after {
    content: "";
    position: absolute;
    background-position: center center;
    background-size: cover;
    top: 0;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -1;
  }
}

@media all and (max-width: 639px) {
  .concept-list2 {
    width: 90%;
    margin: 50px auto;
  }
}

.concept-list2 li {
  position: relative;
}

.concept-list2 li .list-ttlbox .mtitle_circle {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
}

@media all and (max-width: 639px) {
  .concept-list2 li .list-ttlbox .mtitle_circle {
    position: relative;
    top: 10px;
    margin: 0px auto 30px;
    left: 0;
    right: 0;
  }
}

.concept-list2 .list-ttlbox {
  position: relative;
}

.concept-list2 .list-numbox {
  position: absolute;
  top: -20px;
  left: 20px;
}

.concept-list2 .list-num {
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 300;
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 15px 20px;
  background-color: #888;
}

@media all and (max-width: 639px) {
  .concept-list2 .list-num {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.concept-list2 .list-ttlbox {
  text-align: center;
  padding: 20px;
  position: relative;
}

.concept-list2 .list-ttl {
  font-size: 2.4rem;
  color: #333;
  margin-bottom: 20px;
  text-shadow: 0px 0px 5px rgba(255, 255, 247, 0.6), 0px 0px 5px rgba(255, 255, 247, 0.6), 0px 0px 10px rgba(255, 255, 247, 0.6), 0px 0px 10px rgba(255, 255, 247, 0.6), 0px 0px 15px rgba(255, 255, 247, 0.6), 0px 0px 15px rgba(255, 255, 247, 0.6);
  position: relative;
}

.concept-list2 .list-ttl.num1:before {
  position: absolute;
  content: "";
  width: 80%;
  height: 15px;
  background-color: rgba(255, 197, 23, 0.5);
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2px;
  z-index: -1;
}

.concept-list2 .list-ttl.num2:before {
  position: absolute;
  content: "";
  width: 80%;
  height: 15px;
  background-color: rgba(246, 96, 9, 0.5);
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2px;
  z-index: -1;
}

.concept-list2 .list-ttl.num3:before {
  position: absolute;
  content: "";
  width: 80%;
  height: 15px;
  background-color: rgba(31, 163, 58, 0.5);
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2px;
  z-index: -1;
}

@media all and (max-width: 639px) {
  .concept-list2 .list-ttl {
    font-size: 1.6rem;
  }
}

.concept-list2 .list-txt {
  text-align: left;
}

.list_link_btn01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px auto;
  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
  max-width: 900px;
  font-weight: bold;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px 10px;
}

@media all and (max-width: 639px) {
  .list_link_btn01 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

.list_link_btn01 li {
  padding: 3px 35px 3px 25px;
  font-size: 1.4rem;
  font-weight: normal;
  display: table-cell;
  position: relative;
  background-color: #fff;
  color: #888;
  border: 1px solid #888;
  border-radius: 30px;
}

.list_link_btn01 li:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  position: absolute;
  top: 0;
  right: 15px;
  height: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
  color: #888;
}

.list_link_btn01 li:after:after {
  right: 10px;
  color: #fff;
}

@media all and (max-width: 639px) {
  .list_link_btn01 li {
    width: calc(100% / 1);
    padding: 5px 5px 5px 5px;
    display: block;
    font-size: 0.9rem;
  }
}

.list_link_btn01 li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.list_link_btn01 li:hover {
  background-color: #888;
  color: #fff;
}

.list_link_btn01 li:hover:after {
  right: 10px;
  color: #fff;
}

.list_link_btn01.type1 {
  margin: 0px auto;
  display: block;
  text-align: left;
}

.list_link_btn01.type1 li {
  border: 0px;
  border-radius: 0;
  border-bottom: 1px dotted #aaa;
  display: block;
  padding: 5px 2px;
}

.list_link_btn01.type1 li:before {
  content: "●";
  margin-right: 5px;
  color: #888;
}

.animation-go2_bg {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 120px auto;
}

.animation-go2_txt:after {
  content: "";
  position: absolute;
  background-color: rgba(136, 136, 136, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.animation-go2_txt:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../images/01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -2;
  top: 0;
  left: 0;
}

@media all and (max-width: 639px) {
  .animation-go2_txt {
    padding: 50px 20px 50px;
    background-size: 50%;
  }
}

.borderdeko {
  position: relative;
  overflow: hidden;
}

.borderdeko:after {
  content: "";
  border: 2px solid #888;
  width: calc(100% - 20px);
  height: 93%;
  margin: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.greet-box_k {
  margin-right: auto;
  margin-left: 0;
  width: 96%;
}

@media all and (max-width: 639px) {
  .greet-box_k {
    margin-right: auto;
    margin-left: auto;
    padding: 20px 0;
  }
}

@media all and (max-width: 639px) {
  .greet-box_k .greet-box-min {
    padding: 0px;
  }
}

.greet-box_k .photo {
  z-index: 10;
  position: relative;
  margin-bottom: 120px;
}

@media all and (max-width: 896px) {
  .greet-box_k .photo {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.greet-box_k .photo1 {
  width: 100%;
  max-width: 600px;
}

@media all and (max-width: 639px) {
  .greet-box_k .photo1 {
    width: 100%;
    min-width: 300px;
  }
}

.greet-box_k .photo1 img {
  width: 100%;
}

.greet-box_k .photo2 {
  margin-left: auto;
  margin-right: 0;
  margin-top: 20px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  top: inherit;
  right: 25px;
  bottom: -70px;
}

@media all and (max-width: 639px) {
  .greet-box_k .photo2 {
    width: 50%;
    min-width: 100px;
    margin-left: 40%;
  }
}

.greet-box_k .photo2 img {
  width: 100%;
}

@media all and (max-width: 896px) {
  .greet-box_k .txtarea {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.mask {
  position: relative;
  -webkit-clip-path: circle(1%);
          clip-path: circle(1%);
  -webkit-transition: 0.6s ease-in all;
  transition: 0.6s ease-in all;
}

.mask.on {
  -webkit-clip-path: circle(120%);
          clip-path: circle(120%);
}

.animation-go {
  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(91.17deg, #e0f3aa 0.7%, #e9e199 21.75%, #e9cd99 44.2%, #fad8c2 65.72%, #deb7ad 90.51%);
  -webkit-transform: scale(0);
          transform: scale(0);
  top: calc(50% - 50px);
  right: calc(50% - 50px);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-go.start_anime {
  -webkit-animation: rain-anime 3s forwards;
          animation: rain-anime 3s forwards;
}

.animation-go2 {
  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transform: scale(0);
          transform: scale(0);
  top: calc(50% - 50px);
  right: calc(50% - 50px);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-go2.start_anime {
  -webkit-animation: rain-anime 3s forwards;
          animation: rain-anime 3s forwards;
}

.animation-go3 {
  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #efffe2;
  background: -webkit-gradient(linear, left top, right top, from(#efffe2), color-stop(41%, #e1fcf4), color-stop(78%, #ebf5ff), to(#ede7ff));
  background: linear-gradient(90deg, #efffe2 0%, #e1fcf4 41%, #ebf5ff 78%, #ede7ff 100%);
  -webkit-transform: scale(0);
          transform: scale(0);
  top: calc(50% - 50px);
  right: calc(50% - 50px);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-go3.start_anime {
  -webkit-animation: rain-anime 3s forwards;
          animation: rain-anime 3s forwards;
}

.animation-go4 {
  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(91.17deg, #e0f3aa 0.7%, #e9e199 21.75%, #e9cd99 44.2%, #fad8c2 65.72%, #deb7ad 90.51%);
  -webkit-transform: scale(0);
          transform: scale(0);
  top: calc(50% - 50px);
  right: calc(50% - 50px);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-go4.start_anime {
  -webkit-animation: rain-anime 3s forwards;
          animation: rain-anime 3s forwards;
}

@-webkit-keyframes rain-anime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  80% {
    -webkit-transform: scale(50);
            transform: scale(50);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(50);
            transform: scale(50);
  }
}

@keyframes rain-anime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  80% {
    -webkit-transform: scale(50);
            transform: scale(50);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(50);
            transform: scale(50);
  }
}

.js-span-text.on {
  opacity: 1;
}

.js-span-text.on span {
  display: inline-block;
  opacity: 0;
}

.js-span-text.on span:nth-child(1) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.1s forwards;
}

.js-span-text.on span:nth-child(2) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.2s forwards;
}

.js-span-text.on span:nth-child(3) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.3s forwards;
}

.js-span-text.on span:nth-child(4) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.4s forwards;
}

.js-span-text.on span:nth-child(5) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.5s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.5s forwards;
}

.js-span-text.on span:nth-child(6) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.6s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.6s forwards;
}

.js-span-text.on span:nth-child(7) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.7s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.7s forwards;
}

.js-span-text.on span:nth-child(8) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.8s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.8s forwards;
}

.js-span-text.on span:nth-child(9) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.9s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 0.9s forwards;
}

.js-span-text.on span:nth-child(10) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1s forwards;
}

.js-span-text.on span:nth-child(11) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.1s forwards;
}

.js-span-text.on span:nth-child(12) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.2s forwards;
}

.js-span-text.on span:nth-child(13) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.3s forwards;
}

.js-span-text.on span:nth-child(14) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.4s forwards;
}

.js-span-text.on span:nth-child(15) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.5s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.5s forwards;
}

.js-span-text.on span:nth-child(16) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.6s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.6s forwards;
}

.js-span-text.on span:nth-child(17) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.7s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.7s forwards;
}

.js-span-text.on span:nth-child(18) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.8s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.8s forwards;
}

.js-span-text.on span:nth-child(19) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.9s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 1.9s forwards;
}

.js-span-text.on span:nth-child(20) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2s forwards;
}

.js-span-text.on span:nth-child(21) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.1s forwards;
}

.js-span-text.on span:nth-child(22) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.2s forwards;
}

.js-span-text.on span:nth-child(23) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.3s forwards;
}

.js-span-text.on span:nth-child(24) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.4s forwards;
}

.js-span-text.on span:nth-child(25) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.5s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.5s forwards;
}

.js-span-text.on span:nth-child(26) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.6s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.6s forwards;
}

.js-span-text.on span:nth-child(27) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.7s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.7s forwards;
}

.js-span-text.on span:nth-child(28) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.8s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.8s forwards;
}

.js-span-text.on span:nth-child(29) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.9s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 2.9s forwards;
}

.js-span-text.on span:nth-child(30) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3s forwards;
}

.js-span-text.on span:nth-child(31) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.1s forwards;
}

.js-span-text.on span:nth-child(32) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.2s forwards;
}

.js-span-text.on span:nth-child(33) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.3s forwards;
}

.js-span-text.on span:nth-child(34) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.4s forwards;
}

.js-span-text.on span:nth-child(35) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.5s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.5s forwards;
}

.js-span-text.on span:nth-child(36) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.6s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.6s forwards;
}

.js-span-text.on span:nth-child(37) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.7s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.7s forwards;
}

.js-span-text.on span:nth-child(38) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.8s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.8s forwards;
}

.js-span-text.on span:nth-child(39) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.9s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 3.9s forwards;
}

.js-span-text.on span:nth-child(40) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4s forwards;
}

.js-span-text.on span:nth-child(41) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.1s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.1s forwards;
}

.js-span-text.on span:nth-child(42) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.2s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.2s forwards;
}

.js-span-text.on span:nth-child(43) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.3s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.3s forwards;
}

.js-span-text.on span:nth-child(44) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.4s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.4s forwards;
}

.js-span-text.on span:nth-child(45) {
  -webkit-animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.5s forwards;
          animation: text 1s cubic-bezier(0.3, 0.72, 0.56, 0.99) 4.5s forwards;
}

@-webkit-keyframes text {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px) translateY(-10px) scale(1.3);
            transform: translateX(-20px) translateY(-10px) scale(1.3);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes text {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px) translateY(-10px) scale(1.3);
            transform: translateX(-20px) translateY(-10px) scale(1.3);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.pagelink_box01 > li {
  overflow: hidden;
  position: relative;
}

.pagelink_box01 > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.pagelink_box01 > li:after {
  content: "";
  border: 1px solid #fff;
  width: 93%;
  height: 93%;
  margin: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.pagelink_box01 > li:before {
  background-color: rgba(255, 255, 255, 0.8);
  content: "";
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  z-index: 10;
}

.pagelink_box01 > li .txtarea {
  display: none;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagelink_box01 > li .txtarea .icon {
  margin-bottom: 20px;
  position: relative;
}

.pagelink_box01 > li .txtarea .icon img {
  width: 60px;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.pagelink_box01 > li .txtarea .icon:before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #eee;
  width: 60px;
  bottom: -15px;
}

.pagelink_box01 > li .txtarea .ttl {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 2.8rem;
  color: #fff;
}

.pagelink_box01 > li .txtarea .ttl span {
  font-size: 1.4rem;
  display: block;
}

@media all and (max-width: 639px) {
  .pagelink_box01 > li .txtarea .ttl {
    font-size: 1.8rem;
  }
  .pagelink_box01 > li .txtarea .ttl span {
    font-size: 1.2rem;
  }
}

.pagelink_box01 > li .txtarea .ttl.tb-rl {
  font-size: 3.5rem;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media all and (max-width: 639px) {
  .pagelink_box01 > li .txtarea .ttl {
    -webkit-writing-mode: lr-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: lr-tb;
    font-size: 2rem;
  }
}

.pagelink_box01 > li .txtarea .txt {
  font-size: 1.2rem;
  text-align: left;
  width: 80%;
  margin: 20px auto 20px;
  color: white;
}

@media all and (max-width: 639px) {
  .pagelink_box01 > li .txtarea .txt {
    font-size: 1.1rem;
    width: 80%;
    margin: 0 auto;
  }
}

.pagelink_box01 > li .more {
  margin-top: 10px;
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 1 !important;
}

.pagelink_box01 > li .more span {
  border: 1px solid #fff;
  padding: 6px 40px;
  color: #fff;
}

.pagelink_box01 > li .photo {
  position: relative;
  overflow: hidden;
}

.pagelink_box01 > li .photo:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #888888;
  -webkit-transition: all 0.3s 0s ease;
  transition: all 0.3s 0s ease;
}

.pagelink_box01 > li .photo img {
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .pagelink_box01 > li .photo img {
    height: 300px;
  }
}

.pagelink_box01 > li:nth-child(even) .photo:before {
  background-color: #888888;
}

.pagelink_box01 > li:hover .more span {
  background-color: #888888;
}

.pagelink_box01 > li:hover .photo {
  overflow: hidden;
}

.pagelink_box01 > li:hover .photo:before {
  -webkit-transition: all 0.8s 0s ease;
  transition: all 0.8s 0s ease;
  background-color: rgba(136, 136, 136, 0);
}

.pagelink_box01 > li:hover .photo img {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  z-index: -1;
}

.pagelink_box01.type1 > li .txtarea {
  top: 0;
  bottom: 0;
  margin: 0;
}

.pagelink_box01.type1 > li .txtarea .ttl {
  font-weight: bold;
}

.pagelink_box01.type1 > li .photo {
  width: 100%;
  height: 600px;
}

@media all and (max-width: 639px) {
  .pagelink_box01.type1 > li .photo {
    height: 400px;
  }
}

.pagelink_box01.type1 > li .photo:before {
  background-color: rgba(17, 17, 17, 0.4);
}

.pagelink_box01.type1 > li .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.pagelink_box01.type1 > li:nth-child(even) .photo:before {
  background-color: rgba(17, 17, 17, 0.6);
}

.pagelink_box01.type1 > li:hover .more span {
  background-color: #888888;
}

.pagelink_box01.type1 > li:hover .photo:before {
  background-color: rgba(136, 136, 136, 0);
}

.pagelink_box01.type1 > li:hover .photo img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: -1;
}

.pagelink_box02 > li {
  overflow: hidden;
  position: relative;
  background-color: #888;
}

.pagelink_box02 > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.pagelink_box02 > li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.pagelink_box02 > li:after {
  content: "";
  border: 1px solid #fff;
  width: 93%;
  height: 95%;
  margin: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.pagelink_box02 > li:before {
  background-color: rgba(255, 255, 255, 0.8);
  content: "";
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  z-index: 10;
}

.pagelink_box02 > li .txtarea {
  position: relative;
  height: auto;
  background-color: rgba(136, 136, 136, 0.8);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px 0 90px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box02 > li .txtarea .icon {
  margin-bottom: 20px;
  position: relative;
}

.pagelink_box02 > li .txtarea .icon img {
  width: 60px;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.pagelink_box02 > li .txtarea .icon:before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #eee;
  width: 60px;
  bottom: -15px;
}

.pagelink_box02 > li .txtarea .ttl {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 2.2rem;
  color: #fff;
}

.pagelink_box02 > li .txtarea .ttl.tb-rl {
  font-size: 3.5rem;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media all and (max-width: 639px) {
  .pagelink_box02 > li .txtarea .ttl {
    -webkit-writing-mode: lr-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: lr-tb;
    font-size: 2rem;
  }
}

.pagelink_box02 > li .txtarea .txt {
  font-size: 1.2rem;
  text-align: left;
  width: 80%;
  margin: 20px auto 20px;
  color: white;
}

@media all and (max-width: 639px) {
  .pagelink_box02 > li .txtarea .txt {
    font-size: 1.1rem;
    width: 80%;
    margin: 0 auto;
  }
}

.pagelink_box02 > li .more {
  margin-top: 10px;
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 1 !important;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box02 > li .more span {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 6px 40px;
  color: #fff;
}

.pagelink_box02 > li .photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 20vw;
  /* 
      &:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba($base_color, 1);
        transition: all 0.3s 0s ease;
      }
 */
}

@media all and (max-width: 639px) {
  .pagelink_box02 > li .photo {
    height: 50vw;
  }
}

.pagelink_box02 > li .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .pagelink_box02 > li .photo img {
    height: 300px;
  }
}

.pagelink_box02 > li:nth-child(even) .photo:before {
  background-color: #888888;
}

.pagelink_box02 > li:hover {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box02 > li:hover .txtarea {
  background-color: #888888;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box02 > li:hover .more span {
  background-color: #fff;
  color: #888;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.pagelink_box02 > li:hover .photo {
  overflow: hidden;
}

.pagelink_box02 > li:hover .photo:before {
  -webkit-transition: all 0.8s 0s ease;
  transition: all 0.8s 0s ease;
  background-color: rgba(136, 136, 136, 0);
}

.pagelink_box03 > li {
  overflow: hidden;
  position: relative;
  background-color: rgba(136, 136, 136, 0.5);
  /* &:after {
      content: "";
      border: 1px solid #fff;
      width: 93%;
      height: 95%;
      margin: auto;
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    } */
}

.pagelink_box03 > li:nth-child(even) {
  background-color: rgba(136, 136, 136, 0.3);
}

.pagelink_box03 > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.pagelink_box03 > li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.pagelink_box03 > li:before {
  background-color: rgba(255, 255, 255, 0.3);
  content: "";
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  z-index: 10;
}

.pagelink_box03 > li .txtarea {
  position: relative;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box03 > li .txtarea .icon {
  margin-bottom: 20px;
  position: relative;
}

.pagelink_box03 > li .txtarea .icon img {
  width: 60px;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.pagelink_box03 > li .txtarea .icon:before {
  content: "";
  position: absolute;
  border-bottom: 2px solid #eee;
  width: 60px;
  bottom: -15px;
}

.pagelink_box03 > li .txtarea .ttl {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 1.8rem;
  color: #555;
  margin-top: 20px;
}

.pagelink_box03 > li .txtarea .ttl span {
  font-size: 1.4rem;
}

.pagelink_box03 > li .txtarea .ttl.tb-rl {
  font-size: 3.5rem;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media all and (max-width: 639px) {
  .pagelink_box03 > li .txtarea .ttl {
    -webkit-writing-mode: lr-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: lr-tb;
    font-size: 1.2rem;
  }
}

.pagelink_box03 > li .txtarea .txt {
  font-size: 1.2rem;
  text-align: left;
  width: 80%;
  margin: 20px auto 20px;
  color: white;
}

@media all and (max-width: 639px) {
  .pagelink_box03 > li .txtarea .txt {
    font-size: 1.1rem;
    width: 80%;
    margin: 0 auto;
  }
}

.pagelink_box03 > li .more {
  margin-top: 10px;
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 1 !important;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box03 > li .more span {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 6px 40px;
  color: #fff;
}

.pagelink_box03 > li .photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 20vw;
  /* 
      &:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba($base_color, 1);
        transition: all 0.3s 0s ease;
      }
 */
}

@media all and (max-width: 639px) {
  .pagelink_box03 > li .photo {
    height: 50vw;
  }
}

.pagelink_box03 > li .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 639px) {
  .pagelink_box03 > li .photo img {
    height: 300px;
  }
}

.pagelink_box03 > li:hover {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box03 > li:hover .txtarea {
  background-color: #888888;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.pagelink_box03 > li:hover .more span {
  background-color: #fff;
  color: #888;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.pagelink_box03 > li:hover .photo {
  overflow: hidden;
}

.pagelink_box03 > li:hover .photo:before {
  -webkit-transition: all 0.8s 0s ease;
  transition: all 0.8s 0s ease;
  background-color: rgba(136, 136, 136, 0);
}

.opacity {
  opacity: 0.2;
}

@media all and (max-width: 639px) {
  .picture_radius {
    width: 100%;
    margin: 0 auto 30px;
  }
}

.picture_radius img {
  border-radius: 20px;
}

.picture_radius.right img {
  border-radius: 0 20px 20px 0;
}

@media all and (max-width: 639px) {
  .picture_radius.right img {
    border-radius: 0 0 0 0;
  }
}

.picture_radius.left img {
  border-radius: 20px 0 0 20px;
}

@media all and (max-width: 639px) {
  .picture_radius.left img {
    border-radius: 0 0 0 0;
  }
}

.picture_3set {
  max-width: 100%;
  margin: 0 auto 20px;
  position: relative;
}

.picture_3set a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.picture_3set a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.picture_3set .photo01 {
  position: absolute;
  bottom: 12%;
  right: -10%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 2;
}

.picture_3set .photo01 a {
  height: 220%;
}

.picture_3set .photo01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.picture_3set .photo02 {
  position: absolute;
  bottom: 12%;
  right: 30%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 3;
}

.picture_3set .photo02 a {
  height: 220%;
}

.picture_3set .photo02 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.picture {
  width: 100%;
  height: 300px;
  position: relative;
}

.picture a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.picture a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.picture_01 {
  position: relative;
  width: 50%;
  margin-bottom: 60px;
}

.picture_01 img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.picture_01.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.picture_01.right {
  text-align: right;
}

.picture_01.right:after {
  right: -30px;
  left: inherit;
  bottom: -30px;
}

.picture_01:after {
  content: "";
  background-color: #888;
  display: block;
  position: absolute;
  right: 0px;
  bottom: -30px;
  left: -30px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  z-index: -1;
}

@media all and (max-width: 639px) {
  .picture_01 {
    width: 90%;
    margin: 0 auto;
  }
}

.facility-list > li {
  background-color: #fff;
}

.facility-list .photo img {
  border-radius: 20px 20px 0 0;
}

.facility-list .inner {
  position: relative;
}

.facility-list .inner .ttl {
  display: block;
  background: #888;
  color: #fff;
  padding: 10px 30px;
  margin-bottom: 20px;
}

.facility-list .inner .txt {
  padding: 10px 20px;
}

.u-returnTop {
  position: fixed;
  right: 2em;
  bottom: 1em;
  z-index: 996;
  cursor: pointer;
  opacity: 0;
}

.u-returnTop a {
  display: inline-block;
  color: #aaa;
}

.u-returnTop a > img {
  width: 130px;
}

.u-returnTop a > svg {
  width: 80px;
  height: 80px;
}

.u-returnTop.is-attached {
  right: 1em;
  opacity: 1;
}

@media (max-width: 1100px) {
  .u-returnTop {
    right: 2em;
    bottom: 6em;
  }
  .u-returnTop a > svg {
    width: 60px;
    height: 60px;
  }
  .u-returnTop.is-attached {
    right: 0;
    opacity: 1;
  }
}

.point_list_ttl li {
  position: relative;
  font-size: 1.1rem;
  line-height: 1.2;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
  margin-bottom: 45px;
}

.point_list_ttl li:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 0 0 auto;
  width: 75%;
  height: 1px;
  background-color: rgba(136, 136, 136, 0.3);
}

.point_list_ttl li:nth-child(2n) {
  margin-left: 80px;
}

.point_list_ttl li:nth-child(3n) {
  margin-left: 160px;
}

.point_list_ttl li:nth-child(4n) {
  margin-left: 240px;
}

.point_list_ttl li:nth-child(5n) {
  margin-left: 320px;
}

.point_list_ttl li > .sub {
  display: block;
  font-family: "Allison", cursive;
  font-size: 8rem;
  font-weight: 400;
  line-height: 0.7;
  color: rgba(136, 136, 136, 0.3);
}

.point_list_ttl li > .main {
  position: absolute;
  bottom: -35px;
  left: 0;
  z-index: 1;
  display: block;
  padding: 0.8rem 1rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: #555;
  letter-spacing: 0;
  color: #888;
}

@media all and (max-width: 896px) {
  .point_list_ttl {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .point_list_ttl li {
    margin-bottom: 20px;
  }
  .point_list_ttl li:nth-child(2n) {
    margin-left: 0px;
  }
  .point_list_ttl li:nth-child(3n) {
    margin-left: 0px;
  }
  .point_list_ttl li:nth-child(4n) {
    margin-left: 0px;
  }
  .point_list_ttl li:nth-child(5n) {
    margin-left: 0px;
  }
  .point_list_ttl li > .sub {
    font-size: 4rem;
  }
  .point_list_ttl li > .main {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
}

.border_box {
  border: 3px solid rgba(136, 136, 136, 0.2);
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 8px 8px 0 0;
          box-shadow: rgba(17, 17, 17, 0.1) 8px 8px 0 0;
}

.item_list {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media all and (max-width: 639px) {
  .item_list {
    padding: 5px;
    margin-bottom: 20px;
  }
}

.item_list.a-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.item_list.j-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.item_list > a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.item_list .item_list_ttl {
  margin-bottom: 5px;
}

@media all and (max-width: 639px) {
  .item_list .item_list_ttl {
    font-size: 1.2rem;
  }
}

.item_list .item_list_txt {
  font-size: 90%;
}

.item_list .item_list_img {
  width: 300px;
  height: auto;
}

@media all and (max-width: 639px) {
  .item_list .item_list_img {
    width: 260px;
    height: auto;
  }
}

.item_list .item_list_img.type_r {
  width: 200px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
}

@media all and (max-width: 639px) {
  .item_list .item_list_img.type_r {
    height: 120px;
  }
}

.item_list .item_list_img.type_r img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.item_list .item_list_detail {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  position: relative;
}

@media all and (max-width: 639px) {
  .item_list .item_list_detail {
    padding: 10px;
  }
}

.bg_area {
  position: relative;
  padding: 100px auto 0;
}

.bg_area.jp {
  background: url(../images/bg-area_jp.png) no-repeat center;
}

.bg_area.kantou {
  background: url(../images/bg-area_kantou.png) no-repeat center;
}

@media all and (max-width: 639px) {
  .bg_area {
    padding: 50px 0;
  }
}

.calendar_head {
  color: #fefefe;
  background: #999;
  text-align: center;
  padding: 4px;
}

.calendar-box {
  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;
  font-size: 0.9em;
}

.calendar-box div.calendar {
  width: 49%;
}

@media all and (max-width: 639px) {
  .calendar-box div.calendar {
    width: 100%;
    margin-bottom: 10px;
  }
}

.calendar-box table {
  width: 100%;
  text-align: center;
  background-color: #f2f2f2;
}

.calendar-box table th,
.calendar-box table td {
  width: 14.28%;
  font-weight: normal;
  padding: 5px;
  height: 45px;
  font-size: 1.3rem;
  color: #555;
  background-color: #f2f2f2;
}

@media all and (max-width: 639px) {
  .calendar-box table th,
  .calendar-box table td {
    height: 40px;
    font-size: 1.2rem;
  }
}

.calendar-box table th {
  background: #f2f2f2;
  vertical-align: middle;
  font-weight: 600;
  text-align: center;
}

.calendar-box table td {
  background: #fefefe;
}

.calendar-box th.sun,
.calendar-box td.sun {
  color: #D81E1E;
}

.calendar-box th.sat,
.calendar-box td.sat {
  color: #0083de;
}

.calendar-box .item-td {
  background: #d5d5d5;
}

.calendar-box .item-td .days {
  color: #333;
}

.calendar-box .item {
  font-size: 1.1rem;
  text-align: center;
  color: rgba(136, 136, 136, 0.8);
  background-color: rgba(136, 136, 136, 0.1);
}

.calendar-box p {
  text-align: center;
  font-size: 1.4rem;
  margin: 5px auto;
}

.calendar-box p .off {
  color: rgba(216, 30, 30, 0.2);
}

.calendar-box .off {
  background: none;
}

.calendar + .off {
  background-color: rgba(216, 30, 30, 0.2);
}

.calendar-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
  margin-bottom: 5px;
  font-size: 1.3rem;
}

.calendar-arrow a {
  display: block;
  background: #eee;
  padding: 5px 8px;
  cursor: pointer;
}

.calendar-arrow a:link, .calendar-arrow a:visited {
  color: #333;
}

.calendar-arrow a:first-of-type {
  margin-right: 5px;
}

.calendar-arrow a.arrow-before:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0d9";
  font-weight: 900;
  margin-right: 5px;
}

.calendar-arrow a.arrow-after:after {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  margin-left: 5px;
}

.time_txt span {
  color: #888;
}

.time_txt i {
  color: #888;
  font-weight: 900;
  padding: 0 4px;
}

.contactbox_tel {
  background: #fff;
  width: auto;
  height: auto;
  text-align: center;
  padding: 20px 0;
  border: 1px solid #ddd;
  margin-bottom: 5px;
  line-height: 1.4;
  position: relative;
  font-size: 1.4rem;
  font-weight: normal;
}

.contactbox_tel.white {
  background: inherit;
  border: 1px solid #fff;
  padding: 33px 0;
}

.contactbox_tel.white .tel {
  margin-bottom: 0;
  font-size: 2.9rem;
  color: #fff;
}

.contactbox_tel.white .tel a {
  color: #fff;
}

.contactbox_tel.type1 {
  border-radius: 0;
  border: 1px solid #ddd;
}

.contactbox_tel.type1 .btn02 {
  margin-top: 5px;
  margin-bottom: 0;
}

.contactbox_tel.type1 .tel {
  margin-bottom: 0;
  font-size: 2.9rem;
  color: #888;
}

.contactbox_tel.type1 .tel a {
  color: #888;
}

.contactbox_tel .tel {
  font-size: 2.6rem;
  font-weight: normal;
  color: #555;
  margin: 12px 0;
  font-family: "PT Serif", serif;
  font-weight: 500;
}

.contactbox_tel .tel:before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
  font-size: 80%;
  margin-right: 8px;
}

@media all and (max-width: 639px) {
  .contactbox_tel .tel {
    font-size: 2.2rem;
  }
}

.medical2-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}

.medical2-wrap .medical1 {
  width: 50%;
}

.medical2-wrap .medical1 .left {
  width: 60%;
  padding: 120px 30px;
}

@media all and (max-width: 896px) {
  .medical2-wrap .medical1:before {
    width: 100%;
    height: 280px;
  }
  .medical2-wrap .medical1 .left {
    width: 100%;
    margin-top: 280px;
    padding: 30px 15px;
  }
}

@media all and (max-width: 639px) {
  .medical2-wrap .medical1 {
    width: 100%;
  }
  .medical2-wrap .medical1:before {
    height: 280px;
  }
  .medical2-wrap .medical1 .left {
    margin-top: 280px;
    padding: 20px 15px;
  }
}

.medical1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: #f2edde;
  position: relative;
}

.medical1:before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: url(../images/01.jpg) no-repeat center/cover;
}

.medical1.type1:before {
  background: url(../images/01.jpg) no-repeat center/cover;
}

.medical1.type2:before {
  background: url(../images/02.jpg) no-repeat center/cover;
}

.medical1.type3:before {
  background: url(../images/03.jpg) no-repeat center/cover;
}

.medical1.type4:before {
  background: url(../images/04.jpg) no-repeat center/cover;
}

.medical1 .left {
  padding: 40px 40px;
  width: 60%;
  position: relative;
}

.medical1 .left .inner {
  max-width: 550px;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .medical1:before {
    width: 100%;
    height: 200px;
  }
  .medical1 .left {
    width: 100%;
    margin-top: 200px;
    padding: 25px 15px;
  }
}

.medical2-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}

.medical2-wrap .medical1 {
  width: 50%;
  background: #fff;
}

.medical2-wrap .medical1 .left {
  width: 60%;
  background-color: rgba(136, 136, 136, 0.3);
  padding: 120px 30px;
}

@media all and (max-width: 896px) {
  .medical2-wrap .medical1:before {
    width: 100%;
    height: 280px;
  }
  .medical2-wrap .medical1 .left {
    width: 100%;
    margin-top: 280px;
    padding: 30px 15px;
  }
}

@media all and (max-width: 639px) {
  .medical2-wrap .medical1 {
    width: 100%;
  }
  .medical2-wrap .medical1:before {
    height: 280px;
  }
  .medical2-wrap .medical1 .left {
    margin-top: 280px;
    padding: 20px 15px;
  }
}

.medical3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.medical3 .child {
  width: 25%;
  background: #f2edde;
}

.medical3 .child:nth-child(2n) {
  background: #fff;
}

.medical3 .child img {
  width: 100%;
}

.medical3 .child .inner {
  position: relative;
  padding: 25px;
}

.point-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
}

.point-title.blue .num:before {
  background: #297ede;
}

.point-title.blue .txt {
  color: #297ede;
}

.point-title .num {
  font-family: "Arvo", serif;
  font-weight: 500;
  font-size: 3.6rem;
  color: #888;
  line-height: 1;
  position: relative;
}

.point-title .num:before {
  position: absolute;
  content: "";
  left: 50%;
  top: -50px;
  width: 1px;
  height: 75px;
  background: #888;
}

.point-title .txt {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 1.3;
  margin-left: 20px;
  font-size: 1.8rem;
  color: #888;
}

@media all and (max-width: 639px) {
  .point-title .num {
    font-size: 2.8rem;
  }
}

@media all and (max-width: 639px) {
  .point-title .txt {
    font-size: 1.5rem;
  }
}

.vertical-content {
  margin-left: 100px;
}

.vertical-content.type1 {
  margin-left: 180px;
}

@media all and (max-width: 639px) {
  .vertical-content.type1 {
    margin-left: 0;
  }
}

@media all and (max-width: 639px) {
  .vertical-content {
    margin-left: 0;
  }
}

.icon-list-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media all and (max-width: 896px) {
  .icon-list-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.icon-list_dental {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  width: 100%;
}

.icon-list_dental li {
  width: 24%;
  border: solid 2px rgba(204, 204, 204, 0.7);
  margin-bottom: 30px;
  border-radius: 8px;
  margin-right: calc(1% + (1% / 3));
}

.icon-list_dental li:nth-child(4n) {
  margin-right: 0;
}

.icon-list_dental li a {
  display: block;
  text-align: center;
  font-weight: 600;
  height: 100%;
  -webkit-transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  position: relative;
  padding: 12px 0;
}

.icon-list_dental li a img {
  width: 70px;
}

.icon-list_dental li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  background-image: linear-gradient(70deg, rgba(136, 136, 136, 0.2), #fff, #fff, rgba(136, 136, 136, 0.2));
  opacity: 0.7;
  border-radius: 8px;
  z-index: -1;
  -webkit-transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
  transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
}

.icon-list_dental li a .svg {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.icon-list_dental li a:hover {
  color: #888;
}

.icon-list_dental li a:hover .svg {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.icon-list_dental li a:hover:before {
  opacity: 0.9;
  -webkit-transform: translate(-50%, -50%) scale(0.9);
  transform: translate(-50%, -50%) scale(0.9);
}

.icon-list_dental.type1 {
  display: blcok;
  width: 25%;
}

.icon-list_dental.type1 li {
  width: 100%;
}

.icon-list_dental.type1 li a {
  padding: 0 0 15px;
}

.icon-list_dental.type1 li a img {
  width: 100%;
}

.icon-list_dental.type2 {
  width: 100%;
}

.icon-list_dental.type2 li {
  width: 19%;
  margin-right: 1.25%;
}

.icon-list_dental.type2 li:nth-child(4n) {
  margin-right: 1.25%;
}

.icon-list_dental.type2 li:nth-child(5n) {
  margin-right: 0;
}

@media all and (max-width: 896px) {
  .icon-list_dental {
    width: 100%;
  }
}

@media all and (max-width: 639px) {
  .icon-list_dental li {
    width: 48%;
    margin-right: 4%;
  }
  .icon-list_dental li:nth-child(2n) {
    margin-right: 0;
  }
}

@media all and (max-width: 896px) {
  .icon-list.type1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
  }
  .icon-list.type1 li {
    width: 48%;
  }
}

@media all and (max-width: 639px) {
  .icon-list.type2 li {
    width: 48%;
    margin-right: 4%;
  }
  .icon-list.type2 li:nth-child(5n) {
    margin-right: 4%;
  }
  .icon-list.type2 li:nth-child(2n) {
    margin-right: 0;
  }
}

.bg-gold2 {
  overflow: hidden;
  position: relative;
  background: #fef7f7;
}

.bg-gold2-sub {
  width: 100%;
  padding: 100px 20px 60px;
  color: #fff;
  background: url(../img/catch_bg01.png) left top no-repeat, url(../img/catch_bg02.png) right top no-repeat;
  background-size: contain;
  position: relative;
  z-index: 1;
}

@media all and (max-width: 639px) {
  .bg-gold2-sub {
    padding: 50px 20px 50px;
    background-size: 50%;
  }
}

#ep {
  margin-top: 10px;
}

#ep .richreserve_panel {
  max-width: 440px !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#ep .epark_haisha_yoyaku_richreserve .richreserve2_body {
  float: none;
}

#ep span.richreserve2_body {
  width: 50% !important;
}

#ep span.richreserve2_head {
  width: 50% !important;
  height: 80px !important;
}

#ep span.richreserve2_head_icon {
  top: -3% !important;
}

#ep span.richreserve2_head_title {
  font-size: 1.3vw !important;
  /* font-size: 1.5vw !important; */
  bottom: -5% !important;
}

#ep span.richreserve2_body {
  height: 80px !important;
}

#ep .epark_haisha_yoyaku_richreserve .richreserve2_body_body {
  height: 90% !important;
}

#ep .epark_haisha_yoyaku_richreserve .richreserve2_body_body > span {
  height: 90% !important;
}

@media all and (max-width: 639px) {
  #ep span.richreserve2_head_title {
    font-size: 4.2vw;
  }
}

@media all and (max-width: 639px) {
  #ep span.richreserve2_head_title {
    font-size: 4.2vw !important;
  }
}

.clinic_infobox {
  width: 48%;
  margin: 0 auto;
}

@media all and (max-width: 639px) {
  .clinic_infobox {
    width: 100%;
  }
}

.calendar_arrow .arrow-after {
  float: right;
  background: #888;
  color: #fff;
  padding: 0 10px;
}

.tbl_time {
  /*   thead th:last-child,
  tbody td:last-child {
    width: 12%;
    text-align: left;
  } */
}

.tbl_time .box {
  background: #fff;
  padding: 15px 0px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.tbl_time.blue .box {
  background: rgba(41, 126, 222, 0.1);
}

.tbl_time.blue tbody td {
  color: #297ede;
}

.tbl_time.white table {
  color: #fff;
}

.tbl_time.white thead th {
  font-weight: normal;
  line-height: 1.5;
  padding: 18px 0 9px;
  background-color: #fff;
  color: #888;
  border-bottom: 1px solid #fff;
  text-align: center;
}

.tbl_time.white th,
.tbl_time.white td {
  padding: 15px 2px;
  color: #fff;
}

.tbl_time.white tr {
  border-bottom: 1px solid #fff;
}

.tbl_time table {
  color: #333;
}

.tbl_time th {
  font-weight: 500;
  font-weight: 500;
}

.tbl_time tbody td {
  color: #888;
}

.tbl_time table {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.tbl_time.day8 table {
  max-width: 470px;
}

.tbl_time thead th {
  font-weight: normal;
  line-height: 1.5;
  padding: 9px 0 9px;
  border-bottom: 1px solid #aaa;
  text-align: center;
}

.tbl_time thead th:first-child {
  width: 36%;
}

.tbl_time tbody th {
  width: 36%;
  text-align: center;
}

.tbl_time.day8 thead th:first-child,
.tbl_time.day8 tbody th {
  width: 33%;
}

.tbl_time tbody th,
.tbl_time tbody td {
  padding: 4px 0;
  line-height: 1.5;
}

.tbl_time tbody th {
  font-weight: normal;
  padding-right: 13px;
}

.tbl_time thead th:not(:first-child),
.tbl_time tbody td {
  width: calc(49% / 6);
  text-align: left;
}

.tbl_time.day8 tbody th {
  padding-right: 10px;
}

.tbl_time.day8 thead th:not(:first-child),
.tbl_time.day8 tbody td {
  width: calc(53% / 7);
}

.tbl_time.day8 thead th:last-child,
.tbl_time.day8 tbody td:last-child {
  width: 11%;
}

.tbl_time tbody td {
  font-size: 77.78%;
  padding-left: 0.05em;
}

.tbl_time tbody tr:first-child th {
  padding-left: 0.6em;
}

.mtitle_m {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  position: absolute;
  min-height: 100px;
  top: 0;
  left: 0;
}

.mtitle_m .ja {
  display: block;
  font-size: 2.8rem;
  letter-spacing: 0.2em;
  padding-right: 5px;
  line-height: 2;
  font-weight: normal;
}

.mtitle_m .eng {
  display: block;
  font-family: "PT Serif", serif;
  font-weight: 500;
  font-size: 2rem;
  color: #888;
}

@media all and (max-width: 639px) {
  .mtitle_m {
    -webkit-writing-mode: inherit;
    -ms-writing-mode: inherit;
    writing-mode: inherit;
    position: static;
    margin-bottom: 20px;
    min-height: initial;
    min-height: auto;
    text-align: center;
  }
  .mtitle_m .ja {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .mtitle_m .eng {
    font-size: 3rem;
    line-height: 1.3;
  }
}

.step_columnbox {
  max-width: 1600px;
  position: relative;
  z-index: 1;
  margin: 0 auto 0;
}

.step_columnbox .number_box {
  position: absolute;
  top: -1px;
  left: -1px;
  line-height: 1;
  border: 1px solid #888;
  width: 80px;
  height: 80px;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

@media all and (max-width: 639px) {
  .step_columnbox .number_box {
    width: 60px;
    height: 60px;
  }
}

.step_columnbox .number_box .ttl {
  line-height: 1.1;
}

.step_columnbox .number_box .num {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 500;
  text-transform: uppercase;
  font-weight: 300;
  position: relative;
  z-index: 1;
  color: #888;
  text-align: center;
}

.step_columnbox .number_box .txt {
  font-size: 1.1rem;
  color: #888;
  text-align: center;
}

@media all and (max-width: 639px) {
  .step_columnbox .number_box {
    padding: 5px;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .number_box .num {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .number_box .txt {
    font-size: 1rem;
  }
}

.step_columnbox.type1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.step_columnbox.type1 .column-inner {
  width: 48%;
  margin-right: 2%;
}

.step_columnbox.type1 .column-inner:nth-child(2n) {
  margin-right: 0;
}

.step_columnbox .column-inner {
  margin-bottom: 80px;
  position: relative;
}

.step_columnbox .column-inner:nth-of-type(2n-1) .column-inner-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.step_columnbox .column-inner-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.step_columnbox .column-inner-contents.no1 {
  background-color: rgba(231, 166, 126, 0.3);
}

.step_columnbox .column-inner-contents.no2 {
  background-color: rgba(159, 224, 159, 0.3);
}

.step_columnbox .column-inner-contents.no3 {
  background-color: rgba(228, 203, 116, 0.3);
}

.step_columnbox .column-inner-contents.no4 {
  background-color: rgba(143, 195, 229, 0.3);
}

.step_columnbox .column-inner-contents.type3 {
  color: #333;
  -webkit-box-align: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
  display: block;
}

.step_columnbox .photo {
  position: relative;
  width: 50%;
}

.step_columnbox .column-inner-contents-txtarea {
  left: 0px;
  width: 50%;
  padding: 120px 40px 30px;
  margin: 0 auto;
  border: 1px solid #888;
  position: relative;
}

.step_columnbox .column-inner-contents-txtarea.no1, .step_columnbox .column-inner-contents-txtarea.no2, .step_columnbox .column-inner-contents-txtarea.no3, .step_columnbox .column-inner-contents-txtarea.no4 {
  background-color: rgba(255, 255, 255, 0.3);
}

.step_columnbox .column-inner-contents-txtarea.type2 {
  padding: 50px 70px;
  border: none;
  border-bottom: 1px solid #ccbf94;
}

.step_columnbox .column-inner-contents-txtarea.type2 span {
  font-family: "Arvo", serif;
  font-weight: 500;
  font-size: 3rem;
}

.step_columnbox .column-inner-contents-txtarea.type2 .txt {
  font-size: 1.8rem;
}

.step_columnbox .column-inner-contents-txtarea.type3 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 50px 70px;
  border: none;
  text-align: left;
  background-color: transparent;
}

.step_columnbox .column-inner-contents-txtarea.type3 span {
  font-family: "Arvo", serif;
  font-weight: 500;
  font-size: 2rem;
  border-bottom: 1px solid #bfa670;
  padding: 10px 0;
  margin-bottom: 10px;
}

.step_columnbox .column-inner-contents-txtarea.type3 .txt {
  font-size: 1.6rem;
  text-align: left;
  margin-top: 10px;
}

.step_columnbox .column-inner-contents-txtarea:before {
  content: "";
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

.step_columnbox .column-inner-contents-txtarea.type-right {
  left: auto;
  right: 0px;
}

.step_columnbox .column-inner-contents-txtarea span {
  font-family: "Arvo", serif;
  font-weight: 500;
  font-size: 3rem;
}

.step_columnbox .txt {
  font-size: 1.6rem;
  width: auto;
  margin: 0;
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  font-weight: normal;
}

.step_columnbox img {
  width: 100%;
  height: 100%;
}

.step_columnbox .column-sub-txt {
  font-size: 1.8rem;
  width: auto;
  margin: 40px auto;
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  font-weight: normal;
  color: #333;
}

@media all and (max-width: 639px) {
  .step_columnbox.type1 {
    display: block;
  }
  .step_columnbox.type1 .column-inner {
    width: 100%;
    margin-right: auto;
  }
  .step_columnbox.type1 .column-inner:nth-child(2n) {
    margin-right: auto;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox {
    width: 100%;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents.type2 {
    display: block;
    margin-bottom: 100px;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents.type3 {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo {
    width: 100%;
    margin: 0 auto;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo2 {
    width: 100%;
    margin: 0 auto;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo2 .photo-txt {
    font-size: 4rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo3 {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .step_columnbox .photo3:before {
    display: none;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo3 .photo-txt {
    font-size: 4rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .photo3-2 {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .step_columnbox .photo3-2:before {
    display: none;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type2 {
    position: relative;
    margin-top: 0;
    padding: 50px 20px;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type2 span {
    font-size: 1.8rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type2 .txt {
    font-size: 1.3rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type3 {
    position: relative;
    margin-top: 0;
    padding: 50px 20px;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type3 span {
    font-size: 1.8rem;
    padding: 2px;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type3 .txt {
    font-size: 1.3rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea {
    width: 100%;
    padding: 70px 20px 30px;
    left: 0;
    right: 0;
    margin: 0px auto;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea.type-right {
    width: 100%;
    padding: 70px 20px 30px;
    left: 0;
    right: 0;
    margin: 0px auto;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-inner-contents-txtarea span {
    font-size: 1.8rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .txt {
    font-size: 1.3rem;
  }
}

@media all and (max-width: 639px) {
  .step_columnbox .column-sub-txt {
    font-size: 1.3rem;
    margin: 0;
    padding-top: 20px;
  }
}

.grid_photo01 {
  width: 95%;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20% 54% 20%;
      grid-template-columns: 20% 54% 20%;
  -ms-grid-rows: 60% 68% 20%;
      grid-template-rows: 60% 68% 20%;
  grid-column-gap: 3%;
  grid-row-gap: 3%;
}

.grid_photo01 div {
  width: 100%;
  height: 100%;
}

.grid_photo01 div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.grid_photo01 .div1 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 2 / 2;
}

.grid_photo01 .div2 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 3 / 3;
}

.grid_photo01 .div3 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 2 / 4;
}

.grid_photo01 .div4 {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 2 / 1 / 3 / 2;
}

.grid_photo01 .div5 {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 2 / 3 / 3 / 4;
}

.grid_photo02 {
  width: 100%;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0px 1fr;
      grid-template-columns: 0px 1fr;
  -ms-grid-rows: 15vw;
      grid-template-rows: 15vw;
}

.grid_photo02 div {
  width: 100%;
  height: 100%;
}

.grid_photo02 div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  gap: 5% 5%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media all and (max-width: 639px) {
  .article01.res_none {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .article01.res_none figure {
    max-width: 30%;
  }
}

.article01.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.article01.j-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.article01.a-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.article01.a-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.article01 .figure {
  max-width: 45%;
  position: relative;
}

.article01 .figure.type1 {
  height: 50vw;
}

@media all and (max-width: 639px) {
  .article01 .figure.type1 {
    width: 100%;
    height: 400px;
    margin-top: 30px;
  }
}

.article01 .figure.type1 img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 .figure.icon-list.type2 {
  width: 80%;
  height: 30vw;
}

@media all and (max-width: 639px) {
  .article01 .figure.icon-list.type2 {
    width: 100%;
    height: 400px;
    margin-top: 30px;
  }
}

.article01 .figure.icon-list.type2 img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 .figure .photo01 {
  position: absolute;
  bottom: 12%;
  right: -10%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 2;
}

.article01 .figure .photo01 a {
  height: 220%;
}

.article01 .figure .photo01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 .figure .photo02 {
  position: absolute;
  bottom: 12%;
  right: 30%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 3;
}

.article01 .figure .photo02 a {
  height: 220%;
}

.article01 .figure .photo02 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 figure {
  max-width: 45%;
  max-height: 25vw;
  position: relative;
  overflow: hidden;
}

.article01 figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article01 figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.2rem;
  text-align: left;
  background-color: rgba(136, 136, 136, 0.8);
  color: #fff;
  font-weight: bold;
  padding: 6px;
  max-width: 400px;
}

.article01 .txtarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media all and (max-width: 639px) {
  .article01 {
    display: block;
  }
  .article01 .figure {
    max-width: 100%;
    margin: 0 auto 20px;
  }
  .article01 figure {
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    max-width: 100%;
    max-height: 70vw;
  }
}

.article01.half {
  gap: 0% 0%;
}

.article01.half .figure,
.article01.half figure {
  max-width: 50%;
  width: 50%;
  height: 100%;
  max-height: 50vw;
}

.article01.half .txtarea {
  width: 50%;
}

@media all and (max-width: 639px) {
  .article01.half .figure,
  .article01.half figure {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 60vw;
  }
  .article01.half .txtarea {
    width: 100%;
    padding: 30px 10px;
  }
}

.article02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  gap: 5% 10%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media all and (max-width: 896px) {
  .article02.res_none {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .article02.res_none figure {
    max-width: 100%;
  }
}

.article02 a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.article02 a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.article02.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.article02.j-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.article02.a-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.article02.a-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.article02 .figure {
  max-width: 55%;
  position: relative;
}

.article02 .figure.type1 {
  height: 50vw;
}

@media all and (max-width: 896px) {
  .article02 .figure.type1 {
    width: 100%;
    height: 400px;
    margin-top: 30px;
  }
}

.article02 .figure.type1 img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article02 .figure .photo01 {
  position: absolute;
  bottom: 12%;
  right: -10%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 2;
}

.article02 .figure .photo01 a {
  height: 220%;
}

.article02 .figure .photo01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article02 .figure .photo02 {
  position: absolute;
  bottom: 12%;
  right: 30%;
  max-width: 35%;
  max-height: 16%;
  -webkit-box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
          box-shadow: rgba(17, 17, 17, 0.1) 0 0 3px 3px;
  z-index: 3;
}

.article02 .figure .photo02 a {
  height: 220%;
}

.article02 .figure .photo02 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article02 figure {
  max-width: 55%;
  max-height: 30vw;
  position: relative;
  overflow: hidden;
}

@media all and (max-width: 896px) {
  .article02 figure {
    max-width: 80%;
  }
}

.article02 figure img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article02 figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.2rem;
  text-align: left;
  background-color: rgba(242, 242, 242, 0.8);
  color: #888;
  padding: 6px;
  max-width: 400px;
}

.article02 .txtarea {
  position: absolute;
  width: 70%;
  right: 0;
  margin: 0 0 0 auto;
}

@media all and (max-width: 896px) {
  .article02 {
    display: block;
    margin-bottom: 40px;
  }
  .article02 .figure {
    max-width: 80%;
    margin: 0 auto 20px;
  }
  .article02 figure {
    margin: 0 auto;
    text-align: center;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    max-height: 50vw;
  }
  .article02 .txtarea {
    position: absolute;
    width: 100%;
    max-width: 100%;
    right: 0;
    margin: 20px 0;
    padding: 20px 20px;
  }
}

.grid2,
.grid3,
.grid4,
.grid5,
.grid6 {
  display: -ms-grid;
  display: grid;
  gap: 60px 60px;
}

.grid2.gap_none,
.grid3.gap_none,
.grid4.gap_none,
.grid5.gap_none,
.grid6.gap_none {
  gap: 60px 0px;
}

.grid2 .reverse,
.grid3 .reverse,
.grid4 .reverse,
.grid5 .reverse,
.grid6 .reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.grid2 .a-center,
.grid3 .a-center,
.grid4 .a-center,
.grid5 .a-center,
.grid6 .a-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.grid2 .j-center,
.grid3 .j-center,
.grid4 .j-center,
.grid5 .j-center,
.grid6 .j-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media all and (max-width: 896px) {
  .grid2 .res_none,
  .grid3 .res_none,
  .grid4 .res_none,
  .grid5 .res_none,
  .grid6 .res_none {
    display: -ms-grid !important;
    display: grid !important;
  }
}

@media all and (max-width: 639px) {
  .grid2 .res_none,
  .grid3 .res_none,
  .grid4 .res_none,
  .grid5 .res_none,
  .grid6 .res_none {
    display: -ms-grid !important;
    display: grid !important;
  }
}

@media all and (max-width: 896px) {
  .grid2,
  .grid3,
  .grid4,
  .grid5,
  .grid6 {
    gap: 30px 30px;
  }
}

@media all and (max-width: 639px) {
  .grid2,
  .grid3,
  .grid4,
  .grid5,
  .grid6 {
    gap: 10px 10px;
  }
  .grid2 > li,
  .grid2 .child,
  .grid3 > li,
  .grid3 .child,
  .grid4 > li,
  .grid4 .child,
  .grid5 > li,
  .grid5 .child,
  .grid6 > li,
  .grid6 .child {
    margin-bottom: 20px;
  }
}

.grid2 {
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
}

@media all and (max-width: 639px) {
  .grid2 {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .grid2.sp2 {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .grid2.sp2 > li,
  .grid2.sp2 .child {
    margin-bottom: 0px;
  }
}

.grid3 {
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
}

@media all and (max-width: 896px) {
  .grid3 {
    display: block;
  }
  .grid3 > li,
  .grid3 .child {
    margin-bottom: 20px;
  }
}

@media all and (max-width: 639px) {
  .grid3.sp2 {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .grid3.sp2 > li,
  .grid3.sp2 .child {
    margin-bottom: 0px;
  }
}

.grid4 {
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
}

@media all and (max-width: 896px) {
  .grid4 {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 639px) {
  .grid4 {
    display: block;
  }
  .grid4 > li,
  .grid4 .child {
    margin-bottom: 20px;
  }
}

@media all and (max-width: 639px) {
  .grid4.sp2 {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .grid4.sp2 > li,
  .grid4.sp2 .child {
    margin-bottom: 0px;
  }
}

.grid5 {
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
}

@media all and (max-width: 896px) {
  .grid5 {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 639px) {
  .grid5 {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .grid5.sp2 {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .grid5.sp2 > li,
  .grid5.sp2 .child {
    margin-bottom: 0px;
  }
}

.grid6 {
  -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr);
}

@media all and (max-width: 896px) {
  .grid6 {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 639px) {
  .grid6 {
    display: block;
  }
}

@media all and (max-width: 639px) {
  .grid6.sp2 {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

.masonry {
  margin: 0 auto;
  width: 100%;
  background-color: #fff;
  -webkit-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
          column-gap: 10px;
  row-gap: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media all and (max-width: 896px) {
  .masonry {
    -webkit-column-count: 3;
            column-count: 3;
  }
}

@media all and (max-width: 639px) {
  .masonry {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

.masonry > li,
.masonry .child {
  background-color: #ccc;
  padding: 10px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

.masonry > li:nth-child(2n),
.masonry .child:nth-child(2n) {
  background-color: #f2f2f2;
}

.masonry > li:nth-child(3n),
.masonry .child:nth-child(3n) {
  background-color: #eee;
}

.list_step > li {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  background-color: #888888;
  color: #fff;
  position: relative;
  padding: 20px;
}

.list_step > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.list_step > li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.list_step > li:nth-child(2n) {
  background-color: rgba(136, 136, 136, 0.9);
}

.list_step > li:nth-child(3n) {
  background-color: rgba(136, 136, 136, 0.8);
}

.list_step > li:nth-child(4n) {
  background-color: rgba(136, 136, 136, 0.7);
}

.list_step > li:nth-child(5n) {
  background-color: rgba(136, 136, 136, 0.6);
}

.list_step > li .num {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  position: relative;
}

.list_step > li .num:before {
  content: "";
  position: absolute;
  bottom: -3px;
  width: 30px;
  border-bottom: 2px solid #ccc;
}

.list_step > li .ttl {
  margin-top: 20px;
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
}

.list_step > li .txt {
  text-align: center;
}

@media all and (max-width: 639px) {
  .list_step > li {
    width: 100%;
  }
  .list_step > li .ttl {
    font-size: 1.3rem;
  }
}

.share_ttl {
  text-align: center;
  margin: 20px auto;
  font-size: 1.6rem;
}

.share_ttl.white span {
  color: #fff;
}

.share_ttl.white span:before, .share_ttl.white span:after {
  background-color: #fff;
}

@media all and (max-width: 639px) {
  .share_ttl {
    font-size: 1.2rem;
  }
}

.share_ttl span {
  color: #888;
  position: relative;
  text-align: center;
}

.share_ttl span:before, .share_ttl span:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 26px;
  background-color: #888;
  z-index: 1;
  top: -2px;
}

.share_ttl span:before {
  left: -20px;
  -webkit-transform: rotate(-0.1turn);
          transform: rotate(-0.1turn);
}

.share_ttl span:after {
  right: -20px;
  -webkit-transform: rotate(0.1turn);
          transform: rotate(0.1turn);
}

.sns_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px 5px;
}

.sns_btn li {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  fill: #fff;
}

@media all and (max-width: 639px) {
  .sns_btn li {
    width: 40px;
    height: 40px;
  }
}

.sns_btn li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.sns_btn li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.sns_btn li img {
  width: 20px;
  height: 20px;
}

@media all and (max-width: 639px) {
  .sns_btn li img {
    width: 15px;
    height: 15px;
  }
}

.sns_btn li svg {
  width: 20px;
  height: 20px;
}

@media all and (max-width: 639px) {
  .sns_btn li svg {
    width: 15px;
    height: 15px;
  }
}

.sns_btn li.tel {
  background: #888;
}

.sns_btn li.mail {
  background: #888;
}

.sns_btn li.youtube {
  background: #E61F19;
}

.sns_btn li.facebook {
  background: #315096;
}

.sns_btn li.twitter {
  background: #55acee;
}

.sns_btn li.instagram {
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat !important;
}

.sns_btn li.hatena {
  background: #008fde;
}

.sns_btn li.poket {
  background: #dc3d50;
}

.sns_btn li.feedly {
  background: #6cc655;
}

.sns_btn li.line {
  background: #50cc1a;
}

.sns_btn.type1 li.tel, .sns_btn.type1 li.mail, .sns_btn.type1 li.youtube, .sns_btn.type1 li.facebook, .sns_btn.type1 li.twitter, .sns_btn.type1 li.instagram, .sns_btn.type1 li.hatena, .sns_btn.type1 li.poket, .sns_btn.type1 li.feedly, .sns_btn.type1 li.line {
  background: #fff !important;
  -webkit-box-shadow: rgba(136, 136, 136, 0.1) 0 0 2px 2px;
          box-shadow: rgba(136, 136, 136, 0.1) 0 0 2px 2px;
}

.sns_btn.type1 li.tel {
  fill: #888;
}

.sns_btn.type1 li.mail {
  fill: #888;
}

.sns_btn.type1 li.youtube {
  fill: #E61F19;
}

.sns_btn.type1 li.facebook {
  fill: #315096;
}

.sns_btn.type1 li.twitter {
  fill: #55acee;
}

.sns_btn.type1 li.instagram {
  fill: #f13f79 !important;
}

.sns_btn.type1 li.hatena {
  fill: #008fde;
}

.sns_btn.type1 li.poket {
  fill: #dc3d50;
}

.sns_btn.type1 li.feedly {
  fill: #6cc655;
}

.sns_btn.type1 li.line {
  fill: #50cc1a;
}

.sns_btn.type2 li.facebook, .sns_btn.type2 li.twitter, .sns_btn.type2 li.instagram, .sns_btn.type2 li.hatena, .sns_btn.type2 li.poket, .sns_btn.type2 li.feedly, .sns_btn.type2 li.line {
  background: #fff !important;
  -webkit-box-shadow: rgba(136, 136, 136, 0.1) 0 0 2px 2px;
          box-shadow: rgba(136, 136, 136, 0.1) 0 0 2px 2px;
  fill: #fff;
  stroke-miterlimit: 5;
  stroke-width: 2;
}

.sns_btn.type2 li.facebook {
  stroke: #315096;
}

.sns_btn.type2 li.twitter {
  stroke: #55acee;
}

.sns_btn.type2 li.instagram {
  stroke: #f13f79 !important;
}

.sns_btn.type2 li.hatena {
  stroke: #008fde;
}

.sns_btn.type2 li.poket {
  stroke: #dc3d50;
}

.sns_btn.type2 li.feedly {
  stroke: #6cc655;
}

.sns_btn.type2 li.line {
  stroke: #50cc1a;
}

.article_tbrl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  gap: 5% 10%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.article_tbrl.type1 {
  position: relative;
}

.article_tbrl.type1:before {
  content: "";
  position: absolute;
  top: -200px;
  right: -600px;
  background-color: #e6e6e6;
  width: 800px;
  height: 800px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -2;
}

@media all and (max-width: 639px) {
  .article_tbrl.type1:before {
    top: 15%;
    right: -120px;
    width: 200px;
    height: 200px;
  }
}

.article_tbrl.type1:after {
  content: "";
  position: absolute;
  top: 22%;
  left: -600px;
  background-color: #e6e6e6;
  width: 800px;
  height: 800px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -2;
}

@media all and (max-width: 639px) {
  .article_tbrl.type1:after {
    top: inherit;
    bottom: -20%;
    left: -120px;
    width: 200px;
    height: 200px;
  }
}

.article_tbrl .figure {
  width: 68%;
  height: 43vw;
  position: relative;
}

.article_tbrl .figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article_tbrl .txtbox {
  height: 42vw;
  width: 18%;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
}

@media all and (max-width: 1100px) {
  .article_tbrl .txtbox {
    width: 25%;
  }
}

@media all and (max-width: 639px) {
  .article_tbrl .txtbox {
    height: auto;
    width: 100%;
    -ms-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
            writing-mode: horizontal-tb;
  }
}

.article_tbrl .txtbox .ttl {
  font-size: 4vw;
  color: #888;
  position: relative;
  margin-top: -50px;
  z-index: 1;
  letter-spacing: 0;
}

.article_tbrl .txtbox .mtxt {
  font-size: 1.6vw;
  margin: 0;
  padding: 0 30px;
  font-weight: bold;
}

@media all and (max-width: 639px) {
  .article_tbrl {
    display: block;
  }
  .article_tbrl .figure,
  .article_tbrl figure {
    max-width: 100%;
    width: 100%;
    height: 65vw;
    position: relative;
    margin: 0 auto 20px;
  }
  .article_tbrl .txtbox .ttl {
    font-size: 9vw;
    margin-top: 10px;
  }
  .article_tbrl .txtbox .mtxt {
    font-size: 1.8rem;
    padding: 0 0px 10px;
    font-weight: bold;
  }
}

.luxy_area02 {
  position: relative;
  margin: 0 auto 10% auto;
  padding: 0 30px;
  max-width: 1600px;
  width: 100%;
}

.luxy_area02 figure {
  position: relative;
  left: 0;
  top: 0;
  width: 80%;
  height: 600px;
  line-height: 0;
  left: auto;
  right: 0%;
  margin-left: auto;
}

.luxy_area02 figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media all and (max-width: 896px) {
  .luxy_area02 figure {
    height: 300px;
  }
}

@media all and (max-width: 639px) {
  .luxy_area02 figure {
    height: 250px;
  }
}

.luxy_area02:nth-child(2n) figure {
  right: auto;
  left: 0%;
  margin-right: auto;
  margin-left: 0;
}

.luxy_area02 .box {
  position: absolute;
  top: -13%;
  width: 700px;
  background: #959595;
  padding: 120px 50px;
  right: inherit;
  margin-right: auto;
  z-index: 1;
  color: #fff;
}

.luxy_area02 .box.type1 {
  top: 10%;
  width: 400px;
}

@media all and (max-width: 1100px) {
  .luxy_area02 .box {
    padding: 60px 20px;
    width: 600px;
  }
}

.luxy_area02:nth-child(2n) .box {
  right: 30px;
  margin-left: auto;
}

@media all and (max-width: 896px) {
  .luxy_area02 {
    padding: 0;
  }
  .luxy_area02:nth-child(2n) figure {
    left: 0;
  }
  .luxy_area02 figure {
    width: 100%;
  }
  .luxy_area02 .box,
  .luxy_area02:nth-child(2n) .box {
    position: relative;
    top: 0;
    left: 0;
    right: inherit;
    padding: 20px 10px;
    margin-right: 0;
  }
  .luxy_area02 .box {
    margin-top: -100px;
    width: 95%;
    margin-right: 0;
  }
}

.svg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  position: relative;
  background-color: #888;
  border: 1px solid #fff;
  fill: #fff;
}

.svg.center {
  margin: 0 auto;
}

.svg.type1 {
  background-color: transparent;
  border: 0px solid #fff;
}

.svg.type1 svg {
  fill: #888;
}

.svg .ttl {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  padding: 5px 0;
  margin-top: 8px;
  font-weight: bold;
}

.svg img {
  width: 60px;
  height: 60px;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

@media all and (max-width: 639px) {
  .svg img {
    width: 30px;
    height: 30px;
  }
}

.svg svg {
  width: 60px;
  height: 60px;
  fill: #fff;
}

@media all and (max-width: 639px) {
  .svg svg {
    width: 30px;
    height: 30px;
  }
}

@media all and (max-width: 639px) {
  .svg {
    width: 80px;
    height: 80px;
  }
  .svg .ttl {
    font-size: 1.1rem;
  }
}

.content_area {
  display: none;
}

.content_area.is-show {
  display: block;
}

.page-box2 {
  position: relative;
}

.page-box2 .ttlarea {
  position: relative;
}

.page-box2 .ttlarea .photo {
  position: relative;
}

.page-box2 .ttlarea .photo:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

.page-box2 .ttlarea .photo figure {
  z-index: 1;
  width: 100%;
  height: 19vw;
}

@media all and (max-width: 639px) {
  .page-box2 .ttlarea .photo figure {
    height: 35vw;
  }
}

.page-box2 .ttlarea .photo figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.page-box2 .ttlarea .photo .bgextend {
  z-index: -1;
}

.page-box2 .ttlarea .photo .bgextend:before {
  z-index: -1;
}

.page-box2 .ttlarea .ttl .ttlmain {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 20px;
  position: absolute;
  left: 0;
  margin: 0 auto;
  color: #888;
  text-align: left;
  padding: 18px 0px;
  width: 40%;
  overflow: inherit;
}

@media all and (max-width: 639px) {
  .page-box2 .ttlarea .ttl .ttlmain {
    width: 100%;
    text-align: left;
  }
}

.page-box2 .ttlarea .ttl .ttlmain:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: -20px;
  left: 0;
  border-bottom: 1px solid #888;
}

.page-box2 .ttlarea .ttl .ttlmain:before {
  top: 0;
  left: 0;
}

.page-box2 .ttlarea .ttl .txtsub {
  margin-top: 10%;
  color: #888;
  font-size: 2rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase !important;
}

.page-box2 .ttlarea .ttl .txtsub:first-letter {
  text-transform: uppercase;
}

.page-box2 .txtarea {
  margin-top: 20px;
  padding: 40px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 10px rgba(110, 110, 110, 0.1);
          box-shadow: 0 0 10px rgba(110, 110, 110, 0.1);
}

@media all and (max-width: 639px) {
  .page-box2 .photo img {
    height: 150px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .page-box2 .ttlarea {
    position: relative;
  }
  .page-box2 .ttlarea .photo {
    position: relative;
  }
  .page-box2 .ttlarea .photo:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.2;
  }
  .page-box2 .ttlarea .photo img {
    z-index: 1;
  }
  .page-box2 .ttlarea .photo .bgextend {
    z-index: -1;
  }
  .page-box2 .ttlarea .photo .bgextend:before {
    z-index: -1;
  }
  .page-box2 .ttlarea .ttl .ttlmain {
    position: inherit;
    font-size: 1.8rem;
    padding: 0px 0px 0px;
    margin-bottom: 10px;
    display: block;
  }
  .page-box2 .txtarea {
    padding: 20px;
  }
}

.wrap_2column {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.wrap_2column .mainwrap {
  width: 100%;
  max-width: calc(78% - 20px);
}

.wrap_2column .mainwrap section {
  margin-bottom: 80px;
}

.wrap_2column .sidewrap {
  width: 100%;
  max-width: 22%;
  height: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 1;
}

@media all and (max-width: 1100px) {
  .wrap_2column .sidewrap {
    top: 170px;
  }
}

@media all and (max-width: 896px) {
  .wrap_2column {
    padding: 32px 0;
    overflow: hidden;
    max-width: 100%;
    display: block;
  }
  .wrap_2column .mainwrap {
    max-width: 100%;
  }
  .wrap_2column .sidewrap {
    max-width: 100%;
    position: relative;
    top: 0px;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 639px) {
  .wrap_2column {
    width: 100%;
    margin-bottom: 30px;
    display: block;
  }
  .wrap_2column .mainwrap {
    width: 100%;
    margin: 0 auto 20px;
  }
  .wrap_2column .sidewrap {
    width: 100%;
    position: static;
    margin: 0 auto 32px;
    height: auto;
    padding: 0;
  }
}

.smenu {
  background-color: #e4e4e4;
}

.smenu li {
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid #fff;
}

.smenu a {
  padding: 10px 0px;
  text-indent: 1em;
  display: block;
  zoom: 1;
  text-decoration: none;
  cursor: pointer;
}

.smenu a:hover {
  text-decoration: none;
  background: #eee;
}

.smenu a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  margin-right: 5px;
}

.smenu a:link, .smenu a:visited {
  color: #333;
}

.menulist li {
  font-weight: normal;
  border-top: 1px solid #fff;
  padding: 5px 20px;
  background-color: #888;
  background-color: #a2a2a2;
  cursor: pointer;
  position: relative;
}

.menulist li:hover {
  z-index: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #909090;
}

.menulist li:before {
  position: absolute;
  top: 0;
  left: 0px;
  width: 2em;
  height: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  font-family: "Font Awesome 5 Free";
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  color: #fff;
  z-index: 1;
}

.menulist a {
  display: block;
  zoom: 1;
  color: #fff;
}

@media all and (max-width: 639px) {
  .menulist {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .menulist li {
    line-height: 1.2;
    padding: 8px 8px 8px 20px;
    border-right: 1px solid #fff;
    font-size: 1.1rem;
  }
  .menulist li:nth-child(2n) {
    border-right: 0px solid #fff;
  }
}

.ttl_category {
  font-size: 1.8rem;
  font-weight: normal;
  text-align: center;
  padding: 16px 0;
  background-color: #888;
  font-weight: bold;
  color: #fff;
}

.ttl_category:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0ca";
  font-weight: 900;
  margin-right: 5px;
}

@media all and (max-width: 639px) {
  .ttl_category {
    font-size: 1.4rem;
    padding: 4px 0;
  }
}

.time-list {
  max-width: 480px;
}

.time-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.time-list li .txtarea {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  padding: 0px 40px 30px 40px;
}

.time-list li .txtarea:before {
  content: "";
  position: absolute;
  left: 118px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #d3d3d3;
}

.time-list li .txtarea:last-child:before {
  display: none;
}

.time-list li .txtarea:after {
  content: "";
  position: absolute;
  left: 110px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #888;
  z-index: 1;
  border: 2px solid #888;
  border-radius: 50%;
}

.time-list li .ttl {
  font-size: 1.4rem;
  line-height: 1.4;
}

.time-list li .time {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  text-align: end;
  min-width: 0;
  overflow-wrap: break-word;
  padding-bottom: 1rem;
  color: #95c51a;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

@media all and (max-width: 1100px) {
  .time-list {
    padding-left: 0;
  }
  .time-list li .txtarea {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 0px 00px 30px 40px;
    text-align: left;
  }
  .time-list li .txtarea:before {
    content: "";
    position: absolute;
    left: 88px;
  }
  .time-list li .txtarea:last-child:before {
    display: none;
  }
  .time-list li .txtarea:after {
    content: "";
    position: absolute;
    left: 79px;
  }
  .time-list li .time {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70px;
    flex: 0 0 70px;
  }
}

@media all and (max-width: 639px) {
  .time-list {
    padding-left: 0;
  }
  .time-list li .txtarea {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 0px 00px 30px 40px;
    text-align: left;
  }
  .time-list li .txtarea:before {
    content: "";
    position: absolute;
    left: 88px;
  }
  .time-list li .txtarea:last-child:before {
    display: none;
  }
  .time-list li .txtarea:after {
    content: "";
    position: absolute;
    left: 79px;
  }
  .time-list li .time {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 72px;
    flex: 0 0 72px;
    font-size: 1.6rem;
  }
}

/* modal window
----------------------------------*/
#info {
  display: none;
}

/* modal window
----------------------------------*/
.modaal-close:hover:before {
  background: #888 !important;
}

.modaal-close:hover:after {
  background: #888 !important;
}

.acdi-box {
  margin-top: 10px;
  padding-bottom: 10px;
}

@media all and (max-width: 639px) {
  .acdi-box {
    padding-bottom: 50px;
  }
}

.acdi-box .acdi-box-inner {
  position: relative;
  border-radius: 20px;
}

.acdi-box .acdi-box-inner .ttl {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 40px 0;
  text-align: center;
  margin: 0 auto;
  font-size: 2rem;
  font-weight: bold;
  position: relative;
}

.acdi-box .acdi-box-inner .ttl:after {
  position: absolute;
  top: 44%;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: "";
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.acdi-box .acdi-box-inner.open .ttl:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.acdi-box .acdi-box-inner .detail {
  padding: 15px;
}

.acdi-box .acdi-box-inner .detail .subttl {
  margin-bottom: 20px;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
  z-index: 1;
  display: block;
  background-color: rgba(136, 136, 136, 0.2);
  border-radius: 50px;
  padding: 20px;
}

.acdi-box .acdi-box-inner .detail .detail-txt {
  margin-top: 20px;
  padding-left: 50px;
  font-size: 1.7rem;
  position: relative;
}

.acdi-box .acdi-box-inner .detail .detail-txt:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 30px;
  background-color: #888;
  left: 20px;
  top: 0;
}

.acdi-box .acdi-box-inner .detail .detail-txt:after {
  position: absolute;
  content: "";
  width: 5px;
  height: 15px;
  background-color: #ff76ec;
  left: 20px;
  top: 15px;
}

.acdi-box .acdi-box-inner .detail .detail-list {
  padding: 10px 20px;
}

.acdi-box .acdi-box-inner .detail .detail-list li {
  position: relative;
  padding-left: 25px;
}

.acdi-box .acdi-box-inner .detail .detail-list li:before {
  position: absolute;
  content: "■";
  width: 20px;
  height: 20px;
  color: #888;
  left: 0;
}

@media all and (max-width: 639px) {
  .acdi-box .acdi-box-inner {
    padding: 0;
  }
  .acdi-box .acdi-box-inner .ttl {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    padding: 20px 0;
    font-size: 1.6rem;
  }
  .acdi-box .acdi-box-inner .detail {
    padding: 0px;
  }
  .acdi-box .acdi-box-inner .detail .subttl {
    margin-bottom: 20px;
    font-size: 1.3rem;
    text-align: center;
    position: relative;
    z-index: 1;
    display: block;
    padding: 10px;
  }
  .acdi-box .acdi-box-inner .detail .detail-txt {
    margin-top: 20px;
    padding-left: 20px;
    font-size: 1.2rem;
    position: relative;
  }
  .acdi-box .acdi-box-inner .detail .detail-txt:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 30px;
    background-color: #888;
    left: 0px;
    top: 0;
  }
  .acdi-box .acdi-box-inner .detail .detail-txt:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 15px;
    background-color: #ff76ec;
    left: 0px;
    top: 15px;
  }
  .acdi-box .acdi-box-inner .detail .detail-list {
    padding: 10px 0px;
  }
  .acdi-box .acdi-box-inner .detail .detail-list li {
    position: relative;
    padding-left: 25px;
    font-size: 1.2rem;
  }
  .acdi-box .acdi-box-inner .detail .detail-list li:before {
    position: absolute;
    content: "■";
    width: 20px;
    height: 20px;
    color: #888;
    left: 0;
  }
}

.puton {
  position: absolute;
  z-index: 1;
}

.puton.r01 {
  top: 0;
  right: 0;
  margin: 0 0 auto auto;
}

.puton.r02 {
  bottom: 0;
  right: 0px;
  margin: auto 0 0 auto;
}

.puton.r03 {
  bottom: -60px;
  right: -160px;
  margin: auto 0 0 auto;
}

@media all and (max-width: 639px) {
  .puton.r03 {
    bottom: -40px;
    right: -20px;
  }
}

.puton.l01 {
  top: -75px;
  left: 0;
  margin: 0 auto auto 0;
}

@media all and (max-width: 639px) {
  .puton.l01 {
    top: -35px;
    left: -10px;
  }
}

.puton.l02 {
  bottom: -40px;
  left: 0px;
  margin: 0 auto auto 0;
}

.puton figure {
  width: 400px;
  height: 400px;
}

.puton figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media all and (max-width: 639px) {
  .puton figure {
    width: 180px;
    height: 180px;
  }
}

.puton.small figure {
  width: 200px;
  height: 200px;
}

.puton.small figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media all and (max-width: 639px) {
  .puton.small figure {
    width: 100px;
    height: 100px;
  }
}

.oops_01 {
  z-index: 1;
  opacity: 0;
}

.oops_01.on {
  -webkit-animation: oops_01 0.6s ease 1.2s forwards;
  animation: oops_01 0.6s ease 1.2s forwards;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

@-webkit-keyframes oops_01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes oops_01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.oops_02 {
  z-index: 1;
  opacity: 0;
}

.oops_02.on {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-animation: oops_02 0.6s ease-out 1.2s forwards;
  animation: oops_02 0.6s ease-out 1.2s forwards;
}

@-webkit-keyframes oops_02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes oops_02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.oops_03 {
  z-index: 1;
  opacity: 0;
}

.oops_03.on {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-animation: oops_03 0.6s ease-out 1.2s forwards;
  animation: oops_03 0.6s ease-out 1.2s forwards;
}

@-webkit-keyframes oops_03 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes oops_03 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sub-title{
font-size: 22px;
margin-bottom:20px ;
}
@media all and (max-width: 639px) {
  .sub-title{
    font-size: 18px;
    }
}

.pc-hidden{
  display: none;
}
@media all and (max-width: 639px) {
  .pc-hidden{
   display: block;
    }
}

@media all and (max-width: 639px) {
  .sp-left{
    display: inline-block;
    margin-left: 25%;
  }
}
/*# sourceMappingURL=basis.css.map */