@charset "utf-8";

/*--------------------------------------
  # font
--------------------------------------*/

/*--------------------------------------
  # eyecatch
--------------------------------------*/

.eyecatch {
  position: relative;
}

.eyecatch .eyecatch-txt {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 65px;
}

.eyecatch .eyecatch-txt .eyecatch-txt-inner {
  color: #000;
  text-align: center;
}

.eyecatch .eyecatch-txt .eyecatch-txt-inner .en {
  font-size: min(7.4vw, 5.0rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

body.en .eyecatch .eyecatch-txt .eyecatch-txt-inner .en {
  font-size: 90%;
  font-family: "Outfit", sans-serif;
  line-height: 1.2;
}

.eyecatch .eyecatch-bg {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.eyecatch .swiper.eyecatch-swiper {}

.eyecatch .swiper.eyecatch-swiper .swiper-slide {}

.eyecatch .swiper.eyecatch-swiper .swiper-slide img {
  display: block;
  width: 100%;
  min-height: 380px;
  max-height: 600px;
  height: 70vh;
  background: #CCC;
  object-fit: cover;
  transition: 6s linear transform;
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation01 img {
  transform: scale(1);
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation01.animation img {
  transform: scale(1.13);
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation02 img {
  transform: scale(1.2) translateX(30px);
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation02.animation img {
  transform: scale(1.2) translateX(-30px);
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation03 img {
  transform: scale(1.2) translateX(-30px);
}

.eyecatch .swiper.eyecatch-swiper .swiper-slide.animation03.animation img {
  transform: scale(1.2) translateX(30px);
}

.eyecatch .eyecatch-wave {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: 0.8s margin-top, 0.8s opacity;
}

.eyecatch:not(.scrollin) .eyecatch-wave {
  margin-top: 80px;
  opacity: 0;
}

.eyecatch .eyecatch-wave img {
  display: block;
  width: 100%;
}

@media print,
screen and (min-width: 950px) {
  .eyecatch {}

  .eyecatch .eyecatch-txt {}

  .eyecatch .eyecatch-txt .eyecatch-txt-inner {}

  .eyecatch .eyecatch-txt .eyecatch-txt-inner .en {}

  body.en .eyecatch .eyecatch-txt .eyecatch-txt-inner .en {}

  .eyecatch .eyecatch-bg {}

  .eyecatch .swiper.eyecatch-swiper {}

  .eyecatch .swiper.eyecatch-swiper .swiper-slide {}

  .eyecatch .swiper.eyecatch-swiper .swiper-slide img {
    min-height: 480px;
    max-height: 1080px;
    height: 93vh;
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation01 img {
    transform: scale(1);
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation01.animation img {
    transform: scale(1.13);
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation02 img {
    transform: scale(1.1) translateX(30px);
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation02.animation img {
    transform: scale(1.1) translateX(-30px);
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation03 img {
    transform: scale(1.1) translateX(-30px);
  }

  .eyecatch .swiper.eyecatch-swiper .swiper-slide.animation03.animation img {
    transform: scale(1.1) translateX(30px);
  }

  .eyecatch .eyecatch-wave {
    transform: translateY(-30%);
  }

  .eyecatch .eyecatch-wave img {}
}

/*--------------------------------------
  # node
--------------------------------------*/

.node {
  padding: 60px 0;
}

.node .node-wrapper {
  padding: 0 20px;
}

.node .node-wrapper>*:last-child {
  margin-bottom: 0;
}

.node .node-title {
  margin-bottom: 20px;
  color: #b0905c;
  font-size: 4.2rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.25;
}

.node .node-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  transition: 0.8s transform, 0.8s opacity;
}

.node .node-btn:not(.scrollin) {
  transform: translateY(50px);
  opacity: 0;
}

.node .node-btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12em;
  height: 2.5em;
  padding-top: 2px;
  color: #FFF;
  font-size: 1.8rem;
  background: #b0905c;
  text-decoration: none;
  line-height: 1.2;
}

.node .node-btn a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #F0D19C;
  background: linear-gradient(90deg, rgba(240, 209, 156, 1) 1%, rgba(248, 234, 210, 1) 20%, rgba(238, 203, 143, 1) 80%, rgba(240, 209, 156, 1) 100%);
}

.node .node-btn a:hover {}

.node .node-btn a i {
  margin-right: 8px;
  font-size: 80%;
}

@media print,
screen and (min-width: 950px) {
  .node {
    padding: 80px 0;
  }

  .node .node-wrapper {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
  }

  .node .node-wrapper>*:last-child {}

  .node .node-title {
    margin-bottom: 40px;
    font-size: 6.0rem;
  }

  .node .node-btn {
    margin-top: 50px;
  }

  .node .node-btn a {
    width: 240px;
    height: 50px;
    padding-top: 0;
    font-size: 2.0rem;
    transition: 0.2s;
  }

  .node .node-btn a:hover {
    transform: scale(1.1);
    filter: contrast(0.85) brightness(1.15);
  }

  .node .node-btn a:after {
    height: 3px;
  }

  .node .node-btn a:hover {}

  .node .node-btn a i {
    margin-right: 10px;
  }

}

/*--------------------------------------
  # company
--------------------------------------*/

#company.node {
  padding-top: 0;
  background: url(../img/bg/washi_bg.jpg) no-repeat center top;
  background-size: cover;
  overflow: hidden;
}

#company.node .node-wrapper {}

#company.node .lead {
  padding: 60px 0;
  font-style: italic;
  text-align: center;
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#company.node .lead:not(.scrollin) {
  transform: translateY(80px);
  opacity: 0;
}

#company.node .lead>*:last-child {
  margin-bottom: 0;
}

#company.node .company .node-title {
  transition: 0.8s transform, 0.8s opacity;
}

#company.node .company:not(.scrollin) .node-title {
  transform: translateY(80px);
  opacity: 0;
}

#company.node .company p {
  text-align: center;
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#company.node .company:not(.scrollin) p {
  transform: translateY(80px);
  opacity: 0;
}

#company.node .company .company-menu {
  margin: 30px 0;
}

#company.node .company .company-menu .company-menu-item {
  margin-bottom: 30px;
}

#company.node .company .company-menu:not(.scrollin) .company-menu-item {
  transform: translateX(80px);
  opacity: 0;
}

#company.node .company .company-menu .company-menu-item:nth-child(1) {
  transition: 0.8s transform, 0.8s opacity;
}

