:root {
--serif: 'Noto Serif JP', serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
--sans: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.main{height: 425px;width: 100%;
    background-image: url(../img/our_commitment/main_bg.png);
    background-position: center bottom;
background-size: cover;position: relative;}
.main img{ 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom:50px;;
}


.our_commitment .contents{
    width: 100%;
    padding-bottom: 30px;
    padding-top: 70px;

}
h2{ text-align: center;font-family:var(--serif);border-bottom: 2px solid #a99280;padding: 0px 0px 15px 0px;margin: 0px 0px 0px 0px;font-size: 38px;font-weight: 500;letter-spacing: 0.1em;
    color: #a38a77;}

.our_block{width: min(100%, 960px);margin: 0 auto 0 auto}

.our_block .list{}
.our_block .list ul{width: min(100%, 880px);margin: 0 auto 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap}
.our_block .list ul li{width: min(100%, 275px); }
.our_block .list ul li .img{margin-bottom: 10px;}
.our_block .list ul li .text{padding: 0px 15px 0px 15px}

.about{font-family:var(--serif);text-align: center;margin-bottom: 100px;font-size: 18px;font-weight: 500;line-height: 36px}

.kioku{margin-bottom: 100px;}
.kioku p{text-align: center;line-height: 40px;font-size: 18px;padding-bottom: 15px;}


.souzou{margin-bottom: 100px;}
.souzou p{text-align: center;line-height: 40px;font-size: 18px;padding-bottom: 15px;}

.kaihatsu{margin-bottom: 100px;}
.kaihatsu p:nth-of-type(1){text-align: center;line-height: 40px;font-size: 18px;padding-bottom: 15px;}
.kaihatsu .list ul{width: min(100%, 670px);margin: 0 auto 0 auto}
.kaihatsu .list ul li{width: min(100%, 320px);margin-bottom: 30px }
.kaihatsu p:nth-of-type(2){text-align: left;line-height: 32px;font-size: 18px;padding-bottom: 15px;width: min(100%, 670px);margin: 0 auto 0 auto}

.dx{margin-bottom: 150px;}
.dx h2 span:nth-of-type(1){border-bottom: 1px solid #a99280;display: block;padding: 0px 0px 10px 0px;margin-bottom: 10px;width: 4em;margin-left: auto;margin-right: auto}
.dx h2 span:nth-of-type(2){display: inline-block}

.dx .list ul li .text{letter-spacing: -0.05em}

.dx p:nth-of-type(1){text-align: center;line-height: 40px;font-size: 18px;padding-bottom: 15px;}

.dx p:nth-of-type(2){text-align: left;line-height: 32px;font-size: 18px;padding-bottom: 0px;width: min(100%, 670px);margin: 0 auto 0 auto;padding-top: 30px;}


.sdgs{margin-bottom: 0px;}

.sdgs h3{ text-align: center;font-family:var(--serif);border-bottom: 2px solid #a99280;padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;font-size: 28px;font-weight: 600;letter-spacing: 0.1em;
    color: #333;display: block}

.sdgs .katsudou{padding-top: 70px;}

.sdgs .katsudou h3{width: 5em; margin: 0 auto 0 auto}
.sdgs .katsudou p{width: 80%;margin: 20px auto 0 auto;font-size: 18px;}

.sdgs .toha{padding-top: 70px;}
.sdgs .toha .img{text-align: center;width: 100%;padding: 50px 0px 60px 0px}
.sdgs .toha h3{width: 28em; margin: 0 auto 0 auto}


.sdgs .torikumi{padding-top: 70px;}
.sdgs .torikumi h3{width: 5em; margin: 0 auto 0 auto}
.sdgs .torikumi .list{padding-top: 30px;margin-bottom: 50px}
.sdgs .torikumi .list ul{display: flex;justify-content: space-between;flex-wrap: wrap}
.sdgs .torikumi .list ul li{background-color: #f7f6f6;padding: 20px 20px 20px 20px;width: calc(32% - 40px);margin-bottom: 20px}


.sdgs .torikumi .list ul li .img{width: 100%;display: flex;justify-content: space-between}
.sdgs .torikumi .list ul li img{width: 70px}

.sdgs .torikumi .list ul li:nth-of-type(2) .img{width: 70px;margin: 0 auto 0 auto}
.sdgs .torikumi .list ul li:nth-of-type(3) .img{width: 160px;margin: 0 auto 0 auto}
.sdgs .torikumi .list ul li:nth-of-type(4) .img{width: 70px;margin: 0 auto 0 auto}
.sdgs .torikumi .list ul li:nth-of-type(5) .img{width: 70px;margin: 0 auto 0 auto}


.sdgs .torikumi .list ul li .title{text-align: center;padding-bottom: 10px;font-size: 16px;font-weight: 600;border-bottom: 1px solid #a99280;margin-bottom: 20px;height: 50px}
.sdgs .torikumi .list ul li:nth-of-type(2) .title{height: 37px;padding-top: 13px}
.sdgs .torikumi .list ul li:nth-of-type(4){margin-left: 17%}
.sdgs .torikumi .list ul li:nth-of-type(5){margin-right: 17%}

.sdgs .end_text{
    font-family:var(--serif);
 border-bottom: 1px solid #CCC;
border-top: 1px solid #CCC;
    padding: 30px;
    width: calc(96% - 60px);
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin: 0 auto 0 auto;
    line-height: 72px;
    
}

@media screen and (max-width: 479px){
    
.main{height: 300px;width: 100%;
background-image: url(../img/our_commitment/main_bg.png);
background-position: right -300px bottom;
background-size: 1200px;position: relative;
    }
    
.main img{ 
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 300px;
}
    
.our_commitment .contents{
    width: calc(100% - 40px);
    padding-bottom: 30px;
    padding-top: 30px;
    margin: 0 auto 0 auto;

}
    
h2{ text-align: center;
    font-family:var(--serif);
    border-bottom: 2px solid #a99280;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 0px 0px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing:normal;
    color: #a38a77;
    }
    
.about{font-family:var(--serif);text-align: left;margin-bottom: 30px;font-size: 16px;font-weight: 500;line-height: 30px;padding-top: 20px;}
.about br{display: none} 
   
 
.our_block .list ul li{width: min(100%, 275px);margin: 0px auto 30px auto}
.our_block .list ul li:last-of-type{margin: 0px auto 0px auto}
.our_block .list ul li .text{padding: 0px 0px 0px 0px;font-size: 14px}
.kioku p{text-align: left;line-height: 22px;font-size: 16px;padding-bottom: 20px;padding-top: 15px;}
.souzou p{text-align: left;line-height: 22px;font-size: 16px;padding-bottom: 20px;padding-top: 15px;}
.kaihatsu p:nth-of-type(1){text-align: left;line-height: 22px;font-size: 16px;padding-bottom: 20px;padding-top: 15px;}
.kaihatsu .list ul li{width: min(100%, 320px);margin-bottom: 30px;margin: 0px auto 30px auto }    
.kaihatsu p:nth-of-type(2){text-align: left;line-height: 32px;font-size: 16px;padding-bottom: 15px;width: min(100%, 670px);margin: 0 auto 0 auto;padding-top: 30px}  
    
    
    
.dx{margin-bottom: 150px;}
.dx h2 span:nth-of-type(1){border-bottom: 1px solid #a99280;display: block;padding: 0px 0px 10px 0px;margin-bottom: 10px;width: 6em;margin-left: auto;margin-right: auto;font-size: 26px}
.dx h2 span:nth-of-type(2){display: inline-block;font-size: 26px} 
.dx p:nth-of-type(1){text-align: left;line-height: 22px;font-size: 16px;padding-bottom: 20px;padding-top: 15px;}
.dx p:nth-of-type(2){text-align: left;line-height: 32px;font-size: 16px;padding-bottom: 15px;width: min(100%, 670px);margin: 0 auto 0 auto;padding-top: 30px}     
  
   
    
    
    
    
.sdgs .toha h3{width: 100%; margin: 0 auto 0 auto}
.sdgs .toha .img{text-align: center;width: 100%;padding: 50px 0px 60px 0px} 
.sdgs .toha .img img{width: 100%}
    
 .sdgs h3{ text-align: center;font-family:var(--serif);border-bottom: 2px solid #a99280;padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;font-size:20px;font-weight: 600;letter-spacing: 0.1em;
    color: #333;display: block}  
    
.sdgs .torikumi .list{padding-top: 30px;margin-bottom: 50px}  
.sdgs .torikumi .list ul li{background-color: #f7f6f6;padding: 20px 20px 20px 20px;width: calc(100% - 40px);margin-bottom: 20px}
.sdgs .katsudou p{width: calc(100% - 40px);margin: 20px auto 0 auto;font-size: 16px;}
.sdgs .torikumi .list ul li:nth-of-type(4){margin-left:auto}
.sdgs .torikumi .list ul li:nth-of-type(5){margin-right:auto}
    
.sdgs .end_text{
    font-family:var(--serif);
 border-bottom: 1px solid #CCC;
border-top: 1px solid #CCC;
    padding: 30px;
    width: calc(96% - 60px);
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin: 0 auto 0 auto;
    line-height: 30px;
    
}

    
    
    
}