@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@700&display=swap');
body {
	font-size: 12px;
font-family: 'Montserrat', 'Noto Sans JP',"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
#wrapper{
	line-height: 1.8;
	letter-spacing: 0;
	color: #2b2a29;
	background: #fff;
	font-weight: 400;
	/*word-break: break-all;*/
	word-break: break-all;
	font-weight: lighter;
/*	padding: 20px;*/
	box-sizing: border-box;

}
h2,h3,h4,dt,dd,p{ font-weight: 400;}



a {
	text-decoration: none;
	color: #2b2a29;
}
a:hover {
	opacity: 0.7;
}
img {
	vertical-align: top;
}
.pc {
	display: block!important;
}
.sp {
	display: none !important;
}
.slick-dotted.slick-slider{ margin-bottom: 0;}
.slides{width: 100%; height: 100%;}

/*.slides li.slid01{ background: url("../img/main.jpg") center top no-repeat; background-size: cover; width: 100%; height: calc(100vh - 70px);}
.slides li.slid02{ background: url("../img/main2.jpg") center top no-repeat; background-size: cover; width: 100%; height: calc(100vh - 70px);}
*/
.slides li img{ width: 100%; height: auto}
	.ckList.sp{ display: none !important;}
.slick-dotted.slick-slider{ margin-bottom: 0;}

sup{ font-size: 12px; vertical-align: top; line-height: 1;}
.bgDttxt ul li dd sup{ font-size: 10px; vertical-align: top;}
.bgDttxt h3 .smtxt{ font-size: 12px;}
.main {
	position: relative;
	/*height: calc(100vh - 70px);*/
	/*height: 100vh;*/
	width: 100%;
	background-size: cover;
	background: #fff;
	overflow: hidden;
/*	background: url("../img/main.jpg") center bottom no-repeat;*/
	background-size: cover;
	margin-top: 70px;
}

