@charset "UTF-8";
@import url("grid.css");


.classtitle h2{
    font-family:"Zen Old Mincho", "serif";
    font-weight:400;
    color:var(--white-color);
    max-width:768px;
    margin:auto;
	font-size:2.4rem;
}
.class_intro{
	max-width:768px;
	margin:0 auto;
}

#class_intro h3{
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight:700;
    color:var(--base-color);
    text-align:center;
    padding:4rem 1rem;
    line-height:2.0;
	font-size:2.2rem;
}
#class_intro h3 span{
	box-shadow:0 10px 5px -5px var(--base-pale2-color);
}
#class_intro h4{
    font-size:2.0rem;
    position:relative;
	margin-top:3rem;
	padding:0 2rem;
}
#class_intro h4:before{
 content:"";
 position:absolute;
 background:var(--base-pale2-color);
 width:50px;
 height:50px;
 border-radius:50%;
 top:50%;
 left:5px;
 transform:translateY(-50%);
 z-index:-1;
}


#class_circle,#class_culture,#class_online,#class_personal,#class_special{
	max-width:768px;
	margin:0 auto;
    margin-top:2rem;
}

#class_circle h2{
	background-image: url("../img/class_title__01.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:20%;
    padding-bottom:20%;
    margin-bottom:3rem;
	text-align: center;
	color:var(--base-color);
    font-size:2.2rem;
	font-weight:600;
	text-shadow: 0.5px 0.5px 0 white, -0.5px -0.5px 0 white,
  -0.5px 0.5px 0 white,  0.5px -0.5px 0 white,
  0.5px 0 0 white, -0.5px 0 0 white,
  0 0.5px 0 white,  0 -0.5px 0 white;
}
#class_culture h2{
	background-image: url("../img/class_title__02.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:20%;
    padding-bottom:20%;
	text-align: center;
	color:var(--base-color);
    font-size:2.2rem;
	font-weight:600;
	text-shadow: 0.5px 0.5px 0 white, -0.5px -0.5px 0 white,
  -0.5px 0.5px 0 white,  0.5px -0.5px 0 white,
  0.5px 0 0 white, -0.5px 0 0 white,
  0 0.5px 0 white,  0 -0.5px 0 white;
}
#class_online h2{
	background-image: url("../img/class_title__03.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:20%;
    padding-bottom:20%;
	text-align: center;
	color:var(--base-color);
    font-size:2.2rem;
	font-weight:600;
	text-shadow: 0.5px 0.5px 0 white, -0.5px -0.5px 0 white,
  -0.5px 0.5px 0 white,  0.5px -0.5px 0 white,
  0.5px 0 0 white, -0.5px 0 0 white,
  0 0.5px 0 white,  0 -0.5px 0 white;
}
#class_personal h2{
	background-image: url("../img/class_title__04.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:15%;
    padding-bottom:15%;
	text-align: center;
	color:var(--base-color);
    font-size:2.2rem;
	font-weight:600;
	text-shadow: 0.5px 0.5px 0 white, -0.5px -0.5px 0 white,
  -0.5px 0.5px 0 white,  0.5px -0.5px 0 white,
  0.5px 0 0 white, -0.5px 0 0 white,
  0 0.5px 0 white,  0 -0.5px 0 white;
}
#class_special h2{
	background-image: url("../img/class_title__05.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:20%;
    padding-bottom:20%;
    margin-bottom:3rem;
	text-align: center;
	color:white;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size:2.5rem;
    letter-spacing:0.3rem;
	font-weight:600;
	text-shadow: 0.1px 0.1px 0 grey, -0.1px -0.1px 0 grey,
  -0.1px 0.1px 0 grey,  0.1px -0.1px 0 grey,
  0.1px 0 0 grey, -0.1px  0 0 grey,
  0 0.1px 0 grey,  0 -0.1px 0 grey;
}

.flex_class_circle{
    display:flex;
    justify-content: space-between;
    margin:0 auto 3rem;
	align-items:flex-start;
}
.flex_class_circle .flexbox {
    flex: 0 0 49%;
    width: 49%;
    display: flex;
    flex-direction:column;
}
.flex_class_circle .flexbox p{
	display:block;
	flex-grow:1;
    text-align:left;
    font-size:0.8em;
}
.flex_class_circle .flexbox ul{
	list-style:none;
    text-align:left;
    font-size:0.8em;
	max-width:300px;
	padding:0 1rem;
    flex-grow: 1;
}

.flex_class_circle .flexbox p{
    max-width:220px;
    flex-grow:1;
    text-align:left;
    font-size:0.8em;
}

.flex .col.span-6 p {
    position:absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
    color:var(--base-color);
    background-color:rgb(255, 255, 255, 0.7);
  }

