@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
top .image {
  position: relative;
}
#top .main-visual {
  position: relative;
  overflow: hidden;
}
#top .main-visual .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s;
}
#top .main-visual .slides.on {
  opacity: 1;
}
#top .main-visual .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  transition: opacity 1.5s;
  opacity: 1;
}
#top .main-visual .img.on {
  opacity: 0;
}
#top .main-visual .bg {
  opacity: 0;
}
#top .main-visual .texts {
  position: absolute;
  bottom: 40px;
  left: 40px;
  opacity: 0;
  transition: opacity 1.5s;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
}
#top .main-visual .texts.on {
  opacity: 1;
}
#top .main-visual .texts .text01 {
  font-size: 17px;
  padding-bottom: 10px;
}
#top .main-visual .texts .text02 {
  font-size: 60px;
  padding-bottom: 10px;
}
#top .main-visual .texts .text03 {
  font-size: 14px;
}
#top .pc-mv .slide02 .image {
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
#top .pc-mv .slide02 .image img {
  transition: margin 5s;
}
#top .pc-mv .slide02 .image:not(.on) img {
  margin: 0 !important;
}



#top .apeals {
  background: url(../imgs/top/bg01.png) no-repeat center;
  background-size: cover;
  padding: 40px 0;
}
#top .apeals .text {
  width: 94%;
  max-width: 1000px;
}
#top .top-annotation {
  padding: 88px 0 88px;
  text-align: center;
  font-size: 14px;
  line-height: 2.25;
}
#top .information {
  background: url(../imgs/top/bg02.png) no-repeat center;
  background-size: cover;
  text-align: center;
  padding: 145px 0;
}
#top .information .title {
  color: #a38358;
  font-size: 20px;
  line-height: 1.3;
  font-weight: normal;
  padding-bottom: 66px;
}
#top .information .text01 {
  font-size: 18px;
  padding-bottom: 40px;
}
#top .information .text01 .lined {
  line-height: 2.2;
  margin-bottom: 4px;
  display: inline-block;
  border-bottom: 1px solid #a38358;
  color: #fff;
}
#top .information .text02 {
  font-size: 20px;
  line-height: 1.7;
  padding-bottom: 20px;
}
#top .information .text03 {
  font-size: 20px;
  line-height: 1.5;
  padding-bottom: 10px;
}
#top .information .text04 {
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 60px;
}
#top .information .yokoku {
  padding-bottom: 20px;
  margin-bottom: 40px;
}
#top .information .yokoku .yokoku-title {
  font-size: 14px;
  line-height: 1.9;
}
#top .information .yokoku .yokoku-text {
  font-size: 13px;
  line-height: 1.9;
}
#top .information .notice {
  padding-bottom: 20px;
  margin-bottom: 40px;
}
#top .information .notice .notice-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.9;
}
#top .information .notice .notice-text {
  font-size: 13px;
  line-height: 1.9;
}
#top .information .text-nextday {
  font-size: 14px;
}
#top .button_box .button {
	padding-top: 30px;
  margin: 0 auto;
  max-width: 350px;
}
#top .button_box .button a {
  position: relative;
  display: block;
  padding: 25px;
  border: 1px solid #a38358;
  text-align: center;
}
#top .button_box .button a .inner {
  position: relative;
  z-index: 2;
  transition: color 0.5s;
  color: #a38358;
}
#top .button_box .button a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a38358;
  opacity: 0;
  transition: opacity 0.5s;
}
#top .button_box .button a:hover {
  opacity: 1 !important;
}
#top .button_box .button a:hover .inner {
  color: #303338;
}
#top .button_box .button a:hover::after {
  opacity: 1;
}
/*==================================================================================
 top-sp
==================================================================================*/
@media (max-width: 768px) {

  #top .main-visual {
    position: relative;
  }
  #top .main-visual .texts {
    position: absolute;
    bottom: auto;
    top: 85%;
    transform: translateY(-50%);
    left: 5%;
    width: 90%;
  }
  #top .main-visual .texts .text01 {
    font-size: 9px;
    padding-bottom: 5px;
  }
  #top .main-visual .texts .text02 {
    font-size: 34px;
    padding-bottom: 6px;
  }
  #top .main-visual .texts .text03 {
    font-size: 16px;
  }
  #top .main-visual .texts.slide01 {
    top: 25%;
  }
  #top .apeals {
    background-image: url(../imgs/top/bg01-sp.png);
    padding: 47px 0;
  }
  #top .apeals .text {
    max-width: 960px;
    width: 76%;
  }
  #top .top-annotation {
    padding: 80px 0 88px;
    font-size: 14px;
  }
  #top .information {
    background-image: url(../imgs/top/bg02-sp.png);
    padding: 43px 0;
  }
  #top .information .title {
    font-size: 20px;
    padding-bottom: 45px;
  }
  #top .information .text01 {
    font-size: 18px;
    padding-bottom: 45px;
  }
  #top .information .text01 .lined {
    line-height: 2.2;
    margin-bottom: 5px;
  }
  #top .information .text02 {
    line-height: 1.7;
  }
  #top .information .text03 {
    line-height: 1.5;
    padding-bottom: 10px;
  }
  #top .information .text04 {
    padding-bottom: 38px;
  }
  #top .information .text-nextday {
    font-size: 14px;
  }
  #top .information .button {
    padding-bottom: 30px;
    margin: 0 auto;
    max-width: inherit;
  }
  #top .information .button a {
    padding: 20px;
  }
  #top .information .wrap {
    width: 90%;
  }
  #top .sections {
    position: relative;
  }
  #top .sections .header {
    max-width: 90%;
    margin: 0 auto;
  }
  #top .sections .header .title {
    font-size: 30px;
    padding-bottom: 35px;
  }
  #top .sections .header .lead {
    padding-left: 0px;
    margin-bottom: 40px;
  }
  #top .sections .header .lead .text {
    font-size: 21px;
  }
  #top .sections .header .lead .mark {
    position: static;
    width: 65px;
    transform: translateY(0%);
    padding-bottom: 26px;
  }
  #top .sections .header .detail {
    padding-bottom: 40px;
  }
  #top .sections .header .link {
    max-width: inherit;
  }
  #top .sections .header .link a {
    padding: 20px;
  }
  #top .bg-area {
    background-image: url(../imgs/top02/bg03-sp.jpg);
  }
  #top .section-concept {
    padding: 70px 0 153px;
  }
  #top .section-concept .header {
    width: 84%;
  }
  #top .section-concept .header .title {
    font-size: 24px;
    transform: translateX(0px);
    padding-bottom: 65px;
  }
  #top .section-concept .header .text br {
    display: none;
  }
  #top .section-concept .images .image01 {
    top: 70.5%;
    left: auto;
    right: 0;
    width: 44%;
    z-index: 3;
  }
  #top .section-concept .images .image02 {
    top: 54%;
    right: auto;
    left: 5%;
    width: 66%;
    z-index: 4;
  }
  #top .section-concept .images .image03 {
    bottom: 6.1%;
    left: 0%;
    width: 68.5%;
  }
  #top .section-concept .images .annotation {
    position: absolute;
    bottom: 6.1%;
    right: 0;
    font-size: 11px;
  }
  #top .section-concept .bg {
    padding-top: 65px;
    opacity: 0;
    width: 100%;
  }
  #top .section-concept .line {
    top: 60%;
  }
  #top .section-location {
    padding: 62vw 0 20vw;
  }
  #top .section-location .header {
    margin-left: 5%;
    width: 90%;
    padding: 55px 5%;
  }
  #top .section-location .image {
    top: 0%;
    left: 0;
    width: 100%;
  }
  #top .section-location .image .caption {
    bottom: 13%;
  }
  #top .section-location .line {
    top: 42%;
    height: 200vw;
  }
  #top .section-location .line img {
    width: 100%;
    height: 100%;
  }
  #top .section-access {
    padding: 120vw 0 20vw;
  }
  #top .section-access .header {
    margin-left: 5%;
    width: 90%;
  }
  #top .section-access .header .link {
    margin-left: 0;
  }
  #top .section-access .image {
    top: 0%;
    right: 0;
    width: 20%;
  }
  #top .section-access .image01 {
    top: 0%;
    right: 0;
    width: 70.2777777778%;
  }
  #top .section-access .image02 {
    top: 22%;
    right: 45%;
    width: 44.4444444444%;
  }
  #top .section-access .line {
    top: 21%;
  }
  #top .section-design {
    padding: 90vw 0 80px;
  }
  #top .section-design .header {
    margin-left: 5%;
    width: 90%;
  }
  #top .section-design .image01 {
    top: 0%;
    left: 10%;
    width: 80%;
  }
  #top .section-design .line {
    top: -21%;
  }
  #top .section-plan {
    padding: 100vw 0 90px;
  }
  #top .section-plan .header {
    margin-left: 5%;
    width: 90%;
  }
  #top .section-plan .image01 {
    top: 10vw;
    right: 10%;
    width: 80%;
  }
  #top .section-plan .line {
    width: auto;
    top: 70vw;
    right: 0;
    left: auto;
    height: auto;
  }
  #top .section-plan .line img {
    width: 100%;
    height: auto;
  }
}/*# sourceMappingURL=top.css.map */




