/*
Theme Name: ECC Junior
Theme URI: https://eccjunior-class.work/anjofukama/
Author: Asumi Hanai
Author URI: https://eccjunior-class.work/anjofukama/
Description: ECC Junior's theme
Version: 2.1
*/

/*----------------------------------------------------------------------------*/
/* セクショニング                                                             */
/*----------------------------------------------------------------------------*/
header, main, footer,
article, aside, nav, section {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*----------------------------------------------------------------------------*/
/* 全体の設定                                                                 */
/*----------------------------------------------------------------------------*/
body {
  font-size: 13px;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",sans-serif;
  line-height: 1.4em;
  -webkit-text-size-adjust: 100%;  /* iOSで横向きにしたときに文字が拡大されないようにする */
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}
a:link {
  color: green;
}
a:visited {
  color: darkgreen;
}
a:hover {
  color: darkseagreen;
}
a:active {
  color: green;
}

small {
  display: inline-block;
  font-size: 0.85em; /*0.83em*/
  line-height: 1.5em;
}
p {
  margin: 0;
}
.with-margin {
  margin-bottom: 10px;
}
.with-big-margin {
  margin-bottom: 15px;
}

/* モバイルのみ、PCのみの表示項目を調整 */
.none-at-mobile {
  display: none;
}

h1, h2, h3, h4, h5 {
  font-weight: bold;
}
h1 {
  font-size: 1.4em;
}
h2 {
  font-size: 1.3em;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 1.1em;
}
h5 {
  font-size: 1.0em;
}
/* 自動で下にマージンを入れる見出しクラス */
.original-header {
  margin-bottom: 5px;
}
/* iOSでは16pxを下回るとフォーカス時にズームされてしまい、 */
/* ピンチアウトしないともとに戻らないので、 */
/* ズームされないように大きめに設定。 */
input, textarea {
  font-size: 16px;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: bottom;
}

.container {
  width: calc(100% - 10px);  /* mobile */
  margin: 0 auto;
}

/*----------------------------------------------------------------------------*/
/* 記事タイプに応じてスタイルを切り替える                                     */
/*----------------------------------------------------------------------------*/
/* 投稿記事 */
.type-normalpost * {
  padding: auto;
  margin: auto;
}
.type-normalpost h1,
.type-normalpost h2,
.type-normalpost h3,
.type-normalpost h4,
.type-normalpost h5 {
  padding: 10px 0;
}
.type-normalpost p {
  padding: 5px 0;
}
.type-normalpost strong {
  font-weight: bold;
}
.type-normalpost em {
  font-style: italic;
}
.type-normalpost ul,
.type-normalpost ol {
  padding-left: 2em;
}
.type-normalpost ul {
  list-style-type: disc;
}
.type-normalpost ol {
  list-style-type: decimal;
}
.type-normalpost hr {
  border: 0;
  height: 0;
  margin: 10px 0;
  border-top: 2px ridge darkseagreen;
}
/* 固定ページやその他いじったページ */
.type-custom {
}

/* カテゴリ指定で投稿を表示 */
.news {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  align-items: stretch;
}
.news h2 {
  margin-bottom: 8px;
}
.news .news-content {
  display: -webkit-flex; /* Safari */
  display: flex;
  align-items: stretch;
  width: 100%;
  -webkit-flex-wrap: nowrap;  /* Safari */
  flex-wrap: nowrap;
}
.news a + a {
  margin-top: 5px;
}
  .news a:hover {
    opacity: 0.8;
  }
  .news .news-image {
    width: 100px;       /* ここを変えたらnews-bodyの横幅の指定も変える必要あり */
    margin-right: 8px;  /* ↑ */
  }
    .news .news-image img {
      width: 100%;
      min-height: 50px;
      border: 1px solid gray;
      background-color: white;
    }
  .news .news-body {
    width: calc(100% - 100px - 8px);  /* news-imageの横幅と、news-imageとの空白分を引く */
  }
    .news .news-meta {
    }
    .news .news-title {
    }

/* お知らせ記事 */
.news-in-body {
  margin-bottom: 15px;
}
  /* 本文中のお知らせ内のタイトルは目立つようにする */
  .news-in-body.news .news-title {
    color: salmon;
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: bold;
    text-decoration: underline;
  }

/*----------------------------------------------------------------------------*/
/* ヘッダー(ロゴ～パンくずリスト)                                             */
/*----------------------------------------------------------------------------*/
#header {
  margin-top: 10px;
  margin-bottom: 10px;
}
  #header .header_top {
    display: -webkit-flex;  /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap;  /* Safari */
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin-bottom: 5px;
  }
    #header .header_logo {
      width: 100%;
    }
      #header .header_logo h1 a {
        position: relative;
        display: -webkit-flex;  /* Safari */
        display: flex;
        align-items: center;
      }
      /* マウスオーバーで白をかぶせる */
      #header .header_logo h1 a:hover::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        content: '';
        opacity: 0.3;
        z-index: 1;
      }
      #header .header_logo h1 img {
        display: inline-block;
        padding-right: 10px;
        width: 50%;
      }
    #header .header_sub {
      width: 100%;
      margin-top: 5px;
      display: -webkit-flex;  /* Safari */
      display: flex;
      -webkit-flex-wrap: nowrap;  /* Safari */
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: space-between;
    }
      #header .header_telnum {
        display: -webkit-flex; /* Safari */
        display: flex;        /* 内容物を上下方向に中央揃えする */
        align-items: center;  /* ↑ */
      }
      #header .header_telnum span {
        font-size: 1.5em;
        padding: 5px;
        color: darkgreen;
      }
      #header .header_btns {
        display: -webkit-flex; /* Safari */
        display: flex;        /* 内容物を上下方向に中央揃えする */
        align-items: center;  /* ↑ */
      }
        #header .header_btns li a {
          font-size: 1.2em;
          display: block;
          border-radius: 10px;
          padding: 8px;
          background-color: salmon; /* #585; */
          text-align: center;
          color: white;
          line-height: 1.5em;
        }
        #header .header_btns li a:hover {
          background-color: lightsalmon; /* #5a5; */
        }

  #header .menu {
    position: relative; /* after要素をmenu全体に対する絶対配置にするための指定 */
    display: -webkit-flex;  /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap;  /* Safari */
    flex-wrap: wrap;
    background: #585;
    font-size: 1.2em;
    list-style: none;
    padding: 0;
  }
  /* menu全体に対し、真ん中に縦に線を引く */
  #header .menu::after {
    content: '';
    position: absolute;       /* 親のmenu要素に対する絶対配置指定 */
    top: 0;                   /* 配置は親の要素からずらさずそのまま */
    bottom: 0;                /* 配置は親の要素からずらさずそのまま */
    left: 0;                  /* 配置は親の要素からずらさずそのまま */
    right: 0;                 /* 配置は親の要素からずらさずそのまま */
    margin: auto;             /* 左右中央に配置 */
    width: 1px;               /* 太さを指定 */
    background-color: white;  /* 色を指定 */
  }
  #header .menu li {
    width: 50%;
    text-align: center;
    border-top: 1px solid white;
  }
  #header .menu a {
    padding: 8px 0;
    color: white;
    display: block;
  }
  #header .menu a:hover {
    background: #5a5;
  }

  #header .breadcrumb {
    display: none;
  }