.flex .col.span-6 img {
    width: 100%;
  }

.btn,
a.btn,
button.btn {  
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.rem;
    bottom:0;
}

a.btn-c {
  font-size:0.8em;
  position: relative;
  padding: 1.5rem 1rem 1.5rem 1rem;
  border-radius:5px;
}

a.btn-c i.fa {
  margin-right: 1rem;
}
@media screen and (min-width: 768px){

a.btn-c {  
  padding: 1.5rem 5rem 1.5rem 5rem;
}
} 
 
a.btn_large-c i.fa {
  margin-right: 1rem;
}
/*
#class_circle h5{
        font-size:1.0em;
        color:#1e2678;
        font-weight:600;
        padding:1rem 0;
        border-bottom:0.5px solid #1e2678;
}*/

#class_circle h5 {	
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--pale2-color);
    color:var(--base-color);
    font-weight:500;
}

#class_circle h5 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :150px;
  text-align:center;
}

.class_circle_list {
	width:100%;
	margin:auto;
	text-align:center;
	justify-content: center;
}

.lesson_flow {
    background:rgb(30,38,120,0.1);
    margin:auto;
    padding:5rem 1rem
}


.lesson_flow_number {
	position: relative;
	font-size: 16px;
}

.lesson_flow_number::before {
	content: attr(data-number);
	display: inline-block;
	margin-right: 20px;
	color: var(--base-color);
	font-size: 20px;
    font-weight:500;
	
}
.lesson_flow p{
    background:white;
    line-height:1.8;
    max-width:768px;
    margin:auto;
    padding:2rem 1rem;
}

#class_circle h6 {
    font-size:2.0rem;
    margin-top:5rem;
    margin-left:1rem;
    padding:0 0 0 1rem;
    border-left:2px solid var(--base-color);
    
}

.class_circle_price, .class_circle_flow {margin:1rem;}

.class_circle_price dt{
    position:relative;
	margin-top:2rem;
	padding:0 2.5rem;
}
.class_circle_price dt::before{
 content:"";
 position:absolute;
 background:var(--base-pale2-color);
 width:2.5rem;
 height:2.5rem;
 border-radius:50%;
 top:50%;
 left:0;
 transform:translateY(-50%);
 z-index:-1;
}

.class_circle_flow dt{
    background:var(--base-pale2-color);
    padding:1rem;
}
.class_circle_price, .class_circle_flow dd{    
    padding:1rem;
}

#class_circle dl dd a{text-decoration: underline black;}

#class_circle dl dt .bold {
    font-weight:bold;
    padding-right:1rem;
    
}

/*.class_title {
    background-image: url("../img/img_back_green_02.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:5%;
    padding-bottom:10%;
    
}*/
.classtitle {
    background-image: url("../img/img_back_green_02.png");
    width: 100%;
    background-size:cover;
    background-position:center;
    padding-top:5%;
    padding-bottom:10%;
    
}
.class_title ::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 10px 10px #84b144;;
}


.class_menu {
    background:var(--pale4-color);
    padding :5rem 1rem;
    margin:auto;
}
.class_menu_container{
    margin: 0 auto;
    max-width: 768px;
    padding: 0;
    position: relative;
}



#class_culture h4 {
    padding:0.3rem 1rem;
    margin-bottom:0;
    background-color:var(--base-pale2-color);
    font-size:0.95em;
    color:var(--base-color);
    text-align:center;
}
/*.class_culture{
	background-image: radial-gradient(circle, var(--pale2-color) calc(100px / 2 - 1px), transparent calc(100px / 2));
}*/


#class_culture h5 {	
	position: relative;
    color:var(--base-color);
    font-weight:500;
	padding-left:1rem;
    margin-top:2rem;
}
#class_special h5 {	
	position: relative;
    color:var(--base-color);
    font-size:1em;
    font-weight:500;
	padding-left:18px;
    margin:2rem 0;
}
#class_culture h5:before {
  content: "";
  position: absolute;
  background: var(--pale2-color);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -2px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
#class_special h5:before {
  content: "";
  position: absolute;
  background: var(--pale2-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -2px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

#class_culture h5 span{
	display:inline-block;
	font-size:80%;
	padding-top:1rem;
    padding-left:1rem;
}
#class_culture a{
    font-size:90%;
    margin: 0 0 -1.2rem;
    padding:0;
    line-height:1.1;
}
#class_culture i{
    font-size:75%;
}

