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

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Medium 500
*/
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600&display=swap');
/*
font-family: "Shippori Mincho B1", serif;
Medium 500
SemiBold 600
*/




@font-face {
font-family: "SequelSansBook";
 src: url('../../font/SequelSansBook/font.woff2') format('woff2'), url('../../font/SequelSansBook/font.woff') format('woff');
}
@font-face {
font-family: "SequelSansLight";
src: url('../../font/SequelSansLight/font.woff2') format('woff2'), url('../../font/SequelSansLight/font.woff') format('woff');
}
@font-face {
font-family: "SequelSansMedium";
src: url('../../font/SequelSansMedium/font.woff2') format('woff2'), url('../../font/SequelSansMedium/font.woff') format('woff');
}
@font-face {
font-family: "JansonTextPro55Roman";
src: url('../../font/JansonTextPro55Roman/font.woff2') format('woff2'), url('../../font/JansonTextPro55Roman/font.woff') format('woff');
}
@font-face {
font-family: "CarrigProMedium";
src: url('../../font/CarrigProMedium/font.woff2') format('woff2'), url('../../font/CarrigProMedium/font.woff') format('woff');
}
@font-face {
font-family: "TTRationalistNormal";
src: url('../../font/TTRationalistNormal/font.woff2') format('woff2'), url('../../font/TTRationalistNormal/font.woff') format('woff');
}







/* ---------- RESET ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, b, u, i, center, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {margin:0;padding:0;border:0;font-size: 100%;font:inherit;vertical-align: baseline;text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}
input:focus, textarea:focus{-webkit-apparence:none;outline: none;border:none;}
img{border:none;outline:none;vertical-align:top;font-size:0;line-height:0;}
img a{border:none;outline: none;}
a:focus{outline:none;}
hr {height:0;margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6, p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration:none;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}

img{width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);}

*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;   outline:none;box-sizing:border-box;margin:0;padding:0;}
/*----------------------------------*/

html,body{width: 100%;height: 100%;}



body{
    background:#FDFDFB;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;	
	font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    font-weight:400;
	color: #1E0E07;
}



/* =============================================== */


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    top:0;
    left:0;
	bottom: 0;
	right: 0;
	height: 100vh;
    z-index:1000;
	background: #FDFDFB;
    overflow:hidden;
}

#loader-bg .spinner {
    width: 100px;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    font-size: 0;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 100;
    -webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#loader-bg .spinner > div {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color:#CFD2D3;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
#loader-bg .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#loader-bg .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}




/* ---------------- */

.inView{
	position: relative;
	top: 4vw;
	opacity: 0;
	-webkit-transition: top 1.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s;
	transition: top 1.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s;
}
.inView.view{opacity: 1;top: 0;}

/* ---------------- */

/*
.guide,
.guide1,
.guide2,
.guide3,
.guide4{opacity: 0.2;z-index: 1000;position: relative;}

body:before{content: '';position: fixed;width: 1px;left: 50%;top: 0;bottom: 0;background: #FF0004;opacity: 0.3;z-index: 1000;}
.guide:before{content: '';position: fixed;width: 1px;left: 5%;top: 0;bottom: 0;background: #FF0004;}
.guide:after{content: '';position: fixed;width: 1px;right: 5%;top: 0;bottom: 0;background: #FF0004;}
.guide1:before{content: '';position: fixed;width: 1px;left: 10%;top: 0;bottom: 0;background: #FF0004;}
.guide1:after{content: '';position: fixed;width: 1px;right: 10%;top: 0;bottom: 0;background: #FF0004;}
.guide2:before{content: '';position: fixed;width: 1px;left: 15%;top: 0;bottom: 0;background: #FF0004;}
.guide2:after{content: '';position: fixed;width: 1px;right: 15%;top: 0;bottom: 0;background: #FF0004;}
.guide3:before{content: '';position: fixed;width: 1px;left: 7.5%;top: 0;bottom: 0;background: #00B5FF;}
.guide3:after{content: '';position: fixed;width: 1px;right: 7.5%;top: 0;bottom: 0;background: #00B5FF;}
.guide4:before{content: '';position: fixed;width: 1px;left: 12.5%;top: 0;bottom: 0;background: #00B5FF;}
.guide4:after{content: '';position: fixed;width: 1px;right: 12.5%;top: 0;bottom: 0;background: #00B5FF;}




/* ---------------------------------------------- */





#header{
	width: 100%;
	height: 100%;
	position: relative;
	background: #FDFDFB;
}

