@charset "utf-8";

/*========= bootstrap ===============*/
.container-fluid {
padding-right:0 !important;
padding-left:0 !important;
}
/*========= レイアウトのためのCSS ===============*/
#contents {
    width: 100% !important;
    padding-left: 0 !important;;
    padding-right: 0 !important;;
    }
@media screen and (max-width: 810px) {
#contents {
z-index: 0 !important;
 }
 }
@media screen and (max-width: 810px) {
.sp-no {
display:none;
}
}
/*========= メインイメージ ===============*/  
#main h1{
  position: fixed;
  top: 43vh;
  width: 100%;
  font-family: A1 Gothic B;
  font-size: 4rem;
}
#main p{
  position: fixed;
  top: 55vh;
  width: 100%;
  font-family: A1 Gothic L;
  font-size: 1.5rem;
  text-align:center;
  padding-top: 1.5rem;
}
#main p span {
  font-family: A1 Gothic B;
}
@media screen and (min-width:521px) and (max-width:1280px) {
#main h1{
  font-size: 3rem;
}
}
@media screen and (max-width: 520px) {
#main h1{
  font-size: 2rem;
}
#main p{
  font-size: 1rem;
  padding-top: 0.5rem;
}
}

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#main{
    /*mainを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 
#main:before {
    /*main の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
}
@media screen and (min-width:1401px) {
#main:before {
background:url("images/main-1920.png") no-repeat center 6em;
background-size:cover;
}
}
@media screen and (min-width:1281px) and (max-width:1400px) {
#main:before{
background:url("images/main-1920-2.png") no-repeat center 6em;
background-size:contain;
}
}

@media screen and (min-width:901px) and (max-width:1280px) {
#main:before{
background:url("images/main-1280.png") no-repeat center 6em;
background-size:contain;
}
}
@media screen and (max-width: 900px) {
#main:before{
background:url("images/main-900.png") no-repeat center 6em;
background-size:cover;
}
}

#prime-photo {
  /*背景画像設定*/
    background:url("images/prime02.jpg") no-repeat center;
      position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    height: 40vh;
    z-index: 2;
}

#prime-photo2 {
  /*背景画像設定*/
  background:url("images/sample3.jpg") no-repeat center;
      position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    height: 40vh;
    z-index: 2;
}
@media screen and (max-width: 1280px) {
#prime-photo, #prime-photo2  {
		background-size: cover;
		background-attachment: scroll;
		height: 90vh;
	}
}

/*下の被さるエリアの指定*/
#washbon-area {
   position: relative;
   z-index:1;
   background:#fff;
    font-size: 15px;
   color:#555;
   font-family: Gothic MB101 Regular, ゴシックMB101 R;
   padding-top:5em;
    line-height: 2.2;
    width:100%;
}
@media screen and (max-width: 810px) {
#washbon-area {
   line-height: 2;
   font-size: 14px;
   padding-top: 2em;
}
}
#washbon-area p {
   font-family: Gothic MB101 Regular, ゴシックMB101 R;
}
a.bg-dark:link {
   text-decoration:none;
}
a.bg-dark:hover {
   text-decoration:none;
}
a.bg-dark:visited {
   text-decoration:none;
}


#washbon-area small {
line-height: 1.5;
}

#contents-footer {
   background:#fff;
   width: 100% !important;
   margin: 0 !important;
}
#contents-footer, footer {
   position: relative;
   z-index:1;
}


/*==================================================
スライダーのためのcss
===================================*/

.slide {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  border-radius: 0 10% 10% 0;
  /* box-shadow: 8px 8px 8px rgba(0,0,0,0.1);*/
}
@media screen and (max-width: 810px) {
.slide {
  height: 350px;
}
}
.slide#mainimg {
height: 800px;
border-radius: 0px;
}
@media screen and (max-width: 810px) {
.slide#mainimg {
height: 300px;
}
}
.slide-image, .slide-image2 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;
}
.slide#mainimg .slide-image:nth-child(1) {
  background-image: url(images/prime01.jpg);
  animation-delay: -2s;
}

.slide#mainimg .slide-image:nth-child(2) {
  background-image: url(images/main01.jpg);
  animation-delay: 6s;
}

.slide#mainimg .slide-image:nth-child(3) {
  background-image: url(images/sample3.jpg);
  animation-delay: 14s;
}

