@charset "utf-8";
/* 20240626 */

/* add_allの打消 */
html,body{height: auto;/*footer押し下げ用*/}

body#index{
	will-change: animation; /* 下層アニメーションのチラツキ防止 */
	background-color: var(--color_d01);
	background-image: url(../../img/top_grade.jpg);
	background-blend-mode:Multiply;/*Multiply Darken Color-burn Overlay Color Saturation Screen Exclusion*/
	background-position: center;
	background-size: cover;
	font-size: clamp(0.625rem, -0.303rem + 5.3vmin, 5rem);
	}
body#index main{
	min-height:100vh;
    background-size: 100vh;
	background-repeat: no-repeat;
	background-position: calc(50% + 8vw) center;
	background-image: url(../../img/topimg_nursing.png);
	animation: topimg 50s linear infinite;
	color: #fff;
	text-shadow: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	}
	@keyframes topimg {
		  20%,38% {
			background-image: url(../../img/topimg_nursing.png); /* 背景画像1を指定 */
		  }
		  40%,68% {
			background-image: url(../../img/topimg_agriculture.png); /* 背景画像2を指定 */
		  }
		  70%,98% {
			background-image: url(../../img/topimg_office.png); /* 背景画像3を指定 */
		  }
		  100% {
			background-image: url(../../img/topimg_nursing.png); /* 背景画像1を指定 */
		  }
		}
body#index main div#title{flex-grow: 6; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 1em; position: relative;}
body#index main div#how{flex-grow: 2; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 1em; position: relative;}
body#index main div#button{flex-grow: 2; display: flex; justify-content: center; align-items: flex-start; width: 100vw; position: relative;}

a:link, a:visited{color:#fff;}
a:hover, a:active, a:focus{color:#fff;}

body#index main div#title h1{
	font-family: 'Klee One', 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	position: relative;
	font-size: 2em;
	}
/*
	body#index main div#title h1 span#sign{
		font-family: "WindSong", cursive, 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
		transform: rotate(-14deg);
		display: inline-block;
		position: absolute;
		bottom:-1.6em;
		right: 0;
		}
*/
/* menuボタン */
body#index main div#button div#menu {
    width: 10em;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	}
body#index main div#button div#menu span{
    display: block;
    height: 2px;
    border-radius: 5px;
    width: 10em;
  	background: #fff;
	margin-bottom: 0.2em;
	}
body#index main div#button div#menu p {text-align: center; font-size: 0.6em; line-height: 0.8;}


/*==================================================
fluid ふよふよ円
https://coco-factory.jp/ugokuweb/move02/5-3/
https://9elements.github.io/fancy-border-radius/
===================================*/
body#index main div a.fluid p{
    display: inline-block;
    font-family: 'Klee One', 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
    }
body#index main div#how a.fluid.how_about{
    position: absolute;
    bottom:calc(50% + 4em);
	left:calc(50% + 2.4em);
    }
body#index main div#how a.fluid.how_work{
    position: absolute;
    bottom:calc(50% + 1em);
	right:calc(50% + .4em);
    }
	@media (orientation: landscape){
		body#index main div#title a.fluid.how_about{
			bottom:calc(50% - 3em);
			left:calc(50% + 8em);
			}
		body#index main div#how a.fluid.how_work{
			bottom:calc(50% - 2em);
			right:calc(50% + 7em);
			}
		}

.fluid {
	width:40vw;/*横幅*/
	height: 40vw;/*縦幅*/
	border: #fff 1px solid;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	@media (orientation: landscape){
		.fluid {
			width:30vh;/*横幅*/
			height: 30vh;/*縦幅*/
			}
		}
.fluid.how_work {
	animation: fluidrotate_work 30s ease 0s infinite;/*アニメーションの設定*/
}
.fluid.how_about {
	animation: fluidrotate_about 30s ease 0s infinite;/*アニメーションの設定*/
}

@keyframes fluidrotate_work {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

@keyframes fluidrotate_about {  
	  
0%, 100% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
14% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
28% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
42% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
56% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
70% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
84% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
	  
}


/*==================================================
動くやじるし
https://coco-factory.jp/ugokuweb/move01/9-1-4/
===================================*/
/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	top:.5em;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
	animation-fill-mode:forwards;
	animation-iteration-count:20;
	}
	@media (orientation: landscape){
		.scrolldown4{bottom:calc(50% + 1em);}
		}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{left:calc(51% + 5.4em);}
      50%{left:calc(52% + 5.4em);}
     100%{left:calc(51% + 5.4em);}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	right: -4em;
	bottom:0;
    /*テキストの形状*/
	color: #aaa;
	font-size: .6em;
	font-weight: 100;
	letter-spacing: 0.05em;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 4px;
    left: -1px;
    /*矢印の形状*/
    width: 16px;
    height: 1px;
    background: #aaa;
    transform: skewY(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*矢印の形状*/
	width: 2.6em;
	height: 1px;
    background: #aaa;
}

/*==================================================
手書き風アニメーション
https://coco-factory.jp/ugokuweb/move02/9-4-2/
===================================*/

.wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
}

/*SVGのサイズ*/
svg{
	max-width:800px;/*SVGタグの横幅*/
	width:auto;/* レスポンシブ対応にするため100%を指定*/
	height:3em;
	transform: rotate(-10deg);
	margin-top: 1em;
	margin-right: -5em;
}


/*========= 手書き風にするためのCSS ===============*/

/* マスクをするパスの設定*/
#mask .st0{
    fill:none;
    stroke:#FFF;
    stroke-width:15;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
	}


/* 横長 */
@media (orientation: landscape){
body#index main {align-items: flex-start;}
body#index main div#title{flex-grow: 6; justify-content: flex-end; margin-left: calc(50vw - 25%);}
body#index main div#title h1{font-size:2em;}
body#index main div#title svg{font-size:.8em;}
body#index main div#how{flex-grow: 2; justify-content: center; align-items: flex-end; margin: 0 auto; padding-bottom: 0;}
body#index main div a.fluid{font-size: calc(2vh + .2em);}
body#index main div#button{flex-grow: 2; align-items: flex-start;}
}
@media (orientation: landscape) and (max-width: 1200px){
	body#index main div#title h1{}
}