@charset "UTF-8";

@import url(root.css);

.background {
  opacity: 0;
  transition: opacity 1s ease;
}
.background.show {
  opacity: 1;

  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
	z-index: -1;
}

.bg-video{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  z-index: -1;
	display: none;
}
@media (min-aspect-ratio: 16/9) {
  .bg-video {
    width: 100vw;
    height: 56.25vw;
  }
}
@media (min-aspect-ratio: 9/16) {
	.bg-video {
		height: 177.78vh;
	}
}

@media (min-width: 768px) {
	.video-pc {
		display: block;
	}
}

@media (max-width: 767px) {
	.video-sp {
		display: block;
	}
}

/* visual */
.visual {
  position: relative;
}
.visual_img img {
  vertical-align: top;
}
.visual_title {
  position: absolute;
  text-align: center;
}
.visual_title_en {
  width: 100%;
}
.visual_title_ja {
  color: #fff;
}
.visual_catch {
  color: #fff;
  font-weight: 700;
  position: absolute;
  text-align: center;
}
.visual_caption {
  color: #fff;
}

@media (min-width: 768px) {
  .visual_title {
    left: calc((937vw / 1366) * 100);
    top: calc((251vw / 1366) * 100);
    width: calc((195vw / 1366) * 100);
  }
  .visual_title_ja {
    font-size: calc((21vw / 1366) * 100);
    line-height: calc((30vw / 1366) * 100);
    margin-top:  calc((6vw / 1366) * 100);
  }
  .visual_catch {
    font-size: calc((26vw / 1366) * 100);
    left: calc((839vw / 1366) * 100);
    line-height: calc((37vw / 1366) * 100);
    top:  calc((349vw / 1366) * 100);
  }
  .visual_caption {
    bottom: calc((119vw / 1366) * 100);
    right: calc((16vw / 1366) * 100);
  }
}

@media (max-width: 767px) {
  .visual_title {
    left: calc((117vw / 390) * 100);
    top: calc((361vw / 390) * 100);
    /* top: calc((387.5042vw / 390) * 100); */
    
    width: calc((156vw / 390) * 100);
  }
  .visual_title_ja {
    font-size: calc((21vw / 390) * 100);
    line-height: calc((30vw / 390) * 100);
    margin-top:  calc((6vw / 390) * 100);
  }
  .visual_catch {
    font-size: calc((18vw / 390) * 100);
    left: 0;
    line-height: calc((26vw / 390) * 100);
    text-align: center;
    top:  calc((438vw / 390) * 100);
    width: 100%;
  }
  .visual_caption {
    bottom: calc((9vw / 390) * 100);
    font-size: calc((8vw / 390) * 100);
    right: calc((10vw / 390) * 100);
  }
}

/* emotion */
.emotion {
  background-color: rgba(255, 255, 255, .75);
  color: #000;
  font-weight: 600;
  position: relative;
  text-align: center;
  z-index: 2;
}

