@charset "UTF-8";
.pc {display: none;}
.sp {display: inherit;}


/* editor's note 2020.04.12 cre8orboi
.text_color {color: rgb(45,43,41);}
.bg_white {background-color: rgb(255,255,255);}
.bg_yellow {background-color: rgb(255,188.68);}
.bg_orange {background-color: rgb(230,170,70);}
.bg_gray {background-color: rgb(222,222,222);}
.bg_dark {background-color: rgb(200,200,200);}
*/

/**************************** header ********************************/
header {
position: relative;
width:84%;
height:100px;
margin: 0;
padding:0px 8%;
background: rgba(255,188,68,1.0);
}

header .header_logo {
float:left;
width:80px;
height:60px;
margin:0;
padding:20px 0;
}

header nav {
float:right;
height:100px;
}

header nav ul {
display: flex;
flex-wrap: wrap;
height:100px;
}

header nav ul a {
padding-left:1em;
padding-right:1em;
margin-right:2vw;
line-height: 1em;
font-family: cooper-black-std, serif;
font-weight: 400;
font-style: normal;
font-size: 120%;
}

header nav ul a:last-child {
padding-right:0em;
margin-right:0em;
}

header nav ul li {
height:1em;
padding-top:calc((100px - 1em) / 2);
padding-bottom:calc((100px - 1em) / 2);
}

header nav ul li:last-child {
padding-right:0em;
margin-right:0em;
}

#nav_btn {
position: fixed;
top:37.5px;
right:8%;
width:25px;
height:25px;
z-index: 9999999999;
background: url("../img/navi_btn.svg") 0 0 / 25px no-repeat;
animation: nav_btn 0.6s steps(10) forwards;
cursor: pointer;
}
@keyframes nav_btn {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px -250px; }
}

#nav_btn.active {
animation: nav_btn_active 0.6s steps(14) forwards;
}
@keyframes nav_btn_active {
  0% { background-position: 0px -250px; }
  100% { background-position: 0px -600px; }
}

#global_menu {
position: fixed;
width:24em;
height: 100%;
left:100%;
top:0;
padding-top:100px;
background: rgba(55,55,55,1.0) url("../img/bg_trans_6.svg") left top / 4px repeat;
z-index: 999999999;
transition: 1s;
}
#global_menu.active {
left:calc(100% - 24em);
}

#global_menu ul li {
width:17em;
margin-bottom: 1em;
margin-left:3em;
padding:0.5em;
background: white;
cursor: pointer;
font-weight: 700;
text-align: center;
}

.global_menu_wide {
display: inline-block;
width:calc(100% - 30px) !important;
margin: 5px;
padding:10px;
cursor: pointer;
letter-spacing: normal;
transition: 0.3s;
}

.global_menu_tel {
display: inline-block;
width:calc(100% - 30px) !important;
margin: 5px;
padding:10px;
cursor: pointer;
letter-spacing: normal;
transition: 0.3s;
}

.global_menu_box_2nd ul li:hover, .global_menu_wide:hover, .global_menu_tel:hover {
background: rgba(160,20,30,1.0);
color: rgba(246,244,241,1.0);
}


/**************************** KEYVISUAL ********************************/

.keyvisual {
clear: both;
position: relative;
width:100%;
}

.keyvisual .photo {
position: relative;
width:100%;
}

.keyvisual .catch_copy {
position: absolute;
top:10px;
left:-2.5%;
width:100%;
}

.keyvisual .catch_copy img {
width:105%;
}

.keyvisual h1 {
}

.keyvisual h1 .large {
}


/**************************** article ********************************/
article {
width:100%;
height:auto;
background: white;
}


/*************************** information ******************************/
.info {
display: flex;
flex-wrap:wrap;
align-items:center;
width:84%;
padding:30px 8%;
background: rgba(255,188,68,1.0);
}

