@charset "utf-8";

/* *****************************
 * SiteCommerce 簡易アニメ
 * **************************** */
:root {
	--trantime-1: 0.3s;
	--trantime-2: 0.5s;
	--trantime-3: 0.7s;

	--delaytime-0: 0s;
	--delaytime-1: 0.5s;
	--delaytime-2: 1s;
	--delaytime-3: 3s;
	--delaytime-4: 4s;
	--delaytime-5: 5s;
	--delaytime-6: 6s;
	--delaytime-7: 7s;
	--delaytime-8: 8s;
	--delaytime-9: 9s;
	
	--trantime: var(--trantime-1);
	--delaytime: var(--delaytime-0);
	
	--transit-ease: ease;
	--transit-easeout: ease-out;
	--transit-quickease: cubic-bezier(1, 0, 0, 1); /* easeInOutExpo */
	--transit-quickeasein: cubic-bezier(0.95, 0.05, 0.795, 0.035); /* easeInExpo */
	--transit-quickeaseout: cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
	
	--transit: var(--transit-quickease);
}

.transit {
	/* transition: all var(--trantime) ease-out var(--delaytime);*/
	transition-behavior: normal;
    transition-duration: var(--trantime);
    transition-timing-function: var(--transit);
    transition-delay: var(--delaytime);
    transition-property: all;
}

.transit-ease {	
	--transit: var(--transit-ease);
}

.transit-easeout {	
	--transit: var(--transit-easeout);
}

.transit-quickease {	
	--transit: var(--transit-quickease);
}

.transit-quickeasein {	
	--transit: var(--transit-quickeasein);
}

.transit-quickeaseout {	
	--transit: var(--transit-quickeaseout);
}

.transit > * {
	/* transition: all var(--trantime) ease-out var(--delaytime);*/
	transition-behavior: normal;
    transition-duration: var(--trantime);
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
    transition-delay: var(--delaytime);
    transition-property: all;
}

.transit > .next {
	right:1rem;
	top:50%;

	position: absolute;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: none;
    background-color: rgba(var(--bd-col), 0.8);
	cursor: pointer;
}

.transit > .prev {
	left:1rem;
	top:50%;

	position: absolute;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: none;
    background-color: rgba(var(--bd-col), 0.8);
	cursor: pointer;

}

.transit > .next::after {
	content: "";
    position: absolute;
    width: 30%;
    left: 50%;
    top: 50%;
    aspect-ratio: cos(30deg);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: rgba(var(--bg-col), 0.8);
    transform: translate(-50%, -50%);
}

.transit > .prev::after {
	content: "";
    position: absolute;
    width: 30%;
    left: 50%;
    top: 50%;
    aspect-ratio: cos(30deg);
    clip-path: polygon(100% 0, 0% 50%, 100% 100%);
    background-color: rgba(var(--bg-col), 0.8);
    transform: translate(-50%, -50%);
}

.transit > .marker .point {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: solid 1px rgba(var(--bd-col), 0.8);
	cursor: pointer;
}

.transit > .marker .point.current {
	background: rgba(var(--bg-col), 0.8);
}

.transit-1 {
	--trantime: var(--trantime-1);	
}
.transit-2 {
	--trantime: var(--trantime-2);	
}
.transit-3 {
	--trantime: var(--trantime-3);	
}

.delay-0 {
	--delaytime: var(--delaytime-0);	
}
.delay-1 {
	--delaytime: var(--delaytime-1);	
}
.delay-2 {
	--delaytime: var(--delaytime-2);	
}
.delay-3 {
	--delaytime: var(--delaytime-3);	
}
.delay-4 {
	--delaytime: var(--delaytime-4);	
}
.delay-5 {
	--delaytime: var(--delaytime-5);	
}
.delay-6 {
	--delaytime: var(--delaytime-6);	
}
.delay-7 {
	--delaytime: var(--delaytime-7);	
}
.delay-8 {
	--delaytime: var(--delaytime-8);	
}
.delay-9 {
	--delaytime: var(--delaytime-9);	
}

/* 単純なフェードイン */
.transit.fadein {
	opacity: 0;	
}
.transit.fadein.on {
	opacity: inherit;	
}

/* 単純なズームイン */
.transit.zoomin {
	transform: scale(1.5, 1.5);	
}
.transit.zoomin.on {
	transform: scale(1, 1);	
}

/* 単純なローテートイン */
.transit.rotatein {
	transform: rotate(-45deg);	
}
.transit.rotatein.on {
	transform: rotate(0deg);	
}

/* 単純なズームローテートイン */
.transit.zoomrotatein {
	transform: rotate(-45deg) scale(1.5, 1.5);
}
.transit.zoomrotatein.on {
	transform: rotate(0deg) scale(1, 1);	
}

