@charset "utf-8"; /*================================================================ 1 : Basic Setting ================================================================*/ /*======== 1-1 : Universal Selector ========*/ *{ margin: 0; padding: 0; font-size:100%; color: #333333; text-align: left; } /*======== 1-2 : ========*/ body{ text-align: center; height: 100%; background-color: #ff5b83; font:12px/1.8 "MS Pゴシック","ＭＳＰゴシック",sans-serif,verdana,helvetica; } html* body {/*Safari + IE5.5-6*/ font-size:11px; } * html body {/*IE5.5-6*/ font-size:75%; } *:first-child+html body {/*IE7*/ font-size:75%; } /*======== 1-3 : Block Level ========*/ h1,div,p,ul,ol,li{ font-size: 12px; text-align: left; } h2{ font-size: 14px; font-weight: bold; } h3, h4{ font-size: 13px; font-weight: bold; } h5{ font-size: 12px; font-weight: bold; } /*IE6*/ * html h1, * html h2, * html div{ height: 1px; } /*======== 1-4 : List ========*/ ul{ list-style: none; font-size: 12px; } ol{ font-size: 12px; padding-left: 35px; margin-bottom: 10px; } /*======== 1-5 : ========*/ a:link{ color: #0000CC; text-decoration: underline; } a:visited{ color: #6666CC; text-decoration: underline; } a:hover{ color: #9999FF; text-decoration: none; } a:active{ color: #9999FF; text-decoration: none; } /*======== 1-6 :

========*/ hr{ display: none; } /*======== 1-7 : etc ========*/ img{ border: none; } strong{ color: #FF3366; font-weight: bold; } img.right { float: right; padding-left: 10px; } .center { text-align: center; } /*================================================================ 2 : Layout Setting ================================================================*/ /*======== 2-1 : div#All ========*/ div#All{ width: 780px; margin: 0 auto; padding: 0 20px; background-image: url(../images/backAll.gif); background-repeat: repeat-y; height: 100%; } /*======== 2-2 : div#Header ========*/ div#Header{ width: 780px; height: 115px; margin-bottom: 10px; background-image: url(../images/backHeader.gif); background-repeat: no-repeat; border-bottom: 5px solid #ff5b83; position: relative; } div#Header p.playgroup{ display: inline; } div#Header p.playgroup a{ color: #ffffff; font-size: 1px; width: 100px; height: 0; padding-top: 110px; display: block; overflow: hidden; } div#Header h1{ font-size: 1px; margin-left: 105px; position: absolute; top: 35px; } div#Header p.topDescription{ font-size: 11px; margin-left: 105px; position: absolute; top: 10px; } div#Header p.dial{ color: #ffffff; font-size: 1px; text-align: right; position: absolute; top: 20px; left: 560px; } /*======== 2-3 : div#indexMain ========*/ div#indexMain{ } div#indexMain p{ font-size: 12px; line-height: 1.6em; } div#indexMain li{ font-size: 12px; line-height: 1.6em; } div#indexImage{ width: 780px; height: 160px; margin-bottom: 10px; } div#indexImage li{ width: 189px; float: left; padding-right: 8px; } div#indexImage li.bottom{ padding-right: 0; } div#indexImage5{ width: 780px; height: 160px; margin-bottom: 10px; } div#indexImage5 li{ width: 148px; float: left; padding-right: 10px; } div#indexImage5 li.bottom{ padding-right: 0; } div#indexUpper{ width: 780px; background: url(../images/indexUpperBack.gif) bottom no-repeat; margin-bottom: 10px; clear: both; } div#topCocept{ width: 550px; float: left; } div#topCocept p{ padding: 5px 18px 10px 18px; } div#whatsNew{ width: 220px; margin-left: 10px; float: left; } div#whatsNew ul{ padding-left: 8px; } div#whatsNew li{ line-height: 1.5em; margin-bottom: 0.7em; } div#whatsNew li span{ color: #666666; font-size: 12px; } div#whatsNew li a{ color: #333333; } div#indexLower{ width: 780px; background: url(../images/indexLowerBack.gif) bottom no-repeat; clear: both; } div#topFeature{ width: 270px; float: left; } div#topNetwork{ width: 500px; margin-left: 10px; float: left; } div#topNetwork p{ font-size: 12px; padding: 0 15px 10px 15px; } div#topNetwork p img{ float: right; margin-left: 10px; } div#topCurriculum{ width: 780px; margin-top: 10px; padding-bottom: 15px; background-image: url(../images/indexCurriculumBack.gif); background-repeat: no-repeat; background-position: bottom; } div.topCurContent{ margin: 0 15px; } div.topCurContent div.left{ width: 630px; margin-right: 20px; float: left; } div.topCurContent div.right{ float: right; } div#topCurriculum div.feature{ background-image: url(../images/indexCurFeaBack.gif); background-repeat: no-repeat; background-position: bottom; width: 750px; } div#indexUpper:after, div#indexLower:after, div#topCurriculum:after, div#topCurriculum div.feature:after{ content:"."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } div#topCurriculum div.feature div{ width: 220px; margin-right: 15px; padding: 0 10px 10px 10px; float: left; } div#topCurriculum div.feature div.last{ margin-right: 0; } div#topCurriculum div.feature div h5, div#topCurriculum div.feature div li{ color: #ffffff; } div#topCurriculum div.feature div ul{ margin-left: 18px; list-style: disc; } /*======== 2-4 : div#Main ========*/ div#Main{ width: 580px; float: right; border-bottom: 1px solid #999999; } div#Main div.Content{ padding-bottom: 10px; } div#Main div.Content h2{ border-bottom: 1px solid #999999; background-repeat: no-repeat; background-position: left center; margin-bottom: 10px; padding: 5px 0 5px 30px; } div#Main div.program h2{ background-image: url(../images/h2Program.gif); } div#Main div.info h2{ background-image: url(../images/h2Info.gif); } div#Main div.access h2{ background-image: url(../images/h2Block.gif); } div#Main div.lesson h2{ background-image: url(../images/h2Lesson.gif); } div#Main div.contact h2{ background-image: url(../images/h2Book.gif); } div#Main div.Content h3{ border-bottom: 1px dotted #999999; background-repeat: no-repeat; background-position: 0 3px; margin-bottom: 10px; padding: 3px 0 3px 30px; background-image: url(../images/h3Quaver.gif); } div#Main div.Content h3.quaver{ background-image: url(../images/h3Quaver.gif); } div#Main div.Content h3.leaf{ background-image: url(../images/h3Leaf.gif); } div#Main div.Content h3.pc{ background-image: url(../images/h3Pc.gif); } div#Main div.Content h3.time{ background-image: url(../images/h3Time.gif); } div#Main div.Content h4{ color: #FF3366; padding: 0 0 0.2em 5px; } div#Main div.Content form h4{ padding: 0.5em 0 0.2em 0; } div#Main div.Content p, div#Main div.Content dl{ font-size: 12px; margin: 0 0 10px 5px; } div#Main div.Content dl dt{ color: #FF3366; font-weight: bold; } div#Main div.Content dl dd{ margin-bottom: 1em; padding: 0.5em 0; border-bottom: 1px dotted #999999; } div#Main div.Content dl.application { width: 450px; margin-left: 65px; background-image: url(../images/appliBack.gif); background-repeat: no-repeat; background-position: bottom; } div#Main div.Content dl.application dt{ background-image: url(../images/appliTopBack.gif); background-repeat: no-repeat; background-position: top; padding: 15px 15px 10px 15px; } div#Main div.Content dl.application dd{ border-bottom: none; margin-bottom: 0; padding: 0 15px 15px 15px; } div#Main div.Content dl.voice dt{ background-image: url(../info/images/iconVoice.gif); background-repeat: no-repeat; padding: 3px 0 0 35px; background-position: left center; } div#Main div.Content ul{ margin: 0 0 10px 30px; list-style: disc; } div#Main div.Content ol ul{ font-size: 14px; margin: 0 0 10px 10px; } div#Main div.Content table{ background-color: #ffcccc; border-collapse: collapse; margin-left: 5px; } div#Main div.Content th, div#Main div.Content td{ padding: 7px; border-bottom: 1px solid #ffffff; vertical-align: top; } div#Main div.Content th{ color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; background-color: #FF3366; } div#Main div.Content .halftime th{ background-color: #FF9933; } div#Main div.Content .halftime td{ background-color: #FFFF99; } div#Main div.Content td p{ margin: 0; } div#Main div.Content td ul{ margin: 2px 2px 2px 22px; } div#Main div.Content table.staff{ background-color: #ffffff; width: 100%; } div#Main div.Content table.staff td{ border-bottom: 1px dotted #999999; } div#Main div.Content li span.Tel{ color: #FF3366; font-weight: bold; font-size: 120%; background-image: url(../images/sideTel.gif); background-repeat: no-repeat; background-position: left middle; padding: 2px 0 5px 28px; } div#Main div.Content li span.Fax{ color: #FF3366; font-weight: bold; font-size: 120%; background-image: url(../images/iconFax.gif); background-repeat: no-repeat; background-position: left middle; padding: 2px 0 5px 28px; } div#Main div.Content li a.Mail{ color: #FF3366; font-weight: bold; font-size: 120%; background-image: url(../images/iconMail.gif); background-repeat: no-repeat; background-position: left middle; padding: 2px 0 5px 28px; } div#Main div.Content li a.Pdf{ background-image: url(../images/iconPdf.gif); background-repeat: no-repeat; background-position: right center; padding: 0 15px 5px 5px; } div#Main div.Content li a.Contact{ color: #ffffff; font-size: 1px; text-align: center; background-image: url(../images/buttonContact.gif); background-repeat: no-repeat; width: 150px; height: 5px; display: block; padding-top: 20px; } div#Main div.Content li a.Contact:hover{ color: #ffffff; background-position: left -25px; } /*======== 2-4' : div#navi ========*/ #navi{ } #navi ul{ } #navi ul li{ font-size: 12px; display: inline; } #navi li a{ padding-right: 15px; background-image: url(../images/arrowNavi.gif); background-position: right; background-repeat: no-repeat; } /*======== 2-5 : div#Side ========*/ div#Side{ background: #ffbbcc; width: 170px; padding: 10px; float: left; } div#Side div.Content{ width: 170px; } div#Side div.Content p{ margin: 0 10px 10px 10px; } div#Side div.Content ul{ background: #ffffff; margin: 0; list-style: none; } div#Side div.Content ul li{ font-size: 12px; border-bottom: 1px dotted #999999; background-image: url(../images/sideArrow.gif); background-repeat: no-repeat; background-position: 5px center; } div#Side div.Content ul li.root{ background-image: url(../images/sideArrowRoot.gif); } div#Side div.Content ul li a{ color: #333333; padding: 10px 3px 10px 25px; display: block; width: 142px; height: 15px; } div#Side div.Content ul li a:link, div#Side div.Content ul li a:visited{ color: #333333; text-decoration: none; } div#Side div.Content ul li a:hover{ color: #999999; text-decoration: underline; } div#Side div.Content p{ margin: 10px 0 0 0; padding: 0; } div#Side div.Content p.sideTel{ color: #FF3366; font-weight: bold; font-size: 14px; background-image: url(../images/sideTel.gif); background-repeat: no-repeat; background-position: left 3px; padding-left: 28px; } div#Side div.Content p.sideTel span{ color: #333333; font-weight: normal; font-size: 11px; _font-size: 60%; } div#Side div.Content p.sideContact a{ color: #ffbbcc; font-size: 1px; text-align: center; background-image: url(../images/sideContact.gif); background-repeat: no-repeat; width: 150px; height: 5px; display: block; padding-top: 20px; } div#Side div.Content p.sideContact a:hover{ color: #ffbbcc; background-position: left -25px; } /*======== 2-6 : div#Footer ========*/ div#Footer{ font-size: 11px; width: 780px; height: 60px; /* 任意の数値 */ clear: both; } div#Footer p{ text-align: right; height: 20px; padding: 10px 0; } div#Footer p#area{ width: 380px; text-align: left; overflow: auto; float: left; margin: 10px 0; padding: 0; } div#Footer p#copyright{ width: 400px; float: left; margin: 10px 0; padding: 0; } div#Footer p img{ vertical-align: middle; margin-left: 3px; } /*======== Form ========*/ div#Main div.Content form{ font-size: 12px; margin: 0 0 10px 5px; } /* お問合せフォーム ---------------------------------------------------- */ form{ font-sizse: 80%; } fieldset { margin: 5px 0 0 0; padding: 5px; border-width: 1px; border-color: #999999; border-style: dotted none none none; } legend { font-weight: bold; background-color: #FFFFFF; margin: 0 0 0 -15px; padding: 5px; } .label { clear: left; display: block; padding-top: 0.5em; float: left; width: 120px; line-height: 1em; } .control { display: block; margin: 0 0 0 120px; padding-top: 0.5em; line-height: 1em; } input, select, textarea { vertical-align: middle; color: #696969; } input:focus { background-color: #e7e7e0; } textarea:focus { background-color: #e7e7e0; } p.thankyou { font-weight: bold; text-align: center; padding: 100px 0; width: 540px; } .errmsg { color: red; display: block; margin: 0 0 0 120px; padding-top: 0.5em; line-height: 1em; } .errmsg_global { background-color: red; color: white; } p.submit { padding-left: 150px; } p.submit input{ text-align: center; } fieldset th{ width: 20%; } /* カタログダウンロード ---------------------------------------------------- */ .catDownload { margin-bottom: 10px; padding: 0 4px 5px 5px; border: 1px solid #CCCCCC; overflow: auto; _overflow: inherit; } .catDownload h2 { border-top: none; color: #663300; } .catDownload p { line-height: 1.5em; } .catDownload img { float: left; padding-right: 5px; } .catDownload a img { padding-top: 5px; }