@charset "UTF-8";

/* 
## 基本

アニメーションさせたい親要素に `js-title-anim` を付けます。

```html
<section class="anim-title anim-title--line js-title-anim">
  ...
</section>
```

画面に表示されたら `is-active` が自動で付き、1回だけ発動。

## 命名ルール

- `anim-title`：共通
- `anim-title__logo`：ロゴ
- `anim-title__en`：英字
- `anim-title__jp`：日本語
- `anim-title__line`：ライン
- `anim-title--line`：ロゴ＋英字＋日本語＋下線
- `anim-title--merge`：ロゴ回転＋左右合流
- `anim-title--stack`：ロゴ回転＋英字横＋日本語下
- `anim-title--dot-right`：ロゴ無し＋右丸
- `anim-title--dot-left`：ロゴ無し＋左丸
- `anim-title--jp-dot-left`：ロゴ無し＋英字無し＋左丸

*/

/* common */
.anim-title {
}

.anim-title__row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.anim-title__top {
	/*display: flex;
	align-items: center;*/
}

.anim-title__inner {
	position: relative;
}

.anim-title__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: url("../img/cmn_logo_f.svg") no-repeat center / cover;
	aspect-ratio: 150 / 150; 
	width: 26px;
	height: auto;
}
.anim-title__logo.wht {
	background: url("../img/cmn_logo_f_white.svg") no-repeat center / cover;
}

.anim-title__en {
	/*font-size: 13px;
	letter-spacing: .24em;
	color: #777;
	white-space: nowrap;*/
}
.anim-title__jp {
	/*margin: 0;
	font-size: clamp(32px, 5.6vw, 56px);
	letter-spacing: .08em;
	line-height: 1.25;*/
}

.anim-title__line,
.title-line {
	display: block;
	width: 0;
	height: 1px;
	background: var(--main);
}

@media screen and (max-width: 768px) {
	.anim-title__row {
		gap: 10px 5px;
	}
	.anim-title__logo {
		width: 22px;
	}
}


/* pattern01：ロゴ＋英字＋日本語＋下線 */
.anim-title--line .anim-title__row {
	position: relative;
}
.anim-title--line .anim-title__line {
	position: absolute;
	left: 0;
	bottom: 0;
}
.anim-title--line .anim-title__logo,
.anim-title--line .anim-title__en,
.anim-title--line .anim-title__jp {
	opacity: 0;
	transform: translateY(12px);
}
.anim-title--line.is-active .anim-title__logo {
	animation: titleLogoUp .55s ease forwards .1s;
}
.anim-title--line.is-active .anim-title__en {
	animation: titleUp .55s ease forwards .28s;
}
.anim-title--line.is-active .anim-title__jp {
	animation: titleUp .65s ease forwards .5s;
}
.anim-title--line.is-active .anim-title__line {
	animation: titleLine .8s cubic-bezier(.22, 1, .36, 1) forwards .35s;
}


/* pattern02：ロゴ回転＋英字・日本語が左右から合流 */
.anim-title--merge .anim-title__logo {
	opacity: 0;
	transform: rotate(-135deg) scale(.7);
}
.anim-title--merge .anim-title__en {
	opacity: 0;
	transform: translateX(-34px);
}
.anim-title--merge .anim-title__jp {
	opacity: 0;
	transform: translateX(42px);
	padding: 0 0 0 20px;
}
.anim-title--merge.is-active .anim-title__logo {
	animation: titleLogoSpin .8s cubic-bezier(.22, 1, .36, 1) forwards .1s;
}
.anim-title--merge.is-active .anim-title__en {
	animation: titleFromLeft .7s cubic-bezier(.22, 1, .36, 1) forwards .45s;
}
.anim-title--merge.is-active .anim-title__jp {
	animation: titleFromRight .8s cubic-bezier(.22, 1, .36, 1) forwards .58s;
}

@media screen and (max-width: 768px) {
	.anim-title--merge .anim-title__jp {
		padding: 0;
	}
}


/* pattern03：ロゴ回転＋英字横から＋日本語下から */
.anim-title--stack .anim-title__logo {
	opacity: 0;
	transform: rotate(-135deg) scale(.7);
}
.anim-title--stack .anim-title__en {
	opacity: 0;
	transform: translateX(-34px);
}
.anim-title--stack .anim-title__jp {
	opacity: 0;
	transform: translateY(28px);
}
.anim-title--stack.is-active .anim-title__logo {
	animation: titleLogoSpin .8s cubic-bezier(.22, 1, .36, 1) forwards .1s;
}
.anim-title--stack.is-active .anim-title__en {
	animation: titleFromLeft .7s cubic-bezier(.22, 1, .36, 1) forwards .45s;
}
.anim-title--stack.is-active .anim-title__jp {
	animation: titleFromBottom .8s cubic-bezier(.22, 1, .36, 1) forwards .65s;
}


/* pattern04：ライン単体 */
.is-active .title-line,
.title-line.is-active {
	animation: titleLine .9s cubic-bezier(.22, 1, .36, 1) forwards;
}