.info .title {
width:10em;
margin-left:calc((100% - 10em) / 2);
font-family: cooper-black-std, serif;
font-weight: 400;
font-style: normal;
font-size: 125%;
color: white;
background: rgb(45,43,41);
text-align: center;
padding:1em 0;
}

.info .article {
width:100%;
margin-left:0;
margin-top:20px;
}

.info .article li {
width:100%;
padding-top:10px;
padding-bottom:10px;
border-bottom: dotted 1px rgba(45,43,41,1);
}

.info .article li:first-child {
padding-top:0px;
}

.info .article li:last-child {
margin-bottom:10px;
}

.info .article .date {
width: 7em;
padding-right:1em;
}


/**************************** Sections ********************************/
.section_01 {
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

.section_01 .about {
width: calc(100% - 0%);
padding:0px 0% 50px;
background: #fff;
}

.section_01 .price {
width: calc(100% - 0%);
padding:0px 0% 50px;
background: #ddd;
}

.section_01 .lesson {
width: calc(100% - 0%);
padding:0px 0% 50px;
background: #fff;
}

.section_01 .instructor {
width: calc(100% - 0%);
padding:0px 0% 50px;
background: #ddd;
}

.section_01 .title {
display: block;
width:8em;
margin:0 10% 30px;
padding:50px 0;
font-family: cooper-black-std, serif;
font-weight: 400;
font-style: normal;
font-size: 160%;
background: rgba(255,188,68,1.0);
text-align: center;
}

.section_01 .about .title {background: rgb(255,188,68);color:rgb(45,43,41);}
.section_01 .price .title {color: white;background:rgb(45,43,41);}
.section_01 .lesson .title {color: white;background:rgb(45,43,41);}
.section_01 .instructort .title {background: rgb(255,188,68);color:rgb(45,43,41);}

.section_01 .copy {
margin:0 10%;
font-weight: 700;
font-size: 110%;
}

.section_01 .body {
margin:0 10%;
text-align: justify;
}

.section_01 .photo {
display: flex;
flex-wrap: nowrap;
width:100%;
margin-left: 0%;
margin-top:30px;
}

.section_01 .photo img {
width:calc(100% / 3);
height:calc((100% / 3) * 0.75);
margin:0;
}


/**************************** blog ********************************/
.blog {
width:100%;
height:auto;
padding:50px 0 80px;
background: rgb(255,188,68) url("../img/bg_blog.svg") top center / contain no-repeat;
}

.blog .title {
width:100%;
text-align: center;
font-family: cooper-black-std, serif;
font-weight: 400;
font-style: normal;
font-size: 175%;
margin-bottom:40px;
}

.feed_blog {
width:calc(80% + 20px);
display: flex;
flex-wrap: wrap;
margin-left: calc(10% - 10px);
margin-right: calc(10% - 10px);
}

.feed_blog li {
display: block;
width:calc((100% - 20px) / 1);
margin:10px;
background: white;
}

.feed_vlog {
width:calc(80% + 20px);
display: flex;
flex-wrap: wrap;
margin-left: calc(10% - 10px);
margin-right: calc(10% - 10px);
}

.feed_vlog li {
display: block;
width:calc((100% - 20px) / 1);
margin:10px;
background: white;
}

.feed_blog_title {
width:calc(100% - 40px);
margin:20px;
font-weight: 700;
}

.feed_blog_body {
width:calc(100% - 40px);
margin:0px 20px 20px 20px;
text-align: justify;
}

/**************************** Google Map ********************************/
#gmap {
width:100%;
height:65vh;
margin:0;
}


/**************************** footer ********************************/
footer {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items:center;
width:100%;
padding:50px 0 20px;
background: rgb(45,43,41);
color:white;
}

.footer_logo {
width:calc(120px + 0%);
height:120px;
margin-left:6%;
margin-right:6%;
}

.footer_add {
width:auto;
padding-left:2em;
margin-right:6%;
border-left: dotted 2px rgb(255,200,77);
font-size: 90%;
}

.footer_add p {
padding-bottom:0;
margin-bottom:0;
}