#header .titleBox{
	position: absolute;
	top: 60%;
	left: 9%;
	z-index: 20;
	color: #FFF;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .titleBox h2{
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	font-size: 2.0vw;
	letter-spacing: 0.08em;
}
#header .titleBox h1{
	font-family: "JansonTextPro55Roman";
	font-size: 2.2vw;
	letter-spacing: 0.08em;
	margin-top: 0.5em;
}
#header .titleBox h1 em{
	display: block;
	font-family: "CarrigProMedium";
	font-size: 1.8em;
	padding-bottom: 0.1em;
	letter-spacing: 0.03em;
}


#header .logo{
	position: absolute;
	top: 40px;
	right: 40px;
	width: 15%;
	max-width: 190px;
	z-index: 50;
}


#header .vegas{
    width: 100%;
    height: 100%;
    position: relative;
	z-index: 10;
	overflow: hidden;
}
#header .vegas .vegasImage{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width:100%;
    z-index: 10;
}

.scrollbar{
    width: 25px;
    position: absolute;
    left:3%;
	right: 0;
    bottom: -40px;
    height:140px;
    z-index: 100;
}
.scrollbar p{
    width: 16px;
	margin-top: 4px;
}
.scrollbar .base{
	width:1px;
	height:140px;
	position: absolute;
	bottom:0px;
	right: 0;
	overflow: hidden;
    z-index: 5;
    background:#605F5B;
}
.scrollbar .bar{
	width:1px;
	height:140px;
	position: absolute;
	bottom:0px;
	right: 0;
	overflow: hidden;
    z-index: 10;
}
.scrollbar .line{
		width: 100%;
		height: 100%;
		display: block;
		background: linear-gradient(to bottom,rgba(178, 176, 174, 1) 50%, rgba(178, 176, 174, 0) 50%);
		background-position: 0 -100%;
		background-size: 100% 200%;
		animation: scrolldown 3.0s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrolldown {
	0% {background-position: 0 100%;}
	50% {background-position: 0 0;}
	100% {background-position: 0 -100%;}
}


/*--------------------*/

.topNav{
	width: 85%;
	margin: 100px auto 0;
	max-width: 1080px;
	display: flex;
	color: #605F5B;
}
.topNav .menu{
	width: 33.333%;
	position: relative;
	display: block;
	opacity: 0;
	border-top: 1px solid #B2B0AE;
	border-left: 1px solid #B2B0AE;
	border-bottom: 1px solid #B2B0AE;
	-webkit-transition:opacity 1.4s;
	transition:opacity 1.4s;
}
.topNav .menu.m03::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	background: #B2B0AE;
	z-index: 60;
}
.topNav.view .menu{opacity: 1;}
.topNav.view .menu.m02{-webkit-transition-delay:0.3s;transition-delay:0.3s;}
.topNav.view .menu.m03{-webkit-transition-delay:0.6s;transition-delay:0.6s;}




.topNav .name{display: flex;align-items: flex-start;}
.topNav .name .num{
	width: 2.3em;
	font-size: 1.5em;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.02em;
	font-family: "SequelSansMedium";
	border-bottom: 1px solid #B2B0AE;
}
.topNav .name h3{
	display: flex;
	align-items: center;
	padding: 2.2em 0.5em 1.5em 1.5em;
	border-left: 1px solid #B2B0AE;
	font-family: "SequelSansBook";
	font-size: 1.125em;
}
.topNav .name h3 em{
	display: block;
	font-family: "CarrigProMedium";
	font-size: 1.55em;
}

.topNav figure{
	width: 100%;
	position: relative;
	border-top: 1px solid #B2B0AE;
	background: #CAB493;
}

