main{ padding: 50px 0 0;}
.sus{ margin: 0 calc(50% - 50vw); padding: 0; width: 100vw; background: #E1E1E1; color: #646464;}
.sus-top{ margin: 0 calc(50% - 50vw); padding: 0; width: 100vw; background: url("/img/sustainability/main_index.jpg") no-repeat top center / cover; background-attachment: fixed; color: #fff;}

@media screen and (max-width: 1024px){
    main{ padding: 0;}
    .sus{ margin: 0; background: none; color: #646464;}
    .sus-top{ background: none; background-attachment: inherit;}
    .sus-top:before{ position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url("/img/sustainability/main_index_sp.jpg") no-repeat 50% 100% / cover; content: "";}
}

.hero{ display: flex; flex-direction: column; margin: 0; height: 48.4375vw; align-items: center; justify-content: center;}
.hero h2{ width: 57.291vw; letter-spacing: .15em; font-weight: 500; font-size: 2.864vw; font-family: ryo-text-plusn, serif; line-height: .63;}
.hero h2 em{ display: block; margin: 1.5625vw 0 0; letter-spacing: .2em; font-weight: 400; font-style: normal; font-size: 0.937vw; font-family: new-frank, sans-serif; line-height: 2.7;}
.hero .lead{ position: relative; display: flex; margin: 4.166vw 0 0; width: 57.291vw; font-size: 0.677vw; line-height: 2.3; justify-content: space-between;}
.hero .lead:after{ position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #fff; content: "";}
.hero .lead > p{ width: calc(50% - 2.864vw);}
.hero .lead > p + p{ font-size: 0.625vw; font-family: ryo-gothic-plusn, sans-serif; line-height: 2;}

@media screen and (max-width: 1024px){
    .hero{ padding: 86.666vw 12vw 0; height: auto; justify-content: flex-start;}
    .hero h2{ width: 100%; font-size: 8.8vw; line-height: 1.5;}
    .hero h2 em{ margin: 6.666vw 0 0; font-size: 2.933vw; line-height: 1.8;}
    .hero .lead{ flex-direction: column; margin: 130px 0 0; width: 100%; font-size: 1.2rem; line-height: 2.5;}
    .hero .lead:after{ content: none;}
    .hero .lead > p{ width: 100%;}
    .hero .lead > p + p{ margin: 60px 0 0; padding: 60px 0 0; border-top: 1px solid; font-size: 1.2rem; line-height: 2.5;}
}

.sec1{ padding: 180px 1.82vw;}
.list-cn{ display: flex; justify-content: space-between;}
.list-cn > li{ display: block; padding: 140px 0.625vw; width: calc(25% - 0.625vw); background: #fff; color: #646464; text-align: center; text-decoration: none;}
.list-cn h3{ display: flex; margin: 0 auto; padding: 0 0 15px; width: calc(100% - 3.125vw); height: 6.77vw; border-bottom: 1px solid #707070; letter-spacing: .1em; font-weight: 500; font-size: 1.354vw; font-family: ryo-text-plusn, serif; line-height: 1.53; align-items: flex-end; justify-content: center;}
.list-cn p{ padding: 15px 0 0; color: #646464; letter-spacing: .17em; font-size: 0.729vw; font-family: "Yu Gothic Pr6N M";}
.list-cn a{ display: block; margin: 60px auto 0; width: 9.635vw;}
.list-cn .credit{ margin: 15px 0 0; color: #646464; font-size: 0.520vw; font-family: new-frank, sans-serif;}

@media screen and (max-width: 1024px){
    .sec1{ margin: 0; padding: 0;}
    .list-cn{ flex-direction: column;}
    .list-cn > li{ margin: 300px 0 0; padding: 32vw 5.333vw; width: 100%;}
    .list-cn h3{ padding: 0 0 15px; width: calc(100% - 13.32vw); height: 29.333vw; font-size: 2.1rem; line-height: 1.53;}
    .list-cn p{ font-size: 1.1rem;}
    .list-cn a{ margin: 50px auto 0; width: 41.6vw;}
    .list-cn .credit{ font-size: 0.8rem;}
}

.sec2{ margin: 0 auto; padding: 180px 0 270px; width: 750px;}
.sec2 h3{ text-align: center;}
.sec2 h3 span{ display: inline-block; padding: 40px 50px; border: 1px solid; letter-spacing: .15em; font-weight: 500; font-size: 2.2rem; font-family: ryo-text-plusn, serif; line-height: 1;}
.sec2 h4{ margin: 180px 0 0; letter-spacing: .15em; font-weight: 500; font-size: 3rem; font-family: ryo-text-plusn, serif; line-height: 1.5;}
.sec2 p{ margin: 70px 0 0; letter-spacing: .1em; font-size: 1.3rem; line-height: 2.3;}
.sec2 p + p{ margin: 45px 0 0;}
.sec2 .right{ margin: 70px 0 0; text-align: right; letter-spacing: .13em; font-size: 1.6rem; font-family: "Yu Gothic Pr6N M"; line-height: 1.875;}
.sec2 h5{ margin: 200px 0 0; letter-spacing: .15em; font-weight: 600; font-size: 2.5rem;}
.sec2 dl{ position: relative; display: flex; margin: 30px 0 0; padding: 60px 0 120px; font-size: 2rem; font-family: "Yu Gothic Pr6N M"; line-height: 1.9; flex-wrap: wrap;}
.sec2 dl:before{ position: absolute; top: 0; left: 74px; width: 1px; height: 100%; background: #fff; content: "";}
.sec2 dt{ width: 74px; height: 100%; letter-spacing: .13em;}
.sec2 dd{ position: relative; margin: 0 0 90px; padding: 0 0 0 100px; width: calc(100% - 74px); letter-spacing: normal;}
.sec2 dd:before{ position: absolute; top: 18px; left: 0; width: 79px; height: 1px; background: #fff; content: "";}
.sec2 dl > dd:last-of-type{ margin: 0;}

@media screen and (max-width: 1024px){
    .sec2{ margin: 0; padding: 200px 12vw 160px; width: 100%;}
    .sec2 h3 span{ display: block; padding: 40px 0;}
    .sec2 h4{ margin: 100px 0 0; font-size: 2.2rem; line-height: 1.7;}
    .sec2 p{ margin: 65px 0 0; letter-spacing: .13em; font-size: 1.2rem; line-height: 2.5;}
    .sec2 p + p{ margin: 40px 0 0;}
    .sec2 .right{ margin: 65px 0 0; font-size: 1.2rem; line-height: 2.5;}
    .sec2 h5{ margin: 100px 0 0; letter-spacing: normal; font-size: 1.6rem;}
    .sec2 dl{ flex-direction: column; margin: 50px 0 0; padding: 0 0 40px 5.333vw; font-size: 1.2rem; line-height: 2.5;}
    .sec2 dl:before{ left: 0;}
    .sec2 dt{ position: relative; width: 100%;}
    .sec2 dt:before{ position: absolute; top: 14px; left: -5.333vw; width: 3.4666vw; height: 1px; background: #fff; content: "";}
    .sec2 dd{ margin: 0 0 50px; padding: 0; width: 100%;}
    .sec2 dd:before{ content: none;}
}

.fixlogo{ position: fixed; top: 50%; left: 1.82vw; transform: translate(0,-50%);}
.fixlogo img{ width: .9375vw;}

@media screen and (max-width: 1024px){
    .fixlogo{ display: none;}
}



.hero2{ position: relative; display: flex; flex-direction: column; padding: 4.166vw 3.385vw 4.166vw; height: 48.4375vw; background: no-repeat top center / cover; color: #fff; justify-content: space-between; align-items: flex-start;}
.hero2.furniture{ background-image: url("/img/sustainability/main_furniture.jpg");}
.hero2.nature{ background-image: url("/img/sustainability/main_nature.jpg");}
.hero2.supply-chain{ background-image: url("/img/sustainability/main_supply-chain.jpg");}
.hero2.staff{ background-image: url("/img/sustainability/main_staff.jpg"); color: #646464; align-items: flex-end;}
.hero2 h2{ white-space: nowrap; letter-spacing: .1em; font-weight: 500; font-size: 2.864vw; font-family: ryo-text-plusn, serif; line-height: 1.36;}
.hero2 h2 em{ display: block; margin: 1.562vw 0 0; letter-spacing: .1em; font-weight: 400; font-style: normal; font-size: 0.937vw; font-family: new-frank, sans-serif; line-height: 1;}
.hero2 .lead{ width: 19.635vw; letter-spacing: .1em; font-size: 0.833vw; line-height: 2.125;}

@media screen and (max-width: 1024px){
    .hero2{ position: relative; padding: 86.666vw 12vw 45.333vw; height: auto; background: none; justify-content: flex-start;}
    .hero2:before{ position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: no-repeat top center / cover; content: "";}
    .hero2.furniture,
    .hero2.nature,
    .hero2.supply-chain,
    .hero2.staff{ background: none;}
    .hero2.furniture:before{ background-image: url("/img/sustainability/main_furniture_sp.jpg");}
    .hero2.nature:before{ background-image: url("/img/sustainability/main_nature_sp.jpg");}
    .hero2.supply-chain:before{ background-image: url("/img/sustainability/main_supply-chain_sp.jpg");}
    .hero2.staff:before{ background-image: url("/img/sustainability/main_staff_sp.jpg");}
    .hero2 h2{ width: 100%; font-size: 8.8vw; line-height: 1.5;}
    .hero2 h2 em{ margin: 6.666vw 0 0; font-size: 2.933vw; line-height: 1.8;}
    .hero2 .lead{ margin: 130px 0 0; width: 100%; letter-spacing: .13em; font-size: 1.2rem; line-height: 2.5;}
}

.sec{ margin: 0 auto; padding: 200px 0; width: 1100px; background: #E1E1E1;}
.sec h3{ letter-spacing: .15em; font-weight: 600; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .sec{ padding: 80px 12vw 130px; width: 100%;}
    .sec h3{ font-size: 2.2rem; line-height: 1.6;}
}

.list-pt{ margin: 50px 0 0; letter-spacing: .15em; font-weight: 600; font-size: 2rem;}
.list-pt > li{ padding: 50px 0; border-bottom: 1px solid #C8C8C8;}
.list-pt > li:last-child{ border: none;}
.list-pt .link{ display: flex; padding: 25px 0 0; font-weight: 400; font-size: 1.6rem;}
.list-pt .link + .link{ padding: 10px 0 0;}
.list-pt .link a{ position: relative; display: inline-block; padding: 0 30px 0 0; color: #646464; text-decoration: none;}
.list-pt .link a:after{ position: absolute; top: 50%; right: 0; width: 20px; height: 20px; background: url("/img/sustainability/arrow.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
.list-pt .link a + a{ margin: 0 0 0 40px;}

@media screen and (max-width: 1024px){
    .list-pt{ margin: 60px 0 0; font-size: 1.4rem;}
    .list-pt > li{ padding: 40px 0;}
    .list-pt .link{ flex-direction: column; padding: 20px 0 0; font-size: 1.2rem; align-items: flex-start;}
    .list-pt .link a{ padding: 0 20px 0 0;}
    .list-pt .link a:after{ top: auto; bottom: 4px; width: 15px; height: 15px; transform: translate(0,0);}
    .list-pt .link a + a{ margin: 0;}
}

.flex1{ position: relative;}
.flex1 > figure{ position: absolute; top: 0; right: 0; width: 455px;}
.flex1 > .list-pt{ display: flex; flex-direction: column; width: auto; align-items: flex-start; justify-content: flex-start;}
.flex1 > .list-pt > li{ padding: 50px 80px 50px 0;}
.flex1 > .list-pt > li:first-child{ padding: 50px 0;}

@media screen and (max-width: 1024px){
    .flex1 > figure{ position: relative; top: auto; right: auto; padding: 65px 0 0; width: 100%;}
    .flex1 > .list-pt{ display: block;}
    .flex1 > .list-pt > li{ padding: 40px 0;}
    .flex1 > .list-pt > li:first-child{ padding: 40px 0;}
}

.list-img{ display: flex; margin: 150px 0 0; justify-content: space-between;}
.list-img > li{ width: calc(25% - 10px);}

@media screen and (max-width: 1024px){
    .list-img{ flex-direction: column; margin: 13.333vw 0 0;}
    .list-img > li{ padding: 4vw 0 0; width: 100%;}
}

.sus nav{  background: #E1E1E1;}
.sus nav ul{ display: flex;}
.sus nav ul > li{ width: 25%;}
.sus nav a{ position: relative; display: flex;}
.sus nav a figure{ position: relative; overflow: hidden;}
.sus nav a figure:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); content: "";}
.sus nav a figure img{ transition: all .2s ease;}
.sus nav a .detail{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; padding: 1.822916667vw; width: 100%; height: 100%; color: #fff; font-weight: 500; font-size: 0.729vw; justify-content: flex-end;}
.sus nav a .detail em{ padding: 1.041vw 0 0; letter-spacing: .05em; font-style: normal; font-size: 1.145vw; font-family: new-frank, sans-serif; line-height: 1.59;}

.sus nav a:hover img{ opacity: 1;}
.sus nav a:hover figure img{ transform: scale(1.1);}
.sus nav a:hover figure:after{ content: none;}

@media screen and (max-width: 1024px){
    .sus nav ul{ flex-direction: column; margin: 0 -15px;}
    .sus nav ul > li{ padding: 2.666vw 0 0; width: 100%;}
    .sus nav ul > li:first-child{ padding: 0;}
    .sus nav a .detail{ padding: 8vw 6.4vw; font-size: 1rem; justify-content: flex-start;}
    .sus nav a .detail em{ padding: 2.666vw 0 0; font-size: 1.7rem;}
    .sus nav a:hover figure img{ transform: none;}
    .sus nav a:hover figure:after{ content: "";}
}

.backindex{ padding: 50px 0; background: #E1E1E1; text-align: center;}
.backindex a{ display: inline-block; width: 285px;}

@media screen and (max-width: 1024px){
    .backindex{  padding: 50px 12vw;}
    .backindex a{ display: block; width: 100%;}
}

.sec3{ margin: 0 calc(50% - 50vw); padding: 50px 0; background: #E1E1E1; text-align: center;}
.sec3 a{ display: inline-block; width: 285px;}

@media screen and (max-width: 1024px){
    .sec3{ margin: 0; padding: 50px 12vw;}
    .sec3 a{ display: block; width: 100%;}
}