@charset "UTF-8";

/*
Theme Name: Platanus Theme
Author: LOCAL DESIGN LAB
Author URI: https://localdesign-lab.com/
Version: 1.0
Text Domain: Platanus Theme
*/

/*____________________________________________
RESET CSS by Eric Meyer
____________________________________________*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
a {
    text-decoration:none;
}
 
a:hover,a.selected{
    text-decoration:none;
}
/* END RESET */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(60px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/*== 背景が流れる（右から左） */
.bgright:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:  #333;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: left top;
}

/*hoverした際の形状*/
.bgright:hover:before{
  transform-origin:right top;
  transform:scale(1, 1);
}


a { color: #666; }
div.entry-body a { color: #bfaf31; }
div.entry-body a:hover { opacity:0.6; transition: 0.3s ease-in-out;}
a:hover { color: #999; transition: 0.3s ease-in-out;}

div.metaslider { position: relative; width:100%; z-index:0; overflow:hidden; }
@media (801px <= width < 2400px) { 
	div.metaslider { max-height:calc(100vh - 25vh); }
}

strong {font-weight:600;}

body {	margin: 0;padding:0;line-height:1.4; font-family: 'Noto Sans Japanese', san-serif; font-size: 1.0em;color: #555; font-size: 0.93rem;}
div#wrapper {position:relative;}
header { position:relative; margin:0; padding:0 0 1rem; width:100%;font-family: 'Noto Sans Japanese', san-serif; /*Noto Sans Japanese指定*/}
header h1 { padding: 1.6rem 0 0 2rem;}
header h1 img { width: 7rem; }

/* ヘッダーナビ */
header nav ul { position: absolute; display: flex; top: 3rem; right: 1rem; }
header nav ul li { margin:0 1.3rem 0; font-weight: 600; }

/*
body.page-id-315 header nav ul li a { color: #fff!important; text-shadow: 0 0 4px #666;}
body.page-id-315 header nav ul li a:hover { color: #ccc!important; transition: 0.3s ease-in-out!important;}
*/


body header nav ul li#menu-item-906 a,body header nav ul li#menu-item-918 a {
	display:block;
	width: 80px;
	height:45px;
	margin-top:-15px;
	border:1px solid #ccc;
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

}

body header nav ul li#menu-item-906 a { background:url(images/bnr_ccc.png) no-repeat 100% 100%/contain; }
body header nav ul li#menu-item-918 a { background:url(images/bnr_csplayfullink.png) no-repeat 100% 100%/contain; }

div#container { position:relative;}

/* お知らせ */
div#container div#NewsArea { margin:5em auto; width:85%; font-size: 0.9rem; }
div#container div#NewsArea h2 { display:block; padding: 0 0.3rem 1rem; font-size:1.3rem; font-weight:600;}
div#container div#NewsArea h2 span { display:inline-block; font-size:0.8rem; font-weight:400; margin:6px 0 0 1rem; border:1px solid #ccc; padding: 0 0.3rem; vertical-align:top;}
div#container div#NewsArea ul { display:block; margin: 0 0 0 0.3rem; }
div#container div#NewsArea ul li { padding: 0.5rem 0 0.5rem 5.3rem; text-indent: -5.3rem; border-bottom: 1px dotted #ccc; line-height:1.8rem; }
div#container div#NewsArea ul li time { color: #999; margin-right:0.8rem; font-size:0.9rem; }

div#introduction { position: relative; margin:0; padding:0; width:100%;}
div#introduction div.inner { position: relative; display:block; margin: -36px 0 0 60px; padding: 2rem; background:#fff; border-radius:35px; width:415px; z-index:10; }
div#introduction div.inner h1 { display: inline; float:left;font-size: 2.6rem; font-weight:800;  margin: 0 1.5rem 0 0; line-height:3rem;	font-family: 'Questrial', 'Noto Sans Japanese', san-serif; /*Noto Sans Japanese指定*/}
div#introduction h1 span { display: list-item; list-style-type:none;}
div#introduction div.inner p { float:left; width:11rem; text-align:justify;font-size:1.0rem; line-height:2.2rem; font-weight:500;}

div#introduction div.entrance { position:relative; width:100%; min-height:600px; margin:2rem 0;}
div#introduction div.entrance div.text {  position:absolute;  left: 44%;  line-height:2.0;}
div#introduction div.entrance div.text h2 {font-size: 1.5rem;line-height:2.2rem; font-weight: 600; margin-bottom:2rem;}
div#introduction div.entrance div.text h2 span { display:block; color: #aaa; font-size:0.8rem; }
div#introduction div.entrance div.text p {  width: 47%;}
div#introduction div.entrance div.text a {  position:relative;display:inline-block; border: 1px solid #ccc; padding:0.5rem 1rem ;  font-weight:600; font-size:0.9rem;}



div#introduction div.entrance div.concept {  position:relative;  width:100%; margin: 0 0 7rem; min-height:22rem; }
div#introduction div.entrance div.concept div.text a { margin:1.5rem 0 0;}
div#introduction div.entrance div.text a:hover { background: #ccc; color: #fff; }
div#introduction div.entrance div.text a::after { position:absolute;content:url(images/btn_arw.png); right: -3rem;}
div#introduction div.entrance div.trial { position:relative; width:85%; margin: 0 auto 3rem; min-height:15rem;  }

/* エントランス動画*/

div#introduction{ background:url(images/tv_nami.png) no-repeat; background-size:contain; background-position:0 5px;}


/* エントランス画像01*/
div#introduction div.entrance p.img_01 { position:absolute; display:block; width:40%; height:auto; border-top-right-radius:10px; border-bottom-right-radius:10px;}
div#introduction div.entrance p.img_01 img { width:100%; border-top-right-radius:10px; border-bottom-right-radius:10px;}
div#introduction div.entrance p.img_01::after {
	content: '';
	position:absolute; 
	width:100%;
	height:100%;
	top:5px;
	right:-10px;
	background:url(images/bg_entrance.png) #f0f0f0;
	border-top-right-radius:10px; border-bottom-right-radius:10px;
	z-index:-1;}

/* エントランス画像02*/
div#introduction div.entrance p.img_02 { position:absolute; display:block; width:27%; height:auto;top: 9rem; right:0;border-top-left-radius:10px; border-bottom-left-radius:10px; overflow:hidden;}

div#introduction div.entrance p.img_02 img { width:100%; border-top-left-radius:10px; border-bottom-left-radius:10px; }
div#introduction div.entrance p.img_02::after {
	content: '';
	position:absolute; 
	width:100%;
	height:100%;
	top: 0;
	left:10px;
	background:url(images/bg_entrance.png) #f0f0f0;
	border-top-left-radius:10px; border-bottom-left-radius:10px;
z-index:-1;}


div#introduction div.entrance div.trial div.text h2 {font-size: 1.3rem;line-height:2.0rem; font-weight: 400; margin-bottom:0.5rem;}
div#introduction div.entrance div.trial div.text {  position:absolute;  left: 70%;  line-height:2.0;}

/* エントランス画像03*/
div#introduction div.entrance div.trial div.text a { margin:1rem 0 0;}
div#introduction div.entrance p.img_03 { position:absolute; display:block; width:65%; height:auto;  }

div#introduction div.entrance p.img_03 img { width:100%; border-radius:10px; }
div#introduction div.entrance p.img_03::after {
	content: '';
	position:absolute; 
	width:100%;
	height:100%;
	top: 5px;
	right:-10px;
	background:url(images/bg_entrance.png) #f0f0f0;
	border-radius:10px;
	z-index:-1;}

