header {
   z-index: inherit;
}

.nav-fixed {
   z-index: 100;
}

@keyframes image-scale-pc {
   0% {
      scale: 1.25;
   }

   100% {
      scale: 1;
   }
}

#key {
   overflow: hidden;
}

#key .bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation: image-scale-pc 1.4s forwards;
}

#key [class*="deco"] {
   background: url("../img/shared/body-bg.jpg") repeat center top;
   transition: all 0.3s linear;
}

@media only screen and (max-width: 767px) {
   #key .bg {
      background: url("../img/index/key_sp.jpg") no-repeat center/cover;
   }

   #key h2 {
      width: 18.9vw;
      position: absolute;
      top: 23.6vw;
      right: 9vw;
   }

   #key h3 {
      width: 86.6vw;
      position: absolute;
      top: 128vw;
      left: 5vw;
   }

   #key .deco-1 {
      width: 31.6vw;
      height: 46vw;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-100%);
   }

   #key .deco-2 {
      width: 9.2vw;
      height: 16vw;
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(100%);
   }

   #key .deco-3 {
      width: 23vw;
      height: 8vw;
      position: absolute;
      top: 56%;
      right: 0;
      transform: translateX(100%);
   }

   #key .deco-4 {
      width: 31.3vw;
      height: 9.3vw;
      position: absolute;
      bottom: 14vw;
      right: 0;
      transform: translateX(100%);
   }

   #key .deco-5 {
      width: 10vw;
      height: 14vw;
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translateX(100%);
   }

   #key .deco-6 {
      width: 37.3vw;
      height: 10vw;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateX(-100%);
   }

   #key .deco-7 {
      width: 20vwvw;
      height: 15vw;
      position: absolute;
      bottom: 10vw;
      left: 0;
      transform: translateX(-100%);
   }

   #key .deco-8 {
      width: 9.6vw;
      height: 18.4vw;
      position: absolute;
      top: 103vw;
      left: 0;
      transform: translateX(-100%);
   }

   #key .deco-9 {
      width: 20vw;
      height: 31vw;
      position: absolute;
      top: 72vw;
      left: 0;
      transform: translateX(-100%);
   }

   header h1 {
      right: 12vw;
   }

   header .logo,
   header h1 {
      opacity: 0;
      transition: all 0.3s linear;
   }

   header.is-active #key .deco-1,
   header.is-active #key .deco-2,
   header.is-active #key .deco-3,
   header.is-active #key .deco-4,
   header.is-active #key .deco-5,
   header.is-active #key .deco-6,
   header.is-active #key .deco-7,
   header.is-active #key .deco-8,
   header.is-active #key .deco-9 {
      transform: translateX(0);
   }

   header.is-active .logo,
   header.is-active h1 {
      opacity: 1;
      transition-delay: 1s;
   }
}

@media only screen and (min-width: 768px) {
   body {
      line-height: 32px;
   }

   #key .bg {
      background: url("../img/index/key.jpg") no-repeat center/cover;
   }

   #key h2 {
      width: 117px;
      position: absolute;
      top: calc(50% - 360px);
      left: calc(50% + 166px);
   }

   #key h3 {
      width: 470px;
      position: absolute;
      top: calc(50% + 87px);
      left: calc(50% - 535px);
   }

   #key .deco-1 {
      width: 439px;
      height: 215px;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
   }

   #key .deco-2 {
      width: 143px;
      height: 150px;
      position: absolute;
      top: 196px;
      left: 0;
      transform: translateX(-100%);
   }

   #key .deco-3 {
      width: 260px;
      height: 706px;
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(100%);
   }

   #key .deco-4 {
      width: 164px;
      height: 244px;
      position: absolute;
      bottom: 0;
      right: 260px;
      transform: translateY(-20px);
      opacity: 0;
   }

   #key .deco-5 {
      width: calc(50% - 72px);
      height: 97px;
      position: absolute;
      bottom: 0;
      right: 424px;
      transform: translateY(100%);
   }

   #key .deco-6 {
      width: 200px;
      height: 200px;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateX(-100%);
   }

   header h1,
   header .logo,
   header #menu-toggle,
   header .col-l {
      opacity: 0;
      transition: all 0.3s linear;
      color: #1f1d1d;
   }

   header .col-l .btn-news a {
      background-image: url("../img/shared/btn-arrow.png");
   }

   #menu-toggle .map a {
      background-image: url("../img/shared/icon-location.png");
   }

   #menu-toggle .nav a:hover,
   #menu-toggle .nav a.current {
      border-bottom-color: #1f1d1d;
   }

   header.is-active #key .deco-1 {
      transform: translateY(0);
   }

   header.is-active #key .deco-2 {
      transform: translateX(0);
   }

   header.is-active #key .deco-3 {
      transform: translateX(0);
   }

   header.is-active #key .deco-4 {
      transform: translateY(0);
      opacity: 1;
   }

   header.is-active #key .deco-5 {
      transform: translateY(0);
   }

   header.is-active #key .deco-6 {
      transform: translateX(0);
   }

   header.is-active h1,
   header.is-active .logo,
   header.is-active #menu-toggle,
   header.is-active .col-l {
      opacity: 1;
      transition-delay: 1s;
   }
}

