@charset "utf-8";

/* ####################################### */
/* はじめに */
/* ####################################### */
#schl-introduction h1 {margin-bottom: 1.5em; color: #996666; font-size: 120%;}
#schl-introduction h2 {color: #996666;}
#schl-introduction p {margin-bottom: 1.5em;}
#schl-introduction img {float: right; margin-bottom: 1em; margin-left: 1em; width: 180px; height: auto;}
#pines-president {text-align: right;}

/* ####################################### */
/* カリキュラム案内 SIZE入校について 講師紹介 */
/* ####################################### */
.schl-course, .schl-about, .schl-teacher {margin-bottom: 1.5em; border-bottom: 1px dotted #bebebe;}
.schl-ob {margin-bottom: 1.5em;}
.schl-course h1, .schl-about h1, .schl-teacher h1, .schl-ob h1 {color: #996666; font-size: 120%;}
.schl-course p, .schl-about p, .schl-teacher p, .schl-ob p {margin-bottom: 1em; padding: 0 2em;}
.payment {margin: 1em 0; padding: 0 2em;}
.payment dt {margin-top: 0.5em; color: #996666;}
.payment dd {font-size: 85%;}
.course-ex {margin-top: 1em; padding: 0 2em; font-weight: bold;}
.classimage {margin: 1em auto; width: 100%; max-width: 320px;}
.classimage img {width: 100%;}
.classimage figcaption {font-size: 85%; text-align: right;}

:where(.schl-course, .schl-about) ul {margin: 1em 0; padding: 0 3em; list-style: disc outside;}
.schl-about ul li {margin: 1em 0;}

.teach-flex {
display: flex;
gap: 1rem;
margin: 1em 0;
padding: 0 2em;
}
.teach-flex .teachimage img {
width: 100px;
height: 100px;
border: 2px solid #fcd157;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

/* ####################################### */
/* 講師紹介 SIZE卒業生の声 */
/* ####################################### */
.teach-box, .ob-box {padding: 1em 2em;}
.teach-box .teachimage, .ob-box .obimage {display: inline-block; vertical-align: top; width: 20%; min-width: 110px; max-width: 110px;}
.teach-box .teachimage img {
width: 100px;
height: 100px;
border: 2px solid #fcd157;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.ob-box .obimage img {
width: 100px;
height: 100px;
border: 2px solid #fcd157;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.teach-box .abouttxt, .ob-box .aboutob {display: inline-block; vertical-align: top; width: 79%;}
.teach-box .abouttxt dt, .ob-box .aboutob dt {color: #fcd157; font-size: 110%; font-weight: bold;}
.teach-box .abouttxt dt a, .ob-box .aboutob dt a {color: #fcd157;}
.teach-box .abouttxt dd, .ob-box .aboutob dd {font-size: 85%; text-align: justify; text-justify: inter-ideograph;}
.obmsg {margin-bottom: 1.5em; border-bottom: 1px dotted #bebebe; text-align: justify; text-justify: inter-ideograph;}
.schl-notice {color: #ff0000; font-size: 80%;}

/* ####################################### */
/* お問い合わせ */
/* ####################################### */
.schl-join {margin-bottom: 1.5em; border-bottom: 1px dotted #bebebe;}
.schl-join h1 {color: #996666; font-size: 120%;}
.schl-join address {padding: 0 2em;}
.join-to {margin: 1em 0; padding: 0 2em;}
.join-to a, .join-to a:link, .join-to a:visited {color: #996666; text-decoration: none;}
.join-to a:active, .join-to a:hover {text-decoration: underline;}

/* マップを見るの設定 */
.map-view {
display: inline-block;
height: 20px;
white-space: nowrap;
line-height: 20px;
font-size: 80%;
text-align: center;
color: #ffffff;
background-color: #ff0000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.map-view a {
display: block;
padding: 0 1em;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.map-view a, .map-view a:link, .map-view a:visited {color: #ffffff; text-decoration: none;}
.map-view a:active, .map-view a:hover {background-color: #888888; text-decoration: none;}

/* ####################################### */
/* サイドメニュー */
/* ####################################### */
#schl-side-introduction, #schl-side-introduction a, 
#schl-side-class, #schl-side-class a, 
#schl-side-class-new, #schl-side-class-new a, 
#schl-side-classother, #schl-side-classother a, 
#schl-side-about, #schl-side-about a, 
#schl-side-teacher, #schl-side-teacher a, 
#schl-side-train, #schl-side-train a, 
#schl-side-ob, #schl-side-ob a {color: #996666; text-decoration: none;}

#schl-side-introduction a:hover, 
#schl-side-class a:hover, 
#schl-side-class-new a:hover, 
#schl-side-classother a:hover, 
#schl-side-about a:hover, 
#schl-side-teacher a:hover, 
#schl-side-train a:hover, 
#schl-side-ob a:hover {color: #666666; text-decoration: none;}
#schl-side-introduction, 
#schl-side-class, 
#schl-side-class-new, 
#schl-side-classother, 
#schl-side-about, 
#schl-side-teacher, 
#schl-side-train, 
#schl-side-ob {position: relative; margin: 1em 0; cursor: pointer;}

#schl-side-class .icon-s-menu_down, 
#schl-side-classother .icon-s-menu_down, 
#schl-side-about .icon-s-menu_down, 
#schl-side-teacher .icon-s-menu_down, 
#schl-side-train .icon-s-menu_down {
position: absolute;
right: 0;
top: 0.5em;
}
.rotate-menu_up {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

.schl-side-menu {
margin-bottom: 1.5em;
padding-left: 1em;
list-style: circle inside;
}


/* ####################################### */
/* PINES TALENT */
/* ####################################### */
.talentnote {
margin-bottom: 3em;
display: inline-block;
width: 85%;
max-width: 560px;
vertical-align: top;
}
.talentnote p {margin: 0.2em 0;}
/* タレントの名前の設定 */
.talent-name {
margin-bottom: 0.5em;
font-size: 115%;
font-weight: bold;
border-bottom: 1px solid #fcd157;
}
.talent-name span {
padding-left: 0.5em;
color: #888888;
font-size: 85%;
}

/* 所属タレントリストの設定 */
.thumbimg {display: inline-block; width: 15%; min-width: 90px; max-width: 90px; vertical-align: top;}
.thumbimg img {
width: 80px;
height: 80px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.menBorder img {border: 2px solid #3399cc;}
.womenBorder img {border: 2px solid #ea6390;}
.trainBorder img {border: 2px solid #996666;}

/* プロフィールを見るの設定 */
.schl-teacher p.prf-link {
height: 20px;
float: right;
padding: 0;
width: 40%;
white-space: nowrap;
line-height: 20px;
font-size: 80%;
text-align: center;
color: #ffffff;
background-color: #fcd157;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.schl-teacher p.prf-link a {
display: block;
padding: 0 2em;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.schl-teacher p.prf-link a, .schl-teacher p.prf-link a:link, .schl-teacher p.prf-link a:visited {color: #ffffff; text-decoration: none;}
.schl-teacher p.prf-link a:active, .schl-teacher p.prf-link a:hover {background-color: #888888; text-decoration: none;}

/* 問い合わせの設定 */
#ask {
margin: 0.5em 0;
padding: 0.2em 0.5em;
background-color: #fcd157;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
#ask span {padding: 0 5px 0 0;}
#ask a {display: block; width: 100%; height: 100%;}
#ask a, #ask a:link, #ask a:visited {color: #ffffff; text-decoration: none;}
#ask a:active, #ask a:hover {}

/* ####################################### */
/* サンプルボイス */
/* ####################################### */
.sv-container {float: left; width: 60%;}
.svp-container {margin: 0.5em 0;}

.playBtn a, .pauseBtn a, .stopBtn a {color: #ffffff;}

.controllBtn {}
.controllBtn li.playBtn, .controllBtn li.pauseBtn, .controllBtn li.stopBtn {
float: left;
margin: 0 0.5em 0 0;
padding: 0;
min-width: 24px;
min-height: 24px;
font-weight: bold;
text-align: center;
color: #ffffff;
background-color: #fcd157;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.controllBtn li.nowPlaying {
float: left;
margin: 0 0.5em 0 0;
padding: 0 1em;
min-width: 24px;
min-height: 24px;
color: #fff;
background-color: #666666;
line-height: 24px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.5) inset;
}
.controllBtn li a {
display: block;
margin: 0;
min-width: 24px;
min-height: 24px;
color: #ffffff;
text-decoration: none;
}

.trackNumber {margin-top: 0.5em;}
.trackNumber li {
float: left;
margin: 0 0.5em 0 0;
padding: 0;
min-width: 24px;
min-height: 24px;
font-weight: bold;
text-align: center;
}
.trackNumber li a {
display: block;
margin: 0;
padding: 0 0.5em;
color: #333333;
background-color: #ffffff;
line-height: 24px;
border: 2px solid #fcd157;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.trackNumber li a:hover {
color: #ffffff;
background-color: #fcd157;
border: 2px solid #fcd157;
text-decoration: none;
}

.play-state {font-size: 80%; color: #ff0000;}
.track-name {color: #fcd157; text-shadow: 0 0 4px rgba(255,255,255,0.4);}
.jp-current-time {font-size: 85%; text-shadow: 0 0 4px rgba(255,255,255,0.4);}
.jp-duration {font-size: 85%; text-shadow: 0 0 4px rgba(255,255,255,0.4);}

/* ####################################### */
/* Responsive Tablet Display */
/* ####################################### */
@media screen and (min-width: 768px) and (max-width: 979px) {
.teach-box .abouttxt, .ob-box .aboutob {width: 70%;}

.talentnote {width: 75%;}
.schl-teacher p.prf-link {float: none; width: 100%;}
.sv-container {float: none; width: 100%; padding: 1em 0;}

} /* End 768px-959px */

/* ####################################### */
/* Responsive SmartPhone Display */
/* ####################################### */
@media only screen and (max-width: 767px) {
#schl-introduction img {float: none; display: block; margin-bottom: 1em; margin-left: auto; margin-right: auto;}
#pines-president {font-size: 85%; text-align: center;}
.teach-box .abouttxt, .ob-box .aboutob {width: 100%;}
.schl-course p, .schl-about p, .schl-teacher p, .schl-ob p, .payment, .course-ex, .schl-join address, .join-to {padding: 0;}
.schl-about ul {padding: 0 1.5em;}

.talentnote {margin-bottom: 3em; display: block; width: 100%; max-width: none; border-bottom: 1px dashed #dddddd;}
.thumbimg {display: block; margin: auto; width: 100%; min-width: 80px; max-width: 80px;}
.schl-teacher p.prf-link {float: none; width: 100%;}
.sv-container {float: none; width: 100%; padding: 1em 0;}

} /* End 0px-767px */

/* ####################################### */
/* Ratina Display */
/* ####################################### */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

} /* End Retina */