.slide-image:nth-child(1) {
  background-image: url(images/white01.jpg);
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  background-image: url(images/white02.jpg);
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url(images/white03.jpg);
  animation-delay: 14s;
}


.slide-image2:nth-child(1) {
  background-image: url(images/prime01.jpg);
  animation-delay: -2s;
}

.slide-image2:nth-child(2) {
  background-image: url(images/prime02.jpg);
  animation-delay: 6s;
}

.slide-image2:nth-child(3) {
  background-image: url(images/prime03.jpg);
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    transform: scale(1);
    filter: blur(10px);
  }
  4.16% {
    opacity: 1;
    filter: blur(0px);
  }
  33.33% {
    opacity: 1;
     filter: blur(0px);
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
    filter: blur(10px);
  }
    100% {
  opacity: 0;
   filter: blur(0px);
  }
}

#washbon-area h2, #washbon-area h3 {
    font-family: A1 Gothic B;
}
#washbon-area h3 {
font-size: 1.2rem !important;
}
#washbon-area .harb {
 font-family: A1 Gothic M;
}
@media screen and (max-width: 810px) {
#washbon-area h2 {
font-size: 1rem !important;
}
#washbon-area h3 {
font-size: 1rem !important;
}
#washbon-area .harb {
font-size: 0.7rem !important;
}
}

figure img {
width:50%;
}
#harbal {
background-color: #FFF; 
background-image: url(images/harbal_bg.png) ;
background-position: right center;
color:#333;
background-repeat: no-repeat;
}
@media screen and (max-width: 810px) {
#harbal {
background-position: left bottom;
background-size: 70%;
}
#harbal-word {
width:250px;
}
}
#prime {
background-image: url(images/prime-bg-test.png) ; 
color:#333;
background-repeat: no-repeat;
padding-top:30px;
background-size:cover;
}
#prime .slide {
  border-radius: 10% 0  0 10%;
}

#citrus {
background-image: url(images/citrus_word.png) ; 
text-align:right;
background-position: 50px top;
background-repeat: no-repeat;
}
@media screen and (max-width: 1400px) {
#citrus {
background-position: left top;
background-size:60%;
}
}
#floral {
background-image: url(images/floral_word.png) ; 
text-align:right;
background-position: 50px top;
background-repeat: no-repeat;
}
.products p {
 font-size: 12px;
 line-height: 1.5;
 }
@media screen and (max-width: 1400px) {
#floral {
background-position: left top;
background-size:60%;
}
.products-photo {
width: 200px;
}
}

/*ルームクリップ----------------------------------*/

#scene-photo a {
color:#333;
}
#scene-photo {
	display: flex;
	margin: 0 auto;
	width: 1200px;
	flex-wrap:wrap;
	justify-content: space-between;
	font-size: 11px;
}
#scene-photo figure {
	margin-bottom: 10px;
	 position: relative;
	  width: calc( (100% / 3) - 70px );
	  margin-bottom:30px;
}
#scene-photo figcaption {
	 position:absolute;
	 bottom:0;
	 right:0;
	 display:block;
	 margin-right: 10px;
}
#scene-photo figure img {
width:100%;
}
@media screen and (max-width: 810px) {
#scene-photo {
	width: auto;
	padding:10px;
	}
#scene-photo figure {
	  width: calc( (100% / 2) - 10px );
}
#scene-photo figcaption {
	 right:30;
}
}
#kodawari div {
padding-top:120px;
}
#kodawari div p {
line-height: 2;
}
@media screen and (max-width: 810px) {
#kodawari div {
padding-top:85px;
}
#kodawari div p {
line-height: 1.5;
 font-size: 11px;
}
#washbon-area #kodawari div h3 {
font-size: 0.8rem !important;
}
}
#awa {
background:url(images/illust-awa.png)  center top no-repeat;
}
#oil {
background:url(images/illust-oil.png)  center top no-repeat;
}
#nature {
background:url(images/illust-nature.png)  center top no-repeat;
}
@media screen and (max-width: 520px) {
#awa, #oil, #nature {
background-size:80%;
}
}
@media screen and (min-width:521px) and (max-width:1280px) {
#awa, #oil, #nature {
background-size:50%;
}
#kodawari div {
padding-top:120px;
}
}

#footer-brand li {
    margin-bottom: 10px;
}