@charset "utf-8";
/*=================================================
ぷっぷる　昭島
=================================================*/

/*-----------------------------------------------------------

	共通項目

-----------------------------------------------------------*/
	#contents section .mgt20 {margin-top:20px;}
    #contents section .mgl20 {margin-left:20px;}
    #contents section .mgr20 {margin-right:20px;}
    
    #contents section .fts9 {font-size: .9em;}
    #contents section .fts10 {font-size: 1em;}
    #contents section .fts12 {font-size: 1.2em;}
    #contents section .fts14 {font-size: 1.4em;}
    #contents section .fts16 {font-size: 1.6em;}
    #contents section .fts18 {font-size: 1.8em;}
    #contents section .fts20 {font-size:1.8em;}
    #contents section .fts24 {font-size: 2.4em;}
    #contents section .fts30 {font-size: 3em;}
    
    #contents section .red {color: #9b0032;}
	#contents section .blue {color: #1eb9ee;}
    #contents section .bold {font-weight:bold;}
    #contents section .radius {background: #9b0032; border-radius: 30px; font-family: Arial; color: #ffffff; padding: 8px 12px 8px 12px; text-decoration: none;}
    
    #contents section .attention{color:#9b0032; font-size:1em; line-height: 1.6em; clear:both; width:100%;}
	
	#contents {	width:100%;	height:auto; background: url('../img/oyacon/bg_birth2.png') 0 0 repeat-y; background-size: contain; margin: 0 auto;}
	.h2Text {display: none;}
    .subTitle {max-width: 40%; position: relative; margin-top:0;}
    .tit {max-width: 100%; position: relative; margin-top:-4%;}
    
/*====================================================
	ul.apply　MailFORM
====================================================*/
    ul.apply {width:70%; margin:8% auto;}
    ul.apply li {list-style-type: none; line-height: 0;}
    ul.apply li.btn a {
    padding: 1.2em;
    text-align: center;
    font-size: 3rem;
    color: #fff;
    text-decoration: none;
    -webkit-border-radius: 2em;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 2em;
    /* Firefox用 */
    -ms-border-radius: 2em;
    /* Internet Explorer用 */
    border-radius: 2em;
    /* CSS3草案 */
    display: block;
    border: 3px solid #9b0032;
    background: #9b0032;
}

ul.apply li.btn a:hover {
    background: #fff;
    color: #9b0032;
    border: 3px solid #9b0032;
}
	

@media only screen and (min-width:320px) and (max-width:769px){
	
    #contents section{width: 94%; margin: 0 auto; font-size: 1.2rem;}
    #contents section p.Pc{display:none;}
	#contents section p.Smp{width:100%; font-size:1.5em; line-height:1.7em; display:inherit;}
    #contents section br.pPc{display:none;}
	
    #contents section .txtBox{ width:100%; margin:0 auto; padding: .5rem;}
    #contents section .txtBox img{width: 86%; margin:0 auto;}
    #contents section .txtBox p{font-size:3.2vw;}
    #contents section .gMap{width:100%; height:150%; min-height:450px; margin:0;}
    #contents section .caption {font-size: 1.2rem;}
    
    #demonstrator .photo { width:80%; height: 80%; margin: 0 auto; flex-direction: row;}
    #demonstrator .profArea {width: 100%; margin: 0 auto;}
    #demonstrator .prof { width: 100%; display: block; flex-direction: row;}
	#contents section .prof p {font-size:100%; line-height: 180%; width:100%;}
    #contents section img.prof { width:40%; margin:5px 10px 10px 5px; border-radius: 8%;}
    #contents section img.pict { width: 60%; margin: 0 auto; display:block; clear: both;}
    
    #about dl.event .map {margin:.5em 0 0 0;}
    #about dl.event .map li {line-height: 50%;}
    
    #contents section ul.notice { width: auto; display:block; text-align: left; clear: both;}
    #contents section ul.notice li{ list-style-type: none; font-size:1.4rem; padding:1em .7em 0 .7em; width: 100%; vertical-align: top;}
    #contents section .txt_right { text-align: right; width: 100%;}
    #contents section .txt_center{ text-align: center; width: 100%;}
    #contents section .left { display: inline-block; float:left; }
    #contents section .right { display: inline-block; float:right; }
    #contents section hr.pPc { display: none;}
    
}

/* smp end */



