@charset "utf-8";

.equipment_back{
		background-color: #283243;
}

.equipment_back1{
		background-image: url("../imgs/equipment/bg-content@1.5x.jpg");
}


/* スマホ幅のとき、キッチンの画像を2列表示に固定する */
@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 2列を左右に並べる */
	  padding: 20px;
  }

  .kitchenSect__cont .usableList__item {
    box-sizing: border-box;
    width: calc(50% - 12px) !important; /* 他の指定を上書き */
  }

  .storageSect__cont .usableList__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 左右に2列で振り分け */
	  padding: 20px;
  }

  .storageSect__cont .usableList__item {
    box-sizing: border-box;
    width: calc(50% - 12px) !important; /* 2列になる幅 */
    margin: 0;                          /* 中央寄せを解除 */
    max-width: none;                    /* 幅制限があれば無効化 */
  }
	.toiletSect__cont .usableList__inner{
		    display: flex;
    flex-wrap: wrap;
    justify-content: center/* 左右に2列で振り分け */
  }
		.otherSect__cont .usableList__inner{
		    display: flex;
    flex-wrap: wrap;
    justify-content: center/* 左右に2列で振り分け */
  }
}

/* CSS Document */
 /* 最初はアニメなし（静止状態） */
  .img-reveal {
    width: 100%;
    display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }

  /* このクラスが付いたらアニメ開始 */
  .img-reveal.is-animated {
    animation: revealFromLeft 2.5s ease-out forwards;
  }

  @keyframes revealFromLeft {
    to {
      -webkit-mask-position: 100% 0;
              mask-position: 100% 0;
    }
  }