/* youtube feed */
div.sby_item {height:150px; overflow:hidden;}
div.sb_youtube div.sby_item div.sby_inner_item a.sby_video_thumbnail {width:auto!important; height:150px!important;}


/* SNS&C.C.C.C.SCHOOL　*/
div#sns,div#school{ width:100%; margin: 0 auto 5rem; display:flex;justify-content: space-between;}
div#sns { margin: 5rem auto 0; background:url(images/sns_nami.png); background-repeat:repeat-x; background-size:contain; background-color: #f0f0f0; }
div#sns div.box,div#school div.box { width:50%; margin: 0; overflow:hidden;}
div#sns div.box { text-align:center; margin: 3rem 2rem 2rem;}
div#sns div.box h3 { display:inline;font-size: 1.2rem; font-weight: 600; line-height:4rem;}
div#sns div.box h3.youtube,div#sns div.box h3.instagram { margin-right: 1rem;}
div#sns div.box p{ display:inline; font-size: 0.8rem;}
div#sns div.box p.bnr,div#sns div.box div#sb_instagram { display:inline-block; font-size: 0.8rem; height:220px; overflow:hidden;}
div#sns div.box p.bnr img {height:100%; width:auto;}
div#sns div.box p.bnr a{ display:block;}

/* C.C.C.SCHOOL　*/
div#bnr { width:100%; margin:0 auto;}
div#school{ margin: 0; }
div#school div.box { display:table;  font-size: 1.3rem; font-weight:500;}
div#school div.box p a { display:inline-block; text-align:center;line-height:13rem; width:100%; color:#fff;}

