@charset "utf-8";

/**
 *
 *  インデックスファーストビュー .sec_first
 *
 */

/*--------------------------------------------------------------------------
	インデックスファーストビュー .sec_first
---------------------------------------------------------------------------*/
	.sec_first {
		position: relative;
	}
	.sec_first > .inline {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 92vh;
	}
	/*Javaの制御用*/
	.sec_first > .inline　div:not(.bg-slider) {
		width: 100% !important;
	}
	.sec_first .img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: no-repeat 50% 50%;
		-webkit-background-size: cover;
				background-size: cover;
		opacity: 0;
		filter: alpha(opacity=0);
	}
	.sec_first .img._is_active {
		z-index: 5;
	}
	.sec_first .img._is_prev {
		z-index: 1;
	}

/* @sp **************************************************/
@media all and (max-width: 1100px) and (orientation: portrait){
	.sec_first {
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
		min-height: 568px;
		z-index: 0;
	}
}

/* @sp **************************************************/
@media all and (max-width: 1100px) and (orientation: landscape){
	.sec_first {
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
		z-index: 0;
	}
}

/* @sp **************************************************/
@media all and (max-width: 430px){
/*	.sec_first div.inline > div {
		animation: Scroll 11.925s ease -0s infinite;
	}*/
	@keyframes Scroll {
		0% { background-position: 20% 50%;}
		50% { background-position: 85% 50%;}
		100% { background-position: 20% 50%;}
	}
}


/* .titletext
-----------------------------------------------------------------*/
/* 動くVer */

.sec_first .titletext {
	position: absolute;
/*	width: 85%;
	top: 15.5%;
	left: 0;
	right: 0;*/
	width: 60%;
	top: 62.5%;
	left: 0;
	right:  -42.5%;
	margin: auto;
	z-index: 50;
	animation:
	'scalling' 3s ease 3s alternate forwards,
	'scalling-shake' 3.5s ease 6.875s alternate infinite;
}
@keyframes scalling {
  0% {  transform: scale(1);}
  100% {transform: scale(80%) translate(-20%, -40%);}
}
@keyframes scalling-shake {
	0% {  transform: scale(80%) translate(-20%, -40%) }
	5% {  transform: scale(80.995%) rotate(-0.25deg) translate(-20%, -40%) }
	10% { transform: scale(80.995%) rotate(-0.25deg) translate(-20%, -40%) }
	15% { transform: scale(80.025%) rotate(0.25deg) translate(-20%, -40%) }
	20% { transform: scale(80.025%) rotate(-0.25deg) translate(-20%, -40%) }
	25% { transform: scale(80.025%) rotate(0.25deg) translate(-20%, -40%) }
	30% { transform: scale(80.025%) rotate(-0.25deg) translate(-20%, -40%) }
	35% { transform: scale(80.025%) rotate(0.25deg) translate(-20%, -40%) }
	40% { transform: scale(80%) rotate(0) translate(-20%, -40%) }
	100% {transform: scale(80%) rotate(0) translate(-20%, -40%) }
}


	.sec_first .titletext img {
		display: block;
		margin: auto;
		transform: rotate(-0deg);
	}
	.sec_first .titletext img.text1 {
		position: relative;
/*		width: 90%;*/
		width: 70%;
		max-width: 600px;
		top: -5px;
	}
	.sec_first .titletext img.text2 {
		position: relative;
		width: 85%;
		max-width: 1100px;
		top: 0;
	}
	.sec_first .titletext img.text2_sp {
		display: none;
	}
	/* .titletext .point_bg
	**************************************************/
	.titletext span.point_bg,
	.titletext span.point_bg::before,
	.titletext span.point_bg::after {
		content: '';
		position: absolute;
		height: 8px;
		border-radius: 10px;
		margin: 0 -10% 0;
		-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
				transform-origin: left center;
	}
	.titletext span.point_bg {
		width: 37px;
	}
	.titletext span.point_bg::before {
		width: 27px;
	}
	.titletext span.point_bg::after {
		width: 27px
	}
	.titletext span.point_bg:nth-of-type(1) {
		top: 1.5em;
		left: calc(100% - 85%);
		background: #FFE70E;
		-webkit-transform: rotate(-135deg);
			-ms-transform: rotate(-135deg);
				transform: rotate(-135deg);
		z-index: 500;
	}
	.titletext span.point_bg:nth-of-type(1)::before {
		top: 1em;
		left: 0em;
		background: #FFE70E;
		-webkit-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
				transform: rotate(30deg);
		z-index: 500;
	}
	.titletext span.point_bg:nth-of-type(1)::after {
		top: -1em;
		left: 0em;
		background: #FFE70E;
		-webkit-transform: rotate(-35deg);
			-ms-transform: rotate(-35deg);
				transform: rotate(-35deg);
		z-index: 500;
	}
	
	.titletext span.point_bg:nth-of-type(2) {
		top: 10.5em;
		right: calc(100% - 90%);
		background: #FFE70E;
		-webkit-transform: rotate(218deg);
			-ms-transform: rotate(218deg);
				transform: rotate(218deg);
		z-index: 500;
	}
	.titletext span.point_bg:nth-of-type(2)::before {
		top: 1.8em;
		right: 0.2em;
		background: #FFE70E;
		-webkit-transform: rotate(-25deg);
			-ms-transform: rotate(-25deg);
				transform: rotate(-25deg);
		z-index: 500;
	}
	.titletext span.point_bg:nth-of-type(2)::after {
		top: -1.8em;
		right: -0.3em;
		background: #FFE70E;
		-webkit-transform: rotate(40deg);
			-ms-transform: rotate(40deg);
				transform: rotate(40deg);
		z-index: 500;
	}



