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

body{
	margin:0;
	padding:0;
}

ul{
	list-style:none;
}

a {
text-decoration: none;
}

span.aw { display: inline-block; }


	

.sec01 .img01 {
  position: relative;
  background-image: url(../../img/concept/anime/base.jpg);
  background-size: cover;
  height: 56vw;
  overflow: hidden;
}
.sec01 .img01 .line01 {
  position: absolute;
  background-image: url(../../img/concept/anime/line01.jpg);
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: 0.5s;
}
.sec01 .img01 .line01.active {
  height: 100%;
}
.sec01 .img01 .line02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: 0.5s;
}
.sec01 .img01 .line02 img {
  transform: translate(100%, 0);
  transition: 0.5s;
}
.sec01 .img01 .line02.active {
  transform: translate(0, 0);
}
.sec01 .img01 .line02.active img {
  transform: translate(0, 0);
}
.sec01 .img01 .genchi {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: brightness(100);
  transition: cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
}
.sec01 .img01 .genchi.active {
  opacity: 1;
  filter: brightness(1);
}
.sec01 .img01 .plot_shinyokohama {
  position: absolute;
  top: 26%;
  left: 33%;
  width: 16vw;
  opacity: 0;
  transform: translateX(5vw);
  transition: 0.5s;
}
.sec01 .img01 .plot_shinyokohama.active {
  opacity: 1;
  transform: translateX(0);
}
.sec01 .img01 .baloon {
  position: absolute;
  top: 42%;
  left: 17%;
  width: 24vw;
  opacity: 0;
  transform: translateX(5vw);
  transition: 0.5s;
}
.sec01 .img01 .baloon.active {
  opacity: 1;
  transition-delay: 0.3s;
  transform: translateX(0);
}
.sec01 .img01 .property_name {
  position: absolute;
  top: 23%;
  left: 61%;
  width: 16vw;
  opacity: 0;
  transform: translateX(5vw);
  transition: 0.5s;
}
.sec01 .img01 .property_name.active {
  opacity: 1;
  transition-delay: 1s;
  transform: translateX(0);
}
.sec01 h3 {
  font-size: 1.6rem;
  text-align: center;
	margin-top: 80px;
	margin-bottom: 20px;
}
.sec01 h3 sup {
  vertical-align: text-top;
  font-size: 1rem;
}
.sec01 .lead {
  text-align: center;
  font-size: 1.2rem;
  line-height: 2.4;
	margin-bottom: 80px;
}
.sec01 .lead sup {
  vertical-align: top;
  font-size: 1rem;
}
.sec01 .kankyoResidence {
  margin: 5rem auto 0;
}
@media (max-width: 520px) {
  .sec01 .kankyoResidence {
    width: 100%;
  }

}
.sec01 .kankyoResidence h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
}
.sec01 .kankyoResidence .txt01 {
  font-size:2.4rem;
  line-height: 1.4;
  text-align: center;
  color: var(--primary);
  margin-bottom: 1rem;
}
.sec01 p.lead {
  text-align: center;
  font-size: 0.8rem;
  line-height: 3;
}


.sec01 .kankyoResidence .txt02 {
  background-color: var(--primary);
  color: #fff;
  font-size: 2.4rem;
  text-align: center;
}
.sec01 .kankyoResidence .circle {
  display: flex;
  justify-content: space-between;
  margin: 3rem auto 0;
  width: 55%;
}
.sec01 .kankyoResidence .circle li {
  width: 100%;
  margin: 0 0.5rem;
}
.sec01 .cg01 {
  position: relative;
	text-align: center;
	padding-top: 120px;
}

@media (max-width: 520px) {
  .sec01 .kankyoResidence .txt01 {
    font-size: 1.8rem;
  }
.sec01 .kankyoResidence .circle {
  display: flex;
  justify-content: space-between;
  margin: 3rem auto 0;
  width: 100%;
}
}



#concept_content{
	width:100%;
	background-color:#FFF;
	overflow:hidden;
	position:relative;
}



#contents_box_concept{
	width:94%;
	margin:0 auto;
	overflow:hidden;
	padding-bottom:160px;
	text-decoration:none;
}

.concept_topcopy{
	width: 100%;
	text-align: center;
    font-size: 16px;
    margin-top: 42px;
    margin-bottom: 100px;
    font-family: "源ノ明朝", serif;
	letter-spacing: 0.1em;
    color: #3A372D;
}

.concept_topcopy p.lead{
	font-size: 16px;
	line-height: 32px;
}

.concept_topcopy h3{
	font-size: 40px;
	margin-bottom: 60px;
}

.concept_topcopy .mark{
	margin-bottom: 100px;
	padding: 10px;
}


@media screen and (max-width:769px) { 
.concept_topcopy{
    font-size: 14px;
    margin-top: 24px;
}
	
	.concept_topcopy p.lead{
	font-size: 14px;
	line-height: 30px;
}

.concept_topcopy h3{
	font-size: 27px;
	margin-bottom: 30px;
}

}


