/* LESS Document */ /*----------------------------------------------------------- layout /*----------------------------------------------------------*/ body{ max-width:640px; margin:0 auto; } .wrap{ width:100%; height:auto; overflow:hidden; } .inner{ max-width:640px; height:auto; padding:0 10px; overflow:hidden; } main{ article{ clear:both; display:block; overflow:hidden; } } /*----------------------------------------------------------*/ /*----------------------------------------------------------- class /*----------------------------------------------------------*/ /* title */ h2{text-align:center !important;} h3{ font-size: 16px; 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:100%; padding:10px; display:block; vertical-align:middle; box-sizing:border-box; border:1px #ddd solid; background:#f5f5f5; } td{ padding:10px; display:block; 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,.res-left,.res-right{text-align:center;} /*----------------------------------------------------------*/ /*----------------------------------------------------------- header ------------------------------------------------------------*/ header{ width:100%; height:70px; overflow:hidden; background:#ffffff; position:fixed; top:0; left:0; z-index:9999; .header-bt{ width:140px; a{ float:left; width:70px; } } } /*----------------------------------------------------------*/ /*----------------------------------------------------------- main ------------------------------------------------------------*/ #top-image{ width:320px; height:270px; background: url(../sp/images/top-image.jpg) 50% 0 no-repeat; background-size:100% auto; a img:hover{ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; } #top-image-bt1{ position:relative; top:115px; left:200px; } #top-image-bt2{ position:relative; top:180px; left:85px; z-index:99; } #top-image-bt3{ position:relative; top:180px; left:85px; } } #anc-top{ margin-top:-70px; padding-top:140px; } #anc-miryoku, #anc-miryoku2, #anc-miryoku3, #anc-form{ margin-top:-70px; padding-top:70px; } #course{ background-repeat:no-repeat; background-position:center bottom; background-image:url(../images/course-bg.png); } #price{ width:100%; h2{ position:relative; top:-30px; } } #school{ ul{ li{ float:left; width:48%; height:240px; margin-right:3%; margin-bottom:20px; background:#ffffff; border-bottom:3px #1591ed solid; font-size:14px; &:nth-child(2n){ margin-right:0px; } a{ &:hover{ text-decoration:none; } } p{ padding:5px; } } } } #trophy { color: #f4a025; } #certificate { color: #f48cac; } #badge { color: #5ec0fc; } /*----------------------------------------------------------*/ /*----------------------------------------------------------- form ------------------------------------------------------------*/ #mfp_phase_confirm th{ width:100% !important; background:#eee !important; } #mfp_phase_confirm td{ width:100% !important; background:#fff !important; } .mfp_buttons input[type="button"]:first-child{ padding:10px 20px; background:#EBEBEB; border-radius:5px; } .mfp_buttons input[type="button"]:last-child{ color:#fff; padding:10px 20px; background:#D80B0F; border-radius:5px; } #form{ 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{ -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; } dt{ padding:10px 0 0 10px; } dd{ padding:10px; border-bottom:1px #ddd solid; box-sizing: border-box; img{ float:right; z-index:100; position:relative; margin:-32px 10px 0 0; } } .form-in dd input, .form-in dd ol li select{ width: 100%; height: 50px; padding:0 5px; font-size:18px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:2px #ddd solid; } .form-in dd textarea{ width: 100%; padding:10px 5px; font-size:18px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:2px #ddd solid; } .radio-bt input { display: none; } .radio-bt label{ display: table-cell !important; cursor: pointer; padding: 15px 10px !important; border-top:1px #ddd solid; border-bottom:1px #ddd solid; border-left:1px #ddd solid; background: linear-gradient(#fff, #ddd); font-size: 12px; text-align: center; vertical-align:middle; border-radius: 0 !important; } .radio-bt1 label{ width: 10% !important; } .radio-bt2 label{ width: 10% !important; } .radio-bt3 label{ width: 20% !important; } .radio-bt label:first-of-type{ border-radius: 5px 0 0 5px !important; } .radio-bt label:last-of-type{ border-right:1px #ddd solid; border-radius: 0 5px 5px 0 !important; } .radio-bt input[type="radio"]:checked + .switch-on { background: #a1b91d !important; color: #fff !important; } .radio-bt input[type="radio"]:checked + .switch-off { background: #e67168 !important; color: #fff !important; } .check-bt label{ padding:20px 10px !important; border:1px #ddd solid !important; } #privacy{ margin:10px; .roll{ font-size:14px; height:180px; padding:5px; margin-top:5px; overflow:scroll; border:1px #ddd solid; box-sizing:border-box; } } } } #check-li { overflow: hidden; margin-bottom: 10px; } #check-li li{ max-width: 100%; padding: 10px; margin: 0 10px 10px 10px; color:#ffffff; font-size: 16px; font-weight: bold; text-align: center; background:#29ba8b; } /*----------------------------------------------------------*/ /*----------------------------------------------------------- footer ------------------------------------------------------------*/ #page-top{ z-index:100; position:fixed; bottom:20px; right:20px; font-size:12px; a{ color:#fff; width:80px; display:block; padding:10px 0; text-align:center; border-radius:5px; background:#7bd7ff; } } /*----------------------------------------------------------*/