.hedcp{ border-bottom: 1px solid #F4F4F4;}
.hedcp {
    height: 68px;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    left: 0;
}

.mainWrapp{ position: relative; /*padding-top: 90px;*/}

.mainlogo {
    width: 134px;
    position: absolute;
    left: 35px;
    margin-left: 0;
    top: 105px;
    z-index: 100;
}
.mainlogo img{ width: 100%; height: auto;}
.hedcp h2 {
    left: 35px;
    top: 30px;
    position: absolute;
}

.mainnav {
    position: absolute;
    right: 217px;
    top: 25px;
    z-index: 10;
	font-size: 0;
}
.mainnav li{ display: inline-block; font-size: 13px; letter-spacing: 0.18em; padding-left: 20px; margin-left: 20px; border-left: 1px solid #282A29;}
/*.mainnav li a{ color: #fff;}*/
.mainread {
    font-size: 10px;
    letter-spacing: 0.018em;
    line-height: 20px;
    position: absolute;
    right: 35px;
    bottom: 35px;
    z-index: 100;
	color: #282A29;
}

.contentW{ max-width: 1020px; margin: 0 auto; position: relative; box-sizing: border-box; padding: 0 20px;}
.maintxt {
    position: absolute;
    left: 0;
    top: 143px;
    text-align: center;
	width: 100%;}
.maintxt dt{ font-size: 16px; color: #444444; margin-bottom: 20px;}
.maintxt dt sup{ font-size: 10px; vertical-align: top; }
.maintxt dd{ font-size: 41px; line-height: 53px; color: #222222; font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: normal; letter-spacing: 0.025em;}
.maintxt dd sup{ font-size: 14px; vertical-align: top; padding-top: -10px;}


.mainunderTxt{ font-size: 8px; color: #444444; position: absolute; right: 5px; bottom: 5px; letter-spacing: 0.05em;}




.sideCp{ color: #282A29; font-size: 8px;-ms-writing-mode: tb-rl; writing-mode: vertical-rl;
  writing-mode: vertical-rl; position: absolute; right: 25px; top: 50%; letter-spacing: 0.18em;}




.scroll {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  left: 40px;
  width: 2px;
  height: 62px;
  letter-spacing: 0.08em;
  margin-left: -2px;
	
}
.scrolltext {
  position: absolute;
  font-weight: 500;
  font-size: 9px;
  bottom: 135px;
  color: #444444;
	right: auto;
  left: 16px;
  letter-spacing: 0.18em;
  text-align: center;
	z-index: 100;
	line-height: 2;
	
}
.scrolltext{ opacity: 1; transform:translateY(0) rotate(90deg); height: 16px; }
.on .scroll{ opacity: 1; transform:translateY(0);}
.scrolltext:before{content: "";
background: #E4EDF2;
position: absolute;
left: 66px;
z-index: 100;
width: 8px;
height: 8px;
border-radius: 6px 6px 0 0;
margin-left: -3px;
top: 7px;}

::-webkit-full-page-media, :future, :root .scrolltext:before{
top: 5px;}

.scroll:after{background: #818181; width: 2px;}
.scroll:after, .scroll:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 80%;
  content: ''
}
.scroll:before {
  z-index: 10;
  -webkit-animation: scroll 2.4s infinite normal;
  animation: scroll 2.4s infinite normal;
  background: #ccc;
  width: 8px;
  height: 8px;
  content: '';
width: 7px; height: 7px; border-radius: 50%; background: #1CB5C1;  margin-left: -3px;
}
.spscrBG{ width: 30px; height: 168px; left: 0; bottom: 0; position: absolute; z-index: 1; background: #fff;}

@-webkit-keyframes scroll {
0% {
-webkit-transform:translate3d(0, 0, 0)
}

100% {
-webkit-transform:translate3d(0, 43px, 0)
}
}

.prcnav{ position: relative;}
.navinwrapp{width: 840px; position: absolute;
left: -350px; padding-top: 17px; }
.navins{ background: #EFEFEF; padding: 40px 25px; box-sizing: border-box;}
.mainnav .ctgnav { font-size: 0;}
.mainnav .ctgnav li{
	padding-left: 0;
     margin-left: 0; 
     border-left: none;
	letter-spacing: 0;
	padding: 0 5px; margin-bottom: 10px;
	box-sizing: border-box;
}
.mainnav .ctgnav li{ width: 20%;}
.mainnav .ctgnav li img{ width: 100%; height: auto;}
.ctgnav{ }
.navins ul{ letter-spacing: 0;}
.navins h3{ font-size: 14px; margin-bottom: 20px;}

.prcnav:hover:before{ content: ""; display: block;border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: calc(tan(60deg) * 10px) solid #EFEFEF;
position: absolute; bottom: -20px; left: 40px}
.prcnav .navinwrapp{ display: none;}
.prcnav:hover .navinwrapp{ display: block;}


.labelbtn{ position: absolute; right: 40px; top: 20px; /*width: 153px;*/}
.labelbtn:hover:before{ content: ""; display: block;border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: calc(tan(60deg) * 10px) solid #EFEFEF;
position: absolute; bottom: -20px; left: 50px}
.labelWrapp{ position: absolute; width: 255px; position: absolute;
left: -70px; padding-top: 17px; display: none;}
.labelbtn:hover .labelWrapp{ display: block;}
.labellinks{ background: #EFEFEF; padding: 40px 25px; box-sizing: border-box;}
.labellinks h3{ font-size: 14px; padding-top: 25px; position: relative; margin-bottom: 33px;}
.labellinks h3:before{ content: ""; display: block; width: 15px; height: 1px; background: #000; position: absolute; left: 0; top: 0;}
.labellinks li{ font-size: 13px; margin-bottom: 33px; position: relative; font-weight: 700;}
.labellinks li a:after{ content: ""; display: block; background: url("../img/iconlink.svg") left top no-repeat; width: 12px; height: 12px; background-size: cover; position: absolute;right: 0; top:3px;}
.labellinks li:last-child{ margin-bottom: 0;}

.instag {
    right: 0;
    width: 151px;
    margin-left: auto;
	margin-bottom: 10px;
}
.instag a{ background: #fff; font-size: 9px; letter-spacing: 0.18em; width: 151px; height: 30px;  display: inline-block; margin-left: auto;}
.instag a:before{ content: ""; width: 15px; height: 15px; background: url(" ../img/isticon.svg") left center no-repeat; display: inline-block; margin-right: 18px; padding: 10px; box-sizing: border-box; margin: 6px; vertical-align: middle; margin-right: 18px;}

.atdtxtft{ font-size: 10px; color: #888; line-height: 16px; margin-bottom: 60px; vertical-align: middle;}


.footer{ background: #F2F4F8; padding: 60px 0; position: relative;}
.footer h3{ width: 116px;}
.footer h3 img{ width: 100%; height: auto}
.footer p{ font-size: 9px; text-align: right; }
.iscpcon{ position: absolute; right: 0; top: 0;}
.shopList{ background: #F5F5F5; padding: 80px 0;}
.shopLIsts{ font-size: 0; letter-spacing: 0;  width: calc(100% + 20px); padding-top: 60px; letter-spacing: 0;}
.shopLIsts li{ width: 25%; display: inline-block; vertical-align: top; padding-right: 20px; margin-bottom: 20px; box-sizing: border-box;}
.shopLIsts li img{ width: 100%; height: auto;}

.navfootList{ text-align: center; font-size: 0; letter-spacing: 0;}
.navfootList li{ display: inline-block; width: 25%; vertical-align: middle; font-size: 11px; letter-spacing: 0.18em; border-right: 1px solid #E2E2E2; box-sizing: border-box;}
.navfootList li:last-child{ border-right: none;}

.contactcon{ padding: 60px 0;}
.navfootList{ border-bottom: 1px solid #E2E2E2; padding-bottom: 60px; margin-bottom: 60px;}

.contactbtn{ text-align: center;}
.contactbtn dt{ font-size: 13px; letter-spacing: 0.06em; margin-bottom: 20px;}

.contactbtn a{ border: 1px solid #444444; font-size: 13px; box-sizing: border-box; padding: 25px 95px; display: block; max-width: 274px; margin: 0 auto; box-sizing: border-box;
}

.menuWrapp{ display: none;}


@media screen and (max-width:900px) {
	.sp_menuWrap{ height: calc(100vh - 70px); overflow: scroll;}
	.slick-dots{ display: none;}
	.scrolltext {
    position: absolute;
    font-weight: 500;
    font-size: 9px;
    bottom: 107px;
    color: #444444;
    right: auto;
    left: -11px;
    letter-spacing: 0.18em;
    text-align: center;
    z-index: 100;
		height: 17px;
}
.scroll {
    position: absolute;
    z-index: 2;
    bottom: 16px;
	left: 15px;}
	
	
	.ckList.sp{ display: block !important;}
	.pc{ display: none !important;}
	.sp{ display: block !important;}
.hedcp h2.mainlogo {
    width: 208px;
    left: 20px;
    margin-left: 0;
    top: 20px;
}
	
	.scrolltext:before {
    left: 63px;
    top: 7px;
}
.scroll:after {
    height: 100%;
}
.bottomin dl{ position: relative; z-index: 0;}
.iscpcon {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 auto;
    text-align: center;
}
	.instag {
    right: 0;
    width: 151px;
    margin-left: auto;
		margin-right: auto;
    margin-bottom: 10px;
}
.footer p {
    top: auto;
    padding-top: 10px;
}
	.footer h3{ margin-bottom: 32px;}
	
	.pointList li:nth-child(1){ z-index: 3;}
	.pointList li:nth-child(2){ z-index: 2;}
	.pointList li:nth-child(3){ z-index: 1;}
	.pointList:after{ z-index: 100;}
	.secTits{ margin-bottom: 20px;}


.maintxt dt{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.2s ease-out;}

.maintxt dd{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.4s ease-out;}

.intno .maintxt dt,.intno .maintxt dd{ opacity: 1;
  transform: translateY(0);
}

.secvitminImg:before{ opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.2s ease-in;}

.secvitminImg:after{ opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.4s ease-in;}


.active .secvitminImg:before{ opacity: 1;
  transform: translateX(0);}
.active .secvitminImg:after{ opacity: 1;
  transform: translateX(0);}


.secvtit{ opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.2s ease-out;}

.ckList{opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s 0.4s ease-out;}

.ckList.active,.secvtit.active{ opacity: 1;
  transform: translateY(0);
}


.leftin {
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.6s 0.2s ease-in;
}
.leftin.active {
  opacity: 1;
  transform: translateX(0);
}
.bottomin {
  opacity: 0;
  transform: translateY(25px);
  transition: all 1.4s 0.2s ease-out;
}
.bottomin.active {
  opacity: 1;
  transform: translateY(0);
}
.bottomindly {
  opacity: 0;
  transform: translateY(25px);
  transition: all 1.8s 1.2s ease-out;
}
.bottomindly.active {
  opacity: 1;
  transform: translateY(0);
}
.shopLIsts li{ height: 120px;}
.shopLIsts a{ background: #fff; color: #444; font-size: 12px; text-align: center; display: block; height: 120px; vertical-align: middle; line-height: 120px;}





#menu-btn_sp {
    position: fixed;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    z-index: 150;
    cursor: pointer;
    padding: 20px;
    box-sizing: border-box;
    background: #EFEFEF;
}


.spmenuins {
    width: 100%;
    position: relative;
    height: 100%;
}



.menu-trigger, .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 20px;
	height: 20px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
	top: 8px;
}
.menu-trigger span:nth-of-type(2) {
	top: 14px;
	display: none;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 9px;
}
.menu-trigger.close span:nth-of-type(1) {
	-webkit-transform: translateY(13px) rotate(-45deg);
	transform: translateY(13px) rotate(-45deg);
	top: 2px;
}
.menu-trigger.close span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.close span:nth-of-type(3) {
	-webkit-transform: translateY(-4px) rotate(45deg);
	transform: translateY(-4px) rotate(45deg);
}

.menuWrapp{  position:fixed; position:fixed; right:auto; top:0; z-index:110; width:0; 
height:auto;
transition: all 0.3s ease;
	font-weight: 700;
	/*top: -70vh;*/
	top:calc(-110vh - 500px);
	width: 100%;
}

.menuWrapp.on{     position: fixed;
    right: 0;
    top: 0;
    z-index: 110;
    width: 100%;
    /*background: #000;*/
    height: auto;
    top: 70px;
}
	.menuWrapp.on .sp_menu{ display: block;}


.sp_menu {
    height: 100%;
    background-color: #F5F5F5;
    /* padding-left: 50px; */
    /*display: table;*/
    width: 100%;
	padding: 0;
}.sp_menuWrap{
	
	/*display:table-cell;*/
	vertical-align:middle;
	
	}
.sp_menu ul li {
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: 0.18em;
}.sp_menu ul li a {
	display: block;
	text-decoration: none;
	color:#000;
}
.navfootList li {
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    font-size: 11px;
    letter-spacing: 0.18em;
    border-right: 1px solid #E2E2E2;
    box-sizing: border-box;
    
	padding-bottom: 20px;
	padding-top: 20px
}
	.navfootList li:nth-child(1),.navfootList li:nth-child(2) {
    border-bottom: 1px solid #E2E2E2;
}

	.navfootList li:nth-child(2){ border-right: 0;}
	.navfootList {
		border-bottom: 0;}
	.navfootList{ padding-bottom: 0;}
.footer h3 {
    width: 170px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.footer p {
    font-size: 9px;
    text-align: center;
    position: relative;
    right: auto;
    top: auto;
    padding-top: 35px;
}
	.fttit span {
    display: block;
}
.txtcontent h3:before {
    position: absolute;
    left: -16%;
    top: -38px;
}
	
	.vtcontent .ckList li{ width: 100%; display: block;}
	.navins ul{ font-size: 0;}
	.navins{ padding: 0; background-color: transparent}
	.sp_menu .ctgnavS li{ width: 50%; display: inline-block; margin-bottom: 10px; box-sizing: border-box;}
	.sp_menu .ctgnavS li img{ width: 100%;}
	
	.sp_menu  .mainnavS li{ font-size: 20px; margin-top: 35px; margin-bottom: 0; box-sizing: border-box;}
	.navins ul li:nth-child(odd){ padding-right: 5px;}
	.navins ul li:nth-child(even){ padding-left: 5px;}
	.menuWrapp.on{ display: block;}
	
	.labellinksS{ padding-top: 50px;}
	.labellinksS h3{ font-size: 16px; margin-bottom: 20px;}
	.labellinksS h3:before{ content: ""; display: block;}
	
	.sp_menu .labellinksS ul li{ font-size: 12px; margin-bottom: 25px;}
	.labellinksS h3{ position: relative; padding-top: 24px;}
	.labellinksS h3:before{ content: ""; display: block; width: 15px; height: 1px; background: #000; position: absolute; left: 0; top: 0;}
	.mbss{ margin-bottom: 20px;}
	.mainnavS li{ position: relative}
	.mainnavS li a:after{ content: ""; display: block; width: 13px; height: 7px; background: url("../img/arw_sp.svg") right center no-repeat; position: absolute; right: 0; top: 5px;}
	.sp_menu .labellinksS ul{ width: 70%;}
	.sp_menu .labellinksS ul li{ position: relative;}
.sp_menu .labellinksS ul li a:after {
    content: "";
    display: block;
    background: url(../img/iconlink.svg) left top no-repeat;
    width: 12px;
    height: 12px;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 3px;
}

}