@charset "UTF-8";
/*
Theme Name: 真心庵 天真
Theme URI: https://shinshinan.jp/
Description: 真心庵 天真公式サイトの、新着情報・ギャラリーなど
Version: 1.1
Author: OWNDMEDIA.LAB
*/
/* ************************************************************************************************

   index.php

   ************************************************************************************************ */
.bg01 {
  background-image: url(img/common/bg01.jpg);
  background-size: cover;
  background-position: top;
}

.bg02 {
  background-image: url(img/common/bg02.jpg);
  background-size: cover;
  background-position: bottom;
}

.bg03 {
  background-image: url(img/common/bg03.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
}

.bg04 {
  background-image: url(img/common/bg04.jpg);
  background-size: contain;
  background-position: top;
}

/***** ファーストビュー *****/
#hero {
  position: relative;
  overflow: hidden;
}

.hero__movie {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.hero__logo {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 10%;
  height: auto;
  z-index: 3;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/***** ご挨拶 *****/
#index-message .wrap {
  display: grid;
  place-items: center;
}

.index-message__heading {
  font-size: 35px;
}

.index-message__txt {
  font-size: 20px;
  line-height: 3;
  margin: 0 100px;
}

.index-message__name {
  font-size: 20px;
  text-align: right;
}

/***** コンセプト *****/
#index-concept .flex {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.index-concept__box {
  width: 50%;
  text-align: center;
}

.index-concept__box p {
  font-family: ro-shino-std, "YuMincho", serif;
  font-size: 25px;
  line-height: 3;
  margin: 40px auto 0;
  text-align: left;
}

/***** 大将プロフィール *****/
#index-prof .flex {
  align-items: center;
  justify-content: space-between;
}

.index-prof__box01 {
  margin-right: 40px;
}

.index-prof__box01 img {
  width: 29vh;
}

.index-prof__name {
  margin: 5vh 0 3vh;
  font-size: 20px;
}

.index-prof__btn {
  text-align: right;
  margin-top: 30px;
}

/***** 或る日の流れ *****/
.index-flow__ttl {
  justify-content: space-between;
  align-items: flex-end;
}

.index-flow__container {
  align-items: center;
  width: 100%;
  height: 100%;
}

.index-flow__container .menu-flow__item {
  height: 300px;
}

/***** ギャラリー *****/
#index-images .flex {
  justify-content: space-between;
}

#index-images .wrap3 {
  padding: 70px 100px;
}

.index-images__img02 {
  align-self: flex-end;
}

.index-images__img01,
.index-images__img02 {
  width: 47%;
}

/***** 新着情報 *****/
#index-news > .flex {
  align-items: center;
  justify-content: space-around;
}

.index-news__box01 {
  width: 40%;
  margin-right: 50px;
}

.index-news__ig {
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.index-news__ig picture {
  width: 50%;
}

.index-news__tbl {
  margin: 40px 0;
}

.index-news__tbl th {
  padding: 10px 30px 10px 0;
}

.index-news__tbl td {
  padding: 10px 0;
}

.index-news__btn02 {
  text-align: right;
}

/* ************************************************************************************************

   page-menu.php

   ************************************************************************************************ */
#menu-din {
  padding: 100px 0 30px;
}

#menu-lun {
  padding: 50px 0 100px;
}

#menu-flow {
  padding: 100px 0;
}

#menu-first-meal {
  padding: 100px 0 0;
}

#menu-dri {
  padding: 100px 0 0;
}

.mac #menu-dri {
  padding: 100px 0;
}

.sub__wrap {
  align-items: center;
  justify-content: space-around;
}

.sub__wrap h3 {
  margin: 0 auto;
}

.sub__icon {
  width: 38px;
  margin: 100px auto 100px;
  display: block;
}

.menu-info__btn01 {
  text-align: center;
  margin-top: 6rem;
}

#menu-flow--sub .menu-flow__container {
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
  height: 100%;
}
#menu-flow--sub .menu-flow__container p {
  font-size: 14px;
  text-align: center;
  word-break: keep-all;
}
#menu-flow--sub .menu-flow__container .menu-flow__item {
  width: 30%;
  height: auto;
  margin-bottom: 50px;
}
#menu-flow--sub .menu-flow__container .menu-flow__item img {
  width: 100%;
}