/*----------------------------------------------------------------------------*/
/* メイン(コンテンツ、サイドバー)                                             */
/*----------------------------------------------------------------------------*/
#main {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 10px;
}
#main #posts,
#main #sidebar {
  padding: 10px;
  box-shadow: 0 0 6px gray;
  border-radius: 5px;
}

/*----------------------------------------------------------------------------*/
/* メインコンテンツ                                                           */
/*----------------------------------------------------------------------------*/
#posts {
  background-color: lemonchiffon;
}

/* リンクに下線をひく */
#posts p > a,
#posts table > a,
#posts div > a,
#posts td > a,
.wpcf7 .form-input a,
.type-normalpost a {
  border-bottom: 1px dashed;
  background-color: #eaffea;
}
/* 下線が不要な箇所は上書きする */
#posts div.news > a,
#posts .navigation a {
  border-bottom: none;
  background-color: inherit;
}
/* 背景が白の丸枠 */
.notes-box {
  padding: 8px 10px;
  background-color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 6px lightgray;
}
/* 注釈は2行目以降を1文字分字下げする */
.note {
  padding-left: 1em;
  text-indent: -1em;
}

  #posts .post {
  }
  #posts article + article {
    margin-top: 20px;
  }
    #posts .post-header {
      /* この値を変えるときはjQueryのお問い合わせフォームのスクロール量も変える必要あり */
      margin-bottom: 10px;
    }
    #posts .post-header h2 {
      width: 100%;
      color: darkgreen;
      padding: 8px 8px 5px 8px;
      line-height: 1.2em;
      background-color: white;
      border-bottom: 1px dashed darkseagreen;
      border-left: 6px solid darkseagreen;
    }
      #posts .post-meta {
        margin-top: 5px;
        font-size: 0.9em;
        font-weight: bold;
      }
    #posts .post-content {
    }
    #posts .post-list {
      display: -webkit-flex;  /* Safari */
      display: flex;
      -webkit-flex-direction: row;  /* Safari */
      flex-direction: row;
    }
      #posts .post-image {
        width: 100px;       /* ここを変えたらpost-bodyの横幅の指定も変える必要あり */
        margin-right: 15px;  /* ここを変えたらpost-bodyの横幅の指定も変える必要あり */
      }
        #posts .post-image img {
          width: 100%;
          min-height: 50px;
          border: 1px solid gray;
          background-color: white;
          margin-bottom: 5px;
        }
      #posts .post-body {
        -webkit-flex-grow: 1; /* Safari */
        flex-grow: 1;
        width: calc(100% - 100px - 15px); /* post-imageの横幅と、post-imageとの空白分を引く */
      }
  /* navigation */
  #posts .navigation {
    border-top: 3px double darkgreen;
    margin-top: 10px;
    padding-top: 5px;
    display: -webkit-flex;  /* Safari */
    display: flex;                  /* prev/nextをそれぞれ左右端に揃える */
    justify-content: space-between; /* ↑ */
  }
  #posts .navigation .prev,
  #posts .navigation .next {
    width: calc((100% - 6px)/2);
  }
  #posts .navigation .prev a {
    text-align: left;   /* 左寄せ */
  }
  #posts .navigation .next a {
    text-align: right;  /* 右寄せ */
  }
  #posts .navigation a {
    display: block; /* 全体をリンクにする */
    width: 100%;
    overflow: hidden;         /* 1行に収まりきらない分は…で表示 */
    white-space: nowrap;      /* ↑ */
    text-overflow: ellipsis;  /* ↑ */
    padding: 4px 6px;
    border: 1px outset darkgreen; /* 枠 */
    border-radius: 5px;           /* ↑ */
    background-color: white;      /* ↑ */
  }
  #posts.single-php .navigation a:hover::before {
    color: darkgray;
  }
  #posts.single-php .navigation a::before {
    color: black;       /* 前の記事・次の記事の表示を小さめの黒色で */
    font-size: 0.8em;   /* ↑ */
    white-space: pre;   /* 改行(\a)を有効にする */
  }
  #posts.single-php .navigation .prev a::before {
    content: '« 前の記事\a';
  }
  #posts.single-php .navigation .next a::before {
    content: '次の記事 »\a';
  }

/*----------------------------------------------------------------------------*/
/* サイドバー                                                                 */
/*----------------------------------------------------------------------------*/
#sidebar {
  margin-top: 10px;
  background-color: honeydew;
}
  #sidebar .widget + .widget {
    margin-top: 10px;
  }
    #sidebar .widget .menu {
      background-color: gold;
      border: 2px outset lightyellow;
      font-size: 1.2em;
      list-style: none;
      padding: 0;
    }
    #sidebar .widget .menu li {
      width: 100%;
      text-align: center;
    }
    #sidebar .widget .menu a {
      position: relative;
      padding: 8px 0;
      color: white;
      text-shadow: 0 0 3px black;
      display: block;
    }
    /* マウスオーバーで白をかぶせる */
    #sidebar .widget .menu a:hover::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      content: '';
      opacity: 0.3;
      z-index: 1;
    }

    #sidebar .widget .google-map {
      border: none;
      margin-top: 10px;
      width: 100%;
      height: 200px;
    }

    #sidebar .widget .widget-information h2 {
      padding-bottom: 3px;
    }
    #sidebar .widget .widget-information p {
      padding: 0 5px;
    }
    #sidebar .widget .widget-information-item {
      margin-top: 10px;
    }
      #sidebar .widget .widget-information-item h3 {
        width: 100%;
        background-color: darkseagreen;
        padding: 5px 10px;
        margin-bottom: 5px;
      }

/*----------------------------------------------------------------------------*/
/* フッター                                                                   */
/*----------------------------------------------------------------------------*/
#footer {
  padding: 5px 0;
  font-size: 0.9em;
  color: #0a0a0a;
  border-top: 1px solid #0c0c0c;
}

/*----------------------------------------------------------------------------*/
/* 教室トップ                                                                 */
/*----------------------------------------------------------------------------*/
/* 写真とテキストの紹介エリア */
.introduction-with-picture {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
  margin-bottom: 15px;
}
/* 写真 */
.introduction-with-picture .picture {
  display: -webkit-flex;  /* Safari */
  display: flex;
  justify-content: center;
  width: 100%;
}
/* 紹介文 */
.introduction-with-picture .text {
  width: 100%;
  margin-bottom: 10px;
}

/*----------------------------------------------------------------------------*/
/* 講師紹介                                                                   */
/*----------------------------------------------------------------------------*/
/* [講師]シンボル */
.lecture-symbol {
  display: inline-block;
  background-color: green;
  color: white;
  border-radius: 50%;
  padding: 10px 15px;
  margin: 10px;
  font-weight: normal;
}
/* 講師の情報 */
#lecture-information {
  display: -webkit-flex;  /* Safari */
  display: flex;
  padding-left: 10px;
  -webkit-flex-wrap: wrap;  /* Safari */
  flex-wrap: wrap;
  line-height: 1.7em; /* 行間を広めにとる */
}
#lecture-information dt {
  font-weight: bold;
  width: 5em; /* 項目の横幅は5文字分 */
    /* ここを変える場合はddのwidthも変える必要あり */
}
#lecture-information dd {
  width: calc(100% - 5em);  /* 100%から項目の横幅をひいた分 */
    /* ここを変える場合はdtのwidthも変える必要あり */
}

