@charset "utf-8";
body{
  font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.pc{
  display: block;
}
.sp{
  display: none;
}
.fs-preview-header { display: none; }

/*ログインログアウトの表示切り替えを行うCSS*/
.logout.my-false { display: none; }
.login.my-true { display: none; }

@keyframes fadein {
    0% { opacity: 0; }
  100% { opacity: 1 }
}
@keyframes fadein2 {
    0% { opacity: 0; }
  100% { opacity: 1;transform: translateY(0); }
}
@keyframes fadein2-2 {
    0% { opacity: 0; }
  100% { opacity: 1;transform: translateY(0) rotate(-13deg); }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ヘッダー */
#header .btn-menu{
  display: none;
}
#header .hdh1{
  position: fixed;
  left: 4.17vw;
  top: 50px;
  width: 100%;
  height: 46px;
  z-index: 8;
  /*animation: fadein 1.5s ease 0s 1 normal;
  animation-fill-mode:forwards;*/
}
#header .hdh1.active img{
  display: none;
}
#header .hd-menu{
  position: fixed;
  right: 4.17vw;
  top: 50px;
  height: 46px;
  box-sizing: border-box;
  z-index: 10;
  animation: fadein 1.5s ease 0s 1 normal;
  animation-fill-mode:forwards;
}
#header .hd-menu ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#header .hd-menu ul li{
  position: relative;
  margin-right: 2.29vw;
  padding: 0 7px;
  letter-spacing: 1.25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
}
#header .hd-menu ul li:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background: #1A1A1A;
  transform: scale(0, 1);
  transform-origin: center;
  transition: transform .3s;
}
#header .hd-menu ul li:hover:before{
  transform: scale(1);
}
#header .hd-menu ul li:first-child:hover:before{
  transform: scale(0);
}
#header .hd-menu ul li:last-child{
  margin-right: 0;
}
#header .hd-menu ul li:last-child span{
  position: absolute;
  right: -27px;
  top: -9px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #FFF;
  font-size: 11px;
  border-radius: 10px;
  background: #1A1A1A;
}
#header .hdh1 .pc {
  display: inline-block;
}
#header .hd-menu ul li a:hover{
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  #header .hdh1 .sp {
    display: inline-block;
  }
  #header .hdh1 .pc {
    display: none;
  }
  /*header.scroll #header .hdh1{
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }*/
  #header.scroll .hdh1{
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  /*#fs_Top header.scroll #header .hdh1{
    -webkit-animation: forwards;
    animation: none;
  }*/
}

/* 検索 */
#header .hd-menu .searchbg{
  position: absolute;
  right: -4.17vw;
  top: -50px;
  width: calc( 100% + 4.17vw + 50px );
  height: 140px;
  background: #FFF;
  display: none;
}
#header .hd-menu ul li.switch-search{
  width: 20px;
  height: 20px;
  padding: 0;
  background: url(../image/icon-search.svg);
  display: block;
  position: static;
}
#header .hd-menu ul li.switch-search.active:after{
  content: "";
  display: block;
  position: absolute;
  left: -50px;
  top: -54px;
  width: 300px;
  height: 140px;
  z-index: 10;
}
#header .hd-menu ul li.switch-search input[type="text"]{
  position: absolute;
  left: 0;
  top: -21px;
  width: calc( 100% + 30px );
  height: 53px;
  font-size: 16px;
  color: #1A1A1A;
  border: none;
  border-bottom: solid 1px #1A1A1A;
  background: #FFF;
  z-index: 11;
  display: none;
  /*transform: scale(0, 1);
  transform-origin: left;*/
  transition: transform .3s;
}
#header .hd-menu ul li.switch-search input[type="text"]:focus{
  border: none;
  border-bottom: solid 1px #1A1A1A;
  outline: 0;
}
#header .hd-menu ul li.switch-search.active input[type="text"]{
  display: block;
  /*transform: scale(1);
  transition: transform .3s;*/
}
#header .hd-menu ul li.switch-search input[type="image"]{
  display: none;
  transition: transform .3s;
}
#header .hd-menu ul li.switch-search.active input[type="image"]{
  position: absolute;
  right: -14px;
  top: -2px;
  display: block;
  transition: transform .3s;
  z-index: 21110;
}