.h2__ttl--sub {
  align-items: center !important;
  margin: 50px 0;
}
.h2__ttl--sub h2 {
  font-size: 36px;
}

#menu-first-meal .sub__ttl {
  width: 50%;
  margin-right: 50%;
}
#menu-first-meal .sub__ttl h3 {
  margin: 0 auto;
}

.menu-first-meal__unit.flex.reverse {
  flex-direction: row-reverse;
}
.menu-first-meal__unit.flex.reverse .menu-first-meal__box {
  position: absolute;
  left: 0;
}

.menu-first-meal__unit.flex {
  position: relative;
  margin: 0 auto;
  margin-bottom: 15rem;
}
.menu-first-meal__unit.flex .menu-first-meal__box {
  width: 50%;
  height: clamp(10rem, 8.75rem + 2.08vw, 11.25rem);
  padding: 1em 2em;
  display: flex;
  align-items: center;
  color: #fff;
  background: radial-gradient(rgba(34, 34, 34, 0.5), rgba(34, 34, 34, 0.9) 80%);
  position: absolute;
  right: 0;
  bottom: -10%;
  z-index: 10;
  word-break: keep-all;
}
.menu-first-meal__unit.flex .menu-first-meal__img {
  width: 60%;
}

.drink-info__btn01 {
  text-align: center;
}

.sub__container {
  width: 50%;
}

.menu__img {
  width: 45%;
}

.menu__item {
  padding: 50px;
  margin: 0 auto;
}

.menu__item:first-of-type {
  border-bottom: 1px solid rgba(15, 10, 10, 0.7);
  padding-top: 0;
}

.menu__item.item02 {
  display: flex;
  justify-content: center;
  padding: 50px 0;
}

.menu__ttl {
  font-size: 28px;
}

.menu__item.item01 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.menu__item.item01 .menu__ttl {
  margin-left: 1em;
}

.menu__price {
  text-align: right;
  margin: 0 10px 0 70px;
}

.menu__price--sp {
  display: none;
}

.menu__list li {
  font-size: 16px;
  line-height: 3;
}

.menu__list--price {
  line-height: normal;
}
.menu__list--price .menu__list--desc {
  line-height: 1.3;
}

.beside-list li {
  display: flex;
}
.beside-list .menu__list--desc {
  margin-left: 0;
  display: inline-block;
}

.m-list01 .menu__list--ttl {
  min-width: 280px;
}

.m-list02 .menu__list--ttl {
  min-width: 300px;
}

.spacer {
  padding: 0 48px;
}
@media screen and (max-width: 960px) {
  .spacer {
    padding: 0;
  }
}

/* 追記 おまかせお品書き説明文 */
.sub__container--line {
  margin: 2em 0;
  position: relative;
  padding: 0.5em 1.5em;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.sub__container--line::before,
.sub__container--line::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 1px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: black;
}

.sub__container--line::before {
  left: 10px;
}

.sub__container--line::after {
  right: 10px;
}

.sub__container_disc dd {
  margin-bottom: 1em;
}

/*おまかせ下文章*/
.menu__txt {
  width: 80%;
  margin: 0 auto;
  line-height: 3;
}

#menu-din .sub__container {
  margin-right: 5%;
}

#menu-lun .sub__container {
  margin-left: 5%;
}

#menu-lun .menu__item {
  border-bottom: none;
}

.menu-flow__container {
  justify-content: space-around;
  flex-direction: row-reverse;
}

.menu-flow__item {
  width: 16.6666666667%;
  padding: 0 10px;
}

.menu-flow__container p {
  margin: 20px auto 0;
}

.menu-dri__container {
  justify-content: space-between;
}
.menu-dri__container .menu-dri__table--box .menu-dri__table {
  width: 100%;
}
.menu-dri__container .menu-dri__table--box .menu-dri__table th {
  width: 60%;
}
.menu-dri__container .menu-dri__table--box .menu-dri__table td {
  width: 40%;
  text-align: right;
  word-break: keep-all;
}
.menu-dri__container .menu-dri__table--box .menu-dri__table .table-space {
  padding-top: 2rem;
}
.menu-dri__container .menu-dri__table--box p {
  margin-top: 2rem;
  text-align: left;
}
.menu-dri__container .menu-images__img01,
.menu-dri__container .menu-dri__table--box {
  width: 48%;
  text-align: center;
}