#company.node .company .company-menu .company-menu-item:nth-child(2) {
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#company.node .company .company-menu .company-menu-item a {
  position: relative;
  display: block;
  background: #172126;
}

#company.node .company .company-menu .company-menu-item a:hover {}

#company.node .company .company-menu .company-menu-item .company-menu-item-img {}

#company.node .company .company-menu .company-menu-item .company-menu-item-img img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

#company.node .company .company-menu .company-menu-item .company-menu-item-name {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 252px;
  height: 58px;
  padding-top: 2px;
  color: #FFF;
  font-size: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  transform: translate(-50%, -50%);
}

@media print,
screen and (min-width: 950px) {
  #company.node {
    background: url(../img/bg/washi_bg_l.jpg) no-repeat center top;
    background-size: cover;
  }

  #company.node .node-wrapper {}

  #company.node .lead {
    padding: 120px 0;
  }

  #company.node .lead>*:last-child {}

  #company.node .company .node-title {}

  #company.node .company p {}

  #company.node .company .company-menu {
    display: flex;
    margin: 55px -20px;
  }

  #company.node .company .company-menu .company-menu-item {
    flex: 1;
    margin: 0 20px;
  }

  #company.node .company .company-menu:not(.scrollin) .company-menu-item {
    transform: translateY(80px);
    opacity: 0;
  }

  #company.node .company .company-menu .company-menu-item a {
    overflow: hidden;
  }

  #company.node .company .company-menu .company-menu-item a:hover {}

  #company.node .company .company-menu .company-menu-item .company-menu-item-img {}

  #company.node .company .company-menu .company-menu-item .company-menu-item-img img {
    transition: 0.2s transform, 0.2s opacity;
  }

  #company.node .company .company-menu .company-menu-item a:hover .company-menu-item-img img {
    transform: scale(1.1);
    opacity: 0.8;
  }

  #company.node .company .company-menu .company-menu-item .company-menu-item-name {
    width: 312px;
    height: 70px;
    padding-top: 3px;
    font-size: 2.1rem;
  }

}

/*--------------------------------------
  # brands
--------------------------------------*/

#brands.node {
  overflow: hidden;
}

#brands.node .node-wrapper {}

#brands.node .node-title {
  transition: 0.8s transform, 0.8s opacity;
}

#brands.node:not(.scrollin) .node-title {
  transform: translateY(80px);
  opacity: 0;
}

#brands.node p {
  text-align: center;
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#brands.node:not(.scrollin) p {
  transform: translateY(80px);
  opacity: 0;
}

#brands.node .node-wrapper p br {}

