@charset "utf-8";
/* CSS Document */
.content-top{
/*
	margin-top: 100px;
    background-color: #b7fff2;
*/
}
.main-img {
	background-image:url("../img/dog.jpg");
	background-size: 70%;
	height: 700px;
    background-position: right;
	background-repeat: no-repeat;
	z-index: -2;
    right: 0;
    position: relative;
}
/*
.main-img img{
    width: 100%;
    height: 800px;
}
*/
/*くり抜き文字（メインで使用）*/
.mv-lead {
    position: absolute;
    left: 0;
    top: calc(50% - 1.1em);
    width: 100%;
    padding: 0 7vw 1.3em;
    font-size: min(6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
}
.mv-lead.front {
  color: #fff;
    clip-path: polygon(27.6% 0, 100% 0%, 100% 100%, 33.6% 100%);
	/*	(23.6% 0): 左上隅の座標。x座標は横幅の23.6%、y座標は0*/
/*	(100% 0): 右上隅の座標。x座標は横幅の100%、y座標は0*/
/*	(100% 100%): 右下隅の座標。x座標は横幅の100%、y座標は高さの100%*/
/*	(23.6% 0): 左上隅の座標。x座標は横幅の23.6%、y座標は0*/
}
.mv-lead.back {
  color:  #000;
  z-index: -1;
}

/*くり抜き文字　コンテンツ１*/
.mv-lead_con1 {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 7vw 1.3em;
    font-size: min(6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
}
.mv-lead_con1.front {
	color: #9be0c8;
    clip-path: polygon(27.6% 0, 100% 0%, 100% 100%, 33.6% 100%);
	/*	(23.6% 0): 左上隅の座標。x座標は横幅の23.6%、y座標は0*/
/*	(100% 0): 右上隅の座標。x座標は横幅の100%、y座標は0*/
/*	(100% 100%): 右下隅の座標。x座標は横幅の100%、y座標は高さの100%*/
/*	(23.6% 0): 左上隅の座標。x座標は横幅の23.6%、y座標は0*/
}
.mv-lead_con1.back {
  color:  #000;
  z-index: -1;
}
/*dogの文字切り抜き*/
.bgClip {
  background-image:url("../img/dog.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
	width: 1100px;
    height: 200px;
	background-position: -17%;
    margin-top: 200px;
}
.bgClip p{
    font-size: 85px;
	font-weight: 900;
    line-height: 1;
}


.hero--deco-pc {
  position: absolute;
  left: 11vw;
  bottom: 32%;
  display: block;
  margin-right: 92px;
  width: 78%;
  max-width: 1410px;
  z-index: 3;
}

.hero--deco-pc .en svg {
  width: 100%;
  mask-image: url(../img/text-backstage.svg);
  mask-repeat: no-repeat;
  mask-position: 0% 100%;
  mask-size: contain;
  -webkit-mask-image: url(../img/text-backstage.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
  -webkit-mask-size: contain;
}

































/*画像が回る*/
.text-rotate {
	animation:rotate-z 2s linear infinite;
	-webkit-animation:rotate-z 20s linear infinite;
}
@keyframes rotate-z{
  0%{transform:rotateZ(0deg);}
  100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes rotate-x{
  0%{-webkit-transform:rotateZ(0deg);}
  100%{-webkit-transform:rotateZ(360deg);}
}



/*mask-image 背景画像に設定している*/
.mskImg-anime{
      position: relative;
      width: 500px;
      height: 100px;
      overflow: hidden;
}

.mskImg-anime img {
      width: 100%;
      height: auto;
      display: block;
      clip-path: polygon(23.6% 0, 100% 0, 100% 100%, 23.6% 100%);
}
.icon_blue {
    animation-name: moveLandam;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 10s;
}
.icon {
      position: absolute;
      top: 50%; /* アイコンを垂直方向中央に配置 */
      left: 50%; /* アイコンを水平方向中央に配置 */
      transform: translate(-50%, -50%); /* アイコンを中央に配置するためのトランスレート */
      animation: moveIcon 2s linear infinite; /* アイコンのアニメーション */
    }

@keyframes moveIcon {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

.bgClip_blue{
  background-image:url("../img/dog.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
	width: 500px;
    height: 200px;
	background-position: -17%;
}
.bgClip_blue p{
    font-size: 50px;
	font-weight: 900;
    line-height: 1;
}
.bgClip_blue-test{
  background-image:url("../img/dog.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
	width: 500px;
    height: 200px;
	background-position: -17%;
}
.bgClip_blue-test p{
    font-size: 50px;
	font-weight: 900;
    line-height: 1;
}
.icon_blue-test {
    animation-name: moveLandam;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 10s;
}







/*mask-image 背景画像に設定している*/
.mskImg {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.mskImg img {
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../img/owan.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 50%;
  width: 100%;
  height: auto;
  display: block;
  mask-image: url('../img/owan.png'); /* マスク画像のパスを指定 */
  mask-mode: alpha; /* マスク画像のアルファチャンネルを使用 */
  width: 300px;
  height: 200px;
}
.clipImg1 {
  overflow: hidden;
  border-radius: 50%;
}
.clipImg1 img{
	clip-path: circle(120px at center);
}


/*お画像椀*/
.owan path{
	stroke: black; /* 線の色 */
	stroke-width: 2px;/* 線の太さ */
}
/*clip-path:url(#clip_id)*/
.mask-img-owan {
 mask-image: url("../img/dog.jpg");
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 50%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../imgdog.jpg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 50%;
}


.gradient-text_inner {
  background-image: linear-gradient(to right, #d83819, #E2CC28, #57DB51);
  /* テキストでマスク */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}




.about-svg-test path {
	fill: black;/* 塗りの色 */
	stroke: black; /* 線の色 */
	stroke-width: .1px;/* 線の太さ */
	animation: svg-anime 5s ease-in;
}
@keyframes svg-anime {
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  90% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  100%{
    fill: black;
  }
  }
.about-svg-3-path{
	fill:none;
	stroke:#FFFFFF;
	stroke-width:6.5;
	stroke-miterlimit:50;
}
.font-en.en.anime-scale-y-delay5 {
    height: 200px;
}
/*
.hero--deco-pc  {
  position: absolute;
  left: 11vw;
  bottom: 0;
  display: block;
  width: 100%;
  max-width: 1410px;
  z-index: 3;
}
.hero--deco-pc .en svg {
  width: 100%;
  mask-image: url(../img/text-backstage.svg);
  mask-repeat:no-repeat;
  mask-position: 0% 100%;
  mask-size:contain;
  -webkit-mask-image: url(../img/text-backstage.svg);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position: 0 100%;
  -webkit-mask-size:contain;
}
*/

path#text-backstage\.svg {
    stroke: #d72828; /* 線の色 */
    stroke-width: 10px;/* 線の太さ */
	fill:#fff;/* 塗りの色 */
    position: relative;
    z-index: 10;
}
.hero--deco-pc.section-ttl.sp-none {
    position: relative;
    z-index: 10;
}
.active .anime-scale-y-delay5 {
    animation-name: ScaleUpY;
    animation-duration: 0.7s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
}
@keyframes ScaleUpY {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
/*ブルーの円　ゆっくり*/
.blue_move {
    animation-name: moveLandam;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 10s;
}
@keyframes moveLandam {
  0% {
    transform: translate(-50%, -100%);
  }
  10% {
    transform: translate(-30%, 0%);
  }
  20% {
    transform: translate(-20%, 100%);
  }
  30% {
    transform: translate(-10%, 0);
  }
  40% {
    transform: translate(0%, -100%);
  }
  50% {
    transform: translate(20%, 0);
  }
  60% {
    transform: translate(40%, 100%);
  }
  70% {
    transform: translate(60%, 0);
  }
  80% {
    transform: translate(80%, -100%);
  }
  90% {
    transform: translate(90%, 0);
  }
  100% {
    transform: translate(100%, 100%);
  }
}
/*ブルーの円　早い*/
.blue_move2 {
  animation-name: moveLandam2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 15s;
}
@keyframes moveLandam2 {
  0% {
    transform: translate(100%, -100%);
  }
  10% {
    transform: translate(90%, 0);
  }
  20% {
    transform: translate(80%, -100%);
  }
  30% {
    transform: translate(70%, 0);
  }
  40% {
    transform: translate(60%, 100%);
  }
  50% {
    transform: translate(50%, 0);
  }
  60% {
    transform: translate(40%, -100%);
  }
  70% {
    transform: translate(20%, 0);
  }
  80% {
    transform: translate(10%, 100%);
  }
  90% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(-20%, -100%);
  }
}
.moyo_move-pink{
    animation-name: moveLandam;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 15s;
}
.moyo_move-pink{
  animation-name:moyo_move-pink;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: relative;
}
@keyframes moyo_move-pink {
  0% { top: 10%; left: 0; opacity: 1;}
  15% { left: 10%; }
/*  40% { left: 30%; }*/
  68%, 72% { top: 5%; opacity: 0.3;}
  68%, 72% { left: 5%; opacity: 1;}
  100% { left: 10%; }
/*  100% { top: 100px; left: 100%; }*/
}
.moyo_move-pink img{
	width: 200px;
	height: auto;

}
.moyo_move-blue{
  animation-name: moyo_move-blue;
  animation-duration: 15s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: relative;
	left: 20%;
}
@keyframes moyo_move-blue {
  0% {
    transform: translate(0%, -0%);
  }
  10% {
    transform: translate(10%, 0);
  }
  20% {
    transform: translate(80%, -100%);
  }
  30% {
    transform: translate(70%, 0);
  }
  40% {
    transform: translate(60%, 100%);
  }
  50% {
    transform: translate(50%, 0);
  }
  60% {
    transform: translate(40%, -50%);
  }
  70% {
    transform: translate(20%, 0);
  }
  80% {
    transform: translate(10%, 0%);
  }
  90% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(0%, -20%);
  }
}
.moyo_move-blue img{
	width: 200px;
	height: auto;

}
.moyo_move-green{
  animation-name: moyo_move-green;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: relative;
}
@keyframes moyo_move-green {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
/*  68%, 72% { left: 50px; }*/
  100% { top: 100px; }
/*  100% { top: 100px; left: 100%; }*/
}
.moyo_move-green img{
	width: 200px;
	height: auto;
    top: 20%;
    margin-top: -26%;
}
.moyo_move-orange{
	animation: poyoyon2 10s ease-in-out infinite;
}
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
.moyo_move-orange img{
	width: 500px;
	height: auto;
	margin-left: 50%;
	margin-top: -50%;
}
.moyo_move-owan{
	animation: poyoyon2 10s ease-in-out infinite;
    width: 200px;
    position: absolute;
    z-index: 1;
    top: 71%;
    left: 7%;
}
p.owan {
    position: absolute;
    top: 80%;
    z-index: 3;
    left: 13%;
    width: 45%;
}
.moyo_move-orange2{
	animation: poyoyon3 8.5s infinite;
	opacity: 1;
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
.moyo_move-orange2 img{
	width: 200px;
	height: auto;
    margin-top: -16%;
	margin-left: 20%;
}
.moyo_move-pink2{
	 animation: kurukuru 8s ease-out infinite;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0.5;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}
.moyo_move-pink2 img{
	width: 200px;
	height: auto;
    margin-top: -10%;
	margin-left: 50%;
}