/*----------------------------------------------------
	PC
----------------------------------------------------*/
@media only screen and (min-width:770px) and (max-width:2068px){
    #contents section {margin-bottom: 20px; top:0; left:0; }
    #contents .txtBox {width:100%;}
    #contents section .txtBox p{font-size:2.6vw;}
    #contents .gMap{width:100%; height: 120%; min-height:350px; margin: .8em 0;}
    
    #contents section p{font-size:1.5em;line-height:1.8em;}
    #contents section p.Pc{font-size:1.7em; line-height:1.7em;}
    
    #contents section p.Smp{display:none;}
    #contents section br.Smp{display:none;}
    #contents section h3.pSmp{display:none;}

    #contents section .imgSmp {display: none;}    
    #contents section hr.Smp {display: none;}
    #contents section .leftPc { display: inline-block; float:left;}
    #contents section .rightPc { display: inline-block; float:right;}
    #contents section .caption {font-size:1.6rem; clear:both; width:100%;}
    #contents section .attention{color:#9b0032; font-size:0.8em; line-height: 0.8em; clear:both; width:100%;}

	#about dl.event {width: 100%;}
	#about dl.event dt {display: inline-block; width:20%; padding: 0 1em; min-height: 2.5em; margin: 0 0 1em 0; text-align:center; vertical-align: top; }
	#about dl.event dd {display: inline-block; width:77%; padding: 0 1em; min-height: 2.5em; margin: 0; word-break: break-all; text-align: left; margin: 0 0 1em 0;}
    
    #about dl.event dt.date {display: inline-block; width: 20%; padding: 0 1em; min-height: 2.5em; margin: 2em 0 1em 0; text-align:center; vertical-align: top;}
	#about dl.event dd.date {display: inline-block; word-break: break-all; text-align: left; width: 77%; padding: 0 1em; min-height: 2.5em; margin: 0 0 1em 0;}
    #about dl.event .map {margin:.5em 0 0 0;}
    #about dl.event .map li {line-height: 50%;}
    
	
    #demonstrator .profarea {display: flex;}
	#demonstrator .prof {width: 63%; padding-right:2rem;  display:inline-block; float: right; vertical-align: middle; flex-direction: row;}
    
    #contents section .photo{width: 35%; margin-right: 1em; height:auto; display: inline-block; flex-direction: row;}
    #contents section .photo img{width: 100%; display: inline-block; min-height: 150px;}
	
    
    #contents section img.pict {width: 40%; display: inline-block; min-height: 200px;}
    #contents section ul.notice{ width: 60%; display: inline-block; float: right; vertical-align: middle;}
    #contents section ul.notice li{list-style-type: none; font-size:1.4rem; padding:1em 1em 0 1em; width: 100%; vertical-align: top;}

/* pc end */
}


/*----------------------------------------------------
	#title.titleImgBox ぷっぷる＆Friend
----------------------------------------------------*/
#title .titleImgBox {position: relative;
	width: 100%;
	margin-top: -30px;
}

#title .titleImgBox .pupple {
	margin: auto;
	animation: jump-r linear 6s infinite;
	transform-origin: center 100%;
    margin-top:-30px;
}
/*#title .titleImgBox .pupple {
	position: absolute;
	margin: auto;
	animation: jump-r linear 6s infinite;
	transform-origin: center 100%;
}
*/

#title .titleImgBox .friend_l {
    margin-top:30px;
	animation: jump linear 6s infinite;
	transform-origin: right 70%;
}
#title .titleImgBox .friend_r {
    margin-top:40px;
	animation: jump linear 6s infinite;
	transform-origin: right 70%;
}
@keyframes jump {
	0%, 44%, 10%, 25%, 40% ,99% { transform: translateY(0px); opacity: 1;}
	17% { transform: translateY(-20px) rotate(3deg);}
	30% { transform: translateY(-20px) rotate(-3deg);}
    /*	50%, 95% { opacity:0}*/
}
@keyframes jump-r {
	50%, 95%, 60%, 75%, 90% { transform: translateY(0px); opacity: 1;}
	67% { transform: translateY(-20px) rotate(3deg);}
	80% { transform: translateY(-20px) rotate(-3deg);}
/*	0%, 45%, 100% { opacity:0}*/
}

#title .titleImgBox .copy_yamaha {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 11px;
	max-width: 180px;
}
/*-------------------------------------------------------------
    MOB
-------------------------------------------------------------*/
@media only screen and (min-width:401px) and (max-width:768px){
    #title .titleImgBox {
        position: relative;
        width: 100%;
        margin-top: -2%;
    }
}