/* 講師のコメント */
#lecture-comment {
  position: relative;
  background-color: moccasin;  /* ここを変えるときは、吹き出しの色も変える必要あり */
  padding: 8px;
  margin-top: 4px;
    /* 写真(テキスト)との間が15pxで、15pxの吹き出しとの間がないので */
    /* 0px→4pxになるよう+4pxにする */
  margin-bottom: 15px;
  border: 1px solid gray; /* ここを変えるときは、吹き出しの色も変える必要あり */
  border-radius: 5px;
}
/* 吹き出しの三角をつくる */
#lecture-comment::before,
#lecture-comment::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 40px;
  /* 15pxの太さの下の枠線を残して左右の枠線を透明にすることで、 */
  /* 下が三角に切り取られたような図形ができる */
  /* ここの太さを変えるときは、before,afterのtop,border-bottomも */
  /* あわせて見直す必要あり(PC版も) */
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
/* 吹き出しの三角の枠線 */
#lecture-comment::before {
  top: -15px; /* ここを変えるときは、border-bottomも変える必要あり(PC版も) */
  border-bottom: 15px solid gray; /* ↑ */
    /* 色を変えるときは、コメントブロックの色も変える必要あり */
  z-index: 1;
}
/* 吹き出しの三角の白塗りを↑より少し下にずらして配置 */
#lecture-comment::after {
  top: -13px; /* ここを変えるときは、border-bottomも変える必要あり(PC版も) */
  border-bottom: 15px solid moccasin; /* ↑ */
  /* 色を変えるときは、コメントブロックの色も変える必要あり */
  z-index: 2;
}

/*----------------------------------------------------------------------------*/
/* コース紹介                                                                 */
/*----------------------------------------------------------------------------*/
.course-information {
  width: 100%;
  margin-bottom: 10px;
}
.course-information section + section {
  margin-top: 15px;
}
.course-information h3 {
  position: relative;
  width: 100%;
  padding: 3px 5px; /* ここを変えたら、open-tableのpadding-left, leftも変える必要あり */
  margin-bottom: 5px;
  border-radius: 8px;
  border: 2px outset lightgray;
  background-color: palegreen;
}
.course-information h3.collapse-table {
  padding-left: calc(5px + 10px + 6px);
    /* h3のもとの設定値 + [+]分の横幅 + タイトルとの隙間 */
    /* ここを変えたら、↑も変える必要あり */
  cursor: pointer;
}
.course-information h3.collapse-table:hover {
  opacity: 0.8;
}
/* [+]はjavascriptで表示する(collapse-tableクラスを動的に付与) */
.course-information h3.collapse-table::before {
  position: absolute; /* もとのh3からの絶対配置 */
  display: -webkit-flex;  /* Safari */
  display: flex;
  align-items: center;          /* 上下中央 */
  justify-content: center;      /* ↑ */
  top: calc(50% - (10px / 2));  /* ↑ */
    /* ここを変えたら、height,widthとopen-tableのpadding-leftも変える必要あり */
  left: 5px;  /* ここを変えたら、h3のもとのpadding-leftも変える必要あり */
  font-size: 0.7em;
  font-weight: normal;
  height: 10px;  /* ここを変えたら、topとwidthとopen-tableのpadding-leftも変える必要あり */
  width: 10px;   /* ここを変えたら、topとheightとopen-tableのpadding-leftも変える必要あり */
  border: 1px solid black;
  background-color: white;
}
.course-information h3.collapse-table.toopen::before {
  content: '+';
}
.course-information h3.collapse-table.toclose::before {
  content: '-';
}
.course-table {
  width: 100%;
}
.course-table thead {
  display: none;
}
.course-table th {
  background-color: palegreen;
  text-align: center;
}
.course-table td {
  background-color: white;
}
.course-table td.course-table-age {
  background-color: transparent;
  font-weight: bold;
}
.course-table td.course-table-overview {
  background-color: transparent;
}
.course-table > tbody > tr {
  width: 100%;
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  margin-bottom: 10px;
}
.course-table td.course-table-age,
.course-table td.course-table-overview {
  width: calc(100% - 10px);
  margin-left: 10px;
}
/* タイムスケジュール */
#time-schedule {
  margin-top: 30px;
}
.time-schedule {
  margin-top: 5px;
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  -webkit-flex-wrap: nowrap;  /* Safari */
  flex-wrap: nowrap;
  width: 100%;
  align-items: stretch;
}
/* ヘッダー列 */
.time-schedule .time-schedule-header {
  display: none;
}
/* 中央揃え */
.time-schedule .sch-weekday {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: row;  /* Safari */
  flex-direction: row;
  justify-content: center;
}
/* 中身列 */
.time-schedule .time-schedule-body {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  -webkit-flex-wrap: nowrap;  /* Safari */
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
/* 曜日別のテーブル */
.time-schedule .sch-weekday-table {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  width: 100%;
  border: 1px solid darkgray;
}
/* 曜日間 */
.time-schedule .sch-weekday-table + .sch-weekday-table {
  margin-top: 5px;
}
/* 曜日欄 */
.time-schedule .sch-weekday {
  align-items: center;
  margin-bottom: 0;
  width: 100%;
  background-color: palegreen;
  border-bottom: 1px solid darkgray;
  padding: 3px;
}
/* 内容欄 */
.time-schedule .sch-lines {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  width: 100%;
}
.time-schedule .time-schedule-body .sch-lines {
  background-color: white;
  padding: 5px 8px;
}
/* 内容欄の1行 */
.time-schedule .sch-line,
.time-schedule .sch-headline,
.time-schedule .sch-gridline {
  width: 100%;
}
.time-schedule .sch-line {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: row;  /* Safari */
  flex-direction: row;
  padding: 2px 0;
}
/* 時間 */
.time-schedule .sch-line-time {
  width: 120px;
}
/* コース名 */
.time-schedule .sch-line-course {
  -webkit-flex-grow: 1; /* Safari */
  flex-grow: 1;
}

/*----------------------------------------------------------------------------*/
/* Q&A                                                                        */
/*----------------------------------------------------------------------------*/
.faq {
}
/* Question */
.faq dt {
  margin-top: 10px;
  font-weight: bold;
  color: darkgreen;
  background-color: #cfa;
}
.faq dt:first-child {
  margin-top: 0;
}
.faq dd {
  background-color: #f5f5ea;
}
/* Answer */
.faq dt,
.faq dd {
  padding: 5px 8px; /* 左はQ/Aの分があるので4pxだが、右はないので8pxとる */
  padding-left: calc(4px + 1em + (4px * 2) + 6px);
    /* 左側padding(↑) + before(Q/A)の1文字分 + beforeのpadding(right+left) + beforeから右へのmargin */
    /* ここを変えたら↑も見直し必要 */
  text-indent: calc(-6px - (4px * 2) - 1em);
    /* -beforeから右へのmargin - beforeのpadding(right+left) - before(Q/A)の1文字分 */
    /* ここを変えたら↑も見直し必要 */
}
.faq dt::before,
.faq dd::before {
  margin-right: 6px;  /* ここを変えたらdt,ddのpadding-left, text-indentも変える必要あり */
  padding: 3px 4px;   /* ここを変えたらdt,ddのpadding-left, text-indentも変える必要あり */
  border-radius: 50%; /* 円の背景にする */
}
.faq dt::before {
  content: 'Ｑ'; /* ここの文字数を変えたらdt,ddのpadding-left, text-indentも変える必要あり */
  background-color: yellowgreen;
  color: darkgreen;
}
.faq dd::before {
  content: 'Ａ'; /* ここの文字数を変えたらdt,ddのpadding-left, text-indentも変える必要あり */
  background-color: lightpink;
  color: red;
  font-weight: bold;
}

/*----------------------------------------------------------------------------*/
/* 無料体験                                                                   */
/*----------------------------------------------------------------------------*/
#trial-lesson-flow {
  margin-bottom: 15px;
}
#trial-lesson-flow ol {
  padding-left: 2em;
  list-style-type: decimal;
}
#trial-lesson-doing {
}

