/* font ===================================*/ /* fonts */ h1, h2, h3,h4,h5, nav a, .button, .label, input[type="submit"], small, a {font-family: /*"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , */"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , 'Noto Sans Japanese', "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;/* font-weight: 500;*/} p, dt,dd,li, th, td, input, select,figcaption, .bold, div, address {font-family: /*"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , */"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , 'Noto Sans Japanese', "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; /*font-weight: 500;*/} span {font-family: inherit;} .noto {font-family: 'Noto Sans Japanese', "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;font-kerning: auto;} /* layout ===================================*/ body {text-align: center; background: #FFF !important;} body:before {content: none;} .container {width: 1000px; margin:0 auto; text-align: left;} p {color: #333; font-size: 16px; line-height: 1.8em; margin:0 0 1em;} p:nth-last-of-type(1) {margin-bottom: 0;} li {color: #333;} a, a img, input{-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease; } a img:hover, .btn-small:hover, .btn-apply:hover {opacity: 0.9;} a {color: inherit; text-decoration: none; font:inherit;} a:hover {text-decoration: none;} hr.spacer {border:none; height: 30px;} .container a img {background: rgba(255,255,255,.001);} .sp {display: none;} p.seminarlist {font-size: 14px;} /* button */ @media screen and (min-width:768px) and ( max-width:1024px) { .container {width: 100%; padding:0; /*overflow: hidden;*/} img {max-width: 100%; height: auto;} } @media screen and (max-width: 768px) { body {padding:0;} .container {width: 100%; padding:0; } img {max-width: 100%; height: auto;} p {font-size: 14px; line-height: 1.5em;} .sp {display: block;} .pc {display: none;} } /*================================== header ==================================*/ header {padding:18px 0; width: 100%; background: #FFF; transition: all 0.2s ease;} header .container {display: flex; justify-content: space-between;} header .info {align-self: flex-end; flex-basis: 550px; text-align: right;} header .info .above {color: #1b91d0; display: block; font-size: 15px; font-weight: 700; margin-bottom: 17px;} header .info .above:before {content: ""; width: 13px; height: 19px; display: inline-block; background: url(../images/icon_green.png) center no-repeat; margin-right: 12px; vertical-align: middle;} header .info h1 {font-size: 14px;} /* fixed */ header.fixed {position: fixed; top: 0; box-shadow: 0 0 10px -2px rgba(0,0,0,0.4); padding:8px 0; z-index: 2;} @media screen and (max-width: 767px) { header {padding:3%; width: 94%;} header .logo {flex-basis: 55%; display: flex; align-items: center;} header .info {display: none;} header .button { position: relative; background-color: #f7d034; border-radius: 4px; color: #000; line-height: 38px; -webkit-transition: none; transition: none; box-shadow: 0 3px 0 #f7ba59; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); font-size: 12px; flex-basis: 42%; text-align: center; } /* fixed */ header.fixed {padding:8px 3%; } } @media screen and (min-width:768px) and ( max-width:1024px) { header {padding:18px 3%; width: 94%;} header .info {align-self: flex-end; flex-basis: 510px; text-align: right;} header .info .above {font-size: 13px;margin-bottom: 0.5em;} header .info h1 {font-size: 12px;} header .button {display: none;} /* fixed */ header.fixed {padding:8px 3%; width: 94%;} } /*================================== promotion ==================================*/ .apply.common {background: #f8f6cb; } .apply.common .container {position: relative;padding:45px 0; z-index: 1;} .apply.common .container:after {content: ""; width: 211px; height: 307px; display: block; position: absolute; right: -30px; bottom: 0; background: url(../images/apply_icon.png) center no-repeat; z-index: -1;} .apply.common .above {margin-bottom: 10px;} .apply.common .button {margin-bottom: 20px;} .apply.common .below {font-size: 18px; font-weight: 800;text-indent: 65px;} @media screen and (max-width: 767px) { .apply.common {padding:5% 3%;} .apply.common .container {padding:5% 3%;zoom:0.8; width: 94%;} .apply.common .container:after {content: none} .apply.common .below {font-size: 18px; font-weight: 800;text-indent: 0;} } @media screen and (min-width:768px) and ( max-width:1024px) { .apply.common {background: #f8f6cb; overflow:hidden; padding:5% 3%;} .apply.common > .container {position: relative;padding:45px 3%; width:94%; z-index: 1; zoom:0.8;} .apply.common > .container:after {zoom:0.9;} } /*================================== footer ==================================*/ footer {background: #343434; padding:20px 0; color: #FFF; font-size:12px;} .scroller {position: fixed; right: -112px; bottom: 1em; font-size: 0px;} .scroller.active {right: 2rem; display: block;} @media screen and (max-width: 767px) { footer {padding:3%; font-size: 11px; line-height: 1.4em;} .scroller {right: -40px; } .scroller img {height: 20px; width: auto;} .scroller.active {right: 0px; top:auto !important;} } /******************************************* OPTIONAL *******************************************/ .wrap::-webkit-scrollbar{width:5px;background:#eee} .wrap::-webkit-scrollbar:horizontal{width:5px;background:#eee} .wrap::-webkit-scrollbar-thumb{background:#eee;border-radius:2px} .wrap::-webkit-scrollbar-thumb:horizontal{background:#999;border-radius:2px} .wrap::-webkit-scrollbar-track-piece:start{background:#eee} .wrap::-webkit-scrollbar-track-piece:end{background:#eee} .wrap::-webkit-scrollbar-corner{background:0 0} /* shadow */ .shadow{box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.2)} /* size */ .full-width {width: 100%;} /* text */ .center {text-align: center !important;} .bold {font-weight:bold;} .underline {text-decoration: underline;} .red {color:#d62a16} .yellow {color: #FFFF00} /* font size */ .q18 {font-size:18px !important;} /* clearfix */ .clear {clear:both;} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7*/