@charset "UTF-8"; /* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;} /* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}#yui3-css-stamp.cssfonts{display:none} /*12 COLUMN :RESPONSIVE GRID SYSTEM DEVELOPER :DENIS LEBLANC URL :http://responsive.gs VERSION :3.0 LICENSE :GPL & MIT */ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .container{width:100%; max-width:1020px; margin:0 auto; padding:0 5%;} .container:after{content:"";display:table;clear:both;} @media(min-width:769px){ .container{width:1020px; padding:0 20px;} } @font-face { font-family: 'fontello'; src: url('font/fontello.eot?19759268'); src: url('font/fontello.eot?19759268#iefix') format('embedded-opentype'), url('font/fontello.woff2?19759268') format('woff2'), url('font/fontello.woff?19759268') format('woff'), url('font/fontello.ttf?19759268') format('truetype'), url('font/fontello.svg?19759268#fontello') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-down-open-big:before { content: '\e800'; } /* '' */ .icon-up-open-big:before { content: '\e801'; } /* '' */ .icon-right-small:before { content: '\e802'; } /* '' */ .icon-up-small:before { content: '\e803'; } /* '' */ .icon-left-small:before { content: '\e804'; } /* '' */ .icon-down-small:before { content: '\e805'; } /* '' */ .icon-cancel:before { content: '\e806'; } /* '' */ .icon-play:before { content: '\e807'; } /* '' */ .icon-pause:before { content: '\e808'; } /* '' */ .icon-record:before { content: '\e809'; } /* '' */ .icon-to-end:before { content: '\e80a'; } /* '' */ .icon-to-start:before { content: '\e80b'; } /* '' */ .icon-fast-forward:before { content: '\e80c'; } /* '' */ .icon-fast-backward:before { content: '\e80d'; } /* '' */ .icon-play-circled2:before { content: '\e80e'; } /* '' */ .icon-video:before { content: '\e80f'; } /* '' */ .icon-chart-bar:before { content: '\e810'; } /* '' */ .icon-mail:before { content: '\e811'; } /* '' */ .icon-twitter:before { content: '\f099'; } /* '' */ .icon-play-circled:before { content: '\f144'; } /* '' */ .icon-youtube-play-1:before { content: '\f16a'; } /* '' */ .icon-instagram:before { content: '\f16d'; } /* '' */ .icon-handshake-o:before { content: '\f2b5'; } /* '' */ // COLOR @black:#222; @white:#FFF; @gray:#ccc; @grayD:#999; @grayL:#ddd; @grayLL:#eeedeb; @red:#a00; @yellow:#FDDD54; @pink:#d01e6f; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s;} .fb{font-weight:700;} .tac{text-align:center;} .tar{text-align:right;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{-webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; -o-background-size:cover; background-size:cover;} .inline{display:-moz-inline-box; display:inline-block;} /*BASE*/ html,body{height:100%; width:100%; margin:0;} body{color:@black; line-height:1; -webkit-text-size-adjust:100%; font-weight:400; font-style:normal; font-feature-settings:"palt"; background:@white url("../img/bg/math.jpg") @ncc; .bgsc(); font-family:"Helvetica Neue",Helvetica,Roboto,"Droid Sans",a-otf-gothic-bbb-pr6n,Arial,Avenir,Verdana,"游ゴシック Medium","YuGothic M","游ゴシック体","YuGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","Meiryo UI","メイリオ",Meiryo,sans-serif;} img{max-width:100%; height:auto; vertical-align:middle;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LETTER*/ strong{.fb()} .wf{font-family:"roc-grotesk"; font-weight:500!important;} .midashi{font-family:"a-otf-midashi-go-mb31-pr6n"; font-weight:600!important;} .attention{color:@red;} .fontsmall{font-size:85%!important;} .fontlarge{font-size:124%!important;} .italic{font-style:italic;} ::selection{background:@pink; color:@white;} ::-moz-selection{background:@pink; color:@white;} /*LINK*/ a:link{color:@black; .tdu(); .trans();} a:visited{color:@black; .tdu();} a:hover{color:@pink; .tdu();} a:active{color:@black; .tdn();} a img{border:none; .tdn(); .trans();} a img:hover{opacity:0.6; .tdn();} /*HEADER*/ header{z-index:200; position:fixed; top:0; left:0; padding:6%; width:100%; h1{position:relative; width:120px; float:left;} nav{position:relative; float:right; i{font-size:170%;} } } /*TOP KV*/ div.topteaser{position:relative; width:100%; height:100%; overflow:hidden; div.topkv{position:relative; width:100%; height:100%; overflow:hidden; div.topkvtxt{z-index:1; position:absolute; bottom:15%; right:6%; h1{font-size:16px; line-height:1.85; letter-spacing:2px; margin:0 0 15px; text-align:right; span{display:block; margin:0 0 7px;} } h2{font-size:19px; line-height:1.85; letter-spacing:1px; text-align:right;} } } } /*LAYOUT*/ main{position:relative; clear:both; display:block;} /*TOPBOX*/ div.topbox{background:rgba(255,255,255,0.8); padding:10%; margin:0 0 15%; border:4px solid @black; border-radius:16px; h2{font-size:330%; margin:0 0 5%; text-align:right;} h3{font-size:139%; margin:0 0 15%; color:@white; text-align:right; span{background:@black; letter-spacing:1px; padding:0 3px 2px;} } p{line-height:1.7;} } #contact{ p{letter-spacing:1px; text-align:right;} } ul.wedo{margin:0 0 5%; li{margin:0 0 12%; i{font-size:300%; margin-right:2px;} h4{font-size:139%; line-height:1.6; margin:0 auto 5%; .tac();} p{line-height:1.7; .fb();} section:first-child{width:120px; height:120px; line-height:119px; background:#eee; border-radius:50%; margin:0 auto 7.5%; .tac();} } li:first-child{ i{margin-right:3px;} section:first-child{line-height:116px;} } li:last-child{margin:0; i{margin-right:8px;} section:first-child{line-height:118px;} } } div.topworks{ p{margin:0 auto 7.5%;} p:last-child{margin:0;} div.linkbtn{margin:0 auto 2.5%;} ul.works{margin:0 15% 10%; li{margin:0 auto 2.5%; img{border-radius:10px;} } } } ul.logos{display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center; li{width:28%; margin:0 8% 8% 0;} li:nth-child(3n){margin:0 0 8%;} } /*BTN*/ div.linkbtn{width:100%; margin:0 auto; font-size:139%; .tac(); a{display:block; padding:20px 0 16px; border:3px solid @black;} a:link{color:@black; .tdn(); .trans();} a:visited{color:@black; .tdn();} a:hover{color:@white; .tdn(); background:@pink; border:3px solid @pink;} a:active{color:@white; .tdn();} } div.backbtn{width:100%; margin:0 auto 15%; font-size:154%; .tac(); a{display:block; padding:20px 0; border:3px solid @white;} a:link{color:@white; .tdn(); .trans();} a:visited{color:@white; .tdn();} a:hover{color:@pink; .tdn(); background:@white; border:3px solid @pink;} a:active{color:@white; .tdn();} } /*TABLE*/ table{width:100%; margin:0; tr{width:100%; line-height:1.85; border-top:1px solid @black; border-bottom:1px solid @black; th{padding:12px; text-align:right; white-space:nowrap; .fb();} td{padding:12px;} } } /*PAGE*/ div.pagebody{margin:6% auto 18%; article{ div.postbody{ p{font-size:15px; line-height:1.8; margin:0 0 6%;} } } } /*INTERVIEW*/ ul.interviewlist{margin:0 0 15%; li{margin:0 0 6%; border-top:1px solid @grayLL; padding:6% 0 0; a{font-size:14px; section:first-child{margin:0 0 15px;} section{ h3{font-size:15px; line-height:1.7; .fb();} span.postdate{display:block; font-size:13px; margin:0 0 10px; font-weight:400!important; color:@grayL;} } } a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdn();} a:active{color:@black; .tdn();} } } /*PAGENATION*/ div.pagenation{padding:6% 0; border-top:1px solid @grayL; border-bottom:1px solid @grayL; font-size:15px; display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; div{width:33%;} div:nth-child(2){width:34%; .tac();} div:last-child{.tar();} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdn();} a:active{color:@black; .tdn();} } /*FOOTER*/ footer{position:relative; padding:6% 0; text-align:right;} /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:769px){ html,body,header{min-width:1020px;} body{background-attachment:fixed;} .sp{display:none!important;} /*HEADER*/ header{width:100%; padding:40px 6%; h1{width:180px;} nav{ i{font-size:220%;} } } /*TOP KV*/ div.topteaser{ div.topkv{ div.topkvtxt{bottom:18%; right:6%; h1{font-size:20px; line-height:1.3; letter-spacing:3px; margin:0 0 20px; text-align:right; span{margin:0 0 15px;} } h2{font-size:25px; line-height:1.85; letter-spacing:1px; text-align:right; padding-right:5px;} } } } /*TOPBOX*/ div.topbox{margin:0 0 12%; padding:7.5%; h2{font-size:400%; margin:0 0 3%; letter-spacing:2px;} h3{font-size:162%; margin:0 0 9%; span{letter-spacing:2px; padding:0 3px 2px 5px;} } p{line-height:1.8;} } ul.wedo{margin:0; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:31%; margin:0; h4{font-size:169%;} p{line-height:1.8;} } } div.topworks{ p{margin:0 auto 5%; .tac(); text-align:right;} div.linkbtn{margin:0 0 1% auto;} ul.works{margin:0 auto 5%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:32%; margin:0;} } } ul.logos{display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center; li{width:16%; margin:0 5% 5% 0;} li:nth-child(3n){margin:0 5% 5% 0;} li:nth-child(5n){margin:0 0 5%;} } /*TABLE*/ table{width:66%; margin:0 0 0 auto; font-size:124%; tr{text-align:right; th{padding:20px;} td{padding:20px;} } } div.linkbtn{width:50%; margin:0 0 0 auto; font-size:200%;} div.backbtn{width:50%; margin:0 0 0 auto; font-size:500%; a{padding:30px 0;} } /*INTERVIEW*/ ul.interviewlist{margin:0 0 15%; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:flex-start; align-items:flex-start; li{width:47.5%; margin:0 5% 5% 0; padding:0; border-top:none; a{font-size:14px; section:first-child{margin:0 0 20px;} section{ h3{font-size:20px;} span.postdate{font-size:14px; margin:0 0 10px;} } } } li:nth-child(even){margin:0 0 5% 0;} } /*FOOTER*/ footer{padding:3% 0; .tac();} } /************************ SP ************************/ @media (max-width:768px){ .pc{display:none!important;} .spmb{margin-bottom:6%;} body{background:none;} body::before{ content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat:no-repeat; background-image:url("../img/bg/mathsp.jpg"); .bgsc(); } } /************************ VIDEO ************************/ div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; height:0;} div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%} /************************ GG MAP ************************/ .ggmap{position:relative; height:0; overflow:hidden; padding-top:0px; padding-bottom:50%;} .ggmap iframe, .ggmap object, .ggmap embed{position:absolute; top:0; left:0; width:100%!important; height:100%!important;} /*----------------------------------------------------- 6px = 46.1% 7px = 53.8% 8px = 61.5% 9px = 69.2% 10px = 77% 11px = 85% 12px = 93% 13px = 100% 14px = 108% 15px = 116% 16px = 123.1% 17px = 131% 18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6% 22px = 167% 23px = 174% 24px = 182% 25px = 189% 26px = 197% ------------------------------------------------------*/