@charset "utf-8";

/*---------------------------------------------------------------
各ページの独自CSS
---------------------------------------------------------------*/
/**
 * 目次
 *
 * 01. トップページ／メインパネル・ステージ
 *
 *（PC-1024px SP-896px以下） 
 *（★の箇所は未使用）
 */



/*******************************************************************************
 01. トップページ／メインパネルステージ 
*******************************************************************************/
p.fude-circle {
	position: absolute;
	top: -200px;
	right: 600px;
	opacity: 1;
	transition: 0.5s ;
}
p.fude-circle img {
	transition: 0.5s ;
}


/* ●基本枠
=================================================*/
#MAIN_stage {
	position: relative;
	width:100%;
	overflow: hidden;
	//background-color: #faf8f1;
	//border-bottom: 1px solid #49515b;
	margin: 0px auto 0px auto;
}

#main-logo_FIELD {
	position: absolute;
	z-index:200;
	top:200px;
	width:100%;
	text-align:center;
	font-size: 3.125rem;
	transition: 0.5s ;
}
#main-logo_FIELD img {
	transition: 0.5s ;
}

#main-tombstone_FIELD {
	position: absolute;
	z-index:100;
	top:150px;
	right:5%;
	width:855px;
	text-align:right;
	transition: 0.5s ;
}
#main-tombstone_FIELD img {
	width:100%;
	transition: 0.5s ;
}

/* 1. 石写真：フィールド */
#main-photo_FIELD {
	position: relative;
	//left:5%;
	width:87%;
	//overflow: hidden;
	margin: 550px auto 0px auto;
}

/* 2. 石写真：整列と隠す領域を設定 */
.main-photo {
	//display: flex;
	width:100%;
	height: 550px;
	//justify-content: center; /* 中央に整列 */
	//gap: 20px;
	//padding: 50px;
	//background-color: #f0f0f0;
	//overflow: hidden; /* 画面外から来るときに隠す */
	margin: 0px auto 0px auto;
}

/* 3. 石写真：アイテム */
.m-p-item1 {
	left:7%;
	top:50px;
	width: 55%;
	height: 160px;
}
.m-p-item2 {
	left:58%;
	width: 17%;
	height: 350px;
}
.m-p-item3 {
	right:0;
	top:40px;
	width: 35%;
	height: 250px;
}
.m-p-item4 {
	left:32%;
	top:160px;
	width: 25%;
	height: 130px;
}
.m-p-item5 {
	left:51%;
	top:270px;
	width: 13%;
	height: 150px;
}
.m-p-item6 {
	left:65%;
	top:300px;
	width: 12%;
	height: 220px;
}

.m-p-item {
	position: absolute;
	font-weight: bold;
	transition: 0.5s ;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.7);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
}

/* 5. 石写真：レイヤー順＆背景画像 */
.m-p-item1 { z-index: 2; background-image: url(../images/top/stone-1.jpg); }
.m-p-item2 { z-index: 6; background-image: url(../images/top/stone-2.jpg); }
.m-p-item3 { z-index: 1; background-image: url(../images/top/stone-3.jpg); }
.m-p-item4 { z-index: 4; background-image: url(../images/top/stone-4.jpg); }
.m-p-item5 { z-index: 5; background-image: url(../images/top/stone-5.jpg); }
.m-p-item6 { z-index: 3; background-image: url(../images/top/stone-6.jpg); }


/* 6. 石写真：アニメーション */
.m-p-item {
	opacity: 0;
	animation: item-fadeIn 1s forwards ease-out;
}

.m-p-item1 {animation-delay: 4s;}
.m-p-item2 {animation-delay: 5s;}
.m-p-item3 {animation-delay: 6s;}
.m-p-item4 {animation-delay: 7s;}
.m-p-item5 {animation-delay: 8s;}
.m-p-item6 {animation-delay: 9s;}

@-webkit-keyframes item-fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.main-hoshino-EN {
	position: absolute;
	bottom:50px;
	left:25%;
	z-index: 10;
	opacity: 0;
	animation: item-fadeIn 1s forwards ease-out;
	animation-delay: 10s;
}
.main-hoshino-EN img {
	transition: 0.5s ;
}

/***---- ▼SP-1540px以上----***/
@media screen and (min-width:1540px){



}
/***---- ▲SP-1540px以上----***/

/***---- ▼SP-2000px以上----***/
@media screen and (min-width:2000px){

#main-logo_FIELD img {
	width:400px;
}

#main-tombstone_FIELD {
	width:1000px;
}

#main-photo_FIELD {
	margin: 600px auto 0px auto;
}

.main-hoshino-EN img {
	width:650px;
}

}
/***---- ▲SP-2000px以上----***/

/***---- ▼SP-1400px以下----***/
@media screen and (max-width:1400px){

p.fude-circle {
	right: 300px;
}
#main-logo_FIELD img {
	margin: 0px 0% 0px -30%;
}

}
/***---- ▲SP-1400px以下----***/

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

p.fude-circle {
	right: 0px;
}
p.fude-circle img {
	
}

#main-logo_FIELD {
	top:100px;
}
#main-logo_FIELD img {
	width:270px;
}

#main-tombstone_FIELD {
	top:150px;
	right:-5%;
	width:600px;
}

#main-photo_FIELD {
	margin: 400px auto 0px auto;
}

.main-hoshino-EN {
	left:10%;
}
.main-hoshino-EN img {
	width:400px;
}

}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

#main-logo_FIELD img {
	width:230px;
	margin: 0px 0% 0px -25%;
}

#main-tombstone_FIELD {
	top:130px;
	width:450px;
}

#main-photo_FIELD {
	margin: 330px auto 0px auto;
}



}
/***---- ▲SP-640px以下----***/


/***---- ▼SP-480px以下----***/
@media screen and (max-width:480px){

p.fude-circle {
	right: -150px;
}
p.fude-circle img {
	width:1300px;
}

#main-logo_FIELD {
	top:120px;
}
#main-logo_FIELD img {
	width:190px;
	margin: 0px 0% 0px -30%;
}

#main-tombstone_FIELD {
	top:140px;
	right:-5%;
	width:300px;
}

#main-photo_FIELD {
	margin: 250px auto 0px auto;
}

.main-photo {
	height: 500px;
}
.m-p-item1 {
	left:0%;
	width: 60%;
	height: 140px;
}
.m-p-item2 {
	height: 330px;
}
.m-p-item3 {
	height: 230px;
}
.m-p-item4 {
	height: 110px;
}
.m-p-item5 {
	top:250px;
	height: 130px;
}
.m-p-item6 {
	top:280px;
	height: 200px;
}

.main-hoshino-EN {
	left:0%;
	bottom:80px;
	text-align:center;
}
.main-hoshino-EN img {
	width:80%;;
}

}
/***---- ▲SP-480px以下----***/