.brand-menu {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.brand-menu div {
  background-color: #ececec;
  border-radius: 5px;
  display: table;
  min-width: 0;
  width: 100%;
}

.brand-menu a {
  color: #222;
  display: table-cell;
  padding: 8% 0;
  text-decoration: none;
  vertical-align: middle;
}

.brand-staff div{
  align-items: center;
}

.brand-staff > div > div p,.brand-media p{
  text-align: left;
}

.brand-media div{
  grid-gap: 0;
}

.sttl-m{
  margin: 50px 0 10px;
}


.brand-cal{
  padding: 10% 5%;
}


.cal-01,.cal-02,.cal-03,.cal-04{
  width: 30px;
}


.cal-01{
  background-color: #ffffdd;
}


.cal-02{
  background-color: #ddffff;
}


.cal-03{
  background-color: #ffeeee;
}


.cal-04{
  background-color: #eeffee;
}

.cls-ttl01{
  aspect-ratio: 48/17;
}
.cls-ttl02{
  aspect-ratio: 20/7;
}
.cls-ttl03{
  aspect-ratio: 24/11;
}
.cls-top{
  aspect-ratio: 80/49;
}
.cls-cpt{
  aspect-ratio: 8/5;
}
.cls-sd{
  aspect-ratio: 481/342;
}
.cls-dj{
  aspect-ratio: 465/331;
}
.cls-cb{
  aspect-ratio: 900/221;
}
.cls-swt{
  aspect-ratio: 240/113;
}
.cls-mda,.cls-shop{
  aspect-ratio: 1/1;
  height: auto;
}
.cls-fb{
  aspect-ratio: 93/11;
}


.btn-b,.btn-g{
  color: white !important;
  padding: 2%;
}
.btn-b{
  background-color: black;
}
.btn-g{
  background-color: #8fbc8f;
}

.u-name,.qr{
  position: absolute;
}


/**************************　SP　**************************/


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

.adrs-box {
  bottom: 5%;
  left:9%;
}

.adrs-box .note {
  font-size: 3vw;
}

.brand-menu {
  grid-gap: 3% 2%;
  line-height: 1.2;
}

.brand-menu div {
  height: 60px;
}

.u-name{
  left: 5%;
  text-align: left;
  top: 29%;
}

.qr{
  bottom: 1%;
  right: 4%;
  width: 34%;
}


.brand-staff :nth-child(3) :nth-child(2),.brand-info :nth-child(2) :nth-child(2){
  grid-row-start: 1;
}


.cls-ttl01,.cls-ttl02,.cls-ttl03{
  height: auto;
  width: 55%;
}
.cls-mda{
  width: 100%;
}



}/*削除しないように*/


/************************　SP　end　************************/







/**************************　PC　**************************/



@media only screen and (min-width: 680px){

.adrs-box {
  bottom: 5%;
  left:3%;
  font-size: 26px;
}

.adrs-box .note {
  font-size: 20px;
}


.brand-menu {
  grid-gap: 30px;
}


.cls-ttl01,.cls-ttl02,.cls-ttl03{
  height: auto;
  width: 25%;
}
.cls-mda{
  width: 400px;
}

.u-name{
  font-size: 50px;
  left: 5%;
  top: 27%;
}

.qr{
  bottom: 0;
  right: 5%;
}




}/*削除しないように*/


/************************　PC　end　************************/