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



@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700&display=swap');
/*
font-family: 'Zen Old Mincho', serif;
Bold 700
*/

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

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&display=swap');
/*
font-family: 'Public Sans', sans-serif;
Regular 400
Medium 500
Semi-bold 600
*/

/* ---------- 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;
}
a{
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}


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

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}



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

body{
    background:#EDE3D1;
    width: 100%;
    height: 100%;
    line-height: 1.7;
    font-size: 14px;
    -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:500;
	color: #3D3935;
}


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


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

#loader-bg:after{
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	width: 50%;
	height: 100vh;
	background: #FFF;
	-webkit-transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader-bg.close:after{width: 0;}

#loader-bg:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 50%;
	height: 100vh;
	background: #FFF;
	-webkit-transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader-bg.close:before{width: 0;}


#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);
  }
}




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

/* standard */
.fade,
.fade.delighter{
	will-change: transform,animation,position;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	opacity:0;
    position: relative;
    top: 40px;
	-webkit-transition: all 1.3s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 1.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

/* end */
.fade.delighter.ended{
}
/* ---------------- */




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


.spOnly{display: none;}

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







#header{
	width: 100%;
	padding-top: 61%;
	background: #FFF;
	position: relative;
	overflow: hidden;
}
#header h1{
	position: absolute;
	width: 9%;
	z-index: 10;
	top: 50%;
	right: 4%;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}
#header.start h1{opacity: 1;}

#header h2{
	position: absolute;
	width: 10%;
	z-index: 10;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}
#header.start h2{opacity: 1;}

#header h3{display: none;}



.cover-slider_wrap {
	position: absolute;
	width: 50%;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
.cover-slider_wrap.slide01{left: 0;}
.cover-slider_wrap.slide02{right: 0;}

.cover-slider {
	backface-visibility: hidden;
}
.cover-slider_slide{
	position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
	left: 0;
	right:100%;
    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);
}
.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);
}


.slide01 .cover-slider_slide:nth-child(1){background-image: url("../../images/mainpc_01.jpg");right: 0;}
.slide01 .cover-slider_slide:nth-child(2){background-image: url("../../images/mainpc_02.jpg");}
.slide01 .cover-slider_slide:nth-child(3){background-image: url("../../images/mainpc_03.jpg");}
.slide02 .cover-slider_slide:nth-child(1){background-image: url("../../images/mainpc_04.jpg");right: 0;}
.slide02 .cover-slider_slide:nth-child(2){background-image: url("../../images/mainpc_05.jpg");}
.slide02 .cover-slider_slide:nth-child(3){background-image: url("../../images/mainpc_06.jpg");}
@keyframes slidein{
	0% {left: 0;right: 100%;}
	100%  {left: 0;right: 0%;}
}
@keyframes slideout{
	0% {left: 0;right: 0;}
	100%  {left: 100%;right: 0%;}
}



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





.lead{
	width: 100%;
	position: relative;
	margin-top: 110px;
}

.lead .leadTop{}

.leadTitle{
	width: 85%;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
}



.leadTitle:before,
.delighter .leadTitle:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	opacity: 0;
	height: 1px;
	z-index: 5;
	background: #B1B1B1;
	-webkit-transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
	transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
}
.delighter.started .leadTitle:before{top: 0;opacity: 1;}

.leadTitle:after,
.delighter .leadTitle:after{
	content: '';
	position: absolute;
	bottom: 50%;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 1px;
	z-index: 5;
	background: #B1B1B1;
	-webkit-transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
	transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
}
.delighter.started .leadTitle:after{bottom: 0;opacity: 1;}



.leadTitle .logo,
.delighter .leadTitle .logo{
	width: 10%;
	position: absolute;
	left: 2%;
	top:50%;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 1.0s 0.3s;
	transition: opacity 1.0s 0.3s;
}
.delighter.started .leadTitle .logo{opacity: 1;}


.leadTitle .date,
.delighter .leadTitle .date{
	width: 3.5%;
	position: absolute;
	right: 5%;
	top:50%;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 1.0s 0.3s;
	transition: opacity 1.0s 0.3s;
}
.delighter.started .leadTitle .date{opacity: 1;}

