@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
*/

@font-face {
  font-family: "SequelSansBook";
  src: url('../../font/SequelSansBook/font.woff2') format('woff2'), url('../../font/SequelSansBook/font.woff') format('woff');
}
@font-face {
  font-family: "MaisonNeueDemi";
  src: url('../../font/MaisonNeueDemi/font.woff2') format('woff2'), url('../../font/MaisonNeueDemi/font.woff') format('woff');
}
@font-face {
  font-family: "TTRationalistLight";
  src: url('../../font/TTRationalistLight/font.woff2') format('woff2'), url('../../font/TTRationalistLight/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:#E8E8E8;
    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: #1A1A1A;
}



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


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    top:0;
    left:0;
	bottom: 0;
	right: 0;
	height: 100vh;
    z-index:1000;
	background: #E8E8E8;
    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: #EBF0DF;
}

#header .titleBox{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
}
#header .titleBox h1{
	position: absolute;
	left: 69.85%;
	top: 45%;
	width: 8%;
	max-width: 17vh;
	z-index: 5;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .titleBox .logo{
	position: absolute;
	top: 2.1vw;
	right: 2.1vw;
	width: 9.4%;
	z-index: 5;
}

.cover-slider_wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	overflow: hidden;
}
.cover-slider_wrap.slide01{left: 0;width:70%;}
.cover-slider_wrap.slide02{right: 0;width:30%;}

.cover-slider {backface-visibility: hidden;}

.cover-slider_slide{
	position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
	left: 0;
	width: 0%;
    background-size:cover;
    background-position: center;
    list-style: none;
    z-index: 1;
}
.cover-slider_slide.active{
	animation-duration: 2000ms;
	animation-fill-mode: forwards;
	animation-name: slidein;
	animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	 z-index: 2;
}
.cover-slider_slide.inactive{
	animation-duration: 2000ms;
	animation-fill-mode: forwards;
	animation-name: slideout;
	animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1);
	 z-index: 1;
}

.slide01 .cover-slider_slide:nth-child(1){background-image: url("../../images/mainpc01.webp");width: 100%;}
.slide01 .cover-slider_slide:nth-child(2){background-image: url("../../images/mainpc02.webp");}
.slide02 .cover-slider_slide:nth-child(1){background-image: url("../../images/mainpc03.webp");width: 100%;}
.slide02 .cover-slider_slide:nth-child(2){background-image: url("../../images/mainpc04.webp");}
@keyframes slidein{
	0% {left: -100%;width: 100%;}
	100%  {left: 0;width: 100%;}
}
@keyframes slideout{
	0% {left: 0;width: 100%;}
	100%  {left: 60%;width: 100%;}
}
@keyframes slidein02{
	0% {right: -100%;width: 100%;}
	100%  {right: 0;width: 100%;}
}
@keyframes slideout02{
	0% {right: 0;width: 100%;}
	100%  {right: 60%;width: 100%;}
}



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


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

.lead{
	width: 87.5%;
	max-width: 1140px;
	margin: 80px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lead h2{width: 205px;}
.lead .copy{
	width:calc(100% - 260px);
	letter-spacing: 0.03em;
	line-height: 2.1;
}

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


.topNav{
	width: 100%;
	display: flex;
}
.topNav .menu{
	width: 25%;
	position: relative;
	opacity: 0;
	top: 4vw;
	-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;
}
.topNav.view .menu{opacity: 1;top: 0;}
.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.view .menu.m04{-webkit-transition-delay:0.9s;transition-delay:0.9s;}

.topNav .menu::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	z-index: 5;
	background: #86808E;
}
.topNav .menu.m04::after{display: none;}