.footer_add i {
padding-right:0.5em;
}

.footer_menu {
width:auto;
padding-left:2em;
margin-right:6%;
border-left: dotted 2px rgb(255,188,68);
font-size: 90%;
}

.footer_menu p {
padding-bottom:0;
margin-bottom:0;
}

.footer_menu i {
margin-left: 0.2em;
padding-right:1em;
}

.sns {
width:100%;
text-align: center;
padding:30px 0 50px;
background: rgb(45,43,41);
}

#fb{
display: inline-block;
letter-spacing: normal;
width:50px;
height:50px;
margin-right: 20px;
}

#tw{
display: inline-block;
letter-spacing: normal;
width:50px;
height:50px;
margin-right: 20px;
}

#yt{
display: inline-block;
letter-spacing: normal;
width:50px;
height:50px;
}

.copyright {
width:100%;
text-align: center;
padding:20px 0;
background: rgb(35,33,31);
color:white;
font-size: 90%;
}

/**************************** footer fixed Buttons ********************************/
.btn_contact {
position: fixed;
bottom:173px;
right:0;
background: rgb(50,160,190);
color:white;
font-weight: 700;
writing-mode:vertical-lr;
padding:30px 16px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
letter-spacing: 0.1em;
}

.btn_tel {
position: fixed;
bottom:100px;
right:0;
background: rgb(50,160,190);
color:white;
font-size:21px;
padding:18px 12px 18px 15px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
letter-spacing: 0.1em;
}

.btn_top {
position: fixed;
bottom:30px;
right:0;
background: rgb(50,160,190);
color:white;
font-size:19px;
padding:17px 13px 17px 16px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
letter-spacing: 0.1em;
}


