/* Tables for 孔子学院20160624
   ========================================================================== */

table.tablesetting td,th {
font-size: 14px;
border-spacing: 5px;
text-align: center;
}

table.tablesetting1 td,th {
font-size: 14px;
border-spacing: 5px;
text-indent: 2px;
}

table.course th,td {
font-size: 14px;
text-align: center;
vertical-align: middle;
word-break: break-all;
word-wrap: break-all;
}

table.course th {
background-color: #f0f0f0;
}

table.course td {
background-color: #ffffff;
text-align: center;
}

table.lecture td {
text-align: left;
font-size: 14px;
vertical-align:text-top;
}

table.lecture th {
vertical-align:text-top;
}

table.teacher {
width: 95%;
background-color: #ffffff;
font-size: 14px;
line-height: 200%;
}

table.teacher th {
background-color: #cccccc;
height: 30px;
}

table.teacher td {
height: 230px;
vertical-align: middle;
text-align: center;
padding: 10px;
line-height: 150%;
}

table.teacher img {
vertical-align: middle;
text-align: center;
}

table.tuition {
height: 1416px;
align: center;
text-align: center;
width: 100%;
background-color: #ffffff;
font-size: 14px;
}

table.tuition td {
text-align: center;
}

table.tuition2017 {
align: center;
text-align: center;
width: 100%;
height: auto;
background-color: #ffffff;
font-size: 14px;
line-height: 150%;
}

table.tuition2017 td {
text-align: center;
word-break: break-all;
word-wrap: break-all;
}

#details table.tuition2021 {
align: center;
text-align: center;
width: 82%;
height: auto;
background-color: #ffffff;
font-size: 14px;
line-height: 150%;
}

table.tuition2021 td {
text-align: center;
word-break: break-all;
word-wrap: break-all;
}

table.about {
height: 300px;
text-align: left;
padding: 20px;
line-height: 150%;
font-size: 14px;
}

table.culture {
text-align: center;
background-color: #ffffff;
}

table.culture th {
background-color: #cccccc;
text-align: center;
}

div.greeting img {
float: left;
margin: 5px 30px 30px 30px;
}

div.cnuniv img {
float: left;
margin: 5px 30px 30px 30px;
}

table.organization td {
padding: 8px;
}

table.reading th {
background-color: #cccccc;
text-align: center;
}

table.reading th,td {
padding: 8px;
}

table.inquiry {
font-size: 14px;
background-color: #ffffff;
padding: 8px;
}

table.column th {
font:16px bold;
text-align: left; 
padding-left: 1em;
}

table.column td {
text-align: left; 
padding-left: 1em;
width: 95%;
line-height: 150%;
font-size: 14px;
}

table.hsk {
width: 62%; 
height: 250px;
padding: 10px;
background-color: #ffffff; 
}

table.hsk td {
text-align: center;
}

div.report img {
padding: 5px;
}

table.no_extra td {
background-color: #ffffff;
}

table.chinese th,td {
text-align: left;
}

table.sitemap td {
line-height: 150%;
}

table.shortterm td {
text-align: center;
}

table.shortterm2 td {
max-width:800px;
width:100%;
line-height: 150%;
}

table.hsk2 td {
max-width:800px;
width:100%;
line-height: 150%;
}

div#column img {
width: 100%;
align: center;
}

div.promotion p img {
margin:0 auto;
display:block;
}

#container{
max-width:800px;
width:100%;
margin-left:auto;
margin-right:auto;
hyphens: auto;
}

#container table {
max-width:800px;
width:100%;
table-layout:fixed;
}

#container table tr,td{
overflow-wrap: anywhere;
word-break: normal;
}

/* SNSTOPbottun　20200318
   ========================================================================== */

.l-footer .l-footerInfo .l-footerInfo__content .l-footer__link .l-footer__link__info .l-footer__link--item_sns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:210px;height:64px;line-height:1;vertical-align:baseline;margin-right:10px;margin-right:1rem;border:border:solid 1px #282828;padding:1em}
.l-footer .l-footerInfo .l-footerInfo__content .l-footer__link .l-footer__link__info .l-footer__link--item_sns .tw{display:inline-block;vertical-align:bottom;font-family:iconfont;font-size:32px;font-size:3.2rem;margin-right:5px;margin-right:.5rem}
.l-footer .l-footerInfo .l-footerInfo__content .l-footer__link .l-footer__link__info .l-footer__link--item_sns .fb{display:inline-block;vertical-align:bottom;font-family:iconfont;font-size:32px;font-size:3.2rem;margin-right:5px;margin-right:.5rem}


/* YouTube　20200312
   ========================================================================== */

