@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  /*font: inherit;*/
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
  scroll-behavior: smooth;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
/* 
カラースキーム
#8C6D51　こげちゃ
#F2D338　キイロ
#F2EED8　はだいろ
#2F3273　コン
*/
/*
COMMON
 */
html, body {
  text-align: center;
  font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS ゴシック", "MS Gothic", sans-serif;
  background: #F#FFF6EA;
  color: #000;
}
div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
:focus {
  outline: none;
}
.clearfix:after {
  content: url(../images/spacer.gif);
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: .1em;
  line-height: 0;
}
.clearfix {
  display: inline-table;
  min-height: 1%;
}
p {
  margin: 0 0 1em 0;
  line-height: 1.6em;
}
img {
  max-width: 100%;
  height: auto;
  width: auto\9;
}
/* LINK */
a {
  color: #2F3273;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  opacity: .8;
}
.radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #f00;
  width: 200px;
  height: 200px;
  position: relative;
  behavior: url(css/PIE.htc);
}
/* Responsive */
.inner {
  width: 80%;
  padding: 0;
  margin: 0 auto;
}
.forpc {
  display: block;
}
.forsp {
  display: none;
}
/*

HEADER

*/
header {
  margin: 0;
  padding: 0;
  background-color: #000;
}
.pageTop {
  margin: 0;
  text-align: left;
}
.pageTop a {
  display: inline-block;
  padding: 20px;
}
header img {
  display: block;
}
.title {
  margin: 0;
  padding: 0;
  background: #BD413E;
}
.title img {
  height: auto;
  display: block;
  margin: 0 auto;
}
.title p {
  font-size: 28px;
  color: #000;
  margin: 0 auto;
  line-height: 1.4em;
}
.title h1 {
  padding: 1.2em .5em;
  font-weight: 600;
  color: #fff;
}
/* HEADING */
h1 {
  font-size: 26px;
  line-height: 1.4em;
  font-weight: normal;
  /*color: #000000;*/
}
h2 {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 30px;
}
h3 {
  font-size: 1.2em;
  line-height: 1.8em;
  font-weight: 600;
}
h4 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: 600;
}
.wrapper {
  padding: 0;
  margin: 30px 0 0 0;
}
footer {
  width: 100%;
  padding: 40px 0;
  text-align: center;
  font-size: 12px;
  color: #000;
}
/*

CONTENTS

*/
.dlcord {
  display: none;
}
.over-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1000;
}
.pwHeading {
  color: #000;
  text-align: left;
  font-size: .9em;
  margin: 20px auto;
}
.pwHeading_600 {
  color: #000;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  margin: 40px auto;
}
.pwGuide {
  font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 12px;
  line-height: 1.6em;
}
img.jkt {
  width: 120px;
  height: auto;
  margin: 0;
  border: solid 1px #333;
}
.downloadNote {
  padding: 0 0 0 0;
  margin: 15px 0 0 0;
  font-size: 12px;
  font-family: Verdana, Roboto, 'Droid Sans, '游ゴシック, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN, 'メイリオ, Meiryo, sans-serif;
  line-height: 2em;
  text-align: center;
}
.downloadHowto {
  border: 1px solid #333;
  padding: 10px;
  margin: 20px 0;
  font-size: 12px;
  font-family: Verdana, Roboto, 'Droid Sans, '游ゴシック, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN, 'メイリオ, Meiryo, sans-serif;
}
/* FORM */
form {
  margin: 0 0 20px 0 !important;
}
select {
  padding: 20px 0;
  margin: 0 0 20px 0;
  border: 1px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  behavior: url(css/PIE.htc);
  font-size: 12px;
  line-height: 1em;
}
input.pwarea {
  width: 14px;
  padding: 8px 10px;
  margin: 0 0 10px 0;
  border: 1px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  behavior: url(css/PIE.htc);
  font-size: 14px;
  line-height: 1em;
  text-align: center;
}
.btn_submit, .btn_reset {
  color: white;
  border: none;
  box-shadow: none;
  font-size: 14px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  padding: 10px 32px;
  margin: 0 5px;
  cursor: pointer;
}
.btn_submit {
  background-color: ##2F3273 !important;
}
.btn_submit:hover {
  background-color: ##2F3273 !important;
  color: #fff;
}
.btn_reset {
  background-color: #333 !important;
}
.btn_reset:hover {
  background-color: #666 !important;
}
.dl {
  display: inline-block;
  font-size: 13px;
}
.dl .btn_submit {
  width: 100px;
  margin-bottom: 5px;
}
.dl a.btn_submit {
  color: #000;
  display: block;
}
.ttl2 {
  margin: 20px auto 0;
  border-top: dotted 1px #444;
  padding-top: 20px;
}
.btm-line {
  margin: 10px 10px 0 0;
}
/* ANCHOR */
.topTop {
  position: fixed;
  bottom: 20px;
  right: 0;
  padding: 0;
  text-align: left;
  line-height: 1em;
}
.topTop a img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: alpha(opacity=70);
  -khtml-opacity: 0.7;
  -moz-opacity: 0.7;
  cursor: pointer;
}
.topTop a img:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
}
.audioList {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.audioList h2, .audioList h3 {
  text-align: left;
  line-height: 1.8em;
}
.audioList h3 {
  margin: 30px 0px 20px;
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: dotted 1px #000;
}
.audioList h3 .week {
  font-size: 0.9em;
  color:  #93004C;
  font-weight: 600;
  font-style: italic;
  margin-right: 10px;
}
.audioList dt .day {
  background: #C3C3C3;
  border-radius: 30%;
  width: 120px;
  height: 80px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 5px;
  margin-right: 10px;
}
.audioList table {
  width: 100%;
}
.audioList table th, .audioList table td {
  padding: 20px;
  border: solid rgba(233, 113, 35, 1.00);
}
.audioList table th {
  line-height: 1.4em;
}
.audioList table th.dlttl {
  /*	text-align:right;*/
}
.audioList table td {
  text-align: center;
}
.audioList .btn_submit {
  white-space: nowrap;
  display: inline-block;
}
.btn_submit.dl {
  background: #FBBC25;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  display: block;
}
.btn_submit.dl:hover {
  opacity: .7;
}
.audioList table tr.forpctr th, .audioList table tr.forpctr td {
  /*	border-bottom:none!important;*/
}
.audioList table tr.forpctr.dot th, .audioList table tr.forpctr.dot td {
  border-top: 1px dashed #000 !important;
}
/* ANCHOR */
.toTop {
  width: 30px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 0;
  text-align: left;
  line-height: 1em;
  z-index: 9999;
}
.toTop a img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: alpha(opacity=70);
  -khtml-opacity: 0.7;
  -moz-opacity: 0.7;
  cursor: pointer;
}
.toTop a img:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
}
.pageTop {
  /*padding: 15px;*/
  text-align: left;
  margin: 0 !important;
}
/*

OverWriteStyles

*/
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
hr.dot {
  width: 100%;
  border: dotted #ddd;
  border-width: 1px 0 0 0;
  height: 1px;
  /* for IE6 */
  clear: both;
  /* for IE6 */
  margin: 15px 0;
}
/* ALIGNMENT */
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.txtleft {
  text-align: left;
}
.txtright {
  text-align: right;
}
.txtcenter {
  text-align: center;
}
/* Vertical Center */
.verticalcenter p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.dlArea a {
  margin: 10px 10px;
}
.audioList dl {
  display: flex;
  align-items: center;
  /*border-bottom: dotted 1px #000;
    margin-bottom: 20px;*/
}
.audioList dl:first-of-type {
  /*border-top: dotted 1px #888;
	padding-top:20px;*/
}
dt {
  width: 65%;
  text-align: left;
  margin-bottom: 10px;
  line-height: 1.4em;
  padding-right: 20px;
  font-size: 15px;
}
.audioList dt span {
  color: #2F3273;
  font-weight: bold;
}
.audioList dd {
  width: 35%;
  text-align: right;
  margin-bottom: 10px;
}
.audioList audio {
  width: 100%;
}
.audioList ul {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.audioList li {
  padding: 20px;
}
.audioList li.ttl {
  text-align: left;
}
.chap {
  font-size: 1.3em;
  margin: 10px auto;
}
@media screen and (max-width: 800px) {
  .inner {
    width: 90%;
  }
  .forsp {
    display: inline-block;
  }
  .forpc {
    display: none;
  }
  .downloadNote {
    border-top: 1px dotted #333;
    padding: 15px 0 0 0;
    margin: 15px 0 0 0;
    line-height: 1.6em;
  }
  /*	.forpctr{display:none;}*/
  .btn_submit, .btn_reset {
    padding: 10px 20px;
  }
  .dlArea a {
    margin: 10px auto;
  }
}
@media screen and (max-width: 700px) {
  select {
    width: 360px;
    font-size: 16px;
  }
  input.pwarea {
    width: 20px;
    padding: 8px 5px;
    margin: 0 2px 2px 0;
  }
  .downloadNote {
    text-align: left;
  }
  .dl {
    margin-bottom: 0;
  }
  .wrapper {
    margin-bottom: 0;
  }
  .pwHeading {
    text-align: left;
  }
  .audioList table th, .audioList table td {
    padding: 10px;
  }
  .audioList table th {
    text-align: left !important;
  }
  h1 {
    font-size: 18px;
  }
  h2 {
    font-size: 14px;
    margin: 0;
  }
  .audioList dl {
    display: block;
    margin-bottom: 10px;
  }
  .audioList dt {
    width: 100%;
    font-size: 11pt;
    padding-right: 0px;
    font-color: #000;
    line-height: 1.6
  }
  .audioList dt {
    margin-bottom: 10px;
  }
  .audioList dd {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
  h3 {
    font-size: 1.4em;
    line-height: 1.1em;
    font-weight: 600;
  }
  .audioList h2, .audioList h3 {
    text-align: left;
    line-height: 1.4em;
  }
  .audioList h3 {
    font-size: 1.4em;
    margin: 40px 0px 10px;
  }
  .sp-space {
    margin-bottom: 60px;
  }
  .audioList dt .day {
    background: #C3C3C3;
    border-radius: 20%;
    width: 100px;
    height: 80px;
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 5px;
    margin-right: 2px;
  }
}
@media screen and (max-width: 500px) {
  html {
    -webkit-text-size-adjust: none;
  }
  .spnone {
    display: none !important;
  }
}
.btn-line {
  margin-bottom: 10px;
}
.owabi {
  font-size: 0.8em;
  background-color: #FFFDED;
  text-align: left !important;
  padding: 10px;
}

  /* PC・共通のレイアウト設定 */
  .lesson-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
  .lesson-btn-group .btn-line {
    font-size: .9em!important;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  /* スマホ表示（画面幅600px以下）の最適化 */
  @media (max-width: 600px) {
    .lesson-btn-group {
      gap: 8px; /* スマホ時の隙間 */
    }
    .lesson-btn-group .btn-line {
      /* 2列に並べる（隙間分を引いて約50%に） */
      width: calc(50% - 4px); 
      padding: 10px 0;
      text-align: center;
    }

  }

  /* PC・共通のレイアウト設定 */
.app-list {
    list-style: none;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
  }
  .app-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
  .list-title {
    font-size: 15px;
    color: #333;
  }
  .btn-group {
    display: flex;
    gap: 10px;
  }
  .btn-open {
    display: inline-block;
    padding: 6px 14px;
    background-color: #517ead;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    transition: background-color 0.2s;
    white-space: nowrap;
  }
  .btn-open:hover {
    background-color: #8fa0b3;
    text-decoration: none;
  }
  .nav-link{
    font-size: .9em;
  }

  /* タブスマホ表示（画面幅600px以下）の最適化 */
  @media (max-width: 600px) {
    .nav-tabs {
      display: flex !important;
      flex-wrap: nowrap !important; /* タブの折り返しを防ぐ */
      overflow-x: auto !important;  /* 横スクロールを許可 */
      -webkit-overflow-scrolling: touch; /* スムーズなスクロール（iOS用） */
      border-bottom: 1px solid #dee2e6;
      padding-bottom: 1px;
    }
    
    .nav-item {
      flex: 0 0 auto; /* 横幅が縮まないように固定 */
    }
    
    .nav-link {
      white-space: nowrap; /* 文字が途中で改行されるのを防ぐ */
      padding: 10px 16px !important; /* タップしやすいサイズに調整 */
    }
    
    /* スクロールバーを少し見やすく、または非表示にする場合（お好みで） */
    .nav-tabs::-webkit-scrollbar {
      height: 4px;
    }
    .nav-tabs::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
    }
  }

  /* スマホ表示（画面幅600px以下）の修正 */
  @media (max-width: 600px) {
    .app-list li {
      flex-direction: column;   /* 1行目タイトル、2行目ボタンの段落ちにする */
      align-items: flex-start;  /* 左寄せに揃える */
      gap: 12px;                /* タイトルとボタンの間の隙間 */
    }
    .list-title {
      width: 100%;              /* タイトルを1行丸ごと使う */
    }
    .btn-group {
      width: 100%;              /* ボタンの枠を横いっぱいに広げる */
    }
    .btn-open {
      flex: 1;                  /* 2つのボタンを均等に50%幅にする */
      text-align: center;       /* 文字を中央寄せにする */
      padding: 10px 14px;       /* スマホでタップしやすいよう少し厚く */
    }
    .nav-link{
    font-size: .8em;
  }
  }