@charset "UTF-8";
@charset "utf-8";

 * {
color: #333;
box-sizing: border-box;
font-family:
"メイリオ",
Meiryo,
"ヒラギノ角ゴ Pro W3",
Hiragino Kaku Gothic Pro,
"ＭＳ Ｐゴシック",
sans-serif;
margin: 0px;
padding: 0px;
}
@font-face {
font-family: "yagura";
src:
url(//carneliandance.tokyo/wp-content/themes/carneliantheme/font/subset_yagura.ttf) format("truetype"),
url(//carneliandance.tokyo/wp-content/themes/carneliantheme/font/subset_yagura.eot) format("eot"),
url(//carneliandance.tokyo/wp-content/themes/carneliantheme/font/subset_yagura.woff) format("woff");
}
body {
overflow-x: hidden;
}
main {
display: block;
}
main p {
margin-bottom: 1em;
}
a {
color: blue;
cursor: pointer;
transition: color 0.3s 0s ease;
}
a:hover {
color: rgba(255, 69, 0, 0.8);
}
ul,
ol {
margin-bottom: 1em;
}
li {
margin-left: 2em;
}
dt {
font-size: 120%;
font-weight: bold;
}
dd {
margin-left: 15px;
margin-bottom: 15px;
}
img {
height: auto;
width: 100%;
}
iframe {
max-width: 100%;
}
.common-pg-content-box h2 {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
}
#common-page li {
margin-bottom: 0.5em;
}
.h3-studio-name {
border-bottom: 1px dashed #fff;
color: #fff;
padding-bottom: 10px;
}
.h3-contactform {
border-bottom: 1px dashed #333;
margin-bottom: 5px;
}
.h3-underlined {
border-bottom: 1px dashed #333;
}
h4 {
font-size: 16px;
}
.bold {
font-weight: bold;
}
.inline {
display: inline-block;
}
#body-container {
overflow-x: hidden;
position: relative;
}
.body-background {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/bg-image-B-r4.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
#slide-cross-fade {
position: relative;
}
.slide-box {
left: 0;
position: absolute;
top: 0;
}
.top-info-tab-box {
display: flex;
justify-content: space-between;
margin-bottom: 0;
width: 100%;
}
.top-info-tab {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.top-info-tab-first {
background-color: rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s 0s ease;
}
.top-info-tab-second,
.top-info-tab-third {
background-color: rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s 0s ease;
}
.tab-activated {
background-color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0);
cursor: default;
}
.devide-1 {
width: 100%;
}
.devide-2 {
width: 50%;
}
.devide-3 {
width: calc(100% / 3);
}
.top-info-content-box {
display: flex;
justify-content: space-around;
left: 0;
position: relative;
}
.top-info-pic img {
height: 100%;
filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
object-fit: contain;
}
#mobile-nav a {
text-decoration: none;
}
#mobile-nav-menu-box {
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 550;
}
#mobile-nav-menu-box::before {
background-color: rgba(255, 255, 0, 0.9);
border-radius: 50%;
content: "";
left: 0;
height: 100%;
position: absolute;
top: 0;
transform: scale(0);
width: 100%;
}
#mobile-nav-menu-box.open-background::before {
animation: openBackground 0.3s ease 0s forwards;
}
@keyframes openBackground {
0% {
transform: scale(0);
}
100% {
transform: scale(1.5);
}
}
#mobile-nav-menu-box.close-background::before {
animation: closeBackground 0.3s ease 0s forwards;
}
@keyframes closeBackground {
0% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
.mobile-nav-btn-home,
.mobile-nav-btn-classlineup,
.mobile-nav-btn-instructor,
.mobile-nav-btn-timetable,
.mobile-nav-btn-price,
.mobile-nav-btn-access,
.mobile-nav-btn-movie,
.mobile-nav-btn-blog,
.mobile-nav-btn-event,
.mobile-nav-btn-media,
.mobile-nav-btn-fmc,
.mobile-nav-btn-questionnaire,
.mobile-nav-btn-tel,
.mobile-nav-btn-form {
position: relative;
}
.mobile-nav-btn-home::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-home.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-classlineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-classlineup.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-instructor.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-timetable.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-price::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-wallet.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-acccess.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-movie::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-movie.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-blog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-blog.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-event.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-media::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-media.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-fmc::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-fmcarnelian.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-questionnaire::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-questionnaire.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-tel::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-tel.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.mobile-nav-btn-form::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/btn-icon-email.png);
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
}
.complain-balloon-text {
line-height: 1.5em;
position: absolute;
text-align: center;
transform: rotate(-20deg);
}
.complain-balloon-text span {
color: red;
font-weight: bold;
}
.front-pg-reasons-event {
position: relative;
}
.icon-classes {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-class-list.png);
}
.icon-schedule {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-timetable.png);
}
.icon-find {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-finding.png);
}
.icon-movie {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-movie.png);
}
#class-lineup .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/lineup-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#lesson-movies .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/lesson-movie-top.jpg);
background-position: left;
background-size: cover;
background-repeat: no-repeat;
}
#time-table .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/schedule-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#instructors-top .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/instructors-top.jpg);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
}
#price-information .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/price-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#access-top .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/access-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#blog-top .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/blog-top.jpg);
background-position: left;
background-size: cover;
background-repeat: no-repeat;
}
#carnelian-events .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/event-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#media-published .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/media-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#fm-carnelian .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/fmcarnelian-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#inquiry-page .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/contact-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#questionnaire-top .header-box,
#questionnaire .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/questionnaire-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.class-lineup-box a {
border: 1px solid rgba(255, 255, 255, 0.8);
overflow: hidden;
}
.link-box {
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: block;
text-decoration: none;
}
.class-instructor-overview {
margin-top: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
.comment-pos {
font-weight: bold;
position: relative;
}
.level-indicator-box {
display: flex;
margin-bottom: 5px;
}
.indicator-background-1 {
background-color: rgba(0, 91, 255, 0.1);
}
.indicator-background-2 {
background-color: rgba(0, 91, 255, 0.15);
}
.indicator-background-3 {
background-color: rgba(0, 91, 255, 0.2);
}
.indicator-background-4 {
background-color: rgba(0, 91, 255, 0.25);
}
.indicator-background-5 {
background-color: rgba(0, 91, 255, 0.3);
}
.time-table-list {
margin-top: 10px;
}
.to-access-detail {
height: 100%;
width: 100%;
}
.pos-relative {
position: relative;
}
.access-direction {
margin: 0;
text-align: justify;
text-justify: inter-ideograph;
}
.movie-box-description {
margin-bottom: 2px;
margin-top: 5px;
}
.movie-background {
background-color: rgba(0, 0, 0, 0.1);
}
.movie-comment-box {
background-color: rgba(255, 69, 0, 0.5);
border-radius: 8px;
color: #fff;
padding: 10px 20px;
position: relative;
}
.movie-comment-box::before {
border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 16px rgba(255, 69, 0, 0.5);
top: -16px;
content: "";
display: block;
height: 0;
left: 50%;
margin-left: -8px;
position: absolute;
width: 0;
}
.full-size {
height: 100%;
width: 100%;
}
.date-posted {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
left: 0;
line-height: 40px;
padding: 0 10px;
position: absolute;
top: 0;
width: 100%;
}
.post-title {
font-weight: bold;
padding: 15px;
margin: 0;
}
.cat-lessonblog {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/lesson-blog.jpg);
}
.cat-instructorblog {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/instructor-blog.jpg);
}
.cat-event-workshop {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/event-workshop.jpg);
}
.cat-for-improvement {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/improvement.jpg);
}
.cat-tips-for-health {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tips-for-health.jpg);
}
.cat-about-carnelian {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/private_s.jpg);
}
.cat-info {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/info.jpg);
}
.cat-fromcarnelian {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/carnelian.png);
}
.category-description {
color: #fff;
line-height: 1.7em;
margin-top: 5px;
}
.post-image-style {
height: 100%;
filter: drop-shadow(1px 1px 10px #333);
max-width: 100%;
object-fit: contain;
}
.post-title-info {
color: #fff;
font-weight: bold;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
.price-info-box {
margin-bottom: 30px;
padding: 10px 20px;
}
.footer-area-front-pg {
width: 100%;
}
.from-footer {
color: #333;
text-decoration: none;
}
.common-pg-content-box {
margin: 0 0 30px;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.flex-wrap-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-wrap-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.text-centered {
text-align: center;
}
.text-justify {
text-align: justify;
text-justify: inter-ideograph;
}
.l-spacing-1 {
letter-spacing: -1px;
}
@media all and (max-width: 359px) {
.l-spacing-2 {
letter-spacing: -2px;
}
}
.modified-spacing-1 {
letter-spacing: -0.5px;
}
.modified-spacing-7 {
letter-spacing: -2px;
}
.non-dotted-list {
list-style: none;
}
.non-dotted-list li {
margin-left: 0;
}
.margin-b-0 {
margin-bottom: 0px;
}
.margin-b-5 {
margin-bottom: 5px;
}
.margin-b-10 {
margin-bottom: 10px;
}
.margin-b-20 {
margin-bottom: 20px;
}
.margin-b-30 {
margin-bottom: 30px;
}
.margin-t-5 {
margin-top: 5px;
}
.margin-t-10 {
margin-top: 10px;
}
.margin-t-15 {
margin-top: 15px;
}
.margin-t-20 {
margin-top: 20px;
}
.margin-t-50 {
margin-top: 50px;
}
.margin-t-2em {
margin-top: 2em;
}
.margin-t-4em {
margin-top: 4em;
}
.non-margin {
margin: 0;
}
.size-2x {
font-size: 2em;
}
.top-1 {
position: relative;
top: 1px;
}
.box-shadow-1 {
box-shadow:
1px 1px 10px rgba(0, 0, 0, 0.05),
1px -1px 10px rgba(0, 0, 0, 0.05),
-1px 1px 10px rgba(0, 0, 0, 0.05),
-1px -1px 10px rgba(0, 0, 0, 0.05);
}
.box-shadow-2 {
box-shadow:
3px 3px 15px rgba(0, 0, 0, 0.1),
3px -3px 15px rgba(0, 0, 0, 0.1),
-3px 3px 15px rgba(0, 0, 0, 0.1),
-3px -3px 15px rgba(0, 0, 0, 0.1);
}
.image-shadow {
box-shadow:
3px 3px 15px rgba(0, 0, 0, 0.1),
3px -3px 15px rgba(0, 0, 0, 0.1),
-3px 3px 15px rgba(0, 0, 0, 0.1),
-3px -3px 15px rgba(0, 0, 0, 0.1);
}
.image-shadow-2 {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 8px 16px rgba(0, 0, 0, 0.6);
}
.color-white {
color: #fff;
}
.color-gray {
color: rgba(0, 0, 0, 0.3);
}
.color-dark {
color: #666;
}
.strong-style {
color: #ff4500;
font-weight: bold;
}
.line-through {
text-decoration: line-through;
}
.display-block {
display: block;
}
.display-none {
display: none;
}
.zero-opacity {
opacity: 0;
}
.non-text-decoration {
text-decoration: none;
}
.ico-caret-white::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f0da";
color: #fff;
margin-right: 5px;
}
.ico-caret-black::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f0da";
margin-right: 5px;
}
.ico-check::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f00c";
color: rgba(255, 69, 0, 1);
margin-right: 5px;
}
.ico-pencil::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f303";
margin-right: 5px;
}
.link-orange .icon-orange {
color: rgba(255, 69, 0, 0.5);
transition: all 0.3s 0s ease;
}
.link-white .icon-white {
color: #fff;
transition: all 0.3s 0s ease;
}
.category-link {
color: #333;
text-decoration: none;
}
.category-link .icon-red {
color: #333;
transition: all 0.3s 0s ease;
}
.infobox-link {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 69, 0, 0.8);
color: rgba(255, 69, 0, 0.8);
display: block;
line-height: 1.6em;
margin-top: 5px;
text-align: center;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.infobox-link::after {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f0a9";
color: rgba(255, 69, 0, 0.5);
margin-left: 5px;
transition: all 0.3s 0s ease;
}
#breadcrumbs ul li {
display: inline-block;
font-size: 12px;
}
#breadcrumbs a {
color: #333;
text-decoration: none;
}
input,
textarea,
select {
background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0; -webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
outline: 0;
}
input:focus,
textarea:focus,
select:focus {
outline: 1px solid rgba(255, 69, 0, 0.7) !important;
}
input[type="checkbox"] {
-webkit-appearance: checkbox;
}
input[type="radio"] {
-webkit-appearance: radio;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
background-color: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 1) !important;
padding: 5px !important;
width: 100% !important;
}
textarea {
height: 120px !important;
}
select {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/arrow-form.png) !important;
background-position: right 10px center !important;
background-repeat: no-repeat !important;
background-size: 12px 10px !important;
padding-right: 30px !important;
}
.wpcf7-submit {
background-color: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(255, 69, 0, 0.7) !important;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
color: rgba(255, 69, 0, 0.7) !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: bold !important;
padding: 10px 0 !important;
text-align: center !important;
transition: all 0.3s 0s ease !important;
width: 100% !important;
}
.wpcf7-submit:hover {
background-color: rgba(255, 69, 0, 0.5) !important;
color: rgba(255, 255, 255, 1) !important;
}
.wpcf7-submit.button-style {
background-color: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(255, 69, 0, 0.7) !important;
color: rgba(255, 69, 0, 0.7) !important;
cursor: default !important;
font-size: 15px !important;
font-weight: bold !important;
opacity: 0.4 !important;
padding: 10px 0 !important;
text-align: center !important;
width: 100% !important;
}
.wpcf7-submit.button-action {
background-color: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(255, 69, 0, 0.7) !important;
color: rgba(255, 69, 0, 0.7) !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: bold !important;
padding: 10px 0 !important;
text-align: center !important;
transition: all 0.3s 0s ease !important;
width: 100% !important;
}
.wpcf7-submit.button-action:hover {
background-color: rgba(255, 69, 0, 0.5) !important;
color: rgba(255, 255, 255, 1) !important;
}
.wpcf7-form .ajax-loader {
display: block !important;
margin: 20px auto 0 !important;
}
.wpcf7-response-output {
margin-top: -40px !important;
}
.required-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
font-size: 12px;
line-height: 13px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.view-more-button {
box-shadow:
1px 1px 10px rgba(0, 0, 0, 0.05),
1px -1px 10px rgba(0, 0, 0, 0.05),
-1px 1px 10px rgba(0, 0, 0, 0.05),
-1px -1px 10px rgba(0, 0, 0, 0.05);
cursor: pointer;
width: 100%;
}
.page-load-status {
display: none;
}
.infinite-scroll-request,
.infinite-scroll-error {
margin-top: 10px;
text-align: center;
}
.additional-error-msg {
background-color: #ff003c;
border-radius: 10px;
color: #fff;
display: inline-block;
font-weight: bold;
margin-top: 10px;
padding: 0.5em 1em;
position: relative;
text-align: justify;
text-justify: inter-ideograph;
}
.additional-error-msg span {
color: #fff;
}
.additional-error-msg::before {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid #ff003c;
content: "";
left: calc(50% - 7px);
position: absolute;
top: -12px;
}
#caution-modal {
background-color: rgba(0, 0, 0, 0.9);
display: none;
height: 100vh;
left: 0;
padding: 0 5px;
position: fixed;
top: 0;
width: 100vw;
z-index: 20000;
}
.caution-modal-inner {
align-items: center;
display: flex;
height: 100%;
}
.caution-modal-content {
background: repeating-linear-gradient(-30deg, #fff 0, #fff 10px, #fee6ff 10px, #fee6ff 20px);
border-radius: 10px;
margin: 0 auto;
padding: 20px 5px;
width: 100%;
}
.caution-modal-txt {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.caution-modal-btns {
display: flex;
justify-content: center;
}
#caution-btn-forward {
background-color: #6933ff;
}
#caution-btn-back {
background-color: #dc143c;
}
.btn-caution-popup {
border-radius: 15px / 50%;
color: #fff;
cursor: pointer;
font-weight: bold;
margin: 0 5px;
padding: 5px 10px;
} @media print, screen and (max-width: 359px) {
.firstview-contents-wrapper {
height: calc(100vh - 88px);
margin-bottom: 55px;
position: relative;
}
}
@media print, screen and (min-width: 360px) and (max-width: 1279px) {
.firstview-contents-wrapper {
height: calc(100vh - 88px);
margin-bottom: 25px;
position: relative;
}
}
@media print, screen and (min-width: 1280px) {
.firstview-contents-wrapper {
height: calc(100vh - 50px);
margin: 0 auto 200px;
max-height: 920px;
max-width: 1920px;
position: relative;
}
}
.site-top-h1 {
line-height: 1em;
position: absolute;
text-shadow:
1px 1px #ff8c00,
1px -1px #ff8c00,
-1px 1px #ff8c00,
-1px -1px #ff8c00,
2px 2px 5px rgba(0, 0, 0, 0.6),
2px -2px 5px rgba(0, 0, 0, 0.6),
-2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(0, 0, 0, 0.6);
width: 100%;
z-index: 800;
}
@media print, screen and (max-width: 359px) {
.site-top-h1-param {
font-size: 21px;
left: 0;
text-align: center;
top: 32%;
}
.site-top-h1-emphasized {
color: #4aa4ff;
font-size: 38px;
text-shadow:
1px 1px #4169e1,
1px -1px #4169e1,
-1px 1px #4169e1,
-1px -1px #4169e1,
2px 2px 5px rgba(0, 0, 0, 0.6),
2px -2px 5px rgba(0, 0, 0, 0.6),
-2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(0, 0, 0, 0.6);
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.site-top-h1-param {
font-size: 22px;
left: 0;
text-align: center;
top: 35%;
}
.site-top-h1-emphasized {
color: #4aa4ff;
font-size: 38px;
text-shadow:
1px 1px #4169e1,
1px -1px #4169e1,
-1px 1px #4169e1,
-1px -1px #4169e1,
2px 2px 5px rgba(0, 0, 0, 0.6),
2px -2px 5px rgba(0, 0, 0, 0.6),
-2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(0, 0, 0, 0.6);
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-h1-param {
font-size: 32px;
left: 0;
text-align: center;
top: 44%;
}
.site-top-h1-emphasized {
color: #4aa4ff;
font-size: 48px;
text-shadow:
1px 1px #4169e1,
1px -1px #4169e1,
-1px 1px #4169e1,
-1px -1px #4169e1,
2px 2px 5px rgba(0, 0, 0, 0.6),
2px -2px 5px rgba(0, 0, 0, 0.6),
-2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(0, 0, 0, 0.6);
}
}
@media print, screen and (min-width: 1280px) {
.site-top-h1-param {
font-size: 54px;
left: 50px;
top: 28%;
}
.site-top-h1-emphasized {
color: #4aa4ff;
font-size: 72px;
text-shadow:
1px 1px #4169e1,
1px -1px #4169e1,
-1px 1px #4169e1,
-1px -1px #4169e1,
2px 2px 5px rgba(0, 0, 0, 0.6),
2px -2px 5px rgba(0, 0, 0, 0.6),
-2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(0, 0, 0, 0.6);
}
}
#site-top-h1-block-1,
#site-top-h1-block-2 {
display: block;
overflow: hidden;
position: relative;
}
@media print, screen and (max-width: 735px) {
.h1-block-height-1 {
height: 50px;
}
.h1-block-height-2 {
height: 35px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.h1-block-height-1 {
height: 60px;
}
.h1-block-height-2 {
height: 45px;
}
}
@media print, screen and (min-width: 1280px) {
.h1-block-height-1 {
height: 80px;
}
.h1-block-height-2 {
height: 65px;
}
}
.site-top-h1-block-content {
bottom: 0;
color: #fff;
display: block;
left: 0;
position: absolute;
visibility: hidden;
width: 100%;
}
.site-top-h1-block-content.slidein {
animation: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s slide-in;
visibility: visible;
}
@keyframes slide-in {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
#site-top-fadein-contents {
visibility: hidden;
}
#site-top-fadein-contents.visible {
animation-duration: 0.3s;
animation-name: sitetop-fadein;
visibility: visible;
}
@keyframes sitetop-fadein {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@media print, screen and (max-width: 1279px) {
#carnelian-logo-pc {
display: none;
}
}
@media print, screen and (min-width: 1280px) {
#carnelian-logo-pc {
height: 74px;
left: calc(40px + 0.8%);
position: absolute;
top: 130px;
width: 280px;
}
}
#site-top-image {
overflow: hidden;
position: absolute;
width: 100%;
}
@media print, screen and (max-width: 1279px) {
.site-top-image-size {
left: 0;
height: 88%;
top: 0;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-image-size {
left: 320px;
height: calc(100% - 110px);
top: 120px;
}
}
.site-top-image-1,
.site-top-image-2,
.site-top-image-3 {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.site-top-cta-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: absolute;
}
@media print, screen and (max-width: 359px) {
.site-top-cta-wrapper p,
.site-top-cta-wrapper a,
.site-top-cta-wrapper div {
font-size: 14px !important;
}
.site-top-cta-wrapper-pos {
left: 0;
padding: 0 10px;
top: 53%;
width: 100%;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.site-top-cta-wrapper p,
.site-top-cta-wrapper a,
.site-top-cta-wrapper div {
font-size: 14px !important;
}
.site-top-cta-wrapper-pos {
left: 0;
padding: 0 15px;
top: 56%;
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-cta-wrapper p,
.site-top-cta-wrapper a,
.site-top-cta-wrapper div {
font-size: 16px !important;
}
.site-top-cta-wrapper-pos {
left: calc(50% - 250px);
padding: 0 15px;
top: 61%;
width: 500px;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-cta-wrapper p,
.site-top-cta-wrapper a,
.site-top-cta-wrapper div {
font-size: 20px !important;
}
.site-top-cta-wrapper-pos {
bottom: 10%;
left: calc(40px + 0.8%);
width: 485px;
}
}
#ga-site-top-cta-mendan {
background-color: #fff;
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: block;
position: relative;
text-decoration: none;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.site-top-cta-mendan-size {
height: 60px;
margin: 25px 0 10px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-cta-mendan-size {
height: 80px;
margin: 25px 0 20px;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-cta-mendan-size {
height: 88px;
margin: 25px 0 15px;
}
}
.free-mark {
align-items: center;
background-color: #ff8c00;
border-radius: 50%;
color: #fff;
display: flex;
font-weight: bold;
justify-content: center;
position: absolute;
text-align: center;
top: -25px;
}
.free-mark-txt {
color: #fff;
display: inline-block;
line-height: 1em;
writing-mode: vertical-rl;
}
@media print, screen and (max-width: 359px) {
.free-mark-size {
height: 42px;
left: 2%;
width: 48px;
}
.free-mark-txt {
width: 14px;
height: 28px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.free-mark-size {
height: 50px;
left: 2%;
width: 56px;
}
.free-mark-txt {
width: 14px;
height: 28px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.free-mark-size {
height: 60px;
left: 15px;
width: 66px;
}
.free-mark-txt {
width: 16px;
height: 32px;
}
}
@media print, screen and (min-width: 1280px) {
.free-mark-size {
height: 65px;
left: 20px;
width: 75px;
}
.free-mark-txt {
width: 20px;
height: 40px;
}
}
@media print, screen and (max-width: 735px) {
.site-top-cta-mendan-txt {
padding-top: 5px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-cta-mendan-txt {
font-size: 120%;
padding-top: 8px;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-cta-mendan-txt {
font-size: 130%;
padding-top: 8px;
}
}
.site-top-cta-mendan-txt-size {
font-size: 140%;
}
.next-icon {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/header/next-icon.png);
background-size: contain;
background-repeat: no-repeat;
height: 26px;
position: absolute;
top: 14px;
width: 26px;
}
@media print, screen and (max-width: 735px) {
.site-top-cta-mendan-icon-pos {
right: 10px;
top: 14px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-cta-mendan-icon-pos {
right: 10px;
top: 24px;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-cta-mendan-icon-pos {
right: 20px;
top: 30px;
}
}
#ga-site-top-cta-class,
#ga-site-top-cta-trial {
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
color: #333;
text-align: center;
text-decoration: none;
text-shadow:
2px 2px #fff,
2px -2px #fff,
-2px 2px #fff,
-2px -2px #fff;
width: 48%;
}
@media print, screen and (max-width: 735px) {
.site-top-cta-other-size {
background-color: rgba(255, 255, 255, 0.8);
height: 40px;
line-height: 36px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-cta-other-size {
background-color: rgba(255, 255, 255, 0.8);
font-size: 120%;
height: 50px;
line-height: 48px;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-cta-other-size {
background-color: rgba(255, 255, 255, 0.7);
font-size: 130%;
height: 60px;
line-height: 58px;
}
}
.site-top-information {
left: 0;
position: absolute;
text-align: justify;
width: 100%;
z-index: 1500;
}
@media print, screen and (max-width: 359px) {
.site-top-info-param {
font-size: 12px !important;
padding: 8px 12px;
top: 88%;
}
.site-top-info-param-1 {
font-size: 12px !important;
padding: 8px 12px;
top: calc(88% + 2em);
}
.site-top-info-param-2 {
font-size: 12px !important;
padding: 8px 12px;
top: calc(88% + 4em);
}
.site-top-info-param a,
.site-top-info-param-1 a,
.site-top-info-param-2 a {
font-size: 12px !important;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.site-top-info-param {
font-size: 12px !important;
padding: 10px 15px;
top: 88%;
}
.site-top-info-param-1 {
font-size: 12px !important;
padding: 10px 15px;
top: calc(88% + 1.5em);
}
.site-top-info-param-2 {
font-size: 12px !important;
padding: 10px 15px;
top: calc(88% + 3em);
}
.site-top-info-param a,
.site-top-info-param-1 a,
.site-top-info-param-2 a {
font-size: 12px !important;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.site-top-info-param {
font-size: 14px !important;
padding: 20px 40px;
text-align: center;
top: 87%;
}
.site-top-info-param-1 {
font-size: 14px !important;
padding: 20px 40px;
text-align: center;
top: calc(87% + 1.5em);
}
.site-top-info-param-2 {
font-size: 14px !important;
padding: 20px 40px;
text-align: center;
top: calc(87% + 3em);
}
.site-top-info-param a,
.site-top-info-param-1 a,
.site-top-info-param-2 a {
font-size: 14px !important;
}
}
@media print, screen and (min-width: 1280px) {
.site-top-info-param {
bottom: 1.5em;
font-size: 18px !important;
margin: 20px 0 0 calc(40px + 0.8%);
width: 490px;
}
.site-top-info-param-1 {
bottom: 0;
font-size: 18px !important;
margin: 20px 0 0 calc(40px + 0.8%);
width: 490px;
}
.site-top-info-param-2 {
bottom: -1.5em;
font-size: 18px !important;
margin: 20px 0 0 calc(40px + 0.8%);
width: 490px;
}
.site-top-info-param a,
.site-top-info-param-1 a,
.site-top-info-param-2 a {
font-size: 18px !important;
}
}
@media print, screen and (max-width: 1279px) {
#front-page p,
#front-page a {
font-size: 16px;
}
}
@media print, screen and (min-width: 1280px) {
#front-page p,
#front-page a {
font-size: 20px;
}
}
.section-cta-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
@media print, screen and (max-width: 359px) {
.section-cta-wrapper p,
.section-cta-wrapper a,
.section-link-wrapper p,
.section-link-wrapper a {
font-size: 14px !important;
}
.section-cta-wrapper-pos {
left: 0;
margin: 30px 0 50px;
padding: 0 10px;
top: 60%;
width: 100%;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.section-cta-wrapper p,
.section-cta-wrapper a,
.section-link-wrapper p,
.section-link-wrapper a {
font-size: 14px !important;
}
.section-cta-wrapper-pos {
left: 0;
margin: 30px 0 50px;
padding: 0 15px;
top: 65%;
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.section-cta-wrapper p,
.section-cta-wrapper a,
.section-link-wrapper p,
.section-link-wrapper a {
font-size: 16px !important;
}
.section-cta-wrapper-pos {
left: 0;
margin: 40px auto 50px;
padding: 0 15px;
top: 65%;
width: 450px;
}
}
@media print, screen and (min-width: 1280px) {
.section-cta-wrapper p,
.section-cta-wrapper a,
.section-link-wrapper p,
.section-link-wrapper a {
font-size: 20px !important;
}
.section-cta-wrapper-pos {
bottom: 0;
left: 0;
margin: 30px auto 200px;
width: 485px;
}
}
.section-cta-btn {
background-color: #fff;
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: block;
position: relative;
text-decoration: none;
width: 100%;
}
.txt-color-orange {
color: #ff8c00;
}
.txt-color-blue {
color: #4169e1;
}
.width-100 {
width: 100%;
}
.size-80 {
font-size: 0.8em;
}
.size-145 {
font-size: 1.45em;
}
@media print, screen and (max-width: 735px) {
.br-mobile {
display: block;
}
.br-pc {
display: none;
}
}
@media print, screen and (min-width: 736px) {
.br-mobile {
display: none;
}
.br-pc {
display: block;
}
}
.h2-decoration-std {
background-color: rgba(255, 140, 0, 0.2);
line-height: 1.4;
padding: 15px 0 12px;
position: relative;
text-shadow:
2px 2px #fff,
2px -2px #fff,
-2px 2px #fff,
-2px -2px #fff;
}
.h2-decoration-std::before {
border: 1px solid #fff;
border-radius: 8px;
bottom: 5px;
content: "";
left: 5px;
right: 5px;
top: 5px;
position: absolute;
}
@media print, screen and (max-width: 359px) {
.h2-decoration-std {
font-size: 16px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.h2-decoration-std {
font-size: 18px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.h2-decoration-std {
font-size: 20px;
}
}
@media print, screen and (min-width: 1280px) {
.h2-decoration-std {
font-size: 26px;
}
}
.fp-section-h2 {
display: block;
margin: 0 auto;
position: relative;
}
.fp-sec-2::before,
.fp-sec-3::before,
.fp-sec-4::before,
.fp-sec-5::before,
.fp-sec-6::before {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
bottom: -12px;
content: "";
position: absolute;
z-index: 1;
}
.fp-sec-2::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_1.png);
}
.fp-sec-3::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_2.png);
}
.fp-sec-4::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_3.png);
}
.fp-sec-5::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_4.png);
}
.fp-sec-6::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_5.png);
}
@media print, screen and (max-width: 359px) {
.fp-sec-2 {
padding-left: 75px;
width: 320px;
}
.fp-sec-3 {
padding-left: 85px;
width: 285px;
}
.fp-sec-4 {
padding-left: 82px;
text-indent: 0.5em;
width: 315px;
}
.fp-sec-5 {
padding-left: 90px;
width: 260px;
}
.fp-sec-6 {
padding-left: 85px;
width: 300px;
}
.fp-sec-2::before,
.fp-sec-3::before,
.fp-sec-4::before,
.fp-sec-5::before,
.fp-sec-6::before {
height: 90px;
left: -5px;
width: 90px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec-2 {
padding-left: 90px;
width: 365px;
}
.fp-sec-3 {
padding-left: 105px;
width: 340px;
}
.fp-sec-4 {
padding-left: 95px;
text-indent: 0.5em;
width: 360px;
}
.fp-sec-5 {
padding-left: 110px;
width: 320px;
}
.fp-sec-6 {
padding-left: 105px;
width: 355px;
}
.fp-sec-2::before,
.fp-sec-3::before,
.fp-sec-4::before,
.fp-sec-5::before,
.fp-sec-6::before {
height: 100px;
left: 0;
width: 100px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec-2 {
padding-left: 110px;
width: 400px;
}
.fp-sec-3 {
padding-left: 120px;
width: 380px;
}
.fp-sec-4 {
padding-left: 120px;
text-indent: 0.5em;
width: 440px;
}
.fp-sec-5 {
padding-left: 120px;
width: 330px;
}
.fp-sec-6 {
padding-left: 115px;
width: 380px;
}
.fp-sec-2::before,
.fp-sec-3::before,
.fp-sec-4::before,
.fp-sec-5::before,
.fp-sec-6::before {
height: 105px;
left: 0;
width: 105px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec-2 {
padding-left: 140px;
width: 510px;
}
.fp-sec-3 {
padding-left: 160px;
width: 530px;
}
.fp-sec-4 {
padding-left: 160px;
text-indent: 0.5em;
width: 580px;
}
.fp-sec-5 {
padding-left: 165px;
width: 430px;
}
.fp-sec-6 {
padding-left: 160px;
width: 500px;
}
.fp-sec-2::before,
.fp-sec-3::before,
.fp-sec-4::before,
.fp-sec-5::before,
.fp-sec-6::before {
height: 140px;
left: 0;
width: 140px;
}
}
.fp-num-of-members {
background: white;
border: 3px solid red;
color: red;
margin: 0 auto 3em;
padding: 1em;
text-align: center;
width: 90%;
}
@media all and (min-width: 768px) {
.fp-num-of-members {
font-size: 1.5em !important;
margin-bottom: 5em;
}
}
.fp-sec2-troubles {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media print, screen and (max-width: 359px) {
.fp-sec2-troubles {
margin: 30px 0;
padding: 0 10px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec2-troubles {
margin: 30px auto;
padding: 0 15px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec2-troubles {
margin: 30px auto;
width: 650px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec2-troubles {
margin: 40px auto;
width: 900px;
}
}
.fp-sec2-troubles-wrapper {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
}
@media print, screen and (max-width: 735px) {
.fp-sec2-troubles-wrapper {
width: 100%;
}
}
@media print, screen and (min-width: 736px) {
.fp-sec2-troubles-wrapper {
width: calc(100% / 3);
}
}
.fp-sec2-troubles-img-box {
background-color: #fff;
border: 1px solid #4aa4ff;
border-radius: 50%;
overflow: hidden;
position: relative;
}
@media print, screen and (max-width: 359px) {
.fp-sec2-troubles-img-box {
height: 80px;
width: 80px;
}
.fp-sec2-troubles-txt-box {
width: calc(100% - 100px);
}
.fp-sec2-troubles-order-img-1,
.fp-sec2-troubles-order-img-3,
.fp-sec2-troubles-order-txt-2 {
order: 1;
}
.fp-sec2-troubles-order-img-2,
.fp-sec2-troubles-order-txt-1,
.fp-sec2-troubles-order-txt-3 {
order: 2;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec2-troubles-img-box {
height: 100px;
width: 100px;
}
.fp-sec2-troubles-txt-box {
width: calc(100% - 125px);
}
.fp-sec2-troubles-order-img-1,
.fp-sec2-troubles-order-img-3,
.fp-sec2-troubles-order-txt-2 {
order: 1;
}
.fp-sec2-troubles-order-img-2,
.fp-sec2-troubles-order-txt-1,
.fp-sec2-troubles-order-txt-3 {
order: 2;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec2-troubles-img-box {
height: 100px;
margin: 0 auto 30px;
width: 100px;
}
.fp-sec2-troubles-txt-box {
margin: 0 auto;
width: 90%;
}
.fp-sec2-troubles-order-img-1,
.fp-sec2-troubles-order-img-2,
.fp-sec2-troubles-order-img-3 {
order: 1;
}
.fp-sec2-troubles-order-txt-1,
.fp-sec2-troubles-order-txt-2,
.fp-sec2-troubles-order-txt-3 {
order: 2;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec2-troubles-img-box {
height: 140px;
margin: 0 auto 30px;
width: 140px;
}
.fp-sec2-troubles-txt-box {
margin: 0 auto;
width: 90%;
}
.fp-sec2-troubles-order-img-1,
.fp-sec2-troubles-order-img-2,
.fp-sec2-troubles-order-img-3 {
order: 1;
}
.fp-sec2-troubles-order-txt-1,
.fp-sec2-troubles-order-txt-2,
.fp-sec2-troubles-order-txt-3 {
order: 2;
}
}
.pic-anxious-look {
bottom: 0;
position: absolute;
}
@media print, screen and (max-width: 359px) {
.pic-anxious-look {
height: 76px;
left: calc(50% - 38px);
width: 76px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.pic-anxious-look {
height: 92px;
left: calc(50% - 46px);
width: 92px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.pic-anxious-look {
height: 92px;
left: calc(50% - 46px);
width: 92px;
}
}
@media print, screen and (min-width: 1280px) {
.pic-anxious-look {
height: 120px;
left: calc(50% - 60px);
width: 120px;
}
}
.fukidashi {
background-color: #fff;
border: 1px solid #4aa4ff;
border-radius: 10px;
padding: 10px 18px;
position: relative;
}
@media print, screen and (max-width: 735px) {
.fukidashi {
padding: 10px 18px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fukidashi {
padding: 14px;
}
.fukidashi-right {
margin-right: 25px;
}
.fukidashi-left {
margin-left: 25px;
}
}
@media print, screen and (min-width: 1280px) {
.fukidashi {
padding: 1em 1.5em;
}
.fukidashi-right {
margin-right: 25px;
}
.fukidashi-left {
margin-left: 25px;
}
}
.fukidashi-1-pos::before,
.fukidashi-1-pos::after,
.fukidashi-2-pos::before,
.fukidashi-2-pos::after,
.fukidashi-3-pos::before,
.fukidashi-3-pos::after,
.fukidashi-right::before,
.fukidashi-right::after,
.fukidashi-left::before,
.fukidashi-left::after {
border: 12px solid transparent;
content: "";
position: absolute;
}
@media print, screen and (max-width: 735px) {
.fukidashi-1-pos::before,
.fukidashi-3-pos::before {
border-right: 18px solid #fff;
left: -28px;
top: 12px;
z-index: 2;
}
.fukidashi-1-pos::after,
.fukidashi-3-pos::after {
border-right: 18px solid #4aa4ff;
left: -30px;
top: 12px;
z-index: 1;
}
.fukidashi-2-pos::before {
border-left: 18px solid #fff;
right: -28px;
top: 12px;
z-index: 2;
}
.fukidashi-2-pos::after {
border-left: 18px solid #4aa4ff;
right: -30px;
top: 12px;
z-index: 1;
}
}
@media print, screen and (min-width: 736px) {
.fukidashi-1-pos::before,
.fukidashi-2-pos::before,
.fukidashi-3-pos::before {
border-bottom: 18px solid #fff;
left: calc(50% - 12px);
top: -28px;
z-index: 2;
}
.fukidashi-1-pos::after,
.fukidashi-2-pos::after,
.fukidashi-3-pos::after {
border-bottom: 18px solid #4aa4ff;
left: calc(50% - 12px);
top: -30px;
z-index: 1;
}
}
.fukidashi-right::before {
border-right: 18px solid #fff;
left: -28px;
top: 12px;
z-index: 2;
}
.fukidashi-right::after {
border-right: 18px solid #4aa4ff;
left: -30px;
top: 12px;
z-index: 1;
}
.fukidashi-left::before {
border-left: 18px solid #fff;
right: -28px;
top: 12px;
z-index: 2;
}
.fukidashi-left::after {
border-left: 18px solid #4aa4ff;
right: -30px;
top: 12px;
z-index: 1;
}
.leading-arrow {
position: relative;
}
.leading-arrow::before {
border: 140px solid transparent;
border-top: 30px solid rgba(255, 140, 0, 0.2);
content: "";
left: calc(50% - 140px);
margin: 0;
position: absolute;
}
@media print, screen and (max-width: 735px) {
.leading-arrow::before {
top: -60px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.leading-arrow::before {
top: -70px;
}
}
@media print, screen and (min-width: 1280px) {
.leading-arrow::before {
top: -80px;
}
}
@media print, screen and (max-width: 735px) {
.fp-sec2-answer {
margin-bottom: 80px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec2-answer {
margin: 0 auto 80px;
max-width: 650px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec2-answer {
margin: 0 auto 250px;
max-width: 650px;
}
}
.fp-sec2-answer-txt {
line-height: 1.8em;
text-align: center;
width: 100%;
}
.fp-sec2-answer-txt-emphasized-1 {
color: #4169e1;
font-weight: bold;
}
.fp-sec2-answer-txt-emphasized-2 {
display: inline-block;
font-weight: bold;
margin-bottom: 30px;
}
.fp-sec2-answer-txt-emphasized-3 {
color: #ff8c00;
font-weight: bold;
line-height: 1em;
text-align: center;
width: 100%;
}
@media print, screen and (max-width: 359px) {
.fp-sec2-answer-txt-emphasized-2 {
font-size: 28px;
}
.fp-sec2-answer-txt-emphasized-3 {
font-size: 22px !important;
margin-top: 80px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec2-answer-txt-emphasized-2 {
font-size: 32px;
}
.fp-sec2-answer-txt-emphasized-3 {
font-size: 24px !important;
margin-top: 80px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec2-answer-txt-emphasized-2 {
font-size: 32px;
}
.fp-sec2-answer-txt-emphasized-3 {
font-size: 28px !important;
margin-top: 100px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec2-answer-txt-emphasized-2 {
font-size: 32px;
}
.fp-sec2-answer-txt-emphasized-3 {
font-size: 28px !important;
margin-top: 120px;
}
}
@media print, screen and (max-width: 359px) {
.fp-sec3-features {
padding: 0 10px;
}
.fp-sec3-features-container {
margin-top: 30px;
}
.fp-sec3-features-txt {
margin-top: 1em;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec3-features {
padding: 0 15px;
}
.fp-sec3-features-container {
margin-top: 30px;
}
.fp-sec3-features-txt {
margin-top: 1em;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec3-features {
margin: 0 auto;
max-width: 450px;
padding: 0 15px;
}
.fp-sec3-features-container {
margin-top: 30px;
}
.fp-sec3-features-txt {
margin-top: 1em;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec3-features {
display: flex;
justify-content: space-between;
margin: 10px auto 0;
width: 1200px;
}
.fp-sec3-features-container {
margin-top: 30px;
width: calc((100% / 3) - 40px);
}
.fp-sec3-features-txt {
padding: 20px 23px;
}
}
.pointer-txt-1line,
.pointer-txt-2lines {
margin: 0;
width: 100%;
}
@media print, screen and (max-width: 1279px) {
.pointer-txt-2lines {
font-size: 12px !important;
}
}
@media print, screen and (min-width: 1280px) {
.pointer-txt-2lines {
font-size: 14px !important;
}
}
.pointer-bottom {
align-items: center;
background-color: #fff;
border: 1px solid #ff8c00;
border-radius: 50%;
display: flex;
margin: 0 auto 10px;
position: relative;
text-align: center;
}
@media print, screen and (max-width: 1279px) {
.pointer-bottom {
height: 64px;
width: 64px;
}
}
@media print, screen and (min-width: 1280px) {
.pointer-bottom {
height: 80px;
width: 80px;
}
}
.pointer-bottom::before,
.pointer-bottom::after {
border: 6px solid transparent;
content: "";
left: calc(50% - 6px);
position: absolute;
}
.pointer-bottom::before {
border-top: 10px solid #fff;
bottom: -14px;
z-index: 2;
}
.pointer-bottom::after {
border-top: 10px solid #ff8c00;
bottom: -16px;
z-index: 1;
}
.fp-img-box-common {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 6px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-size: 0;
margin-top: 5px;
overflow: hidden;
position: relative;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.fp-sec4-main-title {
letter-spacing: -1.5px;
}
}
@media print, screen and (max-width: 359px) {
.fp-sec4-interview,
.section-link-wrapper {
padding: 10px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec4-interview,
.section-link-wrapper {
padding: 10px 15px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec4-interview,
.section-link-wrapper {
margin: 30px auto 0;
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec4-interview {
margin: 50px auto 0;
width: 420px;
}
.section-link-wrapper {
margin: 60px auto 230px;
width: 485px;
}
}
.fp-sec-h3-common {
line-height: 1.4em;
text-align: center;
}
@media print, screen and (min-width: 1280px) {
.fp-sec-h3-common {
font-size: 22px;
}
}
.fp-link-to-instructors {
background-color: #fff;
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: block;
margin: 0 0 70px;
position: relative;
text-decoration: none;
}
.fp-sec5-message {
font-weight: bold;
text-align: center;
}
@media print, screen and (max-width: 359px) {
.fp-sec5-message {
margin-top: 50px;
padding: 10px 5px 0;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec5-message {
margin-top: 50px;
padding: 10px 15px 0;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec5-message {
margin: 50px auto 0;
padding-top: 20px;
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec5-message {
margin: 80px auto;
padding-top: 40px;
width: 420px;
}
}
.fp-sec5-message-txt {
margin-bottom: 1.5em;
}
.fp-sec6-consultation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px 0;
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation {
padding: 0 10px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec6-consultation {
padding: 0 15px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation {
margin: 30px auto;
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation {
margin: 50px auto 60px;
width: 520px;
}
}
.margin-b-25 {
margin-bottom: 25px;
}
.margin-tb-1em {
margin: 1em 0;
}
.conversation-beginner,
.conversation-advisor {
position: relative;
width: 100%;
}
.conversation-beginner::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/beginner_a-san.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
content: "";
left: -5px;
height: 80px;
position: absolute;
top: 0;
width: 90px;
}
.conversation-beginner::after {
content: "ダンス初心者Aさん";
font-size: 12px;
left: 0;
line-height: 1.2em;
height: auto;
position: absolute;
text-align: center;
top: 90px;
width: 80px;
}
.conversation-advisor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/advisor_who-san.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
content: "";
right: -5px;
height: 90px;
position: absolute;
top: 0;
width: 105px;
}
.conversation-box-right {
margin-left: auto;
width: calc(100% - 100px);
}
.conversation-box-left {
margin-right: auto;
width: calc(100% - 100px);
}
@media print, screen and (max-width: 359px) {
.conversation-mod-margin {
margin-bottom: 40px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.conversation-mod-margin {
margin-bottom: 60px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.conversation-mod-margin {
margin-bottom: 50px;
}
}
@media print, screen and (min-width: 1280px) {
.conversation-mod-margin {
margin-bottom: 40px;
}
}
.fp-sec6-consultation-features {
background-color: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
position: relative;
width: 100%;
}
@media print, screen and (max-width: 1279px) {
.fp-sec6-consultation-features {
margin: 50px 0;
padding: 50px 0 40px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-features {
margin: 70px 0 50px;
padding: 50px 0;
}
}
@media print, screen and (max-width: 735px) {
.fp-sec6-consultation-h3 {
text-align: center;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-h3 {
font-size: 22px;
text-align: center;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-h3 {
font-size: 24px;
text-align: center;
}
}
.fp-sec6-consultation-balloon {
left: 0;
position: absolute;
width: 100%;
}
@media print, screen and (max-width: 1279px) {
.fp-sec6-consultation-balloon {
top: -26px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-balloon {
top: -40px;
}
.fp-sec6-consultation-features-box {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 1200px;
}
}
.fp-sec6-consultation-feature-icon-1st,
.fp-sec6-consultation-feature-icon-2nd,
.fp-sec6-consultation-feature-icon-3rd {
background-color: #fff;
border: 1px solid #ff8c00;
border-radius: 10px;
margin: 20px auto 0;
padding: 15px;
position: relative;
text-align: center;
}
@media print, screen and (max-width: 735px) {
.fp-sec6-consultation-feature-icon-1st,
.fp-sec6-consultation-feature-icon-2nd,
.fp-sec6-consultation-feature-icon-3rd {
width: 90%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-feature-icon-1st,
.fp-sec6-consultation-feature-icon-2nd,
.fp-sec6-consultation-feature-icon-3rd {
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-feature-icon-1st,
.fp-sec6-consultation-feature-icon-2nd,
.fp-sec6-consultation-feature-icon-3rd {
width: 380px;
}
}
.fp-sec6-consultation-feature-icon-1st::before,
.fp-sec6-consultation-feature-icon-2nd::before,
.fp-sec6-consultation-feature-icon-3rd::before {
background-color: #ff8c00;
border-radius: 50%;
color: #fff;
content: "1";
font-weight: bold;
left: -10px;
position: absolute;
top: -10px;
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation-feature-icon-1st::before,
.fp-sec6-consultation-feature-icon-2nd::before,
.fp-sec6-consultation-feature-icon-3rd::before {
font-size: 1.3em;
height: 36px;
line-height: 36px;
margin: 0;
width: 36px;
}
}
@media print, screen and (min-width: 360px) {
.fp-sec6-consultation-feature-icon-1st::before,
.fp-sec6-consultation-feature-icon-2nd::before,
.fp-sec6-consultation-feature-icon-3rd::before {
font-size: 1.6em;
height: 40px;
line-height: 40px;
margin: 0;
width: 40px;
}
}
.fp-sec6-consultation-feature-icon-1st::before {
content: "1";
}
.fp-sec6-consultation-feature-icon-2nd::before {
content: "2";
}
.fp-sec6-consultation-feature-icon-3rd::before {
content: "3";
}
.fp-sec6-consultation-feature-title {
font-weight: bold;
margin-bottom: 5px;
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation-feature-title {
font-size: 16px !important;
}
.fs-sec6-consultation-feature-description {
font-size: 15px !important;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec6-consultation-feature-title {
font-size: 17px !important;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-feature-title {
font-size: 18px !important;
}
}
.fp-sec6-consultation-form {
background-color: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
margin: 50px 0;
position: relative;
width: 100%;
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation-form {
padding: 50px 10px 0;
}
.fp-sec6-consultation-form-wrapper {
margin: 10px 0;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec6-consultation-form {
padding: 50px 15px 0;
}
.fp-sec6-consultation-form-wrapper {
margin: 10px 0;
}
}
@media print, screen and (min-width: 736px) {
.fp-sec6-consultation-form {
padding: 50px 0 0;
}
.fp-sec6-consultation-form-wrapper {
margin: 20px auto;
width: 420px;
}
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation-links {
margin-bottom: 50px;
padding: 0 10px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec6-consultation-links {
margin-bottom: 50px;
padding: 0 15px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-links {
margin: 0 auto 50px;
width: 728px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-links {
margin: 0 auto 50px;
width: 1100px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-advisor-box {
margin: 0 auto;
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-advisor-box {
margin: 0 auto 50px;
width: 520px;
}
}
.fp-sec6-consultation-links-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.fp-sec6-consultation-link-box {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
margin-bottom: 10px;
overflow: hidden;
padding: 5px;
}
@media print, screen and (max-width: 359px) {
.fp-sec6-consultation-link-box {
height: 175px;
padding: 10px 5px;
width: calc(50% - 5px);
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec6-consultation-link-box {
height: 175px;
padding: 10px;
width: calc(50% - 5px);
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec6-consultation-link-box {
padding: 15px;
width: calc(25% - 5px);
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec6-consultation-link-box {
padding: 25px;
width: calc(25% - 15px);
}
}
.fp-sec6-bottom-link {
display: block;
height: 100%;
text-decoration: none;
width: 100%;
}
.fp-bottom-link-class,
.fp-bottom-link-timetable,
.fp-bottom-link-finding,
.fp-bottom-link-movie {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
font-weight: bold;
text-align: center;
text-shadow:
2px 2px #fff,
2px -2px #fff,
-2px 2px #fff,
-2px -2px #fff;
}
.fp-bottom-link-class {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/ico-class-list.png);
}
.fp-bottom-link-timetable {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/ico-timetable.png);
}
.fp-bottom-link-finding {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/ico-finding.png);
}
.fp-bottom-link-movie {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/ico-movie.png);
}
@media print, screen and (max-width: 1279px) {
.fp-bottom-link-class,
.fp-bottom-link-timetable,
.fp-bottom-link-finding,
.fp-bottom-link-movie {
height: 70px;
line-height: 70px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-bottom-link-class,
.fp-bottom-link-timetable,
.fp-bottom-link-finding,
.fp-bottom-link-movie {
height: 80px;
line-height: 80px;
}
}
.fp-bottom-link-modified-letter-spacing {
letter-spacing: -1.5px;
}
.fp-bottom-link-txt {
display: block;
text-align: justify;
text-justify: inter-ideograph;
}
@media print, screen and (max-width: 1279px) {
.fp-bottom-link-txt {
padding: 10px 0;
}
}
@media print, screen and (min-width: 1280px) {
.fp-bottom-link-txt {
padding: 20px 0 0;
}
}
@media print, screen and (max-width: 359px) {
.fp-bottom-link-to,
.fp-bottom-link-caption {
font-size: 14.5px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 374px) {
.fp-bottom-link-to,
.fp-bottom-link-caption {
font-size: 15px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-bottom-link-to {
font-size: 22px;
}
} @media print, screen and (max-width: 359px) {
.fp-sec5-content-wrapper {
padding: 20px 0 40px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec5-content-wrapper {
padding: 30px 0 40px;
}
}
@media print, screen and (min-width: 736px) {
.fp-sec5-content-wrapper {
padding: 30px 0 50px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec5-content-wrapper {
padding: 40px 0 50px;
}
}
#fp-sec-5-marker-wrapper {
display: flex;
justify-content: center;
margin: 0 auto 15px;
}
@media print, screen and (min-width: 1000px) {
#fp-sec-5-marker-wrapper {
display: none;
}
}
.fp-sec-5-marker {
background-color: rgba(0, 255, 255, 0.3);
border: 1px solid #fff;
border-radius: 50%;
box-shadow: none;
height: 60px;
margin: 0 10px;
overflow: hidden;
transition: box-shadow 0.2s 0s ease;
width: 60px;
}
.fp-sec-5-marker.active {
box-shadow:
2px 2px 2px #ff8c00,
2px -2px 2px #ff8c00,
-2px 2px 2px #ff8c00,
-2px -2px 2px #ff8c00;
}
@media print, screen and (max-width: 359px) {
.content-height-voice-1 {
max-height: 780px;
}
.content-height-voice-2 {
max-height: 1030px;
}
.content-height-voice-3 {
max-height: 1440px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.content-height-voice-1 {
max-height: 710px;
}
.content-height-voice-2 {
max-height: 1035px;
}
.content-height-voice-3 {
max-height: 1340px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 999px) {
.content-height-voice-1 {
max-height: 650px;
}
.content-height-voice-2 {
max-height: 830px;
}
.content-height-voice-3 {
max-height: 1085px;
}
}
@media print, screen and (min-width: 1000px) and (max-width: 1279px) {
.content-height-voice-1,
.content-height-voice-2,
.content-height-voice-3 {
max-height: 1280px;
}
}
@media print, screen and (min-width: 736px) and (min-width: 1280px) {
.content-height-voice-1,
.content-height-voice-2,
.content-height-voice-3 {
max-height: 1560px;
}
}
.marker-image {
cursor: pointer;
height: 100%;
width: 100%;
}
#fp-sec-5-voice-wrapper {
align-items: flex-start;
display: flex;
}
@media print, screen and (max-width: 359px) {
#fp-sec-5-voice-wrapper {
height: 780px;
margin-left: 0;
margin-right: 0;
width: 300%;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
#fp-sec-5-voice-wrapper {
height: 710px;
margin-left: 0;
margin-right: 0;
width: 300%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 999px) {
#fp-sec-5-voice-wrapper {
height: 650px;
margin-left: 0;
margin-right: 0;
width: 300%;
}
}
@media print, screen and (min-width: 1000px) and (max-width: 1279px) {
#fp-sec-5-voice-wrapper {
justify-content: space-between;
margin-right: auto;
width: 945px;
}
}
@media print, screen and (min-width: 1280px) {
#fp-sec-5-voice-wrapper {
justify-content: space-between;
margin-right: auto;
width: 1160px;
}
}
.fp-sec-5-voice-box {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 500;
}
@media print, screen and (max-width: 359px) {
.fp-sec-5-voice-box {
margin-left: 15px;
width: 270px;
}
.voice-box-1-height,
.voice-box-2-height,
.voice-box-3-height {
height: 100%;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.fp-sec-5-voice-box {
margin-left: 20px;
width: 295px;
}
.voice-box-1-height,
.voice-box-2-height,
.voice-box-3-height {
height: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 999px) {
.fp-sec-5-voice-box {
margin-left: 20px;
width: 420px;
}
.voice-box-1-height,
.voice-box-2-height,
.voice-box-3-height {
height: 100%;
}
}
@media print, screen and (min-width: 1000px) and (max-width: 1279px) {
.fp-sec-5-voice-box {
margin-left: 0px;
width: 295px;
}
.voice-box-1-height {
height: 650px;
}
.voice-box-2-height {
height: 975px;
}
.voice-box-3-height {
height: 1280px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec-5-voice-box {
margin-left: 0px;
width: 360px;
}
.voice-box-1-height {
height: 760px;
}
.voice-box-2-height {
height: 1170px;
}
.voice-box-3-height {
height: 1560px;
}
}
@media all and (max-width: 359px) {
.fp-sec-5-voice-box .fp-sec-h3-common {
font-size: 17px;
}
}
@media all and (min-width: 1000px) and (max-width: 1279px) {
.fp-sec-5-voice-box .fp-sec-h3-common {
font-size: 18px;
}
}
@media all and (max-width: 1279px) {
.until-tablet {
display: block;
}
}
@media all and (min-width: 1280px) {
.until-tablet {
display: none;
}
}
.fp-sec-5-voice-pic {
background-color: rgba(0, 255, 255, 0.3);
height: 260px;
position: relative;
width: 100%;
}
.pic-okada-san::before,
.pic-nakajima-san::before,
.pic-suzuki-san::before {
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.pic-okada-san::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/okada-san.jpg);
background-position: center;
}
.pic-nakajima-san::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/nakajima-san.jpg);
background-position: center right;
}
.pic-suzuki-san::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/suzuki-san.jpg);
background-position: center;
}
.fp-sec-5-voice-pagenation {
bottom: 0;
left: 0;
padding: 30px 15px 15px;
position: absolute;
width: 100%;
}
@media print, screen and (max-width: 999px) {
.pagenation-next {
display: flex;
justify-content: flex-end;
}
.pagenation-both {
display: flex;
justify-content: space-between;
}
.pagenation-back {
display: flex;
justify-content: flex-start;
}
}
@media print, screen and (min-width: 1000px) {
.pagenation-next,
.pagenation-both,
.pagenation-back {
display: none;
}
}
.fp-sec5-voice-notes {
color: #fff;
font-size: 12.5px !important;
position: absolute;
right: 10px;
text-shadow:
1px 1px 2px #333,
1px -1px 2px #333,
-1px 1px 2px #333,
-1px -1px 2px #333;
}
@media print, screen and (max-width: 735px) {
.fp-sec5-voice-notes {
bottom: 48px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.fp-sec5-voice-notes {
bottom: 52px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec5-voice-notes {
bottom: 35px;
}
}
.fp-sec5-voice-name-box {
background-color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
bottom: 10px;
font-weight: bold;
left: 0;
margin: 0;
padding: 5px 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px #fff,
1px -1px #fff,
-1px 1px #fff,
-1px -1px #fff;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.fp-sec5-voice-name-box {
font-size: 12.5px !important;
}
}
@media print, screen and (min-width: 736px) {
.fp-sec5-voice-name-box {
font-size: 14px !important;
}
}
@media all and (min-width: 1280px) {
.fp-sec5-voice-name-box span {
display: inline-block;
margin-right: 1em;
}
}
.fp-sec-5-voice-content {
padding: 0 15px;
}
.fp-sec-5-voice-content p {
line-height: 1.6em;
}
.fp-sec-5-story-btn {
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow:
1px 1px 3px rgba(0, 0, 0, 0.1),
1px -1px 3px rgba(0, 0, 0, 0.1),
-1px 1px 3px rgba(0, 0, 0, 0.1),
-1px -1px 3px rgba(0, 0, 0, 0.1);
display: none;
overflow: hidden;
width: 105px;
}
.fp-sec-5-story-btn.active {
display: block;
}
.fp-sec-5-story-btn-txt {
cursor: pointer;
font-size: 12.5px !important;
height: 100%;
line-height: 1.6em;
margin-bottom: 0;
padding: 8px 0;
text-align: center;
}
.fp-instructors-list {
margin-top: 40px;
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.fp-instructors-list {
margin-top: 60px;
}
}
@media all and (min-width: 1280px) {
.fp-instructors-list {
margin-top: 120px;
}
}
.fp-classlist-carousel,
.fp-instructorlist-carousel {
margin-top: 30px;
}
.fp-classlist-carousel-wrapper,
.fp-instructorlist-carousel-wrapper {
display: flex;
list-style: none;
margin-left: calc(30px - ((100vw - 60px) * 3));
}
.fp-classlist-carousel-wrapper {
width: calc((100vw - 60px) * 22);
}
.fp-instructorlist-carousel-wrapper {
width: calc((100vw - 60px) * 13);
}
@media all and (min-width: 640px) and (max-width: 1279px) {
.fp-classlist-carousel-wrapper {
margin-left: calc(((100vw - 300px) / 2) - (300px * 3));
width: calc(300px * 22);
}
.fp-instructorlist-carousel-wrapper {
margin-left: calc(((100vw - 300px) / 2) - (300px * 3));
width: calc(300px * 13);
}
}
@media all and (min-width: 1280px) {
.fp-classlist-carousel-wrapper {
margin-left: calc(((100vw - 420px) / 2) - (420px * 3));
width: calc(420px * 22);
}
.fp-instructorlist-carousel-wrapper {
margin-left: calc(((100vw - 420px) / 2) - (420px * 3));
width: calc(420px * 13);
}
}
.fp-classlist-carousel-item,
.fp-instructorlist-carousel-item {
margin: 0 auto;
width: calc(100vw - 60px);
}
@media all and (min-width: 640px) and (max-width: 1279px) {
.fp-classlist-carousel-item,
.fp-instructorlist-carousel-item {
width: 300px;
}
}
@media all and (min-width: 1280px) {
.fp-classlist-carousel-item,
.fp-instructorlist-carousel-item {
width: 420px;
}
}
.fp-classlist-carousel-item-info,
.fp-instructorlist-carousel-item-info {
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
display: block;
overflow: hidden;
margin: 0 10px;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
}
.fp-classlist-carousel-item-info:hover,
.fp-instructorlist-carousel-item-info:hover {
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.5),
0 4px 10px rgba(0, 0, 0, 0.5);
}
.fp-classlist-carousel-item-img,
.fp-instructorlist-carousel-item-img {
background: #999;
position: relative;
width: 100%;
}
.fp-classlist-carousel-item-img {
height: 160px;
}
.fp-instructorlist-carousel-item-img {
height: 180px;
}
@media all and (min-width: 1280px) {
.fp-classlist-carousel-item-img {
height: 210px;
}
.fp-instructorlist-carousel-item-img {
height: 260px;
}
}
.fp-instructorlist-carousel-item-bg {
background: linear-gradient(transparent 67%, rgba(0, 0, 0, 0.7) 90%);
height: 100%;
}
.fp-classlist-carousel-item-classname {
background: rgba(255, 69, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 1.2em;
font-weight: bold;
left: 0;
line-height: 2.2em;
margin-bottom: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 4px #333,
1px -1px 4px #333,
-1px 1px 4px #333,
-1px -1px 4px #333;
width: 100%;
}
.fp-instructorlist-carousel-item-name {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -8px;
color: #fff;
font-weight: bold;
left: calc(50% - 115px);
line-height: 34px;
position: absolute;
text-align: center;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s 0s ease;
width: 230px;
}
@media all and (min-width: 1280px) {
.fp-instructorlist-carousel-item-name {
bottom: 0;
line-height: 40px;
}
}
.fp-instructorlist-carousel-item-icon {
margin-left: 5px;
}
.fp-classlist-carousel-item-desc {
background: rgba(255, 255, 255, 0.8);
height: 140px;
margin-bottom: 0;
padding: 10px 15px;
text-align: justify;
width: 100%;
}
@media all and (min-width: 360px) and (max-width: 1279px) {
.fp-classlist-carousel-item-desc {
height: 120px;
}
}
@media all and (min-width: 1280px) {
.fp-classlist-carousel-item-desc {
padding: 20px 25px;
height: 160px;
}
}
.fp-classlist-carousel-marker-wrapper,
.fp-instructorlist-carousel-marker-wrapper {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.fp-classlist-carousel-backward,
.fp-classlist-carousel-forward,
.fp-instructorlist-carousel-backward,
.fp-instructorlist-carousel-forward {
cursor: pointer;
height: 30px;
width: 30px;
}
.fp-classlist-carousel-backward,
.fp-instructorlist-carousel-backward {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/slider_backward.png) no-repeat
center/contain;
margin-right: 10px;
}
.fp-classlist-carousel-forward,
.fp-instructorlist-carousel-forward {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/slider_forward.png) no-repeat
center/contain;
margin-left: 10px;
}
.fp-classlist-carousel-marker,
.fp-instructorlist-carousel-marker {
background: #ccc;
border-radius: 50%;
height: 5px;
margin: 0 2px;
transition: background 0.3s 0s ease;
width: 5px;
}
.fp-classlist-carousel-marker.is-current,
.fp-instructorlist-carousel-marker.is-current {
background: #e1881b;
}
.fp-classlist-cta {
margin: 0 auto 80px;
max-width: 800px;
min-width: 300px;
width: calc(100% - 80px);
}
@media all and (min-width: 568px) and (max-width: 1279px) {
.fp-classlist-cta {
margin-bottom: 100px;
}
}
@media all and (min-width: 1280px) {
.fp-classlist-cta {
margin-bottom: 200px;
margin-top: -120px;
}
}
@media all and (min-width: 1024px) {
.fp-classlist-head {
font-size: 22px !important;
}
}
.fp-classlist-cta-list {
list-style: none;
margin-left: -2em;
margin-top: 20px;
}
@media all and (min-width: 736px) {
.fp-classlist-cta-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.fp-classlist-cta-list-item {
border-top: 1px solid #aaa;
padding-left: 2em;
}
.fp-classlist-cta-list-item:last-child {
border-bottom: 1px solid #aaa;
}
@media all and (min-width: 736px) {
.fp-classlist-cta-list-item {
width: 45%;
}
@media all and (min-width: 1280px) {
.fp-classlist-cta-list-item {
width: 46%;
}
}
.fp-classlist-cta-list-item:nth-child(3) {
border-bottom: 1px solid #aaa;
}
}
.fp-classlist-cta-list-item-text {
color: #666;
display: block;
font-size: 1.2em;
font-weight: bold;
line-height: 3em;
position: relative;
text-decoration: none;
}
.fp-classlist-cta-list-item-text::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png)
no-repeat center/contain;
content: "";
height: 20px;
position: absolute;
right: 2em;
top: calc(50% - 10px);
width: 20px;
}
.fp-sec-movie {
height: 75px;
padding: 0;
}
.fp-sec-movie-h2 {
line-height: 75px;
}
.fp-movie {
margin: 30px auto 0;
min-width: 300px;
width: calc(100% - 30px);
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.fp-movie {
width: 420px;
}
}
@media all and (min-width: 1280px) {
.fp-movie {
width: 900px;
}
}
.fp-movie-list {
list-style: none;
}
@media all and (min-width: 1280px) {
.fp-movie-list {
display: flex;
justify-content: space-between;
}
}
.fp-movie-item {
margin-bottom: 30px;
margin-left: 0;
width: 100%;
}
@media all and (min-width: 1280px) {
.fp-movie-item {
width: 48%;
}
}
.fp-movie-info {
display: block;
padding-left: 1em;
}
.fp-sec-studio {
height: 75px;
padding: 0;
}
.fp-sec-studio-h2 {
line-height: 75px;
}
.fp-studio {
margin: 30px auto 80px;
min-width: 300px;
width: calc(100% - 30px);
}
@media all and (min-width: 736px) {
.fp-studio {
width: 460px;
}
}
@media all and (min-width: 1280px) {
.fp-studio {
margin-bottom: 200px;
}
}
.fp-studio-wrapper,
.fp-studio-list {
list-style: none;
margin-left: -2em;
}
.fp-studio-location {
margin-bottom: 30px;
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.fp-studio-location {
margin-bottom: 40px;
}
}
@media all and (min-width: 1280px) {
.fp-studio-location {
margin-bottom: 50px;
}
}
@media all and (min-width: 1024px) {
.fp-studio-head {
font-size: 22px !important;
}
}
.fp-studio-item {
margin-bottom: 20px;
}
.fp-studio-info {
display: block;
height: 200px;
margin: 0 auto;
min-width: 300px;
padding: 10px 15px;
position: relative;
text-decoration: none;
width: calc(100% - 40px);
}
@media all and (min-width: 1280px) {
.fp-studio-info {
height: 240px;
}
}
.fp-studio-mask {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fp-studio-text {
color: #fff;
display: block;
position: relative;
text-align: justify;
z-index: 5;
}
.fp-studio-name {
border-bottom: 1px dashed #fff;
font-weight: bold;
margin-bottom: 1em;
}
.fp-studio-access {
font-size: 16px;
}
.fp-studio-cta {
background: rgba(255, 255, 255, 0.2);
border: 1px solid #fff;
bottom: 15px;
color: #fff;
font-size: 16px;
left: 15px;
line-height: 2em;
position: absolute;
text-align: center;
transition: all 0.3s 0s ease;
width: calc(100% - 30px);
}
.fp-studio-cta::before,
.fp-studio-cta::after {
content: "";
height: 10px;
position: absolute;
right: 15px;
top: calc(50% - 6px);
width: 10px;
}
.fp-studio-cta::before {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png)
no-repeat center/contain;
}
.fp-studio-cta::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png)
no-repeat center/contain;
opacity: 1;
transition: opacity 0.3s 0s ease;
}
.fp-studio-item:hover .fp-studio-cta {
background: rgba(255, 255, 255, 1);
color: #ff8c00;
}
.fp-studio-item:hover .fp-studio-cta::after {
opacity: 0;
}
.fp-studio-notes {
font-size: 12px !important;
}
.fp-price {
margin: 30px auto 0;
min-width: 300px;
width: calc(100% - 30px);
}
@media all and (min-width: 736px) {
.fp-price {
width: 460px;
}
}
@media all and (min-width: 1280px) {
.fp-price {
margin-bottom: 200px;
}
}
.fp-price-content {
margin-top: 1em;
padding-left: 1.5em;
}
.fp-price-content-text span {
color: #e1881b;
font-size: 1.5em;
font-weight: bold;
} .line-height-default {
line-height: 1.6em;
}
.class-lineup-pickup-box {
margin-bottom: 80px;
}
.head-style-fukidashi {
color: #ff8c00;
font-size: 22px;
font-weight: bold;
text-align: center;
width: 100%;
}
.size-16px {
font-size: 16px;
}
.box-centered {
margin-left: auto;
margin-right: auto;
}
#class-lineup-sec-2nd {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 20px;
margin-bottom: 80px;
padding: 20px 20px 0;
}
@media all and (min-width: 736px) {
.class-lineup-leading-wrapper {
align-items: flex-start;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
width: 100%;
}
}
@media all and (max-width: 735px) {
.class-lineup-sort-menu {
width: 100%;
}
}
@media all and (min-width: 736px) {
.class-lineup-sort-menu {
width: calc((100% - 15px) / 2);
}
.class-lineup-sort-menu:nth-child(even) {
margin-left: 15px;
}
}
.head-style-fukidashi-search {
font-size: 18px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
width: 100%;
}
.head-style-fukidashi-search span {
color: #ff8c00;
font-size: 24px;
}
.class-lineup-sort-btn {
background-color: #fff;
border: 1px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
color: #ff8c00;
display: block;
font-size: 1.1em;
margin-bottom: 30px;
padding: 8px 0;
text-align: center;
text-decoration: none;
width: 100%;
}
@media all and (min-width: 1280px) {
.class-lineup-sort-btn {
transition: all 0.3s 0s ease;
}
.class-lineup-sort-btn:hover {
background-color: #ff8c00;
color: #fff;
}
}
.carnelian-btn-link-icon,
.carnelian-btn-link-icon-down {
display: inline-block;
height: 14px;
line-height: 1;
margin-left: 10px;
position: relative;
width: 14px;
}
.carnelian-btn-link-icon::before,
.carnelian-btn-link-icon::after,
.carnelian-btn-link-icon-down::before,
.carnelian-btn-link-icon-down::after {
background-position: relative;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 100%;
left: 0;
line-height: 1;
position: absolute;
top: 0;
width: 100%;
}
.carnelian-btn-link-icon-down::before,
.carnelian-btn-link-icon-down::after {
transform: rotate(90deg);
}
.carnelian-btn-link-icon::before,
.carnelian-btn-link-icon-down::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png);
}
.carnelian-btn-link-icon::after,
.carnelian-btn-link-icon-down::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
opacity: 0;
}
@media all and (min-width: 1280px) {
.carnelian-btn-link-icon::after,
.carnelian-btn-link-icon-down::after {
transition: opacity 0.3s 0s ease;
}
.class-lineup-sort-btn:hover .carnelian-btn-link-icon::after,
.class-lineup-sort-btn:hover .carnelian-btn-link-icon-down::after {
opacity: 1;
}
}
#class-lineup-sec-3rd {
margin-bottom: 60px;
}
.pickup-class-box {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 5px;
box-shadow: none;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.2s 0s ease;
}
@media all and (max-width: 520px) {
.pickup-class-box {
width: 100%;
}
}
@media all and (min-width: 521px) and (max-width: 900px) {
.pickup-class-box {
width: calc(50% - 10px);
}
#class-lineup-sec-3rd .pickup-class-box:nth-child(1),
#class-lineup-sec-3rd .pickup-class-box:nth-child(3) {
margin-right: 5px;
}
#class-lineup-sec-3rd .pickup-class-box:nth-child(2),
#class-lineup-sec-3rd .pickup-class-box:nth-child(4) {
margin-left: 5px;
}
}
@media all and (min-width: 901px) {
.pickup-class-box {
width: calc(100% / 3 - 10px);
}
#class-lineup-sec-3rd .pickup-class-box:nth-child(2) {
margin-left: 15px;
margin-right: 15px;
}
#class-lineup-sec-3rd .pickup-class-box:nth-child(4) {
margin-right: 7.5px;
}
#class-lineup-sec-3rd .pickup-class-box:nth-child(5) {
margin-left: 7.5px;
}
}
#class-lineup-sec-4th {
margin-bottom: 60px;
}
@media all and (max-width: 520px) {
#class-lineup-sec-4th .head-style-fukidashi {
letter-spacing: -1.5px;
}
}
@media all and (min-width: 521px) and (max-width: 900px) {
#class-lineup-sec-4th .pickup-class-box:nth-child(1) {
margin-right: 5px;
}
#class-lineup-sec-4th .pickup-class-box:nth-child(2) {
margin-left: 5px;
}
}
@media all and (min-width: 901px) {
#class-lineup-sec-4th .pickup-class-box:nth-child(2) {
margin-left: 15px;
margin-right: 15px;
}
}
#class-lineup-sec-5th {
margin-bottom: 100px;
}
.consul-cta-lead-txt {
padding: 0 20px;
text-align: justify;
}
.class-lineup-sec5-consul-cta {
align-items: center;
background-color: #fff;
border: 1px solid #ff8c00;
border-radius: 10px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
display: flex;
justify-content: center;
margin: 30px auto 0;
max-width: 350px;
padding: 5px;
position: relative;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
width: 100%;
}
.class-lineup-sec5-consul-cta:hover {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.8);
}
.consul-cta-free {
align-items: center;
background-color: #ff8c00;
border-radius: 50%;
display: flex;
height: 44px;
left: 10px;
justify-content: center;
position: absolute;
top: -18px;
width: 44px;
}
.consul-cta-free span {
color: #fff;
font-weight: bold;
writing-mode: vertical-rl;
}
.consul-cta-btn {
display: inline-block;
text-align: center;
}
.consul-cta-fukidashi {
color: #ff8c00;
font-weight: bold;
text-shadow:
1px 1px 1px #fff,
1px -1px 1px #fff,
-1px 1px 1px #fff,
-1px -1px 1px #fff;
position: relative;
z-index: 1000;
}
.consul-cta-body-text {
font-size: 1.2em;
font-weight: bold;
}
.consul-cta-arrow {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/header/next-icon.png) no-repeat center/contain;
height: 18px;
position: absolute;
right: 10px;
top: calc(50% - 9px);
width: 18px;
}
#class-lineup-sec-6th {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media all and (max-width: 735px) {
#class-lineup-sec-6th {
margin-bottom: 20px;
}
}
@media all and (min-width: 736px) {
#class-lineup-sec-6th {
margin-bottom: 40px;
}
}
.class-box {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 5px;
box-shadow: none;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.2s 0s ease;
}
.class-box:hover {
background-color: rgba(255, 255, 255, 1);
}
@media print, screen and (max-width: 735px) {
.mod-width-2nd {
width: 100%;
}
.letter-spacing-1,
.letter-spacing-2,
.letter-spacing-3 {
letter-spacing: normal;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.mod-width-2nd {
width: calc(100% / 2 - 15px);
}
.letter-spacing-1,
.letter-spacing-2 {
letter-spacing: normal;
}
.letter-spacing-3 {
letter-spacing: -1px;
}
}
@media print, screen and (min-width: 1280px) {
.mod-width-2nd {
width: calc(100% / 3 - 10px);
}
.letter-spacing-1 {
letter-spacing: normal;
}
.letter-spacing-2 {
letter-spacing: -2px;
}
.letter-spacing-3 {
letter-spacing: -3px;
}
}
.class-name {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
height: 130px;
position: relative;
width: 100%;
}
.class-name-h2 {
background-color: rgba(255, 69, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 1.2em;
left: 0;
line-height: 2.2em;
position: absolute;
text-align: center;
text-shadow:
1px 1px 4px #333,
1px -1px 4px #333,
-1px 1px 4px #333,
-1px -1px 4px #333;
width: 100%;
}
.class-desc {
padding: 15px;
}
.see-details {
background-color: #fff;
border: 1px solid #ff4500;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
margin: 0 auto 15px;
padding: 10px 0;
text-align: center;
transition: all 0.2s 0s ease;
width: calc(100% - 30px);
}
.see-details span {
color: #ff4500;
position: relative;
transition: all 0.2s 0s ease;
}
.see-details span::before,
.see-details span::after {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 16px;
position: absolute;
right: -30px;
top: calc(50% - 9px);
transform: rotate(90deg);
width: 16px;
}
.see-details span::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta-white.png);
}
.see-details span::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta.png);
opacity: 1;
transition: opacity 0.2s 0s ease;
}
.class-box:hover .see-details,
.pickup-class-box:hover .see-details {
background-color: rgba(255, 69, 0, 0.5);
}
.class-box:hover .see-details span,
.pickup-class-box:hover .see-details span {
color: #fff;
}
.class-box:hover .see-details span::after,
.pickup-class-box:hover .see-details span::after {
opacity: 0;
}
.margin-t-50 {
margin-top: 50px;
}
.margin-b-04x {
margin-bottom: 0.4em;
}
.margin-b-2x {
margin-bottom: 2em;
}
.margin-b-3x {
margin-bottom: 3em;
}
.txt-blue {
color: #6933ff;
}
#class-lineup-sec-7th {
margin: 0 auto;
}
#class-lineup-sec-7th p {
font-size: 16px;
}
@media print, screen and (max-width: 735px) {
.mod-width-3rd {
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.mod-width-3rd {
width: 580px;
}
}
@media print, screen and (min-width: 1280px) {
.mod-width-3rd {
width: 610px;
}
}
.cmnpg-h2-style {
border-bottom: 1px solid #999;
margin-bottom: 1em;
position: relative;
text-align: center;
}
@media print, screen and (max-width: 735px) {
.cmnpg-h2-style {
font-size: 18px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.cmnpg-h2-style {
font-size: 1.2em;
}
}
@media print, screen and (min-width: 1280px) {
.cmnpg-h2-style {
font-size: 1.2em;
}
}
.cmnpg-h2-style::before {
background-color: #ff4500;
bottom: -2px;
content: "";
height: 3px;
left: 0;
position: absolute;
width: 15px;
}
.cmnpg-mendan-form {
display: inline-block;
position: relative;
text-align: center;
}
@media print, screen and (max-width: 735px) {
.cmnpg-mendan-form {
font-size: 18px;
margin-left: calc(50% - 130px);
width: 260px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.cmnpg-mendan-form {
font-size: 1.2em;
margin-left: calc(50% - 130px);
width: 280px;
}
}
@media print, screen and (min-width: 1280px) {
.cmnpg-mendan-form {
font-size: 1.2em;
margin-left: calc(50% - 140px);
width: 280px;
}
}
.cmnpg-mendan-form::after {
background-color: #999;
bottom: -1px;
content: "";
height: 1px;
left: -10px;
position: absolute;
width: calc(100% + 20px);
}
.cf-privacy-policy {
color: #777;
font-size: 14px !important;
}
@media print, screen and (max-width: 735px) {
.margin-mod {
margin-bottom: 1em;
}
.wpcf7-form div {
font-size: 16px;
}
}
@media print, screen and (min-width: 736px) {
.margin-mod {
margin-bottom: 0;
}
}
.mod-style {
display: block;
margin: 0.4em 0;
text-align: center;
}
.section-cta-class-lineup-list {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 20px;
padding: 20px 20px 0;
}
@media all and (max-width: 359px) {
.section-cta-class-lineup-list {
margin: 30px auto 70px;
width: calc(100% - 20px);
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.section-cta-class-lineup-list {
margin: 30px auto 70px;
width: calc(100% - 30px);
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.section-cta-class-lineup-list {
margin: 40px auto 70px;
max-width: 720px;
width: calc(100% - 40px);
}
}
@media all and (min-width: 1280px) {
.section-cta-class-lineup-list {
margin: 80px auto 200px;
width: 720px;
}
} .class-overview__class-link--wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.class-overview__class-link--box {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
height: 270px;
margin-bottom: 20px;
position: relative;
width: 100%;
}
@media all and (min-width: 800px) {
.class-overview__class-link--box {
width: calc(50% - 10px);
}
}
.class-overview__class-link--inner {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #fff;
box-sizing: border-box;
height: 100%;
padding: 15px 20px;
position: relative;
width: 100%;
}
.class-overview__class-link--h3 {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
}
@media all and (max-width: 1279px) {
.class-overview__class-link-h3 {
text-align: center;
}
}
.class-overview__class-link--info {
color: #fff;
margin-bottom: 1.5em;
}
.class-overview__class-link--icon {
background: #fff;
border: 3px solid #ffc000;
border-radius: 8px;
display: inline-block;
font-size: 12px;
height: 28px;
line-height: 25px;
margin-bottom: 2em;
position: relative;
}
.class-overview__class-link--icon_beginner_1 {
padding: 0 1em 0 3em;
}
.class-overview__class-link--icon_beginner_1::before {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_beginner.png) no-repeat center/contain;
content: "";
height: 28px;
left: 6px;
position: absolute;
top: -3px;
width: 28px;
}
.class-overview__class-link--icon_beginner_2 {
padding: 0 1em 0 4.2em;
}
.class-overview__class-link--icon_beginner_2::before,
.class-overview__class-link--icon_beginner_2::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_beginner.png) no-repeat center/contain;
content: "";
height: 28px;
position: absolute;
top: -3px;
width: 28px;
}
.class-overview__class-link--icon_beginner_2::before {
left: 2px;
}
.class-overview__class-link--icon_beginner_2::after {
left: 20px;
}
.carnelian-link-btns {
bottom: 15px;
left: 15px;
position: absolute;
width: calc(100% - 30px);
}
.class-overview__class-link--btn-box {
bottom: 15px;
left: 0;
padding: 0 20px;
position: absolute;
width: 100%;
}
.class-overview__class-link--btn {
background: #fff;
border-radius: 4px;
display: block;
font-size: 0.8em;
position: relative;
text-align: center;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.class-overview__class-link--inner .class-overview__class-link--btn:not(:last-child) {
margin-bottom: 1em;
}
.class-overview__class-link--btn:hover {
background: #ffa07a;
color: #333;
}
.class-overview__class-link--btn_cta {
border: 2px solid #fe5415;
color: #fe5415;
line-height: 30px;
}
.class-overview__class-link--btn_cta::before,
.class-overview__class-link--btn_cta::after {
content: "";
height: 10px;
position: absolute;
right: 15px;
top: calc(50% - 5px);
transform: rotate(-90deg);
width: 10px;
}
.class-overview__class-link--btn_cta::before {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/arrow-form.png) no-repeat center/contain;
}
.class-overview__class-link--btn_cta::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/arrow-form_orange.png) no-repeat center/contain;
opacity: 1;
transition: opacity 0.3s 0s ease;
}
.class-overview__class-link--btn:hover.class-overview__class-link--btn_cta::after {
opacity: 0;
}
.class-overview__class-link--btn_link {
border: 2px solid #fff;
color: #333;
line-height: 28px;
}
.class-overview__class-link--btn_link::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/arrow-form.png) no-repeat center/contain;
content: "";
height: 10px;
position: absolute;
right: 15px;
top: calc(50% - 5px);
transform: rotate(-90deg);
width: 10px;
}
.class-overview__instructor-link--wrapper {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 5px;
}
@media all and (min-width: 414px) and (max-width: 735px) {
.class-overview__instructor-link--wrapper {
padding: 0 10px;
}
}
@media all and (min-width: 736px) {
.class-overview__instructor-link--wrapper {
padding: 0 20px;
}
}
.class-overview__instructor-link--wrapper:not(:last-child) {
margin-bottom: 30px;
}
.class-overview__instructor-link--img {
border: 1px solid #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
font-size: 0;
height: 250px;
width: 100%;
}
@media all and (min-width: 736px) {
.class-overview__instructor-link--img {
margin-right: 30x;
width: 280px;
}
}
.class-overview__instructor-link--img img {
height: 100%;
object-fit: cover;
object-position: center;
}
.class-overview__instructor-link--info {
width: 100%;
}
@media all and (max-width: 735px) {
.class-overview__instructor-link--info {
margin-top: 10px;
}
}
@media all and (min-width: 736px) {
.class-overview__instructor-link--info {
width: calc(100% - 280px - 30px);
}
}
.class-overview__instructor-link--info_h3 {
border-bottom: 1px dashed #000;
padding-bottom: 2px;
}
@media all and (max-width: 735px) {
.class-overview__instructor-link--info_h3 {
text-align: center;
}
}
.class-overview__instructor-link--info_profile {
margin-top: 1em;
text-align: justify;
}
.class-overview__instructor-link--info_btn {
background: rgba(255, 255, 255, 0.8);
border: 1px solid #ff4500;
border-radius: 10px;
color: #ff4500;
display: block;
line-height: 40px;
text-align: center;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.class-overview__instructor-link--info_btn:hover {
background: rgba(255, 69, 0, 0.4);
color: #fff;
} .details-page-class-list-wrapper {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media all and (max-width: 375px) {
.details-page-class-list-wrapper {
padding: 0 4px;
}
}
@media all and (min-width: 376px) and (max-width: 735px) {
.details-page-class-list-wrapper {
padding: 0 10px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.details-page-class-list-wrapper {
padding: 0 15px;
}
}
@media all and (min-width: 1280px) {
.details-page-class-list-wrapper {
padding: 0 20px;
}
}
.details-page-class-list {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
margin-bottom: 15px;
padding: 15px;
position: relative;
text-decoration: none;
}
@media all and (max-width: 674px) {
.details-page-class-list {
width: 100%;
}
}
@media all and (min-width: 675px) {
.details-page-class-list {
width: calc(50% - 10px);
}
}
.bg-masking {
background-color: rgba(0, 0, 0, 0.7);
left: 0;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
.details-page-class-list-info {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 100;
}
.details-page-class-list-info-title {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
}
@media all and (max-width: 359px) {
.details-page-class-list-info-title {
letter-spacing: -1px;
}
}
@media all and (max-width: 567px) {
.details-page-class-list-info-description {
list-style: none;
min-height: 65px;
}
}
@media all and (min-width: 568px) {
.details-page-class-list-info-description {
list-style: none;
min-height: 72px;
}
}
.details-page-class-list-info-contents {
color: #fff;
line-height: 1.6em;
margin-left: 0;
}
@media all and (max-width: 359px) {
.details-page-class-list-info-contents {
letter-spacing: -0.5px;
}
}
@media all and (min-width: 675px) and (max-width: 724px) {
.details-page-class-list-info-contents {
letter-spacing: -1.2px;
}
}
@media all and (min-width: 725px) and (max-width: 780px) {
.details-page-class-list-info-contents {
letter-spacing: -0.9px;
}
}
.details-page-class-list-info-btn {
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid #fff;
color: #fff;
margin-bottom: 0;
padding: 5px 0;
text-align: center;
transition: all 0.3s 0s ease;
}
.details-page-class-list:hover .details-page-class-list-info-btn {
background-color: rgba(255, 255, 255, 0.9);
color: #ff8c00;
}
.details-page-class-list-info-btn-icon {
display: inline-block;
height: 12px;
margin-left: 10px;
position: relative;
width: 12px;
}
.details-page-class-list-info-btn-icon::before,
.details-page-class-list-info-btn-icon::after {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 12px;
left: 0;
position: absolute;
top: 0;
transition: opacity 0.3s 0s ease;
width: 12px;
}
.details-page-class-list-info-btn-icon::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
opacity: 1;
}
.details-page-class-list:hover .details-page-class-list-info-btn-icon::before {
opacity: 0;
}
.details-page-class-list-info-btn-icon::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png);
opacity: 0;
}
.details-page-class-list:hover .details-page-class-list-info-btn-icon::after {
opacity: 1;
}
.details-page-bottom-cta-field {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 20px;
margin: 0 auto 50px;
padding: 20px 20px 0;
}
@media all and (max-width: 375px) {
.details-page-bottom-cta-field {
width: calc(100% - 6px);
}
}
@media all and (min-width: 376px) and (max-width: 735px) {
.details-page-bottom-cta-field {
width: calc(100% - 20px);
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.details-page-bottom-cta-field {
width: calc(100% - 30px);
}
}
@media all and (min-width: 1280px) {
.details-page-bottom-cta-field {
width: calc(100% - 40px);
}
}
@media all and (max-width: 359px) {
.beginners-class-cta {
margin: 30px auto 80px;
padding-left: 10px;
}
}
@media all and (min-width: 360px) and (max-width: 413px) {
.beginners-class-cta {
margin: 30px auto 80px;
padding: 0 5px 0 20px;
}
}
@media all and (min-width: 414px) and (max-width: 735px) {
.beginners-class-cta {
margin: 30px auto 80px;
padding: 0 15px 0 30px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.beginners-class-cta {
margin: 30px auto 60px;
width: 420px;
}
}
@media all and (min-width: 1280px) {
.beginners-class-cta {
margin: 40px auto 60px;
width: 520px;
}
}
.beginners-class-cta-btn-wrapper {
border-radius: 10px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
@media all and (max-width: 359px) {
.beginners-class-cta-btn-wrapper {
margin-top: 20px;
width: calc(100% - 10px);
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.beginners-class-cta-btn-wrapper {
margin-top: 20px;
width: calc(100% - 15px);
}
}
@media all and (min-width: 736px) {
.beginners-class-cta-btn-wrapper {
margin: 20px auto 0;
transition: box-shadow 0.3s 0s ease;
width: 75%;
}
.beginners-class-cta-btn-wrapper:hover {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.8);
}
}
.beginners-class-cta-btn {
background-color: #ff8c00;
border: 1px solid #ff8c00;
border-radius: 10px;
color: #fff;
display: flex;
font-size: 1.1em;
line-height: 1;
justify-content: center;
padding: 10px;
text-decoration: none;
width: 100%;
}
@media all and (min-width: 1280px) {
.beginners-class-cta-btn {
transition: all 0.3s 0s ease;
}
.beginners-class-cta-btn:hover {
color: #fff;
}
}
.beginners-btn-link-icon {
display: inline-block;
height: 14px;
line-height: 1;
margin-left: 10px;
position: relative;
width: 14px;
}
.beginners-btn-link-icon::before,
.beginners-btn-link-icon::after {
background-position: relative;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 100%;
left: 0;
line-height: 1;
position: absolute;
top: 0;
width: 100%;
}
.beginners-btn-link-icon::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
}
.details-voice-wrapper {
align-items: flex-start;
display: flex;
}
.details-voice-wrapper:not(:last-child) {
margin-bottom: 30px;
}
@media all and (max-width: 600px) {
.details-voice-wrapper {
flex-wrap: wrap;
justify-content: center;
}
}
@media all and (min-width: 601px) {
.details-voice-wrapper {
justify-content: space-between;
}
}
.details-voice-img {
height: 150px;
}
@media all and (max-width: 600px) {
.details-voice-img {
text-align: center;
width: 100%;
}
}
@media all and (min-width: 601px) {
.details-voice-img {
width: 210px;
}
}
.details-voice-img img {
background-color: #fff;
border: 1px solid #fff;
height: 100%;
object-fit: cover;
}
@media all and (max-width: 600px) {
.details-voice-img img {
width: 210px;
}
}
@media all and (min-width: 601px) {
.details-voice-img img {
width: 100%;
}
}
.details-voice-text {
background-color: #fff;
border: 2px solid #ffb599;
border-radius: 15px;
line-height: 1.4;
padding: 1em 2em;
position: relative;
text-align: justify;
}
@media all and (max-width: 600px) {
.details-voice-text {
margin-top: 20px;
width: 100%;
}
}
@media all and (min-width: 601px) {
.details-voice-text {
width: calc(100% - 210px - 30px);
}
}
.details-voice-text p:last-child {
margin-bottom: 0;
}
.details-voice-text::before,
.details-voice-text::after {
content: "";
position: absolute;
}
@media all and (max-width: 600px) {
.details-voice-text::before,
.details-voice-text::after {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: calc(50% - 10px);
}
.details-voice-text::before {
border-bottom: 20px solid #ffb599;
top: -20px;
}
.details-voice-text::after {
border-bottom: 20px solid #fff;
top: -15px;
}
}
@media all and (min-width: 601px) {
.details-voice-text::before,
.details-voice-text::after {
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;
top: 30px;
}
.details-voice-text::before {
border-right: 25px solid #ffb599;
left: -25px;
}
.details-voice-text::after {
border-right: 25px solid #fff;
left: -21px;
}
}
.class-detail__h1 {
line-height: 1.2;
}
.class-detail__h1 span {
color: #fff;
}
.class-detail__indicator {
border-bottom: 1px dotted #333;
font-weight: bold;
} #blog-single {
line-height: 1.8em;
}
.head-style-h2,
.head-style-h3,
.head-style-h4 {
line-height: 1.4em !important;
margin-bottom: 1em;
margin-top: 2em;
}
@media print, screen and (max-width: 359px) {
.head-style-h2 {
font-size: 20px !important;
}
.head-style-h3 {
font-size: 20px !important;
}
.head-style-h4 {
font-size: 18px !important;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.head-style-h2 {
font-size: 24px !important;
}
.head-style-h3 {
font-size: 22px !important;
}
.head-style-h4 {
font-size: 20px !important;
}
}
@media print, screen and (min-width: 736px) {
.head-style-h2 {
font-size: 26px !important;
}
.head-style-h3 {
font-size: 24px !important;
}
.head-style-h4 {
font-size: 22px !important;
}
}
.head-style-h2,
.head-style-h3,
.head-style-h4 {
line-height: 1.2em;
padding: 0 0.5em;
position: relative;
}
.head-style-h2::before,
.head-style-h2::after {
content: "";
left: 0;
position: absolute;
}
.head-style-h2::before {
background-color: #999;
bottom: -5px;
height: 1px;
width: 100%;
z-index: 50;
}
.head-style-h2::after {
background-color: #ff8c00;
bottom: -6px;
height: 3px;
width: 5%;
z-index: 100;
}
.head-style-h3::before {
background-color: #999;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 1px;
}
.head-style-h3::after {
background-color: #ff8c00;
content: "";
height: 12px;
left: -1px;
position: absolute;
top: 0;
width: 3px;
}
.oblique-japanese {
display: inline-block;
transform: skew(-20deg);
}
.underline {
text-decoration: underline;
}
.size-x120 {
font-size: 120%;
}
.size-x140 {
font-size: 140%;
}
.size-x160 {
font-size: 160%;
}
.size-x180 {
font-size: 180%;
}
.size-x200 {
font-size: 200%;
}
.size-x80 {
font-size: 80%;
}
.related-post-portrait {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media print, screen and (max-width: 735px) {
.related-post-portrait,
.related-post-landscape {
margin: 4em auto;
}
.related-post-portrait-wrapper {
position: relative;
width: 100%;
}
.related-post-portrait .related-post-portrait-wrapper:not(:first-child) {
margin-top: 30px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.related-post-portrait,
.related-post-landscape {
margin: 4em auto;
max-width: 680px;
width: 100%;
}
}
@media print, screen and (min-width: 1280px) {
.related-post-portrait,
.related-post-landscape {
margin: 4em auto;
width: 720px;
}
}
@media print, screen and (min-width: 736px) {
.related-post-portrait-wrapper {
position: relative;
width: calc(50% - 20px);
}
.related-post-portrait-wrapper:nth-child(n + 3) {
margin-top: 30px;
}
.related-post-portrait-wrapper:last-child:not(:nth-child(even)) {
margin-left: auto;
margin-right: auto;
}
}
.related-post-landscape-wrapper {
position: relative;
width: 100%;
}
.boxed-field-title {
align-items: center;
background-color: rgba(255, 127, 80, 1);
border-radius: 5px;
display: flex;
font-size: 0;
left: 10px;
height: 30px;
padding: 0 10px;
position: absolute;
top: -15px;
z-index: 100;
}
.boxed-field-title-box {
height: 20px;
margin-right: 5px;
width: 20px;
}
.width-100 {
width: 100%;
}
.boxed-field-title-txt {
color: #fff;
font-size: 13px;
line-height: 30px;
margin: 0;
position: relative;
}
.related-post-content-wrapper {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.related-post-thumbnail {
background-color: #ccc;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.related-post-thumbnail-portrait {
height: 180px;
margin: 0 auto;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.related-post-thumbnail-landscape {
width: 100px;
}
}
@media print, screen and (min-width: 736px) {
.related-post-thumbnail-landscape {
width: 30%;
}
}
.related-post-content-portrait {
padding: 10px;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.related-post-content-landscape {
align-items: center;
display: flex;
padding: 30px 15px;
width: calc(100% - 100px);
}
}
@media print, screen and (min-width: 736px) {
.related-post-content-landscape {
align-items: center;
display: flex;
padding: 40px 30px;
width: 70%;
}
}
.related-post-title-portrait {
font-size: 1.25em;
font-weight: bold;
margin-top: 0.5em;
}
.related-post-title-landscape {
color: #4169e1;
font-size: 16px;
font-weight: bold;
margin: 0;
transition: all 0.2s 0s ease;
}
.related-post-content-wrapper:hover .related-post-title-landscape {
color: #ff8c00;
}
.related-post-btn-box {
text-align: right;
}
.related-post-link-btn {
background-color: #fff;
border: 1px solid #ff8c00;
border-radius: 15.5px;
color: #ff8c00;
font-weight: bold;
display: inline-block;
padding: 5px 14px;
text-decoration: none;
transition: all 0.2s 0s ease;
}
.related-post-link-btn:hover {
background-color: #ff8c00;
color: #fff;
}
.wakugumi {
margin: 4em auto;
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.wakugumi {
max-width: 680px;
}
}
@media print, screen and (min-width: 1280px) {
.wakugumi {
width: 720px;
}
}
.wakugumi-wrapper {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ffc371;
border-radius: 12px;
padding: 30px 20px 10px;
position: relative;
width: 100%;
}
@media print, screen and (max-width: 735px) {
.wakugumi-wrapper {
padding: 30px 20px 10px;
}
}
@media print, screen and (min-width: 736px) {
.wakugumi-wrapper {
padding: 30px 50px 10px;
}
}
.table-of-contents {
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid #ffc371;
border-radius: 10px;
margin: 3em auto 0;
overflow: hidden;
padding-bottom: 10px;
}
@media print, screen and (max-width: 735px) {
.table-of-contents {
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.table-of-contents {
width: 680px;
}
}
@media print, screen and (min-width: 1280px) {
.table-of-contents {
width: 720px;
}
}
.toc-title {
background-color: #ffc371;
font-weight: bold;
line-height: 2.5em;
margin-bottom: 1em;
text-align: center;
}
.toc-list,
.toc-list-child {
list-style: none;
margin-bottom: 0;
}
.toc-list .toc-item {
align-items: flex-start;
display: flex;
margin-bottom: 1em;
position: relative;
}
@media print, screen and (max-width: 359px) {
.toc-list .toc-item {
width: calc(100% - 10px);
}
.toc-list li {
margin-left: 10px;
}
.toc-list-child li {
margin-left: 20px;
}
}
@media print, screen and (min-width: 360px) and (max-width: 735px) {
.toc-list .toc-item {
width: calc(100% - 20px);
}
.toc-list li {
margin-left: 20px;
}
.toc-list-child li {
margin-left: 30px;
}
}
@media print, screen and (min-width: 736px) {
.toc-list .toc-item {
width: calc(100% - 30px);
}
}
.toc-list .toc-item::after {
background-color: #ccc;
bottom: -4px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
.toc-list-child .toc-item::after {
height: 1px;
}
.index-no {
background-color: #ffdfb3;
margin-right: 1em;
padding: 2px 8px;
}
.toc-link {
color: #333;
display: inline-block;
position: relative;
text-decoration: none;
transition: all 0.2s 0s ease;
}
.toc-link::after {
background-color: none;
bottom: 4px;
content: "";
height: 1px;
left: 0;
position: absolute;
transition: all 0.2s 0s ease;
width: 100%;
}
.toc-link:hover {
color: #ff4500;
}
.toc-link:hover::after {
background-color: #ff4500;
}
.toc-list .toc-link {
font-size: 1.1em;
padding: 2px 0;
}
.toc-list-child .toc-link {
font-size: 1em;
padding: 2px 0;
} .price-info-cta-btn {
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
display: flex;
justify-content: center;
margin: 0 auto;
}
@media all and (max-width: 414px) {
.price-info-cta-btn {
height: 50px;
width: 100%;
}
}
@media all and (min-width: 415px) {
.price-info-cta-btn {
height: 60px;
transition: all 0.3s 0s ease;
width: 300px;
}
.price-info-cta-btn:hover {
background-color: #ff8c00;
}
.price-info-cta-btn:hover a {
color: #fff;
}
}
.price-info-image-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
display: block;
margin: 10px auto 20px;
}
@media all and (max-width: 414px) {
.price-info-image-box {
height: 250px;
width: 100%;
}
}
@media all and (min-width: 415px) {
.price-info-image-box {
height: 300px;
width: 70%;
}
}
.carnelian-stampcard {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/priceinfo/carnelian-stampcard.jpg);
}
.perfect-attendance {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/feature-of-carnelian_2.jpg);
}
.class-simulator {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/priceinfo/class-simulator.jpg);
}
.line-h-160 {
line-height: 1.6em;
} #carnelian-timetable-sort-func {
align-content: flex-start;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #fff;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto 30px;
padding: 15px 0;
}
@media all and (max-width: 359px) {
#carnelian-timetable-sort-func {
width: 100%;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
#carnelian-timetable-sort-func {
width: 305px;
}
}
@media all and (min-width: 736px) {
#carnelian-timetable-sort-func {
width: 630px;
}
}
.timetable-sort-func-title {
font-size: 16px;
text-align: center;
width: 100%;
}
.timetable-sort-anchor {
align-items: center;
border-radius: 50%;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
height: 100%;
text-decoration: none;
width: 100%;
}
@media all and (max-width: 735px) {
.timetable-sort-anchor {
height: 60px;
margin: 0 5px;
width: 60px;
}
}
@media all and (min-width: 736px) {
.timetable-sort-anchor {
height: 63.75px;
margin: 0 10px;
width: 63.75px;
}
}
.color-weekday {
background-color: #fff;
border: 1px solid #ffa500;
}
.color-saturday {
background-color: #fff;
border: 1px solid blue;
}
.color-sunday {
background-color: #fff;
border: 1px solid #ff4500;
}
@media all and (min-width: 1280px) {
.timetable-sort-anchor {
transition: all 0.3s 0s ease;
}
.color-weekday.timetable-sort-anchor:hover {
background-color: #ffa500;
}
.color-saturday.timetable-sort-anchor:hover {
background-color: blue;
}
.color-sunday.timetable-sort-anchor:hover {
background-color: #ff4500;
}
}
.timetable-sort-anchor span {
font-size: 20px;
font-weight: bold;
}
.color-weekday span {
color: #ffa500;
}
.color-saturday span {
color: blue;
}
.color-sunday span {
color: #ff4500;
}
@media all and (min-width: 1280px) {
.timetable-sort-anchor span {
transition: all 0.3s 0s ease;
}
.timetable-sort-anchor:hover span {
color: #fff;
}
}
#timetable-btm-mendan {
padding-top: 50px;
}
.timetable-btm-mendan-title::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_5.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
bottom: -12px;
content: "";
position: absolute;
z-index: 1;
}
@media all and (max-width: 359px) {
.timetable-btm-mendan-title {
padding-left: 68px;
width: 300px;
}
.timetable-btm-mendan-title::before {
height: 90px;
left: -10px;
width: 90px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.timetable-btm-mendan-title {
padding-left: 80px;
width: 355px;
}
.timetable-btm-mendan-title::before {
height: 100px;
left: 0px;
width: 80px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.timetable-btm-mendan-title {
padding-left: 100px;
width: 380px;
}
.timetable-btm-mendan-title::before {
height: 105px;
left: 0px;
width: 105px;
}
}
@media all and (min-width: 1280px) {
.timetable-btm-mendan-title {
padding-left: 140px;
width: 520px;
}
.timetable-btm-mendan-title::before {
height: 140px;
left: 0px;
width: 140px;
}
} #recommended-class .header-box {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendations-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#recommended-class h2 {
line-height: 1.5em;
}
@media all and (max-width: 735px) {
.sim-leadcopy {
line-height: 1.6em;
text-align: justify;
text-justify: inter-ideograph;
}
}
@media all and (min-width: 736px) {
.sim-leadcopy {
line-height: 1.6em;
text-align: center;
}
}
.size-x2 {
font-size: 2em;
}
#simulator-field {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
width: 100%;
}
@media all and (max-width: 735px) {
#simulator-field {
height: 780px;
}
}
@media all and (min-width: 736px) {
#simulator-field {
height: 800px;
}
}
#simulator-content-wrapper {
align-items: top;
display: flex;
height: 100%;
margin-left: 0;
transition: margin-left 0.2s 0s ease;
width: 600%;
}
#simulator-content-wrapper.show-q1 {
margin-left: -100%;
}
#simulator-content-wrapper.show-q2 {
margin-left: -200%;
}
#simulator-content-wrapper.show-q3 {
margin-left: -300%;
}
#simulator-content-wrapper.show-q4 {
margin-left: -400%;
}
#simulator-content-wrapper.show-result {
margin-left: -500%;
}
#simulator-content-wrapper a {
text-decoration: none;
}
#sim-start-section {
height: 100%;
position: relative;
width: 100%;
}
.sim-bg {
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.simulator-content {
padding: 20px;
width: 100%;
}
.sim-start-btn-wrapper {
background-color: #fff;
border: 3px solid #ff8c00;
border-radius: 10px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 80px;
overflow: hidden;
position: relative;
z-index: 150;
}
@media all and (max-width: 735px) {
.sim-start-btn-wrapper {
margin-top: 20px;
width: 100%;
}
}
@media all and (min-width: 736px) {
.sim-start-btn-wrapper {
margin: 18px auto 0;
transition: all 0.3s 0s ease;
width: 80%;
}
.sim-start-btn-wrapper:hover {
transform: scale(1.02);
}
}
.sim-btn,
.sim-btn-next {
align-items: center;
color: #666;
font-weight: bold;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.sim-btn,
.sim-btn-next {
font-size: 1.5em;
}
.sim-btn-next {
line-height: 1.2em;
text-align: center;
}
.sim-result-btn-wrapper .sim-btn-next {
color: #fff;
}
@media all and (max-width: 359px) {
.sim-next-btn-wrapper.disabled .sim-btn-next,
.sim-result-btn-wrapper.disabled .sim-btn-next {
color: #666;
font-size: 1.05em;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.sim-next-btn-wrapper.disabled .sim-btn-next,
.sim-result-btn-wrapper.disabled .sim-btn-next {
color: #666;
font-size: 1.1em;
}
}
@media all and (min-width: 736px) {
.sim-next-btn-wrapper.disabled .sim-btn-next,
.sim-result-btn-wrapper.disabled .sim-btn-next {
color: #666;
font-size: 1.4em;
}
}
.sim-content-options-wrapper {
list-style: none;
margin-top: 30px;
}
.sim-options {
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
margin-bottom: 8px;
margin-left: 0;
padding: 15px 0;
transition: all 0.3s 0s ease;
}
.sim-options.checked {
border-color: #ff8c00;
}
.sim-option-txt {
color: #999;
font-size: 18px;
line-height: 1.4em;
position: relative;
top: 1px;
transition: color 0.3s 0s ease;
user-select: none;
width: calc(100% - 54px);
}
.sim-options:hover .sim-option-txt {
color: #333;
}
.sim-options.checked .sim-option-txt {
color: #ff8c00;
}
.sim-option-checkbox {
position: relative;
width: 54px;
}
.sim-option-checkbox::before,
.sim-option-checkbox::after {
border-radius: 50%;
content: "";
position: absolute;
transition: all 0.3s 0s ease;
}
.sim-option-checkbox::before {
border: 2px solid #999;
box-sizing: border-box;
left: 20px;
height: 24px;
top: calc(50% - 12px);
width: 24px;
}
.sim-options:hover .sim-option-checkbox::before {
border-color: #333;
}
.sim-options.checked .sim-option-checkbox::before {
border-color: #ff8c00;
}
.sim-option-checkbox::after {
background-color: none;
left: 24px;
height: 16px;
top: calc(50% - 8px);
width: 16px;
}
.sim-options.checked .sim-option-checkbox::after {
background-color: #ff8c00;
}
.disabled.sim-options {
cursor: default;
}
.disabled.sim-options .sim-option-txt {
color: #ddd;
}
.disabled.sim-options .sim-option-checkbox::before {
border-color: #ddd;
}
.sim-lead-btn-field {
display: flex;
justify-content: space-between;
}
@media all and (max-width: 735px) {
.sim-lead-btn-field {
margin-top: 20px;
width: 100%;
}
}
@media all and (min-width: 736px) {
.sim-lead-btn-field {
margin: 0 auto;
width: 80%;
}
}
.sim-back-btn-wrapper,
.sim-next-btn-wrapper,
.sim-result-btn-wrapper {
border: 3px solid #999;
border-radius: 10px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
overflow: hidden;
width: 48%;
}
.sim-back-btn-wrapper {
background-color: #b0c4de;
}
.sim-next-btn-wrapper {
background-color: #f5deb3;
}
.sim-result-btn-wrapper {
background-color: #ff8c00;
transition: background-color 0.3s 0s ease;
}
.sim-result-btn-wrapper.disabled {
background-color: #f5deb3;
}
@media all and (max-width: 735px) {
.sim-back-btn-wrapper,
.sim-next-btn-wrapper,
.sim-result-btn-wrapper {
height: 60px;
}
}
@media all and (min-width: 736px) {
.sim-back-btn-wrapper,
.sim-next-btn-wrapper,
.sim-result-btn-wrapper {
height: 80px;
transition: all 0.3s 0s ease;
}
.sim-back-btn-wrapper:hover,
.sim-next-btn-wrapper:hover,
.sim-result-btn-wrapper:hover {
transform: scale(1.02);
}
}
.result-headcopy {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.result-headcopy span {
font-size: 1.35em;
}
.result-top3-class-list-wrapper {
margin: 5px auto 0;
}
@media all and (max-width: 735px) {
.result-top3-class-list-wrapper {
width: 100%;
}
}
@media all and (min-width: 736px) {
.result-top3-class-list-wrapper {
width: 400px;
}
}
.result-top3-class-list {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ff8c00;
border-radius: 10px;
list-style: none;
}
@media all and (max-width: 359px) {
.result-top3-class-list {
padding: 20px 5px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.result-top3-class-list {
padding: 20px 10px;
}
}
@media all and (min-width: 736px) {
.result-top3-class-list {
padding: 20px;
}
}
.result-top3-class {
align-items: center;
display: flex;
}
.top3-1st,
.top3-2nd {
margin: 0 0 25px;
position: relative;
}
.top3-1st::after,
.top3-2nd::after {
background-color: rgba(0, 0, 0, 0.2);
bottom: -12px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.top3-3rd {
margin: 0;
}
.result-top3-icon {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/top3-checkmark.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 20px;
margin-right: 5px;
position: relative;
top: -4px;
width: 20px;
}
@media all and (max-width: 359px) {
.result-top3-icon {
margin-right: 5px;
}
}
@media all and (min-width: 360px) {
.result-top3-icon {
margin-right: 10px;
}
}
.result-top3-list-name {
font-weight: bold;
line-height: 1em;
margin-bottom: 5px;
}
@media all and (max-width: 359px) {
.result-top3-list-name {
font-size: 16px;
}
}
@media all and (min-width: 360px) {
.result-top3-list-name {
font-size: 1.25em;
}
}
@media all and (max-width: 735px) {
.top3-list-letter-spacing-1 {
letter-spacing: -3px;
}
.top3-list-letter-spacing-2 {
letter-spacing: -2px;
}
.top3-list-letter-spacing-3 {
letter-spacing: -1px;
}
}
@media all and (min-width: 736px) {
.top3-list-letter-spacing-1 {
letter-spacing: -0.5px;
}
}
.result-top3-list-info {
line-height: 1em;
margin: 0;
}
.result-top3-class-link-wrapper {
width: 100%;
}
@media all and (max-width: 1279px) {
.result-top3-class-link-wrapper {
margin: 50px auto 0;
max-width: 400px;
}
}
@media all and (min-width: 1280px) {
.result-top3-class-link-wrapper {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 50px;
}
}
.result-top3-class-link-lead {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
width: 100%;
}
.result-top3-class-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow:
3px 3px 15px rgba(0, 0, 0, 0.1),
3px -3px 15px rgba(0, 0, 0, 0.1),
-3px 3px 15px rgba(0, 0, 0, 0.1),
-3px -3px 15px rgba(0, 0, 0, 0.1); text-decoration: none;
width: 100%;
}
@media all and (max-width: 359px) {
.result-top3-class-box {
height: 315px;
}
}
@media all and (min-width: 360px) and (max-width: 567px) {
.result-top3-class-box {
height: 320px;
}
}
@media all and (min-width: 568px) and (max-width: 1023px) {
.result-top3-class-box {
height: 335px;
}
}
@media all and (min-width: 1024px) {
.result-top3-class-box {
height: 340px;
}
}
@media all and (max-width: 1279px) {
.result-top3-class-box {
margin-bottom: 10px;
width: 100%;
}
}
@media all and (min-width: 1280px) {
.result-top3-class-box {
width: 270px;
}
}
.result-top3-class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
padding: 15px 20px;
position: relative;
width: 100%;
}
.result-top3-class-info ul li {
line-height: 1.8em;
}
.result-top3-class-name {
color: #fff;
border-bottom: 1px dashed #fff;
line-height: 1.8em;
margin-bottom: 1em;
}
@media all and (max-width: 359px) {
.result-top3-class-name {
font-size: 16px;
}
}
@media all and (min-width: 360px) {
.result-top3-class-name {
font-size: 17px;
}
}
@media all and (max-width: 359px) {
.top3-link-letter-spacing-1 {
letter-spacing: -2.8px;
}
.top3-link-letter-spacing-2 {
letter-spacing: -1.8px;
}
.top3-link-letter-spacing-3 {
letter-spacing: -1px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.top3-link-letter-spacing-1 {
letter-spacing: -1.8px;
}
.top3-link-letter-spacing-2 {
letter-spacing: -0.5px;
}
.top3-link-letter-spacing-3 {
letter-spacing: 0;
}
}
@media all and (min-width: 1280px) {
.top3-link-letter-spacing-1 {
letter-spacing: -3px;
}
.top3-link-letter-spacing-2 {
letter-spacing: -2px;
}
.top3-link-letter-spacing-3 {
letter-spacing: -1px;
}
}
.result-top3-class-btn {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 3px;
display: block;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
transition: all 0.3s 0s ease;
width: 100%;
}
.result-top3-class-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
.result-btn-txt {
align-items: center;
color: #fff;
display: flex;
justify-content: center;
padding: 5px 0;
transition: color 0.3s 0s ease;
}
.result-btn-txt:hover {
color: #ff8c00;
}
.result-link-icon {
display: inline-block;
height: 12px;
margin-left: 10px;
position: relative;
width: 12px;
}
.result-link-icon::before,
.result-link-icon::after {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 12px;
left: 0;
position: absolute;
top: 0;
transition: opacity 0.3s 0s ease;
width: 12px;
}
.result-link-icon::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
opacity: 1;
}
.result-top3-class-btn:hover .result-link-icon::before {
opacity: 0;
}
.result-link-icon::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png);
opacity: 0;
}
.result-top3-class-btn:hover .result-link-icon::after {
opacity: 1;
}
@media all and (max-width: 735px) {
.result-top3-class-next-action-wrapper {
margin-top: 50px;
padding-bottom: 10px;
}
}
@media all and (min-width: 736px) {
.result-top3-class-next-action-wrapper {
margin-top: 50px;
padding-bottom: 15px;
}
}
@media all and (min-width: 736px) {
.leading-field-top-btns {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
}
.leading-resimulate-btn-wrapper,
.leading-all-classes-btn-wrapper {
background-color: rgba(255, 255, 255, 0.8);
border: 3px solid #999;
border-radius: 10px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
height: 60px;
overflow: hidden;
transform: scale(1);
transition: transform 0.3s 0s ease;
width: 100%;
}
.leading-resimulate-btn-wrapper {
background-color: rgba(255, 255, 255, 0.8);
}
.leading-all-classes-btn-wrapper {
background-color: rgba(255, 140, 0, 0.4);
}
@media all and (max-width: 735px) {
.leading-all-classes-btn-wrapper {
margin-top: 20px;
}
}
@media all and (min-width: 736px) {
.leading-resimulate-btn-wrapper,
.leading-all-classes-btn-wrapper {
width: 48%;
}
}
.leading-resimulate-btn-wrapper:hover,
.leading-all-classes-btn-wrapper:hover {
transform: scale(1.02);
}
.leading-resimulate-btn,
.leading-all-classes-btn {
cursor: pointer;
display: block;
font-size: 1.35em;
font-weight: bold;
line-height: 60px;
height: 100%;
text-align: center;
user-select: none;
width: 100%;
}
.leading-all-classes-btn {
color: #333;
text-decoration: none;
}
.leading-all-classes-btn-wrapper:hover .leading-all-classes-btn {
color: #333;
}
#leading-field {
display: none;
margin-top: 50px;
}
.leading-conversation-start {
max-width: 520px;
margin: 100px auto;
width: 100%;
}
@media all and (min-width: 1280px) {
#leading-field-mendan {
padding-top: 0;
}
}
.leading-field-mendan-title::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_5.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
bottom: -12px;
content: "";
position: absolute;
z-index: 1;
}
@media all and (max-width: 359px) {
.leading-field-mendan-title {
padding-left: 68px;
width: 300px;
}
.leading-field-mendan-title::before {
height: 90px;
left: -10px;
width: 90px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.leading-field-mendan-title {
padding-left: 80px;
width: 355px;
}
.leading-field-mendan-title::before {
height: 100px;
left: 0px;
width: 80px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.leading-field-mendan-title {
padding-left: 100px;
width: 380px;
}
.leading-field-mendan-title::before {
height: 105px;
left: 0px;
width: 105px;
}
}
@media all and (min-width: 1280px) {
.leading-field-mendan-title {
padding-left: 140px;
width: 520px;
}
.leading-field-mendan-title::before {
height: 140px;
left: 0px;
width: 140px;
}
}
#loading-mask-wrapper {
background-color: rgba(255, 255, 255, 0.8);
bottom: 0;
display: none;
left: 0;
position: fixed;
top: 0;
right: 0;
z-index: 10000;
}
.loading-mask {
align-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
#loading-mark {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/icon-recommendations.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 80px;
margin: 0 auto;
width: 80px;
}
#loading-mark.animate {
animation: roadingAnimation 2s linear infinite 0s;
}
@keyframes roadingAnimation {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.loading-text {
display: block;
margin-top: 10px;
text-align: center;
width: 100%;
} @media all and (min-width: 736px) and (max-width: 1279px) {
.osusume-banner-box {
display: block;
margin: 0 auto;
width: 80%;
}
}
@media all and (min-width: 1280px) {
.osusume-banner-box {
cursor: pointer;
display: block;
margin: 0 auto;
transform: scale(1);
transition: transform 0.3s 0s ease;
width: 75%;
}
.osusume-banner-box:hover {
transform: scale(1.05);
}
} #carnelian-access-sort-func {
align-content: flex-start;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #fff;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 15px 0;
width: 80%;
}
@media all and (max-width: 735px) {
#carnelian-access-sort-func {
margin: 30px auto 0;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
#carnelian-access-sort-func {
margin: 40px auto 0;
}
}
@media all and (min-width: 1280px) {
#carnelian-access-sort-func {
margin: 60px auto 0;
}
}
.access-sort-func-title {
text-align: center;
width: 100%;
}
.access-sort-anchor {
align-items: center;
background-color: #fff;
border: 1px solid orange;
border-radius: 50%;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
text-align: center;
text-decoration: none;
}
@media all and (max-width: 359px) {
.access-sort-anchor {
height: 65px;
margin: 0 5px 10px;
width: 65px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.access-sort-anchor {
height: 63.75px;
margin: 0 10px 10px;
width: 63.75px;
}
}
@media all and (min-width: 736px) {
.access-sort-anchor {
height: 63.75px;
margin: 0 10px;
width: 63.75px;
}
}
@media all and (min-width: 1280px) {
.access-sort-anchor {
transition: all 0.3s 0s ease;
}
.access-sort-anchor:hover {
background-color: orange;
}
}
.access-sort-anchor span {
color: orange;
font-size: 15px;
font-weight: bold;
}
@media all and (min-width: 1280px) {
.access-sort-anchor span {
transition: all 0.3s 0s ease;
}
.access-sort-anchor:hover span {
color: #fff;
}
}
@media all and (max-width: 1279px) {
.studios-section {
margin-bottom: 80px;
}
}
@media all and (min-width: 1280px) {
.studios-section {
margin-bottom: 100px;
}
}
.carnelian-studios-link-field {
background-color: white;
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
display: block;
text-decoration: none;
}
@media all and (max-width: 735px) {
.carnelian-studios-link-field {
height: 180px;
margin: 0 auto 20px;
max-width: 350px;
width: 100%;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-studios-link-field {
height: 200px;
margin: 0 auto 20px;
width: 450px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-link-field {
height: 230px;
width: 450px;
}
}
@media all and (min-width: 735px) {
.carnelian-studios-info-wrapper {
padding: 0 20px;
}
}
.carnelian-studios-link {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px;
position: relative;
width: 100%;
}
.carnelian-studios-link-title {
color: #fff;
line-height: 1;
position: relative;
}
.carnelian-studios-link-title::after {
border-bottom: 1px dashed #fff;
bottom: -5px;
content: "";
left: 0;
height: 1px;
position: absolute;
width: 100%;
}
.carnelian-studios-access {
margin-top: 20px;
color: #fff;
line-height: 1.5em;
text-align: justify;
text-justify: inter-ideograph;
}
.carnelian-studios-link-btn {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #fff;
bottom: 15px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
color: #fff;
left: 15px;
line-height: 1;
margin-bottom: 0;
padding: 8px 0;
position: absolute;
text-align: center;
width: calc(100% - 30px);
}
@media all and (min-width: 1280px) {
.carnelian-studios-link-btn {
transition: all 0.3s 0s ease;
}
.carnelian-studios-link-field:hover .carnelian-studios-link-btn {
background-color: rgba(255, 255, 255, 0.9);
color: #ff8c00;
}
.carnelian-studios-link-field:hover .result-link-icon::before {
opacity: 0;
}
.carnelian-studios-link-field:hover .result-link-icon::after {
opacity: 1;
}
}
.carnelian-studios-link-credit {
font-size: 10px;
margin: 0;
position: absolute;
}
@media all and (max-width: 735px) {
.carnelian-studios-link-credit {
bottom: -15px;
right: 0;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-studios-link-credit {
bottom: -15px;
left: 0;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-link-credit {
bottom: -17px;
left: 0;
}
}
@media all and (max-width: 735px) {
.carnelian-studios-class-field {
margin: 40px auto 0;
max-width: 350px;
width: 100%;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-studios-class-field {
margin: 0 auto;
margin-top: 50px;
width: 450px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-field {
margin-top: 50px;
width: 100%;
}
}
.carnelian-studios-class-field-title {
line-height: 1;
margin-bottom: 20px;
position: relative;
}
.carnelian-studios-class-field-title::before {
background-color: #666;
bottom: -3px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.carnelian-studios-class-field-title::after {
background-color: #666;
bottom: -5px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
@media all and (max-width: 735px) {
.carnelian-studios-class-field-title {
text-align: center;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-studios-class-field-title {
font-size: 20px;
text-align: center;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-field-title {
font-size: 24px;
text-indent: 20px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-info {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
}
}
.carnelian-studios-class-info-box {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
@media all and (max-width: 1279px) {
.carnelian-studios-class-info-box {
margin: 0 auto 10px;
max-width: 450px;
width: 100%;
}
@media all and (max-width: 567px) {
.carnelian-studios-class-info-box {
height: 275px;
}
}
@media all and (min-width: 568px) and (max-width: 1023px) {
.carnelian-studios-class-info-box {
height: 285px;
}
}
@media all and (min-width: 1024px) {
.carnelian-studios-class-info-box {
height: 290px;
}
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-info-box {
height: 290px;
width: calc((100% - 20px) / 3);
}
.carnelian-studios-class-info .carnelian-studios-class-info-box-top:not(:last-child),
.carnelian-studios-class-info .carnelian-studios-class-info-box-each:not(:nth-child(3n)) {
margin-right: 10px;
}
.carnelian-studios-class-info .carnelian-studios-class-info-box-each {
margin-bottom: 10px;
}
}
.carnelian-studios-class-anchor-area {
background-color: rgba(0, 0, 0, 0.5);
display: block;
height: 100%;
padding: 20px 15px;
position: relative;
text-decoration: none;
width: 100%;
}
.carnelian-studios-class-name {
color: #fff;
line-height: 1;
margin-bottom: 20px;
position: relative;
}
.carnelian-studios-class-name::after {
border-bottom: 1px dashed #fff;
bottom: -10px;
content: "";
left: 0;
position: absolute;
width: 100%;
}
.carnelian-studios-class-details {
list-style: none;
margin-bottom: 1em;
}
.carnelian-studios-class-details li {
margin-left: 0;
}
.carnelian-access-bottom-link {
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin-top: 15px;
width: 100%;
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-access-bottom-link {
margin-top: 20px;
}
}
.carnelian-access-bottom-link-btn {
align-items: center;
background-color: #fff;
border: 2px solid orange;
border-radius: 10px;
color: orange;
display: flex;
justify-content: center;
height: 40px;
line-height: 1;
text-align: center;
text-decoration: none;
width: 100%;
}
@media all and (min-width: 1280px) {
.carnelian-access-bottom-link-btn {
transition: 0.3s 0s ease;
}
.carnelian-access-bottom-link-btn:hover {
background-color: #ff8c00;
color: #fff;
}
}
.carnelian-studios-link-icon {
display: inline-block;
height: 14px;
line-height: 1;
margin-left: 10px;
position: relative;
width: 14px;
}
.carnelian-studios-link-icon::before,
.carnelian-studios-link-icon::after {
background-position: relative;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 100%;
left: 0;
line-height: 1;
position: absolute;
top: 0;
width: 100%;
}
.carnelian-studios-link-icon::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png);
}
.carnelian-studios-link-icon::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
opacity: 0;
}
@media all and (min-width: 1280px) {
.carnelian-studios-link-icon::after {
transition: opacity 0.3s 0s ease;
}
.carnelian-access-bottom-link-btn:hover .carnelian-studios-link-icon::after {
opacity: 1;
}
}
@media all and (max-width: 1279px) {
.show-mobile {
display: inline-block;
}
.show-pc {
display: none;
}
}
@media all and (min-width: 1280px) {
.show-mobile {
display: none;
}
.show-pc {
display: inline-block;
}
}
@media all and (min-width: 1280px) {
.access-classname-letter-spacing-1 {
letter-spacing: -2px;
}
.access-classname-letter-spacing-2 {
letter-spacing: -1px;
}
}
#access-btm-mendan {
padding-top: 50px;
}
.access-btm-mendan-title::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/frontpage/headding-icon_5.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
bottom: -12px;
content: "";
position: absolute;
z-index: 1;
}
@media all and (max-width: 359px) {
.access-btm-mendan-title {
padding-left: 68px;
width: 300px;
}
.access-btm-mendan-title::before {
height: 90px;
left: -10px;
width: 90px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.access-btm-mendan-title {
padding-left: 80px;
width: 355px;
}
.access-btm-mendan-title::before {
height: 100px;
left: 0px;
width: 80px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.access-btm-mendan-title {
padding-left: 100px;
width: 380px;
}
.access-btm-mendan-title::before {
height: 105px;
left: 0px;
width: 105px;
}
}
@media all and (min-width: 1280px) {
.access-btm-mendan-title {
padding-left: 140px;
width: 520px;
}
.access-btm-mendan-title::before {
height: 140px;
left: 0px;
width: 140px;
}
} @media all and (max-width: 1279px) {
.show-mobile {
display: inline-block;
}
.show-pc {
display: none;
}
}
@media all and (min-width: 1280px) {
.show-mobile {
display: none;
}
.show-pc {
display: inline-block;
}
}
#carnelian-studio-details-sort-func {
align-content: flex-start;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #fff;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px auto;
}
@media all and (max-width: 359px) {
#carnelian-studio-details-sort-func {
padding: 15px 0;
width: 100%;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
#carnelian-studio-details-sort-func {
padding: 15px 0;
width: 305px;
}
}
@media all and (min-width: 736px) {
#carnelian-studio-details-sort-func {
width: 630px;
}
}
@media all and (max-width: 735px) {
.wrapper-padding-1 {
padding: 15px 0;
}
.wrapper-padding-2 {
padding: 15px;
}
}
@media all and (min-width: 736px) {
.wrapper-padding-1,
.wrapper-padding-2 {
padding: 15px 20px;
}
}
.studio-details-sort-func-title {
text-align: center;
width: 100%;
}
.date-sort-anchor {
align-items: center;
border-radius: 50%;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
height: 100%;
text-decoration: none;
}
@media all and (max-width: 735px) {
.date-sort-anchor {
height: 60px;
width: 60px;
}
.btn-margin-1 {
margin: 0 5px;
}
.btn-margin-2 {
margin: 0 5px 10px;
}
}
@media all and (min-width: 736px) {
.date-sort-anchor {
height: 63.75px;
width: 63.75px;
}
.btn-margin-1,
.btn-margin-2 {
margin: 0 10px;
}
}
@media all and (min-width: 1280px) {
.date-sort-anchor {
transition: all 0.3s 0s ease;
}
.color-weekday.date-sort-anchor:hover {
background-color: #ffa500;
}
.color-saturday.date-sort-anchor:hover {
background-color: blue;
}
.color-sunday.date-sort-anchor:hover {
background-color: #ff4500;
}
}
.date-sort-anchor span {
font-size: 20px;
font-weight: bold;
}
.color-weekday span {
color: #ffa500;
}
.color-saturday span {
color: blue;
}
.color-sunday span {
color: #ff4500;
}
@media all and (min-width: 1280px) {
.date-sort-anchor span {
transition: all 0.3s 0s ease;
}
.date-sort-anchor:hover span {
color: #fff;
}
}
.studio-details-date-exclusions {
margin: 10px auto 0;
padding: 0 10px;
width: 100%;
}
.date-exclusions-txt {
font-size: 0.8em;
margin: 0 auto;
max-width: 440px;
text-align: justify;
width: 100%;
}
@media all and (min-width: 736px) {
.carnelian-studio-details-class-info {
padding: 0 20px;
}
}
.carnelian-studios-class-field-title {
line-height: 1;
margin-bottom: 20px;
margin-top: 50px;
position: relative;
}
.carnelian-studios-class-field-title::before {
background-color: #666;
bottom: -3px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.carnelian-studios-class-field-title::after {
background-color: #666;
bottom: -5px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
@media all and (max-width: 735px) {
.carnelian-studios-class-field-title {
text-indent: 10px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.carnelian-studios-class-field-title {
font-size: 20px;
text-indent: 15px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-field-title {
font-size: 24px;
text-indent: 20px;
}
}
@media all and (min-width: 736px) {
.studio-details-class-list {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
}
}
.studio-details-class-wrapper {
background-position: top right;
background-repeat: no-repeat;
background-size: cover;
}
@media all and (max-width: 735px) {
.studio-details-class-wrapper {
width: 100%;
}
.studio-details-class-wrapper:nth-child(n + 2) {
margin-top: 10px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.studio-details-class-wrapper {
width: calc((100% - 15px) / 2);
}
.studio-details-class-wrapper:nth-child(odd) {
margin-right: 15px;
}
.studio-details-class-wrapper:nth-child(n + 3) {
margin-top: 15px;
}
}
@media all and (min-width: 1280px) {
.studio-details-class-wrapper {
width: calc((100% - 30px) / 3);
}
.studio-details-class-wrapper:not(:nth-of-type(3n)) {
margin-right: 15px;
}
.studio-details-class-wrapper:nth-child(n + 4) {
margin-top: 20px;
}
}
.studio-details-class-anchor-area {
background-color: rgba(0, 0, 0, 0.5);
display: block;
height: 100%;
padding: 20px 15px;
position: relative;
text-decoration: none;
width: 100%;
}
.carnelian-studios-class-name {
color: #fff;
line-height: 1;
margin-bottom: 20px;
position: relative;
}
.carnelian-studios-class-name::after {
border-bottom: 1px dashed #fff;
bottom: -10px;
content: "";
left: 0;
position: absolute;
width: 100%;
}
.carnelian-studios-class-details {
list-style: none;
margin-bottom: 1em;
}
.carnelian-studios-class-details li {
margin-left: 0;
}
.carnelian-studios-class-link {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid #fff;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
color: #fff;
margin-top: 20px;
padding: 5px 0;
text-align: center;
}
@media all and (min-width: 1280px) {
.carnelian-studios-class-link {
transition: 0.3s 0s ease;
}
.studio-details-class-anchor-area:hover .carnelian-studios-class-link {
background-color: rgba(255, 255, 255, 0.9);
color: #ff8c00;
}
.studio-details-class-anchor-area:hover .result-link-icon::before {
opacity: 0;
}
.studio-details-class-anchor-area:hover .result-link-icon::after {
opacity: 1;
}
}
.carnelian-studios-bottom-link-wrapper {
margin-top: 20px;
}
@media all and (max-width: 1279px) {
.carnelian-studios-bottom-link-wrapper {
margin-left: auto;
margin-right: auto;
max-width: 450px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-bottom-link-wrapper {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
}
.carnelian-studios-bottom-link {
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 100%;
}
@media all and (max-width: 1279px) {
.carnelian-studios-bottom-link {
margin-bottom: 10px;
}
}
@media all and (min-width: 1280px) {
.carnelian-studios-bottom-link {
width: calc((100% - 15px) / 2);
}
}
.carnelian-studios-bottom-link-btn {
align-items: center;
background-color: #fff;
border: 2px solid orange;
border-radius: 10px;
color: orange;
display: flex;
justify-content: center;
height: 40px;
line-height: 1;
text-align: center;
text-decoration: none;
width: 100%;
}
@media all and (min-width: 1280px) {
.carnelian-studios-bottom-link-btn {
transition: 0.3s 0s ease;
}
.carnelian-studios-bottom-link-btn:hover {
background-color: #ff8c00;
color: #fff;
}
}
.carnelian-btn-link-icon {
display: inline-block;
height: 14px;
line-height: 1;
margin-left: 10px;
position: relative;
width: 14px;
}
.carnelian-btn-link-icon::before,
.carnelian-btn-link-icon::after {
background-position: relative;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 100%;
left: 0;
line-height: 1;
position: absolute;
top: 0;
width: 100%;
}
.carnelian-btn-link-icon::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon-orange.png);
}
.carnelian-btn-link-icon::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/recommendation/link-icon.png);
opacity: 0;
}
@media all and (min-width: 1280px) {
.carnelian-btn-link-icon::after {
transition: opacity 0.3s 0s ease;
}
.carnelian-studios-bottom-link-btn:hover .carnelian-btn-link-icon::after {
opacity: 1;
}
}
@media all and (min-width: 1280px) {
.access-classname-letter-spacing-1 {
letter-spacing: -2px;
}
.access-classname-letter-spacing-2 {
letter-spacing: -1px;
}
} #mobile-menu-top,
#mobile-menu-questionnaire-options,
#mobile-menu-class-recommendations {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
height: 60px;
position: absolute;
top: -20px;
width: 60px;
}
#mobile-menu-top {
right: 10px;
}
#mobile-menu-questionnaire-options,
#mobile-menu-class-recommendations {
right: 80px;
}
#pc-questionnaire-options,
#pc-menu-class-recommendations {
display: none;
}
#mobile-menu-top::before,
#mobile-menu-questionnaire-options::before,
#mobile-menu-class-recommendations::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 26%;
top: 25%;
position: absolute;
width: 45%;
}
#mobile-menu-top::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-top.png);
}
#mobile-menu-questionnaire-options::before,
#pc-questionnaire-options::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-sort.png);
}
#mobile-menu-class-recommendations::before,
#pc-menu-class-recommendations::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-recommendations.png);
}
.mobile-menu-text {
color: #fff;
display: block;
font-size: 12px;
height: 100%;
padding-top: 65px;
position: relative;
text-align: center;
width: 100%;
}
#mobile-menu-top.activated {
animation: backtotop-activated 0.3s ease 0s forwards;
}
@keyframes backtotop-activated {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#mobile-menu-questionnaire-options.activated,
#pc-questionnaire-options.activated {
animation: questionnaireOptionsOpen 0.3s ease 0s forwards;
}
@keyframes questionnaireOptionsOpen {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
@media print, screen and (min-width: 1280px) {
#pc-questionnaire-options,
#pc-menu-class-recommendations {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
display: block;
height: 100px;
position: fixed;
top: 86%;
right: 50px;
width: 100px;
}
#pc-questionnaire-options::before,
#pc-menu-class-recommendations::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
height: 50%;
left: 25%;
top: 12%;
width: 50%;
}
#pc-menu-class-recommendations {
transition: all 0.3s 0s ease;
}
#pc-menu-class-recommendations:hover {
transform: scale(1.1);
}
.mobile-menu-text {
color: #333 !important;
font-size: 14px;
font-weight: bold;
padding-top: 70px;
text-shadow:
2px 2px #fff,
2px -2px #fff,
-2px 2px #fff,
-2px -2px #fff;
}
}
.revd-footer-wrapper {
bottom: 0;
display: none;
position: fixed;
width: 100%;
z-index: 2000;
}
.emphasize-color {
color: #ff4500;
}
.emphasize-size {
font-size: 1.2em;
}
.emphasize-size-2 {
font-size: 1.1em;
position: relative;
z-index: 200;
}
@media print, screen and (max-width: 1279px) {
.emphasize-size-2 {
line-height: 42px;
}
}
@media print, screen and (min-width: 1280px) {
.emphasize-size-2 {
line-height: 50px;
}
}
.mendan-footer-link,
.mendan-footer-link-2 {
background-color: #fff;
border: 1px solid #ff4500;
border-radius: 10px;
display: block;
font-weight: bold;
line-height: 1.5em;
padding-top: 5px;
text-align: center;
text-decoration: none;
}
.mendan-footer-link {
padding-left: 30px;
}
.mendan-cta-icon,
.mendan-cta-icon-ex1,
.mendan-cta-icon-overview {
position: relative;
}
.mendan-cta-icon::before,
.mendan-cta-icon-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/footer-interview-icon.png);
background-size: cover;
background-repeat: no-repeat;
bottom: 1px;
content: "";
height: 75px;
left: -4px;
position: absolute;
width: 80px;
}
.mendan-cta-icon::after,
.mendan-cta-icon-ex1::after,
.mendan-cta-icon-overview::after {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta.png);
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 22px;
right: 8px;
position: absolute;
top: calc(50% - 11px);
width: 22px;
}
.mendan-cta-icon::after,
.mendan-cta-icon-ex1::after {
transform: rotate(90deg);
}
.mendan-cta-icon-overview::after {
transform: rotate(180deg);
}
.movie-link {
border-radius: 10px;
height: 40px;
width: calc(50% - 8px);
}
.movie-link-btn {
align-items: center;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: flex;
font-weight: bold;
height: 100%;
justify-content: center;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
width: 100%;
}
.movie-link-btn:hover {
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.8);
}
.movie-link-btn-white {
background: #fff;
border: 2px solid #ff4500;
color: #ff4500 !important;
}
.movie-link-btn-orange {
background-color: #ff4500;
border: 2px solid #ff4500;
color: #fff !important;
}
.movie-cta-wrapper {
background: rgba(255, 255, 255, 0.6);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 3.5em auto 0;
max-width: 450px;
padding: 1.5em 1em 0;
width: 100%;
}
.movie-cta-btn-wrapper {
margin-bottom: 30px;
width: 100%;
}
.movie-cta-btn-box {
background: #fff;
border: 1px solid #ff4500;
border-radius: 10px;
height: 40px;
width: 100%;
}
.movie-cta-btn-fukidashi {
font-size: 0.9em;
margin-bottom: 5px;
position: relative;
text-align: center;
text-shadow:
2px 2px #fff,
2px -2px #fff,
-2px 2px #fff,
-2px -2px #fff;
z-index: 5;
}
@media all and (max-width: 374px) {
.movie-cta-btn-fukidashi-medium {
letter-spacing: -0.5px;
}
}
@media all and (max-width: 374px) {
.movie-cta-btn-fukidashi-large {
letter-spacing: -1.6px;
}
}
@media all and (min-width: 375px) and (max-width: 413px) {
.movie-cta-btn-fukidashi-large {
letter-spacing: -0.5px;
}
}
.movie-cta-btn {
align-items: center;
border-radius: 10px;
box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5);
color: #ff4500;
display: flex;
font-weight: bold;
height: 100%;
justify-content: center;
position: relative;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
width: 100%;
}
.movie-cta-btn:hover {
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.8);
}
.movie-cta-btn::after {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta.png) no-repeat
center/contain;
content: "";
height: 14px;
position: absolute;
right: 10px;
top: calc(50% - 7px);
transform: rotate(90deg);
width: 14px;
}
.movie-cta-btn-lady-image {
border-radius: 10px;
bottom: 0;
height: 90px;
left: 0;
overflow: hidden;
position: absolute;
width: 90px;
}
.movie-cta-btn-lady-image::before {
background: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/footer-interview-icon.png) no-repeat
center/contain;
bottom: -10px;
content: "";
height: 100%;
left: -15px;
position: absolute;
width: 100%;
}
.movie-cta-btn-text {
color: inherit;
position: relative;
z-index: 5;
}
.movie-cta-btn {
align-items: center;
background: #fff;
border: 1px solid #ff4500;
border-radius: 10px;
box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5);
color: #ff4500;
display: flex;
font-weight: bold;
height: 40px;
justify-content: center;
margin-bottom: 1em;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
}
.movie-cta-btn:hover {
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.8);
}
.movie-class-details {
margin-top: 3em;
}
.movie-bokking-form {
margin: 2em auto 0;
width: 100%;
}
@media all and (min-width: 736px) {
.movie-booking-form {
width: calc(100% - 40px);
}
}
@media print, screen and (max-width: 735px) {
.wo-footer-cta {
padding-bottom: 20px !important;
}
.revd-footer-wrapper {
height: 60px;
padding: 0 8px 8px;
}
.revd-fixed-menu-box,
.fixed-menu-box-preinterview,
.fixed-menu-box-consultation-lp {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #ff4500;
border-radius: 10px;
width: 100%;
}
.revd-fixed-menu-box {
display: flex;
}
.revd-fixed-menu-box::before {
background-color: #ff4500;
content: "";
left: calc(50% - 0.5px);
height: 100%;
position: absolute;
top: 0;
width: 1px;
}
.revd-fixed-menu {
cursor: pointer;
display: block;
height: 100%;
padding-top: 8px;
text-align: center;
text-decoration: none;
width: 50%;
}
.revd-fixed-menu-txt {
color: #4d4d4d;
font-weight: bold;
line-height: 1.2em;
}
.txt-emphasized {
color: #ff4500;
font-size: 0.9em;
}
.fixed-menu-preinterview {
cursor: pointer;
display: block;
height: 100%;
line-height: 1em;
padding: 8px 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.fixed-menu-txt-preinterview,
.fixed-menu-txt-consultation-lp {
color: #4d4d4d;
font-weight: bold;
line-height: 1.3em;
}
.fixed-menu-txt-consultation-lp {
display: block;
text-align: center;
}
.txt-emphasized-preinterview,
.txt-emphasized-consultation-lp {
color: #ff4500;
font-size: 0.9em;
}
#to-top {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #ff4500;
border-radius: 50%;
bottom: 110px;
display: none;
height: 50px;
padding: 8px 10px 10px;
position: fixed;
right: 10px;
width: 50px;
z-index: 2500;
}
.mendan-footer-link,
.mendan-footer-link-2 {
height: 52px;
margin: 0 auto;
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.wo-footer-cta {
padding-bottom: 20px !important;
}
.revd-footer-wrapper {
height: 60px;
padding: 0 8px 8px;
}
.revd-fixed-menu-box,
.fixed-menu-box-preinterview,
.fixed-menu-box-consultation-lp {
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ff4500;
border-radius: 10px;
height: 52px;
width: 420px;
}
.revd-fixed-menu-box {
display: flex;
}
.revd-fixed-menu-box::before {
background-color: #ff4500;
content: "";
left: calc(50% - 1px);
height: 100%;
position: absolute;
top: 0;
width: 2px;
}
.revd-fixed-menu {
cursor: pointer;
display: block;
height: 100%;
padding-top: 10px;
text-align: center;
text-decoration: none;
width: 50%;
}
.revd-fixed-menu-txt {
color: #4d4d4d;
font-size: 18px;
font-weight: bold;
line-height: 1.4em;
}
.txt-emphasized {
color: #ff4500;
}
.fixed-menu-preinterview {
cursor: pointer;
display: block;
height: 100%;
line-height: 1em;
padding-top: 4px;
text-align: center;
text-decoration: none;
width: 100%;
}
.fixed-menu-txt-preinterview,
.fixed-menu-txt-consultation-lp {
color: #4d4d4d;
font-size: 16px;
font-weight: bold;
line-height: 1.3em;
}
.fixed-menu-txt-consultation-lp {
display: block;
text-align: center;
}
.txt-emphasized-preinterview,
.txt-emphasized-consultation-lp {
color: #ff4500;
font-size: 0.9em;
}
.next-icon-pos-consultation-lp {
position: absolute;
right: 10px;
}
#to-top {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #ff4500;
border-radius: 50%;
bottom: 8px;
cursor: pointer;
display: none;
height: 60px;
padding: 12px;
position: fixed;
right: 10px;
width: 60px;
z-index: 2500;
}
.mendan-footer-link,
.mendan-footer-link-2 {
height: 52px;
width: 420px;
}
}
@media print, screen and (min-width: 1280px) {
#to-top {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid #ff4500;
border-radius: 50%;
bottom: 90px;
cursor: pointer;
display: none;
height: 60px;
padding: 12px;
position: fixed;
transition: box-shadow 0.3s 0s ease;
right: 22px;
width: 60px;
z-index: 2500;
}
#to-top:hover {
box-shadow:
1px 1px 5px rgba(255, 69, 0, 0.5),
1px -1px 5px rgba(255, 69, 0, 0.5),
-1px 1px 5px rgba(255, 69, 0, 0.5),
-1px -1px 5px rgba(255, 69, 0, 0.5);
}
#to-top:hover .icon-arrow {
animation: 0.3s ease 0s arrowAnimation;
}
.icon-arrow {
bottom: calc(50% - 17px);
left: calc(50% - 17px);
height: 34px;
position: absolute;
width: 34px;
}
@keyframes arrowAnimation {
0% {
height: 34px;
}
60% {
height: 14px;
}
80% {
height: 40px;
}
90% {
height: 30px;
}
100% {
height: 34px;
}
}
.revd-footer-wrapper {
height: 68px;
padding: 0 100px 8px;
}
.mendan-footer-link,
.mendan-footer-link-2 {
height: 60px;
margin-left: auto;
transition: box-shadow 0.3s 0s ease;
width: 420px;
}
.mendan-footer-link:hover,
.mendan-footer-link-2:hover {
box-shadow:
1px 1px 5px rgba(255, 69, 0, 0.5),
1px -1px 5px rgba(255, 69, 0, 0.5),
-1px 1px 5px rgba(255, 69, 0, 0.5),
-1px -1px 5px rgba(255, 69, 0, 0.5);
}
.mendan-cta-icon::before {
height: 95px;
width: 100px;
}
.fixed-menu-box-preinterview,
.fixed-menu-box-consultation-lp {
display: none;
}
}
.revd-footer-wrapper-type2 {
display: none;
}
.revd-footer-wrapper-type2-btn-field {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #fff;
border-radius: 4px;
bottom: 5px;
display: flex; justify-content: center;
flex-wrap: wrap;
position: fixed;
z-index: 2000;
}
@media all and (max-width: 735px) {
.revd-footer-wrapper-type2-btn-field {
left: 5px;
padding: 10px 8px;
width: calc(100% - 10px);
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.revd-footer-wrapper-type2-btn-field {
left: calc(50% - 250px);
padding: 10px 58px;
width: 500px;
}
}
@media all and (min-width: 1280px) {
.revd-footer-wrapper-type2-btn-field {
right: 22px;
padding: 10px 12px;
width: 400px;
}
}
.fixed-footer-cta-field-txt {
color: #ff4500;
font-weight: bold;
line-height: 1;
margin-bottom: 3px;
text-align: center;
width: 100%;
}
@media all and (max-width: 359px) {
.fixed-footer-cta-field-txt {
font-size: 13px;
letter-spacing: -1px;
}
}
.fixed-footer-cta-field-txt span {
font-weight: normal;
}
.fixed-footer-cta-btn-box {
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 40px;
overflow: hidden;
}
@media all and (max-width: 735px) {
.fixed-footer-cta-btn-box {
width: calc(50% - 8px);
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.fixed-footer-cta-btn-box {
width: 180px;
}
}
@media all and (min-width: 1280px) {
.fixed-footer-cta-btn-box {
transition: box-shadow 0.3s 0s ease;
width: 180px;
}
.fixed-footer-cta-btn-box:hover {
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.8);
}
}
.fixed-footer-cta-btn {
align-items: center;
border-radius: 10px;
display: flex;
font-weight: bold;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
}
.btn-type-white {
background-color: #fff;
border: 2px solid #ff4500;
color: #ff4500;
}
@media all and (max-width: 359px) {
.btn-type-white {
letter-spacing: -1px;
}
}
@media all and (min-width: 1280px) {
.btn-type-white {
transition: color 0.3s 0s ease;
}
.btn-type-white:hover {
color: #ff4500;
}
}
.btn-type-orange {
background-color: #ff4500;
border: 2px solid #ff4500;
color: #fff;
}
@media all and (min-width: 1280px) {
.btn-type-orange {
transition: color 0.3s 0s ease;
}
.btn-type-orange:hover {
color: #fff;
}
}
.fixed-menu-consultation-lp {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 5px 0;
position: relative;
text-decoration: none;
width: 100%;
}
.next-icon-pos-consultation-lp {
position: absolute;
right: 10px;
} .campaign-link-wrapper {
align-items: flex-start;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 6px;
display: flex;
}
@media all and (max-width: 735px) {
.campaign-link-wrapper {
flex-direction: column;
padding: 20px 10px 25px;
}
@media all and (max-width: 359px) {
#front-page .campaign-link-wrapper {
margin: 10px 0 80px;
}
}
@media all and (min-width: 360px) {
#front-page .campaign-link-wrapper {
margin: 10px auto 100px;
width: calc(100% - 20px);
}
}
}
@media all and (min-width: 736px) {
.campaign-link-wrapper {
justify-content: space-around;
margin: 0 auto;
max-width: 780px;
padding: 25px 10px 30px;
}
@media all and (max-width: 1024px) {
#front-page .campaign-link-wrapper {
margin: 20px auto 100px;
width: 360px;
}
}
@media all and (min-width: 1025px) {
#front-page .campaign-link-wrapper {
margin: 20px auto 200px;
width: 360px;
}
}
}
.campaign-link-box {
align-items: flex-end;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media all and (max-width: 735px) {
.campaign-link-box {
margin: 0 auto;
max-width: 315px;
}
}
@media all and (min-width: 736px) {
.campaign-link-box {
width: 300px;
}
}
.campaign-link-txt-area {
line-height: 1;
}
.campaign-link-subtxt { font-size: 18px !important;
line-height: 32px;
margin-bottom: 5px;
}
@media all and (min-width: 736px) {
.campaign-link-subtxt {
font-size: 22px !important;
}
}
.campaign-link-maintxt {
font-weight: bold;
margin-bottom: 0;
}
@media all and (min-width: 360px) {
.campaign-link-maintxt {
font-size: 15px !important;
}
}
.campaign-link-maintxt span {
color: #ff4500;
}
@media all and (max-width: 359px) {
.campaign-link-maintxt span {
font-size: 18px !important;
}
}
@media all and (min-width: 360px) {
.campaign-link-maintxt span {
font-size: 19px !important;
}
}
.campaign-link-icon {
align-items: center;
background-color: #ff4500;
border-radius: 3px;
display: flex;
justify-content: center;
padding: 0 5px;
}
@media all and (max-width: 359px) {
.campaign-link-icon {
height: 45px;
width: 68px;
}
}
@media all and (min-width: 360px) {
.campaign-link-icon {
height: 45px;
width: 82px;
}
}
.campaign-link-icon-txt {
color: #fff;
font-weight: bold;
line-height: 1.4em;
margin-bottom: 0;
text-align: center;
}
@media all and (max-width: 359px) {
.campaign-link-icon-txt {
font-size: 12px !important;
}
}
@media all and (min-width: 360px) {
.campaign-link-icon-txt {
font-size: 13px !important;
}
}
.btn-arrow-icon {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 14px;
position: absolute;
right: 5px;
top: calc(50% - 7px);
transform: rotate(90deg);
width: 14px;
}
@media all and (max-width: 735px) {
.box-border {
background-color: #ccc;
height: 1px;
margin: 25px auto;
width: calc(100% - 10px);
}
}
@media all and (min-width: 736px) {
.box-border {
background-color: #ccc;
height: 100px;
width: 1px;
}
}
.campaign-link-btn {
background-color: #fff;
border: 2px solid #ff4500;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(153, 41, 0, 0.6);
margin-top: 10px;
overflow: hidden;
width: 100%;
}
@media all and (min-width: 1280px) {
.campaign-link-btn {
transition: box-shadow 0.3s 0s ease;
}
.campaign-link-btn:hover {
box-shadow:
1px 1px 4px rgba(255, 69, 0, 0.8),
1px -1px 4px rgba(255, 69, 0, 0.8),
-1px 1px 4px rgba(255, 69, 0, 0.8),
-1px -1px 4px rgba(255, 69, 0, 0.8);
}
}
.campaign-btn-txt {
color: #ff4500;
display: block;
font-size: 18px !important;
height: 100%;
line-height: 1;
padding: 12px 0 10px;
position: relative;
text-align: center;
text-decoration: none;
}
.subtxt-long {
letter-spacing: -2px;
}
.campaign-banner {
margin: 30px auto 20px;
}
.single-campaign-banner {
margin: 50px auto 20px;
}
.campaign-banner,
.single-campaign-banner {
font-size: 0;
max-width: 360px;
width: calc(100% - 30px);
}
@media all and (min-width: 1280px) {
.campaign-banner,
.single-campaign-banner {
transition: box-shadow 0.3s 0s ease;
}
.campaign-banner:hover,
.single-campaign-banner:hover {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
}
.campaign-banner a,
.single-campaign-banner a {
font-size: 0 !important;
display: block;
max-height: 240px;
width: 100%;
}
.campaign-cta {
margin: 0 auto;
max-width: 372px;
width: 100%;
}
.campaign-text {
margin: 1em;
text-align: justify;
}
.contact-campaign {
margin-bottom: 3em;
}
@media all and (max-width: 374px) {
.blog-list-wrapper {
padding: 0 4px;
}
}
@media all and (min-width: 375px) and (max-width: 413px) {
.blog-list-wrapper {
padding: 0 5px;
}
}
@media all and (min-width: 414px) and (max-width: 735px) {
.blog-list-wrapper {
padding: 0 10px;
}
}
@media all and (min-width: 736px) {
.blog-list-wrapper {
display: flex;
flex-wrap: wrap;
padding: 0 20px;
}
}
.blog-info-box {
margin-bottom: 20px;
position: relative;
}
@media all and (max-width: 735px) {
.blog-info-box {
width: 100%;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.blog-info-box {
width: calc((100% - 20px) / 3);
}
}
@media all and (min-width: 1280px) {
.blog-info-box {
width: calc((100% - 30px) / 3);
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.blog-list-wrapper .blog-info-box:not(:nth-child(3n)) {
margin-right: 10px;
}
}
@media all and (min-width: 1280px) {
.blog-list-wrapper .blog-info-box:not(:nth-child(3n)) {
margin-right: 15px;
}
}
.eyecatch-thumbnail {
overflow: hidden;
width: 100%;
}
.eyecatch-no-image {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
width: 100%;
}
@media all and (max-width: 735px) {
.eyecatch-thumbnail,
.eyecatch-no-image {
height: 180px;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.eyecatch-thumbnail,
.eyecatch-no-image {
height: 160px;
}
}
@media all and (min-width: 1280px) {
.eyecatch-thumbnail,
.eyecatch-no-image {
height: 180px;
}
}
.img-thumbnail {
height: 100%;
object-fit: cover;
width: 100%;
}
.eyecatch-no-image-text {
color: #fff;
font-weight: bold;
user-select: none;
}
.more-blogs-btn {
border: 1px solid #fff;
cursor: pointer;
line-height: 1;
margin: 0 auto;
text-align: center;
transition: background-color 0.3s 0s ease;
display: block;
color: black;
}
@media all and (max-width: 374px) {
.more-blogs-btn {
background-color: rgba(255, 255, 255, 0.6);
padding: 12px 0;
width: calc(100% - 8px);
}
}
@media all and (min-width: 375px) and (max-width: 413px) {
.more-blogs-btn {
background-color: rgba(255, 255, 255, 0.6);
padding: 12px 0;
width: calc(100% - 10px);
}
}
@media all and (min-width: 414px) and (max-width: 735px) {
.more-blogs-btn {
background-color: rgba(255, 255, 255, 0.6);
padding: 12px 0;
width: calc(100% - 20px);
}
}
@media all and (min-width: 736px) {
.more-blogs-btn {
background-color: rgba(255, 255, 255, 0.3);
padding: 8px 0;
width: calc(100% - 40px);
}
}
.more-blogs-btn:hover {
background-color: rgba(255, 255, 255, 0.8);
} @media print, screen and (max-width: 735px) {
.blog-bottom-cta {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 5px;
margin-top: 50px;
padding: 15px;
width: 100%;
}
.blog-bottom-cta p,
.blog-bottom-cta li {
font-size: 16px;
}
.bottom-cta-content-wrapper {
width: 100%;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.blog-bottom-cta {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 5px;
margin: 60px auto 0;
max-width: 680px;
padding: 30px 90px;
width: 100%;
}
.bottom-cta-content-wrapper {
padding: 0 15px;
}
}
@media print, screen and (min-width: 1280px) {
.blog-bottom-cta {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 5px;
margin: 80px auto 0;
max-width: 720px;
padding: 30px 90px;
width: 100%;
}
.bottom-cta-content-wrapper {
padding: 0 20px;
}
}
.cmnpg-h2-style {
border-bottom: 1px solid #999;
margin-bottom: 1em;
position: relative;
text-align: center;
}
@media print, screen and (max-width: 735px) {
.cmnpg-h2-style {
font-size: 18px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1279px) {
.cmnpg-h2-style {
font-size: 1.2em;
}
}
@media print, screen and (min-width: 1280px) {
.cmnpg-h2-style {
font-size: 1.2em;
}
}
.cmnpg-h2-style::before {
background-color: #ff4500;
bottom: -2px;
content: "";
height: 3px;
left: 0;
position: absolute;
width: 15px;
}
.txt-emphasize {
color: #6933ff;
font-weight: bold;
}
.footer-cta-btn {
align-content: center;
background-color: #fff;
border: 1px solid #ff4500;
border-radius: 10px;
box-shadow:
1px 1px 5px rgba(255, 69, 0, 0),
1px -1px 5px rgba(255, 69, 0, 0),
-1px 1px 5px rgba(255, 69, 0, 0),
-1px -1px 5px rgba(255, 69, 0, 0);
display: flex;
flex-wrap: wrap;
font-weight: bold;
height: 56px;
line-height: 1.4em;
margin: 5px auto 40px;
position: relative;
text-align: center;
text-decoration: none;
transition: box-shadow 0.3s 0s ease;
width: 100%;
}
.footer-cta-btn:hover {
box-shadow:
1px 1px 5px rgba(255, 69, 0, 0.5),
1px -1px 5px rgba(255, 69, 0, 0.5),
-1px 1px 5px rgba(255, 69, 0, 0.5),
-1px -1px 5px rgba(255, 69, 0, 0.5);
}
.footer-cta-btn-subtitle {
color: #ff4500;
position: relative;
width: 100%;
z-index: 100;
}
.footer-cta-btn-title {
font-size: 1.1em;
position: relative;
width: 100%;
z-index: 100;
}
.image-icon {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon-btn-cta.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 14px;
position: absolute;
right: 5px;
top: calc(50% - 7px);
transform: rotate(90deg);
width: 14px;
}
.with-pic {
margin-top: 20px;
}
@media all and (min-width: 360px) and (max-width: 735px) {
.with-pic {
padding-left: 15px;
}
}
@media all and (min-width: 736px) {
.with-pic {
padding-left: 50px;
}
}
.with-pic .footer-cta-btn-title,
.with-pic .footer-cta-btn-subtitle {
text-shadow:
1px 1px #fff,
1px -1px #fff,
-1px 1px #fff,
-1px -1px #fff;
}
.image-mendan {
border-radius: 10px;
bottom: 0;
height: 90px;
left: 0;
overflow: hidden;
position: absolute;
width: 90px;
z-index: 50;
}
@media all and (max-width: 735px) {
.image-mendan {
left: 0;
}
}
@media all and (min-width: 736px) {
.image-mendan {
left: 60px;
}
}
.image-mendan::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/footer-interview-icon.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: "";
height: 100%;
position: absolute;
width: 90%;
}
@media all and (max-width: 735px) {
.image-mendan::before {
left: -10px;
}
}
@media all and (min-width: 736px) {
.image-mendan::before {
left: 0;
}
} #difficulty-sorted-class-lineup .header-box {
align-items: center;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/lineup-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.h1-sorted-class {
align-items: center;
background-color: rgba(255, 69, 0, 0.4);
display: flex;
justify-content: center;
text-align: center;
text-shadow: 1px 1px 5px #000;
transform: rotate(-3deg) skew(-3deg);
width: 110%;
}
@media all and (max-width: 359px) {
.h1-sorted-class {
font-size: 22px;
height: 100px;
letter-spacing: -0.5px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.h1-sorted-class {
font-size: 25px;
height: 120px;
letter-spacing: -1px;
}
}
@media all and (min-width: 736px) {
.h1-sorted-class {
font-size: 48px;
height: 250px;
}
}
.h1-sorted-class span {
color: #fff;
}
.sorted-class-lead-txt {
line-height: 1.5em;
text-align: justify;
}
@media all and (min-width: 736px) {
.sorted-class-lead-txt {
margin: 30px auto;
width: 630px;
}
}
.sorted-class-lead-notes {
font-size: 12px;
margin: 1em 0 0;
}
@media all and (max-width: 735px) {
.sorted-class-lead-notes {
padding: 0 15px;
text-align: justify;
}
}
@media all and (min-width: 736px) {
.sorted-class-lead-notes {
text-align: center;
}
}
@media all and (max-width: 735px) {
#sorted-class-btm-mendan {
margin-top: 100px;
}
}
@media all and (min-width: 736px) {
#sorted-class-btm-mendan {
margin-top: 150px;
}
} #campaign p,
#campaign a,
#campaign li {
line-height: 1.6em;
}
#campaign .header-box {
align-items: center;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/price-top.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.h1-campaign {
align-items: center;
background-color: rgba(255, 69, 0, 0.4);
color: #fff;
display: flex;
justify-content: center;
line-height: 1.4em;
text-align: center;
text-shadow: 1px 1px 5px #000;
transform: rotate(-3deg) skew(-3deg);
width: 110%;
}
@media all and (max-width: 359px) {
.h1-campaign {
font-size: 22px;
height: 100px;
letter-spacing: -0.5px;
}
}
@media all and (min-width: 360px) and (max-width: 735px) {
.h1-campaign {
font-size: 25px;
height: 120px;
letter-spacing: -1px;
}
}
@media all and (min-width: 736px) {
.h1-campaign {
font-size: 48px;
height: 250px;
}
}
.campaign-caution-box {
background-color: #fff;
border: 2px solid red;
padding: 1em 1.2em;
}
.campaign-notes {
font-size: 12px;
}
@media all and (max-width: 735px) {
.section-qa {
margin: 80px 0 0;
}
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.section-qa {
margin: 100px 0 80px;
}
}
@media all and (min-width: 1280px) {
.section-qa {
margin: 120px 0 100px;
}
}
.footer-links {
display: flex;
justify-content: space-between;
margin: 30px auto 50px;
width: 290px;
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.footer-links {
width: 380px;
}
}
@media all and (min-width: 1280px) {
.footer-links {
width: 400px;
}
}
.footer-links__left-col,
.footer-links__right-col {
width: calc(50% - 15px);
}
@media all and (min-width: 736px) and (max-width: 1279px) {
.footer-links__left-col,
.footer-links__right-col {
width: calc(50% - 30px);
}
}
@media all and (min-width: 1280px) {
.footer-links__left-col,
.footer-links__right-col {
width: calc(50% - 50px);
}
}
.footer-links__right-col .footer-links__item-wrapper:not(:first-of-type) {
margin-top: 3em;
}
@media all and (min-width: 736px) {
.footer-links__right-col .footer-links__item-wrapper:not(:first-of-type) {
margin-top: 2em;
}
}
.footer-links__item--title {
font-weight: bold;
letter-spacing: -1px;
}
.footer-links__item--list {
display: flex;
flex-direction: column;
list-style: none;
}
.footer-links__item--list li {
margin-left: 0;
}
.footer-links__item--list_text {
color: #6b6b6b;
font-size: 12px;
line-height: 2;
text-decoration: none;
}
@media all and (min-width: 736px) {
.footer-links__item--list_text {
font-size: 15px;
display: inline-block;
margin: 5px 0;
}
}
.ls-mod {
letter-spacing: -2px;
}
.footer-copyright {
text-align: center;
} @media print, screen and (max-width: 374px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
.fp-h2-hyphen {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
line-height: 100px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 50px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
bottom: 10px;
margin: 0 auto;
padding: 15px 15px 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-class-overview h1 {
color: #fff;
font-size: 20px;
}
.h1-class-overview p {
color: #fff;
font-weight: bold;
}
.h1-class-info {
background: rgba(0, 0, 0, 0.4);
bottom: 10px;
color: #fff;
margin: 0 auto;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-instructors {
color: #fff;
margin: 0;
position: relative;
padding-left: 15px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 240px;
z-index: 50;
}
.h1-studios {
color: #fff;
}
.header-area-archives h1 {
border-left: 1px solid #999;
padding: 0 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
padding: 0 0 0 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
margin: 0 -5px;
padding: 10px 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 50px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
color: #fff;
bottom: 0;
padding: 5px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
line-height: 1.3em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 20px;
}
.h2-front-pg {
font-size: 16px;
padding: 0 15px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 20px;
font-style: oblique;
line-height: 1;
}
.front-pg-1st-section h2 {
margin-bottom: 0;
}
.front-pg-3rd-section h2 {
margin-bottom: 0;
padding: 0;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: relative;
top: calc(180px / 2 - 45px);
transform: rotate(-3deg) skew(-3deg);
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 15px 0;
}
.h2-content-pg {
border-left: 1px solid #999;
margin-bottom: 10px;
padding: 0 0 0 10px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-events {
border-bottom: 1px dashed #333;
order: 2;
margin-top: 10px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
margin-top: 5px;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
h3 {
font-size: 18px;
}
.h3-front-pg {
font-size: 15px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
}
.h3-contactform:not(:first-child) {
margin-top: 15px;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
}
.subtitle-instructors {
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 0;
padding-left: 15px;
position: relative;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 200px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
}
.sub-title {
font-size: 20px;
font-weight: bold;
}
button {
font-size: 14px;
}
.notes-font-size {
font-size: 12px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 440px;
left: 0;
opacity: 0;
padding: 0 10px;
position: absolute;
top: 20px;
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1 {
height: 40px;
overflow: hidden;
width: 100%;
}
.mobile-nav-item-style-2,
.mobile-nav-item-style-3,
.mobile-nav-item-style-4 {
height: 40px;
overflow: hidden;
width: calc(50% - 2.5px);
}
.mobile-nav-margin-1,
.mobile-nav-margin-2 {
margin-bottom: 5px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-size: 13px;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
1px 1px 3px #fff,
1px -1px 3px #fff,
-1px 1px 3px #fff,
-1px -1px 3px #fff;
}
.mobile-nav-btn-style-1 {
line-height: 40px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 7px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 100%;
left: calc(50% - 17px);
position: absolute;
top: 3px;
width: 34px;
}
.mobile-nav-contact {
font-size: 12px;
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 10px;
font-weight: bold;
letter-spacing: -0.5px;
}
.notes-margin {
margin-top: 8px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 0.9em;
height: 55px;
margin: 2px auto 0;
padding-top: 30px;
position: relative;
text-align: center;
transform: scale(1);
width: 55px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 2px;
left: calc(50% - 12.5px);
position: absolute;
top: 16px;
width: 24px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-text {
color: #fff;
display: block;
font-size: 12px;
height: 100%;
padding-top: 75px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 90px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 70px;
left: 10px;
position: absolute;
top: -25px;
width: 70px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 26%;
top: 25%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 120px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 70px;
}
.two-btns {
width: 138px;
}
.three-btns {
width: 206px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 60px;
left: 0;
margin-right: 8px;
opacity: 0;
position: relative;
top: 20px;
width: 60px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-size: 11px;
height: 100%;
line-height: 1.3em;
margin-left: -5px;
padding-top: 65px;
position: relative;
text-align: center;
text-decoration: none;
width: 70px;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-size: 11px;
height: 100%;
line-height: 1.3em;
margin-left: -20px;
padding-top: 65px;
position: relative;
text-align: center;
text-decoration: none;
width: 100px;
}
.front-pg-header-box {
padding: 0;
position: relative;
}
.with-info-box {
height: 1000px;
}
.without-info-box {
height: 570px;
}
.front-pg-header-logo {
margin: 10px 0 0 10px;
width: 120px;
}
.front-pg-h1-style {
position: absolute;
font-size: 17px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.5em;
margin: 325px auto 0;
text-align: center;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
width: 100%;
}
.front-pg-image-box {
background: rgba(255, 255, 255, 1);
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 280px;
left: -90px;
overflow: hidden;
position: absolute;
top: 40px;
transform: rotate(-10deg);
width: 550px;
}
.front-pg-header-image {
left: -30px;
position: relative;
top: -60px;
transform: rotate(10deg);
width: 600px;
}
#top-info-box {
left: 2.5%;
position: absolute;
top: 540px;
width: 95%;
}
.top-info-title {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
font-size: 11.5px;
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 300px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 150px;
margin: 0 auto 5px;
width: 250px;
}
.top-info-description {
padding: 5px 10px 0;
}
.top-info-contents-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 40px;
}
.top-info-contents-value-1 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 55px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.3);
height: auto;
margin-bottom: 50px;
padding: 30px 0 10px;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 70px solid rgba(255, 255, 255, 0.3);
border-left: 100vw solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -70px;
width: 100%;
}
.front-pg-1st-section::after {
bottom: -70px;
border-top: 70px solid rgba(255, 255, 255, 0.3);
border-right: 100vw solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 315px;
left: -5px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 20px;
top: 160px;
transform: rotate(-15deg);
width: 80px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 65px;
top: 145px;
transform: rotate(8deg);
width: 100px;
}
.complain-text-style-1 {
font-size: 10px;
left: 5.5%;
letter-spacing: -1px;
top: 28%;
width: 80px;
}
.complain-text-style-2 {
font-size: 10px;
left: 31%;
line-height: 1.3em;
top: 13%;
width: 60px;
}
.complain-text-style-3 {
font-size: 10px;
left: 19%;
letter-spacing: -1.5px;
top: 41%;
width: 80px;
}
.complain-text-style-4 {
font-size: 12px;
left: 8.5%;
top: 70%;
width: 100px;
}
.complain-text-style-5 {
font-size: 12px;
left: 49%;
top: 24%;
width: 140px;
}
.complain-text-style-6 {
font-size: 15px;
font-weight: bold;
margin: 0 0 35px;
text-align: center;
}
.complain-text-style-7 {
font-size: 15px;
font-weight: bold;
margin: 35px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-complain-text p:not(:first-child) {
padding: 0 20px;
}
.front-pg-2nd-section {
margin-bottom: 60px;
padding-top: 10px;
}
.explanatory-text-style {
margin: 15px auto 50px;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-reasons-box {
padding: 0 20px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 50px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
height: 200px;
overflow: hidden;
position: relative;
width: 100%;
}
.image-modification-1 {
position: relative;
top: -30px;
}
.image-modification-2 {
position: relative;
right: 56px;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -25px;
}
.image-modification-4 {
position: relative;
top: -15px;
right: 30px;
width: 400px;
}
.image-modification-5 {
position: relative;
height: 100%;
width: auto;
}
.front-pg-h3-box p {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 20px;
font-style: oblique;
}
.front-pg-reasons-text {
margin-top: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 120px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -70px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 70px solid rgba(24, 24, 24, 0.4);
border-left: 100vw solid transparent;
z-index: 100;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -70px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 70px solid rgba(24, 24, 24, 0.4);
border-right: 100vw solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 50px 20px 50px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 30px;
}
.front-pg-message-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-message-text p {
color: #fff;
}
.front-pg-4th-section {
margin-bottom: 50px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-cta-text {
padding: 0 20px 20px;
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-cta,
.cta-404pg {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px;
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 128px;
margin-bottom: 10px;
overflow: hidden;
width: calc(50% - 5px);
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 64px;
}
.cta-caption-1 {
font-size: 12px;
margin: 15px auto;
text-align: center;
line-height: 1.4em;
width: 110px;
}
.cta-caption-2 {
font-size: 12px;
margin: 5px auto 0;
text-align: center;
line-height: 1.4em;
width: 110px;
}
.cta-caption-3 {
font-size: 12px;
margin: 5px auto 0;
text-align: center;
line-height: 1.4em;
width: 110px;
}
.main-content-page {
margin-bottom: 0;
margin-left: 0;
padding: 0;
width: 100%;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
background-repeat: no-repeat;
background-size: cover;
height: 220px;
width: 100%;
}
.header-area-common {
margin-top: 60px;
padding: 20px 10px 0;
}
.header-box {
height: 200px;
margin-top: 60px;
overflow: hidden;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-class-info {
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-instructors {
background-color: rgba(0, 0, 0, 0.1);
background-position: -210px 0;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
margin-top: 60px;
padding-top: 70px;
position: relative;
overflow: hidden;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 150px;
}
.header-box-instructors::after {
border-left: 50px solid rgba(0, 0, 0, 0.4);
border-bottom: 200px solid transparent;
content: "";
position: absolute;
top: 0;
left: 150px;
height: 0;
width: 0;
}
.header-box-studios {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
bottom: 10px;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.header-area-archives {
margin-top: 80px;
padding: 10px 10px 0;
}
.main-area {
padding: 30px 10px 0;
}
.content-box {
padding: 0 4px;
}
.class-lineup-box {
margin-bottom: 20px;
}
.class-image {
background-repeat: no-repeat;
background-size: cover;
height: 180px;
}
.class-description {
padding: 15px;
}
.class-lineup-link-text {
line-height: 30px;
text-align: center;
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
margin-bottom: 35px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
}
.class-instructor-introduction {
margin-top: 10px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
padding-bottom: 2px;
text-align: center;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 10px;
width: 100%;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 10px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
text-align: center;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 10px;
text-align: center;
width: calc(100% - 20px);
}
.contact-area {
padding: 0 10px;
}
.notes-to-join {
margin-top: 10px;
padding-left: 10px;
}
.trial-booking-form {
margin-top: 5px;
}
.iframe-movie-box {
width: 100%;
}
.iframe-lesson-movie {
height: 220px;
margin-bottom: 5px;
width: 100%;
}
.class-detail-info {
margin-bottom: 20px;
padding-bottom: 10px;
}
.detail-info-box {
width: 100%;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 14px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -14px;
}
.level-indicator {
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
margin: 0;
padding: 10px 0.5em;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 11px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 280px;
margin-bottom: 15px;
margin-right: 0;
overflow: hidden;
width: 100%;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 280px;
padding: 15px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
line-height: 30px;
margin: 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 0;
width: 100%;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 180px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -5px;
font-size: 16px;
font-weight: bold;
left: 20px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.profile-text-box {
width: 100%;
}
.profile-movie-box {
width: 100%;
}
.iframe-intro-movie {
height: 220px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 185px;
margin-bottom: 20px;
width: 100%;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 49%;
}
.own-class-right-col {
width: 49%;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 15px;
text-align: center;
width: calc(100% - 30px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.link-box-blog-inst {
display: block;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 0;
text-decoration: none;
}
.blog-box-with-excerpt {
height: auto;
}
.blog-eye-catch {
overflow: hidden;
width: 100%;
}
.blog-thumbnail {
height: 160px;
width: 100%;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 10px 15px 0;
}
.studio-box-single {
height: 210px;
position: relative;
width: 100%;
}
.studio-box-multiple {
height: 210px;
margin-bottom: 10px;
margin-right: 0;
position: relative;
width: 100%;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 180px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px 20px 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 15px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.studio-credit-text {
font-size: 12px;
text-align: right;
}
.studio-credit {
color: #fff;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
top: 10px;
}
.basic-info-box {
width: 100%;
}
.studio-basic-info {
padding: 0 4px;
}
.access-map-box {
height: 300px;
margin: 0 4px;
overflow: hidden;
width: 100%;
}
.direction-steps {
padding-right: 4px;
}
.access-photo-single {
font-size: 0;
margin-bottom: 25px;
margin-top: 2px;
width: calc(100% - 20px);
}
.access-photo-double {
font-size: 0;
margin-bottom: 15px;
margin-top: 2px;
width: calc(100% - 20px);
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
margin-bottom: 15px;
width: 100%;
}
.movie-category-text-short {
line-height: 1.4em !important;
padding: 10px 0;
}
.movie-category-text-long {
letter-spacing: -2px;
line-height: 1.4em !important;
padding: 10px 0;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 220px;
width: 100%;
}
.description-box {
padding: 10px 20px 0 10px;
width: 100%;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 100%;
}
.post-thumbnail {
height: 180px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 180px;
line-height: 180px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
margin-bottom: 20px;
margin-right: 0;
position: relative;
width: 100%;
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 33px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px 2px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 0;
line-height: 30px;
position: relative;
text-align: center;
width: 100%;
}
.header-area-post-thumbnail {
height: 325px;
position: relative;
width: 100%;
}
.post-image-box {
height: 325px;
margin: 0 auto;
padding: 10px;
transform: rotate(-3deg);
max-width: 325px;
}
.header-title-box {
bottom: 0;
padding: 0 10px;
position: absolute;
left: 0;
}
.header-area-post-noimage {
padding: 20px 10px 10px;
width: 100%;
}
.blog-info-area {
padding: 0 10px;
}
.anchour-area {
height: 150px;
position: relative;
}
.events-area {
margin-top: 30px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
position: relative;
width: 100%;
}
.events-image {
background-position: middle;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
order: 0;
width: 100%;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 200px;
width: 100%;
}
.events-no-image-text {
font-weight: bold;
line-height: 200px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 36px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 45px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
order: 2;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.events-item {
font-weight: bold;
margin: 0;
width: 22%;
}
.events-detail {
margin: 0;
width: 70%;
}
.fm-intro {
margin-bottom: 30px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 10px;
}
.fm-movie-box {
width: 100%;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.carnelian-media-intro {
margin-bottom: 30px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 10px;
}
.media-image-box-single,
.media-image-box-double,
.media-image-box-triple {
margin: 0 auto 10px;
}
.media-movie-box {
margin: 20px auto 10px;
width: 100%;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
height: 200px;
}
.cta-404 {
padding: 0 10px;
}
.list-style-404 {
margin-bottom: 10px;
width: 100%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 5px 0 90px;
}
.footer-item-box-front-pg ul li,
.footer-item-box-content-pg ul li {
margin-top: 1em;
}
.footer-logo {
height: 50px;
margin: 0 auto;
width: 50px;
}
.footer-menu {
font-size: 11px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 11px;
margin-top: 20px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
}
.modified-spacing-2 {
letter-spacing: -1px;
}
.modified-spacing-3 {
letter-spacing: -1px;
}
.modified-spacing-5 {
letter-spacing: -2.2px;
}
.modified-spacing-10 {
letter-spacing: -1.5px;
}
.section-margin {
margin-bottom: 50px;
}
.purpose-check {
margin-bottom: 40px;
}
.margin-l-10,
.margin-r-10 {
text-align: center;
width: 48%;
}
.margin-s-10 {
margin: 0 auto;
text-align: center;
}
.modified-margin-3 {
margin-bottom: 6px;
}
.padding-r-10 {
padding-right: 10px;
}
.ico-caret-white {
color: #fff;
font-size: 11.5px;
}
.ico-caret-black {
margin-top: 10px;
}
.ico-check {
margin-top: 10px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.4);
display: block;
padding: 5px 0;
text-decoration: none;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.4);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.link-black {
background-color: rgba(255, 255, 255, 0.5);
display: block;
height: 100%;
text-decoration: none;
}
.link-default {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
}
#breadcrumbs {
margin-top: 40px;
padding: 0 10px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 10px;
margin-right: 4px;
position: relative;
top: 1px;
}
.infinite-scroll-control-area {
padding: 0 10px;
}
.front-pg-campaign-section {
margin: 0 0 150px calc(50% - 375px);
width: 750px;
}
.campaign-comment {
font-size: 15px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 85px;
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 40px;
padding: 0 10px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.caution-modal-content {
max-width: 350px;
}
}
@media print, screen and (min-width: 375px) and (max-width: 413px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
.fp-h2-hyphen {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 28px;
line-height: 120px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 65px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
bottom: 10px;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-class-overview h1 {
color: #fff;
font-size: 28px;
padding: 0 32px;
}
.h1-class-overview p {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 0 15px;
}
.h1-class-info {
background: rgba(0, 0, 0, 0.4);
bottom: 10px;
color: #fff;
margin: 0 auto;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-instructors {
color: #fff;
font-size: 28px;
margin: 0;
position: relative;
padding-left: 20px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 240px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 28px;
}
.header-area-archives h1 {
border-left: 1px solid #999;
font-size: 28px;
padding: 0 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
font-size: 24px;
padding: 0 0 0 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 28px;
margin: 0 -5px;
padding: 20px 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 65px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 28px;
padding: 5px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
line-height: 1.3em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 20px;
}
.h2-front-pg {
font-size: 16px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 20px;
font-style: oblique;
line-height: 1;
}
.front-pg-1st-section h2,
.front-pg-2nd-section h2,
.front-pg-4th-section h2 {
padding: 0 35px;
}
.front-pg-3rd-section h2 {
padding: 0 30px;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 22px;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: relative;
top: calc(180px / 2 - 45px);
transform: rotate(-3deg) skew(-3deg);
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 12px 0;
}
.h2-content-pg {
border-left: 1px solid #999;
margin-bottom: 10px;
padding: 0 0 0 10px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-events {
border-bottom: 1px dashed #333;
order: 2;
margin-top: 10px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
margin-top: 5px;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
h3 {
font-size: 18px;
}
.h3-front-pg {
font-size: 15px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
}
.h3-contactform:not(:first-child) {
margin-top: 20px;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
}
.subtitle-instructors {
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 0;
padding-left: 20px;
position: relative;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 200px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
}
.sub-title {
font-size: 20px;
font-weight: bold;
}
button {
font-size: 14px;
}
.notes-font-size {
font-size: 12px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 490px;
left: 0;
opacity: 0;
padding: 0 10px;
position: absolute;
top: 20px;
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1 {
height: 50px;
overflow: hidden;
width: 100%;
}
.mobile-nav-item-style-2,
.mobile-nav-item-style-3,
.mobile-nav-item-style-4 {
height: 50px;
overflow: hidden;
width: calc(50% - 3px);
}
.mobile-nav-margin-1,
.mobile-nav-margin-2 {
margin-bottom: 6px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
1px 1px 3px #fff,
1px -1px 3px #fff,
-1px 1px 3px #fff,
-1px -1px 3px #fff;
}
.mobile-nav-btn-style-1 {
line-height: 50px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 8.5px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 100%;
left: calc(50% - 22px);
position: absolute;
top: 3px;
width: 44px;
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 12px;
font-weight: bold;
}
.notes-margin {
margin-top: 8px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 0.9em;
height: 60px;
margin: 2px auto 0;
padding-top: 32px;
position: relative;
text-align: center;
transform: scale(1);
width: 60px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 2px;
left: calc(50% - 12px);
position: absolute;
top: 18px;
width: 24px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-text {
color: #fff;
display: block;
height: 100%;
padding-top: 75px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 90px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 70px;
left: 10px;
position: absolute;
top: -25px;
width: 70px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 26%;
top: 25%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 120px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 70px;
}
.two-btns {
width: 140px;
}
.three-btns {
width: 210px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 60px;
left: 0;
margin-right: 10px;
opacity: 0;
position: relative;
top: 20px;
width: 60px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-size: 11px;
height: 100%;
line-height: 1.3em;
margin-left: -5px;
padding-top: 65px;
position: relative;
text-align: center;
text-decoration: none;
width: 70px;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-size: 11px;
height: 100%;
line-height: 1.3em;
margin-left: -20px;
padding-top: 65px;
position: relative;
text-align: center;
text-decoration: none;
width: 100px;
}
.front-pg-header-box {
padding: 0;
position: relative;
}
.with-info-box {
height: 1080px;
}
.without-info-box {
height: 670px;
}
.front-pg-header-logo {
margin: 15px 0 0 15px;
width: 120px;
}
.front-pg-h1-style {
position: absolute;
font-size: 18px;
font-weight: bold;
line-height: 1.5em;
margin: 410px auto 0;
text-align: center;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
width: 100%;
}
.front-pg-image-box {
background: rgba(255, 255, 255, 1);
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 350px;
left: -90px;
overflow: hidden;
position: absolute;
top: 55px;
transform: rotate(-10deg);
width: 550px;
}
.front-pg-header-image {
left: -40px;
position: relative;
top: -45px;
transform: rotate(10deg);
width: 650px;
}
#top-info-box {
left: 20px;
position: absolute;
top: 615px;
width: calc(100% - 40px);
}
.top-info-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
font-size: 13px;
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 315px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 160px;
margin: 0 auto 5px;
width: 270px;
}
.top-info-description {
padding: 5px 20px 0;
}
.top-info-contents-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.3);
height: auto;
margin-bottom: 50px;
padding: 30px 0 10px;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 80px solid rgba(255, 255, 255, 0.3);
border-left: 420px solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -80px;
width: 100%;
}
.front-pg-1st-section::after {
border-top: 80px solid rgba(255, 255, 255, 0.3);
border-right: 420px solid transparent;
bottom: -80px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 360px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 25px;
top: 185px;
transform: rotate(-15deg);
width: 100px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 70px;
top: 170px;
transform: rotate(8deg);
width: 120px;
}
.complain-text-style-1 {
font-size: 10px;
left: 5.5%;
top: 28.5%;
width: 90px;
}
.complain-text-style-2 {
font-size: 10px;
left: 32%;
top: 13%;
width: 60px;
}
.complain-text-style-3 {
font-size: 10px;
left: 20%;
top: 42%;
width: 90px;
}
.complain-text-style-4 {
font-size: 14px;
left: 8%;
top: 69%;
width: 120px;
}
.complain-text-style-5 {
font-size: 14px;
left: 47%;
top: 24%;
width: 170px;
}
.complain-text-style-6 {
font-size: 15px;
font-weight: bold;
margin: 0 0 30px;
text-align: center;
}
.complain-text-style-7 {
font-size: 15px;
font-weight: bold;
margin: 30px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-2nd-section {
margin-bottom: 60px;
}
.explanatory-text-style {
margin: 15px auto 50px;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-reasons-box {
padding: 0 20px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 50px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
height: 245px;
overflow: hidden;
position: relative;
width: 100%;
}
.image-modification-1 {
position: relative;
top: -50px;
}
.image-modification-2 {
position: relative;
right: 50px;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -30px;
}
.image-modification-4 {
position: relative;
top: -15px;
right: 20px;
width: 400px;
}
.image-modification-5 {
position: relative;
height: 100%;
width: auto;
}
.front-pg-h3-box p {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 20px;
font-style: oblique;
}
.front-pg-reasons-text {
margin-top: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 120px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -80px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 80px solid rgba(24, 24, 24, 0.4);
border-left: 420px solid transparent;
z-index: 100;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -80px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 80px solid rgba(24, 24, 24, 0.4);
border-right: 420px solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 50px 20px 20px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 30px;
}
.front-pg-message-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-message-text p {
color: #fff;
}
.front-pg-4th-section {
margin-bottom: 50px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-cta-text {
padding: 0 20px 20px;
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-cta,
.cta-404pg {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px;
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 150px;
margin-bottom: 10px;
overflow: hidden;
width: calc(50% - 5px);
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 64px;
}
.cta-caption-1 {
margin: 20px auto;
text-align: center;
line-height: 1.4em;
width: 130px;
}
.cta-caption-2 {
margin: 10px auto 0;
text-align: center;
line-height: 1.4em;
width: 130px;
}
.cta-caption-3 {
margin: 10px auto 0;
text-align: center;
line-height: 1.4em;
width: 130px;
}
.main-content-page {
margin-bottom: 0;
margin-left: 0;
padding: 0;
width: 100%;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
background-repeat: no-repeat;
background-size: cover;
height: 220px;
width: 100%;
}
.header-area-common {
margin-top: 60px;
padding: 20px 20px 0;
}
.header-box {
height: 250px;
margin-top: 60px;
overflow: hidden;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-class-info {
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-instructors {
background-color: rgba(0, 0, 0, 0.1);
background-position: -280px 0;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
margin-top: 60px;
padding-top: 80px;
position: relative;
overflow: hidden;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 170px;
}
.header-box-instructors::after {
border-left: 50px solid rgba(0, 0, 0, 0.4);
border-bottom: 250px solid transparent;
content: "";
position: absolute;
top: 0;
left: 170px;
height: 0;
width: 0;
}
.header-box-studios {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
bottom: 10px;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.header-area-archives {
margin-top: 80px;
padding: 10px 20px 0;
}
.main-area {
padding: 30px 20px 0;
}
.content-box {
padding: 0 5px;
}
.class-lineup-box {
margin-bottom: 20px;
}
.class-image {
background-repeat: no-repeat;
background-size: cover;
height: 180px;
}
.class-description {
padding: 15px;
}
.class-lineup-link-text {
line-height: 30px;
text-align: center;
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
margin-bottom: 30px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
}
.class-instructor-introduction {
margin-top: 10px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
text-align: center;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 10px;
width: 100%;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
text-align: center;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 15px;
text-align: center;
width: calc(100% - 30px);
}
.contact-area {
padding: 0 20px;
}
.notes-to-join {
padding-left: 10px;
}
.trial-booking-form {
margin-top: 10px;
}
.iframe-movie-box {
width: 100%;
}
.iframe-lesson-movie {
height: 220px;
margin-bottom: 5px;
width: 100%;
}
.class-detail-info {
margin-bottom: 20px;
padding-bottom: 10px;
}
.detail-info-box {
width: 100%;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
margin: 0;
padding: 10px 0.5em;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 12px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 280px;
margin-bottom: 15px;
margin-right: 0;
overflow: hidden;
width: 100%;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 280px;
padding: 15px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
line-height: 30px;
margin: 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 0;
width: 100%;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 180px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -5px;
font-size: 16px;
font-weight: bold;
left: 20px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.profile-text-box {
width: 100%;
}
.profile-movie-box {
width: 100%;
}
.iframe-intro-movie {
height: 220px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 185px;
margin-bottom: 20px;
width: 100%;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 49%;
}
.own-class-right-col {
width: 49%;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 15px;
text-align: center;
width: calc(100% - 30px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.link-box-blog-inst {
display: block;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 0;
text-decoration: none;
}
.blog-eye-catch {
overflow: hidden;
width: 100%;
}
.blog-thumbnail {
height: 160px;
width: 100%;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 10px 15px 0;
}
.studio-box-single {
height: 210px;
position: relative;
width: 100%;
}
.studio-box-multiple {
height: 210px;
margin-bottom: 10px;
margin-right: 0;
position: relative;
width: 100%;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 180px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px 20px 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 15px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.studio-credit-text {
font-size: 12px;
text-align: right;
}
.studio-credit {
color: #fff;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
top: 10px;
}
.basic-info-box {
width: 100%;
}
.studio-basic-info {
padding: 0 5px;
}
.access-map-box {
height: 300px;
margin: 0 5px;
overflow: hidden;
width: 100%;
}
.direction-steps {
padding-right: 5px;
}
.access-photo-single {
font-size: 0;
margin-bottom: 25px;
margin-top: 2px;
width: calc(100% - 20px);
}
.access-photo-double {
font-size: 0;
margin-bottom: 15px;
margin-top: 2px;
width: calc(100% - 20px);
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
margin-bottom: 15px;
width: 100%;
}
.movie-category-text-short {
line-height: 1.4em !important;
padding: 10px 0;
}
.movie-category-text-long {
letter-spacing: -2px;
line-height: 1.4em !important;
padding: 10px 0;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 220px;
width: 100%;
}
.description-box {
padding: 10px 20px 0 10px;
width: 100%;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 100%;
}
.post-thumbnail {
height: 180px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 180px;
line-height: 180px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
margin-bottom: 20px;
margin-right: 0;
position: relative;
width: 100%;
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 33px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px 2px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 0;
line-height: 30px;
position: relative;
text-align: center;
width: 100%;
}
.header-area-post-thumbnail {
height: 375px;
position: relative;
width: 100%;
}
.post-image-box {
height: 375px;
margin: 0 auto;
padding: 20px;
transform: rotate(-3deg);
max-width: 375px;
}
.header-title-box {
bottom: 0;
padding: 0 20px;
position: absolute;
left: 0;
}
.header-area-post-noimage {
padding: 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 150px;
position: relative;
}
.events-area {
margin-top: 30px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
position: relative;
width: 100%;
}
.events-image {
background-position: middle;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
order: 0;
width: 100%;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 200px;
width: 100%;
}
.events-no-image-text {
font-weight: bold;
line-height: 200px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 40px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 50px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
order: 2;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.events-item {
font-weight: bold;
margin: 0;
width: 20%;
}
.events-detail {
margin: 0;
width: 72%;
}
.fm-intro {
margin-bottom: 30px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 10px;
}
.fm-movie-box {
width: 100%;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.carnelian-media-intro {
margin-bottom: 30px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 10px;
}
.media-image-box-single,
.media-image-box-double,
.media-image-box-triple {
margin: 0 auto 10px;
}
.media-movie-box {
margin: 20px auto 10px;
width: 100%;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
height: 200px;
}
.cta-404 {
padding: 0 10px;
}
.list-style-404 {
margin-bottom: 10px;
width: 100%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 5px 0 90px;
}
.footer-item-box-front-pg ul li,
.footer-item-box-content-pg ul li {
margin-top: 1em;
}
.footer-logo {
height: 50px;
margin: 0 auto;
width: 50px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
}
.modified-spacing-2 {
letter-spacing: -1px;
}
.modified-spacing-5 {
letter-spacing: -2.2px;
}
.modified-spacing-10 {
letter-spacing: -1.5px;
}
.section-margin {
margin-bottom: 40px;
}
.purpose-check {
margin-bottom: 40px;
}
.margin-l-10,
.margin-r-10 {
text-align: center;
width: 48%;
}
.margin-s-10 {
margin: 0 auto;
text-align: center;
}
.front-pg-1st-section h2 {
margin-bottom: 0;
}
.modified-margin-3 {
margin-bottom: 6px;
}
.ico-caret-white {
color: #fff;
font-size: 13px;
}
.ico-caret-black {
margin-top: 10px;
}
.ico-check {
margin-top: 10px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.4);
display: block;
padding: 10px 0;
text-decoration: none;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.4);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.link-black {
background-color: rgba(255, 255, 255, 0.5);
display: block;
height: 100%;
text-decoration: none;
}
.link-default {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
}
#breadcrumbs {
margin-top: 40px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 10px;
margin-right: 4px;
position: relative;
top: 1px;
}
.infinite-scroll-control-area {
padding: 0 20px;
}
.front-pg-campaign-section {
margin: 0 0 150px calc(50% - 375px);
width: 750px;
}
.campaign-comment {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 80px;
color: #fff;
font-size: 20px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 40px;
padding: 0 10px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.caution-modal-content {
max-width: 350px;
}
}
@media print, screen and (min-width: 414px) and (max-width: 567px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
.fp-h2-hyphen {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 28px;
line-height: 140px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 70px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
bottom: 15px;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-class-overview h1 {
color: #fff;
font-size: 28px;
padding: 0 10px;
}
.h1-class-overview p {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 0 15px;
}
.h1-class-info {
background: rgba(0, 0, 0, 0.4);
bottom: 15px;
color: #fff;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-instructors {
color: #fff;
font-size: 28px;
margin: 0;
position: relative;
padding-left: 20px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 240px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 28px;
}
.header-area-archives h1 {
border-left: 1px solid #999;
font-size: 28px;
padding: 0 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
font-size: 26px;
padding: 0 0 0 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 28px;
margin: 0 -5px;
padding: 20px 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 75px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 28px;
padding: 8px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
line-height: 1.3em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 20px;
}
.h2-front-pg {
font-size: 16px;
padding: 0 15px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 20px;
font-style: oblique;
}
.front-pg-1st-section h2 {
margin: 0 auto;
width: 300px;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 22px;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: relative;
top: calc(230px / 2 - 45px);
transform: rotate(-3deg) skew(-3deg);
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 12px 0;
}
.h2-content-pg {
border-left: 1px solid #999;
margin-bottom: 10px;
padding: 5px 0 2px 10px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-events {
border-bottom: 1px dashed #333;
order: 2;
margin-top: 10px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
margin-top: 5px;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
h3 {
font-size: 18px;
}
.h3-front-pg {
font-size: 15px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
}
.h3-contactform:not(:first-child) {
margin-top: 20px;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
}
.subtitle-instructors {
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 0;
padding-left: 20px;
position: relative;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 200px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
}
.sub-title {
font-size: 20px;
font-weight: bold;
}
button {
font-size: 14px;
}
.notes-font-size {
font-size: 12px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 490px;
left: 0;
opacity: 0;
padding: 0 10px;
position: absolute;
top: 20px;
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1 {
height: 50px;
overflow: hidden;
width: 100%;
}
.mobile-nav-item-style-2,
.mobile-nav-item-style-3,
.mobile-nav-item-style-4 {
height: 50px;
overflow: hidden;
width: calc(50% - 3px);
}
.mobile-nav-margin-1,
.mobile-nav-margin-2 {
margin-bottom: 6px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
1px 1px 3px #fff,
1px -1px 3px #fff,
-1px 1px 3px #fff,
-1px -1px 3px #fff;
}
.mobile-nav-btn-style-1 {
line-height: 50px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 8.5px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 100%;
left: calc(50% - 22px);
position: absolute;
top: 3px;
width: 44px;
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 12px;
font-weight: bold;
}
.notes-margin {
margin-top: 8px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 0.9em;
height: 60px;
margin: 2px auto 0;
padding-top: 32px;
position: relative;
text-align: center;
transform: scale(1);
width: 60px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 2px;
left: calc(50% - 12px);
position: absolute;
top: 18px;
width: 24px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-text {
color: #fff;
display: block;
height: 100%;
padding-top: 85px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 80px;
left: 15px;
margin-top: -5px;
position: absolute;
top: -25px;
width: 80px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 140px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 85px;
}
.two-btns {
width: 170px;
}
.three-btns {
width: 255px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 70px;
left: 0;
margin-right: 15px;
opacity: 0;
position: relative;
top: 20px;
width: 70px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-size: 13px;
height: 100%;
line-height: 1.3em;
margin-left: -5px;
padding-top: 75px;
position: relative;
text-align: center;
text-decoration: none;
width: 80px;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-size: 13px;
height: 100%;
line-height: 1.3em;
margin-left: -25px;
padding-top: 75px;
position: relative;
text-align: center;
text-decoration: none;
width: 120px;
}
.front-pg-header-box {
padding: 0;
position: relative;
}
.with-info-box {
height: 1170px;
}
.without-info-box {
height: 750px;
}
.front-pg-header-logo {
margin: 15px 0 0 10px;
width: 140px;
}
.front-pg-h1-style {
position: absolute;
font-size: 20px;
font-weight: bold;
line-height: 1.5em;
margin: 445px auto 0;
text-align: center;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
width: 100%;
}
.front-pg-image-box {
background: rgba(255, 255, 255, 1);
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 400px;
left: -40px;
overflow: hidden;
position: absolute;
top: 40px;
transform: rotate(-10deg);
width: 630px;
}
.front-pg-header-image {
left: -100px;
position: relative;
top: -80px;
transform: rotate(10deg);
width: 820px;
}
#top-info-box {
left: 20px;
position: absolute;
top: 680px;
width: calc(100% - 40px);
}
.top-info-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 340px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 180px;
margin: 0 auto 5px;
width: 300px;
}
.top-info-description {
margin: 0 auto;
padding: 10px 0 0;
width: 300px;
}
.top-info-contents-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.3);
height: auto;
margin-bottom: 50px;
padding: 30px 0 0;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 110px solid rgba(255, 255, 255, 0.3);
border-left: 570px solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -110px;
width: 100%;
}
.front-pg-1st-section::after {
border-top: 110px solid rgba(255, 255, 255, 0.3);
border-right: 570px solid transparent;
bottom: -110px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 400px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 30px;
top: 200px;
transform: rotate(-15deg);
width: 100px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 75px;
top: 185px;
transform: rotate(8deg);
width: 120px;
}
.complain-text-style-1 {
font-size: 11px;
left: 5.5%;
top: 29%;
width: 100px;
}
.complain-text-style-2 {
font-size: 11px;
left: 32%;
top: 13%;
width: 70px;
}
.complain-text-style-3 {
font-size: 11px;
left: 19.5%;
top: 42%;
width: 100px;
}
.complain-text-style-4 {
font-size: 14px;
left: 9%;
top: 70%;
width: 120px;
}
.complain-text-style-5 {
font-size: 14px;
left: 49%;
top: 24%;
width: 170px;
}
.complain-text-style-6 {
font-size: 15px;
font-weight: bold;
margin: 0 0 30px;
text-align: center;
}
.complain-text-style-7 {
font-size: 15px;
font-weight: bold;
margin: 30px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-2nd-section {
margin-bottom: 70px;
}
.explanatory-text-style {
margin: 15px auto 50px;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-reasons-box {
padding: 0 20px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 50px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
height: 250px;
margin: 0 auto;
max-width: 380px;
overflow: hidden;
position: relative;
width: 100%;
}
.image-modification-1 {
position: relative;
top: -50px;
}
.image-modification-2 {
position: relative;
right: 10%;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -30px;
}
.image-modification-4 {
position: relative;
top: -15px;
right: 20px;
width: 400px;
}
.image-modification-5 {
position: relative;
height: 100%;
width: auto;
}
.front-pg-h3-box p {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 20px;
font-style: oblique;
}
.front-pg-reasons-text {
margin-top: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 140px;
position: relative;
}
.front-pg-3rd-section::before {
border-bottom: 110px solid rgba(24, 24, 24, 0.4);
border-left: 570px solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -110px;
width: 100%;
z-index: 100;
}
.front-pg-3rd-section::after {
border-top: 110px solid rgba(24, 24, 24, 0.4);
border-right: 570px solid transparent;
bottom: -110px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 60px 20px 0;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 30px;
}
.front-pg-message-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-message-text p {
color: #fff;
}
.front-pg-4th-section {
margin-bottom: 80px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-cta-text {
padding: 0 20px 20px;
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-cta,
.cta-404pg {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px;
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 150px;
margin-bottom: 10px;
overflow: hidden;
width: calc(50% - 5px);
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 64px;
}
.cta-caption-1 {
margin: 20px auto 0;
text-align: center;
width: 130px;
}
.cta-caption-2,
.cta-caption-3 {
margin: 10px auto 0;
text-align: center;
width: 140px;
}
.main-content-page {
margin-bottom: 0;
margin-left: 0;
padding: 0;
width: 100%;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
background-repeat: no-repeat;
background-size: cover;
height: 220px;
width: 100%;
}
.header-area-common {
margin-top: 60px;
padding: 20px 20px 0;
}
.header-box {
height: 280px;
margin-top: 60px;
overflow: hidden;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 280px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-class-info {
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
height: 280px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-instructors {
background-color: rgba(0, 0, 0, 0.1);
background-position: 80% 0;
background-size: cover;
background-repeat: no-repeat;
height: 280px;
margin-top: 60px;
padding-top: 100px;
position: relative;
overflow: hidden;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 180px;
}
.header-box-instructors::after {
border-left: 70px solid rgba(0, 0, 0, 0.4);
border-bottom: 250px solid transparent;
content: "";
position: absolute;
top: 0;
left: 180px;
height: 0;
width: 0;
}
.header-box-studios {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 280px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
bottom: 15px;
margin: 0 auto;
padding: 15px 0 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.header-area-archives {
margin-top: 70px;
padding: 20px 20px 0;
}
.main-area {
padding: 30px 20px 0;
}
.content-box {
padding: 0 10px;
}
.class-lineup-box {
margin-bottom: 20px;
}
.class-image {
background-repeat: no-repeat;
background-size: cover;
height: 230px;
}
.class-description {
padding: 20px;
}
.class-lineup-link-text {
line-height: 30px;
text-align: center;
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
margin-bottom: 30px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
}
.class-instructor-introduction {
margin-top: 10px;
padding: 0 10px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
text-align: center;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 15px;
width: 100%;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 20px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
text-align: center;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.contact-area {
padding: 0 20px;
}
.notes-to-join {
padding-left: 10px;
}
.trial-booking-form {
margin-top: 10px;
width: 100%;
}
.iframe-movie-box {
width: 100%;
}
.iframe-lesson-movie {
height: 280px;
margin-bottom: 5px;
width: 100%;
}
.class-detail-info {
margin-bottom: 20px;
padding-bottom: 10px;
}
.detail-info-box {
width: 100%;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 14px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -14px;
}
.level-indicator {
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
margin: 0;
padding: 10px 0.5em;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 12px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 280px;
margin-bottom: 15px;
margin-right: 0;
overflow: hidden;
width: 100%;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 280px;
padding: 15px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
line-height: 1.8em;
}
.time-table-link-text {
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
line-height: 30px;
margin: 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 0;
width: 100%;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 250px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -5px;
font-size: 16px;
font-weight: bold;
left: 20px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.profile-text-box {
width: 100%;
}
.profile-movie-box {
width: 100%;
}
.iframe-intro-movie {
height: 280px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 195px;
margin-bottom: 20px;
width: 100%;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 20px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 48%;
}
.own-class-right-col {
width: 48%;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 5px;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.link-box-blog-inst {
display: block;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 0;
text-decoration: none;
}
.blog-eye-catch {
overflow: hidden;
width: 100%;
}
.blog-thumbnail {
height: 160px;
width: 100%;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 10px 15px 0;
}
.studio-box-single {
height: 210px;
position: relative;
width: 100%;
}
.studio-box-multiple {
height: 210px;
margin-bottom: 10px;
margin-right: 0;
position: relative;
width: 100%;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 180px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px 20px 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 15px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.studio-credit-text {
font-size: 12px;
text-align: right;
}
.studio-credit {
color: #fff;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
top: 10px;
}
.basic-info-box {
width: 100%;
}
.studio-basic-info {
padding: 0 10px;
}
.access-map-box {
height: 300px;
margin: 0 10px;
overflow: hidden;
width: 100%;
}
.direction-steps {
padding-right: 10px;
}
.access-photo-single {
font-size: 0;
margin-bottom: 25px;
margin-top: 2px;
width: calc(100% - 18px);
}
.access-photo-double {
font-size: 0;
margin-bottom: 15px;
margin-top: 2px;
width: calc(100% - 18px);
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 15px;
width: 100%;
}
.movie-category-text-short {
line-height: 1.4em !important;
padding: 10px 0;
}
.movie-category-text-long {
letter-spacing: -2px;
line-height: 1.4em !important;
padding: 10px 0;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
height: auto;
padding: 0;
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 280px;
width: 100%;
}
.description-box {
padding: 10px 20px 0 10px;
width: 100%;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 100%;
}
.post-thumbnail {
height: 180px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 180px;
line-height: 180px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
margin-bottom: 20px;
margin-right: 0;
position: relative;
width: 100%;
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 45px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px 2px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 0;
line-height: 30px;
position: relative;
text-align: center;
width: 100%;
}
.header-area-post-thumbnail {
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin: 0 auto;
padding: 20px;
transform: rotate(-3deg);
max-width: 400px;
}
.header-title-box {
bottom: 0;
padding: 0 20px;
position: absolute;
left: 0;
}
.header-area-post-noimage {
padding: 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 180px;
position: relative;
}
.events-area {
margin-top: 30px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
position: relative;
width: 100%;
}
.events-image {
background-position: middle;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
order: 0;
width: 100%;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 250px;
width: 100%;
}
.events-no-image-text {
font-weight: bold;
line-height: 250px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 45px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
order: 2;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: calc(100% - 90px);
}
.fm-intro {
margin-bottom: 30px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 10px;
}
.fm-movie-box {
width: 100%;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.carnelian-media-intro {
margin-bottom: 30px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 15px;
}
.media-image-box-single,
.media-image-box-double,
.media-image-box-triple {
margin: 0 auto 10px;
}
.media-movie-box {
margin: 20px auto 10px;
width: 100%;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
height: 280px;
}
.cta-404 {
padding: 0 20px;
}
.list-style-404 {
margin-bottom: 10px;
width: 100%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 5px 0 90px;
}
.footer-item-box-front-pg ul li {
margin-top: 1em;
}
.footer-logo {
height: 50px;
margin: 0 auto;
width: 50px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
}
.modified-spacing-2 {
letter-spacing: -1px;
}
.modified-spacing-5 {
letter-spacing: -2.2px;
}
.modified-spacing-10 {
letter-spacing: -1.5px;
}
.section-margin {
margin-bottom: 40px;
}
.purpose-check {
margin-bottom: 40px;
}
.margin-l-10,
.margin-r-10 {
text-align: center;
width: 48%;
}
.margin-s-10 {
margin: 0 auto;
text-align: center;
}
.front-pg-1st-section h2 {
margin-bottom: 0;
}
.modified-margin-3 {
margin-bottom: 6px;
}
.ico-caret-white {
color: #fff;
font-size: 14px;
}
.ico-caret-black {
margin-top: 10px;
}
.ico-check {
margin-top: 10px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.4);
display: block;
height: 100%;
padding: 5px 0;
text-decoration: none;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
width: 100%;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.4);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.link-black {
background-color: rgba(255, 255, 255, 0.5);
display: block;
height: 100%;
text-decoration: none;
}
.link-default {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
}
#breadcrumbs {
margin-top: 40px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
.infinite-scroll-control-area {
padding: 0 20px;
}
.view-more-button {
box-shadow:
1px 1px 10px rgba(0, 0, 0, 0.05),
1px -1px 10px rgba(0, 0, 0, 0.05),
-1px 1px 10px rgba(0, 0, 0, 0.05),
-1px -1px 10px rgba(0, 0, 0, 0.05);
cursor: pointer;
width: 100%;
}
.front-pg-campaign-section {
margin: 0 0 150px calc(50% - 375px);
width: 750px;
}
.campaign-comment {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 80px;
color: #fff;
font-size: 22px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 40px;
padding: 0 10px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.caution-modal-content {
max-width: 350px;
}
}
@media print, screen and (min-width: 568px) and (max-width: 735px) {
body {
font-size: 15px;
}
h1 {
font-size: 24px;
}
.fp-h2-hyphen {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 30px;
line-height: 200px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 50px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
bottom: 20px;
margin: 0 auto;
padding: 20px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: calc(100% + 10px);
}
.h1-class-overview h1 {
color: #fff;
font-size: 30px;
}
.h1-class-overview p {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 0 25px;
}
.h1-class-info {
background: rgba(0, 0, 0, 0.4);
bottom: 20px;
color: #fff;
font-size: 30px;
margin: 0 auto;
padding: 20px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.h1-instructors {
color: #fff;
font-size: 30px;
margin: 0;
position: relative;
padding-left: 30px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 300px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 30px;
}
.header-area-archives h1 {
border-left: 1px solid #999;
font-size: 30px;
padding: 5px 0 5px 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
font-size: 26px;
padding: 5px 0 5px 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 30px;
margin: 0 -5px;
padding: 20px 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 90px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 30px;
padding: 10px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
line-height: 1.3em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 20px;
}
.h2-front-pg {
padding: 0 15px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 26px;
font-style: oblique;
line-height: 1;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 18px;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: relative;
top: calc(160px / 2 - 45px);
transform: rotate(-3deg) skew(-3deg);
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 18px 0;
}
.h2-content-pg {
border-left: 1px solid #999;
margin-bottom: 15px;
padding: 5px 0 2px 10px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 10px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-blog-title {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
.h2-events {
border-bottom: 1px dashed #333;
margin-top: 10px;
order: 2;
text-align: center;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
margin-top: 5px;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
h3 {
font-size: 18px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
}
.h3-contactform:not(:first-child) {
margin-top: 20px;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
}
.subtitle-instructors {
color: #fff;
font-size: 22px;
font-weight: bold;
margin: 0;
padding-left: 30px;
position: relative;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 300px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
}
.sub-title {
font-size: 20px;
font-weight: bold;
}
button {
font-size: 15px;
}
.notes-font-size {
font-size: 12px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 490px;
left: 0;
opacity: 0;
padding: 0 10px;
position: absolute;
top: 20px;
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1 {
height: 50px;
overflow: hidden;
width: 100%;
}
.mobile-nav-item-style-2,
.mobile-nav-item-style-3,
.mobile-nav-item-style-4 {
height: 50px;
overflow: hidden;
width: calc(50% - 3px);
}
.mobile-nav-margin-1,
.mobile-nav-margin-2 {
margin-bottom: 6px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
1px 1px 3px #fff,
1px -1px 3px #fff,
-1px 1px 3px #fff,
-1px -1px 3px #fff;
}
.mobile-nav-btn-style-1 {
line-height: 50px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 8.5px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 100%;
left: calc(50% - 22px);
position: absolute;
top: 3px;
width: 44px;
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 12px;
font-weight: bold;
}
.notes-margin {
margin-top: 8px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 0.9em;
height: 60px;
margin: 2px auto 0;
padding-top: 32px;
position: relative;
text-align: center;
transform: scale(1);
width: 60px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 2px;
left: calc(50% - 12px);
position: absolute;
top: 18px;
width: 24px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-text {
color: #fff;
display: block;
height: 100%;
padding-top: 85px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 80px;
left: 15px;
margin-top: -5px;
position: absolute;
top: -25px;
width: 80px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 140px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 85px;
}
.two-btns {
width: 170px;
}
.three-btns {
width: 255px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 70px;
left: 0;
margin-right: 15px;
opacity: 0;
position: relative;
top: 20px;
width: 70px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-size: 13px;
height: 100%;
line-height: 1.3em;
margin-left: -5px;
padding-top: 75px;
position: relative;
text-align: center;
text-decoration: none;
width: 80px;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-size: 13px;
height: 100%;
line-height: 1.3em;
margin-left: -25px;
padding-top: 75px;
position: relative;
text-align: center;
text-decoration: none;
width: 120px;
}
.front-pg-header-box {
padding: 0;
position: relative;
}
.with-info-box {
height: 1220px;
}
.without-info-box {
height: 750px;
}
.front-pg-header-logo {
margin: 10px 0 0 10px;
width: 150px;
}
.front-pg-h1-style {
position: absolute;
font-size: 22px;
font-weight: bold;
line-height: 1.5em;
margin: 450px auto 0;
text-align: center;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
width: 100%;
}
.front-pg-image-box {
background: rgba(255, 255, 255, 1);
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 410px;
left: -40px;
overflow: hidden;
position: absolute;
top: 30px;
transform: rotate(-8deg);
width: 790px;
}
.front-pg-header-image {
left: -50px;
position: relative;
top: -50px;
transform: rotate(8deg);
width: 810px;
}
#top-info-box {
left: calc(50% - 255px);
position: absolute;
top: 680px;
width: 510px;
}
.top-info-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 380px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 210px;
margin: 0 auto 5px;
width: 400px;
}
.top-info-description {
margin: 0 auto;
padding: 10px 0 0;
width: 310px;
}
.top-info-contents-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.2);
height: auto;
margin-bottom: 50px;
padding: 40px 0 0;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 120px solid rgba(255, 255, 255, 0.2);
border-left: 740px solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -120px;
width: 100%;
}
.front-pg-1st-section::after {
border-right: 740px solid transparent;
border-top: 120px solid rgba(255, 255, 255, 0.2);
bottom: -120px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 500px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 35px;
top: 245px;
transform: rotate(-15deg);
width: 140px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 90px;
top: 230px;
transform: rotate(8deg);
width: 160px;
}
.complain-text-style-1 {
font-size: 12px;
left: 7%;
top: 29%;
width: 110px;
}
.complain-text-style-2 {
font-size: 12px;
left: 32%;
top: 13.5%;
width: 80px;
}
.complain-text-style-3 {
font-size: 12px;
left: 21%;
top: 42.5%;
width: 110px;
}
.complain-text-style-4 {
font-size: 15px;
left: 12%;
top: 71%;
width: 120px;
}
.complain-text-style-5 {
font-size: 15px;
left: 52%;
top: 25%;
width: 180px;
}
.complain-text-style-6 {
font-size: 18px;
font-weight: bold;
margin: 0 0 30px;
text-align: center;
}
.complain-text-style-7 {
font-size: 18px;
font-weight: bold;
margin: 30px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-2nd-section {
margin-bottom: 80px;
}
.explanatory-text-style {
margin: 15px auto 50px;
padding: 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-reasons-box {
padding: 0 20px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 50px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
height: 250px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 380px;
}
.image-modification-1 {
position: relative;
top: -50px;
}
.image-modification-2 {
position: relative;
right: 25px;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -30px;
}
.image-modification-4 {
position: relative;
top: -15px;
right: 20px;
width: 400px;
}
.image-modification-5 {
position: relative;
height: 100%;
width: auto;
}
.front-pg-h3-box p {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 20px;
font-style: oblique;
}
.front-pg-reasons-text {
margin-top: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 180px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -120px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 120px solid rgba(24, 24, 24, 0.4);
border-left: 740px solid transparent;
z-index: 100;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -120px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 120px solid rgba(24, 24, 24, 0.4);
border-right: 740px solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 50px 20px 0;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-message-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-message-text p {
color: #fff;
}
.front-pg-4th-section {
margin-bottom: 80px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-cta-text {
padding: 0 20px 20px;
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-cta,
.cta-404pg {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px;
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 160px;
margin-bottom: 10px;
overflow: hidden;
width: calc(100% / 2 - 5px);
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 70px;
}
.cta-caption-1 {
margin: 15px auto 0;
text-align: center;
width: 140px;
}
.cta-caption-2 {
margin: 15px auto 0;
text-align: center;
width: 195px;
}
.cta-caption-3 {
margin: 15px auto 0;
text-align: center;
width: 190px;
}
.main-content-page {
margin-bottom: 0;
margin-left: 0;
padding: 0;
width: 100%;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
background-repeat: no-repeat;
background-size: cover;
height: 220px;
width: 100%;
}
.header-area-common {
margin-top: 60px;
padding: 20px 20px 0;
}
.header-box {
height: 300px;
margin-top: 60px;
overflow: hidden;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 350px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-class-info {
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
height: 350px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.header-box-instructors {
background-color: rgba(0, 0, 0, 0.1);
background-position: 80% 0;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
margin-top: 60px;
padding-top: 110px;
position: relative;
overflow: hidden;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 220px;
}
.header-box-instructors::after {
border-left: 100px solid rgba(0, 0, 0, 0.4);
border-bottom: 300px solid transparent;
content: "";
position: absolute;
top: 0;
left: 220px;
height: 0;
width: 0;
}
.header-box-studios {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
bottom: 20px;
margin: 0 auto;
padding: 20px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
transform: rotate(-3deg) skew(-3deg);
width: 102%;
}
.header-area-archives {
margin-top: 70px;
padding: 20px 20px 0;
}
.main-area {
padding: 30px 20px 0;
}
.main-content {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.content-box {
padding: 0 10px;
}
.class-lineup-box {
margin-bottom: 20px;
margin-right: 15px;
width: calc(50% - 15px);
}
.class-image {
background-repeat: no-repeat;
background-size: cover;
height: 160px;
}
.class-description {
padding: 15px;
}
.class-lineup-link-text {
line-height: 30px;
text-align: center;
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
margin-bottom: 30px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
}
.class-instructor-introduction {
margin-top: 10px;
padding: 0 15px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
text-align: center;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 210px;
margin-bottom: 15px;
width: 100%;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 20px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 5px;
text-align: center;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.contact-area {
padding: 0 20px;
}
.notes-to-join {
padding-left: 10px;
}
.trial-booking-form {
margin-top: 10px;
width: 100%;
}
.iframe-movie-box {
width: 100%;
}
.iframe-lesson-movie {
height: 370px;
margin-bottom: 5px;
width: 100%;
}
.class-detail-info {
margin-bottom: 20px;
padding-bottom: 10px;
}
.detail-info-box {
width: 100%;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
margin-top: 5px;
padding: 8px 15px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
height: 35px;
width: 20%;
}
.info-level {
font-size: 13px;
letter-spacing: -1px;
line-height: 35px;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 13x;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 290px;
margin-bottom: 15px;
margin-right: 10px;
overflow: hidden;
width: calc(50% - 10px);
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 290px;
padding: 15px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
line-height: 30px;
margin: 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 10px;
width: calc(50% - 10px);
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 180px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -5px;
font-size: 16px;
font-weight: bold;
left: 20px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.profile-text-box {
width: 100%;
}
.profile-movie-box {
width: 100%;
}
.iframe-intro-movie {
height: 370px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 185px;
margin-bottom: 20px;
width: 100%;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px 20px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 48%;
}
.own-class-right-col {
width: 48%;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.link-box-blog-inst {
display: block;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 0;
text-decoration: none;
}
.blog-eye-catch {
overflow: hidden;
width: 100%;
}
.blog-thumbnail {
height: 200px;
width: 100%;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 200px;
line-height: 200px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 10px 15px 0;
}
.studio-box-single {
height: 210px;
position: relative;
width: calc(50% - 10px);
}
.studio-box-multiple {
height: 210px;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
width: calc(50% - 10px);
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 180px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px 20px 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 15px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.studio-credit-text {
font-size: 12px;
text-align: right;
}
.studio-credit {
color: #fff;
display: block;
font-size: 12px;
position: absolute;
right: 10px;
top: 10px;
}
.basic-info-box {
width: 100%;
}
.studio-basic-info {
padding: 0 20px;
}
.access-map-box {
height: 300px;
margin: 0 20px;
overflow: hidden;
width: 100%;
}
.direction-steps {
padding-right: 20px;
}
.access-photo-single {
font-size: 0;
height: auto;
margin-bottom: 25px;
margin-top: 2px;
width: calc(100% - 10px);
}
.access-photo-double {
font-size: 0;
height: auto;
margin-bottom: 15px;
margin-top: 2px;
width: calc(100% - 10px);
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
font-size: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 15px;
margin-right: 14px;
width: calc(50% - 14px);
}
.movie-category-text-short {
line-height: 1.4em !important;
padding: 10px 0;
}
.movie-category-text-long {
letter-spacing: -2px;
line-height: 1.4em !important;
padding: 10px 0;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 370px;
width: 100%;
}
.description-box {
padding: 10px 20px 0 10px;
width: 100%;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 49%;
}
.post-thumbnail {
height: 160px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 180px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
margin-bottom: 20px;
margin-right: 10px;
position: relative;
width: calc(50% - 10px);
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 55px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 16px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px 2px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 0;
line-height: 30px;
position: relative;
text-align: center;
width: 100%;
}
.header-area-post-thumbnail {
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin: 0 auto;
padding: 20px;
transform: rotate(-3deg);
max-width: 500px;
}
.header-title-box {
bottom: 0;
padding: 0 20px;
position: absolute;
left: 0;
}
.header-area-post-noimage {
padding: 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 180px;
position: relative;
}
.events-area {
margin-top: 30px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
position: relative;
width: 100%;
}
.events-image {
background-position: middle;
background-size: cover;
background-repeat: no-repeat;
height: 280px;
order: 0;
width: 100%;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 280px;
width: 100%;
}
.events-no-image-text {
font-weight: bold;
line-height: 280px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 40px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin: 15px auto 0;
order: 2;
text-align: justify;
text-justify: inter-ideograph;
width: 405px;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: 300px;
}
.fm-intro {
margin-bottom: 30px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 20px;
}
.fm-movie-box {
width: 100%;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.carnelian-media-intro {
margin-bottom: 30px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 10px;
}
.media-image-box-single {
margin: 0 auto 10px;
}
.media-image-box-double,
.media-image-box-triple {
display: flex;
justify-content: space-between;
margin: 0 auto 10px;
}
.media-image-box-double img {
height: 100%;
width: 49%;
}
.media-image-box-triple img {
height: 100%;
width: 32%;
}
.media-movie-box {
margin: 20px auto 10px;
max-width: 600px;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
height: 300px;
}
.cta-404 {
padding: 0 20px;
}
.list-style-404 {
margin-bottom: 10px;
width: 100%;
}
.from-404 {
text-decoration: none;
}
.footer-area-frontt-pg {
width: 100%;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 5px 0 80px;
}
.footer-item-box-front-pg ul li {
margin-top: 1em;
}
.footer-logo {
height: 50px;
margin: 0 auto;
width: 50px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
.flex-wrap-margin-14 {
display: flex;
flex-wrap: wrap;
margin-right: -14px;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
}
.modified-spacing-2 {
letter-spacing: -1px;
}
.modified-spacing-3 {
letter-spacing: -3.2px;
}
.modified-spacing-4 {
letter-spacing: -2px;
}
.modified-spacing-5 {
letter-spacing: -2.2px;
}
.modified-spacing-8 {
letter-spacing: -1px;
}
.section-margin {
margin-bottom: 40px;
}
.purpose-check {
margin-bottom: 40px;
}
.margin-l-10,
.margin-r-10 {
text-align: center;
width: 48%;
}
.margin-s-10 {
margin: 0 auto;
text-align: center;
}
.front-pg-1st-section h2 {
margin-bottom: 0;
}
.modified-margin-2 {
margin-right: -10px;
}
.modified-margin-3 {
margin-bottom: 6px;
}
.ico-caret-white {
color: #fff;
}
.ico-caret-black {
margin-top: 10px;
}
.ico-check {
margin-top: 10px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.4);
display: block;
padding: 20px 0;
text-decoration: none;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.4);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.link-black {
background-color: rgba(255, 255, 255, 0.5);
display: block;
height: 100%;
text-decoration: none;
}
.link-default {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
}
#breadcrumbs {
margin-top: 40px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
.infinite-scroll-control-area {
padding: 0 20px;
}
.front-pg-campaign-section {
margin: 0 0 150px calc(50% - 375px);
width: 750px;
}
.campaign-comment {
font-size: 18px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 75px;
color: #fff;
font-size: 28px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 40px;
padding: 0 10px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.caution-modal-content {
max-width: 350px;
}
}
@media print, screen and (min-width: 736px) and (max-width: 1023px) {
body {
font-size: 15px;
}
h1 {
font-size: 24px;
}
.fp-h2-break {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 36px;
line-height: 200px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 50px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
margin: 0 -5px;
padding: 65px 0 60px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 140px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview h1 {
color: #fff;
font-size: 36px;
margin: 0;
}
.h1-class-overview p {
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 0;
}
.h1-class-info {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 36px;
margin: 0 -5px;
padding: 30px 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 60px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-instructors {
color: #fff;
font-size: 36px;
margin: 0;
position: relative;
padding-left: 40px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 350px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 36px;
}
.header-area-archives h1 {
border-left: 1px solid #999;
font-size: 36px;
padding: 5px 0 5px 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 15px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
font-size: 28px;
padding: 5px 0 5px 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 15px;
left: -2px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 36px;
margin: 0 -5px;
padding: 50px 0 45px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 45px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 36px;
padding: 10px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
line-height: 1.3em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 20px;
}
.h2-front-pg {
font-size: 22px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 28px;
font-style: oblique;
line-height: 1;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 22px;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: relative;
top: calc(230px / 2 - 45px);
transform: rotate(-3deg) skew(-3deg);
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 12px 0;
}
.h2-content-pg {
border-left: 1px solid #999;
font-size: 22px;
margin-bottom: 0.5em;
padding: 10px 0 0 15px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 15px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-blog-title {
font-size: 18px;
line-height: 1.3em;
margin-bottom: 5px;
}
.h2-events {
border-bottom: 1px dashed #333;
font-size: 20px;
padding-left: 120px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 10px;
margin-top: 5px;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
margin-bottom: 10px;
text-align: justify;
text-justify: inter-ideograph;
}
h3 {
font-size: 18px;
}
.h3-front-pg {
font-size: 20px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
}
.subtitle-instructors {
color: #fff;
font-size: 22px;
font-weight: bold;
margin: 0;
padding-left: 40px;
position: relative;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 350px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
.sub-title {
font-size: 20px;
font-weight: bold;
}
button {
font-size: 15px;
}
.notes-font-size {
font-size: 12px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 490px;
margin: 0 auto;
max-width: 850px;
opacity: 0;
padding: 0 15px;
position: relative;
top: calc(50% - 290px);
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1,
.mobile-nav-item-style-2 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(100% / 3 - 8px);
}
.mobile-nav-item-style-3 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(25% - 9px);
}
.mobile-nav-item-style-4 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(50% - 6px);
}
.mobile-nav-margin-1 {
margin-bottom: 10px;
}
.mobile-nav-margin-2,
.mobile-nav-margin-3 {
margin-bottom: 5px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
2px 2px 3px #fff,
2px -2px 3px #fff,
-2px 2px 3px #fff,
-2px -2px 3px #fff;
}
.mobile-nav-btn-style-1 {
padding-top: 65px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 55px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 50px;
left: calc(50% - 25px);
position: absolute;
top: 5px;
width: 50px;
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 4px;
left: calc(50% - 20px);
position: absolute;
top: 30px;
width: 40px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 0.9em;
font-weight: bold;
}
.notes-margin {
margin-top: 14px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 1.2em;
height: 100px;
margin: 10px auto 0;
padding-top: 55px;
position: relative;
text-align: center;
transform: scale(1);
width: 100px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.mobile-nav-text {
color: #fff;
font-size: 1.2em;
font-weight: bold;
display: block;
height: 100%;
padding-top: 120px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 130px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 110px;
left: 30px;
margin-top: -15px;
position: absolute;
top: -25px;
width: 110px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 170px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 115px;
}
.two-btns {
width: 225px;
}
.three-btns {
width: 335px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 90px;
left: 0;
margin-right: 20px;
opacity: 0;
position: relative;
top: 20px;
width: 90px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
margin-left: -10px;
padding-top: 100px;
position: relative;
text-align: center;
text-decoration: none;
width: 110px;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
margin-left: -16px;
padding-top: 100px;
position: relative;
text-align: center;
text-decoration: none;
width: 120px;
}
.front-pg-header-box {
position: relative;
}
.with-info-box {
height: 1300px;
}
.without-info-box {
height: 850px;
}
.front-pg-header-logo {
width: 200px;
position: absolute;
top: 780px;
left: calc(50% - 100px);
}
.front-pg-h1-style {
position: absolute;
font-size: 24px;
font-weight: bold;
line-height: 1.5em;
top: 600px;
left: 0;
text-align: center;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
width: 100%;
}
.front-pg-image-box {
background: rgba(255, 255, 255, 1);
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 550px;
left: -40px;
overflow: hidden;
position: absolute;
top: -55px;
transform: rotate(-6deg);
width: 1080px;
}
.front-pg-header-image {
left: 0;
position: relative;
top: -50px;
transform: rotate(6deg);
width: 1070px;
}
#top-info-box {
left: calc(50% - 250px);
position: absolute;
top: 905px;
width: 500px;
}
.top-info-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 380px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 210px;
margin: 0 auto 5px;
width: 400px;
}
.top-info-description {
margin: 0 auto;
padding: 10px 0 0;
width: 310px;
}
.top-info-contents-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.2);
height: auto;
margin-bottom: 50px;
padding: 30px 0 10px;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 120px solid rgba(255, 255, 255, 0.2);
border-left: 1023px solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -120px;
width: 100%;
}
.front-pg-1st-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -120px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 120px solid rgba(255, 255, 255, 0.2);
border-right: 1023px solid transparent;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 600px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 35px;
top: 300px;
transform: rotate(-15deg);
width: 170px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 110px;
top: 280px;
transform: rotate(8deg);
width: 200px;
}
.complain-text-style-1 {
left: 35px;
top: 130px;
width: 140px;
}
.complain-text-style-2 {
left: 192px;
top: 60px;
width: 100px;
}
.complain-text-style-3 {
left: 118px;
top: 190px;
width: 150px;
}
.complain-text-style-4 {
font-size: 18px;
left: 45px;
top: 330px;
width: 200px;
}
.complain-text-style-5 {
font-size: 18px;
left: 295px;
top: 120px;
width: 250px;
}
.complain-text-style-6 {
font-size: 18px;
font-weight: bold;
margin: 0 0 35px;
text-align: center;
}
.complain-text-style-7 {
font-size: 18px;
font-weight: bold;
margin: 35px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 30px auto 0;
text-align: justify;
text-justify: inter-ideograph;
width: 660px;
}
.front-pg-2nd-section {
margin-bottom: 100px;
}
.explanatory-text-style {
margin: 15px auto 50px;
text-align: justify;
text-justify: inter-ideograph;
width: 660px;
}
.front-pg-reasons-box {
margin: 0 auto;
max-width: 660px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 80px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.front-pg-reasons-instructors .front-pg-reasons-image {
height: 450px;
float: right;
margin: 0 0 20px 20px;
width: 300px;
}
.image-modification-1 {
position: relative;
top: -25px;
}
.front-pg-reasons-classes .front-pg-reasons-image {
height: 270px;
float: left;
margin: 0 20px 20px 0;
width: 360px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-image {
height: 190px;
float: right;
margin: 0 0 20px 20px;
width: 340px;
}
.front-pg-reasons-students .front-pg-reasons-image {
height: 265px;
float: left;
margin: 0 20px 20px 0;
width: 310px;
}
.front-pg-reasons-request .front-pg-reasons-image {
height: 225px;
float: right;
margin: 0 0 20px 20px;
width: 340px;
}
.front-pg-reasons-event .front-pg-reasons-image {
height: 200px;
float: left;
margin: 0 20px 20px 0;
width: 360px;
}
.front-pg-h3-box {
margin-bottom: 15px;
position: relative;
z-index: 150;
}
.front-pg-reasons-classes .front-pg-h3-box,
.front-pg-reasons-students .front-pg-h3-box,
.front-pg-reasons-event .front-pg-h3-box {
text-align: right;
}
.front-pg-h3-box p {
font-size: 18px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 24px;
font-style: oblique;
}
.front-pg-reasons-text {
text-align: justify;
text-justify: inter-ideograph;
width: 100%;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 180px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -120px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 120px solid rgba(24, 24, 24, 0.4);
border-left: 1023px solid transparent;
z-index: 100;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -120px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 120px solid rgba(24, 24, 24, 0.4);
border-right: 1023px solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 100px 0 50px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-message-text {
margin: 0 auto;
text-align: justify;
text-justify: inter-ideograph;
width: 660px;
}
.front-pg-message-text p {
color: #fff;
}
.front-pg-4th-section {
margin-bottom: 80px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 20px;
}
.front-pg-cta-text {
margin: 0 auto;
padding: 0 0 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 660px;
}
.front-pg-cta,
.cta-404pg {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
width: 660px;
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 185px;
overflow: hidden;
width: calc(100% / 4 - 15px);
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 64px;
}
.cta-caption-1 {
margin: 30px auto;
text-align: center;
width: 140px;
}
.cta-caption-2 {
margin: 20px auto 0;
text-align: center;
width: 140px;
}
.cta-caption-3 {
margin: 20px auto 0;
text-align: center;
width: 140px;
}
.main-content-page {
margin-bottom: 0;
margin-left: 0;
padding: 0;
width: 100%;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
background-repeat: no-repeat;
background-size: cover;
height: 220px;
width: 100%;
}
.header-area-common { margin: 100px auto 0;
max-width: 900px;
padding: 0 40px;
}
.header-box {
height: 300px;
margin-top: 80px;
overflow: hidden;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 500px;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.header-box-class-info {
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.header-box-instructors {
background-color: rgba(0, 0, 0, 0.1);
background-position: 80%;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
margin-top: 80px;
padding-top: 110px;
position: relative;
overflow: hidden;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 280px;
}
.header-box-instructors::after {
border-left: 100px solid rgba(0, 0, 0, 0.4);
border-bottom: 300px solid transparent;
content: "";
position: absolute;
top: 0;
left: 280px;
height: 0;
width: 0;
}
.header-box-studios {
background-color: rgba(0, 0, 0, 0.1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
margin: 0 -5px;
padding: 65px 0 60px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 50px;
transform: rotate(-3deg) skew(-3deg);
}
.header-area-archives {
margin-top: 90px;
padding: 20px 40px 0;
}
.main-area {
margin: 0 auto;
max-width: 900px;
padding: 40px 40px 0;
}
.main-content {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.content-box {
padding: 0 15px;
}
.class-lineup-box {
margin-bottom: 20px;
margin-right: 15px;
width: calc(50% - 15px);
}
.class-image {
background-repeat: no-repeat;
background-size: cover;
height: 230px;
}
.class-description {
padding: 15px;
}
.class-lineup-link-text {
line-height: 30px;
text-align: center;
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
margin-bottom: 40px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
height: 250px;
overflow: hidden;
}
.class-instructor-introduction {
margin-top: 10px;
padding: 0 15px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
text-align: center;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 215px;
margin-bottom: 20px;
width: 49%;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 15px;
padding-bottom: 5px;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 15px;
text-align: center;
width: calc(100% - 30px);
}
.contact-area {
margin: 0 auto;
max-width: 900px;
padding: 0 40px;
}
.notes-to-join {
margin-top: -10px;
padding-left: 10px;
}
.trial-booking-form {
margin-top: 5px;
width: 100%;
}
.iframe-movie-box {
width: 100%;
}
.iframe-lesson-movie {
height: 370px;
margin-bottom: 10px;
width: 100%;
}
.class-detail-info {
margin-bottom: 20px;
padding-bottom: 10px;
}
.detail-info-box {
width: 100%;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
margin-top: 5px;
padding: 8px 15px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
height: 35px;
width: 20%;
}
.info-level {
font-size: 13px;
letter-spacing: -1px;
line-height: 35px;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 13px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 290px;
margin-bottom: 15px;
margin-right: 10px;
overflow: hidden;
width: calc(50% - 10px);
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 290px;
padding: 15px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
line-height: 30px;
margin: 0;
text-align: center;
text-decoration: none;
width: 100%;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 10px;
width: calc(50% - 10px);
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 180px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: -5px;
font-size: 16px;
font-weight: bold;
left: 20px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.profile-text-box {
width: 100%;
}
.profile-movie-box {
width: 100%;
}
.iframe-intro-movie {
height: 370px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 185px;
margin-bottom: 20px;
width: 49%;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 49%;
}
.own-class-right-col {
width: 49%;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
line-height: 30px;
position: absolute;
right: 15px;
text-align: center;
width: calc(100% - 30px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}
.link-box-blog-inst {
display: block;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 0;
text-decoration: none;
}
.blog-box-with-excerpt {
height: 190px;
overflow: hidden;
}
.blog-eye-catch {
overflow: hidden;
width: 34%;
}
.blog-thumbnail {
height: 190px;
width: 300px;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 190px;
line-height: 190px;
padding-left: 10px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 10px 15px 0;
width: 65%;
}
.studio-box-single {
height: 210px;
position: relative;
width: calc(50% - 10px);
}
.studio-box-multiple {
height: 210px;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
width: calc(50% - 10px);
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 180px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 15px 20px 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 15px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.studio-credit-text {
font-size: 12px;
text-align: right;
}
.studio-credit {
color: #fff;
display: block;
font-size: 12px;
position: absolute;
right: 10px;
top: 10px;
}
.basic-info-box {
width: 38%;
}
.studio-basic-info {
padding-left: 15px;
}
.access-map-box {
height: 300px;
overflow: hidden;
width: 58%;
}
.access-direction-box {
margin-left: 6px;
}
.direction-steps {
padding-right: 25px;
}
.access-photo-single {
font-size: 0;
margin-bottom: 25px;
margin-top: 2px;
width: calc(50% - 10px);
}
.access-photo-double {
font-size: 0;
margin-bottom: 5px;
margin-top: 2px;
width: calc(50% - 10px);
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 20px;
margin-right: 14px;
width: calc(50% - 14px);
}
.movie-category-text-short {
line-height: 1.4em !important;
padding: 10px 0;
}
.movie-category-text-long {
letter-spacing: -2px;
line-height: 1.4em !important;
padding: 10px 0;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 20px;
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 250px;
width: 45%;
}
.description-box {
padding: 10px 0 0 20px;
width: 55%;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 32%;
}
.post-thumbnail {
height: 130px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 130px;
line-height: 130px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
margin-bottom: 20px;
margin-right: 10px;
position: relative;
width: calc(50% - 10px);
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 17px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 47px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 17px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px 2px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 0;
line-height: 30px;
position: relative;
text-align: center;
width: 100%;
}
.header-area-post-thumbnail {
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin-left: auto;
padding: 20px;
transform: rotate(-3deg);
max-width: 500px;
}
.header-title-box {
bottom: 20px;
left: 0;
padding: 0 40px;
position: absolute;
}
.header-area-post-noimage {
background-size: cover;
background-repeat: no-repeat;
padding: 30px 40px 20px;
width: 100%;
}
.blog-info-area {
margin: 0 auto;
padding: 0 40px;
max-width: 900px;
}
.anchour-area {
height: 180px;
position: relative;
}
.events-area {
margin-top: 50px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 15px 25px;
position: relative;
width: 100%;
}
.events-image {
background-position: top;
background-size: cover;
background-repeat: no-repeat;
margin-top: 12px;
width: 40%;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 240px;
margin-top: 12px;
width: 40%;
}
.events-no-image-text {
font-weight: bold;
line-height: 240px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 40px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
text-align: justify;
text-justify: inter-ideograph;
width: 55%;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: calc(100% - 85px);
}
.fm-intro {
margin-bottom: 50px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px 25px 10px;
}
.fm-movie-box {
width: 47%;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 50%;
}
.carnelian-media-intro {
margin-bottom: 50px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
padding: 10px 20px 5px;
}
.media-image-box-single {
margin: 0 auto 15px;
}
.media-image-box-double,
.media-image-box-triple {
display: flex;
justify-content: space-between;
margin: 0 auto 15px;
}
.media-image-box-double img {
height: 100%;
width: 49%;
}
.media-image-box-triple img {
height: 100%;
width: 32%;
}
.media-movie-box {
margin: 20px auto 10px;
width: 600px;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
}
.cta-404 {
display: flex;
flex-wrap: wrap;
}
.list-style-404 {
margin-bottom: 10px;
padding: 0 20px;
width: 50%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 10px 0 90px;
}
.footer-item-box-front-pg ul,
.footer-item-box-content-pg ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
.footer-logo {
height: 80px;
margin: 0 auto;
width: 80px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
.flex-wrap-margin-14 {
display: flex;
flex-wrap: wrap;
margin-right: -14px;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
}
.modified-spacing-2 {
letter-spacing: -1px;
}
.modified-spacing-5 {
letter-spacing: -2.2px;
}
.modified-spacing-8 {
letter-spacing: -1px;
}
.section-margin {
margin-bottom: 50px;
}
.purpose-check {
margin-bottom: 50px;
}
.margin-l-10,
.margin-r-10 {
text-align: center;
width: 49%;
}
.margin-s-10 {
text-align: center;
}
.front-pg-1st-section h2 {
margin-bottom: 0;
}
.modified-margin-2 {
margin-right: -10px;
}
.modified-margin-3 {
margin-bottom: 6px;
}
.ico-caret-white {
color: #fff;
font-size: 13px;
}
.ico-caret-black {
margin-top: 10px;
}
.ico-check {
margin-top: 10px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.4);
display: block;
padding: 20px 0;
text-decoration: none;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.4);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
.link-black {
background-color: rgba(255, 255, 255, 0.5);
display: block;
height: 100%;
text-decoration: none;
}
.link-default {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
}
#breadcrumbs {
margin: 40px auto 0;
max-width: 900px;
padding: 0 40px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
.infinite-scroll-control-area {
margin: 0 auto;
padding: 0 40px;
max-width: 900px;
}
.front-pg-campaign-section {
margin: 0 auto 150px;
width: 750px;
}
.campaign-comment {
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 65px;
color: #fff;
font-size: 36px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 50px;
padding: 0 35px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.caution-modal-content {
max-width: 450px;
}
}
@media print, screen and (min-width: 1024px) and (max-width: 1279px) {
body {
font-size: 16px;
}
h1 {
font-size: 32px;
}
.fp-h2-break {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
line-height: 250px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
margin: 0 -5px;
padding: 65px 0 60px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 140px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview h1 {
color: #fff;
font-size: 48px;
margin: 0;
}
.h1-class-overview p {
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 0;
}
.h1-class-info {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 48px;
font-weight: bold;
height: 250px;
padding-top: 50px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-instructors {
color: #fff;
font-size: 48px;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 48px;
font-weight: bold;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.header-area-archives h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
content: "";
position: absolute;
top: 0;
left: -2px;
height: 20px;
width: 3px;
background: rgba(255, 69, 0, 0.8);
}
.header-area-common h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-common h1::after {
content: "";
position: absolute;
top: 0;
left: -2px;
height: 20px;
width: 3px;
background: rgba(255, 69, 0, 0.8);
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
margin: 0 -5px;
padding: 56px 0 52px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 36px;
padding: 10px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
font-size: 36px;
line-height: 1.2em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 24px;
}
.h2-front-pg {
font-size: 30px;
text-align: center;
margin-bottom: 30px;
}
.h2-front-pg .emphasized {
font-size: 45px;
font-style: oblique;
font-weight: normal;
line-height: 1;
}
.h2-content-pg {
border-left: 1px solid #999;
font-size: 30px;
margin-bottom: 1em;
padding: 10px 0 8px 15px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -1.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 20px;
left: 0;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: absolute;
top: 40px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 15px 0;
}
.h2-events {
border-bottom: 1px dashed #333;
font-size: 20px;
padding-left: 150px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 22px;
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
h3 {
font-size: 20px;
}
.h3-front-pg {
font-size: 24px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 17px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
}
.h3-blog-title {
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
.subtitle-instructors {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
button {
font-size: 16px;
}
.notes-font-size {
font-size: 13px;
}
#pc-nav {
display: none;
}
#mobile-nav {
display: block;
position: relative;
}
#mobile-nav-menu {
height: 490px;
margin: 0 auto;
max-width: 850px;
opacity: 0;
padding: 0 15px;
position: relative;
top: calc(50% - 290px);
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1,
.mobile-nav-item-style-2 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(100% / 3 - 8px);
}
.mobile-nav-item-style-3 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(25% - 9px);
}
.mobile-nav-item-style-4 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(50% - 6px);
}
.mobile-nav-margin-1 {
margin-bottom: 10px;
}
.mobile-nav-margin-2,
.mobile-nav-margin-3 {
margin-bottom: 5px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
2px 2px 3px #fff,
2px -2px 3px #fff,
-2px 2px 3px #fff,
-2px -2px 3px #fff;
}
.mobile-nav-btn-style-1 {
padding-top: 65px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 55px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 50px;
left: calc(50% - 25px);
position: absolute;
top: 5px;
width: 50px;
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 4px;
left: calc(50% - 20px);
position: absolute;
top: 30px;
width: 40px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 0.9em;
font-weight: bold;
}
.notes-margin {
margin-top: 14px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 1.2em;
height: 100px;
margin: 10px auto 0;
padding-top: 55px;
position: relative;
text-align: center;
transform: scale(1);
width: 100px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.mobile-nav-text {
color: #fff;
font-size: 1.2em;
font-weight: bold;
display: block;
height: 100%;
padding-top: 120px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 150px;
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 110px;
left: 40px;
margin-top: -20px;
position: absolute;
top: -25px;
width: 110px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#back-btn-box {
bottom: 0;
height: 190px;
padding-top: 10px;
position: fixed;
right: 0;
z-index: 500;
}
.one-btn {
width: 135px;
}
.two-btns {
width: 265px;
}
.three-btns {
width: 395px;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
float: left;
height: 100px;
left: 0;
margin-right: 30px;
opacity: 0;
position: relative;
top: 20px;
width: 100px;
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
position: absolute;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classlineup.png);
height: 75%;
left: 15%;
top: 10%;
width: 75%;
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-timetable.png);
height: 60%;
left: 20%;
top: 18%;
width: 60%;
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-classdetail.png);
height: 64%;
left: 18%;
top: 14%;
width: 64%;
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-allinstructor.png);
height: 70%;
left: 15%;
top: 16%;
width: 70%;
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructor.png);
height: 64%;
left: 18%;
top: 20%;
width: 64%;
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-access.png);
height: 64%;
left: 18%;
top: 15%;
width: 64%;
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-movietop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-blogtop.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-bloglist.png);
height: 60%;
left: 20%;
top: 20%;
width: 60%;
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-lessonblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-instructorblog.png);
height: 80%;
left: 10%;
top: 10%;
width: 80%;
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-event.png);
height: 72%;
left: 14%;
top: 13%;
width: 72%;
}
.back-btn-action {
animation: back-btn-animation 0.3s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.3s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
top: 20px;
}
100% {
opacity: 1;
top: 0;
}
}
.back-btn-text {
color: #fff;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
padding-top: 110px;
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
}
.back-btn-text-2 {
color: #fff;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
margin-left: -17px;
padding-top: 110px;
position: relative;
text-align: center;
text-decoration: none;
width: 130px;
}
.front-pg-header-box {
padding-left: 20px;
position: relative;
}
.with-info-box {
height: 1200px;
}
.without-info-box {
height: 850px;
}
.front-pg-header-logo {
margin: 25px 0 0;
width: 250px;
}
.front-pg-h1-style {
position: relative;
font-size: 38px;
font-weight: bold;
line-height: 1.5em;
margin-top: 50px;
text-align: left;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
z-index: 250;
}
.front-pg-image-box {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 632px;
right: 0;
overflow: hidden;
position: absolute;
top: 100px;
width: 950px;
}
.front-pg-header-image {
width: 950px;
}
#top-info-box {
left: calc(50% - 330px);
position: absolute;
top: 800px;
width: 660px;
}
.top-info-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
line-height: 1.3em;
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 350px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px 0;
width: 100%;
}
.top-info-pic {
height: 180px;
margin: 0 auto 5px;
width: 400px;
}
.top-info-description {
margin: 0 auto;
padding: 10px 0 0;
width: 310px;
}
.top-info-contents-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-info-contents-title-new-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.2);
margin-bottom: 80px;
padding: 50px 0 0;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 300px solid rgba(255, 255, 255, 0.2);
border-left: 100vw solid transparent;
box-sizing: border-box;
content: "";
position: absolute;
height: 0;
left: 0;
top: -300px;
width: 100%;
}
.front-pg-1st-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 300px solid rgba(255, 255, 255, 0.2);
border-right: 100vw solid transparent;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
width: 600px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 35px;
top: 300px;
transform: rotate(-15deg);
width: 180px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 110px;
top: 280px;
transform: rotate(8deg);
width: 210px;
}
.complain-text-style-1 {
left: 35px;
top: 130px;
width: 150px;
}
.complain-text-style-2 {
left: 192px;
top: 60px;
width: 100px;
}
.complain-text-style-3 {
left: 118px;
top: 190px;
width: 150px;
}
.complain-text-style-4 {
font-size: 18px;
left: 45px;
top: 330px;
width: 200px;
}
.complain-text-style-5 {
font-size: 18px;
left: 295px;
top: 120px;
width: 250px;
}
.complain-text-style-6,
.complain-text-style-7 {
font-size: 20px;
font-weight: bold;
margin: 50px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-2nd-section {
margin-bottom: 120px;
}
.explanatory-text-style {
margin: 0 auto 120px;
text-align: center;
width: 720px;
}
.front-pg-reasons-box {
margin: 0 auto;
max-width: 1050px;
width: 80%;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 100px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.front-pg-reasons-instructors .front-pg-reasons-image {
height: 320px;
float: right;
margin: 0 0 20px 40px;
width: 390px;
}
.image-modification-1 {
position: relative;
top: -25px;
}
.front-pg-reasons-classes .front-pg-reasons-image {
height: 250px;
float: left;
margin: 0 40px 20px 0;
width: 400px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-image {
height: 190px;
float: right;
margin: 0 0 20px 40px;
width: 460px;
}
.image-modification-2 {
position: relative;
top: -20px;
}
.front-pg-reasons-students .front-pg-reasons-image {
height: 230px;
float: left;
margin: 0 40px 20px 0;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -90px;
}
.front-pg-reasons-request .front-pg-reasons-image {
height: 210px;
float: right;
margin: 0 0 20px 40px;
width: 420px;
}
.image-modification-4 {
position: relative;
top: -50px;
}
.front-pg-reasons-event .front-pg-reasons-image {
height: 200px;
float: left;
margin: 0 40px 20px 0;
width: 500px;
}
.front-pg-reasons-classes .front-pg-h3-box,
.front-pg-reasons-students .front-pg-h3-box,
.front-pg-reasons-event .front-pg-h3-box {
text-align: right;
}
.front-pg-h3-box {
margin-bottom: 30px;
}
.front-pg-h3-box p {
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 36px;
font-style: oblique;
font-weight: normal;
}
.front-pg-reasons-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 350px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 300px solid rgba(24, 24, 24, 0.4);
border-left: 100vw solid transparent;
z-index: 100;
overflow: hidden;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 300px solid rgba(24, 24, 24, 0.4);
border-right: 100vw solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 140px 0 115px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 40px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-message-text {
margin: 0 auto;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-message-text p {
color: #fff;
font-weight: bold;
line-height: 1.6em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-4th-section {
margin-bottom: 100px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 50px;
}
.front-pg-cta-text {
margin: 0 auto 50px;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-cta,
.cta-404pg {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: calc((230px * 4) + 30px);
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 200px;
overflow: hidden;
width: 230px;
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 96px;
}
.cta-caption-1,
.cta-caption-2,
.cta-caption-3 {
margin-top: 20px;
text-align: center;
width: 195px;
}
.main-content-page {
margin: 0 auto;
padding: 45px 0 0;
width: 900px;
}
.content-container {
left: 0;
position: relative;
}
.header-area {
height: 500px;
width: 100%;
}
.header-area-common {
margin-top: 100px;
}
.header-area-archives {
margin-top: 80px;
}
.header-box {
height: 300px;
margin-top: 80px;
overflow: hidden;
width: 100%;
}
.header-box-instructors {
height: 300px;
overflow: hidden;
margin-top: 80px;
padding-top: 90px;
position: relative;
z-index: 10;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 350px;
}
.header-box-instructors::after {
border-left: 150px solid rgba(0, 0, 0, 0.4);
border-bottom: 300px solid transparent;
content: "";
position: absolute;
top: 0;
left: 350px;
height: 0;
width: 0;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
height: 500px;
margin-top: 80px;
overflow: hidden;
width: 100%;
}
.header-box-class-info {
height: 300px;
margin-top: 80px;
overflow: hidden;
width: 100%;
}
.header-box-studios {
height: 300px;
margin-top: 80px;
overflow: hidden;
position: relative;
width: 100%;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
height: 250px;
margin: 0 -5px;
padding-top: 70px;
position: relative;
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.main-area {
padding: 50px 20px 0;
}
.main-content {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.content-box {
padding: 0 20px;
}
.class-lineup-box {
height: 345px;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.class-image {
background-repeat: no-repeat;
background-size: contain;
height: 180px;
position: relative;
}
.class-description {
height: 165px;
padding: 5px 15px 0;
position: relative;
}
.class-lineup-link-text {
bottom: 15px;
left: 15px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 30px);
}
.feature-list {
margin-bottom: 0.5em;
}
.class-instructor-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
height: 250px;
margin: 0 30px 0 0;
overflow: hidden;
width: 280px;
}
.class-instructor-image img {
height: 100%;
margin-left: calc(50% - 208px);
width: auto;
}
.class-instructor-introduction {
margin-top: 5px;
padding: 0;
width: 510px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
padding-bottom: 5px;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 10px;
width: 400px;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 20px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
left: 20px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.contact-area {
padding: 0 20px;
}
.trial-notes {
width: 380px;
}
.notes-to-join {
padding-left: 10px;
}
.trial-booking-form {
width: 400px;
}
.iframe-movie-box {
width: 400px;
}
.iframe-lesson-movie {
background: rgba(0, 0, 0, 0.3);
height: 280px;
margin-bottom: 0;
width: 100%;
}
.class-detail-info {
margin-bottom: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.detail-info-box {
width: 395px;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
font-size: 15px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
height: 30px;
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 12px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 300px;
margin-bottom: 15px;
margin-right: 16px;
overflow: hidden;
width: 276px;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 300px;
padding: 20px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
font-size: 15px;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
font-size: 15px;
line-height: 30px;
margin: 0 auto;
text-align: center;
text-decoration: none;
width: 236px;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 200px;
position: relative;
}
.blog-category-link-background {
height: 200px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-size: 18px;
font-weight: bold;
left: 15px;
line-height: 40px;
position: absolute;
text-align: center;
width: 246px;
}
.profile-text-box {
width: 460px;
}
.profile-movie-box {
padding-top: 20px;
padding-right: 20px;
width: 370px;
}
.iframe-intro-movie {
background: rgba(0, 0, 0, 0.3);
height: 220px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 20px;
width: 400px;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px 20px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 200px;
}
.own-class-right-col {
width: 160px;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-weight: bold;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
transition: all 0.3s 0s ease;
}
.blog-box-area:hover {
background: rgba(255, 255, 255, 0.5);
}
.link-box-blog-inst {
display: block;
padding: 10px 15px;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 10px 25px;
text-decoration: none;
}
.blog-box-with-excerpt {
height: 160px;
}
.blog-eye-catch {
overflow: hidden;
height: 160px;
width: 240px;
}
.blog-thumbnail {
width: 240px;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 100%;
}
.blog-description {
padding: 0;
width: 530px;
}
.studio-box-single {
height: 216px;
position: relative;
width: 276px;
}
.studio-box-multiple {
height: 216px;
margin-bottom: 10px;
margin-right: 16px;
position: relative;
width: 276px;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 20px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: 236px;
}
.studio-credit-text {
font-size: 10px;
text-align: right;
}
.studio-credit {
color: #fff;
bottom: 10px;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
}
.basic-info-box {
width: 340px;
}
.studio-basic-info {
padding-left: 20px;
}
.access-map-box {
background-color: rgba(0, 0, 0, 0.2);
height: 340px;
margin-right: 20px;
overflow: hidden;
width: 470px;
}
.access-direction-box {
margin-left: 6px;
}
.direction-steps {
padding-right: 35px;
}
.access-photo-single {
font-size: 0;
height: 235px;
margin-bottom: 25px;
margin-top: 2px;
width: 380px;
}
.access-photo-double {
font-size: 0;
height: 235px;
margin-bottom: 5px;
margin-top: 2px;
width: 380px;
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 14px;
width: 264px;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 20px;
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 250px;
width: 400px;
}
.description-box {
padding: 10px 10px 0 0;
width: 390px;
}
.new-post-box {
margin-bottom: 20px;
position: relative;
width: 265px;
}
.post-thumbnail {
height: 175px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 175px;
line-height: 175px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 240px;
margin-bottom: 20px;
margin-right: 16px;
position: relative;
width: calc(788px / 3);
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 55px;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 15px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(788px / 3 - 30px);
}
.header-area-post-thumbnail {
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin-left: auto;
padding: 20px 30px 20px 20px;
transform: rotate(-3deg);
width: 500px;
}
.header-title-box {
bottom: 20px;
left: 0;
padding: 0 20px;
position: absolute;
}
.header-area-post-noimage {
padding: 30px 40px 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 200px;
position: relative;
}
.events-area {
margin-top: 50px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 15px 25px;
position: relative;
width: 100%;
}
.events-image {
background-position: top;
background-size: contain;
background-repeat: no-repeat;
margin-top: 12px;
width: 340px;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 240px;
margin-top: 12px;
width: 340px;
}
.events-no-image-text {
font-weight: bold;
line-height: 240px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 45px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
text-align: justify;
text-justify: inter-ideograph;
width: 440px;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: 355px;
}
.fm-intro {
margin-bottom: 50px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px 25px 10px;
}
.fm-movie-box {
width: 380px;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 400px;
}
.carnelian-media-intro {
margin-bottom: 50px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
padding: 15px 25px 10px;
}
.media-image-box-single {
margin: 0 auto 20px;
}
.media-image-box-double,
.media-image-box-triple {
display: flex;
justify-content: space-between;
margin: 0 auto 20px;
}
.media-image-box-double img {
height: 100%;
width: 49%;
}
.media-image-box-triple img {
height: 100%;
width: 32%;
}
.media-movie-box {
margin: 20px auto 10px;
width: 600px;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
}
.cta-404 {
display: flex;
flex-wrap: wrap;
padding: 0 20px;
}
.list-style-404 {
margin-bottom: 10px;
width: 50%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg,
.footer-area-content-pg {
background-color: rgba(255, 255, 255, 0.3);
padding: 10px 0 90px;
}
.footer-item-box-front-pg ul,
.footer-item-box-content-pg ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
.footer-logo {
height: 80px;
margin: 0 auto;
width: 80px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.flex-wrap-margin-14 {
display: flex;
flex-wrap: wrap;
margin-right: -14px;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.modified-spacing-3 {
letter-spacing: -2.6px;
}
.modified-spacing-4 {
letter-spacing: -1.4px;
}
.modified-spacing-5 {
letter-spacing: -1.8px;
}
.modified-spacing-6 {
letter-spacing: -3.8px;
}
.modified-spacing-8 {
letter-spacing: -1px;
}
.section-margin {
margin-bottom: 80px;
}
.purpose-check {
margin-bottom: 50px;
}
.margin-l-10 {
margin-left: 10px;
}
.margin-r-10 {
margin-right: 10px;
}
.margin-s-10 {
margin: 0 10px;
}
.front-pg-1st-section h2 {
margin-bottom: 50px;
}
.modified-margin-3 {
margin-bottom: 8px;
}
.padding-r-10 {
padding-right: 10px;
}
.ico-caret-white {
color: #fff;
font-size: 15px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.2);
display: block;
padding: 20px;
text-decoration: none;
transition: all 0.5s 0s ease;
}
.link-front-pg-subnav:hover {
background: rgba(255, 255, 255, 0.5);
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s 0s ease;
}
.link-orange:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
transition: all 0.3s 0s ease;
}
.link-orange:hover p:last-child {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.link-orange:hover .icon-orange {
color: rgba(255, 255, 255, 1);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transition: all 0.3s 0s ease;
}
.link-white:hover p:last-child {
background-color: rgba(255, 255, 255, 0.8);
color: rgba(255, 69, 0, 0.8);
}
.link-white:hover .icon-white {
color: rgba(255, 69, 0, 0.8);
}
.link-black {
background-color: rgba(255, 255, 255, 0.2);
display: block;
height: 100%;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.link-black:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.link-box:hover .category-text-class,
.link-box:hover .category-text-instructor {
background-color: rgba(255, 69, 0, 0.6);
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.link-default {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
transition: all 0.3s 0s ease;
}
.link-default:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333;
}
.category-link:hover .icon-red {
color: rgba(255, 69, 0, 0.8);
}
.infobox-link:hover {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.infobox-link:hover::after {
color: rgba(255, 255, 255, 1);
}
#breadcrumbs {
margin-top: 50px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
#breadcrumbs a:hover {
color: rgba(255, 69, 0, 0.8);
}
.infinite-scroll-control-area {
padding: 0 20px;
}
.front-pg-campaign-section {
margin: 0 auto 150px;
width: 750px;
}
.campaign-comment {
font-size: 24px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
width: 750px;
z-index: 500;
}
.narisuta-banner-text {
bottom: 65px;
color: #fff;
font-size: 36px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 50px;
padding: 0 35px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.top-information img {
transform: scale(1);
transition: transform 0.3s 0s ease;
}
.top-information img:hover {
transform: scale(1.05);
}
.caution-modal-content {
max-width: 450px;
}
}
@media print, screen and (min-width: 1280px) and (max-width: 1549px) {
body {
font-size: 16px;
}
h1 {
font-size: 32px;
}
.fp-h2-break {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
line-height: 250px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
margin: 0 -5px;
padding: 65px 0 60px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 140px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview h1 {
color: #fff;
font-size: 48px;
margin: 0;
}
.h1-class-overview p {
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 0;
}
.h1-class-info {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 48px;
height: 250px;
padding-top: 50px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-instructors {
color: #fff;
font-size: 48px;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 48px;
font-weight: bold;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.header-area-archives h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
margin: 0 -5px;
padding: 56px 0 52px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 40px;
line-height: 1.3em;
padding: 10px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
font-size: 36px;
line-height: 1.2em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 24px;
}
.h2-front-pg {
font-size: 30px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 60px;
font-style: oblique;
font-weight: normal;
line-height: 1em;
}
.h2-content-pg {
border-left: 1px solid #999;
font-size: 30px;
margin-bottom: 1em;
padding: 10px 0 8px 15px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -1.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 20px;
left: 0;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: absolute;
top: 40px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 15px 0;
}
.h2-events {
border-bottom: 1px dashed #333;
font-size: 20px;
padding-left: 150px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 22px;
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
h3 {
font-size: 20px;
}
.h3-front-pg {
font-size: 24px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 17px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
}
.h3-blog-title {
font-size: 22px;
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
.subtitle-instructors {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
button {
font-size: 16px;
}
.notes-font-size {
font-size: 13px;
}
#front-pg-nav {
background-color: rgba(255, 69, 0, 0.6);
height: 100px;
position: relative;
width: 100%;
z-index: 150;
}
.front-glnav-box {
display: flex;
justify-content: space-between;
margin: 0 auto;
min-width: 1220px;
width: 86%;
}
.glnav-single,
.glnav-double {
display: block;
text-align: center;
text-decoration: none;
}
.glnav-single {
line-height: 100px;
}
.glnav-double {
padding-top: 26px;
}
.link-front-pg-glnav {
color: #fff;
transition: all 0.5s 0s ease;
}
.link-front-pg-glnav:hover {
color: #333;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
#nav-icons {
display: none;
}
#global-nav-box {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
height: 100vh;
opacity: 1;
position: fixed;
width: 26%;
}
.scroll-bar {
overflow-y: scroll;
}
.global-nav-logo-box {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
margin-top: 20px;
margin-left: auto;
padding-bottom: 20px;
width: 300px;
}
.navigation-logo {
text-align: center;
width: 280px;
}
.navigation-logo img {
width: 250px;
}
.carnelian-description {
font-size: 11px;
font-weight: bold;
line-height: 1.4em;
padding-left: 10px;
}
#global-nav-link-box {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
margin-top: 10px;
margin-left: auto;
padding-bottom: 10px;
width: 300px;
}
.nav-style {
border-left: 0px solid rgba(255, 255, 255, 0.4);
color: #333;
display: block;
line-height: 42px;
margin: 1px 0;
padding-left: 20px;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.nav-style:hover {
background: rgba(255, 255, 255, 0.3);
border-left: 5px solid rgba(255, 255, 255, 0.4);
color: #333;
}
.global-nav-contact-box {
margin-bottom: 30px;
margin-top: 20px;
margin-left: auto;
width: 300px;
}
.contact-text {
font-size: 15px;
padding-left: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 280px;
}
.contact-tel-box,
.contact-mail-box {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
box-sizing: border-box;
width: 260px;
}
.contact-tel-box {
margin: 5px 0 0 20px;
padding: 10px 15px;
}
.contact-mail-box {
margin: 10px 0 0 20px;
}
.contact-tel {
font-size: 18px;
}
.contact-tel-notes {
font-size: 11px;
text-align: justify;
text-justify: inter-ideograph;
}
.link-contactform {
color: #333;
display: block;
line-height: 1.8em;
padding: 10px 15px;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.link-contactform:hover {
background-color: rgba(255, 255, 255, 0.4);
color: #333;
}
#back-btn-box {
bottom: 30px;
display: flex;
flex-direction: column-reverse;
height: 345px;
left: calc(28% + 6% + 900px);
position: fixed;
width: 100px;
z-index: 500;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.8);
color: #333;
display: block;
font-size: 13px;
font-weight: bold;
height: 100px;
left: 30px;
line-height: 1.3em;
margin-top: 15px;
opacity: 0;
position: relative;
text-align: center;
text-decoration: none;
top: 0;
transition: all 0.4s 0s ease;
width: 100px;
}
.back-btn-lineup:hover,
.back-btn-timetable:hover,
.back-btn-overview:hover,
.back-btn-instructor-all:hover,
.back-btn-instructor:hover,
.back-btn-access:hover,
.back-btn-movietop:hover,
.back-btn-blogtop:hover,
.back-btn-bloglist:hover,
.back-btn-lessonblog:hover,
.back-btn-instructorblog:hover,
.back-btn-event:hover {
background-color: rgba(255, 255, 255, 0.8);
color: rgba(255, 69, 0, 0.8);
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: 0 -1.5px;
background-repeat: no-repeat;
background-size: contain;
content: "";
filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.8)) drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.8))
drop-shadow(-1px 1px 1px rgba(255, 255, 255, 0.8)) drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.8));
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-class-list-50.png);
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-timetable-50.png);
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-class-detail-50.png);
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-instructor-all-50.png);
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-instructor-each-50.png);
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-access-50.png);
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-movie-50.png);
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-top-50.png);
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-all-50.png);
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-lesson-50.png);
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-instructor-50.png);
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-event-50.png);
}
.back-btn-text {
color: #333;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
padding-top: 62px;
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
}
.back-btn-text-2 {
color: #333;
display: block;
font-size: 0.9em;
font-weight: bold;
height: 100%;
line-height: 1.3em;
margin-left: -17px;
padding-top: 62px;
position: relative;
text-align: center;
text-decoration: none;
width: 130px;
}
.back-btn-action {
animation: back-btn-animation 0.2s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.05);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.5s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
left: 30px;
}
100% {
opacity: 1;
left: 0;
}
}
.back-btn-fadeout {
animation: back-btn-fadeout 0.2s ease 0s forwards;
}
@keyframes back-btn-fadeout {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
#mobile-nav {
display: none;
position: relative;
}
#mobile-nav.activated {
display: block;
}
#mobile-nav-menu {
height: 490px;
margin: 0 auto;
max-width: 850px;
opacity: 0;
padding: 0 15px;
position: relative;
top: calc(50% - 290px);
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1,
.mobile-nav-item-style-2 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(100% / 3 - 8px);
}
.mobile-nav-item-style-3 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(25% - 9px);
}
.mobile-nav-item-style-4 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(50% - 6px);
}
.mobile-nav-margin-1 {
margin-bottom: 10px;
}
.mobile-nav-margin-2,
.mobile-nav-margin-3 {
margin-bottom: 5px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
2px 2px 3px #fff,
2px -2px 3px #fff,
-2px 2px 3px #fff,
-2px -2px 3px #fff;
}
.mobile-nav-btn-style-1 {
padding-top: 65px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 55px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 50px;
left: calc(50% - 25px);
position: absolute;
top: 5px;
width: 50px;
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 4px;
left: calc(50% - 20px);
position: absolute;
top: 30px;
width: 40px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 0.9em;
font-weight: bold;
}
.notes-margin {
margin-top: 14px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 1.2em;
height: 100px;
margin: 10px auto 0;
padding-top: 55px;
position: relative;
text-align: center;
transform: scale(1);
width: 100px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.mobile-nav-text {
color: #fff;
font-size: 1.2em;
font-weight: bold;
display: block;
height: 100%;
padding-top: 120px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 120px;
left: 0;
position: relative;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 110px;
left: 40px;
margin-top: -20px;
position: absolute;
top: -25px;
width: 110px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.front-pg-header-box {
height: 850px;
margin: 0 auto;
min-width: 1220px;
position: relative;
width: 86%;
}
.front-pg-header-logo {
margin: 25px 0 0;
width: 250px;
}
.front-pg-h1-style {
position: relative;
font-size: 38px;
font-weight: bold;
line-height: 1.5em;
margin-top: 50px;
text-align: left;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
z-index: 150;
}
.front-pg-image-box {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 632px;
right: 0;
overflow: hidden;
position: absolute;
top: 100px;
width: 950px;
}
.front-pg-header-image {
width: 950px;
}
#top-info-box {
left: 0;
position: absolute;
bottom: 120px;
width: 350px;
}
.top-info-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
text-align: left;
}
.top-into-tab-style {
font-size: 14px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
text-shadow:
1px 1px 3px #fff,
1px -1px 3px #fff,
-1px 1px 3px #fff,
-1px -1px 3px #fff;
}
#top-info-content-area {
background-color: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 290px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px;
width: 350px;
}
.top-info-pic {
height: 120px;
margin: 0 auto;
width: 150px;
}
.top-info-description {
margin: 0 auto;
width: 310px;
}
.top-info-contents-title,
.top-info-contents-title-new-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.2);
margin-bottom: 300px;
padding: 50px 0 0;
position: relative;
}
.front-pg-1st-section::before {
border-bottom: 300px solid rgba(255, 255, 255, 0.2);
border-left: 100vw solid transparent;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
top: -300px;
width: 100%;
z-index: 100;
}
.front-pg-1st-section::after {
border-top: 300px solid rgba(255, 255, 255, 0.2);
border-right: 100vw solid transparent;
bottom: -300px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
max-width: 600px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 35px;
top: 300px;
transform: rotate(-15deg);
width: 180px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 110px;
top: 280px;
transform: rotate(8deg);
width: 210px;
}
.complain-text-style-1 {
left: 35px;
top: 130px;
width: 150px;
}
.complain-text-style-2 {
left: 192px;
top: 60px;
width: 100px;
}
.complain-text-style-3 {
left: 118px;
top: 190px;
width: 150px;
}
.complain-text-style-4 {
font-size: 18px;
left: 45px;
top: 330px;
width: 200px;
}
.complain-text-style-5 {
font-size: 18px;
left: 295px;
top: 120px;
width: 250px;
}
.complain-text-style-6,
.complain-text-style-7 {
font-size: 20px;
font-weight: bold;
margin: 70px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-2nd-section {
margin-bottom: 350px;
}
.explanatory-text-style {
margin: 30px auto 120px;
padding: 0;
text-align: center;
width: 720px;
}
.front-pg-reasons-box {
margin: 0 auto;
width: 1050px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 140px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
position: absolute;
top: 10px;
}
.front-pg-reasons-instructors .front-pg-reasons-image {
height: 550px;
right: 0;
width: 390px;
}
.image-modification-1 {
position: relative;
top: -25px;
}
.front-pg-reasons-classes .front-pg-reasons-image {
height: 420px;
left: 0;
width: 510px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-image {
height: 285px;
right: 0;
width: 510px;
}
.front-pg-reasons-students .front-pg-reasons-image {
height: 345px;
left: 0;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -45px;
}
.front-pg-reasons-request .front-pg-reasons-image {
height: 345px;
right: 0;
width: 520px;
}
.front-pg-reasons-event .front-pg-reasons-image {
height: 290px;
left: 0;
width: 520px;
}
.front-pg-reasons-classes .front-pg-h3-box,
.front-pg-reasons-students .front-pg-h3-box,
.front-pg-reasons-event .front-pg-h3-box {
text-align: right;
}
.front-pg-h3-box {
margin-bottom: 30px;
}
.front-pg-h3-box p {
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 36px;
font-style: oblique;
font-weight: normal;
}
.front-pg-reasons-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-reasons-instructors .front-pg-reasons-text {
width: 620px;
}
.front-pg-reasons-classes .front-pg-reasons-text {
margin-left: auto;
width: 500px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-text {
width: 500px;
}
.front-pg-reasons-students .front-pg-reasons-text {
margin-left: auto;
width: 560px;
}
.front-pg-reasons-request .front-pg-reasons-text {
width: 490px;
}
.front-pg-reasons-event .front-pg-reasons-text {
margin-left: auto;
width: 480px;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 350px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 300px solid rgba(24, 24, 24, 0.4);
border-left: 100vw solid transparent;
z-index: 100;
overflow: hidden;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 300px solid rgba(24, 24, 24, 0.4);
border-right: 100vw solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 140px 0 115px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 40px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-message-text {
margin: 0 auto;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-message-text p {
color: #fff;
font-weight: bold;
line-height: 1.6em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-4th-section {
margin-bottom: 100px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 50px;
}
.front-pg-cta-text {
margin: 0 auto 50px;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-cta,
.cta-404pg {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: calc((300px * 3) + 30px);
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 200px;
overflow: hidden;
width: 300px;
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 96px;
}
.cta-caption-1 {
line-height: 48px;
margin-top: 20px;
text-align: center;
}
.cta-caption-2 {
margin: 20px auto 0;
text-align: center;
width: 225px;
}
.cta-caption-3 {
margin: 20px auto 0;
text-align: center;
width: 195px;
}
.main-content-page {
margin-bottom: 0;
margin-left: auto;
padding: 30px 0 0;
width: 74%;
}
.content-container {
left: 0;
opacity: 1;
position: relative;
width: 900px;
}
.header-box {
height: 300px;
overflow: hidden;
width: 100%;
}
.header-box-instructors {
height: 300px;
overflow: hidden;
padding-top: 90px;
position: relative;
z-index: 10;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 350px;
}
.header-box-instructors::after {
border-left: 150px solid rgba(0, 0, 0, 0.4);
border-bottom: 300px solid transparent;
content: "";
position: absolute;
top: 0;
left: 350px;
height: 0;
width: 0;
}
.header-area {
height: 500px;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
height: 500px;
overflow: hidden;
width: 100%;
}
.header-box-class-info {
height: 300px;
overflow: hidden;
width: 100%;
}
.header-box-studios {
height: 300px;
overflow: hidden;
position: relative;
width: 100%;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
height: 250px;
margin: 0 -5px;
padding-top: 70px;
position: relative;
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.main-area {
padding: 50px 20px 0;
}
.main-content {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.content-box {
padding: 0 20px;
}
.class-lineup-box {
height: 345px;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.class-image {
background-repeat: no-repeat;
background-size: contain;
height: 180px;
position: relative;
}
.class-description {
height: 165px;
padding: 5px 15px 0;
position: relative;
}
.class-lineup-link-text {
bottom: 15px;
left: 15px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 30px);
}
.class-instructor-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
height: 250px;
margin: 0 30px 0 0;
overflow: hidden;
width: 280px;
}
.class-instructor-image img {
height: 100%;
margin-left: calc(50% - 208px);
width: auto;
}
.class-instructor-introduction {
margin-top: 5px;
padding: 0;
width: 510px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
padding-bottom: 5px;
text-align: left;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 10px;
width: 400px;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 20px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
left: 20px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.contact-area {
padding: 0 20px;
}
.trial-notes {
width: 380px;
}
.notes-to-join {
margin-top: 10px;
padding-left: 10px;
}
.trial-booking-form {
width: 400px;
}
.iframe-movie-box {
width: 400px;
}
.iframe-lesson-movie {
background: rgba(0, 0, 0, 0.3);
height: 280px;
margin-bottom: 0;
width: 100%;
}
.class-detail-info {
margin-bottom: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.detail-info-box {
width: 395px;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
font-size: 15px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
height: 30px;
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 12px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 300px;
margin-bottom: 15px;
margin-right: 16px;
overflow: hidden;
width: 276px;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 300px;
padding: 20px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
font-size: 15px;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
font-size: 15px;
line-height: 30px;
margin: 0 auto;
text-align: center;
text-decoration: none;
width: 236px;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 200px;
position: relative;
}
.blog-category-link-background {
height: 200px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-size: 18px;
font-weight: bold;
left: 15px;
line-height: 40px;
position: absolute;
text-align: center;
width: 246px;
}
.profile-text-box {
width: 460px;
}
.profile-movie-box {
padding-top: 20px;
padding-right: 20px;
width: 370px;
}
.iframe-intro-movie {
background: rgba(0, 0, 0, 0.3);
height: 220px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 20px;
width: 400px;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px 20px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 200px;
}
.own-class-right-col {
width: 160px;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-weight: bold;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
transition: all 0.3s 0s ease;
}
.blog-box-area:hover {
background: rgba(255, 255, 255, 0.5);
}
.link-box-blog-inst {
display: block;
padding: 10px 15px;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 10px 25px;
text-decoration: none;
}
.blog-box-with-excerpt {
height: 160px;
overflow: hidden;
}
.blog-eye-catch {
overflow: hidden;
width: 240px;
}
.blog-thumbnail {
width: 240px;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 240px;
}
.blog-description {
padding: 0;
width: 530px;
}
.studio-box-single {
height: 216px;
position: relative;
width: 276px;
}
.studio-box-multiple {
height: 216px;
margin-bottom: 10px;
margin-right: 16px;
position: relative;
width: 276px;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 20px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: 236px;
}
.studio-credit-text {
font-size: 10px;
text-align: right;
}
.studio-credit {
color: #fff;
bottom: 10px;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
}
.basic-info-box {
width: 340px;
}
.studio-basic-info {
padding-left: 20px;
}
.access-map-box {
background-color: rgba(0, 0, 0, 0.2);
height: 340px;
margin-right: 20px;
overflow: hidden;
width: 470px;
}
.access-direction-box {
margin-left: 6px;
}
.direction-steps {
padding-right: 20px;
}
.access-photo-single {
font-size: 0;
height: 240px;
margin-bottom: 25px;
margin-top: 2px;
width: 390px;
}
.access-photo-double {
font-size: 0;
height: 240px;
margin-bottom: 5px;
margin-top: 2px;
width: 390px;
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 14px;
width: 264px;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 20px;
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 250px;
width: 400px;
}
.description-box {
padding: 10px 10px 0 0;
width: 390px;
}
.new-post-box {
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 265px;
}
.post-thumbnail {
height: 175px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 175px;
line-height: 175px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 240px;
margin-bottom: 20px;
margin-right: 16px;
position: relative;
width: calc(787.8px / 3);
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 55px;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 15px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(788px / 3 - 30px);
}
.header-area-post-thumbnail {
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin-left: auto;
padding: 20px 30px 20px 20px;
transform: rotate(-3deg);
width: 500px;
}
.header-title-box {
bottom: 20px;
left: 0;
padding: 0 20px;
position: absolute;
}
.header-area-post-noimage {
padding: 30px 40px 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 200px;
position: relative;
}
.events-area {
margin-top: 50px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 15px 25px;
position: relative;
width: 100%;
}
.events-image {
background-position: top;
background-size: contain;
background-repeat: no-repeat;
margin-top: 12px;
width: 340px;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 240px;
margin-top: 12px;
width: 340px;
}
.events-no-image-text {
font-weight: bold;
line-height: 240px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 45px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
text-align: justify;
text-justify: inter-ideograph;
width: 440px;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: 355px;
}
.fm-intro {
margin-bottom: 50px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px 25px 10px;
}
.fm-movie-box {
width: 380px;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 400px;
}
.carnelian-media-intro {
margin-bottom: 50px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
padding: 15px 25px 10px;
}
.media-image-box-single {
margin: 0 auto 20px;
}
.media-image-box-double,
.media-image-box-triple {
display: flex;
justify-content: space-between;
margin: 0 auto 20px;
}
.media-image-box-double img {
height: 100%;
width: 49%;
}
.media-image-box-triple img {
height: 100%;
width: 32%;
}
.media-movie-box {
margin: 20px auto 10px;
width: 600px;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
}
.cta-404 {
display: flex;
flex-wrap: wrap;
padding: 0 20px;
}
.list-style-404 {
margin-bottom: 10px;
width: 50%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg {
background: rgba(255, 255, 255, 0.3);
padding-bottom: 25px;
padding-top: 50px;
width: 100%;
}
.footer-area-content-pg {
margin-left: auto;
width: 74%;
}
.footer-item-box-front-pg {
padding: 0 0 30px;
}
.footer-item-box-content-pg {
padding: 75px 0 100px;
}
.footer-item-box-front-pg ul,
.footer-item-box-content-pg ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
.footer-logo {
height: 80px;
margin: 0 auto;
width: 80px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.flex-wrap-margin-14 {
display: flex;
flex-wrap: wrap;
margin-right: -14px;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.modified-spacing-3 {
letter-spacing: -2.6px;
}
.modified-spacing-4 {
letter-spacing: -1.4px;
}
.modified-spacing-5 {
letter-spacing: -1.8px;
}
.modified-spacing-6 {
letter-spacing: -3.8px;
}
.modified-spacing-8 {
letter-spacing: -1px;
}
.modified-spacing-9 {
letter-spacing: -2px;
}
.section-margin {
margin-bottom: 80px;
}
.purpose-check {
margin-bottom: 50px;
}
.margin-l-10 {
margin-left: 10px;
}
.margin-r-10 {
margin-right: 10px;
}
.margin-s-10 {
margin: 0 10px;
}
.front-pg-1st-section h2 {
margin-bottom: 50px;
}
.modified-margin-3 {
margin-bottom: 8px;
}
.padding-r-10 {
padding-right: 10px;
}
.ico-caret-white {
color: #fff;
font-size: 15px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.2);
display: block;
padding: 20px;
text-decoration: none;
transition: all 0.5s 0s ease;
}
.link-front-pg-subnav:hover {
background: rgba(255, 255, 255, 0.5);
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s 0s ease;
}
.link-orange:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
transition: all 0.3s 0s ease;
}
.link-orange:hover p:last-child {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.link-orange:hover .icon-orange {
color: rgba(255, 255, 255, 1);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transition: all 0.3s 0s ease;
}
.link-white:hover p:last-child {
background-color: rgba(255, 255, 255, 0.8);
color: rgba(255, 69, 0, 0.8);
}
.link-white:hover .icon-white {
color: rgba(255, 69, 0, 0.8);
}
.link-black {
background-color: rgba(255, 255, 255, 0.2);
display: block;
height: 100%;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.link-black:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.link-box:hover .category-text-class,
.link-box:hover .category-text-instructor {
background-color: rgba(255, 69, 0, 0.6);
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.link-default {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
transition: all 0.3s 0s ease;
}
.link-default:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333;
}
.category-link:hover .icon-red {
color: rgba(255, 69, 0, 0.8);
}
.infobox-link:hover {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.infobox-link:hover::after {
color: rgba(255, 255, 255, 1);
}
.feature-list {
margin-bottom: 1em;
}
#breadcrumbs {
margin-top: 50px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
#breadcrumbs a:hover {
color: rgba(255, 69, 0, 0.8);
}
.infinite-scroll-control-area {
padding: 0 20px 50px;
}
.front-pg-campaign-section {
margin: 0 auto 150px;
width: 750px;
}
.campaign-comment {
font-size: 36px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
transition: bottom 0.3s 0s ease;
width: 750px;
z-index: 500;
}
.narisuta-banner-box:hover {
bottom: 5px;
}
.narisuta-banner-text {
bottom: 65px;
color: #fff;
font-size: 36px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 50px;
padding: 0 35px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.top-information img {
transform: scale(1);
transition: transform 0.3s 0s ease;
}
.top-information img:hover {
transform: scale(1.05);
}
.caution-modal-content {
max-width: 450px;
}
}
@media print, screen and (min-width: 1550px) {
body {
font-size: 16px;
}
h1 {
font-size: 32px;
}
.fp-h2-break {
display: none;
} .h1-content-pg {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
line-height: 250px;
margin: 0 -5px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview {
background: rgba(0, 0, 0, 0.4);
margin: 0 -5px;
padding: 65px 0 60px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 140px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-class-overview h1 {
color: #fff;
font-size: 48px;
margin: 0;
}
.h1-class-overview p {
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 0;
}
.h1-class-info {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 48px;
height: 250px;
padding-top: 50px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-instructors {
color: #fff;
font-size: 48px;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.h1-studios {
color: #fff;
font-size: 48px;
font-weight: bold;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.header-area-archives h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-archives h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.header-area-common h1 {
border-left: 1px solid #999;
padding: 10px 0 0 15px;
position: relative;
}
.header-area-common h1::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h1-events {
background: rgba(255, 69, 0, 0.4);
color: #fff;
font-size: 48px;
margin: 0 -5px;
padding: 56px 0 52px;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.h1-preinterview {
background: rgba(255, 69, 0, 0.4);
bottom: 0;
color: #fff;
font-size: 40px;
line-height: 1.3em;
padding: 10px 0;
position: absolute;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 100%;
}
.h1-post {
color: #fff;
font-size: 36px;
line-height: 1.2em;
margin-top: 15px;
text-shadow:
1px 1px 5px rgba(0, 0, 0, 1),
-1px -1px 5px rgba(0, 0, 0, 1),
1px -1px 5px rgba(0, 0, 0, 1),
-1px 1px 5px rgba(0, 0, 0, 1);
}
h2 {
font-size: 24px;
}
.h2-front-pg {
font-size: 30px;
text-align: center;
}
.h2-front-pg .emphasized {
font-size: 60px;
font-style: oblique;
font-weight: normal;
line-height: 1;
}
.h2-content-pg {
border-left: 1px solid #999;
font-size: 30px;
margin-bottom: 1em;
padding: 10px 0 8px 15px;
position: relative;
}
.h2-content-pg::after {
background: rgba(255, 69, 0, 0.8);
content: "";
height: 20px;
left: -2.5px;
position: absolute;
top: 0;
width: 3px;
}
.h2-lineup-single,
.h2-lineup-double {
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 20px;
left: 0;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
position: absolute;
top: 40px;
transform: rotate(-3deg) skew(-3deg);
width: 100%;
}
.h2-lineup-single {
line-height: 90px;
}
.h2-lineup-double {
padding: 15px 0;
}
.h2-events {
border-bottom: 1px dashed #333;
font-size: 20px;
padding-left: 150px;
width: 100%;
}
.h2-fm-carnelian {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
}
.h2-carnelian-media {
border-bottom: 1px dashed #333;
font-size: 22px;
margin-bottom: 1em;
text-align: justify;
text-justify: inter-ideograph;
}
.h2-blog-title {
font-size: 22px;
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
h3 {
font-size: 20px;
}
.h3-front-pg {
font-size: 24px;
}
.h3-time-table-style {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 17px;
}
.h3-own-class-info {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
}
.h3-blog-title {
font-size: 22px;
line-height: 1.3em;
margin-bottom: 5px;
margin-top: 2px;
}
.subtitle-instructors {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
width: 425px;
z-index: 50;
}
.subtitle-studios {
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
button {
font-size: 16px;
}
.notes-font-size {
font-size: 13px;
}
#front-pg-nav {
background-color: rgba(255, 69, 0, 0.6);
height: 100px;
position: relative;
width: 100%;
z-index: 150;
}
.front-glnav-box {
display: flex;
justify-content: space-between;
margin: 0 auto;
min-width: 1320px;
width: 75%;
}
.link-front-pg-glnav {
color: #fff;
transition: all 0.5s 0s ease;
}
.link-front-pg-glnav:hover {
color: #333;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
#nav-icons {
display: none;
}
#global-nav-box {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
height: 100vh;
opacity: 1;
position: fixed;
width: 28%;
}
.scroll-bar {
overflow-y: scroll;
}
.global-nav-logo-box {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
margin-top: 20px;
margin-left: auto;
padding-bottom: 20px;
width: 315px;
}
.glnav-single,
.glnav-double {
display: block;
text-align: center;
text-decoration: none;
}
.glnav-single {
line-height: 100px;
}
.glnav-double {
padding-top: 26px;
}
.navigation-logo {
text-align: center;
width: 280px;
}
.navigation-logo img {
width: 250px;
}
.carnelian-description {
font-size: 11px;
font-weight: bold;
line-height: 1.4em;
padding-left: 10px;
}
#global-nav-link-box {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
margin-top: 10px;
margin-left: auto;
padding-bottom: 10px;
width: 315px;
}
.nav-style {
border-left: 0px solid rgba(255, 255, 255, 0.4);
color: #333;
display: block;
line-height: 43px;
margin: 1px 0;
padding-left: 20px;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.nav-style:hover {
background: rgba(255, 255, 255, 0.3);
border-left: 5px solid rgba(255, 255, 255, 0.4);
color: #333;
}
.global-nav-contact-box {
margin-bottom: 30px;
margin-top: 20px;
margin-left: auto;
width: 315px;
}
.contact-text {
font-size: 15px;
padding-left: 20px;
text-align: justify;
text-justify: inter-ideograph;
width: 280px;
}
.contact-tel-box,
.contact-mail-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
box-sizing: border-box;
width: 260px;
}
.contact-tel-box {
margin: 5px 0 0 20px;
padding: 10px 15px;
}
.contact-mail-box {
margin: 10px 0 0 20px;
transition: all 0.4s 0s ease;
}
.contact-tel {
font-size: 18px;
}
.contact-tel-notes {
font-size: 11px;
text-align: justify;
text-justify: inter-ideograph;
}
.link-contactform {
color: #333;
display: block;
line-height: 1.8em;
padding: 10px 15px;
text-decoration: none;
text-shadow: none;
transition: all 0.5s 0s ease;
}
.link-contactform:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333;
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
#back-btn-box {
bottom: 30px;
display: flex;
flex-direction: column-reverse;
height: 345px;
left: calc(28% + 6% + 900px);
position: fixed;
width: 100px;
z-index: 500;
}
.back-btn-lineup,
.back-btn-timetable,
.back-btn-overview,
.back-btn-instructor-all,
.back-btn-instructor,
.back-btn-access,
.back-btn-movietop,
.back-btn-blogtop,
.back-btn-bloglist,
.back-btn-lessonblog,
.back-btn-instructorblog,
.back-btn-event,
.back-btn {
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.8);
color: #333;
display: block;
font-size: 13px;
font-weight: bold;
height: 100px;
left: 30px;
line-height: 1.3em;
margin-top: 15px;
opacity: 0;
position: relative;
text-align: center;
text-decoration: none;
top: 0;
transition: all 0.4s 0s ease;
width: 100px;
}
.back-btn-lineup:hover,
.back-btn-timetable:hover,
.back-btn-overview:hover,
.back-btn-instructor-all:hover,
.back-btn-instructor:hover,
.back-btn-access:hover,
.back-btn-movietop:hover,
.back-btn-blogtop:hover,
.back-btn-bloglist:hover,
.back-btn-lessonblog:hover,
.back-btn-instructorblog:hover,
.back-btn-event:hover {
background-color: rgba(255, 255, 255, 0.8);
color: rgba(255, 69, 0, 0.8);
}
.back-btn-lineup::before,
.back-btn-timetable::before,
.back-btn-overview::before,
.back-btn-instructor-all::before,
.back-btn-instructor::before,
.back-btn-access::before,
.back-btn-movietop::before,
.back-btn-blogtop::before,
.back-btn-bloglist::before,
.back-btn-lessonblog::before,
.back-btn-instructorblog::before,
.back-btn-event::before {
background-position: 0 -1.5px;
background-repeat: no-repeat;
background-size: contain;
content: "";
filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.8)) drop-shadow(1px -1px 1px rgba(255, 255, 255, 0.8))
drop-shadow(-1px 1px 1px rgba(255, 255, 255, 0.8)) drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.8));
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.back-btn-lineup::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-class-list-50.png);
}
.back-btn-timetable::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-timetable-50.png);
}
.back-btn-overview::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-class-detail-50.png);
}
.back-btn-instructor-all::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-instructor-all-50.png);
}
.back-btn-instructor::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-instructor-each-50.png);
}
.back-btn-access::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-access-50.png);
}
.back-btn-movietop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-movie-50.png);
}
.back-btn-blogtop::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-top-50.png);
}
.back-btn-bloglist::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-all-50.png);
}
.back-btn-lessonblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-lesson-50.png);
}
.back-btn-instructorblog::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-blog-instructor-50.png);
}
.back-btn-event::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ico-event-50.png);
}
.back-btn-text {
color: #333;
display: block;
font-weight: bold;
height: 100%;
line-height: 1.3em;
padding-top: 62px;
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
}
.back-btn-text-2 {
color: #333;
display: block;
font-size: 0.9em;
font-weight: bold;
height: 100%;
line-height: 1.3em;
margin-left: -17px;
padding-top: 62px;
position: relative;
text-align: center;
text-decoration: none;
width: 130px;
}
.back-btn-action {
animation: back-btn-animation 0.2s ease 0s forwards;
}
@keyframes back-btn-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1.05);
}
100% {
transform: scale(0);
}
}
.back-btn-fadein {
animation: back-btn-fadein 0.5s ease 0s forwards;
}
@keyframes back-btn-fadein {
0% {
opacity: 0;
left: 30px;
}
100% {
opacity: 1;
left: 0;
}
}
.back-btn-fadeout {
animation: back-btn-fadeout 0.2s ease 0s forwards;
}
@keyframes back-btn-fadeout {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
#mobile-nav {
display: none;
position: relative;
}
#mobile-nav.activated {
display: block;
}
#mobile-nav-menu {
height: 490px;
margin: 0 auto;
max-width: 850px;
opacity: 0;
padding: 0 15px;
position: relative;
top: calc(50% - 290px);
}
#mobile-nav-menu.menu-displayed {
opacity: 1;
}
.mobile-nav-item-style-1,
.mobile-nav-item-style-2 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(100% / 3 - 8px);
}
.mobile-nav-item-style-3 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(25% - 9px);
}
.mobile-nav-item-style-4 {
background-color: rgba(255, 255, 255, 0.6);
height: 100px;
width: calc(50% - 6px);
}
.mobile-nav-margin-1 {
margin-bottom: 10px;
}
.mobile-nav-margin-2,
.mobile-nav-margin-3 {
margin-bottom: 5px;
}
.mobile-nav-btn-style-1,
.mobile-nav-btn-style-2 {
border: 1px solid #fff;
color: #333;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-shadow:
2px 2px 3px #fff,
2px -2px 3px #fff,
-2px 2px 3px #fff,
-2px -2px 3px #fff;
}
.mobile-nav-btn-style-1 {
padding-top: 65px;
width: 100%;
}
.mobile-nav-btn-style-2 {
line-height: 1.2em;
padding-top: 55px;
width: 100%;
}
.mobile-nav-btn-home::before,
.mobile-nav-btn-classlineup::before,
.mobile-nav-btn-instructor::before,
.mobile-nav-btn-timetable::before,
.mobile-nav-btn-price::before,
.mobile-nav-btn-access::before,
.mobile-nav-btn-movie::before,
.mobile-nav-btn-blog::before,
.mobile-nav-btn-event::before,
.mobile-nav-btn-media::before,
.mobile-nav-btn-fmc::before,
.mobile-nav-btn-questionnaire::before,
.mobile-nav-btn-tel::before,
.mobile-nav-btn-form::before {
background-size: contain;
background-repeat: no-repeat;
content: "";
height: 50px;
left: calc(50% - 25px);
position: absolute;
top: 5px;
width: 50px;
}
#mobile-menu-close-btn::before,
#mobile-menu-close-btn::after {
background-color: #fff;
content: "";
height: 4px;
left: calc(50% - 20px);
position: absolute;
top: 30px;
width: 40px;
}
#mobile-menu-close-btn::before {
transform: rotate(45deg);
}
#mobile-menu-close-btn::after {
transform: rotate(-45deg);
}
.mobile-nav-contact {
font-weight: bold;
margin-bottom: 3px;
text-align: center;
}
.mobile-nav-contact-notes {
font-size: 0.9em;
font-weight: bold;
}
.notes-margin {
margin-top: 14px;
}
#mobile-menu-close-btn {
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 1.2em;
height: 100px;
margin: 10px auto 0;
padding-top: 55px;
position: relative;
text-align: center;
transform: scale(1);
width: 100px;
}
.mobile-menu-close {
animation: mobile-menu-close 0.2s ease 0s forwards;
}
@keyframes mobile-menu-close {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.mobile-nav-text {
color: #fff;
font-size: 1.2em;
font-weight: bold;
display: block;
height: 100%;
padding-top: 120px;
position: relative;
text-align: center;
width: 100%;
}
#bottom-nav-area {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
height: 120px;
left: 0;
position: relative;
width: 100%;
z-index: 500;
}
.mobile-nav-btn {
background-image: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
border-radius: 50%;
cursor: pointer;
}
.mobile-menu {
height: 110px;
left: 40px;
margin-top: -20px;
position: absolute;
top: -25px;
width: 110px;
}
.mobile-menu::before {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/back-btn-menu.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff) drop-shadow(-1px 1px 1px #fff)
drop-shadow(-1px -1px 1px #fff);
height: 45%;
left: 27%;
top: 26%;
position: absolute;
width: 45%;
}
#bottom-nav-area .mobile-nav-btn.mobile-menu-activate {
animation: mobile-menu-activate 0.3s ease 0s forwards;
}
@keyframes mobile-menu-activate {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
.front-pg-header-box {
height: 850px;
margin: 0 auto;
min-width: 1320px;
position: relative;
width: 75%;
}
.front-pg-header-logo {
margin: 75px 0 0;
width: 250px;
}
.front-pg-h1-style {
position: relative;
font-size: 38px;
font-weight: bold;
line-height: 1.5em;
margin-top: 50px;
text-align: left;
text-shadow:
1px 1px 5px #fff,
1px -1px 5px #fff,
-1px 1px 5px #fff,
-1px -1px 5px #fff;
z-index: 150;
}
.front-pg-image-box {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.1),
3px -3px 5px rgba(0, 0, 0, 0.1),
-3px 3px 5px rgba(0, 0, 0, 0.1),
-3px -3px 5px rgba(0, 0, 0, 0.1);
height: 632px;
right: 0;
overflow: hidden;
position: absolute;
top: 150px;
width: 950px;
}
.front-pg-header-image {
width: 950px;
}
#top-info-box {
left: 0;
position: absolute;
bottom: 68px;
width: 350px;
}
.top-info-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.top-into-tab-style {
font-size: 14px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
padding: 8px 4px 4px;
text-align: center;
}
#top-info-content-area {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.8);
height: 290px;
overflow: hidden;
width: 100%;
}
.top-info-contents {
padding: 10px;
width: 350px;
}
.top-info-pic {
height: 120px;
margin: 0 auto;
width: 150px;
}
.top-info-description {
margin: 0 auto;
width: 310px;
}
.top-info-contents-title,
.top-info-contents-title-new-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 10px;
text-align: center;
}
.top-info-contents-item-1,
.top-info-contents-item-2 {
display: flex;
justify-content: space-between;
width: 45px;
}
.top-info-contents-value-1,
.top-info-contents-value-2 {
text-align: justify;
text-justify: inter-ideograph;
width: calc(100% - 65px);
}
.front-pg-1st-section {
background: rgba(255, 255, 255, 0.3);
margin-bottom: 300px;
padding: 50px 0 0;
position: relative;
}
.front-pg-1st-section::before {
content: "";
position: absolute;
width: 100%;
top: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 300px solid rgba(255, 255, 255, 0.3);
border-left: 100vw solid transparent;
z-index: 100;
}
.front-pg-1st-section::after {
border-top: 300px solid rgba(255, 255, 255, 0.3);
border-right: 100vw solid transparent;
bottom: -300px;
box-sizing: border-box;
content: "";
height: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.front-pg-complain-image {
position: relative;
margin: 0 auto;
max-width: 600px;
}
.complain-man-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 35px;
top: 300px;
transform: rotate(-15deg);
width: 180px;
}
.complain-lady-style {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
position: absolute;
right: 110px;
top: 280px;
transform: rotate(8deg);
width: 210px;
}
.complain-text-style-1 {
left: 35px;
top: 130px;
width: 150px;
}
.complain-text-style-2 {
left: 192px;
top: 60px;
width: 100px;
}
.complain-text-style-3 {
left: 118px;
top: 190px;
width: 150px;
}
.complain-text-style-4 {
font-size: 18px;
left: 45px;
top: 330px;
width: 200px;
}
.complain-text-style-5 {
font-size: 18px;
left: 295px;
top: 120px;
width: 250px;
}
.complain-text-style-6,
.complain-text-style-7 {
font-size: 20px;
font-weight: bold;
margin: 70px 0;
text-align: center;
}
.front-pg-complain-text {
margin: 0 auto;
padding: 0;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-2nd-section {
margin-bottom: 350px;
}
.explanatory-text-style {
margin: 30px auto 120px;
padding: 0;
text-align: center;
width: 720px;
}
.front-pg-reasons-box {
margin: 0 auto;
width: 1050px;
}
.front-pg-reasons-instructors,
.front-pg-reasons-classes,
.front-pg-reasons-satisfaction,
.front-pg-reasons-students,
.front-pg-reasons-request {
margin-bottom: 140px;
position: relative;
}
.front-pg-reasons-image {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
0 0.5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
position: absolute;
top: 10px;
}
.front-pg-reasons-instructors .front-pg-reasons-image {
height: 550px;
right: 0;
width: 390px;
}
.image-modification-1 {
position: relative;
top: -25px;
}
.front-pg-reasons-classes .front-pg-reasons-image {
height: 420px;
left: 0;
width: 510px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-image {
height: 285px;
right: 0;
width: 510px;
}
.front-pg-reasons-students .front-pg-reasons-image {
height: 345px;
left: 0;
width: 450px;
}
.image-modification-3 {
position: relative;
top: -45px;
}
.front-pg-reasons-request .front-pg-reasons-image {
height: 345px;
right: 0;
width: 520px;
}
.front-pg-reasons-event .front-pg-reasons-image {
height: 290px;
left: 0;
width: 520px;
}
.front-pg-reasons-classes .front-pg-h3-box,
.front-pg-reasons-students .front-pg-h3-box,
.front-pg-reasons-event .front-pg-h3-box {
text-align: right;
}
.front-pg-h3-box {
margin-bottom: 30px;
}
.front-pg-h3-box p {
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
.front-pg-h3-box p span {
font-size: 36px;
font-style: oblique;
font-weight: normal;
}
.front-pg-reasons-text {
text-align: justify;
text-justify: inter-ideograph;
}
.front-pg-reasons-instructors .front-pg-reasons-text {
width: 620px;
}
.front-pg-reasons-classes .front-pg-reasons-text {
margin-left: auto;
width: 500px;
}
.front-pg-reasons-satisfaction .front-pg-reasons-text {
width: 500px;
}
.front-pg-reasons-students .front-pg-reasons-text {
margin-left: auto;
width: 560px;
}
.front-pg-reasons-request .front-pg-reasons-text {
width: 490px;
}
.front-pg-reasons-event .front-pg-reasons-text {
margin-left: auto;
width: 480px;
}
.front-pg-3rd-section {
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/tesuto.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 350px;
position: relative;
}
.front-pg-3rd-section::before {
content: "";
position: absolute;
width: 100%;
top: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-bottom: 300px solid rgba(24, 24, 24, 0.4);
border-left: 100vw solid transparent;
z-index: 100;
overflow: hidden;
}
.front-pg-3rd-section::after {
content: "";
position: absolute;
width: 100%;
bottom: -300px;
left: 0;
height: 0;
box-sizing: border-box;
border-top: 300px solid rgba(24, 24, 24, 0.4);
border-right: 100vw solid transparent;
z-index: -1;
}
.front-pg-message-box {
background: rgba(24, 24, 24, 0.4);
padding: 140px 0 115px;
}
.front-pg-message-box .h2-front-pg {
margin-bottom: 40px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-message-text {
margin: 0 auto;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-message-text p {
color: #fff;
font-weight: bold;
line-height: 1.6em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.front-pg-4th-section {
margin-bottom: 100px;
}
.front-pg-4th-section .h2-front-pg {
margin-bottom: 50px;
}
.front-pg-cta-text {
margin: 0 auto 50px;
text-align: justify;
text-justify: inter-ideograph;
width: 620px;
}
.front-pg-cta,
.cta-404pg {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: calc((300px * 4) + 30px);
}
.cta-box {
border: 1px solid rgba(255, 255, 255, 0.8);
height: 200px;
overflow: hidden;
width: 300px;
}
.cta-icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 96px;
}
.cta-caption-1 {
line-height: 48px;
margin-top: 20px;
text-align: center;
}
.cta-caption-2 {
margin: 20px auto 0;
text-align: center;
width: 225px;
}
.cta-caption-3 {
margin: 20px auto 0;
text-align: center;
width: 195px;
}
.main-content-page {
margin-left: auto;
padding: 30px 0 0;
width: 72%;
}
.content-container {
left: 0;
opacity: 1;
position: relative;
width: 900px;
}
.header-area-default {
background-color: rgba(255, 255, 255, 0.3);
height: 300px;
width: 100%;
}
.header-box {
height: 300px;
overflow: hidden;
width: 100%;
}
.header-box-instructors {
height: 300px;
overflow: hidden;
padding-top: 90px;
position: relative;
z-index: 10;
}
.header-box-instructors::before {
background-color: rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 350px;
}
.header-box-instructors::after {
border-left: 150px solid rgba(0, 0, 0, 0.4);
border-bottom: 300px solid transparent;
content: "";
position: absolute;
top: 0;
left: 350px;
height: 0;
width: 0;
}
.header-area {
height: 500px;
width: 100%;
}
.header-box-class-overview {
background-color: rgba(0, 0, 0, 0.1);
height: 500px;
overflow: hidden;
width: 100%;
}
.header-box-class-info {
height: 300px;
overflow: hidden;
width: 100%;
}
.header-box-studios {
height: 300px;
overflow: hidden;
position: relative;
width: 100%;
}
.content-pg-title-box {
background-color: rgba(0, 0, 0, 0.4);
height: 250px;
margin: 0 -5px;
padding-top: 70px;
position: relative;
top: 25px;
transform: rotate(-3deg) skew(-3deg);
}
.main-area {
padding: 50px 20px 0;
}
.main-content {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.content-box {
padding: 0 20px;
}
.class-lineup-box {
height: 345px;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.class-image {
background-repeat: no-repeat;
background-size: contain;
height: 180px;
position: relative;
}
.class-description {
height: 165px;
padding: 5px 15px 0;
position: relative;
}
.class-lineup-link-text {
bottom: 15px;
left: 15px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 30px);
}
.class-instructor-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.class-instructor-image {
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 0;
height: 250px;
margin: 0 30px 0 0;
overflow: hidden;
width: 280px;
}
.class-instructor-image img {
height: 100%;
margin-left: calc(50% - 208px);
width: auto;
}
.class-instructor-introduction {
margin-top: 5px;
padding: 0;
width: 510px;
}
.class-instructor-name {
border-bottom: 1px dashed #000;
padding-bottom: 5px;
text-align: left;
}
.class-detail-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 10px;
width: 400px;
}
.to-detail {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
padding: 15px 20px;
position: relative;
}
.to-detail-header {
border-bottom: 1px dashed #fff;
color: #fff;
font-size: 16px;
line-height: 1.4em;
margin-bottom: 8px;
padding-bottom: 5px;
}
.to-detail-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
left: 20px;
line-height: 30px;
position: absolute;
text-align: center;
width: calc(100% - 40px);
}
.contact-area {
padding: 0 20px;
}
.trial-notes {
width: 380px;
}
.notes-to-join {
margin-top: 10px;
padding-left: 10px;
}
.trial-booking-form {
width: 400px;
}
.iframe-movie-box {
width: 400px;
}
.iframe-lesson-movie {
background: rgba(0, 0, 0, 0.3);
height: 280px;
margin-bottom: 0;
width: 100%;
}
.class-detail-info {
margin-bottom: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.detail-info-box {
width: 395px;
}
.info-comment {
background-color: rgba(255, 69, 0, 0.2);
border-radius: 5px;
font-size: 15px;
margin-top: 5px;
padding: 5px 10px;
}
.comment-pos::after {
border-top: 15px solid rgba(255, 69, 0, 0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
left: calc(50% - 10px);
position: absolute;
top: -15px;
}
.level-indicator {
height: 30px;
width: 20%;
}
.info-level {
font-size: 12px;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
.info-footer {
display: inline-block;
font-size: 12px;
}
.time-table-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
height: 300px;
margin-bottom: 15px;
margin-right: 16px;
overflow: hidden;
width: 276px;
}
.class-info {
background-color: rgba(0, 0, 0, 0.6);
height: 300px;
padding: 20px 20px;
position: relative;
width: 100%;
}
.time-table-list li {
color: #fff;
font-size: 15px;
line-height: 1.8em;
}
.time-table-link-text {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
display: block;
font-size: 15px;
line-height: 30px;
margin: 0 auto;
text-align: center;
text-decoration: none;
width: 236px;
}
.instructor-box,
.blog-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 30px;
margin-right: 16px;
width: 276px;
}
.instructor-link-background {
background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7) 90%);
height: 200px;
position: relative;
}
.blog-category-link-background {
height: 200px;
position: relative;
}
.instructor-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-size: 18px;
font-weight: bold;
left: 15px;
line-height: 40px;
position: absolute;
text-align: center;
width: 246px;
}
.profile-text-box {
width: 460px;
}
.profile-movie-box {
padding-top: 20px;
padding-right: 20px;
width: 370px;
}
.iframe-intro-movie {
background: rgba(0, 0, 0, 0.3);
height: 220px;
width: 100%;
}
.own-class-box {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
margin-bottom: 20px;
width: 400px;
}
.own-class-info {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 15px 20px;
position: relative;
text-decoration: none;
}
.own-class-left-col {
width: 200px;
}
.own-class-right-col {
width: 160px;
}
.own-class-link-text {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 0;
font-weight: bold;
line-height: 30px;
position: absolute;
right: 20px;
text-align: center;
width: calc(100% - 40px);
}
.blog-box-area {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
transition: all 0.3s 0s ease;
}
.blog-box-area:hover {
background: rgba(255, 255, 255, 0.5);
}
.link-box-blog-inst {
display: block;
padding: 10px 15px;
text-decoration: none;
}
.link-box-blog {
display: block;
padding: 10px 25px;
text-decoration: none;
}
.blog-box-with-excerpt {
height: 160px;
overflow: hidden;
}
.blog-eye-catch {
overflow: hidden;
width: 240px;
}
.blog-thumbnail {
width: 240px;
}
.blog-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 160px;
line-height: 160px;
text-align: center;
width: 240px;
}
.blog-description {
padding: 0;
width: 530px;
}
.studio-box-single {
height: 216px;
position: relative;
width: 276px;
}
.studio-box-multiple {
height: 216px;
margin-bottom: 10px;
margin-right: 16px;
position: relative;
width: 276px;
}
.studio-info {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
overflow: hidden;
}
.studio-description {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
padding: 20px;
position: relative;
}
.studio-access {
color: #fff;
line-height: 1.6em;
margin-top: 20px;
}
.studio-link-text {
bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
left: 20px;
line-height: 30px;
margin: 0;
position: absolute;
text-align: center;
width: 236px;
}
.studio-credit-text {
font-size: 10px;
text-align: right;
}
.studio-credit {
color: #fff;
bottom: 10px;
display: block;
font-size: 10px;
position: absolute;
right: 10px;
}
.basic-info-box {
width: 340px;
}
.studio-basic-info {
padding-left: 20px;
}
.access-map-box {
background-color: rgba(0, 0, 0, 0.2);
height: 340px;
margin-right: 20px;
overflow: hidden;
width: 470px;
}
.access-direction-box {
margin-left: 6px;
}
.direction-steps {
padding-right: 20px;
}
.access-photo-single {
font-size: 0;
height: 240px;
margin-bottom: 25px;
margin-top: 2px;
width: 390px;
}
.access-photo-double {
font-size: 0;
height: 240px;
margin-bottom: 5px;
margin-top: 2px;
width: 390px;
}
.new-item {
background: rgba(255, 69, 0, 0.6);
border-radius: 10px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin-right: 5px;
padding: 0 8px;
position: relative;
top: -1px;
}
.movie-category-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
margin-right: 14px;
width: 264px;
}
.scroll-box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 20px;
margin-bottom: 20px;
}
.movie-box {
background: rgba(255, 255, 255, 0.2);
height: 250px;
width: 400px;
}
.description-box {
padding: 10px 10px 0 0;
width: 390px;
}
.new-post-box {
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 265px;
}
.post-thumbnail {
height: 175px;
overflow: hidden;
width: 100%;
}
.post-no-image {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: bold;
height: 175px;
line-height: 175px;
padding-top: 20px;
text-align: center;
width: 100%;
}
.blog-category-link-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 240px;
margin-bottom: 20px;
margin-right: 16px;
position: relative;
width: calc(787.8px / 3);
}
.category-text-class {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
top: 55px;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-text-instructor {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: bold;
left: 0;
padding: 18px 0;
position: absolute;
text-align: center;
transform: rotate(-3deg) skew(-3deg);
transition: all 0.2s 0s ease;
width: 100%;
}
.category-box {
background-color: rgba(0, 0, 0, 0.6);
display: block;
height: 100%;
padding: 10px 15px;
text-decoration: none;
}
.category-link-text {
border: 1px solid rgba(255, 255, 255, 0.8);
bottom: 0;
color: #fff;
left: 15px;
line-height: 35px;
position: absolute;
text-align: center;
width: calc(788px / 3 - 30px);
}
.header-area-post-thumbnail {
height: 400px;
position: relative;
width: 100%;
}
.post-image-box {
height: 400px;
margin-left: auto;
padding: 20px 30px 20px 20px;
transform: rotate(-3deg);
width: 500px;
}
.header-title-box {
bottom: 20px;
left: 0;
padding: 0 20px;
position: absolute;
}
.header-area-post-noimage {
padding: 30px 40px 20px;
width: 100%;
}
.blog-info-area {
padding: 0 20px;
}
.anchour-area {
height: 200px;
position: relative;
}
.events-area {
margin-top: 50px;
}
.event-box {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
height: 100%;
margin-bottom: 20px;
overflow: hidden;
padding: 15px 25px 0;
position: relative;
width: 100%;
}
.events-image {
background-position: top;
background-size: contain;
background-repeat: no-repeat;
margin-top: 12px;
width: 340px;
}
.events-no-image {
background-color: rgba(0, 0, 0, 0.2);
height: 240px;
margin-top: 12px;
width: 340px;
}
.events-no-image-text {
font-weight: bold;
line-height: 240px;
text-align: center;
}
.events-open {
background: rgba(0, 0, 255, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 35px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-closed {
background: rgba(255, 0, 0, 0.8);
color: #fff;
left: -25px;
line-height: 35px;
padding-left: 45px;
position: absolute;
text-shadow: 1px 1px 1px solid #333;
top: 0px;
transform: rotate(-20deg) skew(-20deg);
width: 220px;
}
.events-description-box {
margin-top: 15px;
text-align: justify;
text-justify: inter-ideograph;
width: 440px;
}
.events-item {
font-weight: bold;
margin: 0;
width: 65px;
}
.events-detail {
margin: 0;
width: 355px;
}
.fm-intro {
margin-bottom: 50px;
}
.fm-carnelian-item {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px 25px 10px;
}
.fm-movie-box {
width: 380px;
}
.fm-description-box {
text-align: justify;
text-justify: inter-ideograph;
width: 400px;
}
.carnelian-media-intro {
margin-bottom: 50px;
}
.carnelian-media-box {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
padding: 15px 25px 10px;
}
.media-image-box-single {
margin: 0 auto 20px;
}
.media-image-box-double,
.media-image-box-triple {
display: flex;
justify-content: space-between;
margin: 0 auto 20px;
}
.media-image-box-double img {
height: 100%;
width: 49%;
}
.media-image-box-triple img {
height: 100%;
width: 32%;
}
.media-movie-box {
margin: 20px auto 10px;
width: 600px;
}
.media-movie {
background: rgba(0, 0, 0, 0.5);
}
.cta-404 {
display: flex;
flex-wrap: wrap;
padding: 0 20px;
}
.list-style-404 {
margin-bottom: 10px;
width: 50%;
}
.from-404 {
text-decoration: none;
}
.footer-area-front-pg {
background: rgba(255, 255, 255, 0.3);
padding-bottom: 25px;
padding-top: 50px;
width: 100%;
}
.footer-area-content-pg {
margin-left: auto;
width: 72%;
}
.footer-item-box-front-pg {
padding: 0 0 25px;
}
.footer-item-box-content-pg {
padding: 75px 0 25px;
}
.footer-item-box-front-pg ul,
.footer-item-box-content-pg ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
.footer-logo {
height: 80px;
margin: 0 auto;
width: 80px;
}
.footer-menu {
font-size: 12px;
margin-bottom: 5px;
}
.footer-copyright {
font-size: 12px;
margin-top: 30px;
}
.flex-wrap-margin {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.flex-wrap-margin-14 {
display: flex;
flex-wrap: wrap;
margin-right: -14px;
}
.flex-wrap-margin-mod {
display: flex;
flex-wrap: wrap;
margin-right: -16px;
}
.modified-spacing-3 {
letter-spacing: -2.6px;
}
.modified-spacing-4 {
letter-spacing: -1.4px;
}
.modified-spacing-5 {
letter-spacing: -1.8px;
}
.modified-spacing-6 {
letter-spacing: -3.8px;
}
.modified-spacing-8 {
letter-spacing: -1px;
}
.modified-spacing-9 {
letter-spacing: -2px;
}
.section-margin {
margin-bottom: 80px;
}
.purpose-check {
margin-bottom: 50px;
}
.margin-l-10 {
margin-left: 10px;
}
.margin-r-10 {
margin-right: 10px;
}
.margin-s-10 {
margin: 0 10px;
}
.front-pg-1st-section h2 {
margin-bottom: 50px;
}
.modified-margin-3 {
margin-bottom: 8px;
}
.padding-r-10 {
padding-right: 10px;
}
.ico-caret-white {
color: #fff;
font-size: 15px;
}
.link-front-pg-subnav {
background: rgba(255, 255, 255, 0.2);
display: block;
padding: 20px;
text-decoration: none;
transition: all 0.5s 0s ease;
}
.link-front-pg-subnav:hover {
background: rgba(255, 255, 255, 0.5);
text-shadow:
1px 1px 10px #fff,
1px -1px 10px #fff,
-1px 1px 10px #fff,
-1px -1px 10px #fff;
}
.link-orange {
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s 0s ease;
}
.link-orange:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.link-orange p:last-child {
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 69, 0, 0.7);
color: rgba(255, 69, 0, 0.7);
transition: all 0.3s 0s ease;
}
.link-orange:hover p:last-child {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.link-orange:hover .icon-orange {
color: rgba(255, 255, 255, 1);
}
.link-white p:last-child {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transition: all 0.3s 0s ease;
}
.link-white:hover p:last-child {
background-color: rgba(255, 255, 255, 0.8);
color: rgba(255, 69, 0, 0.8);
}
.link-white:hover .icon-white {
color: rgba(255, 69, 0, 0.8);
}
.link-black {
background-color: rgba(255, 255, 255, 0.2);
display: block;
height: 100%;
text-decoration: none;
transition: all 0.3s 0s ease;
}
.link-black:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.link-box:hover .category-text-class,
.link-box:hover .category-text-instructor {
background-color: rgba(255, 69, 0, 0.6);
text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
.link-default {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #333;
display: block;
line-height: 40px;
margin-top: 5px;
text-align: center;
text-decoration: none;
width: 100%;
transition: all 0.3s 0s ease;
}
.link-default:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333;
}
.category-link:hover .icon-red {
color: rgba(255, 69, 0, 0.8);
}
.infobox-link:hover {
background-color: rgba(255, 69, 0, 0.5);
color: rgba(255, 255, 255, 1);
}
.infobox-link:hover::after {
color: rgba(255, 255, 255, 1);
}
.feature-list {
margin-bottom: 1em;
}
#breadcrumbs {
margin-top: 50px;
padding: 0 20px;
}
#breadcrumbs ul li:not(:last-child)::after {
font-family: "Font Awesome 5 Free";
font-size: 1.2em;
font-weight: bold;
content: "\f105";
color: #333;
margin-left: 15px;
margin-right: 10px;
position: relative;
top: 1px;
}
#breadcrumbs a:hover {
color: rgba(255, 69, 0, 0.8);
}
.infinite-scroll-control-area {
padding: 0 20px 50px;
}
.front-pg-campaign-section {
margin: 0 auto 150px;
width: 750px;
}
.campaign-comment {
font-size: 36px;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}
.narisuta-banner-box {
bottom: 0;
height: 300px;
position: relative;
transition: bottom 0.3s 0s ease;
width: 750px;
z-index: 500;
}
.narisuta-banner-box:hover {
bottom: 5px;
}
.narisuta-banner-text {
bottom: 65px;
color: #fff;
font-size: 36px;
font-weight: bold;
left: 0;
position: absolute;
text-align: center;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
-1px -1px 3px rgba(0, 0, 0, 0.8);
transform: rotate(-5deg) skewX(-8deg);
width: 100%;
}
.top-information {
margin-bottom: 50px;
padding: 0 35px;
}
#class-info-overview .top-information,
#time-table .top-information,
#instructors-top .top-information,
#instructors-individual .top-information,
#access-top .top-information {
margin-top: 0px;
}
.top-information img {
transform: scale(1);
transition: transform 0.3s 0s ease;
}
.top-information img:hover {
transform: scale(1.05);
}
.caution-modal-content {
max-width: 450px;
}
}
#ga-site-top-cta-mendan {
display: none;
}.header {
background: #fff;
height: clamp(3.077rem, 15.38vw, 7.067rem);
width: 100%;
}
@media all and (min-width: 736px) {
.header {
height: clamp(3.163rem, 6.88vw, 8.25rem);
}
}
.header-inner {
align-items: center;
display: flex;
height: 100%;
margin: 0 auto;
position: relative;
width: clamp(17.949rem, 89.74vw, 41.226rem);
}
@media all and (min-width: 736px) {
.header-inner {
justify-content: space-between;
width: clamp(43.7rem, 95vw, 114rem);
}
.header-inner nav {
height: 100%;
}
}
.header__company-logo {
height: clamp(1.949rem, 9.74vw, 4.476rem);
width: clamp(8.205rem, 41.03vw, 18.846rem);
}
@media all and (min-width: 736px) {
.header__company-logo {
height: clamp(1.438rem, 3.13vw, 3.75rem);
width: clamp(6.325rem, 13.75vw, 16.5rem);
}
}
.header__company-logo a {
display: block;
height: 100%;
transition: opacity 0.2s;
width: 100%;
}
.header__company-logo a:hover {
opacity: 0.6;
}
.header__company-logo a img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
}
.header__catch-copy {
font-size: clamp(0.564rem, 2.82vw, 1.296rem);
font-weight: 700;
text-align: center;
}
@media all and (min-width: 736px) {
.header__catch-copy {
display: none;
}
}
.header__pc-nav {
display: none;
}
@media all and (min-width: 736px) {
.header__pc-nav {
display: flex;
height: 100%;
}
}
.header__pc-nav--list {
display: none;
}
@media all and (min-width: 736px) {
.header__pc-nav--list {
align-items: center;
display: inline-flex;
gap: clamp(0.767rem, 1.67vw, 2rem);
justify-content: space-between;
list-style: none;
margin: 0;
}
.header__pc-nav--list li {
margin: 0;
}
.header__pc-nav--list a {
color: #333;
font-size: clamp(0.479rem, 1.04vw, 1.25rem);
font-weight: 700;
line-height: 1.6;
text-decoration: none;
text-shadow: 0 0 clamp(0.24rem, 0.52vw, 0.625rem) #fff;
transition: color 0.2s;
}
.header__pc-nav--list a:hover {
color: tomato;
}
}
.header__pc-nav--list_icon-link {
display: none;
}
@media all and (min-width: 736px) {
.header__pc-nav--list_icon-link {
background: linear-gradient(-113deg, #e47600, #f8cb00);
display: flex;
height: 100%;
justify-content: center;
list-style: none;
margin: 0 0 0 clamp(0.287rem, 0.63vw, 0.75rem) !important;
padding: 0 clamp(0.767rem, 1.67vw, 2rem);
}
.header__pc-nav--list_icon-link a {
align-items: center;
color: #fff;
display: flex;
font-size: clamp(0.479rem, 1.04vw, 1.25rem);
font-weight: 700;
gap: clamp(0.192rem, 0.42vw, 0.5rem);
line-height: 1.6;
text-decoration: none;
text-shadow:
1px 1px 2px rgba(255, 140, 0, 0.25),
1px -1px 2px rgba(255, 140, 0, 0.25),
-1px 1px 2px rgba(255, 140, 0, 0.25),
-1px -1px 2px rgba(255, 140, 0, 0.25);
transition: all 0.2s;
}
.header__pc-nav--list_icon-link a:hover {
color: tomato;
text-shadow:
2px 2px 6px rgba(255, 255, 255, 0.75),
2px -2px 6px rgba(255, 255, 255, 0.75),
-2px 2px 6px rgba(255, 255, 255, 0.75),
-2px -2px 6px rgba(255, 255, 255, 0.75);
}
}
@media all and (min-width: 736px) {
.header__pc-nav--list_icon-link_img {
height: clamp(0.958rem, 2.08vw, 2.5rem);
transform: translateY(calc(clamp(0.096rem, 0.21vw, 0.25rem) * -1));
width: clamp(0.958rem, 2.08vw, 2.5rem);
}
.header__pc-nav--list_icon-link_img img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
}
}
@media all and (min-width: 1281px) {
#fixed-header-glmenu {
display: none;
}
}
.header__nav-toggle-icon {
background: 0 0;
border: none;
height: clamp(1.538rem, 7.69vw, 3.534rem) !important;
padding: 0 !important;
position: absolute;
right: 0;
top: calc(50% - clamp(1.538rem, 7.69vw, 3.534rem) / 2);
width: clamp(1.538rem, 7.69vw, 3.534rem) !important;
}
@media all and (min-width: 736px) {
.header__nav-toggle-icon {
display: none;
}
}
.header__nav-toggle-icon.open {
animation: icon-reaction 0.2s linear both;
}
.header__nav-toggle-icon img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
}
body {
background: rgba(255, 140, 0, 0.1);
}
.frontpage-firstview {
margin-bottom: clamp(3.282rem, 16.41vw, 7.538rem);
width: 100%;
}
@media all and (min-width: 736px) {
.frontpage-firstview {
margin: clamp(0.767rem, 1.67vw, 2rem) 0 clamp(1.917rem, 4.17vw, 5rem);
}
}
.frontpage-firstview__hero-carousel {
height: clamp(23.846rem, 119.23vw, 54.772rem);
list-style: none;
margin: 0;
overflow: hidden;
position: relative;
width: 100%;
}
@media all and (min-width: 736px) {
.frontpage-firstview__hero-carousel {
height: clamp(12.578rem, 27.34vw, 32.813rem);
width: 100%;
}
}
.frontpage-firstview__hero-carousel--image {
height: 100%;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
@media all and (min-width: 736px) {
.frontpage-firstview__hero-carousel--image {
height: 100%;
width: clamp(28.75rem, 62.5vw, 75rem);
}
}
.frontpage-firstview__hero-carousel--image:first-child {
left: 0;
}
@media all and (min-width: 736px) {
.frontpage-firstview__hero-carousel--image:first-child {
left: calc(50% - clamp(28.75rem, 62.5vw, 75rem) / 2);
}
}
.frontpage-firstview__hero-carousel--image a {
transition: opacity 0.2s;
}
.frontpage-firstview__hero-carousel--image a:hover {
opacity: 0.8;
}
.frontpage-firstview__hero-carousel--image img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: top;
object-position: top;
width: 100%;
}
.frontpage-firstview__hero-pager {
align-items: center;
display: flex;
gap: clamp(2.462rem, 12.31vw, 5.654rem);
height: clamp(1.231rem, 6.15vw, 2.827rem);
justify-content: center;
margin: clamp(0.821rem, 4.1vw, 1.885rem) auto 0;
}
@media all and (min-width: 736px) {
.frontpage-firstview__hero-pager {
gap: clamp(0.958rem, 2.08vw, 2.5rem);
height: clamp(0.479rem, 1.04vw, 1.25rem);
margin: clamp(1.15rem, 2.5vw, 3rem) auto 0;
}
}
.frontpage-firstview__news {
background: #fff;
margin: 0;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news {
margin: clamp(0.767rem, 1.67vw, 2rem) 0 0;
}
}
.frontpage-firstview__news-inner {
border-top: 2px solid #f39800;
padding: clamp(1.231rem, 6.15vw, 2.827rem) clamp(1.026rem, 5.13vw, 2.356rem);
}
@media all and (min-width: 736px) {
.frontpage-firstview__news-inner {
border-top: none;
display: flex;
gap: clamp(1.15rem, 2.5vw, 3rem);
margin: 0 auto;
padding: clamp(0.958rem, 2.08vw, 2.5rem) 0 clamp(0.767rem, 1.67vw, 2rem);
position: relative;
width: clamp(28.75rem, 62.5vw, 75rem);
}
}
.frontpage-firstview__news--headling {
font-size: clamp(1.026rem, 5.13vw, 2.356rem) !important;
font-weight: 700;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--headling {
border-top: 2px solid #f39800;
flex-shrink: 0;
font-size: clamp(0.575rem, 1.25vw, 1.5rem) !important;
padding-top: clamp(0.575rem, 1.25vw, 1.5rem);
width: clamp(3.833rem, 8.33vw, 10rem);
}
}
.frontpage-firstview__news--list {
border-top: 1px solid #c0c6c9;
list-style: none;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--list {
width: 100%;
}
}
.frontpage-firstview__news--list_item {
border-bottom: 1px solid #c0c6c9;
margin: 0;
padding: clamp(0.821rem, 4.1vw, 1.885rem) 0;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--list_item {
display: flex;
padding: clamp(0.479rem, 1.04vw, 1.25rem) 0 clamp(0.383rem, 0.83vw, 1rem);
}
}
.frontpage-firstview__news--list_item_date {
font-size: clamp(0.718rem, 3.59vw, 1.649rem) !important;
font-weight: 700;
margin: 0;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--list_item_date {
flex-shrink: 0;
font-size: clamp(0.383rem, 0.83vw, 1rem) !important;
transform: translateY(clamp(0.048rem, 0.1vw, 0.125rem));
width: clamp(3.833rem, 8.33vw, 10rem);
}
}
.frontpage-firstview__news--list_item_title {
font-size: clamp(0.821rem, 4.1vw, 1.885rem) !important;
margin-top: clamp(0.205rem, 1.03vw, 0.471rem);
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--list_item_title {
font-size: clamp(0.479rem, 1.04vw, 1.25rem) !important;
margin: 0;
}
}
.frontpage-firstview__news--list_item_title a {
color: #333;
font-size: clamp(0.821rem, 4.1vw, 1.885rem) !important;
line-height: 1.4;
text-decoration: none;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--list_item_title a {
font-size: clamp(0.479rem, 1.04vw, 1.25rem) !important;
}
}
.frontpage-firstview__news--list_item_title a:hover {
color: tomato;
}
.frontpage-firstview__news--link {
margin: clamp(0.821rem, 4.1vw, 1.885rem) 0 0;
text-align: right;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--link {
left: 0;
margin: 0;
position: absolute;
text-align: inherit;
top: clamp(2.875rem, 6.25vw, 7.5rem);
}
}
.frontpage-firstview__news--link a {
align-items: center;
color: #333;
display: flex;
font-size: clamp(0.821rem, 4.1vw, 1.885rem) !important;
gap: clamp(0.205rem, 1.03vw, 0.471rem);
justify-content: flex-end;
text-decoration: none;
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--link a {
font-size: clamp(0.383rem, 0.83vw, 1rem) !important;
gap: clamp(0.192rem, 0.42vw, 0.5rem);
justify-content: unset;
}
}
.frontpage-firstview__news--link a:hover {
color: tomato;
}
.frontpage-firstview__news--link a span {
height: clamp(1.026rem, 5.13vw, 2.356rem);
width: clamp(1.026rem, 5.13vw, 2.356rem);
}
@media all and (min-width: 736px) {
.frontpage-firstview__news--link a span {
height: clamp(0.479rem, 1.04vw, 1.25rem);
width: clamp(0.479rem, 1.04vw, 1.25rem);
}
}
.frontpage-firstview__news--link a span img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
}
.footer__fixed-cta {
bottom: 0;
height: clamp(3.282rem, 16.41vw, 7.538rem);
left: 0;
position: fixed;
width: 100%;
z-index: 500;
}
@media all and (min-width: 736px) {
.footer__fixed-cta {
height: clamp(1.917rem, 4.17vw, 5rem);
}
}
.footer__fixed-cta--list {
align-items: center;
background: #192f60;
border: 1px solid #fff;
border-radius: clamp(0.205rem, 1.03vw, 0.471rem);
display: flex;
gap: clamp(0.41rem, 2.05vw, 0.942rem);
height: 100%;
justify-content: center;
list-style: none;
margin: 0 auto;
width: 100%;
}
@media all and (min-width: 736px) {
.footer__fixed-cta--list {
border-radius: clamp(0.096rem, 0.21vw, 0.25rem);
gap: clamp(1.533rem, 3.33vw, 4rem);
}
}
.footer__fixed-cta--list_item {
border-radius: clamp(0.205rem, 1.03vw, 0.471rem);
height: clamp(2.051rem, 10.26vw, 4.712rem);
margin: 0;
transition: all 0.2s;
width: calc(50% - clamp(0.821rem, 4.1vw, 1.885rem));
}
@media all and (min-width: 736px) {
.footer__fixed-cta--list_item {
border-radius: clamp(0.24rem, 0.52vw, 0.625rem);
height: clamp(1.15rem, 2.5vw, 3rem);
width: clamp(9.2rem, 20vw, 24rem);
}
}
.footer__fixed-cta--list_item:first-child {
background: #00a3af;
}
.footer__fixed-cta--list_item:first-child:hover {
background: #59b9c6 !important;
}
.footer__fixed-cta--list_item:last-child {
background: #f39800;
}
.footer__fixed-cta--list_item:last-child:hover {
background: #f6ad49 !important;
}
.footer__fixed-cta--list_item:hover {
background: #ff4500;
}
.footer__fixed-cta--list_item:hover a span {
color: #fff;
transition: color 0.2s;
}
.footer__fixed-cta--list_item a {
align-items: center;
display: flex;
gap: clamp(0.41rem, 2.05vw, 0.942rem);
height: 100%;
justify-content: center;
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
}
@media all and (min-width: 736px) {
.footer__fixed-cta--list_item a {
gap: clamp(0.192rem, 0.42vw, 0.5rem);
}
}
.footer__fixed-cta--list_item a span {
align-items: center;
color: #fff;
display: flex;
font-size: clamp(0.821rem, 4.1vw, 1.885rem) !important;
font-weight: 700;
height: 100%;
justify-content: center;
position: relative;
transform: translateY(clamp(0.103rem, 0.51vw, 0.236rem));
z-index: 5;
}
@media all and (min-width: 736px) {
.footer__fixed-cta--list_item a span {
font-size: clamp(0.479rem, 1.04vw, 1.25rem) !important;
transform: translateY(clamp(0.048rem, 0.1vw, 0.125rem));
}
}
.footer__fixed-cta--list_item_icon {
height: clamp(1.231rem, 6.15vw, 2.827rem);
width: clamp(1.231rem, 6.15vw, 2.827rem);
}
@media all and (min-width: 736px) {
.footer__fixed-cta--list_item_icon {
height: clamp(0.767rem, 1.67vw, 2rem);
width: clamp(0.767rem, 1.67vw, 2rem);
}
}
.footer__fixed-cta--list_item_icon img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
}

.c-container {
width: min(100vw - 2rem, 1280px);
margin: 0 auto;
position: relative;
}
.c-container-narrow {
width: min(100vw - 2rem, 1024px);
margin: 0 auto;
position: relative;
}
.c-container-small {
width: min(100vw - 2rem, 840px);
margin: 0 auto;
position: relative;
}
.p-header {
padding: 0;
background-color: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
width: 100vw;
position: relative;
z-index: 3000;
box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:1023px) {
.p-header {
height: 102px;
}
}
.p-header:has(#toggle:checked) {
position: fixed;
top: 0;
left: 0;
}
.p-header-tagline {
width: 100vw;
background-color: rgba(228, 118, 0, 0.1);
position: relative;
align-items: center;
justify-content: center;
display: flex;
display: block;
padding: 0.75rem;
}
.p-header-tagline p {
font-weight: 700;
font-size: 1rem;
position: relative;
color: #e47600;
text-align: center;
line-height: 1;
}
.p-header h1 {
width: min(180px, 40vw);
margin: 0;
padding: 0;
line-height: 1;
position: relative;
z-index: 300;
}
.p-header h1 img {
width: 100%;
object-fit: cover;
}
.p-header .c-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
}
.p-header-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0;
font-size: min(0.875rem, 1.1vw);
}
@media screen and (max-width:1023px) {
.p-header-nav ul {
display: none;
}
}
.p-header-nav ul > li {
position: relative;
}
.p-header-nav ul > li > ul {
position: absolute;
background-color: #ffffff;
z-index: 500;
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #ffffff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 0.5rem 0;
margin: 0;
list-style: none;
flex-direction: column;
align-items: stretch;
display: none;
}
.p-header-nav ul > li > ul li {
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.p-header-nav ul > li > ul li:last-of-type {
border-bottom: none;
}
.p-header-nav ul > li > ul li a {
padding: 0.5rem 1rem;
white-space: nowrap;
font-size: 0.75rem;
display: block;
}
.p-header-nav ul > li > ul li a:hover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 1;
}
.p-header-nav ul > li:hover > ul {
display: flex;
}
.p-header-nav ul > li a {
color: #222222;
font-weight: 600;
transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
text-decoration: none;
}
.p-header-nav ul > li a:hover {
opacity: 0.25;
}
.p-header-nav ul > li a:visited {
color: #222222;
}
.p-header-nav ul .p-header-cta a {
background-color: #e47600;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border-radius: 20px;
padding: 1rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 400;
margin-left: -1rem;
white-space: nowrap;
}
.p-header-nav ul .p-header-cta a::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_mail.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-nav ul .p-header-cta a:hover {
background-color: rgba(228, 118, 0, 0.8);
opacity: 1;
}
.p-header-nav ul .p-header-cta a:visited {
color: #ffffff;
}
.p-header-nav ul .p-header-mypage a {
background-color: #f0c60b;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border-radius: 20px;
padding: 1rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 400;
white-space: nowrap;
}
.p-header-nav ul .p-header-mypage a::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_account.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-nav ul .p-header-mypage a:hover {
background-color: rgba(240, 198, 11, 0.8);
opacity: 1;
}
.p-header-nav ul .p-header-mypage a:visited {
color: #ffffff;
}
.p-header-nav ul .p-header-line a {
background-color: #4cc764;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border-radius: 20px;
padding: 1rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 400;
white-space: nowrap;
margin-left: -1rem;
}
.p-header-nav ul .p-header-line a::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_line.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-nav ul .p-header-line a:hover {
background-color: rgba(76, 199, 100, 0.8);
opacity: 1;
}
.p-header-nav ul .p-header-line a:visited {
color: #ffffff;
}
.p-header-toggle {
padding: 0;
margin: 0;
width: 36px;
height: 36px;
display: block;
position: relative;
cursor: pointer;
}
@media screen and (min-width:1024px) {
.p-header-toggle {
display: none;
}
}
.p-header-toggle span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 0;
width: 36px;
height: 3px;
border-radius: 2px;
background-color: #222222;
}
.p-header-toggle span:nth-of-type(1) {
top: 7px;
animation: menu-open01 0.5s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
}
.p-header-toggle span:nth-of-type(2) {
top: 17px;
transition: all 0.25s 0.25s;
opacity: 1;
}
.p-header-toggle span:nth-of-type(3) {
top: 27px;
animation: menu-open02 0.5s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
}
.p-header #toggle {
display: none !important;
}
.p-header #toggle:checked + label span:nth-of-type(1) {
animation: menu-close01 0.5s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
}
.p-header #toggle:checked + label span:nth-of-type(2) {
opacity: 0;
}
.p-header #toggle:checked + label span:nth-of-type(3) {
animation: menu-close02 0.5s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media screen and (min-width:1024px) {
.p-header #toggle {
display: none;
}
}
.p-header label {
display: flex;
align-items: center;
gap: 1rem;
}
.p-header label a,
.p-header label a:visited,
.p-header label a:active,
.p-header label a:hover {
text-decoration: none;
background-color: #4cc764;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
display: flex;
gap: 0.5rem;
font-size: 0.75rem;
}
.p-header label a::before,
.p-header label a:visited::before,
.p-header label a:active::before,
.p-header label a:hover::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_line.svg);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width:599px) {
.p-header label a::before,
.p-header label a:visited::before,
.p-header label a:active::before,
.p-header label a:hover::before {
display: none;
}
}
@media screen and (min-width:1024px) {
.p-header label {
display: none;
}
}
.p-header-spnav {
width: 100vw;
height: 0;
max-height: calc(100dvh - 100px);
padding: 0;
background-color: #ffffff;
overflow: scroll;
position: absolute;
top: 100px;
left: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 10px;
}
.p-header-spnav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
}
.p-header-spnav > ul > li {
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(255, 140, 0, 0.5);
color: #ff8c00;
width: 100%;
font-size: 0.85rem;
font-weight: 600;
opacity: 0;
transform: translateX(10px);
}
.p-header-spnav > ul > li a {
color: #ff8c00;
text-decoration: none;
padding: 0.5rem;
display: block;
}
.p-header-spnav > ul > li > a {
background-color: rgba(255, 140, 0, 0.15);
}
.p-header-spnav > ul > li ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.p-header-spnav > ul > li ul li {
font-size: 0.75rem;
padding: 0;
font-weight: 400;
margin: 0;
background-color: #ffffff;
width: 50%;
}
.p-header-spnav > ul > li ul li a {
color: #222222;
}
.p-header-spnav > ul > li:last-of-type {
border-bottom: none;
}
.p-header-spnav > ul > li:first-of-type {
border-top: 1px solid rgba(255, 140, 0, 0.5);
}
.p-header-spnav .p-header-line {
width: 100%;
margin: 0;
padding: 0;
opacity: 0;
transform: translateX(0px);
margin-bottom: 1rem;
}
.p-header-spnav .p-header-line a {
background-color: #4cc764;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
font-size: 1rem;
}
.p-header-spnav .p-header-line a::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_line.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-spnav .p-header-line a:hover {
background-color: rgba(76, 199, 100, 0.8);
opacity: 1;
}
.p-header-spnav .p-header-line a:visited {
color: #ffffff;
}
.p-header-spnav .p-header-cta {
width: 100%;
margin: 0;
padding: 0;
opacity: 0;
transform: translateX(0px);
}
.p-header-spnav .p-header-cta a {
background-color: #e47600;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
font-size: 1rem;
}
.p-header-spnav .p-header-cta a::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_mail.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-spnav .p-header-cta a:hover {
background-color: rgba(228, 118, 0, 0.8);
opacity: 1;
}
.p-header-spnav .p-header-cta a:visited {
color: #ffffff;
}
.p-header-spnav .p-header-mypage {
width: 100%;
margin: 0;
padding: 0;
opacity: 0;
transform: translateX(0px);
}
.p-header-spnav .p-header-mypage a {
background-color: #f0c60b;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5rem;
color: #ffffff !important;
gap: 0.5rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
font-size: 1rem;
}
.p-header-spnav .p-header-mypage a::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/icon_account.svg);
background-repeat: no-repeat;
background-size: contain;
}
.p-header-spnav .p-header-mypage a:hover {
background-color: rgba(240, 198, 11, 0.8);
opacity: 1;
}
.p-header-spnav .p-header-mypage a:visited {
color: #ffffff;
}
@media screen and (min-width:1024px) {
.p-header-spnav {
display: none;
}
}
.p-header:has(#toggle:checked) .p-header-spnav {
height: 100dvh;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li {
transition: all 0.25s 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
opacity: 1;
transform: translateX(0px);
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:first-child {
transition-delay: 0.15s;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:nth-child(2) {
transition-delay: 0.2s;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:nth-child(3) {
transition-delay: 0.25s;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:nth-child(4) {
transition-delay: 0.3s;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:nth-child(5) {
transition-delay: 0.35s;
}
.p-header:has(#toggle:checked) .p-header-spnav ul > li:nth-child(6) {
transition-delay: 0.4s;
}
.p-header:has(#toggle:checked) .p-header-spnav .p-header-mypage {
transition: all 0.25s 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
opacity: 1;
transition-delay: 0.5s;
}
.p-header:has(#toggle:checked) .p-header-spnav .p-header-cta {
transition: all 0.25s 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
opacity: 1;
transition-delay: 0.5s;
}
.p-header:has(#toggle:checked) .p-header-spnav .p-header-line {
transition: all 0.25s 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);
opacity: 1;
transition-delay: 0.5s;
}
.p-header .site-logo {
width: min(35vw, 200px);
margin: 5px 0;
padding: 0;
}
.p-header .site-logo a {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes menu-open01 {
0% {
transform: translateY(10px) rotate(45deg);
}
50% {
transform: translateY(10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes menu-open02 {
0% {
transform: translateY(-10px) rotate(-45deg);
}
50% {
transform: translateY(-10px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes menu-close01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(10px) rotate(0);
}
100% {
transform: translateY(10px) rotate(45deg);
}
}
@keyframes menu-close02 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-10px) rotate(0);
}
100% {
transform: translateY(-10px) rotate(-45deg);
}
}
.main-content-page {
width: min(100vw - 2rem, 900px) !important;
margin: 0 auto !important;
position: relative;
}
.p-swiper {
position: relative;
padding: 1rem 0 2.5rem 0;
}
@media screen and (max-width:1023px) {
.p-swiper {
padding: 0;
}
}
.p-swiper .swiper-slide {
width: 100%;
height: 100%;
padding: 0.75rem 0.75rem 2.5rem;
}
@media screen and (min-width:1024px) {
.p-swiper .swiper-slide {
padding: 0.75rem 0.75rem 0.25rem;
}
}
.p-swiper .swiper-slide div {
width: 100%;
height: 100%;
margin: 0;
}
.p-swiper .swiper-slide div img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
border: 1px solid white;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width:1023px) {
.p-swiper-pc {
display: none;
aspect-ratio: 1800/788;
}
}
@media screen and (min-width:1024px) {
.p-swiper-sp {
display: none;
aspect-ratio: 780/930;
}
}
.swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.25);
opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet-active {
background-color: rgba(0, 0, 0, 0.75);
}
.frontpage-firstview {
margin-top: 0;
margin-bottom: 0 !important;
}
.frontpage-firstview__news {
margin-top: 0;
}
.frontpage-firstview__news-inner {
border-top: none;
}
.p-footer {
width: min(100vw - 2rem, 900px) !important;
margin: 0 auto 1rem !important;
padding-top: 2rem;
}
@media screen and (min-width:1024px) {
.p-footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
}
.p-footer div {
margin-bottom: 1rem;
width: 100%;
display: block;
}
.p-footer h4 {
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.p-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.p-footer ul li {
width: 50%;
margin: 0;
padding-left: 0.5rem;
font-size: 1rem;
font-weight: 500;
white-space: nowrap;
}
.p-footer ul li a {
color: #333;
text-decoration: none;
font-size: 0.875rem;
}
.p-footer ul li a:visited {
color: #333;
text-decoration: none;
}
.p-footer ul li a:hover {
color: rgba(255, 69, 0, 0.8);
}
.p-footer-about {
min-width: calc((100% - 32px) / 2);
}
.p-footer-about ul {
display: flex;
flex-wrap: wrap;
}
.p-footer .footer-copyright {
margin-bottom: 1rem;
}
@media screen and (max-width:1023px) {
.p-footer .footer-copyright {
margin-bottom: 7rem;
}
}
.p-footer-jasrac {
width: min(100vw - 2rem, 900px) !important;
margin: 0 auto !important;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-footer-jasrac img {
width: 160px;
}
.p-footer-jasrac ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin: 0;
padding: 0;
gap: 1rem;
}
.p-footer-jasrac ul li {
margin: 0;
padding: 0;
}
.p-footer-jasrac ul img {
width: 30px;
height: 30px;
object-fit: contain;
}
.p-footer-news {
width: min(100vw - 2rem, 900px) !important;
margin: 0 auto 2rem !important;
padding-top: 2rem;
}
.p-footer-news-flex {
margin-bottom: 1.5rem;
}
@media screen and (min-width:1024px) {
.p-footer-news-flex {
display: flex;
justify-content: space-between;
}
}
.p-footer-news-flex h2 {
margin-bottom: 0.5rem;
}
.p-footer-news-flex a {
text-decoration: none;
color: #333;
font-size: 0.75rem;
display: flex;
gap: 4px;
}
.p-footer-news-flex a:hover {
color: red;
}
.p-footer-news-flex a:before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/ig:avif/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/v4.1/icon/icon_right-arrow.svg);
}
.p-footer-cta {
align-items: center;
background: #ee961e;
display: flex;
justify-content: center;
list-style: none;
margin: 0 auto;
width: 100%;
padding: 16px;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
gap: 1rem;
}
@media screen and (max-width:599px) {
.p-footer-cta {
padding: 8px;
}
}
.p-footer-cta p {
font-weight: 700;
color: white;
line-height: 1;
}
.p-footer-cta div {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.p-footer-cta div p {
font-size: 14px;
display: flex;
gap: 8px;
}
.p-footer-cta div p:before {
content: "|";
transform: skewX(40deg);
}
.p-footer-cta div p:after {
content: "|";
transform: skewX(-40deg);
}
.p-footer-cta div ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
@media screen and (max-width:599px) {
.p-footer-cta div ul {
width: 100%;
gap: 8px;
}
}
.p-footer-cta div ul li {
margin: 0;
padding: 0;
color: #fff;
font-weight: 500;
flex-shrink: 1;
}
.p-footer-cta div ul li a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 12px;
color: #ee961e;
text-decoration: none;
border-radius: 8px;
width: 100%;
background-color: white;
font-weight: 800;
}
.p-footer-cta div ul li a:after {
content: "▶︎";
width: 24px;
height: 24px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ee961e;
color: #fff;
font-size: 10px;
}
@media screen and (max-width:599px) {
.p-footer-cta div ul li a {
padding: 8px;
}
}
.p-footer-cta div ul li a span {
font-size: 1.5em;
}
.p-footer-newsletter {
width: min(100vw - 2rem, 600px) !important;
margin: 2rem auto !important;
padding: 2rem 2rem 0;
background-color: rgba(246, 173, 73, 0.2);
border: 1px solid white;
border-radius: 8px;
}
.p-footer-newsletter input {
border: 1px solid gray !important;
}
.p-footer-newsletter p {
font-size: 0.875rem;
}
.p-footer-intro {
width: min(100vw - 2rem, 900px) !important;
margin: 2rem auto 10rem !important;
}
.p-footer-intro p {
font-size: 0.75rem;
margin-bottom: 1em;
}
.p-footer-intro summary {
display: flex;
cursor: pointer;
justify-content: flex-end;
position: relative;
padding-right: 1.2rem;
font-size: 0.75rem;
}
.p-footer-intro summary:after {
content: "+";
position: absolute;
right: 0;
top: -2rem;
font-size: 1rem;
line-height: 1;
transition: transform 0.3s ease;
}
.p-footer-intro summary::-webkit-details-marker {
display: none;
}
.p-footer-intro details[open] summary:after {
content: "-";
}
.p-footer-payment {
width: min(100vw - 2rem, 900px) !important;
margin: 0 auto 1rem;
}
.p-footer-payment ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
gap: 16px;
}
.p-footer-payment ul li {
height: 40px;
margin: 0;
}
.p-footer-payment ul li img {
width: 100%;
height: 100%;
object-fit: contain;
}
footer .pjax-link {
display: none !important;
}
#price-information .header-box {
margin-bottom: 64px;
}
.header-box,
.header-box-instructors {
margin-bottom: 3rem;
}
@media print, screen and (min-width: 1280px) {
.fp-sec-4 {
width: 600px;
}
}
@media print, screen and (min-width: 1280px) {
.fp-sec2-answer {
margin-bottom: 80px;
}
}
@media print, screen and (min-width: 1280px) {
.section-link-wrapper {
margin-bottom: 80px;
}
}
@media (min-width: 1280px) {
.fp-classlist-cta {
margin-top: 0;
}
}
.p-lineup {
position: relative;
}
.p-blog-cta {
background-color: #fff;
border: 2px solid #ff8c00;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
margin: 32px auto;
max-width: 485px;
text-decoration: none;
color: #ff8c00;
font-size: 120%;
font-weight: bold;
position: relative;
cursor: pointer;
}
.p-blog-cta:after {
content: "";
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/header/next-icon.png);
background-size: contain;
background-repeat: no-repeat;
background-size: contain;
height: 26px;
position: absolute;
width: 26px;
right: 10px;
top: calc(50% - 13px);
}
.p-blog-cta:hover {
color: #ff8c00;
}
.p-blog-citation {
border-left: 5px solid rgba(0, 0, 0, 0.25);
padding-left: 20px;
margin: 40px 0;
}
.p-blog-flex {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-bottom: 32px;
}
.p-blog-flex > * {
width: calc(50% - 16px);
}
.p-blog-flex p {
text-align: center;
margin: 0;
}
.p-blog-flex img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-blog-baloon {
display: flex;
align-items: center;
gap: 32px;
margin: 32px 0;
}
@media screen and (max-width:1023px) {
.p-blog-baloon {
align-items: flex-start;
}
}
.p-blog-baloon.left {
flex-direction: row;
}
.p-blog-baloon.left figure {
border: 2px solid #00a3af;
}
.p-blog-baloon.right {
flex-direction: row-reverse;
}
.p-blog-baloon.right figure {
border: 2px solid #f39800;
}
.p-blog-baloon-chat {
position: relative;
display: block;
margin: 0;
padding: 16px;
font-size: 16px;
font-weight: 500;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
line-height: 1.25;
flex: 1;
}
.left .p-blog-baloon-chat {
color: #00a3af;
border: solid 3px #00a3af;
}
.left .p-blog-baloon-chat p {
color: #00a3af;
}
.left .p-blog-baloon-chat p:last-child {
margin-bottom: 0;
}
.right .p-blog-baloon-chat {
color: #f39800;
border: solid 3px #f39800;
}
.right .p-blog-baloon-chat p {
color: #f39800;
}
.right .p-blog-baloon-chat p:last-child {
margin-bottom: 0;
}
.p-blog-baloon-chat:after {
content: "";
border-style: solid;
border-color: transparent;
position: absolute;
top: calc(50% - 6px);
display: block;
border-width: 0.375em 0.64952em;
}
@media screen and (max-width:1023px) {
.p-blog-baloon-chat:after {
top: 24px;
}
}
.left .p-blog-baloon-chat:after {
left: -12px;
border-left: 0;
border-right-color: #00a3af;
}
.right .p-blog-baloon-chat:after {
right: -12px;
border-right: 0;
border-left-color: #f39800;
}
.p-blog-baloon figure {
border-radius: 50%;
background-color: white;
width: 80px;
height: 80px;
margin: 0;
overflow: hidden;
}
@media screen and (max-width:1023px) {
.p-blog-baloon figure {
width: 60px;
height: 60px;
}
}
.p-blog-baloon figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-blog-question {
color: #00a3af;
font-weight: 700;
font-size: 1.125rem;
margin: 2.5rem 0;
}
.p-blog-question:before {
content: "";
display: inline-block;
background-color: #00a3af;
height: 2px;
width: 32px;
margin-right: 0.5rem;
transform: translateY(-6px);
}
.p-blog-profile {
font-size: 2rem;
color: #f39800;
font-weight: 700;
margin: 2rem 0 1rem 0;
}
.p-blog-profile-table {
margin-bottom: 1.5rem;
}
.p-blog-profile-table th,
.p-blog-profile-table td {
padding: 0.25rem;
}
.p-blog-profile-table td:before {
content: "：";
display: inline-block;
margin-right: 0.25rem;
}
.p-blog-feature {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #ffc371;
border-radius: 10px;
padding: 32px;
display: block;
}
.p-blog-feature dl {
display: flex;
align-items: center;
border-bottom: 1px solid #ffc371;
margin-bottom: 10px;
}
@media screen and (max-width:1023px) {
.p-blog-feature dl {
flex-direction: column;
align-items: flex-start;
}
}
.p-blog-feature dl:last-child {
border-bottom: none;
margin-bottom: 0;
}
.p-blog-feature dt {
width: 100px;
white-space: nowrap;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width:1023px) {
.p-blog-feature dt {
margin-bottom: 1rem;
text-align: left;
}
}
.p-blog-feature dd {
flex: 1;
border-left: 1px solid #ffc371;
padding-left: 1rem;
margin-left: 0;
}
.p-blog-feature dd ul {
margin-bottom: 0;
}
@media screen and (max-width:1023px) {
.p-blog-feature dd {
border-left: none;
padding-left: 0;
}
}
.p-blog-photocap {
width: calc(100% - 2rem);
background-color: white;
padding: 2rem 2rem calc(2rem - 1em);
border-radius: 8px;
margin: -4rem auto 4rem;
position: relative;
z-index: 50;
}
.p-blog-photocap h4 {
color: #ff8c00;
font-weight: 400;
font-size: 1.25rem;
margin-bottom: 0.5em;
}
.p-blog-appreserve {
position: relative;
width: 100%;
overflow: hidden;
text-align: left;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 140, 0, 0.4);
border-radius: 5px;
}
.p-blog-appreserve .swiper-slide {
padding: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width:599px) {
.p-blog-appreserve .swiper-slide {
padding: 1rem;
}
}
.p-blog-appreserve .swiper-slide img {
border: 1px solid #999;
margin-bottom: 1rem;
}
.p-blog-appreserve .swiper-button-next::after,
.p-blog-appreserve .swiper-button-prev::after {
font-size: 1rem;
color: white;
width: 48px !important;
height: 48px !important;
aspect-ratio: 1/1;
border-radius: 24px;
background-color: #192f60;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
}
.p-blog-appreserve .swiper-button-next::after {
transform: translate(-16px, -48px);
}
.p-blog-appreserve .swiper-button-prev::after {
transform: translate(16px, -48px);
}
.p-blog-table {
border: 1px solid #999;
background-color: rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem;
}
.p-blog-table td,
.p-blog-table th {
border: 1px solid #999;
padding: 0.75rem;
}
.p-blog-table th {
background-color: #ccc;
}
.p-blog-lesson {
display: flex;
padding: 1rem;
gap: 2rem;
justify-content: space-between;
align-items: center;
border: 1px solid #ffc371;
border-radius: 8px;
margin-bottom: 2rem;
background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (max-width:599px) {
.p-blog-lesson {
gap: 0;
flex-direction: column;
align-items: stretch;
}
}
.p-blog-lesson-text {
flex: 1;
}
.p-blog-lesson-text h3 {
font-size: 1.25rem;
font-weight: 700;
border-bottom: 2px solid #ffc371;
margin-bottom: 1rem;
}
.p-blog-lesson-image {
flex-shrink: 0;
aspect-ratio: 16/10;
}
@media screen and (min-width:600px) {
.p-blog-lesson-image {
width: 40%;
}
}
.p-blog-lesson-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-blog-map {
width: 100%;
aspect-ratio: 16/10;
}
.p-blog-map iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-blog-flow {
display: flex;
flex-direction: column;
align-items: center;
}
.p-blog-flow-item {
border: 2px solid #ff8c00;
background-color: white;
border-radius: 8px;
display: flex;
}
@media screen and (max-width:1023px) {
.p-blog-flow-item {
flex-direction: column;
}
}
.p-blog-flow-item h4 {
background-color: #ff8c00;
color: white;
white-space: nowrap;
padding: 1rem;
width: 35%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width:1023px) {
.p-blog-flow-item h4 {
width: 100%;
}
}
.p-blog-flow-item p {
width: 65%;
margin: 0;
padding: 1rem;
}
@media screen and (max-width:1023px) {
.p-blog-flow-item p {
width: 100%;
}
}
.p-blog-flow-line {
width: 12px;
height: 24px;
display: block;
background-color: #ff8c00;
margin: 0;
padding: 0;
}
.p-blog-avatar {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.p-blog-avatar-photo {
width: 48px;
height: 48px;
border-radius: 24px;
overflow: hidden;
}
.p-blog-avatar-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
#blog-single strong {
background: linear-gradient(transparent 60%, rgba(255, 127, 127, 0.5) 50%);
}
#blog-single details {
margin-bottom: 1rem;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
}
#blog-single details[open] summary:after {
transform: rotate(180deg);
}
#blog-single details summary {
padding: 1rem 2.5rem 1rem 1rem;
list-style: none;
cursor: pointer;
position: relative;
display: flex;
gap: 0.5rem;
text-decoration: underline;
background-color: rgba(255, 255, 255, 0.25);
}
#blog-single details summary:before {
content: "Q.";
font-weight: 700;
color: #ff8c00;
}
#blog-single details summary:after {
content: "";
position: absolute;
right: 16px;
top: calc(50% - 3px);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
}
#blog-single details p {
padding: 1rem 2.5rem 1rem 1rem;
display: flex;
gap: 0.5rem;
background-color: rgba(255, 255, 255, 0.9);
border-top: 1px solid rgba(0, 0, 0, 0.2);
margin: 0;
}
#blog-single details p:before {
content: "A.";
font-weight: 700;
color: #ff8c00;
}
#blog-landing strong {
background: linear-gradient(transparent 60%, rgba(255, 127, 127, 0.5) 50%);
}
.main-area {
padding-top: 0 !important;
}
#blog-single {
line-height: 1.7 !important;
}
.class-overview__class-link--btn_cta {
position: relative;
}
.class-overview__class-link--btn_cta::before {
content: none;
}
.class-overview__class-link--btn_cta::after {
position: absolute;
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ad_group.png);
background-repeat: no-repeat;
background-size: cover;
top: 50%;
right: 6px;
transform: translateY(-50%);
}
.class-overview__class-link--btn_cta:hover {
background-color: rgba(255, 255, 255, 0.75);
color: #fe5415;
}
.class-overview__class-link--btn:hover.class-overview__class-link--btn_cta::after {
opacity: 1;
}
.result-top3-class-btn {
background-color: white;
border: 1px solid #fe5415;
position: relative;
cursor: pointer;
}
.result-top3-class-btn:after {
position: absolute;
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ad_group.png);
background-repeat: no-repeat;
background-size: cover;
top: 50%;
right: 6px;
transform: translateY(-50%);
}
.result-top3-class-btn:hover {
background-color: rgba(255, 255, 255, 0.75);
}
.result-btn-txt {
color: #fe5415;
}
.result-btn-txt:hover {
color: #fe5415;
}
.result-btn-txt .result-link-icon {
display: none;
}
.header-box-class-overview {
margin-bottom: 50px;
}
.p-limited {
padding-top: 2rem;
}
.p-limited strong {
background-image: linear-gradient(transparent 60%, rgba(255, 127, 127, 0.5) 50%);
}
.p-limited-title {
font-size: min(2.5rem, 7vw);
text-align: center;
margin: 1rem 0 2rem 0;
}
.p-limited-flag {
text-align: center;
display: inline-block;
margin: 0 auto;
position: relative;
height: 40px; line-height: 40px; text-align: center;
padding: 0 10px; background: #ff8c00; color: white; box-sizing: border-box;
font-size: 0.875rem;
}
.p-limited-flag:before, .p-limited-flag:after {
position: absolute;
content: "";
width: 20px;
height: 40px; z-index: 1;
background-size: cover;
background-repeat: no-repeat;
}
.p-limited-flag:before {
top: 0;
left: -20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ribon_left.png);
}
.p-limited-flag:after {
top: 0;
right: -20px;
background-image: url(https://mlodmvte7umx.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://carneliandance.tokyo/wp-content/themes/carneliantheme/images/ribon_right.png);
}
.p-limited-flag-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.p-limited-cover {
width: 100%;
aspect-ratio: 16/8;
object-fit: cover;
margin: 2rem auto 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16px 16px 0 0;
background-color: black;
position: relative;
overflow: hidden;
}
@media screen and (max-width:1023px) {
.p-limited-cover {
aspect-ratio: 16/12;
}
}
.p-limited-cover h2 {
color: white;
position: relative;
z-index: 100;
font-size: min(8rem, 12vw);
font-weight: 700;
}
.p-limited-cover > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
opacity: 0.7;
z-index: 1;
}
.p-limited-info {
position: absolute;
display: flex;
align-items: center;
z-index: 100;
bottom: 24px;
left: 24px;
gap: 1rem;
}
@media screen and (max-width:1023px) {
.p-limited-info {
left: 12px;
bottom: 12px;
}
}
.p-limited-info img {
width: 80px;
height: 80px;
border-radius: 40px;
object-fit: cover;
overflow: hidden;
}
@media screen and (max-width:1023px) {
.p-limited-info img {
width: 50px;
height: 50px;
border-radius: 25px;
}
}
.p-limited-info p {
color: white;
margin: 0;
font-size: 0.875rem;
}
.p-limited-info p strong {
color: white;
font-size: 1.125rem;
}
@media screen and (max-width:1023px) {
.p-limited-info p {
font-size: 0.75rem;
}
.p-limited-info p strong {
font-size: 1rem;
}
}
.p-limited-schedule {
display: flex;
justify-content: space-around;
background-color: white;
padding: 1.5rem 1.5rem 0.75rem;
border-radius: 0 0 16px 16px;
margin-bottom: 2rem;
}
@media screen and (max-width:1023px) {
.p-limited-schedule {
flex-direction: column;
align-items: center;
}
}
.p-limited-subtitle {
text-align: center;
color: #ff8c00;
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.p-limited-acordion {
background-color: white;
border-radius: 16px;
margin-bottom: 2rem;
padding: 1.5rem 1.5rem 0.75rem;
position: relative;
}
.p-limited-acordion[open] summary:after {
content: "-";
}
.p-limited-acordion summary {
text-align: center;
font-size: 1.25rem;
font-weight: 700;
list-style: none;
cursor: pointer;
}
.p-limited-acordion summary:after {
content: "+";
width: 24px;
height: 24px;
border-radius: 12px;
background-color: #ff8c00;
font-size: 12px;
line-height: 1;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 1.5rem;
right: 1rem;
}
.p-limited-acordion-schedule {
display: flex;
justify-content: space-around;
padding-top: 1.5rem;
}
@media screen and (max-width:1023px) {
.p-limited-acordion-schedule {
flex-direction: column;
align-items: center;
}
}
.p-limited-date {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.75rem;
}
@media screen and (max-width:599px) {
.p-limited-date {
gap: 0.5rem;
}
}
.p-limited-date-label {
width: 80px;
padding: 0.25rem;
margin-bottom: 0;
font-size: 0.75rem;
text-align: center;
color: white;
border-radius: 4px;
}
.p-limited-date-label.ng {
background-color: red;
}
.p-limited-date-label.ok {
background-color: green;
}
.p-limited-date p:not([class]) {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.p-limited-date p:not([class]) small {
font-size: 0.75rem;
}
@media screen and (max-width:1023px) {
.p-limited-date p:not([class]) {
font-size: 4vw;
}
.p-limited-date p:not([class]) small {
font-size: 2.5vw;
}
}
.p-limited-date:has(.ng) p:not([class]) {
opacity: 0.25;
}
.p-limited-feature h3 {
margin-bottom: 1rem;
}
@media screen and (min-width:1024px) {
.p-limited-feature > div {
display: flex;
gap: 1rem;
}
.p-limited-feature > div ul {
width: 50%;
}
}
.p-limited-btn {
display: flex;
align-items: center;
justify-content: center;
width: max(50%, 300px);
background-color: #ff8c00;
color: white;
padding: 1rem;
border-radius: 8px;
text-decoration: none;
margin: 2rem auto;
transition: background-color 0.3s ease, color 0.3s ease;
}
.p-limited-btn:hover {
color: white;
background-color: #cc7000;
}
.p-limited-btn.deactivated {
background-color: #ccc;
color: #f3f3f3;
pointer-events: none;
cursor: not-allowed;
}
.p-limited-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.p-limited-cta br {
display: none;
}
@media screen and (max-width:1023px) {
.p-limited-cta {
flex-direction: column;
gap: 0;
}
}
.p-landing iframe {
width: 100%;
height: 100%;
border: none;
aspect-ratio: 16/9;
}
.p-landing-cta {
max-width: 509px;
margin: 2rem auto 0;
display: block;
}
.p-landing-cta img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-landing-flex {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
gap: 1rem;
width: 100%;
}
@media screen and (max-width:599px) {
.p-landing-flex {
flex-direction: column;
gap: 0;
}
}
.p-landing-flex > a {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 16/10;
width: calc((100% - 1rem) / 2);
font-size: 2rem;
font-weight: 600;
color: white;
text-decoration: none;
position: relative;
z-index: 2;
}
.p-landing-flex > a:hover img {
opacity: 0.75;
}
@media screen and (max-width:599px) {
.p-landing-flex > a {
width: 100%;
}
}
.p-landing-flex > a img {
position: absolute;
transition: opacity 0.5s ease;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
z-index: 0;
}
.p-landing-voice {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
@media screen and (max-width:1023px) {
.p-landing-voice {
flex-direction: column;
}
}
.p-landing-voice p:has(img) {
flex-shrink: 0;
width: 150px;
height: 150px;
aspect-ratio: 1/1;
border-radius: 100px;
overflow: hidden;
}
.p-landing-voice img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-landing .p-limited-schedule {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
margin-bottom: 1rem;
}
.p-landing .p-limited-schedule > p {
display: none;
}
@media screen and (max-width:599px) {
.p-landing .p-limited-schedule {
margin: 0 -1rem 1rem;
padding: 1rem 0 0.5rem 0;
}
}
@media screen and (max-width:599px) {
.u-pc-only {
display: none;
}
}
@media screen and (min-width:600px) {
.u-sp-only {
display: none;
}
}
@media screen and (max-width:1023px) {
.pc-only {
display: none;
}
}
@media screen and (min-width:1024px) {
.sp-only {
display: none;
}
}
.p-top-movie {
width: 100%;
position: relative;
height: 56.25vw;
max-height: 75vh;
}
@media screen and (max-width:1023px) {
.p-top-movie {
height: 75vw;
}
}
@media screen and (max-width:599px) {
.p-top-movie {
height: 60vh;
max-height: inherit;
}
}
.p-top-movie video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.p-top-movie__rate {
position: absolute;
bottom: 2rem;
right: 1rem;
width: min(200px, 25vw);
height: min(200px, 25vw);
z-index: 2;
padding: min(0.5rem, 1vw);
margin: 0;
opacity: 0;
animation: fade-in 0.5s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
@media screen and (min-width:1280px) {
.p-top-movie__rate {
right: calc((100vw - 1280px) / 2 + 1rem);
}
}
.p-top-movie__rate img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-top-movie ul {
position: absolute;
bottom: 2rem;
left: 1rem;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
z-index: 2;
}
@media screen and (min-width:1280px) {
.p-top-movie ul {
left: calc((100vw - 1280px) / 2 + 1rem);
}
}
.p-top-movie__copy-1, .p-top-movie__copy-2 {
background-color: white;
color: #e47600;
display: inline-block;
margin: 0;
padding: 0.75rem;
flex: 0;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width:1023px) {
.p-top-movie__copy-1, .p-top-movie__copy-2 {
padding: 0.5rem;
}
}
.p-top-movie__copy-1 {
margin-top: 2rem;
font-size: 2.5rem !important;
opacity: 0;
animation: slide-in-left 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.p-top-movie__copy-1 strong {
font-size: 2.5rem !important;
color: #e47600;
margin: 0 0.25rem;
}
@media screen and (max-width:599px) {
.p-top-movie__copy-1 {
margin-top: 1rem;
font-size: 5.5vw !important;
}
.p-top-movie__copy-1 strong {
font-size: 6vw !important;
}
}
.p-top-movie__copy-2 {
opacity: 0;
font-size: 2.5rem !important;
animation: slide-in-left 0.5s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@media screen and (max-width:599px) {
.p-top-movie__copy-2 {
font-size: 5.5vw !important;
}
}
.p-top-banner {
padding: 2rem 0 0;
}
@media screen and (max-width:599px) {
.p-top-banner {
padding: 1rem 0;
}
}
.p-top-banner ul {
list-style: none;
margin: 0;
padding: 0;
}
.p-top-banner ul li {
margin: 0;
}
.p-top-banner ul.swiper-wrapper {
justify-content: flex-start;
gap: 0;
}
.p-top-banner ul.swiper-wrapper li {
width: auto;
}
.p-top-banner p {
margin: 0.5rem 0 0;
}
.p-top-banner .swiper {
width: 100%;
}
.p-top-banner .swiper-pagination {
position: relative;
margin-top: 1rem;
display: block;
}
.p-top-banner .swiper-pagination-bullet {
background-color: rgba(246, 173, 73, 0.5);
}
.p-top-banner .swiper-pagination-bullet[aria-current=true] {
background-color: #f6ad49;
}
.p-top-banner .swiper-slide {
width: 100%;
}
@media screen and (min-width:600px) {
.p-top-banner .swiper-slide {
width: calc((100% - 1rem) / 2);
}
}
.p-top-banner ul li a,
.p-top-banner ul li img {
display: block;
width: 100%;
height: auto;
}
.p-top-lineup {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 2rem auto;
}
.p-top-lineup .fp-classlist-carousel-item-img {
width: 100%;
height: inherit;
aspect-ratio: 16/9;
}
.p-top-lineup .fp-classlist-carousel-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-top-lineup > a {
width: calc((100% - 2rem) / 3);
margin: 0;
}
@media screen and (max-width:599px) {
.p-top-lineup > a {
width: calc((100% - 1rem) / 2);
}
}
.p-top-lineup .fp-classlist-carousel-item-info {
background-color: white;
}
.p-top-lineup .fp-classlist-carousel-item-desc {
font-size: 1rem !important;
height: auto;
}
@media screen and (max-width:1023px) {
.p-top-lineup .fp-classlist-carousel-item-desc {
font-size: 0.875rem !important;
}
}
@keyframes slide-in-left {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.swiper {
overflow: hidden;
}
@media screen and (max-width:599px) {
.swiper-slide {
width: 100% !important;
}
}