@charset "UTF-8";

/* 共通設定 =============================================================== */

/* 基本リセット（余白調整のため念の為追加） */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
background-color: #dcdcdc;
margin: 0;
padding: 0;
font-style: normal;
}

small {
	font-size: 11px;
	letter-spacing: 0; }


ul {
list-style: none;
padding-left: 0;
}

img {
width: 100%;
}

p {
margin: 0;
}


.WF2 {
font-family: "Shippori Mincho", serif;
  font-style: normal;
}


.WF3 {
  font-family: "EB Garamond", serif;
  font-style: normal;
}



/* 振り分け --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.PC {
	display: none !important;
	}

}

@media print, screen and (min-width: 768px) {

	.SP {
	display: none !important;
	}

}


/* InView --------------------------------------------------- */

.FadeMv1 {
opacity: 1.0 !important;
transform: translate(0,0) !important;
-webkit-transform: translate(0,0) !important;
transition: 1s;
}

.FadeMv2 {
opacity: 1.0 !important;
transform: translate(0,0) !important;
-webkit-transform: translate(0,0) !important;
transition: 1s;
}

.ItemMain {
opacity: 0;

}

.ItemSub {
opacity: 0;
transform: translate(0,100px);
-webkit-transform: translate(0,100px);
}

.ItemSub1 {
opacity: 0;
transform: translate(-100px,0);
-webkit-transform: translate(-100px,0);
}

.ItemSub2 {
opacity: 0;
transform: translate(100px,0);
-webkit-transform: translate(100px,0);
}

@media only screen and (max-width: 767px) {

	.ItemSub1 {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);	
	}
	
	.ItemSub2 {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	}

}


/* コンテナ =============================================================== */



.CenterBoxWrap {
position: relative;
background: #fff;	
}

.CenterBoxWrap:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
width: 100%;
height: 130px;
background-image: url(../img/Bg_Btm.png);
	background-size: 24px auto;
vertical-align: middle;	
background-repeat: repeat-x;
}

@media only screen and (max-width: 767px) {

	.LeftBoxWrap,
	.RightBoxWrap {
	display: none;
	}


}