/* 単純なふわっと下から現れる */
.transit.slideup {
	opacity: 0;	
	transform: translateY(3rem);
}
.transit.slideup.on {
	opacity: inherit;	
	transform: translateY(0);
}

/* 単純なタイピング */
.transit.typing > * {
	transition-behavior: normal;
    transition-duration: var(--trantime);
    transition-timing-function: var(--transit);
    transition-delay: calc(var(--index) + var(--delaytime));
    transition-property: all;

	opacity: 0;	
	transform: translateX(1em) scale(2);
}

.transit.typing.on > * {
	opacity: inherit;	
	transform: translateX(0) scale(1);
}

/* 単純なふわっと右から現れる */
.transit.slideleft {
	opacity: 0;	
	transform: translateX(3rem);
}
.transit.slideleft.on {
	opacity: inherit;	
	transform: translateX(0);
}

/* 単純な伸縮状態から広がる */
.transit.accordion {
	opacity: 0;	
	transform:scaleX(0);
}
.transit.accordion.on {
	opacity: inherit;	
	transform: scaleX(100%);
}


/* ********************
 * afterで処理する単純アニメ 
 * ******************** */

.transit-after::after {
	/* transition: all var(--trantime) ease-out var(--delaytime);*/
	transition-behavior: normal;
    transition-duration: var(--trantime);
    transition-timing-function: var(--transit);
    transition-delay: var(--delaytime);
    transition-property: all;
}

/* after:下線アニメ */
.transit-after.line::after {
	content: '';
	position: absolute; 
	width: 100%; /* 線の幅 */
	height: 2px; /* 線の高さ */
	background-color: rgb(var(--bd-col));
	bottom: 0; /* 線の位置 */
	left: 0; /* 線の位置 */
	transform: scale(0,1); /* 線のx軸の長さを0 */
	transform-origin: left top; /* 要素の座標の原点を設定*/
}

.transit-after.line.on::after {
	transform: scale(1,1); /* 線のx軸の長さを1 */
}

/* after:下線アニメ */
.transit-after.grain::after {
	content: '';
	display:block;
	position: absolute;
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
	opacity: .25;
	background-image: 
		repeating-conic-gradient(rgb(var(--bg-col)) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
		repeating-conic-gradient(rgb(var(--bg-col)) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
	animation: grain-anim 0.5s steps(1) infinite;
	filter: drop-shadow(0px 0px 1px rgb(var(--bg-col)));
	/*mix-blend-mode: color;*/
}

@keyframes grain-anim {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-2%, -2%); }
  40% { transform: translate(3%, 3%); }
  50% { transform: translate(-3%, -3%); }
  60% { transform: translate(4%, 4%); }
  70% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-3%, -3%); }
}

/* ********************
 * 子要素をアニメーション 
 * ******************** */
.transit > .slider {
	transform: translateY(100%);
	opacity: 0;
}

.transit > .slider.play {
	transform: translateY(0%);
	opacity: 1;
}

.transit > .skew {
	transform: skew(10deg, 10deg);
	opacity: 0;
}

.transit > .skew.play {
	transform: skew(0deg, 0deg);
	opacity: 1;
}

.transit > .slide {
	transform: translate(100%, 0);
	opacity: 0;
}

.transit > .slide.play {
	transform: translate(0, 0);
	opacity: 1;
}

.transit > .slide.post {
	transform: translate(-100%, 0);
	opacity: 0;
}

/*
.slideright {
	margin-left: 3% !important;
	opacity: 0;
}

.slideright.play {
	margin-left: 0% !important;
	opacity:inherit;
}

.slideleft {
	margin-right: 3% !important;
	opacity: 0;
}

.slideleft.play {
	margin-right: 0% !important;
	opacity:inherit;
}
*/