/* @sp **************************************************/
@media all and (max-width: 1100px){
	.titletext span.point_bg,
	.titletext span.point_bg::before,
	.titletext span.point_bg::after {
		height: 5px;
		margin: 0 -15% 0;
	}
	.titletext span.point_bg {
		width: 20px;
	}
	.titletext span.point_bg::before {
		width: 15px;
	}
	.titletext span.point_bg::after {
		width: 15px;
	}
	.titletext span.point_bg:nth-of-type(1) {
		top: 1.5em;
		left: calc(100% - 55vw);
	}
	.titletext span.point_bg:nth-of-type(2) {
		top: 40em;
		right: calc(100% - 70vw);
	}
	.titletext span.point_bg:nth-of-type(2)::before {
		top: calc(100% - -3.5vw);
	}
}
/* @sp **************************************************/
@media all and (max-width: 430px){
	.titletext span.point_bg,
	.titletext span.point_bg::before,
	.titletext span.point_bg::after {
		height: 4px;
		margin: 0 -15% 0;
	}
	.titletext span.point_bg {
		width: 17px;
	}
	.titletext span.point_bg::before {
		width: 12px;
	}
	.titletext span.point_bg::after {
		width: 12px;
	}
	.titletext span.point_bg:nth-of-type(1) {
		top: 1em;
		left: 40%;
	}
	.titletext span.point_bg:nth-of-type(2) {
		top: calc(100% - -10vw);
		right: 25%;
	}
	.titletext span.point_bg:nth-of-type(2)::after {
		top: -1.5em;
	}
	.sec_first .titletext {
		position: absolute;
		top: 20%;
		width: 95%;
		top: 30.5%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 50;
		animation:
		'scalling' 3s ease 3s alternate forwards;
	}
	.sec_first .titletext img.text1 {
		width: 60%;
		top: 13px;
	}
	.sec_first .titletext img.text2 {
		display: none;
	}
	.sec_first .titletext img.text2_sp {
		display: block;
		position: relative;
		width: 65%;
		min-width: 250px;
	}
	@keyframes scalling {
	  0% {  transform: scale(1);}
	  50% { transform: scale(1);}
	  100% {transform: scale(60%) translate(45%, 80%);}
	}
	.titletext span.point_bg:nth-of-type(1) {
		animation: 3.5s shaking1 6.875s infinite;
	}
	@keyframes shaking1 {
		0% {  transform: scale(1) rotate(-135deg);}
		5% {  transform: scale(1) rotate(-136.25deg);}
		10% { transform: scale(1.2) rotate(-134.25deg);}
		15% { transform: scale(1.2) rotate(-140.25deg);}
		20% { transform: scale(1.2) rotate(-136.25deg);}
		25% { transform: scale(1.2) rotate(-122.25deg);}
		30% { transform: scale(1.2) rotate(-133.25deg);}
		35% { transform: scale(1) rotate(-140.25deg);}
		40% { transform: scale(1) rotate(-136deg);}
		100% {transform: scale(1) rotate(-135deg);}
	}
	.titletext span.point_bg:nth-of-type(2) {
		animation: 3.5s shaking2 6.875s infinite;
	}
	@keyframes shaking2 {
		0% {  transform: scale(1) rotate(218deg);}
		5% {  transform: scale(1) rotate(218.25deg);}
		10% { transform: scale(1.2) rotate(218.25deg);}
		15% { transform: scale(1.15) rotate(218.25deg);}
		20% { transform: scale(1.2) rotate(218.25deg);}
		25% { transform: scale(1.15) rotate(218.25deg);}
		30% { transform: scale(1.2) rotate(218.25deg);}
		35% { transform: scale(1.2) rotate(218.25deg);}
		40% { transform: scale(1) rotate(218.25deg);}
		100% {transform: scale(1) rotate(218deg);}
	}
}
/* .titletext .point_bg ここまで
**************************************************/

