@charset "UTF-8";
/* CSS Document */

#topLink ul, #news ul, #reform ul, #works ul, ul#message, ul#recruitLink {
list-style-type: none;
padding-left: 0;
}

#main {
max-width: 100%;
overflow: hidden;
}

#topLink p {
text-align: center;
font-weight: bold;
}
#topLink h2 {
text-align: center;
}
#topLink h2 span {
display: block;
color: #CB000B;
}
#topLink ul {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
#topLink ul li a {
display: block;
position: relative;
background: #000;
}
#topLink ul li a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
color: #fff;
font-weight: bold;
}
#topLink ul li a img {
opacity: .5;
}

#news ul li {
border-bottom: 1px solid #070707;
}
#news ul li a {
display: block;
position: relative;
}
#news ul li a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
color: #CB000B;
}
#news ul li a time {
display: block;
font-size: 0.8em;
color: #CB000B;
}

#reform ul li a {
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#kitchen a {
background-image: url("../images/kitchen.webp");
}
#bath a {
background-image: url("../images/bath.webp");
}
#toilet a {
background-image: url("../images/toilet.webp");
}
#dresser a {
background-image: url("../images/dresser.webp");
}
#gas a {
background-image: url("../images/gas.webp");
}
#faucet a {
background-image: url("../images/faucet.webp");
}
#stove a {
background-image: url("../images/stove.webp");
}
#range a {
background-image: url("../images/range.webp");
}
#exterior a {
background-image: url("../images/exterior.webp");
}
#outdoor a {
background-image: url("../images/outdoor.webp");
}
#reform ul li a span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
background: rgba(0,0,0,0.8);
}
a.banner {
display: block;
}

#works ul li {
background: #CDD6DD;
}
#works ul li img.object-fit-img{
object-fit: cover;
font-family: 'object-fit: cover;'
}
#works ul li h3 {
display: table;
margin: 0 auto;
}
#works ul li span {
display: table;
background: #00267F;
color: #fff;
margin: 0 auto;
line-height: 100%;
}

#sdgs, #sdgs img {
position: relative;
}
#sdgs a {
position: absolute;
z-index: 1;
background: #fff;
left: 50%;
transform: translateX(-50%);
}

#ceo {
position: relative;
}
#ceo:before {
position: absolute;
content: "MESSAGE";
display: block;
z-index: 2;
color: #fff;
opacity: .3;
font-weight: bold;
font-family: Helvetica, YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
left: 50%;
transform: translateX(-50%);
}
#ceo:after {
position: absolute;
width: 100%;
height: 75%;
content: "";
display: block;
left: 0;
bottom: 0;
background: #807979;
z-index: 1;
}
#ceo img {
display: block;
position: relative;
z-index: 3;
margin-left: auto;
}
#ceo div {
position: absolute;
z-index: 4;
color: #fff;
}
#ceo p span {
font-weight: bold;
}
#ceo a {
display: block;
position: relative;
background: #fff;
}
#ceo a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
}
ul#message li a {
display: block;
position: relative;
}
ul#message li a img {
position: relative;
z-index: 1;
}
ul#message li a div {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
}
ul#message li a h3 {
color: #fff;
font-weight: normal;
margin-top: auto;
text-shadow: 0 0 10px #000;
}
ul#message li a h3 span {
display: block;
font-weight: bold;
font-family: Helvetica, YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
}

ul#recruitLink li a {
display: block;
position: relative;
}
ul#recruitLink li a img {
position: relative;
z-index: 1;
}
ul#recruitLink li a span {
display: table;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: #CB000B;
}
ul#recruitLink li a span:before {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
}

#main > section#access {
padding-bottom: 0;
}

.campaign{
position: fixed;
z-index: 18;
}
.campaign.close{
display: none;
}
.campaign__btn{
color: #070707;
display: table;
cursor: pinter;
}
.campaign__btn:hover {
cursor: pinter;
}

@media (max-width: 560px){
.slider .slick-slide{
margin-right: 5px !important;
margin-left: 5px !important;
}

#topLink {
padding: 30px 0 80px;
}
#topLink p {
font-size: 4vw;
padding-bottom: 30px;
}
#topLink h2 {
font-size: 5vw;
padding-bottom: 30px;
}
#topLink h2 span {
font-size: 6vw;
padding-bottom: 6px;
}
#topLink ul li a span {
white-space: nowrap;
}
#area {
padding-bottom: 80px;
margin-bottom: 10px;
background: url("../images/machi.webp") repeat-x center bottom;
background-size: auto 60px;
}

