@charset "utf-8";

#main{
float: left;
width: 75%;
}
#main article .detail img {
max-width: 100%;
height: auto;
}
#main article h1.title{
font-weight: 500;
border-bottom:2px dashed #ffc799;
margin:0 auto;
text-align: center;
width: 100%;
font-size: 200%;
line-height: 130%;
margin-bottom: 5px;
}
#main article .date{
font-weight: 300;
margin-bottom: 10px;
color: #999;
text-align: right;
}
#main article{
margin-bottom: 60px;
}
#main article .beforeAfter {
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items:stretch;
}
#main article .beforeAfter .before,
#main article .beforeAfter .after{
flex-basis: 48%;
height: 100%;
text-align: center;
max-width: 48%;
}
#main article .beforeAfter .before {
position: relative;
}
#main article .beforeAfter .after {
margin-left: 8%;
}
#main article .beforeAfter .photoBox {
width: 100%;
height: 250px;
overflow: hidden;
border: 1px solid #ccc;
text-align: center;
padding: 2px;
}
#main article .beforeAfter .after .thumbnail {
margin-top: 5px;
}
#main article .beforeAfter .after .thumbnail li {
width: 32%;
float: left;
margin-right: 2%;
cursor: pointer;
transition: all .3s;
height: 100px;
overflow: hidden;
}
#main article .beforeAfter .after .thumbnail li.active {
opacity: 0.6;
}
#main article .beforeAfter .after .thumbnail li:hover {
opacity: 0.8;
}
#main article .beforeAfter .after .thumbnail li:nth-of-type(3) {
margin-right: 0;
}
#main article .beforeAfter .after .thumbnail li img{
width: 100%;
object-fit: cover;
border: 1px solid #ccc;
font-family: 'object-fit: cover;';
height: 100%;
}
#main article .beforeAfter .photoBox img {
max-width: 600px;
width: 100%;
object-fit: cover;
height: 250px;
font-family: 'object-fit: cover;';
}
#main article .beforeAfter .before:after{
content: "";
display: block;
background: url(/blog/reform/images/arrow.png) no-repeat 80% center;
background-size: contain;
width: 6%;
height: 100%;
position: absolute;
top: -5%;
right:-12%;
}
.beforeIcon,
.afterIcon{
border-radius: 15px;
padding:5px 5px;
line-height: 100%;
font-size: 90%;
font-weight: 500;
text-align: center;
width: 8em;
margin: 0 auto 5px;
}
.beforeIcon{
border:1px solid #ff7500;
color: #ff7500;
background:#fff;
}
.afterIcon{
background: #ff7500;
color: #fff;
}
#main article .freeArea img{
max-width: 1100px;
border: 1px solid #ddd;
margin:10px 0;
}
#main article .summary {
margin-top: 30px;
margin-bottom: 50px;
}
#main article .summary dl{
display: flex;
justify-content: space-between;
align-items:stretch;
flex-wrap: wrap;
margin-bottom: 1px;
}
#main article .summary dt,
#main article .summary dd{
padding:5px 10px;
font-size: 90%;
}
#main article .summary dt{
flex-basis: 20%;
text-align: left;
font-weight: 400;
background: #ffcda0;
max-width: 20%;
}
#main article .summary dd{
flex-basis: 80%;
border-bottom: 1px solid #eee;
font-weight: 300;
max-width: 80%;
}
#rightBox {
float: right;
width: 20%;
padding-top: 30px;
}
#rightBox h1{
background: #ff7500;
padding: 7px;
border-radius: 3px;
line-height: 100%;
color: #fff;
font-weight: 400;
margin-bottom: 10px;
text-align: center;
}
#categoryArchive,
#monthArchive {
margin-bottom: 30px;
}
#categoryArchive li,
#monthArchive li{
margin-bottom: 0.3em;
}
#categoryArchive li:before,
#monthArchive li:before{
content: "・";
color: #ff7500
}
#categoryArchive li a,
#monthArchive li a{
color: #666;
transition: all .4s;
}
#categoryArchive li a:hover,
#monthArchive li a:hover{
color: #ff7500;
}
#pagenation{
text-align: center;
margin:30px 0 60px;
}
#pagenation ul{
}
#pagenation li{
display: inline-block;
margin:0 0.1em;
}
#pagenation li.active{
padding: 0.2em 0.7em;
color: #333;
}
#pagenation li a{
font-weight: 400;
padding: 0.2em 0.7em;
background: #ddd;
color: #fff;
transition: all .4s;
border-radius: 3px;
}
#pagenation li a:hover{
background: #eee;
color: #ff7500;
text-decoration: none;
}
#pagenation li.prev a,
#pagenation li.next a{
color: #ff7500;
background:inherit;
font-weight: 800;
}
#pagenation li.prev a:hover,
#pagenation li.next a:hover{
background:transparent;
opacity: 0.6;
}
#case{
padding:60px 0;
}
#case h1{
background: url(/blog/images/case_icon.png) left bottom no-repeat;
font-weight: 500;
font-size: 250%;
width: 9em;
margin: 0 auto;
line-height: 100%;
padding-left: 50px;
padding-top:0.5em;
min-height: 38px;
margin-bottom: 30px;
}
#case .photoBox{
display: flex;
justify-content: space-between;
align-items:stretch;
flex-wrap: wrap;
}
#case .photoBox article{
flex-basis: 32%;
margin-bottom:1%;
}
#case .imgBox{
display:block;
position:relative;
border-radius: 6px;
transition: all .4s;
}
#case .imgBox:after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-sizing:border-box;
z-index:10;
border:13px solid #ccc;
border:13px solid rgba(255,255,255,0.8);
}
#case .imgBox:hover{
opacity: 0.7;
}
#case .imgBox img{
vertical-align:bottom;
position:relative;
z-index:-1;
width: 100%;
object-fit: cover;
height: 20vw;
font-family: 'object-fit: cover;'
}
#case .moreBt{
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}
#case h2{
background: url(/blog/images/case_part_icon.png) left bottom no-repeat;
font-weight: 500;
font-size: 130%;
width: 18em;
margin: 0 auto;
line-height: 100%;
padding-left: 30px;
min-height: 23px;
margin-bottom: 20px;
}
#case .partBox{
display: flex;
justify-content: space-between;
align-items:stretch;
flex-wrap: wrap;
}
#case .partBox li{
flex-basis: 13%;
background:#ff7500;
color: #fff;
font-weight: 500;
text-align: center;
border-radius: 4px;
font-size: 100%;
display: inline-block;
transition: all .4s;
line-height: 120%;
} #case .partBox li:hover{
opacity: 0.7;
color: transparent;
width: 100%;
}
#case .partBox li a{
display: block;
width: 100%;
height: 100%;
}
#case .partBox li a span {
display: block;
color: #fff;
width: 100%;
height: 100%;
padding:25px 3px 18px;
background-color: #ff7500;
margin-top: 2px;
}
#case .partBox li a:before {
content: '';
display: block;
height: 160px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: transparent;
}
#case .partBox li#bath a:before {
background-image: url(//www.gwoodyhome.jp/images/top/bath_bg.jpg);
}
#case .partBox li#kitchen a:before {
background-image: url(//www.gwoodyhome.jp/images/top/kitchen_bg.jpg);
}
#case .partBox li#wc a:before {
background-image: url(//www.gwoodyhome.jp/images/top/wc_bg.jpg);
}
#case .partBox li#outer a:before {
background-image: url(//www.gwoodyhome.jp/images/top/outer_bg.jpg);
}
#case .partBox li#exterior a:before {
background-image: url(//www.gwoodyhome.jp/images/top/exterior_bg.jpg);
}
#case .partBox li#new a:before {
background-image: url(//www.gwoodyhome.jp/images/top/new_bg.jpg);
}
#case .partBox li#etc a:before {
background-image: url(//www.gwoodyhome.jp/images/top/etc_bg.jpg);
}
#case .partBox li {
background-color: transparent;
} @media screen and (max-width: 1000px) {
#main article .beforeAfter .photoBox {
height: 26vw;
}
#main article .beforeAfter .photoBox img {
height: 26vw;
}
#case .imgBox img{
height: 30vw;
}
} @media screen and (max-width: 760px) {
#main article .beforeAfter .after .thumbnail li {
height: 60px;
}
#case .photoBox article {
flex-basis: 32.5%;
margin-bottom: 0.5%;
}
#case .imgBox::after {
border: 8px solid #ccc;
border: 8px solid rgba(255,255,255,0.8);
}
} @media screen and (max-width: 600px) {
#main{
float: none;
width: 100%;
}
#main article h1.title{
font-size: 140%;
margin-bottom: 10px;
}
article{
margin-bottom: 30px;
}
article .detail img{
width: 100%;
height: auto;
margin: auto;
float: none;
}
#main article .beforeAfter .photoBox {
height: 30vw;
}
#main article .beforeAfter .photoBox img {
height: 30vw;
}
#main article .beforeAfter .before::after {
top: -10%;
}
#main article .summary dt {
flex-basis: 33%;
max-width: 33%;
}
#main article .summary dd {
flex-basis: 65%;
max-width: 65%;
}
#rightBox {
float: none;
width: 100%;
padding-top: 0;
}
#pagenation li.active{
padding: 0.1em 0.3em;
}
#pagenation li a{
padding: 0.1em 0.6em;
}
#pagenation li a:hover{
background:#ddd;
color: #fff;
}
#pagenation li.prev a:hover,
#pagenation li.next a:hover{
opacity: 1;
}
#case {
padding: 40px 0;
}
#case h1 {
font-size: 140%;
width: 10em;
margin-bottom: 20px;
}
#case .photoBox article {
flex-basis: 47.5%;
margin-bottom: 1.5%;
}
#case .imgBox::after {
border: 6px solid #ccc;
border: 6px solid rgba(255,255,255,0.8);
}
#case .moreBt{
margin:10px 0 20px;
}
#case .moreBt a{
padding: 10px 5px;
width: 100%;
}
#case .moreBt a:hover{
background: #fff;
color: #ff7500;
border: 2px solid #ff7500;
}
#case h2 {
font-size: 100%;
margin-bottom: 10px;
}
#case .partBox li {
flex-basis: 49%;
margin-bottom: 18px;
}
#case .partBox li:last-of-type {
flex-basis: 100%;
}
#case .partBox li a{
margin-top: 3px;
} #case .partBox li:hover {
opacity: 1
}
#case .partBox li#etc a:before {
background-image: url(//www.gwoodyhome.jp/images/top/etc_bg_sp.jpg);
}
}