@charset "utf-8";

/* keyvisual ------------ */
/*https://www.bring-flower.com/blog/slideshow/*/

.img-frame{
	container: layout inline-size;
	position: relative;
	width: 100%;
	height: 490px;
	overflow: hidden;
	margin: 0 auto;
}
@container  (max-width: 767px){
	.img-frame{
		width: 100%;
		height: 200px;
	}
}
.img-01,.img-02,.img-03,
.img-04,.img-05,.img-06 {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

.img-01{
	background-image: url(/images/keyvisual/pc/home_01.webp);
	background-image: image-set(url(/images/keyvisual/pc/home_01.webp) 1x, url(/images/keyvisual/pc/home_01@2x.webp) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_01.webp) 1x, url(/images/keyvisual/pc/home_01@2x.webp) 2x);
	animation: slide-animation-01 48s infinite;
}
.img-02{
	background-image: url(/images/keyvisual/pc/home_02.webp);
	background-image: image-set(url(/images/keyvisual/pc/home_02.webp) 1x, url(/images/keyvisual/pc/home_02@2x.webp) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_02.webp) 1x, url(/images/keyvisual/pc/home_02@2x.webp) 2x);
	animation: slide-animation-02 48s infinite;
}
.img-03{
	background-image: url(/images/keyvisual/pc/home_03.webp);
	background-image: image-set(url(/images/keyvisual/pc/home_03.webp) 1x, url(/images/keyvisual/pc/home_03@2x.webp) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_03.webp) 1x, url(/images/keyvisual/pc/home_03@2x.webp) 2x);
	animation: slide-animation-03 48s infinite;
}
.img-04{
	background-image: url(/images/keyvisual/pc/home_04.webp);
	background-image: image-set(url(/assets/images/keyvisual/pc/home_04.webp) 1x, url(/images/keyvisual/pc/home_04@2x.webp) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_04.webp) 1x, url(/assets/images/keyvisual/pc/home_04@2x.webp) 2x);
	animation: slide-animation-04 48s infinite;
}
.img-05{
	background-image: url(/images/keyvisual/pc/home_05.webp);
	background-image: image-set(url(/images/keyvisual/pc/home_05.webp) 1x, url(/images/keyvisual/pc/home_05@2x.webp) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_05.webp) 1x, url(/images/keyvisual/pc/home_05@2x.webp) 2x);
	animation: slide-animation-05 48s infinite;
}
.img-06{
	background-image: url(/images/keyvisual/pc/home_06.webp);
	background-image: image-set(url(/images/keyvisual/pc/home_06.webp) 1x, url(/images/keyvisual/pc/home_06@2x.jpg) 2x);
	background-image: -webkit-image-set(url(/images/keyvisual/pc/home_06.webp) 1x, url(/images/keyvisual/pc/home_06@2x.webp) 2x);
	animation: slide-animation-06 48s infinite;
}

