@charset "UTF-8"; /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html{color:#000;background:#333}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} /*------------------------------------------------------ Base (Mobile First) ------------------------------------------------------*/ body{ color: #aaa; width: 100%; line-height: 1.6; text-align: center; -webkit-text-size-adjust: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; } h1 { font-size: 1.5em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1.12em; } h5 { font-size: .75em; } h6 { font-size: .6em; font-weight: normal; } h1, h2, h3, h4, h5 { font-weight: bold; line-height: 1.4; } img{ width:99px; vertical-align: bottom; } a{ color: #c2141d; } a:visited{ color: #c2141d; } /* clearfix */ .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only */ .clearfix { *zoom: 1; } .btnGood,.btnBad{ display: inline-block; text-decoration: none; color: #FFF; width: 120px; height: 120px; line-height: 120px; border-radius: 50%; text-align: center; font-weight: bold; vertical-align: middle; overflow: hidden; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); transition: .4s; font-size: 2.0em; } .btnGood{ background: #ff8181; border-bottom: solid 3px #bd6565; } .btnBad{ background: #8181ff; border-bottom: solid 3px #6565bd; } } .btnGood:active,.btnBad:active{ -ms-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); border-bottom: none; } /* header ================================================ */ header { background: #c2141d; color: #ccc; text-align: center; } } /* nav ================================================ */ nav { } /* contents ================================================ */ main { } /* footer ================================================ */ footer { } section { margin-top:1em; } section#btn { text-align: center; } /*------------------------------------------------------ Tablet ~ ------------------------------------------------------*/ @media screen and (min-width:768px) { /* タブレット端末から効くスタイル */ } /*------------------------------------------------------ PC ------------------------------------------------------*/ @media screen and (min-width:920px) { /* PCから効くスタイル */ }