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

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Bold 700
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
Midium 500
*/





@font-face {
  font-family: "SequelSansMedium";
  src: url('../../font/SequelSansMedium/font.woff2') format('woff2'), url('../../font/SequelSansMedium/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: "SequelSansBook";
  src: url('../../font/SequelSansBook/font.woff2') format('woff2'), url('../../font/SequelSansBook/font.woff') format('woff');
}
@font-face {
  font-family: "TTCommonsClassicMediumItalic";
  src: url('../../font/TTCommonsClassicMediumItalic/font.woff2') format('woff2'), url('../../font/TTCommonsClassicMediumItalic/font.woff') format('woff');
}
@font-face {
  font-family: "Sequel100Black55";
  src: url('../../font/Sequel100Black55/font.woff2') format('woff2'), url('../../font/Sequel100Black55/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:#EBEBEB;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    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:400;
	color: #484B44;
}



/*
12px 0.86em;
13px 0.93em
14px 1em
15px 1.07em
16px 1.14em
17px 1.22em
*/
/* =============================================== */


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

.inFade{
	position: relative;
	top: 0;
	opacity: 0;
	-webkit-transition: opacity 1.4s;
	transition: opacity 1.4s;
}
.inFade.view{opacity: 1;}



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

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

#header .titleBox{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
}
#header .titleBox h1{
	position: absolute;
	right: 2.1vw;
	top: 50%;
	width: 22%;
	z-index: 5;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 1.2s;
	transition: opacity 1.2s;
}
#header .titleBox .logo{
	position: absolute;
	top: 2.1vw;
	right: 2.1vw;
	width: 11%;
	z-index: 5;
	opacity: 0;
	-webkit-transition: opacity 1.2s;
	transition: opacity 1.2s;
}
#header.start .titleBox h1{opacity: 1;}
#header.start .logo{opacity: 1;}



#header .vegas{
    width: 100%;
    height: 100%;
    position: relative;
	z-index: 10;
	overflow: hidden;
}
#header .vegas .vegasImage01{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width:32%;
    z-index: 10;
}
#header .vegas .vegasImage02{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width:68%;
    z-index: 10;
}
#header .vegas::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 100%;
	left: calc(32% - 2px);
	width: 4px;
	z-index: 50;
	background: #C2DA70;
	-webkit-transition: bottom 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: bottom 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
#header.start .vegas::after{bottom: 0;}





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


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




