@charset "utf-8";

/* CSS Document */

/* ======================================================
	[animation]
	@import"../css/test_line.css";
	------------------------------------------------------
	○px以上 + 印刷モード	@media print, screen and (min-width : ○px) {}
	○px以上				@media (min-width : ○px) {}
	○px以下				@media (max-width : ○px) {}
	------------------------------------------------------
	 [sp]		     ～  479	
	([tablet]	 480 ～     )
	 [pc]		1025 ～
====================================================== */
/* [pc, tablet, print] */
@media print, screen and (min-width : 480px) {
}

/* [ - sp] */
@media (max-width : calc(480px - 1px)) {
.ModeSP 
{
}
}

/* [print] */
@media print {
}


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

.pswp,
.Header .GlobalMenu .ChildOn a:before,
.Header .GlobalMenu .Child
{
	transition: all 0.5s ease-in-out;
}

.Header:before
{
	transition: all 1s ease-in-out;
}

.pswp__container
{
}


/* ============================================================================================================
	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;
	}
}


/* ============================================================================================================
	[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: rgba(0,0,0,1.0);
	}
	
	90%
	{
		background-color: rgba(0,0,0,1.0);
	}
	
	100%
	{
		background-color: rgba(0,0,0,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: rgba(255,255,255,1.0);
		transform: rotate(-45deg);
	}
	
	25%
	{
		width: 10em;
		height: 10em;
		transform: rotate(100deg);
		border-color: rgba(255,255,255,0.5);
	}
	
	75%
	{
		width: 2em;
		height: 2em;
		transform: rotate(-190deg);
		border-color: rgba(255,255,255,1.0);
	}
	
	100%
	{
		width: calc(100% - (1em * 2));
		height: calc(100vh - (1em * 2));
		transform: none;
		border-color: rgba(255,255,255,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: rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,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
{
	transform: 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%
	{
		transform: rotate(0deg);
		opacity: 1.0;
	}
}
*/