.l-main__youtube{width:100%;padding:50px 72px}
.l-main__youtube .l-main__youtube__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 30px}
.l-main__youtube .l-main__youtube__title__item{padding:0 .5em;border-bottom:solid 2px #000}

.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
margin: auto;
width: 100%;
max-width: 640px;
height: 100%;
max-height: 360px;
}


/* レスポンシブ電話番号　20200313
   ========================================================================== */

@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


/* 申込ボタン　20200220
   ========================================================================== */

.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 6px 20px;
  float: right;
  text-decoration: none;
  color: #ffffff;
  background: #900;
  border: solid 1px #900;
  transition: .2s;
}

.btn-flat-simple p {
　position: absolute;
　text-align: center;
}

.btn-flat-simple:hover {
  background: #f7f5f5;
  color: #900;
}

.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: white;
  background: #900;
  border: solid 2px #900;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #f7f5f5;
  color: #900;
}

#details .btn-flat-double-border {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #900;
  border: double 6px #900;
  border-radius: 3px;
  transition: .4s;
}
#details .btn-flat-double-border:hover {
  background: #fffbef;
}


/* Googleカレンダー　中国語サロン　20190312
   ========================================================================== */

.cal_wrapper {
max-width: 960px;
min-width: 300px;
margin: 2.0833% auto;
}

.googlecal {
position: relative;
padding-bottom: 100%;
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

/* 見出し用20181018,20230727
   ========================================================================== */

#details .midashi h2 {
color: #900;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #900;/*上線*/
border-bottom: solid 3px #900;/*下線*/
}

#details .midashi h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

#details .midashi h4 {
padding: 0.4em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: #ffffff;/*背景色*/
border-left: solid 6px #900;/*左線*/
}

#details .midashi h5 {
  color: #494949;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 1px #494949;/*上線*/
  border-bottom: solid 1px #494949;/*下線*/
}

/* 見出し内リスト20181023
   ========================================================================== */

#details .midashi ul {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  font-size: 14px;
}

#details .midashi ul li {
  line-height: 1.3;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#details .midashi ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #900;/*アイコン色*/
}

#details .midashi1 ul {
  padding: 0.5em 1em 0.5em 2.3em;
  font-size: 14px;
}

#details .midashi1 ul li {
  display: inline-block;
  line-height: 1.3;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#details .midashi1 ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  color: #900;/*アイコン色*/
}

#details .midashi1 ul li a {
  cursor:pointer;
  text-decoration:none;
  outline:none;
  color:#212121
}

#details .midashi1 ul li a:hover {
color:#900
}

#details .midashi2 ul {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  font-size: 14px;
}

#details .midashi2 ul li {
  line-height: 1.3;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#details .midashi2 ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #668ad8;/*アイコン色（紺）*/
}


#details .midashi3 ul {
  padding: 0.5em 1em 0.5em 2.3em;
  font-size: 14px;
}

#details .midashi3 ul li {
  display: inline-block;
  line-height: 1.3;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#details .midashi3 ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  color: #668ad8;/*アイコン色*/
}

#details .midashi3 ul li a {
  cursor:pointer;
  text-decoration:none;
  outline:none;
  color:#212121
}

#details .midashi3 ul li a:hover {
color:#668ad8
}


/* アコーディオン
   ========================================================================== */

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
}

.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #990000;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: 700;
    background :#939393;
    cursor :pointer;
    transition: all 0.3s;
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#515151;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}


/* ドロップダウンメニュー
   ========================================================================== */
div.englishpage {
  font: 16px Arial;
}

#dropmenu{
  list-style-type: none;
  max-width: 800px;
  width: 100%;
  height: 40px;
  margin: 30px auto 0px;
  padding: 0;
  background: #a10000;
  border-bottom: 5px solid #5d0000;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  position: relative;
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  border-left: 1px solid #e50000;
  border-right: 1px solid #5d0000;
}
#dropmenu li:hover > a{
  background: #7f0000;
  color: #ffa1a1;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}
#dropmenu li ul li{
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #7f0000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #900000;
  border-bottom: 1px solid #6e0000;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

/* ページトップへ戻る
   ========================================================================== */
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 0;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #a10000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/* 中国語講座ページの表の余白調整
   ========================================================================== */
table.tuition2023 {
text-align: center
width: 100%;
height: auto;
background-color: #ffffff;
font-size: 14px;
line-height: 150%;
}

#details table.tuition2023 tbody td{
padding: 10px 5px 10px 5px;
}

/* 学院長コラムVol.87文字余白調整
   ========================================================================== */
img.column87 {
padding-bottom: 5px;
}

/* 20250705講師指定フォント使用
   ========================================================================== */
.cfont {
font-family: 'SimHei', sans-serif;
}