style.css
@charset "UTF-8";
ul { list-style: none; }
.bl { text-indent: -9999px; display: block; }
body {
font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
background: #EFEFEF;
}
.wrapper {
width: 960px;
margin: 0 auto;
background: #fff;
padding: 20px;
}
/* header -------------------------------------------- */
header h1 {
background: url(../../assets/templates/swc/image/kw2017/header.png) no-repeat;
width: 960px;
height: 220px;
}
/* -------------------------------------------- header */
/* global nav ----------------------------------------------- */
nav ul {
padding: 0;
font-size: 0;
}
nav li {
display: inline-block;
margin-right: 15px;
}
nav li:last-child {
margin-right: 0px;
}
nav li a {
display: block;
width: 280px;
height: 32px;
padding: 13px 0 0 30px;
font-size: 17px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
background: #FFCC66 url(../../assets/templates/swc/image/kw2017/arrow.png) no-repeat 5px 14px;
color: #5A5A5A;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;;
text-decoration: none;
letter-spacing: 0.1em;
}
nav li a:hover {
color: #333333;
background: #FFAD7C url(../../assets/templates/swc/image/kw2017/arrow_hover.png) no-repeat 5px 14px;
}
/* ----------------------------------------------- global nav */
/* contents ------------------------------------------ */
main {
background: #F5F5F5;
}
/* top page */
section#top {
margin-top: 40px;
padding-top: 30px;
padding-bottom: 40px;
text-align: center;
}
section#top h2 {
color: #339999;
font-weight: normal;
font-size: 30px;
letter-spacing: 0.1em;
margin-top: 0;
}
section#top p {
color: #001977;
font-size: 20px;
}
section#top .table {
display: table;
border-collapse: separate;
border-spacing: 50px 0;
margin: 25px auto;
}
section#top .table figure {
display: table-cell;
}
section#top .table figcaption {
font-size: 65%;
text-align: right;
}
section#sponsors {
margin-bottom: 40px;
}
section#sponsors h2 {
color: #555555;
font-size: 20px;
padding-bottom: 10px;
background: url(../../assets/templates/swc/image/kw2017/sponsor_bg.png) no-repeat 0 30px;
}
section#sponsors p {
line-height: 1.4em;
text-align: center;
font-family: "メイリオ", sans-serif;
}
section#sponsors img {
margin-right: 15px;
}
section#sponsors img.last {
margin: 0;
}
section#sponsors img.second {
margin: 15px 0 0;
}
/* subpage */
ul#breadcrumbs {
padding: 10px 0px;
font-size: 14px;
}
ul#breadcrumbs li {
display: inline-block;
}
ul#breadcrumbs a {
color: #2B8585;
text-decoration: none;
}
ul#breadcrumbs li:not(:last-child):after {
content: "\00232A";
padding-left: 10px;
}
table.program {
border-collapse: separate;
border-spacing: 1px;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
}
table.program th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
table.program td {
width: 500px;
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
table.program p {
margin: 0 0 10px 0;
line-height: 1.5em;
}
article {
padding: 10px 25px;
margin-bottom: 40px;
}
article section {
margin-bottom: 40px;
}
article h2 {
color: #FDFDFD;
background: #339999;
height: 35px;
padding-top: 10px;
padding-left: 10px;
border-left: 5px solid #444444;
font-weight: normal;
letter-spacing: 0.05em;
}
article h3 {
color: #C94C30;
font-weight: normal;
padding-bottom: 3px;
border-bottom: solid 3px #C94C30;
}
article h4 {
background: url(../../assets/templates/swc/image/kw2017/h4_bg.png) no-repeat 0px 8px;
padding: 10px 0px 0px 20px;
margin-bottom: 0px;
}
article p {
line-height: 1.7em;
}
article a {
color: #2B8585;
text-decoration: none;
}
article img.right {
float: right;
margin: 0 0 10px 15px;
}
article#venue p {
font-size: 20px;
}
article#venue p span {
font-size: 28px;
}
/* google map */
article #map {
height: 400px;
width: 910px;
}
a.blank {
background: url(../../assets/templates/swc/image/kw2017/icon.png) left center no-repeat;
padding: 0 0 0 25px;
}
/* ------------------------------------------ contents */
/* footer -------------------------------------------- */
footer {
background: #339999;
padding: 8px;
}
footer ul {
padding: 0;
margin: 0;
}
footer li {
display: inline-block;
}
footer li a {
text-decoration: none;
padding-right: 20px;
color: #DDD;
font-size: 14px;
}
footer li a:hover {
color: #EFEFEF;
}
footer li a:before {
content: "|";
color: #DDD;
padding-right: 20px;
}
footer li:last-child a:after {
content: "|";
color: #DDD;
padding-left: 20px;
}
footer p#copy {
width: 100%;
text-align: right;
margin: 0;
}
footer small {
color: #FFCC66;
text-align: right;
}
/* -------------------------------------------- footer */