@charset "UTF-8";


/* --------------------------------------------------------------------
　共通設定
-------------------------------------------------------------------- */
body{
width:100%;
overflow-x:hidden;
}
html{
scroll-behavior:smooth;
}

header#mikacatalog-header-wrap{
width:100%;
height:80px;
padding:60px 6.25%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
position:fixed;
transform:translateX(-50%);
top:0;
left:50%;
z-index:889;
transition:all 1.2s ease;
}
header#mikacatalog-header-wrap > svg{
width:calc(60% - 20px);
max-width:300px;
stroke-width:2px;
fill:#fff;
stroke:#fff;
transition:all 1.2s ease;
}
header#mikacatalog-header-wrap > a{
width:40%;
max-width:150px;
font-size:12px;
border-radius:5px;
border:1px solid #fff;
text-align:center;
padding:7px;
font-weight:600;
color:#fff;
transition:all 1.2s ease;
background:rgba(255,255,255,0);
}
header#mikacatalog-header-wrap.flow{
max-width:100%;
padding:20px;
}
header#mikacatalog-header-wrap.flow > svg{
fill:#000;
stroke:#000;
}
header#mikacatalog-header-wrap.flow > a{
border:1px solid #cbc7bb;
color:#000;
background:rgba(255,255,255,1);
}

a.btn-type-01{
border:1px solid #a7a7a7;
padding:15px 25px;
border-radius:50px;
line-height:1;
font-size:13px;
display:block;
width:100%;
max-width:180px;
position:relative;
transition:all 1.2s ease;
}
a.btn-type-01:after{
font-family:'Material Symbols Outlined';
content:"\e8e4";
font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
font-size:19px;
position:absolute;
top:50%;
right:20px;
transform:translateY(-50%);
}
a.btn-type-01:hover{
border:1px solid #000;
background:#000;
color:#fff;
}

@media screen and (max-width:999px){
	body{
	width:100vw;
	overflow-x:hidden;
	}
	header#mikacatalog-header-wrap{
	max-width:unset;
	width:100%;
	height:unset;
	padding:20px;
	left:0;
	transform:translateX(0);
	}
	header#mikacatalog-header-wrap.flow{
	max-width:unset;
	width:100%;
	padding:20px;
	}
	header#mikacatalog-header-wrap > svg{
	width:calc(100% - 160px);
	max-width:unset;
	}
	header#mikacatalog-header-wrap > a{
	width:100px;
	font-size:9px;
	border-radius:20px;
	}
}