@media only screen and (min-width: 1301px) {
   #key h3 {
      left: calc(50% - 635px);
   }
}

#read {
   position: relative;
}

#read .row-2 {
   background: url("../img/shared/footer-bg.jpg") repeat center top;
}

@media only screen and (max-width: 767px) {
   #read .row-1 {
      position: relative;
      padding: 48vw 0 0;
   }

   #read .row-1:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/index/read-photo-2_sp.png") no-repeat center top/100% auto;
      position: absolute;
      top: -7vw;
      left: 0;
   }

   #read .row-1 h2 {
      width: 7.2vw;
      font-size: 7.2vw;
      line-height: 1;
      letter-spacing: 0.22em;
      position: relative;
      margin: 0 auto -50vw;
   }

   #read .row-1 h2 .txt-vertical {
      width: 7.2vw;
      height: 48vw;
   }

   #read .row-1 h2 .sub {
      display: block;
      width: 28vw;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #read .row-1 .bg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
      position: relative;
   }

   #read .row-1 .bg .photo {
      background: url("../img/index/read-photo-1.jpg") no-repeat center/cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   #read .row-1 h3 {
      display: flex;
      align-items: center;
      gap: 4vw;
      font-weight: 700;
      font-size: 4.8vw;
      letter-spacing: 0.62em;
      line-height: 1;
      color: #f1f0e8;
   }

   #read .row-1 h3:before,
   #read .row-1 h3:after {
      content: '';
      width: 10.5vw;
      border-top: 1px solid;
   }

   #read .row-2 .wrap {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      padding-top: 50vw;
      padding-bottom: 34vw;
   }

   #read .row-2 h3 {
      width: 14.6vw;
      height: 82vw;
      font-size: 7.3vw;
      line-height: 2;
      letter-spacing: 0.38em;
      position: absolute;
      top: -40vw;
      left: 50%;
      text-align: left;
      transform: translateX(-50%);
   }

   #read .row-2 h3 span {
      color: #fff;
   }
}

@media only screen and (min-width: 768px) {
   #read .row-1 {
      position: relative;
      padding: 177px 0 0;
   }

   #read .row-1:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/index/read-photo-2.png") no-repeat center top;
      position: absolute;
      top: -30px;
      left: 0;
   }

   #read .row-1 h2 {
      width: 70px;
      font-size: 34px;
      line-height: 70px;
      letter-spacing: 0.15em;
      margin: 0 auto 66px;
      position: relative;
   }

   #read .row-1 h2 .txt-vertical {
      width: 70px;
      height: 210px;
   }

   #read .row-1 h2 .sub {
      display: block;
      width: 148px;
      position: absolute;
      bottom: 0;
      left: 20px;
   }

   #read .row-1 .bg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
      position: relative;
      margin-top: -320px;
   }

   #read .row-1 .bg .photo {
      background: url("../img/index/read-photo-1.jpg") no-repeat center/cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   #read .row-1 h3 {
      display: flex;
      align-items: center;
      gap: 30px;
      font-weight: 700;
      font-size: 34px;
      letter-spacing: 0.62em;
      line-height: 70px;
      color: #f1f0e8;
   }

   #read .row-1 h3:before,
   #read .row-1 h3:after {
      content: '';
      width: 80px;
      border-top: 1px solid;
   }

   #read .row-2 {
      padding-bottom: 145px;
   }

   #read .row-2 .wrap {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      padding: 250px 0 140px;
   }

   #read .row-2 h3 {
      width: 70px;
      height: 400px;
      font-size: 33px;
      line-height: 70px;
      letter-spacing: 0.38em;
      position: absolute;
      top: -175px;
      left: calc(50% - 35px);
      text-align: left;
   }

   #read .row-2 h3 span {
      color: #fff;
   }

   #read .row-2 .txt {
      line-height: 37px;
   }
}

