:root {
  /* フォントサイズ */
  --font_main-consept: clamp(16px, calc(11.9px + 1.09vw), 25px);
  --font_concept: clamp(16px, calc(13.7px + 0.61vw), 21px);
  --font_caption: clamp(14px, calc(13.1px + 0.24vw), 16px);
  --font_describe: 16px;
  --font_product-name: clamp(22px, calc(20px + 0.53vw), 26px);
  --font_subtitle: clamp(20px, calc(19.1px + 0.24vw), 22px);
  --font_ui: clamp(12px, calc(10.2px + 0.48vw), 16px);
  --font_small: clamp(9.6px, calc(8.51px + 0.29vw), 12px);

  /* カラーコード */
  --lineCol: rgb(181, 181, 181);
  --uiBgCol: rgb(72, 72, 72);
  --uiBgColHover: rgb(40, 40, 40);
  --footerBgCol: rgb(134, 134, 134);

  /* headerの線の長さ用 */
  --headerHeight: 110vh;
  --commentBlockHeight: 100vh;
}
body {
  font-family: "Noto Serif JP", serif;
}

/* フェードアニメーション */
.fade_up {
  opacity: 0;
  filter: blur(8px);
}
.sp-fade-up {
  opacity: 1;
  filter: blur(0px);
}
.image_reveal, .fade_up_modal {
  opacity: 0;
  --mask-y: 100%;

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;

  -webkit-mask-position: 0 var(--mask-y);
  mask-position: 0 var(--mask-y);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 共通css */
.sp-br {
    display: none;
}
.pc-br {
  display: inline;
}
.lineCol {
  background-color: rgb(181, 181, 181);
}

/* Catalog */
.catalogbtn{
  position: fixed;
  z-index: 9999;
  right: 0;
  top: 50%;
  width: 60px;
  height: 150px;
  transform: translate(20px, -50%);
  background-color: var(--uiBgCol);
  opacity: 0.8;
  transition:
    transform 400ms cubic-bezier(0.215, 0.610, 0.170, 1.005),
    background-color 400ms cubic-bezier(0.215, 0.610, 0.170, 1.005);
  will-change: transform;
}
.catalogbtn p {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  writing-mode: vertical-lr;
  font-size: var(--font_ui);
  letter-spacing: 0.15em;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .catalogbtn:hover {
    transform: translate(0, -50%);
    background-color: var(--uiBgColHover);
  }
}

/* ヘッダー */
header {
  --headerCrossX: 19.23%;
  --headerLineStartY: 75vh;
  --headerCrossY: var(--commentBlockHeight);
  --headerLineScaleX: 0;

  height: var(--headerHeight);
  position: relative;
}
header::before {
  content: "";
  position: absolute;
  left: var(--headerCrossX);
  top: 0;
  width: 1px;
  height: 0;
  background-color: var(--lineCol);
  pointer-events: none;
}
header::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 5%;
  top: var(--headerHeight);
  height: 1px;
  background-color: var(--lineCol);
  pointer-events: none;
  transform: scaleX(var(--headerLineScaleX));
  transform-origin: left center;
  will-change: transform;
}
.headWrapper {
  height: var(--headerHeight);
  display: flex;
  position: relative;
}
.headWrapper > img {
  flex: 16;
  height: var(--commentBlockHeight);
  object-fit: cover;
}
.commentBlock {
  height: var(--commentBlockHeight);
  flex: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.commentBlock img {
  max-height: 500px;
  clip-path: inset(0 0 100% 0);
  animation: copyImageRevealDown 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s forwards;
}
#header p {
  --headerCopyClipRight: 100%;

  font-size: var(--font_concept);
  letter-spacing: 0.2em;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--headerCrossY) + 12vh);
  margin: 0;
  text-align: center;
  color: #000;
  opacity: 0;
  filter: blur(8px);
  /* clip-path: inset(0 var(--headerCopyClipRight) 0 0); */
  will-change: clip-path, opacity, filter;
}
.scroll{
  width: 36px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 9999px;
  position: absolute;
  bottom: calc(7vh + 60px);
  left: 50%;
  transform: translateX(-50%);
}
.scroll .line {
  width: 1px;
  height: 60%;
  background-color: #fff;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  animation: scrollAnimation 2.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
}
.fade_up_img {
  opacity: 0;
  animation: imageFadeIn 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.5s forwards;
}
.lineAnimetion::before {
  animation: sliddown 0.5s cubic-bezier(0.250, 0.250, 0.750, 0.750) 1s forwards, 
              lineTopDown 3s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.7s forwards;
}

