@charset "utf-8";


/* ----------------------------------------------------------------------
	
	 スパホスピタリティー トップページ　css
	
---------------------------------------------------------------------- */



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

	TOP

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


/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #f4f3f2;
	z-index: 9999999;
	text-align:center;
	color:#666;
  font-size: 2rem;
  top: 0;
  left: 0;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
  display: block;
  content: "";
  position:fixed;
  z-index: 1200;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: #ede8e3;/*伸びる背景色の設定*/
  animation-name:PageAnime;
  animation-duration:1.2s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}


.top #wrapper {
	opacity: 0;
}


/*bodyにappearクラスがついたら出現*/
body.appear.top #wrapper{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}



#main_vis {
  position: relative;
  width: 100%;
  height: 100%;
}

#main_vis > .cover {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.15);
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
}

#main_vis > .title {
  position: absolute;
  top: 50%;
  left: 70px;
  color: #FFF;
  z-index: 1000;
  transform: translateY(-50%);
  opacity: 0;
}

#main_vis > .title.on {
  animation: fadeText 0.6s ease-out 1 forwards;

}

@keyframes fadeText {
  0% { opacity: 0;}
  100% { opacity: 1;}

}


#main_vis > .title h1 {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 6rem;
  letter-spacing: 0.05em;
  text-shadow: 1px 2px 4px rgb(0 0 0 / 20%);
}

#main_vis > .title > p {
  font-size: 2.2rem;
  margin-top: 20px;
  text-shadow: 1px 2px 4px rgb(0 0 0 / 20%);
}

#main_vis > .title > p br {
  display: none;
}



/* - スライダー
---------------------------- */

.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("../images/top/bg_slide1.jpg");
}

.slider-item02 {
    background:url("../images/top/bg_slide2-2.jpg");
}

.slider-item03 {
    background:url("../images/top/bg_slide3.jpg");
}

.slider-item {
    width: 100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 1050;
  text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*スクロール　アニメーション*/

/*スクロールダウン全体の場所*/
.scrolldown{
	position:absolute;
	left:50%;
	bottom:10px;
	height:50px;
  z-index: 1010;
  transform: translateX(-50%)
}

/*Scrollテキストの描写*/
.scrolldown span{
	position: absolute;
	top: -15px;
	color: #FFF;
	font-size: 2rem;
  text-shadow: 1px 2px 4px rgb(0 0 0 / 20%);
  transform: translateX(-50%);
}

/* 線の描写 */
.scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


/* - top　イントロ
---------------------------- */

#top_intro {
  padding: 120px 0;
}


#top_intro > .content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}


#top_intro > .content > .caption {
  position: relative;
  z-index: 3;
}

#top_intro > .content > .caption > .title_block {
  display: flex;
  color: #666;
}

#top_intro > .content > .caption > .title_block > div.border {
  position: relative;
  width: 46px;
}

#top_intro > .content > .caption > .title_block > div.border > span {
  position: absolute;
  top: 28px;
  border: 1px solid #bcbcbc;
  left: 0;
  width: 100%;
}

#top_intro > .content > .caption > .title_block > div.txt {
  margin-left: 10px;
  line-height: 1.6;
}

#top_intro > .content > .caption > .title_block > div.txt h2 {
  font-size: 3.2rem;
  font-weight: normal;
  position: relative;
}

#top_intro > .content > .caption > .title_block > div.txt p {
  font-size: 1.8rem;
  margin-top: 50px;
}


#top_intro > .content > .img {
  position: relative;
  flex: 1;
}

#top_intro > .content > .img img {
  /*border-radius: 8px;*/
}

#top_intro > .content > .img .fig1 {
  position: absolute;
  max-width: 460px;
  width: 100%;
  top: 0;
  right: 180px;
  z-index: 2;
}

#top_intro > .content > .img .fig2 {
  position: absolute;
  max-width: 460px;
  width: 100%;
  top: 205px;
  right: 0;
  z-index: 1;
}

#top_intro > .content > .img .fig3 {
  position: absolute;
  max-width: 460px;
  width: 100%;
  top: 400px;
  right: 460px;
  z-index: 3;
}

#top_intro > .content > .img .img_sp {
  display: none;
}


/* - top　各リンクブロック
---------------------------- */

section.section.link_line {
  padding: 80px 0;
}

#top_botanical {
  /*background-color: #F1F7ED;*/
}

#top_wellness {
  /*background-color: #F3F2E6;*/
}

#top_hospitality {
  /*background-color: #EBEFEF;*/
}

.link_line + .link_line {
  /*margin-top: 100px;*/
}

.link_line > .content {
  display: flex;
  align-items: center;
}

.link_line > .content.reverse {
  flex-direction: row-reverse;
}

.link_line > .content > div {
  min-height: 400px;
  position: relative;
}

