@charset "UTF-8";
/* ========================
  SETTING
======================== */
:root {
  --color-black: #555;
  --color-white: #fff;
  --color-base: var(--color-black);
  --color-bg: #E4E4E4;
}

/* ▼ -----------可変設定---------- ▼ */
.UU250822tulle {
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 450; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .UU250822tulle {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}
/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .UU250822tulle {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .UU250822tulle {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

/* ========================
  BG
======================== */
/* ========================
  RESET
======================== */
@media screen and (max-width: 767px) {
  .lp {
    padding-bottom: 0 !important;
  }
  .home-content.support-content {
    margin-top: 0 !important;
  }
}
@media screen and (min-width: 768px) {
  body {
    padding-top: 16.3rem;
  }
}
/* ========================
  COMMON
======================== */
body {
  background-color: var(--color-bg);
}

.UU250822tulle {
  color: var(--color-base);
  font-feature-settings: "palt";
  text-justify: inter-ideograph;
  text-align: center;
  width: 100%;
  margin-inline: auto;
}
.UU250822tulle img {
  display: block;
  width: 100%;
}
.UU250822tulle__section--img-box > div {
  position: relative;
  background-color: var(--color-bg);
}
.UU250822tulle__section--img-box > div:first-of-type {
  z-index: 2;
}
.UU250822tulle__section--img-box > div:last-of-type {
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .UU250822tulle {
    overflow: hidden;
  }
  .UU250822tulle a:hover {
    opacity: 1;
  }
  .UU250822tulle .pcOnly {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .UU250822tulle .spOnly {
    display: none !important;
  }
  .UU250822tulle::-webkit-scrollbar {
    display: none;
  }
  .UU250822tulle__contents--wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .UU250822tulle__section--wrap {
    width: 50%;
  }
  .UU250822tulle__section--inner {
    width: calc(450 * var(--formula_pc));
    margin: 0 auto;
  }
}

/* ========================
  FADE IN
======================== */
.UU250822tulle .js-fadeIn-load,
.UU250822tulle .js-fadeIn-scroll-load {
  transform: translate3d(0, 0, 0);
  transition: all 1.2s;
  opacity: 0;
}

.UU250822tulle .js-fadeIn-scroll-normal,
.UU250822tulle .js-fadeIn-scroll-fromLeft,
.UU250822tulle .js-fadeIn-scroll-fromRight {
  transition: all 1.5s;
  opacity: 0;
}
.UU250822tulle .js-fadeIn-load.isActive,
.UU250822tulle .js-fadeIn-scroll-load.isActive {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.UU250822tulle .js-fadeIn-scroll-normal.isActive,
.UU250822tulle .js-fadeIn-scroll-fromLeft.isActive,
.UU250822tulle .js-fadeIn-scroll-fromRight.isActive {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.UU250822tulle .js-fadeIn-scroll-normal {
  transform: translate3d(0, -4rem, 0);
}
.UU250822tulle .js-fadeIn-scroll-fromLeft {
  transform: translate3d(-4rem, 0, 0);
}
.UU250822tulle .js-fadeIn-scroll-fromRight {
  transform: translate3d(4rem, 0, 0);
}

.UU250822tulle .js-delay-show4 {
  transition-delay: 1s;
}

@media screen and (min-width: 768px) {
}

/* ========================
  SECTION TITLE
======================== */
.UU250822tulle__section h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--formula));
  font-size: calc(32 * var(--formula));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
}
.UU250822tulle__section h4::before {
  content: "";
  display: block;
  background-size: contain !important;
}

@media screen and (min-width: 768px) {

}
/* ========================
  FIRST VIEW
======================== */
.UU250822tulle__leadText {
  padding-top: calc(62 * var(--formula));
}
.UU250822tulle__leadText h2 {
  font-size: calc(38 * var(--formula));
  font-weight: 400;
  line-height: 2.1052631579;
  letter-spacing: 0.13em;
}
.UU250822tulle__leadText h3 {
  margin-top: calc(34 * var(--formula));
  font-size: calc(24 * var(--formula));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
}
.UU250822tulle__leadText p {
  margin-top: calc(42 * var(--formula));
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: 0.1em;
}
.UU250822tulle__leadText p:nth-of-type(2) {
  margin-top: calc(40 * var(--formula));
}

@media screen and (min-width: 768px) {
  .UU250822tulle__mainVisual {
    position: relative;
    width: 50%;
  }
  .UU250822tulle__mainVisual--img {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .UU250822tulle__mainVisual--inner {
    position: sticky;
    top: var(--header-height);
    left: 0;
    height: calc(100vh - var(--header-height));
    z-index: 1;
  }
  .UU250822tulle__mainVisual--inner img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -o-object-position: top;
       object-position: top;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .UU250822tulle__mainVisual--text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(150 * var(--formula_pc));
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.2s;
    z-index: 1;
  }
  .UU250822tulle__mainVisual--text.isActive {
    opacity: 1;
  }
  .UU250822tulle__mainVisual--text > p {
    color: var(--color-white);
  }
  .UU250822tulle__mainVisual--text > p:first-of-type {
    font-size: calc(28 * var(--formula_pc));
    line-height: 1;
    letter-spacing: 0.18em;
  }
  .UU250822tulle__mainVisual--text > p:last-of-type {
    font-size: calc(24 * var(--formula_pc));
    line-height: 2.2;
    letter-spacing: 0.12em;
  }
  .UU250822tulle__leadText {
    padding-top: calc(68 * var(--formula_pc));
  }
}
@media screen and (min-width: 1401px) {
  .UU250822tulle__mainVisual--inner img {
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
  }
}
/* ========================
  GRAY
======================== */
.UU250822tulle__gray {
  padding-top: calc(152 * var(--formula));
}
.UU250822tulle__gray h4::before {
  width: calc(47 * var(--formula));
  height: calc(55 * var(--formula));
  background: url(../img/gray.png) no-repeat center;
}
.UU250822tulle__gray--img1 {
  width: calc(660 * var(--formula));
  margin: calc(65 * var(--formula)) auto 0;
}
.UU250822tulle__gray--img2 {
  width: calc(570 * var(--formula));
  margin: calc(80 * var(--formula)) auto 0 0;
}
.UU250822tulle__gray--img3 {
  width: calc(570 * var(--formula));
  margin: calc(40 * var(--formula)) 0 0 calc(180 * var(--formula));
}

@media screen and (min-width: 768px) {

}
/* ========================
  WHITE
======================== */
.UU250822tulle__white {
  padding-top: calc(168 * var(--formula));
}
.UU250822tulle__white h4 {
  justify-content: flex-end;
  padding-right: calc(56 * var(--formula));
}
.UU250822tulle__white h4::before {
  width: calc(50 * var(--formula));
  height: calc(52 * var(--formula));
  background: url(../img/white.png) no-repeat center;
}
.UU250822tulle__white--img1 {
  width: calc(630 * var(--formula));
  margin: calc(65 * var(--formula)) auto 0;
}
.UU250822tulle__white--img2 {
  width: calc(510 * var(--formula));
  margin: calc(60 * var(--formula)) auto 0 calc(180 * var(--formula));
}

@media screen and (min-width: 768px) {

}
/* ========================
  BROWN
======================== */
.UU250822tulle__brown {
  padding-top: calc(167 * var(--formula));
}
.UU250822tulle__brown h4 {
  justify-content: flex-start;
  margin-left: calc(46 * var(--formula));
}
.UU250822tulle__brown h4::before {
  width: calc(52 * var(--formula));
  height: calc(50 * var(--formula));
  background: url(../img/brown.png) no-repeat center;
}
.UU250822tulle__brown--img1 {
  width: calc(750 * var(--formula));
  margin: calc(68 * var(--formula)) auto 0;
}
.UU250822tulle__brown--img2 {
  width: calc(570 * var(--formula));
  margin: calc(80 * var(--formula)) 0 0 calc(180 * var(--formula));
}
.UU250822tulle__brown--img3 {
  width: calc(570 * var(--formula));
  margin: calc(40 * var(--formula)) auto 0 calc(45 * var(--formula));
}

@media screen and (min-width: 768px) {

}

/* ========================
  end
======================== */
.UU250822tulle__end {
  padding-top: calc(160 * var(--formula));
}

/* ========================
  VIEW All
======================== */
.UU250822tulle__viewAll {
    margin: calc(100 * var(--formula)) auto calc(120 * var(--formula));
    width: calc(540 * var(--formula));
    height: calc(80 * var(--formula));
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: calc(18 * var(--formula)); */
    background-color: #f1f1f1;
}
.UU250822tulle__viewAll > a {
  margin: auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "メイリオ", sans-serif;
  font-size: calc(22 * var(--formula));
  line-height: 1;
  letter-spacing: 0.075em;
  padding-top: calc(6 * var(--formula));
  margin-left: calc(138 * var(--formula));
}
.UU250822tulle__viewAll > a > span {
  position: relative;
}
.UU250822tulle__viewAll > a > span::before, .UU250822tulle__viewAll > a > span::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(14 * var(--formula));
  width: calc(10 * var(--formula));
  height: 1px;
  background-color: #555;
  z-index: 1;
}
.UU250822tulle__viewAll > a > span::before {
  top: calc(7 * var(--formula));
  transform: rotate(45deg);
}
.UU250822tulle__viewAll > a > span::after {
  top: calc(14 * var(--formula));
  transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
  .UU250822tulle__viewAll{
    margin: calc(100 * var(--formula)) auto calc(166 * var(--formula));
  }
}