@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
画面遷移時にフワッとフェードインでページ全体を表示させる
---------------------------------------------------------------------------------------------------------------------
*/
#page-container {
  opacity: 0; }

#sub-area {
  opacity: 0; }

#page-content {
  opacity: 0; }

#post-type1 {
  opacity: 0; }

#asayama {
  opacity: 0; }

.display {
  animation: fadeIn 1s linear;
  animation-fill-mode: both; }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.isOpen {
  animation: fadeIn 1s linear;
  animation-fill-mode: both; }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.Border {
  position: relative;
  z-index: 1; }
  .Border:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 16px;
    background: #DCA541;
    z-index: -1;
    transition: all 0.8s; }
    @media (min-width: 1024px) {
      .Border:after {
        height: 20px; } }
    @media (min-width: 1250px) {
      .Border:after {
        height: 26px; } }
  .Border.isActive:after {
    width: 100%; }

.Border2 {
  position: relative;
  z-index: 1; }
  .Border2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 20px;
    background: #DCA541;
    z-index: -1;
    transition: all 0.8s; }
    @media (min-width: 1024px) {
      .Border2:after {
        bottom: -6px; } }
  .Border2.isActive:after {
    width: 100%; }

.Border3 {
  position: relative;
  z-index: 1; }
  .Border3:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 16px;
    background: #DCA541;
    z-index: -1;
    transition: all 0.8s; }
    @media (min-width: 1024px) {
      .Border3:after {
        height: 20px; } }
    @media (min-width: 1250px) {
      .Border3:after {
        height: 26px; } }
  .Border3.isActive:after {
    width: 100%; }

.Border4 {
  position: relative;
  z-index: 1; }
  .Border4:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 16px;
    background: #DCA541;
    z-index: -1;
    transition: all 0.8s; }
    @media (min-width: 1024px) {
      .Border4:after {
        height: 20px; } }
    @media (min-width: 1250px) {
      .Border4:after {
        height: 26px; } }
  .Border4.isActive:after {
    width: 100%; }

/*========= 全共通 ===============*/
.slide-in {
  overflow: hidden;
  display: inline-block; }

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

/*==================================================
8-1 ランダムにテキスト出現する
===================================*/
.TextRandomAnime span {
  opacity: 0; }

.TextRandomAnime.appearRandomtext span {
  animation: text_randomanime_on .5s ease-out forwards; }

/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.TextRandomAnime.appearRandomtext span:nth-child(2n) {
  animation-delay: .8s;
  /* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/ }

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
  animation-delay: .35s;
  /* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/ }

/*========= 8-2 左右のアニメーション ===============*/
.leftAnime, .leftAnime01, .leftAnime05, .leftAnime10, .leftAnime15, .leftAnime20, .leftAnime25, .leftAnime30 {
  opacity: 0; }

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

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
/* 8-4 上下のアニメーション*/
.upAnime, .upAnime05, .upAnime10, .upAnime15, .upAnime20, .upAnime25, .upAnime30, .upAnime35, .upAnime40, .upAnime60 {
  opacity: 0; }

/* 8-5 上下のアニメーション*/
.downAnime, .downAnime1, .downAnime2, .downAnime3, .downAnimeA, .downAnimeB {
  opacity: 0; }

.slideAnimeDownUp {
  animation-name: slideTextY100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextY100 {
  from {
    transform: translateY(100%);
    /* 要素を上の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /* 要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeUpDown {
  animation-name: slideTextY-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextY-100 {
  from {
    transform: translateY(-100%);
    /* 要素を下の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /* 要素を元の位置に移動*/
    opacity: 1; } }
.box4-12 {
  opacity: 0; }

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeUpOne {
  animation-name: fadeUpAnimeOne;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnimeOne {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.box4-12-2 {
  opacity: 0; }

.fadeUp2 {
  animation-name: fadeUpAnime2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(0px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*==================================================
8-9 じわっ
===================================*/
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0; }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1; } }
.blurTrigger, .blurTrigger05, .blurTrigger10, .blurTrigger15, .blurTrigger20, .blurTrigger25, .blurTrigger30 {
  opacity: 0; }

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

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

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

.bgLRextendWatch::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  background: linear-gradient(90deg, #F98924, #FF14A4); }

.bgLRextendNext::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  background: linear-gradient(90deg, #24F9C0, #B714FF); }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger, .bgLRextendTrigger1, .bgLRextendTrigger2 {
  opacity: 0; }

/*========= 8-16 テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
  overflow: hidden;
  display: block; }

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger, span.smoothTextTrigger01, span.smoothTextTrigger05, span.smoothTextTrigger10 {
  transition: .8s ease-in-out;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left;
  display: block; }

span.smoothTextTrigger.smoothTextAppear, span.smoothTextTrigger01.smoothTextAppear, span.smoothTextTrigger05.smoothTextAppear, span.smoothTextTrigger10.smoothTextAppear {
  transform: translate3d(0, 0, 0) skewY(0); }

/*========= 8-17 光りながら出現させるためのCSS ===============*/
.glowAnime span, .glowAnime10 span, .glowAnime15 span, .glowAnime20 span {
  opacity: 0; }

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span, .glowAnime10.glow span, .glowAnime15.glow span, .glowAnime20.glow span {
  animation: glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #F1FF4E,0 0 0 #F1FF4E; }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #F1FF4E,0 0 15px #F1FF4E; }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #F1FF4E,0 0 0 #F1FF4E; } }
/*==================================================
   7 画像リンクの動き
===================================*/
span.mask {
  display: block;
  /*画像をくくるspanタグをブロック要素にする*/
  overflow: hidden;
  /*はみ出ているものを隠す*/
  border-radius: 10px; }

/*　7-9 波紋　*/
.circle span.mask {
  position: relative;
  border-radius: 10px; }

.circle span.mask::before {
  position: absolute;
  content: '';
  transform: scale(0);
  /*円の大きさ初期値は0*/
  opacity: 0;
  /*透過0*/
  width: 100%;
  /*円のサイズ指定*/
  height: 100%;
  /*円のサイズ指定*/
  border-radius: 50%;
  /*円の角丸指定*/
  background: rgba(255, 255, 255, 0.3);
  /*円の背景色*/ }

.circle span.mask:hover::before {
  /*hoverした時の変化*/
  animation: circle 0.75s; }

@keyframes circle {
  0% {
    transform: scale(0);
    opacity: 1;
    /*透過なし*/ }
  30% {
    opacity: 1; }
  100% {
    transform: scale(2); } }
/*========= 8-7 くるくる回るテキスト ===============*/
.rollAnime.roll span {
  transition-property: opacity,transform;
  transform: rotateY(360deg);
  transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  display: inline-block; }

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

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgLRextendTrigger,
.bgappearTrigger,
.fadeUpTrigger,
.flipLeftTrigger, .flipLeftTrigger2 {
  opacity: 0; }

/* 4-4 ボンッ（拡大） */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
@keyframes bounceInUp2 {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
.bounceInUp2 {
  animation-name: bounceInUp2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

.border-anime:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  border: 20px solid #fff;
  border-image-slice: 1;
  animation: border_anim 0.5s linear forwards;
  transition-timing-function: ease-out;
  z-index: -10; }
  @media (min-width: 768px) {
    .border-anime:before {
      border: 35px solid #fff; } }
  @media (min-width: 1024px) {
    .border-anime:before {
      border: 50px solid #fff; } }
  @media (min-width: 1700px) {
    .border-anime:before {
      border: 56px solid #fff; } }

@keyframes border_anim {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }