html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: 'M PLUS 1p', sans-serif;
  	color: #34495e;
	background-image: url(../img/haikei_leftB.webp), url(../img/haikei_rightB.webp);
  	background-position:left 10px center,right 10px center;
	background-repeat:repeat-y,repeat-y;
	background-size:5vw;
}
html {
  	box-sizing: border-box;
}
*, *:before, *:after {
  	box-sizing: inherit;
}
:root {
  	--blue: #34495e;
  	--green: #e74c3c;
  	--yellow: #C9C243;
  	--orange: #FFA644;
  	--red: #fcc4dc;
}
main, head_info{    
	max-width: 1200px;
	margin: 3% auto;
 	padding: 20px;
	text-align: center;
}
head_info {
  	padding: 20px 5px 0;
  	position:relative;
}
.logo-img{
  	transition-duration: .5s;
	margin-left: 15%;
	width:180px;
	height:138px;
}
.logo-img :hover, .access:hover, .reserve:hover, .tel:hover {
    -webkit-transform:translate(3px,3px);
    transform:translate(3px,3px)
}
.center_logo-img{
	text-align: center;
	display: inline-block;
	width: 60%;
}
.center_logo-img img{
	display:inline-block;
	width:480px;
	height:133px;
}
.school_social{
	padding-right:2px;
	display:block;
	position:fixed;
	top:15px;
	right:7%;
	z-index:1;
}
.school_social img{
	width:33px;
	height:33px;
}
.base_studio{
	position: relative;
	line-height: 0.3rem;
	font-size: 14px;
	width: 352px;
	top: -0.5em;
	text-align: center;
	display: block;
	margin:0 auto 0.2rem;
}
a{
	text-decoration:none;
}
.base_studio span{
	font-size:17px
}
.center img{
	display:block;
	margin:0 auto;
	width:250px;
	height:80px;
}
.options ul{
	height:50px;
  	display: flex;
  	padding: 5px 2px 5px 0;
  	border-radius: 3px;
}
.options li {
	margin: 0 auto 5px;
	padding-right:3px;
	line-height:1em;
	list-style:none;
}
.studio-link a{
	background:url(../img/school_button.webp) left top no-repeat;
	background-size:20px 20px;
	display:block;
	margin:6% 2px;
 	text-decoration: none;
  	font-size: 0.9em;
  	color: var(--blue);
}
.studio-link a:hover{
	background:url(../img/school_buttonB.webp) left top no-repeat;
	background-size:20px 20px;
	text-decoration:underline;
}
.studio-link a:first-letter{
	font-size:20px;
}
.pankuzu ul {
	background-color:#fcd2e4;
  	width: 100%;
  	padding-left: 5.8%;
	opacity: 0.75;
}
.pankuzu li{
  	margin-right: -4px;
 	display:inline-block;
 	list-style: none;
}
.pankuzu li a {
  	position: relative;
    display: flex;
	padding:0 2px;
	margin-right:11px;
    height: 20px;
   	line-height: 20px;
    text-decoration: none;
    color: #0b0a0a;
    background: #fcd2e4;
    font-size: 13px;
    transition: 0.3s;
}
.pankuzu li a:hover{
    transform: translateY(-0.3em);
	background-color:#fc9eb4;
}
.school_slide{
	border-top:none;
}
h2 {
 	font-size: 1em;
 	padding: 5px;
}
p {
  	padding: 10px;
	line-height: 25px;
}
.school_slide {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
   	width: 90%;
   	left: 50%;
    margin-left: -45%;
    overflow: hidden;
}
.school_slide ul {
	text-align:center;
    display: -webkit-flex;
    display: flex;
   	-webkit-flex-flow: row nowrap;
   	flex-flow: row nowrap;
    width: 1600px;
    margin: 0;
    padding: 0;
}
.violin_slide{
    display: inline-block;
    margin: 0 1px 0 0;
   	list-style: none;
    text-align: center;
}
.violin_slide a {
    display: block;
  }
.violin_slide img {
	border-radius:4%;
	width:300px;
	height:225px;
    display: block;
  }
.violin_slide a:hover {
    opacity: .7;
}
.school_slide ul:first-child {
    -webkit-animation: loop 40s -20s linear infinite;
    animation: loop 40s -20s linear infinite;
    -webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
    will-change: transform;
}
.school_slide ul + ul {
    -webkit-animation: loop2 40s  linear infinite;
    animation: loop2 40s linear infinite;
}
.school_slide:hover ul {
    animation-play-state: paused;
}
  @-webkit-keyframes loop  {
0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
}
  @-webkit-keyframes loop2 {
0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
}
}
.school_main{
	margin:0 auto;
}
.school_main h3 lite-youtube{
	text-align:center;
	margin:0 auto;
	border-radius:20px;
}
.center{
	text-align:center;
	margin:0 auto;
}
.flex{
	display: flex;
 	flex-direction: row;
	margin: 0.5em 3em;
	max-width: 87%;
	align-items: flex-start;
}
#school_main_photo{
	width:420px;
	height:507px;
	border-radius:5%;
	margin: 4em 2em 1em 1em;
	}
.school_info{
	margin-top:2.5rem;
	text-align: left;
	}
.info2{
	width:80%;
	margin: 15px auto 10px;
}
ul.list {
	list-style: url(../img/listcap.webp);
    list-style-position: inside;
    }
.list li{
	font-size:15px;
	line-height: 25px;
 	margin-top: 19px;
}
.cards, .cards2, .cards3 {
  	max-width: 1200px;
  	text-align:center;
}
.cards p{
	max-width: 80%;
	margin: 0 auto;
	text-align: left;
}
.school_line{
	border-top: 45px dashed var(--red);
	border-image:url(../img/nikukyu_line.webp) 70 repeat;
  	margin-bottom: 5px;
	}
.bigtitle {
  	padding: 0;
}
.bigtitle-title {
	text-align:center;
  	height:56px;
	margin-bottom:1em;
  	font-size:24px;
  	color:#05ce8c;
    text-shadow: 3px 3px 1px white;
}
.music, .dance, .school_access{
  	position: relative;
  	border-radius:50%;
  	display:inline-block;
  	width:380px;
  	height:380px;
  	margin:0 15px 35px 10px;
  	padding:35px 0 ;
  	background-image:linear-gradient(315deg,#4cdff740,#bdf6fc59);
  	color:#fff;
  	text-align:center;
  	font-weight:700;
	transition-duration: .5s;
}
.school_access{
	width:400px;
  	height:400px;
  	padding:0 0 ;
  	background-image:linear-gradient(315deg,#f78d96d6,#ff81b69c);
}
.studio-img3  {
  	height: 250px;
  	width: 100%;
  	border-radius:5px;
  	object-fit:contain;
}
.violin-title, .violin-title2, .violin-title3{
  	color: #00f;
  	position: absolute;
  	top: 42%;
  	left: 1.5%;
  	text-shadow: 2px 2px 1px white;
	font-weight:bolder;
  	font-size: 24px;
  	padding: 10px 1px;
}
.violin-title1,.violin-title2{
	color:#f09;
	text-shadow: 2px 2px 1px white;
	font-weight:bolder;
  	font-size: 18px;
}
.violin-title3{
	top:5%;
	left:25%;
	color:#9921d1;
}
.violin-title:first-letter, .violin-title2:first-letter{
  	font-size:44px;
  	padding: 2px;
}
.price2:first-letter{
  	font-size:36px;
  	padding: 2px;
}
.lesson_info, .teachers_profile, .access {
	font-size:24px;
  	color:#00F;
  	text-shadow: 3px 3px 1px white;
	margin-bottom: 10px;
	height:50px;
	text-align:left;
}
.dance_studio{
  	color:#F09;
}
.school_access {
  	color:#9921d1;
}
.school_access:first-letter, .bigtitle-title:first-letter,
.info:first-letter {
	font-size:36px;
}
.price, .price2{
	text-shadow: 1px 1px 1px #00f;
	text-align:right;
	font-weight:bold;
	font-size: 16px;
	line-height:19px;
	display:block;
	position:absolute;
	right:2%;
	top:45%;
}
.price2{
	text-shadow: 1px 1px 1px #f09;	
}
lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 560px;
	margin:0 auto;
	border-radius:20px;
}
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
lite-youtube > .lty-playbtn {
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center/68px 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}
.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
.violin_aqua, .violin_pink {
	position: relative;
	overflow: hidden;
	margin: 18px 53px 5px;
	width: 280px;
	height: 280px;
	color: #480854;
	text-align: left;
	font-size: 16px;
	background-color: none;
}
.violin_pink {
	margin: 0;
	width: 400px;
	height: 400px;
	color: #480854;
}
.violin_aqua *, .violin_pink * {
  	-webkit-box-sizing: border-box;
  	box-sizing: border-box;
  	-webkit-transition: all 0.35s ease;
  	transition: all 0.35s ease;
}
.violin_aqua img {
  	width: 280px;
	height: 280px;
  	backface-visibility: hidden;
  	vertical-align: top;
}
.violin_pink img {
  	width: 400px;
  	height:400px;
  	backface-visibility: hidden;
  	vertical-align: bottom;
}
.violin_aqua:after, .violin_aqua figcaption,
.violin_pink:after, .violin_pink figcaption{
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
}
violin_pink:after, .violin_pink figcaption {
  	height:180px;
  	top: 60%;
 }
.violin_aqua:after, .violin_pink:after {
  	content: '';
  	background-color:rgba(255,255,255,0.85);
  	-webkit-transition: all 0.35s ease;
  	transition: all 0.35s ease;
  	opacity: 0;
}
.violin_pink:after {
  	margin-top:220px;
}
.violin_aqua figcaption {
	width:300px;
  	z-index: 1;
  	padding: 20px 25px 0 6px;
}
.violin_aqua h2, .violin_aqua.links {
  	margin: 5px 15px 8px 15px;
  	padding: 0;
}
.violin_aqua h2, .violin_pink h2 {
  	line-height: 1.1em;
  	font-weight: 600;
  	font-size: 14px;
  	text-transform: uppercase;
	text-align:center;
  	opacity: 0;
}
.violin_pink h2 {
	padding-left:15px;
	margin-bottom:0.2em;
	top:60%;
 }
.violin_aqua p, .violin_pink p {
	line-height:16px;
  	font-size: 12px;
  	font-weight: 300;
  	letter-spacing: 1px;
  	opacity: 0;
 	top: 50%;
  	-webkit-transform: translateY(40px);
  	transform: translateY(40px);
}
.violin_pink p {
	padding: 0 20px 0 30px;
  	font-size: 12px;
  	top: 60%;
}
.violin_pink:hover p.gmap {
	text-align:center;
	font-weight:600;
}
.violin_pink a, .violin_aqua a {
	font: bold ;
	color:#080e54;
 	position: absolute;
  	bottom: 0;
}
.violin_aqua a{
  	top: 0;
 	left: 0;
  	right: 0;
}
.violin_aqua:hover img, .violin_aqua.hover img  {
  	zoom: 1;
 	filter: alpha(opacity=40);
  	-webkit-opacity: 0.4;
  	opacity: 0.4;
}
.violin_pink:hover:after,.violin_pink.hover:after,
.violin_aqua:hover:after,.violin_aqua.hover:after  {
  	opacity: 1;
  	position: absolute;
  	top: 10px;
  	bottom: 10px;
}
.violin_aqua:hover:after, .violin_aqua.hover:after {
  	left: 10px;
  	right: 10px;
}
.violin_aqua:hover h2, .violin_aqua.hover h2,
.violin_aqua:hover p, .violin_aqua.hover p,
.violin_pink :hover h2, .violin_pink.hover h2,
.violin_pink :hover p, .violin_pink.hover p {
  	-webkit-transform: translate(0px, 0px);
  	transform: translate(0px, 0px);
  	opacity: 1;
}
.violin_pink figcaption {
	width:400px;
	height:180px;
  	z-index: 1;
  	padding: 1px 25px;
}
.violin_pink h2, .violin_pink.links {
  	padding: 0 auto 5px;
}
.violin_pink:hover img, .violin_pink.hover img {
  	zoom: 1;
  	filter: alpha(opacity=70);
  	-webkit-opacity: 0.7;
  	opacity: 0.7;
}
.school_business{
	margin:0 auto;
	text-align:center;
	}
.business_info{
	position:relative;
	display:inline-block;
	min-width:200px;
	margin:auto;
	line-height:18px;
	font-size:14px;
}
.business_info h3, .business_info p{
	text-align:left;
	display:block;
	width:200px;
}
.business_info a img{
	position:relative;
	display:block;
	width:130px;
	height:100px;
	text-align:center;
}
.school_pv{
	position:relative;
	display:inline-block;
	right:-8%;
}
.school_pv lite-youtube{
	border-radius:20px;
	width:500px;
	height:100%;
}
.reserve, .tel{
	border-top:none;
  	position: fixed;
  	border-radius:50%;
 	bottom: 10px;
  	margin: 0 2%;
  	right:5px;
    transition-duration: .5s;
}
.reserve{
	right:160px;
}
.reserve img, .tel img{
  	transition-duration: .5s;
	width:187px;
	height:156px;	
}
.tel img{
	width:156px;
}
.reserve img:hover, .tel img:hover {
	border-radius:10%;
	background: #ef92a3;
}
.tel img:hover {
	border-radius:10%;
	background: #b8b9fc;
}
.subnavi {
	margin-top:5px;
	margin-bottom:0;
    	padding: 3px;	
} 
.subnavi ul{
	line-height:24px;
   	padding: 0px; 	
   	margin: 1% 7%;
	text-align:center;
} 
.violin_subnavi {
	font-size:14px;
   	display: inline-block; 	
   	margin-right: 0.7em;
} 
.violin_subnavi a { 
   	text-decoration:underline;	 
} 
.violin_subnavi a:hover{ 
   	border-bottom: dotted 1px #fff;	 
}
.school_bottom_info{
	display:block;
	margin:0 auto;
	width:255px;
	text-align:center;
}
.school_bottom_info a{
	text-decoration:none;
}
.school_bottom_info h3, .bottom_tel a{
	font-size:22px;
	line-height:24px;
}
.school_bottom_info p{
	font-size:15px;
	line-height:1.5em;
	margin:1em auto 0;
}
.school_bottom_info h3{
	margin:0 auto
}
.copyright {
	width:100%;
	border-top:none;
	margin-top:0;
	text-align:center;
	font-size:14px;
	padding-top:25px;
}
@media (max-width: 769px) {	
.flex{
	display:flex;
	flex-direction:column; 
}
img.logo-img {
    padding-top: 2rem;
    width: 120px;
	margin-left:10%
}
.center_logo-img img{
    padding-top: 2rem;
    width: 310px;
}
.school_info {
	font-size:14px;
	line-height:20px;
	vertical-align:top;
	margin-top:2%;
}
#school_main_photo{
	display: block;
    margin: 0.5em auto;
}
.school_pv{
	right:0
}
.business_info h3, .business_info p{ 
	display:block;
	position:relative;
	right:-40%
}
.business_info a {
	display:inline-block;
	position:absolute;
        	left:-30%;
}
.reserve{
	bottom:165px;
	right:1%;
}
.reserve img{
	width:160px;
}
}
@media (max-width: 480px) {
.school_slide ul {
    	width: 1280px;
}
.school_slide li img {
	width:240px;
	height:180px;
}
main {    
  	margin: 0 2px;
  	padding: 2px;
}
img.logo-img {
	width:105px;
	height:112px;
}
.center_logo-img img{
	width: 220px;
	height:70px;
	padding-top:0;
}
#school_main_photo{
	width:280px;
	height:338px;
	border-radius:5%;
	margin: 2em 1em 1em;
}
.base_studio{
	position:absolute;
	line-height:1rem;
	font-size:11px;
	top:9em;
	left:15%;
}
.base_studio span{
	  font-size:14px
}
.music, .dance, .school_access  {
  	width:300px;
  	height:300px;
  	margin:0 3px 40px 3px;
  	padding:25px 0 15px;
}
.dance , .school_access{
  	background-image:linear-gradient(315deg,#fc7e84,#fcb0b6);
}
.school_access{
  	padding:0 0 ;
  	background-image:linear-gradient(315deg,#471860,#7517c6);
}
.violin-title, .violin-title2{
	top:39%
} 
.violin-title3{
	top:1%;
	left:20%;
  }
.price, .price2{
	top:42%
}
.studio-img3{
	height:300px;
	font-weight:normal;
}
.studio-link a{
    font-size: 0.8em;
  }
.violin_aqua {
	margin: 18px 45px 5px;
	width: 212px;
	height: 212px;
}
.violin_aqua img {
  	width: 212px;
	height:212px;
  	backface-visibility: hidden;
  	vertical-align: top;
}
.violin_aqua figcaption {
	width:212px;
  	z-index: 1;
  	padding: 8px 2px 0 8px;
}
.violin_aqua h2, .violin_aqua .links {
  	width: 300px;
  	margin: 2px 12px 4px 10px;
  	padding: 0;
}
.violin_pink {
	width: 300px;
	height: 330px;
}
.violin_pink:after {
  	content: '';
  	margin-top:160px;
}
.violin_pink img {
  	width: 300px;
  	height:300px;
  	backface-visibility: hidden;
  	vertical-align:top;
}
.violin_pink figcaption {
	width:300px;
 	z-index: 1;
  	padding: 8px 2px 0 8px;
}
.violin_pink h2, .violin_pink.links {
  	width: 300px;
  	padding: 0;
}
.violin_pink p {
	top:52%;
}
.violin_pink:after, .violin_pink figcaption {
  	position: absolute;
  	height:200px;
  	top:52%;
}
.flex{
	display:block;
	flex-direction:column;
}
.school_info {
	font-size:14px;
	line-height:20px;
	vertical-align:top;
	margin-top:0.5em;
}
.school_pv lite-youtube{
	border-radius: 5%;
	width: 380px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}
.reserve img,.tel img{
 	width:100px;
 	height:100px;
}
.reserve{
	bottom:110px;
}
.school_bottom_info{
	margin-left:5%
}
}