/**************************** Buttons ********************************/
.btn_brown_right {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(45,43,41);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

.btn_brown_center {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(45,43,41);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

.btn_yellow_right {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(230,170,70);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

.btn_yellow_center {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(230,170,70);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

.lesson .btn_brown_center {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(230,170,70);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

.instructor .btn_yellow_center {
display: block;
width:200px;
height:auto;
margin-left:calc((100% - 200px) / 2);
background: rgb(45,43,41);
border-radius: 25px;
text-align: center;
padding-top:13px;
padding-bottom:13px;
font-weight: 700;
color:white !important;
}

/**************************** 2nd Floor common ********************************/

.KV_2nd {
display: flex;
flex-wrap:wrap-reverse;
align-items:center;
width:100%;
background: rgb(45,43,41);
}

.KV_2nd .left {
width:100%;
padding-bottom:30px;
}

.KV_2nd .left .title {
width:8em;
margin:0px 10% 20px;
padding:50px 0;
font-family: cooper-black-std, serif;
font-weight: 400;
font-style: normal;
font-size: 160%;
background: rgba(255,188,68,1.0);
text-align: center;
}

.KV_2nd .left .copy {
margin:0 10%;
font-weight: 700;
font-size: 110%;
color:white;
}

.KV_2nd .left .body {
margin :0 10%;
color:white;
text-align: justify;
}

/**************************** 2nd Floor about ********************************/

.KV_2nd .right_about {
width:100%;
height: calc(100vw * 0.6);
background: url("../../about/img/IMG_5897.jpg") center center / cover no-repeat;
}

.about_page {
position: relative;
display: flex;
flex-wrap: wrap;
align-items:center;
width:100%;
}

.about_page .left {
width:84%;
padding:50px 8% 50px 8%;
}

.about_page .left .title {
font-size: 175%;
font-weight: 900;
padding: 0 0 0 0;
}

.title img {
width:1.5em;
height:1.5em;
margin-right:10px;
vertical-align: middle;
}

.about_page .left .title span {
vertical-align: middle;
}

.about_page .left .body {
padding: 30px 0 0 0;
text-align: justify;
}

.about_page .left ul{
margin:1em 0;
}

.about_page .left li{
position: relative;
padding-left: 2em;
}
 
.about_page .left li:before {
font-family: "Font Awesome 5 Free"; 
content: "\f058";
position: absolute;
font-size: 150%;
color:rgb(255,188,68);
margin-left:-1.2em;
padding-top:0em;
}

.about_page .left li + li{
 margin-top: 5px;
 }

.about_page .right {
width:38%;
padding:100px 8% 100px 4%;
}

.about_page .right img {
width:calc(84% - 20px);
margin:0 8%;
transform: rotate(-5deg);
border: solid 10px white;
box-shadow: 10px 10px 10px rgba(0,0,0,0.35);
}

/**************************** 2nd Floor price ********************************/

.KV_2nd .right_price {
width:100%;
height: calc(100vw * 0.6);
background: url("../../price/img/IMG_5887.jpg") center center / cover no-repeat;
}

.price_page {
position: relative;
display: flex;
flex-wrap: wrap;
align-items:center;
width:100%;
}

.price_page .left {
width:84%;
padding:50px 8% 50px 8%;
}

.price_page .left .title {
font-size: 175%;
font-weight: 900;
padding: 0 0 0 0;
}

.title img {
width:1.5em;
height:1.5em;
margin-right:10px;
vertical-align: middle;
}

.price_page .left .title span {
vertical-align: middle;
}

.price_page .left .body {
padding: 30px 0 0 0;
text-align: justify;
}

.price270 {
margin:30px 0 100px;
}

.price270 img {
width:5em;
height:5em;
margin-right:10px;
vertical-align: middle;
}

.price270 .big {
font-family: cooper-black-std, serif;
font-weight: 400;
font-size: 400%;
font-style: normal;
vertical-align: middle;
}

.price270 .bottom {
vertical-align:bottom;
font-size: 90%;
font-weight: 700;
}

.box {
position: relative;
display: flex;
flex-wrap: wrap;
align-items:stretch;
width:100%;
text-align: center;
}

.box::after {
position: absolute;
top:-90px;
right:-10px;
content: url("../../price/img/box_after.svg");
width:150px;
height:100px;
}

.orange, .green, .pink, .blue {width:calc(50% - 41px); padding:20px; margin-right: 1px; font-weight: 700; color:white; border-radius: 12px;}

.orange {transform:rotate(-5deg); background: rgba(241,138,60,0.8);}
.green {transform:rotate(5deg); background: rgba(107,185,45,0.8);}
.pink {transform:rotate(-5deg); background: rgba(236,119,151,0.8);}
.blue {transform:rotate(5deg); background: rgba(0,179,237,0.8);}

.price_page .right {
width:84%;
padding:10px 8% 50px 8%;
}

.price_page .right .table {
width:100%;
}

.price_page .right .table td {
padding:0.5em 1em;
}

.price_page .right .table .border {
border-left: solid 2px white;
border-right: solid 2px white;
}

.price_page .right ul{
margin:1em 0;
}

.price_page .right li{
position: relative;
padding-left: 2em;
}
 
.price_page .right li:before {
font-family: "Font Awesome 5 Free"; 
content: "\f058";
position: absolute;
font-size: 150%;
color:rgb(255,188,68);
margin-left:-1.2em;
padding-top:0.05em;
}

.price_page .right li + li{
 margin-top: 5px;
 }

/**************************** 2nd Floor lesson ********************************/

.KV_2nd .right_lesson {
width:100%;
height: calc(100vw * 0.6);
background: url("../../lesson/img/IMG_5900.jpg") center center / cover no-repeat;
}

.lesson_page {
position: relative;
display: flex;
flex-wrap: wrap;
align-items:center;
width:100%;
}

.lesson_page .left {
width:84%;
padding:50px 8% 15px 8%;
}

.lesson_page .left .title {
font-size: 175%;
font-weight: 900;
padding: 0 0 0 0;
}

.title img {
width:1.5em;
height:1.5em;
margin-right:10px;
vertical-align: middle;
}

.lesson_page .left .title span {
vertical-align: middle;
}

.lesson_page .left .body {
padding: 30px 0 0 0;
text-align: justify;
}

.lesson_page .left .price270 {
margin:30px 0 50px;
}

.lesson_page .left ul{
margin:1em 0;
}

.lesson_page .left li{
position: relative;
padding-left: 2em;
}
 
.lesson_page .left li:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
position: absolute;
font-size: 150%;
color:rgb(255,188,68);
margin-left:-1.2em;
padding-top:0.05em;
}

.lesson_page .left li + li{
 margin-top: 5px;
 }

.lesson_page .right {
width:84%;
padding:15px 8% 50px 8%;
}


.lesson_page .left .table, .lesson_page .right .table {
width:100%;
}

.lesson_page .left .table td, .lesson_page .right .table td {
padding:0.5em 1em;
}

.lesson_page .left .table .border, .lesson_page .right .table .border {
border-left: solid 2px white;
border-right: solid 2px white;
}

.lesson_page .left .table .border_last, .lesson_page .right .table .border_last {
border-left: solid 2px white;
}

.lesson_box {
border-bottom: dotted 2px rgb(55,43,41);
margin-bottom:1em;
}

/**************************** 2nd Floor instructor ********************************/

.KV_2nd .right_instructor {
width:100%;
height: calc(100vw * 0.6);
background: url("../../instructor/img/1153626308.jpg") center center / cover no-repeat;
}

.instructors {
position: relative;
display: flex;
flex-wrap: wrap;
align-items:center;
width:100%;
}

.instructors .left {
width:84%;
margin:30px 8% 15px 10%;
}

.instructors .right {
width:84%;
margin:15px 8% 50px 8%;
}

.inst_g, .inst_d, .inst_b, .inst_v, .inst_s, .inst_p {
position: absolute;
width:120px;
height:120px;
top:0;
right:10%;
}

.inst_g {background:url("../../instructor/img/inst_g.svg") top center / contain no-repeat;}
.inst_d {background:url("../../instructor/img/inst_d.svg") top center / contain no-repeat;}
.inst_b {background:url("../../instructor/img/inst_b.svg") top center / contain no-repeat;}
.inst_v {background:url("../../instructor/img/inst_v.svg") top center / contain no-repeat;}
.inst_s {background:url("../../instructor/img/inst_s.svg") top center / contain no-repeat;}
.inst_p {background:url("../../instructor/img/inst_p.svg") top center / contain no-repeat;}


/**************************** 2nd Floor Contact ********************************/

.KV_2nd .right_contact {
width:100%;
height: calc(100vw * 0.6);
background: url("../../contact/image/IMG_5901.jpg") center center / cover no-repeat;
}

.contact_box {
width:84%;
margin:50px 8%;
}

.contact_box .title {
font-size: 175%;
font-weight: 900;
padding: 0 0 0 0;
}

.contact_box .title img {
width:1.5em;
height:1.5em;
margin-right:10px;
vertical-align: middle;
}

.privacy_box {
width:84%;
margin:0 8%;
padding:50px 0;
}

.privacy_box .title {
font-size: 175%;
font-weight: 900;
padding: 0 0 0 0;
}

.privacy_box .title img {
width:1.5em;
height:1.5em;
margin-right:10px;
vertical-align: middle;
}

#form_submit_button {
-webkit-appearance: none;
}

/**************************** 2nd Floor Blog ********************************/

.KV_2nd .right_blog {
width:100%;
height: calc(100vw * 0.6);
background: url("../../photo/kv_02_blog.jpg") center center / cover no-repeat;
}

.blog_inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width:84%;
padding:50px 8%;
background: rgb(255,188,68) url("../img/bg_blog.svg") top center / contain no-repeat;
}

.blog_inner .left {
width:100%;
margin-right: 0;
vertical-align: top;
}

.blog_inner .right {
width:100%;
margin-left: 0;
vertical-align: top;
}

.blog_article {
width:calc(100% - 40px);
padding:20px 20px 10px 20px;
margin-bottom:20px;
background: rgba(245,245,245,1.0);
}

.information {
position: absolute;
width:8em;
padding:20px 0;
background: rgb(45,43,41);
color:white;
font-family: cooper-black-std, serif;
text-align: center;
}

.diary {
position: absolute;
width:8em;
padding:20px 0;
background: rgb(45,43,41);
color:white;
font-family: cooper-black-std, serif;
text-align: center;
}

.youtube {
position: absolute;
width:8em;
padding:20px 0;
background: rgb(45,43,41);
color:white;
font-family: cooper-black-std, serif;
text-align: center;
}

.blog_date {
width:100%;
text-align: right;
}

.blog_title {
margin:3em 0 1em;
padding:1em 0;
font-size: 120%;
font-weight: bold;
}

.blog_article img {
width:100% !important;
height:auto !important;
padding-top:0;
padding-bottom: 2em;
}

/*** Youtube ***/
.blog_article .wp-block-embed-youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom:2em;
}

.blog_article .wp-block-embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-bottom:40px !important;
}

