@charset "utf-8";
/* CSS Document */

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size: 16px;color:#000;}
body{margin:0;padding:0;font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
img{vertical-align:bottom;}
ul{list-style: none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
h1,h2{margin: 0;padding:0;}

.slide_start{animation: slideinLeft 0.8s forwards;opacity: 0;}
.slide_start2{animation: slideinRight 0.8s forwards;opacity: 0;}
.slide_start3{animation: slideinTop 0.8s forwards 0.1s;opacity: 0;}
.slide_start4{animation: slideinBottom 0.8s forwards 0.3s;opacity: 0;}
.zoom_start{animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;opacity: 0;}

/*!大枠
-------------------------------------*/
#stage{margin:0 auto;padding:0;width:100%;text-align:center;position: relative;}
#pc_area{position: fixed;bottom:2em;right:2em;}
#pc_area p.btn{margin: 0;animation: fuwafuwa 1.8s ease-in-out infinite alternate-reverse;}
#pc_area p.btn img{width:90%;max-width: 314px;}

.movie{width: 100%;height: 100%;position: fixed;z-index: -1;}
.movie video{width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}

@media screen and (max-width:1200px) {	
#pc_area{display: none;}
}

/*!スマホ枠
-------------------------------------*/
#sp_main{display: flex;flex-direction: column;align-items: center;max-width: 600px;margin: 0 auto;background: #fff;overflow: hidden; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);}

@media screen and (max-width:600px) {	
#sp_main{max-width: 100%;}
}
	
/*!header
-------------------------------------*/
header{width: 100%;margin: 0 auto;position: relative;}
header #img{margin: 0 auto;display: block;}
header #img img{width: 100%;}
header #obi{animation: slideinTop 1s forwards;position: absolute;top:2em;right:3em;opacity: 0;}
header #obi2{animation: slideinTop 1s forwards;position: absolute;top:6em;right:8em;opacity: 0;}
header #title{animation: slideinLeft 1s forwards 0.5s;position: absolute;bottom:5em;left:1em;opacity: 0;}
header #logo{margin: 0 1em 0 0;animation: zoomIn 0.8s forwards 1s;position: absolute;bottom:2.6em;left:1.2em;opacity: 0;width: 90%;}
header #title img{width: 100%;}
header #logo img{width: 100%;}

@media screen and (max-width:600px) {	
header #title{bottom:4em;margin: 0 1em 0 0;}
header #obi{width: 15%;}
header #obi img{width: 100%;}
header #obi2{width: 15%; right: 7.2em;}
header #obi2 img{width: 100%;}
}

/*!main
-------------------------------------*/
main{width: 100%;margin: 0 auto;}

/*!心で踊る
-------------------------------------*/
#dance{margin: 0;padding:0;}
#dance h3{margin: 5em auto 0;padding:0;background: url("img/dance_bg.png")top center no-repeat;width: min(440 / 600 * 100vw, 440px);height: min(94 / 600 * 100vw, 94px);position: relative;}
#dance span.kokoro{position: absolute;top:0;left:min(54 / 600 * 100vw, 54px);width:min(88 / 600 * 100vw, 88px);hight:min(83 / 600 * 100vw, 83px);animation: danceAni 1.4s ease infinite;}
#dance span.odoru{position: absolute;top:0;width:min(83 / 600 * 100vw, 83px);hight:min(82 / 600 * 100vw, 82px);animation: danceAni 1.4s ease infinite 0.5s;}
#dance p{margin: 0.5em 0 5em;display: block;font-size: 1.1em;font-weight: bold;}
#dance img{width: 100%;}
#dance .dance_img{opacity: 0;}

@media screen and (max-width:600px) {	
#dance h3{background-size:contain;}
}

/*!Message
-------------------------------------*/
#message{margin: 0;padding:0;}
#message h3{margin: 4em auto 3em;padding:0;opacity: 0;}
#message h3 img{width: 60%;max-width: 288px;}
#message img{width: 100%;}

.youtube {width: 100%;aspect-ratio: 16 / 9;}
.youtube iframe {width: 100%;height: 100%;}

/*!Motto
-------------------------------------*/
#motto{margin: 0 auto;padding:2em 0;line-height: 3em}
#motto p{opacity: 0;background: #f3d5dd;font-weight: bold;font-size: 1.2em;width: fit-content;padding: 0 1em;margin: 1em auto;}
/*mark {background: linear-gradient(transparent 40%, #f3d5dd 10%);font-weight: bold;}*/

/*!谷桃子バレエ団で叶えられる夢があります
-------------------------------------*/
#dream{margin: 0;padding:5em 0;background: #F2EAE0;
background: linear-gradient(180deg,rgba(242, 234, 224, 1) 0%, rgba(211, 198, 170, 1) 100%);}
#dream h3{font-size: 2.6em;font-weight: bold;line-height: 1.2em;margin: 0;}
#dream div.img{padding: 5em 0 0;position: relative;}
#dream div.img p.dream_text01{margin: 0;top:3em;left:2em;position:absolute;opacity: 0;width: 40%;}
#dream div.img p.dream_text02{margin: 0;top:1em;right:2em;position:absolute;opacity: 0;width: 9%;max-width: 58px;}
#dream div.img p.dream_text03{margin: 0;top:1em;right:18%;position:absolute;opacity: 0;width: 9%;max-width: 58px;}
#dream div.img p.dream_text04{margin: 0;top:1em;right:31%;position:absolute;opacity: 0;width: 9%;max-width: 58px;}
#dream img{width: 100%;}

@media screen and (max-width:600px) {	
#dream h3{font-size: 8vw;}
#dream h4{font-size: 4.4vw;}
#dream div.img p.dream_text01{left:1em;}
#dream div.img p.dream_text02{right:1em;}
#dream div.img p.dream_text03{right:16%;}
#dream div.img p.dream_text04{right:29%;}
}

/*!谷桃子バレエ団の魅力
-------------------------------------*/
#charm{margin: 3em 0 0;padding:0 0 5em;background:url("img/charm_bg.png")top right repeat-y;background-size: 100%;}
#charm h3{margin: 0;padding:3em 0;}
#charm h3 img{max-width: 298px;width:70%;opacity: 0;}
#charm div.img{width: 90%;position: relative;}
#charm div.img img{width: 100%;opacity: 0;}
#charm div.img .text{position: absolute;background: #fff;z-index: 10000;padding: 0.5em 1em;font-weight: bold;font-size: 1.5em;opacity: 0;top: 30px;}
#charm div.text_box{text-align: left;margin: 2em;}

/*!“2025年10月公演から”一緒に舞台に立ちましょう
-------------------------------------*/
#butai{margin: 0;padding:0;}
#butai h3{margin: 0;padding:5em 0 1em;opacity: 0;}
#butai h3 img{width: 90%;}
#butai div.text_box{text-align: left;margin: 1em 2em 2em;}
#butai p.scroll-in{opacity: 0;}
#butai p.scroll-in img{width: 100%;}

/*!谷桃子バレエ団のオーディションを受けようとしてくださってるみなさんへ。
-------------------------------------*/
#minasane{margin: 1em;padding:0.5em 1em;background:#e5e5e5;}
#minasane h3{text-align: right;position: relative;}
#minasane h3 img{width: 50%;}
#minasane div.text_box{text-align: left;margin: 0;font-size: 0.9em}
#minasane p.right{text-align: right;font-size: 0.9em}

#minasane h3 span.minasane_text01{margin: 0;top:0;left:44%;position:absolute;opacity: 0;width: 10%;max-width: 58px;}
#minasane h3 span.minasane_text02{margin: 0;top:0;left:31%;position:absolute;opacity: 0;width: 10%;max-width: 58px;}
#minasane h3 span.minasane_text03{margin: 0;top:0;left:18%;position:absolute;opacity: 0;width: 10%;max-width: 58px;}
#minasane h3 span.minasane_text04{margin: 0;top:0;left:5%;position:absolute;opacity: 0;width: 10%;max-width: 58px;}
#minasane h3 span img{width: 100% !important;}

/*!CHALLENGE
-------------------------------------*/
#challenge{margin: 0;padding:0;}
#challenge div.img{opacity: 0;}
#challenge div.img img{width: 100%;}
#challenge div.text{position: relative;text-align: left;padding: 3em 2em 2em;line-height: 2em;background: #f2eae0;}
#challenge div.text h3{position: absolute;top: -2em;left: 1em;width:70%;opacity: 0;}
#challenge div.text h3 img{max-width: 343px;width:100%;}
#challenge div.text p.black{color:#fff;background: #000;padding: 0.5em 1em;font-weight: bold;font-size: 1.2em;width: fit-content;opacity: 0;}

/*!今すぐエントリー
-------------------------------------*/
#entry{margin: 0;padding: 3em 2em;}
#entry h3{opacity: 0;}
#entry h3 img{max-width:490px;width: 90%;}
.scroll {position: relative;}
.scroll-border {position: relative;top: 10px;width: 100%;height: 100px;overflow: hidden;}
.scroll-border::before {content: "";display: block;position: absolute;width: 1px;height: 40px;top: 0;left: 0;right: 0;background: #333;animation: scrollbar 2.0s ease-in-out infinite;margin: auto;}

#entry h4{padding: 0.5em;font-weight: bold;background: #E7C6CE;background: linear-gradient(90deg, rgba(231, 198, 206, 1) 0%, rgba(234, 224, 211, 1) 100%);text-shadow: 1px 1px 1px #fff;opacity: 0;border-radius: 100px;}
#entry div.text_box{text-align: left;opacity: 0;}

/*!振込先
-------------------------------------*/
#bank{margin: 2em;padding: 1em 2em;background: #c7dade;text-align: left;}

/*!注意事項
-------------------------------------*/
#note{margin: 2em;padding: 1em 2em;text-align: left;font-size: 0.9em;}

/*!footer
-------------------------------------*/
footer{margin: 0;padding: 2em 2em 1em;text-align: left;background:#c7dade;font-size: 0.9em;width: 100%;}
footer span{margin-top: 1em;display: block;text-align: center;font-size: 0.8em;}

.sp_kotei{display: none;}

@media screen and (max-width:600px) {	
.sp_kotei{position: sticky;bottom:0;width: 100%;background: #dab1bb;z-index: 10000000;display: block;}
.sp_kotei a{color:#fff;font-weight: bold;text-align: center;padding: 1.2em;display: block;width:100%;font-size: 1.4em}
}


/*!アニメーション
-------------------------------------*/
/*上から下*/
@keyframes slideinTop{
  0% {transform: translateY(-200px);}
  100% {transform: translateY(0);opacity: 1;}
}

/*左から右*/
@keyframes slideinLeft{
  0% {transform: translateX(-50px);}
  100% {transform: translateX(0);opacity: 1;}
}

/*右から左*/
@keyframes slideinRight{
  0% {transform: translateX(50px);}
  100% {transform: translateX(0);opacity: 1;}
}

/*上から下*/
@keyframes slideinTop{
  0% {transform: translateY(-50px);}
  100% {transform: translateY(0);opacity: 1;}
}

/*下から上*/
@keyframes slideinBottom{
  0% {transform: translateY(50px);}
  100% {transform: translateY(0);opacity: 1;}
}

/*上下*/
@keyframes danceAni {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-20px);}
}

/*ズームイン*/
@keyframes zoomIn {
  0% {transform: scale(0.8);opacity: 0;}
  100% {opacity: 1;transform: scale(1);}
}

/*左右*/
@keyframes btnAni {
  0%  { transform: scale(1); }
  40% { transform: scale(1); }
  50% { transform: scale(0.95); }
  60% { transform: scale(1); }
  70% { transform: scale(0.95); }
  80% { transform: scale(1); }
}

@keyframes scrollbar {
  0% {height: 0;top: 0;}
  30% {height: 100%;}
  100% {top: 100%;}
}

@keyframes fuwafuwa {
  0% {transform: translateY(-10%);}
  100% {transform: translateY(10%);}
}