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

/* ---------------------------------------------------------------------------------------------

　   header

--------------------------------------------------------------------------------------------- */

header#header{
	position: relative;
    height: auto;
	min-height: 100vh;
  	min-height: calc(var(--vh, 1vh) * 100);
	background: url("../img/hero_image.jpg") no-repeat top right;
	background-size: cover;
	}
	@media only screen and (max-width: 767px) {
		header#header{
			background: url("../img/hero_image.jpg") no-repeat top center;
			background-size: cover;
			}
        }
	@media only screen and (max-width: 520px) {
        }
	@media only screen and (max-width: 480px) {
		}
	@media only screen and (max-width: 360px) {
		}
	@media only screen and (max-width: 260px) {
		}



/*--------------------

　メインイメージ

--------------------*/

/*全体*/
.hero_catch{
	position: absolute;
	bottom: 5rem;
	left: 0;
	right: 0;
	width: 92%;
	margin: auto;
	z-index: 10;
	}
.hero_catch .catch{
	color: #fff;
	font-size: 330%;
	line-height: 120%;
	margin-bottom: 0.7em;
	text-shadow: 5px 0px 10px rgba(30, 100, 230, 1),5px 0px 10px rgba(30, 100, 230, 1);
	}
.hero_catch span.smoothText {
	display: inline-block;
	}
.hero_catch span.smoothTextTrigger{
	display: inline-block;
	}

.hero_catch .lead{
	color: #fff;
	font-size: 125%;
	line-height: 190%;
	text-shadow: 5px 0px 10px rgba(30, 100, 230, 1),5px 0px 10px rgba(30, 100, 230, 1);
	}

	@media only screen and (max-width: 900px) {
		.hero_catch .catch{
			font-size: 280%;
			}
		.hero_catch .lead{
			font-size: 120%;
			}
        }
	@media only screen and (max-width: 767px) {
		.hero_catch .catch{
			font-size: 240%;
			}
        }
	@media only screen and (max-width: 540px) {
		.hero_catch .catch{
			font-size: 200%;
			}
		.hero_catch .lead{
			font-size: 110%;
			}
        }
	@media only screen and (max-width: 480px) {
		/*全体*/
		.hero_catch{
			bottom: 2.5rem;
			}
		.hero_catch .catch{
			font-size: 170%;
			line-height: 140%;
			}
		.hero_catch .lead{
			font-size: 100%;
			}
		}
	@media only screen and (max-width: 360px) {
		.hero_catch .catch{
			font-size: 140%;
			}
		.hero_catch .lead{
			font-size: 95%;
			}
		}
	@media only screen and (max-width: 260px) {
		}











/* ---------------------------------------------------------------------------------------------

　   main

--------------------------------------------------------------------------------------------- */

main#main{
	background: url("../img/bg_abstract.jpg") no-repeat;
	background-size: cover;
	padding: 1rem 0 0 0;
	}