/* @sp **************************************************/
@media all and (max-width: 1100px) and (orientation: portrait){
	.sec_first .titletext {
		top: 15%;
	}
	.sec_first .titletext img.text1 {
		width: 60%;
		top: 13px;
	}
	.sec_first .titletext img.text2 {
		display: none;
	}
	.sec_first .titletext img.text2_sp {
		display: block;
		position: relative;
		width: 65%;
		min-width: 270px;
	}
}

/* @sp **************************************************/
@media all and (max-width: 1100px) and (orientation: landscape){
	.sec_first .titletext {
		top: 15%;
	}
	.sec_first .titletext img.text1 {
		width: 75%;
		top: 10px;
	}
	.sec_first .titletext img.text2 {
		display: block;
		position: relative;
	}
	.sec_first .titletext img.text2_sp {
		display: none;
	}
}
/* @sp **************************************************/
@media all and (max-width: 766px){
	.sec_first .titletext {
		position: absolute;
		width: 80%;
		top: 20%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 50;
		animation:
		'scalling' 3s ease 3s alternate forwards;
	}
	.sec_first .titletext img.text1 {
		width: 60%;
		top: 13px;
	}
	.sec_first .titletext img.text2 {
		display: none;
	}
	.sec_first .titletext img.text2_sp {
		display: block;
		position: relative;
		width: 60%;
		min-width: 250px;
	}
}
/* .titletext ここまで
-----------------------------------------------------------------*/