/* ヘッダーサブメニュー */
#header .hd-sub{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 430px;
  padding-top: 152px;
  background: rgba(255,255,255,0.9);
  z-index: -1;
  display: none;
}
#header .hd-sub figure{
  position: absolute;
  left: 3.18vw;
  top: 58px;
}
#header .hd-sub ul{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#header .hd-sub ul li{
  width: 440px;
  margin: 0;
  padding: 0;
}
#header .hd-sub ul li:hover:before{
  content: "";
  display: none;
}
#header .hd-sub ul li a{
  display: block;
}
#header .hd-sub ul li a:hover{
  text-decoration: none;
}
#header .hd-sub ul li a .ban{
  margin-bottom: 16px;
}
#header .hd-sub ul li a .text{
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 15px;
}
#header .hd-sub ul li a:hover .text{
  text-decoration: none;
}
#header .hd-sub ul li a .text:before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 24px 5px 0;
  background: #1A1A1A;
  transform: scale(0, 1);
  transform-origin: left;
  transition: transform .3s;
}
#header .hd-sub ul li a:hover .text:before{
  transform: scale(1);
}
.sp-menu{
  display: none;
}


/* メイン動画 */
#mainvisual{
  position: relative;
  height: 100vh;
}
#loading.disappear{
     display: none;
}
#ytPlayerWrap{
  position: relative;
  height: 100vh;
  width: 100%;
}
#ytPlayerWrap02{
  position: relative;
  height: 100vh;
  width: 100%;
}
#main_bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.fv_bg {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100vh + 2px);
  margin: auto;
}
#youtube {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 0;
}
.main_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.iframe_area {
  box-sizing: border-box;
  height: 100vh;
  width: 100%;
}
.iframe_area iframe {
  height: 100vh;
  left: 0;
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 100%;
}
.loading_area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh !important;
  background: #fff;
  z-index: 9999;
  overflow: hidden;
}
.mv_pc{
  display: block;
}
.mv_sp{
  display: none;
}
@media screen and (max-width: 496px) {
  .mv_pc{
    display: none;
  }
  .mv_sp{
    display: block;
  }
}

/* scene */
.scene .text1{
  line-height: 1.13;
  margin-bottom: 70px;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  letter-spacing: 0.1em;
}
.scene h2{
  height: 100px;
  margin-bottom: 37px;
  font-weight: normal;
  letter-spacing: 3px;
  display: flex;
}
.scene h2:before{
  content: "01";
  display: block;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 43px;
  font-style: italic;
}
.scene.life h2:before{
  content: "02";
}
.scene.place h2:before{
  content: "03";
}
.scene h2 .diagonal{
  position: relative;
  width: 1px;
  margin: 0 40px 0 25px;
}
.scene h2 .diagonal:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -21px;
  width: 1px;
  height: 142px;
  background: #FFF;
  transform: rotate(45deg);
}
.scene h2 .text2{
  line-height: 1.33;
  height: 100px;
  color: #FFF;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.15em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.scene h2 .text2 span{
  line-height: 1.66;
  margin-bottom: 17px;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
}
.scene .text3{
  line-height: 2.14;
  margin-bottom: 52px;
  color: #FFF;
  font-size: 20px;
  letter-spacing: 0.1em;
}
.scene .more-btn a{
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  border-radius: 60px;
  border: solid 1px #FFF;
  display: block;
  transition: 0.7s;
}
.scene .more-btn a:hover{
  color: #1A1A1A;
  background: #FFF;
  transition: 0.7s;
  text-decoration: none;
}
.scene.home .more-btn a:hover{
  color: #ACBED3;
}
.scene.life .more-btn a:hover{
  color: #C5BFB2;
}
.scene.place .more-btn a:hover{
  color: #A7B3AD;
}