.leadTitle h2,
.delighter .leadTitle h2{
	width: 58%;
	margin: 0 auto;
	opacity: 0;
	padding: 2.2% 0;
	-webkit-transition: opacity 1.0s 0.3s;
	transition: opacity 1.0s 0.3s;
}
.delighter.started .leadTitle h2{opacity: 1;}



.leadBody,
.delighter .leadBody{
	width: 60%;
	max-width: 640px;
	margin: 55px auto 0;
	opacity: 0;
	top: 30px;
	position: relative;
	-webkit-transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.7s, opacity 1.3s 0.7s;
	transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.7s, opacity 1.3s 0.7s;
}
.delighter.started .leadBody{top: 0; opacity: 1;}



.leadBody p{
	font-family: 'Zen Old Mincho', serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 2.3;
	letter-spacing: 0.05em;
}






.mainNavi{
	width: 82%;
	max-width: 1040px;
	margin: 60px auto 0;
	position: relative;
}
.mainNavi ul{
	position: relative;
	width: 102%;
	font-size: 0;
}


.mainNavi ul .nav{
	width: 23%;
	margin-right: 2%;
	display: inline-block;
	text-align: center;
}
.mainNavi h2,
.mainNavi .delighter h2{
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
	opacity: 0;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
}
.mainNavi .delighter.started h2{opacity: 1;}
.mainNavi h3{
	width: 100%;
	margin: 3% auto 0;
	padding: 5% 5%;
	position: relative;
}
.mainNavi h3 img,
.mainNavi .delighter h3 img{
	opacity: 0;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
}
.mainNavi .delighter.started h3 img{opacity: 1;}



.mainNavi h3:before,
.mainNavi .delighter h3:before{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 5;
	opacity: 0;
	background: #B1B1B1;
	-webkit-transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;
	transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;
}
.mainNavi .delighter.started h3:before{top: 0;opacity: 1;}



.mainNavi h3:after,
.mainNavi .delighter h3:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 5;
	opacity: 0;
	background: #B1B1B1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.mainNavi .delighter.started h3:after{opacity: 1;}

.mainNavi .delighter .n02 h3:before,
.mainNavi .delighter .n02 h3:after{transition-delay: 0.2s;}
.mainNavi .delighter .n03 h3:before,
.mainNavi .delighter .n03 h3:after{transition-delay: 0.4s;}
.mainNavi .delighter .n04 h3:before,
.mainNavi .delighter .n04 h3:after{transition-delay: 0.6s;}

.mainNavi .delighter .n02 h2,
.mainNavi .delighter .n02 h3 img{transition-delay: 0.5s;}
.mainNavi .delighter .n03 h2,
.mainNavi .delighter .n03 h3 img{transition-delay: 0.7s;}
.mainNavi .delighter .n04 h2,
.mainNavi .delighter .n04 h3 img{transition-delay: 0.9s;}