.menu-dri__btn {
  text-align: center;
}

.menu-dri__txt {
  text-align: center;
  margin: 80px 0 50px;
  line-height: 3;
  font-size: 16px;
  word-break: keep-all;
}

/* ************************************************************************************************

   about.php

   ************************************************************************************************ */
#about-concept {
  padding: 100px 0;
}

#about-info {
  padding: 100px 0;
}

#about-room {
  padding: 50px 0 0;
}

#about-name {
  padding: 0 0 70px;
}

#about-prof {
  padding: 100px 0 50px;
}

.mac #about-prof {
  padding: 100px 0;
}

#about-concept .sub__container {
  margin-right: 5%;
}

#about-info .sub__container {
  margin-left: 5%;
}

#about-room .sub__ttl {
  width: 50%;
  margin-left: 50%;
}
#about-room .sub__ttl h3 {
  margin: 0 auto;
}

.about-concept__box {
  text-align: center;
}

.about-concept__txt {
  font-size: 18px;
  line-height: 3;
  display: inline-block;
  text-align: left;
}

.about-room__unit.flex {
  position: relative;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 8rem;
}
.about-room__unit.flex .about-room__box {
  width: 50%;
  height: clamp(14rem, 12.75rem + 2.08vw, 11.25rem);
  padding: 1em 2em;
  display: flex;
  align-items: center;
  color: #fff;
  background: radial-gradient(rgba(34, 34, 34, 0.5), rgba(34, 34, 34, 0.9) 80%);
  position: absolute;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 10;
}
.about-room__unit.flex .about-room__box .about-room__txt {
  line-height: 1.8;
}
.about-room__unit.flex .about-room__img {
  width: 60%;
}

.about-room__unit.flex.reverse {
  flex-direction: row-reverse;
}
.about-room__unit.flex.reverse .about-room__box {
  position: absolute;
  left: 0;
}

.about__movie {
  width: 48%;
}

.about-info__img {
  width: 45%;
}

.about-info__tbl {
  margin: 0 auto;
}

.about-info__tbl tr {
  border-bottom: 1px solid rgba(15, 10, 10, 0.2);
}

.about-info__tbl th {
  padding: 10px;
  width: 25%;
  vertical-align: middle;
}

.about-info__tbl td {
  padding: 10px;
  vertical-align: middle;
}

.about-info__btn01 {
  text-align: center;
  margin: 7rem 0 3rem;
}

.about-info__btn02 {
  text-align: right;
  margin-top: 30px;
}

.about-name__img {
  width: 45%;
  text-align: center;
}

.en {
  color: rgba(15, 10, 10, 0.6);
  font-size: 0.9em;
}

.about-prof__container {
  align-items: center;
  justify-content: center;
}

.about-prof__img {
  width: 250px;
  margin-right: 50px;
}

/* ************************************************************************************************

   news / お知らせ

   ************************************************************************************************ */
/***** single-news.php *****/
#single {
  padding: 100px 0;
}

#single p {
  margin-bottom: 1.5em;
}

.single__wrap {
  width: 85%;
  margin: 0 auto;
}

.single__date {
  color: var(--red);
}

.single__ttl {
  margin: 20px 0 50px;
  align-items: center;
}

.single__ttl img {
  width: 50px;
  margin-right: 20px;
}

.single__thumbnail {
  display: none;
  margin-top: 60px;
  text-align: center;
}

.single__thumbnail img {
  max-width: 800px;
  height: auto;
}

.nav__content {
  justify-content: center;
  margin-top: 70px;
}

.nav__content a:nth-of-type(2) {
  margin: 0 120px;
}

/***** archive-news.php *****/
#news {
  padding: 100px 0;
}

.news__wrap {
  width: 85%;
  margin: 0 auto;
}

.news__item {
  margin-bottom: 70px;
  align-items: center;
  padding-right: 20px;
  position: relative;
}

.news__item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  border: 1px solid var(--blk);
  opacity: 0;
  transition: 0.5s;
}

.news__item:hover::before {
  opacity: 0.7;
  transition: 0.4s;
}