#recommended {
   background: url("../img/shared/footer-bg.jpg") repeat center top;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #recommended {
      color: #b1b0a7;
      padding-bottom: 32vw;
   }

   #recommended:before {
      content: '';
      width: 100%;
      height: 133.5vw;
      background: url("../img/index/recommended-deco_sp.png") no-repeat center top/100% auto;
      position: absolute;
      top: 132vw;
      left: 0;
   }

   #recommended .wrap {
      padding-top: 34vw;
   }

   #recommended h2 {
      width: max-content;
      font-size: 5.6vw;
      letter-spacing: 0.38em;
      line-height: 2;
      color: #fff;
      margin: 0 auto;
   }

   #recommended h2 span {
      padding-left: 31vw;
   }

   #recommended h3 {
      width: 24vw;
      height: 70vw;
      font-size: 6vw;
      letter-spacing: 0.38em;
      line-height: 2;
      color: #fff;
      position: absolute;
      top: 173vw;
      right: 13vw;
   }

   #recommended h3>span {
      padding-top: 26vw;
   }

   #recommended .photo-1 {
      width: 42.9vw;
      position: absolute;
      top: -14vw;
      right: 0;
   }

   #recommended .photo-2 {
      width: 51.6vw;
      margin-left: -6.6vw;
      padding-top: 6vw;
   }

   #recommended .photo-3 {
      width: 81.5vw;
      margin-left: auto;
      margin-right: -6.6vw;
      padding-top: 6vw;
   }

   #recommended .photo-4 {
      width: 38.7vw;
      margin-left: -6.6vw;
      padding-top: 6vw;
   }

   #recommended .txt {
      padding-top: 5vw;
   }

   #recommended .txt br {
      display: none;
   }

   #recommended .txt p+p {
      padding-top: 9vw;
   }

   #recommended .button {
      padding-top: 15vw;
   }
}

@media only screen and (min-width: 768px) {
   #recommended {
      padding-bottom: 31px;
   }

   #recommended:before {
      content: '';
      width: calc(50% + 193px);
      background: url("../img/shared/body-bg.jpg") repeat center top;
      position: absolute;
      top: 361px;
      bottom: 0;
      left: 0;
   }

   #recommended:after {
      content: '';
      width: 987px;
      height: 1002px;
      background: url("../img/index/recommended-deco.png") no-repeat center top;
      position: absolute;
      top: 503px;
      left: calc(50% - 663px);
   }

   #recommended .wrap {
      padding-bottom: 172px;
      z-index: 1;
   }

   #recommended h2 {
      font-size: 27px;
      line-height: 55px;
      letter-spacing: 0.38em;
      color: #fff;
      padding: 130px 0 0 210px;
   }

   #recommended h2 span {
      padding-left: 150px;
   }

   #recommended h3 {
      font-size: 34px;
      line-height: 55px;
      letter-spacing: 0.38em;
      padding: 530px 0 0 30px;
      position: relative;
      z-index: 1;
   }

   #recommended h3>span span {
      color: #fff;
   }

   #recommended .txt {
      width: 350px;
      height: 433px;
      padding: 60px 0 0 125px;
   }

   #recommended .txt p+p {
      padding-right: 30px;
   }

   #recommended .photo-1 {
      width: 360px;
      position: absolute;
      top: 0;
      right: -53px;
   }

   #recommended .photo-2 {
      width: 387px;
      position: absolute;
      top: 290px;
      left: -82px;
   }

   #recommended .photo-3 {
      width: 710px;
      position: absolute;
      top: 640px;
      right: -250px;
   }

   #recommended .photo-4 {
      width: 305px;
      position: absolute;
      bottom: 0;
      left: -250px;
   }

   #recommended .button {
      text-align: right;
      padding: 105px 37px 0 0;
   }

   #recommended .button a {
      justify-content: flex-end;
      width: 270px;
      letter-spacing: 0.3em;
   }
}

