@charset "UTF-8";

body {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "Times New Roman", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}

@media screen and (max-width: 767px) {
    .pc_br {
        display: none !important;
    }
} /* max-width: 767px END */
 
@media screen and (min-width: 768px) {
    .sp_br {
        display: none !important;
    }
} /* min-width: 768px END */

.main {
	background-color: #D8E8FB;
}
#header {
    margin: 0 auto;
    max-width: 1160px;
}
#header img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    position: absolute;
}
#header nav {
    display: flex;
    justify-content: flex-end;
    padding: 30px;
}

#header ul {
    display: flex;
}
#header li {
    margin-left: 50px;
}
#header li  a {
    color: #24292e;
    text-decoration: none;
    font-size: 1.8rem;
}
#header li  a:hover {
    opacity: 0.9;
    color: #D8E8FB;
}
@media screen and (max-width: 768px) {
    #header {
        width: 100%;
        height: 80px;
    }    
    #header img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        position: absolute;
        left: 24px;
        top: 8px;
    }
    
    #g-nav.panelactive{
        position:fixed;
        z-index: 999;
        top: 0;
        width:100%;
        height: 100vh;
        padding: 0;
    }
    
   
    .circle-bg{
        position: fixed;
        z-index:3;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #D8E8FB;
        transform: scale(0);
        right:-50px;
        top:-50px;
        transition: all .6s;
    }
    
    .circle-bg.circleactive{
        transform: scale(50);
    }
    
  
    #g-nav-list{
        display: none;
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #D8E8FB;
    }
    
    #g-nav.panelactive #g-nav-list{
         display: block; 
    }
    #g-nav ul {
        opacity: 0;
        position: absolute;
        z-index: 999;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        display: block;
    }
    
    #g-nav.panelactive ul {
        opacity:1;
    }
    
    #g-nav.panelactive ul li{
    animation-name:gnaviAnime;
    animation-duration:1s;
    animation-delay:.2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes gnaviAnime{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    #g-nav li{
        text-align: center; 
        list-style: none;
    }
    
    #g-nav li a{
        color: #333;
        text-decoration: none;
        padding: 25px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
    .openbtn{
        position:absolute;
        top: 15px;
        right: 24px;
        z-index: 9999;
        cursor: pointer;
        width: 50px;
        height:50px;
    }
    
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
          width: 45%;
      }
    
    .openbtn span:nth-of-type(1) {
        top:15px;	
    }
    
    .openbtn span:nth-of-type(2) {
        top:23px;
    }
    
    .openbtn span:nth-of-type(3) {
        top:31px;
    }
    
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    
}
.main {
    background-color: #D8E8FB;
    padding-bottom: 80px;
}
@media screen and (max-width:768px) {
   .main {
    background-color: #D8E8FB;
    padding-bottom: 50px;
   }
}
.price h2 {
    font-size: 2.4rem;
    text-align: center;
    padding: 50px 0 30px;
    
}
.price span {
    font-size: 3.0rem;
    color:#333;
}
.price p {
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.5;
    margin-bottom: 40px;
}
.price1 {
    padding: 20px 0 20px 0;
	border-bottom: 2px dotted;
	max-width: 1160px;
	margin: 0 auto;
    list-style: none;
}
.price1 dl {
    display: flex;
    justify-content: space-between;
}
.price1 dt {
    font-size: 1.6rem;
}
.price1  dd {
    font-size: 1.6rem;
}
.price_container {
    padding: 0 24px;
}
@media screen and (max-width:768px) {
    .price h2 {
        font-size: 1.8rem;
        text-align: center;
        padding: 60px 0 40px;
    }
    .price span {
        font-size: 2.3rem;
        color: #333;
    }
    .price p {
        text-align: center;
        font-size: 1.6rem;
        line-height: 1.5;
        margin-bottom: 40px;
    }
}

.cat-price p {
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.5;
    margin:40px 0 40px 0;
}
.cat-price span {
    font-size: 3.0rem;
}
.cat_price_container {
    padding: 0 24px;
}
@media screen and (max-width:768px) {
    .cat-price p {
        text-align: center;
        font-size: 1.8rem;
        line-height: 1.5;
        margin-bottom: 40px;
    }
    .cat-price span {
        font-size: 2.3rem;
    }
}


.menu h2 {
    text-align: center;
    font-size: 2.4rem;
    margin: 40px 0 40px 0;
}
.menu table {
    margin: 0 auto;
    max-width: 835px;
}
.menu tr {
    border-bottom: 1px solid #333;
}
.menu th {
    background-color: #f9f9f9;
    padding: 30px;
    line-height: 1.5;
    font-weight: 500;
    border: 1px solid #333;
}
.menu td {
    line-height: 1.4;
    padding-right: 30px;
}
.standard-course th {
    padding-top: 40px;
}

.premium-cours {
    position: relative;
    padding-right: 20px; 
}
  