.topNav .link{
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	padding: 30px 0;
}
.topNav .link a{
	border: 2px solid #A37E39;
	color: #605F5B;
	font-family: "SequelSansBook";
	font-size: 1.125em;
	line-height: 1;
	padding: 0.5em 1.5em;
	display: inline-flex;
	align-items: center;
}
.topNav .link a span{
	display: inline-block;
	width:0.9em;
	height: 1.4em;
	margin-left: 0.5em;
	background: #605F5B;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media(min-width: 769px) {
.topNav .menu figure a{-webkit-transition: opacity 0.4s;transition: opacity 0.4s;opacity: 1;}
.topNav .menu figure a:hover{opacity: 0.6;}
.topNav .link a{-webkit-transition: all 0.4s;transition: all 0.4s;}
.topNav .link a:hover{color: #FFF;background: #A37E39;}
.topNav .link a span{-webkit-transition: background 0.4s;transition: background 0.4s;}
.topNav .link a:hover span{background: #FFF;}
}



/*--------------------*/

.lead{
	width: 85%;
	margin: 0 auto;
	max-width: 1080px;
	font-size: 1.1em;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	color: #605F5B;
}
.lead .text{
	width: 87%;
	margin: 0 auto;
	padding: 2em 0;
	line-height: 2.16;
	text-align: justify;
	text-justify: inter-ideograph;
}

.lead .shoulder{
	width: 100%;
	border-top: 1px solid #B2B0AE;
	padding-top: 2.5em;
	text-align: right;
}
.lead .shoulder .logo{
	width: 265px;
	display: inline-block;
}
.lead .shoulder h3{
	font-size: 1.7em;
	font-family: "CarrigProMedium";
	letter-spacing: 0.03em;
	margin-top: 0.2em;
	display: block;
}



/*--------------------*/


article{width: 100%;overflow: hidden;}


/*--------------------*/

.catergory{width: 100%;margin-top: 240px;}

.cateHeader{
	width: 100%;
	position: relative;
	color: #FFF;
}
.cateHeader .cateTitle{
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 10;
	text-align: center;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.cateHeader .cateTitle h3{
	position: relative;
	opacity: 0;
	font-size: 1.6vw;
	letter-spacing: 0.07em;
	display: inline-block;
	padding: 0 0.5em 0.3em;
	font-family: "SequelSansMedium";
	-webkit-transition: opacity 1.2s 0.5s;
	transition: opacity 1.2s 0.5s;
}
.cateHeader.view .cateTitle h3{opacity: 1;}


.cateHeader .cateTitle h3 em{font-size: 1.18em;display: block;}
.cateHeader .cateTitle h3::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #A37E39;
}

.cateHeader .cateTitle h2{
	line-height: 1.2;
	letter-spacing: 0.07em;
	font-size: 3.5vw;
	margin-top: 0.8em;
	font-family: "CarrigProMedium";
	opacity: 0;
}
.cateHeader .cateTitle h2 span{
	position: relative;
	top: 0.5em;
	opacity:0;
}
.cateHeader .cateTitle h2 br.res{display: none;}

/*----*/

.cateHeader .imageSet{width: 100%;display: flex;}
.cateHeader.rev .imageSet{flex-direction: row-reverse;}
.cateHeader .imageSet .main{
	position: relative;
	width: 50%;
	padding-top: 54.6%;
	overflow: hidden;
}
.cateHeader .imageSet .sub{
	position: relative;
	width: 50%;
	overflow: hidden;
}

.cateHeader .imageSet span{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	background-position: center center;
	background-size: cover;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: transform 2.0s, opacity 2.0s;
	transition: transform 2.0s, opacity 2.0s;
}
.cateHeader.view .imageSet span{opacity: 1;-webkit-transform:scale(1.01);transform:scale(1.01);}



.ca01 .cateHeader .imageSet .main span{background-image: url("../../images/ca01main.webp");}
.ca02 .cateHeader .imageSet .main span{background-image: url("../../images/ca02main.webp");}
.ca03 .cateHeader .imageSet .main span{background-image: url("../../images/ca03main.webp");}
.ca01 .cateHeader .imageSet .sub span{background-image: url("../../images/ca01sub.webp");}
.ca02 .cateHeader .imageSet .sub span{background-image: url("../../images/ca02sub.webp");}
.ca03 .cateHeader .imageSet .sub span{background-image: url("../../images/ca03sub.webp");}




/*--------*/


.movieArea{
	width: 83%;
	max-width: 1040px;
	margin: 90px auto 0;
	background-position: center center;
	background-size: cover;
}

.ca01 .movieArea{background-image: url("../../images/movth01.webp");}
.ca02 .movieArea{background-image: url("../../images/movth02.webp");}
.ca03 .movieArea{background-image: url("../../images/movth03.webp");}

.movieArea .movieBox{
	width: 100%;
	padding-top: 56.25%;
	margin: 0 auto;
}
.movieArea .movieTopic01,
.movieArea .movieTopic02,
.movieArea .movieTopic03{
	width: 100%;
	padding-top: 56.25%;
	margin: 0 auto;
}

/*--------*/



.feature{
	width: 100%;
	margin-top: 90px;
}

.featureTitle{
	width: 100%;
	position: relative;
	text-align: center;
}
.featureTitle::before,
.featureTitle::after{
	content: "";
	position: absolute;
	height: 1px;
	background: #B2B0AE;
	width: 0;
	-webkit-transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.featureTitle::before{top: 0;right: 0;}
.featureTitle::after{bottom: 0;left: 0;}

.featureTitle.view::before,
.featureTitle.view::after{width: 100%;}



.featureTitle .featureName{padding: 3.6em 0 4.0em;}
.featureTitle.recommend .featureName{padding-bottom: 7em;}


.featureTitle .featureName h3{
	position: relative;
	display: inline-block;
	font-family: "SequelSansMedium";
	line-height: 1;
	letter-spacing: 0.05em;
	font-size: 1.625em;
	padding:0 0.7em 0.7em;
	opacity: 0;
	-webkit-transition: opacity 1.0s 0.6s;
	transition: opacity 1.0s 0.6s;
}
.featureTitle.view .featureName h3{opacity: 1;}
.featureTitle .featureName h3::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #5B5C57;
}

.featureTitle.recommend .featureName h3{padding-left: 0.2em;padding-right: 0.2em;}
.featureTitle.recommend .featureName h3::after{background: #A37E39;}

.featureTitle .featureName h2{
	font-family: "CarrigProMedium";
	line-height: 1;
	font-size: 3em;
	letter-spacing: 0.03em;
	margin-top: 1em;
	opacity: 0;
}
.featureTitle .featureName h2 span{
	position: relative;
	top: 0.5em;
	opacity:0;
}

.featureTitle .featureName h4{
	position: relative;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 600;
	color: #A37E39;
	line-height: 1.5;
	font-size: 1.75em;
	letter-spacing: 0.06em;
	margin-top: 0.8em;
	top: 0.6em;
	opacity: 0;
	-webkit-transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 1.0s 1.6s;
	transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 1.0s 1.6s;
}
.featureTitle.view .featureName h4{top: 0;opacity: 1;}



/*--------*/

.featureItem{
	width: 72%;
	max-width: 920px;
	margin: 0 auto;
	position: relative;
}
.featureItem::before,
.featureItem::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 100%;
	width: 1px;
	z-index: 10;
	background: #B2B0AE;
	-webkit-transition: bottom 1.6s cubic-bezier(0.11, 0, 0.5, 0);
	transition: bottom 1.6s cubic-bezier(0.11, 0, 0.5, 0);
}
.featureItem::before{left: 0;}
.featureItem::after{right: 0;}
.featureItem.view::before,
.featureItem.view::after{bottom: 0;}

.featureItem .copy{
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	font-size: 1.0em;
	width: 86%;
	margin: 0 auto;
	line-height: 2.2;
	padding: 3em 0;
	position: relative;
	text-align: justify;
	text-justify: inter-ideograph;
}
.featureItem figure{width: 100%;border-top: 1px solid #B2B0AE;}

.featureItem .specBox{
	width: 42%;
	margin-left: 55%;
	padding: 3em 0 4em; 
}

/*--------*/

.subTitle{
	width: 100%;
	text-align: center;
	position: relative;
}
.subTitle::before,
.subTitle::after{
	content: "";
	position: absolute;
	height: 1px;
	background: #B2B0AE;
	width: 0;
	-webkit-transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.subTitle::before{top: 0;right: 0;}
.subTitle::after{bottom: 0;left: 0;}
.subTitle.view::before,
.subTitle.view::after{width: 100%;}



.subTitle h2{
	font-family: "CarrigProMedium";
	line-height: 1;
	font-size: 3.12em;
	letter-spacing: 0.05em;
	padding: 2.1em 0;
	opacity: 0;
}
.subTitle h2 span{
	position: relative;
	top: 0.5em;
	opacity:0;
}
.subTitle h2 br.res{display: none;}

/*--------*/

.variation{
	width: 85%;
	max-width: 1080px;
	margin: 100px auto 110px;
	display: flex;
	justify-content: space-between;
}
.variation .varItem{
	position: relative;
	width: 31.5%;
	opacity: 0;
	top: 2em;
	-webkit-transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.variation.view .varItem{top: 0;opacity: 1;}

.variation .varItem.v02{-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.variation .varItem.v03{-webkit-transition-delay:1.0s;transition-delay:1.0s;}


.variation .varItem .varItemName{
	font-family: "TTRationalistNormal";
	font-size: 1.125em;
	line-height: 1.1;
	text-align: center;
	position: relative;
	padding-bottom: 1em;
}
.variation .varItem .varItemName span{
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0.3em;
	border-bottom: 1px solid #605F5B;
}
.variation .varItem .text{
	font-size: 0.812em;
	line-height: 2.0;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-bottom: 1.7em;
}

/*--------*/

.style{
	width: 75%;
	max-width: 960px;
	margin: 50px auto 90px;
}
.style .copy{
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	font-size: 1.0em;
	width: 85%;
	margin: 0 auto;
	line-height: 2.2;
	letter-spacing: 0.03em;
	text-align: justify;
	text-justify: inter-ideograph;
}


.style .styleList{width: 100%;margin-top: 60px;position: relative;z-index: 10;}
.style .styleList.second{margin-top: -3em;z-index: 8;}
.style .styleList.third{margin-top: -3em;z-index: 6;}
.style .styleList.four{margin-top: -3em;z-index: 4;}

.style .styleList .styleNum{width: 100%;font-family: "TTRationalistNormal";line-height: 1;position: relative;z-index: 5;}
.style .styleList .styleNum h4{font-size: 1.875em;}

.style .styleList .styleNum h5{display: flex;font-size: 1.55em;margin: 0.8em 0;}
.style .styleList .styleNum h5 em{padding-right: 0.2em;}
.style .styleList .styleNum h5 span{
	color: #B2B0AE;
	font-size: 0.75em;
	padding-top: 2em;
	padding-left: 0.3em;
	border-left: 1px solid #B2B0AE;
}
.style .styleList ul{
	width: 100%;
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: space-between;
}
.style .styleList ul li{width: 47%;}

.style .styleList figure{width: 100%;overflow: hidden;}
.style .styleList figure img{
	opacity: 0;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: transform 2.0s, opacity 2.0s;
	transition: transform 2.0s, opacity 2.0s;
}
.style .styleList figure.view img{opacity: 1;-webkit-transform:scale(1);transform:scale(1);}


.style .styleList .itemList{
	width: 95%;
	margin-left: 5%;
	margin-top: 1.4em;
}


/*--------*/


.itemMain{
	width: 75%;
	max-width: 960px;
	position: relative;
	margin: 110px auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.itemMain .visualBox{
	width: 53%;
	position: relative;
	z-index: 10;
	overflow: hidden;
}
.itemMain .visualBox .image{
	position: relative;
	opacity: 0;
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	-webkit-transition: transform 2.0s, opacity 2.0s;
	transition: transform 2.0s, opacity 2.0s;
}
.itemMain .visualBox.view .image{
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}
.itemMain .visualBox a{
	display: block;
	overflow: hidden;
	z-index: 5;
	position: relative;
}
@media(min-width:769px) {
.itemMain .visualBox a img{-webkit-transition: all 0.5s;transition: all 0.5s;}
.itemMain .visualBox a:hover img{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05);}
}

/*--------*/


.itemMain .itemBox{
	width:41%;
	position:relative;
	opacity: 0;
	-webkit-transition: opacity 1.5s;
	transition: opacity 1.5s;
}
.itemMain .itemBox.view{opacity: 1;}


.itemMain .itemBox figure{
	position: relative;
	width: 120%;
	left: -10%;
	margin-bottom: 2em;
}

.itemMain .itemBox .text{
	width: 100%;
	font-size: 0.825em;
	letter-spacing: 0.01em;
	line-height: 2.0;
	margin-bottom: 1em;
	text-align: justify;
	text-justify: inter-ideograph;
}



/*--------*/


.itemSlide{
	width: 100%;
	position: relative;
	padding-bottom: 60px;
}
.itemImageSlick::after{
	content: '';
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border: 1px solid #605F5B;
}

/* slick-dots */
.slick-dots{
    display:block;
    list-style:outside none none;
    padding:0;
    text-align:center;
    width:100%;
	position:absolute;
	bottom:-38px;
	z-index:10;
	font-size: 0;
}
.slick-dots li{
	cursor: pointer;
	display: inline-block;
    margin: 0 9px;
	width:40px;
    padding: 0;
    position: relative;
	vertical-align: top;
}
.slick-dots li:first-of-type{margin-left: 0;}
.slick-dots li:last-of-type{margin-right: 0;}
.slick-dots li button{
    cursor:pointer;
    display:block;
    font-size:0;
	width:100%;
	padding-top: 12px;
    line-height: 0;
    outline:medium none;
    position: relative;
	background: #000;
}
.slick-dots li.slick-active button:after{
	content: "";
	display: block;
	position: absolute;;
	left: -1px;
	right: -1px;
	bottom: -5px;
	height: 1px;
	background: #1E0E07;

}
.slick-dots li button{background-position: center center;background-size: cover;}

.f01 .variation .slick-dots li:nth-child(1) button{background: #727373;}
.f01 .variation .slick-dots li:nth-child(2) button{background: #333239;}
.f01 .itemMain .slick-dots li:nth-child(1) button{background: #5B5B53;}
.f01 .itemMain .slick-dots li:nth-child(2) button{background: #3D3E46;}

.f02 .variation .slick-dots li:nth-child(1) button{background: #5A595E;}
.f02 .variation .slick-dots li:nth-child(2) button{background: #99999B;}
.f02 .variation .slick-dots li:nth-child(3) button{background: #42424E;}
.f02 .itemMain .slick-dots li:nth-child(1) button{background: #959591;}
.f02 .itemMain .slick-dots li:nth-child(2) button{background: #525357;}

.f03 .variation01 .slick-dots li:nth-child(1) button{background: #4C4A40;}
.f03 .variation01 .slick-dots li:nth-child(2) button{background: #404147;}
.f03 .variation01 .slick-dots li:nth-child(3) button{background: #525254;}
.f03 .variation01 .slick-dots li:nth-child(4) button{background: #383749;}

.f03 .variation02 .v01 .slick-dots li:nth-child(1) button{background: #3B4441;}
.f03 .variation02 .v01 .slick-dots li:nth-child(2) button{background: #9C7A50;}
.f03 .variation02 .v01 .slick-dots li:nth-child(3) button{background: #484F5F;}

.f03 .variation02 .v02 .slick-dots li:nth-child(1) button{background: #3B4441;}
.f03 .variation02 .v02 .slick-dots li:nth-child(2) button{background: #9C7A50;}
.f03 .variation02 .v02 .slick-dots li:nth-child(3) button{background: #484F5F;}

.f03 .variation02 .v03 .slick-dots li:nth-child(1) button{background: #3B4441;}
.f03 .variation02 .v03 .slick-dots li:nth-child(2) button{background: #484F5F;}
/*--------*/


.itemList{
	width: 100%;
	margin: 0px auto;
	font-family: "SequelSansBook";
}
.itemList dl{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	margin-bottom: 1em;
	line-height: 1.15;
	/*margin-top: 1em;*/
}
.variation .itemList dl{margin-bottom: 0.7em;}

.itemList dl:not(.other):nth-child(1){margin-top: 0;}

.itemList .name{
	width: calc( 100% - 5.3em);
	letter-spacing: 0.02em;
	font-size: 1em;
}
.itemList .name em{display: block;}
.itemList .name span{
	font-size: 0.8em;
	padding-left: 0.2em;
	letter-spacing: 0;
	display: inline-block;
	padding-bottom: 0.1em;
	vertical-align: middle;
}
.itemList .detail{width: 5.3em;}
.itemList .detail a{
	display: block;
	width: 100%;
	border: 2px solid #A37E39;
	color: #A37E39;
	font-size: 1.125em;
	line-height: 1;
	text-align: center;
	padding: 0.25em 0;
}

@media(min-width: 769px) {
.itemList .detail a{-webkit-transition: all 0.4s;transition: all 0.4s;}
.itemList .detail a:hover{background:#A37E39;border-color:#A37E39;color: #FFF;}
}

/*---------*/

.itemList .kingsize{
	font-family: "SequelSansLight";
	font-size: 0.84em;
	color: #605F5B;
	padding-bottom: 0.2em;
}
.itemList .arrow{
	display: inline-block;
	position: relative;
	width: 1.8em;
	height: 1.1em;
	margin-left: 0.7em;
}
.itemList .arrow::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #605F5B;
}
.itemList .arrow::after{
	content: '';
	position: absolute;
	bottom: -0.11em;
	right: 0.2em;
	width:1px;
	height:65%;
	background: #605F5B;
	-webkit-transform:rotate(-50deg);
	transform:rotate(-50deg);
}

/*---------*/

.itemList .otherItem{display: none;}
.itemList .kingItem{display: none;}

.itemList .trigger{
	margin:0;
	display: inline-block;
	width: 100%;
	position: relative;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	font-family: "SequelSansLight";
	color: #605F5B;
}
.itemList .trigger.kingTrigger{margin:0.5em 0 1em;}

.itemList .trigger p.more{
	padding:0.5em 0;
	opacity: 1;
	letter-spacing: 0.05em;
	display: inline-block;
	-webkit-transition: opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
	transition: opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.itemList .trigger.open p.more{opacity: 0;}
.itemList .trigger.kingTrigger.open p.more{opacity: 1;}

.itemList .trigger p.close{
	position: absolute;
	top: 0;
	left: 90px;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.05em;
	padding:0.5em 0;
	opacity: 0;
	-webkit-transition: opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
	transition: opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.itemList .trigger.open p.close{opacity: 1;}
.itemList .trigger.kingTrigger.open p.close{opacity: 0;}


.itemList .trigger span{
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 30px;
	display: block;
	border: 2px solid #A37E39;
}
.itemList .trigger span:after,
.itemList .trigger span:before{
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	margin:0 auto;
	width: 16px;
	height: 2px;
	background: #A37E39;
	-webkit-transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1),background 0.4s;
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1),background 0.4s;
}

.itemList .trigger em{
	display: inline-block;
	position: relative;
	width: 30px;
	height: 1.1em;
	margin-left: 60px;
}

.itemList .trigger em::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 75%;
	height: 1px;
	background: #605F5B;
}
.itemList .trigger em::after{
	content: '';
	position: absolute;
	bottom: -0.11em;
	left: 0.2em;
	width:1px;
	height:65%;
	background: #605F5B;
	-webkit-transform:rotate(50deg);
	transform:rotate(50deg);
}




.itemList .trigger span:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.itemList .trigger.open span:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.itemList .trigger.open span:after{-webkit-transform:rotate(135deg);transform:rotate(135deg);}

@media(min-width: 769px) {
.itemList .trigger{-webkit-transition: color 0.4s;transition: color 0.4s;}
.itemList .trigger span{-webkit-transition: background 0.4s;transition: background 0.4s;}
/*.itemList .otherTrigger:hover{color:#969696;}*/
.itemList .trigger:hover span{background: #A37E39;}
.itemList .trigger:hover span:after,
.itemList .trigger:hover span:before{background: #FFF;}
}


/*---------------------------------------*/





/*---------------------------------------*/


.allBanner{
	width: 100%;
	/*max-width: 1060px;*/
	margin: 100px auto 0;
	position: relative;
	color: #FFF;
}
.otherContents .allBanner{margin-top: 0;}

.allBanner .spLink{display: none;}


.allBanner .photo{
	width: 100%;
	padding-top: 37.5%;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.ca01 .allBanner .photo{background-image: url("../../images/all_ca01.webp");}
.ca02 .allBanner .photo{background-image: url("../../images/all_ca02.webp");}
.ca03 .allBanner .photo{background-image: url("../../images/all_ca03.webp");}
.otherContents .allBanner .photo{background-image: url("../../images/all_other.webp");}


.allBanner .bannerInner{position: relative;width: 100%;}
.ca01 .allBanner .bannerInner{background:#605F5B;}
.ca02 .allBanner .bannerInner{background:#33453A;}
.ca03 .allBanner .bannerInner{background:#3C3F3F;}
.otherContents .allBanner .bannerInner{background:#3E3F4F;}


.allBanner .detail{
	width: 85%;
	max-width: 1200px;
	margin: 0 auto;
	height: 160px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.allBanner .detail h2{
	font-size: 2em;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-align: left;
}
.allBanner .detail h2 em{font-family: "SequelSansBook";}

.allBanner .more{
	position: absolute;
	top: 50%;
	right: 4%;
	display: inline-block;
	z-index: 15;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.allBanner .more a{
	display: block;
	font-family: "SequelSansBook";
	letter-spacing: 0.04em;
	font-size: 1.6em;
	text-align: center;
	line-height: 1;
	padding: 0.6em 1em 0.6em;
	border: 2px solid #FFF;
	box-sizing:content-box;
	color: #FFF;
}
@media(min-width: 769px) {
.allBanner .more a{-webkit-transition: all 0.4s;transition: all 0.4s;}
.ca01 .allBanner .more a:hover{background:#FFF;color:#605F5B;}
.ca02 .allBanner .more a:hover{background:#FFF;color:#33453A;}
.ca03 .allBanner .more a:hover{background:#FFF;color:#3C3F3F;}
.otherContents .allBanner .more a:hover{background:#FFF;color:#3E3F4F;}

}



/*---------------------------------------*/


.otherContents{
	width: 100%;
	margin:170px auto 0;
}


.otherContents .otherTitle{
	width: 100%;
	margin: 250px auto 0;
	position: relative;
	font-family: "SequelSansMedium";
	font-size: 5em;
	text-align: center;
	line-height: 1;
	padding: 0.9em 0;
}
.otherContents .otherTitle::before,
.otherContents .otherTitle::after{
	content: '';
	position: absolute;
	width: 0%;
	height: 2px;
	background: #B2B0AE;
	-webkit-transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.otherContents .otherTitle::before{right: 0;top: 0;}
.otherContents .otherTitle::after{left: 0;bottom: 0;}

.otherContents .otherTitle.view::before,
.otherContents .otherTitle.view::after{width: 100%;}
.otherContents .otherTitle h2{opacity: 0;}
.otherContents .otherTitle h2 span{
	position: relative;
	top: 0.4em;
	opacity:0;
}


.otherContents .otherList{
	width: 85%;
	max-width: 1040px;
	margin: 150px auto 0;
}
.otherContents .otherList ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.otherContents .otherList ul li{
	width: 47%;
	text-align: center;
	position: relative;
}
.otherContents .otherList .image{
	display: block;
	position: relative;
}
.otherContents .otherList .image h4{
	position: absolute;
	z-index: 5;
	top: 30px;
	right: 25px;
	width: 1px;
	height: 1px;
	font-family: "SequelSansMedium";
	line-height: 1;
	font-size: 2.3em;
	color: #FFF;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.otherContents .otherList .image h4 span{white-space:nowrap;}

.otherContents .otherList .text{
	width: 100%;
	background: #33453A;
	color: #FFF;
	font-weight: 500;
	font-size: 1.7em;
	line-height: 1;
}
.otherContents .otherList .text span{padding: 0.5em 0;display: block;}

.otherContents .otherList .text a{
	display: block;
	width: 100%;
	color: #FFF;
	font-size: 0.928em;
	font-family: "SequelSansBook";
	padding: 0.57em 0;
}


/*-----------------------------------------*/

.sns{
	width: 740px;
	margin: 160px auto 0;
}
.sns ul{
	width: 100%;
	display: flex;
}
.sns ul li{
	text-align: center;
	width: 33.3333%;
	padding: 10px 0;
	border-left: 2px solid #B2B0AE;
}
.sns ul li:first-child{border: none;}
.sns a{
	color: #1E0E07;
	letter-spacing: 0.05em;
	font-size: 24px;
	font-family: "SequelSansMedium";
}
.sns .icon{
	width: 47px;
	margin: 20px auto 0;
	-webkit-transition:opacity 0.4s;
	transition:opacity 0.4s;
}

@media(min-width:769px) {
.sns a:hover .icon{opacity: 0.5;}
}

/*--------------------*/

.lineBanner{
	width: 550px;
	margin: 160px auto;
	border: 1px solid #B2B0AE;
}
@media(min-width:769px) {
.lineBanner a{-webkit-transition:opacity 0.4s;transition:opacity 0.4s;}
.lineBanner a:hover{opacity: 0.6;}


}


/*-----------------------------------------------------------------------------------------------------*/


.footer{
	width: 100%;
	height: 100vh;
	color: #FFF;
	position: relative;
	overflow: hidden;
	background: url("../../images/footer_pc.webp") top center;
	background-size: cover;
}
.footer h2{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 26%;
	max-width: 340px;
	margin: 0 auto;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.footer .copyright{
	position: absolute;
	bottom: 6vh;
	left: 0;
	right: 0;
	letter-spacing: 0.1em;
	font-size: 1.5em;
	text-align: center;
	font-family: "SequelSansBook";
}
.footer .copyright br{display: none;}

.footer .pagetop{
	position: absolute;
	display: block;
	cursor: pointer;
	width: 55px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 10vh;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.spSpace{display: none;}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.sideNavi{
    position: fixed;
    top: 50%;
    right:-81px;
    width: 80px;
    z-index: 100;
    -webkit-transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform:translateY(-50%);
	transform:translateY(-50%);  
}

.sideNavi.view{right:0px;}
.sideNavi ul{width:100%;}
.sideNavi ul li{width: 100%;margin-bottom: 25px;}


.sideNavi .num{
	font-family: "SequelSansMedium";
	font-size: 12px;
	letter-spacing: 0.02em;
	position: relative;
	padding: 0 2px 1px;
	display: inline-block;
}
.sideNavi .num::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #B2B0AE;
}
.sideNavi h2{
	font-family: "CarrigProMedium";
	font-size: 13px;
	line-height: 1;
	padding: 6px 0 5px;
}

.sideNavi .photo{
	display: block;
	background: #D1CFCE;
	overflow: hidden;
	position:relative;
}
.sideNavi .photo img{
	opacity: 0.5;
	overflow: hidden;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.sideNavi .photo h3{
	position: absolute;
	z-index: 5;
	top: 6px;
	right: 3px;
	width: 1px;
	height: 1px;
	font-family: "SequelSansMedium";
	line-height: 1;
	font-size: 11px;
	color: #FFF;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.sideNavi .photo h3 span{white-space:nowrap;}


.sideNavi .current .photo img{opacity: 1;}
.sideNavi  a:hover .photo img{opacity: 0.7;}

.sideNavi a{
	display: block;
	color: #605F5B;
	-webkit-transition: color 0.4s;
	transition: color 0.4s;
}


.sideNavi .pagetop{
    width: 50%;
    margin: 0 auto;
    cursor: pointer;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
.sideNavi .pagetop:hover{opacity:0.5;}




.spBottomNavi{display: none;}







/* ========================= Slider =============================== */

.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
	outline:none;
}
.coordinate .slick-list{overflow:visible;}
.coordinate .collectionItems .slick-list{overflow:hidden;}


.slick-list:focus{
	outline:none;
}
.slick-list.dragging{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after{
    display: table;
    content: '';
}
.slick-track:after{
    clear: both;
}
.slick-loading .slick-track{
    visibility: hidden;
}

.slick-slide{
    display: none;
    float: left;
	position: relative;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide{
    float: right;
}
.slick-slide img{
    display: block;
}
.slick-slide.slick-loading img{
    display: none;
}
.slick-slide.dragging img{
    pointer-events: none;
}
.slick-initialized .slick-slide{
    display: block;
}
.slick-loading .slick-slide{
    visibility: hidden;
}
.slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Prev Next Button */

.slick-prev,
.slick-next {
    cursor:pointer;
    display:block;
    font-size:0;
    line-height:0;
    width: 6vw;
    height: 6vw;
    position:absolute;
    top:50%;
	margin-top: -3vw;
    z-index:50;
	border:none;
}
.slick-prev{left:-7vw;background-image: url("../../images/slick_arrow_left.svg");}
.slick-next{right:-7vw;background-image: url("../../images/slick_arrow_right.svg");}