/* いえではたらく */
.home{
  height: 950px;
  background: #C0CDDD;
  display: flex;
}
.home .left{
  position: relative;
  width: 47.92%;
  max-height: 950px;
  height: 100%;
  padding: 0 6.4% 0 13.54%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.home .left.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
@media screen and (max-width: 1200px){
  .home .left{
    padding-left: 4vw;
  }
}
.scene.home .cat{
  position: absolute;
  right: 6.76vw;
  bottom: 8.75vw;
}
.home .center{
  width: 10.42%;
  height: 950px;
  background: url(../image/bg-home01.jpg) center top;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.home .center.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.home .right{
  width: 52.08%;
  height: 49.47vw;
  max-height: 950px;
  margin: 152px 0 154px 0;
  background: url(../image/bg-home04.jpg) center center;
  background-size: cover;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.home .right.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
@media screen and (min-width: 1401px){
  .home{
    height: 49.47vw;
  }
  .home .right{
    margin: 0;
  }
}

/* べんりにくらす */
.life{
  height: 1000px;
  background: #C5BFB2;
  display: flex;
}
.life .left{
  position: relative;
  width: 50%;
  height: 36.2vw;
  max-height: 695px;
  margin: 152px 0 154px 0;
  background: url(../image/bg-life02.jpg) center center no-repeat;
  background-size: cover;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.life .left.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.life .right{
  width: 50%;
  max-height: 1000px;
  height: 100%;
  padding: 0 13.54% 0 5.2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.life .right.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.scene.life .cat{
  position: absolute;
  right: 1.56vw;
  bottom: 5.83vw;
  z-index: -1;
}

@media screen and (min-width: 1495px){
  .scene.life .more-btn a {
    margin-left: auto;
  }
}

@media screen and (max-width: 1200px){
  .life .right{
    padding-right: 4vw;
    box-sizing: border-box;
  }
}

/* きもちちいいばしょ */
.place{
  height: 1000px;
  background: #A7B3AD;
  display: flex;
}
.place .left{
  position: relative;
  width: 50%;
  height: 1000px;
  max-height: 100%;
  padding: 0 6.4% 0 13.54%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.place .left.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
@media screen and (max-width: 1200px){
  .place .left{
    padding-left: 4vw;
  }
}

.place .right{
  position: relative;
  width: 50%;
  height: 36.2vw;
  max-height: 695px;
  margin: 153px 0 152px;
  background: url(../image/bg-place02.jpg) center center no-repeat;
  background-size: cover;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.place .right.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.scene.place .cat{
  position: absolute;
  right: 6.76vw;
  bottom: 8.75vw;
}


.info_scroll {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 100;
}

/* concept */
.concept{
  display: flex;
  align-items: center;
  background: url(../image/bg-concept02.png) left bottom no-repeat;
  background-size: 52.45vw;
}
@media screen and (max-width: 1200px){
  .concept{
    background-size: 78.67vw;
  }
}
.concept .left{
  width: 51.56%;
  padding: 150px 0 229px 13.54%;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.concept .left.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.concept .left .text1{
  line-height: 1.34;
  margin-bottom: 22px;
  font-family: 'Marcellus', serif;
  font-size: 3.38vw;
  letter-spacing: 0.1em;
  transition: 0.2s;
}
.concept .left .text2{
  line-height: 1.81;
  margin-bottom: 65px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.6vw;
  letter-spacing: 0.1em;
  transition: 0.2s;
}
.concept .left .img-concept{
  transition: 0.2s;
}
.concept .right{
  width: 48.44%;
  margin-top: 200px;
  padding-left: 5.05%;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.concept .right.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}
.concept .right h2{
  line-height: 1.13;
  margin-bottom: 76px;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  letter-spacing: 0.1em;
}
.concept .right .text1{
  line-height: 1.75;
  margin-bottom: 35px;
  font-size: 30px;
  letter-spacing: 0.1em;
}
.concept .right .text2{
  line-height: 2.14;
  margin-bottom: 68px;
  font-size: 20px;
  letter-spacing: 0.1em;
}
.concept .right .more-btn a{
  width: 120px;
  height: 120px;
  line-height: 120px;
  margin-left: 18.49vw;
  text-align: center;
  color: #1A1A1A;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  border-radius: 60px;
  border: solid 1px #1A1A1A;
  display: block;
  transition: 0.7s;
}
.concept .right .more-btn a:hover{
  color: #FFF;
  background: #1A1A1A;
  transition: 0.7s;
  text-decoration: none;
}
.concept .img-concept2{
  display: none;
}

/* sample_banner */
.sample_banner{
  padding-bottom: 150px;
  text-align: center;
}
.sample_banner .banner img {
  margin: 0 auto;
}
.sample_banner .banner a:hover img {
  transition: .7s;
  opacity: .7;
}

/* News */
.news{
  margin: 0 13.54vw 153px 13.54vw;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
}
.news.run{
  visibility: visible;
  animation: fadein2 1.5s ease-out 0s 1 normal;
  animation-fill-mode:forwards;
}

@media screen and (max-width: 1200px){
  .news{
    margin: 0 4vw 153px 4vw;
  }
}
.news h2{
  line-height: 1.14;
  margin-bottom: 54px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
}
.news h2:before{
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  margin: 0 1.29vw 0 0.56vw;
  background: #1A1A1A;
}
.news ul{
  border-top: solid 1px #CCC;
}
.news ul li{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: solid 1px #CCC;
}
.news ul li .left{
  width: 14.29%;
  line-height: 1.13;
  padding: 40px 0 40px 4%;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.news ul li .left span{
  width: 100%;
  line-height: 1.16;
  font-size: 25px;
  letter-spacing: 0.05em;
}
.news ul li a{
  width: 85.71%;
  line-height: 2;
  font-size: 20px;
  letter-spacing: 0.1em;
  transition: 0.3s;
}
.news ul li a:hover{
  opacity: 0.5;
  transition: 0.3s;
  text-decoration: none;
}
.news ul li a.no_link:hover{
  color: #1a1a1a;
}

/* フッター */
#footer ul{
  margin: 0 4.17vw 120px 4.17vw;
  display: flex;
  align-items: center;
}
#footer ul li{
  position: relative;
  margin-right: 1.72vw;
  padding: 0 7px;
  /*font-family: 'Roboto', sans-serif;*/
  font-size: 12px;
  letter-spacing: 1.25px
}
#footer ul li:nth-last-child(2){
  margin-right: 0.86vw;
}
#footer ul li:first-child{
  margin-right: auto;
  padding: 0;
}
#footer ul li:last-child{
  margin-right: 0;
}
#footer ul li:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background: #1A1A1A;
  transform: scale(0, 1);
  transform-origin: center;
  transition: transform .3s;
}
#footer ul li:hover:before{
  transform: scale(1);
}
#footer ul li:hover:first-child:before{
  transform: scale(0);
}
#footer ul li a:hover{
  text-decoration: none;
}
.sp_ft ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0 2vw 4vw;
  font-size: 10.5px;
  justify-content: space-between;
  letter-spacing: 1.25px;
}
.sp_ft li{
  width: 46%;
}
.sp_ft li:nth-child(2n-1){
  text-align: right;
}

