@charset "utf-8";
@import url("./reset.css");

#ct_know #Container   { line-height: 1.5; }
#ct_know #Container p {  font-family: 'Roboto', 'Noto Sans JP', sans-serif !important; font-weight: 400; }
#ct_know #Container * { box-sizing: border-box; }
.clearfix:before,
.clearfix:after  { content: ''; display: table; }
.clearfix:after  { clear: both; }

/* 紀文グローバルヘッダ
===================================================================================== */
#header { position: relative; height: 140px; z-index: 1001; }
@media only screen and (max-width: 768px){
#header { position: relative; height: 40px; }
}

/* 紀文アカデミー Header
===================================================================================== */
#academy_header               { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; }
#academy_header header        { background: rgba(250,250,250,.9); }
#academy_header header .inner { max-width: 980px; height: 60px; margin: 0 auto; position: relative; }
#academy_header h1            { width: 236px; margin: 0; padding: 0 22px; position: absolute; top: 50%; transform: translateY(-50%); }
#academy_header h1 a          { width: 100%; display: block; }
#academy_header h1 img        { width: 100%; }
/* fixed menu style */
.is-fixed       { position: fixed; top: 0; left: 0; z-index: 1002; width: 100%; }
#topcontrol     { width: 40px; height: 40px; z-index: 13; }
#topcontrol img { width: 40px; height: 40px; }

.nav-fixed {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100vw;
}
.main-fixed {
    padding-top: 60px;
}

