@charset "utf-8";

/* CSS Document */

/* ======================================================
	[animation]
	@import"../css/test_line.css";
====================================================== */



.animation,
button,
input,
html:not(.resize) :is(
	.Hover a,
	.Zoom a img,
	.Header,
/*	.MenuOn,*/
	.details .detail
),
:before,
:after,
/*
.Btn,
.ColorBtn,
.scroll .Header,
.scroll .Header:before,
.GlobalMenu *,
.Header:before,
.Header .GlobalMenu :where(a, .a):after,
*/
.Hover.slider+.thumbnail .Item,
.sideArea,
.Logo .Img img
{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/*
.ColorBtn:after
{
	transition: all 0.25s ease-in-out;
}
*/

.pswp,
.Header .GlobalMenu .Child,
.Header .GlobalMenu .Child ul,
.Header .GlobalMenu .Child li,
.Header .GlobalMenu .ChildOn a:before
{
	transition: all 0.5s ease-in-out;
}
/*
html:not(.resize) .Header:before
{
	transition: all 1s ease-in-out;
}
*/
html:not(.resize) :is(
	.Drawer .toggle .Btn span,
	.Drawer .Menu .ChildOn .Btn:before,
	.Drawer .Menu .ChildOn .Btn:after
)
{
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.pswp__container
{
}


/* ============================================================================================================
	【CSS animation】CSSだけで作るループアニメーション
	https://qiita.com/kabechiyo13/items/b213e65808cfc2d50096
------------------------------------------------------------------------------------------------------------ */
.scroll_loop
{
	--scroll_loop_speed	: 30s;

	display: flex;
	width: 100%;
	text-align: left;
}
/*
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
*/
/*
[241120]　gap作るとパチッとなる
	gap: var(--gap);
*/

/* 右へ流す */
@keyframes  loop_animation_right_double
{
	0%
	{
		-moz-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	
	100%
	{
		-moz-transform: translateX(0%);
		transform: translateX(0%);
	}
}

/* 左へ流す */
@keyframes  loop_animation_left_double
{
	0%
	{
		-moz-transform: translateX(0%);
		transform: translateX(0%);
	}
	
	100%
	{
		-moz-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.scroll_loop_item
{
	white-space: nowrap;
}
/*
[241120]　gap作るとパチッとなる代わりに、paddingで隙間　※
	padding-left: 3em;
	margin-right: var(--gap);
*/


.scroll_loop.to_R .scroll_loop_item
{
	-moz-animation: loop_animation_right_double var(--scroll_loop_speed) linear infinite;
	animation: loop_animation_right_double var(--scroll_loop_speed) linear infinite;
}

.scroll_loop.to_L .scroll_loop_item
{
	-moz-animation: loop_animation_left_double var(--scroll_loop_speed) linear infinite;
	animation: loop_animation_left_double var(--scroll_loop_speed) linear infinite;
}

/* speed */
.scroll_loop.s2
{
	--scroll_loop_speed	: 60s;
}
.scroll_loop.s3
{
	--scroll_loop_speed	: 90s;
}
.scroll_loop.s4
{
	--scroll_loop_speed	: 120s;
}
.scroll_loop.s5
{
	--scroll_loop_speed	: 150s;
}
.scroll_loop.s6
{
	--scroll_loop_speed	: 180s;
}
.scroll_loop.s7
{
	--scroll_loop_speed	: 210s;
}


/* 画像の場合 */
.scroll_loop.img
{
	--wave_aspect_ratio		: 1 / 1;
	
	width: 200svw;
	height: auto;
}

.scroll_loop.img>*
{
	width: 100%;
}

.scroll_loop.img .scroll_loop_item,
.scroll_loop.img .scroll_loop_item>.Wrap
{
	height: 100%;
}

.scroll_loop.img .scroll_loop_item,
.scroll_loop.img .scroll_loop_item img
{
	aspect-ratio: var(--wave_aspect_ratio);
}

.scroll_loop.img .scroll_loop_item img
{
	width: 100%;
}

/* 画像の場合　配列(複数) */
.scroll_loop.img_group .scroll_loop_item
{
	display: flex;
	align-items: center;
}


/* 1つでループ */
.scroll_loop_single
{
	--scroll_loop_speed	: 30s;

	width: 100%;
	overflow: hidden;
	text-align: left;
}

@keyframes loop_animation_right
{
	0% {
		-moz-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-moz-transform: translateX(100%);
		transform: translateX(100%);
	}
}

.scroll_loop_single>*
{
	-moz-animation: loop_animation_right var(--scroll_loop_speed) linear infinite;
	animation: loop_animation_right var(--scroll_loop_speed) linear infinite;
	width: 100%;
}


/* ============================================================================================================
	その場で回転
------------------------------------------------------------------------------------------------------------ */
/* 一定速度で回転させる */
.spin
{
	animation: rotateR 120s linear infinite;
}
@keyframes rotateR
{
	from
	{
		rotate: 0deg;
	}
	to
	{
		rotate: 360deg;
	}
}

.spin_return
{
	animation: rotateL 90s linear infinite;
}
@keyframes rotateL
{
	from
	{
		rotate: -0deg;
	}
	to
	{
		rotate: -360deg;
	}
}


/* 緩急をつけて回転させる */
.spin_sf
{
	animation: rotateR_spin_sf 120s ease-in-out infinite;
}
@keyframes rotateR_spin_sf
{
	from
	{
		rotate: 0deg;
	}

	to
	{
		rotate: 360deg;
	}
}

.spin_return_sf
{
	animation: rotateL_spin_sf 30s ease-in-out infinite;
}
@keyframes rotateL_spin_sf
{
	from
	{
		rotate: -0deg;
	}

	to
	{
		rotate: -360deg;
	}
}

/* ============================================================================================================
	star
------------------------------------------------------------------------------------------------------------ */
/* 星空の背景のスタイル */
.stars
{
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* 星のスタイル */
.stars .star
{
	display: block;
	position: absolute;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	border-radius: 100em;
	opacity: 0;

	filter: drop-shadow(3px 3px 4px rgb(0 0 0 / 0.4));
	animation: twinkle 5s infinite;
}
/*
	background-color: rgb(255 255 255 / 0.1); / 星の色 /
	box-shadow: 0 0 0px 1px rgb(255 255 255 / 0.8); / 星の影 /
*/

.stars1 .star
{
	background-image: url(../img/bubble_line01.svg);
}
.stars2 .star
{
	background-image: url(../img/bubble_line02.svg);
}
.stars3 .star
{
	background-image: url(../img/bubble_line03.svg);
}
.stars4 .star
{
	background-image: url(../img/bubble_line04.svg);
}
:is(.stars_img1, .stars_img2)
{
	opacity: 0.5;
}
:is(.stars_img1, .stars_img2) .star
{
	background-image: url(../img/bubble_color.png);
}

@keyframes twinkle {
	0% {
		opacity: 0;
		rotate: 0deg;
		transform: translateY(1em);
	}

	33% {
		transform: translateX(-1em);
	}

	50% {
		scale: 1.1;
		opacity: 1;
	}

	33% {
		transform: translateX(1em);
	}

	100% {
		scale: 1;
		opacity: 0;
		transform: translateY(-1em);
	}
}
/* 星がキラキラ光るアニメーション 
@keyframes twinkle {
	0% {
		opacity: 0;
	}

	50% {
		transform: scale(1.1);
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}
*/


/* ============================================================================================================
	contents fade in
------------------------------------------------------------------------------------------------------------ */
html:not(.resize) .fade .plugin:not(class*=[ plugin])
{
	opacity: 0;
	transform: translateY(5em);
	transition: all 0.5s ease-in-out;
}
/*
*/

/* 画面に入った時の動き */
html:not(.resize) .fade .plugin:not(class*=[ plugin]).fadeIn
{
	opacity: 1;
	transform: translateY(0);
}

html:not(.resize) .fade .plugin:not(class*=[ plugin]).fadeIn>*
{
	transform: none;
	transition: none;
}


@media print {
	.fade .plugin:not(class*=[ plugin])
	{
		opacity: 1.0;
		transform: none;
		transition: none;
	}
	
	/* 画面に入った時の動き */
	.fade .plugin:not(class*=[ plugin]).fadeIn
	{
		opacity: 1.0;
		transform: none;
	}
}

/*
[231102]　★未決★
	【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。
	https://qiita.com/degudegu2510/items/eae9e32eeea9ac3a0abb

body
{
	height: 200vh;
}

@keyframes scroll-anim {
	from {
		opacity: 0;
		transform: translateY(5em);
	}
	to {
		opacity: 1;
		transform: translateY(0em);
	}
}

.plugin {
	animation: scroll-anim linear;
	animation-timeline: view();
	animation-range: entry 25% cover 50%;
}

*/


/* ============================================================================================================
	[240219]　透過だけ
	contents fade in
------------------------------------------------------------------------------------------------------------ */
html:not(.resize) .fade .plugin_opacity
{
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
/*
*/

/* 画面に入った時の動き */
html:not(.resize) .fade .plugin_opacity.fadeIn
{
	opacity: 1;
}

html:not(.resize) .fade .plugin_opacity.fadeIn>*
{
	transition: none;
}


@media print {
	.fade .plugin_opacity
	{
		opacity: 1.0;
		transition: none;
	}
	
	/* 画面に入った時の動き */
	.fade .plugin_opacity.fadeIn
	{
		opacity: 1.0;
	}
}


/* ============================================================================================================
	[240219]　左右に
	contents fade in
------------------------------------------------------------------------------------------------------------ */
html:not(.resize) .fade .plugin_slide
{
	opacity: 0;
	transition: all 1s ease-in-out;
}
/*
*/

html:not(.resize) .fade .plugin_slide.odd
{
	transform: translateX(-50vw);
}

html:not(.resize) .fade .plugin_slide.even
{
	transform: translateX(50vw);
}

/* 画面に入った時の動き */
html:not(.resize) .fade .plugin_slide.fadeIn
{
	opacity: 1;
	transform: translateX(0);
}

html:not(.resize) .fade .plugin_slide.fadeIn>*
{
	transform: none;
	transition: none;
}


@media print {
	.fade .plugin_slide
	{
		opacity: 1.0;
		transform: none;
		transition: none;
	}
	
	/* 画面に入った時の動き */
	.fade .plugin_slide.fadeIn
	{
		opacity: 1.0;
		transform: none;
	}
}



/* ------------------------------------------------------------------------------------------------------------
	<index> <img>square
	------------------------------------------------------
	CSSで四角形描画アニメーション
	https://qiita.com/junya/items/bf9c30db5d9086566408
.Index .Ct .fadeIn a .Img
{
}

.Index .Ct .fadeIn a .Img:after
{
	border-width: 0;
	background-image: 
		linear-gradient(00deg, black, black),
		linear-gradient(00deg, black, black),
		linear-gradient(00deg, black, black),
		linear-gradient(00deg, black, black)
	;
	background-repeat: no-repeat;
	background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
	background-position: left bottom, left top, right top, right bottom;

	animation: img_border 2s linear forwards;
}
@keyframes img_border	{
	00%
	{
		background-size: 
		1px 0, 0 1px,
		1px 0, 0 1px; 
	}
	25%
	{
		background-size: 
		1px 100%, 0 1px,
		1px 0, 0 1px;
	}
	50%
	{
		background-size: 
		1px 100%, 100% 1px,
		1px 0, 0 1px;
	}
	75%
	{
		background-size: 
		1px 100%, 100% 1px,
		1px 100%, 0 1px;
	}
	100%
	{
		background-size: 
		1px 100%, 100% 1px,
		1px 100%, 100% 1px;
	}
}
*/


/* ------------------------------------------------------------------------------------------------------------
	<index> ColorBtn
*/
.Index .Ct .fadeIn a .ColorBtn
{
}

.Index .Ct .fadeIn a .ColorBtn .arrow
{
	animation-name: bnt_arrow;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0;
	transform: translateX(-10em);
}
@keyframes bnt_arrow	{
	0%
	{
	}
	
	75%
	{
		transform: translateX(-10em);
		opacity: 0;
	}
	
	100%
	{
		transform: translateX(0%);
		opacity: 1.0;
	}
}


/* ------------------------------------------------------------------------------------------------------------
	<index> top
.top_animation
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	animation-name: top_animation;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes top_animation	{
	0%
	{
		background-color: rgb(var(--bk));
	}
	
	90%
	{
		background-color: rgb(var(--bk));
	}
	
	100%
	{
		background-color: rgb(var(--bk) / 0);
	}
}

.top_animation .object
{
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.top_animation .square
{
	border-width: 1px;
	
	animation-name: square;
	animation-duration: 2s;
}
@keyframes square	{
	0%
	{
		width: 0;
		height: 0;
		border-color: rgb(var(--w));
		rotate: -45deg;
	}
	
	25%
	{
		width: 10em;
		height: 10em;
		rotate: 100deg;
		border-color: rgb(var(--w) / 0.5);
	}
	
	75%
	{
		width: 2em;
		height: 2em;
		rotate: -190deg;
		border-color: rgb(var(--w));
	}
	
	100%
	{
		width: calc(100% - (1em * 2));
		height: calc(100vh - (1em * 2));
		transform: none;
		border-color: rgb(var(--w) / 0.5);
	}
}

.top_animation .geometry
{
	font-size: 3em;
	position: absolute;
	left: 5vw;
	top: 5vw;
	opacity: 0;
	
	animation-name: geometry;
	animation-duration: 5s;
}
@keyframes geometry {
	75%
	{
		opacity: 0;
	}
	
	100%
	{
		opacity: 1.0;
	}
}
*/


/* ------------------------------------------------------
	[230912]
	立方体を描画してみよう！CSSだけで3D表現【フロントエンド】
	https://qiita.com/AO2324/items/0619a0e9173fda7141a1
.top_animation .geometry>*
{
	transform-style: preserve-3d;
	width: 4em;
	height: 4em;
	animation: cube 30s linear 0s infinite normal none running;
}
@keyframes cube {
	0%
	{
		transform:rotateX(0deg) rotateY(0deg);
	}
	
	100%
	{
		transform:rotateX(360deg) rotateY(360deg);
	}
}
.top_animation .geometry>*>*
{
	position: absolute;
	width: 100%;
	height: 100%;
	border-width: 1px;
	border-color: rgb(var(--w) / 0.5);
	background-color: rgb(var(--bk) / 0.05);
}

.top_animation .geometry>*>.top
{
	transform:translateY(3em) rotateX(-90deg);
}

.top_animation .geometry>*>.bottom
{
	transform:translateY(-3em) rotateX(90deg);
}

.top_animation .geometry>*>.front
{
	transform:translateZ(3em);
}

.top_animation .geometry>*>.back
{
	transform:translateZ(-3em) rotateX(180deg);
}

.top_animation .geometry>*>.left
{
	transform:translateX(-3em) rotateY(-90deg);
}

.top_animation .geometry>*>.right
{
	transform:translateX(3em) rotateY(90deg);
}


.Index .Top>.Wrap
{
	animation-name: top_main;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes top_main	{
	0%
	{
		opacity: 0;
	}
	
	90%
	{
		opacity: 0;
	}
	
	100%
	{
		opacity: 1.0;
	}
}
------------------------------------------------------　*/



/* ------------------------------------------------------------------------------------------------------------
	<index> skc
.Index .skc
{
	overflow: hidden;
}

.Index .skc .bg img
{
	rotate: -30deg;
	opacity: 0;
}

.Index .skc .bg.fadeIn img
{
	animation-name: skc_bg;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes skc_bg	{
	0%
	{
		opacity: 0;
	}
	
	25%
	{
		opacity: 0;
	}
	
	100%
	{
		rotate: 0deg;
		opacity: 1.0;
	}
}
*/