#yakitori {
   color: #b1b0a7;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #yakitori {
      background: #070302 url("../img/index/yakitori-bg-img.jpg") no-repeat top left 30%/178% auto;
      padding: 16vw 0 40vw;
   }

   #yakitori h2 {
      width: 31vw;
      color: #fff;
      font-size: 7.2vw;
      letter-spacing: 1.4em;
      line-height: 1;
      padding-left: 4.8vw;
   }

   #yakitori h2 .txt-vertical {
      display: block;
      width: 7.2vw;
      height: 52vw;
      margin-left: auto;
   }

   #yakitori h2 .sub {
      display: block;
   }

   #yakitori .txt {
      padding-top: 12vw;
   }

   #yakitori .button {
      padding-top: 15vw;
   }
}

@media only screen and (min-width: 768px) {
   #yakitori {
      background: url("../img/index/yakitori-bg-img.jpg") no-repeat center top/cover;
      padding: 205px 0 183px;
   }

   #yakitori .wrap {
      display: flex;
      justify-content: space-between;
      width: 100%;
   }

   #yakitori .wrap .col {
      width: calc(50% - 240px);
      min-width: 350px;
      order: 1;
   }

   #yakitori .wrap h2 {
      width: calc(50% - 350px);
      order: 2;
      font-size: 38px;
      line-height: 70px;
      letter-spacing: 1.35em;
      color: #fff;
      border-bottom: 1px solid;
      position: relative;
      padding-left: 85px;
   }

   #yakitori .wrap h2 .txt-vertical {
      width: 70px;
      height: 356px;
   }

   #yakitori .wrap h2 .sub {
      position: absolute;
      bottom: 48px;
      left: 30px;
   }

   #yakitori .wrap .txt {
      width: 317px;
      margin-left: auto;
   }

   #yakitori .wrap .button {
      width: 97%;
      padding-top: 44px;
   }

   #yakitori .wrap .button a {
      justify-content: flex-end;
      width: 100%;
   }
}

#ippin {
   background: url("../img/index/ippin-bg-img.jpg") no-repeat center top/cover, url("../img/shared/footer-bg.jpg") repeat center top;
   color: #b1b0a7;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #ippin {
      background-size: 165% auto, auto auto;
      padding-bottom: 30vw;
   }

   #ippin h2 {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      width: 24vw;
      height: 70vw;
      font-size: 6vw;
      line-height: 2;
      letter-spacing: 0.38em;
      text-align: left;
      position: absolute;
      top: -17vw;
      right: 0;
      padding: 6.6vw 6.6vw 3vw;
   }

   #ippin h2 span {
      padding-top: 24vw;
   }

   #ippin .txt {
      padding-top: 82.6vw;
   }

   #ippin .button {
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   #ippin .wrap {
      width: 100%;
      padding: 64px 0 96px;
   }

   #ippin h2 {
      background: url("../img/shared/body-bg.jpg") repeat center top;
      width: 50px;
      height: 524px;
      font-size: 27px;
      line-height: 50px;
      letter-spacing: 0.38em;
      text-align: center;
      position: absolute;
      top: -32px;
      right: 0;
      padding: 0 69px;
   }

   #ippin .txt {
      width: 286px;
      margin-left: auto;
      padding-right: 230px;
   }

   #ippin .button {
      text-align: right;
   }

   #ippin .button a {
      padding: 185px 107px 14px 20px;
   }
}