@media (min-width: 768px) {
  .emotion {
    padding: calc((112vw / 1366) * 100) 0;
  }
  .emotion_title {
    font-size: calc((24vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
  }
  .emotion_text {
    font-size: calc((18vw / 1366) * 100);
    line-height: calc((36vw / 1366) * 100);
    margin-top: calc((48vw / 1366) * 100);
  }
  .emotion_logo {
    width: calc((450vw / 1366) * 100);
    margin: calc((48vw / 1366) * 100) auto 0 auto;
  }
}

@media (max-width: 767px) {
  .emotion {
    padding: calc((42vw / 390) * 100) 0;
  }
  .emotion_title {
    font-size: calc((18vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
  }
  .emotion_text {
    font-size: calc((14vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
    margin-top: calc((24vw / 390) * 100);
  }
  .emotion_logo {
    width: calc((242vw / 390) * 100);
    margin: calc((16vw / 390) * 100) auto 0 auto;
  }
}

/* history */
.history {
  background-color: #000;
  color: #fff;
  text-align: center;
}

.history_title_ja {
  color: #b08057;
}

@media (min-width: 768px) {
  .history {
    padding: calc((120vw / 1366) * 100) 0;
  }
  .history_title {
    margin: 0 auto;
    width: calc((110vw / 1366) * 100);
  }
  .history_title_ja {
    font-size: calc((14vw / 1366) * 100)
  }
  .history_catch {
    font-size: calc((24vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
    margin-top: calc((48vw / 1366) * 100);
  }
}

@media (max-width: 767px) {
  .history {
    padding: calc((32vw / 390) * 100) 0;
  }
  .history_title {
    margin: 0 auto;
    width: calc((90vw / 390) * 100);
  }
  .history_catch {
    font-size: calc((16vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
    margin-top: calc((24vw / 390) * 100);
  }
}


/* image1 */
.image1 {
  position: relative;
}

/* before after */
.befotrafter {
  background-color: rgba(172, 143, 101, 0.8);
  position: relative;
}

.beforeafter_text {
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.beforeafter_photo {
  margin: 0 auto;
}

.beforeafter_note {
  text-align: right;
  color: #fff;
}

@media (min-width: 768px) {
  .befotrafter {
    padding: calc((120vw / 1366) * 100) 0 calc((112vw / 1366) * 100) 0 ;
  }
  .beforeafter_photo {
    /* margin-top: calc((8vw / 1366) * 100); */
    width: calc((800vw / 1366) * 100);
  }
  .beforeafter_note {
    font-size: calc((10vw / 1366) * 100);
    margin-top: calc((11vw / 1366) * 100);
    line-height: calc((4.8vw / 1366) * 100);
  }
  .beforeafter_text {
    font-size: calc((24vw / 1366) * 100);
    margin-top: calc((88vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
  }
}

@media (max-width: 767px) {
  .befotrafter {
    padding: calc((54vw / 390) * 100) 0 calc((45vw / 390) * 100) 0;
  }
  .befotrafter_wrap {
    margin: 0 auto;
    width: calc((336vw / 390) * 100);
  }
  .beforeafter_photo {
    display: block;
    margin-top: calc((8vw / 390) * 100);
  }
  .beforeafter_note {
    font-size: calc((10vw / 390) * 100);
    margin-top: calc((6vw / 390) * 100);
  }
  .beforeafter_text {
    margin: 0 auto;
    width: calc((336vw / 390) * 100);
    font-size: calc((14vw / 390) * 100);
    line-height: calc((26vw / 390) * 100);
    margin-top: calc((24vw / 390) * 100);
    text-align: left;
  }
}

/* image2 */
.image2 {
  position: relative;
}

/* history2 */
.history2 {
  background-color: rgba(172, 143, 101, 0.8);
  color: #fff;
  font-weight: 600;
  position: relative;
  text-align: center;
}

@media (min-width: 768px) {
  .history2 {
    font-size: calc((24vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
    padding: calc((74vw / 1366) * 100) 0;
  }
}
@media (max-width: 767px) {
  .history2 {
    font-size: calc((16vw / 390) * 100);
    line-height: calc((26vw / 390) * 100);
    margin-top: -1px;
    padding: calc((28vw / 390) * 100) 0;
  }
}

/* history3 */
.history3 {
  color: #fff;
  font-weight: 600;
  position: relative;
  text-align: center;
}
.history3_img {
  vertical-align: top;
}
.history3_text {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.history3 .movie_wrap:after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0,0,0,0.30);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media (min-width: 768px) {
  .history3 {

  }
  .history3_catch {
    font-size: calc((24vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
  }
  .history3_lead {
    font-size: calc((18vw / 1366) * 100);
    line-height: calc((37vw / 1366) * 100);
    margin-top: calc((48vw / 1366) * 100);
  }
}
@media (max-width: 767px) {
  .history3_catch {
    font-size: calc((18vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
  }
  .history3_lead {
    font-size: calc((14vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
    margin-top: calc((32vw / 390) * 100);
  }
}

.exterior {
  position: relative;
  z-index: 2;
}
.exterior .c-caption {
  z-index: 10;
  color: #fff;
}
@media (min-width: 768px) {
  .exterior_img {
    display: block;
  }
}
@media (max-width: 767px) {
  .exterior {
    width: 100%;
  }
  .exterior .c-caption_bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    background-image: url(../img/concept/caption_bg.webp);
    background-size: 100% 100%;
    width: calc((390vw / 390) * 100);
    height: calc((77vw / 390) * 100);
  }
  .exterior_img {
  }
	.exterior_map {
		/* height: calc((583vw / 390) * 100); */
		/* left: 0; */
		overflow-x: auto;
		overflow-y: hidden;
		/* position: absolute; */
		/* top: 55.89743vw; */
		width: 100%;
	}
	.exterior_img {
    /* display: block; */
		/* position: relative; */
		/* width: calc((708vw / 390) * 100); */
	}
	/* .exterior_arrows {
		bottom: 6.41025vw;
		display: flex;
		justify-content: space-between;
		left: 6.41025vw;
		position: absolute;
		width: 87.17948vw;
	}
	.exterior_prev,
	.exterior_next {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 3.07692vw;
		width: 16.66666vw;
	}
	.exterior_prev {
		background-image: url(../img/common/arrow_prev.svg);
	}
	.exterior_next {
		background-image: url(../img/common/arrow_next.svg);
	} */
}


.days {
  background-color: rgba(239,233,224,.75);
  font-weight: 600;
  text-align: center;
}
.days_title {
  margin: 0 auto;
}
.days_title_ja {
  color: #b08057;
}
@media (min-width: 768px) {
  .days {
    padding: calc((90vw / 1366) * 100) 0;
  }
  .days.-days02 {
    padding: calc((80vw / 1366) * 100) 0;
  }
  .days_title {
    width: calc((113vw / 1366) * 100);
  }
  .days_title_ja {
    font-size: calc((14vw / 1366) * 100)
  }
  .days_catch {
    font-size: calc((24vw / 1366) * 100);
    line-height: calc((35vw / 1366) * 100);
    margin-top: calc((35vw / 1366) * 100);
  }
  .days.-days02 .days_catch {
    margin-top: 0;
  }
  .days_catch .-large {
    font-size: calc((34vw / 1366) * 100);
  }
  .days_text {
    font-size: calc((18vw / 1366) * 100);
    line-height: calc((36vw / 1366) * 100);
    margin-top: calc((32vw / 1366) * 100);
  }
  .days_text .-large {
    font-size: calc((24vw / 1366) * 100);
  }
}
@media (max-width: 767px) {
  .days {
    padding: calc((40vw / 390) * 100) 0;
  }
  .days_title {
    width: calc((90vw / 390) * 100);
  }
  .days_catch {
    font-size: calc((18vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
    margin-top: calc((32vw / 390) * 100);
  }
  .days.-days02 .days_catch {
    margin-top: 0;
  }
  .days_catch .-large {
    font-size: calc((22vw / 390) * 100);
  }
  .days_text {
    font-size: calc((14vw / 390) * 100);
    line-height: calc((28vw / 390) * 100);
    margin-top: calc((24vw / 390) * 100);
  }
  .days_text .-large {
    font-size: calc((18vw / 390) * 100);
  }
}

/* cinematic */

.cinematic_img_area {
  position: relative;
}

.cinematic_label {
  position: absolute;
  left: 0;
  background-color: #af9265;
  text-align: center;
}

.cinematic_img_area:nth-child(2) .cinematic_label {
  right: 0;
  left: auto;
}

.cinematic_label .-en img {
  width: auto;
  height: 100%;
}

.cinematic_label .-ja {
  color: #fff;
}



@media (min-width: 768px) {
  .cinematic_label {
    top: calc((48vw / 1366) * 100);
    width: calc((280vw / 1366) * 100);
    padding: calc((14vw / 1366) * 100) 0;
  }
  .cinematic_label .-en {
    height: calc((29vw / 1366) * 100);
  }
  .cinematic_label .-ja {
    font-size: calc((16vw / 1366) * 100);
    margin-top: calc((6vw / 1366) * 100);
  }
  .cinematic_img_area:nth-child(2) .cinematic_label .-en {
    height: calc((24vw / 1366) * 100);
  }
  .c-imagephoto {
    right: calc((19vw / 1366) * 100);
    bottom: calc((16vw / 1366) * 100);
  }
}

@media (max-width: 767px) {
  .cinematic_img_list {
    background-color: rgba(239, 233, 224, .75);
    display: flex;
    flex-direction: column;
    gap: calc((32vw / 390) * 100);
  }
  .cinematic_img_area {
    width: calc((312vw / 390) * 100);
    margin: 0 auto;
  }
  .cinematic_label {
    padding: calc((8vw / 390) * 100) 0;
  }
  .cinematic_label .-en {
    height: calc((12.9vw / 390) * 100);
  }
  .cinematic_label .-ja {
    font-size: calc((10vw / 390) * 100);
    margin-top: calc((3vw / 390) * 100);
  }
  .cinematic_img_area:nth-child(2) .cinematic_label .-en {
    height: calc((9.94vw / 390) * 100);
  }
  .cinematic_label {
    top: calc((16vw / 390) * 100);
    width: calc((124vw / 390) * 100);
  }
  .c-imagephoto {
    right: calc((14vw / 390) * 100);
    bottom: calc((12vw / 390) * 100);
  }
}

.image5 {
  position: relative;
}
.image5_img {
  font-size: 0;
}

.image6 {
  position: relative;
}
.image6_img {
  font-size: 0;
}

.image7 {
  position: relative;
}
.image7_img {
  font-size: 0;
}

.movie {
	background-color: #fff;
  font-size: 0;
	position: relative;
}
.movie_video {
	display: none;
  font-size: 0;
	width: 100%;
}
.movie_wrap {
  position: relative;
}

.movie_wrap {
	padding-top: 56.25%;
	position: relative;
	/* margin-top: calc(var(--vw)*64); */
}

.movie2 .movie_wrap {
  filter: grayscale(0);
}

.movie2 .movie_wrap.animated {
	animation: anime_moviecolor 6s linear forwards;
}

@media screen and (max-width: 767px) {
	.movie_wrap {
		/* padding: 0; */
		padding-top: 178%;
		width: 100%;
		/* height: calc(var(--vw)*500); */
		/* margin-top: calc(var(--vw)*32); */
	}
}

@media (min-width: 768px) {
	.movie-pc {
		display: block;
	}
}
@media (max-width: 767px) {
	.movie-sp {
		display: block;
	}
}

.movie_wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes slide-scroll {
  from {
    margin-left: 0;
  }
  to {
    margin-left: calc(-1 * (708vw / 390) * 45);
  }
}

@keyframes anime_moviecolor {
	0% {
    filter: grayscale(100%);

  }
  50% {
    filter: grayscale(100%);

  }
  100% {
    filter: grayscale(0);

  }
}

.c-blank {
	/* display: none; */
}

.c-entrybtn-pageend {
	background-color: rgba(255, 255, 255, .75);
}

.c-entrybtn-pageend a {
	margin-top: 0;
}

@media screen and (min-width: 768px) {
	.c-entrybtn-pageend {
		padding: calc((120vw / 1366) * 100) 0;
	}
}

@media screen and (max-width: 767px) {
	.c-entrybtn-pageend {
		padding: calc((40vw / 390) * 100) 0;
	}
	.c-entrybtn-pageend .c-entrybtn {
			width: calc((300vw / 390) * 100);
	}
}

@media (min-width: 768px) {
  .c-imagephoto {
    font-size: 0.80527vw;/*11*/
  }
}
@media screen and (max-width: 767px) {
  .c-imagephoto {
    font-size: 2.56410vw;/*10*/
  }
}