#news ul {
border-left: 8px solid #CB000B;
padding: 0 0 10px 15px;
margin-bottom: 30px;
}
#news ul li a {
font-size: 1.6rem;
padding: 8px 0;
}

#reform ul li {
margin-bottom: 10px;
}
a.banner {
margin-top: 20px;
}

#works ul {
padding-bottom: 40px;
}
#works ul li {
padding-bottom: 10px;
margin-bottom: 40px;
}
#works ul li:last-child {
margin-bottom: 0;
}
#works ul li img.object-fit-img{
height: 180px;
}
#works ul li h3 {
padding: 20px 8px 16px;
font-size: 1.8rem;
}
#works ul li p {
padding: 0 8px 16px;
}
#works ul li span {
padding: 8px 20px 10px;
border-radius: 16px;
}

#about > div img {
padding-bottom: 30px;
}
#about h3 {
text-align: center;
font-size: 7vw;
padding-bottom: 20px;
}
#about p {
line-height: 150%;
padding-bottom: 30px;
}

#sdgs {
margin-bottom: 80px;
}
#sdgs a {
width: 90%;
bottom: -10px;
border: 1px solid #000;
}

#ceo {
margin-bottom: 40px;
}
#ceo img {
width: 60vw;
}
#ceo div {
left: 10px;
bottom: 10px;
}
#ceo:before {
font-size: 18vw;
bottom: 40px;
}
#ceo h3 {
font-size: 4.5vw;
padding-bottom: 10px;
}
#ceo p {
padding-bottom: 20px;
}
#ceo p span {
font-size: 1.8rem;
padding-left: 20px;
}
#ceo a {
width: 240px;
padding: 4px 10px;
}
#message li {
margin-bottom: 30px;
}
#message li a div {
padding: 10px;
}
ul#message li a h3 span {
font-size: 3rem;
padding-bottom: 6px;
}
#ul#recruitLink {
padding-bottom: 40px;
}
ul#recruitLink li {
margin-top: 20px;
}
ul#recruitLink li a span {
top: 50%;
font-size: 1.8rem;
padding-right: 40px;
}

#access iframe {
height: 50vh;
}

.campaign {
top: 0;
left: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.70);
padding: 0;
display: grid;
place-items: center;
}
.campaign__btn {
font-size: 2.6rem;
display: block;
color: #fff;
padding-bottom: 20px;
}
.campaign > div {
display: block;
width: 80%;
}
}

@media (min-width: 561px){
.slider .slick-slide{
margin-right: 10px !important;
margin-left: 10px !important;
}

#topLink {
padding: 40px 0 120px;
}
#topLink p {
font-size: 2.8rem;
padding-bottom: 40px;
}
#topLink h2 {
font-size: 3.6rem;
padding-bottom: 60px;
}
#topLink h2 span {
font-size: 5rem;
padding-bottom: 10px;
}
#topLink ul {
display: flex;
flex-wrap: wrap;
}
#topLink ul li {
width: 50%;
}
#topLink ul li:nth-child(even), #reform ul li:nth-child(even) {
animation-duration:0.8s;
}
#area {
padding-bottom: 160px;
margin-bottom: 20px;
background: url("../images/machi.webp") repeat-x center bottom;
background-size: auto 100px;
}

#news ul {
border-left: 16px solid #CB000B;
padding: 0 0 10px 50px;
margin-bottom: 40px;
}
#news ul li a {
font-size: 2rem;
padding: 10px 0;
}

#reform ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#reform ul li {
width: 48%;
margin-bottom: 20px;
}
a.banner {
margin-top: 30px;
}

#works ul {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
}
#works ul li {
width: 32%;
padding-bottom: 20px;
}
#works ul li img.object-fit-img{
height: 240px;
}
#works ul li h3 {
padding: 30px 10px 20px;
font-size: 2.2rem;
}
#works ul li p {
padding: 0 10px 20px;
}
#works ul li span {
padding: 8px 20px 10px;
border-radius: 32px;
}

