@media screen and (min-width: 821px) {
 .desc {
     line-height: 20px;
 }
}

@media screen and (min-width: 881px) {
 .desc {
     line-height: 22px;
 }
}

@media screen and (min-width: 941px) {
 .desc {
     line-height: 23px;
 }
}

@media screen and (min-width: 971px) {
 .desc {
     line-height: 24px;
 }
}

@media screen and (min-width: 1001px) {
 .desc {
     line-height: 25px;
 }
}

@media screen and (min-width: 1051px) {
 .desc {
     line-height: 26px;
 }
}

@media screen and (min-width: 1101px) {
 .desc {
     line-height: 27px;
 }
}

@media screen and (min-width: 1141px) {
 .desc {
     line-height: 28px;
 }
}

@media screen and (min-width: 1201px) {
 .desc {
     line-height: 30px;
 }
}

@media screen and (min-width: 1241px) {
 .desc {
     line-height: 31px;
 }
}

@media screen and (min-width: 1281px) {
 .desc {
     line-height: 32px;
 }
}

@media screen and (min-width: 1301px) {
 .desc {
     line-height: 33px;
 }
}

@media screen and (min-width: 1361px) {
 .desc {
     line-height: 35px;
 }
}

@media screen and (min-width: 1401px) {
 .desc {
     line-height: 36px;
 }
}

@media screen and (min-width: 1441px) {
 .desc {
     line-height: 37px;
 }
}

@media screen and (min-width: 1481px) {
 .desc {
     line-height: 38px;
 }
}

@media screen and (min-width: 1521px) {
 .desc {
     line-height: 39px;
 }
}

@media screen and (min-width: 1561px) {
 .desc {
     line-height: 40px;
 }
}

@media screen and (min-width: 1601px) {
 .desc {
     line-height: 41px;
 }
}

@media screen and (min-width: 1641px) {
 .desc {
     line-height: 42px;
 }
}

@media screen and (min-width: 1681px) {
 .desc {
     line-height: 43px;
 }
}

@media screen and (min-width: 1721px) {
 .desc {
     line-height: 44px;
 }
}

@media screen and (min-width: 1800px) {
 .desc {
     line-height: 46px;
 }
}

@media screen and (min-width: 1900px) {
 .desc {
     line-height: 48px;
 }
}

@media screen and (min-width: 2000px) {
 .desc {
     line-height: 50px;
 }
}


@media screen and (max-width: 820px) {
 .desc {
     line-height: 38px;
     margin: auto;
 }

 .aboutdi {
     margin-top: 30px;
     align-items: center;
 }

 .insta {
     margin-top: 50px;
 }
}

@media screen and (max-width: 760px) {
 .desc {
     line-height: 35px;
     margin: auto;
 }
}

@media screen and (max-width: 700px) {
 .desc {
     line-height: 30px;
     margin: auto;
 }
}


@media screen and (max-width: 610px) {
 .desc {
     line-height: 24px;
     margin: auto;
 }
}


@media screen and (max-width: 510px) {
 .desc {
     line-height: 20px;
     margin: auto;
 }
}

@media screen and (max-width: 480px) {
.desc {
   line-height: 30px;
   margin: auto;
}

.v1text,
.v2text,
.v3text,
.v4text {
   display: block;
}

/* hover時にテキストを表示する */
.m1:hover .v1text,
.m2:hover .v2text,
.m3:hover .v3text,
.m4:hover .v4text {
   display: block;
   transition: .3s;
}

.v1text {
   font-size: 0.5px;
   margin-top: 4px;
   margin-left: 4px;
}
}

@media screen and (max-width: 395px) {
 .desc {
     line-height: 25px;
     margin: auto;
 }
 .v1text {
     font-size: 6px;
 }
}

@media screen and (max-width: 340px) {
 .desc {
     line-height: 20px;
     margin: auto;
 }
}

@media (max-width: 480px) {
 .container {
     width: 90%;
     max-width: 90%;
 }

 .container2 {
     width: 90%;
     max-width: 90%;
 }

 .instade {
     line-height: 24px;
 }
 .howtode {
     line-height: 24px;
 }
}

@media screen and (max-width: 768px) {
 .belowmov {
     justify-content: flex-end; /* iPad 用に右寄せに変更 */
 }
 .v1text {
     font-size: 10px;
 }
 .v1text,
 .v2text,
 .v3text,
 .v4text {
     display: block;
 }

 /* hover時にテキストを表示する */
 .m1:hover .v1text,
 .m2:hover .v2text,
 .m3:hover .v3text,
 .m4:hover .v4text {
     display: block;
     transition: .3s;
 }
}



@media (max-width: 820px) {
 .flex2 {
   display: block;
   justify-content: initial;
   flex-wrap: nowrap;
 }

 .mov2 {
   width: 100%;
 }

 .aboutdi {
   width: 100%;
 }
}

/* header 2rows */

@media (max-width: 772px) {
 .flex3 {
   display: block;
   justify-content: center;
   flex-wrap: nowrap;
 }

 .headermenu li {
   margin-left: 0;
 }

 .headermenu ul {
   margin-left: 0;
 }

 .headermenu {
   margin-top: 8px;
   padding: 0;
   text-align: center;
 }

 .headermenu ul {
   margin: 0;
   padding: 0;
 }
}

/* header super small */
@media (max-width: 350px) {
 .headermenu {
  font-size: 8px;
 }
}


@media (any-hover: hover) {
 .buttonOutline {
   transition: background-color 0.2s;
 }

 .buttonOutline:hover {
   background-color: #FFD66D;
   color: #fff;
 }

 .buttonOutline2:hover {
   background-color: #FFD66D;
   color: #fff;
 }
}

/* blog page */

@media (max-width: 1200px) {
 .two-beers {
  word-break: break-word;
 }
}

@media (max-width: 849px) {
 .blog-content-day {
  display: block;
 }
 .note {
  padding: 0px;
 }
 .note-title {
  padding: 0px;
 }
 .beer-name {
  margin-bottom: 10px;
 }
 .two-beers {
  width: 100%;
 }
 .image-and-note {
  width: 100%;
 }
 .beer-brewer {
  width: fit-content;
 }
 .blog-beername {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
 }
 .blog-beername.second {
  margin-top: 0px;
 }
}

@media (max-width: 599px) {
 .container-right {
  width: 100%;
 }
 .container-left {
  padding-left: 12px;
  width: 100%;
 }
 .main-container {
  display: block;
 }
 footer {
  display: none;
 }
 .left-content {
  margin-top: 100px;
 }
 .filters {
  margin-top: 20px;
  margin-bottom: 30px;
 }
 .blog-title {
  margin-top: 0px;
  font-size: 80px;
 }
 .note {
    line-height: 2;
 }
}

@media (max-width: 479px) {
 .blog-beername {
  display: block;
 }
 .beer-images {
  margin: 0px;
  justify-content: center;
 }
 .blog-beername {
  margin-bottom: 60px;
  margin-top: 40px;
 }
}

@media (max-width: 369px) {
 .beer-images {
  flex-direction: column;
 }
}