@charset "UTF-8";

.brownBox span{
    background: #826e60;
    color: #fff;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.4;
    padding: 3px 5px 5px;
    width: 240px;
    text-align: center;
    font-weight: 100;
    display: block;
}

/*---------------------------------------------sec-01-----*/

#sec-01{
    background: url(../img/sec01-bg.jpg) no-repeat;
    background-size: cover;
    padding: 180px 0 0;
    position: relative;
}

#sec-01 .bgText{
    color: #fff;
    position: absolute;
    left: 90%;
    top: 40px;
    width: 100%;
    line-height: 1;
    z-index: 2;
    writing-mode: vertical-lr;
    font-size: 100px;
}

#sec-01 .head42{
    margin-bottom: 60px;
    margin-left: 10%;
}

.flex-sec01{
    justify-content: space-between;
}

.sec01-detail{
    margin-left: 10%;
    width: 40%;
}

.sec01-detail .head34{
    font-weight: 100;
    margin-bottom: 80px;
}

.sec01-img{
    margin: 0 0 -100px;
    width: 50%;
    max-width: 800px;
}

/*---------------------------------------------sec-02-----*/

#sec-02{
    padding: 160px 0 180px;
}

.sec02-head{
    margin-bottom: 90px;
}

.sec02-head .head30{
    font-weight: 100;
    line-height: 1.2;
    text-align: center;
}

.sec02-head .head40{
    text-align: center;
    margin-bottom: 40px;
}

.sec02-head .text16{
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
}

.flex-sec02{
    justify-content: space-between;
    margin-bottom: 150px;
}

.flex-sec02 .sec02-img{
    width: 60%;
    max-width: 850px;
}

.sec02-en{
    margin-top: 80px;
    color: rgba(5,24,9,0.1);
    font-size: 100px;
    font-size: 10rem;
    line-height: 1.2 !important;
}

.sec02-detail{
    margin: 0 5%;
    width: 40%;
}

.sec02-detail .brownBox-wrap{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 80px;
}

.brownBox{
    text-align: right;
}

.sec02-detail .head36{
    margin-bottom: 50px;
}

.sec02-detail .text16{
    margin-bottom: 100px;
}

.flex-sec02:nth-of-type(2) .sec02-img{
    order: 2;
}

.flex-sec02:nth-of-type(2) .sec02-img .sec02-en{
    text-align: right;
}

.flex-sec02:nth-of-type(2) .sec02-detail{
    order: 1;
}

.flex-sec02:nth-of-type(2) .sec02-detail .brownBox-wrap{
    justify-content: flex-start;
}

.flex-sec02:last-child{
    margin-bottom: 0;
}

/*---------------------------------------------sec-03-----*/

#sec-03{
    background: #f6f2f0;
    padding: 140px 0 180px;
}

.sec03-head{
    margin-bottom: 100px ;
}

.sec03-head .head40{
    margin-bottom: 50px;
    text-align: center;
}

.sec03-head .text16{
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
}

.flex-img{
    justify-content: space-between;
    margin-bottom: 40px;
}

.flex-img .img-l{
    position: relative;
    width: 63%;
}

.flex-img .img-l img{
    object-fit: cover;
    height: 612px;
    position: relative;
}

.flex-img .img-l .brownBox{
    position: absolute;
    left: 20px;
    bottom: 33px;
    z-index: 2;
}

.flex-img .img-s{
    width: 36%;
}

.flex-img .img-s img{
    object-fit: cover;
    height: 300px;
}

.flex-desc{
    justify-content: space-between;
    margin-bottom: 120px;
}

.flex-desc .head26{
    font-weight: 100;
    line-height: 1.4;
    width: 30%;
}

.flex-desc .head26 span{
    display: inline-block;
}

.flex-desc .text16{
    width: 67%;
}

.flex-equip{
    justify-content: space-between;
    margin-bottom: 50px;
}

.flex-equip:last-child{
    margin-bottom: 0;
}

.equip-img{
    width: 46%;
}

.equip-detail{
    padding: 0 5%;
    margin-top: 5%;
    width: 54%;
}

.equip-detail .head26{
    font-weight: 100;
    line-height: 1.4;
    margin-bottom: 40px;
}

.equip-detail .text22{
    display: inline-block;
}

.flex-equip:nth-of-type(2) .equip-img{  
    order: 2;
}

.flex-equip:nth-of-type(1) .equip-detail{
    order: 1;
}

@media only screen and (max-width: 1530px) {

.sec02-detail .brownBox-wrap {
    margin-bottom: 50px;
}

.brownBox span {
    font-size: 2rem;
    width: 200px;
}

#sec-01 .head42 {
    margin-bottom: 40px;
    margin-left: 10%;
}

.sec02-detail .head36 {
    margin-bottom: 40px;
    font-size: 3.2rem;
}

.sec02-detail .text16 {
    margin-bottom: 70px;
}
}