#shopinfo {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #shopinfo {
      padding: 35vw 0 0;
   }

   #shopinfo h2 {
      width: 10.6vw;
      height: 34vw;
      font-size: 5.3vw;
      letter-spacing: 0.22em;
      line-height: 2;
      margin: 0 auto;
   }

   #shopinfo .logo {
      border-bottom: 1px solid #1f1d1d;
      padding: 14vw 0 4vw;
   }

   #shopinfo .logo img {
      max-width: 31.6vw;
   }

   #shopinfo .logo figcaption {
      line-height: 24px;
      padding-top: 8vw;
   }

   #shopinfo .box .tel {
      padding-top: 5vw;
   }

   #shopinfo .box .btn-reserve {
      padding-top: 4vw;
   }

   #shopinfo .box .txt-info {
      padding: 20vw 0 16vw;
   }

   #shopinfo .box .txt-info dl {
      display: grid;
      grid-template-columns: 84px 1fr;
   }

   #shopinfo .box .txt-info dl+dl {
      padding-top: 8vw;
   }

   #shopinfo .box .photo-2 {
      margin: 0 -6.6vw;
      position: relative;
   }

   #shopinfo .box .photo-2:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 6px;
      right: 6px;
      bottom: 6px;
      left: 6px;
   }

   #shopinfo .box .photo-2 a {
      display: block;
      text-align: center;
      width: 8.8vw;
      font-weight: 500;
      font-size: 4.4vw;
      line-height: 2;
      letter-spacing: 0.1em;
      color: #fff;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   #shopinfo .box .photo-2 a:before {
      content: '';
      display: inline-block;
      width: 2vw;
      height: 3.2vw;
      background: url("../img/shared/btn-arrow-wh.png") no-repeat center top/cover;
      margin-bottom: 2vw;
   }
}

@media only screen and (min-width: 768px) {
   #shopinfo {
      padding: 298px 0 60px;
   }

   #shopinfo h2 {
      width: 48px;
      height: 230px;
      font-size: 28px;
      line-height: 48px;
      letter-spacing: 0.38em;
      margin: 0 auto;
   }

   #shopinfo .box {
      position: relative;
   }

   #shopinfo .box .photo-1 {
      width: 750px;
      position: absolute;
      top: 10px;
      right: -250px;
   }

   #shopinfo .box .photo-2 {
      width: 750px;
      position: absolute;
      top: 480px;
      left: -250px;
   }

   #shopinfo .box .photo-2:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 15px;
      right: 15px;
      bottom: 15px;
      left: 15px;
   }

   #shopinfo .box .photo-2 .button {
      position: absolute;
      bottom: 32px;
      right: 15px;
   }

   #shopinfo .box .photo-2 .button a {
      width: 207px;
      padding-left: 10px;
   }
#shopinfo .box .none {
   border-bottom: none;
}

   #shopinfo .box .none:before {
      display: none;
   }

   #shopinfo .box .none:after {
      display: none;
   }

   #shopinfo .box .col {
      width: 345px;
      margin-left: 70px;
   }

   #shopinfo .box .logo {
      border-bottom: 1px solid #1f1d1d;
   }

   #shopinfo .box .logo img {
      max-width: 133px;
      position: relative;
      left: 14px;
   }

   #shopinfo .box .logo figcaption {
      line-height: 25px;
      padding: 25px 0 15px;
   }

   #shopinfo .box .tel {
      padding-top: 8px;
   }

   #shopinfo .box .tel span {
      background-position: top 10px left 4px;
   }

   #shopinfo .box .btn-reserve {
      padding-top: 17px;
   }

   #shopinfo .box .txt-info {
      width: 435px;
      line-height: 25px;
      margin-left: auto;
      padding-top: 138px;
   }

   #shopinfo .box .txt-info dl {
      display: grid;
      grid-template-columns: 120px 1fr;
   }

   #shopinfo .box .txt-info dl+dl {
      padding-top: 25px;
   }

   #shopinfo .box .txt-info dl dd a {
      display: inline-block;
      background: url("../img/shared/icon-location.png") no-repeat center left/14px auto;
      font-weight: 700;
      font-size: 13px;
      line-height: 20px;
      margin-left: 10px;
      padding-left: 20px;
   }

   #shopinfo .box .txt-info dl dd a:hover {
      text-decoration: underline;
   }
}

@media only screen and (min-width: 1241px) {
   #shopinfo .box .photo-1 {
      right: -150px;
   }

   #shopinfo .box .photo-2 {
      left: -150px;
   }
}

#gmap {
   position: relative;
}

.gmap {
   width: 100%;
}

.gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