.link_line > .content > div {
  margin-right: 30px;
}


.link_line > .content > .bg_img {
  width: 60%;
  position: relative;
  display: flex;
  align-items: center;
}

.link_line > .content > .bg_img img {
  /*border-radius: 8px;*/
}

.link_line > .content > .bg_img img.sp {
  display: none;
}

.link_line > .content > .bg_img img.radius {
  border-radius: 8px;
}

.link_line > .content > .head {
  text-align: center;
  padding: 30px;
  width: 40%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
/*  background-color: #FFF;
  background-color: #eff9e9;
  background-color: #eff2ed;*/
}

.link_line > .content > .head h2 {
  font-size: 4.4rem;
  margin-bottom: 25px;
}

.link_line > .content > .head > .unit p {
  font-size: 1.5rem;
  line-height: 1.8;
}

.link_line > .content .bg_img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#top_botanical .bg_img {
  
}

#top_wellness .bg_img {
  
}



.link_line > .content > .head > .unit .common_btn {
  margin-top: 35px;
}


/* - top　インスタ
---------------------------- */

#top_insta {
  padding: 80px 30px;
}

#top_insta > h2 {
  text-align: center;
  font-size: 4rem;
}

#top_insta > h2 > span {
  display: block;
  font-size: 1.4rem;
  margin-top: 10px
}

#top_insta > .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  margin-top: 60px;
}

#top_insta > .content > div {
  text-align: center;
  width: calc(16.66% - 75px / 6 );
  margin-right: 15px;
}

#top_insta > .content > div:nth-child(6n) {
  margin-right: 0;
}

/*#top_insta > .content > div:nth-child(n+4) {
  margin-top: 30px;
}*/

#top_insta > .content > div a {
  display: block;
}

#top_insta > .content > div a img {
  opacity: 1;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}

#top_insta > .content > div a:hover img {
  opacity: 0.7;
}

/* - top　トピックス
---------------------------- */


#top_topics {
  padding: 80px 30px;
  background-color: #FFF;
}

#top_topics > h2 {
  text-align: center;
  font-size: 4rem;
}


#top_topics > .content {
  display: flex;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  margin-top: 60px;
}

#top_topics > .content > div {
  text-align: center;
  width: calc(25% - 90px / 4 );
  margin-right: 30px;
}

#top_topics > .content > div:nth-child(4n) {
  margin-right: 0;
}


#top_topics > .content > div a {
  display: block;
  position: relative;
}


#top_topics > .content > div a {
  display: block;
  position: relative;
}

/* ラベル部分 左上に表示 */
#top_topics > .content > div.label a::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 4em solid transparent;
  border-left: 4em solid #eee;
  position: absolute;
  z-index: 100;
    
}

#top_topics > .content > div.label a::after {
  display: block;
  top: 11px;
  transform: rotate(-45deg);
  color: #fff;
  left: 5px;
  position: absolute;
  z-index: 101;
  font-family: 'Nunito', serif;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: bold;
}

#top_topics > .content > div.-new.label a::before {
  border-left: 4em solid #53bba4;
}

#top_topics > .content > div.-new.label a::after {
  content: "New";
}

#top_topics > .content > div a img {
  opacity: 1;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}

#top_topics > .content > div a:hover img {
  opacity: 0.7;
}

#top_topics > .content > div a .caption {
  text-align: left;
  margin-top: 10px;
}
#top_topics > .content > div a .caption .caption-top  {
  display: flex;
  margin-bottom: 5px;
}
#top_topics > .content > div a .caption .date {
  margin-top: 2px;
  margin-left: 10px;
  font-size: 1.3rem;
  font-family: 'Nunito', serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}


#top_topics > .content > div a .caption h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

#top_topics > .content > div a .caption p {
  line-height: 1.6;
  font-size: 1.4rem;
}

#top_topics > .content > div a .caption .caption-top .category-name_Aroma\'s.Story{
  background-color: #fcfcbb;
  padding: 2px 8px;
  line-height: 1.2;
}
#top_topics > .content > div a .caption .caption-top .category-name_Topics{
  background-color: #DAFDBA;
  padding:0 8px;
}
#top_topics > .common_btn.font_eb {
  margin-top: 40px;
  text-align: center;
  height: 25px;
}


@media screen and (min-width: 1280px) {

#top_intro > .content > .img .fig1 {
  right: 420px;
  max-width: 380px;
}

#top_intro > .content > .img .fig2 {
  position: absolute;
  max-width: 620px;
  top: 110px;
}


#top_intro > .content > .img .fig3 {
  right: 560px;
}

}