.bathSect__head {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .bathSect__head {
    width: 1000px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .bathSect__head {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .bathSect__head {
    max-width: 100%;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .bathSect__head {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__head {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .bathSect__head .qualityTtl + .qualityCard {
    margin-top: 104px;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__head .qualityTtl + .qualityCard {
    margin-top: 40px;
  }
}

.bathSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .bathSect__cont {
    width: 1076px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .bathSect__cont {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .bathSect__cont .usableList:not(:first-child) {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont .usableList:not(:first-child) {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .bathSect__cont .usableList__inner {
    gap: 80px 58px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont .usableList__inner {
    gap: 64px 24px;
  }
}

@media screen and (min-width: 768px) {
  .bathSect__cont .usableList__item {
    width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont .usableList__item {
    margin: 0 auto;
    max-width: 260px;
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont .usableList__item--small {
    margin: 0;
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 768px) {
  .bathSect__cont .usableList--small .usableList__item {
    width: calc(50% - 12px);
  }
}

.bathSect__head + .bathSect__cont {
  margin-top: 104px;
}

.internetCard {
  background-color: rgba(35, 24, 21, 0.85);
}

@media screen and (min-width: 768px) {
  .internetCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 80px 100px;
  }
}

@media screen and (max-width: 768px) {
  .internetCard {
    padding: 80px 48px 140px;
  }
}

@media screen and (min-width: 768px) {
  .internetCard__visual {
    width: 540px;
  }
}

@media screen and (max-width: 768px) {
  .internetCard__visual {
    margin-left: auto;
    margin-right: auto;
    max-width: 260px;
	  padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  .internetCard__cont {
    width: 420px;
	  color: #c8bb9b;
}

@media screen and (max-width: 768px) {
  .internetCard__cont {
    margin-left: auto;
    margin-right: auto;
    max-width: 260px;
  }
}

.internetCard__cont .heading {
  line-height: 1.8;
}

.internetCard__cont .heading:before {
  content: '';
  margin-top: calc((1 - 1.8) * .5em);
}

.internetCard__cont .heading:after {
  margin-bottom: calc((1 - 1.8) * .5em);
}

.internetCard__cont .heading:before, .internetCard__cont .heading:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .internetCard__cont .heading {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .internetCard__cont .heading {
    font-size: 20px;
  }
}

.internetCard__cont .labelTtl {
  margin-top: 40px;
}

.internetCard__cont .labelTtl + .txt {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .internetCard__visual + .internetCard__cont {
    margin-top: 40px;
  }
}

.internetSect__head {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .internetSect__head {
    width: 1200px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .internetSect__head {
    padding: 0 20px;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .internetSect__head {
    padding: 0 20px;
  }
}

.internetSect__ttl {
  text-align: center;
	color: #c8bb9b;
}

.internetSect__ttl .jp {
  display: block;
  letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
  .internetSect__ttl .jp {
    font-size: 18px;
    line-height: 1.8;
  }
  .internetSect__ttl .jp:before {
    content: '';
    margin-top: calc((1 - 1.8) * .5em);
  }
  .internetSect__ttl .jp:after {
    margin-bottom: calc((1 - 1.8) * .5em);
  }
  .internetSect__ttl .jp:before, .internetSect__ttl .jp:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

@media screen and (max-width: 768px) {
  .internetSect__ttl .jp {
    font-size: 13px;
    line-height: 2;
  }
  .internetSect__ttl .jp:before {
    content: '';
    margin-top: calc((1 - 2) * .5em);
  }
  .internetSect__ttl .jp:after {
    margin-bottom: calc((1 - 2) * .5em);
  }
  .internetSect__ttl .jp:before, .internetSect__ttl .jp:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

.internetSect__ttl .en {
  display: block;
  font-family: "Cinzel", serif;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .internetSect__ttl .en {
    font-size: 49px;
    letter-spacing: 10px;
  }
}

@media screen and (max-width: 768px) {
  .internetSect__ttl .en {
    font-size: 20px;
    letter-spacing: .05em;
  }
}

.internetSect__ttl .en + .jp {
  margin-top: 16px;
}

.internetSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .internetSect__cont {
    width: 1200px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .internetSect__cont {
    width: 100%;
  }
}

.internetSect__head + .internetSect__cont {
  margin-top: 32px;
}

@media screen and (min-width: 768px) {
  .kitchenSect {
    margin: 0 auto;
    max-width: 1440px;
    padding: 120px 0 140px;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect {
    padding-bottom: 64px;
  }
}
.kitchenSect__head {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .kitchenSect__head {
    width: 1000px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .kitchenSect__head {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .kitchenSect__head {
    max-width: 100%;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .kitchenSect__head {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__head {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .kitchenSect__head .qualityTtl + .qualityCard {
    margin-top: 104px;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__head .qualityTtl + .qualityCard {
    margin-top: 40px;
  }
}

.kitchenSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .kitchenSect__cont {
    width: 1076px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .kitchenSect__cont {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .kitchenSect__cont .usableList:not(:first-child) {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList:not(:first-child) {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .kitchenSect__cont .usableList__inner {
    gap: 80px 58px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList__inner {
    gap: 64px 24px;
  }
}

@media screen and (min-width: 768px) {
  .kitchenSect__cont .usableList__item {
    width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList__item {
    margin: 0 auto;
    max-width: 260px;
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList__item--small {
    margin: 0;
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 768px) {
  .kitchenSect__cont .usableList--small .usableList__item {
    width: calc(50% - 12px);
  }
}

.kitchenSect__head + .kitchenSect__cont {
  margin-top: 104px;
}


@media screen and (min-width: 768px) {
  .otherSect {
    margin: 0 auto;
    max-width: 1440px;
  }
}

@media screen and (min-width: 768px) {
  .otherSect__head {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 56px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .otherSect__head {
    padding-left: 40px;
  }
}

.otherSect__head .qualityTtl {
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .otherSect__head .qualityTtl {
    padding-left: 120px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .otherSect__head .qualityTtl {
    padding-left: calc(120 / 1440 * 100vw);
  }
}

@media screen and (min-width: 768px) {
  .otherSect__head .qualityCard {
    width: 1000px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .otherSect__head .qualityCard {
    width: calc(1000 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .otherSect__head .qualityCard {
    margin-top: 40px;
  }
}

.otherSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .otherSect__cont {
    width: 1076px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .otherSect__cont {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .otherSect__cont {
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .otherSect__cont {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .otherSect__cont .usableList__inner {
    gap: 80px 58px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .otherSect__cont .usableList__inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .otherSect__cont .usableList__inner {
    gap: 64px 24px;
  }
}

@media screen and (min-width: 768px) {
  .otherSect__cont .usableList__item {
    width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .otherSect__cont .usableList__item {
    margin: 0 auto;
    max-width: 260px;
  }
}

@media screen and (min-width: 768px) {
  .otherSect__head + .otherSect__cont {
    margin-top: 140px;
  }
}

@media screen and (max-width: 768px) {
  .otherSect__head + .otherSect__cont {
    margin-top: 104px;
  }
}

.qualityTtl {
  font-family: "Cinzel", serif;
  letter-spacing: .2em;
  transition: -webkit-mask-position ease;
  transition: mask-position ease;
  transition: mask-position ease, -webkit-mask-position ease;
  -webkit-transition-duration: 2s;
          transition-duration: 2s;
	color: #c8bb9b;
}

@media screen and (min-width: 768px) {
  .qualityTtl {
    font-size: 48px;
    line-height: 1.2;
  }
  .qualityTtl:before {
    content: '';
    margin-top: calc((1 - 1.2) * .5em);
  }
  .qualityTtl:after {
    margin-bottom: calc((1 - 1.2) * .5em);
  }
  .qualityTtl:before, .qualityTtl:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

@media screen and (max-width: 768px) {
  .qualityTtl {
    font-size: 28px;
    line-height: 1.5;
  }
  .qualityTtl:before {
    content: '';
    margin-top: calc((1 - 1.5) * .5em);
  }
  .qualityTtl:after {
    margin-bottom: calc((1 - 1.5) * .5em);
  }
  .qualityTtl:before, .qualityTtl:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

.qualityTtl.sai-animate {
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}

@media screen and (max-width: 768px) {
  .storageSect__head {
    padding-left: 40px;
  }
}

.storageSect__head .qualityTtl {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .storageSect__head .qualityTtl {
    width: 1000px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .storageSect__head .qualityTtl {
    width: 100%;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .storageSect__head .qualityTtl {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .storageSect__head .qualityTtl + .photo {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .storageSect__head .qualityTtl + .photo {
    margin-top: 40px;
  }
}

.storageSect__cont {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .storageSect__cont {
    width: 1076px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .storageSect__cont {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .storageSect__cont {
    padding: 0 40px;
  }
}

@media screen and (min-width: 768px) {
  .storageSect__cont .usableList__inner {
    gap: 80px 58px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .storageSect__cont .usableList__inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .storageSect__cont .usableList__inner {
    gap: 64px 24px;
  }
}

@media screen and (max-width: 768px) {
  .storageSect__cont .usableList__item {
    width: calc(50% - 12px);
  }
}

@media screen and (min-width: 768px) {
  .storageSect__cont .usableList__item--col {
    width: 540px;
  }
}

@media screen and (min-width: 768px) {
  .storageSect__cont .usableList__item--col .qualityCard {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
  }
}

@media screen and (min-width: 768px) {
  .storageSect__cont .usableList__item--col .qualityCard__ttl {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .storageSect__head + .storageSect__cont {
    margin-top: 140px;
  }
}

@media screen and (max-width: 768px) {
  .storageSect__head + .storageSect__cont {
    margin-top: 104px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect {
    margin: 0 auto;
    max-width: 1440px;
    padding: 120px 0 140px;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect {
    padding: 0 38px 64px;
  }
}

.toiletSect__head {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .toiletSect__head {
    width: 1284px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .toiletSect__head {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__head {
    display: grid;
    gap: 64px;
    grid-template-columns: 720px 1fr;
    grid-template-rows: 1fr auto;
    max-width: 100%;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .toiletSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect__head .qualityCard:not(:first-child) {
    margin-top: 104px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__head .qualityCard--powder {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect__head .qualityTtl + .qualityCard {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__cont {
    margin-top: 104px;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect__item .usableList {
    margin: 64px auto 0;
    max-width: 260px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__item .usableList__inner {
    gap: 58px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect__item .usableList__inner {
    gap: 64px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__item .usableList__item {
    width: 320px;
  }
}

@media screen and (min-width: 768px) {
  .toiletSect__item--onlySP {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .toiletSect__item--onlyPC {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .equipment-bath {
    padding-bottom: 140px;
  }
}

@media screen and (max-width: 768px) {
  .equipment-bath {
    padding-bottom: 64px;
  }
}

@media screen and (min-width: 768px) {
  .equipment-storage {
    padding-bottom: 140px;
  }
}

@media screen and (max-width: 768px) {
  .equipment-storage {
    padding-bottom: 64px;
  }
}

@media screen and (min-width: 768px) {
  .equipment-other {
    padding-bottom: 200px;
  }
}

@media screen and (max-width: 768px) {
  .equipment-other {
    padding-bottom: 104px;
  }
}

@media screen and (min-width: 768px) {
  .equipment-internet {
    padding-bottom: 200px;
  }
}

/* ---------- JS なし版：data-sai 共通の初期状態 ---------- */

/* すべての data-sai 要素を一旦透明に */
[data-sai] {
  opacity: 0;
}

/* 単純フェードイン */
[data-sai="fade"] {
  animation: sai-fade-in 0.8s ease-out forwards;
}

/* 上にふわっと（キャッチコピーなど用） */
[data-sai="fade-up"] {
  transform: translateY(20px);
  animation: sai-fade-up 0.8s ease-out forwards;
}

/* 左からスッと出る（ヘッダー背景用の代替） */
[data-sai="mask-fade-left"] {
  transform: translateX(-20px);
  animation: sai-mask-fade-left 0.9s ease-out forwards;
}

/* 見出し “KITCHEN / BATH ROOM …” の文字 */
[data-sai="target"] {
  animation: sai-fade-in 0.9s ease-out forwards;
}

/* ---------- キーフレーム ---------- */

@keyframes sai-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sai-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sai-mask-fade-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 全体のタイトル */
.keyVisual__ttl {
  /* ここに色を書いておいてもOK（inline style でも可） */
  /* color: #c8bb9b; */
  overflow: hidden; /* 多少のズレを隠す用（任意） */
	color:"#c8bb9b"
}

/* 英語の QUALITY を先にふわっと */
.keyVisual__ttl .en {
  display: block;
  transform: translateY(10px);
  animation: kv-en-fade 0.6s ease-out forwards;
}

/* 日本語の「美しい機能を装備」 */
.keyVisual__ttl .jp .t {
  display: inline-block;
  transform: translateY(10px);
  animation: kv-jp-fade 0.5s ease-out forwards;
	color:"#c8bb9b"
}

/* 1文字ずつディレイ（ここで順番に出す） */
.keyVisual__ttl .jp .t:nth-child(1) { animation-delay: 0.2s; }
.keyVisual__ttl .jp .t:nth-child(2) { animation-delay: 0.3s; }
.keyVisual__ttl .jp .t:nth-child(3) { animation-delay: 0.4s; }
.keyVisual__ttl .jp .t:nth-child(4) { animation-delay: 0.5s; }
.keyVisual__ttl .jp .t:nth-child(5) { animation-delay: 0.6s; }
.keyVisual__ttl .jp .t:nth-child(6) { animation-delay: 0.7s; }
.keyVisual__ttl .jp .t:nth-child(7) { animation-delay: 0.8s; }
.keyVisual__ttl .jp .t:nth-child(8) { animation-delay: 0.9s; }

/* キーフレーム：上にふわっと */
@keyframes kv-en-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kv-jp-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
	
	/* 全体のタイトル */
.keyVisual__ttl {
  overflow: hidden; /* ちょっとのズレを隠す用（任意） */
}

/* ===== 初期状態：まだ見えていないとき ===== */
.keyVisual__ttl .en,
.keyVisual__ttl .jp .t {
  display: inline-block;
  transform: translateY(10px); /* 下にちょっとずらす（右からにしたいなら X に変える） */
}

/* ===== 画面に入って .is-visible が付いたらアニメ開始 ===== */

/* 英語 QUALITY */
.keyVisual__ttl.is-visible .en {
  animation: kv-en-fade 0.6s ease-out forwards;
}

/* 日本語「美しい機能を装備」1文字ずつ */
.keyVisual__ttl.is-visible .jp .t {
  animation: kv-jp-fade 0.5s ease-out forwards;
}

/* 1文字ずつディレイ（順番に出す） */
.keyVisual__ttl.is-visible .jp .t:nth-child(1) { animation-delay: 0.1s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(2) { animation-delay: 0.2s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(3) { animation-delay: 0.3s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(4) { animation-delay: 0.4s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(5) { animation-delay: 0.5s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(6) { animation-delay: 0.6s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(7) { animation-delay: 0.7s; }
.keyVisual__ttl.is-visible .jp .t:nth-child(8) { animation-delay: 0.8s; }

/* キーフレーム（上にふわっと） */
@keyframes kv-en-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kv-jp-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
	

/* SPだけ改行 */
.only-sp { display: none; }
@media (max-width: 768px) {
  .only-sp { display: block; }
}

/* SPだけ改行 */
.only-sp { display: none; }
@media (max-width: 768px) {
  .only-sp { display: block; }
}

/* ここが背景＆全体の空気感 */
.tatemoji__desc {
  position: relative;
  overflow: hidden;
  color: #c9bc8f;                 /* 金色寄り */
  padding: clamp(64px, 10vw, 120px) 0;
  min-height: min(100svh, 720px); /* 画面高に応じてそれっぽく */
}

/* 布っぽいムラ：暗いグラデの層 */
.tatemoji__desc::before {
  content: "";
  position: absolute;
  inset: -20%;
  filter: blur(0.4px);
  opacity: 1;
}

/* さらに微細な繊維感：斜めストライプを薄く */
.tatemoji__desc::after {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0.25;
  transform: rotate(-8deg);
  filter: blur(1px);
  mix-blend-mode: overlay;
}

/* 中身 */
.tatemoji__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトル全体 */
.tatemoji__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0 auto;

  gap: clamp(24px, 4vw, 40px);
}

/* 英字：Cinzel＋下線 */
.tatemoji__ttl .en {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.18em;
  line-height: 1;
  padding-bottom: 10px;
  position: relative;

  /* 箔っぽいニュアンス */
  text-shadow:
    0 0 10px rgba(201, 188, 143, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.25);
}

.tatemoji__ttl .en::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% + 12px);
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}

/* 縦組み：明朝を強めに */
.tatemoji__ttl .jp {
  display: inline-block;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  font-weight: 500;
  font-size: clamp(24px, 4.3vw, 40px);
  letter-spacing: 0.05em;
  line-height: 1;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  perspective: 1000px;

  /* 金の立体感 */
  text-shadow:
    0 0 12px rgba(201, 188, 143, 0.14),
    0 1px 0 rgba(0, 0, 0, 0.28);
}

/* 1文字ずつアニメ（元CSSのまま寄せ） */
.tatemoji__ttl .jp .t {
  display: inline-block;
  opacity: 0;
  transform: translate(10px, -5px) rotateY(45deg);
  transform-style: preserve-3d;
  transition:
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tatemoji__ttl .jp.sai-animate .t {
  opacity: 1;
  transform: translate(0, 0) rotateY(0deg);
}

/* リード：下に配置して写真っぽい余白感 */
.tatemoji__lead {
  margin-top: clamp(48px, 7vw, 64px);
  text-align: center;

  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  font-weight: 400;

  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: clamp(0.05em, 0.2vw, 0.10em);

  line-height: 2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .tatemoji__lead { line-height: 3; }
}

/* fade-up対象の初期状態 */
[data-sai="fade-up_"] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0, 0, 1),
    transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}

/* 画面内に入ったら */
[data-sai="fade-up_"].sai-animate {
  opacity: 1;
  transform: translateY(0);
}

.tatemoji__desc { position: relative; }
.tatemoji__desc::before,
.tatemoji__desc::after {
  z-index: 0;
}
.tatemoji__inner {
  position: relative;
  z-index: 1;
}
.tatemoji__ttl .jp,
.tatemoji__ttl .jp .t {
  color: #d6caa3; /* 金色を明示 */
}

/* さらに読みやすく（箔っぽい縁＆発光） */
.tatemoji__ttl .jp {
  text-shadow:
    0 0 12px rgba(214, 202, 163, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.35);
}
	
	
/* ===== スマホで強制上書き（インライン対策） ===== */
@media (max-width: 767px) {
  .tatemoji__desc .tatemoji__inner{
    padding: 0 24px !important;
    text-align: center !important;
  }

  .tatemoji__desc .tatemoji__ttl{
    width: 100% !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .tatemoji__desc .tatemoji__ttl .en{
    font-size: 22px !important;
  }

  .tatemoji__desc .tatemoji__ttl .jp{
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.06em !important;
  }

  .tatemoji__desc .tatemoji__lead{
    font-size: 16px !important;
    line-height: 2.2 !important;
    max-width: 34em !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}