html { font-size: 62.5%; }
body {
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Serif JP', serif;
	overflow-x: hidden;
}
sup { font-size: 70%; }

body.loaded .page {
	opacity: 1;
	visibility: visible;
}

#top.page:before { transform: translateX(100%);}
body.scrolled #top.page:before { transform: translateX(0); }
@media only screen and (min-width:1001px){
	.page:before { display: block; }
}

.flex {
	display: flex;
	flex-wrap: wrap;
}
.vrl {
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.novrl {
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: rl-tb;
    writing-mode: horizontal-tb;
    line-height: 1.2;
    padding-bottom: 5px;
}


a { text-decoration: none;}
a.disable {
	color: #999999 !important;
	cursor: default;
}
a.disable:hover {
	opacity: 1;
}
figure {
    margin: 0;
    padding: 0;
}
img.full {
    width:100%;
    max-width: 100%;
    height:auto;
}
.en { font-family: "Cormorant Infant", serif; font-weight: 400;}
@media only screen and (max-width:1000px){
	.bg { padding: 0; }
	.ipad_only { display: none !important; }
}
a {
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-position: top left;
	color: #333333;
	text-decoration: none;
}
a:hover { opacity: 0.8; }
@media only screen and (min-width:1001px){
	a[href^="tel:"] { pointer-events: none;}
}

/*==================================================================
	Contents setting
===================================================================*/
body #container {
	background: url(../imgs/top02/bg_body_top.jpg) repeat 0 0;
	background-attachment: fixed;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position: relative;
  	z-index: 1;
}
body #top #container {
	background: url(../imgs/top02/bg_body_top.jpg) repeat 0 0;
	background-attachment: fixed;
	font-family: 'fot-tsukuaoldmin-pr6n', serif  !important;
