@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Lobster|Oswald:400,700");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
input, select {
vertical-align:middle;
} html {
width: 100%;
height: 100%;}
body {
width: 100%;
height: 100%;
text-align: left;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 14px;
line-height: 1.8em;
color: #050000;
-webkit-text-size-adjust: 100%;
background-color: #999;}
body.single,
body.page {
background-color: #fff;}
a {
color: #000000;
text-decoration: none;
outline: none;}
a:hover {
color: #EE3F23;
text-decoration: none;
outline: none;}
a:active {
background-color: transparent;
outline: none;}
.clear {clear: both;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
img {
margin: 0;
padding: 0;
vertical-align: bottom;} .pc_only {display: inline;} .pc_tab_only {display: inline;} .tab_only {display: none;} .sp_only {display: none;} .tab_sp_only {display: none;} #btn_gnav {
z-index: 10000;
position: fixed;
top: 20px; left: 20px;
width: 50px;
height: 60px;
cursor: pointer;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/btn_gnav.png) no-repeat left top;}
#gnav {
z-index: 1000;
display: none;
position: fixed;
top: 110px; left: 30px;
width: auto;
height: auto;}
#gnav li {
font-family: 'Oswald';
font-size: 18px;
line-height: 1.5em;
text-align: left;}
#gnav li a {
display: block;
width: auto;
padding: 5px 0;
color: #000000;
opacity: 0.9;}
#gnav li a:hover {
color: #EE3F23;
opacity: 1;}  .btn_back {
z-index: 100;
position: absolute;
top: 20px; right: 20px;
width: 50px;
height: auto;}
.btn_next {
z-index: 100;
position: absolute;
bottom: 20px; right: 20px;
width: 50px;
height: auto;}
.btn_back img,
.btn_next img {
width: 100%;
height: auto;} #top_contents_logo {
position: absolute;
top: 0px; left: 0px;
width: 40%;
height: 100%;
min-height: 700px;
background-color: #ffffff;}
#top_contents_logo h1 {
position: absolute;
top: 50%; left: 50%;
width: 260px;
height: 210px;
color: #000;
font-size: 10px;
font-weight: bold;
line-height: 1.3em;
letter-spacing: 0.3em;
text-align: center;
margin: -105px 0 0 -130px;} #top_contents {
width: 60%;
height: 100%;
min-height: 700px;
padding-left: 40%; }
#top_contents_top {
position: relative;
width: 100%;
height: 25%;}
@media screen and (min-width:1051px) {
#top_contents_top {
display: flex;
width: 100%;
}
}
#top_contents_middle {
width: 100%;
height: 50%;}
#top_contents_bottom {
width: 100%;
height: 25%;}
.top_contents_ttl {
width: 100%;
line-height: 1.1em;
color: #EE3F23;
font-family: 'Lobster';
margin: auto auto 10px auto;
text-align: center;
}
.top_contents_ttl_jp {
color: #ffffff;
font-size: 10px;
font-weight: bold;
line-height: 1.3em;
letter-spacing: 0.2em;
text-align: center;
padding: 3px 15px 2px 15px;
background-color: rgba(238,63,35,0.9);
margin: 0 auto auto;
width: fit-content;
}
.top_contents_ttl_event {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 120px;
line-height: 1.1em;
color: #EE3F23;
font-family: 'Lobster';
text-align: center;}
.top_contents_ttl_event_jp {
background-color: rgba(238,63,35,0.9);
position: absolute;
top: 50%;
left: 0;
right: 0;
color: #ffffff;
height: 17px;
font-size: 10px;
font-weight: bold;
line-height: 1.3em;
letter-spacing: 0.2em;
text-align: center;
padding: 5px 15px 0 15px;
width: fit-content;
}
#top_contents div div {
position: relative;} #top_contents_new {
cursor: pointer;
float: left;
width: 50%;
height: 100%; overflow: auto;}
@media screen and (min-width:1051px) {
#top_contents_new {
float: none;
}
#top_contents_top .group01 {
display: flex;
width: 50%;
}
}
#top_contents_new.active {
background: #EE3F23 url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_top_news_active.png) no-repeat center center;}
#top_contents_new p.top_contents_ttl {
font-size: 26px;
color: #ffffff;
margin-top: -42px;}
#top_contents_new p.top_contents_ttl_jp {
width: auto;
margin: 25px 0 0 -40px;
background: none;} #top_contents div div#whats_new {    background-color: rgba(0,0,0,0.85);
}
#whats_new h2 {
width: 100%;
padding: 40px 0;
line-height: 2em;
color: #cccccc;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;}
#whats_new h2 span.whats_new_ttl {
font-size: 28px;
color: #ffffff;
font-family: 'Lobster';
font-weight: normal;
letter-spacing: 0.1em;}
#whats_new ul {
padding-bottom: 30px;
width: 100%;}
#whats_new ul li {
width: 70%;
margin: 0 auto 30px auto;}
#top_contents div div div.news_img {
float: left;
width: 30%;
max-width: 150px;
height: auto;}
#top_contents div div div.news_img img {
width: 100%;
height: auto;}
#top_contents div div div.news_text {
float: right;
width: 60%;
padding: 0;}
#top_contents div div div.news_text time {
font-size: 10px;
line-height: 1.2em;
color: #cccccc;
letter-spacing: 0.1em;
text-align: left;}
#top_contents div div div.news_text h3 {
font-size: 12px;
line-height: 1.5em;
color: #ffffff;
letter-spacing: 0.1em;
text-align: left;
padding-top: 5px;}
#top_contents div div div.news_text p {
font-size: 11px;
line-height: 1.5em;
color: #cccccc;
letter-spacing: 0.1em;
text-align: left;
padding-top: 5px;} #top_contents_store {
float: left;
width: 25%;
height: 100%;}
#top_contents_store a {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/7567_b.jpg) no-repeat left bottom;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_store a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/7567.jpg) no-repeat left bottom;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_store p.top_contents_ttl {
font-size: 32px;
}
#top_contents_store p.top_contents_ttl_jp {
width: 90px;
} #top_contents_studio {
float: left;
width: 25%;
height: 100%;}
@media screen and (min-width:1051px) {
#top_contents_store {
float: none;
width: 50%;
}
#top_contents_studio {
float: none;
width: 50%;
}
}
#top_contents_studio a {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/tiny_b.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_studio a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/tiny.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_studio p.top_contents_ttl {
font-size: 26px;
}
#top_contents_studio p.top_contents_ttl_jp {
width: 140px;
} #top_contents_amegare {
width: 100%;
height: 100%;}
#top_contents_amegare a {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/7108_b.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_amegare a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/7108.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_amegare p.top_contents_ttl {
font-size: 60px;
} #top_contents_fence {
float: left;
width: 33.33333333%;
height: 100%;}
#top_contents_fence a {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background-color: #666;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/fence-02.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_fence a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/fence-01.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_fence p.top_contents_ttl_event {
font-size: 30px;
}
#top_contents_fence p.top_contents_ttl_event_jp {
} #top_contents_storage,
#top_contents_Youtube {
float: left;
width: 33.3333%;
height: 100%;
}
#top_contents_Youtube a {
background-color: #fff;
align-items: center;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_Youtube a .top_contents_ttl {
width: 100%;
}
#top_contents_Youtube a .top_contents_ttl_jp {
width: fit-content;
}
#top_contents_storage a {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/storage_b.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_storage a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/storage_a.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_storage p.top_contents_ttl,
#top_contents_fence p.top_contents_ttl {
font-size: 30px;
}
#top_contents_storage p.top_contents_ttl_jp {
width: auto;
} #top_contents_company {
float: left;
width: 33.3333%;
height: 100%;}
#top_contents_company a {
display: block;
width: 100%;
height: 100%;
background-color: #333333;}
#top_contents_company a:hover {
background-color: #EE3F23;}
#top_contents_company p {
position: absolute;
top: 50%; left: 0px;
width: auto;
height: 20px;
font-size: 10px;
line-height: 1.8em;
letter-spacing: 0.1em;
color: #cccccc;
text-align: left;
padding: 0 10px 0 30px;}
@media screen and (max-width: 1150px) {
#top_contents_company p {
padding: 0 10px;}
}
#top_contents_company p#top_contents_company_name span.top_contents_company_logo {
color: #ffffff;
font-size: 15px;
font-family: 'Oswald';
padding-right: 10px;}
#top_contents_company p#top_contents_company_name {
margin-top: -48px;}
#top_contents_company p#top_contents_company_work {
margin-top: -20px;}
#top_contents_company p#top_contents_company_address {
margin-top: 20px;}
#top_contents_company p#top_contents_company_more {
position: absolute;
top: auto; bottom: 10px; right: 15px;
font-family: 'Oswald';
width: auto;
font-size: 12px;
line-height: 1.1em;
text-align: right;
padding: 0;} #americangarage01 {
position: relative;
width: 100%;
height: 100%;
min-height: 800px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare01.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;}
#amegare01_contents_wrap {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0; left: 0;
width: 50%;
min-width: 640px;
height: 100%;
padding-left: 200px;}
#amegare01_contents {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.70);}
#icon_steelspan {
display: block;
position: absolute;
top: 50%; left: 40px;
width: 180px;
height: auto;
margin-top: -260px;}
#icon_steelspan img {
width: 100%;
height: auto;}
#americangarage01 h2 {
position: absolute;
top: 50%; left: 40px;
width: 80%;
max-width: 380px;
height: auto;
margin-top: -150px;}
#americangarage01 h2 img {
width: 100%;
height: auto;}
#amegare01_text_box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 50%;
padding: 0 35px 0 40px;
margin-top: -40px;}
#amegare01_text_box p {
font-size: 12px;
line-height: 1.8em;
letter-spacing: 0.1em;
text-align: left;
color: #ffffff;
padding-bottom: 10px;} #americangarage02 {
position: relative;
width: 100%;
height: 100%;
min-height: 700px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare02.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;}
#americangarage02 h2 {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: auto;}
#americangarage02 h2 img {
width: 100%;
height: auto;}
#steelcarports_logo {
position: absolute;
bottom: 50px; right: 120px;
width: 160px;
height: 140px;} #americangarage03 {
position: relative;
width: 100%;
height: 100%;
min-height: 1250px;
margin-bottom: 10px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03.jpg) no-repeat right center;
-webkit-background-size: cover;
background-size: cover;}
#americangarage03 h2 {
position: absolute;
bottom: 35px; left: 30px;
width: 40%;
height: auto;
text-align: left;}
#americangarage03 h2 img {
width: 100%;
max-width: 680px;
height: auto;}
#americangarage03_contents_wrap {
position: relative;
width: 50%;
margin-left: 50%;
height: 100%;
background-color: rgba(0,0,0,0.70);}
@media screen and (min-width:1051px) {
#americangarage03_contents {  position: absolute;
text-align: center;
top: 50%;
transform: translateY( -50%);
-webkit-transform: translateY( -50%);
}
}
#americangarage03_contents h3 {
width: auto;
font-size: 12px;
line-height: 1.5em;
font-weight: bold;
color: #ccc;
letter-spacing: 0.1em;
padding: 0 0 10px 5px;
border-bottom: 1px solid #ccc;}
#amegare_cm {
width: 90%;
max-width: 550px;
margin: 0 auto;}
#amegare_cm ul {
width: 440px;
font-size: 10px;
line-height: 2.5em;
color: #ccc;
letter-spacing: 0.1em;
margin: 0 auto;
padding: 30px 0 0 20px;}
#amegare_cm ul li {
float: left;
width: 200px;
margin-right: 20px;}
#amegare_cm ul li img {
width: 100%;
height: auto;}
#amegare_catalog {
width: 90%;
max-width: 550px;
margin: 0 auto;}
#amegare_catalog ul {
width: 440px;
font-size: 10px;
line-height: 2.5em;
color: #ccc;
letter-spacing: 0.1em;
margin: 0 auto;
padding: 30px 0 0 20px;}
#amegare_catalog ul li a {
color: rgba(255,255,255,1);}
#amegare_catalog ul li img {
height: auto;
max-width: 100px;}
#amegare_shop {
width: 90%;
max-width: 550px;
margin: 0 auto;
padding-top: 0px;}
ul#amegare_shop_01 {
width: auto;
height: auto;
padding: 25px 0 0 20px;}
ul#amegare_shop_01 li {
width: 300px;
margin-bottom: 10px;}
ul#amegare_shop_01 li img {
width: 100%;
height: auto;}
ul#amegare_shop_01 li a {
display: block;
height: 50px;
color: #fff;
padding: 0 0 0 15px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_m.png) no-repeat left 18px;}
ul#amegare_shop_01 li a:hover {
color: #EE3F23;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_m_o.png) no-repeat left 18px;}
ul#amegare_shop_02 {
width: auto;
height: auto;
padding: 10px 0 0 20px;}
ul#amegare_shop_02 li {
float: left;
width: 50%;
font-size: 12px;
line-height: 1.5em;
letter-spacing: 0.1em;
margin-bottom: 10px;}
ul#amegare_shop_02 li.no_hp {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 16px;
color: #fff;
padding: 0 0 0 20px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s.png) no-repeat left 2px;}
ul#amegare_shop_02 li a {
display: block;
height: 16px;
color: #fff;
padding: 0 0 0 20px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s.png) no-repeat left 2px;}
ul#amegare_shop_02 li a:hover {
color: #EE3F23;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s_o.png) no-repeat left 2px;}
#amegare_shop_wanted {
width: auto;
height: auto;
padding: 25px 15px 20px 25px;
margin-top: 20px;
background-color: #fff;}
#amegare_shop_wanted h4 {
width: auto;
height: auto;
color: #333;
font-size: 18px;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 0;}
#amegare_shop_wanted p {
width: auto;
height: auto;
color: #666;
font-size: 12px;
line-height: 1.8em;
letter-spacing: 0.1em;
padding-top: 5px;}
#amegare_shop_wanted p a,
#amegare_shop_wanted p a:hover {
text-decoration: underline;}
#garageone {
width: 90%;
max-width: 550px;
padding: 70px 0 0 0;
margin: 0 auto;}
#garageone p {
width: 190px;
height: 30px;
margin: 20px auto;} #company {
position: relative;
width: 100%;
height: 100%;
min-height: 800px;
background-color: #fff;}
#company_ttl {
position: relative;
width: 100%;
height: 30%;
background-color: #e6e6e6;}
#company h2 {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 80px;
color: #999;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: center;
margin-top: -30px;}
#company h2 span.company_ttl_en {
font-family: 'Oswald';
font-size: 35px;
font-weight: normal;
color: #000;
line-height: 1.5em;}
#company_contents {
width: 100%;
height: 70%;}
#company_officeota_lastlogo {
position: relative;
float: left;
width: 35%;
height: 100%;}
#company_officeota_lastlogo_in {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 70px;
margin-top: -35px;}
#company_contents h3 {
width: 200px;
height: 70px;
color: #000;
font-size: 10px;
font-weight: bold;
line-height: 2.5em;
letter-spacing: 0.3em;
text-align: left;
margin: 0 auto;}
#company_contents h3 img {
width: 100%;
height: auto;}
#company_dl {
position: relative;
float: left;
width: 30%;
height: 100%;}
#company_contents dl {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 550px;
font-size: 12px;
letter-spacing: 0em;
line-height: 1.5em;
margin-top: -275px;}
#company_contents dl dt {
width: auto;
font-weight: bold;
color: #000;
padding: 0 30px 0 20px;}
#company_contents dl dd {
width: auto;
color: #666;
padding: 4px 30px 15px 20px;}
#company_ul {
position: relative;
float: left;
width: 35%;
height: 100%;}
ul#company_office {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 320px;
margin-top: -160px;}
ul#company_office li {
width: auto;
margin: 0 30px 40px 0;}
ul#company_office h4 {
font-family: 'Oswald';
font-size: 18px;
font-weight: normal;
color: #000;
letter-spacing: 0.05em;
line-height: 1.3em;}
ul#company_office p {
font-size: 12px;
color: #999;
letter-spacing: 0.1em;
line-height: 1.5em;
padding: 7px 0;}
ul#company_office p.googlemap {
width: 80px;
font-family: 'Oswald';
font-size: 10px;
text-align: center;
line-height: 1.3em;
padding: 0;}
ul#company_office p.googlemap a {
display: block;
color: #fff;
padding: 5px 0;
background-color: #999;}
ul#company_office p.googlemap a:hover {
color: #fff;
background-color: #EE3F23;} footer {
width: 100%;
height: 180px;
background-color: #fff;}
#contact {
width: 100%;
height: 100px;}
#contact a {
display: block;
width: 100%;
height: 100px;
background-color: #000;}
#contact a:hover {
background-color: #EE3F23;}
#contact h2 {
width: auto;
height: 80px;
font-size: 11px;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: center;
font-weight: normal;
padding-top: 20px;}
#contact a h2 {
color: #ccc;}
#contact a:hover h2 {
color: #ccc;}
#contact h2 span.contact_ttl_en {
font-family: 'Oswald';
font-size: 23px;
font-weight: normal;
line-height: 1.8em;}
#contact a h2 span.contact_ttl_en {
color: #fff;}
#contact a:hover h2 span.contact_ttl_en {
color: #fff;}
#footer_last {
width: 100%;
height: 80px;}
#copyright {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: right;
width: 40%;
height: 80px;
font-size: 10px;
letter-spacing: 0.1em;
line-height: 1.3em;
color: #666;
padding: 35px 25px 0 0;
text-align: right;
}
#footer_last ul#link {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: right;
width: 60%;
height: 80px;
text-align: right;
padding: 25px 25px 0 0;}
#footer_last ul#link li {
display: inline;
padding-left: 3px;}
#footer-sns {
height: 80px;
float: left;
padding: 35px 0 0 25px;
width: 55%;
}
#footer-sns ul {
}
#footer-sns ul li {
float: left;
line-height: 1;
padding: 0 10px 0 0;
} #top_logo_bar_sp {
position: absolute;
top: 0px; left: 0px;}
#top_logo_bar_sp p {
display: none;} body.single,
body.page {
height: auto;}
#top_logo_bar_page {
z-index: 10;
position: fixed;
bottom: 0px; left: 25px;
width: 180px;
height: 70px;}
body.single h1,
body.page h1 {
position: static;
width: 180px;
height: 70px;
color: #000;
font-size: 10px;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.3em;
text-align: left;
margin: 0;}
body.single h1 img,
body.page h1 img {
width: 100%;
height: auto;}
#footer_page {
width: auto;}
ul#link_page {
width: auto;
height: 40px;
text-align: right;
padding: 0 20px 0 0;}
ul#link_page li {
display: inline;
padding-left: 10px;}
#copyright_page {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 1.3em;
color: #666;
text-align: right;
padding: 0 20px 15px 0;} #news_contents {
position: relative;
width: auto;
height: auto;
margin: 100px 0 50px 300px;
padding: 30px 50px 30px 30px;
border-left: 1px solid #000;}
#news_contents h2 {
position: absolute;
top: 3px; left: -28px;
width: 22px;
height: 110px;}
#news_contents article.article_single {
margin-bottom: 50px;
}
#news_contents article.article_single p.single_date,
#news_contents article.article_single p.single_date a {
color: #EE3F23;
font-family: 'Oswald';
font-size: 35px;
text-align: left;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 0;
text-decoration: none;}
#news_contents h3 {
color: #000;
font-size: 14px;
font-weight: bold;
text-align: left;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 15px 0 30px 0;}
#news_contents article.article_single p {
color: #666;
font-size: 11px;
line-height: 1.8em;
letter-spacing: 0.1em;
text-align: left;
padding-bottom: 15px;}
#news_contents article.article_single p a {
text-decoration: underline;}
#news_contents article.article_single p a:hover {
text-decoration: underline;}
#news_contents article.article_single img {
width: 100%;
max-width: 450px;
height: auto;}
#news_contents article.article_single p.single_cate {
padding-top: 10px;}
@media screen and (max-width:767px) {
.nav_pagelink {
display: flex;
justify-content: space-between;
font-size: 11px;
line-height: 1.8em;
letter-spacing: 0.1em;
padding: 10px 0 0 10px;
width: 100%;
}
}
@media screen and (min-width:768px) {
.nav_pagelink {
display: flex;
justify-content: space-between;
font-size: 11px;
line-height: 1.8em;
letter-spacing: 0.1em;
padding: 10px 0 0 10px;
max-width: 700px;
}
} #contact_contents {
width: auto;
height: auto;
margin: 100px 0 50px 300px;
padding: 30px 50px 30px 30px;
border-left: 1px solid #000;}
#contact_contents p {
color: #666;
font-size: 11px;
text-align: left;
line-height: 1.8em;
letter-spacing: 0.1em;
padding: 5px 2px;}
#contact_contents h2 {
color: #666;
font-size: 12px;
text-align: left;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 0;}
#contact_contents h2 span.contact_ttl_en {
color: #000;
font-family: 'Oswald';
font-weight: normal;
font-size: 35px;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 0;}
#contact_contents h3 {
color: #999;
font-family: 'Oswald';
font-weight: normal;
font-size: 30px;
line-height: 1.2em;
letter-spacing: 0.1em;
padding: 30px 0 0 0;}
#contact_contents p#contact_tel {
color: #EE3F23;
font-family: 'Oswald';
font-weight: normal;
font-size: 40px;
line-height: 1.5em;
letter-spacing: 0.1em;
padding: 0;}
#contact_contents input {
width: 300px;
height: 12px;
color: #000;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
padding: 10px;
border: none;
background-color: #f2f2f2;}
#contact_contents input[type="submit"] {
cursor: pointer;
width: 120px;
height: 35px;
color: #fff;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
text-align: center;
padding: 8px;
margin-top: 10px;
border: none;
background-color: #000;}
#contact_contents textarea {
width: 300px;
height: 150px;
color: #000;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
padding: 10px;
border: none;
background-color: #f2f2f2;} @media screen and (max-width: 1050px) { .pc_only {display: none;} .pc_tab_only {display: inline;} .tab_only {display: inline;} .sp_only {display: none;} .tab_sp_only {display: inline;} #gnav {
z-index: 100;
position: fixed;
top: 0px; left: 0px;
width: 100%;
padding: 30px 0;
background-color: rgba(238,63,35,1);}
#gnav li a {
padding: 15px 0 15px 150px;
opacity: 1;}
#gnav li a:hover {
color: #fff;}  #top_contents_logo {
width: 50%;
height: 50%;
min-height: 350px;}
#top_contents_logo h1 {
position: absolute;
top: 50%; left: 50%;
width: 200px;
height: auto;
margin: -80px 0 0 -100px;}
#top_contents_logo h1 img {
width: 100%;
height: auto;} #top_contents {
position: relative;
width: 100%;
padding: 0;}
#top_contents_top {
position: absolute;
top: 0px; right: 0px;
width: 50%;
height: 50%;}
#top_contents_middle {
position: absolute;
bottom: 0px; left: 0px;
width: 50%;
height: 50%;}
#top_contents_bottom {
position: absolute;
bottom: 0px; right: 0px;
width: 50%;
height: 50%;} #top_contents_new {
float: none;
width: 100%;
height: 50%;} #top_contents div div#whats_new {
position: absolute;
top: 0%; right: 0px;
width: 100%;
height: auto;
padding-bottom: 30px;
background-color: rgba(0,0,0,1);}
#whats_new h2 {
padding: 50px 0;}
#whats_new h2 span.whats_new_ttl {
font-size: 30px;}
#whats_new ul li {
width: 80%;} .group01 {
display: flex;
justify-content: space-between;
height: 50%;
}
#top_contents_store {
float: none;
width: 50%;
}
#top_contents_store p.top_contents_ttl {
font-size: 45px;
margin-top: -45px;}
#top_contents_store p.top_contents_ttl_jp {
margin-top: 10px;}
#top_contents_store a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_store p.top_contents_ttl {
font-size: 45px;
margin-top: -35px;
width: 100%;
margin-top: auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_store p.top_contents_ttl_jp {
margin: 0 auto auto;
position: relative;
top: auto;
left: auto;
height: auto;
} #top_contents_studio {
float: none;
width: 50%;
}
#top_contents_studio a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/studio-02.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_studio a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/studio-01.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_studio p.top_contents_ttl {
font-size: 36px;
margin-top: -40px;
width: 100%;
margin-top: auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_studio p.top_contents_ttl_jp {
margin-top: 12px;
width: fit-content;
margin: 0 auto auto;
position: relative;
top: auto;
left: auto;
height: auto;
} #top_contents_amegare p.top_contents_ttl {
font-size: 55px;
margin-top: -75px;}
#top_contents_amegare p.top_contents_ttl_jp {
margin-top: 60px;}
#top_contents_amegare a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_amegare p.top_contents_ttl {
font-size: 45px;
margin-top: -35px;
width: 100%;
margin-top: auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_amegare p.top_contents_ttl_jp {
margin: 0 auto auto;
position: relative;
top: auto;
left: auto;
height: auto;
} #top_contents_storage,
#top_contents_Youtube {
float: none;
width: 100%;
height: 50%;
}
#top_contents_storage a,
#top_contents_Youtube a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_storage p.top_contents_ttl,
#top_contents_Youtube p.top_contents_ttl {
font-size: 36px;
margin-top: -70px;
width: 100%;
margin-top: auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_storage p.top_contents_ttl_jp,
#top_contents_Youtube p.top_contents_ttl_jp {
margin: 0 auto auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_fence {
float: none;
width: 100%;
height: 50%;}
#top_contents_fence a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_fence p.top_contents_ttl {
font-size: 36px;
margin-top: -35px;
width: 100%;
margin-top: auto;
position: relative;
top: auto;
left: auto;
height: auto;
}
#top_contents_fence p.top_contents_ttl_jp {
margin: 0 auto auto;
position: relative;
top: auto;
left: auto;
height: auto;
} #top_contents_company {
float: none;
width: 100%;
height: 50%;}
#top_contents_company p {
padding: 0 10px 0 30px;} #americangarage01 {
min-height: 850px;}
#amegare01_contents_wrap {
width: 60%;
min-width: auto;
padding-left: 80px;}
#amegare01_contents {
position: static;
width: 100%;
height: 100%;}
#icon_steelspan {
position: static;
width: 180px;
padding-top: 100px;
margin: 0 0 0 40px;}
#americangarage01 h2 {
position: static;
width: 80%;
margin: 30px 0 0 40px;}
#amegare01_text_box {
position: static;
width: 100%;
height: auto;
padding: 0 35px 0 40px;
margin-top: 30px;} #americangarage02 {
min-height: 500px;}
#steelcarports_logo {
position: absolute;
top: 50%; left: 50%;
bottom: auto; right: auto;
width: 160px;
height: 140px;
margin: -80px 0 0 -70px;} #americangarage03 {
height: auto;
min-height: auto;
margin-bottom: 10px;
padding-top: 70%;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03.jpg) no-repeat center top;
-webkit-background-size: contain;
background-size: contain;}
#americangarage03 h2 {
position: static;
width: 100%;
text-align: center;
padding: 50px 0;
background-color: #fff;}
#americangarage03 h2 img {
width: 80%;}
#americangarage03_contents_wrap {
position: static;
width: 100%;
margin-left: 0;
height: auto;
background-color: rgba(0,0,0,1);}
#americangarage03_contents {
position: static;
width: auto;
height: auto;
padding: 70px 0;
margin: 0;} #company {
min-height: 850px;}
#company_ttl {
height: 25%;}
#company_contents {
height: 75%;}
#company_officeota_lastlogo {
float: none;
width: 100%;
height: 35%;}
#company_officeota_lastlogo_in {
left: 80px;
width: auto;}
#company_dl {
width: 50%;
height: 65%;}
#company_contents dl {
top: 0px;
margin-top: 0px;}
#company_contents dl dt {
padding: 0 0 0 80px;}
#company_contents dl dd {
padding: 4px 0 15px 80px;}
#company_ul {
position: relative;
float: right;
width: 50%;
height: 65%;}
ul#company_office {
top: 0px;
margin-top: 0px;}
ul#company_office li {
margin: 0 0 40px 0;} footer {
height: auto;}
#footer_last {
height: auto;
padding: 30px 0 25px 0;}
#footer_last ul#link {
float: none;
width: 100%;
height: auto;
text-align: left;
padding: 0 0 0 32px;}
#footer_last ul#link li {
padding-left: 0;
padding-right: 3px;}
#copyright {
float: none;
width: 100%;
height: auto;
padding: 10px 0 0 35px;} #news_contents {
margin-left: 250px;} #contact_contents {
margin-left: 250px;}
}  @media screen and (max-width: 720px) { .pc_only {display: none;} .pc_tab_only {display: none;} .tab_only {display: none;} .sp_only {display: inline;} .tab_sp_only {display: inline;} #btn_gnav {
opacity: 1 !important;
top: 10px; left: auto; right: 10px;
width: 40px;
height: 48px;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/btn_gnav_sp.png) no-repeat left top;
-webkit-background-size: 40px 48px;
background-size: 40px 48px;}
#gnav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 20px 0;}
#gnav li a {
padding: 8px 0 8px 40px;}  .btn_back,
.btn_next {
display: none;} #top_contents_logo {
position: relative;
top: 0px; left: 0px;
width: 100%;
height: 100%;
min-height: auto;} #top_contents {
position: static;
height: auto;
min-height: auto;
margin-bottom: 0;}
#top_contents_top {
position: static;
width: 100%;
height: auto;}
#top_contents_middle {
position: static;
width: 100%;
height: auto;}
#top_contents_bottom {
position: static;
width: 100%;
height: auto;}
.top_contents_ttl {
position: absolute;
top: 50%; left: 0px;
width: 100%;
height: 120px;
line-height: 1.1em;
color: #EE3F23;
font-family: 'Lobster';
text-align: center;}
.top_contents_ttl_jp {
position: absolute;
top: 50%; left: 50%;
color: #ffffff;
height: 17px;
font-size: 10px;
font-weight: bold;
line-height: 1.3em;
letter-spacing: 0.2em;
text-align: center;
padding: 2px 15px 1px 15px;
background-color: rgba(238,63,35,0.9);}
#top_contents div div {
position: relative;} #top_contents_new {
height: auto;} #top_contents div div#whats_new {
display: block;
position: static;
background-color: #ccc;}
#whats_new h2 {
padding: 80px 0 30px 0;
line-height: 2.5em;
color: #666;
font-size: 10px;}
#whats_new h2 span.whats_new_ttl {
font-size: 30px;
color: #000;}
#whats_new ul {
width: 100%;}
#whats_new ul li {
width: 100%;
margin: 0 auto 30px auto;}
#top_contents div div div.news_img {
float: left;
width: 30%;
height: auto;
padding-top: 7px;}
#top_contents div div div.news_text {
float: right;
width: 60%;
padding-right: 5%;}
#top_contents div div div.news_text time {
color: #333;}
#top_contents div div div.news_text h3 {
color: #000;
padding-top: 2px;}
#top_contents div div div.news_text p {
color: #666;
padding-top: 2px;} #top_contents_store {
height: 150px;
}
#top_contents_store a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_store p.top_contents_ttl,
#top_contents_studio p.top_contents_ttl {
font-size: 28px;
}
#top_contents_store p.top_contents_ttl_jp {
} #top_contents_studio {
height: 150px;
}
#top_contents_studio a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/tiny_b.jpg) no-repeat center;
-webkit-background-size: cover;
background-size: cover;}
#top_contents_studio a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/tiny.jpg) no-repeat center;
-webkit-background-size: cover;
background-size: cover;} #top_contents_amegare {
height: 300px;
}
#top_contents_amegare a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
} #top_contents_storage,
#top_contents_Youtube {
height: 250px;
}
#top_contents_storage p.top_contents_ttl_jp {
}
#top_contents_fence {
height: 150px;
}
#top_contents_fence p.top_contents_ttl_jp {
} #top_contents_company {
height: 200px;
margin: 0;}
#top_contents_company p {
padding: 0 10px 0 20px;}
#top_contents_company p#top_contents_company_name {
margin-top: -52px;}
#top_contents_company p#top_contents_company_work {
margin-top: -24px;}
#top_contents_company p#top_contents_company_address {
margin-top: 16px;} #americangarage01 {
position: static;
height: auto;
min-height: auto;
padding-top: 75%;
background: #000 url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare01.jpg) no-repeat center top;
-webkit-background-size: contain;
background-size: contain;}
#amegare01_contents_wrap {
position: static;
width: 100%;
height: auto;
padding: 0;}
#amegare01_contents {
height: auto;
background: none;}
#icon_steelspan {
width: 150px;
padding: 0 0 0 30px;
margin: 0 auto 0 0;}
#americangarage01 h2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 90%;
max-width: none;
padding: 30px 0 0 30px;
margin: 0 auto 0 0;}
#amegare01_text_box {
padding: 30px 25px 30px 30px;
margin-top: 0;} #americangarage02 {
height: 250px;
min-height: 250px;
}
#steelcarports_logo {
top: auto; left: auto;
bottom: 5px; right: 5px;
width: 50px;
height: auto;
margin: 0;}
#steelcarports_logo img {
width: 100%;
height: auto;} #americangarage03 {
position: static;
margin-bottom: 5px;}
#americangarage03 h2 img {
width: 90%;
max-width: none;}
#americangarage03_contents {
padding: 50px 0;}
#americangarage03_contents h3 {
font-size: 14px;
line-height: 1.8em;
text-align: center;
padding: 0 0 20px 0;}
#amegare_cm {
width: 100%;
max-width: none;
margin: 0;}
#amegare_cm ul {
width: 200px;
padding: 40px 0 0 0;}
#amegare_cm ul li {
float: none;
width: 200px;
margin: 0 0 20px 0;}
#amegare_catalog {
width: 100%;
max-width: none;
margin: 0;}
#amegare_catalog ul {
text-align: center;
width: 100%;
padding: 40px 0 0 0;}
#amegare_catalog ul li {
float: none;
width: 100%;
margin: 0 0 20px 0;}
#amegare_shop {
width: 100%;
max-width: none;
margin: 0;
padding-top: 50px;}
ul#amegare_shop_01 {
padding: 40px 30px 0 30px;}
ul#amegare_shop_01 li {
width: auto;
max-width: 315px;
margin-right: auto;}
ul#amegare_shop_02 {
padding: 20px 10px 0 40px;}
ul#amegare_shop_02 li {
float: none;
width: auto;
margin-bottom: 15px;}
#amegare_shop_wanted {
margin: 20px;}
#garageone {
width: 100%;
max-width: none;
margin: 0;
padding: 50px 0 0 0;}
#garageone p {
width: 150px;
height: auto;}
#garageone p img {
width: 100%;
height: auto;
margin: 20px auto 0 auto;} #company {
position: static;
height: auto;
min-height: auto;
padding-bottom: 30px;}
#company_ttl {
position: relative;
height: 150px;}
#company h2 {
font-size: 12px;}
#company h2 span.company_ttl_en {
font-size: 30px;}
#company_contents {
height: auto;}
#company_officeota_lastlogo {
position: static;
height: auto;}
#company_officeota_lastlogo_in {
position: static;
width: 70%;
height: auto;
margin: 0 auto;}
#company_contents h3 {
width: 180px;
height: auto;
margin: 0;
padding: 60px 0;}
#company_dl {
position: static;
float: none;
width: auto;
height: auto;}
#company_contents dl {
position: static;
width: 70%;
height: auto;
margin: 0 auto;}
#company_contents dl dt {
padding: 0 0 0 3px;}
#company_contents dl dd {
padding: 4px 0 15px 3px;}
#company_ul {
position: static;
float: none;
width: auto;
height: auto;}
ul#company_office {
position: static;
width: 70%;
height: auto;
margin: 50px auto 0 auto;}
ul#company_office li {
padding-left: 3px;
margin: 0 0 40px 0;} #footer_last {
width: 100%;
height: auto;
padding: 30px 0 25px 0;}
#footer_last ul#link {
text-align: center;
padding: 0px 30px 0 30px;}
#footer_last ul#link li {
line-height: 2.5em;}
#copyright {
text-align: center;
line-height: 1.8em;
padding: 30px 0 0 0;} #top_logo_bar_sp {
z-index: 10;
display: block;
position: fixed;
top: 0px; left: 0px;
width: 100%;
height: 68px;
background-color: #fff;}
#top_logo_bar_sp p {
display: block;
position: absolute;
top: 17px; left: 17px;
width: 170px;
height: auto;}
#top_logo_bar_sp p img {
width: 100%;
height: auto;} #top_logo_bar_page {
top: 0px; bottom: auto; left: 0px;
width: 100%;
height: 68px;
background-color: #fff;}
body.single h1,
body.page h1 {
z-index: 100;
position: absolute;
top: 17px; left: 17px;
width: 170px;
height: auto;}
#footer_page {
width: auto;
padding: 20px 0;}
ul#link_page {
height: auto;
text-align: center;
padding: 20px 30px 0 30px;}
ul#link_page li {
line-height: 2.2em;}
#copyright_page {
text-align: center;
line-height: 1.8em;
padding: 30px 0 0 0;} #news_contents {
margin: 80px 0 0 40px;
padding: 10px 20px 20px 20px;}
#news_contents article.article_single p.single_date {
font-size: 30px;}
#news_contents article.article_single p.single_cate {
padding-top: 10px;}
.nav_pagelink {
padding-left: 0;} #contact_contents {
margin: 80px 0 0 0;
padding: 10px 30px 30px 30px;
border: none;}
#contact_contents h2 span.contact_ttl_en {
font-size: 30px;}
#contact_contents h3 {
font-size: 25px;}
#contact_contents p#contact_tel {
font-size: 35px;}
#contact_contents input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 32px;}
#contact_contents input[type="submit"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 136px;
height: 45px;}
#contact_contents textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 170px;}
}   .mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr39 {margin-right: 39px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;} .pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt45 {padding-top: 45px;}
.pt50 {padding-top: 50px;}
.pt100 {padding-top: 100px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb100 {padding-bottom: 100px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}
.pl1 {padding-left: 1px;}
.pl2 {padding-left: 2px;}
.pl3 {padding-left: 3px;}
.pl4 {padding-left: 4px;}
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;} .fleft {float: left;}
.fright {float: right;} .cl:after {
content:" ";
display:block;
clear:both;} .pagination{
list-style-type: none;
padding-left: 0;
margin: 30px 0;
}
.pagination,
.pagination li a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.pagination a {
font-weight: 300;
padding-top: 1px;
text-decoration:none;
border: 1px solid #ddd;
border-left-width: 0;
min-width:36px;
min-height:36px;
color: #333;
}
.pagination li:not([class*="current"]) a:hover {
background-color: #eee;
}
.pagination li:first-of-type a {
border-left-width: 1px;
}
.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
display: inline-block;
font-family: Fontawesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }
.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }
.pagination li.current a {
background-color: #ddd;
cursor: default;
pointer-events: none;
}
.pagination > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
@media only screen and ( max-width: 680px ) {
.pagination li.first,
.pagination li.last { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a { border-left-width: 1px; }
}
@media only screen and ( max-width: 500px ) {
.pagination li { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next{
position: initial;
top: initial;
left: initial;
}
.pagination li.previous a { border-left-width: 0; }
}
@media only screen and ( max-width: 400px ) {
.pagination li.first,
.pagination li.last { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a { border-left-width: 1px; }
}
@media only screen and ( max-width: 240px ) { .pagination li { width: 50%;}
.pagination li.current {
order: 2;
width: 100%;
border-left-width: 1px;
}
}