/* ヘッダーアニメーション */
@keyframes scrollAnimation {
  0% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: center top;
  }
  25% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: center top;
  }
  26% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: center bottom;
  }
  70% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: center bottom;
  }
  100% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: center bottom;
  }
}
@keyframes imageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sliddown {
  0% {
    top: 0;
    height: 0;
  }
  100% {
    top: 0;
    height: 120vh;
  }
}
@keyframes copyImageRevealDown {
  from {
    clip-path: inset(0 0 120% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes lineTopDown {
  0% {
    top: 0;
    height: 120vh;
  }
  100% {
    top: 80vh;
    height: 40vh;
  }
}
@keyframes copyMaskReveal {
  from {
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
  }
  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

/* main */
h1 {
  font-size: var(--font_main-consept);
  text-align: center;
  letter-spacing: 0.2em;
  margin: 66vh auto 60vh;
}

.caseUnite video{
  width: 100%;
  aspect-ratio: 16 / 9;
}
.caseUnite .captionArea {
  width: 100%;
  max-width: 1200px;
  margin: 15% auto 25%;
  display: flex;
  justify-content: center;
}
.titleBlock {
  width: 45%;
  text-align: center;
}
.titleBlock h2 {
  font-size: var(--font_concept);
  white-space: nowrap;
  position: relative;
  display: inline-block;
  letter-spacing: 0.2em;
  --titleLineScale: 0;
}
.titleBlock h2::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1px;
  height: 500%;
  transform: translateY(-50%) scaleY(var(--titleLineScale));
  transform-origin: center top;
  background-color: var(--lineCol);
}
.caption {
  width: 45%;
  text-align: center;
}
.caption p {
  font-size: var(--font_caption);
  line-height: 3.1;
  white-space: nowrap;
  color: #000;
  display: inline-block;
  text-align: left;
  transform: translateY(-0.9em);
}

.caseDivide {
  max-width: 1200px; /* 最大幅を決める */
  margin: 0 auto;
}
.caseDivide .titleBlock {
  width: 80%;
  margin: 6% auto;
  display: flex;
  justify-content: flex-end;
}

/* クラス名
潔：greatfful
凛：dignified
澄：clean
*/

.verticalWriting {
  writing-mode:vertical-rl;
  text-orientation: mixed;
  line-height: 3;
  white-space: nowrap;
  letter-spacing: 0.6em;
  color: #000;
  font-size: var(--font_concept);
}

.greatful {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.greatful .wrapper {
  width: 40%;
  display: flex;
  justify-content: space-evenly;
}
.wrapper  img {
  max-width: 200px;
  width: 80%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}
.greatful .verticalWriting {
  margin-top: 15%;
}
.greatful .imgArea {
  width: 60%;
  display: flex;
  position: relative;
  margin-top: 20%;
}
.greatful .imgArea .roomImg {
  width: calc(100% + max(0px, (75vw - 1200px) / 2));
  max-width: none;
  flex-shrink: 0;
}
.greatful .imgArea .stringImg {
  width: 20%;
  position: absolute;
  top: 50%;
  left: -13%;
  z-index: 5;
}

.dignified {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40%;
}
.dignified .captionArea {
  width: 35%;
  text-align: center;
}
.dignified .captionArea img {
  width: 80%;
}
.dignified .captionArea p {
  margin: 20% auto;
  font-size: var(--font_concept);
  letter-spacing: 0.4em;
}
.dignified .imgArea {
  width: 55%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: clamp(120px, 19vw, 228px);
}
.dignified .imgArea .stringImg {
  position: absolute;
  width: 27%;
  top: 50%;
  left: 90%;
  z-index: 5;
}
.dignified .imgArea .roomImg {
  width: calc(100% + max(0px, (60vw - 1200px) / 2));
  max-width: none;
  flex-shrink: 0;
}

.clean {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 40%;
}
.clean .captionArea {
  width: 30%;
}
.clean .captionArea img {
  width: 45%;
  display: block;
  margin: 0 auto;
}
.clean .captionArea p{
  margin: 20% auto;
  font-size: var(--font_concept);
  letter-spacing: 0.4em;
}
.clean .imgArea {
  width: 65%;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 10%;
}
.clean .imgArea .stringImg {
  width: 20%;
  position: absolute;
  top: 50%;
  left: -13%;
  z-index: 5;
}
.clean .imgArea .roomImg {
  width: calc(100% + max(0px, (85vw - 1200px) / 2));
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  margin-left: auto;
}


.captionCoord {
  width: 60%;
  max-width: 1200px;
  margin: 30% auto 40%;
  display: flex;
  gap: 20%;
  align-items: center;
}
.captionCoord img {
  width: 40%;
  min-width: 225px;
}
.captionCoord p {
  line-height: 3.5;
  white-space: nowrap;
  font-size: var(--font_describe);
}

.goodsTitle {
  font-size: var(--font_product-name);
  letter-spacing: 0.1em;
  margin-left: 20vw;
  margin-bottom: 13vh;
  position: relative;
  display: inline-block;

  --goodTitleScaleX: 0;
  --goodTitleScaleY: 0;
}
.goodsTitle::before {
  content: '';
  position: absolute;
  top: 180%;
  left: -30%;
  height: 1px;
  width: 300%;
  max-width: 800px;
  background-color: var(--lineCol);
  transform: scaleX(var(--goodTitleScaleX));
  transform-origin: left center;
}
.goodsTitle::after {
  content: '';
  position: absolute;
  top: -80%;
  left: -15%;
  height: 350%;
  width: 1px;
  background-color: var(--lineCol);
  transform: scaleY(var(--goodTitleScaleY));
  transform-origin: center top;
}
.goodsTitle span {
  --goodsTextMask: 100%;

  display: inline-block;
  line-height: 1.4;
  padding-bottom: 0.1em;

  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--goodsTextMask)),
    transparent calc(100% - var(--goodsTextMask)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--goodsTextMask)),
    transparent calc(100% - var(--goodsTextMask)),
    transparent 100%
  );
}