#brands.node .brands-menu {
  margin: 30px 0;
}

#brands.node .brands-menu .brands-menu-item {
  margin-bottom: 30px;
}

#brands.node .brands-menu:not(.scrollin) .brands-menu-item {
  transform: translateX(80px);
  opacity: 0;
}

#brands.node .brands-menu .brands-menu-item:nth-child(1) {
  transition: 0.8s transform, 0.8s opacity;
}

#brands.node .brands-menu .brands-menu-item:nth-child(2) {
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#brands.node .brands-menu .brands-menu-item a {
  position: relative;
  display: block;
}

#brands.node .brands-menu .brands-menu-item a:hover {}

#brands.node .brands-menu .brands-menu-item .brands-menu-item-img {}

#brands.node .brands-menu .brands-menu-item .brands-menu-item-img img {
  display: block;
  width: 100%;
  height: 100%;
}

#brands.node .brands-menu .brands-menu-item .brands-menu-item-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
}

#brands.node .brands-menu .brands-menu-item .brands-menu-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: #FFF;
  font-size: 1.8rem;
  line-height: 1.2;
}

#brands.node .brands-menu .brands-menu-item .brands-menu-item-name i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.7em;
  height: 1.7em;
  margin: -2px 8px 0 0;
  color: #000;
  font-size: 60%;
  background: #FFF;
  border-radius: 100%;
}

#brands.node .node-btn.scrollin {}

#brands.node .node-btn.scrollin a {}

#brands.node .node-btn.scrollin a:hover {}

#brands.node .node-btn.scrollin a i {}

@media print,
screen and (min-width: 950px) {
  #brands.node {}

  #brands.node .node-wrapper {}

  #brands.node .node-title {}

  #brands.node p {}

  #brands.node .node-wrapper p br {}

  #brands.node .brands-menu {
    display: flex;
    margin: 55px -20px;
  }

  #brands.node .brands-menu .brands-menu-item {
    flex: 1;
    margin: 0 20px;
  }

  #brands.node .brands-menu:not(.scrollin) .brands-menu-item {
    transform: translateY(80px);
    opacity: 0;
  }

  #brands.node .brands-menu .brands-menu-item a {
    overflow: hidden;
  }

  #brands.node .brands-menu .brands-menu-item a:hover {}

  #brands.node .brands-menu .brands-menu-item .brands-menu-item-img {}

  #brands.node .brands-menu .brands-menu-item .brands-menu-item-img img {
    transition: 0.2s transform, 0.2s opacity;
  }

  #brands.node .brands-menu .brands-menu-item a:hover .brands-menu-item-img img {
    transform: scale(1.1);
    opacity: 0.6;
  }

  #brands.node .brands-menu .brands-menu-item .brands-menu-item-img:after {}

  #brands.node .brands-menu .brands-menu-item .brands-menu-item-name {
    padding: 18px 25px;
    font-size: 2.1rem;
  }

  #brands.node .brands-menu .brands-menu-item .brands-menu-item-name i {
    padding-top: 2px;
  }

  #brands.node .node-btn.scrollin {}

  #brands.node .node-btn.scrollin a {}

  #brands.node .node-btn.scrollin a:hover {}

  #brands.node .node-btn.scrollin a i {}

}

/*--------------------------------------
  # oem-odm
--------------------------------------*/

#oem-odm.node {
  position: relative;
  overflow: hidden;
}

#oem-odm.node .node-wrapper {}

#oem-odm.node .node-inner {
  position: relative;
  z-index: 1;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.92);
}

#oem-odm.node .node-inner .node-title {
  transition: 0.8s transform, 0.8s opacity;
}

#oem-odm.node:not(.scrollin) .node-inner .node-title {
  transform: translateY(80px);
  opacity: 0;
}

#oem-odm.node .node-inner p {
  text-align: center;
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#oem-odm.node:not(.scrollin) .node-inner p {
  transform: translateY(80px);
  opacity: 0;
}

#oem-odm.node .node-inner .node-btn {}

#oem-odm.node .node-inner .node-btn a {}

#oem-odm.node .node-inner .node-btn a:hover {}

#oem-odm.node .node-inner .node-btn a i {}

#oem-odm.node .node-bg {}

#oem-odm.node .node-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #666;
  object-fit: cover;
}