/* --------------------------------------------------------------------
　キービジュアル設定
-------------------------------------------------------------------- */
#mikacatalog-key-visual-wrap{
width:100%;
height:100vh;
overflow:hidden;
position:relative;
}
#mikacatalog-key-visual-wrap > h1{
position:absolute;
top:50%;
left:50%;
width:max-content;
height:max-content;
z-index:1;
transform:translate(-50%,-50%);
font-size:120px;
text-align:center;
line-height:1;
color:#fff;
}
#mikacatalog-key-visual-wrap > h1 > span{
display:block;
font-size:.13em;
letter-spacing:.082em;
font-weight:600;
}
#mikacatalog-key-visual-wrap > section{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}
#mikacatalog-key-visual-wrap > section > ul{
filter:brightness(.85) contrast(1.1) saturate(1.1);
}
#mikacatalog-key-visual-wrap > section > ul > li.two{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
#mikacatalog-key-visual-wrap > section > ul > li > figure{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
#mikacatalog-key-visual-wrap > section > ul > li.two > figure{
width:50%;
height:100%;
}
#mikacatalog-key-visual-wrap > section > ul > li > figure > img{
position:absolute;
top:0;
left:50%;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
filter:sepia(.2) brightness(.9) contrast(1.3) saturate(.98);
}
#mikacatalog-key-visual-wrap > section > ul > li.two > figure > img{
object-position:50% 10%;
}
#mikacatalog-key-visual-wrap > section > ul > li.swiper-slide-active > figure > img,
#mikacatalog-key-visual-wrap > section > ul > li.swiper-slide-duplicate-active > figure > img,
#mikacatalog-key-visual-wrap > section > ul > li.swiper-slide-prev > figure > img{
animation:zoomUp 7s linear 0s normal both;
}
@keyframes zoomUp{
	0% {
		transform:translateX(-50%) scale(1);
	}
	100% {
		transform:translateX(-50%) scale(1.11);
	}
}
#slide-foot-nav{
width:100%;
position:absolute;
left:50%;
bottom:40px;
transform:translateX(-50%);
text-align:left;
padding:0 6.25%;
z-index:1;
display:flex;
justify-content:space-between;
align-items:center;
}
#slide-foot-nav > .swiper-pagination{
position:unset;
width:max-content;
}
.swiper-pagination-bullet{
border:1px solid #fff;
background:unset;
opacity:1;
width:10px;
height:10px;
margin:0 12px 0 0 !important;
}
.swiper-pagination-bullet-active{
border:1px solid #fff;
background:#fff;
opacity:1;
}
#slide-foot-nav > a{
margin:auto 0 auto auto;
text-align:right;
width:max-content;
font-size:12px;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
}
#slide-foot-nav > a:after{
font-family:'Material Symbols Outlined';
content:"\e7cd";
font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
font-size:19px;
margin:auto 0 auto 10px;
}
@media screen and (max-width:768px){
	#mikacatalog-key-visual-wrap{
	min-height:100vh;
	min-height:calc(var(--vh, 1vh) * 100);
	height:auto;
	}
	#mikacatalog-key-visual-wrap > h1{
	font-size:90px;
	}
	#mikacatalog-key-visual-wrap > section > ul > li.two{
	display:block;
	}
	#mikacatalog-key-visual-wrap > section > ul > li.two > figure{
	width:100%;
	height:50%;
	}
	#slide-foot-nav{
	bottom:20px;
	}
}




/* --------------------------------------------------------------------
　プロフィール設定
-------------------------------------------------------------------- */
#mikacatalog-profile-wrap{
width:100%;
padding:19.375rem 13.90625% 30.375rem 13.90625%;
background:url(https://girl.itembox.design/item/images/mika-catalog/profile_background_img-02.webp) repeat-x bottom center;
background-size:470px;
}
#mikacatalog-profile-wrap > .container{
margin:0 auto;
display:grid;
grid-template-columns:360px 470px;
gap:0 60px;
width:max-content;
}
#mikacatalog-profile-wrap > .container > h2{
font-size:60px;
line-height:1;
grid-column:1;
grid-row:1;
padding:0 0 0 30px;
}
#mikacatalog-profile-wrap > .container > h2 > span{
display:block;
font-size:16px;
font-weight:600;
margin-top:20px;
}
#mikacatalog-profile-wrap > .container > #visual-contents{
grid-column:2;
grid-row:1;
padding:0 30px 0 0;
}
#mikacatalog-profile-wrap > .container > #visual-contents > p{
margin-bottom:20px;
font-weight:600;
font-size:18px;
letter-spacing:.10em;
}
#mikacatalog-profile-wrap > .container > #profile-contents{
display:flex;
justify-content:space-between;
align-items:center;
grid-column:span 2;
grid-row:2;
margin-top:30px;
background:#f0f0f0;
padding:40px;
}
#mikacatalog-profile-wrap > .container > #profile-contents > figure{
width:130px;
}
#mikacatalog-profile-wrap > .container > #profile-contents > div{
width:calc(100% - 170px);
}
#mikacatalog-profile-wrap > .container > #profile-contents > div > .name{
font-size:16px;
font-weight:600;
display:block;
}
#mikacatalog-profile-wrap > .container > #profile-contents > div > .name > span{
font-size:14px;
}
#mikacatalog-profile-wrap > .container > #profile-contents > div > .text{
font-size:14px;
line-height:1.4;
margin:10px 0 0 0;
}