@media print, screen and (min-width: 768px) {

    .container {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    /* --- 左右共通：画面に追従し、上下中央に配置 --- */
    .LeftBoxWrap,
    .RightBoxWrap {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 左側：最小500px / 比率3 */
    .LeftBoxWrap {
        order: 1;
        flex: 3 1 400px; 
        min-width: 400px;

    }
   
	.LeftBoxWrap .Nav1 {
	width: 340px;
	 padding: 0 30px;
	}

    /* 右側：最小100px / 比率1 */
    .RightBoxWrap {
        order: 3;
        flex: 1 1 70px;
        min-width: 70px;
    }

    /* --- センター：余白をすべて埋める --- */
    .CenterBoxWrap {
        order: 2;
        /* flex-growを「1」以上にし、basisを0（またはauto）にすることで、
           左右が最小幅を確保した後の残りの幅をすべて支配します */
        flex: 10 1 auto; 
        min-width: 540px; 

        z-index: 2;
        display: flex;
        justify-content: center; /* 中身のCenterBoxを水平中央に */
    }

    /* --- センターの中身：540px固定 --- */
    .CenterBox {

       /* ---  max-width: 700px;--- */
        position: relative;
    }



	.CenterBoxWrap {
	margin-top: 25px;
	background: url(../img/Bg_Top.png) repeat-x left top;
	background-size: 20px auto;
	background-color: #fff;
	} 


}



@media only screen and (max-width: 767px) {

	.Width1 {
	padding: 0 40px;
	}

	.Width1_SP {
	padding: 0 40px;
	}

	.Caption {
	margin-top: 10px;
	font-size: 11px;
	text-align: center;
	}

}


@media print, screen and (min-width: 768px) {

	.Width1 {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	}

	.Width1_PC {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	}

	.Caption {
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
	}

}

@media print, screen and (min-width: 1090px) {

	.Width1,
	.Width1_PC {
	padding-right: 0 !important;
	padding-left: 0 !important;
	}
	
	.Caption {
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
	}

}



/* タイトル周り =============================================================== */



.PopupShopsUnit .Lead1 {
font-size: 18px;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: center;
}

.SecondUnit .Title {
padding-bottom: 10px;
text-align: center;
}

.SecondUnit .TitleUnit {
position: relative;
}

.UnitMds {
font-size: 20px;
}

.marker-text {
display: inline;
line-height: 1.4;
padding: 0 .15em;
background: linear-gradient(#000 0 0) no-repeat;
background-size: 100% 1.2em;
background-position: 0 75%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.TitleLead {
text-align: center;
}

.PicksUnit {
background: url(../img/Product_Bg.png);
}

.PicksUnit .Caption2 {
    font-size: 11px;
    text-align: center;
margin-top: 5px;
}

@media only screen and (max-width: 767px) {

	.SecondUnit .TitleUnit .TitlePh {
	width: 80px;
	height: 80px;
	position: absolute;
	top: -50px;
	right: 30px;
	}

	.SecondUnit .Title {
	position: relative;
	margin-top: 10px;
	margin-left: -20px;
	margin-right: auto;
	}
	
	.SecondUnit .Title2 {
	position: relative;
	overflow: hidden; /* ラインがはみ出さないようにする */
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
	}
	
	.SecondUnit .Title2::before,
	.SecondUnit .Title2::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 50%; /* 十分な長さを確保 */
	height: 1px;
	background: #000;	
	}

	.SecondUnit .Title2::before {
	right: calc(50% + 3em); /* 中央から文字分ずらす */
	}

	.SecondUnit .Title2::after {
	left: calc(50% + 3em); /* 中央から文字分ずらす */
	}

	.SecondUnit .Title_Logo {
	text-align: center;
	}
	
	.SecondUnit .Title_Logo .Logo {
	width: 120px;
	margin: 0 auto;
	}
	
	.SecondUnit .Title_Logo .Logo2 {
	display: inline-block;
	margin: 0 0 3px 5px;
	font-size: 26px;
	font-weight: 500;
	}
	
}

@media print, screen and (min-width: 768px) {



	.SecondUnit {
	padding-top: 30px;	
	}
	
	.SecondUnit .TitleUnitIn {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #000;
	margin-left: 50px;
	margin-right: 50px;	
	padding-top: 10px;
	}
	
	.SecondUnit .TitleUnitIn p {
	font-size: 12px;	
	letter-spacing: 0.03em;
	}
	
	.SecondUnit .TitleUnit .Title {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 60px auto 20px auto;
	padding-left: 20px;
	padding-right: 20px;
	}

	.SecondUnit .TitleUnit .TitleLead {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	}
	
	.SecondUnit .TitleUnit .TitlePh {
	width: 130px;
	height: 130px;
	position: absolute;
	top: 50px;
	right: 50px;
	}
	
	.PicksUnit .Caption {
	letter-spacing: -0.04em;
	}

}


@media print, screen and (min-width: 1090px) {

	.SecondUnit .TitleUnit .Title {
	padding-left: 0;
	padding-right: 0;	
	
	}

}


/* SHOP INDEX =============================================================== */



@media only screen and (max-width: 767px) {


}


@media print, screen and (min-width: 768px) {

	.ShopListWrap {
	margin-top: 30px;
	}

	.RightBoxWrap .Nav2 {
	width: 30px;
	}

	.RightBoxWrap .MdsUnit {
	width: 100%;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-align: left;
	}

	.RightBoxWrap {
/* ここが重要：子要素（Nav2）を水平・垂直ともに中央へ */
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;     /* 垂直中央 */
	}

    .RightBoxWrap .Nav2 {
/* 縦書き設定 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    
    /* 念のため、Nav2自体も中央寄せを確実に */
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    white-space: nowrap;
    }

    .RightBoxWrap .ListNavIn {
    margin: 0;
    padding: 0;
    font-size: 15px; /* 文字サイズは適宜調整してください */

    font-family: serif;
    color: #333;
    letter-spacing: 0.04em; /* 文字間隔を少しあけると綺麗です */
    text-align: center;
    }

    .RightBoxWrap .ListNavIn a {
    text-decoration: none;
    color: #333;
    /* スラッシュとの間に少し余白を入れる */
    margin: 5px 0; 
    display: inline-block; /* 縦書きの中での余白を有効にする */
    transition: color 0.3s;
    }

    .RightBoxWrap .ListNavIn a:hover {
        color: #ff015b; /* ホバー時の色 */
    }

}



/* SHOP =============================================================== */



@media only screen and (max-width: 375px) {



}

@media only screen and (max-width: 767px) {
	
	.ShopsUnit {
	margin-top: 30px;
	}

	.ShopsUnit .Photo1 {
	margin-top: 30px;
	}
	
	.ShopsUnit .Photo {
	margin-top: 90px;
	}
	
	.ShopsUnit .TitleLead {
	margin-top: 20px;
	padding-bottom: 10px;
	font-weight: 500;
	}
	
	.ShopsUnit .ShopsLead {
	margin-top: 60px;
	padding-top: 60px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.05em;
	background: url(../img/Deco.jpg);
	background-size: 50px 13px;
	background-repeat: no-repeat;
	background-position: center top;
	}

	.ShopsUnit .ShopsLead .Lead1 {
	margin-bottom: 30px;
	}

	.ShopsUnit .ShopUnitPh {
	width: 55%;	
	margin: auto;
	}
	
	.Profile_PeoplePh {
	width: 45%;	
	margin: auto;
	}

	
	.PicksUnit {
	position: relative;
	margin-top: 130px;
	padding-top: 60px;
	padding-bottom: 40px;
	}
	
	.PicksUnit .Icon_Mds {
	display: flex;
	justify-content: center;
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	width: 80px;
	margin: auto;
	}
	
	.PicksUnit .PicksMds {
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	}
	
	
	.Profile_ShopUnit {
	display: flex;
	flex-flow: column;
	}
	
	.ShopUnitLeadWrap {
	order: 2;
	}
	
	.ShopUnitPh {
	order: 1;	
	}

	.Profile_PeopleUnitIn {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;	
	}
	
	.ShopUnitMds {
	margin-top: 7px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	}
	
	.ShopUnitLead {
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.05em;
	}
	
	.Profile_ShopUnit {
	margin-top: 70px;
	}
	
	.Profile_PeopleUnit {
	margin-top: 30px;
	}
	
	.Profile_PeopleUnitIn {
	padding-top: 13px;
	padding-bottom: 13px;	
	}
	
	.ProfileMds {
	font-size: 10px;
	font-weight: 500;
	}
	
	.Profile_PeopleName {
	font-size: 13px;
	font-weight: 500;	
	}
	
	.Profile_PeopleLead {
	font-size: 12px;	
	}

}


@media print, screen and (min-width: 768px) {

	.ShopsUnit {
	margin-top: 60px;
	}

	.ShopsUnit .ShopsLead {
	margin-top: 80px;
	padding-top: 110px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.08em;
	background: url(../img/Deco.jpg);
	background-size: 80px 22px;
	background-repeat: no-repeat;
	background-position: center top;
	}
	
	.ShopsUnit .ShopsLead .Lead1 {
	margin-bottom: 40px;
	}

	.Profile_ShopUnit {
	display: flex;
	}

	.Profile_PeopleUnitIn {
	display: flex;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;	
	}

	
	.ShopsUnit .ShopUnitLeadWrap {
	width: calc(100% - 200px);
	}
	
	.ShopsUnit .ShopUnitPh {
	width: 200px;	
	}
	
	.ShopsUnit .ShopUnitPh img {
	width: 100%;
	}
	
	.PicksUnit {
	position: relative;
	margin-top: 150px;
	padding-top: 60px;
	padding-bottom: 80px;
	}
	
	.PicksUnit .Icon_Mds {
	display: flex;
	justify-content: center;
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	width: 80px;
	margin: auto;
	}
	
	.PicksUnit .PicksMds {
	margin-bottom: 40px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	}
	
	
	.Profile_ShopUnit {
	margin-top: 150px;
	}
	
	.Profile_PeopleUnit {
	margin-top: 60px;	
	}
	
	.Profile_PeoplePh {
	width: 130px;
	}
	
	.Profile_PeopleLeadUnit {
		width: calc(100% - 130px);
	}
	
	.Profile_PeopleUnitIn {
	padding-top: 13px;
	padding-bottom: 13px;	
	}
	
	.ProfileMds {
	font-size: 15px;
	font-weight: 500;
	}

	.ShopUnitMds {
	font-size: 15px;
	font-weight: 500;
	}
	
	.ShopUnitLead {
	margin-top: 7px;
	padding-right: 20px;
	font-size: 12px;
	line-height: 1.6;

	}
	
	.Profile_PeoplePh {
	padding-left: 15px;
	}
	
	.Profile_PeopleLeadUnit {
	padding-left: 22px;	
	}
	
	.Profile_PeopleName {
	font-size: 15px;
	font-weight: 500;	
	}
	
	.Profile_PeopleLead {
	font-size: 12px;	
	}

	.ShopsUnit .Photo {
	margin-top: 130px;
	}


}

@media print, screen and (min-width: 1090px) {

	.ShopsUnit .ShopsLead {
	font-size: 18px;
	}


}


/* ページトップ =============================================================== */

#js-pagetop {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* ローディングより上に */
  width: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease; /* transitionを少し長くして遅出し感を強調 */
  transform: translateY(10px); /* 少し深めから浮かび上がらせる */
}

#js-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



.PageTopTo {
writing-mode: vertical-rl; /* 右から左へ進む縦書き */
padding-top: 30px;
background: url(../img/Allow_Top.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 10px 24px;
transition: color 0.3s;
cursor: pointer;
}

.PageTopTo:hover  {
color: #ff015b;
background: url(../img/Allow_Top_On.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 10px 24px;
}

@media print, screen and (min-width: 768px) {

	#js-pagetop {

  right: 25px;

	}


}


/* ホームボタン =============================================================== */

.Btn__Home {
	text-align: center;
	margin: 60px auto 30px auto;}

.Btn__Home img {
	width: 280px;}


/* フッター =============================================================== */


/* フッター（KVの後に続く要素として配置） */
.PageFooter {

  padding: 50px 0;
  text-align: center;
}

/* アイコン等のスタイル（元コードに合わせて簡易調整） */
.PageFooter__SocialLinks {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}


.PageFooter {
	position: relative;
	padding: 0 0;
	color: #fff;
	z-index: 1;
	
	}

.PageFooter__SocialLinks {
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;}

.PageFooter__SocialLinks a {
	text-decoration: none;}

.CreditUnit {
padding: 30px 0;

}

.PageFooter .LaforetLogo {
width: 110px;
margin: auto;
}

.Icon {
	display: inline-block;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: #000;
	background-repeat: no-repeat;
	background-position: center;

	}

.Icon.-instagram {
  background-image: url('../img/Icon_Instagram.svg');
    background-size: 50%;

    }

.Icon.-x {
  background-image: url('../img/Icon_X.svg');
    background-size: 45%;

    }

.Icon.-facebook {
    background-image: url('../img/Icon_Facebook.svg');
    background-size: 30%;

    }

.Icon.-line {
    background-image: url('../img/Icon_Line.svg');
    background-size: 60%;

    }

.PageFooter__Logo {
	display: flex;
	justify-content: center;
}

.PageFooter__Logo img {
	display: block;
	width: 70px;}

.PageFooter__Copyright {
	margin-top: 10px;
	font-size: 11px;
	text-align: center;}


@media only screen and (max-width: 767px) {

	.PageFooterIn {
	padding: 70px 0 30px 0;
	}

}

.swiper {
  width: 100%;
  height: auto;
  /* padding: 0 10px 100px 10px; ←左右に見切れを作る */
  padding-bottom: 100px;
  box-sizing: border-box;
}

.swiper-slide {
  width: auto;
  max-width: 320px; /* ←中央スライドの最大幅 */

}


.swiper-slide-active {

}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {

	.mySwiper {
	margin-top: 100px;
	}


	.swiper-slide {
	  /* 固定幅ではなく、画面幅に対する割合で指定するのがコツです */
	  width: 45% !important; /* ここを小さくするほど左右の見切れが大きくなります */
	  height: auto;

	}

}

@media print, screen and (min-width: 768px) {

	.mySwiper {
	margin-top: 130px;
	}
	
	.mySwiper2 {
	max-width: 1000px;
	}

	.PageFooterIn {
	padding: 70px 0 30px 0;
	}


}



.swiper-nav {
display: flex;
justify-content: center;
height: 30px;
margin-top: 20px;
}

.swiper-pagination {
width: 80px !important;
}

.swiper-button-prev,
.swiper-button-next {
position: relative !important;
top: auto !important;
height: 30px !important;
width: 60px !important;
}

.swiper-button-next {
right: 0 !important;
bottom: -15px !important;
}

.swiper-button-prev {
left: 0 !important;
bottom: -15px !important;
}

.swiper-button-next:before {
content: '';
position: absolute;
right: -20px;
bottom: 5px;
display: inline-block;
width: 38px;
height: 14px;
background-image: url(../img/Allow_slide.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
transform: scaleX(-1);
}

.swiper-button-prev:before {
content: '';
position: relative;
position: absolute;
left: -20px;
bottom: 5px;
display: inline-block;
width: 38px;
height: 14px;
background-image: url(../img/Allow_slide.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;

}

.swiper-button-prev svg,
.swiper-button-next svg {
display: none;
}


.swiper-pagination {
width: 120px;
right: 0;
margin: auto;
}