#topVisual { position: relative; height: 100vh; }

#topVisual #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; }
#topVisual #loading.disappear{ display: none; }

#topVisual #youtube-area{ position: fixed; z-index: 1; top: 0; right:0; left:0; bottom:0; overflow: hidden; opacity: 0; }
#topVisual #youtube-area.appear { animation-name:PageAnimeAppear; animation-duration:.5s; animation-fill-mode:forwards; }
@keyframes PageAnimeAppear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
#topVisual #youtube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 184vh; height: 56vw; min-height: 100%; min-width: 100%; }
#topVisual #youtube-mask{ position: absolute; z-index: 2; top:0; width:100%; height: 100%; }

/*
#topVisual h2 { display: block; position: absolute; z-index: 10; top: 195px; left: 20vw; font-size: 60px; line-height: 90px; color: #FFF; text-shadow: 0 0 5px #0003; writing-mode: vertical-rl; }
#topVisual h2 b { display: block; }
#topVisual h2 span { display: block; margin-top: 90px; }
*/
#topVisual h2 { display: block; position: absolute; z-index: 10; top: 40vh; left: 160px; font-size: 64px; line-height: 96px; color: #FFF; text-shadow: 0 0 5px #000; }
#topVisual h2 b { display: block; margin-top: 20px; }
#topVisual h2 span { display: block; font-size: 32px; line-height: 48px; }

#topVisual a { display: block; position: absolute; width: 600px; z-index: 10; bottom: 80px; right: 80px; }
#topVisual a figure { display: block; position: absolute; top: 15px; left: -15px; }
#topVisual a ul { background: #168353EE; border-radius: 10px 10px 0 0; padding:10px 0; }
#topVisual a ul li { padding: 0 0 0 230px; color: #FFF; font-size: 24px; font-weight: 500; line-height: 40px; text-align: center; }
#topVisual a ul li:first-child { font-size: 32px; line-height: 50px; }
#topVisual a p { background: #459C75EE; border-radius: 0 0 10px 10px; padding: 0 0 0 230px; color: #FFF; font-size: 16px; line-height: 40px; text-align: center; }

#topAbout { position: relative; background: #FFF; z-index: 1; padding: 160px 0; text-align: center; border-bottom: solid 5px #158352; }
#topAbout h2 { font-size: 48px; line-height: 1.5em; color: #158352; }
#topAbout p { font-size: 24px; font-weight: 500; line-height: 1.75em; padding: 80px 0 0; }

#topConcept { position: relative; background: #FFF; z-index: 1; padding: 160px 0 0; }
#topConcept h2 { font-size: 48px; line-height: 1.5em; color: #251E19; text-align: center; }
#topConcept h3 { font-size: 48px; line-height: 1.5em; color: #158352; border-bottom: solid 4px #158352; }
#topConcept h4 { font-size: 28px; line-height: 1.5em; color: #158352; padding: 40px 0 0; }
#topConcept p { font-size: 32px; font-weight: 700; line-height: 1.75em; text-align: center; color: #158352; padding: 40px 0 0; }

#topConcept article { display: flex; padding: 80px 0 0; justify-content: space-between; }
#topConcept article section { width: 520px; }
#topConcept article section p { font-size: 20px; font-weight: 500; text-align: left; color: #251E19; padding: 20px 0 0; }
#topConcept article section p.note { font-size: 18px; background: #459C7533; margin: 40px 0 0; padding: 20px; border-radius: 10px; }
#topConcept article figure { width: 600px; }
#topConcept article figure img { width: 100%; border-radius: 20px; margin: 0 0 40px; }

#topConcept article.care section { order: 1; }
#topConcept article.care figure { order: 2; }

@media only screen and (max-width: 1400px) {
	/*
	#topVisual h2 { top: 195px; left: 20vw; font-size: 48px; line-height: 72px; }
	*/
	#topVisual h2 { top: 25vh; left: 80px; font-size: 64px; line-height: 96px; }
	#topVisual h2 span { font-size: 36px; line-height: 54px; }

}

@media only screen and (max-width: 1000px) {
	/*
	#topVisual h2 { top: 35%; left: 40px; font-size: 10vw; line-height: 1.5em; writing-mode: initial; }
	#topVisual h2 b { display: block; }
	#topVisual h2 span { display: block; margin-top: 0; }
	*/
	#topVisual h2 { top: 45vh; left: 40px; font-size: 7vw; line-height: 1.5em; writing-mode: initial; }
	#topVisual h2 b { display: block; margin-top: 10px; }
	#topVisual h2 span { display: block; font-size: 4vw; line-height: 1.5em; }

	#topVisual a { bottom: 40px; right: 40px; }

	#topConcept { padding: 160px 0; }
	#topConcept article { display: block; }
	#topConcept article section { width: 100%; }
	#topConcept article figure { display: flex; width: 100%; justify-content: space-around; }
	#topConcept article figure img { border-radius: 10px; margin: 0 0 20px; max-width: calc(50% - 20px); }

}
@media only screen and (max-width: 600px) {
	/*
	#topVisual h2 { top: auto; bottom: 160px; }
	*/
	#topVisual h2 { left: 0; font-size: 7vw; text-align: center; width: 100%; }
	#topVisual h2 span { font-size: 5vw; text-align: center; }

	#topVisual a { width: 320px; bottom: 20px; right: 20px; }
	#topVisual a figure { width: 125px; top: -10px; left: -20px; }
	#topVisual a figure img { width: 100%; height: auto; }
	#topVisual a ul { padding: 5px 0; }
	#topVisual a ul li { padding: 0 0 0 100px; font-size: 16px; line-height: 25px; }
	#topVisual a ul li:first-child { font-size: 18px; line-height: 25px; }
	#topVisual a p { padding: 0; font-size: 13px; line-height: 30px; }


	#topAbout { position: relative; background: #FFF; z-index: 1; padding: 80px 20px; text-align: center; }
	#topAbout h2 { font-size: 8vw; line-height: 1.5em; color: #158352; }
	#topAbout p { font-size: 5vw; font-weight: 500; line-height: 1.75em; padding: 40px 0 0; }

	#topConcept { position: relative; background: #FFF; z-index: 1; padding: 80px 20px; }
	#topConcept h2 { font-size: 8vw; line-height: 1.5em; text-align: center; }
	#topConcept h3 { font-size: 8vw; line-height: 1.5em; }
	#topConcept h4 { font-size: 6vw; line-height: 1.5em; padding: 40px 0 0; }
	#topConcept p { font-size: 4vw; font-weight: 700; line-height: 1.75em; text-align: center; padding: 40px 0 0; }

	#topConcept article { display: block; padding: 80px 0 0; justify-content: space-between; }
	#topConcept article section { width: 100%; }
	#topConcept article section p { font-size: 5vw; font-weight: 500; text-align: left; color: #251E19; padding: 20px 0 0; }
	#topConcept article section p.note { font-size: 4vw; margin: 40px 0 0; padding: 20px; border-radius: 10px; }
	#topConcept article figure { display: block; width: 100%; }
	#topConcept article figure img { max-width: 100%; }

}