/* main タイトル・部品 / レイアウト 汎用
===================================================================================== */
main          { padding: 0 0 0 0; background: #fff; min-height: 300px; overflow-y: visible; }
main h2,
main h3,
main h4       { margin: 0; }
ruby rt       { font-size: 60%; }   /* 文中ルビ　サイズ */
sub,sup       { font-size: 75%; }     /* 文中上つき下つき */
.mid          { text-align: center; }
.l_yose       { text-align: left !important; margin-bottom: 1em !important; }
.r_yose       { text-align: right !important; }
.flowtext     { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lead         { font-size: 1.15em; } /* コンテンツ先頭リード文PC-18px相当 */
.caption      { font-size: .856em; }  /* 写真キャプションPC-12px相当 */
.small        { font-size: .856em; }
.pc_br:before { content: '\A'; white-space: pre; line-height: 1.4; }
.sp_br:before { content: ''; white-space: normal; }
img           { border: none; border-radius: 0; } 
img.bdr       { border: .5px solid #ddd; border-radius: 1rem; }
.pc_only      { display: block; }
.sp_only      { display: none; }
.inner        { margin: 0 auto; width: 980px; }

strong      { font-weight: 800; }

@media only screen and (max-width: 768px){
.inner        { padding: 0 1em; width: 100%; }
.flowtext     { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lead         { font-size: 1em; }
.sp_br        { font-size: 0px; width:0px; }
.sp_br:before { content: '\A'; white-space: pre; }
.pc_only      { display: none; }
.sp_only      { display: block; }



}
/* ペディアリンク用／ページ内リンク */
a.comm       { padding-right: 13px; text-decoration: none !important; color: #024dff; background: url(../img/wikiarrow.png) no-repeat; background-position: 99% 10%; }
a.comm:hover { background-position: 99% 0%; }
/* 赤ボタンリンク用 */
div.recipe_link   { margin: 1em auto 2em auto; text-align: center; }
div.recipe_link a { display: inline-block; min-width: 8em; padding: .5em; font-weight: bold; font-size: 1.125em; text-decoration: none; color: #fff; background: #fe0000; border-radius: .25em; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #fe0000; }
div.recipe_link a:after { content: ' ＞'; color: #fff; }
.button_links                 { display: flex; justify-content: center; }
.button_links div.recipe_link { display: inline; margin: 0 1em; }



@media only screen and (max-width: 768px){
.button_links                 { display: flex; flex-flow: column; justify-content: center; }
.button_links div.recipe_link { display: block; margin: 1em auto; }
}
/* テキストリンク用 */
p.recipe_link a       { display: block; padding: 0; color: #fe0000; text-align: right; text-decoration: none; }
p.recipe_link a:after { content: ' ≫'; }
/*コンテンツ・タイトル*/
#Container h1, #Container h2, #Container h3,
#Container h4, #Container h5, #Container h6  { line-height: 1.2; font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif; font-family: 'Roboto', 'Noto Sans JP', sans-serif !important; }
#Container h2 { font-weight: bold; color: #000; }
#Container h3 { font-weight: normal; /*color: initial;*/ }/*単ページ大見出し*/
#Container .content_section h4 { padding: 0; display: flex; align-items: center; font-weight: 400!important; background: none; }
#Container .content_section h4:before,
#Container .content_section h4:after  { border-top: 2px solid #333; content: ""; flex-grow: 1; }
#Container .content_section h4:before { margin-right: .25rem; }
#Container .content_section h4:after  { margin-left: .25rem; }/*単ページ横線中見出し*/

/* youtube */
.content_section .youtube        { position: relative; width: 100%; padding-top: 56.25%; }
.content_section .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

/* タイトル帯(デフォルト色)
 ===================================================================================== */
#content_header           { position: relative; margin-top: -1px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#content_header .inner    { width: 980px; height: 80px; margin: 0 auto; position: relative; display: flex; align-items: center; }
#content_header h1        { margin: 0; font-size: 36px; position: relative; display: inline-block; }
#content_header h1:before { content:''; width: 40px; height: 40px; border: 2px solid #333; border-radius: 50%; font-family: FontAwesome; font-size: 26px; line-height: 40px; text-align: center; background: #fff; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-weight: 900; -webkit-font-smoothing: antialiased; }
#content_header h1:after  { content: ''; font-size: initial; font-weight: normal; color: #333; position: absolute; white-space: nowrap; left: calc(100% + 64px); top: 50%; transform: translateY(-50%); }
#content_header h1.all:before,
#content_header h1.all:after { display: none; }

@media only screen and (max-width: 768px){
#content_header .inner { width: 100%; height: 60px; margin: 0 auto; padding: 0 1em; position: relative; display: flex; align-items: center; }
#content_header h1     { margin: 0; font-size: 1.5em; position: relative; display: inline-block; }
}

#content_header h1.kiso:before     { content: '\f4d8'; }
#content_header h1.seikatsu:before { content: '\f2e7'; }
#content_header h1.rekishi:before  { content: '\f66f'; }
#content_header h1.bunka:before    { content: '\f6a1'; }
#content_header h1.tiri:before     { content: '\f0ac'; }
#content_header h1.senmon:before   { content: '\f02d'; }
#content_header h1.dento:before    { content: '\f02b'; }
#content_header h1.nenpyo:before   { content: '\f073'; }
#content_header h1.yogo:before     { content: '\f00b'; }

#content_header h1.kiso:after     { content: '基礎'; }
#content_header h1.seikatsu:after { content: '生活'; }
#content_header h1.rekishi:after  { content: '歴史'; }
#content_header h1.bunka:after    { content: '文化'; }
#content_header h1.tiri:after     { content: '地理'; }
#content_header h1.senmon:after   { content: 'データ'; }
#content_header h1.dento:after    { content: '伝統'; }
#content_header h1.nenpyo:after   { content: '年表'; }
#content_header h1.yogo:after     { content: '用語集'; }

/* 扉カテゴリー・各セクション
===================================================================================== */
.category_section           { padding: 2em 0; }
.category_section .inner    { margin: 0 auto; width: 980px; }
/* タイトル帯+アイコン */
.category_section h3        { position: relative; margin: 40px 0; padding: 11px calc(2em + 40px); font-weight: 400!important; font-size: 18px; color: #000; background: rgba(0,0,0,.2); border-radius: .25em; }
.category_section h3:before { content: ''; font-family: FontAwesome; font-size: 28px; padding: .25em; text-align: center; width: 50px; height: 50px; display: inline-block; position: absolute; left: .5em; top: -4px; border-radius: calc(2px + 1em); box-sizing: border-box; color: #333; background: #fff; border: solid 2px #333; font-weight: 500; -webkit-font-smoothing: antialiased; }
.category_section h3.kiso:before     { content: '\f4d8'; }
.category_section h3.seikatsu:before { content: '\f2e7'; }
.category_section h3.rekishi:before  { content: '\f66f'; }
.category_section h3.bunka:before    { content: '\f6a1'; }
.category_section h3.tiri:before     { content: '\f0ac'; }
.category_section h3.senmon:before   { content: '\f02d'; }
.category_section h3.dento:before    { content: '\f02b'; }
.category_section h3.nenpyo:before   { content: '\f073'; }
.category_section h3.yogo:before     { content: '\f00b'; }

.category_section ul    { display: flex; flex-wrap:wrap; }
.category_section ul li { margin: 0 0 40px 40px ; padding: 1em calc(1em + 138px) 1em 1em; width: 430px; height: 140px; border: 1px solid #ccc; border-radius: .5em; overflow: hidden; position: relative; }
.category_section ul li h4.title            { font-size: 17px; margin-bottom: 10px; }
.category_section ul li h4.title span.small { font-weight: 500; font-size: 14px; line-height: 1.5; }
.category_section ul li .visual             { position: absolute; top: 0; right: 0; width: 138px; }
.category_section ul li .visual img         { width: 100%; }

@media only screen and (max-width: 768px){
.category_section        { padding: 0; }
.category_section .inner { margin: 0 auto; width: 100%; }
.category_section h3     { margin: 1rem 0; }
.category_section ul li                     { margin: .5rem 0; padding: 1em calc(1em + 107px) 1em 1em; width: 100%; height: 110px; }
.category_section ul li h4.title            { font-size: 1em; margin-bottom: .5em; }
.category_section ul li h4.title span.small { font-weight: 500; font-size: .85em; }
.category_section ul li .visual             { position: absolute; top: 0; right: 0; width: 108px; }
.category_section ul li .visual img         { width: 100%; }
}

/* コンテンツ・タイトル
===================================================================================== */
#content_title           { margin-bottom: 4em; padding: 40px 0; border-bottom: 1px solid #ccc; }
#content_title .inner    { margin: 0 auto; padding: 28px 360px 40px 40px; width: 900px; height: 322px; border: 1px solid #ccc; border-radius: 1em; position: relative; }
#content_title h2        { font-size: 30px; padding-bottom: .5em; white-space: nowrap; }
#content_title h2 .small { font-size: .7em; font-weight:400; }
#content_title .caption  { position: absolute; right: 1em; bottom: 1em; padding: 0 .25em; background: #fff; border-radius: 3px; }

#content_title ul             { margin: 0; padding: 6px 0; border-top: 1px solid #ccc; }
#content_title ul li          { position: relative; display: inline-block; }
#content_title ul li span     { display: inline-block; }
#content_title ul li .prof    { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); cursor: pointer; }
#content_title .author        { padding-left: 3em; }
#content_title .author:before { content: '講師：'; position: absolute; left: 0; }
#content_title .author:not(:first-child):before { content: ''; }
#content_title .author:last-child { margin-top:.35em; }
.profile                { display: none; padding: 1em; position: absolute; width: 498px; background: #fff; border: 1px solid #ccc; font-size: 12px; text-align:justify; letter-spacing: -0.01em; }
.profile img            { width: 90px!important; float:left; margin-right:1em; }
.profile img.fl_right   { width: 90px!important; float:right; margin-left:1em; }
#content_title .lead    { padding-top: 10px; text-align: justify; border-top: 1px solid #ccc; }
#content_title .comment { margin-top: .5em; text-indent: -1em; padding-left: 1em; }

@media only screen and (max-width: 768px){
#content_title           { margin-bottom: 2em; padding: 1em; border-bottom: 1px solid #ccc; }
#content_title .inner    { margin: 0 auto; padding: 1em; width: 100%; height: auto; position: relative; }
#content_title h2        { font-size: initial; padding-bottom: .5em; white-space: nowrap; }
#content_title h2 .small { font-size: .7em; font-weight:400; }
#content_title .caption  { position: static; background: transparent; padding: 0; text-align: right; }

/*#content_title ul { margin: 0; padding: 10px 0; border-top: 1px solid #ccc; }*/
#content_title ul li           { position: relative; display: block; }
#content_title ul li span      { display: inline-block; }
#content_title ul li .prof     { position: absolute; width: 100%; top: 50%; left: calc(100% - 46px); transform: translateY(-50%); cursor: pointer; }
#content_title ul li .prof img { width: 45px; }
#content_title .author         { padding-left: 3em; padding-right: 42px; }
#content_title .author:before  { content: '講師：'; position: absolute; left: 0; }
#content_title .author:not(:first-child):before { content: ''; }
#content_title .author:last-child { margin-top:.25em; }

.profile                { width: calc(100% - 28px); font-size: 80%; }
.profile img            { width: 90px!important; float:left; margin-right:1em; }
#content_title .lead    { padding-top: 10px; text-align: justify; border-top: 1px solid #ccc; }
#content_title .comment { margin-top: .5em; text-indent: -1em; padding-left: 1em; }
#content_title .lead    { padding-top: calc(100% + 1.5em); padding-bottom: .5em; text-align: justify; border-top: 1px solid #ccc; }
#content_title .comment { margin-top: .5em; text-indent: -1em; padding-left: 1em; }
}
/* コンテンツ・各セクション レイアウト
===================================================================================== */
.content_section          { padding-bottom: 1em; }
.content_section h3       { margin: 2rem auto; font-size: 3rem; text-align: center; }
.content_section h4       { margin: 1.5rem auto; padding: .5em 1em; font-size: 36px; text-align: center; }
.content_section h5       { margin-bottom: .5em; font-weight: 900!important; font-size: 18px; }
.content_section h6       { margin-bottom: .5em; font-weight: 900!important; font-size: 15px; }
.content_section h3 img,
.content_section h4 img,
.content_section h5 img   { width: 100%; box-sizing: border-box; }
.content_section p        { margin: 0 0 1em 0; font-size: 16px; }
.content_section .sm      { font-size: 14px; }
.content_section .caption { margin: .25em 0 .5em 0; font-size: 12px; }/*キャプション*/
.content_section .mt      { margin-top: 1em!important; }/*上マージンをつけたいとき*/
.content_section .mb      { margin-bottom: 0!important; }/*下マージンを消したいとき*/

@media only screen and (max-width: 768px){
.content_section h3        { margin: 1em auto; font-size: 1.7em!important; text-align: center; }
.content_section h4        { margin: 1em auto; padding: .5em 1em; font-size: 1.45em!important; text-align: center; }
.content_section h5        { margin-bottom: .5em; font-weight: 900!important; font-size: 1.1em!important; }
.content_section h6        { margin-bottom: .5em; font-weight: 900!important; font-size: 1em; }
.content_section p         { font-size: 1em!important; }
.content_section p.caption { font-size: .856em!important; }
}
.content_section .fill      { clear: both; width: 100%; text-align: justify; }/*基本レイアウト*/
.content_section .half      { float: none; width: 610px; margin: auto; }
.content_section .l_half    { float: left; width: 470px; }
.content_section .r_half    { float: right; width: 470px; }
.content_section .l_single  { float: left; width: 300px; }
.content_section .l_double  { float: left; width: 640px; }
.content_section .r_single  { float: right; width: 300px; }
.content_section .r_double  { float: right; width: 640px; }
.content_section .c_single  { float: left; width: 300px; margin-left: 40px; }
.content_section .inner img { width: 100%; height: auto; }

.content_section .fix_center800 { margin: 0 auto; width: 800px; }
.content_section .fix_center640 { margin: 0 auto; width: 640px; }

@media only screen and (max-width: 768px){
.content_section .fill      { clear: both; width: 100%; }
.content_section .l_half    { float: none; width: 100%; }
.content_section .r_half    { float: none; width: 100%; }
.content_section .l_single  { float: none; width: 100%; }
.content_section .l_double  { float: none; width: 100%; }
.content_section .r_single  { float: none; width: 100%; }
.content_section .r_double  { float: none; width: 100%; }
.content_section .c_single  { float: none; width: 100%; margin-left: 0; }
.content_section .fix_center800 { width: 100%; }
.content_section .fix_center640 { width: 100%; }
}

/* ～作り方 */
/* 囲み
===================================================================================== */
.content_section.recipe        { margin: 0 0; border-top: 1px solid #333; }
.content_section.recipe .inner { padding: 2em 0; }
/* outro 囲み */
.content_section .kakomi    { margin: 0em auto 2em auto; padding: 1rem 1rem 0 1rem; background: #fff; border: solid 2px #ccc; border-radius: 1rem; }
.content_section .kakomi h5 { margin: 0 -1rem 1rem -1rem; padding: 0 .5em 1rem 1rem; font-size: 24px; border-bottom: solid 2px #ccc; }
/* ～カ条リスト */
@font-face { font-family: 'ReishoE1'; src: url("./ReishoE1.eot") format('eot'), url("./ReishoE1.woff") format('woff'); }
.kajyo                      { margin: 0em auto 2em auto; }
.kajyo .title_border:before,
.kajyo .title_border:after  { border-top: 2px solid #ccc; }
.kajyo .pointlist           { padding: 20px 38px 10px 38px; background: #fff; border: 2px solid #ccc; border-radius: .5rem; }
.kajyo .pointlist li        { font: normal bold 24px/1.5 'ReishoE1', serif; color: #000; margin: 1em 0 1em 2.5em; list-style-type: cjk-ideographic; letter-spacing: -0.07em; }
@media only screen and (max-width: 768px){
.kajyo .pointlist           { padding: 1em 1em .5em 1em; }
.kajyo .pointlist li        { font-size: 1.1em; letter-spacing: -0.05em; }
}
/* 文学など ""囲み */
blockquote        { margin: 1em; padding: 0 4em; font-weight: bold; font-size: 18px; position: relative; font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;  }
blockquote:before { content:"“"; font-size: 600%; line-height: 1em; font-family:'ＭＳ Ｐゴシック',sans-serif; color: #999; position: absolute; left: 0; top: 0; }
blockquote:after  { content:"”"; font-size: 600%; line-height: 0em; font-family:'ＭＳ Ｐゴシック',sans-serif; color: #999; position: absolute; right: 0; bottom: 0; }
blockquote span   { display: block; text-align: center; font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;  }
@media only screen and (max-width: 768px){
blockquote        { margin: 1em 0; padding: 0 3em; font-weight: bold; font-size: 1.05em; position: relative; }
blockquote:before { content:"“"; font-size: 500%; line-height: 1em; font-family:'ＭＳ Ｐゴシック',sans-serif; color: #999; position: absolute; left: 0; top: 0; }
blockquote:after  { content:"”"; font-size: 500%; line-height: 0em; font-family:'ＭＳ Ｐゴシック',sans-serif; color: #999; position: absolute; right: 0; bottom: 0; }
}
/* ヘッダ内 教室タイトルボタン PC */
#academy_header .known_navi               { padding-left: 236px; position: relative; }
#academy_header .sp_button                { display: none; }
#academy_header .known_navi ul > li       { width: 124px; height: 60px; position: relative; float: left; text-align: center; }
#academy_header .known_navi ul > li p     { width: 100%; position: absolute; top: 19px; font-weight: 500; font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif; font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;}
#academy_header .known_navi ul > li p i   { display: none; }
#academy_header .known_navi ul > li:hover { cursor: pointer; }
.known_navi ul > li#oden:hover,
.known_navi ul > li#oden.active { border-bottom: solid 6px #6fba2c; }
.known_navi ul > li#neri:hover,
.known_navi ul > li#neri.active { border-bottom: solid 6px #ffa500; }
.known_navi ul > li#nabe:hover,
.known_navi ul > li#nabe.active { border-bottom: solid 6px #ffcf04; }
.known_navi ul > li#dent:hover,
.known_navi ul > li#dent.active { border-bottom: solid 6px #7fc1fe; }
.known_navi ul > li#syog:hover,
.known_navi ul > li#syog.active { border-bottom: solid 6px #ff6393; }
.known_navi ul > li#pedi:hover,
.known_navi ul > li#pedi.active { border-bottom: solid 6px #9470dc; }

body#ct_know.oden .known_navi ul > li#oden  { border-bottom: solid 6px #6fba2c; }
body#ct_know.neri .known_navi ul > li#neri  { border-bottom: solid 6px #ffa500; }
body#ct_know.nabe .known_navi ul > li#nabe  { border-bottom: solid 6px #ffcf04; }
body#ct_know.dent .known_navi ul > li#dent  { border-bottom: solid 6px #7fc1fe; }
body#ct_know.syog .known_navi ul > li#syog  { border-bottom: solid 6px #ff6393; }
body#ct_know.pedi .known_navi ul > li#pedi  { border-bottom: solid 6px #9470dc; }

body#ct_know .known_navi ul > li#oden:hover { background: rgba(111,186,44,.1); }
body#ct_know .known_navi ul > li#neri:hover { background: rgba(255,165,0,.1); }
body#ct_know .known_navi ul > li#nabe:hover { background: rgba(255,207,4,.2); }
body#ct_know .known_navi ul > li#dent:hover { background: rgba(127,193,254,.1); }
body#ct_know .known_navi ul > li#syog:hover { background: rgba(255,99,147,.1); }
body#ct_know .known_navi ul > li#pedi:hover { background: rgba(148,112,220,.1); }

#Container.oden_container .known_navi ul > li#oden { border-bottom: solid 6px #6fba2c; }
#Container.neri_container .known_navi ul > li#neri { border-bottom: solid 6px #ffa500; }
#Container.nabe_container .known_navi ul > li#nabe { border-bottom: solid 6px #ffcf04; }
#Container.dento_container .known_navi ul > li#dent  { border-bottom: solid 6px #7fc1fe; }
#Container.syoku_container .known_navi ul > li#pedi  { border-bottom: solid 6px #9470dc; }

@media only screen and (max-width: 768px){
#academy_header .known_navi  { display: none; }
#academy_header .sp_button   { display: block; position: absolute; top: 10px; right: 1em; width: 40px; height: 40px; text-align: center; background: #fff; border: 2px solid #999; border-radius: 10%; cursor: pointer; }
#academy_header .sp_button i { transform: translateY(15%); font-size: 28px; color: #999; }
}

/* ヘッダ下 プルダウン教室リスト PC */
#academy_header nav        { width: 100vw; background: rgba(255,255,255,.9); position: absolute; left: 0; z-index: 2; }
#academy_header nav .inner { width: 980px; height: ; margin: 0 auto; }
#academy_header nav.oden   { border-top: solid 1px #6fba2c; border-bottom: solid 1px #6fba2c; display: none; }
#academy_header nav.neri   { border-top: solid 1px #ffa500; border-bottom: solid 1px #ffa500; display: none; }
#academy_header nav.nabe   { border-top: solid 1px #ffcf04; border-bottom: solid 1px #ffcf04; display: none; }
#academy_header nav.dent   { border-top: solid 1px #7fc1fe; border-bottom: solid 1px #7fc1fe; display: none; }
#academy_header nav.syog   { border-top: solid 1px #ff6393; border-bottom: solid 1px #ff6393; display: none; }
#academy_header nav.pedi   { border-top: solid 1px #9470dc; border-bottom: solid 1px #9470dc; display: none; }

nav .shiru_acc           { display: flex; flex-wrap: nowrap; justify-content: center; padding: 2em 0; }
nav .shiru_acc > div     { padding-right: 1em; }
nav .shiru_acc h4        { padding: .5em .5em .5em calc(40px + .75em); font-weight: normal; font-size: 14px; min-width: 9em; border-radius: .25em; position: relative; }
nav .shiru_acc h5.neri_subtitle { margin-top: .5em; margin-bottom: .5em; font-size: 14px; color: #ffa500!important; }
/*nav .shiru_acc h5 a      { padding: 0 0 0 .5em; font-weight: bold; font-size: 15px; text-decoration: none; }*/
nav .shiru_acc > div:last-child { padding-right: 0; }
nav.oden .shiru_acc h4   { background: rgba(111,186,44,.2); min-width: 8em; }
nav.neri .shiru_acc h4   { background: rgba(255,165,0,.2); min-width: 8em; }
nav.nabe .shiru_acc h4   { background: rgba(255,207,4,.2); min-width: 10em; }
nav.dent .shiru_acc h4   { background: rgba(127,193,254,.2); min-width: 8em; }
nav.dent .shiru_acc h4   { background: rgba(127,193,254,.2); min-width: 12.8em; }
nav.syog .shiru_acc h4   { background: rgba(255,99,147,.2); min-width: 16em; }
nav.pedi .shiru_acc h4   { background: rgba(148,112,220,.2); min-width: 33em; }



nav .shiru_acc h4:before           { content: ''; font-family: FontAwesome; font-size: 24px; line-height: 1; padding: .25em; text-align:center; width: 40px; height: 40px; display: inline-block; position: absolute; left: .25em; top: -6px; border-radius: calc(2px + 1em); box-sizing: border-box; -webkit-font-smoothing: antialiased; }
nav .shiru_acc .kiso h4:before     { content: '\f4d8'; }
nav .shiru_acc .seikatsu h4:before { content: '\f2e7'; }
nav .shiru_acc .rekishi h4:before  { content: '\f66f'; }
nav .shiru_acc .bunka h4:before    { content: '\f6a1'; }
nav .shiru_acc .tiri h4:before     { content: '\f0ac'; }
nav .shiru_acc .senmon h4:before   { content: '\f02d'; }
nav .shiru_acc .dento h4:before    { content: '\f02b'; }
nav .shiru_acc .nenpyo h4:before   { content: '\f073'; }
nav .shiru_acc .yogo h4:before     { content: '\f00b'; }

nav.oden .shiru_acc h4:before      { color: #6fba2c; background: #fff; border: solid 2px #6fba2c; }
nav.neri .shiru_acc h4:before      { color: #ffa500; background: #fff; border: solid 2px #ffa500; }
nav.nabe .shiru_acc h4:before      { color: #ffcf04; background: #fff; border: solid 2px #ffcf04; }
nav.dent .shiru_acc h4:before      { color: #7fc1fe; background: #fff; border: solid 2px #7fc1fe; }
nav.syog .shiru_acc h4:before      { color: #ff6393; background: #fff; border: solid 2px #ff6393; }
nav.pedi .shiru_acc h4:before      { color: #9470dc; background: #fff; border: solid 2px #9470dc; }

nav .shiru_acc .iware h4:before    { content: ''; background: #fff url(../img/iware_icon.png) center no-repeat; background-size: 66.66%; padding: 0; width: 40px; height: 40px; display: block; position: absolute; left: .25em; top: -6px; border-radius: calc(2px + 1em); box-sizing: border-box; }
nav .shiru_acc .osechi h4:before   { content: ''; background: #fff url(../img/osechi_icon.png) center no-repeat; background-size: 66.66%; padding: 0; width: 40px; height: 40px; display: block; position: absolute; left: .25em; top: -6px; border-radius: calc(2px + 1em); box-sizing: border-box; }
nav .shiru_acc .kids h4:before     { content: ''; background: #fff url(../img/kids_icon.png) center no-repeat; background-size: 66.66%; padding: 0; width: 40px; height: 40px; display: block; position: absolute; left: .25em; top: -6px; border-radius: calc(2px + 1em); box-sizing: border-box; }
nav .shiru_acc .data h4:before     { content: ''; background: #fff url(../img/data_icon.png) center no-repeat; background-size: 66.66%; padding: 0; width: 40px; height: 40px; display: block; position: absolute; left: .25em; top: -6px; border-radius: calc(2px + 1em); box-sizing: border-box; }

nav .shiru_acc ul                           { padding-left: .5em; }
nav .shiru_acc ul#neri_spl.neri_lecture li  { width: 50%; float: left; }
nav .shiru_acc ul#neri_asia.neri_lecture li { width: 50%; float: left; }
nav .shiru_acc ul#neri_euro                 { margin-top: .5em; }
nav .shiru_acc ul#chro_spl.pedia_lst li     { width: 50%; float: left; }
nav .shiru_acc ul#glos_spl.pedia_lst li     { width: 50%; float: left; }
nav .shiru_acc a                            { font-size: 11px; line-height: 2; white-space: pre; display: inline-block; }
nav .shiru_acc a:link,
nav .shiru_acc a:visited                    { color: #000!important; }


.sp_menu { display: none; opacity: 0; position: absolute; box-sizing: border-box; }

@media only screen and (max-width: 768px){
#pc_navi { display: none; }
.sp_menu { padding-bottom: 1em; width: 100%; height: 100%; overflow-y: auto; border-top: 1px solid #ccc; position: absolute; z-index: 12; opacity: 1; top: 60px; }

.sp_menu .acc_head { height: 60px; background: #efefef; border-bottom: 1px solid #ccc; display: flex; align-items: center; position: relative; }
.acc_section.oden.acc_active .acc_head { background: #6fba2c; transition: 300ms; }
.acc_section.neri.acc_active .acc_head { background: #ffa500; transition: 300ms; }
.acc_section.nabe.acc_active .acc_head { background: #ffd700; transition: 300ms; }
.acc_section.dent.acc_active .acc_head { background: #7fc1fe; transition: 300ms; }
.acc_section.syog.acc_active .acc_head { background: #ff6393; transition: 300ms; }
.acc_section.pedi.acc_active .acc_head { background: #9470dc; transition: 300ms; }
.acc_section.acc_active .acc_head h5   { color: #fff!important; transition: 300ms; }

.acc_head .push_pull       { position: absolute; right: 1em; display: block; width: 40px;height: 40px; text-align: center; }
.acc_head .push_pull:after { content: '\f067'; font-style: normal; font-weight: 900; font-family: FontAwesome; font-size: 20px; color: #999; position: relative; top: 3px; -webkit-font-smoothing: antialiased; }
.acc_active .acc_head .push_pull:after { content:'\f068'; color:#fff; }

.acc_head h5  { margin: 0; padding: 0 .25em 0 .5em; font-weight:900; font-size: 26px; color: #333; }
.acc_head p   { margin: 0 .5em; position:relative; z-index: 1; }
.acc_head p a { color:#fff!important; color: #fff; background: #333; padding: .25em 1em; font-size: 12px; display: block; border-radius:.25em; border: 1px solid #fff; }

.acc_section.oden .acc_head p a { background: #6fba2c; }
.acc_section.neri .acc_head p a { background: #ffa500; }
.acc_section.nabe .acc_head p a { background: #ffd700; }
.acc_section.dent .acc_head p a { background: #7fc1fe; }
.acc_section.syog .acc_head p a { background: #ff6393; }
.acc_section.pedi .acc_head p a { background: #9470dc; }

.acc_content                          { padding: 1em 1em .25em 1em; background: #fff; }
.acc_content div h4                   { position: relative; margin-bottom: 1em; padding: 11px calc(2em + 40px); font-weight: 400!important; font-size: 18px; color: #000; background: rgba(0,0,0,.2); border-radius: .25em; }
.acc_section.oden .acc_content div h4 { background: rgba(111,186,44,.2); }
.acc_section.neri .acc_content div h4 { background: rgba(255,165,0,.2); }
.acc_section.nabe .acc_content div h4 { background: rgba(255,207,4,.2); }
.acc_section.dent .acc_content div h4 { background: rgba(127,193,254,.2); }
.acc_section.syog .acc_content div h4 { background: rgba(255,99,147,.2); }
.acc_section.pedi .acc_content div h4 { background: rgba(148,112,220,.2); }
.acc_content div h4:before            { content: ''; font-weight: 900; font-family: FontAwesome; font-size: 28px; padding: .25em; text-align: center; width: 50px; height: 50px; display: inline-block; position: absolute; left: .5em; top: -4px; border-radius: calc(2px + 1em); box-sizing: border-box; color: #333; background: #fff; border: solid 2px #333; -webkit-font-smoothing: antialiased; }

.acc_content div.kiso h4:before     { content: '\f4d8'; }
.acc_content div.seikatsu h4:before { content: '\f2e7'; }
.acc_content div.rekishi h4:before  { content: '\f66f'; }
.acc_content div.bunka h4:before    { content: '\f6a1'; }
.acc_content div.tiri h4:before     { content: '\f0ac'; }
.acc_content div.senmon h4:before   { content: '\f02d'; }
.acc_content div.dento h4:before    { content: '\f02b'; }
.acc_content div.nenpyo h4:before   { content: '\f073'; }
.acc_content div.yogo h4:before     { content: '\f00b'; }

.acc_section.oden .acc_content h4:before { color: #6fba2c; background: #fff; border: solid 2px #6fba2c; }
.acc_section.neri .acc_content h4:before { color: #ffa500; background: #fff; border: solid 2px #ffa500; }
.acc_section.nabe .acc_content h4:before { color: #ffcf04; background: #fff; border: solid 2px #ffcf04; }
.acc_section.dent .acc_content h4:before { color: #7fc1fe; background: #fff; border: solid 2px #7fc1fe; }
.acc_section.syog .acc_content h4:before { color: #ff6393; background: #fff; border: solid 2px #ff6393; }
.acc_section.pedi .acc_content h4:before { color: #9470dc; background: #fff; border: solid 2px #9470dc; }

.acc_section.neri h5.neri_subtitle           { margin-bottom: .5em; font-size: 1.1em; color: #ffa500!important; }
.acc_section.neri h5#asiakikou.neri_subtitle { padding-top: .5em; margin-bottom: .5em; }
.acc_section.neri ul#neri_spl li  { float: left; width: 50%; }
.acc_section.neri ul#neri_asia li { float: left; width: 50%; }
.acc_section.pedi ul#chro_spl li  { float: left; width: 50%; }
.acc_section.pedi ul#glos_spl li  { float: left; width: 50%; }

.acc_section.pedi.acc_active .acc_content { border-bottom: 1px solid #ccc; }
.acc_content div ul                  { margin-bottom: 1em; }
.acc_content div ul li               { margin: 4px 0; border: 1px solid #f3f3f3; border-radius: 4px; }
.acc_content div ul li:nth-child(2n) { background: #f9f9f9; }
.acc_content div ul li a             { display: block; padding: .75em 1em .5em 1em; }

.acc_content div ul#neri_spl li:nth-child(2n-1)  { width: calc(50% - 4px); }
.acc_content div ul#neri_spl li:nth-child(2n)    { float: right; width: calc(50% - 4px); }
.acc_content div ul#neri_spl li:nth-child(4n-1)  { background: #f9f9f9; }
.acc_content div ul#neri_spl li:nth-child(4n-2)  { background: #fff; }
.acc_content div ul#neri_asia li:nth-child(2n-1) { width: calc(50% - 4px); }
.acc_content div ul#neri_asia li:nth-child(2n)   { float: right; width: calc(50% - 4px); }
.acc_content div ul#neri_asia li:nth-child(4n-1) { background: #f9f9f9; }
.acc_content div ul#neri_asia li:nth-child(4n-2) { background: #fff; }
.acc_content div ul#chro_spl li:nth-child(2n-1)  { width: calc(50% - 4px); }
.acc_content div ul#chro_spl li:nth-child(2n)    { float: right; width: calc(50% - 4px); }
.acc_content div ul#chro_spl li:nth-child(4n-1)  { background: #f9f9f9; }
.acc_content div ul#chro_spl li:nth-child(4n-2)  { background: #fff; }
.acc_content div ul#glos_spl li:nth-child(2n-1)  { width: calc(50% - 4px); }
.acc_content div ul#glos_spl li:nth-child(2n)    { float: right; width: calc(50% - 4px); }
.acc_content div ul#glos_spl li:nth-child(4n-1)  { background: #f9f9f9; }
.acc_content div ul#glos_spl li:nth-child(4n-2)  { background: #fff; }
}