@charset "utf-8";


/* ----------------------------------------------------------------------------
	トップページ
	index.html
---------------------------------------------------------------------------- */
body {
}

p.froBnr {
    position: fixed;
    bottom: 0px;
    right: 3px;
    z-index: 100;
    font-size: 0;
    line-height: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

#wrap{
overflow:hidden;
}

#wrap p.image{
	width: 960px;
	margin: 0 auto;
	font-size: 0;
	line-height: 0;
}

header .youtubeWra{
	position: relative;
	width: 960px;
	margin: 0 auto;
}

header .youtubeWra .youtube{
	position: absolute;
	bottom: 10px;
	right: 0;
}

#section1 {	background: url(../img/image1_bg.jpg) no-repeat top center;}
#section2 {	background: url(../img/image2_bg.jpg) no-repeat top center;}
#section3 {	background: url(../img/image3_bg.jpg) no-repeat top center;}
#section4 {	background: url(../img/image4_bg.jpg) no-repeat top center;}
#section5 {	background: url(../img/image5_bg.jpg) no-repeat top center;}
#section6 {	background: url(../img/image6_bg.jpg) no-repeat top center;}


#section3Wra {
	position: relative;
	width: 960px;
	height: 534px;
	margin: 0 auto;
}

#section3 p.image {
	position: absolute;
	z-index: 1;
}

#section3 #ofa2 {
	/*position: absolute;*/
	z-index: 5;
	bottom: 180px;
}

#ofa3 {
	margin: 90px auto 0 auto;
}

#ofa4 {
	margin: 90px auto 0 auto;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
#section1 {	background: url(../img/image1_bg@2x.jpg) no-repeat top center; background-size: 1860px 714px;}
#section2 {	background: url(../img/image2_bg@2x.png) no-repeat top center; background-size: 1860px 1436px;}
#section3 {	background: url(../img/image3_bg@2x.jpg) no-repeat top center; background-size: 1860px 534px;}
#section4 {	background: url(../img/image4_bg@2x.png) no-repeat top center; background-size: 1860px 1372px;}
#section5 {	background: url(../img/image5_bg@2x.png) no-repeat top center; background-size: 1860px 1612px;}
#section6 {	background: url(../img/image6_bg@2x.png) no-repeat top center; background-size: 1860px 2100px;}
}


div.btnHed{
    position: relative;
	width: 637px;
	margin: 0 auto;
}

div.btnHed p.btn1{
    position: absolute;
	width: 637px;
	margin: 0;
	font-size: 0;
	line-height: 0;
    top:-75px;
}

div.btnHed p.btn2{
	display: inline;
	float: left;
	width: 306px;
	margin: 70px 0 21px 0px;
	font-size: 0;
	line-height: 0;
}

div.btnHed p.btn3{
	display: inline;
	float: right;
	width: 306px;
	margin: 70px 0px 21px 0;
	font-size: 0;
	line-height: 0;
}

div.btn{
	width: 960px;
	margin: 0 auto;
}

div.btn p.btn1{
	float: left;
	width: 306px;
	margin: 20px 0 29px 0;
	font-size: 0;
	line-height: 0;
}

div.btn p.btn2{
	display: inline;
	float: left;
	width: 307px;
	margin: 20px 0 29px 23px;
	font-size: 0;
	line-height: 0;
}

div.btn p.btn3{
	display: inline;
	float: right;
	width: 306px;
	margin: 20px -6px 29px 0;
	font-size: 0;
	line-height: 0;
}


div#btn1.itemArea p.title1 {
	padding: 13px 0 6px 0;
	background-color:#DF2D2D;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

div#btn2.itemArea p.title1 {
	padding: 13px 0 6px 0;
	background-color:#209AA7;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

div#btn3.itemArea p.title1 {
	padding: 13px 0 6px 0;
	background-color:#47AC38;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}


.itemArea p.title2 {
	padding: 15px 0 12px 0;
	background-color:#EFE8BB;
}

.itemArea p.title3 {
	padding: 10px 0 7px 0;
	background-color:#EFE8BB;
}

.itemArea p.title4 {
	padding: 0px 0 10px 0;
}

.itemArea p.title5 {
	padding: 0px 0 20px 0;
}

.btnArea {
	margin: 30px 0 10px 26px;
}