/*----------------------------------------------------------------------------*/
/* お問い合わせフォーム                                                       */
/*----------------------------------------------------------------------------*/
/* ※<覚え書き>※※※※※※※※※※※※※※※※※※※※※※※※※ */
/* ※ お問い合わせフォーム内で、Pタグの自動挿入を抑制するため、※ */
/* ※ wp-config.php内で定数"WPCF7_AUTOP"を定義している。       ※ */
/* ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ */

/* 送信完了時にはフォームを非表示にする */
.wpcf7.is_submit .table,
.wpcf7.is_submit #promise,
.wpcf7.is_submit #submit {
  display: none;
}
/* ステップはPC版のみ表示 */
.wpcf7 .inquiry-step {
  display: none;
}
/* 色の設定 */
.wpcf7 .form-label {
  background-color: #cfa;
}
.wpcf7 .form-input {
  background-color: #f5f5ea;
}
.wpcf7 .required {
  background-color: #f70;
  color: white;
}
/* 必須項目の入力欄を黄色にする */
.wpcf7 input.wpcf7-validates-as-required {
	background-color: rgba(255, 255, 142, 0.46);
}
/* 確認画面の入力欄を入力できない風な表示にする */
.wpcf7 input.wpcf7c-conf,
.wpcf7 textarea.wpcf7c-conf {
  background-color: #f5f5ea;
  border: 0;
}
/* Chromeだとオートフィルで黄色になるのを上書き */
.wpcf7.is_confirm input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f5f5ea inset;
}
/* 確認画面でplaceholderが表示されないようにする */
.wpcf7.is_confirm input::placeholder,
.wpcf7.is_confirm textarea::placeholder {
  color: transparent;
}
.wpcf7 #promise {
  background-color: #f5f5ea;
}
.wpcf7 input.wpcf7-submit,
.wpcf7 input.wpcf7-confirm,
.wpcf7 input.wpcf7-back {
  background-color: #5a5;
}
/* メッセージ枠 */
.wpcf7 form .wpcf7-response-output {
  margin: 0 0 10px 0;
  padding: 5px;
  /* NG時の色 */
  border: 2px outset gold;
  background-color: yellow;
  color: red;
}
/* OK時のメッセージ枠の色 */
.wpcf7 form.sent .wpcf7-response-output {
  border: 2px outset lightseagreen;
  background-color: aquamarine;
  color: black;
}
/* テーブル全体の設定 */
.wpcf7 .table {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  width: 100%;
  margin: 0;
}
.wpcf7 .table-row {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-bottom: 5px;
}
.wpcf7 .table-column {
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap;  /* Safari */
  flex-wrap: wrap;
  align-items: center;
}
/* table-columnの中身を縦積みにする */
.wpcf7 .table-column.direction-column {
  -webkit-flex-wrap: wrap;  /* Safari */
  flex-wrap: wrap;
  align-content: center;
}
/* form-input内での行ブロック */
.wpcf7 .table-column.direction-column .column-row {
  width: 100%;
  display: -webkit-flex;  /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap;  /* Safari */
  flex-wrap: wrap;
  align-items: center;
}
.wpcf7 .form-label {
  padding: 5px;
  padding-bottom: 3px;
  -webkit-flex-direction: row-reverse;  /* Safari */
  flex-direction: row-reverse;
  justify-content: -webkit-flex-end;  /* Safari */
  justify-content: flex-end;
  width: 100%;
}
.wpcf7 .form-input {
  padding: 8px;
  padding-top: 5px;
  width: 100%;
}
.wpcf7 .required {
  border-radius: 20px;
  padding: 1px 5px;
  margin-right: 3px;
  font-size: 0.9em;
}
/* Contact Form 7のフォームを囲むspanタグの設定を上書き */
.wpcf7 span.wpcf7-form-control-wrap {
  /* 幅100%をとれるようにする */
  width: 100%;
  /* あとでwidthを上書きした時に100%を超えないようにする */
  max-width: 100%;
}
/* Contact Form 7のラジオボタンの設定を上書き */
.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
  margin-left: 0; /* 左マージンを無効化 */
  line-height: 1.7em;
  display: block; /* 縦並びにする */
}
/* 確認画面で、入力欄の注釈は非表示にする */
.wpcf7.is_confirm .form-input aside {
  display: none;
}
/* 確認画面で、チェックボックス・ラジオボタンで選択したものだけを表示する */
.wpcf7.is_confirm input[type="checkbox"],
.wpcf7.is_confirm input[type="radio"] {
  display: none;
}
.wpcf7.is_confirm input[type="checkbox"] ~ span,
.wpcf7.is_confirm input[type="radio"] ~ span {
  display: none;
}
.wpcf7.is_confirm input[type="checkbox"]:checked ~ span,
.wpcf7.is_confirm input[type="radio"]:checked ~ span {
  display: inline;
}
/* 名前のフォームのdiv */
/* form-input(form-columnでdisplay:flex指定)の中でブロックを横に分ける */
.wpcf7 .form-input .form-name-div {
  display: -webkit-flex;  /* Safari */
  display: flex;          /* labelとinputを縦並びにする */
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column; /* ↑ */
  max-width: calc((100% - 5px)/2 - 1px);
    /* ここを変えたら+のmargin-leftも変える必要あり */
    /* 小数が切り上げられても横幅を超えないように-1pxしておく */
  width: 120px;           /* ブロックの横幅 */
}
.wpcf7 .form-input .form-name-div ~ .form-name-div {
  margin-left: 5px; /* ここを変えたらmax-widthも変える必要あり */
}
/* 確認画面で、入力欄のラベル(姓・名)は非表示にする */
.wpcf7.is_confirm .form-input .form-name-div label {
  display: none;
}
.wpcf7 .form-name-div input[type="text"] {
  width: 100%;  /* form-name-divの幅いっぱい */
}
.wpcf7 input[type="tel"] {
  width: 100%;
}
.wpcf7 input[type="email"] {
  width: 100%;
}
.wpcf7 .form-input .form-zip-div {
  width: 80px;
  max-width: 30%; /* だいたいここまでに収まって入れば良い想定 */
  margin-left: 5px;
  margin-right: 2px;
}
.wpcf7 .form-input .form-zip-div ~ .form-zip-div {
  width: 100px;
  max-width: 40%; /* だいたいここまでに収まって入れば良い想定 */
  margin-left: 3px;
  margin-right: 0;
}
.wpcf7 input[type="text"].p-postal-code {
  width: 100%;  /* form-zip-divの幅いっぱい */
}
.wpcf7 .form-input .form-date-div {
  width: 80px;
  max-width: 25%; /* だいたいここまでに収まって入れば良い想定 */
  margin-right: 2px;
}
.wpcf7 .form-input .form-date-div ~ .form-date-div {
  width: 50px;
  max-width: 20%; /* だいたいここまでに収まって入れば良い想定 */
  margin-left: 5px;
  margin-right: 2px;
}
.wpcf7 input[type="number"] {
  width: 100%;
}
.wpcf7 input[type="text"].address {
  width: 100%;
}
.wpcf7 textarea {
  width: 100%;
  height: 60px;
}
/* お子様性別は、未選択を許可するため、デフォルトで「未選択」という項目をチェックする */
/* その上で、「未選択」という項目だけ非表示にする */
/* →非表示にすると、Tabで選択できなくなってしまうので、表示させておく */
.wpcf7 .your-child-sex .wpcf7-radio .wpcf7-list-item:first-child {
  /* display: none; */
}
/*--- 確認画面での表示スタイル(jQueryでチェックしてクラス付与) ---*/
/* 空の入力項目は、すべて非表示にする */
.wpcf7.is_confirm .table .form-input.empty > * {
  display: none;
}
/* jQueryが動かないとconfirm-textに値がセットされないので、 */
/* confirm-textに置き換えるのはenableクラスが付与されている時のみとする */
.wpcf7 .form-input .confirm-text {
  display: none;
}
.wpcf7.is_confirm .form-input .confirm-text.confirm-display-enable {
  display: inline;
}
/* confirm-textの前の要素を非表示にする。 */
/* marginはそのまま使いたいので、display:noneではなくblockでサイズ0にする。 */
/* 優先的に上書きしたいので、.tableをつけて詳細度を上げる。 */
.wpcf7.is_confirm .table .form-input *.confirm-display-disable {
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
}
.wpcf7.is_confirm .table .form-input *.confirm-display-disable * {
  display: none;
}
.wpcf7 #promise {
  margin: 5px 0;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.3em;
}
/* 送信ボタンを見やすくする */
.wpcf7 #submit {
  position: relative;
  margin-top: 10px;
  height: 40px;
  width: 100%;
  padding: 0;
}
.wpcf7 #submit br {
  display: none;
}
.wpcf7 #submit input.wpcf7-confirm,
.wpcf7 #submit input.wpcf7-back,
.wpcf7 #submit input.wpcf7-submit {
  height: 100%;
	color: white;
	font-size: 1.2em;
  border: 1px outset lightgray;
  border-radius: 8px;
  margin: 0;
}
.wpcf7 #submit input.wpcf7-confirm,
.wpcf7 #submit input.wpcf7-submit {
  /* submitの横幅はデフォルトでは100%とするが、 */
  /* javascriptが有効な環境ではbackとあわせて表示されるので、 */
  /* javascriptで50%に設定しなおす */
  width: 100%;
}
.wpcf7 #submit input.wpcf7-back {
  float: left;
}
.wpcf7 #submit input.wpcf7-submit {
  float: right;
}
.wpcf7 #submit input.wpcf7-back {
	width: calc((100% - 6px)/2);
    /* ここを変える場合はjavascriptのwpcf-submitのwidthに入れている文字列も変える必要あり */
}
/* 送信中は重複してボタンが押せないようにローディング状態をかぶせる。 */
/* javascriptで実現するため、cssでは常に表示なしの状態。 */
.wpcf7 #submit #wpcf7-waiting-box {
  display: none;      /* flexで有効 */
  position: absolute; /* submit枠内いっぱいを絶対参照でとる */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}