div#bnr h2 { text-align:center; margin:1rem 0; font-size:1.5rem; }

div#school div.box.yellow { background:url(images/bnr_polyglot.png) no-repeat; background-color:#FFE36F;background-size:cover;}
div#school div.box.blue { background:url(images/bnr_dance.png) no-repeat; background-color:#BCEAFF; background-size:cover;}

div.sidebar div#school div.box.yellow { background-color:#FFE36F; background-image:none;}
div.sidebar div#school div.box.blue {  background-color:#BCEAFF; background-image:none; }


div.sidebar { width:20%; display:block; float:left; margin:0;}
div.sidebar div#school { width:90%; display:block; margin:0;}
div.sidebar div#bnr h2 { font-size:0.9rem; text-align:left; border:none; color:#ccc; margin:2rem 0 0.5rem; padding-left:1rem;}
div.sidebar div#school div.box { width:100%; margin: 0 0 0.5rem; height:1rem;}
div.sidebar div#school div.box p a { display:block;text-align:left; vertical-align:middle; color: #555; font-size:1.0rem; padding:0.5rem 0 0 1rem;margin-bottom:1rem;}
div.sidebar div#school div.box p a:hover { opacity:0.8;}

div.sidebar.about { display:none;}

div.sidebar div#school div.box p a{ line-height:1.0; }
div.sidebar div#school div.box p a,div.sidebar div#school div.box p a { line-height:1.0;}
div.sidebar.school_polyglot div#school div.box p a,div.sidebar.school_dance div#school div.box p a { line-height:1.0;}
div.sidebar.school_polyglot div#school div.box.yellow { background:#fff;}
div.sidebar.school_polyglot div#school div.box.blue { background:#BCEAFF;}
div.sidebar.school_polyglot div#school { width:100%; }
div.sidebar.school_polyglot div#school div.box.blue { width:90%; }

div.sidebar.school_dance div#school div.box.blue { background:#fff;width:100%;}
div.sidebar.school_dance div#school div.box.yellow { background:#FFE36F; }
div.sidebar.school_dance div#school { width:100%; }
div.sidebar.school_dance div#school div.box.yellow { width:90%; }

div#school_wrapper { border-top:20px solid #fff; z-index:-10;}
div#school_wrapper.school_polyglot { background:#ffea95;}
div#school_wrapper.school_dance { background:#BCEAFF;}