/* pattern05・06：ロゴ無し＋英字＋日本語＋丸付きライン */
.anim-title--dot-right .anim-title__inner,
.anim-title--dot-left .anim-title__inner {
	display: flex;
	align-items: center;
	/*gap: 22px;
	padding-bottom: 18px;*/
}
.anim-title--dot-right .anim-title__line,
.anim-title--dot-left .anim-title__line {
	position: absolute;
	left: 0;
	bottom: 0;
}
.anim-title--dot-right .anim-title__en,
.anim-title--dot-left .anim-title__en {
	opacity: 0;
	transform: translateX(-34px);
}
.anim-title--dot-right .anim-title__jp,
.anim-title--dot-left .anim-title__jp {
	opacity: 0;
	transform: translateY(16px);
}
.anim-title--dot-right .anim-title__line::after,
.anim-title--dot-left .anim-title__line::before {
	content: "";
	position: absolute;
	top: 49%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--main);
	opacity: 0;
	transform: translateY(-50%) scale(.4);
}
.anim-title--dot-right .anim-title__line::after {
	right: -5px;
}
.anim-title--dot-left .anim-title__line::before {
	left: -5px;
}
.anim-title--dot-right.is-active .anim-title__en,
.anim-title--dot-left.is-active .anim-title__en {
	animation: titleFromLeft .7s cubic-bezier(.22, 1, .36, 1) forwards .15s;
}
.anim-title--dot-right.is-active .anim-title__jp,
.anim-title--dot-left.is-active .anim-title__jp {
	animation: titleFromBottomSmall .7s cubic-bezier(.22, 1, .36, 1) forwards .38s;
}
.anim-title--dot-right.is-active .anim-title__line,
.anim-title--dot-left.is-active .anim-title__line {
	animation: titleLine .85s cubic-bezier(.22, 1, .36, 1) forwards .45s;
}
.anim-title--dot-right.is-active .anim-title__line::after {
	animation: titleDot .35s ease forwards 1.15s;
}
.anim-title--dot-left.is-active .anim-title__line::before {
	animation: titleDot .35s ease forwards .45s;
}


/* pattern07：ロゴ無し＋英字無し＋日本語＋左丸ライン */
.anim-title--jp-dot-left .anim-title__inner {
	display: inline-block;
    width: 100%;
	/*padding-bottom: 18px;
	min-width: min(620px, 100%);*/
}
.anim-title--jp-dot-left .anim-title__line {
	position: absolute;
	left: 0;
	bottom: 0;
}
.anim-title--jp-dot-left .anim-title__jp {
	opacity: 0;
	transform: translateY(16px);
}
.anim-title--jp-dot-left .anim-title__line::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--main);
	opacity: 0;
	transform: translateY(-50%) scale(.4);
}
.anim-title--jp-dot-left.is-active .anim-title__jp {
	animation: titleFromBottomSmall .7s cubic-bezier(.22, 1, .36, 1) forwards .15s;
}
.anim-title--jp-dot-left.is-active .anim-title__line {
	animation: titleLine .85s cubic-bezier(.22, 1, .36, 1) forwards .35s;
}
.anim-title--jp-dot-left.is-active .anim-title__line::before {
	animation: titleDot .35s ease forwards .35s;
}


/* pattern08：ロゴ無し＋英字無し＋日本語＋右丸ライン */
.anim-title--jp-dot-right .anim-title__inner {
	display: inline-block;
    width: 100%;
}
.anim-title--jp-dot-right .anim-title__line {
	position: absolute;
	left: 0;
	bottom: 0;
}
.anim-title--jp-dot-right .anim-title__jp {
	opacity: 0;
	transform: translateY(16px);
}
.anim-title--jp-dot-right .anim-title__line::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--main);
	opacity: 0;
	transform: translateY(-50%) scale(.4);
}
.anim-title--jp-dot-right.is-active .anim-title__jp {
	animation: titleFromBottomSmall .7s cubic-bezier(.22, 1, .36, 1) forwards .15s;
}
.anim-title--jp-dot-right.is-active .anim-title__line {
	animation: titleLine .85s cubic-bezier(.22, 1, .36, 1) forwards .35s;
}
.anim-title--jp-dot-right.is-active .anim-title__line::after {
	animation: titleDot .35s ease forwards 1.1s;
}


/* pattern09：下からスッと表示 */
.anim-title--slide-up .anim-title__jp {
	overflow: hidden;
}
.anim-title--slide-up .anim-title__jp span {
	display: inline-block;
	opacity: 0;
	transform: translateY(100%);
}
.anim-title--slide-up.is-active .anim-title__jp span {
	animation: titleSlideUp .85s cubic-bezier(.22, 1, .36, 1) forwards .3s;
}


/* keyframes */
@keyframes titleLogoUp {
	from {
		opacity: 0;
		transform: translateY(12px) rotate(-135deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes titleUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes titleLine {
	to {
		width: 100%;
	}
}

@keyframes titleLogoSpin {
	from {
		opacity: 0;
		transform: rotate(-135deg) scale(.7);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

@keyframes titleFromLeft {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes titleFromRight {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes titleFromBottom {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes titleFromBottomSmall {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes titleDot {
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

@keyframes titleSlideUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}