@media screen and (max-width: 1000px) {
  #top_intro > .content {
    display: block;
    position: relative;
  }
  
  #top_intro > .content > .img {
    /*padding-top: 60px;*/
  }
  
  #top_intro > .content > .img .img_sp {
    display: block;
  }
  
  #top_intro > .content > .img img {
    border-radius: 0;
  }

  #top_intro > .content > .img > .unit {
    display: flex;
    display: none;
  }
  
  #top_intro > .content > .img .fig1 {
    position: relative;
    right: auto;
    max-width: 100%;
  }
  
  #top_intro > .content > .img .fig2 {
    position: relative;
    right: auto;
    top: 0;
    max-width: 100%;
  }
  
  #top_intro > .content > .caption {
    position: absolute;
    top: 40px;
    left: 10px;
    background-color: rgba(255,255,255,0.8);
    padding: 15px;
  }

}

@media screen and (max-width: 959px) {
  #top_insta > .content > div {
    width: calc(33.33% - 30px / 3 );
    margin-right: 15px;
  }

  #top_insta > .content > div:nth-child(6n) {
    margin-right: inherit;
  }
  
  #top_insta > .content > div:nth-child(3n) {
    margin-right: 0;
  }

  #top_insta > .content > div:nth-child(n+4) {
    margin-top: 15px;
  }

}

@media screen and (max-width: 767px) {
  
  #main_vis > .title {
    left: 30px;
  }
  
  #main_vis > .title h1 {
    font-size: 5.4rem;
  }

  #main_vis > .title > p {
    font-size: 1.6rem;
  }
  
  #top_intro {
    padding: 70px 0 170px;
  }
  
  section.section.link_line {
    padding: 0;
  }
  
  
  .link_line + .link_line {
    margin-top: 30px;
  }

  .link_line > .content {
    flex-direction: column;
   /* padding: 30px 0;*/
  }
  
  .link_line > .content.reverse {
    flex-direction: column;
  }
  
  .link_line > .content > div {
    margin-right: 0;
    min-height: auto;
  }


.link_line > .content > .bg_img {
  width: 98%;
  position: relative;
}

.link_line > .content > .bg_img img.pc {
  display: none;
}

.link_line > .content > .bg_img img.sp {
  display: block;
}


.link_line > .content > .head {
  text-align: center;
  width: 90%;
}
  
  .link_line > .content > .head {
  /*  padding: 30px 20px 70px;*/
  padding: 0 20px 70px;
    border-radius: 8px;
    margin-top: 35px;
  }
  
  #top_insta {
    padding: 50px 30px;
  }
  
  #top_insta > .content {
    margin-top: 40px;
  }
  
  #top_topics {
    padding: 50px 30px;
  }
  
  #top_topics > .content {
    margin-top: 40px;
  }
  
  
  
}

@media screen and (max-width: 639px) {

#top_topics > .content {
  flex-wrap: wrap;
}

#top_topics > .content > div {
  width: calc(50% - 20px / 2 );
  margin-right: 20px;
}

#top_topics > .content > div:nth-child(4n) {
  margin-right: inherit;
}

#top_topics > .content > div:nth-child(2n) {
  margin-right: 0;
}

#top_topics > .content > div:nth-child(n+3) {
  margin-top: 30px;
}

}

@media screen and (max-width: 479px) {
  
  #main_vis > .title {
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  #main_vis > .title h1 {
    font-size: 4.4rem;
  }

  #main_vis > .title > p {
    text-align: center;
  }
  
  #main_vis > .title > p br {
    display: block;
  }
  

  #top_intro > .content > .img > .unit {
    flex-direction: column;
    padding: 0 20px
  }
  
  #top_intro > .content > .img .fig1 {
    position: relative;
    right: auto;
    max-width: 100%;
    margin-bottom: 20px;
  }
  
  #top_intro > .content > .img .fig2 {
    position: relative;
    right: auto;
    top: 0;
    max-width: 100%;
  }
  
  #top_intro > .content > .caption {
    max-width: 320px;
  }
  
  #top_intro > .content > .caption > .title_block > div.border {
    width: 30px;
  }
  
  #top_intro > .content > .caption > .title_block > div.txt h2 {
    font-size: 2.5rem;
  }
  
  #top_intro > .content > .caption > .title_block > div.txt p {
    margin-top: 20px;
    font-size: 1.5rem;
    padding-right: 20px;
  }
  
  #top_insta > .content > div {
    text-align: center;
    width: calc(50% - 15px / 2 );
    margin-right: 15px;
  }
  
  #top_insta > .content > div:nth-child(3n) {
    margin-right: inherit;
  }
  
  #top_insta > .content > div:nth-child(2n) {
    margin-right: 0;
  }

  #top_insta > .content > div:nth-child(n+3) {
    margin-top: 15px;
  }

}


@media screen and (max-width: 359px) {
  
  
  #main_vis > .title h1 {
    font-size: 4.2rem;
  }
  
  #main_vis > .title > p {
    font-size: 1.5rem;
  }


}