.news__btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--red);
  display: none;
  border-bottom: 1px solid var(--red);
}

.news__thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin-right: 60px;
}

.news__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news__date {
  color: var(--red);
  font-size: 14px;
}

.news__ttl {
  font-size: 24px;
  margin-top: 10px;
}

.news__txt {
  width: 70%;
}

.pagination {
  margin-top: 80px;
  text-align: center;
}

/***** ページネーション、ボタン *****/
.pagination .page-numbers {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.pagination .page-numbers li {
  font-size: 15px;
  margin: 0 10px;
}

.pagination .page-numbers li .current {
  border-bottom: 1px solid var(--red);
  font-weight: bold;
}

.nav__content a {
  color: var(--red);
  font-size: 16px;
  padding-bottom: 3px;
  background: linear-gradient(currentcolor, currentcolor) left bottom/100% 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.nav__content a:hover {
  background-position: right bottom;
  background-size: 0 1px;
}

/* ************************************************************************************************

   gallery

   ************************************************************************************************ */
/***** archive-gallery.php *****/
#gallery {
  padding: 100px 0 50px;
}

.mac #gallery {
  padding: 100px 0;
}

.gallery__wrap {
  flex-wrap: wrap;
  justify-content: center;
}

.gallery__item {
  width: 33.3333333333%;
  aspect-ratio: 1/1;
  display: block;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease-in-out;
}

.gallery__item img:hover {
  filter: saturate(130%);
  transform: scale(1.2);
  transition: 0.5s ease-in-out;
}

.gallery__btn {
  text-align: center;
  margin-top: 50px;
}

.gallery__btn img {
  width: 20px;
  margin-right: 3px;
  display: inline-flex;
  vertical-align: sub;
}

/***** single-gallery.php *****/
.single-g__thumbnail {
  text-align: center;
  margin-bottom: 60px;
}

.single-g__txt {
  text-align: center;
  margin-bottom: 60px;
  color: var(--red);
}

.single-g__thumbnail img {
  width: auto;
  height: 75vh;
}

.single-g__date {
  color: var(--red);
  text-align: center;
  margin-bottom: 30px;
}

/* ************************************************************************************************

   微調整

   ************************************************************************************************ */
@media screen and (max-height: 700px) {
  /***** index.php @max-height700px *****/
  .index-flow__ttl {
    align-items: center;
  }
  .index-news__box01 {
    width: 37%;
  }
}
@media screen and (min-width: 1900px) {
  .index-flow__container .menu-flow__item {
    height: 450px;
  }
}
@media screen and (max-width: 1537px) {
  .menu__txt {
    width: 95%;
  }
}
@media screen and (max-width: 1440px) {
  /***** index.php @1440px *****/
  .hero__logo {
    width: 13%;
  }
  .index-concept__img {
    width: 60%;
  }
  .index-prof__box02 {
    width: 60%;
  }
  .index-news__tbl th {
    width: 25%;
  }
  /***** menu.php @1440px *****/
  .menu__item {
    width: 100%;
    padding: 50px 20px;
  }
  /***** single-gallery.php @1440px *****/
  .single-g__thumbnail img {
    height: 80vh;
  }
}
/***** Edge,IE調整 *****/
@supports (-ms-ime-align: auto) {
  .hero__movie {
    height: auto;
  }
  .index-message__container {
    margin: auto;
  }
  .index-concept__box,
  .menu-flow__item,
  .sub__container,
  #menu-flow .sub__wrap,
  #menu-dri .sub__wrap,
  #about-prof .sub__wrap {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #menu-dri {
    padding: 100px 0;
  }
  #about-prof {
    padding: 100px 0;
  }
  #gallery {
    padding: 100px 0;
  }
  @media screen and (max-width: 1440px) {
    .hero__movie {
      height: 100%;
    }
  }
}
/***** FireFox調整 *****/
@-moz-document url-prefix() {
  .index-message__container {
    margin: auto;
  }
  .index-concept__box,
  .menu-flow__item,
  .sub__container,
  #menu-flow .sub__wrap,
  #menu-dri .sub__wrap,
  #about-prof .sub__wrap {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #menu-dri {
    padding: 100px 0;
  }
  #about-prof {
    padding: 100px 0;
  }
  #gallery {
    padding: 100px 0;
  }
}
/* ************************************************************************************************

   1025px

   ************************************************************************************************ */