/* ↑の領域に半透明の背景色をかぶせることで、ボタンを押せない状態にする */
.wpcf7 #submit #wpcf7-waiting-box::before {
  content: '';
  position: absolute; /* ↑の領域いっぱい */
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: lemonchiffon;
  opacity: 0.5;
}
/* ローディングがわかるよう、欠けた円をぐるぐるまわす */
.wpcf7 #submit #wpcf7-waiting-box-content {
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid darkgreen;
  border-top-color: transparent;
  animation: spin 2s infinite linear;
}
/* アニメーションのキーフレーム */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*----------------------------------------------------------------------------*/
/* ページトップへ戻るボタン                                                   */
/*----------------------------------------------------------------------------*/
#pageTop {
  position: fixed;
  bottom: -40px;
  right: 5px;
}
#pageTop a {
  display: block;
  z-index: 999;
  border-radius: 45%;

  width: 80px;
  height: 80px;

  background-color: #585;
  color: white;

  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  padding-top: 20px;

  opacity: 0.7;
}
/* cssで「∧」を実現する */
#pageTop a::before {
  position: absolute; /* もとのa要素に対する絶対参照 */
  content: '';
  display: block;
  top: 8px; /* 上からの位置を調整 */
  left: calc(50% - (12px / 2));  /* ここを変えたらwidth,heightも見直す必要あり */
  width: 12px;  /* ここを変えたらleftも見直す必要あり */
  height: 12px; /* ↑ */
  border-top: 2px solid white;  /* ∧の色 */
  border-left: 2px solid white; /* ↑ */
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*----------------------------------------------------------------------------*/
/* ビューポートが広い時(PC、タブレット)の設定                                 */
/*----------------------------------------------------------------------------*/
@media screen and (min-width: 769px)
{
  body {
    font-size: 14px;
    line-height: 1.5em;
  }

  .with-margin {
    margin-bottom: 15px;
  }
  .with-big-margin {
    margin-bottom: 20px;
  }

  /* モバイルのみ、PCのみの表示項目を調整 */
  .none-at-mobile {
    display: inline;
  }
  .none-at-pc {
    display: none;
  }

  .original-header {
    margin-bottom: 10px;
  }

  /* iOS用に16pxに設定していたのを普通のサイズに戻す */
  input, textarea {
    font-size: inherit;
  }

  .container {
    width: 900px; /* 幅を固定 */
  }

  /*----------------------------------------------------------------------------*/
  /* 記事タイプに応じてスタイルを切り替える                                     */
  /*----------------------------------------------------------------------------*/
  /* 投稿記事 */
  .type-normalpost h1,
  .type-normalpost h2,
  .type-normalpost h3,
  .type-normalpost h4,
  .type-normalpost h5 {
    padding: 20px 0;
  }
  .type-normalpost p {
    padding: 7px 0;
  }
  /* 固定ページやその他いじったページ */
  .type-custom {
  }

  /* お知らせ記事 */
  .news-in-body {
    margin-bottom: 20px;
  }

  #header .header_top {
    flex-wrap: nowrap;
    margin-bottom: 10px;
  }
  #header .header_logo {
    width: auto;          /* 横幅を初期化 */
    flex-grow: 1;         /* 左側いっぱいを埋める */
    display: flex;        /* 内容物を上下方向に中央揃えする */
    align-items: center;  /* ↑ */
  }
  #header .header_logo h1 img {
    width: auto;          /* 横幅を初期化 */
  }

  #header .header_sub {
    margin-top: 0;  /* 折り返し時用の上側マージンを初期化 */
    width: auto;    /* 折り返し時用の幅設定を初期化 */
    justify-content: flex-start;  /* 折り返し時用の横均等割り配置を初期化 */
  }
  #header .header_telnum span {
    padding: 10px;    /* 空白を広めに再設定 */
  }
  #header .header_btns {
    margin-left: 15px;  /* 左のブロックとの間をあける */
  }
  #header .header_btns li a {
    padding: 10px;    /* 空白を広めに再設定 */
  }

  #header .menu {
    /* 折り返さないよう上書き */
    flex-wrap: nowrap;
  }
  #header .menu::after {
    /* 擬似要素を初期化 */
    content: normal;
  }
  #header .menu li {
    /* リンクアイテムの幅を上書き */
    width: 100%;
    border-top: none;
  }
  #header .menu a {
    padding: 10px 0;
  }

  #header .breadcrumb {
    display: inline;
    width: 100%;
  }
  #header .breadcrumb p {
    padding: 0;
    margin: 15px 10px 0 10px;
  }

  #main {
    flex-direction: row;  /* メインコンテンツを横並びに上書き */
    margin-bottom: 20px;
  }
  #main #posts {
    padding: 20px;
  }
  #main #sidebar {
    padding: 10px;
  }

  #posts {
    width: calc(100% - 280px - 15px); /* sidebarの横幅と、sidebarとの空白分を引く */
  }
    #posts article + article {
      margin-top: 25px;
    }
    #posts .post-header {
      /* この値を変えるときはjQueryのお問い合わせフォームのスクロール量も変える必要あり */
      margin-bottom: 20px;
    }
    #posts .post-header h2 {
      padding: 20px;
      font-size: 1.7em;
    }
    #posts.index-php .post-header h2 {
      font-size: 1.3em;
      padding: 8px 8px 5px 8px;
    }
    #posts .post-meta {
      margin-top: 10px;
    }
    #posts .post-content {
    }
    #posts .post-list {
    }
      #posts .post-image {
      }
      #posts .post-body {
      }
      #posts .navigation {
        position: relative;
        margin-top: 20px;   /* 本文との隙間を広めに設定し直す */
        padding-top: 10px;  /* ここを変えるときは、afterのtopも変える必要あり */
      }
      /* 前の記事と次の記事の中間に点線を引く */
      #posts .navigation::after {
        content: '';
        position: absolute;
        top: 10px;  /* ここを変えるときは、navigationのpadding-topも変える必要あり */
        bottom: 0;
        left: 0;
        right: 0;
        width: 1px;
        margin: auto;
        border-left: 1px dotted darkgreen;
      }
      #posts .navigation a {
        border: none;                   /* 枠なしに設定し直す */
        border-radius: 0;               /* ↑ */
        background-color: transparent;  /* ↑ */
      }

  #sidebar {
    position: relative;
    margin-top: 0;  /* 縦並び時用のマージンを初期化 */
    width: 280px;       /* ここを変えたらpostsの横幅の指定も変える必要あり */
    margin-left: 15px;  /* ↑ */
  }
  /* stickyを効かせるためには、 */
  /* 「親要素の中でスクロールさせる」必要がある。 */
  /* そのため、親要素の高さを決め、overflowをhidden以外にする。 */
  #sidebar aside {
    display: block;
    overflow: visible;
    height: 100%; /* 高さを固定することでstickyのtopをきかせる */
  }
  #sidebar .sticky-top-at-pc {
    width: 100%;
    position: -webkit-sticky;
    position: sticky; /* 配置を固定する */
    top: 5px; /* 上から5pxの位置に固定する */
      /* #sidebarのpaddingとborder-radiusを考慮した値にする必要あり。 */
  }
  #sidebar .widget .menu a {
    padding: 10px 0;
  }
  .news h2 {
    margin-bottom: 10px;
  }
  .news a + a {
    margin-top: 8px;
  }

  #footer {
    padding: 10px 0;
  }

  /*----------------------------------------------------------------------------*/
  /* トップページ                                                               */
  /*----------------------------------------------------------------------------*/
  /* 写真とテキストの紹介エリア */
  .introduction-with-picture {
    display: block; /* flexレイアウトを上書き(テキストを回り込ませたいため) */
    margin-bottom: 16px;
  }
  /* 写真 */
  .introduction-with-picture .picture {
    width: auto;  /* 幅100%を上書き */
    max-width: 50%;
    float: left;
    margin: 0 15px 4px 0;
  }
  .introduction-with-picture::after {
    clear: both;
    content: '';
    display: block;
  }
  /* 紹介文 */
  .introduction-with-picture .text {
    width: auto;  /* 幅100%を上書き */
    margin-bottom: 4px;
  }

  /*----------------------------------------------------------------------------*/
  /* 講師紹介                                                                   */
  /*----------------------------------------------------------------------------*/
  /* 講師の情報 */
  #lecture-information {
    line-height: 2.0em; /* 行間を広めにとる */
  }
  #lecture-comment {
    padding: 12px 15px;
    margin-top: -3px;
      /* 写真(テキスト)との間が20pxで、15pxの吹き出しとの間が広いので */
      /* 5px→2pxになるよう-3pxにする */
    margin-bottom: 20px;
    border-radius: 20px;
  }

  /*----------------------------------------------------------------------------*/
  /* コース紹介                                                                 */
  /*----------------------------------------------------------------------------*/
  .course-information {
    margin-bottom: 15px;
  }
  .course-information section + section {
    margin-top: 20px;
  }
  .course-information h3 {
    padding: 5px 10px;  /* ここを変えたら、open-tableのpadding-left, leftも変える必要あり */
    margin-bottom: 10px;
  }
  .course-information h3.collapse-table {
    padding-left: calc(10px + 14px + 10px);
      /* h3のもとの設定値 + [+]分の横幅 + タイトルとの隙間 */
      /* ここを変えたら、↑も変える必要あり */
  }
  /* [+]はjavascriptで表示する(collapse-tableクラスを動的に付与) */
  .course-information h3.collapse-table::before {
    top: calc(50% - (14px / 2));  /* ↑ */
      /* ここを変えたら、height,widthとopen-tableのpadding-leftも変える必要あり */
    left: 10px;  /* ここを変えたら、h3のもとのpadding-leftも変える必要あり */
    font-size: 0.9em;
    height: 14px;  /* ここを変えたら、topとwidthとopen-tableのpadding-leftも変える必要あり */
    width: 14px;   /* ここを変えたら、topとheightとopen-tableのpadding-leftも変える必要あり */
  }
  .course-table {
    width: calc(100% - 10px);
    margin-left: 10px;
  }
  .course-table thead {
    display: table-header-group;
  }
  .course-table td.course-table-age {
    background-color: white;
    font-weight: normal;
    text-align: center;
  }
  .course-table td.course-table-overview {
    background-color: white;
  }
  .course-table > tbody > tr {
    display: table-row;
    margin-bottom: 0;
  }
  .course-table th.course-table-age,
  .course-table td.course-table-age {
    width: 210px;
  }
  .course-table thead th,
  .course-table th.course-table-age,
  .course-table td.course-table-age,
  .course-table td.course-table-overview {
    padding: 5px;
    margin: 0;
    border: solid 1px lightgray;
  }
  .course-table td.course-table-overview {
    width: auto;
  }
  /* 行と行の間の線を目立たせる */
  .course-table tr + tr td.course-table-age,
  .course-table tr + tr td.course-table-overview {
    border-top: 2px solid lightgray;
  }
  /* タイムスケジュール */
  #time-schedule {
    margin-top: 35px;
  }
  .time-schedule {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
  }
  /* ヘッダー列 */
  .time-schedule .time-schedule-header {
    display: block;
    width: 60px;
    margin-right: 5px;
  }
  /* 中央揃え */
  .time-schedule .sch-headline,
  .time-schedule .sch-line-time,
  .time-schedule .sch-line-course {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  /* 中身列 */
  .time-schedule .time-schedule-body {
    flex-direction: row;
    width: auto;
    flex-grow: 1;
  }
  /* 曜日別のテーブル */
  .time-schedule .sch-weekday-table {
    flex-grow: 1;
    border: 0;
  }
  /* 曜日間 */
  .time-schedule .sch-weekday-table + .sch-weekday-table {
    margin-top: 0;
    margin-left: 5px;
  }
  /* 曜日欄 */
  .time-schedule .sch-weekday {
    height: 2em;
    margin-bottom: 5px;
    border-bottom: 0;
    padding: 0;
  }
  .time-schedule .time-schedule-header .sch-weekday {
    background-color: transparent;
  }
  /* 内容欄 */
  .time-schedule .sch-lines {
  }
  .time-schedule .time-schedule-body .sch-lines {
    flex-grow: 1;
    background-color: gainsboro;
    padding: 0;
  }
  /* 内容欄の1行 */
  .time-schedule .sch-line,
  .time-schedule .sch-headline,
  .time-schedule .sch-gridline {
    height: 5em;  /* ここを変えたらsch-seconds-**のheightも変える必要あり */
  }
  .time-schedule .sch-headline {
    background-color: palegreen;
    padding-top: 4px;
  }
  .time-schedule .sch-headline + .sch-headline {
    border-top: 2px solid lemonchiffon;
  }
  .time-schedule .sch-line {
    flex-direction: column;
    justify-content: center;
    border: 2px solid gray;
    background-color: yellow;
    padding: 0;
  }
  .time-schedule .sch-line.sch-subclass {
    background-color: silver;
    color: dimgray;
  }
  .time-schedule .sch-line + .sch-line {
    border-top: none;
  }
  /* 分数によって高さを調整する */
  .time-schedule .sch-seconds-0 { height: calc(5em * ( 0/60)); }
  .time-schedule .sch-seconds-5 { height: calc(5em * ( 5/60)); }
  .time-schedule .sch-seconds-10 { height: calc(5em * (10/60)); }
  .time-schedule .sch-seconds-15 { height: calc(5em * (15/60)); }
  .time-schedule .sch-seconds-20 { height: calc(5em * (20/60)); }
  .time-schedule .sch-seconds-25 { height: calc(5em * (25/60)); }
  .time-schedule .sch-seconds-30 { height: calc(5em * (30/60)); }
  .time-schedule .sch-seconds-35 { height: calc(5em * (35/60)); }
  .time-schedule .sch-seconds-40 { height: calc(5em * (40/60)); }
  .time-schedule .sch-seconds-45 { height: calc(5em * (45/60)); }
  .time-schedule .sch-seconds-50 { height: calc(5em * (50/60)); }
  .time-schedule .sch-seconds-55 { height: calc(5em * (55/60)); }
  .time-schedule .sch-seconds-60 { height: calc(5em * (60/60)); }
  .time-schedule .sch-seconds-65 { height: calc(5em * (65/60)); }
  .time-schedule .sch-seconds-70 { height: calc(5em * (70/60)); }
  .time-schedule .sch-seconds-75 { height: calc(5em * (75/60)); }
  .time-schedule .sch-seconds-80 { height: calc(5em * (80/60)); }
  .time-schedule .sch-seconds-85 { height: calc(5em * (85/60)); }
  .time-schedule .sch-seconds-90 { height: calc(5em * (90/60)); }
  .time-schedule .sch-seconds-95 { height: calc(5em * (95/60)); }
  .time-schedule .sch-seconds-100 { height: calc(5em * (100/60)); }
  .time-schedule .sch-seconds-105 { height: calc(5em * (105/60)); }
  .time-schedule .sch-seconds-110 { height: calc(5em * (110/60)); }
  .time-schedule .sch-seconds-115 { height: calc(5em * (115/60)); }
  .time-schedule .sch-seconds-120 { height: calc(5em * (120/60)); }
  .time-schedule .sch-seconds-125 { height: calc(5em * (125/60)); }
  .time-schedule .sch-seconds-130 { height: calc(5em * (130/60)); }
  .time-schedule .sch-seconds-135 { height: calc(5em * (135/60)); }
  .time-schedule .sch-seconds-140 { height: calc(5em * (140/60)); }
  .time-schedule .sch-seconds-145 { height: calc(5em * (145/60)); }
  .time-schedule .sch-seconds-150 { height: calc(5em * (150/60)); }
  .time-schedule .sch-seconds-155 { height: calc(5em * (155/60)); }
  .time-schedule .sch-seconds-160 { height: calc(5em * (160/60)); }
  .time-schedule .sch-seconds-165 { height: calc(5em * (165/60)); }
  .time-schedule .sch-seconds-170 { height: calc(5em * (170/60)); }
  .time-schedule .sch-seconds-175 { height: calc(5em * (175/60)); }
  .time-schedule .sch-seconds-180 { height: calc(5em * (180/60)); }
  .time-schedule .sch-seconds-185 { height: calc(5em * (185/60)); }
  .time-schedule .sch-seconds-190 { height: calc(5em * (190/60)); }
  .time-schedule .sch-seconds-195 { height: calc(5em * (195/60)); }
  .time-schedule .sch-seconds-200 { height: calc(5em * (200/60)); }
  .time-schedule .sch-seconds-205 { height: calc(5em * (205/60)); }
  .time-schedule .sch-seconds-210 { height: calc(5em * (210/60)); }
  .time-schedule .sch-seconds-215 { height: calc(5em * (215/60)); }
  .time-schedule .sch-seconds-220 { height: calc(5em * (220/60)); }
  .time-schedule .sch-seconds-225 { height: calc(5em * (225/60)); }
  .time-schedule .sch-seconds-230 { height: calc(5em * (230/60)); }
  .time-schedule .sch-seconds-235 { height: calc(5em * (235/60)); }
  .time-schedule .sch-seconds-240 { height: calc(5em * (240/60)); }
  .time-schedule .sch-seconds-245 { height: calc(5em * (245/60)); }
  .time-schedule .sch-seconds-250 { height: calc(5em * (250/60)); }
  .time-schedule .sch-seconds-255 { height: calc(5em * (255/60)); }
  .time-schedule .sch-seconds-260 { height: calc(5em * (260/60)); }
  .time-schedule .sch-seconds-265 { height: calc(5em * (265/60)); }
  .time-schedule .sch-seconds-270 { height: calc(5em * (270/60)); }
  .time-schedule .sch-seconds-275 { height: calc(5em * (275/60)); }
  .time-schedule .sch-seconds-280 { height: calc(5em * (280/60)); }
  .time-schedule .sch-seconds-285 { height: calc(5em * (285/60)); }
  .time-schedule .sch-seconds-290 { height: calc(5em * (290/60)); }
  .time-schedule .sch-seconds-295 { height: calc(5em * (295/60)); }
  .time-schedule .sch-seconds-300 { height: calc(5em * (300/60)); }
  .time-schedule .sch-seconds-305 { height: calc(5em * (305/60)); }
  .time-schedule .sch-seconds-310 { height: calc(5em * (310/60)); }
  .time-schedule .sch-seconds-315 { height: calc(5em * (315/60)); }
  .time-schedule .sch-seconds-320 { height: calc(5em * (320/60)); }
  .time-schedule .sch-seconds-325 { height: calc(5em * (325/60)); }
  .time-schedule .sch-seconds-330 { height: calc(5em * (330/60)); }
  .time-schedule .sch-seconds-335 { height: calc(5em * (335/60)); }
  .time-schedule .sch-seconds-340 { height: calc(5em * (340/60)); }
  .time-schedule .sch-seconds-345 { height: calc(5em * (345/60)); }
  .time-schedule .sch-seconds-350 { height: calc(5em * (350/60)); }
  .time-schedule .sch-seconds-355 { height: calc(5em * (355/60)); }
  .time-schedule .sch-seconds-360 { height: calc(5em * (360/60)); }
  /* 時間 */
  .time-schedule .sch-line-time {
    width: 100%;
  }
  /* コース名 */
  .time-schedule .sch-line-course {
    width: 100%;
    flex-grow: inherit;
  }

  /*----------------------------------------------------------------------------*/
  /* Q&A                                                                        */
  /*----------------------------------------------------------------------------*/
  .faq {
  }
  .faq dt {
    margin-top: 15px;
  }
  .faq dt:first-child {
    margin-top: 0;
  }

  /*----------------------------------------------------------------------------*/
  /* 無料体験                                                                   */
  /*----------------------------------------------------------------------------*/
  #trial-lesson-flow {
    margin-bottom: 20px;
  }

  /* ステップはPC版のみ表示 */
  .wpcf7 .inquiry-step {
    display: block;
  }
  /* ステップナビリスト */
  .wpcf7 #formNav {
    display: none;  /* flexで有効 */
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .wpcf7 #formNav li {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 30px;
  	padding: 4px 0px;
  	text-align: left;
  	text-indent: 10px;
  	font-size: 1.1em;
    background-color: #8d8;
  }
  /* 対象ステップ以外のスタイル */
  .wpcf7 #formNav li {
    color: #000;
    text-shadow: none;
    font-weight: normal;
  }
  /* 対象ステップのみ強調スタイルにする */
  .wpcf7.is_input #formNav li:nth-child(1),
  .wpcf7.is_confirm #formNav li:nth-child(2),
  .wpcf7.is_submit #formNav li:nth-child(3) {
    color: white;
    text-shadow: 0 0 4px black;
  }
  /* > を表示 */
  .wpcf7 #formNav li+li::before {
    left: -20px;
    content: '';
    width: 15px;
    height: 15px;
    border: 0px;
    border-top: solid 2px white;
    border-right: solid 2px white;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
  }

  .wpcf7 .table {
    border: solid 1px white;
  }
  .wpcf7 .table-row {
    flex-direction: row;
    margin-bottom: 0;
  }
  .wpcf7 .table-row:last-child {
    margin-bottom: 5px;
  }
  .wpcf7 .table-row + .table-row {
    border-top: solid 1px white;
  }
  .wpcf7 .table-column + .table-column {
    border-left: solid 1px white;
  }
  .wpcf7 .form-label {
    padding: 10px;
    flex-direction: row;
    justify-content: space-between;
    width: 200px; /* ここを変える場合は、form-inputのwidthも変える必要あり */
  }
  .wpcf7 .form-input {
    padding: 10px;
    width: calc(100% - 200px);  /* ここを変える場合は、form-labelのwidthも変える必要あり */
  }
  .wpcf7 .required {
    margin-right: 0;
  }
  /* 名前のフォームのdiv */
  .wpcf7 .form-input .form-name-div {
    width: 100px;           /* ブロックの横幅 */
  }
  /* ラベル(姓・名)は小さめにセット */
  .wpcf7 .form-input .form-name-div label {
    font-size: 0.9em;
    line-height: 1em;
    margin-bottom: 2px;
  }
  .wpcf7 .form-input .form-name-div ~ .form-name-div {
    margin-left: 10px;
  }
  .wpcf7 input[type="tel"] {
    width: 150px;
  }
  .wpcf7 input[type="email"] {
    width: 300px;
  }
  .wpcf7 .form-input .form-zip-div {
    width: 70px;
  }
  .wpcf7 .form-input .form-zip-div ~ .form-zip-div {
    width: 80px;
  }
  .wpcf7 .form-input .form-date-div {
    width: 70px;
  }
  .wpcf7 .form-input .form-date-div ~ .form-date-div {
    width: 45px;
  }
  .wpcf7 input[type="text"].address {
    width: 100%;
  }
  .wpcf7 textarea {
    height: 70px;
  }
  /* 送信ボタンを見やすくする */
  .wpcf7 #submit {
  	height: 60px;
  }

  /*----------------------------------------------------------------------------*/
  /* ページトップへ戻るボタン                                                   */
  /*----------------------------------------------------------------------------*/
  #pageTop {
    bottom: -50px;
    right: 20px;
  }
  #pageTop a {
    width: 100px;
    height: 100px;

    font-size: 1.1em;
    letter-spacing: 0.05em;
    padding-top: 25px;

    opacity: 0.9;
  }
  #pageTop a:hover {
    opacity: 0.7;
  }
  /* cssで「∧」を実現する */
  #pageTop a::before {
    top: 10px; /* 上からの位置を調整 */
    left: calc(50% - (14px / 2));  /* ここを変えたらwidth,heightも見直す必要あり */
    width: 14px;  /* ここを変えたらleftも見直す必要あり */
    height: 14px; /* ↑ */
  }
}