.blog_article img {
width:100% !important;
height:auto !important;
padding-top:0;
padding-bottom: 2em;
}

.blog_article ul {
margin:1em 0 0 0;
padding:1em 0 1em 0;
border-top: solid 1px rgba(49,42,38,0.5);
}

.blog_article ul li:before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
margin-right:0.5em;
}

.go_prev {
float: left;
display:block;
margin-top:0px;
margin-bottom:20px;
padding:10px 20px;
background-color:rgb(45,43,41);
color:white;
cursor: pointer;
}

.go_next {
float: right;
display:block;
margin-top:0px;
margin-bottom:20px;
padding:10px 20px;
background-color:rgb(45,43,41);
color:white;
cursor: pointer;
}

.go_prev:hover, .go_next:hover {
color:rgb(255,188,68);
}

.blog_sidebar {
width:100%;
}

.blog_sidebar .widget_box {
width:calc(100% - 2px);
margin-bottom:20px;
border:solid 1px rgb(45,43,41);
}

.blog_sidebar .widget_title {
width:calc(100% - 40px);
padding: 20px;
background: rgb(45,43,41);
color: white;
}
.blog_sidebar ul {
width:calc(100% - 45px);
padding:20px 20px 20px 35px;
margin: 0;
}
.blog_sidebar ul li {
padding-bottom:5px;
padding-left: 3px;
list-style: disc !important;
}