@media only screen and (max-width: 767px) {
   #gmap .wrap {
      padding: 0;
   }

   .gmap {
      height: 480px;
   }
}

@media only screen and (min-width: 768px) {
   #gmap {
      padding-bottom: 47px;
   }

   #gmap h2 {
      font-size: 29px;
      letter-spacing: 0.3em;
      line-height: 70px;
   }

   #gmap .box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 13px;
      line-height: 20px;
      padding-top: 16px;
   }

   #gmap .btn-map a {
      display: inline-block;
      background: url("../img/shared/icon-cookie.png") no-repeat center left/13px auto;
      padding-left: 20px;
   }

   #gmap .btn-map a:hover {
      text-decoration: underline;
   }

   #gmap .btn-print {
      font-size: 13px;
   }

   #gmap .btn-print a:hover {
      text-decoration: underline;
   }

   .gmap {
      height: 450px;
   }
}

#news {
   position: relative;
}

#news .feed figure a {
   display: block;
   width: 100%;
   position: relative;
}

#news .feed figure a span {
   width: 100% !important;
   height: 100% !important;
   position: absolute;
   top: 0;
   left: 0;
}

@media only screen and (max-width: 767px) {
   #news {
      padding: 24vw 0 30vw;
   }

   #news h2 {
      font-size: 7.2vw;
      line-height: 1.5;
      letter-spacing: 0.16em;
      color: #1f1d1d;
   }

   #news h2 span {
      font-size: 3vw;
      letter-spacing: 0.3em;
      text-transform: uppercase;
   }

   #news .feed .col {
      display: grid;
      grid-template-columns: 1fr 45vw;
      align-items: center;
      gap: 4vw;
      padding-top: 8vw;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0.06em;
   }

   #news .feed figure,
   #news .feed figure a {
      height: 100%;
      min-height: 100px;
   }

   #news .feed time {
      display: block;
   }

   #news .more {
      text-align: right;
      padding-top: 16vw;
   }

   #news .more a {
      display: inline-flex;
      align-items: center;
      gap: 2vw;
      font-weight: 500;
      font-size: 4.8vw;
      line-height: 1;
      letter-spacing: 0.1em;
   }

   #news .more a:after {
      content: '';
      width: 11.2vw;
      height: 2.27vw;
      background: url("../img/shared/arrow-right.png") no-repeat center top/cover;
      display: block;
   }
}

@media only screen and (min-width: 768px) {
   #news {
      padding-bottom: 110px;
   }

   #news h2 {
      font-size: 36px;
      letter-spacing: 0.16em;
   }

   #news h2 .sub {
      display: inline-block;
      font-size: 12px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      padding-bottom: 10px;
   }

   #news .feed {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 64px;
      padding-top: 40px;
   }

   #news .feed figure a {
      height: 220px;
   }

   #news .feed .text {
      line-height: 25px;
      letter-spacing: 0.06em;
      padding-top: 8px;
   }

   #news .feed time {
      display: block;
      font-size: 12px;
   }

   #news .feed a:hover {
      text-decoration: underline;
   }

   #news .more {
      padding-top: 53px;
      text-align: right;
   }

   #news .more a {
      display: inline-block;
      background: url("../img/shared/arrow-right.png") no-repeat center right/40px auto;
      padding-right: 48px;
      font-weight: 500;
   }

   #news .more a:hover {
      text-decoration: underline;
   }
}


.news_box {
	background: url('../img/shared/footer-bg.jpg') repeat center top;
    width: 800px;
    margin: 60px auto;
    line-height: 2em;
    padding-bottom:39px;
}
.news_box .ttl {
	color: #fff;
    padding: 39px 50px 10px;
    text-align: center;
    font-size: 22px;
    width: 560px;
    border-bottom: 1px solid #fff;
    margin: 0 auto;
}
.news_box .txt {
	color: #fff;
	padding: 20px 50px 0;
	text-align: center;
	font-size: 16px;
}
@media only screen and (max-width: 768px) {
.news_box {
    width: 90%;
    margin: 20px auto;
}
.news_box .ttl {
    padding: 39px 10px 10px;
    font-size: 17px;
    width: 80%;
}
.news_box .txt {
	padding: 20px 10px 0;
	font-size: 14px;
}
}