@media screen and (max-width:999px){
	#mikacatalog-profile-wrap{
	padding:9.75rem 7.69231% 18rem;
	background-size:80% auto;
	}
	#mikacatalog-profile-wrap > .container{
	display:block;
	width:100%;
	}
	#mikacatalog-profile-wrap > .container > h2{
	font-size:38px;
	margin-bottom:4.6875rem;
	padding:0;
	}
	#mikacatalog-profile-wrap > .container > h2 > span{
	font-size:14px;
	padding:0;
	}
	#mikacatalog-profile-wrap > .container > #visual-contents > p{
	font-size:12px;
	margin-bottom:0;
	letter-spacing:.05em;
	}
	#mikacatalog-profile-wrap > .container > #visual-contents > p > br{
	display:none;
	}
	#mikacatalog-profile-wrap > .container > #profile-contents{
	display:block;
	margin-top:4.6875rem;
	border:0;
	padding:0;
	background:#fff;
	}
	#mikacatalog-profile-wrap > .container > #profile-contents > figure{
	width:150px;
	height:150px;
	overflow:hidden;
	border-radius:100%;
	margin:0 auto 20px auto;
	}
	#mikacatalog-profile-wrap > .container > #profile-contents > div{
	width:100%;
	max-width:unset;
	}
	#mikacatalog-profile-wrap > .container > #profile-contents > div > .name{
	text-align:center;
	}
	#mikacatalog-profile-wrap > .container > #profile-contents > div > .text{
	line-height:2.3;
	font-size:11px;
	}
}




/* --------------------------------------------------------------------
　アイテム紹介設定
-------------------------------------------------------------------- */
#mikacatalog-items-wrapper{
padding:20rem 0 0 0;
background:#F5F2EA;
width:100%;
overflow-x:hidden;
}
#mikacatalog-items-wrapper > h2{
text-align:center;
font-size:clamp(60px,10vw,130px);
line-height:1;
margin-bottom:15rem;
}
#mikacatalog-items-wrapper > h2 > span{
display:block;
font-size:16px;
margin-bottom:15px;
}

