@charset "UTF-8";
/* will-change は付けっぱなしでも問題ない（微最適化） */
.ttl__clip { will-change: clip-path; }
/* 省エネ時や JS のクラス付与時に開く */
.ttl__clip.slid__open {
clip-path: inset(0% 0% 0% 0%);
transition: clip-path 0.6s cubic-bezier(0.18, 0.06, 0.23, 1);
}

/* 下線：初期は非表示 */
.ttl__clip__line {
width: 0;
opacity: 0;
height: 2px;
background: currentColor;
}

/* 画面インで線が走る */
.ttl__clip__line.slid__open {
width: 100%;
opacity: 1;
transition: all 0.4s cubic-bezier(0.18, 0.06, 0.23, 1);
}


/*背景テキスト*/
.scroll {
position: relative;
z-index: 5;
overflow: hidden;;
}
.scroll__wrap p {
font-size: 10rem;
font-weight: 900;
color: #222;
opacity: 1;
}



/*背景徐々に表示*/
.scroll__bg,
.scroll__bg2 {
/* 例：横方向に連続させる場合 */
background-repeat: repeat-x;
background-size: auto 100%;
/* 背景位置の初期値（JS側でも拾います） */
background-position: 0 50%;
/* 子要素を動かさないため transform は使わない */
/* position/overflow はレイアウトに応じて */
}

.scroll__bg {
position: relative;
padding: 32px 0 48px;
display: flex;
justify-content: space-between;
}

.scroll__bg .scroll__cover {
position: absolute;
top: 0;
left: 0;
z-index:0;
background-image: linear-gradient(133deg, #b40019 0%, #b40019 50%, black 100%);
transform-origin: left;
width: 100%;
height: 100%;
}

.scroll__bg2 {
position: relative;
padding: 32px 0 48px;
display: flex;
justify-content: space-between;
}

.scroll__bg2 .scroll__cover2 {
position: absolute;
top: 0;
left: 0;
z-index:0;
background-image:linear-gradient(133deg, #b40019 0%, #b40019 50%, black 100%);
transform-origin: left;
width: 100%;
height: 100%;
}

.text__up {
display: flex;
justify-content: center;
margin: 15% auto 16px;
overflow: hidden;
}
.text__up span {
display: block;
font-size: 3.5rem;
font-weight: bold;
letter-spacing: 0.04em;
}
.text__up__02 {
margin: 0 auto 25%;
}
.text__up__02 span {
font-size: 1.8rem;
}

/*画像が下から表示される*/
.flower {
padding: 22% 0;
background-color: #fff;
}
.flower__img {
width: 58.04688%;
position: relative;
}
.flower__img:nth-child(even) {
margin: 15% 0 15% auto;
}
.flower__img__02 {
width: 41.25%;
}
.flower__img__03 {
width: 48.125%;
margin-left: 8%;
}

.grid__img {
position: relative;
display: block;
background-color: #fff;
padding-top: 50%;
padding-bottom: 20%;
}
.grid__img__item {
position: absolute;
display: block;
overflow: hidden;
}
.grid__img__item::after {
content: "";
width: 100%;
height: 102%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
transform: translate3d(0, 0%, 0);
}
.grid__img__item.js-after::after {
transform: translate3d(0, -102%, 0);
}
.grid__img__item.js-after img {
opacity: 1;
transform: scale(1);
}
.grid__img__item img {
width: 100%;
height: 100%;
display: block;
opacity: 0;
transform: scale(1.3);
transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
object-fit: cover;
}
.grid__img__item__01 {
top: 0;
left: 8.28125%;
width: 25.46875%;
}
.grid__img__item__02 {
width: 42.8125%;
left: -9.0625%;
top: 26.25%;
height: 35%;
}
.grid__img__item__03 {
width: 27.5%;
left: 35%;
top: 0;
height: 74%;
}
.grid__img__item__04 {
width: 25.46875%;
right: 10.78125%;
top: 6.58824%;
}
.grid__img__item__05 {
width: 36.4%;
right: 0;
top: 33.17647%;
}

.js-fadeup {
position: relative;
overflow: hidden;
}
.js-fadeup::after {
content: "";
width: 100%;
height: 102%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
transform: translate3d(0, 0%, 0);
}
.js-fadeup.js-after::after {
transform: translate3d(0, -102%, 0);
}
.js-fadeup.js-after img {
opacity: 1;
transform: scale(1);
}
.js-fadeup img {
width: 100%;
height: auto;
display: block;
opacity: 0;
transform: scale(1.3);
transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
}