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

body{
	margin: 0;
	background-color: #f6f5f0;
}

.sticky-container{
	margin: 0;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #f6f5f0;
}

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 0px;
		background-color: #f6f5f0;
		width: 100%;
		margin: 0 auto;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 50%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	

	.pc-box::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*background-color: rgba(0, 0, 0, 0.6);*/
		pointer-events: none;                /* クリック操作を裏の要素に通す */
		z-index: 1;
	}
	
	.pc-box__left{
		width: 80%;
	}
	
	.pc-box__left ul{
		padding: 0;
		list-style: none;
		display: flex;
		gap:10px 10px;
		flex-wrap: wrap;
	}
		
	.pc-box__left ul li{
		width: calc(33.3% - 10px);
	}
	
	.pc-box__left p{
		margin: 5% auto 0;
		font-family: "Montserrat", sans-serif;
		font-size: 3.3rem;
		font-weight: 600;
		line-height: 1.1;
		text-align: center;
		color: #282828;
		position: relative;
		z-index: 2;
	}
		
	.pc-box__left p span{
		margin: 0;
		font-family: "Montserrat", sans-serif;
		font-size: 1.6rem;
		font-weight: 400;
	}
	
	/* 通常時：すべての画像を暗く（不透明度を低く、または暗く）しておく */
		.pc-box__left ul li img {
			opacity: 0.15; /* かなり暗め（15%）にして黒背景に沈ませる */
			transition: opacity 0.5s ease; /* ふわっと切り替わるアニメーション */
		}

		/* アクティブ時：対応する画像だけを明るく（不透明度100%に）する */
		.pc-box__left ul li.active img {
			opacity: 1;
		}
		
	.wrapper{
		width: 35%;
		margin: 0;
		box-sizing: border-box;
		padding: 0 3%;
	}
}


/*---------- main-contents ----------*/

.main-contents{
	margin: 0 auto;
}

.contents-inner{
	margin: 0 auto;
	box-sizing: border-box;
	border: solid 1px #e2e1db;
}

.header-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	border-bottom: 1px solid #e2e1db;
}

.look-box{
	width: 20%;
	border-right: 1px solid #e2e1db;
}

.look-box img{
	box-sizing: border-box;
	padding: 20%;
}

.brand-title{
	width: 80%;
}

.logo-etre{
	width: 40%;
	margin: 0 auto;
}

.logo-adam{
	width: 60%;
	margin: 0 auto;
}

.logo-babylone{
	width: 56%;
	margin: 0 auto;
}

.header-bottom {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: space-between; /* 左右に分散配置 */
  border-bottom: 1px solid #e2e1db;
  background-color: #f7f6f2; /* 画像の背景色に合わせる場合 */
}

.staff-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  height: 50px;
  display: flex;
  align-items: center; /* テキストの上下中央揃え */
  padding-left: 15px; /* 左側の余白 */
}

.staff-title span {
 font-size: .8rem;
	margin-left: 3px;
}

.header-icons {
  display: flex;
  height: 60px; /* 全体の高さに合わせる */
}

.icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #d8d7d0; /* 縦の区切り線 */
  padding: 0 15px; /* アイコン左右の余白 */
  height: 100%;
}

.icon-item img {
  height: 24px; /* アイコンの大きさを調整 */
  width: auto;
}

.staff-board{
	padding: 0 5px;
}

.icon-item.staff-board img {
  height: 28px; /* 元の24pxから大きく調整（お好みのサイズに微調整してください） */
  width: auto;  /* アスペクト比を維持 */
	
}

.icon-item.instagram img {
  height: 30px; /* Instagramは元のサイズをキープ、またはお好みで調整 */
  width: auto;
}

/*---------- slide ----------*/
.slide{
	overflow: hidden;
}

.slide-inner{
	width: 90%;
	margin: 5% auto;
}


/* 1. Splide全体のデフォルトの余白を強制リセット */
.splide,
.splide__track {
	padding: 0 !important;
	margin: 0 !important;
}

/* 2. もし自前で左右の余白をコントロールしたい場合 */
.slide-inner.splide__track {
	width: 100%; /* 横幅いっぱいに広げる */
	margin: 0 auto;
}

/* 💡 スライド1枚を90%の大きさに指定 */
.splide__slide {
	width: 90% !important; 
}

/* 💡 前回の「全体を囲む枠」の横幅も100%に広げておきます */
.slide-inner.splide__track {
	width: 100%;
	margin: 0 auto;
}

/* 左右の矢印ボタン共通の設定 */
.splide__arrow {
	/* 💡 デフォルトの「真ん中」から、少し上に引っ張り上げます */
	/* パーセントの数値を小さくするほど、上に上がっていきます（例: 40%, 35%） */
	top: 45% !important; 
}

/* 左右の矢印ボタン共通の設定 */
.splide__arrow {
    /* 👇 背景色を白にする */
    background-color: #fff !important; 
    
    /* 👇 必要に応じて、矢印アイコン自体の色を暗い色にする（元の背景が暗い場合） */
    color: #333 !important; /* 💡 例：暗いグレー */
    
    /* 👇 もし背景を白にしても、矢印アイコンが暗い場合、この行は不要です */
}

/* 左右の矢印ボタン共通の設定 */
.splide__arrow {
    /* 👇 元のサイズ（デフォルトは約2rem）から、少し小さくします */
    /* お好みのサイズになるよう、数値を微調整してください（例: 1.8rem, 1.5rem） */
    width: 1.8rem !important; 
    height: 1.8rem !important;
}

/* 💡 もし、中の矢印アイコンが窮屈に見える場合 */
/* （デフォルトのSVGアイコンのサイズを調整する） */
.splide__arrow svg {
    /* 👇 矢印アイコン自体のフォントサイズを小さくする（例: 1rem） */
    font-size: 0.7rem !important;
    
    /* 👇 もしSVG自体にサイズ指定がある場合は、以下も試してみてください */
    /* width: 1.2rem !important;
       height: 1.2rem !important; */
}



/*---------- caption-container ----------*/

.caption-container{
	padding: 20px 16px 24px 16px;
	font-size: .8rem;
	line-height: 1.8;
}

.caption-container p{
	margin: 0;
}