.goods img,
.goods video  {
  width: 100%;
}
#targetimg_2 {
  aspect-ratio: 200 / 91;
  object-fit: cover;
  object-position: 50% 15%;
}
.goods video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f5f5f5;
  margin-bottom: 40vh;
}
.catchPhrase {
  margin-top: 5vh;
  margin-bottom: 25vh;
  text-align: center;
  font-size: var(--font_caption);
  line-height: 3.1;
}
.subTitle {
  text-align: center;
  font-size: var(--font_product-name);
  letter-spacing: 0.1em;
  position: relative;
  width: fit-content;
  margin: 0 auto 2%;
}
.videoCaption {
  margin-bottom: 5vh;
  text-align: center;
  font-size: var(--font_caption);
  line-height: 3.1;
}

.externalLinks {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 25% 25% 25% 25%;
  letter-spacing: 0.1em;
  justify-content: center;
  margin: 20vw auto 10vw auto;
  position: relative;
}
.externalLinks > div {
  width: 100%;
  padding: calc(1vw + 20px) 0;
}
.linkwrap {
  width: 80%;
  margin: 0 auto
}
.externalLinks::before{
  content:"";
  position:absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;

  /* 3本の縦線（中央に出るように） */
  background:
    linear-gradient(to bottom, var(--lineCol), var(--lineCol))  calc(25%) 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, var(--lineCol), var(--lineCol))  calc(25% * 2) 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, var(--lineCol), var(--lineCol))  calc(25% * 3) 0 / 1px 100% no-repeat;
}
.externalLinks [data-ruby] {
  position: relative;
  font-size: var(--font_subtitle);
}
.externalLinks .title [data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
	top: 2.2em;
	left: 0;
	right: 0;
	margin-bottom: 5vw;
	font-size: var(--font_ui);
  white-space: nowrap;
}
.externalLinks a > img {
  display: block;
  margin: 18% auto 8%;
  width: 100%;
}
.externalLinks .linkBtn {
  width: 70%;
  background-color: var(--uiBgCol);
  color: #fff;
  padding: .9em 1em;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(12px, calc(10.2px + 0.48vw), 14px);
  letter-spacing: 0.2em;
  text-wrap: nowrap;
}
.logLink {
  width: 13px;
  height: 13px;
}