font-weight: 300;
font-style: normal;
}
img {
	max-width: 100%;
	height: auto;
}
.inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
	.inner {max-width: 92%;}
}

.caption {
	font-family: 'Noto Sans Japanese';
	color: #000 !important;
	font-size: 10px;
	line-height: 1.2 !important;
}

/* fade_up */
.fadeup {
	opacity: 0;
	transform: translateY(20px);
	transition-duration: 1s;
}
.fadeup.on {
	opacity: 1;
	transform: translateY(0);
}
/* fade_in */
.fadein {
    opacity: 0;
    transition-duration: 2s;
}
.fadein.on {
    opacity: 1;
}
/* fade_out */
.fadeout {
    opacity: 1;
    transition-duration: 2s;
}
.fadeout.on {
    opacity: 0;
}

#top .line-1,
#top .line-2,
#top .line-3,
#top .line-4 {
	background-color: rgba(255, 255, 255, .85);
}
.infoes .line-1,
.infoes .line-2,
.infoes .line-3,
.infoes .line-4 {
	background-color: rgba(255, 255, 255, .85);
}
.line-1 {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    background-color: rgba(255,255,255, .85);
    left: 0;
    bottom: 0;
    -webkit-animation: move1 1500ms infinite ease;
    animation: move1 1500ms infinite ease;
}
.line-2 {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    background-color: rgba(255,255,255, .85);
    left: 0;
    top: 0;
    -webkit-animation: move2 1500ms infinite ease;
    animation: move2 1500ms infinite ease;
}
.line-3 {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    background-color: rgba(255,255,255, .85);
    right: 0;
    top: 0;
    -webkit-animation: move3 1500ms infinite ease;
    animation: move3 1500ms infinite ease;
}
.line-4 {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    background-color: rgba(255,255,255, .85);
    right: 0;
    bottom: 0;
    -webkit-animation: move4 1500ms infinite ease;
    animation: move4 1500ms infinite ease;
}
@-webkit-keyframes move1 {
    0% {
        height: 100%;
        bottom: 0;
    }
    54% {
        height: 0;
        bottom: 100%;
    }
    55% {
        height: 0;
        bottom: 0;
    }
    100% {
        height: 100%;
        bottom: 0;
    }
}
@keyframes move1 {
    0% {
        height: 100%;
        bottom: 0;
    }
    54% {
        height: 0;
        bottom: 100%;
    }
    55% {
        height: 0;
        bottom: 0;
    }
    100% {
        height: 100%;
        bottom: 0;
    }
}
@-webkit-keyframes move2 {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
        opacity: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes move2 {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
        opacity: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@-webkit-keyframes move3 {
    0% {
        height: 100%;
        top: 0;
    }
    54% {
        height: 0;
        top: 100%;
    }
    55% {
        height: 0;
        top: 0;
    }
    100% {
        height: 100%;
        top: 0;
    }
}
@keyframes move3 {
    0% {
        height: 100%;
        top: 0;
    }
    54% {
        height: 0;
        top: 100%;
    }
    55% {
        height: 0;
        top: 0;
    }
    100% {
        height: 100%;
        top: 0;
    }
}
@-webkit-keyframes move4 {
    0% {
        width: 0;
        right: 0;
    }
    55% {
        width: 100%;
        right: 0;
        opacity: 0;
    }
    100% {
        width: 0;
        right: 100%;
    }
}
@keyframes move4 {
    0% {
        width: 0;
        right: 0;
    }
    55% {
        width: 100%;
        right: 0;
        opacity: 0;
    }
    100% {
        width: 0;
        right: 100%;
    }
}

@media screen and (max-width:991px) {
	.head-btns .line-1,
	.head-btns  .line-2,
	.head-btns  .line-3,
	.head-btns  .line-4 {
		display: none;
	}
}



/*==================================================================
	Common page setting
===================================================================*/
.stretchL, .stretchR, .stretchT {
	overflow: hidden;
	position: relative;
    opacity: 0;
}
.stretchL.on {animation: stretchL 1.5s ease 0s forwards;}
@keyframes stretchL {
    0% {
		clip-path: inset(0 100% 0 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchR.on {animation: stretchR 1.5s ease 0s forwards;}
@keyframes stretchR {
    0% {
		clip-path: inset(0 0 0 100%);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchT.on {animation: stretchT 1.5s ease 0s forwards;}
@keyframes stretchT {
    0% {
		clip-path: inset(0 0 100% 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.wrapper .pic_cap{
	color: #000000 !important;
	padding: 2px;
}

/* */
.fs10{font-size: 10px;}
.fs12{font-size: 12px;}
.d_inline_block{ display: inline-block;}
.slick-slide {outline: none !important;}

/* slideメニュー 高さのない画面用 */
@media only screen and (min-width: 1001px) and (max-height: 760px) {
	#js-menu-hambeger .menu-wrap{
		font-size: 80% !important;
	}
	#js-menu-hambeger .menu-body .navs li{
		margin-bottom: 2px !important;
	}
	#js-menu-hambeger .menu-body02 .btns li a{
		font-size: 1.2rem !important;
	}
	#js-menu-hambeger .menu-body .navs li span{
		font-size: 1.5rem !important;
	}
}

/*============================ 
    Page setting
 ============================*/
 /* section verticle title */
.mHead {
	font-size: 2.7rem;
	letter-spacing: 0.9rem;
}
.mHead > .vrl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.mHead > .vrl > * {
	border-left: 1px solid #a08275;
	color: #a08275;
	display: block;
	padding: 0 15px 0 3px;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.0s ease-in-out, opacity 0.4s ease-in-out
}
.mHead > .vrl > :nth-child(1) {transition-delay: 0.0s;}
.mHead > .vrl > :nth-child(2) {transition-delay: 0.8s;}
.mHead > .vrl > :nth-child(3) {transition-delay: 1.6s;}
.mHead.on > .vrl > * {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
@media only screen and (max-width: 1000px) {
	.mHead { font-size: 2em;}
	.mHead > .vrl > * { padding: 0 5px 0 0;}
}
@media only screen and (max-width: 767px) {
	.mHead { font-size: 1.6em; letter-spacing: 0.25rem;}
}


/* lower main image */
.mainLower {
	overflow: hidden;
	position: relative;
}
.mainLower img {
	height: 50vh;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.8s ease-in-out 0.8s;
}
body.loaded .mainLower img { filter: grayscale(0);}
.mainLower h2 {
	color: #cbb98c;
	font-size: 4.8rem;
	line-height: 1;
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 1;
	text-align: center;
	width: 100%;
}
.mainLower h2 > span > span {
	display: inline-block;
	min-width: 1rem;
	opacity: 0;
}
body.loaded .mainLower h2 > span > span {
	-webkit-animation: mainLowerText 1s cubic-bezier(0.54, 0, 0, 0.99) 0s forwards;
			animation: mainLowerText 1s cubic-bezier(0.54, 0, 0, 0.99) 0s forwards;
}
@keyframes mainLowerText {
	0% {
		filter: blur(10px);
		transform: translateX(-100%) translateY(100%);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		transform: translateX(0) translateY(0);
		opacity: 1;
	}
}

.mainLower .lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	content: "";
	height: 8px;
	width: 70%;
	max-width: 960px;
	margin: 0 auto;
	position: absolute;
	top: 60%;
	right: 0;
	left: 0;
	z-index: 1;
}
.mainLower .lines .line1 {
	/* background-color: rgba(255, 255, 255, 0.15); */
	height: 1px;
	width: 95%;
	overflow: hidden;
	margin-left: auto;
	position: relative;
}
.mainLower .lines .line1 > span {
	background: linear-gradient(to right, rgba(161,125,65,1) 0%,rgba(215,199,173,1) 40%,rgba(255,255,255,1) 63%,rgba(121,84,42,1) 100%);
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
}
body.loaded .mainLower .lines .line1 > span {
    -webkit-animation: mainLowerLine01 1s forwards linear;
    -moz-animation: mainLowerLine01 1s forwards linear;
    animation: mainLowerLine01 1s forwards linear;
}
@keyframes mainLowerLine01 {
	0% {
		right: 100%;
	}
	100% {
		right: 0%;
	}
}
.mainLower .lines .line2 {
	/* background-color: rgba(255, 255, 255, 0.15); */
	height: 1px;
	width: 95%;
	overflow: hidden;
	margin-right: auto;
	position: relative;
}
.mainLower .lines .line2 > span {
	background: linear-gradient(to left, rgba(161,125,65,1) 0%,rgba(215,199,173,1) 40%,rgba(255,255,255,1) 63%,rgba(121,84,42,1) 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
}
body.loaded .mainLower .lines .line2 > span {
    -webkit-animation: mainLowerLine02 1s forwards linear;
    -moz-animation: mainLowerLine02 1s forwards linear;
    animation: mainLowerLine02 1s forwards linear;
}
@keyframes mainLowerLine02 {
	0% {
		left: 100%;
	}
	100% {
		left: 0;
	}
}
@media only screen and (max-width:767px){
	.mainLower h2 { font-size: 4rem; top: 40%;}
	.mainLower img { height: 30vh;}
}


#loading {
	background: url(../imgs/top02/bg_body_top.jpg) repeat 0 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
	z-index: 9999;
}
#loading.completed {
	opacity: 0;
	visibility: hidden;
}
#loading img {width: 75px;}

.loadtext {
	color: #a08275;
	font-size: 1.35rem;
	margin-top: 10px;
}
.loadtext .loadtext-word {
	display: inline-block;
	margin: 0 2px;
	filter: blur(0px);
	animation: blur-word 0.8s infinite linear alternate;
}
.loadtext .loadtext-word:nth-child(1) {animation-delay: 0s; }
.loadtext .loadtext-word:nth-child(2) {animation-delay: 0.1s; }
.loadtext .loadtext-word:nth-child(3) {animation-delay: 0.2s; }
.loadtext .loadtext-word:nth-child(4) {animation-delay: 0.3s; }
.loadtext .loadtext-word:nth-child(5) {animation-delay: 0.4s; }
.loadtext .loadtext-word:nth-child(6) {animation-delay: 0.5s; }
.loadtext .loadtext-word:nth-child(7) {animation-delay: 0.6s; }
@keyframes blur-word {
	0% { filter: blur(0px); }
	100% { filter: blur(1px); }
}
@media only screen and (max-width:767px){
	#loading img { width: 55px;}
	.loadtext { font-size: 1.0rem;}
}
.pos_link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/*==================================================================
	Section Introduce
===================================================================*/
.introduce {
	background-color: #fff;
	padding: 180px 0 240px;
}
.introduce h2 {
	margin-bottom: 120px;
	text-align: center;
}
.introduce h2 img { width: 135px;}

.introduce h3 {
	margin-top: -40px;
	font-size: 2.0rem;
	line-height: 2;
	color: #a58879;
	margin-bottom: 40px;
}

.introduce .intro-row {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}
.introduce .txt02 p {
	color: #686339;
	font-size: 1.53rem;
	line-height: 2.4 !important;
	letter-spacing: 0.18em;

}
.introduce .txt .delay1 { transition-delay: 2.5s;}
.introduce .txt .delay2 { transition-delay: 2.6s;}
.introduce .txt .delay3 { transition-delay: 2.7s;}

.introduce .pic {
	max-width: 230px;
	margin-top: 40px;
}
@media screen and (max-width: 1280px) {
	.introduce .txt { line-height: 2.0;	}
}
@media only screen and (max-width:1000px){
	.introduce { padding: 50px 0 100px;}
	.introduce h2 { margin-bottom: 60px;}
	.introduce .intro-row { justify-content: flex-end; gap: 50px;}
	.introduce .building .pic_cap { right:0!important; bottom:-20px; }
	.introduce .building .pic_cap2 { right:0!important; bottom:-20px;color: #000000; }
}
@media only screen and (max-width:767px){
	.introduce { padding-bottom: 60px;}
	.introduce h2 { margin-bottom: 50px;}
	.introduce .intro-row { flex-wrap: wrap; justify-content: center; width: 100%;}
	.introduce .pic { margin-top: 30px;}
	.introduce .txt {
		font-size: 1.4rem;
		letter-spacing: 0.1em;
		line-height: 1.5;
		gap: 25px;
		padding-top: 0;
	}
	.introduce .txt .delay1 { transition-delay: 0.0s;}
	.introduce .txt .delay2 { transition-delay: 0.15s;}
	.introduce .txt .delay3 { transition-delay: 0.30s;}
}

/*==================================================================
	Section Top
===================================================================*/
.wrapper {
	position: relative;
}
.section {
	padding: 150px 0 180px;
	position: relative;
}
.section .inner {
	max-width: 850px;
}
.secTitle_jp {
	color: #dad3c4;
}
.secTitle_jp > * {
	border-color: #5f5f23!important;
	color: #5f5f23!important;
	white-space: nowrap;
}
.secTitle_en {
	color: #5f5f23;
	font-size: 4rem;
	font-weight: 400;
	margin-bottom: 20px;
}
.secText_jp {
	color: #4d4d4d;
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: 0.2rem;
	line-height: 2.4;
}
.secBtn {
	background-color: rgba(116, 67, 60, 0.75);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	height: 28px;
	width: 135px;
	position: relative;
}
.secBtn:before {
	border: 1px solid #bba583;
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	transform: translate(-3px, -3px);
	transition: opacity 0.3s ease-in-out 0.05s, width 0.1s linear, height 0.2s linear;
}
.secBtn:hover:before {
	height: 0px;
	width: 0px;
	transform: none;
	opacity: 0;
}
.secBtn > span {
	position: relative;
	top: -3px;
	transition: top linear 0.1s;
}
.secBtn:hover > span {
	top: 0;
}
.secLines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	content: "";
	height: 8px;
	width: 80%;
	position: absolute;
	bottom: 0;
}
.secLines.aR { left: auto; right: 0; }
.secLines .line1 {
	height: 1px;
	width: 95%;
	overflow: hidden;
	margin-left: auto;
	position: relative;
}
.secLines .line1 > span {
	background: linear-gradient(to right, rgba(161,125,65,1) 0%,rgba(215,199,173,1) 40%,rgba(255,255,255,1) 63%,rgba(121,84,42,1) 100%);
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
}
.block_mansion .wrap.on .secLines .line1 > span,
.secLines.on .line1 > span {
    -webkit-animation: gradientBg01 1s forwards linear;
    -moz-animation: gradientBg01 1s forwards linear;
    animation: gradientBg01 1s forwards linear;
}
@keyframes gradientBg01 {
	0% {
		right: 100%;
	}
	100% {
		right: 0%;
	}
}
.secLines .line2 {
	height: 1px;
	width: 95%;
	overflow: hidden;
	margin-right: auto;
	position: relative;
}
.secLines .line2 > span {
	background: linear-gradient(to left, rgba(161,125,65,1) 0%,rgba(215,199,173,1) 40%,rgba(255,255,255,1) 63%,rgba(121,84,42,1) 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
}
.block_mansion .wrap.on .secLines .line2 > span,
.secLines.on .line2 > span {
	-webkit-animation: gradientBg02 1s forwards linear;
    -moz-animation: gradientBg02 1s forwards linear;
    animation: gradientBg02 1s forwards linear;
}
@keyframes gradientBg02 {
	0% {
		left: 100%;
	}
	100% {
		left: 0;
	}
}

.cms {
	color: #808080;
	font-size: 2rem;
}

@media screen and (max-width: 1000px) {
	.section { padding: 75px 0 90px;}
	.secText_jp { font-size: 1.6rem; letter-spacing: 0.1em;}
	.secLines { width: 100%;}
}
@media screen and (max-width: 767px) {
	.secTitle_en { font-size: 3rem; margin-bottom: 10px;}
	.secText_jp { font-size: 1.4rem; letter-spacing: 0; line-height: 2;}
}

/* CONCEPT*/
.largImg {
	position: absolute;
	left: auto;
	right: 0;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 0;
}
.largImg figure {
	height: 100%;
}
.largImg img {
	height: 100%;
	object-fit: cover;
}
.largImg .pic_cap {
	bottom: 40px;
	left: 15px;
	right: auto;
}
.concept {
	background-position: right bottom;
	position: relative;
}
.conceptTitle { min-width: 80px;}
.conceptTitle .mHead { font-size: 6rem;}
.conceptBody {
	display: flex;
	gap: 80px;
	position: relative;
	z-index: 9;
	padding-top: 130px;
}
.concept .secTitle_en {
	color: #cbc7a3;
}
.concept .secTitle_jp > * {
	border-color: #fdf8eb !important;
	color: #fdf8eb !important;
	font-weight: 300;
}
.concept .secText_jp {
	color: #ffffff;
}
.concept .secLines {
	bottom: 30px;
}
/*safari only*/
.conceptTitle .safarionly { min-height: 100px;}

.conceptInfo {margin-top: 240px;}
@media screen and (max-width: 1000px) {
	.conceptTitle { margin-left: 15%;}
	.conceptBody { gap: 60px; padding-top: 20%; padding-top: 0%;}
}
@media screen and (max-width: 767px) {
	.conceptBody { display: block;}
	.conceptInfo {margin: 0; padding-left: 80px;}
	.conceptTitle { margin: 0; padding-top: 10px; position: absolute; left: 15px; top: auto; min-width: none;}
	.conceptTitle .mHead { font-size: 4rem;}
}

/* LOCATION */
.location {
	background-position: left bottom;
	position: relative;
}
.locationBody {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.locationInfo {	margin-top: 100px;}
.locationPic {
	max-width: 760px;
	width: 40%;
	position: absolute;
	left: 0;
	bottom: 0;
}
.locationPic .smallPic {
	position: absolute;
	left: 90%;
	bottom: 80%;
	width: 32%;
}
@media screen and (max-width: 1280px) {
	.locationTitle { margin-right: 20%; }
}
@media screen and (max-width: 1000px) {
	.locationTitle { margin: 0 auto;}
}
@media screen and (max-width: 767px) {
	.locationBody { display: block;}
	.locationInfo { margin-top: 0;}
	.locationTitle { margin: 0; position: absolute; left: 70%; top: 15px;}
	.locationPic {
		margin-top: 60px;
		position: relative;
		width: 77%;
	}
	.locationPic .smallPic { top: auto; bottom: 15px;}
}

/* ACCESS */
.access {position: relative;}
.accessTitle { margin: 0 auto;}
.accessBody {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.accessInfo {
	margin-top: 40px;
	width: 80%;
}
.accessPic {
	max-width: 540px;
	width: 33%;
	position: absolute;
	right: 0;
	bottom: 0;
}
.accessPic .smallPic {
	position: absolute;
	right: 95%;
	top: -5%;
	width: 32%;
}
@media screen and (max-width: 1000px) {
	.accessTitle { margin: 0 auto;}
}
@media screen and (max-width: 767px) {
	.accessBody { display: block;}
	.accessInfo { margin-top: 30px; width: auto; position: relative;}
	.accessTitle { margin: 0; position: absolute; left: 70%; top: 15px;}
	.accessPic {
		margin-left: auto;
		margin-top: 60px;
		position: relative;
		width: 70%;
	}
	.accessPic .smallPic { width: 40%;}	
}

/* PLAN */
.plan {position: relative;}
.planBody {
	display: flex;
	justify-content: space-around;
	gap: 80px;
	padding-top: 100px;
	position: relative;
	z-index: 9;
}
.planInfo {margin-top: 80px;}
.planPic {
	max-width: 1220px;
	width: 73%;
	position: relative;
}
.planPic .smallPic {
	max-width: 300px;
	width: 40%;
	position: absolute;
	right: 0;
	top: calc(100% + 30px);
	z-index: 1;
}
@media screen and (max-width: 767px) {
	.planPic { width: 95%;}
	.planPic .smallPic {
		left: 15px;
		right: auto;
		top: calc(100% - 30px);
	}
	.planBody { gap: 30px;}
	.planInfo { margin-top: -15px;}
}
}