@charset "utf-8";
html {
  font-size: 62.5%;
}
a:link {
  color: #777;
  text-decoration: underline;
  transition: 0.3s;
}
a:visited {
  color: #777;
  text-decoration: underline;
}
a:hover {
  color: #ccc;
  text-decoration: none;
}
a[href*="tel:"] {
  cursor: default;
  color: #666;
  text-decoration: none;
}
@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
  }
}
hr {
  width: 100%;
  border: solid 1px #7d7d7d;
  margin: 40px 0;
}
.center {
  text-align: center;
  margin-top: 10px;
}
a img {
  transition: 0.3s;
}
a img:hover {
  opacity: 0.7;
}
picture {
  display: block;
}
.pc_none {
  display: none;
}
.maT10 {
  margin-top: 10px;
}
body {
  font-size: 1.6rem;
  color: #433730;
  line-height: 1.8;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  background-color: #e9e4e0;
}
/* ページ自体をふわっと表示 */
body {
  animation: fadein 1s forwards;
}
@keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
img {
  max-width: 100%;
  height: auto;
}
/* splide
------------------------------------------------- */
.splide {
  position: fixed !important;
  top: 0;
  z-index: -1;
  height: 100svh;
  width: 100%;
}
.splide picture {
  height: 100%;
}
.splide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ズーム */
.splide__slide img {
  transition: 20s ease-out;
  transform: scale(1.2);
}
.splide__slide.is-active img {
  transform: scale(1);
  transition-delay: 0s;
}
/* header
------------------------------------------------- */
header {
  padding: 4%;
  height: 100vh;
  background-color: #261c14;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
header h1 {
  margin-bottom: 20px;
}
header h2 {
  font-weight: 400;
  color: #4f3f2f;
  font-size: 1.4rem;
}
/* コンテンツ
------------------------------------------------- */
.beige_bg {
  background-color: #e9e4e0;
}
section.concept {
  max-width: 1920px;
  display: flex;
  margin: 100vh auto 0;
  background-color: #e9e4e0;
  background-image: url("../images/concept_bg.webp");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
section.concept div.txt_area {
  width: 50%;
  padding: 7%;
  box-sizing: border-box;
}
section.concept h1 {
  font-weight: 400;
  color: #9d918b;
  line-height: 1.6;
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}
section.concept h1 strong {
  font-weight: 500;
  font-size: 26px;
  width: 150px;
  font-family: "Newsreader", serif;
}
section.concept h1 span {
  font-size: 2.4rem;
  color: #433730;
  border-left: solid 1px #bbada6;
  padding-left: 8%;
  width: calc(100% - 150px);
}
section.concept p {
  margin-bottom: 30px;
}
section.concept .photo {
  background-image: url("../images/concept_image.webp");
  background-size: 150%;
  background-position: center;
  padding: 0 20% 0 0;
  position: relative;
  width: 50%;
  box-sizing: border-box;
  overflow: hidden;
}
section.concept .photo:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(15px);
}
section.concept .photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 商品 */
section.products {
  text-align: center;
  background-color: #e9e4e0;
  max-width: 1920px;
  margin: auto;
  line-height: 2;
  padding: 5%;
}
section.products h1 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  color: #9d918b;
  line-height: 1.6;
  font-size: 26px;
  padding-top: 100px;
  margin-bottom: 100px;
  position: relative;
}
section.products h1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 150px;
  height: 1px;
  background-color: #bbada6;
}
section.products article {
  display: flex;
}
section.products article h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: #da473e;
  font-weight: 400;
  margin-bottom: 60px;
  line-height: 1.6;
}
section.products article h2 img {
  margin-right: 50px;
}
.nowas_txt {
  max-width: 580px;
  margin: auto;
}
.btn a {
  position: relative;
  display: block;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  color: #da473e;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-family: "Newsreader", serif;
  font-weight: 500;
  margin: 30px auto 0;
}
.btn a:hover:before {
  content: "";
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #da473e;
  border-width: 1px 0 0 1px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn a:hover::after {
  content: "";
  height: 25px;
  width: 25px;
  position: absolute;
  top: 25px;
  left: 275px;
  border: 1px solid #da473e;
  border-width: 0 1px 1px 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn a:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #da473e;
  border-width: 1px 0 0 1px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn a:after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #da473e;
  border-width: 0 1px 1px 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn.tie a {
  color: #f3aaa6;
}
.btn.tie a:hover:before {
  border: 1px solid #f3aaa6;
  border-width: 1px 0 0 1px;
}
.btn.tie a:hover::after {
  border: 1px solid #f3aaa6;
  border-width: 0 1px 1px 0;
}
.btn.tie a:before {
  border: 1px solid #f3aaa6;
  border-width: 1px 0 0 1px;
}
.btn.tie a:after {
  border: 1px solid #f3aaa6;
  border-width: 0 1px 1px 0;
}
.btn.zep a {
  color: #4eb78e;
}
.btn.zep a:hover:before {
  border: 1px solid #4eb78e;
  border-width: 1px 0 0 1px;
}
.btn.zep a:hover::after {
  border: 1px solid #4eb78e;
  border-width: 0 1px 1px 0;
}
.btn.zep a:before {
  border: 1px solid #4eb78e;
  border-width: 1px 0 0 1px;
}
.btn.zep a:after {
  border: 1px solid #4eb78e;
  border-width: 0 1px 1px 0;
}
.btn.waf a {
  color: #c4c2e0;
}
.btn.waf a:hover:before {
  border: 1px solid #c4c2e0;
  border-width: 1px 0 0 1px;
}
.btn.waf a:hover::after {
  border: 1px solid #c4c2e0;
  border-width: 0 1px 1px 0;
}
.btn.waf a:before {
  border: 1px solid #c4c2e0;
  border-width: 1px 0 0 1px;
}
.btn.waf a:after {
  border: 1px solid #c4c2e0;
  border-width: 0 1px 1px 0;
}
section.products article div {
  width: 50%;
  background-color: #c4c2e0;
  color: #da473e;
  padding: 5% 4%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.products article picture {
  width: 50%;
  overflow: hidden;
}
section.products article picture img {
  object-fit: cover;
  width: 100%;
  height: calc(100% + 100px);
}
article.tie {
  flex-direction: row-reverse;
}
section.products article.tie div {
  background-color: #7c331e;
  color: #f3aaa6;
}
section.products article.tie h2 {
  color: #f3aaa6;
}
section.products article.zep div {
  background-color: #f4dfb0;
  color: #4eb78e;
}
section.products article.zep h2 {
  color: #4eb78e;
}
article.waf {
  flex-direction: row-reverse;
}
section.products article.waf div {
  background-color: #e7343c;
  color: #c4c2e0;
}
section.products article.waf h2 {
  color: #c4c2e0;
}
.note {
  text-align: center;
  margin-top: 40px;
}
.xpala_wrap {
  width: 100%;
}
.xpala_wrap img {
  height: calc(100% + 100px);
  width: auto;
}
.pala_wrap {
  width: 100%;
  xaspect-ratio: 16 / 9; /* ← 好きな比率にする（画像に合わせる） */
  overflow: hidden; /* ← これが重要！はみ出しを隠す */
  position: relative;
}
.pala_wrap img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
}

/* design_concept */
.design_concept{
	background-color: rgba(38,28,21,0.4);
	padding: 5%;
}

.design_wrap{
	background-color: rgba(38,28,21,1);
	width: 50%;
	padding: 5% 4%;
	box-sizing: border-box;
	color: #8c755d;
}
.design_concept p{
	margin-bottom: 40px;
}
section.design_concept h1 {
  font-family: "Newsreader", serif;
  font-weight: 500;
	color: #8c755d;
  line-height: 1.6;
  font-size: 26px;
  margin-bottom: 40px;
  position: relative;
}

footer {
  padding: 210px 8% 70px;
  background-color: #261c14;
  color: #4f3f2f;
  font-family: "Newsreader", serif;
  font-weight: 500;
}
.logo {
  margin-bottom: 30px;
}
address {
  font-size: 1.5rem;
  margin-bottom: 30px;
  font-style: normal;
}
ul.sns {
  margin-bottom: 55px;
  list-style: none;
  display: flex;
}
.copy {
  font-size: 1.4rem;
}