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


/* ▼▼▼▼▼▼▼▼▼▼ スマートフォン ▼▼▼▼▼▼▼▼▼▼ */

/* -------------------------------------------------- SP toppage */

.fib {font-weight: 300;}
h3, h4, .menu {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fib h3 {
	font-size: clamp(20px, 3vw, 24px);
	color: #333;
}


 /*=== 画像の表示エリア ================================= */
.slide {
	position   : relative;
	overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
	width      : 100%;
	aspect-ratio: 32 / 11;
    object-fit: cover;
	margin     : auto;      /* サンプルは中央寄せの背景：白 */
	background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 15s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 5s }
.slide img:nth-of-type(3) { animation-delay: 10s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   16% { opacity: 1 }
  33% { opacity: 1 }
  49% { opacity: 0 }
 100% { opacity: 0 }
}

.fib .about {text-align: center;}
.fib .about h2 {text-align:center;}
.fib .about h2 img {
	width: 20%;
	max-width: 200px;
	min-width: 110px;
}
.fib .about h3 {text-align:center;}
.fib .about p {
	display: block;
	width: 85%;
	max-width: 500px;
	text-align: left;
	margin: auto;
}


.italian-color-inner {
	width: 100%;
	max-width: 1300px;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
}
.italian-color-image {
	width: 80%;
	aspect-ratio: 200 / 211;
	position: relative;
	margin: auto auto 2rem auto;
}
.italian-color-image .img01 {
	width: 88%;
	position: absolute;
	top: 0;
	left: 0;
}
.italian-color-image .img02 {
	width: 73%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.italian-color-read {
	width: 85%;
	margin: 0 auto;
	padding: 0;

}


.italian-color-inner2 {
	width: 100%;
	max-width: 1300px;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	flex-direction: row-reverse;
}
.italian-color-image2 {
	width: 80%;
	aspect-ratio: 43 / 41;
	position: relative;
	margin: auto auto 2rem auto;
}
.italian-color-image2 .img03 {
	width: 87.2%;
	position: absolute;
	top: 0;
	right: 0;
}
.italian-color-image2 .img04 {
	width: 87.2%;
	position: absolute;
	bottom: 0;
	left: 0;
}
.italian-color-read2 {
	width: 85%;
	margin: 0 auto;
	padding: 0;
}





.muzicavita-product h3 {text-align:center;}
.muzicavita-product .read {
	width: 85%;
	max-width: 600px;
	margin: auto auto 1rem;
}
.muzicavita-product .product ul {
	width: 100%;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	margin: auto;
}
.muzicavita-product .product ul li {
	width: 50%;
	max-width: 190px;
	padding: .5rem;
	margin-bottom: 1rem;
}
.muzicavita-product .product ul li > p {width: 100%;}





/* ▼▼▼▼▼▼▼▼▼▼ タブレット ▼▼▼▼▼▼▼▼▼▼ */
@media screen and (min-width: 680px) {

	.italian-color-image {
		width: 60%;
	}
	.italian-color-read {
		width: 40%;
		padding-left: 7%;
		padding-top: 3%;
		padding-right: 1rem;
	}
	
	.italian-color-image2 {
		width: 55%;
	}
	.italian-color-read2 {
		width:45%;
		padding-right: 7%;
		padding-top: 3%;
		padding-left: 1rem;
	}

/* ▲▲▲▲▲▲▲▲▲▲ タブレット ▲▲▲▲▲▲▲▲▲▲ */
}



/* ▼▼▼▼▼▼▼▼▼▼ PC ▼▼▼▼▼▼▼▼▼▼ */

@media screen and (min-width: 960px){
	

	

/* ▲▲▲▲▲▲▲▲▲▲ PC ▲▲▲▲▲▲▲▲▲▲ */
}

/* ▲▲▲▲▲▲▲▲▲▲ 調整 ▲▲▲▲▲▲▲▲▲▲ */
@media screen and (min-width: 1300px){


/* ▲▲▲▲▲▲▲▲▲▲ 調整 ▲▲▲▲▲▲▲▲▲▲ */
}