.telop {
  text-align: right;
}
.telop > * {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation-name: animTelop;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes animTelop {
  from    { transform: translate(0%); } 
  100%,to { transform: translate(-100%); }
}

.telop-up {
	position:relative;
}
.telop-up > *, .telop-up::before{
	/*position:absolute;
	top:0;
	left:0;
*/
	animation-name: animTelopUP;
	animation-duration: 0.5s;
	animation-timing-function: linear;
}
@keyframes animTelopUP {
	0% { 
		opacity: 0;
		transform: translate(0, 100%); 
	}
	70% {
		opacity: 1;
		transform: translate(0, 20%); 
	}
	100% {
		transform: translate(0, 0); 
	}
}

.zoom.hidding {
	opacity:0;
	transform: rotate3d(1, 1, 1, -8deg); 
}
.zoom {
	opacity:var(--opa);
	transform: rotate3d(1, 1, 1, 0deg); 
	transition: all 0.3s ease-out 0.5s;
}

.fadein.out {
	animation-name: fadeOut;
	animation-duration: .5s;
	animation-timing-function:ease-in;
	animation-fill-mode: forwards;
	animation-delay: 7s;
}
@keyframes fadeOut {
	0% { 
		opacity:0;
	}

	100% {
		opacity:1;
	}
}

.shutter .open {
	height:0px;
	animation-name: shutterOpen;
	animation-duration: 5s;
	animation-timing-function:ease-in;
	animation-iteration-count: infinite;
	animation-direction:normal;
}
@keyframes shutterOpen {
	0% { 
		opacity:0;
		height: 0;
	}

	45% {
		opacity:0;
		height: 0;
	}

	50% {
		opacity:1;
		height: 100%;
	}
	
	95% {
		opacity:1;
		height: 100%;
	}

	100% {
		opacity:0;
		height: 0%;
	}
}

/* *****************************
 * SiteCommerce アニメスタイル
 * **************************** */

.animation .fadein {
	visibility:visible;
	animation: animFadeIn 2s ease-out;
}
.animation .zoomin {
	visibility:visible;
	animation: animZoomIn 1s ease-out;
}

.animation .slidein {
	visibility:visible;
	animation: animSlideIn 0.3s ease-in;
}
.animation .slideout {
	animation: animSlideOut 0.3s ease-in;
}

.animation .slidein-y {
	visibility:visible;
	animation: animSlideInY 1s ease-out;
}

.animation .slideup {
	visibility:visible;
	animation: animSlideUp .5s ease-out;
}

.animation .slidedown {
	visibility:visible;
	animation: animSlideDown .5s ease-out;
}

.animation .rollup {
	visibility:visible;
	animation: animRollUp 1s ease-out;
}

.animation .scroll.slideup {
	visibility:visible;
	
	animation: animSlideUp ease-out;
	animation-timeline: scroll();
}


:root {
	--roll:0%;
}

.roll-0 {
	--roll:0%
}
.roll-5 {
	--roll:-5%;
}
.roll-10 {
	--roll:-10%;
}
.roll-15 {
	--roll:-15%;
}
.roll-20 {
	--roll:-20%;
}
.roll-25 {
	--roll:-25%;
}
.roll-30 {
	--roll:-30%;
}
.roll-40 {
	--roll:-40%;
}
.roll-50 {
	--roll:-50%;
}
.roll-60 {
	--roll:-60%;
}
.roll-70 {
	--roll:-70%;
}
.roll-80 {
	--roll:-80%;
}
.roll-90 {
	--roll:-90%;
}
.roll-100 {
	--roll:-100%;
}

.animation .roll {

	transform: translateY(var(--roll));
    transition: transform .7s ease-out;
}

@keyframes animFadeIn {
	0% {
    	/*transform: scale(1.5);*/
    	opacity: 0;
	}
	
	100% {
    	/*transform: scale(1.2);*/
    	opacity: 1;
	}
	
}

@keyframes animSlideIn {
	0% {
    	transform: translateX(100%);
	}
	/*
	50% {
    	transform: translateX(70%);
	}
	*/
	100% {
    	transform: translateX(0%);
	}
	
}

@keyframes animSlideInY {
	0% {
		margin-top: 3em;
   		/*transform: translateY(0%);*/
	}
	/*
	50% {
    	transform: translateX(70%);
	}
	*/
	100% {
		margin-top: 0;
    	/*transform: translateY(-100%);*/
	}
	
}

@keyframes animSlideOut {
	0% {
		visibility:visible;
    	transform: translateX(0%);
	}
	/*
	50% {
    	transform: translateX(-30%);
	}*/
	
	100% {
    	transform: translateX(-100%);
    	visibility: hidden;
	}
	
}

@keyframes animZoomIn {
	0% {
    	transform: scale(3.0);
	}
	
	100% {
    	transform: scale(1.0);
	}
	
}

@keyframes animSlideUp {
	0% {
    	transform: translateY(100%);
	}
	
	100% {
    	transform: translateY(0%);
	}
	
}

@keyframes animSlideDown {
	0% {
    	transform: translateY(-100%);
	}
	
	100% {
    	transform: translateY(0%);
	}
	
}

@keyframes animRollUp {
	0% {
    	transform: translateY(0%);
	}
	
	100% {
    	transform: translateY(-50%);
	}
	
}

.animation .slideflow {
  animation: animSlideFlow 30s infinite linear 1s both;
}

@keyframes animSlideFlow {
	0% {
		 transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}