#about > div {
display: flex;
}
#about > div img {
width: 40%;
height: 100%;
}
#about > div div {
width: 60%;
box-sizing: border-box;
padding: 0 30px;
}
#about h3 {
padding-bottom: 30px;
}
#about p {
font-size: 1.8rem;
line-height: 180%;
padding-bottom: 60px;
}

#sdgs {
margin-bottom: 120px;
}

#ceo, #message {
margin-bottom: 50px;
}
#ceo h3 {
padding-bottom: 10px;
}
#ceo p {
font-size: 1.8rem;
padding-bottom: 40px;
}
#ceo p span {
font-size: 3rem;
padding-left: 40px;
}
#message {
display: flex;
}
#message li {
width: 33.33333%;
}
ul#recruitLink {
display: flex;
justify-content: space-between;
padding-bottom: 60px;
}
ul#recruitLink li {
width: 48%;
}
ul#recruitLink li a span {
top: 45%;
font-size: 2rem;
padding-right: 30px;
}

#access iframe {
height: 500px;
}

.campaign{
width: 300px;
bottom: 120px;
right: 5%;
}
.campaign.close{
display: none;
}
.campaign__btn{
font-size: 3rem;
}
}

@media (min-width: 561px) and (max-width: 960px){
#about h3 {
font-size: 2.6rem;
}

#sdgs a {
bottom: 30px;
}

#ceo img {
width: 300px;
}
#ceo div {
left: 20px;
bottom: 40px;
}
#ceo:before {
font-size: 14rem;
bottom: 20px;
}
#ceo h3 {
font-size: 2.4rem;
}
#ceo a {
width: 280px;
padding: 8px 16px;
font-size: 1.8rem;
}
#message li a div {
padding: 16px 10px;
}
ul#message li a h3 span {
font-size: 3.6rem;
padding-bottom: 8px;
}
}

@media (max-width: 960px){
#topLink ul li a {
font-size: 2.4rem;
}

#news ul li a:before {
right: 0;
}

#reform ul li a {
padding: 80px 0;
}
#reform ul li a span {
width: 240px;
font-size: 1.6rem;
padding: 6px 0;
}

#ceo a:before {
right: 10px;
}
ul#message li a h4 {
font-size: 1.3rem;
}
ul#message li a h3 {
font-size: 1.6rem;
}
ul#message li a h3 br {
display: none;
}
}

@media (min-width: 961px){
#topLink ul li a {
font-size: 2.8rem;
overflow: hidden;
}
#topLink ul li a img {
transition: .6s;
}
#topLink ul li a:hover img {
filter: blur(15px);
transform: scale(1.1);
}

#news ul li a:before {
right: 20px;
transition: .6s;
}
#news ul li a:hover:before {
right: 0;
}

#reform ul li a, #reform ul li a span, #reform > a img, #works ul li a span {
transition: .6s;
}
#reform ul li a {
padding: 100px 0;
transition: .6s;
}
#reform ul li a:hover {
padding: 0;
}
#reform ul li a span {
width: 280px;
font-size: 1.8rem;
padding: 8px 0;
}
#reform ul li a:hover span {
width: 100%;
padding: 108px 0;
}
#reform > a:hover img {
transform: scale(1.05);
}

#works ul li a:hover span {
color: #00267F;
background: #fff;
}

#about h3 {
font-size: 3rem;
}

#sdgs a {
bottom: 50px;
}

#ceo img {
width: 400px;
}
#ceo div {
left: 30px;
bottom: 50px;
}
#ceo:before {
font-size: 19rem;
bottom: 10px;
}
#ceo h3 {
font-size: 3rem;
}
#ceo a {
width: 320px;
padding: 10px 20px;
font-size: 2rem;
transition: .6s;
}
#ceo a:before {
right: 20px;
transition: .3s;
}
#ceo a:hover {
box-shadow: 0 0 10px #000;
}
#ceo a:hover:before {
right: 15px;
}
ul#recruitLink li a span:before {
transition: .3s;
}
ul#recruitLink li a:hover span:before {
right: 0;
}
#message li {
overflow: hidden;
}
#message li a div {
padding: 20px 40px;
}
ul#message li a h3 span {
font-size: 5rem;
padding-bottom: 10px;
}
#message li a img {
transition: .6s;
}
#message li a:hover img {
transform: scale(1.05);
}
}