@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} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} // COLOR @black:#000; @white:#fff; @gray:#CCC; @grayD:#777; @red:#B93232; @navy:#0e0d6a; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.3s; transition:0.3s;} .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: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-size:16px; font-style:normal; font-feature-settings:"palt"; background:@white; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; font-family:"游ゴシック Medium","YuGothic M","游ゴシック体","YuGothic","Helvetica Neue",Helvetica,"Droid Sans",Arial,Avenir,Verdana,Roboto,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","Meiryo UI","メイリオ",Meiryo,sans-serif;} img{width:100%; 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();} .arrow{font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} .attention{color:@red;} .fontgray{color:@gray;} .fontsmall{font-size:85%!important;} .fontlarge{font-size:124%!important;} .italic{font-style:italic;} ::selection{background:@black; color:@white;} /*LINK*/ a:link{color:@black; .tdu();} a:visited{color:@black; .tdu();} a:hover{color:@black; .tdu();} a:active{color:@black; .tdn();} a img{border:none; .tdn(); .trans();} a img:hover{opacity:0.6; .tdn();} div.wrapper{width:100%; margin:0 auto; clear:both; display:block; overflow:hidden;} header{width:100%; h1{width:270px; margin:20px auto;} } div.main{width:300px; margin:0 auto; article{margin:0 auto 30px; background:@navy url("../img/bg.jpg") @ncc; .bgsc(); border-radius:24px; padding:36px; div{margin:0 0 24px; position:relative; width:100%; input[type="image"]{width:100%; position:relative; -webkit-appearance:button; cursor:pointer; outline:none; border:none; background:none; background-color:none; border-radius:0;} } /*** div::before{content:""; display:block; position:relative; width:30px; height:30px; background:url("../img/a.png") @ncc; .bgsc();}***/ div:last-child{margin:0;} } div.logo{width:72px; margin:0 auto 30px;} } div.voice{width:350px; margin:0 auto; article{margin:0 auto 0; padding:36px 36px 16px; h2{font-size:20px; letter-spacing:1px; margin:0 0 40px; .tac(); .fb(); color:@navy;} div.btn{margin:0 auto 18px; input[type="button"]{width:100%; position:relative; -webkit-appearance:button; cursor:pointer; outline:none; border:none; background:none; background-color:none; border-radius:0; background:@navy; color:@white; .fb(); letter-spacing:1px; border-radius:36px; padding:14px 0; font-size:14px; } } div.btn:hover{opacity:0.6;} } nav{margin:0 auto 30px; ul{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; li{width:30%; margin:0 5px 20px; .tac(); a{font-size:13px; letter-spacing:1px; .fb();} a:link{color:@navy; .tdu();} a:visited{color:@navy; .tdu();} a:hover{color:@grayD; .tdu();} a:active{color:@navy; .tdn();} } li.back{width:100%; margin:0 auto;} } } div.logo{width:72px; margin:0 auto 30px;} } footer{width:100%; border-top:4px solid @navy; padding:24px 0; .tac(); small{font-size:9px; .fb();} } /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:769px){ html,body{font-size:16px;} .sp{display:none!important;} div.wrapper{max-width:377px; border-left:1px solid @gray; border-right:1px solid @gray;} } /************************ SP ************************/ @media (max-width:768px){ .pc{display:none;} .spmb{margin-bottom:6%;} }