@charset "utf-8";


/* ========== contents ========== */

#main-img {
	background-position: center center;
	position: relative;
	background-color: blue;
}

#main-img img{
	max-width: 100%;
    height: auto;
    opacity:0.7;
    vertical-align: bottom;
    position: relative;
	}

#main-img .text {
	width: 100%;
	font-size: 600%;
	text-align: center;
	bottom: 210px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 250%;
	text-align: center;
	bottom: 200px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}


.text-01 {
  text-shadow: 0 -1px 1px #fff,
               -1px 0 1px #fff,
               1px 0 1px #fff,
               0 1px 1px #fff,
               1px 1px 1px #000,
               2px 2px 2px #000,
               3px 3px 3px #000;
  font-size: 30px;
  color: #4169e1;
  font-weight: bold;
}
.text-02 {
  text-shadow: 0 -1px 1px #fff,
               -1px 0 1px #fff,
               1px 0 1px #fff,
               0 1px 1px #fff,
               1px 1px 1px #000,
               2px 2px 2px #000,
               3px 3px 3px #000;
  font-size: 30px;
  color: #000;
  font-weight: bold;
}
.text-03 {
	text-shadow: 0px 0px 1px #ffffff,
               0px 0px 10px #ffd700,
               0px 0px 20px #ffd700,
               0px 0px 30px #ffd700,
               0px 0px 40px #ffd700;
  font-size: 40px;
  color:#fff;
  font-weight: bold;
  background: #000;
  text-align: center;
  padding: 10px 0px;
}

.frame {
	display: inline-block;
	position: relative;
	padding:7px;
    border:1px solid #ccc;
    background:#fff;
}
.frame:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
		inset 0 0 100px rgba(0, 0, 0, 0.2);
	background: rgba(0, 255, 0, 0.1); /* カラーを重ねる */
}







@media screen and (max-width: 1024px) {

#main-img .text {
	width: 100%;
	font-size: 400%;
	text-align: center;
	bottom: 170px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 160%;
	text-align: center;
	bottom: 160px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}
}


@media screen and (max-width: 768px) {

#main-img .text {
	width: 100%;
	font-size: 300%;
	text-align: center;
	bottom: 125px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 152%;
	text-align: center;
	bottom: 110px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}
}


@media screen and (max-width: 640px) {

#main-img .text {
	width: 100%;
	font-size: 350%;
	text-align: center;
	bottom: 75px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 120%;
	text-align: center;
	bottom: 70px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}
}


@media screen and (max-width: 480px) {

#main-img .text {
	width: 100%;
	font-size: 200%;
	text-align: center;
	bottom: 50px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 100%;
	text-align: center;
	bottom: 40px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}
}


@media screen and (max-width: 320px) {

#main-img .text {
	width: 100%;
	font-size: 150%;
	text-align: center;
	bottom: 20px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

#main-img .text2 {
	width: 100%;
	font-size: 20%;
	text-align: center;
	bottom: 15px;
	margin: 0;
	padding: 0;
	color: #fff;
	/*background: rgba(0,0,0,0.4);*/ /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
	}

}



/* ========== contents end ========== */








@media screen and (min-width:480px){
/*最小幅480px以上の指定*/
}
@media screen and (min-width:768px){
/*最小幅768px以上の指定*/
}
@media screen and (min-width:1024px){
/*最小幅1024px以上の指定*/
}