div.school_polyglot div.entry h1.school { position:absolute; background: #ffea95; padding: 0.5rem 1rem 0 2rem; font-size:2.6rem; top:-6rem; right:0; z-index:30; font-family:'Questrial'; border-top-left-radius:20px; border-top-right-radius:0;}

div.school_dance div.entry h1.school { position:absolute; background: #BCEAFF; padding: 0.5rem 1rem 0 2rem; font-size:2.6rem; top:-6rem; right:0; z-index:30; font-family:'Questrial'; border-top-left-radius:20px; border-top-right-radius:0;}
div#school_wrapper article { margin-top:-15px;}

div#school_wrapper hr.wp-block-separator { background: #555;}
div#school_wrapper table td { border-color: #555;}

figure.wp-block-image.small { overflow:hidden; text-align:center;}
figure.wp-block-image.small img { width:90%;}

/*コンテンツページ*/
article { position:relative; float:right;  width:80%; margin: 0 0 5rem;}
article div.metaslider img {border-top-left-radius:20px; border-bottom-left-radius:20px;}

article div.entry { position:relative;}
article div.entry h1 { position:absolute; background: #fff; padding: 0.5rem 1.5rem 0 0; font-size:2.6rem;z-index:30; top: -7rem;  font-family:'Questrial'; border-top-right-radius:20px;} 

/* article div.entry h1 { position:absolute; padding: 0.5rem 1.5rem 0 0; z-index:30; top: -9rem;  font-family:'Questrial'; font-size: 8.0rem; opacity:0.8; font-weight:800; color: #333;letter-spacing:4px;} */


article div.entry.news ul { margin:0 0 3rem;}
article div.entry.news ul li { margin:1rem 0; padding-bottom:1rem; border-bottom:1px dotted #ccc;}
article div.entry.news ul li span { margin:0 2rem 0 0; color:#999;}
article div.entry h2 { font-size:1.4rem; font-weight: 600; margin:0 0 2rem; padding-top:1rem; background:url(images/head_bg.png) no-repeat; }
article div.entry h2.sub_ttl { font-size:1.1rem; font-weight: 400; margin:-3.5em 0 4rem 0; padding-top:0; background:none; }

article div.entry h3 { font-size:1.2rem; font-weight: 500; margin:1rem 0;}
article div.entry h3.small a strong { display:block; font-size:0.95rem; font-weight: 400; line-height:1.7em;}
article div.entry h4 { font-size:1.1rem; font-weight: 500;}
article div.entry div.entry-body {margin:3rem 5rem 3rem 0; line-height:1.6rem; padding-top:1rem;}
article div.entry div.entry-body p {margin:1rem 0; text-align:justify;}
article div.entry div.entry-body div.wp-block-column p {margin-top:0; }
article div.entry div.entry-body p.small {margin:0 0 0; color: #999;}
article div.entry div.entry-body table {margin:0.5rem 0; }
article div.entry div.entry-body table td { padding:1rem 0.5rem 1rem;  border:0px; border-bottom: 1px solid #ccc!important;}
article div.entry div.entry-body img { height:auto;}

article div.entry div.entry-body div.wp-block-columns { margin: 2rem 0; }


/* ABOUTページ */
/*
div#metaslider-id-46 { position:absolute; top:0; z-index:-5;}
article.about div.metaslider img {border-radius:0px;}
article.about {width:100%; float:none; margin:62% 0 0 ;}
article.about div.entry {margin:5rem;}
article.about div.entry h1 { display:none;}
article.about div.entry div.entry-body h2 { font-size: 1.8rem; margin: 3rem 0 2rem; font-weight: 600; line-height:1.6;}
article.about div.pc-none {display:none;}
*/
hr.wp-block-separator { margin: 3rem 0; height:1px; background: #ccc; border:none;}

/*コンテンツページ - NEWSページ*/

article div.entry h1.cat_title { position:absolute; background: #fff; padding: 0.5rem 1.5rem 0 0; font-size:2.6rem; top:-7rem; z-index:30; font-family:'Questrial'; border-top-right-radius:10px;}
article div.entry h2.blogtitle { margin:5rem 0 0; font-size:1.6rem; border-bottom: 1px solid #ccc;}
figure.wp-block-embed  { margin: 3rem 5%;}
article div.entry p.meta-date { margin:0.3rem 0 0; color: #999; font-size:0.9rem;}

/*コンテンツページ - LESSONページ*/
article div.entry div.entry-body div.wp-block-column.schedule { background: #f0f0f0; border-radius:10px; padding: 1rem 2rem;}
article div.entry div.entry-body p.voice { }
article div.entry div.entry-body .voice a {
	display:block;
	font-size: 2rem;
	background:url(images/bnr_voice.png) no-repeat;
	background-size:cover;
	width:100%;
height:247px;
	overflow:hidden;
	color: #fff; font-weight:500; 

text-align:center;
}
article div.entry div.entry-body .voice a span { line-height:247px; display:inline-block;}
/*コンテンツページ - 公演個別ページ*/
article.shows { width: 80%; margin:0 0 0;}
article.shows div.entry { position:relative; margin: 0rem 0 0;}
article.shows div.entry div.entry-body {margin:3rem 0rem 3rem 0;}
/*article.shows div.entry div.entry-body p {margin:3rem 5rem 3rem 0;}*/
article.shows div.entry div.entry-body p { text-align: left; }
article.shows div.entry h1 { position:relative; font-size: 1.8rem; border-radius:0px; background:none;top:0; margin: 0 0 5rem; padding:0;}
article.shows div.entry div.metaslider { position:absolute; display:block; top: -600px; margin:0; overflow:hidden;border-top-left-radius:20px; border-bottom-left-radius:20px; object-fit:cover; background:#f0f0f0; }
article.shows div.entry div.entry-body img {height:auto; }
article.shows div.entry div.entry-body div.metaslider img {border-top-left-radius:20px; border-bottom-left-radius:20px;  height:100%;  width:auto;}
article.shows div.entry div.entry-body { margin:600px 5rem 1rem 0; }

/* Contact Form　*/
article div.entry div.entry-body form.wpcf7-form { width:95%;}
article div.entry div.entry-body form.wpcf7-form p{ margin-bottom: 3rem;}
form.wpcf7-form label { font-weight:600;}
form.wpcf7-form label span { color: red; }
form.wpcf7-form input,form.wpcf7-form textarea { background: #ccc; border:none; font-size: 1.0rem; padding:1rem; border-radius:10px; color: #333; width:100%;}
form.wpcf7-form select { background: #ccc; border:none; font-size: 1.0rem; padding:1rem; border-radius:10px; color: #333; width:100%;}
form.wpcf7-form input:hover,form.wpcf7-form textarea:hover { background: #f0f0f0; }
form.wpcf7-form input.wpcf7-submit { width:105%; font-weight:666; letter-spacing:1rem;}
form.wpcf7-form input.wpcf7-submit:active { background: #aaa; width:100%;}

/* フッター　*/
footer { position:relative; background:#f0f0f0; margin:0 0 -30px; padding:0; height:7rem;}
footer p img { width:7rem; }
footer p.copy { position:absolute; bottom: 1rem; right:4rem; color: #999; font-size: 0.7rem; }
footer nav ul { position:absolute; display: flex; top: 2rem; right: 3rem; }
footer nav ul li { margin:0 1.5rem 0; font-weight: 600; }

/* お問い合わせボタン　*/
div#sidemenu {position:fixed; top:calc(93% - 110px); left:1rem;  writing-mode: vertical-rl; z-index:100;} 
div#sidemenu a { display:inline-block; padding:0.8rem 0.6rem; margin: 0.3rem 0; background:#D9C847; border-radius:30px; color: #fff; font-size: 0.8rem; }
div#sidemenu a img { width:20px; height:auto; margin-bottom:0.5rem; }

div#sidemenu a:hover { opacity:0.8; }

.grecaptcha-badge { visibility: hidden; }