/*-------------------------------------------------------------
    MOB 2
-------------------------------------------------------------*/
@media only screen and (max-width:400px){
    #title .titleImgBox {
        position: relative;
        width: 92%;
        margin: 10% auto 0 auto;
    }
}
@font-face {
  font-family: 'NotoSansCJKjp-Regular';
  font-weight: 400;
  src: url('../font/NotoSansJP-Regular.otf');
}

@font-face {
  font-family: 'NotoSansCJKjp-Medium';
  font-weight: 500;
  src: url('../font/NotoSansJP-Medium.otf');
}

.font-18 {
  font-size: 18px;
}

.font-16 {
  font-size: 16px;
}

.font-14 {
  font-size: 14px;
  letter-spacing: 1px;
}

.wrapper {
  background: url(../img/wakuwaku/content_bg.jpg) repeat-y center 40px;
  background-size: 100%;
  margin-top: 100px;
}

.sp {
  display: none;
}

.new-wakuwaku .container {
  width: 97%;
  margin: 0 auto;
  max-width: 1100px;
}

.new-wakuwaku .inner {
  width: 95%;
  margin: 0 auto;
  max-width: 920px;
}

.new-wakuwaku .sec-mv {
  padding: 15px 0 73px;
}

.new-wakuwaku .mv-main-ttl {
  width: 84%;
  margin: 0 auto;
  max-width: 920px;
}

.new-wakuwaku .sec-mv .friends-gp {
  position: relative;
  margin-top: 65px;
}

.new-wakuwaku .sec-mv .friends-gp .friends {
  position: absolute;
  width: 15%;
  transform-origin: center 100%;
  max-width: 163px;
  animation: swing linear 3s infinite;
}

.new-wakuwaku .sec-mv .friends-gp .friends:first-child {
  top: 31%;
  left: -1%;
}

.new-wakuwaku .sec-mv .friends-gp .friends:nth-child(2) {
  top: 5.5%;
  left: 11.7%;
}

.new-wakuwaku .sec-mv .friends-gp .friends:nth-child(3) {
  top: 25.2%;
  left: 25.3%;
}

.new-wakuwaku .sec-mv .friends-gp .friends:nth-child(4) {
  position: relative;
  width: 25%;
  margin: -4.5% 0 0 40.3%;
  transform-origin: center 100%;
  max-width: 267px;
  animation: jump linear 2.5s infinite;
}

.new-wakuwaku  .sec-mv .friends-gp .friends:nth-child(5) {
  top: 33.6%;
  right: 21.9%;
}

.new-wakuwaku .sec-mv .friends-gp .friends:nth-child(6) {
  top: 1.1%;
  right: 9.5%;
}

.new-wakuwaku .sec-mv .friends-gp .friends:nth-child(7) {
  top: 33.5%;
  right: 0;
}

.new-wakuwaku .sec-mv .copy {
  width: 22%;
  margin: 20px 0 0 auto;
  max-width: 205px;
}

.new-wakuwaku .sec01 .music-school {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 72px;
  background-color: #f8ebcc;
  border-radius: 10px;
}

.new-wakuwaku .sec01 .music-school p {
  width: 75%;
  line-height: 2.2;
  color: #333333;
  font-family: 'NotoSansCJKjp-Regular';
  font-size: 16px;
  letter-spacing: 0.6px;
}

.new-wakuwaku .sec01 .music-school .left-img {
  width: 22%;
  max-width: 152px;
}

.new-wakuwaku .sec02 {
  margin: 55px auto 0;
  padding: 38px 0 0;
  background-color: #fff;
  border-radius: 10px;
}

.new-wakuwaku .sec02 table {
  width: 93%;
  margin: 0 auto;
  font-family: 'NotoSansCJKjp-Medium';
  font-size: 21px;
  max-width: 800px;
}

.new-wakuwaku .sec02 table tr {
  display: block;
  margin-bottom: 31px;
  border-bottom: 2px solid #f8ebcc;
}

.new-wakuwaku .sec02 table tr:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.new-wakuwaku .sec02 table th {
  display: inline-flex;
  width: 16%;
  vertical-align: top;
}

.new-wakuwaku .sec02 table td {
  display: inline-block;
  width: 83%;
  line-height: 1.3;
  padding: 5px 0 36px;
  color: #333333;
  letter-spacing: 1.8px;
}