@media screen and (max-width: 1025px) {
  /***** index.php @1024px *****/
  .index-message__txt {
    margin: 0 80px;
  }
  .index-prof__box02 {
    width: 73%;
  }
  .index-flow__ttl {
    justify-content: space-around;
  }
  .index-flow__container .menu-flow__item {
    height: 250px;
  }
  #index-images .wrap3 {
    padding: 50px;
  }
  .index-news__tbl th {
    width: 32%;
  }
  .index-news__box01 {
    width: 50%;
  }
  .index-prof__box01 {
    text-align: center;
  }
  .index-prof__name {
    margin: 3vh 0 3vh;
  }
  .index-prof__txt {
    text-align: left;
  }
  .index-prof__box01 img {
    width: 22vh;
  }
  /***** menu.php @1024px *****/
  .sub__wrap {
    flex-direction: column;
  }
  .sub__container {
    width: 100%;
  }
  #menu-lun .sub__wrap {
    flex-direction: column-reverse;
  }
  #menu-din .sub__container {
    margin: 0 auto;
  }
  #menu-lun .sub__container {
    margin: 0 auto;
  }
  .menu__item {
    width: auto;
    padding: 50px;
  }
  .menu__img {
    width: 65%;
  }
  #menu-dri {
    padding: 70px 0 100px;
  }
  #menu-first-meal {
    padding: 50px 0 0;
  }
  .menu__txt {
    width: 80%;
  }
  #menu-first-meal .sub__ttl {
    margin-right: 0;
    width: 100%;
  }
  /***** about.php @1024px *****/
  #about-prof {
    padding: 100px 0;
  }
  #about-concept .sub__container {
    margin: 0 auto;
  }
  #about-concept .sub__container .about-concept__box {
    margin: 0 auto 50px;
  }
  #about-info .sub__container {
    margin: 0 auto;
  }
  .about__movie {
    width: 80%;
    margin-top: 70px;
  }
  #about-info .sub__wrap {
    flex-direction: column-reverse;
  }
  .about-info__img {
    width: 80%;
  }
  .about-info__btn02 {
    margin: 30px 90px 50px 0;
  }
  .about-name__img {
    width: 80%;
    margin-top: 3rem;
  }
  /***** news @1024px *****/
  .single__wrap,
  .news__wrap {
    width: 90%;
  }
  .news__thumbnail {
    margin-right: 40px;
  }
  .single__thumbnail img {
    max-width: 100%;
  }
  .nav__content a {
    font-size: 15px;
  }
  .news__item::before {
    opacity: 0.7;
  }
  .news__btn {
    display: block;
  }
  /***** gallery @1024px *****/
  #gallery {
    padding: 100px 0;
  }
}
/* ************************************************************************************************

   960px

   ************************************************************************************************ */