.externalLinks > :nth-child(1),
.externalLinks > :nth-child(2),
.externalLinks > :nth-child(3),
.externalLinks > :nth-child(4) {
  position: relative;
  color: #000;
  transition: color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
  overflow: hidden;
}
.externalLinks > :nth-child(1)::before,
.externalLinks > :nth-child(2)::before,
.externalLinks > :nth-child(3)::before,
.externalLinks > :nth-child(4)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--uiBgCol);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
              opacity 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
  z-index: -5;
} 

.externalLinks > :nth-child(1) .linkBtn,
.externalLinks > :nth-child(2) .linkBtn,
.externalLinks > :nth-child(3) .linkBtn,
.externalLinks > :nth-child(4) .linkBtn {
  position: relative;
  background-color: var(--uiBgCol);
  color: #fff;
  transition: background-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
              color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.externalLinks > :nth-child(1) h2,
.externalLinks > :nth-child(2) h2,
.externalLinks > :nth-child(3) h2,
.externalLinks > :nth-child(4) h2 {
  position: relative;
  color: #000;
  transition: color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}


/* TOPへボタン */
.toTopBtn {
  width: clamp(36px, 6vw, 60px);
  aspect-ratio: 1 / 1;   
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  margin-right: 2%;
  margin-bottom: 2%;
  transition: background-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
              border-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
  will-change: background-color, border-color;
  position: relative;
  overflow: hidden;
}

.toTopBtn .material-icons{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: clamp(14.4px, 2.4vw, 24px);
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.material-icons.blackBtn {
  color: #000;
  transform: translate(-50%, -50%) translateY(0%);
  z-index: 2;
}
.material-icons.whiteBtn {
  color: #fff;
  transform: translate(-50%, -50%) translateY(200%);
  z-index: 1;
}


@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  /* hoverアニメーションを全部ここに入れる */
  .externalLinks > :nth-child(1):hover::before,
  .externalLinks > :nth-child(2):hover::before,
  .externalLinks > :nth-child(3):hover::before,
  .externalLinks > :nth-child(4):hover::before {
    transform: translateX(0%);
    opacity: 1;
  }

  .externalLinks > :nth-child(1):hover .linkBtn,
  .externalLinks > :nth-child(2):hover .linkBtn,
  .externalLinks > :nth-child(3):hover .linkBtn,
  .externalLinks > :nth-child(4):hover .linkBtn {
    background-color: #fff;
    color: #000;
  } 

  .externalLinks > :nth-child(1):hover h2,
  .externalLinks > :nth-child(2):hover h2,
  .externalLinks > :nth-child(3):hover h2,
  .externalLinks > :nth-child(4):hover h2 {
    color: #fff;
  } 

  .toTopBtn:hover {
    background-color: var(--uiBgCol);
    border-color: var(--uiBgCol);
  }

  .toTopBtn:hover .blackBtn {
    transform: translate(-50%, -50%) translateY(-200%);
    opacity: 0;
  }
  .toTopBtn:hover .whiteBtn {
    transform: translate(-50%, -50%) translateY(0%);
  }
}

/* フッター */
footer {
  background-color: var(--footerBgCol);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer a img {
  width: 100%;
  padding: 17px 0 8px 0;
}
footer small {
  color: #fff;
  font-family:  "Noto Serif JP", serif;
  font-size: 12px;
  padding-bottom: 15px;
}