.new-wakuwaku .sec02 table tr:nth-child(3) td span {
  position: relative;
  padding-left: 38px;
  color: #e5671d;
  margin-left: 10.7%;
}

.new-wakuwaku .sec02 table tr:nth-child(3) td span::before {
  position: absolute;
  top: 0;
  left: 20px;
  width: 13px;
  height: 19px;
  background: url('../img/wakuwaku/location_icon.png') no-repeat center/contain;
  content: '';
}

.new-wakuwaku .sec02 table tr:nth-child(4) td {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
}

.new-wakuwaku .sec02 table tr:nth-child(6) td {
  color: #e5671d;
}

.new-wakuwaku .sec02 table tr:nth-child(6) td span {
  color: #333333;
}

.new-wakuwaku .sec02 table tr:nth-child(7) th {
  width: 25%;
  max-width: 180px;
}
.new-wakuwaku .sec02 table tr:nth-child(7) td {
  width: 73%;
}

.new-wakuwaku .sec02 table tr:nth-child(7) th span {
  padding: 4px 22px;
}

.new-wakuwaku .sec02 table th span {
  padding: 4px 25px;
  background-color: #e5671d;
  color: #fff;
  font-weight: 500;
  border-radius: 20px;
}

.new-wakuwaku .sec02 table .pf-img {
  display: inline-block;
  width: 27.7%;
  max-width: 183px;
}

.new-wakuwaku .sec02 table .pf-txt {
  width: 70%;
}

.new-wakuwaku .sec02 table ul li {
  position: relative;
  padding-bottom: 15px;
  padding-left: 40px;
  font-size: 16px;
}

.new-wakuwaku .sec02 table ul li:last-child {
  padding-bottom: 0;
}

.new-wakuwaku .sec02 table ul li::before {
  position: absolute;
  top: 0;
  left: 5px;
  width: 20px;
  height: 24px;
  background: url('../img/wakuwaku/music_icon.png') no-repeat center/contain;
  content: '';
}

.new-wakuwaku .sec03 {
  padding: 32px 0 120px;
}

.new-wakuwaku .sec03 .sec03-main-ttl {
  width: 100%;
  margin: 0 auto;
  max-width: 586px;
}

.new-wakuwaku .sec03 .contact {
  margin: 30px auto 0;
  padding: 53px 20px 60px;
  background-color: #f8ebcc;
  font-family: 'NotoSansCJKjp-Medium';
  text-align: center;
  border-radius: 10px;
}

.new-wakuwaku .sec03 .contact h4 {
  margin-bottom: 18px;
  color: #e5671d;
  font-size: 24px;
  letter-spacing: 1.3px;
}

.new-wakuwaku .sec03 .contact p {
  color: #000000;
  font-size: 16px;
  letter-spacing: 0.4px;
}

.new-wakuwaku .sec03 .contact .form-btn {
  display: block;
  width: 100%;
  margin: 15px auto 18px;
  padding: 17px 20px;
  background: #e60039;
  color: #ffffff;
  font-size: 21px;
  max-width: 400px;
  border-radius: 10px;
}

.new-wakuwaku .sec03 .contact .phone {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  padding-left: 0px;
  font-size: 21px;
  letter-spacing: 2px;
}

