@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 784px) {
  .show-pc {
    display: none !important;
  }
  /*#loading img {
      margin-top: -5vw;
      margin-left: -5vw;
      width: 10vw;
  }*/
  #otsumami {
    min-width: inherit;
  }
  #otsumami .bg-yuba {
    padding-bottom: 0;
    box-shadow: 0 0 2.5641025641vw rgba(0, 0, 0, 0.2);
  }
  #otsumami .mainimage {
    height: 128.2051282051vw;
    margin-bottom: -0.3472222222vw;
  }
  #otsumami .mainimage .logo {
    top: 5.1282051282vw;
    left: 5.1282051282vw;
    height: 6.1538461538vw;
  }
  #otsumami .mainimage h1 {
    top: 28.2051282051vw;
    width: 37.4358974359vw;
    height: 27.6923076923vw;
    box-shadow: 0 0 1.2820512821vw rgba(0, 0, 0, 0.1);
  }
  #otsumami .mainimage .yakko {
    left: 0vw;
    top: 8.4615384615vw;
    width: 24.8717948718vw;
    height: 81.0256410256vw;
  }
  #otsumami .mainimage .yakko::after {
    left: 10.2564102564vw;
    bottom: -38.2051282051vw;
    width: 15.3846153846vw;
    height: 39.7435897436vw;
    background-image: url(../images/beer_v2_sp.png);
  }
  #otsumami .mainimage .yakko .pic {
    position: absolute;
    left: 8.9743589744vw;
    bottom: -11.5384615385vw;
    width: 46.1538461538vw;
    filter: drop-shadow(5.1282051282vw 3.8461538462vw 3.8461538462vw rgba(0, 0, 0, 0.15));
  }
  #otsumami .mainimage .yuba {
    right: 7.6923076923vw;
    top: 15.3846153846vw;
    width: 18.4615384615vw;
    height: 61.7948717949vw;
  }
  #otsumami .mainimage .yuba::after {
    right: 0vw;
    bottom: -50.5128205128vw;
    width: 15.3846153846vw;
    height: 39.7435897436vw;
    background-image: url(../images/beer_v2_sp.png);
  }
  #otsumami .mainimage .yuba .pic {
    left: -33.3333333333vw;
    bottom: -39.7435897436vw;
    width: 49.2307692308vw;
    filter: drop-shadow(5.1282051282vw 3.8461538462vw 3.8461538462vw rgba(0, 0, 0, 0.15));
  }
  /*リード*/
  #otsumami .section01 {
    min-width: inherit;
    margin: 0 auto;
    padding: 12.8205128205vw 0 12.8205128205vw;
  }
  #otsumami .section01 > div {
    padding: 33.5897435897vw 5.1282051282vw 5.1282051282vw;
    max-width: calc(100% - 10.2564102564vw);
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 0px 5vw 0px rgba(0, 0, 0, 0.1);
    border-radius: 3vw;
  }
  #otsumami .section01 h2 {
    top: -5vw;
    max-width: calc(100% - 10.2564102564vw);
  }
  #otsumami .section01 p {
    font-size: 3.5897435897vw;
    line-height: 2.25;
  }
  #otsumami .section01 .pic {
    position: relative;
    margin: 2.5641025641vw auto 0;
    display: block;
  }
  /* コンテンツ */
  #otsumami .section02 {
    max-width: calc(100% - 10.2564102564vw);
    margin: 0 auto;
    padding: 0 0 12.8205128205vw;
  }
  #otsumami .section02 .wrap {
    margin-top: 12.8205128205vw;
  }
  #otsumami .section02 .wrap:first-child {
    margin-top: 0;
  }
  #otsumami .section02 h3 {
    width: 100%;
    margin-bottom: 2.5641025641vw;
  }
  #otsumami .section02 p {
    font-size: 3.5897435897vw;
    line-height: 2;
  }
  #otsumami .section02 p + img {
    margin: 1em auto 0;
  }
  #otsumami .section02 .col2 {
    flex-direction: column;
    gap: 2.5641025641vw;
  }
  #otsumami .section02 .col2 p,
  #otsumami .section02 .col2 div {
    width: 100%;
  }
  #otsumami .section02 .pic {
    margin: 2.5641025641vw auto -7.6923076923vw;
  }
  #otsumami .section02 .col2 + .pic {
    margin-top: 7.6923076923vw;
  }
  /* アレンジ */
  #otsumami .arrange {
    padding: 7.6923076923vw 12.8205128205vw 12.8205128205vw;
  }
  #otsumami .arrange h4 {
    margin: 0 auto 7.6923076923vw;
    width: 100%;
  }
  #otsumami .arrange .wrap {
    width: 100%;
    flex-direction: column;
    gap: 5.1282051282vw;
  }
  #otsumami .arrange .wrap li {
    width: 100%;
  }
  #otsumami .arrange .btn {
    margin: 7.6923076923vw auto 0;
  }
  /* 商品ラインナップ */
  #otsumami .lineup {
    padding: 12.8205128205vw 0;
    max-width: calc(100% - 10.2564102564vw);
    margin: 0 auto;
  }
  #otsumami .lineup h4 {
    margin: 0 auto 5.1282051282vw;
    max-width: calc(100% - 15.3846153846vw);
  }
  #otsumami .lineup .groups {
    display: flex;
    flex-direction: column;
    gap: 5.1282051282vw;
  }
  #otsumami .lineup .group {
    padding: 7.6923076923vw 7.6923076923vw 10.2564102564vw;
    border-radius: 5.1282051282vw;
  }
  #otsumami .lineup .group:nth-of-type(1) {
    width: 100%;
  }
  #otsumami .lineup .group:nth-of-type(2) {
    width: 100%;
  }
  #otsumami .lineup .group-ttl {
    font-size: 6.6666666667vw;
    margin-bottom: 10.2564102564vw;
  }
  #otsumami .lineup ul.products {
    margin: 0 auto;
    gap: 11.5384615385vw 10.2564102564vw;
  }
  #otsumami .lineup .products li {
    width: calc((100% - 10.2564102564vw) / 2);
  }
  #otsumami .lineup .products li div img {
    margin-bottom: 2.5641025641vw;
  }
  #otsumami .lineup .products h5 {
    font-size: 3.5897435897vw;
    width: calc(100% + 2em);
  }
  #otsumami .lineup .products p {
    width: 100%;
    padding: 0 2.5641025641vw;
  }
  #otsumami .lineup .products a.btn {
    font-size: 2.5641025641vw;
    transition: inherit;
    -webkit-transition: inherit;
    border-radius: 3.2051282051vw;
    width: 100%;
    height: 6.4102564103vw;
    text-align: center;
  }
  #otsumami .lineup .products a.btn:hover {
    background-color: red;
  }
  /* フッター */
  .footer {
    min-width: inherit;
    padding: 6.4102564103vw 0 11.5384615385vw;
  }
  .footerlogo {
    min-width: inherit;
    width: inherit;
    float: none;
    text-align: center;
  }
  .footerlogo img {
    width: auto;
    height: 5.1282051282vw;
  }
  p.copyright {
    line-height: 2.5em;
    font-size: 2.5641025641vw;
    float: none;
    text-align: center;
  }
  /* トップに戻るボタン */
  .btn_pagetop {
    width: 60px;
    height: 60px;
    right: 10px;
    bottom: calc((25vw - 60px) / 2);
  }
}