/* @keyframes slide-animation-01 {
	0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
} */
@keyframes slide-animation-01 {
  0% {opacity: 1; transform: scale(1.0);}
 10% {opacity: 1;}
 20% {opacity: 1; transform: scale(1.2);}
 30% {opacity: 0;}
 40% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes slide-animation-02 {
  0% {opacity: 0;}
 10% {opacity: 0; transform: scale(1.2);}
 20% {opacity: 1;}
 30% {opacity: 0; transform: scale(1.0);}
 40% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
  0% {opacity: 0;}
 20% {opacity: 0; transform: scale(1.0);}
 30% {opacity: 1;}
 40% {opacity: 0; transform: scale(1.2);}
 50% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-04 {
  0% {opacity: 0;}
 30% {opacity: 0; transform: scale(1.2);}
 40% {opacity: 1;}
 50% {opacity: 0; transform: scale(1.0);}
 60% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-05 {
  0% {opacity: 0;}
 40% {opacity: 0; transform: scale(1.0);}
 50% {opacity: 1;}
 60% {opacity: 0; transform: scale(1.2);}
 70% {opacity: 0;}
 80% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-06 {
  0% {opacity: 0;}
 50% {opacity: 0; transform: scale(1.2);}
 60% {opacity: 1;}
 70% {opacity: 0; transform: scale(1.0);}
 90% {opacity: 0;}
100% {opacity: 0;}
}

/* section--profile  ------------ */
.profile__img {
	text-align: center;
}
@container (min-width: 768px) {
	.profile__txt {
		padding: 20px;
	}
} /* profile */

/* works ------------ */
.works__list {
	container: layout inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px 0;
}
.works__item {
	border-radius: 10px;
	background: var(--white);
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 20px;
	width: 100%;
}
.works__item a {
	display: flex;
	gap:20px
}
.works_category {
		margin-top: 0;
}
.works__txt {
	width: 100%;
}

@container (min-width: 768px) {
.works__item {
	padding: 20px;
}
	.works__list {
		gap: 20px;
		margin-bottom: 40px;
	}
}/* min-width: 768px */

@container(width >= 0p) {
	h3 {font-size: 10cqw;}
	.works__item {width: 100cqw;}
}
.animation__section {
	height: 300px;
	z-index: 4000;
	overflow-x: hidden;
	position: absolute;
	width: 100%;
}
.works__item img {
	vertical-align: baseline;
}
@container (min-width: 768px) {
	.works__list a {
		display: flex;
		width: calc(50% - 10px);
		gap: 10px;
	}
}





/* activity ------------------ */
.activity__infobox{
	background-color: var(--white);
	padding: 20px;
	border-radius: 10px;
}
/*
https://www.bring-flower.com/blog/slideshow/
*/

.slide-container {
	container: layout inline-size;
	width: 100%;
	height: 200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.slide-wrapper {
	display: flex;
	animation: slide-flow 120s infinite linear 1s both;
}
.slide{
	width: 100%;
	object-fit: cover;
}

@container (min-width: 768px) {
	.slide-container {
		display: flex;
	}
	.slide-container {
		height: auto;
	}
	.slide-paused:hover .slide-wrapper {
		animation-play-state: paused;
	}
	.slide-paused:hover .slide-wrapper img:hover {
		opacity: .8;
	}
	.slide{
		border-right:2px solid var(--base_light);
	}
}

@keyframes slide-flow {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}
/* End activity ------------------ */

/* shop ------------------ */
.shopbnr{
	container: layout inline-size;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@container (min-width: 768px) {
	.shopbnr{
		flex-direction: row;
		gap: 20px;
		margin-bottom: 40px;
	}
}


/* 動くキャラクター ------------------------------- */
/*
transform: translate(x軸方向の移動距離, y軸方向の移動距離);
transform: translate(400px, 100px);
https://webst8.com/code/css-transform-translate/
*/
/* pig animation */
.pig {
	width: 75px;
}
.pig img {
	z-index: 10000;
}
.pig-animation {
	padding: 40px 0;
	width: 90%;
	animation: pig 30s linear infinite;
  transform: translate(95%, 40px);
}
@keyframes pig {
	50% {		transform: translate(0%, -50px);	}
	100% {		transform: rotateX(180);	}
}
@container (min-width: 768px) {
	.pig {
		width: 100px;
	}
	.pig-animation {
		animation: pig 100s linear infinite;
	}
}
/* pig animation */

/* dishboy animation */
.dishboy {
	width: 75px;
	z-index: 4000;
}
.dishboy-animation {
	padding: 40px 0;
	width: 90%;
	transform: translate(0, -50px);
	animation: dishboy 64s linear infinite;
}
@keyframes dishboy {
  50%  { transform: translate(100%, -30px);}
	100% {transform: rotateX(180);}
}
@container (min-width: 768px) {
	.dishboy {
		width: 100px;
		z-index: 10000;
	}
	.dishboy-animation {
		animation: dishboy 100s linear infinite;
	}
}
/* End dishboy animation */

/* sugarboy animation */
.sugarboy {
	width: 75px;
}

.sugarboy-animation {	
	padding: 60px 0;
	z-index: 4000;
  transform: translate(95%, 40px);
  animation: sugarboy 30s linear infinite;
}
@keyframes sugarboy {
	50% {		transform: translate(0%, -70px);	}
	100% {		transform: rotateX(180);	}
}
@container (min-width: 768px) {
	.sugarboy {
		width: 100px;
	}
	.sugarboy-animation {

		animation: sugarboy 60s linear infinite;
	}
}
/* End sugarboy animation */