/*-- レイアウト --*/
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:stretch;
align-items:center;
padding:0 0 9.125rem 0;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:last-child{
padding:0;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > #visual-contents,
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .movie{
order:2;
width:51.17188%;
padding-top:61.406256%;
overflow:hidden;
position:relative;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:nth-child(even) > #visual-contents,
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:nth-child(even) > .movie{
order:1;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > #visual-contents > ul,
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .movie > video{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > #visual-contents > ul > li{
width:100%;
height:100%;
overflow:hidden;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .movie > video{
width:100%;
height:100%;
object-fit:cover;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation{
order:1;
margin-left:6.25%;
width:29.92188%;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:nth-child(even) > .infomation{
order:2;
margin-left:0;
margin-right:6.25%;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container:last-child{
padding:0;
}

/*-- 各詳細コンテンツ --*/
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > h3{
margin:auto 0 0 0;
font-size:clamp(18px,2.2vw,22px);
font-weight:500;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > h3 > span{
display:block;
font-size:.65em;
color:rgba(0,0,0,0.35);
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .text{
font-size:13px;
line-height:2;
font-weight:600;
margin-top:5.625rem;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail{
margin-top:5.625rem;
display:grid;
grid-template-columns:auto 1fr;
gap:20px;
align-items:center;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail > dt{
color:rgba(0,0,0,0.5);
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail > dd.color > ul > li{
margin:0 8px 0 0;
width:15px;
height:15px;
border-radius:100%;
background:#fff;
overflow:hidden;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail > dd.color > ul > li > .color-mark{
width:100%;
height:100%;
padding:0;
margin:0;
display:block;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail > dd.color > ul > li > .mark-chips-img{
position:relative;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail > dd.color > ul > li > .mark-chips-img > img{
width:100%;
height:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.color-mark.fs-c-productMark__mark--na{
background:#202f55;
}
.color-mark.fs-c-productMark__mark--gre{
background:#e6d2c9;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img{
margin-top:5.625rem;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:flex-start;
align-items:flex-start;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > a.btn-type-01{
margin-top:5.625rem;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img > figure{
width:32.72449%;
position:relative;
padding-top:38.72449%;
overflow:hidden;
margin-bottom:0.92653%;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img > figure > img{
width:auto;
height:105%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents{
margin:6.25%;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
gap:40px;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul > li > figure{
width:100%;
position:relative;
padding-top:140%;
overflow:hidden;
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul > li > figure > img{
width:auto;
height:105%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > a.btn-type-01{
margin:5.625rem auto 0 auto;
}


@media screen and (max-width:999px){
	#mikacatalog-items-wrapper{
	padding:10rem 0 20px 0;
	}
	#mikacatalog-items-wrapper > h2{
	font-size:clamp(66px,10vw,130px);
	line-height:.6;
	width:92.30769%;
	margin:0 auto 6rem auto;
	}
	#mikacatalog-items-wrapper > h2 > span{
	font-size:12px;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents{
	display:block;
	margin:2.5rem 0 0;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > #visual-contents,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .movie{
	width:calc(100% - 20px);
	padding-top:calc(120% - 20px);
	margin:0 0 0 auto;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:nth-child(even) > #visual-contents,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents:nth-child(even) > .movie{
	margin:0 auto 0 0;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > #visual-contents > ul > li > figure > img{
	width:auto;
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation{
	margin-top:3.125rem;
	margin-left:0;
	padding:0 20px;
	width:100%;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .text,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .detail{
	margin-top:30px;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .text{
	font-size:12px;
	letter-spacing:.05em;
	letter-spacing:400;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > h3 > br,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .text > br{
	display:none;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents{
	margin:2.55102% 0 0 0;
	padding:0 7.69231%;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:0;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul > li{
	width:48.72449%;
	margin-bottom:2.55102%;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img > figure,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul > li > figure{
	position:unset;
	padding-top:unset;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img > figure > img,
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-visual-contents > ul > li > figure > img{
	width:100%;
	height:auto;
	position:unset;
	transform:unset;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img{
	margin-top:30px;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > .img > figure{
	width:calc(50% - 10px);
	margin-bottom:20px;
	}
	#mikacatalog-items-wrapper > #mikacatalog-items-container > .item-profile-contents > .infomation > a.btn-type-01{
	margin-top:10px;
	background:#fff;
	}

}

/* --------------------------------------------------------------------
　フッタ設定
-------------------------------------------------------------------- */
#mikacatalog-last-wrapper{
background:#F5F2EA;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:12px;
line-height:1.6;
}
#mikacatalog-last-wrapper > section > br{
display:none;
}
@media screen and (max-width:999px){
	#mikacatalog-last-wrapper{
	font-size:8px;
	}
}



/* --------------------------------------------------------------------
　スクロールごと表示設定
-------------------------------------------------------------------- */
.scroll_up{
transition:.5s ease-in-out;
transform:translateY(30px);
opacity:0;
}
.scroll_up.on{
transform:translateY(0);
opacity:1.0;
}
.scroll_left{
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
transform:translateX(-30px);
opacity:0;
filter:alpha(opacity=0);
-moz-opacity:0;
}
.scroll_left.on{
opacity:1.0;
filter:alpha(opacity=100);
-moz-opacity:1.0;
transform:translateX(0);
}
.scroll_right{
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
transform:translateX(30px);
opacity:0;
filter:alpha(opacity=0);
-moz-opacity:0;
}
.scroll_right.on{
opacity:1.0;
filter:alpha(opacity=100);
-moz-opacity:1.0;
transform:translateX(0);
}