.btnArea p {
	display: inline;
	float: left;
	width: 211px;
	text-align: left;
	margin: 0 0 15px 14px;
}

.ChangeElem_Btn_Content {

}

.ChangeElem_Btn_Content p{
	display: inline;
	float: left;
	width: 83px;
	text-align: left;
	margin: 15px 0 15px 9px;
}

.ChangeElem_Btn_Content p			{ color: #785E34; text-decoration: none; transition: 0.2s ; -webkit-transition: 0.2s ;}
.ChangeElem_Btn_Content p:link		{ color: #785E34; text-decoration: none;}
.ChangeElem_Btn_Content p:visited	{ color: #785E34; text-decoration: none;}
.ChangeElem_Btn_Content p:hover		{ color: #519181; text-decoration: none; opacity: 0.5 ; cursor: pointer;}
.ChangeElem_Btn_Content p:active	{ color: #519181; text-decoration: none;}


.none{
  display: none;
}


.ChangeElem_Panel{
  display: none;
  list-style: none;
}

.itemArea ul{
padding-inline-start: 0px;
}



.efriendsWra {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.efriendsWra p.btn1 {
	position: absolute;
	top: 365px;
	left: 150px;
}

.efriendsWra p.btn2 {
	position: absolute;
	top: 1634px;
	left: 275px;
}



/* ----------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------- */

footer {
	padding: 90px 0;
}

footer p.copyright {
    padding: 28px 0 0 0;
    font-size: 100%;
    line-height: 1;
    color: #8E8D85;
}




/* ----------------------------------------------------------------------------
	animateArea
---------------------------------------------------------------------------- */

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}


.btn2{
  animation-delay: 0.1s; /* アニメーション開始時間 */
}

.btn3{
  animation-delay: 0.2s; /* アニメーション開始時間 */
}



#section2 .aniArea {
	position:relative;
	width: 960px;
	height: 1436px;
	margin: 0 auto;
}

#section2 .aniArea .image2_ani_1 {
	position: absolute;
	z-index: 5;
	top: 54px;
	left: 98px;
  animation-delay: 0.1s; /* アニメーション開始時間 */
}

#section2 .aniArea .image2_ani_tamahiyo {
	position: absolute;
	z-index: 5;
	top: 256px;
	right: 30px;
  animation-delay: 0.1s; /* アニメーション開始時間 */
}

#section2 .aniArea .image2_ani_2 {
	position: absolute;
	z-index: 5;
	top: 250px;
	left: 0px;
  animation-delay: 0.1s; /* アニメーション開始時間 */
}

#section2 .aniArea .image2_ani_3 {
	position: absolute;
	z-index: 5;
	top: 960px;
	left: 529px;
  animation-delay: 0.1s; /* アニメーション開始時間 */
}

#section2 .aniArea .image2_ani_4 {
	position: absolute;
	z-index: 5;
	top: 893px;
	left: 0px;
}



#section3 .aniArea {
	position:relative;
	width: 960px;
	height: 534px;
	margin: 0 auto;
}

#section3 .aniArea .image3_ani_1 {
	position: absolute;
	z-index: 5;
	top: 100px;
    right: 640px;
}


#section4 .aniArea {
	position:relative;
	width: 960px;
	height: 1372px;
	margin: 0 auto;
}

#section4 .aniArea .image4_ani_1 {
	position: absolute;
	z-index: 5;
	top: 83px;
	left: 183px;
  animation-delay: 0.5s; /* アニメーション開始時間 */
}

#section4 .aniArea .image4_ani_2 {
	position: absolute;
	z-index: 5;
	top: 211px;
	left: 0px;
}

#section4 .aniArea .image4_ani_3 {
	position: absolute;
	z-index: 5;
	top: 211px;
	left: 503px;
  animation-delay: 0.5s; /* アニメーション開始時間 */
}

#section4 .aniArea .image4_ani_4 {
	position: absolute;
	z-index: 5;
	top: 708px;
	left: 0px;

}

#section4 .aniArea .image4_ani_5 {
	position: absolute;
	z-index: 5;
	top: 708px;
	left: 503px;
  animation-delay: 0.5s; /* アニメーション開始時間 */
}


#section6 .aniArea {
	position:relative;
	width: 960px;
	margin: 0 auto;
}


#section6 .ani_atyan {
	position: absolute;
	z-index: 5;
	top: 1811px;
	right: -188px;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}