/*** カレンダー***/
#calender_wrap {width:100%;}
.calender_wrap {width:100%;}

#calender_wrap thead tr {}
#wp-calendar {width:100%;}

caption {
width:calc(100% - 40px);
padding: 20px;
background: rgba(49,42,38,1.0);
color: rgba(246,244,241,1.0);
}

#wp-calendar tr {width:100%;}
#wp-calendar th {
text-align: center;
width: calc(100% / 7);
font-weight: 400;
padding:10px 0;
}
#wp-calendar th:first-child {
color:rgba(160,20,30,1.0);
}
#wp-calendar th:last-child {
color:rgba(30,20,160,1.0);
}
#wp-calendar td {
text-align: center;
width: calc(100% / 7);
font-weight: 400;
padding:10px 0;
}

#wp-calendar td a {
font-weight: 700;
}

#wp-calendar tbody td:first-child {
color:rgba(160,20,30,1.0);
}

#wp-calendar tbody td:last-child {
color:rgba(30,20,160,1.0);
}

#wp-calendar tfoot td {background: rgba(215,206,199,0.5);}
#wp-calendar tfoot #prev {}
#wp-calendar tfoot #next {}

/*** ページネーション ***/
.page-numbers li {
display: inline-block;
width:1.5em;
text-align: center;
padding:10px;
background: rgb(45,43,41);
color: white;
margin-right:5px;
margin-bottom: 20px;
}

.current {color: rgb(255,188,68);}