#class_culture h7, #class_online h7{
    background:var(--base-pale2-color);
    font-size:0.9em;
    padding:0.3rem 1rem;
}
#class_special_schedule h7{   
    display:inline-block;
    text-align: center;
    background:var(--base-pale2-color);
	font-size:1em;
    margin:auto;
    padding:0.1rem auto;
}
#class_culture h8, #class_online h8, #class_special h8,#class_personal h8{
    border:1px solid var(--base-pale1-color);
    background-color:var(--base-pale3-color);
    font-size:0.9em;
    padding:0.2rem 1rem;
}


#class_online p,dl{margin:0.5rem 0 2rem;}
#class_culture p{margin:1rem 0;}
#class_online th,td{margin:0; padding:0;}
#class_online th{font-weight:normal;}

#class_culture ul{
    font-size:0.9em;    
}

#class_online ul {
	list-style:  none; 
    margin:  1rem 0 2rem; 
    padding: 0;
}
#class_personal ul {
	list-style:  none; 
    margin:  0; 
    padding: 0;
}
#class_special ul {
	list-style:  none;
    font-size:0.9em;
}
#class_online li:before,#class_online dt:before {
    content:  "";
    width:  15px;
    height:  15px;
    display:  inline-block;
    background-color: var(--pale2-color);
    border-radius:  50%; 
    position:  relative;
    top: 1px; 
    margin-right: 5px;
}
#class_special li:before{
    content:  "";
    width:  15px;
    height:  15px;
    display:  inline-block;
    background-color: var(--pale2-color);
    border-radius:  50%; 
    position:  relative;
    top: 1px; 
    margin-right: 5px;
}

#class_online img ,#class_personal img{
    display:block; 
    width:30%;
    margin:1rem;
}
@media screen and (min-width:550px){
    #class_online img ,#class_personal img{width:20%;}
}

#class_special h3 {
    text-align:center;
    font-weight:700;
    color:var(--base-color);
	line-height:2.2rem;
}

#class_special h4 {
    display: inline;
	background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(247, 207, 186) 90%);
	padding:0.3rem;
    font-size:1.3em;
}

#class_special span {
    display:block;
    font-size:0.9em;
    line-height:1.6;
}

#class_online > div
{margin:0 1rem;}

#class_personal > div
{margin:0 1rem;}

#culture ul {
	list-style:  none;
    font-size:1.0em;
}
#culture li:before {
    content:  "";
    width:  15px;
    height:  15px;
    display:  inline-block;
    background-color: var(--pale2-color);
    border-radius:  50%; 
    position:  relative;
    top: 1px; 
    margin-right: 5px;
}
#culture h7{
	display:inline-block;
    text-align: center;
    background:var(--base-pale2-color);
	font-size:1em;
    margin:1em 0;
    padding:0.5em;
}

#class_special h2{
	background-image: url("../img/class_title__05.png"); 
    background-size:contain;
    background-position:center;
    padding-top:25%;
    padding-bottom:25%;
    margin:auto;
    margin-bottom:3rem;
	text-align: center;
	color:white;
    font-family: "Zen Old Mincho", "serif";
    font-size:2.3rem;
    letter-spacing:0.3rem;
	font-weight:500;
	text-shadow: 0.1px 0.1px 0 grey, -0.1px -0.1px 0 grey,
  -0.1px 0.1px 0 grey,  0.1px -0.1px 0 grey,
  0.1px 0 0 grey, -0.1px  0 0 grey,
  0 0.1px 0 grey,  0 -0.1px 0 grey;
}
#class_special h4 {
    display:inline-block;
	background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(247, 207, 186) 90%);
	padding:0.3rem;
    font-size:1.2em;
}
.class_special{
    background-image:url("../img/img_back_yoga.png");
    background-size:contain;
    background-position:center;    
    max-width:768px;
	margin:2rem auto 4rem;
    }

.class_special p{
    margin-top:2rem;
    margin-bottom:2rem;
    line-height:2;
}
#class_special p{
    padding:2rem;
}
#class_special ul{
    list-style:none;
    padding:2rem;
}

.information{
		max-width:768px;
		margin:auto;
}
.information ul {
	list-style:none; 
    margin:2rem 1rem; 
    padding:0;
    font-size:1em;
}

.information li:before {
    content:  "";
    width:  15px;
    height:  15px;
    display:  inline-block;
    background-color: var(--pale2-color);
    border-radius:  50%; 
    position:  relative;
    top: 1px; 
    margin-right: 5px;
}
	
.information h3{
    margin:2rem auto;
    text-align:center;
    font-weight:700;
    color:var(--base-color);
}
.information h4{
	display:block;
    margin:0.5rem auto;
	padding:1rem;
    text-align:center;
    font-weight:700;
}
.information h7{
	background:var(--base-pale2-color);
    font-size:0.9em;
    padding:0.3rem 1rem;
	text-align:left;
}
.information span{font-size:0.9em;}