@charset "utf-8";
/* CSS Document */


/* 全てに適用するCSS */
p
{
	color: #000 ;	/* 黒色 */
	font:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace ;
	
	position: relative;
	
}  

p.codeorice-pc{
font-size:25px;
line-height: 90px;

}







/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


a {
  color: black;
}

.clear3 {
clear:both;
height:60px;
}






/*　　コレクションメイン画像アニメーション    */

.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #272f3d;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}








/* ウィンドウ幅が0〜896pxの場合に適用するCSS */
@media screen and ( max-width:896px )
{
	
	
img {
width:100%;
max-width: 100%;
height: auto;
}



/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.pc { display: none !important; }
.sp { display: block !important; }



p.codeorice{
font-size:13px;
line-height: 20px;


}



a {
  color: black;
}


/* 点滅 */


.blink {
	-webkit-animation: blink 1s ease infinite;
	animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*　　コレクションメイン画像アニメーション    */

.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #272f3d;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}





}