.lead{
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.lead .sideText{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 50;
	width: min(6.7vw, 6.15em);
	display: flex;
	align-items: center;
	color: #565654;
}
.lead .sideText span{
	display: block;
	position: relative;
	left: -100%;
	-webkit-transition: left 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	transition: left 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.lead.view .sideText span{left: 0;}

.lead .sideTextSP{display: none;}

.lead .leadText{
	width: 89%;
	max-width: 1140px;
	margin: 4.3em auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.lead .leadText h2{width: 36%;}
.lead .leadText h2 img{
	width: 157px;
	margin: 0 auto;
	display: block;
}

.lead .leadText .copy{
	width:64%;
	letter-spacing: 0.03em;
	line-height: 2.1;
	font-size: 1.14em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

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


.topNav{
	position: relative;
	width: 100%;
}
.topNav::before{
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 0%;
	height: 1px;
	background: #565654;
	-webkit-transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
.topNav::after{
	content: '';
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #565654;
	-webkit-transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}

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

.topNav .menuSet{
	width: 89%;
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	position: relative;
}
.topNav .menuSet::before{
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 100%;
	left: 33.33%;
	width: 1px;
	background: #565654;
	-webkit-transition: bottom 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: bottom 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
.topNav .menuSet::after{
	content: '';
	position: absolute;
	z-index: 10;
	top: 100%;
	bottom: 0;
	right: 33.33%;
	width: 1px;
	background: #565654;
	-webkit-transition: top 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: top 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
.topNav.view .menuSet::before{bottom:0;}
.topNav.view .menuSet::after{top:0;}

.topNav .menuSet .menu{
	width: 33.333%;
	position: relative;
	padding-bottom: 2em;
	background: #C2DA70;
	opacity: 0;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
}
.topNav.view .menuSet .menu{opacity: 1;}

.topNav .menuSet .menu.m01{-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.topNav .menuSet .menu.m02{-webkit-transition-delay:0.8s;transition-delay:0.8s;}
.topNav .menuSet .menu.m03{-webkit-transition-delay:1.2s;transition-delay:1.2s;}

.topNav .menu a.photo{
	display: block;
	width: 85%;
	margin: 7.5% auto;
	color: #FFF;
	position: relative;
}
.topNav .menu figure{
	width: 100%;
	position: relative;
}

.topNav .menu figure figcaption{
	position: absolute;
	z-index: 5;
	left: 0.3em;
	bottom: 0.6em;
	font-family: "Sequel100Black55";
	line-height: 1;
	letter-spacing: 0.01em;
	font-size:min(2.8vw, 2.6em);
	-webkit-transform:scale(0.87,1);
	transform:scale(0.87,1);
}


.topNav .menu .more{
	font-family: "SequelSansBook";
	font-size: 1.5em;
	color: #FFF;
	background: #C2DA70;
	padding: 0.6em 1em;
	display: inline-block;
	line-height: 1;
	letter-spacing: 0.03em;
}

.topNav .menu .text{
	width: 75%;
	margin: 0 auto;
	position: relative;
}
.topNav .menu .text h3{
	font-family: "MaisonNeueDemi";
	font-size: 1.85em;
	line-height: 1;
}
.topNav .menu .text p{
	font-size: 0.94em;
	letter-spacing: 0.05em;
	margin-top: 0.8em;
	text-align: justify;
	text-justify: inter-ideograph;
}

.topNav .moreSP{display: none;}


@media(min-width: 769px) {
.topNav .menu a .more{
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	z-index: 50;
	-webkit-transform:translate(-50%,-50%) scale(0.85);
	transform:translate(-50%,-50%) scale(0.85);
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.topNav .menu a:hover .more{
	opacity: 1;
	-webkit-transform:translate(-50%,-50%) scale(1);
	transform:translate(-50%,-50%) scale(1);
}

.topNav .menu a .cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 10;
	background: #EAEADD;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
.topNav .menu a:hover .cover{opacity: 0.5;}

}







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





.catergory{
	width: 100%;
	margin-top: 14em;
}
.cateHeader{
	width: 100%;
	position: relative;
}
.cateHeader .cateTitle{
	position: absolute;
	z-index: 10;
	width: min(25vw, 450px);
	padding-left: 2vw;
}
.ca01 .cateHeader .cateTitle{bottom: 10vw;left: 52%;}
.ca02 .cateHeader .cateTitle{bottom: 10vw;left: 56%;}
.ca03 .cateHeader .cateTitle{bottom: 10vw;left: 53%;}

.cateHeader .cateTitle::after{
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 100%;
	left: 0;
	width: 4px;
	-webkit-transition: bottom 1.0s cubic-bezier(0.76, 0, 0.24, 1) 0.5s;
	transition: bottom 1.0s cubic-bezier(0.76, 0, 0.24, 1) 0.5s;
}
.ca01 .cateHeader .cateTitle::after{background: #006AB7;}
.ca02 .cateHeader .cateTitle::after{background: #C2DA70;}
.ca03 .cateHeader .cateTitle::after{background: #3D5244;}

.cateHeader.view .cateTitle::after{bottom: 0;}

.cateHeader .cateTitle h2{
	position: relative;
	left: 3em;
	opacity: 0;
	width: 100%;
	-webkit-transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
	transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
}
.cateHeader .cateTitle h3{
	position: relative;
	margin-top: 3vw;
	left: 3em;
	opacity: 0;
	width: 100%;
	-webkit-transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
	transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
}
.cateHeader.view .cateTitle h2,
.cateHeader.view .cateTitle h3{left: 0;opacity: 1;}


.cateHeader .logo{
	position: absolute;
	left: 2%;
	top: 4%;
	z-index: 15;
	width: 10.5vw;
}

.cateHeader .imageSet{width: 100%;display: flex;}
.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");}
.ca01 .cateHeader .imageSet .sub{background-image: url("../../images/ca01sub.webp");}
.ca02 .cateHeader .imageSet .main{background-image: url("../../images/ca02main.webp");}
.ca02 .cateHeader .imageSet .sub{background-image: url("../../images/ca02sub.webp");}
.ca03 .cateHeader .imageSet .main{background-image: url("../../images/ca03main.webp");}
.ca03 .cateHeader .imageSet .sub{background-image: url("../../images/ca03sub.webp");}

.cateHeader .imageSet .main::after,
.cateHeader .imageSet .sub::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 50;
	background: #EBEBEB;
	-webkit-transition: width 1.4s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.cateHeader .imageSet .main::after{left: 0;}
.cateHeader .imageSet .sub::after{right: 0;}

.cateHeader.view .imageSet .main::after,
.cateHeader.view .imageSet .sub::after{width: 0;}



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


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

.ca01 .movieArea{background-image: url("../../images/movie01.jpg");}
.ca02 .movieArea{background-image: url("../../images/movie02.jpg");}
.ca03 .movieArea{background-image: url("../../images/movie03.jpg");}

.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{margin-top: 12.5em;}
.feature.top{margin-top:6.15em;}



.featureTitle{
	width: 100%;
	position: relative;
	background: #FCFBF7;
	margin-bottom: 6.2em;
	border-top: 1px solid #484B44;
	border-bottom: 1px solid #484B44;
}
.featureTitle::after{
	content: '';
	position: absolute;
	top: -2px;
	bottom: -2px;
	right: 0;
	width: 100%;
	z-index: 50;
	background: #EBEBEB;
	-webkit-transition: width 1.4s cubic-bezier(0.32, 0, 0.67, 0);
	transition: width 1.4s cubic-bezier(0.32, 0, 0.67, 0);
}
.featureTitle.view::after{width: 0;}


.featureTitle .featureTitleInner{
	width: 93.5%;
	margin: 0 auto;
	display: flex;
}
.featureTitle .featureTitleInner::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1.43em;
	
}
.featureTitle.blue .featureTitleInner::after{background: #006AB7;}
.featureTitle.green .featureTitleInner::after{background: #45834D;}
.featureTitle.yellowgreen .featureTitleInner::after{background: #C2DA70;}
.featureTitle.deepgreen .featureTitleInner::after{background: #3D5244;}


.featureTitle .featureName{
	width: 31.5%;
	display: flex;
	align-items: center;
	/*background: rgba(0,0,0,0.1);*/
}


.featureTitle .featureName .nameInner{
	margin-left: 15%;
	width: min(72%, 380px);
	/*background: rgba(0,0,0,0.1);*/
}
.featureTitle .featureName h2{width: 100%;}
.featureTitle .featureName h3{width: 100%;}

.f01 .featureTitle .featureName h3{margin-top: 11%;}
.f02 .featureTitle .featureName h3{margin-top: 18%;}
.f03 .featureTitle .featureName h3{margin-top: 18%;}
.f04 .featureTitle .featureName h3{margin-top: 11%;}
.f05 .featureTitle .featureName h3{margin-top: 21%;}
.f06 .featureTitle .featureName h3{margin-top: 15%;}
.f07 .featureTitle .featureName h3{margin-top: 18%;}
.f08 .featureTitle .featureName h3{margin-top: 11%;}
.f09 .featureTitle .featureName h3{margin-top: 11%;}





.featureTitle .featureImageSet{
	width: 68.5%;
	display: flex;
	position: relative;
	/*flex-direction: row-reverse;*/
}
.featureTitle .featureImageSet::before,
.featureTitle .featureImageSet::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #484B44;
	z-index: 100;
	opacity: 0;
	-webkit-transition: opacity 0.4s 1.5s;
	transition: opacity 0.4s 1.5s
}
.featureTitle .featureImageSet::before{left: 0;}
.featureTitle .featureImageSet::after{right: 0;}

.featureTitle.view .featureImageSet::before,
.featureTitle.view .featureImageSet::after{opacity: 1;}



.featureTitle .featureImageSet .main{
	position: relative;
	width: 50%;
	padding-top: 46.3%;
	overflow: hidden;
}
.featureTitle .featureImageSet .sub{
	position: relative;
	width: 50%;
	padding-top: 46.3%;
	overflow: hidden;
}
.featureTitle .featureImageSet .all{
	position: relative;
	width: 100%;
	padding-top: 46.3%;
	overflow: hidden;
}
.featureTitle .featureImageSet .main span,
.featureTitle .featureImageSet .sub span,
.featureTitle .featureImageSet .all span{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	-webkit-transition: all 1.0s cubic-bezier(0.5, 1, 0.89, 1);
	transition: all 1.0s cubic-bezier(0.5, 1, 0.89, 1);
}

.featureTitle.view .featureImageSet .main span,
.featureTitle.view .featureImageSet .sub span,
.featureTitle.view .featureImageSet .all span{opacity: 1;-webkit-transform:scale(1.0);	transform:scale(1.0);}

.featureTitle.view .featureImageSet .main span{-webkit-transition-delay:1.2s;transition-delay:1.2s;}
.featureTitle.view .featureImageSet .all span{-webkit-transition-delay:1.2s;transition-delay:1.2s;}
.featureTitle.view .featureImageSet .sub span{-webkit-transition-delay:1.5s;transition-delay:1.5s;}


.f01 .featureTitle .featureImageSet .main span{background-image: url("../../images/fea01-01.webp");}
.f02 .featureTitle .featureImageSet .main span{background-image: url("../../images/fea02-01.webp");}
.f03 .featureTitle .featureImageSet .all span{background-image: url("../../images/fea03-01.webp");}
.f04 .featureTitle .featureImageSet .all span{background-image: url("../../images/fea04-01.webp");}
.f05 .featureTitle .featureImageSet .all span{background-image: url("../../images/fea05-01.webp");}
.f06 .featureTitle .featureImageSet .main span{background-image: url("../../images/fea06-01.webp");}
.f07 .featureTitle .featureImageSet .main span{background-image: url("../../images/fea07-01.webp");}
.f08 .featureTitle .featureImageSet .all span{background-image: url("../../images/fea08-01.webp");}
.f09 .featureTitle .featureImageSet .main span{background-image: url("../../images/fea09-01.webp");}

.f01 .featureTitle .featureImageSet .sub span{background-image: url("../../images/fea01-02.webp");}
.f02 .featureTitle .featureImageSet .sub span{background-image: url("../../images/fea02-02.webp");}
.f06 .featureTitle .featureImageSet .sub span{background-image: url("../../images/fea06-02.webp");}
.f07 .featureTitle .featureImageSet .sub span{background-image: url("../../images/fea07-02.webp");}
.f09 .featureTitle .featureImageSet .sub span{background-image: url("../../images/fea09-02.webp");}

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

.pickup{
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
}
.pickup .pickHeader{
	text-align: center;
	position: relative;
}

.pickup .pickHeader h3{
	font-family: "Sequel100Black55";
	font-size: 1.5em;
	line-height: 1;
	border: 2px solid;
	padding: 0.4em 0.5em 0.5em;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: calc(50% - 22em);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	/*
	opacity: 0;
	-webkit-transform:translateY(-50%) scale(0.5);
	transform:translateY(-50%) scale(0.5);
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	*/
}
.pick01 .pickHeader h3{border-color: #006AB7;color: #006AB7;}
.pick02 .pickHeader h3{border-color: #45834D;color: #45834D;}
/*
.pickup .pickHeader.view h3{
	opacity: 1;
	-webkit-transform:translateY(-50%) scale(1);
	transform:translateY(-50%) scale(1);
}
*/
.pickup .pickHeader .pickTitle{}

.pickup .pickHeader .pickTitle h2{
	font-family: "MaisonNeueDemi";
	font-size: 3.28em;
	line-height: 1;
	letter-spacing: 0.04em;
	position: relative;
	width: 27rem;
	margin: 0 auto;
	padding: 0.4em 0;
}

.pickup .pickHeader .pickTitle h2 span{
	opacity: 0;
	-webkit-transition:opacity 0.6s 0.5s;
	transition:opacity 0.6s 0.5s;
}
.pickup .pickHeader.view .pickTitle h2 span{opacity: 1;}


.pickup .pickHeader .pickTitle h2::before,
.pickup .pickHeader .pickTitle h2::after{
	content:'';
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	opacity: 0;
}
.pick01 .pickHeader .pickTitle h2::before{background: #006AB7;top: 50%;}
.pick01 .pickHeader .pickTitle h2::after{background: #006AB7;bottom: 50%;}
.pick02 .pickHeader .pickTitle h2::before{background: #45834D;top: 50%;}
.pick02 .pickHeader .pickTitle h2::after{background: #45834D;bottom: 50%;}

.pickup .pickHeader .pickTitle h2::before{
	-webkit-transition: top 0.8s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.6s;
	transition: top 0.8s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.6s;
}
.pickup .pickHeader .pickTitle h2::after{
	-webkit-transition: bottom 0.8s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.6s;
	transition: bottom 0.8s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.6s;
}

.pickup .pickHeader.view .pickTitle h2::before{top: 0;opacity: 1;}
.pickup .pickHeader.view .pickTitle h2::after{ bottom:0;opacity: 1;}


.pickup .pickLead{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 1.14em;
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.9;
	margin-top: 2.5em;
}

.pickup .pickContents{
	width: 100%;
	margin: 3.5em auto 0;
}
.pickup .pickContents .pickItemSet{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.pick01 .pickContents .pickItemSet{width: 74%;}
.pick02 .pickContents .pickItemSet{width: 100%;}

.pickup .pickContents .pickItemSet .pickItem{position: relative;}
.pick01 .pickContents .pickItemSet .pickItem{width: min(45%,26.4em);}
.pick02 .pickContents .pickItemSet .pickItem{width: 32.2%;}

.pickup .pickContents h4{
	text-align: center;
	font-family: "TTCommonsClassicMediumItalic";
	font-size: 1.64em;
	position: relative;
	display: inline-block;
	line-height: 1;
	letter-spacing: 0.03em;
	padding: 0 0.8em;
}
.pick01 .pickContents h4{color: #006AB7;}
.pick02 .pickContents h4{color: #45834D;}

.pickup .pickContents h4::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
}
.pick01 .pickContents h4::after{background: #006AB7;}
.pick02 .pickContents h4::after{background: #45834D;}

.pickup .pickContents figure{
	margin-top: 1em;
	position: relative;
}
.pickup .pickContents figure::after{
	content: '';
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #3C3737;
}
.pickup .pickContents .pickItemSet .and{
	width: calc(100% - 26.4em -26.4em);
	display: flex;
	justify-content: center;
	align-items: center;
}
.pickup .pickContents .pickItemSet .and span{
	width: 2.8em;
	height: 2.8em;
	position: relative;
}
.pickup .pickContents .pickItemSet .and span::before,
.pickup .pickContents .pickItemSet .and span::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height: 1.5px;
	width: 100%;
	z-index: 5;
	background: #3C3737;
	transform-origin: center;
}
.pickup .pickContents .pickItemSet .and span::before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.pickup .pickContents .pickItemSet .and span::after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}

.pickup .plus{
	width: 100%;
}
.pickup .plus .plusInner{
	width: 65%;
	margin: 2em 0 0 22%;
	display: flex;
	flex-direction:row-reverse;
}
.pickup .plus .plusInner figure{
	width: 50%;
}
.pickup .plus .plusInner .text{
	width: 50%;
	padding-left: 3em;
	text-align: center;
	display: flex;
	align-items: center;
}
.pickup .plus .plusInner .text p{
	line-height: 1.8;
	margin-top: 1.5em;
	text-align: justify;
	text-justify: inter-ideograph;
}




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

.subTitle{
	width: 80%;
	max-width: 960px;
	margin: 6.5em auto 4.5em;
	display: flex;
	justify-content: space-between;
	font-family: "MaisonNeueDemi";
	line-height: 1;
	white-space: nowrap;
}


.subTitle h2 br{display: none;}

.subTitle .normal{
	font-size: 2.85em;
	letter-spacing: 0.02em;
	position: relative;
	padding-right: 1.6em;
	padding-bottom: 0.3em;
}
.subTitle .normal::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	-webkit-transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.subTitle.view .normal::after{width: 100%;}


.subTitle.blue ::after,
.subTitle.blue ::before{background: #006AB7;}
.subTitle.green ::after,
.subTitle.green ::before{background: #45834D;}
.subTitle.yellowgreen ::after,
.subTitle.yellowgreen ::before{background: #C2DA70;}
.subTitle.deepgreen ::after,
.subTitle.deepgreen ::before{background: #3D5244;}




.subTitle .number{
	font-size: 2.8em;
	letter-spacing: 0.02em;
	position: relative;
	padding: 0.6em;
	width: 53%;
	display: flex;
}
.subTitle .number::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 1px;
	-webkit-transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.subTitle .number::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	-webkit-transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}

.subTitle.view .number::before{width: 100%;}
.subTitle.view .number::after{width: 100%;}



.subTitle .number .num{
	font-size: 0.75em;
	border: 1px solid #3D5244;
	width: 1.8em;
	height:1.8em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.subTitle .number em{
	display: flex;
	align-items: center;
	padding-left: 1em;
}

.subTitle h3{
	font-size: 2em;
	letter-spacing: 0.02em;
	position: relative;
	padding-top: 0.2em;
}
.subTitle h3 span{font-size: 0.7em;}
.subTitle h3 em{display: inline-block;position: relative;top: -0.1em;}
.subTitle h3 em.pc{padding: 0 0.3em;}
.subTitle h3 em.sp{display: none;}
.subTitle h3 br.res{display: none;}

.subTitle h3::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	-webkit-transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.subTitle.view h3::after{width: 100%;}


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




.itemMain{
	width: 80%;
	max-width: 960px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.itemMain.m0602{margin-top: 8em;}





.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: 4.3em;
	overflow: hidden;
}
.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;
}

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


.m01 .slick-dots li:nth-child(1) button{background: #E1E3EA;}
.m01 .slick-dots li:nth-child(2) button{background: #E3E1DA;}
.m01 .slick-dots li:nth-child(3) button{background: #383847;}
.m0201 .slick-dots li:nth-child(1) button{background: #D35641;}
.m0201 .slick-dots li:nth-child(2) button{background: #1F3A67;}
.m0201 .slick-dots li:nth-child(3) button{background: #D7D1C5;}
.m0201 .slick-dots li:nth-child(4) button{background: #1A1A1A;}
.m0202 .slick-dots li:nth-child(1) button{background: #B79560;}
.m0202 .slick-dots li:nth-child(2) button{background: #5B5E49;}
.m0202 .slick-dots li:nth-child(3) button{background: #3A3F53;}
.m03 .slick-dots li:nth-child(1) button{background: #64694A;}
.m03 .slick-dots li:nth-child(2) button{background: #B39469;}
.m03 .slick-dots li:nth-child(3) button{background: #3A3F53;}
.m04 .slick-dots li:nth-child(1) button{background: #C2BDB7;}
.m04 .slick-dots li:nth-child(2) button{background: #252930;}
.m05 .slick-dots li:nth-child(1) button{background: #312F41;}
.m05 .slick-dots li:nth-child(2) button{background: #9A99A0;}
.m0601 .slick-dots li:nth-child(1) button{background: #313A4B;}
.m0601 .slick-dots li:nth-child(2) button{background: #FFF;}
.m0602 .slick-dots li:nth-child(1) button{background: #ADAFB0;}
.m0602 .slick-dots li:nth-child(2) button{background: #101010;}
.m0602 .slick-dots li:nth-child(3) button{background: #2E3545;}
.m0602 .slick-dots li:nth-child(4) button{background: #FFF;}
.m07 .slick-dots li:nth-child(1) button{background: #1A1A1A;}
.m07 .slick-dots li:nth-child(2) button{background: #ADAFB0;}
.m07 .slick-dots li:nth-child(3) button{background: #FFF;}
.m08 .slick-dots li:nth-child(1) button{background: #F9F5F2;}
.m08 .slick-dots li:nth-child(2) button{background: #767C96;}
.m0901 .slick-dots li:nth-child(1) button{background: #FFF;}
.m0901 .slick-dots li:nth-child(2) button{background: #FFF;}
.m0901 .slick-dots li:nth-child(3) button{background: #FFF;}
.m0901 .slick-dots li:nth-child(4) button{background: #FFF;}
.m0901 .slick-dots li:nth-child(5) button{background: #FFF;}
.m0902 .slick-dots li:nth-child(1) button{background: #64694A;}
.m0902 .slick-dots li:nth-child(2) button{background: #313A4B;}
.m0902 .slick-dots li:nth-child(3) button{background: #FFF;}
.m0903 .slick-dots li:nth-child(1) button{background: #313A4B;}
.m0903 .slick-dots li:nth-child(2) button{background: #64694A;}
.m0903 .slick-dots li:nth-child(3) button{background: #FFF;}



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

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

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

.m08 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f08main.webp");}
.m08 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f08main_re.webp");opacity: 0;}

.s0801 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f08style01.webp");}
.s0801 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f08style01_re.webp");opacity: 0;}
.s0802 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f08style02.webp");}
.s0802 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f08style02_re.webp");opacity: 0;}

.m0902 .crossfade_wrap .crossfade_slide.p01{background-image: url("../../images/f09main02.webp");}
.m0902 .crossfade_wrap .crossfade_slide.p02{background-image: url("../../images/f09main02_re.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%;
	letter-spacing: 0.03em;
	line-height: 1.85;
	margin-bottom: 2.8em;
	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.5em);
	letter-spacing: 0.02em;
	font-size: 1.28em;
	line-height: 1.15;
}
.itemList .name em{display: block;}

.itemList .name span{
	font-size: 0.75em;
	padding-left: 0.2em;
	letter-spacing: 0;
	display: inline-block;
	padding-bottom: 0.1em;
	vertical-align: middle;
}
.itemList .detail{width: 6.6em;}
.itemList .detail a{
	display: block;
	width: 100%;
	border: 1px solid #484B44;
	color: #484B44;
	font-size: 1.4em;
	text-align: center;
	padding: 0.15em 0;
}

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


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

.style .itemList{width: 92%;margin: 2em auto 0;font-size: 0.85em;}
.style .itemList .detail a{padding: 0.1em 0;}
.style .itemList dl{margin-top: 1.4em;}


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

.itemList .otherItem{display: none;}
.itemList .otherTrigger{
	margin-top:1.5em;
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.itemList .otherTrigger p.more{
	font-size: 1.14em;
	line-height: 1;
	margin-left: 3.7em;
	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: 3.7em;
	font-size: 1.14em;
	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: 2.85em;
	height: 2.14em;
	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: 1.07em;
	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: 80%;
	max-width: 960px;
	margin: 0 auto;
}
.styleList{
	width: 100%;
	margin: 0 auto;
}
.styleList ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.styleList ul li{width: 46.7%;}
.styleList ul li:nth-child(3),
.styleList ul li:nth-child(4){margin-top: 7.2em;}


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


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

.teemJarvi{
	width: 100%;
	margin-top: 6.15em;
	color: #565654;
	border-top: 1px solid #484B44;
	border-bottom: 1px solid #484B44;
	 background: linear-gradient(to right, #3D5244 0%, #3D5244 50%, #FCFBF7 50%, #FCFBF7 100%);
}

.teemJarvi .teemInner{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
}
.teemJarvi .image{
	width: 34.5%;
	background: #3D5244;
	position: relative;
}
.teemJarvi .image figure{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5%;
	left: 15%;
	background: url("../../images/teemu.webp") center center no-repeat;
	background-size: cover;
}

.teemJarvi .teemDetail{
	width: 65.5%;
	background: #FCFBF7;
}

.teemJarvi .teemDetail .teemTitle{
	width: 95%;
	position: relative;
	line-height: 1;
	letter-spacing: 0.03em;
	padding: 1.6em 0 1.6em 2em;
	border-bottom: 1px solid #000;
}
.teemJarvi .teemDetail .teemTitle h2{
	font-family: "MaisonNeueDemi";
	font-size: 2.7em;
}
.teemJarvi .teemDetail .teemTitle h3{
	font-weight: 700;
	font-size: 1.6em;
	margin-top: 0.4em;
}
.teemJarvi .teemDetail .teemTitle .logo{
	position: absolute;
	width: 7em;
	top: 50%;
	right: 9%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.teemJarvi .teemDetail .teemCopy{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	width: 90%;
	padding: 1.8rem 0 2rem 2rem;
	line-height: 2.2;
	text-align: justify;
	text-justify: inter-ideograph;
}











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


.allBanner{
	width: 100%;
	margin: 12.8em auto 0;
	position: relative;
	color: #484B44;
	border-bottom: 1.4em solid #C2DA70;
}
.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%;
	background: #FCFBF7;
}
.allBanner .detail{
	width: 88%;
	max-width: 1280px;
	margin: 0 auto;
	height: 9.3em;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.allBanner .detail h2{
	font-size: 2.2em;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-align: left;
	font-weight: 700;
}
.allBanner .detail h2 em{font-family: "MaisonNeueDemi";letter-spacing: 0.02em;font-weight: normal;}
.allBanner .detail h2 br{display:none;}
.allBanner .detail h2 br.fix{display:block;}

.allBanner .more{
	position: absolute;
	top: 50%;
	right: 5%;
	display: inline-block;
	z-index: 15;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.allBanner .more a{
	display: block;
	font-family: "SequelSansBook";
	letter-spacing: 0.03em;
	font-size: 1.8em;
	text-align: center;
	line-height: 1;
	padding: 0.6em 1em 0.6em;
	border: 2px solid #484B44;
	box-sizing:content-box;
	color: #484B44;
}


@media(min-width: 769px) {
.allBanner .more a{-webkit-transition: all 0.4s;transition: all 0.4s;}
.allBanner .more a:hover{background:#484B44;color:#FFF;}
}




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


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


.otherContents .otherTitle{
	width: 100%;
	margin: 12.8em auto 0;
	position: relative;
	text-align: center;
}
.otherContents .otherTitle h2{
	position: relative;
	display: inline-block;
	line-height: 1;
	font-family: "Sequel100Black55";
	font-size: 3.2em;
	padding: 0.5em 0.5em;
}
.otherContents .otherTitle h2::before,
.otherContents .otherTitle h2::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background: #006AB7;
	height: 3px;
}
.otherContents .otherTitle h2::before{top: 0;}
.otherContents .otherTitle h2::after{bottom: 0;}

.otherContents .otherList{
	width: 85%;
	max-width: 1040px;
	margin: 5.7em 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;
	bottom: 1em;
	left: 1em;
	font-family: "MaisonNeueDemi";
	line-height: 1;
	font-size: 3.2em;
	letter-spacing: 0.03em;
	color: #FFF;
	text-align: left;
}
.otherContents .otherList .text{
	width: 100%;
	background: #006AB7;
	color: #FFF;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 1.7em;
	line-height: 1;
	padding: 0.5em 0 0.6em 2em;
	text-align: left;
}

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

.sns{width: 53em;margin: 9.5em auto 0;}

.sns ul{width: 100%;display: flex;}
.sns ul li{
	text-align: center;
	width: 33.3333%;
	padding: 1em 0;
	border-left: 2px solid #484B44;
}
.sns ul li:first-child{border: none;}
.sns a{
	color: #484B44;
	letter-spacing: 0.05em;
	font-size: 1.7em;
	font-family: "MaisonNeueDemi";
}
.sns .icon{
	width: 1.9em;
	margin: 0.9em auto 0;
	-webkit-transition:opacity 0.4s;
	transition:opacity 0.4s;
}

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

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

.lineBanner{
	width: 39em;
	margin: 11.5em 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% - 4.3em);
	left: 0;
	right: 0;
	width: 26%;
	max-width: 24.3em;
	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.6em;
	text-align: center;
	font-family: "SequelSansBook";
}
.footer .copyright br{display: none;}

.footer .pagetop{
	position: absolute;
	display: block;
	cursor: pointer;
	width: 2.85em;
	right: 2.5%;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.spSpace{display: none;}

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





.sideNavi{
    position: fixed;
    top: 50%;
    right:-5.1em;
    width: 5em;
    z-index: 100;
	line-height: 1;
    -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: 1.3em;}


.sideNavi p{
	font-family: "MaisonNeueDemi";
	font-size: 1.43em;
	color: #565654;
	line-height: 0.8;
	letter-spacing: 0.03em;
}

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


.sideNavi figure h3{
	position: absolute;
	z-index: 5;
	bottom:0.3em;
	left:0.4em;
	font-family: "Sequel100Black55";
	line-height: 1.1;
	font-size: 0.9em;
	color: #FFF;
}

.sideNavi .current h3{color: #C2DA70;}
.sideNavi .current figure img{opacity: 1;}
.sideNavi  a:hover figure 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");}