.topNav .menu a{
	width: 100%;
	display: block;
	color: #FFF;
	position: relative;
	z-index: 10;
}
.topNav .menu figure{
	width: 100%;
	position: relative;
	background:#EAEADD;
}
.topNav .menu figure figcaption{
	position: absolute;
	z-index: 5;
	top: 20px;
	right: 18px;
	width: 1px;
	height: 1px;
	font-family: "MaisonNeueDemi";
	line-height: 1;
	font-size: 2.8vw;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.topNav .menu figure figcaption span{white-space:nowrap;}

.topNav .menu figure figcaption br{display: none;}

.topNav .menu .text{
	width: 100%;
	position: relative;
}
.topNav .menu .text h3{
	width: 87.5%;
	max-width: 380px;
	margin: 2em auto 0;
	font-size: 0.875em;
	font-family: "TTRationalistLight";
}
.topNav .menu .text p{
	width: 87.5%;
	max-width: 380px;
	margin: 0.8em auto 0;
	font-size: 0.75em;
	line-height: 1.7;
	padding-bottom: 5em;
}

@media(min-width: 769px) {

.topNav .menu a figure img{-webkit-transition: opacity 0.4s;transition: opacity 0.4s;opacity: 1;}
.topNav .menu a:hover figure img{opacity: 0.5;}

.topNav .menu a figure figcaption{-webkit-transition: color 0.4s;transition: color 0.4s;}
.topNav .menu a:hover figure figcaption{color: #1A1A1A;}

}


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

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


.cateHeader{
	width: 100%;
	position: relative;
}
.cateHeader .cateTitle{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
.cateHeader .cateTitle h2{
	position: absolute;
	font-family: "MaisonNeueDemi";
	line-height: 1;
	font-size: 7.8vw;
	opacity: 0;
}
.cateHeader .cateTitle h2 span{
	position: relative;
	top: 10px;
	left: 20px;
	opacity:0;
}
.ca01 .cateHeader .cateTitle h2{color: #FFF;top:10%;left:45%;}
.ca02 .cateHeader .cateTitle h2{color: #9C9A99;top:10%;left:14%;}
.ca03 .cateHeader .cateTitle h2{color: #694938;top:10%;left:52.3%;}
.ca04 .cateHeader .cateTitle h2{color: #393A34;top:10%;left:50.3%;}


.cateHeader .cateTitle h3{
	position: absolute;
	width: 6vw;
	opacity: 0;
	-webkit-transition: opacity 1.2s 1.0s;
	transition: opacity 1.2s 1.0s;
}
.cateHeader.view .cateTitle h3{opacity: 1;}

.ca01 .cateHeader .cateTitle h3{top:48%;left:49%;}
.ca02 .cateHeader .cateTitle h3{top:46%;left:14%;}
.ca03 .cateHeader .cateTitle h3{top:47%;left:49%;}
.ca04 .cateHeader .cateTitle h3{top:47%;left:49%;}



.cateHeader .cateTitle h4{
	position: absolute;
	top: 7%;
	left: -35px;
	border-left: 2px solid;
	width: 1px;
	height: 3.8vw;
	font-family: "TTRationalistLight";
	/*font-size: 1vw;*/
	font-size: 0.95vw;
	letter-spacing: 0.03em;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.0s;
	transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.0s;
}
.cateHeader.view .cateTitle h4{left: 1.7vw;}

.ca01 .cateHeader .cateTitle h4{border-color:#CCC;color:#DDD8C3;}
.ca02 .cateHeader .cateTitle h4{border-color:#9C9A99;color:#9C9A99;}
.ca03 .cateHeader .cateTitle h4{border-color:#694938;color:#694938;}
.ca04 .cateHeader .cateTitle h4{border-color:#393A34;color:#393A34;}

.cateHeader .cateTitle h4 span{
	position: relative;
	top: 0.9em;
	left: 1.2em;
	display: block;
	white-space:nowrap;
}


.cateHeader .imageSet{width: 100%;display: flex;}
.cateHeader.rev .imageSet{flex-direction: row-reverse;}
.cateHeader .imageSet .main{
	position: relative;
	width: 61.7%;
	padding-top: 54.6%;
	background-position: center center;
	background-size: cover;
}
.cateHeader .imageSet .sub{
	position: relative;
	width: 38.3%;
	background-position: center center;
	background-size: cover;
}

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






.cateHeader .imageSet .main::after,
.cateHeader .imageSet .sub::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: #E8E8E8;
	-webkit-transition: top 1.0s cubic-bezier(0.45, 0, 0.55, 1), bottom 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition: top 1.0s cubic-bezier(0.45, 0, 0.55, 1), bottom 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.cateHeader.view .imageSet .main::after{top: 100%;}
.cateHeader.view .imageSet .sub::after{bottom: 100%;}



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


.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");}

.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;
}




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

.teemu{
	width: 100%;
	background: #263A30;
	padding: 90px 0;
	margin-top: 90px;
	position: relative;
}

.teemu::after{
	content: '';
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: 0;
	width: 100%;
	z-index: 50;
	background: #E8E8E8;
	-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);
}
.teemu.view::after{width: 0;}


.teemu .inner{
	width: 85%;
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.teemu .image{
	width: 320px;
}
.teemu .text{
	width: calc(100% - 320px);
	padding: 0 1em 0 3.5em;
	position: relative;
	display: flex;
	align-items: center;
	color: #C9C5C0;
}
.teemu .text h2{
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
}

.teemu .text .textIn{
	width: 100%;
}
.teemu .text .textIn h3{font-size: 1.5em;line-height: 1.2;}
.teemu .text .textIn h3 em{ font-family: "MaisonNeueDemi";font-size: 1.5em;display: block;}
.teemu .text .textIn p{font-size: 0.875em;margin-top: 4em;line-height: 2.5;}


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

.featureTitle{
	width: 100%;
	margin-top: 200px;
	position: relative;
}

.f01 .featureTitle{margin-top: 180px;}
.f05 .featureTitle,
.f09 .featureTitle,
.f10 .featureTitle{margin-top: 90px;}


.featureTitle .featureName{
	position: absolute;
	bottom: 2.5vw;
	left: 32.5vw;
	z-index: 10;
	color: #FFF;
	-webkit-transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.0s 0.8s;
	transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.0s 0.8s;
}

.featureTitle.rev .featureName{left: 12.5vw;}
.f07 .featureTitle .featureName{left: 56vw;}
.f10 .featureTitle .featureName{left: 32.5vw;}


.featureTitle .featureName h2{
	font-family: "MaisonNeueDemi";
	line-height: 1.1;
	font-size: 6.1vw;
	margin-top: 0.2em;
	opacity: 0;
}
.featureTitle .featureName h2 span{
	position: relative;
	top: 10px;
	left: 20px;
	opacity:0;
}
.featureTitle .featureName h2 br.res{display: none;}

.featureTitle .featureName h3{
	font-family: "TTRationalistLight";
	font-size: 0.88em;
	border-left: 2px solid #FFF;
	padding: 1em;
	position: relative;
	left: 1em;
	opacity: 0;
	-webkit-transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.0s, opacity 1.0s 1.0s;
	transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.0s, opacity 1.0s 1.0s;
}
.featureTitle.view .featureName h3{left: 0;opacity: 1;}
.featureTitle.view .featureName h3 br{display: none;}




.f02 .featureTitle .featureName{color: #922A40;}
.f02 .featureTitle .featureName h3{border-color: #922A40;}
.f03 .featureTitle .featureName{color: #EAEADD;}
.f03 .featureTitle .featureName h3{border-color: #EAEADD;}
.f04 .featureTitle .featureName{color: #EAEADD;}
.f04 .featureTitle .featureName h3{border-color: #EAEADD;}
.f07 .featureTitle .featureName{color: #412A60;}
.f07 .featureTitle .featureName h3{border-color: #412A60;}
.f08 .featureTitle .featureName{color: #DDD8C3;}
.f08 .featureTitle .featureName h3{border-color: #DDD8C3;}


.featureTitle .featureImageSet{width: 100%;display: flex; flex-direction: row-reverse;}
.featureTitle.rev .featureImageSet{flex-direction:row;}


.featureTitle .featureImageSet .main{
	position: relative;
	width: 71%;
	padding-top: 30%;
	background-position: center center;
	background-size: cover;
}
.featureTitle .featureImageSet .sub{
	position: relative;
	width: 29%;
	background-position: center center;
	background-size: cover;
}

.f01 .featureTitle .featureImageSet .main{background-image: url("../../images/fea01main.webp");}
.f02 .featureTitle .featureImageSet .main{background-image: url("../../images/fea02main.webp");}
.f03 .featureTitle .featureImageSet .main{background-image: url("../../images/fea03main.webp");}
.f04 .featureTitle .featureImageSet .main{background-image: url("../../images/fea04main.webp");}
.f05 .featureTitle .featureImageSet .main{background-image: url("../../images/fea05main.webp");}
.f06 .featureTitle .featureImageSet .main{background-image: url("../../images/fea06main.webp");}
.f07 .featureTitle .featureImageSet .main{background-image: url("../../images/fea07main.webp");}
.f08 .featureTitle .featureImageSet .main{background-image: url("../../images/fea08main.webp");}
.f09 .featureTitle .featureImageSet .main{background-image: url("../../images/fea09main.webp");}
.f10 .featureTitle .featureImageSet .main{background-image: url("../../images/fea10main.webp");}
.f11 .featureTitle .featureImageSet .main{background-image: url("../../images/fea11main.webp");}

.f01 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea01sub.webp");}
.f02 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea02sub.webp");}
.f03 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea03sub.webp");}
.f04 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea04sub.webp");}
.f05 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea05sub.webp");}
.f06 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea06sub.webp");}
.f07 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea07sub.webp");}
.f08 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea08sub.webp");}
.f09 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea09sub.webp");}
.f10 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea10sub.webp");}
.f11 .featureTitle .featureImageSet .sub{background-image: url("../../images/fea11sub.webp");}



.featureTitle .featureImageSet .main::after,
.featureTitle .featureImageSet .sub::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: #E8E8E8;
	-webkit-transition: top 0.8s cubic-bezier(0.45, 0, 0.55, 1), bottom 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	transition: top 0.8s cubic-bezier(0.45, 0, 0.55, 1), bottom 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.featureTitle.view .featureImageSet .main::after{bottom: 100%;}
.featureTitle.view .featureImageSet .sub::after{top: 100%;}



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


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

.itemMain .mainName{
	width: 100%;
	position: relative;
}
.itemMain .mainName .num{
	 font-family: "TTRationalistLight";
	 font-size: 1.125em;
	 display: inline-block;
	 position: relative;
	 line-height: 1;
	 padding: 0.7em 0.9em;
}
.itemMain .mainName .num span{
	opacity: 0;
	 -webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
}
.itemMain .mainName.view .num span{opacity: 1;}

.itemMain .mainName .num::before,
.itemMain .mainName .num::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	opacity: 0;
}
.itemMain .mainName .num::before{
	left: 50%;
	-webkit-transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.itemMain .mainName .num::after{
	right: 50%;
	-webkit-transition: right 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: right 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.itemMain .mainName.view .num::before{left: 0;opacity: 1;}
.itemMain .mainName.view .num::after{right: 0;opacity: 1;}



.f09 .itemMain .mainName{color: #694938;}
.f09 .itemMain .mainName .num::before,
.f09 .itemMain .mainName .num::after{background: #694938;}

.f10 .itemMain .mainName{color: #1A1A1A;}
.f10 .itemMain .mainName .num::before,
.f10 .itemMain .mainName .num::after{background: #1A1A1A;}



.itemMain .mainName h2{
	font-family: "MaisonNeueDemi";
	font-size: 4.8em;
	line-height: 1;
	margin-top: 0.4em;
	padding-bottom: 1em;
	opacity: 0;
}
.itemMain .mainName h2 span{
	position: relative;
	top: 10px;
	left: 20px;
	opacity:0;
}


.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 1.5s;
	transition: transform 2.0s, opacity 1.5s;
}
.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;
}
.itemMain .itemBox .itemSlide{
	width: 100%;
	position: relative;
	padding-bottom: 60px;
}
.itemMain .itemBox .itemImageSlick::after{
	content: '';
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border: 1px solid #1A1A1A;
}




.itemMain .itemBox .colorTip{
	width: 100%;
	text-align: center;
	position:absolute;
	bottom: 17px;
	left: 0;
}
.itemMain .itemBox .colorTip span{
	display: inline-block;
	width: 30px;
	height: 16px;
	position: relative;
	margin: 0 10px;
}

.itemMain .itemBox .colorTip span:after{
	content: "";
	display: block;
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border: 1px solid #1A1A1A;
}

.f04 .itemMain .itemBox .colorTip span:after{display: none;}
.f04 .itemMain .itemBox .colorTip span:nth-child(1){background: #1A1A1A;}
.f04 .itemMain .itemBox .colorTip span:nth-child(2){background: #D4D3CB;}
.f06 .itemMain .itemBox .colorTip span{background: #2A2729;}

.itemMain.f10m03 .itemBox .colorTip span{
	background: url("../../images/f1003_color.webp") center center;
	background-size: cover;
}



/* slick-dots */
.slick-dots{
    display:block;
    list-style:outside none none;
    padding:0;
    text-align:center;
    width:100%;
	position:absolute;
	bottom:-39px;
	z-index:10;
	font-size: 0;
}
.slick-dots li{
	cursor: pointer;
	display: inline-block;
    margin: 0 10px;
	width:30px;
    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: 16px;
    line-height: 0;
    outline:medium none;
    position: relative;
	background: #000;
}
.slick-dots li.slick-active button:after{
	content: "";
	display: block;
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border: 1px solid #1A1A1A;
}
.slick-dots li button{background-position: center center;background-size: cover;}


.f01 .slick-dots li:nth-child(1) button{background: #A2835C;}
.f01 .slick-dots li:nth-child(2) button{background: #585033;}
.f01 .slick-dots li:nth-child(3) button{background: #43484E;}
.f02 .slick-dots li:nth-child(1) button{background: #762A24;}
.f02 .slick-dots li:nth-child(2) button{background: #434827;}
.f02 .slick-dots li:nth-child(3) button{background: #E9E1CF;}
.f03 .slick-dots li:nth-child(1) button{background: #64694A;}
.f03 .slick-dots li:nth-child(2) button{background: #616D83;}
.f03 .slick-dots li:nth-child(3) button{background: #B39469;}
.f05 .slick-dots li:nth-child(1) button{background: #514C3B;}
.f05 .slick-dots li:nth-child(2) button{background: #B8B4B0;}
.f05 .slick-dots li:nth-child(3) button{background: #1A1A1A;}
.f07 .slick-dots li:nth-child(1) button{background: #453953;}
.f07 .slick-dots li:nth-child(2) button{background: linear-gradient(90deg, #2C333C 50%, #453953 50%, #453953);}
.f07 .slick-dots li:nth-child(3) button{background: #1A1A1A;}
.f07 .slick-dots li:nth-child(4) button{background: #D1CBBE;}
.f08 .slick-dots li:nth-child(1) button{background: #5D5D4B;}
.f08 .slick-dots li:nth-child(2) button{background: #A68665;}
.f08 .slick-dots li:nth-child(3) button{background: #E8E4DE;}
.f08 .slick-dots li:nth-child(4) button{background: #1A1A1A;}
.f09m01 .slick-dots li:nth-child(1) button{background: #AE937B;}
.f09m01 .slick-dots li:nth-child(2) button{background: #412A60;}
.f09m01 .slick-dots li:nth-child(3) button{background: #E2CFBA;}
.f09m02 .slick-dots li:nth-child(1) button{background: #AE937B;}
.f09m02 .slick-dots li:nth-child(2) button{background: #412A60;}
.f09m02 .slick-dots li:nth-child(3) button{background: #E2CFBA;}
.f09m03 .slick-dots li:nth-child(1) button{background: #AE937B;}
.f09m03 .slick-dots li:nth-child(2) button{background: #412A60;}
.f09m03 .slick-dots li:nth-child(3) button{background: #E2CFBA;}
.f10m01 .slick-dots li:nth-child(1) button{background: #1A1A1A;}
.f10m01 .slick-dots li:nth-child(2) button{background: #7d0522;}
.f10m01 .slick-dots li:nth-child(3) button{background: #2b2c36;}
.f10m01 .slick-dots li:nth-child(4) button{background: #412a60;}
.f10m01 .slick-dots li:nth-child(5) button{background: #dcd7ca;}
.f10m02 .slick-dots li:nth-child(1) button{background: #414136;}
.f10m02 .slick-dots li:nth-child(2) button{background: #3b3b48;}
.f11 .slick-dots li:nth-child(1) button{background: linear-gradient(90deg, #1a1a1a 50%, #615f50 50%, #615f50);}
.f11 .slick-dots li:nth-child(2) button{background: #1a1a1a;}
.f11 .slick-dots li:nth-child(3) button{background: #615f50;}




/*--------------------Cross Fade-------------------*/

.crossfade_wrap{
	position: relative;
	width: 100%;
}
.crossfade{
	backface-visibility: hidden;
	width: 100%;
}
.itemMain .crossfade_wrap .crossfade{padding-top: 142.745%;}
.style .crossfade_wrap .crossfade{padding-top: 149.33%;}

.crossfade_slide{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
	right: 0;
	width: 100% !important;
    background-size:cover;
    background-position: center center;
    list-style: none;
}
.f03 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f03style01.webp");}
.f03 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f03style0102.webp");opacity: 0;}
.f04 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f04main.webp");}
.f04 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f04main02.webp");opacity: 0;}

.crossfade_slide.active {
	animation-duration: 1000ms;
	animation-name: crossfadein;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}
.crossfade_slide.inactive {
	animation-duration: 1000ms;
	animation-name: crossfadeout;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes crossfadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes crossfadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}






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

.itemMain .itemBox .text{
	width: 100%;
	font-size: 0.875em;
	letter-spacing: 0.03em;
	line-height: 2.0;
	margin-bottom: 35px;
	text-align: justify;
	text-justify: inter-ideograph;
}

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

.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-top: 1em;
}
.itemList dl:not(.other):nth-child(1){margin-top: 0;}

.itemList .name{
	width: calc( 100% - 5.3em);
	letter-spacing: 0.02em;
	font-size: 1.12em;
	line-height: 1.15;
}
.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: 1px solid #1A1A1A;
	color: #1A1A1A;
	font-size: 1.125em;
	text-align: center;
	padding: 0.15em 0;
}

.style .itemList{width: 93%;}
.style .itemList .name{font-size: 1em;}
.style .itemList .detail a{font-size: 1.1em;}


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

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

.itemList .otherItem{display: none;}
.itemList .otherTrigger{
	margin-top:1.5em;
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.itemList .otherTrigger p.more{
	font-size: 1em;
	line-height: 1;
	margin-left: 50px;
	padding:0.5em 0;
	opacity: 1;
	letter-spacing: 0.05em;
	-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 .otherTrigger.open p.more{opacity: 0;}
.itemList .otherTrigger p.close{
	position: absolute;
	top: 0;
	left: 50px;
	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 .otherTrigger.open p.close{opacity: 1;}

.itemList .otherTrigger span{
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 30px;
	display: block;
	border: 1px solid #1A1A1A;
}
.itemList .otherTrigger span:after,
.itemList .otherTrigger span:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin:0 auto;
	width: 15px;
	height: 1px;
	background: #1A1A1A;
	-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 .otherTrigger span:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.itemList .otherTrigger.open span:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.itemList .otherTrigger.open span:after{-webkit-transform:rotate(135deg);transform:rotate(135deg);}
@media(min-width: 769px) {
.itemList .otherTrigger{-webkit-transition: color 0.4s;transition: color 0.4s;}
.itemList .otherTrigger span{-webkit-transition: border-color 0.4s;transition: border-color 0.4s;}
.itemList .otherTrigger:hover{color:#969696;}
.itemList .otherTrigger:hover span{border-color: #969696;}
.itemList .otherTrigger:hover span:after,
.itemList .otherTrigger:hover span:before{background: #969696;}
}


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



.style{
	width: 75%;
	max-width: 960px;
	margin:130px auto 0;
}

.style.layer{width: 81%;max-width: 1040px;}



.style .styleLead{}
.style .styleLead .styleTitle{
	position: relative;
	width: 100%;
	font-family: "MaisonNeueDemi";
	color: #393A34;
}
.style .styleLead .styleTitle h3{
	 font-size: 3.875em;
	 line-height: 1.2;
	 position: relative;
	 padding-top: 0.5em;
}
.style .styleLead .styleTitle h3 span{
	display: inline-block;
	position: relative;
	left: 0.8em;
	opacity: 0;
	-webkit-transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.style .styleLead.view .styleTitle h3 span{left: 0;opacity: 1;}
.style .styleLead .styleTitle h3 span.bottom{
	-webkit-transition-delay:0.4s;
	transition-delay:0.4s;
}

.style .styleLead .styleTitle h3::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: #393A34;
	-webkit-transition: width 1.0s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.0s cubic-bezier(0.45, 0, 0.55, 1);
}
.style .styleLead.view .styleTitle h3::before{width: 1.7em;}

.style .styleLead .styleTitle.underLine h3{padding-bottom: 0.5em;}
.style .styleLead .styleTitle.underLine h3::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: #393A34;
	-webkit-transition: width 1.0s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.0s cubic-bezier(0.45, 0, 0.55, 1);
}
.style .styleLead.view .styleTitle.underLine h3::after{width: 1.7em;}


.style .styleLead .styleTitle h4{
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 2.375em;
	line-height: 0.85;
	letter-spacing: 0.02em;
	padding: 0.6em 0.3em 0 0;
	border-right: 2px solid #393A34;
	opacity: 0;
	-webkit-transition: opacity 1.0s 1.0s;
	transition: opacity 1.0s 1.0s;
}
.style .styleLead.view .styleTitle h4{opacity: 1;}


.style.layer .styleLead .styleCopy{
	width: 80%;
	font-size: 1.0em;
	line-height: 2.1;
	margin-top: 3em;
	position: relative;
	top: 3em;
	opacity: 0;
	-webkit-transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.6s, opacity 1.2s 0.6s;
	transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.6s, opacity 1.2s 0.6s;
}
.style .styleLead.view .styleCopy{opacity: 1;top: 0;}







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

.styleList{
	width: 100%;
	margin: 0 auto;
}
.styleList > ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 100px;
}

.style .styleList > ul.narrow{margin-top:70px;}

.styleList > ul > li{width: 46.7%;}


.layer .styleList > ul > li{width: 43.2%;}
.layer .styleList > ul > li.kakeru{
	width:13.6%;
	position: relative;
}
.layer .styleList > ul > li.kakeru span{
	position: absolute;
	width: 50%;
	top:380px;
	left: 25%;
	height: 2px;
	background: #CCC;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.layer .styleList > ul > li.kakeru span::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: #CCC;
	top: 0;
	left: 0;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}


.styleList h5{
	font-family: "TTRationalistLight";
	font-size: 1.562em;
	text-align: center;
	letter-spacing: 0.05em;
	padding-bottom: 0.8em;
}



.styleList .image{
	width: 100%;
	position: relative;
	margin-bottom: 1.7em;
}



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


.allBanner{
	width: 100%;
	/*max-width: 1060px;*/
	margin: 200px 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");}
.ca04 .allBanner .photo{background-image: url("../../images/all_ca04.webp");}
.otherContents .allBanner .photo{background-image: url("../../images/all_other.webp");}



.allBanner .bannerInner{
	position: relative;
	width: 100%;
}
.ca01 .allBanner .bannerInner{background:#263a30;}
.ca02 .allBanner .bannerInner{background:#565654;}
.ca03 .allBanner .bannerInner{background:#694938;}
.ca04 .allBanner .bannerInner{background:#3E3A34;}
.otherContents .allBanner .bannerInner{background:#565654;}


.allBanner .detail{
	width: 85%;
	max-width: 1280px;
	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 .detail h2 br{display:none;}
.allBanner .detail h2 br.fix{display:block;}

.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:#263a30;}
.ca02 .allBanner .more a:hover{background:#FFF;color:#565654;}
.ca03 .allBanner .more a:hover{background:#FFF;color:#694938;}
.ca04 .allBanner .more a:hover{background:#FFF;color:#3E3A34;}
.otherContents .allBanner .more a:hover{background:#FFF;color:#565654;}

}



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


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


.otherContents .otherTitle{
	width: 85%;
	max-width: 920px;
	margin: 250px auto 0;
	position: relative;
	font-family: "MaisonNeueDemi";
	font-size: 5em;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1;
}
.otherContents .otherTitle::before,
.otherContents .otherTitle::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #393a34;
}
.otherContents .otherTitle::before{left: 0;}
.otherContents .otherTitle::after{right: 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: "MaisonNeueDemi";
	line-height: 1;
	font-size: 2.3em;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.otherContents .otherList .ol02 .image h4{color: #FFF;}
.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;
	padding: 0.5em 0;
}

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

.sns{
	width: 740px;
	margin: 160px auto 0;
}
.sns ul{
	width: 100%;
	display: flex;
}
.sns ul li{
	text-align: center;
	width: 33.3333%;
	padding: 25px 0;
	border-left: 2px solid #1A1A1A;
}
.sns ul li:first-child{border: none;}
.sns a{
	color: #1E0E07;
	letter-spacing: 0.05em;
	font-size: 24px;
	font-family: "MaisonNeueDemi";
}
.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 #1A1A1A;
}
@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") center center;
	background-size: cover;
}
.footer h2{
	position: absolute;
	top: calc(50% - 60px);
	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: 40px;
	right: 2.5%;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.spSpace{display: none;}

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


.sideNavi{
    position: fixed;
    top: 50%;
    right:-66px;
    width: 65px;
    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 .photo{
	display: block;
	background: #EAEADD;
	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: 5px;
	right: 3px;
	width: 1px;
	height: 1px;
	font-family: "MaisonNeueDemi";
	line-height: 1;
	font-size: 12px;
	color: #FFF;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.sideNavi .photo h3 span{white-space:nowrap;}



.sideNavi .current h3{color: #B2B0AE;}

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

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


.sideNavi .pagetop{
    width: 90%;
    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");}