/* LESS Document */ /*----------------------------------------------------------- layout /*----------------------------------------------------------*/ .wrap{ width:100%; height:auto; overflow:hidden; } .inner-1080{ width:1080px; height:auto; margin:0 auto; overflow:hidden; } .inner-960{ width:960px; height:auto; margin:0 auto; overflow:hidden; } .inner-640{ width:640px; height:auto; margin:0 auto; overflow:hidden; } main{ article{ clear:both; display:block; overflow:hidden; } } /*----------------------------------------------------------*/ /*----------------------------------------------------------- class /*----------------------------------------------------------*/ /* title */ h2{ text-align:center; font-size: 32px; font-weight: bold; text-align: center; margin-bottom: 30px; } h3{ font-size: 24px; font-weight: bold; margin-bottom: 10px; } /* table */ table{ width:100%; font-size:14px; text-align:left; font-weight:normal; overflow:hidden; tr{ width:100%; th{ width:180px; padding:20px 10px; vertical-align:middle; box-sizing:border-box; border:1px #ddd solid; background:#f5f5f5; } td{ padding:20px 10px; vertical-align:middle; box-sizing:border-box; border:1px #ddd solid; background:#ffffff; } } } /* acd */ #acd-menu{ dt{ color:#fff; width:100%; padding:15px; } dd{ ul{ background:#333; margin-bottom:0; li{ clear:both; overflow:hidden; border-top:1px #555 solid; &:before{ content:">"; float:left; color:#17ccbe; position:relative; top:15px; margin-left:15px; margin-right:10px; } } } } } /* res */ .res-center {text-align:center;} .res-left {text-align:left;} .res-right {text-align:right;} /*----------------------------------------------------------*/ /*----------------------------------------------------------- header ------------------------------------------------------------*/ header{ width:100%; height:120px; overflow:hidden; background:#ffffff; position:fixed; top:0; left:0; z-index:9999; h1{ color:#999999; font-size:11px; font-style:normal; } #global-nav{ width:100%; height:40px; background:#ff7800; ul{ width:1080px; margin:0 auto; li{ float:left; width:180px; height:40px; box-sizing:border-box; border-left:1px #ffffff dotted; &:last-child{ border-right:1px #ffffff dotted; } a{ color:#fff; display:block; padding:9px; text-align:center; } } } } } /*----------------------------------------------------------*/ /*----------------------------------------------------------- main ------------------------------------------------------------*/ #anc-top{ margin-top:-120px; padding-top:240px; } #anc-miryoku, #anc-miryoku2, #anc-miryoku3, #anc-tokutyou, #anc-interview, #anc-nagare, #anc-course, #anc-school, #anc-faq, #anc-form{ margin-top:-120px; padding-top:120px; } #top-image{ height:560px; background: url(../images/top-image.jpg) 50% 0 no-repeat #eeeeee; background-size:1280px auto; #top-image-inner{ width:1280px; margin:0 auto; a img:hover{ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; } #top-image-bt1, #top-image-bt2, #top-image-bt3{ position: relative; top: 310px; } #top-image-bt1{ left:640px; } #top-image-bt2{ left:650px; } #top-image-bt3{ left:660px; } } } #omoi{ background-repeat:no-repeat; background-position:center 220px; background-image:url(../images/omoi-bg.png); } #miryoku3{ background-repeat:no-repeat; background-position:center bottom; background-image:url(../images/soroban-bg.png); } #nagare{ ul{ li{ float:left; width:240px; margin-right:40px; &:last-child{ margin-right:0px; } } } } #school{ ul{ li{ float:left; width:300px; margin-right:30px; margin-bottom:30px; background:#ffffff; border-bottom:3px #1591ed solid; &:nth-child(3n){ margin-right:0px; } a{ &:hover{ text-decoration:none; } } p{ padding:10px; } } } } #course{ background-repeat:no-repeat; background-position:center bottom; background-image:url(../images/course-bg.png); } #price{ width:100%; h2{ position:relative; top:-30px; } } #faq-q{ height:70px; background:url(../images/faq-q.png); p{ color:#13ba8a; font-size:24px; padding-top:15px; padding-left:90px; } } #faq-a{ margin-bottom:50px; background:url(../images/faq-a.png) no-repeat; p{ padding-left:90px; } } #form{ h2{ width:100%; padding-top:30px; background:#ff7800; border-bottom:3px #c94b00 solid; } #form2{ width:100%; padding-top:30px; background:#00ce45; border-bottom:3px #007c26 solid; } } #check-li li { max-width: 100%; padding: 10px; margin: 0 20px 20px 20px; color: #ffffff; font-size: 20px; font-weight: bold; text-align: center; background: #29ba8b; } #trophy { color: #f4a025; } #certificate { color: #f48cac; } #badge { color: #5ec0fc; } /*----------------------------------------------------------*/ /*----------------------------------------------------------- form ------------------------------------------------------------*/ #form{ table{ img{ position:relative; top:6px; } } form{ input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="nomber"], input[type="date"], select, textarea{ padding:10px 5px; border:2px #ddd solid; box-sizing:border-box; border-radius:4px; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; } input[type="submit"]{ width:320px; color:#fff; padding:10px; font-size:24px; border-radius:4px; background:#FF6E00; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; &:hover{ background:#FF2700; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } } } } /*----------------------------------------------------------*/ /*----------------------------------------------------------- footer ------------------------------------------------------------*/ #page-top{ z-index:9999; position:fixed; bottom:20px; right:20px; font-size:14px; a{ color:#fff; width:80px; display:block; padding:15px 0; text-align:center; border-radius:5px; background:#7bd7ff; &:hover{ background:#1591ed; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } } } /*----------------------------------------------------------*/