@media only screen and (max-width: 1500px) {
.sec01-detail .head34 {
    margin-bottom: 50px;
    font-size: 2.8rem;
}
}

@media only screen and (max-width: 1360px) {
.sec02-detail .brownBox-wrap {
    margin-bottom: 40px;
}

.sec02-detail .head36 {
    margin-bottom: 30px;
    font-size: 2.8rem;
}

.sec02-en {
    margin-top: 60px;
    font-size: 100px;
}

.sec03-head {
    margin-bottom: 60px;
}

.sec03-head .head40 {
    margin-bottom: 30px;
    font-size: 3.2rem;
}
}

@media only screen and (max-width: 1280px) {

#sec-01 .bgText {
    left: 93%;
    top: 40px;
    font-size: 70px;
}

#sec-01 {
    padding: 80px 0 50px;
}

.sec01-img {
    width: 43%;
}

.sec01-detail {
    width: 44%;
}

#sec-01 .head42 {
    margin-bottom: 20px;
}

.sec01-detail .head34 {
    margin-bottom: 30px;
    font-size: 2.2rem;
}

.flex-sec02 .sec02-img {
    width: 52%;
}

.sec02-detail {
    margin: 0 5%;
    width: 38%;
}

.flex-img .img-l img {
    height: 530px;
}

.flex-img .img-s img {
    height: 259px;
}

.equip-detail .head26 {
    margin-bottom: 25px;
}

.brownBox span {
    font-size: 1.6rem;
    width: 170px;
}

.sec02-head .head30 {
    line-height: 1;
    font-size: 2.4rem;
}

.sec02-head .head40 {
    margin-bottom: 30px;
    font-size: 3rem;
}

.sec02-detail .brownBox-wrap {
    margin-bottom: 30px;
}

.sec02-detail .head36 {
    font-size: 2.4rem;
}
}

@media screen and (max-width: 834px){

#sec-01 .bgText {
    left: 50%;
    top: 40px;
    width: 100%;
    writing-mode: inherit;
    font-size: 50px;
    transform: translateX(-50%);
    z-index: 0;
    text-align: center;
}

#sec-01 {
    padding: 50px 0 50px;
}

#sec-01 .head42 {
    margin: 0 5% 25px;
    font-size: 2rem;
    text-align: center;
    width: 90%;
    position: relative;
    z-index: 3;
}

.sec01-detail .head34 {
    font-size: 1.8rem;
    text-align: center;
}

.flex-sec01 {
    display: block;
    width: 90%;
    margin: 0 5%;
}

.sec01-detail {
    margin: 0 0 25px;
    width: 100%;
}

.sec01-img {
    margin: 0;
    width: 100%;
}

#sec-02 {
    padding: 50px 0 50px;
}

.sec02-head .head30 {
    font-size: 1.6rem;
}

.sec02-head .head40 {
    text-align: center;
    margin: 10px 0 25px;
    font-size: 1.8rem;
    line-height: 1.7;
}

.sec02-head {
    margin-bottom: 40px;
}

.flex-sec02 {
    margin-bottom: 50px;
    display: block;
}

.flex-sec02 .sec02-img {
    width: 100%;
    margin-bottom: 15px;
}

.sec02-en {
    line-height: 1 !important;
    margin: -35px 0 0 18px;
    font-size: 4rem;
}

.sec02-detail {
    margin: 0 5%;
    width: 90%;
}

.brownBox span {
    font-size: 1.2rem;
    width: 130px;
}

.sec02-detail .brownBox-wrap {
    justify-content: flex-start;
    margin-bottom: 10px;
}

.sec02-detail .head36 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.sec02-detail .text16 {
    margin-bottom: 20px;
}

.flex-sec02:nth-of-type(2) .sec02-img .sec02-en {
    text-align: left;
}

#sec-03 {
    padding: 50px 0 70px;
}

.sec03-head {
    margin-bottom: 30px;
}

.sec03-head .head40 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.flex-img {
    margin-bottom: 25px;
    display: block;
}

.flex-img .img-l {
    position: relative;
    width: 100%;
    margin-bottom: -12px;
}

.flex-img .img-l img {
    height: 230px;
}

.flex-img .img-s {
    width: 100%;
    display: flex;
}

.flex-img .img-s img {
    object-fit: cover;
    height: 119px;
    width: 50%;
}

.flex-desc {
    margin-bottom: 30px;
    display: block;
}

.flex-desc .head26 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    width: 100%;
}

.flex-desc .head26 span {
    display: block;
    font-size: 1.6rem;
}

.flex-desc .text16 {
    width: 100%;
}

.flex-equip {
    margin-bottom: 30px;
    display: block;
}

.equip-img {
    width: 100%;
}

.equip-detail {
    padding: 0;
    margin-top: 15px;
    width: 100%;
}

.equip-detail .head26 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
}

.equip-detail .text22 {
    font-size: 1.6rem;
}

}

@media screen and (max-width: 687px){

}