.mainNavi .categoryImage{
	width: 100%;
	margin: 10% auto 0;
	overflow: hidden;
	position: relative;
}
.mainNavi .categoryImage .coverView,
.mainNavi .delighter .categoryImage .coverView{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #EDE3D1;
	z-index: 50;
	-webkit-transition: bottom 1.5s cubic-bezier(0.25, 1, 0.5, 1);
	transition: bottom 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.mainNavi .delighter.started .categoryImage .coverView{bottom: 100%;}

.mainNavi .delighter .n02 .categoryImage .coverView{transition-delay: 0.5s;}
.mainNavi .delighter .n03 .categoryImage .coverView{transition-delay: 0.7s;}
.mainNavi .delighter .n04 .categoryImage .coverView{transition-delay: 0.9s;}

.mainNavi .categoryImage a{
	position: relative;
	display: block;
}
.mainNavi .categoryImage a .img{
	position:relative;
	z-index: 1;
}
.mainNavi .categoryImage a .cover{
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity:0;
	background: rgba(217,216,214,0.6);
	-webkit-transition: opacity 0.4s cubic-bezier(0.5, 1, 0.89, 1);
	transition: opacity 0.4s cubic-bezier(0.5, 1, 0.89, 1);
}
.mainNavi .categoryImage a .more{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	font-family: 'Public Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.05em;
	padding: 0.5em 0.7em;
	border: 2px solid #3D3935;
	border-radius:4px;
	display: inline-block;
	opacity: 0;
	color: #D9D8D6;
	background: rgba(61,57,53,0.5);
	-webkit-transform:translate(-50%,-50%) scale(0.7);
	transform:translate(-50%,-50%) scale(0.7);
	-webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.mainNavi.spMore{display: none;}


@media(min-width:769px) {
.mainNavi .categoryImage a:hover .cover{opacity: 1;}
.mainNavi .categoryImage a:hover .more{
		-webkit-transform:translate(-50%,-50%) scale(1);
		transform:translate(-50%,-50%) scale(1);
		opacity: 1;
}
}




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



.wrapper{
	width: 100%;
	/*overflow: hidden;*/
}



.separator{
	width: 81%;
	height: 4px;
	position: relative;
	margin: 230px auto 0;
}
.separator span,
.separator.delighter span{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0%;
	margin: 0 auto;
	background: #3D3935;
	-webkit-transition: width 1.6s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.separator.delighter.started span{width: 100%;}




.category{width: 100%;margin-top: 230px;}
.category.c01{color: #3D3935;}
.category.c02{}
.category.c03{}
.category.c04{}


.categoryHeader{
	width: 100%;
	position: relative;
}

.categoryHeader .cover{

}

.categoryHeader .cover,
.categoryHeader.delighter .cover{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: #EDE3D1;
	z-index: 50;
	-webkit-transition: width 1.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.categoryHeader.delighter.started .cover{width: 0%;}

.categoryHeader:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 15;
}
.categoryHeader:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 15;
}

.categoryHeader h2,
.categoryHeader.delighter h2{
	position: absolute;
	width: 14.5%;
	top: 50%;
	left: 10%;
	z-index: 10;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.3s 0.8s;
	transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.3s 0.8s;
}
.categoryHeader.delighter.started h2{opacity: 1;left: 7.5%;}



.categoryHeader .photo{
	width: 83.5%;
	margin-left: 16.5%;
	position: relative;
	z-index: 5;
	background: #CCC;
}
.categoryHeader .photo span{
	display: block;
	width: 100%;
	padding-top: 65%;
	background-position: center center;
	background-size: cover;
}
.c01 .categoryHeader .photo span{background-image: url("../../images/category01_pc.jpg");}
.c02 .categoryHeader .photo span{background-image: url("../../images/category02_pc.jpg");}
.c03 .categoryHeader .photo span{background-image: url("../../images/category03_pc.jpg");}
.c04 .categoryHeader .photo span{background-image: url("../../images/category04_pc.jpg");}



.categoryHeader .line{
	position: absolute;
	z-index: 14;
}
.categoryHeader .line.l01{
	width: 1%;
	top: 0;
	left: 4.5%;
}
.c01 .categoryHeader .line.l01{bottom: 28%;}
.c02 .categoryHeader .line.l01{bottom: 33%;}
.c03 .categoryHeader .line.l01{bottom: 35%;}
.c04 .categoryHeader .line.l01{bottom: 28%;}



.categoryHeader .line.l02{
	width: 1%;
	top: 0;
	bottom: 5%;
	right: 7%;
}
.categoryHeader .line.l03{
	width: 22%;
	height: 2px;
	top: 55%;
	right: 7%;
}

.c01 .categoryHeader{background: #D5CDB3;}
.c01 .categoryHeader:after,
.c01 .categoryHeader:before{background: #4C412A;}
.c01 .categoryHeader .line{background: #4C412A;}

.c02 .categoryHeader{background: #DDD6C7;}
.c02 .categoryHeader:after,
.c02 .categoryHeader:before{background: #9D5918;}
.c02 .categoryHeader .line{background: #9D5918;}

.c03 .categoryHeader{background: #C2C6B8;}
.c03 .categoryHeader:after,
.c03 .categoryHeader:before{background: #564F24;}
.c03 .categoryHeader .line{background: #564F24;}

.c04 .categoryHeader{background: #D5CABC;}
.c04 .categoryHeader:after,
.c04 .categoryHeader:before{background: #592E2C;}
.c04 .categoryHeader .line{background: #592E2C;}




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

.categoryCopy{
	width: 67%;
	max-width: 980px;
	margin: 50px auto 0;
	position: relative;
}
.categoryCopy p{
	font-size: 16px;
	line-height: 2.2;
	letter-spacing: 0.05em;
	padding: 1em 0 1em 45px;
	width: 100%;
	max-width: 710px;
}
.categoryCopy:before{
	content: '';
	width: 14px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}
.c01 .categoryCopy:before{background: #4C412A;}
.c02 .categoryCopy:before{background: #9D5918;}
.c03 .categoryCopy:before{background: #564F24;}
.c04 .categoryCopy:before{background: #592E2C;}



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





.itemMain{
	width: 75%;
	max-width: 960px;
	margin: 320px auto 0;
	position: relative;
}

.itemMain.set01,
.itemMain.set06,
.itemMain.set08,
.itemMain.set10{margin-top: 180px;}

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

.itemMain .visualBox{
	width: 53%;
	position: relative;
}

.itemMain .visualBox .cover,
.itemMain .visualBox.delighter .cover{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: #EDE3D1;
	z-index: 50;
	-webkit-transition: bottom 1.8s cubic-bezier(0.25, 1, 0.5, 1);
	transition: bottom 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.itemMain .visualBox.delighter.started .cover{bottom: 100%;}

.itemMain.sta .visualBox{float: left;}
.itemMain.rev .visualBox{float: right;}

.itemMain .visualBox a{display: block;overflow: hidden;z-index: 5;position: relative;}

@media(min-width:769px) {
.itemMain .visualBox a{display: block;overflow: hidden;}
.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 .itemName{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4.6%;
	z-index: 25;
}
.itemMain.sta .itemName{left: -7.7%;}
.itemMain.rev .itemName{right: -7.7%;}

.itemMain .itemName h2,
.itemMain .delighter .itemName h2{
	width: 100%;
	position: relative;
	opacity: 0;
	-webkit-transition: left 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.7s, opacity 1.0s 0.7s;
	transition: left 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.7s, opacity 1.0s 0.7s;
}
.itemMain.sta .itemName h2,
.itemMain.sta .delighter .itemName h2{left: -20px;}
.itemMain.rev .itemName h2,
.itemMain.rev .delighter .itemName h2{left: 20px;}

.itemMain .delighter.started .itemName h2{opacity:1;left: 0;}


.itemMain .itemName .line{position: absolute;z-index: 30;}
.c01 .itemMain .itemName .line{background: #4C412A;}
.c02 .itemMain .itemName .line{background: #9D5918;}
.c03 .itemMain .itemName .line{background: #564F24;}
.c04 .itemMain .itemName .line{background: #592E2C;}

.itemMain .itemName .line.top,
.itemMain .delighter .itemName .line.top{
	top: -38px;
	width: 0;
	height: 6px;
	-webkit-transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.7s;
	transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.7s;
}
.itemMain .delighter.started .itemName .line.top{width: 90px;}


.itemMain.sta .itemName .line.top{left: 0;}
.itemMain.rev .itemName .line.top{right: 0;}

.itemMain .itemName .line.bottom,
.itemMain .delighter .itemName .line.bottom{
	bottom: 0;
	width: 12px;
	height: 0%;
	-webkit-transition: height 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.7s;
	transition: height 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.7s;
}
.itemMain .delighter.started .itemName .line.bottom{height: 9%;}


.itemMain.sta .itemName .line.bottom{left: 0;}
.itemMain.rev .itemName .line.bottom{right: 0;}



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

.itemMain .itemBox,
.itemMain .itemBox.delighter{
	width: 39%;
	top: 40px;
	opacity: 0;
	position:relative;
	-webkit-transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.3s 0.8s;
	transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.8s, opacity 1.3s 0.8s;
}
.itemMain .itemBox.delighter.started{top: 0;opacity: 1;}

.itemMain.sta .itemBox{float: right;}
.itemMain.rev .itemBox{float: left;}


.itemMain .itemBox .itemImage{width: 100%;}
.itemMain .itemBox .itemImage a{display: block;overflow: hidden;z-index: 5;position: relative;}
@media(min-width:769px) {
.itemMain .itemBox .itemImage a{display: block;overflow: hidden;}
.itemMain .itemBox .itemImage a img{-webkit-transition: all 0.5s;transition: all 0.5s;}
.itemMain .itemBox .itemImage a:hover img{-webkit-transform:scale(1.08,1.08);transform:scale(1.08,1.08);}
}



.itemMain .itemBox .text{
	width: 100%;
	margin-top: 20px;
}
.itemMain .itemBox .text p{
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.9;
}

.itemMain .itemList{
	width: 100%;
	margin-top: 35px;
}
.itemMain .itemList dl{
	width: 100%;
	display: block;
	font-size: 0;
	position: relative;
	text-align: left;
	margin-top: 18px;
}
.itemMain .itemList dl:not(.other):nth-child(1){margin-top: 0;}

.itemMain .itemList dl .name{
	width: calc( 100% - 90px);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0.03em;
	font-family: 'Public Sans', sans-serif;
}
.itemMain .itemList dl .name span{font-size: 14px;}
.itemMain .itemList dl .num{
	width: calc( 100% - 90px);
	font-size: 12px;
	line-height: 1.1;font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin-top: 0.3em;
}

.itemMain .itemList dl dd{
	width: 85px;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.itemMain .itemList dl dd a{
	line-height: 1;
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-align: center;
	display: block;
	padding: 6px 0px 7px;
	width: 100%;
	border-radius:4px;
	border: 1px solid #3D3935;
	color: #D9D8D6;
	background: #3D3935;
}
@media(min-width: 769px) {
.itemMain .itemList dl dd a:hover{background:none;color: #3D3935;}
}



.itemMain .otherItem{display: none;}
.itemMain .otherTrigger{
	margin-top:18px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.itemMain .otherTrigger p{
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	margin-left: 50px;
	padding:7px 10px 7px 0;
}

.itemMain .otherTrigger span{
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 30px;
	border-radius:4px;
	display: block;
	border: 1px solid #3D3935;
}


.itemMain .otherTrigger span:after,
.itemMain .otherTrigger span:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin:0 auto;
	width: 15px;
	height: 1px;
	background: #3D3935;
}
.itemList .otherTrigger span:before{
	-webkit-transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.itemList .otherTrigger.open span:before{
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}


@media(min-width: 769px) {
.itemMain .otherTrigger span{
	-webkit-transition: background 0.4s;
	transition: background 0.4s;
}
.itemList .otherTrigger:hover span{background:#8C8A88;}
}


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


.otherImage{margin: 120px auto 0;}
.otherImage p{position: relative;}


.otherImage .inLeft,
.otherImage .inLeft.delighter{
	position: relative;
	left:4vw;
	opacity: 0;
	-webkit-transition: left 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
	transition: left 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
}
.otherImage .inLeft.delighter.started{left: 0;opacity: 1;}

.otherImage .inRight,
.otherImage .inRight.delighter{
	position: relative;
	right:4vw;
	opacity: 0;
	-webkit-transition: right 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
	transition: right 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
}
.otherImage .inRight.delighter.started{right: 0;opacity: 1;}


.otherImage.set01{width: 75%;max-width: 960px;}
.otherImage.set01 .img01{width: 58%;float: left;}
.otherImage.set01 .img02{width: 53%;float: right;z-index: 5;margin-top: -17%;}

.otherImage.set02{width: 70%;max-width: 860px;}
.otherImage.set02 .img01{width: 79%;}

.otherImage.set03{width: 82%;max-width: 1050px;}
.otherImage.set03 .img01{width: 60%;float: right; z-index: 5;}
.otherImage.set03 .img02{width: 48.5%;float: left;margin-top: -14%;}

.otherImage.set04{width: 85%;max-width: 1080px;}
.otherImage.set04 .img01{width: 47.2%;float: right; z-index: 5;margin-right: 5%;}
.otherImage.set04 .img02{width: 51.8%;float: left;margin-top: -28%;}

.otherImage.set05{width: 82%;max-width: 1050px;}
.otherImage.set05 .img01{width: 60%;float: right; z-index: 5;}
.otherImage.set05 .img02{width: 48.5%;float: left;margin-top: -12%;}

.otherImage.set06{width: 82%;max-width: 1050px;}
.otherImage.set06 .img01{width: 53.33%;float: right;margin-right: 8.5%;}
.otherImage.set06 .img02{width: 60%;float: left;margin-top: -10%; z-index: 5;}

.otherImage.set07{width: 85%;max-width: 1080px;}
.otherImage.set07 .img01{width: 58.33%;float: right;}
.otherImage.set07 .img02{width: 51.8%;float: left;margin-top: -9%;margin-left: 5.5%; z-index: 5}

.otherImage.set11{width: 50%;max-width: 630px;}
.otherImage.set11 .img01{width: 100%;}



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


.movieArea{
	width: 75%;
	max-width: 960px;
	margin: 120px auto 0;
	position: relative;
}
.movieArea .videoBox{
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-size: 0;
}
.movieArea .youtube{
	position:relative;
	z-index: 10;
	width:100%;
	padding-top:56.25%;
	background: #000;
}
.movieArea .player{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.movieArea .youtube iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}
.movieArea .thumb{
	position:absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index:5;
    cursor: pointer;
	display: block;
	overflow: hidden;
}		
.movieArea .thumb .playBT{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
	bottom: 0;
    z-index: 10;
    line-height: 1;
    text-align: center;
}
.movieArea .thumb .playBT .play{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
    width: 130px;
    height: 130px;
    margin: -75px auto 0;
    padding:40px;
}
.movieArea .thumb .playBT .play:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #D9D8D6;
	border-radius:50%;
	-webkit-transition:transform 0.4s;
	transition:transform 0.4s;
}

@media (min-width: 769px) {
.movieArea .thumb .playBT:hover .play:before{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
}



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



.allBanner{
	width: 75%;
	max-width: 960px;
	margin: 220px auto 0;
	position: relative;
}
.allBanner a{
	display: block;
}

.allBanner .bannerInner{
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(216,223,225,0.7);
}
.allBanner h2{
	position:relative;
	z-index: 5;
	width: 55%;
	margin-left: 8%;
	padding: 3% 0;
	
}
.allBanner .more{
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 8%;
	display: block;
	line-height: 1;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.02em;
	font-family: 'Public Sans', sans-serif;
	font-size: 22px;
	padding: 0.7em 0.8em;
	border: 2px solid #FFF;
	border-radius: 5px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}


.c01 .allBanner a .more{border-color: #4C412A;color: #4C412A;}
.c02 .allBanner a .more{border-color: #9D5918;color: #9D5918;}
.c03 .allBanner a .more{border-color: #564F24;color: #564F24;}
.c04 .allBanner a .more{border-color: #592E2C;color: #592E2C;}


@media(min-width:769px) {
.allBanner a .more{-webkit-transition: all 0.4s;transition: all 0.4s;}
.c01 .allBanner a:hover .more{color: #D9D8D6;background: rgba(76,65,42,0.7);}
.c02 .allBanner a:hover .more{color: #D9D8D6;background: rgba(157,89,24,0.7);}
.c03 .allBanner a:hover .more{color: #D9D8D6;background: rgba(86,79,36,0.7);}
.c04 .allBanner a:hover .more{color: #D9D8D6;background: rgba(89,46,44,0.7);}

}


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


.otherContents{
	width: 85%;
	max-width: 1080px;
	margin: 280px auto 0;
	text-align: center;
}

.otherContents h2,
.otherContents h2.delighter{
	width: 510px;
	margin: 0 auto;
	padding: 23px 0;
	position: relative;
	opacity: 0;
	top: 30px;
	-webkit-transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
	transition: top 1.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
}
.otherContents h2.delighter.started{opacity: 1;top: 0;}

.otherContents h2:before,
.otherContents h2.delighter:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 0;
	width: 0%;
	height: 1px;
	background: #B1B1B1;
	-webkit-transition: width 2.0s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 2.0s cubic-bezier(0.76, 0, 0.24, 1);
}
.otherContents h2.delighter.started:before{width: 100%;}

.otherContents h2:after,
.otherContents h2.delighter:after{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #B1B1B1;
	-webkit-transition: width 2.0s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 2.0s cubic-bezier(0.76, 0, 0.24, 1);
}
.otherContents h2.delighter.started:after{width: 100%;}


.otherContents .otherList{
	width: 100%;
	margin-top: 85px;
	overflow: hidden;
	border-bottom: 1px solid #B1B1B1;
}
.otherContents .otherList ul{
	width: 108.6%;
	font-size: 0;
	position: relative;
}
.otherContents .otherList ul li{
	width: 25.333%;
	margin-right: 8%;
	display: inline-block;
	vertical-align: top;
}
.otherContents .otherList ul:before{
	content: "";
	position: absolute;
	top: 65px;
	bottom: 60px;
	left: 29.333%;
	width: 1px;
	background: #B1B1B1;
}
.otherContents .otherList ul:after{
	content: "";
	position: absolute;
	top: 65px;
	bottom: 60px;
	left: 62.666%;
	width: 1px;
	background: #B1B1B1;
	display: block;
}

.otherContents h3{
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
}
.otherContents .photo{
	margin-top: 15px;
	position: relative;
}
.otherContents .more{
	margin: 15px auto 20px;
	width: 100%;
	position: relative;
	border-radius:4px;
	overflow: hidden;
	border: 2px solid #3D3935;
}
.otherContents .more span{
	display: block;
	font-size: 18px;
	text-align: center;
	line-height: 1.1;
	letter-spacing: 0.03em;
	padding: 7px 0;
}
.otherContents .more a{
	display: block;
	width: 100%;
	color: #3D3935;
	font-family: 'Public Sans', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	padding: 7px 0;
	border-radius:1px;
}

@media(min-width:769px) {
.otherContents .more a:hover{background: #8D867B;color: #D9D8D6;}
}


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



.footer{
	width: 100%;
	margin-top: 280px;
	padding: 100px 0 60px;
	color: #D9D8D6;
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: url("../../images/footer_pc.jpg") center center;
	background-size: cover;
}

.footer .instagram{
	width: 90%;
	margin: 0 auto;
	text-align: center;
	letter-spacing: 0.08em;
	font-size: 20px;
}
.footer .instagram .icon{
	width: 38px;
	margin: 18px auto 0;
}

.footer h2{
	width: 140px;
	margin: 130px auto 0;
}
.footer h3{
	width: 480px;
	margin: 25px auto 0;
}
.footer .copyright{
	letter-spacing: 0.1em;
	font-size: 16px;
	margin: 45px auto 0;
}
.footer .copyright br{display: none;}
.footer .pagetop{
	position: absolute;
	display: block;
	cursor: pointer;
	width: 90px;
	right: 0;
	top: 100px;
}
@media(min-width:769px) {
	.footer .instagram a:hover{opacity:0.7;}
	.footer .pagetop:hover{opacity:0.7;}
}



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

.sideNavi{
    position: fixed;
    top: 50%;
    right:-82px;
    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: 20px;}
.sideNavi ul{}
.sideNavi ul li{width: 100%;margin-bottom: 30px;}


.sideNavi .logo img{
	display: block;
	width: 80%;
	margin: 0 auto;
}

.sideNavi .title{
	width: 100%;
	line-height: 1;
	font-family: 'Public Sans', sans-serif;
	font-weight: 600;
	font-size: 11px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	color: #B1B1B1;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	padding-bottom: 3px;
	border-bottom: 1px solid #B1B1B1;
}
.sideNavi .image{
	width: 95%;
	position: relative;
	margin: 8px auto 0;
}
 .sideNavi .image span{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	opacity: 0.5;
	background: #D9D8D6;
	display: block;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.sideNavi ul li a{display: block;}
.sideNavi ul li.current .image span{opacity:0;}
.sideNavi ul li a:hover .image span{opacity:0;}

.sideNavi ul li.current .title{color: #3D3935;border-color:#3D3935;}
.sideNavi ul li a:hover .title{color: #3D3935;border-color:#3D3935;}



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





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


#trigger{display: none;}
.spNavi{display: none;}





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