.premium-cours:after {
    content: "+";
    position: absolute;
    right: 50px;   
    top: 50%;     
    transform: translateY(-50%);
    font-size:1.8rem; 
    color: black;    
}
.luxury-cours {
    position: relative;
    padding-right: 20px;
}
.luxury-cours:after {
    content: "+";
    position: absolute;
    right: 50px;   
    top: 50%;     
    transform: translateY(-50%);
    font-size:1.8rem; 
    color: black;    
}
.cours-td {
    padding-right: 50px;
}
.premium-cours {
    text-align: center;
}
.luxury-cours {
    text-align: center;
}
.cours {
    padding: 30px 0 25px 30px;
}
.premium-cours td {
    max-width: 300px;
}
.quick-cours span {
    color: #FF5D5D;
}

.menu p {
    margin: 50px auto 50px auto;
    font-size: 2.0rem;
    text-align: left;
    max-width: 650px;
    line-height: 1.6;
}
@media screen and (max-width:768px) {
    .menu table {
        width: 95%;
        margin: 0 auto;
    }
    .menu th {
        width: 30%;
        padding: 30px 0 30px;
    }
    .menu td {
        line-height: 1.4;
        padding-right: 0;
        font-size: 1.5rem;
        width: 40%;

    }
    .bubble td {
        margin-right: 50px;
    }
    .premium-cours:after {
        content: "+";
        position: absolute;
        right:5%;   
        top: 50%;     
        transform: translateY(-50%);
        font-size:1.6rem; 
        color: black;    
    }
    .luxury-cours:after {
        content: "+";
        position: absolute;
        right: 5%;   
        top: 50%;     
        transform: translateY(-50%);
        font-size:1.6rem; 
        color: black;    
    }
    .cours {
        padding: 30px 30px 30px 20px;
    }
    .quick-cours span {
        color: #FF5D5D;
        font-size: 1.4rem;
    }
    
}


@media screen and (max-width:768px) {
    .menu p {
        font-size: 1.6rem;
        text-align: center;
    }
}

.singlemenu-price {
    padding: 20px 0 20px 0;
	border-bottom: 2px dotted;
	max-width: 1160px;
	margin: 0 auto;
    list-style: none;
}
.singlemenu h2 {
    margin: 50px 0 50px 0;
    text-align: center;
}
.singlemenu  {
	max-width: 1160px;
	margin: 0 auto;
}
.singlemenu  dl {
    display: flex;
    justify-content: space-between;
}
.singlemenu  dt {
    font-size: 1.6rem;
}
.singlemenu   dd {
    font-size: 1.6rem;
}
@media screen and (max-width:768px) {
    .singlemenu h2 {
        text-align: center;
        font-size: 2.0rem;
        margin: 50px 0 50px;
    }
    .singlemenu_container {
        padding: 0 24px;
    }
}


.option-menu {
    padding: 20px 0 20px 0;
	border-bottom: 2px dotted;
	max-width: 1160px;
	margin: 0 auto;
    list-style: none;
}
.option h2 {
    margin: 50px 0 50px 0;
    text-align: center;
}
.option-menu {
	max-width: 1160px;
	margin: 0 auto;
}
.option-menu dl {
    display: flex;
    justify-content: space-between;
}
.option-menu dt {
    font-size: 1.6rem;
}
.option-menu dd {
    font-size: 1.6rem;
}
@media screen and (max-width:768px) {
    .option h2 {
        font-size: 2.0rem;
        text-align: center;
    }
    .option_container {
        padding: 0 24px;
    }
}


#footer {
    height: 250px;
}
#footer .footer_container-nav {
    max-width: 1160px;
    margin: 0 auto;
}
.footer_container h2 img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    position: absolute;
}
#footer  nav {
    height: 80px;
    display: flex;
    justify-content:flex-end;
    max-width: 1160px;
    margin: 0 auto;
    align-items: center;
}
#footer  nav li {
    font-size: 1.8rem;
}
#footer .footer_site-map img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
#footer .footer_site-map ul {
    display: flex;
}
#footer li {
    margin-left: 50px;
}
#footer li  a {
    text-decoration: none;
    color: #24292e;
}
#footer .footer-snslink ul {
    display: flex;
    justify-content: flex-end;
    max-width: 1160px;
    margin: 0 auto;
}
#footer .footer-snslink li {
    list-style: none;
}
.footer-snslink li img {
    width: 40px; 
    height: 40px;
}

#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 40px;
	height: 40px;
	transition:all 0.3s;
}
#page-top img {
    width: 40px;
    height: 40px;
}

#page-top {
	position: fixed;
	right: 30px;
	bottom: 45px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
#footer small {
    clear: both;
    display: block;
    text-align: center;
    margin-top: 50px;
}
@media screen and (max-width:768px) {
    .footer_container-nav h2 img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        position: absolute;
        left: 24px;
        padding-top: 20px;
    
    }
    #footer li {
        margin: 0 20px 0 0;
    }
    .footer_container-nav  li {
        font-size: 1.6rem;
    }
    #footer .footer_site-map img {
        width:  40px;
        height: 40px;
        padding-left: 24px;
        object-fit: cover;
        position: absolute;
        left: 24px;
    }

}