p.concept_undercopy{
	font-size:14px;
	color:#666;
	font-family: "源ノ明朝", serif;
	color:#989082;
	margin-top:30px;
}

p.concept_undercopy1{
    font-size: 24px;
    color: #666;
    font-family: 'Cinzel', serif;
    color: #232955;
    letter-spacing: 0.3em;
    margin-top: 20px;
}

p.concept_undercopy2{
    font-size: 24px;
    color: #666;
    font-family: 'Cinzel', serif;
    color: #B9A983;
    letter-spacing: 0.3em;
    margin-top: 10px;
}



.gazoubox{
	width:94%;
	margin:0 auto;
}

.gazoubox img{
	width:100%;
	height:auto;
}

.inner_box{
	width:1000px;
	margin:0 auto;
	text-align:left;
	height:60px;
	border-left:solid #ccc 2px;
}


.button{
	width:240px;
	margin:0 auto;
	text-align:center;
	padding-top:40px;
}


.click {
	display: inline-block;
	width: 160px;
	padding: 0.8em;
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.6s, color 0.2s, width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	color: #030202;
	border: 1px solid #030202;
	background: transparent;
}
.click:hover {
	width: 180px;
	color: #ffffff;
	border: 1px solid #030202;
	background-color: #030202;
}
.click:active {
	border-color: #5e35b1;
	background-color: #5e35b1;
}
.click:focus {
	color: #7e57c2;
	border: 1px solid #030202;
}
.click:focus:hover {
	color: #ffffff;
}

@media (max-width: 480px) { 
#contents_box_concept{	padding-bottom:40px;
}

#contents_box_concept .gazoubox img { width: 150%;}
#contents_box_concept .button{padding-top:0px;}

.concept_topcopy{
	margin-top:20px;
	margin-bottom:20px;

}

p.concept_undercopy{
	margin-bottom:40px;
	margin-top:20px;
}
.button{
	margin-top:40px;
}

}

.main { position: relative; background: #FFF; margin-bottom:30px; }
.main .slide01 { margin-bottom: 0px !important; padding-bottom: 0px !important; padding-left:0px; opacity: 0; transition: opacity 2s linear; }
.main .slide01.slick-initialized { opacity: 1; }
.main .slide01 .slick-list li { position: relative; }
.main .slide01 .slick-list li .main-txt { max-width: 650px; position: absolute; display: block; z-index: 2; top: 46%; left: 50%; width: 80%; transform: translateX(-50%) translateY(-50%); }
.main .slide01 .slick-list li .main-txt img { width: 100%; height: auto; }
.main .slide01 .slick-list li::before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 53.125%; }
@media (max-width: 600px) { .main .slide01 .slick-list li::before { padding-bottom: 80%; } }
.main .slide01 .slick-list li.main01 { background: url("../img/concept02/main01_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main02 { background: url("../img/concept02/main02_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main03 { background: url("../img/concept02/main03_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main04 { background: url("../img/concept02/main04_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main05 { background: url("../img/concept02/main05_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main06 { background: url("../img/concept02/main06_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slide01 .slick-list li.main07 { background: url("../img/concept02/main07_bg@2x.jpg") no-repeat center center; background-size: cover; }
.main .slick-dots { position: absolute !important; bottom: 3% !important; }
.main .slick-dots li { position: relative; overflow: hidden; display: inline-block; width: 13px; height: 13px; margin: 1%; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.main .slick-dots li button { text-indent: -9999px; }
.main .slick-dots li.slick-active { background: white; }
.main .slick-prev, .main .slick-next { background: rgba(0, 0, 0, 0.3); padding: 10px; display: block; width: auto; height: auto; width: 40px; }
.main .slick-prev:hover, .main .slick-next:hover { background: black; }
.main .slick-prev { left: 2%; z-index: 5; }
.main .slick-next { right: 2%; z-index: 6; }



.maincopy_in_text,
.maincopy_in_text span {
  opacity: 0;
}

.animated{
	width:100%;
	text-align:center;
	font-size:14px;
	line-height:22px;
}

p.top_txt{
	position:absolute;
	top;100px;
	left:100px;
	font-size:24px;
	color:#666;
	z-index:99999;
}
    .sample-text1 {
        font-size: 16px;
		line-height:44px;
		    font-family: "源ノ明朝", serif;
        animation-name: maincopy_in;
        animation-duration: 6s;
			text-align:center;
			padding-bottom:100px;
			color:#666;
    }
    @keyframes maincopy_in {
    from {
        opacity: 0;
        transform: translateY(120px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }


.maincopy_in {
	width:100%;
	height:800px;
	text-align:center;
  opacity: 0;
  transform : translate(0, 150px);
  transition : all 1500ms;
}

.maincopy_in.scrollin{
  opacity: 1;
  transform: translate(0, 0);

}

@media (max-width: 480px) { 
.sample-text1 {
        font-size: 10px;
		line-height:28px;
		padding-bottom:0px;

}
}