: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/brand/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;;
}


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

}
.brand .contents .brand_block{}

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: 26px;font-weight: 500;letter-spacing: 0.3em}

.brand_num{text-align: center;margin-bottom: 50px;}
.brand_num img{width: 600px}
.brand_block{width: min(100%, 960px);margin: 0 auto 0 auto}

.shidashi{margin-bottom: 100px;}
.party{margin-bottom: 100px;}
.gaishoku{margin-bottom: 100px;}


.brand_block ul.list{padding: 30px 30px 30px 30px;width:calc( 100% - 60px);display: flex;justify-content: space-between;flex-wrap: wrap}

.brand_block ul.list li{width: min(100%, 420px);text-align: center;margin-bottom: 60px;}






.brand_block ul.list li .img{margin-bottom: 20px;}
.brand_block ul.list li .img img{width: 100%}
.brand_block ul.list li .logo{display: block;height: 80px;margin-bottom: 10px;position: relative}
.brand_block ul.list li .logo img{position: absolute;    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.brand_block ul.list li a:hover{opacity: 0.6}
.brand_block ul.list li .text {font-size: 14px;letter-spacing: -0.05em;line-height: 20px}

.brand_block ul.list li.kitahama{}
.brand_block ul.list li.kitahama .text{}
.brand_block ul.list li.kitahama .text span{display: inline-block;margin-right: 2px;font-weight: bold;color: red;line-height: 20px;font-size: 16px;}

.consul{margin-bottom: 100px;}
.consul a:hover{opacity: 0.6}
.consul .inner{width: 56%;padding-top: 20px;margin: 0 auto 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap;}
.consul .inner .logo{width: 100px;}
.consul .inner .logo img{width: 100%}
.consul .inner .text{width: calc(100% - 120px);padding-top: 20px;font-size: 14px;}


@media screen and (max-width: 479px){
 
.main{height: 300px;width: 100%;
    background-image: url(../img/brand/main_bg.png);
    background-position: left bottom;
background-size: cover;position: relative;}
    
.main img{ 
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 130px;
}
    
.brand_num{text-align: center;margin-bottom: 50px;}
.brand_num img{width: 300px}
    
    
.brand .contents .brand_block{width: calc(100% - 40px)}    
h2{ padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;font-size: 21px;font-weight: 500;letter-spacing: normal}

    
.brand_block ul.list{padding: 20px 20px 20px 20px;width:calc( 100% - 40px);display: flex;justify-content: space-between;flex-wrap: wrap}    
.brand_block ul.list li{width: min(100%, 420px);text-align: center;margin-bottom: 60px;} 
.brand_block ul.list li .img{margin-bottom: 10px;}
.brand_block ul.list li .logo{display: block;height: auto;margin-bottom: 10px;position: relative;text-align: center}
.brand_block ul.list li .logo img{position: static;
    top: auto;
    left:  auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform:none;
    width: 100%;
}
    
.shidashi{margin-bottom: 0px;}
.party{margin-bottom: 0px;}
.gaishoku{margin-bottom: 0px;} 
    
.brand_block ul.list li .text {font-size: 14px;letter-spacing: 0em;line-height: 22px;text-align: left}
    
.shidashi ul.list li:nth-of-type(1) .text br:nth-of-type(1),
.shidashi ul.list li:nth-of-type(4) .text br:nth-of-type(1),
.party ul.list li:nth-of-type(2) .text br:nth-of-type(2),
.gaishoku ul.list li:nth-of-type(2) .text br:nth-of-type(1),
.gaishoku ul.list li:nth-of-type(3) .text br:nth-of-type(2){display: none}   

.consul{margin-bottom: 30px;}    
.consul .inner{width: calc(100% - 40px);padding-top: 20px;margin: 0 auto 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap;}
.consul .inner .logo{width: 80px;}
.consul .inner .logo img{width: 100%}
.consul .inner .text{width: calc(100% - 100px);padding-top: 0px;font-size: 14px;}
    
}