/* .anniv_popup
-----------------------------------------------------------------*/
	.sec_first .anniv_popup {
		position: absolute;
		width: 90px;
		top: 3em;
		right: 2em;
		margin: auto;
		z-index: 50;
	}
	.sec_first .anniv_popup img {
		width: 100%;
		-webkit-filter: drop-shadow(1px 2px 6px #9C9C9C30);
			-ms-filter: drop-shadow(1px 2px 6px #9C9C9C30);
				filter: drop-shadow(1px 2px 6px #9C9C9C30);
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
	.sec_first .anniv_popup {
		width: 60px;
/*		top: 5%;*/
		top: calc(55px + 3%);
		left: 2em;
		right: inherit;
	}
}


/* .btn_popup
-----------------------------------------------------------------*/
	.sec_first .btn_popup {
		position: absolute;
		width: 100%;
		bottom: 5vh;
		z-index: 50;
	}
	.sec_first .btn_popup ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
	/*	justify-content: space-between;*/
	}
	.sec_first .btn_popup li {
		width: 30%;
		padding: 0% 2%;
	}
	.sec_first .btn_popup li > div {
		width: 100%;
		margin: 0 auto;
		font-size: 1.4rem;
		font-weight: 600;
		color: #FFF;
		text-align: center;
		-webkit-filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
			-ms-filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
				filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
	}
	.sec_first .btn_popup img {
		width: 100%;
		-webkit-filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
			-ms-filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
				filter: drop-shadow(1px 2px 5px rgba(75, 75, 75, 0.65));
	}
	.sec_first .btn_popup a:hover {
		position:relative;
		top:1px;
		left:1px;
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
  .sec_first .btn_popup {
/*    display: none;*/
		bottom: 15vh;
    background: rgba(50,50,50,0.35);
	}
	.sec_first .btn_popup ul {
		justify-content: space-evenly;
	}
	.sec_first .btn_popup li {
		width: 85%;
		padding: 3%;
	}
}


/* .scroll
-----------------------------------------------------------------*/
	.sec_first .scroll {
		-webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
				transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		position: absolute;
		bottom: 4.5%;
		left: 50%;
		z-index: 1000;
		margin-left: -38px;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transform: translateY(-50px);
			-ms-transform: translateY(-50px);
				transform: translateY(-50px);
	}
	.sec_first .scroll._is_show {
		opacity: 1;
		filter: alpha(opacity=100);
		-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
	.sec_first .scroll._is_show img {
		-webkit-animation: float 2s cubic-bezier(0.15, 0.36, 0.47, 0.92) infinite;
				animation: float 2s cubic-bezier(0.15, 0.36, 0.47, 0.92) infinite;
	}
	@keyframes float {
		0% {
			-webkit-transform: translateY(0);
							transform: translateY(0);
		}
		50% {
			-webkit-transform: translateY(15px);
							transform: translateY(15px);
		}
		100% {
			-webkit-transform: translateY(0);
							transform: translateY(0);
		}
	}
	@-webkit-keyframes float {
		0% {
			-webkit-transform: translateY(0);
							transform: translateY(0);
		}
		50% {
			-webkit-transform: translateY(15px);
							transform: translateY(15px);
		}
		99.9%,to{
			-webkit-transform: translateY(0);
							transform: translateY(0);
		}
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
	.sec_first .scroll{
		bottom: 6%;
		margin-left: -28px;
	}
	.sec_first .scroll img{
		width: 56px;
		height: 56px;
	}
}


/*--------------------------------------------------------------------------
	.scene_sec_first
---------------------------------------------------------------------------*/
	.hd_logo > span{
		-webkit-transition: all .5s .01s cubic-bezier(0.19, 1, 0.22, 1);
						transition: all .5s .01s cubic-bezier(0.19, 1, 0.22, 1);
	}
	html.dev-pc #Page.scene_sec_first{
		padding-left: 626px;
	}
	html.dev-pc #Page.scene_sec_first #Header{
		width: 626px;
	}
	html.dev-pc #Page.scene_sec_first .hd_logo > span{
		width: 480px;
		height: 221px;
	}
	html.browser-old-ie #Page{
		padding-left: 346px;
	}
	html.browser-old-ie #Page #Header{
		width: 346px;
	}
	html.browser-old-ie .hd_logo > span{
		width: 266px;
		height: 123px;
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
	html.dev-pc #Page.scene_sec_first,
	#Page.scene_sec_first{
		padding-left: 0;
	}
	html.dev-pc #Page.scene_sec_first #Header,
	#Page.scene_sec_first #Header{
		width: 100%;
	}
	html.dev-pc #Page.scene_sec_first .hd_logo > span,
	#Page.scene_sec_first .hd_logo > span{
		width: 136px;
		height: 27px;
		padding-right: 0;
	}
}