@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 {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
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 {
background: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
input,
select {
vertical-align: middle;
} html {
height: 100%;
width: 100%;
}
body {
background-color: #999;
color: #050000;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 14px;
height: 100%;
line-height: 1.8em;
text-align: left;
-webkit-text-size-adjust: 100%;
width: 100%;
}
body.single,
body.page {
background-color: #fff;
}
a {
color: #000;
outline: none;
text-decoration: none;
}
a:hover {
color: #ee3f23;
outline: none;
text-decoration: 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 {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/btn_gnav.png) no-repeat left top;
cursor: pointer;
height: 60px;
left: 20px;
position: fixed;
top: 20px;
width: 50px;
z-index: 10000;
}
#gnav {
display: none;
height: auto;
left: 30px;
position: fixed;
top: 110px;
width: auto;
z-index: 1000;
}
#gnav li {
font-family: "Oswald";
font-size: 18px;
font-weight: bold;
line-height: 1.5em;
text-align: left;
}
#gnav li a {
color: #000;
display: block;
opacity: .9;
padding: 5px 0;
width: auto;
}
#gnav li a:hover {
color: #ee3f23;
opacity: 1;
}  .btn_back {
height: auto;
position: absolute;
right: 20px;
top: 20px;
width: 50px;
z-index: 100;
}
.btn_next {
bottom: 20px;
height: auto;
position: absolute;
right: 20px;
width: 50px;
z-index: 100;
}
.btn_back img,
.btn_next img {
height: auto;
width: 100%;
} @media screen and (min-width:768px) {
.wrap {
align-items: center;
display: flex;
justify-content: center;
}
}
@media screen and (max-width:767px) {
#top_contents_logo {
background-color: #fff;
height: 100%;
height: 100vh!important;
left: 0;
position: absolute;
top: 0;
width: 40%;
}
}
@media screen and (min-width:768px) {
#top_contents_logo {
background-color: #fff;
height: 100%;
left: 0;  top: 0;
width: 40%;
}
#top_contents_logo {
align-items: center;
display: flex;
justify-content: center;
}
}
#top_contents_logo h1 {
color: #000;
font-size: 10px;
font-weight: bold;
height: 210px; letter-spacing: .3em;
line-height: 1.3em; text-align: center; width: 260px;
} #top_contents {
background-color: #fff;  width: 60%; }
#top_contents_top {
height: 25%;
position: relative;
width: 100%;
}
@media screen and (min-width:768px) {
#top_contents_top {
aspect-ratio: 643 / 131;
height: auto;
}
}
@media screen and (min-width:1051px) {
#top_contents_top {
display: flex;
width: 100%;
}
}
#top_contents_middle {
height: 50%;
width: 100%;
}
@media screen and (min-width:768px) {
#top_contents_middle {
aspect-ratio: 643 / 262;
height: auto;
}
}
#top_contents_bottom {
height: 25%;
width: 100%;
}
@media screen and (min-width:768px) {
#top_contents_bottom {
aspect-ratio: 643 / 131;
height: auto;
}
}
.top_contents_ttl {
color: #ee3f23;
font-family: "Lobster";
line-height: 1.1em;
margin: auto auto 10px auto;
text-align: center;
width: 100%;
}
.top_contents_ttl_jp {
background-color: rgba(238,63,35,.9);
color: #fff;
font-size: 10px;
font-weight: bold;
letter-spacing: .2em;
line-height: 1.3em;
margin: 0 auto auto;
padding: 3px 15px 2px 15px;
text-align: center;
width: fit-content;
}
.top_contents_ttl_event {
color: #ee3f23;
font-family: "Lobster";
height: 120px;
left: 0;
line-height: 1.1em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.top_contents_ttl_event_jp {
background-color: rgba(238,63,35,.9);
color: #fff;
font-size: 10px;
font-weight: bold;
height: 17px;
left: 0;
letter-spacing: .2em;
line-height: 1.3em;
padding: 5px 15px 0 15px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: fit-content;
}
#top_contents div div {
position: relative;
} #top_contents_new {
cursor: pointer;
float: left;
height: 100%; overflow: auto;
width: 50%;
}
@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 {
color: #fff;
font-size: 26px;
margin-top: -42px;
}
#top_contents_new p.top_contents_ttl_jp {
background: none;
margin: 25px 0 0 -40px;
width: auto;
} #top_contents div div#whats_new {    background-color: rgba(0,0,0,.85);
}
#whats_new h2 {
color: #ccc;
font-size: 12px;
font-weight: bold;
letter-spacing: .2em;
line-height: 2em;
padding: 40px 0;
text-align: center;
width: 100%;
}
#whats_new h2 span.whats_new_ttl {
color: #fff;
font-family: "Lobster";
font-size: 28px;
font-weight: normal;
letter-spacing: .1em;
}
#whats_new ul {
padding-bottom: 30px;
width: 100%;
}
#whats_new ul li {
margin: 0 auto 30px auto;
width: 70%;
}
#top_contents div div div.news_img {
float: left;
height: auto;
max-width: 150px;
width: 30%;
}
#top_contents div div div.news_img img {
height: auto;
width: 100%;
}
#top_contents div div div.news_text {
float: right;
padding: 0;
width: 60%;
}
#top_contents div div div.news_text time {
color: #ccc;
font-size: 10px;
letter-spacing: .1em;
line-height: 1.2em;
text-align: left;
}
#top_contents div div div.news_text h3 {
color: #fff;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.5em;
padding-top: 5px;
text-align: left;
}
#top_contents div div div.news_text p {
color: #ccc;
font-size: 11px;
letter-spacing: .1em;
line-height: 1.5em;
padding-top: 5px;
text-align: left;
} #top_contents_store {
aspect-ratio: 1 / 1;
float: left;
height: 100%;
width: 25%;
}
#top_contents_store a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_webshop01@2x.jpg) no-repeat left bottom;
-webkit-background-size: cover;
background-size: cover;
display: flex; flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_store a:hover { filter: grayscale(0%);
}
#top_contents_store p.top_contents_ttl {
font-size: 32px;
}
#top_contents_store p.top_contents_ttl_jp {
width: 90px;
} #top_contents_studio {
aspect-ratio: 1 / 1;
float: left;
height: 100%;
width: 25%;
}
@media screen and (min-width:1051px) {
#top_contents_store {
float: none;
width: 50%;
}
#top_contents_studio {
float: none;
width: 50%;
}
}
#top_contents_studio a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_tiny01@2x.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
display: flex; flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_studio a:hover {
filter: grayscale(0%);
}
#top_contents_studio p.top_contents_ttl {
font-size: 26px;
}
#top_contents_studio p.top_contents_ttl_jp {
width: 140px;
} #top_contents_amegare {
height: 100%;
width: 100%;
}
#top_contents_amegare a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_garage01@2x.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
display: flex; flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_amegare a:hover {
filter: grayscale(0%);
}
#top_contents_amegare p.top_contents_ttl {
font-size: 60px;
} #top_contents_fence {
float: left;
height: 100%;
width: 33.33333333%;
}
#top_contents_fence a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/fence-02.jpg) no-repeat center center;
background-color: #666;
-webkit-background-size: cover;
background-size: cover;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
#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_storage {
float: left;
height: 100%;
width: 50%;
}
#top_contents_Youtube {
float: left;
height: 100%;
width: 25%;
}
#top_contents_Youtube a {
align-items: center;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_custus01@2x.jpg) no-repeat center center;
background-size: cover;
display: flex; flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_Youtube a:hover {
filter: grayscale(0%);
}
#top_contents_Youtube a .top_contents_ttl {
width: 100%;
}
#top_contents_Youtube a .top_contents_ttl_jp {
width: fit-content;
}
#top_contents_storage a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_strage01@2x.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
display: flex; flex-wrap: wrap;
height: 100%;
width: 100%;
}
#top_contents_storage a:hover {
filter: grayscale(0%);
}
#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 {
background-color: #000;
box-sizing: border-box;
float: left;
height: 100%;
padding: 10px 30px;
width: 25%;
}
#top_contents_company img {
height: auto;
max-width: 100%;
}
#top_contents_company h2 {
padding: 0 0 5px;
text-align: center;
}
#top_contents_company dl {
align-items: center;
display: flex;
padding-bottom: 5px;
}
#top_contents_company dl dt {
margin-right: 15px;
width: 17%;
}
#top_contents_company dl dd a h3 {
color: #fff;
font-size: .9em;
letter-spacing: -.05em;
}
#top_contents_company dl dd a .desc {
color: #898989;
font-size: .7em;
letter-spacing: -.05em;
}
#top_contents_company a {
background-color: #000;
display: block;
height: 100%;
width: 100%;
}
#top_contents_company a:hover { }
#top_contents_company p {
color: #ccc;
font-size: 10px;
height: 20px;
left: 0;
letter-spacing: .1em;
line-height: 1.8em;
padding: 0 10px 0 30px;
position: absolute;
text-align: left;
top: 50%;
width: auto;
}
@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: #fff;
font-family: "Oswald";
font-size: 15px;
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 {
bottom: 10px;
font-family: "Oswald";
font-size: 12px;
line-height: 1.1em;
padding: 0;
position: absolute;
right: 15px;
text-align: right;
top: auto;
width: auto;
} #americangarage01 {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare01.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;
height: 100%;
min-height: 800px;
position: relative;
width: 100%;
}
#amegare01_contents_wrap {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
left: 0;
min-width: 640px;
padding-left: 200px;
position: absolute;
top: 0;
width: 50%;
}
#amegare01_contents {
background-color: rgba(0,0,0,.70);
height: 100%;
position: relative;
width: 100%;
}
#icon_steelspan {
display: block;
height: auto;
left: 40px;
margin-top: -260px;
position: absolute;
top: 50%;
width: 180px;
}
#icon_steelspan img {
height: auto;
width: 100%;
}
#americangarage01 h2 {
height: auto;
left: 40px;
margin-top: -150px;
max-width: 380px;
position: absolute;
top: 50%;
width: 80%;
}
#americangarage01 h2 img {
height: auto;
width: 100%;
}
#amegare01_text_box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 50%;
left: 0;
margin-top: -40px;
padding: 0 35px 0 40px;
position: absolute;
top: 50%;
width: 100%;
}
#amegare01_text_box p {
color: #fff;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.8em;
padding-bottom: 10px;
text-align: left;
} #americangarage02 {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare02.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;
height: 100%;
min-height: 700px;
position: relative;
width: 100%;
}
#americangarage02 h2 {
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#americangarage02 h2 img {
height: auto;
width: 100%;
}
#steelcarports_logo {
bottom: 50px;
height: 140px;
position: absolute;
right: 120px;
width: 160px;
} #americangarage03 {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03.jpg) no-repeat right center;
-webkit-background-size: cover;
background-size: cover;
height: 100%;
margin-bottom: 10px;
min-height: 1250px;
position: relative;
width: 100%;
}
#americangarage03 h2 {
bottom: 35px;
height: auto;
left: 30px;
position: absolute;
text-align: left;
width: 40%;
}
#americangarage03 h2 img {
height: auto;
max-width: 680px;
width: 100%;
}
#americangarage03_contents_wrap {
background-color: rgba(0,0,0,.70);
height: 100%;
margin-left: 50%;
position: relative;
width: 50%;
}
@media screen and (min-width:1051px) {
#americangarage03_contents {  position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translateY( -50%);
transform: translateY( -50%);
}
}
#americangarage03_contents h3 {
border-bottom: 1px solid #ccc;
color: #ccc;
font-size: 12px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0 0 10px 5px;
width: auto;
}
#amegare_cm {
margin: 0 auto;
max-width: 550px;
width: 90%;
}
#amegare_cm ul {
color: #ccc;
font-size: 10px;
letter-spacing: .1em;
line-height: 2.5em;
margin: 0 auto;
padding: 30px 0 0 20px;
width: 440px;
}
#amegare_cm ul li {
float: left;
margin-right: 20px;
width: 200px;
}
#amegare_cm ul li img {
height: auto;
width: 100%;
}
#amegare_catalog {
margin: 0 auto;
max-width: 550px;
width: 90%;
}
#amegare_catalog ul {
color: #ccc;
font-size: 10px;
letter-spacing: .1em;
line-height: 2.5em;
margin: 0 auto;
padding: 30px 0 0 20px;
width: 440px;
}
#amegare_catalog ul li a {
color: rgba(255,255,255,1);
}
#amegare_catalog ul li img {
height: auto;
max-width: 100px;
}
#amegare_shop {
margin: 0 auto;
max-width: 550px;
padding-top: 0;
width: 90%;
}
ul#amegare_shop_01 {
height: auto;
padding: 25px 0 0 20px;
width: auto;
}
ul#amegare_shop_01 li {
margin-bottom: 10px;
width: 300px;
}
ul#amegare_shop_01 li img {
height: auto;
width: 100%;
}
ul#amegare_shop_01 li a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_m.png) no-repeat left 18px;
color: #fff;
display: block;
height: 50px;
padding: 0 0 0 15px;
}
ul#amegare_shop_01 li a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_m_o.png) no-repeat left 18px;
color: #ee3f23;
}
ul#amegare_shop_02 {
height: auto;
padding: 10px 0 0 20px;
width: auto;
}
ul#amegare_shop_02 li {
float: left;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.5em;
margin-bottom: 10px;
width: 50%;
}
ul#amegare_shop_02 li.no_hp {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s.png) no-repeat left 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
height: 16px;
padding: 0 0 0 20px;
}
ul#amegare_shop_02 li a {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s.png) no-repeat left 2px;
color: #fff;
display: block;
height: 16px;
padding: 0 0 0 20px;
}
ul#amegare_shop_02 li a:hover {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03_li_s_o.png) no-repeat left 2px;
color: #ee3f23;
}
#amegare_shop_wanted {
background-color: #fff;
height: auto;
margin-top: 20px;
padding: 25px 15px 20px 25px;
width: auto;
}
#amegare_shop_wanted h4 {
color: #333;
font-size: 18px;
height: auto;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0;
width: auto;
}
#amegare_shop_wanted p {
color: #666;
font-size: 12px;
height: auto;
letter-spacing: .1em;
line-height: 1.8em;
padding-top: 5px;
width: auto;
}
#amegare_shop_wanted p a,
#amegare_shop_wanted p a:hover {
text-decoration: underline;
}
#garageone {
margin: 0 auto;
max-width: 550px;
padding: 70px 0 0 0;
width: 90%;
}
#garageone p {
height: 30px;
margin: 20px auto;
width: 190px;
} #company {
background-color: #fff;
height: 100%;
min-height: 800px;
position: relative;
width: 100%;
}
#company_ttl {
background-color: #e6e6e6;
height: 30%;
position: relative;
width: 100%;
}
#company h2 {
color: #999;
font-size: 14px;
height: 80px;
left: 0;
letter-spacing: .1em;
line-height: 1.3em;
margin-top: -30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
#company h2 span.company_ttl_en {
color: #000;
font-family: "Oswald";
font-size: 35px;
font-weight: normal;
line-height: 1.5em;
}
#company_contents {
height: 70%;
width: 100%;
}
#company_officeota_lastlogo {
float: left;
height: 100%;
position: relative;
width: 35%;
}
#company_officeota_lastlogo_in {
height: 70px;
left: 0;
margin-top: -35px;
position: absolute;
top: 50%;
width: 100%;
}
#company_contents h3 {
color: #000;
font-size: 10px;
font-weight: bold;
height: 70px;
letter-spacing: .3em;
line-height: 2.5em;
margin: 0 auto;
text-align: left;
width: 200px;
}
#company_contents h3 img {
height: auto;
width: 100%;
}
#company_dl {
float: left;
height: 100%;
position: relative;
width: 30%;
}
#company_contents dl {
font-size: 12px;
height: 550px;
left: 0;
letter-spacing: 0;
line-height: 1.5em;
margin-top: -275px;
position: absolute;
top: 50%;
width: 100%;
}
#company_contents dl dt {
color: #000;
font-weight: bold;
padding: 0 30px 0 20px;
width: auto;
}
#company_contents dl dd {
color: #666;
padding: 4px 30px 15px 20px;
width: auto;
}
#company_ul {
float: left;
height: 100%;
position: relative;
width: 35%;
}
ul#company_office {
height: 320px;
left: 0;
margin-top: -160px;
position: absolute;
top: 50%;
width: 100%;
}
ul#company_office li {
margin: 0 30px 40px 0;
width: auto;
}
ul#company_office h4 {
color: #000;
font-family: "Oswald";
font-size: 18px;
font-weight: normal;
letter-spacing: .05em;
line-height: 1.3em;
}
ul#company_office p {
color: #999;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.5em;
padding: 7px 0;
}
ul#company_office p.googlemap {
font-family: "Oswald";
font-size: 10px;
line-height: 1.3em;
padding: 0;
text-align: center;
width: 80px;
}
ul#company_office p.googlemap a {
background-color: #999;
color: #fff;
display: block;
padding: 5px 0;
}
ul#company_office p.googlemap a:hover {
background-color: #ee3f23;
color: #fff;
} footer {
background-color: #fff;
height: 180px;
width: 100%;
}
#contact {
height: 100px;
width: 100%;
}
#contact a {
background-color: #000;
display: block;
height: 100px;
width: 100%;
}
#contact a:hover {
background-color: #ee3f23;
}
#contact h2 {
font-size: 11px;
font-weight: normal;
height: 80px;
letter-spacing: .1em;
line-height: 1.3em;
padding-top: 20px;
text-align: center;
width: auto;
}
#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 {
height: 80px;
width: 100%;
}
#copyright {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #666;
float: right;
font-size: 10px;
height: 80px;
letter-spacing: .1em;
line-height: 1.3em;
padding: 35px 25px 0 0;
text-align: right;
width: 40%;
}
#footer_last ul#link {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: right;
height: 80px;
padding: 25px 25px 0 0;
text-align: right;
width: 60%;
}
#footer_last ul#link li {
display: inline;
padding-left: 3px;
}
#footer-sns {
float: left;
height: 80px;
padding: 35px 0 0 25px;
width: 55%;
}
#footer-sns ul li {
float: left;
line-height: 1;
padding: 0 10px 0 0;
} #top_logo_bar_sp {
left: 0;
position: absolute;
top: 0;
}
#top_logo_bar_sp p {
display: none;
} body.single,
body.page {
height: auto;
}
#top_logo_bar_page {
bottom: 0;
height: 70px;
left: 25px;
position: fixed;
width: 180px;
z-index: 10;
}
body.single h1,
body.page h1 {
color: #000;
font-size: 10px;
font-weight: bold;
height: 70px;
letter-spacing: .3em;
line-height: 1.8em;
margin: 0;
position: static;
text-align: left;
width: 180px;
}
body.single h1 img,
body.page h1 img {
height: auto;
width: 100%;
}
#footer_page {
width: auto;
}
ul#link_page {
height: 40px;
padding: 0 20px 0 0;
text-align: right;
width: auto;
}
ul#link_page li {
display: inline;
padding-left: 10px;
}
#copyright_page {
color: #666;
font-size: 10px;
letter-spacing: .1em;
line-height: 1.3em;
padding: 0 20px 15px 0;
text-align: right;
} #news_contents {
border-left: 1px solid #000;
height: auto;
margin: 100px 0 50px 300px;
padding: 30px 50px 30px 30px;
position: relative;
width: auto;
}
#news_contents h2 {
height: 110px;
left: -28px;
position: absolute;
top: 3px;
width: 22px;
}
#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;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0;
text-align: left;
text-decoration: none;
}
#news_contents h3 {
color: #000;
font-size: 14px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1.5em;
padding: 15px 0 30px 0;
text-align: left;
}
#news_contents article.article_single p {
color: #666;
font-size: 11px;
letter-spacing: .1em;
line-height: 1.8em;
padding-bottom: 15px;
text-align: left;
}
#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 {
height: auto;
max-width: 450px;
width: 100%;
}
#news_contents article.article_single p.single_cate {
padding-top: 10px;
}
@media screen and (max-width:767px) {
.nav_pagelink {
display: flex;
font-size: 11px;
justify-content: space-between;
letter-spacing: .1em;
line-height: 1.8em;
padding: 10px 0 0 10px;
width: 100%;
}
}
@media screen and (min-width:768px) {
.nav_pagelink {
display: flex;
font-size: 11px;
justify-content: space-between;
letter-spacing: .1em;
line-height: 1.8em;
max-width: 700px;
padding: 10px 0 0 10px;
}
} #contact_contents {
border-left: 1px solid #000;
height: auto;
margin: 100px 0 50px 300px;
padding: 30px 50px 30px 30px;
width: auto;
}
#contact_contents p {
color: #666;
font-size: 11px;
letter-spacing: .1em;
line-height: 1.8em;
padding: 5px 2px;
text-align: left;
}
#contact_contents h2 {
color: #666;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0;
text-align: left;
}
#contact_contents h2 span.contact_ttl_en {
color: #000;
font-family: "Oswald";
font-size: 35px;
font-weight: normal;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0;
}
#contact_contents h3 {
color: #999;
font-family: "Oswald";
font-size: 30px;
font-weight: normal;
letter-spacing: .1em;
line-height: 1.2em;
padding: 30px 0 0 0;
}
#contact_contents p#contact_tel {
color: #ee3f23;
font-family: "Oswald";
font-size: 40px;
font-weight: normal;
letter-spacing: .1em;
line-height: 1.5em;
padding: 0;
}
#contact_contents input {
background-color: #f2f2f2;
border: none;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 12px;
height: 12px;
letter-spacing: .1em;
padding: 10px;
width: 300px;
}
#contact_contents input[type="submit"] {
background-color: #000;
border: none;
color: #fff;
cursor: pointer;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 12px;
height: 35px;
letter-spacing: .1em;
margin-top: 10px;
padding: 8px;
text-align: center;
width: 120px;
}
#contact_contents textarea {
background-color: #f2f2f2;
border: none;
color: #000;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 12px;
height: 150px;
letter-spacing: .1em;
padding: 10px;
width: 300px;
} @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 {
background-color: rgba(238,63,35,1);
left: 0;
padding: 30px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
#gnav li a {
opacity: 1;
padding: 15px 0 15px 150px;
}
#gnav li a:hover {
color: #fff;
}  #top_contents_logo {
height: 50%;
min-height: 350px;
width: 50%;
}
#top_contents_logo h1 {
height: auto;
left: 50%;
margin: -80px 0 0 -100px;
position: absolute;
top: 50%;
width: 200px;
}
#top_contents_logo h1 img {
height: auto;
width: 100%;
} #top_contents {
padding: 0;
position: relative;
width: 100%;
}
#top_contents_top {
height: 50%;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
#top_contents_middle {
bottom: 0;
height: 50%;
left: 0;
position: absolute;
width: 50%;
}
#top_contents_bottom {
bottom: 0;
height: 50%;
position: absolute;
right: 0;
width: 50%;
} #top_contents_new {
float: none;
height: 50%;
width: 100%;
} #top_contents div div#whats_new {
background-color: rgba(0,0,0,1);
height: auto;
padding-bottom: 30px;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
#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;
height: 50%;
justify-content: space-between;
}
#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;
height: auto;
left: auto;
margin-top: -35px;
margin-top: auto;
position: relative;
top: auto;
width: 100%;
}
#top_contents_store p.top_contents_ttl_jp {
height: auto;
left: auto;
margin: 0 auto auto;
position: relative;
top: auto;
} #top_contents_studio {
float: none;
width: 50%;
}
#top_contents_studio a {
align-items: center;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_custus01@2x.jpg) no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_studio a:hover { }
#top_contents_studio p.top_contents_ttl {
font-size: 36px;
height: auto;
left: auto;
margin-top: -40px;
margin-top: auto;
position: relative;
top: auto;
width: 100%;
}
#top_contents_studio p.top_contents_ttl_jp {
height: auto;
left: auto;
margin: 0 auto auto;
margin-top: 12px;
position: relative;
top: auto;
width: fit-content;
} #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;
height: auto;
left: auto;
margin-top: -35px;
margin-top: auto;
position: relative;
top: auto;
width: 100%;
}
#top_contents_amegare p.top_contents_ttl_jp {
height: auto;
left: auto;
margin: 0 auto auto;
position: relative;
top: auto;
} #top_contents_storage,
#top_contents_Youtube {
float: none;
height: 50%;
width: 100%;
}
#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;
height: auto;
left: auto;
margin-top: -70px;
margin-top: auto;
position: relative;
top: auto;
width: 100%;
}
#top_contents_storage p.top_contents_ttl_jp,
#top_contents_Youtube p.top_contents_ttl_jp {
height: auto;
left: auto;
margin: 0 auto auto;
position: relative;
top: auto;
}
#top_contents_fence {
float: none;
height: 50%;
width: 100%;
}
#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;
height: auto;
left: auto;
margin-top: -35px;
margin-top: auto;
position: relative;
top: auto;
width: 100%;
}
#top_contents_fence p.top_contents_ttl_jp {
height: auto;
left: auto;
margin: 0 auto auto;
position: relative;
top: auto;
} #top_contents_company {
float: none;
height: 50%;
width: 100%;
}
#top_contents_company p {
padding: 0 10px 0 30px;
} #americangarage01 {
min-height: 850px;
}
#amegare01_contents_wrap {
min-width: auto;
padding-left: 80px;
width: 60%;
}
#amegare01_contents {
height: 100%;
position: static;
width: 100%;
}
#icon_steelspan {
margin: 0 0 0 40px;
padding-top: 100px;
position: static;
width: 180px;
}
#americangarage01 h2 {
margin: 30px 0 0 40px;
position: static;
width: 80%;
}
#amegare01_text_box {
height: auto;
margin-top: 30px;
padding: 0 35px 0 40px;
position: static;
width: 100%;
} #americangarage02 {
min-height: 500px;
}
#steelcarports_logo {
bottom: auto;
height: 140px;
left: 50%;
margin: -80px 0 0 -70px;
position: absolute;
right: auto;
top: 50%;
width: 160px;
} #americangarage03 {
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/new/bg_amegare03.jpg) no-repeat center top;
-webkit-background-size: contain;
background-size: contain;
height: auto;
margin-bottom: 10px;
min-height: auto;
padding-top: 70%;
}
#americangarage03 h2 {
background-color: #fff;
padding: 50px 0;
position: static;
text-align: center;
width: 100%;
}
#americangarage03 h2 img {
width: 80%;
}
#americangarage03_contents_wrap {
background-color: rgba(0,0,0,1);
height: auto;
margin-left: 0;
position: static;
width: 100%;
}
#americangarage03_contents {
height: auto;
margin: 0;
padding: 70px 0;
position: static;
width: auto;
} #company {
min-height: 850px;
}
#company_ttl {
height: 25%;
}
#company_contents {
height: 75%;
}
#company_officeota_lastlogo {
float: none;
height: 35%;
width: 100%;
}
#company_officeota_lastlogo_in {
left: 80px;
width: auto;
}
#company_dl {
height: 65%;
width: 50%;
}
#company_contents dl {
margin-top: 0;
top: 0;
}
#company_contents dl dt {
padding: 0 0 0 80px;
}
#company_contents dl dd {
padding: 4px 0 15px 80px;
}
#company_ul {
float: right;
height: 65%;
position: relative;
width: 50%;
}
ul#company_office {
margin-top: 0;
top: 0;
}
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;
height: auto;
padding: 0 0 0 32px;
text-align: left;
width: 100%;
}
#footer_last ul#link li {
padding-left: 0;
padding-right: 3px;
}
#copyright {
float: none;
height: auto;
padding: 10px 0 0 35px;
width: 100%;
} #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 {
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;
height: 48px;
left: auto;
opacity: 1 !important;
right: 10px;
top: 10px;
width: 40px;
}
#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 {
height: 100%;
left: 0;
min-height: auto;
position: relative;
top: 0;
width: 100%;
} #top_contents {
height: auto;
margin-bottom: 0;
min-height: auto;
position: static;
}
#top_contents_top {
height: auto;
position: static;
width: 100%;
}
#top_contents_middle {
height: auto;
position: static;
width: 100%;
}
#top_contents_bottom {
height: auto;
position: static;
width: 100%;
}
.top_contents_ttl {
color: #ee3f23;
font-family: "Lobster";
height: 120px;
left: 0;
line-height: 1.1em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.top_contents_ttl_jp {
background-color: rgba(238,63,35,.9);
color: #fff;
font-size: 10px;
font-weight: bold;
height: 17px;
left: 50%;
letter-spacing: .2em;
line-height: 1.3em;
padding: 2px 15px 1px 15px;
position: absolute;
text-align: center;
top: 50%;
}
#top_contents div div {
position: relative;
} #top_contents_new {
height: auto;
} #top_contents div div#whats_new {
background-color: #ccc;
display: block;
position: static;
}
#whats_new h2 {
color: #666;
font-size: 10px;
line-height: 2.5em;
padding: 80px 0 30px 0;
}
#whats_new h2 span.whats_new_ttl {
color: #000;
font-size: 30px;
}
#whats_new ul {
width: 100%;
}
#whats_new ul li {
margin: 0 auto 30px auto;
width: 100%;
}
#top_contents div div div.news_img {
float: left;
height: auto;
padding-top: 7px;
width: 30%;
}
#top_contents div div div.news_text {
float: right;
padding-right: 5%;
width: 60%;
}
#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;
background: url(//officeota.jp/wp-content/themes/OfficeOta/images/bg_tiny01@2x.jpg) no-repeat center;
-webkit-background-size: cover;
background-size: cover;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#top_contents_studio a:hover { } #top_contents_amegare {
aspect-ratio: 3645 / 1484; }
#top_contents_amegare a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
} #top_contents_storage {
aspect-ratio: 1819 / 740; }
#top_contents_Youtube {
aspect-ratio: 910 / 740; }
#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: auto;
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 {
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;
height: auto;
min-height: auto;
padding-top: 75%;
position: static;
}
#amegare01_contents_wrap {
height: auto;
padding: 0;
position: static;
width: 100%;
}
#amegare01_contents {
background: none;
height: auto;
}
#icon_steelspan {
margin: 0 auto 0 0;
padding: 0 0 0 30px;
width: 150px;
}
#americangarage01 h2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto 0 0;
max-width: none;
padding: 30px 0 0 30px;
width: 90%;
}
#amegare01_text_box {
margin-top: 0;
padding: 30px 25px 30px 30px;
} #americangarage02 {
height: 250px;
min-height: 250px;
}
#steelcarports_logo {
bottom: 5px;
height: auto;
left: auto;
margin: 0;
right: 5px;
top: auto;
width: 50px;
}
#steelcarports_logo img {
height: auto;
width: 100%;
} #americangarage03 {
margin-bottom: 5px;
position: static;
}
#americangarage03 h2 img {
max-width: none;
width: 90%;
}
#americangarage03_contents {
padding: 50px 0;
}
#americangarage03_contents h3 {
font-size: 14px;
line-height: 1.8em;
padding: 0 0 20px 0;
text-align: center;
}
#amegare_cm {
margin: 0;
max-width: none;
width: 100%;
}
#amegare_cm ul {
padding: 40px 0 0 0;
width: 200px;
}
#amegare_cm ul li {
float: none;
margin: 0 0 20px 0;
width: 200px;
}
#amegare_catalog {
margin: 0;
max-width: none;
width: 100%;
}
#amegare_catalog ul {
padding: 40px 0 0 0;
text-align: center;
width: 100%;
}
#amegare_catalog ul li {
float: none;
margin: 0 0 20px 0;
width: 100%;
}
#amegare_shop {
margin: 0;
max-width: none;
padding-top: 50px;
width: 100%;
}
ul#amegare_shop_01 {
padding: 40px 30px 0 30px;
}
ul#amegare_shop_01 li {
margin-right: auto;
max-width: 315px;
width: auto;
}
ul#amegare_shop_02 {
padding: 20px 10px 0 40px;
}
ul#amegare_shop_02 li {
float: none;
margin-bottom: 15px;
width: auto;
}
#amegare_shop_wanted {
margin: 20px;
}
#garageone {
margin: 0;
max-width: none;
padding: 50px 0 0 0;
width: 100%;
}
#garageone p {
height: auto;
width: 150px;
}
#garageone p img {
height: auto;
margin: 20px auto 0 auto;
width: 100%;
} #company {
height: auto;
min-height: auto;
padding-bottom: 30px;
position: static;
}
#company_ttl {
height: 150px;
position: relative;
}
#company h2 {
font-size: 12px;
}
#company h2 span.company_ttl_en {
font-size: 30px;
}
#company_contents {
height: auto;
}
#company_officeota_lastlogo {
height: auto;
position: static;
}
#company_officeota_lastlogo_in {
height: auto;
margin: 0 auto;
position: static;
width: 70%;
}
#company_contents h3 {
height: auto;
margin: 0;
padding: 60px 0;
width: 180px;
}
#company_dl {
float: none;
height: auto;
position: static;
width: auto;
}
#company_contents dl {
height: auto;
margin: 0 auto;
position: static;
width: 70%;
}
#company_contents dl dt {
padding: 0 0 0 3px;
}
#company_contents dl dd {
padding: 4px 0 15px 3px;
}
#company_ul {
float: none;
height: auto;
position: static;
width: auto;
}
ul#company_office {
height: auto;
margin: 50px auto 0 auto;
position: static;
width: 70%;
}
ul#company_office li {
margin: 0 0 40px 0;
padding-left: 3px;
} #footer_last {
height: auto;
padding: 30px 0 25px 0;
width: 100%;
}
#footer_last ul#link {
padding: 0 30px 0 30px;
text-align: center;
}
#footer_last ul#link li {
line-height: 2.5em;
}
#copyright {
line-height: 1.8em;
padding: 30px 0 0 0;
text-align: center;
} #top_logo_bar_sp {
background-color: #fff;
display: block;
height: 68px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#top_logo_bar_sp p {
display: block;
height: auto;
left: 17px;
position: absolute;
top: 17px;
width: 170px;
}
#top_logo_bar_sp p img {
height: auto;
width: 100%;
} #top_logo_bar_page {
background-color: #fff;
bottom: auto;
height: 68px;
left: 0;
top: 0;
width: 100%;
}
body.single h1,
body.page h1 {
height: auto;
left: 17px;
position: absolute;
top: 17px;
width: 170px;
z-index: 100;
}
#footer_page {
padding: 20px 0;
width: auto;
}
ul#link_page {
height: auto;
padding: 20px 30px 0 30px;
text-align: center;
}
ul#link_page li {
line-height: 2.2em;
}
#copyright_page {
line-height: 1.8em;
padding: 30px 0 0 0;
text-align: center;
} #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 {
border: none;
margin: 80px 0 0 0;
padding: 10px 30px 30px 30px;
}
#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;
height: 32px;
width: 100%;
}
#contact_contents input[type="submit"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 45px;
width: 136px;
}
#contact_contents textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 170px;
width: 100%;
}
}   .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 {
clear: both;
content: " ";
display: block;
} .pagination {
list-style-type: none;
margin: 30px 0;
padding-left: 0;
}
.pagination,
.pagination li a {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pagination a {
border: 1px solid #ddd;
border-left-width: 0;
color: #333;
font-weight: 300;
min-height: 36px;
min-width: 36px;
padding-top: 1px;
text-decoration: none;
}
.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 {
left: -9999px; position: absolute;
top: -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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
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 {
left: -9999px; position: absolute;
top: -9999px;
}
.pagination li.previous a {
border-left-width: 1px;
}
}
@media only screen and ( max-width: 500px ) {
.pagination li {
left: -9999px; position: absolute;
top: -9999px;
}
.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next {
left: initial;
position: initial;
top: initial;
}
.pagination li.previous a {
border-left-width: 0;
}
}
@media only screen and ( max-width: 400px ) {
.pagination li.first,
.pagination li.last {
left: -9999px; position: absolute;
top: -9999px;
}
.pagination li.previous a {
border-left-width: 1px;
}
}
@media only screen and ( max-width: 240px ) { .pagination li {
width: 50%;
}
.pagination li.current {
border-left-width: 1px;
order: 2;
width: 100%;
}
}
.page-id-1669 #top_logo_bar_page,
.page-id-1669 #btn_gnav,
.page-id-1669 #footer_page {
display: none;
}
.top_contents_ttl,
.top_contents_ttl_jp {
display: none;
}