@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, textarea, 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;}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;*font-size:small;*font:x-small}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:90%; max-width:1366px; margin:0 auto; padding:0;} .container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;} @media(min-width:768px){ .container{width:1366px; padding:0 68.33px;} } // COLOR @black:#000; @blackL:#222; @grayD:#606060; @gray:#ccc; @grayL:#8e8e8e; @grayLL:#eee; @white:#fff; @red:#E30000; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;} .trans1{-webkit-transition:1s; -moz-transition:1s; -o-transition:1s; -ms-transition:1s; transition:1s;} .fb{font-weight:bold;} .tac{text-align:center;} .tar{text-align:right;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{background-size:cover;} .inline{display:inline-block;} .italic{font-style:italic;} /*BASE*/ html,body{width:100%; height:100%;} body{position:relative; color:@grayLL; background:@black; font-size:15px; line-height:1; font-weight:400; font-style:normal; font-feature-settings:"palt"; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; font-family:"Helvetica Neue",Helvetica,Arial,Roboto,"Droid Sans","游ゴシック",YuGothic,"游ゴシック体","游ゴシック Medium","Yu Gothic Medium","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;} img{width:100%; max-width:100%; height:auto;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LETTER*/ strong{.fb();} .wf{font-family:"Montserrat"; font-weight:medium;} .wfs{font-family:"Cardo";} .serif{font-family:"游明朝体","游明朝","Yu Mincho",YuMincho,"Noto Serif JP",serif;} .fontsmall{font-size:85%;} .attention{color:@red!important;} ::selection{background:@grayL; color:@white;} ::-moz-selection{background:@grayL; color:@white;} /*LINK*/ a:link{color:@black; .tdu(); .trans();} a:visited{color:@black; .tdu();} a:hover{color:@gray; .tdu();} a:active{color:@black; .tdn();} a img{border:none; .tdn(); .trans();} a img:hover{opacity:0.7; .tdn();} /************************ SP NAV ************************/ button.spmenu{z-index:9991; position:fixed; height:40px; width:40px; padding:0; top:24px; right:5%; background-color:transparent; border:none; cursor:pointer; outline:none; appearance:none; div{z-index:9992; position:relative; height:12px; width:40px; span{z-index:9993; position:absolute; left:0; width:100%; height:1px; background:@white; .inline(); .trans();} span:nth-of-type(1){top:0;} span:nth-of-type(2){bottom:0;} } } button.spmenu.active{ div{ span{background:@white;} span:nth-of-type(1){-webkit-transform:translateY(5.5px) rotate(45deg); transform:translateY(5.5px) rotate(45deg);} span:nth-of-type(2){-webkit-transform:translateY(-5.5px) rotate(-45deg); transform:translateY(-5.5px) rotate(-45deg);} } } div#spnav{z-index:-1; position:fixed; top:0; right:0; width:100%; height:100%; opacity:0; visibility:hidden; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); .trans(); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6%; ul{ li{ a{display:block;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn();} a:active{color:@white; .tdn();} } } ul.mainnav{padding:60px 0 36px; li{text-align:right; letter-spacing:1px; a{padding:18px 0;} } } } div#spnav.active{z-index:9990; opacity:1; -moz-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); visibility:visible;} /*LAYOUT*/ main{z-index:1; margin:0 auto; width:100%; max-width:100%; overflow:hidden;} /*HEADER*/ header{z-index:10000; position:fixed; top:0; left:0; width:100%; padding:32px 5%; background-color:transparent; mix-blend-mode:difference; h1{position:relative; width:180px;} } /*SLIDER*/ div.topkv{padding:138px 0 0; margin:0; h2{font-size:45px; line-height:1.5; letter-spacing:2px; margin:0 0 36px; white-space:nowrap;} p{color:@grayLL; font-size:14px; line-height:2.2; letter-spacing:2px; margin:0 0 62px;} } div#sliderbox.appear{ h1{animation:blackIn 0.9s ease 0.5s forwards;} h2{animation:blackIn 0.9s ease 1.4s forwards;} } /*TOP*/ section.ttlbox{margin:0 0 48px; span{font-size:14px; margin:0 0 10px; color:@grayD; display:block;} h2{font-size:34px; letter-spacing:2px;} } div.topservice{padding:88px 0 0; ul{margin:0 0 98px; li{position:relative; margin:0 0 80px; div.bgtxt{z-index:-1; position:absolute; top:-24px; left:-5%; color:#111; font-size:56px; letter-spacing:1px; line-height:1.1; white-space:nowrap; pointer-events:none;} article{ section{z-index:1; position:relative; img{margin:0 0 40px;} h3{font-size:26px; letter-spacing:2px; line-height:1.4; margin:0 0 22px;} p{color:@grayLL; line-height:2.2; letter-spacing:1px;} div.bgbkbox{background:@blackL; margin:30px 0 0; padding:24px 20px 20px; h4{font-size:12px; margin:0 0 10px; .fb();} p{font-size:11px;} } } } } } } div.topap{background:@white; padding:64px 0 60px; border-top:1px solid @black; article{ section.ttlbox{ h2{color:@black; line-height:1.5;} } img{display:block; width:95%; margin:0 0 40px 5%;} p{color:@black; line-height:2.2; letter-spacing:1px;} } } div.topmember{background:@grayLL; padding:64px 0 10px; article{ section.ttlbox{ h2{color:@black;} } ul{ li{margin:0 0 54px; img{display:block; margin:0 0 24px;} h3{color:@black; font-size:12px; margin:0 0 10px;} h4{color:@black; font-size:18px; .fb(); margin:0 0 22px; em{padding:0 0 0 10px; font-size:12px; font-weight:normal; vertical-align:bottom;} } p{color:@grayD; font-size:12px; letter-spacing:1px; line-height:2.2;} } } } } div.topnews{padding:64px 0 0; background:@white; section.ttlbox{margin:0 0 18px; h2{color:@black;} } div.topnewslist{ ul{margin:0 0 48px; li{border-bottom:1px solid @grayD; padding:30px 0; p{color:@grayD; line-height:1.8;} h3{line-height:1.8;} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdn();} a:active{color:@black; .tdn();} } } } div.viewmore{font-size:16px; .tar(); div.circle{position:relative; width:40px; height:40px; .inline(); img{z-index:1; position:absolute; top:0; left:0; width:40px;} img.se{z-index:2; position:absolute; width:40px;} } p{padding:0 15px 0 0;} a{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; } a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdn(); opacity:0.8; div.circle{ img.se{transform:rotate(360deg);} } } a:active{color:@black; .tdn();} } } div.topcompany{padding:96px 0 64px; background:@white; section.ttlbox{margin:0 0 18px; h2{color:@black;} } } /*TABLE*/ table{width:100%; margin:0; color:@black; tr{width:100%; border-bottom:1px solid @grayD; th{width:100%; color:@grayD; display:block; padding:30px 0 15px; text-align:left; white-space:nowrap; .fb();} td{width:100%; display:block; padding:0 0 30px;} } } /*PAGES*/ div.bread{padding:118px 0 0; font-size:11px; margin:0 0 92px; section{ display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:flex-start; align-items:flex-start; span{padding:0 0 0 5px; color:@grayD; a:link{color:@grayL; .tdu();} a:visited{color:@grayL; .tdu();} a:hover{color:@white; .tdu();} a:active{color:@grayL; .tdu();} } } } .single{ div.bread{margin:0 0 48px;} } div.pagettl{position:relative; margin:0 0 120px; div.bgtxt{z-index:-1; position:absolute; top:-20px; left:0; color:@blackL; font-size:80px; letter-spacing:1px; white-space:nowrap; pointer-events:none;} h2{font-size:32px; letter-spacing:2px; margin:0 0 40px;} img{width:95%; margin:0 0 0 5%;} } .page-company{ div.pagettl{margin:0 0 80px;} } div.topmsg{padding:0 0 100px; article{ img{margin:0 0 38px;} h3{font-size:20px; letter-spacing:2px; line-height:1.8; margin:0 0 28px;} p{line-height:2; letter-spacing:2px; margin:0 0 28px; color:@grayL;} h4{color:@white; font-size:18px; .fb(); .tar(); em{padding:0 10px 0 0; font-size:12px; font-weight:normal; vertical-align:bottom;} } } } div.topcontact{margin:0 0 80px; article{background:@white; color:@black; padding:48px 5% 64px; p{line-height:2;} } } /*CONTACT*/ div.applyform{ table.mailform{margin:64px auto 0; font-size:15px; textarea{width:100%; padding:20px; resize:vertical; font-size:16px;} input{width:100%; padding:20px; font-size:16px;} input::placeholder{color:@grayL;} textarea::placeholder{color:@grayL;} span.mwform-tel-field{ input{width:auto;} } input[type="file"]{padding:0;} input[type="checkbox"]{width:auto!important; vertical-align:middle; .inline();} tr{border-bottom:none; th{color:@black; padding:0 0 16px 0;} td{padding:0 0 40px;} } } input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none; border:none; background:none; background-color:none; border-radius:0;} div.btnsubmit{position:relative; width:100%; margin:0 auto; cursor:pointer; display:block; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; input.soushin{width:auto; margin:0 10px 0 0; color:@black; font-size:16px; letter-spacing:1px; .tac(); .trans(); .fb(); font-family:"游ゴシック",YuGothic,"游ゴシック体","游ゴシック Medium","Yu Gothic Medium"; } div.circle{position:relative; width:40px; height:40px; line-height:40px; .trans(); img{z-index:1; position:absolute; top:0; left:0; width:40px; display:block;} img.se{z-index:2; position:absolute; width:40px; display:block;} } } div.btnsubmit:hover{ input.soushin{color:@gray;} div.circle{transform:rotate(360deg);} } } div.pagebody{background:@white; margin:0 auto 80px; div.newslist{padding:48px 5% 64px; ul{ li{border-bottom:1px solid @grayD; padding:30px 0; p{color:@grayD; line-height:1.8;} h3{line-height:1.8;} a:link{color:@black; .tdn();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdn();} a:active{color:@black; .tdn();} } } } article.single{position:relative; padding:48px 5% 64px; margin:0 auto; span.postdate{font-size:14px; color:@grayD; display:block; margin:0 0 12px;} h3.postttl{font-size:30px; line-height:1.6; letter-spacing:2px; color:@black; border-bottom:1px solid @grayD; padding:0 0 32px; margin:0 0 40px;} div.postbody{word-wrap:break-word; line-height:2; margin:0 0 64px; h4{font-size:24px; color:@black; line-height:1.8; letter-spacing:1px; margin:0 0 32px; .serif();} img{margin:0 0 32px;} p{color:@black; margin:0 0 32px;} p > img{margin-bottom:0;} p:last-child{margin-bottom:0;} a{.fb();} } div.share{width:fit-content; margin:0 auto 80px; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; h3{font-size:12px; color:@black; margin-right:16px;} span.border{width:36px; height:1px; background:@black; display:block;} div{margin-left:16px; a{display:block; width:40px; height:40px; border-radius:50%;} } } div.pagenavs{font-size:13px; border-bottom:1px solid @grayD; border-top:1px solid @grayD; padding:32px 0; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; div{width:32%;} div:nth-child(2){.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*/ .page-contact{ div.footcontact{display:none;} } div.footcontact{background:@white; a{display:block; padding:64px 0 80px; color:@white; .tdn(); background:url("../img/c_sp.jpg") @ncc; .bgsc(); section.ttlbox{ h2{margin:0 0 48px;} span{color:@white;} p{letter-spacing:1px;} } div.circle{position:relative; width:80px; height:80px; margin:0 0 0 auto; .trans(); img{z-index:1; position:absolute; top:0; left:0; width:80px;} img.se{z-index:2; position:absolute; width:80px;} } } a:hover{opacity:0.8; div.circle{ img.se{transform:rotate(360deg);} } } } footer{padding:64px 0 32px; div.footbox{ h1{width:162px; margin:0 0 48px;} nav{margin:0 0 64px; ul{ li{margin:0 0 24px; a{display:block;} } } } a:link{color:@grayL; .tdn(); .trans();} a:visited{color:@grayL; .tdn();} a:hover{color:@white; .tdn();} a:active{color:@grayL; .tdn();} } small{color:@grayD; font-size:12px;} } /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:768px){ html,body{min-width:1080px;} .sp{display:none!important;} header{min-width:1080px; padding:64px 5%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; h1{width:232px;} nav{ ul{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; li{margin:0 0 0 48px; a{display:block; font-size:15px; letter-spacing:1px;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@grayD; .tdn();} a:active{color:@white; .tdn();} } } } } /*SLIDER*/ div.topkv{padding:230px 0 0; margin:0; h2{font-size:64px; line-height:1; letter-spacing:6px; margin:0 0 48px;} p{font-size:16px; line-height:2.4; letter-spacing:2px; margin:0 0 96px;} } /*TOP*/ section.ttlbox{margin:0 0 80px; span{font-size:20px; margin:0 0 16px;} h2{font-size:52px; letter-spacing:3px;} } div.topservice{z-index:2; position:relative; padding:112px 0 0; ul{margin:0 0 144px; li{position:relative; margin:0 0 80px; div.bgtxt{left:0; font-size:98px; letter-spacing:2px;} article{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; section{width:48%; img{margin:0;} h3{font-size:30px; margin:12px 0 28px;} p{line-height:2;} div.bgbkbox{margin:30px 0 0;} } } } } } div.topap{padding:0; background:@white url("../img/a01.jpg") no-repeat right center; background-size:auto 80%; article{width:52%; background:@white; padding:112px 0 120px 0; section.ttlbox{margin:0 0 52px;} p{font-size:16px;} } } div.topmember{padding:96px 0 104px; article{ section.ttlbox{margin:0 0 52px; span{font-size:16px;} h2{font-size:44px;} } ul{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:29%; margin:0; img{margin:0 0 32px;} h3{font-size:14px; margin:0 0 12px;} h4{font-size:20px; margin:0 0 22px; em{padding:0 0 0 10px; font-size:16px;} } p{font-size:13px;} } } } } div.topnews{padding:96px 0 0; div.container{ 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; section.ttlbox{margin:0; span{font-size:16px;} h2{font-size:44px;} } div.topnewslist{width:66%; margin:20px 0 0 auto; ul{margin:0 0 48px; li{padding:30px 0; a{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:flex-start; align-items:flex-start; } p{line-height:1.8; width:10em;} h3{line-height:1.8;} } } } div.viewmore{ p{padding:0 15px 0 0;} } } } div.topcompany{padding:96px 0 104px; article{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; section.ttlbox{margin:0; span{font-size:16px;} h2{font-size:44px;} } div{width:66%; margin:20px 0 0 auto;} } } /*TABLE*/ table{margin:0; tr{letter-spacing:1px; th{width:auto; display:table-cell; padding:32px 0;} td{width:auto; display:table-cell; padding:32px 0;} } } /*PAGES*/ div.bread{padding:194px 0 0; font-size:11px; margin:0 0 204px; section{ display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:flex-start; align-items:flex-start; span{padding:0 0 0 5px; color:@grayD; a:link{color:@grayL; .tdu();} a:visited{color:@grayL; .tdu();} a:hover{color:@white; .tdu();} a:active{color:@grayL; .tdu();} } } } div.pagettl{ div.bgtxt{top:calc(~'50% - 95px'); font-size:200px; letter-spacing:2px;} h2{font-size:40px; letter-spacing:4px; margin:0;} img{width:55%; margin:0;} } .page-company{ div.bread{margin:0 0 24px;} div.pagettl{margin:0 0 200px; section{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } } } div.topmsg{padding:0 0 120px; section.ttlbox{margin:0; span{font-size:16px;} h2{font-size:44px;} } article{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; div{width:50%;} img{width:39%; margin:0;} h3{font-size:24px; letter-spacing:4px; margin:0 0 40px;} p{font-size:16px; line-height:2.4; margin:0 0 64px;} h4{font-size:24px; letter-spacing:1px; em{padding:0 15px 0 0; font-size:14px;} } } } div.topcontact{margin:0 0 40px; article{padding:88px 10% 96px; p{font-size:16px; line-height:2;} } } /*CONTACT*/ div.applyform{ table.mailform{font-size:16px; input{padding:24px; border:1px solid @gray;} textarea{padding:24px; border:1px solid @gray;} tr{ th{vertical-align:middle; padding:0 0 40px;} td{vertical-align:middle; padding:0 0 40px;} } } div.btnsubmit{margin:64px auto 0; width:50%; input.soushin{font-size:16px;} } } /*PAGES*/ .single{ div.pagebody{width:90%;} } div.pagebody{margin:0 auto 112px; div.newslist{padding:64px 10% 96px; ul{ li{padding:30px 0; a{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:flex-start; align-items:flex-start; } p{line-height:1.8; width:10em;} h3{line-height:1.8;} } } } article.single{margin:0 auto; padding:96px 12%; span.postdate{font-size:16px; margin:0 0 16px;} h3.postttl{font-size:36px; letter-spacing:3px; padding:0 0 56px; margin:0 0 56px;} div.postbody{margin:0 0 96px; h4{font-size:26px; margin:0 0 32px;} img{margin:0 0 32px;} img.alignleft + br{display:none;} img.alignright + br{display:none;} img.nomargin{margin-bottom:0;} img.width50{max-width:50%; height:auto;} .size-thumbnail{width:320px; height:auto;} .size-medium{width:320px; height:auto;} .size-large{width:600px; height:auto;} .aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 32px;} .alignleft{float:left; margin:0 32px 32px 0; .inline();} .alignright{float:right; margin:0 0 32px 32px; .inline();} p{font-size:16px; margin:0 0 32px;} } div.share{margin:0 auto 96px; h3{margin-right:24px;} span.border{width:60px;} } div.pagenavs{font-size:14px; padding:40px 0;} } } /*FOOTER*/ div.footcontact{ a{padding:120px 0; background:url("../img/c_pc.jpg") @ncc; .bgsc(); article{width:100%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } section.ttlbox{margin:0; h2{font-size:44px; margin:0 0 40px;} span{font-size:16px;} p{font-size:16px;} } div.circle{width:116px; height:116px; margin:0; img{width:116px;} img.se{z-index:2; position:absolute; width:116px;} } } } footer{padding:80px 0 46px; div.footbox{margin:0 0 174px; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; h1{width:232px; margin:0;} nav{margin:0; ul{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; li{margin:0 0 0 48px; a{display:block;} } } } } } } /************************ SP ************************/ @media (max-width:767px){ .pc{display:none!important;} .spmb{margin-bottom:6%;} div.applyform{ table.mailform{ textarea,input{font-size:16px; border:1px solid @gray; border-radius:0; background-image:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); background-image:-webkit-linear-gradient(left, #FFFFFF, #FFFFFF); } } } } /************************ ANIM ************************/ @keyframes blackIn{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes leftIn{ 0%{width:0%;} 100%{width:100%;} } @keyframes rotation{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} } /*----------------------------------------------------- 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% ------------------------------------------------------*/