@media screen and (max-width: 959px) {
  /***** index.php @960px *****/
  .hero__logo {
    width: 20%;
  }
  .index-message__txt {
    line-height: 2.5;
    margin: 0px 50px;
  }
  #index-concept .flex {
    flex-direction: column-reverse;
  }
  .index-concept__img {
    width: 55vh;
  }
  .index-concept__box {
    width: 100%;
    margin: 0 auto 50px;
  }
  .index-prof__box01 {
    width: 100%;
    text-align: left;
  }
  #index-prof .flex {
    flex-direction: column;
    justify-content: center;
  }
  .index-prof__box01 {
    margin-right: 0;
  }
  .index-prof__box01 img {
    width: 19vh;
  }
  .index-prof__name {
    margin: 2vh 0 1vh;
  }
  .index-prof__box02 {
    width: 100%;
    text-align: right;
    margin-top: 3vh;
  }
  .index-prof__box02 img {
    width: 50%;
  }
  .index-prof__btn {
    margin-top: 20px;
  }
  .index-flow__container {
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: center;
  }
  .index-flow__container .menu-flow__item {
    height: auto;
    width: 30%;
    margin-bottom: 70px;
  }
  #index-images .flex {
    flex-direction: column;
    justify-content: space-around;
    gap: 3rem;
  }
  .index-images__img01,
  .index-images__img02 {
    width: 80%;
  }
  #index-news > .flex {
    flex-direction: column-reverse;
  }
  .index-news__box01 {
    margin-right: 0;
  }
  .index-news__tbl th {
    width: auto;
  }
  /***** menu.php @960px *****/
  #menu-din {
    padding: 70px 0;
  }
  #menu-flow {
    padding: 70px 0 100px;
  }
  .sub__icon {
    margin: 80px auto;
  }
  .menu__img {
    width: 80%;
  }
  .menu__ttl {
    font-size: 25px;
  }
  .menu-flow__item {
    padding: 0 7px;
  }
  .menu-dri__txt {
    font-size: 14px;
    margin: 50px 0 40px;
  }
  .h2__ttl--sub {
    text-align: center;
  }
  .h2__ttl--sub h2 {
    font-size: 32px;
  }
  #menu-flow--sub .menu-flow__container .menu-flow__item {
    width: 45%;
  }
  .menu-info__btn01 {
    margin-top: 3rem;
  }
  .menu-first-meal__unit.flex .menu-first-meal__box {
    width: 70%;
    bottom: -20%;
  }
  .menu-first-meal__unit.flex .menu-first-meal__img {
    width: 95%;
  }
  .menu-dri__container {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }
  .menu-dri__container .menu-images__img01,
  .menu-dri__container .menu-dri__table--box {
    width: 90%;
  }
  /***** about.php @960px *****/
  #about-concept {
    padding: 70px 0;
  }
  #about-info {
    padding: 50px 0;
  }
  #about-prof {
    padding: 70px 0 100px;
  }
  .about-concept__txt {
    font-size: 16px;
  }
  .about__movie {
    width: 90%;
    margin-top: 50px;
  }
  #about-room .sub__ttl {
    margin-left: 0;
    width: 100%;
  }
  .about-room__unit.flex {
    width: 100%;
    margin-bottom: 16rem;
  }
  .about-room__unit.flex .about-room__img {
    width: 95%;
  }
  .about-room__unit.flex .about-room__box {
    width: 70%;
    bottom: -10%;
  }
  .about-info__btn01 {
    margin: 4rem 0 5rem;
  }
  .about-info__tbl {
    width: 80%;
  }
  .about-info__btn02 {
    margin: 30px 70px 50px 0;
  }
  .about-prof__img {
    width: 200px;
    margin-right: 40px;
  }
  /***** news @960px *****/
  #single,
  #news {
    padding: 70px 0;
  }
  .single__thumbnail {
    margin-top: 50px;
  }
  .single__ttl img {
    width: 45px;
  }
  .nav__content {
    margin-top: 50px;
  }
  .nav__content a:nth-of-type(2) {
    margin: 0 80px;
  }
  .news__ttl {
    font-size: 20px;
  }
  .news__thumbnail {
    margin-right: 30px;
  }
  .news__item {
    margin-bottom: 50px;
    padding-right: 30px;
  }
  .news__txt {
    width: 59%;
  }
  .pagination {
    margin-top: 60px;
  }
  .news__btn {
    font-size: 13px;
    top: 15px;
    right: 20px;
  }
  /***** gallery @960px *****/
  #gallery {
    padding: 70px 0;
  }
  .single-g__thumbnail {
    margin-bottom: 50px;
  }
  .single-g__thumbnail img {
    height: auto;
    width: 100%;
  }
  .single-g__date {
    margin-bottom: 20px;
  }
}
/* ************************************************************************************************

   560px

   ************************************************************************************************ */
