@charset "UTF-8";
/* CSS Document */
/*
    sc_gotochi_top
-----------------------------------------------------------------------------------------------*/

/* ============================================================================
   kv
============================================================================ */
/* 船動き */
@keyframes sway {
    0% {
        transform: translateX(-50%) rotate(-4deg); /* ←左：強め */
    }
    100% {
        transform: translateX(-50%) rotate(1deg); /* ←右：優しめ */
    }
}

/* ============================================================================
   Place Box Hover
============================================================================ */

[class^="placeBox"] > li {
	transition: transform 0.45s cubic-bezier(.25, .46, .45, .94);
}

/* [class^="placeBox"] > li:hover {
	transform: scale(1.1);
} */

/* ============================================================================
   About
============================================================================ */
/* フェードアニメーション（スライド用） */
@keyframes fade {
	0%   { opacity: 0; }
	12%  { opacity: 1; }
	35%  { opacity: 1; }
	45%  { opacity: 0; }
	100% { opacity: 0; }
}

/* ============================================================================
   Common Animation
============================================================================ */
/* アニメーション起点 */
.jsAnm {
	opacity: 0;
}

/* フェードイン */
.anmFadeIn.jsAnmStart {
	animation: anmFadeIn 1s ease 0.5s forwards;
}

@keyframes anmFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* 下からふわっと */
.anmFadeUp.jsAnmStart,
.anmFadeUp01.jsAnmStart,
.anmFadeUp02.jsAnmStart,
.anmFadeUp03.jsAnmStart,
.anmFadeUp04.jsAnmStart {
	animation: anmFadeUp 1s ease 0.5s forwards;
}

/* ディレイ */
.anmFadeUp02.jsAnmStart { animation-delay: 0.8s; }
.anmFadeUp03.jsAnmStart { animation-delay: 1.1s; }
.anmFadeUp04.jsAnmStart { animation-delay: 0.6s; }

@keyframes anmFadeUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ループ：上下ふわふわ */
@keyframes anmUpDownLoop {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(15px); }
	100% { transform: translateY(0); }
}


/* ============================================================================
   Page全体
============================================================================ */

#contents {
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.2s forwards;
}



/* タッチデバイス（スマホ・タブレット）で:hoverを無効化（上書き） */
/* @media (hover: none) { 
	[class^="placeBox"] > li:hover {
		transform: initial;
	}
} */
/* ポインターが正確な（PCなど）デバイス向けのスタイル */
@media (hover: hover) and (pointer: fine) {
	[class^="placeBox"] > li:hover {
		transform: scale(1.1);
	}
}