.copyright{
  position: fixed;
  right: 1.61vw;
  top: 0;
  height: 100%;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  z-index: 11;
}
.sample_ft {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 11;
  padding: 0;
}

@media screen and (max-width: 768px) {
  #chatplusview.closed.headless #outline #eye_catcher {
    right: 6px;
  }
  #chatplusview.closed #outline #eye_catcher img {
    height: 52px;
  }
  .sample_ft img {
    height: 52px;
  }
}


@media screen and (max-width: 768px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  #header .hd-menu ul li.switch-search,
  #header .hd-menu ul li.switch-items,
  #header .hd-menu ul li.switch-scene,
  #header .hd-menu ul li:nth-last-child(2){
    display: none;
  }
  #header .btn-menu{
    position: fixed;
    left: 4vw;
    top: 5.47vw;
    width: 9.33vw;
    height: 4vw;
    z-index: 10;
    display: block;
  }
  #header .btn-menu:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 9.33vw;
    height: 1px;
    background: #1A1A1A;
    transition: 0.3s;
  }
  #header .btn-menu:after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 9.33vw;
    height: 1px;
    background: #1A1A1A;
    transition: 0.3s;
  }
  #header .btn-menu span{
    position: absolute;
    left: 0;
    top: 50%;
    width: 9.33vw;
    height: 1px;
    background: #1A1A1A;
    transition: 0.3s;
  }
  #header .btn-menu.active span{
    display: none;
    transition: 0.3s;
  }
  #header .btn-menu.active:before{
    top: 50%;
    transform: rotate(30deg);
    transition: 0.3s;
  }
  #header .btn-menu.active:after{
    top: 50%;
    transform: rotate(-30deg);
    transition: 0.3s;
  }
  #header .hdh1{
    position: fixed;
    /*left: calc( 50% - 6.465vw );*/
    left: calc( 50% - 22px );
    top: 4vw;
    height: auto;
    transition: 0.3s;
  }
  #header .active .hdh1{
    /*left: calc( 50% - 5vw );*/
    left: calc( 50% - 25px );
    transition: 0.3s;
  }
  #header .hdh1 img{
    /*width: 12.93vw;*/
    width: 44px;
    transition: 0.3s;
  }
  #header .active .hdh1 img{
    /*width: 10vw;*/
    width: 50px;
    transition: 0.3s;
  }
  #header .hd-menu{
    position: fixed;
    right: 9.33vw;
    top: 4vw;
    height: auto;
  }
  #header .hd-menu ul li:last-child span{
    position: absolute;
    right: -4vw;
    top: -3px;
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 11px;
    border-radius: 2vw;
  }
  .sp-menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255,255,255,0.9);
    z-index: 7;
    display: none;
  }
  .sp-menu .inner{
    height: 100vh;
    overflow-y: scroll;
  }
  .sp-menu form{
    position: relative;
    width: 66.67vw;
    margin: 41.73vw auto 20vw auto;
  }
  .sp-menu input[type="text"]{
    width: 100%;
    height: 7.2vw;
    font-size: 16px;
    border-radius: 0;
    border: none;
    border-bottom: solid 1px #1A1A1A;
    background: none;
    display: block;
  }
  .sp-menu input[type="image"]{
    position: absolute;
    right: 0;
    bottom: 2.67vw;
    width: 4.53vw;
    height: 4.53vw;
  }
  .sp-menu dl{
    text-align: center;
    font-family: 'Roboto', sans-serif;
  }
  .sp-menu dl dt{
    line-height: 1.13;
    margin-bottom: 13.73vw;
    font-size: 5.07vw;
    letter-spacing: 0.1em;
  }
  .sp-menu dl dt span{
    position: relative;
  }
  .sp-menu dl dt span:before{
    content: "";
    display: block;
    position: absolute;
    right: -9.74vw;
    top: 50%;
    width: 4.67vw;
    height: 1px;
    background: #1A1A1A;
    transform: rotate(-90deg);
    transition: 0.3s;
  }
  .sp-menu dl dt.active span:before{
    transform: rotate(0);
    transition: 0.3s;
  }
  .sp-menu dl dt span:after{
    content: "";
    display: block;
    position: absolute;
    right: -9.74vw;
    top: 50%;
    width: 4.67vw;
    height: 1px;
    background: #1A1A1A;
  }
  .sp-menu dl dd{
    margin-top: -5.47vw;
    display: none;
  }
  .sp-menu dl dd p{
    line-height: 1.14;
    margin-bottom: 8.28vw;
    font-size: 3.73vw;
    letter-spacing: 0.1em;
  }
  .sp-menu .text1{
    line-height: 1.13;
    margin-bottom: 13.73vw;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 5.07vw;
    letter-spacing: 0.1em;
  }



  /* scene */
  .scene .text1{
    margin-bottom: 8.27vw;
    font-size: 4vw;
  }
  .scene h2{
    height: 13.33vw;
    margin-bottom: 8.4vw;
  }
  .scene h2:before{
    font-size: 5.73vw;
  }
  .scene h2 .diagonal{
    margin: 0 5.33vw 0 2.67vw;
  }
  .scene h2 .diagonal:before{
    top: -10px;
    height: 18.93vw;
  }
  .scene h2 .text2{
    line-height: 1;
    height: 13.33vw;
    font-size: 5.33vw;
  }
  .scene h2 .text2 span{
    line-height: 1.11;
    margin-bottom: 2.4vw;
    font-size: 2.4vw;
  }
  .scene .text3{
    line-height: 2.27;
    margin-bottom: 12.93vw;
    font-size: 3.46vw;
  }
  .scene .more-btn a{
    width: 18.67vw;
    height: 18.67vw;
    line-height: 18.67vw;
    font-size: 2.67vw;
    border-radius: 9.335vw;
  }

  /* いえではたらく */
  .home{
    padding-top: 70px;
    height: auto;
    flex-wrap: wrap;
  }
  .home .left{
    width: 92vw;
    height: auto;
    margin: 0 4vw;
    padding: 50px 0 70px 0;
    order: 3;
  }
  .scene.home .cat{
    position: absolute;
    right: 13.07vw;
    bottom: 18.4vw;
  }
  .scene.home .cat img{
    width: 36.93vw;
  }
  .home .center{
    width: 20%;
    height: 356px;
    background: url(../image/bg-home01_sp.jpg) right top no-repeat;
    background-size: 100% auto;
    order: 1;
  }
  .home .right{
    width: 100%;
    height: 271px;
    background: url(../image/bg-home04_sp.jpg) center center no-repeat;
    background-size: 100% auto;
    margin: 0;
    order: 2;
  }

  /* べんりにくらす */
  .life{
    padding: 70px 0 70px 0;
    height: auto;
    flex-wrap: wrap;
  }
  .life .left{
    width: 100%;
    height: 271px;
    margin: 0;
    background: url(../image/bg-life02_sp.jpg) center center no-repeat;
    background-size: 100% auto;
  }
  .life .right{
    width: 92vw;
    margin: 0 4vw;
    padding: 13.6vw 0 0 0;
    height: auto;
  }
  .scene.life .cat {
    width: 40%;
    margin: -26vw 0 0 auto;
    position: static;
  }

  /* きもちちいいばしょ */
  .place{
    height: auto;
    flex-wrap: wrap;
    padding-top: 70px;
  }
  .place .left{
    width: 92vw;
    height: auto;
    margin: 0 4vw;
    padding: 50px 0 70px 0;
    order: 2;
  }
  .place .right{
    width: 100%;
    height: 271px;
    margin: 0;
    background: url(../image/bg-place02_sp.jpg) center center no-repeat;
    background-size: 100% auto;
    order: 1;
  }
  .scene.place .cat{
    position: absolute;
    right: 4vw;
    bottom: 14vw;
  }
  .scene.place .cat img{
    width: 41.73vw;
  }

  /* concept */
  .concept{
    padding-bottom: 13.33vw;
    flex-direction: column;
    background: url(../image/bg-concept.png) left -57.6vw bottom no-repeat;
    background-size: 140.27vw;
  }
  .concept .left{
    width: 92vw;
    margin: 0 4vw;
    padding: 70px 0 9.73vw 0;
  }
  .concept .left .text1{
    line-height: 1.2;
    margin-bottom: 4.4vw;
    font-size: 8vw;
    transform: translateY(0)!important;
  }
  .concept .left .text2{
    line-height: 1.87;
    margin-bottom: 0;
    font-size: 2.13vw;
    transform: translateY(0)!important;
  }
  .concept .left .img-concept{
    display: none;
  }
  .concept .right{
    width: 92vw;
    margin: 0 4vw;
    padding: 0 0 13vw 0;
  }
  .concept .right h2{
    display: none;
  }
  .concept .right .text1{
    margin-bottom: 4.13vw;
    font-size: 4.7vw;
  }
  .concept .right .text2{
    line-height: 2.04;
    margin-bottom: 6.27vw;
    font-size: 3vw;
  }
  .concept .right .more-btn a{
    width: 18.67vw;
    height: 18.67vw;
    line-height: 18.67vw;
    margin: 0 0 6.67vw auto;
    font-size: 2.67vw;
    border-radius: 9.335vw;
  }
  .concept .img-concept2{
    display: block;
  }

  /* sample_banner */
  .sample_banner{
    width: 92vw;
    margin: 0 4vw;
    padding-bottom: 13.33vw;
  }

  /* News */
  .news{
    margin: 0 4vw 14.53vw 4vw;
    padding-top: 45px;
  }
  .news h2{
    line-height: 1.15;
    margin-bottom: 8vw;
    font-size: 6vw;
  }
  .news h2:before{
    width: 4vw;
    height: 1px;
    margin: 0 2.67vw 0 0;
  }
  .news ul li .left{
    width: 100%;
    line-height: 1.15;
    padding: 20px 0 12px 4vw;
    font-size: 2.67vw;
    display: block;
  }
  .news ul li .left span{
    margin-left: 0.5em;
    font-size: 2.67vw;
  }
  .news ul li a{
    line-height: 1.81;
    margin: 0 0 20px 4vw;
    font-size: 3.2vw;
  }

  /* フッター */
  #footer ul{
    margin: 0 4vw 6.93vw 4vw;
  }
  #footer ul li:first-child img{
    width: 16.4vw;
  }
  #footer ul li:nth-child(2),
  #footer ul li:nth-child(3),
  #footer ul li:nth-child(4),
  #footer ul li:nth-child(5){
    display: none;
  }
  #footer ul li:nth-child(6) img,
  #footer ul li:last-child img{
    width: 4.8vw;
  }

  .copyright{
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    margin-bottom: 90px;
    font-size: 2.13vw;
    writing-mode: horizontal-tb;
    z-index: 11;
  }
}