@media screen and (max-width: 559px) {
  /***** index.php @560px *****/
  .bg01 {
    background-image: url(img/common/bg01_sp.jpg);
  }
  .bg02 {
    background-image: url(img/common/bg02_sp.jpg);
  }
  .bg03 {
    background-image: url(img/common/bg03_sp.jpg);
  }
  .bg04 {
    background-image: url(img/common/bg04_sp.jpg);
    background-size: contain;
  }
  #hero {
    width: 100%;
    height: 100vh;
  }
  .hero__logo {
    width: 30%;
  }
  #index-message .wrap {
    width: 100%;
    height: 100vh;
  }
  .index-message__container {
    writing-mode: horizontal-tb;
  }
  .index-message__heading {
    writing-mode: vertical-rl;
    font-size: 28px;
    margin: 0 auto;
  }
  .index-message__txt {
    font-size: 14px;
    line-height: 2;
    margin: 30px 0 20px;
  }
  .index-message__name {
    font-size: 14px;
    text-align: left;
  }
  #index-concept .flex {
    justify-content: center;
    width: 100%;
    height: 100vh;
  }
  .index-concept__box {
    margin: 0 auto 30px;
  }
  .index-concept__box p {
    font-size: 18px;
    margin-top: 25px;
  }
  .index-concept__box img {
    width: 65px;
  }
  #index-prof {
    padding: 70px 0 60px;
  }
  .index-prof__box01 {
    text-align: center;
  }
  .index-prof__name {
    font-size: 16px;
    margin: 20px 0;
  }
  .index-prof__box01 img {
    width: 60%;
  }
  .index-prof__box02 {
    margin-top: 40px;
  }
  .index-prof__box02 img {
    width: 100%;
  }
  #index-flow {
    padding: 60px 0 70px;
  }
  .index-flow__ttl {
    flex-direction: column;
    align-items: normal;
  }
  .index-flow__btn {
    text-align: right;
    width: 100%;
    margin: 10px 0;
  }
  .index-flow__container {
    margin-top: 40px;
  }
  .index-flow__container .menu-flow__item {
    width: 45%;
    margin-bottom: 30px;
  }
  #index-images .wrap3 {
    padding: 0;
  }
  .index-images__img01,
  .index-images__img02 {
    width: 95%;
  }
  #index-news {
    padding: 60px 0 100px;
  }
  .index-news__tbl {
    margin: 30px 0 0;
  }
  .index-news__tbl th,
  .index-news__tbl td {
    width: 100%;
    display: block;
  }
  .index-news__tbl th {
    padding: 10px 0;
  }
  .index-news__tbl td {
    padding: 0 0 20px;
  }
  .index-news__box01 {
    width: 100%;
  }
  .index-news__ig {
    margin: 50px 0 20px;
  }
  .index-news__btn01 {
    text-align: right;
  }
  /***** page-menu.php @560px*****/
  #menu-lun {
    padding: 30px 0;
  }
  #menu-flow {
    padding: 70px 0;
  }
  .h2__ttl--sub {
    margin: 40px 0;
  }
  .h2__ttl--sub h2 {
    font-size: 27px;
  }
  .h2__ttl--sub .sub__icon2 {
    width: 33px;
  }
  .sub__icon {
    width: 33px;
    margin: 50px auto;
  }
  .menu__item.item01,
  .menu__item.item02 {
    writing-mode: horizontal-tb;
    width: 100%;
    padding: 30px 0;
  }
  .menu__item.item01 {
    text-align: center;
  }
  .menu__list {
    width: 100%;
  }
  .m-list01 .menu__list--ttl,
  .m-list02 .menu__list--ttl {
    min-width: 0;
  }
  .m-list01 .menu__list--ttl {
    width: 85%;
  }
  .m-list01 .menu__list--price {
    width: 60%;
  }
  .m-list02 .menu__list--ttl {
    width: 60%;
  }
  .m-list02 .menu__list--price {
    width: 40%;
  }
  .menu__price--pc {
    display: none;
  }
  .menu__price--sp {
    display: block;
  }
  .menu__price {
    margin: 5px auto 20px;
    text-align: center;
  }
  .menu__list li {
    font-size: 15px;
  }
  .menu__ttl {
    font-size: 22px;
    text-align: center;
  }
  .menu__item.item01 .menu__ttl {
    margin-left: 0;
    margin-bottom: 0.5em;
  }
  .menu__img {
    width: 90%;
  }
  .menu-flow__container {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .menu-flow__item {
    padding: 0;
    width: 45%;
    margin-bottom: 30px;
  }
  .menu-flow__container p {
    margin: 15px auto 0;
  }
  #menu-flow--sub .menu-flow__container {
    justify-content: center;
  }
  #menu-flow--sub .menu-flow__container .menu-flow__item {
    width: 90%;
    margin-bottom: 30px;
  }
  .menu-first-meal__unit.flex .menu-first-meal__box {
    width: 90%;
    bottom: -40%;
  }
  .menu-info__btn01 {
    margin-top: 1rem;
  }
  #menu-dri {
    padding: 30px 0 100px;
  }
  .menu-dri__txt {
    margin: 30px 0 40px;
    line-height: 2.2;
  }
  /*おまかせ下文章*/
  .menu__txt {
    width: 100%;
    line-height: 2;
  }
  /***** about.php @560px*****/
  #about-concept .about-concept__box {
    margin: 0 auto 30px;
  }
  #about-info {
    padding: 30px 0 50px;
  }
  #about-name {
    padding: 0 0 100px;
  }
  .about-concept__txt {
    font-size: 14px;
  }
  .about__movie {
    width: 100%;
    margin-top: 40px;
  }
  .about-room__unit.flex {
    margin-bottom: 20rem;
  }
  .about-room__unit.flex .about-room__box {
    width: 90%;
    bottom: -25%;
  }
  .about-info__tbl {
    width: 100%;
  }
  .about-info__tbl th,
  .about-info__tbl td {
    font-size: 13px;
    display: block;
    width: 100%;
  }
  .about-info__tbl th {
    color: var(--red);
    padding: 10px 0 0 10px;
  }
  .about-info__tbl td {
    padding: 10px;
  }
  .about-info__btn02 {
    margin: 20px 0 30px;
  }
  .about-info__img {
    width: 100%;
  }
  .about-prof__container {
    flex-direction: column;
  }
  .about-prof__img {
    width: 180px;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .about-prof__name {
    text-align: center;
    display: block;
    margin-bottom: -30px;
    font-size: 1.2em;
  }
  /***** news @560px *****/
  #single,
  #news {
    padding: 70px 0 100px;
  }
  .single__wrap,
  .news__wrap {
    width: 100%;
  }
  .single__ttl {
    flex-direction: column-reverse;
  }
  .single__ttl img {
    width: 35px;
    margin: 30px 0 0;
  }
  .single__date {
    text-align: center;
  }
  .nav__content {
    justify-content: space-between;
  }
  .nav__content a {
    font-size: 13px;
  }
  .nav__content a:nth-of-type(2) {
    margin: 0;
  }
  .news__item {
    flex-direction: column-reverse;
    padding: 20px 20px 70px;
    border: 1px solid rgba(15, 10, 10, 0.7);
  }
  .news__item::before {
    display: none;
  }
  .news__ttl {
    font-size: 17px;
  }
  .news__date {
    font-size: 13px;
    text-align: center;
  }
  .news__thumbnail {
    margin-right: 0;
    margin-top: 20px;
  }
  .news__btn {
    top: unset;
    bottom: 20px;
  }
  .news__txt {
    width: 100%;
  }
  /***** gallery @560px *****/
  #gallery {
    padding: 70px 0 100px;
  }
  .gallery__item {
    width: 50%;
  }
  .gallery__btn {
    margin-top: 40px;
  }
  .gallery__btn img {
    width: 18px;
  }
  #gallery .pagination {
    margin-top: 50px;
  }
  .single-g__txt {
    margin-bottom: 30px;
  }
  .single-g__thumbnail {
    margin-bottom: 30px;
  }
  .single-g__date {
    margin-bottom: 10px;
  }
}
/* ************************************************************************************************

   320px

   ************************************************************************************************ */
@media screen and (max-width: 320px) {
  #index-prof,
  #index-flow {
    padding: 50px 0;
  }
  #index-news {
    padding: 50px 0 70px;
  }
  #index-message .wrap {
    height: auto;
    padding: 50px 20px;
  }
  #index-concept .flex {
    height: auto;
    padding: 50px 30px;
  }
  .menu__item {
    width: 80%;
  }
  .menu__img {
    width: 100%;
  }
  .news__item {
    padding: 15px 15px 70px;
  }
  .nav__content a {
    font-size: 12px;
  }
  .about-concept__txt {
    font-size: 13px;
  }
}
/* ************************************************************************************************

   微調節

   ************************************************************************************************ */
@media screen and (max-width: 430px) {
  /***** about.php @430px*****/
  .menu-first-meal__unit.flex .menu-first-meal__box {
    bottom: -58%;
  }
  .about-room__unit.flex .about-room__box {
    bottom: -30%;
  }
}/*# sourceMappingURL=style.css.map */