jscss
pg_works.css （施工事例の全記事）
/*事例例テンプレート用*/
.pg_works_demand,
.pg_works_proposal {
table-layout: fixed;
width: 100%;
}
.pg_works_demand th,
.pg_works_proposal th {
background: #666;
box-shadow: 0 0 0 2px #666 inset, 0 0 0 5px #fff inset;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 1.1em;
font-weight: bolder;
margin-bottom:3%;
min-width: 170px;
padding: 10%;
text-align: center;
vertical-align: top;
width: 25%;
}
.pg_works_demand td,
.pg_works_proposal td {
box-sizing: border-box;
padding: 1%;
width: 74%;
}
.pg_works_data {
margin-bottom: 3%;
}
.pg_works_data th {
width: 15%;
background: #eee;
padding: 2%;
text-align: center;
}
.pg_works_data td {
width: 30%;
vertical-align: top;
padding: 2%;
}
.pg_works_data th,
.pg_works_data td {
box-sizing: border-box;
border-bottom: solid #bbb 1px;
}
.pg_works_construction {
background: #666;
box-shadow: 0 0 0 2px #666 inset, 0 0 0 5px #fff inset;
color: #fff;
font-weight: bolder;
width: 100%;
font-size: 1.5em;
letter-spacing: 1px;
padding: 3% 1%;
margin: 3% 0 1% 0;
text-align: center;
box-sizing: border-box;
}
@media screen and (max-width:640px) {
.pg_works_demand th,
.pg_works_proposal th,
.pg_works_demand td,
.pg_works_proposal td {
width: 100%;
display: block;
}
.pg_works_demand th,
.pg_works_proposal th {
padding: 5%;
margin-bottom:1%;
}
.pg_works_construction {
font-size: 1.2em;
}
}
/* 事例スライダー追加 */
#jirei_entry .bx-wrapper{
margin-bottom: 10px;
max-width: 720px !important;
margin: 0 auto 2%;
}
.bx-wrapper .bx-viewport{
border: none;
box-shadow: none;
height: auto;
width: 100%!important;
}
.bxslider_works_temp_01 .gallery-item {
width: auto !important;
margin: 0 auto !important;
padding: 0 !important;
left: 0;
right: 0;
text-align: center;
}
.bxslider_works_temp_01 .gallery-item img {
width: auto !important;
margin: 0 auto !important;
}
.bxslider_works_temp_02 .gallery-item {
padding: 0 !important;
margin-right: 10px;
}
.bxslider_works_temp_02 .gallery-item a {
display: block;
width: 100%;
height: 75px;
overflow: hidden;
}
.bxslider_works_temp_02 .gallery-item a img {
position: absolute;
left: -50%;
right: -50%;
display: block;
width: auto;
height: 75px;
margin: 0 auto;
max-width: initial;
}
@media screen and (max-width:1024px) {
.bxslider_works_temp_01 .gallery-item img {
width: auto !important;
height: 100% !important;
}
.bxslider_works_temp_02 .gallery-item a {
width: 100%;
}
.bxslider_works_temp_02 .gallery-item a img {
width: auto !important;
}
}
@media screen and (max-width:640px) {
.bxslider_works_temp_01 .gallery-item img {
height: auto !important;
max-height: 40vh;
}
}
@media screen and (max-width:360px) {
.bxslider_works_temp_02 .gallery-item a {
height: 21vw;
}
.bxslider_works_temp_02 .gallery-item a img {
height: 21vw;
}
}
div.controlWrap {
width: 680px;
display: block;
position: relative;
margin: 0 auto;
}
div.controlWrap .bx-wrapper .bx-viewport {
height: auto !important;
}
div.controlWrap p#PrevIcon a {
display: block;
width: 32px;
height: 32px;
position: absolute;
background: url(https://www.toivo.co.jp/images/parts_db/btn_prev.png) left center no-repeat;
color: #fff;
top: 20px;
left: -20px;
text-indent: -9999px;
}
div.controlWrap p#NextIcon a {
display: block;
width: 32px;
height: 32px;
position: absolute;
background: url(https://www.toivo.co.jp/images/parts_db/btn_next.png) left center no-repeat;
color: #fff;
top: 20px;
right: -20px;
text-indent: -9999px;
}
@media screen and (max-width:1024px) {
div.controlWrap {
width: 90%;
max-width: 730px;
}
div.controlWrap p#PrevIcon a {
left: -5%;
}
div.controlWrap p#NextIcon a {
right: -5%;
}
}
@media screen and (max-width:640px) {
#jirei_entry .bx-wrapper .bx-viewport,
.bxslider_works_temp_01 .gallery-item {
max-height: 40vh;
}
}