/* CSS Document */ /** * 「ドラゼミとは」共通ヘッダドロップダウンメニュー用CSS */ @import url('about_pathlist.css'); /** * 新規追加ファイル用 * ------------------------------------------------------------ * 新規追加分にはクラス「rn1」を付加して独自のスタイルを定義しています */ /** * mainarea共通要素 * ・各ページに使われているID「mainarea」の新規スタイルです * ・現在このスタイルは、courseフォルダの新規追加分のページにも同様に指定しています * [ 対象ファイル ] * > elements/about.css * > elements/test.css * > elements/what.css * ・将来的に共有用のCSSファイルを用いてこれらのスタイル情報を統合させていきます * ・いまのところ「template.css」への統合が有効？ */ #mainarea.rn1{ width:740px; float:left; margin:10px 0; text-align:left; background: url(../image/template/mainarea/section_bg_middle.jpg) repeat-y; } #mainarea.rn1 > * { margin: 0 10px; } /* mainarea用角丸背景（新デザイン用） */ #mainarea.rn1 > .section_bg_t { margin: 0px; height: 10px; background: no-repeat url(../image/template/mainarea/section_bg_top.jpg); } #mainarea.rn1 > .section_bg_b { margin: 0px; height: 8px; background: no-repeat url(../image/template/mainarea/section_bg_bottom.jpg); } /* ------------------------------------------------------------ */ /** * 「ドラゼミについて」新デザイン用ページCSS */ /* コース名 */ #mainarea.rn1 > #course_title { margin: 10px 20px 0 20px; padding-bottom: 10px; width: 700px; height: 35px; background: no-repeat url(../image/about/index_new/h2_coursetitle.jpg); } #mainarea.rn1 > #course_title > span { display: block; height: 5px; text-indent: -999em; } #mainarea.rn1 > #course_title > a { margin-left: 499px; display: block; width: 200px; height: 35px;} #mainarea.rn1 > .about { margin: 10px 20px 0 20px; background: no-repeat bottom right url(../image/about/index_new/about_bg1.jpg); } #mainarea.rn1 > .about > h3 { margin-top: 22px; } #mainarea.rn1 > .about > div.sentence { margin: 18px 15px; width: 327px; color: #666; line-height: 24px; font-size: 13px; } #mainarea.rn1 > .features { margin: 10px 20px 0 20px; background: no-repeat bottom right url(../image/about/index_new/about_bg2.jpg); } #mainarea.rn1 > .features > h3 { margin-bottom: 14px; } #mainarea.rn1 > .features > div.features { margin-left: 14px; width: 670px; background: url(../image/about/index_new/h4_bg.png); border: 1px solid #9cf; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #mainarea.rn1 > .features > div.half { width: 335px; } #mainarea.rn1 > .features > div.features + div.features { margin-top: 8px; } #mainarea.rn1 > .features > div > h4 { } #mainarea.rn1 > .features > div > .hr { margin: 0 3px; padding: 0; display: block; height: 2px; background: url(../image/about/index_new/h4_hr_bg.png); } #mainarea.rn1 > .features > div > div.sentence { margin: 18px 15px; color: #666; line-height: 22px; font-size: 12px; } #mainarea.rn1 > .features > h5 { margin: 19px 0 0 14px; } #mainarea.rn1 > .features > h5 + div { margin-left: 14px; position: relative; height: 290px; } #mainarea.rn1 > .features > h5 + div > div { float: left; position: relative; bottom: 0;} #mainarea.rn1 > .features > h5 + div > div.youtube { width: 335px; height: 267px; background:url(../image/about/index_new/youtube_thumb.jpg) no-repeat;} #mainarea.rn1 > .features > h5 + div > div.button { margin-top: 200px; } #mainarea.rn1 > .features > h5 + div > div + div { margin-left: 8px; } #mainarea.rn1 > .reasons { margin: 10px 20px; text-align: center; } #mainarea.rn1 > .reasons > h3 { text-align: center; } #mainarea.rn1 > .reasons > div { margin: 11px auto; } #mainarea.rn1 > .reasons > div > a + a { margin-left: 10px; } /* 「ドラゼミが選ばれる５つの理由」ページ用ヘッダタブメニュー */ #aboutHeaderTabMenus { padding:0 0 0 25px; overflow:hidden; } #aboutHeaderTabMenus ol li { margin-top: 0; float:left;width:140px;height:42px; overflow: hidden; } #aboutHeaderTabMenus ol li a { padding-top: 7px; display:block;width:140px;height:42px; } #aboutHeaderTabMenus ol li.selected a, #aboutHeaderTabMenus ol li a:hover { padding-top: 0; } /* 「ドラゼミが選ばれる５つの理由」ページ用フッタバナー */ #mainarea > .next_reason { margin: 0 auto; text-align: center; } #mainarea > .next_reason > a { margin: 0 auto; display: block; width: 479px; height: 82px; text-align: center; } #mainarea > .next_reason > .hr { margin: 9px 11px; display: block; clear: both; background-color: #CCC; height: 1px; } /* 「ドラゼミが選ばれる５つの理由:学習応援」用フッター追加分 */ #mainarea > .next_reason > h4{text-align:left; color:#FFF; background:url(../image/about/share/bar_text_bg.jpg) no-repeat top left; width:730px; height:32px; padding:7px 0px 0px 15px; font-weight:bold; margin:0px 10px;} #mainarea > .next_reason > .bt_corse{margin:5px 10px; text-align:left;} #mainarea > .next_reason > .bt_corse > a:hover img{opacity:0.5;filter:alpha(opacity=50);-ms-filter:"alpha(opacity=50)";} /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */ /** * 以下は既存ページ用のCSS */ #aboutFooterMenuArea{padding:43px 25px 0;clear:both;} #aboutFooterMenuArea h3{padding-bottom:30px;} #aboutFooterMenuArea h4{padding-bottom:10px;} .aboutFooterMenu li {display:block;float:left;padding:0 0 40px;} .aboutFooterMenu li a{display:block;position:relative;} .aboutFooterMenu li a:hover{top:-5px;} #aboutTop01{padding:0px 0 5px;} #aboutTop03{border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea; padding:20px 20px 50px;text-align:left; background:url(../image/about/index/03_bg.jpg) top right no-repeat;} #aboutTop03 h3{padding-bottom:35px;} /** * 以前のタブメニュー用CSS */ /* #aboutHeaderMenuArea{padding:10px 0 0 25px;} #aboutHeaderMenuArea ol li{float:left;width:140px;height:35px;} #aboutHeaderMenuArea ol li a{display:block;width:140px;height:35px;text-indent:-9999px; background-position:0 7px;background-repeat:no-repeat;} #aboutHeaderMenuArea ol li a:hover{background-position:0 0;} #aboutShoHeaderMenu01 a{background-image:url(../image/about/share/menu_sho01.jpg);} #aboutShoHeaderMenu02 a{background-image:url(../image/about/share/menu_sho02.jpg);} #aboutShoHeaderMenu03 a{background-image:url(../image/about/share/menu_sho03.jpg);} #aboutShoHeaderMenu04 a{background-image:url(../image/about/share/menu_sho04.jpg);} #aboutShoHeaderMenu05 a{background-image:url(../image/about/share/menu_sho05.jpg);} #aboutYojiHeaderMenu01 a{background-image:url(../image/about/share/menu_yoji01.jpg);} #aboutYojiHeaderMenu02 a{background-image:url(../image/about/share/menu_yoji02.jpg);} #aboutYojiHeaderMenu03 a{background-image:url(../image/about/share/menu_yoji03.jpg);} #aboutYojiHeaderMenu04 a{background-image:url(../image/about/share/menu_yoji04.jpg);} #aboutYojiHeaderMenu05 a{background-image:url(../image/about/share/menu_yoji05.jpg);} */ .aboutHeaderImage{background:#f9f9f8 url(../image/about/share/top_bg.jpg); margin-bottom:60px;} .aboutHeaderImage div{padding:0 0 0 40px;height:430px;} /*#aboutHeaderImageFlow{float:right;padding:20px}*/ .aboutHeaderImage h3{padding:30px 0 0 0px;} .aboutHeaderImage h4{padding:0 0 0 0px;} div.aboutMain{background:#fff url(../image/about/share/tensen.gif) repeat-x top; clear:both;margin-bottom:50px;} div.aboutMain2line{background:#fff url(../image/about/share/tensen_2line.gif) repeat-x top;} h3.aboutMain{padding:7px 0 0 15px;} p.aboutMain{color:#4b4b4b;font-size:95%;line-height:1.5;padding:20px 20px 5px 15px; text-align:justify;text-justify:inter-ideograph;overflow:hidden;} div.aboutCheck{background:url(../image/about/share/check.gif) #f7f7f6 no-repeat; margin:5px 0 0 15px;text-align:center;padding:42px 0 12px;} div.aboutSub{background:url(../image/about/sho01/follow_bg.jpg) no-repeat top; padding:15px 30px;clear:both;margin:50px 0;color:#207100;} div.aboutSub h3{padding:10px 0 0;} div.aboutSub p{padding:15px 0 5px 0;font-size:90%;line-height:1.4;} #aboutSho01Stepup{margin:50px 0 20px;} #aboutSho01Stepup h3{padding-bottom:20px;} #aboutSho01Stepup ol li{height:150px;} #aboutSho01Stepup ol li#aboutSho01Stepup01{background:url(../image/about/sho01/06_bg.jpg);} #aboutSho01Stepup ol li#aboutSho01Stepup02{background:url(../image/about/sho01/07_bg.jpg);} #aboutSho01Stepup ol li#aboutSho01Stepup03{background:url(../image/about/sho01/08_bg.jpg) no-repeat;} #aboutSho01Stepup ol li h4{padding:20px 0 0 140px;} #aboutSho01Stepup ol li p{padding:10px 0 0 140px;font-size:90%;line-height:1.4;} .voicePickup{margin:10px 0;} .voicePickup h3{float:left;padding-top:3px;} .voicePickup ul{text-align:left;border-left:2px solid #dedede; margin-left:175px; min-height:45px;} .voicePickup ul li{padding:5px 5px 0px 25px;font-size:75%; background:url(../image/about/share/voice_pickup_icon.gif) no-repeat 13px 8px;} div.voicePickupWindow{display:none;} #TB_ajaxContent div.voicePickupWindowIcon{float:left;padding:0 15px;} #TB_ajaxContent h3.voicePickupWindow{border-bottom:1px solid #dedede;padding:10px 10px 5px; margin:0 0 5px;} #TB_ajaxContent h4.voicePickupWindow{font-size:150%;font-weight:bold; padding:10px 10px 0;line-height:1.3;} #TB_ajaxContent h5.voicePickupWindow{font-weight:bold;text-align:right; padding:5px 10px 0;} #TB_ajaxContent p.voicePickupWindow{font-size:115%;line-height:1.7;padding:10px 10px 0; clear:both;} #aboutSho02Tensakurei{margin:15px 0 0;width:750px;} #aboutSho02Tensakurei td{text-align:center;padding:10px 0 0;font-size:85%;color:#7f7f7f; line-height:1.5;} .aboutMovie{float:right;font-size:85%;font-weight:bold;padding:20px 0 0 20px;} #aboutMain{ background:url(../image/about/index/about_main_bg.jpg); width:750px; height:743px;} #aboutMain #textMain{ padding:15px 0 0 25px;} #aboutMain #aboutBtn{padding:5px 0 0 25px;} #aboutMain #aboutTitle{padding:10px 0 0 90px;} #aboutMain #aboutMovie{margin:5px 0 0 25px;}