.new-wakuwaku .sec03 .contact .phone::before {
  position: absolute;
  top: 0;
  left: -6px;
  width: 28px;
  height: 29px;
  background: url('../img/wakuwaku/phone_icon.png') no-repeat center/contain;
  content: '';
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(3deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
@keyframes jump {
  0% {
    transform: translateY(0);
  }

  23% {
    transform: translateY(-20px) rotate(3deg);
  }

  48% {
    transform: translateY(0);
  }

  73% {
    transform: translateY(-20px) rotate(-3deg);
  }

  90% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 1000px) {
  .wrapper {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .wrapper {
    background-size: 200%;
  }

  .new-wakuwaku .sec01 .music-school {
    padding: 30px 40px;
  }

  .new-wakuwaku .sec01 .music-school p {
    line-height: 1.7;
    font-size: 14px;
  }

  .new-wakuwaku .sec02 table {
    font-size: 18px;
  }

  .new-wakuwaku .sec02 table th {
    width: 20%;
  }

  .new-wakuwaku .sec02 table th span {
    padding: 4px 20px;
  }

  .new-wakuwaku .sec02 table tr:nth-child(3) td span {
    display: block;
    padding: 5px 0 0 18px;
    margin-left: 0;
  }

  .new-wakuwaku .sec02 table tr:nth-child(3) td span::before {
    top: 2px;
    left: 0;
  }

  .new-wakuwaku .sec02 table td {
    padding: 5px 0 30px;
    letter-spacing: 0.5px;
    width: 75%;
  }

  .new-wakuwaku .sec02 table tr {
    margin-bottom: 25px;
  }

  .new-wakuwaku .font-14 {
    letter-spacing: 0.5px;
  }

  .new-wakuwaku .sec02 table .pf-txt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.5;
    font-feature-settings: "palt";
    width: 67%;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) th {
    width: 34%;
    max-width: 150px;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) td {
    width: 64%;
  }

  .new-wakuwaku .sec02 table ul li {
    padding: 0 0 10px 20px;
  }

  .new-wakuwaku .sec02 table ul li::before {
    left: 0px;
    width: 17px;
    height: 20px;
  }

  .new-wakuwaku .sec03 .contact h4 {
    margin-bottom: 20px;
    font-size: 21px;
  }

  .new-wakuwaku .sec03 .contact p {
    font-size: 14px;
  }

  .new-wakuwaku .sec03 .contact .form-btn {
    margin: 15px auto;
    padding: 18px 20px;
    font-size: 18px;
  }

  .new-wakuwaku .sec03 .contact .phone {
    padding-left: 6px;
    font-size: 18px;
  }

  .new-wakuwaku .sec03 .contact {
    padding: 50px 20px;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) th span {
    padding: 4px 18px;
  }

  .new-wakuwaku .sec02 table .pf-img {
    width: 31%;
  }
}

@media screen and (max-width: 480px) {
  .sp {
    display: block;
  }
  .new-wakuwaku .sec-mv {
    padding: 30px 0 25px;
  }
  .new-wakuwaku .sec-mv .copy {
    margin: 0px 0 0 auto;
  }

  .new-wakuwaku .sec-mv .copy {
    width: 28%;
  }

  .new-wakuwaku .sec01 .music-school {
    padding: 20px;
  }

  .new-wakuwaku .sec01 .music-school p {
    font-size: 12px;
  }

  .new-wakuwaku .sec02 {
    margin: 25px auto 0;
  }

  .new-wakuwaku .sec02 table {
    font-size: 16px;
    letter-spacing: 0;
    width: 87%;
  }

  .new-wakuwaku .sec02 table th {
    width: 24%;
    max-width: 70px;
  }

  .new-wakuwaku .sec02 table th span {
    padding: 4px 12px;
  }

  .new-wakuwaku .font-14 {
    font-size: 12px;
  }

  .new-wakuwaku .font-16 {
    font-size: 14px;
  }

  .new-wakuwaku .font-18 {
    font-size: 16px;
  }

  .new-wakuwaku .sec02 table tr:nth-child(4) td {
    display: inline-block;
  }

  .new-wakuwaku .sec02 table .pf-txt {
    width: 100%;
  }

  .new-wakuwaku .sec02 table td {
    padding: 5px 0 25px;
    width: 73%;
  }

  .new-wakuwaku .sec02 table tr {
    margin-bottom: 20px;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) th {
    width: 100%;
    max-width: 120px;
    display: block;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) td {
    width: 100%;
    padding: 20px 0 25px;
    letter-spacing: 0;
  }

  .new-wakuwaku .sec02 table tr:nth-child(7) th span {
    padding: 4px 13px;
  }

  .new-wakuwaku .sec02 table ul li {
    padding: 0px 0 8px 35px;
    font-size: 14px;
  }

  .new-wakuwaku .sec02 table ul li::before {
    left: 10px;
    width: 14px;
    height: 17px;
  }

  .new-wakuwaku .sec02 table .pf-img {
    width: 100px;
  }

  .new-wakuwaku .sec03 {
    padding: 25px 0 70px;
  }

  .new-wakuwaku .sec03 .contact h4 {
    font-size: 18px;
  }

  .new-wakuwaku .sec03 .contact {
    padding: 30px 15px;
  }

  .new-wakuwaku .sec03 .contact p {
    font-size: 13px;
  }

  .new-wakuwaku .sec03 .contact .form-btn {
    margin: 15px auto;
    padding: 15px 20px;
    font-size: 16px;
  }

  .new-wakuwaku .sec03 .contact .phone {
    padding-left: 6px;
    font-size: 16px;
  }

  .new-wakuwaku .sec03 .contact .phone::before {
    left: -4px;
    width: 24px;
    height: 25px;
  }
}