@charset "UTF-8";
@import url("variables.css");
/****************************************
1.HOME

*****************************************/
@media screen and (max-width: 912px) {
  /****************************************
  1.HOME
  *****************************************/
  section.hero-img-wrap {
    background-color: var(--cls-blk);
    position: relative;
  }
  section.hero-img-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  section.hero-img-wrap div.hero-img {
    position: relative;
    max-width: 1520px;
    margin: 0 auto;
  }
  section.hero-img-wrap div.hero-img img {
    width: 100%;
  }
  section.hero-img-wrap div.hero-img .hero-img-text {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    padding: 0;
    text-align: center;
  }
  section.hero-img-wrap div.hero-img .hero-img-text h1 {
    font-size: 2rem;
    white-space: nowrap;
  }
  section.hero-img-wrap div.hero-img .hero-img-text h2 {
    font-size: 1.6rem;
  }
  section.hero-img-wrap div.hero-img .hero-img-text-menu {
    position: absolute;
    padding: 0;
    text-align: center;
  }
  section.hero-img-wrap div.hero-img .hero-img-text-menu h1 {
    font-size: 2.4rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.4;
    white-space: nowrap;
  }
  section.news-wrap {
    padding: 24px 0 24px 0;
    background-color: var(--bg-gry);
  }
  section.news-wrap div.news-inner {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 12px 24px;
  }
  section.news-wrap div.news-inner div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  section.news-wrap div.news-inner h3 {
    font-size: 1.6rem;
    font-weight: 400;
  }
  section.news-wrap div.news-inner ul {
    display: flex;
    flex-wrap: wrap;
  }
  section.news-wrap div.news-inner ul li {
    width: calc(100% - 100px);
    padding: 16px 0 8px 0;
    border-bottom: 1px dotted #A0A0A0;
    font-size: 1.3rem;
  }
  section.news-wrap div.news-inner ul li:nth-child(2n) {
    width: 100px;
  }
  section.news-wrap div.news-inner ul li:nth-child(2n) p {
    font-size: 1.3rem;
    text-align: right;
  }
  section.news-wrap div.news-inner p.more {
    text-align: right;
    font-size: 1.3rem;
    padding: 18px 0 0 0;
  }
  section.shop .opening-hours {
    max-width: 100%;
    margin: 16px 0 0 0;
    line-height: 1.6;
  }
  section.shop .opening-hours .opening-row {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
    font-size: 1.2rem;
    color: #fff;
  }
  section.shop .opening-hours .opening-row .day {
    flex: 0 0 72px;
  }
  section.shop .opening-hours .opening-row .time {
    flex: 1;
  }
  section.shop p.closing-days {
    font-size: 1.2rem;
    background-color: #eee;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px;
  }
  section.shop p.opening-hours {
    font-size: 1.2rem;
    color: #fff !important;
    margin-top: 8px;
  }
  section.shop p.opening-hours a {
    color: #fff;
  }
  section.shop div.shop-cooper {
    background-color: var(--bg-cooper);
  }
  section.shop div.shop-cooper div.shop-cooper-inner {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box {
    width: 100%;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box h4 {
    color: #fff;
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box h4 span {
    font-size: 15px;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box div.shop-img-sp {
    margin-top: 16px;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li {
    text-align: center;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li a {
    background-color: #fff;
    color: var(--bg-cooper);
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
    padding: 4px 0;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li a:hover {
    background-color: #eee;
    text-decoration: none;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li:nth-child(2) {
    margin-left: 4%;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li:nth-child(-n+2) {
    width: 48%;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.left-box ul li:nth-child(n+3) {
    width: 100%;
    margin-top: 16px;
  }
  section.shop div.shop-cooper div.shop-cooper-inner div.right-box {
    width: 100%;
  }
  section.shop div.shop-cooper-2nd {
    background-color: var(--bg-2nd);
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column-reverse;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box {
    width: 100%;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box h4 {
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 1.2;
    margin-top: 0;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box h4 span {
    font-size: 15px;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box div.shop-img-sp {
    margin-top: 16px;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul li {
    text-align: center;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul li a {
    background-color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
    padding: 4px 0;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul li a:hover {
    background-color: #eee;
    text-decoration: none;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul li:nth-child(2) {
    margin-left: 4%;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.right-box ul li:nth-child(-n+2) {
    width: 48%;
  }
  section.shop div.shop-cooper-2nd div.shop-cooper-inner div.left-box {
    width: 100%;
  }
  /****************************************
  1.SHOP
  *****************************************/
  section.shop-main-img {
    background-color: var(--bg-cooper);
    background-image: url(../img/cooper/bg-white.png);
    background-repeat: repeat-x;
    background-position: bottom center;
  }
  section.shop-main-img .wrap {
    max-width: var(--width-max);
    margin: 0 auto;
  }
  section.shop-title {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 48px 0;
    text-align: center;
  }
  section.shop-title h1 {
    font-size: 24px;
    line-height: 1.2;
    border-bottom: 2px solid var(--bg-cooper);
    display: inline-block;
    padding-bottom: 8px;
  }
  section.shop-title h1 span {
    font-size: 18px;
    font-weight: 400;
  }
  section.shop-title p {
    font-size: 1.8rem;
    margin: 24px 0;
    line-height: 1.7;
    text-align: left;
  }
  section.shop-title div.flex {
    display: flex;
    flex-direction: column;
  }
  section.shop-title div.flex p {
    font-size: 16px;
  }
  section.shop-title div.flex p.no-smorking {
    padding: 0 0 0 36px;
    margin: 24px 0 8px 0;
    background: url(../img/common/ico-no-smorking.svg) no-repeat left center;
  }
  section.shop-title div.flex p.table {
    padding: 0 0 4px 0;
    margin-top: 0;
  }
  section.shop-title-02 {
    margin: 48px 16px 0 16px;
  }
  section.shop-title-02 h1 {
    font-size: 24px;
    line-height: 1.16;
    border-bottom: 2px solid var(--bg-cooper);
    display: inline-block;
    padding-bottom: 8px;
  }
  section.shop-title-02 h1 span {
    font-size: 15px;
    font-weight: 400;
  }
  section.shop-title-02 h1.second {
    border-bottom: 2px solid var(--bg-2nd);
  }
  section.shop-title-02 p {
    font-size: 1.5rem;
    margin: 24px 0;
  }
  section.shop-title-02 p.caption {
    margin: 0 0 0 0;
  }
  section.shop-title-02 div.flex {
    display: flex;
  }
  section.shop-title-02 div.flex p.no-smorking {
    padding: 0 0 4px 36px;
    background: url(../img/common/ico-no-smorking.svg) no-repeat left center;
  }
  section.shop-title-02 div.flex p.table {
    padding: 0 0 4px 36px;
  }
  section.shop-info {
    background-color: #FBFBFB;
    padding: 48px 0;
    text-align: center;
  }
  section.shop-info div.wrap {
    width: var(--width-frame-sp);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  section.shop-info div.wrap div.calender h3 {
    font-size: 24px;
    margin-bottom: 8px;
  }
  section.shop-info div.wrap div.calender div.hotpepper {
    margin-top: 16px;
  }
  section.shop-info div.wrap div.infomation ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0 0 24px 0;
    border-bottom: 1px solid #ddd;
  }
  section.shop-info div.wrap div.infomation ol li {
    display: flex;
    flex-wrap: nowrap;
  }
  section.shop-info div.wrap div.infomation ol li p.tag {
    margin-right: 16px;
    width: 80px;
    text-align: center;
  }
  section.shop-info div.wrap div.infomation ol li p.sns {
    margin: 0 16px;
  }
  section.shop-info div.wrap div.infomation ol li:nth-child(3) {
    grid-template-columns: 1fr;
  }
  section.shop-info div.wrap div.infomation ol li:nth-child(3) p.tag {
    text-align: center;
  }
  section.shop-info div.wrap div.infomation ol li:nth-child(3) p {
    white-space: normal;
    text-align: left;
    line-height: 1.6;
  }
  section.shop-info div.wrap div.infomation div.subheading {
    display: grid;
    grid-template-columns: 1fr;
    /* 2列に分割 */
    gap: 0;
    margin-top: 0;
  }
  section.shop-info div.wrap div.infomation div.subheading div {
    margin-top: 8px;
  }
  section.shop-info div.wrap div.infomation div.subheading div img {
    width: 100%;
    max-width: 180px;
    margin: 16px auto;
  }
  section.shop-info div.wrap div.infomation div.subheading p {
    padding-bottom: 24px;
  }
  section.shop-info div.wrap div.infomation p {
    text-align: left;
  }
  section.shop-info-02 {
    background-color: #f1f1f1;
    margin-top: 40px;
    padding: 24px 24px 40px 24px;
    border-radius: 16px;
  }
  section.shop-info-02 div.infomation div.subheading {
    display: flex;
    flex-direction: column;
    margin: 16px 0 0 0;
  }
  section.shop-info-02 div.infomation div.subheading div {
    margin: 0 auto 0 auto;
    padding: 0;
  }
  section.shop-info-02 div.infomation div.subheading div p {
    font-size: 14px;
  }
  section.shop-info-02 div.infomation div.subheading div p.ttl {
    font-size: 15px;
  }
  section.shop-info-02 div.infomation div.subheading div img {
    width: 124px;
  }
  section.shop-info-02 div.infomation div.subheading:nth-child(2) {
    margin: 52px 0;
  }
  section.shop-info-02 div.flex-right {
    text-align: right;
  }
  section.shop-info-02 div.flex-right p {
    font-size: 14px;
  }
  section.shop-info-02 div.flex-right p.no-smorking {
    padding: 4px 0 4px 36px;
    display: inline-block;
    background: url(../img/common/ico-no-smorking.svg) no-repeat left center;
  }
  section.tap-beer {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 64px 0;
  }
  section.tap-beer div.tap-beer-title {
    background-color: var(--cls-blk);
    padding: 16px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  section.tap-beer div.tap-beer-title h4 {
    font-size: 24px;
  }
  section.tap-beer div.tap-beer-title h4 span {
    font-size: 18px;
  }
  section.tap-beer div.tap-beer-title p {
    padding-top: 0;
    font-size: 18px;
  }
  section.tap-beer div.tap-beer-title p span {
    font-size: 16px;
  }
  section.tap-beer ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    /* アイテム間の間隔 */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px 0 6px rgba(0, 0, 0, 0.08);
    /* 左側だけ強めの影 */
  }
  section.tap-beer ul li {
    border-right: 1px solid var(--cls-gry);
  }
  section.tap-beer ul li div.flag {
    width: 130px;
    padding: 16px 0 0 16px;
  }
  section.tap-beer ul li div.cover {
    width: 124px;
    margin: 16px auto 16px auto;
  }
  section.tap-beer ul li p {
    padding: 0 16px;
  }
  section.tap-beer ul li p.event {
    font-size: 1.4rem;
    text-align: center;
  }
  section.tap-beer ul li p.beer-name {
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
  }
  section.tap-beer ul li p.alc {
    font-size: 1.4rem;
    text-align: center;
  }
  section.tap-beer ul li p.beer-name-jp {
    font-size: 1.4rem;
    text-align: center;
    padding-bottom: 16px;
  }
  section.tap-beer ul li div.bg-caption {
    background-color: #eee;
  }
  section.tap-beer ul li div.bg-caption p.beer-caption01 {
    font-size: 1.6rem;
    padding: 16px;
  }
  section.tap-beer ul li div.bg-caption p.beer-caption02 {
    font-size: 1.6rem;
    padding-bottom: 16px;
  }
  section.tap-beer ul li:nth-child(3n) {
    border-right: none;
    /* 3の倍数の要素の右側のボーダーを削除 */
  }
  section.tap-beer-02 {
    margin: 0;
  }
  section.tap-beer-02 a.shop-info-box {
    color: #fff;
    font-size: 11px;
    padding: 12px 8px;
    text-decoration: underline;
  }
  section.tap-beer-02 a.bg-cooper {
    background: #333;
  }
  section.tap-beer-02 a.bg-2nd {
    background: #152440;
  }
  section.tap-beer-02 div.category-list {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0 0 0;
    background-color: #f1f1f1;
    border-bottom: 1px solid var(--cls-gry);
    margin-bottom: 16px;
  }
  section.tap-beer-02 div.category-list div.category-title {
    width: 100%;
  }
  section.tap-beer-02 div.category-list div.category-title p {
    margin-left: 8px;
    font-size: 14px;
  }
  section.tap-beer-02 div.category-list div.flex {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 8px 0 8px;
  }
  section.tap-beer-02 div.category-list div.flex p {
    margin-right: 16px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  section.tap-beer-02 div.category-list div.flex p a {
    background-color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
  }
  section.tap-beer-02 div.category-list div.select-wrap {
    margin: 8px 0 16px 8px;
  }
  section.tap-beer-02 div.tap-beer-title {
    background-color: var(--cls-blk);
    padding: 8px 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  section.tap-beer-02 div.tap-beer-title h4 {
    font-size: 15px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  section.tap-beer-02 div.tap-beer-title h4 span {
    font-size: 13px;
    margin: 0;
    padding: 0;
  }
  section.tap-beer-02 div.tap-beer-title p {
    font-size: 12px;
    text-align: right;
    line-height: 1.8;
    margin-top: -26px;
  }
  section.tap-beer-02 div.tap-beer-title p span {
    font-size: 12px;
    margin: 0;
  }
  section.tap-beer-02 div.bg-second {
    background-color: var(--bg-2nd);
  }
  section.tap-beer-02 div.bg-second-bar {
    background-color: #1a2e53;
  }
  section.tap-beer-02 ul.tap {
    gap: 0;
    /* アイテム間の間隔 */
    margin: 16px 8px 0 8px;
  }
  section.tap-beer-02 ul.tap li {
    display: flow-root;
    flex-direction: column;
    border-bottom: 1px solid var(--cls-gry);
    gap: 8px;
    margin-bottom: 16px;
  }
  section.tap-beer-02 ul.tap li div.image {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  section.tap-beer-02 ul.tap li div.image div.flag {
    width: 80px;
    /*112*/
    padding-top: 0;
    margin-left: 8px;
  }
  section.tap-beer-02 ul.tap li div.image div.cover {
    width: 64px;
    margin-top: 0;
  }
  section.tap-beer-02 ul.tap li div.text p {
    font-size: 12px;
  }
  section.tap-beer-02 ul.tap li div.text p.beer-caption01 {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 10px;
  }
  section.tap-beer-02 ul.tap li div.text p.event {
    margin-top: 8px;
  }
  section.tap-beer-02 ul.tap li div.text p.beer-name {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 4px;
  }
  section.tap-beer-02 ul.tap li div.text p.alc {
    font-size: 0.8rem;
  }
  section.tap-beer-02 ul.tap li div.text p.beer-name-jp {
    margin: 0;
    font-size: 0.8rem;
  }
  section.tap-beer-02 ul.tap li div.text p.beer-caption02 {
    font-size: 1rem;
    padding-bottom: 16px;
    margin-top: 4px;
    line-height: 1.3;
  }
  section.tap-beer-02 ul.tap li div.text-sp {
    margin: -32px 0 0 72px;
  }
  section.tap-beer-02 ul.tap li div.text-sp p.brewery_name {
    font-size: 1rem;
  }
  section.tap-beer-02 ul.tap li div.text-sp p.event {
    font-size: 0.8rem;
    color: #B00D01;
  }
  section.tap-beer-02 ul.tap li div.text-sp p.beer-name {
    font-size: 1rem;
    font-weight: 500;
  }
  section.tap-beer-02 ul.tap li div.text-sp p.beer-name-jp {
    margin: -1px;
    font-size: 0.8rem;
  }
  section.tap-beer-02 ul.tap-test {
    gap: 0;
    /* アイテム間の間隔 */
    margin: 16px 8px 0 8px;
  }
  section.tap-beer-02 ul.tap-test li {
    display: flow-root;
    flex-direction: column;
    border-bottom: 1px solid var(--cls-gry);
    gap: 8px;
    margin-bottom: 16px;
  }
  section.tap-beer-02 ul.tap-test li div.image {
    display: flex;
    justify-content: flex-end;
  }
  section.tap-beer-02 ul.tap-test li div.image div.flag {
    width: 52px;
    /*112*/
    padding-top: 0;
    margin-left: 8px;
  }
  section.tap-beer-02 ul.tap-test li div.image div.cover {
    width: 64px;
    margin-top: 0;
  }
  section.tap-beer-02 ul.tap-test li div.text p {
    font-size: 12px;
  }
  section.tap-beer-02 ul.tap-test li div.text p.beer-caption01 {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 14px;
  }
  section.tap-beer-02 ul.tap-test li div.text p.beer-name {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 4px;
  }
  section.tap-beer-02 ul.tap-test li div.text p.alc {
    font-size: 0.8rem;
  }
  section.tap-beer-02 ul.tap-test li div.text p.beer-name-jp {
    margin: 0;
    font-size: 0.8rem;
  }
  section.tap-beer-02 ul.tap-test li div.text p.beer-caption02 {
    font-size: 1rem;
    padding-bottom: 16px;
    margin-top: 4px;
    line-height: 1.3;
  }
  section.tap-beer-02 ul.tap-test li div.text-sp {
    margin: -36px 0 0 72px;
  }
  section.tap-beer-02 ul.tap-test li div.text-sp p.brewery_name {
    font-size: 0.8rem;
    margin-top: 0;
  }
  section.tap-beer-02 ul.tap-test li div.text-sp p.event {
    font-size: 10px;
  }
  section.tap-beer-02 ul.tap-test li div.text-sp p.beer-name {
    font-size: 1rem;
    font-weight: 500;
  }
  section.tap-beer-02 ul.tap-test li div.text-sp p.beer-name-jp {
    margin: 0;
    font-size: 0.8rem;
  }
  /****************************************
  2.PHOTO
  *****************************************/
  section.photo-wrap {
    padding: 64px 0;
    background-color: var(--bg-cooper);
  }
  section.photo-wrap div.photo-frame {
    width: var(--width-frame-sp);
    margin: 0 auto;
  }
  section.photo-wrap div.photo-frame p {
    font-size: 14px;
  }
  section.bg-2nd {
    background-color: var(--bg-2nd);
  }
  /****************************************
  3.MENU
  *****************************************/
  section.menu-wrap {
    padding: 48px 0 64px 0;
  }
  section.menu-wrap div.menu-list {
    width: var(--width-frame-sp);
    margin: 0 auto;
  }
  section.menu-wrap div.menu-list div.title-flex {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  section.menu-wrap div.menu-list div.title-flex p {
    font-size: 1.2rem;
    padding-top: 0;
    margin-left: 0;
    font-weight: 500;
    text-align: center;
  }
  section.menu-wrap div.menu-list div.title-flex h2,
  section.menu-wrap div.menu-list div.title-flex h3,
  section.menu-wrap div.menu-list div.title-flex h4,
  section.menu-wrap div.menu-list div.title-flex h5,
  section.menu-wrap div.menu-list div.title-flex h6 {
    padding-top: 0;
  }
  section.menu-wrap div.menu-list div.top {
    padding-top: 24px;
  }
  section.menu-wrap div.menu-list p.comment-menu {
    margin: 8px 0 16px 0;
    font-size: 1.4rem;
  }
  section.menu-wrap div.menu-list h2,
  section.menu-wrap div.menu-list h3,
  section.menu-wrap div.menu-list h4,
  section.menu-wrap div.menu-list h5,
  section.menu-wrap div.menu-list h6 {
    font-size: 2rem;
    font-weight: 500;
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    padding-top: 24px;
    text-align: center;
  }
  section.menu-wrap div.menu-list .top {
    padding-top: 24px;
  }
  section.menu-wrap div.menu-list ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px 0;
    margin-top: 24px;
    border-bottom: 1px solid var(--cls-gry);
    padding-bottom: 64px;
  }
  section.menu-wrap div.menu-list ul li p {
    line-height: 1.7;
  }
  section.menu-wrap div.menu-list ul li p.name {
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 16px;
  }
  section.menu-wrap div.menu-list ul li p.price {
    font-size: 1.4rem;
    margin: 4px 0;
    font-weight: 500;
  }
  section.menu-wrap div.menu-list ul li p.comment {
    font-size: 1.4rem;
  }
  section.menu-wrap div.menu-list ul li div.food-thumb img {
    height: auto;
  }
  section.menu-wrap div.menu-list div.food-content div.comment p {
    font-size: 1.4rem !important;
  }
  section.menu-wrap div.menu-list ul.beer-list {
    list-style: none;
    padding: 0;
    margin: 40px 0 0 0;
    padding-bottom: 40px;
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 12px;
    margin: 0 0 0 0;
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item .beer-text {
    flex: 1; /* テキストが常に広がる */
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item .beer-text p.name {
    /*font-size: 1.2rem;*/
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 0;
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item .beer-text p.price {
    /*font-size: 1.0rem;*/
    margin: 4px 0;
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item .beer-text p.comment {
    font-size: 1.2rem;
    /*	font-size: 1.2rem;
    	line-height: 18px;
    */
    margin: 0;
  }
  section.menu-wrap div.menu-list ul.beer-list li.beer-item .beer-thumb img {
    max-width: 80px;
    height: auto;
    border-radius: 0;
    margin-top: 8px;
  }
  /****************************************
  FOODメニュー用
  *****************************************/
  /* 2列グリッドレイアウト（Recommended / Gastro pub Food 以外） */
  /* Hand Crafted / Pizza / Salada / Light Food など */
  ul.recommended-food-list.layout-beer-sm {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    -moz-column-gap: 32px;
         column-gap: 32px;
    row-gap: 36px;
    width: 100%;
    max-width: 100%;
    list-style: none;
    margin: 0 auto 56px auto;
    padding: 0 8px;
    box-sizing: border-box;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content {
    display: flex;
    flex-direction: column;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content .text-wrap {
    margin-bottom: 8px;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content .text-wrap p.name {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content .text-wrap p.price {
    font-size: 1rem;
    margin: 4px 0 0;
    display: block;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content .food-thumb {
    margin-top: 8px;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content .food-thumb img {
    width: 100%;
    height: auto;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item .food-content p.comment {
    margin-top: 8px;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  ul.recommended-food-list.layout-beer-sm li.recommended-food-item:nth-child(2n) {
    margin-left: 8px;
  }
  /****************************************
  4.News
  *****************************************/
  section.news-wrap-contents {
    width: var(--width-common-sp);
    margin: 0 auto;
  }
  section.news-wrap-contents div.news-inner {
    width: var(--width-common-sp);
    margin: 0 auto;
    padding: 0;
  }
  section.news-wrap-contents div.news-inner div {
    display: flex;
    justify-content: center;
  }
  section.news-wrap-contents div.news-inner ul {
    display: flex;
    flex-direction: column;
    padding: 32px 0;
  }
  section.news-wrap-contents div.news-inner ul li {
    width: 100%;
    padding: 0 0 0 0;
    border-bottom: none;
  }
  section.news-wrap-contents div.news-inner ul li:nth-child(2n) {
    width: 100%;
    border-bottom: 1px dotted #A0A0A0;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  section.news-wrap-contents div.news-inner ul li:nth-child(2n) p {
    font-size: 1.4rem;
    text-align: right;
  }
  section.news-wrap-contents div.news-inner p.more {
    text-align: right;
    padding: 18px 0 0 0;
  }
  section.news-body {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 0 0 80px 0;
  }
  section.news-body p {
    margin: 24px 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  section.widget {
    width: var(--width-common-sp);
    margin: 0 auto;
  }
  section.widget ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
    /* アイテム間の間隔 */
    padding: 52px 0 80px 0;
    border-top: var(--cls-blk) 5px solid;
  }
  section.widget ul li p.tag-widget {
    background-color: var(--cls-blk);
    width: 100px;
    padding: 4px 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 16px;
  }
  /****************************************
  5.MAP-CONACT
  *****************************************/
  section.access {
    padding: 80px 0;
  }
  section.access div.wrap {
    width: var(--width-frame-sp);
    margin: 0 auto;
    color: #fff;
  }
  section.access div.wrap h1,
  section.access div.wrap h2 {
    font-size: 28px;
    text-align: center;
  }
  section.access div.wrap h1 span,
  section.access div.wrap h2 span {
    font-size: 18px;
  }
  section.access div.wrap ul {
    margin: 40px 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 任意の隙間 */
  }
  section.access div.wrap ul li {
    font-size: 1.5rem;
  }
  section.access div.wrap ul li span.tag {
    font-size: 1.4rem;
    background-color: #1C3404;
    border-radius: 8px;
    text-align: center;
    padding: 4px 12px;
    margin-right: 8px;
  }
  section.access div.wrap ul li span.tag-second {
    font-size: 1.4rem;
    background-color: #0E3074;
    border-radius: 8px;
    text-align: center;
    padding: 4px 12px;
    margin-right: 8px;
  }
  section.access div.wrap ul li:nth-child(4) {
    grid-column: span 3;
    /* 3カラム全部を使って1列表示にする */
  }
  section.access div.wrap div.map iframe {
    width: 100%;
    height: 320px;
  }
  .bg-cooper {
    background-color: var(--bg-cooper);
  }
  .bg-second {
    background-color: var(--bg-2nd);
  }
  section.contact {
    width: var(--width-frame-sp);
    margin: 0 auto;
    text-align: center;
    padding: 80px 0;
  }
  section.contact h3 {
    font-size: 2.4rem;
    display: inline-block;
    background-color: var(--cls-blk);
    padding: 2px 16px;
    border-radius: 16px;
    color: #fff;
  }
  /****************************************
  6.Recruit
  *****************************************/
  section.recruit-frame {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 64px 0;
  }
  section.recruit-frame h1 {
    margin-bottom: 24px;
    text-align: center;
  }
  section.recruit-frame p.recruit-title {
    font-size: 1.8rem;
    border: 2px solid var(--cls-blk);
    border-radius: 8px;
    padding: 4px 8px 4px 32px;
    display: inline-block;
    background: url(../img/recruit/beer.svg) no-repeat left 6px center;
    margin: 24px 0 0 0;
  }
  section.recruit-frame ul {
    margin: 24px 0;
    display: flex;
    flex-wrap: wrap;
  }
  section.recruit-frame ul li {
    background-color: #f5f5f5;
    border: 2px solid #fff;
    width: 120px;
    padding: 8px 8px;
  }
  section.recruit-frame ul li:nth-child(2n) {
    width: calc(100% - 120px);
  }
  section.recruite-footer-wrap {
    background: #323232;
  }
  section.recruite-footer-wrap div.recruite-footer {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 64px 0;
    color: #fff;
    display: flex;
    flex-direction: column;
  }
  section.recruite-footer-wrap div.recruite-footer div {
    width: 108px;
    margin: 0 auto;
  }
  section.recruite-footer-wrap div.recruite-footer p {
    width: 100%;
    font-size: 1.6rem;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 16px;
  }
  /****************************************
  7.BOOK
  *****************************************/
  section.booking-frame {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 64px 0;
    text-align: left;
  }
  section.booking-frame h1 {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  section.booking-frame p {
    font-size: 1.4rem;
    margin: 8px 0 0 0;
  }
  section.booking-frame ul {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    /* アイテム間の隙間 */
  }
  section.booking-frame ul li {
    padding: 40px 24px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  section.booking-frame ul li p {
    font-size: 3.2rem;
    text-align: center;
    line-height: 1.2;
    border-bottom: 4px solid var(--bg-cooper);
    display: inline-block;
    padding-bottom: 4px;
  }
  section.booking-frame ul li p span {
    font-size: 2rem;
  }
  section.booking-frame ul li p.second {
    border-bottom: 4px solid #0E3074;
  }
  section.booking-frame ul li div {
    width: 160px;
    margin: 32px auto;
  }
  section.booking-frame ul li a.book {
    background-color: var(--cls-red);
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
  }
  section.booking-frame-shop {
    width: var(--width-frame-sp);
    margin: 0 auto;
    padding: 64px 0;
    text-align: center;
  }
  section.booking-frame-shop h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
    line-height: 1.3;
  }
  section.booking-frame-shop h1 span {
    font-size: 1.8rem;
  }
  section.booking-frame-shop p {
    text-align: left;
  }
  section.booking-frame-shop p.font-sml {
    font-size: 1.4rem;
    margin-top: 8px;
  }
  section.booking-frame-shop ul {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
  }
  section.booking-frame-shop ul li {
    margin-bottom: 40px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    padding: 40px 24px;
  }
  section.booking-frame-shop ul li p.tel {
    margin-top: 8px;
    font-size: 3.8rem;
    text-align: center;
  }
  section.booking-frame-shop ul li div.hotpepper {
    margin: 16px 0 0 0;
  }
  section.booking-frame-shop ul li p.bg-second {
    background-color: var(--bg-2nd);
  }
  /****************************************
  .COMMON
  *****************************************/
  section.sub-title h1 {
    font-size: 2.8rem;
    padding: 0 8px;
    border-bottom: 3px solid var(--bg-cooper);
    display: inline-block;
  }
  section.sub-title-body {
    padding: 32px 0 24px 0;
    width: var(--width-frame-sp);
    margin: 0 auto;
  }
  section.sub-title-body h1 {
    font-size: 1.8rem;
    padding: 0 8px;
  }
  p.tag {
    border-radius: 8px;
    font-size: 1.5rem;
    background-color: var(--bg-cooper);
    color: #fff;
    padding: 2px 12px;
    display: inline-block;
    height: 28px;
  }
  p.no-smorking {
    padding: 4px 0 4px 36px;
    background: url(../img/common/ico-no-smorking.svg) no-repeat left center;
  }
  section.shop-nav {
    margin: 40px 0 0 0;
    padding: 24x 0;
    background-color: #fff;
  }
  section.shop-nav ul {
    width: var(--width-common-sp);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列 */
    grid-template-rows: repeat(3, auto);
    /* 3行（高さは自動） */
    gap: 16px;
  }
  section.shop-nav ul li {
    text-align: center;
  }
  section.shop-nav ul li p {
    font-weight: 600;
    margin-bottom: 8px;
  }
  section.shop-nav ul li img {
    width: 150px;
    margin: 0 auto;
    transition: opacity 0.3s ease;
  }
  section.shop-nav ul li img:hover {
    opacity: 0.8;
  }
  /****************************************
  CLOSE Smart phone
  *****************************************/
}
@media screen and (max-width: 912px) and (min-width: 680px) and (max-width: 912px) {
  section.shop-nav ul {
    width: 92%;
    max-width: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  section.shop-nav ul li {
    text-align: center;
  }
  section.shop-nav ul li p {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
  }
  section.shop-nav ul li img {
    width: 150px;
    margin: 0 auto;
    transition: opacity 0.3s ease;
  }
  section.shop-nav ul li img:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 912px) {
  section.book-wrap {
    padding: 64px 0;
    background-color: #FBFBFB;
    text-align: center;
  }
  section.book-wrap a.common-button {
    padding: 24px 48px;
    font-size: 1.8rem;
  }
  section.browse {
    padding: 64px 0;
    text-align: center;
    line-height: 1.3;
  }
  section.browse p {
    font-size: 3.2rem;
  }
  section.browse p span {
    font-size: 2.4rem;
  }
  section.browse div {
    width: 160px;
    margin: 16px auto;
  }
  section.browse a.common-button {
    padding: 24px 48px;
    font-size: 1.8rem;
    background-color: #6C97BD;
  }
  section.browse a.common-button:hover {
    opacity: 0.9;
  }
}