@charset "UTF-8";

@font-face{ 
  font-family: 'rounded-x-mplus-1c-medium';
  src: url('/fonts/rounded-x-mplus-1c-medium.ttf') format('truetype');
}
@font-face{ 
  font-family: 'rounded-x-mplus-1c-bold';
  src: url('/fonts/rounded-x-mplus-1c-bold.ttf') format('truetype');
}

/* common */

html {
    font-size: 13px;
}
body {
    width: 100%;
    overflow-x: hidden;
    background-color: rgb(255, 253, 238);
    line-height: 1.8;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    -webkit-font-smoothing: auto;
}
a:visited {
    color: #0099CC;
    text-decoration: none;
}
a:hover {
    color: #0099CC;
    text-decoration: underline;
}
p {
    margin: 1em 0;
}
ul {
    line-height: 1.5;
}
/*li {
    margin: 0.5em 0;
}*/
hr {
    border: none;
    border-bottom: solid 1px #215033;
    margin: 50px 0;
    max-width: 180px;
    text-align: center;
}
th, td, caption {
    line-height: 1.4;
    padding: 0.3em 0.4em;
}
th {
    /*text-align: left;*/
    white-space: nowrap;
}
caption {
    text-align: left;
}
address {
    font-style: normal;
}
.orange {
    color: #E84E0F !important;
}
.blue {
    color: #000099 !important;
}
.lightblue {
    color: #00cccc !important;
}
.red, .danger, .invalid-feedback {
    color: #ff0000 !important;
}
.is-invalid, .is-invalid:focus {
    color: #ff0000 !important;
    border-color: #ff0000;
}
.green {
    color: #00cc00 !important;
}
.bg-green {
    background-color: #215033 !important;
}
.bg-danger {
    background-color: #ff0000;
}
.l {
    font-size: 1.2rem;
}
.bld {
    font-weight: 600;
}
.ib {
    display: inline-block;
}
.list-bullet>*:before {
    width: 3px;
    height: 3px;
}
.wrapper {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    overflow: initial;
}
.inner {
    padding-left: 15px;
    padding-right: 15px;
}
.desc {
    height: 69px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgb(255, 253, 238);
    z-index: 2;
}
.desc>p {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    height: 55px;
    padding: 15px 100px 10px 10px;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.nav-btn {
    width: 100px;
    height: 55px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
}
.nav-btn>img {
    width: 45px;
    margin-left: 5px;
}
.hamburger {
    width: 30px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.hamburger>span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    top: 50%;
    display: block;
    position: absolute;
    left: 50%;
    width: 100%;
    height: 1px;
    background: #1c5132;
}
.hamburger>.top {
    -webkit-transform: translateY(-10px) scale(1);
    transform: translateY(-10px) scale(1);
}
.hamburger>.middle {
    background: none;
    position: relative;
    left: 100%;
}
.hamburger>.middle:before, .hamburger>.middle:after {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    content: "";
    width: 30px;
    height: 1px;
    background: #1c5132;
    display: block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    position: absolute;
}
.hamburger>.bottom {
    -webkit-transform: translateY(10px) scale(1);
    transform: translateY(10px) scale(1);
}
.is-open .hamburger>.top {
    -webkit-transform: translateY(0px) scale(0);
    transform: translateY(0px) scale(0);
}
.is-open .hamburger>.bottom {
    -webkit-transform: translateY(0px) scale(0);
    transform: translateY(0px) scale(0);
}
.is-open .hamburger>.middle:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.is-open .hamburger>.middle:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.top-bar {
    background: center / auto 14px url("../img/top-bar.gif") repeat-x;
    height: 14px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.logo {
    display: block;
    width: 90%;
    max-width: 550px;
    margin: 3.5vw auto 12vw;
}
.header>h1 {
    text-align: center;
    font-size: 1.5rem;
    margin: 1.5em 0;
    color: #4b4842;
    font-weight: 500;
}
.slideshow {
    position: relative;
    overflow-x: hidden;
}
.photos {
    display: none;
}
.slide-photos {
    width: 400vw;
    display: -webkit-flex;
    display: flex;
}
.slide-photos>img {
    width: 100vw;
    height: 56.0975609vw;
}
.top-photo {
    display: block;
    margin: 20px auto;
    max-width: 640px;
    width: 100%;
}
.lesson-container {
    position: relative;
    display: block;
}
.lesson {
    position: absolute;
    right: 5%;
    top: -13vw;
    z-index: 1;
    display: block;
    width: 24vw;
    max-width: 108px;
}
.desc>.nav {
    margin-bottom: 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgb(255, 253, 238);
}
.nav-menus {
    padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
    top: 100%;
    left: 0;
    width: 100%;
}
.mypage .nav-menus {
	padding-top: 60px;
}
.is-open .nav {
    box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
}
.nav-menu {
    opacity: 0;
    height: 0;
    -webkit-transition: height .4s ease 0s, opacity .4s ease 0s;
    transition: height .4s ease 0s, opacity .4s ease 0s;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nav-menu:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #3b5230;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.is-open .nav-menu {
    opacity: 1;
    height: 46px;
}
.nav-menu img {
    display: block;
    height: 26px;
    width: 124px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.nav-menu img.sns-icon {
    width: 25px;
    height: auto;
    position: static;
    transform: none;
}
.nav-menu img {
    -webkit-transition: opacity .2s ease 0s;
    transition: opacity .2s ease 0s;
    z-index:2;
}
.nav-menu:hover img:nth-child(2), .nav-menu-on img:nth-child(2) {
    opacity: 0;
}
.sub_menu{
    opacity:0;
    height:0;
    position:absolute;
    top:100%;
    background:#215033;
}
.nav-menu:hover .sub_menu{
    display:block;
}
.nav-menu1 {
    background-image: url("../img/nav-menu1-on.svg");
}
.nav-menu2 {
    background-image: url("../img/nav-menu2-on.svg");
}
.nav-menu3 {
    background-image: url("../img/nav-menu3-on.svg");
}
.nav-menu4 {
    background-image: url("../img/nav-menu4-on.svg");
}
.nav-menu5 {
    background-image: url("../img/nav-menu5-on.svg");
}
.nav-menu6 {
    background-image: url("../img/nav-menu6-on.svg");
}
.nav-menu7 {
    background-image: url("../img/nav-menu7-on.svg");
}
.nav-menu8 {
    background-image: url("../img/nav-menu8-on.svg");
}
.rounded {
    font-family: 'rounded-x-mplus-1c-medium';
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.rounded-bold {
    font-family: 'rounded-x-mplus-1c-bold';
    letter-spacing: .08em;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.bottom-bar {
    background: center / auto 15px url("../img/bottom-bar.gif") repeat-x;
    height: 15px;
    margin-top: 40px;
}

.info {
    text-align: center;
    margin: 40px 0;
    font-size: 1.2rem;
}
.info>h2 {
    font-weight: 500;
}
.calendar th, .calendar td {
    vertical-align: middle;
}
.ttl {
    margin-top: 30px;
    font-weight: 500;
    font-size: 1.3rem;
}
.ttl+p {
    margin-top: 0.2em;
}
.ttl-l {
    font-weight: 500;
    font-size: 1.4rem;
}
.idt {
    padding-left: 0.5rem;
}

address>.idt {
    font-size: 0.9rem;
}
.footer {
    padding: 20px 15px;
    line-height: 1.4;
}
.footer>span {
    font-size: 0.9rem;
}
.footer>copy {
    font-size: 0.8rem;
    display: block;
    margin-top: 1em;
}
.footer>a {
    display: block;
    margin-top: 1em;
    text-decoration: none;
    font-size: 0.9rem;
    color: #EE6200;
}

/* page */
.menu {
    margin: 20px 0;
}
.works>img {
    display: block;
    max-width: 100%;
}
.works>.pc {
    display: none;
}
.program {
    width: 100%;
    border-collapse: collapse;
}
.program th, .program td, .program caption {
    border: gray 2px ridge;
}
.program caption {
    border-bottom: none;
    font-size: 1.1rem;
}
.program th {
    text-align: center;
}
.program td {
    height: 50px;
}
.program span {
    display: block;
    text-align: center;
    padding-bottom: 0.2em;
    font-size: 1.1rem;
    font-weight: 600;
}
.c {
    display: block;
    text-align: center;
}
.calendar th, .calendar td, .calendar caption {
    border: gray 2px ridge !important;
}
.calendar caption {
    border-bottom: none;
}
.calendar td {
    height: 50px;
}
.calendar a, .calendar span {
    height: 50px;
    width: 100%;
    vertical-align: bottom;
    transition: background-color .2s ease 0s;
}
.calendar .circle {
    width: 12px;
    height: 12px;
    margin: 0 4px;
}
.calendar .today {
    box-shadow: 0 0 0 2px #dc143c inset;
}
.map {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    height: 450px;
    /*pointer-events: none;*/
}
.link {
    margin-bottom: 30px;
}
.link a:link {
    color: #000;
}
.link a:hover {
    color: #0099cc;
}
.pc {
    display: none;
}
.page-numbers {
    display: inline-block;
    padding: 5px;
}
a.page-numbers {
    color: #a9a9a9 !important;
}
.log-list a {
    text-decoration: underline;
    color: #a9a9a9 !important;
}
.table .today {
    box-shadow: 0 0 0 2px #dc143c inset;
}
.mypage-window {
    min-height: calc(100vh - 60px);
}
.mypage-nav {
    border-top-right-radius:15px;border-bottom-right-radius:15px;
}
.mypage-nav li:before {
    width: 5px;
    height: 5px;
    top: calc(50% - 2.5px);
    left: 24px;
    background-color: #fff;
}
.mypage-nav li.active:before {
    background-color: #ffa500;
}
#dialog {
    padding: 0;
}
#dialog>.modal-window {
    min-height: 100vh;
}
.mypage .hamburger>.top, .mypage .hamburger>.bottom, .mypage .hamburger>.middle:before, .mypage .hamburger>.middle:after {
    background: #fff;
}
.mypage .nav-menu:before {
    background: #fff;
}
.nav-btn svg {
    width:45px;
    margin-left:5px;
}
.nav-menu.noborder:before {
    content: none;
}
#messages {
    min-height: calc(100vh + 40px);
}
#message_window {
    padding:0;
}

@media only screen and (min-width: 375px) {
    th, td, caption {
        padding: 0.3em 0.6em;
    }
}
@media only screen and (min-width: 612px) {
    .mypage-window {
        border-radius: 15px;
        min-height: 500px;
        box-shadow:0 2px 3px rgba(0,0,0,.15);
    }
	.logo {
		margin: 70px auto 73.44px;
	}
    .lesson {
        top: -88px;
    }
    .desc>p {
        font-size: 1rem;
    }
    .program th {
        font-size: 1.1rem;
    }
}
@media only screen and (min-width: 768px) {
    .pc, .works>.pc {
        display: block;
    }
    .mobile {
        display: none;
    }
    .flex-box {
        display: flex;
    }
    .flex-box>* {
        margin-right: 30px;
    }
    .prof-box>* {
        width: 50%;
    }
    .desc {
        height: auto;
        position: static;
    }
    .desc>p {
        padding: 25px 0 10px;
        font-size: 1.25rem;
        justify-content: center;
        text-align: center;
        height: auto;
    }
    .header>h1 {
        font-size: 2rem;
    }
    .wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
    .inner {
        padding-left: 40px;
        padding-right: 40px;
    }
    .idt {
        padding-left: 0.7rem;
    }
    .slide-photos {
        display: none;
    }
    .photos {
        display: block;
        width: 100%;
    }
    .top-photo {
        margin: 30px auto;
    }
    .nav {
        /*margin: 30px 1px;
        position: static;*/
    }
	/*.nav-menus {
        display: flex;
        position: static;
        padding: 0;
	}*/
    /*.nav .nav-menu {
        opacity: 1;
        height: 40px;
        padding: 0;
        width: 124px;
    }*/
    .nav-menu:before {
        /*width: 1px;
        height: 100%;
        top: 0;
        background: #204f33;*/
    }
    .nav-menu:last-child:after {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        background: #204f33;
        position: absolute;
        top: 0;
        right: 1px;
    }
    .sub_menu {
        z-index:1;
        box-shadow:0 2px 15px rgba(0,0,0,.2);
        left:1;
    }
    .nav-menu>a:before {
        content:'';
        display:block;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:0;
        background:#215033;
        opacity:0;
        transition: height .2s ease 0s, opacity .3s ease 0s;
        z-index:2;
    }
    .nav-menu:hover .sub_menu {
        opacity:1;
        height:auto;
    }
    .nav-menu:hover>a:before{
        height:100%;
        opacity:1;
    }
    .sub_menu>a {
        height: 55px;
        padding: 0;
        width: 125px;
        display:block;
    }
    .nav-btn {
        /*display: none;*/
    }
    .c {
        font-size: 18px;
        margin-bottom: 14px;
    }
    .map {
        height: 500px;
    }
    .program th, .program td, .program caption {
        font-size: 1.3rem;
    }
    .program td {
        height: 82px;
    }
    .program span {
        font-size: 1.5rem;
        padding-bottom: 1em;
    }
    .calendar a, .calendar span {
        font-size: 18px;
        height: 100px;
    }
    .calendar .circle {
        width: 18px;
        height: 18px;
    }
    .window {
        border-bottom-left-radius:4px;
        border-bottom-right-radius:4px;
    }
}

@media (min-width: 960px) {
    .mypage-window .calendar a, .mypage-window .calendar span {
         font-size: 15px; 
         height: 70px; 
    }
}
@media only screen and (min-width: 1024px) {
	.logo {
		margin: 20px auto 80px;
	}
    .nav .nav-menu {
        height: 55px;
    }
    .nav-menu img {
        height: 26px;
    }
    .c {
        font-size: 22px;
    }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .wrapper {
        width: 1024px;
        display: block;
    }
}