@charset "utf-8";

/* reset
----------------------------------------------------------*/
*, *:before, *:after { box-sizing:border-box; }

html, body, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
figure, figcaption, form, textarea,
blockquote, fieldset, legend {
  margin: 0;
  padding: 0;
  border: none;
}

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary { display: block; }

table { border-collapse:collapse; border-spacing:0; }

img { max-width:100%; height:auto; font-size:0; line-height:0; vertical-align:bottom; border-width:0; }

ul , ol { padding:0; list-style:none; }

input , button , textarea , select { font:inherit; }
button { margin:0; padding:0; border:none; border-radius:0; background:none; -webkit-appearance:none; cursor:pointer; }
button:focus { outline:none; }

input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* base
----------------------------------------------------------*/
html, body { height: 100%; }

body {
  font-family:
  'M PLUS Rounded 1c',
  "游ゴシック", "Yu Gothic", YuGothic,
  "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-weight: 500;
  color: #000;
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
}
.font-en { font-family:'Fredoka One', cursive; }

a { color: #000; }
a:not(.fade), .anime { -webkit-transition:all .5s; transition:all .5s; }
a:hover, a:focus { text-decoration:none; }

.clearfix:after { content:""; display:block; clear:both; }

.fl-l { float:left; }
.fl-r { float:right; }

.txt-l { text-align:left; }
.txt-c { text-align:center; }
.txt-r { text-align:right; }
.txt-j { text-align:justify; }

.va-top  { vertical-align:top; }
.va-mid  { vertical-align:middle; }
.va-btm  { vertical-align:bottom; }
.va-base { vertical-align:baseline; }

.fw-mid { font-weight:500; }
.fw-b   { font-weight:bold; }

.fz-small { font-size:.85em; }
.fz-big { font-size:1.2em; }

.fs-italic { font-style:italic; }
.marker { background:linear-gradient(transparent 50%, #f8e766 0%); }
.indent { padding-left:1em; text-indent:-1em; }

.wide   { width: 100%; }

.pos-r { position:relative; }

.iblock { display:inline-block; }
.block  { display:block; }
.hide   { display:none; }

.li-disc, .li-decimal { padding-left:1.5em; }
.li-disc { list-style:disc; }
.li-decimal { list-style:decimal; }

.flex         { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.flex-between { -webkit-justify-content:space-between;  justify-content:space-between; }
.flex-center  { -webkit-justify-content:center; justify-content:center; }
.flex-align-center { -webkit-box-align:center; -webkit-align-items:center; align-items:center; }

.shadow { box-shadow:0 0 3px rgba(0,0,0,0.3); }

.bg-gray { background:#eee; }
.txt-highlight { color:#f8e766; text-decoration:underline; }

.is-fixed { position:fixed; top:0; right:0; bottom:0; left:0; }

.link-disabled { cursor:default; pointer-events:none; opacity:0.6; }

.txt-border_letter { position:relative; color:#fff; -webkit-text-stroke:.35em #f44bca; }
.txt-border_letter:before { content:attr(data-text); position:absolute;
  -webkit-text-stroke:0; white-space:nowrap;
  text-shadow:-.1em -.1em 0 #f44bca, .1em .1em 0 #f44bca }


/* 1025px 以上  */
@media screen and (min-width: 1025px) {
  /* hover scale */
  a .hv-scale { -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
  a:hover .hv-scale  { -webkit-transform: scale(1.05); transform: scale(1.05); }
}
/* 600px 以上  */
@media screen and (min-width: 768px) {
  .txt-v {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
}


/* layout ------ */
#wrapper { position:relative; overflow:hidden; min-height:100%; }
.inner { max-width:1000px; margin:0 auto; }
.narrow-inner { max-width:750px; margin:0 auto; }

#main { display:block; }

/* 960px 以上 (PC・タブレット横) */
@media screen and (min-width: 960px) {
  .pc-none { display: none; }

}
/* 600px 以上 (PC・タブレット) */
@media screen and (min-width: 600px) {
.sp-only { display: none; }
}

/* 1024px 以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  .inner { margin:0 30px; }
  .inner .narrow-inner { margin:0; }
}

/* 959px 以下 (タブレット縦以下) */
@media screen and (max-width: 959px) {
  .pc-only { display:none; }

}
@media screen and (max-width: 860px) {
  .narrow-inner  { margin:0 30px; }
}

/* 599px 以下 (スマホ)  */
@media screen and (max-width: 599px) {
  html { font-size:14px; }
  .inner, .narrow-inner { margin:0 20px; }
  .inner .narrow-inner { margin:0; }

  .sp-none { display:none; }
  .sp-only { display:block; }
}

/* header
----------------------------------------------------------*/
.page-head { position:relative; z-index:2; background:url(../img/common/bg-dots.jpg) repeat; }
.page-head:after { content:""; position:absolute; top:0; bottom:-1px; left:0; right:0; z-index:-1; background:url(../img/common/line-crayon.svg) repeat-x center bottom; }

.g-header { position:relative; z-index:99; }
.g-header-info { position:relative; padding:1px 0 6px; }
.g-header-logo { padding:11px 0 0; padding-right:57px; background: url(../img/common/illust-header.png) no-repeat right 0 bottom 3px; }
.g-header-logo .kumon-logo { margin-bottom:8px; padding-left:7px; }
  .menu-btn { display:none; }
.kumon-logo img { width: 210px;}


  .g-contact-box { width:330px; height:156px; padding:30px 54px 18px 62px; background: url(../img/common/bg-contact.svg) no-repeat center; }
  .g-contact-ttl { margin:0 0 1px; font-size:1.125rem; text-align:center; line-height:1.3; }
    .g-contact-ttl > span { font-size:.778em; }
  .g-contact-list > li { margin-bottom:2px; }
    .g-contact-list a:before { content:""; display:inline-block; width:30px; height:30px; margin-right:5px; vertical-align:middle; background:no-repeat center / 100%; }
    .g-contact-list .tel:before { background-image: url(../img/common/icon-tel.svg); }
    .g-contact-list .mail:before { background-image: url(../img/common/icon-mail.svg); }
    .g-contact-list a img { vertical-align:middle; }

/* gnav */
.g-nav-list li { font-size:1.188em; }
.g-nav-list li a { display:block; text-align:center; text-decoration:none; letter-spacing:.1em; line-height:1.6; }

.g-nav-list .nav-en { display:block; color:#fff;
  font-size:.947em; letter-spacing: normal;
  -webkit-text-stroke:.4em #f44bca;
  font-family:'Fredoka One', cursive; }
.g-nav-list .nav-en:before { text-shadow:-.1em -.1em 0 #f44bca, .1em .1em 0 #f44bca }

.g-nav-list .nav-ja { position:relative; color:#07ace2; font-weight:800;
 -webkit-text-stroke:.4em #fff; }
.g-nav-list .nav-ja:before { text-shadow:-.1em -.1em 0 #fff, .1em .1em 0 #fff }

.g-nav-list .nav-en:before,
.g-nav-list .nav-ja:before { content:attr(data-text); position:absolute;
  -webkit-text-stroke:0; white-space:nowrap; }


/* 959 以上 */
@media screen and (min-width: 959px) {

  .g-header-logo { float:left; }

  .g-header .g-contact-box { float:right; }

  /* gnav */
  .g-nav { background:url(../img/common/bg-nav.png) no-repeat center; }
  .g-nav-list { display:-webkit-box; display:flex; flex-wrap:wrap; }
    .g-nav-list li { -webkit-box-flex:1; flex-grow:1; }
    .g-nav-list a { padding:.8em; }
    .g-nav-list li:not(.reserve) a:hover { opacity:.6; }

}

/* 960px 以下 */
@media screen and (max-width: 960px) {

  .g-header-info {
     display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
    -webkit-justify-content:space-between;  justify-content:space-between;
    margin:0; padding:10px 20px; }
  .g-header-info:after { display:none; }
  .g-header-logo { width:350px; background-size:auto 100%; }
  .g-header-logo .kumon-logo { width:45%; }

  .g-header-group { display:-webkit-flex; display:flex;
    -webkit-box-align:center; align-items:center; }
  .g-header .g-contact-box { width:auto; height:auto; padding:0; background:none; }
  .g-header .g-contact-ttl { display:none; }
  .g-header .g-contact-list { display:-webkit-flex; display:flex; margin-right:12px; }
    .g-header .g-contact-list img { display:none; }
    .g-header .g-contact-list a:before { width:40px; height:40px; }

  /* gnav */
  .g-nav { display:none; position:absolute; top:0; left:0; right:0; padding:60px 10px 10px; border-bottom:7px solid #fff; background:#f8e766; }

  .g-nav-list li { border-bottom:1px dashed #fff; }
    .g-nav-list li:last-child { border-bottom:0; }
    .g-nav-list li span { padding-left:.1em; }
    .g-nav-list a { position:relative; padding:.8em .5em; }

  /* .menu-btn */
  .menu-btn { float:right; position:relative; z-index:9999; width:70px; height:70px; padding:10px 0px; text-align:center; background:url(../img/common/bg-menu_btn.svg) no-repeat center / 100%; cursor:pointer; }
  .menu-btn, .menu-btn span { display:block; -webkit-transition:all .5s; transition:all .5s; }

  .menu-bar { position:relative; width:30px; height:19px; margin:0 auto; }
  .menu-bar:before , .menu-bar:after, .menu-bar > span { position:absolute; left:0; display:block; width:100%; height:3px; content:''; -webkit-transition:all .5s ease-out; transition:all .5s ease-out; background:#fff; }

  .menu-bar:before { top:0; }
  .menu-bar > span  { top:8px; }
  .menu-bar:after { bottom:0; }

  .menu-btn.is-open .menu-bar:before {
    -webkit-transform:translateY(8px) rotate(-45deg); transform:translateY(8px) rotate(-35deg);
  }
  .menu-btn.is-open .menu-bar > span { opacity:0; }
  .menu-btn.is-open .menu-bar:after {
    -webkit-transform:translateY(-8px) rotate(45deg); transform:translateY(-8px) rotate(35deg);
  }
  .menu-btn .label { width:auto; height:auto; margin:0 0 7px; color:#fff; font-size:10px; line-height:1; letter-spacing:.1em; font-weight:bold; }
}

/* 599x 以下 (スマホ)  */
@media screen and (max-width: 599px) {
  .g-header-info { padding:0 10px; }
  .g-header-logo { width:200px; padding-right:5%; }

  .g-header-group { padding-top:15px; }
  .g-header .g-contact-box { padding-top:5px; }
  .g-header .g-contact-list { margin-right:6px; }

  .g-nav { padding-top:25px; }

  .menu-btn { width:50px; height:50px; }
  .menu-bar { width:25px; height:14px; }
  .menu-bar:before, .menu-bar:after, .menu-bar > span { height:2px; }
  .menu-bar > span { top:6px; }
  .g-header .g-contact-list a:before { width:35px; height:35px; }

  .menu-btn.is-open .menu-bar:before {
    -webkit-transform:translateY(6px) rotate(-45deg); transform:translateY(6px) rotate(-35deg);
  }
  .menu-btn.is-open .menu-bar:after {
    -webkit-transform:translateY(-6px) rotate(45deg); transform:translateY(-6px) rotate(35deg);
  }

  .menu-btn .label { margin-bottom:4px; -webkit-transform:scale(.8); transform:scale(.9); }

}

/* footer
----------------------------------------------------------*/
.g-footer { position:relative; z-index:2; padding:62px 0 32px; background:url(../img/common/bg-dots.jpg) repeat; }
.g-footer:after { content:""; position:absolute; top:-1px; bottom:0; left:0; right:0; z-index:-1; background:url(../img/common/line-crayon-top.svg) repeat-x center top; }

.g-footer-nav { display:-webkit-box; display:flex; flex-wrap:wrap; margin-bottom:32px; }
  .g-footer-nav li { -webkit-box-flex:1; flex-grow:1; }
    .g-footer-nav li a { display:block; text-align:center; text-decoration:none; }
    .g-footer-nav li a:hover { opacity:.6; }
    .g-footer-nav span { position:relative; color:#07ace2; font-size:1.188em; font-weight:800;
      -webkit-text-stroke:.4em #fff; }
    .g-footer-nav span:before { content:attr(data-text); position:absolute;
      -webkit-text-stroke:0; white-space:nowrap; text-shadow:-.1em -.1em 0 #fff, .1em .1em 0 #fff }


  .g-footer-info { text-align:center; background: url(../img/common/illust-footer-forest.png) no-repeat center bottom 12px; }
  .g-footer-logo { margin-top:8px; }
  .g-footer-info .g-contact-box { margin:0 auto; text-align:left; }

  .g-footer-info-addr { margin:.8em 0; font-size:1.125rem; }
  .g-footer-info-addr .map-link { margin-left:.8em; }
  .g-footer-info-addr .map-link:before { content:""; display:inline-block; width:1.667em; height:1.667em; margin-right:.2em; vertical-align:middle; background:url(../img/common/icon-access.svg) no-repeat center / 100%; }


.g-copyright { margin-top:45px; text-align:center; font-size:.75em; color:#f44bca; letter-spacing:.05em; }
#pagetop { position:fixed; bottom:30px; right:30px; }

@media screen and (min-width: 960px) {

}

/* 959px 以下 (タブレット縦以下) */
@media screen and (max-width: 959px) {
  .g-footer-nav span { font-size:1rem; }

  .g-footer-info { background-size:92%; }
  .g-footer-info-addr .map-link { display:block; margin:.5em 0 0 0; }

}

/* 599px 以下 (スマホ)  */
@media screen and (max-width: 599px) {
  .g-footer-nav { margin-top:1rem; border-top:1px dashed #fff; }
  .g-footer-nav li { width:50%; border-bottom:1px dashed #fff; }
  .g-footer-nav li:nth-child(odd) { border-right:1px dashed #fff; }
  .g-footer-nav li:nth-child(odd):last-child { border-right:none; }
  .g-footer-nav li a { padding:.8em; text-align:left; }

  .g-footer-info .g-contact-box { width:280px; height:130px; padding:26px 50px 15px 50px; background-size:100%; }
  .g-footer .g-contact-ttl { font-size:1rem; }
  .g-footer .g-contact-list a:before { width:25px; height:25px; }
  .g-footer .g-contact-list .tel img { height:18px; }
  .g-footer .g-contact-list .mail img { height:20px; }

}

/* 374px 以下 (スマホ)  */
@media screen and (max-width: 374px) {
  .g-header-logo { width:160px; }
  .g-header .g-contact-list a:before { width:30px; height:30px; }
}