/* 既存修正 */
.fs-l-pageMain {
  max-width: 1250px;
  margin: 0 auto;
  width: 92%;
  padding: 0 0 150px;
}
.custom-l-main.fs-l-product2 .fs-l-pageMain {
  max-width: 1250px;
  margin: -105px auto 0 auto;
  width: 98%;
  padding: 0;
}
.fs-l-main {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  z-index: 10;
}
.fs-c-breadcrumb {
  max-width: 1250px;
  margin: 148px auto 141px auto;
}

@media screen and (max-width: 768px) {
  .fs-l-pageMain {
    width: 92vw;
    margin: 12.8vw 4vw 18.93vw 4vw;
    padding: 0 0 18vw;
  }
  .custom-l-main.fs-l-product2 .fs-l-pageMain {
    width: 92vw;
    margin: 12.8vw 4vw 18.93vw 4vw;
    padding: 0;
  }
}

/* ティザー */
.top_message {
  background: url(../image/bg-teaser.jpg) right bottom no-repeat;
  background-size: 34.9vw;
  padding: 9.375vw 8%;
  text-align: center;
}
.message_wrap {
  max-width: 1400px;
  margin: 0 auto;
}
.top_message .text1 {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 3;
}
@media screen and (max-width: 768px) {
  .top_message {
    padding: 50px 5%;
  }
  .top_message .text1 {
    font-size: 15px;
    line-height: 2.5;
  }
}

/* ティザー */
.teaser {
  background: url(../image/bg-teaser.jpg) right bottom no-repeat;
  background-size: 34.9vw;
  padding: 6.77vw 8% 2.60vw;
  text-align: center;
}
.teaser_wrap {
  max-width: 1400px;
  margin: 0 auto;
}
.teaser .text1 {
  margin-bottom: 3.75vw;
  font-size: 17px;
  letter-spacing: 0.1em;
  line-height: 3;
}
.teaser .text2 {
  margin-bottom: 7.29vw;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.teaser_copyright {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .teaser {
    padding: 50px 5% 2.60vw;
  }
  .teaser .text1 {
    font-size: 14.5px;
    line-height: 2.5;
    margin-bottom: 50px;
  }
  .teaser .text2 {
    font-size: 18px;
    margin-bottom: 50px;
  }
}