@charset "utf-8";

/*PCトップtitle-visual
====================================================================*/
@media only screen and (min-width: 769px){
#top_intro           { height: 440px; border-bottom: 1px solid #ccc; display: block; background-image: url(/knowledge/img/top/visual_bg.png), url(/knowledge/img/top/top_base_bg.png); background-position: left calc(50% + 380px) top 100%, top 0% left 0%; background-repeat: no-repeat ,repeat-x; }
#top_intro .inner    { margin: 0 auto; width: 980px; height: 440px; display: block; position: relative; }
#top_intro .top_copy { padding-top: 82px; width: 560px; }

/*PC教室
====================================================================*/
#top_oden              { border-bottom: 1px solid #6fba2c; position: relative; }
#top_oden .bg_area     { width: 100%; height: 559px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/oden_bg.png) center no-repeat; }
#top_neri              { border-bottom: 1px solid #ffa500; position: relative; }
#top_neri .bg_area     { width: 100%; height: 559px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/neri_bg.png) center no-repeat; }
#top_nabe              { border-bottom: 1px solid #ffcf04; position: relative; }
#top_nabe .bg_area     { width: 100%; height: 559px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/nabe_bg.png) center no-repeat; }
#top_dento             { border-bottom: 1px solid #45bff6; position: relative; }
#top_dento .bg_area    { width: 100%; height: 559px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/dento_bg.png) center no-repeat; }
#top_syogatsu          { border-bottom: 1px solid #ff739d; position: relative; }
#top_syogatsu .bg_area { width: 100%; height: 459px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/shogatsu_bg.png) center no-repeat; }
#top_pedia             { border-bottom: 1px solid #9470dc; position: relative; }
#top_pedia .bg_area    { width: 100%; height: 459px; position: absolute; top: 0; left: 0; right: 0; background: url(/knowledge/img/top/pedia_bg.png) center no-repeat; }

/* PC教室タイトル
====================================================*/
section .inner                   { margin: 0 auto; padding: 0!im980px; position: relative; z-index: 1; }
section .inner .title_part       { width: 490px; position: relative; }
#top_oden .inner .title_part,
#top_nabe .inner .title_part,
#top_syogatsu .inner .title_part { margin-left: 490px; padding-left: 10px; }
#top_pedia .inner .title_part    { width: 980px; }

#top_oden .inner     { height: 559px; }
#top_neri .inner     { height: 559px; }
#top_nabe .inner     { height: 559px; }
#top_dento .inner    { height: 559px; }
#top_syogatsu .inner { height: 459px; }
#top_pedia .inner    { height: 459px; } 

section .inner h2              { font-size: 40px; position: relative; top: 63px; z-index: 1; margin-left: 26px; display: inline-block; }
section .inner h2 span         { font-size: 30px; vertical-align: middle; display: inline-block; padding-bottom: 10px; }
section .inner h2:before       { content: ''; width: 86px; height: 86px; border: 8px solid #ccc; box-sizing: border-box; position: absolute; top: -20px; left: -24px; z-index: -1; }
#top_oden .inner h2:before     { border-color: #6fba2c; }
#top_neri .inner h2:before     { border-color: #ffa500; }
#top_nabe .inner h2:before     { border-color: #ffcf04; }
#top_dento .inner h2:before    { border-color: #7fc1fe; }
#top_syogatsu .inner h2:before { border-color: #ff6393; }
#top_pedia .inner h2:before    { border-color: #9470dc; } 

/* PCコンテンツ一覧へのリンク
====================================================================*/
section .inner .ac_btn   { padding: .15em 1em; display: inline-block; background: #ccc; border: 2px solid #fff; border-radius: .5em; position: absolute; top: 65px; right: 0; }
section .inner .ac_btn a { display: block; font-weight: bold; font-size: 24px; text-decoration: none; color: #fff; cursor: pointer; }
section .inner .ac_btn a:after { content: '\f054'; font-family: FontAwesome; font-size: 20px; margin-left: .5em; font-weight: 900; -webkit-font-smoothing: antialiased; }
#top_oden .ac_btn        { background: #6fba2c; }
#top_neri .ac_btn        { background: #ffa500; }
#top_nabe .ac_btn        { background: #ffcf04; }
#top_dento .ac_btn       { background: #7fc1fe; }
#top_syogatsu .ac_btn    { background: #ff6393; }
#top_pedia .ac_btn       { background: #9470dc; right: 280px; }

/* PCコンテンツへのリンク
====================================================================*/
section .inner .contents_link                  { position: absolute; bottom: 0; left: 50px; }
section#top_oden .inner .contents_link         { position: absolute; bottom: 0; left: 540px; }
section#top_nabe .inner .contents_link         { position: absolute; bottom: 0; left: 540px; }
section#top_syogatsu .inner .contents_link     { position: absolute; bottom: 50px; left: 540px; }
section#top_syogatsu .inner .contents_link img { width: 424px; }

section .inner .contents_link ul    { margin-bottom: 50px; }
section .inner .contents_link ul li { margin-top: 1em; padding: 1em calc(1em + 100px) 1em 1em; width: 382px; height: 102px; background: #fff; border: 1px solid #ccc; border-radius: .5em; overflow: hidden; position: relative; }
section .inner .contents_link ul li p           { margin-bottom: .5em; }
section .inner .contents_link ul li h4.title    { font-size: 16px; }
section .inner .contents_link ul li .visual     { position: absolute; top: 0; right: 0; width: 100px; }
section .inner .contents_link ul li .visual img { width: 100%; }
section .inner .contents_link ul li a           { display: block; }

section#top_oden .inner .contents_link ul li p i  { padding-right: .25em; color:#6fba2c; }
section#top_neri .inner .contents_link ul li p i  { padding-right: .25em; color:#ffa500; }
section#top_nabe .inner .contents_link ul li p i  { padding-right: .25em; color:#ffcf04; }
section#top_dento .inner .contents_link ul li p i { padding-right: .25em; color:#7fc1fe; }
section#top_pedia .inner .contents_link ul li p i { padding-right: .25em; color:#9470dc; }
}

/*SPレイアウト
====================================================================*/
@media only screen and (max-width: 768px){

/*SPトップtitle-visual
====================================================================*/
#top_intro           { margin: 0 auto; padding-top: 66.4%; width: 100%; height: 0; position: relative; background: url(/knowledge/img/top/sp_visual_bg.png) center no-repeat; background-size: cover; border-bottom: 1px solid #ccc; }
#top_intro .inner    { margin: 0 auto; width: 100%; display: block; position: absolute; top: 0; }
#top_intro .top_copy { padding: 2em 1em; width: 100%; }

/* SP教室タイトル
====================================================*/
section .inner                   { margin: 0 auto; padding: 0!important; width: 100%; position: relative; z-index: 1; }
section .inner .title_part       { width: 100%; height: 0; padding-top: 44.3%; position: relative; }
#top_oden .inner .title_part     { background: url(/knowledge/img/top/oden_bg.png) center no-repeat; background-size: cover; }
#top_neri .inner .title_part     { background: url(/knowledge/img/top/neri_bg.png) center no-repeat; background-size: cover; }
#top_nabe .inner .title_part     { background: url(/knowledge/img/top/nabe_bg.png) center no-repeat; background-size: cover; }
#top_dento .inner .title_part    { background: url(/knowledge/img/top/dento_bg.png) center no-repeat; background-size: cover; }
#top_syogatsu .inner .title_part { padding-top: 36.4%; background: url(/knowledge/img/top/shogatsu_bg.png) center no-repeat; background-size: cover; }
#top_pedia .inner .title_part    { padding-top: 36.4%; background: url(/knowledge/img/top/pedia_bg.png) center no-repeat; background-size: cover; }

/* SP教室タイトル
====================================================*/
section .inner h2              { font-size: 6vw!important; position: absolute; top: 1em; z-index: 1; margin-left: 5vw; display: inline-block; }
section .inner h2 span         { display: inline-block; text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff; }
section .inner h2:before       { content: ''; width: 12vw; height: 12vw; border: 1.6vw solid #ccc; box-sizing: border-box; position: absolute; top: -2.5vw; left: -3.2vw; z-index: -1; }
#top_oden .inner h2            { left: 50%; }
#top_oden .inner h2:before     { border-color: #6fba2c; }
#top_neri .inner h2:before     { border-color: #ffa500; }
#top_nabe .inner h2            { left: 50%; }
#top_nabe .inner h2:before     { border-color: #ffcf04; }
#top_dento .inner h2:before    { border-color: #7fc1fe; }
#top_syogatsu .inner h2        { left: 50%; }
#top_syogatsu .inner h2:before { border-color: #ff6393; }
#top_pedia .inner h2:before    { border-color: #9470dc; } 
/* SPコンテンツ一覧へのリンク
====================================================================*/
section .inner .ac_btn   { padding: .15em .5em; display: inline-block; background: #ccc; border: 1px solid #fff; border-radius: .5em; position: absolute; bottom: 2em; }
section .inner .ac_btn a { display: block; font-weight: 900; font-size: 4vw; text-decoration: none; color: #fff; cursor: pointer; }
section .inner .ac_btn a:after { content: '\f054'; font-weight: 900; font-family: FontAwesome; margin-left: .5em; -webkit-font-smoothing: antialiased; }
#top_oden .ac_btn        { background: #6fba2c; right: 1em; }
#top_neri .ac_btn        { background: #ffa500; right: calc(50% + 1em); }
#top_nabe .ac_btn        { background: #ffcf04; right: 1em; }
#top_dento .ac_btn       { background: #7fc1fe; right: calc(50% + 1em); }
#top_syogatsu .ac_btn    { background: #ff6393; right: 1em; }
#top_pedia .ac_btn       { background: #9470dc; right: calc(50% + 1em); }

/* SPコンテンツへのリンク
====================================================================*/
section .inner .contents_link ul li { margin-top: 1em; padding: 1em calc(1em + 100px) 1em 1em; width: 100%; height: 102px; background: #fff; border: 1px solid #ccc; border-radius: .5em; overflow: hidden; position: relative; }
section .inner .contents_link ul li p           { margin-bottom: .5em; }
section .inner .contents_link ul li h4.title    { font-size: ; }
section .inner .contents_link ul li .visual     { position: absolute; top: 0; right: 0; width: 100px; }
section .inner .contents_link ul li .visual img { width: 100%; }
section .inner .contents_link ul li a           { display: block; }
section#top_oden .inner .contents_link               { padding: 1px 1em 1em 1em; background: #6fba2c; }
section#top_oden .inner .contents_link ul li p i     { padding-right: .25em; color:#6fba2c; }
section#top_neri .inner .contents_link               { padding: 1px 1em 1em 1em; background: #ffa500; }
section#top_neri .inner .contents_link ul li p i     { padding-right: .25em; color:#ffa500; }
section#top_nabe .inner .contents_link               { padding: 1px 1em 1em 1em; background: #ffcf04; }
section#top_nabe .inner .contents_link ul li p i     { padding-right: .25em; color:#ffcf04; }
section#top_dento .inner .contents_link              { padding: 1px 1em 1em 1em; background: #7fc1fe; }
section#top_dento .inner .contents_link ul li p i    { padding-right: .25em; color:#7fc1fe; }
section#top_syogatsu .inner .contents_link           { padding: 1em 3em; background: #ff6393; }
section#top_syogatsu .inner .contents_link img       { width: 100%; }
section#top_syogatsu .inner .contents_link ul li p i { padding-right: .25em; color:#ff6393; }
section#top_pedia .inner .contents_link              { padding: 1px 1em 1em 1em; background: #9470dc; }
section#top_pedia .inner .contents_link ul li p i    { padding-right: .25em; color:#9470dc; }
}

/* scrollするとfade in */
.fadeIn          { transition: 3s; opacity: 0.05; }
.fadeIn.animated { opacity: 1; }

/* 参考文献・取材協力・画像提供
===================================================================================== */
#bibliography           { margin: 0 auto; padding: 40px 0; max-width: 980px; }
#bibliography h3        { position: relative; cursor: pointer; padding: .75em 1em; border: 1px solid #eee; border-radius: 3px; background: linear-gradient(45deg, #f5f5f5 25%, transparent 25%, transparent 75%, #f5f5f5 75%), linear-gradient(45deg, #f5f5f5 25%, transparent 25%, transparent 75%, #f5f5f5 75%); background-color: #fff; background-size: 2px 2px; background-position: 0 0, 1px 1px; }
#bibliography h3 i      { position: absolute; right: 1em; }
#bibliography h3.open i { transform: rotate(180deg); }
#bibliography ul        { margin-top: 1em; display: none; }
#bibliography li        { display: inline; font-size: .85em; line-height: 1.5; }
#bibliography li:after  { content: '／'; }
#bibliography li:last-child:after  { content: ''; }

@media only screen and (max-width: 768px){
#bibliography    { margin: 0; padding: 2em 1em; }
#bibliography li { font-size: .8em; }
}