@charset "UTF-8";
*{margin:0;
padding:0;}

body {
    font-size: 1.4em;
    line-height: 200%;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 100%;
}

header {
    background-image: url(../img/aurabg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    background-color: #FFFFCB;
}
.wrapper {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}
.wrapperbtn {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.btn a:hover img {
    opacity: 0.7;
}
#memo {
    background-color: rgba(255,255,255,0.84);
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    font-size: 1.2em;
    margin-top: 70px;
    border-radius: 20px;
    border-top: thick solid #00B4FF;
    border-bottom: thick solid #00B4FF;
}

.yellowegg {
    color: #FFC700;
}
.parallax-window {
     min-height: 800px;
     background: transparent;
}
 
.parallax-slider {
     top: 0;
     left: 0;
}
#yellow {
    width: 100%;
    background-image: url(../img/yellowbg.jpg);
    background-size: cover;
    background-color: #FEF293;
}
#yellowtitlle {
    width: 100%;
    background-color: gold;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-shadow: 0px 0px 7px rgba(66,66,66,1.00);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: x-large;
    line-height: 200%;
}
#voistitlle {
    width: 100%;
    background-color: #F0C1EE;
    color: #fff;
    text-align: center;
    text-shadow: 0px 0px 7px rgba(66,66,66,1.00);
    font-size: xx-large;
    background-image: url(../img/line.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#sky {
    width: 100%;
    background-image: url(../img/skybg.jpg);
    background-size: cover;
}
.skyline {
    border-bottom: medium dotted rgba(0,175,255,1.00);
    padding-bottom: 5px;
}
#skytitlle {
    width: 100%;
    background-color: #00D1FF;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-shadow: 0px 0px 7px rgba(66,66,66,1.00);
    font-size: x-large;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 200%;
}


.red {
    color: #EF0289;
    font-weight: bold;
}
.red2 {
    color: #EF0101;
    font-weight: bold;
    font-size: 1.2em;
}
.red_line {
    color: #FF0000;
    font-weight: bold;
    border-bottom: thin solid #FF0004;
}

.yellow_marker{
    background: linear-gradient(transparent 60%, #ffff00 0%);
    font-weight: bold;
    padding-left: 10px;
}
.yellow_marker-b{
    background: linear-gradient(transparent 100%, #ffff00 0%);
    font-weight: bold;
    padding-left: 10px;
}
.parple_marker{
 background: linear-gradient(transparent 40%, #fff799 0%);
 font-weight: bold; 
}
.tdorange {
    background-color: rgba(121,201,97,1.00);
    color: rgba(255,255,255,1.00);
    width: 150px;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
}
.tdwhite {
    background-color: rgba(243,254,222,1.00);
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    text-align: left;
    border-radius: 10px;
}
footer {
    background-color: rgba(116,171,104,1.00);
    text-align: center;
    width: 100%;
}
 #page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #7E37E2;
    opacity: 0.6;
    border-radius: 50%;
    vertical-align: middle;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
.vois {
    width: 80%;
    /* [disabled]background-color: #FCFCB6; */
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 50px;
    border-radius: 20px;
    background-image: url(../img/cb3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.voisblue {
    width: 80%;
    background-color: #CDF1FD;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 0px;
    border-radius: 20px;
}
.voisgreen {
    width: 80%;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 50px;
    border-radius: 20px;
    background-image: url(../img/cb1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.voispink {
    width: 80%;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 50px;
    border-radius: 20px;
    background-image: url(../img/cb2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#green {
    width: 100%;
    background-image: url(../img/gbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.large {
    font-size: 1.3em;
}
.skytxt {
    color: rgba(0,163,255,1.00);
}
.yellow {
    color: #FFEF00;
}
.f-left {
    float: left;
    padding-right: 10px;
}
#vois {
    background-image: url(../img/voisbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 640px) {

.movie {padding: 5px 0;}

.movie-sp {
	position: relative;
	width: 95%;
	}

.movie-sp:before {
	content:"";
	display: block;
	padding-top: 56.25%; /* iframe高さと幅の比を16:9に固定。9/16*100=56.25 */
	}

.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

}



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

	.movie_box {
	width:100%;
	margin: 0 auto;
	padding-top: 15px;
	}

	.movie_box2 {
	width:100%;
	height:230px;
	margin: 0 auto ;
	margin-bottom: 30px;
	padding-bottom: 30px;
	background: url(../img/tv.png) no-repeat top center;
	-webkit-background-size:110% auto;
	-moz-background-size:110% auto;
	-o-background-size:110% auto;
	background-size:110% auto;
	}

	.movie_box iframe {
	width:280px;
	height:160px;
	}

}

@media screen and (min-width: 401px) {

	.movie_box {
	width:100%;
	margin: 0 auto;
	padding-top: 20px;
	}

	.movie_box2 {
	width:100%;
	height:320px;
	margin: 0 auto ;
	margin-bottom: 30px;
	background: url(../img/tv.png) no-repeat top center;
	-webkit-background-size:110% auto;
	-moz-background-size:110% auto;
	-o-background-size:110% auto;
	background-size:110% auto;
	}

	.movie_box iframe {
	width:350px;
	height:190px;
	}
}

@media screen and (min-width: 460px) {

	.movie_box2 {
	height:360px;
	}
	.movie_box iframe {
	width:400px;
	height:220px;
	}
}

@media screen and (min-width: 520px) {

	.movie_box2 {
	height:400px;
	}
	.movie_box iframe {
	width:450px;
	height:250px;
	}
}

@media screen and (min-width: 594px) {

	.movie_box2 {
	height:480px;
	margin-bottom: 40px;
	}

	.movie_box iframe {
	width:500px;
	height:280px;
	}

}

@media screen and (min-width: 673px) {

	.movie_box {
	width:700px;
	margin: 0 auto;
	padding-top: 25px;
	}

	.movie_box2 {
	width:700px;
	height:490px;
	margin: 0 auto ;
	margin-bottom: 60px;
	background: url(../img/tv.png) no-repeat top;
	}

	.movie_box iframe {
	width:560px;
	height:315px;
	}
}
.mgb20 { margin-bottom: 20px; }
.wrap {
    overflow: hidden;
    width: 100%;
}
 @media only screen and (max-device-width : 480px) { 
.wrapper  {
    width: 100%;
}
header {
    background-image: url(../img/aurabg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
     img {
max-width: 100%;
height: auto;
}
}