@media print,
screen and (min-width: 950px) {
  #oem-odm.node {}

  #oem-odm.node .node-wrapper {}

  #oem-odm.node .node-inner {
    padding: 80px;
  }

  #oem-odm.node .node-inner .node-title {}

  #oem-odm.node .node-inner p {}

  #oem-odm.node .node-inner .node-btn {}

  #oem-odm.node .node-inner .node-btn a {}

  #oem-odm.node .node-inner .node-btn a:hover {}

  #oem-odm.node .node-inner .node-btn a i {}

  #oem-odm.node .node-bg {}

  #oem-odm.node .node-bg img {}

}

/*--------------------------------------
  # news
--------------------------------------*/
#news.node {
  overflow: hidden;
}

#news.node .node-wrapper {}

#news.node .node-wrapper .node-title {
  transition: 0.8s transform, 0.8s opacity;
}

#news.node:not(.scrollin) .node-wrapper .node-title {
  transform: translateY(80px);
  opacity: 0;
}

#news.node .node-wrapper .news-wrapper {}

#news.node .node-wrapper .news-wrapper .news-item {
  margin-bottom: 30px;
}

#news.node .node-wrapper .news-wrapper:not(.scrollin) .news-item {
  transform: translateX(50px);
  opacity: 0;
}

#news.node .node-wrapper .news-wrapper .news-item:nth-child(1) {
  transition: 0.8s transform, 0.8s opacity;
}

#news.node .node-wrapper .news-wrapper .news-item:nth-child(2) {
  transition: 0.8s 0.15s transform, 0.8s 0.15s opacity;
}

#news.node .node-wrapper .news-wrapper .news-item:nth-child(3) {
  transition: 0.8s 0.3s transform, 0.8s 0.3s opacity;
}

#news.node .node-wrapper .news-wrapper .news-item a {
  display: block;
  text-decoration: none;
}

#news.node .node-wrapper .news-wrapper .news-item a:hover {}

#news.node .node-wrapper .news-wrapper .news-item .news-item-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 61.19%;
  margin-bottom: 10px;
}

#news.node .node-wrapper .news-wrapper .news-item .news-item-img .new {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 5px 8px 3px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

#news.node .node-wrapper .news-wrapper .news-item .news-item-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#news.node .node-wrapper .news-wrapper .news-item .news-item-date-cat {
  display: flex;
  align-items: baseline;
  margin-bottom: 2px;
  font-size: 1.1rem;
}

#news.node .node-wrapper .news-wrapper .news-item .news-item-date-cat span {
  margin-left: 8px;
  padding: 2px 8px 0;
  background: #f5e0bd;
  line-height: 1.2;
}

#news.node .node-wrapper .news-wrapper .news-item .news-item-title {
  font-size: 1.4rem;
  line-height: 1.6;
}

#news.node .node-wrapper .node-btn {}

#news.node .node-wrapper .node-btn a {}

#news.node .node-wrapper .node-btn a:hover {}

#news.node .node-wrapper .node-btn a i {}

@media print,
screen and (min-width: 950px) {
  #news.node {}

  #news.node .node-wrapper {}

  #news.node .node-wrapper .node-title {}

  #news.node .node-wrapper .news-wrapper {
    display: flex;
    margin: 55px -20px;
  }

  #news.node .node-wrapper .news-wrapper .news-item {
    width: calc(33.33% - 40px);
    margin: 0 20px;
  }

  #news.node .node-wrapper .news-wrapper:not(.scrollin) .news-item {
    transform: translateY(50px);
    opacity: 0;
  }

  #news.node .node-wrapper .news-wrapper .news-item a {
  }

  #news.node .node-wrapper .news-wrapper .news-item a:hover {}

  #news.node .node-wrapper .news-wrapper .news-item .news-item-img {
  overflow: hidden;
}

  #news.node .node-wrapper .news-wrapper .news-item .news-item-img .new {}

  #news.node .node-wrapper .news-wrapper .news-item .news-item-img img {
    transition: 0.2s transform, 0.2s opacity;
  }

  #news.node .node-wrapper .news-wrapper .news-item a:hover .news-item-img img {
    transform: scale(1.1);
    opacity: 0.6;
  }

  #news.node .node-wrapper .news-wrapper .news-item .news-item-date-cat {
    margin-bottom: 2px;
    font-size: 1.2rem;
  }

  #news.node .node-wrapper .news-wrapper .news-item .news-item-date-cat span {}

  #news.node .node-wrapper .news-wrapper .news-item .news-item-title {
    font-size: 1.5rem;
  }

  #news.node .node-wrapper .node-btn {}

  #news.node .node-wrapper .node-btn a {}

  #news.node .node-wrapper .node-btn a:hover {}

  #news.node .node-wrapper .node-btn a i {}

}